/* Micropipe shared theme.

   The foundation every interface loads: the calculation application, the admin
   panel and the customer-facing licence pages. Tokens, typography, form
   conventions and the utility class vocabulary live here and nowhere else
   (D-ARC-08, spec 5.5) - a palette restated per interface becomes two
   palettes at the first change to it.

   Loaded after pico.classless.red.min.css and before the stylesheet belonging
   to the interface, so an interface can still override anything here.

   This file was extracted from micropipe/css/custom.css, which keeps only the
   rules specific to the calculation application - header, footer, results,
   tools. The two must be deployed together.

   Direction-sensitive declarations use logical properties throughout, so
   Arabic and Hebrew mirror without a second rule to keep in step. */

/* Variables */

:root {
	--pico-form-element-spacing-vertical: 0.35rem;
	--pico-form-element-spacing-horizontal: 0.75rem;
	--pico-font-size: 1rem;
	--pico-typography-spacing-vertical: 1.5rem;
}

:root {
	--omega-border-width-0p25em: 0.25em;
}

/* Dark mode.

   The status colours are new to the commercial interfaces - licence state,
   payment state, expiry warnings - and are palette, so they are defined here
   with the rest of it rather than in the admin stylesheet. */

@media only screen and (prefers-color-scheme: dark) {

	:root:not([data-theme]) {

		--omega-color-grey: #1C212C;

		--omega-color-success: #5FD39A;
		--omega-color-success-background: #12331F;
		--omega-color-warning: #E8B457;
		--omega-color-warning-background: #3A2E12;
		--omega-color-danger: #F08880;
		--omega-color-danger-background: #3A1A18;

		.light-theme { display: none; }

		.dark-theme { display: block; }

	}

}

[data-theme="dark"] {

	--omega-color-grey: #1C212C;

	--omega-color-success: #5FD39A;
	--omega-color-success-background: #12331F;
	--omega-color-warning: #E8B457;
	--omega-color-warning-background: #3A2E12;
	--omega-color-danger: #F08880;
	--omega-color-danger-background: #3A1A18;

	.light-theme { display: none; }

	.dark-theme { display: block; }

}

/* Light mode */

[data-theme="light"], :root:not([data-theme="dark"]) {

	--omega-color-grey: #fbfcfc;

	--omega-color-success: #1F7A4D;
	--omega-color-success-background: #E8F5EE;
	--omega-color-warning: #8A5A00;
	--omega-color-warning-background: #FDF3E0;
	--omega-color-danger: #B3261E;
	--omega-color-danger-background: #FCEBEA;

	.light-theme { display: block; }

	.dark-theme { display: none; }

}

/* General */

label, th { font-weight: bold; }

hr { margin-top: initial; }

h1 { font-size: 2.5rem; line-height: 1.2; }

p { margin-bottom: var(--pico-spacing); }

img { line-height: 0; }

/* Containers */

body > footer, body > header, body > main { max-width: none; padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); }

/* Header and footer chrome.

   The rules the application and the customer-facing pages share - the two
   rules and the logo block. What goes inside them differs per interface and
   is defined there. */

header { border-bottom: var(--pico-border-width) solid var(--pico-color); }

footer { border-top: var(--pico-border-width) solid var(--pico-color); }

#footer-logos { display: flex; justify-content: flex-end; gap: var(--pico-spacing); margin-bottom: var(--pico-spacing); }

.logo-container { max-width: 100px; }

/* Forms */

input:required:not(:disabled), button:required:not(:disabled), textarea:required:not(:disabled), select:required:not(:disabled) { border-color: var(--pico-form-element-invalid-border-color); }
input:required:valid, button:required:valid, textarea:required:valid, select:required:valid { border-color: var(--pico-form-element-border-color); }

input[type=number]:required:in-range:not(:placeholder-shown) { border-color: var(--pico-form-element-border-color); }

input:not([type=checkbox],[type=radio]), select, textarea { margin-bottom: initial; }

input:not([type=checkbox],[type=radio],[type=range]) { height: initial; }

