/* ============================================================================
   Precision - brand token layer
   ----------------------------------------------------------------------------
   THE SOLE OWNER OF COLOUR. Every colour in every other stylesheet resolves to
   a token declared here; no sheet below it in the cascade may state a literal
   hex, rgb() or named colour. That rule is what keeps one palette (and one dark
   theme) working without any component needing a bespoke dark rule.

   It also carries the app's type, shape, stacking and layout constants, so that
   all three shells are dimensioned from one place. Each loads this file first,
   then precision-bootstrap -> precision-instrument, then its own tail:

     template-auth   -> legacy-skeleton -> complipay -> ui
     template-nonauth-> site -> nonauth
     template-plain  -> site        (Bootswatch "flatly" used to load ahead of
                                     this file; Phase 3 removed it)

   Load this FIRST, before any of them; the full per-shell load order, including
   the vendor sheets, is documented at the top of css/precision-instrument.css.

   Before this file existed there were two independent `:root` blocks declaring
   the same `--compli-*` names with different values (ui.css and nonauth.css),
   which is why the sign-in pages and the app drifted apart. Both now consume
   the tokens below.

   LEGACY BRIDGE: the `--compli-*` names are kept at the bottom as aliases onto
   the Precision tokens. Roughly 1,100 existing declarations reference them, so
   aliasing rethemes all of that without touching those rules. Do not add new
   `--compli-*` names - use the `--pc-*` tokens directly in new code.

   ACCESSIBILITY: Signal Teal and Exception Amber are ~2.1:1 on white and fail
   WCAG AA as text. They are fills, borders and icon colours only. For coloured
   TEXT on a light surface use --pc-accent-ink / --pc-status-review-ink, which
   are darkened to 5.4:1 and 4.9:1. On a teal fill, label text is Precision Navy
   (8.0:1), not white - this deliberately departs from the marketing brand board,
   where white-on-teal is used for large display type only. See
   docs/PRECISION_REBRAND.md section 3.
   ========================================================================== */

