/* Imvelo Control Tower — theme from the official Imvelo Brand Book (Ed. 01, 2026).
   Core: Midnight Navy #141F38 ("the ground of the brand") + Bone Cream #EFE8D6
   ("the label paper"). Living accents: coral, gold, leaf, sky, pink, forest.
   60/30/10 (navy/cream/accent); body text stays navy-on-cream or cream-on-navy.
   Light (cream) is the default legible theme; dark is the brand's primary navy
   colourway. Chart series use validated deeper steps of the living accents
   (CVD-safe + >=3:1 on each surface); exact brand hexes drive chrome + status.

   Type system (Brand Book ch. 4), self-hosted from Google Fonts (SIL OFL):
   Bodoni Moda = display/wordmark · Archivo = body & UI · Space Mono = data. */
@font-face { font-family: "Archivo"; font-weight: 400; font-style: normal;
  font-display: swap; src: url("/static/fonts/archivo-400.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 600; font-style: normal;
  font-display: swap; src: url("/static/fonts/archivo-600.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 700; font-style: normal;
  font-display: swap; src: url("/static/fonts/archivo-700.woff2") format("woff2"); }
@font-face { font-family: "Bodoni Moda"; font-weight: 400; font-style: normal;
  font-display: swap; src: url("/static/fonts/bodoni-400.woff2") format("woff2"); }
@font-face { font-family: "Bodoni Moda"; font-weight: 600; font-style: normal;
  font-display: swap; src: url("/static/fonts/bodoni-600.woff2") format("woff2"); }
@font-face { font-family: "Bodoni Moda"; font-weight: 500; font-style: italic;
  font-display: swap; src: url("/static/fonts/bodoni-500i.woff2") format("woff2"); }
@font-face { font-family: "Space Mono"; font-weight: 400; font-style: normal;
  font-display: swap; src: url("/static/fonts/spacemono-400.woff2") format("woff2"); }
@font-face { font-family: "Space Mono"; font-weight: 700; font-style: normal;
  font-display: swap; src: url("/static/fonts/spacemono-700.woff2") format("woff2"); }
:root {
  color-scheme: light;
  --plane: #e7dfc8;
  --surface: #f3ecda;
  --ink: #141f38;
  --ink-2: #3f4a63;
  --muted: #7c8397;
  --grid: #dcd4bd;
  --baseline: #c4bca3;
  --border: rgba(20, 31, 56, 0.14);
  --brand: #141f38;
  --brand-tile: #24402c;
  --accent-coral: #e24e33; --accent-gold: #e0a43b; --accent-leaf: #6e9a5e;
  --accent-sky: #a9d4e0; --accent-pink: #e7a6b0; --accent-forest: #24402c;
  --series-1: #d99017;  /* gold  */
  --series-2: #2e8b57;  /* leaf-green */
  --series-3: #e24e33;  /* coral */
  --series-4: #1e8fb0;  /* teal-sky */
  --seq-250: #bfe0ea; --seq-350: #7cc0d4; --seq-450: #1e8fb0;
  --seq-550: #17708b; --seq-650: #114f61;
  --good: #4e8a3e; --warning: #c9871a; --serious: #d9663a; --critical: #d23b22;
  --good-text: #2e6b2a;
  --wash-1: rgba(20, 31, 56, 0.06);
  --btn-bg: #141f38; --btn-fg: #efe8d6;   /* navy button, cream text */
  --focus: #d99017;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --plane: #0f1729;
    --surface: #141f38;
    --ink: #efe8d6;
    --ink-2: #c7ceda;
    --muted: #8791a3;
    --grid: #26314b;
    --baseline: #354057;
    --border: rgba(239, 232, 214, 0.12);
    --brand: #efe8d6;
    --brand-tile: #24402c;
    --accent-coral: #e24e33; --accent-gold: #e0a43b; --accent-leaf: #6e9a5e;
    --accent-sky: #a9d4e0; --accent-pink: #e7a6b0; --accent-forest: #24402c;
    --series-1: #c07c10; --series-2: #2e8b57; --series-3: #e24e33; --series-4: #1e8fb0;
    --seq-250: #bfe0ea; --seq-350: #7cc0d4; --seq-450: #3fa5c4;
    --seq-550: #2b8aa8; --seq-650: #1e6d86;
    --good: #6e9a5e; --warning: #e0a43b; --serious: #e2743a; --critical: #e24e33;
    --good-text: #8fc07e;
    --wash-1: rgba(239, 232, 214, 0.07);
    --btn-bg: #efe8d6; --btn-fg: #141f38;   /* cream button, navy text */
    --focus: #e0a43b;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --plane: #0f1729;
  --surface: #141f38;
  --ink: #efe8d6;
  --ink-2: #c7ceda;
  --muted: #8791a3;
  --grid: #26314b;
  --baseline: #354057;
  --border: rgba(239, 232, 214, 0.12);
  --brand: #efe8d6;
  --brand-tile: #24402c;
  --accent-coral: #e24e33; --accent-gold: #e0a43b; --accent-leaf: #6e9a5e;
  --accent-sky: #a9d4e0; --accent-pink: #e7a6b0; --accent-forest: #24402c;
  --series-1: #c07c10; --series-2: #2e8b57; --series-3: #e24e33; --series-4: #1e8fb0;
  --seq-250: #bfe0ea; --seq-350: #7cc0d4; --seq-450: #3fa5c4;
  --seq-550: #2b8aa8; --seq-650: #1e6d86;
  --good: #6e9a5e; --warning: #e0a43b; --serious: #e2743a; --critical: #e24e33;
  --good-text: #8fc07e;
  --wash-1: rgba(239, 232, 214, 0.07);
  --btn-bg: #efe8d6; --btn-fg: #141f38;
  --focus: #e0a43b;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--plane);
  color: var(--ink);
  /* Brand Book ch.4 — Text: Archivo (grotesque) for body, captions, UI */
  font: 14px/1.45 "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
}
/* Brand Book ch.4 — Display: Bodoni Moda for headlines, pull-quotes, wordmark */
.display, .page-head h1, .brand-name, .login-word {
  font-family: "Bodoni Moda", "Playfair Display", Georgia, serif;
  font-weight: 600;
  letter-spacing: 0.005em;
}
/* Brand Book ch.4 — Technical: Space Mono for labels, specs, data cues */
.eyebrow, .login-tag, .login-foot, .card .as-of, .tile .label, .ctl-label {
  font-family: "Space Mono", ui-monospace, "SFMono-Regular", monospace;
}
.card .as-of, .tile .label { letter-spacing: -0.01em; }
.eyebrow {
  text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px;
  font-weight: 700; color: var(--muted);
}
a { color: inherit; }

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

/* ---------------------------------------------------------------------------
   The menu is a floating panel, not a wall: it detaches from the edge, and
   collapses to an icon rail on desktop / slides away entirely on a phone.
   One width variable drives the panel and the space the content leaves it, so
   the two can never disagree.
   --------------------------------------------------------------------------- */
.sidebar {
  --rail: 220px;
  width: var(--rail); flex-shrink: 0; z-index: 30;   /* tooltips over content */
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  position: sticky; top: 12px; height: calc(100vh - 24px);
  margin: 12px 0 12px 12px;
  transition: width .26s var(--ease);
  overflow: hidden;
}
.sidebar.rail { --rail: 66px; }
.sidebar.rail .brand > div:not(.brand-mark),
.sidebar.rail .nav-label,
.sidebar.rail .who-foot,
.sidebar.rail .btn-label { display: none; }
.sidebar.rail .ghost-btn {
  display: grid; place-items: center; font-size: 16px; padding: 10px 0;
}
.sidebar.rail .brand { padding: 14px 0 12px; justify-content: center; }
.sidebar.rail .brand-spacer { display: none; }
.sidebar.rail .nav-toggle {
  position: absolute; top: 14px; right: 50%; transform: translateX(50%);
  opacity: 0; pointer-events: none;
}
.sidebar.rail:hover .nav-toggle, .sidebar.rail .nav-toggle:focus-visible {
  opacity: 1; pointer-events: auto;
}
.sidebar.rail:hover .brand-mark { opacity: 0; }
.sidebar.rail nav a { justify-content: center; padding: 10px 0; }
/* the count becomes a dot on the icon rather than a pill with nowhere to sit */
.sidebar.rail nav a .badge {
  position: absolute; top: 5px; right: 12px;
  min-width: 8px; height: 8px; padding: 0; font-size: 0; border-radius: 999px;
  line-height: 0;
}
.sidebar.rail .sidebar-foot { padding: 8px; }
.sidebar.rail .ghost-btn { text-align: center; padding: 9px 0; }
/* the label reappears as a tooltip so a rail is still navigable */
.sidebar.rail nav a::after {
  content: attr(data-label); position: absolute; left: calc(100% + 10px);
  top: 50%; transform: translateY(-50%) translateX(-4px);
  background: var(--ink); color: var(--surface); font-size: 12px;
  padding: 5px 9px; border-radius: 7px; white-space: nowrap;
  opacity: 0; pointer-events: none; z-index: 60;
  transition: opacity .16s var(--ease), transform .16s var(--ease);
}
.sidebar.rail { overflow: visible; }
.sidebar.rail nav { overflow: visible; }
.sidebar.rail nav a:hover::after, .sidebar.rail nav a:focus-visible::after {
  opacity: 1; transform: translateY(-50%) translateX(0);
}

.nav-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 1px solid transparent; border-radius: 9px;
  color: var(--ink-2); padding: 6px 7px; cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease), opacity .2s var(--ease);
}
.nav-toggle:hover { background: var(--wash-1); color: var(--ink); border-color: var(--border); }
/* expanded on desktop the Flags link already carries the count, and the
   duplicate pill squeezes the wordmark onto three lines */
