/* Fuel Trading System — application shell and component system.
 *
 * Reads tokens.css. Ordered: reset → shell → components → utilities.
 * Nothing here hard-codes a colour, size or radius that tokens.css defines.
 */

/* ==========================================================================
   reset
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  /* WCAG 2.2 §2.4.11 — a focused control must not be hidden by sticky
     furniture. The browser scrolls a focused element only *just* into view, so
     tabbing into the last field of a long form landed it entirely underneath
     the sticky .form-actions bar: 34px of overlap on a 34px select, i.e. the
     keyboard user could not see what they were editing. This reserves the
     bar's height so focus scrolling always clears it. */
  scroll-padding-bottom: 88px;
  scroll-padding-top: var(--topbar-h);
}

body {
  margin: 0;
  background: var(--bg-app);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

a { color: var(--brand-600); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { vertical-align: middle; }

/* One focus treatment for the whole application. Never removed — only
   suppressed for pointer interaction via :focus-visible. */
:focus { outline: none; }
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-sm);
}

::selection { background: var(--brand-100); }

/* Every number in this application aligns in its column. */
.num, td.num, th.num, .mono, input[inputmode="decimal"], input[inputmode="numeric"] {
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   accessibility helpers
   ========================================================================== */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--s-2);
  top: -100px;
  z-index: 100;
  padding: var(--s-2) var(--s-4);
  background: var(--brand-600);
  color: var(--text-invert);
  border-radius: var(--r-md);
  font-weight: var(--fw-semibold);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--s-2); text-decoration: none; }

/* ==========================================================================
   shell
   ========================================================================== */

/* The sidebar is the full-height chrome and the top bar sits beside it, not
   above it — so the product's identity and its navigation are one surface
   rather than two stacked bands. */
.app { min-height: 100vh; display: flex; align-items: stretch; }

/* Everything to the right of the rail: top bar above, page below. */
.pane { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ---- top bar ---- */

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: 0 var(--s-4);
  background: var(--bg-surface);
  color: var(--text);
  border-bottom: 1px solid var(--border);
}

/* The brand lives in the rail on desktop. This copy is for the overlay tier,
   where the rail is a drawer and the page would otherwise carry no mark at
   all. Exactly one of the two is ever visible. */
@media (min-width: 1025px) {
  .app:has(.rail) .topbar-brand { display: none; }
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--text);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.005em;
  flex: 0 0 auto;
  min-width: 0;
}
.topbar-brand:hover { text-decoration: none; }

.brand-mark {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: var(--r-sm);
  background: var(--brand-600);
  color: var(--n-0);
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  letter-spacing: .02em;
  flex: none;
}
.brand-name { font-size: var(--fs-14); white-space: nowrap; }
.brand-portal {
  font-size: var(--fs-11);
  text-transform: uppercase;
  letter-spacing: .07em;
  opacity: .7;
  padding-left: var(--s-3);
  margin-left: var(--s-1);
  border-left: 1px solid var(--border-strong);
  white-space: nowrap;
}

/* Global search sits in the middle, always. It is the fastest route to any
   record and support staff live in it. */
.topbar-search { flex: 1 1 auto; max-width: 520px; position: relative; }

.search-trigger {
  width: 100%;
  height: 32px;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0 var(--s-2) 0 var(--s-3);
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-subtle);
  font: inherit;
  font-size: var(--fs-13);
  text-align: left;
  cursor: pointer;
}
.search-trigger:hover { background: var(--n-150, var(--n-200)); color: var(--text-muted); }
.search-trigger .kbd-hint { margin-left: auto; }

.topbar > .spacer { flex: 1 1 24px; }

@media (max-width: 1180px) {
  .topbar-search { max-width: 360px; }
}

@media (max-width: 860px) {
  .topbar-search { flex: 0 0 32px; width: 32px; }
  .search-trigger { width: 32px; padding: 0; justify-content: center; }
  .search-trigger-label, .search-trigger .kbd-hint { display: none; }
}

.kbd {
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  border-radius: var(--r-sm);
  background: var(--n-100);
  border: 1px solid var(--border);
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  text-align: center;
  line-height: 1.5;
}
.card .kbd, .dialog .kbd {
  background: var(--n-100);
  border-color: var(--border);
  color: var(--text-muted);
}

.topbar-actions { display: flex; align-items: center; gap: var(--s-1); flex: 0 0 auto; }

.icon-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.icon-btn:hover { background: var(--bg-hover); color: var(--text); }
.icon-btn[aria-expanded="true"] { background: var(--bg-sunken); color: var(--text); }

/* Count, not a bare dot — a dot tells you nothing actionable. */
.badge-count {
  position: absolute;
  top: 1px; right: 1px;
  min-width: 15px; height: 15px;
  padding: 0 3px;
  border-radius: var(--r-pill);
  background: var(--neg-600);
  color: var(--n-0);
  font-size: 10px;
  font-weight: var(--fw-bold);
  line-height: 15px;
  text-align: center;
}

.user-btn {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  height: 32px;
  padding: 0 var(--s-2);
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-13);
  cursor: pointer;
}
.user-btn:hover { background: var(--bg-hover); }

.avatar {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: var(--r-pill);
  background: var(--brand-400);
  color: var(--n-0);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  flex: none;
}

.user-meta { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.user-meta .scope { font-size: var(--fs-11); opacity: .72; }

/* ---- body ---- */

/* ---- navigation rail ---- */

.rail {
  flex: 0 0 var(--rail-w);
  width: var(--rail-w);
  background: var(--chrome);
  color: var(--chrome-text);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: var(--z-rail);
}

/* The product mark at the head of the sidebar. */
.rail-brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  height: var(--topbar-h);
  flex: none;
  padding: 0 var(--s-4);
  color: var(--n-0);
  font-weight: var(--fw-semibold);
  border-bottom: 1px solid var(--chrome-line);
}
.rail-brand:hover { text-decoration: none; }
.rail-brand .brand-mark { background: var(--n-0); color: var(--brand-800); }
.rail-brand .brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.rail-brand .brand-portal {
  border-left: 0;
  padding-left: 0;
  margin-left: 0;
  opacity: .55;
}

.rail-nav { padding: var(--s-3) 0 var(--s-4); flex: 1; }

.nav-group { margin-bottom: var(--s-1); }

.nav-group-label {
  padding: var(--s-3) var(--s-4) var(--s-1);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--chrome-muted);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 7px var(--s-4);
  color: var(--chrome-text);
  font-size: var(--fs-13);
  border-left: 3px solid transparent;
  min-height: 32px;
}
.nav-item:hover { background: var(--chrome-hover); color: var(--n-0); text-decoration: none; }

/* ---- report period controls ---- */

/* A filter row that wraps rather than pushing the Apply button off a phone. */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-3);
}
.filters .field { margin-bottom: 0; }

/* Presets sit under the pickers: "last month" is what gets asked for, and
   deriving it from two date fields every time is a tax on a frequent task. */
.preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-3);
}
.preset {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--fs-13);
  color: var(--text-muted);
  text-decoration: none;
  background: var(--surface);
}
.preset:hover { border-color: var(--brand-300); color: var(--brand-700); text-decoration: none; }
.preset.is-current {
  background: var(--brand-50);
  border-color: var(--brand-200);
  color: var(--brand-700);
  font-weight: var(--fw-semibold);
}

/* ---- "pick up where you left off" lists ---- */

.quick-list { list-style: none; margin: 0; padding: 0; }
.quick-list li + li { border-top: 1px solid var(--line); }
.quick-list a {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  color: var(--text);
  text-decoration: none;
}
.quick-list a:hover { background: var(--surface-2); }
.quick-list .ico { flex: none; color: var(--text-muted); }
.quick-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quick-kind { flex: none; font-size: var(--fs-12); color: var(--text-muted); }

/* ---- sections ---- */

.nav-section { position: relative; }

/* Active state carries three signals: colour, weight and a left marker —
   so it survives greyscale and forced-colours.

   Any aria-current, not only "page": a rail row standing for a section marks
   itself "true" because the current page is inside it, not because the row
   *is* it. Matching only "page" left the whole rail looking inert on every
   page but a section's first. */
.nav-item[aria-current] {
  background: var(--chrome-active);
  border-left-color: var(--chrome-accent);
  color: var(--n-0);
  font-weight: var(--fw-semibold);
}

.nav-item .ico { flex: none; width: 16px; height: 16px; opacity: .85; }
.nav-item[aria-current] .ico { opacity: 1; }
/* Navigation labels take the rail's colour, never a form label's. */
.rail .label { color: inherit; font-weight: inherit; margin-bottom: 0; }
.nav-item .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* A count on a nav item is a work signal, not decoration. */
.nav-count {
  flex: none;
  min-width: 20px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--chrome-active);
  color: var(--n-0);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  text-align: center;
  line-height: 18px;
}
/* Kept as solid fills rather than the pale tints used elsewhere: a
   --warn-50 chip is invisible against the dark rail. */
.nav-count.attention { background: var(--warn-600); color: var(--n-0); }
.nav-count.urgent { background: var(--neg-600); color: var(--n-0); }

.rail-footer {
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--chrome-line);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.rail-toggle {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  padding: var(--s-1) var(--s-2);
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--chrome-muted);
  font: inherit;
  font-size: var(--fs-12);
  cursor: pointer;
}
.rail-toggle:hover { background: var(--chrome-hover); color: var(--n-0); }

/* ---- main ---- */

.content {
  flex: 1;
  min-width: 0;
  padding: var(--s-5) var(--s-6) var(--s-16);
  max-width: var(--content-max);
}

/* ==========================================================================
   page header
   ========================================================================== */

.breadcrumb { display: flex; align-items: center; gap: var(--s-1); flex-wrap: wrap; margin-bottom: var(--s-2); }
.breadcrumb li { list-style: none; display: flex; align-items: center; gap: var(--s-1); }
.breadcrumb a, .breadcrumb span { font-size: var(--fs-12); color: var(--text-subtle); }
.breadcrumb a:hover { color: var(--brand-600); }
.breadcrumb .sep { color: var(--n-300); }
.breadcrumb [aria-current="page"] { color: var(--text-muted); font-weight: var(--fw-medium); }

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-6);
  margin-bottom: var(--s-5);
  flex-wrap: wrap;
}
.page-head-text { min-width: 0; }
/* Weight, not size. The page title has to hold the top of a dense screen
   without spending a row of data on it, so it goes heavy and tight rather
   than large. */
.page-head h1 {
  font-size: var(--fs-22);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
}
.page-head .description { margin-top: 3px; color: var(--text-muted); font-size: var(--fs-13); max-width: 72ch; }
.page-actions { display: flex; align-items: center; gap: var(--s-2); flex: none; }

.workspace-bar {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: 44px;
  margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--border);
}
.workspace-bar:not(:has(.tabs)):not(:has(.page-actions > *)) { display: none; }
.workspace-bar .tabs {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: -1px;
  border-bottom: 0;
}
.workspace-bar .page-actions { margin-left: auto; padding-bottom: var(--s-2); }

/* ==========================================================================
   buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: var(--control-h);
  padding: 0 var(--s-3);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: var(--brand-600);
  color: var(--text-invert);
  font: inherit;
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.btn:hover { background: var(--brand-700); text-decoration: none; }
.btn:active { background: var(--brand-800); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; background: var(--brand-600); }

/* Secondary actions are quieter by design — the eye should find the primary
   action first on every screen. */
.btn-secondary {
  background: var(--bg-surface);
  border-color: var(--border-strong);
  color: var(--text);
}
.btn-secondary:hover { background: var(--n-50); border-color: var(--n-400); }

.btn-subtle { background: transparent; color: var(--text-muted); }
.btn-subtle:hover { background: var(--n-100); color: var(--text); }

.btn-danger { background: var(--neg-600); }
.btn-danger:hover { background: var(--neg-700); }

.btn-sm { height: 28px; padding: 0 var(--s-2); font-size: var(--fs-12); }
.btn-lg { height: 40px; padding: 0 var(--s-5); font-size: var(--fs-14); }
.btn-icon { width: var(--control-h); padding: 0; }
.btn-block { width: 100%; }

/* Forms placed inline inside a table cell or toolbar. */
.inline { display: inline; }
form.inline { display: inline-flex; align-items: center; gap: var(--s-1); }

.btn .ico { width: 15px; height: 15px; flex: none; }

.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; margin-left: -1px; }
.btn-group .btn:first-child { border-radius: var(--r-md) 0 0 var(--r-md); margin-left: 0; }
.btn-group .btn:last-child { border-radius: 0 var(--r-md) var(--r-md) 0; }

/* ==========================================================================
   cards
   ========================================================================== */

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--s-4);
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
  min-height: 42px;
}
.card-head h2, .card-head h3 { font-size: var(--fs-13); font-weight: var(--fw-semibold); }
.card-head .hint { font-size: var(--fs-12); color: var(--text-subtle); }
.card-head-actions { display: flex; align-items: center; gap: var(--s-2); }