:root
{
	/* ---- raw brand palette (do not use directly; prefer semantic tokens) --- */
	--pc-navy:            #091C36;
	--pc-teal:            #00C7B1;
	--pc-cloud:           #F5F8FB;
	--pc-graphite:        #263342;
	--pc-amber:           #F4A340;

	/* navy ramp, mixed toward cloud - used for borders, hovers, muted text */
	--pc-navy-90:         #1B2E48;
	--pc-navy-70:         #47566B;
	--pc-navy-50:         #74808F;
	--pc-navy-30:         #A2AAB5;
	--pc-navy-15:         #CBD1D8;
	--pc-navy-08:         #E3E7EC;
	--pc-navy-04:         #EFF2F6;

	/* teal ramp */
	--pc-teal-ink:        #00786B;   /* 5.4:1 on white - teal TEXT on light */
	--pc-teal-30:         #8FE3D8;
	--pc-teal-12:         #E0F7F4;

	/* status hues */
	--pc-red:             #B3261E;
	--pc-amber-ink:       #A2620C;   /* 4.9:1 on white - amber TEXT on light */

	/* ---- semantic: surfaces ---------------------------------------------- */
	--pc-surface:         var(--pc-cloud);
	--pc-surface-raised:  #FFFFFF;
	--pc-surface-sunken:  var(--pc-navy-04);
	--pc-surface-inverse: var(--pc-navy);

	/* ---- semantic: ink --------------------------------------------------- */
	--pc-ink:             var(--pc-navy);
	--pc-ink-muted:       var(--pc-navy-70);
	--pc-ink-subtle:      var(--pc-navy-50);
	--pc-ink-inverse:     var(--pc-cloud);

	/* ---- semantic: borders ----------------------------------------------- */
	--pc-border:          var(--pc-navy-08);
	--pc-border-strong:   var(--pc-navy-15);
	--pc-border-inverse:  #1B3050;

	/* ---- semantic: accent ------------------------------------------------ */
	--pc-accent:          var(--pc-teal);       /* fills, rules, icons        */
	--pc-accent-ink:      var(--pc-teal-ink);   /* accent TEXT on light       */
	--pc-accent-on:       var(--pc-navy);       /* text ON an accent fill     */
	--pc-accent-soft:     var(--pc-teal-12);
	--pc-accent-border:   var(--pc-teal-30);

	/* Accent TEXT on an INVERSE band - the eyebrow, rule and link colour used
	   by .i-section--inverse. It needs its own name because --pc-surface-inverse
	   FLIPS: it is Navy on a light page and Cloud White on a dark one, so a
	   single fixed hue cannot serve both. Raw teal is 8.0:1 on navy and ~2.1:1
	   on cloud; --pc-accent-ink is the exact mirror. This token is therefore the
	   raw hue in the light theme and the darkened -ink variant in the dark one,
	   so the pairing rule holds in both.

	   Phase 1 recorded this as a KNOWN GAP it was forbidden from closing (it may
	   add no colour) and handed it to Phase 2 - see precision-instrument.css
	   section 4 and redesign 3.2. Nothing consumed .i-section--inverse until the
	   component library landed, which is why it stayed latent until now. */
	--pc-accent-on-inverse: var(--pc-teal);

	/* ---- semantic: status (PASS / REVIEW / BLOCK) ------------------------ */
	--pc-status-pass:            var(--pc-teal);
	--pc-status-pass-ink:        var(--pc-teal-ink);
	--pc-status-pass-bg:         var(--pc-teal-12);
	--pc-status-pass-border:     var(--pc-teal-30);

	--pc-status-review:          var(--pc-amber);
	--pc-status-review-ink:      var(--pc-amber-ink);
	--pc-status-review-bg:       #FDF3E5;
	--pc-status-review-border:   #F6D5A6;

	--pc-status-block:           var(--pc-red);
	--pc-status-block-ink:       var(--pc-red);
	--pc-status-block-bg:        #FDECEA;
	--pc-status-block-border:    #F3BDB9;

	/* ---- typography ------------------------------------------------------ */
	/* Instrument Sans, not IBM Plex Sans: the redesign takes v1's COLOUR and
	   v2's layout, and typography is layout (redesign 4.1, decision D6). One
	   name changes here and the whole app follows, which is why the shells load
	   the face but no rule names it directly. */
	--pc-font-sans:  'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	/* tabular figures for payroll amounts, tax codes, NI numbers, run refs */
	/* --pc-font-mono:  'IBM Plex Mono', SFMono-Regular, Menlo, Consolas, monospace; */
	--pc-font-mono:  'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	/* pull quotes and article leads only - one editorial voice, used sparingly,
	   so it reads as emphasis and not as decoration */
	--pc-font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;

	--pc-tracking-caps: 0.14em;   /* small-caps labels, chips, buttons */

	/* ---- shape & elevation ----------------------------------------------- */
	/* The brand reads as engineered and flat: hairline borders carry structure,
	   shadows stay almost imperceptible. Resist deepening these.

	   Radii were 4/6/10px. They are now 2/3/5px - near-square, because an
	   instrument is not friendly (redesign 3.4). Retargeting the three names
	   here rather than adding a parallel --i-radius scale is deliberate: every
	   existing consumer (ui.css via the --border-radius alias below, and
	   --bs-border-radius* via precision-bootstrap.css) follows automatically,
	   and two radius systems side by side would read as two designs. */
	--pc-radius-sm:  2px;
	--pc-radius:     3px;
	--pc-radius-lg:  5px;
	--pc-radius-pill: 999px;

	--pc-shadow-sm:  0 1px 2px rgba(9, 28, 54, 0.06);
	--pc-shadow:     0 2px 6px rgba(9, 28, 54, 0.08);
	--pc-shadow-lg:  0 10px 28px rgba(9, 28, 54, 0.12);

	--pc-focus-ring: 0 0 0 3px rgba(0, 199, 177, 0.45);

	/* ---- channel triplets ------------------------------------------------ */
	/* For rgba() tints. CSS cannot decompose a hex token, so the channels are
	   restated here - keep in step with --pc-navy / --pc-teal above. */
	--pc-navy-rgb:   9, 28, 54;
	--pc-teal-rgb:   0, 199, 177;
	--pc-amber-rgb:  244, 163, 64;

	/* Added in Phase 3 for Bootstrap's colour utilities - the text- and bg-
	   families, written apart here because the two glued together end a CSS
	   comment early, which this project has been bitten by three times. They
	   resolve through rgba(var(--bs-<name>-rgb), <opacity>) and so cannot be
	   retargeted by hue name alone. Phase 1 left that family untouched for
	   exactly this reason and recorded it; the missing --bs-info-rgb is what
	   made the 404 banner fall back to stock cyan when the Bootswatch build was
	   removed, dropping its heading from ~3.1:1 to ~1.9:1.

	   These are the only file in the system where a literal channel may be
	   written, which is why they live here and not in precision-bootstrap.css.
	   The two SEMANTIC ones flip in the dark block below, in step with the
	   tokens they mirror - a fixed triplet standing in for a token that flips is
	   the pairing defect of section 3.2a with an extra step in front of it. */
	--pc-teal-ink-rgb:     0, 120, 107;    /* --pc-teal-ink  #00786B */
	--pc-red-rgb-channels: 179, 38, 30;    /* --pc-red       #B3261E */

	--pc-accent-ink-rgb:   var(--pc-teal-ink-rgb);
	--pc-status-block-rgb: var(--pc-red-rgb-channels);

	/* ---- sidebar --------------------------------------------------------- */
	/* The sidebar is navy in BOTH themes - that is the signature Precision
	   look from the brand mockups, not a dark-mode treatment. Its ink tokens
	   are therefore independent of the page theme. */
	--pc-sidebar-bg:         var(--pc-navy);
	--pc-sidebar-ink:        #D6DEE9;
	--pc-sidebar-ink-muted:  #8698AF;
	--pc-sidebar-border:     rgba(255, 255, 255, 0.08);
	--pc-sidebar-hover-bg:   rgba(255, 255, 255, 0.06);
	--pc-sidebar-active-bg:  rgba(var(--pc-teal-rgb), 0.14);
	--pc-sidebar-active-ink: var(--pc-teal);

	/* ---- layout ---------------------------------------------------------- */
	--pc-sidebar-width: 260px;
	--pc-navbar-height: 60px;

	/* ---- stacking order -------------------------------------------------- */
	/* Neither marketing site needed these - they have no modal over a sticky
	   header over an open dropdown. The app does, and its stacking order was
	   spread across four stylesheets, a vendor sheet and one runtime
	   assignment in kocheda_table.js:678.
	   Every value below is the value already in force, so naming them changes
	   nothing today; it makes the order editable in one place from Phase 3 on.
	   DO NOT REORDER - each pairing is load-bearing:
	     sidebar  < navbar        the fixed navbar overlaps the sidebar's top
	     navbar  == modal-backdrop  equal, so DOM order decides; the modal is
	                                appended last and therefore covers the bar
	     modal    < dropdown      a .selectpicker opened inside a dialog has to
	                              escape it (bootstrap-select ships 1060/1061)
	     dropdown < page-loader   the loader blocks the whole page
	     page-loader < toast      a toast must be readable over the loader */
	/* Both moved into precision-components.css section 24 in Phase 3; the
	   values are unchanged, only their home is. */
	--pc-z-sidebar:        1040;    /* #sidebar                                */
	--pc-z-navbar:         1050;    /* .navbar-top                             */
	--pc-z-modal-backdrop: 1050;    /* Bootstrap 5.3 $zindex-modal-backdrop    */
	--pc-z-modal:          1055;    /* Bootstrap 5.3 $zindex-modal             */
	--pc-z-dropdown:       1060;    /* bootstrap-select.min.css (menu 1060,
	                                   its search box 1061)                    */
	--pc-z-page-loader:    10000;   /* the loader overlay, and the skip link,
	                                   which has to clear every piece of fixed
	                                   chrome. Phase 3 folded three drifting
	                                   copies of the loader (ui / nonauth /
	                                   site, at 9999 and 10000) into one at
	                                   this value; what matters is only that it
	                                   sits above the modal                    */
	--pc-z-toast:          999999;  /* toastr's own #toast-container default   */
}

