/* ===========================================================================
   Plenio Ledger - Console visual language
   Canonical token wiring per design-tokens.md v1.0.0 (2026-05-29)
   and ux-standards.md v1.1.0 §3 (clean SaaS chrome register).

   IMPORTANT:
   - All @font-face declarations resolve to /fonts/ on this origin only.
     No external CDN font loading - see security-and-compliance.md §4 / §10.6.
     Loading from fonts.googleapis.com would exfiltrate user IP to Google
     and cross the EU<->US border (Schrems II).
   - Every CSS custom property below maps to a token in design-tokens.md.
     Section headings reference the relevant doctrine section.
   - Legacy v1.0 register tokens (--paper, --ink, --rule, ...) are aliased
     at the bottom of :root so component CSS authored against the previous
     register continues to resolve; the aliases point at the closest v1.1
     equivalent so the chrome converges on the new register.
   =========================================================================== */


/* ---------------------------------------------------------------------------
   1. @font-face - moved to /fonts/fonts.css
   The declarations that were here now live in fonts/fonts.css, which is the one
   file every surface loads: this stylesheet is not loaded by the marketing
   documents, so keeping the faces here meant the marketing site had to source
   the same families from Google instead. Any page using these families links
   /fonts/fonts.css. See LICENSE-fonts.txt in /fonts/ for SIL OFL 1.1 attribution.
   --------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------
   :root - design tokens (design-tokens.md is canonical)
   --------------------------------------------------------------------------- */

:root {

    /* ----- 1.1 Chrome neutrals (design-tokens.md §1.1) ----- */
    --chrome-canvas:            #F4F1EA;
    --chrome-sidebar:           #EDE8E5;
    --chrome-hero-tile:         #F5EADA;
    --chrome-card-glass:        rgba(255, 255, 255, 0.45);
    --chrome-card-glass-strong: rgba(255, 255, 255, 0.65);
    --chrome-card-solid:        #FFFFFF;
    --chrome-card-border:       #FFFFFF;
    --chrome-action-dark:       #201E1D;
    --chrome-accent-warm:       #D4C39D;

    /* ----- 1.2 Ink (design-tokens.md §1.2) ----- */
    --ink-primary:        #070000;
    --ink-stroke:         #332D2A;
    --ink-secondary:      #4A423E;
    --ink-secondary-cool: #4B5563;
    --ink-tertiary:       #6B7280;
    --ink-muted:          #877D78;
    --ink-placeholder:    #5E5650;
    --ink-divider:        #C4BCB7;
    --ink-divider-soft:   #B0A7A1;

    /* ----- 1.3 Status (design-tokens.md §1.3) -----
       Tailwind-aligned. Per ux-standards.md §3.1 / §6.2, status colour never
       carries information alone - always paired with icon and/or text label.
       The .status-* utility classes below consume these tokens. */
    --status-positive-bg:     #DCFCE7;
    --status-positive-border: #4ADE80;
    --status-positive-text:   #052E16;
    --status-positive-dot:    #22C55E;

    --status-caution-bg:      #FFEDD5;
    --status-caution-border:  #FB923C;
    --status-caution-text:    #EA580C;
    --status-caution-dot:     #F97316;

    --status-negative-bg:     #FEE2E2;
    --status-negative-border: #E11D48;
    --status-negative-text:   #E11D48;
    --status-negative-dot:    #F43F5E;

    --status-info-bg:         #E0E7FF;
    --status-info-border:     #818CF8;
    --status-info-text:       #312E81;

    --status-neutral-bg:      #F9F8F6;
    --status-neutral-border:  #877D78;
    --status-neutral-text:    #877D78;

    --status-filled-dark-bg:     #201E1D;
    --status-filled-dark-border: #4A423E;
    --status-filled-dark-text:   #FFFFFF;

    /* ----- 1.4 Hero glow (design-tokens.md §1.4) -----
       Decorative editorial weighting on the daily-ops hero tile only.
       Tokens captured here; geometry (positions, blur radii, sizes) is
       applied per-layer in <PlenioHeroMetric>. */
    --hero-glow-outer:        #E5C594;
    --hero-glow-inner-from:   #FEE179;
    --hero-glow-inner-to:     #FFFFB9;
    --hero-glow-highlight:    #FFFEFC;
    --hero-glow-shell:        rgba(240, 216, 182, 0.17);
    --hero-glow-alt-from:     #FEE179;
    --hero-glow-alt-to:       #FFCD62;

    /* ----- 3. Spacing (design-tokens.md §3) -----
       4px base. Tailwind-aligned scale. */
    --space-1:   4px;   /* icon <-> adjacent text */
    --space-2:   8px;   /* within-component padding, tag gap */
    --space-2-5: 10px;  /* pill horizontal padding */
    --space-3:   12px;  /* between related elements, sidebar item gap */
    --space-4:   16px;  /* search section padding */
    --space-6:   24px;  /* card padding (vertical), section spacing */
    --space-8:   32px;  /* major section breaks (ux-standards §3.3) */
    --space-9:   36px;  /* card padding (left, editorial indent) */
    --space-12:  48px;  /* page-level spacing (ux-standards §3.3) */
    --space-16:  64px;  /* hero / large spacing (ux-standards §3.3) */

    /* ----- 4. Radii (design-tokens.md §4) -----
       Container surfaces 34px; inline primitives 6-12px.
       Hierarchy reads: page > card > component > primitive. */
    --radius-page:           16px;
    --radius-card:           34px;
    --radius-search-top:     34px 34px 0 0;
    --radius-button:         12px;
    --radius-modal:          12px;
    --radius-pill:           8px;
    --radius-tag:            8px;
    --radius-icon-button:    6px;
    --radius-toast:          8px;
    --radius-handle:         11px;
    --radius-thumbnail:      0px;

    /* ----- 5. Effects (design-tokens.md §5; ux-standards §3.6) ----- */
    --glass-blur-soft:       blur(2px);
    --glass-blur-strong:     blur(5px);
    --card-border-glass:     2px solid var(--chrome-card-border);
    --shadow-card-hover:     0 2px 8px rgba(7, 0, 0, 0.06);
    --shadow-modal:          0 12px 32px rgba(7, 0, 0, 0.12);

    /* ----- 2. Typography families (design-tokens.md §2.1) ----- */
    --font-primary:  'Google Sans Flex', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-ui:       var(--font-primary);   /* alias - Agent E layout CSS references this name */
    --font-wordmark: 'Spinnaker', 'Google Sans Flex', system-ui, sans-serif;
    --font-mono:     'DM Mono', ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;
    --font-rationale:'Instrument Serif', 'EB Garamond', Georgia, 'Times New Roman', serif;

    /* ----- Legacy v1.0 register aliases -----
       Component CSS authored against the previous register (notably
       MainLayout.razor.css and NavMenu.razor.css authored by Agent E) refers
       to --paper / --ink / --rule / etc. These aliases keep that CSS
       resolving while converging onto the v1.1 chrome palette. Drop these
       once the legacy references are migrated. */
    --paper:              var(--chrome-canvas);
    --paper-card:         var(--chrome-card-solid);
    --paper-deep:         var(--status-neutral-bg);
    --rule:               var(--ink-divider);
    --rule-soft:          var(--ink-divider-soft);
    --ink:                var(--ink-primary);
    --ink-soft:           var(--ink-secondary);
    --ink-faint:          var(--ink-tertiary);
    --sidebar-bg:         var(--chrome-sidebar);
    --sidebar-text:       var(--ink-primary);
    --sidebar-text-muted: var(--ink-secondary);
    --sidebar-hover:      rgba(7, 0, 0, 0.05);
    --sidebar-active-bg:  var(--chrome-card-solid);
    --sidebar-rule:       rgba(7, 0, 0, 0.08);
    --shadow-card:        0 1px 3px rgba(7, 0, 0, 0.04), 0 1px 2px rgba(7, 0, 0, 0.03);
    --radius-input:       12px;
    --radius-pill-full:   999px;
    --serif:              var(--font-rationale);
    --sans:               var(--font-primary);
    --mono:               var(--font-mono);
    --green:              var(--status-positive-text);
    --green-soft:         var(--status-positive-bg);
    --amber:              var(--status-caution-text);
    --amber-soft:         var(--status-caution-bg);
    --red:                var(--status-negative-text);
    --red-soft:           var(--status-negative-bg);
}