.card-body { padding: var(--s-4); }
.card-body.flush { padding: 0; }
.card-foot {
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--border);
  background: var(--n-25);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

/* ==========================================================================
   grid
   ========================================================================== */

.grid { display: grid; gap: var(--s-4); }

/* Grid items default to min-width:auto, so a track cannot shrink below its
 * content's min-content size — a wide table or a chart then pushes the whole
 * grid past the viewport and the page scrolls sideways. Every track here is
 * therefore minmax(0, …) and every child may shrink. */
.grid > * { min-width: 0; }

.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.grid-sidebar { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }
@media (max-width: 1100px) { .grid-sidebar { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   KPI tiles
   ========================================================================== */

.kpi {
  display: block;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  color: inherit;
}
a.kpi:hover { border-color: var(--brand-300); box-shadow: var(--shadow-sm); text-decoration: none; }

.kpi-label {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
}
.kpi-value {
  margin-top: var(--s-2);
  font-size: var(--fs-28);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.kpi-value.sm { font-size: var(--fs-22); }
.kpi-value { font-weight: var(--fw-heavy); letter-spacing: -0.02em; }
.tile .value { font-weight: var(--fw-heavy); letter-spacing: -0.02em; }
.kpi-meta { margin-top: var(--s-2); font-size: var(--fs-12); color: var(--text-subtle); display: flex; align-items: center; gap: var(--s-2); }
.finance-cues { margin-bottom: var(--s-4); }
.finance-cues .kpi { min-height: 124px; }

.kpi.attention { border-left: 3px solid var(--warn-600); }
.kpi.urgent { border-left: 3px solid var(--neg-600); }
.kpi.positive { border-left: 3px solid var(--pos-600); }

.delta { display: inline-flex; align-items: center; gap: 3px; font-weight: var(--fw-semibold); }
.delta.up { color: var(--pos-600); }
.delta.down { color: var(--neg-600); }
.delta.flat { color: var(--text-subtle); }

/* ==========================================================================
   tables
   ========================================================================== */

/* `.table-scroll` is an older alias for this and behaves identically. Both
   names are in templates, so both are honoured — including by the mobile
   card swap below, which knew only `.table-wrap` and therefore left a table
   and its card fallback stacked on top of each other. */
.table-wrap, .table-scroll { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: var(--fs-13); }

caption { text-align: left; padding: var(--s-3) var(--s-4); color: var(--text-muted); font-size: var(--fs-12); }

thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  padding: var(--s-2) var(--s-4);
  background: var(--n-50);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-subtle);
  white-space: nowrap;
}

th.sortable { padding: 0; }
th.sortable > button {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  width: 100%;
  padding: var(--s-2) var(--s-4);
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-subtle);
  cursor: pointer;
  text-align: inherit;
}
th.sortable > button:hover { color: var(--text); background: var(--n-100); }
th.num.sortable > button { justify-content: flex-end; }
th[aria-sort] > button { color: var(--brand-700); }
.sort-ind { font-size: 9px; opacity: .8; }

tbody td {
  padding: var(--row-py) var(--s-4);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--bg-hover); }
tbody tr[aria-selected="true"] { background: var(--bg-selected); }

td.num, th.num { text-align: right; white-space: nowrap; }
td.ref { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--text-muted); white-space: nowrap; }
td.primary-cell { font-weight: var(--fw-medium); }
/* A name is the row's handle. Left as "whatever is spare", it wraps to three
   lines beside single-line neighbours and the row loses its baseline — which
   reads as a broken table long before anyone works out why. */
.col-name { min-width: 180px; }
td.actions { text-align: right; white-space: nowrap; }

.credit { color: var(--pos-700); }
.debit { color: var(--neg-700); }

/* --------------------------------------------------------- financial group
 *
 * A run of money columns reads as one block — this row's financial position —
 * instead of as several unrelated figures that happen to share a table. An
 * operator scanning a customer list should see the money without having to
 * work out which columns are money.
 *
 * Colour never carries the meaning on its own: the group is also announced by
 * a spanning caption, the columns are right-aligned and tabular, and credits
 * and debits keep their sign. Greyscale, or a colour-blind reader, loses
 * nothing but the grouping.
 */
td.fin, th.fin { background: var(--fin-bg); }
th.fin { color: var(--fin-head); }
.fin-start { border-left: 1px solid var(--fin-border); }
.fin-end { border-right: 1px solid var(--fin-border); }
/* The row-hover tint has to be restated inside the group, or hovering a row
   leaves the money columns behind and the row visually breaks in half. */
tbody tr:hover td.fin { background: var(--fin-bg-hover); }

/* The caption spanning the block. Its own header row, so the column labels
   underneath keep their normal alignment and sorting. */
thead tr.col-groups th {
  padding: var(--s-3) var(--s-4) var(--s-1);
  border-bottom: 0;
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fin-head);
  text-align: center;
}
thead tr.col-groups th.plain { color: transparent; }

/* Money. Tabular so columns align on the decimal, and never wrapping — a
   figure broken across two lines is a figure somebody misreads. */
.money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.money-strong { font-weight: var(--fw-semibold); }
/* Zero is shown, not hidden: a customer with no debits and a customer with no
   ledger are different, and a blank cell cannot tell them apart. It is just
   quietened so the eye lands on the figures that are not zero. */
.money-nil { color: var(--n-400); }

/* Zebra is off by default: borders are enough and stripes fight selection. */
.table-zebra tbody tr:nth-child(even) { background: var(--n-25); }
.table-zebra tbody tr:hover { background: var(--bg-hover); }

/* A PDF preview embedded beside the message that will carry it. */
.doc-preview {
  width: 100%;
  height: 460px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-sunken);
}

/* ==========================================================================
   section tabs
   ==========================================================================
   The destinations inside the rail's current section. The rail lists sections
   so it stays scannable; these carry the depth that used to live in it.
   ========================================================================== */

.tabs {
  display: flex;
  gap: var(--s-1);
  margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--border);
  /* A section with many destinations scrolls sideways rather than wrapping
     into a second row that shifts the page down as you move between them. */
  overflow-x: auto;
  scrollbar-width: thin;
}
.tab {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex: none;
  padding: var(--s-2) var(--s-3);
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
.tab:hover { color: var(--text); text-decoration: none; border-bottom-color: var(--border-strong); }
/* Weight and an underline, not colour alone. */
.tab.is-active {
  color: var(--brand-700);
  border-bottom-color: var(--brand-600);
  font-weight: var(--fw-semibold);
}
.tab .nav-count { background: var(--n-100); color: var(--text-muted); }
.tab .nav-count.attention { background: var(--warn-50); color: var(--warn-700); }
.tab .nav-count.urgent { background: var(--neg-50); color: var(--neg-700); }

@media (max-width: 767px) {
  .tabs { margin-left: calc(var(--s-3) * -1); margin-right: calc(var(--s-3) * -1); padding: 0 var(--s-3); }
}

/* ==========================================================================
   badges and status
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--n-50);
  color: var(--text-muted);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
/* The dot is a redundant encoding of the same state, so the badge survives
   greyscale printing and colour-vision deficiency. */
.badge .dot { width: 6px; height: 6px; border-radius: var(--r-pill); background: currentColor; flex: none; }

.badge-ok      { background: var(--pos-50);  border-color: var(--pos-200);  color: var(--pos-700); }
.badge-warn    { background: var(--warn-50); border-color: var(--warn-200); color: var(--warn-700); }
.badge-danger  { background: var(--neg-50);  border-color: var(--neg-200);  color: var(--neg-700); }
.badge-info    { background: var(--info-50);  border-color: var(--info-200);  color: var(--info-700); }
.badge-neutral { background: var(--n-100); border-color: var(--n-200); color: var(--n-600); }

.badge-sm { padding: 1px 6px; font-size: var(--fs-11); }

/* ==========================================================================
   forms
   ========================================================================== */

.field { margin-bottom: var(--s-4); }
.field:last-child { margin-bottom: 0; }

/* An exception folded away from the default path. The card-issue form takes
   its number from the inventory; typing one is for plastic embossed before
   this system existed, and a field on show invites everyone to use it. Native
   <details>, so it works with script disabled and the browser handles the
   keyboard. */
.disclosure { margin-top: var(--s-3); }
.disclosure > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: var(--fs-13);
  padding: var(--s-1) 0;
  width: fit-content;
}
.disclosure > summary:hover { color: var(--text); }
.disclosure[open] > summary { margin-bottom: var(--s-3); }

/* `.label` is deliberately generic — tiles, the profile page and form fields
   all use it. The navigation writes `<span class="label">` too, so `.rail
   .label` below re-inherits the rail's own colour. Without that the nav went
   dark-on-dark the moment the rail became the chrome surface: this rule sets
   an explicit colour, and inheriting from a dark parent does not beat it. */
.field > label, .label {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  margin-bottom: var(--s-1);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  color: var(--text);
}
.field .required { color: var(--neg-600); }
.field .optional { color: var(--text-subtle); font-weight: var(--fw-regular); }

/* `input:not([type])` is load-bearing, not tidiness. An <input> with no type
   attribute *is* a text input, but `input[type="text"]` does not match it — so
   any field written without the attribute silently fell back to the browser's
   default chrome while every field beside it was styled. The confirm dialogs
   and the applicant's people grid were both doing this. */
input:not([type]),
input[type="text"], input[type="password"], input[type="number"], input[type="date"],
input[type="email"], input[type="search"], input[type="tel"], select, textarea {
  width: 100%;
  height: var(--control-h);
  padding: 0 var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--bg-surface);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-13);
  transition: border-color var(--dur-fast) var(--ease);
}
textarea { height: auto; min-height: 72px; padding: var(--s-2) var(--s-3); line-height: var(--lh-normal); resize: vertical; }

select {
  appearance: none;
  padding-right: var(--s-8);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%236b7788' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-3) center;
}
select[multiple] { height: auto; padding: var(--s-2); background-image: none; }

input:hover, select:hover, textarea:hover { border-color: var(--n-400); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--brand-600); }
input::placeholder, textarea::placeholder { color: var(--n-400); }
/* The verification code field is deliberately narrower than a full-width
   input; it holds six digits. */
input.code-input { width: 8ch; }
input[disabled], select[disabled], textarea[disabled] { background: var(--n-50); color: var(--text-subtle); cursor: not-allowed; }
input[readonly] { background: var(--n-50); }

.field .help { margin-top: var(--s-1); font-size: var(--fs-12); color: var(--text-subtle); }

/* Validation is announced, not just coloured. */
.field.invalid input, .field.invalid select, .field.invalid textarea,
.field.client-invalid input, .field.client-invalid select, .field.client-invalid textarea {
  border-color: var(--neg-600);
}
.field-error {
  display: flex;
  align-items: flex-start;
  gap: var(--s-1);
  margin-top: var(--s-1);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  color: var(--neg-700);
}

.validation-summary {
  display: flex;
  width: 100%;
  margin: 0 0 var(--s-4);
  padding: var(--s-3);
  border: 1px solid var(--neg-200);
  border-radius: var(--r-md);
  background: var(--neg-50);
  color: var(--neg-700);
  font: inherit;
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  text-align: left;
  cursor: pointer;
}

.input-group { display: flex; align-items: stretch; }
.input-group input { border-radius: var(--r-md) 0 0 var(--r-md); }
.input-group .addon {
  display: flex; align-items: center;
  padding: 0 var(--s-3);
  border: 1px solid var(--border-strong);
  border-left: 0;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--n-50);
  color: var(--text-muted);
  font-size: var(--fs-12);
  white-space: nowrap;
}

.form-row { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.form-row.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .form-row.cols-2 { grid-template-columns: 1fr; } }

/* Field groups give a long form structure without tabs. */
.fieldset { border: 0; padding: 0; margin: 0 0 var(--s-6); }
.fieldset > legend {
  padding: 0;
  margin-bottom: var(--s-1);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
}
.fieldset .group-help { margin-bottom: var(--s-4); font-size: var(--fs-12); color: var(--text-muted); }

.check {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  font-size: var(--fs-13);
  font-weight: var(--fw-regular);
  cursor: pointer;
  padding: var(--s-1) 0;
}
.check input { width: 16px; height: 16px; margin: 2px 0 0; flex: none; accent-color: var(--brand-600); }
.check .check-help { display: block; font-size: var(--fs-12); color: var(--text-subtle); }

/* Sticky save bar so a long form never needs scrolling back to the top. */
.form-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-6) calc(var(--s-4) * -1) calc(var(--s-4) * -1);
  padding: var(--s-3) var(--s-4);
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.form-actions .spacer { flex: 1; }