/* ============================================================================
   Dark theme
   On Precision Navy the pure brand hues are already accessible as text
   (teal 8.0:1, amber 8.3:1), so the darkened -ink variants are dropped back to
   the full-strength hues here.
   ========================================================================== */

[data-theme="dark"]
{
	--pc-surface:         #0B1A2E;
	--pc-surface-raised:  #12253D;
	--pc-surface-sunken:  #091C36;
	--pc-surface-inverse: var(--pc-cloud);

	--pc-ink:             #E6ECF3;
	--pc-ink-muted:       #9FB0C4;
	--pc-ink-subtle:      #74879E;
	--pc-ink-inverse:     var(--pc-navy);

	--pc-border:          #1E3450;
	--pc-border-strong:   #2C4A6B;
	--pc-border-inverse:  var(--pc-navy-15);

	--pc-accent-ink:      var(--pc-teal);
	--pc-accent-soft:     rgba(0, 199, 177, 0.14);
	--pc-accent-border:   rgba(0, 199, 177, 0.38);
	/* The band inverts to Cloud White here, so accent text on it takes the
	   darkened variant - the mirror of the :root value. */
	--pc-accent-on-inverse: var(--pc-teal-ink);

	--pc-status-pass-ink:      var(--pc-teal);
	--pc-status-pass-bg:       rgba(0, 199, 177, 0.13);
	--pc-status-pass-border:   rgba(0, 199, 177, 0.34);

	--pc-status-review-ink:    var(--pc-amber);
	--pc-status-review-bg:     rgba(244, 163, 64, 0.14);
	--pc-status-review-border: rgba(244, 163, 64, 0.36);

	--pc-status-block:         #F2685F;
	--pc-status-block-ink:     #F2685F;
	--pc-status-block-bg:      rgba(242, 104, 95, 0.14);
	--pc-status-block-border:  rgba(242, 104, 95, 0.36);

	/* The two semantic triplets, flipping in step with the tokens they mirror.
	   --pc-accent-ink is the darkened teal on paper and the full-strength hue
	   here, and --pc-status-block is the lightened red above; a triplet that
	   stayed fixed while its own token flipped would put the utilities exactly
	   one theme out of step. Keep these two lines beside the hex values they
	   restate. */
	--pc-accent-ink-rgb:       var(--pc-teal-rgb);
	--pc-status-block-rgb:     242, 104, 95;

	--pc-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.35);
	--pc-shadow:     0 2px 6px rgba(0, 0, 0, 0.42);
	--pc-shadow-lg:  0 10px 28px rgba(0, 0, 0, 0.55);
}