.sidebar:not(.rail) .nav-toggle .badge { display: none; }
.brand > div:not(.brand-mark) { min-width: 0; }
.brand-name, .brand-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-burger { width: 16px; height: 1.8px; background: currentColor; position: relative; border-radius: 2px; }
.nav-burger::before, .nav-burger::after {
  content: ""; position: absolute; left: 0; width: 16px; height: 1.8px;
  background: currentColor; border-radius: 2px;
  transition: transform .24s var(--ease), top .24s var(--ease), width .24s var(--ease);
}
.nav-burger::before { top: -5.5px; }
.nav-burger::after { top: 5.5px; }
/* collapsed: the bars become a chevron pointing the way it will open */
.sidebar.rail .nav-burger { background: transparent; }
.sidebar.rail .nav-burger::before { top: -3px; width: 10px; transform: rotate(45deg); }
.sidebar.rail .nav-burger::after { top: 3px; width: 10px; transform: rotate(-45deg); }

.nav-ico { width: 19px; height: 19px; flex: none; opacity: .85; }
.sidebar nav a.active .nav-ico { opacity: 1; }
.nav-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* phone-only controls */
.nav-scrim, .nav-fab { display: none; }

.brand { display: flex; gap: 10px; align-items: center; padding: 16px 14px 12px; }
.brand-mark {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  color: var(--ink);              /* primary/inverse colourway: navy on cream, cream on navy */
}
.brand-mark .imv-mark { width: 32px; height: auto; display: block; }
.brand-name { font-size: 13.5px; color: var(--brand); }
.brand-sub { font-size: 10.5px; color: var(--muted); letter-spacing: 0.04em; }
/* flex:1 + min-height:0 so the nav takes whatever is left after the footer and
   scrolls inside it. Without min-height a flex child refuses to shrink below its
   content, and the last link (Audit trail) simply falls off the bottom. */
.sidebar nav { display: flex; flex-direction: column; padding: 4px 8px 8px; gap: 2px;
               flex: 1 1 auto; min-height: 0;
               overflow-y: auto; overflow-x: hidden;
               scrollbar-width: thin; }
/* Grouped by the question each page answers, so the list reads as four short
   decisions rather than twelve equal choices. */
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-group + .nav-group { margin-top: 12px; }
.nav-group-title {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .15em;
  color: var(--muted); padding: 4px 10px 3px;
}
/* in the rail the heading collapses to a hairline — the grouping survives,
   the words don't need to */
.sidebar.rail .nav-group-title {
  font-size: 0; letter-spacing: 0; padding: 0; height: 1px; margin: 9px 14px 8px;
  background: var(--border);
}
.sidebar nav a {
  padding: 8px 10px; border-radius: 9px; text-decoration: none;
  color: var(--ink-2); display: flex; align-items: center; gap: 10px;
  position: relative; transition: background .16s var(--ease), color .16s var(--ease);
}
.sidebar nav a:hover { background: var(--wash-1); color: var(--ink); }
.sidebar nav a.active { background: var(--wash-1); color: var(--ink); font-weight: 600; }
.sidebar nav a.active::before {
  content: ""; position: absolute; left: -8px; top: 50%; translate: 0 -50%;
  width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--accent-gold);
}
.sidebar-foot { flex: none; padding: 12px; display: flex; flex-direction: column; gap: 6px;
                border-top: 1px solid var(--grid); }
.foot-row { display: flex; gap: 6px; }
.foot-row > * { flex: 1; min-width: 0; }
.sidebar.rail .foot-row { flex-direction: column; }
.ghost-btn {
  border: 1px solid var(--border); background: none; color: var(--ink-2);
  padding: 7px 10px; border-radius: 8px; cursor: pointer; font: inherit;
  text-align: left; text-decoration: none; font-size: 13px;
}
.ghost-btn:hover { background: var(--wash-1); color: var(--ink); }
.ghost-btn { display: flex; align-items: center; gap: 7px; }
.btn-ico { flex: none; width: 15px; text-align: center; }
/* a railed footer button names itself the same way the nav links do */
.sidebar.rail .ghost-btn { position: relative; }
.sidebar.rail .ghost-btn::after {
  content: attr(data-label); position: absolute; left: calc(100% + 12px);
  top: 50%; transform: translateY(-50%) translateX(-4px);
  background: var(--ink); color: var(--surface); font-size: 12px;
  padding: 5px 9px; border-radius: 7px; white-space: nowrap;
  opacity: 0; pointer-events: none; z-index: 60;
  transition: opacity .16s var(--ease), transform .16s var(--ease);
}
.sidebar.rail .ghost-btn:hover::after, .sidebar.rail .ghost-btn:focus-visible::after {
  opacity: 1; transform: translateY(-50%) translateX(0);
}
.who-foot {
  font-size: 11px; color: var(--muted); padding: 0 2px 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.main { flex: 1; padding: 22px 26px 60px; min-width: 0; }
.page-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.page-head h1 { font-size: 19px; margin: 0; color: var(--brand); }
.page-head .sub { color: var(--muted); font-size: 13px; }
.page-head .spacer { flex: 1; }

.grid { display: grid; gap: 14px; }
.grid.tiles { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.grid.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 1100px) { .grid.two { grid-template-columns: 1fr; } }
/* a grid item defaults to min-width:auto, so a wide table inside a card stops
   the card shrinking and the whole page scrolls sideways. */
.grid > * { min-width: 0; }
.card > * { max-width: 100%; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}
.card h2 {
  margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--ink-2);
  letter-spacing: 0.01em;
}
.card .as-of { color: var(--muted); font-weight: 400; float: right; font-size: 12px; }

/* stat tiles */
.tile .label { font-size: 12px; color: var(--ink-2); }
.tile .value { font-size: 26px; font-weight: 650; margin-top: 3px; }
.tile .delta { font-size: 12px; margin-top: 2px; color: var(--muted); }
.tile .delta.up { color: var(--good-text); }
.tile .delta.down { color: var(--critical); }
.tile .note { font-size: 11px; color: var(--muted); margin-top: 3px; }

