/* AI Test Drive: the drive timeline and the debrief's PDF and email actions (issue #164), on the drive screens' debrief
   and Drive Studio's drive page (timeline-view.js). Colours are the kit's variables, so the client's brand (the route
   line is --series) and dark mode come with them; the result colours are fixed so a brand never reads as a result.
   Every marker and row is a 44 point target. */
.tl { --tl-covered: #1d6560; --tl-late: #8a5a00; --tl-missed: #b42318; --tl-judge: #5f6880;
  --tl-coach-bg: var(--btn-primary-bg); --tl-coach-text: var(--btn-primary-text); container-type: inline-size; }
:root[data-theme="dark"] .tl { --tl-missed-text: #ff9d93; --tl-judge-text: #c9c7d3; --tl-late-ring: #ffd27a; --tl-covered-text: #7fdcca; --tl-late-text: #ffd27a; }
.tl h2 { font-size: 18px; margin: 0; color: var(--heading); }
.tl-sub { margin: -6px 0 0; }
.tl-body { display: grid; gap: 16px; min-width: 0; }
@container (min-width: 820px) { .tl-body { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); align-items: start; } }
.tl-map { position: relative; width: 100%; min-height: 200px; border-radius: 10px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.tl-draw, .tl-leaders { position: absolute; inset: 0; }
.tl-draw svg { display: block; }
.tl-casing { stroke: var(--card); }
.tl-line { stroke: var(--series); }
.tl-planned { stroke: var(--muted); }
.tl-start { fill: var(--ink); stroke: var(--card); }
.tl-leader { stroke: var(--ink-2); stroke-width: 1; }
.tl-dot { fill: var(--ink-2); }
.tl-mk { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; background: transparent; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.tl-mk:focus-visible { outline: 3px solid var(--control); outline-offset: 0; }
.tl-mk[aria-pressed="true"] .tl-chip { transform: scale(1.22); box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--ink); }
.tl-chip { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; font-size: 13px; font-weight: 700;
  color: #ffffff; background: var(--tl-covered); box-shadow: 0 0 0 2px var(--card); flex: none; line-height: 1; }
@media (prefers-reduced-motion: no-preference) { .tl-chip { transition: transform 0.15s var(--ease); } }
.tl-chip.tl-m-covered { background: var(--tl-covered); }
.tl-chip.tl-m-late, .tl-chip.tl-m-partial { background: var(--tl-late); }
.tl-chip.tl-m-mishandled { background: var(--tl-missed); }
.tl-chip.tl-m-missed { background: var(--card); color: var(--tl-missed-text, var(--tl-missed)); box-shadow: inset 0 0 0 2.5px var(--tl-missed), 0 0 0 2px var(--card); }
.tl-chip.tl-m-not_judged { background: var(--card); color: var(--tl-judge-text, var(--tl-judge)); box-shadow: inset 0 0 0 2.5px var(--tl-judge), 0 0 0 2px var(--card); }
.tl-chip.tl-m-coaching { border-radius: 6px; background: var(--tl-coach-bg); color: var(--tl-coach-text); }
.tl-chip.tl-late { outline: 2px dashed var(--tl-late-ring, var(--tl-late)); outline-offset: 2px; }
.tl-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tl-key { gap: 6px 14px; }
.tl-sw { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--tl-covered); }
.tl-sw.tl-m-late, .tl-sw.tl-m-partial { background: var(--tl-late); }
.tl-sw.tl-m-missed { background: var(--card); box-shadow: inset 0 0 0 2px var(--tl-missed); }
.tl-sw.tl-late { outline: 1.5px dashed var(--tl-late-ring, var(--tl-late)); outline-offset: 1.5px; }
.tl-sw.sq { border-radius: 3px; }
.tl-sw.tl-m-coaching { background: var(--tl-coach-bg); }
.tl-sw.tl-start-key { background: var(--ink); }
/* The result words: the same colours as the markers, whatever the brand's accent (the kit's good news follows it). */
.tl .pill.tl-p { color: var(--ink); background: var(--line-2); }
.tl .pill.tl-p-covered { background: color-mix(in srgb, var(--tl-covered) 16%, var(--card)); color: var(--tl-covered-text, var(--tl-covered)); }
.tl .pill.tl-p-late, .tl .pill.tl-p-partial { background: color-mix(in srgb, var(--tl-late) 16%, var(--card)); color: var(--tl-late-text, var(--tl-late)); }
.tl .pill.tl-p-missed, .tl .pill.tl-p-mishandled { background: color-mix(in srgb, var(--tl-missed) 12%, var(--card)); color: var(--tl-missed-text, var(--tl-missed)); }
.tl .pill.tl-p-coaching { background: var(--navy-tint); color: var(--heading); }
.tl-detail { border-left: 3px solid var(--series); padding: 2px 0 2px 14px; display: flex; flex-direction: column; gap: 8px; }
.tl-detail p { margin: 0; font-size: 15px; }
.tl-detail-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tl-detail-h b { font-size: 16px; color: var(--heading); }
.tl-when { color: var(--ink-2); }
.tl-hint { margin: 0; }
.tl-said { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tl-said li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; font-size: 15px; }
.tl-said li > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.tl-said small { font-size: 12px; font-weight: 600; color: var(--muted); }
.tl-said-t { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; padding-top: 18px; }
.tl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.tl-list li { border-bottom: 1px solid var(--line); }
.tl-row { display: grid; grid-template-columns: 30px 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 4px;
  border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 15px; text-align: left; cursor: pointer; border-radius: 8px; }
.tl-row:hover { background: var(--line-2); }
.tl-row:focus-visible { outline: 3px solid var(--control); outline-offset: -3px; }
.tl-row[aria-pressed="true"] { background: var(--navy-wash); }
.tl-row-t { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; }
.tl-row-n { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.tl-row-n small { font-size: 12px; color: var(--muted); }
.tl-actions .tl-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.tl-actions .tl-btns .btn { flex: 1 1 180px; }
.tl-email { display: flex; flex-direction: column; gap: 12px; }
.tl-email small { display: block; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.tl-actions .notice { margin: 0; }
/* Save this drive as a route (issue #167). */
.tl-save-form { display: flex; flex-direction: column; gap: 12px; }
.tl-save-form textarea { resize: vertical; min-height: 88px; }
.tl-save .notice p { margin: 8px 0 0; }
.tl-save-warn { font-weight: 600; }