/* ---------------------------------------------------------------------------
   Reset / base
   --------------------------------------------------------------------------- */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--chrome-canvas, #F4F1EA);
    color: var(--ink-primary);
    font-family: 'Google Sans Flex', system-ui, sans-serif;
    font-size: 16px;    /* base/normal per design-tokens §2.2 */
    line-height: 24px;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    color: var(--ink-primary);
    margin: 0;
}

/* Heading defaults map to the design-tokens §2.2 scale. */
h1 { font-size: 20px; line-height: 32px; font-weight: 700; letter-spacing: -0.01em; }   /* xl/bold - page title */
h2 { font-size: 16px; line-height: 24px; font-weight: 600; }                            /* base/semibold - card title */
h3 { font-size: 16px; line-height: 24px; font-weight: 500; }                            /* base/medium - row label */
h4 { font-size: 14px; line-height: 20px; font-weight: 500; }                            /* sm/medium - active menu / row title */
h5 { font-size: 14px; line-height: 20px; font-weight: 400; }                            /* sm/normal */
h6 { font-size: 12px; line-height: 16px; font-weight: 400; }                            /* xs/normal */

p {
    margin: 0 0 var(--space-3);
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 24px;
}

a {
    color: var(--ink-primary);
    text-decoration: underline;
    text-decoration-color: var(--ink-tertiary);
    text-underline-offset: 2px;
}

a:hover {
    text-decoration-color: var(--ink-primary);
}

code, kbd, samp, .mono {
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 20px;
}

hr {
    border: 0;
    border-top: 1px solid var(--ink-divider);
    margin: var(--space-6) 0;
}

::selection {
    background: var(--ink-primary);
    color: var(--chrome-card-solid);
}


/* ---------------------------------------------------------------------------
   Accessibility (ux-standards.md §6)
   --------------------------------------------------------------------------- */

/* 6.2 - visible focus on every interactive element. */
*:focus-visible {
    outline: 2px solid var(--ink-primary);
    outline-offset: 2px;
    border-radius: inherit;
}

/* Suppress default focus ring when focus-visible is supported.
   Keep :focus styling for IE / older browsers where focus-visible doesn't fire. */
*:focus:not(:focus-visible) {
    outline: none;
}

/* 6.2 - prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* 6.2 - touch targets minimum 44x44. Applied to interactive primitives;
   individual components can override. */
button,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"],
a.btn,
.icon-btn {
    min-height: 44px;
    min-width: 44px;
}


/* ---------------------------------------------------------------------------
   Typography utilities - one class per design-tokens.md §2.2 token
   Use these when you need the explicit size/weight pair (e.g. KPI numerics,
   pill copy, page-title overrides).
   --------------------------------------------------------------------------- */

