/*
 * IDEAL GROUP LMS — "Harmony" theme layer (prototype, 2 Nov 2026). Loaded after app.css; remove the one <link> in
 * partials/head.blade.php to return to the previous look. Presentation only: no markup contract, route or figure changes.
 *
 * Colour system (docs/development/46): the brand green #199A7B sits at hue 171° in OKLCH. Accents are placed on a hue wheel
 * around it: lagoon 209°, blue 251°, violet 306°, coral 26°, amber 76°. Neutrals are tinted toward 241° at chroma 0.006 so
 * the greys belong to the family. The navigation slate (257°) is the blue neighbour of the brand. Every text pair is
 * checked (42/42, WCAG); the five chart fills are checked for colour-blind separation.
 *   - brand #199A7B ............. logo mark, selected-item marker, tints only
 *   - action #13765F ............ the one primary button per area, selection, positive state
 *   - slate #1E2836 ............. navigation and the inverse surfaces (toast, tooltip)
 *   - blue #285F9A / #235B94 .... links, information, time
 *   - ochre #8A5A00 ............. attention and due soon
 *   - coral #B3342B ............. error, risk, past due
 *   - violet #6A4690 ............ people, and the synthetic-data marker
 *   - lagoon #0A6573 ............ secondary data
 */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/ibm-plex/ibm-plex-sans-latin-700-normal.woff2") format("woff2"); }

:root {
  --font: "IBM Plex Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Brand and action */
  --brand: #199a7b;
  --brand-strong: #13765f;
  --brand-deep: #0e5846;
  --brand-tint-1: #f1f5f8;          /* cool neutral: row and menu hover (was a green tint) */
  --brand-tint-2: #e1f3ec;
  --brand-tint-3: #c6e5db;
  --brand-glow: rgba(44, 109, 176, 0.22);
  --focus: #2c6db0;
  --link: #235b94;
  --link-hover: #174a77;

  /* Navigation slate */
  --brand-night: #1e2836;
  --brand-night-2: #283446;
  --nav-selected: #2e3b4f;
  --nav-mark: #5bd6b0;
  --on-night: #e6ebf1;
  --on-night-muted: #a9b6c6;

  /* Neutrals, tinted toward the brand family */
  --bg: #f3f6f8;
  --surface: #ffffff;
  --surface-2: #f8fafb;
  --surface-3: #ebeff3;
  --ink: #151c22;
  --ink-2: #27323c;
  --ink-muted: #46535f;
  --ink-faint: #56636f;
  --line: rgba(21, 28, 34, 0.09);
  --line-strong: rgba(21, 28, 34, 0.18);
  --field: #78858f;

  /* Status: fixed meaning, always paired with a word and an icon or dot */
  --success: #12795c;  --success-tint: #e3f5ee;
  --warning: #8a5a00;  --warning-tint: #fff1cc;
  --danger: #b3342b;   --danger-tint: #fde9e6;
  --info: #285f9a;     --info-tint: #e4eef9;
  --held: #8a5a00;     --held-tint: #fff1cc;

  /* Data identity: text-safe tones and their tints */
  --hue-sky: #285f9a;     --hue-sky-tint: #e4eef9;
  --hue-amber: #7a5200;   --hue-amber-tint: #fff1cc;
  --hue-rose: #a63a33;    --hue-rose-tint: #fdebe8;
  --hue-violet: #6a4690;  --hue-violet-tint: #f1ecf8;
  --hue-lagoon: #0a6573;  --hue-lagoon-tint: #e0f2f4;
  /* Chart and swatch fills: validated together for colour-blind separation (green, blue, ochre, violet, coral) */
  --fill-green: #1d9c7d; --fill-blue: #3572af; --fill-ochre: #996a15; --fill-violet: #7f5ca1; --fill-coral: #ca564f; --fill-lagoon: #1c909f;

  /* Shape and depth: restrained; shadows are ink, never green */
  --r-control: 8px;
  --r-card: 12px;
  --shadow-1: 0 1px 2px rgba(21, 28, 34, 0.06), 0 0 0 1px rgba(21, 28, 34, 0.02);
  --shadow-2: 0 8px 24px -8px rgba(21, 28, 34, 0.18), 0 2px 6px rgba(21, 28, 34, 0.06);
  --shadow-3: 0 24px 60px -16px rgba(21, 28, 34, 0.34);
  --ring: 0 0 0 3px var(--brand-glow);
  --nav-width: 256px;
  --topbar-h: 60px;
}

body { font-feature-settings: "tnum" 1; letter-spacing: 0; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 1.625rem; letter-spacing: -0.015em; }
a { color: var(--link); }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.money { font-weight: 600; letter-spacing: 0; }
.mono { letter-spacing: 0; }

/* ---------- Environment banner: a quiet strip, not a shout ---------- */
.env-banner { font-weight: 500; letter-spacing: 0; padding: 5px var(--s-4); border-bottom-color: rgba(138, 90, 0, 0.18); }