/* ============================================================================
   Legacy bridge - `--compli-*` names mapped onto Precision tokens.
   Existing rules across ui.css / nonauth.css / style.css consume these.
   New code should use `--pc-*` directly.
   ========================================================================== */

:root
{
	--compli-primary:       var(--pc-navy);
	--compli-primary-dark:  #04101F;
	--compli-primary-light: var(--pc-navy-90);
	--compli-success:       var(--pc-status-pass-ink);
	--compli-info:          var(--pc-accent-ink);
	--compli-warning:       var(--pc-status-review);
	--compli-danger:        var(--pc-status-block);
	--compli-gray:          var(--pc-ink-muted);
	--compli-light:         var(--pc-surface-sunken);
	--compli-dark:          var(--pc-graphite);
	--compli-text:          var(--pc-ink);
	--compli-text-muted:    var(--pc-ink-muted);
	--compli-bg:            var(--pc-surface);
	--compli-bg-secondary:  var(--pc-surface-sunken);
	--compli-bg-card:       var(--pc-surface-raised);
	--compli-card-bg:       var(--pc-surface-raised);
	--compli-border:        var(--pc-border);

	--card-shadow:          var(--pc-shadow-sm);
	--card-shadow-hover:    var(--pc-shadow);
	--border-radius:        var(--pc-radius);
	--sidebar-width:        var(--pc-sidebar-width);
	--navbar-height:        var(--pc-navbar-height);
}