.text-xs-normal       { font-family: var(--font-primary); font-size: 12px; line-height: 16px; font-weight: 400; }
.text-sm-normal       { font-family: var(--font-primary); font-size: 14px; line-height: 20px; font-weight: 400; }
.text-sm-medium       { font-family: var(--font-primary); font-size: 14px; line-height: 20px; font-weight: 500; }
.text-base-normal     { font-family: var(--font-primary); font-size: 16px; line-height: 24px; font-weight: 400; }
.text-base-medium     { font-family: var(--font-primary); font-size: 16px; line-height: 24px; font-weight: 500; }
.text-base-semibold   { font-family: var(--font-primary); font-size: 16px; line-height: 24px; font-weight: 600; }
.text-xl-bold         { font-family: var(--font-primary); font-size: 20px; line-height: 32px; font-weight: 700; letter-spacing: -0.01em; }
.text-3xl-normal      { font-family: var(--font-wordmark); font-size: 30px; line-height: 40px; font-weight: 400; }
.text-4xl-semibold    { font-family: var(--font-primary); font-size: 36px; line-height: 48px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.text-5xl-semibold    { font-family: var(--font-primary); font-size: 48px; line-height: 48px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.text-rationale       { font-family: var(--font-rationale); font-style: italic; font-size: 18px; line-height: 28px; font-weight: 400; }

/* Mono utilities for record IDs, hashes, timestamps (anything copy-able). */
.text-mono-sm         { font-family: var(--font-mono); font-size: 14px; line-height: 20px; font-weight: 400; }
.text-mono-sm-medium  { font-family: var(--font-mono); font-size: 14px; line-height: 20px; font-weight: 500; }

/* Wordmark - "Plenio Ledger" in Spinnaker, sidebar only. */
.wordmark {
    font-family: var(--font-wordmark);
    font-size: 30px;
    line-height: 40px;
    font-weight: 400;
    color: var(--ink-primary);
    letter-spacing: 0;
}


/* ---------------------------------------------------------------------------
   Status palette utilities (design-tokens.md §1.3)

   Six pairs of classes covering the unified Tailwind-aligned status palette.
   Each class sets background + border-color + color. Pair with an icon and/or
   text label - colour never carries information alone (ux-standards §3.1).
   --------------------------------------------------------------------------- */

.status-positive {
    background: var(--status-positive-bg);
    border: 1px solid var(--status-positive-border);
    color: var(--status-positive-text);
}
.status-positive .status-dot { background: var(--status-positive-dot); }

.status-caution {
    background: var(--status-caution-bg);
    border: 1px solid var(--status-caution-border);
    color: var(--status-caution-text);
}
.status-caution .status-dot { background: var(--status-caution-dot); }

.status-negative {
    background: var(--status-negative-bg);
    border: 1px solid var(--status-negative-border);
    color: var(--status-negative-text);
}
.status-negative .status-dot { background: var(--status-negative-dot); }

.status-info {
    background: var(--status-info-bg);
    border: 1px solid var(--status-info-border);
    color: var(--status-info-text);
}

.status-neutral {
    background: var(--status-neutral-bg);
    border: 1px solid var(--status-neutral-border);
    color: var(--status-neutral-text);
}

.status-filled-dark {
    background: var(--status-filled-dark-bg);
    border: 1px solid var(--status-filled-dark-border);
    color: var(--status-filled-dark-text);
}

/* Dot indicator helper for at-a-glance density tiles. */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}


/* ===========================================================================
   Legacy v1.0 register component rules below.

   These were authored against the previous (paper / ink / Inter) register.
   They are preserved here unchanged so existing Razor markup keeps rendering
   while the page-level chrome converges onto the v1.1 tokens above through
   the alias map in :root. Once the components are rebuilt against the v1.1
   primitives (PlenioCard, PlenioHeroMetric, PlenioTriageQueue, etc.) the
   block below can be deleted in one pass.

   See ux-standards.md §3.0 for the register-change notes.
   =========================================================================== */

/* ------------------------------- typography (legacy) ------------------------ */

.em {
    font-weight: 600;
    color: var(--ink);
    font-style: normal;
}

.label {
    font-family: var(--sans);
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-muted);
}

/* ------------------------------ layout shells (legacy) ---------------------- */

.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--rule);
    gap: 1rem;
    flex-wrap: wrap;
}

.page-header h1 { line-height: 1.05; }
.page-header .subtitle {
    color: var(--ink-muted);
    font-size: 0.85rem;
    margin-top: 0.4rem;
}

.section {
    background: var(--paper-card);
    border: 1px solid var(--rule);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}

.section-title {
    font-family: var(--sans);
    font-weight: 500;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-muted);
    margin: 0 0 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--rule-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.section-title a {
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: none;
}
.section-title a:hover { color: var(--ink); text-decoration: underline; }

/* ---------------------------------- KPIs (legacy) -------------------------- */

.kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.kpi {
    background: var(--paper-card);
    border: 1px solid var(--rule);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 1rem 1.1rem 1.1rem;
}

.kpi-hero {
    background: var(--chrome-hero-tile);
    border-color: #DFC79A;
}
.kpi-hero .kpi-label { color: var(--ink-soft); }
.kpi-hero .kpi-value { color: var(--ink); }
.kpi-hero .kpi-sub   { color: var(--ink-soft); }

