/* The admin face's layout and component rules — the shell and the signed-out sign-in door.
 *
 * Linked from exactly one template, app/templates/admin/_base.html, beside the brand token stylesheet.
 * Every colour below is read from a brand token (var(--hs-…)). Light is the default (plan Decision 278); the header's
 * Light / Dark / Device switch saves the admin's own choice (Decision 387), and dark applies only under
 * html[data-theme="dark"], which the page carries only when that choice is Dark (or Device on a dark device).
 * The rules are copied from the approved designs under
 * docs/plans/hyke-studio/outputs/proposals/admin-signin-today-customers/ (admin-login__b*, admin-login-verify__b*,
 * today__b for the shell); the designs' review aid is a reviewer tool and is not carried here.
 *
 * Owning section(s): §31 (the door and the shell), §32 (the pages that fill the shell)
 */

/* The Try page's make-and-model picker's own look (the public site's vehicle-picker.css, every rule under .hs-vp),
   borrowed by the Library screens' pickers (Decision 327 item 1). Brought in here because every admin page links only
   the base template's two sheets; imported first, so the .lib-picker rules below seat it in the admin's forms. */
@import url("vehicle-picker.css");

/* The designs' two typefaces, served from the admin face's own address like every file it loads (Section 32). Both
   are openly licensed (SIL Open Font License 1.1); Archivo is the file the renders' watermark already ships. */
@font-face {
  font-family: 'Archivo';
  src: url("../fonts/Archivo-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Azeret Mono';
  src: url("../fonts/AzeretMono-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Two values the designs derive from the brand palette: the hairline and the card border are the action ink at
   low strength. The Hitchhyke green is a brand token in tokens.css. */
:root {
  --hs-hairline: color-mix(in srgb, var(--hs-action) 10%, transparent);
  --hs-card-border: color-mix(in srgb, var(--hs-action) 12%, transparent);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--hs-font-sans);
  background: var(--hs-ground);
  color: var(--hs-ink-body);
  font-size: 14.5px;
  line-height: 1.5;
}
a { color: inherit; }
.hs-num { font-variant-numeric: tabular-nums; }

/* ---- the lock-up, one element in the shell's rail and on the signed-out door ---- */
.hs-lockup { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.hs-lockup-mark { width: 26px; height: 20px; color: var(--hs-ink); flex-shrink: 0; display: block; }
.hs-lockup-fill { fill: var(--hs-amber); }
.hs-lockup-word { font-size: 15px; font-weight: 700; letter-spacing: -0.035em; color: var(--hs-ink); }
.hs-lockup-sub { font-family: var(--hs-font-mono); font-size: 9.5px; color: var(--hs-ink-muted); }
.hs-hitchhyke { color: var(--hs-hitchhyke); }

/* ---- the signed-out page: one card, centred, holding the lock-up and the form ---- */
.hs-door {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 20px;
  gap: 14px;
}
.hs-door-card {
  width: 100%; max-width: 384px;
  background: var(--hs-surface);
  border: 1px solid var(--hs-hairline);
  border-radius: var(--hs-r-card);
  box-shadow: var(--hs-lift);
  padding: 26px 28px 28px;
  display: flex; flex-direction: column; gap: 20px;
}
.hs-door-card .hs-lockup-sub { margin-top: -12px; }
.hs-door-title { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.025em; color: var(--hs-ink); }
.hs-door-form { display: flex; flex-direction: column; gap: 16px; }
.hs-field { display: flex; flex-direction: column; gap: 6px; }
.hs-field-label { font-size: 12.5px; font-weight: 500; color: var(--hs-ink-body); }
.hs-field-input {
  height: 40px; width: 100%;
  font-family: var(--hs-font-sans); font-size: 14px; color: var(--hs-ink);
  background: var(--hs-surface-sunk);
  border: 1px solid color-mix(in srgb, var(--hs-ink) 18%, transparent);
  border-radius: var(--hs-r-field); padding: 0 12px;
}
.hs-field-input:focus { outline: 2px solid var(--hs-amber); outline-offset: 1px; }
.hs-field-input--code { font-family: var(--hs-font-mono); font-size: 22px; letter-spacing: 0.32em; text-align: center; height: 52px; padding-left: 0.32em; }
.hs-field-input--recovery { font-family: var(--hs-font-mono); font-size: 16px; letter-spacing: 0.12em; text-align: center; height: 48px; text-transform: uppercase; }
.hs-door-button {
  height: 44px; width: 100%;
  font-family: var(--hs-font-sans); font-size: 14px; font-weight: 600;
  color: var(--hs-on-action); background: var(--hs-action);
  border: none; border-radius: var(--hs-r-button); padding: 0 20px; cursor: pointer;
  margin-top: 4px;
}
.hs-door-button:hover { opacity: 0.92; }
.hs-door-button:disabled { opacity: 0.45; cursor: default; }

/* the one inline line a refused attempt shows */
.hs-door-line { margin: 0; font-size: 13px; line-height: 1.45; }
.hs-door-line--wrong { color: var(--hs-bad); }
.hs-door-line--locked {
  color: var(--hs-ink-body);
  background: var(--hs-surface-sunk); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-field);
  padding: 9px 12px;
}
.hs-door-line--locked .hs-num { font-family: var(--hs-font-sans); font-size: 13px; font-weight: 600; color: var(--hs-ink); }

/* the one-line banner shown when a request arrives on a session that has ended */
.hs-door-banner {
  width: 100%; max-width: 384px; margin: 0;
  font-size: 13px; line-height: 1.45; color: var(--hs-ink-body);
  background: var(--hs-surface-sunk); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-field);
  padding: 10px 14px;
}

/* the switch between the authenticator code and a recovery code */
.hs-door-alt { margin: 0; text-align: center; font-size: 12.5px; color: var(--hs-ink-muted); }
.hs-door-alt a { color: var(--hs-amber-ink); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.hs-door-alt a:hover { color: var(--hs-ink); }

/* ---- the admin shell: the grouped left rail ---- */
.hs-shell { display: flex; min-height: 100vh; align-items: stretch; }
.hs-shell .hs-rail {
  width: 224px; flex-shrink: 0;
  background: var(--hs-surface-sunk);
  border-right: 1px solid var(--hs-hairline);
  display: flex; flex-direction: column;
  padding: 18px 12px 14px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto; /* the rail stays in view while a long page scrolls */
  z-index: 5;
}
.hs-rail .hs-lockup { padding: 0 8px 4px; }
.hs-rail .hs-lockup-sub { padding: 0 8px 18px; }
.hs-nav-group { margin-bottom: 14px; }
.hs-nav-group-label {
  font-family: var(--hs-font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--hs-ink-muted); padding: 0 10px 6px; display: block;
}
.hs-nav { display: flex; flex-direction: column; gap: 2px; }
.hs-nav-link {
  font-size: 13px; font-weight: 500;
  color: var(--hs-ink-muted);
  padding: 7px 10px; border-radius: 7px;
  text-decoration: none;
  display: flex; align-items: center; gap: 9px;
}
.hs-nav-link:hover { background: var(--hs-surface); color: var(--hs-ink); }
.hs-nav-link.is-active { color: var(--hs-ink); background: var(--hs-surface); font-weight: 600; }
.hs-nav-dot { width: 3px; height: 12px; background: var(--hs-amber); border-radius: 2px; opacity: 0; flex-shrink: 0; }
.hs-nav-link.is-active .hs-nav-dot { opacity: 1; }
.hs-rail_spacer { flex-grow: 1; }
.hs-rail_footer {
  border-top: 1px solid var(--hs-hairline);
  padding-top: 12px; margin-top: 12px;
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--hs-font-mono); font-size: 10px; color: var(--hs-ink-muted);
  /* a copy started from a commit shows its 40-character commit name as the build tag; it wraps inside the rail */
  overflow-wrap: anywhere;
}

/* main column */
.hs-main { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }
.hs-header {
  min-height: 56px; flex-shrink: 0;
  border-bottom: 1px solid var(--hs-hairline);
  background: var(--hs-surface-sunk);
  display: flex; align-items: center;
  padding: 0 28px; gap: 14px;
  position: sticky; top: 0; z-index: 6;
}
/* the title wraps only between words: it never shrinks below its longest word, the account email gives way instead (fix round 3) */
.hs-title { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: var(--hs-ink); margin: 0; min-width: min-content; overflow-wrap: break-word; }
.hs-spacer { flex-grow: 1; }
.hs-account { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; }
.hs-account-name { font-family: var(--hs-font-mono); font-size: 11px; color: var(--hs-ink-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* At phone width the top bar keeps the page title on one line and Sign out; the signed-in email, which only fit cut
   short ("owner@hykestudio.c…"), is left out there (review r3 polish-17). */
@media (max-width: 640px) { .hs-account-name { display: none; } }
.hs-signout-btn {
  font-family: var(--hs-font-sans); font-size: 12px; font-weight: 600;
  color: var(--hs-ink-body); background: transparent; border: 1px solid var(--hs-hairline);
  border-radius: 7px; height: 32px; padding: 0 12px; cursor: pointer;
  flex: 0 0 auto; white-space: nowrap;
}
.hs-signout-btn:hover { border-color: var(--hs-bad); color: var(--hs-bad); }
.hs-content { flex-grow: 1; padding: 0 28px 30px; }
/* The header's Light / Dark / Device switch (Decision 387): the dashboard's segmented control, rule for rule
   (dashboard.css), so the three faces draw one component. The admin's top bar is itself the sunk fill, so the switch's
   track takes the surface fill here, or it would vanish into the bar. */
.hs-theme-switch { display: flex; gap: 5px; background: var(--hs-surface-sunk); border-radius: var(--hs-r-field); padding: 3px; flex-shrink: 0; }
.hs-header .hs-theme-switch { background: var(--hs-surface); }
.hs-theme-option { font-family: var(--hs-font-mono); font-size: 10.5px; line-height: 1; padding: 6px 12px; border-radius: 7px; color: var(--hs-ink-muted); cursor: pointer; border: none; background: transparent; }
.hs-theme-option.is-active { background: var(--hs-action); color: var(--hs-on-action); }
/* At phone width the top bar holds the page title, the switch and Sign out on one line where they fit: the bar's gaps
   and the options' side padding close up, so a one-word title ("Complaints") fits a 390-pixel window. A longer title
   (a vehicle's name) lets the bar take a second line, the switch and Sign out at its right, never wider than the
   window. The html prefix makes this rule outrank the bar's own later rules (the Customers-list block and the two
   920-pixel blocks set the same properties with equal weight further down the file). */
@media (max-width: 640px) {
  html .hs-header, html .hs-main .hs-header { gap: 8px; flex-wrap: wrap; padding: 8px 16px; }
  .hs-header .hs-theme-option { padding: 6px 8px; }
  .hs-header .hs-theme-switch { margin-left: auto; }
}
@media (max-width: 900px) {
  .hs-theme-option { position: relative; }
  .hs-theme-option::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
}
/* Amber as text on the dark ground is the amber itself ("text-safe on dark", tokens.css), as the dashboard and the
   website draw it; the token file's dark block leaves the light value in place. */
html[data-theme="dark"] { --hs-amber-ink: var(--hs-amber); }
/* The browser's own controls (tick boxes, date fields, native scroll bars) drawn for the dark ground, not as white
   squares on it. */
html[data-theme="dark"] { color-scheme: dark; }

/* ---- narrow widths: the rail becomes a block above the page; the groups read as rows ---- */
@media (max-width: 920px) {
  .hs-shell { flex-direction: column; }
  .hs-shell .hs-rail { width: 100%; position: static; height: auto; overflow: visible; border-right: none; border-bottom: 1px solid var(--hs-hairline); padding: 14px 16px 10px; }
  .hs-rail .hs-lockup-sub { padding-bottom: 10px; }
  .hs-nav-group { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin-bottom: 6px; }
  .hs-nav-group-label { padding: 0 6px 0 0; flex-basis: 100%; }
  .hs-nav { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .hs-nav-link { padding: 6px 9px; }
  .hs-rail_spacer { display: none; }
  .hs-rail_footer { border-top: none; margin-top: 4px; padding-top: 0; flex-direction: row; }
  .hs-header { padding: 0 20px; }
  .hs-content { padding: 0 20px 26px; }
}
@media (max-width: 640px) {
  .hs-door { padding: 28px 20px 36px; justify-content: flex-start; }
  .hs-door-card { padding: 22px 20px 24px; }
  /* no interactive control under 44px at phone width */
  .hs-field-input,
  .hs-door-button { min-height: 44px; }
  /* the 44px target pads the link; its underline moves onto the words so it stays with them (fix round 3, uiux-15) */
  .hs-door-alt a {
    display: inline-block; padding: 13px 0; margin: -13px 0;
    border-bottom: none; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
  }
  .hs-signout-btn { min-height: 44px; }
}

/* a designed keyboard-focus ring on every control */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--hs-amber); outline-offset: 2px;
}

/* scrollbars in the product's own colours (Decision 185) */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--hs-ink-muted) 45%, transparent) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track, *::-webkit-scrollbar-corner { background: transparent; }
*::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--hs-ink-muted) 45%, transparent); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background-color: var(--hs-ink-muted); }

/* ---- the admin pages that fill the shell (Section 32) ----
   Copied from the approved designs under admin-signin-today-customers/; where two designs declare one rule
   differently, the page class on the content area (.hs-page-overview, .hs-page-customers, .hs-page-customer)
   scopes each. The dialog scrim is the one colour the brand token file does not carry. */
:root { --hs-scrim: rgba(18, 17, 16, 0.55); }
html[data-theme="dark"] { --hs-scrim: rgba(0, 0, 0, 0.70); }

/* ---- the Overview (today__b*) ---- */
.hs-main .hs-period {
  position: sticky; top: 56px; z-index: 5;
  background: var(--hs-ground);
  padding: 18px 0 14px; margin-bottom: 8px;
  border-bottom: 1px solid var(--hs-hairline);
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
}
.hs-period-options {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--hs-surface-sunk); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-button);
  padding: 3px;
}
.hs-period-btn {
  font-family: var(--hs-font-sans); font-size: 12.5px; font-weight: 500; color: var(--hs-ink-muted);
  background: transparent; border: none; border-radius: 6px; height: 30px; padding: 0 12px; cursor: pointer; white-space: nowrap;
}
.hs-period-btn:hover { color: var(--hs-ink); }
.hs-period-btn.is-active { background: var(--hs-surface); color: var(--hs-ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--hs-amber); }
.hs-period-range { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hs-period-field { display: inline-flex; align-items: center; gap: 7px; }
.hs-period-field-label { font-family: var(--hs-font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-ink-muted); }
.hs-period-input {
  font-family: var(--hs-font-mono); font-size: 11.5px; color: var(--hs-ink);
  background: var(--hs-surface); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-field);
  height: 32px; padding: 0 10px; width: 176px;
}
.hs-period-input:read-only { color: var(--hs-ink-muted); background: transparent; border-color: transparent; cursor: default; }
.hs-period-summary { flex-basis: 100%; margin: 0; font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); }
.hs-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  align-items: start; 
  padding-top: 8px;
}
.hs-group-panel {
  background: var(--hs-surface);
  border: 1px solid var(--hs-hairline);
  border-radius: var(--hs-r-card);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 14px;
}
.hs-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.hs-group-title { font-size: 13.5px; font-weight: 600; color: var(--hs-ink); margin: 0; }
.hs-group-window { font-family: var(--hs-font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hs-ink-muted); white-space: nowrap; }
.hs-group-rows { display: flex; flex-direction: column; gap: 12px; }
.hs-group-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding-bottom: 11px; border-bottom: 1px solid var(--hs-hairline);
}
.hs-group-row:last-child { padding-bottom: 0; border-bottom: none; }
.hs-row-side { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hs-row-label { font-family: var(--hs-font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.10em; color: var(--hs-ink-muted); text-transform: uppercase; }
.hs-row-link {
  font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-amber-ink); text-decoration: none;
  border-bottom: 1px solid currentColor; align-self: flex-start; padding-bottom: 1px;
}
.hs-row-link:hover { color: var(--hs-ink); }
.hs-row-figure { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.hs-row-value { font-size: 21px; font-weight: 600; letter-spacing: -0.03em; color: var(--hs-ink); }
.hs-row-value--lead { font-size: 30px; }
.hs-period-zone { color: var(--hs-ink); font-weight: 600; }
.hs-group-zone { text-transform: none; letter-spacing: 0.02em; color: var(--hs-ink); }
.hs-row-support { font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); }
.hs-row-compare { font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); }
.hs-row-compare.is-good { color: var(--hs-good); }
.hs-row-compare.is-bad { color: var(--hs-bad); }
.hs-group-foot { margin: 0; font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); line-height: 1.55; }
@media (max-width: 920px) {
  .hs-shell { flex-direction: column; }
  .hs-shell .hs-rail { width: 100%; position: static; height: auto; overflow: visible; border-right: none; border-bottom: 1px solid var(--hs-hairline); padding: 14px 16px 10px; }
  .hs-lockup-sub { padding-bottom: 10px; }
  .hs-nav-group { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin-bottom: 6px; }
  .hs-nav-group-label { padding: 0 6px 0 0; flex-basis: 100%; }
  .hs-nav { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .hs-nav-link { padding: 6px 9px; }
  .hs-rail_spacer { display: none; }
  .hs-rail_footer { border-top: none; margin-top: 4px; padding-top: 0; flex-direction: row; }
  .hs-header { padding: 0 20px; }
  .hs-content { padding: 0 20px 26px; }
}
@media (max-width: 640px) {
  
  .hs-main .hs-period { position: static; gap: 10px 12px; padding: 12px 0 12px; }
  .hs-period-options { max-width: 100%; flex-wrap: wrap; }
  .hs-period-btn { padding: 0 9px; font-size: 12px; }
  .hs-period-input { width: 166px; font-size: 11px; }
  .hs-group-window { white-space: normal; }
}
@media (max-width: 640px) {
  .hs-nav-link,
  .hs-signout-btn,
  .hs-period-btn,
  .hs-period-input,
  .hs-cx-th,
  .hs-cx-view-btn,
  .hs-cx-select,
  .hs-cx-check,
  .hs-cx-paging-btn,
  .hs-cx-detail,
  .hs-btn-primary,
  .hs-btn-outline,
  .hs-btn-danger,
  .hs-dialog-cancel,
  .hs-dialog-confirm,
  .hs-dialog-input,
  details.hs-cd-disclosure > summary { min-height: 44px; }
  
  .hs-row-link,
  .hs-cd-identity-item dd a,
  .hs-cd-vehicle-link { display: inline-block; padding: 14px 0; margin: -14px 0; }
  /* the padded row link's underline moves onto its words, as the door's alternative link does (uiux-15) */
  .hs-row-link { border-bottom: none; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
}
.hs-row-side { min-width: 130px; }
@media (max-width: 1320px) {
  .hs-group-head { flex-direction: column; align-items: flex-start; gap: 2px; }
}
.hs-notice { margin: 18px 0 0; padding: 14px 16px 15px; background: var(--hs-surface); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-tile); display: flex; flex-direction: column; gap: 8px; }
.hs-notice-label { font-family: var(--hs-font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-amber-ink); }
.hs-notice-text { margin: 0; font-size: 13.5px; color: var(--hs-ink-body); }
.hs-notice-text .hs-num { font-family: var(--hs-font-mono); font-size: 12.5px; color: var(--hs-ink); }
.hs-notice-email { margin: 2px 0 0; padding: 10px 12px; background: var(--hs-surface-sunk); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-field); font-family: var(--hs-font-mono); font-size: 11px; line-height: 1.55; color: var(--hs-ink-body); display: flex; flex-direction: column; gap: 4px; }
.hs-notice-email-subject { color: var(--hs-ink); font-weight: 600; }
.hs-notice-email-sent { color: var(--hs-ink-muted); }
.hs-notice-title { margin: 0; font-size: 14px; font-weight: 600; color: var(--hs-ink); }
.hs-empty-note { margin: 16px 0 0; font-size: 13.5px; color: var(--hs-ink-body); }

/* ---- the Customers list (customers-list__a*) ---- */
.hs-main .hs-header {
  min-height: 56px; flex-shrink: 0;
  border-bottom: 1px solid var(--hs-hairline);
  background: var(--hs-surface-sunk);
  display: flex; align-items: center;
  padding: 0 28px; gap: 14px;
  position: sticky; top: 0; z-index: 6;
}
.hs-content.hs-page-customers { flex-grow: 1; padding: 20px 28px 30px; display: flex; flex-direction: column; gap: 14px; }
.hs-cx-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hs-cx-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--hs-surface-sunk); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-field);
  height: 36px; padding: 0 12px; width: 280px; max-width: 100%;
}
.hs-cx-search svg { width: 15px; height: 15px; color: var(--hs-ink-muted); flex-shrink: 0; }
.hs-cx-search input { border: none; background: transparent; outline: none; width: 100%; font-family: var(--hs-font-sans); font-size: 13.5px; color: var(--hs-ink); }
.hs-cx-search input::placeholder { color: var(--hs-ink-muted); }
.hs-cx-filter { display: inline-flex; align-items: center; gap: 6px; }
.hs-cx-filter-label { font-family: var(--hs-font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-ink-muted); }
.hs-cx-select {
  font-family: var(--hs-font-sans); font-size: 12.5px; color: var(--hs-ink);
  background: var(--hs-surface); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-field);
  height: 36px; padding: 0 8px; cursor: pointer;
}
.hs-cx-check { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--hs-ink-body); cursor: pointer; }
.hs-cx-check input { width: 15px; height: 15px; margin: 0; accent-color: var(--hs-ink); }
.hs-cx-view { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; background: var(--hs-surface-sunk); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-button); padding: 3px; }
.hs-cx-view-btn { font-family: var(--hs-font-sans); font-size: 12.5px; font-weight: 500; color: var(--hs-ink-muted); background: transparent; border: none; border-radius: 6px; height: 28px; padding: 0 12px; cursor: pointer; }
.hs-cx-view-btn.is-active { background: var(--hs-surface); color: var(--hs-ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--hs-amber); }
.hs-cx-sortnote { font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); }
.hs-cx-table {
  background: var(--hs-surface); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-card);
  overflow: clip;
}
.hs-cx-thead, .hs-cx-row, .hs-cx-totals {
  display: grid;
  grid-template-columns: minmax(200px, 2.1fr) 108px minmax(170px, 1.5fr) 82px 92px 96px 90px 28px;
  column-gap: 12px; align-items: center; padding: 0 18px;
}
.hs-cx-table .hs-cx-thead { height: 38px; border-bottom: 1px solid var(--hs-hairline); background: var(--hs-surface); position: sticky; top: 56px; z-index: 3; }
.hs-cx-th {
  font-family: var(--hs-font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hs-ink-muted);
  background: transparent; border: none; padding: 0; cursor: pointer; text-align: left; display: inline-flex; align-items: center; gap: 5px;
}
.hs-cx-th:hover { color: var(--hs-ink); }
.hs-cx-th.is-num { justify-content: flex-end; text-align: right; }
.hs-cx-th.is-sorted { color: var(--hs-ink); }
.hs-cx-th svg { width: 10px; height: 10px; flex-shrink: 0; }
.hs-cx-row { min-height: 56px; padding-top: 7px; padding-bottom: 7px; border-bottom: 1px solid var(--hs-hairline); }
.hs-cx-name-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hs-cx-name-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hs-cx-name { font-size: 13.5px; font-weight: 500; color: var(--hs-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-cx-contact { font-family: var(--hs-font-mono); font-size: 10px; color: var(--hs-ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-cx-status {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  font-family: var(--hs-font-mono); font-size: 9.5px; color: var(--hs-ink-muted);
  border: 1px solid var(--hs-hairline); border-radius: 5px; padding: 2px 6px;
}
.hs-cx-override-tag:empty, .hs-cx-status:empty { display: contents; }
.hs-cx-status-ring { width: 6px; height: 6px; border-radius: 50%; border: 1.3px solid var(--hs-ink-muted); box-sizing: border-box; display: block; flex-shrink: 0; }
.hs-cx-plan { font-family: var(--hs-font-mono); font-size: 11.5px; color: var(--hs-ink-body); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.hs-cx-override-tag { font-family: var(--hs-font-mono); font-size: 9px; letter-spacing: 0.04em; color: var(--hs-ink-muted); border: 1px dashed var(--hs-hairline); border-radius: 4px; padding: 1px 5px; }
.hs-cx-usage { font-family: var(--hs-font-mono); font-size: 11px; color: var(--hs-ink-body); line-height: 1.45; }
.hs-cx-paid, .hs-cx-cost, .hs-cx-since { font-family: var(--hs-font-mono); font-size: 12px; color: var(--hs-ink-body); text-align: right; }
.hs-cx-since { font-size: 11px; color: var(--hs-ink-muted); }
.hs-cx-margin { font-family: var(--hs-font-mono); font-size: 12.5px; text-align: right; font-weight: 600; }
.hs-cx-margin.is-good { color: var(--hs-good); }
.hs-cx-margin.is-bad { color: var(--hs-bad); }
.hs-cx-margin.is-muted { color: var(--hs-ink-muted); font-weight: 400; }
.hs-cx-detail { display: flex; align-items: center; justify-content: center; color: var(--hs-ink-muted); text-decoration: none; }
.hs-cx-detail svg { width: 14px; height: 14px; display: block; }
.hs-cx-detail:hover { color: var(--hs-ink); }
.hs-cx-totals { min-height: 46px; background: var(--hs-surface); border-top: 1px solid var(--hs-hairline); }
.hs-cx-totals-label { font-family: var(--hs-font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--hs-ink-muted); }
.hs-cx-totals-red { font-family: var(--hs-font-mono); font-size: 11px; color: var(--hs-bad); grid-column: 2 / 4; }
.hs-cx-totals .hs-cx-paid, .hs-cx-totals .hs-cx-cost, .hs-cx-totals .hs-cx-margin { font-weight: 600; color: var(--hs-ink); }
.hs-cx-totals .hs-cx-margin { color: var(--hs-good); }
/* The total margin takes its tone from its sign, as each row's does: below zero the bad colour, at zero muted; "0 in
   the red" is muted too, as nothing is. The design draws only a positive total and "1 in the red". */
.hs-cx-totals .hs-cx-margin.is-bad, .hs-cx-totals .hs-cx-totals-margin.is-bad { color: var(--hs-bad); }
.hs-cx-totals .hs-cx-margin.is-muted, .hs-cx-totals .hs-cx-totals-margin.is-muted { color: var(--hs-ink-muted); }
.hs-cx-totals .hs-cx-totals-red.is-none { color: var(--hs-ink-muted); }
.hs-cx-paging { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 2px 4px; }
.hs-cx-paging-count { font-family: var(--hs-font-mono); font-size: 11px; color: var(--hs-ink-muted); margin-right: auto; }
.hs-cx-paging-page { font-family: var(--hs-font-mono); font-size: 11px; color: var(--hs-ink-muted); }
.hs-cx-paging-btn {
  font-family: var(--hs-font-sans); font-size: 12.5px; color: var(--hs-ink-body);
  background: var(--hs-surface); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-field);
  height: 30px; padding: 0 13px; cursor: pointer;
}
.hs-cx-paging-btn:hover:not(:disabled) { color: var(--hs-ink); border-color: var(--hs-ink-muted); }
.hs-cx-paging-btn:disabled { color: var(--hs-ink-muted); cursor: default; opacity: 0.55; }
@media (max-width: 1180px) {
  .hs-cx-thead, .hs-cx-row, .hs-cx-totals { grid-template-columns: minmax(170px, 2fr) 96px minmax(150px, 1.4fr) 100px 28px; grid-template-rows: auto auto; row-gap: 3px; }
  .hs-cx-table .hs-cx-thead { height: auto; padding-top: 8px; padding-bottom: 8px; }
  .hs-cx-name-cell, .hs-cx-th--account { grid-column: 1; grid-row: 1 / 3; }
  .hs-cx-plan, .hs-cx-th--plan { grid-column: 2; grid-row: 1; }
  .hs-cx-usage, .hs-cx-th--usage { grid-column: 3; grid-row: 1; }
  .hs-cx-margin, .hs-cx-th--margin { grid-column: 4; grid-row: 1; }
  .hs-cx-detail { grid-column: 5; grid-row: 1 / 3; }
  .hs-cx-paid, .hs-cx-th--paid { grid-column: 2; grid-row: 2; text-align: left; justify-content: flex-start; }
  .hs-cx-cost, .hs-cx-th--cost { grid-column: 3; grid-row: 2; text-align: left; justify-content: flex-start; }
  .hs-cx-since, .hs-cx-th--since { grid-column: 4; grid-row: 2; text-align: right; }
  .hs-cx-row .hs-cx-paid, .hs-cx-row .hs-cx-cost { font-size: 10.5px; color: var(--hs-ink-muted); }
  .hs-cx-row .hs-cx-paid::before { content: "paid "; }
  .hs-cx-row .hs-cx-cost::before { content: "cost "; }
  .hs-cx-totals-label { grid-column: 1; grid-row: 1 / 3; }
  .hs-cx-totals-red { grid-column: 2 / 4; grid-row: 1; }
}
@media (max-width: 920px) {
  .hs-shell { flex-direction: column; }
  .hs-shell .hs-rail { width: 100%; position: static; height: auto; overflow: visible; border-right: none; border-bottom: 1px solid var(--hs-hairline); padding: 14px 16px 10px; }
  .hs-lockup-sub { padding-bottom: 10px; }
  .hs-nav-group { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin-bottom: 6px; }
  .hs-nav-group-label { padding: 0 6px 0 0; flex-basis: 100%; }
  .hs-nav { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .hs-nav-link { padding: 6px 9px; }
  .hs-rail_spacer { display: none; }
  .hs-rail_footer { border-top: none; margin-top: 4px; padding-top: 0; flex-direction: row; }
  .hs-main .hs-header { padding: 0 20px; }
  .hs-content { padding: 16px 20px 26px; }
}
@media (max-width: 640px) {
  .hs-cx-search { width: 100%; }
  .hs-cx-view { margin-left: 0; }
  
  .hs-cx-table .hs-cx-thead { position: static; height: auto; padding: 10px 16px; display: flex; flex-wrap: wrap; gap: 6px 14px; }
  .hs-cx-row {
    grid-template-columns: 1fr auto; grid-template-rows: auto;
    min-height: 0; padding: 13px 16px; row-gap: 5px;
  }
  .hs-cx-name-cell { grid-column: 1 / 2; grid-row: 1; }
  .hs-cx-detail { grid-column: 2 / 3; grid-row: 1; }
  .hs-cx-plan { grid-column: 1 / 3; grid-row: 2; }
  .hs-cx-usage { grid-column: 1 / 3; grid-row: 3; font-size: 10.5px; color: var(--hs-ink-muted); }
  .hs-cx-paid, .hs-cx-cost, .hs-cx-margin, .hs-cx-since { grid-column: 1 / 3; text-align: left; }
  .hs-cx-paid { grid-row: 4; }
  .hs-cx-cost { grid-row: 5; }
  .hs-cx-margin { grid-row: 6; }
  .hs-cx-row .hs-cx-since { display: block; grid-row: 7; }
  .hs-cx-paid::before { content: "Paid "; color: var(--hs-ink-muted); font-weight: 400; }
  .hs-cx-cost::before { content: "Cost caused "; color: var(--hs-ink-muted); font-weight: 400; }
  .hs-cx-margin::before { content: "Margin "; color: var(--hs-ink-muted); font-weight: 400; }
  .hs-cx-since::before { content: "Since "; }
  .hs-cx-totals { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 12px 16px; }
  .hs-cx-totals .hs-cx-since { display: none; }
  .hs-cx-paging-count { width: 100%; margin-right: 0; }
}
@media (max-width: 640px) {
  .hs-cx-table .hs-cx-thead {
    background: var(--hs-surface-sunk);
    border: 1px solid var(--hs-hairline);
    border-radius: var(--hs-r-field);
    margin-bottom: 8px;
  }
}
@media (max-width: 640px) {
  .hs-cx-search { min-height: 44px; }
}
.hs-cx-events { margin-top: 28px; background: var(--hs-surface); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-card); padding: 16px 18px 12px; display: flex; flex-direction: column; }
.hs-cx-events-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding-bottom: 6px; }
.hs-cx-events-title { margin: 0; font-size: 14px; font-weight: 600; color: var(--hs-ink); }
.hs-cx-events-note { font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); }
.hs-cx-events-cols, .hs-cx-event { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 150px; column-gap: 14px; align-items: baseline; }
.hs-cx-events-cols { font-family: var(--hs-font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.12em; color: var(--hs-ink-muted); padding: 10px 0 8px; border-bottom: 1px solid var(--hs-hairline); }
.hs-cx-event { padding: 8px 0; border-bottom: 1px solid var(--hs-hairline); font-family: var(--hs-font-mono); font-size: 11.5px; color: var(--hs-ink-body); }
.hs-cx-event:last-child { border-bottom: 0; }
.hs-cx-event-id { color: var(--hs-ink); overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .hs-cx-events-cols, .hs-cx-event { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .hs-cx-event > span { overflow-wrap: anywhere; min-width: 0; }
}
.hs-cx-interval { font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); margin-left: 1px; }
.hs-cx-interval:empty { margin: 0; }
.hs-cx-sortline { display: flex; align-items: center; gap: 8px; font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); }
.hs-cx-sortline svg { width: 10px; height: 10px; }
.hs-cxc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; }
.hs-cxc-card { display: block; text-decoration: none; color: inherit; background: var(--hs-surface); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-card); padding: 15px 16px 14px; position: relative; }
.hs-cxc-card:hover { border-color: var(--hs-amber); }
.hs-cxc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.hs-cxc-name { font-size: 14px; font-weight: 600; color: var(--hs-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.hs-cxc-chevron { color: var(--hs-ink-muted); flex-shrink: 0; margin-top: 2px; }
.hs-cxc-chevron svg { width: 13px; height: 13px; display: block; }
.hs-cxc-contact { font-family: var(--hs-font-mono); font-size: 10px; color: var(--hs-ink-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-cxc-plan-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.hs-cxc-plan { font-family: var(--hs-font-mono); font-size: 11px; color: var(--hs-ink-body); }
.hs-cxc-since { font-family: var(--hs-font-mono); font-size: 10px; color: var(--hs-ink-muted); margin-left: auto; }
.hs-cxc-usage { font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); margin-top: 6px; }
.hs-cxc-bar-track { height: 6px; border-radius: 3px; background: var(--hs-line); margin-top: 10px; overflow: hidden; }
.hs-cxc-bar-fill { height: 100%; border-radius: 3px; background: var(--hs-ink-muted); display: block; }
.hs-cxc-bar-fill.is-bad { background: var(--hs-bad); }
.hs-cxc-bar-caption { font-family: var(--hs-font-mono); font-size: 9.5px; color: var(--hs-ink-muted); margin-top: 5px; }
.hs-cxc-notcharged { display: inline-block; font-family: var(--hs-font-mono); font-size: 9.5px; color: var(--hs-ink-muted); border: 1px dashed var(--hs-hairline); border-radius: 4px; padding: 2px 7px; margin-top: 10px; }
.hs-cxc-margin-row { display: flex; align-items: baseline; justify-content: space-between; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--hs-hairline); }
.hs-cxc-margin-label { font-family: var(--hs-font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--hs-ink-muted); }
.hs-cxc-margin { font-family: var(--hs-font-mono); font-size: 15px; font-weight: 600; color: var(--hs-ink); }
.hs-cxc-margin.is-bad { color: var(--hs-bad); }
.hs-cxc-margin.is-muted { color: var(--hs-ink-muted); font-weight: 400; }
.hs-cx-totals.hs-cx-totals--cards { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; background: var(--hs-surface); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-tile); padding: 12px 16px; }
.hs-cx-totals-figure { font-family: var(--hs-font-mono); font-size: 12px; color: var(--hs-ink); font-weight: 600; }
.hs-cx-totals-figure::before { font-weight: 400; color: var(--hs-ink-muted); }
.hs-cx-totals-paid::before { content: "paid "; }
.hs-cx-totals-cost::before { content: "cost caused "; }
.hs-cx-totals-margin { color: var(--hs-good); }
.hs-cx-totals-margin::before { content: "margin "; }
.hs-cx-totals--cards .hs-cx-totals-red { font-family: var(--hs-font-mono); font-size: 11px; color: var(--hs-bad); margin-left: auto; }
@media (max-width: 640px) {
  .hs-cx-search { width: 100%; }
  .hs-cx-view { margin-left: 0; }
  .hs-cx-totals-red { margin-left: 0; }
  .hs-cx-paging-count { width: 100%; margin-right: 0; }
}
.hs-cx-empty { background: var(--hs-surface); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-card); padding: 26px 18px; }
.hs-cx-empty-text { margin: 0; font-size: 13.5px; color: var(--hs-ink-body); }
.hs-cx-events-empty{margin:0;padding:12px 0 4px;font-size:12.5px;color:var(--hs-ink-muted);}