/* The sticky, flush-to-the-card-edge treatment above is only correct when the
   action bar is the last thing in its card: the negative bottom margin is what
   makes it sit in the card's own padding. Where something follows it — a
   fallback note, a second form — that margin pulls the bar over the top of it,
   and `position: sticky` keeps it there. On /track it swallowed the whole
   "Lost your reference?" line except the final word.
   Anywhere it is not last, it becomes an ordinary row. */
.form-actions:not(:last-child),
.card-body > form:not(:last-child) .form-actions {
  position: static;
  margin-bottom: 0;
}
.save-status { font-size: var(--fs-12); color: var(--text-subtle); display: flex; align-items: center; gap: var(--s-1); }

/* ==========================================================================
   alerts
   ========================================================================== */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid;
  border-radius: var(--r-md);
  margin-bottom: var(--s-4);
  font-size: var(--fs-13);
}
.alert .ico { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.alert .alert-body { flex: 1; min-width: 0; }
.alert .alert-title { font-weight: var(--fw-semibold); margin-bottom: 2px; }
.alert .alert-actions { margin-top: var(--s-2); display: flex; gap: var(--s-2); }

.alert-success { background: var(--pos-50);  border-color: var(--pos-200);  color: var(--pos-700); }
.alert-error   { background: var(--neg-50);  border-color: var(--neg-200);  color: var(--neg-700); }
.alert-warning { background: var(--warn-50); border-color: var(--warn-200); color: var(--warn-700); }
.alert-info    { background: var(--info-50);  border-color: var(--info-200);  color: var(--info-700); }

/* ==========================================================================
   empty states
   ========================================================================== */

.empty {
  padding: var(--s-12) var(--s-6);
  text-align: center;
  color: var(--text-muted);
}
.empty .empty-ico { width: 32px; height: 32px; color: var(--n-300); margin-bottom: var(--s-3); }
.empty h3 { font-size: var(--fs-14); color: var(--text); margin-bottom: var(--s-1); }
.empty p { font-size: var(--fs-13); max-width: 46ch; margin: 0 auto var(--s-4); }
.empty-sm { padding: var(--s-8) var(--s-4); }

/* ==========================================================================
   tabs
   ========================================================================== */

.tabs {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s-4);
  overflow-x: auto;
}
.tab {
  padding: var(--s-2) var(--s-3);
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  cursor: pointer;
  white-space: nowrap;
}
.tab:hover { color: var(--text); text-decoration: none; }
.tab[aria-selected="true"], .tab.active {
  color: var(--brand-700);
  border-bottom-color: var(--brand-600);
  font-weight: var(--fw-semibold);
}
.tab .count { margin-left: 5px; color: var(--text-subtle); font-weight: var(--fw-regular); }

/* ==========================================================================
   definition lists
   ========================================================================== */

.kv { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: var(--s-2) var(--s-5); font-size: var(--fs-13); }
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; color: var(--text); min-width: 0; }
.kv-stacked { display: block; }
.kv-stacked dt { font-size: var(--fs-12); }
.kv-stacked dd { margin-bottom: var(--s-3); }

/* ==========================================================================
   record summary header
   ========================================================================== */

.record-head {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  margin-bottom: var(--s-4);
}
.record-title { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.record-title h1 { font-size: var(--fs-18); font-family: var(--font-mono); letter-spacing: -0.01em; }
.record-sub { margin-top: 2px; color: var(--text-muted); font-size: var(--fs-13); }
.record-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
}
.record-fact .fact-label { font-size: var(--fs-11); text-transform: uppercase; letter-spacing: .05em; color: var(--text-subtle); font-weight: var(--fw-semibold); }
.record-fact .fact-value { margin-top: 3px; font-size: var(--fs-16); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   ERP document pages
   ========================================================================== */

.document-head {
  display: grid;
  grid-template-columns: minmax(210px, .6fr) minmax(0, 1.4fr);
  align-items: start;
  gap: var(--s-6);
  margin-bottom: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--border);
}
.document-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); }
.document-type {
  margin-bottom: var(--s-1);
  color: var(--text-subtle);
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.document-title-row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.document-title-row h1 {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--fs-22);
  font-weight: var(--fw-bold);
  letter-spacing: 0;
}
.document-subtitle { margin-top: 3px; color: var(--text-muted); font-size: var(--fs-13); }
.document-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--s-3) var(--s-5);
  margin-top: 0;
}
.document-fact { min-width: 0; }
.document-fact-label,
.document-field-label {
  display: block;
  color: var(--text-subtle);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.document-fact-value {
  display: block;
  min-width: 0;
  margin-top: 2px;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}
.document-fact.is-calculated .document-fact-value::after {
  content: "Calculated";
  display: inline-block;
  margin-left: var(--s-2);
  color: var(--text-subtle);
  font-size: var(--fs-11);
  font-weight: var(--fw-medium);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.document-actions {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
  margin-bottom: var(--s-4);
  padding: var(--s-2) 0;
  overflow-x: auto;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  scrollbar-width: thin;
}
.document-action-group {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--s-2);
  padding-right: var(--s-3);
}
.document-action-group + .document-action-group {
  padding-left: var(--s-3);
  border-left: 1px solid var(--border);
}
.document-action-group.is-danger { margin-left: 0; }
.document-action-label {
  color: var(--text-subtle);
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.document-action-controls { display: flex; align-items: center; gap: var(--s-2); }
.document-action-controls > form { display: inline-flex; margin: 0; }
.document-pane-toggle { flex: none; margin-left: auto; }

.document-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
  align-items: start;
  gap: var(--s-4);
}
.document-main,
.factbox-pane { min-width: 0; }
.factbox-pane {
  position: sticky;
  top: calc(var(--topbar-h) + var(--s-4));
  display: grid;
  gap: var(--s-3);
}

.fasttab {
  margin-bottom: var(--s-3);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-surface);
}
.fasttab > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: var(--s-3);
  min-height: 46px;
  padding: var(--s-3) var(--s-4);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.fasttab > summary::-webkit-details-marker { display: none; }
.fasttab > summary:hover { background: var(--bg-hover); }
.fasttab-title { font-size: var(--fs-13); font-weight: var(--fw-semibold); }
.fasttab-hint { color: var(--text-subtle); font-size: var(--fs-11); }
.fasttab-chevron { color: var(--text-subtle); transition: transform var(--dur-fast) var(--ease); }
.fasttab[open] .fasttab-chevron { transform: rotate(180deg); }
.fasttab-body { padding: var(--s-4); border-top: 1px solid var(--border); }
.fasttab-body.flush { padding: 0; }

.document-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4) var(--s-6);
  margin: 0;
}
.document-fields > div { min-width: 0; }
.document-fields dt { color: var(--text-muted); font-size: var(--fs-12); }
.document-fields dd {
  min-width: 0;
  margin: 3px 0 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
}
.document-fields .is-calculated dd {
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-sunken);
}
.document-note { color: var(--text-muted); font-size: var(--fs-13); white-space: pre-wrap; }

.factbox {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-surface);
}
.factbox-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  min-height: 42px;
  padding: var(--s-3);
  border-bottom: 1px solid var(--border);
}
.factbox-head h2 { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-12); }
.factbox-head .ico { color: var(--text-subtle); }
.factbox-body { padding: var(--s-3); }
.factbox-stats { display: grid; gap: var(--s-3); }
.factbox-stat { min-width: 0; }
.factbox-stat + .factbox-stat { padding-top: var(--s-3); border-top: 1px solid var(--border); }
.factbox-stat span { display: block; color: var(--text-subtle); font-size: var(--fs-11); }
.factbox-stat strong {
  display: block;
  margin-top: 2px;
  overflow-wrap: anywhere;
  font-size: var(--fs-16);
  font-variant-numeric: tabular-nums;
}
.factbox-empty { color: var(--text-subtle); font-size: var(--fs-12); }
.related-list { display: grid; margin: calc(var(--s-3) * -1); }
.related-link {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-2);
  min-height: 50px;
  padding: var(--s-2) var(--s-3);
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.related-link:last-child { border-bottom: 0; }
.related-link:hover { background: var(--bg-hover); text-decoration: none; }
.related-link > .ico:first-child,
.related-chevron { color: var(--text-subtle); }
.related-link strong,
.related-link small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.related-link strong { font-size: var(--fs-12); font-weight: var(--fw-semibold); }
.related-link small { margin-top: 1px; color: var(--text-subtle); font-size: var(--fs-11); }

.attachment-upload { display: grid; gap: var(--s-2); margin-bottom: var(--s-3); }
.attachment-picker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--control-h);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--fs-12);
}
.attachment-picker:hover { border-color: var(--brand-600); color: var(--text); }
.attachment-list { display: grid; gap: var(--s-2); }
.attachment-item { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--s-2); align-items: start; }
.attachment-item > .ico { margin-top: 2px; color: var(--text-subtle); }
.attachment-item strong,
.attachment-item small { display: block; overflow-wrap: anywhere; }
.attachment-item strong { font-size: var(--fs-12); }
.attachment-item small { margin-top: 1px; color: var(--text-subtle); font-size: var(--fs-11); }

.factbox-timeline { display: grid; gap: var(--s-3); }
.factbox-timeline li { position: relative; display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: var(--s-2); list-style: none; }
.factbox-timeline strong,
.factbox-timeline small { display: block; }
.factbox-timeline strong { font-size: var(--fs-12); font-weight: var(--fw-medium); }
.factbox-timeline small { margin-top: 1px; color: var(--text-subtle); font-size: var(--fs-11); }
.timeline-dot { width: 7px; height: 7px; margin-top: 5px; border: 2px solid var(--brand-600); border-radius: var(--r-pill); }
.factbox-foot-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: var(--s-3) calc(var(--s-3) * -1) calc(var(--s-3) * -1);
  padding: var(--s-2) var(--s-3);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--fs-11);
}
.factbox-foot-link:hover { background: var(--bg-hover); text-decoration: none; }

@media (min-width: 901px) {
  .document-layout.is-factbox-hidden { grid-template-columns: minmax(0, 1fr); }
  .document-layout.is-factbox-hidden .factbox-pane { display: none; }
}

@media (max-width: 900px) {
  .document-head { display: block; }
  .document-facts { margin-top: var(--s-4); }
  .document-layout { grid-template-columns: minmax(0, 1fr); }
  .factbox-pane { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .document-pane-toggle { display: none; }
}

@media (max-width: 767px) {
  .document-head { padding-top: 0; }
  .document-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  .document-actions { align-items: center; }
  .document-action-group { gap: var(--s-2); }
  .document-action-controls { flex-wrap: wrap; }
  .document-action-controls .btn { min-height: 40px; }
  .document-action-group.is-danger { margin-left: 0; }
  .document-fields { grid-template-columns: minmax(0, 1fr); }
  .factbox-pane { grid-template-columns: minmax(0, 1fr); }
  .fasttab > summary { padding: var(--s-3); }
  .fasttab-body { padding: var(--s-3); }
}

/* ==========================================================================
   activity timeline
   ========================================================================== */

.timeline { position: relative; padding-left: var(--s-6); }
.timeline::before {
  content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px;
  width: 2px; background: var(--border);
}
.timeline-item { position: relative; padding-bottom: var(--s-4); }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: ""; position: absolute; left: calc(var(--s-6) * -1 + 3px); top: 5px;
  width: 8px; height: 8px; border-radius: var(--r-pill);
  background: var(--n-0); border: 2px solid var(--n-400);
}
.timeline-item.is-financial::before { border-color: var(--brand-600); }
.timeline-item.is-warning::before { border-color: var(--warn-600); }
.timeline-head { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.timeline-action { font-size: var(--fs-13); font-weight: var(--fw-medium); }
.timeline-time { font-size: var(--fs-12); color: var(--text-subtle); }
.timeline-detail { margin-top: 2px; font-size: var(--fs-12); color: var(--text-muted); }

/* ==========================================================================
   drawer + dialog
   ========================================================================== */

.scrim {
  position: fixed; inset: 0;
  background: rgba(22, 27, 34, .38);
  z-index: var(--z-drawer);
}

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(520px, 100%);
  background: var(--bg-surface);
  box-shadow: var(--shadow-lg);
  z-index: calc(var(--z-drawer) + 1);
  display: flex; flex-direction: column;
}
.drawer-head, .dialog-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-4);
  border-bottom: 1px solid var(--border);
}
.drawer-head h2, .dialog-head h2 { font-size: var(--fs-16); }
.drawer-body, .dialog-body { flex: 1; overflow-y: auto; padding: var(--s-4); }
.drawer-foot, .dialog-foot {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--border);
  background: var(--n-25);
}
.drawer-foot .spacer, .dialog-foot .spacer { flex: 1; }