fieldset { border: var(--pico-border-width) solid var(--pico-color); border-radius: var(--pico-border-radius); padding: var(--pico-spacing) var(--pico-spacing) 0 var(--pico-spacing); }
fieldset legend { font-weight: bold; padding: 0 calc(var(--pico-spacing) * .5); }

label:has([type=checkbox],[type=radio]) { cursor: default; }

input[type=checkbox] { display: block; margin-top: calc(var(--pico-spacing) * .75); }

optgroup.category { font-size: 1.25rem; }
option { font-size: initial; }

.button-large { font-weight: bold; font-size: 1.25rem; line-height: 1.25rem; }

.field-display-value { display: inline-block; width: 100%; margin-top: calc(var(--pico-spacing) * .25); margin-bottom: initial; --pico-background-color: var(--pico-form-element-background-color); --pico-border-color: var(--pico-form-element-border-color); --pico-color: var(--pico-form-element-color); --pico-box-shadow: none; border: var(--pico-border-width) solid var(--pico-border-color); border-radius: var(--pico-border-radius); outline: 0; background-color: var(--pico-background-color); box-shadow: var(--pico-box-shadow); color: var(--pico-color); opacity: var(--pico-form-element-disabled-opacity); font-weight: var(--pico-font-weight); padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); }

.form-element-disabled-opacity { opacity: var(--pico-form-element-disabled-opacity); }

.field-highlight { border: var(--omega-border-width-0p25em) solid var(--pico-tooltip-background-color); transition: all 0.25s; }

/* Loader */

.loader-container { width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; background: var(--omega-color-grey); z-index: 4; }

.loader-spinner { width: 5em; height: 5em; border: 0.5em solid; border-color: var(--pico-primary) transparent var(--pico-primary-hover) transparent; border-radius: 50%; animation: spin-anim 1.2s linear infinite; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

@keyframes spin-anim { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Grid */

.display-grid-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(14em, 1fr)); grid-row-gap: 0; grid-column-gap: var(--pico-spacing); justify-content: flex-start; align-items: start; }

.grid-column-span-2 { grid-column-end: span 2; }

.grid-column-span-3 { grid-column-end: span 3; }

.grid-column-start-1 { grid-column-start: 1; }

.field-section-break { grid-column: 1 / -1; margin: 0 0 var(--pico-spacing) 0; }

/* Flex */

.display-flex { display: flex; flex-wrap: wrap; }

.flex-direction-column { flex-direction: column; }

.justify-content-space-between { justify-content: space-between; }

.align-items-center { align-items: center; }

.gap { gap: var(--pico-spacing); }

.gap-0p25 { gap: calc(var(--pico-spacing) * .25); }

/* Table */

table.font-size-0p7rem th, table.font-size-0p7rem td { padding: calc(var(--pico-spacing) / 3); }

table.font-size-0p8rem th, table.font-size-0p8rem td { padding: calc(var(--pico-spacing) / 2); }

table.font-size-0p7rem input:not([type=checkbox],[type=radio],[type=range],[type=file]), select, textarea, table.font-size-0p8rem input:not([type=checkbox],[type=radio],[type=range],[type=file]), select, textarea { -webkit-appearance: initial; -moz-appearance: initial; appearance: initial; }

table.font-size-0p7rem select:not([multiple],[size]), table.font-size-0p8rem select:not([multiple],[size]) { padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) * .5); padding-inline-end: var(--pico-form-element-spacing-horizontal); background-image: none; }

table.font-size-0p7rem input:not([type=checkbox],[type=radio]), select, textarea, table.font-size-0p8rem input:not([type=checkbox],[type=radio]), select, textarea { padding: var(--pico-form-element-spacing-vertical) calc(var(--pico-form-element-spacing-horizontal) * .5); }

/* Display / hide */

.display { display: block; transition: all 0.25s; transition-behavior: allow-discrete; opacity: 1; position: relative; z-index: 1; }

.hide { display: none; transition: all 0.25s; transition-behavior: allow-discrete; opacity: 0; position: relative; z-index: 0; }