/* ---- the customer detail and its windows (customers-detail__a*) ---- */
.hs-content.hs-page-customer { flex-grow: 1; padding: 0 28px 40px; max-width: 1260px; width: 100%; }
.hs-cd-identity { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 28px; margin-bottom: 18px; }
.hs-cd-identity-main { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hs-cd-identity-name { font-size: 22px; font-weight: 600; letter-spacing: -0.03em; color: var(--hs-ink); margin: 0; }
.hs-cd-standing { display: inline-flex; align-items: center; gap: 6px; background: var(--hs-surface); border: 1px solid var(--hs-hairline); border-radius: 999px; padding: 4px 10px 4px 8px; }
.hs-cd-standing-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hs-good); display: block; }
.hs-cd-standing-label { font-family: var(--hs-font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--hs-good); }
.hs-cd-identity-grid { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; }
.hs-cd-identity-item { display: flex; flex-direction: column; gap: 1px; }
.hs-cd-identity-item dt { font-family: var(--hs-font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-ink-muted); }
.hs-cd-identity-item dd { margin: 0; font-family: var(--hs-font-mono); font-size: 11.5px; color: var(--hs-ink-body); }
.hs-cd-identity-item dd a { text-decoration: underline; text-decoration-color: var(--hs-hairline); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.hs-cd-identity-item dd a:hover { text-decoration-color: var(--hs-ink); }
.hs-cc-money { background: var(--hs-surface); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-card); padding: 18px 22px 20px; margin-bottom: 16px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 36px; }
.hs-cd-money-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hs-cd-money-label { font-family: var(--hs-font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--hs-ink-muted); }
.hs-cd-money-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.hs-cd-money-figure { font-size: 48px; font-weight: 600; letter-spacing: -0.045em; line-height: 1; color: var(--hs-ink); }
.hs-cd-money-figure.is-positive { color: var(--hs-good); }
.hs-cd-money-figure.is-negative { color: var(--hs-bad); }
.hs-cd-money-period { font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); }
.hs-cd-money-parts { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 0; }
.hs-cd-money-part { display: flex; flex-direction: column; gap: 3px; }
.hs-cd-money-part dt { font-family: var(--hs-font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-ink-muted); }
.hs-cd-money-part dd { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -0.03em; color: var(--hs-ink); }
.hs-page-customer .hs-period {
  position: sticky; top: 56px; z-index: 5;
  background: var(--hs-ground);
  padding: 16px 0 12px; margin-bottom: 18px;
  border-bottom: 1px solid var(--hs-hairline);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
}
.hs-page-customer .hs-period-input { font-family: var(--hs-font-mono); font-size: 11.5px; color: var(--hs-ink); background: var(--hs-surface); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-field); height: 32px; padding: 0 10px; width: 172px; }
/* Outside Custom the bounds are read-only text, drawn without a box (customers-detail__a's own rule). */
.hs-page-customer .hs-period-input:read-only { color: var(--hs-ink-muted); background: transparent; border-color: transparent; cursor: default; }
.hs-page-customer .hs-period-summary { flex-basis: 100%; margin: 0; font-family: var(--hs-font-mono); font-size: 10.5px; line-height: 1.5; color: var(--hs-ink-muted); }
.hs-cd-tabs { position: relative; }
.hs-cd-tab-input { position: absolute; opacity: 0; pointer-events: none; }
.hs-main .hs-cd-tabbar {
  display: flex; align-items: center; gap: 4px 18px; flex-wrap: wrap;
  border-bottom: 1px solid var(--hs-hairline); margin-bottom: 18px;
}
.hs-cd-tabbar label { font-size: 13px; font-weight: 500; color: var(--hs-ink-muted); cursor: pointer; padding: 11px 4px; margin-bottom: -1px; border-bottom: 2px solid transparent; }
.hs-cd-tabpanel { display: none; flex-direction: column; gap: 16px; }
#hs-cd-tab-overview:checked ~ .hs-cd-tabbar label[for="hs-cd-tab-overview"],
#hs-cd-tab-usage:checked ~ .hs-cd-tabbar label[for="hs-cd-tab-usage"] { color: var(--hs-ink); font-weight: 600; border-bottom-color: var(--hs-amber); }
#hs-cd-tab-overview:checked ~ .hs-cd-panel-overview,
#hs-cd-tab-usage:checked ~ .hs-cd-panel-usage { display: flex; }
.hs-cc-plan, .hs-cc-requests, .hs-cc-signup, .hs-cc-usage {
  background: var(--hs-surface); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-card);
  padding: 18px 20px; display: flex; flex-direction: column; gap: 14px;
}
.hs-cc-usage { padding: 16px 20px; gap: 12px; }
.hs-cd-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hs-cd-card-title { font-size: 14px; font-weight: 600; color: var(--hs-ink); margin: 0; }
.hs-cd-card-note { font-family: var(--hs-font-mono); font-size: 10px; color: var(--hs-ink-muted); }
.hs-btn-primary { font-family: var(--hs-font-sans); font-size: 12.5px; font-weight: 600; color: var(--hs-on-action); background: var(--hs-action); border: none; border-radius: var(--hs-r-button); height: 36px; padding: 0 14px; cursor: pointer; }
.hs-btn-outline { font-family: var(--hs-font-sans); font-size: 12px; font-weight: 600; color: var(--hs-ink-body); background: transparent; border: 1px solid var(--hs-hairline); border-radius: 7px; height: 32px; padding: 0 12px; cursor: pointer; white-space: nowrap; }
.hs-btn-outline:hover { border-color: var(--hs-ink-muted); color: var(--hs-ink); }
.hs-btn-danger { font-family: var(--hs-font-sans); font-size: 12.5px; font-weight: 600; color: var(--hs-bad); background: transparent; border: 1px solid var(--hs-bad); border-radius: 7px; height: 36px; padding: 0 14px; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.hs-btn-danger:hover { background: rgba(179,41,28,0.08); }
.hs-dr-suspend .hs-btn-danger:hover { background: transparent; border-color: var(--hs-ink-muted); color: var(--hs-ink); }
.hs-cd-plan-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.hs-cd-plan-name { font-size: 13px; font-weight: 600; color: var(--hs-ink); background: var(--hs-surface-sunk); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-chip); padding: 3px 9px; }
.hs-cd-plan-price { font-size: 21px; font-weight: 600; letter-spacing: -0.03em; color: var(--hs-ink); }
.hs-cd-plan-per { font-size: 12px; font-weight: 500; color: var(--hs-ink-muted); margin-left: 4px; letter-spacing: normal; word-spacing: 2px; }
.hs-cd-plan-note { font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); }
.hs-fr-row, .hs-np-row { display: flex; flex-direction: column; gap: 6px; }
.hs-cd-bar-head { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--hs-ink-body); }
.hs-cd-bar-track { height: 7px; border-radius: 999px; background: var(--hs-surface-sunk); border: 1px solid var(--hs-hairline); overflow: hidden; }
.hs-cd-bar-fill { height: 100%; border-radius: 999px; background: var(--hs-ink-muted); }
.hs-cd-basic { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--hs-ink-body); }
.hs-cd-basic-note { font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); }
.hs-cd-facts { font-size: 12.5px; color: var(--hs-ink-muted); border-top: 1px solid var(--hs-hairline); padding-top: 11px; }
.hs-cd-facts .hs-num { color: var(--hs-ink); font-weight: 600; }
.hs-cd-ratelimit { display: flex; align-items: center; justify-content: space-between; gap: 10px 18px; flex-wrap: wrap; border-top: 1px solid var(--hs-hairline); padding-top: 11px; }
.hs-cd-ratelimit-text { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--hs-ink-muted); }
.hs-cd-ratelimit-value { font-size: 15px; font-weight: 600; color: var(--hs-ink); }
.hs-cd-ratelimit-support { font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); }
details.hs-cd-disclosure { border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-card); background: var(--hs-surface); }
details.hs-cd-disclosure > summary { list-style: none; cursor: pointer; padding: 14px 18px; font-size: 13.5px; font-weight: 600; color: var(--hs-ink); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
details.hs-cd-disclosure > summary::-webkit-details-marker { display: none; }
details.hs-cd-disclosure > summary::after { content: '▸'; color: var(--hs-ink-muted); font-size: 11px; transition: transform .15s ease; }
details.hs-cd-disclosure[open] > summary::after { transform: rotate(90deg); }
.hs-cd-disclosure-body { padding: 4px 18px 18px; display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--hs-hairline); }
.hs-cd-danger-caption { font-family: var(--hs-font-mono); font-size: 10px; color: var(--hs-ink-muted); padding-top: 12px; }
.hs-dr-suspend, .hs-dr-delete { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 12px; border-top: 1px solid var(--hs-hairline); }
.hs-dr-suspend { padding-top: 0; border-top: none; }
/* The sign-in email row (plan Decision 341 (1)): laid out as the rows above it, its control the plain outline button —
   changing an address is not a destructive action. */
.hs-dr-email { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 12px; border-top: 1px solid var(--hs-hairline); }
.hs-dr-email form { margin: 0; }
/* "Stripe still has the old email" reports a problem, so it wears the amber warning tone, not a neutral action row's (review r3 polish-12) */
.hs-dr-email--owed { border-left: 2px solid var(--hs-amber); padding-left: 10px; }
.hs-dr-email--owed .hs-cd-danger-text > :first-child { color: var(--hs-amber-ink); font-weight: 600; }
@media (max-width: 640px) { .hs-dr-email { flex-direction: column; align-items: flex-start; } }
.hs-cd-danger-text { display: flex; flex-direction: column; gap: 2px; }
.hs-cd-danger-sub { font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); }
.hs-requests-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 8px; padding: 2px 0 4px; }
.hs-filter { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hs-filter--vehicle { flex: 1 1 220px; }
.hs-filter--key { flex: 0 1 150px; }
.hs-filter--kind { flex: 0 1 108px; }
.hs-filter--match { flex: 0 1 170px; }
.hs-filter-label { font-family: var(--hs-font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; color: var(--hs-ink-muted); }
.hs-filter-input, .hs-filter-select { height: 32px; width: 100%; background: var(--hs-surface-sunk); border: 1px solid var(--hs-card-border); border-radius: var(--hs-r-field); padding: 0 9px; font-family: var(--hs-font-sans); font-size: 12.5px; color: var(--hs-ink); }
.hs-filter-input::placeholder { color: var(--hs-ink-muted); }
.hs-filter-actions { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; flex: 0 0 auto; }
.hs-filter-apply { height: 32px; padding: 0 14px; border-radius: var(--hs-r-button); background: var(--hs-action); color: var(--hs-on-action); border: none; font-family: var(--hs-font-sans); font-size: 12px; font-weight: 600; cursor: pointer; flex: 0 0 auto; }
.hs-filter-export { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--hs-r-button); border: 1px solid color-mix(in srgb, var(--hs-ink) 25%, transparent); background: transparent; color: var(--hs-ink); font-family: var(--hs-font-sans); font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; }
.hs-filter-export:hover { background: var(--hs-surface-sunk); border-color: var(--hs-ink); }
.hs-filter-export-note { font-family: var(--hs-font-mono); font-size: 10px; color: var(--hs-ink-muted); white-space: nowrap; }
.hs-cd-log-head, .hs-cd-log-row { display: grid; grid-template-columns: 132px minmax(0, 1fr) 150px 148px 56px 72px 64px 14px; column-gap: 12px; align-items: center; margin: 0 -8px; padding-left: 8px; padding-right: 8px; }
.hs-cd-log-head { font-family: var(--hs-font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.12em; color: var(--hs-ink-muted); padding-bottom: 8px; border-bottom: 1px solid var(--hs-hairline); }
.hs-cd-table-body { display: flex; flex-direction: column; }
.hs-cd-log-row { position: relative; padding-top: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--hs-hairline); font-size: 12.5px; }
.hs-cd-log-row:hover, .hs-cd-log-row[aria-current="true"] { background: var(--hs-surface-sunk); border-radius: var(--hs-r-field); }
.hs-cd-log-time { font-family: var(--hs-font-mono); font-size: 11.5px; color: var(--hs-ink-muted); white-space: nowrap; }
.hs-cd-log-vehicle { display: flex; align-items: center; gap: 9px; min-width: 0; }
.hs-cd-log-thumb { width: 42px; height: 28px; object-fit: contain; flex-shrink: 0; border-radius: 3px; background: var(--hs-surface-sunk); }
.hs-cd-vehicle-link { position: relative; z-index: 1; color: var(--hs-ink); text-decoration: underline; text-decoration-color: var(--hs-hairline); text-decoration-thickness: 1px; text-underline-offset: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.hs-cd-vehicle-link:hover { text-decoration-color: var(--hs-ink); }
.hs-cd-served { display: flex; align-items: center; gap: 7px; font-family: var(--hs-font-mono); font-size: 11px; color: var(--hs-ink-body); min-width: 0; white-space: nowrap; }
.hs-cd-served-swatch { width: 13px; height: 13px; border-radius: 3px; flex-shrink: 0; border: 1px solid var(--hs-hairline); }
.hs-cd-served-swatch.is-none { background: transparent; border-style: dashed; }
.hs-cd-match { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--hs-ink-body); min-width: 0; }
.hs-cd-match-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hs-ink); display: block; flex-shrink: 0; }
.hs-cd-match-ring { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--hs-ink-muted); box-sizing: border-box; display: block; flex-shrink: 0; }
.hs-cd-kind, .hs-cd-kept, .hs-cd-key { font-family: var(--hs-font-mono); font-size: 11px; color: var(--hs-ink-body); }
.hs-cd-kept, .hs-cd-key { color: var(--hs-ink-muted); }
.hs-cd-log-open { display: flex; align-items: center; justify-content: flex-end; color: var(--hs-ink-muted); }
.hs-cd-log-open::after { content: ""; position: absolute; inset: 0; border-radius: var(--hs-r-field); }
.hs-cd-log-open:focus-visible { outline: none; }
.hs-cd-log-open:focus-visible::after { outline: 2px solid var(--hs-amber); outline-offset: -2px; }
.hs-cd-log-row:hover .hs-cd-log-open, .hs-cd-log-row[aria-current="true"] .hs-cd-log-open { color: var(--hs-ink); }
.hs-picture-disclaimer { font-family: var(--hs-font-mono); font-size: 10px; color: var(--hs-ink-muted); margin: 0; }
.hs-cd-paging { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 4px; }
.hs-cd-paging-count { font-family: var(--hs-font-mono); font-size: 11px; color: var(--hs-ink-muted); margin-right: auto; }
.hs-cd-paging-page { font-family: var(--hs-font-mono); font-size: 11px; color: var(--hs-ink-muted); }
.hs-cd-paging-btn { font-family: var(--hs-font-sans); font-size: 12.5px; color: var(--hs-ink-body); background: var(--hs-surface); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-field); height: 30px; padding: 0 13px; cursor: pointer; }
.hs-cd-paging-btn:hover:not(:disabled) { color: var(--hs-ink); border-color: var(--hs-ink-muted); }
.hs-cd-paging-btn:disabled { color: var(--hs-ink-muted); cursor: default; opacity: 0.55; }
.hs-cd-signup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 14px; }
.hs-cc-signup { gap: 10px; }
.hs-sf-linktag, .hs-sf-referrer, .hs-sf-landingpath, .hs-sf-clickref { display: flex; flex-direction: column; gap: 3px; }
.hs-cd-signup-label { font-family: var(--hs-font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-ink-muted); }
.hs-cd-signup-value { font-family: var(--hs-font-mono); font-size: 12px; color: var(--hs-ink-body); word-break: break-all; }
.hs-du-plot-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.hs-du-plot-title { font-size: 12.5px; font-weight: 600; color: var(--hs-ink); }
.hs-du-plot-note { font-family: var(--hs-font-mono); font-size: 10px; color: var(--hs-ink-muted); }
.hs-du-body { display: flex; gap: 10px; align-items: stretch; min-width: 0; }
.hs-du-cols { flex-grow: 1; display: flex; align-items: flex-end; gap: 6px; border-bottom: 1px solid var(--hs-hairline); min-width: 0; }
.hs-du-cols--requests { gap: 8px; border-bottom: none; }
.hs-du-day { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; }
.hs-du-pair { display: flex; align-items: flex-end; justify-content: center; gap: 3px; width: 100%; height: 82px; border-bottom: 1px solid var(--hs-hairline); }
.hs-du-stack { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; height: 100%; width: 34%; max-width: 26px; min-width: 8px; }
.hs-du-stack--basic { width: 26%; max-width: 20px; min-width: 6px; }
.hs-du-value { font-family: var(--hs-font-mono); font-size: 8.5px; font-weight: 600; line-height: 1; color: var(--hs-ink); white-space: nowrap; min-height: 9px; }
.hs-du-stack--basic .hs-du-value { font-weight: 500; color: var(--hs-ink-body); }
.hs-du-full { display: block; width: 100%; background: var(--hs-amber); border-radius: 2px 2px 0 0; }
.hs-du-basic { display: block; width: 100%; border: 1px solid var(--hs-ink-muted); border-bottom: none; border-radius: 2px 2px 0 0; }
.hs-du-full.is-zero, .hs-du-basic.is-zero { height: 0; border-width: 0; }
.hs-du-date { font-family: var(--hs-font-mono); font-size: 8.5px; line-height: 1; color: var(--hs-ink-muted); padding-top: 4px; }
.hs-du-body--rows { flex-direction: column; gap: 6px; align-items: stretch; }
.hs-du-mix-row { display: flex; flex-direction: column; gap: 2px; }
.hs-du-mix-row-label { font-family: var(--hs-font-mono); font-size: 9.5px; line-height: 1; color: var(--hs-ink-muted); }
.hs-du-cols--mix { height: 24px; flex-grow: 0; }
.hs-du-day--mix { height: 24px; gap: 1px; }
.hs-du-mix-value { font-family: var(--hs-font-mono); font-size: 8.5px; line-height: 1; color: var(--hs-ink-body); min-height: 9px; }
.hs-du-mix-bar { display: block; width: 34%; max-width: 14px; min-width: 5px; background: var(--hs-ink); border-radius: 2px 2px 0 0; }
.hs-du-mix-bar.is-zero { height: 0; }
.hs-du-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.hs-du-pic-day { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; height: 40px; min-width: 0; }
.hs-du-pic-count { font-family: var(--hs-font-mono); font-size: 8.5px; line-height: 1; color: var(--hs-ink-body); min-height: 9px; }
.hs-du-pic-bar { display: block; width: 34%; max-width: 26px; min-width: 6px; background: var(--hs-ink-body); border-radius: 2px 2px 0 0; }
.hs-du-fact-bar { display: block; width: 34%; max-width: 26px; min-width: 6px; background: var(--hs-ink-muted); border-radius: 2px 2px 0 0; }
.hs-du-pic-bar.is-zero, .hs-du-fact-bar.is-zero { height: 0; }
.hs-du-axis { display: flex; justify-content: space-between; font-family: var(--hs-font-mono); font-size: 9.5px; color: var(--hs-ink-muted); padding-top: 4px; }
.hs-du-legend { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--hs-hairline); padding-top: 10px; }
.hs-du-legend-row { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.hs-du-legend-head { font-family: var(--hs-font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--hs-ink-muted); }
.hs-du-key { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--hs-ink-body); }
.hs-du-key .hs-num { color: var(--hs-ink); font-weight: 600; }
.hs-du-key::before { content: ""; width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; display: block; }
.hs-du-key--full::before { background: var(--hs-amber); }
.hs-du-key--nearest::before, .hs-du-key--other-body::before, .hs-du-key--stand-in-shape::before, .hs-du-key--stand-in-generic::before { content: none; }
.hs-du-key--basic::before { border: 1px solid var(--hs-ink-muted); }
.hs-du-key--facts::before { width: 6px; height: 12px; background: var(--hs-ink-muted); }
.hs-du-key--pictures::before { width: 6px; height: 12px; background: var(--hs-ink-body); }
@media (max-width: 920px) {
  .hs-shell { flex-direction: column; }
  .hs-shell .hs-rail { width: 100%; position: static; height: auto; overflow: visible; border-right: none; border-bottom: 1px solid var(--hs-hairline); padding: 14px 16px 10px; }
  .hs-lockup-sub { padding-bottom: 10px; }
  .hs-nav-group { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin-bottom: 6px; }
  .hs-nav-group-label { padding: 0 6px 0 0; flex-basis: 100%; }
  .hs-nav { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .hs-nav-link { padding: 6px 9px; }
  .hs-rail_spacer { display: none; }
  .hs-rail_footer { border-top: none; margin-top: 4px; padding-top: 0; flex-direction: row; }
  .hs-main .hs-header { padding: 0 20px; }
  .hs-content { padding: 18px 20px 30px; }
}
@media (max-width: 640px) {
  .hs-cc-money { padding: 16px 18px 18px; }
  .hs-cd-money-figure { font-size: 40px; }
  .hs-cd-tabbar label { padding: 8px 4px; }
  .hs-du-split { grid-template-columns: 1fr; gap: 15px; }
  .hs-du-cols { gap: 3px; }
  
  .hs-du-scroll { overflow-x: auto; padding-bottom: 4px; }
  .hs-du-cols--requests { min-width: 560px; }
  
  .hs-cd-log-head, .hs-cd-log-row { grid-template-columns: 60px minmax(0, 1fr) 64px 12px; gap: 4px 8px; align-items: start; }
  .hs-cd-log-row > .hs-cd-log-time, .hs-cd-log-head > :nth-child(1) { grid-column: 1; grid-row: 1; }
  .hs-cd-log-row > .hs-cd-log-vehicle, .hs-cd-log-head > :nth-child(2) { grid-column: 2; grid-row: 1; }
  .hs-cd-log-row > .hs-cd-kind, .hs-cd-log-head-kind { grid-column: 3 / 5; grid-row: 1; }
  .hs-cd-log-row > .hs-cd-log-open { grid-column: 4; grid-row: 1; }
  .hs-cd-log-row > .hs-cd-served, .hs-cd-log-head-served { grid-column: 2; grid-row: 2; }
  .hs-cd-log-row > .hs-cd-match, .hs-cd-log-head-match { grid-column: 2; grid-row: 3; }
  .hs-cd-log-row > .hs-cd-kept, .hs-cd-log-head-kept { grid-column: 3 / 5; grid-row: 2; }
  .hs-cd-log-row > .hs-cd-key, .hs-cd-log-head-key { grid-column: 3 / 5; grid-row: 3; }
  .hs-cd-log-time { font-size: 10.5px; white-space: normal; }
  .hs-cd-log-vehicle { align-items: flex-start; gap: 6px; }
  .hs-cd-vehicle-link { white-space: normal; }
  .hs-cd-log-thumb { width: 36px; height: 24px; }
  .hs-dr-suspend, .hs-dr-delete { flex-direction: column; align-items: flex-start; }
  .hs-cd-paging-count { width: 100%; margin-right: 0; }
}
details.hs-cd-disclosure > summary { justify-content: flex-start; gap: 8px; }
details.hs-cd-disclosure > summary::after { order: 1; }
details.hs-cd-disclosure > summary .hs-cd-danger-caption { order: 2; margin-left: auto; padding-top: 0; }
/* the caption sits on the title's baseline, not 7 px below it (review r3 polish-12) */
details.hs-cd-disclosure > summary:has(.hs-cd-danger-caption) { align-items: baseline; }
details.hs-cd-disclosure:has(summary:hover),
details.hs-cd-disclosure:has(summary:focus-visible) { border-color: var(--hs-card-border); }
@media (max-width: 640px) {
  .hs-cd-log-head {
    background: var(--hs-surface-sunk);
    border: 1px solid var(--hs-hairline);
    border-radius: var(--hs-r-field);
    padding: 8px 10px;
    margin-bottom: 6px;
  }
}
@media (max-width: 1320px) {
  .hs-cd-identity-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
  .hs-cd-identity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .hs-cd-paging-btn,
  .hs-filter-input,
  .hs-filter-select,
  .hs-filter-apply,
  .hs-filter-export { min-height: 44px; }
  .hs-cd-tabbar label { min-height: 44px; display: inline-flex; align-items: center; }
  
  .hs-main .hs-period { position: static; gap: 10px 12px; padding: 12px 0; }
  .hs-period-options { max-width: 100%; flex-wrap: wrap; }
  .hs-period-btn { padding: 0 9px; font-size: 12px; }
  .hs-period-range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
  .hs-period-field { flex-direction: column; align-items: stretch; gap: 3px; min-width: 0; }
  .hs-period-input { width: 100%; font-size: 11px; }
  
  .hs-filter--vehicle, .hs-filter--key, .hs-filter--kind, .hs-filter--match { flex: 1 1 100%; }
  .hs-filter-actions { flex: 1 1 100%; }
  .hs-filter-actions .hs-filter-apply, .hs-filter-export { flex: 1 1 0; justify-content: center; }
  .hs-filter-export-note { flex-basis: 100%; text-align: center; }
}
details.hs-cd-disclosure > summary .hs-cd-records-caption { order: 2; margin-left: auto; font-family: var(--hs-font-mono); font-size: 10px; font-weight: 400; color: var(--hs-ink-muted); }
.hs-cd-rec-facts { display: flex; flex-wrap: wrap; gap: 12px 44px; padding-top: 12px; }
.hs-cd-rec-fact { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.hs-cd-rec-label { font-family: var(--hs-font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-ink-muted); }
.hs-cd-rec-recipients, .hs-cd-rec-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-family: var(--hs-font-mono); font-size: 11.5px; color: var(--hs-ink-body); }
.hs-cd-rec-recipient { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.hs-cd-rec-email { color: var(--hs-ink); overflow-wrap: anywhere; }
.hs-cd-rec-tag { color: var(--hs-ink-muted); }
.hs-cd-suppressed { font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-amber-ink); }
.hs-cd-identity-item dd .hs-cd-suppressed { display: block; margin-top: 2px; }
.hs-cd-rec-point { display: flex; gap: 12px; }
.hs-cd-rec-point > :first-child { min-width: 120px; color: var(--hs-ink-muted); }
.hs-cd-rec-table { display: flex; flex-direction: column; }
.hs-cd-rec-head, .hs-cd-rec-row { display: grid; column-gap: 14px; align-items: baseline; }
.hs-cd-rec-head { font-family: var(--hs-font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.12em; color: var(--hs-ink-muted); padding: 12px 0 8px; border-bottom: 1px solid var(--hs-hairline); }
.hs-cd-rec-row { padding: 8px 0; border-bottom: 1px solid var(--hs-hairline); font-size: 12.5px; color: var(--hs-ink-body); }
.hs-cd-rec-row > span, .hs-cd-rec-head > span { min-width: 0; overflow-wrap: anywhere; }
.hs-cd-rec-list > .hs-cd-rec-row:last-child { border-bottom: 0; padding-bottom: 0; }
.hs-cd-rec-row .hs-num, .hs-cd-rec-mono { font-family: var(--hs-font-mono); font-size: 11.5px; }
.hs-cd-rec-action { font-family: var(--hs-font-mono); font-size: 11px; color: var(--hs-ink); margin-right: 8px; }
.hs-cd-rec-muted { color: var(--hs-ink-muted); }
.hs-cd-rec-table--warnings .hs-cd-rec-head, .hs-cd-rec-table--warnings .hs-cd-rec-row { grid-template-columns: minmax(0, 1fr) 96px 150px 150px; }
.hs-cd-rec-table--invoices .hs-cd-rec-head, .hs-cd-rec-table--invoices .hs-cd-rec-row { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 96px 64px; }
.hs-cd-rec-table--sessions .hs-cd-rec-head, .hs-cd-rec-table--sessions .hs-cd-rec-row { grid-template-columns: 150px 150px 150px minmax(0, 1fr); }
.hs-cd-rec-table--changes .hs-cd-rec-head, .hs-cd-rec-table--changes .hs-cd-rec-row { grid-template-columns: 140px 172px minmax(0, 1fr) minmax(0, 1.2fr); }
.hs-cd-rec-table--extra .hs-cd-rec-head, .hs-cd-rec-table--extra .hs-cd-rec-row { grid-template-columns: minmax(0, 1fr) 70px 110px 90px; }
.hs-cd-standing-dot.is-muted { background: var(--hs-ink-muted); }
.hs-cd-standing-label.is-muted { color: var(--hs-ink-muted); }
.hs-cd-deal { border-top: 1px solid var(--hs-hairline); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.hs-cd-deal-title { font-size: 13px; font-weight: 600; color: var(--hs-ink); }
.hs-cd-deal-grid { display: flex; flex-wrap: wrap; gap: 8px 30px; margin: 0; }
.hs-cd-deal-item { display: flex; flex-direction: column; gap: 1px; }
.hs-cd-deal-item dt { font-family: var(--hs-font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-ink-muted); }
.hs-cd-deal-item dd { margin: 0; font-family: var(--hs-font-mono); font-size: 12px; color: var(--hs-ink); }
.hs-cd-deal-item dd a { color: var(--hs-ink); text-decoration: underline; text-decoration-color: var(--hs-hairline); text-underline-offset: 3px; overflow-wrap: anywhere; }
.hs-cd-extra-sums { display: flex; flex-wrap: wrap; gap: 8px 36px; margin: 0; padding-top: 4px; }
.hs-cd-erased-records { display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 640px) {
  .hs-cd-rec-table .hs-cd-rec-head, .hs-cd-rec-table .hs-cd-rec-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 3px; }
  .hs-cd-rec-facts { flex-direction: column; gap: 12px; }
  .hs-cd-rec-point > :first-child { min-width: 108px; }
}
.hs-cd-late { border-top: 1px solid var(--hs-hairline); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.hs-cd-late-head { display: flex; gap: 6px; align-items: baseline; font-size: 13px; color: var(--hs-ink-body); }
.hs-cd-late-count { font-weight: 600; color: var(--hs-ink); }
.hs-cd-late-list { display: flex; flex-direction: column; gap: 4px; }
.hs-cd-late-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; font-family: var(--hs-font-mono); font-size: 11px; color: var(--hs-ink-muted); }
.hs-cd-late-vehicle { font-family: var(--hs-font-sans); font-size: 12.5px; font-weight: 500; color: var(--hs-ink); }
.hs-cd-late-free { color: var(--hs-ink-body); }
.hs-cd-rec-empty{margin:0;padding:12px 0 4px;font-size:12.5px;color:var(--hs-ink-muted);}
.hs-cd-countdown { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; background: var(--hs-surface); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-tile); padding: 12px 16px; }
.hs-cd-countdown-heading { font-size: 13.5px; font-weight: 600; color: var(--hs-ink); }
.hs-cd-countdown-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; }
.hs-cd-countdown-fact { display: flex; flex-direction: column; gap: 1px; }
.hs-cd-countdown-fact dt { font-family: var(--hs-font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-ink-muted); }
.hs-cd-countdown-fact dd { margin: 0; font-family: var(--hs-font-mono); font-size: 11.5px; color: var(--hs-ink); }
.hs-cd-countdown-fact--deleted-on dd { font-weight: 600; }
.hs-cd-countdown-note { flex: 1 1 100%; margin: 0; font-size: 12.5px; color: var(--hs-ink-body); }
.hs-cd-standing-dot.is-pending-deletion { background: var(--hs-ink-muted); }
.hs-cd-standing-label.is-pending-deletion { color: var(--hs-ink-muted); }
.hs-btn-danger:disabled { opacity: 0.45; cursor: not-allowed; }
.hs-btn-danger:disabled:hover { background: transparent; }
.hs-dr-suspend .hs-btn-danger:disabled:hover { border-color: var(--hs-hairline); color: var(--hs-ink-body); }
.hs-scrim {
  position: fixed; inset: 0; z-index: 40; background: rgba(22, 21, 15, 0.58);
  display: flex; align-items: flex-start; justify-content: center; padding: 72px 28px 28px;
}
.hs-dialog {
  background: var(--hs-surface); border: 1px solid var(--hs-card-border); border-radius: var(--hs-r-card);
  box-shadow: var(--hs-lift); width: 100%; max-width: 520px; max-height: 100%; overflow-y: auto;
  padding: 22px 24px; display: flex; flex-direction: column; gap: 14px;
}
.hs-dialog--wide { max-width: 660px; }
.hs-dialog-title { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: var(--hs-ink); margin: 0; }
/* One window pattern for every admin window (review r3 polish-01): what the window acts on sits in this bordered box
   (.hs-dialog-subject; .hs-dialog-vehicle is its older name, kept by windows not yet moved), every required field's
   label carries the amber .hs-dialog-required mark, and every helper line under a field is .hs-dialog-hint, grey sans. */