dialog.dialog {
  width: min(480px, calc(100vw - var(--s-8)));
  /* Bounded, so the head and foot stay put and only the body scrolls. Without
     this a long form (the account editor has four fieldsets) grows past the
     viewport and takes its own Save button off-screen with it. */
  max-height: min(86vh, 900px);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  color: var(--text);
  /* A dialog is promoted to the top layer, but it still inherits from wherever
     its markup sits — and a confirm dialog is declared inside the table cell
     whose button opens it, so `td.actions { white-space: nowrap }` reaches
     straight into the panel and runs its sentences off the right edge, clipped
     and unreadable. Nothing about the cell should describe the dialog. */
  white-space: normal;
  text-align: left;
}

/* `display` belongs on [open] and nowhere else.
   The browser hides a closed dialog with `dialog:not([open]) { display: none }`
   — one type plus one attribute, the same specificity as `dialog.dialog`, and
   author styles win ties against the user-agent sheet. So setting `display`
   on the bare selector un-hides every closed dialog on the page and dumps its
   contents into the document flow. That shipped: the application screen showed
   its "Correct contact details" form and the keyboard-shortcuts panel stacked
   at the bottom of the page. The explicit `none` below is belt and braces so a
   future edit to the open rule cannot resurrect it. */
dialog.dialog:not([open]) { display: none; }
dialog.dialog[open] {
  display: flex;
  flex-direction: column;
  /* A floor, not a design choice.
     Every dialog here is a head, a body and a foot — none is ever legitimately
     shorter than this. The floor exists so that if some engine resolves the
     column's height to nothing (a zero-basis child, an unsupported `min()` in
     max-height, a `fit-content` that collapses), the user still gets a panel
     they can read and close instead of a white line over a greyed page, which
     looks like the application broke. */
  min-height: 160px;
}
/* The flex chain has to run all the way down. Every dialog wraps its head,
   body and foot in a single <form>, so constraining only the <dialog> leaves
   that form free to overflow and take the Save button off-screen with it —
   which is exactly what happened. `min-height: 0` is what lets the body
   actually shrink and scroll rather than pushing its siblings out. */
dialog.dialog > form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* `1 1 auto`, not `1`. The shorthand `flex: 1` means `flex-basis: 0`, so the
     form contributes nothing to the dialog's intrinsic height and the box is
     sized purely by what the container resolves to. Chromium and current
     WebKit resolve that from content anyway, but it is circular reasoning the
     spec does not require them to do — and in the fallback path the dialog is
     `height: fit-content`, where a zero-basis child can collapse the whole
     panel to a sliver over a painted backdrop. Basing on content costs
     nothing and removes the dependency. */
  flex: 1 1 auto;
}
dialog.dialog .dialog-head, dialog.dialog .dialog-foot { flex: none; }
dialog.dialog .dialog-body { min-height: 0; }
dialog.dialog::backdrop { background: rgba(22, 27, 34, .38); }

/* Fallback for browsers with no top-layer support, flagged from app.js.
   Without this the dialog opens in document flow at the bottom of the page and
   the click appears to do nothing at all. ::backdrop only exists for a modal
   dialog, so the scrim is painted on <body> instead. */
body.dialog-fallback-open { overflow: hidden; }
body.dialog-fallback-open::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(22, 27, 34, .38);
  z-index: calc(var(--z-dialog) - 1);
}
body.dialog-fallback-open dialog.dialog[open] {
  position: fixed;
  inset: 0;
  margin: auto;
  /* Deliberately not `height: fit-content`. With `inset: 0` that asks the box
     to size itself from content while also being stretched to the viewport,
     and an engine that resolves those in the wrong order collapses it. The
     max-height on `dialog.dialog` already bounds it; letting the height stay
     `auto` is both simpler and one less thing to resolve. */
  height: auto;
  z-index: var(--z-dialog);
}
dialog.dialog-wide { width: min(680px, calc(100vw - var(--s-8))); }

#new-loading-instruction.dialog-wide {
  width: min(1180px, calc(100vw - var(--s-8)));
  max-height: min(92vh, 980px);
}
#new-loading-instruction .dialog-body { padding: 0; }
.li-builder { min-width: 0; }
.li-builder-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--border);
  background: var(--bg-sunken);
  list-style: none;
}
.li-builder-steps li { display: flex; align-items: center; gap: var(--s-2); color: var(--text-muted); font-size: var(--fs-12); }
.li-builder-steps li + li { border-left: 1px solid var(--border); padding-left: var(--s-4); }
.li-builder-steps span,
.li-builder-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  border: 1px solid var(--brand-300);
  border-radius: var(--r-pill);
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
}
.li-builder-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; align-items: start; }
.li-builder-form { min-width: 0; padding: var(--s-5); }
.li-builder-section {
  display: grid;
  gap: var(--s-3);
  padding-bottom: var(--s-4);
  margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--border);
}
.li-builder-section-head { display: flex; align-items: center; gap: var(--s-3); }
.li-builder-section-head > div { min-width: 0; }
.li-builder-section-head p { margin: 1px 0 0; color: var(--text-subtle); font-size: var(--fs-11); }
.li-builder-title { font-size: var(--fs-14); }
.li-release-section { border-bottom: 0; }
.li-builder-review {
  position: sticky;
  top: 0;
  min-height: 100%;
  padding: var(--s-5);
  border-left: 1px solid var(--border);
  background: var(--bg-sunken);
}
.li-builder-review-head { padding-bottom: var(--s-4); border-bottom: 1px solid var(--border); }
.li-builder-review-head span { display: block; color: var(--text-subtle); font-size: var(--fs-11); font-weight: var(--fw-bold); text-transform: uppercase; }
.li-builder-review-head strong { display: block; margin-top: var(--s-1); font-family: var(--font-mono); font-size: var(--fs-16); }
.li-builder-review dl { display: grid; gap: 0; margin: 0; }
.li-builder-review dl > div { padding: var(--s-3) 0; border-bottom: 1px solid var(--border); }
.li-builder-review dt { color: var(--text-subtle); font-size: var(--fs-11); }
.li-builder-review dd { margin: 2px 0 0; overflow-wrap: anywhere; color: var(--text); font-size: var(--fs-12); font-weight: var(--fw-semibold); }
.li-requirements-table table { min-width: 680px; }
.li-release-table table { min-width: 900px; }
.li-release-table input[type="checkbox"] { width: 18px; height: 18px; }
.li-release-table tr:has(input:checked) { background: var(--bg-selected); }
.li-release-chooser-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.li-release-chooser-head strong { font-size: var(--fs-12); }
.li-release-chooser-head span { color: var(--text-subtle); font-size: var(--fs-11); }
.li-release-chooser-head b { color: var(--text); font-variant-numeric: tabular-nums; }
.li-release-empty {
  margin: 0;
  padding: var(--s-3);
  border: 1px dashed var(--border-strong);
  color: var(--text-muted);
  text-align: center;
}
.li-coverage-status {
  margin: 0;
  padding: var(--s-2) var(--s-3);
  background: var(--bg-sunken);
  color: var(--text-muted);
  font-size: var(--fs-13);
  font-weight: 600;
}
.li-coverage-status.is-complete { background: var(--pos-50); color: var(--pos-700); }
.li-coverage-status.is-error { background: var(--neg-50); color: var(--neg-700); }

/* Loading instruction register and document -------------------------------- */
.table-sub { display: block; margin-top: 2px; color: var(--text-subtle); font-size: var(--fs-11); font-weight: var(--fw-regular); }
.li-queue-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: var(--s-4);
  border-block: 1px solid var(--border);
  background: var(--bg-surface);
}
.li-queue-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-width: 0;
  min-height: 54px;
  padding: var(--s-3) var(--s-4);
  color: var(--text-muted);
}
.li-queue-item + .li-queue-item { border-left: 1px solid var(--border); }
.li-queue-item:hover { background: var(--bg-hover); color: var(--text); text-decoration: none; }
.li-queue-item.is-active { box-shadow: inset 0 -2px var(--brand-600); background: var(--bg-selected); color: var(--brand-700); }
.li-queue-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-12); }
.li-queue-item strong { font-size: var(--fs-18); font-variant-numeric: tabular-nums; }
.li-register td { vertical-align: middle; }
.li-register td strong { font-size: var(--fs-12); font-weight: var(--fw-semibold); }
.li-register-number { font-family: var(--font-mono); font-weight: var(--fw-bold); }
.li-register-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin: var(--s-3) 0 0; }
.li-register-card dt { color: var(--text-subtle); font-size: var(--fs-11); }
.li-register-card dd { margin: 2px 0 0; overflow-wrap: anywhere; font-size: var(--fs-12); font-weight: var(--fw-semibold); }

.li-lifecycle {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0 0 var(--s-4);
  padding: var(--s-3) var(--s-4);
  overflow-x: auto;
  border-block: 1px solid var(--border);
  background: var(--bg-surface);
  list-style: none;
}
.li-lifecycle li { position: relative; display: flex; align-items: center; gap: var(--s-2); min-width: 120px; color: var(--text-subtle); }
.li-lifecycle li:not(:last-child)::after { content: ""; position: absolute; top: 13px; right: var(--s-3); left: 38px; height: 1px; background: var(--border-strong); }
.li-lifecycle-marker {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 26px;
  height: 26px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--bg-surface);
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
}
.li-lifecycle strong,
.li-lifecycle small { display: block; }
.li-lifecycle strong { color: inherit; font-size: var(--fs-12); }
.li-lifecycle small { margin-top: 1px; font-size: 10px; white-space: nowrap; }
.li-lifecycle li.is-complete { color: var(--pos-700); }
.li-lifecycle li.is-complete .li-lifecycle-marker { border-color: var(--pos-600); background: var(--pos-600); color: var(--n-0); }
.li-lifecycle li.is-current { color: var(--brand-700); }
.li-lifecycle li.is-current .li-lifecycle-marker { border: 2px solid var(--brand-600); background: var(--brand-50); }
.li-lifecycle.is-cancelled { opacity: .65; }

.li-general-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
.li-general-grid > section + section { padding-left: var(--s-6); border-left: 1px solid var(--border); }
.li-general-grid h3 { margin-bottom: var(--s-4); color: var(--text-muted); font-size: var(--fs-12); }
.li-coverage-summary { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; margin: calc(var(--s-4) * -1) calc(var(--s-4) * -1) var(--s-4); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border); background: var(--bg-sunken); }
.li-coverage-summary span { color: var(--text-subtle); font-size: var(--fs-11); }
.li-coverage-summary strong { margin-right: 3px; color: var(--text); font-size: var(--fs-13); font-variant-numeric: tabular-nums; }
.li-components { display: grid; }
.li-component + .li-component { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--border); }
.li-component-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.li-component-head h3 { font-size: var(--fs-16); }
.li-component-metrics { display: flex; gap: var(--s-5); flex-wrap: wrap; margin-top: var(--s-3); color: var(--text-subtle); font-size: var(--fs-11); }
.li-component-metrics strong { margin-left: 3px; color: var(--text); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
.li-coverage-meter { height: 4px; margin: var(--s-3) 0; overflow: hidden; border-radius: var(--r-pill); background: var(--bg-sunken); }
.li-coverage-meter span { display: block; height: 100%; border-radius: inherit; background: var(--pos-600); }
.li-component .table-wrap table { min-width: 820px; }
.li-gate-verification { display: grid; justify-items: center; gap: var(--s-2); text-align: center; }
.li-gate-verification img { width: 112px; height: 112px; padding: var(--s-2); background: white; border: 1px solid var(--border); border-radius: var(--r-sm); }
.li-gate-verification strong { font-family: var(--font-mono); font-size: var(--fs-13); }
.li-gate-verification span { color: var(--text-subtle); font-size: var(--fs-11); }

@media (max-width: 960px) {
  .li-queue-strip { grid-template-columns: repeat(5, minmax(120px, 1fr)); overflow-x: auto; }
  .li-builder-layout { grid-template-columns: minmax(0, 1fr); }
  .li-builder-review { position: static; border-top: 1px solid var(--border); border-left: 0; }
  .li-builder-review dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-4); }
}

@media (max-width: 767px) {
  #new-loading-instruction.dialog-wide { width: calc(100vw - var(--s-4)); }
  .li-builder-steps { padding-inline: var(--s-3); }
  .li-builder-steps li + li { padding-left: var(--s-2); }
  .li-builder-steps strong { font-size: var(--fs-11); }
  .li-builder-form,
  .li-builder-review { padding: var(--s-3); }
  .li-builder-section-head p { display: none; }
  .li-builder-review dl,
  .li-general-grid { grid-template-columns: minmax(0, 1fr); }
  .li-general-grid > section + section { padding-top: var(--s-5); padding-left: 0; border-top: 1px solid var(--border); border-left: 0; }
  .li-lifecycle { padding-inline: var(--s-3); }
  .li-component-metrics { gap: var(--s-3); }
}

/* ==========================================================================
   toasts
   ========================================================================== */

