/* ============================================================================
   DOC TRACKER ANSG — ASEPS design language
   ----------------------------------------------------------------------------
   Ported 1:1 from ASEPS_MAIN_APR2026/apps/admin (the "editorial" theme):
     · tokens        → src/styles/themes/editorial.css + classic.css
     · type          → Source Serif 4 (display) / Montserrat (body) /
                       JetBrains Mono (figures & IDs), self-hosted
     · palette       → navy #143055 · gold #D4960A · emerald #047857 ·
                       crimson #991B1B on warm paper #FAF7F2
     · shell         → frosted navy sidebar over a gradient + blur field,
                       gold active rail, 288px / 84px collapsed
     · geometry      → editorial radii (2/4/6px), hairline rules, flat shadows

   The previous "Statecraft" system is preserved at
   design-backup/pre-aseps/public/app.css.

   Every class name from the old sheet is retained so the server-rendered
   views keep working untouched — only the visual language changes.
   ============================================================================ */

/* ---------------------------------------------------------------- fonts ---- */
@font-face{font-family:'Source Serif 4';src:url('/fonts/source-serif-4-latin.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Source Serif 4';src:url('/fonts/source-serif-4-latin-ext.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Montserrat';src:url('/fonts/montserrat-latin.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap;size-adjust:108%;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';src:url('/fonts/montserrat-latin-ext.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap;size-adjust:108%;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';src:url('/fonts/jetbrains-mono-latin.woff2') format('woff2');
  font-weight:400 500;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';src:url('/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  font-weight:400 500;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

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

/* ============================== TOKENS — LIGHT (editorial) ================= */
:root{
  color-scheme:light;

  /* ---- surfaces: warm paper, white card ---- */
  --surface-paper:#FAF7F2;
  --surface-card:#FFFFFF;
  --surface-elevated:#FBFAF7;
  --surface-inset:#F2EDE3;

  /* ---- ink ---- */
  --ink-primary:#1A1A1A;
  --ink-secondary:#4A4A4A;
  --ink-muted:#6F6F6F;
  --ink-subtle:#9A9A9A;

  /* ---- brand ---- */
  --brand-navy:#143055;
  --brand-navy-bright:#1A3F6F;
  --brand-navy-solid:#143055;
  --brand-gold:#D4960A;
  --brand-gold-muted:#8C6F1F;

  /* ---- semantic ---- */
  --success:#047857;
  --alert:#991B1B;
  --warn:#92400E;
  --info:#1E40AF;

  /* ---- rules ---- */
  --rule-fine:rgba(20,48,85,.12);
  --rule-bold:rgba(20,48,85,.24);
  --rule-accent:rgba(140,111,31,.40);
  --rule-soft:rgba(140,111,31,.18);
  --brand-gold-wash:rgba(212,150,10,.20);
  --hero-wash-gold:rgba(212,150,10,.30);
  --hero-wash-navy:rgba(20,48,85,.20);
  --hero-wash-green:rgba(4,120,87,.16);
  --hero-wash-gold-2:rgba(212,150,10,.14);
  --brand-gold-deep:#6F5716;

  /* ---- shadows: editorial keeps them flat ---- */
  --shadow-card:0 1px 0 0 var(--rule-fine);
  --shadow-pop:0 10px 40px -12px rgba(20,48,85,.18);

  /* ---- type ---- */
  --font-display:'Source Serif 4',Georgia,'Times New Roman',serif;
  --font-body:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;

  /* ---- TYPE SCALE ------------------------------------------------------
     One modular scale (ratio 1.2 "minor third") drives every size in the
     product. Sizes are rem so they honour the user's browser setting; the
     display steps use clamp() so headings shrink on narrow screens without a
     separate mobile ruleset.

     The old CSS carried 44 distinct hand-picked sizes, several within 0.01rem
     of each other, and headings were inflated (h1 56px against 15px body) to
     compensate for Cormorant's very small x-height. Source Serif 4 sits at
     0.92 of Montserrat's x-height, so these values are the real optical sizes.  */
  --fs-3xs:.6875rem;   /* 11px — table heads, stat labels, micro-caps        */
  --fs-2xs:.75rem;     /* 12px — eyebrows, badges, captions                  */
  --fs-xs:.8125rem;    /* 13px — secondary/muted text, hints                 */
  --fs-sm:.875rem;     /* 14px — dense UI: table cells, buttons, form labels */
  --fs-base:.9375rem;  /* 15px — default UI body                             */
  --fs-md:1rem;        /* 16px — comfortable body, long-form paragraphs      */
  --fs-lg:1.125rem;    /* 18px — lead paragraphs                             */
  --fs-xl:1.25rem;     /* 20px — card titles (h4)                            */
  --fs-2xl:1.5rem;     /* 24px — section titles (h3)                         */
  --fs-3xl:clamp(1.5rem,1.15rem + 1.3vw,1.875rem);   /* 24→30 h2             */
  --fs-4xl:clamp(1.875rem,1.4rem + 1.9vw,2.375rem);  /* 30→38 page title h1  */
  --fs-5xl:clamp(2.25rem,1.5rem + 3.1vw,3.25rem);    /* 36→52 landing hero   */

  /* ---- line height: tight for display, open for reading ---- */
  --lh-tight:1.12;
  --lh-snug:1.25;
  --lh-normal:1.45;
  --lh-relaxed:1.6;
  --lh-loose:1.75;

  /* ---- tracking: serif display needs none; caps need a lot ---- */
  --tr-tight:-.02em;
  --tr-snug:-.01em;
  --tr-normal:0;
  --tr-wide:.06em;
  --tr-caps:.14em;
  --tr-caps-lg:.2em;

  /* ---- radii ---- */
  --radius-sm:2px;
  --radius:4px;
  --radius-lg:6px;

  /* =========== compatibility aliases =========================
     Legacy variable names used throughout the existing views map
     onto the ASEPS tokens above, so no view has to be rewritten. */
  --bg:var(--surface-paper);
  --surface:var(--surface-card);
  --surface-2:var(--surface-inset);
  --surface-3:#E9E2D5;
  --line:var(--rule-fine);
  --line-soft:rgba(20,48,85,.07);
  --line-strong:var(--rule-bold);

  --fg:var(--ink-primary);
  --fg-dim:var(--ink-secondary);
  --fg-mute:var(--ink-muted);

  --navy:var(--brand-navy);
  --navy-deep:#0D2038;
  --navy-soft:var(--brand-navy-bright);
  --navy-700:#102845;

  --brand:var(--brand-gold);
  --brand-deep:var(--brand-gold-muted);
  --brand-text:var(--brand-gold-muted);
  --brand-ink:#FFFFFF;
  --gold:var(--brand-gold);
  --gold-bright:#E5B03D;
  --gold-soft:#EFCA73;
  --gold-vivid:#E5B03D;
  --bronze:var(--brand-gold-muted);

  --royal:var(--brand-navy-bright);
  --blue:var(--brand-navy-bright);      --blue-text:var(--info);
  --cyan:var(--brand-navy-bright);      --cyan-text:var(--info);
  --teal:var(--success);
  --green-accent:var(--success);        --green-text:var(--success);
  --olive:var(--success);               --olive-text:var(--success);
  --amber:var(--warn);                  --amber-text:var(--warn);
  --coral:var(--alert);
  --rose:var(--alert);                  --rose-text:var(--alert);
  --violet:#6247d6;                     --violet-text:#5238bd;

  --brand-tint:rgba(212,150,10,.10);
  --brand-tint-2:rgba(212,150,10,.18);
  --brand-ring:rgba(212,150,10,.34);
  --brand-glow:rgba(212,150,10,.30);

  --tint-blue:rgba(26,63,111,.09);
  --tint-cyan:rgba(26,63,111,.09);
  --tint-amber:rgba(146,64,14,.10);
  --tint-gold:rgba(212,150,10,.10);
  --tint-rose:rgba(153,27,27,.09);
  --tint-slate:rgba(20,48,85,.07);
  --tint-violet:rgba(98,71,214,.10);
  --tint-olive:rgba(4,120,87,.10);
  --green-tint:rgba(4,120,87,.10);

  --ring-green:rgba(4,120,87,.30);
  --ring-amber:rgba(212,150,10,.32);
  --ring-rose:rgba(153,27,27,.28);

  --st-transit:var(--brand-navy-bright);
  --st-officer:var(--success);
  --st-pending:var(--warn);
  --st-hold:var(--alert);
  --st-closed:var(--ink-muted);

  --err-bg:rgba(153,27,27,.08);   --err-fg:var(--alert);   --err-line:rgba(153,27,27,.26);
  --ok-bg:rgba(4,120,87,.08);     --ok-fg:var(--success);  --ok-line:rgba(4,120,87,.26);
  --info-bg:rgba(30,64,175,.07);  --info-fg:var(--info);   --info-line:rgba(30,64,175,.24);
  --danger-bg:rgba(153,27,27,.07);--danger-line:rgba(153,27,27,.26);

  --veil:rgba(250,247,242,.86);
  --veil-solid:var(--surface-paper);
  --scrim:rgba(9,14,24,.60);
  --on-accent:#FFFFFF;
  --seal-shadow:rgba(20,48,85,.18);

  --shadow-sm:var(--shadow-card);
  --shadow:0 4px 14px -6px rgba(20,48,85,.16);
  --shadow-lg:var(--shadow-pop);
  --shadow-glow:0 6px 18px -8px var(--brand-glow);

  --r:var(--radius);
  --r-sm:var(--radius-sm);
  --r-lg:var(--radius-lg);

  --ease:cubic-bezier(.22,1,.36,1);
  --sidebar-w:288px;
  --sidebar-collapsed:84px;
  --gutter:clamp(16px,3vw,32px);
}

/* ================================ TOKENS — DARK =========================== */
:root[data-theme="dark"]{
  color-scheme:dark;

  --surface-paper:#1A1714;
  --surface-card:#221F1B;
  --surface-elevated:#2A2722;
  --surface-inset:#15120F;

  --ink-primary:#F2EFE8;
  --ink-secondary:#C8C2B5;
  --ink-muted:#908A7E;
  --ink-subtle:#5E594F;

  --brand-navy:#6B8EC4;
  --brand-navy-bright:#8FA9D1;
  --brand-navy-solid:#3F5F92;
  --brand-gold:#E8A920;
  --brand-gold-muted:#C19945;

  --success:#34D399;
  --alert:#F87171;
  --warn:#FBBF24;
  --info:#60A5FA;

  --rule-fine:rgba(242,239,232,.08);
  --rule-bold:rgba(242,239,232,.16);
  --rule-accent:rgba(193,153,69,.40);
  --rule-soft:rgba(193,153,69,.20);
  --brand-gold-wash:rgba(232,169,32,.24);
  --hero-wash-gold:rgba(232,169,32,.20);
  --hero-wash-navy:rgba(63,95,146,.22);
  --hero-wash-green:rgba(52,211,153,.12);
  --hero-wash-gold-2:rgba(232,169,32,.10);
  --brand-gold-deep:#E8A920;

  --shadow-card:0 1px 0 0 var(--rule-fine);
  --shadow-pop:0 12px 40px -16px rgba(0,0,0,.60);

  /* ---- aliases re-resolved for dark ---- */
  --surface-3:#302B24;
  --line-soft:rgba(242,239,232,.05);

  --navy-deep:#0D0B09;
  --navy-700:#2A2722;
  --brand-text:var(--brand-gold);
  --brand-ink:#1A1714;
  --gold-bright:#F0BC5E;
  --gold-soft:#F0BC5E;
  --gold-vivid:#F0BC5E;

  --brand-tint:rgba(232,169,32,.14);
  --brand-tint-2:rgba(232,169,32,.22);
  --brand-ring:rgba(232,169,32,.38);
  --brand-glow:rgba(232,169,32,.30);

  --tint-blue:rgba(143,169,209,.14);
  --tint-cyan:rgba(143,169,209,.14);
  --tint-amber:rgba(251,191,36,.14);
  --tint-gold:rgba(232,169,32,.14);
  --tint-rose:rgba(248,113,113,.14);
  --tint-slate:rgba(242,239,232,.08);
  --tint-violet:rgba(155,133,240,.15);
  --tint-olive:rgba(52,211,153,.14);
  --green-tint:rgba(52,211,153,.14);

  --err-bg:rgba(248,113,113,.13);   --err-line:rgba(248,113,113,.30);
  --ok-bg:rgba(52,211,153,.13);     --ok-line:rgba(52,211,153,.30);
  --info-bg:rgba(96,165,250,.13);   --info-line:rgba(96,165,250,.28);
  --danger-bg:rgba(248,113,113,.12);--danger-line:rgba(248,113,113,.30);

  --veil:rgba(26,23,20,.86);
  --scrim:rgba(0,0,0,.66);
  --on-accent:#1A1714;
  --seal-shadow:rgba(0,0,0,.5);

  --shadow:0 4px 14px -6px rgba(0,0,0,.5);
  --shadow-glow:0 6px 18px -8px var(--brand-glow);
}

/* Follow the OS only when the user has not chosen explicitly. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]){
    color-scheme:dark;

    --surface-paper:#1A1714;
    --surface-card:#221F1B;
    --surface-elevated:#2A2722;
    --surface-inset:#15120F;

    --ink-primary:#F2EFE8;
    --ink-secondary:#C8C2B5;
    --ink-muted:#908A7E;
    --ink-subtle:#5E594F;

    --brand-navy:#6B8EC4;
    --brand-navy-bright:#8FA9D1;
    --brand-navy-solid:#3F5F92;
    --brand-gold:#E8A920;
    --brand-gold-muted:#C19945;

    --success:#34D399;
    --alert:#F87171;
    --warn:#FBBF24;
    --info:#60A5FA;

    --rule-fine:rgba(242,239,232,.08);
    --rule-bold:rgba(242,239,232,.16);
    --rule-accent:rgba(193,153,69,.40);
    --rule-soft:rgba(193,153,69,.20);
    --brand-gold-wash:rgba(232,169,32,.24);
    --hero-wash-gold:rgba(232,169,32,.20);
    --hero-wash-navy:rgba(63,95,146,.22);
    --hero-wash-green:rgba(52,211,153,.12);
    --hero-wash-gold-2:rgba(232,169,32,.10);
    --brand-gold-deep:#E8A920;

    --shadow-card:0 1px 0 0 var(--rule-fine);
    --shadow-pop:0 12px 40px -16px rgba(0,0,0,.60);

    --surface-3:#302B24;
    --line-soft:rgba(242,239,232,.05);

    --navy-deep:#0D0B09;
    --navy-700:#2A2722;
    --brand-text:var(--brand-gold);
    --brand-ink:#1A1714;
    --gold-bright:#F0BC5E;
    --gold-soft:#F0BC5E;
    --gold-vivid:#F0BC5E;

    --brand-tint:rgba(232,169,32,.14);
    --brand-tint-2:rgba(232,169,32,.22);
    --brand-ring:rgba(232,169,32,.38);
    --brand-glow:rgba(232,169,32,.30);

    --tint-blue:rgba(143,169,209,.14);
    --tint-cyan:rgba(143,169,209,.14);
    --tint-amber:rgba(251,191,36,.14);
    --tint-gold:rgba(232,169,32,.14);
    --tint-rose:rgba(248,113,113,.14);
    --tint-slate:rgba(242,239,232,.08);
    --tint-violet:rgba(155,133,240,.15);
    --tint-olive:rgba(52,211,153,.14);
    --green-tint:rgba(52,211,153,.14);

    --err-bg:rgba(248,113,113,.13);   --err-line:rgba(248,113,113,.30);
    --ok-bg:rgba(52,211,153,.13);     --ok-line:rgba(52,211,153,.30);
    --info-bg:rgba(96,165,250,.13);   --info-line:rgba(96,165,250,.28);
    --danger-bg:rgba(248,113,113,.12);--danger-line:rgba(248,113,113,.30);

    --veil:rgba(26,23,20,.86);
    --scrim:rgba(0,0,0,.66);
    --on-accent:#1A1714;
    --seal-shadow:rgba(0,0,0,.5);

    --shadow:0 4px 14px -6px rgba(0,0,0,.5);
    --shadow-glow:0 6px 18px -8px var(--brand-glow);
  }
}

/* ================================= BASE =================================== */
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--surface-paper);
  color:var(--ink-primary);
  font-family:var(--font-body);
  font-size:var(--fs-base);
  font-weight:500;              /* ASEPS lifts the body floor to medium */
  font-size:var(--fs-md);
  line-height:var(--lh-relaxed);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ------------------------------ typography --------------------------------
   Every heading resolves through the scale. The old rules jumped h1 to 56px
   over a 15px body — a 3.7x leap with nothing between — which is what made
   titles read as oversized next to the rest of the page. The steps below keep
   a consistent 1.2 ratio, so a page reads as one coherent document.          */
h1,h2,h3,h4,h5,h6{
  margin:0;font-family:var(--font-display);font-weight:600;
  letter-spacing:var(--tr-snug);line-height:var(--lh-snug);
  color:var(--ink-primary);text-wrap:balance;
}
h1{font-size:var(--fs-4xl);line-height:var(--lh-tight);letter-spacing:var(--tr-tight)}
h2{font-size:var(--fs-3xl);line-height:var(--lh-tight);letter-spacing:var(--tr-tight)}
h3{font-size:var(--fs-2xl)}
h4{font-size:var(--fs-xl)}
h5{font-size:var(--fs-md);font-weight:700}
h6{font-size:var(--fs-sm);font-weight:700}
p{margin:0}
b,strong{font-weight:600}

/* Eyebrow — ASEPS `font-eyebrow`: Montserrat 600, wide tracking, uppercase. */
.eyebrow{
  font-family:var(--font-body);font-size:var(--fs-2xs);font-weight:600;
  letter-spacing:var(--tr-caps);text-transform:uppercase;line-height:1.4;
  color:var(--brand-gold-muted);display:inline-flex;align-items:center;gap:9px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--rule-accent);flex:none}

.label{
  font-family:var(--font-body);font-size:var(--fs-2xs);font-weight:600;
  letter-spacing:var(--tr-caps);text-transform:uppercase;color:var(--ink-muted);
}
.muted{color:var(--ink-secondary)}
.mute-sm{color:var(--ink-muted);font-size:var(--fs-xs);line-height:var(--lh-normal)}
.prose{max-width:70ch;font-size:var(--fs-md);line-height:var(--lh-loose)}
.lead{font-size:var(--fs-lg);line-height:var(--lh-relaxed);color:var(--ink-secondary)}

/* Figures — ASEPS `font-tabular`. `lining-nums` is kept deliberately: the
   display serif is used for figures (stat values, percentages), and a serif
   that fell back to old-style figures would drop them below the baseline and
   make data read as decoration. Source Serif 4 defaults to lining, but the
   declaration guards the fallback stack (Georgia/Times) too. */
.num,.stat .v,.hg .v,.pc-foot b,.dates td:last-child,
.step::before,.prog-val,.pager .info b,.pg{
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum","lnum","kern";
}

/* ============================== APP SHELL ================================= */
.shell{display:flex;min-height:100vh;position:relative;z-index:1}

/* ---- Sidebar: frosted navy field, exactly as the ASEPS admin rail ---- */
.side{
  position:fixed;left:0;top:0;bottom:0;z-index:70;
  width:var(--sidebar-w);flex:none;
  display:flex;flex-direction:column;overflow:hidden;
  background:#0F2440;
  border-right:1px solid rgba(255,255,255,.10);
  transition:width .3s var(--ease),transform .3s var(--ease);
}
:root[data-theme="dark"] .side{background:#080f1c}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]) .side{background:#080f1c}
}
/* The layered field: base gradient, top sheen, two colour blooms, edge line. */
.side::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(320px 320px at -8% -6%, rgba(26,63,111,.55), transparent 70%),
    radial-gradient(320px 320px at 108% 92%, rgba(212,150,10,.14), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.05) 0%, transparent 22%),
    linear-gradient(180deg, #17365C 0%, #0F2440 55%, #0A1B31 100%);
}
:root[data-theme="dark"] .side::before{
  background:
    radial-gradient(320px 320px at -8% -6%, rgba(63,95,146,.40), transparent 70%),
    radial-gradient(320px 320px at 108% 92%, rgba(232,169,32,.12), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, transparent 22%),
    linear-gradient(180deg, #0b1424 0%, #080f1c 55%, #050a13 100%);
}
.side::after{
  content:"";position:absolute;inset-block:0;right:0;width:1px;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.12),transparent);
}
.side > *{position:relative;z-index:2}

.side-head{
  height:80px;flex:none;display:flex;align-items:center;gap:12px;
  padding:0 18px;border-bottom:1px solid rgba(255,255,255,.10);
}
.side-body{
  flex:1;overflow-y:auto;overflow-x:hidden;padding:20px 12px;
  overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent;
}
.side-body::-webkit-scrollbar{width:5px}
.side-body::-webkit-scrollbar-track{background:transparent}
.side-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:999px}
.side-body:hover::-webkit-scrollbar-thumb{background:rgba(212,150,10,.45)}
.side-foot{flex:none;padding:12px;border-top:1px solid rgba(255,255,255,.10)}