.hs-dialog-subject,
.hs-dialog-vehicle {
  font-family: var(--hs-font-mono); font-size: 11.5px; color: var(--hs-ink);
  background: var(--hs-surface-sunk); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-field); padding: 9px 11px;
}
.hs-dialog-text { font-size: 13.5px; color: var(--hs-ink-body); margin: 0; }
.hs-dialog-text strong { color: var(--hs-ink); font-weight: 600; }
/* a plan's Save… window: each changed number, before → after (Decision 299 (3)) */
.hs-dialog-changes { margin: 0; padding: 10px 12px 10px 28px; border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-field); font-family: var(--hs-font-mono); font-size: 12px; color: var(--hs-ink); display: grid; gap: 4px; }
.hs-form-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
/* a label that wraps carries its last word down with the REQUIRED mark, never the mark alone (review r3 polish-R3) */
.hs-dialog-label { font-family: var(--hs-font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-ink-muted); text-wrap: pretty; }
.hs-dialog-input {
  font-family: var(--hs-font-sans); font-size: 13px; color: var(--hs-ink); width: 100%;
  background: var(--hs-surface-sunk); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-field); padding: 9px 11px;
}
.hs-dialog-input::placeholder { color: var(--hs-ink-muted); opacity: 1; }
.hs-dialog-input--mono { font-family: var(--hs-font-mono); font-size: 12.5px; }
.hs-dialog-input--short { width: 120px; }
/* also a window's note about its save ("The save asks for a fresh authenticator code."): a helper line like the rest,
   one class so the two can never drift apart (review r3 polish-R1; architecture review r3 AR3-3) */
.hs-dialog-hint { font-family: var(--hs-font-sans); font-size: 12px; line-height: 1.45; color: var(--hs-ink-muted); margin: 0; }
.hs-dialog-required { font-family: var(--hs-font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-amber-ink); margin-left: 4px; }
.hs-dialog-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; }
.hs-dialog-affixed { display: flex; align-items: center; gap: 6px; background: var(--hs-surface-sunk); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-field); padding: 0 11px; }
.hs-dialog-affixed .hs-dialog-input { background: transparent; border: none; padding: 9px 0; }
.hs-dialog-affix { font-family: var(--hs-font-mono); font-size: 12px; color: var(--hs-ink-muted); }
.hs-dialog-code { font-family: var(--hs-font-mono); font-size: 22px; font-weight: 500; letter-spacing: 0.34em; text-align: center; width: 232px; padding: 10px 0 10px 0.34em; }
.hs-dialog-error { font-size: 13px; font-weight: 600; color: var(--hs-bad); margin: 0; }
.hs-dialog-input.is-invalid { border-color: var(--hs-bad); }
.hs-form-preview { border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-tile); padding: 12px 14px 13px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; }
.hs-dialog-preview-head { grid-column: 1 / -1; font-family: var(--hs-font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--hs-ink-muted); }
.hs-form-preview-item { display: flex; flex-direction: column; gap: 2px; }
.hs-dialog-preview-label { font-size: 12px; color: var(--hs-ink-muted); }
.hs-dialog-preview-value { font-size: 15px; font-weight: 600; color: var(--hs-ink); letter-spacing: -0.01em; }
.hs-dialog-preview-value small { font-size: 11.5px; font-weight: 500; color: var(--hs-ink-muted); letter-spacing: normal; }
.hs-dialog-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 4px; }
.hs-dialog-cancel {
  font-family: var(--hs-font-sans); font-size: 12.5px; font-weight: 600; color: var(--hs-ink);
  background: transparent; border: 1px solid var(--hs-hairline); border-radius: 7px; height: 36px; padding: 0 14px; cursor: pointer;
}
.hs-dialog-cancel:hover { border-color: var(--hs-ink-muted); }
.hs-dialog-secondary {
  font-family: var(--hs-font-sans); font-size: 12.5px; font-weight: 600; color: var(--hs-ink-body);
  background: transparent; border: 1px solid var(--hs-hairline); border-radius: 7px; height: 36px; padding: 0 14px; cursor: pointer;
}
.hs-dialog-secondary:hover { border-color: var(--hs-ink-muted); color: var(--hs-ink); }
.hs-dialog-confirm {
  font-family: var(--hs-font-sans); font-size: 12.5px; font-weight: 600; color: var(--hs-on-action);
  background: var(--hs-action); border: none; border-radius: var(--hs-r-button); height: 36px; padding: 0 16px; cursor: pointer; margin-left: auto;
}
.hs-dialog-confirm:hover { opacity: 0.92; }
.hs-dialog-confirm--danger { background: var(--hs-bad); color: var(--hs-surface); }
/* a window made of several small forms (the master list's Edit) keeps each form's button at the start of its row, as
   its sibling forms' buttons sit (review r3 polish-R6) */
.hs-dialog-actions--start .hs-dialog-confirm { margin-left: 0; }
.hs-cd-standing-dot.is-suspended { background: var(--hs-bad); }
.hs-cd-standing-label.is-suspended { color: var(--hs-bad); }
.hs-cd-standing-dot.is-deactivated { background: var(--hs-ink-muted); }
.hs-cd-standing-label.is-deactivated { color: var(--hs-ink-muted); }
.hs-dr-unsuspend, .hs-dr-asked, .hs-dr-erase { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 12px; border-top: 1px solid var(--hs-hairline); }
.hs-dr-unsuspend, .hs-dr-asked { padding-top: 0; border-top: none; }
.hs-dr-unsuspend .hs-btn-danger:hover { background: transparent; border-color: var(--hs-ink-muted); color: var(--hs-ink); }
.hs-cc-twostep { background: var(--hs-surface); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-card); padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.hs-cd-twostep-text { font-size: 13px; color: var(--hs-ink-body); margin: 0; }
.hs-cd-twostep-text strong { color: var(--hs-ink); font-weight: 600; }
.hs-dr-twostep { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 12px; border-top: 1px solid var(--hs-hairline); }
@media (max-width: 920px) {
  .hs-scrim { padding: 40px 16px 16px; }
  .hs-dialog-fields, .hs-form-preview { grid-template-columns: 1fr; }
  .hs-dialog-preview-head { grid-column: 1; }
}
@media (max-width: 640px) {
  .hs-scrim { padding: 12px; }
  .hs-dialog { padding: 18px 16px; gap: 12px; }
  .hs-dialog-confirm { margin-left: 0; }
  .hs-dialog-actions > button { flex: 1 1 auto; }
  .hs-dr-unsuspend, .hs-dr-asked, .hs-dr-erase, .hs-dr-twostep { flex-direction: column; align-items: flex-start; }
}
.hs-dialog-list { margin: 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--hs-ink-body); }
.hs-dialog-list-item::marker { color: var(--hs-ink-muted); }
/* the list's ranked form: each row carries its own rank number, its name over a grey line saying what pressing would do
   to it, green when it would start (Missed requests' Make the top ten) */
.hs-dialog-list--ranked { padding: 0; list-style: none; gap: 7px; }
.hs-dialog-list--ranked .hs-dialog-list-item { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 1px 8px; align-items: baseline; }
.hs-dialog-list-rank { font-family: var(--hs-font-mono); font-size: 11px; font-weight: 700; color: var(--hs-ink); }
.hs-dialog-list-name { font-size: 13px; font-weight: 600; color: var(--hs-ink); }
.hs-dialog-list-outcome { grid-column: 2; font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); }
.hs-dialog-list-outcome--starts { color: var(--hs-good); }
/* a confirm with nothing to do (Make the top ten when none of the ten would start) is drawn greyed, never pressable; a
   confirm held after its own press (send-once.js marks it) keeps its colour and turns the working ring instead —
   :where() leaves this rule's weight as it was, so the pages that redraw their confirm still win as before */
.hs-dialog-confirm:disabled:not(:where([data-send-once-pressed])) { background: var(--hs-surface-sunk); color: var(--hs-ink-muted); border: 1px solid var(--hs-hairline); cursor: default; }
.hs-dialog-confirm:disabled:hover { opacity: 1; }
body.has-window { overflow: hidden; }
.hs-scrim.hs-scrim--request { position: fixed; inset: 0; z-index: 30; background: var(--hs-scrim); display: flex; align-items: center; justify-content: center; padding: 24px; }
.hs-window { width: 100%; max-width: 980px; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; background: var(--hs-surface); border: 1px solid var(--hs-card-border); border-radius: var(--hs-r-card); box-shadow: var(--hs-lift); padding: 18px 24px 16px; display: flex; flex-direction: column; gap: 14px; }
.hs-window-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.hs-window-heading { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hs-window-kicker { font-family: var(--hs-font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.18em; color: var(--hs-amber-ink); }
.hs-window-title-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 14px; }
.hs-window-title { margin: 0; font-family: var(--hs-font-mono); font-size: 17px; font-weight: 600; color: var(--hs-ink); }
.hs-window-time { font-family: var(--hs-font-mono); font-size: 11px; color: var(--hs-ink-muted); }
.hs-window-close { width: 34px; height: 34px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid color-mix(in srgb, var(--hs-ink) 25%, transparent); background: transparent; border-radius: var(--hs-r-button); color: var(--hs-ink); cursor: pointer; }
.hs-window-close:hover { background: var(--hs-surface-sunk); border-color: var(--hs-ink); }
.hs-window-body { display: grid; grid-template-columns: 296px minmax(0, 1fr); gap: 24px; align-items: start; }
.hs-window-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hs-window-stage { background: var(--hs-surface-sunk); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-tile); padding: 8px; }
.hs-window-picture { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
.hs-window-facts { margin: 4px 0 0; display: flex; flex-direction: column; }
.hs-window-fact { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--hs-hairline); font-size: 12px; line-height: 1.4; }
.hs-window-fact dt { color: var(--hs-ink-muted); }
.hs-window-fact dd { margin: 0; color: var(--hs-ink); min-width: 0; }
.hs-window-fact dd.mono { font-family: var(--hs-font-mono); font-size: 11px; }
.hs-window-dot { display: inline-block; margin-right: 7px; vertical-align: 1px; }
.hs-window-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.hs-window-summary { margin: 0; font-size: 13px; line-height: 1.5; color: var(--hs-ink); }
.hs-window-options { width: 100%; border-collapse: collapse; }
.hs-window-options th, .hs-window-options td { text-align: left; padding: 5px 10px 5px 0; border-bottom: 1px solid var(--hs-hairline); font-size: 12px; vertical-align: top; }
.hs-window-options thead th { font-family: var(--hs-font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.12em; color: var(--hs-ink-muted); }
.hs-window-options tbody th { font-weight: 500; color: var(--hs-ink-muted); width: 88px; }
.hs-window-options td { color: var(--hs-ink); }
.hs-window-options td.is-differs { font-weight: 600; }
.hs-window-options td.is-unset { color: var(--hs-ink-muted); }
.hs-window-options tr.has-why > th, .hs-window-options tr.has-why > td { border-bottom: none; padding-bottom: 1px; }
.hs-window-options td.hs-window-why { padding: 0 10px 7px 98px; font-size: 11.5px; line-height: 1.45; color: var(--hs-ink-body); }
.hs-window-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--hs-hairline); vertical-align: -2px; margin-right: 6px; }
.hs-window-address { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--hs-hairline); padding-top: 12px; }
.hs-window-address-label { font-family: var(--hs-font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.12em; color: var(--hs-ink-muted); }
.hs-window-address-row { display: flex; align-items: flex-start; gap: 10px; }
.hs-window-address-value { flex: 1 1 auto; min-width: 0; font-family: var(--hs-font-mono); font-size: 11px; line-height: 1.55; color: var(--hs-ink-body); background: var(--hs-surface-sunk); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-field); padding: 7px 10px; overflow-wrap: anywhere; }
.hs-window-btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: var(--hs-r-button); border: 1px solid color-mix(in srgb, var(--hs-ink) 25%, transparent); background: transparent; color: var(--hs-ink); font-family: var(--hs-font-sans); font-size: 12.5px; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.hs-window-btn:hover { background: var(--hs-surface-sunk); border-color: var(--hs-ink); }
.hs-window-btn:focus-visible, .hs-window-close:focus-visible { outline: 2px solid var(--hs-amber); outline-offset: 2px; }
.hs-window-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hs-window-actions-note { margin-right: auto; font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); }
@media (max-height: 760px) { .hs-scrim { padding: 12px 24px; } }
@media (max-width: 900px) {
  .hs-scrim { padding: 10px; align-items: flex-start; }
  .hs-window { padding: 16px 16px 14px; }
  .hs-window-body { grid-template-columns: 1fr; }
  .hs-window-options tbody th { width: 76px; }
  .hs-window-options td.hs-window-why { padding-left: 0; }
  .hs-window-address-row { flex-direction: column; }
  .hs-window-actions-note { flex-basis: 100%; }
  .hs-window-btn { height: 40px; }
}

/* ---- links drawn as the designs' buttons: no script, so a control that only opens a window or pages a list is a link ---- */
a.hs-cx-th, a.hs-cx-paging-btn, a.hs-cd-paging-btn, a.hs-btn-primary, a.hs-btn-outline, a.hs-btn-danger,
a.hs-dialog-cancel, a.hs-btn, a.hs-door-button { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }

/* ---- the admin error page: an address with nothing behind it, or a value its page cannot read (Decision 291 (4)) ---- */
.hs-error {
  margin-top: 28px; max-width: 560px;
  background: var(--hs-surface); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-card);
  padding: 22px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
}
.hs-error-heading { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: var(--hs-ink); }
.hs-error-text { margin: 0 0 6px; font-size: 13.5px; line-height: 1.5; color: var(--hs-ink-body); }
a.hs-cx-th { justify-content: flex-start; }
a.hs-cx-th.is-num { justify-content: flex-end; }

/* ---- round two: the Costs, Complaints and Hold-back pages (costs__b*, complaints__b*, hold-back__b*) ----
   Copied from the approved designs' own block. The brand dialog rules are the customer detail's, above; the
   three class names the sign-in door and the customer detail already use (.hs-field, .hs-field-label,
   .hs-picture-disclaimer) are scoped to these three pages' content class. */
.hs-mono { font-family: var(--hs-font-mono); font-size: 0.92em; }
.hs-page-intro {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 18px;
  padding: 18px 0 14px; border-bottom: 1px solid var(--hs-hairline); margin-bottom: 18px;
}
.hs-page-lede { margin: 0; max-width: 760px; color: var(--hs-ink-body); }
.hs-card { background: var(--hs-surface); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-card); padding: 18px 20px; }
.hs-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px 18px; flex-wrap: wrap; margin-bottom: 10px; }
.hs-card-title { font-size: 13.5px; font-weight: 600; color: var(--hs-ink); margin: 0; }
.hs-card-note { margin: 0; font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); line-height: 1.55; }
.hs-card-note--gap { margin-bottom: 14px; }
/* An explanation of several sentences reads in the body face at a readable measure, never as a full-width grey mono
   wall; mono stays for labels and short notes (review r3 polish-09). */
.hs-card-note--prose, .mr-lead-note, .mr-lead-window-note, .mr-foot {
  font-family: var(--hs-font-sans); font-size: 12.5px; line-height: 1.5; color: var(--hs-ink-body); max-width: 70ch;
}
.hs-eyebrow { font-family: var(--hs-font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--hs-ink-muted); }
.hs-btn {
  font-family: var(--hs-font-sans); font-size: 12.5px; font-weight: 600; height: 34px; padding: 0 14px;
  border-radius: var(--hs-r-button); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.hs-btn--primary { background: var(--hs-action); color: var(--hs-on-action); border: 1px solid var(--hs-action); }
.hs-btn--primary:hover { opacity: 0.92; }
.hs-btn--outline { background: transparent; color: var(--hs-ink-body); border: 1px solid var(--hs-card-border); }
.hs-btn--outline:hover { border-color: var(--hs-ink); color: var(--hs-ink); }
.hs-btn--danger { color: var(--hs-bad); }
.hs-btn--danger:hover { border-color: var(--hs-bad); color: var(--hs-bad); }
.hs-btn--small { height: 30px; padding: 0 11px; font-size: 12px; }
.hs-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.hs-page-costs .hs-field, .hs-page-complaints .hs-field, .hs-page-hold-back .hs-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.hs-page-costs .hs-field-label, .hs-page-complaints .hs-field-label, .hs-page-hold-back .hs-field-label { font-family: var(--hs-font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-ink-muted); }
.hs-field-optional { font-weight: 400; letter-spacing: 0.04em; text-transform: none; }
.hs-input, .hs-textarea, .hs-select {
  font-family: var(--hs-font-sans); font-size: 13.5px; color: var(--hs-ink); width: 100%;
  background: var(--hs-surface-sunk); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-field); height: 36px; padding: 0 11px;
}
.hs-input::placeholder, .hs-textarea::placeholder { color: var(--hs-ink-muted); opacity: 1; }
.hs-input--mono { font-family: var(--hs-font-mono); font-size: 12px; }
.hs-textarea { height: auto; min-height: 92px; padding: 9px 11px; resize: vertical; line-height: 1.45; }
.hs-input:focus, .hs-textarea:focus, .hs-select:focus { outline: 2px solid var(--hs-amber); outline-offset: 1px; }
.hs-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.hs-table th {
  text-align: left; font-family: var(--hs-font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--hs-ink-muted); padding: 0 10px 9px 0; border-bottom: 1px solid var(--hs-hairline); white-space: nowrap;
}
.hs-table td { padding: 11px 10px 11px 0; border-bottom: 1px solid var(--hs-hairline); vertical-align: top; color: var(--hs-ink-body); }
.hs-table tbody tr:last-child td { border-bottom: none; }
.hs-table th.is-num, .hs-table td.is-num { text-align: right; padding-right: 0; padding-left: 10px; white-space: nowrap; }
.hs-table td.is-strong { color: var(--hs-ink); font-weight: 600; }
.hs-table tfoot td { border-top: 1px solid var(--hs-ink); border-bottom: none; font-weight: 600; color: var(--hs-ink); padding-top: 10px; }
.hs-table-sub { display: block; font-family: var(--hs-font-mono); font-size: 10px; font-weight: 400; color: var(--hs-ink-muted); margin-top: 2px; }
.hs-pill {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--hs-r-chip);
  font-family: var(--hs-font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid var(--hs-hairline); color: var(--hs-ink-muted); background: var(--hs-surface-sunk); white-space: nowrap;
}
.hs-pill--open { color: var(--hs-amber-ink); border-color: var(--hs-amber); background: transparent; }
.hs-pill--done { color: var(--hs-good); border-color: var(--hs-good); background: transparent; }
.hs-picture { display: flex; flex-direction: column; gap: 4px; width: 148px; flex-shrink: 0; }
.hs-picture-frame { background: var(--hs-surface-sunk); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-tile); padding: 6px; }
.hs-picture-img { display: block; width: 100%; height: auto; }
.hs-picture-caption { font-family: var(--hs-font-mono); font-size: 10px; color: var(--hs-ink-body); line-height: 1.45; }
.hs-page-costs .hs-picture-disclaimer, .hs-page-complaints .hs-picture-disclaimer, .hs-page-hold-back .hs-picture-disclaimer { font-family: var(--hs-font-mono); font-size: 9px; color: var(--hs-ink-muted); line-height: 1.35; }
.hs-picture-none { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 86px; font-family: var(--hs-font-mono); font-size: 10px; color: var(--hs-ink-muted); padding: 8px; }
.hs-empty { margin: 0; padding: 18px 0 6px; color: var(--hs-ink-muted); font-size: 13.5px; }
.hs-input.is-invalid, .hs-textarea.is-invalid, .hs-select.is-invalid { border-color: var(--hs-bad); }
.hs-dialog-subject-quote { font-family: var(--hs-font-sans); font-size: 13px; color: var(--hs-ink-body); }
.hs-dialog-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cmp-dialog-picture { display: flex; gap: 14px; align-items: flex-start; }
.cmp-dialog-picture .hs-picture-frame { width: 148px; flex-shrink: 0; }
.cmp-dialog-picture-text { display: flex; flex-direction: column; gap: 4px; }
.cmp-dialog-picture-name { font-size: 13.5px; font-weight: 600; color: var(--hs-ink); }

