/*
 * Underground Apparel ERP — design tokens.
 *
 * Implements DESIGN-SYSTEM.md: one authority colour, one action colour, borders as the
 * elevation language, numbers as the hero. Plain CSS rather than a build step, because an
 * internal ERP shell should not need a bundler to render a table.
 *
 * Repaletted from the brand, this round. uaworldwide.com carries no saturated colour at all —
 * ink, grey, white, and a hairline that is ink at six per cent — and sets its display type in
 * Assistant, uppercase, heavy, with positive tracking. That is a deliberate absence rather
 * than an omission, and an ERP can keep it, because an ERP has one thing a lookbook does not:
 * it has to be able to say *this is wrong*.
 *
 * So colour is spent on exactly one job. Status keeps its saturated set — the red, the amber,
 * the green below are unchanged — and everything else, the chrome and the authority and the
 * action colour, becomes ink. On a page where nothing else is coloured, a single red badge is
 * the only coloured pixel, and it is impossible to miss. The old palette tinted four cards at
 * once, which taught the eye that tint carried no signal.
 *
 * The token NAMES are unchanged where their job is unchanged (`--navy` is still the authority
 * colour, `--action` still the one action colour) so that a hundred existing rules keep
 * working and the diff stays where the decision is. Renaming them would have turned a palette
 * change into a rewrite of every screen, and reviewers would have had to read all of it to
 * find the part that mattered.
 */

:root {
    /* authority — the brand's black, not a blue standing in for it */
    --navy: #0B0B0B;
    --navy-light: #242424;

    /* the ONLY action colour */
    --action: #121212;
    --action-hover: #000000;
    --action-tint: #F1F1F1;
    --action-tint-border: #E2E2E2;

    /*
     * Neutrals. Read off the site rather than warmed by eye — the first pass here tinted them a
     * few points warm on the reasoning that a true grey beside a warm white looks like a
     * different application, and the measurement says otherwise: UA's own greys are neutral.
     * Guessing at a tint the brand does not have is the same mistake as inventing an accent it
     * does not have, one order of magnitude quieter.
     */
    --page: #F7F7F7;
    --page-outer: #EFEFEF;
    --surface: #FFFFFF;
    --hairline: #E6E6E6;
    --divider: #F0F0F0;
    --hairline-hover: #C9C9C9;

    --text: #121212;
    --text-body: #3A3A3A;
    --text-secondary: #6B6A6A;
    --text-muted: #9A9A9A;

    --on-navy-body: rgba(255, 255, 255, .72);
    --on-navy-eyebrow: rgba(255, 255, 255, .48);

    /*
     * Status: tint / foreground / bar — one set, used everywhere, and the only saturated colour
     * left in the system.
     *
     * Retuned with the repalette to MATCHED lightness and chroma, hue varied. The previous set was
     * three colours picked independently, so the red was darker and more saturated than the amber
     * and shouted over it wherever both appeared — on the exception card, in a badge column, on a
     * queue sorted by severity. When colour is the page's only signal, one state being visually
     * louder than another is a ranking nobody chose.
     */
    --ok-tint: #EAF3EE;      --ok-fg: #1B7A48;
    --warn-tint: #F8F0E2;    --warn-fg: #B26B00;   --warn-bar: #C07A0C;
    --neutral-tint: #F1F1F1; --neutral-fg: #6B6A6A; --neutral-bar: #9A9A9A;
    --bad-tint: #F9EBEA;     --bad-fg: #B3261E;

    /*
     * Tint borders, added with the round fifty-six redesign.
     *
     * The tinted KPI card needs a border a shade darker than its own fill, or the card dissolves
     * into the page at the corners — borders are this system's elevation language, so a card
     * without one is not "flat", it is unfinished. One per status, derived from the tint rather
     * than picked, so a new status cannot acquire a border that belongs to a different family.
     */
    --ok-tint-border: #D3E6DC;
    --warn-tint-border: #EBDDC2;
    --neutral-tint-border: #E2E2E2;
    --bad-tint-border: #EDD2D0;

    /*
     * The chart series' second step. Under the old palette this was the one exception to "one
     * action colour", on the argument that three greys would say the segments are unimportant.
     * The brand repalette settles that differently: a donut of stock value is not a status, so
     * it does not get to spend the page's only colour. Three steps of ink, far enough apart to
     * read at a 24px stroke, say the same thing without competing with a red badge.
     */
    --action-mid: #9A9A9A;
    --action-far: #C9C9C9;
}

/*
 * ---------------------------------------------------------------- geometry
 *
 * UA sets `border-radius: 0` on its own SHOP NOW button and keeps its panels close to square.
 * The first pass of this repalette moved every colour and left the geometry alone, which is why
 * the result still read as a generic admin template wearing a black palette: the radius is doing
 * as much work as the hue, and 14px cards with 10px pill-buttons are a different design language
 * regardless of what colour they are painted.
 *
 * So: 4px on panels, 2px on badges and small controls, and ZERO on buttons. 999px survives in one
 * place only — the round chips and avatars, which are circles by intent rather than by rounding.
 *
 * Buttons additionally take the site's own treatment: uppercase, 700, tracked +0.09em, black
 * fill, square. That combination is the most recognisable thing about the brand after the
 * wordmark, and it is the part a viewer identifies before they read a word of the page.
 */

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Assistant', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    background: var(--page);
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
}

/* ---------------------------------------------------------------- chrome */

.topbar {
    height: 64px;
    background: var(--surface);
    border-bottom: 1px solid var(--hairline);
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 20px;
    /*
     * Asymmetric on purpose. 14px on the left puts the logo on the same vertical line as the
     * sidebar rows below it (the rail is 246px wide and insets its rows by 14px), so the brand
     * reads as the head of the rail rather than as a third column. 28px on the right is the
     * shell's own gutter, which lands the account block on the page content's right edge.
     */
    padding: 0 28px 0 14px;
}

