/* ═══════════════════════════════════════════════════════════════════════
   Bateel Maintenance — design tokens
   Carried over unchanged from the identity: dark brown, gold, beige.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* ── The two colours the whole product is built from ──────────────────
       #EFF6FF is the chrome: the sidebar and the header, the frame around
       the work. #FFFFFF is the work itself — every page, every card. Content
       is therefore always the brightest thing on screen, and the frame steps
       back without needing a border to say so.

       Everything else is derived: a blue for anything you can press, slate
       for text, and the gold kept for the BATEEL mark alone, because a brand
       that shouts from every button stops being a brand. */
    --chrome:      #EFF6FF;
    --chrome-deep: #DCE9FB;   /* the sidebar's own edge and dividers */
    --chrome-line: #D6E4F7;   /* where chrome meets white */

    /* There are exactly two surfaces in this product: #EFF6FF and #FFFFFF.
       Everything pressable is one of them, and what separates a button from
       the paper behind it is a border and the weight of its type, not a
       third colour. The one exception is status — red, amber, green — which
       is not decoration but the meaning of the row it sits on.

       So `--primary` is the chrome, and anything filled with it carries ink
       type. `--primary-deep` is only ever a border. */
    --primary:      #EFF6FF;
    --primary-deep: #C9DDF6;
    --primary-soft: #F5F9FF;

    --ink:        #0F2540;    /* headings */
    --body:       #33465C;    /* prose */
    --muted:      #6B7C93;    /* labels, captions */
    --line:       #E3EAF3;    /* hairlines on white */
    --surface:    #FFFFFF;
    --beige:      #F6F9FD;    /* the faintest wash — table heads, hovers */

    /* `--gold` is a name a hundred rules already use for "the accent". It is
       no longer gold: on a two-surface product the accent is the ink itself,
       and the soft variant is the chrome. Redefining it here retunes progress
       dots, meters, rails and highlights in one place, with no rule to hunt. */
    --gold:       #0F2540;
    --gold-soft:  #EFF6FF;
    --gold-line:  #C9DDF6;

    /* `--brown` survives as a name because thirty rules use it for dark text.
       It is no longer brown — it is the ink those rules always meant. */
    --brown:      #0F2540;
    --brown-lite: #47607E;
    --brown-deep: #DCE9FB;    /* was a dark edge; now the chrome's own edge */

    --red:        #B3261E;  --red-soft:   #FBEAE7;  --red-line:   #F0D6D2;
    --amber:      #8F6210;  --amber-soft: #FBF0DA;  --amber-line: #EEDCB8;
    --blue:       #2A5C8A;  --blue-soft:  #E9F0F7;  --blue-line:  #CFE0EF;
    --ok:         #2C7A52;  --ok-soft:    #E7F2EC;  --ok-line:    #CBE3D5;

    --font:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;

    --r-sm: 9px;  --r-md: 12px;  --r-lg: 16px;  --r-xl: 20px;
    --shadow-sm: 0 1px 2px rgba(15, 37, 64, .05);
    --shadow-md: 0 8px 24px rgba(15, 37, 64, .08);
    --shadow-lg: 0 24px 60px rgba(15, 37, 64, .12);

    --sidebar: 246px;
    --sidebar-collapsed: 68px;

    /* The header's height, shared with the sidebar's brand block so the two
       line up exactly across the top. */
    --bar-h: 64px;
}

/* ── Dark ──────────────────────────────────────────────────────────────

   The same product, not a different one. Light is built from two surfaces —
   #EFF6FF for the frame, #FFFFFF for the work — and dark keeps exactly that
   shape: a deeper navy for the frame, a lighter navy for the work. Content
   is still the brightest thing on screen, and the frame still steps back
   without needing a border to say so.

   Only the tokens change. Every rule in the sheet above already reads from
   them, which is why there is no second stylesheet to keep in step.

   Status colours are lifted rather than swapped: red still means late and
   green still means done, but the pale tints behind them would glare on a
   dark page, so each gets a dark wash and a brighter face. */

:root[data-theme="dark"] {
    --chrome:      #0E1C2E;   /* the frame: sidebar and header */
    --chrome-deep: #16283F;   /* its own edge, and hovers on it */
    --chrome-line: #223A57;   /* where chrome meets the page */

    --primary:      #16283F;
    --primary-deep: #2C4A72;
    --primary-soft: #12222F;

    --ink:        #E8F0FA;    /* headings — the brightest type */
    --body:       #C2D2E4;    /* prose */
    --muted:      #8CA3BE;    /* labels, captions */
    --line:       #22364F;    /* hairlines on the page */
    --surface:    #13243A;    /* the work itself */
    --beige:      #182C45;    /* the faintest wash — table heads, hovers */

    --gold:       #E8F0FA;
    --gold-soft:  #1B3050;
    --gold-line:  #2C4A72;

    --brown:      #E8F0FA;
    --brown-lite: #A9BFD8;
    --brown-deep: #22364F;

    /* Meaning, kept legible: a brighter face on a dark wash. */
    --red:   #FF8D82;  --red-soft:   #3A1E1B;  --red-line:   #5C2E28;
    --amber: #E8B45C;  --amber-soft: #352814;  --amber-line: #574126;
    --blue:  #7FB4E8;  --blue-soft:  #162B42;  --blue-line:  #27456A;
    --ok:    #6FD4A0;  --ok-soft:    #14301F;  --ok-line:    #245239;

    /* Shadows do nothing on a dark ground; depth comes from the surface
       stepping up, so they are pulled back to a plain edge. */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .30);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, .40);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, .50);

    color-scheme: dark;
}

/* The few places that carry a colour of their own rather than a token. */
:root[data-theme="dark"] .mentions,
:root[data-theme="dark"] .usermenu__panel { box-shadow: 0 16px 40px rgba(0, 0, 0, .45); }

:root[data-theme="dark"] .tour__ring { box-shadow: 0 0 0 9999px rgba(0, 0, 0, .62); }
:root[data-theme="dark"] .tour__veil { background: rgba(0, 0, 0, .62); }
:root[data-theme="dark"] .tour__card { box-shadow: 0 16px 44px rgba(0, 0, 0, .55); }

/* White type on a status fill is right in the light theme, where the fill is
   dark. Here the fill is the bright face, so the type on it goes dark. */
:root[data-theme="dark"] .btn--ok,
:root[data-theme="dark"] .nav__count--alert { color: #0E1C2E; }

/* Paper is white whatever the screen was doing. */
@media print {
    :root[data-theme="dark"] {
        --chrome: #FFFFFF; --chrome-deep: #FFFFFF; --chrome-line: #DDDDDD;
        --surface: #FFFFFF; --beige: #FFFFFF;
        --ink: #000000; --body: #222222; --muted: #555555; --line: #CCCCCC;
        --gold: #000000; --brown: #000000;
    }
}


/* ── Reset ─────────────────────────────────────────────────────────── */

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

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

body {
    margin: 0;
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--body);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }

/* The reset makes every svg a block, which is right for standalone artwork but
   drops an inline icon onto its own line mid-sentence. Icons sit in the text.
   Inside a flex row this is ignored, so it costs those nothing. */
.icn {
    display: inline-block;
    vertical-align: -.15em;
    flex-shrink: 0;
}
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ═══ Layout ══════════════════════════════════════════════════════════ */

.shell { display: flex; align-items: flex-start; min-height: 100vh; }

/* ── Sidebar ───────────────────────────────────────────────────────── */

/* Solid and flush to the left edge, full height. */
.sidebar {
    width: var(--sidebar);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    color: var(--body);
    background: var(--chrome);
    border-right: 1px solid var(--chrome-line);
    transition: width .22s cubic-bezier(.4, 0, .2, 1);
    overflow: visible;
}

.sidebar__brand {
    height: var(--bar-h);
    padding: 0 18px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--chrome-line);
    flex-shrink: 0;
}

/* The lockup: name, a gold hairline, then the department beneath it. The
   sub-label is tracked out so its width sits under the name rather than
   floating loose — the two lines read as one mark. */
.wordmark {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    line-height: 1;
}
.wordmark__name {
    font-family: var(--serif);
    font-size: 23px;
    letter-spacing: .26em;
    font-weight: 500;
    line-height: 1;
    color: var(--ink);
    /* the tracking adds a trailing gap; pull it back so the mark is flush left */
    margin-right: -.26em;
}
.wordmark__rule {
    display: block;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, var(--ink), rgba(15, 37, 64, .10));
}
.wordmark__sub {
    font-size: 9px;
    letter-spacing: .34em;
    color: var(--gold);
    text-transform: uppercase;
    margin-right: -.34em;
}
.wordmark__logo {
    display: block;
    width: auto;
    height: 40px;
    max-width: 100%;
    object-fit: contain;
}

/* On the sign-in panel's deep blue, the mark has to be pale to be read
   at all. Everywhere else it sits on chrome and stays dark. */
.brandpanel .wordmark__name { color: var(--ink); }
.brandpanel .wordmark__sub  { color: var(--muted); }
.brandpanel .wordmark__rule {
    background: linear-gradient(90deg, var(--ink), rgba(15, 37, 64, .12));
}
.wordmark--dark .wordmark__sub  { color: var(--gold); }

.sidebar__scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 4px 10px 14px; }
.sidebar__scroll::-webkit-scrollbar { width: 4px; }
.sidebar__scroll::-webkit-scrollbar-thumb { background: var(--chrome-line); border-radius: 999px; }

.navgroup { position: relative; }

.nav__label {
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 15px 10px 6px;
}
/* The first group sits right under the brand rule and needs no run-up. */
.nav__label:first-child { padding-top: 8px; }

/* Sized to its label, not to the rail — the highlight ends where the words do. */
.nav__link {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 9px 13px;
    border-radius: 999px;
    font-size: 13.5px;
    color: var(--body);
    max-width: 100%;
    transition: background .18s cubic-bezier(.4, 0, .2, 1),
                color .18s ease,
                transform .18s cubic-bezier(.4, 0, .2, 1);
}
.nav__link:hover {
    background: var(--chrome-deep);
    color: var(--ink);
    transform: translateX(2px);
}
.nav__link:active { transform: translateX(2px) scale(.98); }
.nav__link .icn { color: var(--muted); }