/* ---- Complaints ---- */
.cmp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; margin-bottom: 16px; }
.cmp-rows { display: flex; flex-direction: column; }
.cmp-row { display: flex; gap: 18px; padding: 16px 0; border-top: 1px solid var(--hs-hairline); }
.cmp-row-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex-grow: 1; }
.cmp-row-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cmp-row-when { font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); }
.cmp-row-reason { margin: 0; font-size: 14px; color: var(--hs-ink); line-height: 1.5; }
.cmp-row-who { margin: 0; font-family: var(--hs-font-mono); font-size: 11px; color: var(--hs-ink-muted); }
/* A complaint sent from the support page (Decision 336): the address its sender pasted wraps anywhere, never widens the row. */
.cmp-row-address { overflow-wrap: anywhere; }
.cmp-row-outcome { margin: 0; font-family: var(--hs-font-mono); font-size: 11px; color: var(--hs-good); }
.cmp-row-hint { margin: 0; font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-amber-ink); }
.cmp-row-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 2px; }
.cmp-row-waiting { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cmp-row--resolved .hs-picture-frame { opacity: 0.85; }
.cmp-form { display: flex; flex-direction: column; gap: 12px; }
.cmp-log .hs-btn { align-self: flex-start; }
.dnm-rows { display: flex; flex-direction: column; }
.dnm-row { display: flex; gap: 18px; justify-content: space-between; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--hs-hairline); }
.dnm-row-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dnm-row-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dnm-row-vehicle { font-size: 14px; font-weight: 600; color: var(--hs-ink); }
.dnm-row-asset { font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); }
.dnm-row-reason { margin: 0; font-size: 13.5px; color: var(--hs-ink-body); }
.dnm-row-meta { margin: 0; font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); }
.dnm-row-lifted { margin: 0; font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-body); padding: 8px 10px; background: var(--hs-surface-sunk); border-radius: var(--hs-r-field); border-left: 2px solid var(--hs-ink-muted); }
.dnm-row--lifted .dnm-row-vehicle, .dnm-row--lifted .dnm-row-reason { color: var(--hs-ink-muted); }
.dnm-row-actions { flex-shrink: 0; }

/* ---- Costs ---- */
.costs-controls { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; padding: 18px 0 14px; border-bottom: 1px solid var(--hs-hairline); margin-bottom: 16px; }
.costs-range, .costs-export { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.costs-field { display: flex; flex-direction: column; gap: 5px; }
.costs-field .hs-input { width: 156px; }
.costs-field .hs-select { width: 176px; }
.costs-lead { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px 32px; align-items: stretch; margin-bottom: 16px; }
.costs-lead-main { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.costs-lead-value { font-size: 52px; font-weight: 700; letter-spacing: -0.045em; line-height: 1; color: var(--hs-ink); }
.costs-lead-support { font-family: var(--hs-font-mono); font-size: 11px; color: var(--hs-ink-muted); line-height: 1.55; max-width: 440px; }
.costs-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-content: center; }
.costs-stat { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: var(--hs-surface-sunk); border-radius: var(--hs-r-tile); }
.costs-stat-value { font-size: 22px; font-weight: 600; letter-spacing: -0.03em; color: var(--hs-ink); }
.costs-stack { display: flex; flex-direction: column; gap: 16px; }
.costs-two { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.costs-chart { display: flex; flex-direction: column; gap: 8px; }
.costs-chart-plot { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 6px; align-items: stretch; }
.costs-chart-svg { display: block; width: 100%; height: auto; }
/* Cost per customer: the period's own lines sit under the customers, set off by one rule (costs__b). */
.hs-table tbody.own-lines { border-top: 1px solid var(--hs-line); }
.hs-table tbody.own-lines td { border-bottom: none; padding-top: 7px; padding-bottom: 7px; }
.hs-table tbody.own-lines tr:first-child td { padding-top: 11px; }
/* The trend's line and its weekly points, in the brand amber token (the template names no colour of its own). */
.costs-chart-line { stroke: var(--hs-amber); }
.costs-chart-point { fill: var(--hs-amber); }
.costs-chart-axis { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); padding-left: 50px; font-family: var(--hs-font-mono); font-size: 9.5px; color: var(--hs-ink-muted); text-align: center; }
.costs-chart-scale { display: flex; flex-direction: column; justify-content: space-between; padding: 2px 0 6px; font-family: var(--hs-font-mono); font-size: 9.5px; color: var(--hs-ink-muted); text-align: right; }
.costs-chart-empty { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-height: 172px; padding: 0 4px; border: 1px dashed var(--hs-line); border-radius: var(--hs-r-tile); }
.costs-chart-empty-title { font-size: 14px; font-weight: 600; color: var(--hs-ink); margin: 0; }
.costs-waste { display: flex; flex-direction: column; justify-content: flex-start; gap: 8px; }
.costs-waste .hs-card-title { margin-bottom: 4px; }
.hs-table td.is-rank { width: 40px; color: var(--hs-ink-muted); font-family: var(--hs-font-mono); font-size: 11px; padding-top: 13px; }
.costs-waste-value { font-size: 40px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--hs-ink); }
.costs-profit-neg { color: var(--hs-bad); }

/* ---- Hold-back rule ---- */
.hb-switch { display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; margin-bottom: 16px; }
.hb-switch-text { display: flex; flex-direction: column; gap: 6px; max-width: 720px; }
.hb-switch-state { margin: 0; font-size: 13.5px; color: var(--hs-ink-body); }
.hb-toggle {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer; background: transparent; border: none; padding: 0;
  font-family: var(--hs-font-sans); font-size: 13px; font-weight: 600; color: var(--hs-ink);
}
/* the switch opens its confirming window first, so it is a link drawn as the switch (Decision 299 (3)) */
a.hb-toggle { text-decoration: none; }
.hb-toggle-track { position: relative; width: 52px; height: 30px; border-radius: 15px; background: var(--hs-ground-deep); border: 1px solid var(--hs-hairline); flex-shrink: 0; }
html[data-theme="dark"] .hb-toggle-track { background: var(--hs-ground-lit); }
.hb-toggle-knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 11px; background: var(--hs-surface); box-shadow: 0 1px 2px rgba(26,25,23,0.25); }
.hb-toggle.is-on .hb-toggle-track { background: var(--hs-amber); border-color: var(--hs-amber); }
.hb-toggle.is-on .hb-toggle-knob { left: 25px; }
.hb-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.hb-rows { display: flex; flex-direction: column; }
.hb-row { display: flex; gap: 18px; justify-content: space-between; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--hs-hairline); }
.hb-row-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hb-row-match { display: flex; flex-wrap: wrap; gap: 6px; }
.hb-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: var(--hs-r-chip);
  background: var(--hs-surface-sunk); border: 1px solid var(--hs-hairline);
  font-family: var(--hs-font-mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hs-ink-muted);
}
.hb-chip-value { color: var(--hs-ink); font-weight: 600; font-size: 10.5px; letter-spacing: 0; text-transform: none; }
.hb-chip-value.is-any { color: var(--hs-ink-muted); font-weight: 400; }
.cmp-dialog-picture { margin: 0; }
.hb-row-note { margin: 0; font-size: 13.5px; color: var(--hs-ink); }
.hb-row-meta { margin: 0; font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); }
.hb-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.hb-row--off .hb-row-main { opacity: 0.55; }
.hb-form { display: flex; flex-direction: column; gap: 12px; }
.hb-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.hb-add .hs-btn { align-self: flex-start; }

@media (max-width: 1100px) {
  .cmp-layout, .hb-layout, .costs-lead, .costs-two { grid-template-columns: 1fr; }
  .cmp-log { order: -1; }
}
@media (max-width: 640px) {
  .cmp-row { flex-direction: column; gap: 12px; }
  .hs-picture { width: 100%; max-width: 240px; }
  .dnm-row, .hb-row { flex-direction: column; }
  .hb-row-side { align-items: flex-start; flex-direction: row; }
  .costs-stats { grid-template-columns: 1fr; }
  .costs-lead-value { font-size: 40px; }
  .costs-field .hs-input, .costs-field .hs-select { width: 100%; }
  .costs-range, .costs-export { width: 100%; }
  .hb-form-grid { grid-template-columns: 1fr; }
  .hs-scrim { padding: 12px; }
  .hs-dialog { padding: 18px 16px; gap: 12px; }
  .hs-dialog-confirm { margin-left: 0; }
  .hs-dialog-actions > button { flex: 1 1 auto; }
  .cmp-dialog-picture { flex-direction: column; }
  /* a five-column table cannot fit 350px; on a phone it scrolls sideways inside its card, the card itself never wider than the screen */
  .hs-table { font-size: 12px; display: block; overflow-x: auto; max-width: 100%; }
  /* a soft shade on the edge that has more columns past it (visual polish review round 6, advisory 2): the two
     card-coloured covers scroll with the columns and hide the fixed shades whenever that edge is reached, so a table
     that fits shows no shade at all and the sideways scroll itself is unchanged */
  .hs-table {
    background:
      linear-gradient(to right, var(--hs-surface) 40%, transparent) left center / 32px 100% no-repeat local,
      linear-gradient(to left, var(--hs-surface) 40%, transparent) right center / 32px 100% no-repeat local,
      linear-gradient(to right, rgba(22, 21, 15, 0.18), transparent) left center / 14px 100% no-repeat scroll,
      linear-gradient(to left, rgba(22, 21, 15, 0.18), transparent) right center / 14px 100% no-repeat scroll;
    background-color: var(--hs-surface);
  }
  .costs-chart-axis { padding-left: 0; }
  .costs-chart-plot { grid-template-columns: 1fr; }
  .costs-chart-scale { flex-direction: row; justify-content: space-between; text-align: left; padding: 0; }
}

/* aesthetic-01 — the trend chart's scale stays a COLUMN at phone width. Laid out as a row it
   read as "$0.50 … $0.30" left to right over a line that also runs left to right — the range
   from the first week to the last, which is the opposite of what the two labels mean. They are
   the top and the bottom of the vertical scale, so at every width they sit at the plot's left
   edge, one above the other. */
@media (max-width: 640px) {
  .costs-chart-plot { grid-template-columns: 34px minmax(0, 1fr); gap: 0 4px; }
  .costs-chart-scale { flex-direction: column; justify-content: space-between; text-align: right; padding: 2px 0 6px; }
  /* the week labels never break "10 Aug" across two lines — a wrapped date pushed its figure
     onto a third row and the eight columns stopped reading as a grid */
  .costs-chart-axis { padding-left: 38px; font-size: 9px; column-gap: 2px; }
  .costs-chart-week { white-space: nowrap; }
}

/* polish-01 — the by-step table's first column was squeezed to about 60 px at phone width, so a
   step name wrapped to three lines and its description to six. The column keeps a readable
   minimum and the card scrolls sideways a little further instead. */
@media (max-width: 640px) {
  .step-row > td:first-child { min-width: 152px; }
}

/* polish-03 — the hold-back switch was the one control on the page with no hover state. */
.hb-toggle:hover .hb-toggle-track { border-color: var(--hs-ink-muted); }
.hb-toggle:hover .hb-toggle-knob { box-shadow: 0 2px 5px rgba(26, 25, 23, 0.38); }
.hb-toggle:focus-visible { outline: none; }
.hb-toggle:focus-visible .hb-toggle-track { outline: 2px solid var(--hs-amber); outline-offset: 2px; }

/* aesthetic-02 — every complaint row carried about 110 px of empty ground under its text, because
   the caption stack under the thumbnail was taller than the text beside it. The caption, the
   identifier and the disclaimer now sit BESIDE the thumbnail instead of under it, so the picture
   cell is the height of the thumbnail and the row is the height of its text. */
.cmp-row .hs-picture {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  /* the identifier row takes the slack the thumbnail leaves, so the caption and the identifier
     read as one stack at the top instead of drifting apart down the thumbnail height */
  grid-template-rows: auto 1fr auto;
  column-gap: 12px; row-gap: 3px;
  align-content: start;
  width: 290px;
}
.cmp-row .hs-picture-frame { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
/* the caption and the identifier hug the top of the block, beside the thumbnail, instead of
   spreading down the height the thumbnail sets */
.cmp-row .hs-picture-caption { align-self: start; }
/* the disclaimer runs under the whole picture block, so it reads as two calm lines rather than
   five in a narrow column — and at 9.5 px it matches the Library page, not the smallest type in
   the cluster */
.cmp-row .hs-picture-disclaimer { grid-column: 1 / span 2; font-size: 9.5px; }
@media (max-width: 640px) {
  /* on a phone the cell is one column again — a 148-px thumbnail beside a 90-px text column
     would wrap the disclaimer to six lines */
  /* stacked as a plain column: as a one-column grid, the disclaimer's two-column span made a second, implicit
     column, and the caption took it — the thumbnail shrank to a dot and the identifier wrapped a few characters
     wide (review round 3, admin renders item 1) */
  .cmp-row .hs-picture { display: flex; flex-direction: column; gap: 4px; width: 100%; max-width: 240px; }
  .cmp-row .hs-picture-frame { width: 100%; }
}
@media (max-width: 640px) { .hs-btn, .hb-toggle, .hs-input, .hs-select { min-height: 44px; } }
/* R8 — with the colour field gone, the body style takes the whole row so the two years stay side by side */
.hb-form-grid .hb-field--full { grid-column: 1 / -1; }

/* ---- the Library, Generation and Missed requests pages (admin-library-generation-missed/*) ----
   Copied from the approved designs. Their content area carries no padding of its own: each page body pads itself. */
.hs-content.hs-page-missed, .hs-content.hs-page-library, .hs-content.hs-page-library-detail, .hs-content.hs-page-generation { flex-grow: 1; display: flex; flex-direction: column; padding: 0; }
/* ---- missed-requests__b.html ---- */

/* ---- missed requests: what customers asked for and did not get, most-asked first ---- */
.mr-body { padding: 22px 28px 30px; display: flex; flex-direction: column; gap: 22px; }
.mr-lead {
  background: var(--hs-surface); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-card);
  padding: 16px 18px; display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center;
}
.mr-lead-text { display: flex; flex-direction: column; gap: 3px; min-width: 220px; flex-grow: 1; }
.mr-lead-title { font-size: 15px; font-weight: 600; color: var(--hs-ink); }
.mr-top-ten-btn {
  font-family: var(--hs-font-sans); font-size: 12.5px; font-weight: 600; color: var(--hs-on-action);
  background: var(--hs-action); border: none; border-radius: 7px; height: 36px; padding: 0 16px; cursor: pointer;
}
/* With nothing to make, the lead keeps the populated layout — the button on its own line under the
   text, not moved to the right — and the button is drawn disabled (missed-requests__b-empty, its own block). */
.mr-lead--empty { flex-direction: column; align-items: flex-start; }
.mr-top-ten-btn:disabled {
  background: var(--hs-surface-sunk); color: var(--hs-ink-muted);
  border: 1px solid var(--hs-hairline); cursor: default;
}
.mr-section-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.mr-section-title { font-size: 16px; font-weight: 600; color: var(--hs-ink); margin: 0; }
.mr-section-count { font-family: var(--hs-font-mono); font-size: 11px; color: var(--hs-ink-muted); }
.mr-section-note { font-family: var(--hs-font-mono); font-size: 10px; color: var(--hs-ink-muted); margin-left: auto; }

/* One shared set of column tracks, declared once on the body and inherited by the heading row and
   the row cards alike, with no track sized by its own content — the last track used to be
   minmax(240px, auto), which sized to each row's own three buttons and left the headings sitting
   25-49 px right of their columns at 1,440. The heading row carries a transparent border to match
   the card's, so the two boxes measure identically. */
.mr-body { --mr-cols: 36px minmax(170px, 1.4fr) 100px minmax(170px, 1.2fr) 128px minmax(288px, 1fr); }
.mr-head, .mr-row {
  display: grid;
  grid-template-columns: var(--mr-cols);
  gap: 14px; align-items: center; padding: 11px 16px;
  border: 1px solid transparent;
}
.mr-head { padding-top: 0; padding-bottom: 6px; }
.mr-th { font-family: var(--hs-font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-ink-muted); }
.mr-rows { display: flex; flex-direction: column; gap: 8px; }
.mr-row { background: var(--hs-surface); border-color: var(--hs-hairline); border-radius: var(--hs-r-tile); }
.mr-rank { font-family: var(--hs-font-mono); font-size: 15px; font-weight: 700; color: var(--hs-ink); }
.mr-vehicle-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mr-vehicle { font-size: 14px; font-weight: 600; color: var(--hs-ink); overflow-wrap: anywhere; }
.mr-chip {
  font-family: var(--hs-font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: var(--hs-r-chip); padding: 3px 7px; border: 1px solid var(--hs-hairline);
  /* on the card's own surface, not the sunk fill: the green reads at 4.96:1 there, 4.47:1 on the sunk fill */
  color: var(--hs-ink-muted); background: var(--hs-surface); align-self: flex-start;
}
.mr-chip--known { color: var(--hs-good); border-color: var(--hs-good); }
.mr-chip--unknown { color: var(--hs-amber-ink); border-color: var(--hs-amber); }
.mr-count-cell { display: flex; flex-direction: column; gap: 2px; }
.mr-count { font-family: var(--hs-font-mono); font-size: 16px; font-weight: 700; color: var(--hs-ink); }
.mr-count-sub { font-family: var(--hs-font-mono); font-size: 9.5px; color: var(--hs-ink-muted); }
.mr-accounts { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mr-account-links { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.mr-account-link { font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-amber-ink); text-decoration: none; border-bottom: 1px solid var(--hs-hairline); }
.mr-account-link:hover { color: var(--hs-ink); border-color: var(--hs-ink-muted); }
.mr-expired { font-family: var(--hs-font-mono); font-size: 10px; color: var(--hs-ink-muted); }
.mr-seen { display: flex; flex-direction: column; gap: 2px; font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); }
.mr-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.mr-btn-make {
  font-family: var(--hs-font-sans); font-size: 12px; font-weight: 600; color: var(--hs-on-action);
  background: var(--hs-action); border: none; border-radius: 7px; height: 32px; padding: 0 12px; cursor: pointer;
}
.mr-btn-secondary {
  font-family: var(--hs-font-sans); font-size: 12px; font-weight: 600; color: var(--hs-ink);
  background: transparent; border: 1px solid var(--hs-hairline); border-radius: 7px; height: 32px; padding: 0 11px; cursor: pointer;
}
.mr-btn-secondary:hover { border-color: var(--hs-ink-muted); }
.mr-btn-never {
  font-family: var(--hs-font-sans); font-size: 12px; font-weight: 600; color: var(--hs-bad);
  background: transparent; border: 1px solid var(--hs-bad); border-radius: 7px; height: 32px; padding: 0 11px; cursor: pointer;
}
.mr-foot { margin: 12px 0 0; }
.mr-empty {
  background: var(--hs-surface); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-card);
  padding: 30px 18px; text-align: center; font-size: 14px; color: var(--hs-ink-body);
}
.mr-empty-hint { display: block; font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); margin-top: 6px; }

/* The six tracks' floors (36 + 170 + 100 + 170 + 128 + 288), their five 14 px gaps and the card's 32 px of padding
   need 994 px; with the body's 56 px of padding and the 224 px side rail that is a 1,274 px window. At 1,180 the
   cards kept six columns in a narrower window, so from 1,181 to 1,273 every card ran past the page's right edge and
   each row's "What the N asks got" reasons were cut off (owner, 2026-10-03). The cards stack below 1,280. */
@media (max-width: 1279px) {
  /* the column headings become a key strip above the stacked cards — never hidden, and drawn as a
     band so it reads as what each card below lists instead of floating over nothing */
  .mr-head {
    display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 8px 14px;
    background: var(--hs-surface-sunk); border: 1px solid var(--hs-hairline);
    border-radius: var(--hs-r-field); margin-bottom: 8px;
  }
  .mr-row { grid-template-columns: 34px minmax(160px, 1fr) 110px; }
  .mr-accounts, .mr-seen { grid-column: 2 / -1; }
  .mr-actions { grid-column: 1 / -1; }
}
@media (max-width: 920px) {
  .mr-body { padding: 18px 20px 26px; }
  .mr-row { grid-template-columns: 34px minmax(0, 1fr); }
  .mr-count-cell { grid-column: 2 / -1; }
  /* a single-column card names each figure in place ("asks that missed", "6 accounts asked"), so the desktop
     column headings would only wrap into a strip of labels pointing at nothing (review round 3, item 3) */
  .mr-head { display: none; }
}

@media (max-width: 920px) {
  /* thumb-sized hit areas at phone width; every desktop size is unchanged */
  .hs-signout-btn, .hs-nav-link,
  .gen-btn-approve, .gen-btn-secondary, .gen-btn-never, .gen-pause-btn, .gen-run-now-btn,
  .gen-save-btn, .gen-state-btn, .gen-state-dismiss, .gen-field-input,
  .lib-search-btn, .lib-clear-btn, .lib-mini-btn, .lib-open, .lib-input, .lib-select,
  .det-btn-primary, .det-btn-secondary, .det-btn-danger,
  .mr-btn-make, .mr-btn-secondary, .mr-btn-never, .mr-top-ten-btn,
  .hs-dialog-cancel, .hs-dialog-confirm, .hs-picker-choose, .hs-dialog-input, .hs-dialog-textarea,
  .gcx-tick, .gcx-select-all { min-height: 44px; }
  /* the mono links get the same target; their underline moves onto the text so it stays with the words */
  .gen-viewer-close, .det-crumb, .mr-account-link, .gcx-card-links a {
    display: inline-flex; align-items: center; min-height: 44px;
    border-bottom: none; text-decoration: underline; text-underline-offset: 3px;
  }
  /* "+ 1 more" takes the account links' 44-px line, so it sits on their baseline, not above it (item 3) */
  .mr-account-links { align-items: center; }
  .mr-account-links .mr-more > summary { display: inline-flex; align-items: center; min-height: 44px; }
}

/* R8 — the list's pager, the admin's own (as on the Library and the customer detail) */
.mr-paging { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 12px; }
.mr-paging-count { font-family: var(--hs-font-mono); font-size: 11px; color: var(--hs-ink-muted); margin-right: auto; }
.mr-paging-page { font-family: var(--hs-font-mono); font-size: 11px; color: var(--hs-ink-muted); }
.mr-paging-btn { font-family: var(--hs-font-sans); font-size: 12.5px; color: var(--hs-ink-body); background: var(--hs-surface); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-field); height: 30px; padding: 0 13px; cursor: pointer; }
.mr-paging-btn:hover:not(:disabled) { color: var(--hs-ink); border-color: var(--hs-ink-muted); }
.mr-paging-btn:disabled { color: var(--hs-ink-muted); cursor: default; opacity: 0.55; }
@media (max-width: 920px) {
  .mr-paging-btn { min-height: 44px; }
  .mr-paging-count { width: 100%; margin-right: 0; }
}

/* R9 — each missed vehicle names its kind, and the list narrows to one kind (Decision 244) */
.mr-kind { color: var(--hs-ink); font-weight: 600; }
.mr-filter { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; }
.mr-filter-field { display: flex; flex-direction: column; gap: 4px; }
.mr-filter-label { font-family: var(--hs-font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-ink-muted); }
.mr-filter-select { font-family: var(--hs-font-sans); font-size: 13px; color: var(--hs-ink); background: var(--hs-surface-sunk); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-field); height: 34px; padding: 0 10px; min-width: 190px; }
/* Apply is the filled dark button on every admin filter row — All requests, Customers, a customer's requests, the
   Library's find box and master list — so the same word always looks the same (review r3 polish-R4) */
.mr-filter-btn { font-family: var(--hs-font-sans); font-size: 12.5px; font-weight: 600; color: var(--hs-on-action); background: var(--hs-action); border: none; border-radius: 7px; height: 34px; padding: 0 16px; cursor: pointer; }
.mr-filter-btn:hover { opacity: 0.92; }
@media (max-width: 920px) {
  .mr-filter-select, .mr-filter-btn { min-height: 44px; }
}
a.mr-btn-make, a.mr-btn-secondary, a.mr-btn-never { text-decoration: none; display: inline-flex; align-items: center; }

/* Usability pass (2026-09-30) — Make one and Make the top ten open a window naming what will start before anything
   is made or spent; the lead says so. Both windows are drawn with the shared hs-dialog parts. */
a.mr-top-ten-btn { text-decoration: none; display: inline-flex; align-items: center; }

/* ---- library__b.html — the Library list (copied from the approved design; its phone-width hit areas and scrollbars are above) ---- */
/* ---- library: find a vehicle, then read what we hold of it ---- */
.lib-body { padding: 22px 28px 30px; display: flex; flex-direction: column; gap: 26px; }
.lib-section-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.lib-section-title { font-size: 16px; font-weight: 600; color: var(--hs-ink); margin: 0; }
.lib-section-count { font-family: var(--hs-font-mono); font-size: 11px; color: var(--hs-ink-muted); }
.lib-section-note { font-family: var(--hs-font-mono); font-size: 10px; color: var(--hs-ink-muted); margin-left: auto; }

.lib-search {
  background: var(--hs-surface); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-card);
  padding: 16px 18px; display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-end;
}
.lib-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lib-field--wide { flex-grow: 1; min-width: 210px; }
.lib-label { font-family: var(--hs-font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-ink-muted); }
.lib-input, .lib-select {
  font-family: var(--hs-font-sans); font-size: 13px; color: var(--hs-ink);
  background: var(--hs-surface-sunk); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-field);
  height: 34px; padding: 0 10px; min-width: 132px;
}
.lib-input::placeholder { color: var(--hs-ink-muted); }
.lib-search-btn {
  font-family: var(--hs-font-sans); font-size: 12.5px; font-weight: 600; color: var(--hs-on-action);
  background: var(--hs-action); border: none; border-radius: 7px; height: 34px; padding: 0 16px; cursor: pointer;
}
/* Apply dims under the mouse like every other filter row's Apply (.mr-filter-btn) — review r4 polish-01 */
.lib-search-btn:hover { opacity: 0.92; }
.lib-clear-btn {
  font-family: var(--hs-font-sans); font-size: 12.5px; font-weight: 600; color: var(--hs-ink);
  background: transparent; border: 1px solid var(--hs-hairline); border-radius: 7px; height: 34px; padding: 0 13px; cursor: pointer;
}
.lib-clear-btn:hover { border-color: var(--hs-ink-muted); }

/* preview any vehicle (Decision 319 (c), library__b-preview-any-vehicle): the find card's own look, one card */
.lib-preview { background: var(--hs-surface); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-card); padding: 16px 18px; }
.lib-preview .lib-section-head { margin-bottom: 10px; }
.lib-preview-form { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-end; }
/* the six fields share one line at desktop width, as the design draws them: the body-style list's longest names
   ("three-wheeler with two front wheels") would otherwise widen its closed field past the line */
.lib-preview-form .lib-select { max-width: 200px; }
.lib-preview-form .lib-field--wide { min-width: 170px; }
/* Preview is an outline button at the end of its own row, so Search stays the screen's one primary (review r3 polish-14) */
.lib-preview-actions { display: flex; }
.lib-preview-result { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 18px; align-items: center; }
.lib-preview-frame { border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-tile); background: var(--hs-surface-sunk); overflow: hidden; }
.lib-preview-img { display: block; width: 100%; height: auto; }
.lib-preview-facts { display: flex; flex-direction: column; gap: 6px; font-family: var(--hs-font-mono); font-size: 11px; color: var(--hs-ink-muted); }
.lib-preview-facts b { color: var(--hs-ink); font-weight: 600; }
/* every result line wraps inside the card at a phone's width: between words, and inside a long identifier only where it
   must (FX3-B's 390 measurement; never mid-word otherwise, as FX3-B's title rule asks) */
.lib-preview-facts, .lib-preview-facts span { min-width: 0; overflow-wrap: break-word; }
@media (max-width: 920px) {
  .lib-preview-result { grid-template-columns: minmax(0, 1fr); }
  .lib-preview-form .lib-field, .lib-preview-form .lib-field--wide { min-width: 0; flex: 1 1 140px; }
  .lib-preview-form .lib-input, .lib-preview-form .lib-select { min-width: 0; width: 100%; max-width: none; }
}
/* the find box's title, drawn as the preview card's (Decision 327 item 2): a line of its own above the fields */
.lib-search-head { flex-basis: 100%; margin-bottom: -4px; }
/* the Try page's make-and-model picker inside the find box and the preview card (Decision 327 item 1): the picker
   draws itself from vehicle-picker.css; here it only sits as one of the form's fields — its list free to open over
   the card, its label in the admin fields' own small capitals, its field the admin fields' height at desktop width */
.lib-picker.hs-vp { overflow: visible; min-width: 240px; }
.lib-picker.hs-vp .hs-picker { gap: 4px; }
/* the picker's label takes the selects' labels' line height, so all the row's labels share one baseline (review r3 polish-13) */
.lib-picker.hs-vp .hs-picker-label { font-family: var(--hs-font-mono); font-size: 9px; font-weight: 600; line-height: inherit; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-ink-muted); }
.lib-picker.hs-vp .hs-picker-list { z-index: 40; }
.lib-picker.hs-vp .tryTypedSplit { margin-top: 8px; }
@media (min-width: 941px) { .lib-picker.hs-vp .hs-picker-field { height: 34px; } }
@media (max-width: 920px) { .lib-picker.hs-vp { min-width: 0; flex: 1 1 100%; } }