.kpi-tier-breakdown {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.7rem;
    font-family: var(--sans);
    font-size: 0.78rem;
    color: var(--ink-soft);
}
/* Figma: High | Limited | Minimal separated by thin ink divider bars. */
.kpi-tier-breakdown .tier {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    padding-right: 0.5rem;
    border-right: 1px solid var(--ink-primary);
}
.kpi-tier-breakdown .tier:last-child {
    padding-right: 0;
    border-right: none;
}
.kpi-tier-breakdown .tier strong {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.kpi-volume {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    font-size: 1.7rem !important;
}
.kpi-volume .kpi-volume-num {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 1.7rem;
    line-height: 1;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.kpi-volume .kpi-volume-unit {
    font-family: var(--sans);
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-right: 0.4rem;
}

/* Capture source health rows (dashboard) — compact source/usage list. */
.health-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--rule);
}
.health-name {
    font-weight: 600;
    font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
}
.health-sub {
    color: var(--ink-muted);
    font-size: 0.74rem;
}
.health-subhead {
    margin-top: 1rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--rule);
    font-weight: 600;
    font-size: 0.84rem;
}
.health-subhead span {
    font-weight: 400;
    font-size: 0.72rem;
    color: var(--ink-muted);
    margin-left: 0.4rem;
}