/* The selected item lifts OUT of the chrome by going white — the page it
   leads to is white, so the nav is showing you where you already are. */
.nav__link.is-active {
    background: var(--surface);
    box-shadow: 0 1px 3px rgba(15, 37, 64, .10);
    color: var(--ink);
    font-weight: 500;
}
.nav__link.is-active:hover { transform: none; background: var(--surface); }
.nav__link.is-active .icn { color: var(--ink); }

.nav__count {
    margin-left: 2px;
    min-width: 20px;
    height: 19px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary-deep);
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
}
.nav__count--alert { background: var(--red); color: #fff; }

/* ── Main column ───────────────────────────────────────────────────── */

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    background: var(--chrome);
    border-bottom: 1px solid var(--chrome-line);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 30;
}
/* Matches the sidebar brand block, so the rule under BATEEL lands on the bar's
   own bottom edge and the two read as one band across the top. */
.topbar__inner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 22px;
    height: var(--bar-h);
    width: 100%;
}
.topbar__title { min-width: 150px; flex: 1 1 0; }
.topbar__title h1 {
    font-size: 17px;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -.005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.topbar__actions { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }

.burger {
    display: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 8px;
    cursor: pointer;
    color: var(--body);
}

.iconbtn {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px;
    cursor: pointer;
    color: var(--body);
    display: inline-flex;
    transition: border-color .12s ease, background .12s ease;
}
.iconbtn:hover { border-color: var(--primary-deep); color: var(--ink); background: var(--chrome); }

.iconbtn__dot {
    position: absolute;
    top: -3px; right: -3px;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    background: var(--red);
    color: #fff;
    border: 2px solid #fff;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar {
    width: 36px; height: 36px;
    border-radius: 999px;
    background: var(--chrome);
    color: var(--ink);
    border: 1px solid var(--primary-deep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .02em;
    flex-shrink: 0;
}
.avatar--sm { width: 28px; height: 28px; font-size: 11px; }
.avatar--lg { width: 56px; height: 56px; font-size: 18px; }
.avatar--soft { background: var(--chrome); color: var(--ink); }

/* ── Money and parts on a job ─────────────────────────────────────────

   Rows, not a table: each ask is a small story (who, how much, what for,
   what happened) and reads better as a paragraph with a pill than as five
   narrow columns. The decide buttons sit at the right of the row they
   belong to, so a finance person never has to match a button to a line. */

.money__group { padding: 10px 0 4px; border-top: 1px solid var(--line); }
.money__group:first-of-type { border-top: 0; padding-top: 0; }

.money__row {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
    padding: 8px 0;
}
.money__row + .money__row { border-top: 1px solid var(--line); }
.money__line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--ink); }
.money__decide { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.money__decide form { display: inline; }

.money__sheet {
    margin: 2px 0 10px; padding: 12px;
    background: var(--beige); border: 1px solid var(--line); border-radius: var(--r-md);
}
.money__sheet .field { margin-bottom: 8px; }

.goesto { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--body); margin: -6px 0 12px; }