.toast-region {
  position: fixed; right: var(--s-4); bottom: var(--s-4);
  z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: var(--s-2);
  width: min(380px, calc(100vw - var(--s-8)));
}
.toast {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--n-800);
  color: var(--n-0);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-13);
}
.toast .ico { flex: none; margin-top: 2px; }
.toast-success .ico { color: var(--pos-300); }
.toast-error { background: var(--neg-700); }

/* ==========================================================================
   pagination
   ========================================================================== */

.pagination {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-12); color: var(--text-muted);
  flex-wrap: wrap;
}
.pagination .pages { display: flex; align-items: center; gap: var(--s-1); }
.page-btn {
  min-width: 28px; height: 28px; padding: 0 var(--s-2);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--bg-surface); color: var(--text-muted);
  font: inherit; font-size: var(--fs-12); cursor: pointer;
}
.page-btn:hover:not([disabled]) { background: var(--n-50); color: var(--text); }
.page-btn[aria-current="page"] { background: var(--brand-600); border-color: var(--brand-600); color: var(--n-0); font-weight: var(--fw-semibold); }
.page-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ==========================================================================
   filter bar and toolbar
   ========================================================================== */

.toolbar {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.toolbar .spacer { flex: 1; }
.toolbar-search { position: relative; flex: 0 1 300px; min-width: 200px; }
.toolbar-search input { padding-left: var(--s-8); }
.toolbar-search .ico { position: absolute; left: var(--s-3); top: 50%; transform: translateY(-50%); color: var(--n-400); pointer-events: none; }

.list-toolbar {
  min-height: 52px;
  margin-bottom: var(--s-3);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.card > .list-toolbar {
  min-height: 48px;
  margin-bottom: 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.list-filter { position: relative; display: flex; align-items: center; min-width: 150px; }
.list-filter .ico { position: absolute; left: var(--s-3); color: var(--n-400); pointer-events: none; }
.list-filter select { padding-left: var(--s-8); }
.toolbar-result { color: var(--text-muted); font-size: var(--fs-12); white-space: nowrap; }
.toolbar-result strong { color: var(--text); font-variant-numeric: tabular-nums; }
.list-clear { color: var(--text-muted); }
[data-list] [hidden] { display: none !important; }
.calculated { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.code-block {
  margin: 0; padding: var(--s-3); overflow: auto; white-space: pre-wrap;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--n-50); color: var(--text); font: var(--fs-12)/1.55 var(--font-mono);
}
.sort-button {
  display: inline-flex; align-items: center; gap: var(--s-1); width: 100%;
  padding: 0; border: 0; background: transparent; color: inherit;
  font: inherit; font-weight: inherit; text-align: inherit; cursor: pointer;
}
.num .sort-button { justify-content: flex-end; }
.sort-button::after { content: ""; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; opacity: 0; }
.sort-button[data-direction="asc"]::after { border-bottom: 5px solid currentColor; opacity: .75; }
.sort-button[data-direction="desc"]::after { border-top: 5px solid currentColor; opacity: .75; }

tbody tr.row-link { cursor: pointer; }
tbody tr.row-link:active { background: var(--bg-selected); }

.filter-chip {
  display: inline-flex; align-items: center; gap: var(--s-1);
  height: var(--control-h); padding: 0 var(--s-2) 0 var(--s-3);
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  background: var(--bg-surface); color: var(--text);
  font: inherit; font-size: var(--fs-12); cursor: pointer; white-space: nowrap;
}
.filter-chip:hover { background: var(--n-50); }
.filter-chip.active { background: var(--brand-50); border-color: var(--brand-300); color: var(--brand-700); font-weight: var(--fw-semibold); }
.filter-chip .remove { display: grid; place-items: center; width: 16px; height: 16px; border-radius: var(--r-sm); border: 0; background: transparent; color: inherit; cursor: pointer; }
.filter-chip .remove:hover { background: rgba(0,0,0,.08); }

/* Bulk bar replaces the toolbar rather than stacking, so the table never
   jumps when a row is selected. */
.bulk-bar {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--brand-50);
  border-bottom: 1px solid var(--brand-200);
  font-size: var(--fs-13);
  flex-wrap: wrap;
}
.bulk-bar .count { font-weight: var(--fw-semibold); color: var(--brand-700); }
.bulk-bar .spacer { flex: 1; }

/* ==========================================================================
   menus
   ========================================================================== */

.menu {
  position: absolute;
  min-width: 200px;
  padding: var(--s-1);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  z-index: var(--z-dialog);
}
.menu-item {
  display: flex; align-items: center; gap: var(--s-2);
  width: 100%; padding: var(--s-2) var(--s-3);
  border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--text);
  font: inherit; font-size: var(--fs-13); text-align: left; cursor: pointer;
}
.menu-item:hover { background: var(--n-50); text-decoration: none; }
.menu-item.danger { color: var(--neg-700); }
.menu-item.danger:hover { background: var(--neg-50); }
.menu-item[disabled] { opacity: .5; cursor: not-allowed; }
.menu-sep { height: 1px; margin: var(--s-1) 0; background: var(--border); border: 0; }
.menu-label { padding: var(--s-2) var(--s-3) var(--s-1); font-size: var(--fs-11); text-transform: uppercase; letter-spacing: .05em; color: var(--text-subtle); font-weight: var(--fw-semibold); }
.menu-end { right: 0; }
.notification-menu { width: min(380px, calc(100vw - var(--s-6))); max-height: 70vh; overflow-y: auto; }
.notification-item { align-items: flex-start; }
.notification-copy { min-width: 0; }
.notification-title, .notification-detail { display: block; }
.notification-title { font-weight: var(--fw-medium); }
.user-menu { width: 240px; }
.user-menu-summary { padding: 0 var(--s-3) var(--s-2); }
.theme-menu-item .theme-switch { margin-left: auto; }
.theme-icon { display: inline-grid; place-items: center; }
[data-theme="dark"] .theme-icon-light,
[data-theme="light"] .theme-icon-dark { display: none; }
.theme-switch {
  position: relative;
  width: 30px;
  height: 18px;
  flex: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--bg-sunken);
}
.theme-switch > span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-subtle);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
[data-theme-toggle][aria-checked="true"] .theme-switch {
  border-color: var(--brand-600);
  background: var(--brand-600);
}
[data-theme-toggle][aria-checked="true"] .theme-switch > span {
  background: var(--text-invert);
  transform: translateX(12px);
}

/* ==========================================================================
   command centre
   ========================================================================== */

dialog.command-dialog {
  width: min(640px, calc(100vw - var(--s-6)));
  max-height: min(76vh, 680px);
  padding: 0;
  overflow: hidden;
}
.command-dialog [hidden] { display: none !important; }
.command-search {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  min-height: 58px;
  padding: 0 var(--s-4);
  border-bottom: 1px solid var(--border);
}
.command-search > .ico { color: var(--text-subtle); }
dialog.command-dialog .command-search input[type="search"] {
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: var(--fs-16);
}
.command-dialog .command-search input[type="search"]:focus-visible { box-shadow: none; }
.command-results {
  flex: 1;
  min-height: 220px;
  max-height: min(58vh, 520px);
  overflow-y: auto;
  padding: var(--s-2);
}
.command-group + .command-group { margin-top: var(--s-2); }
.command-group h3 {
  padding: var(--s-2) var(--s-2) var(--s-1);
  color: var(--text-subtle);
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  text-transform: uppercase;
}
.command-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  min-height: 46px;
  padding: var(--s-1) var(--s-2);
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.command-item:hover, .command-item.is-active { background: var(--bg-selected); text-decoration: none; }
.command-item-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-surface);
  color: var(--brand-700);
}
.command-item-copy { min-width: 0; }
.command-item-copy strong, .command-item-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.command-item-copy strong { font-size: var(--fs-13); }
.command-item-copy small { margin-top: 1px; color: var(--text-subtle); font-size: var(--fs-11); }
.command-item-arrow { grid-column: 4; color: var(--text-subtle); opacity: 0; }
.command-item:hover .command-item-arrow, .command-item.is-active .command-item-arrow { opacity: 1; }
.command-empty {
  display: grid;
  justify-items: center;
  gap: var(--s-2);
  padding: var(--s-10) var(--s-4);
  color: var(--text-muted);
  text-align: center;
}
.command-empty span { color: var(--text-subtle); font-size: var(--fs-12); }
.command-foot {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-height: 38px;
  padding: 0 var(--s-4);
  border-top: 1px solid var(--border);
  background: var(--bg-sunken);
  color: var(--text-subtle);
  font-size: var(--fs-11);
}
.command-foot span { display: inline-flex; align-items: center; gap: var(--s-1); }

/* ==========================================================================
   loading
   ========================================================================== */

.skeleton {
  background: linear-gradient(90deg, var(--n-100) 25%, var(--n-50) 37%, var(--n-100) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: var(--r-sm);
}
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.spinner {
  width: 15px; height: 15px;
  border: 2px solid var(--n-300);
  border-top-color: var(--brand-600);
  border-radius: var(--r-pill);
  animation: spin .7s linear infinite;
  flex: none;
}
.btn:not(.btn-secondary):not(.btn-subtle) .spinner {
  border-color: rgba(255, 255, 255, .4);
  border-top-color: var(--text-invert);
}
@keyframes spin { to { transform: rotate(360deg); } }

.is-busy { opacity: .6; pointer-events: none; }

/* ==========================================================================
   sign-in
   ========================================================================== */

/* Sign-in is a split screen: the product on the left, the form on the right.
   Two independent columns rather than a centred card, so the first screen
   anyone sees says what the system is before it asks who they are. */
.signin-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--bg-surface);
}

.signin-theme-toggle {
  position: fixed;
  top: var(--s-4);
  right: var(--s-4);
  z-index: var(--z-topbar);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 36px;
  padding: 0 var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-surface);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-12);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.signin-theme-toggle:hover { background: var(--bg-hover); }

.signin-aside {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-10);
  background: linear-gradient(160deg, var(--brand-700) 0%, var(--chrome) 100%);
  color: var(--n-0);
}

.signin-mark {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  flex: none;
  border-radius: var(--r-lg);
  background: var(--n-0);
  color: var(--brand-700);
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  letter-spacing: .02em;
}
.signin-mark:hover { text-decoration: none; }

/* The mark sits above "Sign in" at every width, so the form column is
   anchored rather than starting cold on a heading. Inverted against the
   panel's copy — a white square reads on green, a green square reads on
   white — which is the same mark, not a second one. */
.signin-mark-sm {
  display: grid;
  margin-bottom: var(--s-5);
  background: var(--brand-600);
  color: var(--n-0);
}

/* Centred in the space between the mark and the footer, rather than shoved
   to the bottom — at the bottom it reads as a caption on an empty rectangle
   instead of as the thing the panel is for. */
.signin-pitch { margin: auto 0; }
.signin-pitch h1 {
  font-size: var(--fs-32);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.signin-pitch p {
  margin-top: var(--s-4);
  max-width: 44ch;
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: rgba(255, 255, 255, .8);
}

.signin-aside-foot {
  margin-top: 0;
  font-size: var(--fs-12);
  color: rgba(255, 255, 255, .55);
}

.signin-main {
  display: grid;
  place-items: center;
  padding: var(--s-8) var(--s-6);
}

.signin { width: 100%; max-width: 360px; }

.signin-head { margin-bottom: var(--s-6); }
.signin-head h2 {
  font-size: var(--fs-22);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
}
.signin-head p { margin-top: var(--s-2); color: var(--text-muted); font-size: var(--fs-13); }
.signin-lede { margin-bottom: var(--s-4); color: var(--text-muted); font-size: var(--fs-13); }

.signin-alt-quiet { margin-top: var(--s-3); text-align: right; font-size: var(--fs-13); }

.signin-alt {
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: var(--fs-13);
  color: var(--text-muted);
}
.signin-alt a { font-weight: var(--fw-semibold); }

.signin-foot { margin-top: var(--s-5); text-align: center; font-size: var(--fs-12); color: var(--text-subtle); }

/* One column below this. The panel goes rather than stacking: on a phone it
   would push the form a full screen down, and somebody signing in wants the
   form, not the pitch. */
@media (max-width: 900px) {
  .signin-page { grid-template-columns: 1fr; }
  .signin-aside { display: none; }
  .signin-main { align-items: start; padding-top: var(--s-12); }
}

/* ==========================================================================
   utilities
   ========================================================================== */

.muted { color: var(--text-muted); }
.subtle { color: var(--text-subtle); }
.mono { font-family: var(--font-mono); }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.center { text-align: center; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flex { display: flex; align-items: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-1 { gap: var(--s-1); } .gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); } .gap-4 { gap: var(--s-4); }
.wrap { flex-wrap: wrap; }
.stack > * + * { margin-top: var(--s-3); }
.mt-0 { margin-top: 0; } .mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); } .mt-4 { margin-top: var(--s-4); } .mt-6 { margin-top: var(--s-6); }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: var(--s-2); } .mb-3 { margin-bottom: var(--s-3); } .mb-4 { margin-bottom: var(--s-4); }
.fs-12 { font-size: var(--fs-12); } .fs-13 { font-size: var(--fs-13); }
.fw-semibold { font-weight: var(--fw-semibold); }
.hr { height: 1px; background: var(--border); border: 0; margin: var(--s-4) 0; }
.w-full { width: 100%; }