/* Background */

.background-grey { background: var(--omega-color-grey); padding: var(--pico-spacing); }

/* Notification & messages */

#notification-panel, .message-panel { text-align: start; height: fit-content; padding: 1em; line-height: 1; background: var(--pico-tooltip-background-color); color: var(--pico-tooltip-color); font-weight: bold; border: var(--pico-border-width) solid var(--pico-tooltip-background-color); border-radius: var(--pico-border-radius); }

#notification-panel { position: fixed; z-index: 2; left: 50%; transform: translate(-50%, 0); border-top: 0; }

.notification-panel-hide { top: -50em; transition: all 0.25s; }

.notification-panel-show { top: 0; transition: all 0.25s; }

.message-panel { margin-bottom: var(--pico-spacing); }

.message-panel-title { margin-bottom: calc(var(--pico-spacing) * 0.5); color: var(--pico-tooltip-color); }

.message-panel-list { display: block; margin-bottom: initial; padding-inline-start: var(--pico-spacing); line-height: var(--pico-line-height); color: var(--pico-tooltip-color); }

.message-panel-list li { margin-bottom: calc(var(--pico-spacing) * 0.25); color: var(--pico-tooltip-color); }

.message-panel-list li::marker { color: var(--pico-tooltip-color); }

.message-panel-list li:last-child { margin-bottom: initial; }

.message-panel-field { cursor: pointer; text-decoration: underline; white-space: nowrap; }

.loader-message { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - var(--pico-spacing) * 2); max-width: 30em; }

/* Message panel variants.

   The plain panel is the application's validation panel and keeps the tooltip
   colours it has always had. The commercial pages also have to report outcomes
   that are good, cautionary or bad - a licence activated, a shared mailbox
   warning, a refusal - so these three tint it from the status palette.

   They are added after the base rules rather than folded into them, so the
   application's own panel is untouched. The descendant list restates the
   colour because .message-panel-title and .message-panel-list set it
   explicitly and would otherwise keep the tooltip colour against the new
   background. */

.message-panel-success, .message-panel-warning, .message-panel-danger { background: var(--omega-message-background); border-color: var(--omega-message-color); color: var(--omega-message-color); }

.message-panel-success .message-panel-title, .message-panel-warning .message-panel-title, .message-panel-danger .message-panel-title,
.message-panel-success .message-panel-list, .message-panel-warning .message-panel-list, .message-panel-danger .message-panel-list,
.message-panel-success .message-panel-list li, .message-panel-warning .message-panel-list li, .message-panel-danger .message-panel-list li,
.message-panel-success .message-panel-list li::marker, .message-panel-warning .message-panel-list li::marker, .message-panel-danger .message-panel-list li::marker { color: var(--omega-message-color); }

.message-panel-success { --omega-message-color: var(--omega-color-success); --omega-message-background: var(--omega-color-success-background); }

.message-panel-warning { --omega-message-color: var(--omega-color-warning); --omega-message-background: var(--omega-color-warning-background); }

.message-panel-danger { --omega-message-color: var(--omega-color-danger); --omega-message-background: var(--omega-color-danger-background); }

/* Status.

   Licence state, payment state, agent state. Shared because a licence reads
   the same to the customer holding it and to the member of staff looking at
   it, and a badge that means "expiring" in one place must not mean something
   else in the other. Colour is never the only signal - the badge carries its
   own wording. */

.status { display: inline-block; padding: calc(var(--pico-spacing) * 0.2) calc(var(--pico-spacing) * 0.5); border: var(--pico-border-width) solid currentColor; border-radius: var(--pico-border-radius); font-size: 0.8rem; font-weight: bold; line-height: 1.4; white-space: nowrap; }

.status-success { color: var(--omega-color-success); background: var(--omega-color-success-background); }

.status-warning { color: var(--omega-color-warning); background: var(--omega-color-warning-background); }

.status-danger { color: var(--omega-color-danger); background: var(--omega-color-danger-background); }

.status-neutral { color: var(--pico-muted-color); background: var(--omega-color-grey); }