/* ---------- Navigation slate ---------- */
.shell { background: none; }
@media (min-width: 961px) { .shell { background: linear-gradient(90deg, var(--brand-night) 0, var(--brand-night) var(--nav-width), transparent var(--nav-width)); } }
.nav { padding: var(--s-4) var(--s-3) var(--s-3); gap: var(--s-3); scrollbar-color: rgba(255, 255, 255, 0.18) transparent; }
.wordmark { letter-spacing: 0; }
.wordmark__mark { background: var(--brand); border-radius: 9px; box-shadow: none; font-size: 0.8125rem; }
.nav .wordmark { padding: 0 var(--s-2); }
.nav__group { gap: 0; }
.nav__heading {
  display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 0; padding: var(--s-3) var(--s-3) var(--s-1);
  background: none; border: 0; font: inherit; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--on-night-muted); text-align: left; cursor: default;
}
.nav__heading .icon { width: 14px; height: 14px; opacity: 0; transition: transform var(--dur-ui) var(--ease-out), opacity var(--dur-micro) var(--ease-out); }
.js .nav__heading { cursor: pointer; border-radius: 6px; }
.js .nav__heading .icon { opacity: 0.7; }
.js .nav__heading:hover { color: #fff; }
.nav__group.is-collapsed .nav__heading .icon { transform: rotate(-90deg); }
.js .nav__group.is-collapsed .nav__list { display: none; }
.nav__list { gap: 1px; }
.nav__link { min-height: 38px; border-radius: 6px; padding: 0 var(--s-3); font-weight: 500; color: var(--on-night); }
.nav__link .icon { width: 18px; height: 18px; color: var(--on-night-muted); }
.nav__link:hover { background: var(--brand-night-2); }
.nav__link[aria-current="page"] { background: var(--nav-selected); box-shadow: none; font-weight: 600; }
.nav__link[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--nav-mark); }
.nav__link[aria-current="page"] .icon { color: var(--nav-mark); }
.nav__link:focus-visible, .nav__heading:focus-visible { outline: 2px solid var(--nav-mark); outline-offset: -2px; }
.nav__foot { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.07); border-radius: 10px; }
.avatar { background: var(--brand-night-2); color: #fff; border: 1px solid rgba(255, 255, 255, 0.12); }
.avatar--light { background: var(--brand-tint-2); color: var(--brand-deep); border: 0; }
.nav-scrim { background: rgba(21, 28, 34, 0.5) !important; }
body.nav-collapsed .nav__heading { font-size: 0; height: 1px; padding: 0; margin: var(--s-2) var(--s-2); background: rgba(255, 255, 255, 0.1); }
body.nav-collapsed .nav__heading .icon { display: none; }
.js body.nav-collapsed .nav__group.is-collapsed .nav__list { display: grid; }
body.nav-collapsed .nav__link[aria-current="page"]::before { left: -4px; }

/* ---------- Top bar ---------- */
.topbar { background: var(--surface); border-bottom: 1px solid var(--line); backdrop-filter: none; padding: 0 var(--s-6); }
@supports (backdrop-filter: blur(8px)) { .topbar { background: var(--surface); backdrop-filter: none; } }
.crumbs a:hover { color: var(--link); }
.topbar__chip { box-shadow: none; background: var(--surface-2); font-weight: 500; }

/* ---------- Page header ---------- */
.main { padding: var(--s-5) var(--s-6) var(--s-8); }
.page-head { align-items: flex-end; margin-bottom: var(--s-4); gap: var(--s-3) var(--s-5); }
.page-head__lead { font-size: 0.875rem; color: var(--ink-muted); max-width: 70ch; margin-top: 4px; }
.page-head__eyebrow { color: var(--ink-muted); font-weight: 500; }

/* ---------- Surfaces ---------- */
.panel { border-radius: var(--r-card); padding: var(--s-5); box-shadow: var(--shadow-1); }
.panel h2 { font-size: 1rem; font-weight: 600; }
.table-wrap { border-radius: var(--r-card); box-shadow: var(--shadow-1); }
.kv dt { color: var(--ink-muted); }
.kv dd { font-weight: 500; }

/* ---------- Status chips: sentence case, a dot and a word ---------- */
.badge { text-transform: none; font-size: 0.75rem; font-weight: 600; letter-spacing: 0; padding: 2px 10px 2px 8px; gap: 6px; border-radius: 999px; }
.badge--ok { color: var(--success); background: var(--success-tint); border-color: rgba(18, 121, 92, 0.16); }
.badge--held, .badge--provisional { color: var(--warning); }
.badge--held { background: var(--warning-tint); border-color: rgba(138, 90, 0, 0.18); }
.badge--danger { color: var(--danger); background: var(--danger-tint); border-color: rgba(179, 52, 43, 0.18); }
.badge--info { color: var(--info); background: var(--info-tint); border-color: rgba(40, 95, 154, 0.18); }
.badge--off { color: var(--ink-muted); background: var(--surface-3); border-color: transparent; }
.badge--violet { color: var(--hue-violet); background: var(--hue-violet-tint); border-color: rgba(106, 70, 144, 0.18); }
.badge--lagoon { color: var(--hue-lagoon); background: var(--hue-lagoon-tint); border-color: rgba(10, 101, 115, 0.18); }
.badge--blue { color: var(--hue-sky); background: var(--hue-sky-tint); border-color: rgba(40, 95, 154, 0.18); }
.badge--ochre { color: var(--hue-amber); background: var(--hue-amber-tint); border-color: rgba(138, 90, 0, 0.18); }
.badge--green { color: var(--success); background: var(--success-tint); border-color: rgba(18, 121, 92, 0.16); }

/* ---------- Tables ---------- */
.table th { font-size: 0.8125rem; font-weight: 600; color: var(--ink); text-align: left; padding: 10px 12px; }
.table thead th { font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); background: var(--surface-2); }
.table td { padding: 12px; }
.table tbody th[scope="row"] { font-weight: 550; }
.table tbody tr:hover { background: var(--brand-tint-1); }
.table td a { color: var(--link); font-weight: 600; }
.th-sort__link { padding: 10px 12px; }
.th-sort__link .icon { opacity: 0.55; }
.th-sort[aria-sort="ascending"] .icon, .th-sort[aria-sort="descending"] .icon, .th-sort__link:hover .icon { color: var(--ink); }
/* A quiet status channel on the row's leading edge */
.table .row > :first-child { box-shadow: inset 3px 0 0 var(--stripe, transparent); }
.row--ok { --stripe: var(--fill-green); }
.row--due { --stripe: var(--fill-ochre); }
.row--late { --stripe: var(--fill-coral); }
.row--off { --stripe: #b7c0c9; }
.table .nowrap, .table td.nowrap { white-space: nowrap; }
.table .ident { display: grid; gap: 2px; min-width: 0; }
.table .ident__title { font-weight: 600; color: var(--link); text-decoration: none; }
.table .ident__meta { color: var(--ink-faint); font-size: 0.75rem; }
.pager__link.is-current { background: var(--brand-night); border-color: var(--brand-night); }
a.pager__link:hover { background: var(--brand-tint-1); border-color: var(--line-strong); }

/* ---------- Forms and buttons ---------- */
.input, .select { border-color: var(--field); border-radius: var(--r-control); }
.input:hover, .select:hover { border-color: #5b6874; }
.input:focus-visible, .select:focus-visible { border-color: var(--focus); box-shadow: var(--ring); }
.field label { font-weight: 600; }
.btn { border-radius: var(--r-control); font-weight: 600; }
.btn--primary { background: var(--brand-strong); box-shadow: 0 1px 2px rgba(21, 28, 34, 0.18); }
.btn--primary:hover { background: var(--brand-deep); box-shadow: 0 1px 2px rgba(21, 28, 34, 0.22); }
.btn--quiet { background: var(--surface); border-color: var(--field); box-shadow: none; }
.btn--quiet:hover { background: var(--brand-tint-1); border-color: #5b6874; }
.btn--ghost:hover { background: var(--surface-3); }
.btn--danger { border-color: rgba(179, 52, 43, 0.5); }
.btn--quiet.is-busy::after, .btn--danger.is-busy::after { border-top-color: var(--focus); }
.menu[open] > .menu__toggle { background: var(--surface-3); }
.menu__list { border-radius: 10px; }
.menu__item .icon { color: var(--ink-muted); }
.check input { accent-color: var(--brand-strong); }

/* ---------- Notices ---------- */
.notice { border-radius: 10px; }
.notice--info { color: var(--info); background: var(--info-tint); border-color: rgba(40, 95, 154, 0.18); }
.notice--ok { color: var(--success); background: var(--success-tint); border-color: rgba(18, 121, 92, 0.18); }
.notice--danger, .notice--error { color: var(--danger); background: var(--danger-tint); border-color: rgba(179, 52, 43, 0.2); }
.notice--held { color: var(--warning); background: var(--warning-tint); border-color: rgba(138, 90, 0, 0.2); }

/* ---------- Figure cards: white, one family colour on the top rule, nothing saturated ---------- */
.stat { overflow: hidden; border-radius: var(--r-card); }
.stat::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--rule, var(--line-strong)); }
.stat:has(.chip--brand) { --rule: var(--fill-green); }
.stat:has(.chip--sky) { --rule: var(--fill-blue); }
.stat:has(.chip--amber) { --rule: var(--fill-ochre); }
.stat:has(.chip--rose) { --rule: var(--fill-coral); }
.stat:has(.chip--violet) { --rule: var(--fill-violet); }
.stat__value { font-weight: 600; letter-spacing: -0.02em; }
.stat__chip { width: 34px; height: 34px; border-radius: 9px; }
.chip--brand { background: var(--success-tint); color: var(--success); }
a.stat:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.amount__value { font-weight: 600; letter-spacing: -0.025em; }
.amount__parts dd, .amount__part strong { font-weight: 600; }
.swatch--principal { background: var(--fill-green); }
.swatch--interest { background: var(--fill-blue); }
.swatch--penalty { background: var(--fill-ochre); }
.swatch--credit { background: var(--fill-violet); }
.dot { background: var(--fill-green); box-shadow: 0 0 0 4px var(--success-tint); }
.dot--denied { background: var(--fill-ochre); box-shadow: 0 0 0 4px var(--warning-tint); }
.dot--failed { background: var(--fill-coral); box-shadow: 0 0 0 4px var(--danger-tint); }
.timeline__item::before { border-color: var(--fill-green); }
.timeline__item--denied::before { border-color: var(--fill-ochre); }
.timeline__item--failed::before { border-color: var(--fill-coral); }
.bar--share span { background: var(--fill-blue); }

/* Greeting: a calm surface, not a green slab */
.hello { background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-1); border-radius: var(--r-card); padding: var(--s-5) var(--s-6); position: relative; }
.hello::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand); }
.hello h1 { color: var(--ink); font-size: 1.5rem; }
.hello p { color: var(--ink-muted); }
.hello__date { color: var(--ink-muted); }
.hello .badge--ok { background: var(--hue-violet-tint); color: var(--hue-violet); border-color: rgba(106, 70, 144, 0.2); }

/* ---------- Overlays ---------- */
.dialog { border-radius: 14px; }
.dialog::backdrop { background: rgba(21, 28, 34, 0.5); }
.dialog__icon { background: var(--brand-tint-2); color: var(--brand-strong); }
.dialog--danger .dialog__icon { background: var(--danger-tint); color: var(--danger); }
.dialog__actions { background: var(--surface-2); }
.drawer { background: rgba(21, 28, 34, 0.5); }
.toast { background: #232c38; border-radius: 10px; }
.toast .icon { color: var(--nav-mark); }

/* ---------- Tabs, segments ---------- */
.tabs__tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--brand-strong); }
.tabs__tab[aria-selected="true"] .tabs__count { background: var(--success-tint); color: var(--success); }
.segments__item[aria-current="page"] { background: var(--brand-night); border-color: var(--brand-night); }

