/* Cuvatrix — copper data, precisely resolved.
   Brand identity v1.0.0 (Cuvatrix_Brand_Identity_v1.0.0/BRAND_GUIDE.md): Deep Verdigris #143A35,
   Annealed Copper #D88952 as an accent only, Mineral White #F4F1E9 as the light surface;
   IBM Plex Sans 600 headings, 500 labels and controls, 400 body, tabular numerals for data. */

@font-face { font-family: "Plex Sans"; src: url("fonts/plex-sans-latin.woff2") format("woff2");
             font-weight: 100 700; font-style: normal; font-display: swap; }

:root {
    --ink: #1d2c29;
    --ink-2: #44534f;
    --ink-3: #61706c;            /* muted text: 4.6:1 on paper, AA (audit M21) */
    --paper: #f4f1e9;
    --surface: #ffffff;
    --surface-2: #faf8f3;
    --rule: #e0dbcf;
    --rule-strong: #c5bdad;
    --rail: #143a35;
    --rail-ink: #c9e0d9;
    --rail-dim: #8fb3aa;
    --rail-active: #0d2a26;
    --verdigris: #1d7a6b;
    --verdigris-deep: #135c50;
    --patina: #dcede8;
    --patina-2: #b5dccf;
    --copper: #96491e;            /* copper for figures and text: AA on white, paper and copper tint */
    --copper-accent: #d88952;     /* Annealed Copper: the brand accent, never body text */
    --copper-tint: #f5e6da;
    --amber: #8a5d00;
    --amber-tint: #fbf0d4;
    --amber-rule: #e6c46a;
    --oxide: #a3372a;
    --oxide-tint: #f8e2de;
    --radius-s: 6px;
    --radius-m: 10px;
    --font: "Plex Sans", "Segoe UI", system-ui, sans-serif;
    --font-cond: var(--font);
    --focus: 0 0 0 3px rgba(29, 122, 107, .35);
    color-scheme: light;
}

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

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

body {
    margin: 0;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--paper);
    font-variant-numeric: tabular-nums;
}

h1, h2, h3 { font-family: var(--font); font-weight: 600; color: var(--ink); letter-spacing: -.005em; }
h1 { font-size: 1.95rem; line-height: 1.15; margin: 0 0 .25rem; }
h2 { font-size: 1.3rem; line-height: 1.25; margin: 0 0 .6rem; }
h3 { font-size: 1.05rem; line-height: 1.3; margin: 1.1rem 0 .4rem; }
h1:focus { outline: none; }
p { margin: .4rem 0; }
a { color: var(--verdigris-deep); }
a:hover { color: var(--verdigris); }
code { font-family: Consolas, "Cascadia Mono", monospace; font-size: .86em; background: var(--surface-2);
       border: 1px solid var(--rule); border-radius: 3px; padding: 0 .25em; }

:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius-s); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── shell: verdigris rail + content ─────────────────────────────────────── */

.shell { display: grid; grid-template-columns: 15rem minmax(0, 1fr); min-height: 100vh; }

.rail {
    background: var(--rail);
    color: var(--rail-ink);
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh;
    padding: 1.1rem .8rem 1rem;
}

.brand { display: block; padding: .1rem .5rem 1rem; line-height: 0; }
.brand img { height: 2.4rem; width: auto; }
.brand-tagline { display: block; margin-top: .45rem; color: var(--rail-dim); font-size: .74rem; line-height: 1.3; }