.side-group{margin-bottom:20px}
.side-label{
  font-family:var(--font-body);font-size:var(--fs-3xs);font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.42);padding:0 12px 8px;white-space:nowrap;
}

.side-link{
  display:flex;align-items:center;gap:12px;position:relative;
  height:44px;padding:0 12px;margin-bottom:2px;
  border-radius:var(--radius-sm);
  color:rgba(255,255,255,.68);text-decoration:none;
  font-family:var(--font-body);font-weight:500;font-size:var(--fs-sm);white-space:nowrap;
  transition:background .16s,color .16s;
}
.side-link svg{width:18px;height:18px;flex:none;stroke-width:2;
  color:rgba(255,255,255,.55);transition:color .16s}
.side-link:hover{background:rgba(255,255,255,.06);color:#fff}
.side-link:hover svg{color:rgba(255,255,255,.85)}
.side-link.on{
  background:rgba(255,255,255,.10);color:#fff;font-weight:600;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),
             0 8px 24px -8px rgba(0,0,0,.5);
}
.side-link.on svg{color:var(--brand-gold)}
/* The gold rail — ASEPS marks the active item with a glowing 3px bar. */
.side-link.on::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:22px;border-radius:999px;
  background:#D4960A;box-shadow:0 0 10px rgba(212,150,10,.7);
}
.side-link .lbl{flex:1;overflow:hidden;text-overflow:ellipsis}
.side-link .cnt{
  font-size:var(--fs-3xs);font-weight:600;line-height:1;padding:3px 7px;flex:none;
  border-radius:999px;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.72);
}
.side-link .cnt.hot{
  background:rgba(212,150,10,.16);border-color:rgba(212,150,10,.40);
  color:#F0BC5E;
}

/* ---- Collapsed rail (84px, icon + hover flyout label) ---- */
.side.mini{width:var(--sidebar-collapsed)}
.side.mini .side-label,
.side.mini .side-link .lbl,
.side.mini .side-link .cnt,
.side.mini .brand-txt,
.side.mini .who-txt,
.side.mini .mini-hide{display:none}
.side.mini .side-link{justify-content:center;padding:0}
.side.mini .side-head{justify-content:center;padding:0}
.side.mini .who{justify-content:center}
.side.mini .side-link:hover::after{
  content:attr(data-t);position:absolute;left:calc(100% + 12px);top:50%;
  transform:translateY(-50%);white-space:nowrap;z-index:90;
  background:rgba(15,23,36,.92);color:#fff;
  border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-sm);
  font-size:var(--fs-xs);font-weight:500;padding:7px 12px;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.7);pointer-events:none;
  backdrop-filter:blur(12px);
}

/* ---- Brand lockup ---- */
.brand{
  display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0;
  color:#fff;
}
.brand .mark{
  width:44px;height:44px;flex:none;object-fit:contain;display:block;padding:5px;
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);
}
.brand-txt{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.1;
  font-family:var(--font-display);font-weight:600;font-size:var(--fs-2xl);
  letter-spacing:-.02em;color:#fff;
}
.brand-txt span{
  display:block;font-family:var(--font-body);font-size:var(--fs-3xs);font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--brand-gold);margin-top:3px;
}
.seal-lg{width:96px;height:96px;object-fit:contain;display:block;margin:0 auto 18px;
  filter:drop-shadow(0 4px 14px var(--seal-shadow))}
.seal-wm{position:absolute;right:-40px;bottom:-40px;width:230px;height:230px;
  object-fit:contain;opacity:.05;pointer-events:none;user-select:none}

/* ---- Signed-in identity card at the rail foot ---- */
.who{
  display:flex;align-items:center;gap:12px;padding:10px;min-width:0;
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
  transition:background .18s,box-shadow .18s;
}
.who:hover{background:rgba(255,255,255,.10);
  box-shadow:inset 0 0 0 1px rgba(232,169,32,.40)}