/*
 * The bar had no flexible member. `.search` is `flex: 1` capped at 460px, so once it hit the cap
 * nothing absorbed the remaining width and the whole row — bell, account, sign out — bunched in
 * behind it, leaving 129px of dead space past the sign-out button at 1280px wide. An auto margin
 * is the fix: it takes the slack, the right cluster goes flush right, and the search still reaches
 * its cap first, because auto margins are resolved after flexing rather than before.
 *
 * It sits on the bell rather than on the search, and that placement is the point. The first
 * version put it on `.search`, which is `display: none` below 900px — so the slack had nowhere to
 * go and the same 270px tail came back on a tablet, in the one layout where the bar has the least
 * to hold. Anchoring it to the first member of the right-hand cluster is indifferent to whether
 * anything to its left is rendered at all. The second rule keeps that true if another icon button
 * is ever added: only the first one opens the gap.
 */
.topbar > .icon-btn { margin-left: auto; }
.topbar > .icon-btn ~ .icon-btn { margin-left: 0; }

/*
 * Sign out is a different kind of thing from the two controls beside it: the bell and the account
 * block are the current session described, this ends it. The rule says so without spending a label
 * on it, and stops short of the full bar height so it reads as a separator between neighbours
 * rather than as a table edge.
 */
.topbar form { padding-left: 20px; position: relative; }
.topbar form::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 26px;
    width: 1px;
    background: var(--hairline);
}

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }

/* A CSS construct rather than an image: the repo ships no icon or logo assets. */
.brand .logo {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background: var(--navy);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.mark {
    font-weight: 700;
    font-size: 14px;
    letter-spacing: -.2px;
    color: var(--navy);
    text-transform: uppercase;
    white-space: nowrap;
}

/*
 * Search pill. The ellipsis rules are not cosmetic — the placeholders are whole sentences
 * ("Search cut tickets, lines, subcons…") and without nowrap they wrap to three lines and
 * burst the pill at tablet widths.
 */
.search {
    flex: 1;
    max-width: 460px;
    height: 40px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--hairline);
    border-radius: 2px;
    background: var(--page);
    min-width: 0;
}
.search svg { flex: none; color: var(--text-muted); }
.search .ph {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search .kbd {
    flex: none;
    border-radius: 2px;
    padding: 1px 6px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    font-size: 10.5px;
    color: var(--text-muted);
}

.icon-btn {
    width: 38px;
    height: 38px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 4px;
    color: var(--text-body);
    cursor: pointer;
    position: relative;
    text-decoration: none;
}
.icon-btn.round { border-radius: 999px; }
.icon-btn:hover { border-color: var(--hairline-hover); }

.icon-btn .dot {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--warn-fg);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 5px;
    border-radius: 2px;
    font-variant-numeric: tabular-nums;
}

.account { display: flex; align-items: center; gap: 10px; }
.account .avatar {
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 999px;
    background: var(--action-tint);
    color: var(--action);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.account .who-name { font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.account .who-meta { font-size: 11.5px; color: var(--text-secondary); line-height: 1.25; }

.tabs { display: flex; gap: 4px; }

.tab {
    padding: 7px 13px;
    border-radius: 4px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    transition: background-color .15s ease;
}
.tab:hover { background: var(--page); }
.tab.is-active { background: var(--action-tint); color: var(--action); font-weight: 600; }

.stamp { margin-left: auto; font-size: 11.5px; color: var(--text-muted); }

.shell { min-width: 0; padding: 20px 28px 48px; }

/* ---------------------------------------------------------------- headings */

/*
 * The brand sets labels uppercase with POSITIVE tracking, heavier than a typical UI eyebrow.
 * Carried over at its measured values — after the wordmark it is the most recognisable thing
 * about the site, and it is what makes a screen full of tables read as UA rather than as an
 * admin theme that happens to be black.
 */
.eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

h1 { font-size: 26px; font-weight: 700; letter-spacing: -.6px; margin: 4px 0 3px; text-wrap: pretty; }
h2 { font-size: 17px; font-weight: 700; letter-spacing: -.25px; margin: 22px 0 10px; }

.lede { color: var(--text-secondary); max-width: 62ch; margin: 0 0 4px; text-wrap: pretty; }
.provenance { font-size: 11.5px; color: var(--text-muted); margin-top: 6px; }

/* ---------------------------------------------------------------- cards */

.card {
    background: var(--surface);
    border: 1px solid var(--hairline);   /* borders carry hierarchy, not shadows */
    border-radius: 4px;
    padding: 15px 17px;
}
a.card { text-decoration: none; color: inherit; transition: border-color .15s ease; }
a.card:hover { border-color: var(--hairline-hover); }

.grid { display: grid; gap: 12px; }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 900px) {
    .grid.cols-4, .grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr 1fr; }
    .shell { padding: 20px 16px 92px; }
}
@media (max-width: 560px) {
    .grid.cols-4, .grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr; }
    .topbar { padding: 0 16px; gap: 14px; overflow-x: auto; }
}

/* ---------------------------------------------------------------- metrics */

.metric .value {
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -.7px;
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
    line-height: 1.15;
}
.metric .value .unit { font-size: 50%; color: var(--text-secondary); font-weight: 600; }
.metric .note { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }

.value.is-ok { color: var(--ok-fg); }
.value.is-warn { color: var(--warn-fg); }
.value.is-bad { color: var(--bad-fg); }

.subtiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 10px; }
.subtile { background: var(--page); border-radius: 4px; padding: 8px 10px; }
.subtile .k { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.subtile .v { font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 3px; }

/* ---------------------------------------------------------------- bars */

/*
 * Square caps. A progress bar with 999px ends is the signature of the rounded UI language this
 * repalette is leaving; `999px` now survives in four places only, all of them circles by intent
 * rather than by rounding — the round icon button, the avatar, the toggle, and the legend dot.
 */

.bar { height: 8px; background: var(--divider); border-radius: 0; overflow: hidden; margin-top: 12px; }
.bar > span {
    display: block; height: 100%; border-radius: 0;
    transform-origin: left;
    animation: growBar .65s cubic-bezier(.16,1,.3,1) both;
}
.bar.is-ok > span { background: var(--ok-fg); }
.bar.is-warn > span { background: var(--warn-bar); }
.bar.is-bad > span { background: var(--bad-fg); }
.bar.is-action > span { background: var(--action); }

/* ---------------------------------------------------------------- badges */

.badge {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 2px;
}
.badge.ok { background: var(--ok-tint); color: var(--ok-fg); }
.badge.warn { background: var(--warn-tint); color: var(--warn-fg); }
.badge.bad { background: var(--bad-tint); color: var(--bad-fg); }
.badge.neutral { background: var(--neutral-tint); color: var(--neutral-fg); }
.badge.action { background: var(--action-tint); color: var(--action); }

.count { background: var(--action-tint); color: var(--action); border-radius: 2px; padding: 1px 8px; font-size: 11px; font-weight: 600; }

/* ---------------------------------------------------------------- tables */

.table-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: 4px; background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
thead th {
    text-align: left;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 13px 16px;
    border-bottom: 1px solid var(--hairline);
    white-space: nowrap;
}
tbody td { padding: 9px 14px; border-bottom: 1px solid var(--divider); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.mono { font-family: ui-monospace, monospace; text-transform: uppercase; font-size: 12.5px; }

/*
   Monospace without the uppercasing, for values whose case is part of the value.

   `.mono` uppercases because it was written for document numbers — CNV-000001, AP-000004 —
   where it makes a code scannable and cannot change what the code is. An email is not that:
   rendering it uppercase shows the reader something other than what is stored, and on a
   sign-in page it shows them something other than what they would type.
*/
.literal { font-family: ui-monospace, monospace; font-size: 12.5px; }
.sub { color: var(--text-secondary); font-size: 12px; }

/* ---------------------------------------------------------------- misc */

.empty { padding: 44px 20px; text-align: center; color: var(--text-secondary); }
.empty .mark-lg { font-size: 26px; color: var(--text-muted); margin-bottom: 8px; }

.link { color: var(--action); font-weight: 600; text-decoration: none; }
.link:hover { color: var(--action-hover); }

footer.site {
    background: var(--navy);
    color: var(--on-navy-body);
    padding: 26px 32px;
    font-size: 12.5px;
}
footer.site .eyebrow { color: var(--on-navy-eyebrow); }

@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes growBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.shell { animation: fadeUp .28s cubic-bezier(.16,1,.3,1) both; }

/* ---------------------------------------------------------------- forms and actions
 *
 * One action colour, per DESIGN-SYSTEM §3: the primary button is the only blue-filled
 * element on a page. A secondary action is a bordered surface, never a second fill colour —
 * two competing fills mean neither reads as the action.
 */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    padding: 0 18px;
    border: 1px solid var(--action);
    /*
     * Zero, not 4px. Lifted from the site's SHOP NOW button, which is the one control a visitor
     * to uaworldwide.com actually presses, and it is square.
     */
    border-radius: 0;
    background: var(--action);
    color: #fff;
    font: inherit;
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: .09em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    transition: background .12s ease, border-color .12s ease;
}

.btn:hover { background: var(--action-hover); border-color: var(--action-hover); }
.btn:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }

.btn.secondary {
    background: var(--surface);
    border-color: var(--hairline);
    color: var(--text-body);
}

.btn.secondary:hover { border-color: var(--hairline-hover); background: var(--surface); }

.btn.subtle {
    background: transparent;
    border-color: transparent;
    color: var(--action);
    height: auto;
    padding: 0;
    font-size: 12px;
    /*
     * Opts back out of the uppercase treatment. `.btn.subtle` is an inline text link wearing a
     * button class, and its labels are sentences — "amend this return", "why is this held?" —
     * which uppercase at +0.09em makes genuinely harder to read rather than merely different.
     * The brand sets short labels in caps, not prose.
     */
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.btn.subtle:hover { background: transparent; text-decoration: underline; }

.btn[disabled] { opacity: .5; cursor: not-allowed; }

.field { display: block; margin-bottom: 16px; }

.label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.input, .select, .textarea {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--hairline);
    border-radius: 2px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 14px;
}

.textarea { height: auto; min-height: 76px; padding: 10px 12px; resize: vertical; }

.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--action);
    box-shadow: 0 0 0 3px var(--action-tint);
}

.hint { font-size: 12px; color: var(--text-muted); margin-top: 6px; }

/* ---------------------------------------------------------------- status tone */

/*
 * `is-ok`, `is-warn` and `is-bad` as a standalone tone, applicable to any element.
 *
 * They were only ever defined in combination — `.kpi.is-warn`, `.alert.is-bad`, `.badge.warn` —
 * and the views had been using them as though they were general all along. `StyleClassTest`
 * found roughly a hundred and sixty places where the combination did not exist, and they were
 * not decorative:
 *
 *   `<p class="hint is-warn">{{ $message }}</p>`
 *
 * is the FIELD VALIDATION ERROR, on nearly every form in the system. `.hint` is muted grey and
 * `.hint.is-warn` did not exist, so every "this field is required" on every screen rendered in
 * the colour of a helper note. The markup said what it meant for forty screens and the
 * stylesheet never answered.
 *
 * Defining the tone once, standalone, fixes all of them and is also the truer model: a tone is a
 * statement about the content, not about the component wrapping it. Components that need more
 * than a text colour — a tinted card, a filled button — keep their own compound rules, which
 * win on specificity.
 */
