/* The playground page, styled with the same theme variables as the webviews. */
html, body { height: 100%; margin: 0; }
[hidden] { display: none !important; }
body { background: var(--vscode-editor-background); color: var(--vscode-foreground); font-family: var(--vscode-font-family); font-size: var(--vscode-font-size); }
.app { display: grid; grid-template-columns: clamp(210px, 28vw, 290px) minmax(0, 1fr) auto; grid-template-rows: 1fr auto; height: 100%; }
.side { grid-row: 1; overflow-y: auto; background: var(--vscode-sideBar-background); border-right: 1px solid var(--vscode-panel-border); }
.side section { padding: 6px 10px 10px; border-bottom: 1px solid var(--vscode-sideBarSectionHeader-border); }
.side h2 { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; margin: 4px 0 6px; display: flex; justify-content: space-between; align-items: center; color: var(--vscode-sideBarSectionHeader-foreground); }
.side select { width: 100%; background: var(--vscode-dropdown-background); color: var(--vscode-foreground); border: 1px solid var(--vscode-dropdown-border); padding: 3px; font: inherit; }
.list { list-style: none; margin: 0; padding: 0; max-height: 210px; overflow-y: auto; }
.list li { padding: 2px 4px; cursor: default; border-radius: 2px; }
#outline li { cursor: pointer; }
.outline-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; align-items: center; }
.side .outline-actions select { width: auto; flex: 1; min-width: 0; }
/* Under the outline: what can be done to a selected track, and to annotations, each a labelled group of equal buttons. */
.action-group { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 4px; margin-top: 8px; }
.action-label { grid-column: 1 / -1; font-size: 11px; color: var(--vscode-descriptionForeground); }
.action-group button { margin: 0; padding: 3px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.action-group #north-arrow, .action-group #track-frequencies { grid-column: span 2; }
#outline li:hover { background: var(--vscode-list-hoverBackground); }
#outline li.selected { background: var(--vscode-list-activeSelectionBackground); color: var(--vscode-list-activeSelectionForeground); }
#outline .tag { font-size: 10px; padding: 0 3px; border: 1px solid currentColor; border-radius: 2px; opacity: 0.85; }
.detail { color: var(--vscode-descriptionForeground); font-size: 12px; }
.step.undone .name, .step.abandoned .name { color: var(--vscode-descriptionForeground); }
.step.abandoned .name { text-decoration: line-through; }
button { background: var(--vscode-button-secondaryBackground); color: var(--vscode-button-secondaryForeground); border: 1px solid var(--vscode-button-border); padding: 3px 8px; margin: 2px 2px 2px 0; font: inherit; cursor: pointer; border-radius: 2px; }
button:hover:not(:disabled) { background: var(--vscode-button-secondaryHoverBackground); }
button:disabled { opacity: .5; cursor: default; }
button.primary { background: var(--vscode-button-background); color: var(--vscode-button-foreground); }
button.link { background: none; border: none; color: var(--vscode-list-highlightForeground); padding: 0 2px; font-size: 12px; }
button:focus-visible, li:focus-visible { outline: 1px solid var(--vscode-focusBorder); }
/* The time controller has its own styles (timecontrol.css, shared with VS Code); the side column's list style stays off it. */
.side .tc-speed, .side .tc-context { width: auto; padding: 0 2px; }
#panel-try button { display: block; width: 100%; text-align: left; }
/* The catalogue's items (CAP-08 to CAP-12): a mark is a symbol and words, never colour alone. */
.items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; overflow-wrap: anywhere; }
.items > li { padding: 3px 4px; border-radius: 2px; min-width: 0; }
.items > li.item-open { background: var(--vscode-list-inactiveSelectionBackground); }
.item-name { font-weight: 600; }
.item-mark { color: var(--vscode-charts-yellow, var(--vscode-editorWarning-foreground)); font-weight: normal; }
.item-flag { color: var(--vscode-editorWarning-foreground); }
.items details { font-size: 12px; }
.items summary { cursor: pointer; color: var(--vscode-descriptionForeground); }
.item-tracks { list-style: none; margin: 2px 0 0; padding: 0 0 0 12px; font-size: 12px; }
.item-actions { display: flex; flex-wrap: wrap; gap: 2px 4px; }
.item-actions button { margin: 2px 0 0; padding: 1px 6px; }
.tools li { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.file input { display: block; margin: 4px 0; color: var(--vscode-foreground); font: inherit; max-width: 100%; min-width: 0; }
.file { display: block; overflow-wrap: anywhere; }
.omitted-panel { padding: 10px 14px; overflow-y: auto; font-size: 13px; }
.omitted-panel h2 { font-size: 15px; margin: 4px 0 8px; }
.omitted-panel ul { padding-left: 18px; }
.omitted-panel li { margin: 2px 0; }
main { grid-row: 1; display: flex; min-width: 0; min-height: 0; position: relative; }
.frame { border: 0; display: block; }
.frame-map { flex: 1; min-width: 0; height: 100%; }
.side-frame { width: clamp(260px, 34vw, 380px); border-left: 1px solid var(--vscode-panel-border); display: flex; flex-direction: column; min-height: 0; }
.side-frame[hidden] { display: none; }
.side-frame .frame { flex: 1; min-height: 0; width: 100%; }
.side-frame .omitted-panel { flex: 1; }
.side-bar { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 2px 12px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--vscode-sideBarSectionHeader-foreground); background: var(--vscode-sideBar-background); border-bottom: 1px solid var(--vscode-panel-border); }
.side-bar button { text-transform: none; letter-spacing: 0; }
.unavailable h2 { color: var(--vscode-disabledForeground); }
.status.problem { color: var(--vscode-errorForeground); }
footer { grid-column: 1 / -1; padding: 3px 10px; background: var(--vscode-editorWidget-background); border-top: 1px solid var(--vscode-panel-border); font-size: 12px; }
.status.busy::before { content: "⟳ "; display: inline-block; animation: spin 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.toasts { position: fixed; right: 12px; bottom: 34px; display: flex; flex-direction: column; gap: 6px; max-width: 380px; z-index: 10; }
.toast { background: var(--vscode-editorWidget-background); color: var(--vscode-editorWidget-foreground); border: 1px solid var(--vscode-editorWidget-border); border-left: 3px solid var(--vscode-focusBorder); padding: 8px 10px; box-shadow: 0 2px 8px #0005; }
.toast.warning { border-left-color: var(--vscode-inputValidation-errorBorder); }
dialog { background: var(--vscode-editorWidget-background); color: var(--vscode-editorWidget-foreground); border: 1px solid var(--vscode-editorWidget-border); max-width: 460px; }
dialog::backdrop { background: #0006; }
.buttons { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
/* Narrower: the form or results go under the map, not beside it. */
@media (max-width: 900px) {
  main { flex-direction: column; }
  .frame-map { flex: 1; height: auto; min-height: 240px; }
  .side-frame { width: auto; height: min(440px, 55%); border-left: 0; border-top: 1px solid var(--vscode-panel-border); }
}
/* Phone-sized: one column, the page scrolls; the map first, then the panels. */
@media (max-width: 600px) {
  html, body { height: auto; }
  /* minmax(0, ...): a wide Tote scrolls inside itself; it never widens the page. */
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; height: auto; min-height: 100vh; }
  main { grid-row: 1; }
  .frame-map { flex: none; height: 55vh; }
  .side-frame { height: 460px; }
  .side { grid-row: 2; border-right: 0; overflow: visible; min-width: 0; }
  footer { grid-column: 1; position: sticky; bottom: 0; }
}
/* The Timeline (webview/timeline.css): narrative, notes and periods in time order (CAP-05, CAP-20).
   The list scrolls inside a panel of its own height, drawing only the rows in sight. */
#timeline { height: min(440px, 60vh); }
#north-arrow[aria-pressed="true"] { background: var(--vscode-button-background); color: var(--vscode-button-foreground); }
/* Cleaning tracks: the jumps found, the fix list and what to do to the fix chosen. */
/* The panel keeps its height beside the map; a long fix list scrolls inside it. */
.side-frame .clean-panel { display: flex; flex-direction: column; min-height: 0; }
.clean-panel p { margin: 4px 0 10px; }
.jump-list { list-style: none; padding: 0; margin: 0 0 10px; }
.jump-list li { margin: 4px 0; }
.jump-list label { cursor: pointer; }
.fix-list { max-height: none; flex: 1; min-height: 0; overflow-y: auto; }
.fix-list li { cursor: pointer; }
.fix-list li:hover { background: var(--vscode-list-hoverBackground); }
.fix-list li.selected { background: var(--vscode-list-activeSelectionBackground); color: var(--vscode-list-activeSelectionForeground); }
.fix-list li.selected .detail { color: inherit; }
.fix-actions { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--vscode-panel-border); }
.fix-actions .fix-chosen { flex-basis: 100%; font-weight: 600; }
.fix-actions .detail { flex-basis: 100%; }
.fix-actions select { font: inherit; background: var(--vscode-dropdown-background); color: var(--vscode-foreground); border: 1px solid var(--vscode-dropdown-border); padding: 2px; }
/* The small forms for moving, rotating and splitting a track. */
.track-form h2 { margin: 0 0 8px; font-size: 13px; text-transform: none; letter-spacing: 0; }
.track-form .form-row { display: grid; gap: 2px; margin-bottom: 8px; }
.track-form input, .track-form select { font: inherit; background: var(--vscode-input-background); color: var(--vscode-input-foreground); border: 1px solid var(--vscode-input-border, var(--vscode-widget-border)); padding: 3px 4px; }
.track-form input:focus, .track-form select:focus { outline: 1px solid var(--vscode-focusBorder); }
.track-form .form-note.problem { color: var(--vscode-errorForeground); }
.track-form .form-warning { max-width: 32em; margin: 0 0 8px; padding: 4px 6px; border-left: 3px solid var(--vscode-inputValidation-errorBorder); }
/* What a form explains, not warns of: the neutral bar an information toast has. */
.track-form .form-info { max-width: 32em; margin: 0 0 8px; padding: 4px 6px; border-left: 3px solid var(--vscode-focusBorder); }
/* A box to tick, beside what it says. */
.track-form .form-row.form-check { grid-template-columns: auto 1fr; align-items: center; column-gap: 6px; }
.track-form .form-check .form-note { grid-column: 1 / -1; }
/* Every side panel folds away by its heading, to keep the column short (decision, 14 Oct 2026).
   The heading stays a heading (h2) holding a button that looks like the heading's text: a screen
   reader still lists the panels by their headings, and the button says whether its panel is open. */
.side .panel-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.side .panel-head h2 { flex: 1; }
.side .panel-head .actions button { font-size: 11px; padding: 1px 6px; }
.side h2 button.fold { position: relative; display: block; width: 100%; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; }
.side h2 button.fold:hover:not(:disabled) { background: none; }
/* Its arrow sits in the margin, so each heading lines up with its panel's contents. */
.side h2 button.fold .arrow { position: absolute; top: 0; left: -10px; width: 10px; text-align: center; font-size: 10px; }
.side h2 button.fold .arrow::before { content: "▾"; }
.side .panel.folded h2 button.fold .arrow::before { content: "▸"; }
.side .panel.folded { padding-bottom: 6px; }
.side .panel.folded h2 { margin-bottom: 4px; }
.side .tote-pick select { width: auto; }
/* The outline's menu for a track: right-click, press and hold, or Shift+F10. */
.context-menu { position: fixed; z-index: 20; display: flex; flex-direction: column; min-width: 180px; padding: 4px 0; background: var(--vscode-menu-background, var(--vscode-editorWidget-background)); color: var(--vscode-menu-foreground, var(--vscode-foreground)); border: 1px solid var(--vscode-menu-border, var(--vscode-editorWidget-border)); box-shadow: 0 2px 8px var(--vscode-widget-shadow, transparent); }
.context-menu button { display: block; width: 100%; margin: 0; padding: 4px 12px; text-align: left; background: none; border: 0; border-radius: 0; color: inherit; }
.context-menu button:hover, .context-menu button:focus-visible { background: var(--vscode-menu-selectionBackground, var(--vscode-list-activeSelectionBackground)); color: var(--vscode-menu-selectionForeground, var(--vscode-list-activeSelectionForeground)); outline: none; }
/* Labels, symbols and arrows (CAP-32): a quiet form, a heading for each chooser, aligned; it never scrolls sideways, down to 210 px. */
.freq-form { width: min(340px, calc(100vw - 40px)); box-sizing: border-box; }
.freq-form .freq-tracks { margin: -4px 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.freq-form .freq-row { display: grid; grid-template-columns: 4.6em minmax(0, 1fr); align-items: center; column-gap: 8px; row-gap: 3px; margin-bottom: 8px; }
.freq-form .freq-row select, .freq-form .freq-row input { min-width: 0; width: 100%; box-sizing: border-box; }
.freq-form .freq-row input, .freq-form .freq-row .form-note { grid-column: 2; }
.freq-form .freq-row .form-note:empty { display: none; }
.freq-form .buttons { margin-top: 12px; }
.fix-actions .toggle[aria-pressed="true"] { background: var(--vscode-button-background); color: var(--vscode-button-foreground); }
#outline .freq-detail { display: block; font-size: 11px; }
/* Export image (SUB-25): four short choices, then the button; finding an image's source by its file or its ID. Narrow: one column, nothing sideways. */
.export-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 4px 8px; margin-bottom: 6px; }
.export-form label { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12px; }
.export-form label.check { flex-direction: row; align-items: center; gap: 6px; }
.export-said { margin: 4px 0 2px; overflow-wrap: anywhere; }
.side h3.sub { font-size: 12px; margin: 12px 0 4px; color: var(--vscode-foreground); font-weight: 600; }
.find-id { display: flex; flex-direction: column; gap: 2px; margin: 6px 0; font-size: 12px; }
.find-id-row { display: flex; gap: 4px; min-width: 0; }
.find-id input { flex: 1; min-width: 0; font: inherit; font-family: var(--vscode-editor-font-family); background: var(--vscode-input-background); color: var(--vscode-input-foreground); border: 1px solid var(--vscode-input-border, var(--vscode-widget-border)); padding: 3px 4px; }
.find-id input[aria-invalid="true"] { border-color: var(--vscode-inputValidation-errorBorder, var(--vscode-errorForeground)); }
.find-id .problem { color: var(--vscode-errorForeground); }
.find-results { list-style: none; margin: 4px 0; padding: 0; }
.find-results li { padding: 3px 0; overflow-wrap: anywhere; }
.find-results li .detail { display: block; }
#history li.shown { outline: 1px dashed var(--vscode-editorWarning-foreground, var(--vscode-focusBorder)); outline-offset: -1px; }
#body-export input[type="file"] { max-width: 100%; min-width: 0; }
.export-form { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
/* Walkthroughs (CAP-25): the same steps as VS Code's Get Started page, each ticked when it is done.
   Each step is a button that opens it, its tick said in words too; nothing scrolls sideways, down to 210 px. */
.tour-pick { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.tour-summary { margin: 6px 0; overflow-wrap: anywhere; }
.tour-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.tour-step { min-width: 0; }
.side .tour-head { display: flex; align-items: baseline; gap: 6px; width: 100%; margin: 0; padding: 3px 2px; text-align: left; background: none; border: 0; border-radius: 2px; color: inherit; white-space: normal; overflow-wrap: anywhere; }
.side .tour-head:hover:not(:disabled) { background: var(--vscode-list-hoverBackground); }
.tour-mark { flex: none; display: inline-flex; justify-content: center; align-items: center; min-width: 1.4em; height: 1.4em; border-radius: 50%; border: 1px solid var(--debrief-guide-accent); color: var(--debrief-guide-accent); font-size: 11px; font-weight: 600; }
/* The step to do next: its number in a disc of the accent, the panel's background as its text. */
.tour-step.next .tour-mark { background: var(--debrief-guide-accent); color: var(--vscode-sideBar-background); border-color: var(--debrief-guide-accent); }
.tour-step.done .tour-mark { background: var(--vscode-button-background); color: var(--vscode-button-foreground); border-color: var(--vscode-button-background); }
.tour-step.next .tour-title { font-weight: 600; }
.tour-step.done .tour-title { color: var(--vscode-descriptionForeground); }
.tour-body { padding: 2px 2px 8px calc(1.4em + 8px); overflow-wrap: anywhere; min-width: 0; }
.tour-body p { margin: 4px 0; }
.tour-body button { max-width: 100%; white-space: normal; text-align: left; }
.tour-media { display: block; margin: 4px 0; max-width: 100%; }
.tour-media svg { display: block; width: 100%; height: auto; }
.tour-body kbd { font-family: var(--vscode-editor-font-family); font-size: 0.92em; padding: 0 3px; border: 1px solid var(--vscode-widget-border, var(--vscode-panel-border)); border-radius: 3px; }
.tour-said { margin: 6px 0 0; min-height: 1em; overflow-wrap: anywhere; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* On a wide screen the walkthroughs have a column of their own, on the right of the map: a step's
   words stay in sight, whatever the side column is scrolled to, while it is done there and on the map.
   It scrolls on its own. Folded, it is its heading on its side, a narrow tab, and the map takes the
   rest (product owner, 22 Oct 2026). Narrower than 1200 px it is not shown: the walkthroughs are the
   side column's first panel, as before (host.ts moves them). */
.side.guide { grid-row: 1; grid-column: 3; min-height: 0; border-right: 0; border-left: 0; }
.guide > .panel { width: clamp(240px, 20vw, 300px); box-sizing: border-box; padding-left: 14px; border-bottom: 0; }
.guide > .panel.folded { width: auto; padding: 8px 5px; }
.guide > .panel.folded { background: var(--debrief-guide-tint); }
.guide > .panel.folded h2 { margin: 0; }
.guide > .panel.folded h2 button.fold { writing-mode: vertical-rl; padding: 2px 0; white-space: nowrap; }
.guide > .panel.folded h2 button.fold .arrow { position: static; display: inline-block; width: auto; margin-bottom: 6px; text-orientation: upright; }
.guide > .panel.folded h2 button.fold .arrow::before { content: "◂"; }
/* A note shows over the map, not over the walkthroughs' column. */
body:has(#guide:not([hidden]) > .panel:not(.folded)) .toasts { right: calc(clamp(240px, 20vw, 300px) + 12px); }
body:has(#guide:not([hidden]) > .panel.folded) .toasts { right: 44px; }
/* The guidance accent (style guide, Theme; product owner, 22 Oct 2026): the walkthroughs are where a
   newcomer gains an overall understanding, so they stand apart from the panels around them, in the
   theme's link colour (its focus colour where a theme has none): a 3 px edge, a heading bar tinted
   with it, and the steps' numbers in it, the next step's a disc of it. Folded, the tab carries it too.
   Interface, not data: the tracks' colours are untouched. */
:root {
  --debrief-guide-accent: var(--vscode-textLink-foreground, var(--vscode-focusBorder));
  --debrief-guide-tint: color-mix(in srgb, var(--debrief-guide-accent) 14%, var(--vscode-sideBar-background));
}
#panel-tour { border-left: 3px solid var(--debrief-guide-accent); }
/* In the right-hand column the edge runs the column's full height, open or folded. */
.guide > #panel-tour { min-height: 100%; }
#panel-tour > h2 { background: var(--debrief-guide-tint); margin: -6px -10px 6px; padding: 6px 10px; }
#panel-tour.folded > h2 { margin-bottom: 0; }
.guide > #panel-tour:not(.folded) > h2 { margin-left: -14px; padding-left: 14px; }
/* Folded on the right, the whole tab is the tinted bar. */
.guide > #panel-tour.folded > h2 { margin: 0; padding: 0; background: none; }