/* ---------- Stages: the lifecycle of a list, each with its real count ---------- */
.stages { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-3); margin: 0 0 var(--s-3); padding: 0; list-style: none; }
.stage {
  position: relative; display: grid; gap: 2px; padding: 12px var(--s-4) 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  color: var(--ink); text-decoration: none; overflow: hidden; min-width: 0; box-shadow: var(--shadow-1);
  transition: border-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.stage::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--tone, var(--line-strong)); }
.stage:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); color: var(--ink); }
.stage__label { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 600; color: var(--ink-muted); }
.stage__count { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--ink); }
.stage__sub { font-size: 0.75rem; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage[aria-current="page"] { background: var(--surface); border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), var(--shadow-1); }
.stage[aria-current="page"] .stage__label { color: var(--ink); }
.stage--all { --tone: var(--field); }
.stage--ok { --tone: var(--fill-green); }
.stage--due { --tone: var(--fill-ochre); }
.stage--late { --tone: var(--fill-coral); }
.stage--off { --tone: #b7c0c9; }

/* ---------- Filter band: one tidy row ---------- */
.toolbar { border-radius: var(--r-card); padding: var(--s-3); gap: var(--s-3); align-items: flex-end; }
.toolbar__search { flex: 2 1 260px; }
.toolbar__field { flex: 1 1 140px; max-width: 200px; }
.toolbar__field label { font-weight: 600; color: var(--ink-muted); font-size: 0.6875rem; letter-spacing: 0.04em; text-transform: uppercase; }
.toolbar__actions { margin-left: auto; }
.toolbar__count { flex-basis: auto; margin-left: var(--s-2); align-self: center; padding-bottom: 6px; }
.toolbar__narrowed { color: var(--ink); }
.js .toolbar__actions .btn[type="submit"] { display: none; }   /* filters apply on change; the button stays for no-JavaScript */

/* ---------- Sign-in: calmer, narrower slate panel ---------- */
.auth { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.auth__aside { background: var(--brand-night); }
.auth__aside::after { content: ""; position: absolute; left: var(--s-7); bottom: 0; width: 56px; height: 3px; background: var(--nav-mark); }
.auth__statement { font-weight: 600; letter-spacing: -0.02em; }
.auth__figure { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); backdrop-filter: none; }
.auth__main { background: var(--bg); }
.auth__card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: var(--s-6); box-shadow: var(--shadow-1); }
@media (max-width: 960px) { .auth { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Charts ---------- */
.trend-chart__line { stroke: var(--fill-coral); }
.trend-chart__point { fill: var(--fill-coral); }
.trend-chart__point--to-date { stroke: var(--fill-coral); }
.column-chart__bar { fill: var(--fill-green); }

/* ---------- Touch targets on phones: 44 px ---------- */
@media (max-width: 720px) {
  .nav__link, .menu__item { min-height: 44px; }
  .btn, .btn--compact, .input, .select { min-height: 44px; }
  .menu__toggle, .btn--icon { width: 44px; min-height: 44px; }
  .stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .main { padding: var(--s-4) var(--s-4) var(--s-8); }
}
@media (max-width: 960px) { .nav { padding-top: var(--s-5); } }

/* ---------- Product and category tags: a squared chip, distinct from the round status pill ---------- */
.tag { display: inline-flex; align-items: center; font-size: 0.75rem; font-weight: 600; line-height: 1.4; padding: 1px 8px; border-radius: 6px; white-space: nowrap; }
.tag--green { color: var(--success); background: var(--success-tint); }
.tag--blue { color: var(--hue-sky); background: var(--hue-sky-tint); }
.tag--ochre { color: var(--hue-amber); background: var(--hue-amber-tint); }
.tag--violet { color: var(--hue-violet); background: var(--hue-violet-tint); }
.tag--lagoon { color: var(--hue-lagoon); background: var(--hue-lagoon-tint); }
.tag--off { color: var(--ink-muted); background: var(--surface-3); }

/* ======================= Round 2 (after the first rendered review) ======================= */

/* One line where the value is short: names, loan numbers and dates do not wrap on a desktop table; a phone card wraps them. */
.table .ident__title, .table .ident__name, .table .ident__meta, .table .tag { white-space: nowrap; }
.table .ident > span { min-width: 0; }
.figure { display: grid; justify-items: end; gap: 1px; }
.figure .ident__meta { font-size: 0.75rem; color: var(--ink-faint); }
@media (max-width: 720px) {
  .table .ident__title, .table .ident__name, .table .ident__meta { white-space: normal; }
  .figure { justify-items: start; }
}
.table--wide { min-width: 0; }

/* Stage cards: the current one is filled slate (shape and fill, not only colour); the rest are quiet */
.stage[aria-current="page"] { background: var(--brand-night); border-color: var(--brand-night); box-shadow: var(--shadow-2); }
.stage[aria-current="page"] .stage__label, .stage[aria-current="page"] .stage__count { color: #fff; }
.stage[aria-current="page"] .stage__sub { color: var(--on-night-muted); }
.stage[aria-current="page"]::before { background: var(--nav-mark); }
.stage:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Native selects get one consistent arrow (the policy allows a data: image) */
select.input, select.select {
  appearance: none; padding-right: 36px; background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2346535f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}

/* Grid children never get the stacked-panel margin: two panels in a row start on the same line */
.grid > .panel + .panel, .grid > .panel, .grid > * + * { margin-top: 0; }

/* Navigation: short enough to see whole */
.nav { gap: var(--s-2); }
.nav__heading { padding: 8px var(--s-3) 2px; }
.nav__link { min-height: 36px; }
.nav__foot { padding: var(--s-2) var(--s-3); gap: var(--s-2); }
.nav__actions .btn { min-height: 32px; }

/* Figures that are links: no heavy underline */
.stat__value a, .panel .stat__value a { text-decoration: none; color: inherit; }
.stat__value a:hover { text-decoration: underline; text-decoration-thickness: 1px; }

/* Charts: readable axis labels (the viewBox is 480 wide, close to the panel width) */
.column-chart .trend-chart__axis { font-size: 13px; }
.column-chart svg { max-height: 220px; }

/* Phone: every control 44 px, including the toolbar's own inputs */
@media (max-width: 720px) {
  .toolbar .input, .toolbar .btn { min-height: 44px; }
  .menu__toggle { width: 44px; min-height: 44px; }
}
/* ======================= Round 3 ======================= */

/* A grid track must be allowed to shrink below its table, or the whole page scrolls sideways (found at 1024 px) */
.register { grid-template-columns: minmax(0, 1fr); }
.table-wrap { min-width: 0; max-width: 100%; }

/* The meta line of a cell may wrap (a chip drops below its label) instead of running into the next column */
.table .ident__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; white-space: normal; }
.table .ident__meta .badge { white-space: nowrap; }
.figure .ident__meta { justify-content: flex-end; }

/* Compact sidebar footer, always visible: the list above it scrolls, the account block does not */
.nav { padding-bottom: 0; }
.nav__foot { position: sticky; bottom: 0; margin: 0 calc(var(--s-3) * -1); padding: var(--s-2) var(--s-3) var(--s-3); border: 0; border-top: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0; background: var(--brand-night); box-shadow: 0 -12px 12px -8px var(--brand-night); }
.nav__user { gap: var(--s-2); }
.nav__user-role { display: none; }
.nav__actions { grid-template-columns: 1fr 1fr; }

/* Page header copy: two lines, not three */
.page-head__lead { max-width: 92ch; }

/* Filter band: the row-count select is narrow */
.toolbar__field:has(#list-per-page) { flex: 0 0 96px; }

/* Charts: one colour per measure family (money out green, money in blue) */
.column-chart--blue .column-chart__bar { fill: var(--fill-blue); }

/* Tablet landscape (961 to 1180 px): the sidebar narrows so the content keeps room */
@media (min-width: 961px) and (max-width: 1180px) {
  :root { --nav-width: 224px; }
  .main { padding-left: var(--s-5); padding-right: var(--s-5); }
  .topbar { padding: 0 var(--s-5); }
  .stages { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); }
  .stage { padding: 10px var(--s-3); }
}

/* Phone: these come last so they win over the desktop rules above */
@media (max-width: 720px) {
  .nav__link, .menu__item, .nav__heading { min-height: 44px; }
  .nav__actions .btn { min-height: 44px; }
  .nav__foot { position: static; margin: 0; box-shadow: none; }
}
/* ======================= Round 4 ======================= */

/* The table panel is the containing block for the hidden labels inside it, so its overflow clips them: an absolutely
   positioned .visually-hidden label at the right end of a wide table otherwise widens the whole page (found at 1024 px). */
.table-wrap { position: relative; }

/* The wordmark never wraps; the sidebar footer and group headings keep their rhythm on a narrower sidebar */
.nav .wordmark, .nav .wordmark span { white-space: nowrap; }
.nav__top .wordmark { min-width: 0; }
.nav__top { gap: var(--s-1); }
@media (min-width: 961px) and (max-width: 1180px) { :root { --nav-width: 232px; } .wordmark__sub { font-size: 0.75rem; } }

/* Phone: inline links inside a card, row-menu items and the menu button reach 44 px */
@media (max-width: 720px) {
  .table td a.menu__item, .menu__item { min-height: 44px; }
  .table .ident__title { display: inline-flex; align-items: center; min-height: 44px; }
  .topbar .topbar__menu { min-width: 44px; }
  .table td .ident__name { display: inline-flex; align-items: center; min-height: 44px; }
}

/* The sidebar is as tall as the visible window, below the environment banner, so its footer is never pushed out of sight */
body:has(.env-banner) { --env-h: 30px; }
@media (min-width: 961px) { .nav { height: calc(100vh - var(--env-h, 0px)); } }
@media (max-width: 960px) { .nav { height: 100%; } }

/* Phone cards for the loans register: short facts sit in pairs, so a loan is about half as tall */
@media (max-width: 720px) {
  .table--loans tbody tr.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--s-3); padding: var(--s-3) var(--s-4); }
  .table--loans tbody tr.row > td { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: var(--s-2) 0; border: 0; align-content: start; }
  .table--loans tbody tr.row > td::before { font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase; }
  .table--loans tbody tr.row > td:nth-child(1), .table--loans tbody tr.row > td:nth-child(2), .table--loans tbody tr.row > td:nth-child(3) { grid-column: 1 / -1; }
  .table--loans tbody tr.row > td.table__actions { grid-column: 1 / -1; justify-content: flex-end; padding-top: 0; }
  .table--loans tbody tr.row > td.num, .figure { text-align: left; justify-items: start; }
  .table--loans tbody tr.row > td:nth-child(1) .ident, .table--loans tbody tr.row > td:nth-child(2) .ident { grid-template-columns: minmax(0, 1fr); }
}