.who .av{
  width:40px;height:40px;flex:none;border-radius:var(--radius-sm);
  display:grid;place-items:center;
  background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  font-family:var(--font-display);font-weight:600;font-size:var(--fs-base);color:#E8A920;
}
.who-txt{min-width:0}
.who-txt b{
  display:block;font-size:var(--fs-sm);font-weight:600;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.who-txt span{
  display:block;font-size:var(--fs-3xs);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.50);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ---- Main column ---- */
.main{flex:1;min-width:0;max-width:100%;margin-left:var(--sidebar-w);
  transition:margin-left .3s var(--ease);display:flex;flex-direction:column}
.shell.mini .main{margin-left:var(--sidebar-collapsed)}

/* ---- Topbar ---- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:var(--veil);
  backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid var(--rule-fine);
}
.topbar .inner{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  height:68px;padding:0 var(--gutter);width:100%;min-width:0;
}
.topbar .inner > .row{min-width:0}
.topbar .inner .mini-hide{
  font-family:var(--font-display);font-weight:600;font-size:var(--fs-2xl);
  letter-spacing:-.01em;
}

.page{padding:28px var(--gutter) 56px;width:100%;flex:1;position:relative;isolation:isolate}

/* ---- Icon button ---- */
.icon-btn{
  width:40px;height:40px;flex:none;display:grid;place-items:center;
  background:transparent;border:1px solid var(--rule-fine);border-radius:var(--radius-sm);
  color:var(--ink-secondary);cursor:pointer;text-decoration:none;position:relative;
  transition:border-color .16s,color .16s,background .16s;
}
.icon-btn:hover{border-color:var(--rule-bold);color:var(--ink-primary);
  background:var(--surface-inset)}
.icon-btn:focus-visible{outline:2px solid var(--brand-navy);outline-offset:2px}
.icon-btn svg{width:18px;height:18px;stroke-width:2}
.icon-btn .dot{
  position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;
  background:var(--alert);color:#fff;font-size:var(--fs-3xs);font-weight:700;
  display:grid;place-items:center;border-radius:999px;padding:0 5px;
  border:2px solid var(--surface-paper);
}

/* Theme toggle glyph swap */
.theme-t .sun{display:none}
.theme-t .moon{display:block}
:root[data-theme="dark"] .theme-t .sun{display:block}
:root[data-theme="dark"] .theme-t .moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]) .theme-t .sun{display:block}
  :root:not([data-theme="light"]):not([data-theme="dark"]) .theme-t .moon{display:none}
}

/* ============================ LAYOUT HELPERS ============================== */
.stack{display:flex;flex-direction:column;gap:16px}
.row{display:flex;align-items:center;gap:12px}
.row.wrap-r{flex-wrap:wrap}
/* `.spread` is the page-header pattern across the app (a heading beside an
   action). It must wrap: on a phone a long title next to a button would
   otherwise push the whole page into a horizontal scroll. */
.spread{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;min-width:0}
.spread > *{min-width:0}
.grid{display:grid;gap:16px}
@media(min-width:640px){.g2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.g3{grid-template-columns:repeat(3,1fr)}
  .g4{grid-template-columns:repeat(4,1fr)}}
@media(min-width:640px) and (max-width:1099px){.g4{grid-template-columns:repeat(2,1fr)}}
.g2-wide{display:grid;gap:16px}
@media(min-width:1100px){.g2-wide{grid-template-columns:1.35fr 1fr}}
.sep{height:1px;background:var(--rule-fine);margin:18px 0}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ================================ BUTTONS ================================= */
/* Mirrors the ASEPS Button primitive: h-10/px-4, semibold, editorial radius,
   active:scale-[0.98] flattened to none in editorial, visible focus ring. */
.btn{
  --btn-bg:transparent;--btn-fg:var(--ink-primary);
  appearance:none;position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:40px;padding:0 16px;
  border:1px solid var(--rule-bold);border-radius:var(--radius-sm);
  background:var(--btn-bg);color:var(--btn-fg);
  font-family:var(--font-body);font-weight:600;font-size:var(--fs-sm);letter-spacing:0;
  white-space:nowrap;text-decoration:none;cursor:pointer;
  transition:background-color .2s,color .2s,box-shadow .2s,border-color .2s,filter .2s;
}
.btn svg{width:16px;height:16px;stroke-width:2;flex:none}
/* Hover re-points the token, never `background` directly. Setting `background`
   here would beat the solid variants (which only define --btn-bg), repainting
   a navy/gold button pale on hover while its label stayed white — invisible in
   light mode. Variants that want a different hover simply redefine --btn-bg. */
.btn:hover{--btn-bg:var(--surface-inset)}
.btn:focus-visible{outline:none;
  box-shadow:0 0 0 2px var(--surface-paper),0 0 0 4px rgba(20,48,85,.6)}
.btn[disabled]{opacity:.5;pointer-events:none}

/* SOLID VARIANTS — each restates --btn-bg/--btn-fg on its OWN :hover.
   This is required, not redundant: `.btn:hover` has specificity (0,2,0) and
   beats `.btn-primary` (0,1,0), so without these the base hover token would
   repaint a navy or gold button pale while its label stayed white — the label
   then vanishes in light mode. Any new solid variant must do the same. */

/* Primary = navy solid. The ASEPS workhorse. */
.btn-primary{
  --btn-bg:var(--brand-navy-solid);--btn-fg:#fff;
  border-color:transparent;box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.btn-primary:hover{
  --btn-bg:var(--brand-navy-solid);--btn-fg:#fff;
  filter:brightness(1.12);box-shadow:0 4px 10px -3px rgba(20,48,85,.35);
}

/* Accent = gold. Reserved for the single most important act on a screen. */
.btn-accent{
  --btn-bg:var(--brand-gold);--btn-fg:#fff;
  border-color:transparent;box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.btn-accent:hover{--btn-bg:var(--brand-gold);--btn-fg:#fff;filter:brightness(.94)}

/* Navy alias retained for existing markup. */
.btn-navy{
  --btn-bg:var(--brand-navy-solid);--btn-fg:#fff;border-color:transparent;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.btn-navy:hover{--btn-bg:var(--brand-navy-solid);--btn-fg:#fff;filter:brightness(1.12)}

.btn-ghost{--btn-bg:transparent;--btn-fg:var(--ink-secondary);border-color:transparent}
.btn-ghost:hover{--btn-bg:var(--surface-inset);--btn-fg:var(--ink-primary)}
.btn-danger,.btn-alarm{
  --btn-bg:transparent;--btn-fg:var(--alert);border-color:var(--danger-line);
}
.btn-danger:hover,.btn-alarm:hover{--btn-bg:var(--danger-bg);border-color:var(--alert)}
.btn-sm{height:32px;padding:0 12px;font-size:var(--fs-2xs)}
.btn-sm svg{width:14px;height:14px}
.btn-lg{height:48px;padding:0 24px;font-size:var(--fs-md)}
.btn-block{width:100%}

/* ================================= CARDS ================================== */
.card{
  position:relative;
  background:var(--surface-card);
  border:1px solid var(--rule-fine);
  border-radius:var(--radius-lg);
  padding:28px;
  box-shadow:var(--shadow-card);
  transition:box-shadow .3s,border-color .3s;
}
.card-accent::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  background:linear-gradient(90deg,var(--accent,var(--brand-gold)),transparent 80%);
}
.card-p0{padding:0;overflow:hidden}
.card-hover{cursor:pointer}
.card-hover:hover{border-color:var(--rule-bold);box-shadow:var(--shadow-pop)}

/* =============================== STAT TILES =============================== */
.stat{
  position:relative;overflow:hidden;
  background:var(--surface-card);
  border:1px solid var(--rule-fine);
  border-radius:var(--radius-lg);
  padding:20px 22px;
  box-shadow:var(--shadow-card);
}
.stat::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--tone,var(--brand-gold))}
.stat .k{
  font-family:var(--font-body);font-size:var(--fs-3xs);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);
}
.stat .v{
  font-family:var(--font-display);font-size:var(--fs-4xl);
  font-weight:600;letter-spacing:-.02em;line-height:1;margin-top:10px;
  color:var(--tone,var(--ink-primary));
}
.stat .s{font-size:var(--fs-xs);color:var(--ink-muted);margin-top:8px}

/* ================================ BADGES ================================== */
/* ASEPS Badge: pill, tone/10 fill, tone/20 border — squared in editorial. */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-body);font-size:var(--fs-3xs);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;line-height:1.4;
  padding:3px 9px;border-radius:var(--radius-sm);white-space:nowrap;
  background:var(--bd,var(--surface-inset));color:var(--bc,var(--ink-secondary));
  border:1px solid color-mix(in srgb,var(--bc,var(--ink-muted)) 24%,transparent);
}
.badge::before{content:"";width:5px;height:5px;border-radius:999px;
  background:currentColor;opacity:.8}
.b-in_transit{--bc:var(--st-transit);--bd:var(--tint-blue)}
.b-with_officer{--bc:var(--st-officer);--bd:var(--tint-olive)}
.b-pending_action{--bc:var(--st-pending);--bd:var(--tint-amber)}
.b-on_hold{--bc:var(--st-hold);--bd:var(--tint-rose)}
.b-closed{--bc:var(--st-closed);--bd:var(--tint-slate)}

.pri{
  font-family:var(--font-body);font-size:var(--fs-3xs);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  padding:3px 8px;border-radius:var(--radius-sm);
  border:1px solid color-mix(in srgb,currentColor 26%,transparent);
}
.p-urgent{background:var(--tint-rose);color:var(--alert)}
.p-high{background:var(--tint-amber);color:var(--warn)}
.p-normal{background:var(--tint-slate);color:var(--ink-secondary)}
.p-low{background:var(--tint-slate);color:var(--ink-muted)}

.chip-stale{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--tint-rose);color:var(--alert);
  border:1px solid color-mix(in srgb,var(--alert) 22%,transparent);
  font-size:var(--fs-3xs);font-weight:600;padding:3px 9px;border-radius:var(--radius-sm);
  animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}

.tag{display:inline-block;background:var(--surface-inset);
  border:1px solid var(--rule-fine);color:var(--ink-secondary);
  font-size:var(--fs-2xs);font-weight:500;padding:3px 9px;border-radius:var(--radius-sm)}
.tag-brand{color:var(--brand-gold-muted);border-color:var(--rule-accent);
  background:var(--brand-tint)}
.chip{display:inline-block;font-size:var(--fs-2xs);font-weight:500;padding:3px 9px;
  border-radius:var(--radius-sm);background:var(--surface-inset);
  color:var(--ink-secondary);margin:2px 2px 0 0}
.pill{
  display:inline-flex;align-items:center;gap:7px;
  font-size:var(--fs-2xs);font-weight:600;padding:5px 11px;border-radius:999px;
  background:var(--surface-inset);border:1px solid var(--rule-fine);
  color:var(--ink-secondary);
}
.pill svg{width:13px;height:13px;stroke-width:2.2}
.pill i{width:6px;height:6px;border-radius:999px;background:var(--brand-gold);
  display:inline-block;flex:none}

/* ================================= FORMS ================================== */
label{
  display:block;font-family:var(--font-body);font-size:var(--fs-2xs);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);
  margin-bottom:8px;
}
input,select,textarea{
  width:100%;font-family:var(--font-body);font-size:var(--fs-md);font-weight:500;
  background:var(--surface-card);color:var(--ink-primary);
  border:1px solid var(--rule-bold);border-radius:var(--radius-sm);
  padding:11px 13px;transition:border-color .18s,box-shadow .18s;
}
input:hover,select:hover,textarea:hover{border-color:var(--brand-navy)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--brand-navy);
  box-shadow:0 0 0 3px rgba(20,48,85,.14);
}
:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] select:focus,
:root[data-theme="dark"] textarea:focus{box-shadow:0 0 0 3px rgba(107,142,196,.22)}
input::placeholder,textarea::placeholder{color:var(--ink-subtle);font-weight:500}
textarea{resize:vertical;min-height:92px;line-height:1.6}
select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-muted) 50%),
                   linear-gradient(135deg,var(--ink-muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}
input[type=file]{padding:9px;background:var(--surface-inset)}
.field{margin-bottom:18px}
.hint{font-size:var(--fs-xs);color:var(--ink-muted);margin-top:6px;font-weight:500}

.check{
  display:flex;align-items:flex-start;gap:10px;padding:12px 14px;
  border:1px solid var(--rule-fine);border-radius:var(--radius-sm);
  background:var(--surface-card);cursor:pointer;
  transition:border-color .16s,background .16s;
}
.check:hover{border-color:var(--rule-bold);background:var(--surface-inset)}
.check input{width:auto;margin-top:3px;flex:none;accent-color:var(--brand-navy)}
.check .nm{font-weight:600;font-size:var(--fs-base)}
.check-row{background:var(--surface-card)}
.searchbar{position:relative}
.searchbar input{padding-left:40px}
.searchbar svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;color:var(--ink-subtle);pointer-events:none}

.inline-form select{font-size:var(--fs-2xs);padding:5px 8px}
.add-block{margin-top:16px;border:1px dashed var(--rule-bold);
  border-radius:var(--radius-sm);background:var(--surface-inset)}
.add-block summary{cursor:pointer;padding:12px 15px;font-weight:600;font-size:var(--fs-sm);
  color:var(--brand-navy);display:flex;align-items:center;gap:8px;list-style:none}
.add-block summary::-webkit-details-marker{display:none}
.add-block summary:hover{color:var(--ink-primary)}
.add-block[open] summary{border-bottom:1px solid var(--rule-fine)}
.add-form{padding:16px}