/* status & badges — icon + label, never color alone */
.badge {
  font-size: 11px; padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--ink-2); margin-left: auto;
}
.badge-critical { background: var(--critical); color: #fff; border-color: transparent; }
.badge-warning { background: var(--warning); color: #402c00; border-color: transparent; }
.status {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 550;
}
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.status.ok::before, .status.paid::before { background: var(--good); }
.status.lagging::before, .status.warning::before, .status.awaiting::before,
.status.partial::before { background: var(--warning); }
.status.stale::before, .status.critical::before, .status.disputed::before { background: var(--critical); }
.status.never::before, .status.info::before, .status.cancelled::before { background: var(--muted); }
.status.auto::before { background: var(--seq-350); }
.status.confirmed::before { background: var(--good); }
.status.unmatched::before { background: var(--serious); }
.status.ignored::before { background: var(--muted); }

/* tables */
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th {
  text-align: left; color: var(--muted); font-weight: 550; font-size: 12px;
  padding: 6px 8px; border-bottom: 1px solid var(--grid); white-space: nowrap;
}
table.data td { padding: 7px 8px; border-bottom: 1px solid var(--grid); vertical-align: top; }
table.data tr:last-child td { border-bottom: 0; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data .dim { color: var(--muted); }
.scroll-x { overflow-x: auto; }

/* charts */
.chart { width: 100%; }
.chart svg { display: block; width: 100%; height: auto; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; margin: 2px 0 8px; font-size: 12px; color: var(--ink-2); }
.legend .key { display: inline-flex; align-items: center; gap: 6px; }
.legend .swatch { width: 10px; height: 10px; border-radius: 3px; }

.tooltip {
  position: fixed; z-index: 50; pointer-events: none;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; font-size: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  max-width: 260px;
}
.tooltip .tt-title { font-weight: 600; margin-bottom: 4px; }
.tooltip .tt-row { display: flex; gap: 8px; justify-content: space-between; }
.tooltip .tt-row .k { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); }
.tooltip .swatch { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }

/* issues */
.issue {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px;
  padding: 10px 4px; border-bottom: 1px solid var(--grid); align-items: start;
}
.issue:last-child { border-bottom: 0; }
.issue .title { font-weight: 600; }
.issue .detail { color: var(--ink-2); font-size: 12.5px; margin-top: 2px; max-width: 72ch; }
.issue .meta { color: var(--muted); font-size: 11.5px; margin-top: 3px; }
.issue .actions { display: flex; gap: 6px; align-items: flex-start; }
/* a flag someone has put their name to reads differently from one nobody owns */
.issue .stamp:empty { display: none; }
.issue .stamp {
  margin-top: 5px; font-size: 11.5px; color: var(--ink-2);
  border-left: 2px solid var(--accent-gold); padding-left: 8px;
}
.issue .stamp .who { font-weight: 650; color: var(--ink); }
.issue.acknowledged { background: var(--wash-1); }
.issue.acknowledged .stamp { border-left-color: var(--accent-sky); }
.issue.resolved { opacity: .62; }
.issue.resolved .stamp { border-left-color: var(--good); }
.issue.just-changed { animation: flagsettle .9s var(--ease); }
@keyframes flagsettle {
  from { background: color-mix(in srgb, var(--accent-gold) 22%, transparent); }
  to { background: transparent; }
}
.issue-note {
  grid-column: 2 / -1; display: flex; gap: 6px; margin-top: 8px; align-items: center;
}
.issue-note input {
  flex: 1; min-width: 0; padding: 5px 9px; font: inherit; font-size: 12.5px;
  border: 1px solid var(--border); border-radius: 7px;
  background: var(--surface); color: var(--ink);
}
.issue-note input:focus { outline: none; border-color: var(--brand); }
.issue-note input.bad { border-color: var(--critical); }
.card.explain p {
  margin: 0 0 8px; font-size: 12.5px; color: var(--ink-2); max-width: 84ch; line-height: 1.55;
}
.card.explain p:last-child { margin-bottom: 0; }
.card.explain strong { color: var(--ink); }
.sev {
  width: 10px; height: 10px; border-radius: 50%; margin-top: 5px;
  outline: 3px solid transparent;
}
.sev.critical { background: var(--critical); }
.sev.warning { background: var(--warning); }
.sev.info { background: var(--muted); }

.btn {
  font: inherit; font-size: 12.5px; padding: 5px 10px; border-radius: 7px;
  border: 1px solid var(--border); background: none; color: var(--ink-2); cursor: pointer;
}
.btn:hover { background: var(--wash-1); color: var(--ink); }
.btn.primary { background: var(--btn-bg); border-color: transparent; color: var(--btn-fg); font-weight: 600; }
.btn.primary:hover { filter: brightness(1.06); }

/* feeds */
.feed-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 12px; align-items: center; }
.feed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.feed-card { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.feed-card .name { font-weight: 600; display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.feed-card .facts { color: var(--muted); font-size: 12px; margin: 6px 0 10px; }
.feed-card form { display: flex; gap: 8px; align-items: center; }
.feed-card input[type=file] { font-size: 12px; color: var(--ink-2); max-width: 200px; }

.flash { padding: 10px 14px; border-radius: 10px; margin-bottom: 14px; font-size: 13px; }
.flash.ok { background: var(--wash-1); }
.flash.error { background: var(--critical); color: #fff; }

.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.filters a, .filters .chip {
  font-size: 12.5px; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--border); text-decoration: none; color: var(--ink-2);
}
.filters a.on { background: var(--wash-1); color: var(--ink); font-weight: 600; }
.filters input[type=search] {
  font: inherit; font-size: 13px; padding: 5px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
}
/* selects otherwise render in the UA's white, which breaks the cream/navy
   surface in both themes */
select {
  font: inherit; border-radius: 8px; padding: 5px 9px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
}
select:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 26%, transparent);
}

/* inline per-card variable controls (segmented links that reload with params) */
.seg {
  display: inline-flex; gap: 0; border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden; vertical-align: middle;
}
.seg a {
  padding: 3px 9px; font-size: 12px; text-decoration: none; color: var(--ink-2);
  border-right: 1px solid var(--border);
}
.seg a:last-child { border-right: 0; }
.seg a:hover { background: var(--wash-1); }
.seg a.on { background: var(--brand); color: var(--surface); font-weight: 600; }
.ctl-label { font-size: 11px; color: var(--muted); margin-right: 6px; }
.card h2 .ctl { float: right; font-weight: 400; display: inline-flex; align-items: center; gap: 6px; }

/* P&L statement table */
table.pl td.amt { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.pl tr.rule td { border-top: 1px solid var(--baseline); }
table.pl tr.total td { font-weight: 650; border-top: 1.5px solid var(--ink-2); }
table.pl tr.sub td { color: var(--ink-2); }
.var-fav { color: var(--good-text); }
.var-adv { color: var(--critical); }
.metric-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 10px; }
.chip-key { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-2); }
.chip-key .dot { width:10px; height:10px; border-radius:3px; }

