/* vB-CRM — house styling. Palette + type echo the vB document system. */
/* audit-fix 2026-07-04: the HTML `hidden` attribute must win over component display rules
   (.btn-row{display:flex} was defeating it, leaving the Staff reset-password form always visible). */
[hidden] { display: none !important; }
:root {
  --dark: #1A1A1A;
  --band: #141414;
  --body: #2B2B2B;
  --grey: #5E6663;
  --silver: #D9E0DC;
  --gold: #C8A13C;
  --gold-soft: #FBF6E9;
  --zebra: #F2F4F3;
  --line: #E4E8E6;
  --bg: #F6F8F7;
  --white: #FFFFFF;
  --ok: #2E7D52;
  --ok-text: #256B45;       /* pill/short text on light fills — clears 4.5:1 (13 Jun 2026) */
  --warn: #B9892B;
  --warn-text: #7A5A10;     /* amber pill TEXT (was --warn at 2.8:1 — worst contrast in app) */
  --err: #B23B3B;
  --grey-on-dark: #98A09B;  /* secondary text on the dark band (~5.9:1; --grey was ~2.9:1) */
  --gold-ink: #8F6F1D;      /* gold-as-text on LIGHT surfaces (raw gold is 2.4:1 on white) */
  /* von Bibra Performance (Tier 3 / EFI tuning badge) — Thüringer green metallic ramp,
     gold keyline. Per vB-20 Brand Framework §12.5/§12.9 (performance-notes.md). */
  --vbp-green: #15914B;
  --vbp-green-bright: #2FBE6E;
  --vbp-green-soft: #E9F6EE;
  --vbp-green-ink: #0B5D30;   /* 25 Jul 2026: text-safe greens for the Performance banner eyebrow — */
  --vbp-green-ink2: #127441;  /* raw green ramp was 3.3:1 as 11px text on the pastel (cyber remaps both) */
  --neonA: #C8A13C;           /* 25 Jul 2026: classic fallback for the cyber-only token — ai_log daily-spend
                                 bars + reports.html gradient rendered TRANSPARENT (var() invalid at
                                 computed-value time when undefined); cyber's #23e3ff remap still wins */
  --shadow: 0 1px 3px rgba(20,20,20,.08), 0 8px 24px rgba(20,20,20,.04);
  /* Desktop 3-column shell (≥1001px): the LEFT nav rail and the RIGHT assistant dock
     share ONE width so the two side rails are symmetric (Grant: "same size as the menu
     on the left"). Gutter = rail width + a 24px breathing gap. Change here, both sides move. */
  --rail-w: 234px;
  --rail-gutter: 258px;
}

/* Poppins self-hosted (13 Jun 2026) — the Google Fonts link was render-blocking on every
   no-cache WebView navigation over the rural link, and m/* never loaded the brand font. */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/poppins-700.woff2") format("woff2"); }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--bg); }  /* the frame paints its colour before body CSS — no nav flash */

/* Seamless navigation (4 Jul 2026 — "everything bounces when you click a menu item").
   Same-origin MPA view transitions: each nav cross-fades instead of tearing the document
   down, and the named rails hold perfectly still across pages. Engines without support
   ignore all of this harmlessly.
   SCOPED TO THE DESKTOP (4 Jul 2026, evening): on the phone WebView the cross-document
   transition snapshotted the spinning cyber command-core home — Grant: "it rotates away
   into nothingness and the buttons dont do anything and when you finally go somewhere it
   reverts with the ugly bottom menu". The outgoing spinning core faded out slowly, taps
   died under the lingering ::view-transition overlay, and pages arrived showing the mobile
   bottom bar. Gate the WHOLE feature to a fine-pointer desktop ≥1001px so the phone (and
   any coarse-pointer/landscape tablet ≤1000px) navigates instantly again, exactly as it
   did before this change. The 7-day static caching + font preloads from the same 4 Jul
   change are viewport-agnostic and stay — they help the phone too. */
@media (min-width: 1001px) and (pointer: fine) {
  @view-transition { navigation: auto; }
  .topbar { view-transition-name: castor-topbar; }
  .bottombar { view-transition-name: castor-bottombar; }
  #castor-dock { view-transition-name: castor-dock; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .14s; }
  ::view-transition-old(castor-topbar), ::view-transition-new(castor-topbar),
  ::view-transition-old(castor-bottombar), ::view-transition-new(castor-bottombar),
  ::view-transition-old(castor-dock), ::view-transition-new(castor-dock) { animation: none; }
  @media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  }
}
body {
  font-family: "Liberation Sans", -apple-system, "Segoe UI", Arial, sans-serif;
  color: var(--body);
  background: var(--bg);
  font-size: 14.5px;
  line-height: 1.5;
}
h1, h2, h3, h4, .display {
  font-family: "Poppins", "Segoe UI", Arial, sans-serif;
  color: var(--dark);
  font-weight: 600;
  letter-spacing: .1px;
}
a { color: var(--dark); text-decoration: none; }
a:hover { color: var(--gold-ink); }  /* raw gold fails 4.5:1 on light; dark surfaces override */
a:active { opacity: .65; }