/* The stage strip on an order: who held it, for how long. */
.stages { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 9px; font-size: 12px; }
.stage { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.stage__dot { width: 8px; height: 8px; border-radius: 999px; border: 1.5px solid var(--primary-deep); background: var(--surface); }
.stage.is-done { color: var(--body); }
.stage.is-done .stage__dot { background: var(--ok); border-color: var(--ok); }
.stage.is-now { color: var(--ink); font-weight: 500; }
.stage.is-now .stage__dot { border-color: var(--amber); background: var(--amber-soft); }
.stage__took { font-variant-numeric: tabular-nums; color: var(--muted); }
.stage__took::before { content: "·"; margin-right: 6px; }
.stage__age { margin-left: auto; color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }

/* Where finance writes the outcome: one box, two presses. */
.decide {
    margin: 4px 0 12px; padding: 12px;
    background: var(--beige); border: 1px solid var(--line); border-radius: var(--r-md);
}
.decide .field { margin-bottom: 8px; }
.decide .textarea { min-height: 58px; }

/* The finance and procurement screens share one row shape. */
.queue__row {
    display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: start;
    padding: 14px 0; border-top: 1px solid var(--line);
}
.queue__row:first-child { border-top: 0; }
.queue__amount { font-size: 20px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.queue__job { font-size: 13px; color: var(--muted); margin-top: 2px; }
.queue__job a { color: var(--ink); text-decoration: none; font-weight: 500; }
.queue__job a:hover { text-decoration: underline; }
.queue__decide { display: flex; flex-direction: column; gap: 6px; align-items: stretch; min-width: 150px; }
.queue__decide form { display: contents; }

@media (max-width: 640px) {
    .queue__row { grid-template-columns: 1fr; }
    .money__row { flex-direction: column; }
}
/* ── Naming somebody in a message ─────────────────────────────────────

   Sits under the message box, over whatever is beneath it. Kept to the two
   colours: the row you are on is the chrome tint, not a new accent. */

.mentions {
    position: absolute; left: 0; right: 0; top: 100%;
    z-index: 40; margin-top: 4px;
    max-height: 232px; overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: 0 10px 28px rgba(15, 37, 64, .16);
}

/* Floated on the body so no card can clip it; placed by script. */
.mentions--floating { position: fixed; right: auto; top: auto; margin: 0; z-index: 90; }

.mentions__row {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    width: 100%; text-align: left; cursor: pointer;
    padding: 9px 12px; border: 0; background: none; font: inherit;
    border-bottom: 1px solid var(--line);
}
.mentions__row:last-child { border-bottom: 0; }
.mentions__row:hover,
.mentions__row.is-on { background: var(--chrome); }

.mentions__name { font-size: 14px; color: var(--ink); }
.mentions__role { font-size: 11.5px; color: var(--muted); flex-shrink: 0; }

/* The names already written into a message, picked out of the sentence. */
.mention {
    color: var(--ink); font-weight: 500;
    background: var(--chrome); border-radius: 4px;
    padding: 0 3px;
}

/* ── The tour ─────────────────────────────────────────────────────────

   Shown once on a first visit, and again from the name menu. It spotlights
   the real controls, so what people learn is where things actually are.

   The dimming is one enormous shadow spreading out from the ring, which
   leaves a genuine hole over whatever sits underneath — no four-panel
   arithmetic to get wrong when the window is resized. */

.tour { position: fixed; inset: 0; z-index: 300; }

.tour__veil {
    position: absolute; inset: 0;
    background: rgba(15, 37, 64, .52);
    animation: tourIn .22s ease both;
}

.tour__ring {
    position: absolute; border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(15, 37, 64, .52);
    border: 2px solid var(--surface);
    transition: top .28s ease, left .28s ease, width .28s ease, height .28s ease;
    pointer-events: none;
}

.tour__card {
    position: absolute; width: min(360px, calc(100vw - 24px));
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 18px 18px 14px;
    box-shadow: 0 16px 44px rgba(15, 37, 64, .26);
    animation: tourIn .24s ease both;
}
.tour__card--middle { top: 50%; left: 50%; transform: translate(-50%, -50%); }

.tour__step  { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tour__title { font-size: 18px; font-weight: 500; color: var(--ink); margin: 6px 0 0; }
.tour__text  { font-size: 14px; color: var(--body); margin: 8px 0 0; line-height: 1.6; }

.tour__foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; margin-top: 17px;
}
.tour__dots    { display: flex; gap: 5px; }
.tour__dot     { width: 6px; height: 6px; border-radius: 999px; background: var(--primary-deep); }
.tour__dot.is-on { background: var(--ink); }
.tour__buttons { display: flex; align-items: center; gap: 6px; }

.tour__skip {
    background: none; border: 0; padding: 8px 6px;
    color: var(--muted); font: inherit; font-size: 13px;
    text-decoration: underline; cursor: pointer;
}
.tour__skip:hover { color: var(--ink); }

.tour__next {
    background: var(--surface); border: 1.5px solid var(--ink); color: var(--ink);
    border-radius: var(--r-sm); padding: 9px 18px;
    font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.tour__next:hover { background: var(--chrome); }

@keyframes tourIn { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .tour__veil, .tour__card { animation: none; }
    .tour__ring { transition: none; }
}

/* Nothing about a walkthrough belongs on paper. */
@media print { .tour { display: none !important; } }

/* ── Audit report: the appendix of every request ──────────────────── */

.audithist { margin: 14px 0 0; break-inside: avoid; }
.audithist__head { font-size: 14px; color: var(--ink); padding: 6px 0; border-bottom: 1px solid var(--line); }
.audithist__meta { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.audithist__body { color: var(--muted); }
.audittable--tight td { padding: 4px 8px; font-size: 12.5px; vertical-align: top; }
.audittable--tight td:first-child { color: var(--muted); width: 1%; }
.audittable--tight td:nth-child(2) { width: 1%; }

/* ── Choosing light or dark ───────────────────────────────────────────

   Two cards, each showing what it is offering rather than naming it: a frame
   and a page, in the actual colours, so the choice is made by looking. The
   swatches are painted in literal hex on purpose — a preview of the light
   theme has to stay light while you are sitting in the dark one. */

.themepick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.themecard {
    display: flex; align-items: center; gap: 12px;
    padding: 12px; cursor: pointer; text-align: left;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    font: inherit;
}
.themecard:hover { border-color: var(--primary-deep); }
.themecard.is-on { border-color: var(--ink); border-width: 1.5px; padding: 11.5px; }

.themecard__swatch {
    width: 46px; height: 36px; border-radius: 7px; flex-shrink: 0;
    display: flex; flex-direction: column; overflow: hidden;
    border: 1px solid rgba(15, 37, 64, .18);
}
.themecard__bar  { height: 11px; }
.themecard__page { flex: 1; }

.themecard__swatch--light            { border-color: #D6E4F7; }
.themecard__swatch--light .themecard__bar  { background: #EFF6FF; }
.themecard__swatch--light .themecard__page { background: #FFFFFF; }

.themecard__swatch--dark             { border-color: #223A57; }
.themecard__swatch--dark .themecard__bar   { background: #0E1C2E; }
.themecard__swatch--dark .themecard__page  { background: #13243A; }

.themecard__text { min-width: 0; }
.themecard__text strong { display: block; font-size: 14px; color: var(--ink); font-weight: 500; }
.themecard__text span   { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }

.themecard__on { margin-left: auto; color: var(--ink); flex-shrink: 0; }

@media (max-width: 560px) {
    .themepick { grid-template-columns: 1fr; }
}

/* ── Choosing a profile photo ───────────────────────────────────────── */

.photopick { display: inline-block; }
.photopick__well { position: relative; display: inline-block; cursor: pointer; }
.photopick__well .avatar { width: 72px; height: 72px; font-size: 23px; }
.photopick__well:hover .avatar { border-color: var(--ink); }

.photopick__badge {
    position: absolute; right: -2px; bottom: -2px;
    width: 24px; height: 24px; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--primary-deep);
    color: var(--ink);
    display: flex; align-items: center; justify-content: center;
}
.photopick.is-busy { opacity: .55; pointer-events: none; }

/* A real photo fills the circle instead of sitting inside it. Same box as
   the initials version, so nothing on the page shifts when one is added. */
.avatar--photo { object-fit: cover; background: var(--beige); font-size: 0; }

.whoami { text-align: right; line-height: 1.25; }
.whoami strong { display: block; font-size: 13px; color: var(--ink); font-weight: 500; }
.whoami span   { display: block; font-size: 11.5px; color: var(--muted); }

.page { padding: 20px 22px 48px; width: 100%; }

/* ═══ Components ══════════════════════════════════════════════════════ */

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 18px;
    /* The page is white now, so a hairline alone leaves everything flat.
       A shadow this faint is not decoration — it is what tells you where
       one thing ends and the next begins. */
    box-shadow: var(--shadow-sm);
}
.card--flush { padding: 0; overflow: hidden; }

.card__head {
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.card__head h2 { font-size: 14.5px; font-weight: 500; color: var(--ink); }
.card__head p  { font-size: 12px; color: var(--muted); margin-top: 2px; }
.card__body  { padding: 18px; }
.card__foot  { padding: 12px 18px; border-top: 1px solid var(--line); background: var(--beige); }

.section-title { margin-bottom: 14px; }
.section-title h2 { font-size: 15px; font-weight: 500; color: var(--ink); }
.section-title p  { font-size: 12.5px; color: var(--muted); margin-top: 3px; max-width: 620px; line-height: 1.55; }

.stack   { display: flex; flex-direction: column; gap: 16px; }
.stack-sm{ display: flex; flex-direction: column; gap: 9px; }
.row     { display: flex; align-items: center; gap: 10px; }
.row--between { justify-content: space-between; }
.row--wrap    { flex-wrap: wrap; }
.spacer  { flex: 1; }

.grid { display: grid; gap: 14px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid--auto  { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.grid--wide  { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--main  { grid-template-columns: minmax(0, 1.9fr) minmax(290px, 1fr); align-items: start; }
.grid--form  { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* ── Buttons ───────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--chrome);
    color: var(--ink);
    /* Two colours means a button cannot shout with a fill, so it is drawn
       instead: a full-strength ink edge and heavier type. Beside a quiet
       button — white, hairline, normal weight — the hierarchy is obvious
       without a third colour anywhere near it. */
    border: 1.5px solid var(--ink);
    border-radius: var(--r-md);
    padding: 10px 16px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: filter .12s ease, border-color .12s ease;
}
.btn:hover { filter: brightness(1.12); }
.btn:disabled { background: var(--beige); color: var(--muted); border-color: var(--line); cursor: not-allowed; filter: none; }

.btn--gold  { background: var(--chrome); border-color: var(--ink); color: var(--ink); font-weight: 600; }
.btn--quiet { background: var(--surface); color: var(--body); border-color: var(--line); }
.btn--quiet:hover { border-color: var(--primary-deep); color: var(--ink); background: var(--chrome); filter: none; }
.btn--danger{ background: var(--red-soft); color: var(--red); border-color: var(--red-line); }
.btn--ok    { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn--lg    { padding: 13px 20px; font-size: 15px; border-radius: 13px; }
.btn--sm    { padding: 7px 12px; font-size: 12.5px; border-radius: var(--r-sm); }
.btn--block { width: 100%; }
.btn--ghost { background: transparent; border-color: transparent; color: var(--ink); }

/* ── Pills & badges ────────────────────────────────────────────────── */

.pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11.5px;
    font-weight: 500;
    white-space: nowrap;
    background: var(--chrome);
    color: var(--muted);
}
.pill--red   { background: var(--red-soft);   color: var(--red); }
.pill--amber { background: var(--amber-soft); color: var(--amber); }
.pill--blue  { background: var(--blue-soft);  color: var(--blue); }
.pill--ok    { background: var(--ok-soft);    color: var(--ok); }
.pill--gold  { background: var(--gold-soft);  color: var(--gold); }
.pill--muted { background: var(--chrome);     color: var(--muted); }
.pill--brown { background: var(--chrome);     color: var(--ink); }

.tone-red   { color: var(--red); }
.tone-amber { color: var(--amber); }
.tone-blue  { color: var(--blue); }
.tone-ok    { color: var(--ok); }
.tone-muted { color: var(--muted); }
.tone-ink   { color: var(--ink); }

/* ── Stat tiles ────────────────────────────────────────────────────── */

.stat {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 16px 17px;
    display: block;
}
.stat__value {
    font-size: 29px;
    font-weight: 500;
    line-height: 1.05;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.stat__label { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.stat__note  { font-size: 11.5px; color: var(--muted); margin-top: 6px; line-height: 1.45; }

.tile {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 14px;
    cursor: pointer;
    text-align: left;
    display: block;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.tile:hover { border-color: var(--primary-deep); box-shadow: var(--shadow-md); }
.tile.is-active { background: var(--chrome); border-color: var(--primary-deep); }
.tile.is-active .tile__value { color: var(--ink); }
.tile.is-active .tile__label { color: var(--body); }

.tile__value {
    font-size: 26px;
    font-weight: 500;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}
.tile__label { font-size: 11.5px; margin-top: 5px; line-height: 1.3; color: var(--body); }
.tile__hint  { font-size: 10.5px; margin-top: 6px; line-height: 1.35; opacity: .8; }

/* ── Alert states ────────────────────────────────────────────────────────
   The whole tile carries the colour, not just the digit: six cards in a row
   are scanned as shapes, and a coloured number alone is easy to miss. Tinted
   means "deal with this"; white means there is nothing to deal with.        */

.tile--quiet { background: var(--surface); border-color: var(--line); }
.tile--quiet .tile__value { color: var(--muted); }
.tile--quiet .tile__label { color: var(--muted); }

.tile--red   { background: var(--red-soft);   border-color: var(--red-line); }
.tile--amber { background: var(--amber-soft); border-color: var(--amber-line); }
.tile--ok    { background: var(--ok-soft);    border-color: var(--ok-line); }

.tile--red   .tile__value, .tile--red   .tile__hint { color: var(--red); }
.tile--amber .tile__value, .tile--amber .tile__hint { color: var(--amber); }
.tile--ok    .tile__value, .tile--ok    .tile__hint { color: var(--ok); }

.tile--red .tile__label,
.tile--amber .tile__label,
.tile--ok .tile__label { color: var(--ink); font-weight: 500; }

/* Hover keeps the tile in its own colour rather than turning everything gold. */
.tile--red:hover   { border-color: var(--red); }
.tile--amber:hover { border-color: var(--amber); }
.tile--ok:hover    { border-color: var(--ok); }

/* ── Tables ────────────────────────────────────────────────────────── */

.table-wrap { overflow-x: auto; }
.table { min-width: 720px; font-size: 13.5px; }
.table thead th {
    text-align: left;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--muted);
    background: var(--beige);
    padding: 10px 14px;
    white-space: nowrap;
}
.table tbody td { padding: 12px 14px; border-top: 1px solid var(--line); vertical-align: middle; }
.table tbody tr:hover { background: var(--chrome); }
.table__ref { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.table__title { color: var(--ink); font-weight: 500; }
.table__sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.table--tight { min-width: 0; }

/* ── Ticket list (mobile / card view) ──────────────────────────────── */

.tickets { display: flex; flex-direction: column; gap: 9px; }

/* An even border on all four sides. Urgency is carried by the priority pill
   and the deadline text, which say what the colour strip only hinted at. */
.ticket {
    display: block;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 14px;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.ticket:hover { border-color: var(--gold); box-shadow: var(--shadow-sm); }

.ticket__title { font-size: 15px; font-weight: 500; color: var(--ink); }
.ticket__meta  { font-size: 12.5px; color: var(--muted); margin-top: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ticket__desc  { font-size: 13px; color: var(--body); margin-top: 7px; line-height: 1.5; }

/* ── Status rail ───────────────────────────────────────────────────── */

.rail { display: flex; align-items: flex-start; }
.rail__step { display: flex; flex-direction: column; align-items: center; width: 76px; }
.rail__dot {
    width: 11px; height: 11px;
    border-radius: 50%;
    background: var(--line);
    margin-top: 3px;
}
.rail__step.is-done .rail__dot { background: var(--gold); }
.rail__step.is-now  .rail__dot { background: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); }
.rail__label { font-size: 10.5px; margin-top: 8px; text-align: center; line-height: 1.25; color: var(--muted); }
.rail__step.is-done .rail__label,
.rail__step.is-now  .rail__label { color: var(--brown); }
.rail__bar { flex: 1; height: 2px; background: var(--line); margin-top: 7px; }
.rail__bar.is-done { background: var(--gold); }

/* ── SLA meter ─────────────────────────────────────────────────────── */

.meter { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.meter__fill { display: block; height: 100%; border-radius: 999px; background: var(--gold); }
.meter__fill--red   { background: var(--red); }
.meter__fill--amber { background: var(--amber); }
.meter__fill--ok    { background: var(--ok); }

/* ── Timeline ──────────────────────────────────────────────────────── */

.timeline { position: relative; padding-left: 22px; }
.timeline::before {
    content: "";
    position: absolute;
    left: 5px; top: 6px; bottom: 6px;
    width: 1px;
    background: var(--line);
}
.timeline__item { position: relative; padding-bottom: 16px; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__dot {
    position: absolute;
    left: -22px; top: 5px;
    width: 11px; height: 11px;
    border-radius: 999px;
    background: var(--muted);
    border: 2px solid var(--surface);
    box-shadow: 0 0 0 1px var(--line);
}
.timeline__dot--blue  { background: var(--blue); }
.timeline__dot--amber { background: var(--amber); }
.timeline__dot--ok    { background: var(--ok); }
.timeline__dot--red   { background: var(--red); }
.timeline__text { font-size: 13.5px; color: var(--ink); line-height: 1.5; }
.timeline__text strong { font-weight: 600; }
.timeline__time { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.timeline__body {
    margin-top: 7px;
    background: var(--beige);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 10px 12px;
    font-size: 13px;
    color: var(--body);
    line-height: 1.55;
    white-space: pre-wrap;
}

/* ── Forms ─────────────────────────────────────────────────────────── */

.field { display: block; margin-bottom: 15px; }
.field__label {
    display: block;
    font-size: 11.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 7px;
}
.field__hint { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.45; }
.field__error { font-size: 12.5px; color: var(--red); margin-top: 6px; }

.input, .select, .textarea {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 11px 13px;
    font-size: 14px;
    color: var(--ink);
    outline: none;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.input:focus, .select:focus, .textarea:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-soft);
}
.input.is-error, .select.is-error, .textarea.is-error { border-color: var(--red); }
.textarea { resize: vertical; min-height: 84px; line-height: 1.55; }
.select { cursor: pointer; appearance: none; background-image: none; padding-right: 34px; }

.select-wrap { position: relative; }
.select-wrap .icn { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }

.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; padding: 10px 0; }
.check input { margin-top: 3px; accent-color: var(--gold); width: 16px; height: 16px; }
.check__text { font-size: 13.5px; color: var(--ink); }
.check__note { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* Choice tiles — the picture-first report flow */
.choices { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }

.choice {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px 12px;
    min-height: 112px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    transition: border-color .12s ease, background .12s ease;
}
.choice:hover { border-color: var(--gold); }
.choice .icn { color: var(--gold); }
.choice__text { font-size: 13px; color: var(--ink); line-height: 1.3; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice.is-on { background: var(--gold-soft); border-color: var(--gold); }

.option {
    display: block;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 13px 15px;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}
.option:hover { border-color: var(--gold); }
.option.is-on { background: var(--gold-soft); border-color: var(--gold); }
.option__title { font-size: 14.5px; color: var(--ink); }
.option__note  { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.option input { position: absolute; opacity: 0; pointer-events: none; }

.dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px;
    border: 1px dashed var(--line);
    border-radius: 14px;
    background: var(--surface);
    cursor: pointer;
    color: var(--muted);
    font-size: 13.5px;
    text-align: center;
}
.dropzone:hover { border-color: var(--gold); }
.dropzone.is-filled { background: var(--gold-soft); border-color: var(--gold); border-style: solid; color: var(--brown); }
.dropzone input { display: none; }

.chipset { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 13px;
    font-size: 12.5px;
    color: var(--body);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .12s ease, background .12s ease;
}
.chip:hover { border-color: var(--gold); }
.chip.is-on { background: var(--chrome); border-color: var(--primary-deep); color: var(--ink); font-weight: 500; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }

/* ── Alerts ────────────────────────────────────────────────────────── */

.alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-radius: var(--r-md);
    padding: 12px 14px;
    font-size: 13.5px;
    line-height: 1.5;
    border: 1px solid;
}
.alert--success { background: var(--ok-soft);    color: var(--ok);    border-color: var(--ok-line); }
.alert--error   { background: var(--red-soft);   color: var(--red);   border-color: var(--red-line); }
.alert--info    { background: var(--blue-soft);  color: var(--blue);  border-color: var(--blue-line); }
.alert--warn    { background: var(--amber-soft); color: var(--amber); border-color: var(--amber-line); }

.flashes { display: flex; flex-direction: column; gap: 9px; margin-bottom: 18px; }

.empty {
    padding: 34px 20px;
    text-align: center;
    color: var(--muted);
    font-size: 13.5px;
}
.empty .icn { margin: 0 auto 10px; color: var(--line); }

/* ── Charts (server-rendered SVG) ──────────────────────────────────── */

.bars { display: flex; flex-direction: column; gap: 11px; }
.bar__row { display: grid; grid-template-columns: minmax(96px, 150px) 1fr 42px; align-items: center; gap: 10px; }
.bar__label { font-size: 12.5px; color: var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar__track { display: block; height: 18px; background: var(--beige); border-radius: 5px; overflow: hidden; }
.bar__fill  { display: block; height: 100%; background: var(--gold); border-radius: 5px; min-width: 2px; }
/* Eight hues that can sit next to each other: a chart with one colour per
   bar is a list with decoration; one where the colours differ is a chart. */
.bar__fill--c1 { background: #2A5C8A; }  .bar__fill--c2 { background: #2C7A52; }
.bar__fill--c3 { background: #C27C1A; }  .bar__fill--c4 { background: #B3261E; }
.bar__fill--c5 { background: #6B4FA3; }  .bar__fill--c6 { background: #1F8A8A; }
.bar__fill--c7 { background: #A63D7A; }  .bar__fill--c8 { background: #5B6B7C; }
/* And the ones that mean something. */
.bar__fill--red   { background: var(--red); }   .bar__fill--amber { background: var(--amber); }
.bar__fill--blue  { background: var(--blue); }  .bar__fill--ok    { background: var(--ok); }
.bar__fill--muted { background: var(--muted); }
:root[data-theme="dark"] .bar__fill--c1 { background: #7FB4E8; } :root[data-theme="dark"] .bar__fill--c2 { background: #6FD4A0; }
:root[data-theme="dark"] .bar__fill--c3 { background: #E8B45C; } :root[data-theme="dark"] .bar__fill--c4 { background: #FF8D82; }
:root[data-theme="dark"] .bar__fill--c5 { background: #B9A3F0; } :root[data-theme="dark"] .bar__fill--c6 { background: #6FD1D1; }
:root[data-theme="dark"] .bar__fill--c7 { background: #EE8FC4; } :root[data-theme="dark"] .bar__fill--c8 { background: #A9BFD8; }
.bar__value { font-size: 12.5px; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }

.spark { width: 100%; height: 170px; }
.spark__grid { stroke: var(--line); stroke-width: 1; }
.spark__line { fill: none; stroke: var(--blue); stroke-width: 2; }
.spark__area { fill: var(--blue-soft); opacity: .8; }
.spark__dot  { fill: var(--blue); }
.spark__text { font-size: 10px; fill: var(--muted); }

.donut__track { stroke: var(--line); }

/* ── Notifications ─────────────────────────────────────────────────── */

.notes { display: flex; flex-direction: column; }
.note {
    display: flex;
    gap: 11px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--line);
}
.note:last-child { border-bottom: 0; }
.note.is-unread { background: var(--gold-soft); }
.note__dot { width: 7px; height: 7px; border-radius: 999px; margin-top: 7px; background: var(--muted); flex-shrink: 0; }
.note__text { font-size: 13.5px; color: var(--ink); line-height: 1.45; }
.note__meta { font-size: 11.5px; color: var(--muted); margin-top: 3px; }

/* ── Filter bar ────────────────────────────────────────────────────── */

.filters {
    display: grid;
    gap: 9px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    align-items: end;
}
.filters .field { margin-bottom: 0; }

.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; }
.pager__links { display: flex; gap: 6px; }
.pager__link {
    min-width: 34px;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    font-size: 12.5px;
    text-align: center;
    color: var(--body);
}
.pager__link.is-active { background: var(--chrome); border-color: var(--primary-deep); color: var(--ink); font-weight: 500; }

/* ── Auth screens ──────────────────────────────────────────────────── */

.auth {
    min-height: 100vh;
    background: var(--beige);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px;
}
.auth__panel {
    width: 100%;
    max-width: 1000px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    background: var(--surface);
}

.brandpanel {
    position: relative;
    background: var(--chrome);
    color: var(--body);
    border-right: 1px solid var(--chrome-line);
    overflow: hidden;
    padding: 46px 42px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 620px;
}
.brandpanel__art { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .16; }
.brandpanel__body { position: relative; margin-top: 40px; }
.brandpanel h2 {
    font-family: var(--serif);
    font-size: 38px;
    line-height: 1.14;
    font-weight: 500;
    max-width: 420px;
}
.brandpanel ul { margin-top: 26px; display: flex; flex-direction: column; gap: 13px; }
.brandpanel li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; color: var(--body); line-height: 1.5; }
.brandpanel li::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 999px;
    background: var(--ink);
    margin-top: 8px;
    flex-shrink: 0;
}
.brandpanel__foot {
    position: relative;
    margin-top: 38px;
    font-size: 11.5px;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .55);
}

.authform { padding: 46px 42px; display: flex; align-items: center; }
.authform__inner { width: 100%; max-width: 372px; margin: 0 auto; }
.authform h1 { font-family: var(--serif); font-size: 28px; color: var(--ink); font-weight: 500; }
.authform > .authform__inner > p { font-size: 13.5px; color: var(--muted); margin-top: 5px; line-height: 1.5; }

.tabs { display: flex; gap: 5px; background: var(--beige); border-radius: var(--r-md); padding: 4px; margin: 22px 0 18px; }
.tabs a {
    flex: 1;
    text-align: center;
    border-radius: var(--r-sm);
    padding: 9px 8px;
    font-size: 13px;
    color: var(--muted);
    border: 1px solid transparent;
}
.tabs a.is-active { background: var(--surface); border-color: var(--line); color: var(--ink); font-weight: 500; }

.pinpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.pinpad button {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 13px;
    padding: 15px 0;
    font-size: 19px;
    color: var(--ink);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}
.pinpad button:hover { border-color: var(--gold); }
.pindots { display: flex; justify-content: center; gap: 12px; margin: 20px 0 16px; }
.pindot { width: 13px; height: 13px; border-radius: 999px; border: 1.5px solid var(--line); }
.pindot.is-on { background: var(--gold); border-color: var(--gold); }



.divider { display: flex; align-items: center; gap: 10px; margin: 20px 0 14px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.divider span { font-size: 11px; letter-spacing: .05em; color: var(--muted); text-transform: uppercase; }

/* ── Misc utility ──────────────────────────────────────────────────── */

.muted   { color: var(--muted); }
.small   { font-size: 12.5px; }
.tiny    { font-size: 11.5px; }
.serif   { font-family: var(--serif); font-weight: 500; }
.nowrap  { white-space: nowrap; }
.tnum    { font-variant-numeric: tabular-nums; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 14px; } .mt-3 { margin-top: 22px; }
.mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 14px; } .mb-3 { margin-bottom: 22px; }
.hide { display: none !important; }

.bigaction {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    background: var(--chrome);
    color: var(--ink);
    border: 1px solid var(--primary-deep);
    border-radius: 18px;
    padding: 22px 20px;
    cursor: pointer;
    text-align: left;
}
.bigaction:hover { filter: brightness(1.1); }
.bigaction__icon { background: rgba(255, 255, 255, .14); border-radius: 999px; padding: 11px; display: flex; }
.bigaction__title { font-size: 17px; font-weight: 500; }
.bigaction__note  { font-size: 13px; color: rgba(255, 255, 255, .76); margin-top: 2px; }

.callout {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: var(--r-lg);
    padding: 15px 16px;
    border: 1px solid;
}
.callout--ok   { background: var(--ok-soft);    border-color: var(--ok-line); }
.callout--warn { background: var(--amber-soft); border-color: var(--amber-line); }
.callout--red  { background: var(--red-soft);   border-color: var(--red-line); }
.callout__icon { background: var(--surface); border-radius: 999px; padding: 9px; display: flex; flex-shrink: 0; }
.callout__title { font-size: 14.5px; color: var(--ink); font-weight: 500; }
.callout__note  { font-size: 12.5px; color: var(--body); margin-top: 2px; }

.kv { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.kv:last-child { border-bottom: 0; }
.kv__k { color: var(--muted); }
.kv__v { color: var(--ink); text-align: right; }

.thumbs { display: grid; gap: 9px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.thumb {
    display: block;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--beige);
    aspect-ratio: 4 / 3;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb__tag { font-size: 11px; color: var(--muted); padding: 5px 8px; }

.steps { display: flex; gap: 6px; margin-bottom: 18px; }
.step {
    flex: 1;
    border-top: 3px solid var(--line);
    padding-top: 9px;
    font-size: 11.5px;
    color: var(--muted);
    letter-spacing: .03em;
}
.step.is-on { border-top-color: var(--gold); color: var(--brown); font-weight: 500; }

.matrix { min-width: 780px; font-size: 12.5px; }
.matrix th, .matrix td { padding: 9px 12px; border-top: 1px solid var(--line); }
.matrix thead th { background: var(--beige); border-top: 0; }
.matrix tbody th { text-align: left; font-weight: 400; color: var(--body); }
.matrix .yes { color: var(--ok); }
.matrix .no  { color: var(--line); }
.matrix__group td {
    background: var(--beige);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

/* ── Responsive ────────────────────────────────────────────────────── */

@media (max-width: 1180px) {
    .grid--main { grid-template-columns: minmax(0, 1fr); }
    .grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 60;
        transform: translateX(-100%);
        transition: transform .18s ease;
        box-shadow: var(--shadow-lg);
    }
    body.nav-open .sidebar { transform: none; }
    body.nav-open::after {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(46, 33, 26, .45);
        z-index: 50;
    }
    .burger { display: inline-flex; }
    .page { padding: 18px 16px 48px; }
    .topbar__inner { padding: 11px 16px; }
    .whoami { display: none; }
    .grid--4, .grid--5, .grid--6, .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .auth__panel { grid-template-columns: 1fr; max-width: 460px; }
    .brandpanel { min-height: auto; padding: 26px 22px; }
    .brandpanel__body { display: none; }
    .brandpanel__foot { margin-top: 16px; }
    .authform { padding: 26px 22px 34px; }
}

@media (max-width: 560px) {
    .grid--2, .grid--3, .grid--4, .grid--5, .grid--6, .grid--form { grid-template-columns: minmax(0, 1fr); }
    .bar__row { grid-template-columns: 96px 1fr 38px; }
}

@media print {
    .sidebar, .topbar__actions, .burger, .btn, .filters { display: none !important; }
    body { background: #fff; }
    .card { break-inside: avoid; }
}

/* ── Two-line labels ────────────────────────────────────────────────────
   Several of these titles/notes are <span> pairs inside a <label> or <a>
   (so the whole block stays clickable). Spans are inline by default, which
   would run the two lines together — this makes them stack.               */

.bigaction__title,
.bigaction__note,
.callout__title,
.callout__note,
.option__title,
.option__note,
.check__text,
.check__note,
.choice__text { display: block; }

/* ── Live tracking rail ──────────────────────────────────────────────────
   The four words the reporter sees, with the timestamp each stage actually
   happened and a moving indicator on the leg still in progress.           */

.track__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.track__live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 500;
}
.track__live.is-off { color: var(--muted); }

.track__pulse {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--gold);
    position: relative;
    flex-shrink: 0;
}
.track__pulse::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--gold);
    animation: track-ping 1.9s cubic-bezier(0, 0, .2, 1) infinite;
}
.track__live.is-off .track__pulse { background: var(--muted); }
.track__live.is-off .track__pulse::after { display: none; }

.track__updated { font-size: 11.5px; color: var(--muted); }

.track__rail { display: flex; align-items: flex-start; }
.track__rail.is-cancelled { opacity: .5; }

.track__step {
    width: 86px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.track__marker { position: relative; height: 20px; display: flex; align-items: center; }

.track__dot {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--surface);
    border: 2px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    position: relative;
    z-index: 1;
}

.track__step.is-done .track__dot {
    background: var(--gold);
    border-color: var(--gold);
    color: #fff;
}

.track__step.is-now .track__dot {
    background: var(--surface);
    border-color: var(--gold);
    border-width: 5px;
}
.track__step.is-now .track__dot::before {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 999px;
    border: 2px solid var(--gold);
    animation: track-pulse 1.9s ease-out infinite;
}

.track__step.is-paused .track__dot {
    background: var(--amber);
    border-color: var(--amber);
    border-width: 2px;
    color: #fff;
}
.track__step.is-paused .track__dot::before { animation: none; opacity: 0; }

.track__label {
    font-size: 12px;
    margin-top: 9px;
    line-height: 1.3;
    color: var(--muted);
}
.track__step.is-done .track__label,
.track__step.is-now .track__label { color: var(--brown); font-weight: 500; }

.track__time {
    font-size: 10.5px;
    color: var(--muted);
    margin-top: 3px;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}
.track__step.is-now .track__time { color: var(--gold); }

.track__seg {
    flex: 1;
    height: 3px;
    min-width: 18px;
    margin-top: 8px;
    border-radius: 999px;
    background: var(--line);
    position: relative;
    overflow: hidden;
}
.track__seg.is-done { background: var(--gold); }

/* The leg still being travelled: a highlight that keeps moving along it. */
.track__seg.is-active::after {
    content: "";
    position: absolute;
    top: 0;
    left: -45%;
    width: 45%;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    animation: track-flow 1.8s linear infinite;
}

.track__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.track__waiting { font-size: 13px; color: var(--body); }
.track__eta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 500;
}
.track__promise { font-size: 11.5px; color: var(--muted); margin-top: 7px; }

.bigaction--static { cursor: default; }
.bigaction--static:hover { filter: none; }

@keyframes track-ping {
    0%   { transform: scale(1);   opacity: .8; }
    75%  { transform: scale(2.6); opacity: 0; }
    100% { opacity: 0; }
}
@keyframes track-pulse {
    0%   { transform: scale(.85); opacity: .7; }
    70%  { transform: scale(1.8); opacity: 0; }
    100% { opacity: 0; }
}
@keyframes track-flow {
    0%   { left: -45%; }
    100% { left: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .track__pulse::after,
    .track__step.is-now .track__dot::before,
    .track__seg.is-active::after { animation: none; }
    .track__seg.is-active::after { left: 0; width: 100%; background: var(--gold-line); }
}

@media (max-width: 560px) {
    .track__rail { flex-direction: column; align-items: stretch; }
    .track__step { width: auto; flex-direction: row; align-items: center; gap: 12px; text-align: left; }
    .track__label { margin-top: 0; flex: 1; font-size: 13px; }
    .track__time { margin-top: 0; }
    .track__seg { flex: none; width: 3px; height: 22px; min-width: 0; margin: 2px 0 2px 8px; }
    .track__seg.is-active::after {
        left: 0; top: -45%; width: 100%; height: 45%;
        background: linear-gradient(180deg, transparent, var(--gold), transparent);
        animation: track-flow-v 1.8s linear infinite;
    }
    @keyframes track-flow-v { 0% { top: -45%; } 100% { top: 100%; } }
}

/* ── Collapsible sidebar ─────────────────────────────────────────────────
   Collapsed, the rail keeps only the icons. Every link carries its label in
   a title attribute, so nothing becomes unidentifiable.                    */

.sidebar__brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar__mark {
    display: none;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--primary-soft);
    border: 1px solid var(--primary-deep);
    color: var(--primary-deep);
    font-family: var(--serif);
    font-size: 18px;
    letter-spacing: .04em;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* The collapse control sits in the top bar, beside the page title, so it
   never competes with the wordmark for space in the rail itself. */
.railtoggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: var(--r-sm);
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--body);
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color .12s ease, color .12s ease;
}
.railtoggle:hover { border-color: var(--primary-deep); color: var(--ink); }
.railtoggle__in  { display: flex; }
.railtoggle__out { display: none; }

.sidebar { transition: width .16s ease; }

/* ── Collapsed state ─────────────────────────────────────────────────── */

body.nav-collapsed .sidebar { width: var(--sidebar-collapsed); }

body.nav-collapsed .sidebar__brand {
    justify-content: center;
    padding: 0;
}
body.nav-collapsed .wordmark      { display: none; }
body.nav-collapsed .sidebar__mark { display: flex; }
body.nav-collapsed .railtoggle__in  { display: none; }
body.nav-collapsed .railtoggle__out { display: flex; }

body.nav-collapsed .sidebar__scroll { padding: 10px 8px 18px; overflow: visible; }

/* Group headings become a hairline — the grouping stays legible without text. */
body.nav-collapsed .nav__label {
    height: 1px;
    padding: 0;
    margin: 12px 10px;
    overflow: hidden;
    background: var(--primary-soft);
    color: transparent;
}

body.nav-collapsed .nav__link {
    display: flex;
    justify-content: center;
    padding: 11px 0;
    border-radius: 10px;
    position: relative;
}
body.nav-collapsed .nav__link.is-active {
    background: var(--surface);
    box-shadow: 0 1px 3px rgba(15, 37, 64, .10);
}
body.nav-collapsed .nav__text { display: none; }

/* The count becomes a dot on the icon; the exact number is not worth 40px. */
body.nav-collapsed .nav__count {
    position: absolute;
    top: 6px;
    right: 10px;
    margin: 0;
    min-width: 0;
    width: 8px;
    height: 8px;
    padding: 0;
    font-size: 0;
    line-height: 0;
    border: 1.5px solid var(--ink);
}


/* Below the breakpoint the rail is an off-canvas drawer, where collapsing
   makes no sense — it is either open at full width or not shown at all. */
@media (max-width: 900px) {
    body.nav-collapsed .sidebar        { width: var(--sidebar); }
    body.nav-collapsed .wordmark       { display: inline-flex; }
    body.nav-collapsed .sidebar__mark  { display: none; }
    body.nav-collapsed .nav__text      { display: inline; }
    body.nav-collapsed .nav__link      { display: inline-flex; justify-content: flex-start; padding: 9px 13px; }
    body.nav-collapsed .nav__count     { position: static; width: auto; height: 19px; min-width: 20px; padding: 0 6px; font-size: 11px; line-height: normal; border: 0; margin-left: 2px; }
    body.nav-collapsed .nav__label     { height: auto; padding: 14px 10px 7px; margin: 0; background: none; color: var(--muted); }
    body.nav-collapsed .sidebar__brand { justify-content: flex-start; padding: 0 18px; }
    .railtoggle { display: none; }
}

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

/* The report button carries a question, which is longer than a label. On a
   narrow bar it falls back to the plus icon alone rather than crowding out
   the page title. */
@media (max-width: 720px) {
    .btn__label { display: none; }
}

/* ── Editable permission matrix ──────────────────────────────────────── */

.perm__name { display: block; color: var(--ink); }
.perm__key  { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }

.permcell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s ease;
}
.permcell:hover { background: var(--gold-soft); }
.permcell input { width: 17px; height: 17px; accent-color: var(--gold); cursor: pointer; margin: 0; }

.permcell--locked {
    cursor: default;
    color: var(--gold);
    background: var(--gold-soft);
}
.permcell--locked:hover { background: var(--gold-soft); }


/* ── The report call-to-action ───────────────────────────────────────────
   A helper character pointing at the one button on the bar that starts
   something. The button carries no fill of its own — the colour is a ring
   turning around its edge, so the label sits on the bar's own white and
   keeps full contrast.                                                     */

.nudge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.nudge__avatar {
    display: flex;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    box-shadow: 0 0 0 1px var(--gold-line);
    animation: nudge-bob 2.6s ease-in-out infinite;
}

/* The hand pokes toward the button, and small tap marks flash at the end of
   each poke — the two halves of "click this". */
.nudge__hand {
    display: flex;
    color: var(--gold);
    animation: nudge-poke 1.5s ease-in-out infinite;
}
/* transform-box keeps the scale centred on the marks themselves rather than
   on the SVG's own origin, which would fling them off the icon. */
.nudge__tap {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: nudge-tap 1.5s ease-in-out infinite;
}

/* The button and its ring share one stacking context. */
.cta {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

/* A 3px band with the middle punched out, so the colour reads as a ring
   around an empty button rather than a coloured pill behind it. */
.cta__ring {
    position: absolute;
    inset: -3px;
    border-radius: 999px;
    overflow: hidden;
    padding: 3px;
    z-index: 0;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
}

/* A square of colour, larger than the button in every direction, spinning
   inside that band. Rotating the pill itself would sweep it around like a
   propeller; rotating a clipped square reads as colour running round the edge. */
.cta__ring::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 340px;
    height: 340px;
    margin: -170px 0 0 -170px;
    background: conic-gradient(
        from 0deg,
        var(--ink), #7A93B4, var(--chrome-line), #FFFFFF,
        var(--chrome), #7A93B4, var(--ink)
    );
    animation: cta-spin 3.4s linear infinite;
}

.btn--cta {
    position: relative;
    z-index: 1;
    background: transparent;
    border-color: transparent;
    color: var(--ink);
    border-radius: 999px;
    padding: 9px 18px;
    font-weight: 500;
    transition: transform .14s ease, background .14s ease, filter .14s ease;
}
.btn--cta .icn { color: var(--gold); }

/* Hovering fills it just enough to read as pressable, and the ring quickens. */
.cta:hover .cta__ring::before { animation-duration: 1.1s; }
.btn--cta:hover {
    background: var(--gold-soft);
    transform: translateY(-1px);
    filter: none;
}
.btn--cta:active { transform: translateY(0); }

.btn--cta:focus-visible {
    outline: none;
    background: var(--gold-soft);
    box-shadow: 0 0 0 2px var(--gold);
}

@keyframes cta-spin { to { transform: rotate(1turn); } }

@keyframes nudge-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}
@keyframes nudge-poke {
    0%, 100% { transform: translateX(0);   opacity: .6; }
    45%, 60% { transform: translateX(5px); opacity: 1; }
}
@keyframes nudge-tap {
    0%, 35%   { opacity: 0; transform: scale(.7); }
    50%       { opacity: 1; transform: scale(1); }
    70%, 100% { opacity: 0; transform: scale(1.15); }
}

/* The helper is an attention device, not information — the first thing to go
   when the bar runs out of room, well before the page title starts wrapping. */
@media (max-width: 1400px) {
    .nudge { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .nudge__avatar, .nudge__hand, .nudge__tap { animation: none; }
    .nudge__hand { opacity: 1; }
    .nudge__tap { opacity: 1; }
    .cta__ring::before { animation: none; }
}

/* ── Logo upload ─────────────────────────────────────────────────────────
   The preview sits on the same dark brown the logo will actually appear on,
   so what you see here is what the sidebar will show.                      */

.logobox {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.logobox__preview {
    flex-shrink: 0;
    width: 232px;
    min-height: 92px;
    padding: 18px 20px;
    border-radius: var(--r-lg);
    background: var(--chrome);
    border: 1px solid var(--chrome-line);
    display: flex;
    align-items: center;
}
.logobox__preview img {
    max-width: 100%;
    height: 40px;
    width: auto;
    object-fit: contain;
}
.logobox__preview.is-empty { opacity: .95; }

@media (max-width: 560px) {
    .logobox__preview { width: 100%; }
}

/* ── Header search ───────────────────────────────────────────────────────
   Sits dead centre because the page title and the actions either side both
   take an equal share of the bar. Submits straight to the requests list,
   which already knows how to filter on the same term.                      */

.topsearch {
    position: relative;
    flex: 1 1 260px;
    max-width: 430px;
    min-width: 0;
    display: flex;
    align-items: center;
}

.topsearch input {
    width: 100%;
    background: var(--beige);
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 9px 40px 9px 38px;
    font-size: 13.5px;
    color: var(--ink);
    outline: none;
    transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.topsearch input::placeholder { color: var(--muted); }
.topsearch input:hover { border-color: var(--line); }
.topsearch input:focus {
    background: var(--surface);
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-soft);
}
/* Chrome draws its own clear button on type=search; the round field has no
   room for it next to the shortcut hint. */
.topsearch input::-webkit-search-decoration,
.topsearch input::-webkit-search-cancel-button { -webkit-appearance: none; }

.topsearch > .icn {
    position: absolute;
    left: 13px;
    color: var(--muted);
    pointer-events: none;
}

.topsearch__key {
    position: absolute;
    right: 12px;
    font-family: var(--font);
    font-size: 11px;
    line-height: 1;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 3px 6px;
    pointer-events: none;
}
.topsearch input:focus ~ .topsearch__key { opacity: 0; }

/* Below this the bar is too tight for a field; the requests list has its own
   search, which is one tap away. */
@media (max-width: 1024px) {
    .topsearch { display: none; }
}

/* A bar carrying a title, a search field and six controls runs out of room
   before the viewport does; the name is the first thing it can spare. */
@media (max-width: 1180px) {
    .whoami { display: none; }
}

/* The page's own lead line — the sentence that used to sit under the title in
   the bar, now with room to be read. */
.page__lead {
    font-size: 13.5px;
    color: var(--muted);
    line-height: 1.55;
    max-width: 760px;
    margin-bottom: 18px;
}

/* ── Collapsed-rail label ────────────────────────────────────────────────
   A rail reduced to icons hides the words, so pointing at an icon floats its
   own name out beside it — that one icon's name, never the whole group's.  */

.navitem { position: relative; }

.navtip {
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    z-index: 70;
    transform: translate(-6px, -50%);
    padding: 8px 13px;
    border-radius: 11px;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--chrome-line);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
            backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid var(--chrome-line);
    box-shadow: 0 12px 30px rgba(46, 33, 26, .32);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* No transition on the way out: a fading label can still be on screen when
       the pointer has already reached the next icon, which reads as two names
       showing at once. Appearing animates; disappearing is instant. */
    transition: none;
}

/* Only when the rail is collapsed, and only for the icon being pointed at. */
body.nav-collapsed .navitem:hover .navtip,
body.nav-collapsed .navitem:focus-within .navtip {
    opacity: 1;
    visibility: visible;
    transform: translate(0, -50%);
    transition: opacity .14s ease, transform .14s cubic-bezier(.4, 0, .2, 1);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .topbar__inner { padding: 0 16px; }
    .page { padding: 16px 14px 44px; }
    /* The drawer is full width here, so a label beside it would only be in the way. */
    .navtip { display: none; }
}

/* The hover label is the only frosted surface left; give it a solid base where
   the browser cannot blur at all. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .navtip { background: var(--surface); border: 1px solid var(--chrome-line); }
}

/* Both panels create their own stacking context (backdrop-filter does that),
   and the main card comes later in the DOM — so without this the collapsed
   rail's popover renders correctly but paints underneath the page. */
/* The hover label leaves the rail, so the rail paints above the page. */
.sidebar { z-index: 50; }
.main    { position: relative; z-index: 1; }

/* ── Roles: one role at a time ─────────────────────────────────────────── */

.rolecard { display: block; text-decoration: none; color: inherit; position: relative; }
a.rolecard:hover { border-color: var(--gold); }
a.rolecard:hover .rolecard__go { color: var(--gold); }
.rolecard__go {
    margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line);
    display: flex; align-items: center; gap: 6px; color: var(--muted);
}

.permset { border-top: 1px solid var(--line); }
.permset:first-of-type { border-top: 0; }
.permset__head {
    padding: 12px 20px 8px; font-size: 11.5px; letter-spacing: .07em;
    text-transform: uppercase; color: var(--muted); background: var(--beige);
}
.permset__body {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 2px; padding: 10px 14px 14px;
}

.permopt {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 9px 10px; border-radius: 9px; cursor: pointer;
}
.permopt:hover { background: var(--beige); }
.permopt input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; accent-color: var(--gold); }
.permopt--locked { cursor: default; opacity: .72; }
.permopt--locked:hover { background: transparent; }
.permopt__text { min-width: 0; }
.permopt__name { display: block; font-size: 14px; color: var(--ink); }
.permopt__key {
    display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── Handover: who has this request right now ──────────────────────────── */

.handover__now {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line);
    background: var(--beige); margin-bottom: 16px;
}
.handover__now--red   { background: var(--red-soft);   border-color: var(--red-line); }
.handover__now--amber { background: var(--amber-soft); border-color: var(--amber-line); }
.handover__now--ok    { background: var(--ok-soft);    border-color: var(--ok-line); }
.handover__now--blue  { background: var(--blue-soft);  border-color: var(--line); }

.handover__icon { display: flex; flex-shrink: 0; color: var(--brown); }
.handover__now--red   .handover__icon { color: var(--red); }
.handover__now--amber .handover__icon { color: var(--amber); }
.handover__now--ok    .handover__icon { color: var(--ok); }

.handover__text { flex: 1; min-width: 0; }
.handover__who  { display: block; font-size: 15px; color: var(--ink); }
.handover__role { color: var(--muted); font-weight: 400; }
.handover__what { display: block; font-size: 13px; color: var(--body); margin-top: 2px; }
.handover__since {
    display: flex; align-items: center; gap: 5px; flex-shrink: 0;
    font-size: 12.5px; color: var(--muted); white-space: nowrap;
}

/* The five steps of the chain, with the name against each. */
.chain { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; overflow-x: auto; }
.chain__step { flex: 1; min-width: 116px; display: flex; gap: 9px; align-items: flex-start;
    padding: 0 10px 0 0; position: relative; }
.chain__step + .chain__step { padding-left: 10px; border-left: 1px solid var(--line); }

.chain__mark {
    width: 24px; height: 24px; border-radius: 999px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--chrome); color: var(--muted); border: 1px solid var(--line);
}
.chain__step.is-done .chain__mark { background: var(--gold); border-color: var(--gold); color: #fff; }
.chain__step.is-now  .chain__mark { background: var(--surface); border-color: var(--ink); color: var(--ink); }

.chain__body  { min-width: 0; }
.chain__label { display: block; font-size: 12.5px; color: var(--muted); }
.chain__step.is-done .chain__label,
.chain__step.is-now  .chain__label { color: var(--ink); font-weight: 500; }
.chain__who {
    display: block; font-size: 12.5px; color: var(--body); margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chain__step.is-now .chain__who { color: var(--brown); font-weight: 500; }
.chain__at { display: block; font-size: 11px; color: var(--muted); margin-top: 1px; }

@media (max-width: 700px) {
    .chain { flex-direction: column; gap: 2px; }
    .chain__step { min-width: 0; padding: 7px 0; }
    .chain__step + .chain__step { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
}

/* A whole row that links somewhere, without swallowing the buttons in it. */
.table tr { position: relative; }
.rowlink { position: absolute; inset: 0; z-index: 0; }
.rowacts { position: relative; z-index: 1; white-space: nowrap; }
.rowacts .btn { margin-left: 4px; }
.btn--xs { padding: 5px 9px; font-size: 12px; gap: 5px; }

/* A change-this affordance sitting inside a line of text, not a button in a
   row of buttons — put where somebody is already looking at the value. */
.linkbtn {
    background: none; border: 0; padding: 0 0 0 8px; margin: 0;
    font: inherit; font-size: 12.5px; color: var(--gold); cursor: pointer;
    text-decoration: underline; text-underline-offset: 2px;
}
.linkbtn:hover { color: var(--brown); }

/* ── A PIN, shown once ─────────────────────────────────────────────────── */

.pinout {
    background: var(--gold-soft); border: 1px solid var(--gold);
    border-radius: 16px; padding: 20px 22px; margin-bottom: 20px;
}
.pinout__head { display: flex; gap: 12px; align-items: flex-start; color: var(--gold); }
.pinout__head h2 { font-size: 16px; color: var(--brown); font-weight: 500; }
.pinout__head p { font-size: 13px; color: var(--body); margin-top: 2px; }

.pinout__body {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin: 16px 0 12px;
}
.pinout__pin {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 34px; letter-spacing: .34em; margin-right: -.34em;
    color: var(--brown); background: var(--surface);
    border: 1px solid var(--gold-line); border-radius: 12px;
    padding: 10px 20px; user-select: all;
}
.pinout__note { font-size: 12.5px; color: var(--body); line-height: 1.6; margin-bottom: 14px; }

/* An error waits to be read; only success fades on its own. */
.alert { position: relative; }
.alert__close {
    background: none; border: 0; cursor: pointer; color: inherit;
    opacity: .6; padding: 2px; margin-left: auto; align-self: flex-start;
}
.alert__close:hover { opacity: 1; }

/* ── The profile menu ──────────────────────────────────────────────────── */

.usermenu { position: relative; }

.usermenu__trigger {
    display: flex; align-items: center; gap: 10px;
    background: none; border: 1px solid transparent; border-radius: 999px;
    padding: 4px 8px 4px 12px; cursor: pointer; font: inherit; color: inherit;
}
.usermenu__trigger:hover { background: var(--beige); border-color: var(--line); }
.usermenu.is-open .usermenu__trigger { background: var(--beige); border-color: var(--line); }
.usermenu__caret { color: var(--muted); transition: transform .18s ease; }
.usermenu.is-open .usermenu__caret { transform: rotate(180deg); }

.usermenu__panel {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
    width: 268px; background: var(--surface);
    border: 1px solid var(--line); border-radius: 14px;
    box-shadow: 0 16px 40px rgba(46, 33, 26, .16);
    padding: 6px; animation: usermenu-in .14s ease;
}
@keyframes usermenu-in { from { opacity: 0; transform: translateY(-4px); } }

.usermenu__head {
    display: flex; gap: 12px; align-items: center;
    padding: 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px;
}
.usermenu__who { min-width: 0; display: block; }
.usermenu__who strong { display: block; font-size: 14px; color: var(--ink); font-weight: 500; }
.usermenu__who > span {
    display: block; font-size: 12px; color: var(--muted); margin-top: 1px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.usermenu__who .pill { display: inline-block; margin-top: 6px; }

.usermenu__note {
    display: flex; align-items: center; gap: 7px;
    padding: 6px 12px 10px; font-size: 12.5px; color: var(--muted);
}

.usermenu__item {
    display: flex; align-items: center; gap: 11px; width: 100%;
    padding: 10px 12px; border-radius: 9px;
    background: none; border: 0; cursor: pointer;
    font: inherit; font-size: 14px; color: var(--body); text-decoration: none;
    text-align: left;
}
.usermenu__item:hover { background: var(--beige); color: var(--ink); }
.usermenu__item svg { color: var(--muted); flex-shrink: 0; }
.usermenu__item:hover svg { color: var(--gold); }

.usermenu__count {
    margin-left: auto; background: var(--red); color: #fff;
    border-radius: 999px; padding: 1px 7px; font-size: 11px; font-weight: 600;
}

.usermenu__item--out { border-top: 1px solid var(--line); margin-top: 6px; border-radius: 0 0 9px 9px; }
.usermenu__item--out:hover { background: var(--red-soft); color: var(--red); }
.usermenu__item--out:hover svg { color: var(--red); }

.avatar--lg { width: 42px; height: 42px; font-size: 15px; flex-shrink: 0; }

/* On a phone the greeting would crowd the bar out; the avatar is enough. */
@media (max-width: 720px) {
    .usermenu__trigger { padding: 4px; }
    .usermenu__trigger .whoami, .usermenu__caret { display: none; }
    .usermenu__panel { width: 250px; }
}

/* ── When the connection goes ──────────────────────────────────────────── */

.netbar {
    position: fixed; left: 50%; bottom: 24px; z-index: 200;
    transform: translate(-50%, 140%);
    max-width: min(560px, calc(100vw - 32px));
    padding: 13px 20px;
    border-radius: 999px;
    font-size: 13.5px; line-height: 1.45; text-align: center;
    box-shadow: var(--shadow-md);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1), opacity .2s ease;
}
.netbar.is-up { transform: translate(-50%, 0); }

.netbar--off { background: var(--ink);  color: #FFFFFF; }
.netbar--on  { background: var(--ok);   color: #FFFFFF; }

/* ── The error page ────────────────────────────────────────────────────── */

.errorpage { max-width: 560px; margin: 9vh auto; padding: 24px; }
.errorpage__card { text-align: center; padding: 38px 30px; }

.errorpage__mark {
    display: inline-flex; padding: 15px; border-radius: 999px;
}
.errorpage__mark--red   { background: var(--red-soft);   color: var(--red); }
.errorpage__mark--amber { background: var(--amber-soft); color: var(--amber); }
.errorpage__mark--blue  { background: var(--primary-soft); color: var(--primary-deep); }

.errorpage__title {
    font-family: var(--serif);
    font-size: 27px; font-weight: 500; line-height: 1.25;
    color: var(--ink); margin: 16px 0 0;
}
.errorpage__note   { font-size: 14.5px; color: var(--body); line-height: 1.65; margin-top: 10px; }
.errorpage__detail {
    font-size: 13.5px; color: var(--muted); line-height: 1.6;
    margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
}
.errorpage__actions {
    display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 24px;
}
.errorpage__code { font-size: 12px; color: var(--muted); margin-top: 20px; }

/* ── The audit report ──────────────────────────────────────────────────────
   Laid out as a document: one column, numbered sections, and a width that
   keeps a line of prose readable. It is meant to be printed and signed. */

.auditdoc {
    max-width: 940px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 44px 48px 36px;
    box-shadow: var(--shadow-sm);
}
.auditdoc p { font-size: 14.5px; line-height: 1.7; color: var(--body); margin: 0 0 12px; }
.auditdoc strong { color: var(--ink); }

.auditdoc__head { border-bottom: 2px solid var(--ink); padding-bottom: 22px; margin-bottom: 30px; }
.auditdoc__brand { margin-bottom: 22px; }
.auditdoc__head h1 {
    font-family: var(--serif); font-size: 34px; font-weight: 500;
    color: var(--ink); margin: 0; line-height: 1.1;
}
.auditdoc__sub { font-size: 13px; color: var(--muted); margin-top: 6px !important; }

.auditdoc__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 26px; margin: 24px 0 0; }
.auditdoc__facts dt { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.auditdoc__facts dd { margin: 3px 0 0; font-size: 14px; color: var(--ink); }

.auditsec { margin-bottom: 38px; }
.auditsec h2 {
    display: flex; align-items: baseline; gap: 12px;
    font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--ink);
    margin: 0 0 12px; padding-bottom: 9px; border-bottom: 1px solid var(--line);
}
.auditsec__n {
    font-family: var(--font); font-size: 12px; font-weight: 600;
    background: var(--chrome); border: 1px solid var(--primary-deep);
    border-radius: 6px; padding: 2px 8px; color: var(--ink);
}
.auditsub { font-size: 14px; font-weight: 600; color: var(--ink); margin: 22px 0 8px; }

.auditcount { font-size: 14.5px; }

.auditnote {
    border-left: 3px solid var(--line); background: var(--beige);
    padding: 12px 16px; border-radius: 0 var(--r-sm) var(--r-sm) 0;
    font-size: 14px !important; line-height: 1.65 !important; margin: 4px 0 14px !important;
}
.auditnote--ok   { border-left-color: var(--ok);    background: var(--ok-soft); }
.auditnote--warn { border-left-color: var(--amber); background: var(--amber-soft); }

.auditarea { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.auditarea:first-of-type { border-top: 0; }
.auditarea__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.auditarea__head h3 { font-size: 15.5px; font-weight: 600; color: var(--ink); margin: 0; }
.auditarea__count { font-size: 19px; color: var(--ink); }
.auditarea__why { font-size: 13px !important; color: var(--muted) !important; margin: 4px 0 12px !important; }

.audittable { font-size: 13px; }
.audittable td { vertical-align: top; padding-top: 9px; padding-bottom: 9px; }
.audittable__row--flag { background: var(--amber-soft); }
.audittable__row--flag td:first-child { box-shadow: inset 3px 0 0 var(--amber); }

.auditfigures { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin: 18px 0 8px; }
.auditfigures > div { border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; }
.auditfigures dt { font-size: 12px; color: var(--muted); }
.auditfigures dd { margin: 5px 0 0; font-size: 26px; color: var(--ink); line-height: 1; }

.auditlimits { margin: 12px 0 0; padding-left: 22px; }
.auditlimits li { font-size: 14px; line-height: 1.7; color: var(--body); margin-bottom: 10px; }

.auditdoc__foot { border-top: 2px solid var(--ink); padding-top: 26px; margin-top: 10px; }
.auditsign { display: flex; gap: 40px; flex-wrap: wrap; margin-bottom: 24px; }
.auditsign__box { flex: 1; min-width: 220px; }
.auditsign__line { display: block; height: 1px; background: var(--ink); margin-bottom: 7px; margin-top: 40px; }
.auditsign__label { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* Printed, this is the document — nothing else on the page belongs on paper. */

/* ─── Ask AI ───────────────────────────────────────────────────────────────
   One button, bottom right, on every screen; a panel that opens above it.
   Same surfaces and lines as the rest of the page, so it reads as part of
   the system rather than a chat widget bolted on. */
.ask { position: fixed; right: 20px; bottom: 20px; z-index: 95; }
.ask__fab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 16px 11px 14px; border-radius: 999px;
    background: var(--ink); color: var(--surface); border: 1px solid var(--ink);
    font: 600 13.5px/1 var(--font); cursor: pointer;
    box-shadow: 0 10px 28px rgba(15, 37, 64, .28);
    transition: transform .15s ease, box-shadow .15s ease;
}
.ask__fab:hover { transform: translateY(-1px); box-shadow: 0 14px 32px rgba(15, 37, 64, .34); }
.ask__fab svg { color: #E8B45C; position: relative; }
.ask__fab span { position: relative; }
.ask__fab::before, .ask__fab::after {
    content: ""; position: absolute; inset: -3px; border-radius: inherit; z-index: -1;
    background: conic-gradient(from var(--ask-angle, 0deg), #4285F4, #9B72CB, #D96570, #F2A60C, #4285F4);
    animation: askspin 4s linear infinite;
}
.ask__fab::after { inset: -7px; filter: blur(12px); opacity: .55; }
.ask__fab:hover::before, .ask__fab:hover::after, .ask__fab:focus-visible::before, .ask__fab:focus-visible::after { animation-play-state: paused; }
@property --ask-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes askspin { to { --ask-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) { .ask__fab::before, .ask__fab::after { animation: none; } }
.ask__fab { position: relative; isolation: isolate; }
.ask__panel {
    position: absolute; right: 0; bottom: 56px;
    width: min(400px, calc(100vw - 32px)); height: min(560px, calc(100vh - 110px));
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: 0 24px 60px rgba(15, 37, 64, .22);
    overflow: hidden;
}
.ask__panel[hidden] { display: none; }
.ask__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--line);
    background: var(--beige);
}
.ask__title { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); font-size: 14px; }
.ask__title svg { color: var(--amber); }
.ask__tools { display: flex; gap: 4px; }
.ask__iconbtn {
    width: 30px; height: 30px; display: inline-grid; place-items: center;
    border: 0; background: transparent; color: var(--muted); border-radius: var(--r-sm); cursor: pointer;
}
.ask__iconbtn:hover { background: var(--surface); color: var(--ink); }
.ask__log { flex: 1; overflow-y: auto; padding: 14px 14px 6px; display: flex; flex-direction: column; gap: 10px; }
.ask__msg {
    max-width: 88%; padding: 10px 13px; border-radius: 14px;
    font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word;
}
.ask__msg--ai   { align-self: flex-start; background: var(--beige); color: var(--body); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.ask__msg--me   { align-self: flex-end; background: var(--ink); color: var(--surface); border-bottom-right-radius: 5px; }
.ask__msg--err  { align-self: flex-start; background: var(--red-soft); color: var(--red); border: 1px solid var(--red-line); }
.ask__msg--wait { align-self: flex-start; color: var(--muted); font-style: italic; }
.ask__msg--wait::after { content: "…"; animation: askdots 1.2s steps(4, end) infinite; }
@keyframes askdots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.ask__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ask__chips[hidden] { display: none; }
.ask__chip {
    padding: 6px 11px; border-radius: 999px; font: 500 12.5px/1.2 var(--font);
    background: var(--surface); color: var(--blue); border: 1px solid var(--blue-line); cursor: pointer;
}
.ask__chip:hover { background: var(--blue-soft); }
.ask__form { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--surface); }
.ask__input {
    flex: 1; resize: none; max-height: 120px; padding: 9px 12px; overflow: hidden;
    border: 1px solid var(--line); border-radius: var(--r-md); background: var(--beige); color: var(--ink);
    font: 13.5px/1.45 var(--font); outline: none;
}
.ask__input:focus { border-color: var(--primary-deep); background: var(--surface); }
.ask__send {
    width: 38px; height: 38px; flex: 0 0 38px; display: inline-grid; place-items: center;
    border: 0; border-radius: var(--r-md); background: var(--ink); color: var(--surface); cursor: pointer;
}
.ask__send:disabled { opacity: .5; cursor: default; }
:root[data-theme="dark"] .ask__fab { background: var(--primary-deep); border-color: var(--primary-deep); color: #fff; }
:root[data-theme="dark"] .ask__panel { box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }
:root[data-theme="dark"] .ask__msg--me, :root[data-theme="dark"] .ask__send { background: var(--primary-deep); color: #fff; }
@media (max-width: 640px) {
    .ask { right: 12px; bottom: 12px; }
    .ask__fab span { display: none; }
    .ask__fab { padding: 12px; }
    .ask__panel { width: calc(100vw - 24px); height: min(70vh, 560px); }
}
@media print { .ask { display: none !important; } }
.ai-models { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; max-height: 190px; overflow-y: auto; padding: 2px; }
.ai-models[hidden] { display: none; }
.ai-models__item {
    padding: 5px 10px; border-radius: 999px; font: 500 12px/1.2 var(--font);
    background: var(--surface); color: var(--body); border: 1px solid var(--line); cursor: pointer;
}
.ai-models__item:hover { border-color: var(--primary-deep); }
.ai-models__item.is-pick { color: var(--ok); border-color: var(--ok-line); background: var(--ok-soft); }
.ai-models__item.is-on { color: var(--ink); border-color: var(--ink); }

@media print {
    .sidebar, .topbar, .auditbar, .flashes, .netbar { display: none !important; }
    .shell, .main, .page { display: block !important; margin: 0 !important; padding: 0 !important; }
    .auditdoc { border: 0; box-shadow: none; max-width: none; padding: 0; }
    .auditsec { break-inside: auto; }
    .auditsec h2, .auditarea__head { break-after: avoid; }
    .audittable { font-size: 10.5px; }
    .audittable tr { break-inside: avoid; }
    .auditnote { background: none !important; }
    a[href]::after { content: ""; }
}