/* login — the brand's primary "on navy" colourway, editorial layout */
.login-wrap {
  color-scheme: dark;   /* the stage is always navy, whatever theme the app is in */
  min-height: 100vh; display: grid; place-items: center;
  background:
    radial-gradient(120% 90% at 50% -10%, #1c2a49 0%, #141f38 46%, #0f1729 100%);
  color: #efe8d6; padding: 24px;
}
.login-stage { width: min(420px, 92vw); text-align: center; }
.login-lock { color: #efe8d6; margin: 0 auto; }
.login-lock .imv-logo { width: min(300px, 74vw); height: auto; display: block; margin: 0 auto; }
.login-tag {
  text-transform: uppercase; letter-spacing: 0.34em; font-size: 11px;
  color: #e0a43b; margin-top: 12px; font-weight: 600; padding-left: 0.34em;
}
.login-rule {
  width: 44px; height: 2px; background: #e24e33; margin: 22px auto 22px; border: 0;
}
.login-sub {
  font-size: 13px; color: #b7bccb; letter-spacing: 0.02em; margin-bottom: 22px;
}
.login-form { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.login-form input {
  width: 100%; font: inherit; font-size: 15px; padding: 13px 15px; border-radius: 11px;
  border: 1px solid rgba(239,232,214,0.18); background: rgba(239,232,214,0.05);
  color: #efe8d6; -webkit-appearance: none; appearance: none;
}
.login-form input::placeholder { color: #7f889c; }
.login-form input:focus {
  outline: none; border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(224,164,59,0.22);
}
/* browser autofill paints its own opaque slab — repaint it in the stage's navy
   so a remembered email doesn't sit in a grey box */
.login-form input:-webkit-autofill,
.login-form input:-webkit-autofill:hover,
.login-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: #efe8d6;
  -webkit-box-shadow: 0 0 0 1000px #1a2542 inset;
  caret-color: #efe8d6;
  border: 1px solid rgba(239,232,214,0.18);
  transition: background-color 600000s;   /* stops the flash of UA yellow */
}
/* the login stage is always navy, so pin the button to cream regardless of theme */
.login-form .btn.primary {
  padding: 13px; border-radius: 11px; font-size: 15px;
  background: #efe8d6; color: #141f38;
}
.login-form .btn.primary:hover { background: #fff; }
.login-foot {
  margin-top: 26px; font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: #6d7590;
}
.login-error {
  background: rgba(226,78,51,0.16); border: 1px solid rgba(226,78,51,0.4);
  color: #f2c7bd; padding: 10px 13px; border-radius: 10px; font-size: 13px;
  margin-bottom: 4px; text-align: left;
}
.login-help {
  margin: 16px 0 0; font-size: 11.5px; line-height: 1.5; color: #9aa2ba;
  text-align: left;
}
.login-foot a { color: #9aa2ba; }
.login-foot a:hover { color: #efe8d6; }

/* ---- The employee portal: one person, their own payslips, nothing else ----
   Read almost entirely on a phone, standing up, so it is a single column of
   large tap targets rather than a dashboard shrunk down. */
.portal-body { background: var(--plane); padding: 18px 14px 60px; }
.portal { max-width: 620px; margin: 0 auto; }
.portal-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap; margin-bottom: 18px;
}
.portal-who { margin-bottom: 16px; }
.portal-who h1 {
  font-family: "Bodoni Moda", Georgia, serif; font-size: 25px; margin: 0 0 2px;
  color: var(--brand);
}
.portal-who .dim { font-size: 12.5px; }
.portal-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px; margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}
.portal-card h2 { font-size: 14px; margin: 0 0 10px; color: var(--brand); }
.portal-card > summary {
  cursor: pointer; list-style: none; font-size: 13px; font-weight: 600;
  color: var(--ink-2);
}
.portal-card > summary::-webkit-details-marker { display: none; }
.portal-card > summary::before { content: "\25B8 "; color: var(--muted); }
.portal-card[open] > summary::before { content: "\25BE "; }
.portal-first { border-color: var(--accent-gold); }
.portal-first p { font-size: 12.5px; margin: 0 0 12px; color: var(--ink-2); }

.payslip-list { list-style: none; margin: 0; padding: 0; }
.payslip-list > li { border-top: 1px solid var(--grid); }
.payslip-list > li:first-child { border-top: 0; }
.payslip-list a {
  display: flex; align-items: baseline; gap: 12px; padding: 14px 2px;
  text-decoration: none; color: var(--ink); min-height: 48px;
}
.payslip-list a:hover { background: var(--wash-1); }
.pl-month {
  font-family: "Space Mono", monospace; font-size: 13px; letter-spacing: .04em;
  min-width: 8ch;
}
.pl-net {
  flex: 1; text-align: right; font-size: 16px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pl-net .dim { font-size: 11px; font-weight: 400; }
.pl-go { color: var(--muted); }
.pl-note {
  font-size: 11.5px; color: var(--warning); padding: 0 2px 12px; line-height: 1.5;
}
.portal-foot-note { font-size: 11.5px; margin: 14px 0 0; line-height: 1.55; }
.portal-pw { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.portal-pw label {
  display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; color: var(--muted);
}
.portal-pw input {
  font: inherit; font-size: 15px; padding: 11px 12px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--plane); color: var(--ink);
  min-height: 46px;
}
.portal-pw input:focus { border-color: var(--accent-gold); outline: none; }
.portal-pw-actions { display: flex; align-items: center; gap: 10px; }
.ps-queried { border-color: var(--warning);
  background: color-mix(in srgb, var(--warning) 13%, transparent); }

/* ---- Granting that access, on the HR panel ---- */
.emp-portal {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--grid);
}
.emp-portal-head {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  font-size: 12px; margin-bottom: 8px;
}
.emp-portal-head .dim { font-size: 11px; }
.emp-portal-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.emp-portal-row input {
  font: inherit; font-size: 12.5px; padding: 6px 8px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  width: 17ch; min-width: 0;
}
.emp-portal-row input:focus { border-color: var(--accent-gold); outline: none; }
.emp-portal-note { font-size: 10.5px; margin-top: 8px; line-height: 1.5; max-width: 74ch; }

@media (max-width: 760px) {
  .emp-portal-row input { min-height: 38px; width: 100%; }
}

/* ---------------------------------------------------------------------------
   Phones & tablets. The rule that matters: a screenful of navigation must
   never sit between the user and the numbers, and nothing may scroll the page
   sideways — wide tables scroll inside their own box instead.
   --------------------------------------------------------------------------- */
@media (max-width: 820px) {
  /* The panel becomes an off-canvas drawer: it sits over the page rather than
     pushing it, so the content always starts at the top of the screen. */
  .shell { flex-direction: column; }
  .sidebar {
    --rail: min(300px, 84vw);
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
    height: 100dvh; margin: 0; border-radius: 0 var(--radius) var(--radius) 0;
    border-left: 0; box-shadow: var(--shadow-md);
    transform: translateX(-102%);
    transition: transform .3s var(--ease);
    overflow: hidden;
  }
  .sidebar.rail { --rail: min(300px, 84vw); }   /* no rail state on a phone */
  .sidebar.rail .brand > div:not(.brand-mark),
  .sidebar.rail .nav-label, .sidebar.rail .who-foot { display: revert; }
  .sidebar.rail .brand { padding: 16px 14px 12px; justify-content: flex-start; }
  .sidebar.rail .brand-spacer { display: block; }
  .sidebar.rail .nav-toggle { position: static; transform: none; opacity: 1; pointer-events: auto; }
  .sidebar.rail nav a { justify-content: flex-start; padding: 12px 12px; }
  .sidebar.rail nav a::after { content: none; }
  .sidebar.rail nav a .badge { position: static; transform: none; }
  .sidebar.rail .ghost-btn { text-align: center; display: flex; font-size: inherit; }
  .sidebar.rail .btn-label { display: revert; }
  .sidebar.rail .ghost-btn::after { content: none; }
  .sidebar.open { transform: translateX(0); }
  .sidebar .brand { padding-top: max(16px, env(safe-area-inset-top)); }
  .sidebar nav { flex: 1; padding: 4px 10px 10px; }
  .sidebar nav a { padding: 12px; }
  .sidebar-foot { flex-direction: row; flex-wrap: wrap; padding: 10px;
                  padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .sidebar-foot .ghost-btn { flex: 1; min-width: 96px; text-align: center; min-height: 40px; }
  .who-foot { flex-basis: 100%; }
  /* the burger becomes a close X inside the open drawer */
  .sidebar.open .nav-burger { background: transparent; }
  .sidebar.open .nav-burger::before { top: 0; width: 16px; transform: rotate(45deg); }
  .sidebar.open .nav-burger::after { top: 0; width: 16px; transform: rotate(-45deg); }

  .nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(10, 16, 30, .46); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity .3s var(--ease);
  }
  /* setting display in CSS overrides the `hidden` attribute, so an invisible
     scrim would otherwise sit over the page and swallow every tap */
  .nav-scrim[hidden] { display: none; }
  .nav-scrim.on { opacity: 1; pointer-events: auto; }

  /* A floating summon button — the menu is a widget you call up, not a bar
     that permanently occupies the top of every page. */
  .nav-fab {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    position: fixed; z-index: 50;
    left: 14px; bottom: max(16px, env(safe-area-inset-bottom));
    min-height: 48px; padding: 0 15px; border-radius: 999px;
    background: var(--btn-bg); color: var(--btn-fg); border: 0;
    box-shadow: var(--shadow-md); cursor: pointer;
    transition: transform .22s var(--ease), opacity .22s var(--ease);
  }
  .nav-fab:active { transform: scale(.94); }
  .nav-fab .badge { background: var(--accent-coral); color: #fff; }
  body.nav-open .nav-fab { opacity: 0; transform: scale(.8); pointer-events: none; }
  body.nav-open { overflow: hidden; }

  .main { padding: 14px 12px 84px; }   /* clear of the floating button */

  /* headings and their controls stack instead of fighting for one line */
  .page-head { gap: 8px 12px; margin-bottom: 12px; }
  .page-head h1 { font-size: 18px; }
  .page-head .spacer { display: none; }
  .page-head .sub { flex-basis: 100%; font-size: 12px; }

  /* two tiles across stays scannable; the notes must not balloon a card */
  .grid.tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tile .label { font-size: 10.5px; letter-spacing: -0.02em; }
  .tile .value { font-size: 22px; }
  .tile .note, .tile .delta { font-size: 11px; }
  .card { padding: 12px 13px; }

  /* filter/segment rows: one swipeable line, not five wrapped ones */
  .filters, .seg-row {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; padding-bottom: 2px;
  }
  .filters::-webkit-scrollbar, .seg-row::-webkit-scrollbar { display: none; }
  .filters > * { flex: 0 0 auto; }

  /* Everything you tap gets a real target. 38px is the floor; the filter
     chips and segmented controls were 24-26px, which is a miss on a phone. */
  .filters a, .filters .chip {
    padding: 9px 14px; font-size: 13px;
    display: inline-flex; align-items: center; min-height: 38px;
  }
  .seg a { padding: 9px 13px; display: inline-flex; align-items: center; min-height: 38px; }
  .card h2 .as-of[href], .card h2 a { padding: 6px 2px; display: inline-block; }
  .card h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
  .card .as-of { float: none; }
  input[type=checkbox], input[type=radio] { width: 18px; height: 18px; }
  input[type=file] { padding: 8px 0; }

  /* Every data table becomes its own scroll box. The table element itself is
     the scroller and its tbody is the wide content — setting a min-width on
     the scroller instead would just push the page open again. */
  .card > table.data {
    display: block; overflow-x: auto; max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }
  .card > table.data > tbody { display: table; min-width: 100%; }
  .scroll-x { -webkit-overflow-scrolling: touch; }

  /* Bank narratives carry unbreakable reference strings
     (",0000000020001,JUL,2026,260211366100,…"). Without this one line they
     hold every container open and the whole page scrolls sideways. */
  .issue .title, .issue .detail, .issue .meta, .issue .stamp,
  .card .note, .feed-card, .add-person, .who-foot { overflow-wrap: anywhere; }
  /* NOT table cells: a table would then squeeze "Revenue" to "Revenu/e"
     instead of scrolling. Wide tables scroll; only prose breaks. */

  /* a flag row: content, then its actions underneath */
  .issue { grid-template-columns: auto 1fr; gap: 8px; }
  .issue .actions { grid-column: 2 / -1; flex-wrap: wrap; }
  .issue .actions .btn { flex: 1; min-width: 110px; min-height: 38px; }
  .issue-note { grid-column: 1 / -1; flex-wrap: wrap; }
  .issue-note input { flex: 1 1 100%; min-height: 38px; }

  .daterange { flex: 1 1 100%; }
  .daterange input[type=date] { flex: 1; min-width: 0; }

  .menu-grid { column-count: 1; column-width: auto; }
  .metric-row { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}

@media (max-width: 420px) {
  /* Deliberately still two across. One-up reads beautifully but pushes the
     decisions a full screen further down, and the pulse is a glance while the
     decisions are the job. */
  .tile .value { font-size: 20px; }
  .tile .note { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
                overflow: hidden; }
  .page-head h1 { font-size: 17px; }
}

/* iOS zooms the whole page when a focused field is under 16px. Any control the
   user types into has to meet that, everywhere. */
@media (max-width: 820px) {
  input, select, textarea, .price-edit input, .login-form input { font-size: 16px; }
  .btn, .ghost-btn, button { min-height: 38px; }
  /* every form control the user actually operates, whatever page it lives on */
  input[type=text], input[type=email], input[type=password], input[type=search],
  input[type=number], input[type=date], input[type=file], select, textarea,
  .add-person input, .add-person select, .range-form select, .range-form input,
  #people select, .filters input[type=search] {
    min-height: 40px; padding-top: 8px; padding-bottom: 8px;
  }
  .add-person label.inline input[type=checkbox], .switch input { width: 20px; height: 20px; }
  /* links inside prose stay inline but get something to aim at */
  .note a, .explain a, .card h2 a, .card h2 .as-of[href] {
    padding: 5px 1px; text-underline-offset: 3px;
  }
}

/* ---------------------------------------------------------------------------
   Elevation layer — an *elevated* take on the brand palette (not a new one):
   soft depth, glass surfaces, restrained motion. Navy/cream stay the anchors;
   gold is the single accent that catches the light.
   --------------------------------------------------------------------------- */
:root {
  --shadow-sm: 0 1px 2px rgba(20,31,56,.06), 0 2px 8px rgba(20,31,56,.05);
  --shadow-md: 0 2px 6px rgba(20,31,56,.08), 0 12px 28px rgba(20,31,56,.09);
  --radius: 14px;
  --ease: cubic-bezier(.4,.14,.3,1);
}
:root[data-theme="dark"], :root:where(:not([data-theme="light"])) {
  --shadow-sm: 0 1px 2px rgba(0,0,0,.34), 0 2px 10px rgba(0,0,0,.28);
  --shadow-md: 0 2px 8px rgba(0,0,0,.4), 0 16px 36px rgba(0,0,0,.36);
}

body { background-attachment: fixed; }
:root[data-theme="dark"] body,
:root:where(:not([data-theme="light"])) body {
  background-image:
    radial-gradient(1100px 620px at 82% -8%, rgba(224,164,59,.06), transparent 60%),
    radial-gradient(900px 560px at 8% 4%, rgba(110,154,94,.05), transparent 62%);
}
:root[data-theme="light"] body,
:root:where(:not([data-theme="dark"])) body {
  background-image:
    radial-gradient(1100px 620px at 84% -10%, rgba(224,164,59,.13), transparent 62%),
    radial-gradient(900px 560px at 6% 2%, rgba(110,154,94,.09), transparent 60%);
}

.card {
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .28s var(--ease), transform .28s var(--ease),
              border-color .28s var(--ease);
  backdrop-filter: saturate(1.05);
}
.card:hover { box-shadow: var(--shadow-md); }
.grid.tiles .card:hover { transform: translateY(-2px); }
.tile .value { letter-spacing: -0.015em; }

/* accent hairline on the stat tiles — the 10% in the 60/30/10 */
.grid.tiles .card.tile { position: relative; overflow: hidden; }
.grid.tiles .card.tile::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--accent-gold), transparent 72%);
  opacity: .5;
}

.sidebar { box-shadow: var(--shadow-sm); }
.sidebar nav a { transition: background .2s var(--ease), color .2s var(--ease); }
.sidebar nav a.active { position: relative; }
.sidebar nav a.active::before {
  content: ""; position: absolute; left: -8px; top: 6px; bottom: 6px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--accent-gold);
}
.btn, .ghost-btn { transition: background .2s var(--ease), transform .12s var(--ease),
                               filter .2s var(--ease); }
.btn:active, .ghost-btn:active { transform: translateY(1px); }
.seg a { transition: background .2s var(--ease), color .2s var(--ease); }
table.data tbody tr, table.data tr { transition: background .16s var(--ease); }
table.data tr:hover td { background: var(--wash-1); }

/* ---- Data feeds: grouped by document type, with owner ---- */
.feed-group { margin-bottom: 22px; }
.group-head {
  display: flex; align-items: baseline; gap: 12px; margin: 0 2px 10px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.group-head .spacer { flex: 1; }
.group-title {
  font-family: "Bodoni Moda", Georgia, serif; font-size: 17px; margin: 0;
  color: var(--brand); font-weight: 600;
}
.group-owner {
  font-family: "Space Mono", monospace; font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px;
}
.feed-card { transition: box-shadow .28s var(--ease), border-color .28s var(--ease); }
.feed-card.uploading { border-color: var(--accent-gold); }
.feed-card.uploading::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
  background-size: 40% 100%; background-repeat: no-repeat;
  animation: feed-scan 1.1s var(--ease) infinite;
}
.feed-card { position: relative; }
@keyframes feed-scan { 0% { background-position: -40% 0; } 100% { background-position: 140% 0; } }
.feed-card.just-updated { border-color: var(--good); }
.feed-card.just-updated .name { animation: pop .5s var(--ease); }
@keyframes pop { 0% { transform: none; } 35% { transform: translateY(-2px); } 100% { transform: none; } }
.up-status { font-size: 12px; margin-left: 8px; font-family: "Space Mono", monospace; }
.up-status.working { color: var(--accent-gold); }
.up-status.good { color: var(--good-text); }
.up-status.bad { color: var(--critical); }

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

/* account tiers */
.tier {
  font-family: "Space Mono", monospace; font-size: 10px; text-transform: uppercase;
  letter-spacing: .1em; padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--ink-2);
}
.tier-key { background: var(--accent-gold); color: #141f38; border-color: transparent; font-weight: 700; }
.tier-growth { background: var(--wash-1); color: var(--ink); }
.tier-small { color: var(--muted); }
.tier-dormant { color: var(--muted); opacity: .7; }

/* public price-list layout (no sidebar) */
.public-shell { flex-direction: column; }
.public-bar {
  display: flex; align-items: center; gap: 12px; padding: 12px 26px;
  border-bottom: 1px solid var(--border); background: var(--surface);
  box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 5;
}
.public-bar .brand { padding: 0; }
.public-shell .main { max-width: 1180px; margin: 0 auto; width: 100%; }

/* menu columns */
.menu-grid { columns: 3 300px; column-gap: 26px; }

/* ---- Price list: VAT switch + inline editing ---- */
/* the whole page re-prices at once, so a brief settle makes it legible */
.vat-flip .px, .vat-flip .vat-tag, .vat-flip .vat-note { animation: vatsettle .34s var(--ease); }
@keyframes vatsettle {
  from { opacity: .25; filter: blur(1.5px); }
  to { opacity: 1; filter: none; }
}
.px { font-variant-numeric: tabular-nums; }
.price-edit {
  display: inline-flex; align-items: center; gap: 2px;
  border: 1px solid var(--border); border-radius: 7px; padding: 1px 5px;
  background: var(--surface); transition: border-color .18s var(--ease);
}
.price-edit:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 26%, transparent); }
.price-edit .pfx { font-size: 11px; color: var(--muted); }
.price-edit input {
  width: 74px; border: 0; background: none; color: var(--ink);
  font: inherit; font-size: 12.5px; text-align: right;
  font-variant-numeric: tabular-nums; padding: 2px 0;
}
.price-edit input:focus { outline: none; }
.price-edit input::-webkit-outer-spin-button,
.price-edit input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.price-edit input { -moz-appearance: textfield; }
.save-state { font-size: 11px; width: 1em; text-align: left; }
.save-state.ok { color: var(--good); }
.save-state.bad { color: var(--critical); width: auto; white-space: nowrap; }
.save-state.saving { color: var(--muted); }
.menu-section { break-inside: avoid; margin-bottom: 18px; display: inline-block; width: 100%; }
.menu-section h3 {
  font-family: "Bodoni Moda", Georgia, serif; font-size: 15px; font-weight: 600;
  color: var(--brand); margin: 0 0 4px; padding-bottom: 4px;
  border-bottom: 1px solid var(--accent-gold);
}
.menu-section table.data td { padding: 4px 0; border-bottom: 0; font-size: 13px; }
.menu-section table.data td.num { font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 10px; }
@media print {
  .public-bar, .sidebar { display: none; }
  .card { box-shadow: none; border: 1px solid #ddd; }
}

/* ---- The manual ------------------------------------------------------------
   Brand Book ch.4 in one place: Bodoni Moda carries the section headings, Space
   Mono the contents rail and the small labels, Archivo everything you actually
   read. A measure of ~78ch, because this is prose, not a table. */
.manual-wrap { display: grid; grid-template-columns: 178px minmax(0, 1fr); gap: 34px; }

.manual-toc {
  position: sticky; top: 22px; align-self: start;
  max-height: calc(100vh - 44px); overflow-y: auto;
  border-left: 2px solid var(--baseline); padding-left: 14px;
}
.manual-toc .eyebrow { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px; }
.manual-toc a {
  display: block; padding: 4px 0; font-size: 12.5px; color: var(--ink-2);
  text-decoration: none;
}
.manual-toc a:hover { color: var(--accent-gold); }
.manual-toc-group {
  font-family: "Space Mono", ui-monospace, monospace; font-size: 9px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  margin: 14px 0 4px;
}

.manual-body { max-width: 78ch; }
.manual-sec {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px 28px; margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
  /* so a heading you jumped to is not sitting under the top of the window */
  scroll-margin-top: 20px;
}
.manual-sec h2 {
  font-family: "Bodoni Moda", "Playfair Display", Georgia, serif; font-weight: 600;
  font-size: 21px; margin: 0 0 12px; color: var(--brand);
  display: flex; align-items: center; gap: 10px;
}
.manual-sec h2 .nav-ico { width: 21px; height: 21px; flex: none; color: var(--accent-gold); }
.manual-sec h3 {
  font-family: "Space Mono", ui-monospace, monospace; font-size: 10px;
  letter-spacing: .15em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 7px; font-weight: 700;
}
.manual-sec p { font-size: 13.5px; line-height: 1.62; color: var(--ink-2); margin: 0 0 11px; }
.manual-sec ul, .manual-sec ol { font-size: 13.5px; line-height: 1.6; color: var(--ink-2);
  margin: 0 0 11px; padding-left: 19px; }
.manual-sec li { margin-bottom: 6px; }
.manual-sec strong { color: var(--ink); }
.manual-sec code {
  font-family: "Space Mono", ui-monospace, monospace; font-size: 12px;
  background: var(--wash-1); padding: 1px 5px; border-radius: 4px;
}

.manual-lead { border-color: var(--baseline); }
.manual-lede {
  font-family: "Bodoni Moda", "Playfair Display", Georgia, serif;
  font-size: 18px !important; line-height: 1.45 !important; font-style: italic;
  color: var(--ink) !important; margin-bottom: 14px !important;
}
.manual-what {
  font-size: 14px !important; color: var(--ink) !important;
  border-left: 2px solid var(--accent-gold); padding-left: 12px;
  margin-bottom: 16px !important;
}
.manual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 30px; margin-bottom: 4px; }
.manual-rule {
  border-top: 1px solid var(--grid); padding-top: 11px; margin-top: 14px !important;
  font-size: 12.5px !important;
}
.manual-table td { vertical-align: top; font-size: 12.5px; line-height: 1.55; }
.manual-table td:first-child { min-width: 12ch; }