.lib-rows { display: flex; flex-direction: column; gap: 10px; }
.lib-row {
  background: var(--hs-surface); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-tile);
  /* the state column holds three of the longest chip ("FRONT WITHDRAWN") on one line */
  padding: 12px 16px; display: grid; grid-template-columns: 116px minmax(200px, 1.4fr) minmax(360px, 1fr) minmax(150px, auto);
  gap: 16px; align-items: center;
}
/* A vehicle with no front ¾ picture yet keeps the thumbnail's box (the design's 116 × 78) instead of collapsing to a line. */
.lib-thumb { display: block; min-height: 78px; border-radius: 9px; overflow: hidden; border: 1px solid var(--hs-hairline); background: var(--hs-surface-sunk); }
.lib-thumb:hover { border-color: var(--hs-amber); }
.lib-thumb-img { display: block; width: 100%; height: auto; }
.lib-row-facts { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lib-vehicle { font-size: 14px; font-weight: 600; color: var(--hs-ink); }
.lib-meta { font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); }
.lib-row-views { display: flex; flex-wrap: wrap; gap: 6px; }
.lib-chip {
  font-family: var(--hs-font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: var(--hs-r-chip); padding: 4px 8px; border: 1px solid var(--hs-hairline); color: var(--hs-ink-muted);
  /* on the card's own surface, not the sunk fill: the green reads at 4.96:1 there, 4.47:1 on the sunk fill */
  background: var(--hs-surface); white-space: nowrap;
}
.lib-chip--ready { color: var(--hs-good); border-color: var(--hs-good); }
.lib-chip--making { color: var(--hs-amber-ink); border-color: var(--hs-amber); }
.lib-chip--withdrawn { color: var(--hs-bad); border-color: var(--hs-bad); }
.lib-row-end { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.lib-status { font-family: var(--hs-font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--hs-ink-muted); }
.lib-status--ready { color: var(--hs-good); }
.lib-status--making { color: var(--hs-amber-ink); }
.lib-status--withdrawn { color: var(--hs-bad); }
.lib-open {
  font-family: var(--hs-font-sans); font-size: 12.5px; font-weight: 600; color: var(--hs-ink);
  background: transparent; border: 1px solid var(--hs-hairline); border-radius: 7px;
  height: 32px; padding: 0 13px; display: inline-flex; align-items: center; text-decoration: none;
}
.lib-open:hover { border-color: var(--hs-ink-muted); }
.lib-disclaimer { font-family: var(--hs-font-mono); font-size: 9.5px; color: var(--hs-ink-muted); margin: 10px 0 0; }

.lib-empty {
  background: var(--hs-surface); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-card);
  padding: 26px 18px; text-align: center; font-size: 14px; color: var(--hs-ink-body);
}
.lib-empty-hint { display: block; font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); margin-top: 6px; }

/* the two reference blocks this screen also carries: named colours, and the make-and-model roster */
.lib-panel {
  background: var(--hs-surface); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-card);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 2px;
}
.lib-thead, .lib-trow {
  display: grid; grid-template-columns: minmax(150px, 1.5fr) 170px minmax(120px, 1fr);
  gap: 12px; align-items: center; padding: 8px 2px;
}
.lib-thead { border-bottom: 1px solid var(--hs-hairline); padding-top: 0; }
.lib-trow { border-bottom: 1px solid var(--hs-hairline); }
.lib-trow:last-child { border-bottom: none; }
.lib-th { font-family: var(--hs-font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-ink-muted); }
.lib-td { font-size: 12.5px; color: var(--hs-ink-body); min-width: 0; }
.lib-td--name { font-weight: 600; color: var(--hs-ink); }
.lib-code { font-family: var(--hs-font-mono); font-size: 11.5px; color: var(--hs-ink); letter-spacing: 0.06em; }
.lib-alt { font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); }
.lib-yes { font-family: var(--hs-font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hs-good); }
.lib-no { font-family: var(--hs-font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hs-ink-muted); }
.lib-mini-btn {
  font-family: var(--hs-font-sans); font-size: 11.5px; font-weight: 600; color: var(--hs-ink);
  background: transparent; border: 1px solid var(--hs-hairline); border-radius: 6px; height: 28px; padding: 0 10px; cursor: pointer;
}
.lib-mini-btn:hover { border-color: var(--hs-ink-muted); }
.lib-panel-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--hs-hairline); }
.lib-panel-note { font-family: var(--hs-font-mono); font-size: 10px; color: var(--hs-ink-muted); }
.lib-roster-thead, .lib-roster-trow {
  display: grid; grid-template-columns: minmax(130px, 1fr) minmax(130px, 1fr) minmax(170px, 1.4fr) 96px 90px 84px;
  gap: 12px; align-items: center; padding: 8px 2px;
}
.lib-roster-thead { border-bottom: 1px solid var(--hs-hairline); padding-top: 0; }
.lib-roster-trow { border-bottom: 1px solid var(--hs-hairline); }
.lib-roster-trow:last-child { border-bottom: none; }

@media (max-width: 1180px) {
  .lib-row { grid-template-columns: 96px minmax(160px, 1fr) minmax(200px, 1fr); }
  .lib-row-end { grid-column: 2 / -1; flex-direction: row; align-items: center; gap: 12px; }
}
@media (max-width: 920px) {
  .lib-body { padding: 18px 20px 26px; }
  .lib-row { grid-template-columns: 88px minmax(0, 1fr); }
  .lib-row-views { grid-column: 1 / -1; }
  .lib-row-end { grid-column: 1 / -1; }
  /* on a phone the column headings become a key strip above the stacked rows — never hidden, and
     drawn as a band so it reads as what each row below lists instead of floating over nothing */
  .lib-thead, .lib-roster-thead {
    display: flex; flex-wrap: wrap; gap: 4px 14px;
    background: var(--hs-surface-sunk); border: 1px solid var(--hs-hairline);
    border-radius: var(--hs-r-field); padding: 8px 10px; margin-bottom: 8px;
  }
  .lib-trow, .lib-roster-trow { grid-template-columns: 1fr 1fr; gap: 6px 12px; }
}

/* R8 — the list's pager, the admin's own (as on the customer detail) */
.lib-paging { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 12px; }
.lib-paging-count { font-family: var(--hs-font-mono); font-size: 11px; color: var(--hs-ink-muted); margin-right: auto; }
.lib-paging-page { font-family: var(--hs-font-mono); font-size: 11px; color: var(--hs-ink-muted); }
.lib-paging-btn { font-family: var(--hs-font-sans); font-size: 12.5px; color: var(--hs-ink-body); background: var(--hs-surface); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-field); height: 30px; padding: 0 13px; cursor: pointer; }
.lib-paging-btn:hover:not(:disabled) { color: var(--hs-ink); border-color: var(--hs-ink-muted); }
.lib-paging-btn:disabled { color: var(--hs-ink-muted); cursor: default; opacity: 0.55; }
/* R8 — runs of years a re-check closed (Decision 218), drawn as the colour list's table */
.lib-closed-thead, .lib-closed-trow { display: grid; grid-template-columns: minmax(170px, 1.3fr) minmax(190px, 1.2fr) minmax(190px, 1.1fr) minmax(170px, 1fr); gap: 12px; align-items: center; padding: 8px 2px; }
.lib-closed-thead { border-bottom: 1px solid var(--hs-hairline); padding-top: 0; }
.lib-closed-trow { border-bottom: 1px solid var(--hs-hairline); }
.lib-closed-trow:last-child { border-bottom: none; }
.lib-closed-vehicle { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
@media (max-width: 920px) {
  .lib-paging-btn { min-height: 44px; }
  .lib-paging-count { width: 100%; margin-right: 0; }
  .lib-closed-thead { display: flex; flex-wrap: wrap; gap: 4px 14px; background: var(--hs-surface-sunk); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-field); padding: 8px 10px; margin-bottom: 8px; }
  .lib-closed-trow { grid-template-columns: 1fr 1fr; gap: 6px 12px; }
}
/* a market design names its market beside its run of years (answer 36) */
.lib-market{color:var(--hs-ink);font-weight:600;}

/* R9 — the vehicle's kind (Decision 244): named on every row, searchable, and a column on the roster */
.lib-kind { color: var(--hs-ink); font-weight: 600; }
@media (min-width: 921px) {
  .lib-roster-thead, .lib-roster-trow { grid-template-columns: minmax(110px, 1fr) minmax(120px, 1fr) 132px minmax(150px, 1.3fr) 104px 90px 84px; }
}

/* The Library's controls that are links (Clear, the pager, the roster's Edit and the detail's three actions): each
   opens a page or a window by its address, so it is an <a> drawn exactly as the design's button. */
a.lib-clear-btn, a.lib-paging-btn, a.lib-mini-btn, a.det-btn-primary, a.det-btn-secondary, a.det-btn-danger {
  display: inline-flex; align-items: center; text-decoration: none; box-sizing: border-box;
}
.lib-paging-btn.is-disabled { color: var(--hs-ink-muted); cursor: default; opacity: 0.55; }
.lib-search { margin: 0; }
/* At a phone's width every field of the find box and of the master list's filter takes the whole row, and Apply and
   Clear share the last one (review r3 polish-R7) */
@media (max-width: 640px) {
  .lib-search .lib-field, .lib-roster-search .lib-field { flex: 1 1 100%; min-width: 0; }
  .lib-search .lib-input, .lib-search .lib-select, .lib-roster-search .lib-select, .lib-roster-search .lib-input { width: 100%; min-width: 0; }
  .lib-search .lib-search-btn, .lib-search .lib-clear-btn,
  .lib-roster-search .lib-search-btn, .lib-roster-search .lib-clear-btn { flex: 1 1 0; justify-content: center; }
}

/* ---- library-detail__b.html — one vehicle (copied from the approved design) ---- */
/* ---- one vehicle: the picture and the three things you can do to it, side by side ---- */
.det-body { padding: 22px 28px 30px; display: flex; flex-direction: column; gap: 24px; }
.det-crumb { font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); text-decoration: none; border-bottom: 1px solid var(--hs-hairline); align-self: flex-start; padding-bottom: 2px; }
.det-crumb:hover { color: var(--hs-ink); border-color: var(--hs-ink-muted); }

.det-top {
  background: var(--hs-surface); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-card);
  padding: 18px; display: grid; grid-template-columns: minmax(340px, 560px) minmax(0, 1fr); gap: 22px; align-items: start;
}
.det-master { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.det-master-frame { display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--hs-hairline); background: var(--hs-surface-sunk); }
.det-master-img { display: block; width: 100%; height: auto; }
.det-master-caption { font-family: var(--hs-font-mono); font-size: 9.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--hs-ink-muted); }
.det-disclaimer { font-family: var(--hs-font-mono); font-size: 9.5px; color: var(--hs-ink-muted); }

.det-facts { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.det-name { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--hs-ink); margin: 0; }
.det-id { font-family: var(--hs-font-mono); font-size: 11.5px; color: var(--hs-ink); letter-spacing: 0.04em; }
.det-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px 18px; }
.det-cell { display: flex; flex-direction: column; gap: 2px; }
.det-key { font-family: var(--hs-font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-ink-muted); }
.det-val { font-size: 13px; color: var(--hs-ink); }
.det-note { font-size: 12.5px; color: var(--hs-ink-body); background: var(--hs-surface-sunk); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-field); padding: 9px 11px; }
/* the AI's instructions to the picture engine, closed on arrival: the settings page's quiet disclosure (.set-history) */
.det-engine-notes { min-width: 0; }
.det-engine-notes > summary { cursor: pointer; font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-amber-ink); list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.det-engine-notes > summary::-webkit-details-marker { display: none; }
.det-engine-notes > summary::before { content: ''; width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform 120ms; }
.det-engine-notes[open] > summary::before { transform: rotate(90deg); }
.det-engine-notes-explain { margin: 8px 0 6px; font-size: 12px; color: var(--hs-ink-muted); overflow-wrap: anywhere; }
.det-engine-notes > .det-note { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) { .det-engine-notes > summary { min-height: 44px; } }
.det-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 2px; }
.det-btn-primary {
  font-family: var(--hs-font-sans); font-size: 12.5px; font-weight: 600; color: var(--hs-on-action);
  background: var(--hs-action); border: none; border-radius: 7px; height: 34px; padding: 0 15px; cursor: pointer;
}
.det-btn-secondary {
  font-family: var(--hs-font-sans); font-size: 12.5px; font-weight: 600; color: var(--hs-ink);
  background: transparent; border: 1px solid var(--hs-hairline); border-radius: 7px; height: 34px; padding: 0 13px; cursor: pointer;
}
.det-btn-secondary:hover { border-color: var(--hs-ink-muted); }
.det-btn-danger {
  font-family: var(--hs-font-sans); font-size: 12.5px; font-weight: 600; color: var(--hs-bad);
  background: transparent; border: 1.5px solid var(--hs-bad); border-radius: 7px; height: 34px; padding: 0 15px; cursor: pointer;
}
.det-actions-note { font-family: var(--hs-font-mono); font-size: 9.5px; color: var(--hs-ink-muted); flex-basis: 100%; }

.det-section-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.det-section-title { font-size: 16px; font-weight: 600; color: var(--hs-ink); margin: 0; }
.det-section-note { font-family: var(--hs-font-mono); font-size: 10px; color: var(--hs-ink-muted); }

/* a view's version line, in the small mono the trial codes used before the trials moved into the viewer (Decision 295) */
.det-trial-code { font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); letter-spacing: 0.05em; }

.det-views { display: flex; flex-direction: column; gap: 12px; }
.det-view {
  background: var(--hs-surface); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-tile);
  padding: 14px 16px; display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 16px; align-items: start;
}
.det-view-frame { display: block; border-radius: 8px; overflow: hidden; border: 1px solid var(--hs-hairline); background: var(--hs-surface-sunk); }
.det-view-img { display: block; width: 100%; height: auto; }
.det-view-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.det-view-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.det-view-angle { font-size: 14px; font-weight: 600; color: var(--hs-ink); }
.det-prov { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px 18px; }
/* a check line reads label above value, as Drawn by / From / Approved by above it do (review r3 polish-15) */
.det-check { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--hs-ink-body); }
.det-check-label { font-family: var(--hs-font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-ink-muted); }

.det-chip {
  font-family: var(--hs-font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: var(--hs-r-chip); padding: 4px 8px; border: 1px solid var(--hs-hairline); color: var(--hs-ink-muted);
  /* on the card's own surface, not the sunk fill: the green reads at 4.96:1 there, 4.47:1 on the sunk fill */
  background: var(--hs-surface); white-space: nowrap;
}
.det-chip--ready { color: var(--hs-good); border-color: var(--hs-good); }
.det-chip--making { color: var(--hs-amber-ink); border-color: var(--hs-amber); }
@media (max-width: 920px) {
  .det-body { padding: 18px 20px 26px; }
  .det-top { grid-template-columns: 1fr; padding: 16px; }
  .det-view { grid-template-columns: 110px minmax(0, 1fr); }
  .hs-page-library-detail .hs-scrim { padding: 16px; align-items: flex-start; }
}
/* R8 — the master and every trial open at full size (T-4-30) */
.det-open { display: block; cursor: zoom-in; border-radius: 8px; }
.det-open:hover .det-master-img, .det-open:hover .det-view-img { opacity: 0.92; }
.det-open:focus-visible { outline: 2px solid var(--hs-amber); outline-offset: 2px; }
/* the detail opened from a customer's picture: that one picture biggest, the silver master a companion beneath it */
@media (min-width: 921px) { .det-top--opened { grid-template-columns: minmax(320px, 58%) minmax(0, 1fr); } }
/* two columns for the facts in this narrower right column, so no fact is orphaned under a row of three */
.det-top--opened .det-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.det-pics { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.det-master-frame--opened { box-shadow: 0 0 0 2px var(--hs-amber); }
.det-master-caption--opened { color: var(--hs-amber-ink); font-weight: 600; }
.det-master--companion { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 4px 12px; align-items: start; }
.det-master--companion .det-master-frame { grid-row: 1 / 3; }
/* Decision 295 — the main picture opens on the front three-quarter, every angle one press away beneath it, and each
   consequential button says it opens a window before it is pressed. */
.det-master-row { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
a.det-btn-small { height: 30px; padding: 0 11px; font-size: 12px; }
.det-angles { display: flex; flex-direction: column; gap: 6px; }
.det-angles-label { font-family: var(--hs-font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-ink-muted); }
.det-angles-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.det-angle {
  display: flex; flex-direction: column; gap: 4px; padding: 4px; min-height: 44px; box-sizing: border-box; height: 100%;
  border: 1px solid var(--hs-hairline); border-radius: 8px; background: var(--hs-surface); color: var(--hs-ink); text-decoration: none;
}
a.det-angle:hover { border-color: var(--hs-ink-muted); }
a.det-angle.is-current { border-color: var(--hs-ink); box-shadow: inset 0 0 0 1px var(--hs-ink); }
a.det-angle:focus-visible { outline: 2px solid var(--hs-amber); outline-offset: 2px; }
.det-angle-img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: contain; border-radius: 5px; background: var(--hs-surface-sunk); }
.det-angle-words { font-size: 11px; font-weight: 600; line-height: 1.25; text-align: center; }
.det-angle.is-missing { color: var(--hs-ink-muted); border-style: dashed; background: transparent; }
.det-angle-standing { font-weight: 400; }
.det-actions-opens { flex-basis: 100%; font-size: 12px; color: var(--hs-ink-body); }
@media (max-width: 1180px) { .det-angles-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* each confirming window's three plain facts: when it happens, what it costs, whether it can be undone — the
   Library vehicle page's pattern (Decision 295), used by every admin window with a large effect (Decision 299 (3)) */
.hs-dialog-facts {
  display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 7px 12px; margin: 0; padding: 10px 12px;
  border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-field); background: var(--hs-surface-sunk);
}
.hs-dialog-facts dt { font-family: var(--hs-font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-ink-muted); padding-top: 3px; }
.hs-dialog-facts dd { margin: 0; font-size: 13px; color: var(--hs-ink-body); }
/* the picture viewer: angle, colour and size above a picture that zooms and pans (library-viewer.js, picture-zoom.js) */
.det-viewer [hidden] { display: none !important; }
.det-viewer .det-viewer-card { display: flex; flex-direction: column; width: min(1320px, 100%); height: calc(100vh - 56px); max-height: none; }
.det-viewer-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 10px 18px; margin: 0; border-bottom: 1px solid var(--hs-hairline); }
.det-viewer-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.det-viewer-label { font-family: var(--hs-font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-ink-muted); padding: 0; margin-right: 2px; float: left; }
.det-viewer-angle {
  display: inline-flex; align-items: center; height: 30px; padding: 0 9px; box-sizing: border-box;
  font-size: 12px; font-weight: 600; color: var(--hs-ink); text-decoration: none;
  border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-chip); background: var(--hs-surface);
}
.det-viewer-angle:hover { border-color: var(--hs-ink-muted); }
.det-viewer-angle.is-current { background: var(--hs-action); color: var(--hs-on-action); border-color: var(--hs-action); }
.det-viewer-swatch { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--hs-ink-muted); background: var(--hs-surface-sunk); flex: none; }
.det-viewer-swatch.is-as-drawn { border-style: dashed; }
.det-viewer-select {
  font-family: var(--hs-font-sans); font-size: 13px; color: var(--hs-ink); height: 32px; padding: 0 8px; max-width: 260px;
  background: var(--hs-surface); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-field);
}
.det-viewer-select:disabled { color: var(--hs-ink-muted); background: var(--hs-surface-sunk); }
.det-viewer-size {
  display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; box-sizing: border-box; cursor: pointer;
  font-size: 12.5px; color: var(--hs-ink); border: 1px solid var(--hs-hairline); border-radius: 7px; background: var(--hs-surface);
}
.det-viewer-size.is-current { border-color: var(--hs-ink); }
.det-viewer-size input { margin: 0; accent-color: var(--hs-action); }
.det-viewer-show, .det-viewer-tool {
  height: 30px; min-width: 32px; padding: 0 9px; cursor: pointer; font-family: var(--hs-font-sans); font-size: 15px; font-weight: 600;
  color: var(--hs-ink); background: var(--hs-surface); border: 1px solid var(--hs-hairline); border-radius: 7px;
}
.det-viewer-show, .det-viewer-tool--words { font-size: 12px; }
.det-viewer-zoom { margin-left: auto; }
.det-viewer-readout { font-family: var(--hs-font-mono); font-size: 11px; color: var(--hs-ink); min-width: 74px; text-align: center; }
.det-viewer-angle:focus-visible, .det-viewer-select:focus-visible, .det-viewer-size:focus-within, .det-viewer-tool:focus-visible,
.det-viewer-show:focus-visible, .det-viewer-stage:focus-visible { outline: 2px solid var(--hs-amber); outline-offset: 2px; }
.det-viewer-note { margin: 0; padding: 8px 18px; font-size: 12.5px; color: var(--hs-amber-ink); background: var(--hs-surface-sunk); border-bottom: 1px solid var(--hs-hairline); }
.det-viewer-stage { flex: 1 1 auto; min-height: 0; position: relative; overflow: auto; background: var(--hs-surface-sunk); display: flex; align-items: center; justify-content: center; }
.det-viewer-image { display: block; max-width: 100%; max-height: 100%; }
.det-viewer-stage.is-zoomable { display: block; overflow: hidden; cursor: grab; touch-action: none; }
.det-viewer-stage.is-zoomable:active { cursor: grabbing; }
.det-viewer-stage.is-zoomable .det-viewer-image { position: absolute; left: 0; top: 0; max-width: none; max-height: none; transform-origin: 0 0; user-select: none; }
.det-viewer-status { font-size: 12.5px; font-weight: 600; color: var(--hs-ink); }
.det-viewer-status:empty { display: none; }
.det-viewer-hint { font-family: var(--hs-font-mono); font-size: 10px; color: var(--hs-ink-muted); }
/* the spinner over the picture while a new one is fetched or painted (Decision 328 (1); the Try page's loading cover) */
.det-viewer-loading {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: color-mix(in srgb, var(--hs-surface-sunk) 72%, transparent); cursor: progress;
}
.det-viewer-spinner { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--hs-hairline); border-top-color: var(--hs-ink); animation: det-viewer-spin .8s linear infinite; }
.det-viewer-loading-words { font-size: 13px; font-weight: 600; color: var(--hs-ink); background: var(--hs-surface); padding: 5px 12px; border-radius: 999px; border: 1px solid var(--hs-hairline); }
@keyframes det-viewer-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .det-viewer-spinner { animation-duration: 2.4s; } }
/* each angle's own picture while the set lands: a small spinner while waiting, a mark when it could not be painted */
.det-viewer-angle[data-picture-state="waiting"]::after { content: ""; width: 9px; height: 9px; margin-left: 6px; border-radius: 50%; border: 1.5px solid currentColor; border-top-color: transparent; animation: det-viewer-spin .8s linear infinite; }
.det-viewer-angle[data-picture-state="failed"]::after { content: "!"; margin-left: 6px; font-weight: 700; color: var(--hs-bad); }
/* Decision 328 (2) — the Replace window says what is replaced, as a picture, how to find and choose the vehicle that
   answers instead, and what pressing Replace it does, costs and changes for customers (design library-detail__b-replace-modal) */
.hs-page-library-detail .hs-dialog--replace { max-width: 640px; }
.rep-current { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px 12px; border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-field); }
.rep-current-img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; border-radius: 6px; background: var(--hs-surface-sunk); }
.rep-current-words { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rep-current-key { font-family: var(--hs-font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-ink-muted); }
.rep-current-name { font-size: 15px; font-weight: 600; color: var(--hs-ink); }
.rep-current-note { font-size: 12.5px; color: var(--hs-ink-body); }
.rep-id { font-family: var(--hs-font-mono); font-size: 0.92em; }
.rep-step { font-size: 13px; font-weight: 700; color: var(--hs-ink); margin-top: 4px; }
.rep-find { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 8px; align-items: end; margin: 0; }
.rep-find-label { grid-column: 1 / -1; }
.rep-find-btn { height: 38px; }
.hs-dialog-facts.rep-facts { grid-template-columns: 78px minmax(0, 1fr); }
.rep-remake-hint { margin: 0; font-size: 12.5px; color: var(--hs-ink-body); }
.rep-remake-link, .det-fact-link { color: var(--hs-ink); font-weight: 600; text-underline-offset: 3px; }
@media (max-width: 640px) { .rep-current { grid-template-columns: 96px minmax(0, 1fr); } }
/* Decision 328 (3) — Edit details (design library-detail__b-edit-details-modal), the note that the pictures show an
   old body style (library-detail__b-kind-changed) and the record of every change (library-detail__b) */
.hs-page-library-detail .hs-dialog--details { max-width: 640px; }
.dt-name { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-field); }
.dt-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px; }
.dt-span { grid-column: 1 / -1; }
.dt-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.dt-kind { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; box-sizing: border-box; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--hs-ink); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-chip); background: var(--hs-surface); }
.dt-kind input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dt-kind:has(input:checked) { background: var(--hs-action); color: var(--hs-on-action); border-color: var(--hs-action); }
.dt-kind:has(input:focus-visible) { outline: 2px solid var(--hs-amber); outline-offset: 2px; }
.det-redraw-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border: 1px solid var(--hs-amber); border-radius: var(--hs-r-field); background: var(--hs-surface); }
.det-redraw-words { flex: 1 1 260px; font-size: 13px; color: var(--hs-ink); }
.det-redraw-cost { flex-basis: 100%; font-size: 12px; color: var(--hs-ink-body); }
.det-changes { display: flex; flex-direction: column; gap: 10px; }
.det-changes-rows { border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-field); overflow: hidden; background: var(--hs-surface); }
.det-change { display: grid; grid-template-columns: 170px minmax(140px, 220px) minmax(0, 1fr); gap: 4px 14px; padding: 8px 12px; border-bottom: 1px solid var(--hs-hairline); font-size: 13px; color: var(--hs-ink-body); }
.det-change:last-child { border-bottom: none; }
.det-change-when { font-family: var(--hs-font-mono); font-size: 11px; color: var(--hs-ink-muted); }
.det-change-what { color: var(--hs-ink); }
@media (max-width: 640px) { .dt-grid { grid-template-columns: 1fr; } .det-change { grid-template-columns: 1fr; } }
/* Decision 329 (1) — the master list (design library__b-makes-tab): its title line, its three tabs, models under their
   make with each model's picture, and its windows (library__b-roster-edit-modal, -add-to-list-modal, -make-one-modal) */
.hs-page-library .hs-dialog--details { max-width: 640px; }
.lib-add-btn { margin-left: auto; text-decoration: none; display: inline-flex; align-items: center; }
.lib-roster-explain { margin: -4px 0 12px; font-size: 13px; color: var(--hs-ink-body); }
.lib-subtabs { margin: 12px 0 10px; }
/* The eight columns' floors add to 902px with their gaps, which the panel holds from a 1200px-wide window up; below
   that every row stacks (the rule under max-width 1199px). Every cell may shrink to its floor and wraps inside itself —
   never into the next column (lane LIB-4, the owner's 2026-10-02 "columns running into each other"). */