/* ============================================================================
   Brand primitives - shared by the authed app and the non-auth pages.
   ========================================================================== */

/* ---- Status chip: PASS / REVIEW / BLOCK ---------------------------------- */

.pc-chip
{
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 4px 12px 4px 7px;
	border: 1px solid transparent;
	border-radius: var(--pc-radius-pill);
	font-family: var(--pc-font-sans);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: var(--pc-tracking-caps);
	text-transform: uppercase;
	white-space: nowrap;
	line-height: 1;
}

.pc-chip__dot
{
	display: grid;
	place-items: center;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	color: #FFFFFF;
	font-size: 8px;
	flex: none;
}

.pc-chip--pass   { color: var(--pc-status-pass-ink);   background: var(--pc-status-pass-bg);   border-color: var(--pc-status-pass-border); }
.pc-chip--review { color: var(--pc-status-review-ink); background: var(--pc-status-review-bg); border-color: var(--pc-status-review-border); }
.pc-chip--block  { color: var(--pc-status-block-ink);  background: var(--pc-status-block-bg);  border-color: var(--pc-status-block-border); }

.pc-chip--pass   .pc-chip__dot { background: var(--pc-status-pass); color: var(--pc-navy); }
.pc-chip--review .pc-chip__dot { background: var(--pc-status-review); color: var(--pc-navy); }
.pc-chip--block  .pc-chip__dot { background: var(--pc-status-block); }

/* ---- CTA button ---------------------------------------------------------- */

.pc-btn
{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 18px;
	border: 1.5px solid transparent;
	border-radius: var(--pc-radius);
	background: var(--pc-accent);
	color: var(--pc-accent-on);          /* navy on teal = 8.0:1 */
	font-family: var(--pc-font-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: var(--pc-tracking-caps);
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	cursor: pointer;
	transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.pc-btn:hover,
.pc-btn:focus-visible
{
	background: transparent;
	border-color: var(--pc-accent);
	color: var(--pc-accent-ink);
}

.pc-btn--ghost
{
	background: transparent;
	border-color: var(--pc-accent);
	color: var(--pc-accent-ink);
}

.pc-btn--ghost:hover,
.pc-btn--ghost:focus-visible
{
	background: var(--pc-accent);
	color: var(--pc-accent-on);
}

.pc-btn:disabled,
.pc-btn[aria-disabled="true"]
{
	background: transparent;
	border-color: var(--pc-border-strong);
	color: var(--pc-ink-subtle);
	cursor: not-allowed;
}

.pc-btn:focus-visible { outline: none; box-shadow: var(--pc-focus-ring); }

/* ---- Tabular figures ----------------------------------------------------- */
/* Payroll amounts, tax codes, NI numbers, run references. Monospaced digits
   make columns align and values comparable down a table. */

.pc-figure,
.pc-num
{
	font-family: var(--pc-font-mono);
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1;
}

/* ---- Section label ------------------------------------------------------- */

.pc-label
{
	font-family: var(--pc-font-sans);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--pc-ink-subtle);
}

/* ---- Scanline rule ------------------------------------------------------- */
/* Echoes the horizontal bars of the logo mark. Use sparingly - a divider under
   a page title or above a footer, not as a general background. */

.pc-scanline
{
	height: 10px;
	background-image: repeating-linear-gradient(
		to bottom,
		var(--pc-accent) 0 1px,
		transparent 1px 3px
	);
	opacity: 0.55;
}

/* ---- Focus visibility ---------------------------------------------------- */

.pc-focusable:focus-visible
{
	outline: none;
	box-shadow: var(--pc-focus-ring);
	border-radius: var(--pc-radius-sm);
}

@media (prefers-reduced-motion: reduce)
{
	.pc-btn { transition: none; }
}