@media (max-width: 1000px) {
  .manual-wrap { grid-template-columns: 1fr; gap: 16px; }
  /* On a phone the rail becomes a scrolling strip of chips. A sticky column of
     24 links would be a screenful of navigation before any content. */
  .manual-toc {
    position: static; max-height: none; border-left: 0;
    border-bottom: 1px solid var(--grid); padding: 0 0 12px;
    display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; align-items: center;
  }
  .manual-toc::-webkit-scrollbar { display: none; }
  .manual-toc .eyebrow, .manual-toc-group { display: none; }
  .manual-toc a {
    padding: 7px 12px; white-space: nowrap; border: 1px solid var(--border);
    border-radius: 999px; font-size: 12px; min-height: 34px; display: flex;
    align-items: center;
  }
  .manual-sec { padding: 18px; scroll-margin-top: 12px; }
  .manual-grid { grid-template-columns: 1fr; gap: 16px; }
  .manual-lede { font-size: 16px !important; }
}

@media print {
  .manual-toc, .page-head .btn { display: none; }
  .manual-wrap { grid-template-columns: 1fr; }
  .manual-sec { break-inside: avoid; box-shadow: none; border: 0;
                border-bottom: 1px solid #ccc; border-radius: 0; padding: 0 0 14px;
                margin-bottom: 14px; }
  .manual-body { max-width: none; }
}

