/* T136-D: the Blazor-template head of this file used Helvetica/Arial, a #0071c1 link blue, a #1b6ec2 `.btn-primary`
   and a white/blue focus ring — none of them tokens, none of them following the light skin. The page face is the DS
   face (Inter, self-hosted by Telemetry.SharedComponents); `.btn`/`.btn-primary` now come from the DS
   Bootstrap-name layer in ghostai-components.css. */
html, body {
    font-family: var(--ghostai-font-sans);
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: var(--tds-text-link);
}

.btn:focus-visible, .form-control:focus, .form-check-input:focus {
    box-shadow: var(--ghostai-shadow-focus);
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--ghostai-color-success);
}

.invalid {
    outline: 1px solid var(--ghostai-color-danger);
}

.validation-message {
    color: var(--ghostai-color-danger);
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}

.card .table {
    table-layout: fixed;
    width: 100%;
}

.card .table th,
.card .table td {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ============================================================
   GhostAI tester-flow page styles (Epic #871)
   Shared by Events, EventDetail and ClientDownloads pages.
   Tokens only — GhostAI custom properties are emitted on :root.
   ============================================================ */

.events-page,
.event-detail-page,
.client-downloads-page {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-6);
}

/* Buttons ---------------------------------------------------- */
.events-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 var(--ghostai-space-4);
    border-radius: var(--ghostai-radius-md);
    border: 1px solid transparent;
    font-weight: 600;
    font-size: var(--ghostai-type-small);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, filter 0.15s ease;
}

.events-btn--primary {
    background: var(--ghostai-color-primary);
    color: #fff;
}

.events-btn--primary:hover:not(:disabled) {
    filter: brightness(1.08);
}

.events-btn--ghost {
    background: transparent;
    color: var(--ghostai-color-text-secondary);
    border-color: var(--ghostai-color-border);
}

.events-btn--ghost:hover {
    border-color: var(--ghostai-color-border-strong);
    color: var(--ghostai-color-text-primary);
}

.events-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.events-btn:focus-visible {
    outline: 2px solid var(--ghostai-color-accent);
    outline-offset: 2px;
}

/* Toolbars --------------------------------------------------- */
.events-toolbar,
.event-detail-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--ghostai-space-3);
    margin-bottom: var(--ghostai-space-5);
}

.events-toolbar__field,
.event-detail-toolbar__field {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-1);
    flex: 1 1 260px;
    min-width: 0;
}

.events-toolbar__field label,
.event-detail-toolbar__field label {
    font-size: var(--ghostai-type-caption);
    color: var(--ghostai-color-text-muted);
}

.events-toolbar__input,
.event-detail-toolbar__input {
    height: 40px;
    padding: 0 var(--ghostai-space-3);
    background: var(--ghostai-color-surface-2);
    color: var(--ghostai-color-text-primary);
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-md);
}

.events-toolbar__input:focus-visible,
.event-detail-toolbar__input:focus-visible {
    outline: 2px solid var(--ghostai-color-accent);
    outline-offset: 2px;
}

.events-toolbar__actions {
    display: flex;
    gap: var(--ghostai-space-2);
    flex-wrap: wrap;
}

/* Event list grid + cards ------------------------------------ */
.events-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: var(--ghostai-space-4);
}

.event-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ghostai-space-2);
    margin-bottom: var(--ghostai-space-3);
}

.event-card__meta .event-name {
    font-weight: 600;
    color: var(--ghostai-color-text-primary);
}

.event-card__tag {
    font-size: var(--ghostai-type-caption);
    padding: 2px var(--ghostai-space-2);
    border-radius: var(--ghostai-radius-pill);
    background: var(--ghostai-color-surface-2);
    color: var(--ghostai-color-text-secondary);
    border: 1px solid var(--ghostai-color-border);
}

.event-card__facts,
.event-detail-facts {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-1);
    font-size: var(--ghostai-type-small);
    color: var(--ghostai-color-text-secondary);
}

.event-card__facts > div,
.event-detail-facts > div {
    display: flex;
    gap: var(--ghostai-space-2);
}

.event-detail-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: var(--ghostai-space-2) var(--ghostai-space-5);
}

.event-card__facts dt,
.event-detail-facts dt {
    color: var(--ghostai-color-text-muted);
    margin: 0;
    min-width: 0;
}

.event-card__facts dd,
.event-detail-facts dd {
    margin: 0;
    color: var(--ghostai-color-text-primary);
}

/* Client downloads ------------------------------------------- */
.downloads-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: var(--ghostai-space-4);
}

.asset-meta {
    margin: 0 0 var(--ghostai-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-1);
    font-size: var(--ghostai-type-small);
    color: var(--ghostai-color-text-secondary);
}

.asset-meta > div {
    display: flex;
    gap: var(--ghostai-space-2);
    justify-content: space-between;
}

.asset-meta dt {
    color: var(--ghostai-color-text-muted);
    margin: 0;
}

.asset-meta dd {
    margin: 0;
    text-align: right;
    overflow-wrap: anywhere;
}

.asset-sha256,
.asset-filename {
    font-family: var(--ghostai-font-technical);
    font-size: var(--ghostai-type-caption);
}

/* Channel badge (#887): preprod = amber, prod = green, unknown/legacy = neutral. */
.channel-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    margin-bottom: 1rem;
    border-radius: 999px;
    font-size: var(--ghostai-type-caption);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
}

.channel-badge__dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: currentColor;
}

.channel-badge--preprod {
    color: #b45309;
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.45);
}

.channel-badge--prod {
    color: #15803d;
    background: rgba(34, 197, 94, 0.14);
    border-color: rgba(34, 197, 94, 0.45);
}

.channel-badge--unknown {
    color: var(--ghostai-color-text-muted);
    background: rgba(148, 163, 184, 0.14);
    border-color: rgba(148, 163, 184, 0.4);
}

/* SHA-256 copy button (#887). */
.sha-copy-btn {
    cursor: pointer;
    margin-left: 0.5rem;
    border: 1px solid var(--ghostai-color-border, rgba(148, 163, 184, 0.4));
    background: transparent;
    color: inherit;
    border-radius: 0.375rem;
    padding: 0.1rem 0.5rem;
    font-size: var(--ghostai-type-caption);
    line-height: 1.4;
    vertical-align: middle;
}

.sha-copy-btn:hover {
    background: rgba(148, 163, 184, 0.14);
}

/* Install instructions (#887). */
.install-instructions {
    margin-top: 1.5rem;
    display: grid;
    gap: 0.75rem;
}

.install-instructions__platform > summary {
    cursor: pointer;
    font-weight: 600;
}

.install-instructions__platform ol {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
    display: grid;
    gap: 0.35rem;
}

.release-notes {
    margin-top: 1rem;
}

.downloads-footer {
    font-size: var(--ghostai-type-caption);
    color: var(--ghostai-color-text-muted);
}

.downloads-footer .maui-source-sha,
.downloads-footer .repo-sha,
.downloads-footer .artifact-version-footer {
    font-family: var(--ghostai-font-technical);
}

@media (max-width: 480px) {
    .events-toolbar__actions {
        width: 100%;
    }

    .events-btn {
        flex: 1 1 auto;
    }
}