/* PR sign-off setup panel (Settings → PR sign-off). */
.pr-steps { display: flex; gap: 0.5rem; margin: 0.4rem 0 1rem; flex-wrap: wrap; }
.pr-step { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.8rem; border: 1px solid var(--rule);
           border-radius: 999px; background: #FFFDFA; font-size: 0.82rem; font-weight: 600; color: var(--ink-muted); cursor: pointer; }
.pr-step span { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%;
                background: #EDE7DF; color: var(--ink-muted); font-size: 0.7rem; }
.pr-step.on { color: var(--ink); border-color: var(--ink); }
.pr-step.on span { background: var(--ink); color: #FFF; }
.pr-guide { margin: 1rem 0 0.6rem; padding-left: 1.1rem; }
.pr-guide li { margin: 0.4rem 0; font-size: 0.86rem; line-height: 1.5; }
.pr-copy { display: flex; align-items: center; gap: 0.5rem; margin: 0.3rem 0; }
.pr-copy code { background: #F1EEE9; padding: 0.3rem 0.5rem; border-radius: 6px; font-size: 0.78rem; word-break: break-all; }
.pr-attention { border: 1px solid #FCD34D; background: #FFFBEB; border-radius: 12px; padding: 0.8rem 1rem; margin-bottom: 1rem; }
.pr-repo-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.5rem 0; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.pr-repo-name { font-weight: 600; font-size: 0.86rem; font-family: var(--mono, monospace); }
.pr-sys-tag { font-family: var(--sans); font-weight: 500; font-size: 0.66rem; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--ink-muted); background: var(--paper-deep); border: 1px solid var(--rule);
    border-radius: var(--radius-tag); padding: 0.05rem 0.4rem; margin-left: 0.4rem; vertical-align: middle; }
.pr-creds { display: flex; flex-direction: column; gap: 0.7rem; }
.pr-cred-row { border: 1px solid var(--rule); border-radius: 12px; padding: 0.7rem 0.9rem; }
.pr-cred-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; }
.pr-cred-name { font-weight: 600; font-size: 0.9rem; }

.kpi-delta {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--ink-muted);
    margin-top: 0.45rem;
    letter-spacing: 0.02em;
}
.kpi-delta.up   { color: var(--red); }
.kpi-delta.down { color: var(--green); }

/* KPI label — Figma: 12px, title-case, medium, 1.3px tracking, secondary ink (not uppercase grey). */
.kpi-label {
    font-family: var(--sans);
    color: var(--ink-secondary);
    font-size: 0.75rem;
    line-height: 24px;
    letter-spacing: 0.108em;
    font-weight: 500;
}

.kpi-value {
    font-family: var(--sans);
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1;
    margin-top: 0.55rem;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.kpi-sub {
    color: var(--ink-muted);
    font-size: 0.78rem;
    margin-top: 0.5rem;
    line-height: 1.45;
}

.kpi.alert .kpi-value { color: var(--red); }
.kpi.warn .kpi-value  { color: var(--amber); }
.kpi.ok .kpi-value    { color: var(--green); }

/* --------------------------------- buttons (legacy) ------------------------ */

.btn {
    font-family: var(--sans);
    padding: 0.55rem 1rem;
    border-radius: var(--radius-button);
    font-size: 0.78rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: 1px solid var(--ink);
    background: var(--paper-card);
    color: var(--ink);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: background 80ms ease, color 80ms ease;
}
.btn:hover { background: var(--ink); color: var(--paper-card); text-decoration: none; }

.btn-primary { background: var(--ink); color: var(--paper-card); }
.btn-primary:hover { background: var(--ink-soft); }

.btn-secondary { background: var(--paper-deep); border-color: var(--rule); color: var(--ink); }
.btn-secondary:hover { background: var(--ink); color: var(--paper-card); }

.btn-danger { background: var(--red); color: var(--paper-card); border-color: var(--red); }
.btn-danger:hover { background: #6E2222; border-color: #6E2222; color: var(--paper-card); }

.btn-ghost { background: transparent; border-color: var(--ink-faint); color: var(--ink-soft); }
.btn-ghost:hover { background: var(--paper-deep); color: var(--ink); border-color: var(--ink-soft); }

.btn-sm { padding: 0.35rem 0.7rem; font-size: 0.7rem; letter-spacing: 0.1em; min-height: 0; min-width: 0; }

.btn[disabled], .btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-link {
    background: none;
    border: none;
    color: var(--ink);
    padding: 0;
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
    text-decoration: underline;
    text-decoration-color: var(--ink-faint);
    font-weight: 400;
    min-height: 0;
    min-width: 0;
}

/* ----------------------------------- tags (legacy) ------------------------- */

.tag {
    display: inline-block;
    padding: 0.18rem 0.55rem;
    font-family: var(--sans);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: var(--paper-deep);
    color: var(--ink-soft);
    border: 1px solid var(--rule);
    border-radius: var(--radius-tag);
    line-height: 1.4;
}

.tag-high     { background: var(--red-soft);   color: var(--red);   border-color: #E1B7B0; }
.tag-limited  { background: var(--amber-soft); color: var(--amber); border-color: #DFC79A; }
.tag-minimal  { background: var(--green-soft); color: var(--green); border-color: #BFCDB0; }
.tag-pending  { background: var(--amber-soft); color: var(--amber); border-color: #DFC79A; }
.tag-attested { background: var(--green-soft); color: var(--green); border-color: #BFCDB0; }
.tag-refused  { background: var(--red-soft);   color: var(--red);   border-color: #E1B7B0; }
.tag-blocked  { background: var(--red-soft);   color: var(--red);   border-color: #E1B7B0; }
.tag-overdue  { background: var(--red-soft);   color: var(--red);   border-color: #E1B7B0; }
.tag-mono     { font-family: var(--mono); text-transform: none; letter-spacing: 0; }

/* --------------------------------- ledger (legacy) ------------------------- */

table.ledger {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--paper-card);
    border: 1px solid var(--rule);
    border-radius: var(--radius-card);
    overflow: hidden;
    font-size: 0.85rem;
    box-shadow: var(--shadow-card);
}

table.ledger thead th {
    background: var(--paper-deep);
    text-align: left;
    padding: 0.65rem 0.9rem;
    font-family: var(--sans);
    font-weight: 500;
    color: var(--ink-muted);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border-bottom: 1px solid var(--rule);
}

table.ledger tbody td {
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid var(--rule-soft);
    vertical-align: middle;
}

table.ledger tbody tr:last-child td { border-bottom: 0; }

table.ledger tbody tr:hover {
    background: var(--paper-deep);
    cursor: pointer;
}

table.ledger tbody tr.guardrail {
    background: var(--amber-soft);
}
table.ledger tbody tr.guardrail:hover {
    background: #EFD9A8;
}

/* --------------------------------- inputs (legacy) ------------------------- */

.input, .select, .textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius-input);
    font-family: var(--sans);
    font-size: 0.9rem;
    background: var(--paper-card);
    color: var(--ink);
    line-height: 1.45;
}

.input:focus, .select:focus, .textarea:focus {
    outline: 1px solid var(--ink);
    outline-offset: -1px;
    border-color: var(--ink);
}

.textarea {
    min-height: 9rem;
    resize: vertical;
    line-height: 1.55;
}

.field { margin-bottom: 1rem; }

.field label {
    display: block;
    font-family: var(--sans);
    font-weight: 500;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-muted);
    margin-bottom: 0.4rem;
}

.field .hint {
    color: var(--ink-muted);
    font-size: 0.78rem;
    margin-top: 0.4rem;
}

.filter-bar {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    align-items: center;
}

.filter-bar .input,
.filter-bar .select {
    padding: 0.45rem 0.65rem;
    font-size: 0.85rem;
    width: auto;
}

/* ---------------------------- description list (legacy) -------------------- */

.dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.55rem 1.5rem;
    font-size: 0.88rem;
    align-items: baseline;
}

.dl dt {
    font-family: var(--sans);
    color: var(--ink-muted);
    font-weight: 500;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.dl dd {
    margin: 0;
    word-break: break-word;
    color: var(--ink);
}

/* ------------------------------- alert cards (legacy) ---------------------- */

.alert-card {
    border: 1px solid var(--red);
    border-left: 3px solid var(--red);
    background: var(--red-soft);
    padding: 0.95rem 1.1rem;
    border-radius: var(--radius-card);
    margin-bottom: 0.75rem;
    font-size: 0.88rem;
}

.alert-card.warn { border-color: var(--amber); background: var(--amber-soft); border-left-color: var(--amber); }
.alert-card.info { border-color: var(--rule); background: var(--paper-deep); border-left-color: var(--ink-muted); }

.alert-title {
    font-family: var(--sans);
    font-weight: 600;
    color: var(--ink);
    font-size: 0.9rem;
    letter-spacing: 0.01em;
}

/* --------------------------------- chips (legacy) -------------------------- */

.chip-group { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.chip {
    border: 1px solid var(--rule);
    background: var(--paper-card);
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-pill-full);
    font-family: var(--sans);
    font-size: 0.78rem;
    color: var(--ink-soft);
    cursor: pointer;
    user-select: none;
    transition: background 80ms ease;
    min-height: 0;
    min-width: 0;
}

.chip:hover { background: var(--paper-deep); }

.chip.active {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper-card);
}

/* -------------------------------- banners (legacy) ------------------------- */

.refused-banner {
    background: var(--red-soft);
    border-left: 3px solid var(--red);
    color: var(--red);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-card);
    font-size: 0.88rem;
    margin-bottom: 1rem;
}

/* --------------------------------- tabs (legacy) --------------------------- */

.tab-bar {
    display: flex;
    gap: 0.5rem;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 1.5rem;
}

.tab-bar button {
    background: none;
    border: none;
    padding: 0.7rem 1.1rem;
    font-family: var(--sans);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ink-muted);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    margin-bottom: -1px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.tab-bar button.active {
    color: var(--ink);
    border-bottom-color: var(--ink);
}

/* -------------------------------- timer pill (legacy) ---------------------- */

.timer-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--paper-deep);
    border: 1px solid var(--rule);
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-pill-full);
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--ink-soft);
    letter-spacing: 0.04em;
}

.timer-pill.ready {
    background: var(--green-soft);
    border-color: #BFCDB0;
    color: var(--green);
}

/* ------------------------------- hash chain (legacy) ----------------------- */

.hash-chain {
    background: var(--paper-deep);
    border: 1px solid var(--rule);
    border-radius: var(--radius-card);
    padding: 0.85rem 1.1rem;
    font-family: var(--mono);
    font-size: 0.78rem;
    word-break: break-all;
    color: var(--ink-soft);
}

.hash-chain .hash-line {
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
    padding: 0.25rem 0;
}

.hash-chain .hash-label {
    color: var(--ink-muted);
    font-family: var(--sans);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    width: 11rem;
    flex-shrink: 0;
}

.hash-chain .hash-line.current .hash-label { color: var(--ink); font-weight: 600; }
.hash-chain .hash-line.current { background: var(--paper-card); margin: 0.1rem -1.1rem; padding: 0.4rem 1.1rem; border-left: 2px solid var(--ink); }

.hash-chain .neighbours-verified {
    margin-top: 0.65rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--rule);
    font-family: var(--sans);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--green);
}