/* ---- Staff register (HR) ---- */
.hr-gaps { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--ink-2); }
.hr-gaps li { margin-bottom: 5px; }
.hr-gaps strong { color: var(--serious); }

.hr-table tr.off { opacity: .55; }
.hr-table td { vertical-align: top; }
/* The name is a control, not a link — clicking it opens the person's details
   in place, so it must not look like navigation away from the page. */
.linklike {
  font: inherit; font-weight: 600; color: var(--ink); background: none;
  border: 0; padding: 0; cursor: pointer; text-align: left;
  border-bottom: 1px dashed var(--border);
}
.linklike:hover { color: var(--accent-gold); border-bottom-color: var(--accent-gold); }
.hr-table input.pay-in {
  font: inherit; font-size: 12px; font-variant-numeric: tabular-nums;
  /* wide enough for the highest salary on the register — 27,213.00 — so no
     figure is ever silently clipped in the box it lives in */
  width: 10.5ch; text-align: right; padding: 4px 6px; border-radius: 6px;
  border: 1px solid transparent; background: transparent; color: var(--ink);
}
.hr-table .casual-cell { font-size: 11.5px; padding-top: 10px; }
.hr-table input.pay-in:hover { border-color: var(--border); }
.hr-table input.pay-in:focus {
  border-color: var(--accent-gold); background: var(--surface); outline: none;
}
.hr-table select[data-field="status"] {
  font: inherit; font-size: 11.5px; padding: 3px 6px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
}
.emp-detail > td { background: var(--wash-1); padding: 12px 14px; }
.emp-grid {
  display: grid; gap: 10px 14px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.emp-grid label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; color: var(--muted);
}
.emp-grid input, .emp-grid select {
  font: inherit; font-size: 12.5px; padding: 6px 8px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  min-width: 0;
}
.emp-grid input:focus, .emp-grid select:focus { border-color: var(--accent-gold); outline: none; }
/* A statutory number that isn't on file is the thing to fix on this page, so
   the empty box says so rather than looking like every other empty box. */
.emp-grid input.missing { border-color: var(--warning); }
.emp-grid input:disabled, .emp-grid select:disabled { opacity: .6; cursor: default; }
.emp-foot { margin-top: 10px; font-size: 11px; display: flex; flex-wrap: wrap;
             gap: 6px; align-items: center; }
.emp-remove { color: var(--critical); border-color: var(--critical); }

@media (max-width: 760px) {
  .emp-grid { grid-template-columns: 1fr 1fr; }
  .emp-grid input, .emp-grid select { min-height: 38px; }
  /* Nine columns of pay will not fit a phone, and squeezing them turns every
     name into a five-line stack and clips every figure. Hold the natural width
     and let the table scroll inside its own box — the page still does not. */
  .hr-table { min-width: 820px; }
  .hr-table td:first-child, .hr-table th:first-child { min-width: 150px; }
  .hr-table input.pay-in { min-height: 34px; }
}

/* ---- People & access (owner only) ---- */
#people select {
  font: inherit; font-size: 12px; padding: 3px 6px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
}
#people tr.off { opacity: .5; }
.switch { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12px; }
.switch input { accent-color: var(--accent-gold); width: 15px; height: 15px; }
.add-person { margin-top: 14px; border-top: 1px solid var(--grid); padding-top: 10px; }
.add-person summary {
  cursor: pointer; font-size: 12.5px; color: var(--ink-2); font-weight: 600;
  list-style: none; width: max-content;
}
.add-person summary:hover { color: var(--ink); }
.add-person form { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.add-person .row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.add-person label {
  display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 180px;
  font-size: 11px; color: var(--muted);
}
.add-person label.inline {
  flex-direction: row; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-2);
}
.add-person label.inline input { width: 15px; height: 15px; accent-color: var(--accent-gold); }
.add-person input[type=email], .add-person input[type=text], .add-person select {
  font: inherit; font-size: 13px; padding: 6px 9px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
}
.add-person input:focus, .add-person select:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 26%, transparent);
}

/* ---- Dashboard date-range picker ---- */
.daterange { display: inline-flex; align-items: center; gap: 6px; }
.daterange input[type=date] {
  font: inherit; font-size: 12.5px; padding: 5px 9px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
}
.daterange input[type=date]:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 26%, transparent);
}

/* ---- The hot seat ---------------------------------------------------------
   Three answers on opening the app: what needs me, who owes me a document,
   what is bleeding. Everything here is a link to the evidence behind it. */
.grid.two.hot { align-items: start; }
.card.seat .issue { padding: 9px 2px; }
.card.seat .issue:first-of-type { padding-top: 2px; }
.card.seat .issue .detail { font-size: 12px; }
.seat-tail { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px;
             padding-top: 10px; border-top: 1px solid var(--grid); }
.seat-tail .chip {
  font-size: 11.5px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--ink-2); text-decoration: none;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.seat-tail .chip:hover { background: var(--wash-1); color: var(--ink); }
.seat-owned { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--grid); }
.owned-row { font-size: 11.5px; color: var(--ink-2); padding: 2px 0; }
.owned-row .who { font-weight: 650; color: var(--ink); }

/* who owes what — the feed owner is the point, not the feed */
.owes { padding: 9px 0; border-bottom: 1px solid var(--grid); }
.owes:last-child { border-bottom: 0; padding-bottom: 0; }
.owes-who { display: flex; align-items: baseline; gap: 8px; }
.owes-who .who { font-weight: 650; font-size: 13px; }
.owes-who .dim { font-size: 11.5px; }
.owes-list { list-style: none; margin: 5px 0 0; padding: 0;
             display: flex; flex-direction: column; gap: 3px; }
.owes-list li { font-size: 12px; color: var(--ink-2); display: flex; gap: 8px; align-items: baseline; }
.owes-list .status { flex: none; min-width: 62px; font-size: 11px; }

table.data.risk td { padding: 7px 2px; }
table.data.risk a { text-decoration: none; color: var(--ink-2); }
table.data.risk a:hover { color: var(--ink); text-decoration: underline; }
table.data.risk td.num { font-weight: 650; font-variant-numeric: tabular-nums; }

