/* debrief.css — the Debrief page (debrief.html). Theme tokens from app.css only. */
html, body { overflow-x: hidden; }
body { background: var(--bg); color: var(--text); margin: 0; }
.db-bar button, .db button { margin: 0; min-height: 0; }

.db-bar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 8px 16px; background: var(--panel); border-bottom: 1px solid var(--line);
}
.db-brand { color: var(--text); text-decoration: none; font-weight: 800; letter-spacing: .04em; line-height: 1.1; }
.db-brand small { display: block; color: var(--text-3); font-weight: 500; font-size: var(--fs-micro); letter-spacing: 0; }
.db-room { font-family: ui-monospace, Consolas, monospace; color: var(--accent); font-weight: 700; }
.db-conn { font-size: var(--fs-small); color: var(--text-3); white-space: nowrap; }
.db-conn::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--text-4); vertical-align: 1px; }
.db-conn[data-state="live"]::before { background: var(--accent); }
.db-conn[data-state="stale"]::before { background: var(--warn); }
.db-conn[data-state="off"]::before { background: var(--crit); }
.db-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.db-btn {
    display: inline-flex; align-items: center; height: 34px; padding: 0 14px; font-size: 13px; border-radius: 8px;
    background: var(--surface-1); border: 1px solid var(--line-2); color: var(--text-2); text-decoration: none; cursor: pointer;
}
.db-share { background: var(--accent); border-color: var(--accent); color: var(--ink); font-weight: 700; }
.db-share:disabled { opacity: .4; cursor: default; }

.db { max-width: 1100px; margin: 0 auto; padding: 20px 16px 40px; display: grid; gap: 16px; }
#dbBody { display: grid; gap: 16px; }
#dbBody[hidden] { display: none; }
.db h1, .db h2 { margin: 0; }

.db-empty { text-align: center; padding: 60px 16px; border: 1px dashed var(--line-2); border-radius: var(--radius); }
.db-empty[hidden] { display: none; }
.db-empty h1 { font-size: var(--fs-display); margin-bottom: 8px; }
.db-empty p { color: var(--text-3); max-width: 46ch; margin: 0 auto 16px; }

.db-phase { margin: 0 0 4px; color: var(--text-3); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .06em; }
.db-head h1 { font-size: var(--fs-display); line-height: 1.2; color: var(--text-hi); text-wrap: balance; }
.db-sub { margin: 6px 0 0; color: var(--text-3); }

.db-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; min-width: 0; }
.db-card h2 { font-size: var(--fs-lead); margin-bottom: 10px; }
.db-look { border-color: var(--accent); }
.db-look ol { margin: 0; padding-left: 22px; display: grid; gap: 8px; font-size: var(--fs-lead); line-height: 1.4; }
.db-look li::marker { color: var(--warn); font-weight: 800; }
.db-look li p { margin: 0; }
.db-look .db-apply { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; font-size: var(--fs-small); }
.db-apply .db-btn { background: var(--accent); border-color: var(--accent); color: var(--ink); font-weight: 700; }
.db-apply small { color: var(--text-3); }

.db-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.db-card-head h2 { margin: 0 !important; }
.db-link { color: var(--accent); font-size: var(--fs-small); }
.db-explain > h2, .db-explain .db-card-head h2 { font-size: var(--fs-body); }
.db-explain > h2 { margin: 14px 14px 8px; }
.db-explain .db-card-head { margin-top: 12px; }
.db-explain .db-note { margin-bottom: 12px; }
.db-delta.is-even { color: var(--text-4); }

/* Stint chart (SVG drawn by debrief.js at the box's own width) */
.db-chart { min-height: 200px; }
.db-chart svg { display: block; }
.db-ch-grid { stroke: var(--line); stroke-width: 1; }
.db-ch-ax { fill: var(--text-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.db-ch-plan { fill: none; stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 3 2; }
.db-ch-bar { opacity: .85; }
.db-ch-short { fill: var(--warn); }
.db-ch-long { fill: var(--info); }
.db-ch-stop { fill: var(--text-4); }
.db-ch-stop.is-slow { fill: var(--crit); }
.db-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0; color: var(--text-3); font-size: var(--fs-small); }
.db-legend span { display: inline-flex; align-items: center; gap: 6px; }
.db-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.db-legend b { font-size: 11px; }
.db-legend .is-short { color: var(--warn); }
.db-legend .is-slow { color: var(--crit); }

/* Drivers: small multiples, same rows in every card */
.db-drivers { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.db-dcard { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--panel-2); min-width: 0; }
.db-dcard h3 { margin: 0 0 8px; font-size: var(--fs-body); display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; }
.db-dcard h3 i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; align-self: center; }
.db-dcard h3 small { color: var(--text-3); font-weight: 500; font-size: var(--fs-small); margin-left: auto; }
.db-dcard dl { margin: 0; display: grid; gap: 3px; font-variant-numeric: tabular-nums; }
.db-dcard dl div { display: flex; justify-content: space-between; gap: 8px; }
.db-dcard dt { color: var(--text-3); font-size: var(--fs-small); }
.db-dcard dd { margin: 0; text-align: right; }
.db-dcard dd small { color: var(--text-4); }
.db-sharebar { position: relative; height: 6px; margin-top: 8px; border-radius: 3px; background: var(--surface-2); }
.db-sharebar span { display: block; height: 100%; border-radius: 3px; }
.db-sharebar i { position: absolute; top: -3px; width: 2px; height: 12px; margin-left: -1px; background: var(--text-hi); }