/* ------------------------- rationale pull-quote (legacy) ------------------- */
/* Per trust-moment-ux.md principle 5: the rationale renders italic
   Instrument Serif as a pulled-out quote. Protected scarcity - the only place
   italic serif appears in the product. */

.rationale {
    background: var(--paper-card);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--ink);
    padding: 1.2rem 1.4rem 1rem;
    border-radius: var(--radius-card);
    margin-bottom: 1rem;
}

.rationale .rationale-label {
    font-family: var(--sans);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-muted);
    margin-bottom: 0.6rem;
}

.rationale blockquote {
    font-family: var(--font-rationale);
    font-style: italic;
    font-size: 18px;
    line-height: 28px;
    color: var(--ink);
    margin: 0 0 0.6rem;
    quotes: '\201C' '\201D';
}

.rationale blockquote::before { content: open-quote; }
.rationale blockquote::after  { content: close-quote; }

.rationale .rationale-meta {
    font-family: var(--sans);
    font-size: 0.7rem;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ------------------------- multi-framework card (legacy) ------------------- */

.framework-card {
    background: var(--paper-card);
    border: 1px solid var(--rule);
    border-radius: var(--radius-card);
    padding: 1rem 1.2rem 1.1rem;
}

.framework-card .framework-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.4rem 0;
    border-bottom: 1px dashed var(--rule-soft);
    font-size: 0.86rem;
}
.framework-card .framework-row:last-child { border-bottom: 0; }

.framework-card .framework-name {
    font-family: var(--sans);
    color: var(--ink);
}

.framework-card .framework-cite {
    font-family: var(--mono);
    color: var(--ink-muted);
    font-size: 0.74rem;
}

.framework-card .framework-status {
    color: var(--green);
    font-family: var(--sans);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* --------------------------- guardrails strip (legacy) --------------------- */

.guardrails-strip {
    background: var(--green-soft);
    border: 1px solid #BFCDB0;
    border-left: 3px solid var(--green);
    padding: 0.7rem 1rem;
    border-radius: var(--radius-card);
    font-family: var(--sans);
    font-size: 0.78rem;
    color: var(--green);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.guardrails-strip .guardrails-count {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.72rem;
}

.guardrails-strip .guardrails-list {
    color: var(--ink-soft);
}

.guardrails-strip.flagged {
    background: var(--amber-soft);
    border-color: #DFC79A;
    border-left-color: var(--amber);
    color: var(--amber);
}

/* -------------------------- coverage bars (legacy) ------------------------- */

.coverage-bar {
    height: 4px;
    background: var(--rule-soft);
    border-radius: 1px;
    overflow: hidden;
    margin-top: 0.4rem;
}

.coverage-fill {
    height: 100%;
    background: var(--green);
    transition: width 200ms ease;
}

.coverage-fill.low { background: var(--amber); }
.coverage-fill.empty { background: var(--red); }

/* -------------------------- filter pill strip (legacy) --------------------- */

.filter-strip {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.filter-pill {
    border: 1px solid var(--rule);
    background: transparent;
    color: var(--ink-soft);
    padding: 0.4rem 0.85rem;
    border-radius: var(--radius-pill-full);
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: background 80ms ease, color 80ms ease, border-color 80ms ease;
}
.filter-pill:hover {
    background: var(--paper-deep);
    color: var(--ink);
    border-color: var(--ink-faint);
}
.filter-pill.active {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper-card);
}
.filter-pill .count {
    font-family: var(--sans);
    font-size: 0.74rem;
    color: inherit;
    opacity: 0.7;
}

/* -------------------------- triage queue rows (legacy) --------------------- */

.queue-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: center;
    background: var(--paper-card);
    border: 1px solid var(--rule);
    border-radius: var(--radius-card);
    padding: 0.95rem 1.1rem;
    margin-bottom: 0.5rem;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 80ms ease, background 80ms ease;
}
.queue-row:hover {
    background: var(--paper-deep);
    box-shadow: var(--shadow-card-hover);
    text-decoration: none;
}
.queue-row.guardrail {
    background: var(--amber-soft);
    border-color: #DFC79A;
}
.queue-row .queue-title {
    font-family: var(--sans);
    font-weight: 600;
    color: var(--ink);
    font-size: 0.9rem;
}
.queue-row .queue-sub {
    color: var(--ink-soft);
    font-size: 0.82rem;
    margin-top: 0.25rem;
    line-height: 1.4;
}
.queue-row .queue-facets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.55rem;
}
.queue-chevron {
    color: var(--ink-faint);
    font-family: var(--mono);
    font-size: 1.1rem;
    line-height: 1;
}

