/* /Components/AppBar.razor.rz.scp.css */
/* ── App bar ─────────────────────────────────────────────────── */
.tt-appbar[b-c53wk0ldzi] {
    position: sticky;
    top: 0;
    z-index: 61;
    height: 56px;
    background: var(--tt-bar-bg);
    border-bottom: var(--tt-border-w) solid var(--tt-bar-border);
    display: flex;
    align-items: center;
    padding: 0 var(--tt-s-8);
    gap: var(--tt-s-12);
    flex-shrink: 0;
}

.tt-appbar__menu-btn[b-c53wk0ldzi],
.tt-appbar__avatar-btn[b-c53wk0ldzi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    background: transparent;
    border-radius: var(--tt-radius-8);
    padding: var(--tt-s-8);
    color: var(--tt-bar-ink);
    font-family: var(--tt-font-sans);
}

.tt-appbar__menu-btn:hover[b-c53wk0ldzi],
.tt-appbar__avatar-btn:hover[b-c53wk0ldzi] {
    background: var(--tt-surface-2);
}

.tt-appbar__spacer[b-c53wk0ldzi] { flex: 1; }

.tt-appbar__brand[b-c53wk0ldzi] {
    display: inline-flex;
    align-items: center;
    color: var(--tt-bar-ink);
    margin: 0;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    font: inherit;
}

.tt-appbar__brand:hover[b-c53wk0ldzi] { opacity: 0.85; }

.tt-appbar__brand-wm[b-c53wk0ldzi] {
    height: 30px;
    width: auto;
    display: block;
}

/* ── Avatar ──────────────────────────────────────────────────── */
.tt-avatar[b-c53wk0ldzi] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--tt-avatar-bg);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: var(--tt-weight-bold);
    user-select: none;
}

/* ── Avatar icon (unauthenticated - user icon inside circle) ─────── */
.tt-avatar[b-c53wk0ldzi]  svg {
    width: 18px;
    height: 18px;
    color: #fff;
}

/* ── Icon size helpers (::deep pierces Lucide-generated <svg>) ── */
.tt-appbar__menu-btn[b-c53wk0ldzi]  svg {
    width: 22px;
    height: 22px;
    color: var(--tt-bar-ink);
}

/* ── Popup - fixed, just below the app bar ───────────────────── */
.tt-popup[b-c53wk0ldzi] {
    position: fixed;
    top: var(--tt-s-56);
    background: var(--tt-surface-1);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-8);
    box-shadow: var(--tt-shadow-lg);
    z-index: 62;
    overflow: hidden;
    animation: tt-pop-b-c53wk0ldzi 120ms ease-out;
}

@keyframes tt-pop-b-c53wk0ldzi {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.tt-popup--menu[b-c53wk0ldzi]    { left: var(--tt-s-12);  width: max-content; min-width: 180px; }
.tt-popup--account[b-c53wk0ldzi] { right: var(--tt-s-12); width: max-content; min-width: 160px; }

/* ── PanelBar inside popups ──────────────────────────────────── */
.tt-panelbar[b-c53wk0ldzi] {
    display: flex;
    flex-direction: column;
    padding: var(--tt-s-4) 0;
}

/* ── Section header — groups nav items by pillar / account items by concern ── */
.tt-panelbar__section[b-c53wk0ldzi] {
    padding: var(--tt-s-6) var(--tt-s-14);
    margin-bottom: var(--tt-s-4);
    background: var(--tt-surface-2);
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tt-ink-4);
    user-select: none;
}

/* First header sits flush with the panel's own top edge (no top border/gap above) */
.tt-panelbar__section:first-child[b-c53wk0ldzi] {
    border-top: none;
}

.tt-panelbar__item[b-c53wk0ldzi] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-10);
    padding: 9px var(--tt-s-14);
    color: var(--tt-ink-1);
    font-size: 14px;
    font-family: var(--tt-font-sans);
    cursor: pointer;
    user-select: none;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    transition: background 100ms;
}

.tt-panelbar__item:hover[b-c53wk0ldzi] {
    background: var(--tt-surface-2);
    text-decoration: none;
}

.tt-panelbar__item.is-active[b-c53wk0ldzi] {
    background: var(--tt-accent-soft);
    color: var(--tt-primary);
    font-weight: var(--tt-weight-semibold);
    border-left: 3px solid var(--tt-primary);
    padding-left: 11px;
}

/* ── Icon sizing - ::deep pierces Lucide-generated <svg> ──────── */
.tt-panelbar__item[b-c53wk0ldzi]  svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: var(--tt-ink-3);
}

.tt-panelbar__item.is-active[b-c53wk0ldzi]  svg {
    color: var(--tt-primary);
}

/* ── Pending-invite badge on Profile menu item ─────────────────── */
.tt-panelbar__badge[b-c53wk0ldzi] {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--tt-danger);
    color: #fff;
    border-radius: var(--tt-radius-12);
    font-size: 11px;
    font-weight: var(--tt-weight-bold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
/* /Components/AppFooter.razor.rz.scp.css */
/* ── App footer ──────────────────────────────────────────────────
   #281 — the running build, as quiet chrome under the main scroll area.

   MainLayout's .tf-shell is already `display:flex; flex-direction:column` with .tf-main at
   `flex:1`, so this sits after <main> and takes its natural height with no layout changes.
   flex-shrink:0 keeps it from being squeezed, matching how .tt-appbar holds its height.

   Colour/spacing/type come from --tt-* tokens only, so light, dark and Paddock all work with
   no per-theme rules here.                                                                    */
/* Legal links left, build stamp right. Was flex-end when the stamp was the only occupant. */
.tt-appfooter[b-id78p57mg0] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tt-s-16);
    padding: var(--tt-s-6) var(--tt-s-16);
    background: var(--tt-surface-2);
    border-top: var(--tt-border-w) solid var(--tt-line);
    font-family: var(--tt-font-sans);
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-4);
}

.tt-appfooter__build[b-id78p57mg0] {
    display: inline-flex;
    align-items: center;
    gap: var(--tt-s-6);
}

/* Deliberately as quiet as the build stamp beside it - the footer's own --tt-ink-4 and
   --tt-text-xs, no link blue. These are reference links you go looking for, not something the
   chrome should advertise; the colour arrives on hover and focus. */
.tt-appfooter__links[b-id78p57mg0] {
    display: inline-flex;
    align-items: center;
    gap: var(--tt-s-12);
}

/* Buttons, not anchors (see the component comment) - so they need the browser's button styling
   stripped back to text. `font: inherit` matters: buttons do not inherit type the way a span does,
   so without it these would jump to the UA default face and size. */
.tt-appfooter__links button[b-id78p57mg0] {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.tt-appfooter__links button:hover[b-id78p57mg0] {
    color: var(--tt-ink-2);
    text-decoration: underline;
}

.tt-appfooter__links button:focus-visible[b-id78p57mg0] {
    outline: 2px solid var(--tt-primary);
    outline-offset: var(--tt-s-2);
}

/* Monospace so a sha stays legible and does not shift width between builds. */
.tt-appfooter__commit[b-id78p57mg0] {
    font-family: var(--tt-font-mono);
}

.tt-appfooter__sep[b-id78p57mg0] {
    opacity: 0.6;
}
/* /Components/Badge.razor.rz.scp.css */
.tt-badge[b-jqso8ey2ht] {
    display: inline-flex;
    align-items: center;
    padding: var(--tt-s-2) var(--tt-s-8);
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    line-height: 1.4;
    border: var(--tt-border-w) solid transparent;
    border-radius: var(--tt-radius-pill);
    white-space: nowrap;
}

/* Loud: uppercase, bold, squared status treatment. */
.tt-badge--loud[b-jqso8ey2ht] {
    height: 22px;
    padding: 0 var(--tt-s-8);
    font-weight: var(--tt-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tt-tracking-wide);
    line-height: 1;
    border-radius: var(--tt-radius-4);
}

/* Variants — background + text. */
.tt-badge--neutral[b-jqso8ey2ht] { background: var(--tt-surface-2); color: var(--tt-ink-2); }
.tt-badge--muted[b-jqso8ey2ht]   { background: var(--tt-surface-1); color: var(--tt-ink-4); }
.tt-badge--ok[b-jqso8ey2ht]      { background: color-mix(in srgb, var(--tt-status-ok) 14%, var(--tt-surface-0)); color: var(--tt-status-ok); }
.tt-badge--warn[b-jqso8ey2ht]    { background: var(--tt-status-warn-surface); color: var(--tt-status-warn-text); }
.tt-badge--crit[b-jqso8ey2ht]    { background: color-mix(in srgb, var(--tt-cta) 12%, var(--tt-surface-0)); color: var(--tt-cta); }
.tt-badge--info[b-jqso8ey2ht]    { background: var(--tt-accent-soft); color: var(--tt-accent); }
/* /Components/BandThree.razor.rz.scp.css */
/* Band 3 (#356, #355).

   Read sitting down, with time — the one band on the page where depth is affordable. The wide
   panel is the table of sector times and needs the room; the narrow column carries the diff and
   the consistency read, which are both lists.

   Every colour, space and size here is a --tt-* token. The deltas are the only place a status
   colour appears, and the tone follows the SIGN — a fixed colour made a slower session read as an
   improvement. */

/* ── Which session both tables read against ───────────────────────────────────────────────── */
.b3__picker[b-psnan2qh6l] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-8);
    flex-wrap: wrap;
    margin: 0 0 var(--tt-s-14);
    padding: var(--tt-s-8) var(--tt-s-12);
    background: var(--tt-surface-1);
}

.b3__picker-lbl[b-psnan2qh6l] {
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    letter-spacing: var(--tt-tracking-wide);
    text-transform: uppercase;
    color: var(--tt-ink-4);
}

.b3__picker-note[b-psnan2qh6l] {
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-4);
}

/* ── The band ─────────────────────────────────────────────────────────────────────────────── */
/* The uneven pair is .tt-split / __wide / __narrow in app.css. It was lifted FROM here when #400
   generalised it: "the table wants two columns' worth of room; the lists beside it read fine in
   one." A 2:1 growth ratio from unequal bases (380 / 300), so the narrow side is never crushed. */

/* ── Which file the figures came from ─────────────────────────────────────────────────────── */
.b3__source[b-psnan2qh6l] {
    font-size: var(--tt-text-sm);
    font-weight: var(--tt-weight-semibold);
    letter-spacing: var(--tt-tracking-wide);
    text-transform: uppercase;
    color: var(--tt-ink-2);
    padding-bottom: var(--tt-s-8);
    margin-bottom: var(--tt-s-10);
    border-bottom: var(--tt-border-w) solid var(--tt-line);
}

/* ── Sector rows ──────────────────────────────────────────────────────────────────────────── */
.b3__row[b-psnan2qh6l] {
    display: grid;
    grid-template-columns: 1fr 56px 56px 62px;
    gap: 0 var(--tt-s-10);
    align-items: baseline;
    padding: var(--tt-s-6) 0;
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
}

.b3__row--head[b-psnan2qh6l] {
    padding-bottom: 0;
    border-top: none;
}

/* The first session of a day has nothing to read against, so the table is name and value. */
.b3__row--solo[b-psnan2qh6l] {
    grid-template-columns: 1fr auto;
}

.b3__col[b-psnan2qh6l] {
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    letter-spacing: var(--tt-tracking-wide);
    text-transform: uppercase;
    color: var(--tt-ink-4);
    text-align: right;
}

.b3__sector[b-psnan2qh6l] {
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-2);
    min-width: 0;
}

.b3__sector-lap[b-psnan2qh6l] {
    color: var(--tt-ink-4);
    font-size: var(--tt-text-xs);
}

.b3__val[b-psnan2qh6l] {
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-2);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* The session being compared AGAINST is the quieter of the two columns: the eye should land on
   the session in hand, with the other there to read it against. */
.b3__val--prev[b-psnan2qh6l] { color: var(--tt-ink-4); }

.b3__val--gain[b-psnan2qh6l] {
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-status-ok);
}

.b3__val--loss[b-psnan2qh6l] {
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-status-crit);
}

/* Not "no change" — "not enough change to have a tone". Max speed also lands here whatever it
   did, because whether more of it is good depends on the circuit and the panel does not know. */
.b3__val--quiet[b-psnan2qh6l] { color: var(--tt-ink-4); }

/* ── The car-versus-driver read ───────────────────────────────────────────────────────────── */
.b3__split[b-psnan2qh6l] {
    margin-top: var(--tt-s-12);
    padding: var(--tt-s-10) var(--tt-s-12);
    background: var(--tt-surface-1);
}

.b3__split-figures[b-psnan2qh6l] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tt-s-10) var(--tt-s-24);
    align-items: baseline;
}

.b3__split-fig[b-psnan2qh6l] {
    display: flex;
    align-items: baseline;
    gap: var(--tt-s-6);
}

.b3__split-k[b-psnan2qh6l] {
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    letter-spacing: var(--tt-tracking-wide);
    text-transform: uppercase;
    color: var(--tt-ink-4);
}

.b3__split-v[b-psnan2qh6l] {
    font-size: var(--tt-text-base);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-1);
    font-variant-numeric: tabular-nums;
}

/* ── The prose that goes with a figure ────────────────────────────────────────────────────── */
.b3__read[b-psnan2qh6l] {
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-3);
    line-height: var(--tt-leading-normal);
    margin: var(--tt-s-6) 0 0;
    text-wrap: pretty;
}

.b3__read--tight[b-psnan2qh6l] { margin-top: var(--tt-s-4); }

/* ── Theoretical best ─────────────────────────────────────────────────────────────────────── */
.b3__theo[b-psnan2qh6l] {
    margin-top: var(--tt-s-14);
    padding-top: var(--tt-s-12);
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
    display: flex;
    align-items: baseline;
    gap: var(--tt-s-10);
    flex-wrap: wrap;
}

.b3__theo-k[b-psnan2qh6l] {
    flex: 1;
    min-width: 130px;
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    letter-spacing: var(--tt-tracking-wide);
    text-transform: uppercase;
    color: var(--tt-ink-4);
}

.b3__theo-best[b-psnan2qh6l] {
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-4);
    font-variant-numeric: tabular-nums;
}

.b3__theo-v[b-psnan2qh6l] {
    font-size: var(--tt-text-lg);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-1);
    font-variant-numeric: tabular-nums;
}

/* ── Minimum speed per sector ─────────────────────────────────────────────────────────────── */
.b3__mins[b-psnan2qh6l] {
    margin-top: var(--tt-s-14);
    padding-top: var(--tt-s-12);
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
}

.b3__mins-k[b-psnan2qh6l] {
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    letter-spacing: var(--tt-tracking-wide);
    text-transform: uppercase;
    color: var(--tt-ink-4);
    margin-bottom: var(--tt-s-6);
}

.b3__tiles[b-psnan2qh6l] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tt-s-8);
    margin-top: var(--tt-s-8);
}

/* Titled with the SECTOR, which is the finest location a lap file can place a figure at. */
.b3__tile[b-psnan2qh6l] {
    flex: 1 1 118px;
    padding: var(--tt-s-8) var(--tt-s-10);
    background: var(--tt-surface-1);
}

.b3__tile-name[b-psnan2qh6l] {
    font-size: var(--tt-text-sm);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-1);
}

.b3__tile-fig[b-psnan2qh6l] {
    display: flex;
    align-items: baseline;
    gap: var(--tt-s-4);
    margin-top: var(--tt-s-6);
}

.b3__tile-v[b-psnan2qh6l] {
    font-size: var(--tt-text-base);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-1);
    font-variant-numeric: tabular-nums;
}

.b3__tile-u[b-psnan2qh6l] {
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-4);
}

.b3__tile-vs[b-psnan2qh6l] {
    display: flex;
    align-items: baseline;
    gap: var(--tt-s-4);
    margin-top: var(--tt-s-2);
}

.b3__tile-lbl[b-psnan2qh6l] {
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-4);
}

.b3__tile-d[b-psnan2qh6l] {
    font-size: var(--tt-text-sm);
    font-variant-numeric: tabular-nums;
}

/* ── The best-lap delta ───────────────────────────────────────────────────────────────────── */
.b3__delta[b-psnan2qh6l] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-10);
    margin-bottom: var(--tt-s-12);
}

.b3__delta-v[b-psnan2qh6l] {
    font-size: var(--tt-text-2xl);
    font-weight: var(--tt-weight-light);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.b3__delta-fromto[b-psnan2qh6l] {
    flex: 1;
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-3);
    line-height: var(--tt-leading-tight);
    font-variant-numeric: tabular-nums;
}

/* ── The diff table ───────────────────────────────────────────────────────────────────────── */
.b3__drow[b-psnan2qh6l] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 58px 58px;
    gap: 0 var(--tt-s-10);
    align-items: baseline;
    padding: var(--tt-s-2) 0;
}

.b3__drow--head[b-psnan2qh6l] {
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
    padding-top: var(--tt-s-6);
}

.b3__dlabel[b-psnan2qh6l] {
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    letter-spacing: var(--tt-tracking-wide);
    text-transform: uppercase;
    color: var(--tt-ink-4);
    padding: var(--tt-s-10) 0 var(--tt-s-2);
}

.b3__dkey[b-psnan2qh6l] {
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-3);
    min-width: 0;
}

.b3__dval[b-psnan2qh6l] {
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-2);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* An absence, not a value. The em-dash is the page's one missing-value glyph. */
.b3__dval--gone[b-psnan2qh6l] { color: var(--tt-ink-4); }

.b3__dfoot[b-psnan2qh6l] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-10);
    flex-wrap: wrap;
    margin-top: var(--tt-s-12);
    padding-top: var(--tt-s-10);
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
}

.b3__dcount[b-psnan2qh6l] {
    flex: 1;
    min-width: 140px;
    font-size: var(--tt-text-sm);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-3);
    line-height: var(--tt-leading-normal);
}

/* The one piece of band-3 prose that is genuinely read once, so it sits behind a disclosure. */
.b3__why[b-psnan2qh6l] {
    padding: 0;
    background: none;
    border: none;
    font-family: inherit;
    font-size: var(--tt-text-sm);
    color: var(--tt-cta);
    cursor: pointer;
}

.b3__why:hover[b-psnan2qh6l] { opacity: .7; }

.b3__whybody[b-psnan2qh6l] {
    margin-top: var(--tt-s-8);
    padding: var(--tt-s-10) var(--tt-s-12);
    background: var(--tt-surface-1);
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-4);
    line-height: var(--tt-leading-normal);
    text-wrap: pretty;
}

/* ── Consistency ──────────────────────────────────────────────────────────────────────────── */
.b3__rep[b-psnan2qh6l] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-14);
    flex-wrap: wrap;
}

.b3__rep-fig[b-psnan2qh6l] {
    flex: 0 0 auto;
    min-width: 96px;
    padding: var(--tt-s-10) var(--tt-s-12);
    background: var(--tt-surface-1);
}

.b3__rep-k[b-psnan2qh6l] {
    font-size: var(--tt-text-xs);
    letter-spacing: var(--tt-tracking-wide);
    text-transform: uppercase;
    color: var(--tt-ink-4);
}

.b3__rep-v[b-psnan2qh6l] {
    font-size: var(--tt-text-3xl);
    font-weight: var(--tt-weight-light);
    line-height: 1.1;
    color: var(--tt-ink-1);
    font-variant-numeric: tabular-nums;
    margin-top: var(--tt-s-4);
}

.b3__rep-read[b-psnan2qh6l] {
    flex: 1;
    min-width: 150px;
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-3);
    line-height: var(--tt-leading-normal);
    margin: 0;
    text-wrap: pretty;
}

.b3__rep-foot[b-psnan2qh6l] {
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-4);
    line-height: var(--tt-leading-normal);
    margin: var(--tt-s-10) 0 0;
    padding-top: var(--tt-s-8);
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
}

/* ── Absence, stated once ─────────────────────────────────────────────────────────────────── */
.b3__none[b-psnan2qh6l] {
    border: var(--tt-border-w) dashed var(--tt-line);
    background: var(--tt-surface-1);
    padding: var(--tt-s-14) var(--tt-s-16);
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-3);
    line-height: var(--tt-leading-normal);
    text-wrap: pretty;
}

.b3__none-body[b-psnan2qh6l] { margin: 0; }

.b3__none-sub[b-psnan2qh6l] {
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-4);
    line-height: var(--tt-leading-normal);
    margin: var(--tt-s-6) 0 0;
}

/* ── Gated ────────────────────────────────────────────────────────────────────────────────── */
.b3__locked[b-psnan2qh6l] {
    border: var(--tt-border-w) dashed var(--tt-line);
    background: var(--tt-surface-1);
    padding: var(--tt-s-14) var(--tt-s-16);
}

.b3__locked-body[b-psnan2qh6l] {
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-3);
    line-height: var(--tt-leading-normal);
    margin: 0;
    text-wrap: pretty;
}

.b3__locked-link[b-psnan2qh6l] {
    display: inline-block;
    margin-top: var(--tt-s-8);
    font-size: var(--tt-text-sm);
    color: var(--tt-cta);
    text-decoration: none;
}

.b3__locked-link:hover[b-psnan2qh6l] { text-decoration: underline; }

/* ── Narrow ───────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 800px) {
    /* 56px columns do not survive a 390px screen with a sector name beside them. The table keeps
       its shape and scrolls rather than wrapping a figure onto two lines. */
    .b3__row[b-psnan2qh6l],
    .b3__drow[b-psnan2qh6l] {
        grid-template-columns: minmax(0, 1fr) 48px 48px 52px;
    }

    .b3__drow[b-psnan2qh6l],
    .b3__drow--head[b-psnan2qh6l] {
        grid-template-columns: minmax(0, 1fr) 50px 50px;
    }
}

/* #416 - read the stored file again. Sits under the sentence explaining why there are no sector
   times, because it is the answer to that sentence and not a separate offer. Quiet: it is a repair
   action on a panel that is otherwise all figures. */
.b3__reparse[b-psnan2qh6l] {
    display: block;
    margin-top: var(--tt-s-12);
    padding: var(--tt-s-6) var(--tt-s-14);
    font-family: inherit;
    font-size: var(--tt-text-xs);
    font-weight: 500;
    color: var(--tt-ink-1);
    background: var(--tt-surface-2);
    border: var(--tt-border-w) solid var(--tt-line);
    border-radius: var(--tt-radius-8);
    cursor: pointer;
}

.b3__reparse:hover:not(:disabled)[b-psnan2qh6l] { border-color: var(--tt-ink-4); }
.b3__reparse:disabled[b-psnan2qh6l] { color: var(--tt-ink-4); cursor: default; }

/* The failure, said plainly rather than left to a button that did nothing. */
.b3__none--warn[b-psnan2qh6l] {
    margin-top: var(--tt-s-8);
    border-color: var(--tt-status-warn-border);
    color: var(--tt-status-warn-text);
}
/* /Components/BetweenSessions.razor.rz.scp.css */
/* Band 4 (#351). Two Panels side by side where there is room —
   the band is read standing next to a car with a helmet in hand, so the type is large enough to
   take in at arm's length and nothing needs a second look. */

.bs[b-vq13xq6iz9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(390px, 1fr));
    gap: var(--tt-s-16);
    align-items: start;
}

/* ── The goal in force ───────────────────────────────────────────────────────────────────────
   Stated in full before any list of alternatives. */
.bs__named[b-vq13xq6iz9] {
    display: flex;
    flex-direction: column;
    gap: var(--tt-s-4);
    padding-bottom: var(--tt-s-14);
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
}

.bs__named-head[b-vq13xq6iz9] {
    display: flex;
    gap: var(--tt-s-4);
    align-items: baseline;
    flex-wrap: wrap;
}

.bs__named-scope[b-vq13xq6iz9] {
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    letter-spacing: var(--tt-tracking-wide);
    text-transform: uppercase;
    color: var(--tt-ink-4);
}

.bs__named-tech[b-vq13xq6iz9] {
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-4);
}

.bs__named-obj[b-vq13xq6iz9] {
    font-size: var(--tt-text-md);
    color: var(--tt-ink-1);
    line-height: 1.35;
    text-wrap: pretty;
}

.bs__named-approach[b-vq13xq6iz9] {
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-3);
    line-height: 1.5;
    text-wrap: pretty;
}

/* ── The picker ──────────────────────────────────────────────────────────────────────────────
   A list of choices readable in full, never a dropdown: a driver with gloves on is choosing
   between short sentences, and a select hides all but one of them until it is opened. */
.bs__picker[b-vq13xq6iz9] {
    display: flex;
    flex-direction: column;
    margin-top: var(--tt-s-14);
}

.bs__picker-lbl[b-vq13xq6iz9] {
    margin-bottom: var(--tt-s-6);
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    letter-spacing: var(--tt-tracking-wide);
    text-transform: uppercase;
    color: var(--tt-ink-4);
}

.bs__choice[b-vq13xq6iz9] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--tt-s-10);
    align-items: baseline;
    width: 100%;
    padding: var(--tt-s-8) var(--tt-s-6);
    border: 0;
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.bs__choice:hover:not(:disabled)[b-vq13xq6iz9] { background: var(--tt-surface-1); }
.bs__choice:disabled[b-vq13xq6iz9] { cursor: default; }

.bs__choice-scope[b-vq13xq6iz9] {
    padding: 0 var(--tt-s-6);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-2);
    background: var(--tt-surface-1);
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-4);
    white-space: nowrap;
}

.bs__choice-body[b-vq13xq6iz9] {
    display: flex;
    flex-direction: column;
    gap: var(--tt-s-2);
    min-width: 0;
}

.bs__choice-obj[b-vq13xq6iz9] {
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-2);
    line-height: 1.4;
    text-wrap: pretty;
}

/* Carrying a goal is the common case when it was not met, so the one the last run worked says so
   rather than sitting anonymously in the list. */
.bs__choice-carried[b-vq13xq6iz9] {
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-4);
}

.bs__choice-tech[b-vq13xq6iz9] {
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-4);
    white-space: nowrap;
}

.bs__picker-foot[b-vq13xq6iz9] {
    display: flex;
    align-items: flex-start;
    gap: var(--tt-s-10);
    margin-top: var(--tt-s-10);
    padding-top: var(--tt-s-10);
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
}

.bs__picker-note[b-vq13xq6iz9] {
    flex: 1;
    font-size: var(--tt-text-xs);
    line-height: 1.5;
    color: var(--tt-ink-4);
    text-wrap: pretty;
}

/* White: writing a new goal is a general action, not this band's primary one. */
.bs__newgoal[b-vq13xq6iz9] {
    flex: none;
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 var(--tt-s-10);
    border: var(--tt-border-w) solid var(--tt-btn-secondary-border);
    border-radius: var(--tt-radius-4);
    background: var(--tt-btn-secondary);
    color: var(--tt-btn-secondary-text);
    font-size: var(--tt-text-xs);
    text-decoration: none;
    white-space: nowrap;
}

.bs__newgoal:hover[b-vq13xq6iz9] { border-color: var(--tt-ink-3); }

.bs__standing[b-vq13xq6iz9] {
    margin: var(--tt-s-12) 0 0;
    font-size: var(--tt-text-xs);
    line-height: 1.5;
    color: var(--tt-ink-4);
    text-wrap: pretty;
}

/* ── Critical wear ───────────────────────────────────────────────────────────────────────────
   Warn ink rather than the destructive red: the part is worn, not broken, and the driver is
   deciding rather than being stopped. */
.bs__parts[b-vq13xq6iz9] {
    display: flex;
    flex-direction: column;
    gap: var(--tt-s-14);
}

.bs__part[b-vq13xq6iz9] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--tt-s-2) var(--tt-s-12);
    align-items: baseline;
}

.bs__part-id[b-vq13xq6iz9] { min-width: 0; }

.bs__part-name[b-vq13xq6iz9] {
    display: block;
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-1);
    line-height: 1.35;
}

.bs__part-sub[b-vq13xq6iz9] {
    display: block;
    margin-top: 1px;
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-4);
    line-height: 1.4;
}

/* The journey, not just the destination: a part at 15% that started the day at 55% is a different
   story from one that started at 18%. */
.bs__part-move[b-vq13xq6iz9] {
    display: flex;
    align-items: baseline;
    gap: var(--tt-s-6);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.bs__part-start[b-vq13xq6iz9] { font-size: var(--tt-text-xs); color: var(--tt-ink-4); }
.bs__part-arrow[b-vq13xq6iz9] { font-size: var(--tt-text-xs); color: var(--tt-ink-4); }

/* 17px, the prototype's `w.now` on the critical-wear row. */
.bs__part-now[b-vq13xq6iz9] {
    font-size: 17px;
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-status-warn-text);
}

.bs__part-read[b-vq13xq6iz9] {
    grid-column: 1 / -1;
    margin-top: var(--tt-s-4);
    font-size: var(--tt-text-xs);
    line-height: 1.5;
    color: var(--tt-ink-3);
    text-wrap: pretty;
}

.bs__none[b-vq13xq6iz9],
.bs__rest[b-vq13xq6iz9] {
    margin: 0;
    font-size: var(--tt-text-xs);
    line-height: 1.5;
    color: var(--tt-ink-4);
    text-wrap: pretty;
}

.bs__rest[b-vq13xq6iz9] {
    margin-top: var(--tt-s-12);
    padding-top: var(--tt-s-10);
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
}

@media (max-width: 800px) {
    .bs__choice[b-vq13xq6iz9] { grid-template-columns: auto minmax(0, 1fr); }
    .bs__choice-tech[b-vq13xq6iz9] { grid-column: 2; }
}

/* ── Cold pressure, carried but not confirmed (#353) ─────────────────────────────────────────
   The figures are already known, so this is a glance and a tap — not a form. */
.bs__cold[b-vq13xq6iz9] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tt-s-16);
}

.bs__cold-one[b-vq13xq6iz9] {
    display: flex;
    align-items: baseline;
    gap: var(--tt-s-6);
}

.bs__cold-k[b-vq13xq6iz9] {
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-4);
}

/* 15px, the prototype's `p.set` — the pressure the driver is being asked to set. */
.bs__cold-v[b-vq13xq6iz9] {
    font-size: 15px;
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-1);
    font-variant-numeric: tabular-nums;
}

.bs__cold-foot[b-vq13xq6iz9] {
    display: flex;
    align-items: flex-start;
    gap: var(--tt-s-10);
    margin-top: var(--tt-s-14);
    padding-top: var(--tt-s-10);
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
}

.bs__cold-note[b-vq13xq6iz9] {
    flex: 1;
    font-size: var(--tt-text-xs);
    line-height: 1.5;
    color: var(--tt-ink-4);
    text-wrap: pretty;
}

/* Black: within this panel, confirming is the action it exists for. */
.bs__confirm[b-vq13xq6iz9] {
    flex: none;
    height: 30px;
    padding: 0 var(--tt-s-12);
    border: var(--tt-border-w) solid var(--tt-btn-primary);
    border-radius: var(--tt-radius-4);
    background: var(--tt-btn-primary);
    color: var(--tt-btn-primary-text);
    font: inherit;
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    white-space: nowrap;
    cursor: pointer;
}

.bs__confirm:disabled[b-vq13xq6iz9] { cursor: default; opacity: 0.6; }

/* ── The cold-pressure recommendation (#351) ──────────────────────────────────────────────────
   A table, because the driver is comparing four corners on three figures and prose cannot be read
   across. Built and Expect are the working; Set to is the answer, and it is the only column that
   carries any weight. */

.bs-rec__head[b-vq13xq6iz9],
.bs-rec__row[b-vq13xq6iz9] {
    display: grid;
    grid-template-columns: 44px 1fr 1fr 1fr;
    gap: 0 var(--tt-s-10);
    align-items: baseline;
}

.bs-rec__head[b-vq13xq6iz9] {
    padding-bottom: var(--tt-s-6);
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    letter-spacing: var(--tt-tracking-wide);
    text-transform: uppercase;
    color: var(--tt-ink-4);
}

/* Every figure is read down its column, so they line up rather than centring under a heading. */
.bs-rec__head span:not(:first-child)[b-vq13xq6iz9],
.bs-rec__row span:not(:first-child)[b-vq13xq6iz9] { text-align: right; }

.bs-rec__row[b-vq13xq6iz9] {
    padding: var(--tt-s-6) 0;
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-2);
    font-variant-numeric: tabular-nums;
}

.bs-rec__corner[b-vq13xq6iz9] {
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-4);
}

/* 15px, matching the confirm panel's own figure — this is the number being asked for. */
.bs-rec__set[b-vq13xq6iz9] {
    font-size: 15px;
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-1);
}

/* A corner with no answer recedes rather than shouting. The reason is stated underneath, once. */
.bs-rec__row.is-blank[b-vq13xq6iz9] { color: var(--tt-ink-4); }
.bs-rec__row.is-blank .bs-rec__set[b-vq13xq6iz9] { color: var(--tt-ink-4); font-weight: var(--tt-weight-regular); }

/* The working, as two labelled lines rather than a paragraph: a driver checking the number wants
   the two steps, not a sentence about them. */
.bs-rec__working[b-vq13xq6iz9] {
    display: flex;
    flex-direction: column;
    gap: var(--tt-s-2);
    margin-top: var(--tt-s-10);
    font-size: var(--tt-text-xs);
    line-height: 1.5;
    color: var(--tt-ink-3);
}

.bs-rec__step b[b-vq13xq6iz9] { font-weight: var(--tt-weight-semibold); color: var(--tt-ink-2); }

.bs-rec__laps[b-vq13xq6iz9] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-10);
    margin-top: var(--tt-s-10);
}

.bs-rec__laps-k[b-vq13xq6iz9] {
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-4);
}

.bs-rec__stepper[b-vq13xq6iz9] {
    display: inline-flex;
    align-items: stretch;
    border: var(--tt-border-w) solid var(--tt-line);
    border-radius: var(--tt-radius-4);
    overflow: hidden;
}

.bs-rec__stepper button[b-vq13xq6iz9] {
    width: 30px;
    border: none;
    background: none;
    color: var(--tt-ink-2);
    font: inherit;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.bs-rec__stepper button:hover[b-vq13xq6iz9] { background: var(--tt-surface-1); }

.bs-rec__laps-v[b-vq13xq6iz9] {
    min-width: 62px;
    padding: var(--tt-s-4) var(--tt-s-2);
    border-left: var(--tt-border-w) solid var(--tt-line);
    border-right: var(--tt-border-w) solid var(--tt-line);
    text-align: center;
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-1);
    font-variant-numeric: tabular-nums;
}

/* What the answer could not account for. One line each, because they are separate problems that
   send the driver to separate places. */
.bs-rec__gap[b-vq13xq6iz9] {
    margin: var(--tt-s-8) 0 0;
    font-size: var(--tt-text-xs);
    line-height: 1.45;
    color: var(--tt-ink-4);
    text-wrap: pretty;
}

.bs-rec__foot[b-vq13xq6iz9] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--tt-s-16);
    margin-top: var(--tt-s-14);
    padding-top: var(--tt-s-12);
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
}

/* The rule-of-thumb disclosure. It is long on purpose: a figure that LOOKS computed while being
   estimated is the thing this panel must not ship. */
.bs-rec__note[b-vq13xq6iz9] {
    flex: 1;
    font-size: var(--tt-text-xs);
    line-height: 1.5;
    color: var(--tt-ink-4);
    text-wrap: pretty;
}

@media (max-width: 800px) {
    .bs-rec__foot[b-vq13xq6iz9] { flex-direction: column; align-items: stretch; }
}
/* /Components/CalendarMonth.razor.rz.scp.css */
/* ============================================================
 * Season Calendar - month grid (#101)
 * Status/layer colors mirror the design prototype; watched/discovered
 * layers (indigo/grey) join when #103/#107 land.
 * ============================================================ */

.cal__bar[b-0tdpxc34fe] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--tt-s-12);
}

.cal__nav[b-0tdpxc34fe] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-8);
}

.cal__navbtn[b-0tdpxc34fe] {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: var(--tt-border-w) solid var(--tt-line-soft);
    background: var(--tt-surface-0);
    border-radius: var(--tt-radius-4);
    color: var(--tt-ink-2);
    font-size: var(--tt-text-base);
    cursor: pointer;
}

.cal__navbtn:hover[b-0tdpxc34fe] {
    background: var(--tt-surface-1);
}

.cal__month[b-0tdpxc34fe] {
    min-width: 130px;
    text-align: center;
    font-size: var(--tt-text-sm);
    font-weight: var(--tt-weight-semibold);
}

.cal__today[b-0tdpxc34fe] {
    height: 30px;
    padding: 0 var(--tt-s-12);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-4);
    background: var(--tt-surface-0);
    color: var(--tt-ink-2);
    font-size: var(--tt-text-sm);
    font-weight: var(--tt-weight-semibold);
    cursor: pointer;
}

.cal__today:hover[b-0tdpxc34fe] {
    background: var(--tt-surface-1);
}

/* Right-aligned layer-filter chips (passed in by the Plan page). */
.cal__filters[b-0tdpxc34fe] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--tt-s-6);
}

.cal__grid[b-0tdpxc34fe] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-left: var(--tt-border-w) solid var(--tt-line-soft);
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
}

.cal__dow[b-0tdpxc34fe] {
    padding: var(--tt-s-6) var(--tt-s-8);
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tt-tracking-wide);
    color: var(--tt-ink-4);
    background: var(--tt-surface-1);
    border-right: var(--tt-border-w) solid var(--tt-line-soft);
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
}

.cal__cell[b-0tdpxc34fe] {
    position: relative;
    overflow: hidden;
    min-height: 92px;
    min-width: 0;
    /* reserve bottom room for the trip lanes so events never sit on a band */
    padding: var(--tt-s-4) var(--tt-s-6) calc(var(--tt-s-4) + var(--cal-lanes, 0) * var(--tt-s-16));
    background: var(--tt-surface-0);
    border-right: var(--tt-border-w) solid var(--tt-line-soft);
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
}

.cal__cell--out[b-0tdpxc34fe] {
    background: var(--tt-surface-1);
}

.cal__daynum[b-0tdpxc34fe] {
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-4);
    margin-bottom: var(--tt-s-2);
}

/* today's date wears a filled marker so the current day is findable at a glance */
.cal__cell--today .cal__daynum[b-0tdpxc34fe] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 var(--tt-s-4);
    border-radius: var(--tt-radius-pill);
    background: var(--tt-ink-1);
    color: var(--tt-surface-0);
    font-weight: var(--tt-weight-bold);
}

/* ── Event entries (color = status) ─────────────────────────── */
.cal__entry[b-0tdpxc34fe] {
    display: block;
    width: 100%;
    margin-top: 3px;
    padding: var(--tt-s-2) var(--tt-s-6);
    text-align: left;
    border: var(--tt-border-w) solid transparent;
    border-radius: var(--tt-radius-4);
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    line-height: 1.4;
    cursor: pointer;
}

.cal__entry-label[b-0tdpxc34fe] {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ── Multi-select for trip-building (#129) ──────────────────── */
.cal__entry-wrap[b-0tdpxc34fe] {
    position: relative;
}

/* leave room on the right so the label never sits under the checkbox */
.cal__entry--selectable[b-0tdpxc34fe] {
    padding-right: var(--tt-s-20);
}

.cal__entry-check[b-0tdpxc34fe] {
    position: absolute;
    top: 50%;
    right: var(--tt-s-4);
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1.5px solid var(--tt-ink-4);
    border-radius: var(--tt-radius-4);
    background: color-mix(in srgb, var(--tt-surface-0) 70%, transparent);
    color: var(--tt-surface-0);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--tt-motion-fast, .12s) ease;
}

.cal__entry-wrap:hover .cal__entry-check[b-0tdpxc34fe],
.cal__entry-check.is-on[b-0tdpxc34fe] {
    opacity: 1;
}

.cal__entry-check.is-on[b-0tdpxc34fe] {
    background: var(--tt-ink-1);
    border-color: var(--tt-ink-1);
}

.cal__entry-wrap.is-sel .cal__entry[b-0tdpxc34fe] {
    outline: 2px solid var(--tt-ink-1);
    outline-offset: 1px;
}

.cal__entry--planned[b-0tdpxc34fe] {
    background: var(--tt-surface-2);
    color: var(--tt-ink-1);
}

.cal__entry--completed[b-0tdpxc34fe] {
    background: color-mix(in srgb, var(--tt-status-ok) 14%, var(--tt-surface-0));
    color: var(--tt-status-ok);
}

.cal__entry--inprogress[b-0tdpxc34fe] {
    background: var(--tt-status-warn-surface);
    color: var(--tt-status-warn-text);
}

.cal__entry--cancelled[b-0tdpxc34fe] {
    background: var(--tt-surface-1);
    color: var(--tt-ink-4);
    text-decoration: line-through;
}

/* Watched = your shortlist copy (indigo planning layer, #103) */
.cal__entry--watched[b-0tdpxc34fe] {
    background: var(--tt-accent-soft);
    color: var(--tt-accent);
}

/* Discovered = external catalog overlay (grey, dashed — not yours yet, #107) */
.cal__entry--discovered[b-0tdpxc34fe] {
    background: var(--tt-surface-1);
    color: var(--tt-ink-3);
    border-color: var(--tt-ink-4);
    border-style: dashed;
}

/* Registration milestones (#104): opening = get-in-early (blue), closing = last chance (red) */
.cal__entry--deadline-open[b-0tdpxc34fe] {
    background: color-mix(in srgb, var(--tt-status-forecast) 12%, var(--tt-surface-0));
    color: var(--tt-status-forecast);
}

.cal__entry--deadline-close[b-0tdpxc34fe] {
    background: color-mix(in srgb, var(--tt-cta) 12%, var(--tt-surface-0));
    color: var(--tt-cta);
}

/* ── Trip bands (indigo planning layer) ─────────────────────── */
.cal__band[b-0tdpxc34fe] {
    position: absolute;
    left: 0;
    right: 0;
    /* lane 0 sits at the bottom; each higher lane stacks one row up */
    bottom: calc(var(--tt-s-4) + var(--cal-lane, 0) * var(--tt-s-16));
    display: flex;
    align-items: center;
    height: 14px;
    padding-left: var(--tt-s-4);
    overflow: hidden;
    cursor: pointer;
    background: color-mix(in srgb, var(--tt-primary) 14%, var(--tt-surface-0));
    border-top: var(--tt-border-w) solid var(--tt-primary);
    border-bottom: var(--tt-border-w) solid var(--tt-primary);
}

.cal__band.is-start[b-0tdpxc34fe] {
    border-left: var(--tt-border-w) solid var(--tt-primary);
    border-top-left-radius: var(--tt-radius-4);
    border-bottom-left-radius: var(--tt-radius-4);
}

.cal__band.is-end[b-0tdpxc34fe] {
    border-right: var(--tt-border-w) solid var(--tt-primary);
    border-top-right-radius: var(--tt-radius-4);
    border-bottom-right-radius: var(--tt-radius-4);
}

.cal__band-label[b-0tdpxc34fe] {
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-bold);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--tt-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* /Components/CarBackdrop.razor.rz.scp.css */
/* ── The car drawing ─────────────────────────────────────────────────────────────────────────
   Lifted unchanged from .cpv__outline and .stp__outline, which were byte-equivalent rules under
   two prefixes (#516). Values are carried across verbatim rather than re-derived - the two panels
   sit side by side on the Car page, so at different sizes they would read as a mistake.

   POSITIONED AGAINST THE HOST. The host must be position: relative and own the stage geometry
   (.cpv__car / .stp__car: 620px tall, 504px max-width). This element only fills it. */
.cb__outline[b-a7msy05z0b] {
    position: absolute;

    /* Not a token: the inset is stage geometry shared with the host's absolutely-positioned
       cards, not spacing. Carried across unchanged. */
    inset: 20px 0;

    display: flex;
    align-items: center;
    justify-content: center;
}

.cb__outline svg[b-a7msy05z0b],
.cb__top[b-a7msy05z0b] {
    height: 100%;
    width: auto;
    object-fit: contain;
}

/* The bundled drawing. Held back so a placed card is what the eye lands on, and re-polarized where
   the surface is dark.

   The asset is drawn for a white page - a white body with dark linework - so on a light surface the
   body melts away and only the lines read. --tt-drawing-filter re-polarizes it where the surface is
   dark, keeping that same relationship instead of a bright slab under the cards. It is a token
   rather than a [data-theme] rule because no component in this app knows which theme it is in. */
.cb__top[b-a7msy05z0b] {
    opacity: 0.55;
    filter: var(--tt-drawing-filter);
}

/* The owner's own picture. Held back for the same reason, but NOT re-polarized: the filter exists
   for line art on white and would invert a photograph on a dark theme.

   The cost, carried across knowingly: an owner's upload is shown as-is on every theme, so how well
   it reads on a dark one is a property of the ASSET, not of this rule. A light-bodied drawing (what
   the demo account uploads) comes through as a bright shape - legible, but the bright slab the
   filter exists to prevent. Dark linework on a transparent background would go the other way and
   nearly vanish. Nothing here can tell any of them apart. Whether the app should detect that or let
   the owner declare it is its own question, not one to settle silently here (#516). */
.cb__top--own[b-a7msy05z0b] {
    opacity: 0.55;
    filter: none;
}
/* /Components/Card.razor.rz.scp.css */
/* ============================================================
 * CarCard - card component
 * Mirrors the design system's Card / CarCard / CardEdit /
 * ConfirmModal interaction model.
 *
 * Tokens: relies on --tt-* vars defined in app.css.
 * Supplementary tokens defined locally below.
 * ============================================================ */

/* Local tokens. Card states read as distinct palette hues: active = red (--tt-cta),
   edit = the indigo tertiary accent (--tt-accent). The edit surface is a faint indigo
   tint (theme-aware via the tokens); red stays reserved for the Save/CTA action. */
.tt-card[b-bwr7uz4htb] {
    --tt-card-active-bg:   #f8fafc;
    --tt-card-edit-bg:     color-mix(in srgb, var(--tt-accent) 6%, var(--tt-surface-0));
}

/* ===== Shell ===== */
.tt-card[b-bwr7uz4htb] {
    width: 240px;
    background: var(--tt-surface-0);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-12);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    box-shadow: none;
    transition:
        border-color 180ms ease,
        box-shadow   180ms ease,
        transform    180ms ease;
}

.tt-card.is-interactive[b-bwr7uz4htb] {
    cursor: pointer;
}

.tt-card.is-interactive:hover[b-bwr7uz4htb] {
    transform: translateY(-2px);
    border-color: var(--tt-ink-1);
    box-shadow: var(--tt-shadow-md);
}

.tt-card.is-active[b-bwr7uz4htb] {
    border-color: var(--tt-ink-1);
    background: var(--tt-card-active-bg);
    box-shadow: var(--tt-shadow-sm);
}

.tt-card.is-active.is-interactive:hover[b-bwr7uz4htb] {
    box-shadow: var(--tt-shadow-md);
}

/* 3px primary-color rule at the bottom when active */
.tt-card.is-active[b-bwr7uz4htb]::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: var(--tt-cta);
}

/* ===== Image ===== */
.tt-card-img[b-bwr7uz4htb] {
    width: 100%;
    height: 180px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--tt-surface-1);
}

.tt-card-img > img[b-bwr7uz4htb],
.tt-card-img--contain > img[b-bwr7uz4htb] {
    display: block;
    width: 100%;
    height: 180px;
    object-fit: contain;
}

/* Contain fit - track maps and parts; image fills the well without cropping */
.tt-card-img--contain[b-bwr7uz4htb] {
    background: var(--tt-surface-1);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Placeholder - no image set */
.tt-card-img--placeholder[b-bwr7uz4htb] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tt-surface-1);
    color: var(--tt-ink-4);
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
}

/* ===== Body ===== */
.tt-card-body[b-bwr7uz4htb] {
    padding: var(--tt-s-10) var(--tt-s-14) var(--tt-s-6);
    display: flex;
    flex-direction: column;
    gap: var(--tt-s-4);
    /* fill the card height when the deck stretches cards to equal height */
    flex: 1 1 auto;
}

.tt-card-row[b-bwr7uz4htb] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* Override global .tt-label / .tt-field inside the card for design-system sizing.
   ::deep ensures the same sizing applies to rows inside the Info RenderFragment. */
[b-bwr7uz4htb] .tt-card-row .tt-label {
    font-size: 10px;
    font-weight: var(--tt-weight-medium);
    color: var(--tt-ink-4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0;
}

/* Status-coloured labels (CardField.LabelStatus) - the same warn/crit pill as the
   consumables grid's percent badges: yellow fill + dark text + darker outline for
   warn, solid deep red + white for crit. Self-sized so the pill hugs the text. */
[b-bwr7uz4htb] .tt-card-row .tt-label--warn,
[b-bwr7uz4htb] .tt-card-row .tt-label--crit {
    align-self: flex-start;
    padding: 1px var(--tt-s-6);
    border-radius: var(--tt-radius-2);
    font-weight: var(--tt-weight-bold);
}

[b-bwr7uz4htb] .tt-card-row .tt-label--warn {
    background: var(--tt-status-warn);
    color: var(--tt-status-warn-on);
    border: 1.5px solid var(--tt-status-warn-border);
}

[b-bwr7uz4htb] .tt-card-row .tt-label--crit {
    background: var(--tt-status-crit);
    color: #fff;
    border: 1.5px solid var(--tt-status-crit);
}

[b-bwr7uz4htb] .tt-card-row .tt-field {
    font-size: 15px;
    font-weight: var(--tt-weight-medium);
    color: var(--tt-ink-1);
    margin: 0;
}

/* Informational block - read-only content below the editable field rows */
.tt-card-info[b-bwr7uz4htb] {
    margin-top: -8px;   /* pull Info up past the flex gap; sits slightly closer than flush */
    display: flex;
    flex-direction: column;
    gap: var(--tt-s-4);
}

/* ===== Footer ===== */
.tt-card-sep[b-bwr7uz4htb] {
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
    /* margin-top: auto pushes the divider + action button to the card's
       bottom, absorbing extra height as whitespace above the footer */
    margin: auto -14px var(--tt-s-4);
}

.tt-card-action[b-bwr7uz4htb] {
    display: flex;
    justify-content: center;
    gap: var(--tt-s-12);
}

.tt-card-action .tt-btn-link[b-bwr7uz4htb] {
    background: none;
    border: none;
    padding: var(--tt-s-4) var(--tt-s-8);
    font-family: inherit;
    font-size: 11px;
    font-weight: var(--tt-weight-semibold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;
    color: var(--tt-cta);
    cursor: pointer;
}

.tt-card-action .tt-btn-link:hover[b-bwr7uz4htb] {
    opacity: 0.7;
}

/* ===== Edit mode ===== */
.tt-card.is-editing[b-bwr7uz4htb] {
    background: var(--tt-card-edit-bg);
    border-color: var(--tt-ink-1);
    /* is-interactive follows OnSave, so a card open for editing now carries it too. Its pointer
       cursor is wrong here - the body is a form, not a target. Later in the file than
       .is-interactive at equal specificity, so this wins. */
    cursor: auto;
}

.tt-card.is-editing:hover[b-bwr7uz4htb] {
    transform: none;
    border-color: var(--tt-ink-1);
}

.tt-card-row .tt-field-input[b-bwr7uz4htb] {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1.5px solid var(--tt-ink-1);
    font-family: inherit;
    font-size: 15px;
    font-weight: var(--tt-weight-medium);
    color: var(--tt-ink-1);
    padding: 1px 0 3px;
    outline: none;
    box-sizing: border-box;
}

.tt-card-row .tt-field-input:focus[b-bwr7uz4htb] {
    border-bottom-color: var(--tt-accent);
    border-bottom-width: 2px;
    padding-bottom: var(--tt-s-2);
}

.tt-card-row select.tt-field-select[b-bwr7uz4htb] {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%230f172a'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 2px center;
    padding-right: var(--tt-s-18);
    cursor: pointer;
}

/* ===== Boolean toggle (edit mode) ===== */
.tt-field-toggle[b-bwr7uz4htb] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-8);
    cursor: pointer;
    padding: var(--tt-s-2) 0;
    user-select: none;
}

.tt-field-toggle input[type="checkbox"][b-bwr7uz4htb] {
    appearance: none;
    -webkit-appearance: none;
    width: 32px;
    height: 18px;
    background: var(--tt-line-soft);
    border-radius: var(--tt-radius-12);
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 150ms ease;
}

.tt-field-toggle input[type="checkbox"][b-bwr7uz4htb]::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    top: var(--tt-s-2);
    left: var(--tt-s-2);
    transition: left 150ms ease;
    box-shadow: var(--tt-shadow-xs);
}

.tt-field-toggle input[type="checkbox"]:checked[b-bwr7uz4htb] {
    background: var(--tt-cta);
}

.tt-field-toggle input[type="checkbox"]:checked[b-bwr7uz4htb]::after {
    left: var(--tt-s-16);
}

.tt-field-toggle-label[b-bwr7uz4htb] {
    font-size: 15px;
    font-weight: var(--tt-weight-medium);
    color: var(--tt-ink-1);
    min-width: 24px;
}

/* Change image overlay in edit mode */
.tt-card.is-editing .tt-card-img[b-bwr7uz4htb] {
    position: relative;
}

/* Decorative "Change" badge - pointer events pass through to the InputFile overlay */
.tt-card-img-edit[b-bwr7uz4htb] {
    position: absolute;
    top: var(--tt-s-10); right: var(--tt-s-10);
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    border: none;
    padding: 5px var(--tt-s-10);
    font-family: inherit;
    font-size: 10.5px;
    font-weight: var(--tt-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: var(--tt-s-4);
    z-index: 4;
    pointer-events: none;
}

/* Transparent file input overlay - covers the full image / placeholder area.
   ::deep required because InputFile renders its <input> outside the scoped attribute boundary. */
[b-bwr7uz4htb] .tt-card-img-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 3;
}

/* Upload zone content (icon + CTA text + spec line) */
.tt-card-img-upload-content[b-bwr7uz4htb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--tt-s-6);
    pointer-events: none;
}

.tt-card-img-upload-cta[b-bwr7uz4htb] {
    font-size: 12px;
    font-weight: var(--tt-weight-semibold);
    color: inherit;
}

.tt-card-img-upload-spec[b-bwr7uz4htb] {
    font-size: 10px;
    color: var(--tt-ink-4);
    text-align: center;
    line-height: 1.4;
}

/* Drag-over visual state */
.tt-card-img--drag-over[b-bwr7uz4htb] {
    outline: 2px dashed var(--tt-primary);
    outline-offset: -2px;
}

.tt-card-img--placeholder.tt-card-img--drag-over[b-bwr7uz4htb] {
    background: #eef2ff;
    color: var(--tt-primary);
    outline: none;
}

/* Split action row (edit mode: Delete · Cancel · Save) */
.tt-card-action--split[b-bwr7uz4htb] {
    justify-content: space-between;
}

.tt-card-edit-actions[b-bwr7uz4htb] {
    display: inline-flex;
    gap: var(--tt-s-12);
}

.tt-card-action .tt-btn-link--primary[b-bwr7uz4htb] {
    color: var(--tt-cta);
    font-weight: var(--tt-weight-bold);
}

.tt-card-action .tt-btn-link--primary:disabled[b-bwr7uz4htb] {
    color: var(--tt-ink-4);
    cursor: not-allowed;
    opacity: 1;
}

.tt-card-action .tt-btn-link--danger[b-bwr7uz4htb] {
    color: var(--tt-danger);
    font-weight: var(--tt-weight-medium);
}

/* Delete-confirm / blocked-info dialogs now use the shared <Modal> component. */

/* ===== Image upload ===== */

/* Loading overlay - sits on top of image; position:relative already applied in is-editing */
.tt-card-img-uploading[b-bwr7uz4htb] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    font-weight: var(--tt-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    z-index: 5;
}

/* Error message shown below the image area */
.tt-card-img-error[b-bwr7uz4htb] {
    font-size: 11px;
    color: var(--tt-danger);
    margin: var(--tt-s-4) var(--tt-s-14) 0;
    padding: 0;
    line-height: 1.4;
}

/* Upload hint shown in edit mode */
.tt-card-img-hint[b-bwr7uz4htb] {
    font-size: 11px;
    color: var(--tt-ink-3);
    margin: var(--tt-s-4) var(--tt-s-14) 0;
    padding: 0;
    line-height: 1.4;
}

/* Placeholder as upload target in edit mode */
.tt-card-img--uploadable[b-bwr7uz4htb] {
    cursor: pointer;
    width: 100%;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tt-surface-1);
    color: var(--tt-ink-4);
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: 0;
}

.tt-card-img--uploadable:hover[b-bwr7uz4htb] {
    background: #eef2ff;
    color: var(--tt-cta);
}

.tt-card-img-uploading-text[b-bwr7uz4htb] {
    font-size: 11px;
    font-weight: var(--tt-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tt-ink-3);
}

/* Locked (over subscription cap → read-only). Quiet, not alarming. */
.tt-card.is-locked[b-bwr7uz4htb] {
    opacity: 0.82;
}

.tt-card-locked[b-bwr7uz4htb] {
    display: inline-flex;
    align-items: center;
    gap: var(--tt-s-6);
    color: var(--tt-ink-3);
}

.tt-card-locked:hover[b-bwr7uz4htb] {
    color: var(--tt-cta);
}
/* /Components/CardDeck.razor.rz.scp.css */
/* ============================================================
 * CardDeck - layout container for Card components
 * Three layout modes: grid, list, feed.
 * No visual surface - layout only.
 * ============================================================ */

.tt-card-deck[b-wr26kuofka] {
    box-sizing: border-box;
    width: 100%;
}

/* ===== Grid =====
   Responsive multi-column layout. Columns fill available space
   and wrap when they can no longer fit 240 px. */
.tt-card-deck--grid[b-wr26kuofka] {
    display: grid;
    grid-template-columns: repeat(auto-fill, 240px);
    row-gap: var(--tt-s-24, var(--tt-s-24));
    column-gap: var(--tt-s-16, var(--tt-s-16));
    /* stretch: every card in a row matches the tallest one's height,
       leaving whitespace in shorter cards rather than ragged bottoms */
    align-items: stretch;
}

/* ===== List =====
   Single column. Cards keep their natural 240 px width and
   stack top-to-bottom with standard vertical rhythm. */
.tt-card-deck--list[b-wr26kuofka] {
    display: flex;
    flex-direction: column;
    gap: var(--tt-s-16, var(--tt-s-16));
    align-items: center;
}

/* ===== Feed =====
   Single scrollable column. Cards stretch edge-to-edge, suited
   for dynamic content that grows or streams in over time.
   The parent must supply a constrained height for scrolling to engage. */
.tt-card-deck--feed[b-wr26kuofka] {
    display: flex;
    flex-direction: column;
    gap: var(--tt-s-12, var(--tt-s-12));
    overflow-y: auto;
    scroll-behavior: smooth;
    overscroll-behavior-y: contain;
}

/* Cards inside a feed deck span the full container width */
.tt-card-deck--feed[b-wr26kuofka]  .tt-card {
    width: 100%;
    max-width: 100%;
}

/* ===== Add-card placeholder =====
   Dashed-border affordance rendered last in the deck when ShowAddCard=true.
   Transparent so it reads as "empty slot", not a content card.
   Same 240 px footprint as a Card; min-height ensures it's a reachable target. */
.tt-card-add[b-wr26kuofka] {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: var(--tt-border-w) dashed var(--tt-ink-4);
    border-radius: var(--tt-radius-12);
    width: 240px;
    min-height: 280px;
    align-self: stretch;
    cursor: pointer;
    display: flex;
    align-items: stretch;
    padding: 0;
    box-shadow: none;
    font-family: var(--tt-font-sans);
    transition: border-color 180ms ease;
}

.tt-card-add:hover[b-wr26kuofka] {
    border-color: var(--tt-ink-1);
    box-shadow: none;
}

.tt-card-add-inner[b-wr26kuofka] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--tt-s-8);
    color: var(--tt-ink-3);
    font-size: 13px;
    padding: var(--tt-s-24);
    text-align: center;
}

.tt-card-add-inner svg[b-wr26kuofka] {
    color: var(--tt-ink-1);
}

/* Feed mode - add card stretches to container width like data cards */
.tt-card-deck--feed .tt-card-add[b-wr26kuofka] {
    width: 100%;
    min-height: 80px;
}

/* ===== Responsive: Grid → List below 528 px =====
   Breakpoint = 2 × card width (240 px) + 3 × 16 px spacing (left / gap / right).
   Below this threshold a two-column grid no longer fits.
   At ≥ 528 px this block does not apply and the grid styles above
   take effect again automatically. */
@media (max-width: 527px) {
    .tt-card-deck--grid[b-wr26kuofka] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--tt-s-16, var(--tt-s-16));
    }

    /* In the flex-column the cross axis is horizontal, so the grid's
       align-self: stretch would pin the add card to the left instead of
       centering it like the data cards. Center it to match. */
    .tt-card-deck--grid .tt-card-add[b-wr26kuofka] {
        align-self: center;
    }
}
/* /Components/CardDeckCollection.razor.rz.scp.css */
/* CardDeckCollection — the head is lifted verbatim from .events__month-head, so a change to that
   one has a single place to follow. Every value below is a --tt-* token. */

.tt-cdc[b-g9k1wfqek5] {
    display: block;
}

/* ── The head ──────────────────────────────────────────────────────────────
   A row holding the fold, kept as a row rather than collapsed onto the button so a section
   action can sit beside it later without nesting one button inside another.

   The hairline sits on the ROW rather than around the body — a folded section still divides
   the page, which is the whole point of being able to fold it. */
.tt-cdc__head[b-g9k1wfqek5] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-8);
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
}

/* The fold grows to fill the row, so the whole width of the head opens the section. */
.tt-cdc__toggle[b-g9k1wfqek5] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--tt-s-8);
    min-width: 0;
    padding: var(--tt-s-14) 0;
    font-family: inherit;
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tt-tracking-wide);
    color: var(--tt-ink-3);
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: color 120ms;
}

.tt-cdc__toggle:hover[b-g9k1wfqek5] { color: var(--tt-ink-1); }

.tt-cdc__toggle:focus-visible[b-g9k1wfqek5] {
    outline: 2px solid var(--tt-primary);
    outline-offset: var(--tt-s-2);
}

.tt-cdc__chev[b-g9k1wfqek5] {
    flex-shrink: 0;
    transition: transform 160ms ease;
}

.tt-cdc__toggle[aria-expanded="true"] .tt-cdc__chev[b-g9k1wfqek5] {
    transform: rotate(90deg);
}

.tt-cdc__title[b-g9k1wfqek5] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tabular so a two-digit count does not shift the head's rhythm against its neighbours. */
.tt-cdc__count[b-g9k1wfqek5] {
    margin-left: var(--tt-s-4);
    color: var(--tt-ink-4);
    font-variant-numeric: tabular-nums;
}

.tt-cdc__body[b-g9k1wfqek5] { margin-top: var(--tt-s-16); }
/* /Components/Chip.razor.rz.scp.css */
.chip[b-ftjsnjq1vk] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 22px;
    padding: 0 var(--tt-s-6);
    background: transparent;
    border: var(--tt-border-w) solid var(--tt-line);
    font: inherit;
    font-size: 10px;
    color: var(--tt-ink-3);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    transition: background 120ms, border-color 120ms, color 120ms;
    line-height: 1;
}

.chip:hover[b-ftjsnjq1vk] { border-color: var(--tt-ink-2); }

.chip strong[b-ftjsnjq1vk] { color: var(--tt-ink-1); font-weight: var(--tt-weight-semibold); }

.chip__icon[b-ftjsnjq1vk] { display: inline-flex; align-items: center; }

/* Off state - the label is the thing being chosen between, so it is read text (ink-3), not a
   caption (ink-4); it also now matches the count, which has always been ink-3. The off/on
   distinction is carried by background and border-color, never by contrast. */
.chip.is-off[b-ftjsnjq1vk]        { color: var(--tt-ink-3); border-color: var(--tt-line-soft); }
.chip.is-off strong[b-ftjsnjq1vk] { color: var(--tt-ink-3); }

/* On state - default (no variant): solid black */
.chip.is-on[b-ftjsnjq1vk] {
    background: var(--tt-ink-1);
    border-color: var(--tt-ink-1);
    color: var(--tt-surface-0);
}
.chip.is-on strong[b-ftjsnjq1vk] { color: var(--tt-surface-0); }

/* Variant - ok (green fill → dark text; white on status-ok is only 3.30:1) */
.chip--ok.is-on[b-ftjsnjq1vk] { background: var(--tt-status-ok); border-color: var(--tt-status-ok); color: var(--tt-status-ok-on); }
.chip--ok.is-on strong[b-ftjsnjq1vk] { color: var(--tt-status-ok-on); }

/* Variant - warn (yellow fill → dark text, since the default is-on is white) */
.chip--warn.is-on[b-ftjsnjq1vk] { background: var(--tt-status-warn); border-color: var(--tt-status-warn); color: var(--tt-status-warn-on); }
.chip--warn.is-on strong[b-ftjsnjq1vk] { color: var(--tt-status-warn-on); }

/* Variant - crit */
.chip--crit.is-on[b-ftjsnjq1vk] { background: var(--tt-status-crit); border-color: var(--tt-status-crit); }

/* Variant - before (forecast: service needed before event) */
.chip--before.is-off[b-ftjsnjq1vk] { border-color: var(--tt-status-crit); }
.chip--before.is-on[b-ftjsnjq1vk]  { background: var(--tt-status-crit); border-color: var(--tt-status-crit); }

/* Variant - during (forecast: service needed during/after event) */
.chip--during.is-off[b-ftjsnjq1vk] { border-color: var(--tt-status-forecast); }
.chip--during.is-on[b-ftjsnjq1vk]  { background: var(--tt-status-forecast); border-color: var(--tt-status-forecast); }
/* /Components/ConfigureSlotModal.razor.rz.scp.css */
/* What one position on the car drawing shows (#352). Lives inside Modal, so it owns no chrome. */

/* 12.5px, the prototype's. --tt-text-sm is 13.6px. */
.cfg__lede[b-bgjysh8dwg] {
    margin: 0 0 var(--tt-s-4);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--tt-ink-2);
    text-wrap: pretty;
}

/* 10px, the prototype's section label. --tt-text-xs is 12px. */
.cfg__lbl[b-bgjysh8dwg] {
    margin: var(--tt-s-14) 0 var(--tt-s-6);
    font-size: 10px;
    font-weight: var(--tt-weight-semibold);
    letter-spacing: var(--tt-tracking-wide);
    text-transform: uppercase;
    color: var(--tt-ink-4);
}

.cfg__lbl:first-child[b-bgjysh8dwg] { margin-top: 0; }

/* ── What is on this position ────────────────────────────────────────────────────────────── */
.cfg__item[b-bgjysh8dwg] {
    display: flex;
    align-items: stretch;
    gap: var(--tt-s-6);
    margin-top: var(--tt-s-6);
}

.cfg__toggle[b-bgjysh8dwg],
.cfg__place[b-bgjysh8dwg] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-10);
    flex: 1;
    min-width: 0;
    width: 100%;
    text-align: left;
    font: inherit;
    background: var(--tt-surface-1);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-4);
    padding: var(--tt-s-8) var(--tt-s-10);
    cursor: pointer;
}

.cfg__place[b-bgjysh8dwg] { margin-top: var(--tt-s-6); }

.cfg__toggle:hover:not(:disabled)[b-bgjysh8dwg],
.cfg__place:hover:not(:disabled)[b-bgjysh8dwg] { border-color: var(--tt-ink-3); }

.cfg__toggle:disabled[b-bgjysh8dwg],
.cfg__place:disabled[b-bgjysh8dwg] { cursor: default; opacity: 0.6; }

.cfg__item-name[b-bgjysh8dwg] {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    color: var(--tt-ink-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cfg__item-sub[b-bgjysh8dwg] {
    font-size: 11px;
    color: var(--tt-ink-4);
    white-space: nowrap;
}

/* The prototype's: no fill, a quiet border, and danger ink. An earlier version reasoned this
   should read as a plain action because the setting survives — the prototype had already decided
   otherwise, and it is the one that was designed against.

   NOTE: the prototype names --tt-status-danger, which the app does not define. --tt-danger is the
   nearest and is what the app uses for destructive text elsewhere. */
.cfg__remove[b-bgjysh8dwg] {
    flex: none;
    padding: 0 var(--tt-s-10);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    background: none;
    color: var(--tt-danger);
    font: inherit;
    font-size: 11.5px;
    cursor: pointer;
}

.cfg__remove:hover:not(:disabled)[b-bgjysh8dwg] { border-color: var(--tt-danger); }
.cfg__remove:disabled[b-bgjysh8dwg] { cursor: default; opacity: 0.6; }

.cfg__none[b-bgjysh8dwg] {
    margin: 0;
    font-size: var(--tt-text-sm);
    line-height: 1.5;
    color: var(--tt-ink-4);
    text-wrap: pretty;
}

/* ── Declaring ───────────────────────────────────────────────────────────────────────────────
   Separated by a rule, because it does something the rest of this dialog does not: it changes what
   the car HAS, not just where it draws. */
.cfg__add[b-bgjysh8dwg] {
    margin-top: var(--tt-s-20);
    padding-top: var(--tt-s-14);
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
}

.cfg__add-row[b-bgjysh8dwg] {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
    gap: var(--tt-s-6);
    align-items: center;
}

.cfg__input[b-bgjysh8dwg] {
    width: 100%;
    height: 34px;
    padding: 0 var(--tt-s-8);
    border: var(--tt-border-w) solid var(--tt-line);
    border-radius: var(--tt-radius-4);
    background: var(--tt-surface-0);
    font-family: inherit;
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-1);
    box-sizing: border-box;
}

/* Black: within this dialog, declaring is the one action that creates something. */
.cfg__addbtn[b-bgjysh8dwg] {
    height: 34px;
    padding: 0 var(--tt-s-12);
    border: var(--tt-border-w) solid var(--tt-btn-primary);
    border-radius: var(--tt-radius-4);
    background: var(--tt-btn-primary);
    color: var(--tt-btn-primary-text);
    font: inherit;
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    white-space: nowrap;
    cursor: pointer;
}

.cfg__addbtn:disabled[b-bgjysh8dwg] { cursor: default; opacity: 0.5; }

.cfg__hint[b-bgjysh8dwg] {
    margin: var(--tt-s-8) 0 0;
    font-size: var(--tt-text-xs);
    line-height: 1.5;
    color: var(--tt-ink-4);
    text-wrap: pretty;
}

.cfg__error[b-bgjysh8dwg] {
    margin: var(--tt-s-10) 0 0;
    font-size: var(--tt-text-sm);
    color: var(--tt-status-crit);
}

@media (max-width: 600px) {
    .cfg__add-row[b-bgjysh8dwg] { grid-template-columns: minmax(0, 1fr); }
}

/* ── The one question the catalogue cannot answer (#396) ──────────────────────────────────────
   A damper's click range and a bar's hole list are the car's, not the app's. Asked at the moment
   the setting is placed, because that is when it starts to matter and not before. */
.cfg__field[b-bgjysh8dwg] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-12);
    margin-top: var(--tt-s-14);
}

.cfg__field-lbl[b-bgjysh8dwg] {
    flex: 1;
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-2);
}

.cfg__field-in[b-bgjysh8dwg] {
    flex: none;
    width: 180px;
    height: 34px;
    padding: 0 var(--tt-s-8);
    border: var(--tt-border-w) solid var(--tt-line);
    border-radius: var(--tt-radius-4);
    background: var(--tt-surface-0);
    font-family: inherit;
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-1);
    box-sizing: border-box;
}

.cfg__field-in--num[b-bgjysh8dwg] {
    width: 90px;
    font-family: var(--tt-font-mono);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.cfg__actions[b-bgjysh8dwg] {
    display: flex;
    justify-content: flex-end;
    gap: var(--tt-s-8);
    margin-top: var(--tt-s-16);
    padding-top: var(--tt-s-12);
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
}

@media (max-width: 600px) {
    .cfg__field[b-bgjysh8dwg] { flex-wrap: wrap; gap: var(--tt-s-6); }
    .cfg__field-in[b-bgjysh8dwg],
    .cfg__field-in--num[b-bgjysh8dwg] { width: 100%; }
}

/* Nothing left to place. The prototype's dashed box, not a line of grey text — it answers an
   action the owner just took, so it holds its own space. */
.cfg__nothing[b-bgjysh8dwg] {
    margin: var(--tt-s-12) 0 0;
    padding: var(--tt-s-10) var(--tt-s-12);
    border: var(--tt-border-w) dashed var(--tt-line);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--tt-ink-4);
    text-wrap: pretty;
}

/* One type's per-car question, inside the expand step. Labelled only when the entry is a part and
   several types are being asked about at once. */
.cfg__need[b-bgjysh8dwg] {
    margin-top: var(--tt-s-14);
    padding-top: var(--tt-s-12);
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
}

.cfg__need-lbl[b-bgjysh8dwg] {
    font-size: 10px;
    font-weight: var(--tt-weight-semibold);
    letter-spacing: var(--tt-tracking-wide);
    text-transform: uppercase;
    color: var(--tt-ink-4);
}

/* The two forms a supplier might have stamped on the part. Chips rather than a segmented control:
   this is picking a value, not switching a view. */
.cfg__units[b-bgjysh8dwg] {
    display: flex;
    gap: var(--tt-s-4);
    flex: none;
}
/* /Components/ConsumableEditModal.razor.rz.scp.css */
/* Modal shell (backdrop / card / title / actions / buttons) is now the shared
   <Modal> component. Only the form content inside the dialog remains here. */

/* ── Form inside modal ────────────────────────────────────────────────── */
.cg-form[b-2h68hr2w8d] {
    display: flex;
    flex-direction: column;
    gap: var(--tt-s-14);
}

.cg-form__split[b-2h68hr2w8d] {
    display: flex;
    gap: var(--tt-s-12);
}

.cg-form__row[b-2h68hr2w8d] {
    display: flex;
    flex-direction: column;
    gap: var(--tt-s-4);
    flex: 1;
    min-width: 0;
}

.cg-form__label[b-2h68hr2w8d] {
    font-size: 10px;
    font-weight: var(--tt-weight-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tt-ink-3);
}

.cg-form__input[b-2h68hr2w8d] {
    font: inherit;
    font-size: 13px;
    padding: 7px var(--tt-s-10);
    border: var(--tt-border-w) solid var(--tt-line);
    border-radius: var(--tt-radius-4);
    background: var(--tt-surface-0);
    color: var(--tt-ink-1);
    width: 100%;
    outline: none;
}

.cg-form__input:focus[b-2h68hr2w8d] {
    border-color: var(--tt-primary);
    box-shadow: var(--tt-shadow-focus);
}

/* ── Currency prefix input ────────────────────────────────────────────── */
.cg-form__money[b-2h68hr2w8d] {
    display: flex;
    align-items: stretch;
    border: var(--tt-border-w) solid var(--tt-line);
    border-radius: var(--tt-radius-4);
    overflow: hidden;
}

.cg-form__money .cg-form__input[b-2h68hr2w8d] {
    border: none;
    border-radius: 0;
    flex: 1;
    min-width: 0;
    width: auto;
}

.cg-form__money .cg-form__input:focus[b-2h68hr2w8d] {
    box-shadow: none;
}

.cg-form__money:focus-within[b-2h68hr2w8d] {
    border-color: var(--tt-primary);
    box-shadow: var(--tt-shadow-focus);
}

.cg-form__currency-sym[b-2h68hr2w8d] {
    display: flex;
    align-items: center;
    padding: 0 var(--tt-s-8);
    background: var(--tt-surface-2);
    border-right: var(--tt-border-w) solid var(--tt-line);
    font-size: 13px;
    color: var(--tt-ink-3);
    user-select: none;
    white-space: nowrap;
}
/* /Components/ConsumablePlacementView.razor.rz.scp.css */
/* What is fitted, drawn on the part it sits on (#494).

   The stage geometry is SetupView.razor.css's, verbatim — this panel sits directly beside that one,
   and two drawings of the same car at different sizes would read as a mistake. Where that file
   carries a bare px value it says why ("the prototype's own paddings, off the spacing scale, like
   the type sizes on this card"); each is marked below with what it mirrors. */

/* ── The head ────────────────────────────────────────────────────────────────────────────────
   .stp__head verbatim: the chips take the width, the mode button sits off the end. */
.cpv__head[b-c5z8cdqkkh] {
    display: flex;
    align-items: flex-start;
    gap: var(--tt-s-10);
    margin-bottom: var(--tt-s-12);
}

.cpv__views[b-c5z8cdqkkh] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tt-s-4);
    flex: 1;
    min-width: 0;
}

/* White: switching into Configure is a general action, not the panel's primary one — the panel is
   read-only by design and the buttons open the places you change things. .stp__configure verbatim. */
.cpv__configure[b-c5z8cdqkkh] {
    flex: none;
    height: 26px;
    padding: 0 var(--tt-s-10);
    border: var(--tt-border-w) solid var(--tt-btn-secondary-border);
    border-radius: var(--tt-radius-4);
    background: var(--tt-btn-secondary);
    color: var(--tt-btn-secondary-text);
    font: inherit;
    font-size: var(--tt-text-xs);
    cursor: pointer;
}

.cpv__configure:hover[b-c5z8cdqkkh] { border-color: var(--tt-ink-3); }

/* Configure is a mode you are inside, and this is the frame that says so — a bordered callout in
   the CTA red, per Setup, not another line of body copy. */
.cpv__configuring[b-c5z8cdqkkh] {
    margin: 0 0 var(--tt-s-8);
    padding: var(--tt-s-8) var(--tt-s-10);
    border: var(--tt-border-w) solid var(--tt-cta-border);
    background: var(--tt-surface-1);
    font-size: var(--tt-text-xs);
    line-height: 1.5;
    color: var(--tt-ink-2);
    text-wrap: pretty;
}

/* ── Managing a view ─────────────────────────────────────────────────────────────────────────
   Only drawn inside Configure. The name is an input rather than a dialog: renaming is the smallest
   change here and does not deserve a trip through a modal. */
.cpv__manage[b-c5z8cdqkkh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tt-s-4);
    margin-bottom: var(--tt-s-12);
}

.cpv__rename[b-c5z8cdqkkh] {
    flex: 1;
    min-width: 0;
    height: 26px;
    padding: 0 var(--tt-s-8);
    border: var(--tt-border-w) solid var(--tt-line);
    border-radius: var(--tt-radius-4);
    background: var(--tt-surface-0);
    color: var(--tt-ink-1);
    font: inherit;
    font-size: var(--tt-text-xs);
}

.cpv__rename:focus-visible[b-c5z8cdqkkh] {
    outline: 2px solid var(--tt-primary);
    outline-offset: var(--tt-s-2);
}

.cpv__mini[b-c5z8cdqkkh] {
    flex: none;
    height: 26px;
    padding: 0 var(--tt-s-8);
    border: var(--tt-border-w) solid var(--tt-btn-secondary-border);
    border-radius: var(--tt-radius-4);
    background: var(--tt-btn-secondary);
    color: var(--tt-btn-secondary-text);
    font: inherit;
    font-size: var(--tt-text-xs);
    cursor: pointer;
    white-space: nowrap;
}

.cpv__mini:hover:not(:disabled)[b-c5z8cdqkkh] { border-color: var(--tt-ink-3); }

.cpv__mini:disabled[b-c5z8cdqkkh] {
    opacity: 0.45;
    cursor: default;
}

/* A file input dressed as a button. The native control is unstyleable and says "No file chosen"
   next to itself, which is not a thing this row should say. */
.cpv__mini--file[b-c5z8cdqkkh] {
    display: inline-flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.cpv__mini--file[b-c5z8cdqkkh]  input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

/* The colour key that used to sit here is gone: the bars carry the same three colours in the same
   order every time, and a legend restating them on every visit is a caption for something the eye
   has already read. */
.cpv__error[b-c5z8cdqkkh] {
    margin: 0 0 var(--tt-s-12);
    font-size: var(--tt-text-sm);
    color: var(--tt-status-crit);
}

/* ── The drawing ─────────────────────────────────────────────────────────────────────────────
   .stp__car verbatim: a fixed-height stage, capped, because the cards are positioned as a
   PERCENTAGE of this box while the car is sized off its height. Let the box grow and the cards walk
   away from the car they annotate. */
.cpv__car[b-c5z8cdqkkh] {
    position: relative;
    height: 620px;
    max-width: 504px;
    margin-inline: auto;
}

/* The drawing itself lives in CarBackdrop, which both this panel and Setup call so the two draw
   the same car (#516). .cpv__car below is the stage it positions against. */

/* ── A placed card ───────────────────────────────────────────────────────────────────────────
   .stp__slot verbatim, 30% width and 5px 8px padding included, so the two panels' cards match. */
.cpv__slot[b-c5z8cdqkkh] {
    position: absolute;
    width: 30%;
    box-sizing: border-box;
    padding: 5px 8px;
    text-align: left;
    background: var(--tt-surface-1);
    border: var(--tt-border-w) solid var(--tt-line);
    box-shadow: var(--tt-shadow-sm);
}

/* An occupied position keeps drawing what it holds while you arrange the view, because what it
   holds is the thing you are deciding about — Setup's rule. It becomes a control, so it looks like
   one. */
.cpv__slot.is-arranging[b-c5z8cdqkkh] { cursor: pointer; }
.cpv__slot.is-arranging:hover[b-c5z8cdqkkh] { border-color: var(--tt-ink-3); }

/* 9px uppercase, ink-4 — .stp__slot-title verbatim. */
.cpv__slot-title[b-c5z8cdqkkh] {
    display: block;
    font-size: 9px;
    font-weight: var(--tt-weight-bold);
    letter-spacing: var(--tt-tracking-wide);
    text-transform: uppercase;
    color: var(--tt-ink-4);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cpv__slot-none[b-c5z8cdqkkh] {
    display: block;
    margin-top: var(--tt-s-2);
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-4);
}

/* The type's name, above its parts. 9.5px is .stp__row-k's — the register Setup uses for the word
   above a figure, which is exactly the job here. */
.cpv__type[b-c5z8cdqkkh] {
    display: block;
    margin-top: var(--tt-s-6);
    font-size: 9.5px;
    line-height: 1.35;
    color: var(--tt-ink-4);
}

/* A position offering to be filled. .stp__pad verbatim, 7px 8px included — one pixel more than a
   placed card, because the dashed border sits where the solid one would. */
.cpv__pad[b-c5z8cdqkkh] {
    position: absolute;
    width: 30%;
    box-sizing: border-box;
    padding: 7px 8px;
    text-align: left;
    font: inherit;
    background: none;
    border: var(--tt-border-w) dashed var(--tt-line);
    cursor: pointer;
}

.cpv__pad:hover[b-c5z8cdqkkh] {
    border-color: var(--tt-ink-3);
    background: var(--tt-surface-1);
}

.cpv__pad-label[b-c5z8cdqkkh] {
    display: block;
    margin-top: var(--tt-s-2);
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-3);
}

/* ── One installed part ──────────────────────────────────────────────────────────────────────
   A button, because it opens a dialog — Setup's contract is that the card is read-only and the tap
   opens the place you change it. Reset to look like the block it sits in rather than a control. */
.cpv__item[b-c5z8cdqkkh] {
    display: block;
    width: 100%;
    margin-top: var(--tt-s-4);
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.cpv__item + .cpv__item[b-c5z8cdqkkh] { margin-top: var(--tt-s-6); }

.cpv__item:hover .cpv__item-name[b-c5z8cdqkkh] { color: var(--tt-primary); }

.cpv__item:focus-visible[b-c5z8cdqkkh] {
    outline: 2px solid var(--tt-primary);
    outline-offset: var(--tt-s-2);
}

.cpv__item-head[b-c5z8cdqkkh] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--tt-s-4);
}

/* .stp__row-v's register — the figure line of a Setup card. */
.cpv__item-name[b-c5z8cdqkkh] {
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    line-height: 1.3;
    color: var(--tt-ink-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 11px, matching the value the Car page's own consumable row puts on the right. */
.cpv__item-val[b-c5z8cdqkkh] {
    flex: none;
    font-size: 11px;
    font-weight: var(--tt-weight-bold);
    font-variant-numeric: tabular-nums;
}

.cpv__item-val.cl-ok[b-c5z8cdqkkh]   { color: var(--tt-ink-2); }
.cpv__item-val.cl-warn[b-c5z8cdqkkh] { color: var(--tt-status-warn-text); }
.cpv__item-val.cl-crit[b-c5z8cdqkkh] { color: var(--tt-status-crit); }

/* 5px on surface-2 with a radius-2 fill — the wear bar, unchanged from the live view. */
.cpv__bar-track[b-c5z8cdqkkh] {
    position: relative;
    display: block;
    height: 5px;
    margin-top: 3px;
    background: var(--tt-surface-2);
    border-radius: var(--tt-radius-2);
    overflow: hidden;
}

.cpv__seg[b-c5z8cdqkkh] {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: var(--tt-radius-2);
}

.cpv__seg--ok[b-c5z8cdqkkh]   { background: var(--tt-status-ok); }
.cpv__seg--warn[b-c5z8cdqkkh] { background: var(--tt-status-warn); }
.cpv__seg--crit[b-c5z8cdqkkh] { background: var(--tt-status-crit); }

/* 9.5px, .stp__row-k — the quiet line under a figure. */
.cpv__item-life[b-c5z8cdqkkh] {
    display: block;
    margin-top: var(--tt-s-2);
    font-size: 9.5px;
    line-height: 1.35;
    color: var(--tt-ink-4);
    font-variant-numeric: tabular-nums;
}

/* ── The eleven anchors ──────────────────────────────────────────────────────────────────────
   Setup's own coordinates, all of them. The nine grid anchors are centred on their point; the nose
   is top-aligned to the front and the tail bottom-aligned to the wing. */
.is-nose[b-c5z8cdqkkh]        { left: 50%; top: 20px;    transform: translateX(-50%); }
.is-tail[b-c5z8cdqkkh]        { left: 50%; bottom: 20px; transform: translateX(-50%); }

.is-frontleft[b-c5z8cdqkkh]   { left: 1%;  top: 21.9%; transform: translateY(-50%); }
.is-frontaxle[b-c5z8cdqkkh]   { left: 50%; top: 21.9%; transform: translate(-50%, -50%); }
.is-frontright[b-c5z8cdqkkh]  { right: 1%; top: 21.9%; transform: translateY(-50%); }

.is-centreleft[b-c5z8cdqkkh]  { left: 1%;  top: 50%; transform: translateY(-50%); }
.is-centre[b-c5z8cdqkkh]      { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.is-centreright[b-c5z8cdqkkh] { right: 1%; top: 50%; transform: translateY(-50%); }

.is-rearleft[b-c5z8cdqkkh]    { left: 1%;  top: 74.3%; transform: translateY(-50%); }
.is-rearaxle[b-c5z8cdqkkh]    { left: 50%; top: 74.3%; transform: translate(-50%, -50%); }
.is-rearright[b-c5z8cdqkkh]   { right: 1%; top: 74.3%; transform: translateY(-50%); }

/* ── Alerting, but nowhere to draw it ────────────────────────────────────────────────────────
   The list under the drawing. Deliberately NOT card-shaped: these are not on the car, and dressing
   them as anchored cards would say they were. */
.cpv__unplaced[b-c5z8cdqkkh] {
    margin-top: var(--tt-s-16);
    padding-top: var(--tt-s-12);
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
}

.cpv__unplaced-head[b-c5z8cdqkkh] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--tt-s-8);
    margin: 0 0 var(--tt-s-4);
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-2);
}

.cpv__unplaced-hint[b-c5z8cdqkkh] {
    font-weight: var(--tt-weight-regular);
    color: var(--tt-ink-4);
}

/* Full width here, where on the drawing they are a 30% card. */
.cpv__unplaced .cpv__item[b-c5z8cdqkkh] { max-width: 100%; }

/* ── The arrange dialog ──────────────────────────────────────────────────────────────────────
   Rows inside Modal's ChildContent. The modal owns the frame; this is only the list. */
.cpv__arrange[b-c5z8cdqkkh] {
    display: flex;
    flex-direction: column;
}

.cpv__arrange-row[b-c5z8cdqkkh] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-8);
    padding: var(--tt-s-8) 0;
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
    cursor: pointer;
}

.cpv__arrange-row:last-child[b-c5z8cdqkkh] { border-bottom: 0; }

.cpv__arrange-name[b-c5z8cdqkkh] {
    flex: 1;
    min-width: 0;
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-1);
}

.cpv__arrange-meta[b-c5z8cdqkkh] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-8);
    flex: none;
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-4);
}

/* Where it sits now. In the CTA register because acting on this row MOVES it off that position —
   a type is in one place at a time within a view. */
.cpv__arrange-where[b-c5z8cdqkkh] { color: var(--tt-cta); }

/* Tablet: reflow only, nothing hidden. Setup's own step — the cards need more of the width and the
   drawing shrinks to suit. 32%, not more: this panel's front, centre and rear rows each place three
   cards across the stage, so above 33% they overlap on arithmetic alone (#528). */
@media (max-width: 800px) {
    .cpv__car[b-c5z8cdqkkh]  { height: 520px; }
    .cpv__slot[b-c5z8cdqkkh],
    .cpv__pad[b-c5z8cdqkkh]  { width: 32%; }
}
/* /Components/ConsumableRow.razor.rz.scp.css */
/* ConsumableRow - one entry inside the Event Impact / Forecast Impact panels.
 *
 *   "event"    - single-color fill (current severity) + striped delta tip
 *   "forecast" - black existing usage + blue striped forecast
 *
 * Both variants overlay warn/crit threshold ticks. The bar axis runs 0 → 120%.
 * Layout: [thumb]  name (truncates) + limit .......... range   /   full-width bar below.
 */

.cons-row[b-z3ow3k5dwj] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-12);
    padding: 9px 0;
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
}

.cons-row:last-of-type[b-z3ow3k5dwj] { border-bottom: 0; }

/* ── Thumbnail ────────────────────────────────────────────────── */
.cons-row__thumb[b-z3ow3k5dwj] {
    flex: none;
    width: 36px;
    height: 36px;
    background: var(--tt-surface-2);
    border: var(--tt-border-w) solid var(--tt-line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cons-row__thumb img[b-z3ow3k5dwj] {
    max-width: 28px;
    max-height: 28px;
    object-fit: contain;
}

/* ── Content (head + full-width bar) ──────────────────────────── */
.cons-row__content[b-z3ow3k5dwj] {
    flex: 1 1 auto;
    min-width: 0;
}

/* Head line: name (+limit) on the left, range pushed to the right */
.cons-row__head[b-z3ow3k5dwj] {
    display: flex;
    align-items: baseline;
    gap: var(--tt-s-10);
    min-width: 0;
}

.cons-row__name[b-z3ow3k5dwj] {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: var(--tt-s-6);
    overflow: hidden;
}

/* Name truncates with an ellipsis; the limit + range always stay visible. */
.cons-row__name-text[b-z3ow3k5dwj] {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 12px;
    font-weight: var(--tt-weight-medium);
    color: var(--tt-ink-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cons-row__life[b-z3ow3k5dwj] {
    flex: none;
    font-size: 10px;
    color: var(--tt-ink-4);
    font-weight: var(--tt-weight-regular);
    white-space: nowrap;
}

/* ── Range readout (current → predicted) ──────────────────────── */
.cons-row__val[b-z3ow3k5dwj] {
    flex: none;
    margin-left: auto;
    font-size: 11px;
    color: var(--tt-ink-3);
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: center;
    gap: var(--tt-s-4);
    white-space: nowrap;
}

.cons-row__arrow[b-z3ow3k5dwj] { color: var(--tt-ink-4); flex-shrink: 0; }
.cons-row__val-new[b-z3ow3k5dwj] { font-weight: var(--tt-weight-semibold); color: var(--tt-ink-1); }

.cons-row__val-new--warn[b-z3ow3k5dwj]   { color: var(--tt-status-warn-text); }
.cons-row__val-new--crit[b-z3ow3k5dwj]   { color: var(--tt-status-crit); }
.cons-row__val-new--before[b-z3ow3k5dwj] { color: var(--tt-status-warn-text); }
.cons-row__val-new--during[b-z3ow3k5dwj] { color: var(--tt-status-crit); }

/* ── Progress bar (full width of the content column) ──────────── */
.cons-row__bar[b-z3ow3k5dwj] {
    position: relative;
    height: 9px;
    margin-top: 3px;
    background: var(--tt-surface-2);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-2);
}

.cons-row__bar--forecast[b-z3ow3k5dwj] { height: 12px; }

.cons-row__seg[b-z3ow3k5dwj] {
    position: absolute;
    top: 0;
    bottom: 0;
    transition: width 200ms ease-out, left 200ms ease-out;
}

/* Event variant - crisp current fill, dimmed intervening band, striped this-event delta tip */
.cons-row__seg--solid.cons-row__seg--ok[b-z3ow3k5dwj]   { background: var(--tt-status-ok); }
.cons-row__seg--solid.cons-row__seg--warn[b-z3ow3k5dwj] { background: var(--tt-status-warn); }
.cons-row__seg--solid.cons-row__seg--crit[b-z3ow3k5dwj] { background: var(--tt-status-crit); }

/* Intervening - wear already committed by events before this one. A flat white wash dims the
 * status color so it reads as "spoken for" between the crisp current fill and the striped delta. */
.cons-row__seg--intervening[b-z3ow3k5dwj] {
    background-image: linear-gradient(rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.45));
}

.cons-row__seg--intervening.cons-row__seg--ok[b-z3ow3k5dwj]   { background-color: var(--tt-status-ok); }
.cons-row__seg--intervening.cons-row__seg--warn[b-z3ow3k5dwj] { background-color: var(--tt-status-warn); }
.cons-row__seg--intervening.cons-row__seg--crit[b-z3ow3k5dwj] { background-color: var(--tt-status-crit); }

.cons-row__seg--delta[b-z3ow3k5dwj] {
    background-image: repeating-linear-gradient(
        -45deg,
        transparent, transparent 3px,
        rgba(255, 255, 255, 0.42) 3px, rgba(255, 255, 255, 0.42) 6px
    );
}

.cons-row__seg--delta.cons-row__seg--ok[b-z3ow3k5dwj]   { background-color: var(--tt-status-ok); }
.cons-row__seg--delta.cons-row__seg--warn[b-z3ow3k5dwj] { background-color: var(--tt-status-warn); }
.cons-row__seg--delta.cons-row__seg--crit[b-z3ow3k5dwj] { background-color: var(--tt-status-crit); }

/* Forecast variant - black existing + solid-blue committed intervening + blue striped forecast */
.cons-row__seg--existing[b-z3ow3k5dwj] { background: var(--tt-ink-1); }

/* Committed wear from events before this one - solid blue (certain, unlike this event's striped tip). */
.cons-row__seg--forecast-committed[b-z3ow3k5dwj] { background: var(--tt-status-forecast); }

.cons-row__seg--forecast[b-z3ow3k5dwj] {
    background-color: var(--tt-status-forecast);
    background-image: repeating-linear-gradient(
        -45deg,
        transparent, transparent 3px,
        rgba(255, 255, 255, 0.34) 3px, rgba(255, 255, 255, 0.34) 6px
    );
}

/* ── Threshold ticks - overlay the bar, extend above & below, and stay
 *    visible on any fill (white core + thin dark casing). ─────────── */
.cons-row__tick[b-z3ow3k5dwj] {
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 2px;
    z-index: 2;
    background: #fff;
    box-shadow: 0 0 0 0.75px var(--tt-ink-3);
    pointer-events: none;
}

.cons-row__tick--crit[b-z3ow3k5dwj] {
    box-shadow: 0 0 0 0.75px var(--tt-ink-1);
}

/* 100% of service life - the prominent reference line (thicker + taller). */
.cons-row__tick--limit[b-z3ow3k5dwj] {
    width: 3px;
    top: -6px;
    bottom: -6px;
    box-shadow: 0 0 0 1px var(--tt-ink-1);
}
/* /Components/ConsumablesGrid.razor.rz.scp.css */
/* ── Root ─────────────────────────────────────────────────────────────── */
.cg-root[b-23gx9cst4t] {
    display: flex;
    flex-direction: column;
}

/* ── Tabs ─────────────────────────────────────────────────────────────── */
.cg-tabs[b-23gx9cst4t] {
    display: flex;
    gap: var(--tt-s-2);
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
    margin-bottom: var(--tt-s-14);
}

.cg-tab[b-23gx9cst4t] {
    /* reset button chrome */
    appearance: none;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    outline: none;
    /* tab layout */
    padding: var(--tt-s-8) var(--tt-s-16);
    font-size: 13px;
    font-family: var(--tt-font-sans);
    color: var(--tt-ink-3);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.cg-tab:hover[b-23gx9cst4t] {
    color: var(--tt-ink-1);
}

.cg-tab.is-active[b-23gx9cst4t] {
    color: var(--tt-ink-1);
    font-weight: var(--tt-weight-semibold);
    border-bottom-color: var(--tt-ink-1);
}

/* ── Toolbar contents (surface + toolbar strip → <DataTablePanel StickyToolbar>) ── */
.cg-spacer[b-23gx9cst4t] {
    flex: 1;
}

.cg-btn-sm[b-23gx9cst4t] {
    padding: 7px var(--tt-s-12);
    font-size: 13px;
    gap: 5px;
}

.cg-btn-sm:disabled[b-23gx9cst4t] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Ghost: white background, bordered */
.cg-btn-ghost[b-23gx9cst4t] {
    background: var(--tt-surface-0);
    border-color: var(--tt-line);
    color: var(--tt-ink-1);
}

.cg-btn-ghost:hover:not(:disabled)[b-23gx9cst4t] {
    background: var(--tt-surface-2);
}

/* Danger: filled red */
.cg-btn-danger[b-23gx9cst4t] {
    background: var(--tt-danger);
    border-color: var(--tt-danger);
    color: #fff;
}

.cg-btn-danger:hover:not(:disabled)[b-23gx9cst4t] {
    filter: brightness(0.88);
}

/* ── Filter / group chip wrappers ─────────────────────────────────────── */
.cg-chip-group[b-23gx9cst4t] {
    display: inline-flex;
    align-items: center;
    gap: var(--tt-s-4);
}

/* ── Grid table ───────────────────────────────────────────────────────── */
/* grid surface + scroll owned by DataTablePanel body */
.cg-table[b-23gx9cst4t] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: var(--tt-ink-1);
}

.cg-table thead th[b-23gx9cst4t] {
    text-align: left;
    background: var(--tt-surface-0);
    color: var(--tt-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 11px;
    font-weight: var(--tt-weight-semibold);
    padding: var(--tt-s-12) var(--tt-s-12);
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
    white-space: nowrap;
    vertical-align: middle;
}

.cg-table thead th.cg-right[b-23gx9cst4t] {
    text-align: right;
}

.cg-table tbody td[b-23gx9cst4t] {
    padding: var(--tt-s-10) var(--tt-s-12);
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
    color: var(--tt-ink-1);
    vertical-align: middle;
}

.cg-table tbody td.cg-right[b-23gx9cst4t] {
    text-align: right;
}

.cg-table tbody tr:last-child td[b-23gx9cst4t] {
    border-bottom: none;
}

/* ── Row states ───────────────────────────────────────────────────────── */
.cg-row[b-23gx9cst4t] {
    cursor: pointer;
}

.cg-row:hover td[b-23gx9cst4t] {
    background: var(--tt-surface-2);
}

.cg-row.is-selected td[b-23gx9cst4t] {
    background: rgba(var(--tt-primary-rgb), 0.07);
}

.cg-row.is-warn td[b-23gx9cst4t] {
    background: var(--tt-status-warn-surface);
}

.cg-row.is-crit td[b-23gx9cst4t] {
    background: var(--tt-status-crit-surface);
}

/* ── Row-select radio column ──────────────────────────────────────────── */
.cg-col-select[b-23gx9cst4t] {
    width: 29px;
    text-align: center;
    padding-left: var(--tt-s-6) !important;
    padding-right: 0 !important;
}

/* ── Group header ─────────────────────────────────────────────────────── */
.cg-group-head td[b-23gx9cst4t] {
    background: var(--tt-surface-2);
    font-weight: var(--tt-weight-semibold);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tt-ink-2);
    padding: var(--tt-s-8) var(--tt-s-14);
    cursor: default;
}

.cg-group-count[b-23gx9cst4t] {
    color: var(--tt-ink-4);
    margin-left: var(--tt-s-6);
    font-weight: var(--tt-weight-medium);
}

/* ── Empty state ──────────────────────────────────────────────────────── */
.cg-empty[b-23gx9cst4t] {
    padding: var(--tt-s-36) var(--tt-s-14);
    text-align: center;
    color: var(--tt-ink-3);
    font-style: italic;
}

/* ── Percent-consumed cell badges ─────────────────────────────────────── */
/* Warn = yellow pill, dark text, darker-yellow outline (so the pill reads on
   the yellow-tinted row). Crit = solid deep-red pill, white text. Fill weight
   + text contrast carry the severity independent of hue (colorblind-safe). */
[b-23gx9cst4t] .pc-warn {
    display: inline-block;
    background: var(--tt-status-warn);
    color: var(--tt-status-warn-on);
    border: 1.5px solid var(--tt-status-warn-border);
    font-weight: var(--tt-weight-bold);
    padding: 1px var(--tt-s-6);
    border-radius: var(--tt-radius-2);
}

[b-23gx9cst4t] .pc-crit {
    display: inline-block;
    background: var(--tt-status-crit);
    color: #fff;
    border: 1.5px solid var(--tt-status-crit);
    font-weight: var(--tt-weight-bold);
    padding: 1px var(--tt-s-6);
    border-radius: var(--tt-radius-2);
}

/* Default: long labels visible, short hidden. Declared before the responsive
   blocks below so their narrow-screen overrides win by source order. */
.cg-col-long[b-23gx9cst4t]  { display: inline; }
.cg-col-short[b-23gx9cst4t] { display: none; }

/* ── Responsive: tablet (≤900px) ──────────────────────────────────────── */
@media (max-width: 900px) {
    .cg-table[b-23gx9cst4t] {
        font-size: 12px;
    }

    .cg-table thead th[b-23gx9cst4t],
    .cg-table tbody td[b-23gx9cst4t] {
        padding: var(--tt-s-8) 7px;
    }

    .cg-col-select[b-23gx9cst4t] {
        display: none;
    }

    /* Complete view: type + car are redundant when scoped by context */
    .cg-table[data-view="Complete"] .cg-col-type[b-23gx9cst4t],
    .cg-table[data-view="Complete"] .cg-col-car[b-23gx9cst4t]  { display: none; }

    /* Installed + Retired views: type is implied by the description */
    .cg-table[data-view="Installed"] .cg-col-type[b-23gx9cst4t],
    .cg-table[data-view="Retired"] .cg-col-type[b-23gx9cst4t] { display: none; }
}

/* ── Responsive: mobile (≤800px) ──────────────────────────────────────── */
/* Builds on the tablet rules above, dropping the lowest-priority columns
   so the most relevant data fits a phone-width screen. */
@media (max-width: 800px) {
    /* Swap long → short column labels at phone width, but ONLY for columns
       that actually define a short label (the markup omits the short span
       otherwise). Hiding the long label unconditionally would blank out every
       header without a short variant - :has() restricts it to the ones with one.
       Kept at the mobile breakpoint so tablet retains the full-word headers. */
    .cg-table thead th:has(.cg-col-short) .cg-col-long[b-23gx9cst4t] { display: none; }
    .cg-col-short[b-23gx9cst4t] { display: inline; }

    /* Inventoried: keep desc + purchase date/cost; drop car, service, status */
    .cg-table[data-view="Inventoried"] .cg-col-car[b-23gx9cst4t],
    .cg-table[data-view="Inventoried"] .cg-col-service[b-23gx9cst4t],
    .cg-table[data-view="Inventoried"] .cg-col-status[b-23gx9cst4t] { display: none; }

    /* Installed + Retired now share a column layout, so they share its narrow-
       screen treatment: drop the dates, remaining + % remaining (keep % consumed). */
    .cg-table[data-view="Installed"] .cg-col-purchased[b-23gx9cst4t],
    .cg-table[data-view="Installed"] .cg-col-installed[b-23gx9cst4t],
    .cg-table[data-view="Installed"] .cg-col-remaining[b-23gx9cst4t],
    .cg-table[data-view="Installed"] .cg-col-pctRemaining[b-23gx9cst4t],
    .cg-table[data-view="Retired"] .cg-col-purchased[b-23gx9cst4t],
    .cg-table[data-view="Retired"] .cg-col-installed[b-23gx9cst4t],
    .cg-table[data-view="Retired"] .cg-col-retired[b-23gx9cst4t],
    .cg-table[data-view="Retired"] .cg-col-remaining[b-23gx9cst4t],
    .cg-table[data-view="Retired"] .cg-col-pctRemaining[b-23gx9cst4t] { display: none; }

    /* Reclaim the gap between Unit and Expected. The compact stat
       headers ("Life/Used/% Used") in effect at this width let the numeric
       columns shrink to their values; let Description soak up the freed width
       and right-align Unit so its value sits flush with the numeric block. */
    .cg-table[data-view="Installed"] .cg-col-desc[b-23gx9cst4t],
    .cg-table[data-view="Retired"] .cg-col-desc[b-23gx9cst4t] { width: 100%; }
    .cg-table[data-view="Installed"] th.cg-col-unit[b-23gx9cst4t],
    .cg-table[data-view="Installed"] td.cg-col-unit[b-23gx9cst4t],
    .cg-table[data-view="Retired"] th.cg-col-unit[b-23gx9cst4t],
    .cg-table[data-view="Retired"] td.cg-col-unit[b-23gx9cst4t] { text-align: right; }

    /* Complete: drop cost/status/interval detail */
    .cg-table[data-view="Complete"] .cg-col-price[b-23gx9cst4t],
    .cg-table[data-view="Complete"] .cg-col-service[b-23gx9cst4t],
    .cg-table[data-view="Complete"] .cg-col-status[b-23gx9cst4t],
    .cg-table[data-view="Complete"] .cg-col-interval[b-23gx9cst4t] { display: none; }

    /* Complete + Inventoried: wrap the filter / group chips onto a second
       row below the action buttons. Those two views are the only ones with
       a filter chip set, i.e. two .cg-chip-group elements. The DataTablePanel
       toolbar already flex-wraps; here we turn the spacer into a full-width,
       zero-height break so the chips flow to the next line — detected via :has()
       on the spacer's following siblings (no toolbar-container reference needed). */
    .cg-spacer:has(~ .cg-chip-group ~ .cg-chip-group)[b-23gx9cst4t] {
        flex-basis: 100%;
        height: 0;
    }
}

/* Modal shell (backdrop / card / title / actions / buttons) and the add/edit/swap
   form styles are now the shared <Modal> component. Only the delete-confirm
   message paragraph remains here. */
.cg-modal__msg[b-23gx9cst4t] {
    font-size: 13px;
    color: var(--tt-ink-2);
    margin: 0 0 var(--tt-s-18);
    line-height: 1.5;
}
/* /Components/ConsumableSwapModal.razor.rz.scp.css */
/* Modal shell (backdrop / card / title / actions / buttons) is now the shared
   <Modal> component. Only the dialog's message, notice, and form remain here. */

.cg-modal__msg[b-d8vf4sfybo] {
    font-size: 13px;
    color: var(--tt-ink-2);
    margin: 0 0 var(--tt-s-18);
    line-height: 1.5;
}

.cg-modal__notice[b-d8vf4sfybo] {
    font-size: 13px;
    color: var(--tt-ink-2);
    background: var(--tt-surface-2);
    border-left: 3px solid var(--tt-line);
    padding: var(--tt-s-12) var(--tt-s-14);
    margin: 0 0 var(--tt-s-18);
    line-height: 1.5;
}

/* ── Form inside modal ────────────────────────────────────────────────── */
.cg-form[b-d8vf4sfybo] {
    display: flex;
    flex-direction: column;
    gap: var(--tt-s-14);
}

.cg-form--compact[b-d8vf4sfybo] {
    margin-bottom: var(--tt-s-4);
}

.cg-form__row[b-d8vf4sfybo] {
    display: flex;
    flex-direction: column;
    gap: var(--tt-s-4);
    flex: 1;
    min-width: 0;
}

.cg-form__label[b-d8vf4sfybo] {
    font-size: 10px;
    font-weight: var(--tt-weight-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tt-ink-3);
}

.cg-form__input[b-d8vf4sfybo] {
    font: inherit;
    font-size: 13px;
    padding: 7px var(--tt-s-10);
    border: var(--tt-border-w) solid var(--tt-line);
    border-radius: var(--tt-radius-4);
    background: var(--tt-surface-0);
    color: var(--tt-ink-1);
    width: 100%;
    outline: none;
}

.cg-form__input:focus[b-d8vf4sfybo] {
    border-color: var(--tt-primary);
    box-shadow: var(--tt-shadow-focus);
}

.cg-form__check-row[b-d8vf4sfybo] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-8);
    font-size: 13px;
    color: var(--tt-ink-2);
    cursor: pointer;
}
/* /Components/ContextBar.razor.rz.scp.css */
/* ── Bar container ────────────────────────────────────────────────────── */

.cb-bar[b-f610vhk4tk] {
    display: flex;
    gap: var(--tt-s-8);
    margin-bottom: var(--tt-s-20);
}

.cb-bar--compact[b-f610vhk4tk] { margin-bottom: 0; }

@media (max-width: 900px) {
    .cb-bar[b-f610vhk4tk] { flex-wrap: wrap; }
}
/* /Components/ContextBarCell.razor.rz.scp.css */
/* ── Cell wrap ────────────────────────────────────────────────────────── */

.cb-cell-wrap[b-9vnhipju6n] {
    flex: 1 1 auto;
    position: relative;
    background: var(--tt-surface-0);
    border: var(--tt-border-w) solid var(--tt-line-soft);
}

/* ── Cell button ──────────────────────────────────────────────────────── */

.cb-cell[b-9vnhipju6n] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    gap: var(--tt-s-10);
    padding: var(--tt-s-10) var(--tt-s-14);
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background 120ms;
    min-height: 52px;
}

.cb-cell:hover:not(:disabled)[b-9vnhipju6n]  { background: var(--tt-surface-1); }
.cb-cell-wrap.is-open .cb-cell[b-9vnhipju6n] { background: var(--tt-surface-1); }
.cb-cell:disabled[b-9vnhipju6n]              { cursor: not-allowed; opacity: 0.65; }

.cb-cell__icon[b-9vnhipju6n] {
    color: var(--tt-ink-3);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.cb-cell__info[b-9vnhipju6n] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--tt-s-2);
    min-width: 0;
}

.cb-cell__label[b-9vnhipju6n] {
    font-size: 10px;
    font-weight: var(--tt-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tt-tracking-wide);
    color: var(--tt-ink-4);
    line-height: 1;
    white-space: nowrap;
}

.cb-cell__value[b-9vnhipju6n] {
    font-size: var(--tt-text-sm);
    font-weight: var(--tt-weight-medium);
    color: var(--tt-ink-1);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-cell__chev[b-9vnhipju6n] {
    color: var(--tt-ink-4);
    flex-shrink: 0;
}

/* ── Hidden date-picker overlay ───────────────────────────────────────── */

.cb-date-overlay[b-9vnhipju6n] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
    bottom: 0;
    left: 0;
}

/* ── Popover shell ────────────────────────────────────────────────────── */

.cb-popover[b-9vnhipju6n] {
    position: absolute;
    top: calc(100% + var(--tt-s-6));
    left: 0;
    min-width: 240px;
    max-height: 280px;
    overflow-y: auto;
    background: var(--tt-surface-0);
    border: var(--tt-border-w) solid var(--tt-ink-1);
    box-shadow: var(--tt-shadow-lg);
    z-index: 30;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.cb-popover--right[b-9vnhipju6n] { left: auto; right: 0; }

/* ── Compact variant (header placement) ───────────────────────────────── */

.cb-cell-wrap--compact .cb-cell[b-9vnhipju6n] {
    min-height: 38px;
    padding: var(--tt-s-6) var(--tt-s-12);
    gap: var(--tt-s-8);
}

/* ── Render-fragment content - avatar and generic options ─────────────── */
/* Elements defined in the calling page carry its scope attribute;
   ::deep lets ContextBarCell styles reach them across the boundary.     */

[b-9vnhipju6n] .cb-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #5f6368;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: var(--tt-weight-semibold);
    flex-shrink: 0;
    letter-spacing: 0.03em;
    user-select: none;
}

[b-9vnhipju6n] .cb-avatar--placeholder {
    background: var(--tt-surface-2);
    color: var(--tt-ink-3);
    border: var(--tt-border-w) dashed var(--tt-line-soft);
}

/* ── Popover title ────────────────────────────────────────────────────── */

[b-9vnhipju6n] .cb-popover__title {
    font-size: 10px;
    font-weight: var(--tt-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--tt-ink-3);
    padding: var(--tt-s-10) var(--tt-s-12) var(--tt-s-8);
}

/* ── Generic option (driver popover) ──────────────────────────────────── */

[b-9vnhipju6n] .cb-popover__opt {
    display: flex;
    align-items: center;
    gap: var(--tt-s-8);
    width: 100%;
    padding: var(--tt-s-8) var(--tt-s-12);
    background: transparent;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    color: var(--tt-ink-1);
    text-align: left;
}

[b-9vnhipju6n] .cb-popover__opt:hover     { background: var(--tt-surface-2); }
[b-9vnhipju6n] .cb-popover__opt.is-active { color: var(--tt-primary); font-weight: var(--tt-weight-semibold); }

[b-9vnhipju6n] .cb-popover__hint {
    font-size: 11px;
    color: var(--tt-ink-3);
    padding: var(--tt-s-4) var(--tt-s-12) var(--tt-s-10);
    line-height: 1.4;
}

/* ── List option (car, track) ─────────────────────────────────────────── */

[b-9vnhipju6n] .cb-popover__list-opt {
    display: flex;
    align-items: center;
    gap: var(--tt-s-10);
    width: 100%;
    padding: var(--tt-s-6) var(--tt-s-12);
    background: transparent;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    color: var(--tt-ink-3);
    text-align: left;
    transition: background 100ms;
}

[b-9vnhipju6n] .cb-popover__list-opt:hover     { background: var(--tt-surface-2); }
[b-9vnhipju6n] .cb-popover__list-opt.is-active { color: var(--tt-ink-1); font-weight: var(--tt-weight-medium); }

/* ── Car badge ────────────────────────────────────────────────────────── */

/* ── Option icon + meta ───────────────────────────────────────────────── */

[b-9vnhipju6n] .cb-popover__opt-icon {
    flex-shrink: 0;
    display: flex;
    color: inherit;
}

[b-9vnhipju6n] .cb-popover__opt-name { flex: 1; }

[b-9vnhipju6n] .cb-popover__opt-meta {
    font-size: 11px;
    color: var(--tt-ink-4);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ── Field row (date, weather) ────────────────────────────────────────── */

[b-9vnhipju6n] .cb-popover__field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tt-s-12);
    padding: var(--tt-s-8) var(--tt-s-12);
}

[b-9vnhipju6n] .cb-popover__field-label {
    font-size: 11px;
    color: var(--tt-ink-3);
    flex-shrink: 0;
}

[b-9vnhipju6n] .cb-popover__date-input {
    font: inherit;
    font-size: 13px;
    color: var(--tt-ink-1);
    border: none;
    background: transparent;
    outline: none;
    cursor: pointer;
}

[b-9vnhipju6n] .cb-popover__field-input {
    font: inherit;
    font-size: 13px;
    color: var(--tt-ink-1);
    border: none;
    border-bottom: var(--tt-border-w) solid var(--tt-line);
    background: transparent;
    outline: none;
    width: 72px;
    text-align: right;
    padding: var(--tt-s-2) 0;
}

[b-9vnhipju6n] .cb-popover__select {
    font: inherit;
    font-size: 13px;
    color: var(--tt-ink-1);
    border: none;
    border-bottom: var(--tt-border-w) solid var(--tt-line);
    background: transparent;
    outline: none;
    cursor: pointer;
    padding: var(--tt-s-2) 0;
    text-align: right;
}

/* ── Auto info line ───────────────────────────────────────────────────── */

[b-9vnhipju6n] .cb-popover__auto {
    padding: var(--tt-s-4) var(--tt-s-12) var(--tt-s-8);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tt-ink-4);
    line-height: 1.4;
}

/* ── Footer (Cancel / Done buttons) ──────────────────────────────────── */

[b-9vnhipju6n] .cb-popover__note {
    font-size: 11px;
    color: var(--tt-primary);
    line-height: 1.45;
    padding: var(--tt-s-6) var(--tt-s-12) var(--tt-s-8);
    margin: 0;
}

[b-9vnhipju6n] .cb-popover__footer {
    display: flex;
    gap: var(--tt-s-6);
    padding: var(--tt-s-8) var(--tt-s-12) var(--tt-s-10);
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
    margin-top: auto;
}

[b-9vnhipju6n] .cb-popover__footer-btn {
    flex: 1;
    height: 32px;
    font: inherit;
    font-size: 11px;
    font-weight: var(--tt-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: var(--tt-border-w) solid var(--tt-ink-1);
    background: transparent;
    color: var(--tt-ink-1);
    cursor: pointer;
    transition: background 100ms, opacity 100ms;
}

[b-9vnhipju6n] .cb-popover__footer-btn:hover { background: var(--tt-surface-2); }

[b-9vnhipju6n] .cb-popover__footer-btn--primary {
    background: var(--tt-ink-1);
    color: var(--tt-surface-0);
}

[b-9vnhipju6n] .cb-popover__footer-btn--primary:hover { opacity: 0.88; background: var(--tt-ink-1); }

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .cb-cell-wrap[b-9vnhipju6n] { flex: 1 1 calc(50% - 4px); }
}
/* /Components/CornerDialog.razor.rz.scp.css */
/* One corner, one moment at a time (#353). Lives inside Modal, so it owns no chrome. */

.crn__lede[b-r307w7azoa] {
    margin: 0;
    font-size: var(--tt-text-sm);
    line-height: 1.5;
    color: var(--tt-ink-2);
    text-wrap: pretty;
}

.crn__stage[b-r307w7azoa] {
    margin-top: var(--tt-s-16);
    padding-top: var(--tt-s-12);
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
}

.crn__stage-head[b-r307w7azoa] {
    display: flex;
    align-items: baseline;
    gap: var(--tt-s-8);
}

.crn__stage-title[b-r307w7azoa] {
    flex: 1;
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-bold);
    letter-spacing: var(--tt-tracking-wide);
    text-transform: uppercase;
    color: var(--tt-ink-2);
}

/* "you set this" / "you read this" — the moment, not the action. It sits beside the title because
   the pair together is what tells the driver which half of the dialog they are in. */
.crn__stage-when[b-r307w7azoa] {
    font-size: var(--tt-text-xs);
    letter-spacing: var(--tt-tracking-wide);
    text-transform: uppercase;
    color: var(--tt-ink-4);
}

.crn__stage-hint[b-r307w7azoa],
.crn__stage-none[b-r307w7azoa] {
    margin: var(--tt-s-4) 0 0;
    font-size: var(--tt-text-xs);
    line-height: 1.5;
    color: var(--tt-ink-4);
    text-wrap: pretty;
}

/* ── A folded stage ──────────────────────────────────────────────────────────────────────────
   Never silent: it still answers what is in it, because folding a section that hides its values is
   worse than a long form. */
.crn__folded[b-r307w7azoa] {
    display: flex;
    width: 100%;
    align-items: baseline;
    gap: var(--tt-s-10);
    margin-top: var(--tt-s-6);
    padding: 0;
    background: none;
    border: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.crn__folded:hover[b-r307w7azoa] { opacity: 0.7; }

.crn__folded-sum[b-r307w7azoa] {
    flex: 1;
    min-width: 0;
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-3);
    font-variant-numeric: tabular-nums;
}

/* Red, because it is the way back to the half of the dialog the driver came for. */
.crn__folded-act[b-r307w7azoa] {
    font-size: var(--tt-text-xs);
    color: var(--tt-cta);
    white-space: nowrap;
}

/* ── Fields ──────────────────────────────────────────────────────────────────────────────── */
.crn__field[b-r307w7azoa] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px;
    gap: var(--tt-s-12);
    align-items: center;
    margin-top: var(--tt-s-10);
}

.crn__field-lbl[b-r307w7azoa] {
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-2);
}

.crn__field-in[b-r307w7azoa] {
    width: 100%;
    height: 34px;
    padding: 0 var(--tt-s-8);
    border: var(--tt-border-w) solid var(--tt-line);
    border-radius: var(--tt-radius-4);
    background: var(--tt-surface-0);
    font-family: var(--tt-font-mono);
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-1);
    text-align: right;
    font-variant-numeric: tabular-nums;
    box-sizing: border-box;
}

/* The spinner is kept rather than suppressed. Each field steps by its own increment — psi by 1,
   camber by 0.1°, toe by 0.02° — so the arrows move the value the way the adjustment actually
   moves, and a driver in the paddock does not have to type a decimal to nudge a corner. */

/* A reading nobody has taken says so, and nothing is carried over from the last session as a
   placeholder — the previous number must not be the thing on screen when the answer is that there
   is no number. */
.crn__field-in[b-r307w7azoa]::placeholder {
    font-family: inherit;
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-4);
}

.crn__field-in:disabled[b-r307w7azoa] {
    background: var(--tt-surface-1);
    color: var(--tt-ink-4);
}

/* ── The effective-from ──────────────────────────────────────────────────────────────────── */
.crn__when[b-r307w7azoa] {
    margin: var(--tt-s-14) 0 0;
    padding-top: var(--tt-s-10);
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
    font-size: var(--tt-text-xs);
    line-height: 1.5;
    color: var(--tt-ink-4);
    text-wrap: pretty;
}

.crn__error[b-r307w7azoa] {
    margin: var(--tt-s-10) 0 0;
    font-size: var(--tt-text-sm);
    color: var(--tt-status-crit);
}

@media (max-width: 600px) {
    .crn__field[b-r307w7azoa] { grid-template-columns: minmax(0, 1fr); }
}

/* Why a row here cannot be typed over. It names the real route out — a disabled field with no
   explanation is something the driver argues with rather than acts on. */
.crn__why[b-r307w7azoa] {
    margin: var(--tt-s-8) 0 0;
    font-size: var(--tt-text-xs);
    line-height: 1.5;
    color: var(--tt-ink-4);
    text-wrap: pretty;
}

/* ── In effect from ──────────────────────────────────────────────────────────────────────────
   A real two-way choice: "this session on" rewrites what every later session inherits, where
   "this session only" is an experiment the car comes back from on its own. */
.crn__effect[b-r307w7azoa] {
    margin-top: var(--tt-s-14);
    padding-top: var(--tt-s-12);
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
}

.crn__effect-lbl[b-r307w7azoa] {
    display: block;
    margin-bottom: var(--tt-s-6);
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    letter-spacing: var(--tt-tracking-wide);
    text-transform: uppercase;
    color: var(--tt-ink-4);
}

.crn__effect-say[b-r307w7azoa] {
    display: block;
    margin-top: var(--tt-s-6);
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-4);
}
/* /Components/DataTablePanel.razor.rz.scp.css */
.tt-data-panel[b-0r12xgqcac] {
    background: var(--tt-surface-0);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    box-shadow: var(--tt-shadow-sm);
}

.tt-data-panel__toolbar[b-0r12xgqcac] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-8);
    flex-wrap: wrap;
    padding: var(--tt-s-10) var(--tt-s-12);
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
}

.tt-data-panel__toolbar--sticky[b-0r12xgqcac] {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--tt-surface-0);
}

.tt-data-panel__body[b-0r12xgqcac] {
    overflow-x: auto;
}
/* /Components/DayArc.razor.rz.scp.css */
/* The arc of the day (#354).

   Sizes below the type scale are the prototype's own and are written in px on purpose: the smallest
   token is 12px, and a session label at 12px in a four-column arc wraps. Same decision, and the same
   reason, as the setup slot cards. */

/* Pulled up onto the panel's separator so the tallest bar meets the rule above it rather than
   floating below it — the rule reads as the top of the scale, which is what it is. The offset is
   the panel body's own top padding, cancelled here and nowhere else: Panel is shared, and closing
   the gap there would close it under every panel in the app. */
.arc-wrap[b-6urnx35mq0] {
    --arc-h: 120px;
    margin-top: calc(-1 * var(--tt-s-20));
}

.arc[b-6urnx35mq0] {
    display: flex;
    align-items: stretch;
    gap: var(--tt-s-14);
}

/* The tolerances, fixed at 102% and 105%. Anything reaching past a line gave away more than that
   line allows — the reading the chart exists for, and one the bars cannot give on their own. */
.arc__window[b-6urnx35mq0] {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1;
    border-bottom: var(--tt-border-w) dashed var(--tt-line);
    pointer-events: none;
}

/* Above its own line rather than below, so the label sits in the space the line describes as
   slower — where the bars that cross it already are — instead of over the quicker laps. */
.arc__window-lbl[b-6urnx35mq0] {
    position: absolute;
    right: 0;
    bottom: 2px;
    font-size: 10px;
    line-height: 1.2;
    color: var(--tt-ink-4);
    background: var(--tt-surface-0);
    padding-left: var(--tt-s-4);
}

.arc__group[b-6urnx35mq0] {
    flex: 1;
    min-width: 0;
}

/* One baseline under the whole day, so the columns are read against each other rather than each
   against its own floor. That is the entire point of this component. */
/* Bars stand on the baseline, and the baseline IS the day's best lap: it is the zero of the scale,
   and a bar's height is the time that lap gave away. */
.arc__bars[b-6urnx35mq0] {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: var(--arc-h);
    border-bottom: var(--tt-border-w) solid var(--tt-line);
}

/* On the pace for this driver's stage. The status ramp rather than a neutral: a lap inside the
   window is a good lap, and grey says nothing about it either way. */
.arc__bar[b-6urnx35mq0] {
    flex: 1;
    min-width: 0;
    display: block;
    background: var(--tt-status-ok-soft);
    border-radius: var(--tt-radius-2) var(--tt-radius-2) 0 0;
}

/* The day's fastest lap, which the header tile also states. The full-strength green against the
   soft one, so the best lap reads as the best of the good rather than as the only good one. */
.arc__bar.is-best[b-6urnx35mq0] { background: var(--tt-status-ok); }

/* A session with no lap sequence is drawn from the single best lap it recorded. Held to a lap's
   width rather than stretched across the group, so a brief record does not draw a fat bar and
   read as the most substantial session of the day. */
.arc__bar.is-lone[b-6urnx35mq0] {
    flex: 0 0 auto;
    width: 14px;
}

/* Outside the driver's window. Warn rather than crit: a lap off the pace is usually traffic, a
   cool-down or a line being learned, and a chart that calls a third of a novice's laps critical is
   making a judgement the record does not support. Previously --tt-line, a LINE token used as a
   fill, which is why it read as pale blue and as a different kind of thing altogether. */
.arc__bar.is-off[b-6urnx35mq0] { background: var(--tt-status-warn-border); }

/* Out and in laps fill the column, which on this scale is honest — they gave away more than any
   timed lap did. Filled, because an outline alone read as an empty column rather than as a lap:
   the shading says something is there, and its neutral grey says it is not on the ramp the timed
   laps are judged on. The dash stays for the same reason. Hiding them altogether would break the
   running order the arc exists to show. */
.arc__bar.is-edge[b-6urnx35mq0] {
    background: var(--tt-surface-1);
    border: var(--tt-border-w) dashed var(--tt-line-soft);
    border-bottom: none;
}

/* A session that ran and recorded nothing keeps its column. Closing the gap would rewrite the day
   as one where every session produced laps. */
.arc__silent[b-6urnx35mq0] {
    align-self: center;
    width: 100%;
    text-align: center;
    font-size: 10.5px;
    font-style: italic;
    color: var(--tt-ink-4);
}

.arc__foot[b-6urnx35mq0] {
    display: flex;
    align-items: baseline;
    gap: var(--tt-s-6);
    margin-top: var(--tt-s-6);
}

.arc__short[b-6urnx35mq0] {
    flex: 1;
    font-size: 11px;
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-2);
    white-space: nowrap;
}

.arc__best[b-6urnx35mq0] {
    font-size: 11px;
    color: var(--tt-ink-3);
    font-variant-numeric: tabular-nums;
}

.arc__meta[b-6urnx35mq0] {
    margin-top: 1px;
    font-size: 10.5px;
    line-height: 1.4;
    color: var(--tt-ink-4);
}

/* Narrow: four columns of bars at phone width are four columns of nothing. The sessions stack, and
   each keeps the day's scale — which is what makes them comparable at any width. */
@media (max-width: 800px) {
    .arc[b-6urnx35mq0] { flex-direction: column; gap: var(--tt-s-16); }
    .arc__bars[b-6urnx35mq0] { height: 96px; }
}
/* /Components/Drawer.razor.rz.scp.css */
/* Drawer - geometry, transition curve and edge-tab treatment taken from .plan-disc
   (Plan.razor.css) verbatim, so lifting the Plan rail into this component changes nothing
   visually. Measured before the lift: width 340px, position fixed, top 56px, z-index 25,
   transition transform .28s cubic-bezier(.4,0,.2,1); tab left -36px, width 36px,
   radius 8px 0 0 8px.

   NOTE ON POSITIONING. The design project's Drawer.prompt.md and Modal.prompt.md both specify
   position: absolute inside a positioned parent, and say the component does not portal. That is
   a DESIGN-HARNESS constraint - the prototype renders many screens on one page, so nothing may
   escape its frame - not a design decision. The app is the opposite and stays fixed. */

.drawer[b-dby25721os] {
    position: fixed;
    top: 56px;   /* below the app bar */
    bottom: 0;
    width: var(--drawer-w, 340px);
    max-width: 92vw;
    z-index: 25;
    display: flex;
    flex-direction: column;
    background: var(--tt-surface-1);
    box-shadow: var(--tt-shadow-lg);

    /* Docked: always mounted, slides off-screen when collapsed (#130). Scroll position and
       half-typed fields survive a close, and the edge tab stays on screen. */
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}

.drawer--right[b-dby25721os] {
    right: 0;
    border-left: var(--tt-border-w) solid var(--tt-line-soft);
    transform: translateX(100%);
}

.drawer--left[b-dby25721os] {
    left: 0;
    border-right: var(--tt-border-w) solid var(--tt-line-soft);
    transform: translateX(-100%);
}

.drawer.is-open[b-dby25721os] { transform: translateX(0); }

/* Persistent edge-tab handle - rides with the transform, so it stays on-screen when the rail
   is collapsed. That is the whole point of a docked rail over a slide-in dialog. */
.drawer__tab[b-dby25721os] {
    position: absolute;
    top: 46%;
    transform: translateY(-50%);
    width: 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--tt-s-8);
    padding: var(--tt-s-12) 0;
    background: var(--tt-surface-0);
    color: var(--tt-ink-3);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    cursor: pointer;
}

.drawer--right .drawer__tab[b-dby25721os] {
    left: -36px;
    border-right: none;
    border-radius: var(--tt-radius-8) 0 0 var(--tt-radius-8);
    box-shadow: -6px 0 16px color-mix(in srgb, var(--tt-ink-1) 6%, transparent);
}

.drawer--left .drawer__tab[b-dby25721os] {
    right: -36px;
    border-left: none;
    border-radius: 0 var(--tt-radius-8) var(--tt-radius-8) 0;
    box-shadow: 6px 0 16px color-mix(in srgb, var(--tt-ink-1) 6%, transparent);
}

.drawer__tab-lbl[b-dby25721os] {
    writing-mode: vertical-rl;
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-bold);
    letter-spacing: var(--tt-tracking-wide);
    text-transform: uppercase;
    color: var(--tt-ink-2);
}

.drawer__tab-badge[b-dby25721os] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 var(--tt-s-4);
    border-radius: var(--tt-radius-pill);
    background: var(--tt-cta);
    color: var(--tt-btn-cta-text);
    font-size: 10px;
    font-weight: var(--tt-weight-bold);
}

.drawer__head[b-dby25721os] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--tt-s-12) var(--tt-s-16);
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
}

.drawer__titles[b-dby25721os] {
    display: flex;
    flex-direction: column;
    margin-right: auto;
    min-width: 0;
}

/* --tt-text-sm, matching the shipped Plan rail.
   This was --tt-text-md when the component was written with no caller, on the argument that a rail
   is a surface you work inside rather than a popover, so its heading should name the surface. The
   Plan rail then became the first caller and turned out to use sm - and a shipped design that has
   been looked at is evidence, where the earlier reasoning was only a guess. The page wins.

   No explicit line-height either: the rail's title inherits, giving a 20.4px line box, and 1.3
   would have given 17.7px. It happens not to drive the header height - the close button is taller
   and wins - but matching it keeps the title's own box identical. A future caller that uses
   Subtitle may want the pair tighter; decide that with a subtitle on screen, not in advance. */
.drawer__title[b-dby25721os] {
    font-size: var(--tt-text-sm);
    font-weight: var(--tt-weight-semibold);
}

.drawer__subtitle[b-dby25721os] {
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-3);
}

.drawer__headerlink[b-dby25721os] {
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-link);
    text-decoration: none;
    margin-right: var(--tt-s-10);
    white-space: nowrap;
}

/* No padding declaration, deliberately. The shipped Plan rail sets none either, so the browser's
   default button padding (1px 6px in Chrome) applies and makes the button 22px tall - two more
   than its 20px line box. That is what sets the header's height, since the button is taller than
   the title: declaring `padding: 0 …` here made the header 45px against the rail's 47px and lifted
   every section under it by 2px. Matching the original means matching this too. */
.drawer__close[b-dby25721os] {
    border: none;
    background: none;
    color: var(--tt-ink-4);
    font-size: var(--tt-text-lg);
    line-height: 1;
    cursor: pointer;
}

.drawer__close:hover[b-dby25721os] { color: var(--tt-ink-2); }

/* Fixed region between the header and the scrolling body: filters, search, a segmented control.
   Carries no padding or border of its own - the caller's own sections supply theirs, and imposing
   spacing here would double whatever the content already has. It exists to sit OUTSIDE the scroll,
   nothing more. */
.drawer__toolbar[b-dby25721os] {
    flex: none;
}

/* Scrolls independently of the page. */
.drawer__body[b-dby25721os] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.drawer__foot[b-dby25721os] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--tt-s-8);
    padding: var(--tt-s-12) var(--tt-s-16);
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
}
/* /Components/EntityPicker.razor.rz.scp.css */
/* ── Unified container ────────────────────────────────────────── */

.drv-picker[b-n78at6ywrx] {
    display: inline-flex;
    align-items: stretch;
    border: var(--tt-border-w) solid var(--tt-line-soft);
    background: var(--tt-surface-0);
}

/* Suppress ContextBar's bottom margin; single cell needs no gap */
.drv-picker[b-n78at6ywrx]  .cb-bar {
    margin-bottom: 0;
    gap: 0;
}

/* Trigger cell: remove its own border, use only a left separator */
.drv-picker[b-n78at6ywrx]  .cb-cell-wrap {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    border-left: var(--tt-border-w) solid var(--tt-line-soft);
}

/* ── Driver chip ──────────────────────────────────────────────── */

.drv-chip[b-n78at6ywrx] {
    display: inline-flex;
    align-items: center;
    gap: var(--tt-s-6);
    padding: 0 var(--tt-s-10) 0 var(--tt-s-8);
    background: transparent;
    border: none;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Thin separator between consecutive chips */
.drv-chip + .drv-chip[b-n78at6ywrx] {
    border-left: var(--tt-border-w) solid var(--tt-line-soft);
}

.drv-chip__avatar[b-n78at6ywrx] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: var(--tt-weight-semibold);
    flex-shrink: 0;
    letter-spacing: 0.03em;
    user-select: none;
}

.drv-chip__name[b-n78at6ywrx] {
    font-size: 13px;
    font-weight: var(--tt-weight-medium);
    color: var(--tt-ink-1);
    line-height: 1;
}

/* ── Dismiss button (co-driver chips only) ────────────────────── */

.drv-chip__remove[b-n78at6ywrx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--tt-ink-3);
    cursor: pointer;
    padding: 0;
    margin-left: var(--tt-s-2);
    flex-shrink: 0;
    transition: background 100ms, color 100ms;
}

.drv-chip__remove:hover[b-n78at6ywrx] {
    background: var(--tt-surface-2);
    color: var(--tt-ink-1);
}

/* ── Popover option rows ──────────────────────────────────────── */

.drv-picker__opt[b-n78at6ywrx] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-10);
    width: 100%;
    padding: 9px var(--tt-s-12);
    background: transparent;
    border: none;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    color: var(--tt-ink-1);
    text-align: left;
    transition: background 100ms;
}

.drv-picker__opt:hover[b-n78at6ywrx] { background: var(--tt-surface-1); }

.drv-picker__check[b-n78at6ywrx] {
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--tt-line);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 100ms, border-color 100ms;
}

.drv-picker__opt.is-on .drv-picker__check[b-n78at6ywrx] {
    background: var(--tt-ink-1);
    border-color: var(--tt-ink-1);
    color: var(--tt-surface-0);
}

.drv-picker__opt-name[b-n78at6ywrx] { flex: 1; }

/* ── Done button ──────────────────────────────────────────────── */

.drv-picker__done[b-n78at6ywrx] {
    display: block;
    width: 100%;
    padding: var(--tt-s-10) var(--tt-s-12);
    background: var(--tt-ink-1);
    color: var(--tt-surface-0);
    border: none;
    font: inherit;
    font-size: 11px;
    font-weight: var(--tt-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    cursor: pointer;
    transition: opacity 100ms;
    margin-top: var(--tt-s-2);
}

.drv-picker__done:hover[b-n78at6ywrx] { opacity: 0.88; }
/* /Components/EventCard.razor.rz.scp.css */
/* ============================================================
 * EventCard - one "day at the track" card used in the Events
 * page month rails. Fixed-width, image-hero layout.
 * Tokens: relies on --tt-* vars in app.css.
 * ============================================================ */

.ev-card[b-almcv8478b] {
    display: flex;
    flex-direction: column;
    width: 320px;
    flex: 0 0 320px;
    background: var(--tt-surface-0);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-12);
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow 180ms ease, border-color 180ms ease;
    text-align: left;
    padding: 0;
    font-family: inherit;
    color: inherit;
}

.ev-card:hover[b-almcv8478b] {
    border-color: var(--tt-ink-3);
    box-shadow: var(--tt-shadow-md);
}

/* Mobile: the month rail / trip frame stack cards in a column, so the
   320px flex-basis would apply to the vertical (main) axis and force the
   card taller than its content. Reset the basis to auto so the card sizes
   to content height; the fixed 320px width still applies. */
@media (max-width: 800px) {
    .ev-card[b-almcv8478b] { flex: 0 0 auto; }
}

/* ── Hero ──────────────────────────────────────────────────── */

.ev-card__hero[b-almcv8478b] {
    position: relative;
    height: 160px;
    overflow: hidden;
    background: var(--tt-surface-2);
}

.ev-card__img[b-almcv8478b] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Planned event - desaturated to signal future / unconfirmed */
.ev-card--planned .ev-card__img[b-almcv8478b] {
    filter: grayscale(0.9) brightness(0.8);
}

.ev-card__img--blank[b-almcv8478b] {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
}

/* Both: bottom gradient for text legibility */
.ev-card__overlay[b-almcv8478b] {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.10) 30%, rgba(0,0,0,0.70) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--tt-s-10) var(--tt-s-12) var(--tt-s-12);
    gap: var(--tt-s-2);
}

/* Planned: add a light uniform tint from the top to reinforce the muted feel */
.ev-card--planned .ev-card__overlay[b-almcv8478b] {
    background: linear-gradient(180deg, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0.85) 100%);
}

/* ── Status pill ───────────────────────────────────────────── */

.ev-card__status[b-almcv8478b] {
    position: absolute;
    top: var(--tt-s-10);
    left: var(--tt-s-10);
    display: inline-flex;
    align-items: center;
    gap: var(--tt-s-4);
    height: 22px;
    padding: 0 var(--tt-s-8);
    background: rgba(14, 23, 42, 0.70);
    color: #fff;
    font-size: 10px;
    font-weight: var(--tt-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: var(--tt-radius-4);
    backdrop-filter: blur(4px);
}

/* In progress: amber status fill (live/active), distinct from the dark planned/completed pill */
.ev-card__status--inprogress[b-almcv8478b] {
    background: var(--tt-status-warn);
    color: var(--tt-status-warn-on);
}

.ev-card__status svg[b-almcv8478b] { flex-shrink: 0; }

/* ── Date block ────────────────────────────────────────────── */

.ev-card__date-block[b-almcv8478b] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    color: #fff;
}

.ev-card__weekday[b-almcv8478b] {
    font-size: 11px;
    font-weight: var(--tt-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.75;
    line-height: 1.2;
}

/* ── Track / car labels ────────────────────────────────────── */

.ev-card__track-name[b-almcv8478b] {
    font-size: 22px;
    font-weight: var(--tt-weight-semibold);
    color: #fff;
    margin-top: var(--tt-s-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.ev-card__car-name[b-almcv8478b] {
    font-size: 11px;
    color: rgba(255,255,255,0.70);
    font-weight: var(--tt-weight-regular);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Summary row ───────────────────────────────────────────── */

.ev-card__summary[b-almcv8478b] {
    display: flex;
    align-items: center;
    padding: var(--tt-s-10) var(--tt-s-12);
}

.ev-card__total[b-almcv8478b] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--tt-s-2);
}

.ev-card__total-num[b-almcv8478b] {
    font-size: 18px;
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-1);
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.ev-card__total-lbl[b-almcv8478b] {
    font-size: 10px;
    font-weight: var(--tt-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tt-ink-4);
}

.ev-card__chev[b-almcv8478b] {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--tt-ink-4);
}

/* ── Trip badge (top-right, shown when grouped outside a frame) */

.ev-card__trip-badge[b-almcv8478b] {
    position: absolute;
    top: var(--tt-s-10);
    right: var(--tt-s-10);
    display: inline-flex;
    align-items: center;
    gap: var(--tt-s-4);
    height: 20px;
    padding: 0 var(--tt-s-8);
    background: rgba(14, 23, 42, 0.70);
    color: #fff;
    font-size: 10px;
    font-weight: var(--tt-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    backdrop-filter: blur(4px);
    border-radius: var(--tt-radius-4);
}
/* /Components/Frame.razor.rz.scp.css */
/* ============================================================
 * Frame - transparent wrapper grouping EventCards that
 * belong to the same trip within a month rail.
 *
 * Alignment trick: the wrapper uses margin-top: -13px to lift
 * itself up so its inner cards (after 12px padding) land at the
 * same y-position as standalone cards beside it in the rail.
 * The rail's own 16px top padding gives the lifted frame room
 * to render without clipping.
 * ============================================================ */

.trip-frame[b-lltqn3lfn3] {
    background: transparent;
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-12);
    padding: var(--tt-s-12);
    display: inline-flex;
    flex-direction: column;
    flex: 0 0 auto;
    cursor: pointer;
    transition: border-color 180ms ease, box-shadow 180ms ease;
    margin-top: -13px;
    overflow: hidden; /* clips header/footer strips to border-radius */
}

/* Header strip - mirrors footer, sits at the top */
.trip-frame__header[b-lltqn3lfn3] {
    display: flex;
    align-items: baseline;
    gap: var(--tt-s-12);
    padding: var(--tt-s-4) var(--tt-s-14) var(--tt-s-12);
    margin: -12px -12px var(--tt-s-12);
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
}

.trip-frame:hover[b-lltqn3lfn3] {
    border-color: var(--tt-ink-1);
    box-shadow: var(--tt-shadow-md);
}

/* Inner row of EventCards */
.trip-frame__cards[b-lltqn3lfn3] {
    display: flex;
    flex-direction: row;
    gap: var(--tt-s-12);
    align-items: stretch;
}

/* Footer - sits below cards, separated by a hairline */
.trip-frame__footer[b-lltqn3lfn3] {
    display: flex;
    align-items: baseline;
    gap: var(--tt-s-12);
    padding: var(--tt-s-12) var(--tt-s-14) var(--tt-s-4);
    margin: var(--tt-s-12) -12px -12px;
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
}

/* ::deep so these apply to RenderFragment content from parent components,
   which carries the calling component's CSS scope attribute rather than Frame's. */
.trip-frame__footer[b-lltqn3lfn3]  .trip-frame__name,
.trip-frame__header[b-lltqn3lfn3]  .trip-frame__name {
    font-size: 15px;
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-1);
    letter-spacing: -0.005em;
    white-space: nowrap;
}

.trip-frame__footer[b-lltqn3lfn3]  .trip-frame__dates,
.trip-frame__header[b-lltqn3lfn3]  .trip-frame__dates {
    font-size: 12px;
    color: var(--tt-ink-3);
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: baseline;
    gap: var(--tt-s-6);
}

.trip-frame__footer[b-lltqn3lfn3]  .trip-frame__continued,
.trip-frame__header[b-lltqn3lfn3]  .trip-frame__continued {
    color: var(--tt-ink-4);
    font-style: italic;
}

.trip-frame__footer[b-lltqn3lfn3]  .trip-frame__stops,
.trip-frame__header[b-lltqn3lfn3]  .trip-frame__stops {
    margin-left: auto;
    font-size: 11px;
    color: var(--tt-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: var(--tt-weight-medium);
    white-space: nowrap;
}

.trip-frame__footer[b-lltqn3lfn3]  .trip-frame__stops strong,
.trip-frame__header[b-lltqn3lfn3]  .trip-frame__stops strong {
    color: var(--tt-ink-1);
    font-weight: var(--tt-weight-semibold);
    margin-right: 3px;
}

/* Mobile: stack a trip's stop cards vertically (and let the frame size to
   its content) so a multi-stop trip doesn't overflow the screen - matches
   the vertical, centered month rail. */
@media (max-width: 800px) {
    .trip-frame__cards[b-lltqn3lfn3] {
        flex-direction: column;
        align-items: center;
    }
}
/* /Components/GoalEditor.razor.rz.scp.css */
/* The quoted note in the promote state (#357).

   READ-ONLY BY CONSTRUCTION - it is a <blockquote>, not a field. The record of what was said must
   not be editable from a screen whose job is to paraphrase it, and making that structural rather
   than a disabled input means there is nothing to accidentally re-enable. */
.goal-src[b-qujtsw6t13] {
    margin: 0 0 var(--tt-s-14);
    padding: var(--tt-s-12) var(--tt-s-16);
    border-left: 3px solid var(--tt-line);
    background: var(--tt-surface-1);
}

.goal-src__said[b-qujtsw6t13] {
    margin: 0;
    font-size: var(--tt-text-base);
    line-height: 1.5;
    color: var(--tt-ink-2);
    text-wrap: pretty;
}

.goal-src__who[b-qujtsw6t13] {
    margin-top: var(--tt-s-6);
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-4);
}

.goal-src__where[b-qujtsw6t13] { color: var(--tt-ink-4); }
/* /Components/Modal.razor.rz.scp.css */
/* ============================================================================
   Modal / Dialog - the shared overlay-dialog shell.
   The single source of truth for the design-system Modal pattern
   (docs/design/design-system.html #modal): a fixed scrim centring a card,
   with a title, a body, and a right-aligned actions row set off by a hairline.
   ========================================================================== */

/* ── Scrim ────────────────────────────────────────────────────────────────*/
.tt-dialog-scrim[b-ni8t81hf5n] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(var(--tt-shadow-rgb), 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--tt-s-24);
    animation: tt-dialog-fade-b-ni8t81hf5n 160ms ease-out;
}

@keyframes tt-dialog-fade-b-ni8t81hf5n {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Card ─────────────────────────────────────────────────────────────────*/
.tt-dialog[b-ni8t81hf5n] {
    background: var(--tt-surface-0);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-8);
    box-shadow: var(--tt-shadow-modal);
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: var(--tt-s-24) var(--tt-s-28) var(--tt-s-20);
    outline: none;
    animation: tt-dialog-pop-b-ni8t81hf5n 200ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

@keyframes tt-dialog-pop-b-ni8t81hf5n {
    from { transform: scale(0.94); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

.tt-dialog--sm[b-ni8t81hf5n] { max-width: 400px; }
.tt-dialog--md[b-ni8t81hf5n] { max-width: 560px; }
.tt-dialog--lg[b-ni8t81hf5n] { max-width: 720px; }

/* ── Header ───────────────────────────────────────────────────────────────*/
.tt-dialog__head[b-ni8t81hf5n] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--tt-s-16);
    margin-bottom: var(--tt-s-18);
}

.tt-dialog__headings[b-ni8t81hf5n] { min-width: 0; }

.tt-dialog__title[b-ni8t81hf5n] {
    font-size: 16px;
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-1);
    margin: 0;
}

.tt-dialog__sub[b-ni8t81hf5n] {
    font-size: 13px;
    color: var(--tt-ink-3);
    line-height: 1.5;
    margin: 5px 0 0;
}

.tt-dialog__close[b-ni8t81hf5n] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: -4px -6px 0 0;
    border: 0;
    background: none;
    border-radius: var(--tt-radius-4);
    color: var(--tt-ink-4);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.tt-dialog__close:hover[b-ni8t81hf5n] {
    background: var(--tt-surface-2);
    color: var(--tt-ink-1);
}

/* ── Body ─────────────────────────────────────────────────────────────────*/
/* The body is whatever the feature supplies (a message or a form). Give a
   lone message paragraph sensible defaults without forcing them on forms.
   ::deep is required because ChildContent carries the *consumer's* scope,
   not this component's. */
.tt-dialog__body[b-ni8t81hf5n]  p:only-child {
    font-size: 13px;
    color: var(--tt-ink-3);
    line-height: 1.55;
    margin: 0;
}

/* ── Actions ──────────────────────────────────────────────────────────────*/
.tt-dialog__actions[b-ni8t81hf5n] {
    display: flex;
    justify-content: flex-end;
    gap: var(--tt-s-8);
    margin-top: var(--tt-s-20);
    padding-top: var(--tt-s-16);
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
}

.tt-dialog__btn[b-ni8t81hf5n] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--tt-s-8) var(--tt-s-20);
    border: var(--tt-border-w) solid transparent;
    border-radius: var(--tt-radius-4);
    font-family: var(--tt-font-sans);
    font-size: 13px;
    font-weight: var(--tt-weight-medium);
    cursor: pointer;
}

.tt-dialog__btn--cancel[b-ni8t81hf5n] {
    background: var(--tt-surface-0);
    border-color: var(--tt-line);
    color: var(--tt-ink-2);
}

.tt-dialog__btn--cancel:hover[b-ni8t81hf5n] { background: var(--tt-surface-2); }

/* The third action, pushed to the far left of the row. It wears Cancel's outline because it is no
   louder than Cancel; what separates them is the gap, not the colour. A neutral action beside the
   one that commits reads as a second way to commit. */
.tt-dialog__btn--aside[b-ni8t81hf5n] { margin-right: auto; }

.tt-dialog__btn--primary[b-ni8t81hf5n] {
    background: var(--tt-ink-1);
    border-color: var(--tt-ink-1);
    color: var(--tt-surface-0);
}

.tt-dialog__btn--primary:hover:not(:disabled)[b-ni8t81hf5n] {
    background: var(--tt-ink-2);
    border-color: var(--tt-ink-2);
}

.tt-dialog__btn--danger[b-ni8t81hf5n] {
    background: var(--tt-cta);
    border-color: var(--tt-cta);
    color: #fff;
}

.tt-dialog__btn--danger:hover:not(:disabled)[b-ni8t81hf5n] { filter: brightness(1.08); }

.tt-dialog__btn:disabled[b-ni8t81hf5n] {
    opacity: 0.4;
    cursor: not-allowed;
}
/* /Components/Note.razor.rz.scp.css */
/* Note - 11.5px, ink-4, text-wrap: pretty. One size and one colour for the whole quiet register. */

.note[b-qt0xk9vcrq] {
    display: flex;
    align-items: flex-start;
    gap: var(--tt-s-6);
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--tt-ink-4);
    text-wrap: pretty;
}

/* Top-aligned with the first line rather than centred on the block, so a two-line note does not
   float its icon into the middle. */
.note__icon[b-qt0xk9vcrq] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.note__body[b-qt0xk9vcrq] { min-width: 0; }

/* A rule, not a filled callout: enough to separate the block without making guidance look like
   an error. Same reason the colour stays put on the inset step. */
.note--inset[b-qt0xk9vcrq] {
    padding-left: var(--tt-s-10);
    border-left: 2px solid var(--tt-line);
}

.note--warn[b-qt0xk9vcrq] {
    padding-left: var(--tt-s-10);
    border-left: 2px solid var(--tt-status-warn-border);
    color: var(--tt-status-warn-text);
}

.note--danger[b-qt0xk9vcrq] {
    padding-left: var(--tt-s-10);
    border-left: 2px solid var(--tt-danger);
    color: var(--tt-danger);
}
/* /Components/PageHeader.razor.rz.scp.css */
/* PageHeader - see the anatomy table in docs/design/design-system.html #pageheader.
   Every value here comes from that table; the gaps are what make the three lines read as one
   block rather than three stacked elements. */

.ph[b-n31obav9j1] {
    display: flex;
    flex-direction: column;
    margin: 0 0 var(--tt-s-20);
}

/* 11px / 600 / uppercase / 0.1em, in the themeable accent. Names the section AND the surface
   ("Driver Prep · Next event"), so it is chrome rather than a kicker restating the title. */
.ph__eyebrow[b-n31obav9j1] {
    font-size: 11px;
    font-weight: var(--tt-weight-semibold);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--tt-primary);
    margin-bottom: 5px;
}

.ph__row[b-n31obav9j1] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-12);
}

/* clamp() so the title holds its proportion between a laptop and a wide monitor. Weight 200 is
   the display treatment - headings here are set apart by size and lightness, not by bold. */
.ph__title[b-n31obav9j1] {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 38.4px;
    font-weight: var(--tt-weight-light);
    letter-spacing: -0.015em;
    line-height: 1.2;
    color: var(--tt-ink-1);
    /* The title does not wrap and does not scale. A clamp() meant the title was a different size
       on almost every viewport; two fixed values are easier to design against. The constraint is
       now a character budget, and the fix for a title that does not fit is a SHORTER TITLE - the
       ellipsis is a guardrail, not a feature. If you see it, rename the page. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Lifted from .ev-detail__back (Events.razor.css) so the app has one back affordance, not two.

   IT SITS INLINE, and takes real space: the eyebrow and lede hold the page's left edge, and the
   title indents when a back button is present. It used to carry margin-left: -48px, which pulled
   it into the gutter so the title stayed flush - 36px button + 12px row gap = 48px. That was
   button geometry, but it silently required >=48px of page padding or the chevron clipped, and
   it only ever worked because the three pages passing OnBack happened to be the three with 48px
   padding. The shell now runs a 16px gutter, so the component owns no knowledge of page padding
   at all. See #400. */
.ph__back[b-n31obav9j1] {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-4);
    color: var(--tt-ink-2);
    cursor: pointer;
    transition: background 120ms;
}

.ph__back:hover[b-n31obav9j1] { background: var(--tt-surface-1); }

.ph__actions[b-n31obav9j1] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-8);
    flex-shrink: 0;
}

/* One line of identifying context - which record is on screen. Not a description of the page,
   and not a substitute for a pill row. */
.ph__lede[b-n31obav9j1] {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--tt-ink-3);
    text-wrap: pretty;
}

/* At the tablet tier the actions drop under the title. (The back button needs no rule here any
   more - it is inline at every width.) */
@media (max-width: 800px) {
    .ph__row[b-n31obav9j1] {
        flex-wrap: wrap;
        gap: var(--tt-s-8);
    }

    .ph__actions[b-n31obav9j1] { width: 100%; }
}

/* Mobile tier: the heading stops dominating a 390px screen. */
@media (max-width: 600px) {
    .ph__title[b-n31obav9j1] { font-size: 30px; }
}
/* /Components/Panel.razor.rz.scp.css */
.tt-panel[b-tw3pw4zo15] {
    background: var(--tt-surface-0);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: 0;
    box-shadow: var(--tt-shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ===== Header ===== */
.tt-panel__header[b-tw3pw4zo15] {
    padding: var(--tt-s-20) var(--tt-s-24) var(--tt-s-18);
    background: var(--tt-surface-0);
}

/* Eyebrow row: [line] [num] [pipe] [text] */
.tt-panel__eyebrow-row[b-tw3pw4zo15] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-10);
    margin-bottom: var(--tt-s-10);
}

.tt-panel__eyebrow-line[b-tw3pw4zo15] {
    flex: 0 0 20px;
    height: 1px;
    background: var(--tt-cta);
}

.tt-panel__eyebrow-num[b-tw3pw4zo15] {
    font-size: 11px;
    font-weight: var(--tt-weight-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--tt-cta);
    letter-spacing: 0.1em;
    line-height: 1;
}

.tt-panel__eyebrow-pipe[b-tw3pw4zo15] {
    flex: 0 0 1px;
    height: 11px;
    background: var(--tt-ink-4);
}

.tt-panel__eyebrow-text[b-tw3pw4zo15] {
    font-size: 11px;
    font-weight: var(--tt-weight-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tt-cta);
    line-height: 1;
}

.tt-panel__title[b-tw3pw4zo15] {
    font-size: 22px;
    font-weight: var(--tt-weight-regular);
    letter-spacing: -0.01em;
    color: var(--tt-ink-1);
    margin: 0;
    line-height: 1.15;
}

.tt-panel__desc[b-tw3pw4zo15] {
    font-size: 13px;
    color: var(--tt-ink-3);
    line-height: 1.55;
    margin: var(--tt-s-6) 0 0;
    max-width: 64ch;
}

/* ===== Separator - inset matches body/header side padding ===== */
.tt-panel__sep[b-tw3pw4zo15] {
    height: 1px;
    background: var(--tt-line-soft);
    margin: 0 var(--tt-s-24);
}

/* ===== Body ===== */
.tt-panel__body[b-tw3pw4zo15] {
    padding: var(--tt-s-20) var(--tt-s-24) var(--tt-s-22);
    flex: 1;
}

/* ===== Footer ===== */
.tt-panel__footer[b-tw3pw4zo15] {
    padding: var(--tt-s-14) var(--tt-s-24) var(--tt-s-16);
}

/* ===== Danger variant ===== */
.tt-panel--danger[b-tw3pw4zo15] {
    border-color: rgba(238, 6, 6, 0.22);
}

.tt-panel--danger .tt-panel__title[b-tw3pw4zo15] {
    color: var(--tt-danger);
}

.tt-panel--danger .tt-panel__eyebrow-text[b-tw3pw4zo15] {
    color: var(--tt-danger);
}
/* /Components/Pill.razor.rz.scp.css */
/* Pill - 22px, fully rounded, 10px horizontal padding, uppercase with 0.08em tracking.
   See docs/components/ComponentList.md #pill. */

.pill[b-schrd4pzgq] {
    display: inline-flex;
    align-items: center;
    gap: var(--tt-s-4);
    height: 22px;
    padding: 0 var(--tt-s-10);
    font-size: 10px;
    font-weight: var(--tt-weight-semibold);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;

    /* The full round is deliberate and is the ONLY rounded form in an otherwise squared system.
       Chips, buttons and inputs all sit at --tt-radius-4, so shape alone tells a reader whether
       a label is something they can act on: rounded means reported, squared means tappable.
       Do not square a Pill to match its neighbours. */
    border-radius: var(--tt-radius-pill);

    background: var(--tt-surface-2);
    color: var(--tt-ink-2);
}

.pill__icon[b-schrd4pzgq] { display: inline-flex; align-items: center; }

.pill--neutral[b-schrd4pzgq]    { background: var(--tt-surface-2); color: var(--tt-ink-2); }
.pill--planned[b-schrd4pzgq]    { background: var(--tt-accent-soft); color: var(--tt-accent); }
.pill--completed[b-schrd4pzgq]  { background: var(--tt-surface-inverse); color: var(--tt-surface-0); }
.pill--inprogress[b-schrd4pzgq] { background: var(--tt-status-warn); color: var(--tt-status-warn-on); }

/* On an ok fill the label is --tt-status-ok-on, never white: white measures 3.30:1 on
   --tt-status-ok and these labels are 10px uppercase. The fill is deliberately unchanged -
   the severity ramp is a colorblind-safe lightness order, so darkening the green to fix its
   foreground would break the ordering the whole status system depends on. crit is white at
   5.7:1 and needs nothing. */
.pill--ok[b-schrd4pzgq]   { background: var(--tt-status-ok);   color: var(--tt-status-ok-on); }
.pill--warn[b-schrd4pzgq] { background: var(--tt-status-warn); color: var(--tt-status-warn-on); }
.pill--crit[b-schrd4pzgq] { background: var(--tt-status-crit); color: #fff; }

/* Neutral weight steps, for sets of CATEGORY labels where colour would be misread as status.
   Greyscale only. 6 is full ink - the most definite step, for a set that states what is present
   rather than how it went. (The design system's own Pill stops at 5; step 6 is ours.) */
.pill--tone1[b-schrd4pzgq] { background: var(--tt-surface-1); color: var(--tt-ink-4); }
.pill--tone2[b-schrd4pzgq] { background: var(--tt-surface-2); color: var(--tt-ink-4); }
.pill--tone3[b-schrd4pzgq] { background: var(--tt-surface-2); color: var(--tt-ink-3); }
.pill--tone4[b-schrd4pzgq] { background: var(--tt-line-soft); color: var(--tt-ink-2); }
.pill--tone5[b-schrd4pzgq] { background: var(--tt-ink-3);     color: var(--tt-surface-0); }
.pill--tone6[b-schrd4pzgq] { background: var(--tt-ink-1);     color: var(--tt-surface-0); }
/* /Components/PrepareWizard.razor.rz.scp.css */
/* ============================================================
 * First-run wizard — Prepare (#210)
 * Ported from the design-system template "First-run wizard — Prepare".
 * The design's literal rgba()s are expressed here via color-mix on the
 * matching token: rgba(213,0,28)=--tt-cta, rgba(255,122,0)=--tt-brand-amber,
 * rgba(5,39,103)=--tt-brand-navy, rgba(22,163,74)=--tt-status-ok.
 * Responsive shell: navy header + dots <760px, navy step rail >=760px.
 * ============================================================ */

.pw[b-ulvzi2mcqd] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(10px, 3vw, 44px);
    font-family: 'Inter', var(--tt-font-sans);
}

.pw__backdrop[b-ulvzi2mcqd] {
    position: absolute;
    inset: 0;
    background: rgba(var(--tt-shadow-rgb), 0.55);
    z-index: 1;
}

/* ── Sheet ────────────────────────────────────────────────── */
.pw__sheet[b-ulvzi2mcqd] {
    position: relative;
    z-index: 4;
    width: min(100%, 440px);
    height: min(760px, 96vh);   /* fixed: the sheet must not resize between steps */
    border-radius: var(--tt-radius-16);
    background: var(--tt-surface-0);
    box-shadow: var(--tt-shadow-modal);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pw__col[b-ulvzi2mcqd] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.pw__body[b-ulvzi2mcqd] {
    flex: 1;
    padding: var(--tt-s-6) var(--tt-s-20) var(--tt-s-20);
    overflow-y: auto;
}

.pw__spacer[b-ulvzi2mcqd] { flex: 1; }

/* ── Narrow: navy header ──────────────────────────────────── */
.pw__header[b-ulvzi2mcqd] {
    background: var(--tt-brand-navy);
    padding: var(--tt-s-14) var(--tt-s-18) var(--tt-s-12);
    flex: none;
}

.pw__header-row[b-ulvzi2mcqd] { display: flex; align-items: center; color: #fff; }

.pw__wordmark[b-ulvzi2mcqd] {
    display: inline-flex;
    align-items: center;
    color: #fff;
}

/* The lockup is one SVG (viewBox 673x185) — size it by height, width follows. */
.pw__wm[b-ulvzi2mcqd] { height: 20px; width: auto; display: block; }

.pw__stepcount[b-ulvzi2mcqd] {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: var(--tt-weight-medium);
    margin-right: var(--tt-s-12);
    font-variant-numeric: tabular-nums;
}

.pw__close[b-ulvzi2mcqd] {
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: -4px;
}

/* Dot progress (narrow) */
.pw__dots[b-ulvzi2mcqd] { display: flex; align-items: center; margin-top: 13px; }

.pw__conn[b-ulvzi2mcqd] {
    flex: 1;
    height: 2px;
    min-width: 6px;
    background: rgba(255, 255, 255, 0.25);
}

.pw__conn.is-done[b-ulvzi2mcqd] { background: #fff; }

.pw__dot[b-ulvzi2mcqd] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.35);
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
}

.pw__dot.is-done[b-ulvzi2mcqd],
.pw__dot.is-active[b-ulvzi2mcqd] {
    border-color: #fff;
    background: #fff;
    color: var(--tt-brand-navy);
}

.pw__dot.is-active[b-ulvzi2mcqd] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tt-brand-amber) 50%, transparent); }

/* ── Wide: navy rail (>=760px) ────────────────────────────── */
.pw__rail[b-ulvzi2mcqd] { display: none; }
.pw__topbar[b-ulvzi2mcqd] { display: none; }

@media (min-width: 760px) {
    .pw__sheet[b-ulvzi2mcqd] {
        width: min(100%, 860px);
        height: min(600px, 94vh);   /* fixed: see above */
        flex-direction: row;
    }

    .pw__header[b-ulvzi2mcqd] { display: none; }

    .pw__rail[b-ulvzi2mcqd] {
        display: flex;
        flex-direction: column;
        flex: 0 0 230px;
        align-self: stretch;
        background: var(--tt-brand-navy);
        color: #fff;
        padding: var(--tt-s-24);
    }

    .pw__topbar[b-ulvzi2mcqd] {
        display: flex;
        align-items: center;
        flex: none;
        padding: var(--tt-s-14) var(--tt-s-18) var(--tt-s-6);
    }
}

.pw__wordmark--rail[b-ulvzi2mcqd] { margin-bottom: 28px; }
.pw__wordmark--rail .pw__wm[b-ulvzi2mcqd] { height: 24px; }

.pw__railstep[b-ulvzi2mcqd] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-12);
    margin-bottom: var(--tt-s-18);
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    padding: 0;
}

.pw__railstep-label[b-ulvzi2mcqd] {
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.62);
    font-weight: var(--tt-weight-medium);
}

.pw__railstep-label.is-active[b-ulvzi2mcqd] { color: #fff; font-weight: var(--tt-weight-semibold); }

.pw__rail-foot[b-ulvzi2mcqd] {
    margin-top: auto;
    padding-top: var(--tt-s-16);
    font-size: var(--tt-text-xs);
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
    text-wrap: pretty;
}

.pw__stepcount--wide[b-ulvzi2mcqd] { color: var(--tt-ink-4); margin-right: var(--tt-s-10); }

.pw__close--wide[b-ulvzi2mcqd] {
    width: 30px;
    height: 30px;
    color: var(--tt-ink-4);
    border-radius: var(--tt-radius-8);
    margin-right: -6px;
}

/* ── Panes / shared type ──────────────────────────────────── */
.pw__pane[b-ulvzi2mcqd] { padding: var(--tt-s-8) 0 0; }
/* Welcome carries more than any other step (hero, lede, four promise rows). It starts high and
   runs a tighter vertical rhythm than the other panes so it fits the fixed-height sheet without
   scrolling - the overrides below are scoped to this pane only. */
.pw__pane--welcome[b-ulvzi2mcqd] { padding: var(--tt-s-2) var(--tt-s-2) var(--tt-s-4); }

.pw__pane--welcome .pw__hero-icon[b-ulvzi2mcqd] { margin-bottom: var(--tt-s-8); }
.pw__pane--welcome .pw__h1[b-ulvzi2mcqd]        { margin-bottom: var(--tt-s-8); }
.pw__pane--welcome .pw__lede[b-ulvzi2mcqd]      { margin-bottom: var(--tt-s-12); }
.pw__pane--welcome .pw__promise-row[b-ulvzi2mcqd] { padding: var(--tt-s-10) 0; }
.pw__pane--done[b-ulvzi2mcqd] { padding: var(--tt-s-16) var(--tt-s-2) var(--tt-s-4); text-align: center; }

.pw__hero-icon[b-ulvzi2mcqd] {
    width: 46px;
    height: 46px;
    border-radius: var(--tt-radius-12);
    background: color-mix(in srgb, var(--tt-brand-amber) 12%, transparent);
    color: var(--tt-brand-amber);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--tt-s-16);
}

.pw__eyebrow[b-ulvzi2mcqd] {
    font-size: 11px;
    font-weight: var(--tt-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tt-brand-amber);
    margin-bottom: var(--tt-s-8);
}

.pw__eyebrow--step[b-ulvzi2mcqd] { letter-spacing: 0.06em; margin-bottom: 5px; }

.pw__h1[b-ulvzi2mcqd] {
    font-size: clamp(26px, 7vw, 32px);
    font-weight: var(--tt-weight-light);
    line-height: 1.14;
    letter-spacing: -0.015em;
    color: var(--tt-ink-1);
    margin: 0 0 var(--tt-s-12);
}

.pw__h1--done[b-ulvzi2mcqd] { font-size: clamp(24px, 6.5vw, 30px); line-height: 1.15; margin-bottom: var(--tt-s-10); }

.pw__h2[b-ulvzi2mcqd] {
    font-size: var(--tt-text-lg);
    font-weight: var(--tt-weight-light);
    color: var(--tt-ink-1);
    margin: 0 0 var(--tt-s-4);
    letter-spacing: -0.01em;
}

.pw__lede[b-ulvzi2mcqd] {
    font-size: 15px;
    color: var(--tt-ink-3);
    line-height: 1.55;
    margin: 0 0 var(--tt-s-22);
    text-wrap: pretty;
}

.pw__lede--done[b-ulvzi2mcqd] { font-size: 14.5px; }

.pw__sub[b-ulvzi2mcqd] {
    font-size: 13.5px;
    color: var(--tt-ink-3);
    margin: 0 0 var(--tt-s-18);
    line-height: var(--tt-leading-normal);
}

.pw__sub strong[b-ulvzi2mcqd] { color: var(--tt-ink-2); font-weight: var(--tt-weight-semibold); }

/* ── Welcome promise rows ─────────────────────────────────── */
.pw__promise[b-ulvzi2mcqd] { display: flex; flex-direction: column; gap: var(--tt-s-2); }

.pw__promise-row[b-ulvzi2mcqd] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-14);
    padding: 13px 0;
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
}

.pw__promise-row--last[b-ulvzi2mcqd] { border-bottom: var(--tt-border-w) solid var(--tt-line-soft); }

.pw__promise-icon[b-ulvzi2mcqd] {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: var(--tt-surface-1);
    color: var(--tt-ink-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.pw__promise-text[b-ulvzi2mcqd] { flex: 1; }
.pw__promise-title[b-ulvzi2mcqd] { display: block; font-size: 15px; font-weight: var(--tt-weight-semibold); color: var(--tt-ink-1); }
.pw__promise-sub[b-ulvzi2mcqd] { display: block; font-size: var(--tt-text-sm); color: var(--tt-ink-4); }

/* ── Fields ───────────────────────────────────────────────── */
/* ── Car photo panel ────────────────────────────────────────────────────────
   Matches the Card component's photo frame (Card.razor.css .tt-card-img): the same
   240×180 box, surface-1 fill and radius, so a car looks identical here and in the
   garage. Dashed edge while empty to read as a drop target. */
.pw__photo-wrap[b-ulvzi2mcqd] { margin-bottom: var(--tt-s-18); }

.pw__photo[b-ulvzi2mcqd] {
    position: relative;
    width: 240px;
    height: 180px;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--tt-surface-1);
    border: 1.5px dashed var(--tt-line);
    border-radius: var(--tt-radius-12);
    color: var(--tt-ink-4);
}

/* A real photo fills the frame — swap the dashed hint for the Card's solid edge. */
.pw__photo:has(.pw__photo-img)[b-ulvzi2mcqd] {
    border: var(--tt-border-w) solid var(--tt-line-soft);
}

.pw__photo.is-drag[b-ulvzi2mcqd] {
    border-color: var(--tt-cta);
    background: var(--tt-surface-2);
}

.pw__photo-img[b-ulvzi2mcqd] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pw__photo-content[b-ulvzi2mcqd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--tt-s-6);
    padding: 0 var(--tt-s-12);
    text-align: center;
    pointer-events: none;
}

.pw__photo-cta[b-ulvzi2mcqd] { font-size: 12.5px; font-weight: var(--tt-weight-semibold); color: inherit; }

.pw__photo-spec[b-ulvzi2mcqd] { font-size: 10px; color: var(--tt-ink-4); }

.pw__photo-opt[b-ulvzi2mcqd] { font-size: 10px; font-style: italic; color: var(--tt-ink-4); }

.pw__photo-uploading[b-ulvzi2mcqd] { font-size: 12.5px; font-weight: var(--tt-weight-medium); }

/* Decorative badge — clicks fall through to the file input beneath it. */
.pw__photo-edit[b-ulvzi2mcqd] {
    position: absolute;
    top: var(--tt-s-10); right: var(--tt-s-10);
    display: inline-flex;
    align-items: center;
    gap: var(--tt-s-4);
    padding: 5px var(--tt-s-10);
    background: color-mix(in srgb, #000 65%, transparent);
    color: #fff;
    font-size: 10.5px;
    font-weight: var(--tt-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    z-index: 4;
    pointer-events: none;
}

/* ::deep is required — InputFile renders its <input> outside the scoped attribute boundary. */
[b-ulvzi2mcqd] .pw__photo-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 3;
}

.pw__photo-error[b-ulvzi2mcqd] {
    margin: var(--tt-s-6) 0 0;
    font-size: 11px;
    color: var(--tt-cta);
}

.pw__field[b-ulvzi2mcqd] { margin-bottom: var(--tt-s-14); }

.pw__label[b-ulvzi2mcqd] {
    display: block;
    font-size: 11px;
    font-weight: var(--tt-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tt-ink-4);
    margin-bottom: var(--tt-s-6);
}

/* "(optional)" qualifier on a field label - de-emphasised against the uppercase label. */
.pw__label-opt[b-ulvzi2mcqd] {
    font-weight: var(--tt-weight-regular);
    text-transform: none;
    letter-spacing: 0;
    font-style: italic;
}

.pw__input[b-ulvzi2mcqd] {
    width: 100%;
    height: 46px;
    padding: 0 var(--tt-s-14);
    border: var(--tt-border-w) solid var(--tt-line);
    border-radius: var(--tt-radius-8);
    font-size: 15px;
    color: var(--tt-ink-1);
    background: var(--tt-surface-0);
    outline: none;
}

.pw__input:focus[b-ulvzi2mcqd] {
    border-color: var(--tt-primary);
    box-shadow: var(--tt-shadow-focus);
}

/* Failed a type check - the CTA color carries the error, matching the upload error above. */
.pw__input.is-invalid[b-ulvzi2mcqd],
.pw__input.is-invalid:focus[b-ulvzi2mcqd] {
    border-color: var(--tt-cta);
    box-shadow: 0 0 0 3px rgba(var(--tt-cta-rgb), 0.12);
}

.pw__err[b-ulvzi2mcqd] {
    display: block;
    margin-top: var(--tt-s-6);
    font-size: 11px;
    color: var(--tt-cta);
}

.pw__grid[b-ulvzi2mcqd] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: var(--tt-s-12);
}

.pw__grid--track[b-ulvzi2mcqd] { margin-bottom: var(--tt-s-16); }

/* ── Track toggles ────────────────────────────────────────── */
.pw__toggles[b-ulvzi2mcqd] {
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: 10px; /* off-scale: design uses 10px; radius scale has no 10 */
    overflow: hidden;
}

.pw__toggle-row[b-ulvzi2mcqd] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--tt-s-12);
    padding: 13px var(--tt-s-14);
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
}

.pw__toggle-row--first[b-ulvzi2mcqd] { border-bottom: var(--tt-border-w) solid var(--tt-line-soft); }

.pw__toggle-text[b-ulvzi2mcqd] { flex: 1; }
.pw__toggle-title[b-ulvzi2mcqd] { display: block; font-size: var(--tt-text-sm); font-weight: var(--tt-weight-medium); color: var(--tt-ink-1); }
.pw__toggle-sub[b-ulvzi2mcqd] { display: block; font-size: var(--tt-text-xs); color: var(--tt-ink-4); }

.pw__switch[b-ulvzi2mcqd] {
    width: 44px;
    height: 26px;
    border-radius: var(--tt-radius-pill);
    background: var(--tt-line);
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 3px;
    flex: none;
}

.pw__switch.is-on[b-ulvzi2mcqd] { background: var(--tt-brand-navy); justify-content: flex-end; }

.pw__switch-knob[b-ulvzi2mcqd] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--tt-shadow-xs);
}

/* ── Service plan ─────────────────────────────────────────── */
.pw__counter[b-ulvzi2mcqd] { display: flex; align-items: center; gap: var(--tt-s-8); margin-bottom: var(--tt-s-6); }
.pw__counter-text[b-ulvzi2mcqd] { font-size: var(--tt-text-xs); font-weight: var(--tt-weight-semibold); color: var(--tt-ink-2); }
.pw__counter-num[b-ulvzi2mcqd] { color: var(--tt-brand-navy); }

.pw__group[b-ulvzi2mcqd] { margin-top: var(--tt-s-14); }

.pw__group-label[b-ulvzi2mcqd] {
    font-size: 10.5px;
    font-weight: var(--tt-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--tt-ink-4);
    margin-bottom: var(--tt-s-2);
}

.pw__type[b-ulvzi2mcqd] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-12);
    padding: var(--tt-s-12) 0;
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
}

.pw__check[b-ulvzi2mcqd] {
    width: 23px;
    height: 23px;
    flex: none;
    cursor: pointer;
    margin: 0;
    accent-color: var(--tt-brand-navy);
}

.pw__type-main[b-ulvzi2mcqd] { flex: 1; min-width: 0; }

.pw__type-name[b-ulvzi2mcqd] { display: block; font-size: var(--tt-text-sm); font-weight: var(--tt-weight-medium); color: var(--tt-ink-1); }
.pw__type-name.is-off[b-ulvzi2mcqd] { color: var(--tt-ink-4); }

.pw__type-pill[b-ulvzi2mcqd] { display: inline-flex; margin-top: 3px; }

/* Pill — read-only status label. Mirrors the design system's Pill component;
   see the note in the PR: the app's equivalent (Badge) only exists on release/2.0. */
.pw__pill[b-ulvzi2mcqd] {
    display: inline-flex;
    align-items: center;
    gap: var(--tt-s-4);
    height: 22px;
    padding: 0 var(--tt-s-8);
    border: var(--tt-border-w) solid transparent;
    border-radius: var(--tt-radius-4);
    font-size: 10px;
    font-weight: var(--tt-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
}

.pw__pill--ok[b-ulvzi2mcqd] { background: var(--tt-status-ok); color: #fff; }
.pw__pill--neutral[b-ulvzi2mcqd] { background: var(--tt-surface-2); color: var(--tt-ink-2); border-color: var(--tt-line-soft); }

.pw__stepper[b-ulvzi2mcqd] { display: inline-flex; align-items: center; gap: var(--tt-s-4); flex: none; }

.pw__step-btn[b-ulvzi2mcqd] {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: var(--tt-border-w) solid var(--tt-line);
    background: var(--tt-surface-0);
    color: var(--tt-ink-2);
    cursor: pointer;
    font-size: var(--tt-text-base);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pw__step-val[b-ulvzi2mcqd] {
    min-width: 20px;
    text-align: center;
    font-size: var(--tt-text-sm);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-1);
    font-variant-numeric: tabular-nums;
}

.pw__unit-btn[b-ulvzi2mcqd] {
    height: 28px;
    padding: 0 9px;
    border-radius: 7px;
    border: var(--tt-border-w) solid var(--tt-line);
    background: var(--tt-surface-1);
    color: var(--tt-ink-3);
    cursor: pointer;
    font-size: 11.5px;
    font-weight: var(--tt-weight-semibold);
    white-space: nowrap;
    min-width: 58px;
}

/* ── Stock the shelf ──────────────────────────────────────── */
.pw__stock[b-ulvzi2mcqd] { display: flex; flex-direction: column; gap: 9px; }

.pw__stock-row[b-ulvzi2mcqd] {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px var(--tt-s-14);
    border-radius: 10px; /* off-scale: design uses 10px; radius scale has no 10 */
    cursor: pointer;
    text-align: left;
    width: 100%;
    border: 1.5px solid var(--tt-line);
    background: var(--tt-surface-0);
}

.pw__stock-row.is-added[b-ulvzi2mcqd] {
    border-color: var(--tt-brand-navy);
    background: color-mix(in srgb, var(--tt-brand-navy) 5%, transparent);
}

.pw__stock-check[b-ulvzi2mcqd] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--tt-line);
    background: var(--tt-surface-0);
}

.pw__stock-check.is-added[b-ulvzi2mcqd] {
    border-color: var(--tt-brand-navy);
    background: var(--tt-brand-navy);
    color: #fff;
}

.pw__stock-main[b-ulvzi2mcqd] { flex: 1; }
.pw__stock-name[b-ulvzi2mcqd] { display: block; font-size: var(--tt-text-sm); font-weight: var(--tt-weight-semibold); color: var(--tt-ink-1); }
.pw__stock-sub[b-ulvzi2mcqd] { display: block; font-size: var(--tt-text-xs); color: var(--tt-ink-4); }

.pw__empty[b-ulvzi2mcqd] {
    text-align: center;
    padding: var(--tt-s-32) var(--tt-s-16);
    color: var(--tt-ink-4);
    font-size: 13.5px;
    border: var(--tt-border-w) dashed var(--tt-line);
    border-radius: var(--tt-radius-12);
}

/* ── Done ─────────────────────────────────────────────────── */
.pw__done-check[b-ulvzi2mcqd] {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--tt-status-ok);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--tt-s-16);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--tt-status-ok) 35%, transparent);
}

/* Wraps the design-system StatStrip. The strip itself is styled by StatStrip.razor.css —
   only the frame it sits in belongs here. */
.pw__tilerow-wrap[b-ulvzi2mcqd] {
    text-align: left;
    margin-bottom: var(--tt-s-18);
    border: var(--tt-border-w) solid var(--tt-line-soft);
}

/* Five tiles in a 440px sheet: trim the strip's 16px side padding so the labels don't clip,
   and drop its page-level bottom margin (this wrap supplies the spacing). */
.pw__tilerow-wrap[b-ulvzi2mcqd]  .tt-stat-strip { margin-bottom: 0; border-bottom: none; }
.pw__tilerow-wrap[b-ulvzi2mcqd]  .tt-stat { padding: var(--tt-s-12) var(--tt-s-8); }

.pw__next[b-ulvzi2mcqd] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    text-align: left;
    background: var(--tt-surface-1);
    border-radius: 10px; /* off-scale: design uses 10px; radius scale has no 10 */
    padding: 13px var(--tt-s-16);
}

.pw__next-icon[b-ulvzi2mcqd] { color: var(--tt-brand-amber); flex: none; margin-top: 1px; }
.pw__next-text[b-ulvzi2mcqd] { font-size: var(--tt-text-sm); color: var(--tt-ink-3); line-height: var(--tt-leading-normal); }
.pw__next-text strong[b-ulvzi2mcqd] { color: var(--tt-ink-1); font-weight: var(--tt-weight-semibold); }

/* Blocked-save notice / save failure. Occupies the same slot as .pw__next, so the pane's height
   does not shift between the three states. Warn tint for "you still owe us data" (recoverable);
   crit for a failed save. */
.pw__alert[b-ulvzi2mcqd] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    text-align: left;
    background: var(--tt-status-warn-surface);
    border: var(--tt-border-w) solid var(--tt-status-warn-border);
    border-radius: 10px; /* off-scale: matches .pw__next */
    padding: 13px var(--tt-s-16);
}

.pw__alert-icon[b-ulvzi2mcqd] { color: var(--tt-status-warn-text); flex: none; margin-top: 1px; }

.pw__alert-text[b-ulvzi2mcqd] {
    font-size: var(--tt-text-sm);
    color: var(--tt-status-warn-text);
    line-height: var(--tt-leading-normal);
}

.pw__alert-text strong[b-ulvzi2mcqd] { font-weight: var(--tt-weight-semibold); }

.pw__alert-sub[b-ulvzi2mcqd] {
    display: block;
    margin-top: var(--tt-s-4);
    font-size: var(--tt-text-xs);
}

.pw__alert--error[b-ulvzi2mcqd] {
    background: var(--tt-status-crit-surface);
    border-color: var(--tt-status-crit);
}

.pw__alert--error .pw__alert-icon[b-ulvzi2mcqd],
.pw__alert--error .pw__alert-text[b-ulvzi2mcqd] { color: var(--tt-status-crit); }

/* ── Footer ───────────────────────────────────────────────── */
.pw__footer[b-ulvzi2mcqd] {
    flex: none;
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
    padding: var(--tt-s-12) var(--tt-s-18);
    background: var(--tt-surface-0);
}

.pw__footer-row[b-ulvzi2mcqd] { display: flex; align-items: center; gap: var(--tt-s-10); }

/* Full-width CTA — the paused card's "Resume setup" is a block button. */
.pw__muted-btn[b-ulvzi2mcqd] {
    border: none;
    background: none;
    color: var(--tt-ink-4);
    font-size: var(--tt-text-sm);
    font-weight: var(--tt-weight-medium);
    cursor: pointer;
    padding: var(--tt-s-6);
    text-align: center;
}

.pw__skip-btn[b-ulvzi2mcqd] {
    border: none;
    background: none;
    color: var(--tt-ink-4);
    font-size: var(--tt-text-sm);
    font-weight: var(--tt-weight-semibold);
    cursor: pointer;
    padding: var(--tt-s-8) var(--tt-s-6);
    white-space: nowrap;
}

.pw__link-btn[b-ulvzi2mcqd] {
    border: none;
    background: none;
    color: var(--tt-link);
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    cursor: pointer;
    padding: var(--tt-s-4) var(--tt-s-2);
}
/* /Components/SegmentedButton.razor.rz.scp.css */
.seg-btn[b-ym01uslwdz] {
    display: inline-flex;
    background: var(--tt-surface-1);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    padding: 3px;
    gap: var(--tt-s-2);
}

.seg-btn__tab[b-ym01uslwdz] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-6);
    padding: var(--tt-s-8) var(--tt-s-16);
    font-size: var(--tt-text-sm);
    font-weight: var(--tt-weight-medium);
    font-family: inherit;
    border: none;
    background: transparent;
    color: var(--tt-ink-3);
    cursor: pointer;
    transition: background 120ms, color 120ms;
    white-space: nowrap;
}

.seg-btn__icon[b-ym01uslwdz] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.seg-btn__tab:hover[b-ym01uslwdz] { color: var(--tt-ink-1); }

.seg-btn__tab.is-active[b-ym01uslwdz] {
    background: var(--tt-ink-1);
    color: var(--tt-surface-0);
    box-shadow: var(--tt-shadow-xs);
}

/* ── Size modifiers ────────────────────────────────────────── */

.seg-btn--sm .seg-btn__tab[b-ym01uslwdz] {
    padding: var(--tt-s-4) var(--tt-s-10);
    font-size: 12px;
}

.seg-btn--lg .seg-btn__tab[b-ym01uslwdz] {
    padding: var(--tt-s-12) var(--tt-s-20);
    font-size: var(--tt-text-base);
}
/* /Components/SessionCaptureDrawer.razor.rz.scp.css */
/* Capture drawer (#349). Ported from the design prototype, whose values were inline — every one
   of them is a --tt-* token here. Dense on purpose: this is read one-handed with gloves on, so
   nothing is spaced for browsing. */

/* The drawer body is a bare scroll container by design — every caller supplies its own inset.
   Matches .drawer__head's padding so the content lines up with the title above it. */
.cap[b-f0ugkksnxs] {
    display: flex;
    flex-direction: column;
    gap: var(--tt-s-20);
    padding: var(--tt-s-12) var(--tt-s-16) var(--tt-s-20);
}

.cap__block[b-f0ugkksnxs],
.cap__panel[b-f0ugkksnxs] {
    display: flex;
    flex-direction: column;
}

/* Blocks are separated by a rule rather than boxed — the drawer is one task, not four panels. */
.cap__block + .cap__block[b-f0ugkksnxs],
.cap__block + .cap__panel[b-f0ugkksnxs],
.cap__panel + .cap__block[b-f0ugkksnxs] {
    padding-top: var(--tt-s-20);
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
}

.cap__lbl[b-f0ugkksnxs] {
    margin: 0 0 var(--tt-s-6);
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    letter-spacing: var(--tt-tracking-wide);
    text-transform: uppercase;
    color: var(--tt-ink-4);
}

.cap__lbl--spaced[b-f0ugkksnxs] { margin-top: var(--tt-s-14); }

/* The qualifier after a label is not part of the label — it is a sentence, so it drops the caps. */
.cap__lbl-sub[b-f0ugkksnxs] {
    font-weight: var(--tt-weight-regular);
    text-transform: none;
    letter-spacing: 0;
}

.cap__note[b-f0ugkksnxs] {
    margin: var(--tt-s-6) 0 0;
    font-size: var(--tt-text-xs);
    line-height: 1.45;
    color: var(--tt-ink-4);
    text-wrap: pretty;
}

.cap__note--flex[b-f0ugkksnxs] { flex: 1; margin: 0; }

.cap__note--inset[b-f0ugkksnxs] {
    margin: 0 0 var(--tt-s-8);
    padding: var(--tt-s-10) var(--tt-s-12);
    background: var(--tt-surface-1);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-4);
}

/* ── Lap field label ────────────────────────────────────────────────────────────────────────
   All that survives of the four-across lap grid (#403). The grid itself is gone — the drawer now
   hosts SessionLapMarks, the same editor the Events grid uses, because a row of bare time fields
   cannot say which lap was the out lap or that an end ran without a time, and so could never reach
   a complete record. This label is still worn by the properties rows below. */
.cap__lap-lbl[b-f0ugkksnxs] {
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    letter-spacing: var(--tt-tracking-wide);
    text-transform: uppercase;
    color: var(--tt-ink-4);
    text-align: center;
}

/* ── Laps completed ─────────────────────────────────────────────────────────────────────── */
.cap__panel[b-f0ugkksnxs] {
    padding: var(--tt-s-12);
    background: var(--tt-surface-0);
    border: var(--tt-border-w) solid var(--tt-line);
    border-radius: var(--tt-radius-4);
}

.cap__row[b-f0ugkksnxs] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-10);
}

.cap__row--tight[b-f0ugkksnxs] { margin-top: var(--tt-s-8); align-items: flex-start; }

.cap__row--divided[b-f0ugkksnxs] {
    margin-top: var(--tt-s-12);
    padding-top: var(--tt-s-12);
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
}

.cap__row-lbl[b-f0ugkksnxs] {
    flex: 1;
    min-width: 0;
    font-size: var(--tt-text-sm);
    font-weight: var(--tt-weight-medium);
    color: var(--tt-ink-2);
}

.cap__stepper[b-f0ugkksnxs] {
    display: flex;
    align-items: stretch;
    flex: none;
    height: 32px;
    border: var(--tt-border-w) solid var(--tt-line);
    border-radius: var(--tt-radius-4);
    overflow: hidden;
}

/* Warn ink, not destructive: the value is missing, not wrong. It is the same border the note
   under it explains, so the driver is told once and shown once. */
.cap__stepper.is-missing[b-f0ugkksnxs] { border-color: var(--tt-status-warn); }

/* A field the save is waiting on. Warn rather than danger: nothing is wrong with what the driver
   typed, there is simply not enough of it yet — and this drawer is read in a hurry, so the field
   itself has to carry the message as well as the line above the footer. */
.cap__text.is-missing[b-f0ugkksnxs] { border-color: var(--tt-status-warn); }

.cap__stepper button[b-f0ugkksnxs] {
    flex: none;
    width: 26px;
    padding: 0;
    border: none;
    background: none;
    color: var(--tt-ink-3);
    font: inherit;
    cursor: pointer;
}

.cap__stepper button:first-child[b-f0ugkksnxs] { border-right: var(--tt-border-w) solid var(--tt-line-soft); }
.cap__stepper button:last-child[b-f0ugkksnxs] { border-left: var(--tt-border-w) solid var(--tt-line-soft); }
.cap__stepper button:hover[b-f0ugkksnxs] { color: var(--tt-ink-1); background: var(--tt-surface-1); }

.cap__stepper input[b-f0ugkksnxs] {
    width: 52px;
    flex: none;
    padding: 0 var(--tt-s-4);
    border: none;
    background: none;
    text-align: center;
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-1);
    font-variant-numeric: tabular-nums;
    outline: none;
}

/* ── Text inputs, the goal and the debrief ──────────────────────────────────────────────── */
.cap__text[b-f0ugkksnxs] {
    width: 100%;
    height: 32px;
    padding: 0 var(--tt-s-10);
    border: var(--tt-border-w) solid var(--tt-line);
    border-radius: var(--tt-radius-4);
    background: var(--tt-surface-0);
    font-family: inherit;
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-1);
    box-sizing: border-box;
}

.cap__goal[b-f0ugkksnxs] {
    margin: 0 0 var(--tt-s-8);
    font-size: var(--tt-text-sm);
    line-height: 1.45;
    color: var(--tt-ink-2);
    text-wrap: pretty;
}

.cap__debrief[b-f0ugkksnxs] {
    width: 100%;
    margin-top: var(--tt-s-4);
    padding: var(--tt-s-10) var(--tt-s-12);
    border: var(--tt-border-w) solid var(--tt-line);
    border-radius: var(--tt-radius-4);
    background: var(--tt-surface-0);
    font-family: inherit;
    font-size: var(--tt-text-sm);
    line-height: 1.5;
    color: var(--tt-ink-1);
    resize: vertical;
    box-sizing: border-box;
}

/* Claim chips (#350). Wrapping, because a long stint has a lot of laps and a row that scrolls
   sideways hides the ones at the end. */
.cap__claims[b-f0ugkksnxs] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tt-s-6);
    margin-top: var(--tt-s-6);
}

.cap__props[b-f0ugkksnxs] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--tt-s-8);
}

.cap__prop[b-f0ugkksnxs] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--tt-s-4);
}

.cap__prop .cap__lap-lbl[b-f0ugkksnxs] { text-align: left; }

/* ── Why the save is blocked ────────────────────────────────────────────────────────────────
   Stated above the footer rather than left to a disabled button to explain itself. */
.cap__blocked[b-f0ugkksnxs] {
    margin: 0;
    padding: var(--tt-s-10) var(--tt-s-12);
    border: var(--tt-border-w) solid var(--tt-status-warn);
    border-radius: var(--tt-radius-4);
    background: var(--tt-surface-0);
    font-size: var(--tt-text-sm);
    line-height: 1.5;
    color: var(--tt-ink-3);
    text-wrap: pretty;
}

/* The quiet lock. Not a warning — nothing is wrong, this tier simply does not include capture. */
.cap__blocked--locked[b-f0ugkksnxs] {
    border-color: var(--tt-line);
    background: var(--tt-surface-1);
}

.cap__blocked--locked a[b-f0ugkksnxs] {
    color: var(--tt-cta);
    text-decoration: none;
    white-space: nowrap;
}

.cap__blocked--locked a:hover[b-f0ugkksnxs] { text-decoration: underline; }

/* The actions live in the drawer's own pinned footer, so this only spaces them apart. */
.cap__foot-gap[b-f0ugkksnxs] { flex: 1; }

.cap__btn[b-f0ugkksnxs] {
    flex: none;
    padding: var(--tt-s-6) var(--tt-s-14);
    font-size: var(--tt-text-xs);
}

@media (max-width: 800px) {
    .cap__props[b-f0ugkksnxs] { grid-template-columns: 1fr; }
}

/* ── Laps completed, now inside the lap block (#403) ─────────────────────────────────────────
   It sits with the laps because the editor above quotes it in every sentence it writes — "a
   sample: 3 of 6 laps" — and the driver was being sent to a different box to change the 6. */
.cap__row--laps[b-f0ugkksnxs] {
    margin-top: var(--tt-s-10);
    padding: var(--tt-s-8) var(--tt-s-12);
    background: var(--tt-surface-1);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-4);
}

/* The one note in this drawer whose subject can reach the car: brake, tire and fluid life are all
   counted from the field above it. Ink-3 rather than the ink-4 every other note uses, so it does
   not read as the same class of aside. */
.cap__note--weight[b-f0ugkksnxs] {
    color: var(--tt-ink-3);
}

/* Video takes the full width — a URL in a half-width field shows almost none of itself. */
.cap__prop--wide[b-f0ugkksnxs] { grid-column: 1 / -1; }

/* ── The VBO file panel (#384) ───────────────────────────────────────────────────────────────
   Ported from the prototype: a bordered, centred well holding one sentence and one button.
   It stands where the lap editor stands, because in this method there is nothing to edit
   yet — the moment there is, the drawer switches to the editor and this is gone. */
.cap__file[b-f0ugkksnxs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--tt-s-10);
    margin-top: var(--tt-s-8);
    padding: var(--tt-s-18);
    border: var(--tt-border-w) solid var(--tt-line);
    background: var(--tt-surface-0);
}

.cap__file-note[b-f0ugkksnxs] {
    margin: 0;
    font-size: var(--tt-text-xs);
    line-height: 1.45;
    color: var(--tt-ink-4);
    text-align: center;
    text-wrap: pretty;
}

/* A label rather than a button, because the click has to reach a real <input type="file"> — the
   input itself is hidden inside it and never rendered to the driver. */
.cap__file-pick[b-f0ugkksnxs] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 25px;
    padding: 4px var(--tt-s-12);
    border: var(--tt-border-w) solid var(--tt-line);
    border-radius: var(--tt-radius-8);
    background: var(--tt-surface-0);
    color: var(--tt-ink-1);
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-medium);
    cursor: pointer;
}

.cap__file-pick:hover[b-f0ugkksnxs] { background: var(--tt-surface-1); }

.cap__file-pick.is-busy[b-f0ugkksnxs] { opacity: 0.55; cursor: default; }

/* ::deep — InputFile renders its own <input>, and a child component's element is not stamped with
   this sheet's scope. SessionRow.razor.css carries the same note; it is an easy hour to lose. */
.cap__file-pick[b-f0ugkksnxs]  input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.cap__file-error[b-f0ugkksnxs] {
    margin: 0;
    font-size: var(--tt-text-xs);
    line-height: 1.45;
    color: var(--tt-status-crit);
    text-align: center;
    text-wrap: pretty;
}
/* /Components/SessionConsumablesModal.razor.rz.scp.css */
/* Scrollable, stacked checklist for the per-session consumables corrector. */
.sc-list[b-9rahar7gsf] {
    display: flex;
    flex-direction: column;
    gap: var(--tt-s-2);
    max-height: 320px;
    overflow-y: auto;
    padding-right: var(--tt-s-4);
}

.sc-item[b-9rahar7gsf] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-8);
    padding: var(--tt-s-4) var(--tt-s-2);
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-2);
    border-radius: var(--tt-radius-4);
    cursor: pointer;
}

.sc-item:hover[b-9rahar7gsf] {
    background: var(--tt-surface-2);
}

.sc-item input[b-9rahar7gsf] {
    flex-shrink: 0;
}

.sc-item__label[b-9rahar7gsf] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/SessionLapMarks.razor.rz.scp.css */
/* SessionLapMarks - a session's laps and which of them counted. Dense by intention: it sits
   under a session row on Events and inside the capture rail on Trackside, and in both places it
   is a thing you check rather than a thing you read. */

.lapmarks[b-gcehr94bhs] {
    padding: var(--tt-s-10) var(--tt-s-12);
    background: var(--tt-surface-1);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-4);
}

.lapmarks__head[b-gcehr94bhs] {
    display: flex;
    align-items: baseline;
    gap: var(--tt-s-8);
    padding-bottom: var(--tt-s-6);
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tt-tracking-wide);
    color: var(--tt-ink-4);
}

.lapmarks__count[b-gcehr94bhs] {
    margin-left: auto;
    font-weight: var(--tt-weight-regular);
    text-transform: none;
    letter-spacing: 0;
}

.lapmarks__list[b-gcehr94bhs] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lapmarks__row[b-gcehr94bhs] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-10);
    padding: var(--tt-s-4) 0;
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
}

.lapmarks__no[b-gcehr94bhs] {
    width: 22px;
    flex: none;
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-4);
    font-variant-numeric: tabular-nums;
}

.lapmarks__time[b-gcehr94bhs] {
    flex: 1;
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-1);
    font-variant-numeric: tabular-nums;
}

/* A lap that is not counting is still part of the record, so it steps back rather than hiding. */
.lapmarks__row--out .lapmarks__time[b-gcehr94bhs],
.lapmarks__row--in .lapmarks__time[b-gcehr94bhs] { color: var(--tt-ink-4); }

.lapmarks__marks[b-gcehr94bhs] {
    display: inline-flex;
    flex: none;
    gap: 2px;
}

.lapmarks__mark[b-gcehr94bhs] {
    min-width: 34px;
    padding: 2px var(--tt-s-6);
    border: var(--tt-border-w) solid var(--tt-line);
    background: var(--tt-surface-0);
    border-radius: var(--tt-radius-2);
    font-family: var(--tt-font-sans);
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-3);
    cursor: pointer;
}

.lapmarks__mark:hover[b-gcehr94bhs] { border-color: var(--tt-ink-4); color: var(--tt-ink-1); }

.lapmarks__mark.is-on[b-gcehr94bhs] {
    background: var(--tt-ink-1);
    border-color: var(--tt-ink-1);
    color: var(--tt-surface-0);
}

/* Noticed, not wrong - the driver decides. Warn ink rather than the destructive red. */
.lapmarks__flag[b-gcehr94bhs] {
    flex: none;
    font-size: var(--tt-text-xs);
    color: var(--tt-status-warn-text);
}

/* ── Editing (#403) ─────────────────────────────────────────────────────────────────────────── */

/* The field takes the place the read-only time held, so a row does not change shape between the
   two modes. Tabular figures and the same size, because the driver is checking a column of times
   against a lap chart rather than reading prose.

   ::deep BECAUSE THE INPUT IS LapTimeInput'S, NOT THIS COMPONENT'S. Scoped CSS only stamps its
   attribute on elements in this component's own markup, so without it every rule below silently
   does nothing and the field falls back to the app's default input chrome. SessionRow.razor.css
   carries the same note for the same reason — second time this has bitten, so it is written down
   in both places. */
.lapmarks[b-gcehr94bhs]  .lapmarks__field {
    flex: 1;
    min-width: 0;
    padding: var(--tt-s-2) var(--tt-s-4);
    border: var(--tt-border-w) solid transparent;
    border-radius: var(--tt-radius-2);
    background: none;
    font-family: var(--tt-font-sans);
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-1);
    font-variant-numeric: tabular-nums;
}

.lapmarks[b-gcehr94bhs]  .lapmarks__field:hover { border-color: var(--tt-line); }

.lapmarks[b-gcehr94bhs]  .lapmarks__field:focus {
    outline: none;
    border-color: var(--tt-primary-border);
    box-shadow: var(--tt-shadow-focus-tight);
}

/* Destructive, so it stays quiet until the pointer is on it — a row of live delete buttons down
   the side of a list the driver is typing into is an invitation to lose a lap. */
.lapmarks__drop[b-gcehr94bhs] {
    flex: none;
    width: 20px;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-size: var(--tt-text-sm);
    line-height: 1;
    color: var(--tt-ink-5);
    cursor: pointer;
}

.lapmarks__drop:hover[b-gcehr94bhs] { color: var(--tt-cta); }

.lapmarks__add[b-gcehr94bhs] {
    width: 100%;
    margin-top: var(--tt-s-6);
    padding: var(--tt-s-6);
    border: var(--tt-border-w) dashed var(--tt-line);
    border-radius: var(--tt-radius-4);
    background: none;
    font-family: var(--tt-font-sans);
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-3);
    cursor: pointer;
}

.lapmarks__add:hover[b-gcehr94bhs] { border-color: var(--tt-ink-4); color: var(--tt-ink-1); }

/* The two facts only the driver holds. Same checkbox-row shape as SessionConsumablesModal's
   sc-item, which is the app's sanctioned pattern for this. */
.lapmarks__gaps[b-gcehr94bhs] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tt-s-4) var(--tt-s-12);
    margin-top: var(--tt-s-8);
}

.lapmarks__gap[b-gcehr94bhs] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-8);
    padding: var(--tt-s-4) var(--tt-s-2);
    border-radius: var(--tt-radius-4);
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-2);
    cursor: pointer;
}

.lapmarks__gap:hover[b-gcehr94bhs] { background: var(--tt-surface-2); }

.lapmarks__gap input[b-gcehr94bhs] { flex-shrink: 0; }

/* What the laps add up to. It is the reason a page is or is not drawing a pace chart, so it is
   stated rather than left to be inferred from an empty panel. */
.lapmarks__read[b-gcehr94bhs] {
    margin: var(--tt-s-8) 0 0;
    font-size: var(--tt-text-xs);
    line-height: 1.5;
    color: var(--tt-ink-4);
    text-wrap: pretty;
}

/* A complete record is the one state worth marking, because it is what unlocks the lap chart and
   the spread. Status-ok, the same green every other "this is good" reads in. */
.lapmarks__read--sequenced[b-gcehr94bhs] { color: var(--tt-status-ok); }

/* MORE LAP TIMES THAN THE COUNT ADMITS — the one understatement the app can detect for itself,
   and the count is what brake, tire and fluid life are measured in. Warn ink and the panel's only
   bold line, because reading past it costs a part its remaining life on paper. */
.lapmarks__read--under[b-gcehr94bhs] {
    color: var(--tt-status-warn-text);
    font-weight: var(--tt-weight-semibold);
}
/* /Components/SessionRow.razor.rz.scp.css */
/* ============================================================
 * SessionRow - one session entry in the "Log an event" form.
 * ============================================================ */

/* num | label | stepper | time | weather | car | driver | del */
.sess-row[b-sl9wb4tef2] {
    display: grid;
    grid-template-columns: 38px minmax(110px, 1fr) 94px 90px 124px 88px 88px 24px;
    gap: var(--tt-s-6);
    align-items: center;
    padding: var(--tt-s-6) var(--tt-s-12);
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
}

.sess-row:last-of-type[b-sl9wb4tef2] { border-bottom: none; }

/* ── Session number badge ─────────────────────────────────── */

.sess-row__num[b-sl9wb4tef2] {
    width: 32px;
    height: 32px;
    background: var(--tt-ink-1);
    color: var(--tt-surface-0);
    border-radius: var(--tt-radius-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: var(--tt-weight-bold);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* ── Label input ──────────────────────────────────────────── */

.sess-row__label[b-sl9wb4tef2] {
    width: 100%;
    height: 30px;
    padding: 0 var(--tt-s-8);
    border: none;
    border-bottom: var(--tt-border-w) solid transparent;
    font: inherit;
    font-size: 13px;
    color: var(--tt-ink-1);
    background: transparent;
    outline: none;
    transition: border-color 100ms;
}

.sess-row__label:hover[b-sl9wb4tef2] { border-bottom-color: var(--tt-line-soft); }
.sess-row__label:focus[b-sl9wb4tef2] { border-bottom: 2px solid var(--tt-ink-1); }

/* ── Lap stepper ──────────────────────────────────────────── */

.sess-row__stepper[b-sl9wb4tef2] {
    display: inline-grid;
    grid-template-columns: 24px 44px 24px;
    height: 26px;
    border: var(--tt-border-w) solid var(--tt-line-soft);
    overflow: hidden;
}

.sess-row__step-btn[b-sl9wb4tef2] {
    background: var(--tt-surface-2);
    border: 0;
    font: inherit;
    font-size: 14px;
    color: var(--tt-ink-2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 100ms, color 100ms;
}

.sess-row__step-btn:hover[b-sl9wb4tef2] { background: var(--tt-ink-1); color: var(--tt-surface-0); }
.sess-row__step-btn:first-child[b-sl9wb4tef2] { border-right: var(--tt-border-w) solid var(--tt-line); }
.sess-row__step-btn:last-child[b-sl9wb4tef2]  { border-left:  var(--tt-border-w) solid var(--tt-line); }
.sess-row__step-btn:disabled[b-sl9wb4tef2],
.sess-row__step-btn:disabled:hover[b-sl9wb4tef2] { background: var(--tt-surface-2); color: var(--tt-ink-4); cursor: default; }

.sess-row__step-input[b-sl9wb4tef2] {
    text-align: center;
    border: none;
    background: transparent;
    font-family: var(--tt-font-mono);
    font-size: 13px;
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-1);
    outline: none;
    -moz-appearance: textfield;
}

.sess-row__step-input[b-sl9wb4tef2]::-webkit-inner-spin-button,
.sess-row__step-input[b-sl9wb4tef2]::-webkit-outer-spin-button { -webkit-appearance: none; }

/* ── Best lap input ───────────────────────────────────────── */

/* The input is rendered by LapTimeInput since #349, so these need ::deep to reach it: scoped CSS
   only stamps its attribute on elements in THIS component's own markup, and without it the whole
   treatment below would silently stop applying. The styling itself is unchanged. */
.sess-row[b-sl9wb4tef2]  .sess-row__bestlap {
    width: 100%;
    height: 30px;
    padding: 0 var(--tt-s-8);
    border: none;
    border-bottom: var(--tt-border-w) solid transparent;
    font-family: 'Courier New', monospace;
    font-size: 16px;
    font-weight: var(--tt-weight-bold);
    text-align: center;
    color: var(--tt-ink-1);
    background: transparent;
    outline: none;
    transition: border-color 100ms;
}

.sess-row[b-sl9wb4tef2]  .sess-row__bestlap:hover { border-bottom-color: var(--tt-line-soft); }
.sess-row[b-sl9wb4tef2]  .sess-row__bestlap:focus { border-bottom: 2px solid var(--tt-ink-1); }
.sess-row[b-sl9wb4tef2]  .sess-row__bestlap:read-only { cursor: default; }
.sess-row[b-sl9wb4tef2]  .sess-row__bestlap:read-only:hover { border-bottom-color: transparent; }
.sess-row[b-sl9wb4tef2]  .sess-row__bestlap:read-only:focus { border-bottom-width: var(--tt-border-w); outline: none; }

/* ── Projected time (forecast mode) ──────────────────────── */

.sess-row__proj-time[b-sl9wb4tef2] {
    font-size: var(--tt-text-sm);
    font-variant-numeric: tabular-nums;
    color: var(--tt-ink-2);
    padding-left: var(--tt-s-4);
}

/* ── Weather pill ─────────────────────────────────────────── */

.sess-row__weather[b-sl9wb4tef2] {
    display: inline-flex;
    align-items: center;
    gap: var(--tt-s-4);
    width: 100%;
    padding: 0 var(--tt-s-8);
    height: 30px;
    border: var(--tt-border-w) solid var(--tt-line-soft);
    background: transparent;
    font: inherit;
    font-size: 13px;
    color: var(--tt-ink-1);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: border-color 100ms;
}

.sess-row__weather:hover[b-sl9wb4tef2] { border-color: var(--tt-ink-1); }

.sess-row__weather-cond[b-sl9wb4tef2] {
    color: var(--tt-ink-3);
    font-size: 11px;
    font-weight: var(--tt-weight-regular);
}

.sess-row__weather.is-override[b-sl9wb4tef2] {
    background: var(--tt-surface-2);
    border-color: var(--tt-ink-1);
    border-width: 2px;
    padding: 0 7px;
}

.sess-row__weather.is-readonly[b-sl9wb4tef2] {
    cursor: default;
    pointer-events: none;
    opacity: 0.85;
}

/* No weather set yet (no forecast retrieved / not entered) - muted, dashed,
   so it reads as a placeholder rather than a real value. */
.sess-row__weather.is-empty[b-sl9wb4tef2] {
    border-style: dashed;
}
.sess-row__weather.is-empty .sess-row__weather-cond[b-sl9wb4tef2] {
    color: var(--tt-ink-4);
    font-style: italic;
}

/* ── Driver pill ──────────────────────────────────────────── */

.sess-row__driver[b-sl9wb4tef2] {
    display: inline-flex;
    align-items: center;
    gap: var(--tt-s-4);
    width: 100%;
    height: 30px;
    padding: 0 var(--tt-s-6);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    background: transparent;
    font: inherit;
    font-size: 13px;
    color: var(--tt-ink-1);
    cursor: pointer;
    transition: border-color 100ms;
}

.sess-row__driver:hover[b-sl9wb4tef2] { border-color: var(--tt-ink-1); }

.sess-row__driver-avatar[b-sl9wb4tef2] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: var(--tt-weight-semibold);
    flex-shrink: 0;
    letter-spacing: 0.03em;
    user-select: none;
}

.sess-row__driver-name[b-sl9wb4tef2] {
    font-weight: var(--tt-weight-medium);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sess-row__driver-chev[b-sl9wb4tef2] {
    color: var(--tt-ink-4);
    display: inline-flex;
    flex-shrink: 0;
}

/* ── Remove button ────────────────────────────────────────── */

.sess-row__del[b-sl9wb4tef2] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--tt-ink-4);
    cursor: pointer;
    padding: var(--tt-s-4);
    border-radius: var(--tt-radius-4);
    transition: color 100ms, background 100ms;
}

.sess-row__del:hover[b-sl9wb4tef2] {
    color: var(--tt-danger);
    background: var(--tt-surface-1);
}

/* ── Inline popover ───────────────────────────────────────── */

.sess-row__popover[b-sl9wb4tef2] {
    position: absolute;
    top: calc(100% + var(--tt-s-4));
    left: 0;
    background: var(--tt-surface-0);
    border: var(--tt-border-w) solid var(--tt-ink-1);
    box-shadow: var(--tt-shadow-lg);
    z-index: 30;
    display: flex;
    flex-direction: column;
    min-width: 200px;
}

.sess-row__popover--right[b-sl9wb4tef2] { left: auto; right: 0; }

.sess-row__pop-title[b-sl9wb4tef2] {
    font-size: 10px;
    font-weight: var(--tt-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--tt-ink-3);
    padding: var(--tt-s-10) var(--tt-s-12) var(--tt-s-8);
    white-space: nowrap;
}

.sess-row__pop-row[b-sl9wb4tef2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tt-s-12);
    padding: var(--tt-s-8) var(--tt-s-12);
    font-size: 11px;
}

.sess-row__pop-row label[b-sl9wb4tef2] { color: var(--tt-ink-3); flex-shrink: 0; }

.sess-row__pop-row input[b-sl9wb4tef2],
.sess-row__pop-row select[b-sl9wb4tef2] {
    font: inherit;
    font-size: 13px;
    color: var(--tt-ink-1);
    background: transparent;
    border: none;
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
    outline: none;
    text-align: right;
    width: 100px;
}

.sess-row__pop-opt[b-sl9wb4tef2] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-8);
    width: 100%;
    padding: var(--tt-s-8) var(--tt-s-12);
    background: transparent;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    color: var(--tt-ink-1);
    white-space: nowrap;
    text-align: left;
    transition: background 100ms;
}

.sess-row__pop-opt:hover[b-sl9wb4tef2]     { background: var(--tt-surface-1); }
.sess-row__pop-opt.is-active[b-sl9wb4tef2] { font-weight: var(--tt-weight-semibold); }

.sess-row__pop-hint[b-sl9wb4tef2] {
    font-size: 11px;
    color: var(--tt-ink-3);
    padding: var(--tt-s-8) var(--tt-s-12) var(--tt-s-10);
    line-height: 1.5;
}

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 640px) {
    .sess-row[b-sl9wb4tef2] { grid-template-columns: 32px 1fr 110px 80px; }
    .sess-row > *:nth-child(n+5)[b-sl9wb4tef2] { display: none; }
}
/* /Components/SetupAcross.razor.rz.scp.css */
/* Setup across visits (#353).

   The prototype's own grid, ported: `1fr 62px×N`, a 2px/8px gap, centred rows. Its type sizes sit
   below the token scale — 10px headers, 12px cells — and are written in px on purpose, the same
   decision and the same reason as DayArc and the setup slot cards: the smallest token is 12px, and
   a four-column strip of visit labels at 12px wraps. */

.sxv[b-kzyimrmemf] {
    display: grid;
    grid-template-columns: 1fr repeat(var(--sxv-cols, 4), 62px);
    gap: 2px var(--tt-s-8);
    align-items: center;
}

/* The grid is one element, so head and rows are contents rather than boxes — otherwise every row
   would need its own copy of the column template and they would drift apart. */
.sxv__head[b-kzyimrmemf],
.sxv__row[b-kzyimrmemf] {
    display: contents;
}

.sxv__head > span[b-kzyimrmemf] {
    font-size: 10px;
    font-weight: var(--tt-weight-semibold);
    letter-spacing: var(--tt-tracking-wide);
    text-transform: uppercase;
    color: var(--tt-ink-4);
    text-align: right;
}

/* Where the car stands, which every other column is measured against — so it carries more weight
   than the visits beside it. */
.sxv__head > span.is-now[b-kzyimrmemf] { color: var(--tt-ink-2); }

.sxv__name[b-kzyimrmemf],
.sxv__cell[b-kzyimrmemf] {
    padding: var(--tt-s-4) 0;
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
    font-size: 12px;
}

.sxv__name[b-kzyimrmemf] {
    color: var(--tt-ink-3);
    text-wrap: pretty;
}

.sxv__cell[b-kzyimrmemf] {
    text-align: right;
    color: var(--tt-ink-2);
    font-variant-numeric: tabular-nums;
}

/* A value that differs from the car today — the thing the driver opened this for. --tt-cta, the
   only place on this panel anything is coloured. */
.sxv__cell.is-changed[b-kzyimrmemf] {
    color: var(--tt-cta);
    font-weight: var(--tt-weight-semibold);
}

/* The setting recorded nothing that visit, which is not a zero. */
.sxv__cell.is-blank[b-kzyimrmemf] { color: var(--tt-ink-4); }

.sxv__note[b-kzyimrmemf] {
    margin: var(--tt-s-10) 0 0;
    font-size: var(--tt-text-xs);
    line-height: 1.5;
    color: var(--tt-ink-4);
    text-wrap: pretty;
}

/* Below the app's breakpoint the fixed 62px columns stop fitting a four-visit strip beside a
   setting name, so the whole grid scrolls sideways rather than crushing the name column to nothing.
   The row label keeps its width; the visits are what you swipe through. */
@media (max-width: 800px) {
    .sxv[b-kzyimrmemf] {
        grid-template-columns: minmax(120px, 1fr) repeat(var(--sxv-cols, 4), 54px);
        overflow-x: auto;
    }
}
/* /Components/SetupDelta.razor.rz.scp.css */
/* What moved on the car between the day's sessions (#354). */

.delta__step + .delta__step[b-sjh2lneci4] { margin-top: var(--tt-s-14); }

/* Which two sessions this run of changes sits between. The short form, because it is a label on a
   group rather than a thing being read across. */
.delta__when[b-sjh2lneci4] {
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    letter-spacing: var(--tt-tracking-wide);
    text-transform: uppercase;
    color: var(--tt-ink-4);
    padding-bottom: var(--tt-s-4);
}

.delta__row[b-sjh2lneci4] {
    display: grid;
    grid-template-columns: 1fr auto var(--tt-s-16) auto;
    gap: var(--tt-s-8);
    align-items: baseline;
    padding: var(--tt-s-8) 0;
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
    font-size: var(--tt-text-sm);

    /* Read down the two value columns, so a day's worth of changes lines up. */
    font-variant-numeric: tabular-nums;
}

.delta__what[b-sjh2lneci4] { color: var(--tt-ink-2); }

/* Where it was reads back; where it went reads forward. The old figure is deliberately quieter —
   the driver is here to find out what the car ended up on. */
.delta__from[b-sjh2lneci4] { color: var(--tt-ink-4); }
.delta__arrow[b-sjh2lneci4] { color: var(--tt-ink-4); text-align: center; }
.delta__to[b-sjh2lneci4] { color: var(--tt-ink-1); font-weight: var(--tt-weight-medium); }

.delta__none[b-sjh2lneci4] {
    margin: 0;
    font-size: var(--tt-text-sm);
    line-height: 1.5;
    color: var(--tt-ink-4);
    text-wrap: pretty;
}

.delta__error[b-sjh2lneci4] {
    margin: 0;
    font-size: var(--tt-text-sm);
    color: var(--tt-status-crit);
}

@media (max-width: 800px) {
    /* The arrow column earns its width on a wide row and not on a narrow one, where the two figures
       can simply sit beside each other. */
    .delta__row[b-sjh2lneci4] { grid-template-columns: 1fr auto var(--tt-s-12) auto; gap: var(--tt-s-4); }
}
/* /Components/SetupView.razor.rz.scp.css */
/* Band 2's right column (#352). The eleven anchor positions are the prototype's own, taken
   verbatim — a value has to annotate the part of the car it describes, and "near enough" is a
   value pointing at the wrong wheel. */

.stp__head[b-riexryiusf] {
    display: flex;
    align-items: flex-start;
    gap: var(--tt-s-10);
    margin-bottom: var(--tt-s-12);
}

.stp__families[b-riexryiusf] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tt-s-4);
    flex: 1;
    min-width: 0;
}

/* White: switching into Configure is a general action, not the panel's primary one — the panel is
   read-only by design and the buttons open the places you change things. */
.stp__configure[b-riexryiusf] {
    flex: none;
    height: 26px;
    padding: 0 var(--tt-s-10);
    border: var(--tt-border-w) solid var(--tt-btn-secondary-border);
    border-radius: var(--tt-radius-4);
    background: var(--tt-btn-secondary);
    color: var(--tt-btn-secondary-text);
    font: inherit;
    font-size: var(--tt-text-xs);
    cursor: pointer;
}

.stp__configure:hover[b-riexryiusf] { border-color: var(--tt-ink-3); }

/* Configure is a mode you are inside, and this is the frame that says so — a bordered callout in
   the CTA red, per the prototype, not another line of body copy. The ink is ink-2, not the quiet
   register's ink-4: it is instruction for the mode, and it has to outrank the values around it. */
.stp__configuring[b-riexryiusf] {
    margin: 0 0 var(--tt-s-12);
    padding: var(--tt-s-8) var(--tt-s-10);
    border: var(--tt-border-w) solid var(--tt-cta-border);
    background: var(--tt-surface-1);
    font-size: var(--tt-text-xs);
    line-height: 1.5;
    color: var(--tt-ink-2);
    text-wrap: pretty;
}

/* The not-run note is <Note> now. This spacing is all the host still owes it. */
[b-riexryiusf] .note { margin-bottom: var(--tt-s-12); }

/* ── The drawing ─────────────────────────────────────────────────────────────────────────────
   A fixed-height stage so the anchors keep their relationship to the car whatever a card holds.

   CAPPED, because the cards are positioned as a PERCENTAGE of this box while the car is sized off
   its height. Let the box grow and the cards walk away from the car they annotate — an unbounded
   host measured 1358px at a 1440 viewport and 1838px at 1920.

   Both hosts size this view to one band-2 column, so the stage settles at 454px in each and the cap
   never binds. It stays as the backstop for a host that states no width of its own. */
.stp__car[b-riexryiusf] {
    position: relative;
    height: 620px;
    max-width: 504px;
    margin-inline: auto;
}

/* The drawing itself lives in CarBackdrop, which both this panel and the Consumables
   panel call so the two draw the same car (#516). .stp__car above is the stage it
   positions against. */

/* ── A placed card ───────────────────────────────────────────────────────────────────────── */
.stp__slot[b-riexryiusf],
.stp__pad[b-riexryiusf] {
    position: absolute;
    width: 30%;
    text-align: left;
    font: inherit;
    box-sizing: border-box;
}

/* The prototype's own paddings. Off the spacing scale, like the type sizes on this card. */
.stp__slot[b-riexryiusf] { padding: 5px 8px; }
.stp__pad[b-riexryiusf]  { padding: 7px 8px; }

.stp__slot[b-riexryiusf] {
    background: var(--tt-surface-1);
    border: var(--tt-border-w) solid var(--tt-line);
    box-shadow: var(--tt-shadow-sm);
}

/* A fixed position showing nothing. It stays on the drawing rather than vanishing — a corner that
   disappears reads as a car that lost a wheel. */
.stp__slot--empty[b-riexryiusf] {
    background: none;
    border-style: dashed;
    border-color: var(--tt-line-soft);
    box-shadow: none;
}

.stp__pad[b-riexryiusf] {
    background: none;
    border: var(--tt-border-w) dashed var(--tt-line);
    cursor: pointer;
}

.stp__pad:hover[b-riexryiusf] { border-color: var(--tt-ink-3); background: var(--tt-surface-1); }

.stp__slot-title[b-riexryiusf] {
    display: block;
    font-size: 9px;
    font-weight: var(--tt-weight-bold);
    letter-spacing: var(--tt-tracking-wide);
    text-transform: uppercase;
    color: var(--tt-ink-4);
}

.stp__pad-label[b-riexryiusf] {
    display: block;
    margin-top: var(--tt-s-2);
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-3);
}

.stp__slot-none[b-riexryiusf] {
    display: block;
    margin-top: var(--tt-s-2);
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-4);
}

.stp__row[b-riexryiusf] {
    display: block;
    margin-top: var(--tt-s-4);
}

.stp__row-k[b-riexryiusf] {
    display: block;
    font-size: 9.5px;
    line-height: 1.35;
    color: var(--tt-ink-4);
    text-wrap: pretty;
}

.stp__row-v[b-riexryiusf] {
    display: block;
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    line-height: 1.3;
    color: var(--tt-ink-1);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* A value nobody set is not a zero, and it does not get the weight of a figure. */
.stp__row-v.is-unset[b-riexryiusf] {
    font-weight: var(--tt-weight-regular);
    color: var(--tt-ink-4);
}

/* ── The eleven anchors ──────────────────────────────────────────────────────────────────────
   The nine grid anchors are centred on their point; the nose is top-aligned to the front and the
   tail bottom-aligned to the wing. */
.is-nose[b-riexryiusf]        { left: 50%; top: 20px;    transform: translateX(-50%); }
.is-tail[b-riexryiusf]        { left: 50%; bottom: 20px; transform: translateX(-50%); }

.is-frontleft[b-riexryiusf]   { left: 1%;  top: 21.9%; transform: translateY(-50%); }
.is-frontaxle[b-riexryiusf]   { left: 50%; top: 21.9%; transform: translate(-50%, -50%); }
.is-frontright[b-riexryiusf]  { right: 1%; top: 21.9%; transform: translateY(-50%); }

.is-centreleft[b-riexryiusf]  { left: 1%;  top: 50%; transform: translateY(-50%); }
.is-centre[b-riexryiusf]      { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.is-centreright[b-riexryiusf] { right: 1%; top: 50%; transform: translateY(-50%); }

.is-rearleft[b-riexryiusf]    { left: 1%;  top: 74.3%; transform: translateY(-50%); }
.is-rearaxle[b-riexryiusf]    { left: 50%; top: 74.3%; transform: translate(-50%, -50%); }
.is-rearright[b-riexryiusf]   { right: 1%; top: 74.3%; transform: translateY(-50%); }

.stp__error[b-riexryiusf] {
    margin: var(--tt-s-12) 0 0;
    font-size: var(--tt-text-sm);
    color: var(--tt-status-crit);
}

@media (max-width: 800px) {
    /* The cards need more of the width on a phone, and the drawing shrinks to suit. 32% is the
       ceiling, not a preference: an axle row places three cards across the stage, so anything
       above 33% overlaps by arithmetic alone. 32% leaves the 1% edge insets and a 1% gap either
       side of the centre card (#528). */
    .stp__car[b-riexryiusf] { height: 520px; }
    .stp__slot[b-riexryiusf], .stp__pad[b-riexryiusf] { width: 32%; }
}

/* ── The composite corner (#353) ─────────────────────────────────────────────────────────────
   Target and hot are what the driver judges, so they carry the weight; cold is the setting that
   produced them and sits small between the two. */
.stp__press[b-riexryiusf] {
    display: block;
    margin-top: var(--tt-s-6);
}

.stp__press-lbl[b-riexryiusf] {
    display: block;
    font-size: 9.5px;
    line-height: 1.35;
    color: var(--tt-ink-4);
}

.stp__press-fig[b-riexryiusf] {
    display: block;
    line-height: 1.2;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* 17px, the prototype's. --tt-text-lg is 20px and was making this corner shout. */
.stp__press-big[b-riexryiusf] {
    font-size: 17px;
    font-weight: var(--tt-weight-medium);
    color: var(--tt-ink-1);
}

.stp__press-mid[b-riexryiusf] {
    font-style: normal;
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-1);
}

.stp__press-tail[b-riexryiusf] {
    font-style: normal;
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-1);
}

/* Carried into this session rather than set for it. Held back rather than marked with a symbol:
   the label already says "cold carried", and a glyph on a card this size is noise. */
.stp__press-mid.is-carried[b-riexryiusf] { color: var(--tt-ink-4); }

/* ── A card holding one setting ───────────────────────────────────────────────────────────────
   Values lifted from the prototype's slot builder: the figure is 14px
   at weight 500 in ink-1, the word under it 10px in ink-4. Neither size is on the token scale —
   xs is 12px and md is 17.6px — which is why they are stated in px here, as .stp__slot-title and
   .stp__row-k already are for the same reason.

   THE UNIT IS PART OF THE FIGURE STRING. There is no unit element and no second size for it: the
   prototype joins them with `unite()`, which gives "-3.2°" and "62%" no gap and "104 mm" a space.
   See SlotCard.Unite. */
.stp__big[b-riexryiusf] {
    display: block;
    line-height: 1.2;
    white-space: nowrap;
}

.stp__big-fig[b-riexryiusf] {
    display: block;
    font-size: 14px;
    font-weight: var(--tt-weight-medium);
    color: var(--tt-ink-1);
    font-variant-numeric: tabular-nums;
}

.stp__big-sub[b-riexryiusf] {
    display: block;
    font-style: normal;
    font-size: 10px;
    color: var(--tt-ink-4);
    font-variant-numeric: tabular-nums;
}

/* A qualifier that completes the figure — "0.10 out", "8 of 16" — is part of the reading, so it
   sits on the same line. One space between them, which is the whitespace already in the markup. */
.stp__big.is-inline .stp__big-fig[b-riexryiusf],
.stp__big.is-inline .stp__big-sub[b-riexryiusf] { display: inline; }

/* ── A composite of peers ─────────────────────────────────────────────────────────────────────
   Several settings sharing one unit, read across: "Left · right" over "7.2 · 7.2°".

   Two sizes, and the view picks one for all of them — the prototype's rule is that the longest
   figure row decides, so peer cards never disagree and nothing crosses a card edge. 14px/500 when
   they fit, 12px/600 when the longest exceeds 14 characters. Neither is on the token scale. */
.stp__press-all[b-riexryiusf] {
    font-style: normal;
    font-size: 14px;
    font-weight: var(--tt-weight-medium);
    color: var(--tt-ink-1);
    font-variant-numeric: tabular-nums;
}

.stp__press-all.is-tight[b-riexryiusf] {
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
}

/* The qualifier that completes a row's reading — "of 16". Quieter and lighter than the figure,
   because it is the bound rather than the value. The prototype's row: 10px, weight 400, ink-4. */
.stp__row-q[b-riexryiusf] {
    font-style: normal;
    font-size: 10px;
    font-weight: var(--tt-weight-regular);
    color: var(--tt-ink-4);
}
/* /Components/SharedDayView.razor.rz.scp.css */
/* The shared-day document (#359, unified in #360).
   THESE RULES LIVE WITH THE MARKUP. They were on SharedDay.razor until the document became a
   component; a page's scoped stylesheet cannot reach a child component's elements, so leaving
   them behind would have rendered the whole day unstyled on both routes.

   Originally the design prototype's detail view, with the list, the nav and every action removed
   — this is that same document read by somebody with no account, which the design calls the common
   case rather than a variant. */

/* The link renders this document on a bare layout, so it supplies its own page shell. Inside the
   app the host has already done that, and repeating it would centre a column inside a column. */
.sd[b-3b30bv0u6l] {
    max-width: 780px;
    margin: 0 auto;
    padding: var(--tt-s-32) var(--tt-s-24) var(--tt-s-64);
}

.sd--hosted[b-3b30bv0u6l] {
    max-width: none;
    margin: 0;
    padding: 0;
}

.sd__empty[b-3b30bv0u6l] {
    padding: var(--tt-s-48) 0;
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-3);
    text-align: center;
}

/* ── The link is closed ─────────────────────────────────────────────────────────────────────
   Deliberately says nothing about WHY. The API cannot distinguish expired from withdrawn from
   never-existed, on purpose, so this must not either — the alternative confirms to somebody
   holding a dead URL that there is a real day behind it. */
.sd__gone[b-3b30bv0u6l] {
    margin: var(--tt-s-48) 0;
    padding: var(--tt-s-32);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-8);
    background: var(--tt-surface-1);
    text-align: center;
}

.sd__gone-title[b-3b30bv0u6l] {
    margin: 0 0 var(--tt-s-8);
    font-size: var(--tt-text-lg);
    font-weight: var(--tt-weight-regular);
    color: var(--tt-ink-1);
}

.sd__gone-body[b-3b30bv0u6l] {
    margin: 0 0 var(--tt-s-20);
    font-size: var(--tt-text-sm);
    line-height: 1.55;
    color: var(--tt-ink-3);
    text-wrap: pretty;
}

/* ── Says what this is ──────────────────────────────────────────────────────────────────── */
.sd__banner[b-3b30bv0u6l] {
    padding: var(--tt-s-12) var(--tt-s-16);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-left: 3px solid var(--tt-primary);
    background: var(--tt-surface-1);
    font-size: var(--tt-text-xs);
    line-height: 1.55;
    color: var(--tt-ink-3);
    text-wrap: pretty;
}

.sd__head[b-3b30bv0u6l] { margin: var(--tt-s-24) 0 var(--tt-s-20); }

.sd__eyebrow[b-3b30bv0u6l] {
    display: block;
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tt-primary);
}

.sd__title[b-3b30bv0u6l] {
    margin: var(--tt-s-6) 0 var(--tt-s-4);
    font-size: var(--tt-text-2xl);
    font-weight: var(--tt-weight-regular);
    color: var(--tt-ink-1);
}

.sd__lede[b-3b30bv0u6l] {
    margin: 0;
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-3);
}

/* Warn ink, not danger: nothing is broken. The driver made a choice and the reader is being told
   what it was, so they do not read the absence as the driver having no setup. */
.sd__withheld[b-3b30bv0u6l] {
    margin-bottom: var(--tt-s-20);
    padding: var(--tt-s-10) var(--tt-s-14);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-4);
    background: var(--tt-surface-1);
    font-size: var(--tt-text-xs);
    line-height: 1.55;
    color: var(--tt-ink-4);
    text-wrap: pretty;
}

/* ── Bands ──────────────────────────────────────────────────────────────────────────────── */
.sd__block[b-3b30bv0u6l] { margin-top: var(--tt-s-24); }

.sd__band[b-3b30bv0u6l] {
    margin: 0 0 var(--tt-s-12);
    padding-bottom: var(--tt-s-6);
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-bold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tt-ink-2);
}

.sd__session[b-3b30bv0u6l] {
    padding: var(--tt-s-12) 0;
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
}

.sd__session-head[b-3b30bv0u6l] {
    display: flex;
    align-items: baseline;
    gap: var(--tt-s-10);
    flex-wrap: wrap;
}

.sd__session-name[b-3b30bv0u6l] {
    font-size: var(--tt-text-sm);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-1);
}

.sd__session-when[b-3b30bv0u6l] { font-size: var(--tt-text-xs); color: var(--tt-ink-4); }

.sd__session-sp[b-3b30bv0u6l] { flex: 1; }

/* The one number a coach looks for first, so it is given the mono treatment lap times get
   everywhere else in the app rather than being left as body copy. */
.sd__session-best[b-3b30bv0u6l] {
    font-family: var(--tt-font-mono);
    font-size: var(--tt-text-base);
    font-weight: var(--tt-weight-bold);
    color: var(--tt-ink-1);
}

.sd__session-meta[b-3b30bv0u6l] {
    display: flex;
    gap: var(--tt-s-12);
    flex-wrap: wrap;
    margin-top: var(--tt-s-4);
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-4);
}

.sd__debrief[b-3b30bv0u6l] {
    margin: var(--tt-s-8) 0 0;
    font-size: var(--tt-text-sm);
    line-height: 1.5;
    color: var(--tt-ink-2);
    text-wrap: pretty;
}

.sd__goal[b-3b30bv0u6l] {
    padding: var(--tt-s-10) 0;
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
}

.sd__goal-obj[b-3b30bv0u6l] {
    font-size: var(--tt-text-base);
    color: var(--tt-ink-1);
}

.sd__goal-how[b-3b30bv0u6l] {
    margin: var(--tt-s-4) 0 0;
    font-size: var(--tt-text-xs);
    line-height: 1.55;
    color: var(--tt-ink-3);
    text-wrap: pretty;
}

.sd__foot[b-3b30bv0u6l] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-14);
    flex-wrap: wrap;
    margin-top: var(--tt-s-32);
    padding-top: var(--tt-s-14);
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-4);
}

.sd__foot > span[b-3b30bv0u6l] { flex: 1; min-width: 200px; text-wrap: pretty; }

@media (max-width: 800px) {
    .sd[b-3b30bv0u6l] { padding: var(--tt-s-20) var(--tt-s-16) var(--tt-s-48); }
}

/* A goal's verdict and technique sit on one line with the objective. */
.sd__goal-head[b-3b30bv0u6l] {
    display: flex;
    align-items: baseline;
    gap: var(--tt-s-8);
    flex-wrap: wrap;
}

/* Shared, but nothing behind it. Quieter than the withheld line above it: this is not a decision
   the driver made about the reader, it is simply an empty hand. */
.sd__none[b-3b30bv0u6l] {
    margin-top: var(--tt-s-6);
    padding-top: var(--tt-s-6);
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
}

/* ── The car as it stood ─────────────────────────────────────────────────────────────────────
   A two-column grid rather than the drawing the driver's own Setup page uses: this is a reading
   copy for somebody who was not there, and a positional layout would need the car drawing, the
   corner vocabulary and the whole slot model to come with it. */
.sd__setup[b-3b30bv0u6l] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--tt-s-2) var(--tt-s-16);
}

.sd__setting[b-3b30bv0u6l] {
    display: flex;
    align-items: baseline;
    gap: var(--tt-s-8);
    padding: var(--tt-s-6) 0;
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
}

.sd__setting-name[b-3b30bv0u6l] {
    flex: 1;
    min-width: 0;
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-4);
}

.sd__setting-value[b-3b30bv0u6l] {
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-1);
    font-variant-numeric: tabular-nums;
}

.sd__setup-note[b-3b30bv0u6l] {
    margin: var(--tt-s-10) 0 0;
    font-size: var(--tt-text-xs);
    line-height: 1.5;
    color: var(--tt-ink-4);
    text-wrap: pretty;
}
/* /Components/SharedDayWriteBack.razor.rz.scp.css */
/* Writing back through a shared day (#360). */

.wb[b-zzln41b4d2] { margin-top: var(--tt-s-24); }

.wb__band[b-zzln41b4d2] {
    margin: 0 0 var(--tt-s-12);
    padding-bottom: var(--tt-s-6);
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-bold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tt-ink-2);
}

/* THE RULES, and they are given weight on purpose. Learning after composing that only the driver
   sees this, or that there is no recall, is learning it too late. */
.wb__rules[b-zzln41b4d2] {
    margin-bottom: var(--tt-s-14);
    padding: var(--tt-s-10) var(--tt-s-14);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-left: 3px solid var(--tt-primary);
    background: var(--tt-surface-1);
    font-size: var(--tt-text-xs);
    line-height: 1.55;
    color: var(--tt-ink-3);
    text-wrap: pretty;
}

.wb__act[b-zzln41b4d2] {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--tt-s-14);
}

.wb__done[b-zzln41b4d2],
.wb__closed[b-zzln41b4d2] {
    padding: var(--tt-s-12) var(--tt-s-16);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-4);
    background: var(--tt-surface-1);
    font-size: var(--tt-text-sm);
    line-height: 1.55;
    color: var(--tt-ink-2);
    text-wrap: pretty;
}

.wb__done-sub[b-zzln41b4d2] {
    display: block;
    margin-top: var(--tt-s-6);
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-4);
}

/* The cap is not an error - nothing is wrong with the note, there have simply been enough today. */
.wb__closed[b-zzln41b4d2] { color: var(--tt-ink-3); }

.wb__error[b-zzln41b4d2] {
    margin: var(--tt-s-8) 0 0;
    font-size: var(--tt-text-xs);
    line-height: 1.5;
    color: var(--tt-status-crit);
}
/* /Components/StatStrip.razor.rz.scp.css */
/* ── Default: divided row of centered tiles on a card surface ───────────── */
.tt-stat-strip[b-k3t2tu62pl] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    background: var(--tt-surface-0);
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
    margin-bottom: var(--tt-s-24);
}

.tt-stat-strip[b-k3t2tu62pl]  .tt-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: var(--tt-s-14) var(--tt-s-16);
    border-right: var(--tt-border-w) solid var(--tt-line-soft);
}

/* Divider-trim is for the default divided-row variant only. The boxed variant's tiles each
   carry a full border, so it must NOT strip the last tile's right edge (that was the bug). */
.tt-stat-strip:not(.tt-stat-strip--boxed)[b-k3t2tu62pl]  .tt-stat:last-child { border-right: none; }

/* 22px / 10px have no exact type-scale step — kept literal, matching the source strips. */
.tt-stat-strip[b-k3t2tu62pl]  .tt-stat__num {
    font-size: 22px;
    font-weight: var(--tt-weight-light);
    line-height: 1;
    color: var(--tt-ink-1);
    font-variant-numeric: tabular-nums;
}

.tt-stat-strip[b-k3t2tu62pl]  .tt-stat__unit {
    margin-left: var(--tt-s-2);
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-regular);
    color: var(--tt-ink-4);
}

.tt-stat-strip[b-k3t2tu62pl]  .tt-stat--alert .tt-stat__num { color: var(--tt-cta); }

.tt-stat-strip[b-k3t2tu62pl]  .tt-stat__label {
    margin-top: var(--tt-s-6);
    font-size: 10px;
    font-weight: var(--tt-weight-medium);
    text-transform: uppercase;
    letter-spacing: var(--tt-tracking-wide);
    color: var(--tt-ink-3);
}

.tt-stat-strip[b-k3t2tu62pl]  .tt-stat__sublabel {
    margin-top: var(--tt-s-2);
    font-size: 10px;
    font-weight: var(--tt-weight-regular);
    line-height: 1.3;
    color: var(--tt-ink-4);
}

/* ── Boxed: responsive grid of bordered tiles on the content surface ─────── */
.tt-stat-strip--boxed[b-k3t2tu62pl] {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--tt-s-8);
    background: transparent;
    border-bottom: none;
    margin-bottom: 0;
}

.tt-stat-strip--boxed[b-k3t2tu62pl]  .tt-stat {
    align-items: flex-start;
    text-align: left;
    gap: var(--tt-s-4);
    padding: var(--tt-s-14) var(--tt-s-16);
    background: var(--tt-surface-1);
    border: var(--tt-border-w) solid var(--tt-line-soft);
}

/* On a bare page the tiles would otherwise be surface-1 ON surface-1 - the same colour as their
   own backdrop, leaving only the 1px border to say a tile is there. White inverts the pairing so
   the contrast survives either way round. */
.tt-stat-strip--onpage[b-k3t2tu62pl]  .tt-stat {
    background: var(--tt-surface-0);
}

.tt-stat-strip--boxed[b-k3t2tu62pl]  .tt-stat__num { font-weight: var(--tt-weight-semibold); }

.tt-stat-strip--boxed[b-k3t2tu62pl]  .tt-stat__label {
    margin-top: 0;
    font-size: 11px;
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-4);
}

.tt-stat-strip--boxed[b-k3t2tu62pl]  .tt-stat__sublabel { margin-top: -2px; }

@media (max-width: 800px) {
    .tt-stat-strip--boxed[b-k3t2tu62pl] { grid-template-columns: 1fr 1fr; }
}
/* /Components/StintChart.razor.rz.scp.css */
/* The stint chart (#350). Ported from the prototype's band-2 block, whose values were inline —
   every one of them is a --tt-* token here. */

.stint[b-rdj8r6oyhi] {
    display: flex;
    flex-direction: column;
}

.stint__head[b-rdj8r6oyhi] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-8);
    margin-bottom: var(--tt-s-10);
}

.stint__title[b-rdj8r6oyhi] {
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    letter-spacing: var(--tt-tracking-wide);
    text-transform: uppercase;
    color: var(--tt-ink-4);
}

.stint__count[b-rdj8r6oyhi] {
    flex: 1;
    min-width: 0;
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-4);
}

.stint__views[b-rdj8r6oyhi] {
    display: inline-flex;
    flex: none;
    gap: var(--tt-s-4);
}

/* ── The bars ───────────────────────────────────────────────────────────────────────────────
   Quicker is taller, so the chart reads the way a driver thinks about pace. */
.stint__bars[b-rdj8r6oyhi] {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 180px;
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
}

.stint__bar[b-rdj8r6oyhi] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    gap: var(--tt-s-4);
    height: 100%;
    padding: 0;
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
    text-align: center;
}

.stint__bar-fill[b-rdj8r6oyhi] {
    display: block;
    background: var(--tt-bar-bg);
    border-radius: var(--tt-radius-2) var(--tt-radius-2) 0 0;
    transition: background 120ms;
}

.stint__bar:hover .stint__bar-fill[b-rdj8r6oyhi] { background: var(--tt-ink-4); }

/* The best counting lap. The one bar that earns a colour, because it is the one figure the header
   also states — everything else is shape. */
.stint__bar.is-best .stint__bar-fill[b-rdj8r6oyhi] { background: var(--tt-status-ok); }

/* Out and in laps are drawn but stepped back: they are part of the stint and not part of the pace,
   and hiding them would break the running order the chart exists to show. */
.stint__bar.is-edge .stint__bar-fill[b-rdj8r6oyhi] {
    background: none;
    border: var(--tt-border-w) dashed var(--tt-line);
    border-bottom: none;
}

.stint__bar-no[b-rdj8r6oyhi] {
    display: block;
    font-size: var(--tt-text-xs);
    letter-spacing: var(--tt-tracking-wide);
    color: var(--tt-ink-4);
}

.stint__times[b-rdj8r6oyhi],
.stint__claims[b-rdj8r6oyhi] {
    display: flex;
    gap: 3px;
    margin-top: var(--tt-s-2);
}

.stint__time[b-rdj8r6oyhi] {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-size: var(--tt-text-xs);
    font-variant-numeric: tabular-nums;
    color: var(--tt-ink-3);
    overflow: hidden;
}

.stint__claims[b-rdj8r6oyhi] {
    margin-top: var(--tt-s-6);
    padding-top: var(--tt-s-6);
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
}

/* A tick, and never a cross. A lap with no tick is one the driver did not claim, not one they
   missed — absence is unknown. */
.stint__claim[b-rdj8r6oyhi] {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-size: var(--tt-text-sm);
    color: var(--tt-status-ok);
}

/* ── The track view ─────────────────────────────────────────────────────────────────────────
   An explicit white plate: track outlines are dark-line images, so on the dark theme they would
   otherwise disappear into the panel behind them. */
.stint__map[b-rdj8r6oyhi] {
    position: relative;
    height: 180px;
    padding: var(--tt-s-8);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-4);
}

.stint__map img[b-rdj8r6oyhi] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.stint__empty[b-rdj8r6oyhi] {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--tt-s-18);
    background: var(--tt-surface-1);
    border: var(--tt-border-w) dashed var(--tt-line);
    border-radius: var(--tt-radius-4);
    font-size: var(--tt-text-sm);
    line-height: 1.45;
    color: var(--tt-ink-4);
    text-align: center;
    text-wrap: pretty;
}
/* /Components/Tile.razor.rz.scp.css */
/* Tile - values taken from components/core/Tile.jsx in the design project, which is the
   reference implementation. */

.tile[b-q12gust19h] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--tt-s-2);
    padding: var(--tt-s-12) var(--tt-s-14);
    min-width: 0;
}

.tile--sunken[b-q12gust19h] { background: var(--tt-surface-1); }
.tile--raised[b-q12gust19h] { background: var(--tt-surface-0); }

.tile__label[b-q12gust19h] {
    font-size: 10px;
    font-weight: var(--tt-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tt-ink-4);
}

.tile__value-row[b-q12gust19h] {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

/* tabular-nums so a figure does not jitter as it changes, and weight 200 to match the display
   treatment used for large numbers elsewhere. */
.tile__value[b-q12gust19h] {
    font-size: 22px;
    font-weight: 200;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    color: var(--tt-ink-1);
}

.tile__unit[b-q12gust19h] {
    font-size: 13px;
    color: var(--tt-ink-3);
}

.tile__caption[b-q12gust19h] {
    margin-top: 1px;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--tt-ink-4);
}

.tile__action[b-q12gust19h] {
    align-self: flex-start;
    margin-top: 1px;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-size: 11.5px;
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-link);
    text-align: left;
    cursor: pointer;
}

/* Accent fills with --tt-cta, the attention red - NOT --tt-danger. The design system's own
   Tile.d.ts comment still says "danger-filled"; Tile.jsx is authoritative and uses cta. */
.tile--accent[b-q12gust19h] { background: var(--tt-cta); }
.tile--accent .tile__label[b-q12gust19h]   { color: rgba(255, 255, 255, 0.85); }
.tile--accent .tile__value[b-q12gust19h]   { color: #fff; }
.tile--accent .tile__unit[b-q12gust19h],
.tile--accent .tile__caption[b-q12gust19h] { color: rgba(255, 255, 255, 0.9); }

/* Empty state. The dashed border is drawn by TileRow in Spaced layout so the cell does not
   double-border; here it covers the Joined case. */
.tile--dashed[b-q12gust19h] { border: var(--tt-border-w) dashed var(--tt-line); }
.tile--dashed .tile__value[b-q12gust19h] { color: var(--tt-ink-4); }
/* /Components/TileRow.razor.rz.scp.css */
/* TileRow - two layouts. Joined is one bordered strip with hairlines between cells; Spaced is
   separate cards with a gap. */

.trow[b-l0eg87f0qg] { display: flex; flex-direction: column; }

.trow__label[b-l0eg87f0qg] {
    margin-bottom: var(--tt-s-6);
    font-size: 10px;
    font-weight: var(--tt-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tt-ink-4);
}

.trow__cells[b-l0eg87f0qg] { display: flex; }

.trow--joined .trow__cells[b-l0eg87f0qg] {
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-8);
    overflow: hidden;
}

/* A hairline BETWEEN cells, not around each - the strip reads as one object. */
.trow--joined .trow__cells[b-l0eg87f0qg]  .tile + .tile {
    border-left: var(--tt-border-w) solid var(--tt-line-soft);
}

.trow--spaced .trow__cells[b-l0eg87f0qg] {
    flex-wrap: wrap;
    gap: var(--tt-s-10);
}

.trow--spaced .trow__cells[b-l0eg87f0qg]  .tile {
    flex: 1 1 150px;
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-8);
}

.trow--spaced .trow__cells[b-l0eg87f0qg]  .tile--raised { box-shadow: var(--tt-shadow-sm); }

/* In Spaced the wrapper already draws a border, so the dashed empty state replaces it rather
   than adding a second one. */
.trow--spaced .trow__cells[b-l0eg87f0qg]  .tile--dashed { border-style: dashed; }
/* /Components/Toast.razor.rz.scp.css */
/* ============================================================
 * Toast — transient bottom-center confirmation pill (#131)
 * ============================================================ */

.tt-toast[b-x98sdkv9ql] {
    position: fixed;
    left: 50%;
    bottom: var(--tt-s-24);
    transform: translateX(-50%);
    z-index: 60;
    display: flex;
    align-items: center;
    gap: var(--tt-s-14);
    max-width: 92vw;
    padding: var(--tt-s-10) var(--tt-s-18);
    background: var(--tt-ink-1);
    color: var(--tt-surface-0);
    border-radius: var(--tt-radius-pill);
    box-shadow: var(--tt-shadow-lg);
    font-size: var(--tt-text-sm);
    font-weight: var(--tt-weight-semibold);
}

/* tighter right padding when the Undo button is present */
.tt-toast--undo[b-x98sdkv9ql] {
    padding-right: var(--tt-s-12);
}

.tt-toast__msg[b-x98sdkv9ql] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tt-toast__undo[b-x98sdkv9ql] {
    flex-shrink: 0;
    font-family: inherit;
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-bold);
    color: var(--tt-surface-0);
    background: color-mix(in srgb, var(--tt-surface-0) 16%, transparent);
    border: var(--tt-border-w) solid color-mix(in srgb, var(--tt-surface-0) 30%, transparent);
    border-radius: var(--tt-radius-pill);
    padding: var(--tt-s-4) var(--tt-s-12);
    cursor: pointer;
}

.tt-toast__undo:hover[b-x98sdkv9ql] {
    background: color-mix(in srgb, var(--tt-surface-0) 26%, transparent);
}
/* /Components/UpgradePrompt.razor.rz.scp.css */
.tt-upgrade__head[b-ksnv62pv2b] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-8);
}

.tt-upgrade__badge[b-ksnv62pv2b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    border-radius: var(--tt-radius-pill);
    background: var(--tt-surface-2);
    color: var(--tt-ink-2);
}

.tt-upgrade__body[b-ksnv62pv2b] {
    margin: 0;
    color: var(--tt-ink-1);
    line-height: 1.5;
}

.tt-upgrade__hint[b-ksnv62pv2b] {
    margin: var(--tt-s-8) 0 0;
    color: var(--tt-ink-2);
    font-size: var(--tt-text-sm);
}

.tt-upgrade__hint strong[b-ksnv62pv2b] {
    color: var(--tt-ink-1);
}
/* /Layouts/MainLayout.razor.rz.scp.css */
.tf-shell[b-kc2i3l5rje] {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.tf-main[b-kc2i3l5rje] {
    flex: 1;
    overflow-y: auto;
    background: var(--tt-surface-1);
}

#blazor-error-ui[b-kc2i3l5rje] {
    color-scheme: light only;
    background: #b32121;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    color: white;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-kc2i3l5rje] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* /Layouts/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-1zes0bmc5q],
.components-reconnect-repeated-attempt-visible[b-1zes0bmc5q],
.components-reconnect-failed-visible[b-1zes0bmc5q],
.components-pause-visible[b-1zes0bmc5q],
.components-resume-failed-visible[b-1zes0bmc5q],
.components-rejoining-animation[b-1zes0bmc5q] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-1zes0bmc5q],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-1zes0bmc5q],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-1zes0bmc5q],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-1zes0bmc5q],
#components-reconnect-modal.components-reconnect-retrying[b-1zes0bmc5q],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-1zes0bmc5q],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-1zes0bmc5q],
#components-reconnect-modal.components-reconnect-failed[b-1zes0bmc5q],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-1zes0bmc5q] {
    display: block;
}


#components-reconnect-modal[b-1zes0bmc5q] {
    background-color: var(--tt-surface-0);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: var(--tt-radius-8);
    box-shadow: var(--tt-shadow-md);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-1zes0bmc5q 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-1zes0bmc5q 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-1zes0bmc5q 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-1zes0bmc5q]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-1zes0bmc5q 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-1zes0bmc5q {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-1zes0bmc5q {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-1zes0bmc5q {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-1zes0bmc5q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-1zes0bmc5q] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-1zes0bmc5q] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: var(--tt-s-4) var(--tt-s-24);
    border-radius: var(--tt-radius-4);
}

    #components-reconnect-modal button:hover[b-1zes0bmc5q] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-1zes0bmc5q] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-1zes0bmc5q] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-1zes0bmc5q] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-1zes0bmc5q 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-1zes0bmc5q] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-1zes0bmc5q {
    0% {
        top: var(--tt-s-40);
        left: var(--tt-s-40);
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: var(--tt-s-40);
        left: var(--tt-s-40);
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: var(--tt-s-40);
        left: var(--tt-s-40);
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Pages/Account.razor.rz.scp.css */
/* ============================================================
 * Account page - 4 panels: overview, membership, payment, history
 * CSS namespace: .acct-*
 * ============================================================ */

/* Shell: .tt-page in app.css (#400). */

/* Panels use .tt-panels (app.css) - see #400. */

/* shared mono utility */
.acct-mono[b-w18vckflth] {
    font-family: var(--tt-font-mono, ui-monospace, monospace);
    font-variant-numeric: tabular-nums;
}

/* ============================================================
 * Shared button styles
 * ============================================================ */

.acct-btn-dark[b-w18vckflth] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--tt-ink-1);
    border: var(--tt-border-w) solid var(--tt-ink-1);
    color: var(--tt-surface-0);
    font: inherit;
    font-size: 13px;
    font-weight: var(--tt-weight-medium);
    padding: 9px var(--tt-s-18);
    border-radius: var(--tt-radius-4);
    cursor: pointer;
}

.acct-btn-dark:hover:not(:disabled)[b-w18vckflth] {
    background: var(--tt-ink-2);
    border-color: var(--tt-ink-2);
}

.acct-btn-dark:disabled[b-w18vckflth] {
    background: var(--tt-line);
    border-color: var(--tt-line);
    color: #fff;
    cursor: not-allowed;
}

.acct-btn-dark i[data-lucide][b-w18vckflth] { width: 14px; height: 14px; }

.acct-btn-ghost[b-w18vckflth] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--tt-surface-0);
    border: var(--tt-border-w) solid var(--tt-line);
    color: var(--tt-ink-1);
    font: inherit;
    font-size: 13px;
    font-weight: var(--tt-weight-medium);
    padding: 9px var(--tt-s-18);
    border-radius: var(--tt-radius-4);
    cursor: pointer;
}

.acct-btn-ghost:hover[b-w18vckflth] { background: var(--tt-surface-2); }
.acct-btn-ghost i[data-lucide][b-w18vckflth] { width: 14px; height: 14px; }

.acct-btn-danger[b-w18vckflth] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--tt-primary);
    border: var(--tt-border-w) solid #b00018;
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: var(--tt-weight-medium);
    padding: 9px var(--tt-s-18);
    border-radius: var(--tt-radius-4);
    cursor: pointer;
}

.acct-btn-danger:hover[b-w18vckflth] { background: #b00018; }
.acct-btn-danger i[data-lucide][b-w18vckflth] { width: 14px; height: 14px; }

.acct-link[b-w18vckflth] {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 13px;
    color: var(--tt-ink-2);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.acct-link:hover[b-w18vckflth] { color: var(--tt-cta); }
.acct-link i[data-lucide][b-w18vckflth] { width: 13px; height: 13px; }

.acct-mini[b-w18vckflth] {
    background: var(--tt-surface-0);
    border: var(--tt-border-w) solid var(--tt-line);
    color: var(--tt-ink-1);
    font: inherit;
    font-size: 12px;
    padding: 5px var(--tt-s-12);
    border-radius: var(--tt-radius-4);
    cursor: pointer;
}

.acct-mini:hover[b-w18vckflth] { background: var(--tt-surface-2); }

.acct-mini--danger[b-w18vckflth] { color: var(--tt-cta); }
.acct-mini--danger:hover[b-w18vckflth] {
    background: #fdecee;
    border-color: var(--tt-cta);
}

/* ghost-light: inverted for use on the dark hero banner */
.acct-ghost-light[b-w18vckflth] {
    background: transparent;
    border: var(--tt-border-w) solid rgba(255, 255, 255, 0.4);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: var(--tt-weight-medium);
    padding: var(--tt-s-8) var(--tt-s-16);
    border-radius: var(--tt-radius-4);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.acct-ghost-light:hover[b-w18vckflth] { background: rgba(255, 255, 255, 0.12); }
.acct-ghost-light i[data-lucide][b-w18vckflth] { width: 14px; height: 14px; }

/* ============================================================
 * 1. Billing Overview
 * ============================================================ */

/* Dark hero banner - the one heavy surface on the page */
.acct-hero[b-w18vckflth] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tt-s-24);
    flex-wrap: wrap;
    background: var(--tt-surface-inverse);
    color: #fff;
    padding: var(--tt-s-22) 26px;
}

.acct-hero__left[b-w18vckflth] {
    display: flex;
    flex-direction: column;
    gap: var(--tt-s-10);
    min-width: 0;
}

.acct-hero__plan-row[b-w18vckflth] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-12);
    flex-wrap: wrap;
}

.acct-hero__chip[b-w18vckflth] {
    display: inline-flex;
    align-items: center;
    gap: var(--tt-s-6);
    font-size: 11px;
    font-weight: var(--tt-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: var(--tt-s-4) var(--tt-s-10);
    background: var(--tt-cta);
    color: #fff;
    border-radius: var(--tt-radius-2);
}

.acct-hero__chip i[data-lucide][b-w18vckflth] { width: 12px; height: 12px; }

.acct-hero__name[b-w18vckflth] {
    font-size: 26px;
    font-weight: var(--tt-weight-medium);
    letter-spacing: -0.01em;
    color: #fff;
}

.acct-hero__price[b-w18vckflth] {
    font-family: var(--tt-font-mono, ui-monospace, monospace);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.62);
}

.acct-hero__price strong[b-w18vckflth] { color: #fff; font-weight: var(--tt-weight-semibold); }

.acct-hero__meta[b-w18vckflth] {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.72);
    display: flex;
    gap: var(--tt-s-18);
    flex-wrap: wrap;
}

.acct-hero__meta .acct-mono[b-w18vckflth] { color: #fff; }

.acct-hero__actions[b-w18vckflth] { display: flex; gap: var(--tt-s-10); flex-shrink: 0; flex-wrap: wrap; }

/* Stat tiles row */
.acct-tiles[b-w18vckflth] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: var(--tt-border-w) solid var(--tt-line);
    border-top: 0;
}

@media (max-width: 800px) {
    .acct-tiles[b-w18vckflth] { grid-template-columns: minmax(0, 1fr); }
}

.acct-tile[b-w18vckflth] {
    padding: var(--tt-s-16) var(--tt-s-20);
    display: flex;
    flex-direction: column;
    gap: var(--tt-s-4);
    border-right: var(--tt-border-w) solid var(--tt-line);
}

.acct-tile:last-child[b-w18vckflth] { border-right: 0; }

@media (max-width: 720px) {
    .acct-tile[b-w18vckflth] { border-right: 0; border-bottom: var(--tt-border-w) solid var(--tt-line); }
    .acct-tile:last-child[b-w18vckflth] { border-bottom: 0; }
}

.acct-tile__label[b-w18vckflth] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tt-ink-4);
    font-weight: var(--tt-weight-medium);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tt-s-8);
}

.acct-tile__value[b-w18vckflth] {
    font-size: 24px;
    font-weight: var(--tt-weight-medium);
    color: var(--tt-ink-1);
    letter-spacing: -0.01em;
}

.acct-tile__value--card[b-w18vckflth] {
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: var(--tt-s-8);
}

.acct-tile__value--card i[data-lucide][b-w18vckflth] { width: 18px; height: 18px; }

.acct-tile__sub[b-w18vckflth] { font-size: 12px; color: var(--tt-ink-3); }

/* ============================================================
 * 2. Membership Plans matrix
 * ============================================================ */

.acct-mx-wrap[b-w18vckflth] { overflow: visible; padding-top: var(--tt-s-10); }

/* Mobile membership view (segmented tier selector + single-tier feature list);
   hidden on desktop where the full matrix is shown instead. */
.acct-mx-mobile[b-w18vckflth] { display: none; }

/* Below 760px the 4-column matrix (min-width 680px) can't fit, so swap it for
   the stacked single-tier view. */
@media (max-width: 760px) {
    .acct-mx-wrap[b-w18vckflth]  { display: none; }
    .acct-mx-mobile[b-w18vckflth] { display: block; padding-top: var(--tt-s-10); }
}

/* segmented tier selector */
.acct-mxm-seg[b-w18vckflth] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: var(--tt-border-w) solid var(--tt-line);
    background: var(--tt-surface-1);
}

.acct-mxm-seg__btn[b-w18vckflth] {
    appearance: none;
    border: none;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
    padding: 11px var(--tt-s-4);
    border-right: var(--tt-border-w) solid var(--tt-line-soft);
    position: relative;
    text-align: center;
}

.acct-mxm-seg__btn:last-child[b-w18vckflth] { border-right: none; }

.acct-mxm-seg__btn[b-w18vckflth]::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: transparent;
}

.acct-mxm-seg__btn.is-active[b-w18vckflth] { background: var(--tt-surface-0); }
.acct-mxm-seg__btn.is-active[b-w18vckflth]::after { background: var(--tt-cta); }

.acct-mxm-seg__name[b-w18vckflth] {
    display: block;
    font-size: 10.5px;
    font-weight: var(--tt-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tt-ink-3);
    line-height: 1.15;
}

.acct-mxm-seg__btn.is-active .acct-mxm-seg__name[b-w18vckflth] { color: var(--tt-cta); }

/* small dot marking the user's current plan on its tab */
.acct-mxm-seg__btn.is-current .acct-mxm-seg__name[b-w18vckflth]::after {
    content: ' •';
    color: var(--tt-cta);
}

/* selected-tier price line */
.acct-mxm-line[b-w18vckflth] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--tt-s-12);
    margin: var(--tt-s-14) var(--tt-s-2) var(--tt-s-4);
}

.acct-mxm-sub[b-w18vckflth] { font-size: 12px; color: var(--tt-ink-4); }

.acct-mxm-price[b-w18vckflth] {
    font-size: 16px;
    font-weight: var(--tt-weight-bold);
    letter-spacing: -0.01em;
    color: var(--tt-ink-1);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.acct-mxm-price small[b-w18vckflth] {
    font-size: 11px;
    color: var(--tt-ink-4);
    font-weight: var(--tt-weight-regular);
    margin-left: var(--tt-s-2);
}

.acct-mxm-annual[b-w18vckflth] {
    font-size: 11px;
    color: var(--tt-ink-4);
    text-align: right;
    margin: 0 var(--tt-s-2) var(--tt-s-4);
}

.acct-mxm-current[b-w18vckflth] {
    display: inline-block;
    font-size: 9px;
    font-weight: var(--tt-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 9px;
    background: var(--tt-cta);
    color: #fff;
    border-radius: var(--tt-radius-2);
    margin: var(--tt-s-6) 0 0;
}

/* single-tier feature list */
.acct-mxm-feats[b-w18vckflth] {
    border: var(--tt-border-w) solid var(--tt-line);
    background: var(--tt-surface-0);
    margin-top: var(--tt-s-12);
}

.acct-mxm-feat[b-w18vckflth] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--tt-s-12);
    align-items: center;
    padding: var(--tt-s-12) var(--tt-s-16);
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
}

.acct-mxm-feat:first-child[b-w18vckflth] { border-top: none; }

.acct-mxm-feat__l[b-w18vckflth] {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.acct-mxm-feat__icon[b-w18vckflth] {
    color: var(--tt-ink-3);
    display: inline-flex;
    flex-shrink: 0;
}

.acct-mxm-feat__icon i[data-lucide][b-w18vckflth] { width: 17px; height: 17px; }

.acct-mxm-feat__name[b-w18vckflth] {
    font-size: 13.5px;
    color: var(--tt-ink-1);
    font-weight: var(--tt-weight-medium);
    display: block;
}

.acct-mxm-feat__note[b-w18vckflth] {
    font-size: 11px;
    color: var(--tt-ink-4);
    display: block;
    margin-top: 1px;
}

.acct-mxm-feat__val[b-w18vckflth] {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--tt-ink-1);
    font-weight: var(--tt-weight-medium);
    white-space: nowrap;
}

.acct-mxm-feat__val .acct-mx-yes i[data-lucide][b-w18vckflth] { width: 16px; height: 16px; }

.acct-mxm-feat__val--off[b-w18vckflth] { color: var(--tt-line); }

.acct-matrix[b-w18vckflth] {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
    border: var(--tt-border-w) solid var(--tt-line);
    background: var(--tt-surface-0);
}

.acct-matrix th[b-w18vckflth],
.acct-matrix td[b-w18vckflth] { vertical-align: middle; }

/* cap strip above tier names - carries the colored top rule */
.acct-mx-capcorner[b-w18vckflth] { padding: 0; border: 0; }

.acct-mx-cap[b-w18vckflth] {
    position: relative;
    height: 0;
    padding: 0;
    border-left: var(--tt-border-w) solid var(--tt-line-soft);
}

.acct-mx-cap.is-current[b-w18vckflth] { background: rgba(213, 0, 28, 0.04); }

.acct-mx-cap__top[b-w18vckflth] {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--tt-line);
}

.acct-mx-cap.is-top .acct-mx-cap__top[b-w18vckflth] { background: var(--tt-cta); }

.acct-mx-chip[b-w18vckflth] {
    position: absolute;
    left: 50%; bottom: var(--tt-s-22);
    transform: translateX(-50%);
    display: inline-block;
    font-size: 9px;
    font-weight: var(--tt-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 3px 9px;
    background: var(--tt-cta);
    color: #fff;
    border-radius: var(--tt-radius-2);
    box-shadow: var(--tt-shadow-glow);
}

.acct-mx-corner[b-w18vckflth] {
    text-align: left;
    padding: var(--tt-s-18);
    vertical-align: bottom;
    width: 32%;
    border-bottom: var(--tt-border-w) solid var(--tt-line);
}

.acct-mx-corner__label[b-w18vckflth] {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tt-ink-3);
    font-weight: var(--tt-weight-semibold);
    display: inline-flex;
    align-items: center;
    gap: var(--tt-s-8);
}

.acct-mx-corner__label i[data-lucide][b-w18vckflth] {
    width: 14px; height: 14px;
    color: var(--tt-cta);
}

.acct-mx-tier[b-w18vckflth] {
    position: relative;
    text-align: center;
    padding: var(--tt-s-4) var(--tt-s-10) var(--tt-s-16);
    vertical-align: top;
    border-left: var(--tt-border-w) solid var(--tt-line-soft);
    border-bottom: var(--tt-border-w) solid var(--tt-line);
}

.acct-mx-tier.is-current[b-w18vckflth] { background: rgba(213, 0, 28, 0.04); }

.acct-mx-tier__name[b-w18vckflth] {
    font-size: 12px;
    font-weight: var(--tt-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tt-ink-1);
    white-space: nowrap;
}

.acct-mx-tier.is-top .acct-mx-tier__name[b-w18vckflth] { color: var(--tt-cta); }

.acct-mx-tier__sub[b-w18vckflth] {
    font-size: 11px;
    color: var(--tt-ink-4);
    margin-top: 5px;
    line-height: 1.35;
}

.acct-mx-tier__price[b-w18vckflth] {
    font-size: 18px;
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-1);
    margin-top: var(--tt-s-10);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.acct-mx-tier__price small[b-w18vckflth] {
    font-size: 11px;
    color: var(--tt-ink-4);
    font-weight: var(--tt-weight-regular);
    margin-left: var(--tt-s-2);
    letter-spacing: 0;
}

/* feature rows */
.acct-matrix tbody tr[b-w18vckflth] { border-top: var(--tt-border-w) solid var(--tt-line-soft); }

.acct-mx-feat[b-w18vckflth] { padding: 11px var(--tt-s-18); }

.acct-mx-feat__inner[b-w18vckflth] {
    display: flex;
    align-items: center;
    gap: 13px;
}

.acct-mx-feat__icon[b-w18vckflth] {
    width: 18px; height: 18px;
    flex-shrink: 0;
    color: var(--tt-ink-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.acct-mx-feat__icon i[data-lucide][b-w18vckflth] { width: 18px; height: 18px; }

.acct-mx-feat__name[b-w18vckflth] {
    font-size: 14px;
    font-weight: var(--tt-weight-medium);
    color: var(--tt-ink-1);
    line-height: 1.2;
}

.acct-mx-feat__note[b-w18vckflth] {
    font-size: 11px;
    color: var(--tt-ink-4);
    margin-top: var(--tt-s-2);
    line-height: 1.25;
}

.acct-mx-val[b-w18vckflth] {
    text-align: center;
    padding: 11px var(--tt-s-14);
    font-size: 14px;
    color: var(--tt-ink-1);
    border-left: var(--tt-border-w) solid var(--tt-line-soft);
    font-variant-numeric: tabular-nums;
}

.acct-mx-val.is-current[b-w18vckflth] { background: rgba(213, 0, 28, 0.04); }

.acct-mx-yes[b-w18vckflth] {
    color: var(--tt-cta);
    display: inline-flex;
}

.acct-mx-yes i[data-lucide][b-w18vckflth] { width: 17px; height: 17px; }

.acct-mx-no[b-w18vckflth] { color: var(--tt-line); font-size: 16px; }

.acct-mx-word[b-w18vckflth] { color: var(--tt-ink-2); font-size: 13px; }

/* matrix footer */
.acct-mx-foot[b-w18vckflth] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tt-s-16);
    flex-wrap: wrap;
}

.acct-mx-foot__note[b-w18vckflth] {
    font-size: 13px;
    color: var(--tt-ink-3);
}

.acct-mx-foot__note strong[b-w18vckflth] { color: var(--tt-ink-1); font-weight: var(--tt-weight-semibold); }

.acct-taxnote[b-w18vckflth] {
    font-size: 12px;
    color: var(--tt-ink-4);
    display: inline-flex;
    align-items: center;
    gap: var(--tt-s-6);
    margin-top: var(--tt-s-12);
}

.acct-taxnote i[data-lucide][b-w18vckflth] { width: 13px; height: 13px; }

/* panel footer actions row */
.acct-panel-foot-actions[b-w18vckflth] {
    display: flex;
    justify-content: flex-end;
}

/* ============================================================
 * 3. Payment & Billing
 * ============================================================ */

.acct-pay[b-w18vckflth] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--tt-s-16);
}

@media (max-width: 860px) {
    .acct-pay[b-w18vckflth] { grid-template-columns: minmax(0, 1fr); }
}

.acct-block[b-w18vckflth] {
    border: var(--tt-border-w) solid var(--tt-line);
    padding: var(--tt-s-18) var(--tt-s-20);
    display: flex;
    flex-direction: column;
    gap: var(--tt-s-14);
}

.acct-block__head[b-w18vckflth] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tt-s-12);
}

.acct-block__title[b-w18vckflth] {
    font-size: 13px;
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-1);
    display: inline-flex;
    align-items: center;
    gap: var(--tt-s-8);
}

.acct-block__title i[data-lucide][b-w18vckflth] { width: 15px; height: 15px; color: var(--tt-ink-3); }

.acct-block__actions[b-w18vckflth] { display: flex; gap: var(--tt-s-8); }

/* credit-card chip */
.acct-card[b-w18vckflth] { display: flex; align-items: center; gap: var(--tt-s-14); }

.acct-card__plate[b-w18vckflth] {
    width: 56px; height: 36px;
    flex-shrink: 0;
    border: var(--tt-border-w) solid var(--tt-line);
    background: var(--tt-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.acct-card__plate[b-w18vckflth]::before {
    content: '';
    position: absolute;
    left: 7px; top: 11px;
    width: 11px; height: 9px;
    border-radius: var(--tt-radius-2);
    background: linear-gradient(135deg, #c9a24b, #e7cf86);
}

.acct-card__brand[b-w18vckflth] {
    font-family: var(--tt-font-mono, monospace);
    font-size: 8px;
    font-weight: var(--tt-weight-bold);
    letter-spacing: 0.04em;
    color: var(--tt-ink-2);
    position: absolute;
    right: 5px; bottom: var(--tt-s-4);
}

.acct-card__num[b-w18vckflth] {
    font-family: var(--tt-font-mono, monospace);
    font-size: 14px;
    color: var(--tt-ink-1);
}

.acct-card__exp[b-w18vckflth] {
    font-size: 12px;
    color: var(--tt-ink-4);
    margin-top: var(--tt-s-2);
}

/* billing address */
.acct-addr[b-w18vckflth] {
    font-size: 13px;
    color: var(--tt-ink-2);
    line-height: 1.55;
}

.acct-addr__name[b-w18vckflth] { color: var(--tt-ink-1); font-weight: var(--tt-weight-medium); }

.acct-addr__email[b-w18vckflth] {
    margin-top: var(--tt-s-4);
    font-family: var(--tt-font-mono, monospace);
    font-size: 12px;
    color: var(--tt-ink-4);
}

/* coupon strip - spans both columns */
.acct-strip[b-w18vckflth] {
    grid-column: 1 / -1;
    border: var(--tt-border-w) solid var(--tt-line);
    padding: var(--tt-s-14) var(--tt-s-20);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tt-s-16);
    flex-wrap: wrap;
}

.acct-strip__text[b-w18vckflth] { font-size: 13px; color: var(--tt-ink-3); }
.acct-strip__text strong[b-w18vckflth] { color: var(--tt-ink-1); font-weight: var(--tt-weight-semibold); }

/* ============================================================
 * 4. Payment History
 * ============================================================ */

.acct-chart[b-w18vckflth] {
    border: var(--tt-border-w) solid var(--tt-line);
    padding: var(--tt-s-18) var(--tt-s-20) var(--tt-s-12);
    margin-bottom: var(--tt-s-24);
}

.acct-chart__head[b-w18vckflth] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--tt-s-12);
    margin-bottom: var(--tt-s-16);
}

.acct-chart__title[b-w18vckflth] { font-size: 13px; font-weight: var(--tt-weight-semibold); color: var(--tt-ink-1); }

.acct-chart__total[b-w18vckflth] { font-size: 12px; color: var(--tt-ink-3); }
.acct-chart__total .acct-mono[b-w18vckflth] { color: var(--tt-ink-1); font-weight: var(--tt-weight-semibold); }

.acct-bars[b-w18vckflth] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--tt-s-8);
    align-items: end;
    height: 120px;
}

.acct-bar[b-w18vckflth] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    height: 100%;
    justify-content: flex-end;
}

.acct-bar__fill[b-w18vckflth] {
    width: 100%;
    background: var(--tt-ink-2);
    min-height: 3px;
    transition: background 120ms ease;
}

.acct-bar:hover .acct-bar__fill[b-w18vckflth] { background: var(--tt-ink-1); }
.acct-bar.is-current .acct-bar__fill[b-w18vckflth] { background: var(--tt-cta); }

.acct-bar__label[b-w18vckflth] {
    font-family: var(--tt-font-mono, monospace);
    font-size: 9px;
    color: var(--tt-ink-4);
    text-transform: uppercase;
}

.acct-bar__val[b-w18vckflth] {
    font-family: var(--tt-font-mono, monospace);
    font-size: 9px;
    color: var(--tt-ink-3);
}

/* invoice table */
.acct-invoices[b-w18vckflth] { display: flex; flex-direction: column; }

.acct-invoices__row[b-w18vckflth] {
    display: grid;
    grid-template-columns: 108px 1fr 100px 80px 28px;
    align-items: center;
    gap: var(--tt-s-16);
    padding: var(--tt-s-12) var(--tt-s-4);
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
    font-size: 13px;
}

.acct-invoices__row.is-head[b-w18vckflth] {
    border-bottom: var(--tt-border-w) solid var(--tt-ink-1);
    padding-bottom: var(--tt-s-8);
}

.acct-invoices__row.is-head span[b-w18vckflth] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tt-ink-4);
    font-weight: var(--tt-weight-medium);
}

.acct-invoices__row:last-child[b-w18vckflth] { border-bottom: 0; }

.acct-invoices__date[b-w18vckflth] {
    font-family: var(--tt-font-mono, monospace);
    font-size: 12px;
    color: var(--tt-ink-3);
}

.acct-invoices__desc[b-w18vckflth] { color: var(--tt-ink-1); min-width: 0; }

.acct-inv-id[b-w18vckflth] {
    font-family: var(--tt-font-mono, monospace);
    font-size: 11px;
    color: var(--tt-ink-4);
    margin-top: var(--tt-s-2);
}

.acct-invoices__amt[b-w18vckflth] {
    font-family: var(--tt-font-mono, monospace);
    color: var(--tt-ink-1);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.acct-col-right[b-w18vckflth] { text-align: right; }

.acct-status[b-w18vckflth] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: var(--tt-weight-medium);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.acct-status[b-w18vckflth]::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: var(--tt-radius-pill);
    background: currentColor;
}

.acct-status.is-paid[b-w18vckflth]   { color: var(--tt-success); }
.acct-status.is-due[b-w18vckflth]    { color: #ca8a04; }
.acct-status.is-refund[b-w18vckflth] { color: var(--tt-ink-4); }

.acct-dl[b-w18vckflth] {
    background: none;
    border: 0;
    padding: var(--tt-s-4);
    cursor: pointer;
    color: var(--tt-ink-4);
    display: inline-flex;
}

.acct-dl:hover[b-w18vckflth] { color: var(--tt-cta); }
.acct-dl i[data-lucide][b-w18vckflth] { width: 15px; height: 15px; }

.acct-invoices__foot[b-w18vckflth] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--tt-s-14);
    margin-top: var(--tt-s-4);
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
}

.acct-invoices__foot span[b-w18vckflth] { font-size: 12px; color: var(--tt-ink-4); }

/* Mobile: the 5-column invoice grid can't fit a phone, so restack each row
   into two lines (description + amount over date + status + download) and
   drop the now-meaningless header row. */
@media (max-width: 600px) {
    .acct-invoices__row.is-head[b-w18vckflth] { display: none; }

    .acct-invoices__row[b-w18vckflth] {
        grid-template-columns: 1fr auto auto;
        grid-template-areas:
            "desc   amount amount"
            "date   status dl";
        gap: var(--tt-s-4) var(--tt-s-12);
        align-items: center;
    }

    .acct-invoices__desc[b-w18vckflth] { grid-area: desc; }
    .acct-invoices__amt[b-w18vckflth]  { grid-area: amount; align-self: start; }
    .acct-invoices__date[b-w18vckflth] { grid-area: date; }
    .acct-status[b-w18vckflth]         { grid-area: status; justify-self: end; }
    .acct-dl[b-w18vckflth]             { grid-area: dl; justify-self: end; }

    .acct-invoices__foot[b-w18vckflth] { flex-direction: column; align-items: flex-start; gap: var(--tt-s-6); }
}

/* ============================================================
 * Modal content - the shell (overlay / card / head / foot / actions)
 * is now the shared <Modal> component. What remains is the body-content
 * layout: a vertical stack that spaces summaries, lists, and forms.
 * ============================================================ */

.acct-modal__body[b-w18vckflth] {
    display: flex;
    flex-direction: column;
    gap: var(--tt-s-10);
}

.acct-modal-error[b-w18vckflth] {
    font-size: 13px;
    color: var(--tt-primary);
    margin: 0;
}

/* ============================================================
 * Change Plan Modal - tier option rows
 * ============================================================ */

.acct-opt[b-w18vckflth] {
    display: grid;
    grid-template-columns: 20px 1fr auto;
    gap: var(--tt-s-14);
    align-items: center;
    width: 100%;
    text-align: left;
    border: var(--tt-border-w) solid var(--tt-line);
    background: var(--tt-surface-0);
    padding: 13px var(--tt-s-16);
    cursor: pointer;
    font: inherit;
    transition: border-color 120ms ease;
}

.acct-opt:hover[b-w18vckflth] { border-color: var(--tt-ink-3); }

.acct-opt.is-selected[b-w18vckflth] {
    border-color: var(--tt-ink-1);
    box-shadow: inset 3px 0 0 var(--tt-primary);
}

.acct-opt__radio[b-w18vckflth] {
    width: 18px; height: 18px;
    border-radius: var(--tt-radius-pill);
    border: 1.5px solid var(--tt-line);
    position: relative;
    background: var(--tt-surface-0);
    flex-shrink: 0;
}

.acct-opt.is-selected .acct-opt__radio[b-w18vckflth] { border-color: var(--tt-primary); }

.acct-opt.is-selected .acct-opt__radio[b-w18vckflth]::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: var(--tt-radius-pill);
    background: var(--tt-primary);
}

.acct-opt__info[b-w18vckflth] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.acct-opt__name[b-w18vckflth] {
    font-size: 14px;
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-1);
    display: flex;
    align-items: center;
    gap: var(--tt-s-8);
}

.acct-opt__cur[b-w18vckflth] {
    font-size: 9px;
    font-weight: var(--tt-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 1px var(--tt-s-6);
    background: var(--tt-ink-1);
    color: var(--tt-surface-0);
    border-radius: var(--tt-radius-2);
}

.acct-opt__sub[b-w18vckflth] { font-size: 12px; color: var(--tt-ink-4); }

.acct-opt__limits[b-w18vckflth] {
    font-size: 11px;
    color: var(--tt-ink-3);
    font-family: var(--tt-font-mono, monospace);
}

.acct-opt__price[b-w18vckflth] {
    text-align: right;
    font-size: 16px;
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-1);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.acct-opt__price small[b-w18vckflth] {
    font-size: 11px;
    color: var(--tt-ink-4);
    font-weight: var(--tt-weight-regular);
}

/* proration / change summary strip */
.acct-summary[b-w18vckflth] {
    background: var(--tt-surface-2);
    border: var(--tt-border-w) solid var(--tt-line);
    padding: var(--tt-s-12) var(--tt-s-14);
    font-size: 13px;
    color: var(--tt-ink-2);
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: var(--tt-s-10);
}

.acct-summary > i[data-lucide][b-w18vckflth] {
    width: 16px; height: 16px;
    color: var(--tt-primary);
    flex-shrink: 0;
    margin-top: var(--tt-s-2);
}

.acct-summary.is-down > i[data-lucide][b-w18vckflth] { color: var(--tt-ink-3); }
.acct-summary strong[b-w18vckflth] { color: var(--tt-ink-1); }

/* ============================================================
 * Cancel Modal - "what happens" list
 * ============================================================ */

.acct-happens[b-w18vckflth] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.acct-happens li[b-w18vckflth] {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: var(--tt-s-12);
    font-size: 13px;
    color: var(--tt-ink-2);
    line-height: 1.45;
}

.acct-happens li i[data-lucide][b-w18vckflth] { width: 16px; height: 16px; color: var(--tt-ink-3); margin-top: var(--tt-s-2); }
.acct-happens li strong[b-w18vckflth] { color: var(--tt-ink-1); }

/* ============================================================
 * Success / confirmation state (both modals)
 * ============================================================ */

.acct-success[b-w18vckflth] {
    padding: var(--tt-s-36) var(--tt-s-28) 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--tt-s-12);
}

.acct-success__mark[b-w18vckflth] {
    width: 52px; height: 52px;
    border-radius: var(--tt-radius-pill);
    background: var(--tt-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.acct-success__mark.is-neutral[b-w18vckflth] { background: var(--tt-ink-1); }
.acct-success__mark i[data-lucide][b-w18vckflth] { width: 26px; height: 26px; }

.acct-success__title[b-w18vckflth] { font-size: 18px; font-weight: var(--tt-weight-semibold); color: var(--tt-ink-1); }

.acct-success__text[b-w18vckflth] {
    font-size: 13px;
    color: var(--tt-ink-3);
    max-width: 38ch;
    line-height: 1.5;
}

.acct-success__text strong[b-w18vckflth] { color: var(--tt-ink-1); }

/* ============================================================
 * Edit form fields (card + billing modals)
 * ============================================================ */

.acct-form[b-w18vckflth] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--tt-s-16);
}

.acct-fieldset[b-w18vckflth] { display: flex; flex-direction: column; gap: var(--tt-s-6); min-width: 0; }
.acct-fieldset--full[b-w18vckflth] { grid-column: 1 / -1; }

.acct-flabel[b-w18vckflth] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tt-ink-4);
    font-weight: var(--tt-weight-medium);
    white-space: nowrap;
}

.acct-flabel em[b-w18vckflth] {
    float: right;
    font-style: normal;
    text-transform: none;
    letter-spacing: 0;
    font-weight: var(--tt-weight-regular);
    color: var(--tt-ink-4);
}

.acct-input[b-w18vckflth] {
    font: inherit;
    font-size: 14px;
    padding: 9px var(--tt-s-12);
    background: var(--tt-surface-0);
    border: var(--tt-border-w) solid var(--tt-line);
    border-radius: var(--tt-radius-4);
    color: var(--tt-ink-1);
    width: 100%;
    box-sizing: border-box;
}

.acct-input:focus[b-w18vckflth] {
    outline: none;
    border-color: var(--tt-ink-1);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.acct-input[b-w18vckflth]::placeholder { color: var(--tt-ink-4); }

.acct-input--mono[b-w18vckflth] { font-family: var(--tt-font-mono, monospace); letter-spacing: 0.04em; }
.acct-input--sm[b-w18vckflth]   { width: 64px; text-align: center; }

select.acct-input[b-w18vckflth] {
    appearance: none;
    cursor: pointer;
    padding-right: 34px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238e9196' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.acct-numwrap[b-w18vckflth] { position: relative; }

.acct-numwrap__brand[b-w18vckflth] {
    position: absolute;
    right: var(--tt-s-12); top: 50%;
    transform: translateY(-50%);
    font-family: var(--tt-font-mono, monospace);
    font-size: 10px;
    font-weight: var(--tt-weight-bold);
    letter-spacing: 0.06em;
    color: var(--tt-ink-3);
}

.acct-input--num[b-w18vckflth] { padding-right: 60px; }

.acct-exp[b-w18vckflth] { display: flex; align-items: center; gap: var(--tt-s-8); }

.acct-exp__sep[b-w18vckflth] { color: var(--tt-ink-4); }

.acct-formnote[b-w18vckflth] {
    grid-column: 1 / -1;
    font-size: 11px;
    color: var(--tt-ink-4);
    display: flex;
    align-items: flex-start;
    gap: 7px;
    line-height: 1.45;
}

.acct-formnote i[data-lucide][b-w18vckflth] { width: 13px; height: 13px; margin-top: 1px; flex-shrink: 0; }

/* ============================================================
 * Billing cycle toggle (Panel 2 matrix + Change Plan modal)
 * ============================================================ */

.acct-billing-toggle[b-w18vckflth] {
    display: inline-flex;
    border: var(--tt-border-w) solid var(--tt-line);
    border-radius: var(--tt-radius-4);
    overflow: hidden;
}

.acct-btog[b-w18vckflth] {
    background: var(--tt-surface-0);
    border: 0;
    padding: 7px var(--tt-s-16);
    font: inherit;
    font-size: 13px;
    font-weight: var(--tt-weight-medium);
    color: var(--tt-ink-3);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    transition: background 120ms ease, color 120ms ease;
}

.acct-btog:hover[b-w18vckflth] { background: var(--tt-surface-2); color: var(--tt-ink-1); }

.acct-btog.is-active[b-w18vckflth] {
    background: var(--tt-ink-1);
    color: var(--tt-surface-0);
}

.acct-btog.is-active:hover[b-w18vckflth] { background: var(--tt-ink-1); }

.acct-btog__badge[b-w18vckflth] {
    font-size: 10px;
    font-weight: var(--tt-weight-semibold);
    letter-spacing: 0.04em;
    padding: var(--tt-s-2) var(--tt-s-6);
    border-radius: var(--tt-radius-2);
    background: rgba(19, 196, 125, 0.15);
    color: #0a8f57;
}

.acct-btog.is-active .acct-btog__badge[b-w18vckflth] {
    background: rgba(19, 196, 125, 0.22);
    color: #6dffc0;
}

/* annual price sub-note under matrix tier header */
.acct-mx-tier__annual[b-w18vckflth] {
    font-size: 10px;
    color: var(--tt-ink-4);
    font-weight: var(--tt-weight-regular);
    letter-spacing: 0;
    margin-top: 3px;
}

/* ── Membership usage meters ("where you stand") ─────────────────────── */
.acct-usage[b-w18vckflth] {
    margin-bottom: var(--tt-s-16);
}

.acct-usage__title[b-w18vckflth] {
    display: block;
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-2);
    margin-bottom: var(--tt-s-8);
}

.acct-usage__label[b-w18vckflth] {
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-1);
}

/* The scale header sits over the bars and names what the ticks mean. Its columns match the four
   tier segments below, so a mark lines up with the segment it labels. */
/* One grid for the axis and every row: label gutter · the bar · the count. Two separate grids
   drift the moment the count column changes width, which is exactly what put the tier marks off
   their own ticks. */
.acct-usage__grid[b-w18vckflth] {
    display: grid;
    grid-template-columns: 5rem 1fr auto;
    align-items: center;
    column-gap: var(--tt-s-10);
    row-gap: var(--tt-s-8);
}

.acct-usage__label[b-w18vckflth] {
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-1);
}

/* The scale header sits over the bars and names what the ticks mean. Its columns match the four
   tier segments below, so a mark lines up with the segment it labels. */
/* Track follows the design-system bar treatment (page surface + soft border, tick radius). */
.acct-usage__bar[b-w18vckflth] {
    height: 8px;
    border-radius: var(--tt-radius-2);
    background: var(--tt-surface-1);
    border: 1px solid var(--tt-line-soft);
    overflow: hidden;
}

.acct-usage__fill[b-w18vckflth] {
    display: block;
    height: 100%;
    background: var(--tt-primary);
}

/* No ceiling. Drawn full so the row never reads as empty, but muted so it does not read as
   "at the limit" either - there is no limit to be at. */
.acct-usage__fill.is-unbounded[b-w18vckflth] {
    background: var(--tt-line);
}

/* Past the plan's cap. The bar clamps at 100%, so tone is the only thing left to say it. */
.acct-usage__fill.is-over[b-w18vckflth] {
    background: var(--tt-status-warn-border);
}

/* The one row holding the plan up. Quiet - it is an observation, not a warning. */
.acct-usage__note[b-w18vckflth] {
    margin: var(--tt-s-10) 0 0;
    font-size: var(--tt-text-xs);
    line-height: 1.5;
    color: var(--tt-ink-3);
}

.acct-usage__note strong[b-w18vckflth] { color: var(--tt-ink-1); font-weight: var(--tt-weight-semibold); }

/* Number and tier name each get their own track: right-aligned digits so 3 and 11 line up on
   their units, left-aligned names so Podium and Pole Position start together. Right-aligning the
   pair as one string left both ragged. */
.acct-usage__count[b-w18vckflth] {
    display: grid;
    grid-template-columns: 2.5ch auto;
    align-items: baseline;
    column-gap: var(--tt-s-6);
    font-size: var(--tt-text-xs);
    white-space: nowrap;
}

.acct-usage__num[b-w18vckflth] {
    text-align: right;
    color: var(--tt-ink-1);
    font-variant-numeric: tabular-nums;
}

.acct-usage__of[b-w18vckflth] {
    color: var(--tt-ink-2);
}

/* Over the plan's cap. Warn-coloured text, no pill or icon: it is a fact about the account, not
   an error the driver has to clear. */
.acct-usage__note--over[b-w18vckflth] { color: var(--tt-status-warn-text); }
.acct-usage__note--over strong[b-w18vckflth] { color: var(--tt-status-warn-text); }
/* /Pages/Activity.razor.rz.scp.css */
/* ── Page wrapper ─────────────────────────────────────────────────────── */
/* Shell: .tt-page + --flows in app.css (#400) - this page is one DataTablePanel. */

/* Root + toolbar surface → <DataTablePanel StickyToolbar>. */

/* ── Toolbar contents ─────────────────────────────────────────────────── */
.cg-spacer[b-9kmqk2k1pa] {
    flex: 1;
}

.cg-btn-sm[b-9kmqk2k1pa] {
    padding: 7px var(--tt-s-12);
    font-size: 13px;
    gap: 5px;
}

.cg-btn-sm:disabled[b-9kmqk2k1pa] {
    opacity: 0.4;
    cursor: not-allowed;
}

.cg-btn-danger[b-9kmqk2k1pa] {
    background: var(--tt-danger);
    border-color: var(--tt-danger);
    color: #fff;
}

.cg-btn-danger:hover:not(:disabled)[b-9kmqk2k1pa] {
    filter: brightness(0.88);
}

/* ── Chip group ───────────────────────────────────────────────────────── */
.act-chip-group[b-9kmqk2k1pa] {
    display: inline-flex;
    align-items: center;
    gap: var(--tt-s-4);
}

/* ── Entity sub-label ─────────────────────────────────────────────────── */
.act-entity-sub[b-9kmqk2k1pa] {
    font-size: 0.7rem;
    color: var(--tt-ink-3);
    margin-top: var(--tt-s-2);
}

/* ── Grid table (surface + scroll owned by DataTablePanel) ────────────── */
.cg-table[b-9kmqk2k1pa] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: var(--tt-ink-1);
}

.cg-table thead th[b-9kmqk2k1pa] {
    text-align: left;
    background: var(--tt-surface-0);
    color: var(--tt-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 11px;
    font-weight: var(--tt-weight-semibold);
    padding: var(--tt-s-12) var(--tt-s-12);
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
    white-space: nowrap;
    vertical-align: middle;
}

.cg-table tbody td[b-9kmqk2k1pa] {
    padding: var(--tt-s-10) var(--tt-s-12);
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
    color: var(--tt-ink-1);
    vertical-align: middle;
}

.cg-table tbody tr:last-child td[b-9kmqk2k1pa] {
    border-bottom: none;
}

/* ── Row states ───────────────────────────────────────────────────────── */
.cg-row:hover td[b-9kmqk2k1pa] {
    background: var(--tt-surface-2);
}

/* ── Empty state ──────────────────────────────────────────────────────── */
.cg-empty[b-9kmqk2k1pa] {
    padding: var(--tt-s-36) var(--tt-s-14);
    text-align: center;
    color: var(--tt-ink-3);
    font-style: italic;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .cg-table[b-9kmqk2k1pa] {
        font-size: 12px;
    }

    .cg-table thead th[b-9kmqk2k1pa],
    .cg-table tbody td[b-9kmqk2k1pa] {
        padding: var(--tt-s-8) 7px;
    }
}

/* ── Mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 800px) {
    /* Drop the Entity type column (2nd) - the activity label already conveys
       the entity type, so hiding it reclaims horizontal space on phones.
       Loading/empty rows use a single colspan cell (1st child) and are
       unaffected. */
    .cg-table thead th:nth-child(2)[b-9kmqk2k1pa],
    .cg-table tbody td:nth-child(2)[b-9kmqk2k1pa] {
        display: none;
    }
}
/* /Pages/AdminFeeds.razor.rz.scp.css */
/* ============================================================
 * Admin — Discovery feeds roster (create / maintain / monitor, #110).
 * ============================================================ */

/* Shell: .tt-page + --flows in app.css (#400) - this page is one DataTablePanel, like
   Activity. It used to be 1180px AND centred while Activity was unconstrained; #400 called
   that out as "same component, two answers - one of them is wrong". */

.afeeds__muted[b-365jqjo9nh] { color: var(--tt-ink-4); font-size: var(--tt-text-sm); }

/* Stat strip retired → <StatStrip>/<StatTile> component. */

/* Surface + toolbar strip → <DataTablePanel>. */

/* Filter chips sit on the right of the toolbar; search + New-feed lead on the left. */
.afeeds__chips[b-365jqjo9nh] { display: flex; gap: var(--tt-s-6); flex-wrap: wrap; align-items: center; margin-left: auto; }
/* chip buttons → <Chip> component */

/* Compact primary CTA that lives inline in the toolbar, right of the search box. */
.afeeds__new[b-365jqjo9nh] {
    flex: none;
    height: 34px;
    padding: 0 var(--tt-s-12);
    font-size: var(--tt-text-sm);
    white-space: nowrap;
}

.afeeds__search[b-365jqjo9nh] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-8);
    width: 240px;
    max-width: 100%;
    padding: var(--tt-s-6) var(--tt-s-10);
    background: var(--tt-surface-0);
    border: var(--tt-border-w) solid var(--tt-line);
    border-radius: var(--tt-radius-4);
    color: var(--tt-ink-4);
}

.afeeds__search-input[b-365jqjo9nh] { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: var(--tt-text-sm); color: var(--tt-ink-1); }

/* Table */
.afeeds__table[b-365jqjo9nh] { min-width: 900px; }   /* scroll handled by DataTablePanel body */

.afeeds__thead[b-365jqjo9nh],
.afeeds__row[b-365jqjo9nh] {
    display: grid;
    grid-template-columns: minmax(200px, 1.6fr) 96px 120px 66px 66px 72px 132px;
    align-items: center;
    gap: var(--tt-s-12);
    padding: var(--tt-s-10) var(--tt-s-16);
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
}

.afeeds__thead[b-365jqjo9nh] {
    background: var(--tt-surface-1);
    font-size: 10.5px;
    font-weight: var(--tt-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tt-ink-4);
}

.afeeds__c[b-365jqjo9nh] { text-align: center; }
.afeeds__r[b-365jqjo9nh] { text-align: right; }

.afeeds__row[b-365jqjo9nh] { font-size: var(--tt-text-sm); color: var(--tt-ink-2); }

.afeeds__feed[b-365jqjo9nh] { display: flex; align-items: center; gap: var(--tt-s-10); min-width: 0; }

.afeeds__feed-icon[b-365jqjo9nh] {
    flex: 0 0 30px;
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--tt-radius-4);
    background: var(--tt-surface-1);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    color: var(--tt-ink-4);
}

.afeeds__feed-txt[b-365jqjo9nh] { min-width: 0; }
.afeeds__feed-name[b-365jqjo9nh] { font-size: 13.5px; font-weight: var(--tt-weight-semibold); color: var(--tt-ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.afeeds__feed-sub[b-365jqjo9nh] { font-size: 11px; color: var(--tt-ink-4); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.afeeds__sync[b-365jqjo9nh] { font-size: var(--tt-text-xs); color: var(--tt-ink-2); }
.afeeds__sync-next[b-365jqjo9nh] { font-size: 11px; color: var(--tt-ink-4); margin-top: 1px; }

.afeeds__fails[b-365jqjo9nh] { font-weight: var(--tt-weight-semibold); color: var(--tt-cta); }
.afeeds__muted-c[b-365jqjo9nh] { color: var(--tt-ink-4); }

.afeeds__actions[b-365jqjo9nh] { display: flex; gap: var(--tt-s-6); justify-content: flex-end; }

.afeeds__icon-btn[b-365jqjo9nh] {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border: var(--tt-border-w) solid var(--tt-line-soft);
    background: var(--tt-surface-0);
    border-radius: var(--tt-radius-4);
    color: var(--tt-ink-3);
    cursor: pointer;
}

.afeeds__icon-btn:hover:not(:disabled)[b-365jqjo9nh] { background: var(--tt-surface-1); }
.afeeds__icon-btn:disabled[b-365jqjo9nh] { opacity: 0.4; cursor: not-allowed; }
.afeeds__icon-btn--danger[b-365jqjo9nh] { color: var(--tt-cta); }

.afeeds__empty[b-365jqjo9nh] { padding: var(--tt-s-32) var(--tt-s-16); text-align: center; font-size: var(--tt-text-sm); color: var(--tt-ink-4); border-top: var(--tt-border-w) solid var(--tt-line-soft); }

.afeeds__note[b-365jqjo9nh] {
    margin: var(--tt-s-12) 0 0;
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-4);
}

/* Feed requests queue (#122) */
.afeeds__reqs[b-365jqjo9nh] {
    margin-top: var(--tt-s-20);
    padding: var(--tt-s-16);
}

.afeeds__reqs-head[b-365jqjo9nh] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-10);
    margin-bottom: var(--tt-s-12);
}

.afeeds__reqs-title[b-365jqjo9nh] {
    margin: 0;
    font-size: var(--tt-text-md);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-2);
}

/* reqs-badge → <Badge Variant="warn"> */

.afeeds__req[b-365jqjo9nh] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-12);
    padding: var(--tt-s-12) 0;
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
}

.afeeds__req-body[b-365jqjo9nh] {
    flex: 1;
    min-width: 0;
}

.afeeds__req-text[b-365jqjo9nh] {
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-2);
}

.afeeds__req-meta[b-365jqjo9nh] {
    margin-top: var(--tt-s-2);
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-4);
}

/* Health pill → <Badge> (variant via HealthVariant). */

/* Feed form (New / Edit modal) */
.afeeds-form[b-365jqjo9nh] { display: flex; flex-direction: column; gap: var(--tt-s-14); }
.afeeds-form__row[b-365jqjo9nh] { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tt-s-14); }
.afeeds-form__field[b-365jqjo9nh] { display: flex; flex-direction: column; }
.afeeds-form__label[b-365jqjo9nh] { font-size: var(--tt-text-xs); font-weight: var(--tt-weight-semibold); color: var(--tt-ink-3); margin-bottom: var(--tt-s-4); }

.afeeds-form__input[b-365jqjo9nh] {
    width: 100%;
    box-sizing: border-box;
    padding: var(--tt-s-8) var(--tt-s-10);
    font-family: inherit;
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-1);
    background: var(--tt-surface-0);
    border: var(--tt-border-w) solid var(--tt-line);
    border-radius: var(--tt-radius-4);
    outline: none;
}

.afeeds-form__toggle[b-365jqjo9nh] { display: flex; align-items: center; gap: var(--tt-s-8); font-size: var(--tt-text-sm); color: var(--tt-ink-2); cursor: default; }

.afeeds-form__switch[b-365jqjo9nh] {
    position: relative;
    width: 40px; height: 22px;
    flex-shrink: 0;
    border: none;
    border-radius: var(--tt-radius-pill);
    background: var(--tt-line);
    cursor: pointer;
    padding: 0;
}

.afeeds-form__switch.is-on[b-365jqjo9nh] { background: var(--tt-status-ok); }

.afeeds-form__knob[b-365jqjo9nh] {
    position: absolute;
    top: 3px; left: 3px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--tt-surface-0);
    transition: left 120ms ease;
}

.afeeds-form__switch.is-on .afeeds-form__knob[b-365jqjo9nh] { left: 21px; }
/* /Pages/Administration.razor.rz.scp.css */
/* Shell: .tt-page in app.css (#400). */

.admin__section[b-vu94i8urfw] {
    margin-bottom: var(--tt-s-32);
}

.admin__claims[b-vu94i8urfw] {
    width: 100%;
    border-collapse: collapse;
    background: var(--tt-surface-0);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-12);
    overflow: hidden;
}

.admin__claims-th[b-vu94i8urfw] {
    text-align: left;
    padding: var(--tt-s-12) var(--tt-s-16);
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tt-tracking-wide);
    color: var(--tt-ink-4);
    background: var(--tt-surface-1);
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
}

.admin__claims-row:not(:last-child)[b-vu94i8urfw] {
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
}

.admin__claims-td[b-vu94i8urfw] {
    padding: var(--tt-s-12) var(--tt-s-16);
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-1);
    word-break: break-all;
}

.admin__claims-td--type[b-vu94i8urfw] {
    color: var(--tt-ink-3);
    white-space: nowrap;
    width: 1%;
    padding-right: var(--tt-s-24);
}

/* User-accounts table (#208): the opaque provider UserId scans better monospaced + muted. */
.admin__accounts-id[b-vu94i8urfw] {
    font-family: var(--tt-font-mono);
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-3);
}

/* Selectable account rows — the selection drives the profile + activity sections (#208). */
.admin__accounts-row[b-vu94i8urfw] {
    cursor: pointer;
}

.admin__accounts-row:hover[b-vu94i8urfw] {
    background: var(--tt-surface-1);
}

.admin__accounts-row.is-selected[b-vu94i8urfw] {
    background: var(--tt-surface-2);
    box-shadow: inset 3px 0 0 var(--tt-primary);
}

/* Secondary line inside a cell (e.g. an entity's sub-label). */
.admin__cell-sub[b-vu94i8urfw] {
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-3);
}

/* Activity toolbar. Page-scoped because the cg- and hr- classes this page used are scoped to
   Activity.razor / ConsumablesGrid.razor and never reached it. */
.admin__toolbar[b-vu94i8urfw] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--tt-s-8);
    margin-bottom: var(--tt-s-12);
}

/* Collapsible section heading. The button sits inside the h2 and inherits its type, so the
   heading looks unchanged; the chevron rotates open (mirrors the Events month disclosure). */
.admin__disclosure[b-vu94i8urfw] {
    display: inline-flex;
    align-items: center;
    gap: var(--tt-s-8);
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.admin__disclosure-chev[b-vu94i8urfw] {
    flex-shrink: 0;
    color: var(--tt-ink-3);
    transition: transform 200ms ease;
}

.admin__disclosure-chev.is-open[b-vu94i8urfw] {
    transform: rotate(90deg);
}

/* One step down from the global .tt-btn (type base -> sm, padding s-8/s-16 -> s-6/s-12). */
.admin__btn-sm[b-vu94i8urfw] {
    padding: var(--tt-s-6) var(--tt-s-12);
    font-size: var(--tt-text-sm);
}

.admin__filter-select[b-vu94i8urfw] {
    padding: var(--tt-s-6) var(--tt-s-10);
    font-family: inherit;
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-1);
    background: var(--tt-surface-0);
    border: var(--tt-border-w) solid var(--tt-line);
    border-radius: var(--tt-radius-4);
}

/* Sign-ups by source (#536): the date pair wears the filter control's dress; the count columns
   read as numbers - right-aligned, tabular figures - and the total row is set off by a hairline. */
.admin__filter-input[b-vu94i8urfw] {
    padding: var(--tt-s-6) var(--tt-s-10);
    font-family: inherit;
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-1);
    background: var(--tt-surface-0);
    border: var(--tt-border-w) solid var(--tt-line);
    border-radius: var(--tt-radius-4);
}

.admin__range[b-vu94i8urfw] {
    display: inline-flex;
    align-items: center;
    gap: var(--tt-s-6);
}

.admin__claims-th--num[b-vu94i8urfw],
.admin__claims-td--num[b-vu94i8urfw] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.admin__claims-row--total .admin__claims-td[b-vu94i8urfw] {
    font-weight: var(--tt-weight-semibold);
    border-top: var(--tt-border-w) solid var(--tt-line);
}

.admin__more[b-vu94i8urfw] {
    padding-top: var(--tt-s-10);
}
/* /Pages/Car.razor.rz.scp.css */
/* ============================================================
 * Car page - per-car consumable slot layout
 * ============================================================ */

/* The prototype's shell — the 1080px column this surface was drawn against, and what the Perform
   pages now use. Left-aligned rather than centred, because the prototype's shell is
   `margin:0` and every Perform page already sits at x=0; centring this one alone made it the odd
   page out. The app-wide rule is #400. */
/* Shell: .tt-page in app.css (#400). */

.car-page__consumable-rows[b-pgtr6te16p] {
    display: flex;
    flex-direction: column;
    gap: var(--tt-s-8);
    margin-bottom: var(--tt-s-16);
}

.car-page__saveerror[b-pgtr6te16p] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-12);
    padding: var(--tt-s-8) var(--tt-s-16);
    margin-bottom: var(--tt-s-16);
    background: var(--tt-danger-soft);
    color: var(--tt-danger-strong);
    border-radius: var(--tt-radius-8);
    font-size: var(--tt-text-sm);
}

.car-page__saveerror button[b-pgtr6te16p] {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    color: inherit;
    line-height: 1;
    padding: 0 var(--tt-s-4);
}

/* ── Page header ─────────────────────────────────────────── */


/* The switch between the two views of the car. It sits under the title rather than beside it:
   the title names the car, and both views are that same car. */
.car-page__views[b-pgtr6te16p] {
    margin: calc(var(--tt-s-20) * -1) 0 var(--tt-s-20);
}

/* The setup view is the same panel it is on Trackside, so it gets the same width.

   There it is one of band 2's two columns: the 1080px shell less its 28px gutters is 1024, less the
   16px gap between the columns, halved — 504px, which is what it measures. Sized here rather than
   left to fill the page, because the drawing inside positions its cards as a percentage of its box:
   at full width they walk away from the car they annotate.

   #400 will tokenise the shell; when it does, this should read off that token instead of repeating
   the arithmetic. */
/* The width comes from .tt-panels now — the equal-share grid, which at 1048px of content gives
   516px a side and wraps to one column below 796px on its own.

   It used to hand-roll its half as calc((1080px - 2 * var(--tt-s-28) - var(--tt-s-16)) / 2), which
   is 504px: a 28px page gutter that has not existed since #400 moved .tt-page to 16px. So the panel
   sat 12px narrower than the sanctioned share, and the space beside it was empty rather than
   shared. The design system is explicit that there is no half — a panel is full width, or it
   shares. This one shares, with Consumables. */
.car-page__setup[b-pgtr6te16p] {
    /* Two panels, one row. No declarations of its own — the grid supplies everything. */
}

/* ── Stage ───────────────────────────────────────────────── */
.tt-carpage[b-pgtr6te16p] {
    display: flex;
    flex-direction: column;
    gap: var(--tt-s-14);
}

/* ── Three-column slot row ───────────────────────────────── */
.tt-slotrow[b-pgtr6te16p] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--tt-s-14);
}

/* ── Middle band - car centered, panels overlaid ─────────── */
.tt-carpage__middle[b-pgtr6te16p] {
    position: relative;
    min-height: 340px;
    margin: var(--tt-s-4) 0;
    isolation: isolate;
}

.tt-carpage__caroutline[b-pgtr6te16p] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    pointer-events: none;
}

.tt-carpage__caroutline img[b-pgtr6te16p] {
    max-width: 92%;
    max-height: 300px;
    user-select: none;
    pointer-events: none;
    opacity: 0.88;
}

/* EXPERIMENT (revert via tag bookmark-before-car-photo): 2:1 center crop, 300px
   tall, run through the B&W #car-lineart edge-detection filter, with all four
   edges feathered to transparent so the line art dissolves into the page
   background (no hard border, no black outline). */
.tt-carpage__carphoto[b-pgtr6te16p] {
    width: min(92%, 800px);       /* grow with the band, but cap width at 800px */
    height: 340px;                /* cover crops top/bottom to this height */
    overflow: hidden;
    line-height: 0;

    /* Two crossed gradients intersected => soft feather on every edge. */
    -webkit-mask-image:
        linear-gradient(to right,  transparent 0%, #000 16%, #000 84%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right,  transparent 0%, #000 16%, #000 84%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
    mask-composite: intersect;
}

.tt-carpage__carphoto img[b-pgtr6te16p] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    filter: url(#car-lineart);
}

/* Preset (CarImage >= 1): bundled image shown as-is (no filter/crop/fade) but
   scaled to fill the band box. object-fit: contain scales the source up or down
   to fit without cropping, so small sources upscale to the target size. */
.tt-carpage__carpreset[b-pgtr6te16p] {
    width: min(92%, 800px);
    height: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tt-carpage__carpreset img[b-pgtr6te16p] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 1;
}

/* Panel wrappers - one slot-column wide, anchored to the top
 * of the middle band. Width = (100% - 2 gaps) / 3. */
.tt-carpage__panel[b-pgtr6te16p] {
    position: absolute;
    top: 0;
    width: calc((100% - 28px) / 3);
    z-index: 3;
}

.tt-carpage__panel--front[b-pgtr6te16p] { left: 0; }
.tt-carpage__panel--back[b-pgtr6te16p]  { right: 0; bottom: 0; overflow: hidden; display: flex; flex-direction: column; }

/* ── Slot card ───────────────────────────────────────────── */
.tt-slotcard[b-pgtr6te16p] {
    background: var(--tt-surface-0);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-12);
    box-shadow: var(--tt-shadow-sm);
    display: flex;
    flex-direction: column;
    min-height: 110px;
    transition: border-color 140ms, background 140ms;
}

.tt-slotcard__body[b-pgtr6te16p] {
    padding: var(--tt-s-8);
    display: flex;
    flex-direction: column;
    gap: var(--tt-s-6);
    flex: 1;
}

.tt-slotcard__empty[b-pgtr6te16p] {
    color: var(--tt-ink-4);
    font-size: 12px;
    font-style: italic;
    padding: var(--tt-s-20) var(--tt-s-6);
    text-align: center;
}

.tt-slotcard.is-drop-ready[b-pgtr6te16p] {
    border-color: rgba(var(--tt-primary-rgb), 0.45);
    background: rgba(var(--tt-primary-rgb), 0.04);
}

.tt-slotcard.is-drop-target[b-pgtr6te16p] {
    border-color: var(--tt-primary);
    background: rgba(var(--tt-primary-rgb), 0.10);
    box-shadow: var(--tt-shadow-focus-tight);
}

.tt-slotcard__droppad[b-pgtr6te16p] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--tt-s-4);
    color: var(--tt-ink-4);
    font-size: 12px;
    font-weight: var(--tt-weight-medium);
    letter-spacing: 0.02em;
    padding: var(--tt-s-12);
}

.tt-slotcard.is-drop-target .tt-slotcard__droppad[b-pgtr6te16p] {
    color: var(--tt-primary);
}

.tt-slotcard__chips[b-pgtr6te16p] {
    display: flex;
    flex-direction: column;
    gap: var(--tt-s-6);
}

/* ── Slot item row (view mode) ───────────────────────────── */
.tt-slotitem[b-pgtr6te16p] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-10);
    padding: var(--tt-s-8) var(--tt-s-10);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    background: var(--tt-surface-2);
    border-radius: var(--tt-radius-8);
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    width: 100%;
    transition: background 120ms, border-color 120ms;
}

.tt-slotitem:hover[b-pgtr6te16p] {
    border-color: var(--tt-ink-3);
    background: var(--tt-surface-0);
}

.tt-slotitem.is-selected[b-pgtr6te16p] {
    border-color: var(--tt-primary);
    background: var(--tt-surface-0);
    box-shadow: var(--tt-shadow-focus-tight);
}

.tt-slotitem.is-empty[b-pgtr6te16p] {
    cursor: default;
    opacity: 0.6;
}

.tt-slotitem.is-empty:hover[b-pgtr6te16p] {
    background: var(--tt-surface-2);
    border-color: var(--tt-line-soft);
}

.tt-slotitem__icon[b-pgtr6te16p] {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    object-fit: contain;
}

.tt-slotitem__body[b-pgtr6te16p] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--tt-s-2);
}

.tt-slotitem__type[b-pgtr6te16p] {
    font-size: 10px;
    color: var(--tt-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: var(--tt-weight-semibold);
    line-height: 1.2;
}

.tt-slotitem__desc[b-pgtr6te16p] {
    font-size: 13px;
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* ── Life-remaining pill ─────────────────────────────────── */
.tt-pct[b-pgtr6te16p] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 3px 9px;
    border-radius: var(--tt-radius-pill);
    font-size: 11px;
    font-weight: var(--tt-weight-bold);
    color: #fff;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tt-pct.cl-ok[b-pgtr6te16p]   { background: #13c47d; }
.tt-pct.cl-warn[b-pgtr6te16p] { background: #ca8a04; }
.tt-pct.cl-crit[b-pgtr6te16p] { background: #ee0606; }

.tt-pct.is-empty[b-pgtr6te16p] {
    background: transparent;
    color: var(--tt-ink-4);
    border: var(--tt-border-w) dashed var(--tt-line);
}

.tt-pct--lg[b-pgtr6te16p] {
    min-width: 60px;
    padding: var(--tt-s-6) var(--tt-s-12);
    font-size: 14px;
}

/* ── Detail panel ────────────────────────────────────────── */
.tt-carpage__detail[b-pgtr6te16p] {
    background: var(--tt-surface-0);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-12);
    box-shadow: var(--tt-shadow-sm);
    overflow: hidden;
    transition: background 140ms;
}

.tt-carpage__detail.is-empty:not(.is-open)[b-pgtr6te16p] {
    background: transparent;
    box-shadow: none;
    border-color: var(--tt-line-soft);
}

/* Tab (always-visible strip) */
.tt-carpage__detail-tab[b-pgtr6te16p] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-10);
    padding: var(--tt-s-10) var(--tt-s-14);
}

/* Eyebrow + title stack on the left; the % chip is pushed to the right. */
.tt-carpage__detail-tab-text[b-pgtr6te16p] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--tt-s-2);
}

.tt-carpage__detail-tab-eyebrow[b-pgtr6te16p] {
    font-size: 10.5px;
    font-weight: var(--tt-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tt-ink-4);
    line-height: 1.2;
}

.tt-carpage__detail-tab-title[b-pgtr6te16p] {
    font-size: 14px;
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-1);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tt-carpage__detail-tab-hint[b-pgtr6te16p] {
    font-size: 11.5px;
    color: var(--tt-ink-3);
    line-height: 1.35;
}

/* Drawer - hidden until is-open */
.tt-carpage__detail-drawer[b-pgtr6te16p] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.tt-carpage__detail.is-open .tt-carpage__detail-drawer[b-pgtr6te16p] {
    max-height: 600px;
}

.tt-carpage__detail-drawer-inner[b-pgtr6te16p] {
    padding: var(--tt-s-12) var(--tt-s-16) var(--tt-s-16);
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
    display: flex;
    flex-direction: column;
    gap: var(--tt-s-12);
}

/* Eyebrow inside drawer (car year · make model) */
.tt-carpage__detail-eyebrow[b-pgtr6te16p] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--tt-ink-4);
    font-weight: var(--tt-weight-semibold);
}

/* Head row: icon + type/name + pill + cost */
.tt-carpage__detail-head[b-pgtr6te16p] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-10);
}

.tt-carpage__detail-head img[b-pgtr6te16p] {
    width: 38px;
    height: 38px;
    object-fit: contain;
    flex: 0 0 38px;
}

.tt-carpage__detail-headtext[b-pgtr6te16p] {
    flex: 1;
    min-width: 0;
}

.tt-carpage__detail-type[b-pgtr6te16p] {
    font-size: 11px;
    color: var(--tt-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: var(--tt-weight-semibold);
    line-height: 1.2;
}

.tt-carpage__detail-head h3[b-pgtr6te16p] {
    margin: var(--tt-s-2) 0 0;
    font-size: 15px;
    font-weight: var(--tt-weight-semibold);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--tt-ink-1);
    border: none;
    padding: 0;
}

.tt-carpage__detail-cost[b-pgtr6te16p] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: 0 0 auto;
}

.tt-carpage__detail-cost-total[b-pgtr6te16p] {
    font-size: 15px;
    font-weight: var(--tt-weight-bold);
    color: var(--tt-ink-1);
    line-height: 1.1;
}

.tt-carpage__detail-cost-split[b-pgtr6te16p] {
    font-size: 10px;
    color: var(--tt-ink-3);
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* Stat rows */
.tt-carpage__detail-rows[b-pgtr6te16p] {
    display: flex;
    flex-direction: column;
    gap: var(--tt-s-8);
}

/* Actions row */
.tt-carpage__detail-actions[b-pgtr6te16p] {
    display: flex;
    gap: var(--tt-s-4);
    margin-top: var(--tt-s-2);
}

.tt-carpage__detail-actions .tt-btn[b-pgtr6te16p] {
    flex: 1;
    justify-content: center;
    border-radius: 0;
}

.tt-carpage__detail-actions .tt-btn:first-child[b-pgtr6te16p] {
    flex: 2;
}

.tt-btn-dark[b-pgtr6te16p] {
    background: var(--tt-ink-1);
    border-color: var(--tt-ink-1);
    color: var(--tt-surface-0);
}

.tt-btn-dark:hover[b-pgtr6te16p] { background: var(--tt-ink-2); border-color: var(--tt-ink-2); }

/* ── Layout panel ────────────────────────────────────────── */
.tt-layoutpanel[b-pgtr6te16p] {
    background: transparent;
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-12);
    overflow: hidden;
    transition: background 140ms, border-color 140ms, box-shadow 140ms;
}

.tt-layoutpanel.is-open[b-pgtr6te16p],
.tt-layoutpanel.is-configuring[b-pgtr6te16p] {
    background: var(--tt-surface-0);
    box-shadow: var(--tt-shadow-sm);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.tt-layoutpanel.is-drop-ready[b-pgtr6te16p] {
    border-style: dashed;
    border-color: rgba(var(--tt-primary-rgb), 0.45);
}

.tt-layoutpanel.is-drop-target[b-pgtr6te16p] {
    border-style: dashed;
    border-color: var(--tt-primary);
    background: rgba(var(--tt-primary-rgb), 0.06);
    box-shadow: var(--tt-shadow-focus-tight);
}

/* Tab button (clickable trigger) */
.tt-layoutpanel__tab[b-pgtr6te16p] {
    appearance: none;
    background: transparent;
    border: 0;
    text-align: left;
    font: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: var(--tt-s-2);
    padding: var(--tt-s-10) var(--tt-s-14);
    color: var(--tt-ink-1);
    outline: none;
    width: 100%;
}

.tt-layoutpanel__tab:hover[b-pgtr6te16p] {
    background: rgba(var(--tt-primary-rgb), 0.04);
    color: var(--tt-primary);
}

.tt-layoutpanel.is-configuring .tt-layoutpanel__tab[b-pgtr6te16p],
.tt-layoutpanel.is-open .tt-layoutpanel__tab[b-pgtr6te16p] {
    padding: 0;
    pointer-events: none;
}

.tt-layoutpanel.is-configuring .tt-layoutpanel__tab-eyebrow[b-pgtr6te16p],
.tt-layoutpanel.is-configuring .tt-layoutpanel__tab-hint[b-pgtr6te16p],
.tt-layoutpanel.is-open .tt-layoutpanel__tab-eyebrow[b-pgtr6te16p],
.tt-layoutpanel.is-open .tt-layoutpanel__tab-hint[b-pgtr6te16p] {
    display: none;
}

.tt-layoutpanel__tab-eyebrow[b-pgtr6te16p] {
    font-size: 10.5px;
    font-weight: var(--tt-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tt-ink-4);
    line-height: 1.25;
}

.tt-layoutpanel__tab-hint[b-pgtr6te16p] {
    font-size: 11.5px;
    color: var(--tt-ink-3);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Drawer */
.tt-layoutpanel__drawer[b-pgtr6te16p] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.tt-layoutpanel.is-open .tt-layoutpanel__drawer[b-pgtr6te16p],
.tt-layoutpanel.is-configuring .tt-layoutpanel__drawer[b-pgtr6te16p] {
    max-height: 600px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.tt-layoutpanel__drawer-inner[b-pgtr6te16p] {
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
}

.tt-layoutpanel__cfgbody[b-pgtr6te16p] {
    display: flex;
    flex-direction: column;
    gap: var(--tt-s-10);
    padding: var(--tt-s-12) var(--tt-s-14) var(--tt-s-14);
}

/* Pool of unassigned type chips */
.tt-layoutpanel__pool[b-pgtr6te16p] {
    display: flex;
    flex-direction: column;
    gap: var(--tt-s-6);
    min-height: 70px;
}

.tt-layoutpanel__pool-empty[b-pgtr6te16p] {
    font-size: 12px;
    color: var(--tt-ink-4);
    font-style: italic;
    padding: var(--tt-s-14) var(--tt-s-6);
    text-align: center;
}

/* TEMP: suppress original slot items to preview mock layout */
.tt-slotitem[b-pgtr6te16p] { display: none; }

.tt-layoutpanel__saveerror[b-pgtr6te16p] {
    font-size: var(--tt-text-xs);
    color: var(--tt-danger);
    padding: var(--tt-s-4) 0;
}

.tt-layoutpanel__actions[b-pgtr6te16p] {
    display: flex;
    gap: var(--tt-s-8);
    justify-content: flex-end;
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
    padding-top: var(--tt-s-10);
}

/* ── Draggable type chip ─────────────────────────────────── */
.tt-typechip[b-pgtr6te16p] {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--tt-s-6);
    padding: var(--tt-s-6) var(--tt-s-10) var(--tt-s-6) var(--tt-s-6);
    background: var(--tt-surface-0);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-8);
    font-size: 12px;
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-1);
    cursor: grab;
    user-select: none;
    transition: border-color 120ms, box-shadow 120ms;
}

.tt-typechip.is-insert-before[b-pgtr6te16p]::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--tt-primary);
    border-radius: var(--tt-radius-2);
}

.tt-typechip:hover[b-pgtr6te16p] {
    border-color: var(--tt-primary);
    box-shadow: 0 1px 4px rgba(var(--tt-primary-rgb), 0.18);
}

.tt-typechip:active[b-pgtr6te16p] {
    cursor: grabbing;
}

.tt-typechip.is-placed[b-pgtr6te16p] {
    background: rgba(var(--tt-primary-rgb), 0.06);
    border-color: rgba(var(--tt-primary-rgb), 0.30);
}

.tt-typechip__grip[b-pgtr6te16p] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--tt-ink-4);
    flex: 0 0 12px;
}

.tt-typechip img[b-pgtr6te16p] {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex: 0 0 22px;
}

.tt-typechip__name[b-pgtr6te16p] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Small-screen layout ─────────────────────────────────── */
/* Drop to the stacked mobile layout only at 800px and below, matching the
   Dashboard's mobile threshold. The desktop 3-column composition holds up
   through the tablet band (801–1200px); stacking there only stretched the
   cards full-width and wasted the horizontal space. */
@media (max-width: 800px) {
    .tt-carpage__middle[b-pgtr6te16p] {
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: var(--tt-s-12);
    }

    .tt-carpage__caroutline[b-pgtr6te16p] {
        position: static;
        inset: auto;
        order: 2;
    }

    .tt-carpage__caroutline img[b-pgtr6te16p] {
        max-height: 160px;
    }

    .tt-carpage__panel[b-pgtr6te16p] {
        position: static;
        width: 100%;
    }

    .tt-carpage__panel--front[b-pgtr6te16p] { order: 1; }
    .tt-carpage__panel--back[b-pgtr6te16p]  { order: 3; }

    .tt-slotrow[b-pgtr6te16p] {
        grid-template-columns: 1fr;
        gap: var(--tt-s-8);
    }
}

/* ── Tablet (801–1200px) ─────────────────────────────────────
   The 3-column desktop composition is kept, but a single slot-column
   (~247px at the low end) is too narrow for the open Selected-item
   detail drawer: its Swap / Edit / Cancel action row overflows the card.
   When the drawer is open, give the front panel a width floor so the
   buttons fit. min-width only raises the width at the narrow end of the
   band; wider tablets already exceed it and are left untouched. The
   panel overlays a little more of the (decorative) car art while open. */
@media (min-width: 801px) and (max-width: 1200px) {
    .tt-carpage__panel--front:has(.tt-carpage__detail.is-open)[b-pgtr6te16p],
    .tt-carpage__panel--back:has(.tt-layoutpanel.is-open)[b-pgtr6te16p],
    .tt-carpage__panel--back:has(.tt-layoutpanel.is-configuring)[b-pgtr6te16p] {
        min-width: 345px;
    }
}

/* ── ConsumableRow "status" variant mock ─────────────────── */
.cons-row-mock[b-pgtr6te16p] {
    display: grid;
    grid-template-columns: 28px 1fr 36px;
    align-items: center;
    gap: var(--tt-s-6);
    padding: var(--tt-s-6) var(--tt-s-8);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-8);
    background: var(--tt-surface-2);
    cursor: pointer;
    transition: box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}

.cons-row-mock:hover[b-pgtr6te16p] {
    background: var(--tt-surface-0);
    border-color: var(--tt-ink-3);
    box-shadow: var(--tt-shadow-md);
}

.cons-row-mock.is-selected[b-pgtr6te16p] {
    background: var(--tt-surface-0);
    border-color: var(--tt-primary);
    box-shadow: var(--tt-shadow-focus-tight);
}

.cons-row-mock__thumb[b-pgtr6te16p] {
    width: 28px;
    height: 28px;
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-4);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.cons-row-mock__thumb img[b-pgtr6te16p] {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.cons-row-mock__body[b-pgtr6te16p] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cons-row-mock__name[b-pgtr6te16p] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--tt-s-4);
    font-size: 10px;
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-1);
    overflow: hidden;
}

.cons-row-mock__name > span:first-child[b-pgtr6te16p] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cons-row-mock__life[b-pgtr6te16p] {
    font-size: 10px;
    font-weight: var(--tt-weight-regular);
    color: var(--tt-ink-4);
    white-space: nowrap;
    flex-shrink: 0;
}

.cons-row-mock__bar[b-pgtr6te16p] {
    position: relative;
    height: 5px;
    background: var(--tt-surface-2);
    border-radius: var(--tt-radius-2);
    overflow: hidden;
}

.cons-row-mock__seg[b-pgtr6te16p] {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: var(--tt-radius-2);
}

.cons-row-mock__seg--ok[b-pgtr6te16p]   { background: var(--tt-status-ok); }
.cons-row-mock__seg--warn[b-pgtr6te16p] { background: var(--tt-status-warn); }
.cons-row-mock__seg--crit[b-pgtr6te16p] { background: var(--tt-status-crit); }

.cons-row-mock__val[b-pgtr6te16p] {
    font-size: 11px;
    font-weight: var(--tt-weight-bold);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.cons-row-mock__val.cl-ok[b-pgtr6te16p]   { color: var(--tt-ink-2); }
.cons-row-mock__val.cl-warn[b-pgtr6te16p] { color: var(--tt-status-warn-text); }
.cons-row-mock__val.cl-crit[b-pgtr6te16p] { color: var(--tt-status-crit); }
/* /Pages/Coaching.razor.rz.scp.css */
/* Coaching — one day's feedback (#357). Ported from the design prototype; every value below is
   that prototype's, expressed in --tt-* tokens. */

/* Shell: .tt-page in app.css (#400).

   This used to declare 48px of side padding and call it load-bearing, because PageHeader's back
   button outdented itself by margin-left:-48px and needed a gutter to outdent INTO - this page
   once rendered the button clipped by the viewport edge for exactly that reason. The coupling is
   gone: the chevron is inline, the shell runs a 16px gutter, and no page has to reserve room for
   a component's negative margin any more. */

.perf__empty[b-r089d7uxdd] {
    padding: var(--tt-s-24) 0;
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-3);
}

/* "This page is about one day, so you reach it from that day." Sits above the header because it
   explains the absence of a picker, which is the first thing a driver looks for. */
.coach__whence[b-r089d7uxdd] {
    margin-bottom: var(--tt-s-14);
    font-size: var(--tt-text-xs);
    line-height: 1.45;
    color: var(--tt-ink-4);
}

/* ── Band headings ──────────────────────────────────────────────────────────────────────────
   Not PageHeader and not Panel: these are the page's three movements, and the prototype gives
   them a rule rather than a card so the panels beneath keep their own weight. */
/* The prototype says 26px above; the spacing scale goes 24 then 28, so this snaps to 24 rather
   than hardcoding an off-scale value. Called out because it is a real, if small, departure. */
.coach__band[b-r089d7uxdd] {
    margin: var(--tt-s-24) 0 var(--tt-s-14);
    padding-bottom: var(--tt-s-6);
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-bold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tt-ink-2);
}

.coach__band-lede[b-r089d7uxdd] {
    margin: calc(var(--tt-s-8) * -1) 0 var(--tt-s-14);
    font-size: var(--tt-text-xs);
    line-height: 1.5;
    color: var(--tt-ink-4);
    text-wrap: pretty;
}

/* ── Recording ──────────────────────────────────────────────────────────────────────────── */
.coach__act[b-r089d7uxdd] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-10);
    padding-bottom: var(--tt-s-12);
}

.coach__act-hint[b-r089d7uxdd] {
    flex: 1;
    min-width: 0;
    font-size: var(--tt-text-xs);
    line-height: 1.5;
    color: var(--tt-ink-3);
}

/* ── A note ─────────────────────────────────────────────────────────────────────────────── */
.coach__note[b-r089d7uxdd] {
    padding: var(--tt-s-12) 0;
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
}

.coach__note-head[b-r089d7uxdd] {
    display: flex;
    align-items: baseline;
    gap: var(--tt-s-10);
    flex-wrap: wrap;
}

.coach__note-who[b-r089d7uxdd] {
    font-size: var(--tt-text-sm);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-1);
}

.coach__note-where[b-r089d7uxdd] {
    flex: 1;
    min-width: 0;
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-4);
}

.coach__note-edit[b-r089d7uxdd] {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-size: var(--tt-text-xs);
    color: var(--tt-cta);
    cursor: pointer;
}

.coach__note-edit:hover[b-r089d7uxdd] { opacity: 0.7; }

/* THE WORDS. Deliberately the largest thing in the row — the note is a quotation, and the
   metadata around it exists to qualify it rather than to compete with it. */
.coach__note-said[b-r089d7uxdd] {
    margin: var(--tt-s-6) 0 0;
    font-size: var(--tt-text-base);
    line-height: 1.5;
    color: var(--tt-ink-2);
    text-wrap: pretty;
}

.coach__note-foot[b-r089d7uxdd] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-12);
    flex-wrap: wrap;
    margin-top: var(--tt-s-8);
}

.coach__note-goal[b-r089d7uxdd] {
    flex: 1;
    min-width: 200px;
    font-size: var(--tt-text-xs);
    line-height: 1.5;
    color: var(--tt-ink-4);
    text-wrap: pretty;
}

.coach__note-open[b-r089d7uxdd] {
    flex: 1;
    min-width: 180px;
    font-size: var(--tt-text-xs);
    line-height: 1.5;
    color: var(--tt-ink-3);
}

.coach__promote[b-r089d7uxdd] { flex: none; }

/* ── Empty and elsewhere ────────────────────────────────────────────────────────────────── */
.coach__empty[b-r089d7uxdd] {
    padding: var(--tt-s-14) var(--tt-s-16);
    border: var(--tt-border-w) dashed var(--tt-line);
    background: var(--tt-surface-1);
    border-radius: var(--tt-radius-4);
    font-size: var(--tt-text-sm);
    line-height: 1.55;
    color: var(--tt-ink-3);
    text-wrap: pretty;
}

.coach__elsewhere[b-r089d7uxdd] {
    margin: var(--tt-s-14) 0 0;
    padding-top: var(--tt-s-10);
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
    font-size: var(--tt-text-xs);
    line-height: 1.5;
    color: var(--tt-ink-4);
}

/* ── The long game ──────────────────────────────────────────────────────────────────────── */
.coach__goal[b-r089d7uxdd] {
    padding: var(--tt-s-12) 0;
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
}

.coach__goal:first-child[b-r089d7uxdd] { border-top: none; }

.coach__goal-head[b-r089d7uxdd] {
    display: flex;
    align-items: baseline;
    gap: var(--tt-s-10);
    flex-wrap: wrap;
}

.coach__goal-obj[b-r089d7uxdd] {
    flex: 1;
    min-width: 200px;
    font-size: var(--tt-text-base);
    line-height: 1.4;
    color: var(--tt-ink-1);
}

/* The evidence line. Quiet, because it is a collection of things the driver already said rather
   than a verdict the app is handing down. */
.coach__goal-ev[b-r089d7uxdd] {
    margin: var(--tt-s-8) 0 0;
    font-size: var(--tt-text-xs);
    line-height: 1.55;
    color: var(--tt-ink-3);
    text-wrap: pretty;
}

.coach__goal-foot[b-r089d7uxdd] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-14);
    flex-wrap: wrap;
}

.coach__goal-spacer[b-r089d7uxdd] { flex: 1; }

.coach__settled-toggle[b-r089d7uxdd] {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-size: var(--tt-text-xs);
    color: var(--tt-cta);
    cursor: pointer;
    text-align: left;
}

.coach__settled-toggle:hover[b-r089d7uxdd] { opacity: 0.7; }

.coach__settled[b-r089d7uxdd] {
    display: flex;
    align-items: baseline;
    gap: var(--tt-s-10);
    margin-top: var(--tt-s-8);
    padding: var(--tt-s-6) 0;
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
}

.coach__settled-obj[b-r089d7uxdd] {
    flex: 1;
    min-width: 0;
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-3);
}

.coach__settled-out[b-r089d7uxdd] {
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-4);
}

.coach__caveat[b-r089d7uxdd] {
    margin-top: var(--tt-s-22);
    padding-top: var(--tt-s-12);
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
    font-size: var(--tt-text-xs);
    line-height: 1.55;
    color: var(--tt-ink-4);
    text-wrap: pretty;
}

@media (max-width: 800px) {
    /* The promote button drops under its own line rather than squeezing the sentence beside it. */
    .coach__note-open[b-r089d7uxdd],
    .coach__note-goal[b-r089d7uxdd] { min-width: 100%; }

    /* Same for the recorder: at 390px the hint was folding to four lines beside the button. It
       reads as a caption under it instead, which is what it is. */
    .coach__act[b-r089d7uxdd] {
        flex-wrap: wrap;
        gap: var(--tt-s-8);
    }

    .coach__act-hint[b-r089d7uxdd] { min-width: 100%; order: 2; }
}

/* ── Send it on (#358/#359) ──────────────────────────────────────────────────────────────────
   Two panels side by side, because they are two mechanisms with no state in between: an account
   holder gets a real, revocable grant; everybody else gets a link that expires. Putting them in
   one list would imply a shared middle ground the design removed on purpose. */
.coach__share[b-r089d7uxdd] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tt-s-16);
    align-items: flex-start;
}

/* ::deep, because the children are <Panel> COMPONENTS and Blazor stamps this sheet's scope
   attribute only on elements this page owns. Without it the rule silently does not apply — the
   panels resolve to flex:0 1 auto, size to their content and stack. Third time this trap has come
   up in the Perform work; SessionRow.razor.css carries the same note. */
.coach__share[b-r089d7uxdd]  .tt-panel {
    flex: 1 1 380px;
    min-width: 0;
}

.coach__share-note[b-r089d7uxdd] {
    margin: var(--tt-s-12) 0 0;
    font-size: var(--tt-text-xs);
    line-height: 1.5;
    color: var(--tt-ink-4);
    text-wrap: pretty;
}

/* ── A person ───────────────────────────────────────────────────────────────────────────── */
.coach__person[b-r089d7uxdd] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-10);
    padding: var(--tt-s-8) 0;
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
}

.coach__person-av[b-r089d7uxdd] {
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--tt-primary);
    color: var(--tt-surface-0);
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
}

/* Not shared with yet: present, but visibly not lit. The prototype draws the same distinction. */
.coach__person-av.is-dormant[b-r089d7uxdd] { background: var(--tt-ink-4); }

.coach__person-name[b-r089d7uxdd] {
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-2);
}

.coach__person-state[b-r089d7uxdd] {
    flex: 1;
    min-width: 0;
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-4);
}

.coach__person-act[b-r089d7uxdd] { flex: none; }

/* ── The link ───────────────────────────────────────────────────────────────────────────── */
.coach__link[b-r089d7uxdd] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-8);
}

/* Selectable, and allowed to overflow into an ellipsis rather than wrapping: a token is 43
   characters of noise, and wrapping it makes the panel about the URL rather than the act. */
.coach__link-url[b-r089d7uxdd] {
    flex: 1;
    min-width: 0;
    min-height: 32px;
    display: flex;
    align-items: center;
    padding: 0 var(--tt-s-10);
    background: var(--tt-surface-1);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-4);
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    user-select: all;
}

.coach__link-copy[b-r089d7uxdd] { flex: none; }

.coach__link-expiry[b-r089d7uxdd],
.coach__link-progress[b-r089d7uxdd] {
    margin: var(--tt-s-8) 0 0;
    font-size: var(--tt-text-xs);
    line-height: 1.5;
    color: var(--tt-ink-4);
}

.coach__link-progress[b-r089d7uxdd] {
    padding-top: var(--tt-s-8);
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
    color: var(--tt-ink-3);
}

/* Warn, not danger: an expired link is the system working as promised, not a fault. */
.coach__link-dead[b-r089d7uxdd] { color: var(--tt-status-warn-text); }

.coach__scopes-lbl[b-r089d7uxdd] {
    margin: var(--tt-s-14) 0 var(--tt-s-8);
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tt-ink-4);
}

.coach__invite[b-r089d7uxdd] {
    margin-top: var(--tt-s-14);
    padding-top: var(--tt-s-12);
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
}

.coach__invite-row[b-r089d7uxdd] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-8);
}

.coach__invite-send[b-r089d7uxdd] { flex: none; }

/* An anchor cannot be disabled, so it is made inert rather than merely dimmed — a mailto: with
   no address would open an empty mail window, which is worse than nothing happening. */
.coach__invite-send.is-disabled[b-r089d7uxdd] {
    opacity: 0.45;
    pointer-events: none;
}
/* /Pages/Consumables.razor.rz.scp.css */
.consumables[b-30ri3g8zgw] {
    padding: var(--tt-s-16);
}

.tt-page-error[b-30ri3g8zgw] {
    font-size: 13px;
    color: var(--tt-danger);
    margin: 0 0 var(--tt-s-12);
}
/* /Pages/Events.razor.rz.scp.css */
/* ============================================================
 * Events page - list view + log-event form
 * ============================================================ */

/* Shell: .tt-page + --flows in app.css (#400) - the list is a flowing set of event
   rows, not a column of panels. */

/* ── Display toggles ───────────────────────────────────────── */

/* Title row: heading fills the width, primary action pinned to the right so
   its position is fixed regardless of the filter controls below. */

.events__toggles[b-x2mmx6iw8m] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-10);
    margin-bottom: var(--tt-s-22);
    flex-wrap: wrap;
}

.events__toggle[b-x2mmx6iw8m] {
    display: inline-flex;
    align-items: center;
    gap: var(--tt-s-8);
    padding: var(--tt-s-6) var(--tt-s-4);
    border: 0;
    background: transparent;
    font-size: var(--tt-text-sm);
    cursor: pointer;
    user-select: none;
    color: var(--tt-ink-2);
}

.events__toggle input[b-x2mmx6iw8m] { accent-color: var(--tt-ink-1); margin: 0; }

.events__toggle-count[b-x2mmx6iw8m] {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: var(--tt-tracking-wide);
    color: var(--tt-ink-4);
    font-weight: var(--tt-weight-semibold);
}

.events__toggle--active .events__toggle-count[b-x2mmx6iw8m] { color: var(--tt-ink-1); }

.events__new-btn[b-x2mmx6iw8m] {
    display: inline-flex;
    align-items: center;
    gap: var(--tt-s-6);
    flex: 0 0 auto;
    padding: 9px var(--tt-s-20);
    background: var(--tt-ink-1);
    color: var(--tt-surface-0);
    border: none;
    font-family: inherit;
    font-size: var(--tt-text-base);
    font-weight: var(--tt-weight-medium);
    cursor: pointer;
    transition: opacity 120ms;
}

.events__new-btn:hover[b-x2mmx6iw8m] { opacity: 0.88; }

/* ── Car filter (chip strip + popover) ─────────────────────── */

.ev-car-filter[b-x2mmx6iw8m] {
    display: inline-flex;
    align-items: stretch;
    border: var(--tt-border-w) solid var(--tt-line-soft);
    background: var(--tt-surface-0);
    position: relative;
}

.ev-car-filter__chip[b-x2mmx6iw8m] {
    display: inline-flex;
    align-items: center;
    gap: var(--tt-s-6);
    padding: 0 var(--tt-s-8) 0 var(--tt-s-10);
    border-right: var(--tt-border-w) solid var(--tt-line-soft);
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-1);
    font-weight: var(--tt-weight-medium);
    white-space: nowrap;
}

.ev-car-filter__remove[b-x2mmx6iw8m] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--tt-ink-3);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background 100ms, color 100ms;
}

.ev-car-filter__remove:hover[b-x2mmx6iw8m] {
    background: var(--tt-surface-2);
    color: var(--tt-ink-1);
}

.ev-car-filter__trigger[b-x2mmx6iw8m] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: var(--tt-s-6) var(--tt-s-10);
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-2);
    cursor: pointer;
    transition: background 100ms;
    white-space: nowrap;
}

.ev-car-filter__trigger:hover[b-x2mmx6iw8m] { background: var(--tt-surface-1); }
.ev-car-filter__trigger svg[b-x2mmx6iw8m] { opacity: 0.5; }

.ev-car-filter__popover[b-x2mmx6iw8m] {
    position: absolute;
    top: calc(100% + var(--tt-s-4));
    left: 0;
    min-width: 200px;
    background: var(--tt-surface-0);
    border: var(--tt-border-w) solid var(--tt-line);
    box-shadow: var(--tt-shadow-lg);
    z-index: 200;
}

.ev-car-filter__pop-title[b-x2mmx6iw8m] {
    padding: 9px var(--tt-s-12) var(--tt-s-6);
    font-size: 10px;
    font-weight: var(--tt-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--tt-ink-3);
}

.ev-car-filter__opt[b-x2mmx6iw8m] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-10);
    width: 100%;
    padding: 9px var(--tt-s-12);
    background: transparent;
    border: none;
    cursor: pointer;
    font: inherit;
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-1);
    text-align: left;
    transition: background 100ms;
}

.ev-car-filter__opt:hover[b-x2mmx6iw8m] { background: var(--tt-surface-1); }

.ev-car-filter__check[b-x2mmx6iw8m] {
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--tt-line);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 100ms, border-color 100ms;
}

.ev-car-filter__opt.is-on .ev-car-filter__check[b-x2mmx6iw8m] {
    background: var(--tt-ink-1);
    border-color: var(--tt-ink-1);
    color: var(--tt-surface-0);
}

.ev-car-filter__done[b-x2mmx6iw8m] {
    display: block;
    width: 100%;
    padding: var(--tt-s-10) var(--tt-s-12);
    background: var(--tt-ink-1);
    color: var(--tt-surface-0);
    border: none;
    font: inherit;
    font-size: 11px;
    font-weight: var(--tt-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    cursor: pointer;
    transition: opacity 100ms;
    margin-top: var(--tt-s-2);
}

.ev-car-filter__done:hover[b-x2mmx6iw8m] { opacity: 0.88; }

/* ── Month section ─────────────────────────────────────────── */

.events__month[b-x2mmx6iw8m] { margin-bottom: 25px; }

.events__month-head[b-x2mmx6iw8m] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-8);
    width: 100%;
    padding: var(--tt-s-14) 0;
    font-size: 11px;
    font-weight: var(--tt-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--tt-ink-3);
    border: none;
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
    background: transparent;
    font-family: inherit;
    margin-bottom: var(--tt-s-16);
    cursor: pointer;
    text-align: left;
    transition: color 120ms;
}

.events__month-head:hover[b-x2mmx6iw8m] { color: var(--tt-ink-1); }

.events__month-chev[b-x2mmx6iw8m] {
    flex-shrink: 0;
    transition: transform 200ms ease;
}

.events__month-chev--open[b-x2mmx6iw8m] { transform: rotate(90deg); }

.events__month-count[b-x2mmx6iw8m] {
    color: var(--tt-ink-4);
    font-weight: var(--tt-weight-medium);
    margin-left: auto;
}

/* ── Horizontal rail ───────────────────────────────────────── */

.events__rail[b-x2mmx6iw8m] {
    display: flex;
    flex-direction: row;
    gap: var(--tt-s-16);
    align-items: flex-start;
    overflow-x: auto;
    overflow-y: visible;
    padding: var(--tt-s-16) var(--tt-s-4) var(--tt-s-16);
    margin: 0 -4px;
    scroll-snap-type: x proximity;
}

.events__rail[b-x2mmx6iw8m]::-webkit-scrollbar { height: 8px; }
.events__rail[b-x2mmx6iw8m]::-webkit-scrollbar-thumb {
    background: var(--tt-line-soft);
    border-radius: var(--tt-radius-4);
}
.events__rail[b-x2mmx6iw8m]::-webkit-scrollbar-track { background: transparent; }

.events__rail > *[b-x2mmx6iw8m] { scroll-snap-align: start; }

/* ── Empty state ───────────────────────────────────────────── */

.events__empty[b-x2mmx6iw8m] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--tt-s-12);
    padding: var(--tt-s-48) 0;
    max-width: 480px;
}

.events__empty-icon[b-x2mmx6iw8m] { color: var(--tt-ink-4); }

.events__empty-msg[b-x2mmx6iw8m] {
    font-size: var(--tt-text-lg);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-1);
    margin: 0;
}

.events__empty-sub[b-x2mmx6iw8m] {
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-3);
    line-height: var(--tt-leading-normal);
    margin: 0;
}

/* ═══ Event detail view ════════════════════════════════════ */

.ev-detail[b-x2mmx6iw8m] {
}

/* ── Header ────────────────────────────────────────────────── */

.ev-detail__head[b-x2mmx6iw8m] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-12);
    margin-bottom: var(--tt-s-20);
    flex-wrap: wrap;
}

.ev-detail__back[b-x2mmx6iw8m] {
    background: none;
    border: var(--tt-border-w) solid var(--tt-line-soft);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--tt-ink-2);
    flex-shrink: 0;
    transition: background 120ms;
}

.ev-detail__back:hover[b-x2mmx6iw8m] { background: var(--tt-surface-1); }

.ev-detail__title[b-x2mmx6iw8m] {
    margin: 0;
    flex: 1;
}

.ev-detail__head-meta[b-x2mmx6iw8m] {
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-3);
    white-space: nowrap;
}

.ev-detail__delete-btn[b-x2mmx6iw8m] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: var(--tt-s-6) var(--tt-s-12);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-4);
    background: none;
    color: var(--tt-ink-3);
    font-size: var(--tt-text-sm);
    cursor: pointer;
    transition: border-color 120ms, color 120ms;
    flex-shrink: 0;
}

.ev-detail__delete-btn:hover[b-x2mmx6iw8m] {
    border-color: var(--tt-danger);
    color: var(--tt-danger);
}

/* Edit a completed event in place - neutral ghost matching the delete button anatomy */
.ev-detail__edit-btn[b-x2mmx6iw8m] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: var(--tt-s-6) var(--tt-s-12);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-4);
    background: none;
    color: var(--tt-ink-3);
    font-size: var(--tt-text-sm);
    cursor: pointer;
    transition: border-color 120ms, color 120ms;
    flex-shrink: 0;
}

.ev-detail__edit-btn:hover[b-x2mmx6iw8m] {
    border-color: var(--tt-ink-1);
    color: var(--tt-ink-1);
}

/* Inline consumable swap affordance (live editor impact rows) */
.lp-impact__srow[b-x2mmx6iw8m] {
    position: relative;
}

/* Overlays the 36x36 consumable thumbnail; dark scrim so the icon reads over the image
   (same overlay pattern as the EventCard status pill). Reveals on row hover. */
.lp-impact__swap[b-x2mmx6iw8m] {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #fff;
    background: rgba(14, 23, 42, 0.72);
    border: none;
    border-radius: var(--tt-radius-4);
    cursor: pointer;
    opacity: 0;
    transition: opacity 120ms, background 120ms;
}

.lp-impact__srow:hover .lp-impact__swap[b-x2mmx6iw8m],
.lp-impact__swap:focus-visible[b-x2mmx6iw8m] {
    opacity: 1;
}

.lp-impact__swap:hover[b-x2mmx6iw8m] {
    background: rgba(14, 23, 42, 0.88);
}

/* Per-session "consumables used" corrector trigger (shown in edit mode) */
.v1-laps__cons[b-x2mmx6iw8m] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0 0 var(--tt-s-6) 44px;
    padding: 2px var(--tt-s-6);
    background: none;
    border: none;
    color: var(--tt-ink-4);
    font-size: 11px;
    font-weight: var(--tt-weight-medium);
    cursor: pointer;
    transition: color 120ms;
}

.v1-laps__cons:hover[b-x2mmx6iw8m] {
    color: var(--tt-primary);
}

.ev-detail__delete-confirm[b-x2mmx6iw8m] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-10);
    flex-wrap: wrap;
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-2);
}

.ev-detail__delete-confirm-yes[b-x2mmx6iw8m] {
    padding: 5px var(--tt-s-12);
    border: none;
    border-radius: var(--tt-radius-4);
    background: var(--tt-danger);
    color: #fff;
    font-size: var(--tt-text-sm);
    font-weight: var(--tt-weight-medium);
    cursor: pointer;
    white-space: nowrap;
}

.ev-detail__delete-confirm-yes:disabled[b-x2mmx6iw8m] { opacity: 0.6; cursor: not-allowed; }

.ev-detail__delete-confirm-cancel[b-x2mmx6iw8m] {
    padding: 5px var(--tt-s-12);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-4);
    background: none;
    color: var(--tt-ink-2);
    font-size: var(--tt-text-sm);
    cursor: pointer;
    white-space: nowrap;
}

.ev-detail__delete-confirm-cancel:disabled[b-x2mmx6iw8m] { opacity: 0.6; cursor: not-allowed; }

/* ── Hero ──────────────────────────────────────────────────── */

.ev-detail__hero[b-x2mmx6iw8m] {
    position: relative;
    height: 180px;
    overflow: hidden;
    background-color: var(--tt-ink-1);
}

.ev-detail__hero-img[b-x2mmx6iw8m] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.55);
}

.ev-detail__hero[b-x2mmx6iw8m]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.55) 100%);
    pointer-events: none;
}

.ev-detail__hero-img--blank[b-x2mmx6iw8m] {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}

.ev-detail__hero-overlay[b-x2mmx6iw8m] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--tt-s-16);
    color: #fff;
    z-index: 1;
}

.ev-detail__hero-date[b-x2mmx6iw8m] {
    font-size: 11px;
    font-weight: var(--tt-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255,255,255,0.78);
    margin-bottom: var(--tt-s-4);
}

.ev-detail__hero-track[b-x2mmx6iw8m] {
    font-size: 26px;
    font-weight: var(--tt-weight-light);
    color: #fff;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0;
}

.ev-detail__hero-car[b-x2mmx6iw8m] {
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    font-weight: var(--tt-weight-regular);
    margin-top: var(--tt-s-4);
}

/* ── Stats bar ─────────────────────────────────────────────── */

.ev-detail__stats[b-x2mmx6iw8m] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    background: var(--tt-surface-0);
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
    margin-bottom: var(--tt-s-20);
}

.ev-detail__stat[b-x2mmx6iw8m] {
    padding: var(--tt-s-14) var(--tt-s-8);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-right: var(--tt-border-w) solid var(--tt-line-soft);
}

.ev-detail__stat:last-child[b-x2mmx6iw8m] { border-right: none; }

.ev-detail__stat-num[b-x2mmx6iw8m] {
    font-size: 22px;
    font-weight: var(--tt-weight-light);
    color: var(--tt-ink-1);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.ev-detail__stat-lbl[b-x2mmx6iw8m] {
    font-size: 10px;
    font-weight: var(--tt-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--tt-ink-3);
    margin-top: var(--tt-s-6);
}

/* ── Sessions list ─────────────────────────────────────────── */

.ev-detail__sessions[b-x2mmx6iw8m] {
    padding: 0 var(--tt-s-8);
}

.ev-detail__sessions-head[b-x2mmx6iw8m] {
    margin-bottom: var(--tt-s-12);
}

.ev-detail__session-card[b-x2mmx6iw8m] {
    display: flex;
    align-items: stretch;
    background: var(--tt-surface-0);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-12);
    overflow: hidden;
    margin-bottom: var(--tt-s-8);
    box-shadow: var(--tt-shadow-sm);
}

.ev-detail__session-num[b-x2mmx6iw8m] {
    width: 56px;
    flex-shrink: 0;
    background: #052767;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: var(--tt-weight-light);
    color: #fff;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
}

.ev-detail__session-body[b-x2mmx6iw8m] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--tt-s-6);
    flex: 1;
    padding: var(--tt-s-10) var(--tt-s-14) 11px;
}

.ev-detail__session-sublbl[b-x2mmx6iw8m] {
    font-size: 9px;
    font-weight: var(--tt-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--tt-ink-4);
    line-height: 1.2;
}

.ev-detail__session-value[b-x2mmx6iw8m] {
    font-size: 22px;
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-1);
    font-variant-numeric: tabular-nums;
    font-family: var(--tt-font-mono, 'SF Mono', Menlo, monospace);
    letter-spacing: -0.01em;
    line-height: 1;
}

.ev-detail__session-meta[b-x2mmx6iw8m] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-8);
    font-size: 11px;
    color: var(--tt-ink-3);
    padding-top: var(--tt-s-6);
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
    margin-top: var(--tt-s-2);
}

.ev-detail__session-pipe[b-x2mmx6iw8m] {
    width: 1px;
    height: 10px;
    background: var(--tt-line);
    display: inline-block;
    flex-shrink: 0;
}

.ev-detail__session-laps[b-x2mmx6iw8m] {
    color: var(--tt-ink-3);
    font-variant-numeric: tabular-nums;
}

.ev-detail__session-laps-num[b-x2mmx6iw8m] {
    color: var(--tt-ink-1);
    font-weight: var(--tt-weight-semibold);
    font-variant-numeric: tabular-nums;
}

.ev-detail__session-driver[b-x2mmx6iw8m] {
    color: var(--tt-ink-3);
    font-weight: var(--tt-weight-regular);
}

/* ═══ Create Event ═════════════════════════════════════════ */

.ev-create[b-x2mmx6iw8m] { }

.ev-create[b-x2mmx6iw8m]  .cb-cell-wrap {
    flex: 1 1 0;
    min-width: 0;
}

/* ── Cars popover options (mirrors drv-picker__opt style) ──── */

.cars-opt[b-x2mmx6iw8m] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-10);
    width: 100%;
    padding: 9px var(--tt-s-12);
    background: transparent;
    border: none;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    color: var(--tt-ink-1);
    text-align: left;
    transition: background 100ms;
}

.cars-opt:hover[b-x2mmx6iw8m] { background: var(--tt-surface-1); }

.cars-opt__check[b-x2mmx6iw8m] {
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--tt-line);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 100ms, border-color 100ms;
}

.cars-opt.is-on .cars-opt__check[b-x2mmx6iw8m] {
    background: var(--tt-ink-1);
    border-color: var(--tt-ink-1);
    color: var(--tt-surface-0);
}

.cars-opt__radio[b-x2mmx6iw8m] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid var(--tt-line);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 100ms, border-color 100ms;
}

.cars-opt.is-on .cars-opt__radio[b-x2mmx6iw8m] {
    border-color: var(--tt-ink-1);
    background: var(--tt-ink-1);
    box-shadow: inset 0 0 0 3px #fff;
}

.cars-opt__name[b-x2mmx6iw8m] { flex: 1; }

.cars-done[b-x2mmx6iw8m] {
    display: block;
    width: 100%;
    padding: var(--tt-s-10) var(--tt-s-12);
    background: var(--tt-ink-1);
    color: var(--tt-surface-0);
    border: none;
    font: inherit;
    font-size: 11px;
    font-weight: var(--tt-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    cursor: pointer;
    transition: opacity 100ms;
    margin-top: var(--tt-s-2);
}

.cars-done:hover[b-x2mmx6iw8m] { opacity: 0.88; }

/* ── Create header ─────────────────────────────────────────── */

.lp-head[b-x2mmx6iw8m] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-12);
    margin-bottom: var(--tt-s-20);
    flex-wrap: wrap;
}

.lp-head__title[b-x2mmx6iw8m] {
    margin: 0;
    font-size: 2.2rem;
    font-weight: var(--tt-weight-light);
    line-height: var(--tt-leading-tight);
    letter-spacing: -0.01em;
    flex-shrink: 0;
}


/* ── Header right group (modes) ────────────────────────────── */

.lp-head__right[b-x2mmx6iw8m] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-12);
    margin-left: auto;
    flex-shrink: 0;
}

/* ── Split layout ──────────────────────────────────────────── */

/* ── Promotion banner ──────────────────────────────────────── */
.lp-promo-banner[b-x2mmx6iw8m] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-8);
    padding: var(--tt-s-10) var(--tt-s-14);
    margin-bottom: var(--tt-s-16);
    background: color-mix(in srgb, var(--tt-primary) 8%, transparent);
    border: var(--tt-border-w) solid color-mix(in srgb, var(--tt-primary) 28%, transparent);
    border-radius: var(--tt-radius-4);
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-2);
}

.lp-promo-banner svg[b-x2mmx6iw8m] {
    flex-shrink: 0;
    color: var(--tt-primary);
}

.lp-promo-banner__start[b-x2mmx6iw8m] {
    display: inline-flex;
    align-items: center;
    gap: var(--tt-s-4);
    margin-left: auto;
    padding: var(--tt-s-4) var(--tt-s-10);
    border: var(--tt-border-w) solid #d5001c;
    border-radius: var(--tt-radius-4);
    background: #d5001c;
    color: #fff;
    font-size: var(--tt-text-sm);
    font-weight: var(--tt-weight-medium);
    cursor: pointer;
    white-space: nowrap;
    transition: background 120ms;
}

.lp-promo-banner__start:hover[b-x2mmx6iw8m] {
    background: #b00018;
}

.lp-split[b-x2mmx6iw8m] {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--tt-s-22);
    margin-bottom: var(--tt-s-20);
    align-items: start;
}

/* ── Sessions table (v1-laps) ──────────────────────────────── */

.v1-laps[b-x2mmx6iw8m] {
    background: var(--tt-surface-0);
    border: var(--tt-border-w) solid var(--tt-line-soft);
}

/* Panel header - eyebrow title left, summary right */
.v1-laps__head[b-x2mmx6iw8m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--tt-s-10) var(--tt-s-14);
    background: var(--tt-surface-2);
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
    gap: var(--tt-s-12);
    min-height: 44px;
    box-sizing: border-box;
}

.lp-sessions-eyebrow[b-x2mmx6iw8m] {
    font-size: 10px;
    font-weight: var(--tt-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--tt-ink-3);
}

.lp-sessions-summary[b-x2mmx6iw8m] {
    font-size: 12px;
    color: var(--tt-ink-3);
    font-variant-numeric: tabular-nums;
}

.v1-laps__add[b-x2mmx6iw8m] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--tt-s-8);
    width: 100%;
    padding: var(--tt-s-10) var(--tt-s-12);
    background: none;
    border: none;
    border-top: var(--tt-border-w) dashed var(--tt-line-soft);
    font-family: inherit;
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-3);
    cursor: pointer;
    text-align: center;
    transition: color 120ms;
}

.v1-laps__add:hover[b-x2mmx6iw8m] { color: var(--tt-primary); }

/* ── Event Impact panel ────────────────────────────────────── */

.lp-impact[b-x2mmx6iw8m] {
    background: var(--tt-surface-0);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    overflow: hidden;

    /* Status color tokens */
    --lp-status-ok:   var(--tt-status-ok);
    --lp-status-warn: var(--tt-status-warn);
    --lp-status-crit: var(--tt-status-crit);
}

.lp-impact__head[b-x2mmx6iw8m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--tt-s-10) var(--tt-s-14);
    background: var(--tt-surface-2);
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
    flex-wrap: wrap;
    gap: var(--tt-s-8);
    min-height: 44px;
    box-sizing: border-box;
}

.lp-impact__head h3[b-x2mmx6iw8m] {
    margin: 0;
    font-size: 11px;
    font-weight: var(--tt-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--tt-ink-3);
}

/* Collapsable toggle (Forecast mode) */

.lp-impact__counts[b-x2mmx6iw8m] {
    display: inline-flex;
    align-items: center;
    gap: var(--tt-s-4);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}

.lp-impact__empty[b-x2mmx6iw8m] {
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-4);
    padding: var(--tt-s-20) var(--tt-s-16);
    text-align: center;
    margin: 0;
}

/* Per-car groups in multi-car Forecast mode */
.lp-impact__car-group[b-x2mmx6iw8m] {
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
}

.lp-impact__car-group:first-child[b-x2mmx6iw8m] {
    border-top: none;
}

.lp-impact__car-label[b-x2mmx6iw8m] {
    font-size: 10px;
    font-weight: var(--tt-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tt-tracking-wide);
    color: var(--tt-ink-3);
    padding: var(--tt-s-10) var(--tt-s-16) var(--tt-s-4);
}

/* Body wrapper - gives rows their padding context */
.lp-impact__body[b-x2mmx6iw8m] {
    padding: var(--tt-s-4) var(--tt-s-16);
}

/* Impact row - 3-column grid: thumb | content | val */
.lp-impact__row[b-x2mmx6iw8m] {
    display: grid;
    grid-template-columns: 36px 1fr 110px;
    gap: var(--tt-s-12);
    align-items: center;
    padding: var(--tt-s-10) 0;
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
}

.lp-impact__row:last-of-type[b-x2mmx6iw8m] { border-bottom: none; }

.lp-impact__thumb[b-x2mmx6iw8m] {
    width: 36px;
    height: 36px;
    background: var(--tt-surface-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: var(--tt-border-w) solid var(--tt-line);
    flex-shrink: 0;
}

.lp-impact__thumb img[b-x2mmx6iw8m] { max-width: 28px; max-height: 28px; }

.lp-impact__name[b-x2mmx6iw8m] {
    font-size: 12px;
    font-weight: var(--tt-weight-medium);
    color: var(--tt-ink-1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tt-s-6);
}

.lp-impact__name-life[b-x2mmx6iw8m] {
    font-size: 10px;
    color: var(--tt-ink-4);
    font-weight: var(--tt-weight-regular);
    white-space: nowrap;
    flex-shrink: 0;
}

.lp-impact__bar[b-x2mmx6iw8m] {
    position: relative;
    height: 6px;
    background: var(--tt-surface-2);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-2);
    overflow: hidden;
    margin-top: var(--tt-s-6);
}

.lp-impact__seg[b-x2mmx6iw8m] {
    position: absolute;
    top: 0;
    bottom: 0;
    transition: width 200ms ease-out, left 200ms ease-out;
}

/* Log-mode multi-band segment colors (ok/warn/crit per band) */
.lp-impact__seg--solid.lp-impact__seg--ok[b-x2mmx6iw8m]   { background: var(--lp-status-ok); }
.lp-impact__seg--solid.lp-impact__seg--warn[b-x2mmx6iw8m] { background: var(--lp-status-warn); }
.lp-impact__seg--solid.lp-impact__seg--crit[b-x2mmx6iw8m] { background: var(--lp-status-crit); }

.lp-impact__seg--delta[b-x2mmx6iw8m] {
    background-image: repeating-linear-gradient(
        -45deg,
        transparent, transparent 3px,
        rgba(255,255,255,0.38) 3px, rgba(255,255,255,0.38) 6px
    );
}

.lp-impact__seg--delta.lp-impact__seg--ok[b-x2mmx6iw8m]   { background-color: var(--lp-status-ok); }
.lp-impact__seg--delta.lp-impact__seg--warn[b-x2mmx6iw8m] { background-color: var(--lp-status-warn); }
.lp-impact__seg--delta.lp-impact__seg--crit[b-x2mmx6iw8m] { background-color: var(--lp-status-crit); }

.lp-impact__val[b-x2mmx6iw8m] {
    font-size: 11px;
    color: var(--tt-ink-3);
    font-variant-numeric: tabular-nums;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--tt-s-4);
}

.lp-impact__val-new[b-x2mmx6iw8m] { font-weight: var(--tt-weight-semibold); color: var(--tt-ink-1); }
.lp-impact__val-new--warn[b-x2mmx6iw8m] { color: var(--tt-status-warn-text); }
.lp-impact__val-new--crit[b-x2mmx6iw8m] { color: var(--lp-status-crit); }

/* ── Forecast Impact panel variant ─────────────────────────── */

.lp-impact--forecast[b-x2mmx6iw8m] {
    --lp-fc-existing: var(--tt-ink-1);
    --lp-fc-forecast: var(--tt-status-forecast);
    --lp-fc-before:   var(--tt-status-warn-text);
    --lp-fc-during:   var(--tt-status-crit);
}

/* Forecast bar - taller to accommodate tick marks */
.lp-impact--forecast .lp-impact__bar[b-x2mmx6iw8m] {
    height: 8px;
}

/* Forecast segments - black existing + blue striped delta */
.lp-impact--forecast .lp-impact__seg--solid[b-x2mmx6iw8m] { background: var(--lp-fc-existing); }
.lp-impact--forecast .lp-impact__seg--delta[b-x2mmx6iw8m] {
    background-color: var(--lp-fc-forecast);
    background-image: repeating-linear-gradient(
        -45deg,
        transparent, transparent 3px,
        rgba(255,255,255,0.34) 3px, rgba(255,255,255,0.34) 6px
    );
}

/* Threshold tick marks inside the forecast bar */
.lp-impact__tick[b-x2mmx6iw8m] {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 2px;
    background: var(--tt-ink-3);
    opacity: 0.55;
    pointer-events: none;
}

.lp-impact__tick--crit[b-x2mmx6iw8m] { background: var(--tt-ink-1); opacity: 0.85; }

/* Legend strip - explains existing/forecast/tick vocabulary */
.lp-impact__legend[b-x2mmx6iw8m] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-14);
    padding: var(--tt-s-8) var(--tt-s-14);
    background: var(--tt-surface-1);
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
    font-size: 11px;
    color: var(--tt-ink-3);
}

.lp-impact__legend-item[b-x2mmx6iw8m] { display: inline-flex; align-items: center; gap: var(--tt-s-6); }

.lp-impact__legend-swatch[b-x2mmx6iw8m] {
    display: inline-block;
    width: 16px;
    height: 8px;
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-2);
}

.lp-impact__legend-swatch--existing[b-x2mmx6iw8m] { background: var(--lp-fc-existing, var(--tt-ink-1)); border-color: var(--lp-fc-existing, var(--tt-ink-1)); }

/* Committed = wear from events before this one - solid blue (matches the bar's forecast-committed band). */
.lp-impact__legend-swatch--committed[b-x2mmx6iw8m] {
    background: var(--lp-fc-forecast, var(--tt-status-forecast));
    border-color: var(--lp-fc-forecast, var(--tt-status-forecast));
}

.lp-impact__legend-swatch--forecast[b-x2mmx6iw8m] {
    background-color: var(--lp-fc-forecast, #2563eb);
    background-image: repeating-linear-gradient(
        -45deg,
        transparent, transparent 3px,
        rgba(255,255,255,0.34) 3px, rgba(255,255,255,0.34) 6px
    );
    border-color: var(--lp-fc-forecast, #2563eb);
}

.lp-impact__legend-swatch--tick[b-x2mmx6iw8m] {
    width: 2px;
    height: 12px;
    background: var(--tt-ink-1);
    border: 0;
}

/* Forecast val-new color keyed on category */
.lp-impact--forecast .lp-impact__val-new--before[b-x2mmx6iw8m] { color: var(--lp-fc-before); }
.lp-impact--forecast .lp-impact__val-new--during[b-x2mmx6iw8m]  { color: var(--lp-fc-during); }

/* ═══ Plan Trip ════════════════════════════════════════════ */

/* ── STOPS panel + picker ──────────────────────────────────── */

.pt-stops-wrap[b-x2mmx6iw8m] {
    position: relative;
    margin-bottom: var(--tt-s-16);
}

.pt-stops[b-x2mmx6iw8m] {
    border: var(--tt-border-w) solid var(--tt-ink-1);
    box-shadow: 0 2px 0 var(--tt-ink-1);
    background: var(--tt-surface-0);
}

.pt-stops__head[b-x2mmx6iw8m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tt-s-16);
    padding: var(--tt-s-12) var(--tt-s-18);
    background: var(--tt-ink-1);
    color: var(--tt-surface-0);
    min-height: 44px;
    box-sizing: border-box;
}

.pt-stops__lbl[b-x2mmx6iw8m] {
    font-size: 11px;
    font-weight: var(--tt-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    flex-shrink: 0;
}

.pt-stops__hint[b-x2mmx6iw8m] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.88);
    text-align: right;
}

/* ── Horizontal timeline row ────────────────────────────────── */
/*
 * Spacing math (all from row top edge):
 *   P  = 28px  - top padding (header → label) and label → line gap
 *   label = 11px (font-size 11, line-height 1)
 *   line  = P + 11 + P = 67px
 *   dot   = 67 + 16 (extra gap) = 83px  → date margin-bottom = 83 - (P+11) = 44px
 */

.pt-stops__timeline-row[b-x2mmx6iw8m] {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: var(--tt-s-28) var(--tt-s-18) var(--tt-s-22);
    overflow-x: auto;
    gap: 0;
    position: relative;
}

/* Divider - label-to-line gap equals top padding (P = 28px, line at P + 11 + P = 67px) */
.pt-stops__timeline-row[b-x2mmx6iw8m]::before {
    content: '';
    position: absolute;
    left: var(--tt-s-32); right: var(--tt-s-32);
    top: 67px;
    height: 1px;
    background: var(--tt-ink-1);
    pointer-events: none;
}

/* ── Each stop column ──────────────────────────────────────── */

.pt-stop-col[b-x2mmx6iw8m] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 var(--tt-s-8);
    text-align: center;
    position: relative;
}

.pt-stop-col__date[b-x2mmx6iw8m] {
    font-size: 11px;
    font-weight: var(--tt-weight-semibold);
    letter-spacing: 0.10em;
    color: var(--tt-ink-3);
    margin-bottom: var(--tt-s-44);
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1;
}

.pt-stop-col__dot[b-x2mmx6iw8m] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid var(--tt-ink-1);
    box-sizing: border-box;
    margin-bottom: var(--tt-s-12);
    flex-shrink: 0;
    z-index: 1;
    position: relative;
}

.pt-stop-col__dot--latest[b-x2mmx6iw8m] {
    background: var(--tt-ink-1);
}

.pt-stop-col--add .pt-stop-col__dot[b-x2mmx6iw8m] {
    background: var(--tt-surface-2);
    border: 2px dashed var(--tt-ink-3);
    box-sizing: border-box;
}

/* ── Add-first-stop / Add-a-stop button ─────────────────────── */

.pt-stops__first-btn[b-x2mmx6iw8m] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--tt-s-6);
    width: 100%;
    padding: var(--tt-s-14) var(--tt-s-12);
    background: rgba(220, 38, 38, 0.05);
    border: var(--tt-border-w) dashed rgba(220, 38, 38, 0.30);
    font-family: inherit;
    font-size: var(--tt-text-sm);
    font-weight: var(--tt-weight-medium);
    color: var(--tt-ink-2);
    cursor: pointer;
    transition: background 120ms, border-color 120ms, color 120ms;
}

.pt-stops__first-btn:hover[b-x2mmx6iw8m] {
    background: rgba(220, 38, 38, 0.10);
    border-color: rgba(220, 38, 38, 0.55);
    color: var(--tt-ink-1);
}

.pt-stops__first-plus[b-x2mmx6iw8m] {
    color: var(--tt-danger);
    font-size: 16px;
    line-height: 1;
    font-weight: var(--tt-weight-regular);
}

/* ── Stop card ─────────────────────────────────────────────── */

.pt-stop-card[b-x2mmx6iw8m] {
    background: var(--tt-surface-0);
    border: var(--tt-border-w) solid var(--tt-ink-1);
    padding: var(--tt-s-12);
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    transition: box-shadow 120ms;
}

.pt-stop-card--past[b-x2mmx6iw8m] { background: #f0f0f0; }

.pt-stop-card:hover[b-x2mmx6iw8m] {
    box-shadow: 0 0 0 1px var(--tt-ink-1);
}

.pt-stop-card__head[b-x2mmx6iw8m] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--tt-s-8);
}

.pt-stop-card__name[b-x2mmx6iw8m] {
    font-size: 13px;
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-1);
    line-height: 1.2;
}

.pt-stop-card__remove[b-x2mmx6iw8m] {
    background: none;
    border: none;
    font-size: 16px;
    line-height: 1;
    color: var(--tt-ink-4);
    cursor: pointer;
    padding: 0 var(--tt-s-2);
    flex-shrink: 0;
    transition: color 120ms;
}

.pt-stop-card__remove:hover[b-x2mmx6iw8m] { color: var(--tt-ink-1); }

.pt-stop-card__meta[b-x2mmx6iw8m] {
    font-size: 11px;
    color: var(--tt-ink-3);
    display: flex;
    align-items: center;
    gap: var(--tt-s-4);
}

.pt-stop-card__sessions[b-x2mmx6iw8m] {
    font-size: 11px;
    color: var(--tt-ink-2);
    font-variant-numeric: tabular-nums;
    margin-top: var(--tt-s-4);
}

.pt-stop-card__open[b-x2mmx6iw8m] {
    display: inline-flex;
    align-items: center;
    gap: var(--tt-s-4);
    font-size: 11px;
    font-weight: var(--tt-weight-medium);
    color: var(--tt-ink-2);
    margin-top: var(--tt-s-6);
}


/* ── Stop picker dropdown ──────────────────────────────────── */

.pt-stop-picker-backdrop[b-x2mmx6iw8m] {
    position: fixed;
    inset: 0;
    z-index: 29;
}

.pt-stop-picker[b-x2mmx6iw8m] {
    position: absolute;
    top: 100%;
    left: 0;
    width: 400px;
    background: var(--tt-surface-1);
    border: var(--tt-border-w) solid var(--tt-ink-1);
    box-shadow: var(--tt-shadow-lg);
    z-index: 30;
    display: flex;
    flex-direction: column;
}

.pt-stop-picker__section[b-x2mmx6iw8m] {
    font-size: 10px;
    font-weight: var(--tt-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--tt-ink-3);
    padding: var(--tt-s-6) var(--tt-s-12) var(--tt-s-4);
}

.pt-stop-picker__item[b-x2mmx6iw8m] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-10);
    width: 100%;
    padding: var(--tt-s-8) var(--tt-s-12);
    background: transparent;
    border: 0;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    transition: background 100ms;
}

.pt-stop-picker__item:hover[b-x2mmx6iw8m] { background: var(--tt-surface-2); }

.pt-stop-picker__item-icon[b-x2mmx6iw8m] { color: var(--tt-ink-4); flex-shrink: 0; display: flex; }

.pt-stop-picker__item-name[b-x2mmx6iw8m] {
    flex: 1;
    color: var(--tt-ink-1);
    font-weight: var(--tt-weight-regular);
}

.pt-stop-picker__item-date[b-x2mmx6iw8m] {
    font-size: 11px;
    color: var(--tt-ink-4);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.pt-stop-picker__create[b-x2mmx6iw8m] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-10);
    width: 100%;
    padding: var(--tt-s-10) var(--tt-s-12);
    background: transparent;
    border: 0;
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    margin-top: var(--tt-s-4);
    transition: background 100ms;
}

.pt-stop-picker__create:hover[b-x2mmx6iw8m] { background: var(--tt-surface-2); }

.pt-stop-picker__create-icon[b-x2mmx6iw8m] { color: var(--tt-ink-3); flex-shrink: 0; display: flex; }

.pt-stop-picker__create-label[b-x2mmx6iw8m] {
    flex: 1;
    font-weight: var(--tt-weight-medium);
    color: var(--tt-ink-1);
}

.pt-stop-picker__create-hint[b-x2mmx6iw8m] {
    font-size: 10px;
    font-weight: var(--tt-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tt-ink-4);
    white-space: nowrap;
}

/* ── Stats bar ─────────────────────────────────────────────── */

.pt-stats[b-x2mmx6iw8m] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    margin-bottom: var(--tt-s-16);
    background: var(--tt-surface-0);
}

.pt-stat[b-x2mmx6iw8m] {
    padding: var(--tt-s-14) var(--tt-s-8);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--tt-surface-0);
    border-right: var(--tt-border-w) solid var(--tt-line-soft);
}

.pt-stat:last-child[b-x2mmx6iw8m] { border-right: none; }

.pt-stat__lbl[b-x2mmx6iw8m] {
    font-size: 10px;
    font-weight: var(--tt-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--tt-ink-3);
    margin-bottom: var(--tt-s-6);
}

.pt-stat__num[b-x2mmx6iw8m] {
    font-size: 22px;
    font-weight: var(--tt-weight-light);
    color: var(--tt-ink-1);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.pt-stat__unit[b-x2mmx6iw8m] {
    font-size: 13px;
    font-weight: var(--tt-weight-regular);
}

.pt-stat--expire[b-x2mmx6iw8m] {
    background: var(--tt-danger);
}

.pt-stat--expire .pt-stat__lbl[b-x2mmx6iw8m],
.pt-stat--expire .pt-stat__num[b-x2mmx6iw8m] {
    color: #fff;
}

/* ── Collapsible sections ──────────────────────────────────── */

.pt-section[b-x2mmx6iw8m] {
    border: var(--tt-border-w) solid var(--tt-line-soft);
    margin-bottom: var(--tt-s-16);
    background: var(--tt-surface-0);
    overflow: hidden;
}

.pt-section__head[b-x2mmx6iw8m] {
    display: flex;
    align-items: center;
    min-height: 44px;
    border-bottom: var(--tt-border-w) solid transparent;
    background: var(--tt-surface-2);
}

.pt-section:has(.pt-section__body) .pt-section__head[b-x2mmx6iw8m],
.pt-section:has(.lp-impact) .pt-section__head[b-x2mmx6iw8m] {
    border-bottom-color: var(--tt-line-soft);
}

.pt-section__toggle[b-x2mmx6iw8m] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-8);
    flex: 1;
    padding: var(--tt-s-12) var(--tt-s-16);
    background: none;
    border: none;
    font-family: inherit;
    font-size: 11px;
    font-weight: var(--tt-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--tt-ink-2);
    cursor: pointer;
    text-align: left;
    transition: color 120ms;
}

.pt-section__toggle:hover[b-x2mmx6iw8m] { color: var(--tt-ink-1); }

.pt-section__chev[b-x2mmx6iw8m] {
    flex-shrink: 0;
    color: var(--tt-ink-4);
    transition: transform 200ms ease;
}

.pt-section__chev--open[b-x2mmx6iw8m] { transform: rotate(90deg); }

.pt-section__head-right[b-x2mmx6iw8m] {
    display: inline-flex;
    align-items: center;
    gap: var(--tt-s-4);
    padding-right: var(--tt-s-12);
}

.pt-section__body[b-x2mmx6iw8m] {
    padding: 0;
}

/* Forecast impact nested inside a pt-section - strip the panel border */
.pt-section .lp-impact[b-x2mmx6iw8m] {
    border: none;
    background: transparent;
}

/* ── Plan stub ─────────────────────────────────────────────── */

.ev-create__plan-stub[b-x2mmx6iw8m] {
    background: var(--tt-surface-0);
    border: var(--tt-border-w) dashed var(--tt-line-soft);
    padding: var(--tt-s-48) var(--tt-s-24);
    text-align: center;
    margin-bottom: var(--tt-s-20);
}

/* ── Action bar ────────────────────────────────────────────── */

.lp-actions[b-x2mmx6iw8m] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--tt-s-8);
    padding-top: var(--tt-s-16);
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
}

.lp-actions__primary[b-x2mmx6iw8m] {
    display: inline-flex;
    align-items: center;
    padding: 9px var(--tt-s-20);
    background: var(--tt-ink-1);
    color: var(--tt-surface-0);
    border: none;
    font-family: inherit;
    font-size: var(--tt-text-base);
    font-weight: var(--tt-weight-medium);
    cursor: pointer;
    transition: opacity 120ms;
}

.lp-actions__primary:disabled[b-x2mmx6iw8m] { opacity: 0.45; cursor: not-allowed; }
.lp-actions__primary:not(:disabled):hover[b-x2mmx6iw8m] { opacity: 0.88; }

.lp-actions__ghost[b-x2mmx6iw8m] {
    display: inline-flex;
    align-items: center;
    padding: 9px var(--tt-s-20);
    background: transparent;
    color: var(--tt-ink-2);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    font-family: inherit;
    font-size: var(--tt-text-base);
    font-weight: var(--tt-weight-medium);
    cursor: pointer;
    transition: background 120ms;
}

.lp-actions__ghost:hover[b-x2mmx6iw8m] { background: var(--tt-surface-1); }

.lp-actions__delete[b-x2mmx6iw8m] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 9px var(--tt-s-16);
    background: transparent;
    color: var(--tt-ink-3);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    font-family: inherit;
    font-size: var(--tt-text-base);
    font-weight: var(--tt-weight-medium);
    cursor: pointer;
    margin-right: auto;
    transition: border-color 120ms, color 120ms;
}

.lp-actions__delete:hover[b-x2mmx6iw8m] {
    border-color: var(--tt-danger);
    color: var(--tt-danger);
}

.lp-actions__delete-confirm-msg[b-x2mmx6iw8m] {
    margin-right: auto;
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-2);
}

.lp-actions__delete-confirm-yes[b-x2mmx6iw8m] {
    display: inline-flex;
    align-items: center;
    padding: 9px var(--tt-s-20);
    background: var(--tt-danger);
    color: #fff;
    border: none;
    font-family: inherit;
    font-size: var(--tt-text-base);
    font-weight: var(--tt-weight-medium);
    cursor: pointer;
    transition: opacity 120ms;
}

.lp-actions__delete-confirm-yes:disabled[b-x2mmx6iw8m] { opacity: 0.6; cursor: not-allowed; }
.lp-actions__delete-confirm-yes:not(:disabled):hover[b-x2mmx6iw8m] { opacity: 0.88; }

/* ── New event - inline outlined button ────────────────────── */

.events__bottom-bar[b-x2mmx6iw8m] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--tt-s-8);
    width: 100%;
    height: 56px;
    background: transparent;
    border: var(--tt-border-w) dashed var(--tt-line-soft);
    border-radius: var(--tt-radius-8);
    font-family: inherit;
    font-size: var(--tt-text-sm);
    font-weight: var(--tt-weight-medium);
    color: var(--tt-ink-1);
    cursor: pointer;
    transition: border-color 150ms, color 150ms;
    margin-top: calc(var(--tt-s-16) - var(--tt-s-4));
    margin-bottom: calc(var(--tt-s-16) - var(--tt-s-4));
}

.events__bottom-bar:hover[b-x2mmx6iw8m] {
    border-color: var(--tt-ink-3);
    color: var(--tt-primary);
}

/* ── What to Bring panel ──────────────────────────────────── */

.wtb-summary[b-x2mmx6iw8m] {
    display: flex;
    align-items: center;
    padding: var(--tt-s-10) var(--tt-s-14);
    background: var(--tt-surface-1);
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
    min-height: 44px;
    box-sizing: border-box;
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-3);
}

.wtb-summary__suggested[b-x2mmx6iw8m] {
    margin-left: auto;
    color: var(--tt-primary);
    font-weight: var(--tt-weight-medium);
}

.wtb-row[b-x2mmx6iw8m] {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    align-items: center;
    gap: var(--tt-s-12);
    padding: var(--tt-s-12) var(--tt-s-16);
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
}

.wtb-row:last-of-type[b-x2mmx6iw8m] { border-bottom: none; }

.wtb-row__thumb[b-x2mmx6iw8m] {
    width: 44px;
    height: 44px;
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-4);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tt-surface-1);
    overflow: hidden;
    flex-shrink: 0;
}

.wtb-row__thumb--dashed[b-x2mmx6iw8m] { border-style: dashed; }

.wtb-row__thumb img[b-x2mmx6iw8m] {
    max-width: 30px;
    max-height: 30px;
    object-fit: contain;
}

.wtb-row__name[b-x2mmx6iw8m] {
    font-size: 13px;
    font-weight: var(--tt-weight-medium);
    color: var(--tt-ink-1);
    display: flex;
    align-items: center;
    gap: var(--tt-s-6);
    flex-wrap: wrap;
}

.wtb-row__sub[b-x2mmx6iw8m] {
    font-size: 11px;
    color: var(--tt-ink-3);
    margin-top: var(--tt-s-2);
}

.wtb-row__suggested-badge[b-x2mmx6iw8m] {
    display: inline-block;
    font-size: 10px;
    font-weight: var(--tt-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: var(--tt-s-2) 5px;
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-2);
    color: var(--tt-ink-4);
}

.wtb-row__right[b-x2mmx6iw8m] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-6);
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
}

.wtb-row__qty[b-x2mmx6iw8m] {
    font-size: 12px;
    color: var(--tt-ink-2);
    white-space: nowrap;
    text-align: right;
}

.wtb-row__qty-unit[b-x2mmx6iw8m] {
    color: var(--tt-ink-4);
    font-size: 11px;
}

.wtb-row__chev[b-x2mmx6iw8m] { color: var(--tt-ink-4); transition: transform 150ms; }

.wtb-row__chev--open[b-x2mmx6iw8m] { transform: rotate(90deg); }

/* Timeline line runs through the left side of the stop list */
.wtb-stop-list[b-x2mmx6iw8m] {
    position: relative;
    background: var(--tt-surface-1);
    padding: var(--tt-s-4) 0;
}

.wtb-stop-list[b-x2mmx6iw8m]::before {
    content: '';
    position: absolute;
    left: 76px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--tt-line-soft);
}

.wtb-stop-row[b-x2mmx6iw8m] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-10);
    padding: 7px var(--tt-s-16) 7px 92px; /* 76 (line) + 4 (half dot) + 12 (gap) */
    position: relative;
}

.wtb-stop-row__dot[b-x2mmx6iw8m] {
    position: absolute;
    left: 72px; /* 76 (line center) - 4 (half dot) */
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tt-ink-4);
    flex-shrink: 0;
    z-index: 1;
}

.wtb-stop-row__dot--alert[b-x2mmx6iw8m] { background: var(--tt-danger); }

.wtb-stop-row__label[b-x2mmx6iw8m] {
    flex: 1;
    font-size: 11px;
    font-weight: var(--tt-weight-medium);
    letter-spacing: 0.05em;
    color: var(--tt-ink-3);
}

.wtb-stop-row__range[b-x2mmx6iw8m] {
    font-size: 12px;
    color: var(--tt-ink-2);
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.wtb-summary__sep[b-x2mmx6iw8m] { color: var(--tt-ink-4); }

.wtb-summary__alert-count[b-x2mmx6iw8m] { color: var(--tt-danger); }

.wtb-footer[b-x2mmx6iw8m] {
    display: flex;
    justify-content: flex-end;
    padding: var(--tt-s-10) var(--tt-s-16);
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
}

.wtb-footer__print[b-x2mmx6iw8m] {
    padding: 5px var(--tt-s-14);
    border: var(--tt-border-w) solid var(--tt-ink-2);
    border-radius: var(--tt-radius-4);
    background: none;
    font-family: inherit;
    font-size: 11px;
    font-weight: var(--tt-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tt-ink-2);
    cursor: pointer;
    transition: background 120ms, color 120ms;
}

.wtb-footer__print:hover[b-x2mmx6iw8m] {
    background: var(--tt-surface-1);
    color: var(--tt-ink-1);
}

/* ── VBO upload panel ──────────────────────────────────────── */

.vbo-upload[b-x2mmx6iw8m] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.vbo-zone[b-x2mmx6iw8m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--tt-s-40) var(--tt-s-24) var(--tt-s-32);
    border: 1.5px dashed #b8c4d4;
    border-radius: 0;
    background: var(--tt-surface-0);
    cursor: pointer;
    position: relative;
    min-height: 200px;
    transition: border-color 120ms, background 120ms;
}

.vbo-zone:hover[b-x2mmx6iw8m] {
    border-color: var(--tt-primary);
    background: #f0f5ff;
}

/* Withheld below Grid (#441): the same frame, minus every affordance that implies you can drop
   a file into it. Solid rather than dashed, because a dashed border IS the drop-target signal. */
.vbo-zone--locked[b-x2mmx6iw8m] {
    cursor: default;
    border-style: solid;
    border-color: var(--tt-line-soft);
    background: var(--tt-surface-1);
}

.vbo-zone--locked:hover[b-x2mmx6iw8m] {
    border-color: var(--tt-line-soft);
    background: var(--tt-surface-1);
}

.vbo-zone--busy[b-x2mmx6iw8m] {
    cursor: default;
    pointer-events: none;
    border-style: solid;
    border-color: var(--tt-line-soft);
}

.vbo-zone__icon[b-x2mmx6iw8m] {
    color: var(--tt-ink-4);
    margin-bottom: var(--tt-s-12);
}

.vbo-zone__title[b-x2mmx6iw8m] {
    font-size: 14px;
    font-weight: var(--tt-weight-medium);
    color: var(--tt-ink-2);
    margin-bottom: 5px;
}

.vbo-zone__sub[b-x2mmx6iw8m] {
    font-size: 12px;
    color: var(--tt-ink-4);
    line-height: 1.5;
}

.vbo-zone__browse[b-x2mmx6iw8m] {
    margin-top: var(--tt-s-14);
    padding: var(--tt-s-6) var(--tt-s-16);
    background: var(--tt-surface-0);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-8);
    font-size: 12px;
    font-weight: var(--tt-weight-medium);
    color: var(--tt-ink-2);
    pointer-events: none;
}

.vbo-uploading[b-x2mmx6iw8m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--tt-s-14);
    min-height: 200px;
    border: 1.5px solid var(--tt-line-soft);
    border-radius: var(--tt-radius-12);
    background: var(--tt-surface-2);
}

.vbo-spinner[b-x2mmx6iw8m] {
    width: 26px;
    height: 26px;
    border: 2.5px solid #d0d8e8;
    border-top-color: var(--tt-primary);
    border-radius: 50%;
    animation: vbo-spin-b-x2mmx6iw8m 0.7s linear infinite;
}

@keyframes vbo-spin-b-x2mmx6iw8m { to { transform: rotate(360deg); } }

.vbo-uploading__text[b-x2mmx6iw8m] {
    font-size: 13px;
    color: var(--tt-ink-3);
}


.vbo-footer[b-x2mmx6iw8m] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-16);
    margin-top: var(--tt-s-14);
    padding-top: var(--tt-s-12);
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
}

.vbo-footer__reupload[b-x2mmx6iw8m] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--tt-link);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
}

.vbo-footer__reupload:hover[b-x2mmx6iw8m] { text-decoration: underline; }

.vbo-footer__manual[b-x2mmx6iw8m] {
    font-size: 12px;
    color: var(--tt-ink-4);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
}

.vbo-footer__manual:hover[b-x2mmx6iw8m] {
    color: var(--tt-ink-2);
    text-decoration: underline;
}

.vbo-error[b-x2mmx6iw8m] {
    display: flex;
    align-items: flex-start;
    gap: var(--tt-s-8);
    margin-top: var(--tt-s-12);
    padding: var(--tt-s-10) var(--tt-s-14);
    background: #fff0f0;
    border: var(--tt-border-w) solid #fecaca;
    border-radius: var(--tt-radius-8);
    font-size: 12px;
    color: #b91c1c;
    line-height: 1.4;
}

.vbo-error svg[b-x2mmx6iw8m] { flex-shrink: 0; margin-top: 1px; }

.vbo-warning[b-x2mmx6iw8m] {
    display: flex;
    align-items: flex-start;
    gap: var(--tt-s-8);
    margin-bottom: var(--tt-s-12);
    padding: var(--tt-s-10) var(--tt-s-14);
    background: #fffbeb;
    border: var(--tt-border-w) solid #fde68a;
    border-radius: var(--tt-radius-8);
    font-size: 12px;
    color: #92400e;
    line-height: 1.4;
}

.vbo-warning svg[b-x2mmx6iw8m] { flex-shrink: 0; margin-top: 1px; color: #d97706; }

.vbo-manual-link[b-x2mmx6iw8m] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: var(--tt-s-14);
    font-size: 12px;
    color: var(--tt-ink-4);
}

.vbo-manual-link__btn[b-x2mmx6iw8m] {
    background: none;
    border: none;
    font-size: 12px;
    color: var(--tt-link);
    cursor: pointer;
    padding: 0;
    font-family: inherit;
}

.vbo-manual-link__btn:hover[b-x2mmx6iw8m] { text-decoration: underline; }

/* ── Responsive ────────────────────────────────────────────── */

@media (max-width: 900px) {
    .lp-split[b-x2mmx6iw8m]       { grid-template-columns: 1fr; }
    .lp-head__right[b-x2mmx6iw8m] { flex-wrap: wrap; gap: var(--tt-s-8); }
}

/* ============================================================
 * Mobile (<800px) Log Event wizard - ported from the design
 * system (events-mobile.css). All selectors are .m-* / .ev-m*,
 * scoped to this page and gated to <=800px so the desktop
 * create flow is untouched. The wrappers default to display:none
 * so they never render on desktop (they're present in the DOM
 * whenever the chooser/Log states are active).
 * ============================================================ */
.ev-mchooser[b-x2mmx6iw8m],
.ev-mwizard[b-x2mmx6iw8m],
.m-sheet-backdrop[b-x2mmx6iw8m] { display: none; }

@media (max-width: 800px) {

    /* Desktop create flow steps aside for the mobile chooser / Log wizard */
    .ev-create--mhide[b-x2mmx6iw8m] { display: none; }

    /* Car-filter chip strip wraps to multiple rows instead of overflowing the
       screen edge on mobile. */
    .ev-car-filter[b-x2mmx6iw8m] { flex-wrap: wrap; }

    /* Month event cards stack vertically and center on the screen instead of
       scrolling in a horizontal rail. */
    .events__rail[b-x2mmx6iw8m] {
        flex-direction: column;
        align-items: center;
        overflow-x: visible;
        scroll-snap-type: none;
        margin: 0;
    }

    /* Edge-to-edge: cancel the .events container padding */
    .ev-mchooser[b-x2mmx6iw8m],
    .ev-mwizard[b-x2mmx6iw8m] {
        display: flex;
        flex-direction: column;
        min-height: calc(100dvh - 56px);
        margin: calc(var(--tt-s-24) * -1) calc(var(--tt-s-24) * -1) calc(var(--tt-s-48) * -1);
        background: var(--tt-surface-1);
        color: var(--tt-ink-1);
        -webkit-font-smoothing: antialiased;
    }

    .m-screen__body[b-x2mmx6iw8m] {
        flex: 1;
        padding: var(--tt-s-8) var(--tt-s-20) var(--tt-s-24);
        display: flex;
        flex-direction: column;
    }
    .m-screen__body--tight[b-x2mmx6iw8m] { padding: var(--tt-s-8) var(--tt-s-16) var(--tt-s-24); }

    .m-lede[b-x2mmx6iw8m] { margin: 0 0 var(--tt-s-16); color: var(--tt-ink-3); font-size: 14px; line-height: 1.45; }
    .m-lede strong[b-x2mmx6iw8m] { color: var(--tt-ink-1); font-weight: var(--tt-weight-semibold); }

    .m-eyebrow[b-x2mmx6iw8m] {
        display: block; font-size: 11px; text-transform: uppercase;
        letter-spacing: 0.14em; color: var(--tt-ink-4); font-weight: var(--tt-weight-semibold);
        margin: var(--tt-s-14) 0 var(--tt-s-8);
    }

    /* ── app bar ── */
    .m-appbar[b-x2mmx6iw8m] { display: flex; align-items: center; padding: var(--tt-s-8) var(--tt-s-12); gap: var(--tt-s-8); min-height: 44px; }
    .m-appbar__leading[b-x2mmx6iw8m],
    .m-appbar__trailing[b-x2mmx6iw8m] { display: flex; align-items: center; min-width: 56px; }
    .m-appbar__trailing[b-x2mmx6iw8m] { justify-content: flex-end; }
    .m-appbar__title[b-x2mmx6iw8m] {
        flex: 1; text-align: center; font-size: 16px; font-weight: var(--tt-weight-semibold); margin: 0;
        color: var(--tt-ink-1); letter-spacing: 0.01em;
    }
    .m-iconbtn[b-x2mmx6iw8m] {
        width: 36px; height: 36px; border-radius: 50%; border: none; background: transparent;
        display: inline-flex; align-items: center; justify-content: center;
        color: var(--tt-ink-1); cursor: pointer;
    }
    .m-link[b-x2mmx6iw8m] {
        background: transparent; border: none; color: var(--tt-primary);
        font-size: 14px; font-family: inherit; font-weight: var(--tt-weight-medium); cursor: pointer; padding: var(--tt-s-6) var(--tt-s-4);
    }

    /* ── step bar ── */
    .m-stepbar[b-x2mmx6iw8m] { padding: var(--tt-s-6) var(--tt-s-20) var(--tt-s-16); display: flex; flex-direction: column; gap: var(--tt-s-8); }
    .m-stepbar__track[b-x2mmx6iw8m] { height: 3px; background: var(--tt-line-soft); border-radius: var(--tt-radius-pill); overflow: hidden; }
    .m-stepbar__fill[b-x2mmx6iw8m] { height: 100%; background: var(--tt-primary); transition: width 300ms ease-out; }
    .m-stepbar__row[b-x2mmx6iw8m] { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; }
    .m-stepbar__num[b-x2mmx6iw8m] {
        color: var(--tt-ink-4); font-family: var(--tt-font-mono); letter-spacing: 0.06em;
        text-transform: uppercase; font-weight: var(--tt-weight-semibold);
    }
    .m-stepbar__label[b-x2mmx6iw8m] { color: var(--tt-ink-1); font-weight: var(--tt-weight-semibold); }

    /* ── tile (car / track / date) ── */
    .m-tile[b-x2mmx6iw8m] {
        display: flex; align-items: center; gap: var(--tt-s-14); width: 100%; padding: var(--tt-s-12);
        background: var(--tt-surface-1); border: var(--tt-border-w) solid var(--tt-line); border-radius: var(--tt-radius-8);
        text-align: left; cursor: pointer; font-family: inherit; margin-bottom: var(--tt-s-4);
        transition: border-color 120ms; position: relative;
    }
    .m-tile:active[b-x2mmx6iw8m] { border-color: var(--tt-ink-1); }
    .m-tile__hero[b-x2mmx6iw8m] {
        width: 76px; height: 56px; border-radius: var(--tt-radius-4);
        background: var(--tt-surface-2) center / cover no-repeat; flex: 0 0 76px;
    }
    .m-tile__iconbox[b-x2mmx6iw8m] {
        width: 56px; height: 56px; border-radius: var(--tt-radius-4); background: var(--tt-surface-2);
        display: flex; align-items: center; justify-content: center; color: var(--tt-ink-2); flex: 0 0 56px;
    }
    .m-tile__body[b-x2mmx6iw8m] { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
    .m-tile__title[b-x2mmx6iw8m] {
        font-size: 16px; font-weight: var(--tt-weight-semibold); color: var(--tt-ink-1);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .m-tile__sub[b-x2mmx6iw8m] { font-size: 12px; color: var(--tt-ink-3); }
    .m-tile__chevron[b-x2mmx6iw8m] { color: var(--tt-ink-4); display: inline-flex; }
    .m-tile--inline .m-tile__hero[b-x2mmx6iw8m] { display: none; }
    /* hidden anchor for the native date picker - opened via openDatePicker()
       on tile tap (a transparent full-size overlay doesn't reliably surface
       the picker on mobile webviews). pointer-events:none so it never steals
       the tap from the tile's @onclick. */
    .m-tile__dateinput[b-x2mmx6iw8m] {
        position: absolute; left: var(--tt-s-12); bottom: var(--tt-s-6); width: 1px; height: 1px;
        opacity: 0; border: 0; padding: 0; pointer-events: none;
    }

    .m-callout[b-x2mmx6iw8m] {
        margin-top: var(--tt-s-16); padding: var(--tt-s-12); display: flex; align-items: flex-start; gap: var(--tt-s-10);
        background: var(--tt-surface-2); border-radius: var(--tt-radius-8); font-size: 12px;
        color: var(--tt-ink-3); line-height: 1.4;
    }
    .m-callout svg[b-x2mmx6iw8m] { width: 16px; height: 16px; color: var(--tt-ink-4); flex-shrink: 0; margin-top: 1px; }

    /* ── co-driver chips (Step 1) ── */
    .m-driverchips[b-x2mmx6iw8m] { display: flex; flex-wrap: wrap; gap: var(--tt-s-8); }
    .m-driverchip[b-x2mmx6iw8m] {
        display: inline-flex; align-items: center; gap: var(--tt-s-8); padding: var(--tt-s-6) var(--tt-s-12) var(--tt-s-6) var(--tt-s-6);
        background: var(--tt-surface-1); border: var(--tt-border-w) solid var(--tt-line); border-radius: var(--tt-radius-pill);
        font-family: inherit; font-size: 13px; color: var(--tt-ink-1); cursor: pointer;
        transition: border-color 120ms, background 120ms;
    }
    .m-driverchip.is-on[b-x2mmx6iw8m] { border-color: var(--tt-ink-1); background: var(--tt-surface-2); }
    .m-driverchip.is-you[b-x2mmx6iw8m] { cursor: default; opacity: 0.9; }
    .m-driverchip__avatar[b-x2mmx6iw8m] {
        width: 24px; height: 24px; border-radius: 50%; color: #fff; font-size: 10px; font-weight: var(--tt-weight-bold);
        display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .m-driverchip__name[b-x2mmx6iw8m] { font-weight: var(--tt-weight-medium); }
    .m-driverchip__check[b-x2mmx6iw8m] { display: inline-flex; color: var(--tt-ink-1); margin-left: -2px; }
    .m-driverchips__empty[b-x2mmx6iw8m] { font-size: 12px; color: var(--tt-ink-4); line-height: 1.4; }

    /* ── mode chooser ── */
    .m-chooser__body[b-x2mmx6iw8m] { flex: 1; padding: var(--tt-s-8) var(--tt-s-20) var(--tt-s-24); display: flex; flex-direction: column; }
    .m-choice[b-x2mmx6iw8m] {
        display: flex; align-items: center; gap: var(--tt-s-14); width: 100%; padding: var(--tt-s-16) var(--tt-s-14);
        background: var(--tt-surface-1); border: var(--tt-border-w) solid var(--tt-line); border-radius: var(--tt-radius-8);
        text-align: left; cursor: pointer; font-family: inherit; margin-bottom: var(--tt-s-10);
        transition: border-color 120ms;
    }
    .m-choice:active[b-x2mmx6iw8m] { border-color: var(--tt-ink-1); }
    .m-choice__icon[b-x2mmx6iw8m] {
        width: 44px; height: 44px; border-radius: var(--tt-radius-8); background: var(--tt-surface-2);
        display: flex; align-items: center; justify-content: center; color: var(--tt-ink-1); flex: 0 0 44px;
    }
    .m-choice__body[b-x2mmx6iw8m] { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
    .m-choice__title[b-x2mmx6iw8m] { font-size: 16px; font-weight: var(--tt-weight-semibold); color: var(--tt-ink-1); }
    .m-choice__sub[b-x2mmx6iw8m] { font-size: 12px; color: var(--tt-ink-3); line-height: 1.4; }
    .m-choice__chevron[b-x2mmx6iw8m] { color: var(--tt-ink-4); display: inline-flex; }

    /* ── run totals (Step 2) ── */
    .m-runtotals[b-x2mmx6iw8m] { display: grid; grid-template-columns: repeat(4, 1fr); background: #0e1418; color: #fff; }
    .m-runtotals__cell[b-x2mmx6iw8m] {
        display: flex; flex-direction: column; align-items: flex-start; padding: var(--tt-s-14) var(--tt-s-12);
        border-right: var(--tt-border-w) solid rgba(255,255,255,0.08);
    }
    .m-runtotals__cell:last-child[b-x2mmx6iw8m] { border-right: none; }
    .m-runtotals__num[b-x2mmx6iw8m] {
        font-family: var(--tt-font-mono); font-size: 24px; font-weight: var(--tt-weight-book); line-height: 1;
        letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
    }
    .m-runtotals__unit[b-x2mmx6iw8m] { font-size: 11px; color: rgba(255,255,255,0.5); font-weight: var(--tt-weight-medium); margin-left: 3px; text-transform: uppercase; }
    .m-runtotals__lbl[b-x2mmx6iw8m] {
        font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
        color: rgba(255,255,255,0.5); font-weight: var(--tt-weight-semibold); margin-top: var(--tt-s-4);
    }

    /* ── session row (Step 2) ──
       top row: [num] [name + sub] [best lap] [lap stepper]; inputs below.
       Delete × floats in the left margin (gutter), so num + title sit flush left. */
    .m-sessrow[b-x2mmx6iw8m] {
        position: relative;
        display: grid;
        grid-template-columns: 36px 1fr auto auto;
        grid-template-areas: "num body best laps" "inputs inputs inputs inputs";
        align-items: center; gap: var(--tt-s-8); row-gap: var(--tt-s-10); padding: var(--tt-s-14) var(--tt-s-4);
        border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
    }
    .m-sessrow__del[b-x2mmx6iw8m] {
        position: absolute; left: -18px; top: var(--tt-s-22);
        background: transparent; border: none; color: var(--tt-ink-4); cursor: pointer;
        width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
        border-radius: var(--tt-radius-4); padding: 0;
    }
    .m-sessrow__del svg[b-x2mmx6iw8m] { width: 13px; height: 13px; }
    .m-sessrow__num[b-x2mmx6iw8m] {
        grid-area: num; width: 36px; height: 36px; border-radius: var(--tt-radius-4); background: #0e1418; color: #fff;
        font-family: var(--tt-font-mono); font-size: 16px; font-weight: var(--tt-weight-book);
        display: flex; align-items: center; justify-content: center;
    }
    .m-sessrow__body[b-x2mmx6iw8m] { grid-area: body; display: flex; flex-direction: column; gap: var(--tt-s-2); min-width: 0; }
    /* editable session name - matches desktop .sess-row__label */
    .m-sessrow__lbl[b-x2mmx6iw8m] {
        width: 100%; height: 28px; padding: 0; border: none; border-bottom: var(--tt-border-w) solid transparent;
        font: inherit; font-size: 14px; font-weight: var(--tt-weight-semibold); color: var(--tt-ink-1);
        background: transparent; outline: none; transition: border-color 100ms; box-sizing: border-box;
    }
    .m-sessrow__lbl:hover[b-x2mmx6iw8m] { border-bottom-color: var(--tt-line-soft); }
    .m-sessrow__lbl:focus[b-x2mmx6iw8m] { border-bottom: 2px solid var(--tt-ink-1); }
    .m-sessrow__sub[b-x2mmx6iw8m] { font-size: 11px; color: var(--tt-ink-3); }

    /* best lap - matches the desktop .sess-row__bestlap (mono, bold, underline focus) */
    /* ::deep since #349: the input is rendered by LapTimeInput, and scoped CSS only stamps its
       attribute on elements in this page's own markup. */
    .m-sessrow[b-x2mmx6iw8m]  .m-sessrow__best {
        grid-area: best; width: 72px; height: 30px; padding: 0 var(--tt-s-6);
        border: none; border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
        font-family: var(--tt-font-mono); font-size: 15px; font-weight: var(--tt-weight-bold); text-align: center;
        color: var(--tt-ink-1); background: transparent; outline: none; box-sizing: border-box;
        transition: border-color 100ms;
    }
    .m-sessrow[b-x2mmx6iw8m]  .m-sessrow__best:hover { border-bottom-color: var(--tt-line); }
    .m-sessrow[b-x2mmx6iw8m]  .m-sessrow__best:focus { border-bottom: 2px solid var(--tt-ink-1); }

    /* lap stepper - matches the desktop .sess-row__stepper (boxed −/input/+) */
    .m-sessrow__stepper[b-x2mmx6iw8m] {
        grid-area: laps; display: inline-grid; grid-template-columns: 30px 40px 30px;
        height: 32px; border: var(--tt-border-w) solid var(--tt-line-soft); border-radius: var(--tt-radius-4); overflow: hidden;
    }
    .m-sessrow__step-btn[b-x2mmx6iw8m] {
        background: var(--tt-surface-2); border: 0; font: inherit; font-size: 16px; color: var(--tt-ink-2);
        cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0;
        transition: background 100ms, color 100ms;
    }
    .m-sessrow__step-btn:active[b-x2mmx6iw8m] { background: var(--tt-ink-1); color: var(--tt-surface-0); }
    .m-sessrow__step-btn:first-child[b-x2mmx6iw8m] { border-right: var(--tt-border-w) solid var(--tt-line); }
    .m-sessrow__step-btn:last-child[b-x2mmx6iw8m]  { border-left:  var(--tt-border-w) solid var(--tt-line); }
    .m-sessrow__step-input[b-x2mmx6iw8m] {
        text-align: center; border: none; background: transparent; font-family: var(--tt-font-mono);
        font-size: 14px; font-weight: var(--tt-weight-semibold); color: var(--tt-ink-1); outline: none;
        -moz-appearance: textfield; min-width: 0; width: 100%;
    }
    .m-sessrow__step-input[b-x2mmx6iw8m]::-webkit-inner-spin-button,
    .m-sessrow__step-input[b-x2mmx6iw8m]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

    /* per-session inputs: driver / temp / conditions on one row */
    .m-sessrow__inputs[b-x2mmx6iw8m] { grid-area: inputs; display: flex; gap: var(--tt-s-8); align-items: stretch; }
    .m-sessfield[b-x2mmx6iw8m] { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
    .m-sessfield--driver[b-x2mmx6iw8m] { flex: 2 1 0; }
    .m-sessfield--temp[b-x2mmx6iw8m]   { flex: 0 0 84px; }
    .m-sessfield--cond[b-x2mmx6iw8m]   { flex: 1.4 1 0; }
    .m-sessfield__lbl[b-x2mmx6iw8m] {
        font-size: 10px; font-weight: var(--tt-weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tt-ink-3);
    }
    .m-sessfield__input[b-x2mmx6iw8m] {
        width: 100%; font: inherit; font-size: 13px; color: var(--tt-ink-1);
        background: var(--tt-surface-1); border: var(--tt-border-w) solid var(--tt-line); border-radius: var(--tt-radius-8);
        padding: var(--tt-s-8); outline: none; box-sizing: border-box; min-width: 0;
    }
    .m-sessfield__input:focus[b-x2mmx6iw8m] { border-color: var(--tt-ink-1); }
    .m-sessfield__inputwrap[b-x2mmx6iw8m] { position: relative; display: block; }
    .m-sessfield__inputwrap .m-sessfield__input[b-x2mmx6iw8m] { padding-right: 26px; }
    .m-sessfield__suffix[b-x2mmx6iw8m] {
        position: absolute; right: var(--tt-s-8); top: 50%; transform: translateY(-50%);
        font-size: 11px; color: var(--tt-ink-3); pointer-events: none;
    }
    .m-sessfield__select[b-x2mmx6iw8m] {
        appearance: none; -webkit-appearance: none;
        background-image: linear-gradient(45deg, transparent 50%, var(--tt-ink-3) 50%),
                          linear-gradient(135deg, var(--tt-ink-3) 50%, transparent 50%);
        background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
        background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: var(--tt-s-24);
    }

    .m-addrow[b-x2mmx6iw8m] {
        display: inline-flex; align-items: center; justify-content: center; gap: var(--tt-s-6); width: 100%;
        padding: var(--tt-s-14); background: transparent; border: var(--tt-border-w) dashed var(--tt-line); border-radius: var(--tt-radius-8);
        font-family: inherit; font-size: 13px; font-weight: var(--tt-weight-semibold); color: var(--tt-ink-3); cursor: pointer;
        margin-top: var(--tt-s-12); letter-spacing: 0.04em; text-transform: uppercase;
    }
    .m-addrow:active[b-x2mmx6iw8m] { border-color: var(--tt-ink-1); color: var(--tt-ink-1); }

    /* ── impact (Step 3) ──
       filter chips - same Chip component / behaviour as the desktop
       Event Impact panel (healthy / warnings / critical). */
    .m-impact-chips[b-x2mmx6iw8m] {
        display: flex; flex-wrap: wrap; gap: var(--tt-s-8);
        padding: var(--tt-s-4) var(--tt-s-16) var(--tt-s-12); border-bottom: var(--tt-border-w) solid var(--tt-line);
    }

    /* Step 3 rows use the shared <ConsumableRow Variant="event"> component,
       matching the desktop Event Impact panel exactly. */

    /* ── bottom bar (sticky) ── */
    .m-bottombar[b-x2mmx6iw8m] {
        position: sticky; bottom: 0;
        border-top: var(--tt-border-w) solid var(--tt-line); background: var(--tt-surface-1); padding: var(--tt-s-12) var(--tt-s-16) var(--tt-s-16);
    }
    .m-bottombar__inner[b-x2mmx6iw8m] { display: flex; gap: var(--tt-s-8); }
    .m-btn[b-x2mmx6iw8m] {
        display: inline-flex; align-items: center; justify-content: center; gap: var(--tt-s-6); font-family: inherit;
        font-size: 15px; font-weight: var(--tt-weight-semibold); height: 48px; padding: 0 var(--tt-s-18); border-radius: var(--tt-radius-8);
        border: var(--tt-border-w) solid transparent; cursor: pointer;
    }
    .m-btn svg[b-x2mmx6iw8m] { width: 16px; height: 16px; }
    .m-btn--block[b-x2mmx6iw8m] { width: 100%; }
    .m-btn--grow[b-x2mmx6iw8m] { flex: 1; }
    .m-btn--primary[b-x2mmx6iw8m] { background: var(--tt-ink-1); color: var(--tt-surface-1); border-color: var(--tt-ink-1); }
    .m-btn--primary:active:not(:disabled)[b-x2mmx6iw8m] { background: var(--tt-ink-2); border-color: var(--tt-ink-2); }
    .m-btn--primary:disabled[b-x2mmx6iw8m] { opacity: 0.4; cursor: not-allowed; }
    .m-btn--ghost[b-x2mmx6iw8m] { background: transparent; color: var(--tt-ink-1); border-color: var(--tt-line); }

    /* ── bottom-sheet pickers ── */
    .m-sheet-backdrop[b-x2mmx6iw8m] {
        position: fixed; inset: 0; z-index: 1000; background: rgba(14,20,24,0.45);
        display: flex; align-items: flex-end; justify-content: center;
        animation: m-sheet-fade-b-x2mmx6iw8m 160ms ease-out;
    }
    @keyframes m-sheet-fade-b-x2mmx6iw8m { from { opacity: 0; } to { opacity: 1; } }
    .m-sheet[b-x2mmx6iw8m] {
        width: 100%; max-height: 72vh; background: var(--tt-surface-1);
        border-radius: var(--tt-radius-16) var(--tt-radius-16) 0 0; padding: var(--tt-s-10) var(--tt-s-16) calc(var(--tt-s-16) + env(safe-area-inset-bottom));
        display: flex; flex-direction: column; box-shadow: 0 -8px 32px rgba(0,0,0,0.25);
        animation: m-sheet-up-b-x2mmx6iw8m 220ms cubic-bezier(0.18, 0.89, 0.32, 1.1);
    }
    @keyframes m-sheet-up-b-x2mmx6iw8m { from { transform: translateY(100%); } to { transform: translateY(0); } }
    .m-sheet__handle[b-x2mmx6iw8m] { width: 36px; height: 4px; border-radius: var(--tt-radius-pill); background: var(--tt-line); margin: var(--tt-s-4) auto var(--tt-s-12); }
    .m-sheet__title[b-x2mmx6iw8m] {
        font-size: 12px; font-weight: var(--tt-weight-bold); letter-spacing: 0.1em; text-transform: uppercase;
        color: var(--tt-ink-4); margin: 0 var(--tt-s-4) var(--tt-s-10);
    }
    .m-sheet__list[b-x2mmx6iw8m] { overflow-y: auto; display: flex; flex-direction: column; gap: var(--tt-s-6); }
    .m-sheet__opt[b-x2mmx6iw8m] {
        display: flex; align-items: center; gap: var(--tt-s-12); width: 100%; padding: var(--tt-s-10);
        background: var(--tt-surface-1); border: var(--tt-border-w) solid var(--tt-line); border-radius: var(--tt-radius-8);
        text-align: left; cursor: pointer; font-family: inherit;
    }
    .m-sheet__opt.is-on[b-x2mmx6iw8m] { border-color: var(--tt-primary); background: var(--tt-accent-soft); }
    .m-sheet__opt-hero[b-x2mmx6iw8m] {
        width: 60px; height: 44px; border-radius: var(--tt-radius-4); flex: 0 0 60px;
        background: var(--tt-surface-2) center / cover no-repeat;
    }
    .m-sheet__opt-hero--contain[b-x2mmx6iw8m] { background-size: contain; }
    .m-sheet__opt-name[b-x2mmx6iw8m] {
        flex: 1; font-size: 15px; font-weight: var(--tt-weight-semibold); color: var(--tt-ink-1);
        display: flex; flex-direction: column; gap: var(--tt-s-2); min-width: 0;
    }
    .m-sheet__opt-meta[b-x2mmx6iw8m] { font-size: 12px; font-weight: var(--tt-weight-regular); color: var(--tt-ink-3); }
    .m-sheet__opt-check[b-x2mmx6iw8m] { color: var(--tt-primary); display: inline-flex; flex-shrink: 0; }

    /* ═══ FORECAST wizard - accents + departures from the Log wizard ═══
       Forecast is a forward-looking projection: the accent goes blue
       (matching the desktop --lp-fc-forecast #2563eb), per-session weather
       becomes a read-only forecast pill (no temp/conditions entry, nothing
       run yet so no best lap), and Step 3 paints existing + forecast bars. */
    .m-screen--forecast[b-x2mmx6iw8m] { --tt-fc: var(--tt-status-forecast); --tt-fc-soft: #eaf0fd; }
    .m-screen--forecast .m-stepbar__fill[b-x2mmx6iw8m] { background: var(--tt-fc); }
    .m-screen--forecast .m-btn--primary:active:not(:disabled)[b-x2mmx6iw8m] {
        background: var(--tt-fc); border-color: var(--tt-fc);
    }
    .m-screen--forecast .m-addrow:active[b-x2mmx6iw8m] { border-color: var(--tt-fc); color: var(--tt-fc); }

    /* Forecast badge riding next to the planned date. */
    .m-fc-badge[b-x2mmx6iw8m] {
        display: inline-flex; align-items: center; gap: var(--tt-s-4);
        font-size: 9px; font-weight: var(--tt-weight-bold); letter-spacing: 0.12em; text-transform: uppercase;
        color: var(--tt-fc); background: var(--tt-fc-soft);
        padding: 3px 7px; border-radius: var(--tt-radius-pill); flex-shrink: 0;
    }
    .m-fc-badge svg[b-x2mmx6iw8m] { width: 11px; height: 11px; }

    /* Forecast-tinted callout. */
    .m-callout--forecast[b-x2mmx6iw8m] {
        background: var(--tt-fc-soft);
        border: var(--tt-border-w) solid color-mix(in srgb, var(--tt-fc) 22%, transparent);
    }
    .m-callout--forecast svg[b-x2mmx6iw8m] { color: var(--tt-fc); }

    /* Step 2 row drops the best-lap column (no laps run yet). */
    .m-sessrow--fc[b-x2mmx6iw8m] {
        grid-template-columns: 36px 1fr auto;
        grid-template-areas: "num body laps" "inputs inputs inputs";
    }
    .m-fc-inputs .m-sessfield--driver[b-x2mmx6iw8m] { flex: 1.3 1 0; }

    /* Read-only forecast weather pill - replaces the editable temp/conditions
       fields from the Log wizard. Shows the retrieved forecast; when none is
       available (no ZIP / API failure) it shows a muted state rather than a
       fabricated value. */
    .m-fc-weather[b-x2mmx6iw8m] { flex: 1 1 0; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
    .m-fc-weather__lbl[b-x2mmx6iw8m] {
        font-size: 10px; font-weight: var(--tt-weight-semibold); letter-spacing: 0.08em; text-transform: uppercase;
        color: var(--tt-fc); display: inline-flex; align-items: center; gap: var(--tt-s-4);
    }
    .m-fc-weather__val[b-x2mmx6iw8m] {
        display: inline-flex; align-items: center; gap: var(--tt-s-6); height: 38px; padding: 0 var(--tt-s-10);
        border: var(--tt-border-w) dashed color-mix(in srgb, var(--tt-fc) 38%, transparent);
        background: var(--tt-fc-soft); border-radius: var(--tt-radius-8);
        font-size: 13px; font-weight: var(--tt-weight-semibold); color: var(--tt-ink-1);
        white-space: nowrap; overflow: hidden;
    }
    .m-fc-weather__cond[b-x2mmx6iw8m] {
        font-weight: var(--tt-weight-medium); color: var(--tt-ink-3); font-size: 12px;
        overflow: hidden; text-overflow: ellipsis;
    }
    /* No forecast available - muted, neutral (not the forecast accent). */
    .m-fc-weather__val--empty[b-x2mmx6iw8m] {
        border: var(--tt-border-w) dashed var(--tt-line); background: transparent;
        color: var(--tt-ink-4); font-weight: var(--tt-weight-medium);
    }

    /* Step 3 legend - explains the existing / forecast / threshold vocabulary. */
    .m-fc-legend[b-x2mmx6iw8m] {
        display: flex; align-items: center; gap: var(--tt-s-14); flex-wrap: wrap;
        padding: var(--tt-s-10) var(--tt-s-16) var(--tt-s-6); font-size: 10px; color: var(--tt-ink-3);
    }
    .m-fc-legend__item[b-x2mmx6iw8m] { display: inline-flex; align-items: center; gap: 5px; }
    .m-fc-legend__swatch[b-x2mmx6iw8m] { width: 16px; height: 8px; border-radius: var(--tt-radius-2); flex-shrink: 0; }
    .m-fc-legend__swatch--existing[b-x2mmx6iw8m] { background: var(--tt-ink-1); }
    .m-fc-legend__swatch--committed[b-x2mmx6iw8m] { background: var(--tt-status-forecast); }
    .m-fc-legend__swatch--forecast[b-x2mmx6iw8m] {
        background-color: var(--tt-status-forecast);
        background-image: repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(255,255,255,0.4) 2px, rgba(255,255,255,0.4) 4px);
    }
    .m-fc-legend__swatch--tick[b-x2mmx6iw8m] {
        width: 2px; height: 12px; border-radius: 0;
        background: var(--tt-ink-1); box-shadow: 4px 0 0 var(--tt-primary);
    }

    /* ═══ PLAN TRIP wizard - trip name, stop cards, add-stop picker,
       trip-dates sheet, and the pack list. Inherits the forecast accent
       (a trip is a series of forecast events). ═══ */
    .m-tripname[b-x2mmx6iw8m] {
        width: 100%; box-sizing: border-box; margin: var(--tt-s-2) 0 var(--tt-s-4);
        padding: var(--tt-s-12) var(--tt-s-14); border: var(--tt-border-w) solid var(--tt-line); border-radius: var(--tt-radius-8);
        background: var(--tt-surface-1); font: inherit; font-size: 16px; font-weight: var(--tt-weight-semibold);
        color: var(--tt-ink-1); letter-spacing: -0.01em;
    }
    .m-tripname[b-x2mmx6iw8m]::placeholder { color: var(--tt-ink-4); font-weight: var(--tt-weight-medium); }
    .m-tripname:focus[b-x2mmx6iw8m] {
        outline: none; border-color: var(--tt-fc);
        box-shadow: 0 0 0 3px var(--tt-fc-soft);
    }

    /* Stop cards - each stop is a forecast event: photo header (track image)
       with index + remove, over a body with date, weather (when known),
       track name, and roll-up meta. */
    .m-stop[b-x2mmx6iw8m] {
        margin-top: var(--tt-s-10); border: var(--tt-border-w) solid var(--tt-line); border-radius: var(--tt-radius-12);
        overflow: hidden; background: var(--tt-surface-1);
    }
    .m-stop:first-of-type[b-x2mmx6iw8m] { margin-top: var(--tt-s-2); }
    .m-stop__hero[b-x2mmx6iw8m] {
        position: relative; height: 88px; background-size: cover; background-position: center;
        background-color: var(--tt-surface-2);
    }
    .m-stop__hero[b-x2mmx6iw8m]::after {
        content: ""; position: absolute; inset: 0;
        background: linear-gradient(180deg, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0) 45%);
    }
    .m-stop__idx[b-x2mmx6iw8m] {
        position: absolute; top: var(--tt-s-8); left: var(--tt-s-8); z-index: 1;
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 26px; height: 26px; padding: 0 var(--tt-s-6); border-radius: var(--tt-radius-8);
        background: rgba(0,0,0,0.55); color: #fff;
        font-family: var(--tt-font-mono); font-size: 13px; font-weight: var(--tt-weight-semibold);
    }
    .m-stop__del[b-x2mmx6iw8m] {
        position: absolute; top: var(--tt-s-8); right: var(--tt-s-8); z-index: 1;
        width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
        border: 0; border-radius: var(--tt-radius-8); background: rgba(0,0,0,0.55); color: #fff; cursor: pointer; padding: 0;
    }
    .m-stop__del:active[b-x2mmx6iw8m] { background: var(--tt-ink-1); }
    .m-stop__body[b-x2mmx6iw8m] { padding: var(--tt-s-10) var(--tt-s-12) var(--tt-s-12); display: flex; flex-direction: column; gap: 3px; }
    .m-stop__top[b-x2mmx6iw8m] { display: flex; align-items: center; justify-content: space-between; gap: var(--tt-s-8); }
    .m-stop__date[b-x2mmx6iw8m] {
        font-size: 11px; font-weight: var(--tt-weight-semibold); letter-spacing: 0.06em;
        text-transform: uppercase; color: var(--tt-ink-3);
    }
    .m-stop__wx[b-x2mmx6iw8m] {
        display: inline-flex; align-items: center; gap: var(--tt-s-4);
        font-size: 12px; font-weight: var(--tt-weight-semibold); color: var(--tt-ink-2); white-space: nowrap;
    }
    .m-stop__track[b-x2mmx6iw8m] {
        font-size: 16px; font-weight: var(--tt-weight-semibold); color: var(--tt-ink-1);
        letter-spacing: -0.01em; line-height: 1.2;
    }
    .m-stop__meta[b-x2mmx6iw8m] { font-size: 12px; color: var(--tt-ink-3); }

    /* Add-stop picker (inline) - choose an existing planned event or create new. */
    .m-addpick[b-x2mmx6iw8m] {
        margin-top: var(--tt-s-10); border: var(--tt-border-w) solid var(--tt-line); border-radius: var(--tt-radius-12);
        background: var(--tt-surface-1); padding: var(--tt-s-8);
        display: flex; flex-direction: column; gap: var(--tt-s-4);
    }
    .m-addpick__eb[b-x2mmx6iw8m] {
        font-size: 10px; font-weight: var(--tt-weight-semibold); letter-spacing: 0.1em; text-transform: uppercase;
        color: var(--tt-ink-4); padding: var(--tt-s-4) var(--tt-s-6) var(--tt-s-2);
    }
    .m-addpick__empty[b-x2mmx6iw8m] { font-size: 12px; color: var(--tt-ink-3); padding: var(--tt-s-4) var(--tt-s-6) var(--tt-s-6); }
    .m-addpick__opt[b-x2mmx6iw8m] {
        display: flex; align-items: center; gap: var(--tt-s-8); width: 100%; padding: var(--tt-s-10);
        border: var(--tt-border-w) solid var(--tt-line); border-radius: var(--tt-radius-8); background: var(--tt-surface-1);
        font: inherit; font-size: 13px; color: var(--tt-ink-1); text-align: left; cursor: pointer;
    }
    .m-addpick__opt:active[b-x2mmx6iw8m] { border-color: var(--tt-fc); }
    .m-addpick__opt svg[b-x2mmx6iw8m] { width: 16px; height: 16px; color: var(--tt-fc); flex-shrink: 0; }
    .m-addpick__opt-name[b-x2mmx6iw8m] { font-weight: var(--tt-weight-semibold); }
    .m-addpick__opt-meta[b-x2mmx6iw8m] { margin-left: auto; font-size: 11px; color: var(--tt-ink-3); }
    .m-addpick__opt--create[b-x2mmx6iw8m] { border-style: dashed; }
    .m-addpick__opt--create svg[b-x2mmx6iw8m] { color: var(--tt-ink-3); }
    .m-addpick__cancel[b-x2mmx6iw8m] {
        margin-top: var(--tt-s-2); padding: var(--tt-s-8); border: 0; background: transparent;
        font: inherit; font-size: 12px; font-weight: var(--tt-weight-semibold); color: var(--tt-ink-3); cursor: pointer;
    }

    /* Trip-dates bottom sheet. */
    .m-datesheet[b-x2mmx6iw8m] { display: flex; flex-direction: column; gap: var(--tt-s-12); padding: var(--tt-s-4) 0 var(--tt-s-2); }
    .m-datesheet__field[b-x2mmx6iw8m] { display: flex; flex-direction: column; gap: var(--tt-s-4); }
    .m-datesheet__lbl[b-x2mmx6iw8m] {
        font-size: 10px; font-weight: var(--tt-weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tt-ink-3);
    }
    .m-datesheet__input[b-x2mmx6iw8m] {
        width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; color: var(--tt-ink-1);
        background: var(--tt-surface-1); border: var(--tt-border-w) solid var(--tt-line); border-radius: var(--tt-radius-8); padding: 11px var(--tt-s-12);
    }
    .m-datesheet__input:focus[b-x2mmx6iw8m] { outline: none; border-color: var(--tt-fc); }
    .m-datesheet__note[b-x2mmx6iw8m] { font-size: 12px; color: var(--tt-ink-4); line-height: 1.4; margin: 0; }

    /* Pack list (Step 3) - expandable per-stop timeline. */
    .m-pack[b-x2mmx6iw8m] {
        margin-top: var(--tt-s-8); border: var(--tt-border-w) solid var(--tt-line); border-radius: var(--tt-radius-12);
        overflow: hidden; background: var(--tt-surface-1);
    }
    .m-pack:first-of-type[b-x2mmx6iw8m] { margin-top: var(--tt-s-2); }
    .m-pack.is-open[b-x2mmx6iw8m] { border-color: var(--tt-fc); }
    .m-pack--suggested[b-x2mmx6iw8m] { border-style: dashed; }
    .m-pack__head[b-x2mmx6iw8m] {
        display: flex; align-items: center; gap: var(--tt-s-10); width: 100%; padding: var(--tt-s-10) var(--tt-s-12);
        border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer;
    }
    .m-pack__thumb[b-x2mmx6iw8m] {
        width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--tt-radius-8); overflow: hidden;
        background: var(--tt-surface-2); display: flex; align-items: center; justify-content: center;
    }
    .m-pack__thumb img[b-x2mmx6iw8m] { width: 100%; height: 100%; object-fit: contain; padding: var(--tt-s-4); box-sizing: border-box; }
    .m-pack__body[b-x2mmx6iw8m] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--tt-s-2); }
    .m-pack__name[b-x2mmx6iw8m] {
        font-size: 14px; font-weight: var(--tt-weight-semibold); color: var(--tt-ink-1);
        display: flex; align-items: center; gap: var(--tt-s-6); flex-wrap: wrap;
    }
    .m-pack__tag[b-x2mmx6iw8m] {
        font-size: 9px; font-weight: var(--tt-weight-bold); letter-spacing: 0.1em; text-transform: uppercase;
        color: var(--tt-fc); background: var(--tt-fc-soft); padding: var(--tt-s-2) var(--tt-s-6); border-radius: var(--tt-radius-pill);
    }
    .m-pack__sub[b-x2mmx6iw8m] { font-size: 12px; color: var(--tt-ink-3); }
    .m-pack__qty[b-x2mmx6iw8m] {
        flex-shrink: 0; text-align: right; font-family: var(--tt-font-mono);
        font-size: 16px; font-weight: var(--tt-weight-semibold); color: var(--tt-ink-1); line-height: 1;
    }
    .m-pack__qty small[b-x2mmx6iw8m] {
        display: block; margin-top: var(--tt-s-2); font-family: inherit; font-size: 9px; font-weight: var(--tt-weight-medium);
        letter-spacing: 0.04em; color: var(--tt-ink-4);
    }
    .m-pack__chev[b-x2mmx6iw8m] { flex-shrink: 0; color: var(--tt-ink-4); transition: transform 180ms; display: inline-flex; }
    .m-pack.is-open .m-pack__chev[b-x2mmx6iw8m] { transform: rotate(180deg); }
    .m-pack__timeline[b-x2mmx6iw8m] { border-top: var(--tt-border-w) solid var(--tt-line-soft); padding: var(--tt-s-6) var(--tt-s-12) var(--tt-s-10); display: flex; flex-direction: column; }
    .m-pack__tl[b-x2mmx6iw8m] {
        display: flex; align-items: center; justify-content: space-between; gap: var(--tt-s-10);
        padding: 7px 0; border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
    }
    .m-pack__tl:last-child[b-x2mmx6iw8m] { border-bottom: 0; }
    .m-pack__tl-when[b-x2mmx6iw8m] {
        font-size: 10px; font-weight: var(--tt-weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--tt-ink-3);
    }
    .m-pack__tl-pct[b-x2mmx6iw8m] { font-family: var(--tt-font-mono); font-size: 12px; color: var(--tt-ink-2); white-space: nowrap; }
    .m-pack__tl--alert .m-pack__tl-when[b-x2mmx6iw8m] { color: var(--tt-primary); }
    .m-pack__tl--alert .m-pack__tl-pct[b-x2mmx6iw8m] { color: var(--tt-primary); font-weight: var(--tt-weight-semibold); }
}

/* /Pages/Feeds.razor.rz.scp.css */
/* ============================================================
 * Discovery feeds management (#110) — subscriptions + sync health.
 * ============================================================ */

/* Shell: .tt-page in app.css (#400). */





.feeds__admin-link[b-aibbvvu58k] {
    font-size: var(--tt-text-sm);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-link);
    text-decoration: none;
    white-space: nowrap;
}

.feeds__muted[b-aibbvvu58k] {
    color: var(--tt-ink-4);
    font-size: var(--tt-text-sm);
    margin: 0;
}

/* Stat strip — mirrors the Events / trip stat design */
/* Stat strip retired → <StatStrip>/<StatTile> component. */

/* Panels use .tt-panels (app.css) - see #400. */

/* ── Feed rows ────────────────────────────────────────────────── */
.feed-list[b-aibbvvu58k] {
    display: flex;
    flex-direction: column;
}

.feed-row[b-aibbvvu58k] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-10);
    padding: var(--tt-s-10) 0;
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
    min-width: 0;
}

.feed-row:first-child[b-aibbvvu58k] { border-top: none; }

.feed-row__icon[b-aibbvvu58k] {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--tt-radius-4);
    background: var(--tt-surface-1);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    color: var(--tt-ink-4);
}

.feed-row__body[b-aibbvvu58k] {
    flex: 1;
    min-width: 0;
}

.feed-row__name[b-aibbvvu58k] {
    font-size: var(--tt-text-sm);
    font-weight: var(--tt-weight-semibold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.feed-row__detail[b-aibbvvu58k] {
    margin-top: 1px;
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.feed-row__detail--error[b-aibbvvu58k] { color: var(--tt-cta); }

/* Health pill → <Badge> (variant via HealthVariant). */

.feed-row__icon-btn[b-aibbvvu58k] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: var(--tt-border-w) solid var(--tt-line-soft);
    background: var(--tt-surface-0);
    border-radius: var(--tt-radius-4);
    color: var(--tt-ink-3);
    cursor: pointer;
}

.feed-row__icon-btn:hover:not(:disabled)[b-aibbvvu58k] { background: var(--tt-surface-1); }

.feed-chip[b-aibbvvu58k] {
    flex-shrink: 0;
    padding: var(--tt-s-4) var(--tt-s-10);
    font-family: inherit;
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-3);
    background: var(--tt-surface-0);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-pill);
    cursor: pointer;
}

.feed-chip.is-on[b-aibbvvu58k] {
    color: var(--tt-surface-0);
    background: var(--tt-ink-1);
    border-color: var(--tt-ink-1);
}

.feed-row__unsub[b-aibbvvu58k] {
    flex-shrink: 0;
    display: inline-flex;
    padding: var(--tt-s-4);
    background: none;
    border: none;
    color: var(--tt-ink-4);
    cursor: pointer;
}

.feed-row__unsub:hover:not(:disabled)[b-aibbvvu58k] { color: var(--tt-ink-1); }

.feed-row__sub[b-aibbvvu58k] { flex-shrink: 0; padding: var(--tt-s-4) var(--tt-s-10); font-size: var(--tt-text-xs); }

/* ── Attach bar (curated note + search) ──────────────────────── */
.feeds__attach-bar[b-aibbvvu58k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--tt-s-10);
    margin-bottom: var(--tt-s-8);
}

.feeds__curated[b-aibbvvu58k] {
    display: inline-flex;
    align-items: center;
    gap: var(--tt-s-4);
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-4);
}

.feeds__request[b-aibbvvu58k] {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-link);
    cursor: pointer;
}

.feeds__search[b-aibbvvu58k] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-8);
    width: 240px;
    max-width: 100%;
    padding: var(--tt-s-6) var(--tt-s-10);
    background: var(--tt-surface-0);
    border: var(--tt-border-w) solid var(--tt-line);
    border-radius: var(--tt-radius-4);
    color: var(--tt-ink-4);
}

.feeds__search-input[b-aibbvvu58k] {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: none;
    font-family: inherit;
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-1);
}

.feeds__request-input[b-aibbvvu58k] {
    width: 100%;
    padding: var(--tt-s-8) var(--tt-s-10);
    font-family: inherit;
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-1);
    background: var(--tt-surface-0);
    border: var(--tt-border-w) solid var(--tt-line);
    border-radius: var(--tt-radius-4);
    outline: none;
    resize: vertical;
}

.feeds__request-sent[b-aibbvvu58k] {
    margin: var(--tt-s-10) 0 0;
    font-size: var(--tt-text-xs);
    color: var(--tt-status-ok);
}

.feeds__request-error[b-aibbvvu58k] {
    margin: var(--tt-s-10) 0 0;
    font-size: var(--tt-text-xs);
    color: var(--tt-cta);
}
/* /Pages/Garage.razor.rz.scp.css */
/* Shell: .tt-page + --flows in app.css (#400).
   The three collections are CardDeckCollection, which owns its own head, deck and rail. */

.tt-page-error[b-q46584inal] {
    font-size: var(--tt-text-sm);
    color: var(--tt-danger);
    margin: 0;
}
/* /Pages/Home.razor.rz.scp.css */
/* styles moved to wwwroot/css/home.css and wwwroot/css/splash.css */
/* /Pages/Plan.razor.rz.scp.css */
/* ============================================================
 * Plan pillar - Season Calendar landing (shell, #100)
 * Surfaces (calendar #101, discover #107, feeds #110) mount here.
 * ============================================================ */

/* Shell: .tt-page + --flows in app.css (#400) - this page hosts one CalendarMonth, so it takes
   the viewport rather than the 1080 column. The padding-right transition stays here because it is
   not shell furniture: it is how the drawer pushes the calendar aside (.plan--pushed below). */
.plan[b-ftq4i6jm5n] {
    transition: padding-right .28s cubic-bezier(.4, 0, .2, 1);
}

/* When the docked Discover rail is open, reserve room so it doesn't cover the calendar (#130) */
.plan--pushed[b-ftq4i6jm5n] {
    /* Beats .tt-page's padding shorthand, which also sets padding-right. */
    padding-right: calc(340px + var(--tt-s-24));
}

@media (max-width: 900px) {
    /* narrow screens: the rail overlays the calendar instead of pushing it */
    .plan--pushed[b-ftq4i6jm5n] { padding-right: var(--tt-s-24); }
}




/* Discovery layer toggle */
.plan__layer[b-ftq4i6jm5n] {
    display: inline-flex;
    align-items: center;
    gap: var(--tt-s-6);
    height: 34px;
    padding: 0 var(--tt-s-12);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-8);
    background: var(--tt-surface-0);
    color: var(--tt-ink-3);
    font-size: var(--tt-text-sm);
    font-weight: var(--tt-weight-semibold);
    cursor: pointer;
}

.plan__layer.is-on[b-ftq4i6jm5n] {
    border-color: var(--tt-ink-4);
    color: var(--tt-ink-1);
    background: var(--tt-surface-1);
}

/* Layer-visibility chips in the calendar header (v2.0). Off = muted outline;
   On = the layer's own calendar-entry colours. */
.plan__layer-chip[b-ftq4i6jm5n] {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 var(--tt-s-8);
    font-family: inherit;
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-4);
    background: transparent;
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-4);
    cursor: pointer;
    white-space: nowrap;
}

.plan__layer-chip--discovered.is-on[b-ftq4i6jm5n] {
    background: var(--tt-surface-1);
    border-style: dashed;
    border-color: var(--tt-ink-4);
    color: var(--tt-ink-3);
}

.plan__layer-chip--watched.is-on[b-ftq4i6jm5n] {
    background: var(--tt-accent-soft);
    border-color: var(--tt-accent);
    color: var(--tt-accent);
}

.plan__layer-chip--planned.is-on[b-ftq4i6jm5n] {
    background: var(--tt-surface-2);
    border-color: var(--tt-ink-3);
    color: var(--tt-ink-1);
}

/* ── Registration "closing soon" strip (#104) ───────────────── */
.plan__deadlines[b-ftq4i6jm5n] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--tt-s-8);
    margin-bottom: var(--tt-s-12);
    padding: var(--tt-s-8) var(--tt-s-12);
    background: var(--tt-surface-1);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-8);
}

/* Incoming trip invites (#126) — actionable banner above the calendar. */
.plan-invites[b-ftq4i6jm5n] {
    display: flex;
    flex-direction: column;
    gap: var(--tt-s-8);
    margin-bottom: var(--tt-s-12);
}

.plan-invite[b-ftq4i6jm5n] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-10);
    padding: var(--tt-s-10) var(--tt-s-14);
    background: var(--tt-accent-soft);
    border: var(--tt-border-w) solid var(--tt-accent);
    border-radius: var(--tt-radius-8);
}

.plan-invite__icon[b-ftq4i6jm5n] {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--tt-accent);
}

.plan-invite__text[b-ftq4i6jm5n] {
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-1);
}

.plan-invite__dates[b-ftq4i6jm5n] {
    margin-left: var(--tt-s-6);
    color: var(--tt-ink-3);
}

.plan-invite__spacer[b-ftq4i6jm5n] { flex: 1; }

.plan-invite__btn[b-ftq4i6jm5n] {
    padding: var(--tt-s-6) var(--tt-s-14);
    font-family: inherit;
    font-size: var(--tt-text-sm);
    font-weight: var(--tt-weight-semibold);
    background: var(--tt-surface-0);
    color: var(--tt-ink-2);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-4);
    cursor: pointer;
}

.plan-invite__btn:hover[b-ftq4i6jm5n] { background: var(--tt-surface-1); }

.plan-invite__btn--accept[b-ftq4i6jm5n] {
    background: var(--tt-ink-1);
    color: var(--tt-surface-0);
    border-color: var(--tt-ink-1);
}

.plan-invite__btn--accept:hover[b-ftq4i6jm5n] { background: var(--tt-ink-2); }

.plan-invite__btn:disabled[b-ftq4i6jm5n] { opacity: .6; cursor: default; }

.plan__deadlines-lbl[b-ftq4i6jm5n] {
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tt-tracking-wide);
    color: var(--tt-ink-3);
}

.plan__deadline-chip[b-ftq4i6jm5n] {
    padding: var(--tt-s-4) var(--tt-s-10);
    font-family: inherit;
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    background: var(--tt-surface-0);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-pill);
    cursor: pointer;
}

.plan__deadline-chip--open[b-ftq4i6jm5n]  { color: var(--tt-status-forecast); border-color: color-mix(in srgb, var(--tt-status-forecast) 30%, var(--tt-surface-0)); }
.plan__deadline-chip--close[b-ftq4i6jm5n] { color: var(--tt-cta); border-color: color-mix(in srgb, var(--tt-cta) 30%, var(--tt-surface-0)); }

.plan__deadline-chip:hover[b-ftq4i6jm5n] { background: var(--tt-surface-1); }

/* ── Discover drawer (minimal; #107 elaborates) ─────────────── */


/* Persistent edge-tab handle — stays on-screen when the rail is collapsed */





.plan-disc__manage[b-ftq4i6jm5n] {
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-link);
    text-decoration: none;
    margin-right: var(--tt-s-10);
    white-space: nowrap;
}


/* Filters (search + region + org chips) */
.plan-disc__section[b-ftq4i6jm5n] {
    padding: var(--tt-s-12) var(--tt-s-16);
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
    display: flex;
    flex-direction: column;
    gap: var(--tt-s-8);
}

.plan-disc__section-head[b-ftq4i6jm5n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.plan-disc__section-label[b-ftq4i6jm5n] {
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tt-tracking-wide);
    color: var(--tt-ink-4);
}

.plan-disc__search[b-ftq4i6jm5n] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-8);
    padding: var(--tt-s-8) var(--tt-s-10);
    background: var(--tt-surface-0);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-4);
    color: var(--tt-ink-4);
}

.plan-disc__search-input[b-ftq4i6jm5n] {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    outline: none;
    font-family: inherit;
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-1);
}

.plan-disc__chips[b-ftq4i6jm5n] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tt-s-6);
}
/* chip buttons → <Chip> component */

/* Time-horizon filter (#206) — single-select day chips */
.plan-disc__when[b-ftq4i6jm5n] {
    display: flex;
    flex-direction: column;
    gap: var(--tt-s-6);
    padding-top: var(--tt-s-4);
}
.plan-disc__when-head[b-ftq4i6jm5n] {
    display: flex;
    align-items: baseline;
    gap: var(--tt-s-6);
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-3);
}

/* Distance filter (#198) — replaces the region chips */
.plan-disc__radius[b-ftq4i6jm5n] {
    display: flex;
    flex-direction: column;
    gap: var(--tt-s-6);
    padding-top: var(--tt-s-4);
}
.plan-disc__radius-head[b-ftq4i6jm5n] {
    display: flex;
    align-items: baseline;
    gap: var(--tt-s-6);
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-3);
}
.plan-disc__radius-val[b-ftq4i6jm5n] {
    color: var(--tt-ink-1);
    font-weight: var(--tt-weight-semibold);
    font-variant-numeric: tabular-nums;
}
.plan-disc__radius-slider[b-ftq4i6jm5n] {
    width: 100%;
    accent-color: var(--tt-primary);
    cursor: pointer;
}
.plan-disc__nohome[b-ftq4i6jm5n] {
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-4);
    line-height: 1.5;
    margin: var(--tt-s-2) 0 0;
}
.plan-disc__nohome a[b-ftq4i6jm5n] {
    color: var(--tt-primary);
    font-weight: var(--tt-weight-medium);
}

/* Empty-state: no feed subscriptions yet — a message + a path to follow feeds (#225). */
.plan-disc__nofeeds[b-ftq4i6jm5n] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--tt-s-8);
}
.plan-disc__nofeeds-msg[b-ftq4i6jm5n] {
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-4);
    line-height: 1.5;
    margin: var(--tt-s-2) 0 0;
}
.plan-disc__nofeeds-cta[b-ftq4i6jm5n] {
    align-self: stretch;
    text-align: center;
    text-decoration: none;
}

/* The scroll container is now Drawer's .drawer__body; this keeps only the padding that used to
   ride along with it. Nesting a second overflow-y here would create two scrollbars. */
.plan-disc__results[b-ftq4i6jm5n] {
    padding: var(--tt-s-16);
}

.plan-disc__count[b-ftq4i6jm5n] {
    margin-bottom: var(--tt-s-10);
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-4);
    text-transform: uppercase;
    letter-spacing: var(--tt-tracking-wide);
}

.plan-disc__lede[b-ftq4i6jm5n] {
    margin: 0 0 var(--tt-s-12);
    font-size: var(--tt-text-xs);
    line-height: var(--tt-leading-normal);
    color: var(--tt-ink-4);
}

.plan-disc__error[b-ftq4i6jm5n] {
    margin: 0 0 var(--tt-s-12);
    padding: var(--tt-s-8) var(--tt-s-10);
    font-size: var(--tt-text-xs);
    color: var(--tt-cta);
    background: var(--tt-status-warn-surface);
    border-radius: var(--tt-radius-4);
}

.plan-disc__empty[b-ftq4i6jm5n] {
    margin: 0;
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-4);
}

.plan-disc__more[b-ftq4i6jm5n] {
    width: 100%;
    margin-top: var(--tt-s-4);
    padding: var(--tt-s-8) var(--tt-s-12);
    font-family: inherit;
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-3);
    background: var(--tt-surface-0);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-4);
    cursor: pointer;
}

.plan-disc__more:disabled[b-ftq4i6jm5n] {
    opacity: 0.6;
    cursor: default;
}

/* Calendar subscribe / export modal (#121) */
.plan-sub__lede[b-ftq4i6jm5n] {
    margin: 0 0 var(--tt-s-16);
    font-size: var(--tt-text-sm);
    line-height: var(--tt-leading-normal);
    color: var(--tt-ink-3);
}

.plan-sub__url[b-ftq4i6jm5n] {
    display: flex;
    gap: var(--tt-s-8);
    margin-bottom: var(--tt-s-16);
}

.plan-sub__url-input[b-ftq4i6jm5n] {
    flex: 1;
    min-width: 0;
    padding: var(--tt-s-8) var(--tt-s-10);
    font-family: inherit;
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-3);
    background: var(--tt-surface-1);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-4);
}

.plan-sub__copy[b-ftq4i6jm5n] {
    padding: var(--tt-s-8) var(--tt-s-12);
    font-family: inherit;
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-primary-text);
    background: var(--tt-ink-1);
    border: var(--tt-border-w) solid var(--tt-ink-1);
    border-radius: var(--tt-radius-4);
    cursor: pointer;
    white-space: nowrap;
}

.plan-sub__actions[b-ftq4i6jm5n] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tt-s-8);
}

.plan-sub__btn[b-ftq4i6jm5n] {
    flex: 1;
    min-width: 8rem;
    padding: var(--tt-s-8) var(--tt-s-12);
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    text-align: center;
    text-decoration: none;
    color: var(--tt-ink-2);
    background: var(--tt-surface-0);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-4);
}

.plan-sub__btn:hover[b-ftq4i6jm5n] {
    border-color: var(--tt-primary);
    color: var(--tt-primary);
}

.plan-disc-card[b-ftq4i6jm5n] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-10);
    background: var(--tt-surface-0);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-4);
    padding: var(--tt-s-6) var(--tt-s-12);
    margin-bottom: var(--tt-s-6);
}

/* Left text stack; min-width:0 lets the title ellipsize instead of shoving the Watch button. */
.plan-disc-card__body[b-ftq4i6jm5n] {
    flex: 1;
    min-width: 0;
}

.plan-disc-card__title[b-ftq4i6jm5n] {
    display: block;
    padding: 0;
    text-align: left;
    border: none;
    background: none;
    font-family: inherit;
    font-size: var(--tt-text-sm);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-1);
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.plan-disc-card__title:hover[b-ftq4i6jm5n] {
    color: var(--tt-link);
}

/* Date/distance + feed pill share one row (was a separate footer row). */
.plan-disc-card__meta[b-ftq4i6jm5n] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--tt-s-6);
    margin-top: var(--tt-s-2);
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-4);
}

.plan-disc-card__date[b-ftq4i6jm5n] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.plan-disc-card__feed[b-ftq4i6jm5n] {
    font-size: 9.5px;
    font-weight: var(--tt-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tt-tracking-wide);
    color: var(--tt-ink-3);
    background: var(--tt-surface-2);
    padding: var(--tt-s-2) var(--tt-s-6);
    border-radius: var(--tt-radius-4);
}

.plan-disc-card__watch[b-ftq4i6jm5n] {
    flex-shrink: 0;
    padding: var(--tt-s-4) var(--tt-s-10);
    font-family: inherit;
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-primary-text);
    background: var(--tt-ink-1);
    border: var(--tt-border-w) solid var(--tt-ink-1);
    border-radius: var(--tt-radius-4);
    cursor: pointer;
}

.plan-disc-card__watch:disabled[b-ftq4i6jm5n] {
    opacity: 0.6;
    cursor: default;
}

.plan__surface[b-ftq4i6jm5n] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    background: var(--tt-surface-0);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-12);
    box-shadow: var(--tt-shadow-sm);
}

.plan__placeholder[b-ftq4i6jm5n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--tt-s-10);
    padding: var(--tt-s-48) var(--tt-s-24);
    text-align: center;
    color: var(--tt-ink-4);
}

.plan__placeholder-text[b-ftq4i6jm5n] {
    margin: 0;
    font-size: var(--tt-text-sm);
}

/* ── Event peek modal ───────────────────────────────────────── */
.plan-peek__row[b-ftq4i6jm5n] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--tt-s-10);
}

.plan-peek__status[b-ftq4i6jm5n] {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 var(--tt-s-8);
    border: var(--tt-border-w) solid transparent;
    border-radius: var(--tt-radius-4);
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tt-tracking-wide);
}

.plan-peek__status--planned[b-ftq4i6jm5n]    { background: var(--tt-surface-2); color: var(--tt-ink-1); }
.plan-peek__status--completed[b-ftq4i6jm5n]  { background: color-mix(in srgb, var(--tt-status-ok) 14%, var(--tt-surface-0)); color: var(--tt-status-ok); }
.plan-peek__status--inprogress[b-ftq4i6jm5n] { background: var(--tt-status-warn-surface); color: var(--tt-status-warn-text); }
.plan-peek__status--cancelled[b-ftq4i6jm5n]  { background: var(--tt-surface-1); color: var(--tt-ink-4); border-color: var(--tt-line); }
.plan-peek__status--watched[b-ftq4i6jm5n]    { background: var(--tt-accent-soft); color: var(--tt-accent); }
.plan-peek__status--discovered[b-ftq4i6jm5n] { background: var(--tt-surface-1); color: var(--tt-ink-3); border: var(--tt-border-w) dashed var(--tt-ink-4); }

.plan-peek__feed-dot[b-ftq4i6jm5n] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tt-ink-4);
}

.plan-peek__trip[b-ftq4i6jm5n] {
    display: inline-flex;
    align-items: center;
    gap: var(--tt-s-6);
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-3);
}

.plan-peek__trip-dot[b-ftq4i6jm5n] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tt-accent);
}

.plan-peek__note[b-ftq4i6jm5n] {
    margin: var(--tt-s-12) 0 0;
    font-size: var(--tt-text-sm);
    line-height: var(--tt-leading-normal);
    color: var(--tt-ink-2);
}

/* Peek modal footer — compact buttons in the shared dialog actions row */
.plan-peek__btn[b-ftq4i6jm5n] {
    padding: var(--tt-s-6) var(--tt-s-12);
    font-size: var(--tt-text-sm);
    border-radius: var(--tt-radius-4);
}

.plan-peek__btn:disabled[b-ftq4i6jm5n] {
    opacity: 0.6;
    cursor: default;
}

.plan-peek__confirm[b-ftq4i6jm5n] {
    margin-right: auto;
    align-self: center;
    font-size: var(--tt-text-sm);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-cta);
}

/* ============================================================
 * Multi-select → trip building (#129)
 * ============================================================ */

/* Selection bar — appears when ≥1 calendar event is selected */
.plan-selbar[b-ftq4i6jm5n] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-12);
    background: var(--tt-ink-1);
    color: var(--tt-surface-0);
    border-radius: var(--tt-radius-8);
    padding: var(--tt-s-8) var(--tt-s-14);
    margin-bottom: var(--tt-s-12);
}

.plan-selbar__mark[b-ftq4i6jm5n] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    border-radius: var(--tt-radius-4);
    background: var(--tt-cta);
    color: var(--tt-surface-0);
}

.plan-selbar__count[b-ftq4i6jm5n] {
    font-size: var(--tt-text-sm);
}

.plan-selbar__names[b-ftq4i6jm5n] {
    max-width: 280px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: var(--tt-text-xs);
    color: color-mix(in srgb, var(--tt-surface-0) 60%, transparent);
}

.plan-selbar__spacer[b-ftq4i6jm5n] {
    flex: 1;
}

.plan-selbar__btn[b-ftq4i6jm5n] {
    display: inline-flex;
    align-items: center;
    gap: var(--tt-s-6);
    font-family: inherit;
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    padding: var(--tt-s-6) var(--tt-s-10);
    border-radius: var(--tt-radius-4);
    background: transparent;
    color: var(--tt-surface-0);
    border: var(--tt-border-w) solid color-mix(in srgb, var(--tt-surface-0) 30%, transparent);
    cursor: pointer;
}

.plan-selbar__btn:hover:not(:disabled)[b-ftq4i6jm5n] {
    background: color-mix(in srgb, var(--tt-surface-0) 12%, transparent);
}

.plan-selbar__btn--cta[b-ftq4i6jm5n] {
    background: var(--tt-cta);
    border-color: var(--tt-cta);
}

.plan-selbar__btn:disabled[b-ftq4i6jm5n] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Create-trip / add-to-trip modal body */
/* mode toggle → <SegmentedButton>; wrapper keeps the spacing below it */
.plan-tb__modes[b-ftq4i6jm5n] { margin-bottom: var(--tt-s-14); }

.plan-tb__field[b-ftq4i6jm5n] {
    margin-bottom: var(--tt-s-14);
}

.plan-tb__lbl[b-ftq4i6jm5n] {
    display: block;
    margin-bottom: var(--tt-s-6);
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tt-tracking-wide);
    color: var(--tt-ink-4);
}

.plan-tb__input[b-ftq4i6jm5n] {
    width: 100%;
    box-sizing: border-box;
    border: var(--tt-border-w) solid var(--tt-line);
    border-radius: var(--tt-radius-4);
    padding: var(--tt-s-8) var(--tt-s-10);
    font-size: var(--tt-text-sm);
    font-family: inherit;
    color: var(--tt-ink-1);
    background: var(--tt-surface-0);
    outline: none;
}

.plan-tb__eyebrow[b-ftq4i6jm5n] {
    margin-bottom: var(--tt-s-6);
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tt-tracking-wide);
    color: var(--tt-ink-4);
}

.plan-tb__stop[b-ftq4i6jm5n] {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: var(--tt-s-12);
    align-items: center;
    padding: var(--tt-s-8) var(--tt-s-10);
    margin-bottom: var(--tt-s-6);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-4);
}

.plan-tb__stop-date[b-ftq4i6jm5n] {
    text-align: center;
}

.plan-tb__stop-date b[b-ftq4i6jm5n] {
    display: block;
    font-size: var(--tt-text-base);
    font-weight: var(--tt-weight-light);
    line-height: 1;
}

.plan-tb__stop-date span[b-ftq4i6jm5n] {
    font-size: 9px;
    text-transform: uppercase;
    color: var(--tt-ink-4);
}

.plan-tb__stop-track[b-ftq4i6jm5n] {
    font-size: var(--tt-text-sm);
    font-weight: var(--tt-weight-semibold);
}

.plan-tb__stop-dow[b-ftq4i6jm5n] {
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-4);
}
/* /Pages/PlanEvent.razor.rz.scp.css */
/* ============================================================
 * Plan event-detail page (#104) — registration tracking + handoff.
 * ============================================================ */

/* Shell: .tt-page in app.css (#400). It was 1000px and CENTRED, the only page at either. */





.plan-ev__muted[b-i73i56p5t9] { color: var(--tt-ink-4); font-size: var(--tt-text-sm); }

/* Stat strip */
/* Stat strip retired → <StatStrip>/<StatTile> component. */

.plan-ev__grid[b-i73i56p5t9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--tt-s-18);
    align-items: start;
}

@media (max-width: 800px) {
    .plan-ev__grid[b-i73i56p5t9] { grid-template-columns: 1fr; }
}

/* Right column stacks Registration + Car-readiness panels (#133) */
.plan-ev__col[b-i73i56p5t9] {
    display: flex;
    flex-direction: column;
    gap: var(--tt-s-18);
}

/* "Cars pulled from Prepare" helper note under the Details fields */
.plan-ev__hint[b-i73i56p5t9] {
    display: inline-flex;
    align-items: center;
    gap: var(--tt-s-6);
    margin: var(--tt-s-10) 0 0;
    font-size: var(--tt-text-xs);
    line-height: var(--tt-leading-normal);
    color: var(--tt-ink-4);
}

.plan-ev__addtrip[b-i73i56p5t9] {
    margin-top: var(--tt-s-12);
}

/* Car-readiness panel: read-only lifecycle chips + Prepare hand-off */
.plan-ev__readiness[b-i73i56p5t9] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--tt-s-6);
}

.plan-ev__ready-chip[b-i73i56p5t9] {
    display: inline-flex;
    align-items: center;
    gap: var(--tt-s-4);
    padding: var(--tt-s-4) var(--tt-s-10);
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-4);
    background: var(--tt-surface-1);
    border: var(--tt-border-w) dashed var(--tt-line);
    border-radius: var(--tt-radius-4);
}

.plan-ev__ready-chip.is-on[b-i73i56p5t9] {
    color: var(--tt-status-ok);
    background: color-mix(in srgb, var(--tt-status-ok) 14%, var(--tt-surface-0));
    border-color: var(--tt-status-ok);
}

/* ── Registration panel ──────────────────────────────────────── */
.plan-ev__reg[b-i73i56p5t9] {
    display: flex;
    flex-direction: column;
    gap: var(--tt-s-14);
}

.plan-ev__reg-row[b-i73i56p5t9] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-10);
}

/* reg-pill → <Badge Loud> (variant via RegVariant). */

.plan-ev__register[b-i73i56p5t9] {
    margin-left: auto;
    padding: var(--tt-s-6) var(--tt-s-12);
    font-size: var(--tt-text-sm);
    border-radius: var(--tt-radius-4);
}

.plan-ev__reg-track-lbl[b-i73i56p5t9] {
    display: block;
    margin-bottom: var(--tt-s-6);
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tt-tracking-wide);
    color: var(--tt-ink-4);
}

/* registration steps → <SegmentedButton> */

.plan-ev__reg-note[b-i73i56p5t9] {
    margin: 0;
    font-size: var(--tt-text-xs);
    line-height: var(--tt-leading-normal);
    color: var(--tt-ink-4);
}

/* Manual registration-window pickers (#271) */
.plan-ev__reg-dates[b-i73i56p5t9] {
    display: flex;
    flex-direction: column;
    gap: var(--tt-s-6);
}

.plan-ev__reg-dates-row[b-i73i56p5t9] {
    display: flex;
    gap: var(--tt-s-10);
}

.plan-ev__reg-date[b-i73i56p5t9] {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: var(--tt-s-4);
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tt-tracking-wide);
    color: var(--tt-ink-4);
}

.plan-ev__reg-date-input[b-i73i56p5t9] {
    font: inherit;
    font-size: var(--tt-text-sm);
    padding: var(--tt-s-6) var(--tt-s-10);
    border: var(--tt-border-w) solid var(--tt-line);
    border-radius: var(--tt-radius-4);
    background: var(--tt-surface-0);
    color: var(--tt-ink-1);
    outline: none;
}

.plan-ev__reg-date-input:focus[b-i73i56p5t9] {
    border-color: var(--tt-primary);
    box-shadow: var(--tt-shadow-focus);
}

/* ── Details panel ───────────────────────────────────────────── */
.plan-ev__fields[b-i73i56p5t9] {
    display: flex;
    flex-direction: column;
}

.plan-ev__field[b-i73i56p5t9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tt-s-12);
    padding: var(--tt-s-8) 0;
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
}

.plan-ev__field-lbl[b-i73i56p5t9] {
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tt-tracking-wide);
    color: var(--tt-ink-4);
}

.plan-ev__field-val[b-i73i56p5t9] { font-size: var(--tt-text-sm); color: var(--tt-ink-1); text-align: right; }
.plan-ev__field-link[b-i73i56p5t9] { font-size: var(--tt-text-sm); font-weight: var(--tt-weight-semibold); color: var(--tt-accent); text-decoration: none; }

/* status pill → <Badge Loud> (variant via StatusVariant). */

.plan-ev__actions[b-i73i56p5t9] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--tt-s-8);
    margin-top: var(--tt-s-14);
}

.plan-ev__btn[b-i73i56p5t9] { padding: var(--tt-s-6) var(--tt-s-12); font-size: var(--tt-text-sm); border-radius: var(--tt-radius-4); }
.plan-ev__btn:disabled[b-i73i56p5t9] { opacity: 0.6; cursor: default; }

.plan-ev__prepare[b-i73i56p5t9] {
    margin-left: auto;
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-link);
    text-decoration: none;
}
/* /Pages/Prep.razor.rz.scp.css */
/* Driver Prep (#342), ported from the design-locked prototype (templates/perform/PerformPrep).
   Everything structural comes from PageHeader, TileRow/Tile, Panel, Pill, Chip, SegmentedButton,
   Note and Modal, so what is left here is the two-column frame and the four list shapes. */

/* The shell is .tt-page in app.css (#400). It used to be declared here, with a comment claiming
   the 48px side padding existed because PageHeader's back chevron was outdented by exactly that
   much. That read a coincidence as a cause: the -48px was button geometry (36px button + 12px
   row gap), and the padding only had to be >= it so the chevron did not clip. The chevron is
   inline now and the shell runs a 16px gutter. */

.perf__loading[b-18w3v7s04a] {
    margin: 0;
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-4);
}

/* Left column carries the two panels that are read at length; the right column is the
   glanceable rail beside them. */
.perf__cols[b-18w3v7s04a] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tt-s-16);
    align-items: flex-start;
}

.perf__col[b-18w3v7s04a] {
    flex: 1 1 300px;
    display: flex;
    flex-direction: column;
    gap: var(--tt-s-16);
    min-width: 0;
}

.perf__col--wide[b-18w3v7s04a] { flex: 3 1 420px; }

/* ── The no-upcoming-event state ────────────────────────────────────────────────────────
   Bordered and sunken rather than a centred hero: it reads as "there is nothing to prepare
   for", not as an error and not as a record that failed to load. */
.perf__none[b-18w3v7s04a] {
    padding: var(--tt-s-24) var(--tt-s-28);
    background: var(--tt-surface-1);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-8);
    max-width: 680px;
}

.perf__none-title[b-18w3v7s04a] {
    margin: 0 0 var(--tt-s-8);
    font-size: var(--tt-text-md);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-2);
}

.perf__none-body[b-18w3v7s04a] {
    margin: 0 0 var(--tt-s-16);
    font-size: var(--tt-text-sm);
    line-height: 1.6;
    color: var(--tt-ink-3);
    text-wrap: pretty;
}

/* ── Shared band bits ───────────────────────────────────────────────────────────────── */
.perf__empty[b-18w3v7s04a] {
    margin: 0;
    font-size: var(--tt-text-sm);
    line-height: 1.6;
    color: var(--tt-ink-4);
    text-wrap: pretty;
}

.perf-foot[b-18w3v7s04a] {
    display: flex;
    justify-content: flex-end;
    gap: var(--tt-s-8);
    width: 100%;
}

/* ── Goals ──────────────────────────────────────────────────────────────────────────── */
.perf-goals__band[b-18w3v7s04a] {
    display: block;
    padding-bottom: var(--tt-s-6);
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tt-tracking-wide);
    color: var(--tt-ink-2);
}

.perf-goals__band--spaced[b-18w3v7s04a] { margin-top: var(--tt-s-22); }

/* The scope label spans its goals and reads as one band, rather than repeating beside
   every row. */
.perf-scope[b-18w3v7s04a] {
    display: flex;
    align-items: flex-start;
    gap: var(--tt-s-12);
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
}

.perf-scope__label[b-18w3v7s04a] {
    width: 56px;
    flex: none;
    padding-top: var(--tt-s-10);
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--tt-ink-4);
}

.perf-scope__goals[b-18w3v7s04a] { flex: 1; min-width: 0; }

.perf-goal[b-18w3v7s04a] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-12);
    padding: var(--tt-s-8) 0;
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
}

.perf-scope__goals .perf-goal:first-child[b-18w3v7s04a] { border-top: none; }

.perf-goal__main[b-18w3v7s04a] {
    flex: 1;
    min-width: 120px;
    padding: 0;
    border: none;
    background: none;
    text-align: left;
    font-family: var(--tt-font-sans);
    cursor: pointer;
}

.perf-goal__objective[b-18w3v7s04a] {
    display: block;
    font-size: var(--tt-text-sm);
    line-height: 1.45;
    color: var(--tt-ink-1);
}

.perf-goal__main:hover .perf-goal__objective[b-18w3v7s04a] { color: var(--tt-primary); }

.perf-goal__approach[b-18w3v7s04a] {
    display: block;
    margin-top: var(--tt-s-2);
    font-size: var(--tt-text-sm);
    font-weight: var(--tt-weight-light);
    line-height: 1.45;
    color: var(--tt-ink-3);
}

/* All-goals view only: the status leads the row, because the filter is what the reader is
   scanning against. */
.perf-goal__status[b-18w3v7s04a] {
    width: 56px;
    flex: none;
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--tt-ink-3);
}

.perf-goal__when[b-18w3v7s04a] {
    flex: none;
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-4);
}

.perf-goal__notech[b-18w3v7s04a] { flex: none; }

.perf-goals__settled[b-18w3v7s04a] {
    margin: var(--tt-s-14) 0 0;
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-4);
}

/* ── All-goals filters ──────────────────────────────────────────────────────────────── */
.perf-filters[b-18w3v7s04a] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--tt-s-10);
    padding-bottom: var(--tt-s-14);
}

/* ── Tasks ──────────────────────────────────────────────────────────────────────────── */
.perf-tasks__head[b-18w3v7s04a] {
    display: flex;
    align-items: baseline;
    gap: var(--tt-s-8);
    padding-bottom: var(--tt-s-6);
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tt-tracking-wide);
    color: var(--tt-ink-2);
}

.perf-tasks__count[b-18w3v7s04a] {
    margin-left: auto;
    font-weight: var(--tt-weight-regular);
    text-transform: none;
    letter-spacing: 0;
    color: var(--tt-ink-4);
}

.perf-tasks__row[b-18w3v7s04a] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-12);
    padding: var(--tt-s-8) 0;
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
}

/* A 32px hit area around a 15px box - the check is tapped with a thumb. */
.perf-tasks__check[b-18w3v7s04a] {
    width: 32px;
    height: 32px;
    margin: calc(var(--tt-s-8) * -1);
    flex: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    cursor: pointer;
}

.perf-tasks__box[b-18w3v7s04a] {
    width: 15px;
    height: 15px;
    border-radius: var(--tt-radius-2);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--tt-line);
    background: transparent;
}

.perf-tasks__box.is-on[b-18w3v7s04a] {
    border-color: var(--tt-status-ok);
    background: var(--tt-status-ok);
}

.perf-tasks__what[b-18w3v7s04a] {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: none;
    background: none;
    text-align: left;
    font-family: var(--tt-font-sans);
    font-size: var(--tt-text-sm);
    line-height: 1.45;
    color: var(--tt-ink-2);
    cursor: pointer;
}

.perf-tasks__what:hover[b-18w3v7s04a] { color: var(--tt-primary); }

.perf-tasks__row.is-done .perf-tasks__what[b-18w3v7s04a] {
    color: var(--tt-ink-4);
    text-decoration: line-through;
}

.perf-tasks__due[b-18w3v7s04a] {
    flex: none;
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-4);
    white-space: nowrap;
}

/* Late is the one state worth colouring: it is the only one that changes what the driver does
   today. --tt-status-warn-text is the readable end of the warn ramp, not the fill. */
.perf-tasks__due.is-late[b-18w3v7s04a] {
    color: var(--tt-status-warn-text);
    font-weight: var(--tt-weight-semibold);
}

/* ── Suggestions ────────────────────────────────────────────────────────────────────── */
.perf-sugg__row[b-18w3v7s04a] {
    display: flex;
    align-items: baseline;
    gap: var(--tt-s-12);
    padding: var(--tt-s-8) 0;
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
}

.perf-sugg__text[b-18w3v7s04a] {
    flex: 1;
    min-width: 0;
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-2);
}

.perf-sugg__use[b-18w3v7s04a],
.perf-sugg__dismiss[b-18w3v7s04a] {
    flex: none;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: none;
    line-height: 1;
    cursor: pointer;
}

/* 18px, the prototype's suggestion "+" button. --tt-text-lg is 20px. */
.perf-sugg__use[b-18w3v7s04a] {
    color: var(--tt-primary);
    font-size: 18px;
    font-weight: var(--tt-weight-semibold);
}

.perf-sugg__dismiss[b-18w3v7s04a] {
    color: var(--tt-ink-4);
    font-size: var(--tt-text-md);
}

.perf-sugg__dismiss:hover[b-18w3v7s04a] { color: var(--tt-ink-2); }

.perf-sugg__none[b-18w3v7s04a] {
    margin: var(--tt-s-8) 0 0;
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-4);
}

/* ── Previous visits ────────────────────────────────────────────────────────────────── */
/* Conditions gets what it needs when the table is wide enough and gives it back when it is not.
   108px is the longest phrase the summary can produce — "Overcast 100°" measures 107px at the
   row's type — and at the old flat 80px every overcast visit wrapped onto two lines while the
   visit column sat on 200px of slack. A flat 108px only moves the problem: in the 800-1000px band
   the panel is still one of two columns, and the visit label wrapped instead.

   So the track grows from 60px toward 108px with whatever space is going, and the visit keeps a
   68px floor so "Jun 2026" is never the thing that breaks. Wrapping is left enabled rather than
   suppressed with nowrap: on a narrow table it genuinely is required, and a phrase that overran
   its column would sit on top of the laps beside it.

   Every track is fixed or flexible, never content-sized: the head and the rows are separate grids
   of the same width, so identical definitions line up and intrinsic ones would not. */
.perf-visits__head[b-18w3v7s04a],
.perf-visits__row[b-18w3v7s04a] {
    display: grid;
    grid-template-columns: minmax(68px, 1fr) 64px 56px 42px minmax(60px, 108px) 52px;
    gap: var(--tt-s-10);
    align-items: baseline;
}

.perf-visits__head[b-18w3v7s04a] {
    padding-bottom: var(--tt-s-6);
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tt-ink-4);
}

/* The row is the control: it is the only route into that day's recap, and the thing being opened is
   the visit rather than anything inside it. Button resets, then the row's own type. */
.perf-visits__row[b-18w3v7s04a] {
    width: 100%;
    padding: var(--tt-s-8) 0;
    border: none;
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-2);

    /* Lap times and counts are read down the column, so they line up. */
    font-variant-numeric: tabular-nums;
}

.perf-visits__row:hover[b-18w3v7s04a] { background: var(--tt-surface-1); }

/* Everything after the visit is measured; the visit itself is what the row is about. */
.perf-visits__head span:not(:first-child)[b-18w3v7s04a],
.perf-visits__row span:not(:first-child)[b-18w3v7s04a] { text-align: right; }

/* The visit reads as the way through, because it is. Everything beside it is a measurement. */
.perf-visits__label[b-18w3v7s04a] {
    font-weight: var(--tt-weight-medium);
    color: var(--tt-cta);
}
.perf-visits__cond[b-18w3v7s04a],
.perf-visits__absent[b-18w3v7s04a] { color: var(--tt-ink-4); }

.perf-visits__note[b-18w3v7s04a] {
    margin: var(--tt-s-10) 0 0;
    font-size: var(--tt-text-xs);
    line-height: 1.5;
    color: var(--tt-ink-4);
    text-wrap: pretty;
}

/* ── Repeatability ──────────────────────────────────────────────────────────────────── */
.perf-repeat__row[b-18w3v7s04a] {
    display: flex;
    align-items: baseline;
    gap: var(--tt-s-12);
    padding: var(--tt-s-8) 0;
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
}

.perf-repeat__label[b-18w3v7s04a] {
    flex: 1;
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-4);
}

/* The sample size the spread was measured over. It travels with the number wherever the number
   goes, so it is quiet rather than optional. */
.perf-repeat__sample[b-18w3v7s04a] {
    flex: none;
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-4);
}

.perf-repeat__spread[b-18w3v7s04a] {
    flex: none;
    min-width: 56px;
    text-align: right;
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-2);
    font-variant-numeric: tabular-nums;
}

/* ── Notes ──────────────────────────────────────────────────────────────────────────── */
.perf-note__body[b-18w3v7s04a] {
    margin: 0;
    font-size: var(--tt-text-sm);
    line-height: 1.55;
    color: var(--tt-ink-2);
    white-space: pre-wrap;
    text-wrap: pretty;
}

.perf-note__meta[b-18w3v7s04a] {
    margin: var(--tt-s-10) 0 0;
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-4);
}

/* ── Dialog forms ───────────────────────────────────────────────────────────────────── */

/* The app's .tt-label is an inline <label>, which puts the caption beside its control rather
   than over it. Every label on this page names a field stacked above it. */
.tt-label[b-18w3v7s04a] { display: block; }
/* The goal/task form primitives and .perf-glyph now live in app.css, GLOBAL, so the extracted
   GoalEditor component carries its own styling onto whichever page mounts it (#357). A scoped
   rule here could never have reached a child component's markup. */

/* ── The quiet lock ─────────────────────────────────────────────────────────────────── */
.perf-locked[b-18w3v7s04a] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-16);
    padding: var(--tt-s-20) var(--tt-s-24);
    background: var(--tt-surface-1);
    border: var(--tt-border-w) dashed var(--tt-line);
    border-radius: var(--tt-radius-8);
}

.perf-locked__icon[b-18w3v7s04a] {
    display: inline-flex;
    color: var(--tt-ink-4);
    flex-shrink: 0;
}

.perf-locked__text[b-18w3v7s04a] { flex: 1; min-width: 0; }

.perf-locked__title[b-18w3v7s04a] {
    margin: 0;
    font-size: var(--tt-text-md);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-3);
}

.perf-locked__body[b-18w3v7s04a] {
    margin: var(--tt-s-2) 0 0;
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-4);
    text-wrap: pretty;
}

@media (max-width: 800px) {
    .perf__none[b-18w3v7s04a] { padding: var(--tt-s-16); }
    .perf-locked[b-18w3v7s04a] { flex-wrap: wrap; }

    /* Conditions is the first column to go: it qualifies the pace rather than stating it,
       and the row has to stay readable on a phone. */
    .perf-visits__head span:nth-child(5)[b-18w3v7s04a],
    .perf-visits__row span:nth-child(5)[b-18w3v7s04a] { display: none; }

    .perf-visits__head[b-18w3v7s04a],
    .perf-visits__row[b-18w3v7s04a] { grid-template-columns: 1fr 60px 48px 38px 46px; }
}
/* /Pages/Privacy.razor.rz.scp.css */
/* Shell: .tt-page in app.css (#400).

   The page column is 1080px, but running prose is not a 1080px-wide thing to read — at that width
   a line runs past 130 characters. So the shell keeps the app's column and the prose block sets
   its own measure inside it, the same split the Tour page's guidance uses. */

.privacy__body[b-krpzpbvagn] {
    max-width: 68ch;
    color: var(--tt-ink-2);
    font-size: var(--tt-text-base);
    line-height: var(--tt-leading-normal);
}

.privacy__updated[b-krpzpbvagn] {
    color: var(--tt-ink-4);
    font-size: var(--tt-text-sm);
    margin: 0 0 var(--tt-s-24);
}

.privacy__body h2[b-krpzpbvagn] {
    font-size: var(--tt-text-lg);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-1);
    margin: var(--tt-s-40) 0 var(--tt-s-12);
}

/* A sub-head inside "What we collect". Tracked uppercase rather than another size step, so the
   two levels stay apart without the type scale growing a rung it does not otherwise have. */
.privacy__body h3[b-krpzpbvagn] {
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tt-tracking-wide);
    color: var(--tt-ink-3);
    margin: var(--tt-s-24) 0 var(--tt-s-6);
}

.privacy__body p[b-krpzpbvagn] {
    margin: 0 0 var(--tt-s-16);
}

.privacy__body ul[b-krpzpbvagn] {
    margin: 0 0 var(--tt-s-16);
    padding-left: var(--tt-s-20);
}

.privacy__body li[b-krpzpbvagn] {
    margin-bottom: var(--tt-s-8);
}

.privacy__body strong[b-krpzpbvagn] { color: var(--tt-ink-1); }

.privacy__body a[b-krpzpbvagn] {
    color: var(--tt-primary);
    text-decoration: none;
}

.privacy__body a:hover[b-krpzpbvagn] { text-decoration: underline; }

.privacy__body a:focus-visible[b-krpzpbvagn] {
    outline: 2px solid var(--tt-primary);
    outline-offset: var(--tt-s-2);
}
/* /Pages/Profile.razor.rz.scp.css */
/* Shell: .tt-page in app.css (#400). */

/* Two-column grid. Gap matches the side padding so spacing feels consistent. */
/* Panels use .tt-panels (app.css) - equal share above the 390px floor, which collapses itself.
   The grid used to be a hard 1fr 1fr here with a 720px override; both are gone. Only the counter
   stays: it drives the AutoNumber eyebrow badge. Panels increment in source order, and a
   display:none panel does not increment, so the visible sequence stays gap-free. */
.tt-panels[b-jv8crwpcau] { counter-reset: profile-panel-num; }

[b-jv8crwpcau] .tt-panel { counter-increment: profile-panel-num; }
[b-jv8crwpcau] .tt-panel__eyebrow-num--auto::before {
    content: counter(profile-panel-num, decimal-leading-zero);
}

/* ===== Shared action buttons ===== */
.tt-btn[b-jv8crwpcau] {
    display: inline-flex;
    align-items: center;
    gap: var(--tt-s-8);
    padding: var(--tt-s-8) var(--tt-s-16);
    border-radius: var(--tt-radius-4);
    font-family: var(--tt-font-sans);
    font-size: 14px;
    font-weight: var(--tt-weight-medium);
    cursor: pointer;
    border: var(--tt-border-w) solid transparent;
    line-height: 1.5;
    transition: filter 150ms ease, opacity 150ms ease;
}

.tt-btn-action[b-jv8crwpcau] {
    background: var(--tt-cta);
    border-color: var(--tt-cta);
    color: #fff;
}

.tt-btn-action:hover:not(:disabled)[b-jv8crwpcau] { filter: brightness(0.88); }

.tt-btn-action:disabled[b-jv8crwpcau] {
    opacity: 0.45;
    cursor: not-allowed;
}

.tt-btn-danger[b-jv8crwpcau] {
    background: var(--tt-btn-danger);
    border-color: var(--tt-btn-danger);
    color: var(--tt-btn-danger-text);
}

.tt-btn-danger:hover:not(:disabled)[b-jv8crwpcau] { filter: brightness(0.88); }
.tt-btn-danger:disabled[b-jv8crwpcau] { opacity: 0.45; cursor: not-allowed; }

/* ===== Link buttons (Cancel / Save) ===== */
.tt-btn-link[b-jv8crwpcau] {
    background: none;
    border: none;
    padding: var(--tt-s-4) var(--tt-s-8);
    font-family: inherit;
    font-size: 11px;
    font-weight: var(--tt-weight-semibold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--tt-ink-3);
    cursor: pointer;
}

.tt-btn-link:hover[b-jv8crwpcau] { color: var(--tt-ink-1); }
.tt-btn-link--primary[b-jv8crwpcau] { color: var(--tt-cta); }
.tt-btn-link--primary:hover[b-jv8crwpcau] { opacity: 0.75; }
.tt-btn-link--primary:disabled[b-jv8crwpcau] { color: var(--tt-ink-4); cursor: not-allowed; opacity: 1; }

/* ===== Shared actions row ===== */
.tt-profile-actions[b-jv8crwpcau] {
    display: flex;
    gap: var(--tt-s-4);
}

/* ===== Account details panel ===== */

.acct-avatar-section[b-jv8crwpcau] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--tt-s-12);
    margin-bottom: var(--tt-s-28);
}

.acct-avatar-wrap[b-jv8crwpcau] {
    position: relative;
    display: inline-block;
}

.acct-avatar[b-jv8crwpcau] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--tt-avatar-bg);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: var(--tt-weight-semibold);
    letter-spacing: -0.02em;
    user-select: none;
}


.acct-avatar-handle[b-jv8crwpcau] {
    font-size: 14px;
    font-weight: var(--tt-weight-medium);
    color: var(--tt-ink-3);
    letter-spacing: 0.01em;
}

.acct-tier-badge[b-jv8crwpcau] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px var(--tt-s-12);
    background: var(--tt-ink-1);
    color: var(--tt-surface-0);
    font-size: 11px;
    font-weight: var(--tt-weight-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: var(--tt-radius-2);
}

.acct-tier-badge i[data-lucide][b-jv8crwpcau] { width: 10px; height: 10px; }

/* Three columns: identity reads across, not down. Rows are
     user name | email          | password
     crew handle | time zone    | home location
     active car  | active track |
   The floor keeps a column readable - below it the grid drops to two, then one, rather than
   squeezing a value like an email into nothing. */
.acct-fields[b-jv8crwpcau] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    column-gap: var(--tt-s-40);
    margin-bottom: var(--tt-s-20);
}

.acct-field[b-jv8crwpcau] {
    display: flex;
    flex-direction: column;
    gap: var(--tt-s-4);
    padding: var(--tt-s-10) 0;
}

.acct-field-value[b-jv8crwpcau] {
    font-size: 15px;
    font-weight: var(--tt-weight-medium);
    color: var(--tt-ink-1);
    display: flex;
    align-items: center;
    gap: var(--tt-s-6);
}

.acct-field-value--email[b-jv8crwpcau] {
    font-family: var(--tt-font-mono);
    font-size: 13px;
    font-weight: var(--tt-weight-regular);
    color: var(--tt-cta);
}

.acct-action-btn[b-jv8crwpcau] {
    display: inline-flex;
    align-items: center;
    padding: var(--tt-s-2) var(--tt-s-8);
    background: transparent;
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-8);
    font-family: var(--tt-font-sans);
    font-size: 11px;
    font-weight: var(--tt-weight-medium);
    color: var(--tt-ink-3);
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
    letter-spacing: 0.02em;
}

.acct-action-btn:hover[b-jv8crwpcau] {
    background: var(--tt-surface-1);
    border-color: var(--tt-line);
    color: var(--tt-ink-1);
}

.acct-action-btn:disabled[b-jv8crwpcau] {
    opacity: 0.45;
    cursor: not-allowed;
}

.acct-select[b-jv8crwpcau] {
    padding: var(--tt-s-4) var(--tt-s-8);
    background: var(--tt-surface-0);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-8);
    font-family: var(--tt-font-sans);
    font-size: 13px;
    font-weight: var(--tt-weight-medium);
    color: var(--tt-ink-1);
    cursor: pointer;
    transition: border-color 150ms ease;
}

.acct-select:hover[b-jv8crwpcau] {
    border-color: var(--tt-line);
}

.acct-select:focus-visible[b-jv8crwpcau] {
    outline: none;
    border-color: var(--tt-cta);
}

.acct-carimage-preview[b-jv8crwpcau] {
    grid-column: 1;          /* keep it in the left column, under the dropdown */
    margin-top: var(--tt-s-8);
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.acct-carimage-preview img[b-jv8crwpcau] {
    max-width: 100%;
    max-height: 140px;
    object-fit: contain;
}

/* Dynamic preview: mirror the Car page treatment (cover-crop + line-art filter
   + edges feathered to transparent) at preview scale. */
.acct-carimage-preview__photo[b-jv8crwpcau] {
    width: 100%;
    height: 140px;
    overflow: hidden;
    line-height: 0;

    -webkit-mask-image:
        linear-gradient(to right,  transparent 0%, #000 16%, #000 84%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right,  transparent 0%, #000 16%, #000 84%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
    mask-composite: intersect;
}

.acct-carimage-preview__photo img[b-jv8crwpcau] {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center;
    display: block;
    filter: url(#carimage-preview-lineart);
}

.acct-pwd-msg[b-jv8crwpcau] {
    font-size: 13px;
    font-weight: var(--tt-weight-regular);
    color: var(--tt-ink-3);
}

.acct-tz-offset[b-jv8crwpcau] {
    font-size: 13px;
    font-weight: var(--tt-weight-regular);
    color: var(--tt-ink-3);
}

/* Account summary stats retired → <StatStrip Boxed>/<StatTile> component. */

.acct-footer-meta[b-jv8crwpcau] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--tt-s-10);
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--tt-ink-4);
}

.acct-footer-item[b-jv8crwpcau] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.acct-footer-val[b-jv8crwpcau] {
    color: var(--tt-ink-3);
    font-family: var(--tt-font-mono);
    font-size: 11px;
    letter-spacing: 0.02em;
}

.acct-footer-sep[b-jv8crwpcau] { color: var(--tt-ink-4); flex-shrink: 0; }

/* ===== Import ===== */
.tt-import-error[b-jv8crwpcau] {
    font-size: 12px;
    color: var(--tt-danger);
    margin: 0 0 var(--tt-s-10);
    line-height: 1.4;
}

.tt-import-dropzone[b-jv8crwpcau] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--tt-s-6);
    padding: var(--tt-s-28) var(--tt-s-20);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: 0;
    background: var(--tt-surface-1);
    cursor: pointer;
    max-width: 440px;
    width: 100%;
    margin-bottom: var(--tt-s-16);
    text-align: center;
    transition: border-color 150ms ease, background 150ms ease;
    box-sizing: border-box;
}

.tt-import-dropzone:hover:not(.has-file)[b-jv8crwpcau],
.tt-import-dropzone.is-drag-over[b-jv8crwpcau] {
    border-color: var(--tt-cta);
    background: rgba(213, 0, 28, 0.03);
}

.tt-import-dropzone__icon[b-jv8crwpcau] { color: var(--tt-ink-4); margin-bottom: var(--tt-s-4); }

.tt-import-dropzone__title[b-jv8crwpcau] {
    font-size: 14px;
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-cta);
    line-height: 1.3;
}

.tt-import-dropzone__sub[b-jv8crwpcau] {
    font-size: 12px;
    color: var(--tt-ink-3);
    line-height: 1.4;
}

.tt-import-dropzone.has-file[b-jv8crwpcau] {
    flex-direction: row;
    justify-content: flex-start;
    padding: var(--tt-s-10) var(--tt-s-14);
    gap: var(--tt-s-8);
    cursor: default;
    text-align: left;
}

.tt-import-stamp[b-jv8crwpcau] {
    flex: 1;
    font-size: 13px;
    font-weight: var(--tt-weight-medium);
    color: var(--tt-ink-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tt-import-clear[b-jv8crwpcau] {
    background: none;
    border: none;
    padding: var(--tt-s-2);
    display: inline-flex;
    align-items: center;
    color: var(--tt-ink-4);
    cursor: pointer;
    border-radius: var(--tt-radius-4);
    flex-shrink: 0;
}

.tt-import-clear:hover[b-jv8crwpcau] { color: var(--tt-danger); background: var(--tt-danger-soft); }

.tt-import-strategy-row[b-jv8crwpcau] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-12);
    margin-bottom: var(--tt-s-16);
}

.tt-import-strategy-label[b-jv8crwpcau] {
    font-size: 11px;
    font-weight: var(--tt-weight-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tt-ink-3);
    line-height: 1;
    flex-shrink: 0;
}

.tt-import-actions[b-jv8crwpcau] { display: flex; gap: var(--tt-s-8); align-items: center; }

/* Modal shell (scrim / card / title / actions / buttons) is the shared <Modal>
   component. Only modal *content* styles remain in this file (see People modals
   and the JSON preview <pre> below). */

/* ===== Export panel ===== */
.tt-export-desc[b-jv8crwpcau] {
    font-size: 13px;
    color: var(--tt-cta);
    line-height: 1.55;
    margin: 0 0 var(--tt-s-18);
    max-width: 60ch;
}

.tt-export-preview[b-jv8crwpcau] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-12);
    background: var(--tt-surface-1);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: 0;
    padding: var(--tt-s-10) var(--tt-s-14);
    margin-bottom: var(--tt-s-18);
    max-width: 440px;
}

.tt-export-preview__icon[b-jv8crwpcau] {
    flex-shrink: 0;
    color: var(--tt-cta);
}

.tt-export-preview__info[b-jv8crwpcau] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
}

.tt-export-preview__filename[b-jv8crwpcau] {
    font-size: 13px;
    font-weight: var(--tt-weight-medium);
    color: var(--tt-ink-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tt-export-preview__meta[b-jv8crwpcau] {
    font-size: 11px;
    font-family: var(--tt-font-mono);
    color: var(--tt-ink-4);
    letter-spacing: 0.02em;
}

.tt-export-rows[b-jv8crwpcau] {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--tt-s-18);
    max-width: 440px;
}

.tt-export-row[b-jv8crwpcau] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-10);
    padding: var(--tt-s-8) var(--tt-s-12);
    font-size: 13px;
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
}

.tt-export-row:last-child[b-jv8crwpcau] { border-bottom: none; }

.tt-export-row[b-jv8crwpcau]  svg { flex-shrink: 0; color: var(--tt-ink-4); width: 15px; height: 15px; }

.tt-export-row__label[b-jv8crwpcau] { flex: 1; color: var(--tt-ink-2); }

.tt-export-row__count[b-jv8crwpcau] {
    font-size: 12px;
    font-family: var(--tt-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--tt-ink-3);
}

.tt-export-range-row[b-jv8crwpcau] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-10);
    flex-wrap: wrap;
}

.tt-export-range-label[b-jv8crwpcau] {
    font-size: 11px;
    font-weight: var(--tt-weight-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tt-ink-3);
    line-height: 1;
    flex-shrink: 0;
}

/* ===== Ghost button variant ===== */
.tt-btn-ghost[b-jv8crwpcau] {
    background: transparent;
    border-color: var(--tt-line-soft);
    color: var(--tt-ink-2);
}

.tt-btn-ghost:hover[b-jv8crwpcau] { background: var(--tt-surface-1); border-color: var(--tt-line); }

.tt-export-custom[b-jv8crwpcau] { font-size: 13px; padding: 7px var(--tt-s-12); }

/* ===== Export attachment options (#473) =====
   Same label-then-control shape as .tt-import-strategy-row in the panel below, so the two
   panels read as a pair. The checkbox itself follows .tt-delete-checkbox-row, minus the
   danger accent - these choose what travels, they do not destroy anything. */
.tt-export-options-row[b-jv8crwpcau] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-12);
    margin-top: var(--tt-s-16);
}

.tt-export-options-label[b-jv8crwpcau] {
    font-size: 11px;
    font-weight: var(--tt-weight-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tt-ink-3);
}

.tt-export-option[b-jv8crwpcau] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-6);
    font-size: 13px;
    color: var(--tt-ink-2);
    cursor: pointer;
}

.tt-export-option input[type="checkbox"][b-jv8crwpcau] {
    flex-shrink: 0;
    accent-color: var(--tt-primary);
    cursor: pointer;
}

.tt-export-options-note[b-jv8crwpcau] {
    margin: var(--tt-s-8) 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--tt-ink-3);
}

/* ===== Export actions (body bottom row) ===== */
.tt-export-actions[b-jv8crwpcau] {
    display: flex;
    gap: var(--tt-s-8);
    align-items: center;
    margin-top: var(--tt-s-16);
}

/* ===== Export footer ===== */
[b-jv8crwpcau] .tt-panel__footer { text-align: center; }

.tt-export-footer-meta[b-jv8crwpcau] {
    font-size: 12px;
    color: var(--tt-ink-4);
}

.tt-export-stamp[b-jv8crwpcau] {
    color: var(--tt-ink-3);
    font-family: var(--tt-font-mono);
    letter-spacing: 0.02em;
}

.tt-export-submit[b-jv8crwpcau] { justify-content: center; }

/* ===== Delete / danger panel ===== */
.tt-destroy-list[b-jv8crwpcau] {
    border-left: 3px solid var(--tt-danger);
    background: rgba(238, 6, 6, 0.04);
    padding: var(--tt-s-14) var(--tt-s-16) var(--tt-s-12);
    margin-bottom: var(--tt-s-20);
}

.tt-destroy-list__header[b-jv8crwpcau] {
    font-size: 11px;
    font-weight: var(--tt-weight-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tt-danger);
    margin-bottom: var(--tt-s-10);
}

.tt-destroy-row[b-jv8crwpcau] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 5px 0;
    border-bottom: var(--tt-border-w) solid rgba(238, 6, 6, 0.10);
    font-size: 13px;
}

.tt-destroy-row:last-of-type[b-jv8crwpcau] { border-bottom: none; }

.tt-destroy-row__label[b-jv8crwpcau] { color: var(--tt-ink-2); }

.tt-destroy-row__count[b-jv8crwpcau] {
    font-variant-numeric: tabular-nums;
    color: var(--tt-danger);
    font-family: var(--tt-font-mono);
    font-size: 12px;
}

.tt-destroy-row.is-excluded[b-jv8crwpcau] {
    opacity: 0.35;
    text-decoration: line-through;
    text-decoration-color: var(--tt-ink-4);
}

.tt-destroy-note[b-jv8crwpcau] {
    font-size: 11px;
    color: var(--tt-ink-4);
    margin: var(--tt-s-10) 0 0;
    line-height: 1.4;
}

.tt-delete-confirm-text[b-jv8crwpcau] {
    font-size: 13px;
    color: var(--tt-ink-2);
    margin: 0 0 var(--tt-s-8);
    line-height: 1.5;
}

.tt-delete-email-tag[b-jv8crwpcau] {
    font-family: var(--tt-font-mono);
    font-size: 12px;
    background: var(--tt-surface-1);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-2);
    padding: 1px 5px;
    color: var(--tt-ink-1);
    letter-spacing: 0.02em;
}

.tt-delete-email-input[b-jv8crwpcau] {
    background: var(--tt-surface-0);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-8);
    font-family: var(--tt-font-sans);
    font-size: 14px;
    color: var(--tt-ink-1);
    padding: var(--tt-s-8) var(--tt-s-10);
    width: 100%;
    outline: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
    margin-bottom: var(--tt-s-14);
    box-sizing: border-box;
}

.tt-delete-email-input:focus[b-jv8crwpcau] {
    border-color: var(--tt-danger);
    box-shadow: 0 0 0 3px rgba(238, 6, 6, 0.10);
}

.tt-delete-checkbox-row[b-jv8crwpcau] {
    display: flex;
    align-items: flex-start;
    gap: var(--tt-s-8);
    margin-bottom: var(--tt-s-20);
    font-size: 13px;
    color: var(--tt-ink-2);
    line-height: 1.5;
    cursor: pointer;
}

.tt-delete-checkbox-row input[type="checkbox"][b-jv8crwpcau] {
    flex-shrink: 0;
    margin-top: var(--tt-s-2);
    accent-color: var(--tt-danger);
}

.tt-delete-no-recovery[b-jv8crwpcau] { color: var(--tt-cta); }

/* ===== Export JSON preview modal ===== */
/* Shell (scrim / card / header ✕ / Close action) is the shared <Modal>.
   The <pre> is a self-contained scroll region inside the dialog body. */

.tt-json-pre[b-jv8crwpcau] {
    max-height: 60vh;
    overflow: auto;
    margin: 0;
    padding: var(--tt-s-12) var(--tt-s-14);
    background: var(--tt-surface-0);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-8);
    font-size: 11px;
    line-height: 1.6;
    color: var(--tt-ink-2);
    white-space: pre;
    tab-size: 2;
}

/* Metadata rows (exported by, date, schema) */
.tt-preview-meta[b-jv8crwpcau] {
    display: flex;
    flex-direction: column;
    gap: var(--tt-s-4);
    padding: var(--tt-s-12) var(--tt-s-14);
    background: var(--tt-surface-1);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    margin-bottom: var(--tt-s-14);
}

.tt-preview-meta__row[b-jv8crwpcau] {
    display: flex;
    align-items: baseline;
    gap: var(--tt-s-10);
    font-size: 12px;
}

.tt-preview-meta__label[b-jv8crwpcau] {
    width: 80px;
    flex-shrink: 0;
    font-weight: var(--tt-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 10px;
    color: var(--tt-ink-4);
    line-height: 1.6;
}

.tt-preview-meta__value[b-jv8crwpcau] {
    color: var(--tt-ink-2);
    font-family: var(--tt-font-mono);
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: var(--tt-s-6);
    flex-wrap: wrap;
}

.tt-preview-migration[b-jv8crwpcau] {
    color: var(--tt-primary);
    font-weight: var(--tt-weight-semibold);
    font-family: var(--tt-font-sans);
    letter-spacing: 0;
    font-size: 11px;
}

/* Entity count rows */
.tt-preview-entities[b-jv8crwpcau] {
    border: var(--tt-border-w) solid var(--tt-line-soft);
    margin-bottom: var(--tt-s-12);
}

.tt-preview-entity-row[b-jv8crwpcau] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px var(--tt-s-14);
    font-size: 13px;
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
}

.tt-preview-entity-row:last-child[b-jv8crwpcau] { border-bottom: none; }

.tt-preview-entity-row__label[b-jv8crwpcau] { color: var(--tt-ink-2); }

.tt-preview-entity-row__count[b-jv8crwpcau] {
    font-family: var(--tt-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    color: var(--tt-ink-3);
}

/* Date range row */
.tt-preview-range[b-jv8crwpcau] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-10);
    padding: var(--tt-s-8) var(--tt-s-14);
    background: var(--tt-surface-1);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    margin-bottom: var(--tt-s-16);
    font-size: 12px;
}

.tt-preview-range__label[b-jv8crwpcau] {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: var(--tt-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tt-ink-4);
}

.tt-preview-range__value[b-jv8crwpcau] {
    font-family: var(--tt-font-mono);
    font-size: 11px;
    color: var(--tt-ink-2);
}

.tt-delete-actions[b-jv8crwpcau] {
    display: flex;
    gap: var(--tt-s-8);
    align-items: center;
    flex-wrap: wrap;
}

/* ===== People panel ===== */

.people-tabs[b-jv8crwpcau] {
    margin-bottom: var(--tt-s-16);
}

/* Shared list: used for both Drivers and Friends sub-lists */
.people-list[b-jv8crwpcau] {
    list-style: none;
    margin: 0 0 var(--tt-s-12);
    padding: 0;
    border: var(--tt-border-w) solid var(--tt-line-soft);
}

.people-row[b-jv8crwpcau] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-12);
    padding: var(--tt-s-10) var(--tt-s-14);
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
}

.people-row:last-child[b-jv8crwpcau] { border-bottom: none; }

.people-avatar[b-jv8crwpcau] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #334155;
    color: #fff;
    font-size: 11px;
    font-weight: var(--tt-weight-bold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

.people-name[b-jv8crwpcau] {
    flex: 1;
    font-size: 14px;
    color: var(--tt-ink-1);
    display: flex;
    align-items: baseline;
    gap: var(--tt-s-8);
    flex-wrap: wrap;
}

.people-handle[b-jv8crwpcau] {
    font-size: 12px;
    color: var(--tt-ink-4);
    font-family: var(--tt-font-mono);
}

.people-badge[b-jv8crwpcau] {
    font-size: 10px;
    font-weight: var(--tt-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tt-accent);
    border: var(--tt-border-w) solid var(--tt-accent);
    border-radius: var(--tt-radius-2);
    padding: 1px 5px;
    margin-left: var(--tt-s-6);
    vertical-align: middle;
}

.people-sub[b-jv8crwpcau] {
    font-size: 11px;
    color: var(--tt-ink-4);
    display: block;
    width: 100%;
}

.people-actions[b-jv8crwpcau] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--tt-s-6);
}

.people-status[b-jv8crwpcau] {
    font-size: 11px;
}

.people-status--muted[b-jv8crwpcau]  { color: var(--tt-ink-4); }
.people-status--declined[b-jv8crwpcau] { color: var(--tt-danger); font-weight: var(--tt-weight-semibold); }
.people-status--sent[b-jv8crwpcau]   { color: var(--tt-success); font-weight: var(--tt-weight-semibold); }

/* Section groupings (Pending / Connected / Sent / Declined) */
.people-section[b-jv8crwpcau] {
    margin-bottom: var(--tt-s-16);
}

.people-section__header[b-jv8crwpcau] {
    display: flex;
    align-items: baseline;
    gap: var(--tt-s-10);
    padding: var(--tt-s-4) 0 var(--tt-s-8);
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
    margin-bottom: 0;
}

.people-section__label[b-jv8crwpcau] {
    font-size: 11px;
    font-weight: var(--tt-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tt-ink-3);
}

.people-section__sub[b-jv8crwpcau] {
    font-size: 11px;
    color: var(--tt-ink-4);
}

/* Small inline action buttons (Edit / Remove / Accept / Decline) */
.acct-action-btn--accept[b-jv8crwpcau] {
    background: rgba(19, 196, 125, 0.10);
    border-color: var(--tt-success);
    color: #0a7a4d;
}

.acct-action-btn--accept:hover:not(:disabled)[b-jv8crwpcau] {
    background: rgba(19, 196, 125, 0.22);
}

/* Empty state */
.people-empty[b-jv8crwpcau] {
    padding: var(--tt-s-16) 0;
}

.people-empty__text[b-jv8crwpcau] {
    font-size: 14px;
    color: var(--tt-ink-2);
    margin: 0 0 var(--tt-s-4);
    font-weight: var(--tt-weight-medium);
}

.people-empty__sub[b-jv8crwpcau] {
    font-size: 13px;
    color: var(--tt-ink-4);
    margin: 0 0 var(--tt-s-16);
    max-width: 52ch;
    line-height: 1.5;
}

/* Footer row with primary action button */
/* Part of the body, not a footer: the rule above it read as a panel separator and implied the
   button belonged to different furniture than the list it acts on. */
.people-find[b-jv8crwpcau] {
    margin-top: var(--tt-s-12);
}

/* ===== People modals ===== */

.tt-modal__field[b-jv8crwpcau] {
    margin-bottom: var(--tt-s-16);
}

.tt-modal__field .tt-label[b-jv8crwpcau] {
    display: block;
    margin-bottom: var(--tt-s-4);
}

.tt-modal__input[b-jv8crwpcau] {
    width: 100%;
    box-sizing: border-box;
    padding: 7px var(--tt-s-10);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-8);
    font-family: var(--tt-font-sans);
    font-size: 14px;
    color: var(--tt-ink-1);
    background: var(--tt-surface-0);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.tt-modal__input:focus[b-jv8crwpcau] {
    outline: none;
    border-color: var(--tt-primary);
    box-shadow: var(--tt-shadow-focus);
}

/* Search input + spinner row */
.people-search-row[b-jv8crwpcau] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-8);
}

.people-search-row .tt-modal__input[b-jv8crwpcau] { flex: 1; }

.people-search-spinner[b-jv8crwpcau] {
    font-size: 18px;
    color: var(--tt-ink-4);
    line-height: 1;
}

/* Search results list inherits .people-list but with no outer margin */
.people-list--search[b-jv8crwpcau] {
    margin-top: var(--tt-s-12);
    max-height: 280px;
    overflow-y: auto;
}

/* ============================================================
 * Mobile (≤ 720px) - matches the Account page breakpoint.
 * Panels stack one-up, multi-column panel bodies collapse to a
 * single column, and the desktop-only data tools are hidden.
 * ============================================================ */
@media (max-width: 800px) {

    /* Panels stack in a single column. */
    /* User details: the paired field grid is too tight at this width -
       give every field the full row so values stop clipping. */
    .acct-fields[b-jv8crwpcau] {
        grid-template-columns: 1fr;
        column-gap: 0;
    }

    /* Long values (email, time zone) should wrap instead of overflowing. */
    .acct-field-value[b-jv8crwpcau] { flex-wrap: wrap; }
    .acct-field-value--email[b-jv8crwpcau] { overflow-wrap: anywhere; }

    /* (Account summary stats now handle their own 2×2 collapse inside StatStrip.) */

    /* Danger panel "what gets destroyed" table: let the label take the row
       and wrap, keeping the count pinned right instead of colliding. */
    .tt-destroy-row[b-jv8crwpcau] {
        align-items: flex-start;
        gap: var(--tt-s-6) var(--tt-s-12);
    }
    .tt-destroy-row__label[b-jv8crwpcau] { flex: 1; min-width: 0; overflow-wrap: anywhere; }
    .tt-destroy-row__count[b-jv8crwpcau] { flex-shrink: 0; text-align: right; }

    /* People rows: let the action buttons drop below the name rather than
       squeezing the name to nothing. */
    .people-row[b-jv8crwpcau] { flex-wrap: wrap; }
    .people-actions[b-jv8crwpcau] { margin-left: auto; }
}

/* MOBILE TIER (#400). Hiding is mobile behaviour, not tablet: the tablet tier reflows but keeps
   every control reachable. Export / Import are genuinely not useful on a phone (file download,
   file picker, large JSON), so they drop here rather than at 800. Their counter slots collapse
   with them, so the remaining panels renumber with no gaps. */
@media (max-width: 600px) {
    [b-jv8crwpcau] .profile-panel--hide-mobile { display: none; }
}

/* User settings: the car-page image keeps its own column - the selector and the preview it
   drives must never be split across a wrap - and the four controls stack beside it. Same floor
   idea as everywhere else: it collapses to one column rather than crushing either side. */
.acct-settings[b-jv8crwpcau] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--tt-s-32);
    align-items: start;
}

.acct-settings__col[b-jv8crwpcau] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* The controls read first and the image sits beside them. Ordered in CSS rather than by moving
   the markup, so the car-page selector still precedes the preview it drives in the DOM - and in
   the tab order, and when the grid collapses to one column. */
.acct-settings__col--image[b-jv8crwpcau]    { order: 2; }
.acct-settings__col--controls[b-jv8crwpcau] { order: 1; }
/* /Pages/Recap.razor.rz.scp.css */
/* The event recap (#354).

   The shell used to be repeated here rather than shared, because the Perform pages each carried
   their own and they were not the same - Prep stacked with a gap at 48px side padding while
   Trackside and Coaching sat at 28px with no stacking. #400 has since unified all six copies into
   .tt-page (app.css). */

/* Shell: .tt-page in app.css (#400). */

.perf__empty[b-814m8mj5kt] {
    margin: 0;
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-4);
}

/* Says how you got here, because there is no nav entry to this page and a driver who lands on it
   without that sentence has no way to know why. */
.recap__whence[b-814m8mj5kt] {
    font-size: var(--tt-text-xs);
    line-height: 1.45;
    color: var(--tt-ink-4);
}

/* A band heading — the same device Trackside uses to separate its moments. */
.recap__section[b-814m8mj5kt] {
    margin: var(--tt-s-8) 0 0;
    padding-bottom: var(--tt-s-6);
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-bold);
    letter-spacing: var(--tt-tracking-wide);
    text-transform: uppercase;
    color: var(--tt-ink-2);
}

/* ── What the day did ──────────────────────────────────────────────────────────────────────── */

.recap__bands[b-814m8mj5kt] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tt-s-4);
    margin-top: var(--tt-s-14);
}

/* A statement of fact about the record, so it is bordered rather than coloured: nothing here is
   good or bad news, it is what the day did. */
.recap__band[b-814m8mj5kt] {
    border: var(--tt-border-w) solid var(--tt-line-soft);
    background: var(--tt-surface-1);
    padding: var(--tt-s-2) var(--tt-s-8);
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-3);
}

/* ── Session by session ────────────────────────────────────────────────────────────────────── */

.recap-rows__head[b-814m8mj5kt],
.recap-rows__row[b-814m8mj5kt] {
    display: grid;
    grid-template-columns: 80px 1fr 78px 64px 52px 58px;
    gap: 0 var(--tt-s-10);
    align-items: baseline;
}

.recap-rows__head[b-814m8mj5kt] {
    padding-bottom: var(--tt-s-6);
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    letter-spacing: var(--tt-tracking-wide);
    text-transform: uppercase;
    color: var(--tt-ink-4);
}

.recap-rows__row[b-814m8mj5kt] {
    padding: var(--tt-s-8) 0;
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-2);
    font-variant-numeric: tabular-nums;
}

/* Everything after the goal is a measurement, read down its column. */
.recap-rows__head span:nth-child(n+3)[b-814m8mj5kt],
.recap-rows__row span:nth-child(n+3)[b-814m8mj5kt] { text-align: right; }

.recap-rows__num[b-814m8mj5kt] {
    font-weight: var(--tt-weight-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recap-rows__goal[b-814m8mj5kt] { line-height: 1.4; }
.recap-rows__temp[b-814m8mj5kt] { color: var(--tt-ink-4); }

/* The day's quickest lap, which the header tile also states. The only figure in the table that
   earns a colour. */
.recap-rows__best[b-814m8mj5kt] {
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-status-ok);
}

/* A session that exists but never ran. Present, because the gap is part of the day. */
.recap-rows__row.is-absent[b-814m8mj5kt] { color: var(--tt-ink-4); }

.recap__note[b-814m8mj5kt],
.recap__none[b-814m8mj5kt],
.recap__empty[b-814m8mj5kt] {
    margin: var(--tt-s-8) 0 0;
    font-size: var(--tt-text-xs);
    line-height: 1.45;
    color: var(--tt-ink-4);
    text-wrap: pretty;
}

/* An empty half is an answer, so it reads as one rather than as a panel that failed to load. */
.recap__empty[b-814m8mj5kt] {
    margin: 0;
    border: var(--tt-border-w) dashed var(--tt-line);
    background: var(--tt-surface-1);
    padding: var(--tt-s-14) var(--tt-s-16);
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-3);
    line-height: 1.5;
}

/* ── In your words ─────────────────────────────────────────────────────────────────────────── */

/* Two panels side by side while there is room: the debriefs and the goals are read against each
   other — what you said, and what you were trying to do when you said it. */
/* Uses .tt-panels (app.css) - equal share above the 390px floor. See #400. */

.recap-said[b-814m8mj5kt] { padding: var(--tt-s-10) 0; border-top: var(--tt-border-w) solid var(--tt-line-soft); }

.recap-said__head[b-814m8mj5kt] {
    display: flex;
    align-items: baseline;
    gap: var(--tt-s-8);
}

.recap-said__who[b-814m8mj5kt] {
    flex: 1;
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    letter-spacing: var(--tt-tracking-wide);
    text-transform: uppercase;
    color: var(--tt-ink-4);
}

/* Verbatim, and given room to be read. This is the thing the page exists to surface. */
.recap-said__text[b-814m8mj5kt] {
    margin: var(--tt-s-4) 0 0;
    font-size: var(--tt-text-sm);
    line-height: 1.5;
    color: var(--tt-ink-2);
    text-wrap: pretty;
    white-space: pre-wrap;
}

/* ── What was in play ──────────────────────────────────────────────────────────────────────── */

.recap-goal[b-814m8mj5kt] { padding: var(--tt-s-8) 0; border-top: var(--tt-border-w) solid var(--tt-line-soft); }

.recap-goal__head[b-814m8mj5kt] {
    display: flex;
    align-items: baseline;
    gap: var(--tt-s-8);
}

.recap-goal__scope[b-814m8mj5kt] {
    width: 48px;
    flex: none;
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    letter-spacing: var(--tt-tracking-wide);
    color: var(--tt-ink-4);
}

.recap-goal__objective[b-814m8mj5kt] {
    flex: 1;
    font-size: var(--tt-text-sm);
    line-height: 1.4;
    color: var(--tt-ink-2);
}

.recap-goal__claims[b-814m8mj5kt] {
    white-space: nowrap;
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-4);
    font-variant-numeric: tabular-nums;
}

/* The coaching the driver wrote down. Indented under the objective it belongs to, and quieter than
   it — the objective is what they were chasing, this is how. */
.recap-goal__approach[b-814m8mj5kt] {
    margin: var(--tt-s-4) 0 0 calc(48px + var(--tt-s-8));
    font-size: var(--tt-text-xs);
    line-height: 1.5;
    color: var(--tt-ink-3);
    text-wrap: pretty;
}

@media (max-width: 800px) {

    /* Goal and claims carry the row on a narrow screen; the rest is detail that can go. The
       claimed column is sized to hold "0 of 12 laps" on one line — wrapped, it reads as two
       separate figures. */
    .recap-rows__head[b-814m8mj5kt],
    .recap-rows__row[b-814m8mj5kt] { grid-template-columns: 74px 1fr 82px 52px; }

    .recap-rows__head span:nth-child(n+5)[b-814m8mj5kt],
    .recap-rows__row span:nth-child(n+5)[b-814m8mj5kt] { display: none; }

    .recap-goal__approach[b-814m8mj5kt] { margin-left: 0; }
}
/* /Pages/SharedDay.razor.rz.scp.css */
/* The link's shell (#359). The DOCUMENT is SharedDayView and carries its own styling — a page's
   scoped stylesheet cannot reach a child component's elements, so what is left here is only what
   this page renders itself: the loading and closed-link states, and the footer it passes in. */

.sd[b-pyvfmq4fy8] {
    max-width: 780px;
    margin: 0 auto;
    padding: var(--tt-s-32) var(--tt-s-24) var(--tt-s-64);
}

.sd__empty[b-pyvfmq4fy8] {
    padding: var(--tt-s-48) 0;
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-3);
    text-align: center;
}

/* ── The link is closed ─────────────────────────────────────────────────────────────────────
   Deliberately says nothing about WHY. The API cannot distinguish expired from withdrawn from
   never-existed, on purpose, so this must not either — the alternative confirms to somebody
   holding a dead URL that there is a real day behind it. */
.sd__gone[b-pyvfmq4fy8] {
    margin: var(--tt-s-48) 0;
    padding: var(--tt-s-32);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-8);
    background: var(--tt-surface-1);
    text-align: center;
}

.sd__gone-title[b-pyvfmq4fy8] {
    margin: 0 0 var(--tt-s-8);
    font-size: var(--tt-text-lg);
    font-weight: var(--tt-weight-regular);
    color: var(--tt-ink-1);
}

.sd__gone-body[b-pyvfmq4fy8] {
    margin: 0 0 var(--tt-s-20);
    font-size: var(--tt-text-sm);
    line-height: 1.55;
    color: var(--tt-ink-3);
    text-wrap: pretty;
}

/* Passed into the component as its footer, so it is this page's markup living inside the
   component's tree — which is why the rule belongs here and not there. */
.sd__foot[b-pyvfmq4fy8] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-14);
    flex-wrap: wrap;
    margin-top: var(--tt-s-32);
    padding-top: var(--tt-s-14);
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-4);
}

.sd__foot > span[b-pyvfmq4fy8] { flex: 1; min-width: 200px; text-wrap: pretty; }

@media (max-width: 800px) {
    .sd[b-pyvfmq4fy8] { padding: var(--tt-s-20) var(--tt-s-16) var(--tt-s-48); }
}
/* /Pages/SharedDayDetail.razor.rz.scp.css */
/* The signed-in door onto a shared day (#360). The document itself is SharedDayView and carries
   its own styling; this is only the shell around it. */

/* Shell: .tt-page in app.css (#400). */

.perf__empty[b-q4yfudc92b] {
    padding: var(--tt-s-24) 0;
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-3);
}

.sdd__back[b-q4yfudc92b] {
    padding: 0;
    margin-bottom: var(--tt-s-12);
    border: none;
    background: none;
    font: inherit;
    font-size: var(--tt-text-xs);
    color: var(--tt-cta);
    cursor: pointer;
}

.sdd__back:hover[b-q4yfudc92b] { opacity: 0.7; }

.sdd__act[b-q4yfudc92b] {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--tt-s-24);
}
/* /Pages/SharedWithYou.razor.rz.scp.css */
/* Shared with you (#360). Ported from the design prototype's list view. */

/* Shell: .tt-page in app.css (#400). It used to declare 48px sides so PageHeader's back button
   had a gutter to outdent into; the chevron is inline now and the shell owns the gutter. */

.perf__empty[b-jsptoth0f0] {
    padding: var(--tt-s-24) 0;
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-3);
}

.swy__empty[b-jsptoth0f0] {
    margin-top: var(--tt-s-20);
    padding: var(--tt-s-14) var(--tt-s-16);
    border: var(--tt-border-w) dashed var(--tt-line);
    background: var(--tt-surface-1);
    border-radius: var(--tt-radius-4);
    font-size: var(--tt-text-sm);
    line-height: 1.55;
    color: var(--tt-ink-3);
    text-wrap: pretty;
}

/* ── Group and filter ───────────────────────────────────────────────────────────────────── */
.swy__controls[b-jsptoth0f0] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-8);
    flex-wrap: wrap;
    margin-top: var(--tt-s-20);
    padding: var(--tt-s-8) var(--tt-s-12);
    background: var(--tt-surface-1);
    border-radius: var(--tt-radius-4);
}

.swy__ctrl-lbl[b-jsptoth0f0] {
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tt-ink-4);
}

.swy__ctrl-sep[b-jsptoth0f0] {
    width: var(--tt-border-w);
    height: 18px;
    background: var(--tt-line);
}

/* ── A group ────────────────────────────────────────────────────────────────────────────── */
.swy__group[b-jsptoth0f0] { margin-top: var(--tt-s-22); }

.swy__group-head[b-jsptoth0f0] {
    display: flex;
    align-items: baseline;
    gap: var(--tt-s-8);
    padding-bottom: var(--tt-s-6);
    border-bottom: var(--tt-border-w) solid var(--tt-line);
}

.swy__group-lbl[b-jsptoth0f0] {
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-bold);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--tt-ink-2);
}

.swy__group-count[b-jsptoth0f0] {
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-4);
}

/* ── A row ──────────────────────────────────────────────────────────────────────────────── */
.swy__row[b-jsptoth0f0] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--tt-s-12);
    padding: var(--tt-s-12) var(--tt-s-2);
    border: none;
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
    background: none;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.swy__row:hover[b-jsptoth0f0] { background: var(--tt-surface-1); }

.swy__av[b-jsptoth0f0] {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--tt-primary);
    color: var(--tt-surface-0);
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
}

.swy__body[b-jsptoth0f0] { flex: 1; min-width: 0; }

.swy__primary[b-jsptoth0f0] {
    display: flex;
    align-items: baseline;
    gap: var(--tt-s-8);
    flex-wrap: wrap;
}

.swy__who[b-jsptoth0f0] {
    font-size: var(--tt-text-sm);
    font-weight: var(--tt-weight-medium);
    color: var(--tt-ink-1);
}

.swy__secondary[b-jsptoth0f0] {
    display: block;
    margin-top: var(--tt-s-2);
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-4);
}

.swy__figures[b-jsptoth0f0] {
    flex: none;
    text-align: right;
}

/* Tabular so a column of lap times lines up on the decimal, which is the only way a list of them
   is scannable. */
.swy__best[b-jsptoth0f0] {
    display: block;
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-2);
    font-variant-numeric: tabular-nums;
}

.swy__volume[b-jsptoth0f0] {
    display: block;
    margin-top: var(--tt-s-2);
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-4);
}

@media (max-width: 800px) {

    /* The figures drop under the name rather than squeezing it to nothing. */
    .swy__row[b-jsptoth0f0] { flex-wrap: wrap; }
    .swy__figures[b-jsptoth0f0] { text-align: left; margin-left: calc(30px + var(--tt-s-12)); }
}
/* /Pages/SignInFailed.razor.rz.scp.css */
/* ── Sign-in failed ──────────────────────────────────────────────
   #284 — layout only. The card chrome, title and description come from <Panel>, and the
   buttons from the global .tt-btn scale, so nothing here restates colour or component styling.

   Narrow measure and top margin because this page is reached mid-flow with the app bar in a
   signed-out state — it should read as a short, self-contained message rather than a full page
   of content.                                                                                 */
.signin-failed[b-cmxg39yxn3] {
    max-width: 48rem;
    margin: var(--tt-s-32) auto;
    padding: 0 var(--tt-s-16);
}

.signin-failed__title[b-cmxg39yxn3] {
    font-family: var(--tt-font-display);
    font-size: var(--tt-text-3xl);
    color: var(--tt-ink-1);
    margin: 0 0 var(--tt-s-24);
}

.signin-failed__actions[b-cmxg39yxn3] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tt-s-12);
}

.signin-failed__ref[b-cmxg39yxn3] {
    margin: var(--tt-s-20) 0 0;
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-4);
}

/* Monospace so the trace id stays legible and is easy to read aloud or copy.

   Its own block rather than inline: a 32-char id can't share a line with the label on a phone,
   and letting it wrap inline splits the chip background mid-token. `width: fit-content` keeps the
   chip hugging the id instead of stretching the full width. break-all is the last-resort guard
   for very narrow viewports.                                                                   */
.signin-failed__code[b-cmxg39yxn3] {
    display: block;
    width: fit-content;
    margin-top: var(--tt-s-6);
    font-family: var(--tt-font-mono);
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-3);
    background: var(--tt-surface-2);
    border: var(--tt-border-w) solid var(--tt-line);
    border-radius: var(--tt-radius-4);
    padding: var(--tt-s-2) var(--tt-s-6);
    word-break: break-all;
}
/* /Pages/Signup.razor.rz.scp.css */
/* ============================================================
   TrackSpace - Sign-up / onboarding flow
   Interim page between "Start free" and the app. Porsche-flat
   idiom, .su-* namespace. Tokens from colors_and_type / palettes.
   ============================================================ */

/* ---- Root - fixed overlay, full viewport ---- */
.su-root[b-0y3ltk98jv] {
    position: fixed;
    inset: 0;
    background: var(--tt-surface-2);
    color: var(--tt-ink-1);
    font-family: inherit;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    z-index: 200;
}

/* ---- Top bar (mirrors the app bar: centered brand) ---- */
.su-bar[b-0y3ltk98jv] {
    height: 56px;
    flex: 0 0 56px;
    background: var(--tt-surface-2);
    border-bottom: var(--tt-border-w) solid var(--tt-line);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 var(--tt-s-18);
}

.su-bar__back[b-0y3ltk98jv] {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    color: var(--tt-ink-2);
    font-weight: var(--tt-weight-medium);
}

.su-bar__back:hover[b-0y3ltk98jv] { color: var(--tt-ink-1); }

.su-bar__brand[b-0y3ltk98jv] {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    font-weight: var(--tt-weight-bold);
    letter-spacing: -0.02em;
    font-size: 1.05rem;
    color: var(--tt-ink-1);
}

.su-bar__signin[b-0y3ltk98jv] {
    justify-self: end;
    font-size: 13px;
    color: var(--tt-ink-2);
    white-space: nowrap;
}

.su-bar__signin button[b-0y3ltk98jv] {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-1);
    padding: 0;
    margin-left: var(--tt-s-6);
    border-bottom: var(--tt-border-w) solid var(--tt-ink-1);
}

.su-bar__signin button:hover[b-0y3ltk98jv] { color: var(--tt-primary); border-color: var(--tt-primary); }

/* ---- Scroll area ---- */
.su-scroll[b-0y3ltk98jv] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--tt-s-40) var(--tt-s-24) var(--tt-s-64);
}

/* ---- Step indicator ---- */
.su-steps[b-0y3ltk98jv] {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 38px;
}

.su-step[b-0y3ltk98jv] { display: inline-flex; align-items: center; gap: var(--tt-s-10); }

.su-step__dot[b-0y3ltk98jv] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid var(--tt-line);
    background: var(--tt-surface-0);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-3);
    font-variant-numeric: tabular-nums;
}

.su-step.is-active .su-step__dot[b-0y3ltk98jv]  { border-color: var(--tt-primary); background: var(--tt-primary); color: #fff; }
.su-step.is-done   .su-step__dot[b-0y3ltk98jv]  { border-color: var(--tt-ink-1);   background: var(--tt-ink-1);   color: var(--tt-surface-0); }
.su-step.is-skipped .su-step__dot[b-0y3ltk98jv] { opacity: 0.4; }

.su-step__label[b-0y3ltk98jv] { font-size: 12px; font-weight: var(--tt-weight-medium); color: var(--tt-ink-3); letter-spacing: 0.01em; }
.su-step.is-active  .su-step__label[b-0y3ltk98jv]  { color: var(--tt-ink-1); }
.su-step.is-skipped .su-step__label[b-0y3ltk98jv]  { opacity: 0.4; text-decoration: line-through; }

.su-step__bar[b-0y3ltk98jv] { width: 40px; height: 1px; background: var(--tt-line); margin: 0 var(--tt-s-14); }

/* ---- Stage card ---- */
.su-stage[b-0y3ltk98jv]      { width: 100%; max-width: 520px; }
.su-stage--wide[b-0y3ltk98jv] { max-width: 1060px; }

.su-head[b-0y3ltk98jv] { text-align: center; margin-bottom: 30px; }

.su-eyebrow[b-0y3ltk98jv] {
    font-size: 11px;
    font-weight: var(--tt-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--tt-primary);
    display: inline-flex;
    align-items: center;
    gap: var(--tt-s-12);
    margin-bottom: var(--tt-s-14);
    white-space: nowrap;
}

.su-eyebrow[b-0y3ltk98jv]::before,
.su-eyebrow[b-0y3ltk98jv]::after { content: ''; width: 18px; height: 1px; background: var(--tt-primary); display: inline-block; }

.su-title[b-0y3ltk98jv] { font-size: 1.9rem; font-weight: var(--tt-weight-light); letter-spacing: -0.02em; line-height: 1.08; margin: 0; }
.su-sub[b-0y3ltk98jv]   { font-size: 0.95rem; color: var(--tt-ink-3); line-height: 1.55; margin: var(--tt-s-12) auto 0; max-width: 46ch; }

/* ---- Panel ---- */
.su-panel[b-0y3ltk98jv] { background: #fff; border: var(--tt-border-w) solid var(--tt-line); padding: 30px 30px var(--tt-s-28); }

/* ---- Provider buttons ---- */
.su-providers[b-0y3ltk98jv] { display: flex; flex-direction: column; gap: 11px; }

.su-prov[b-0y3ltk98jv] {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    padding: 13px var(--tt-s-18);
    background: var(--tt-surface-0);
    border: var(--tt-border-w) solid var(--tt-ink-1);
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: var(--tt-weight-medium);
    color: var(--tt-ink-1);
    transition: background 140ms, color 140ms;
}

.su-prov:hover[b-0y3ltk98jv]               { background: var(--tt-ink-1); color: var(--tt-surface-0); }
.su-prov:hover .su-prov__chev[b-0y3ltk98jv] { color: var(--tt-surface-0); }

.su-prov__icon[b-0y3ltk98jv]  { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 20px; }
.su-prov__label[b-0y3ltk98jv] { flex: 1; text-align: left; }
.su-prov__chev[b-0y3ltk98jv]  { color: var(--tt-ink-4); }

/* Coming-soon providers */
.su-prov--soon[b-0y3ltk98jv] {
    opacity: 0.4;
    cursor: not-allowed;
    border-color: var(--tt-line);
}

.su-prov__soon[b-0y3ltk98jv] {
    margin-left: auto;
    font-size: 9px;
    font-weight: var(--tt-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--tt-ink-4);
}

.su-or[b-0y3ltk98jv] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-14);
    margin: var(--tt-s-18) 0;
    color: var(--tt-ink-4);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.su-or[b-0y3ltk98jv]::before,
.su-or[b-0y3ltk98jv]::after { content: ''; flex: 1; height: 1px; background: var(--tt-line); }

.su-field[b-0y3ltk98jv] { display: flex; flex-direction: column; gap: 7px; }

.su-label[b-0y3ltk98jv] { font-size: 12px; font-weight: var(--tt-weight-semibold); color: var(--tt-ink-2); letter-spacing: 0.01em; }

.su-input[b-0y3ltk98jv] {
    width: 100%;
    box-sizing: border-box;
    padding: var(--tt-s-12) var(--tt-s-14);
    border: var(--tt-border-w) solid var(--tt-line);
    background: var(--tt-surface-0);
    font-family: inherit;
    font-size: 14px;
    color: var(--tt-ink-1);
    border-radius: 0;
}

.su-input:focus[b-0y3ltk98jv] { outline: none; border-color: var(--tt-ink-1); }


/* ---- Trust note ---- */
.su-trust[b-0y3ltk98jv] {
    display: flex;
    gap: var(--tt-s-12);
    align-items: flex-start;
    margin-top: var(--tt-s-22);
    padding: var(--tt-s-16) var(--tt-s-18);
    background: var(--tt-surface-2);
    border: var(--tt-border-w) solid var(--tt-line-soft);
}

.su-trust__icon[b-0y3ltk98jv]     { color: var(--tt-ink-1); flex: 0 0 auto; margin-top: 1px; }
.su-trust__text[b-0y3ltk98jv]     { font-size: 12.5px; line-height: 1.5; color: var(--tt-ink-3); }
.su-trust__text strong[b-0y3ltk98jv] { color: var(--tt-ink-1); font-weight: var(--tt-weight-semibold); }

/* ---- Plan picker ---- */
.su-plans[b-0y3ltk98jv] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--tt-s-14);
}

/* A plan card is a description, not a control. It was a <button> with a radio and an is-sel state
   while signup picked a tier; it is a <div> now that every account starts free (#512), so the
   pointer cursor, the hover affordance and the radio are all gone. The tier you land on is marked
   instead - a statement of fact rather than something to act on. */
.su-plan[b-0y3ltk98jv] {
    position: relative;
    text-align: left;
    background: var(--tt-surface-0);
    border: var(--tt-border-w) solid var(--tt-line);
    padding: 38px var(--tt-s-20) var(--tt-s-20);
    display: flex;
    flex-direction: column;
    font-family: inherit;
}

.su-plan.is-start[b-0y3ltk98jv] { border-color: var(--tt-primary); box-shadow: inset 0 0 0 1px var(--tt-primary); }

.su-plan__stage[b-0y3ltk98jv] { font-size: 10px; font-weight: var(--tt-weight-semibold); text-transform: uppercase; letter-spacing: 0.13em; color: var(--tt-ink-4); }
.su-plan__name[b-0y3ltk98jv]  { font-size: 1.3rem; font-weight: var(--tt-weight-book); letter-spacing: -0.01em; margin: var(--tt-s-8) 0 var(--tt-s-2); }
.su-plan__price[b-0y3ltk98jv] { font-size: 0.95rem; color: var(--tt-ink-2); font-weight: var(--tt-weight-medium); margin-bottom: var(--tt-s-16); }
.su-plan__per[b-0y3ltk98jv]   { color: var(--tt-ink-4); font-weight: var(--tt-weight-regular); font-size: 0.8rem; }
.su-plan__free[b-0y3ltk98jv]  { color: var(--tt-primary); font-weight: var(--tt-weight-semibold); }

.su-plan__feats[b-0y3ltk98jv] { display: flex; flex-direction: column; gap: 9px; border-top: var(--tt-border-w) solid var(--tt-line-soft); padding-top: var(--tt-s-14); margin-top: auto; }
.su-plan__feat[b-0y3ltk98jv]  { display: flex; gap: var(--tt-s-8); align-items: flex-start; font-size: 12px; color: var(--tt-ink-2); line-height: 1.35; }

.su-plan__pop[b-0y3ltk98jv] {
    position: absolute;
    top: -1px;
    left: -1px;
    white-space: nowrap;
    font-size: 9.5px;
    font-weight: var(--tt-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--tt-surface-0);
    background: var(--tt-ink-1);
    padding: var(--tt-s-4) 9px;
}

@media (max-width: 800px) {
    .su-plans[b-0y3ltk98jv] { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .su-plans[b-0y3ltk98jv] { grid-template-columns: 1fr; }
}

/* ---- Summary / footer row ---- */
.su-foot[b-0y3ltk98jv]         { display: flex; align-items: center; justify-content: space-between; gap: var(--tt-s-20); margin-top: var(--tt-s-28); }
.su-foot__note[b-0y3ltk98jv]   { font-size: 12.5px; color: var(--tt-ink-3); line-height: 1.5; }
.su-foot__note strong[b-0y3ltk98jv] { color: var(--tt-ink-1); font-weight: var(--tt-weight-semibold); }
.su-foot__actions[b-0y3ltk98jv] { display: flex; gap: var(--tt-s-10); flex: 0 0 auto; }

/* The regular rate, stated under the waived price during the introductory period. Quiet - it is
   what the tier will cost, not what it costs today. */
.su-plan__after[b-0y3ltk98jv] {
    display: block;
    margin-top: var(--tt-s-4);
    font-size: 11.5px;
    color: var(--tt-ink-4);
    letter-spacing: 0.01em;
}

.su-draftnote[b-0y3ltk98jv] { text-align: center; font-size: 11px; color: var(--tt-ink-4); letter-spacing: 0.04em; margin-top: var(--tt-s-16); }

/* ---- Done ---- */
.su-done[b-0y3ltk98jv] { text-align: center; padding: var(--tt-s-20) 0 0; }

.su-done__mark[b-0y3ltk98jv] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--tt-ink-1);
    color: var(--tt-surface-0);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--tt-s-22);
}

.su-recap[b-0y3ltk98jv] { display: flex; flex-direction: column; gap: 0; border: var(--tt-border-w) solid var(--tt-line); margin: 26px 0; text-align: left; }

.su-recap__row[b-0y3ltk98jv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px var(--tt-s-18);
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
    font-size: 13px;
}

.su-recap__row:last-child[b-0y3ltk98jv] { border-bottom: none; }
.su-recap__k[b-0y3ltk98jv] { color: var(--tt-ink-3); }
.su-recap__v[b-0y3ltk98jv] { color: var(--tt-ink-1); font-weight: var(--tt-weight-medium); }

/* Legal links in the consent line. Underlined rather than coloured - this is fine print that must
   be reachable, not a call to action competing with the provider buttons above it. */
.su-draftnote a[b-0y3ltk98jv] {
    color: var(--tt-ink-3);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.su-draftnote a:hover[b-0y3ltk98jv] { color: var(--tt-ink-1); }
/* /Pages/Support.razor.rz.scp.css */
/* Shell: .tt-page in app.css (#400). */

/* Action + the address in plain text beside it — the button covers the common case,
   the literal address covers copying it into another mail client. */
.support__contact[b-ft3zkbc1ry] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-14);
    flex-wrap: wrap;
}

.support__mail[b-ft3zkbc1ry] {
    display: inline-flex;
    align-items: center;
    gap: var(--tt-s-8);
    text-decoration: none;
}

.support__mail i[b-ft3zkbc1ry] {
    width: 15px;
    height: 15px;
    display: inline-flex;
}

.support__addr[b-ft3zkbc1ry] {
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-3);
}

.support__note[b-ft3zkbc1ry] {
    margin: var(--tt-s-14) 0 0;
    font-size: var(--tt-text-sm);
    line-height: 1.55;
    color: var(--tt-ink-2);
    max-width: 62ch;
}

.support__list[b-ft3zkbc1ry] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--tt-s-14);
}

.support__list li[b-ft3zkbc1ry] {
    display: flex;
    flex-direction: column;
    gap: var(--tt-s-2);
    padding-left: var(--tt-s-14);
    border-left: 2px solid var(--tt-line-soft);
}

.support__item-title[b-ft3zkbc1ry] {
    font-size: var(--tt-text-sm);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-1);
}

.support__item-desc[b-ft3zkbc1ry] {
    font-size: var(--tt-text-sm);
    line-height: 1.5;
    color: var(--tt-ink-3);
    max-width: 62ch;
}

@media (max-width: 800px) {
    .support[b-ft3zkbc1ry] {
        padding: var(--tt-s-12);
    }
}
/* /Pages/Terms.razor.rz.scp.css */
/* Shell: .tt-page in app.css (#400).

   Deliberately the same rules as Privacy.razor.css, class names aside: the two legal pages are a
   pair and should be typographically indistinguishable. The page column is 1080px, but running
   prose is not a 1080px-wide thing to read - at that width a line runs past 130 characters - so
   the shell keeps the app's column and the prose block sets its own measure inside it.

   Not folded into a shared .legal block yet: two instances is not enough to abstract on (the
   rule-of-three), and a third legal page would be the moment to do it. */

.terms__body[b-acz1km4pbu] {
    max-width: 68ch;
    color: var(--tt-ink-2);
    font-size: var(--tt-text-base);
    line-height: var(--tt-leading-normal);
}

.terms__updated[b-acz1km4pbu] {
    color: var(--tt-ink-4);
    font-size: var(--tt-text-sm);
    margin: 0 0 var(--tt-s-24);
}

/* Section headings are numbered, because the text cross-references itself by number. The number is
   part of the heading text rather than a list counter, so it survives being copied out of the page
   and into an email. */
.terms__body h2[b-acz1km4pbu] {
    font-size: var(--tt-text-lg);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-1);
    margin: var(--tt-s-40) 0 var(--tt-s-12);

    /* Jumping to #s2 from the section-4 link must not park the heading under the fixed app bar. */
    scroll-margin-top: var(--tt-s-64);
}

.terms__body p[b-acz1km4pbu] {
    margin: 0 0 var(--tt-s-16);
}

.terms__body ul[b-acz1km4pbu] {
    margin: 0 0 var(--tt-s-16);
    padding-left: var(--tt-s-20);
}

.terms__body li[b-acz1km4pbu] {
    margin-bottom: var(--tt-s-8);
}

.terms__body strong[b-acz1km4pbu] { color: var(--tt-ink-1); }

.terms__body a[b-acz1km4pbu] {
    color: var(--tt-primary);
    text-decoration: none;
}

.terms__body a:hover[b-acz1km4pbu] { text-decoration: underline; }

.terms__body a:focus-visible[b-acz1km4pbu] {
    outline: 2px solid var(--tt-primary);
    outline-offset: var(--tt-s-2);
}
/* /Pages/Tour.razor.rz.scp.css */
.ab[b-coogv0qjq9] {
    background: var(--tt-surface-1);
    min-height: 100%;
}

/* ── Hero ─────────────────────────────────────────────────
   Structure is Splash's cinematic hero (.tl-hero2 + .tl-hero__* from splash.css, loaded
   globally), but the SIZING AND TREATMENT now match the Dashboard's .hr-cine rather than Splash
   (#479). Tour is a page you reach from inside the app, so it should read like the app's own
   hero, not like the signed-out landing page. Splash keeps .tl-hero2 as it was.

   Every value below is .hr-cine's, from home.css. If that hero changes, change these with it. */
.ab-hero[b-coogv0qjq9] { min-height: 360px; }

.ab-hero[b-coogv0qjq9]  .tl-hero2__img {
    filter: grayscale(0.5) brightness(0.5) contrast(1.05);
}

.ab-hero[b-coogv0qjq9]::after {
    background: linear-gradient(90deg,
                rgba(14, 20, 24, 0.94) 0%,
                rgba(14, 20, 24, 0.70) 46%,
                rgba(14, 20, 24, 0.25) 100%);
}

.ab-hero[b-coogv0qjq9]  .tl-hero2__inner {
    max-width: 1180px;
    padding: var(--tt-s-44) var(--tt-s-44);
}

/* The title carries the height difference: Splash sets 3.4rem, the Dashboard hero 2.7rem. Match
   the Dashboard's so the two heroes are the same object at the same scale - min-height alone only
   sets a floor, and a larger headline pushes straight through it. */
.ab-hero[b-coogv0qjq9]  .tl-hero__title {
    font-size: 2.7rem;
    font-weight: var(--tt-weight-light);
    letter-spacing: -0.02em;
    line-height: 1.04;
    margin: var(--tt-s-16) 0 var(--tt-s-12);
}

/* ── Section labels (reuses .hr-seclabel from home.css) ── */
.ab-seclabel__hint[b-coogv0qjq9] {
    font-size: 0.7rem;
    color: var(--tt-ink-4);
    letter-spacing: 0.04em;
    text-transform: none;
    font-weight: var(--tt-weight-regular);
}

.ab-seclabel--spaced[b-coogv0qjq9] {
    margin-top: var(--tt-s-48);
}

/* ── Selected pillar body ─────────────────────────────── */
.ab-pillbody[b-coogv0qjq9] {
    margin-top: var(--tt-s-28);
}

.ab-lead[b-coogv0qjq9] {
    font-size: var(--tt-text-base);
    line-height: var(--tt-leading-normal);
    color: var(--tt-ink-3);
    margin: 0 0 var(--tt-s-24);
    max-width: 70ch;
}

.ab-lead strong[b-coogv0qjq9] { font-weight: var(--tt-weight-semibold); color: var(--tt-ink-2); }

/* ── Prepare steps ────────────────────────────────────── */
.ab-steps[b-coogv0qjq9] {
    display: grid;
    gap: var(--tt-s-14);
}

.ab-step[b-coogv0qjq9] {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: var(--tt-s-18);
    background: var(--tt-surface-0);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-12);
    padding: var(--tt-s-20) var(--tt-s-22);
    box-shadow: var(--tt-shadow-sm);
}

.ab-step__num[b-coogv0qjq9] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--tt-ink-1);
    color: var(--tt-surface-0);
    font-size: var(--tt-text-lg);
    font-weight: var(--tt-weight-bold);
    line-height: 1;
}

.ab-step__title[b-coogv0qjq9] {
    font-size: var(--tt-text-md);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-1);
    margin: 0 0 var(--tt-s-6);
}

.ab-step__where[b-coogv0qjq9] {
    display: inline-flex;
    align-items: center;
    gap: var(--tt-s-6);
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-medium);
    color: var(--tt-ink-3);
    background: var(--tt-surface-1);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-pill);
    padding: 3px var(--tt-s-10);
    margin-bottom: var(--tt-s-10);
}

.ab-step__where i[b-coogv0qjq9] { width: 13px; height: 13px; }

.ab-step__body > p[b-coogv0qjq9],
.ab-step__body > ol[b-coogv0qjq9],
.ab-step__body > ul[b-coogv0qjq9] {
    font-size: var(--tt-text-sm);
    line-height: var(--tt-leading-normal);
    color: var(--tt-ink-2);
    margin: 0;
}

/* Vertical rhythm between a step's paragraphs and lists */
.ab-step__body > * + *[b-coogv0qjq9] { margin-top: var(--tt-s-10); }

.ab-step__body ol[b-coogv0qjq9],
.ab-step__body ul[b-coogv0qjq9] { padding-left: var(--tt-s-22); }

.ab-step__body li[b-coogv0qjq9] { margin: 0; }
.ab-step__body li + li[b-coogv0qjq9] { margin-top: var(--tt-s-4); }

/* Nested "fill in:" bullet lists */
.ab-step__body li > ul[b-coogv0qjq9],
.ab-step__body li > ol[b-coogv0qjq9] { margin-top: var(--tt-s-4); padding-left: var(--tt-s-18); }

.ab-step__body strong[b-coogv0qjq9] { font-weight: var(--tt-weight-semibold); color: var(--tt-ink-1); }
.ab-step__body em[b-coogv0qjq9] { font-style: italic; color: var(--tt-ink-2); }

/* Inline wear-band chips inside step copy — uses the --tt-status-* ramp */
.ab-band[b-coogv0qjq9] {
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-status-ok);
}
.ab-band--warn[b-coogv0qjq9] { color: var(--tt-status-warn-text); }
.ab-band--crit[b-coogv0qjq9] { color: var(--tt-status-crit); }

/* ── Profile-menu cards ───────────────────────────────── */
.ab-menu[b-coogv0qjq9] {
    display: grid;
    /* minmax(0, 1fr) lets the columns shrink below their content's min width
       (a nowrap table would otherwise pin the column wide and break resizing). */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--tt-s-16);
    align-items: start;
}

.ab-mcard[b-coogv0qjq9] {
    min-width: 0;               /* allow the grid track to shrink around this card */
    background: var(--tt-surface-0);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-12);
    padding: var(--tt-s-20) var(--tt-s-22);
    box-shadow: var(--tt-shadow-sm);
}

.ab-mcard__head[b-coogv0qjq9] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-12);
    margin-bottom: var(--tt-s-14);
}

.ab-mcard__icon[b-coogv0qjq9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--tt-radius-8);
    background: var(--tt-surface-1);
    color: var(--tt-primary);
}

.ab-mcard__icon i[b-coogv0qjq9] { width: 20px; height: 20px; }

.ab-mcard__name[b-coogv0qjq9] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-8);
    font-size: var(--tt-text-md);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-1);
    margin: 0;
}

.ab-mtag[b-coogv0qjq9] {
    font-size: 0.62rem;
    font-weight: var(--tt-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tt-ink-4);
    background: color-mix(in srgb, var(--tt-ink-4) 16%, transparent);
    padding: 2px var(--tt-s-8);
    border-radius: var(--tt-radius-pill);
}

/* Rich card body — verbatim prose, bullets, tier table, and notes */
.ab-mcard__body > p[b-coogv0qjq9],
.ab-mcard__body > ul[b-coogv0qjq9] {
    font-size: var(--tt-text-sm);
    line-height: var(--tt-leading-normal);
    color: var(--tt-ink-2);
    margin: 0;
}

.ab-mcard__body > * + *[b-coogv0qjq9] { margin-top: var(--tt-s-10); }
.ab-mcard__body ul[b-coogv0qjq9] { padding-left: var(--tt-s-22); }
.ab-mcard__body li[b-coogv0qjq9] { margin: 0; }
.ab-mcard__body li + li[b-coogv0qjq9] { margin-top: var(--tt-s-6); }
.ab-mcard__body strong[b-coogv0qjq9] { font-weight: var(--tt-weight-semibold); color: var(--tt-ink-1); }

.ab-mcard__body .ab-note[b-coogv0qjq9] {
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-3);
    border-left: 2px solid var(--tt-line);
    padding-left: var(--tt-s-12);
}

/* Tier table (Account) */
.ab-tablewrap[b-coogv0qjq9] { overflow-x: auto; }

.ab-tiers[b-coogv0qjq9] {
    border-collapse: collapse;
    width: 100%;
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-2);
}

.ab-tiers th[b-coogv0qjq9],
.ab-tiers td[b-coogv0qjq9] {
    text-align: left;
    padding: var(--tt-s-8) var(--tt-s-12);
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
}

/* Keep the tier name and price on one line; let the middle "For" column wrap
   so the table fits a narrow half-width card without forcing a fixed width. */
.ab-tiers th:first-child[b-coogv0qjq9], .ab-tiers td:first-child[b-coogv0qjq9],
.ab-tiers th:last-child[b-coogv0qjq9],  .ab-tiers td:last-child[b-coogv0qjq9] { white-space: nowrap; }

.ab-tiers thead th[b-coogv0qjq9] {
    font-size: var(--tt-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tt-ink-4);
    font-weight: var(--tt-weight-semibold);
}

.ab-tiers tbody tr:last-child td[b-coogv0qjq9] { border-bottom: none; }
.ab-tiers td:last-child[b-coogv0qjq9], .ab-tiers th:last-child[b-coogv0qjq9] { text-align: right; }

/* ── Responsive ───────────────────────────────────────── */
/* The reused .hr-ed-index--tabs is a fixed 3-col grid (Dashboard swaps to a
   separate mobile DOM); stack it here so About stays single-tree + responsive. */
@media (max-width: 800px) {
    /* Trim the reused tl-hero2's fixed desktop sizing for small screens. */
    .ab-hero[b-coogv0qjq9] { min-height: 440px; }
    .ab-hero[b-coogv0qjq9]  .tl-hero2__inner { padding-left: var(--tt-s-20); padding-right: var(--tt-s-20); }
    .ab-hero[b-coogv0qjq9]  .tl-hero__title { font-size: 2rem; }

    [b-coogv0qjq9] .hr-ed-index--tabs { grid-template-columns: 1fr; }
    [b-coogv0qjq9] .hr-ed-col--tab { border-right: none; border-bottom: var(--tt-border-w) solid var(--tt-line); }
    [b-coogv0qjq9] .hr-ed-col--tab:last-child { border-bottom: none; }
    [b-coogv0qjq9] .hr-ed-col__desc { min-height: 0; }

    .ab-menu[b-coogv0qjq9] { grid-template-columns: 1fr; }
    .ab-step[b-coogv0qjq9] {
        grid-template-columns: 40px 1fr;
        gap: var(--tt-s-14);
        padding: var(--tt-s-18);
    }
    .ab-step__num[b-coogv0qjq9] { width: 38px; height: 38px; font-size: var(--tt-text-base); }
}
/* /Pages/Tracks.razor.rz.scp.css */
/* Shell: .tt-page + --flows in app.css (#400). */

/* ── Notes & learnings (#342) ────────────────────────────────────────────────────────────
   The card carries a preview, not the note: a track note runs to paragraphs, and a card is a
   summary. The whole of it is read on Driver prep and written here. */
.tk-note[b-5s9fxb842a] {
    display: flex;
    align-items: flex-start;
    gap: var(--tt-s-8);
}

.tk-note__preview[b-5s9fxb842a] {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--tt-ink-2);

    /* Two lines, then it stops. A note is allowed to be long; the card is not. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tk-note__preview--empty[b-5s9fxb842a] { color: var(--tt-ink-4); }

.tk-note__edit[b-5s9fxb842a] {
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--tt-font-sans);
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-medium);
    color: var(--tt-primary);
    flex-shrink: 0;
}

.tk-note__edit:hover[b-5s9fxb842a] { text-decoration: underline; }

.tk-note__hint[b-5s9fxb842a] {
    margin: 0 0 var(--tt-s-12);
    font-size: var(--tt-text-xs);
    line-height: 1.5;
    color: var(--tt-ink-4);
    text-wrap: pretty;
}

.tk-note__input[b-5s9fxb842a] {
    width: 100%;
    padding: var(--tt-s-10);
    background: var(--tt-surface-0);
    border: var(--tt-border-w) solid var(--tt-line);
    border-radius: var(--tt-radius-8);
    font-family: var(--tt-font-sans);
    font-size: var(--tt-text-sm);
    line-height: 1.6;
    color: var(--tt-ink-1);
    resize: vertical;
}

.tk-note__input:focus[b-5s9fxb842a] {
    outline: none;
    border-color: var(--tt-primary);
    box-shadow: var(--tt-shadow-focus);
}
/* /Pages/Trackside.razor.rz.scp.css */
/* Trackside (#348). Band 1 ported from the design prototype, which carried its values inline —
   every one of them is a --tt-* token here instead. */

/* The prototype's shell — the 1080px column every Perform page shares. See #400 for the app-wide
   rule this anticipates. */
/* Shell: .tt-page in app.css (#400). */

.perf__loading[b-b6o5uud2uo] {
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-4);
}

/* Nothing to stand at. Not an error — a driver between seasons lands here, and so does a new
   user — so it reads as a state of the calendar rather than of the page. */
.perf__none[b-b6o5uud2uo] {
    padding: var(--tt-s-24) var(--tt-s-28);
    background: var(--tt-surface-1);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-8);
    max-width: 640px;
}

.perf__none-title[b-b6o5uud2uo] {
    margin: 0 0 var(--tt-s-8);
    font-size: var(--tt-text-md);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-2);
}

.perf__none-body[b-b6o5uud2uo] {
    margin: 0 0 var(--tt-s-16);
    font-size: var(--tt-text-sm);
    line-height: 1.6;
    color: var(--tt-ink-3);
    text-wrap: pretty;
}

/* ── The band heading ───────────────────────────────────────────────────────────────────────
   A rule under a small caps label, not a panel. The bands are moments in a day rather than
   containers, so they divide the page without boxing it. */
/* Band 2 is TWO panels - the record, and the car it ran in. It uses .tt-panels (app.css):
   equal share above a 390px floor, wrapping to one column rather than squeezing the car
   drawing. That rule was lifted FROM here when #400 generalised it. */

.ts-band[b-b6o5uud2uo] {
    margin: var(--tt-s-28) 0 var(--tt-s-14);
    padding-bottom: var(--tt-s-6);
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-bold);
    letter-spacing: var(--tt-tracking-wide);
    text-transform: uppercase;
    color: var(--tt-ink-2);
}

.ts-band__lede[b-b6o5uud2uo] {
    margin: calc(var(--tt-s-8) * -1) 0 var(--tt-s-14);
    font-size: var(--tt-text-sm);
    line-height: 1.5;
    color: var(--tt-ink-4);
    max-width: 74ch;
    text-wrap: pretty;
}

/* ── The day at a glance ────────────────────────────────────────────────────────────────── */
.ts-totals[b-b6o5uud2uo] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--tt-s-6) var(--tt-s-18);
    margin-bottom: var(--tt-s-10);
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-2);
}

.ts-totals span[b-b6o5uud2uo] { white-space: nowrap; }

.ts-totals b[b-b6o5uud2uo] {
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-1);
}

.ts-totals__num[b-b6o5uud2uo] { font-variant-numeric: tabular-nums; }

.ts-totals__quiet[b-b6o5uud2uo] { color: var(--tt-ink-4); }

/* ── The day strip ──────────────────────────────────────────────────────────────────────────
   Scrolls sideways rather than wrapping: the day is a sequence, and a wrapped second row reads
   as a second day. */
.ts-strip[b-b6o5uud2uo] {
    display: flex;
    gap: var(--tt-s-8);
    overflow-x: auto;
    padding-bottom: var(--tt-s-4);
}

.ts-card[b-b6o5uud2uo] {
    flex: 1 1 150px;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    gap: var(--tt-s-2);
    text-align: left;
    padding: var(--tt-s-10) var(--tt-s-12);
    background: var(--tt-surface-0);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-4);
    font: inherit;
    cursor: pointer;
}

.ts-card:hover[b-b6o5uud2uo] { border-color: var(--tt-ink-4); }

.ts-card:disabled[b-b6o5uud2uo] { cursor: default; }

/* The one being read. Ink border and a shadow lift it out of the strip without colour — the
   strip is a sequence of the same thing, so weight is the only difference that means anything. */
.ts-card.is-selected[b-b6o5uud2uo] {
    border-color: var(--tt-ink-1);
    box-shadow: var(--tt-shadow-sm);
}

.ts-card.is-selected .ts-card__name[b-b6o5uud2uo] {
    font-weight: var(--tt-weight-bold);
    color: var(--tt-ink-1);
}

/* Not yet run: dashed and unfilled, so the day's shape is visible before any of it has happened.
   It is a forecast, and it should not look like a record. */
.ts-card.is-upcoming[b-b6o5uud2uo] {
    background: none;
    border-style: dashed;
    border-color: var(--tt-line);
}

.ts-card.is-upcoming .ts-card__name[b-b6o5uud2uo] { color: var(--tt-ink-4); }

.ts-card--add[b-b6o5uud2uo] {
    flex: 0 0 auto;
    min-width: 104px;
    background: none;
    border-style: dashed;
    border-color: var(--tt-line);
}

.ts-card--add .ts-card__name[b-b6o5uud2uo] { color: var(--tt-ink-3); }

.ts-card__name[b-b6o5uud2uo] {
    font-size: var(--tt-text-sm);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ts-card__meta[b-b6o5uud2uo] {
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-4);
}

.ts-card__best[b-b6o5uud2uo] {
    margin-top: var(--tt-s-2);
    font-size: var(--tt-text-md);
    font-weight: var(--tt-weight-medium);
    color: var(--tt-ink-1);
    font-variant-numeric: tabular-nums;
}

.ts-card__goal[b-b6o5uud2uo] {
    margin-top: var(--tt-s-4);
    font-size: var(--tt-text-xs);
    line-height: 1.35;
    color: var(--tt-ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Noticed, not wrong. A session without a goal is a run that will teach the driver less, which
   is worth flagging and is not an error — so warn ink, never the destructive red. */
.ts-card__goal--none[b-b6o5uud2uo] {
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-status-warn-text);
}

/* ── The day's footer ───────────────────────────────────────────────────────────────────── */
.ts-dayfoot[b-b6o5uud2uo] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--tt-s-8);
    margin-top: var(--tt-s-10);
    padding-top: var(--tt-s-10);
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
}

.ts-dayfoot__note[b-b6o5uud2uo] {
    flex: 1;
    min-width: 220px;
    font-size: var(--tt-text-xs);
    line-height: 1.5;
    color: var(--tt-ink-4);
    text-wrap: pretty;
}

/* The shared button has no size variant, so the footer states its own — the same thing the
   admin and feed rows do. */
.ts-dayfoot__btn[b-b6o5uud2uo] {
    padding: var(--tt-s-6) var(--tt-s-12);
    font-size: var(--tt-text-xs);
}

.ts-confirm[b-b6o5uud2uo] {
    margin: 0;
    font-size: var(--tt-text-sm);
    line-height: 1.6;
    color: var(--tt-ink-2);
    text-wrap: pretty;
}

/* ── Band 2 ─────────────────────────────────────────────────────────────────────────────────
   One line and one button. Everything else about capture is in the drawer, because the driver is
   standing at the car and the page behind it is not what they are reading. */
.ts-capture[b-b6o5uud2uo] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-12);
    padding: var(--tt-s-12) var(--tt-s-14);
    background: var(--tt-surface-1);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-4);
}

.ts-capture__what[b-b6o5uud2uo] {
    flex: 1;
    min-width: 0;
    font-size: var(--tt-text-sm);
    line-height: 1.5;
    color: var(--tt-ink-2);
    text-wrap: pretty;
}

/* ── The record panel ───────────────────────────────────────────────────────────────────── */
.ts-hero[b-b6o5uud2uo] {
    display: flex;
    align-items: flex-end;
    gap: var(--tt-s-32);
    padding-bottom: var(--tt-s-12);
    margin-bottom: var(--tt-s-14);
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
}

.ts-hero__fig[b-b6o5uud2uo] {
    display: flex;
    flex-direction: column;
    gap: var(--tt-s-2);
}

.ts-hero__lbl[b-b6o5uud2uo] {
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    letter-spacing: var(--tt-tracking-wide);
    text-transform: uppercase;
    color: var(--tt-ink-4);
}

/* Light weight at a large size: the figure carries by scale, not by boldness. */
.ts-hero__val[b-b6o5uud2uo] {
    font-size: var(--tt-text-3xl);
    font-weight: var(--tt-weight-light);
    line-height: 1.05;
    color: var(--tt-ink-1);
    font-variant-numeric: tabular-nums;
}

/* 19px, the prototype's `heroLaps`. --tt-text-lg is 20px; the scale has nothing at 19. */
.ts-hero__val--sm[b-b6o5uud2uo] {
    font-size: 19px;
    font-weight: var(--tt-weight-book);
    line-height: 1.3;
}

.ts-hero__gap[b-b6o5uud2uo] { flex: 1; }

/* ── Observations ───────────────────────────────────────────────────────────────────────────
   At most three, already suppressed by the engine. No box is ever shown empty or greyed — an
   observation the data cannot support is absent, not dimmed. */
.ts-obs[b-b6o5uud2uo] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tt-s-6);
    margin-top: var(--tt-s-12);
}

.ts-obs__item[b-b6o5uud2uo] {
    padding: var(--tt-s-2) var(--tt-s-8);
    background: var(--tt-surface-1);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-2);
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-3);
}

/* The one line on the panel connecting execution to pace, so it is given room rather than tucked
   under the ticks as a caption. */
.ts-claim[b-b6o5uud2uo] {
    margin: var(--tt-s-10) 0 0;
    font-size: var(--tt-text-sm);
    line-height: 1.5;
    color: var(--tt-ink-2);
    text-wrap: pretty;
}

/* ── Properties ─────────────────────────────────────────────────────────────────────────────
   No provenance marks and no gutter bars: "read"/"not read" described an act where every
   other mark described provenance, and a gutter bar could only say "something differs, look
   elsewhere". Only "of N planned" survived, and it moved into the value. */
/* The column gap is load-bearing, not decoration: without it the first column's VALUE sits flush
   against the second column's LABEL, and "Start time — Temperature —" reads as one broken row
   rather than two pairs. */
.ts-props[b-b6o5uud2uo] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--tt-s-32);
    margin-top: var(--tt-s-16);
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
}

.ts-prop[b-b6o5uud2uo] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--tt-s-10);
    align-items: baseline;
    padding: var(--tt-s-6) var(--tt-s-2);
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
}

.ts-prop--wide[b-b6o5uud2uo] { grid-column: 1 / -1; }

.ts-prop > span:first-child[b-b6o5uud2uo] {
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-4);
}

.ts-prop > span:last-child[b-b6o5uud2uo],
.ts-prop a[b-b6o5uud2uo] {
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-1);
    text-align: right;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ts-prop a[b-b6o5uud2uo] { color: var(--tt-cta); text-decoration: none; }
.ts-prop a:hover[b-b6o5uud2uo] { text-decoration: underline; }

.ts-debrief[b-b6o5uud2uo] {
    margin: var(--tt-s-14) 0 0;
    padding: var(--tt-s-10) var(--tt-s-12);
    background: var(--tt-surface-1);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-4);
    font-size: var(--tt-text-sm);
    line-height: 1.55;
    color: var(--tt-ink-2);
    white-space: pre-wrap;
}

@media (max-width: 800px) {
    .perf__none[b-b6o5uud2uo] { padding: var(--tt-s-16); }

    /* The cards stop growing on a phone so the strip stays scrollable rather than squeezing
       four unreadable tiles into the viewport. */
    .ts-card[b-b6o5uud2uo] { flex: 0 0 150px; }
}
/* /Pages/TripDetail.razor.rz.scp.css */
/* ============================================================
 * Trip Detail (#102) — trip header + stops.
 * Attendees, travel logistics and per-member coarse plans arrive
 * in later increments of this issue.
 * ============================================================ */

/* Shell: .tt-page in app.css (#400). */

/* Overview panel (the stat strip) — space it off the Stops section below. */
.trip__overview[b-wdkhbtva97] {
    margin-bottom: var(--tt-s-24);
}





/* Delete-trip action — danger-ghost, right-aligned in the header (#137) */
.trip__delete[b-wdkhbtva97] {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--tt-s-6);
    height: 32px;
    padding: 0 var(--tt-s-12);
    font-family: inherit;
    font-size: var(--tt-text-sm);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-cta);
    background: var(--tt-surface-0);
    border: var(--tt-border-w) solid color-mix(in srgb, var(--tt-cta) 40%, var(--tt-surface-0));
    border-radius: var(--tt-radius-8);
    cursor: pointer;
}

.trip__delete:hover[b-wdkhbtva97] {
    background: color-mix(in srgb, var(--tt-cta) 8%, var(--tt-surface-0));
}

/* Stat strip retired → <StatStrip>/<StatTile> component. */

.trip__section[b-wdkhbtva97] {
    margin: 0 0 var(--tt-s-12);
    font-size: var(--tt-text-lg);
    font-weight: var(--tt-weight-semibold);
}

/* Stops frame — flexible (content) width like the /prepare/events rail: the frame sizes to its
   row of stop cards rather than stretching full width, and the wrapper scrolls horizontally when
   a many-stop trip overflows. Only the rail's -13px lift is dropped (no rail padding here). */
.trip__stops-frame[b-wdkhbtva97] {
    overflow-x: auto;
}

.trip__stops-frame[b-wdkhbtva97]  .trip-frame {
    margin-top: 0;
}

/* Panels use .tt-panels (app.css) - see #400. */

/* ── Stops (add / remove) ────────────────────────────────────── */
.trip__stop[b-wdkhbtva97] {
    position: relative;
    display: inline-flex;
}

.trip__stop-remove[b-wdkhbtva97] {
    position: absolute;
    top: var(--tt-s-6);
    right: var(--tt-s-6);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    color: var(--tt-surface-0);
    background: color-mix(in srgb, var(--tt-ink-1) 62%, transparent);
    border: none;
    border-radius: var(--tt-radius-pill);
    cursor: pointer;
}

.trip__stop-remove:hover[b-wdkhbtva97] {
    background: var(--tt-cta);
}

.trip__addstop[b-wdkhbtva97] {
    position: relative;
    margin-top: var(--tt-s-12);
}

.trip__addstop-date[b-wdkhbtva97] {
    display: inline-block;
    min-width: 46px;
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-4);
}

.trip__attendees[b-wdkhbtva97] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tt-s-8);
    margin-top: var(--tt-s-14);
}

/* ── Per-member coarse plans ─────────────────────────────────── */
.plan-list[b-wdkhbtva97] {
    display: flex;
    flex-direction: column;
}

.plan-row[b-wdkhbtva97] {
    padding: var(--tt-s-12) 0;
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
}

.plan-row:first-child[b-wdkhbtva97] {
    border-top: none;
}

/* avatar sits left, vertically centered against the name + pills column */
.plan-row__top[b-wdkhbtva97] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-10);
}

.plan-row__main[b-wdkhbtva97] {
    flex: 1;
    min-width: 0;
}

.plan-row__head[b-wdkhbtva97] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-10);
}

.plan-avatar[b-wdkhbtva97] {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--tt-primary-text);
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
}

.plan-avatar--you[b-wdkhbtva97] {
    background: var(--tt-avatar-bg);
}

.plan-row__name[b-wdkhbtva97] {
    font-size: var(--tt-text-sm);
    font-weight: var(--tt-weight-semibold);
}

.plan-row__you[b-wdkhbtva97] {
    color: var(--tt-ink-4);
    font-weight: var(--tt-weight-regular);
}

.plan-row__edit[b-wdkhbtva97] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: none;
    border: none;
    color: var(--tt-link);
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    cursor: pointer;
}

.plan-desig[b-wdkhbtva97] {
    flex: 0 0 auto;
    margin-left: auto;
    padding: var(--tt-s-2) var(--tt-s-8);
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-3);
    background: var(--tt-surface-1);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-pill);
    white-space: nowrap;
}

.plan-none[b-wdkhbtva97] {
    display: inline-block;
    margin-top: var(--tt-s-4);
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-4);
}

.plan-chips[b-wdkhbtva97] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tt-s-6);
    margin-top: var(--tt-s-6);
}

.plan-chip[b-wdkhbtva97] {
    display: inline-flex;
    align-items: center;
    gap: var(--tt-s-4);
    padding: var(--tt-s-2) var(--tt-s-8);
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-3);
    background: var(--tt-surface-1);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-pill);
    white-space: nowrap;
}

.plan-editor[b-wdkhbtva97] {
    display: flex;
    flex-direction: column;
    gap: var(--tt-s-10);
    margin-top: var(--tt-s-10);
    /* align under the name column (past the avatar) */
    margin-left: calc(30px + var(--tt-s-10));
    padding: var(--tt-s-12);
    background: var(--tt-surface-1);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-8);
}

.plan-editor__row[b-wdkhbtva97] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tt-s-6);
}

.plan-editor__lbl[b-wdkhbtva97] {
    width: 56px;
    flex-shrink: 0;
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tt-tracking-wide);
    color: var(--tt-ink-4);
}

.plan-day[b-wdkhbtva97],
.plan-flag[b-wdkhbtva97] {
    padding: var(--tt-s-4) var(--tt-s-8);
    font-family: inherit;
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-3);
    background: var(--tt-surface-0);
    border: var(--tt-border-w) solid var(--tt-line);
    cursor: pointer;
    white-space: nowrap;
}

.plan-day[b-wdkhbtva97] {
    border-radius: var(--tt-radius-4);
}

/* Travel-buffer days (before the first / after the last event) read as secondary until picked (#173). */
.plan-day--buffer:not(.is-on)[b-wdkhbtva97] {
    color: var(--tt-ink-4);
    border-style: dashed;
}

.plan-flag[b-wdkhbtva97] {
    display: inline-flex;
    align-items: center;
    gap: var(--tt-s-4);
    border-radius: var(--tt-radius-pill);
}

.plan-day.is-on[b-wdkhbtva97],
.plan-flag.is-on[b-wdkhbtva97] {
    background: var(--tt-ink-1);
    color: var(--tt-surface-0);
    border-color: var(--tt-ink-1);
}

/* ── Travel logistics ────────────────────────────────────────── */
.tv[b-wdkhbtva97] {
    display: flex;
    flex-direction: column;
    margin-top: var(--tt-s-4);
}

.tv-row[b-wdkhbtva97] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-12);
    padding: var(--tt-s-10) 0;
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
}

.tv-row__icon[b-wdkhbtva97] {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--tt-radius-8);
    background: var(--tt-surface-1);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    color: var(--tt-ink-3);
}

.tv-row__body[b-wdkhbtva97] {
    flex: 1 1 auto;
    min-width: 0;
}

.tv-row__title[b-wdkhbtva97] {
    font-size: var(--tt-text-sm);
    font-weight: var(--tt-weight-semibold);
}

.tv-row__detail[b-wdkhbtva97] {
    margin-top: 1px;
    padding: 0;
    background: none;
    border: none;
    font-family: inherit;
    font-size: var(--tt-text-xs);
    color: var(--tt-link);
    cursor: text;
}

/* Read-only travel detail (a friend viewing the shared list) — plain text, no affordance. */
.tv-row__detail--ro[b-wdkhbtva97] {
    display: inline-block;
    color: var(--tt-ink-3);
    cursor: default;
}

/* Personal-travel owner tag on a private entry (#126). */
.tv-row__owner[b-wdkhbtva97] {
    margin-left: var(--tt-s-6);
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-accent);
}

/* Friend-viewer notice above a trip you don't own (#126). */
.trip__viewing[b-wdkhbtva97] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-8);
    margin-bottom: var(--tt-s-16);
    padding: var(--tt-s-10) var(--tt-s-14);
    background: var(--tt-accent-soft);
    border: var(--tt-border-w) solid var(--tt-accent);
    border-radius: var(--tt-radius-8);
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-1);
}

.trip__viewing svg[b-wdkhbtva97] {
    flex: 0 0 auto;
    color: var(--tt-accent);
}

.trip__viewing-link[b-wdkhbtva97] {
    margin-left: auto;
    flex: 0 0 auto;
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-accent);
    text-decoration: none;
}

.trip__viewing-link:hover[b-wdkhbtva97] {
    text-decoration: underline;
}

.tv-row__detail-input[b-wdkhbtva97] {
    margin-top: 1px;
    width: 100%;
    max-width: 320px;
    padding: var(--tt-s-2) var(--tt-s-6);
    font-family: inherit;
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-1);
    background: var(--tt-surface-0);
    border: var(--tt-border-w) solid var(--tt-line);
    border-radius: var(--tt-radius-4);
    outline: none;
}

.tv-status[b-wdkhbtva97] {
    flex-shrink: 0;
    padding: var(--tt-s-2) var(--tt-s-8);
    font-family: inherit;
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    border: var(--tt-border-w) solid transparent;
    border-radius: var(--tt-radius-pill);
    cursor: pointer;
}

.tv-status--planned[b-wdkhbtva97] { background: var(--tt-surface-2); color: var(--tt-ink-2); }
.tv-status--pending[b-wdkhbtva97] { background: var(--tt-status-warn-surface); color: var(--tt-status-warn-text); }
.tv-status--booked[b-wdkhbtva97]  { background: color-mix(in srgb, var(--tt-status-ok) 14%, var(--tt-surface-0)); color: var(--tt-status-ok); }

.tv-row__remove[b-wdkhbtva97] {
    flex-shrink: 0;
    display: inline-flex;
    padding: var(--tt-s-4);
    background: none;
    border: none;
    color: var(--tt-ink-4);
    cursor: pointer;
}

.tv-add[b-wdkhbtva97] {
    position: relative;
    margin-top: var(--tt-s-12);
}

.tv-add__btn[b-wdkhbtva97] {
    padding: var(--tt-s-6) var(--tt-s-12);
    font-family: inherit;
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-2);
    background: var(--tt-surface-0);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-4);
    cursor: pointer;
}

/* the Travel panel hosts a popover, so it must not clip it */
.tt-panels[b-wdkhbtva97]  .trip__pop-panel {
    overflow: visible;
}

.tv-menu[b-wdkhbtva97] {
    position: absolute;
    z-index: 10;
    bottom: calc(100% + var(--tt-s-4));
    left: 0;
    min-width: 220px;
    padding: var(--tt-s-6);
    background: var(--tt-surface-0);
    border: var(--tt-border-w) solid var(--tt-line);
    border-radius: var(--tt-radius-8);
    box-shadow: var(--tt-shadow-lg);
}

.tv-menu__grp[b-wdkhbtva97] {
    padding: var(--tt-s-8) var(--tt-s-10) var(--tt-s-4);
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tt-tracking-wide);
    color: var(--tt-ink-4);
}

.tv-menu__opt[b-wdkhbtva97] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-8);
    width: 100%;
    padding: var(--tt-s-6) var(--tt-s-10);
    font-family: inherit;
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-1);
    text-align: left;
    background: none;
    border: none;
    border-radius: var(--tt-radius-4);
    cursor: pointer;
}

.tv-menu__opt:hover[b-wdkhbtva97] {
    background: var(--tt-surface-1);
}

.tv-menu__icon[b-wdkhbtva97] {
    display: inline-flex;
    color: var(--tt-ink-3);
}

.trip__muted[b-wdkhbtva97] {
    color: var(--tt-ink-4);
    font-size: var(--tt-text-sm);
}

/* Small "items" unit on the Travel stat tile (#134) */
/* "chronological" caption next to the Stops heading (#134) */
.trip__section-hint[b-wdkhbtva97] {
    margin-left: var(--tt-s-8);
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-regular);
    text-transform: none;
    letter-spacing: normal;
    color: var(--tt-ink-4);
}

.trip__footer[b-wdkhbtva97] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--tt-s-10);
    margin-top: var(--tt-s-22);
    padding-top: var(--tt-s-18);
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
}

.trip__footer-note[b-wdkhbtva97] {
    display: inline-flex;
    align-items: center;
    gap: var(--tt-s-6);
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-4);
}

.trip__footer-link[b-wdkhbtva97] {
    margin-left: auto;
    font-size: var(--tt-text-sm);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-link);
    text-decoration: none;
}
/* /Pages/Trips.razor.rz.scp.css */
/* ============================================================
 * Trips — read-only list of the signed-in user's trips.
 * Rows link to the per-trip detail page (/plan/trips/{id}).
 * ============================================================ */

/* Shell: .tt-page in app.css (#400). */


.trips__muted[b-ic700d6atc] {
    margin: 0;
    color: var(--tt-ink-3);
    font-size: var(--tt-text-sm);
}

/* ── Empty state ─────────────────────────────────────────────── */
.trips__empty[b-ic700d6atc] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--tt-s-8);
    padding: var(--tt-s-32) var(--tt-s-24);
    background: var(--tt-surface-1);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-12);
}

.trips__empty-title[b-ic700d6atc] {
    font-size: var(--tt-text-lg);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-1);
}

.trips__empty-note[b-ic700d6atc] {
    margin: 0 0 var(--tt-s-8);
    color: var(--tt-ink-3);
    font-size: var(--tt-text-sm);
}

/* ── List of trips ───────────────────────────────────────────── */
.trips__list[b-ic700d6atc] {
    display: flex;
    flex-direction: column;
    gap: var(--tt-s-10);
}

/* A <button> styled as a full-width, clickable card row. */
.trip-row[b-ic700d6atc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tt-s-16);
    width: 100%;
    text-align: left;
    padding: var(--tt-s-16) var(--tt-s-18);
    font-family: var(--tt-font-sans);
    background: var(--tt-surface-1);
    border: var(--tt-border-w) solid var(--tt-line-soft);
    border-radius: var(--tt-radius-12);
    cursor: pointer;
    transition: background 0.12s ease, box-shadow 0.12s ease;
}

.trip-row:hover[b-ic700d6atc] {
    background: var(--tt-surface-2);
    box-shadow: var(--tt-shadow-sm);
}

.trip-row__main[b-ic700d6atc] {
    display: flex;
    flex-direction: column;
    gap: var(--tt-s-4);
    min-width: 0;
}

/* Name + Organizer badge share a row. */
.trip-row__head[b-ic700d6atc] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-8);
    min-width: 0;
}

.trip-row__name[b-ic700d6atc] {
    font-size: var(--tt-text-md);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Track(s) being visited — slightly stronger than the meta line below it. */
.trip-row__tracks[b-ic700d6atc] {
    display: flex;
    align-items: center;
    gap: var(--tt-s-6);
    min-width: 0;
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-2);
}

.trip-row__tracks-icon[b-ic700d6atc] { flex-shrink: 0; color: var(--tt-ink-4); }

.trip-row__tracks-text[b-ic700d6atc] {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trip-row__meta[b-ic700d6atc] {
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-3);
}

.trip-row__chevron[b-ic700d6atc] {
    flex-shrink: 0;
    color: var(--tt-ink-3);
}