.lib-master-thead, .lib-master-trow { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(240px, 1.7fr) 64px minmax(80px, 1fr) minmax(96px, 1.1fr) 64px 90px 52px; gap: 14px; align-items: center; padding: 8px 14px; }
.lib-master-trow > *, .lib-master-thead > * { min-width: 0; overflow-wrap: anywhere; }
.lib-master-thead { border-bottom: 1px solid var(--hs-hairline); }
.lib-master-trow { border-bottom: 1px solid var(--hs-hairline); }
.lib-master-make { display: flex; align-items: center; gap: 12px; padding: 9px 14px 7px; background: var(--hs-surface-sunk); border-bottom: 1px solid var(--hs-hairline); }
.lib-master-make-name { font-size: 14px; font-weight: 700; color: var(--hs-ink); }
.lib-master-pictures { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lib-master-thumb { flex: 0 0 auto; display: block; width: 72px; border-radius: 6px; background: var(--hs-surface-sunk); }
.lib-master-thumb img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: contain; }
.lib-master-trow--empty { grid-template-columns: 1fr; }
.lib-take-off { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--hs-hairline); }
.lib-take-off form { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.lib-take-off .hs-dialog-textarea { width: 100%; box-sizing: border-box; min-height: 72px; }
.lib-take-off .hs-dialog-confirm--danger { background: var(--hs-bad); color: var(--hs-on-action); }
@media (max-width: 1199px) {
  .lib-master-thead { display: none; }
  .lib-master-trow { grid-template-columns: minmax(0, 1fr) auto; }
  .lib-master-trow > :nth-child(n+3):not(:last-child) { grid-column: 1 / -1; }
  /* with the column headings hidden, each stacked value names itself — "KIND car", "CAME FROM owner" — instead of
     standing bare (review r3, master list at 390) */
  /* the row's Edit keeps its own size under the stacked values, never stretched across the card (lane LIB-4) */
  .lib-master-trow > :last-child { justify-self: start; }
  .lib-master-trow > [data-label]::before {
    content: attr(data-label); display: inline-block; min-width: 13em; margin-right: 8px;
    font-family: var(--hs-font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-ink-muted);
  }
  .lib-master-trow > [data-label]:empty { display: none; }
}
@media (max-width: 640px) {
  .det-viewer .det-viewer-card { height: calc(100vh - 24px); }
  .det-viewer-zoom { margin-left: 0; }
}
/* The detail's three windows, as its design draws them; scoped to this page so the other screens keep part one's windows. */
/* ---- the confirmation in front of re-make, replace and withdraw ---- */
.hs-page-library-detail .hs-scrim {
  position: fixed; inset: 0; z-index: 40; background: rgba(18,17,16,0.58);
  display: flex; align-items: center; justify-content: center; padding: 28px;
}
.hs-page-library-detail .hs-dialog {
  background: var(--hs-surface); border: 1px solid var(--hs-card-border); border-radius: var(--hs-r-card);
  box-shadow: var(--hs-lift); width: 100%; max-width: 520px; max-height: 100%; overflow-y: auto;
  padding: 18px 22px; display: flex; flex-direction: column; gap: 11px;
}
.hs-page-library-detail .hs-dialog-title { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: var(--hs-ink); margin: 0; }
/* shared with the Library list, whose roster Edit window names its make or model the same way */
.hs-page-library-detail .hs-dialog-vehicle, .hs-page-library .hs-dialog-vehicle {
  font-family: var(--hs-font-mono); font-size: 11.5px; color: var(--hs-ink);
  background: var(--hs-surface-sunk); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-field);
  padding: 9px 11px;
}
.hs-page-library-detail .hs-dialog-text { font-size: 13.5px; color: var(--hs-ink-body); margin: 0; }
.hs-page-library-detail .hs-dialog-field { display: flex; flex-direction: column; gap: 5px; }
.hs-page-library-detail .hs-dialog-label { font-family: var(--hs-font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-ink-muted); }
.hs-page-library-detail .hs-dialog-input, .hs-page-library-detail .hs-dialog-textarea {
  font-family: var(--hs-font-sans); font-size: 13px; color: var(--hs-ink);
  background: var(--hs-surface-sunk); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-field);
  padding: 9px 11px;
}
.hs-page-library-detail /* tall enough for a reason in three lines, .hs-page-library-detail and drawn entirely by the brand � no browser resize grip */
.hs-dialog-textarea { min-height: 84px; resize: none; }
.hs-page-library-detail .hs-dialog-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 4px; }
.hs-page-library-detail .hs-dialog-cancel {
  font-family: var(--hs-font-sans); font-size: 12.5px; font-weight: 600; color: var(--hs-ink);
  background: transparent; border: 1px solid var(--hs-hairline); border-radius: 7px; height: 36px; padding: 0 14px; cursor: pointer;
}
.hs-page-library-detail .hs-dialog-confirm {
  font-family: var(--hs-font-sans); font-size: 12.5px; font-weight: 600; color: var(--hs-on-action);
  background: var(--hs-action); border: none; border-radius: 7px; height: 36px; padding: 0 16px; cursor: pointer; margin-left: auto;
}
.hs-page-library-detail .hs-dialog-confirm--danger { background: var(--hs-bad); color: var(--hs-on-action); }
.hs-page-library-detail .hs-picker { display: flex; flex-direction: column; gap: 6px; }
.hs-page-library-detail .hs-picker-rows { border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-field); overflow: hidden; }
.hs-page-library-detail .hs-picker-row {
  display: grid; grid-template-columns: 54px minmax(0, 1fr) 84px; gap: 10px; align-items: center;
  padding: 5px 10px; border-bottom: 1px solid var(--hs-hairline); background: var(--hs-surface);
}
.hs-page-library-detail .hs-picker-row:last-child { border-bottom: none; }
.hs-page-library-detail .hs-picker-row.is-chosen { background: var(--hs-surface-sunk); box-shadow: inset 2px 0 0 var(--hs-amber); }
.hs-page-library-detail .hs-picker-thumb { display: block; width: 100%; height: auto; border-radius: 5px; background: var(--hs-surface-sunk); }
.hs-page-library-detail .hs-picker-name { font-size: 12.5px; color: var(--hs-ink); }
.hs-page-library-detail .hs-picker-meta { font-family: var(--hs-font-mono); font-size: 10px; color: var(--hs-ink-muted); }
.hs-page-library-detail .hs-picker-choose {
  font-family: var(--hs-font-sans); font-size: 11.5px; font-weight: 600; color: var(--hs-ink);
  background: transparent; border: 1px solid var(--hs-hairline); border-radius: 6px; height: 28px; padding: 0 10px; cursor: pointer;
  position: relative; display: inline-flex; align-items: center; justify-content: center; justify-self: end; white-space: nowrap;
}
/* review r3 uiux-04 — the Choose button carries a real radio, visually hidden: the words and the row's amber edge
   follow the checked radio (the server's is-chosen class still marks a choice sent back after a refusal) */
.hs-page-library-detail .hs-picker-radio {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;
}
.hs-page-library-detail .hs-picker-word-chosen { display: none; }
.hs-page-library-detail .hs-picker-radio:checked ~ .hs-picker-word-choose { display: none; }
.hs-page-library-detail .hs-picker-radio:checked ~ .hs-picker-word-chosen { display: inline; }
.hs-page-library-detail .hs-picker-choose:has(.hs-picker-radio:focus-visible) { outline: 2px solid var(--hs-amber); outline-offset: 2px; }
.hs-page-library-detail .hs-picker-row:has(.hs-picker-radio:checked) { background: var(--hs-surface-sunk); box-shadow: inset 2px 0 0 var(--hs-amber); }
.hs-page-library-detail .hs-picker-row.is-chosen:has(.hs-picker-radio:not(:checked)) { background: var(--hs-surface); box-shadow: none; }
.hs-page-library-detail .hs-picker-row { cursor: pointer; }
/* At phone width the thumbnail shrinks and the Choose button takes only its words' width, so the name and identifier
   get the room and stop breaking mid-word (review r3 polish-16). */
@media (max-width: 640px) {
  .hs-page-library-detail .hs-picker-row { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 8px; padding: 6px 8px; }
  .hs-page-library-detail .hs-picker-choose { padding: 0 8px; }
  .hs-page-library-detail .hs-picker-meta { overflow-wrap: normal; word-break: normal; }
}
/* R8 — the full-size view, as the Generation screen draws it (a link back to the page closes it) */
.gen-viewer-dimmer { position: fixed; inset: 0; background: rgba(22,21,15,0.62); z-index: 900; }
.gen-viewer { position: fixed; inset: 0; z-index: 901; display: flex; align-items: center; justify-content: center; padding: 28px; }
.gen-viewer-card {
  background: var(--hs-surface); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-card); box-shadow: var(--hs-lift);
  width: min(1080px, 100%); max-height: calc(100vh - 56px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden;
}
.gen-viewer-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--hs-hairline); }
.gen-viewer-vehicle { font-size: 15px; font-weight: 600; color: var(--hs-ink); }
.gen-viewer-caption { font-family: var(--hs-font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--hs-amber-ink); }
.gen-viewer-close {
  margin-left: auto; font-family: var(--hs-font-sans); font-size: 12.5px; font-weight: 600; color: var(--hs-ink);
  background: transparent; border: 1px solid var(--hs-hairline); border-radius: 7px; height: 32px; padding: 0 12px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center;
}
.gen-viewer-body { min-height: 0; overflow: auto; background: var(--hs-surface-sunk); display: flex; align-items: center; justify-content: center; padding: 14px; }
.gen-viewer-image { display: block; max-width: 100%; max-height: calc(100vh - 230px); height: auto; }
.gen-viewer-foot { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid var(--hs-hairline); }
.gen-viewer-disclaimer { flex-basis: 100%; font-family: var(--hs-font-mono); font-size: 9.5px; color: var(--hs-ink-muted); }
@media (max-width: 640px) {
  .gen-viewer { padding: 12px; }
  .gen-viewer-card { max-height: calc(100vh - 24px); }
  .gen-viewer-image { max-height: calc(100vh - 250px); }
}

/* ---- generation__b.html — the Generation screen (copied from the approved design; its phone-width hit areas and scrollbars are above) ---- */
/* ---- money fences: pinned under the header, each fence drawn as its share of the ceiling ---- */
.hs-main .gen-money-banner {
  position: sticky; top: 56px; z-index: 5;
  display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 18px 26px;
  padding: 12px 28px 13px; background: var(--hs-surface-sunk);
  border-bottom: 1px solid var(--hs-hairline);
}
.gen-money-item { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* A fence's figure drops under its label, whole, when the column is too narrow for both (the monthly "$0.65 of $525.00"
   beside "This month · UTC" at 1280 wide), rather than running into the next fence. */
.hs-main .gen-money-top { flex-wrap: wrap; row-gap: 2px; }
.gen-money-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.gen-money-label { font-family: var(--hs-font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-ink-muted); white-space: nowrap; }
.gen-money-value { font-family: var(--hs-font-mono); font-size: 12.5px; font-weight: 600; color: var(--hs-ink); white-space: nowrap; }
.gen-money-track { display: block; height: 5px; border-radius: 3px; background: var(--hs-line); overflow: hidden; }
.gen-money-fill { display: block; height: 100%; border-radius: 3px; background: var(--hs-ink-muted); }
.gen-money-item--hard-stop .gen-money-track { height: 9px; border-radius: 5px; background: var(--hs-line); box-shadow: inset 0 0 0 1px var(--hs-ink); }
.gen-money-item--hard-stop .gen-money-fill { background: var(--hs-ink); }
.gen-money-item--hard-stop .gen-money-value { font-size: 14px; }
.gen-money-tag { font-family: var(--hs-font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--hs-ink); }
/* A count fence's plain line under its bar: what happens once the day's ceiling is used up. It wraps, never clips.
   Line height 1.25, not 1.35: at 1280 with both ceilings reached (the tallest case: two-line note, wrapped figure,
   Reached tag) 1.35 made the pinned strip 120.4 px, past its 120 px cap; 1.25 makes it 118.25 px. */
.gen-money-note { font-family: var(--hs-font-sans); font-size: 11px; line-height: 1.25; color: var(--hs-ink-muted); }

.gen-body { padding: 22px 28px 30px; display: flex; flex-direction: column; gap: 26px; }
.gen-section-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.gen-section-title { font-size: 16px; font-weight: 600; color: var(--hs-ink); margin: 0; }
.gen-section-count { font-family: var(--hs-font-mono); font-size: 11px; color: var(--hs-ink-muted); }

/* ---- the full-size viewer's decision buttons ---- */
.gen-btn-approve {
  font-family: var(--hs-font-sans); font-size: 12.5px; font-weight: 600; color: var(--hs-on-action);
  background: var(--hs-action); border: none; border-radius: 7px; height: 34px; padding: 0 14px; cursor: pointer;
}
.gen-btn-secondary {
  font-family: var(--hs-font-sans); font-size: 12.5px; font-weight: 600; color: var(--hs-ink);
  background: transparent; border: 1px solid var(--hs-hairline); border-radius: 7px; height: 34px; padding: 0 12px; cursor: pointer;
}
.gen-btn-never {
  font-family: var(--hs-font-sans); font-size: 12.5px; font-weight: 600; color: var(--hs-bad);
  background: transparent; border: 1.5px solid var(--hs-bad); border-radius: 7px;
  height: 34px; padding: 0 14px; cursor: pointer; margin-left: auto; align-self: center;
}
/* Under the mouse, the held card's buttons answer the way their siblings do (review r4 polish-01): the filled Approve
   dims like Save the name (.hs-dialog-confirm), the outline Re-make/Reject darken their border like Pause and Save, and
   the red outline "never make" takes the faint red fill the other red outline button carries (.hs-btn-danger) */
.gen-btn-approve:hover { opacity: 0.92; }
.gen-btn-secondary:hover { border-color: var(--hs-ink-muted); }
.gen-btn-never:hover { background: rgba(179,41,28,0.08); }

/* "Being made" — a vehicle's name in its row */
.gen-group-vehicle { font-size: 12.5px; color: var(--hs-ink); }
.gen-section-note { font-family: var(--hs-font-mono); font-size: 10px; color: var(--hs-ink-muted); margin-left: auto; }

/* ---- a vehicle's line in the "Being made" and late lists: its name, then its body style ---- */
.gen-vehicle-line { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; min-width: 0; }
.gen-group-body-type { font-family: var(--hs-font-mono); font-size: 9.5px; color: var(--hs-ink-muted); text-transform: uppercase; letter-spacing: 0.05em; }

/* controls — last, quiet, physically apart from decisions */
.gen-controls-row {
  background: var(--hs-surface); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-card);
  padding: 16px 18px; display: flex; flex-wrap: wrap; gap: 22px; align-items: center;
}
.gen-control-item { display: flex; align-items: center; gap: 10px; }
.gen-control-label { display: flex; flex-direction: column; gap: 1px; }
.gen-control-name { font-size: 12.5px; font-weight: 500; color: var(--hs-ink); }
.gen-control-sub { font-family: var(--hs-font-mono); font-size: 9.5px; color: var(--hs-ink-muted); }
.gen-pause-btn {
  font-family: var(--hs-font-sans); font-size: 12.5px; font-weight: 600; color: var(--hs-ink);
  background: transparent; border: 1px solid var(--hs-hairline); border-radius: 7px;
  height: 34px; padding: 0 14px; cursor: pointer; flex-shrink: 0; white-space: nowrap;
}
.gen-pause-btn:hover { border-color: var(--hs-ink-muted); }
.gen-run-now-btn {
  font-family: var(--hs-font-sans); font-size: 12.5px; font-weight: 600; color: var(--hs-ink);
  background: transparent; border: 1px solid var(--hs-hairline); border-radius: 7px; height: 34px; padding: 0 13px; cursor: pointer;
}
.gen-field-input {
  font-family: var(--hs-font-mono); font-size: 13px; color: var(--hs-ink);
  background: var(--hs-surface-sunk); border: 1px solid var(--hs-hairline); border-radius: 7px;
  height: 34px; padding: 0 10px; width: 90px;
}
.gen-save-btn {
  font-family: var(--hs-font-sans); font-size: 12.5px; font-weight: 600; color: var(--hs-ink);
  background: transparent; border: 1px solid var(--hs-hairline); border-radius: 7px;
  height: 34px; padding: 0 14px; cursor: pointer; flex-shrink: 0;
}
.gen-save-btn:hover { border-color: var(--hs-ink-muted); }
.gen-controls-note { font-family: var(--hs-font-mono); font-size: 10px; color: var(--hs-ink-muted); margin-left: auto; }

/* the daily cap's on/off switch (Section 32, contract 32.13's daily_cap_enabled) */
.gen-cap-switch{display:inline-flex;align-items:center;gap:6px;font-family:var(--hs-font-mono);font-size:10.5px;color:var(--hs-ink-body);cursor:pointer;}
.gen-cap-switch input{margin:0;accent-color:var(--hs-ink);width:14px;height:14px;cursor:pointer;}
.gen-cap-switch input:focus-visible{outline:2px solid var(--hs-amber);outline-offset:2px;}

/* R9 — late vehicles (Decision 236): the two counts, the owner's three alarms, the newest late vehicles */
.gen-late-alarms { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin: 0 0 10px; font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); }
.gen-late-alarms-label { font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.gen-late-alarm-state { color: var(--hs-ink); font-weight: 600; }
.gen-late-alarm-state--quiet { color: var(--hs-ink-muted); font-weight: 500; }
.gen-late-panel { background: var(--hs-surface); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-card); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.gen-late-thead, .gen-late-trow { display: grid; grid-template-columns: minmax(200px, 1.7fr) minmax(96px, 0.9fr) 104px 104px 116px 136px minmax(150px, 1.1fr); gap: 12px; align-items: center; padding: 8px 2px; }
.gen-late-thead { border-bottom: 1px solid var(--hs-hairline); padding-top: 0; }
.gen-late-trow { border-bottom: 1px solid var(--hs-hairline); }
.gen-late-trow:last-child { border-bottom: none; }
.gen-late-th { font-family: var(--hs-font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-ink-muted); }
.gen-late-vehicle-cell { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; min-width: 0; }
.gen-late-vehicle { font-size: 12.5px; font-weight: 600; color: var(--hs-ink); }
.gen-late-td { font-size: 12.5px; color: var(--hs-ink-body); min-width: 0; }
.gen-late-mono { font-family: var(--hs-font-mono); font-size: 11px; color: var(--hs-ink-body); }
.gen-late-by { font-family: var(--hs-font-mono); font-size: 11px; font-weight: 600; color: var(--hs-ink); }
.gen-late-free { font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-body); }
.gen-late-empty { font-size: 13px; color: var(--hs-ink-body); background: var(--hs-surface); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-card); padding: 16px 18px; }
@media (max-width: 920px) {
  .gen-late-thead { display: flex; flex-wrap: wrap; gap: 4px 14px; background: var(--hs-surface-sunk); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-field); padding: 8px 10px; margin-bottom: 8px; }
  .gen-late-trow { grid-template-columns: 1fr 1fr; gap: 6px 12px; }
  .gen-late-vehicle-cell { grid-column: 1 / -1; }
}

/* R9 — a held non-car view shows its kind's type question: the three answers, then the answer expected */
.gen-type-answers { font-family: var(--hs-font-mono); font-size: 11px; font-weight: 600; color: var(--hs-ink); }
.gen-type-expected { font-family: var(--hs-font-mono); font-size: 11px; color: var(--hs-ink-muted); }
/* ---- states of the Generation screen ---- */
.gen-state-banner {
  background: var(--hs-surface); border: 1px solid var(--hs-amber); border-radius: var(--hs-r-card);
  padding: 15px 18px; display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center;
}
.gen-state-banner--paused { border-color: var(--hs-ink); }
.gen-state-text { display: flex; flex-direction: column; gap: 3px; min-width: 230px; flex-grow: 1; }
.gen-state-title { font-size: 15px; font-weight: 700; color: var(--hs-ink); }
.gen-state-line { font-size: 13px; color: var(--hs-ink-body); }
.gen-state-sub { font-family: var(--hs-font-mono); font-size: 10px; color: var(--hs-ink-muted); }
/* A reached ceiling's line, at the top of the body under the pinned fences (fidelity review round 4, advisory 4) */
.gen-ceiling-line { margin: 0; font-family: var(--hs-font-mono); font-size: 10.5px; line-height: 1.5; color: var(--hs-ink-body); }
.gen-state-btn {
  font-family: var(--hs-font-sans); font-size: 12.5px; font-weight: 600; color: var(--hs-on-action);
  background: var(--hs-action); border: none; border-radius: 7px; height: 36px; padding: 0 16px; cursor: pointer;
}
.gen-state-dismiss {
  font-family: var(--hs-font-sans); font-size: 12.5px; font-weight: 600; color: var(--hs-ink);
  background: transparent; border: 1px solid var(--hs-hairline); border-radius: 7px; height: 36px; padding: 0 13px; cursor: pointer;
}
.gen-state-dismiss:hover { border-color: var(--hs-ink-muted); }
.gen-empty {
  background: var(--hs-surface); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-card);
  padding: 26px 18px; text-align: center; font-size: 14px; color: var(--hs-ink-body);
}
@media (max-width: 1180px) {
  .hs-main .gen-money-banner { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
}
@media (max-width: 920px) {
  /* on a phone the fences are read once and scrolled past — pinning four bars would cover the decisions */
  .hs-main .gen-money-banner { position: static; padding: 12px 20px 14px; gap: 12px 18px; }
  .gen-body { padding: 18px 20px 26px; }
  .gen-btn-never { margin-left: 0; }
  .gen-controls-note { margin-left: 0; }
}
@media (max-width: 640px) {
  .hs-main .gen-money-banner { grid-template-columns: 1fr; }
}
/* R8 — a refused control's line, in the admin's error-line style (Settings' .set-error) */
.gen-refusal { margin: 10px 0 0; font-family: var(--hs-font-mono); font-size: 10.5px; line-height: 1.5; color: var(--hs-bad); }
/* R8 — an exhausted daily count reads as reached: its bar full in ink, its tag beside it */
.gen-money-item.is-reached .gen-money-fill { background: var(--hs-ink); }
.gen-viewer-reason { font-size: 13px; color: var(--hs-ink-body); margin-right: auto; overflow-wrap: anywhere; min-width: 0; }
/* The Generation screen's controls that post or link: each is a form or an <a> drawn exactly as the design's button. */
.gen-inline-form { display: inline-flex; margin: 0; }
a.gen-btn-never { text-decoration: none; display: inline-flex; align-items: center; box-sizing: border-box; }
/* each control that opens a confirming window first is a link drawn as its button (Decision 299 (3)) */
a.gen-btn-approve, a.gen-btn-secondary, a.gen-pause-btn, a.gen-run-now-btn, a.gen-state-btn {
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
}
/* Every list bounded, one action per vehicle, every named thing a link (owner 2026-09-30; design generation__b, amended 2026-10-01). */
.gen-link { color: inherit; text-decoration: underline; text-decoration-color: var(--hs-line); text-underline-offset: 2px; }
.gen-link:hover { text-decoration-color: currentColor; }
a.gen-money-link { text-decoration: none; }
a.gen-money-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.gen-show-all { font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink); text-decoration: underline; text-underline-offset: 2px; align-self: flex-start; }
.gen-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); }
.gen-pager a { color: var(--hs-ink); text-decoration: underline; text-underline-offset: 2px; }
.gen-pager .is-disabled { opacity: 0.45; }
/* A jump to a section or a job lands below the pinned header (56px) and the money banner. */
#needs-a-decision, #being-made, #late-vehicles { scroll-margin-top: 200px; }
/* The Generation screen's one window, as its design draws it; scoped to this page so the other screens keep part one's windows. */
.hs-page-generation .hs-scrim {
  position: fixed; inset: 0; z-index: 40; background: rgba(18,17,16,0.58);
  display: flex; align-items: center; justify-content: center; padding: 28px;
}
.hs-page-generation .hs-dialog {
  background: var(--hs-surface); border: 1px solid var(--hs-card-border); border-radius: var(--hs-r-card);
  box-shadow: var(--hs-lift); width: 100%; max-width: 520px; max-height: 100%; overflow-y: auto;
  padding: 22px 24px; display: flex; flex-direction: column; gap: 14px;
}
.hs-page-generation .hs-dialog-title { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: var(--hs-ink); margin: 0; }
.hs-page-generation .hs-dialog-vehicle {
  font-family: var(--hs-font-mono); font-size: 11.5px; color: var(--hs-ink);
  background: var(--hs-surface-sunk); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-field); padding: 9px 11px;
}
.hs-page-generation .hs-dialog-text { font-size: 13.5px; color: var(--hs-ink-body); margin: 0; }
.hs-page-generation .hs-dialog-field { display: flex; flex-direction: column; gap: 5px; }
.hs-page-generation .hs-dialog-label { font-family: var(--hs-font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-ink-muted); }
.hs-page-generation .hs-dialog-input {
  font-family: var(--hs-font-sans); font-size: 13px; color: var(--hs-ink);
  background: var(--hs-surface-sunk); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-field); padding: 9px 11px;
}
.hs-page-generation .hs-dialog-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 4px; }
.hs-page-generation .hs-dialog-cancel {
  font-family: var(--hs-font-sans); font-size: 12.5px; font-weight: 600; color: var(--hs-ink);
  background: transparent; border: 1px solid var(--hs-hairline); border-radius: 7px; height: 36px; padding: 0 14px; cursor: pointer;
}
.hs-page-generation .hs-dialog-confirm {
  font-family: var(--hs-font-sans); font-size: 12.5px; font-weight: 600; color: var(--hs-on-action);
  background: var(--hs-bad); border: none; border-radius: 7px; height: 36px; padding: 0 16px; cursor: pointer; margin-left: auto;
}
@media (max-width: 920px) {
.hs-page-generation .hs-scrim { padding: 16px; align-items: flex-start; }
}
.hs-page-generation .hs-dialog-textarea {
  font-family: var(--hs-font-sans); font-size: 13px; color: var(--hs-ink);
  background: var(--hs-surface-sunk); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-field);
  padding: 9px 11px; min-height: 84px; resize: none;
}
/* the confirming windows (Decision 299 (3)): only a destructive one keeps the page's red confirm */
.hs-page-generation .hs-confirm-window .hs-dialog-confirm:not(.hs-dialog-confirm--danger) { background: var(--hs-action); }


/* ---- Settings (Sections 33 and 58) ----
   The Settings screen's own rules, copied unchanged from the approved design "Settings: B"
   (docs/plans/hyke-studio/outputs/proposals/admin-costs-complaints-holdback-settings/settings__b.html) and its states
   (settings__b-value-refused / -server-saved / -rotation-overdue) and the image-model designs (settings-model__b*).
   Every selector starts with .set-; the shell's hs- rules are above, and the one content-area rule below is the
   design's own padding for this page. */
.hs-content.hs-page-settings { flex-grow: 1; padding: 22px 28px 40px; max-width: 1260px; width: 100%; }
@media (max-width: 920px) { .hs-content.hs-page-settings { padding: 18px 20px 26px; } }
/* From the refused-state design (settings__b-value-refused.html), the one rule the base design does not carry. */
.set-field--refused .set-input { border-color: var(--hs-bad); outline: 2px solid var(--hs-bad); outline-offset: 1px; }
.set-intro { display: flex; flex-direction: column; gap: 12px; padding: 0 0 16px; border-bottom: 1px solid var(--hs-hairline); margin-bottom: 18px; }
.set-lede { margin: 0; max-width: 800px; color: var(--hs-ink-body); }
.set-lede-note { margin: 0; max-width: 800px; font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); line-height: 1.55; }
.set-index { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.set-index-label { font-family: var(--hs-font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-ink-muted); margin-right: 6px; }
.set-chip {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--hs-r-chip);
  border: 1px solid var(--hs-hairline); background: var(--hs-surface-sunk);
  font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-body); text-decoration: none; white-space: nowrap;
}
.set-chip:hover { border-color: var(--hs-ink); color: var(--hs-ink); }
.set-chip.is-current { background: var(--hs-action); color: var(--hs-on-action); border-color: var(--hs-action); }
.set-chip--every { border-style: dashed; background: transparent; }
/* The Jump-to bar stays pinned under the shell's sticky header while the page scrolls (owner, 2026-09-29), the same
   way the Overview's period control pins at top 56px; settings-jump.js marks the section in view with .set-chip.is-current
   and sets --set-jump-offset to the header's and the bar's measured height. The bar sits outside the intro so it can
   stay pinned for the whole page; the intro's hairline moves onto the bar. Scoped to the Settings page's container. */
.hs-page-settings .set-intro { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.hs-page-settings .set-index {
  position: sticky; top: 56px; z-index: 5; background: var(--hs-ground);
  padding: 12px 0; margin-bottom: 18px; border-bottom: 1px solid var(--hs-hairline);
}
.hs-page-settings .set-block, .hs-page-settings .set-group { scroll-margin-top: var(--set-jump-offset, 150px); }
@media (max-width: 640px) {
  /* A phone's width wraps the bar over many lines, so it scrolls with the page there, as the period control does. */
  .hs-page-settings .set-index { position: static; }
}
.set-stack { display: flex; flex-direction: column; gap: 16px; }
.set-group { background: var(--hs-surface); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-card); padding: 16px 20px 4px; scroll-margin-top: 72px; }
.set-group-head { display: flex; align-items: baseline; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 6px; }
.set-group-title { font-size: 14px; font-weight: 600; color: var(--hs-ink); margin: 0; }
.set-group-area { font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); }
.set-group-count { font-family: var(--hs-font-mono); font-size: 10px; color: var(--hs-ink-muted); margin-left: auto; }
.set-group-note { margin: 0 0 10px; font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); line-height: 1.55; max-width: 780px; }
.set-row { display: grid; grid-template-columns: minmax(0, 1fr) 470px; gap: 8px 28px; padding: 14px 0; border-top: 1px solid var(--hs-hairline); align-items: start; }
.set-row-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.set-key { font-family: var(--hs-font-mono); font-size: 11px; font-weight: 600; color: var(--hs-ink); letter-spacing: 0.01em; overflow-wrap: anywhere; }
.set-desc { margin: 0; font-size: 13.5px; color: var(--hs-ink-body); line-height: 1.5; }
.set-line { margin: 2px 0 0; font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); line-height: 1.55; }
.set-side { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.set-control { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.set-input {
  font-family: var(--hs-font-mono); font-size: 12.5px; color: var(--hs-ink);
  background: var(--hs-surface-sunk); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-field); height: 36px; padding: 0 11px;
}
.set-input:focus, .set-select:focus { outline: 2px solid var(--hs-amber); outline-offset: 1px; }
.set-input--num { width: 124px; text-align: right; }
.set-input--text { flex: 1 1 200px; min-width: 0; }
.set-input--date { width: 150px; }
.set-select {
  font-family: var(--hs-font-sans); font-size: 13px; color: var(--hs-ink); height: 36px; padding: 0 10px; min-width: 190px;
  background: var(--hs-surface-sunk); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-field);
}
.set-unit { font-family: var(--hs-font-mono); font-size: 11px; color: var(--hs-ink-muted); white-space: nowrap; }
.set-check { display: inline-flex; align-items: center; gap: 8px; height: 36px; font-size: 13.5px; color: var(--hs-ink); cursor: pointer; }
.set-check input { width: 17px; height: 17px; margin: 0; accent-color: var(--hs-amber); }
.set-list { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; height: 36px; }
.set-list-item { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px; border-radius: var(--hs-r-chip); border: 1px solid var(--hs-hairline); background: var(--hs-surface-sunk); font-family: var(--hs-font-mono); font-size: 11px; color: var(--hs-ink); cursor: pointer; }
.set-list-item input { width: 14px; height: 14px; margin: 0; accent-color: var(--hs-amber); }
.set-btn {
  font-family: var(--hs-font-sans); font-size: 12px; font-weight: 600; height: 32px; padding: 0 11px; white-space: nowrap;
  border-radius: var(--hs-r-button); cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  /* "Record a run" and "Make active" are links drawn as buttons; a button carries no underline */
  text-decoration: none;
}
.set-btn--outline { background: transparent; color: var(--hs-ink-body); border: 1px solid var(--hs-card-border); }
.set-btn--outline:hover { border-color: var(--hs-ink); color: var(--hs-ink); }
.set-btn--primary { background: var(--hs-action); color: var(--hs-on-action); border: 1px solid var(--hs-action); }
.set-btn--primary:hover { opacity: 0.92; }
.set-btn--tall { height: 34px; padding: 0 14px; font-size: 12.5px; }
.set-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.set-meta { margin: 0; font-family: var(--hs-font-mono); font-size: 10px; color: var(--hs-ink-muted); line-height: 1.55; }
.set-meta strong { color: var(--hs-ink-body); font-weight: 600; }
.set-value { font-family: var(--hs-font-mono); font-size: 13px; color: var(--hs-ink); min-height: 36px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.set-value--empty { color: var(--hs-ink-muted); }
.set-pointer { font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-amber-ink); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; align-self: flex-start; }
.set-pointer:hover { color: var(--hs-ink); }
.set-error { margin: 0; font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-bad); line-height: 1.5; }
/* a shares group is refused for its total, so only the Total line is marked, never the five boxes (review r3 polish-08) */
.set-row--refused .set-input:not([data-share-kind]) { border-color: var(--hs-bad); outline: 2px solid var(--hs-bad); outline-offset: 1px; }
.set-saved { margin: 0; font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-good); line-height: 1.5; }
/* A Settings write waiting on the server (review uiux-03): the row or form reads busy, its pressed button says Saving…
   (.set-btn[disabled] above), and a value saved as it changed shows Saving… in the muted tone until the answer lands. */