/* ---- Go-live: the line in the sand -----------------------------------------
   History is cleaned as far as it reasonably can be; from an agreed date the
   protocol has to run properly. The card says how far off that is and what is
   short, and nothing else on the page competes with it. */
.card.golive { border-color: var(--accent-gold); }
.card.golive.ready { border-color: var(--good); }
.golive-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.golive-date {
  font-family: "Bodoni Moda", Georgia, serif; font-size: 22px; font-weight: 600;
  color: var(--brand); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.golive-days {
  font-family: "Space Mono", monospace; font-size: 11px; letter-spacing: .04em;
  color: #141f38; background: var(--accent-gold); padding: 3px 9px; border-radius: 999px;
}
.card.golive.ready .golive-days { background: var(--good); color: #fff; }
.golive-score { margin-left: auto; text-align: right; font-size: 12px; color: var(--ink-2); }
.golive-score strong { font-size: 16px; color: var(--ink); }
.golive-bar {
  width: 132px; height: 5px; border-radius: 999px; background: var(--wash-1);
  margin-top: 5px; overflow: hidden;
}
.golive-bar span { display: block; height: 100%; background: var(--accent-gold);
                   transition: width .5s var(--ease); }
.card.golive.ready .golive-bar span { background: var(--good); }

.gates { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
.gate {
  display: flex; gap: 10px; align-items: flex-start; text-decoration: none;
  padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px;
  transition: background .16s var(--ease), border-color .16s var(--ease);
}
.gate:hover { background: var(--wash-1); }
.gate-mark {
  flex: none; width: 22px; height: 22px; border-radius: 999px;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  font-family: "Space Mono", monospace;
}
.gate.ok .gate-mark { background: var(--good); color: #fff; }
.gate.short .gate-mark { background: var(--accent-coral); color: #fff; }
.gate.short { border-color: color-mix(in srgb, var(--accent-coral) 34%, var(--border)); }
.gate-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.gate-detail { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.golive-note {
  font-size: 11.5px; color: var(--muted); margin: 11px 0 0;
  padding-top: 10px; border-top: 1px solid var(--grid); max-width: 92ch;
}
.golive-note strong { color: var(--ink-2); }

/* era marker on a flag */
.era {
  font-family: "Space Mono", monospace; font-size: 9.5px; text-transform: uppercase;
  letter-spacing: .08em; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--border);
}
.era.live { background: var(--accent-gold); color: #141f38; border-color: transparent; font-weight: 700; }
.era.historic { color: var(--muted); }

/* ---- Opening balances: proposal on the left, signature on the right ---- */
table.data.ob td { vertical-align: top; padding: 10px 8px; }
table.data.ob tr.agreed { background: color-mix(in srgb, var(--good) 6%, transparent); }
.ob-basis { font-size: 11px; color: var(--muted); margin-top: 3px; max-width: 46ch; line-height: 1.45; }
.ob-input input { width: 118px; text-align: right; }
.ob-drift { font-size: 11px; color: var(--warning); margin-top: 3px; font-weight: 600; }
.ob-sign { font-size: 11.5px; color: var(--ink-2); }
.ob-sign .who { font-weight: 650; color: var(--ink); }

/* ---- Payroll ---- */
tr.row-bad td { background: color-mix(in srgb, var(--critical) 7%, transparent); }
.calc-diff { font-size: 10.5px; color: var(--critical); font-weight: 600; margin-top: 2px; }

/* ---- A payslip is a document, not a screen: it must print cleanly ---- */
.payslip-body { background: var(--plane); padding: 24px 16px 60px; }
.payslip {
  max-width: 760px; margin: 0 auto; background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 30px 34px;
  box-shadow: var(--shadow-sm);
}
.ps-head { display: flex; justify-content: space-between; align-items: flex-start;
           gap: 20px; padding-bottom: 16px; border-bottom: 2px solid var(--ink); }
.ps-brand { display: flex; gap: 12px; align-items: center; }
.ps-brand .brand-name { font-size: 15px; }
.ps-title { text-align: right; }
.ps-month { font-family: "Bodoni Moda", Georgia, serif; font-size: 17px; font-weight: 600; }
.ps-who { display: flex; flex-wrap: wrap; gap: 10px 34px; padding: 14px 0;
          border-bottom: 1px solid var(--grid); font-size: 13px; }
.ps-lbl { display: block; font-family: "Space Mono", monospace; font-size: 9.5px;
          text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.ps-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; padding: 16px 0; }
.ps-cols h3, .ps-employer h3 { font-size: 11px; text-transform: uppercase;
  letter-spacing: .14em; color: var(--muted); margin: 0 0 6px;
  font-family: "Space Mono", monospace; font-weight: 700; }
.ps-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ps-table td { padding: 5px 0; }
.ps-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.ps-table tr.ps-total td { border-top: 1px solid var(--baseline); font-weight: 650; padding-top: 7px; }
.ps-note { font-size: 10.5px; color: var(--muted); }
.ps-net { display: flex; justify-content: space-between; align-items: baseline;
  background: var(--ink); color: var(--surface); padding: 13px 18px;
  border-radius: 10px; margin: 4px 0 18px; }
.ps-net strong { font-size: 22px; font-family: "Bodoni Moda", Georgia, serif; }
.ps-employer { padding-top: 12px; border-top: 1px solid var(--grid); }
.ps-warn { margin-top: 16px; padding: 11px 14px; border-radius: 9px; font-size: 12px;
  background: color-mix(in srgb, var(--critical) 12%, transparent);
  border: 1px solid var(--critical); }
.ps-foot { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--grid);
  font-size: 11px; color: var(--muted); display: flex; justify-content: space-between;
  gap: 16px; align-items: flex-end; }

/* ---- Invoice: the same document furniture as a payslip, plus lines ---- */
.inv-seller-ids { font-size: 10.5px; color: var(--muted); margin-top: 3px; }
.inv-who { gap: 10px 28px; }
.inv-lines { width: 100%; border-collapse: collapse; font-size: 13px; margin: 16px 0 6px; }
.inv-lines th {
  text-align: left; font-family: "Space Mono", monospace; font-size: 9.5px;
  text-transform: uppercase; letter-spacing: .14em; color: var(--muted);
  font-weight: 700; padding: 0 0 6px; border-bottom: 1px solid var(--baseline);
}
.inv-lines th.num, .inv-lines td.num { text-align: right; font-variant-numeric: tabular-nums; }
.inv-lines td { padding: 7px 0; border-bottom: 1px solid var(--grid); vertical-align: top; }
.inv-lines td:not(:first-child), .inv-lines th:not(:first-child) { padding-left: 14px; }
.inv-totals { width: 100%; max-width: 300px; margin-left: auto; border-collapse: collapse;
  font-size: 13px; margin-bottom: 8px; }
.inv-totals td { padding: 4px 0; }
.inv-totals td.num { text-align: right; font-variant-numeric: tabular-nums; }
.inv-totals tr.inv-totals-sum td { border-top: 1px solid var(--baseline);
  padding-top: 7px; font-weight: 700; }
.inv-doc-date { font-size: 11px; color: var(--muted); margin-top: 3px; }
.inv-tpin-note { margin: 10px 0 0; }
.inv-pay { padding-top: 12px; border-top: 1px solid var(--grid); font-size: 12.5px; }
.inv-pay h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--muted); margin: 0 0 5px; font-family: "Space Mono", monospace; font-weight: 700; }

/* Banking details print one block per account. A customer paying the wrong
   account is a fortnight of chasing, so each block names its own currency. */
.inv-banks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 26px; margin: 8px 0 10px; }
.inv-bank-name { font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  margin-bottom: 4px; }
.inv-bank { break-inside: avoid; }   /* never split an account across pages */
.inv-bank dl { margin: 0; font-size: 11.5px; }
.inv-bank dl > div { display: flex; gap: 8px; padding: 1px 0; }
.inv-bank dt { color: var(--muted); flex: 0 0 84px; }
.inv-bank dd { margin: 0; font-variant-numeric: tabular-nums; }
.inv-thanks { margin-top: 16px; font-size: 12.5px; }
.inv-thanks p { margin: 0 0 8px; }
.inv-sign { color: var(--muted); }
.inv-sign strong { color: var(--ink); }

/* ---- Buying & costs ---- */
.alias-chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px;
  border: 1px solid var(--grid); border-radius: 12px; padding: 1px 4px 1px 9px;
  margin: 0 5px 5px 0; white-space: nowrap;
}
.alias-forget {
  border: 0; background: none; color: var(--muted); cursor: pointer;
  font-size: 13px; line-height: 1; padding: 2px 5px; border-radius: 50%;
}
.alias-forget:hover { color: var(--critical); background: var(--wash-1); }
.merge-box { margin-top: 12px; border-top: 1px solid var(--grid); padding-top: 10px; }
.merge-box > summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
.merge-box > summary:hover { color: var(--accent-gold); }

/* What is on the shelf. */
.stock-figures { display: grid; gap: 10px 26px; margin: 6px 0 0;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.stock-figures strong { display: block; font-size: 17px;
  font-family: "Bodoni Moda", Georgia, serif; }
.stock-figures .neg, td.neg { color: var(--critical); }
.stock-actions { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 14px;
  padding-top: 12px; border-top: 1px solid var(--grid); }
.stock-actions form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.stock-actions input[type="text"] { min-width: 130px; }

/* The invoice itself, shown beside what we made of it. */
.doc-evidence { margin-bottom: 14px; }
.doc-pages { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 4px; }
.doc-page { position: relative; margin: 0; flex: 0 0 auto; max-width: 100%; }
.doc-page img {
  display: block; max-width: min(680px, 100%); height: auto;
  border: 1px solid var(--grid); border-radius: 4px; background: #fff;
}
.doc-page figcaption { font-size: 11px; color: var(--muted); margin-top: 4px; }
.doc-mark {
  position: absolute; pointer-events: none; border: 2px solid var(--accent-gold);
  background: color-mix(in srgb, var(--accent-gold) 18%, transparent);
  border-radius: 2px;
}

/* Correcting what the reader got wrong. */
.purch-what { min-width: 260px; }
.fig {
  width: 100%; font-size: 12px; padding: 3px 5px;
  border: 1px solid var(--grid); border-radius: 3px; background: transparent;
  color: inherit; font-variant-numeric: tabular-nums;
}
.fig:focus { border-color: var(--accent-gold); outline: none; }
td.num .fig { text-align: right; }
.fig-unit { margin-top: 3px; font-size: 11px; }
.was { font-size: 10.5px; color: var(--muted); margin-top: 2px; font-style: italic; }
.purch-src { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
  font-size: 10.5px; color: var(--muted); margin-top: 4px; }
.purch-raw { font-size: 10.5px; margin-top: 4px; }
.purch-raw > summary { cursor: pointer; color: var(--muted); }
.purch-raw code { font-size: 10.5px; word-break: break-word; }
.purch-suggest { font-size: 11px; color: var(--warning); margin-top: 5px;
  max-width: 44ch; }
.btn-link {
  border: 0; background: none; padding: 0; font: inherit; cursor: pointer;
  color: var(--accent-gold); text-decoration: underline; font-size: inherit;
}

.supplier-fix { margin-bottom: 14px; }
.supplier-fix form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.supplier-fix input[type="text"] { min-width: 260px; }

.purch-lines td { vertical-align: top; }
.purch-decide { min-width: 320px; }
.purch-basis { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
  font-size: 11.5px; margin-bottom: 6px; }
.purch-basis .dim { max-width: 44ch; }
.purch-pick { display: grid; gap: 6px; }
.purch-pick select, .purch-pick input[type="text"] { width: 100%; }
.purch-new { display: grid; gap: 6px; grid-template-columns: 2fr 1fr 1fr; }
.purch-remember { font-size: 11px; color: var(--muted); display: flex; gap: 6px;
  align-items: baseline; }
.purch-remember em { color: var(--ink); font-style: normal; }
.purch-factor { font-size: 11px; color: var(--muted); }
.purch-result { margin-top: 6px; font-size: 11.5px; }
.purch-blocked { color: var(--warning); margin: 0; font-size: 11.5px; max-width: 46ch; }
tr.is-skipped { opacity: .55; }
tr.is-blocked td:first-child { box-shadow: inset 3px 0 0 var(--warning); }

@media (max-width: 760px) {
  .purch-new { grid-template-columns: 1fr; }
  .purch-pick select, .purch-pick input[type="text"] { min-height: 38px; }
}

/* The bank-account editor on the Invoices page. */
.bank-editor { display: grid; gap: 12px; }
.bank-card { border: 1px solid var(--grid); border-radius: 6px; padding: 10px 12px; }
.bank-card > h4 { margin: 0 0 8px; font-size: 12.5px; display: flex; gap: 10px;
  align-items: baseline; justify-content: space-between; flex-wrap: wrap; }
.bank-card-grid { display: grid; gap: 8px 14px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.bank-on { font-size: 11px; color: var(--muted); font-weight: 400;
  display: flex; gap: 6px; align-items: center; }

/* ---- Raising one, on the Invoices page ---- */
.new-invoice { margin-bottom: 14px; }
.new-invoice > summary {
  cursor: pointer; list-style: none; font-size: 13px; color: var(--ink);
}
.new-invoice > summary::-webkit-details-marker { display: none; }
.new-invoice > summary::before { content: "\25B8 "; color: var(--muted); }
.new-invoice[open] > summary::before { content: "\25BE "; }
.new-invoice > summary:hover { color: var(--accent-gold); }
.new-invoice form { margin-top: 14px; }
.inv-head-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.inv-head-row label {
  display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 170px;
  font-size: 11px; color: var(--muted);
}
.inv-head-row input, .inv-editor input, .inv-editor select, #company-form input {
  font: inherit; font-size: 12.5px; padding: 6px 8px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  min-width: 0;
}
.inv-head-row input:focus, .inv-editor input:focus, .inv-editor select:focus,
#company-form input:focus { border-color: var(--accent-gold); outline: none; }
.inv-hint { font-size: 10.5px; }
.inv-editor { min-width: 560px; }
.inv-editor .inv-item { width: 100%; }
.inv-editor .inv-desc { width: 100%; margin-top: 5px; }
.inv-editor .inv-qty { width: 7ch; text-align: right; }
.inv-editor .inv-price { width: 11ch; text-align: right; }
.inv-editor .inv-amt { font-variant-numeric: tabular-nums; padding-top: 12px; }
/* A line priced under the published list is the one thing on this form worth
   noticing before it is issued, so it is marked while it is still editable. */
.inv-editor tr.discounted .inv-price { border-color: var(--warning); }
.inv-foot { display: flex; justify-content: space-between; align-items: flex-end;
  gap: 20px; flex-wrap: wrap; margin-top: 14px; }
.inv-sum { font-size: 12.5px; min-width: 200px; }
.inv-sum > div { display: flex; justify-content: space-between; gap: 20px; padding: 3px 0; }
.inv-sum strong { font-variant-numeric: tabular-nums; }
.inv-sum-total { border-top: 1px solid var(--baseline); margin-top: 4px; padding-top: 6px !important; }
.inv-sum-total strong { font-size: 16px; font-family: "Bodoni Moda", Georgia, serif; }
.inv-actions { display: flex; align-items: center; gap: 10px; }
.btn-quiet { font-size: 11px; padding: 2px 8px; }
#inv-discount-note { font-size: 11.5px; color: var(--warning); margin: 8px 0 0; }

@media (max-width: 760px) {
  .inv-head-row label { min-width: 140px; }
  .inv-head-row input, .inv-editor input, .inv-editor select,
  #company-form input, #bank-form input[type="text"] { min-height: 38px; }
}

/* A payslip used to be something the office printed. It is now mostly read on
   a phone, standing up, by the person it belongs to — so the header stops
   fighting for one line and the print button stops wrapping to three. */
@media (max-width: 620px) {
  .payslip { padding: 20px 18px; }
  .ps-cols { grid-template-columns: 1fr; gap: 14px; }
  .ps-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .ps-title { text-align: left; }
  .ps-who { gap: 10px 22px; }
  .ps-foot { flex-direction: column; align-items: flex-start; }
  .ps-print .btn { white-space: nowrap; min-height: 42px; padding: 0 16px; }
}
@media print {
  .payslip-body { background: #fff; padding: 0; }
  .payslip { box-shadow: none; border: 0; max-width: none; padding: 0; }
  .ps-print { display: none; }
  .ps-net { background: #141f38 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* --- Customers ---------------------------------------------------------- */
/* How sure we are that two accounts are one customer. Certain reads calm, not
   alarming: it is the easy case. Possible is the one that needs a human, so it
   is the one that looks like a question. */
.conf {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border);
  color: var(--ink-2); white-space: nowrap;
}
.conf-certain { background: var(--good); color: #fff; border-color: transparent; }
.conf-likely { background: var(--warning); color: #402c00; border-color: transparent; }
.conf-possible { background: none; color: var(--muted); }

.dup { border-top: 1px solid var(--grid); padding: 8px 0; }
.dup:first-of-type { border-top: 0; }
.dup > summary {
  cursor: pointer; display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; font-size: 13px;
}
.dup > summary::-webkit-details-marker { display: none; }
.dup-why { color: var(--muted); font-size: 12px; flex: 1 1 100%; }
.dup-body { padding: 8px 0 4px; }
.dup-act { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.dup-reason { flex: 1 1 260px; min-width: 0; }

/* The account's own details: label above field, wrapping into as many columns
   as the screen allows. */
.cust-grid {
  display: grid; gap: 12px 20px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.cust-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cust-field input, .cust-field select, .cust-field textarea { width: 100%; }

/* A line on this customer's own price book is the one they will normally be
   sold, so it carries the weight; the other books stay legible but quiet. */
tr[data-price-row].own-book td:first-child { font-weight: 600; }
tr[data-price-row]:not(.own-book) td:first-child { color: var(--ink-2); }
.agreed-in { width: 92px; text-align: right; }