.chip-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.22rem 0.55rem;
    background: var(--paper-deep);
    border: 1px solid var(--rule);
    border-radius: var(--radius-pill-full);
    font-family: var(--sans);
    font-size: 0.72rem;
    color: var(--ink-soft);
    text-decoration: none;
    line-height: 1.4;
}
.chip-tag .chip-icon {
    width: 0.7rem;
    height: 0.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-muted);
    font-family: var(--mono);
    font-size: 0.7rem;
    line-height: 1;
}
.chip-tag.chip-mono { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.02em; }

/* -------------------------- side panel rows (legacy) ----------------------- */

.side-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--rule-soft);
    font-size: 0.86rem;
}
.side-row:last-child { border-bottom: 0; }
.side-row .side-name { font-family: var(--sans); color: var(--ink); font-weight: 500; }
.side-row .side-sub  { font-family: var(--sans); font-size: 0.74rem; color: var(--ink-muted); margin-top: 0.12rem; }
.side-row .side-metric {
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--ink-muted);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-pill-full);
    font-family: var(--sans);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
}
.status-pill.healthy      { background: var(--status-positive-bg); color: var(--status-positive-text); border-color: var(--status-positive-border); }
.status-pill.lagging      { background: var(--status-caution-bg);  color: var(--status-caution-text);  border-color: var(--status-caution-border); }
.status-pill.disconnected { background: var(--status-negative-bg); color: var(--status-negative-text); border-color: var(--status-negative-border); }
.status-pill.active       { background: var(--status-positive-bg); color: var(--status-positive-text); border-color: var(--status-positive-border); }
.status-pill.overdue      { background: var(--status-caution-bg);  color: var(--status-caution-text);  border-color: var(--status-caution-border); }
.status-pill.refused      { background: var(--status-negative-bg); color: var(--status-negative-text); border-color: var(--status-negative-border); }
.status-pill .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* -------------------------- "Ask your ledger" (legacy) --------------------- */
/* Bottom query surface. The v1.0 query-bar-gradient is retired
   (design-tokens.md §1.4 / ux-standards.md §3.1); use glass-strong instead. */

.ask-bar {
    background: var(--chrome-card-glass-strong);
    backdrop-filter: var(--glass-blur-strong);
    -webkit-backdrop-filter: var(--glass-blur-strong);
    border: var(--card-border-glass);
    border-radius: var(--radius-search-top);
    padding: 1.1rem 1.25rem;
    margin-top: 1.25rem;
}
.ask-bar .ask-input-row {
    display: flex;
    gap: 0.6rem;
    align-items: center;
}
.ask-bar .ask-input {
    flex: 1;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--ink-tertiary);
    border-radius: var(--radius-button);
    background: var(--chrome-card-solid);
    color: var(--ink-primary);
    font-family: var(--font-primary);
    font-size: 0.9rem;
}
.ask-bar .ask-input::placeholder { color: var(--ink-placeholder); }
.ask-bar .ask-refine {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    margin-top: 0.7rem;
    font-size: 0.75rem;
    color: var(--ink-muted);
}
.ask-bar .ask-refine .label-inline {
    font-family: var(--font-primary);
    font-size: 0.72rem;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
}

/* -------------------------- top-bar utilities (legacy) --------------------- */

.icon-btn {
    width: 2.1rem;
    height: 2.1rem;
    min-width: 0;
    min-height: 0;
    border-radius: var(--radius-icon-button);
    border: 1px solid var(--rule);
    background: var(--paper-card);
    color: var(--ink-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 80ms ease, color 80ms ease;
    font-size: 0.9rem;
}
.icon-btn:hover {
    background: var(--paper-deep);
    color: var(--ink);
}

.sparkline {
    height: 32px;
    width: 100%;
    margin-top: 0.4rem;
    display: block;
}

/* ---------------------------------------------------------------------------
   FRIA submit form (fria-design.md §1) — interactive rights picker, narrative
   reference check, requirements rail, dual-outcome action bar.
   --------------------------------------------------------------------------- */

.party-input-row { display: flex; gap: 0.5rem; align-items: center; }

/* Rights at stake — each pick expands to demand its own rationale (§2). */
.right-row {
    border: 1px solid var(--rule);
    border-radius: var(--radius-input);
    margin-bottom: 0.45rem;
    background: var(--paper-card);
    overflow: hidden;
}
.right-row.selected { border-color: var(--ink); }
.right-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    cursor: pointer;
    user-select: none;
}
.right-head:hover { background: var(--paper-deep); }
.right-tick {
    font-family: var(--mono);
    width: 1.1rem;
    text-align: center;
    color: var(--ink-muted);
}
.right-row.selected .right-tick { color: var(--ink); }
.right-label { flex: 1; font-size: 0.88rem; color: var(--ink); }
.right-article { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-muted); }
.right-rationale {
    border: none;
    border-top: 1px solid var(--rule);
    border-radius: 0;
    min-height: 0;
    background: var(--paper-deep);
}
.right-rationale.unmet { box-shadow: inset 3px 0 0 var(--amber); }

/* Narrative-references-a-selection live indicator (§2). Neutral, not cheerleading. */
.ref-indicator {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    font-family: var(--sans);
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-input);
    border: 1px solid var(--rule);
    background: var(--paper-deep);
    color: var(--ink-muted);
}
.ref-indicator.met { border-color: #BFCDB0; background: var(--green-soft); color: var(--green); }

/* Requirements rail — explicit, met/unmet, identical for approve and refuse (§6). */
.req-list { list-style: none; margin: 0; padding: 0; }
.req-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.84rem;
    color: var(--ink-muted);
    padding: 0.22rem 0;
}
.req-item .dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    border: 1px solid var(--ink-faint);
    flex: none;
}
.req-item.met { color: var(--ink); }
.req-item.met .dot { background: var(--green); border-color: var(--green); }

