/* The look of the whole app. Loaded last, so it restates the tokens and the shapes every page shares.
   v2 (2026-11-11): the app sits in a frame (sidebar on the frame colour, pages on an inset sheet with one sticky top bar),
   one type scale, and one set of cards, tables, controls and motion for the Dealership and Coaching pages alike.
   Warm paper + ink in light (the default), deep navy in dark, champagne as the brand accent, green for good data.
   index.html always sets data-theme (light unless the person picked dark), so older prefers-color-scheme rules never apply. */
:root, :root[data-theme="light"] {
  --frame: #ebe7de; --bg: #f8f6f1; --surface: #ffffff; --surface-2: #f7f4ee; --surface-3: #efebe2; --line: #e5dfd3; --line-2: #eeeae0; --sheet-line: #ddd6c8;
  --ink: #10171f; --ink-2: #333d49; --muted: #667080; --faint: #68707c;
  --accent: #0c6a57; --accent-2: #095647; --accent-soft: #e1f0ea; --accent-ink: #ffffff;
  --red: #bf3a2f; --red-soft: #fbeae7; --amber: #9a5a0a; --amber-soft: #fbf1df; --blue: #2a57bd; --blue-soft: #e8eefb;
  --good: #12775a; --good-soft: #e1f2ea; --great: #0c6a57; --violet: #6846b8; --violet-soft: #efeafa;
  --bar-1: #0c6a57; --bar-2: #86bdb0; --track: #eee9df;
  --brand: #a8874a; --brand-soft: #f3ead8;
  --side: transparent; --side-ink: #3a444f; --side-muted: #7f8791; --side-on: #10171f; --side-hover: rgba(16, 23, 31, .055); --side-line: #d9d3c6;
  --shadow: 0 1px 2px rgba(16, 23, 31, .04), 0 6px 18px -12px rgba(16, 23, 31, .16);
  --shadow-hover: 0 1px 2px rgba(16, 23, 31, .05), 0 12px 28px -14px rgba(16, 23, 31, .26);
  --shadow-lg: 0 28px 70px -20px rgba(16, 23, 31, .34), 0 2px 6px rgba(16, 23, 31, .06);
  --seg-on: #ffffff; --sk: #ece7dc; --ring: rgba(12, 106, 87, .2); --tip: #121a23; --tip-ink: #e9edf2; --tip-mut: #a4aebb;
  --radius: 14px;
  --glow-1: rgba(168, 135, 74, .13); --glow-2: rgba(12, 106, 87, .05);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --frame: #05080c; --bg: #0a1017; --surface: #101821; --surface-2: #131d28; --surface-3: #0c131b; --line: #1f2c3a; --line-2: #18232f; --sheet-line: #1a2531;
  --ink: #edf0f4; --ink-2: #c5cdd8; --muted: #8d98a7; --faint: #7a8696;
  --accent: #4cc7a6; --accent-2: #3bb193; --accent-soft: #11302a; --accent-ink: #06140f;
  --red: #f0756b; --red-soft: #391d1b; --amber: #efb65f; --amber-soft: #342816; --blue: #7da4ff; --blue-soft: #1a2643;
  --good: #55cc9f; --good-soft: #122a20; --great: #4cc7a6; --violet: #b6a0f6; --violet-soft: #251e3e;
  --bar-1: #4cc7a6; --bar-2: #2a6156; --track: #1a2633;
  --brand: #d3bd8e; --brand-soft: #2a2518;
  --side: transparent; --side-ink: #b7c0cc; --side-muted: #6f7a88; --side-on: #ffffff; --side-hover: rgba(255, 255, 255, .055); --side-line: #18222e;
  --shadow: 0 1px 0 rgba(255, 255, 255, .025) inset, 0 10px 30px -20px rgba(0, 0, 0, .9);
  --shadow-hover: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 16px 36px -18px rgba(0, 0, 0, 1);
  --shadow-lg: 0 30px 80px -14px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .04);
  --seg-on: #1c2937; --sk: #131c27; --ring: rgba(76, 199, 166, .26); --tip: #1b2633; --tip-ink: #edf0f4; --tip-mut: #9aa6b5;
  --glow-1: rgba(211, 189, 142, .07); --glow-2: rgba(76, 140, 190, .08);
  color-scheme: dark;
}