/* ==========================================================================
   responsive
   ========================================================================== */

/* Card fallback for tables. Declared before the breakpoints so the media
   query below can turn it on — putting this after them would win on source
   order and silently leave small screens with no table at all. */
.as-cards { display: none; }

/* The rail keeps its labels at every desktop width.
 *
 * It previously collapsed to unlabelled icons below 1280px, which is an
 * ordinary laptop width — so on most machines the entire navigation became
 * eighteen anonymous glyphs and destinations were effectively unfindable.
 * Collapsing is now a deliberate user choice (data-collapsed), not something
 * the viewport decides. */
@media (max-width: 1400px) {
  .content { padding: var(--s-4) var(--s-4) var(--s-16); }
}

@media (max-width: 1200px) {
  .col-secondary { display: none; }
}

/* User-chosen collapse. Labels become tooltips via the title attribute the
   markup already carries. */
.rail[data-collapsed="true"] {
  flex: 0 0 var(--rail-w-collapsed);
  width: var(--rail-w-collapsed);
}
.rail[data-collapsed="true"] .nav-group-label,
.rail[data-collapsed="true"] .nav-cluster-label,
.rail[data-collapsed="true"] .nav-item .label,
.rail[data-collapsed="true"] .nav-count,
.rail[data-collapsed="true"] .rail-toggle .label { display: none; }
.rail[data-collapsed="true"] .nav-item { justify-content: center; padding: var(--s-2); }
.rail[data-collapsed="true"] .nav-group + .nav-group {
  margin-top: var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px solid var(--chrome-line);
}
.rail[data-collapsed="true"] .rail-footer { justify-content: center; }
/* A collapsed item with work waiting still shows that it has some. */
.rail[data-collapsed="true"] .nav-item.has-count::after {
  content: "";
  position: absolute;
  top: 5px; right: 10px;
  width: 6px; height: 6px;
  border-radius: var(--r-pill);
  background: var(--warn-600);
}
.rail[data-collapsed="true"] .nav-item { position: relative; }

/* Rail becomes an overlay drawer. */
@media (max-width: 1024px) {
  .rail {
    position: fixed; top: var(--topbar-h); left: 0; bottom: 0;
    height: auto;
    width: var(--rail-w-expanded, 240px);
    transform: translateX(-100%);
    transition: transform var(--dur) var(--ease);
    box-shadow: var(--shadow-lg);
  }
  .rail[data-open="true"] { transform: none; }
  /* The top bar carries the mark in this tier, so the drawer's own brand
     header would be a second copy — and with the name and portal hidden at
     this width it renders as a bare square in an empty band. */
  .rail-brand { display: none; }
  /* In the overlay tier the rail is always full width and labelled: there is
     no space pressure to justify hiding anything. */
  .rail, .rail[data-collapsed="true"] { flex: none; width: var(--rail-w-expanded, 240px); }
  .rail[data-collapsed="true"] .nav-group-label,
  .rail[data-collapsed="true"] .nav-cluster-label,
  .rail[data-collapsed="true"] .nav-item .label,
  .rail[data-collapsed="true"] .nav-count { display: block; }
  .rail[data-collapsed="true"] .nav-item { justify-content: flex-start; padding: 7px var(--s-4); }
  .rail[data-collapsed="true"] .nav-item.has-count::after { display: none; }
  .nav-toggle { display: grid !important; }
  .col-tertiary { display: none; }
}

@media (min-width: 1025px) { .nav-toggle { display: none !important; } }

/* Below this, tables become cards. The .as-cards markup is emitted alongside
   every table; only one of the pair is ever visible. */
@media (max-width: 767px) {
  .topbar { padding: 0 var(--s-3); gap: var(--s-2); }
  .brand-name, .brand-portal, .user-meta { display: none; }
  .content { padding: var(--s-3) var(--s-3) var(--s-12); }
  .tabs { width: 100%; min-width: 0; max-width: 100%; }
  .page-head { flex-direction: column; gap: var(--s-3); }
  .page-actions { width: 100%; flex-wrap: wrap; }
  .page-actions .btn { flex: 1 1 140px; min-width: 0; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  /* Swap a table for cards ONLY where a card fallback actually exists.
   *
   * Hiding .table-wrap unconditionally made every server-rendered table
   * vanish on mobile — the content disappeared rather than merely being
   * awkward. A sideways-scrolling table is a poor experience; an empty page
   * is a broken one. :has() keeps the swap opt-in per card. */
  /* The card fallback must be a SIBLING of the scrolling wrapper, never a
     child of it — hiding the wrapper would otherwise hide the fallback too
     and the page renders empty, which is the failure this whole opt-in
     mechanism exists to avoid. */
  .card:has(.as-cards) > .card-body > .table-wrap,
  .card:has(.as-cards) > .table-wrap,
  .card:has(.as-cards) .table-scroll:not(:has(.as-cards)),
  .fasttab:has(.as-cards) .table-wrap,
  .table-pair:has(.as-cards) .table-wrap { display: none; }
  .as-cards { display: block; }
  .record-facts { grid-template-columns: repeat(2, 1fr); }
  .kv { grid-template-columns: 1fr; gap: var(--s-1); }
  .kv dd { margin-bottom: var(--s-3); }
  .form-actions { margin-left: calc(var(--s-3) * -1); margin-right: calc(var(--s-3) * -1); }
}


.rec-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-3);
  margin-bottom: var(--s-2);
  background: var(--bg-surface);
}
.rec-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-2); }
.rec-card-title { font-weight: var(--fw-semibold); font-size: var(--fs-13); }
.rec-card-sub { font-size: var(--fs-12); color: var(--text-muted); margin-top: 1px; }
.rec-card-amount {
  margin-top: var(--s-3);
  font-size: var(--fs-18);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
.rec-card-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-2); margin-top: var(--s-3); }
.rec-card-fact .l { font-size: var(--fs-11); color: var(--text-subtle); text-transform: uppercase; letter-spacing: .04em; }
.rec-card-fact .v { font-size: var(--fs-13); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }

@media print {
  .topbar, .rail, .page-actions, .toolbar, .pagination { display: none !important; }
  .content { padding: 0; }
  .card { border: 1px solid var(--n-300); box-shadow: none; break-inside: avoid; }
}

/* ==========================================================================
   POS surface
   ==========================================================================
   The attendant terminal is deliberately the least dense screen in the
   platform (POS-006 requires it to show less, not more): one decision at a
   time, large targets, and a verdict readable at arm's length on a forecourt.
   ========================================================================== */

.portal-pos .content { max-width: 640px; margin: 0 auto; }
.portal-pos .card-body { padding: var(--s-5); }
.portal-pos input, .portal-pos select { height: 44px; font-size: var(--fs-16); }
.portal-pos .btn { height: 44px; font-size: var(--fs-14); }

.pos-result {
  border-radius: var(--r-lg);
  border: 2px solid;
  padding: var(--s-6) var(--s-5);
  text-align: center;
  margin-bottom: var(--s-4);
}
.pos-approved { background: var(--pos-50); border-color: var(--pos-600); color: var(--pos-700); }
.pos-declined { background: var(--neg-50); border-color: var(--neg-600); color: var(--neg-700); }

/* The verdict carries a word, a colour and a border weight — never colour
   alone, and legible without reading the detail beneath it. */
.pos-result .verdict {
  font-size: var(--fs-28);
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.pos-amount {
  margin: var(--s-3) 0;
  font: var(--fw-bold) 40px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: var(--text);
}
.pos-result .reason { font-size: var(--fs-14); }
.pos-result .ref {
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  color: var(--text-muted);
}

/* ==========================================================================
   legacy component aliases
   ==========================================================================
   Several templates still compose from the earlier macro library. These map
   its class names onto the current system so the two render identically,
   rather than leaving those screens unstyled while the templates are migrated.
   ========================================================================== */


.tile {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-4);
}
.tile .label {
  display: block;
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-subtle);
}
.tile .value {
  margin-top: var(--s-2);
  font-size: var(--fs-22);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.tile .meta { margin-top: var(--s-1); font-size: var(--fs-12); color: var(--text-subtle); }
.tile.negative .value { color: var(--neg-700); }

/* The earlier templates emit .flash where the shell now emits .alert. */
.flash {
  display: block;
  padding: var(--s-3) var(--s-4);
  border: 1px solid;
  border-radius: var(--r-md);
  margin-bottom: var(--s-4);
  font-size: var(--fs-13);
}
.flash-success { background: var(--pos-50);  border-color: var(--pos-200);  color: var(--pos-700); }
.flash-error   { background: var(--neg-50);  border-color: var(--neg-200);  color: var(--neg-700); }
.flash-warning { background: var(--warn-50); border-color: var(--warn-200); color: var(--warn-700); }
.flash-info    { background: var(--brand-50); border-color: var(--brand-200); color: var(--brand-700); }

.faint { color: var(--text-subtle); }
hr.rule { border: 0; border-top: 1px solid var(--border); margin: var(--s-4) 0; }

/* Anchors the absolutely-positioned menu panels in the top bar. */
.menu-host { position: relative; }

/* ==========================================================================
   public front door (section 62)
   ==========================================================================
   The only surface reachable without signing in. It gets its own shell — no
   rail, no search, no user menu — because a visitor has none of those, and
   showing chrome that leads nowhere is worse than showing none at all.

   The visual language is the application's, not a separate marketing skin: the
   same tokens, type scale and card treatment, so the step from landing page to
   signed-in product does not feel like two different products.
   ========================================================================== */

.public-page { background: var(--bg-app); }

.public-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  height: var(--topbar-h);
  padding: 0 var(--s-6);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}
.public-nav { display: flex; align-items: center; gap: var(--s-4); }
.public-nav a { font-size: var(--fs-13); }

.public-main {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--s-8) var(--s-6) var(--s-10);
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}

.public-foot {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--s-6);
  border-top: 1px solid var(--border);
  font-size: var(--fs-13);
  color: var(--text-muted);
}
.public-foot p + p { margin-top: var(--s-2); }

/* ------------------------------------------------------------------- hero */

/* The green band. Same surface as the sign-in panel and the navigation rail,
   so the front door belongs to the same product as everything behind it. */
.hero-band {
  background: linear-gradient(160deg, var(--brand-700) 0%, var(--chrome) 100%);
  color: var(--n-0);
}
.hero-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--s-12) var(--s-6) var(--s-16);
}

.hero-band .eyebrow { color: var(--brand-200); }
.hero-band h1 { font-size: var(--fs-32); font-weight: var(--fw-bold); }
.hero-band .lede { color: rgba(255, 255, 255, .82); font-size: var(--fs-16); }
/* .55 measured 3.62:1 against the *lighter* end of the gradient — below AA
   for text this size. A translucent white over a gradient cannot be checked
   from the tokens, so it is measured in the browser instead. */
.hero-band .subtle { color: rgba(255, 255, 255, .75); }

/* On a dark surface the primary action has to invert. A green fill on green
   is not a quiet button, it is an invisible one. */
.hero-band .btn {
  background: var(--n-0);
  border-color: var(--n-0);
  color: var(--brand-700);
}
.hero-band .btn:hover { background: var(--brand-50); border-color: var(--brand-50); }
.hero-band .btn-secondary {
  background: transparent;
  border-color: rgba(255, 255, 255, .4);
  color: var(--n-0);
}
.hero-band .btn-secondary:hover { background: rgba(255, 255, 255, .12); border-color: var(--n-0); }
.hero-band :focus-visible { box-shadow: 0 0 0 2px var(--chrome), 0 0 0 4px var(--n-0); }

.hero { padding: 0; }
.hero-copy { max-width: 62ch; }
.hero h1 {
  font-size: var(--fs-28);
  line-height: var(--lh-tight);
  letter-spacing: -.02em;
  margin: var(--s-2) 0 var(--s-4);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin: var(--s-5) 0 var(--s-3);
}

.eyebrow {
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--brand-600);
  margin: 0;
}

/* Global counterpart of the sign-in card's lede. */
.lede { color: var(--text-muted); font-size: var(--fs-14); max-width: 68ch; }

/* --------------------------------------------------------------- features */

.feature-grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.feature-grid > * { min-width: 0; }
.feature {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}
.feature h2 { font-size: var(--fs-14); margin: var(--s-3) 0 var(--s-2); }
.feature p { font-size: var(--fs-13); color: var(--text-muted); margin: 0; }
.feature .feature-ico { color: var(--brand-600); }

