/* Blackties — dark, full-width. No frameworks, no external fonts, no JS. */
:root {
  --bg: #0b0c10;
  --bg-soft: #101218;
  --panel: #15171f;
  --panel-raised: #1b1e29;
  --line: #262a36;
  --text: #e9e8e2;
  --muted: #9a9caa;
  --accent: #d4af37;
  --accent-soft: rgba(212, 175, 55, 0.12);
  --ok: #3ecf8e;
  --ok-soft: rgba(62, 207, 142, 0.12);
  --bad: #ff6b6b;
  --bad-soft: rgba(255, 107, 107, 0.12);
  --notice: #f0b429;
  --notice-soft: rgba(240, 180, 41, 0.12);
  --radius: 12px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.6 "Segoe UI", system-ui, sans-serif;
}
a { color: var(--text); }
h1 { font-size: 1.5rem; margin: 0 0 0.25rem; letter-spacing: 0.01em; }
h2 { font-size: 1rem; margin: 0 0 0.8rem; }
p { margin: 0.4rem 0; }
.muted { color: var(--muted); }
.ok { color: var(--ok); }
.bad { color: var(--bad); }
.notice { color: var(--notice); }
.accent { color: var(--accent); }

/* ---- layout: fixed sidebar + fluid main, the full width of the screen ---- */
.shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 232px; flex: 0 0 232px;
  display: flex; flex-direction: column;
  padding: 1.4rem 1rem 1.2rem;
  background: var(--bg-soft);
  border-right: 1px solid var(--line);
  position: sticky; top: 0; height: 100vh;
}
main { flex: 1; min-width: 0; padding: 2.2rem 2.6rem 3rem; }
main.auth { display: grid; place-items: center; min-height: 100vh; padding: 1rem; }
/* 100%, not 96vw: main.auth already pads 1rem each side, and 96vw fights it — on phone
   widths the box overflowed the padded area by ~17px and clipped the pay/login cards. */
.auth-box { width: min(400px, 100%); }

.brand {
  color: var(--accent); font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; text-decoration: none;
  font-size: 1.02rem; padding: 0.2rem 0.8rem;
}
.brand.big { font-size: 1.55rem; display: block; margin: 0 0 0.2rem; padding: 0; }

.sidebar nav {
  display: flex; flex-direction: column; gap: 0.25rem;
  margin-top: 1.6rem; flex: 1;
}
.nav-link {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.55rem 0.8rem; border-radius: 8px;
  color: var(--muted); text-decoration: none; font-weight: 500;
}
.nav-link svg {
  width: 18px; height: 18px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.nav-link:hover { color: var(--text); background: var(--panel-raised); }
.nav-link.active { color: var(--accent); background: var(--accent-soft); }

/* Mobile menu controls — invisible on desktop; the @media block below turns the
   sidebar into a top bar with a hamburger that reveals nav + footer as a drawer
   (pure-CSS checkbox toggle, so it works under the strict no-inline-JS CSP). */
.nav-toggle { display: none; }        /* desktop: no toggle, nav is always shown */
.nav-burger { display: none; }
.sidebar-top { display: contents; }   /* desktop: brand stays a direct sidebar child */

.sidebar-footer {
  border-top: 1px solid var(--line);
  padding-top: 1rem; margin-top: 1rem;
  display: flex; flex-direction: column; gap: 0.8rem;
}
.whoami { display: flex; align-items: center; gap: 0.65rem; padding: 0 0.3rem; min-width: 0; }
.avatar {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid rgba(212, 175, 55, 0.4);
  display: grid; place-items: center; font-weight: 700;
}
.whoami-text { display: flex; flex-direction: column; line-height: 1.25; font-size: 0.9rem; min-width: 0; }
.whoami-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whoami-text span { color: var(--muted); font-size: 0.78rem; text-transform: capitalize; }
a.whoami { text-decoration: none; color: inherit; border-radius: 8px; padding: 0.35rem 0.3rem; }
a.whoami:hover { background: var(--panel-raised); }
a.whoami.active { background: var(--accent-soft); }

/* ---- profile (read-only details + verified badges) ---- */
.profile { max-width: 600px; }
.profile-section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 0.9rem;
}
.profile-section-head h2 { margin: 0; }
.verified {
  display: inline-flex; align-items: center; gap: 0.35rem;
  color: var(--ok); background: var(--ok-soft);
  border: 1px solid rgba(62, 207, 142, 0.4); border-radius: 999px;
  padding: 0.2rem 0.6rem; font-size: 0.78rem; font-weight: 600; white-space: nowrap;
}
.verified svg {
  width: 0.95rem; height: 0.95rem; fill: none; stroke: currentColor;
  stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}
/* profile / read-only detail list (its own class so it can't collide with the
   .facts grid used on vehicle_detail + status) */
.detail-list { margin: 0; }
.detail-list > div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.7rem 0; border-bottom: 1px solid var(--line);
}
.detail-list > div:last-child { border-bottom: none; }
.detail-list dt { color: var(--muted); margin: 0; }
.detail-list dd { margin: 0; text-align: right; font-weight: 500; overflow-wrap: anywhere; }

/* ---- chauffeur: vehicle selection cards ---- */
/* auto-fill + a max track so ONE allocated car shows as a normal card, not a full-width banner */
.vehicle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 340px)); gap: 1.1rem; }
.vehicle-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.45rem;
  padding: 1.4rem; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); text-decoration: none; color: var(--text);
}
.vehicle-card:hover { border-color: var(--accent); background: var(--panel-raised); }
.vehicle-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vehicle-card-icon {
  width: 44px; height: 44px; fill: none; stroke: var(--accent);
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 0.2rem;
}
.vehicle-card .reg { font-size: 1.05rem; }
.vehicle-card-name { font-weight: 600; }
.vehicle-card-cta { color: var(--accent); font-size: 0.84rem; font-weight: 600; margin-top: 0.15rem; }

/* ---- chauffeur: document download tiles ---- */
.doc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.9rem; margin-top: 0.6rem; }
.doc-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 0.45rem; min-height: 124px; padding: 1.2rem 1rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel-raised); text-decoration: none; color: var(--text);
}
a.doc-tile:hover { border-color: var(--accent); }
a.doc-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.doc-tile-icon { width: 36px; height: 36px; fill: none; stroke: var(--accent);
  stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.doc-tile-name { font-weight: 600; }
.doc-tile-hint { font-size: 0.78rem; color: var(--muted); }
.doc-tile.empty { border-style: dashed; background: transparent; }
.doc-tile.empty .doc-tile-icon { stroke: var(--muted); }
.doc-tile.empty .doc-tile-name { color: var(--muted); }
/* 'not required' tile (e.g. MOT for a new vehicle): greyed out, non-interactive */
.doc-tile.na { background: var(--bg-soft); }
.doc-tile.na .doc-tile-icon { stroke: var(--muted); }
.doc-tile.na .doc-tile-name, .doc-tile.na .doc-tile-hint { color: var(--muted); }
/* the permission-letter tile is a form button styled like a download tile */
.doc-tile-form { display: contents; }
button.doc-tile { margin: 0; width: 100%; font: inherit; cursor: pointer; }
button.doc-tile:hover { border-color: var(--accent); filter: none; }
button.doc-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.doc-tile[disabled] { opacity: 0.6; cursor: progress; }

/* loading bar shown while the permission letter is generated, until it downloads */
.letter-status { margin-top: 1rem; }
.letter-status p { margin: 0.5rem 0 0; }
.letter-bar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.letter-bar span {
  display: block; height: 100%; width: 38%; border-radius: 999px; background: var(--accent);
  animation: letter-slide 1.1s ease-in-out infinite;
}
@keyframes letter-slide { 0% { margin-left: -40%; } 100% { margin-left: 102%; } }
.letter-status.letter-error .letter-bar { display: none; }
.letter-status.letter-error p { color: var(--bad); }

/* ---- global documents: placeholder reference chips ---- */
.placeholder-grid { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
code.ph {
  background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
  padding: 0.18rem 0.5rem; font-size: 0.82rem; color: var(--accent); white-space: nowrap;
}

/* ---- page furniture ---- */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.6rem; flex-wrap: wrap;
}
.page-head p { margin: 0; }
.page-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.crumbs { margin: 0 0 0.35rem; font-size: 0.85rem; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.4rem 1.6rem; margin-bottom: 1.4rem;
}
.narrow { max-width: 460px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }

.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.2rem; margin-bottom: 1.4rem;
}
.stat { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0; text-decoration: none; }
a.stat:hover { border-color: var(--accent); }
.stat-label {
  font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--muted); font-weight: 600;
}
.stat-value { font-size: 1.9rem; font-weight: 600; line-height: 1.25; }
.stat-sub { font-size: 0.85rem; }

/* ---- tables ---- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td {
  text-align: left; padding: 0.6rem 0.65rem;
  border-bottom: 1px solid var(--line); vertical-align: middle;
}
th {
  color: var(--muted); font-weight: 600; font-size: 0.76rem;
  text-transform: uppercase; letter-spacing: 0.08em;
}
tbody tr:last-child td { border-bottom: none; }
.rows tbody tr:hover td { background: var(--panel-raised); }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
th.mark-col, td.mark-col { text-align: center; }
.row-link { color: var(--text); text-decoration: none; font-weight: 600; }
.row-link:hover { color: var(--accent); }
.tick { color: var(--ok); font-weight: 700; }
.cross { color: var(--bad); font-weight: 700; }
/* Status page: brief highlight as each check streams in during a live run. */
tr.just-ran td { animation: bt-flash 0.9s ease-out; }
@keyframes bt-flash { from { background: var(--accent-soft); } to { background: transparent; } }
/* Dashboard "Fleet value today" tile acting as an expand toggle (reset the
   global button look back to a stat card). */