/* Buttons container (radio buttons & check boxes) */

.buttons-container-outer { display: flex; margin-bottom: var(--pico-spacing); }

.buttons-container-inner { display: flex; justify-content: flex-start; flex-wrap: wrap; margin: initial; }

/* Arrows */

.arrow { border: solid var(--pico-color); border-width: 0 calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.25) 0; display: inline-block; padding: calc(var(--pico-spacing) * 0.25); vertical-align: middle; }
.right { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }
.left { transform: rotate(135deg); -webkit-transform: rotate(135deg); }
.up { transform: rotate(-135deg); -webkit-transform: rotate(-135deg); }
.down { transform: rotate(45deg); -webkit-transform: rotate(45deg); }

/* Fonts etc */

.font-size-0p7rem, .font-size-0p7rem * { font-size: 0.7rem; }

.font-size-0p8rem, .font-size-0p8rem * { font-size: 0.8rem; }

.font-size-0p9rem, .font-size-0p9rem * { font-size: 0.9rem; }

.font-weight-normal { font-weight: normal; }

.font-weight-bold { font-weight: bold; }

.cursor-pointer { cursor: pointer; }

/* Custom */

.text-vertical { vertical-align: bottom; text-align: left; -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }

.text-align-center { text-align: center; }

.vertical-align-middle { vertical-align: middle; }

.vertical-align-bottom { vertical-align: bottom; }

.margin-left-default { margin-inline-start: var(--pico-spacing); }

.margin-bottom-default { margin-bottom: var(--pico-spacing); }

.margin-bottom-0 { margin-bottom: 0; }

.margin-top-default { margin-top: var(--pico-spacing); }

.width-auto { width: auto; }

/* A single centred column, narrower than the page. The licence page and the
   staff sign-in both need one, so it lives here rather than in either. */

.panel-narrow { max-width: 32em; margin-inline: auto; }

/* The six-digit code field.

   Used by licence activation and by staff sign-in - the same challenge with a
   different purpose - so the two must look the same. Sized and spaced to be
   read back from an email one character at a time rather than scanned as a
   word, and centred because there is nothing on the line to align to. The
   tracking is applied to the right of each character, which leaves the string
   looking half a space off centre; the matching padding-inline-start puts it
   back. */

.code-input { text-align: center; font-size: 1.75rem; font-weight: bold; letter-spacing: 0.5em; padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 0.5em); }

/* Media queries.

   The type scale is shared. The layout rules that sat alongside it - the
   footer columns, the results grid - are specific to the application and stay
   in custom.css, which is concatenated after this file and so still applies
   inside the same breakpoints. */

@media screen and (max-width: 1536px) {

    :root {
        --pico-font-size: 0.9rem;
    }

}

@media screen and (max-width : 1280px) {

    :root {
        --pico-font-size: 0.85rem;
    }

}

@media screen and (max-width: 1024px) {

    :root {
        --pico-font-size: 0.8rem;
    }

}

@media screen and (max-width: 768px) {

    :root {
        --pico-font-size: 1rem;
    }

	/* Single column - the logos follow the last column and so sit at the bottom */
	#footer-logos { justify-content: flex-start; }

}

@media screen and (max-width : 576px) {

    :root {
        --pico-font-size: 1.25rem;
    }

	button, input, textarea, select, th, td, #notification-panel { text-align: center; }

	.display-flex, .display-grid-fields, .buttons-container-inner, #footer-logos { justify-content: center; }

	.buttons-container-inner { margin: auto; }

}


/* The page title is a link home (Omega, 2026-10-02).

   Not on the public page, which IS home, and not inside the application, where
   it would take a working engineer away from their network. Everywhere else a
   customer may arrive with no way back: the checkout, the licence page, the
   order page and the three legal documents.

   A heading that happens to be a link should still read as a heading, so it
   keeps the heading's colour and gains its underline only on hover. */
header h1 a {
	color: inherit;
	text-decoration: none;
}

header h1 a:hover,
header h1 a:focus {
	text-decoration: underline;
}