/* ------------------------------------------------------- sign-in chooser */

.portal-section h2 { font-size: var(--fs-18); margin-bottom: var(--s-2); }
.portal-grid {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  margin-top: var(--s-4);
}
.portal-grid > * { min-width: 0; }
.portal-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-4);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: inherit;
}
.portal-card:hover { border-color: var(--brand-600); }
.portal-name {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-14);
  color: var(--brand-700);
}

.process { margin: var(--s-4) 0; padding-left: var(--s-5); }
.process li { margin-bottom: var(--s-3); font-size: var(--fs-13); color: var(--text-muted); }
.process li strong { color: var(--text); }

/* ----------------------------------------------------- application wizard */

.wizard { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); }
.wizard > * { min-width: 0; }
@media (max-width: 900px) { .wizard { grid-template-columns: minmax(0, 1fr); } }

.wizard-aside {
  align-self: start;
  padding: var(--s-5);
  background: var(--n-50);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  font-size: var(--fs-13);
  color: var(--text-muted);
}
.wizard-aside h2 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  color: var(--text);
  margin: 0 0 var(--s-3);
}
.wizard-aside ul { padding-left: var(--s-5); margin: var(--s-2) 0; }
.wizard-aside li { margin-bottom: var(--s-1); }
.wizard-aside p + p { margin-top: var(--s-3); }

/* The stage indicator. Scrolls horizontally rather than wrapping into a
   ragged block on a narrow screen, and never scrolls the page with it. */
.wizard-steps { overflow-x: auto; }
.wizard-steps ol {
  display: flex;
  gap: var(--s-2);
  list-style: none;
  margin: 0;
  padding: 0 0 var(--s-2);
}
.wizard-step {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  font-size: var(--fs-12);
  color: var(--text-subtle);
  white-space: nowrap;
}
.wizard-step .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  font-size: var(--fs-11);
  font-variant-numeric: tabular-nums;
}
.wizard-step.is-current { background: var(--brand-50); color: var(--brand-700); font-weight: var(--fw-semibold); }
.wizard-step.is-current .step-num { border-color: var(--brand-600); background: var(--brand-600); color: var(--n-0); }
.wizard-step.is-done { color: var(--pos-700); }
.wizard-step.is-done .step-num { border-color: var(--pos-600); color: var(--pos-700); }
@media (max-width: 700px) {
  /* Only the current step keeps its label; the rest collapse to their number,
     so seven steps still fit rather than forcing a sideways scroll. */
  .wizard-step .step-label { display: none; }
  .wizard-step.is-current .step-label { display: inline; }
}

/* ------------------------------------------------------------ form pieces */

.form-row.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 700px) { .form-row.cols-3 { grid-template-columns: 1fr; } }

/* LND-044 honeypot. Off-screen rather than display:none — some bots skip
   hidden inputs, and a field they can see is a field they will fill. */
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.verify-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--border);
}
.verify-what { display: flex; flex-direction: column; flex: 1 1 220px; min-width: 0; }
.verify-form { display: flex; gap: var(--s-2); }
/* Sits under the whole verify row rather than beside the button, so it reads
   as a note about the channel and not as a label for the field. */
.verify-note {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--fs-12);
  color: var(--text-subtle);
}

.code-input {
  width: 8ch;
  font-family: var(--font-mono);
  letter-spacing: .2em;
  text-align: center;
}

/* The shared table head is sticky, which is right for a long data grid and
   wrong here: this table is four rows of inputs, and the sticky head sits on
   top of the first row and clips its border. */
.people-grid thead th { position: static; }
.people-grid td { padding: var(--s-2) var(--s-2) var(--s-2) 0; }
.people-grid input { width: 100%; }