/* Phone cards: the stripe belongs to the card, not to its first cell; the menu stays at the right */
@media (max-width: 720px) {
  .table--loans tbody tr.row { box-shadow: inset 3px 0 0 var(--stripe, transparent); padding-left: calc(var(--s-4) + 3px); }
  .table .row > :first-child { box-shadow: none; }
  .table--loans tbody tr.row > td.table__actions { display: flex; justify-content: flex-end; }
}

/* Phone: inline links get a 44 px tap area without changing how the text looks */
@media (max-width: 720px) {
  .wordmark { min-height: 44px; }
  .crumbs a, .notice a, .panel__note a, .list__title a, .table td a:not(.menu__item), .stat__value a, .page-head a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; }
  .crumbs { gap: var(--s-1); }
}

/* ======================= Round 5: the hotel system's layout and behaviour, in our colours ======================= */

/* ---- Page header: one white card with an icon tile, the title and the actions ---- */
.main > .page-head { flex-wrap: nowrap; align-items: center; gap: var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-1); padding: 14px var(--s-5); margin-bottom: var(--s-4); }
.main > .page-head > div:not(.page-head__actions) { flex: 1 1 auto; min-width: 0; }
.page-head__icon { flex: none; width: 46px; height: 46px; border-radius: 10px; display: inline-grid; place-items: center; background: var(--surface-3); color: var(--brand-night); }
.main > .page-head h1 { font-size: 1.3125rem; }
.main > .page-head .page-head__lead { margin-top: 2px; font-size: 0.8125rem; }
.main > .page-head .page-head__actions { flex: none; margin-left: auto; }
@media (max-width: 720px) {
  .main > .page-head { flex-wrap: wrap; padding: 12px var(--s-4); }
  .page-head__icon { width: 40px; height: 40px; }
  .main > .page-head > div:not(.page-head__actions) { flex-basis: calc(100% - 56px); }
}