[data-settings-row][aria-busy="true"], form[aria-busy="true"] { cursor: progress; }
[aria-busy="true"] .set-btn[disabled] { cursor: progress; }
.set-saved--working { color: var(--hs-ink-muted); }
.set-notice { border: 1px solid var(--hs-bad); border-left-width: 4px; border-radius: var(--hs-r-tile); padding: 12px 14px; margin: 10px 0 6px; background: var(--hs-surface-sunk); }
.set-notice-title { font-size: 14px; font-weight: 600; color: var(--hs-ink); margin: 0 0 6px; }
.set-notice-text { margin: 0; font-size: 13px; color: var(--hs-ink-body); line-height: 1.5; }
.set-notice-also { margin: 6px 0 0; font-family: var(--hs-font-mono); font-size: 10px; color: var(--hs-ink-muted); }
.set-row--overdue .set-input { border-color: var(--hs-bad); }
/* the two blocks edited here, stored in their own tables */
.set-block { background: var(--hs-surface); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-card); padding: 16px 20px 18px; scroll-margin-top: 72px; }
.set-plan { display: flex; flex-direction: column; gap: 10px; padding: 14px 0 16px; border-top: 1px solid var(--hs-hairline); }
.set-plan-head { display: flex; align-items: baseline; gap: 12px; }
.set-plan-name { font-size: 14px; font-weight: 600; color: var(--hs-ink); margin: 0; }
.set-plan-code { font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); }
.set-plan-grid { display: grid; grid-template-columns: 1.1fr 0.9fr 1fr 1fr 1fr 0.9fr 0.7fr 1.7fr auto; gap: 10px 12px; align-items: end; }
.set-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.set-field-label { font-family: var(--hs-font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-ink-muted); line-height: 1.35; }
.set-field .set-input { width: 100%; }
.set-field .set-input--sans { font-family: var(--hs-font-sans); font-size: 13.5px; }
.set-field-money { display: flex; align-items: center; gap: 6px; }
.set-field-money .set-input { text-align: right; }
.set-block-foot { margin: 12px 0 0; font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); line-height: 1.55; max-width: 800px; }
.set-colour-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr auto; gap: 10px 14px; align-items: end; padding: 10px 0; border-bottom: 1px solid var(--hs-hairline); }
.set-colour-rows .set-colour-row:first-child { border-top: 1px solid var(--hs-hairline); }
.set-colour-row .set-check { align-self: end; }
.set-colour-row--add { border-bottom: none; padding-top: 12px; }
.set-colour-row .set-input { width: 100%; }
.set-colour-row .set-check { height: 32px; }
/* the image model — Section 58's later-release section */
.set-cand { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; padding: 14px 0; border-top: 1px solid var(--hs-hairline); align-items: start; }
.set-cand-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.set-cand-name { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.set-cand-provider { font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); letter-spacing: 0.06em; text-transform: uppercase; }
.set-cand-model { font-family: var(--hs-font-mono); font-size: 13px; font-weight: 600; color: var(--hs-ink); }
.set-cand-quality { font-family: var(--hs-font-mono); font-size: 12px; color: var(--hs-ink-body); }
.set-cand-line { margin: 0; font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); line-height: 1.55; }
.set-cand-line--why { color: var(--hs-ink-body); }
.set-cand-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.set-cand--off .set-cand-name, .set-cand--off .set-cand-line:not(.set-cand-line--why) { opacity: 0.5; }
.set-pill {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--hs-r-chip);
  font-family: var(--hs-font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid var(--hs-hairline); color: var(--hs-ink-muted); background: var(--hs-surface-sunk); white-space: nowrap;
}
.set-pill--active { background: var(--hs-action); color: var(--hs-on-action); border-color: var(--hs-action); }
.set-pill--passed { color: var(--hs-good); border-color: var(--hs-good); background: transparent; }
.set-history { margin-top: 4px; min-width: 0; max-width: 100%; overflow-x: auto; }
.set-history summary { cursor: pointer; font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-amber-ink); list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.set-history summary::-webkit-details-marker { display: none; }
.set-history summary::before { content: ''; width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform 120ms; }
.set-history[open] summary::before { transform: rotate(90deg); }
.set-runs { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 8px; }
.set-runs th { text-align: left; font-family: var(--hs-font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-ink-muted); padding: 0 10px 6px 0; border-bottom: 1px solid var(--hs-hairline); white-space: nowrap; }
.set-runs td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--hs-hairline); vertical-align: top; color: var(--hs-ink-body); }
.set-runs tbody tr:last-child td { border-bottom: none; }
.set-runs td.is-num { text-align: right; white-space: nowrap; font-family: var(--hs-font-mono); font-size: 11.5px; }
.set-runs td.is-mono { font-family: var(--hs-font-mono); font-size: 11.5px; white-space: nowrap; }
.set-run-pass { color: var(--hs-good); font-weight: 600; }
.set-run-fail { color: var(--hs-bad); font-weight: 600; }
.set-model-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--hs-hairline); margin-top: 2px; }
/* the alternative `c`: a section list beside one section */
.set-alt { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; }
.set-list-nav { display: flex; flex-direction: column; gap: 2px; background: var(--hs-surface); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-card); padding: 12px 10px; }
.set-list-nav-label { font-family: var(--hs-font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hs-ink-muted); padding: 2px 10px 8px; }
.set-list-link { font-size: 13px; font-weight: 500; color: var(--hs-ink-muted); padding: 6px 10px; border-radius: 7px; text-decoration: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.set-list-link:hover { background: var(--hs-surface-sunk); color: var(--hs-ink); }
.set-list-link.is-current { color: var(--hs-ink); background: var(--hs-surface-sunk); font-weight: 600; box-shadow: inset 3px 0 0 var(--hs-amber); }
.set-list-count { font-family: var(--hs-font-mono); font-size: 10px; color: var(--hs-ink-muted); }
.set-list-divider { height: 1px; background: var(--hs-hairline); margin: 6px 4px; }
@media (max-width: 1100px) {
  .set-row  { grid-template-columns: 1fr; gap: 10px; }
  .set-plan-grid  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .set-alt  { grid-template-columns: 1fr; }
  .set-list-nav  { flex-direction: row; flex-wrap: wrap; }
  .set-list-nav-label  { flex-basis: 100%; }
  .set-list-divider  { display: none; }
}
@media (max-width: 640px) {
  .set-plan-grid  { grid-template-columns: 1fr 1fr; }
  .set-colour-row  { grid-template-columns: 1fr 1fr; }
  .set-cand  { grid-template-columns: 1fr; }
  .set-cand-side  { align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
  .set-input--text  { flex-basis: 100%; }
}
@media (max-width: 640px) {
  /* Every Settings control a thumb has to hit is at least 44 px tall at phone width (the design's phone-width rule,
     kept to the Settings controls here; the shell's own controls carry theirs above). */
  .set-btn,
  .set-input,
  .set-select,
  .set-check,
  .set-chip,
  .set-list-item,
  .set-history > summary { min-height: 44px; }
  .set-list { height: auto; min-height: 44px; }
}
/* aesthetic-03 — the 52 Reset-to-default buttons started at eleven different x positions, because
   the unit label between the field and the button runs from 7 px ("%") to 43 px ("months") and the
   selects and long text fields are wider again. The button is now pushed to the right edge of the
   settings column, which is a fixed width, so every Reset on a card starts and ends at one x. */
.set-control > .set-btn:first-of-type { margin-left: auto; }
/* aesthetic-04 — the two run-history tables in one card were content-sized, so the same COST
   column landed 60 px apart in the two. Both are laid out to the same five widths; the
   "what the check found" column takes the slack. */
.set-runs { table-layout: fixed; }
.set-runs th:nth-child(1), .set-runs td:nth-child(1) { width: 132px; }
.set-runs th:nth-child(2), .set-runs td:nth-child(2) { width: 84px; }
.set-runs th:nth-child(3), .set-runs td:nth-child(3) { width: auto; }
.set-runs th:nth-child(4), .set-runs td:nth-child(4) { width: 76px; }
.set-runs th:nth-child(5), .set-runs td:nth-child(5) { width: 186px; }
.set-runs td.is-mono { white-space: normal; overflow-wrap: anywhere; }
/* …and the two candidates hold their run history in a column of the SAME width: the side column
   was sized by its own contents ("Active since 21 Sep 2026" against a "Make active" button), so
   one table started 66 px further left than the other and the shared COST column moved with it. */
.set-cand { grid-template-columns: minmax(0, 1fr) 176px; }
/* Refold round nine: the plan grid carries the yearly price and a second Stripe price, so the two
   Stripe identifiers and Save take a second line of their own. */
.set-plan-grid { grid-template-columns: 1.1fr 0.9fr 0.9fr 1fr 1fr 1fr 0.9fr 0.7fr; }
.set-plan-grid .set-field--stripe { grid-column: span 3; }
.set-plan-grid .set-plan-save { grid-column: span 2; justify-self: start; }
@media (max-width: 1100px) {
  .set-plan-grid  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .set-plan-grid .set-field--stripe  { grid-column: span 2; }
  .set-plan-grid .set-plan-save  { grid-column: span 4; }
}
@media (max-width: 640px) {
  .set-plan-grid  { grid-template-columns: 1fr 1fr; }
  .set-plan-grid .set-field--stripe  { grid-column: span 2; }
  .set-plan-grid .set-plan-save  { grid-column: span 2; }
}
/* the image model's footer line (settings-model__b) */
.set-model-foot-text { flex: 1 1 420px; min-width: 0; max-width: 760px; }
.set-model-foot-text .set-line { margin-top: 6px; }

/* ---- Requests across every customer (usability sweep 2026-10-01, findings 32 and 33; all-requests__a) ---- */
.hs-ar-views { display: inline-flex; gap: 0; margin: 0 0 18px; }
.hs-ar-views a { text-decoration: none; }
.hs-ar-card { background: var(--hs-surface); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-card, 12px); padding: 20px 22px 16px; }
.hs-ar-card .hs-requests-filters { margin-bottom: 18px; }
.hs-ar-card .hs-cd-card-head { margin-bottom: 12px; }
.hs-ar-head, .hs-ar-row { display: grid; grid-template-columns: 124px minmax(120px, 0.9fr) minmax(0, 1.3fr) 140px 132px 52px 64px 14px; column-gap: 12px; align-items: center; margin: 0 -8px; padding: 0 8px; }
.hs-ar-head { font: 600 11px/1.2 var(--hs-font-mono, "Azeret Mono", monospace); letter-spacing: 0.06em; color: var(--hs-ink-muted); padding-bottom: 8px; border-bottom: 1px solid var(--hs-hairline); }
.hs-ar-row { padding-top: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--hs-hairline); font-size: 12.5px; }
.hs-ar-row:hover { background: var(--hs-surface-sunk); border-radius: var(--hs-r-field); }
.hs-ar-customer a, .hs-ar-vehicle a { color: var(--hs-ink); text-decoration: underline; text-decoration-color: var(--hs-hairline-strong, var(--hs-hairline)); text-underline-offset: 3px; }
.hs-ar-vehicle { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hs-ar-vehicle a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-ar-took, .hs-ar-head .hs-ar-took-head { text-align: right; }
.hs-ar-open { color: var(--hs-ink-muted); display: inline-flex; }
.hs-ar-row:hover .hs-ar-open { color: var(--hs-ink); }
.hs-ar-note { margin: 10px 0 0; color: var(--hs-ink-muted); font-size: 11.5px; }
.hs-ar-hours-head, .hs-ar-hour { display: grid; grid-template-columns: minmax(0, 1fr) 96px 120px 96px; column-gap: 12px; align-items: center; }
.hs-ar-hours-head { font: 600 11px/1.2 var(--hs-font-mono, "Azeret Mono", monospace); letter-spacing: 0.06em; color: var(--hs-ink-muted); padding-bottom: 8px; border-bottom: 1px solid var(--hs-hairline); }
.hs-ar-hour { padding: 9px 0; border-bottom: 1px solid var(--hs-hairline); font-size: 12.5px; }
.hs-ar-hour > :not(:first-child), .hs-ar-hours-head > :not(:first-child) { text-align: right; }
.hs-ar-empty { padding: 28px 0 12px; color: var(--hs-ink-muted); }
@media (max-width: 640px) {
  .hs-ar-head { display: none; }
  .hs-ar-row { grid-template-columns: minmax(0, 1fr) 64px 12px; gap: 4px 8px; align-items: start; }
  .hs-ar-row > .hs-ar-when { grid-column: 1; grid-row: 1; }
  .hs-ar-row > .hs-ar-took { grid-column: 2; grid-row: 1; }
  .hs-ar-row > .hs-ar-open { grid-column: 3; grid-row: 1; }
  .hs-ar-row > .hs-ar-customer { grid-column: 1 / 4; grid-row: 2; }
  .hs-ar-row > .hs-ar-vehicle { grid-column: 1 / 4; grid-row: 3; }
  .hs-ar-row > .hs-cd-served { grid-column: 1 / 4; grid-row: 4; }
  .hs-ar-row > .hs-cd-match { grid-column: 1 / 3; grid-row: 5; }
  .hs-ar-row > .hs-cd-kind { grid-column: 2 / 4; grid-row: 5; text-align: right; }
  .hs-ar-hours-head, .hs-ar-hour { grid-template-columns: minmax(0, 1fr) 56px 76px 60px; }
}

/* ---- Customers list (usability sweep #19, #20, #41, #42; customers-list__a) ---- */
a.hs-cx-name { color: var(--hs-ink); text-decoration: underline; text-decoration-color: var(--hs-hairline); text-underline-offset: 3px; }
a.hs-cx-name:hover { text-decoration-color: currentColor; }
.hs-cx-period-note { margin: 0 0 10px; color: var(--hs-ink-muted); font-size: 11.5px; }
a.hs-cx-event-id { color: var(--hs-ink); text-decoration: underline; text-decoration-color: var(--hs-hairline); text-underline-offset: 3px; }
.hs-cx-events-older { margin-left: auto; color: var(--hs-ink-muted); font-size: 11.5px; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.hs-cx-sortline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hs-cx-sortline-label { font: 600 11px/1.2 var(--hs-font-mono, "Azeret Mono", monospace); letter-spacing: 0.06em; color: var(--hs-ink-muted); text-transform: uppercase; }
/* the Stripe events gain an Account column between the code and the kind (usability sweep #20) */
.hs-cx-events-cols, .hs-cx-event { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) 150px; }
a.hs-cx-event-account { color: var(--hs-ink); text-decoration: underline; text-decoration-color: var(--hs-hairline); text-underline-offset: 3px; font-family: var(--hs-font-sans, inherit); }
@media (max-width: 640px) { .hs-cx-events-cols, .hs-cx-event { grid-template-columns: minmax(0, 1fr); } }
/* The Library's three tabs, the roster's own search and the tabs' pagers (usability sweep 2026-10-01, findings 1, 2,
   24, 25, 43; designs library__b, library__b-runs-tab, library__b-makes-tab). */
.lib-tabs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--hs-hairline); margin: 0 0 18px; }
.lib-tab { font-family: var(--hs-font-sans); font-size: 12.5px; color: var(--hs-ink-muted); text-decoration: none; padding: 10px 12px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.lib-tab:hover { color: var(--hs-ink); }
.lib-tab.is-active { color: var(--hs-ink); border-bottom-color: var(--hs-accent, #E09A12); font-weight: 600; }
.lib-tab-count { font-family: var(--hs-font-mono); font-size: 11px; color: var(--hs-ink-muted); margin-left: 6px; }
.lib-tabs-colours { margin-left: auto; font-size: 11.5px; color: var(--hs-ink-muted); text-decoration: underline; text-underline-offset: 3px; padding: 10px 0; }
.lib-roster-search { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
a.lib-link { color: inherit; text-decoration: underline; text-decoration-color: var(--hs-hairline); text-underline-offset: 3px; }
@media (max-width: 640px) { .lib-tabs-colours { margin-left: 0; width: 100%; } }
/* The customer detail's bounded record lists, its Stripe links and the request window's vehicle link (usability
   sweep 2026-10-01, findings 3, 4, 5, 21, 23, 57; designs customers-detail__a-records-open / -records-all). */
.hs-cd-identity-stripe { font-size: 12px; color: var(--hs-ink-muted); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
a.hs-cd-stripe-ref { color: inherit; text-decoration: underline; text-decoration-color: var(--hs-hairline); text-underline-offset: 3px; }
.hs-cd-rec-more { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 10px 0 0; font-size: 12px; }
.hs-cd-rec-more-note { font-family: var(--hs-font-mono); font-size: 11px; color: var(--hs-ink-muted); }
.hs-cd-rec-more-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.hs-cd-records .hs-cd-paging { margin-top: 10px; }
a.hs-cd-window-vehicle { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* Missed requests: the make-or-model search, the vehicle's preview link and "+ N more" opened in place (usability sweep
   2026-10-01, findings 29 and 45; design missed-requests__b). */
.mr-filter-input { font-family: var(--hs-font-sans); font-size: 13px; color: var(--hs-ink); background: var(--hs-surface-sunk); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-field); height: 34px; padding: 0 10px; min-width: 220px; }
a.mr-vehicle-link { color: inherit; text-decoration: underline; text-decoration-color: var(--hs-hairline); text-underline-offset: 3px; }
.mr-more { display: inline; }
.mr-more > summary { display: inline; cursor: pointer; list-style: none; text-decoration: underline; text-underline-offset: 3px; }
.mr-more > summary::-webkit-details-marker { display: none; }
.mr-more-list { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; }
@media (max-width: 640px) { .mr-filter-input { min-height: 44px; min-width: 0; width: 100%; } }
/* Complaints: the two lists' pagers, the do-not-make search, entries taken off folded, and the code links (usability
   sweep 2026-10-01, findings 8, 9, 30, 46; design complaints__b). */
.cmp-paging { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 14px; font-family: var(--hs-font-mono); font-size: 11px; color: var(--hs-ink-muted); }
/* Previous · Page N of M · Next at the right, the count at the left, as the Library's pager (review r3 polish-03) */
.cmp-paging > :first-child { margin-right: auto; }
.cmp-paging-btn { font-family: var(--hs-font-sans); font-size: 12px; color: var(--hs-ink); background: transparent; border: 1px solid var(--hs-hairline); border-radius: 7px; height: 30px; padding: 0 12px; text-decoration: none; display: inline-flex; align-items: center; }
.cmp-paging-btn[disabled] { opacity: 0.45; }
.dnm-search { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 0 0 14px; }
.dnm-search .hs-input { min-width: 240px; }
a.cmp-code-link { color: inherit; text-decoration: underline; text-decoration-color: var(--hs-hairline); text-underline-offset: 3px; }
.dnm-lifted { margin-top: 18px; border-top: 1px solid var(--hs-hairline); padding-top: 12px; }
.dnm-lifted > summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.dnm-lifted .dnm-rows { margin-top: 12px; }
@media (max-width: 640px) { .dnm-search .hs-input { min-width: 0; width: 100%; } }
/* Costs: the Overview's period control in the range form, the bounded customer tables and their account links
   (usability sweep 2026-10-01, findings 10, 31, 47; designs costs__b, -customers-all, -reports). */
.costs-range .hs-period-options { margin-right: 6px; }
a.costs-customer-link { color: inherit; text-decoration: underline; text-decoration-color: var(--hs-hairline); text-underline-offset: 3px; }
.costs-more { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 12px 0 0; font-size: 12px; }
.costs-more-note { font-family: var(--hs-font-mono); font-size: 11px; color: var(--hs-ink-muted); }
.costs-more-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.costs-paging { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 12px; font-family: var(--hs-font-mono); font-size: 11px; color: var(--hs-ink-muted); }
.costs-paging-page { margin-left: auto; }
.costs-paging-btn { font-family: var(--hs-font-sans); font-size: 12px; color: var(--hs-ink); background: transparent; border: 1px solid var(--hs-hairline); border-radius: 7px; height: 30px; padding: 0 12px; text-decoration: none; display: inline-flex; align-items: center; }
.costs-paging-btn[disabled] { opacity: 0.45; }
/* The owner's Costs feedback, 2026-10-03: a re-drawn step's first tries and re-draws, and who started the pictures no
   customer's request started — quieter lines tucked under the line they add up to, its rule moved below them. */
.hs-table tr.step-row--has-parts td { border-bottom: none; padding-bottom: 6px; }
.hs-table tr.step-part-row td { border-bottom: none; padding-top: 2px; padding-bottom: 4px; font-size: 12px; color: var(--hs-ink-muted); }
.hs-table tr.step-part-row td:first-child,
.hs-table tr.own-line-part td:first-child { padding-left: 14px; }
.hs-table tr.step-part-row--last td { border-bottom: 1px solid var(--hs-hairline); padding-bottom: 11px; }
.hs-table tbody.own-lines tr.own-line-part td { padding-top: 2px; padding-bottom: 3px; font-size: 12px; color: var(--hs-ink-muted); }
.hs-table tbody.own-lines tr.own-line-note td { padding-top: 4px; padding-bottom: 10px; padding-left: 14px; font-family: var(--hs-font-mono); font-size: 10.5px; line-height: 1.5; color: var(--hs-ink-muted); white-space: normal; }
.own-line-note-text { display: block; }
.costs-redraws-note { margin-top: 6px; }
/* On a phone the table scrolls sideways inside its card, so the note keeps to the card's visible width and stays in
   view, and the started-by lines keep a readable first column, as the by-step table's does (polish-01). */
@media (max-width: 640px) {
  .own-line-note-text { position: sticky; left: 14px; max-width: calc(100vw - 100px); }
  .hs-table tr.own-line-part td:first-child { min-width: 152px; }
}
/* Missed requests: the master-list tag as a link, what each row's requests were served instead, "See all", and the
   who-asked page (plan Decision 329; designs missed-requests__b, -who-asked). */
a.mr-chip { text-decoration: none; }
a.mr-chip:hover { border-color: currentColor; }
/* the label on its own line, then one picture per line: a short single item never sits beside the label */
.mr-served { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.mr-served-label { font-family: var(--hs-font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hs-ink-muted); }
/* a picture shows as a picture: the served vehicle's silver master, small, on the card's own surface */
.mr-served-thumb { width: 64px; height: 43px; object-fit: contain; flex-shrink: 0; background: var(--hs-surface-sunk); border: 1px solid var(--hs-hairline); border-radius: 4px; }
/* a margin, not a space: at phone width the link is a flex box, which drops the space */
.mr-served-times { color: var(--hs-ink-muted); margin-left: 0.4em; }
/* The owner's questions of 2026-10-02 (design missed-requests__b): each row's "What the N asks got" — a band under the
   row's cells, one line per picture and reason, then the asks no record explains, then a total equal to the row's
   ask count. At phone width each reason drops under its picture and the total stays right-aligned. */
.mr-row > .mr-served { grid-column: 2 / -1; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--hs-hairline); }
.mr-served-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mr-served-line { display: grid; grid-template-columns: minmax(220px, 290px) 56px minmax(0, 1fr); gap: 14px; align-items: center; }
/* "+ N more · M asks" opens the rest of the lines in place, each laid out as the lines above it */
.mr-served-line--more { display: block; }
.mr-served-line--more .mr-served-lines { margin-top: 6px; }
.mr-served-link { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--hs-ink); text-decoration: none; }
a.mr-served-link .mr-served-name { text-decoration: underline; text-decoration-color: var(--hs-hairline); text-underline-offset: 3px; }
a.mr-served-link:hover .mr-served-name { text-decoration-color: var(--hs-ink-muted); }
.mr-served-name { font-family: var(--hs-font-mono); font-size: 10.5px; font-weight: 600; color: var(--hs-ink); overflow-wrap: anywhere; }
.mr-served-line .mr-served-times { margin-left: 0; font-family: var(--hs-font-mono); font-size: 13px; font-weight: 700; color: var(--hs-ink); text-align: right; }
/* a reason names the vehicle as the customer typed it, which can be one long unbroken word: it breaks inside its column */
.mr-served-why { font-size: 10.5px; line-height: 1.45; color: var(--hs-ink-body); min-width: 0; overflow-wrap: anywhere; }
.mr-served-blank { width: 64px; height: 43px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px dashed var(--hs-hairline); border-radius: 4px; background: var(--hs-surface-sunk); font-family: var(--hs-font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.06em; color: var(--hs-ink-muted); }
.mr-served-line--plain .mr-served-name { font-weight: 500; color: var(--hs-ink-body); }
.mr-served-line--plain .mr-served-times { color: var(--hs-ink-body); }
.mr-served-line--plain .mr-served-why { color: var(--hs-ink-muted); }
.mr-served-total { display: grid; grid-template-columns: minmax(220px, 290px) 56px minmax(0, 1fr); gap: 14px; align-items: baseline; }
.mr-served-total-sum { grid-column: 2; padding-top: 5px; border-top: 1px solid var(--hs-ink-muted); font-family: var(--hs-font-mono); font-size: 13px; font-weight: 700; color: var(--hs-ink); text-align: right; white-space: nowrap; }
.mr-served-total-words { grid-column: 3; font-family: var(--hs-font-mono); font-size: 10px; color: var(--hs-ink-muted); }
@media (max-width: 920px) {
  .mr-served-line, .mr-served-total { grid-template-columns: minmax(0, 1fr) 48px; gap: 4px 10px; }
  .mr-served-why { grid-column: 1 / -1; }
  .mr-served-total-sum { grid-column: 2; }
  .mr-served-total-words { grid-column: 1; grid-row: 1; align-self: center; }
}
.mr-see-all { font-family: var(--hs-font-mono); font-size: 10.5px; font-weight: 600; color: var(--hs-ink); text-decoration: underline; text-underline-offset: 3px; }
.mr-who-head, .mr-who-row { display: grid; grid-template-columns: minmax(200px, 2fr) 110px 130px 130px; gap: 14px; align-items: center; padding: 11px 16px; border: 1px solid transparent; }
.mr-who-head { padding-top: 0; padding-bottom: 6px; }
.mr-who-row { background: var(--hs-surface); border-color: var(--hs-hairline); border-radius: var(--hs-r-tile); }
.mr-who-date { display: flex; align-items: baseline; gap: 0.4em; font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); white-space: nowrap; }
/* the heading over each date column says which it is; on a phone the headings fold into a strip, so the word shows */
.mr-who-date-word { display: none; }
.mr-who-account { font-size: 14px; font-weight: 600; color: var(--hs-ink); text-decoration: underline; text-decoration-color: var(--hs-hairline); text-underline-offset: 3px; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  /* the headings become a key strip above the stacked rows, as on the ranked list; each date says which it is */
  .mr-who-head { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 8px 14px; background: var(--hs-surface-sunk); border-color: var(--hs-hairline); border-radius: var(--hs-r-field); margin-bottom: 8px; }
  .mr-who-row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .mr-who-row .mr-who-date { grid-column: 1 / -1; }
  .mr-who-date-word { display: inline; }
  .mr-see-all, .mr-who-account { display: inline-flex; align-items: center; min-height: 44px; }
}
/* Hold-back: switched-off rules folded beneath the rules that are on, and their switch-back-on (usability sweep
   2026-10-01, findings 11 and 48; designs hold-back__b, -switched-off-open, -rule-on-modal). */
.hb-off { margin-top: 16px; border-top: 1px solid var(--hs-hairline); padding-top: 12px; }
.hb-off > summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.hb-off .hb-rows { margin-top: 12px; }
.hb-row--off .hb-row-side .hs-btn { margin-top: 8px; }
/* Settings: one Save for the colour list, and the find-a-setting box (usability sweep 2026-10-01, findings 18 and 50;
   design settings__b). */
.set-colour-save { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 14px; margin-top: 10px; }
.set-colour-save-note { font-family: var(--hs-font-mono); font-size: 11px; color: var(--hs-ink-muted); }
.set-find { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 14px; margin: 0 0 18px; }
.set-find-field { display: flex; flex-direction: column; gap: 4px; min-width: 280px; }
.set-find-count { font-family: var(--hs-font-mono); font-size: 11px; color: var(--hs-ink-muted); }
@media (max-width: 640px) { .set-find-field { min-width: 0; width: 100%; } }
/* The rail's waiting counts beside Complaints, Generation and Missed requests (usability sweep 2026-10-01, #51). */
.hs-nav-link[data-rail-count] { display: flex; align-items: center; }
.hs-nav-count { margin-left: auto; font-family: var(--hs-font-mono); font-size: 10.5px; font-weight: 600; color: var(--hs-ink); background: var(--hs-surface-sunk); border: 1px solid var(--hs-hairline); border-radius: 999px; padding: 0 7px; line-height: 18px; }
/* Generation: where reject-and-never-make sends a vehicle, in the window and after it (Decision 329 (4)). */
.gen-dnm-link { color: var(--hs-amber-ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 920px) { .gen-dnm-link { display: inline-flex; align-items: center; min-height: 44px; } }
/* One generation job's page (UX-1 finding #26; design generation__b-job-record): the facts beside the picture it made,
   then each attempt's steps as rows. */
.gj-summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 24px; align-items: start; }
.gj-summary-text { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.gj-vehicle { font-size: 18px; font-weight: 600; color: var(--hs-ink); text-decoration: underline; text-decoration-color: var(--hs-hairline); text-underline-offset: 3px; }
.gj-heading { margin: 0; font-size: inherit; font-weight: inherit; }
.gj-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 18px; }
.gj-asked { grid-column: span 2; }
.gj-link { color: var(--hs-amber-ink); text-decoration: underline; text-underline-offset: 3px; }
.gj-mono { font-family: var(--hs-font-mono); font-size: 11px; }
.gj-waiting { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 6px; }
.gj-result { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.gj-result-img, .gj-flagged-img { width: 100%; height: auto; background: var(--hs-surface-sunk); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-tile); }
.gj-attempt { background: var(--hs-surface); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-tile); padding: 14px 16px; margin-bottom: 10px; }
.gj-attempt-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 8px; }
.gj-attempt-title { font-size: 14px; font-weight: 600; color: var(--hs-ink); margin: 0; }
.gj-step { display: grid; grid-template-columns: minmax(160px, 1.2fr) 150px minmax(120px, 1fr) 80px; gap: 4px 14px; padding: 7px 0; border-top: 1px solid var(--hs-hairline); align-items: baseline; }
.gj-step-name { font-size: 13px; color: var(--hs-ink); }
.gj-step-outcome, .gj-step-model { font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); }
.gj-step-cost { font-family: var(--hs-font-mono); font-size: 11px; color: var(--hs-ink); text-align: right; }
.gj-step-answers { grid-column: 1 / -1; font-size: 12px; color: var(--hs-ink-body); }
.gj-step--head { border-top: none; padding-bottom: 2px; font-family: var(--hs-font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-ink-muted); }
.gj-step--head .gj-step-cost { font-size: 9px; color: var(--hs-ink-muted); }
.gj-step-outcome--failed { color: var(--hs-bad); font-weight: 600; }
.gj-flagged { margin: 10px 0 0; max-width: 420px; display: flex; flex-direction: column; gap: 6px; }
.gj-step-answers:empty, .gj-attempt-foot:empty { display: none; }
@media (max-width: 920px) {
  .gj-summary { grid-template-columns: minmax(0, 1fr); }
  .gj-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gj-step--head { display: none; }
  .gj-step { grid-template-columns: minmax(0, 1fr) auto; }
  .gj-step-outcome, .gj-step-model { grid-column: 1 / -1; }
  .gj-link { display: inline-flex; align-items: center; min-height: 44px; }
}
a.det-job-link { color: var(--hs-amber-ink); text-decoration: underline; text-underline-offset: 3px; }
/* Complaints — close with no change (plan Decision 331): the row's reason and the disabled take-down's note, and the
   close window's no-picture box. */