.doc-item { padding: var(--s-4) 0; border-bottom: 1px solid var(--border); }
.doc-item.is-done { opacity: .85; }
.doc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.doc-head h2 { font-size: var(--fs-14); margin: 0 0 var(--s-1); }
.doc-file {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-13);
  margin: 0 0 var(--s-3);
}
.doc-form { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
.doc-form .field { margin: 0; align-self: stretch; }
.doc-form input[type="file"] { font-size: var(--fs-13); }

/* Definition list used for review summaries and application detail. */
.summary { margin: var(--s-4) 0; }
.summary > div {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--border);
}
@media (max-width: 600px) { .summary > div { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.summary dt { font-size: var(--fs-12); color: var(--text-subtle); }
.summary dd { margin: 0; font-size: var(--fs-13); }

.narrow { max-width: 520px; margin: 0 auto; width: 100%; }

/* A row of sibling actions that each live in their own form — a shared
   .form-actions bar cannot hold them because each needs its own POST target. */
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }

/* Where a credential is coming from, on the notification settings page. The
   badge alone is not enough — "set" and "set, and in every nightly backup" are
   different facts and the second needs a sentence. */
.token-state {
  padding: var(--s-3);
  margin-bottom: var(--s-4);
  background: var(--n-50);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.token-state .help { margin-top: var(--s-2); }

/* The application reference, wherever it appears. */
.ref { font-family: var(--font-mono); letter-spacing: .02em; }


/* ==========================================================================
   printable voucher slip
   ==========================================================================
   Sized for a wallet and for a thermal printer, and deliberately plain: this
   leaves the building, so it must be legible photocopied, folded and in poor
   light. Everything that is not the voucher itself is dropped when printing.
   ========================================================================== */

.voucher-slip {
  max-width: 340px;
  margin: 0 auto;
  padding: var(--s-5);
  background: var(--bg-surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  text-align: center;
}
.voucher-slip .slip-head { margin-bottom: var(--s-4); }
.voucher-slip .slip-qr svg { width: 180px; height: 180px; }
.voucher-slip .slip-code {
  margin: var(--s-3) 0;
  font-family: var(--font-mono);
  font-size: var(--fs-16);
  letter-spacing: .08em;
  word-break: break-all;
}
.voucher-slip .slip-pin {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  margin-bottom: var(--s-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
}
.voucher-slip .slip-pin strong {
  font-family: var(--font-mono);
  font-size: var(--fs-22);
  letter-spacing: .2em;
}
.voucher-slip .pos-kv { text-align: left; }
.voucher-slip .slip-foot {
  margin: var(--s-4) 0 0;
  font-size: var(--fs-12);
  color: var(--text-muted);
}

/* ==========================================================================
   office command centre theme
   ========================================================================== */

@media screen {
  [data-portal="office"] body { background: var(--bg-app); }
  [data-portal="office"] .app { background: var(--bg-app); }
  [data-portal="office"] a { color: var(--brand-700); }

  [data-portal="office"] .rail {
    border-right: 1px solid var(--chrome-line);
    background: var(--chrome);
  }
  [data-portal="office"] .rail-brand {
    height: var(--topbar-h);
    padding: 0 var(--s-5);
    border-bottom-color: transparent;
  }
  [data-portal="office"] .rail-brand .brand-mark,
  [data-portal="office"] .topbar-brand .brand-mark {
    width: 40px;
    height: 40px;
    border-radius: var(--r-lg);
    background: var(--brand-100);
    color: var(--brand-700);
  }
  [data-portal="office"] .rail-brand .brand-name { font-size: var(--fs-14); }
  [data-portal="office"] .rail-brand .brand-portal {
    margin-top: 3px;
    color: var(--chrome-muted);
    opacity: 1;
    font-size: var(--fs-12);
    text-transform: none;
    letter-spacing: 0;
  }
  [data-portal="office"] .rail-nav { padding: var(--s-4) var(--s-3); }
  [data-portal="office"] .nav-cluster-label {
    padding: var(--s-5) var(--s-2) var(--s-2);
    color: var(--chrome-muted);
    font-size: var(--fs-11);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: .08em;
  }
  [data-portal="office"] .nav-cluster-label:first-child { padding-top: var(--s-2); }
  [data-portal="office"] .nav-item {
    min-height: 40px;
    margin: 2px 0;
    padding: var(--s-2) var(--s-3);
    border: 0;
    border-radius: var(--r-lg);
    color: var(--chrome-text);
    font-size: var(--fs-14);
  }
  [data-portal="office"] .nav-item:hover { background: var(--chrome-hover); }
  [data-portal="office"] .nav-item[aria-current] {
    background: var(--chrome-active);
    color: var(--brand-700);
  }
  [data-portal="office"] .nav-item[aria-current] .nav-count { color: var(--n-0); }
  [data-portal="office"] .rail-footer { border-top-color: var(--chrome-line); }

  /* Business Central light navigation ------------------------------------
   * The rail is a quiet Fluent surface in light mode. Teal identifies the
   * current business area; semantic colours are reserved for work counts.
   */
  [data-theme="light"][data-portal="office"] .rail {
    background: var(--bg-surface);
    color: var(--text-muted);
    border-right-color: var(--border);
  }
  [data-theme="light"][data-portal="office"] .rail-brand {
    padding: 0 var(--s-4);
    color: var(--text);
    border-bottom: 1px solid var(--border);
  }
  [data-theme="light"][data-portal="office"] .rail-brand .brand-mark,
  [data-theme="light"][data-portal="office"] .topbar-brand .brand-mark {
    width: 34px;
    height: 34px;
    background: var(--brand-50);
    color: var(--brand-700);
  }
  [data-theme="light"][data-portal="office"] .rail-brand .brand-name { color: var(--text); }
  [data-theme="light"][data-portal="office"] .rail-brand .brand-portal { color: var(--text-subtle); }
  [data-theme="light"][data-portal="office"] .rail-nav { padding: var(--s-2); }
  [data-theme="light"][data-portal="office"] .nav-cluster-label {
    padding: var(--s-4) var(--s-3) var(--s-1);
    color: var(--text-subtle);
  }
  [data-theme="light"][data-portal="office"] .nav-cluster-label:first-child { padding-top: var(--s-2); }
  [data-theme="light"][data-portal="office"] .nav-item {
    min-height: 36px;
    margin: 1px 0;
    padding: 6px var(--s-3);
    border-left: 3px solid transparent;
    border-radius: var(--r-sm);
    color: var(--text-muted);
    font-size: var(--fs-13);
  }
  [data-theme="light"][data-portal="office"] .nav-item:hover {
    background: var(--bg-hover);
    color: var(--text);
  }
  [data-theme="light"][data-portal="office"] .nav-item[aria-current] {
    background: var(--brand-50);
    border-left-color: var(--brand-600);
    color: var(--brand-700);
  }
  [data-theme="light"][data-portal="office"] .nav-count {
    background: var(--n-100);
    color: var(--text-muted);
  }
  [data-theme="light"][data-portal="office"] .nav-count.attention {
    background: var(--warn-50);
    color: var(--warn-700);
  }
  [data-theme="light"][data-portal="office"] .nav-count.urgent {
    background: var(--neg-50);
    color: var(--neg-700);
  }
  [data-theme="light"][data-portal="office"] .rail-footer { border-top-color: var(--border); }
  [data-theme="light"][data-portal="office"] .rail-toggle { color: var(--text-subtle); }
  [data-theme="light"][data-portal="office"] .rail-toggle:hover {
    background: var(--bg-hover);
    color: var(--text);
  }
  [data-theme="light"][data-portal="office"] .topbar { background: var(--bg-surface); }
  [data-theme="light"][data-portal="office"] .signin-aside { background: var(--brand-600); }

  [data-portal="office"] .topbar {
    height: var(--topbar-h);
    padding: 0 var(--s-6);
    background: var(--bg-sunken);
    border-bottom-color: var(--border);
  }
  [data-portal="office"] .topbar-context { min-width: 0; }
  [data-portal="office"] .topbar-title {
    color: var(--text);
    font-size: var(--fs-16);
    font-weight: var(--fw-semibold);
    letter-spacing: 0;
  }
  [data-portal="office"] .topbar-subtitle {
    margin-top: 2px;
    color: var(--text-subtle);
    font-size: var(--fs-12);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  [data-portal="office"] .icon-btn,
  [data-portal="office"] .user-btn { color: var(--text-muted); }
  [data-portal="office"] .icon-btn:hover,
  [data-portal="office"] .user-btn:hover { background: var(--bg-hover); color: var(--text); }
  [data-portal="office"] .avatar { background: var(--brand-100); color: var(--brand-700); }

  [data-portal="office"] .content {
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--s-6) var(--s-8) var(--s-16);
  }
  [data-portal="office"] .app:has(.rail) .page-head { display: none; }
  [data-portal="office"] .breadcrumb { margin-bottom: var(--s-3); }

  [data-portal="office"] .workspace-bar .tabs {
    gap: var(--s-2);
    border-bottom-color: var(--border);
  }
  [data-portal="office"] .tab {
    padding: var(--s-2) var(--s-3) var(--s-3);
    color: var(--text-subtle);
  }
  [data-portal="office"] .tab:hover { color: var(--text); border-bottom-color: var(--border-strong); }
  [data-portal="office"] .tab.is-active,
  [data-portal="office"] .tab.active,
  [data-portal="office"] .tab[aria-selected="true"] {
    color: var(--brand-700);
    border-bottom-color: var(--brand-600);
  }

  [data-portal="office"] .card,
  [data-portal="office"] .kpi,
  [data-portal="office"] .tile,
  [data-portal="office"] .record-head,
  [data-portal="office"] .rec-card {
    background: var(--bg-surface);
    border-color: var(--border);
    box-shadow: none;
  }
  [data-portal="office"] .card-head { min-height: 44px; padding: var(--s-3) var(--s-4); }
  [data-portal="office"] .card-head h2,
  [data-portal="office"] .card-head h3 { font-size: var(--fs-14); }
  [data-portal="office"] .card-body { padding: var(--s-5); }
  [data-portal="office"] .card-body.flush { padding: 0; }
  [data-portal="office"] .card-foot,
  [data-portal="office"] .dialog-foot,
  [data-portal="office"] .drawer-foot { background: var(--bg-sunken); }

  [data-portal="office"] .btn { background: var(--brand-600); color: var(--text-invert); }
  [data-portal="office"] .btn:hover { background: var(--brand-700); }
  [data-portal="office"] .btn:active { background: var(--brand-500); }
  [data-portal="office"] .btn-secondary {
    background: var(--bg-surface);
    border-color: var(--border-strong);
    color: var(--text);
  }
  [data-portal="office"] .btn-secondary:hover { background: var(--bg-hover); border-color: var(--n-400); }
  [data-portal="office"] .btn-subtle { background: transparent; color: var(--text-muted); }
  [data-portal="office"] .btn-subtle:hover { background: var(--bg-hover); color: var(--text); }
  [data-portal="office"] .btn-danger { background: var(--neg-600); color: var(--n-0); }

  [data-portal="office"] thead th {
    background: var(--bg-surface);
    color: var(--text-subtle);
    border-bottom-color: var(--border);
  }
  [data-portal="office"] tbody td { border-bottom-color: var(--border); }
  [data-portal="office"] tbody tr:hover { background: var(--bg-hover); }
  [data-portal="office"] tbody tr[aria-selected="true"] { background: var(--bg-selected); }
  [data-portal="office"] .table-zebra tbody tr:nth-child(even) { background: var(--bg-sunken); }
  [data-portal="office"] .table-zebra tbody tr:hover { background: var(--bg-hover); }

  [data-portal="office"] input:not([type]),
  [data-portal="office"] input[type="text"],
  [data-portal="office"] input[type="password"],
  [data-portal="office"] input[type="number"],
  [data-portal="office"] input[type="date"],
  [data-portal="office"] input[type="email"],
  [data-portal="office"] input[type="search"],
  [data-portal="office"] input[type="tel"],
  [data-portal="office"] select,
  [data-portal="office"] textarea {
    background-color: var(--bg-sunken);
    border-color: var(--border-strong);
    color: var(--text);
  }
  [data-portal="office"] input:hover,
  [data-portal="office"] select:hover,
  [data-portal="office"] textarea:hover { border-color: var(--n-400); }
  [data-portal="office"] input:focus-visible,
  [data-portal="office"] select:focus-visible,
  [data-portal="office"] textarea:focus-visible { border-color: var(--brand-600); }
  [data-portal="office"] input[disabled],
  [data-portal="office"] select[disabled],
  [data-portal="office"] textarea[disabled],
  [data-portal="office"] input[readonly] { background: var(--n-50); }

  [data-portal="office"] .menu,
  [data-portal="office"] .drawer,
  [data-portal="office"] dialog.dialog { background: var(--bg-surface); border-color: var(--border); color: var(--text); }
  [data-portal="office"] .menu-item:hover { background: var(--bg-hover); }
  [data-portal="office"] .filter-chip,
  [data-portal="office"] .preset { background: var(--bg-surface); border-color: var(--border); color: var(--text-muted); }
  [data-portal="office"] .filter-chip:hover,
  [data-portal="office"] .preset:hover { background: var(--bg-hover); }
  [data-portal="office"] .filter-chip.active,
  [data-portal="office"] .filter-chip.is-active,
  [data-portal="office"] .preset.is-current { background: var(--brand-50); border-color: var(--brand-300); color: var(--brand-700); }

  [data-portal="office"] .signin-page { background: var(--bg-app); }
  [data-portal="office"] .signin-aside {
    background: var(--chrome);
    border-right: 1px solid var(--border);
  }
  [data-portal="office"] .signin-main { background: var(--bg-app); }
  [data-portal="office"] .signin {
    max-width: 400px;
    padding: var(--s-8);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
  }
  [data-portal="office"] .signin-mark,
  [data-portal="office"] .signin-mark-sm { background: var(--brand-100); color: var(--brand-700); }

  /* Dashboard ------------------------------------------------------------ */
  [data-portal="office"] .dashboard-overview {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr);
    grid-template-areas:
      "pulse attention"
      "stock attention";
    align-items: start;
    gap: var(--s-4);
    margin-bottom: var(--s-8);
  }
  [data-portal="office"] .dashboard-overview > * { min-width: 0; margin-bottom: 0; }
  [data-portal="office"] .trading-pulse { grid-area: pulse; }
  [data-portal="office"] .attention-panel { grid-area: attention; overflow: hidden; }
  [data-portal="office"] .dashboard-stock { grid-area: stock; }
  [data-portal="office"] .scorecard { display: grid; }
  [data-portal="office"] .score-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) max-content 16px;
    align-items: center;
    gap: var(--s-3);
    min-height: 72px;
    padding: var(--s-3) var(--s-5);
    color: var(--text);
    border-bottom: 1px solid var(--border);
  }
  [data-portal="office"] .score-row:last-child { border-bottom: 0; }
  [data-portal="office"] .score-row:hover { background: var(--bg-hover); text-decoration: none; }
  [data-portal="office"] .score-row > span:nth-child(2),
  [data-portal="office"] .attention-list a > span:nth-child(2) { min-width: 0; }
  [data-portal="office"] .score-row strong,
  [data-portal="office"] .score-row small,
  [data-portal="office"] .attention-list strong,
  [data-portal="office"] .attention-list small { display: block; }
  [data-portal="office"] .score-row strong,
  [data-portal="office"] .attention-list strong { font-size: var(--fs-13); font-weight: var(--fw-medium); }
  [data-portal="office"] .score-row small,
  [data-portal="office"] .attention-list small { margin-top: 2px; color: var(--text-subtle); font-size: var(--fs-12); }
  [data-portal="office"] .score-row b { font-size: var(--fs-16); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
  [data-portal="office"] .score-row > .ico { color: var(--text-subtle); }
  [data-portal="office"] .score-icon,
  [data-portal="office"] .attention-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--r-md);
    background: var(--bg-sunken);
    color: var(--brand-700);
    border: 1px solid var(--border);
  }
  [data-portal="office"] .attention-total {
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: var(--r-pill);
    background: var(--neg-50);
    border: 1px solid var(--neg-200);
    color: var(--neg-700);
    font-size: var(--fs-12);
    font-weight: var(--fw-semibold);
    line-height: 22px;
    text-align: center;
  }
  [data-portal="office"] .attention-list { display: grid; }
  [data-portal="office"] .attention-list a {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) max-content;
    align-items: center;
    gap: var(--s-3);
    min-height: 64px;
    padding: var(--s-3) var(--s-5);
    color: var(--text);
    border-bottom: 1px solid var(--border);
  }
  [data-portal="office"] .attention-list a:last-child { border-bottom: 0; }
  [data-portal="office"] .attention-list a:hover { background: var(--bg-hover); text-decoration: none; }
  [data-portal="office"] .attention-list b { color: var(--neg-700); font-size: var(--fs-14); }
  [data-portal="office"] .attention-icon { color: var(--warn-700); }

  [data-portal="office"] .dashboard-section { margin-bottom: var(--s-8); }
  [data-portal="office"] .section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-4);
    margin-bottom: var(--s-4);
  }
  [data-portal="office"] .section-heading h2 { font-size: var(--fs-16); }
  [data-portal="office"] .section-heading p { margin-top: 2px; color: var(--text-subtle); font-size: var(--fs-12); }
  [data-portal="office"] .section-heading a { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--text); font-size: var(--fs-13); }
  [data-portal="office"] .product-position-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-4);
  }
  [data-portal="office"] .product-position {
    display: flex;
    align-items: stretch;
    gap: var(--s-4);
    min-width: 0;
    min-height: 156px;
    padding: var(--s-4);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    color: var(--text);
  }
  [data-portal="office"] .product-position:hover { background: var(--bg-hover); border-color: var(--border-strong); text-decoration: none; }
  [data-portal="office"] .stock-gauge {
    position: relative;
    width: 48px;
    min-width: 48px;
    overflow: hidden;
    border-radius: var(--r-md);
    background: var(--n-100);
    border: 1px solid var(--border);
  }
  [data-portal="office"] .stock-gauge > span {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--pos-600);
  }
  [data-portal="office"] .product-position-body { display: flex; flex: 1; min-width: 0; flex-direction: column; justify-content: center; }
  [data-portal="office"] .product-position-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-2); }
  [data-portal="office"] .product-position-head small,
  [data-portal="office"] .product-position-head strong { display: block; }
  [data-portal="office"] .product-position-head small,
  [data-portal="office"] .product-position-body > small { color: var(--text-subtle); font-size: var(--fs-12); }
  [data-portal="office"] .product-position-head strong { margin-top: 2px; font-size: var(--fs-14); }
  [data-portal="office"] .product-position-body > b {
    margin-top: var(--s-3);
    font-size: var(--fs-22);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
  }
  [data-portal="office"] .product-code {
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    color: var(--text-muted);
    font-size: var(--fs-11);
  }
  [data-portal="office"] .position-facts { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
  [data-portal="office"] .position-facts > span {
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    color: var(--text-muted);
    font-size: var(--fs-11);
  }
  [data-portal="office"] .dashboard-trips { margin-bottom: 0; }
}

@media screen and (max-width: 1200px) {
  [data-portal="office"] .product-position-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 1024px) {
  [data-portal="office"] .topbar { gap: var(--s-3); padding: 0 var(--s-4); }
  [data-portal="office"] .topbar-brand .brand-portal { display: none; }
  [data-portal="office"] .topbar-context { flex: 1 1 180px; overflow: hidden; }
  [data-portal="office"] .topbar-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  [data-portal="office"] .topbar-subtitle { display: none; }
  [data-portal="office"] .topbar > .spacer { flex-basis: 8px; }
  [data-portal="office"] .topbar-search { flex: 0 0 32px; width: 32px; }
  [data-portal="office"] .search-trigger { width: 32px; padding: 0; justify-content: center; }
  [data-portal="office"] .search-trigger-label,
  [data-portal="office"] .search-trigger .kbd-hint { display: none; }
}

@media screen and (max-width: 900px) {
  [data-portal="office"] .dashboard-overview {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "pulse" "attention" "stock";
  }
  [data-portal="office"] .signin { padding: var(--s-6); }
  [data-portal="office"] .workspace-bar {
    align-items: stretch;
    flex-direction: column;
    gap: var(--s-2);
  }
  [data-portal="office"] .workspace-bar .tabs { width: 100%; }
  [data-portal="office"] .workspace-bar .page-actions {
    justify-content: flex-end;
    margin-left: 0;
    padding-bottom: var(--s-2);
  }
}

@media screen and (max-width: 767px) {
  [data-portal="office"] .topbar { padding: 0 var(--s-3); }
  [data-portal="office"] .topbar-context { flex: 1; overflow: hidden; }
  [data-portal="office"] .topbar-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  [data-portal="office"] .topbar-subtitle { display: none; }
  [data-portal="office"] .content { padding: var(--s-4) var(--s-3) var(--s-12); }
  [data-portal="office"] .workspace-bar { align-items: stretch; flex-direction: column; gap: var(--s-2); }
  [data-portal="office"] .workspace-bar .tabs { width: 100%; }
  [data-portal="office"] .workspace-bar .page-actions { margin-left: 0; padding-bottom: var(--s-2); }
  [data-portal="office"] .product-position-grid { grid-template-columns: minmax(0, 1fr); }
  [data-portal="office"] .section-heading { align-items: flex-start; }
  [data-portal="office"] .score-row { grid-template-columns: 34px minmax(0, 1fr) max-content; padding: var(--s-3); }
  [data-portal="office"] .score-row > .ico { display: none; }
  [data-portal="office"] .score-row b { font-size: var(--fs-14); }
  [data-portal="office"] .attention-list a { padding: var(--s-3); }
  [data-portal="office"] .signin-main { padding: var(--s-5) var(--s-3); }
  [data-portal="office"] .signin { padding: var(--s-5); }
}