button.stat-toggle {
  margin-top: 0; width: 100%; text-align: left;
  color: var(--text); font-weight: 400; font-family: inherit; font-size: inherit;
}
button.stat-toggle:hover { filter: none; border-color: var(--accent); }
button.stat-toggle[aria-expanded="true"] { border-color: var(--accent); }
/* Fleet-value history chart (inline SVG, server-rendered) */
.val-chart { margin: 0.3rem 0 1rem; }
svg.chart { width: 100%; height: auto; display: block; }
.chart-area { fill: var(--accent-soft); stroke: none; }
.chart-line { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart-dot { fill: var(--accent); stroke: var(--bg); stroke-width: 1.5; }
.chart-grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-ylab, .chart-xlab { fill: var(--muted); font-size: 11px; }
.chart-overlay { cursor: crosshair; }
.chart-hover { pointer-events: none; }
.chart-cross { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.chart-hoverdot { fill: var(--accent); stroke: var(--bg); stroke-width: 1.5; }
.chart-tip-bg { fill: var(--panel-raised); stroke: var(--line); }
.chart-tip-m { fill: var(--muted); font-size: 11px; }
.chart-tip-v { fill: var(--text); font-size: 13px; font-weight: 600; }
.chart-tip-x { fill: var(--muted); font-size: 11px; }
.chart-tip-x.off { display: none; }
/* Purchase (rise) / sale (drop) event markers on the line */
.evt-buy { fill: var(--ok); stroke: var(--bg); stroke-width: 1.2; }
.evt-sell { fill: var(--bad); stroke: var(--bg); stroke-width: 1.2; }
.val-panel.hide-buy .chart-evt-buy { display: none; }
.val-panel.hide-sell .chart-evt-sell { display: none; }
tr.highlight td { background: var(--accent-soft); }
tr.dim td { color: var(--muted); }
/* Keep .actions a normal table cell (so it keeps row height, vertical-align
   and a bottom border even when empty); lay the action forms out inline. */
td.actions .inline-form { margin: 0.15rem 0.4rem 0.15rem 0; vertical-align: middle; }
/* Compact icon-only action buttons (e.g. the Drivers list). Tooltip via title/aria-label. */
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  padding: 0; margin: 0; border-radius: 8px; background: transparent; color: var(--muted);
  border: 1px solid var(--line); cursor: pointer; }
.icon-btn:hover { color: var(--accent); border-color: var(--accent); filter: none; }
.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }
/* MOT advisories/defects column: cap its width so it can't dominate the table */
th.defects, td.defects { max-width: 24rem; }
td.defects > div { overflow-wrap: anywhere; }

/* ---- pills & registration plates ---- */
.pill {
  display: inline-block; padding: 0.1rem 0.62rem; border-radius: 999px;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em;
  border: 1px solid transparent; white-space: nowrap;
}
.pill.ok { color: var(--ok); background: var(--ok-soft); border-color: rgba(62, 207, 142, 0.35); }
.pill.bad { color: var(--bad); background: var(--bad-soft); border-color: rgba(255, 107, 107, 0.35); }
.pill.notice { color: var(--notice); background: var(--notice-soft); border-color: rgba(240, 180, 41, 0.35); }
.pill.muted { color: var(--muted); background: rgba(154, 156, 170, 0.1); border-color: rgba(154, 156, 170, 0.3); }

.reg {
  display: inline-block;
  font-family: Consolas, "Cascadia Mono", monospace;
  font-weight: 700; letter-spacing: 0.08em;
  padding: 0.08rem 0.55rem; border-radius: 6px;
  background: var(--panel-raised); border: 1px solid var(--line);
  color: var(--accent); text-decoration: none; white-space: nowrap;
}
a.reg:hover { border-color: var(--accent); }
h1 .reg { font-size: 1rem; vertical-align: 0.15em; margin-left: 0.45rem; }

/* ---- forms ---- */
label { display: block; margin: 0.95rem 0 0.3rem; color: var(--muted); font-size: 0.88rem; }
input, select {
  width: 100%; padding: 0.6rem 0.75rem;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; font: inherit;
}
input:focus, select:focus {
  outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent);
}
input::placeholder { color: var(--muted); opacity: 0.6; }
/* Make the native date-picker icon visible on the dark background. */
input[type="date"], input[type="datetime-local"] { color-scheme: dark; }

button {
  margin-top: 1.1rem; padding: 0.6rem 1.3rem;
  background: var(--accent); color: #15110a; font-weight: 600;
  border: none; border-radius: 8px; cursor: pointer; font-size: inherit;
  font-family: inherit;
}
button:hover { filter: brightness(1.08); }
button.ghost {
  background: transparent; color: var(--muted);
  border: 1px solid var(--line); margin-top: 0; font-weight: 500;
}
button.ghost:hover { color: var(--accent); border-color: var(--accent); filter: none; }
button.block { width: 100%; }
.inline-form { display: inline-block; }
/* link styled as a ghost button (e.g. the error page back link) */
.button-link {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0.55rem 1.3rem; background: transparent; color: var(--accent);
  border: 1px solid var(--line); border-radius: 8px;
  text-decoration: none; font-weight: 600;
}
.button-link:hover { border-color: var(--accent); }

/* ---- flashes & one-time secrets ---- */
.flash { padding: 0.8rem 1.1rem; border-radius: 10px; margin-bottom: 1.2rem; border: 1px solid; }
.flash.error { background: var(--bad-soft); border-color: rgba(255, 107, 107, 0.4); }
.flash.notice { background: var(--notice-soft); border-color: rgba(240, 180, 41, 0.4); }
/* ---- confirmation modal (driver Penalty Charges "View" gate) ---- */
.modal { max-width: 460px; width: calc(100% - 2rem); border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--panel-raised); color: var(--text);
  padding: 1.5rem 1.6rem; box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5); }