/* Pressed states (13 Jun 2026): the WebView's tap highlight is suppressed, so every
   tappable thing acknowledges the press itself — gloves + Tailscale latency demand it. */
.btn:active { transform: scale(.97); filter: brightness(.9); }
.hublink:active, .stat:active { transform: scale(.985); background: var(--zebra); }
tbody tr:active { background: #E2EAE5; }
.tag-strip a:active, .bottombar a:active { opacity: .6; }

/* --- top bar --- */
.topbar {
  background: var(--band);
  border-bottom: 2px solid var(--gold);
  padding: 0 24px;
  display: flex; align-items: center; gap: 28px;
  min-height: 60px;
  position: sticky; top: 0; z-index: 50;
}
.topbar .brand img { height: 30px; display: block; }
/* Back link — the app shells (Android WebView, PC Edge app-window) have no browser chrome and the
   phone bottom-bar is gone. This sits INSIDE the page content (top-left, above the heading), NOT in
   the nav bar. A quiet pill so it never competes with the brand or the page title. */
.navback {
  display: inline-flex; align-items: center; gap: 3px;
  margin: 0 0 14px; padding: 6px 13px 6px 9px;
  background: transparent; color: var(--grey);
  border: 1px solid var(--line); border-radius: 999px;
  font-family: "Poppins", "Segoe UI", Arial, sans-serif; font-size: 12.5px; font-weight: 600;
  cursor: pointer; letter-spacing: .2px;
}
.navback:hover { color: var(--dark); border-color: var(--gold); background: var(--gold-soft); }
.navback:active { transform: translateY(1px); }
.navback .nb-ic { font-size: 18px; line-height: 1; margin-top: -1px; }
.topbar nav { display: flex; gap: 4px; flex-wrap: wrap; }
.topbar nav a {
  color: var(--silver);
  font-family: "Poppins", "Segoe UI", Arial, sans-serif;
  font-size: 13px; font-weight: 500;
  padding: 8px 12px; border-radius: 6px;
  letter-spacing: .2px;
}
.topbar nav a:hover { color: var(--white); background: rgba(255,255,255,.06); }
.topbar nav a.active { color: var(--band); background: var(--gold); }
.topbar .spacer { flex: 1; }
.topbar .region {
  color: var(--grey-on-dark); font-size: 11px; letter-spacing: 2px;
  font-family: "Poppins", sans-serif; text-transform: uppercase;
}
/* Half-snapped windows (761–1100px): let the topbar scroll instead of pushing
   search/Settings past the right edge. */
@media (min-width: 761px) and (max-width: 1100px) {
  .topbar { overflow-x: auto; scrollbar-width: none; }
}

/* --- layout --- */
.wrap { max-width: 1460px; margin: 0 auto; padding: 26px 32px 60px; }
@media (min-width: 2200px) { .wrap { max-width: 1760px; } }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.page-head h1 { margin: 0; font-size: 25px; }
.page-head .sub { color: var(--grey); font-size: 13px; margin-top: 3px; }
.breadcrumb { color: var(--grey); font-size: 12.5px; margin-bottom: 4px; }
.breadcrumb a { color: var(--grey); }
.breadcrumb a:hover { color: var(--gold-ink); }  /* 25 Jul 2026: raw gold was 2.3:1 on the light page (cf. line 92) */

/* --- cards --- */
.card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: var(--shadow);
  padding: 20px 22px; margin-bottom: 18px;
}
.card h2, .card h3 { margin-top: 0; }
.card-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.card-title h2, .card-title h3 { margin: 0; font-size: 16px; }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 820px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* --- stat tiles --- */
.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 22px; }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat {
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  padding: 16px 18px; box-shadow: var(--shadow); display: block;
}
.stat .k { font-family: "Poppins", sans-serif; font-size: 27px; font-weight: 700; color: var(--dark); line-height: 1.1; }
.stat .l { color: var(--grey); font-size: 12px; text-transform: uppercase; letter-spacing: .6px; margin-top: 6px; }
.stat.accent { background: linear-gradient(180deg, #1d1d1d, #141414); border-color: #000; }
.stat.accent .k { color: var(--gold); }
.stat.accent .l { color: var(--silver); }

/* --- tables --- */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
thead th {
  background: var(--dark); color: var(--white);
  font-family: "Poppins", sans-serif; font-weight: 500; font-size: 11.5px;
  letter-spacing: .4px; text-transform: uppercase;
  text-align: left; padding: 9px 12px;
}
thead th.r, td.r { text-align: right; }
tbody td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:nth-child(even) { background: var(--zebra); }
tbody tr:hover { background: #EEF3F0; }
table a { font-weight: 600; }
.muted { color: var(--grey); }
.mono { font-family: "Liberation Mono", Consolas, monospace; font-size: 12.5px; letter-spacing: .3px; }
.rego {
  display: inline-block; font-family: "Liberation Mono", Consolas, monospace;
  font-weight: 700; letter-spacing: 1px; background: #1c1c1c; color: #fff;
  border: 1px solid #000; border-radius: 4px; padding: 1px 7px; font-size: 12px;
}

/* --- pills / status --- */
.pill {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .2px;
  border: 1px solid var(--line); background: var(--zebra); color: var(--body);
}
.pill.gold { background: var(--gold-soft); border-color: #E8D29A; color: #6f5511; }
.pill.green { background: #E7F3EC; border-color: #BFE0CC; color: var(--ok-text); }
.pill.red { background: #FBEAEA; border-color: #F0CFCF; color: var(--err); }
.pill.blue { background: #E9F0F6; border-color: #C9DBEC; color: #2C5C86; }
.pill.grey { background: #ECEFEE; border-color: #DBE0DE; color: #4E5653; }
.pill.amber { background: #FBF1DC; border-color: #EAD6A6; color: var(--warn-text); }

/* --- buttons --- */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: "Poppins", sans-serif; font-weight: 500; font-size: 13px;
  padding: 8px 15px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--dark); background: var(--dark); color: var(--white);
  transition: .12s;
}
.btn:hover { background: #000; color: var(--white); }
.btn.gold { background: var(--gold); border-color: var(--gold); color: #1a1a1a; }
.btn.gold:hover { background: #b8902f; color: #1a1a1a; }
.btn.outline { background: transparent; color: var(--dark); border-color: var(--silver); }
.btn.outline:hover { border-color: var(--gold); color: var(--gold-ink); background: transparent; }
.btn.sm { padding: 5px 11px; font-size: 12px; }
.btn.danger { background: transparent; color: var(--err); border-color: #E6C4C4; }
.btn.danger:hover { background: var(--err); color: #fff; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* --- forms --- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 760px) { .form-grid { grid-template-columns: 1fr; } }
label.fld { display: block; }
label.fld .lt { display: block; font-size: 12px; font-weight: 600; color: var(--grey);
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 5px; }
/* :not() form — password/tel/search/url etc. used to render unstyled (settings, /book). */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=range]):not([type=color]),
select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--silver);
  border-radius: 7px; font: inherit; color: var(--body); background: #fff;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200,161,60,.15); }
textarea { resize: vertical; min-height: 70px; }
.hint { color: var(--grey); font-size: 12px; margin-top: 4px; }
/* Inline checkbox row inside a .fld — one house component replacing the repeated
   inline "de-emphasised label" blob (settings, customer form). Sits as a <span>
   inside the wrapping <label class="fld"> so it never nests a second <label>. */
.fld .chk { display: flex; align-items: flex-start; gap: 9px; padding-top: 3px;
  font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--body);
  font-size: 13.5px; cursor: pointer; }
.fld .chk input[type=checkbox] { flex: 0 0 auto; width: 16px; height: 16px;
  margin: 1px 0 0; accent-color: var(--gold); }

/* --- search --- */
.searchbar { display: flex; gap: 10px; margin-bottom: 16px; }
.searchbar input { max-width: 360px; }

/* --- detail layout --- */
.dl { display: grid; grid-template-columns: 130px 1fr; gap: 6px 14px; font-size: 13.5px; }
.dl dt { color: var(--grey); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; padding-top: 1px; }
.dl dd { margin: 0; }

/* --- flash --- */
.flash { padding: 11px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 13.5px; border: 1px solid; }
.flash.ok { background: #E7F3EC; border-color: #BFE0CC; color: var(--ok); }
.flash.err { background: #FBEAEA; border-color: #F0CFCF; color: var(--err); }

/* --- misc --- */
.empty { text-align: center; color: var(--grey); padding: 30px; }
.tag-strip { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.tag-strip a { font-size: 12.5px; padding: 5px 12px; border: 1px solid var(--silver); border-radius: 999px; color: var(--grey); }
.tag-strip a.active, .tag-strip a:hover { background: var(--dark); color: #fff; border-color: var(--dark); }
.section-gap { height: 6px; }
.inline-form { display: inline; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.totals { margin-left: auto; width: 320px; }
.totals td { padding: 6px 10px; }
.totals .grand td { border-top: 2px solid var(--gold); font-weight: 700; font-family: "Poppins", sans-serif; background: var(--gold-soft); }

/* --- grouped nav (topic dropdowns) --- */
.topbar nav { align-self: stretch; align-items: stretch; flex-wrap: nowrap; }
.navgrp { position: relative; display: flex; align-items: center; }
.navgrp > .navlabel {
  background: none; border: 0; cursor: pointer;
  color: var(--silver); font-family: "Poppins", "Segoe UI", Arial, sans-serif;
  font-size: 13px; font-weight: 500; letter-spacing: .2px;
  padding: 8px 12px; border-radius: 6px; display: flex; align-items: center; gap: 5px;
}
.navgrp > .navlabel .caret { font-size: 9px; opacity: .55; transform: translateY(1px); }
.navgrp:hover > .navlabel, .navgrp:focus-within > .navlabel { color: #fff; background: rgba(255,255,255,.06); }
.navgrp.active > .navlabel { color: var(--band); background: var(--gold); }
.navgrp.active > .navlabel .caret { opacity: .8; }
.navmenu {
  display: none; position: absolute; top: 100%; left: 0; min-width: 200px;
  background: #1b1b1b; border: 1px solid #333; border-top: 2px solid var(--gold);
  border-radius: 0 0 10px 10px; padding: 6px; z-index: 70;
  box-shadow: 0 14px 30px rgba(0,0,0,.45);
}
.navgrp:hover .navmenu, .navgrp:focus-within .navmenu { display: block; }
.navmenu a { display: block; padding: 9px 12px; border-radius: 6px; white-space: nowrap; }
.navmenu a .mini { color: var(--grey-on-dark); font-size: 11.5px; display: block; margin-top: 1px; letter-spacing: 0; }
.navmenu a:hover .mini { color: #cfcfcf; }

/* --- today hero --- */
.hero {
  background: linear-gradient(135deg, #1f1f1f 0%, #141414 60%);
  border: 1px solid #000; border-radius: 14px;
  padding: 28px 30px 24px; margin-bottom: 20px; box-shadow: var(--shadow);
  border-bottom: 2px solid var(--gold);
}
.hero h1 { font-family: "Poppins", sans-serif; color: #fff; font-size: 30px; font-weight: 600; line-height: 1.15; }
.hero .date { color: var(--gold); font-family: "Poppins", sans-serif; font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 6px; }
.hero .daysum { color: var(--silver); margin-top: 6px; font-size: 14px; }
.hero .ask { margin-top: 18px; display: flex; gap: 10px; }
.hero .ask input[type=text] {
  flex: 1; background: #232323; border: 1px solid #3a3a3a; color: #fff;
  padding: 12px 16px; border-radius: 9px; font-size: 15px;
}
.hero .ask input[type=text]:focus { outline: none; border-color: var(--gold); }
.btn.ghost { border: 1px solid #555; color: var(--silver); background: transparent; }
.btn.ghost:hover { border-color: var(--gold); color: var(--gold); }

/* Direct links in the grouped nav (no dropdown) — centre them like the group labels. */
.topbar nav > a { display: flex; align-items: center; }

/* --- section hub pages --- */
.hubhero {
  background: linear-gradient(135deg, #1f1f1f 0%, #141414 60%);
  border: 1px solid #000; border-radius: 14px;
  padding: 24px 28px 20px; margin-bottom: 20px; box-shadow: var(--shadow);
  border-bottom: 3px solid var(--hub-accent, var(--gold));
}
.hubhero h1 { font-family: "Poppins", sans-serif; color: #fff; font-size: 26px; font-weight: 600; }
.hubhero .kicker { color: var(--hub-accent, var(--gold)); font-family: "Poppins", sans-serif;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 4px; }
.hubhero .sub { color: var(--silver); font-size: 13.5px; margin-top: 4px; }
.hublinks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (min-width: 2200px) { .hublinks { grid-template-columns: repeat(4, 1fr); } }
.hublink {
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  padding: 16px 18px; box-shadow: var(--shadow); display: block; position: relative;
  border-left: 3px solid var(--hub-accent, var(--gold));
}
.hublink:hover { transform: translateY(-1px); border-color: var(--hub-accent, var(--gold)); }
.hublink .nm { font-family: "Poppins", sans-serif; font-weight: 600; font-size: 14.5px; color: var(--dark); }
.hublink .ds { color: var(--grey); font-size: 12.5px; margin-top: 3px; line-height: 1.45; }
.hublink .arrow { position: absolute; right: 14px; top: 14px; color: var(--hub-accent, var(--gold)); }
.hubstats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 20px; }
@media (max-width: 1100px) { .hubstats { grid-template-columns: repeat(3, 1fr); } }

.bottombar { display: none; }

/* --- phone layer (added 11 Jun 2026 for the S26 app) ---------------------
   The full CRM, thumb-usable: scrollable topbar (hover menus off — the group
   labels already link to the hub pages, which act as the menu), stacked page
   heads, side-scrolling tables, bigger tap targets. Desktop is untouched. */
/* The coarse-pointer clause keeps the S26 in phone chrome in LANDSCAPE (~900px) —
   without it, rotating the phone stranded Grant in hover-dropdown desktop nav. */
@media (max-width: 760px), (pointer: coarse) and (max-width: 1000px) {
  body { font-size: 15px; }
  .topbar {
    padding: 0 10px; gap: 10px; min-height: 52px;
    overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none;
  }
  .topbar::-webkit-scrollbar { display: none; }
  .topbar .brand img { height: 22px; }
  /* The desktop nav, search and settings link vanish on phones - the native-style
     bottom tab bar (below) is the menu. The topbar is just the brand strip. */
  .topbar nav, .topbar form, .topbar .spacer, .topbar > a:not(.brand) { display: none; }
  .navback { padding: 8px 14px; font-size: 13px; }
  .bottombar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    background: var(--band); border-top: 2px solid var(--gold);
    padding: 5px 4px calc(5px + env(safe-area-inset-bottom));
  }
  .bottombar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    justify-content: center; min-height: 48px;
    color: var(--silver); font-family: Poppins, "Segoe UI", sans-serif;
    font-size: 12px; font-weight: 600; padding: 4px 2px; min-width: 0;
  }
  .bottombar a .ic { font-size: 19px; line-height: 1; }
  .bottombar a.active { color: var(--gold); }
  /* Centre camera tab - the one-tap film-first capture. */
  .bottombar a.cap { color: var(--gold); }
  .bottombar a.cap .ic {
    background: var(--gold); color: var(--dark); width: 46px; height: 46px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    margin-top: -20px; box-shadow: 0 3px 10px rgba(0,0,0,.45);
    border: 3px solid var(--band); font-size: 20px;
  }

  .wrap { padding: 14px 12px calc(26px + env(safe-area-inset-bottom)); }
  .page-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .page-head h1 { font-size: 20px; }
  .breadcrumb { font-size: 12px; }
  .card { padding: 14px; border-radius: 12px; }
  .stats, .hubstats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  /* Hub/menu link grids one-up on phone — three-across 100px slivers were the
     primary navigation on the Workshop/Money/More tabs. */
  .hublinks { grid-template-columns: 1fr; }
  .hublink { padding: 15px 16px; }

  /* Wide registers side-scroll inside their card instead of crushing columns. */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: 15px; }
  thead th, tbody td { white-space: nowrap; max-width: 70vw; overflow: hidden; text-overflow: ellipsis; }
  thead th { font-size: 12.5px; }
  tbody td { padding: 12px; }
  .mono { font-size: 14px; }
  .pill { font-size: 12.5px; }
  .tag-strip a { padding: 8px 14px; font-size: 13px; }

  input, select, textarea { font-size: 16px; }     /* stop focus auto-zoom */
  .btn { padding: 11px 16px; font-size: 14px; min-height: 46px; }
  .btn.sm { padding: 8px 14px; font-size: 13px; min-height: 44px; }
  .btn-row { gap: 8px; }

  /* HARD backstop: the page itself can never scroll sideways. Anything that would
     overflow (long URLs in the watch digest, a stubborn flex row) wraps or clips
     instead of widening the page - which is also what made the WebView zoom out. */
  html, body { overflow-x: hidden; }
  body { overflow-wrap: break-word; }
  .wrap [style*="pre-wrap"] { word-break: break-word; }

  /* Dashboard hero: the search row (input + two buttons) needs ~400px on one line -
     stack the input full-width above the buttons instead. */
  .hero { padding: 18px 16px 16px; }
  .hero h1 { font-size: 24px; }
  .hero .ask { flex-wrap: wrap; }
  .hero .ask input[type=text] { flex: 1 1 100%; min-width: 0; }

  /* Detail pages build form rows with inline multi-column grids (e.g. area/rating/
     note/add on condition reports) - collapse them to one column on a phone. */
  .card [style*="grid-template-columns"], main [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  img, video { max-width: 100%; height: auto; }
}

/* Tyre Advisor crafted interview — chip-choice (native radio/checkbox styled as a pill) and the
   road-mapping callout. House tokens, so it matches the mockup AND the rest of the app. */
.tchips { display: flex; flex-wrap: wrap; gap: 8px; }
.tchip { position: relative; display: inline-flex; cursor: pointer; }
.tchip input { position: absolute; opacity: 0; width: 0; height: 0; }
.tchip span { padding: 8px 15px; border-radius: 999px; border: 1px solid var(--silver);
  background: var(--white); color: var(--body); font-size: 13px; line-height: 1.2; }
.tchip:hover span { border-color: var(--gold); }
.tchip input:checked + span { background: var(--gold-soft); border-color: var(--gold);
  color: var(--gold-ink); font-weight: 600; }
.tchip input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 1px; }
.tcallout { display: flex; gap: 9px; align-items: flex-start; background: #E9F0F6;
  border: 1px solid #C9DBEC; border-radius: 8px; padding: 10px 12px; margin-top: 8px;
  font-size: 12.5px; color: #2C5C86; line-height: 1.5; }
.tq { margin-bottom: 16px; }
.tq .lt { display: block; font-size: 13px; font-weight: 600; color: var(--grey); margin-bottom: 5px; }

/* Read-first reveals (suppliers/rates redesign 17 Jun 2026): a <details> whose <summary> is a
   button or "▸ Edit" label — suppress the native disclosure triangle so it reads as a deliberate
   control, not a half-open form. Scoped to .add-reveal so existing plain <details> are untouched. */
details.add-reveal { display: inline-block; }
details.add-reveal[open] { display: block; }
details.add-reveal > summary { list-style: none; cursor: pointer; }
details.add-reveal > summary::-webkit-details-marker { display: none; }
details.add-reveal > summary::marker { content: ""; }

/* Brand watermark (18 Jun 2026): the von Bibra crest pressed faintly into the page background,
   anchored bottom-right so it shows in the open page area rather than hiding behind opaque cards.
   Grayscale + low opacity so it reads as a quiet embossed brand mark, never competing with content. */
body::before {
  content: "";
  position: fixed;
  right: -2%;
  bottom: -3%;
  width: min(42vmin, 360px);
  height: min(42vmin, 360px);
  z-index: -1;
  pointer-events: none;
  background: url("crest-performance-green.png") no-repeat right bottom / contain;
  filter: grayscale(1) contrast(.85) brightness(1.12);
  opacity: .09;
}

/* Wave B (18 Jun 2026): the proactive "needs you today" worklist — a ranked, tap-to-act list
   that leads the home so Castor reads as "here's what needs you", not a database to fill in. */
.worklist { display: flex; flex-direction: column; }
.wl-item { display: flex; align-items: center; gap: 13px; padding: 12px 8px; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit; border-radius: 8px; transition: background .12s; }
.wl-item:last-child { border-bottom: 0; }
.wl-item:hover { background: var(--gold-soft); }
.wl-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.wl-dot.red { background: #B23B3B; } .wl-dot.amber { background: #C8A13C; }
.wl-dot.grey { background: #9aa39e; } .wl-dot.green { background: #256B45; }
.wl-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wl-title { font-weight: 600; font-size: 14.5px; line-height: 1.35; }
.wl-detail { color: var(--grey); font-size: 12.5px; }
.wl-act { flex: none; white-space: nowrap; }
.wl-clear { display: flex; align-items: center; gap: 9px; padding: 14px 4px; color: var(--grey); font-size: 14px; }
.wl-clear .tick { color: #256B45; font-weight: 700; font-size: 18px; }
@media (max-width: 760px) { .wl-act { display: none; } .wl-title { font-size: 14px; } }

/* Wave C (18 Jun 2026): the "Ask Castor" command palette — one front door that fuses find + do +
   ask. ⌘K / Ctrl-K / "/" open it (desktop); the gold ✨ button opens it (mobile thumb zone). */
.cmdk-back { position: fixed; inset: 0; background: rgba(20,20,20,.45); z-index: 400; display: none;
  align-items: flex-start; justify-content: center; padding-top: 11vh; }
.cmdk-back.open { display: flex; }
.cmdk { width: min(620px, 94vw); background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(20,20,20,.35); border: 1px solid var(--line); display: flex; flex-direction: column; }
.cmdk-in { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.cmdk-in .spark { color: var(--gold); font-size: 18px; }
.cmdk-in input { flex: 1; border: 0; outline: 0; font-size: 16px; background: transparent; color: #232323; }
.cmdk-in .kbd { font-family: Consolas, monospace; font-size: 11px; color: var(--grey); border: 1px solid var(--line); border-radius: 5px; padding: 2px 6px; }
.cmdk-res { max-height: 54vh; overflow-y: auto; padding: 6px; }
.cmdk-grp { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--grey); padding: 9px 10px 4px; }
.cmdk-row { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 8px; cursor: pointer; text-decoration: none; color: inherit; }
.cmdk-row.sel, .cmdk-row:hover { background: var(--gold-soft); }
.cmdk-ic { width: 22px; text-align: center; flex: none; font-size: 15px; }
.cmdk-tx { flex: 1; min-width: 0; }
.cmdk-tx .t { font-size: 14px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-tx .s { font-size: 12px; color: var(--grey); }
.cmdk-tag { font-size: 10.5px; color: var(--grey); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; flex: none; }
.cmdk-ask .cmdk-ic { color: var(--gold); }
.cmdk-fab { display: none; position: fixed; right: 16px; bottom: calc(20px + env(safe-area-inset-bottom)); width: 52px; height: 52px; border-radius: 50%;
  background: var(--gold); color: #1a1a1a; border: 0; font-size: 22px; box-shadow: 0 4px 14px rgba(20,20,20,.3);
  z-index: 350; cursor: pointer; align-items: center; justify-content: center; }
@media (max-width: 760px) { .cmdk-back { padding-top: 0; } .cmdk { width: 100vw; height: 100vh; border-radius: 0; }
  .cmdk-res { max-height: calc(100vh - 62px); } .cmdk-fab { display: flex; } }
/* audit-fix 2026-07-04: a coarse-pointer (touch) tablet in the 761–1000px band (e.g. S26 landscape)
   had no way to open the Ask Castor palette — the topbar ⌘K is hidden there. Additive: only shows
   the FAB on touch devices ≤1000px; never affects a fine-pointer (mouse) desktop. */
@media (pointer: coarse) and (max-width: 1000px) { .cmdk-fab { display: flex; } }

/* The docked assistant (19 Jun 2026): a REAL in-page panel (no iframe — Castor's frame-ancestors
   CSP blocks framing). Desktop-only static rail: open by default, toggled by the ✨ edge tab, state
   remembered. `html.dock-open` drives it (set before paint). It reserves its own right gutter (see
   the rail block below) so the middle content stays centred between the nav rail and the assistant. */
.dock-tab { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 340;
  background: #141414; color: #C8A13C; border: 0; border-radius: 10px 0 0 10px; width: 32px; height: 64px;
  font-size: 19px; cursor: pointer; box-shadow: -2px 2px 12px rgba(20,20,20,.28); }
html.dock-open .dock-tab { display: none; }
#castor-dock { position: fixed; top: 0; right: 0; height: 100vh; width: var(--rail-w); background: var(--bg);
  border-left: 2px solid var(--gold); box-shadow: -10px 0 36px rgba(20,20,20,.14); z-index: 360;
  display: none; flex-direction: column; }
html.dock-open #castor-dock { display: flex; }
.dock-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px;
  background: #141414; color: #fff; border-bottom: 2px solid #C8A13C; font-family: Poppins, sans-serif; font-size: 14px; }
.dock-head-act { display: flex; align-items: center; gap: 4px; }
.dock-head .dock-mini, .dock-head .dock-x { background: transparent; border: 0; color: #cdb87a;
  font-size: 15px; cursor: pointer; line-height: 1; text-decoration: none; padding: 3px 5px; border-radius: 6px; }
.dock-head .dock-mini:hover, .dock-head .dock-x:hover { color: #fff; background: rgba(255,255,255,.08); }
.dock-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.dock-body .dnote { color: #5a5f5c; font-size: 13px; line-height: 1.55; }
.dock-body .dnote a { color: var(--dark); }
.dchip { align-self: flex-start; text-align: left; background: var(--white); border: 1px solid var(--line);
  border-radius: 9px; padding: 7px 11px; font-size: 12.5px; color: var(--body); cursor: pointer; }
.dchip:hover { border-color: var(--gold); }
.dmsg { max-width: 92%; padding: 9px 12px; border-radius: 13px; font-size: 13px; line-height: 1.5; }
.dmsg.user { align-self: flex-end; background: #141414; color: #fff; border-bottom-right-radius: 4px; }
.dmsg.ai { align-self: flex-start; background: var(--white); border: 1px solid var(--line); color: var(--body); border-bottom-left-radius: 4px; }
.dmsg.ai.err { background: #fbeeee; border-color: #e6bdbd; color: #8a1f1f; }
.dmsg .dmeta { margin-top: 5px; font-size: 11px; color: #9aa09c; }
.ddots i { display: inline-block; width: 6px; height: 6px; margin: 0 2px; background: var(--gold); border-radius: 50%; animation: ddot 1s infinite; }
.ddots i:nth-child(2) { animation-delay: .15s; } .ddots i:nth-child(3) { animation-delay: .3s; }
@keyframes ddot { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.dock-foot { display: flex; gap: 8px; align-items: flex-end; padding: 10px; border-top: 1px solid var(--line); background: var(--white); }
.dock-foot textarea { flex: 1; resize: none; border: 1px solid var(--silver); border-radius: 9px; padding: 9px 11px;
  font-family: inherit; font-size: 13px; line-height: 1.4; max-height: 120px; }
.dock-foot textarea:focus { outline: none; border-color: var(--gold); }
.dock-send { background: #141414; color: #C8A13C; border: 0; border-radius: 9px; min-width: 42px; cursor: pointer; font-size: 15px; }
.dock-send:hover { background: #000; }
/* Desktop-only: phone/tablet use the ✨ command palette + the full /assistant page. */
@media (max-width: 1000px) { .dock-tab, #castor-dock { display: none !important; } }

/* Ask Castor front door (Wave D2) — central to navigation; opens the ⌘K palette. */
.ask-rail { display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: rgba(200,161,60,.14); border: 1px solid rgba(200,161,60,.5); color: var(--gold);
  font-family: "Poppins", "Segoe UI", sans-serif; font-size: 13px; font-weight: 500; padding: 8px 12px;
  border-radius: 8px; white-space: nowrap; }
.ask-rail:hover { background: rgba(200,161,60,.24); }
.ask-rail .kbd { font-family: Consolas, monospace; font-size: 11px; color: var(--silver);
  border: 1px solid #4a4a4a; border-radius: 4px; padding: 1px 5px; }
/* The crest used as the "Ask Castor"/assistant mark across rail, dock, FAB and menu — base
   sizing so the full-res PNG never blows up the layout (cyber.css adds the gold glow). */
.ask-crest { height: 18px; width: auto; vertical-align: middle; }
.cmdk-fab .ask-crest, .dock-tab .ask-crest { height: 20px; }
@media (max-width: 760px), (pointer: coarse) and (max-width: 1000px) { .ask-rail { display: none; } }

/* Wave D2 (18 Jun 2026): the desktop LEFT NAV RAIL — turns the horizontal topbar into a fixed left
   sidebar so the desktop is a true 3-column shell (rail · content · docked assistant). AI-centric:
   the Ask Castor / ⌘K front door leads. Main groups link to their hubs (⌘K handles deep nav, so no
   hover-flyouts); the Panels/account menus render inline. ONLY ≥1001px (real desktops) — narrower
   windows and touch devices keep the existing topbar / bottom-bar layout untouched. */
@media (min-width: 1001px) {
  .topbar {
    flex-direction: column; align-items: stretch; gap: 0;
    position: fixed; left: 0; top: 0; height: 100vh; width: var(--rail-w);
    padding: 14px 12px; overflow-y: auto; overflow-x: hidden;
    border-bottom: 0; border-right: 2px solid var(--gold); z-index: 90;
  }
  .topbar .brand { padding: 2px 6px 12px; }
  .topbar .brand img { height: 26px; }
  .ask-rail { width: 100%; justify-content: space-between; margin: 0 0 12px; }
  .topbar nav { flex-direction: column; align-items: stretch; gap: 2px; flex-wrap: nowrap; width: 100%; }
  .topbar nav a, .navgrp > .navlabel { width: 100%; box-sizing: border-box; justify-content: flex-start;
    font-size: 13.5px; padding: 9px 12px; }
  .navgrp { display: block; width: 100%; position: static; }
  .navgrp > .navlabel .caret { display: none; }
  .topbar nav .navmenu { display: none !important; }
  .topbar .spacer { flex: 1 1 8px; min-height: 8px; }
  .topbar form.topsearch { width: 100%; margin: 6px 0 0; }
  .topbar form.topsearch input { width: 100% !important; box-sizing: border-box; }
  .topbar > a:not(.brand) { width: 100%; box-sizing: border-box; }
  .topbar > .navgrp { width: 100%; }
  .topbar > .navgrp > .navlabel { width: 100%; }
  .topbar > .navgrp .navmenu { display: block; position: static; left: auto; top: auto; min-width: 0;
    background: transparent; border: 0; box-shadow: none; padding: 2px 0 6px 12px; }
  /* Reserve the fixed nav rail as the body's left gutter and centre the content in the band that
     remains, so on wide / ultrawide monitors the middle column stays CENTRED (it used to hug the
     rail). When the assistant is docked it reserves the right gutter too — content stays centred
     between the two rails. */
  body { padding-left: var(--rail-gutter); }
  .wrap { margin-left: auto; margin-right: auto; max-width: 1280px; }
  html.dock-open body { padding-right: var(--rail-gutter); }
}