.cmp-row-note { margin: 0; font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); }
.cmp-row--closed .cmp-row-outcome { color: var(--hs-ink-body); }
.cmp-dialog-no-picture { width: 148px; }
/* Library upkeep (plan Decisions 334 and 335): the two runs' cards side by side, each run's last run, changes and
   interval, and the read-only decisions list beneath. */
.upk-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; align-items: start; }
.upk-card { display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 72px; }
.upk-card .hs-card-head { margin-bottom: 0; }
.upk-what { margin: 0; font-size: 13px; color: var(--hs-ink-body); line-height: 1.5; }
.upk-done { margin: 12px 0 0; font-size: 13px; color: var(--hs-good); }
.upk-waiting { margin: 0; font-size: 12.5px; color: var(--hs-ink-body); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.upk-last { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--hs-hairline); }
.upk-last-line { margin: 0; font-size: 12.5px; color: var(--hs-ink-body); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.upk-pill--failed { color: var(--hs-bad); border-color: var(--hs-bad); background: transparent; }
.upk-failure { margin: 0; font-size: 13px; color: var(--hs-bad); overflow-wrap: anywhere; }
.upk-counts { margin: 0; font-size: 13px; font-weight: 600; color: var(--hs-ink); }
.upk-cost, .upk-note, .upk-next { margin: 0; font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); line-height: 1.55; overflow-wrap: anywhere; }
/* A note under a run that succeeded is something that went partly wrong (a source not read, a spending stop, names
   left unmerged), so it wears the amber warning tone held items wear, not a footnote's grey (review r3 polish-11). */
.upk-note { color: var(--hs-amber-ink); border-left: 2px solid var(--hs-amber); padding-left: 8px; }
.upk-next { padding-top: 10px; border-top: 1px solid var(--hs-hairline); color: var(--hs-ink-body); }
.upk-changes { display: flex; flex-direction: column; gap: 6px; }
.upk-change-list, .upk-notes { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.upk-changes a, .upk-decision-vehicle { color: var(--hs-ink); text-decoration: underline; text-underline-offset: 2px; font-size: 12.5px; }
/* The interval row stacks inside its card: the label and its settings key above, the control and its meta below. */
.upk-interval { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 10px 0 0; }
.upk-interval-label { font-size: 13px; font-weight: 600; color: var(--hs-ink); }
.upk-history summary { cursor: pointer; font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-body); }
.upk-history-rows { margin: 8px 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--hs-ink-body); }
.upk-decisions { margin-top: 16px; scroll-margin-top: 72px; }
.upk-decision-rows { margin: 0 0 10px; padding: 0; list-style: none; }
.upk-decision { padding: 11px 0; border-top: 1px solid var(--hs-hairline); display: flex; flex-direction: column; gap: 4px; }
.upk-decision-head { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.upk-decision-when { margin-left: auto; font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); }
.upk-decision-sources { margin: 0; font-family: var(--hs-font-mono); font-size: 11px; color: var(--hs-ink-body); }
.upk-decision-outcome { margin: 0; font-size: 13px; font-weight: 600; color: var(--hs-ink); }
.upk-decision-reason { margin: 0; font-size: 12.5px; color: var(--hs-ink-body); line-height: 1.5; }
@media (max-width: 1100px) {
  .upk-cards { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .upk-decision-when { margin-left: 0; flex-basis: 100%; }
  .upk-card .hs-btn, .upk-changes a, .gen-show-all { min-height: 44px; display: inline-flex; align-items: center; }
}
/* The vehicle types' shares of the room for vehicle copies (Decisions 339 and 340): the Settings row's editor and the
   Library upkeep screen's "Disk room by vehicle type" panel — one row per type, the same chip, input and mono-note styles as the
   Settings rows beside it. */
.set-shares { display: flex; flex-direction: column; gap: 6px; flex-basis: 100%; }
.set-share { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.set-share-name { flex: 0 0 120px; font-size: 13px; font-weight: 600; color: var(--hs-ink); }
.set-share .set-input--num { width: 64px; }
/* one width for every type's "share · allowance" figure, so the upkeep panel's "uses" column lines up (review polish note) */
.set-share-value { font-family: var(--hs-font-mono); font-size: 11.5px; color: var(--hs-ink); white-space: nowrap; min-width: 15ch; }
.set-share-use { flex: 1 1 160px; margin-left: 8px; font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); overflow-wrap: anywhere; }
.set-share--over .set-share-use { color: var(--hs-bad); }
.set-share-foot { font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-body); line-height: 1.55; padding-top: 6px; border-top: 1px solid var(--hs-hairline); }
.set-share-total { font-weight: 600; color: var(--hs-ink); }
/* a typed total other than 100, marked before Save refuses it (settings-save.js, review r3) */
.set-share-total.set-share-total--off { color: var(--hs-bad); }
.set-share-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.set-share-measured { white-space: nowrap; }
.upk-room { margin-top: 16px; scroll-margin-top: 72px; }
@media (max-width: 640px) {
  .set-share-use { flex-basis: 100%; margin-left: 0; }
}

/* the master list's Pictures cell lists each library vehicle of a model, one link a line, beside its thumbnail (lane
   LIB-3, the owner's 2026-10-02 "Make it make sense"): each name on one line, a standing under it; the column's floor is 250px so the longest name and the thumbnail fit */
.lib-master-vehicles { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* each vehicle's name wraps inside the cell if it must; its not-in-service tag stays whole beside it (lane LIB-4) */
.lib-master-vehicle { font-size: 12.5px; line-height: 1.35; overflow-wrap: anywhere; }
.lib-master-vehicle > .lib-link { overflow-wrap: normal; }
.lib-master-run { white-space: nowrap; }
.lib-master-vehicle .lib-chip { display: inline-block; margin-left: 2px; padding: 2px 6px; vertical-align: 1px; }
/* the Edit window's kind and body styles (lane LIB-4): body styles as chips — the default one marked, × takes one off,
   "Make it the default" beside each other one — the shared picker with + Add under them, and the five kinds as buttons,
   the current one pressed; the dashboard's removable chips (billing alerts) are the model for the × */
.lib-shape { display: flex; flex-direction: column; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--hs-hairline); }
.lib-style-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 0; padding: 0; list-style: none; }
.lib-style-chip { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-height: 34px; padding: 3px 4px 3px 12px; box-sizing: border-box; border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-chip); background: var(--hs-surface); font-size: 13.5px; color: var(--hs-ink); }
.lib-style-chip.is-default { border-color: var(--hs-ink); }
.lib-style-chip-name { font-weight: 600; }
.lib-style-chip-tag, .lib-style-chip-held { font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); }
.lib-style-chip-form { display: inline-flex; margin: 0; }
.lib-style-chip-action { border: 0; padding: 2px 4px; background: transparent; font: inherit; font-size: 12px; color: var(--hs-ink-body); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.lib-style-chip-action:hover { color: var(--hs-ink); }
.lib-style-chip-remove { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: 50%; padding: 0; background: transparent; color: var(--hs-ink-body); cursor: pointer; }
.lib-style-chip-remove svg { width: 14px; height: 14px; }
.lib-style-chip-remove:hover { background: var(--hs-surface-sunk); color: var(--hs-bad); }
.lib-style-chip-remove:focus-visible, .lib-style-chip-action:focus-visible, .lib-kind:focus-visible { outline: 2px solid var(--hs-amber); outline-offset: 2px; }
.lib-style-none { font-size: 13px; color: var(--hs-ink-muted); }
.lib-saved-note { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; padding: 7px 10px; border-left: 3px solid var(--hs-good); background: var(--hs-surface-sunk); font-size: 13px; color: var(--hs-ink); }
.lib-shape .hs-dialog-error { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; }
.lib-add-style { display: flex; align-items: flex-end; gap: 8px; margin: 8px 0 0; }
.lib-add-style-field { flex: 1 1 auto; min-width: 0; }
.lib-add-style-btn { flex: 0 0 auto; height: 38px; display: inline-flex; align-items: center; gap: 6px; }
.lib-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; }
.lib-kind { height: 32px; padding: 0 12px; border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-chip); background: var(--hs-surface); font: inherit; font-size: 13px; font-weight: 600; color: var(--hs-ink-body); cursor: pointer; }
.lib-kind:hover { border-color: var(--hs-ink); color: var(--hs-ink); }
.lib-kind.is-current { background: var(--hs-action); border-color: var(--hs-action); color: var(--hs-on-action); }
.lib-picker--body { min-width: 180px; }
/* Library upkeep's refresh card links to the master list it keeps (lane LIB-4) */
.upk-master-link { display: inline-block; margin: 2px 0 6px; font-size: 13px; font-weight: 600; }
/* the Edit window: its body styles ticked to keep with the one drawn when none is named, its spellings with Remove,
   and Move to another make (lane LIB-3) */
.lib-spelling-row { display: flex; align-items: center; gap: 10px; margin: 0; }
.lib-spelling { font-family: var(--hs-font-mono); font-size: 12.5px; color: var(--hs-ink); min-width: 0; overflow-wrap: anywhere; }
.lib-move { display: flex; flex-direction: column; gap: 8px; margin: 0; padding-top: 10px; border-top: 1px solid var(--hs-hairline); }
/* a find-box field's own refusal line, under the field (the Year field's, lane LIB-3) */
.lib-field-error { display: block; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--hs-bad); }

/* ---- Generation: one entry per vehicle and its decision window (design generation__c, -vehicle-open, -vehicle-confirm,
   lane GEN-UX 2026-10-02; built by lane GEN-BUILD). The design's own rules, its type tokens written as the sizes they
   stand for (admin.css writes sizes plainly). ---- */
.gcx-lead { margin: -4px 0 14px; font-size: 13px; color: var(--hs-ink-body); max-width: 760px; }
.gcx-list { display: flex; flex-direction: column; gap: 10px; }
.gcx-row {
  background: var(--hs-surface); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-card);
  padding: 14px 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 18px; align-items: center;
}
.gcx-row-main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.gcx-row-title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.gcx-vehicle { font-size: 15px; font-weight: 600; color: var(--hs-ink); }
.gcx-body-style { font-family: var(--hs-font-mono); font-size: 10px; color: var(--hs-ink-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.gcx-kind-tag { font-family: var(--hs-font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--hs-r-chip); border: 1px solid var(--hs-line); color: var(--hs-ink-muted); }
.gcx-kind-tag--new { border-color: var(--hs-amber); color: var(--hs-amber-ink); }
.gcx-why { font-size: 12.5px; color: var(--hs-ink-body); margin: 0; }
.gcx-summary { font-size: 13px; color: var(--hs-ink); margin: 0; overflow-wrap: anywhere; }
.gcx-summary b { font-weight: 600; }
.gcx-summary .is-bad { color: var(--hs-bad); }
.gcx-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.gcx-waiting { font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); white-space: nowrap; }
.gcx-open-btn {
  font-family: var(--hs-font-sans); font-size: 12.5px; font-weight: 600; color: var(--hs-on-action);
  background: var(--hs-action); border: none; border-radius: 7px; height: 36px; padding: 0 16px; cursor: pointer;
  display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap;
}
.gcx-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 82px)); gap: 6px; }
.gcx-thumb { margin: 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gcx-thumb-frame { display: block; border-radius: 7px; background: var(--hs-surface-sunk); border: 1px solid var(--hs-hairline); overflow: hidden; aspect-ratio: 3 / 2; }
.gcx-thumb-frame img { display: block; width: 100%; height: 100%; object-fit: contain; filter: none; }
.gcx-thumb--held .gcx-thumb-frame { box-shadow: 0 0 0 2px var(--hs-amber); border-color: var(--hs-amber); }
.gcx-thumb--failed .gcx-thumb-frame { box-shadow: 0 0 0 2px var(--hs-bad); border-color: var(--hs-bad); border-style: dashed; }
.gcx-thumb--empty .gcx-thumb-frame { display: flex; align-items: center; justify-content: center; }
.gcx-thumb-none { font-family: var(--hs-font-mono); font-size: 9px; color: var(--hs-ink-muted); }
.gcx-thumb-label { font-family: var(--hs-font-mono); font-size: 9px; color: var(--hs-ink-muted); display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.gcx-thumb-angle, .gcx-thumb-state { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gcx-thumb--held .gcx-thumb-label { color: var(--hs-amber-ink); font-weight: 600; }
.gcx-thumb--failed .gcx-thumb-label { color: var(--hs-bad); font-weight: 600; }
.gcx-making-row { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 2.2fr) auto; gap: 14px; align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--hs-hairline); }
.gcx-making-row:last-child { border-bottom: none; }
.gcx-making-panel { background: var(--hs-surface); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-card); padding: 6px 16px; }
.gcx-making-state { font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); white-space: nowrap; }
.gcx-making-row .gcx-strip { grid-template-columns: repeat(7, minmax(0, 56px)); }
.gcx-saved { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--hs-ink); }

/* the decision window */
.gcx-dimmer { position: fixed; inset: 0; background: rgba(22, 21, 15, 0.55); z-index: 20; }
.gcx-window {
  position: fixed; z-index: 21; top: 28px; bottom: 28px; left: 50%; transform: translateX(-50%);
  width: min(1180px, calc(100vw - 64px)); background: var(--hs-ground); border-radius: var(--hs-r-card);
  box-shadow: var(--hs-lift); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--hs-card-border);
}
.gcx-window-head { display: flex; align-items: flex-start; gap: 14px; padding: 16px 20px 12px; background: var(--hs-surface); border-bottom: 1px solid var(--hs-hairline); }
.gcx-window-title { margin: 0; font-size: 18px; font-weight: 600; color: var(--hs-ink); letter-spacing: -0.01em; }
.gcx-window-sub { display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline; margin-top: 2px; }
.gcx-window-link { font-family: var(--hs-font-mono); font-size: 11px; color: var(--hs-ink); text-decoration: underline; text-underline-offset: 2px; }
.gcx-close { margin-left: auto; font-family: var(--hs-font-sans); font-size: 12.5px; font-weight: 600; color: var(--hs-ink);
  background: transparent; border: 1px solid var(--hs-hairline); border-radius: 7px; height: 34px; padding: 0 12px; text-decoration: none; display: inline-flex; align-items: center; flex-shrink: 0; }
.gcx-window-body { flex: 1 1 auto; overflow-y: auto; padding: 14px 20px 18px; display: flex; flex-direction: column; gap: 14px; }
.gcx-note { background: var(--hs-surface); border: 1px solid var(--hs-hairline); border-left: 3px solid var(--hs-ink-muted); border-radius: var(--hs-r-field); padding: 10px 14px; font-size: 13px; color: var(--hs-ink-body); margin: 0; }
.gcx-note b { color: var(--hs-ink); font-weight: 600; }
.gcx-progress { display: flex; flex-wrap: wrap; gap: 4px 16px; font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); }
.gcx-progress b { color: var(--hs-ink); font-weight: 600; }
.gcx-select-tools { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); }
.gcx-select-tools a { color: var(--hs-ink); text-decoration: underline; text-underline-offset: 2px; }
.gcx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; align-items: start; }
.gcx-card-group { display: contents; }
.gcx-card { background: var(--hs-surface); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-card); padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 9px; }
.gcx-card[data-ticked="yes"] { border-color: var(--hs-ink); box-shadow: 0 0 0 1px var(--hs-ink); }
.gcx-card-head { display: flex; align-items: center; gap: 10px; }
.gcx-tick { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--hs-ink); }
.gcx-tick input { width: 18px; height: 18px; margin: 0; accent-color: var(--hs-ink); cursor: pointer; }
.gcx-state { margin-left: auto; font-family: var(--hs-font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 8px; border-radius: var(--hs-r-chip); border: 1px solid; }
.gcx-state--held { color: var(--hs-amber-ink); border-color: var(--hs-amber); }
.gcx-state--failed { color: var(--hs-bad); border-color: var(--hs-bad); }
/* A picture in service that a later check flagged (Decision 354): amber like a hold, drawn dashed because it is still
   being served; its thumb in the list the same way. */
.gcx-state--flagged { color: var(--hs-amber-ink); border-color: var(--hs-amber); border-style: dashed; }
.gcx-thumb--flagged .gcx-thumb-frame { outline: 2px dashed var(--hs-amber); outline-offset: -1px; }
.gcx-thumb--flagged .gcx-thumb-label { color: var(--hs-amber-ink); font-weight: 600; }
/* the card's angle never breaks ("Rear ¾" read "Rear" over "¾" beside the longer flagged chip); the chip wraps instead */
.gcx-tick span { white-space: nowrap; }
/* The drawings window's card head: the title and the state pill each stay on one line (review round 24, uiux-08:
   "HELD FOR A LOOK" wrapped and pushed "Attempt 1, round 3" onto two lines three cards across); when the card is
   too narrow for both, the pill moves under the title whole. Its words are short, never the vehicle window's long
   flagged chip, which still wraps. */
.gcx-card-head--one-line { flex-wrap: wrap; row-gap: 6px; }
.gcx-card-head--one-line .gcx-tick, .gcx-state--one-line { white-space: nowrap; }
/* "Select all": one box that ticks every card that can be decided, mixed while some are (owner, 2026-10-03) */
.gcx-select-all { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-family: var(--hs-font-sans); font-size: 13px; font-weight: 600; color: var(--hs-ink); }
.gcx-select-all input { width: 18px; height: 18px; margin: 0; accent-color: var(--hs-ink); cursor: pointer; }
.gcx-select-all input:focus-visible { outline: 2px solid var(--hs-ink); outline-offset: 2px; }
/* A vehicle being made, in words (owner, 2026-10-03): under its row across the full width, and in its window */
.gcx-making-progress { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 12.5px; color: var(--hs-ink-body); }
.gcx-making-progress p { margin: 0; }
.gcx-making-started, .gcx-making-beat { font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); }
.gcx-angle-progress { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.gcx-angle-progress b { font-weight: 600; color: var(--hs-ink); }
.gcx-angle-since { font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); }
.gcx-making-stuck { font-weight: 600; color: var(--hs-bad); }
/* The full-size viewer's picture in a frame of its own ratio, so the window card's outlines land on it at any size */
.gen-viewer-shot { position: relative; display: block; max-width: 100%; }
.gen-viewer-shot[style*="--shot-ratio"] { aspect-ratio: var(--shot-ratio); width: min(100%, calc((100vh - 230px) * var(--shot-ratio))); }
.gen-viewer-shot[style*="--shot-ratio"] .gen-viewer-image { width: 100%; height: 100%; max-height: none; }
@media (max-width: 640px) {
  .gen-viewer-shot[style*="--shot-ratio"] { width: min(100%, calc((100vh - 250px) * var(--shot-ratio))); }
}
.gcx-shot { position: relative; margin: 0; border-radius: 10px; overflow: hidden; background: var(--hs-surface-sunk); border: 1px solid var(--hs-hairline); aspect-ratio: 3 / 2; }
.gcx-shot img { display: block; width: 100%; height: 100%; object-fit: contain; }
.gcx-mark { position: absolute; border: 2px solid var(--hs-amber); border-radius: 4px; box-shadow: 0 0 0 1px rgba(22, 21, 15, 0.55); }
.gcx-mark-number { position: absolute; top: -10px; left: -10px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--hs-amber); color: #16150F;
  font-family: var(--hs-font-mono); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.gcx-shot-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 0 24px;
  font-family: var(--hs-font-mono); font-size: 11px; color: var(--hs-ink-muted); }
.gcx-compare { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; align-items: center; }
.gcx-compare .gcx-shot { border-radius: 7px; }
.gcx-compare-text { font-family: var(--hs-font-mono); font-size: 10px; color: var(--hs-ink-muted); }
.gcx-what { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--hs-ink); overflow-wrap: anywhere; }
.gcx-detail { margin: 0; font-size: 12.5px; color: var(--hs-ink-body); overflow-wrap: anywhere; }
.gcx-todo { margin: 0; font-size: 12.5px; color: var(--hs-ink-body); padding-left: 10px; border-left: 2px solid var(--hs-line); overflow-wrap: anywhere; }
.gcx-todo b { color: var(--hs-ink); font-weight: 600; }
.gcx-card-links { display: flex; gap: 16px; flex-wrap: wrap; font-family: var(--hs-font-mono); font-size: 10.5px; }
.gcx-card-links a { color: var(--hs-ink); text-decoration: underline; text-decoration-color: var(--hs-line); text-underline-offset: 2px; }
.gcx-caption { font-family: var(--hs-font-mono); font-size: 9.5px; color: var(--hs-ink-muted); margin: 0; }

.gcx-bar { flex-shrink: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 20px; background: var(--hs-surface); border-top: 1px solid var(--hs-hairline); }
.gcx-bar-count { font-size: 13px; font-weight: 600; color: var(--hs-ink); white-space: nowrap; }
.gcx-choices { display: flex; flex-wrap: wrap; gap: 6px; border: none; margin: 0; padding: 0; }
.gcx-choice { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border: 1px solid var(--hs-hairline); border-radius: 7px;
  font-size: 12.5px; color: var(--hs-ink); cursor: pointer; background: var(--hs-surface); }
.gcx-choice input { margin: 0; accent-color: var(--hs-ink); }
.gcx-choice.is-chosen { border-color: var(--hs-ink); box-shadow: 0 0 0 1px var(--hs-ink); font-weight: 600; }
.gcx-choice.is-unavailable { color: var(--hs-ink-muted); cursor: not-allowed; border-style: dashed; }
.gcx-apply { margin-left: auto; font-family: var(--hs-font-sans); font-size: 13px; font-weight: 600; color: var(--hs-on-action); background: var(--hs-action);
  border: none; border-radius: 7px; height: 40px; padding: 0 18px; cursor: pointer; white-space: nowrap; }
.gcx-apply:disabled { opacity: 0.45; cursor: not-allowed; }
/* The same ring marks the button pressed on any form send-once.js holds (round 14 polish-01): that button keeps its full
   colour while the form's other buttons keep their disabled look; an <input type="submit"> cannot carry a ring, so a
   pressed one keeps only its full colour. Slowed for reduced motion, as the picture spinner is. */
.gcx-apply.is-working::before, form[aria-busy="true"] button[data-send-once-pressed]:disabled::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: gcx-turn 0.8s linear infinite; }
@keyframes gcx-turn { to { transform: rotate(360deg); } }
form[aria-busy="true"] :is(button, input[type="submit"], input[type="image"])[data-send-once-pressed]:disabled { opacity: 1; }
@media (prefers-reduced-motion: reduce) { form[aria-busy="true"] button[data-send-once-pressed]:disabled::before { animation-duration: 2.4s; } }
.gcx-bar-refusal { flex-basis: 100%; margin: 0; }
.gcx-bar-hint { flex-basis: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; font-family: var(--hs-font-mono); font-size: 10px; color: var(--hs-ink-muted); }
.gcx-never { color: var(--hs-bad); text-decoration: underline; text-underline-offset: 2px; font-family: var(--hs-font-mono); font-size: 10.5px; }

/* the confirm step */
.gcx-confirm { position: fixed; z-index: 23; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto;
  background: var(--hs-surface); border-radius: var(--hs-r-card); border: 1px solid var(--hs-card-border); box-shadow: var(--hs-lift); padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; margin: 0; }
.gcx-confirm-title { margin: 0; font-size: 17px; font-weight: 600; color: var(--hs-ink); }
.gcx-confirm-pictures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gcx-facts { margin: 0; display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 8px 12px; font-size: 12.5px; color: var(--hs-ink-body); }
.gcx-facts dt { font-family: var(--hs-font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hs-ink-muted); padding-top: 2px; }
.gcx-facts dd { margin: 0; }
.gcx-confirm-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 4px; }
.gcx-cancel { font-family: var(--hs-font-sans); font-size: 12.5px; font-weight: 600; color: var(--hs-ink); background: transparent; border: 1px solid var(--hs-hairline);
  border-radius: 7px; height: 38px; padding: 0 14px; text-decoration: none; display: inline-flex; align-items: center; }
.gcx-confirm-note { margin: 0; font-family: var(--hs-font-mono); font-size: 10px; color: var(--hs-ink-muted); }

@media (max-width: 1180px) {
  .gcx-row { grid-template-columns: minmax(0, 1fr); }
  .gcx-row-side { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
  .gcx-making-state { white-space: normal; }
  .gcx-making-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}
@media (max-width: 920px) {
  .gcx-strip { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  .gcx-making-row .gcx-strip { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .gcx-thumb-label { font-size: 8px; }
  /* At phone width a seventh of the row is about 42 px, narrower than "Right side" or "needs a look"; the words wrap
     under their own picture instead of ending in "…" (fidelity review round 6, advisory 2). Wider screens keep the
     design's one-line labels. */
  .gcx-thumb-angle, .gcx-thumb-state { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; }
  /* the angle's words always take two lines' room, so every state word under a row starts at one height whether its
     angle is "Side" or "Right side" (visual polish review round 6, polish-03) */
  .gcx-thumb-angle { min-height: 2.7em; }
  .gcx-thumb-none { font-size: 7px; text-align: center; line-height: 1.1; }
  .gcx-window { top: 0; bottom: 0; left: 0; transform: none; width: 100vw; border-radius: 0; }
  .gcx-window-head { padding: 12px 14px 10px; }
  .gcx-window-body { padding: 12px 14px 16px; }
  .gcx-cards { grid-template-columns: 1fr; }
  .gcx-bar { padding: 10px 14px; gap: 8px; }
  .gcx-bar-count { flex-basis: 100%; font-size: 12.5px; }
  .gcx-choices { flex-basis: 100%; flex-wrap: nowrap; }
  .gcx-choice { flex: 1 1 0; min-height: 44px; height: auto; padding: 4px 8px; justify-content: center; text-align: center; line-height: 1.2; }
  .gcx-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  /* the hidden radio's focus ring moves onto the choice the admin sees, as .dt-kind and .hs-picker-choose do (polish-01) */
  .gcx-choice:has(input:focus-visible) { outline: 2px solid var(--hs-amber); outline-offset: 2px; }
  .gcx-apply { margin-left: 0; flex: 1 1 100%; min-height: 46px; }
  .gcx-bar-hint > span { display: none; }
  .gcx-open-btn, .gcx-close, .gcx-cancel { min-height: 44px; }
  .gcx-confirm-pictures { grid-template-columns: 1fr 1fr; }
}
/* the Generation decision buttons answer a resting mouse, as every sibling admin button does (polish-01): the filled
   dark ones dim, the outline ones darken their border */
.gcx-open-btn:hover, .gcx-apply:hover:not(:disabled) { opacity: 0.86; }
.gcx-close:hover, .gcx-cancel:hover { border-color: var(--hs-ink); }
.gcx-choice:hover { border-color: var(--hs-ink); background: var(--hs-surface-sunk); }