.is-ok { color: var(--ok-fg); }
.is-warn { color: var(--warn-fg); }
.is-bad { color: var(--bad-fg); }

/* A card that wants a decision, matching the KPI card's treatment. */
.card.is-warn { background: var(--warn-tint); border-color: var(--warn-tint-border); }

/*
 * The quiet button. `.nav-row.is-quiet` existed and `.btn.is-quiet` did not, so four buttons on
 * the bank reconciliation screens — written to recede behind the primary action — rendered as
 * full-weight buttons competing with it.
 */
.btn.is-quiet {
    background: transparent;
    border-color: transparent;
    color: var(--text-secondary);
    font-weight: 500;
}
.btn.is-quiet:hover { background: var(--action-tint); color: var(--text); }

/*
 * Used once, on the disposal form in the privacy console, and never defined until round fifty-six.
 * The proof it was always meant to be a flex container is the sibling `.field` carrying an inline
 * `flex: 2` — a declaration that does nothing at all without this rule. So that form had been
 * stacking its two controls vertically while one of them asked to be twice the width of the other.
 */
.field-row { display: flex; gap: 12px; align-items: flex-start; }
.field-row > .field { flex: 1; min-width: 0; }

/*
 * The blockers list on a period screen — what stops the month being sealed. Also used once, also
 * never defined, so the most consequential content on that page had been rendering as a default
 * browser bullet list. The markers are deliberate here rather than suppressed: this is a list of
 * things a controller must clear, and a count they can see at a glance is the point of it.
 */
.gaps { margin: 0 0 12px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.gaps > li::marker { color: var(--warn-fg); }
.why { font-size: 13.5px; color: var(--text-body); }

.checkbox { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-body); }

/* Feedback. Tinted surfaces with a left bar, matching the status language used by metrics. */

.notice, .errors {
    border-radius: 2px;
    padding: 12px 14px;
    font-size: 13px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-left-width: 3px;
}

/*
 * `.notice` was green, and it was green for three different jobs.
 *
 * It carries the success flash ("Saved"), an explanatory note ("nothing moves when you save
 * this"), and — on eight screens — a WARNING: *"8 suppliers process personal data with no
 * agreement signed"*, *"3 qualifications lapse within thirty days"*, *"out by ₱412.50"*,
 * *"this style has no variants, so nobody can buy it"*. All of them rendered in the green
 * reserved for things being well.
 *
 * That was wrong under the old palette and invisible, because half the page was already
 * coloured. Under the repalette it is the loudest thing on an otherwise monochrome screen, and
 * it is reassuring the reader about a problem. Colour reserved for status is only worth having
 * if the status it names is the true one.
 *
 * So the default is neutral — a bordered note, no claim either way — and a notice that means
 * something takes `is-ok` or `is-warn` explicitly. Defaulting to neutral is the safe direction:
 * a warning that renders plain is under-stated, and a warning that renders green is a lie.
 */
.notice {
    background: var(--action-tint);
    color: var(--text-body);
    border-left-color: var(--text-secondary);
}

.notice.is-ok { background: var(--ok-tint); color: var(--ok-fg); border-left-color: var(--ok-fg); }
.notice.is-warn { background: var(--warn-tint); color: var(--warn-fg); border-left-color: var(--warn-bar); }
.notice strong { color: inherit; }

.errors {
    background: var(--bad-tint);
    color: var(--bad-fg);
    border-left-color: var(--bad-fg);
}

.errors ul { margin: 0; padding-left: 18px; }

/* ---------------------------------------------------------------- sign-in shell */

.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--page-outer);
    padding: 32px;
}

.auth-card {
    width: 100%;
    max-width: 388px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 4px;
    padding: 32px;
}

.auth-card .mark { display: block; margin-bottom: 4px; }

.auth-card .lede { margin: 0 0 24px; }

.auth-foot {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--divider);
    font-size: 12px;
    color: var(--text-muted);
}

.topbar .spacer { flex: 1; }

.who { font-size: 12px; color: var(--text-secondary); }
.who strong { color: var(--text); font-weight: 600; }


/* ------------------------------------------------------- module sidebar
 *
 * Replaces the row of eight peer tabs. Per DESIGN-SYSTEM §4 the rail is 246px and a
 * selected row is the action tint with action-blue text at weight 600; §"Radii" puts
 * sidebar rows at 9–10px. Borders carry the structure — no shadows.
 */

.layout {
    display: grid;
    /*
     * `minmax(0, 1fr)` rather than `1fr`. A bare `1fr` resolves to min-content, so one wide table
     * pushes the whole page sideways and the sidebar scrolls off — the failure looks like a table
     * bug and is a grid bug.
     */
    grid-template-columns: 246px minmax(0, 1fr);
    max-width: 1360px;
    margin: 0 auto;
    align-items: start;
}

.sidebar {
    position: sticky;
    top: 64px;                       /* clears the sticky top bar */
    align-self: start;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    background: var(--surface);
    padding: 20px 14px 32px;
    border-right: 1px solid var(--hairline);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* "MAIN MENU" / "MODULES" — the rail's own headings, not a group. */
.nav-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 0 12px 8px;
}

.nav-sep { height: 1px; background: var(--divider); margin: 12px 4px; }

/* Rows ---------------------------------------------------------------- */

.nav-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: 4px;
    color: var(--text-body);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    transition: background-color .15s ease, color .15s ease;
}