.modal::backdrop { background: rgba(0, 0, 0, 0.6); }
.modal-head { margin: 0 0 0.7rem; font-size: 1.1rem; font-weight: 700; color: var(--text); }
.modal-body { margin: 0 0 1.4rem; font-size: 0.95rem; line-height: 1.55; color: var(--text); }
.modal-actions { display: flex; justify-content: flex-end; gap: 0.7rem; flex-wrap: wrap; }
.modal-actions button, .modal-actions a { margin: 0; }
/* Book-MOT modal: compact garage + slot picker. */
.mot-modal { max-width: 420px; }
.mot-book-form label { display: block; margin: 0.7rem 0 0.25rem; font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.mot-book-form select, .mot-book-form input { width: 100%; margin: 0; }
.mot-book-form .modal-actions { margin-top: 1.2rem; }
.mot-book-form .modal-head .reg { font-size: 0.95rem; vertical-align: middle; }
/* Which processor holds a saved card — shown on every card row/tile. */
.card-proc { color: var(--muted); font-size: 0.72rem; border: 1px solid var(--line);
  border-radius: 999px; padding: 0.05rem 0.5rem; margin-left: 0.4rem; }

/* Payment-processor switch (Billing settings): one option per gateway, radio-selected. */
.processor-form { margin-top: 0.4rem; }
.processor-option { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.8rem;
  border: 1px solid var(--line); border-radius: 8px; margin: 0 0 0.5rem; cursor: pointer; }
.processor-option.is-active { border-color: var(--accent); }
.processor-option.is-disabled { opacity: 0.55; cursor: not-allowed; }
.processor-option input[type="radio"] { margin: 0; width: auto; }
.processor-name { font-weight: 700; }
.processor-form button { margin-top: 0.4rem; }

/* Excess-mileage invoice modal: the week's facts, then an editable rate + live total. */
.om-modal { max-width: 440px; }
.om-invoice-form label { display: block; margin: 0.9rem 0 0.25rem; font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.om-invoice-form input[type="number"] { width: 100%; margin: 0; }
.om-invoice-form .modal-head .reg { font-size: 0.95rem; vertical-align: middle; }
.om-facts { margin: 0 0 0.2rem; }
.om-total-line { margin: 1rem 0 1.3rem; font-size: 1rem; }
.om-total-line strong { color: var(--accent); }
/* A Coming-Up item that's already booked into the workshop — de-emphasised (still visible). */
tr.coming-booked td { opacity: 0.62; }
tr.coming-booked .pill.ok { opacity: 1; }
.pcn-continue { display: inline-flex; align-items: center; min-height: 44px; padding: 0.55rem 1.3rem;
  border-radius: 10px; background: var(--accent); color: #0b0c10; font-weight: 700;
  border: 1px solid var(--accent); text-decoration: none; cursor: pointer; }
.pcn-continue:hover { filter: brightness(1.07); }
/* the toggled Continue controls set display, so [hidden] needs an explicit override to win */
.pcn-continue[hidden] { display: none; }
/* "Email" action styled as a link to sit beside the "View" link in the driver PCN list */
.link-btn { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--accent); cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
/* Driver Penalty Charges: uniform action buttons (View / Email / Appeal) + reference search */
.pcn-actions { display: flex; gap: 0.45rem; flex-wrap: wrap; align-items: center; }
.pcn-actions .inline-form { display: contents; }   /* button becomes a direct flex item, aligned with View */
.pcn-act { display: inline-flex; align-items: center; justify-content: center; font: inherit; font-size: 0.85rem;
  line-height: 1.2; margin: 0; padding: 0.4rem 0.9rem; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg-soft); color: var(--text); text-decoration: none; cursor: pointer; white-space: nowrap; }
.pcn-act:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.pcn-act:disabled { color: var(--muted); cursor: not-allowed; opacity: 0.55; }
/* Driver invoices: Pay is the one FILLED (gold) action in the row — everything else stays ghost. */
.pcn-act.inv-pay { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.pcn-act.inv-pay:hover { border-color: var(--accent); color: #fff; filter: brightness(1.1); }
/* PCN-fee invoices link back to the notice itself (via /my/pcns with the row highlighted). */
.inv-pcn-link { font-weight: 600; text-decoration: none; }
.inv-pcn-link:hover { text-decoration: underline; }
.pcn-search { display: flex; align-items: center; gap: 0.5rem; width: 100%; max-width: 320px;
  margin: 0 0 1.1rem; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; padding: 0 0.7rem; }
.pcn-search:focus-within { border-color: var(--accent); }
.pcn-search-ic { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: var(--muted); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.pcn-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: inherit;
  padding: 0.55rem 0; outline: none; }
.pcn-search input::placeholder { color: var(--muted); }
/* Row highlighted after arriving from a "PCN added to your account" email link */
.rows tbody tr.pcn-hl > td { background: var(--accent-soft); animation: pcn-hl-flash 2s ease-out 1; }
.rows tbody tr.pcn-hl > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
@keyframes pcn-hl-flash { from { background: rgba(212, 175, 55, 0.30); } to { background: var(--accent-soft); } }
/* ---- Billing overview (metrics + revenue chart) ---- */
.metric-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1.2rem; }
.metric-row .card { margin: 0; }
.metric { display: flex; flex-direction: column; gap: 0.3rem; }
.metric-label { font-size: 0.72rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.metric-value { font-size: 1.95rem; font-weight: 700; color: var(--text); line-height: 1.1; }
.metric-sub { font-size: 0.82rem; color: var(--muted); }
.chart-legend { display: flex; gap: 1.1rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.legend-item { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: var(--muted); }
.legend-dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; flex: 0 0 auto; }
.rev-chart { width: 100%; height: auto; display: block; }
.rev-chart .axis { stroke: var(--line); stroke-width: 1; }
.rev-chart .x-label { fill: var(--muted); font-size: 11px; text-anchor: middle; }
.rev-chart .y-label { fill: var(--muted); font-size: 10px; }
/* Live "auto-charge processing" indicator — an indeterminate brand-purple bar. */
.proc-bar { position: relative; height: 4px; margin-top: 0.6rem; border-radius: 999px;
  background: rgba(148, 108, 255, 0.18); overflow: hidden; }
.proc-bar::before { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 35%;
  border-radius: 999px; background: #4A068F; animation: proc-slide 1.15s ease-in-out infinite; }
@keyframes proc-slide { 0% { left: -35%; } 50% { left: 45%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .proc-bar::before { animation: none; width: 100%; opacity: 0.55; } }
/* Card-on-file selector + inline add-card (create-invoice form). */
.card-on-file { margin-top: 0.9rem; }
.field-label { font-size: 0.72rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 0.45rem; }
.card-brand { width: 34px; height: 23px; border-radius: 4px; flex: 0 0 auto; }
.card-select { position: relative; max-width: 340px; }
.card-select-trigger, .card-option { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit;
  padding: 0.5rem 0.7rem; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; color: var(--text); cursor: pointer; }
.card-select-trigger:hover, .card-option:hover { border-color: var(--accent); }
.card-num { font-variant-numeric: tabular-nums; letter-spacing: 0.03em; }
.card-default { font-size: 0.66rem; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 0.12rem 0.5rem; border-radius: 999px; }
.card-caret { color: var(--muted); margin-left: auto; }
.card-select-trigger .card-default { margin-left: auto; }
.card-select-trigger .card-default + .card-caret { margin-left: 8px; }
.card-select-menu { position: absolute; z-index: 20; left: 0; right: 0; margin-top: 5px; display: flex; flex-direction: column; gap: 4px;
  background: var(--panel-raised); border: 1px solid var(--line); border-radius: 10px; padding: 5px; box-shadow: 0 10px 30px rgba(0,0,0,0.45); }
.card-select-menu[hidden] { display: none; }  /* author display:flex would otherwise defeat the hidden attr (stuck open) */
.card-select-menu .card-option { background: transparent; border-color: transparent; }
.card-select-menu .card-option:hover { background: var(--bg-soft); }
.card-option.card-add { color: var(--accent); font-weight: 600; border-top: 1px solid var(--line); border-radius: 0; }
.add-card-area { margin-top: 0.8rem; max-width: 360px; display: flex; flex-direction: column; gap: 0.55rem;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; padding: 0.8rem; }
.card-field-inline { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 0.6rem 0.7rem; min-height: 44px; }
.card-add-status { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--muted); }
.card-add-status.ok { color: var(--ok, #34c759); }
.card-add-status.bad { color: var(--bad); }
/* Subscription payment-method rows: primary + backups, each with Make-primary / Remove. */
.pm-list { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.3rem 0 0.8rem; max-width: 460px; }
.pm-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; padding: 0.55rem 0.75rem; flex-wrap: wrap; }
.pm-row-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pm-badge { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.03em; }
.pm-row-actions { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; }
.ghost.small { padding: 0.28rem 0.6rem; font-size: 0.78rem; }
.pm-add { margin-top: 0.2rem; }
.pm-save { margin-top: 0.55rem; }
code.secret {
  font-size: 1.05rem; color: var(--accent); background: var(--bg);
  padding: 0.15rem 0.5rem; border-radius: 6px; user-select: all;
}

/* ---- sign-in page ---- */
.auth-card { text-align: center; padding: 2.2rem 2rem; margin-bottom: 0; }
.auth-card form { text-align: left; }

/* ---- tablets & phones: sidebar becomes a sticky top bar + hamburger drawer ---- */
@media (max-width: 880px) {
  .shell { flex-direction: column; }
  .sidebar {
    width: 100%; flex: none; height: auto; position: sticky; top: 0; z-index: 30;
    flex-direction: column; gap: 0; padding: 0;
    border-right: none; border-bottom: 1px solid var(--line);
  }
  /* hidden but keyboard-focusable so the burger is reachable by Tab + Space */
  .nav-toggle { display: block; position: absolute; opacity: 0; width: 1px; height: 1px; }
  .sidebar-top {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 0.55rem 1rem;
  }
  .brand { padding: 0.2rem 0; }
  .nav-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin: 0; padding: 0; cursor: pointer;
    background: transparent; color: var(--text);
    border: 1px solid var(--line); border-radius: 8px;
  }
  .nav-burger svg { width: 22px; height: 22px; fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; }
  .nav-burger:hover { border-color: var(--accent); color: var(--accent); }
  .nav-toggle:focus-visible ~ .sidebar-top .nav-burger { outline: 2px solid var(--accent); outline-offset: 2px; }

  .sidebar nav {
    display: none; flex-direction: column; width: 100%; margin: 0;
    gap: 0.15rem; padding: 0.4rem 0.7rem 0.7rem; border-top: 1px solid var(--line);
  }
  .nav-toggle:checked ~ nav { display: flex; }
  .sidebar-footer {
    display: none; width: 100%; margin: 0; padding: 0.6rem 0.7rem 0.9rem;
    border-top: 1px solid var(--line); flex-direction: column; align-items: stretch; gap: 0.5rem;
  }
  .nav-toggle:checked ~ .sidebar-footer { display: flex; }
  .nav-link, a.whoami, .sidebar-footer .ghost { min-height: 44px; }
  .nav-link { padding: 0.6rem 0.8rem; }

  main { padding: 1.4rem 1rem 2.5rem; }
  h1 { font-size: 1.3rem; }
  .page-head { margin-bottom: 1.1rem; }
  button { min-height: 44px; }

  /* facts grid → single column; detail-list rows stack label over value */
  .facts { grid-template-columns: 1fr; gap: 0; }
  .facts dt { margin-top: 0.55rem; }
  .facts dd { margin-bottom: 0.25rem; }
  .detail-list > div { flex-direction: column; align-items: flex-start; gap: 0.15rem; }
  .detail-list dd { text-align: left; }

  /* tabs → swipeable strip */
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; white-space: nowrap; padding: 0.7rem 0.9rem; min-height: 44px; }

  /* bigger tap targets for chips */
  .chip { padding: 0.5rem 0.95rem; min-height: 44px; }
  .chip-row { gap: 0.5rem; }

  /* condition tab: shorter viewer, stacked model picker */
  .car-3d { height: clamp(240px, 46vh, 380px); }
  .model-picker { width: 100%; }
  .model-picker select { width: 100%; min-width: 0; }
  .model-picker button { width: 100%; }

  th, td { padding: 0.5rem 0.5rem; }
}

/* ---- phones: wide tables become stacked, labelled cards ---- */
@media (max-width: 640px) {
  .table-wrap { overflow-x: visible; }
  .rows, .rows tbody { display: block; }
  /* visually hide the header row but keep it for assistive tech */
  .rows thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rows tbody tr {
    display: block; border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--panel-raised); padding: 0.35rem 0.9rem; margin-bottom: 0.8rem;
  }
  .rows tbody tr:hover td { background: transparent; }
  .rows td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    padding: 0.5rem 0; border-bottom: 1px solid var(--line); text-align: right;
  }
  .rows tr td:last-child { border-bottom: none; }
  .rows td::before {
    content: attr(data-label); color: var(--muted); font-weight: 600;
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
    text-align: left; flex: 0 0 auto; white-space: nowrap;
  }
  .rows td:not([data-label])::before, .rows td[data-label=""]::before { content: none; }
  /* keep the search filter + colspan placeholder rows working after the display overrides */
  .rows tbody tr[hidden] { display: none; }
  .rows td[colspan] { justify-content: center; text-align: center; }
  /* multi-line value cells (driver licence/TfL/contact ranges) stack under the label */
  .rows td.stacked { flex-direction: column; align-items: flex-end; }
  /* defects list: stack left so each advisory reads as a full line */
  .rows td.defects { flex-direction: column; align-items: flex-start; text-align: left; }
  td.defects { max-width: none; }
  /* action cells: full-width stacked buttons */
  .rows td.actions { flex-direction: column; align-items: stretch; text-align: left; }
  .rows td.actions::before { margin-bottom: 0.35rem; }
  .rows td.actions .inline-form { display: block; margin: 0 0 0.4rem; }
  .rows td.actions .inline-form:last-child { margin-bottom: 0; }
  .rows td.actions .ghost, .rows td.actions button { width: 100%; min-height: 44px; }
  /* ...but icon-only action cells stay a compact right-aligned row, not full-width stacks */
  .rows td.actions.icon-actions { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
  .rows td.actions.icon-actions .inline-form { display: inline-flex; width: auto; margin: 0.15rem 0 0.15rem 0.5rem; }
  .rows td.actions.icon-actions .icon-btn { width: 40px; min-height: 40px; }
  #vehicle-search { max-width: none; width: 100%; }
}

/* ---- narrow phones: reclaim space + scale type down ---- */
@media (max-width: 480px) {
  main { padding: 1.1rem 0.8rem 2rem; }
  .card { padding: 1.1rem 1rem; }
  .stat-value { font-size: 1.5rem; }
  h1 { font-size: 1.25rem; }
  .field-row { grid-template-columns: 1fr; }
  .page-actions { width: 100%; }
  .page-actions form, .page-actions .ghost, .page-actions > a { flex: 1 1 auto; }
  .auth-card { padding: 1.6rem 1.1rem; }
}

/* ---- search box + checkboxes (inline style attributes are blocked by our strict CSP) ---- */
#vehicle-search { max-width: 460px; margin-bottom: 1.2rem; }
input[type="checkbox"] { width: auto; margin-right: 0.45rem; vertical-align: middle; }

/* ---- "Coming Up" day-window filter chips ---- */
.chip-row { display: flex; gap: 0.45rem; flex-wrap: wrap; margin: -0.2rem 0 1.1rem; }
.chip {
  margin-top: 0; padding: 0.32rem 0.85rem;
  background: transparent; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em;
}
.chip:hover { color: var(--text); border-color: var(--accent); filter: none; }
.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip.active {
  background: var(--accent-soft); color: var(--accent);
  border-color: rgba(212, 175, 55, 0.45);
}

/* ---- vehicle detail: tabs ---- */
.tabs {
  display: flex; gap: 0.3rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--line); margin-bottom: 1.4rem;
}
.tab {
  margin-top: 0; padding: 0.55rem 1rem;
  background: transparent; color: var(--muted);
  border: none; border-bottom: 2px solid transparent; border-radius: 0;
  font-size: 0.95rem; font-weight: 600;
}
.tab:hover { color: var(--text); filter: none; }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ---- facts list (Overview details + damage details) ---- */
.facts { display: grid; grid-template-columns: minmax(6rem, max-content) 1fr; gap: 0.35rem 1.2rem; margin: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* ---- vehicle condition: diagram + pins ---- */
.condition-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.condition-head h2, .condition-head h3 { margin: 0; }
/* End/Cancel rental controls on /admin/contracts: compact, inline in the actions cell */
.rental-end-link { margin: 0; min-height: 0; padding: 0.3rem 0.9rem; font-size: 0.85rem; }
.rental-end-inline { display: inline-block; }
.rental-end-inline .rental-end-link { margin: 0; }

/* Rentals board: tabs + search + summary table with expandable detail rows */
.rentals-head { margin-bottom: 0.9rem; }
.rental-tabs { display: inline-flex; gap: 0.35rem; }
.rtab { margin: 0; padding: 0.3rem 0.95rem; border-radius: 999px; font-size: 0.85rem;
  background: transparent; color: var(--muted); border: 1px solid var(--line); font-weight: 600; }
.rtab:hover { filter: none; color: var(--text); border-color: var(--accent); }
.rtab.active { background: var(--accent); color: #15110a; border-color: var(--accent); }
#rental-search { width: min(260px, 100%); margin: 0; padding: 0.4rem 0.7rem; }
.rentals-table { width: 100%; }
.rentals-table th { text-align: left; color: var(--muted); font-weight: 600; font-size: 0.76rem; }
.rentals-table td { vertical-align: middle; }
.rental-actions-cell { text-align: right; white-space: nowrap; display: flex; gap: 0.45rem;
  justify-content: flex-end; align-items: center; }
.rental-toggle { margin: 0; padding: 0.3rem 0.8rem; font-size: 0.85rem; }
.rental-detail > td { background: var(--bg-soft); border-radius: 8px; padding: 1rem 1.1rem; }
.rental-detail table { margin-top: 0.6rem; }

/* Legacy catch-up form */
.legacy-add summary { cursor: pointer; list-style: revert; }
.legacy-add-h { display: inline; margin: 0; }
.legacy-add[open] summary { margin-bottom: 0.6rem; }
.legacy-add input[type="file"] { margin: 0.3rem 0 0.9rem; }
.condition-layout { display: flex; flex-direction: column; gap: 1.3rem; margin-top: 1rem; }
.condition-diagram { width: 100%; }
.condition-diagram svg { width: 100%; height: auto; display: block; }
#condition-2d { max-width: 320px; margin: 0 auto; }
.car-3d {
  position: relative;
  width: 100%; height: clamp(380px, 60vh, 640px); border-radius: 12px; overflow: hidden;
  /* soft studio backdrop so a dark car still reads against the dark theme */
  background: radial-gradient(circle at 50% 42%, #262b36 0%, #12141b 72%);
  border: 1px solid var(--line);
  touch-action: none; cursor: grab;
}
.car-3d:active { cursor: grabbing; }
.car-3d canvas { display: block; width: 100%; height: 100%; }
.car-3d-loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 0.9rem; pointer-events: none;
}
.model-picker { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.model-picker label { margin: 0; color: var(--muted); }
.model-picker select { width: auto; min-width: 220px; }
.model-picker button { margin-top: 0; }
.condition-details { width: 100%; max-width: 780px; }
#car-diagram [hidden] { display: none; }   /* belt-and-braces for SVG hidden */

.car-body { fill: var(--panel-raised); stroke: var(--line); stroke-width: 1.2; }
.car-roof { fill: var(--bg-soft); stroke: var(--line); stroke-width: 1; }
.car-glass { fill: var(--bg); stroke: var(--line); stroke-width: 0.8; }
.car-wheel { fill: #2a2e3a; }
.car-label { fill: var(--muted); font-size: 7px; text-anchor: middle; letter-spacing: 0.12em; }

.pin { cursor: pointer; }
.pin-dot { fill: var(--accent); stroke: var(--bg); stroke-width: 1; }
.pin[data-status="repaired"] .pin-dot { fill: var(--muted); }
.pin-label { fill: #15110a; font-size: 5.5px; font-weight: 700; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.pin:hover .pin-dot { stroke: var(--accent); stroke-width: 1.6; }
.pin-active .pin-dot { stroke: var(--text); stroke-width: 1.8; }
.pin:focus { outline: none; }
.pin:focus-visible .pin-dot { stroke: var(--text); stroke-width: 2; }
.pin-ghost { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 3 2; }

/* ---- vehicle condition: detail cards ---- */
.damage-photo { max-width: 100%; border-radius: 8px; border: 1px solid var(--line); margin: 0.4rem 0 0.8rem; }
.damage-actions { display: flex; gap: 0.5rem; margin-top: 0.9rem; flex-wrap: wrap; }

/* ---- small helpers ---- */
.mt-1 { margin-top: 0.8rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Auto-managed field (e.g. vehicle subscription description) — de-emphasised, system fills it. */
.auto-desc { font-style: italic; opacity: 0.55; }
.auto-desc::placeholder { font-style: italic; }

/* ---- Type chooser: refined segmented control ---- */
.type-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 4px;
  margin: 0.4rem 0 0;
  background: var(--bg-soft);
  min-width: 0;
}
.type-toggle legend { padding: 0; }
.type-opt { display: block; margin: 0; min-width: 0; }
/* real radio kept in the DOM for JS + a11y, visually hidden but focusable */
.type-opt input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.type-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.62rem 0.85rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease;
}
/* custom radio indicator: empty ring -> filled accent */
.type-dot {
  flex: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: transparent;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.type-opt:hover .type-box { border-color: var(--accent); color: var(--text); }
.type-opt:hover .type-dot { border-color: var(--accent); }
.type-opt input:checked + .type-box {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text);
}
.type-opt input:checked + .type-box .type-dot {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 3.5px var(--accent);
}
.type-opt input:focus-visible + .type-box {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .type-box, .type-dot { transition: none; }
}
@media (max-width: 480px) {
  .type-toggle { grid-template-columns: 1fr; }
}

/* ===== Searchable "Bill to" customer picker (.cust-*) ===== */
/* Progressive enhancement: shell hidden until JS turns it on (.cust-on).
   The native select stays usable with no JS; JS sets select.hidden. */
.cust-search { display: none; position: relative; max-width: 420px; }
.cust-search.cust-on { display: block; }
.cust-field { position: relative; display: flex; align-items: center; }
.cust-field[hidden] { display: none; }  /* author display:flex would otherwise defeat the hidden attr */
.cust-search-ico {
  position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; pointer-events: none; stroke: var(--muted);
}
.cust-field:focus-within .cust-search-ico { stroke: var(--accent); }
.cust-search.cust-selected .cust-search-ico { stroke: var(--accent); }
.cust-input {
  width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  color: var(--text); font: inherit; padding: 0.6rem 2.4rem 0.6rem 2.3rem; min-height: 44px;
}
.cust-input::placeholder { color: var(--muted); }
.cust-input:focus { outline: none; border-color: var(--accent); }
.cust-input:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.cust-search.cust-selected .cust-input { border-color: var(--accent); background: var(--accent-soft); }
.cust-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  margin: 0; min-height: 0;  /* override global button { margin-top:1.1rem; min-height:44px } */
  padding: 0; background: transparent; border: 1px solid transparent; border-radius: 8px;
  color: var(--muted); cursor: pointer;
}
.cust-clear[hidden] { display: none; }  /* author display:flex would otherwise defeat the hidden attr */
.cust-clear:hover { border-color: var(--accent); color: var(--text); }
.cust-clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cust-x { width: 16px; height: 16px; display: block; stroke: var(--accent); }
/* Popover: reuse .card-select-menu chrome; scrollable list of name + email rows. */
.cust-menu { list-style: none; margin-top: 5px; padding: 5px; max-height: 300px; overflow-y: auto; }
.cust-menu[hidden] { display: none; }
/* "Add new customer" action row, top of the list (Stripe-style). */
.cust-add { display: flex; align-items: center; gap: 8px; padding: 0.55rem 0.7rem; border-radius: 10px;
  color: var(--text); font-weight: 600; cursor: pointer; }
.cust-add-plus { font-size: 1.15rem; line-height: 1; color: var(--accent); }
.cust-add.active { background: var(--accent); color: #15110a; }
.cust-add.active .cust-add-plus { color: #15110a; }
.cust-add + .cust-cap { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 0.5rem; }
.cust-cap {
  display: block; padding: 0.4rem 0.6rem 0.3rem; font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted);
}
.cust-opt {
  display: flex; align-items: baseline; gap: 8px; padding: 0.5rem 0.7rem;
  border-radius: 10px; color: var(--text); cursor: pointer;
}
.cust-opt.active { background: var(--accent); }
.cust-opt-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 0 1 auto; max-width: 62%; }
.cust-opt.active .cust-opt-name { color: #15110a; }
.cust-opt-email { color: var(--muted); font-size: 0.85rem; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; }
.cust-opt.active .cust-opt-email { color: rgba(21, 17, 10, 0.72); }
.cust-opt-mark { color: var(--accent); font-weight: 700; }
.cust-opt.active .cust-opt-mark { color: #15110a; }
.cust-opt-tick { width: 16px; height: 16px; margin-left: auto; stroke: var(--accent); flex: none; }
.cust-opt.active .cust-opt-tick { stroke: #15110a; }
.cust-empty { padding: 0.55rem 0.7rem; color: var(--muted); font-size: 0.9rem; }
.cust-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- selected customer block (after a pick) ---- */
.cust-picked { position: relative; max-width: 420px; }
.cust-picked-row {
  display: flex; align-items: center; gap: 10px; padding: 0.55rem 0.7rem;
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
}
.cust-picked-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.cust-picked-primary { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cust-picked-secondary { font-size: 0.85rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cust-picked-menu-btn {
  flex: none; margin: 0; min-height: 0; width: 30px; height: 30px; padding: 0;
  display: flex; align-items: center; justify-content: center; background: transparent;
  border: 1px solid transparent; border-radius: 8px; color: var(--muted); cursor: pointer;
}
.cust-picked-menu-btn:hover { border-color: var(--accent); color: var(--text); }
.cust-picked-menu-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cust-picked-menu-btn svg { fill: currentColor; }

/* hover billing card */
.cust-pop[hidden] { display: none; }
.cust-pop { left: 0; right: 0; top: calc(100% + 6px); margin-top: 0; padding: 0.85rem 1rem; }
.cust-picked:hover .cust-pop, .cust-picked:focus-within .cust-pop { display: block; }
.cust-search.cust-menu-open .cust-pop { display: none !important; }
.cust-pop-dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 0.9rem; }
.cust-pop-dl > div { display: contents; }
.cust-pop-dl > div[hidden] { display: none; }  /* beats display:contents so a no-phone row hides */
.cust-pop-dl dt { color: var(--muted); font-size: 0.82rem; }
.cust-pop-dl dd { margin: 0; color: var(--text); font-size: 0.85rem; }

/* "…" actions menu */
.cust-actions[hidden] { display: none; }
.cust-actions { left: auto; right: 0; top: calc(100% + 6px); margin-top: 0; min-width: 210px; padding: 5px; }
.cust-action {
  display: block; width: 100%; text-align: left; margin: 0; min-height: 0;
  padding: 0.5rem 0.7rem; background: transparent; border: none; border-radius: 8px;
  color: var(--text); font: inherit; font-weight: 500; cursor: pointer;
}
.cust-action:hover { background: var(--accent-soft); color: var(--accent); }
.cust-action:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }

/* inline billing editor */
.cust-edit { max-width: 420px; display: flex; flex-direction: column; gap: 0.5rem;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; padding: 0.9rem; }
.cust-edit[hidden] { display: none; }  /* author display:flex would otherwise defeat the hidden attr */
.cust-edit-title { margin: 0 0 0.1rem; font-weight: 600; color: var(--text); }
.cust-edit-lab { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.82rem; color: var(--muted); }
.cust-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.cust-edit-status { margin: 0; color: var(--bad); font-size: 0.85rem; }
.cust-edit-actions { display: flex; gap: 0.6rem; margin-top: 0.1rem; }
.cust-edit-actions button { margin-top: 0; }

/* ============================================================
   SUBSCRIPTION CARD (.sub-*) — Duration pill + Billing start + cover + frequency
   Dark + gold; reuses .card / .field-row / .type-* language.
   ============================================================ */
.sub-label,
.sub-field-label { display: block; font-size: 0.92rem; font-weight: 600; color: var(--text); margin: 0 0 0.4rem; }
.sub-help { margin: 0.15rem 0 0.45rem; font-size: 0.82rem; color: var(--muted); line-height: 1.45; }

/* ---- Duration pill ---- */
.sub-duration { margin-bottom: 1.1rem; }
.sub-pill {
  display: inline-flex; align-items: center; gap: 0.6rem; max-width: 100%; font: inherit;
  color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 999px;
  padding: 0.5rem 0.85rem; cursor: pointer; text-align: left; margin: 0; min-height: 0;
  transition: border-color 140ms ease, background-color 140ms ease;
}
.sub-pill:hover { border-color: var(--accent); }
.sub-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sub-pill[aria-expanded="true"] { border-color: var(--accent); background: var(--accent-soft); }
.sub-cal { color: var(--accent); flex: none; }
.sub-cal rect, .sub-cal path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sub-pill-text { display: inline-flex; align-items: center; gap: 0.5rem; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sub-arrow { color: var(--muted); font-weight: 400; }
.sub-pill-end { color: var(--accent); }
.sub-caret { color: var(--muted); flex: none; margin-left: auto; transition: transform 140ms ease; }
.sub-pill[aria-expanded="true"] .sub-caret { transform: rotate(180deg); }
.sub-caret path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Duration inline editor ---- */
.sub-editor { margin-top: 0.7rem; padding: 1rem 1.05rem; background: var(--panel-raised); border: 1px solid var(--line); border-radius: var(--radius); display: grid; gap: 1rem; }
.sub-editor[hidden] { display: none; }
.sub-editor-field label, .sub-editor-field .sub-field-label { display: block; font-size: 0.88rem; font-weight: 600; color: var(--text); margin: 0 0 0.25rem; }
.sub-editor-field .sub-help { margin-top: 0; }
.sub-end-date { margin-top: 0.55rem; }
.sub-end-date[hidden] { display: none; }
.sub-editor-actions { display: flex; justify-content: flex-end; }
.sub-done { font: inherit; font-weight: 600; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 8px; padding: 0.45rem 1.1rem; margin: 0; min-height: 0; cursor: pointer; transition: filter 140ms ease; }
.sub-done:hover { filter: brightness(1.12); }
.sub-done:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sub-ends-toggle { max-width: 320px; }

/* ---- Billing start ---- */
.sub-billing { margin-bottom: 1rem; }
.sub-billing > label { display: block; font-size: 0.92rem; font-weight: 600; color: var(--text); margin: 0 0 0.1rem; }
.sub-billing-mode { margin-top: 0.45rem; font-weight: 500; }
.sub-billing-mode.is-scheduled { color: var(--accent); }

/* ---- Cover-period preview ---- */
.sub-cover { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 1.2rem; padding: 0.55rem 0.75rem; font-size: 0.85rem; color: var(--muted); background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px; }
.sub-cover [data-sub-cover-text] { color: var(--text); font-variant-numeric: tabular-nums; }
.sub-cover-ico { color: var(--accent); flex: none; }
.sub-cover-ico rect, .sub-cover-ico path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Vehicle opt-in ---- */
.sub-vehicle { margin-top: 0.2rem; }
.sub-check { display: flex; align-items: center; gap: 0.55rem; font-size: 0.92rem; color: var(--text); cursor: pointer; }
.sub-check input { width: 16px; height: 16px; accent-color: var(--accent); }
.sub-vehicle-pick { margin-top: 0.7rem; }
.sub-vehicle-pick[hidden] { display: none; }
.sub-vehicle-pick label { display: block; font-size: 0.88rem; font-weight: 600; margin: 0 0 0.25rem; }

/* ---- Frequency chooser under the Items table ---- */
.sub-freq { margin: 1.1rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.sub-freq[hidden] { display: none; }
.sub-freq-label { display: block; font-size: 0.92rem; font-weight: 600; color: var(--text); margin: 0 0 0.1rem; }
.sub-freq .sub-help { margin-bottom: 0.5rem; }
.sub-freq .type-toggle { grid-template-columns: 1fr 1fr 1fr 1fr; max-width: 600px; }
@media (max-width: 640px) { .sub-freq .type-toggle { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .sub-freq .type-toggle { grid-template-columns: 1fr; } }
.interval-days { display: flex; align-items: center; gap: 0.5rem; margin: 0.65rem 0 0; }
.interval-days[hidden] { display: none; }
.interval-days label { margin: 0 !important; font-size: 0.92rem; font-weight: 600; color: var(--text); }
.interval-days input { width: 5.5rem; text-align: center; }
@media (prefers-reduced-motion: reduce) { .sub-pill, .sub-caret, .sub-done { transition: none; } }
textarea {
  width: 100%; padding: 0.6rem 0.75rem; background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; font: inherit; resize: vertical;
}
textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }

.nowrap { white-space: nowrap; }
.ghost-link { color: var(--muted); font-weight: 600; }
.ghost-link:hover { color: var(--accent); }
.card-foot { margin: 1rem 0 0; }

/* ---- audit log viewer ---- */
.audit-filters { padding-bottom: 1rem; }
.audit-filter-grid {
  display: grid; gap: 0.8rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: end;
}
.audit-filter-grid label { display: block; }
.audit-filter-actions { display: flex; gap: 0.6rem; align-items: center; }
.audit-filter-actions button { margin: 0; }
.audit-table td[data-label="Detail"] { color: var(--muted); word-break: break-word; }
.pager { display: flex; gap: 1.2rem; align-items: center; justify-content: center; margin-top: 1.1rem; }

/* ---- profile: devices & sessions ---- */
.sessions-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.sessions-head h2 { margin-bottom: 0.2rem; }
.sessions-head p { margin: 0; }
.session-list { list-style: none; margin: 1rem 0 0; padding: 0; }
.session-row {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 0.9rem 0; border-top: 1px solid var(--line);
}
.session-row:first-child { border-top: none; }
.session-info { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.session-device { font-weight: 600; }
.session-info .muted { font-size: 0.85rem; }
.session-row.current { background: var(--accent-soft); border-radius: 8px; padding-left: 0.7rem; padding-right: 0.7rem; }
.session-row .inline-form button { margin: 0; }
@media (max-width: 480px) {
  .session-row { flex-direction: column; align-items: flex-start; }
  .session-row .inline-form, .session-row .inline-form button { width: 100%; }
}

/* ---- Payment Processor: invoices + customers ---- */
.nav-section {
  margin: 1.1rem 0 0.25rem; padding: 0 0.9rem;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
}
.btn {
  display: inline-block; padding: 0.5rem 1.05rem; border-radius: 8px;
  background: var(--accent); color: #0b0c10; font-weight: 700; font-size: 0.9rem;
  border: 1px solid var(--accent);
}
.btn:hover { filter: brightness(1.06); color: #0b0c10; }
.search-form { display: flex; gap: 0.5rem; align-items: center; margin: 0 0 1.1rem; flex-wrap: wrap; }
.search-form input[type="text"] { max-width: 420px; margin: 0; }
.search-form button { margin: 0; }
.action-bar { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.action-bar .inline-form, .action-bar button { margin: 0; }
.pay-form { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.pay-form input[type="text"] { margin: 0; min-width: 220px; }
.item-table input { margin: 0; }
.item-subtotal { margin: 0.9rem 0 0; }
/* Payment-collection chooser: the type-toggle cards, but taller with a title + description
   and left-aligned so each option reads like a labelled choice, not a compact pill. */
.collection-toggle { grid-template-columns: 1fr 1fr; margin: 0.35rem 0 1rem; }
.collection-toggle .type-box {
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  white-space: normal;
  gap: 0.6rem;
  padding: 0.75rem 0.85rem;
  height: 100%;
}
.collection-toggle .type-dot { margin-top: 0.15rem; }
.type-lines { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.type-title { font-weight: 600; color: inherit; }
.type-desc { font-weight: 400; font-size: 0.8rem; line-height: 1.35; color: var(--muted); }
.type-opt input:checked + .type-box .type-desc { color: var(--muted); }
@media (max-width: 560px) { .collection-toggle { grid-template-columns: 1fr; } }

/* Create-invoice action row: primary "Create & send" + secondary "Save as draft". */
.form-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.4rem; }
.form-actions .draft-btn[hidden] { display: none; }
.totals { max-width: 320px; margin-left: auto; }
.totals > div { display: flex; justify-content: space-between; padding: 0.25rem 0; }
.totals dt { color: var(--muted); margin: 0; }
.totals dd { margin: 0; }
.totals .grand { border-top: 1px solid var(--line); margin-top: 0.3rem; padding-top: 0.5rem; font-weight: 700; }
.totals .grand dt, .totals .grand dd { color: var(--text); }

/* ---- Revolut embedded pay page ---- */
.pay-card { max-width: 460px; }
.pay-fields label { display: block; margin-top: 0.6rem; }
/* Box the Revolut card iframe like our other inputs; its (transparent) field shows this
   dark background, and revpay.js sets the typed text light for contrast. */
.card-field { background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  padding: 0.55rem 0.75rem; min-height: 44px; }
.pay-status { min-height: 1.2rem; margin: 0.6rem 0 0; font-size: 0.9rem; }
.pay-status.ok { color: var(--ok); }
.pay-status.bad { color: var(--bad); }
#pay-btn { margin-top: 0.9rem; }

/* ---- Stripe-style invoice tab cards ---- */
.tab-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); gap: 0.6rem; margin-bottom: 1.2rem; }
.tab-card { display: block; padding: 0.65rem 0.85rem; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--muted); }
.tab-card:hover { border-color: var(--accent); color: var(--text); filter: none; }
.tab-card.active { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.tab-card .tc-label { font-size: 0.8rem; font-weight: 600; }
.tab-card .tc-count { display: block; font-size: 1.35rem; font-weight: 700; color: var(--text); margin-top: 0.1rem; line-height: 1.1; }
.cur-badge { display: inline-block; font-size: 0.62rem; font-weight: 700; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 0.3rem; margin-left: 0.35rem; vertical-align: middle; }
.freq-recurring svg { width: 0.85rem; height: 0.85rem; vertical-align: -1px; margin-right: 0.2rem; stroke: var(--muted); fill: none; stroke-width: 2; }

/* ---- Stripe-style create-invoice: form + live preview ---- */
.create-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 430px); gap: 1.6rem; align-items: start; }
.create-preview { position: sticky; top: 1rem; }
.create-preview .preview-label { color: var(--muted); font-size: 0.8rem; font-weight: 600; margin: 0 0 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; }
@media (max-width: 980px) { .create-layout { grid-template-columns: 1fr; } .create-preview { position: static; } }

/* the white "paper" invoice preview (mirrors Stripe's PDF preview) */
.invoice-preview { background: #ffffff; color: #1a1a1a; border-radius: 10px; padding: 1.6rem 1.5rem; box-shadow: 0 1px 4px rgba(0,0,0,0.35); font-size: 0.84rem; line-height: 1.45; }
.invoice-preview .ip-head { display: flex; justify-content: space-between; align-items: flex-start; }
.invoice-preview .ip-title { font-size: 1.4rem; font-weight: 700; }
.invoice-preview .ip-company { text-align: right; color: #6b7280; font-size: 0.78rem; }
.invoice-preview .ip-meta { color: #4b5563; margin: 0.9rem 0; font-size: 0.78rem; }
.invoice-preview .ip-meta strong { color: #1a1a1a; }
.invoice-preview .ip-section-label { color: #6b7280; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.invoice-preview .ip-hero { font-size: 1.15rem; font-weight: 700; margin: 0.5rem 0 0.9rem; }
.invoice-preview table.ip-table { width: 100%; border-collapse: collapse; }
.invoice-preview .ip-table th { text-align: left; color: #6b7280; font-weight: 600; font-size: 0.68rem; border-bottom: 1px solid #e5e7eb; padding: 0.3rem 0; }
.invoice-preview .ip-table th.num, .invoice-preview .ip-table td.num { text-align: right; }
.invoice-preview .ip-table td { padding: 0.34rem 0; border-bottom: 1px solid #f1f1f1; vertical-align: top; }
.invoice-preview .ip-empty td { color: #9ca3af; text-align: center; padding: 0.9rem 0; border: none; }
.invoice-preview .ip-totline { display: flex; justify-content: space-between; padding: 0.18rem 0; color: #4b5563; }
.invoice-preview .ip-totline.grand { border-top: 1px solid #e5e7eb; margin-top: 0.25rem; padding-top: 0.45rem; color: #1a1a1a; font-weight: 700; }
.invoice-preview .ip-memo { margin-top: 0.9rem; color: #4b5563; font-size: 0.78rem; white-space: pre-wrap; }
.invoice-preview .ip-foot { margin-top: 1.1rem; color: #9ca3af; font-size: 0.72rem; border-top: 1px solid #f1f1f1; padding-top: 0.6rem; }

/* ---- Stripe-style subscription detail ---- */
.sub-head { align-items: flex-start; }
.sub-head .page-actions { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.sub-head .page-actions .inline-form, .sub-head .page-actions button { margin: 0; }
.sub-title { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.sub-meta { display: flex; gap: 2.4rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding: 0.2rem 0 1.1rem; margin: 0.2rem 0 1.4rem; }
.sub-meta-k { display: block; color: var(--muted); font-size: 0.78rem; }
.sub-meta-v { display: block; font-size: 0.98rem; margin-top: 0.15rem; }
.sub-meta-v.bad { color: var(--bad); }
.sub-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 1.4rem; align-items: start; }
.sub-main { display: flex; flex-direction: column; gap: 1.2rem; min-width: 0; }
.sub-main .card, .sub-side .card { margin: 0; }
.sub-side { display: flex; flex-direction: column; gap: 1.2rem; position: sticky; top: 1rem; }
.price-table .price-tax td { color: var(--muted); font-size: 0.85rem; border-top: 1px dashed var(--line); }
.kv-stack > div { display: block; padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.kv-stack > div:last-child { border-bottom: none; }
.kv-stack dt { color: var(--muted); font-size: 0.78rem; margin: 0 0 0.15rem; }
.kv-stack dd { margin: 0; font-size: 0.92rem; }
.action-col { display: flex; flex-direction: column; gap: 0.5rem; align-items: stretch; }
.action-col .inline-form { margin: 0; }
.action-col button { width: 100%; margin: 0; }
.mono { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 0.82rem; color: var(--muted); word-break: break-all; }
.small { font-size: 0.8rem; }
@media (max-width: 900px) {
  .sub-grid { grid-template-columns: 1fr; }
  .sub-side { position: static; }
}
.form-narrow { max-width: 680px; }
.form-actions { margin-top: 1rem; display: flex; gap: 0.6rem; align-items: center; }
.form-actions button, .form-actions .btn { margin: 0; }
.check-row { display: flex; align-items: center; gap: 0.5rem; margin: 0.95rem 0 0.3rem;
             color: var(--text); font-size: 0.92rem; cursor: pointer; }
.check-row input[type="checkbox"] { margin: 0; accent-color: var(--accent); width: 15px; height: 15px; }
.check-inline { width: 15px; height: 15px; margin: 0.95rem 0.55rem 0.3rem 0; accent-color: var(--accent);
                vertical-align: -2px; }
.check-label { display: inline; margin: 0; color: var(--text); font-size: 0.92rem; cursor: pointer; }
.retry-freq { display: none; }
#retry-on:checked ~ .retry-freq { display: block; }
.retry-row form { display: flex; align-items: center; gap: 0.5rem; }
.retry-row button { margin: 0; }
.retry-row select { margin: 0; width: auto; padding: 0.3rem 0.6rem; }
.retry-row .ghost { padding: 0.3rem 0.9rem; }
.cadence-select {
  margin: 0; width: auto; padding: 0.28rem 1.7rem 0.28rem 0.75rem;
  font-size: 0.82rem; font-weight: 600; line-height: 1.4;
  color: var(--text); background-color: var(--panel-raised);
  border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9caa' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.55rem center; background-size: 13px;
}
.cadence-select:hover { border-color: var(--accent); }
.cadence-select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

/* ---- Subscription form: payment-schedule preview ---- */
.sub-schedule { margin: 1.1rem 0 0.3rem; }
.sub-schedule .sub-label { margin-bottom: 0.4rem; }
.sub-schedule-table td, .sub-schedule-table th { font-size: 0.85rem; padding: 0.45rem 0.7rem; }

/* ---- Driver billing: payment-card tiles ---- */
.pay-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 0.8rem; }
.pay-card { background: var(--panel-raised); border: 1px solid var(--line); border-radius: var(--radius);
            padding: 0.9rem 1rem 0.8rem; display: flex; flex-direction: column; gap: 0.15rem; }
.pay-card.is-default { border-color: rgba(212, 175, 55, 0.45); }
.pay-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.35rem; }
.pay-card-brand { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.pay-card.is-default .pay-card-brand { color: var(--accent); }
.pay-card-num { font-family: Consolas, "Cascadia Mono", monospace; font-size: 1.25rem; font-weight: 700; letter-spacing: 0.1em; }
.pay-card-exp { font-size: 0.8rem; color: var(--muted); min-height: 1.1rem; }
.pay-card-actions { display: flex; gap: 0.45rem; margin-top: 0.6rem; }
.pay-card-actions .ghost { margin: 0; padding: 0.2rem 0.7rem; font-size: 0.8rem; }
.pill-toggle { display: inline-block; margin: 0; padding: 0.14rem 0.8rem; border-radius: 999px;
               font: inherit; font-size: 0.8rem; font-weight: 600; line-height: 1.4; cursor: pointer; }
.pill-toggle.on { color: var(--ok); background: var(--ok-soft); border: 1px solid rgba(62, 207, 142, 0.35); }
.pill-toggle.off { color: var(--muted); background: rgba(154, 156, 170, 0.1); border: 1px solid rgba(154, 156, 170, 0.3); }
.pill-toggle:hover { border-color: var(--accent); filter: none; }
.retry-row { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 1rem; }

/* ---- Garages / Workshop ---- */
.pill.info { color: #6ea8fe; background: rgba(110, 168, 254, 0.12); border-color: rgba(110, 168, 254, 0.35); }
.clip { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pre { white-space: pre-line; overflow-wrap: anywhere; }
.email-plain { max-height: 30rem; overflow: auto; padding: 0.9rem 1rem; background: var(--bg);
  border: 1px solid var(--line); border-radius: 8px; font-size: 0.86rem; line-height: 1.5; }
.status-form { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.status-form select { margin: 0; min-width: 12rem; }
.status-form button { margin: 0; }
.small-inline { font-size: 0.95rem; font-weight: 500; }
tr.rowlink { cursor: pointer; }
tr.rowlink:hover { background: var(--bg-soft); }
tr.rowlink:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ---- Driver dashboard ---- */
.card-head-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.card-head-row h2 { margin: 0; }
.dash-vehicle { margin-bottom: 1.3rem; }
.dash-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.mini-list { list-style: none; margin: 0; padding: 0; }
.mini-list li { padding: 0.55rem 0; border-bottom: 1px solid rgba(154, 156, 170, 0.15); }
.mini-list li:last-child { border-bottom: none; }
.big-stat { font-size: 2.2rem; font-weight: 700; margin: 0.2rem 0 0; line-height: 1; }

/* ---- Driver dashboard: focal countdown ---- */
.di { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.di.ok { stroke: var(--ok); } .di.bad { stroke: var(--bad); } .di.notice { stroke: var(--notice); }
.di.gold { stroke: var(--accent); } .di.muted { stroke: var(--muted); }
.appt-hero { display: flex; align-items: center; gap: 20px; background: var(--panel-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 14px; }
.appt-num { text-align: center; min-width: 86px; }
.appt-num b { display: block; font-size: 56px; font-weight: 600; color: var(--accent); line-height: 0.95; letter-spacing: -1px; }
.appt-num.today b { font-size: 30px; letter-spacing: 0; }
.appt-num span { display: block; font-size: 12px; color: var(--muted); margin-top: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.appt-hero-sep { width: 1px; align-self: stretch; background: var(--line); }
.appt-next { flex: 1; min-width: 0; }
.appt-next .lbl { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.7px; margin-bottom: 7px; }
.appt-next .when { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.appt-next .where { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.appt-view { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--bg); background: var(--accent); text-decoration: none; padding: 10px 16px; border-radius: var(--radius); white-space: nowrap; }
.appt-view:hover { filter: brightness(1.08); color: var(--bg); }
.appt-view .di { stroke: var(--bg); }
.appt-empty { display: flex; align-items: center; gap: 13px; }
.appt-empty .di { width: 22px; height: 22px; stroke: var(--muted); }
.dash-two { display: flex; gap: 14px; align-items: stretch; }
.dash-two .comp { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.side-col { width: 238px; flex: none; display: flex; flex-direction: column; gap: 14px; }
.comp-title { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.comp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13px; }
.comp-row .lhs { display: inline-flex; align-items: center; gap: 9px; }
.comp-link { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.comp-link .di { stroke: var(--accent); }
.count-badge { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; }
.upc-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.upc-when { font-size: 13px; font-weight: 600; }
.pcn-card { display: flex; align-items: center; gap: 13px; }
.pcn-ico { width: 38px; height: 38px; flex: none; border-radius: 12px; background: var(--notice-soft); display: flex; align-items: center; justify-content: center; }
.pcn-ico.ok { background: var(--ok-soft); }
.pcn-ico .di { width: 20px; height: 20px; }
.pcn-title { font-size: 13px; font-weight: 600; }
.pcn-link { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--accent); text-decoration: none; margin-top: 3px; }
.pcn-link .di { stroke: var(--accent); width: 14px; height: 14px; }
@media (max-width: 720px) {
  .dash-cards { grid-template-columns: 1fr; }
  .dash-two { flex-direction: column; }
  .side-col { width: auto; }
  .appt-hero { flex-wrap: wrap; }
  .appt-hero-sep { display: none; }
  .appt-view { width: 100%; justify-content: center; }
}

/* ---- Login legal line + legal pages (privacy / terms) ---- */
.login-legal { color: var(--muted); font-size: 0.75rem; line-height: 1.5; text-align: center; margin: 1.15rem auto 0; white-space: nowrap; }
.login-legal a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.login-legal a:hover { color: var(--accent); }
@media (max-width: 430px) { .login-legal { white-space: normal; } }
.legal-body { background: var(--bg); color: var(--text); }
.legal { max-width: 760px; margin: 0 auto; padding: 2.4rem 1.25rem 4rem; }
.legal-home { display: inline-block; color: var(--muted); text-decoration: none; font-size: 0.9rem; margin-bottom: 1.4rem; }
.legal-home:hover { color: var(--accent); }
.legal h1 { font-size: 1.7rem; margin: 0 0 0.35rem; }
.legal .updated { color: var(--muted); font-size: 0.85rem; margin: 0 0 1.5rem; }
.legal h2 { font-size: 1.12rem; margin: 2rem 0 0.55rem; }
.legal p, .legal li { line-height: 1.7; }
.legal ul { padding-left: 1.3rem; margin: 0.5rem 0 1rem; }
.legal li { margin: 0.3rem 0; }
.legal a { color: var(--accent); }
.legal strong { color: var(--text); font-weight: 600; }
.legal .ph { color: var(--notice); background: var(--notice-soft); border-radius: 4px; padding: 0 0.32rem; }
.legal-draft { background: var(--notice-soft); border: 1px solid rgba(240, 180, 41, 0.35); border-radius: var(--radius); padding: 0.9rem 1.1rem; margin: 0 0 1.8rem; font-size: 0.9rem; line-height: 1.6; }
.legal-draft strong { color: var(--notice); }
.form-divider { margin: 1.5rem 0 0.2rem; color: var(--muted); font-size: 0.78rem; font-weight: 700;
                text-transform: uppercase; letter-spacing: 0.05em;
                border-top: 1px solid rgba(154, 156, 170, 0.2); padding-top: 1rem; }
.auth-alt { margin-top: 0.9rem; }
.email-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-top: 0.75rem; }
.email-row button { margin: 0; }
.cc-input { min-width: 17rem; flex: 1 1 17rem; max-width: 26rem; margin: 0; }
.email-docs-form { margin-top: 1.25rem; }
.cert-form { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin: 0.75rem 0; }
.cert-form label { margin: 0; }
.cert-form input[type="text"] { margin: 0; min-width: 14rem; flex: 1 1 14rem; max-width: 22rem; }
.cert-form button { margin: 0; }

/* Two-factor (MFA) page */
.mfa-status { font-size: 1.05rem; }
.mfa-status.on strong { color: var(--good, #51cf66); }
.mfa-status.off strong { color: var(--muted); }
.stack { margin: 0.5rem 0 0; }
img.qr { display: block; margin: 0.5rem 0; width: 200px; height: 200px; background: #fff;
         padding: 8px; border-radius: 10px; }
.recovery-codes { list-style: none; padding: 0; margin: 0.75rem 0 1.25rem;
                  display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 1rem; }
.recovery-codes li code { font-size: 1.05rem; letter-spacing: 0.04em; }
button.danger { color: var(--bad); border-color: rgba(255, 107, 107, 0.5); background: var(--bad-soft); }
button.danger:hover { color: #fff; background: var(--bad); border-color: var(--bad); filter: none; }

/* "View as driver" (POV) banner — sticky, on every page while an admin is viewing a driver */
.pov-banner { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 0.75rem;
  background: #5b54e6; color: #fff; padding: 0.6rem 1rem; border-radius: 8px; margin-bottom: 1.2rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); font-size: 0.95rem; flex-wrap: wrap; }
.pov-banner .pov-eye { font-size: 1.15rem; line-height: 1; }
.pov-banner .pov-text { flex: 1 1 12rem; }
.pov-banner .pov-text strong { font-weight: 700; }
.pov-exit { margin: 0; }
.pov-banner button { margin: 0; padding: 0.35rem 0.95rem; color: #fff; background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.7); font-weight: 600; }
.pov-banner button:hover { background: #fff; color: #5b54e6; border-color: #fff; filter: none; }

/* ---- Public pay-link page (/pay?t=...) ---- */
.pay-brand { text-align: center; margin: 0 0 1.1rem; }
.pay-summary { padding: 1.6rem 1.6rem; }
.pay-state-pill { float: right; margin: 0.15rem 0 0; }
.pay-amount { font-size: 2.1rem; font-weight: 700; margin: 0 0 0.15rem; letter-spacing: 0.01em; }
.pay-h { font-size: 1.15rem; margin: 0 0 0.5rem; }
.pay-meta { margin-top: 1.1rem; }
.pay-pdf { display: block; text-align: center; margin-top: 1.15rem; }
.paylink .login-legal { white-space: normal; }

/* The public payment-form card — its OWN class: .pay-card is taken twice already (the
   admin take-payment card at one size, the driver-billing card tiles at another), and the
   tile block was restyling the customer-facing form. */
.paylink-card { padding: 1.6rem 1.6rem; }
.paylink-card .save-card-opt { margin-bottom: 0.9rem; }

/* Admin invoice detail: copyable public payment link */
.pay-link-cell { display: flex; gap: 0.4rem; align-items: center; justify-content: flex-end; }
.pay-link-input { width: 100%; max-width: 250px; margin: 0; font-size: 0.76rem;
                  padding: 0.3rem 0.55rem; color: var(--muted); }
.pay-link-copy { margin: 0; padding: 0.32rem 0.75rem; font-size: 0.78rem; white-space: nowrap; }

/* ---- System map (/admin/map) ---- */
.sysmap-wrap { display: flex; gap: 1rem; align-items: stretch; margin-bottom: 0.8rem; }
.sysmap-canvas { flex: 1 1 auto; min-width: 0; width: 100%; background: #0b0c10;
                 border: 1px solid var(--line); border-radius: var(--radius); cursor: grab; }
.sysmap-panel { flex: 0 0 300px; background: var(--panel); border: 1px solid var(--line);
                border-radius: var(--radius); padding: 1.1rem 1.2rem; max-height: 720px;
                overflow-y: auto; }
.sysmap-panel h2 { margin: 0.1rem 0 0.5rem; }
.sysmap-panel h3 { margin: 0.9rem 0 0.2rem; font-size: 0.78rem; text-transform: uppercase;
                   letter-spacing: 0.05em; color: var(--muted); }
.sysmap-panel ul { padding-left: 1.1rem; margin: 0.2rem 0; }
.sysmap-cat { margin: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; }
.sysmap-live { color: var(--accent); font-weight: 600; margin: 0.2rem 0 0; }
@media (max-width: 900px) { .sysmap-wrap { flex-direction: column; }
                            .sysmap-panel { flex: none; max-height: none; } }

/* ---- Fleet <-> billing synergy (vehicles Billing column + dashboard red X) ---- */
.pill.cross { background: var(--bad); color: #fff; font-weight: 700; }
a.billing-cross { text-decoration: none; font-size: 1.05rem; }
a.billing-cross:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Settings page (billing_settings.html): dense grid + collapsed explanations ---- */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 1.4rem;
  align-items: start;
}
.settings-grid .card { margin: 0; }

/* The plain-English explanations live one click away behind <details class="how">.
   Native element: no JS, keyboard-operable, fine under the strict CSP. */
.how { margin: 0.15rem 0 0.2rem; }
.how summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.25rem 0;
  user-select: none;
  -webkit-user-select: none;
}
.how summary::marker { color: var(--accent); }
.how summary:hover, .how summary:focus-visible { color: var(--accent); }
.how[open] {
  margin: 0.35rem 0 0.6rem;
  padding: 0.55rem 0.75rem 0.65rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.how > p { margin: 0.45rem 0 0; font-size: 0.88rem; }

/* The reminders card reuses .retry-freq under #reminders-on; mirror the existing
   `#retry-on:checked ~ .retry-freq` rule so its cadence select shows when the
   checkbox is ticked instead of being permanently display:none. */
#reminders-on:checked ~ .retry-freq { display: block; }

/* Blocked-BIN add row — replaces the template's inline style= attrs, which are
   dead anyway under our strict CSP. */
.bin-add { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.8rem; }
.bin-add input[name="card_bin"] { width: 150px; flex: 0 0 auto; }
.bin-add input[name="note"] { width: auto; flex: 1 1 140px; min-width: 140px; }
.bin-add button { margin-top: 0; }

/* Blocked-BIN table: right-align the Remove cell on desktop (replaces the inline
   style); at <=640px the existing .rows td.actions rules stack it full-width. */
.settings-bins td.actions { text-align: right; }

/* GT report-token input — masked without type=password (password managers must not
   offer to capture it); replaces the inline style attr. Chromium/WebKit only,
   identical to the inline version it replaces. */
.token-input { width: 100%; max-width: 520px; -webkit-text-security: disc; }

/* ---------------- BlackSign public signing page ---------------- */
.sign-step { margin: 1.4rem 0 0.4rem; font-size: 1.02rem; }
#sign-canvas { width: 100%; max-width: 560px; border: 1.5px dashed var(--border, #b9c0cf);
  border-radius: 8px; background: #fff; touch-action: none; display: block; cursor: crosshair; }
.sign-tabs { display: flex; gap: 0.4rem; margin-bottom: 0.6rem; }
.sign-tab { padding: 0.35rem 1.1rem; border-radius: 999px; border: 1px solid var(--border, #b9c0cf);
  background: transparent; cursor: pointer; font-weight: 600; }
.sign-tab.active { background: #1c2b52; color: #fff; border-color: #1c2b52; }
.sign-preview { font-family: Georgia, 'Times New Roman', serif; font-style: italic;
  font-size: 1.6rem; min-height: 2.2rem; margin-top: 0.4rem; }
.sign-consent { display: flex; gap: 0.55rem; align-items: flex-start; margin: 0.4rem 0 1rem;
  font-size: 0.92rem; line-height: 1.45; }
.sign-consent input { margin-top: 0.2rem; flex: none; }
.sign-decline { margin-top: 1.4rem; }
.sign-footnote { text-align: center; font-size: 0.8rem; max-width: 560px; margin: 0.9rem auto; }
.button-link { display: inline-block; background: #1c2b52; color: #fff !important;
  padding: 0.55rem 1.3rem; border-radius: 8px; text-decoration: none; font-weight: 600; }

/* ---------------- BlackSign click-to-sign viewer ---------------- */
#sign-doc { display: block; margin: 12px 0 4px; max-height: 70vh; overflow-y: auto;
  padding: 10px; background: #eef0f4; border: 1px solid var(--border, #d5d9e2);
  border-radius: 10px; scroll-behavior: smooth; }
/* Plain block flow (NOT a flex item): the wrapper's height comes from its image, whose
   intrinsic width/height attributes reserve the scaled height before load — deterministic
   across browsers, unlike flex-item + aspect-ratio which collapsed here. */
.sv-page { position: relative; display: block; width: 100%; margin: 0 0 14px;
  background: #fff; box-shadow: 0 1px 4px rgba(20,24,31,.12); border-radius: 3px; }
.sv-page:last-child { margin-bottom: 0; }
.sv-pageimg { display: block; width: 100%; height: auto; }
.sv-overlay { position: absolute; inset: 0; pointer-events: none; }
/* the clickable signature FIELD box, sitting on the signature line (positioned by CSSOM %).
   width hugs its content and is capped by a JS-set max-width so it never overflows the page. */
.sv-signbox { position: absolute; transform: translateY(-94%); pointer-events: auto;
  height: 40px; width: max-content; box-sizing: border-box; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border: 2px dashed #1c2b52; border-radius: 6px; background: rgba(28,43,82,.12);
  color: #1c2b52; font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap;
  animation: sv-pulse 1.7s ease-in-out infinite; }
.sv-signbox span { padding: 0 10px; overflow: hidden; text-overflow: ellipsis; }
.sv-signbox::before { content: "\270E"; margin-left: 8px; font-size: 15px; flex: none; }
.sv-signbox:hover, .sv-signbox:focus-visible { background: rgba(28,43,82,.20); outline: none; }
.sv-signbox.sv-flash { animation: sv-flash 1.1s ease; }
@keyframes sv-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(28,43,82,.40); }
  50% { box-shadow: 0 0 0 6px rgba(28,43,82,0); } }
@keyframes sv-flash { 0%,100% { background: rgba(28,43,82,.10); }
  35% { background: rgba(28,43,82,.45); } }
.sv-datechip { position: absolute; transform: translateY(-108%); pointer-events: none;
  font-size: 10px; color: #3a4a75; background: #e7ecf8; border: 1px solid #c7d2ec;
  border-radius: 4px; padding: 1px 5px; white-space: nowrap; }
.sign-consent-note { font-size: 12.5px; color: var(--muted, #5a6272); line-height: 1.5;
  margin: 6px 0 12px; }
/* the prominent Sign action below the document ("signage below") */
.sv-action { margin: 10px 0 4px; }
.sv-action button { width: 100%; background: #1c2b52; color: #fff; border: 0;
  border-radius: 8px; font-weight: 700; font-size: 15px; padding: 13px 18px; cursor: pointer; }
.sv-action button::before { content: "\270E"; margin-right: 8px; }
.sv-action button:hover { background: #24356a; }
.sv-readgate { margin: 10px 0; padding: 12px 14px; background: var(--card, #fff);
  border: 1.5px solid #1c2b52; border-radius: 8px; }

/* signing modal / mobile bottom sheet */
.sv-modal { position: fixed; inset: 0; z-index: 1000; display: flex;
  align-items: center; justify-content: center; }
.sv-modal[hidden] { display: none; }
.sv-modal-backdrop { position: absolute; inset: 0; background: rgba(15,20,30,.55); }
.sv-modal-card { position: relative; background: var(--card, #fff); border-radius: 12px;
  width: min(600px, 94vw); max-height: 92vh; overflow-y: auto; padding: 18px 20px;
  box-shadow: 0 20px 60px -12px rgba(0,0,0,.5); }
.sv-modal-head { display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px; }
.sv-modal-x { background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer;
  color: var(--muted, #667); padding: 0 4px; }
body.sv-modal-open { overflow: hidden; }
@media (max-width: 560px) {
  .sv-modal { align-items: flex-end; }
  .sv-modal-card { width: 100vw; max-height: 90vh; border-radius: 14px 14px 0 0; }
  /* the document dominates the screen; the Sign action sticks to the bottom under it */
  #sign-doc { max-height: 76vh; }
  .sv-action { position: sticky; bottom: 0; z-index: 5; margin: 8px -2px 0;
    padding: 8px 2px calc(8px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, var(--bg, #f6f7f9) 72%, transparent); }
}

/* ---- collapsible sidebar groups ----------------------------------------------------
   Native <details>/<summary>, no JavaScript — the same reason the mobile burger is a
   checkbox: the strict CSP forbids inline script. The template renders a group `open`
   when the current page lives inside it, so the section in use is never collapsed and
   the rarely-touched ones (Fraud, Partners) stay folded away. */
.nav-group { margin-top: 1rem; }
.nav-group > summary {
  display: flex; align-items: center; gap: 0.4rem; cursor: pointer;
  padding: 0.3rem 0.9rem; margin-bottom: 0.15rem; border-radius: 8px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); list-style: none; user-select: none;
}
.nav-group > summary::-webkit-details-marker { display: none; }   /* Safari's own triangle */
.nav-group > summary:hover { color: var(--text); background: var(--panel-raised); }
.nav-group[open] > summary { color: var(--text); }
.nav-group > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-group > summary .chev {
  width: 13px; height: 13px; margin-left: auto; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.15s ease;
}
.nav-group[open] > summary .chev { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .nav-group > summary .chev { transition: none; } }

/* ── Blog editor (admin_blog_edit.html) ─────────────────────────────────── */
.md-editor { font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.88rem; line-height: 1.55; }
.cover-thumb { display: block; max-width: 280px; max-height: 170px; width: auto;
  margin: 0.3rem 0 0.9rem; border: 1px solid var(--line); border-radius: 8px;
  object-fit: cover; }