/* ================================ TABLES ================================== */
/* ASEPS table: navy header band, hairline row rules, inset hover. */
.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.tbl th{
  padding:12px 16px;text-align:left;
  font-family:var(--font-body);font-size:var(--fs-3xs);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  background:var(--brand-navy-solid);color:#fff;white-space:nowrap;
}
.tbl th:first-child{border-top-left-radius:var(--radius-lg)}
.tbl th:last-child{border-top-right-radius:var(--radius-lg)}
.tbl td{padding:14px 16px;border-bottom:1px solid var(--rule-fine);vertical-align:middle}
.tbl tbody tr{transition:background .14s}
.tbl tbody tr:hover{background:var(--surface-inset)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl a{color:var(--ink-primary);text-decoration:none;font-weight:600}
.tbl a:hover{color:var(--brand-navy);text-decoration:underline;text-underline-offset:3px}
.tbl .num{text-align:right;white-space:nowrap}
.tbl .num .mute-sm{display:block;font-weight:500}
.tbl-wrap{overflow-x:auto;margin:0 -4px;padding:0 4px}
.row-bad{background:var(--danger-bg)}

@media(max-width:860px){
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl thead{display:none}
  .tbl tr{border:1px solid var(--rule-fine);border-radius:var(--radius-lg);
    margin-bottom:12px;padding:6px 4px;background:var(--surface-card)}
  .tbl td{border-bottom:1px solid var(--line-soft);padding:10px 12px}
  .tbl tr:last-child td:last-child,.tbl td:last-child{border-bottom:0}
  .tbl .num{text-align:left}
}

.dates{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.dates td{padding:9px 0;border-bottom:1px solid var(--rule-fine)}
.dates td:first-child{color:var(--ink-muted);font-weight:500}
.dates td:last-child{text-align:right}
.dates tr:last-child td{border-bottom:0}

.kv{display:flex;justify-content:space-between;gap:16px;padding:10px 0;
  border-bottom:1px solid var(--rule-fine);font-size:var(--fs-sm)}
.kv:last-child{border-bottom:0}
.kv b{font-weight:600}

/* =============================== TIMELINE ================================= */
.tl{position:relative;padding-left:30px}
.tl::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:1px;
  background:var(--rule-fine)}
.tl-item{position:relative;padding-bottom:24px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:-26px;top:5px;
  width:9px;height:9px;border-radius:999px;background:var(--brand-gold);
  box-shadow:0 0 0 3px var(--brand-tint)}
.tl-item.old::before{background:var(--ink-subtle);box-shadow:0 0 0 3px var(--tint-slate)}

/* =============================== TAB BAR ================================== */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  grid-template-columns:repeat(var(--n,4),1fr);
  background:var(--veil);backdrop-filter:blur(16px) saturate(1.4);
  border-top:1px solid var(--rule-fine);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:9px 0 7px;text-decoration:none;color:var(--ink-muted);
  font-size:var(--fs-3xs);font-weight:600;letter-spacing:.04em;
}
.tabbar a.on{color:var(--brand-navy)}
.tabbar a.on svg{color:var(--brand-gold)}
.tabbar svg{width:20px;height:20px;stroke-width:2}

.tabs-nav{display:flex;gap:6px;flex-wrap:wrap;overflow-x:auto}
.tabs-nav a{font-size:var(--fs-xs);font-weight:600;padding:8px 14px;
  border-radius:var(--radius-sm);background:var(--surface-inset);
  border:1px solid var(--rule-fine);color:var(--ink-secondary);
  text-decoration:none;white-space:nowrap;transition:border-color .16s,color .16s}
.tabs-nav a:hover{border-color:var(--brand-navy);color:var(--ink-primary)}

/* ================================ ALERTS ================================== */
.alert{
  padding:13px 15px;border-radius:var(--radius-sm);font-size:var(--fs-sm);font-weight:500;
  border:1px solid var(--rule-fine);display:flex;align-items:flex-start;gap:9px;
}
.a-err{background:var(--err-bg);color:var(--err-fg);border-color:var(--err-line)}
.a-ok{background:var(--ok-bg);color:var(--ok-fg);border-color:var(--ok-line)}
.a-info{background:var(--info-bg);color:var(--info-fg);border-color:var(--info-line)}
.alert code{background:var(--surface-card);padding:3px 8px;border-radius:var(--radius-sm);
  font-family:var(--font-mono);font-size:.85em}
.notice{font-size:var(--fs-sm);font-weight:500;padding:11px 14px;border-radius:var(--radius-sm);
  background:var(--brand-tint);color:var(--brand-gold-muted);
  border:1px solid var(--rule-accent);margin-bottom:16px}
.auth-note{display:flex;align-items:center;gap:9px;font-size:var(--fs-xs);font-weight:500;
  color:var(--ink-secondary);background:var(--surface-inset);
  border:1px solid var(--rule-fine);padding:10px 13px;
  border-radius:var(--radius-sm);margin-top:14px}
.auth-note b{color:var(--ink-primary)}

/* ============================= EMPTY STATE ================================ */
.empty{text-align:center;padding:56px 20px}
.empty .ic{font-size:2.5rem;line-height:1;margin-bottom:14px;opacity:.45}
.empty h3{font-size:var(--fs-xl);margin-bottom:8px}
.empty p{font-size:var(--fs-sm);color:var(--ink-secondary);max-width:46ch;margin:0 auto}

/* ============================== PROGRESS ================================== */
.bar{height:6px;background:var(--surface-inset);border-radius:999px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--brand-gold-muted),var(--brand-gold));
  transition:width .5s var(--ease)}
.bar.warn i{background:linear-gradient(90deg,var(--warn),var(--alert))}

/* ============================= ANIMATIONS ================================= */
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.rise{animation:rise .5s var(--ease) both}
.d1{animation-delay:.04s}.d2{animation-delay:.08s}.d3{animation-delay:.12s}
.d4{animation-delay:.16s}.d5{animation-delay:.2s}.d6{animation-delay:.24s}

/* ============================= AUTH SCREENS =============================== */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px;
  position:relative;z-index:1}
.auth::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:
    radial-gradient(680px 420px at 12% -8%, rgba(20,48,85,.07), transparent 62%),
    radial-gradient(620px 400px at 92% 4%, rgba(212,150,10,.07), transparent 64%);
}
.auth .box{width:100%;max-width:420px}
.auth .box.with-demo{max-width:470px}
.auth .card{padding:clamp(24px,5vw,36px)}

/* =============================== SCRIM ==================================== */
.scrim{
  position:fixed;inset:0;z-index:65;background:var(--scrim);
  backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .24s var(--ease);
}
.scrim.on{opacity:1;pointer-events:auto}

/* ============================== COMBOBOX ================================== */
.combo{position:relative}
.cb{position:relative}
.cb-input{padding-right:40px;cursor:text}
.cb-arrow{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;display:grid;place-items:center;
  background:transparent;border:0;color:var(--ink-muted);cursor:pointer;
}
.cb-arrow svg{width:15px;height:15px;transition:transform .18s var(--ease)}
.cb-input[aria-expanded="true"] ~ .cb-arrow svg{transform:rotate(180deg)}
.cb-menu{
  position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:80;
  max-height:280px;overflow-y:auto;
  background:var(--surface-card);border:1px solid var(--rule-bold);
  border-radius:var(--radius-sm);box-shadow:var(--shadow-pop);
}
/* Heading for an <optgroup>, so a grouped select (e.g. project stages grouped
   by phase) keeps that structure once enhanced into a combobox. */
.cb-group{
  padding:9px 13px 5px;
  font-family:var(--font-body);font-size:var(--fs-3xs);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-subtle);
  background:var(--surface-inset);border-bottom:1px solid var(--line-soft);
  position:sticky;top:0;
}
.cb-opt{
  padding:11px 13px;font-size:var(--fs-sm);cursor:pointer;
  border-bottom:1px solid var(--line-soft);
}
.cb-opt:last-child{border-bottom:0}
.cb-opt:hover,.cb-opt.on{background:var(--brand-tint);color:var(--brand-gold-muted)}
.cb-none{padding:13px;font-size:var(--fs-sm);color:var(--ink-muted);text-align:center}
.cb-err{color:var(--alert)}
.cb-new{
  display:flex;align-items:center;gap:8px;padding:11px 13px;font-size:var(--fs-sm);
  cursor:pointer;color:var(--brand-navy);background:var(--brand-tint);
  border-top:1px solid var(--rule-fine);
}
.cb-new:hover,.cb-new.on{background:var(--brand-tint-2)}
.cb-new svg{width:15px;height:15px;flex:none}
.cb-new b{font-weight:700}
.cb-toast{
  position:fixed;left:50%;bottom:78px;transform:translate(-50%,14px);z-index:95;
  background:var(--brand-navy-solid);color:#fff;
  font-size:var(--fs-sm);font-weight:600;padding:11px 18px;border-radius:var(--radius-sm);
  box-shadow:var(--shadow-pop);opacity:0;pointer-events:none;
  transition:opacity .22s,transform .22s var(--ease);
}
.cb-toast.go{opacity:1;transform:translate(-50%,0)}
@media(min-width:901px){.cb-toast{bottom:28px}}

/* ========================== ONBOARDING / HERO ============================= */
.hero{
  position:relative;overflow:hidden;
  background:var(--surface-card);
  border:1px solid var(--rule-fine);border-radius:var(--radius-lg);
  padding:clamp(28px,5vw,56px);
  box-shadow:var(--shadow-card);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(560px 320px at 88% -18%, rgba(212,150,10,.09), transparent 66%),
    radial-gradient(520px 320px at 4% 108%, rgba(20,48,85,.07), transparent 66%);
}
.hero > *{position:relative}
.hero h1{font-size:var(--fs-4xl);margin-bottom:16px}
.hero .lead{font-size:var(--fs-lg);color:var(--ink-secondary);
  line-height:1.65;max-width:62ch}

.orb{
  position:relative;width:68px;height:68px;display:grid;place-items:center;
  border-radius:var(--radius-lg);margin-bottom:20px;
  background:var(--brand-tint);border:1px solid var(--rule-accent);
}
.orb svg{width:32px;height:32px;color:var(--brand-gold-muted);stroke-width:1.8}
.orb::after{
  content:"";position:absolute;inset:-6px;border-radius:var(--radius-lg);
  border:1px solid var(--rule-accent);opacity:.45;animation:halo 3.2s var(--ease) infinite;
}
@keyframes halo{
  0%,100%{transform:scale(1);opacity:.45}
  50%{transform:scale(1.06);opacity:.12}
}

.steps{display:grid;gap:12px;margin:28px 0 30px;counter-reset:s}
@media(min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{
  position:relative;padding:20px 20px 20px 22px;
  background:var(--surface-card);border:1px solid var(--rule-fine);
  border-radius:var(--radius-lg);transition:border-color .2s,box-shadow .2s;
}
.step:hover{border-color:var(--rule-accent);box-shadow:var(--shadow-pop)}
.step::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  display:block;font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:600;
  color:var(--brand-gold);line-height:1;margin-bottom:12px;
}
.step b{display:block;font-family:var(--font-display);font-size:var(--fs-xl);
  font-weight:600;margin-bottom:6px;letter-spacing:-.01em}
.step span{font-size:var(--fs-sm);color:var(--ink-secondary);line-height:1.6}