.nav-row .ico { flex: none; width: 15px; display: flex; align-items: center; justify-content: center; }

.nav-row:hover { background: var(--page); color: var(--text); }

/*
 * A top-level row when current is *filled*, not tinted — it is the only element on the page
 * carrying a shadow besides the chart tooltip, and it earns it: this is "you are here", and
 * the tinted treatment is already spent on the open module group.
 */
.nav-row.is-active {
    background: var(--action);
    color: #fff;
    box-shadow: 0 4px 10px rgba(11, 11, 11, .18);
}

.nav-row.is-quiet { font-weight: 500; color: var(--text-secondary); }

/* Sub-rows hang off a rule, so hierarchy survives with several groups open at once. */
.nav-sub {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 2px 0 6px 19px;
    padding-left: 13px;
    border-left: 1px solid var(--divider);
}

.nav-row.is-sub {
    display: block;
    padding: 7px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 400;
    color: var(--text-secondary);
}

.nav-row.is-sub:hover { background: var(--page); color: var(--text); }

.nav-row.is-sub.is-active {
    background: var(--action-tint);
    color: var(--action);
    font-weight: 600;
    box-shadow: none;
}

/* Groups -------------------------------------------------------------- */

.nav-group > summary {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    border-radius: 4px;
    cursor: pointer;
    list-style: none;                /* the default marker sits badly against the label */
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-body);
    user-select: none;
}

.nav-group > summary .ico { flex: none; width: 15px; display: flex; align-items: center; justify-content: center; }

.nav-group > summary::-webkit-details-marker { display: none; }

.nav-group > summary:hover { background: var(--page); color: var(--text); }

.nav-group.is-current > summary { background: var(--action-tint); color: var(--action); }

.nav-group > summary .chev {
    margin-left: auto;
    flex: none;
    transition: transform .18s cubic-bezier(.16, 1, .3, 1);
}

.nav-group[open] > summary .chev { transform: rotate(180deg); }



/* Burger -------------------------------------------------------------- */

.burger {
    display: none;                   /* desktop keeps the rail open */
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 34px;
    height: 34px;
    padding: 0 7px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 4px;
    cursor: pointer;
}

.burger:hover { border-color: var(--hairline-hover); }
.burger span { display: block; height: 1.5px; background: var(--text); border-radius: 2px; }

@media (max-width: 900px) {
    .burger { display: flex; }

    /* The rail becomes a disclosure above the content rather than an overlay: an ERP screen
       on a tablet is usually being read alongside the menu, not instead of it. */
    .layout { grid-template-columns: minmax(0, 1fr); }

    .sidebar {
        display: none;
        position: static;
        max-height: none;
        border-right: 0;
        border-bottom: 1px solid var(--hairline);
        padding: 12px 16px 16px;
    }

    .sidebar.is-open { display: block; }
}


/* ================================================================ round fifty-six redesign
 *
 * The card rhythm, tinted KPI cards, pill controls and chart primitives from the operations
 * UI handoff. Everything below is class-based: the design prototypes carried inline styles
 * because of the tool that produced them, and inline styles in a Blade view are a token
 * system that only one screen obeys.
 */

/* ---------------------------------------------------------------- tinted KPI card */

/*
 * The tint says what the number *means*, never what would look varied. Round fifty-six wrote
 * that rule and then broke it in the same file: every one of the four dashboard cards carried
 * a tint, because each had *a* meaning — green for money, neutral for context, action-blue for
 * work in flight. Four tinted cards is a decorated page, not an informative one. Where nothing
 * is plain, tint is not a signal; it is the background.
 *
 * So the rule is narrowed to the only version of it that survives contact with a real screen:
 * a card is tinted when it wants a decision, and plain otherwise. `is-warn` and `is-bad` are
 * the two states that want one. `is-ok` and `is-neutral` are kept as class names — they still
 * colour the NUMBER, which is where "this is money" and "this is healthy" belong — but they no
 * longer colour the card. Nothing being fine is not news.
 */
.kpi {
    border: 1px solid var(--hairline);
    background: var(--surface);
    border-radius: 4px;
    padding: 13px 16px;
}
.kpi.is-ok, .kpi.is-neutral { background: var(--surface); border-color: var(--hairline); }
.kpi.is-warn { background: var(--warn-tint); border-color: var(--warn-tint-border); }
.kpi.is-bad { background: var(--bad-tint); border-color: var(--bad-tint-border); }

.kpi .k { font-size: 12px; font-weight: 600; color: var(--text-body); }

.kpi .v {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.7px;
    line-height: 1.18;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}
.kpi .v.is-ok { color: var(--ok-fg); }
.kpi .v.is-warn { color: var(--warn-fg); }
.kpi .v.is-bad { color: var(--bad-fg); }
.kpi .v.is-action { color: var(--action); }
.kpi .v .unit { font-size: 16px; font-weight: 600; color: var(--text-secondary); letter-spacing: 0; }

.kpi .n { font-size: 11.5px; color: var(--text-secondary); margin-top: 2px; }

/*
 * On a tinted card the neutral track disappears, so the bar sits on white instead. On a plain
 * card white-on-white would erase the track entirely, so it takes the neutral tint back.
 */