/* ---- Training-session rows (shared by Dashboard + My Sessions) ---- */
.ghostai-session-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: var(--ghostai-space-4, 1rem);
    padding: var(--ghostai-space-4, 1rem);
    border: 1px solid var(--ghostai-color-border, #24324d);
    border-radius: var(--ghostai-radius-md, 8px);
    background: var(--ghostai-color-surface, #0f172a);
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 120ms ease, background-color 120ms ease;
}

.ghostai-session-row:hover {
    border-color: var(--ghostai-color-border-strong, #38507d);
    background: var(--ghostai-color-surface-2, #131f38);
}

.ghostai-session-row:focus-visible {
    outline: 2px solid var(--ghostai-color-accent, #38bdf8);
    outline-offset: 2px;
}

.ghostai-session-row__body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.ghostai-session-row__title {
    font-weight: 600;
    color: var(--ghostai-color-text-primary, #f8fafc);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* T136-D — the dashboard's session rows share their line with a status badge; a short title such as "Jazda
   swobodna" was cut to "Jazda swo…" with no way to read the rest. The title wraps there instead. */
.ghostai-dashboard-sessions__item .ghostai-session-row__title {
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* W501 — the last session's focus: label over value, one column at 390px and more when there is room. */
.ghostai-primary-focus-card__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--ghostai-space-2, 0.5rem) var(--ghostai-space-4, 1rem);
    margin: 0 0 var(--ghostai-space-3, 0.75rem);
}

.ghostai-primary-focus-card__facts > div {
    min-width: 0;
}

.ghostai-primary-focus-card__facts dt {
    font-size: 0.75rem;
    color: var(--ghostai-color-text-muted, #94a3b8);
}

.ghostai-primary-focus-card__facts dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* W501 — what the dashboard does not read yet, said once and below the cards rather than as cards. */
.ghostai-dashboard__note {
    margin: var(--ghostai-space-4, 1rem) 0 0;
    font-size: 0.85rem;
    color: var(--ghostai-color-text-muted, #94a3b8);
}

.ghostai-session-row__meta {
    font-size: 0.85rem;
    color: var(--ghostai-color-text-muted, #94a3b8);
    font-variant-numeric: tabular-nums;
}

/* #2444 — what the session was measured against, under the meta line. Muted like the meta beside it: it is
   context for the row rather than its title. */
.ghostai-session-row__target {
    display: block;
    font-size: 0.8rem;
    color: var(--ghostai-color-text-secondary, #cbd5e1);
}

.ghostai-session-row__chevron {
    color: var(--ghostai-color-text-muted, #94a3b8);
    transition: transform 120ms ease, color 120ms ease;
}

.ghostai-session-row:hover .ghostai-session-row__chevron {
    transform: translateX(2px);
    color: var(--ghostai-color-accent, #38bdf8);
}

.ghostai-sessions__item {
    display: flex;
    flex-direction: column;
}

/* ---- T136-D — My Sessions as the approved mockup draws it (handoff 03 §A, pages/MySessions.dc.html "Lista") ----
   One dark rounded card per session: the four columns share the card's full width and wrap one under another on a
   narrow screen (flex-basis, not breakpoints), the chevron sits at the card's end, and the whole card is the link.
   The card is translucent over the brand backdrop — the card's own ground reads --ghostai-backdrop-card-surface, which
   exists only while a backdrop is drawn, and falls back to the opaque surface otherwise. Scoped to .ghostai-session-card
   and --compact so the Dashboard's rows, which share .ghostai-session-row, keep their own layout. */
.ghostai-session-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    border: 1px solid var(--ghostai-color-border, #24324d);
    border-radius: 12px;
    background: var(--ghostai-backdrop-card-surface, var(--ghostai-color-surface, #0f172a));
    min-width: 0;
    transition: border-color 120ms ease, background-color 120ms ease;
}

.ghostai-session-card:hover,
.ghostai-session-card:focus-within {
    border-color: var(--ghostai-color-border-strong, #38507d);
    background: var(--ghostai-backdrop-card-surface-2, var(--ghostai-color-surface-2, #131f38));
}

/* The link fills the card and adds no ground of its own — including under the backdrop, whose shared rule would
   otherwise stack a second translucent layer on the card's one. */
.ghostai-session-card > .ghostai-session-row,
.ghostai-app-shell--backdrop .ghostai-app-shell__main .ghostai-session-card > .ghostai-session-row,
.ghostai-app-shell--backdrop .ghostai-app-shell__main .ghostai-session-card > .ghostai-session-row:hover {
    grid-column: 1 / -1;
    grid-row: 1;
    border: 0;
    border-radius: 12px;
    background: transparent;
}

.ghostai-session-card > .ghostai-session-row:focus-visible {
    outline-offset: -2px;
}

/* #2277 T17 — the row the driver came back from keeps a left edge as well as its named marker. */
.ghostai-session-card.ghostai-sessions__item--resumed,
.ghostai-session-card.ghostai-sessions__item--resumed:hover,
.ghostai-session-card.ghostai-sessions__item--resumed:focus-within {
    border-left: 3px solid var(--ghostai-color-primary, #7c5cff);
}

.ghostai-session-row--compact {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--ghostai-space-3, 0.75rem);
    padding: 14px 18px;
}

/* Every card keeps room for the overflow button just before the chevron — whether or not it has one — so the chevron
   stays the card's last mark and the four columns line up from one card to the next. */
.ghostai-session-card > .ghostai-session-row--compact .ghostai-session-row__chevron {
    margin-left: 2.5rem;
}

.ghostai-session-row__groups {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 28px;
    min-width: 0;
}

.ghostai-session-row__group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ghostai-session-row__group--session { flex: 3 1 280px; }
.ghostai-session-row__group--target { flex: 2 1 240px; }
.ghostai-session-row__group--best { flex: 0 1 150px; }
.ghostai-session-row__group--compare { flex: 0 1 230px; }

.ghostai-session-row__headline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ghostai-space-2, 0.5rem);
    min-width: 0;
}

.ghostai-session-row--compact .ghostai-session-row__title {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 1rem;
    font-weight: 700;
}

.ghostai-session-row--compact .ghostai-session-row__meta {
    font-size: 0.8125rem;
    color: var(--ghostai-color-text-secondary, #cbd5e1);
}

/* The uppercase eyebrow above each column: CEL, NAJLEPSZE OKRĄŻENIE, PORÓWNANIE. */
.ghostai-session-row__label {
    font-size: 0.625rem;
    font-weight: 750;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ghostai-color-text-muted, #94a3b8);
}

/* T136-D — up to two lines, then the ellipsis; the whole target stays in the row's title tooltip. One line cut
   every "Series — session · My saved reference…" down to "…My saved refer…". */
.ghostai-session-row--compact .ghostai-session-row__target {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 0.8125rem;
    color: var(--ghostai-color-text-secondary, #cbd5e1);
}

.ghostai-session-row__value--muted {
    color: var(--ghostai-color-text-muted, #94a3b8);
}

.ghostai-session-row__best {
    font-family: var(--ghostai-font-numeric);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    color: var(--ghostai-color-text-primary, #f8fafc);
}

.ghostai-session-row__best[data-best-state="none"] {
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ghostai-color-text-muted, #94a3b8);
}

/* #2277 T17 — "68 okr. · 61 pełnych", or the sentence of a count that is not settled. */
.ghostai-session-row__laps {
    display: block;
    font-size: 0.75rem;
    color: var(--ghostai-color-text-muted, #94a3b8);
    font-variant-numeric: tabular-nums;
}

/* "↩ Ostatnio otwierana" — a pill in the primary colour, which no status badge uses. */
.ghostai-session-row__resumed {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid var(--ghostai-color-primary, #7c5cff);
    border-radius: 999px;
    background: color-mix(in srgb, var(--ghostai-color-primary, #7c5cff) 16%, transparent);
    color: var(--ghostai-color-text-primary, #f8fafc);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}

.ghostai-session-row__compare {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px 8px;
    align-items: baseline;
    justify-items: start;
}

.ghostai-session-row__compare-line {
    display: contents;
}

.ghostai-session-row__vs {
    font-size: 0.75rem;
    color: var(--ghostai-color-text-muted, #94a3b8);
    white-space: nowrap;
}

.ghostai-session-row__delta {
    font-family: var(--ghostai-font-numeric);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    min-width: 0;
}

/* The one sign rule of every loss surface: + is time lost (danger), − is time gained (success). */
.ghostai-session-row__delta--loss { color: var(--ghostai-color-danger, #ef4444); }
.ghostai-session-row__delta--gain { color: var(--ghostai-color-success, #22c55e); }
.ghostai-session-row__delta--level { color: var(--ghostai-color-text-secondary, #cbd5e1); }

.ghostai-session-row__delta--none {
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ghostai-color-text-muted, #94a3b8);
    cursor: help;
}

.ghostai-session-row__new-best {
    font-family: var(--ghostai-font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ghostai-color-success, #22c55e);
}

.ghostai-session-row--compact .ghostai-session-row__chevron {
    font-size: 1.125rem;
}

/* The row's overflow ("⋯"): a sibling of the row link at the card's end, holding what the mockup does not put on a
   row — the compare deep link and the Driver DNA cohort readings. Its popover keeps an opaque ground (06-brand.md:
   popups are never translucent). */
.ghostai-session-card__more {
    position: absolute;
    top: 50%;
    right: calc(18px + 1.15rem + 0.5rem);
    transform: translateY(-50%);
    z-index: 2;
}

.ghostai-session-card__more[open] {
    z-index: 5;
}

.ghostai-session-card__more-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid transparent;
    border-radius: var(--ghostai-radius-sm, 6px);
    color: var(--ghostai-color-text-muted, #94a3b8);
    cursor: pointer;
    list-style: none;
}

.ghostai-session-card__more-toggle::-webkit-details-marker {
    display: none;
}

.ghostai-session-card__more-toggle:hover,
.ghostai-session-card__more[open] > .ghostai-session-card__more-toggle {
    border-color: var(--ghostai-color-border, #24324d);
    color: var(--ghostai-color-text-primary, #f8fafc);
    background: var(--ghostai-color-surface-2, #131f38);
}

.ghostai-session-card__more-toggle:focus-visible {
    outline: 2px solid var(--ghostai-color-accent, #38bdf8);
    outline-offset: 2px;
}

.ghostai-session-card__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--ghostai-space-1, 0.25rem);
    min-width: 14rem;
    max-width: min(20rem, calc(100vw - 2rem));
    padding: var(--ghostai-space-2, 0.5rem);
    border: 1px solid var(--ghostai-color-border-strong, #38507d);
    border-radius: var(--ghostai-radius-md, 8px);
    background: var(--ghostai-color-surface, #0f172a);
    box-shadow: var(--ghostai-shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.35));
}

/* Compact deep-link into the comparison workspace — one item of the overflow. */
.ghostai-session-compare {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-height: var(--tds-input-height-sm, 28px);
    padding: 0.25rem 0.6rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ghostai-color-text-primary, #f8fafc);
    border-radius: var(--ghostai-radius-sm, 6px);
    text-decoration: none;
}

.ghostai-session-compare:hover {
    background: var(--ghostai-color-surface-2, #131f38);
    color: var(--ghostai-color-accent, #38bdf8);
}

.ghostai-session-compare:focus-visible {
    outline: 2px solid var(--ghostai-color-accent, #38bdf8);
    outline-offset: 2px;
}

/* #2097 D4 — the Driver DNA cohort actions, in the overflow, and their readings under the row. */
.ghostai-session-dna {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--ghostai-space-1, 0.25rem);
    min-width: 0;
}

.ghostai-session-dna__action {
    display: flex;
    min-width: 0;
}

.ghostai-session-dna__action > * {
    flex: 1 1 auto;
    justify-content: flex-start;
}

.ghostai-session-dna__results {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.ghostai-session-dna__results:empty {
    display: none;
}

.ghostai-session-card > .ghostai-session-dna__results:not(:empty) {
    padding: 0 18px 14px;
}

.ghostai-session-dna__dismiss {
    display: flex;
    justify-content: flex-end;
}

.ghostai-session-dna__heading {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
}

.ghostai-session-dna__note {
    margin: 0;
    font-size: 0.8rem;
    color: var(--ghostai-color-text-muted, #94a3b8);
}

/* A named absence is a statement, not a blank: it is given the same weight as a reading that exists. */
.ghostai-session-dna__absence {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    background: var(--ghostai-color-surface-2, #131f38);
    border: 1px solid var(--ghostai-color-border, #24324d);
    border-radius: 0.5rem;
}

/* The folded run of sessions in which nothing was recorded — "3 krótkie sesje bez okrążeń": one dashed line with a
   caret, collapsed by default, opening to one compact line per session. A disclosure, so it is reachable by keyboard
   and says how many rows it holds before it is opened. */
.ghostai-sessions__group-details {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-2, 0.5rem);
}

.ghostai-sessions__group-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    min-height: 48px;
    padding: 6px 16px;
    border: 1px dashed var(--ghostai-color-border-strong, #38507d);
    border-radius: 12px;
    color: var(--ghostai-color-text-secondary, #cbd5e1);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.ghostai-sessions__group-summary::-webkit-details-marker {
    display: none;
}

.ghostai-sessions__group-caret::before {
    content: "▸";
}

.ghostai-sessions__group-details[open] .ghostai-sessions__group-caret::before {
    content: "▾";
}

.ghostai-sessions__group-title {
    flex: 1 1 12rem;
    min-width: 0;
}

.ghostai-sessions__group-meta {
    font-size: 0.8125rem;
    font-weight: 500;
}

.ghostai-sessions__group-summary:focus-visible {
    outline: 2px solid var(--ghostai-color-accent, #38bdf8);
    outline-offset: 2px;
}

.ghostai-sessions__group-items {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0 0 0 16px;
    list-style: none;
    border-left: 2px solid var(--ghostai-color-border, #24324d);
}

.ghostai-sessions__group-item.ghostai-sessions__item--resumed {
    border-left: 3px solid var(--ghostai-color-primary, #7c5cff);
    padding-left: 6px;
}

.ghostai-sessions__group-link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 6px 0;
    font-size: 0.8125rem;
    color: var(--ghostai-color-text-secondary, #cbd5e1);
    text-decoration: none;
}

.ghostai-sessions__group-link b {
    font-weight: 600;
    color: var(--ghostai-color-text-primary, #f8fafc);
}

.ghostai-sessions__group-link:hover b {
    color: var(--ghostai-color-accent, #38bdf8);
}

.ghostai-sessions__group-link:focus-visible {
    outline: 2px solid var(--ghostai-color-accent, #38bdf8);
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .ghostai-session-row--compact {
        padding: 12px 14px;
    }

    .ghostai-session-card:has(> .ghostai-session-card__more) > .ghostai-session-row--compact {
        padding-right: calc(14px + 2.25rem);
    }

    .ghostai-session-card > .ghostai-session-row--compact .ghostai-session-row__chevron {
        margin-left: 0;
    }

    /* On a phone the overflow sits at the card's top corner, clear of the stacked columns. */
    .ghostai-session-card__more {
        top: 8px;
        right: 8px;
        transform: none;
    }

    .ghostai-session-row__group--session,
    .ghostai-session-row__group--target,
    .ghostai-session-row__group--best,
    .ghostai-session-row__group--compare {
        flex: 1 1 100%;
    }
}

@media (max-width: 640px) {
    .ghostai-session-row {
        grid-template-columns: 1fr auto;
    }

    .ghostai-session-row:not(.ghostai-session-row--compact) .ghostai-session-row__status {
        grid-column: 1 / -1;
        order: 3;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ghostai-session-row,
    .ghostai-session-row__chevron,
    .ghostai-session-card {
        transition: none;
    }
}

.ghostai-dashboard-sessions {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-2, 0.5rem);
}

/* ---- My Sessions list layout ---- */
.ghostai-sessions {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-3, 0.75rem);
    min-width: 0;
}

.ghostai-sessions__list,
.ghostai-dashboard-sessions {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-2, 0.5rem);
}

.ghostai-sessions__list > li,
.ghostai-dashboard-sessions > li {
    list-style: none;
    margin: 0;
}

.ghostai-sessions__more {
    display: flex;
    justify-content: center;
    margin-top: var(--ghostai-space-2, 0.5rem);
}

/* T136-D — the toolbar: the two chips, then the search box taking the rest of the line (and a line of its own on a
   phone). Every control is one height, --tds-input-height-md (CLAUDE-ux-rules). The chips wrap rather than overflow,
   and each may shrink: on the row's main axis min-width:auto would refuse to let a long label shrink. */
.ghostai-sessions__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ghostai-space-2, 0.5rem);
    min-width: 0;
}

.ghostai-sessions__filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ghostai-space-2, 0.5rem);
    min-width: 0;
}

.ghostai-sessions__filter-chip {
    display: inline-flex;
    min-width: 0;
}

.ghostai-sessions__filter-chip .tds-chip {
    min-height: var(--tds-input-height-md, 40px);
}

.ghostai-sessions__search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 220px;
    min-width: 0;
}

.ghostai-sessions__search > .ghostai-icon,
.ghostai-sessions__search > svg,
.ghostai-sessions__search > span:first-child {
    position: absolute;
    left: 12px;
    color: var(--ghostai-color-text-muted, #94a3b8);
    pointer-events: none;
}

.ghostai-sessions__search-input {
    width: 100%;
    min-width: 0;
    min-height: var(--tds-input-height-md, 40px);
    padding: 0 12px 0 38px;
    border: 1px solid var(--ghostai-color-border, #24324d);
    border-radius: var(--ghostai-radius-md, 8px);
    background: var(--ghostai-color-input-bg, var(--ghostai-color-surface, #0f172a));
    color: var(--ghostai-color-text-primary, #f8fafc);
    font: inherit;
    font-size: 0.9rem;
}

.ghostai-sessions__search-input::placeholder {
    color: var(--ghostai-color-text-muted, #94a3b8);
}

.ghostai-sessions__search-input:focus-visible {
    outline: 2px solid var(--tds-border-focus, var(--ghostai-color-accent, #38bdf8));
    outline-offset: 1px;
    border-color: var(--ghostai-color-accent, #38bdf8);
}

/* "Z okrążeniami" matched nothing although the history is not empty (mockup "onlyEmpty"): an info note with its way
   back to the whole history. */
.ghostai-sessions__only-empty {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ghostai-space-2, 0.5rem) var(--ghostai-space-3, 0.75rem);
    padding: 12px 16px;
    border: 1px solid color-mix(in srgb, var(--ghostai-color-accent, #38bdf8) 45%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--ghostai-color-accent, #38bdf8) 10%, var(--ghostai-backdrop-card-surface, var(--ghostai-color-surface, #0f172a)));
    color: var(--ghostai-color-text-primary, #f8fafc);
}

.ghostai-sessions__only-empty p {
    flex: 1 1 16rem;
    margin: 0;
    font-size: 0.9rem;
}

.ghostai-sessions__only-empty > :first-child {
    color: var(--ghostai-color-accent, #38bdf8);
}

.ghostai-sessions__no-match {
    margin: 0;
    padding: 12px 16px;
    border: 1px dashed var(--ghostai-color-border, #24324d);
    border-radius: 12px;
    font-size: 0.875rem;
    color: var(--ghostai-color-text-secondary, #cbd5e1);
}

/* ---- Session Details ---- */
.ghostai-backlink {
    color: var(--ghostai-color-accent, #38bdf8);
    text-decoration: none;
    font-size: 0.9rem;
    border-radius: var(--ghostai-radius-sm, 6px);
}

.ghostai-backlink:hover { text-decoration: underline; }
.ghostai-backlink:focus-visible { outline: 2px solid var(--ghostai-color-accent, #38bdf8); outline-offset: 3px; }

.ghostai-session-detail {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-6, 1.5rem);
    border: 1px solid var(--ghostai-color-border, #24324d);
    border-radius: var(--ghostai-radius-lg, 14px);
    background: var(--ghostai-color-surface, #0f172a);
    padding: var(--ghostai-space-6, 1.5rem);
    /* As a grid item, min-width:auto refuses to shrink below the content's min-content, overflowing the mobile
       viewport. Allow it (and its flex-column sections) to shrink; wide inner content wraps or scrolls in its own box. */
    min-width: 0;
}

.ghostai-session-detail__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ghostai-space-4, 1rem);
    flex-wrap: wrap;
}

.ghostai-session-detail__title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ghostai-color-text-primary, #f8fafc);
    text-wrap: balance;
}

.ghostai-session-detail__section {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-3, 0.75rem);
    padding-top: var(--ghostai-space-4, 1rem);
    border-top: 1px solid var(--ghostai-color-border, #24324d);
    min-width: 0;
}

/* T164 — the shared card carries min-height:100% for grid tiles. As a flex item of a section that height is the
   section's own, so the card claimed the whole section and pushed what follows it (the focus card's other proposals
   and its before/after) out over the next section. Inside a section a card is as tall as its content. */
.ghostai-session-detail__section > .ghostai-card { min-height: auto; }

/* T167 — My recurring problems: the filter bar wraps on narrow screens, each problem is a bordered row, and the
   pager sits on one line. */
.ghostai-session-detail__filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ghostai-space-3, 0.75rem);
    align-items: end;
    padding: var(--ghostai-space-3, 0.75rem);
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-xl, 12px);
}

.ghostai-session-detail__filters label { display: grid; gap: var(--ghostai-space-1, 0.25rem); }

.ghostai-session-detail__list {
    display: grid;
    gap: var(--ghostai-space-3, 0.75rem);
    padding-left: 1.25rem;
}

.ghostai-session-detail__list > li {
    padding: var(--ghostai-space-3, 0.75rem);
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-xl, 12px);
}

[data-testid="recurring-problems-pager"] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ghostai-space-3, 0.75rem);
    align-items: center;
}

.ghostai-session-detail__heading {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ghostai-color-text-muted, #94a3b8);
    font-weight: 700;
}

.ghostai-session-detail__grid {
    display: grid;
    grid-template-columns: minmax(9rem, max-content) 1fr;
    gap: var(--ghostai-space-2, 0.5rem) var(--ghostai-space-6, 1.5rem);
    margin: 0;
}

.ghostai-session-detail__grid dt { color: var(--ghostai-color-text-muted, #94a3b8); font-size: 0.9rem; }
.ghostai-session-detail__grid dd { margin: 0; color: var(--ghostai-color-text-primary, #f8fafc); font-variant-numeric: tabular-nums; }

.ghostai-session-detail__eventlink { margin-left: var(--ghostai-space-3, 0.75rem); color: var(--ghostai-color-accent, #38bdf8); text-decoration: none; font-size: 0.85rem; }
.ghostai-session-detail__eventlink:hover { text-decoration: underline; }

/* Same accent treatment as the event link, but the heatmap link stands alone in its cell — no leading margin. */
.ghostai-session-detail__heatmaplink { color: var(--ghostai-color-accent, #38bdf8); text-decoration: none; font-size: 0.85rem; }
.ghostai-session-detail__heatmaplink:hover { text-decoration: underline; }

/* #2444 — the owner scope beside a pinned reference's name, and the server's sentence about a refused or
   unstated one. Both are secondary to the name itself, and the note wraps onto its own line so a refusal reads
   as an explanation rather than as part of the value. */
.ghostai-session-detail__target-scope { margin-left: var(--ghostai-space-2, 0.5rem); color: var(--ghostai-color-text-muted, #94a3b8); font-size: 0.85rem; }
.ghostai-session-detail__target-note { display: block; margin-top: var(--ghostai-space-1, 0.25rem); color: var(--ghostai-color-text-secondary, #cbd5e1); font-size: 0.85rem; max-width: 60ch; }

/* MREF-05A (#2737) — the saved reference set. Tokens only, so the light skin (html[data-theme="light"]) re-colours
   it with the rest of the page. The slots wrap to one column on a phone (minmax(min(100%, …))) and never force a
   horizontal scroll; the selected slot is marked by a thicker accent border AND the word "Selected", so colour is
   never the only carrier. The attempts table scrolls inside its own box rather than widening the page. */
.ghostai-reference-set__target,
.ghostai-reference-set__dna { display: flex; flex-direction: column; gap: var(--ghostai-space-2, 0.5rem); min-width: 0; }
.ghostai-reference-set__picker { border: 0; margin: 0; padding: 0; min-width: 0; }
.ghostai-reference-set__legend { font-size: 0.9rem; color: var(--ghostai-color-text-muted, #94a3b8); margin-bottom: var(--ghostai-space-2, 0.5rem); }
.ghostai-reference-set__slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--ghostai-space-2, 0.5rem); }
.ghostai-reference-set__slot { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ghostai-space-1, 0.25rem); text-align: left; padding: var(--ghostai-space-3, 0.75rem); border: 1px solid var(--ghostai-color-border, #24324d); border-radius: var(--ghostai-radius-md, 0.5rem); background: var(--ghostai-color-surface-2, #131f38); color: var(--ghostai-color-text-primary, #f8fafc); cursor: pointer; min-width: 0; }
.ghostai-reference-set__slot:focus-visible { outline: 2px solid var(--ghostai-color-accent, #38bdf8); outline-offset: 2px; }
.ghostai-reference-set__slot--selected { border: 2px solid var(--ghostai-color-accent, #38bdf8); }
.ghostai-reference-set__slot--primary { border-style: double; }
.ghostai-reference-set__slot-name { font-weight: 700; }
.ghostai-reference-set__slot-primary,
.ghostai-reference-set__slot-selected { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ghostai-color-accent, #38bdf8); }
.ghostai-reference-set__slot-line { font-size: 0.85rem; color: var(--ghostai-color-text-secondary, #cbd5e1); overflow-wrap: anywhere; }
.ghostai-reference-set__subheading { margin: var(--ghostai-space-3, 0.75rem) 0 var(--ghostai-space-2, 0.5rem); font-size: 0.95rem; color: var(--ghostai-color-text-primary, #f8fafc); }
.ghostai-reference-set__swatch { display: inline-block; width: 0.75rem; height: 0.75rem; margin-right: var(--ghostai-space-1, 0.25rem); border-radius: 2px; background: var(--ghostai-color-accent, #38bdf8); vertical-align: middle; }
.ghostai-reference-set__elements { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ghostai-space-3, 0.75rem); }
.ghostai-reference-set__element { padding-top: var(--ghostai-space-2, 0.5rem); border-top: 1px solid var(--ghostai-color-border, #24324d); min-width: 0; }
.ghostai-reference-set__element-name { margin: 0 0 var(--ghostai-space-2, 0.5rem); font-weight: 700; overflow-wrap: anywhere; }
.ghostai-reference-set__partial { font-size: 0.75rem; color: var(--ghostai-color-warning, #f59e0b); text-transform: uppercase; }
.ghostai-reference-set__attempts { margin-top: var(--ghostai-space-1, 0.25rem); overflow-x: auto; max-width: 100%; }
.ghostai-reference-set__table { border-collapse: collapse; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.ghostai-reference-set__table th,
.ghostai-reference-set__table td { padding: var(--ghostai-space-1, 0.25rem) var(--ghostai-space-2, 0.5rem); text-align: right; border-bottom: 1px solid var(--ghostai-color-border, #24324d); }
.ghostai-reference-set__table th[scope="row"] { text-align: left; font-weight: 400; }
/* CMR-T16 — a directed delta against the selected build: the same loss/gain tokens as the session rows, with words beside. */
.ghostai-reference-set__delta--loss { color: var(--ghostai-color-danger, #ef4444); }
.ghostai-reference-set__delta--gain { color: var(--ghostai-color-success, #22c55e); }
.ghostai-reference-set__verdict { font-size: 0.8rem; }
.ghostai-reference-set__revision { display: flex; flex-wrap: wrap; gap: var(--ghostai-space-2, 0.5rem); align-items: center; }
.ghostai-reference-set__revision select { background: var(--ghostai-color-input-bg, #0b1220); color: var(--ghostai-color-text-primary, #f8fafc); border: 1px solid var(--ghostai-color-border, #24324d); border-radius: var(--ghostai-radius-sm, 0.25rem); padding: var(--ghostai-space-1, 0.25rem) var(--ghostai-space-2, 0.5rem); }
.ghostai-reference-set__retry { align-self: flex-start; background: transparent; color: var(--ghostai-color-accent, #38bdf8); border: 1px solid var(--ghostai-color-accent, #38bdf8); border-radius: var(--ghostai-radius-sm, 0.25rem); padding: var(--ghostai-space-1, 0.25rem) var(--ghostai-space-3, 0.75rem); cursor: pointer; }

.ghostai-session-detail__muted { margin: 0; color: var(--ghostai-color-text-secondary, #cbd5e1); max-width: 68ch; line-height: 1.55; }

/* #2614 T83 — the wrapper around a section the page renders in either order. It generates no box, so the sections
   inside stay direct flex items of the article (same gap, same borders) exactly as before they were extracted. */
.ghostai-session-detail__group { display: contents; }

/* #2614 T83 — detail on demand (the per-corner tables in V2). The summary line is a real button-like target. */
.ghostai-session-detail__on-demand { border-top: 1px solid var(--ghostai-color-border, #24324d); padding-top: var(--ghostai-space-3, 0.75rem); min-width: 0; }
.ghostai-session-detail__on-demand > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--ghostai-color-accent, #38bdf8); font-size: 0.9rem; }
.ghostai-session-detail__on-demand > summary:focus-visible { outline: 2px solid var(--ghostai-color-accent, #38bdf8); outline-offset: 3px; }
.ghostai-session-detail__on-demand[open] > summary { margin-bottom: var(--ghostai-space-3, 0.75rem); }

/* #2277 T17 — What next. A column and not a row of buttons: an offer that cannot be taken carries a sentence
   beside it, and a sentence does not fit in a chip. Wraps identically at 390 and 1440 for that reason. */
.ghostai-next-steps {
    list-style: none;
    margin: var(--ghostai-space-3, 0.75rem) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-3, 0.75rem);
}

.ghostai-next-steps__item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ghostai-next-steps__action {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 999px;
    text-decoration: none;
    color: var(--ghostai-color-accent, #38bdf8);
    background: var(--ghostai-color-surface, #0f172a);
    border: 1px solid var(--ghostai-color-border, #24324d);
}

.ghostai-next-steps__action:hover {
    border-color: var(--ghostai-color-accent, #38bdf8);
    background: var(--ghostai-color-surface-2, #131f38);
}

.ghostai-next-steps__action:focus-visible {
    outline: 2px solid var(--ghostai-color-accent, #38bdf8);
    outline-offset: 2px;
}

/* Muted, but still readable: this is a real offer the driver is being told about, not a greyed-out ghost. */
.ghostai-next-steps__action.is-unavailable {
    color: var(--ghostai-color-text-muted, #94a3b8);
    border-style: dashed;
    cursor: default;
}

.ghostai-next-steps__badge {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ghostai-next-steps__reason {
    font-size: 0.8rem;
    line-height: 1.5;
    max-width: 70ch;
    color: var(--ghostai-color-text-secondary, #cbd5e1);
}

.ghostai-session-detail__technical { border-top: 1px solid var(--ghostai-color-border, #24324d); padding-top: var(--ghostai-space-4, 1rem); }
.ghostai-session-detail__technical summary { cursor: pointer; color: var(--ghostai-color-text-muted, #94a3b8); font-size: 0.85rem; letter-spacing: 0.06em; }
.ghostai-session-detail__technical summary:focus-visible { outline: 2px solid var(--ghostai-color-accent, #38bdf8); outline-offset: 3px; }
.ghostai-session-detail__technical dd { font-family: var(--ghostai-font-technical); font-size: 0.82rem; color: var(--ghostai-color-text-secondary, #cbd5e1); }
.ghostai-session-detail__technical .ghostai-session-detail__grid { margin-top: var(--ghostai-space-3, 0.75rem); }

.ghostai-session-row__chevron {
    display: inline-flex;
    align-items: center;
}

.ghostai-session-row__chevron svg {
    width: 1.15rem;
    height: 1.15rem;
}

/* Session details — lap selector list (My Sessions telemetry workspace) */
.ghostai-laps {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ghostai-lap-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 12px;
    background: var(--ghostai-surface, #131a2b);
    border: 1px solid var(--ghostai-border, #26304a);
    border-radius: 8px;
    color: var(--ghostai-text, #e6ebf5);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.ghostai-lap-row:hover {
    border-color: var(--ghostai-accent, #00d4ff);
}

.ghostai-lap-row--selected {
    border-color: var(--ghostai-accent, #00d4ff);
    box-shadow: inset 0 0 0 1px var(--ghostai-accent, #00d4ff);
}

.ghostai-lap-row__no {
    font-weight: 600;
    min-width: 150px;
}

.ghostai-lap-row__time {
    font-variant-numeric: tabular-nums;
    min-width: 92px;
    color: var(--ghostai-text, #e6ebf5);
}

/* #1343 R11 — a lap analyzed from fewer corners than the layout has. Warning-toned, not error-toned: the lap
   is real and shown, it just cannot build a reference. Sits inline after the validity badge; the telemetry
   flag keeps its auto margin so it stays right-aligned. */
.ghostai-lap-row__coverage {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ghostai-warning, #e0a24a);
    white-space: nowrap;
}

/* T136 — a lap GT7 added time to at the line. Wraps the error-toned badge in place of the validity badge so the
   title explaining why the lap is invalid has somewhere to live. */
.ghostai-lap-row__penalty {
    display: inline-flex;
    white-space: nowrap;
}

.ghostai-lap-row__telemetry {
    margin-left: auto;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ghostai-text-muted, #8b95a7);
}

/* Synthetic Reference surfacing (Program 0) */
.ghostai-session-detail__reference {
    margin: 4px 0 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 12px;
}

.ghostai-session-detail__reference-source {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ghostai-text-muted, #8b95a7);
}

.ghostai-session-detail__reference-source.is-provisional {
    color: var(--ghostai-color-warning, #d9a441);
}

.ghostai-session-detail__reference-delta {
    font-variant-numeric: tabular-nums;
    color: var(--ghostai-text-muted, #8b95a7);
}

.ghostai-lap-row__reference-delta {
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
    color: var(--ghostai-text-muted, #8b95a7);
    min-width: 64px;
}

.ghostai-lap-workspace {
    margin-top: 16px;
}

/* #1407 — Classic / Dynamics Lab. A pair of buttons rather than a tab strip: these are two views of one lap with one
   selection between them, not two places to be. The pressed state carries the choice, and aria-pressed carries it to
   a screen reader, so the colour is never the only signal. */
.ghostai-lap-workspace__modes {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
}

.ghostai-lap-workspace__mode {
    appearance: none;
    background: transparent;
    border: 1px solid var(--ghostai-border, #232a38);
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 0.8rem;
    color: var(--ghostai-text-muted, #8b95a7);
    cursor: pointer;
}

.ghostai-lap-workspace__mode:hover {
    color: var(--ghostai-text, #e6ebf2);
}

.ghostai-lap-workspace__mode.is-active {
    background: var(--ghostai-surface-raised, #1a2130);
    border-color: var(--ghostai-accent, #4c8dff);
    color: var(--ghostai-text, #e6ebf2);
}

.ghostai-lap-workspace__mode:focus-visible {
    outline: 2px solid var(--ghostai-accent, #4c8dff);
    outline-offset: 2px;
}

/* The same strip after it grew a third view and was renamed `lap-bench__tab` — the markup was renamed, these rules
   were not, so `Track & car` / `Charts` / `Compare` rendered as bare native buttons and `is-active` styled nothing.
   The selected view was distinguishable only by `aria-pressed`, i.e. only to a screen reader.

   Kept as its own block rather than by adding a selector to the rules above: the two names are not aliases, the
   `lap-workspace__mode` markup is gone, and a shared selector would hide that. Values match
   `.tel-strip__mode.is-active` and `.tel25-scene__btn.is-active`, so every "this one is selected" on the lap bench
   reads the same way. */
.ghostai-lap-bench__tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
}

.ghostai-lap-bench__tab {
    appearance: none;
    background: transparent;
    border: 1px solid var(--ghostai-border, #232a38);
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 0.8rem;
    color: var(--ghostai-text-muted, #8b95a7);
    cursor: pointer;
}

.ghostai-lap-bench__tab:hover {
    color: var(--ghostai-text, #e6ebf2);
}

.ghostai-lap-bench__tab.is-active {
    background: var(--ghostai-surface-raised, #1a2130);
    border-color: var(--ghostai-accent, #4c8dff);
    color: var(--ghostai-text, #e6ebf2);
}

.ghostai-lap-bench__tab:focus-visible {
    outline: 2px solid var(--ghostai-accent, #4c8dff);
    outline-offset: 2px;
}

/* The pair bar: which two laps are on screen, kept on screen. Compare tab only — see the markup for why the Charts
   tab must not carry it.

   The bench header names both — the lap in its heading, the reference in "Compared against …" — but it lives above
   the tab strip and is gone before the first chart is. Below it, the only thing naming a side was the gap chart's
   own label, and a chart whose SIGN depends on which lap is which cannot be read against a pair the reader has to
   hold in their head.

   Sticky at the very top of the viewport. Nothing else inside the Compare tab sticks, so there is no offset to
   negotiate. Kept to one short line for the same reason it exists: it is a caption, and a caption that eats a fifth
   of the viewport is worse than the problem it solves. */
/* Where a sticky frame bar has to start (T80, #2612).
   ────────────────────────────────────────────────────────────────────────────────────────────────────────────────
   The app shell's own header is sticky at top:0 with `z-index: var(--ghostai-z-header)` = 100, so a bar stuck at
   top:0 parks UNDERNEATH it and cannot be clicked — measured, not reasoned: `document.elementFromPoint` at the
   centre of the Unpin button returned `BUTTON.ghostai-profile-menu__button` on Track & car and
   `DIV.ghostai-app-shell__bar` on Compare, both at 1440 CSS px. The z-index of the bars is deliberately NOT raised
   past the header's: a frame bar drawn over the site navigation trades one hidden control for another.

   The BASE offset is not defined here. It lives on `.ghostai-app-shell` (see `_ghostai.layout.scss`), because the
   bench is not the only host of a sticky frame bar: `TelemetryWorkspace` is also mounted by
   `Pages/Events/EventTelemetryReview.razor`, which has no `.ghostai-lap-bench` ancestor and so took the `0px`
   fallback — with its ◄ and ► hit-testing to a navigation link. Defining it on the shell means every page inherits
   it, including pages nobody has written yet.

   What is left here is only what the COMPARE TAB adds on top of that base. */

/* Compare sticks the pair caption too, so its frame bar starts one caption lower. One line of caption at desktop
   widths; approximate on purpose and safe to be, because the frame bar outranks the caption in z-index, so an offset
   a few pixels out overlaps a caption rather than hiding a control. */
.ghostai-session-detail__comparison {
    --ghostai-bench-sticky-top: calc(var(--ghostai-bench-shell-top) + 2.9rem);
}

/* Narrow: the caption's flex-wrap puts the two sides on separate lines, so the bar below it starts lower. */
@media (max-width: 700px) {
    .ghostai-session-detail__comparison {
        --ghostai-bench-sticky-top: calc(var(--ghostai-bench-shell-top) + 5.2rem);
    }
}

.ghostai-lap-bench__pair {
    position: sticky;
    /* Was top:0, which put this caption under the shell header for the same reason the frame bars were. It has to
       move with them, or the frame bar below it would be offset past a caption nobody can see. */
    top: var(--ghostai-bench-shell-top, 0px);
    z-index: 5;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    padding: 6px 12px;
    border: 1px solid var(--ghostai-border, #232a38);
    border-radius: 8px;
    /* Opaque, not translucent: charts scroll underneath it and a see-through caption over a moving trace is
       unreadable exactly when it is being read. */
    background: var(--ghostai-surface-raised, #1a2130);
    font-size: 0.8rem;
    line-height: 1.35;
}

.ghostai-lap-bench__pair-side {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

/* The role is the quiet part: it labels the value beside it, and a caption where both halves shout is unreadable. */
.ghostai-lap-bench__pair-role {
    color: var(--ghostai-text-muted, #8b95a7);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ghostai-lap-bench__pair-name {
    color: var(--ghostai-text, #e6ebf2);
    font-weight: 600;
}

.ghostai-lap-bench__pair-time {
    color: var(--ghostai-text, #e6ebf2);
    font-variant-numeric: tabular-nums;
}

.ghostai-lap-bench__pair-provenance {
    color: var(--ghostai-text-muted, #8b95a7);
    font-size: 0.72rem;
}

.ghostai-lap-bench__pair-vs {
    color: var(--ghostai-text-muted, #8b95a7);
}

/* "No reference chosen" is the state the page opens in, and a real answer to "which two laps?" — so it is worded
   and styled as an answer, not as something missing. */
.ghostai-lap-bench__pair-none {
    color: var(--ghostai-text-muted, #8b95a7);
    font-style: italic;
}

/* #1283 B3 — the per-corner time-loss ledger panel. Deliberately unstyled by direction: the words "lost" and
   "gained" carry the sign, so no red/green pair is needed and colour is never the only signal. The declined
   groups look identical to the measured list because an unmeasured corner is a normal state, not a degraded one. */
.ghostai-time-loss {
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid var(--ghostai-border, #232a38);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ghostai-time-loss__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
}

.ghostai-time-loss__title {
    margin: 0;
    font-size: 0.95rem;
}

.ghostai-time-loss__reference,
.ghostai-time-loss__reason,
.ghostai-time-loss__muted {
    margin: 0;
    font-size: 0.8rem;
    color: var(--ghostai-text-muted, #8b95a7);
}

.ghostai-time-loss__corners {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ghostai-time-loss__corner {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 0.85rem;
}

.ghostai-time-loss__where {
    min-width: 96px;
    font-weight: 600;
}

.ghostai-time-loss__value {
    font-variant-numeric: tabular-nums;
}

.ghostai-time-loss__sequence {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ghostai-text-muted, #8b95a7);
}

/* ADR-2026-10-17-off-track-corners-commit-flagged — the excursion sentence takes its own line under the corner. */
.ghostai-time-loss__offtrack {
    flex-basis: 100%;
    padding-left: 10px;
    border-left: 2px solid var(--ghostai-warning, #e0a24a);
    font-size: 0.8rem;
}

.ghostai-time-loss__declined {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ghostai-time-loss__footer {
    margin: 0;
    font-size: 0.75rem;
    color: var(--ghostai-text-muted, #8b95a7);
}

/* The honest reference picker. Declined options are styled the same as compatible ones on purpose: having no
   reference is a normal state, not a degraded one, and a wall of red would read as breakage rather than as an
   explanation. Only the emphasis differs — the qualifying/declining sentence is muted next to the name. */
.ghostai-ref-picker {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ghostai-ref-picker__summary {
    margin: 0;
    font-size: 0.8rem;
    color: var(--ghostai-text, #e6ebf2);
}

/* #2444 — what this bench is, stated before anything is picked: an exploratory comparison, not the session's
   training target. Muted, because it is a scope note rather than a warning. */
.ghostai-ref-picker__scope-note {
    margin: 0;
    font-size: 0.75rem;
    color: var(--ghostai-color-text-muted, #94a3b8);
}

.ghostai-ref-picker__muted,
.ghostai-ref-picker__group-label {
    margin: 0;
    font-size: 0.8rem;
    color: var(--ghostai-text-muted, #8b95a7);
}

.ghostai-ref-picker__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ghostai-ref-picker__row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 10px;
    font-size: 0.85rem;
}

.ghostai-ref-picker__name {
    font-weight: 600;
}

.ghostai-ref-picker__what,
.ghostai-ref-picker__why {
    font-size: 0.78rem;
    color: var(--ghostai-text-muted, #8b95a7);
}

/* T136-D — a flex item's min-content is its longest word, and a reason or an identity can be one long token: measured
   at 375px, .ghostai-ref-picker__why widened the whole Session Details document. It breaks anywhere instead. */
.ghostai-ref-picker__name,
.ghostai-ref-picker__what,
.ghostai-ref-picker__why,
.ghostai-ref-picker__diagnostic {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* Administrator-only: the system's own identity for a reference. Monospaced and dimmer than the driver-facing lines
   so it reads as a diagnostic rather than as part of the sentence above it. */
.ghostai-ref-picker__diagnostic {
    font-family: var(--ghostai-font-technical);
    font-size: 0.72rem;
    color: var(--ghostai-text-muted, #8b95a7);
    opacity: 0.75;
}

.ghostai-ref-picker__declined {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ghostai-ref-picker__declined-summary {
    font-size: 0.8rem;
    color: var(--ghostai-text-muted, #8b95a7);
    cursor: pointer;
}

.ghostai-ref-picker__group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 6px;
}

.ghostai-ref-picker__recoverable {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ghostai-text-muted, #8b95a7);
}

/* Program-0b shared reference-performance component (GhostAiReferencePerformance) */
.ghostai-ref-perf {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 14px;
}

.ghostai-ref-perf--card {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.ghostai-ref-perf__reference,
.ghostai-ref-perf__mybest {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.ghostai-ref-perf__car {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ghostai-text-muted, #8b95a7);
}

.ghostai-ref-perf__source {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ghostai-text-muted, #8b95a7);
}

.ghostai-ref-perf__source.is-provisional {
    color: var(--ghostai-color-warning, #d9a441);
}

.ghostai-ref-perf--unavailable {
    color: var(--ghostai-text-muted, #8b95a7);
}

.ghostai-scope-selector,
.ghostai-combo-selector {
    font: inherit;
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--ghostai-surface-2, #1b2230);
    color: var(--ghostai-text, #e6ebf5);
    border: 1px solid var(--ghostai-border, #2b3444);
    /* A native <select> sizes to its widest option; a long reference name (e.g. "Event — … (EventSynthetic)")
       must never widen the page past the mobile viewport. Constrain to the container and truncate instead. */
    max-width: 100%;
    box-sizing: border-box;
    text-overflow: ellipsis;
}

.ghostai-combo-selector__single {
    font-size: 0.82rem;
    color: var(--ghostai-text-muted, #8b95a7);
}

/* Grid cell "Reference detail" link under the compact block */
.ghostai-ref-perf__detail-link {
    display: inline-block;
    margin-top: 4px;
    font-size: 0.72rem;
    color: var(--ghostai-color-accent, #5b9dff);
    text-decoration: none;
}

.ghostai-ref-perf__detail-link:hover {
    text-decoration: underline;
}

/* Session details — reference scope selector + selected reference block */
.ghostai-session-detail__reference-scope {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
    margin-top: 0.5rem;
}

/* Team detail — Synthetic Reference section (Groups module renders inside the root Web host) */
.ghostai-team-reference {
    margin-top: 0.5rem;
}

.ghostai-team-reference__heading {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ghostai-text-muted, #8b95a7);
    margin-bottom: 0.25rem;
}

.ghostai-team-reference__hint {
    margin-bottom: 0.75rem;
}

.ghostai-team-reference__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ghostai-team-reference__item {
    padding: 0.75rem;
    border: 1px solid var(--ghostai-border, #2b3444);
    border-radius: 8px;
    background: var(--ghostai-surface-2, #1b2230);
}

.ghostai-team-reference__mine {
    margin-top: 0.5rem;
}

.ghostai-team-reference__potential {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--ghostai-text, #e6ebf5);
}

/* Event reference detail page */
.ghostai-ref-detail__section {
    margin-bottom: 1.75rem;
}

.ghostai-ref-detail__heading {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ghostai-text-muted, #8b95a7);
    margin-bottom: 0.5rem;
}

.ghostai-ref-detail__potential {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: var(--ghostai-text, #e6ebf5);
}

/* Mobile: stack the reference / my-best / delta vertically */
@media (max-width: 640px) {
    .ghostai-ref-perf {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

/* Session details laps — mobile: let rows wrap so nothing scrolls horizontally */
@media (max-width: 640px) {
    .ghostai-lap-row {
        flex-wrap: wrap;
        gap: 6px 10px;
    }

    .ghostai-lap-row__no {
        min-width: 0;
        flex: 1 1 100%;
    }

    .ghostai-lap-row__time {
        min-width: 0;
    }

    .ghostai-lap-row__telemetry {
        margin-left: 0;
    }
}

/* #1954 CH-UI0 — Corner / Sequence Analysis.
   The canvas host is a sized, empty box. It has to reserve its space BEFORE anything is drawn in it, so the
   page does not jump when #1943 puts a renderer inside; and it stays empty in this release, because a
   placeholder drawing on this surface would be indistinguishable from telemetry. */
.ghostai-corner-analysis__canvas {
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 240px;
    border: 1px dashed var(--ghostai-color-border, #24324d);
    border-radius: var(--ghostai-radius-2, 0.5rem);
    background: var(--ghostai-color-surface-2, #101725);
}

.ghostai-corner-analysis__legend {
    padding-top: var(--ghostai-space-3, 0.75rem);
}

/* T81 (#2613) — the reason a cell has no number, and what to do about it.
   Two sentences, stacked, because side by side at 390px they wrap into each other and read as one run-on
   line. Muted and small: it explains the empty cell above it, it does not compete with the numbers. */
.ghostai-corner-reason > span {
    display: block;
}

/* T81 (#2613) — the administrator disclosure that holds the raw codes and the reference's lineage.
   Closed until it is opened, and rendered for nobody outside the admin role at all (AuthorizeView above
   it). Indented so an opened one reads as belonging to its row rather than as a new row. */
.ghostai-corner-analysis__details > summary {
    cursor: pointer;
}

.ghostai-corner-analysis__details > :not(summary) {
    padding-left: var(--ghostai-space-3, 0.75rem);
    word-break: break-all;
}

/* T32 — a wide table scrolls inside its own box.
   The corner tables were written with Bootstrap's `table-responsive` on them, and this app links no
   Bootstrap stylesheet: `wwwroot/css/bootstrap/bootstrap.min.css` is on disk and referenced by nothing, so
   that class styles nothing and a five- or nine-column table simply widened the document. Measured at
   390px on Session details: 0px of horizontal overflow before the minimum-speed table rendered and 81px
   after it.
   One new class rather than a rule on `table-responsive`, so nothing that already renders changes: the
   class is only where it has been put. `max-width` is what actually confines it — the section above is a
   flex column that already carries `min-width: 0`, and without a ceiling the table's intrinsic width still
   wins over `overflow-x` alone. */
.ghostai-table-scroll {
    max-width: 100%;
    overflow-x: auto;
}

/* The box is a keyboard stop (tabindex="0" on the element), so it owes a visible focus ring like every
   other one — an outline the reader can see is the difference between "focused" and "lost". */
.ghostai-table-scroll:focus-visible {
    outline: 2px solid var(--ghostai-color-accent, #38bdf8);
    outline-offset: 2px;
}

/* #1878 S8 — Event-manager telemetry review.
   Four stacked panes (participants → sessions → laps → the lap itself). Deliberately plain: the row is a real
   <button>, so keyboard focus and the disabled state come from the platform rather than from a div pretending
   to be a control. A lap that is not Ready renders disabled, and looks it. */
.ghostai-event-review {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-5, 1.5rem);
}

.ghostai-event-review__heading {
    margin: 0 0 var(--ghostai-space-3, 0.75rem);
    font-size: 1rem;
    letter-spacing: 0.02em;
    color: var(--ghostai-color-text-muted, #93a2be);
}

.ghostai-event-review__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ghostai-event-review__row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: 8px 12px;
    background: var(--ghostai-surface, #131a2b);
    border: 1px solid var(--ghostai-border, #26304a);
    border-radius: 8px;
    color: var(--ghostai-text, #e6ebf5);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.ghostai-event-review__row:hover:not(:disabled) {
    border-color: var(--ghostai-accent, #00d4ff);
}

.ghostai-event-review__row.is-selected {
    border-color: var(--ghostai-accent, #00d4ff);
    background: var(--ghostai-color-surface-2, #101725);
}

.ghostai-event-review__row:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.ghostai-event-review__row-title {
    font-weight: 600;
}

.ghostai-event-review__row-meta {
    font-size: 0.85rem;
    color: var(--ghostai-color-text-muted, #93a2be);
}

.ghostai-event-review__note {
    margin: var(--ghostai-space-3, 0.75rem) 0 0;
    font-size: 0.85rem;
    color: var(--ghostai-color-text-muted, #93a2be);
}

/* The two actions in the events grid stack rather than overflow their column. */
.race-event-list-grid__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* #1943 CH-11 — the drawing surface inside that host. The canvas fills the box the host already reserved, so
   the page does not jump when the renderer arrives, and it is sized in CSS pixels only: the renderer reads
   clientWidth/clientHeight and sets the backing store itself, at the device pixel ratio, because a canvas
   whose attribute size is left at the 300×150 default draws a blurred, wrongly-scaled picture. */
.ghostai-corner-analysis__surface {
    display: block;
    width: 100%;
    height: 100%;
}

.ghostai-corner-analysis__gradient {
    margin-bottom: var(--ghostai-space-2, 0.5rem);
}

/* ─────────────────────────────────────────────────────────────────────────────────────────────────
   T19 (#2475) — My Events as a card list rather than a fixed-width data grid.

   MEASURED on main @ ac74bf6ac, /my-events at the 390x844 profile: clientWidth 390, scrollWidth 1670.
   The Radzen grid declared a colgroup of fixed column widths (200 + 180 + 110 + …), so the page panned
   sideways on a phone and the reference column was off-screen entirely. Nothing below is a width: the
   cards are a single flowing column and every row inside them wraps, so the layout has no horizontal
   extent of its own to overflow with.
   ───────────────────────────────────────────────────────────────────────────────────────────────── */
.ghostai-event-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.ghostai-event-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.ghostai-event-card {
    min-width: 0;
    padding: 0.85rem 0.9rem;
    border: 1px solid var(--ghostai-border, #2b3444);
    border-radius: 10px;
    background: var(--ghostai-surface-2, #1b2230);
}

.ghostai-event-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.6rem;
}

.ghostai-event-card__title {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.3;
    /* A long event name is the one string here with no natural break point. */
    overflow-wrap: anywhere;
}

/* U401 — the phase's one date, directly under the title: the second thing a driver reads. */
.ghostai-event-card__when {
    margin: 0.25rem 0 0;
    font-size: 0.86rem;
    color: var(--ghostai-text, #e6ebf5);
}

.ghostai-event-card__lede {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.4rem;
    margin: 0.3rem 0 0.6rem;
    font-size: 0.86rem;
    color: var(--ghostai-text-muted, #8b95a7);
}

.ghostai-event-card__sep {
    color: var(--ghostai-border, #2b3444);
}

.ghostai-event-card__section {
    margin-top: 0.65rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--ghostai-border, #2b3444);
}

.ghostai-event-card__section-title {
    margin: 0 0 0.25rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ghostai-text-muted, #8b95a7);
}

.ghostai-event-card__scope,
.ghostai-event-card__muted {
    margin: 0 0 0.2rem;
    font-size: 0.78rem;
    color: var(--ghostai-text-muted, #8b95a7);
}

.ghostai-event-card__state {
    margin: 0 0 0.35rem;
    font-size: 0.9rem;
    font-weight: 600;
}

/* Colour is a SECOND cue only: every state also says in words what it is, so a monochrome or
   colour-blind reading loses nothing. */
.ghostai-event-card__state--ready { color: var(--ghostai-color-success, #4ade80); }
.ghostai-event-card__state--partial,
.ghostai-event-card__state--building { color: var(--ghostai-color-warning, #d9a441); }
.ghostai-event-card__state--unavailable,
.ghostai-event-card__state--unknown { color: var(--ghostai-text-muted, #8b95a7); }

.ghostai-event-card__next {
    margin: 0.35rem 0 0;
    font-size: 0.8rem;
    color: var(--ghostai-text, #e6ebf5);
}

/* U401 — mode names only; what each mode means is explained once, in .ghostai-event-help. */
.ghostai-event-card__modes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.9rem;
}

.ghostai-event-card__modes li {
    margin: 0;
}

.ghostai-event-card__mode-name {
    font-size: 0.86rem;
    font-weight: 600;
}

/* U401 — how training works, once per page, under the card list. */
.ghostai-event-help {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--ghostai-border, #2b3444);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
}

.ghostai-event-help__title {
    margin: 0;
    font-size: 0.95rem;
}

.ghostai-event-help__text {
    margin: 0;
    font-size: 0.8rem;
    color: var(--ghostai-text-muted, #8b95a7);
}

.ghostai-event-help__modes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.45rem 0.9rem;
    margin: 0.3rem 0 0;
    width: 100%;
}

.ghostai-event-help__modes > div {
    min-width: 0;
}

.ghostai-event-help__modes dt {
    font-size: 0.84rem;
    font-weight: 600;
}

.ghostai-event-help__modes dd {
    margin: 0;
    font-size: 0.78rem;
    color: var(--ghostai-text-muted, #8b95a7);
}

.ghostai-event-card__details {
    margin-top: 0.65rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--ghostai-border, #2b3444);
}

.ghostai-event-card__details > summary {
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--ghostai-color-accent, #5b9dff);
    /* A 44px touch target without moving the caret: padding, not a height. */
    padding: 0.35rem 0;
}

.ghostai-event-card__facts {
    display: grid;
    /* auto-fit, not a fixed count: one column at 390px, more when there is room, and never a
       column narrower than its content can wrap into. */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.35rem 0.9rem;
    margin: 0.4rem 0 0;
}

.ghostai-event-card__facts > div {
    min-width: 0;
}

.ghostai-event-card__facts dt {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ghostai-text-muted, #8b95a7);
    font-weight: 500;
}

.ghostai-event-card__facts dd {
    margin: 0;
    font-size: 0.84rem;
    overflow-wrap: anywhere;
}

.ghostai-event-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.ghostai-event-card__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.5rem 1rem;
    border: 1px solid var(--ghostai-color-accent, #5b9dff);
    border-radius: 8px;
    color: var(--ghostai-color-accent, #5b9dff);
    text-decoration: none;
    font-size: 0.86rem;
}

.ghostai-event-card__action:hover,
.ghostai-event-card__action:focus-visible {
    text-decoration: underline;
}

@media (max-width: 480px) {
    /* The action spans the card rather than sitting at its natural width: at 390px a right-aligned
       inline action is the element most likely to be clipped by the card's padding. */
    .ghostai-event-card__action {
        flex: 1 1 100%;
    }
}

/* #909 T16 — the Dynamic Training card's Retry action is the one action on that card that must NOT
   navigate (it re-runs the page's own reads), so it renders as a <button>. The shared
   .ghostai-training-card__action rules in ghostai-components.css set colour, border and padding but
   no background and no font: an <a> inherits both from the card and a <button> does not, so without
   this the only action a driver has during an outage renders as a grey user-agent button in the
   browser's own font. Scoped to the element so the <a> form of the same class is untouched, and
   written as individual font properties rather than the `font` shorthand, which would also reset the
   font-weight: 600 the --primary rule sets. */
button.ghostai-training-card__action {
    background: transparent;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    cursor: pointer;
    /* The same 44px touch target the event-card action keeps, so the outage CTA is reachable at 390px. */
    min-height: 44px;
}

/* G08 T14 — the Driver DNA card's own retry asks its read again in place, so it is a <button> carrying the
   shared .ghostai-card__action look. That rule sets border, background and padding for the <a> form; a
   <button> does not inherit the page font or the pointer, so both are brought back here. Individual font
   properties rather than the `font` shorthand, for the reason given above. */
button.ghostai-card__action {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    cursor: pointer;
}

/* G-UX-PREVIEW U5 — the Driver DNA card's proposed next step: a second way out of the card, under its own action.
   A class of its own, so the card's action stays the first .ghostai-card__action in it. */
.ghostai-dashboard-dna__step {
    display: inline-flex;
    align-items: center;
    gap: var(--ghostai-space-1, 0.25rem);
    min-height: var(--ghostai-touch-target, 44px);
    color: var(--ghostai-color-accent, #38bdf8);
    font-weight: 600;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.ghostai-dashboard-dna__step:hover,
.ghostai-dashboard-dna__step:focus-visible {
    text-decoration: underline;
}

/* T2003 (#4111) — what the Driver DNA card is calculated from, one line each, under its title. */
.ghostai-dashboard-dna__note {
    display: block;
    overflow-wrap: anywhere;
}

/* T2003 — the slot's calculation state, in the words /me/dna uses; a fact about the job, not a warning. */
.ghostai-dashboard-dna__updating {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bs-warning, #ffc107) 18%, transparent);
    padding: .25rem .625rem;
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.ghostai-dashboard-dna__updating--failed {
    background: color-mix(in srgb, var(--bs-danger, #dc3545) 14%, transparent);
    white-space: normal;
}

/* G-UX-PREVIEW U5 — the proposed next step under a "no Driver DNA" sentence on /me/dna and /me/dna/{dimension}:
   one sentence and one action, the action a full touch target. */
.ghostai-dna-next-step {
    min-width: 0;
    margin-block: var(--ghostai-space-3, 0.75rem);
    overflow-wrap: anywhere;
}

.ghostai-dna-next-step .btn {
    display: inline-flex;
    align-items: center;
    min-height: var(--ghostai-touch-target, 44px);
}

/* T38 — the training a published report prepared. Above the event grid, and visibly a statement rather than a
   control strip: everything in it is what the report handed over, and the only control is the confirmation. */
.ghostai-next-training {
    margin: 0 0 var(--ghostai-space-4, 1rem);
    padding: var(--ghostai-space-4, 1rem);
    border: 1px solid var(--ghostai-color-border, #24324d);
    border-radius: var(--ghostai-radius-lg, 0.75rem);
    background: var(--ghostai-color-surface, #0f172a);
}

.ghostai-next-training.is-refused { border-style: dashed; }

.ghostai-next-training__heading { margin: 0 0 var(--ghostai-space-2, 0.5rem); font-size: 1.05rem; }

.ghostai-next-training__lead {
    margin: 0 0 var(--ghostai-space-3, 0.75rem);
    max-width: 68ch;
    line-height: 1.55;
    color: var(--ghostai-color-text-secondary, #cbd5e1);
}

.ghostai-next-training__facts {
    display: grid;
    grid-template-columns: minmax(6rem, max-content) 1fr;
    gap: 0.25rem var(--ghostai-space-3, 0.75rem);
    margin: 0 0 var(--ghostai-space-3, 0.75rem);
    font-size: 0.9rem;
}

.ghostai-next-training__facts dt { color: var(--ghostai-color-text-muted, #94a3b8); }

/* The ids are read aloud and compared against a report, so they are monospaced and allowed to wrap rather
   than truncated: a build id with its middle missing is not evidence of anything. */
.ghostai-next-training__facts dd {
    margin: 0;
    font-family: var(--ghostai-font-technical);
    overflow-wrap: anywhere;
}

.ghostai-next-training__start { display: flex; flex-direction: column; gap: 0.25rem; }

/* T61 — /me/heatmaps/{trackVariantId}, and the location-repeatability block beneath it.

   This app links NO Bootstrap stylesheet. `wwwroot/css/bootstrap/bootstrap.min.css` is on disk and
   referenced by nothing (see App.razor's link list), so every Bootstrap utility in a Razor file here styles
   nothing at all. T32 found this with `table-responsive` and fixed it with `.ghostai-table-scroll` above;
   the heatmap surface hit it again, and this time the casualty was `d-block`.

   Measured at 390px on the fifteen-corner fixture, before these rules existed: the summary read
   "Unnamed corner 4b8e2a77Spread 0.18 score · typical 0.76 score · 26 laps" and the repeatability readings
   ran together into one paragraph — the "sklejony tekst" T54 photographed, reintroduced by the very block
   that was meant to replace it. A <span> with a dead `d-block` on it is an inline span.

   These are scoped classes rather than rules on the Bootstrap names, for the reason T32 gives: a rule on
   `.d-block` would silently restyle every other page that carries the same dead class, and none of those
   pages have been looked at. */

/* Each fact on its own line. The elements these land on are <span>s inside a <li> or a <dd>, so the
   platform gives them no line of their own and the text of the next one continues the sentence. */
.ghostai-heatmap__line {
    display: block;
}

/* The secondary line under a corner's name: still a full line, in the muted voice the rest of the app uses
   for a number's supporting detail. */
.ghostai-heatmap__line--muted {
    color: var(--ghostai-color-text-muted, #93a2be);
    font-size: 0.875rem;
}

/* A corner in the summary, and a corner in the full list. `list-style: none` is on the element rather than
   inherited from a dead `list-unstyled`. */
.ghostai-heatmap__corners {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ghostai-heatmap__corner {
    padding: var(--ghostai-space-2, 0.5rem) 0;
    border-top: 1px solid var(--ghostai-color-border, #24324d);
}

/* The summary's three corners are not a bordered table of anything — they are three answers. */
.ghostai-heatmap__corner--summary {
    padding: 0 0 var(--ghostai-space-2, 0.5rem);
    border-top: 0;
}

/* "few laps", beside the corner it belongs to. Inline on purpose: it qualifies the name it follows, and a
   &#160; separates it in the accessible name as well as visually. */
.ghostai-heatmap__thin {
    display: inline-block;
    padding: 0 var(--ghostai-space-2, 0.5rem);
    border: 1px solid var(--ghostai-color-border, #24324d);
    /* --ghostai-radius-xs, not --ghostai-radius-1. The theme defines xs/sm/md/lg/xl/pill and nothing numbered;
       -1 and -2 appear in this file only as references that have always fallen through to their literal. The
       4px fallback below was already the value of xs, so this changes nothing visually and puts the badge back
       inside the token set. */
    border-radius: var(--ghostai-radius-xs, 4px);
    font-size: 0.75rem;
    color: var(--ghostai-color-text-muted, #93a2be);
}

/* A served key this build could not read a corner number out of is shown by its first characters, and those
   characters must be allowed to break rather than widen the document at 390px. */
.ghostai-heatmap__id {
    overflow-wrap: anywhere;
}

/* A skip link that is silent until a keyboard reaches it.

   `visually-hidden-focusable` is Bootstrap's name for this and is dead here, so the link rendered as a plain
   visible "Skip to the heatmap" at the top of every capture — including the empty state, where there is
   nothing to skip to. Clip rather than `display: none`, because a display:none element cannot take focus and
   the link would then not exist for the keyboard either. */
.ghostai-skip-link:not(:focus):not(:active) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focused, it OVERLAYS rather than pushes. Staying absolutely positioned is the point: going back to static
   on focus would insert a box into normal flow and reflow the whole page downwards the instant a keyboard
   reached the link — the one moment the reader is trying to find where they are. */
.ghostai-skip-link:focus {
    position: absolute;
    top: var(--ghostai-space-2, 0.5rem);
    left: var(--ghostai-space-2, 0.5rem);
    z-index: var(--ghostai-z-overlay, 300);
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    padding: var(--ghostai-space-2, 0.5rem) var(--ghostai-space-3, 0.75rem);
    border-radius: var(--ghostai-radius-xs, 4px);
    background: var(--ghostai-color-surface-2, #101725);
    outline: 2px solid var(--ghostai-color-accent, #38bdf8);
    outline-offset: 2px;
}

/* ---- Reference catalog, /me/reference-laps (T142; an account-area page since #4487) ----
   Theme tokens only, so dark and light both follow html[data-theme]. The filter bar wraps to one control per row
   on a phone; every control keeps the 44px touch target and a visible focus ring. */
.ghostai-ref-catalog {
    display: grid;
    /* T136-D — a column that may shrink: the implicit `auto` track grew to the widest select option and pushed
       the page to 463 px at a 390 px viewport. */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ghostai-space-4, 1rem);
    min-width: 0;
}

.ghostai-ref-catalog__filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--ghostai-space-3, 0.75rem);
    align-items: end;
    padding: var(--ghostai-space-4, 1rem);
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-xl, 12px);
    background: var(--ghostai-color-surface);
}

.ghostai-ref-catalog__field {
    display: grid;
    gap: var(--ghostai-space-1, 0.25rem);
    min-width: 0;
}

.ghostai-ref-catalog__field--search {
    grid-column: 1 / -1;
}

.ghostai-ref-catalog__field label {
    color: var(--ghostai-color-text-secondary);
    font-size: var(--ghostai-type-small, 0.875rem);
    font-weight: 650;
}

.ghostai-ref-catalog__field input,
.ghostai-ref-catalog__field select,
.ghostai-ref-catalog__clear {
    width: 100%;
    min-height: var(--ghostai-touch-target, 44px);
    padding: 0 var(--ghostai-space-3, 0.75rem);
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-md, 8px);
    color: var(--ghostai-color-text-primary);
    background: var(--ghostai-color-input-bg);
    font: inherit;
}

.ghostai-ref-catalog__field select option {
    color: var(--ghostai-color-text-primary);
    background: var(--ghostai-color-surface);
}

.ghostai-ref-catalog__clear {
    cursor: pointer;
    font-weight: 650;
    background: transparent;
}

.ghostai-ref-catalog__field input:focus-visible,
.ghostai-ref-catalog__field select:focus-visible,
.ghostai-ref-catalog__clear:focus-visible,
.ghostai-ref-catalog__details > summary:focus-visible,
.ghostai-ref-catalog__manage > summary:focus-visible,
.ghostai-ref-catalog__link:focus-visible {
    outline: 2px solid var(--ghostai-color-accent);
    outline-offset: 2px;
}

.ghostai-ref-catalog__summary {
    margin: 0;
    color: var(--ghostai-color-text-secondary);
    font-size: var(--ghostai-type-small, 0.875rem);
}

.ghostai-ref-catalog__refreshing {
    margin-left: var(--ghostai-space-2, 0.5rem);
    color: var(--ghostai-color-text-muted);
}

.ghostai-ref-catalog__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
    gap: var(--ghostai-space-3, 0.75rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ghostai-ref-catalog__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ghostai-space-3, 0.75rem);
    min-width: 0;
    height: 100%;
    padding: var(--ghostai-space-4, 1rem);
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-xl, 12px);
    color: var(--ghostai-color-text-primary);
    background: var(--ghostai-color-surface);
}

.ghostai-ref-catalog__row--archived {
    background: var(--ghostai-color-surface-2);
}

.ghostai-ref-catalog__row-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ghostai-space-2, 0.5rem);
}

.ghostai-ref-catalog__name {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: var(--ghostai-type-h3, 1.125rem);
}

.ghostai-ref-catalog__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ghostai-space-1, 0.25rem);
}

.ghostai-ref-catalog__tag {
    display: inline-flex;
    align-items: center;
    min-height: var(--ghostai-badge-height, 1.75rem);
    padding: 0 var(--ghostai-space-2, 0.5rem);
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-pill, 999px);
    color: var(--ghostai-color-text-secondary);
    font-size: var(--ghostai-type-caption, 0.75rem);
    font-weight: 650;
}

.ghostai-ref-catalog__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--ghostai-space-2, 0.5rem) var(--ghostai-space-4, 1rem);
    margin: 0;
}

.ghostai-ref-catalog__facts dt {
    color: var(--ghostai-color-text-muted);
    font-size: var(--ghostai-type-caption, 0.75rem);
    font-weight: 650;
    text-transform: uppercase;
}

.ghostai-ref-catalog__facts dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.ghostai-ref-catalog__time {
    font-family: var(--ghostai-font-numeric);
    font-variant-numeric: tabular-nums;
}

.ghostai-ref-catalog__note,
.ghostai-ref-catalog__reason {
    margin: 0;
    font-size: var(--ghostai-type-small, 0.875rem);
    overflow-wrap: anywhere;
}

.ghostai-ref-catalog__note {
    color: var(--ghostai-color-text-secondary);
}

.ghostai-ref-catalog__reason {
    color: var(--ghostai-color-warning);
}

/* T144 — the way back to an event, and the plain link into the training selection with what it does not carry. */
.ghostai-ref-catalog__back {
    margin-bottom: var(--ghostai-space-3, 0.75rem);
}

.ghostai-ref-catalog__training {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-1, 0.25rem);
}

.ghostai-ref-catalog__details > summary,
.ghostai-ref-catalog__manage > summary {
    display: inline-flex;
    align-items: center;
    min-height: var(--ghostai-touch-target, 44px);
    color: var(--ghostai-color-accent);
    cursor: pointer;
    font-weight: 650;
}

.ghostai-ref-catalog__details[open] > summary {
    margin-bottom: var(--ghostai-space-2, 0.5rem);
}

.ghostai-ref-catalog__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--ghostai-touch-target, 44px);
    margin-left: var(--ghostai-space-2, 0.5rem);
    color: var(--ghostai-color-accent);
}

.ghostai-ref-catalog__manage {
    margin-top: var(--ghostai-space-6, 1.5rem);
    padding: 0 var(--ghostai-space-4, 1rem);
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-xl, 12px);
    background: var(--ghostai-color-surface);
}

@media (max-width: 640px) {
    .ghostai-ref-catalog__filters {
        grid-template-columns: minmax(0, 1fr);
        padding: var(--ghostai-space-3, 0.75rem);
    }
}

/* The catalog's section heading is for assistive technology only; the page title already says it visually. This app
   ships no Bootstrap utility for that, so the rule lives with the component's other styles. */
.ghostai-ref-catalog__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* T143 — the row lifecycle actions on the reference catalog. Theme tokens only, like the rest of the catalog. */
.ghostai-ref-catalog__actions,
.ghostai-ref-catalog__rename {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ghostai-space-2, 0.5rem);
}

.ghostai-ref-catalog__rename {
    width: 100%;
}

.ghostai-ref-catalog__rename label {
    color: var(--ghostai-color-text-secondary);
    font-size: var(--ghostai-type-small, 0.875rem);
    font-weight: 650;
}

.ghostai-ref-catalog__rename input {
    flex: 1 1 14rem;
    min-height: var(--ghostai-touch-target, 44px);
    padding: 0 var(--ghostai-space-3, 0.75rem);
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-md, 8px);
    color: var(--ghostai-color-text-primary);
    background: var(--ghostai-color-input-bg);
    font: inherit;
}

.ghostai-ref-catalog__rename .ghostai-ref-catalog__note {
    flex-basis: 100%;
}

.ghostai-ref-catalog__action {
    min-height: var(--ghostai-touch-target, 44px);
    padding: 0 var(--ghostai-space-3, 0.75rem);
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-md, 8px);
    color: var(--ghostai-color-text-primary);
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-weight: 650;
}

.ghostai-ref-catalog__action:disabled {
    cursor: progress;
    opacity: 0.6;
}

.ghostai-ref-catalog__action--danger {
    border-color: var(--ghostai-color-danger);
    color: var(--ghostai-color-danger);
}

.ghostai-ref-catalog__action:focus-visible,
.ghostai-ref-catalog__rename input:focus-visible {
    outline: 2px solid var(--ghostai-color-accent);
    outline-offset: 2px;
}

.ghostai-ref-catalog__refusal,
.ghostai-ref-catalog__unverified {
    display: grid;
    gap: var(--ghostai-space-2, 0.5rem);
    justify-items: start;
    padding: var(--ghostai-space-3, 0.75rem);
    border: 1px solid var(--ghostai-color-warning);
    border-radius: var(--ghostai-radius-md, 8px);
    background: var(--ghostai-color-surface);
}

.ghostai-ref-catalog__refusal p,
.ghostai-ref-catalog__refusal ul,
.ghostai-ref-catalog__unverified p {
    margin: 0;
}

.ghostai-ref-catalog__action-message {
    margin: 0 0 var(--ghostai-space-3, 0.75rem);
    padding: var(--ghostai-space-2, 0.5rem) var(--ghostai-space-3, 0.75rem);
    border-left: 3px solid var(--ghostai-color-accent);
    color: var(--ghostai-color-text-primary);
    background: var(--ghostai-color-surface);
}

.ghostai-ref-catalog__action-message--error {
    border-left-color: var(--ghostai-color-danger);
}

.ghostai-ref-catalog__action-message--success {
    border-left-color: var(--ghostai-color-success);
}

/* #2616 T85 — the language switch in the shell header. Two short links, not a select: both languages stay
   visible, so a reader who cannot read the current one still finds their own by its endonym (title/aria-label).
   Tokens only, so the light and dark skins both carry it. */
.ghostai-language-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-md);
}

.ghostai-language-switch__option {
    display: inline-grid;
    place-items: center;
    min-width: var(--ghostai-touch-target);
    min-height: calc(var(--ghostai-touch-target) - 6px);
    padding: 0 var(--ghostai-space-2);
    border-radius: var(--ghostai-radius-md);
    color: var(--ghostai-color-text-secondary);
    font-size: var(--ghostai-type-small);
    font-weight: 650;
    letter-spacing: 0.04em;
    text-decoration: none;
}

.ghostai-language-switch__option:hover,
.ghostai-language-switch__option:focus-visible {
    color: var(--ghostai-color-text-primary);
    background: var(--ghostai-color-surface-2);
}

.ghostai-language-switch__option:focus-visible {
    outline: 2px solid var(--ghostai-color-accent);
    outline-offset: 1px;
}

/* The current language is marked by more than colour: aria-current carries it for a screen reader, and the
   filled background carries it for anyone who does not read the accent as meaningful. */
.ghostai-language-switch__option--active {
    color: var(--ghostai-color-text-primary);
    background: var(--ghostai-color-surface-2);
    box-shadow: inset 0 -2px 0 var(--ghostai-color-accent);
}

/* #1924 — app.css reads eight --ghostai-* names no stylesheet defines (lap rows, the reference scope select, notes),
   so every skin drew their dark fallbacks: the Session Details lap list stayed a dark block on the light page. Under the
   light skin they alias the real tokens. Nothing is declared for dark, so the dark skin keeps exactly those fallbacks. */
html[data-theme="light"] {
    --ghostai-surface: var(--ghostai-color-surface);
    --ghostai-surface-2: var(--ghostai-color-surface-2);
    --ghostai-surface-raised: var(--ghostai-color-surface-2);
    --ghostai-border: var(--ghostai-color-border);
    --ghostai-text: var(--ghostai-color-text-primary);
    --ghostai-text-muted: var(--ghostai-color-text-muted);
    --ghostai-accent: var(--ghostai-color-accent);
    --ghostai-warning: var(--ghostai-color-warning);
}

/* #1924 — the skin switch beside the language switch: the same two-option frame, an icon per skin. The name is the
   link's accessible name and its tooltip (title), and the current skin is marked by aria-current and a filled
   background, not by colour alone. Tokens only, so it reads in the skin it switches away from. */
.ghostai-theme-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-md);
}

.ghostai-theme-switch__option {
    display: inline-grid;
    place-items: center;
    min-width: var(--ghostai-touch-target);
    min-height: calc(var(--ghostai-touch-target) - 6px);
    padding: 0 var(--ghostai-space-2);
    border-radius: var(--ghostai-radius-md);
    color: var(--ghostai-color-text-secondary);
    text-decoration: none;
}

.ghostai-theme-switch__icon {
    width: 18px;
    height: 18px;
}

.ghostai-theme-switch__option:hover,
.ghostai-theme-switch__option:focus-visible {
    color: var(--ghostai-color-text-primary);
    background: var(--ghostai-color-surface-2);
}

.ghostai-theme-switch__option:focus-visible {
    outline: 2px solid var(--ghostai-color-accent);
    outline-offset: 1px;
}

.ghostai-theme-switch__option--active {
    color: var(--ghostai-color-text-primary);
    background: var(--ghostai-color-surface-2);
    box-shadow: inset 0 -2px 0 var(--ghostai-color-accent);
}

/* T136-D — the phone header (320-430px). The shell no longer lets its actions block shrink under its content (which
   drew the PL/EN switch over the G at 375px), so what the block holds has to fit: the skin switch shows only the skin
   it switches TO — a one-tap toggle whose accessible name says which skin it turns on — and below 360px each option
   narrows to 36px. The language switch keeps both languages visible, for the reason given above. */
@media (max-width: 640px) {
    .ghostai-theme-switch__option--active {
        display: none;
    }
}

@media (max-width: 359.98px) {
    .ghostai-language-switch__option,
    .ghostai-theme-switch__option {
        min-width: 36px;
        padding: 0 var(--ghostai-space-1);
    }
}

/* Web smoke 2026-10-09 — the bell (T216) is one more 44px control in the phone header, and with it the actions block
   no longer fitted beside the menu button and the G: at 320px the profile button stood 36px past the bar's content edge
   (20px past the screen, which widened every page), at 375px 13px past it. The actions block may not shrink (see
   above), so below 400px a SIGNED-IN header — the only one that has a bell — shows the language switch the way the
   skin switch is already shown on a phone: only the language it switches TO, a one-tap toggle whose accessible name
   and tooltip are that language's own name. A signed-out visitor has no bell and keeps both languages at every
   width, so somebody who cannot read the page still finds their own before signing in. */
@media (max-width: 399.98px) {
    .ghostai-app-shell__right:has(.ghostai-bell) .ghostai-language-switch__option--active {
        display: none;
    }
}

/* #3498 T216 — the notification bell beside the skin switch. Same frame and touch target as the switches; the unread
   badge is a count, not colour alone, and the button's accessible name carries the number too. The panel drops under
   the header; on a phone (<= 480px) it spans the viewport width with an 8px margin, so it fits a 390px screen. The
   scrim closes it on an outside click; Escape closes it from the keyboard and returns focus to the bell. */
.ghostai-bell {
    position: relative;
    display: inline-flex;
}

.ghostai-bell__button {
    position: relative;
    display: inline-grid;
    place-items: center;
    min-width: var(--ghostai-touch-target);
    min-height: calc(var(--ghostai-touch-target) - 2px);
    padding: 0 var(--ghostai-space-2);
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-md);
    background: transparent;
    color: var(--ghostai-color-text-secondary);
    cursor: pointer;
}

.ghostai-bell__button:hover,
.ghostai-bell__button:focus-visible,
.ghostai-bell__button[aria-expanded="true"] {
    color: var(--ghostai-color-text-primary);
    background: var(--ghostai-color-surface-2);
}

.ghostai-bell__button:focus-visible,
.ghostai-bell__close:focus-visible,
.ghostai-bell__entry:focus-visible,
.ghostai-bell__action:focus-visible {
    outline: 2px solid var(--ghostai-color-accent);
    outline-offset: 1px;
}

.ghostai-bell__icon {
    width: 18px;
    height: 18px;
}

.ghostai-bell__badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--ghostai-color-accent);
    color: var(--ghostai-color-surface);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.ghostai-bell__scrim {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: transparent;
}

.ghostai-bell__panel {
    position: absolute;
    top: calc(100% + var(--ghostai-space-2));
    right: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    width: min(380px, calc(100vw - 16px));
    max-height: min(70vh, 560px);
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-md);
    background: var(--ghostai-color-surface);
    color: var(--ghostai-color-text-primary);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

/* #3702 — "Raport AI gotowy": the toast the bell's poll raises when a new ready report arrives. */
.ghostai-toast {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: var(--ghostai-space-3);
    max-width: calc(100vw - 32px);
    padding: var(--ghostai-space-3) var(--ghostai-space-4);
    border: 1px solid var(--ghostai-color-border);
    border-left: 4px solid var(--ghostai-color-accent);
    border-radius: var(--ghostai-radius-md);
    background: var(--ghostai-color-surface);
    color: var(--ghostai-color-text-primary);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.ghostai-toast__title {
    font-weight: 600;
}

.ghostai-toast__action {
    color: var(--ghostai-color-accent);
    font-weight: 600;
    text-decoration: none;
}

.ghostai-toast__close {
    border: 0;
    background: transparent;
    color: var(--ghostai-color-text-secondary);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

/* A page's own short message in the same toast: above the "report ready" toast when both stand, and in the error
   tone when it is an error (which stays until dismissed). */
.ghostai-toast--page {
    max-width: min(520px, calc(100vw - 32px));
}

.ghostai-toast + .ghostai-toast--page {
    bottom: 84px;
}

.ghostai-toast--page .ghostai-toast__title {
    font-weight: 500;
}

.ghostai-toast--error {
    border-left-color: var(--ghostai-color-danger, #ef4444);
}

@media (max-width: 480px) {
    .ghostai-toast {
        right: 8px;
        left: 8px;
        bottom: 8px;
    }
}

.ghostai-bell__header,
.ghostai-bell__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ghostai-space-2);
    padding: var(--ghostai-space-2) var(--ghostai-space-3, 12px);
}

.ghostai-bell__header {
    border-bottom: 1px solid var(--ghostai-color-border);
}

.ghostai-bell__footer {
    border-top: 1px solid var(--ghostai-color-border);
}

.ghostai-bell__title {
    margin: 0;
    font-size: 1rem;
}

.ghostai-bell__close {
    min-width: 36px;
    min-height: 36px;
    border: 0;
    border-radius: var(--ghostai-radius-md);
    background: transparent;
    color: inherit;
    font-size: 1.25rem;
    cursor: pointer;
}

.ghostai-bell__list {
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.ghostai-bell__item + .ghostai-bell__item {
    border-top: 1px solid var(--ghostai-color-border);
}

.ghostai-bell__entry {
    display: grid;
    gap: 2px;
    width: 100%;
    padding: var(--ghostai-space-2) var(--ghostai-space-3, 12px);
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.ghostai-bell__entry:hover {
    background: var(--ghostai-color-surface-2);
}

.ghostai-bell__item--unread .ghostai-bell__entry {
    box-shadow: inset 3px 0 0 var(--ghostai-color-accent);
}

.ghostai-bell__item--unread .ghostai-bell__entry-title {
    font-weight: 700;
}

.ghostai-bell__entry-title,
.ghostai-bell__entry-preview {
    overflow-wrap: anywhere;
}

.ghostai-bell__entry-preview,
.ghostai-bell__entry-meta,
.ghostai-bell__note {
    color: var(--ghostai-color-text-secondary);
    font-size: 0.875rem;
}

.ghostai-bell__note {
    margin: 0;
    padding: var(--ghostai-space-3, 12px);
}

.ghostai-bell__action {
    padding: var(--ghostai-space-1) var(--ghostai-space-2);
    border: 0;
    border-radius: var(--ghostai-radius-md);
    background: transparent;
    color: var(--ghostai-color-accent);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

@media (max-width: 480px) {
    .ghostai-bell__panel {
        position: fixed;
        top: calc(var(--ghostai-shell-header-height, 56px) + 4px);
        right: 8px;
        left: 8px;
        width: auto;
        max-height: calc(100vh - var(--ghostai-shell-header-height, 56px) - 16px);
    }
}

@media (max-width: 359.98px) {
    .ghostai-bell__button {
        min-width: 36px;
        padding: 0 var(--ghostai-space-1);
    }
}

/* #3498 T216 — the notification centre page. */
.ghostai-notifications__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ghostai-space-3, 12px);
    margin-bottom: var(--ghostai-space-3, 12px);
}

.ghostai-notifications__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ghostai-notifications__row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--ghostai-space-2);
    padding: var(--ghostai-space-3, 12px) 0;
    border-top: 1px solid var(--ghostai-color-border);
}

.ghostai-notifications__row--unread .ghostai-notifications__row-title {
    font-weight: 700;
}

.ghostai-notifications__row-title,
.ghostai-notifications__row-preview {
    overflow-wrap: anywhere;
}

.ghostai-notifications__row-meta,
.ghostai-notifications__row-preview {
    color: var(--ghostai-color-text-secondary);
    font-size: 0.875rem;
}

.ghostai-notifications__body {
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* #4330 — an administrator's Markdown message: its own blocks carry the line breaks. */
.ghostai-notifications__body--markdown {
    white-space: normal;
}

.ghostai-notifications__message-category {
    display: inline-block;
    margin-inline-end: var(--ghostai-space-2);
    color: var(--ghostai-color-text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ghostai-notifications__preferences {
    display: grid;
    gap: var(--ghostai-space-2);
}

.ghostai-notifications__preference {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ghostai-space-2);
}

@media (max-width: 480px) {
    .ghostai-notifications__row {
        grid-template-columns: 1fr;
    }
}


/* ── T95 (#2637) — session-analysis history tiles and the report page ───────────────────────────────────────
   Tiles: one card per analysis, wrapping into a grid. Report page: the map column sits beside the report from
   1100px and is sticky there, bounded to the viewport so it never covers the report; below that it follows the
   header in reading order and is an ordinary, non-sticky block. */
.ghostai-analysis-history__note,
.ghostai-analysis-page__muted {
    color: var(--ghostai-color-text-muted, #8a96ad);
    font-size: 0.85rem;
}

.ghostai-analysis-history__tiles {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--ghostai-space-3, 0.75rem);
}

.ghostai-analysis-history__tile {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-2, 0.5rem);
    padding: var(--ghostai-space-3, 0.75rem);
    border: 1px solid var(--ghostai-color-border, #24324d);
    border-radius: var(--ghostai-radius-md, 8px);
    background: var(--ghostai-color-surface-2, #121a2b);
    min-width: 0;
}

.ghostai-analysis-history__tile > p { margin: 0; }

.ghostai-analysis-history__state { font-weight: 600; }

.ghostai-analysis-history__tracked { font-weight: 400; color: var(--ghostai-color-text-muted, #8a96ad); }

.ghostai-analysis-history__facts,
.ghostai-analysis-page__identity,
.ghostai-analysis-page__sources dl {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.2rem var(--ghostai-space-3, 0.75rem);
    margin: 0;
}

.ghostai-analysis-history__facts dd,
.ghostai-analysis-page__identity dd,
.ghostai-analysis-page__sources dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.ghostai-analysis-history__facts code,
.ghostai-analysis-page code {
    font-family: var(--ghostai-font-technical);
    font-size: 0.8rem;
}

.ghostai-analysis-history__action { align-self: flex-start; }

.ghostai-analysis-page__report { min-width: 0; display: flex; flex-direction: column; gap: var(--ghostai-space-4, 1rem); }

.ghostai-report-page code {
    font-family: var(--ghostai-font-technical);
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

.ghostai-analysis-page__downloads { display: flex; flex-wrap: wrap; gap: var(--ghostai-space-2, 0.5rem) var(--ghostai-space-3, 0.75rem); align-items: baseline; }

.ghostai-analysis-page__newer,
.ghostai-analysis-page__target { margin: 0; }

.ghostai-analysis-page__status:empty { display: none; }

/* A wide fact table scrolls inside its own box rather than widening a phone's page (measured at 390px: +99px). */
.ghostai-analysis-page__report table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

/* On a phone a label column as wide as its longest label squeezes the values to a few characters, so the
   label goes above its value instead. */
@media (max-width: 639px) {
    .ghostai-analysis-history__facts,
    .ghostai-analysis-page__identity,
    .ghostai-analysis-page__sources dl {
        grid-template-columns: minmax(0, 1fr);
    }

    .ghostai-analysis-history__facts dt,
    .ghostai-analysis-page__identity dt,
    .ghostai-analysis-page__sources dt {
        color: var(--ghostai-color-text-muted, #8a96ad);
        font-size: 0.8rem;
    }

    .ghostai-analysis-history__facts dd + dt,
    .ghostai-analysis-page__identity dd + dt,
    .ghostai-analysis-page__sources dd + dt {
        margin-top: var(--ghostai-space-2, 0.5rem);
    }
}

/* ── T136-D — the AI report page as the approved mockup draws it (handoff 03 §C, pages/MySessions.dc.html "Raport AI")
   Full width, two columns: the conclusions on the left (flex 999 1 640px, so they take every pixel the map does not),
   the map on the right — sticky, at most 520px — which falls under the conclusions once the two no longer fit side by
   side. Every card is translucent over the brand backdrop (the backdrop's surface token exists only while one is
   drawn; the opaque surface otherwise). */
.ghostai-report-page {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24px;
    min-width: 0;
}

.ghostai-report-page__main {
    display: flex;
    flex-direction: column;
    gap: 18px;
    flex: 999 1 640px;
    min-width: 0;
}

.ghostai-report-page__aside {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 340px;
    max-width: 520px;
    min-width: 0;
    position: sticky;
    /* Below the sticky shell header: the layout publishes its measured height as --ghostai-bench-shell-top. */
    top: calc(var(--ghostai-bench-shell-top, 0px) + var(--ghostai-space-4, 1rem));
    max-height: calc(100vh - var(--ghostai-bench-shell-top, 0px) - 2 * var(--ghostai-space-4, 1rem));
    overflow-y: auto;
}

.ghostai-report-page__back {
    align-self: flex-start;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    color: var(--ghostai-color-accent, #38bdf8);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.ghostai-report-page__back:hover { color: var(--ghostai-color-text-primary, #f8fafc); }

.ghostai-report-page__back:focus-visible {
    outline: 2px solid var(--ghostai-color-accent, #38bdf8);
    outline-offset: 3px;
    border-radius: var(--ghostai-radius-sm, 6px);
}

.ghostai-report-page__head {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

/* The uppercase eyebrows: "RAPORT AI" in the accent, section headings and the map's heading muted. */
.ghostai-report-page__eyebrow,
.ghostai-report-heading,
.ghostai-report-page__aside-heading {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ghostai-color-text-muted, #94a3b8);
}

.ghostai-report-page__eyebrow { color: var(--ghostai-color-accent, #38bdf8); }

.ghostai-report-heading { font-size: 0.8125rem; }

.ghostai-report-page__aside-heading {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ghostai-report-page__title {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.2;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.ghostai-report-page__meta {
    margin: 0;
    font-size: 0.875rem;
    color: var(--ghostai-color-text-secondary, #cbd5e1);
}

/* T-UIV3-10 — the shared reference picker, then the explicit link to a new report on Session details. */
.ghostai-report-page__reports {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}

.ghostai-report-page__generate {
    font-size: 0.8125rem;
    color: var(--ghostai-color-text-secondary, #cbd5e1);
    overflow-wrap: anywhere;
}

.ghostai-report-page__reports-label {
    margin-right: 4px;
    font-size: 0.8125rem;
    color: var(--ghostai-color-text-secondary, #cbd5e1);
}

.ghostai-report-page__reports .tds-chip {
    min-height: var(--tds-input-height-md, 40px);
    max-width: 100%;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.ghostai-report-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px;
    border: 1px solid var(--ghostai-color-border, #24324d);
    border-radius: 14px;
    background: var(--ghostai-backdrop-card-surface, var(--ghostai-color-surface, #0f172a));
    min-width: 0;
}

.ghostai-report-summary { border-color: var(--ghostai-color-border-strong, #38507d); }

.ghostai-report-summary__text {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    text-wrap: pretty;
}

.ghostai-report-summary__line {
    margin: 0;
    font-size: 0.875rem;
    color: var(--ghostai-color-text-secondary, #cbd5e1);
}

.ghostai-report-summary__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ghostai-report-muted {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--ghostai-color-text-muted, #94a3b8);
}

/* R403 — the one first fix: the same card as the summary, led by the primary colour so it reads as the next step. */
.ghostai-report-priority { border-color: var(--ghostai-color-primary, #7c5cff); }

.ghostai-report-priority__what {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.ghostai-report-priority__wording {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    text-wrap: pretty;
    overflow-wrap: anywhere;
}

.ghostai-report-priority__facts {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding-left: 18px;
    font-size: 0.875rem;
    color: var(--ghostai-color-text-secondary, #cbd5e1);
    overflow-wrap: anywhere;
}

.ghostai-report-priority__check {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.ghostai-report-priority__check h3 {
    margin: 0;
    font-size: 0.875rem;
}

.ghostai-report-findings {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

/* One place: the loss in mono on the left, spanning the name, what to change and the evidence. */
.ghostai-report-finding {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 14px;
    padding: 14px 16px;
    border-radius: 12px;
}

.ghostai-report-finding__loss {
    grid-row: span 3;
    font-family: var(--ghostai-font-numeric);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    color: var(--ghostai-color-danger, #ef4444);
    white-space: nowrap;
}

.ghostai-report-finding__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.ghostai-report-finding__place {
    font-size: 1rem;
    overflow-wrap: anywhere;
}

.ghostai-report-finding__code {
    font-family: var(--ghostai-font-numeric);
    font-variant-numeric: tabular-nums;
    font-size: 0.75rem;
    color: var(--ghostai-color-text-muted, #94a3b8);
}

.ghostai-report-finding__what { overflow-wrap: anywhere; }

.ghostai-report-finding__evidence {
    grid-column: 2;
    font-size: 0.8125rem;
    color: var(--ghostai-color-text-secondary, #cbd5e1);
    overflow-wrap: anywhere;
}

.ghostai-report-plan__steps {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding-left: 20px;
}

/* provider-session-digest-v1: the provider's structured coaching under a plan step and under the summary. */
.ghostai-report-coaching {
    display: grid;
    grid-template-columns: minmax(8rem, max-content) 1fr;
    gap: 2px 12px;
    margin: 6px 0 0;
}

.ghostai-report-coaching dt {
    font-weight: 600;
}

.ghostai-report-coaching dd {
    margin: 0;
}

@media (max-width: 600px) {
    .ghostai-report-coaching {
        grid-template-columns: 1fr;
    }
}

/* provider-evidence-package-v1: what the coaching cites, and figures the model computed itself - never styled like a
   measured figure. */
.ghostai-report-basis {
    margin: 4px 0 0;
    font-size: 0.85em;
    opacity: 0.8;
}

.ghostai-report-ai-figures {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
}

.ghostai-report-ai-figure {
    border: 1px dashed #9b6fd6;
    border-radius: 6px;
    padding: 4px 8px;
    margin: 4px 0;
}

.ghostai-report-ai-figure__label {
    font-size: 0.75em;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #9b6fd6;
    margin-right: 6px;
}

.ghostai-report-ai-figure__method {
    display: block;
    font-size: 0.8em;
    opacity: 0.75;
}

.ghostai-report-plan__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Links that look like the DS buttons (a navigation is a link, not a button with a click handler). */
.ghostai-report-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tds-input-height-md, 40px);
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--ghostai-radius-md, 8px);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.ghostai-report-cta--primary {
    background: var(--ghostai-color-primary, #7c5cff);
    color: #fff;
}

.ghostai-report-cta--primary:hover { background: color-mix(in srgb, var(--ghostai-color-primary, #7c5cff) 85%, #fff); }

.ghostai-report-cta--ghost {
    color: var(--ghostai-color-text-primary, #f8fafc);
}

.ghostai-report-cta--ghost:hover {
    border-color: var(--ghostai-color-border, #24324d);
    background: var(--ghostai-color-surface-2, #131f38);
}

.ghostai-report-cta:focus-visible {
    outline: 2px solid var(--ghostai-color-accent, #38bdf8);
    outline-offset: 2px;
}

/* "Skąd te wnioski" — collapsed; everything the conclusions were read from. */
.ghostai-report-page__more { padding: 0; gap: 0; }

.ghostai-report-page__more-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--tds-input-height-md, 40px);
    padding: 12px 18px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.ghostai-report-page__more-toggle::-webkit-details-marker { display: none; }

.ghostai-report-page__more-toggle::before {
    content: "▸";
    color: var(--ghostai-color-text-muted, #94a3b8);
}

.ghostai-report-page__more[open] > .ghostai-report-page__more-toggle::before { content: "▾"; }

.ghostai-report-page__more-toggle:focus-visible {
    outline: 2px solid var(--ghostai-color-accent, #38bdf8);
    outline-offset: -2px;
    border-radius: 14px;
}

.ghostai-report-page__more-body {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-3, 0.75rem);
    padding: 0 18px 18px;
    min-width: 0;
}

.ghostai-analysis-page__technical {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-2, 0.5rem);
    padding-top: var(--ghostai-space-3, 0.75rem);
    border-top: 1px solid var(--ghostai-color-border, #24324d);
}

.ghostai-report-page__disclaimer {
    margin: 0;
    font-size: 0.75rem;
    color: var(--ghostai-color-text-muted, #94a3b8);
}

/* T-UIV3-08 (EPIC T7.4): the administrator's action bar — dashed, with the Admin badge, always for an administrator. */
.ghostai-report-admin-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ghostai-space-2);
    padding: var(--ghostai-space-2) var(--ghostai-space-3);
    border: 1px dashed color-mix(in srgb, var(--ghostai-color-primary) 55%, var(--ghostai-color-border));
    border-radius: var(--ghostai-radius-lg);
}

.ghostai-report-admin-bar__note {
    flex: 1 1 260px;
    font-size: var(--ghostai-type-small);
    color: var(--ghostai-color-text-secondary);
}

.ghostai-report-admin-bar__action {
    display: inline-flex;
    align-items: center;
    min-height: var(--tds-input-height-md, 36px);
    padding: 0 var(--ghostai-space-3);
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-md);
    font-size: var(--ghostai-type-small);
    color: var(--ghostai-color-text-primary);
    text-decoration: none;
}

.ghostai-report-admin-bar__action:hover { border-color: var(--ghostai-color-border-strong); }
.ghostai-report-admin-bar__action:focus-visible { outline: none; box-shadow: var(--ghostai-shadow-focus); }

.ghostai-report-page__map-slot {
    padding: 8px;
    border: 1px solid var(--ghostai-color-border, #24324d);
    border-radius: 12px;
    background: var(--ghostai-color-bg, #0b1020);
    min-width: 0;
}

.ghostai-report-page__map-slot:empty { display: none; }

.ghostai-report-page__places {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ghostai-report-page__places > li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 8px;
    font-size: 0.8125rem;
}

.ghostai-report-page__places .ghostai-report-muted { grid-column: 2; font-size: 0.75rem; }

.ghostai-report-page__place-code {
    grid-row: span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ghostai-color-danger, #ef4444) 22%, transparent);
    color: var(--ghostai-color-text-primary, #f8fafc);
    font-family: var(--ghostai-font-numeric);
    font-variant-numeric: tabular-nums;
    font-size: 0.75rem;
    font-weight: 700;
}

.ghostai-report-page__places > li[data-loss-rank=""] .ghostai-report-page__place-code,
.ghostai-report-page__places > li:not([data-loss-rank]) .ghostai-report-page__place-code {
    background: var(--ghostai-color-surface-2, #131f38);
}

.ghostai-report-page__place-name { font-weight: 600; overflow-wrap: anywhere; }

/* Below the two-column width the map is an ordinary block under the conclusions: no sticky, no own scroll. */
@media (max-width: 1023.98px) {
    .ghostai-report-page__aside {
        position: static;
        max-height: none;
        overflow: visible;
        max-width: none;
    }
}

@media (max-width: 640px) {
    .ghostai-report-card { padding: 14px; }
    .ghostai-report-page__title { font-size: 1.35rem; }
    .ghostai-report-page__more-body { padding: 0 14px 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .ghostai-report-cta { transition: none; }
}

/* ── T136-D — the AI report in Session Details: one compact card, the full report collapsed under it ─────────────
   Measured on the owner's session 2e510b34 before this block: 114,830 px of page on a desktop and 294,744 px at
   375 px, with the document 949 px wide on the phone. Two causes, two rules below:
   (1) the full report was rendered inline — it is now a collapsed <details> under a summary card;
   (2) the report's tables and its evidence-id strings had no box of their own — every table now scrolls inside
       .ghostai-analysis-report__scroll and long tokens (ids, hashes) break anywhere rather than widen the page. */
.ghostai-analyze,
.ghostai-analysis-summary,
.ghostai-analysis-summary__full,
.ghostai-analysis-summary__full-body,
.ghostai-analysis-report,
.ghostai-analysis-report > section {
    min-width: 0;
    max-width: 100%;
}

.ghostai-analysis-summary {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-3, 0.75rem);
    padding: var(--ghostai-space-4, 1rem);
    border: 1px solid var(--ghostai-color-border, #24324d);
    border-radius: var(--ghostai-radius-md, 8px);
    background: var(--ghostai-color-surface-2, #121a2b);
    overflow-wrap: anywhere;
}

.ghostai-analysis-summary__title,
.ghostai-analysis-summary__subheading {
    margin: 0;
    font-size: 1rem;
}

.ghostai-analysis-summary__subheading {
    font-size: 0.9rem;
    color: var(--ghostai-color-text-secondary, #c4cedf);
    margin-bottom: var(--ghostai-space-2, 0.5rem);
}

.ghostai-analysis-summary__status {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--ghostai-space-1, 0.25rem) var(--ghostai-space-3, 0.75rem);
    margin: var(--ghostai-space-1, 0.25rem) 0 0;
    font-size: 0.85rem;
    color: var(--ghostai-color-text-muted, #8a96ad);
}

.ghostai-analysis-summary__badge {
    padding: 0 var(--ghostai-space-2, 0.5rem);
    border: 1px solid var(--ghostai-color-success, #22c55e);
    border-radius: var(--ghostai-radius-sm, 4px);
    color: var(--ghostai-color-text-primary, #e6edf3);
}

.ghostai-analysis-summary__badge--warning { border-color: var(--ghostai-color-warning, #f59e0b); }

.ghostai-analysis-summary__kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    gap: var(--ghostai-space-3, 0.75rem);
    margin: 0;
}

.ghostai-analysis-summary__kpis dt {
    font-size: 0.8rem;
    color: var(--ghostai-color-text-muted, #8a96ad);
}

.ghostai-analysis-summary__kpis dd {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ghostai-analysis-summary__windows {
    margin: 0;
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-1, 0.25rem);
}

.ghostai-analysis-summary__windows li::marker { color: var(--ghostai-color-text-muted, #8a96ad); }

.ghostai-analysis-summary__windows li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 var(--ghostai-space-3, 0.75rem);
}

.ghostai-analysis-summary__value { font-variant-numeric: tabular-nums; font-weight: 600; }

.ghostai-analysis-summary__recommendation,
.ghostai-analysis-summary__muted { margin: 0; }

.ghostai-analysis-summary__muted { color: var(--ghostai-color-text-muted, #8a96ad); font-size: 0.85rem; }

.ghostai-analysis-summary__actions .ghostai-analyze__downloads {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ghostai-space-2, 0.5rem) var(--ghostai-space-4, 1rem);
}

.ghostai-analysis-summary__full {
    border-top: 1px solid var(--ghostai-color-border, #24324d);
    padding-top: var(--ghostai-space-2, 0.5rem);
}

/* 44 px: the same touch target the other Session Details disclosures use. */
.ghostai-analysis-summary__toggle {
    cursor: pointer;
    min-height: 44px;
    display: flex;
    align-items: center;
    color: var(--ghostai-color-accent, #38bdf8);
    font-weight: 600;
}

.ghostai-analysis-summary__toggle:focus-visible {
    outline: 2px solid var(--ghostai-color-accent, #38bdf8);
    outline-offset: 3px;
}

.ghostai-analysis-summary__toggle-hide,
.ghostai-analysis-summary__full[open] .ghostai-analysis-summary__toggle-show { display: none; }

.ghostai-analysis-summary__full[open] .ghostai-analysis-summary__toggle-hide { display: inline; }

.ghostai-analysis-summary__full[open] > .ghostai-analysis-summary__full-body { margin-top: var(--ghostai-space-3, 0.75rem); }

/* T136-D — on the report page's "Skąd te wnioski" every wall of rows is its own collapsed disclosure, its size in the
   summary, so opening the evidence does not open 200,000 px of it. */
.ghostai-analysis-report__fold {
    border: 1px solid var(--ghostai-color-border, #24324d);
    border-radius: var(--ghostai-radius-md, 8px);
    padding: 0 var(--ghostai-space-3, 0.75rem);
    min-width: 0;
}

.ghostai-analysis-report__fold-toggle {
    min-height: var(--tds-input-height-md, 40px);
    display: flex;
    align-items: center;
    font-weight: 600;
    cursor: pointer;
}

.ghostai-analysis-report__fold-toggle:focus-visible {
    outline: 2px solid var(--ghostai-color-accent, #38bdf8);
    outline-offset: 2px;
}

.ghostai-analysis-report__fold[open] {
    padding-bottom: var(--ghostai-space-3, 0.75rem);
}

/* Every table of the report scrolls sideways inside its own named, focusable box — never the document. */
.ghostai-analysis-report__scroll {
    max-width: 100%;
    overflow-x: auto;
}

.ghostai-analysis-report__scroll:focus-visible {
    outline: 2px solid var(--ghostai-color-accent, #38bdf8);
    outline-offset: 2px;
}

.ghostai-analysis-report__table {
    border-collapse: collapse;
    font-size: 0.85rem;
}

.ghostai-analysis-report__table caption {
    caption-side: top;
    text-align: left;
    color: var(--ghostai-color-text-muted, #8a96ad);
    font-size: 0.8rem;
}

.ghostai-analysis-report__table th,
.ghostai-analysis-report__table td {
    padding: 0.2rem var(--ghostai-space-3, 0.75rem) 0.2rem 0;
    text-align: left;
    vertical-align: top;
}

/* Evidence ids, report ids and hashes are single long tokens: they break anywhere rather than widen the page. */
.ghostai-analysis-report__quality,
.ghostai-analysis-report__codes,
.ghostai-analysis-report__headline-reference,
.ghostai-analysis-report__subject dd,
.ghostai-analysis-report__table td,
.ghostai-analysis-report__evidence li {
    overflow-wrap: anywhere;
}

.ghostai-analysis-report__quality {
    display: block;
    font-size: 0.8rem;
    color: var(--ghostai-color-text-muted, #8a96ad);
}

/* ── T136-D — Session Details laid out as the owner's design handoff (03 §B, MySessions.dc "Szczegóły") ─────────────
   Header, then row 1 in three columns (left ≤ 520px, middle widest, right) that do not stretch their cards
   (align-items:flex-start), then the corner grid, the always-open telemetry and the collapsed deep dive. Cards are the
   handoff's rounded dark cards; with the brand backdrop on they take the translucent card surface, so the mark shows
   through them (06-brand.md). Tokens only; every width can shrink, so 390px never scrolls sideways. */
.ghostai-sd {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.ghostai-sd__back {
    align-self: flex-start;
    font: 600 13px/1 var(--ghostai-font-sans);
    color: var(--ghostai-color-accent, #38bdf8);
    text-decoration: none;
}

.ghostai-sd__back:hover { color: var(--ghostai-color-text-primary, #f8fafc); }

.ghostai-sd__head {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    justify-content: space-between;
    min-width: 0;
}

.ghostai-sd__heading { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 320px; }
/* The header's one-line row (TelemetryFoldRow) is the head's flex item now, holding the heading. */
.ghostai-sd__head > .tds-foldrow { flex: 1 1 320px; min-width: 0; }

.ghostai-sd__eyebrow,
.ghostai-sd-eyebrow {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 750 11px/1.2 var(--ghostai-font-sans);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ghostai-color-text-muted, #8a96ad);
}

h2.ghostai-sd-eyebrow { font-size: 13px; }

/* Design canvas (2026-10-30 whole-page review): a first-row card is headed by a title in sentence case
   ("Gdzie tracisz najwięcej", "Mapa strat", "Raport AI"), not a small uppercase label. */
.ghostai-sd-slot h2.ghostai-sd-eyebrow,
.ghostai-sd-slot .ghostai-place-map__title,
.ghostai-sd-losses__head h2.ghostai-sd-eyebrow,
.ghostai-sd [data-testid=sd-segments] .ghostai-segment-grid__title,
.ghostai-sd-bench > h2.ghostai-sd-eyebrow {
    font: 750 17px/1.25 var(--ghostai-font-sans);
    letter-spacing: 0;
    text-transform: none;
    color: var(--ghostai-color-text-primary);
}

.ghostai-sd__title {
    margin: 0;
    font: 800 1.6rem/1.15 var(--ghostai-font-sans);
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.ghostai-sd__meta {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    font-size: 14px;
    color: var(--ghostai-color-text-secondary, #cbd5e1);
}

.ghostai-sd__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* "Trenuj dalej" is the header's primary action (a GuardedAction link when it is allowed). */
.ghostai-sd__actions .tds-guarded-action--link {
    display: inline-flex;
    align-items: center;
    min-height: var(--tds-input-height-md, 40px);
    padding: 0 16px;
    border-radius: var(--tds-radius-sm, 8px);
    background: var(--ghostai-color-primary, #6d5dfc);
    color: #fff;
    font: 600 14px/1 var(--ghostai-font-sans);
    text-decoration: none;
}

.ghostai-sd__actions .tds-guarded-action--link:hover,
.ghostai-sd__actions .tds-guarded-action--link:focus-visible { filter: brightness(1.1); }

.ghostai-sd-note {
    margin: 0;
    font-size: 13px;
    color: var(--ghostai-color-text-secondary, #cbd5e1);
}

/* "Więcej ▾": a native disclosure, so it works without script and closes with the page's Escape handling. */
.ghostai-sd-more { position: relative; }

.ghostai-sd-more__button {
    list-style: none;
    display: inline-flex;
    align-items: center;
    min-height: var(--tds-input-height-md, 40px);
    padding: 0 14px;
    border-radius: var(--tds-radius-sm, 8px);
    border: 1px solid var(--ghostai-color-border-strong, #334155);
    color: var(--ghostai-color-text-primary, #f8fafc);
    font: 600 14px/1 var(--ghostai-font-sans);
    cursor: pointer;
}

.ghostai-sd-more__button::-webkit-details-marker { display: none; }
.ghostai-sd-more__button:focus-visible { outline: 2px solid var(--ghostai-color-accent, #38bdf8); outline-offset: 2px; }

.ghostai-sd-more__menu {
    position: absolute;
    right: 0;
    z-index: 30;
    min-width: 240px;
    max-width: min(320px, calc(100vw - 32px));
    margin: 6px 0 0;
    padding: 6px;
    list-style: none;
    border-radius: 10px;
    border: 1px solid var(--ghostai-color-border, #24324d);
    background: var(--ghostai-color-surface, #131a2e);
    box-shadow: var(--ghostai-shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.35));
}

.ghostai-sd-more__menu a {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0 10px;
    border-radius: 6px;
    color: var(--ghostai-color-text-primary, #f8fafc);
    text-decoration: none;
    font-size: 14px;
}

.ghostai-sd-more__menu a:hover,
.ghostai-sd-more__menu a:focus-visible { background: var(--ghostai-color-surface-2, #1b2540); }

.ghostai-sd__contents { display: contents; }

/* #4486 — the page's sections are widgets of the arrangeable grid (TelemetryEditableGrid): the layout stored for this
   device and resolution class places them, or the default, which is today's page (Web 1K at 1k, Web-Wide at 2k and
   4k; one column on a phone and a tablet). The grid owns the columns and rows; this sheet keeps the page's gap and
   lets each card keep its own height, as the old columns did (align-items: start). */
.ghostai-sd__layout .tds-editable-grid__canvas,
.ghostai-sd__layout .tds-editable-grid__narrow,
.ghostai-sd__layout .tds-editable-grid__block,
.ghostai-sd__layout .tds-editable-grid__stack { gap: 16px; }
.ghostai-sd__layout .tds-editable-grid__canvas { align-items: start; }
/* Column stacks (owner, 2026-11-08): the page is split into columns and each column stacks its own cards, so "Jak
   poszło" is followed at once by "Gdzie tracisz" however tall the map beside it is. The stacks canvas is a column of
   blocks, each as wide as the page: align-items: start (above, for the row grid) would shrink them to their content. */
.ghostai-sd__layout .tds-editable-grid__canvas--stacks { align-items: stretch; }
.ghostai-sd__layout-actions { display: flex; justify-content: flex-end; gap: 8px; }
.ghostai-sd__layout-message { margin: 0; }

.ghostai-sd-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 16px;
    border-radius: 14px;
    border: 1px solid var(--ghostai-color-border, #24324d);
    background: var(--ghostai-backdrop-card-surface, var(--ghostai-color-surface, #131a2e));
}

.ghostai-sd-card--strong { border-color: var(--ghostai-color-border-strong, #334155); }
.ghostai-sd-card--compact { padding: 12px; gap: 8px; }

.ghostai-sd-card__head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
    justify-content: space-between;
}

.ghostai-sd-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--ghostai-color-accent, #38bdf8);
    text-decoration: none;
}

.ghostai-sd-muted {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ghostai-color-text-muted, #8a96ad);
}

.ghostai-sd-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ghostai-color-text-secondary, #cbd5e1);
}

.ghostai-sd-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--ghostai-color-border, #24324d);
    min-width: 0;
}

.ghostai-sd-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 750 11px/1.2 var(--ghostai-font-sans);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ghostai-color-text-muted, #8a96ad);
}

.ghostai-sd-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    min-width: 0;
}

.ghostai-sd-chips .tds-chip { max-width: 100%; white-space: normal; text-align: left; }

/* Design canvas (2026-10-21, TelemetryPanel) — a segmented control: one rail, the chosen segment filled. Each segment
   is still the chip's own button (aria-pressed), so nothing changes for the keyboard or a screen reader. */
.ghostai-sd-segmented {
    flex-wrap: nowrap;
    gap: 2px;
    padding: 3px;
    border-radius: 11px;
    border: 1px solid var(--ghostai-color-border, #24324d);
    background: var(--ghostai-color-surface, #131a2e);
}
.ghostai-sd-segmented > span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.ghostai-sd-segmented .tds-chip {
    min-height: 36px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    white-space: nowrap;
    text-align: center;
}
.ghostai-sd-segmented .tds-chip--selected {
    background: color-mix(in srgb, var(--ghostai-color-accent, #38bdf8) 18%, transparent);
    color: var(--ghostai-color-accent, #38bdf8);
}

.ghostai-sd-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

/* Owner, 2026-10-12 — the way back to the training target stands alone under the chips (its sentence is a tooltip). */
.ghostai-sd-compare-manual .ghostai-sd-linkbutton { margin-left: 0; }

.ghostai-sd-linkbutton {
    margin-left: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ghostai-color-accent, #38bdf8);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.ghostai-sd-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tds-input-height-md, 40px);
    padding: 0 16px;
    border-radius: var(--tds-radius-sm, 8px);
    font: 600 14px/1 var(--ghostai-font-sans);
    text-decoration: none;
    cursor: pointer;
}

.ghostai-sd-button--secondary {
    border: 1px solid var(--ghostai-color-border-strong, #334155);
    color: var(--ghostai-color-text-primary, #f8fafc);
    background: transparent;
}

.ghostai-sd-button--secondary:hover,
.ghostai-sd-button--secondary:focus-visible { border-color: var(--ghostai-color-accent, #38bdf8); }

/* AI report tiles side by side, never one per line. */
.ghostai-sd-reports {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
    gap: 8px;
}

/* G-UX-PREVIEW U5 — a "new report" refused by a limit: the shared preview frame, between the tiles and the action. */
.ghostai-sd-reports__limit {
    min-width: 0;
    margin-block: 8px;
}

/* Achievements: small tiles. */
.ghostai-sd-achievements {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ghostai-sd-achievement {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px;
    border-radius: 10px;
    border: 1px solid var(--ghostai-color-border, #24324d);
    background: color-mix(in srgb, var(--ghostai-color-bg, #0b1020) 62%, transparent);
    min-width: 0;
}

.ghostai-sd-achievement__star {
    width: 28px;
    height: 28px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ghostai-color-warning, #f59e0b) 18%, transparent);
    color: var(--ghostai-color-warning, #f59e0b);
    font-weight: 800;
}

.ghostai-sd-achievement__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.ghostai-sd-achievement__text span { font-size: 12px; color: var(--ghostai-color-text-secondary, #cbd5e1); }
.ghostai-sd-achievement__title { font-weight: 700; color: var(--ghostai-color-text-primary, #e6edf3); }

/* The place under the tiles: an anchor a row-1 choice scrolls to, with room under the sticky header. */
.ghostai-sd-place { display: flex; flex-direction: column; gap: 8px; min-width: 0; scroll-margin-top: var(--ghostai-shell-header-offset, 72px); }
.ghostai-sd-place:empty { display: none; }
/* #3560 C10 — the views of a place: the switch above the loss map (the corner panel draws it in its own row). */
.ghostai-sd-place-view { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

/* Rows 2 and 4 are sections without a card of their own: the grid and the accordion are the surface. */
.ghostai-sd-section { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.ghostai-sd-section .ghostai-segment-grid__tile:not(.ghostai-segment-grid__tile--selected) {
    background: var(--ghostai-backdrop-card-surface, var(--ghostai-color-surface, #131a2e));
}

/* Row 3 — the telemetry, always open, under one sticky bar. */
.ghostai-sd-bench { border-color: var(--ghostai-color-border-strong, #334155); }

/* Keep the localized administrator note intact when the lap heading fills a phone row. */
.ghostai-sd-bench > .ghostai-sd-eyebrow { flex-wrap: wrap; }

.ghostai-sd-benchbar {
    position: sticky;
    top: var(--ghostai-shell-header-height, 56px);
    z-index: 6;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding: 8px 0;
    background: var(--ghostai-color-surface, #131a2e);
    border-bottom: 1px solid var(--ghostai-color-border, #24324d);
    min-width: 0;
}

/* One frame bar: the workspace's own scrub bar is replaced by the sticky bar's (the same cursor, the same pin). */
.ghostai-sd-bench .tel-ws__scrubbar { display: none; }

/* One Values / Difference toggle: the strip's own pair is replaced by the bar's. */
.ghostai-sd-bench .tel-strip__modes { display: none; }

.ghostai-sd-framebar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-left: auto;
    padding: 4px 8px;
    border-radius: 10px;
    border: 1px solid var(--ghostai-color-border, #24324d);
    background: var(--ghostai-color-bg, #0b1020);
    min-width: 0;
}

.ghostai-sd-framebar--pinned { border-color: var(--ghostai-color-accent, #38bdf8); }

.ghostai-sd-framebar__readout {
    font: 600 13px/1.3 var(--ghostai-font-numeric);
    font-variant-numeric: tabular-nums;
    color: var(--ghostai-color-text-primary, #f8fafc);
    overflow-wrap: anywhere;
}

.ghostai-sd-framebar__step,
.ghostai-sd-framebar__action {
    /* T136-D — the WCAG 2.5.5 target the workspace's own scrub bar keeps (.tel-ws__scrub-btn, T80): this bar REPLACES
       it on Session Details, so its ways out of a pin (Unpin, Clear) and its steps may not be smaller. */
    min-width: 44px;
    min-height: 44px;
    padding: 0 10px;
    border-radius: 6px;
    border: 1px solid var(--ghostai-color-border, #24324d);
    background: transparent;
    color: var(--ghostai-color-text-primary, #f8fafc);
    font: 600 13px/1 var(--ghostai-font-sans);
    cursor: pointer;
}

.ghostai-sd-framebar__step:disabled { opacity: 0.45; cursor: not-allowed; }

.ghostai-sd-framebar__pinned {
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ghostai-color-accent, #38bdf8) 18%, transparent);
    color: var(--ghostai-color-accent, #38bdf8);
    font: 700 11px/1.3 var(--ghostai-font-sans);
}

/* Design canvas (2026-10-21, "Pakiety — wspólny wzór"): a plan card has one way on, "Porównaj pakiety", drawn the
   same everywhere on the page — a filled plan-violet button (the AI report card, Track & car, Body and wheels). */
.ghostai-sd .ghostai-feature-preview__upgrade,
.ghostai-sd .sd-lab-locked .sd-lab-locked__action,
.ghostai-sd .tel25-body__upgrade {
    min-height: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: 10px;
    background: var(--ghostai-color-primary);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

.ghostai-sd .ghostai-feature-preview__upgrade:hover,
.ghostai-sd .sd-lab-locked .sd-lab-locked__action:hover,
.ghostai-sd .tel25-body__upgrade:hover { filter: brightness(1.1); }

/* Design canvas (2026-10-21, "SessionMore") — "Więcej o sesji" is a TelemetryFoldGroup of TelemetryFoldSections (one
   column on a phone held upright, two from a phone on its side up); an administrator's framed group or a panel takes
   the whole row, and a section's body keeps the fold's own padding. */
@media (min-width: 760.02px) {
    .ghostai-sd-deep .tds-foldgroup__list > :not(.tds-foldsection) { grid-column: 1 / -1; }
}

.ghostai-sd-deep .tds-foldsection .ghostai-sd-deep__body { padding: 12px 0 0; }
.ghostai-sd-deep [data-admin-only=true] > .tds-foldsection + .tds-foldsection,
.ghostai-sd-deep [data-admin-only=true] > .tds-foldsection + details { margin-top: 8px; }

/* Row 4 — the deep dive: native disclosures, collapsed (the administrator's panels that keep their own). */
.ghostai-sd-deep__item {
    border-radius: 12px;
    border: 1px solid var(--ghostai-color-border, #24324d);
    background: var(--ghostai-backdrop-card-surface, var(--ghostai-color-surface, #131a2e));
    min-width: 0;
}

.ghostai-sd-deep__item > summary {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 16px;
    font-weight: 600;
    cursor: pointer;
}

.ghostai-sd-deep__item > summary:focus-visible { outline: 2px solid var(--ghostai-color-accent, #38bdf8); outline-offset: -2px; }
.ghostai-sd-deep__item[open] > summary { border-bottom: 1px solid var(--ghostai-color-border, #24324d); }

.ghostai-sd-deep__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    min-width: 0;
    overflow-x: auto;
}

@media (max-width: 760px) {
    .ghostai-sd__title { font-size: 1.3rem; }
    /* The whole bench bar (lap picker, view and series chips, frame bar) is too tall to stick on a phone, but the frame
       bar alone must stay reachable while the driver reads the bottom chart: its ◄ ► and Unpin are the way out of a
       pin. `display: contents` lifts the bar's items into the bench card, so the frame bar can stick for the whole
       card (a sticky child of the static bench bar could only stick inside that bar). v3's "Narrowed to" row between
       the bar and the charts pushed a static bar under the shell header at 390 px (web smoke after #2928). */
    .ghostai-sd-benchbar { display: contents; }
    .ghostai-sd-benchbar > .ghostai-sd-framebar {
        position: sticky;
        top: var(--ghostai-shell-header-height, 56px);
        z-index: 6;
    }
    .ghostai-sd-framebar { margin-left: 0; }
    .ghostai-sd-more__menu { right: auto; left: 0; }
}

/* ── Session Details on a phone and a tablet (owner's design canvas "Szczegóły sesji — redesign", 2026-10-21) ───────
   The desktop's three columns kept the map and an achievements card above the results, so on a phone "Gdzie tracisz
   najwięcej" sat four screens down. #4486 — a phone and a tablet draw the layout's widgets in one column in its narrow
   order, which is the phone's: what happened, where the time went, then the map, the AI report and what to train
   (SessionDetailsWebLayoutDefaults). On a phone "Trenuj dalej" is pinned to the bottom of the screen. An achievements
   card with nothing unlocked is not shown below 1280px, and "Przelicz sesję" (a maintenance action) moves to the end
   of the page. */
@media (max-width: 1279.98px) {
    .ghostai-sd__layout [data-widget-id=achievements]:has([data-testid=session-achievements-empty]) { display: none; }
}

@media (max-width: 760px) {
    /* The page's primary action stays within reach of the thumb; the page leaves room for it at the bottom, below the
       site footer too, so the bar never covers the footer's links. */
    body:has(.ghostai-sd__train-next) { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
    .ghostai-sd__train-next {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 20;
        display: flex;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--ghostai-color-border, #24324d);
        background: var(--ghostai-color-surface, #131a2e);
    }
    .ghostai-sd__train-next > * { flex: 1 1 auto; min-width: 0; }
    /* Design canvas (2026-10-30): one full-width violet button, as the canvas's bottom bar — the guarded action's
       wrappers stretch with it. */
    .ghostai-sd__train-next .tds-guarded-action,
    .ghostai-sd__train-next .tds-tooltip { display: flex; flex: 1 1 auto; width: 100%; min-width: 0; }
    .ghostai-sd__train-next .tds-tooltip > button.rz-button.tds-btn:not([disabled]) {
        border-radius: 14px;
        border-color: #7c6cff;
        background: #7c6cff;
        color: #ffffff;
        font-weight: 700;
    }
    .ghostai-sd__train-next .tds-guarded-action--link,
    .ghostai-sd__train-next button {
        width: 100%;
        min-height: 48px;
        justify-content: center;
    }
}

/* Design canvas (2026-10-21) — a phone's page bar (‹ · "Suzuka · Round 2" · ⋮). "⋮" opens the header's actions under
   it; closed, only "Trenuj dalej" stays (pinned upright, in the header on its side). Not shown on larger screens. */
.ghostai-sd__bar { display: none; }

@media (max-width: 760px), (max-width: 1000px) and (max-height: 500px) {
    .ghostai-sd__back { display: none; }
    .ghostai-sd__bar {
        display: flex;
        align-items: center;
        gap: 4px;
        min-height: 48px;
        margin: -6px 0 -6px -8px;
    }
    .ghostai-sd__bar-back,
    .ghostai-sd__bar-more {
        flex: none;
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: var(--ghostai-color-text-primary, #f8fafc);
        font: 600 24px/1 var(--ghostai-font-sans);
        text-decoration: none;
        cursor: pointer;
    }
    .ghostai-sd__bar-more { margin-left: auto; }
    .ghostai-sd__bar-back:focus-visible,
    .ghostai-sd__bar-more:focus-visible { outline: 2px solid var(--ghostai-color-accent, #38bdf8); outline-offset: 2px; }
    .ghostai-sd__bar-title {
        flex: 1;
        min-width: 0;
        font: 600 16px/1.2 var(--ghostai-font-sans);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .ghostai-sd__actions:not(.is-open) > :not(.ghostai-sd__train-next) { display: none; }
    .ghostai-sd__actions.is-open {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        padding: 8px;
        border-radius: 14px;
        border: 1px solid var(--ghostai-color-border, #24324d);
        background: var(--ghostai-color-surface, #131a2e);
    }
}

/* Design canvas (2026-10-21, "Pachołek"): "Trening · n" — upright, the phone's bottom bar ("Trenuj…") is the way in, so
   the page bar does not repeat it; on its side the page bar's "Trening · n" replaces the header's "Trenuj…". */
@media (max-width: 760px) {
    .ghostai-sd__bar [data-testid=training-corner-train-count] { display: none; }
}

@media (min-width: 760.02px) and (max-width: 1000px) and (max-height: 500px) {
    .ghostai-sd__actions > .ghostai-sd__train-next { display: none; }
}

/* Design canvas (2026-10-30, "Zmień okrążenie i porównanie") — which lap and what it is compared with (V2Choosers).
   Phone and tablet (< 1280 px): a bar "Okrążenie · porównanie … Zmień" that unfolds a panel in place — laps on the left
   (quick choices, "Wszystkie okrążenia (n)" unfolds the rows), "Porównuję z" on the right as one-choice rows, "Gotowe".
   Web 1K (1280–1919 px): no bar; the choices stand in one strip, "Wszystkie okrążenia" unfolds a grid of laps.
   Web 2K/4K (≥ 1920 px): a compact "lap · comparison · Zmień" at the right opens the panel as a drop-down. */
.ghostai-sd-choose { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ghostai-sd-choose__title {
    margin: 0;
    font: 700 12px/1.3 var(--ghostai-font-sans);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ghostai-color-text-secondary, #a3aecb);
}
.ghostai-sd-choosebar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 4px 4px 14px;
    min-height: 52px;
    box-sizing: border-box;
    border-radius: 14px;
    border: 1px solid var(--ghostai-color-border, #24324d);
    background: var(--ghostai-color-surface-2, #1b2540);
}
.ghostai-sd-choose:has(.ghostai-sd-choosers.is-open) .ghostai-sd-choosebar { border-color: var(--ghostai-color-accent, #38bdf8); }
.ghostai-sd-choosebar__text { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; row-gap: 2px; flex: 1 1 auto; min-width: 0; }
.ghostai-sd-choosebar__label { flex-basis: 100%; font-size: 12px; color: var(--ghostai-color-text-secondary, #cbd5e1); }
.ghostai-sd-choosebar__lap { font: 600 14px/1.3 var(--ghostai-font-sans); color: var(--ghostai-color-text-primary, #f8fafc); }
.ghostai-sd-choosebar__against {
    font: 600 14px/1.3 var(--ghostai-font-sans);
    color: var(--ghostai-color-text-primary, #f8fafc);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ghostai-sd-choosebar__toggle,
.ghostai-sd-choosers__done {
    flex: none;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 10px;
    border: 1px solid var(--ghostai-color-border-strong, #334155);
    background: var(--ghostai-color-surface, #131a2e);
    color: var(--ghostai-color-text-primary, #f8fafc);
    font: 600 14px/1 var(--ghostai-font-sans);
    cursor: pointer;
}
.ghostai-sd-choosebar__toggle[aria-expanded="true"] {
    border-color: var(--ghostai-color-accent, #38bdf8);
    color: var(--ghostai-color-accent, #38bdf8);
    background: color-mix(in srgb, var(--ghostai-color-accent, #38bdf8) 14%, transparent);
}
.ghostai-sd-choosers__done { border: 0; background: var(--ghostai-color-accent, #38bdf8); color: var(--ghostai-color-surface, #131a2e); font-weight: 700; padding: 0 22px; }
.ghostai-sd-choosebar__toggle:focus-visible,
.ghostai-sd-choosers__done:focus-visible { outline: 2px solid var(--ghostai-color-accent, #38bdf8); outline-offset: 2px; }

.ghostai-sd-choosers {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid var(--ghostai-color-accent, #38bdf8);
    background: var(--ghostai-color-surface, #131a2e);
}
.ghostai-sd-choosers:not(.is-open) { display: none; }
.ghostai-sd-choosers__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; min-width: 0; }
.ghostai-sd-choosers__cols > .ghostai-sd-block { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding-top: 0; border-top: 0; }
.ghostai-sd-choosers__footer { display: flex; justify-content: flex-end; padding-top: 12px; border-top: 1px solid var(--ghostai-color-border, #24324d); }

.ghostai-sd-lapchoose { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ghostai-sd-lapchoose__quick { display: flex; flex-wrap: wrap; gap: 8px; }
.ghostai-sd-choosechip {
    min-height: 44px;
    padding: 0 14px;
    border-radius: 22px;
    border: 1px solid var(--ghostai-color-border, #24324d);
    background: transparent;
    color: var(--ghostai-color-text-secondary, #cbd5e1);
    font: 600 13px/1.2 var(--ghostai-font-sans);
    white-space: nowrap;
    cursor: pointer;
}
.ghostai-sd-choosechip.is-selected {
    border-color: var(--ghostai-color-accent, #38bdf8);
    background: color-mix(in srgb, var(--ghostai-color-accent, #38bdf8) 14%, transparent);
    color: var(--ghostai-color-accent, #38bdf8);
}
.ghostai-sd-choosechip:disabled { opacity: 0.5; cursor: default; }
.ghostai-sd-choose__more {
    align-self: flex-start;
    min-height: 44px;
    padding: 0 4px;
    border: 0;
    background: transparent;
    color: var(--ghostai-color-accent, #38bdf8);
    font: 600 14px/1 var(--ghostai-font-sans);
    cursor: pointer;
}
.ghostai-sd-choose__more { display: inline-flex; align-items: center; gap: 6px; }
.ghostai-sd-choose__more::after {
    content: "";
    width: 7px;
    height: 7px;
    margin: -4px 0 0 4px;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.ghostai-sd-choose__more[aria-expanded="true"]::after { margin-top: 4px; transform: rotate(-135deg); }
.ghostai-sd-laprows { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ghostai-sd-laprows:not([data-open="true"]) { display: none; }
.ghostai-sd-laprow {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 0 12px;
    box-sizing: border-box;
    border-radius: 10px;
    border: 1px solid var(--ghostai-color-border, #24324d);
    background: var(--ghostai-color-surface-2, #1b2540);
    color: var(--ghostai-color-text-primary, #f8fafc);
    font: 400 14px/1.2 var(--ghostai-font-sans);
    text-align: left;
    cursor: pointer;
}
.ghostai-sd-laprow.is-selected {
    border-color: var(--ghostai-color-accent, #38bdf8);
    background: color-mix(in srgb, var(--ghostai-color-accent, #38bdf8) 14%, transparent);
}
.ghostai-sd-laprow:disabled { background: transparent; color: var(--ghostai-color-text-secondary, #cbd5e1); opacity: 0.7; cursor: default; }
.ghostai-sd-laprow__number { flex: none; min-width: 64px; font-weight: 700; white-space: nowrap; }
.ghostai-sd-laprow__time { flex: none; min-width: 78px; font-family: var(--ghostai-font-numeric); font-weight: 700; white-space: nowrap; }
.ghostai-sd-laprow__note {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    color: var(--ghostai-color-text-secondary, #cbd5e1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ghostai-sd-laprow__note--partial { color: var(--ghostai-color-warning, #fbbf24); }
.ghostai-sd-laprow__note--invalid { color: var(--ghostai-color-danger, #f87171); }

/* "Porównuję z" in the panel: one-choice rows with a dot (the shared ReferencePicker's chips, laid out as rows). */
.ghostai-sd-choosers .tds-reference-picker__chips { display: flex; flex-direction: column; gap: 6px; }
.ghostai-sd-choosers .tds-reference-picker__item { display: block; }
.ghostai-sd-choosers .tds-reference-picker__chip {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: center;
    align-items: center;
    column-gap: 10px;
    row-gap: 1px;
    width: 100%;
    min-height: 52px;
    padding: 6px 12px 6px 40px;
    box-sizing: border-box;
    border-radius: 10px;
    text-align: left;
}
.ghostai-sd-choosers .tds-reference-picker__chip > * { grid-column: 1; }
.ghostai-sd-choosers .tds-reference-picker__name { font-weight: 700; color: var(--ghostai-color-text-primary, #f8fafc); }
.ghostai-sd-choosers .tds-reference-picker__chip > .tds-reference-picker__time {
    grid-column: 2;
    grid-row: 1 / span 3;
    font-weight: 700;
    color: var(--ghostai-color-text-primary, #f8fafc);
}
.ghostai-sd-choosers .tds-reference-picker__sep { display: none; }
.ghostai-sd-choosers .tds-reference-picker__mark { justify-self: start; }
.ghostai-sd-choosers .tds-reference-picker__unavailable > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    list-style: none;
    color: var(--ghostai-color-accent, #38bdf8);
    font: 600 14px/1 var(--ghostai-font-sans);
}
.ghostai-sd-choosers .tds-reference-picker__unavailable > summary::-webkit-details-marker { display: none; }
.ghostai-sd-choosers .tds-reference-picker__unavailable > summary::after {
    content: "";
    width: 7px;
    height: 7px;
    margin: -4px 0 0 4px;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.ghostai-sd-choosers .tds-reference-picker__unavailable[open] > summary::after { margin-top: 4px; transform: rotate(-135deg); }
.ghostai-sd-choosers .tds-reference-picker__chip::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 2px solid var(--ghostai-color-border-strong, #334155);
}
.ghostai-sd-choosers .tds-reference-picker__chip.tds-chip--selected::before {
    border-color: var(--ghostai-color-accent, #38bdf8);
    background: radial-gradient(circle, var(--ghostai-color-accent, #38bdf8) 0 4px, transparent 5px);
}
.ghostai-sd-choosers .tds-reference-picker__description { flex-basis: 100%; }

/* A phone upright: one column, and "Gotowe" across the panel. */
@media (max-width: 760px) {
    .ghostai-sd-choosers__cols { display: flex; flex-direction: column; align-items: stretch; gap: 18px; }
    .ghostai-sd-choosers__done { flex: 1 1 auto; }
}

/* Web 1K: no bar — the choices are one strip, always there; "Wszystkie okrążenia" unfolds a grid of laps. */
@media (min-width: 1280px) and (max-width: 1919.98px) {
    .ghostai-sd-choosebar,
    .ghostai-sd-choosers__footer { display: none; }
    /* Every chooser's own boxes dissolve, so their chips stand in one wrapping row; the lap rows open under it. */
    .ghostai-sd-choosers,
    .ghostai-sd-choosers:not(.is-open) {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 10px;
        row-gap: 8px;
        min-height: 56px;
        box-sizing: border-box;
        padding: 6px 6px 6px 16px;
        border-color: var(--ghostai-color-border, #24324d);
        background: var(--ghostai-color-surface-2, #1b2540);
    }
    .ghostai-sd-choosers__cols,
    .ghostai-sd-choosers__cols > .ghostai-sd-block,
    .ghostai-sd-lapchoose,
    .ghostai-sd-lapchoose__quick,
    .ghostai-sd-choose__refs .tds-reference-picker,
    .ghostai-sd-choose__refs .tds-reference-picker__chips { display: contents; }
    .ghostai-sd-choose__title { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 14px; }
    .ghostai-sd-choose__refs .ghostai-sd-choose__title { margin-left: 4px; padding-left: 14px; border-left: 1px solid var(--ghostai-color-border, #24324d); }
    .ghostai-sd-choosechip { min-height: 40px; }
    .ghostai-sd-choose__more { min-height: 40px; }
    .ghostai-sd-choosers .tds-reference-picker__item { display: inline-flex; }
    .ghostai-sd-choosers .tds-reference-picker__chip {
        display: inline-flex;
        align-items: center;
        gap: 0;
        width: auto;
        min-height: 40px;
        padding: 0 14px;
        border-radius: 20px;
        white-space: nowrap;
    }
    .ghostai-sd-choosers .tds-reference-picker__chip::before,
    .ghostai-sd-choosers .tds-reference-picker__description { display: none; }
    .ghostai-sd-choosers .tds-reference-picker__name { font-weight: 600; color: inherit; }
    .ghostai-sd-choosers .tds-reference-picker__chip > .tds-reference-picker__time { font-weight: 600; color: inherit; }
    .ghostai-sd-choosers .tds-reference-picker__sep { display: inline; }
    .ghostai-sd-choosers .tds-reference-picker__unavailable { margin-left: auto; }
    .ghostai-sd-choosers .tds-reference-picker__note { order: 11; flex-basis: 100%; }
    .ghostai-sd-laprows {
        order: 10;
        flex-basis: 100%;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        padding: 8px 10px 6px 0;
        box-sizing: border-box;
    }
    .ghostai-sd-laprows:not([data-open="true"]) { display: none; }
}

/* Web 2K/4K: one compact control at the right; the panel drops down under it, laps always listed. */
@media (min-width: 1920px) {
    .ghostai-sd-choosebar { align-self: flex-end; min-height: 48px; padding-left: 16px; }
    .ghostai-sd-choosebar__label { display: none; }
    .ghostai-sd-choosebar__text { flex: none; flex-wrap: nowrap; }
    .ghostai-sd-choosers {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        z-index: 20;
        width: min(1040px, calc(100vw - 64px));
        box-sizing: border-box;
        padding: 20px;
        box-shadow: 0 18px 48px rgb(0 0 0 / 50%);
    }
    .ghostai-sd-choose .ghostai-sd-choose__more { display: none; }
    .ghostai-sd-laprows:not([data-open="true"]) { display: flex; }
}

@media (max-width: 760px), (max-width: 1000px) and (max-height: 500px) {
    /* Design canvas (2026-10-21) — on a phone the result card is not a card: its lines stand as cards of their own. */
    .ghostai-sd-card.ghostai-sd-slot--result {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }
}

/* A plan the reader's plan does not follow, named on the line it concerns — the plan-gate chip as a way there. */
.ghostai-sd-planlink {
    display: inline-flex;
    margin-left: 6px;
    vertical-align: middle;
    text-decoration: none;
}

.ghostai-sd-planlink:focus-visible { outline: 2px solid var(--ghostai-color-accent, #38bdf8); outline-offset: 2px; border-radius: 999px; }

/* The report page's compact header: the back link and the three exports sit in the header's action row. */
.ghostai-analysis-page__header { margin-bottom: var(--ghostai-space-4, 1rem); min-width: 0; overflow-wrap: anywhere; }
.ghostai-analysis-page__header .ghostai-analysis-page__downloads { gap: var(--ghostai-space-2, 0.5rem) var(--ghostai-space-3, 0.75rem); }

/* T-UIV3-11 — the deep dive's v3 items: the corner analysis link, the tyre summary and the all-laps table. */
.ghostai-sd-deep__lead { margin: 0; }
.ghostai-sd-deep__facts { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 0; list-style: none; font-variant-numeric: tabular-nums; }
.ghostai-sd-deep__facts .is-warn,
.ghostai-sd-deep__warn { color: var(--ghostai-color-warning, #f59e0b); font-weight: 600; }
.ghostai-sd-deep__warn { margin: 0; }
.ghostai-sd-laps { width: 100%; border-collapse: collapse; font-size: 14px; }
.ghostai-sd-laps th, .ghostai-sd-laps td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--ghostai-color-border, #24324d); white-space: nowrap; }
.ghostai-sd-laps thead th { color: var(--ghostai-color-text-secondary, #94a3b8); font-weight: 600; font-size: 12px; }
.ghostai-sd-laps tr.is-selected { background: color-mix(in srgb, var(--ghostai-color-accent, #38bdf8) 12%, transparent); }
.ghostai-sd-laps__num { font-family: var(--ghostai-font-numeric); font-variant-numeric: tabular-nums; }
.ghostai-sd-laps__pick { min-height: 32px; padding: 0 8px; border: 1px solid var(--ghostai-color-border, #24324d); border-radius: 8px; background: transparent; color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
.ghostai-sd-laps__pick[aria-pressed="true"] { border-color: var(--ghostai-color-accent, #38bdf8); color: var(--ghostai-color-accent, #38bdf8); }
.ghostai-sd-laps__pick:focus-visible { outline: 2px solid var(--ghostai-color-accent, #38bdf8); outline-offset: 2px; }
.ghostai-sd-laps__best { margin-left: 6px; font-size: 12px; color: var(--ghostai-color-accent, #38bdf8); }
.ghostai-sd-laps__delta--loss { color: var(--ghostai-color-danger, #ef4444); }
.ghostai-sd-laps__delta--gain { color: var(--ghostai-color-success, #22c55e); }

/* T15 — the Driver DNA Consistency scope list: the reader's own tracks as a choice. One column on a phone, as many
   as fit on a desktop; every option is a link with a touch-sized row, and the scope shown below is marked by
   aria-current rather than by colour alone. */
.ghostai-dna-consistency-scope-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: var(--ghostai-space-2, 0.5rem); margin: 0 0 var(--ghostai-space-2, 0.5rem); padding: 0; list-style: none; }
.ghostai-dna-consistency-scope-list > li { min-width: 0; padding: var(--ghostai-space-2, 0.5rem) var(--ghostai-space-3, 0.75rem); border: 1px solid var(--ghostai-color-border, #24324d); border-radius: var(--ghostai-radius-md, 8px); overflow-wrap: anywhere; }
.ghostai-dna-consistency-scope-list > li[data-selected="true"] { border-color: var(--ghostai-color-accent, #38bdf8); }
.ghostai-dna-consistency-scope-list a { display: inline-block; min-height: var(--ghostai-touch-target, 44px); padding-block: 0.625rem; box-sizing: border-box; }
.ghostai-dna-consistency-scope-list a[aria-current="true"] { font-weight: 600; }
.ghostai-dna-consistency-scope-list a:focus-visible { outline: 2px solid var(--ghostai-color-accent, #38bdf8); outline-offset: 2px; }

/* ── #3316 stage 5 — "Ustaw mieszanki": best lap per tyre compound, the dialog, the recalculation notice ───── */
.ghostai-compound-best {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.4rem;
    margin-top: 0.35rem;
}

.ghostai-compound-best--compact { margin-top: 0.15rem; }

.ghostai-compound-best__chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    padding: 0.05rem 0.4rem;
    border: 1px solid var(--ghostai-color-border, #23304d);
    border-radius: 999px;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--ghostai-color-text-primary, #f8fafc);
    background: var(--ghostai-color-surface-2, #131f38);
    white-space: nowrap;
}

.ghostai-compound-best__code {
    font-weight: 700;
    color: var(--ghostai-color-text-muted, #94a3b8);
}

/* G-TYRE-TRUST T08 — which compound the session's analysis is viewed for. */
.ghostai-compound-analysis {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.5rem;
    margin-top: 0.4rem;
    font-size: 0.8rem;
}

.ghostai-compound-analysis__label { color: var(--ghostai-color-text-muted, #94a3b8); }

.ghostai-compound-analysis__options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ghostai-compound-analysis__option {
    display: inline-block;
    padding: 0.05rem 0.5rem;
    border: 1px solid var(--ghostai-color-border, #23304d);
    border-radius: 999px;
    color: var(--ghostai-color-text-primary, #f8fafc);
    text-decoration: none;
}

.ghostai-compound-analysis__option--current {
    border-color: var(--ghostai-color-accent, #38bdf8);
    color: var(--ghostai-color-accent, #38bdf8);
    font-weight: 600;
}

.ghostai-compound-analysis__note {
    flex-basis: 100%;
    margin: 0;
    color: var(--ghostai-color-text-muted, #94a3b8);
}

.ghostai-compound-analysis__note--warning { color: var(--ghostai-color-warning, #fbbf24); }

.ghostai-session-tyres { display: flex; }

.ghostai-sd-more__action {
    display: block;
    width: 100%;
    padding: 0.45rem 0.75rem;
    border: 0;
    border-radius: var(--ghostai-radius-sm, 6px);
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ghostai-sd-more__action:hover,
.ghostai-sd-more__action:focus-visible { background: var(--ghostai-color-surface-2, #1b2540); }

.ghostai-tyre-recalc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--ghostai-color-border, #23304d);
    border-left-width: 3px;
    border-radius: var(--ghostai-radius-sm, 6px);
    font-size: 0.85rem;
}

.ghostai-tyre-recalc--running { border-left-color: var(--ghostai-color-accent, #38bdf8); }
.ghostai-tyre-recalc--done { border-left-color: var(--ghostai-color-success, #22c55e); }
.ghostai-tyre-recalc--gaps { border-left-color: var(--ghostai-color-warning, #f59e0b); }
.ghostai-tyre-recalc--failed { border-left-color: var(--ghostai-color-danger, #ef4444); }
.ghostai-tyre-recalc__note--muted { color: var(--ghostai-color-text-muted, #94a3b8); }

.ghostai-tyre-dialog { display: flex; flex-direction: column; gap: 0.75rem; }
.ghostai-tyre-dialog__lead,
.ghostai-tyre-dialog__rule,
.ghostai-tyre-dialog__count,
.ghostai-tyre-dialog__state { margin: 0; }
.ghostai-tyre-dialog__rule { font-size: 0.85rem; }
.ghostai-tyre-dialog__rule--muted,
.ghostai-tyre-dialog__count { color: var(--ghostai-color-text-muted, #94a3b8); font-size: 0.8rem; }
.ghostai-tyre-dialog__rule--warning { color: var(--ghostai-color-warning, #f59e0b); }

.ghostai-tyre-dialog__scope {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    margin: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--ghostai-color-border, #23304d);
    border-radius: var(--ghostai-radius-sm, 6px);
}

.ghostai-tyre-dialog__radio { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; }

.ghostai-tyre-dialog__table-wrap { max-height: 40vh; overflow: auto; }

.ghostai-tyre-dialog__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.ghostai-tyre-dialog__table th,
.ghostai-tyre-dialog__table td {
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid var(--ghostai-color-border, #23304d);
    text-align: left;
}

.ghostai-tyre-dialog__table thead th {
    position: sticky;
    top: 0;
    background: var(--ghostai-color-surface, #0f172a);
    font-size: 0.75rem;
    color: var(--ghostai-color-text-muted, #94a3b8);
}

.ghostai-tyre-dialog__check { width: 2rem; }
.ghostai-tyre-dialog__num { font-variant-numeric: tabular-nums; }
.ghostai-tyre-dialog__row--refused { background: rgba(239, 68, 68, 0.12); }
.ghostai-tyre-dialog__lock { margin-left: 0.35rem; color: var(--ghostai-color-text-muted, #94a3b8); }
.ghostai-tyre-dialog__lock svg { width: 0.9rem; height: 0.9rem; vertical-align: text-bottom; }

.ghostai-tyre-dialog__compound { display: flex; flex-direction: column; gap: 0.25rem; max-width: 22rem; }
.ghostai-tyre-dialog__compound select {
    min-height: var(--tds-input-height-md, 36px);
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--ghostai-color-border, #23304d);
    border-radius: var(--ghostai-radius-sm, 6px);
    background: var(--ghostai-color-surface-2, #131f38);
    color: inherit;
    font: inherit;
}

.ghostai-tyre-dialog__message {
    padding: 0.5rem 0.75rem;
    border-radius: var(--ghostai-radius-sm, 6px);
    border: 1px solid var(--ghostai-color-border, #23304d);
    font-size: 0.9rem;
}

.ghostai-tyre-dialog__message--success { border-color: var(--ghostai-color-success, #22c55e); }
.ghostai-tyre-dialog__message--error { border-color: var(--ghostai-color-danger, #ef4444); }

.ghostai-tyre-dialog__undo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--ghostai-color-border, #23304d);
}

.ghostai-tyre-dialog__undo-note { font-size: 0.8rem; color: var(--ghostai-color-text-muted, #94a3b8); }

/* #3702 — the "Raport AI" page as a driver reads it (SessionReportDriverSections), on the agreed board
   (docs/product/ai-session-report/design/RaportSesji.dc.html): section cards, uppercase captions, mono numerals, red for a
   loss and green for a gain, chips. Two columns where the board has them (map | ranking, good | laps), three work cards
   per row; one column on a phone — nothing is wider than the viewport at 390 px, the tables scroll inside their own box. */
.ghostai-driver-report {
    --driver-report-loss: color-mix(in srgb, var(--ghostai-color-danger, #ef4444) 78%, var(--ghostai-color-text-primary, #f8fafc));
    --driver-report-gain: color-mix(in srgb, var(--ghostai-color-success, #22c55e) 78%, var(--ghostai-color-text-primary, #f8fafc));
    --driver-report-mid: color-mix(in srgb, var(--ghostai-color-warning, #f59e0b) 78%, var(--ghostai-color-text-primary, #f8fafc));
    --driver-report-rule: var(--ghostai-color-border, rgba(148, 163, 184, 0.18));
    /* Two columns that only "Co robisz dobrze" | "Okrążenia" use side by side; every other section spans both. */
    display: grid;
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    gap: 18px;
    min-width: 0;
}

.ghostai-driver-report > * { grid-column: 1 / -1; min-width: 0; }

.ghostai-driver-report > .ghostai-driver-report__good { grid-column: 1; }

.ghostai-driver-report > .ghostai-driver-report__laps { grid-column: 2; }

/* The header of the page: the title on the left, the actions (refresh, PDF) on the right; stacked on a phone. */
.ghostai-report-page__head--actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 24px;
}

.ghostai-report-page__head-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 320px;
    min-width: 0;
}

.ghostai-report-page__head-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.ghostai-report-page__refresh {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.ghostai-driver-report__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid color-mix(in srgb, var(--ghostai-color-text-muted, #94a3b8) 45%, transparent);
    border-radius: 10px;
    background: transparent;
    color: var(--ghostai-color-text-primary, #f8fafc);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.ghostai-driver-report__btn:hover { border-color: var(--ghostai-color-border-strong, rgba(0, 212, 255, 0.46)); }

.ghostai-driver-report__btn:focus-visible {
    outline: 2px solid var(--ghostai-color-accent, #00d4ff);
    outline-offset: 2px;
}

.ghostai-driver-report__btn[disabled] { opacity: 0.55; cursor: default; }

/* "Przygotowuję nową wersję…": the refresh that was asked for is on its way — the button says so until it is released. */
.ghostai-driver-report__btn--busy {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ghostai-driver-report__btn--busy[disabled] { opacity: 0.8; cursor: progress; }

.ghostai-driver-report__btn--busy::before {
    content: "";
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ghostai-driver-report-btn-spin 0.9s linear infinite;
}

@keyframes ghostai-driver-report-btn-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .ghostai-driver-report__btn--busy::before { animation: none; }
}

/* One quiet line with a link: "Jest nowsza wersja tego raportu. Otwórz". */
.ghostai-report-page__newer-quiet {
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 0.8125rem;
    color: var(--ghostai-color-text-secondary, #94a3b8);
}

.ghostai-driver-report__btn--primary {
    border-color: color-mix(in srgb, var(--ghostai-color-accent, #00d4ff) 50%, transparent);
    background: color-mix(in srgb, var(--ghostai-color-accent, #00d4ff) 14%, transparent);
    color: var(--ghostai-color-accent, #00d4ff);
}

/* "Act on this": the refresh button while the report is against an older version of its reference — the warning token
   the app already uses for attention, as a filled tone so it is noticed beside the PDF button. */
.ghostai-driver-report__btn--attention {
    border-color: var(--ghostai-color-warning, #f59e0b);
    background: color-mix(in srgb, var(--ghostai-color-warning, #f59e0b) 22%, transparent);
    color: color-mix(in srgb, var(--ghostai-color-warning, #f59e0b) 80%, var(--ghostai-color-text-primary, #f8fafc));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ghostai-color-warning, #f59e0b) 35%, transparent);
}

.ghostai-driver-report__btn--quiet {
    align-self: flex-start;
    min-height: 32px;
    padding: 0 12px;
    font-size: 0.8125rem;
}

/* Typography of the board: section titles, uppercase captions, muted notes, mono numerals. */
.ghostai-driver-report__heading {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.ghostai-driver-report__cap {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ghostai-color-text-muted, #94a3b8);
}

.ghostai-driver-report__cap--strong,
.ghostai-driver-report__cap b { color: var(--ghostai-color-text-primary, #f8fafc); }

.ghostai-driver-report__note {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: normal;
    text-transform: none;
    color: var(--ghostai-color-text-muted, #94a3b8);
}

.ghostai-driver-report__push { margin-top: auto; }

.ghostai-driver-report__mono,
.ghostai-driver-report__num,
.ghostai-driver-report__kpi-value {
    font-family: var(--ghostai-font-numeric);
    font-variant-numeric: tabular-nums;
}

.ghostai-driver-report__loss { color: var(--driver-report-loss); }

.ghostai-driver-report__gain { color: var(--driver-report-gain); }

.ghostai-driver-report__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
}

/* Verdict: one sentence and four KPI tiles. */
.ghostai-driver-report__verdict { gap: 14px; }

.ghostai-driver-report__sentence {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
    text-wrap: pretty;
}

.ghostai-driver-report__kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin: 0;
}

.ghostai-driver-report__kpi {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.ghostai-driver-report__kpi dt {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ghostai-driver-report__kpi-value {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
}

/* An unavailable measurement is a label, with its full reason below, rather than a numeric value. */
.ghostai-driver-report__kpi-value.ghostai-driver-report__kpi-value--missing {
    font-size: 0.875rem;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: anywhere;
}

.ghostai-driver-report__kpi-sub {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--ghostai-color-text-muted, #94a3b8);
    overflow-wrap: anywhere;
}

/* Two columns: the track map beside the ranking. */
.ghostai-driver-report__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
    min-width: 0;
}

.ghostai-driver-report__row--map { grid-template-columns: minmax(0, 470px) minmax(0, 1fr); }


/* The map is compact: it never grows taller than the ranking needs, and its own heading keeps clear of the outline. */
.ghostai-driver-report__map .ghostai-place-map { gap: 8px; }

.ghostai-driver-report__map .ghostai-place-map__header { margin-bottom: 6px; }

.ghostai-driver-report__map .ghostai-place-map__svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 300px;
}

/* Work cards: three per row, each filling a third of the width. */
.ghostai-driver-report__work,
.ghostai-driver-report__group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.ghostai-driver-report__subheading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin: 4px 0 0;
    font-size: inherit;
    font-weight: inherit;
}

.ghostai-driver-report__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

.ghostai-driver-report__card {
    gap: 10px;
    padding: 16px 18px;
}

.ghostai-driver-report__card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.ghostai-driver-report__card-loss {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
}

.ghostai-driver-report__card-title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
}

.ghostai-driver-report__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

.ghostai-driver-report__chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border: 1px solid color-mix(in srgb, var(--ghostai-color-text-muted, #94a3b8) 45%, transparent);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    color: var(--ghostai-color-text-secondary, #cbd5e1);
}

.ghostai-driver-report__chip--high {
    border-color: color-mix(in srgb, var(--driver-report-gain) 55%, transparent);
    color: var(--driver-report-gain);
}

.ghostai-driver-report__chip--medium {
    border-color: color-mix(in srgb, var(--driver-report-mid) 55%, transparent);
    color: var(--driver-report-mid);
}

/* The small speed chart: label | bar | value, twice. */
.ghostai-driver-report__speed {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    align-items: center;
    gap: 6px 10px;
    font-size: 0.8125rem;
}

.ghostai-driver-report__speed-caption { grid-column: 1 / -1; }

.ghostai-driver-report__speed-label { color: var(--ghostai-color-text-muted, #94a3b8); }

.ghostai-driver-report__bar {
    display: block;
    width: 100%;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    background: color-mix(in srgb, var(--ghostai-color-text-muted, #94a3b8) 16%, transparent);
}

.ghostai-driver-report__bar--loss rect { fill: var(--ghostai-color-danger, #ef4444); }

.ghostai-driver-report__bar--you rect { fill: var(--ghostai-color-accent, #00d4ff); }

.ghostai-driver-report__bar--ref rect { fill: var(--ghostai-color-text-muted, #94a3b8); }

.ghostai-driver-report__bar--spread rect { fill: var(--ghostai-color-warning, #f59e0b); }

.ghostai-driver-report__bar--muted rect { fill: color-mix(in srgb, var(--ghostai-color-text-muted, #94a3b8) 55%, transparent); }

.ghostai-driver-report__bar-cell { width: 150px; min-width: 90px; }

.ghostai-driver-report__bar-cell--wide { width: 220px; }

/* Tables of the board: muted 12 px headers, a hairline between rows, numbers right-aligned in mono. */
.ghostai-driver-report__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.ghostai-driver-report__table th,
.ghostai-driver-report__table td {
    padding: 7px 8px;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

.ghostai-driver-report__table thead th {
    padding: 6px 8px;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ghostai-color-text-muted, #94a3b8);
}

.ghostai-driver-report__table tbody th { font-weight: 400; }

.ghostai-driver-report__table tbody tr > * { border-top: 1px solid var(--driver-report-rule); }

.ghostai-driver-report__table .ghostai-driver-report__num { text-align: right; }

.ghostai-driver-report__table .ghostai-driver-report__wrap {
    min-width: 160px;
    white-space: normal;
}

.ghostai-driver-report__place { font-weight: 700; }

/* A work card's table: the label column keeps a fixed share of the card, so a label wraps between words — never one letter
   per line — and a number never breaks ("661 m", not "66 / 1 / m"). */
.ghostai-driver-report__table--card { table-layout: fixed; }

.ghostai-driver-report__col-label { width: 28%; }

.ghostai-driver-report__col-number { width: 24%; }

.ghostai-driver-report__table--card th,
.ghostai-driver-report__table--card td {
    padding: 6px 2px;
    font-size: 0.75rem;
}

.ghostai-driver-report__table--card .ghostai-driver-report__label {
    padding-left: 0;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
}

/* Laps: a dense table; a long session shows its first rows and opens the rest with one button. */
.ghostai-driver-report__table--laps th,
.ghostai-driver-report__table--laps td { padding: 4px 8px; }

.ghostai-driver-report__lap--fastest td { font-weight: 700; }

.ghostai-driver-report__lap--excluded td { color: var(--ghostai-color-text-muted, #94a3b8); }

.ghostai-driver-report__scroll {
    max-width: 100%;
    overflow-x: auto;
}

/* The plan: the line on the left, the administrator's action on the right. */
.ghostai-driver-report__plan {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
}

.ghostai-driver-report__plan-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 320px;
    min-width: 0;
}

.ghostai-driver-report__plan-text p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
}

.ghostai-driver-report__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 24px;
    padding-top: 12px;
    border-top: 1px solid var(--driver-report-rule);
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--ghostai-color-text-muted, #94a3b8);
}

.ghostai-driver-report__footer p { margin: 0; }

/* #3702 — the place map and its list live inside "Dane techniczne (admin)": an ordinary block, no sticky column. */
.ghostai-report-page__more-body .ghostai-report-page__aside {
    position: static;
    max-height: none;
    overflow: visible;
    max-width: none;
}

@media (max-width: 1100px) {
    .ghostai-driver-report__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .ghostai-driver-report__row--map { grid-template-columns: minmax(0, 1fr); }

    .ghostai-driver-report { grid-template-columns: minmax(0, 1fr); }

    .ghostai-driver-report > .ghostai-driver-report__good,
    .ghostai-driver-report > .ghostai-driver-report__laps { grid-column: 1 / -1; }

    .ghostai-driver-report__map .ghostai-place-map__svg { max-height: 260px; }
}

@media (max-width: 720px) {
    .ghostai-driver-report { gap: 14px; }

    .ghostai-driver-report__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

    .ghostai-driver-report__kpi-value { font-size: 1.35rem; }

    .ghostai-driver-report__sentence { font-size: 1rem; }

    .ghostai-driver-report__cards { grid-template-columns: minmax(0, 1fr); }

    .ghostai-driver-report__card-head { flex-wrap: wrap; }

    .ghostai-driver-report__card-loss { align-items: flex-start; text-align: left; }

    .ghostai-driver-report__bar-cell,
    .ghostai-driver-report__bar-cell--wide { width: 90px; }

    .ghostai-report-page__head-actions,
    .ghostai-report-page__head-actions .ghostai-driver-report__btn { width: 100%; }
}

/* ============================================================
   LIC-01 (#3630) — the public /licenses page. Its footer link is
   an item of the legal row (LegalFooterLinks) and has no style
   of its own.
   ============================================================ */

.licenses-page {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-4, 1rem);
}

.licenses-page__toc ul { margin: 0; padding-left: 1.25rem; }

.licenses-page__section h2 { font-size: 1.15rem; margin: 0 0 var(--ghostai-space-2, 0.5rem); }

.licenses-page__table { overflow-x: auto; }

.licenses-page__table table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }

.licenses-page__table th,
.licenses-page__table td {
    padding: var(--ghostai-space-1, 0.25rem) var(--ghostai-space-2, 0.5rem);
    border-bottom: 1px solid var(--ghostai-color-border, #23304d);
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.licenses-page__note { font-size: 0.8rem; color: var(--ghostai-color-text-muted, #94a3b8); }

/* ── #3793 — "Szczegóły miejsc": the details blocks of the AI report ──────────────────────────────────────────────
   One block per place of the loss ranking. The corner drawing inside is GhostAiCornerPanel (its own scoped styles);
   these are the block around it, the two pedal charts, the table and "Co zmienić". */
.ghostai-driver-report__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.ghostai-driver-report__btn--details {
    border-color: color-mix(in srgb, var(--ghostai-color-accent, #00d4ff) 50%, transparent);
    background: color-mix(in srgb, var(--ghostai-color-accent, #00d4ff) 14%, transparent);
    color: var(--ghostai-color-accent, #00d4ff);
}

.ghostai-driver-report__details-cell { text-align: right; white-space: nowrap; }

.ghostai-driver-report__details-cell--card { margin-left: auto; }

.ghostai-driver-report__details-locked {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.ghostai-driver-report__chip--plan {
    border-color: color-mix(in srgb, var(--ghostai-color-accent, #00d4ff) 50%, transparent);
    color: var(--ghostai-color-accent, #00d4ff);
    text-decoration: none;
}

a.ghostai-driver-report__chip--plan:hover { text-decoration: underline; }

.ghostai-driver-report__details {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ghostai-report-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
    scroll-margin-top: 72px;
}

.ghostai-report-details:focus-visible,
.ghostai-driver-report__ranking-card:focus-visible {
    outline: 2px solid var(--ghostai-color-accent, #00d4ff);
    outline-offset: 2px;
}

.ghostai-driver-report__ranking-card { scroll-margin-top: 72px; }

.ghostai-report-details__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
}

.ghostai-report-details__head-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ghostai-report-details__title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
}

.ghostai-report-details__head-side {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ghostai-report-details__locator {
    width: 72px;
    height: 48px;
    flex: none;
}

.ghostai-report-details__locator path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.ghostai-report-details__locator-track { stroke: var(--ghostai-color-text-muted, #94a3b8); stroke-width: 2; opacity: 0.7; }

.ghostai-report-details__locator-place { stroke: var(--driver-report-loss); stroke-width: 4; }

.ghostai-report-details__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ghostai-report-details__grid-2 {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.ghostai-report-details__grid-2--table { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }

/* The report for a non-administrator: no "Wskazówki" beside the table, so the table takes the whole row. */
.ghostai-report-details__grid-2--table.ghostai-report-details__grid-2--solo { grid-template-columns: minmax(0, 1fr); }

.ghostai-report-details__corner,
.ghostai-report-details__chart-card,
.ghostai-report-details__charts,
.ghostai-report-details__change {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

/* Coaching tips (SessionReportStoredCoach): the driver reads plain tips; the technical record is an administrator view. */
.ghostai-report-coach__times { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.ghostai-report-coach__tip {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid var(--ghostai-color-border, rgba(148, 163, 184, .25));
    border-radius: var(--ghostai-radius-md, 8px);
    min-width: 0;
    overflow-wrap: anywhere;
}
.ghostai-report-coach__tip p { margin: 0; }
.ghostai-report-coach__tip-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.ghostai-report-coach__certainty {
    padding: 1px 8px;
    border-radius: var(--ghostai-radius-pill, 999px);
    border: 1px solid currentColor;
    font-size: .8em;
    color: var(--ghostai-color-accent, #38bdf8);
}
.ghostai-report-coach__certainty[data-certainty=trial] { color: var(--ghostai-color-text-muted, #94a3b8); border-style: dashed; }
.ghostai-report-coach__technical { min-width: 0; overflow-wrap: anywhere; border-top: 1px dashed var(--ghostai-color-border, rgba(148, 163, 184, .25)); padding-top: 8px; }

.ghostai-report-details__chart {
    display: block;
    width: 100%;
    height: auto;
    --report-details-reference: var(--ghostai-color-text-muted, #94a3b8);
    --report-details-fastest: var(--ghostai-color-accent, #00d4ff);
    --report-details-typical: #a78bfa;
}

.ghostai-report-details__grid path {
    fill: none;
    stroke: var(--driver-report-rule);
    stroke-width: 1;
}

.ghostai-report-details__axis text {
    fill: var(--ghostai-color-text-muted, #94a3b8);
    font-family: var(--ghostai-font-numeric);
    font-variant-numeric: tabular-nums;
    font-size: 10px;
}

.ghostai-report-details__line {
    fill: none;
    stroke-width: 2;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.ghostai-report-details__line.is-reference { stroke: var(--report-details-reference); stroke-dasharray: 5 4; }

.ghostai-report-details__line.is-fastest { stroke: var(--report-details-fastest); stroke-width: 2.5; }

.ghostai-report-details__line.is-typical { stroke: var(--report-details-typical); }

.ghostai-report-details__loss-area {
    fill: color-mix(in srgb, var(--ghostai-color-danger, #ef4444) 26%, transparent);
    stroke: none;
}

/* The brake chart's second shade: the reference brakes here and the fastest lap does not. A hatch — told from the
   plain fill above by its texture, so not by red against another hue alone. */
.ghostai-report-details__hatch-ground {
    fill: color-mix(in srgb, var(--ghostai-color-warning, #f59e0b) 10%, transparent);
}

.ghostai-report-details__hatch-line {
    fill: none;
    stroke: var(--ghostai-color-warning, #f59e0b);
    stroke-width: 1.6;
}

.ghostai-report-details__loss-area.is-reference-more {
    stroke: color-mix(in srgb, var(--ghostai-color-warning, #f59e0b) 55%, transparent);
    stroke-width: 0.6;
    vector-effect: non-scaling-stroke;
}

/* The third shade: that difference at the start or the end of the braking, in a place that loses time with a higher
   minimum speed — a mistake. The loss colour, CROSS-hatched: two directions of lines where the difference has one and
   the plain fill has none, so the three are told apart without colour. */
.ghostai-report-details__hatch-ground.is-entry-error {
    fill: color-mix(in srgb, var(--ghostai-color-danger, #ef4444) 14%, transparent);
}

.ghostai-report-details__hatch-line.is-entry-error {
    stroke: var(--ghostai-color-danger, #ef4444);
    stroke-width: 1.4;
}

.ghostai-report-details__loss-area.is-entry-error {
    stroke: var(--ghostai-color-danger, #ef4444);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.ghostai-report-details__mark path {
    fill: none;
    stroke-width: 1.2;
    stroke-dasharray: 3 3;
    vector-effect: non-scaling-stroke;
}

.ghostai-report-details__mark.is-reference path { stroke: var(--report-details-reference); }

.ghostai-report-details__mark.is-fastest path { stroke: var(--report-details-fastest); }

.ghostai-report-details__mark.is-typical path { stroke: var(--report-details-typical); }

.ghostai-report-details__badge circle {
    fill: var(--ghostai-color-surface, #131a2e);
    stroke: var(--ghostai-color-text-muted, #94a3b8);
    stroke-width: 1;
}

.ghostai-report-details__badge text {
    fill: var(--ghostai-color-text-primary, #f8fafc);
    font-size: 10px;
    font-weight: 700;
}

/* #3793 — the three charts' one range: its controls, the focusable frame of a chart, a break in a collapsed axis,
   the corners' apexes. A horizontal drag on a chart pans it; a vertical one stays the page's. */
.ghostai-report-details__chart-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.ghostai-report-details__chart-range {
    margin-right: auto;
    color: var(--ghostai-color-text-muted, #94a3b8);
    font-family: var(--ghostai-font-numeric);
    font-variant-numeric: tabular-nums;
    font-size: 0.75rem;
}

.ghostai-report-details__chart-button { min-width: 36px; }

/* #3793 — every chart on its own window. A panel is one phase of one signal with its own range controls; several in
   one card are lower. While a gesture lasts the drawn plot is transformed in the browser (report-charts.js): lines
   keep their width, and whatever would be stretched or is about to be redrawn (tick labels, badges, names) is hidden
   until the crisp chart arrives. */
.ghostai-report-details__panel {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ghostai-report-details__panel + .ghostai-report-details__panel {
    padding-top: 8px;
    border-top: 1px solid var(--ghostai-color-border, rgba(148, 163, 184, 0.25));
}

.ghostai-report-details__panel-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ghostai-color-text-primary, #e2e8f0);
}

.ghostai-report-details__panel .ghostai-report-details__chart-range { margin-left: auto; margin-right: 0; }

.ghostai-report-details__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    font-size: 0.8125rem;
    color: var(--ghostai-color-text-secondary, #cbd5e1);
    cursor: pointer;
}

.ghostai-report-details__chart [data-chart-plot] path,
.ghostai-report-details__chart [data-chart-plot] circle { vector-effect: non-scaling-stroke; }

.ghostai-report-details__chart.is-gesturing [data-chart-ticks],
.ghostai-report-details__chart.is-gesturing [data-chart-plot] text,
.ghostai-report-details__chart.is-gesturing .ghostai-report-details__badge { visibility: hidden; }

.ghostai-report-details__cursor {
    fill: none;
    stroke: var(--ghostai-color-text-primary, #e2e8f0);
    stroke-width: 1.5;
    pointer-events: none;
}

.ghostai-report-details__overview { cursor: crosshair; }

.ghostai-report-details__bracket { cursor: pointer; }

.ghostai-report-details__bracket-hit { fill: transparent; }

.ghostai-report-details__bracket-line {
    fill: none;
    stroke-width: 3;
    stroke-linejoin: round;
}

.ghostai-report-details__bracket.is-brake .ghostai-report-details__bracket-line { stroke: var(--ghostai-color-danger, #ef4444); }

.ghostai-report-details__bracket.is-throttle .ghostai-report-details__bracket-line { stroke: var(--ghostai-color-success, #22c55e); }

.ghostai-report-details__bracket.is-steering .ghostai-report-details__bracket-line { stroke: var(--ghostai-color-accent, #00d4ff); }

.ghostai-report-details__bracket:hover .ghostai-report-details__bracket-hit,
.ghostai-report-details__bracket:focus-visible .ghostai-report-details__bracket-hit {
    fill: color-mix(in srgb, var(--ghostai-color-text-primary, #e2e8f0) 14%, transparent);
}

.ghostai-report-details__bracket:focus-visible { outline: 2px solid var(--ghostai-color-accent, #00d4ff); }

.ghostai-report-details__chart-frame {
    border-radius: 6px;
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
}

.ghostai-report-details__chart-frame:focus-visible {
    outline: 2px solid var(--ghostai-color-accent, #00d4ff);
    outline-offset: 2px;
}

.ghostai-report-details__break rect { fill: color-mix(in srgb, var(--ghostai-color-text-muted, #94a3b8) 16%, transparent); }

.ghostai-report-details__break path {
    fill: none;
    stroke: var(--ghostai-color-text-primary, #f8fafc);
    stroke-width: 1.5;
}

.ghostai-report-details__break text {
    fill: var(--ghostai-color-text-muted, #94a3b8);
    font-family: var(--ghostai-font-numeric);
    font-variant-numeric: tabular-nums;
    font-size: 9px;
}

.ghostai-report-details__apex path {
    fill: none;
    stroke: var(--ghostai-color-text-muted, #94a3b8);
    stroke-width: 1;
    stroke-opacity: 0.45;
    vector-effect: non-scaling-stroke;
}

.ghostai-report-details__apex.is-anchor path { stroke-opacity: 0.95; }

.ghostai-report-details__apex text {
    fill: var(--ghostai-color-text-muted, #94a3b8);
    font-size: 9px;
    font-weight: 600;
}

.ghostai-report-details__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: 0.75rem;
    color: var(--ghostai-color-text-muted, #94a3b8);
}

.ghostai-report-details__legend-item { display: inline-flex; align-items: center; gap: 6px; }

.ghostai-report-details__legend-item i {
    display: inline-block;
    width: 18px;
    height: 0;
    border-top: 2px solid var(--ghostai-color-text-muted, #94a3b8);
}

.ghostai-report-details__legend-item.is-reference i { border-top-style: dashed; }

.ghostai-report-details__legend-item.is-fastest i { border-top-color: var(--ghostai-color-accent, #00d4ff); }

.ghostai-report-details__legend-item.is-typical i { border-top-color: #a78bfa; }

.ghostai-report-details__legend-item.is-loss i {
    height: 10px;
    border: 0;
    background: color-mix(in srgb, var(--ghostai-color-danger, #ef4444) 26%, transparent);
}

.ghostai-report-details__legend-item.is-reference-more i {
    height: 10px;
    border: 1px solid color-mix(in srgb, var(--ghostai-color-warning, #f59e0b) 55%, transparent);
    background: repeating-linear-gradient(
        45deg,
        var(--ghostai-color-warning, #f59e0b) 0 1.5px,
        color-mix(in srgb, var(--ghostai-color-warning, #f59e0b) 10%, transparent) 1.5px 5px);
}

.ghostai-report-details__legend-item.is-entry-error i {
    height: 10px;
    border: 1px solid var(--ghostai-color-danger, #ef4444);
    background:
        repeating-linear-gradient(45deg, var(--ghostai-color-danger, #ef4444) 0 1.5px, transparent 1.5px 5px),
        repeating-linear-gradient(-45deg, var(--ghostai-color-danger, #ef4444) 0 1.5px, transparent 1.5px 5px),
        color-mix(in srgb, var(--ghostai-color-danger, #ef4444) 14%, transparent);
}

.ghostai-report-details__table th,
.ghostai-report-details__table td { white-space: nowrap; }

.ghostai-report-details__table td:last-child { white-space: normal; min-width: 9rem; }

.ghostai-report-details__typical { color: #c4b5fd; }

.ghostai-report-details__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 6px;
    border: 1px solid color-mix(in srgb, var(--ghostai-color-text-muted, #94a3b8) 40%, transparent);
    border-radius: 50%;
    font-size: 0.6875rem;
    font-weight: 700;
}

.ghostai-report-details__change { justify-content: center; }

.ghostai-report-details__change-sentence {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
}

.ghostai-report-details__back {
    display: flex;
    justify-content: flex-end;
    margin: 0;
}

@media (max-width: 1100px) {
    .ghostai-report-details__grid-2,
    .ghostai-report-details__grid-2--table { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
    .ghostai-report-details__title { font-size: 1.0625rem; }

    .ghostai-report-details__head-side { width: 100%; }

    .ghostai-report-details__head-side .ghostai-driver-report__btn { margin-left: auto; min-height: 44px; }

    .ghostai-driver-report__btn--details,
    .ghostai-report-details__back .ghostai-driver-report__btn { min-height: 44px; }

    .ghostai-report-details__axis text { font-size: 13px; }

    .ghostai-report-details__chart-button { min-width: 44px; min-height: 44px; }

    .ghostai-report-details__link { min-height: 44px; }

    .ghostai-report-details__panel .ghostai-report-details__chart-range { flex-basis: 100%; margin-left: 0; order: -1; }

    .ghostai-report-details__break text,
    .ghostai-report-details__apex text { font-size: 12px; }
}

/* ============================================================
   0.4.2 "Trenuj" / "Usuń z treningu" in the place cards (canvas "Trenuj w kartach"): a trained place's card is framed
   blue; the session page's loss boxes keep room in their header for the control in its corner, as wide and as tall as
   the control's state needs (GhostAiLossList.ItemCorner: --ghostai-loss-list-corner-room / -height); the section
   header's "W treningu: 2 z 3 · 5 zmian do pon." (TrainingCornerTrainSummary).
   ============================================================ */

.ghostai-loss-list__entry:has(> .ghostai-loss-list__corner .tc-train--trained) > .ghostai-loss-list__item,
.ghostai-driver-report__card:has(.ghostai-driver-report__card-corner .tc-train--trained),
.ghostai-report-details:has(.ghostai-report-details__head-side .tc-train--trained) {
    border-color: #3b82f6;
}

.ghostai-loss-list__entry--corner:has(.tc-train[data-state="add"]),
.ghostai-loss-list__entry--corner:has(.tc-train[data-state="removing"]) {
    --ghostai-loss-list-corner-room: 8rem;
}

.ghostai-loss-list__entry--corner:has(.tc-train[data-state="trained"]) {
    --ghostai-loss-list-corner-room: 10rem;
}

.ghostai-loss-list__entry--corner:has(.tc-train[data-state="confirm"]) {
    --ghostai-loss-list-corner-room: 11.5rem;
    --ghostai-loss-list-corner-height: 4.75rem;
}

.ghostai-loss-list__entry--corner:has(.tc-train[data-state="limit"]),
.ghostai-loss-list__entry--corner:has(.tc-train[data-state="added"]) {
    --ghostai-loss-list-corner-room: 12rem;
    --ghostai-loss-list-corner-height: 6rem;
}

@media (max-width: 640px), (pointer: coarse) {
    .ghostai-loss-list__entry--corner:has(.tc-train[data-state="trained"]) {
        --ghostai-loss-list-corner-room: 9.5rem;
    }

    .ghostai-loss-list__entry--corner:has(.tc-train[data-state="confirm"]) {
        --ghostai-loss-list-corner-room: 11rem;
        --ghostai-loss-list-corner-height: 6.25rem;
    }

    .ghostai-loss-list__entry--corner:has(.tc-train[data-state="limit"]),
    .ghostai-loss-list__entry--corner:has(.tc-train[data-state="added"]) {
        --ghostai-loss-list-corner-room: 11rem;
        --ghostai-loss-list-corner-height: 6.75rem;
    }
}

.tc-train-summary {
    color: var(--ghostai-color-text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
}

.ghostai-sd-losses__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 14px;
}

/* 0.4 "Trenuj" — the places the driver trains, marked in the trained blue (#3b82f6 family) wherever the page draws them:
   the report's track map labels and the session page's tiles. (0.4.2: the loss boxes carry the control itself in their
   top-right corner — GhostAiLossList.ItemCorner — instead of a "Trenuj" row under the box.) */
.ghostai-place-map__svg .ghostai-place-map__place--highlighted .ghostai-place-map__label {
    fill: #60a5fa;
    font-weight: 800;
}

.ghostai-place-map__svg .ghostai-place-map__place--highlighted .ghostai-place-map__dot {
    stroke: #3b82f6;
    stroke-width: 2.5;
}

.ghostai-segment-grid__tiles .ghostai-segment-grid__tile--highlighted {
    outline: 2px solid #3b82f6;
    outline-offset: -2px;
    background: color-mix(in srgb, #3b82f6 16%, var(--ghostai-color-surface, #0f172a));
}

.ghostai-segment-grid__tile .tc-trained-chip {
    margin-left: 0;
    margin-top: 0.25rem;
}

/* 0.4.2 — the report's place card: "Trenuj" / "W treningu · Usuń" in its top-right corner, the loss under it; the
   card's number and name keep the left column. At phone width the loss takes the second row's full width. */
.ghostai-driver-report__card-head--corner {
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) auto;
    grid-template-areas:
        "cap corner"
        "cap loss";
    align-items: start;
    gap: 6px 12px;
}

.ghostai-driver-report__card-head--corner > .ghostai-driver-report__cap { grid-area: cap; min-width: 0; }

.ghostai-driver-report__card-head--corner > .ghostai-driver-report__card-loss { grid-area: loss; justify-self: end; }

.ghostai-driver-report__card-corner {
    grid-area: corner;
    display: flex;
    justify-content: flex-end;
    justify-self: end;
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 720px) {
    .ghostai-driver-report__card-head--corner {
        grid-template-areas:
            "cap corner"
            "loss loss";
    }

    .ghostai-driver-report__card-head--corner > .ghostai-driver-report__card-loss { justify-self: start; }
}

.ghostai-sd-place__train {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ghostai-space-2, 0.5rem) var(--ghostai-space-3, 0.75rem);
    margin: var(--ghostai-space-2, 0.5rem) 0;
    color: var(--ghostai-color-text-muted);
}

.ghostai-driver-report__train-row {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ghostai-space-2, 0.5rem);
}

.ghostai-driver-report__plan-train {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ghostai-space-2, 0.5rem) var(--ghostai-space-3, 0.75rem);
    margin-top: var(--ghostai-space-2, 0.5rem);
}

/* Design canvas (2026-10-30 whole-page review): "Jak poszło" is two figures side by side — the best lap and the gap to
   the reference — with the rest (spread, complete laps) as short lines under them, not four equal tiles. */
.ghostai-sd-slot--result .ghostai-session-result {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 16px;
}
.ghostai-sd-slot--result .ghostai-session-result__tile {
    padding: 0;
    border: 0;
    background: none;
}
.ghostai-sd-slot--result .ghostai-session-result__tile:nth-child(n + 3) {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 6px;
}
.ghostai-sd-slot--result .ghostai-session-result__tile:nth-child(n + 3) .ghostai-session-result__label {
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 600;
}
.ghostai-sd-slot--result .ghostai-session-result__tile:nth-child(n + 3) .ghostai-session-result__value {
    font-size: 12px;
    font-weight: 600;
}
.ghostai-sd-slot--result .ghostai-session-result__tile:nth-child(n + 3) .ghostai-session-result__sub { font-size: 12px; }
.ghostai-sd-slot--result .ghostai-session-result__tile:nth-child(n + 3) .ghostai-session-result__label::after { content: ":"; }

/* Design canvas (2026-10-30): "Trenuj …" is the page's one violet call to action on every screen, not an outline. */
.ghostai-sd__train-next .tds-tooltip > button.rz-button.tds-btn:not([disabled]) {
    border-color: #7c6cff;
    background: #7c6cff;
    color: #ffffff;
    font-weight: 700;
}

/* Design canvas (2026-10-30 whole-page review): "Gdzie tracisz najwięcej" is a list of short rows — a numbered circle,
   the place's name over one line of what to change, the loss on the right and the cone at the row's end — not a stack
   of tall cards. The rank's words stay for a screen reader; the circle carries the number. */
.ghostai-sd-slot--losses .ghostai-loss-list { counter-reset: sd-loss; gap: 10px; }
.ghostai-sd-slot--losses .ghostai-loss-list__entry { counter-increment: sd-loss; }
.ghostai-sd-slot--losses .ghostai-loss-list__item {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
    padding: 12px 12px 12px 12px;
}
.ghostai-sd-slot--losses .ghostai-loss-list__entry--corner .ghostai-loss-list__item { padding-right: 64px; }
.ghostai-sd-slot--losses .ghostai-loss-list__item::before {
    content: counter(sd-loss);
    grid-column: 1;
    grid-row: 1 / span 3;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ghostai-color-danger) 20%, transparent);
    color: var(--ghostai-color-danger);
    font: 700 13px/1 var(--ghostai-font-sans);
}
.ghostai-sd-slot--losses .ghostai-loss-list__head { display: contents; }
.ghostai-sd-slot--losses .ghostai-loss-list__entry .ghostai-loss-list__title {
    grid-column: 2;
    min-height: 0;
    padding-right: 0;
}
.ghostai-sd-slot--losses .ghostai-loss-list__rank {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.ghostai-sd-slot--losses .ghostai-loss-list__name { font-size: 15px; }
.ghostai-sd-slot--losses .ghostai-loss-list__loss {
    grid-column: 3;
    grid-row: 1 / span 2;
    font-size: 15px;
}
.ghostai-sd-slot--losses .ghostai-loss-list__change {
    grid-column: 2;
    font-size: 13px;
    font-weight: 400;
    color: var(--ghostai-color-text-secondary);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.ghostai-sd-slot--losses .ghostai-loss-list__badges { grid-column: 2; }
.ghostai-sd-slot--losses .ghostai-loss-list__note { display: none; }
.ghostai-sd-slot--losses .ghostai-loss-list__corner {
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
}

/* Design canvas (owner, 2026-10-31): on a phone held upright "Co trenować dalej" is the first section of "Więcej o
   sesji" instead of a card in the first row; on every other screen the card stays and the section is not shown. */
.ghostai-sd-deep__next { display: none; }
@media (max-width: 760px) {
    .ghostai-sd-deep__next { display: contents; }
    /* #4486 — the card's widget gives way to the section only while the deep dive is drawn to carry it. */
    .ghostai-sd__layout:has([data-widget-id=deep-dive]) [data-widget-id=next] { display: none; }
}

/* Design canvas (owner, 2026-10-31): the telemetry panel is compact — the scene is a fixed band (phone 200 px,
   tablet 300 px, web 420 px, wide 460 px) instead of a 16:10 picture, and every chart is 60 px tall. */
.ghostai-sd-bench .sd-beta3d__picture { aspect-ratio: auto; height: 420px; max-height: none; }
.ghostai-sd-bench .tel25-scene__stage { min-height: 0; }
.ghostai-sd-bench .tel25-scene__stage > .tel25-scene__canvas { height: 420px; flex: none; }
.ghostai-sd-bench .tel-chart__svg { height: 60px; }
.ghostai-sd-bench .tel-map__svg { max-height: 240px; }
.ghostai-sd-bench .tel25__top { align-items: start; }
@media (min-width: 2000px) {
    .ghostai-sd-bench .sd-beta3d__picture,
    .ghostai-sd-bench .tel25-scene__stage > .tel25-scene__canvas { height: 460px; }
}
@media (max-width: 1180px) {
    .ghostai-sd-bench .sd-beta3d__picture,
    .ghostai-sd-bench .tel25-scene__stage > .tel25-scene__canvas { height: 300px; }
}
@media (max-width: 760px), (max-width: 1000px) and (max-height: 500px) {
    .ghostai-sd-bench .sd-beta3d__picture,
    .ghostai-sd-bench .tel25-scene__stage > .tel25-scene__canvas { height: 200px; }
}

/* Design canvas (owner, 2026-10-31): "Szczegóły faz" is from Pro; below it one row names the plan and compares plans. */
.ghostai-place-panel__phase-details--locked {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    min-height: 44px;
    font-weight: 600;
}
.ghostai-place-panel__phase-details--locked a { margin-left: auto; color: var(--ghostai-color-accent, #22d3ee); }

/* Design canvas (owner, 2026-10-31, Free boards): a plan without AI reports shows one compact card — the lock, one
   sentence and "Porównaj pakiety" — with no example tiles and no "new report" button under it. */
.ghostai-sd-slot--reports .ghostai-feature-preview__stage { display: none; }
.ghostai-sd-slot--reports [data-testid=sd-reports-limit] ~ .ghostai-sd-actions { display: none; }

/* ── Session Details, the deep dive in a narrow column (design canvas "Web-Wide", 1920/2560) ──────────────────────────
   #4486 — the columns and rows of the page are the layout's now (TelemetryEditableGrid; the default for 2k and 4k is
   the Web-Wide arrangement, the 1k default Web 1K). The deep dive placed in half the page or less keeps its sections in
   one column, as it did in Web-Wide's left column. */
.ghostai-sd__layout [data-widget-id=deep-dive]:is([data-column-span="1"], [data-column-span="2"], [data-column-span="3"],
    [data-column-span="4"], [data-column-span="5"], [data-column-span="6"]) .tds-foldgroup__list { grid-template-columns: minmax(0, 1fr); }

/* ── Session Details, "Zakręty i sekwencje" as a list (design canvas: Web-1K / Web-Wide / phone boards) ──────────────
   The canvas lists the places in track order, one row each — code and name left, the loss right — in two columns
   from a tablet up. The shared tiles keep their markup and behaviour (select, pressed, trained chip); only this page
   lays them out as rows. */
.ghostai-sd [data-testid=sd-segments] .ghostai-segment-grid__tiles {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 16px;
    padding: 8px 12px;
    border: 1px solid var(--ghostai-color-border, #1e293b);
    border-radius: 12px;
    background: var(--ghostai-color-surface, #131a2e);
}
@media (min-width: 761px) {
    .ghostai-sd [data-testid=sd-segments] .ghostai-segment-grid__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ghostai-sd [data-testid=sd-segments] .ghostai-segment-grid__tiles > li { min-width: 0; }
.ghostai-sd [data-testid=sd-segments] .ghostai-segment-grid__tile {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
    width: 100%;
    min-width: 0;
    min-height: 36px;
    padding: 6px 8px;
    border: 0;
    border-bottom: 1px solid var(--ghostai-color-border, #1e293b);
    border-radius: 6px;
    background: transparent;
    text-align: left;
    font-size: 13px;
}
.ghostai-sd [data-testid=sd-segments] .ghostai-segment-grid__tile--selected {
    background: var(--ghostai-color-surface-2, #1b2540);
    box-shadow: inset 3px 0 0 var(--ghostai-color-accent, #22d3ee);
}
.ghostai-sd [data-testid=sd-segments] .ghostai-segment-grid__kind { display: none; }
.ghostai-sd [data-testid=sd-segments] .ghostai-segment-grid__code { font-weight: 700; flex: 0 0 auto; }
.ghostai-sd [data-testid=sd-segments] .ghostai-segment-grid__name {
    flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--ghostai-color-text-muted, #94a3b8);
}
.ghostai-sd [data-testid=sd-segments] .ghostai-segment-grid__value { margin-left: auto; flex: 0 0 auto; font-variant-numeric: tabular-nums; }

/* "Zakręty i sekwencje" ranked (design canvas phone boards): from the largest loss down, a bar of each place's share of
   the largest, the first five until "Pokaż wszystkie". From a tablet up the canvas lists the track: every place, in
   travel order (--track-order), no bars. */
.ghostai-sd [data-testid=sd-segments] .ghostai-segment-grid__bar {
    flex: 0 0 56px;
    height: 4px;
    align-self: center;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--ghostai-color-danger, #f87171) calc(var(--loss-share, 0) * 100%), transparent 0);
}
.ghostai-sd [data-testid=sd-segments] .ghostai-segment-grid__show-all {
    margin-top: 8px;
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--ghostai-color-border, #1e293b);
    border-radius: 10px;
    background: transparent;
    color: var(--ghostai-color-text-primary, #e2e8f0);
    font-weight: 600;
}
@media (max-width: 760px) {
    .ghostai-sd [data-testid=sd-segments] .ghostai-segment-grid__tiles > li[data-beyond=true] { display: none; }
}
@media (min-width: 761px) {
    .ghostai-sd [data-testid=sd-segments] .ghostai-segment-grid__tiles > li { order: var(--track-order, -1); }
    .ghostai-sd [data-testid=sd-segments] .ghostai-segment-grid__bar,
    .ghostai-sd [data-testid=sd-segments] .ghostai-segment-grid__show-all { display: none; }
}

/* "Przelicz sesję" is a maintenance action: the canvas has no place for it in the header on any screen, so it closes
   the page everywhere (it already did below 1280px). */
.ghostai-sd > .ghostai-sd__reprocess { order: 10; }

/* Wide web header (design canvas Web-Wide): the lap pill sits in the title row, between the title and "Więcej" /
   "Trenuj", not in a row of its own. The page becomes a grid whose every child spans the width, except the two parts
   of the header and the pill (dense placement puts the pill in the header row). Narrower screens keep the stacked page (on 1K the choices are an open strip under the header, Choose-Web-1K). */
@media (min-width: 1920px) {
    .ghostai-sd {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-auto-flow: row dense;
        column-gap: 12px;
        row-gap: 18px;
    }
    .ghostai-sd > *,
    .ghostai-sd > .ghostai-sd__contents > * { grid-column: 1 / -1; }
    .ghostai-sd > .ghostai-sd__head { display: contents; }
    .ghostai-sd > .ghostai-sd__head > * { grid-column: 1; align-self: end; }
    .ghostai-sd > .ghostai-sd__head > .ghostai-sd__actions { grid-column: 3; }
    .ghostai-sd > .ghostai-sd-choose { grid-column: 2; align-self: end; }
}

/* Telemetry (design canvas TelemetryPanel): the charts follow the chips directly. The "Cały okrążenie · Resetuj zoom"
   line says nothing until there is something to undo, so it shows only once the charts are zoomed or narrowed. */
.ghostai-sd-bench .tds-lap-bench-narrowing:has([data-testid=lap-bench-narrowing-reset]:disabled):has(.tds-lap-bench-narrowing__status:empty) {
    display: none;
}

/* Frame bar (design canvas TelemetryPanel): "◄ reading ►" is one line on every screen. The reading takes the room
   between the steps and wraps inside it, so on a phone the ► step no longer drops to a line of its own. */
.ghostai-sd-framebar > .ghostai-sd-framebar__readout {
    flex: 1 1 8rem;
    min-width: 0;
    text-align: center;
}