/* ---------------------------------------------------------------- base */
body { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; font-optical-sizing: auto; letter-spacing: -.006em; text-rendering: optimizeLegibility;
  background: radial-gradient(1100px 520px at 88% -12%, var(--glow-1), transparent 62%), radial-gradient(900px 480px at -6% -8%, var(--glow-2), transparent 60%), var(--bg); background-attachment: fixed; }
main, .main, #app { background: transparent; }
::selection { background: var(--brand-soft); }
.shell :is(a, button, summary, [tabindex], [role="link"]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.shell * { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.shell h1 { font-family: inherit; font-weight: 650; letter-spacing: -.024em; }
.shell .num, .shell td, .shell .kpi .v { font-variant-numeric: tabular-nums; }
.dos { --radius: 14px; }

/* ---------------------------------------------------------------- the frame (desktop) */
.gbar { display: none; }
@media (min-width: 901px) {
  body { background: var(--frame); }
  .shell { grid-template-columns: 244px minmax(0, 1fr); background: none; }
  .side { background: transparent; border-right: 0; padding: 18px 12px 14px 14px; }
  .stage { position: relative; min-width: 0; margin: 10px 10px 10px 0; min-height: calc(100vh - 20px); background: var(--bg); border: 1px solid var(--sheet-line); border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16, 23, 31, .04), 0 18px 50px -30px rgba(16, 23, 31, .22); }
  .stage::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 440px; border-radius: 15px 15px 0 0; pointer-events: none;
    background: radial-gradient(900px 400px at 86% -14%, var(--glow-1), transparent 66%), radial-gradient(700px 380px at 4% -18%, var(--glow-2), transparent 62%); }
  .gbar { display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 30; height: 58px; padding: 0 28px; border-radius: 15px 15px 0 0;
    background: var(--bg); background: color-mix(in srgb, var(--bg) 80%, transparent); -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px);
    border-bottom: 1px solid transparent; transition: border-color .2s; }
  .gbar.scrolled { border-bottom-color: var(--line); border-radius: 0; }
  /* The search and Ask sit together in the middle of the bar, over the page's own centred column, and Refresh keeps to the right
     edge of that column. On a wide monitor they used to sit at the far left and far right of the sheet, a long way from the
     palette and the panel they open (Daniel 2026-11-11). */
  .gbar { display: grid; grid-template-columns: 1fr minmax(240px, 520px) auto 1fr; padding: 0 max(28px, calc((100% - 1420px) / 2 + 28px)); }
  .gbar .grow { display: none; }
  .gbar > * { grid-row: 1; }
  .gbar .gb-search { grid-column: 2; width: 100%; }
  .gbar #gbAsk { grid-column: 3; }
  .gbar #gbRefresh { grid-column: 4; justify-self: end; }
  .shell main { position: relative; padding: 6px 28px 84px; max-width: 1420px; width: 100%; margin: 0 auto; }
  .dos .topbar { display: none; }                         /* the frame's bar has the search and Refresh */
  .askfab, #askFab { display: none !important; }          /* Ask lives in the bar */
  .side .gsbtn { display: none; }                         /* so does the search */
  .panel, #app > h2 { scroll-margin-top: 70px; }
  html { scroll-padding-top: 112px; }                    /* anything scrolled into view clears the bar and a pinned table head */
}
.gb-search { display: inline-flex; align-items: center; gap: 9px; height: 36px; width: min(400px, 44vw); padding: 0 8px 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); font-size: 13.5px; cursor: pointer; text-align: left; box-shadow: 0 1px 1px rgba(16, 23, 31, .03); transition: border-color .15s, box-shadow .15s, color .15s; }
.gb-search:hover { border-color: var(--faint); color: var(--ink-2); }
.gb-search span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gb-search svg, .gb-btn svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.gb-search kbd, .gsfoot kbd { font: 500 11px/1 inherit; color: var(--faint); border: 1px solid var(--line); border-radius: 5px; padding: 3px 5px; background: var(--surface-2); }
.gb-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  font-weight: 550; font-size: 13px; cursor: pointer; white-space: nowrap; box-shadow: 0 1px 1px rgba(16, 23, 31, .03); transition: border-color .15s, background .15s, transform .08s; }
.gb-btn:hover { border-color: var(--faint); } .gb-btn:active { transform: scale(.98); }
.gb-btn.busy svg { animation: gb-spin 1s linear infinite; } @keyframes gb-spin { to { transform: rotate(360deg); } }
.gb-ask { background: var(--ink); border-color: var(--ink); color: var(--bg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(16, 23, 31, .25); }
.gb-ask:hover { border-color: var(--ink); background: var(--ink-2); background: color-mix(in srgb, var(--ink) 86%, var(--bg)); } .gb-ask svg { stroke: var(--brand); }

/* ---------------------------------------------------------------- sidebar */
.logo { gap: 11px; padding: 4px 8px 18px; }
.logo .mark { width: 38px; height: 38px; border-radius: 11px; background: #10171f; color: #c9ae78; display: grid; place-items: center; font-family: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 1px 2px rgba(16, 23, 31, .25), 0 6px 14px -8px rgba(16, 23, 31, .5); }
.logo .mark svg { width: 25px; height: auto; display: block; }
:root[data-theme="dark"] .logo .mark { background: #111a25; }
.logo b { color: var(--side-on); font-size: 15px; font-weight: 650; letter-spacing: -.012em; } .logo small { color: var(--side-muted); font-size: 10.5px; letter-spacing: .13em; }
.navgroup { letter-spacing: .13em; font-size: 10.5px; font-weight: 600; color: var(--side-muted); }
#nav { gap: 1px; }
#nav a { border-radius: 9px; padding: 7px 10px; font-size: 13.5px; color: var(--side-ink); transition: background .15s, color .15s, box-shadow .15s; }
#nav a svg { width: 17px; height: 17px; opacity: .78; }
#nav a:hover { background: var(--side-hover); color: var(--side-on); }
#nav a.on { background: var(--surface); color: var(--side-on); font-weight: 600; box-shadow: 0 0 0 1px var(--sheet-line), 0 1px 2px rgba(16, 23, 31, .05), 0 6px 14px -8px rgba(16, 23, 31, .2); }
#nav a.on svg { stroke: var(--brand); opacity: 1; }
:root[data-theme="dark"] #nav a.on { background: #121b26; box-shadow: 0 0 0 1px #223041, 0 8px 18px -10px rgba(0, 0, 0, .9); }
.side-foot { border-top-color: var(--side-line); gap: 6px; display: grid; grid-template-columns: minmax(0, 1fr) auto; } .side-foot > * { grid-column: 1 / -1; }
/* status lines (data sources, grader): quiet fine print in one group, then the divider */
.srcdots { gap: 2px; border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.srcrow, .side-foot .worker { font-size: 10.5px; line-height: 1.45; gap: 6px; color: var(--side-muted); }
.srcrow .sdot, .side-foot .worker .dot { width: 5px; height: 5px; flex: none; }
.side-foot .worker { align-items: center; } .side-foot .srcdots + .worker { margin-top: -4px; padding-bottom: 8px; border-bottom: 1px solid var(--side-line); margin-bottom: 2px; }
/* account row, then theme switch and sign out side by side */
.side-foot .me { display: flex; align-items: center; gap: 9px; padding: 4px 0 2px; overflow: visible; }
.me .av { width: 28px; height: 28px; border-radius: 50%; background: #10171f; color: #c9ae78; display: grid; place-items: center; font-size: 10.5px; font-weight: 650; letter-spacing: .03em; flex: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
:root[data-theme="dark"] .me .av { background: #18232f; }
.me .who { min-width: 0; display: grid; line-height: 1.25; }
.me .who b { font-size: 12.5px; font-weight: 600; color: var(--side-on); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me .who small { font-size: 11px; color: var(--side-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-foot .themeBtn { grid-column: 1; } .side-foot #signout { grid-column: 2; text-align: right; }
.side-foot .themeBtn, .side-foot #signout { font-size: 12px; color: var(--side-muted); transition: color .15s; } .side-foot .themeBtn:hover, .side-foot #signout:hover { color: var(--side-on); }

/* ---------------------------------------------------------------- page header */
.shell .head { margin: 12px 0 20px; }
.shell .head h1, .shell .dos .head h1 { font-size: 25px; line-height: 1.15; }
.shell .head p, .shell .dos .head p { color: var(--muted); font-size: 13.5px; line-height: 1.5; max-width: 700px; margin-top: 6px; }
.shell h2 { letter-spacing: .07em; }

/* ---------------------------------------------------------------- cards and panels */
.panel, .dos .panel, .card, .kpi, .dos .kpi { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.dos .panel .ph { padding: 15px 18px 11px; } .dos .panel .ph h2 { font-size: 14.5px; letter-spacing: -.01em; }
.dos .health { border-radius: var(--radius); box-shadow: var(--shadow); }
.dos .panel + .grid2, .dos .panel + .grid3, .dos details.panel + .grid2, .dos .panel + .health { margin-top: 16px; }

/* stat cards: label, number, context; the selected one gets an ink ring, not a tint */
.kpi, .dos .kpi { transition: border-color .15s, box-shadow .2s; }
@media (min-width: 901px) { .kpi, .dos .kpi { padding: 14px 16px 15px; } }
/* phones: Today's small trend sits beside the number, clear of the label */
@media (max-width: 700px) { .dos .kpi > .spark { top: 36px; right: 10px; width: 56px; } }
.kpi .l, .dos .kpi .l { font-size: 12px; font-weight: 550; color: var(--muted); text-transform: none; letter-spacing: 0; }
.kpi .v, .dos .kpi .v { font-size: 27px; font-weight: 650; letter-spacing: -.032em; line-height: 1.15; margin-top: 6px; }
.kpi .s, .dos .kpi .s { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.4; }
.dos .kpi:not(.static):hover, .kpi.click:hover { border-color: var(--faint); box-shadow: var(--shadow-hover); transform: none; }
.dos .kpi.sel, .kpi.sel { border-color: var(--ink); background: var(--surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 9%, transparent), var(--shadow); }
/* seven cards: four then three across the full width, instead of six and an orphan */
@media (min-width: 901px) { .dos .kpis:has(> :nth-child(7):last-child) { display: flex; flex-wrap: wrap; } .dos .kpis:has(> :nth-child(7):last-child) > * { flex: 1 1 22%; } }
/* the hover hint beside a card's label ("rows ↓") must not push the label onto a second line; a text value may wrap */
.dos .kpi .l { position: relative; } .dos .kpi .l i { position: absolute; right: 0; top: 0; padding-left: 8px; background: var(--surface); }
.dos .kpi .v[style*="font-size"] { white-space: normal; letter-spacing: -.015em; margin-top: 8px; }

/* ---------------------------------------------------------------- tables: one header style everywhere */
.shell th, .dos th { font-size: 12px; font-weight: 550; letter-spacing: 0; text-transform: none; color: var(--muted); background: var(--surface); border-bottom: 1px solid var(--line); }
.dos th { background: transparent; }
.shell tbody tr { transition: background .12s; } .shell tbody tr:hover td { background: var(--surface-2); }
.dos tfoot td { background: var(--surface-2); }
.shell td .sub, .dos td.car .sub, .dos .car .sub { color: var(--muted); }

/* ---------------------------------------------------------------- controls */
.btn { min-height: 36px; padding: 7px 14px; border-radius: 10px; font-size: 13.5px; font-weight: 600; transition: background .15s, border-color .15s, box-shadow .15s, transform .08s; }
.btn:active:not(:disabled) { transform: scale(.985); }
.btn.primary { background: var(--ink); color: var(--bg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(16, 23, 31, .25), 0 8px 18px -12px rgba(16, 23, 31, .5); }
.btn.primary:hover { background: var(--ink-2); background: color-mix(in srgb, var(--ink) 86%, var(--bg)); }
.btn.ghost { background: var(--surface); border-color: var(--line); color: var(--ink-2); box-shadow: 0 1px 1px rgba(16, 23, 31, .03); } .btn.ghost:hover { border-color: var(--faint); background: var(--surface-2); }
.btn.sm { min-height: 28px; padding: 3px 10px; font-size: 12.5px; border-radius: 8px; }
.dos .iconbtn { border-radius: 10px; box-shadow: 0 1px 1px rgba(16, 23, 31, .03); transition: border-color .15s, background .15s; }
:where(.shell) input:where(:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])), :where(.shell) select, :where(.shell) textarea { border-radius: 10px; border-color: var(--line); transition: border-color .15s, box-shadow .15s; }
:where(.shell) :is(input, select, textarea):focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
:where(.shell) select { -webkit-appearance: none; appearance: none; min-height: 36px; padding: 6px 30px 6px 11px; cursor: pointer; font-weight: 500;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%237a8492' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 12px; }
.shell input[type="checkbox"], .shell input[type="radio"] { accent-color: var(--accent); }
/* segmented controls: a quiet track with the chosen option lifted off it */
.seg, .dos .seg { background: var(--surface-3); border: 0; box-shadow: inset 0 0 0 1px var(--line-2); border-radius: 10px; padding: 3px; gap: 2px; }
.seg button, .dos .seg button { border-radius: 7.5px; padding: 5px 11px; font-size: 13px; font-weight: 550; color: var(--muted); transition: color .15s, background .15s, box-shadow .15s; }
.seg button:hover, .dos .seg button:hover { color: var(--ink); }
.seg button.on, .dos .seg button.on { background: var(--seg-on); color: var(--ink); box-shadow: 0 1px 2px rgba(16, 23, 31, .13), 0 0 0 .5px rgba(16, 23, 31, .08); }
.dos .search, .gsbtn { border-radius: 10px; }
.chip, .dos .chip { border-radius: 999px; }
.tabs a { transition: color .15s, border-color .15s; } .tabs a.on { border-bottom-color: var(--ink); }
.badge { background: var(--brand); }

/* ---------------------------------------------------------------- feedback */
.ctip { background: var(--tip); color: var(--tip-ink); border: 0; border-radius: 9px; padding: 7px 10px; font-size: 12px; line-height: 1.45; box-shadow: 0 12px 32px -10px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .05); }
.ctip b { color: #fff; font-weight: 600; } .ctip div:last-child:not(:only-child) { color: var(--tip-mut); }
.toast { border-radius: 11px; box-shadow: var(--shadow-lg); font-weight: 500; }
.banner, .dos .infobar { border-radius: 11px; }
/* a page that is still loading shows its outline (title, four cards, a panel) instead of a spinner */
#app > .loading { padding: 12px 0 0; text-align: left; }
#app > .loading .spin { display: none; }
#app > .loading::before { content: ""; display: block; height: 560px; animation: sk 1s ease-in-out infinite alternate; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='560' fill='%23ece8de'%3E%3Crect y='4' width='170' height='26' rx='8'/%3E%3Crect y='46' width='42%25' height='12' rx='6'/%3E%3Crect y='92' width='24.2%25' height='104' rx='14'/%3E%3Crect x='25.27%25' y='92' width='24.2%25' height='104' rx='14'/%3E%3Crect x='50.53%25' y='92' width='24.2%25' height='104' rx='14'/%3E%3Crect x='75.8%25' y='92' width='24.2%25' height='104' rx='14'/%3E%3Crect y='212' width='100%25' height='340' rx='14'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 560px; }
:root[data-theme="dark"] #app > .loading::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='560' fill='%23131c27'%3E%3Crect y='4' width='170' height='26' rx='8'/%3E%3Crect y='46' width='42%25' height='12' rx='6'/%3E%3Crect y='92' width='24.2%25' height='104' rx='14'/%3E%3Crect x='25.27%25' y='92' width='24.2%25' height='104' rx='14'/%3E%3Crect x='50.53%25' y='92' width='24.2%25' height='104' rx='14'/%3E%3Crect x='75.8%25' y='92' width='24.2%25' height='104' rx='14'/%3E%3Crect y='212' width='100%25' height='340' rx='14'/%3E%3C/svg%3E"); }
@keyframes sk { from { opacity: .5; } to { opacity: 1; } }

/* ---------------------------------------------------------------- search palette */
.gsscrim { position: fixed; inset: 0; z-index: 69; background: rgba(10, 14, 19, .34); opacity: 0; pointer-events: none; transition: opacity .16s; }
.gsec { font-size: 10.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--faint); padding: 12px 16px 5px; }
.gsres a.gi { align-items: center; } .gsres a.gi.on { background: var(--surface-2); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.gsres a.pg { grid-template-columns: 22px minmax(0, 1fr) auto; min-height: 44px; }
.gsres a.pg svg { width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; grid-row: 1; }
.gsres a.pg b { font-weight: 550; grid-column: 2; grid-row: 1; } .gsres a.pg small { grid-column: 3; grid-row: 1; }
.gsfoot { display: none; }
@media (min-width: 901px) {
  .gsscrim.on { opacity: 1; pointer-events: auto; }
  /* No scroll lock on a wide screen. With overflow hidden on html and body the page jumped to another scroll position and the
     sticky sidebar slid off the top ("when I click the search ... the sidebar disappears"). The backdrop swallows the wheel
     instead (search.js, ask.js). */
  html.asking, html.searching, html.asking body, html.searching body { overflow: visible; }
  /* The palette opens over the bar's search field, centred on the sheet (the window minus the 244px sidebar and the 10px margin),
     so it reads as the field opening up. --mid is that centre line; the Ask panel uses it too. */
  :root { --mid: calc(50vw + 117px); }
  .gsearch { inset: 10px auto auto var(--mid); width: min(640px, 92vw); max-height: 72vh; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-lg); }
  html:not(.no-motion) .gsearch.on { animation: pal .17s cubic-bezier(.2, .8, .2, 1); }
  .gshead { padding: 4px 8px 4px 16px; background: transparent; border-bottom: 1px solid var(--line-2); }
  .gsbox { background: transparent; border: 0; padding: 0; height: 48px; } .gsbox input { font-size: 15.5px; }
  .gsclose { display: none; }
  .gsres { padding: 4px 6px 8px; } .gsec { padding: 10px 10px 4px; }
  .gsres a.gi { border-bottom: 0; border-radius: 9px; padding: 8px 10px; min-height: 42px; } .gsres a.gi:hover { background: transparent; } .gsres a.gi.on { background: var(--surface-2); background: color-mix(in srgb, var(--ink) 6%, transparent); }
  .gsres .gshint:first-child:not(:only-child) { display: none; }
  .gsfoot { display: flex; gap: 16px; align-items: center; padding: 9px 16px; border-top: 1px solid var(--line-2); background: var(--surface-2); font-size: 11.5px; color: var(--faint); border-radius: 0 0 15px 15px; }
  .gsfoot span { display: inline-flex; align-items: center; gap: 5px; }
  /* Ask opens as a panel under the bar, on the same centre line as the search, not from the bottom of the screen */
  .asksheet { top: 64px; bottom: auto; left: var(--mid); right: auto; width: min(560px, 92vw); height: min(700px, calc(100vh - 88px)); border-radius: 16px; border: 1px solid var(--line); box-shadow: var(--shadow-lg);
    transform: translateX(-50%) translateY(-8px) scale(.985); transform-origin: top center; opacity: 0; transition: transform .2s cubic-bezier(.2, .8, .2, 1), opacity .16s; }
  .asksheet.on { transform: translateX(-50%); opacity: 1; }
  .askscrim { background: rgba(10, 14, 19, .2); } .askgrab { display: none; } .askhead { padding-top: 12px; }
}
@keyframes pal { from { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(.985); } }

/* ---------------------------------------------------------------- motion: a short rise when the page changes, never on a re-render */
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-motion) #app.nav-in > :not(.dos), html:not(.no-motion) #app.nav-in > .dos > * { animation: rise .44s cubic-bezier(.2, .7, .2, 1) both; }
  html:not(.no-motion) #app.nav-in > .dos > :nth-child(2), html:not(.no-motion) #app.nav-in > :nth-child(2) { animation-delay: .03s; }
  html:not(.no-motion) #app.nav-in > .dos > :nth-child(3), html:not(.no-motion) #app.nav-in > :nth-child(3) { animation-delay: .06s; }
  html:not(.no-motion) #app.nav-in > .dos > :nth-child(4), html:not(.no-motion) #app.nav-in > :nth-child(4) { animation-delay: .09s; }
  html:not(.no-motion) #app.nav-in > .dos > :nth-child(n + 5), html:not(.no-motion) #app.nav-in > :nth-child(n + 5) { animation-delay: .12s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

/* ---------------------------------------------------------------- coaching pages: same parts as the Dealership ones */
.bar .t { padding: 2px 0 8px; border-radius: 0; }
.bar .t::after { content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 4px; border-radius: 2px; background: var(--track); }
.bar .t i { inset: auto auto 1px 0; height: 4px; border-radius: 2px; background: var(--bar-1); z-index: 1; }
.bar-list h3 { font-size: 14.5px; font-weight: 650; letter-spacing: -.01em; }

.askfab, #askFab { box-shadow: var(--shadow-lg); }
/* loading screen follows the theme */
#splash { background: var(--bg) !important; color: var(--brand) !important; }
/* theme switch (homepage nav) */
.lp .themeBtn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--ln); background: transparent; color: var(--mut); cursor: pointer; }
.lp .themeBtn:hover { color: var(--ink); border-color: var(--gold); } .lp .themeBtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.lp .themeBtn .moon { display: none; } :root[data-theme="dark"] .lp .themeBtn .sun { display: none; } :root[data-theme="dark"] .lp .themeBtn .moon { display: block; }