.kpi .bar { background: rgba(255, 255, 255, .8); }
.kpi:not(.is-warn):not(.is-bad) .bar { background: var(--neutral-tint); }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.kpi-grid.is-dashboard { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/*
 * `auto-fit` + `minmax`, never `repeat(4, 1fr)`. A fixed four-column grid does not reflow, so
 * at tablet width the fourth card forces a horizontal scrollbar across the whole page.
 */

.kpi .icon-tile {
    width: 34px;
    height: 34px;
    border-radius: 4px;
    background: var(--action-tint);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.kpi .head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.kpi .kebab { margin-left: auto; color: var(--text-secondary); letter-spacing: 2px; font-weight: 700; }

.kpi .subtiles { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.kpi .subtile { background: var(--action-tint); border-radius: 4px; padding: 9px 10px; min-width: 0; }
.kpi.is-warn .subtile, .kpi.is-bad .subtile { background: rgba(255, 255, 255, .75); }
.kpi .subtile .k { letter-spacing: .06em; }

/* ---------------------------------------------------------------- pill controls */

.pill {
    height: 38px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--hairline);
    border-radius: 2px;
    background: var(--surface);
    color: var(--text-body);
    font-weight: 600;
    font-size: 12.5px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}
.pill:hover { border-color: var(--hairline-hover); }
.pill.is-on { background: var(--action); border-color: var(--action); color: #fff; }

/* ---------------------------------------------------------------- alert banner */

.alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 4px;
    font-size: 13px;
    border: 1px solid transparent;
}
.alert svg { flex: none; margin-top: 1px; }
.alert .grow { margin-left: auto; white-space: nowrap; }
.alert.is-warn { background: var(--warn-tint); border-color: var(--warn-tint-border); color: var(--warn-fg); }
.alert.is-bad { background: var(--bad-tint); border-color: var(--bad-tint-border); color: var(--bad-fg); }
.alert.is-ok { background: var(--ok-tint); border-color: var(--ok-tint-border); color: var(--ok-fg); }
.alert.is-neutral { background: var(--neutral-tint); border-color: var(--neutral-tint-border); color: var(--neutral-fg); }

/* A warning that needs a paragraph and sometimes a table is a card, not a one-line banner. */
.warn-card {
    background: var(--warn-tint);
    border: 1px solid var(--warn-tint-border);
    border-radius: 4px;
    padding: 16px 18px;
}
.warn-card .h {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--warn-fg);
}
.warn-card .b { font-size: 12.5px; color: var(--text-body); max-width: 72ch; margin-top: 6px; }

/* ---------------------------------------------------------------- section header */

.sec {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 10px;
    flex-wrap: wrap;
}
.sec h2 { font-size: 17px; font-weight: 700; letter-spacing: -.2px; margin: 0; }
.sec .grow { margin-left: auto; display: flex; gap: 10px; align-items: center; }

.page-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.page-head .grow { margin-left: auto; display: flex; gap: 10px; align-items: center; }

/* ---------------------------------------------------------------- toggle (settings) */

.toggle {
    width: 44px;
    height: 26px;
    border-radius: 999px;
    background: var(--hairline);
    border: none;
    position: relative;
    cursor: pointer;
    flex: none;
    transition: background-color .18s ease;
}
.toggle.is-on { background: var(--action); }
.toggle::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(11, 11, 11, .25);
    transition: left .18s cubic-bezier(.16, 1, .3, 1);
}
.toggle.is-on::after { left: 21px; }

/* ---------------------------------------------------------------- tab bar (settings) */

.tabbar { display: flex; gap: 6px; border-bottom: 1px solid var(--hairline); margin-bottom: 20px; }
.tabbar a {
    height: 38px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.tabbar a.is-on { border-bottom-color: var(--action); color: var(--action); }

/* ---------------------------------------------------------------- charts */

.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; }