.db-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.db-kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.db-kpi span { display: block; color: var(--text-3); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .06em; }
.db-kpi b { font-size: var(--fs-title); font-variant-numeric: tabular-nums; }

.db-scroll { overflow-x: auto; border-radius: 6px; }
.db-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Rows that left the plan stand out; on-plan rows stay quiet. */
.db-table tr.is-off td { background: var(--warn-dim); }
.db-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); font-variant-numeric: tabular-nums; }
.db-table th { text-align: left; color: var(--text-3); font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.db-table td { padding: 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.db-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--panel); }
.db-table th:first-child { left: 0; z-index: 3; }   /* the stint number / driver stays put while the row scrolls on a phone */
.db-table .n { text-align: right; }
.db-table small { color: var(--text-4); }
.db-tag { font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px; background: var(--surface-2); color: var(--text-3); }
.db-tag.is-warn { background: var(--warn-dim); color: var(--warn); }
.db-delta { font-size: var(--fs-small); color: var(--text-3); }
.db-delta.is-bad { color: var(--crit); }
.db-delta.is-good { color: var(--accent); }

.db-note { margin: 0; color: var(--text-4); font-size: var(--fs-small); }
.db-toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--surface-3); color: var(--text-hi); padding: 10px 16px; border-radius: 8px; border: 1px solid var(--line-2); margin: 0; }
.db-toast[hidden] { display: none; }

@media (max-width: 640px) {
    .db-kpis { grid-template-columns: repeat(2, 1fr); }
    .db-head h1 { font-size: var(--fs-title); }
    .db-look ol { font-size: var(--fs-body); }
    .db-conn { display: none; }
}

/* Ctrl+P: one clean page. Ink on paper, no buttons, no sticky cells. */
@media print {
    @page { size: A4 portrait; margin: 10mm; }
    /* Paper is white whatever the screen theme: the tokens go to ink colors. */
    :root, :root[data-theme] {
        --bg: #fff !important; --panel: #fff !important; --panel-2: #fff !important; --surface-2: #e6e6e6 !important;
        --text: #000 !important; --text-hi: #000 !important; --text-2: #222 !important; --text-3: #555 !important; --text-4: #777 !important;
        --line: #ccc !important; --line-2: #bbb !important; --warn-dim: #f2f2f2 !important;
        --bg-2: #fff !important; --bg-3: #fff !important; --surface-1: #fff !important; --surface-3: #eee !important;
    }
    *:not([style]) { background-color: transparent !important; }   /* inline styles are driver colors: keep them */
    html:not([style]), body:not([style]) { background: #fff !important; }
    .db-table tr.is-off td { background-color: #f0f0f0 !important; }
    .db-sharebar { background-color: #e6e6e6 !important; }
    html, body { overflow: visible; }
    .db-bar .db-tools, .db-conn, .db-apply, .db-toast, #dbCsv, .db-note { display: none !important; }
    .db-bar { background: none; border-bottom: 1px solid #999; padding: 0 0 4px; }
    /* shortcut: a fixed zoom fits a 24 h race (~31 stints) on one A4 page; much longer races spill onto a second. */
    .db { max-width: none; padding: 0; gap: 8px; zoom: .82; }
    #dbBody { gap: 8px; }
    .db-card, .db-kpi, .db-dcard { padding: 6px 8px; break-inside: avoid; }
    .db-head h1 { font-size: 16pt; }
    .db-look { border-color: var(--text); }
    .db-room { color: var(--text); }
    .db-look ol { font-size: 9.5pt; gap: 2px; }
    .db-card h2 { font-size: 11pt; margin-bottom: 4px; }
    .db-table { font-size: 7.5pt; }
    .db-table th, .db-table td { padding: 0 4px; line-height: 1.25; }
    .db-tag { padding: 0 3px; font-size: 7pt; }
    .db-kpi { padding: 3px 8px; }
    .db-kpi b { font-size: 11pt; }
    .db-dcard dl { gap: 0; }
    .db-legend { margin-top: 2px; font-size: 8pt; }
    .db-table td:first-child { position: static; }
    .db-scroll { overflow: visible; }
    .db-drivers { grid-template-columns: repeat(4, 1fr); gap: 6px; font-size: 8pt; }
    .db-chart { min-height: 0; }
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}