/* ---- Stage bar: chevrons with a count, as a lifecycle (loans) and as filters (applications) ---- */
.stages { display: flex; gap: 0; grid-template-columns: none; margin-bottom: var(--s-3); }
.stages > li { flex: 1 1 0; min-width: 0; }
.stage {
  --notch: 16px; height: 52px; padding: 0 calc(var(--notch) + 8px) 0 calc(var(--notch) + 4px); border: 0; border-radius: 0; box-shadow: none; overflow: visible;
  display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center;
  background: var(--tone-tint, var(--surface-3)); color: var(--tone-ink, var(--ink)); font-weight: 600;
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, 0 100%, var(--notch) 50%);
  margin-left: calc(var(--notch) * -0.5);
}
.stages > li:first-child .stage { clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, 0 100%); padding-left: var(--s-4); border-radius: var(--r-card) 0 0 var(--r-card); margin-left: 0; }
.stages > li:last-child .stage { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--notch) 50%); }
.stage::before { display: none; }
.stage__label { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: inherit; }
.stage__count { font-size: 1.125rem; font-weight: 700; color: inherit; line-height: 1; }
.stage__sub { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* kept for assistive technology */
.stage--all { --tone-tint: #dde3ea; --tone-ink: var(--brand-night); --tone-solid: var(--brand-night); }
.stage--ok { --tone-tint: var(--success-tint); --tone-ink: #0b4f3b; --tone-solid: var(--success); }
.stage--due { --tone-tint: var(--warning-tint); --tone-ink: #5c3c00; --tone-solid: var(--warning); }
.stage--late { --tone-tint: var(--danger-tint); --tone-ink: #7c1d17; --tone-solid: var(--danger); }
.stage--off { --tone-tint: var(--surface-3); --tone-ink: var(--ink-2); --tone-solid: #5c6a76; }
.stage:hover { box-shadow: none; filter: brightness(0.97); color: var(--tone-ink); }
.stage[aria-current="page"] { background: var(--tone-solid); color: #fff; border: 0; box-shadow: none; }
.stage[aria-current="page"] .stage__label, .stage[aria-current="page"] .stage__count { color: #fff; }
.stage:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--focus); }
@media (max-width: 720px) { .stages { flex-wrap: wrap; gap: var(--s-2); } .stages > li { flex: 1 1 calc(50% - 8px); } .stage, .stages > li:first-child .stage, .stages > li:last-child .stage { clip-path: none; margin-left: 0; border-radius: var(--r-control); padding: 0 var(--s-3); } }
/* the application status segments use the same chevrons */
.segments { gap: 0; flex-wrap: nowrap; overflow-x: auto; }
.segments__item { border: 0; border-radius: 0; min-height: 44px; padding: 0 22px 0 28px; margin-left: -8px; background: var(--surface-3); color: var(--ink-2); font-weight: 600; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%); white-space: nowrap; }
.segments__item:first-child { margin-left: 0; padding-left: 16px; border-radius: var(--r-control) 0 0 var(--r-control); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); }
.segments__item:hover { background: #dde3ea; color: var(--ink); border: 0; }
.segments__item[aria-current="page"] { background: var(--brand-night); color: #fff; }

/* ---- Tables: the dark header row ---- */
.table thead th { background: var(--brand-night); color: #fff; border-bottom: 0; }
.table thead th .th-sort__link, .table thead th a { color: #fff !important; }
.table thead th .th-sort__link .icon { opacity: 0.7; color: #fff; }
.table thead th[aria-sort="ascending"], .table thead th[aria-sort="descending"] { color: #fff; }
.table thead th[aria-sort="ascending"] .icon, .table thead th[aria-sort="descending"] .icon, .table thead th .th-sort__link:hover .icon { color: var(--nav-mark); opacity: 1; }
.table thead th:first-child { border-top-left-radius: calc(var(--r-card) - 1px); }
.table thead th:last-child { border-top-right-radius: calc(var(--r-card) - 1px); }

/* ---- Figure tiles: an icon block on the left, the figure beside it ---- */
.stat:has(.stat__chip) { padding: 0; grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "chip label" "chip value" "chip sub"; column-gap: var(--s-4); row-gap: 0; align-items: start; }
.stat:has(.stat__chip)::before { display: none; }
.stat:has(.stat__chip) .stat__top { display: contents; }
.stat:has(.stat__chip) .stat__chip { grid-area: chip; width: auto; height: auto; align-self: stretch; border-radius: 0; background: var(--tile, var(--surface-3)); color: #fff; }
.stat:has(.stat__chip) .stat__chip .icon { width: 26px; height: 26px; }
.stat:has(.stat__chip) .stat__label { grid-area: label; padding: var(--s-3) var(--s-4) 0 0; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.6875rem; font-weight: 600; }
.stat:has(.stat__chip) .stat__value { grid-area: value; padding-right: var(--s-4); }
.stat:has(.stat__chip) .stat__sub { grid-area: sub; padding: 0 var(--s-4) var(--s-3) 0; }
.stat:has(.chip--brand) { --tile: var(--success); }
.stat:has(.chip--sky) { --tile: var(--info); }
.stat:has(.chip--amber) { --tile: var(--warning); }
.stat:has(.chip--rose) { --tile: var(--danger); }
.stat:has(.chip--violet) { --tile: var(--hue-violet); }
@media (max-width: 720px) { .stat:has(.stat__chip) { grid-template-columns: 52px minmax(0, 1fr); } }

/* ---- Forms: the full width of the page, in sections, as the hotel system does ---- */
.form { max-width: none; gap: var(--s-4); }
.panel.form { background: transparent; border: 0; box-shadow: none; padding: 0; }
.main .panel--narrow:has(form) { max-width: none; }
.form__section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-1); padding: var(--s-5) var(--s-5) var(--s-4); margin: 0; }
.form__section:last-of-type { border-bottom: 1px solid var(--line); padding-bottom: var(--s-4); }
.form__legend { width: 100%; padding-bottom: var(--s-3); margin-bottom: var(--s-4); border-bottom: 1px solid var(--line); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.form__help { text-transform: none; letter-spacing: 0; font-size: 0.8125rem; font-weight: 400; color: var(--ink-muted); margin-top: 2px; }
.form__grid, .form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--s-5); }
.form__grid .field:has(textarea), .form__grid .field--wide { grid-column: 1 / -1; }
@media (max-width: 1100px) { .form__grid, .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .form__grid, .form-grid { grid-template-columns: minmax(0, 1fr); } .form__section { padding: var(--s-4); } }
.field__hint, .field .hint { color: var(--ink-muted); font-size: 0.8125rem; }
.form__note { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-control); padding: var(--s-2) var(--s-4); }
.form > .form__actions, .panel.form > .form__actions {
  position: sticky; bottom: 0; z-index: 5; justify-content: flex-end; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: 0 -8px 16px -12px rgba(21, 28, 34, 0.25), var(--shadow-1); padding: var(--s-3) var(--s-4);
}

/* ---- Side panels become large dialogs with a dark title bar ---- */
.drawer { justify-content: center; align-items: flex-start; padding: 4vh var(--s-4); overflow-y: auto; }
.drawer__panel { width: min(1040px, 100%); height: auto; border-radius: var(--r-card); overflow: hidden; animation: dialog-pop var(--dur-panel) var(--ease-emph) both; box-shadow: var(--shadow-3); }
@keyframes dialog-pop { from { opacity: 0; transform: translateY(12px) scale(0.99); } to { opacity: 1; transform: none; } }
.drawer__head { background: var(--brand-night); color: #fff; border-bottom: 0; padding: var(--s-4) var(--s-5); align-items: center; }
.drawer__head h2 { color: #fff; font-size: 1.125rem; }
.drawer__head .panel__note { color: var(--on-night-muted); }
.drawer__head .btn--ghost { color: #fff; }
.drawer__head .btn--ghost:hover { background: var(--brand-night-2); }
.drawer__body { padding: var(--s-5); gap: var(--s-3); }
.drawer__body .form__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.drawer__body .form__actions { border-top: 1px solid var(--line); padding-top: var(--s-4); margin-top: var(--s-2); }
@media (max-width: 1100px) { .drawer__body .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .drawer { padding: 0; } .drawer__panel { width: 100%; min-height: 100%; border-radius: 0; } .drawer__body .form__grid { grid-template-columns: minmax(0, 1fr); } }
/* ======================= Round 6 ======================= */
/* A fieldset legend flows inside its card (browsers draw it on the border by default) */
.form__section { display: flow-root; }
.form__section > .form__legend { float: left; width: 100%; display: block; margin: 0 0 var(--s-4); padding: 0 0 var(--s-3); }
.form__section > .form__legend + * { clear: both; }
.form__legend .form__help { display: block; margin-top: 2px; }

/* Tile colours: clear fills from the validated chart set, not the dark text tones */
.stat:has(.chip--brand) { --tile: var(--fill-green); }
.stat:has(.chip--sky) { --tile: var(--fill-blue); }
.stat:has(.chip--amber) { --tile: #b57a0a; }
.stat:has(.chip--rose) { --tile: var(--fill-coral); }
.stat:has(.chip--violet) { --tile: var(--fill-violet); }
.stat:has(.stat__chip) .stat__value { padding-bottom: 2px; }
/* ======================= Round 7: density, stripes, login ======================= */
/* Owner: "imagine the browser zoom is on 90% and most components look so big". Desktop pointers get a ~10% tighter scale;
   touch devices keep 44px targets. */
@media (pointer: fine) {
  :root { --fs-ui: 0.8125rem; --fs-small: 0.75rem; --fs-h1: 1.375rem; --fs-figure-lg: 1.625rem; --fs-figure-xl: 2.25rem; }
  body { font-size: 0.875rem; }
  .btn { min-height: 34px; padding: 0 var(--s-4); }
  .btn--sm { min-height: 28px; }
  .input, .select, select.input { min-height: 34px; padding-top: 5px; padding-bottom: 5px; font-size: 0.8125rem; }
  textarea.input { min-height: 72px; }
  .toolbar .input, .toolbar .select { min-height: 34px; }
  .field > label, .field label { font-size: 0.8125rem; }
  .page-head, .page-head--card { padding: var(--s-3) var(--s-4); }
  .page-head h1 { font-size: 1.25rem; }
  .page-head__lead { font-size: 0.8125rem; }
  .panel { padding: var(--s-4); }
  .panel h2 { font-size: 0.9375rem; }
  .form__section { padding: var(--s-4); }
  .form__grid { gap: var(--s-3) var(--s-4); }
  .stat { min-height: 0; }
  .table th, .table td { padding: 8px var(--s-3); }
  .table--report th, .table--report td { padding: 6px var(--s-3); }
  .nav__link { min-height: 38px; font-size: 0.8125rem; }
  .stage { min-height: 40px; }
  .dialog__head, .modal__head { padding: var(--s-3) var(--s-4); }
}

/* Every table is striped and has the dark header, row headers included (report tables put <th> in the body) */
.table tbody tr:nth-child(even) > td, .table tbody tr:nth-child(even) > th { background: #f4f7f9; }
.table tbody tr:nth-child(odd) > td, .table tbody tr:nth-child(odd) > th { background: var(--surface); }
.table tbody tr:hover > td, .table tbody tr:hover > th { background: var(--brand-tint-2); }
.table tbody th { color: var(--ink); font-weight: 600; font-size: var(--fs-ui); letter-spacing: 0; text-transform: none; }
.table tfoot th, .table tfoot td { background: #e9eef2; color: var(--ink); font-weight: 700; border-top: 1px solid var(--line-strong); }
.table thead th, .table--report thead th { background: var(--brand-night); color: #fff; }
.table tbody tr.row--ok > td:first-child, .table tbody tr.row--due > td:first-child, .table tbody tr.row--late > td:first-child { background-clip: padding-box; }

/* The nav item you pressed stays visibly selected, and a group you opened stays highlighted while it is open */
.nav__heading[aria-expanded="true"] { color: #fff; }
.nav__link:active, .nav__link:focus { background: var(--nav-selected); }
.nav__link:focus:not(:focus-visible) { outline: none; }
.nav__link[aria-current="page"] { background: var(--nav-selected); }

/* Sign-in: one calm card, no sample figures */
.auth { background: var(--bg); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.auth__aside { background: linear-gradient(160deg, #1b2533 0%, #22314a 55%, #13765f 140%); padding: 48px 56px; justify-content: space-between; }
.auth__statement { font-size: 2rem; max-width: 18ch; }
.auth__points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.auth__points li { display: flex; gap: var(--s-3); align-items: flex-start; color: var(--on-night); font-size: 0.9375rem; }
.auth__points .icon { flex: none; width: 20px; height: 20px; color: var(--nav-mark); margin-top: 1px; }
.auth__main { background: var(--bg); }
.auth__card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 36px 36px 28px; box-shadow: 0 12px 40px rgba(21, 28, 34, 0.08); max-width: 420px; }
.auth__card h1 { font-size: 1.5rem; }
.auth__card .btn--block { min-height: 42px; margin-top: var(--s-3); }
.auth__links { margin-top: var(--s-4); display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-small); }
.input-wrap { position: relative; display: block; }
.input-wrap > .icon { position: absolute; left: 11px; top: 50%; translate: 0 -50%; width: 16px; height: 16px; color: var(--ink-faint); pointer-events: none; }
.input-wrap > .input { padding-left: 36px; }
@media (max-width: 860px) { .auth__aside { padding: 24px 20px; } .auth__points { display: none; } .auth__card { padding: 24px 20px; border-radius: 12px; } }

/* Pinned first column keeps the header, stripe and total colours */
.table--sticky > thead > tr > :first-child { background: var(--brand-night); color: #fff; }
.table--sticky > tfoot > tr > :first-child { background: #e9eef2; }
.table--sticky > tbody > tr:nth-child(even) > :first-child { background: #f4f7f9; }
.table--sticky > tbody > tr:nth-child(odd) > :first-child { background: var(--surface); }
.table--sticky > tbody > tr:hover > :first-child { background: var(--brand-tint-2); }

/* One-time sign-in details shown to staff after issuing portal access */
.credential { border: 1px solid var(--line-strong); border-left: 4px solid var(--brand); border-radius: var(--r-card); background: var(--surface-2); padding: var(--s-4); margin-bottom: var(--s-4); }
.credential__title { margin: 0 0 var(--s-3); font-weight: 650; }
.credential__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-3); margin: 0 0 var(--s-3); }
.credential__grid dt { font-size: var(--fs-label); color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.credential__grid dd { margin: 2px 0 0; font-size: 1rem; word-break: break-all; }
.credential__secret { font-size: 1.375rem !important; font-weight: 700; letter-spacing: 0.12em; }
@media print { .nav, .topbar, .tabs__tab { display: none; } }

/* Customer portal in the app shell */
.nav__heading--static { cursor: default; margin: 0; }
.nav__heading--static:hover { background: transparent; }
.notice__list { margin: 0; padding-left: 1.1em; }
.auth__card form + .notice, .auth__card .notice + form { margin-top: var(--s-4); }
.auth__card .notice { margin-bottom: var(--s-4); }

/* Website CMS and uploaded logo */
.wordmark__mark--img { object-fit: contain; background: #fff; border-radius: 10px; width: auto; max-width: 64px; height: 40px; padding: 3px; flex: none; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s-4); padding: var(--s-4); }
.media-card { border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s-4); display: grid; gap: var(--s-3); background: var(--surface); align-content: start; }
.media-card h3 { margin: 0; font-size: 0.9375rem; }
.media-card__preview { display: grid; place-items: center; min-height: 140px; max-height: 180px; background: repeating-conic-gradient(#eef2f5 0% 25%, #fff 0% 50%) 50% / 16px 16px; border-radius: 10px; border: 1px solid var(--line); overflow: hidden; }
.media-card__preview img { max-width: 100%; max-height: 176px; object-fit: contain; }
.media-card__none { color: var(--ink-muted); font-size: var(--fs-small); }
.form-stack { display: grid; gap: var(--s-3); }
.form__grid--one { grid-template-columns: minmax(0, 1fr); }
textarea.input { font-family: inherit; line-height: 1.5; }

/* Contract: text and the signature box (Draw / Type, as in e-signing tools) */
.contract-text { line-height: 1.7; }
.contract-text > * + * { margin-top: var(--s-3); }
.sign__tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--surface-3); margin-bottom: var(--s-3); }
.sign__tab { border: 0; background: transparent; padding: 6px 18px; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer; color: var(--ink-muted); min-height: 34px; }
.sign__tab[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.sign__pad-wrap { position: relative; border: 1.5px dashed var(--line-strong); border-radius: 12px; background: #fff; touch-action: none; }
.sign__pad { display: block; width: 100%; height: auto; aspect-ratio: 900 / 260; cursor: crosshair; border-radius: 12px; }
.sign__pad.is-typed { cursor: default; }
.sign__pad.is-empty { outline: 2px solid var(--danger); }
.sign__line { position: absolute; left: 6%; right: 6%; bottom: 26%; border-bottom: 1.5px solid #b8c2cb; pointer-events: none; }
.sign__x { position: absolute; left: 3%; bottom: 24%; color: #8a96a1; font-size: 1.25rem; pointer-events: none; }
.sign__row { display: flex; gap: var(--s-3); align-items: end; justify-content: space-between; margin: var(--s-3) 0; flex-wrap: wrap; }
.sign__typed { flex: 1 1 260px; }
.check { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--fs-ui); }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--brand-strong); }
.tpl-body summary { cursor: pointer; color: var(--link); font-size: var(--fs-small); margin-top: 4px; }
.tpl-body pre { white-space: pre-wrap; font-family: inherit; font-size: var(--fs-small); background: var(--surface-2); padding: var(--s-3); border-radius: 8px; max-width: 70ch; }

.sign__typed[hidden] { display: none; }

/* ======================= Round 8: glass ======================= */
/* Owner direction (3 Nov): "that glass-like look" across the whole system. A soft colour field sits behind frosted, translucent
   surfaces with a fine inner highlight and layered shadows. Text always sits on at least 70% white, so contrast is unchanged;
   with no backdrop-filter, or for people who ask for reduced transparency, every surface falls back to solid white. */
:root {
  --glass: rgba(255, 255, 255, 0.60);
  --glass-strong: rgba(255, 255, 255, 0.86);
  --glass-edge: rgba(255, 255, 255, 0.85);
  --glass-line: rgba(21, 28, 34, 0.07);
  --glass-blur: blur(18px) saturate(1.5);
  --glass-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 -1px 0 rgba(21, 28, 34, 0.03) inset, 0 1px 2px rgba(20, 40, 60, 0.05), 0 12px 36px rgba(20, 40, 60, 0.09);
  --glass-shadow-lift: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 2px 4px rgba(20, 40, 60, 0.06), 0 20px 48px rgba(20, 40, 60, 0.14);
}
body {
  background:
    radial-gradient(1200px 700px at 4% -6%, rgba(25, 154, 123, 0.34), transparent 64%),
    radial-gradient(1000px 650px at 104% 4%, rgba(53, 114, 175, 0.30), transparent 64%),
    radial-gradient(900px 640px at 72% 108%, rgba(127, 92, 161, 0.24), transparent 64%),
    radial-gradient(800px 560px at 0% 100%, rgba(28, 144, 159, 0.24), transparent 62%),
    #edf3f6;
  background-attachment: fixed;
}
.content { background: transparent; }
.topbar { background: rgba(255, 255, 255, 0.62); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-bottom: 1px solid var(--glass-edge); box-shadow: 0 8px 28px rgba(20, 40, 60, 0.05); }
.topbar__chip { background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); }

.panel, .page-head, .toolbar, .table-wrap, .stat, .stage, .form__section, .media-card, .credential, .dialog, .menu, .toast, .segments__item, .auth__card {
  background: var(--glass);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
}
.page-head { padding: var(--s-4) var(--s-5); border-radius: var(--r-card); }
.stat, .stage { transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out); }
.stat:hover, .stage:hover { transform: translateY(-2px); box-shadow: var(--glass-shadow-lift); }
.stage[aria-current="page"] { background: linear-gradient(150deg, rgba(30, 40, 54, 0.94), rgba(35, 52, 74, 0.92)); border-color: rgba(255, 255, 255, 0.18); }
.panel.form, .panel.form .form__section { background: transparent; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.panel.form .form__section { background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.panel > .panel, .panel .panel { background: rgba(255, 255, 255, 0.5); }

/* Tables: translucent stripes inside the frosted frame, a deep gradient head */
.table tbody tr:nth-child(odd) > td, .table tbody tr:nth-child(odd) > th { background: rgba(255, 255, 255, 0.52); }
.table tbody tr:nth-child(even) > td, .table tbody tr:nth-child(even) > th { background: rgba(231, 240, 246, 0.55); }
.table tbody tr:hover > td, .table tbody tr:hover > th { background: rgba(205, 235, 225, 0.75); }
.table tfoot th, .table tfoot td { background: rgba(214, 226, 235, 0.7); }
.table thead th, .table--report thead th { background: linear-gradient(180deg, #243247 0%, #1b2636 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset; }
.table--sticky > tbody > tr:nth-child(odd) > :first-child { background: rgba(250, 252, 253, 0.96); }
.table--sticky > tbody > tr:nth-child(even) > :first-child { background: rgba(236, 243, 248, 0.97); }
.table--sticky > thead > tr > :first-child { background: #243247; }
.table--sticky > tfoot > tr > :first-child { background: rgba(214, 226, 235, 0.98); }
.table td, .table th { border-bottom-color: rgba(21, 28, 34, 0.05); }

/* Navigation: a deep glass column with a soft highlight edge */
.nav { background: linear-gradient(185deg, #243247 0%, #1b2636 55%, #162030 100%); box-shadow: 1px 0 0 rgba(255, 255, 255, 0.05) inset, 12px 0 40px rgba(20, 40, 60, 0.18); }
.nav__link[aria-current="page"], .nav__link:active, .nav__link:focus { background: rgba(255, 255, 255, 0.10); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset; backdrop-filter: blur(6px); }
.nav__link:hover { background: rgba(255, 255, 255, 0.07); }
.nav__foot { background: rgba(22, 32, 48, 0.9); backdrop-filter: blur(10px); }

/* Controls */
.btn--primary { background: linear-gradient(180deg, #1aa183 0%, #13765f 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) inset, 0 8px 18px rgba(19, 118, 95, 0.28); }
.btn--primary:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 12px 24px rgba(19, 118, 95, 0.34); transform: translateY(-1px); }
.btn--quiet { background: rgba(255, 255, 255, 0.72); border-color: rgba(21, 28, 34, 0.14); backdrop-filter: blur(8px); }
.btn--quiet:hover { background: rgba(255, 255, 255, 0.95); }
.input, .select, select.input, textarea.input { background: rgba(255, 255, 255, 0.82); border-color: rgba(21, 28, 34, 0.16); box-shadow: 0 1px 2px rgba(20, 40, 60, 0.04) inset; }
.input:focus-visible, .select:focus-visible { background: #fff; }
.badge { backdrop-filter: blur(4px); }
.dialog { background: rgba(255, 255, 255, 0.9); box-shadow: var(--glass-shadow-lift); }
.dialog::backdrop { background: rgba(14, 24, 36, 0.42); backdrop-filter: blur(6px); }

/* Login and public-facing split cards keep their own backdrop */
.auth { background: transparent; }
.auth__card { background: rgba(255, 255, 255, 0.78); box-shadow: var(--glass-shadow-lift); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .panel, .page-head, .toolbar, .table-wrap, .stat, .stage, .form__section, .media-card, .credential, .dialog, .menu, .toast, .segments__item, .auth__card, .topbar { background: #fff; }
}
@media (prefers-reduced-transparency: reduce) {
  .panel, .page-head, .toolbar, .table-wrap, .stat, .stage, .form__section, .media-card, .credential, .dialog, .menu, .toast, .auth__card, .topbar { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
  body { background: #f3f6f8; }
}
@media (prefers-reduced-motion: reduce) { .stat:hover, .stage:hover, .btn--primary:hover { transform: none; } }

/* ---------- Charts, round 8: depth without noise ---------- */
.column-chart__bar { fill: url(#chart-green); filter: drop-shadow(0 5px 6px rgba(18, 133, 106, 0.28)); transition: filter 0.2s, transform 0.2s; transform-box: fill-box; transform-origin: bottom; }
.column-chart--blue .column-chart__bar { fill: url(#chart-blue); filter: drop-shadow(0 5px 6px rgba(44, 97, 159, 0.28)); }
.column-chart__bar:hover { filter: brightness(1.08) drop-shadow(0 8px 10px rgba(18, 60, 80, 0.32)); transform: scaleY(1.03); }
.column-chart__value { font-size: 11px; font-weight: 600; fill: var(--ink-2); font-variant-numeric: tabular-nums; }
.trend-chart__grid { stroke: rgba(21, 28, 34, 0.14); }
.trend-chart__grid--soft { stroke-dasharray: 3 5; stroke: rgba(21, 28, 34, 0.12); }
.trend-chart__axis { fill: var(--ink-muted); }
.trend-chart__line { stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 4px 5px rgba(202, 86, 79, 0.35)); }
.trend-chart__area { fill: url(#chart-area-coral); stroke: none; }
.trend-chart__point { stroke: #fff; stroke-width: 2.5; filter: drop-shadow(0 2px 3px rgba(202, 86, 79, 0.4)); }
.trend-chart__point--to-date { fill: #fff; stroke: var(--fill-coral); stroke-width: 3; }
.trend-chart { padding: var(--s-2) 0; }
@media (prefers-reduced-motion: reduce) { .column-chart__bar { transition: none; } .column-chart__bar:hover { transform: none; } }

/* Colour orbs behind the glass so the frosting has something to catch */
body::before, body::after { content: ""; position: fixed; z-index: -1; border-radius: 50%; pointer-events: none; filter: blur(70px); opacity: 0.55; }
body::before { width: 460px; height: 460px; left: 22%; top: 12%; background: radial-gradient(circle, rgba(63, 194, 157, 0.75), transparent 68%); }
body::after { width: 520px; height: 520px; right: -6%; bottom: 4%; background: radial-gradient(circle, rgba(122, 130, 214, 0.65), transparent 68%); }
@media (prefers-reduced-transparency: reduce) { body::before, body::after { display: none; } }
/* the header card is `.main > .page-head`: same glass */
.main > .page-head { background: linear-gradient(120deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.52)); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); }
.page-head__icon { background: linear-gradient(145deg, rgba(63, 194, 157, 0.28), rgba(53, 114, 175, 0.22)); color: #123a46; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset; }
@media (prefers-reduced-transparency: reduce) { .main > .page-head { background: #fff; backdrop-filter: none; } }

.stats + .register, .stats + .notice, .stats + .panel, .stages + .toolbar, .stages + .stats { margin-top: var(--s-4); }
.toolbar + .notice { margin-top: var(--s-4); }

/* Due-date tool: form beside its result */
.due-layout { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) { .due-layout { grid-template-columns: minmax(340px, 440px) minmax(0, 1fr); } }
.due-layout__result { display: grid; gap: var(--s-4); }
.due-layout .form__grid { grid-template-columns: minmax(0, 1fr); }
.field__opt { color: var(--ink-muted); font-weight: 400; }

/* Permission matrix */
.table--matrix th.matrix__role { text-align: center; vertical-align: bottom; white-space: normal; min-width: 96px; }
.matrix__role > span { display: block; }
.matrix__role .badge { margin-top: 4px; font-size: 0.625rem; }
.matrix__count { font-weight: 400; font-size: 0.6875rem; opacity: 0.75; }
.table--matrix tbody tr.matrix__module > th { background: linear-gradient(90deg, rgba(25, 154, 123, 0.18), rgba(53, 114, 175, 0.12)) !important; color: var(--ink); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.6875rem; }
.table--matrix tbody tr.matrix__module > th .mono { font-weight: 400; opacity: 0.7; margin-left: 6px; text-transform: none; letter-spacing: 0; }
.table--matrix tbody th[scope=row] { white-space: nowrap; }
.matrix__action { display: block; font-weight: 600; }
.matrix__cell { text-align: center; }
.matrix__box { display: inline-grid; place-items: center; width: 36px; height: 36px; cursor: pointer; border-radius: 8px; }
.matrix__box:hover { background: rgba(25, 154, 123, 0.12); }
.matrix__box input { width: 18px; height: 18px; accent-color: var(--brand-strong); cursor: pointer; }
.matrix__save { display: flex; gap: var(--s-4); align-items: flex-end; flex-wrap: wrap; }
.matrix__save .field { flex: 1 1 320px; }

.contract-text h3 { font-size: 1rem; margin-top: var(--s-4); padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.contract-sigmark { display: flex; gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); border-radius: 10px; background: rgba(25, 154, 123, 0.12); color: var(--ink-2); font-size: var(--fs-small); }
.contract-sigmark span { font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--brand-strong); }

.contract-text, .contract-text p, .contract-text li { overflow-wrap: anywhere; word-break: normal; min-width: 0; }
.contract-text { max-width: 100%; overflow: hidden; }

/* ======================= Round 9: tables that scroll, select, filter and export ======================= */
/* Both scrollbars on every table frame, the header always in view, a visible thin scrollbar. */
.table-wrap { max-height: min(74vh, 840px); overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(21, 28, 34, 0.35) rgba(21, 28, 34, 0.06); }
.table-wrap::-webkit-scrollbar { width: 11px; height: 11px; }
.table-wrap::-webkit-scrollbar-track { background: rgba(21, 28, 34, 0.06); border-radius: 8px; }
.table-wrap::-webkit-scrollbar-thumb { background: rgba(21, 28, 34, 0.32); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.table-wrap::-webkit-scrollbar-thumb:hover { background: rgba(21, 28, 34, 0.5); background-clip: padding-box; border: 2px solid transparent; }
.table-wrap .table thead th { position: sticky; top: 0; z-index: 4; }
.table--sticky > thead > tr > :first-child { z-index: 6; }
.table-wrap:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 720px) { .table-wrap { max-height: none; overflow: visible; } .table-wrap .table thead th { position: static; } }

/* Alternating bands, as in a spreadsheet: header colour, then a primary and a secondary row colour, one after the next.
   Rows the date filter hides are skipped by the script, which numbers the rows that remain. */
.table tbody tr[data-stripe="0"] > td, .table tbody tr[data-stripe="0"] > th { background: rgba(255, 255, 255, 0.78); }
.table tbody tr[data-stripe="1"] > td, .table tbody tr[data-stripe="1"] > th { background: rgba(220, 234, 244, 0.72); }
.table tbody tr[data-stripe]:hover > td, .table tbody tr[data-stripe]:hover > th { background: rgba(190, 228, 214, 0.85); }
.table tbody tr.is-selected > td, .table tbody tr.is-selected > th { background: rgba(255, 233, 170, 0.75) !important; }
/* A share bar must stay visible on both band colours: a darker track and a solid fill */
.bar--share { background: rgba(30, 40, 54, 0.16); box-shadow: inset 0 0 0 1px rgba(30, 40, 54, 0.12); }
.bar--share span { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55); }
.bar { background: rgba(30, 40, 54, 0.16); }

/* Table tools */
.tt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); padding: 6px var(--s-3); margin-bottom: var(--s-2); border-radius: 12px; background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); font-size: var(--fs-small); }
.tt__count { font-weight: 600; color: var(--ink-2); min-width: 7.5rem; }
.tt__field { color: var(--ink-muted); font-weight: 600; }
.tt__input { min-height: 30px !important; width: auto; padding: 2px 8px !important; font-size: 0.8125rem; }
.tt__spacer { flex: 1 1 auto; }
.tt__export { display: inline-flex; gap: var(--s-2); }
th.sel, td.sel { width: 40px; min-width: 40px; text-align: center; padding-left: 10px !important; padding-right: 6px !important; }
th.sel input, td.sel input { width: 16px; height: 16px; accent-color: var(--brand-strong); cursor: pointer; vertical-align: middle; }
@media (max-width: 720px) { td.sel { display: flex !important; justify-content: flex-end; } td.sel::before { content: none !important; } }

/* Sidebar search */
.nav__search { position: relative; margin: 0 var(--s-1) var(--s-2); }
.nav__search .icon { position: absolute; left: 11px; top: 50%; translate: 0 -50%; width: 15px; height: 15px; color: var(--on-night-muted); pointer-events: none; }
.nav__search input { width: 100%; min-height: 34px; padding: 4px 34px 4px 34px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.07); color: #fff; font: inherit; font-size: 0.8125rem; }
.nav__search input::placeholder { color: var(--on-night-muted); }
.nav__search input:focus { outline: none; border-color: var(--nav-mark); background: rgba(255, 255, 255, 0.12); box-shadow: 0 0 0 3px rgba(91, 214, 176, 0.22); }
.nav__search kbd { position: absolute; right: 9px; top: 50%; translate: 0 -50%; font: inherit; font-size: 0.6875rem; color: var(--on-night-muted); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 5px; padding: 0 5px; pointer-events: none; }
.nav__empty { margin: var(--s-2) var(--s-3); color: var(--on-night-muted); font-size: 0.8125rem; }
body.nav-collapsed .nav__search, body.nav-collapsed .nav__empty { display: none; }
.nav [hidden] { display: none !important; }
/* Owner request (4 Nov): the search box stays fixed at the top of the sidebar while the menu scrolls under it. The strip spans the
   sidebar's full width (negative side margins equal to its padding) with the sidebar's top colour, so nothing shows beside it. */
.nav__search { position: sticky; top: calc(-1 * var(--s-4)); z-index: 3; margin: 0 calc(-1 * var(--s-3)) var(--s-1); padding: var(--s-2) calc(var(--s-3) + var(--s-1));
  background: #233147; box-shadow: 0 8px 12px -10px rgba(0, 0, 0, 0.45); }
.nav__search .icon { left: calc(var(--s-3) + var(--s-1) + 11px); }
.nav__search kbd { right: calc(var(--s-3) + var(--s-1) + 9px); }

/* Filter panels (audit log and others): a compact grid instead of a stack */
.panel.filters, form.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s-3) var(--s-4); align-items: end; padding: var(--s-4); }
.panel.filters .btn, form.filters .btn { justify-self: start; align-self: end; }
.panel.filters .field, form.filters .field { margin: 0; }

/* A backdrop-filter makes an element the containing block of fixed-position children, which clipped the row-action menus
   (they float above the page). Nothing that can hold a row menu is blurred; it stays translucent. */
.table-wrap, .menu, .register, .panel:has([data-menu]), .panel--flush { backdrop-filter: none; -webkit-backdrop-filter: none; }
.table-wrap { background: rgba(255, 255, 255, 0.86); }
.menu__list.is-floating { backdrop-filter: none; z-index: 200; }

/* Roles screen: sections in the sidebar's order, a find box, and an Export-only filter (owner request, 4 Nov 2026). */
.matrix__tools { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; margin-bottom: var(--s-3); }
.matrix__tools .input { flex: 1 1 280px; max-width: 420px; }
.matrix__tools .btn.is-active { background: var(--brand-strong); color: #fff; border-color: var(--brand-strong); }
.matrix__nomatch { color: var(--muted); font-size: 0.875rem; }
.table--matrix tr[hidden] { display: none !important; }
.table--matrix tbody tr.matrix__section > th { background: #1f2d3f !important; color: #fff; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; padding-block: 8px; }
.matrix__pages { display: block; font-weight: 400; font-size: 0.75rem; text-transform: none; letter-spacing: 0; opacity: 0.75; margin-top: 2px; }
.table--matrix tbody tr.matrix__row--export > th, .table--matrix tbody tr.matrix__row--export > td { background: rgba(53, 114, 175, 0.07); }
.table--matrix tbody tr.matrix__row--export .matrix__action { color: var(--brand-strong); }

.mono.is-revealed { background: rgba(53, 114, 175, 0.12); border-radius: 6px; padding: 1px 6px; }