.rail nav { display: flex; flex-direction: column; gap: .9rem; margin-top: .4rem; }
/* The work, then the owner's Admin group under its label, then What's New (owner, 2026-10-18). */
.nav-group { display: flex; flex-direction: column; gap: .15rem; }
.nav-group-admin { padding-top: .75rem; border-top: 1px solid rgba(255, 255, 255, .09); }
.nav-label { padding: 0 .6rem .25rem; color: var(--rail-dim); font-size: .76rem; font-weight: 500; letter-spacing: .02em; }
.rail nav a {
    display: flex; align-items: center; gap: .65rem;
    color: var(--rail-ink); text-decoration: none;
    padding: .5rem .6rem; border-radius: var(--radius-s);
    font-size: .95rem;
}
.rail nav a svg { width: 1.1rem; height: 1.1rem; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7;
                  stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.rail nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.rail nav a.active { background: var(--rail-active); color: #fff; box-shadow: inset 3px 0 0 var(--copper-accent); }
.rail .nav-gap { height: .7rem; }

.rail-foot { margin-top: auto; padding: .8rem .4rem 0; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .85rem; }
.rail-foot .who { display: flex; align-items: center; gap: .5rem; color: #fff; }
.rail-foot .role { color: var(--rail-dim); font-size: .78rem; }
.rail-foot form { margin: .5rem 0 0; }
.rail-foot button, .rail-foot a.rail-link {
    background: none; border: 1px solid rgba(255, 255, 255, .22); color: var(--rail-ink);
    border-radius: var(--radius-s); padding: .3rem .65rem; font: inherit; font-size: .82rem; cursor: pointer;
    text-decoration: none; display: inline-block;
}
.rail-foot button:hover, .rail-foot a.rail-link:hover { border-color: rgba(255, 255, 255, .5); color: #fff; }
.rail-version { display: block; margin-top: .7rem; color: var(--rail-dim); font-size: .75rem; text-decoration: none; }
.rail-version:hover { color: #fff; text-decoration: underline; }

.online { margin-bottom: .8rem; }
.online-title { color: var(--rail-dim); font-size: .78rem; margin-bottom: .3rem; }
.online-person { display: flex; gap: .45rem; align-items: baseline; margin: .25rem 0; color: var(--rail-ink); line-height: 1.3; }
.online-person .dot { width: .5rem; height: .5rem; border-radius: 50%; background: #5fd0b3; flex: none; transform: translateY(-1px); }
.online-person .where { color: var(--rail-dim); font-size: .78rem; display: block; }
.online-person.editing .dot { background: #f0b56f; }

.avatar {
    width: 1.8rem; height: 1.8rem; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    background: var(--patina-2); color: var(--rail); font-family: var(--font-cond); font-weight: 600; font-size: .8rem;
}

.content { padding: 1.6rem 2.2rem 4rem; max-width: 84rem; width: 100%; }

@media (max-width: 900px) {
    .shell { grid-template-columns: minmax(0, 1fr); }
    .rail { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .4rem;
            padding: .6rem 1rem; }
    .brand { padding: 0; }
    .brand img { height: auto; width: 7.5rem; min-width: 120px; }   /* the guide's 120 px minimum (audit M23) */
    .brand-tagline { display: none; }
    .rail nav { flex-direction: row; gap: .15rem; overflow-x: auto; overflow-y: hidden; margin: 0; width: 100%; order: 3; }
    .rail nav a { white-space: nowrap; padding: .4rem .55rem; }
    .nav-group { display: contents; }
    .nav-label { display: none; }
    .rail .nav-gap { display: none; }
    .rail-foot { margin: 0 0 0 auto; border: 0; padding: 0; display: flex; align-items: center; gap: .5rem; }
    .rail-foot .online, .rail-foot .role, .rail-version { display: none; }
    .rail-foot form { margin: 0; }
    .content { padding: 1.1rem 1rem 3rem; }
}

/* ── page header ─────────────────────────────────────────────────────────── */

.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem;
             margin-bottom: 1.4rem; }
.page-head .lede { color: var(--ink-2); margin: .2rem 0 0; max-width: 46rem; }
.page-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.crumb { font-size: .85rem; margin-bottom: .3rem; }
.crumb a { text-decoration: none; }

/* ── panels (the old .card) ─────────────────────────────────────────────── */

.card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius-m);
    padding: 1.1rem 1.25rem;
    margin-bottom: 1rem;
}
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.card.attention { border-color: var(--amber-rule); background: var(--amber-tint); }
.card.danger-zone { border-color: #e2b2aa; }
.card.health.starved { border-color: var(--oxide); background: var(--oxide-tint); }
.card.health.slow { border-color: var(--amber-rule); background: var(--amber-tint); }
.card.flat { background: transparent; border: 0; padding: 0; }

.section { margin: 2rem 0 1rem; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
                border-bottom: 1px solid var(--rule); padding-bottom: .4rem; margin-bottom: .9rem; }
.section-head h2 { margin: 0; }
.section-head p { margin: 0; color: var(--ink-3); font-size: .9rem; }

.muted { color: var(--ink-3); font-size: .88rem; }
.warn { color: var(--amber); }
.error-text { color: var(--oxide); }
.ok-text { color: var(--verdigris-deep); }
.hint { color: var(--oxide); font-size: .82rem; }

.notice { display: flex; gap: .7rem; align-items: flex-start; border-radius: var(--radius-m); padding: .75rem 1rem;
          margin: 0 0 1rem; border: 1px solid var(--rule); background: var(--surface); }
.notice.info { background: var(--patina); border-color: var(--patina-2); }
.notice.warn { background: var(--amber-tint); border-color: var(--amber-rule); color: var(--ink); }
.notice.bad { background: var(--oxide-tint); border-color: #e2b2aa; color: var(--ink); }
.notice b { font-weight: 600; }
.notice p { margin: .15rem 0; }

/* ── buttons ─────────────────────────────────────────────────────────────── */

button { font: inherit; }
button.action, a.button, .action {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    background: var(--verdigris); color: #fff;
    border: 1px solid var(--verdigris); border-radius: var(--radius-s);
    padding: .5rem 1rem; font-size: .93rem; font-weight: 500; line-height: 1.2;
    cursor: pointer; text-decoration: none; white-space: nowrap;
}
button.action:hover, a.button:hover { background: var(--verdigris-deep); border-color: var(--verdigris-deep); color: #fff; }
button.action:disabled { background: #a9c4bd; border-color: #a9c4bd; cursor: not-allowed; }
button.action.secondary, a.button.secondary { background: var(--surface); color: var(--verdigris-deep); border-color: var(--rule-strong); }
button.action.secondary:hover, a.button.secondary:hover { background: var(--patina); border-color: var(--verdigris); color: var(--verdigris-deep); }
button.action.secondary:disabled { background: var(--surface-2); color: var(--ink-3); border-color: var(--rule); }
button.action.danger, button.danger { background: var(--oxide); border-color: var(--oxide); color: #fff; }
button.action.danger:hover { background: #87291f; border-color: #87291f; }
button.action.small, a.button.small { padding: .3rem .65rem; font-size: .85rem; }
button.link { background: none; border: 0; padding: 0; cursor: pointer; color: var(--verdigris-deep);
              text-decoration: underline; text-underline-offset: 2px; font-size: .88rem; }
button.link.danger { color: var(--oxide); background: none; }

/* ── status chips (the old .badge) ──────────────────────────────────────── */

.badge, .chip {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .12rem .5rem; border-radius: var(--radius-s);
    font-size: .8rem; font-weight: 500; line-height: 1.4; white-space: nowrap;
    background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--rule);
}
.badge.ok, .chip.ok { background: var(--patina); color: var(--verdigris-deep); border-color: var(--patina-2); }
.badge.bad, .chip.bad { background: var(--oxide-tint); color: var(--oxide); border-color: #ebc0b8; }
.badge.wait, .chip.wait { background: var(--amber-tint); color: var(--amber); border-color: var(--amber-rule); }
.chip.copper { background: var(--copper-tint); color: var(--copper); border-color: #e8c4a8; }
.chip .dot { width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
/* A chip after a name or another chip in a table cell (Test, what-if, given grouping) keeps its distance. */
td > a + .chip, td > .chip + .chip { margin-left: .4rem; }

/* ── tables ──────────────────────────────────────────────────────────────── */

table.grid { border-collapse: collapse; width: 100%; background: var(--surface); font-size: .92rem; }
table.grid th, table.grid td { border-bottom: 1px solid var(--rule); padding: .55rem .7rem; text-align: left; vertical-align: top; }
table.grid th { font-family: var(--font-cond); font-weight: 600; font-size: .88rem; color: var(--ink-2);
                background: var(--surface-2); border-bottom-color: var(--rule-strong); }
table.grid tbody tr:hover td { background: #fafbf9; }
table.grid.compact th, table.grid.compact td { padding: .35rem .5rem; }
table.num-table td { white-space: nowrap; }
td.num, th.num { text-align: right; }
table.grid td.num, table.grid th.num { text-align: right; } /* beats table.grid td's left */
/* Column headers that sort the table (the Runs page). */
table.grid th button.sort { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; white-space: nowrap; }
table.grid th button.sort:hover { color: var(--verdigris-deep); text-decoration: underline; text-underline-offset: 3px; }
table.grid th[aria-sort] button.sort { color: var(--verdigris-deep); }
.filters .runs-search { flex: 1 1 18rem; max-width: 28rem; }
/* The LME page: the months beside the chosen month's days (stacked on a phone). */
.lme-layout { display: grid; grid-template-columns: minmax(16rem, 24rem) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.lme-layout .card { margin: 0; }
.lme-months tr.on td { background: var(--patina); }
.lme-update { margin: -.4rem 0 1rem; }
.lme-average { font-weight: 500; margin: 0 0 .6rem; }
.lme-fill .check { display: flex; gap: .45rem; align-items: center; margin-top: .55rem; font-weight: 500; }
.run-lme { margin: .3rem 0 0; }
.runs-show { margin: 0 0 1rem; }
/* A run's invoices: headers wrap, cells are tight, and the final amount stays in view even when the
   table scrolls sideways. */
table.invoices th { white-space: normal; vertical-align: bottom; }
table.invoices th, table.invoices td { padding: .35rem .45rem; }
table.invoices td.line { white-space: normal; min-width: 6.5rem; }
table.invoices th:last-child, table.invoices td:last-child { position: sticky; right: 0; background: var(--surface);
                                                             box-shadow: -1px 0 0 var(--rule); }
.table-wrap { overflow-x: auto; overflow-y: hidden; border: 1px solid var(--rule); border-radius: var(--radius-m); background: var(--surface); }
.table-wrap table.grid tr:last-child td { border-bottom: 0; }

/* ── forms ───────────────────────────────────────────────────────────────── */

/* Every kind of text box looks the same (a forgotten type gets the browser's plain box). */
input:not([type]), input[type=text], input[type=email], input[type=password], input[type=number], input[type=date],
input[type=time], input[type=search], input[type=url], input[type=tel],
select, textarea {
    font: inherit; font-size: .93rem; color: var(--ink);
    padding: .45rem .6rem; border: 1px solid var(--rule-strong); border-radius: var(--radius-s);
    background: var(--surface);
}
select { max-width: 100%; } /* a list with long choices stays inside its card */
.row-actions > label { max-width: 100%; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--verdigris); box-shadow: var(--focus); }
input:disabled, select:disabled { background: var(--surface-2); color: var(--ink-3); }
input.num { width: 7.5rem; padding: .35rem .5rem; text-align: right; }
input.num.cell { width: 4.8rem; }
.field { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; color: var(--ink-2); }
.field > span.help { font-size: .8rem; color: var(--ink-3); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .8rem 1.2rem; align-items: start; }
.form-grid label, .card > label { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; color: var(--ink-2); }
label.check { flex-direction: row !important; align-items: flex-start; gap: .55rem; margin: .45rem 0; font-size: .93rem; color: var(--ink); }
label.check input { margin-top: .25rem; accent-color: var(--verdigris); width: 1rem; height: 1rem; flex: none; }
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--verdigris); }
.invalid { outline: 1px solid var(--oxide); }
.validation-message { color: var(--oxide); font-size: .85rem; }

/* ── figures ─────────────────────────────────────────────────────────────── */

.kpis { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: .9rem; }
.kpi { display: flex; flex-direction: column; min-width: 10rem; padding: .7rem .95rem; border: 1px solid var(--rule);
       border-radius: var(--radius-m); background: var(--surface); }
.kpi span { font-size: .82rem; color: var(--ink-3); }
.kpi b { font-family: var(--font-cond); font-weight: 600; font-size: 1.35rem; line-height: 1.2; }
.kpi.final { border-color: var(--copper); background: var(--copper-tint); }
.kpi.final b { color: var(--copper); }
.money { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── client editor (kept class names) ───────────────────────────────────── */

.save-bar {
    position: sticky; top: 0; z-index: 5;
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
    background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-m);
    padding: .6rem .9rem; margin: 0 0 1rem;
}
.save-bar.dirty { border-color: var(--amber-rule); background: var(--amber-tint); }
.editor-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
@media (min-width: 1250px) { .editor-layout { grid-template-columns: minmax(0, 1fr) 22rem; } }
.editor-side { min-width: 0; }
@media (min-width: 1250px) { .editor-side { position: sticky; top: 4.2rem; align-self: start; max-height: calc(100vh - 5rem); overflow-y: auto; } }

/* ── price matrix editor: all of it at once (owner, 2026-10-11) ─────────────
   While the matrix is open the page drops its width limit and the unsaved changes move below it.
   The grid gets its number of LME columns and grade rows from the page (--lme-cols, --grade-rows)
   and sizes its text from them: every column side by side in the width, every row on one screen,
   between 12 and 15 px. Past the smallest size it scrolls sideways with the grades pinned.
   "Full screen" gives it the whole window. */
.content:has(.editor-layout.matrix-open) { max-width: none; }
.editor-layout.matrix-open { grid-template-columns: minmax(0, 1fr); }
.editor-layout.matrix-open .editor-side {
    position: static; max-height: none; overflow: visible;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1rem; align-items: start;
}
.matrix-tools { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: .7rem 0 .45rem; }
.matrix-tools b { margin-right: .6rem; }
.matrix-wrap { container-type: inline-size; overflow-x: auto; overflow-y: hidden; max-width: 100%;
               border: 1px solid var(--rule); border-radius: var(--radius-m); background: var(--surface); }
table.grid.matrix.fit {
    /* Measured in a browser: a row is 2em, the head 6.2em; the fixed columns 15.2em, an LME column at least 4.8em. */
    --fit-width: calc(100cqi / (15.2 + 4.8 * var(--lme-cols, 4)));
    --fit-height: calc((100svh - var(--matrix-chrome, 7rem)) / (6.2 + 2 * var(--grade-rows, 8)));
    font-size: clamp(12px, min(var(--fit-width), var(--fit-height)), 15px);
    table-layout: fixed; width: 100%;
    min-width: calc(15.2em + 4.8em * var(--lme-cols, 4));
    max-width: calc(15.2em + 8em * var(--lme-cols, 4));
}
table.grid.matrix col.c-grade { width: 9.2em; }
table.grid.matrix col.c-acid { width: 4.2em; }
table.grid.matrix col.c-remove { width: 1.8em; }
table.grid.matrix th, table.grid.matrix td { padding: .1em .25em; white-space: nowrap; vertical-align: middle; }
table.grid.matrix th { font-size: 1em; white-space: normal; vertical-align: bottom; line-height: 1.2; }
table.grid.matrix th.matrix-label { font-size: .85em; }
table.grid.matrix input.num { width: 100%; min-width: 0; padding: .2em .35em; font: inherit; line-height: 1.2; text-align: right; }
table.grid.matrix input[type=number] { -moz-appearance: textfield; appearance: textfield; }
table.grid.matrix input[type=number]::-webkit-outer-spin-button,
table.grid.matrix input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
table.grid.matrix td.row-head { position: sticky; left: 0; z-index: 1; background: var(--surface-2); }
table.grid.matrix th.row-head { position: sticky; left: 0; z-index: 2; }
table.grid.matrix td.row-head input.num { width: 4.4em; }
table.grid.matrix td.row-head .up-to { font-size: .8em; color: var(--ink-3); margin-left: .3em; }
.lme-range.stacked { display: grid; gap: .1em; }
.lme-range.stacked span { font-size: .78em; font-weight: 400; color: var(--ink-3); text-align: center; line-height: 1; }
button.matrix-remove { background: none; border: 0; border-radius: var(--radius-s); padding: .1em .35em; cursor: pointer;
                       font: inherit; font-size: 1.1em; line-height: 1; color: var(--ink-3); }
button.matrix-remove:hover, button.matrix-remove:focus-visible { color: var(--oxide); background: var(--oxide-tint); }
th.lme-head button.matrix-remove { display: block; margin: .15em auto 0; }
td.remove-cell { text-align: center; }
.matrix-editor.full {
    position: fixed; inset: 0; z-index: 60; overflow: auto;
    background: var(--paper); padding: .4rem 1.2rem .8rem; --matrix-chrome: 3.6rem;
}
.matrix-editor.full .matrix-tools { margin: 0 0 .3rem; }
.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .6rem 0 .2rem; }
.period-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0; }
.period-tabs .tab { border: 1px solid var(--rule-strong); background: var(--surface); border-radius: var(--radius-s);
                    padding: .3rem .75rem; cursor: pointer; color: var(--ink-2); }
.period-tabs .tab.active { background: var(--verdigris); color: #fff; border-color: var(--verdigris); }
ul.terms, ul.side-list { margin: .3rem 0; padding-left: 1.1rem; }
ul.terms li, ul.side-list li { margin: .3rem 0; font-size: .92rem; }
pre.rules { white-space: pre-wrap; background: var(--surface-2); border: 1px solid var(--rule); padding: .8rem;
            border-radius: var(--radius-s); font-size: .85rem; }
details { margin: .4rem 0; }
details > summary { cursor: pointer; color: var(--verdigris-deep); }

/* ── tabs ────────────────────────────────────────────────────────────────── */

.tabs { display: flex; gap: .2rem; border-bottom: 1px solid var(--rule-strong); margin: 0 0 1.3rem; overflow-x: auto; overflow-y: hidden; }
.tabs button, .tabs a {
    background: none; border: 0; border-bottom: 3px solid transparent;
    padding: .55rem .9rem; margin-bottom: -1px; cursor: pointer;
    color: var(--ink-2); font-size: .95rem; white-space: nowrap; text-decoration: none;
}
.tabs button:hover, .tabs a:hover { color: var(--ink); }
.tabs button.active, .tabs a.active { color: var(--verdigris-deep); border-bottom-color: var(--verdigris); font-weight: 500; }
.tabs .count { display: inline-block; min-width: 1.3rem; padding: 0 .3rem; margin-left: .3rem; border-radius: 9px;
               background: var(--amber-tint); color: var(--amber); font-size: .76rem; text-align: center; }

/* ── progress ────────────────────────────────────────────────────────────── */

.meter { height: .45rem; background: var(--surface-2); border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; }
.meter > i { display: block; height: 100%; background: var(--verdigris); }

/* ── auth pages ──────────────────────────────────────────────────────────── */

.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); }
.auth-art {
    background: var(--rail); color: var(--rail-ink); padding: 3rem 3.5rem;
    display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; position: relative;
}
.auth-art h1 { color: #fff; font-size: 2.5rem; max-width: 18ch; margin: 2.2rem 0 .8rem; }
.auth-art p { max-width: 42ch; color: var(--rail-ink); }
.auth-logo { width: 8.5rem; height: auto; }
.auth-version { color: var(--rail-dim); font-size: .85rem; position: relative; z-index: 1; }
.auth-panel { background: var(--surface); padding: 3rem 2.6rem; display: flex; flex-direction: column; justify-content: center; }
.auth-panel h2 { font-size: 1.6rem; margin-bottom: .3rem; }
.auth-panel form { display: flex; flex-direction: column; gap: .9rem; margin-top: 1.2rem; }
.auth-panel .field input { width: 100%; padding: .6rem .7rem; font-size: 1rem; }
.auth-panel button.action { width: 100%; padding: .7rem 1rem; font-size: 1rem; }
.auth-panel .error-box { background: var(--oxide-tint); border: 1px solid #e2b2aa; color: var(--oxide);
                         border-radius: var(--radius-s); padding: .55rem .75rem; font-size: .9rem; }
.code-input { font-family: var(--font-cond) !important; font-size: 1.6rem !important; letter-spacing: .35em;
              text-align: center; }
.qr { display: block; width: 13rem; height: 13rem; image-rendering: pixelated; border: 1px solid var(--rule);
      border-radius: var(--radius-s); background: #fff; padding: .4rem; }
.secret { font-family: Consolas, "Cascadia Mono", monospace; font-size: .95rem; letter-spacing: .06em;
          background: var(--surface-2); border: 1px solid var(--rule); border-radius: var(--radius-s); padding: .45rem .6rem;
          word-break: break-all; }
.recovery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem .9rem; margin: .6rem 0;
            font-family: Consolas, "Cascadia Mono", monospace; font-size: 1rem; }
.recovery-tools { margin: .2rem 0 1.2rem; }
.auth-panel .recovery-tools button.action { width: auto; padding: .3rem .65rem; font-size: .85rem; }
.print-only { display: none; }
.auth-panel label.check { margin: 0; font-size: .9rem; color: var(--ink-2); }
.auth-panel .notice { margin: 1rem 0 0; }
.remembered-note { margin-top: 1.2rem; font-size: .88rem; }
.steps-small { color: var(--ink-3); font-size: .85rem; }

/* Matrix motif on the sign-in art: a faint grade × LME grid. */
.matrix-motif { position: absolute; right: -2rem; bottom: -2rem; display: grid; grid-template-columns: repeat(8, 2.6rem);
                gap: 3px; opacity: .55; transform: rotate(-8deg); }
.matrix-motif i { height: 1.4rem; border-radius: 3px; background: #2a6e63; }

@media (max-width: 900px) {
    .auth { grid-template-columns: minmax(0, 1fr); }
    .auth-art { padding: 1.5rem 1.4rem; }
    .auth-art h1 { font-size: 1.7rem; margin-top: 1rem; }
    /* The intro paragraph only: the version (a paragraph of its own) stays. */
    .auth-art > div > p, .matrix-motif { display: none; }
    .auth-panel { padding: 1.8rem 1.4rem 3rem; justify-content: flex-start; }
}

/* ── blazor plumbing ─────────────────────────────────────────────────────── */

/* Shown by the app's script only when a page really fails. */
#blazor-error-ui { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
                   padding: .7rem 3rem .7rem 1.2rem; background: var(--oxide-tint); color: var(--oxide);
                   border-top: 1px solid #e2b2aa; box-shadow: 0 -2px 10px rgba(29, 44, 41, .12); }
#blazor-error-ui .reload { margin-left: .4rem; font-weight: 600; color: var(--oxide); }
#blazor-error-ui .dismiss { position: absolute; right: 1rem; top: .65rem; cursor: pointer; }
.blazor-error-boundary { background: var(--oxide); padding: 1rem 1rem 1rem 1.2rem; color: white; border-radius: var(--radius-m); }
.blazor-error-boundary::after { content: "Something went wrong on this part of the page. Reload to try again."; }

/* ── settings, filters, row menus ────────────────────────────────────────── */

.settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; }
.settings-grid .card { margin: 0; }
.settings-grid h3 { margin-top: 0; }
.inline-form { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.inline-form input { flex: 1 1 12rem; }
.filters { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0 0 1.2rem; }
.filters .field { min-width: 13rem; }
.filters .audit-search { flex: 1 1 100%; max-width: 40rem; }
.remembered-devices li { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem;
                         padding: .35rem 0; border-bottom: 1px solid var(--rule); }
.remembered-devices li:last-child { border-bottom: 0; }
.quick-days { margin: -.4rem 0 1rem; }
.audit-counts { font-size: 1.02rem; font-weight: 500; margin: 0 0 1rem; }
.audit-cut { margin: -.6rem 0 1rem; padding: .5rem .8rem; border-left: 3px solid var(--copper-accent);
             background: var(--copper-tint); color: var(--copper); font-weight: 500; }
details.row-menu { position: relative; }
details.row-menu > summary { list-style: none; cursor: pointer; color: var(--verdigris-deep); font-size: .9rem; }
details.row-menu > summary::-webkit-details-marker { display: none; }
details.row-menu > summary::after { content: " ▾"; font-size: .75rem; }
.row-menu-body { position: absolute; right: 0; z-index: 10; display: flex; flex-direction: column; gap: .45rem;
                 align-items: flex-start; min-width: 16rem; padding: .7rem .85rem; background: var(--surface);
                 border: 1px solid var(--rule-strong); border-radius: var(--radius-m); box-shadow: 0 6px 18px rgba(20, 58, 53, .12); }
/* In a table (a box that may scroll sideways) the menu opens inside its row, never cut off. */
.table-wrap .row-menu-body { position: static; margin-top: .4rem; }

/* ── activity ────────────────────────────────────────────────────────────── */

.activity-day h3 { font-size: .95rem; color: var(--ink-2); margin: 1.2rem 0 .5rem; }
.activity-day ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--rule); }
.activity-item { display: flex; gap: .7rem; align-items: flex-start; padding: .45rem 0 .55rem .9rem; position: relative; }
.activity-item .avatar { width: 1.7rem; height: 1.7rem; font-size: .72rem; background: var(--patina); color: var(--verdigris-deep); margin-left: -1.85rem; border: 2px solid var(--paper); }
.activity-body { min-width: 0; flex: 1; }
.activity-body p { margin: 0; }
.activity-body time { margin-left: .4rem; }
.activity-body details { margin-top: .35rem; }
table.changes td.before { color: var(--ink-3); text-decoration: line-through; text-decoration-color: rgba(107, 122, 118, .5); }
table.changes td.after { color: var(--ink); font-weight: 500; }

/* ── overview (owner, 2026-10-18: "modern and creative, with icons and cards") ──
   The latest result leads on the rail's verdigris over a faint matrix grid; beside it this month's LME as a line;
   under them the clients' readiness as a ring and who is in the app. */

.overview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: stretch;
                 grid-template-areas: "latest latest lme" "clients clients now"; }
@media (max-width: 1150px) { .overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr));
                                              grid-template-areas: "latest latest" "lme clients" "now now"; } }
@media (max-width: 700px) { .overview-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "latest" "lme" "clients" "now"; } }
.overview-grid .card { margin: 0; display: flex; flex-direction: column; gap: .35rem; }
.overview-grid .card > .button, .overview-grid .card > a.button { align-self: flex-start; margin-top: auto; }
.tile-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .35rem; }
.tile-head h2 { margin: 0; font-size: 1.05rem; }
.tile-icon { width: 2.1rem; height: 2.1rem; flex: none; display: grid; place-items: center; border-radius: 9px;
             background: var(--patina); color: var(--verdigris-deep); }
.tile-icon svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.7;
                 stroke-linecap: round; stroke-linejoin: round; }
.tile-link { margin-top: auto; padding-top: .3rem; font-size: .88rem; }

.overview-latest { grid-area: latest; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .3rem;
                   padding: 1.35rem 1.6rem 1.2rem; border-radius: 14px; color: var(--rail-ink);
                   background: radial-gradient(120% 140% at 100% 0%, #1f5a50 0%, var(--rail) 55%, #0f2e2a 100%); }
.overview-latest::before { content: ""; position: absolute; inset: 0; pointer-events: none;
                           background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
                                             linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
                           background-size: 26px 26px;
                           -webkit-mask-image: linear-gradient(105deg, transparent 35%, #000 100%);
                           mask-image: linear-gradient(105deg, transparent 35%, #000 100%); }
.overview-latest > * { position: relative; }
.overview-latest h2 { color: #fff; }
.overview-latest .tile-icon { background: rgba(255, 255, 255, .09); color: var(--copper-accent); }
.figure { font-family: var(--font-cond); font-weight: 600; font-size: 2.6rem; line-height: 1.05; color: var(--copper); margin: .2rem 0 0; }
.overview-latest .figure { font-size: clamp(2.4rem, 5vw, 3.4rem); color: #f2b98d; letter-spacing: -.01em; }
.latest-what { margin: 0; color: #fff; }
.latest-what span { color: var(--rail-dim); margin-left: .3rem; }
.latest-note, .latest-empty { margin: 0; color: var(--rail-dim); font-size: .9rem; }
.value-list { list-style: none; padding: 0; margin: .5rem 0; display: flex; flex-direction: column; gap: .3rem; }
.value-list li { padding-left: 1.1rem; position: relative; font-size: .92rem; }
.value-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: .5rem; height: .5rem; border-radius: 1px; background: var(--verdigris); }
.overview-latest .value-list li::before { background: var(--copper-accent); }
.overview-latest .value-list b { color: #fff; }
.latest-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem;
               margin-top: auto; padding-top: .8rem; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .88rem; color: var(--rail-dim); }
.overview-latest a.button { background: var(--copper-accent); border-color: var(--copper-accent); color: #2a1a0e; }
.overview-latest a.button:hover { background: #e7a175; border-color: #e7a175; color: #2a1a0e; }

.overview-lme { grid-area: lme; }
.lme-month { margin: 0; color: var(--ink-2); font-weight: 500; }
.lme-figure { margin: 0; font-size: 2.1rem; font-weight: 600; line-height: 1.1; color: var(--ink); }
.spark { display: block; width: 100%; height: 3.2rem; margin: .45rem 0 .2rem; overflow: visible; }
.spark polyline { fill: none; stroke: var(--copper-accent); stroke-width: 2.2; vector-effect: non-scaling-stroke;
                  stroke-linejoin: round; stroke-linecap: round; }

.overview-clients { grid-area: clients; }
.overview-now { grid-area: now; }
.clients-at-a-glance { display: flex; align-items: center; flex-wrap: wrap; gap: 1.4rem; margin: .2rem 0 .3rem; }
.overview-clients .ready-ring { width: 6.4rem; height: 6.4rem; }
.overview-clients .ready-ring circle { stroke-width: 3.4; }
.overview-clients .ring-text b { font-size: 1.75rem; }
.attention-list { list-style: none; padding: 0; margin: .1rem 0 0; display: grid; gap: .35rem 1.2rem; font-size: .92rem;
                  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.swatch.ready { background: var(--verdigris); }
.swatch.confirm { background: #d9a73a; }
.swatch.blocked { background: var(--oxide); }
.legend { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .2rem; font-size: .92rem; }

/* A ring of how much is done ("0/13" inside): a client's checklist, the clients ready. The circle's length is 100. */
.ready-ring { position: relative; display: inline-grid; place-items: center; width: 3.4rem; height: 3.4rem; flex: none;
              --ring: #d9a73a; }
.ready-ring.ok { --ring: var(--verdigris); }
.ready-ring.bad { --ring: var(--oxide); }
.ready-ring.off { --ring: var(--rule-strong); }
.ready-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ready-ring circle { fill: none; stroke-width: 3.6; }
.ready-ring .track { stroke: #ece7dc; }
.ready-ring .done { stroke: var(--ring); stroke-linecap: round; }
.ring-text { position: relative; font-size: .74rem; line-height: 1; color: var(--ink-3); white-space: nowrap; }
.ring-text b { font-size: .98rem; font-weight: 600; color: var(--ink); }

/* A price matrix as a heat map: from patina (the lowest payable) to bright copper (the highest). */
.matrix-print { display: block; width: 100%; height: 100%; }
.matrix-print .cell { stroke: var(--surface); stroke-width: 1; vector-effect: non-scaling-stroke; }
.matrix-print .l0 { fill: #e4f0eb; }
.matrix-print .l1 { fill: #b3dacd; }
.matrix-print .l2 { fill: #63ab98; }
.matrix-print .l3 { fill: #ecc29f; }
.matrix-print .l4 { fill: #df9a66; }
.matrix-print .l5 { fill: #bf6530; }
.matrix-print .unset { fill: #f1ede4; }
.matrix-print.empty { display: grid; place-items: center; padding: .3rem; text-align: center; font-size: .7rem; line-height: 1.2;
                      color: var(--ink-3); border: 1px dashed var(--rule-strong); border-radius: inherit; }
.swatch { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; margin-right: .45rem; }
.plain-list { list-style: none; padding: 0; margin: .2rem 0; display: flex; flex-direction: column; gap: .35rem; font-size: .93rem; }
.now-run { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
h2 .step, h3 .step { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; margin-right: .45rem;
                     border-radius: 50%; background: var(--patina); color: var(--verdigris-deep); font-size: .95rem; vertical-align: .1em; }

/* ── clients list ────────────────────────────────────────────────────────── */

.list-tools { align-items: center; justify-content: space-between; }
.list-tools input[type=search] { flex: 1 1 16rem; max-width: 24rem; }
.segmented { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: var(--radius-s); overflow: hidden; background: var(--surface); }
.segmented button { border: 0; border-right: 1px solid var(--rule); background: none; padding: .4rem .8rem; cursor: pointer; color: var(--ink-2); font-size: .9rem; }
.segmented button:last-child { border-right: 0; }
.segmented button span { color: var(--ink-3); margin-left: .25rem; }
.segmented button.on { background: var(--patina); color: var(--verdigris-deep); font-weight: 500; }
/* Each client is a card (owner, 2026-10-18): its matrix picture, name and status, its checklist ring, its terms
   with their icons; under them, who changed it last and its switch, on a row of their own. A thin line on top
   says the client's state: ready (verdigris), to confirm (amber), blocked (oxide), switched off (grey). */
.client-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem;
                grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); }
.client-card { --state: #d9a73a; position: relative; display: flex; flex-direction: column; overflow: hidden;
               background: var(--surface); border: 1px solid var(--rule); border-radius: 12px;
               transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.client-card.ok { --state: var(--verdigris); }
.client-card.bad { --state: var(--oxide); }
.client-card.off { --state: var(--rule-strong); }
.client-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--state); }
.client-card:hover { border-color: var(--patina-2); box-shadow: 0 12px 26px -16px rgba(20, 58, 53, .45); transform: translateY(-1px); }
.client-row { flex: 1 1 auto; display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) auto;
              grid-template-areas: "print head ring" "facts facts facts"; gap: .85rem 1rem; align-items: center;
              padding: 1.15rem 1.15rem .95rem; text-decoration: none; color: var(--ink); }
.client-row:hover { color: var(--ink); }
.client-row:hover .client-name { color: var(--verdigris-deep); }
.client-print { grid-area: print; display: block; width: 4.6rem; height: 4.6rem; overflow: hidden; border-radius: 10px;
                background: var(--surface-2); box-shadow: 0 0 0 1px rgba(20, 58, 53, .1); }
.client-head { grid-area: head; display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; min-width: 0; }
.client-name { font-family: var(--font-cond); font-weight: 600; font-size: 1.14rem; line-height: 1.2; overflow-wrap: anywhere; }
.client-status { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; max-width: 100%; }
.client-status .chip { white-space: normal; } /* a long status wraps instead of running into the ring */
.client-row .ready-ring { grid-area: ring; }
.client-facts { grid-area: facts; list-style: none; margin: 0; padding: .8rem 0 0; border-top: 1px dashed var(--rule);
                display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem .9rem; font-size: .86rem; color: var(--ink-2); }
.client-facts li { display: flex; align-items: flex-start; gap: .45rem; min-width: 0; line-height: 1.3; }
.client-facts li:first-child { grid-column: 1 / -1; } /* the matrix, the longest term, on a line of its own */
.fact-icon { width: 1rem; height: 1rem; flex: none; margin-top: .05rem; fill: none; stroke: var(--verdigris); stroke-width: 1.4;
             stroke-linecap: round; stroke-linejoin: round; }
.client-foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .55rem .8rem .55rem 1.15rem;
               background: var(--surface-2); border-top: 1px solid var(--rule); font-size: .84rem; color: var(--ink-3); }
.client-meta { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.avatar.small { width: 1.45rem; height: 1.45rem; font-size: .64rem; background: var(--patina); color: var(--verdigris-deep); }
.client-switch { flex: none; display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; cursor: pointer;
                 background: none; border: 1px solid transparent; border-radius: 999px; color: var(--ink-2); font-size: .82rem; white-space: nowrap; }
.client-switch svg { width: .9rem; height: .9rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.client-switch:hover { background: var(--surface); border-color: var(--rule-strong); color: var(--oxide); }
.client-card.off .client-switch:hover { color: var(--verdigris-deep); }
.client-card.off .client-print, .client-card.off .client-facts { filter: grayscale(1); opacity: .55; }
@media (max-width: 420px) { .client-facts { grid-template-columns: minmax(0, 1fr); } }
.empty-state { text-align: left; padding: 2rem 1.6rem; border-style: dashed; }
.empty-state p { max-width: 46rem; color: var(--ink-2); }
.import-panel { border-color: var(--patina-2); }

/* ── client page ─────────────────────────────────────────────────────────── */

/* The auditor's review page (owner, 2026-10-19): the brand bar, then the client's settings to mark, one card each. */
.review-shell { min-height: 100vh; background: var(--paper); }
.review-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1.4rem;
              background: var(--rail); color: var(--rail-ink); font-size: .92rem; }
.review-top img { height: 2rem; width: auto; }
.review-main { max-width: 62rem; margin: 0 auto; padding: 1.6rem 1.4rem 4rem; }
.review-head .lede { color: var(--ink-2); max-width: 46rem; }
.review-note { margin-top: 1rem; }
.review-chart { margin: 0 0 1rem; }
.review-chart img { display: block; max-width: 100%; height: auto; border: 1px solid var(--rule); border-radius: var(--radius-m); background: var(--surface); }
.review-item { margin: 0 0 1rem; border-radius: 12px; }
.review-item legend { padding: 0 .4rem; font-weight: 600; font-size: 1.02rem; }
.review-item table.grid th { width: 40%; }
.review-answer { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: .6rem 1.2rem; align-items: center; margin-top: .7rem;
                 padding-top: .7rem; border-top: 1px dashed var(--rule); }
.review-answer .field { grid-column: 1 / -1; }
.review-answer textarea, .review-answer input[type=text], .review-main textarea { width: 100%; }
.review-buttons { position: sticky; bottom: 0; padding: .8rem 0; background: var(--paper); border-top: 1px solid var(--rule); }

/* The client page's review links (owner, 2026-10-19). */
.review-make { margin-bottom: .8rem; }
.review-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.review-links li { padding: .75rem 1rem; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; }
.review-line { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.review-url { flex: 1 1 22rem; min-width: 0; font-size: .85rem; }
.review-marks { margin-top: .5rem; }

/* The client's chart as received (owner, 2026-10-19): the pictures as cards, then the upload. */
.chart-list { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: 1rem;
              grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.chart-list li { display: flex; flex-direction: column; overflow: hidden; background: var(--surface);
                 border: 1px solid var(--rule); border-radius: 12px; }
.chart-list a { display: block; background: var(--surface-2); border-bottom: 1px solid var(--rule); }
.chart-list img { display: block; width: 100%; height: 13rem; object-fit: contain; }
.chart-meta { display: flex; flex-direction: column; gap: .2rem; padding: .6rem .8rem; font-size: .88rem; overflow-wrap: anywhere; }
.chart-meta button.link { align-self: flex-start; }
.chart-add { display: inline-flex; flex-direction: column; gap: .35rem; font-size: .9rem; color: var(--ink-2); max-width: 100%; }

.overview-split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 1050px) { .overview-split { grid-template-columns: minmax(0, 1fr); } }
.contract-words h3 { font-size: .98rem; color: var(--verdigris-deep); margin: 1rem 0 .2rem; }
.contract-words h3:first-of-type { margin-top: .4rem; }
.contract-words ul.terms { max-width: 70ch; }
.section-help { color: var(--ink-2); margin: -.2rem 0 .9rem; max-width: 68ch; }
.editor-with-index { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.section-index { display: flex; flex-direction: column; gap: .15rem; position: sticky; top: 4.5rem; }
.section-index button { text-align: left; background: none; border: 0; border-left: 3px solid transparent; padding: .45rem .7rem;
                        cursor: pointer; color: var(--ink-2); font-size: .93rem; border-radius: 0 var(--radius-s) var(--radius-s) 0; }
.section-index button:hover { background: var(--surface); color: var(--ink); }
.section-index button.on { border-left-color: var(--verdigris); background: var(--surface); color: var(--verdigris-deep); font-weight: 500; }
.section-index .count { display: inline-block; min-width: 1.2rem; margin-left: .3rem; padding: 0 .3rem; border-radius: 9px; background: var(--amber-tint);
                        color: var(--amber); font-size: .74rem; text-align: center; }
@media (max-width: 900px) {
    .editor-with-index { grid-template-columns: minmax(0, 1fr); }
    .section-index { position: static; flex-direction: row; overflow-x: auto; overflow-y: hidden; }
    .section-index button { border-left: 0; border-bottom: 3px solid transparent; white-space: nowrap; }
    .section-index button.on { border-bottom-color: var(--verdigris); }
    /* Long statuses wrap instead of pushing the page sideways. */
    .badge, .chip { white-space: normal; }
    table.checks { table-layout: fixed; }
    table.checks th { width: 34%; }
    table.checks td { overflow-wrap: anywhere; }
    /* Filter buttons wrap onto a second row, each on one line; the 1px gaps draw the dividers. */
    .segmented { display: flex; flex-wrap: wrap; gap: 1px; background: var(--rule); }
    .segmented button { flex: 1 1 auto; border-right: 0; background: var(--surface); white-space: nowrap; }
    .lme-layout { grid-template-columns: minmax(0, 1fr); }
}
.presence-line { display: flex; align-items: center; gap: .45rem; margin: -.4rem 0 .8rem; }
.dot-live { width: .5rem; height: .5rem; border-radius: 50%; background: #3fbf9b; display: inline-block; }
.checklist-intro { max-width: 60rem; }
.checklist-intro .field { max-width: 32rem; margin-top: .6rem; }
.checklist { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-m); }
.checklist-item { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 1rem; padding: .85rem 1.1rem; align-items: start; }
.checklist-item + .checklist-item { border-top: 1px solid var(--rule); }
.checklist-item.done { background: #fbfcfa; }
.checklist-text p { margin: .2rem 0 0; color: var(--ink-2); font-size: .92rem; white-space: pre-line; }
.checklist-state { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }
.inline-field { flex-direction: row !important; align-items: center; gap: .5rem; margin-top: .4rem; font-size: .88rem; }
@media (max-width: 700px) { .checklist-item { grid-template-columns: minmax(0, 1fr); } }

/* ── price matrix, read-only ─────────────────────────────────────────────── */

.heat-wrap { overflow-x: auto; overflow-y: hidden; border: 1px solid var(--rule); border-radius: var(--radius-m); background: var(--surface); }
/* The matrix fills its box (owner, 2026-10-19: it used a third of the card); the grade labels stay tight and each
   payable sits in the middle of its cell. On a phone the cells keep their minimum and the box scrolls sideways. */
table.heat { width: 100%; border-collapse: separate; border-spacing: 2px; font-size: .86rem; padding: .3rem; }
table.heat tbody th { width: 1%; }
table.heat th { font-family: var(--font-cond); font-weight: 600; color: var(--ink-2); padding: .25rem .5rem; text-align: right; white-space: nowrap; }
table.heat thead th { text-align: center; vertical-align: bottom; }
table.heat th span { display: block; font-family: var(--font); font-weight: 400; font-size: .74rem; color: var(--ink-3); }
table.heat th.corner { text-align: left; }
table.heat td { min-width: 4.4rem; padding: .3rem .5rem; text-align: center; border-radius: 3px; font-variant-numeric: tabular-nums; }

/* ── runs and backups ────────────────────────────────────────────────────── */

.job-card { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.job-state { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .35rem 0; }
.job-state .elapsed { font-family: var(--font-cond); font-size: 1.2rem; }
.job-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.restore-box { display: flex; flex-direction: column; gap: .2rem; min-width: 20rem; padding: .5rem .7rem;
               background: var(--amber-tint); border: 1px solid var(--amber-rule); border-radius: var(--radius-m); }
.release h2 { font-size: 1.15rem; }

/* ── printing recovery codes ─────────────────────────────────────────────── */

@media print {
    body * { visibility: hidden; }
    .recovery-sheet, .recovery-sheet * { visibility: visible; }
    .recovery-sheet { position: absolute; top: 0; left: 0; width: 100%; padding: 1.5cm; }
    .recovery-sheet .print-only { display: block; margin-bottom: .6cm; }
    .recovery-sheet .recovery { font-size: 14pt; gap: .3cm 1cm; }
}