.feat{display:grid;gap:14px}
@media(min-width:700px){.feat{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1200px){.feat{grid-template-columns:repeat(4,1fr)}}
/* Full-bleed landing: add tracks rather than widening cards. */
@media(min-width:1800px){.lp .feat{grid-template-columns:repeat(6,1fr)}}
.feat-card{
  padding:24px;background:var(--surface-card);
  border:1px solid var(--rule-fine);border-radius:var(--radius-lg);
  transition:border-color .2s,box-shadow .2s;
}
.feat-card:hover{border-color:var(--rule-bold);box-shadow:var(--shadow-pop)}
.feat-card .ic{
  width:44px;height:44px;display:grid;place-items:center;margin-bottom:16px;
  border-radius:var(--radius-sm);background:var(--brand-tint);
  color:var(--brand-gold-muted);border:1px solid var(--rule-accent);
}
.feat-card .ic svg{width:20px;height:20px;stroke-width:1.9}
.feat-card b{display:block;font-family:var(--font-display);font-size:var(--fs-xl);
  font-weight:600;margin-bottom:7px;letter-spacing:-.01em}
.feat-card span{font-size:var(--fs-sm);color:var(--ink-secondary);line-height:1.6}

/* Safety net: an inline icon must never fall back to the 300x150 SVG default. */
svg:not([width]):not([height]){width:1em;height:1em}

/* ============================== PAGINATION ================================ */
.pager{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-top:22px;padding-top:18px;
  border-top:1px solid var(--rule-fine);
}
/* Table cards use .card-p0 (padding:0) so the table can meet their edges. The
   pager is rendered as the LAST CHILD of that card, so without this it inherits
   zero padding and its text sits flush against the card's bottom and left
   edges. Give it back the padding the card would otherwise have supplied. The
   top margin is dropped because the card edge already provides the separation. */
.card-p0 > .pager{
  margin-top:0;
  padding:18px 24px 20px;
}
@media(max-width:420px){
  .card-p0 > .pager{padding:16px 20px 18px}
}
.pager .info{font-size:var(--fs-xs);color:var(--ink-muted);font-weight:500}
.pager .info b{color:var(--ink-primary);font-weight:600;font-variant-numeric:tabular-nums}
.pager .nums{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.pg{
  min-width:36px;height:36px;padding:0 9px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--rule-fine);border-radius:var(--radius-sm);
  background:var(--surface-card);color:var(--ink-secondary);
  font-size:var(--fs-xs);font-weight:600;text-decoration:none;
  font-variant-numeric:tabular-nums;
  transition:border-color .16s,color .16s,background .16s;
}
.pg:hover{border-color:var(--rule-bold);color:var(--ink-primary);
  background:var(--surface-inset)}
/* Declared AFTER :hover so the current page keeps its solid navy fill on
   hover — otherwise the rule above repaints it pale while the label stays
   white, leaving the number invisible in light mode. */
.pg.on,.pg.on:hover{background:var(--brand-navy-solid);border-color:transparent;color:#fff}
.pg.on:hover{filter:brightness(1.12)}
.pg.off{opacity:.4;pointer-events:none}
.pg.gap{border:0;background:transparent;pointer-events:none;min-width:20px;padding:0}
.pg svg{width:15px;height:15px;flex:none;stroke-width:2.2}
@media(max-width:560px){
  .pager{justify-content:center}
  .pager .info{width:100%;text-align:center}
}

/* ========================= DEMO QUICK-LOGIN PANEL ========================= */
.demo-panel{
  margin-top:16px;padding:16px;border-radius:var(--radius-lg);
  background:var(--surface-card);border:1px solid var(--rule-fine);
  box-shadow:var(--shadow-card);
}
.demo-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.demo-tag{
  display:inline-flex;align-items:center;gap:7px;
  font-size:var(--fs-3xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand-gold-muted);
}
.demo-tag::before{content:"";width:6px;height:6px;border-radius:999px;
  background:var(--brand-gold)}
.demo-toggle{
  height:28px;padding:0 11px;font-size:var(--fs-2xs);font-weight:600;cursor:pointer;
  background:transparent;color:var(--ink-muted);
  border:1px solid var(--rule-fine);border-radius:var(--radius-sm);
}
.demo-toggle:hover{border-color:var(--rule-bold);color:var(--ink-primary)}
.demo-note{font-size:var(--fs-xs);color:var(--ink-muted);margin:10px 0 14px;font-weight:500}
.demo-group{margin-bottom:14px}
.demo-group:last-child{margin-bottom:0}
.demo-label{
  font-size:var(--fs-3xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-subtle);margin-bottom:7px;
}
.demo-row{margin-bottom:6px}
.demo-row:last-child{margin-bottom:0}
.demo-row button{
  width:100%;display:flex;align-items:center;gap:11px;padding:9px 11px;
  background:var(--surface-inset);border:1px solid var(--rule-fine);
  border-radius:var(--radius-sm);cursor:pointer;text-align:left;
  transition:border-color .16s,background .16s;
}
.demo-row button:hover{border-color:var(--accent,var(--brand-gold));
  background:var(--accent-tint,var(--brand-tint))}
.demo-row button:focus-visible{outline:2px solid var(--brand-navy);outline-offset:2px}
.demo-av{
  width:32px;height:32px;flex:none;display:grid;place-items:center;
  border-radius:var(--radius-sm);font-size:var(--fs-2xs);font-weight:700;
  background:var(--accent-tint,var(--brand-tint));color:var(--accent,var(--brand-gold-muted));
}
.demo-txt{flex:1;min-width:0}
.demo-txt b{display:block;font-size:var(--fs-sm);font-weight:600;letter-spacing:-.01em}
.demo-txt span{display:block;font-size:var(--fs-2xs);color:var(--ink-muted);font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.demo-row button svg{flex:none;color:var(--ink-subtle);opacity:0;
  transition:opacity .15s,transform .15s}
.demo-row button:hover svg{opacity:1;transform:translateX(2px);
  color:var(--accent,var(--brand-gold))}
.demo-violet{--accent:var(--violet);--accent-tint:var(--tint-violet)}
.demo-brand{--accent:var(--brand-gold);--accent-tint:var(--brand-tint)}
.demo-blue{--accent:var(--brand-navy);--accent-tint:var(--tint-blue)}

/* ========================== PROJECTS MODULE =============================== */
.hp{display:inline-block;padding:4px 10px;border-radius:var(--radius-sm);
  font-size:var(--fs-3xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid transparent;white-space:nowrap}
.hp-on_track{background:var(--green-tint);color:var(--success);
  border-color:color-mix(in srgb,var(--success) 24%,transparent)}
.hp-at_risk{background:var(--tint-amber);color:var(--warn);
  border-color:color-mix(in srgb,var(--warn) 24%,transparent)}
.hp-delayed,.hp-stalled{background:var(--tint-rose);color:var(--alert);
  border-color:color-mix(in srgb,var(--alert) 24%,transparent)}
.hp-completed{background:var(--tint-slate);color:var(--ink-secondary);
  border-color:var(--rule-fine)}
.hp-terminated{background:var(--tint-slate);color:var(--ink-muted);
  border-color:var(--rule-fine)}

.prog-pair{display:flex;flex-direction:column;gap:8px;margin:14px 0}
.prog-row{display:flex;align-items:center;gap:10px}
.prog-lbl{font-size:var(--fs-3xs);font-weight:600;color:var(--ink-muted);
  letter-spacing:.1em;text-transform:uppercase;min-width:66px}
.prog-track{flex:1;height:6px;border-radius:999px;background:var(--surface-inset);
  overflow:hidden}
.prog-fill{display:block;height:100%;border-radius:999px;transition:width .5s var(--ease)}
.f-phys{background:var(--success)}
.f-fin{background:var(--brand-navy-bright)}
.prog-val{font-size:var(--fs-xs);font-weight:600;min-width:40px;text-align:right;
  font-variant-numeric:tabular-nums}
.gap-note{font-size:var(--fs-2xs);font-weight:500;margin-top:3px}
.gap-note.bad{color:var(--alert)}
.gap-note.good{color:var(--success)}

.ribbon{display:flex;flex-wrap:wrap;gap:5px;margin:16px 0}
.rib{font-size:var(--fs-3xs);font-weight:600;padding:4px 10px;border-radius:var(--radius-sm);
  background:var(--surface-inset);color:var(--ink-muted);
  border:1px solid var(--rule-fine)}
.rib-done{background:var(--green-tint);color:var(--success);
  border-color:color-mix(in srgb,var(--success) 24%,transparent)}
.rib-now{background:var(--brand-navy-solid);color:#fff;border-color:transparent}

.proj-grid{display:grid;gap:16px}
@media(min-width:900px){.proj-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1500px){.proj-grid{grid-template-columns:repeat(3,1fr)}}
.proj-card{
  display:block;padding:22px;border-radius:var(--radius-lg);
  background:var(--surface-card);border:1px solid var(--rule-fine);
  text-decoration:none;color:inherit;box-shadow:var(--shadow-card);
  transition:border-color .2s,box-shadow .2s;
}
.proj-card:hover{border-color:var(--rule-bold);box-shadow:var(--shadow-pop)}
.pc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.pc-code{font-family:var(--font-mono);font-size:var(--fs-3xs);font-weight:500;
  color:var(--brand-gold-muted);letter-spacing:.06em}
.pc-title{font-family:var(--font-display);font-size:var(--fs-2xl);margin:5px 0 0;
  line-height:1.25;font-weight:600;letter-spacing:-.01em}
.pc-meta{font-size:var(--fs-xs);color:var(--ink-muted);font-weight:500;margin-top:7px}
.pc-foot{display:flex;gap:18px;flex-wrap:wrap;font-size:var(--fs-xs);
  color:var(--ink-secondary);margin-top:14px;padding-top:14px;
  border-top:1px solid var(--rule-fine)}
.pc-foot b{color:var(--ink-primary);font-weight:600}
.pc-alert{color:var(--alert);font-weight:600;display:inline-flex;align-items:center;gap:5px}
.pc-flag{font-size:var(--fs-xs);font-weight:500;margin-top:10px;padding:8px 11px;
  border-radius:var(--radius-sm)}
.pc-flag.critical{background:var(--danger-bg);color:var(--alert)}
.pc-flag.warn{background:var(--tint-gold);color:var(--brand-gold-muted)}

.status-hero{border-left:3px solid var(--brand-gold)}
.hero-stage{font-size:var(--fs-xs);font-weight:500;color:var(--ink-secondary);margin-top:9px}
.hero-headline{font-size:var(--fs-md);font-weight:600;margin:16px 0 0;padding:12px 15px;
  border-radius:var(--radius-sm);background:var(--surface-inset)}
.hero-headline.critical{background:var(--danger-bg);color:var(--alert)}
.hero-headline.warn{background:var(--tint-gold);color:var(--brand-gold-muted)}
.hero-headline.ok{background:var(--green-tint);color:var(--success)}
.hero-grid{display:grid;gap:12px;margin:18px 0 4px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.hg{padding:13px 15px;border-radius:var(--radius-sm);background:var(--surface-inset);
  border:1px solid var(--rule-fine)}
.hg .k{font-size:var(--fs-3xs);font-weight:600;color:var(--ink-muted);
  text-transform:uppercase;letter-spacing:.1em}
.hg .v{font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:600;margin-top:5px}
.hg .s{font-size:var(--fs-2xs);color:var(--ink-muted);font-weight:500}
.hg .s.warn{color:var(--alert)}

.flag-list{display:flex;flex-direction:column;gap:6px;margin-top:16px}
.flag{display:flex;align-items:center;gap:9px;font-size:var(--fs-sm);font-weight:500;
  padding:9px 12px;border-radius:var(--radius-sm)}
.f-critical{background:var(--danger-bg);color:var(--alert)}
.f-warn{background:var(--tint-gold);color:var(--brand-gold-muted)}
.f-ok{background:var(--green-tint);color:var(--success);margin-top:16px}

.sub{font-family:var(--font-body);font-size:var(--fs-2xs);font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;color:var(--ink-muted);margin:0 0 12px}
.plain{list-style:none;padding:0;margin:0}

.team-row{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:10px 0;border-bottom:1px solid var(--rule-fine);font-size:var(--fs-sm)}
.team-row:last-child{border-bottom:0}
.ms-row{display:flex;align-items:center;gap:10px;padding:10px 0;
  border-bottom:1px solid var(--rule-fine);font-size:var(--fs-sm)}
.ms-row:last-child{border-bottom:0}
.ms-dot{width:9px;height:9px;border-radius:999px;background:var(--ink-subtle);flex:none}
.ms-done .ms-dot{background:var(--success)}
.ms-in_progress .ms-dot{background:var(--brand-gold)}
.ms-slipped .ms-dot{background:var(--alert)}
.insp-row{padding:12px 0;border-bottom:1px solid var(--rule-fine);font-size:var(--fs-sm)}
.insp-row:last-child{border-bottom:0}

.trail{list-style:none;padding:0;margin:0}
.tr-item{display:flex;gap:12px;padding:12px 0;
  border-bottom:1px solid var(--rule-fine);font-size:var(--fs-sm)}
.tr-item:last-child{border-bottom:0}
.tr-dot{width:9px;height:9px;border-radius:999px;background:var(--ink-subtle);
  flex:none;margin-top:6px}
.tr-stage_change .tr-dot{background:var(--brand-gold)}
.tr-certificate .tr-dot{background:var(--brand-navy-bright)}
.tr-payment .tr-dot{background:var(--success)}
.tr-variation .tr-dot{background:var(--warn)}
.tr-inspection .tr-dot{background:var(--success)}

.watch-row{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:11px 13px;border-radius:var(--radius-sm);background:var(--surface-inset);
  border:1px solid var(--rule-fine);text-decoration:none;color:var(--ink-primary);
  margin-bottom:7px;font-size:var(--fs-sm);transition:border-color .16s}
.watch-row:last-child{margin-bottom:0}
.watch-row:hover{border-color:var(--brand-navy)}
.watch-row b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.watch-row .mute-sm{display:block}
.wr-flag{flex:none;font-size:var(--fs-2xs);font-weight:500;padding:4px 9px;
  border-radius:var(--radius-sm);max-width:46%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wr-flag.critical{background:var(--danger-bg);color:var(--alert)}
.wr-flag.warn{background:var(--tint-gold);color:var(--brand-gold-muted)}

.blk-list{display:flex;flex-direction:column;gap:8px}
.blk{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;
  padding:12px 14px;border-radius:var(--radius-sm);
  border:1px solid var(--rule-fine);background:var(--surface-inset)}
.blk-warn{background:var(--tint-gold);border-color:var(--rule-accent)}
.blk-bad{background:var(--danger-bg);border-color:var(--danger-line)}
.blk b{font-size:var(--fs-base)}
.blk-past{display:flex;justify-content:space-between;gap:12px;padding:7px 0;
  border-bottom:1px solid var(--rule-fine);font-size:var(--fs-xs)}
.blk-past:last-child{border-bottom:0}

.track-grid{display:grid;gap:12px}
@media(min-width:760px){.track-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1400px){.track-grid{grid-template-columns:repeat(3,1fr)}}
.track{padding:14px;border-radius:var(--radius-sm);border:1px solid var(--rule-fine);
  background:var(--surface-inset)}
.track.tr-done{border-color:color-mix(in srgb,var(--success) 40%,transparent);
  background:var(--green-tint)}
.track.tr-blocked{border-color:var(--danger-line);background:var(--danger-bg)}
.track.tr-not_required{opacity:.6}
.ws-pill{flex:none;font-size:var(--fs-3xs);font-weight:600;padding:3px 9px;
  border-radius:999px;text-transform:uppercase;letter-spacing:.06em;
  border:1px solid transparent;white-space:nowrap}
.ws-pending{background:var(--surface-3);color:var(--ink-muted);border-color:var(--rule-fine)}
.ws-in_progress{background:var(--brand-tint);color:var(--brand-gold-muted);
  border-color:var(--rule-accent)}
.ws-blocked{background:var(--danger-bg);color:var(--alert);border-color:var(--danger-line)}
.ws-done{background:var(--green-tint);color:var(--success);
  border-color:color-mix(in srgb,var(--success) 30%,transparent)}
.ws-not_required{background:var(--surface-3);color:var(--ink-muted);
  border-color:var(--rule-fine)}
.wait-badge{color:var(--alert);display:inline-block;font-size:var(--fs-3xs);font-weight:600;
  padding:2px 7px;border-radius:var(--radius-sm);background:var(--danger-bg);margin-left:6px}

.notif-list{max-width:1200px}

/* ============================== RESPONSIVE ================================ */
@media(max-width:900px){
  .side{transform:translateX(-100%);width:var(--sidebar-w)}
  .side.open{transform:none;box-shadow:0 0 60px rgba(0,0,0,.4)}
  .side.mini{width:var(--sidebar-w)}
  .side.mini .side-label,
  .side.mini .side-link .lbl,
  .side.mini .side-link .cnt,
  .side.mini .brand-txt,
  .side.mini .who-txt{display:revert}
  .side.mini .side-link{justify-content:flex-start;padding:0 12px}
  .side.mini .side-head{justify-content:flex-start;padding:0 18px}
  .main,.shell.mini .main{margin-left:0}
  .page{padding-bottom:88px}
  .tabbar{display:grid}
  /* Collapse toggle is redundant beside the hamburger on mobile. */
  #collapseToggle{display:none}
  .topbar .inner{gap:8px}
  /* The action keeps its icon but drops its label, so the bar cannot outgrow
     a 390px viewport and push the page into a horizontal scroll. */
  .topbar .btn .mini-hide{display:none}
  .topbar .btn{padding:0 11px}
}
@media(min-width:901px){
  .only-mobile{display:none!important}
}
@media(max-width:520px){
  /* Below this the page title would squeeze the action off-screen. */
  .topbar .inner > .row:first-child .mini-hide{display:none}
}
@media(max-width:420px){
  .topbar .inner{height:60px}
  .card{padding:20px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;
    animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ====================== FORM LAYOUT =======================================
   A registration form is filled top to bottom: identity, then nature, then
   where the file is, then who may see it. An earlier revision flowed the
   section cards into 2-3 columns on wide screens, which broke that order —
   the eye had to zigzag, and the cards ended up at ragged unequal heights.

   The sections therefore stay in one column. What widens instead is the
   *measure*: the form column is capped so a line of input never runs the
   full width of a large monitor, and the fields inside each card use the
   existing .grid.g2 two-up arrangement.                                    */
.form-wide{--form-measure:56rem;max-width:var(--form-measure)}

/* Section cards read as steps, numbered by the order they must be completed. */
.form-wide > .card{position:relative}
.form-wide > .card > h3{
  display:flex;align-items:baseline;gap:11px;
}
.form-wide > .card > h3::before{
  counter-increment:formstep;content:counter(formstep);
  font-family:var(--font-body);font-size:var(--fs-2xs);font-weight:700;
  line-height:1;letter-spacing:0;
  color:var(--brand-gold-muted);
  border:1px solid var(--rule-accent);border-radius:2px;
  padding:5px 7px;flex:none;position:relative;top:-2px;
  font-variant-numeric:tabular-nums lining-nums;
}
.form-wide{counter-reset:formstep}

/* The action row is the one full-width element: it belongs to the whole form,
   not to the last section. */
.form-wide > .row{
  margin-top:4px;padding-top:20px;border-top:1px solid var(--rule-soft);
}

@media(min-width:1240px){
  /* Give the fields room to breathe rather than stretching the column. */
  .form-wide{--form-measure:64rem}
}

/* Section rhythm: one spacing rule instead of an inline margin on each card. */
.form-wide > .card{margin-bottom:16px}
.form-wide > .card > h3{margin-bottom:16px}
.form-wide > .card > h3:has(+ .form-sub){margin-bottom:6px}
.form-sub{
  font-size:var(--fs-xs);line-height:var(--lh-normal);
  color:var(--ink-muted);margin-bottom:18px;max-width:62ch;
}
.form-sub b{color:var(--ink-secondary);font-weight:600}

/* Access list — was a hand-rolled inline grid repeated per person. */
.access-list{
  max-height:300px;overflow-y:auto;overscroll-behavior:contain;
  border:1px solid var(--rule-fine);border-radius:var(--radius-sm);
}
.access-row{
  display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;
  padding:11px 13px;border-bottom:1px solid var(--rule-fine);
}
.access-row:last-child{border-bottom:0}
.access-row:hover{background:var(--surface-elevated)}
.access-who{min-width:0}
.access-who b{
  display:block;font-size:var(--fs-sm);font-weight:600;
  color:var(--ink-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.access-who span{
  display:block;font-size:var(--fs-2xs);color:var(--ink-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.access-lvl{width:auto;min-width:132px;padding:8px 30px 8px 10px;font-size:var(--fs-sm)}

/* Actions: primary sized to its label, not stretched across the form. */
.form-actions{gap:10px;flex-wrap:wrap}
@media(max-width:520px){
  .form-actions{flex-direction:column;align-items:stretch}
  .form-actions .btn{width:100%}
  .access-row{grid-template-columns:1fr;gap:8px}
  .access-lvl{width:100%}
}

/* ================= In-rail collapse toggle (ASEPS sidebar header) ========== */
.rail-t{
  margin-left:auto;flex:none;
  width:32px;height:32px;display:grid;place-items:center;cursor:pointer;
  background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);
  color:rgba(255,255,255,.55);transition:color .16s,background .16s,border-color .16s;
}
.rail-t:hover{color:#fff;background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.15)}
.rail-t svg{width:18px;height:18px;stroke-width:2}
.side.mini .rail-t{display:none}
@media(max-width:900px){.rail-t{display:none}}

/* ============================================================================
   LANDING PAGE (src/views/landing.js)
   Public front door. Same ASEPS tokens as the app, so it themes automatically.
   ============================================================================ */
.lp{background:var(--surface-paper)}
.lp-wrap{
  /* THE shared container — the masthead and every section use this one rule,
     which is what keeps the header logo and the hero headline on the same
     left edge. Mirrors the ASEPS web landing (`container mx-auto max-w-[1440px]
     px-4 sm:px-6 lg:px-8`): a capped, centred column rather than full bleed.
     Section backgrounds still run edge to edge because the colour lives on the
     <section>, not on this wrapper.

     Nothing inside may re-centre itself (no `justify-content:center` on a
     child grid) — that decouples it from this column and breaks the alignment. */
  width:100%;max-width:1440px;margin:0 auto;
  padding:0 clamp(16px,4vw,48px);
}

/* ------------------------------- masthead --------------------------------- */
.lp-nav{
  position:sticky;top:0;z-index:50;
  background:var(--veil);backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid var(--rule-fine);
}
.lp-nav-in{display:flex;align-items:center;gap:24px;height:72px}
/* Wordmark only — the seal was removed from the masthead, so there is no
   image to sit beside and no gap to reserve for one. */
.lp-brand{
  display:flex;align-items:center;text-decoration:none;
  color:var(--ink-primary);margin-right:auto;
}
.lp-brand > span{
  font-family:var(--font-display);font-weight:600;font-size:var(--fs-2xl);
  letter-spacing:-.02em;line-height:1.05;display:block;
}
.lp-brand > span > span{
  display:block;font-family:var(--font-body);font-size:var(--fs-3xs);font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--brand-gold-muted);
  margin-top:3px;
}
.lp-nav-links{display:flex;align-items:center;gap:28px}
.lp-nav-links a{
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.02em;
  color:var(--ink-secondary);text-decoration:none;transition:color .16s;
}
.lp-nav-links a:hover{color:var(--brand-navy)}
@media(max-width:860px){.lp-nav-links{display:none}}

/* --------------------------------- hero ----------------------------------- */
.lp-hero{
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(52px,8vw,112px) 0 clamp(48px,7vw,96px);
  /* A warm paper ground so the whole band reads as a tinted field rather
     than plain white with two faint washes on it. */
  background:linear-gradient(176deg,
    var(--surface-inset) 0%, var(--surface-paper) 46%, var(--surface-card) 100%);
  border-bottom:1px solid var(--rule-fine);
}
/* Colour field: gold at the top right where the specimen card sits, navy
   sweeping in from the left under the headline, and a green cast low down
   that ties to the "done" states used throughout the product. */
.lp-hero::before{
  content:"";position:absolute;inset:-10% -5%;pointer-events:none;z-index:-2;
  background:
    radial-gradient(760px 460px at 86% -12%, var(--hero-wash-gold),  transparent 62%),
    radial-gradient(620px 520px at 6% 10%,   var(--hero-wash-navy),  transparent 60%),
    radial-gradient(700px 420px at 26% 116%, var(--hero-wash-green), transparent 62%),
    radial-gradient(420px 320px at 62% 88%,  var(--hero-wash-gold-2),transparent 66%);
  filter:saturate(1.15);
}
/* The colour field carries the hero on its own; an overlaid grid read as a
   chequered pattern behind the text rather than as texture. */
.lp-hero-in{position:relative;display:grid;gap:clamp(32px,5vw,64px);align-items:center}
@media(min-width:1000px){.lp-hero-in{grid-template-columns:1.05fr .95fr}}
/* No wide-screen re-centring: .lp-wrap already caps the column, and centring
   this grid inside it would pull the headline off the masthead's left edge. */

/* ---- Seal ribbon (replaces the generic rounded "kicker" pill) ------------
   A tinted 999px pill is the default SaaS convention and says nothing about
   whose system this is. This instead reads as a mark of office: the state
   seal, a hairline rule that draws itself on load, and the wordmark under a
   slow gold sweep. Squared to the editorial geometry, no filled capsule. */
/* ---- Hero provenance mark -------------------------------------------------
   The masthead seal sits directly above the hero, so repeating the seal here
   read as a duplicated logo. This conveys the same authority typographically:
   a drawn rule, the issuing government, and what the system is.             */
.lp-provenance{
  display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-bottom:26px;padding:7px 14px;position:relative;
  background:linear-gradient(90deg,
    var(--brand-gold-wash), transparent);
  border-left:3px solid var(--brand-gold);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  animation:pv-in .8s var(--ease) both;
}
.lp-pv-rule{
  flex:none;width:30px;height:2px;border-radius:1px;
  background:linear-gradient(90deg,var(--brand-gold),var(--brand-gold-muted));
  animation:pv-tick .6s var(--ease) .25s both;
}
.lp-pv-txt{
  position:relative;font-family:var(--font-body);font-size:var(--fs-2xs);
  font-weight:700;letter-spacing:var(--tr-caps-lg);text-transform:uppercase;
  color:var(--brand-gold-deep);white-space:nowrap;
  background:linear-gradient(100deg,
    var(--brand-gold-muted) 0%, var(--brand-gold-muted) 38%,
    var(--brand-gold) 50%,
    var(--brand-gold-muted) 62%, var(--brand-gold-muted) 100%);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:pv-in .8s var(--ease) .2s both, pv-sweep 6.5s linear 1.4s infinite;
}
.lp-pv-dot{flex:none;width:3px;height:3px;border-radius:50%;
  background:var(--ink-muted);opacity:.55}
.lp-pv-sub{
  font-family:var(--font-body);font-size:var(--fs-2xs);font-weight:600;
  letter-spacing:var(--tr-wide);text-transform:uppercase;color:var(--ink-muted);
  white-space:nowrap;animation:pv-in .8s var(--ease) .35s both;
}
@keyframes pv-rule{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes pv-tick{from{opacity:0;transform:scaleX(0)}to{opacity:1;transform:none}}
@keyframes pv-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes pv-sweep{from{background-position:120% 0}to{background-position:-180% 0}}
/* The gold sweep paints with transparent text fill; if motion is reduced we
   must restore a solid colour or the wordmark disappears entirely. */
@media(prefers-reduced-motion:reduce){
  .lp-pv-txt{background:none;-webkit-text-fill-color:currentColor;
    color:var(--brand-gold-muted);animation:none}
  .lp-provenance,.lp-pv-rule,.lp-pv-sub{animation:none}
  .lp-h1 em::after{animation:none;transform:none}
}

/* ---- Hero headline: the emphasis line carries the idea ---- */
.lp-h1 em{
  font-style:italic;color:var(--brand-navy-solid);
  position:relative;white-space:nowrap;
}
.lp-h1 em::after{
  content:"";position:absolute;left:-.06em;right:-.06em;bottom:.02em;height:.42em;
  background:linear-gradient(90deg,
    var(--brand-gold-wash), var(--hero-wash-gold-2) 62%, transparent);
  border-radius:2px;z-index:-1;
  animation:h1-underline 1s var(--ease) .55s both;transform-origin:left;
}
@keyframes h1-underline{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---- Three facts: gives the hero a floor and states what it is ---- */
.lp-hero-facts{
  list-style:none;margin:34px 0 0;padding:0;
  display:grid;gap:10px;
}
@media(min-width:560px){.lp-hero-facts{grid-template-columns:repeat(3,1fr);gap:12px}}
.lp-hero-facts li{
  display:flex;flex-direction:column;gap:3px;
  padding:13px 14px;
  background:var(--surface-card);
  border:1px solid var(--rule-fine);
  border-top:3px solid var(--fact-tone,var(--brand-navy-solid));
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-card);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.lp-hero-facts li:hover{transform:translateY(-2px);box-shadow:var(--shadow-pop)}
.lp-hero-facts li:nth-child(1){--fact-tone:var(--brand-navy-solid)}
.lp-hero-facts li:nth-child(2){--fact-tone:var(--brand-gold);
  --fact-ink:var(--brand-gold-muted)}   /* gold is a fill; its text twin is muted */
.lp-hero-facts li:nth-child(3){--fact-tone:var(--success)}
.lp-hero-facts b{
  font-family:var(--font-display);font-size:var(--fs-md);font-weight:600;
  /* --fact-ink where the tone is too light to set type in (gold). */
  color:var(--fact-ink,var(--fact-tone,var(--ink-primary)));
  letter-spacing:var(--tr-snug);
}
.lp-hero-facts span{
  font-size:var(--fs-2xs);line-height:var(--lh-normal);color:var(--ink-muted);
}
.lp-hero-copy h1,.lp-h1{
  font-size:var(--fs-5xl);line-height:1.06;letter-spacing:var(--tr-tight);
  margin-bottom:22px;text-wrap:balance;
}
.lp-lead{
  font-size:var(--fs-lg);line-height:var(--lh-loose);
  color:var(--ink-secondary);max-width:58ch;
}
.lp-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.lp-cta-c{justify-content:center}
.lp-note{
  font-size:var(--fs-xs);color:var(--ink-muted);margin-top:20px;
  padding-left:14px;border-left:2px solid var(--rule-accent);max-width:48ch;
}

/* hero specimen card — one file and its trail */
.lp-hero-art{position:relative}
.lp-card-demo{
  position:relative;
  background:var(--surface-card);border:1px solid var(--rule-fine);
  border-radius:var(--radius-lg);padding:26px;
  /* Lifted well clear of the colour field behind it. */
  box-shadow:var(--shadow-card),
             0 18px 50px -14px var(--hero-wash-navy),
             0 34px 80px -30px var(--hero-wash-gold);
}
/* Gold-to-navy capline: the card is a specimen of a live file, and the rule
   states that without adding another label. */
.lp-card-demo::before{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  background:linear-gradient(90deg,
    var(--brand-gold), var(--brand-gold) 30%,
    var(--success) 62%, var(--brand-navy-solid));
}
.lp-demo-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.lp-demo-title{
  font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:600;
  line-height:1.3;letter-spacing:-.01em;margin:14px 0 12px;
}
.lp-demo-meta{
  display:flex;flex-wrap:wrap;gap:16px;font-size:var(--fs-2xs);font-weight:500;
  color:var(--ink-muted);padding-bottom:18px;border-bottom:1px solid var(--rule-fine);
}
.lp-demo-meta span{display:inline-flex;align-items:center;gap:6px}
.lp-demo-meta svg{width:13px;height:13px;stroke-width:2}
.lp-demo-trail{display:flex;flex-direction:column;gap:2px;padding-top:16px}
.lp-trail-row{
  display:flex;align-items:center;gap:11px;padding:9px 0;font-size:var(--fs-xs);
  position:relative;
}
.lp-trail-row i{
  width:9px;height:9px;border-radius:999px;flex:none;
  background:var(--ink-subtle);position:relative;z-index:1;
}
/* Spine linking the stations, so the trail reads as one journey. */
.lp-trail-row:not(:last-child)::before{
  content:"";position:absolute;left:4px;top:calc(50% + 6px);
  width:1px;height:calc(100% - 3px);
  background:var(--rule-bold);
}
.lp-trail-row.done:not(:last-child)::before{background:var(--success);opacity:.45}
.lp-trail-row b{font-weight:600;flex:1}
.lp-trail-row span{color:var(--ink-muted);font-size:var(--fs-2xs)}
.lp-trail-row.done i{background:var(--success)}
.lp-trail-row.now i{background:var(--brand-gold);
  box-shadow:0 0 0 4px var(--brand-tint)}
.lp-trail-row.now b{color:var(--brand-gold-muted)}
.lp-trail-row.next{opacity:.5}

/* ------------------------------- problem band ----------------------------- */
.lp-band{
  background:var(--brand-navy-solid);color:#fff;
  padding:clamp(40px,6vw,72px) 0;
}
.lp-band-grid{display:grid;gap:clamp(20px,4vw,56px);align-items:center}
@media(min-width:900px){.lp-band-grid{grid-template-columns:1fr 1fr}}

.lp-band .eyebrow{color:var(--brand-gold)}
.lp-band .eyebrow::before{background:var(--brand-gold);opacity:.6}
.lp-band .lp-h2{color:#fff;margin-top:14px}
.lp-band-copy{
  font-size:var(--fs-md);line-height:1.75;
  color:rgba(255,255,255,.78);
  max-width:62ch;
}

/* -------------------------------- sections -------------------------------- */
.lp-section{padding:clamp(48px,7vw,96px) 0}

.lp-section-alt{background:var(--surface-inset)}
.lp-h2{
  font-size:var(--fs-3xl);line-height:1.15;
  letter-spacing:-.01em;margin:0;
}
.lp-sec-head{max-width:60ch;margin-bottom:clamp(28px,4vw,48px)}
.lp-sec-head .eyebrow{margin-bottom:14px}
.lp-sec-head .lp-h2{margin-bottom:14px}
.lp-sec-lead{font-size:var(--fs-md);line-height:1.7;color:var(--ink-secondary)}

/* --------------------------------- roles ---------------------------------- */
.lp-roles{display:grid;gap:16px}
@media(min-width:900px){.lp-roles{grid-template-columns:repeat(3,1fr)}}
.lp-role{
  padding:30px;background:var(--surface-card);
  border:1px solid var(--rule-fine);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);transition:border-color .2s,box-shadow .2s;
}
.lp-role:hover{border-color:var(--rule-bold);box-shadow:var(--shadow-pop)}
.lp-role-mid{border-color:var(--rule-accent)}
.lp-role .ic{
  width:46px;height:46px;display:grid;place-items:center;margin-bottom:18px;
  border-radius:var(--radius-sm);background:var(--brand-tint);
  color:var(--brand-gold-muted);border:1px solid var(--rule-accent);
}
.lp-role .ic svg{width:21px;height:21px;stroke-width:1.9}
.lp-role h3{font-size:var(--fs-2xl);margin-bottom:10px}
.lp-role p{font-size:var(--fs-sm);line-height:1.65;color:var(--ink-secondary)}
.lp-ticks{list-style:none;padding:0;margin:20px 0 0;
  display:flex;flex-direction:column;gap:9px}
.lp-ticks li{
  display:flex;align-items:flex-start;gap:9px;font-size:var(--fs-xs);font-weight:500;
  color:var(--ink-secondary);
}
.lp-ticks svg{width:15px;height:15px;flex:none;margin-top:3px;
  color:var(--success);stroke-width:2.4}

/* ------------------------------- final CTA -------------------------------- */
.lp-final{
  position:relative;overflow:hidden;text-align:center;
  padding:clamp(52px,8vw,104px) 0;border-top:1px solid var(--rule-fine);
}
.lp-final::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(620px 320px at 50% 0%, rgba(212,150,10,.10), transparent 68%);
}
.lp-final-in{position:relative;display:flex;flex-direction:column;align-items:center}
.lp-seal{margin-bottom:22px;object-fit:contain;
  filter:drop-shadow(0 4px 14px var(--seal-shadow))}
.lp-final .lp-sec-lead{max-width:52ch;margin-top:14px}

/* --------------------------------- footer --------------------------------- */
.lp-foot{background:var(--surface-inset);border-top:1px solid var(--rule-fine);
  padding:32px 0}
.lp-foot-in{display:flex;flex-wrap:wrap;align-items:center;gap:18px;
  justify-content:space-between}
.lp-foot-brand{display:flex;align-items:center;gap:12px}
.lp-foot-brand img{flex:none;object-fit:contain}
.lp-foot-brand b{display:block;font-family:var(--font-display);font-size:var(--fs-lg);
  font-weight:600;letter-spacing:-.01em}
.lp-foot-brand span{display:block;font-size:var(--fs-2xs);color:var(--ink-muted);
  font-weight:500}
.lp-foot-note{font-size:var(--fs-2xs);color:var(--ink-muted);font-weight:500;
  max-width:46ch;line-height:1.6;text-align:right}
@media(max-width:700px){.lp-foot-note{text-align:left}}

/* ==================== Reports module helpers (routes/reports.js) ===========
   These four classes were used by the reports views but had no definition in
   the previous stylesheet either — they fell back to browser defaults. Given
   proper definitions here so the module matches the rest of the system. */
.page-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:22px;padding-bottom:18px;
  border-bottom:1px solid var(--rule-fine);
}
.page-head h1,.page-head h2{letter-spacing:-.01em}
.row-wrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.a-warn{background:var(--tint-amber);color:var(--warn);
  border-color:color-mix(in srgb,var(--warn) 26%,transparent)}

/* ============================================================ THERMOSTAT */
.tbl.thermo{font-size:var(--fs-xs)}
.tbl.thermo td{padding:11px 12px;vertical-align:top}
.tbl.thermo th{white-space:nowrap}
.tbl.thermo .bad{color:var(--alert)}
.tbl.thermo .warn-t{color:var(--warn)}
.tbl.thermo tr.row-warm td{background:color-mix(in srgb,var(--danger-bg) 55%,transparent)}
.remark{font-size:var(--fs-xs);white-space:pre-line}
.mini-bar{position:relative;height:5px;border-radius:999px;background:var(--surface-inset);
  margin-top:6px;min-width:70px;overflow:visible}
.mini-bar i{display:block;height:100%;border-radius:999px;background:var(--brand-navy-solid)}
.mini-bar s{position:absolute;top:-3px;width:2px;height:11px;background:var(--brand-gold);
  transform:translateX(-1px);text-decoration:none}
.chip-ok{background:var(--green-tint);color:var(--success);border-color:transparent}
.tl-pill{display:inline-block;padding:4px 10px;border-radius:var(--radius-sm);font-size:var(--fs-2xs);
  font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.tl-on_time{background:var(--green-tint);color:var(--success)}
.tl-slipping{background:var(--tint-gold);color:var(--brand-gold-muted)}
.tl-behind,.tl-overrun{background:var(--danger-bg);color:var(--alert)}
.tl-completed{background:var(--tint-slate);color:var(--ink-secondary)}
.tl-terminated,.tl-unscheduled{background:var(--tint-slate);color:var(--ink-muted)}

.thermo-card{border-left:3px solid var(--brand-navy-solid)}
.thermo-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.tf{padding:11px 13px;border-radius:var(--radius-sm);background:var(--surface-inset);display:flex;
  flex-direction:column;gap:3px;min-width:0}
.tf .k{font-size:var(--fs-3xs);font-weight:700;color:var(--ink-muted);letter-spacing:.06em;text-transform:uppercase}
.tf .v{font-weight:600;font-size:var(--fs-base);overflow-wrap:anywhere}
.tf .s{font-size:var(--fs-2xs);color:var(--ink-muted);font-weight:500}
.thermo-time{margin-top:14px;padding:12px 14px;border-radius:var(--radius-sm);border:1px solid var(--rule-fine)}
.tt-row{display:flex;align-items:center;gap:10px;margin:6px 0}
.tt-k{font-size:var(--fs-3xs);font-weight:700;color:var(--ink-muted);letter-spacing:.05em;text-transform:uppercase;width:78px;flex:none}
.tt-v{font-size:var(--fs-xs);font-weight:600;min-width:120px;text-align:right;font-variant-numeric:tabular-nums}
.prog-fill.f-time{background:var(--brand-gold)}
.tt-line{font-size:var(--fs-sm);font-weight:600;margin-top:8px}
.tt-line.overrun,.tt-line.behind{color:var(--alert)}
.tt-line.slipping{color:var(--brand-gold-muted)}
.tt-line.on_time{color:var(--success)}
.tt-line.completed{color:var(--ink-secondary)}
.remark-box{margin-top:12px;padding:10px 13px;background:var(--tint-gold);border-radius:var(--radius-sm);
  font-size:var(--fs-sm);white-space:pre-line}

/* ============================================================ SITE DIARY */
.diary-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.diary-item{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:var(--radius-sm);
  border:1px solid var(--rule-fine);background:var(--surface-card)}
.diary-item a{color:inherit;text-decoration:none}
.diary-row{display:flex;gap:14px;padding:14px 18px;border-top:1px solid var(--line-soft);
  text-decoration:none;color:inherit;align-items:flex-start}
.diary-row:hover{background:var(--surface-inset)}
.dr-thumbs{display:flex;gap:4px;flex:none}
.dr-thumbs img,.dr-vid,.dr-more{width:54px;height:54px;border-radius:6px;object-fit:cover;
  background:var(--surface-inset);display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-2xs);font-weight:700;color:var(--ink-muted)}
.dr-act{font-size:var(--fs-sm);margin-top:4px;white-space:pre-line}

/* ============================================================ SITE REPORT */
.sr-wrap{width:100%}
.sr-form > .card{width:100%}
.sr-form .sr-submit{max-width:420px}
.sr-facts{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.sr-facts .k{display:block;font-size:var(--fs-3xs);font-weight:700;color:var(--ink-muted);letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:3px}
.sr-facts b{font-size:var(--fs-base)}
.drop{position:relative;border:2px dashed var(--rule-bold);border-radius:var(--radius-lg);padding:26px 16px;
  text-align:center;display:flex;flex-direction:column;gap:6px;align-items:center;background:var(--surface-inset)}
.drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.drop-txt{font-weight:700;display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-md)}
.previews{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));margin-top:10px}
.pv{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--surface-inset);
  border:1px solid var(--rule-fine)}
.pv img{width:100%;height:100%;object-fit:cover;display:block}
.pv-file{display:flex;align-items:center;justify-content:center;height:100%;font-size:var(--fs-2xs);font-weight:700;color:var(--ink-muted)}
.pv-cap{position:absolute;left:0;right:0;bottom:0;font-size:var(--fs-3xs);padding:2px 5px;background:rgba(0,0,0,.55);color:#fff}
.pv-rm{position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:999px;border:0;
  background:rgba(0,0,0,.6);color:#fff;font-size:var(--fs-md);line-height:1;cursor:pointer}
.sr-submit{position:sticky;bottom:calc(var(--tabbar-h,64px) + 8px);padding:8px 0;z-index:2}
@media(min-width:901px){.sr-submit{position:static}}

.sr-report .sr-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap}
.sr-report h2{font-size:var(--fs-2xl);margin:2px 0 4px}
.sr-pct{text-align:center;padding:8px 16px;border-radius:var(--radius-sm);background:var(--brand-navy-solid);color:#fff;flex:none}
.sr-pct .v{display:block;font-family:var(--font-display);font-size:var(--fs-3xl);font-weight:600;
  font-variant-numeric:tabular-nums lining-nums}
.sr-pct .k{font-size:var(--fs-3xs);letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.sr-text{font-size:var(--fs-base);white-space:pre-line;line-height:1.55}
.sr-sign{margin-top:16px;padding-top:12px;border-top:1px solid var(--rule-fine);font-size:var(--fs-xs);color:var(--ink-secondary)}
.media-grid{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.mi{display:block;border-radius:8px;overflow:hidden;background:var(--surface-inset);aspect-ratio:4/3;
  border:1px solid var(--rule-fine)}
.mi img,.mi video{width:100%;height:100%;object-fit:cover;display:block}
.mi-video{grid-column:span 2}
.mi-file{display:flex;align-items:center;justify-content:center;gap:8px;font-size:var(--fs-xs);font-weight:600;
  color:var(--ink-secondary);text-decoration:none;padding:12px}

/* ============================================================ PUBLIC PAGE */
.pub{width:100%;padding:18px var(--gutter,24px) 40px}
.pub-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.pub-head img{width:40px;height:40px}
.pub-head b{display:block;font-size:var(--fs-base)}
.pub-head span{font-size:var(--fs-xs);color:var(--ink-muted);font-weight:500}

/* ============================================================ PROJECT GUIDE */
.tip{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:999px;
  border:1px solid var(--rule-bold);background:var(--surface-inset);color:var(--ink-muted);font-size:var(--fs-3xs);
  font-weight:800;font-style:italic;font-family:var(--font-display);cursor:help;position:relative;vertical-align:middle;
  margin-left:4px;padding:0;line-height:1}
.tip::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);
  width:max-content;max-width:280px;padding:9px 12px;border-radius:var(--radius-sm);background:var(--ink-primary);
  color:var(--surface-card);font:500 .76rem/1.45 var(--font-body);font-style:normal;text-align:left;white-space:normal;
  box-shadow:var(--shadow-pop);opacity:0;pointer-events:none;transition:opacity .12s;z-index:20}
.tip:hover::after,.tip:focus-visible::after{opacity:1}
.tip:focus-visible{outline:2px solid var(--brand-gold);outline-offset:1px}
label .tip{margin-left:6px}

.wz-hub .wz-choice{display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:var(--radius-lg);
  border:1px solid var(--rule-fine);background:var(--surface-card);text-decoration:none;color:inherit;transition:border-color .14s,box-shadow .14s}
.wz-choice:hover{border-color:var(--brand-navy);box-shadow:var(--shadow-pop)}
.wz-choice b{font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:600}
.wz-ic{width:40px;height:40px;border-radius:999px;background:var(--brand-navy-solid);color:#fff;display:flex;
  align-items:center;justify-content:center}
.wz-ic svg{width:20px;height:20px}
.wz-row{display:flex;align-items:center;gap:14px;padding:14px 18px;border-top:1px solid var(--line-soft);
  text-decoration:none;color:inherit}
.wz-row:hover{background:var(--surface-inset)}
.wz-prog{position:relative;width:52px;height:52px;border-radius:999px;flex:none;display:flex;align-items:center;
  justify-content:center;background:conic-gradient(var(--brand-navy-solid) calc(var(--p)*1%),var(--surface-inset) 0)}
.wz-prog::before{content:"";position:absolute;inset:5px;border-radius:999px;background:var(--surface-card)}
.wz-prog b{position:relative;font-size:var(--fs-2xs);font-variant-numeric:tabular-nums lining-nums}
.wz-next{display:block;font-size:var(--fs-xs);font-weight:600;margin-top:4px;color:var(--brand-navy)}
.wz-next.attn{color:var(--alert)}

.wz-top{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:16px}
.wz-rail{display:flex;gap:4px;list-style:none;padding:0;margin:0;flex-wrap:wrap}
.wz-rail li{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:600;color:var(--ink-muted);
  padding:6px 10px;border-radius:999px;cursor:pointer}
.wz-rail li span{width:22px;height:22px;border-radius:999px;border:1px solid var(--rule-bold);display:flex;
  align-items:center;justify-content:center;font-size:var(--fs-3xs);font-variant-numeric:lining-nums}
.wz-rail li.on{color:var(--ink-primary);background:var(--surface-inset)}
.wz-rail li.on span{background:var(--brand-navy-solid);color:#fff;border-color:transparent}
.wz-rail li.done span{background:var(--green-tint);color:var(--success);border-color:transparent}
.wz-step h2{font-size:var(--fs-3xl);margin:4px 0 6px}
.wz-lead{color:var(--ink-secondary);font-weight:500;margin-bottom:18px;max-width:70ch}
.wz-similar{margin-top:8px;padding:10px 13px;border-radius:var(--radius-sm);background:var(--tint-gold);font-size:var(--fs-sm)}
.wz-similar a{color:var(--ink-primary);font-weight:600}
.wz-sit{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.wz-opt{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border-radius:var(--radius-sm);
  border:1px solid var(--rule-fine);cursor:pointer;background:var(--surface-card)}
.wz-opt:hover{border-color:var(--rule-bold)}
.wz-opt input{width:auto;margin-top:3px;accent-color:var(--brand-navy)}
.wz-opt input:checked + span b{color:var(--brand-navy)}
.wz-opt:has(input:checked){border-color:var(--brand-navy);background:var(--brand-tint)}
.wz-opt span span{display:block;font-size:var(--fs-2xs);margin-top:2px}
.wz-fine{margin-top:12px}
.wz-fine summary{cursor:pointer;font-size:var(--fs-sm);font-weight:600;color:var(--ink-secondary);margin-bottom:8px}
.wz-contact{padding:10px 12px;border-radius:var(--radius-sm);background:var(--surface-inset);margin-bottom:8px}
.wz-contact .field{margin-bottom:0}
.wz-review{margin:0}
.wz-review .rv{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:12px 10px;border-bottom:1px solid var(--rule-fine);
  cursor:pointer;border-radius:var(--radius-sm)}
.wz-review .rv:hover{background:var(--surface-inset)}
.wz-review dt{font-size:var(--fs-3xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);padding-top:3px}
.wz-review dd{margin:0;font-weight:500}
.wz-nav{display:flex;align-items:center;gap:12px;justify-content:space-between;position:sticky;bottom:12px;
  padding:12px 14px;border-radius:var(--radius-lg);background:var(--surface-card);border:1px solid var(--rule-fine);
  box-shadow:var(--shadow-pop);margin-top:14px}
.wz-nav #wzNext,.wz-nav #wzSubmit{margin-left:auto}

/* The guide page stacks a hero card and one card per phase. Neither .wz nor
   .card carried any vertical spacing, so the boxes sat flush against each
   other with a 0px gap. The container owns the rhythm so every child — the
   hero, each phase, and any alert inserted between them — is spaced equally. */
.wz{display:flex;flex-direction:column;gap:18px}
/* Children that carried their own bottom margin would otherwise double the
   gap now that the container spaces them. */
.wz > .spread,
.wz > .wz-top{margin-bottom:0}

.guide-hero{border-left:3px solid var(--brand-navy-solid)}
.guide-bar{height:8px;border-radius:999px;background:var(--surface-inset);overflow:hidden;margin:14px 0 10px}
.guide-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--brand-navy-solid),var(--brand-gold));border-radius:999px}
.guide-headline{font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:600}
.guide-headline.attn{color:var(--alert)}
.guide-phases{display:grid;gap:8px;grid-template-columns:repeat(5,minmax(0,1fr));list-style:none;padding:0;margin:16px 0 0}
.gp a{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:var(--radius-sm);
  border:1px solid var(--rule-fine);text-decoration:none;color:inherit;font-size:var(--fs-xs)}
.gp b{font-size:var(--fs-sm)}.gp span{color:var(--ink-muted)}
.gp-done a{background:var(--green-tint);border-color:transparent}
.gp-now a{background:var(--brand-navy-solid);color:#fff}.gp-now span{color:rgba(255,255,255,.75)}
.gp-attention a{background:var(--danger-bg);border-color:var(--danger-line)}
@media(max-width:760px){.guide-phases{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gsteps{list-style:none;padding:0;margin:6px 0 0}
.gs{display:flex;gap:14px;padding:6px 0;position:relative}
.gs::before{content:"";position:absolute;left:13px;top:34px;bottom:-6px;width:2px;background:var(--rule-fine)}
.gs:last-child::before{display:none}
.gs-dot{width:28px;height:28px;border-radius:999px;flex:none;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--rule-bold);background:var(--surface-card);font-weight:800;font-size:var(--fs-sm);margin-top:4px;position:relative;z-index:1}
.gs-dot svg{width:14px;height:14px}
.gs-done .gs-dot{background:var(--success);border-color:var(--success);color:#fff}
.gs-now .gs-dot{border-color:var(--brand-navy-solid);box-shadow:0 0 0 4px var(--brand-tint)}
.gs-attention .gs-dot{background:var(--alert);border-color:var(--alert);color:#fff}
.gs-skipped .gs-dot{color:var(--ink-subtle);border-style:dashed}
.gs-body{flex:1;min-width:0}
.gs-body details{border:1px solid var(--rule-fine);border-radius:var(--radius-sm);background:var(--surface-card)}
.gs-now .gs-body details{border-color:var(--brand-navy-solid)}
.gs-attention .gs-body details{border-color:var(--danger-line)}
.gs-body summary{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:11px 14px;cursor:pointer;list-style:none}
.gs-body summary::-webkit-details-marker{display:none}
.gs-title{font-weight:600;font-size:var(--fs-base)}
.gs-done .gs-title,.gs-skipped .gs-title{color:var(--ink-secondary);font-weight:500}
.gs-state{font-size:var(--fs-3xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);flex:none}
.gs-now .gs-state{color:var(--brand-navy)}.gs-attention .gs-state{color:var(--alert)}.gs-done .gs-state{color:var(--success)}
.gs-detail{padding:4px 14px 14px;border-top:1px solid var(--rule-fine)}
.gs-why{display:flex;gap:8px;align-items:flex-start;font-size:var(--fs-sm);color:var(--ink-secondary);padding:10px 0 6px}
.gs-why svg{flex:none;margin-top:2px;color:var(--brand-gold)}
.gs-note{font-size:var(--fs-sm);font-weight:600;padding:8px 11px;border-radius:var(--radius-sm);background:var(--surface-inset);margin-bottom:8px}
.gs-form{margin-top:10px;padding-top:10px;border-top:1px dashed var(--rule-fine)}
.gs-form .field{margin-bottom:12px}