/* Two equally-weighted outcomes — refuse no harder than submit (§6). */
.outcome-actions {
    position: sticky;
    bottom: 1rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding-top: 1rem;
    margin-top: 0.5rem;
}

.submit-success {
    border: 1px solid #BFCDB0;
    border-left: 3px solid var(--green);
    background: var(--green-soft);
    border-radius: var(--radius-card);
    padding: 1.5rem 1.75rem;
}
.submit-success.refused {
    border-color: var(--rule);
    border-left-color: var(--ink-muted);
    background: var(--paper-deep);
}
.submit-success h1 { margin: 0.25rem 0 0.75rem; }
.submit-success .section { background: var(--paper-card); }

/* ── Public front door (PublicLayout + landing/sign-in) ─────────────────────────────
   The unauthenticated marketing entry point at /login. Clean-SaaS chrome (ux-standards.md §3). */
.public-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--ink-primary);
    /* Warm cream → amber glow rising from the bottom centre (login design). */
    background:
        radial-gradient(135% 75% at 50% 116%, #F2C46B 0%, #F7E1AC 26%, rgba(248, 245, 242, 0) 60%),
        #F8F5F2;
}
.public-topbar {
    display: flex;
    align-items: center;
    padding: 1.6rem 2.5rem;
}
.public-brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: inherit; }
.public-brand-mark { width: 40px; height: 40px; object-fit: contain; }
.public-brand-text {
    font-family: var(--font-wordmark);
    font-size: 1.55rem;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ink-primary);
}
.public-footer {
    margin-top: auto;
    padding: 1.5rem 2rem 2rem;
    text-align: center;
    color: #665C57;
    font-size: 0.8rem;
}
.public-hero {
    flex: 1;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 4rem;
    align-items: center;
    max-width: 72rem;
    width: 100%;
    margin: 0 auto;
    padding: 2rem 2.5rem 4rem;
}

/* Left pitch — headline + lede + 2×2 product-tier grid. */
.login-headline {
    font-size: clamp(2rem, 3.4vw, 3rem);
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 1rem;
    max-width: 30rem;
}
.login-lede {
    font-size: 1.25rem;
    line-height: 1.4;
    color: var(--ink-primary);
    max-width: 32rem;
    margin: 0;
}
.login-lede em { font-style: italic; font-weight: 600; }

.tier-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.4rem 2.5rem;
    margin-top: 2.25rem;
    max-width: 34rem;
}
.tier-feature { position: relative; }
.tier-feature:nth-child(n+3) { padding-top: 1.2rem; }
.tier-feature:nth-child(n+3)::before {
    content: ""; position: absolute; top: 0; left: 0; width: 64px; height: 1px; background: var(--ink-divider);
}
.tier-feature-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.3rem; }
.tier-feature-head .tier-glyph { width: 26px; height: 20px; object-fit: contain; }
.tier-feature-head span {
    font-weight: 500; font-size: 0.88rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-primary);
}
.tier-feature p { margin: 0; font-size: 0.8rem; line-height: 1.45; color: var(--ink-secondary); max-width: 16rem; }

/* Exposure-calculator CTA — links the login page to the standalone sales tool in wwwroot. */
.pitch-cta {
    display: inline-flex;
    align-items: baseline;
    gap: 0.65rem;
    margin-top: 2.25rem;
    padding: 0.7rem 1rem;
    border: 1px solid var(--ink-divider);
    border-radius: 10px;
    background: #fff;
    text-decoration: none;
    transition: border-color 100ms ease, box-shadow 100ms ease;
    max-width: 34rem;
}
.pitch-cta:hover { border-color: var(--ink-primary); box-shadow: 0 1px 2px rgba(7, 0, 0, 0.05); }
.pitch-cta-label {
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-muted); white-space: nowrap;
}
.pitch-cta-text { font-size: 0.85rem; line-height: 1.4; color: var(--ink-primary); }

/* Sign-in card */
.public-signin { display: flex; justify-content: center; }
.signin-card {
    width: 100%;
    max-width: 23rem;
    background: #fff;
    border-radius: 14px;
    padding: 1.75rem;
    box-shadow: 0 1px 1px rgba(7, 0, 0, 0.04), 0 8px 12px rgba(7, 0, 0, 0.05);
}
.signin-eyebrow { font-size: 0.875rem; color: var(--ink-primary); margin-bottom: 0.15rem; }
.signin-title { font-size: 1.75rem; line-height: 1.15; font-weight: 700; margin: 0 0 0.5rem; }
.signin-lede { font-size: 0.78rem; line-height: 1.5; color: var(--ink-secondary); margin: 0 0 1.2rem; }
.signin-form { display: flex; flex-direction: column; gap: 0.85rem; }
.signin-form .field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0; }
.signin-form .field span { font-size: 0.82rem; font-weight: 600; color: var(--ink-muted); }
.signin-form input {
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--ink-divider);
    border-radius: 8px;
    background: #fff;
    font-size: 0.95rem;
    color: var(--ink-primary);
}
.signin-form input:focus { outline: none; border-color: var(--ink-primary); box-shadow: 0 0 0 1px var(--ink-primary); }
.signin-submit { width: 100%; height: 44px; margin-top: 0.5rem; justify-content: center; }
.signin-foot { margin-top: 1.1rem; text-align: center; }
.signin-foot a { color: var(--ink-primary); font-size: 0.875rem; text-decoration: underline; }

@media (max-width: 860px) {
    .public-hero { grid-template-columns: 1fr; gap: 2rem; padding: 1.5rem 1.25rem 3rem; }
    .tier-grid { max-width: none; }
}