.donut { width: 190px; height: 190px; position: relative; flex: none; }
.donut .mid {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.donut .mid .c { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.donut .mid .v { font-size: 25px; font-weight: 700; font-variant-numeric: tabular-nums; }

.legend { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; }
.legend .row { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.legend .sw { width: 9px; height: 9px; border-radius: 999px; flex: none; }
.legend .row .grow { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; }
.legend .row .pc { color: var(--text-secondary); font-variant-numeric: tabular-nums; width: 44px; text-align: right; }

.bars {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
    align-items: end;
    /* 64px of headroom: with less, the tooltip over a tall bar covers the card's own title. */
    margin-top: 64px;
}
.bars .col { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bars .track {
    width: 100%;
    max-width: 46px;
    height: 208px;
    background: var(--divider);
    border-radius: 0;
    display: flex;
    align-items: flex-end;
    position: relative;
}
.bars .fill {
    width: 100%;
    background: var(--action-far);
    border-radius: 0;
    animation: riseBar .65s cubic-bezier(.16, 1, .3, 1) both;
}
.bars .col:hover .fill, .bars .col.is-on .fill { background: var(--action); }
.bars .cap { font-size: 11px; color: var(--text-secondary); }

.bars .tip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translate(-50%, -8px);
    background: var(--navy);
    color: #fff;
    border-radius: 4px;
    padding: 8px 13px;
    box-shadow: 0 6px 16px rgba(11, 11, 11, .25);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
    white-space: nowrap;
}
.bars .col:hover .tip, .bars .col.is-on .tip { opacity: 1; }
.bars .tip .c { font-size: 10px; font-weight: 600; color: var(--on-navy-eyebrow); }
.bars .tip .v { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bars .tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--navy);
}

@keyframes riseBar { from { height: 0; } }

.axis { display: flex; flex-direction: column; justify-content: space-between; height: 208px; font-size: 10.5px; color: var(--text-muted); text-align: right; }

/* Motion is decoration here; anyone who has asked for less should not have to watch it. */
@media (prefers-reduced-motion: reduce) {
    .shell, .bar > span, .bars .fill { animation: none; }
    .nav-group > summary .chev, .toggle::after { transition: none; }
}


/* ---------------------------------------------------------------- module page furniture */

/*
 * A module h1 is a shade smaller than the dashboard's, which is the only screen that opens with
 * a greeting rather than a noun. Set here rather than inline per view: eleven views carrying
 * `style="font-size:26px"` is a type scale that lives in eleven places and drifts in all of them.
 */
.page-head h1 { font-size: 24px; letter-spacing: -.5px; margin: 3px 0 3px; }
.page-head .lede { max-width: 70ch; margin-top: 0; }

/*
 * Filter forms. The prototypes drew these as static pills; the real screens have working GET
 * forms behind them and the handoff is explicit that the pills are stand-ins for exactly these.
 * So the form keeps its semantics and borrows the pill's shape.
 */
.filters {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin: 16px 0 12px;
}
.filters .field { margin: 0; }
.filters .label { font-size: 10px; letter-spacing: .1em; color: var(--text-muted); margin-bottom: 4px; }
.filters .input, .filters .select {
    height: 38px;
    border-radius: 2px;
    padding: 0 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-body);
}
.filters .input[type="search"] { min-width: 220px; font-weight: 400; }
.filters .btn { height: 38px; }

/* A right-aligned tail on a filter row, for the button that creates the document. */
.filters .grow { margin-left: auto; display: flex; gap: 10px; align-items: center; }

.stack { display: flex; flex-direction: column; gap: 12px; }

.pager { margin-top: 16px; }


/*
 * ---------------------------------------------------------------- density
 *
 * Tightened after seeing the detail screens with real data in them. The spacing was set on the
 * dashboard, which is four cards and a table and has room to breathe; a detail screen stacks a
 * heading, three metrics, an action row, a table and a form, and at that length the same generous
 * rhythm means the reader scrolls past a screenful of nothing to reach the second section.
 *
 * The biggest single change is the metric figure: 38px was set when a screen showed four of them
 * and now several screens show three above a form. Numbers stay the hero — 27px is still far and
 * away the largest thing on the card — but they no longer set the height of everything under them.
 */


/*
 * ---------------------------------------------------------------- narrow-screen topbar
 *
 * The bar holds six things and only the logo and the sign-out control are load-bearing at every
 * width. Below the rail's own breakpoint the account block wraps its two lines into four and the
 * sign-out button breaks mid-word, so the pieces drop out in order of how little is lost:
 * the branch line first (it is on the screen you just came from), then the name (the avatar still
 * carries the initials), then the search pill (a placeholder, not yet a search).
 *
 * The notification count never drops. It is the one element in the bar that is about *now*.
 */
@media (max-width: 1080px) {
    .account .who-meta { display: none; }
}

@media (max-width: 900px) {
    .topbar { gap: 14px; padding: 0 16px; }
    .search { display: none; }
    .account .who-name { display: none; }
    .mark { font-size: 13px; }
}

@media (max-width: 560px) {
    .mark { display: none; }
    .shell { padding: 16px 16px 40px; }
}


/*
 * ---------------------------------------------------------------- panel columns
 *
 * Detail screens stacked their form panels in one column capped at 640px, which cost twice: half
 * the page width sat empty, and a five-panel form ran to three screenfuls.
 *
 * The obvious fix — dropping the cap — is wrong, and the cap was not a mistake. A text input a
 * thousand pixels wide is unusable: the eye loses the line between the label at the left and the
 * end of the field. So the measure moves rather than disappearing. The wrapper fills the page and
 * each panel keeps a readable width of its own.
 *
 * **Multi-column, not grid, and the difference is the whole point.** A grid puts panels in rows,
 * and a row is always as tall as its tallest member — so a short panel beside a long one leaves a
 * hole underneath it, and the next panel starts below the hole rather than in it. `align-items:
 * start` does not help: it stops the panel stretching, not the row. On the item form that left a
 * screen-high void between "Variant grid" and "Product and customs", which is worse than the
 * empty right-hand side this replaced.
 *
 * Columns have no rows, so panels pack against whatever is above them. Reading order survives
 * too, which is why this is not merely a layout trick: multi-column fills the first column in
 * document order before starting the second, so what you read down the left is what you tab
 * through — visual order and focus order stay the same sequence. A masonry grid built by hand
 * from two column divs would break exactly that.
 *
 * `columns: 400px` is a minimum width, not a count: the browser fits as many 400px columns as the
 * space allows, so this needs no breakpoint and collapses to one column on a narrow screen. 400
 * after trying 330, which gave three columns of about 350px on an ordinary laptop — wide enough
 * for a select, too narrow for the name and description fields that make up most of these panels.
 */
.panels {
    columns: 400px;
    column-gap: 12px;
}

/*
 * Without this a panel splits across the column break — half a card at the foot of one column and
 * the rest at the head of the next, border and all.
 */
.panels > .card {
    break-inside: avoid;
    margin: 0 0 12px;
}


/*
 * ---------------------------------------------------------------- button sizes
 *
 * `.btn` is 38px and matches `.input`, so a form row lines up without anybody setting a height.
 * Thirty views were overriding it inline with `height:34px` — correct when inputs were 34px, and
 * now just a button shorter than the field beside it. Removed there rather than accommodated
 * here: an inline height is a type scale that only one element obeys.
 *
 * `.btn-sm` is the genuinely different size — an action *inside a table cell*, where a 38px
 * control makes the row taller than every other row in the table. It was already being used in
 * the privacy console and had never been defined, so those buttons have been rendering at full
 * size and stretching their rows since round fifty-four.
 */
.btn-sm {
    height: 32px;
    padding: 0 14px;
    border-radius: 4px;
    font-size: 12.5px;
}

/*
 * A destructive primary. Also used-but-never-defined: the disposal console's
 * "Execute — destroys records" button has been rendering in the ordinary action blue, which is
 * the one thing that button must not look like. Warn rather than bad, deliberately — this is an
 * authorised operation somebody approved, not an error, and red here would cry wolf against the
 * genuine failures the same palette marks elsewhere.
 */
.btn.is-warn {
    background: var(--warn-fg);
    border-color: var(--warn-fg);
    color: #fff;
}
.btn.is-warn:hover { background: #96450A; border-color: #96450A; }

.sec-h { font-size: 17px; font-weight: 700; letter-spacing: -.2px; margin: 22px 0 10px; }

/* --------------------------------------------------------------------------
   Demo account picker (sign-in page, local environment only)

   Rendered only when `DemoAccounts::isAvailable()` — local environment, flag not
   switched off, and seeded accounts present. See `app/Support/DemoAccounts.php`
   for why all three are required.

   The list scrolls inside the card rather than growing it: a sign-in page that
   is three screens tall because of a convenience is a worse page than one with
   a scrolling panel in it.
   -------------------------------------------------------------------------- */

.demo-picker {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--divider);
}

.demo-picker > summary {
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.demo-picker > summary:hover { color: var(--text); }

.demo-list {
    margin-top: 12px;
    max-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.demo-group {
    margin: 10px 0 2px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.demo-group:first-child { margin-top: 0; }

.demo-row {
    display: block;
    width: 100%;
    text-align: left;
    padding: 7px 9px;
    border: 1px solid transparent;
    border-radius: 2px;
    background: none;
    font: inherit;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
}

.demo-row:hover,
.demo-row:focus-visible {
    background: var(--page);
    border-color: var(--hairline);
}

.demo-row .sub { display: block; margin-top: 1px; }

/* --------------------------------------------------------------------------
   Demo second-factor hint (sign-in challenge and step-up, local only)

   Tinted rather than plain, because it is the one thing on those pages that
   would not exist on a real install and a reader should be able to see that at
   a glance. See resources/views/auth/_demo-code.blade.php.
   -------------------------------------------------------------------------- */

.demo-code {
    margin-top: 20px;
    padding: 14px 16px;
    background: var(--warn-tint);
    border: 1px solid var(--warn-tint-border);
    border-radius: 4px;
}

.demo-code-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--warn-fg);
    margin-bottom: 6px;
}

.demo-code-value {
    font-family: ui-monospace, monospace;
    font-size: 22px;
    letter-spacing: .14em;
    font-weight: 600;
    color: var(--text);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.demo-code-value:hover { color: var(--action); }


/* ---------------------------------------------------------------- the line */

/*
 * Five stages of one order's journey, left to right: buy, make, move, sell, book.
 *
 * The cards above answer "how big is the business". None of them answers "is work moving",
 * which is the question somebody opening this screen at 8am actually has. Each stage is a queue
 * between two hands, and a stage that will not empty is a hand that has stopped.
 *
 * Read left to right on a wide screen and top to bottom on a narrow one, which is why the
 * chevron between stages is drawn as a border rather than a glyph: a rotated arrow at a
 * breakpoint is a decoration that has to be maintained, and a border just moves.
 */
.line {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    border: 1px solid var(--hairline);
    border-radius: 4px;
    background: var(--surface);
    overflow: hidden;
}

.line .stage {
    padding: 14px 16px;
    border-left: 1px solid var(--divider);
    text-decoration: none;
    color: inherit;
    display: block;
    min-width: 0;
}
.line .stage:first-child { border-left: 0; }
.line .stage:hover { background: var(--action-tint); }

/* The stage's name, in the brand's display voice: uppercase, heavy, tracked open. */
.line .stage .s {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.line .stage .v {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.6px;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    margin-top: 4px;
}
.line .stage .v .unit {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--text-secondary);
    margin-left: 5px;
}

.line .stage .n { font-size: 11.5px; color: var(--text-secondary); margin-top: 3px; }

/*
 * `idle` and `ok` deliberately look the same — both are plain. The distinction between them
 * lives in the note underneath ("nothing on the road" against "on the road between branches"),
 * because it is a distinction a reader has to think about rather than glance at: zero transfers
 * is normal on a Tuesday morning and alarming the day after a dispatch run, and no dot on a
 * strip can know which day it is.
 */
.line .stage .v.is-warn { color: var(--warn-fg); }
.line .stage .v.is-bad { color: var(--bad-fg); }
.line .stage.is-warn { box-shadow: inset 0 3px 0 var(--warn-bar); }
.line .stage.is-bad { box-shadow: inset 0 3px 0 var(--bad-fg); }

/* ---------------------------------------------------------------- the queue */

/*
 * What is waiting on a person, gathered from four modules.
 *
 * Above the charts on purpose. The old dashboard put two charts between the reader and the one
 * list they could act on, so the only actionable thing on the page was the thing furthest down
 * it. A chart is for a question you have already decided to ask; a queue is for the ones that
 * have not waited for you.
 */
.queue { border: 1px solid var(--hairline); border-radius: 4px; background: var(--surface); overflow: hidden; }

.queue .row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 11px 16px;
    border-top: 1px solid var(--divider);
    text-decoration: none;
    color: inherit;
}
.queue .row:first-child { border-top: 0; }
.queue .row:hover { background: var(--action-tint); }

.queue .row .l { font-weight: 600; color: var(--text); }
.queue .row .d { font-size: 12px; color: var(--text-secondary); min-width: 0; }
.queue .row .a {
    margin-left: auto;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    white-space: nowrap;
}

/* The severity rule is the whole colour budget of this component. */
.queue .row.is-bad { box-shadow: inset 3px 0 0 var(--bad-fg); }
.queue .row.is-warn { box-shadow: inset 3px 0 0 var(--warn-bar); }

@media (max-width: 720px) {
    .queue .row { flex-wrap: wrap; }
    .queue .row .a { margin-left: 0; }
}