/* Pockets is a v2 workbench (data-ds-page="tool", compact), dense as a data tool is (TJ, 31 October 2026: "a data analytics
   tool", not "a banking app"): a thin frame, rows 20 px, no card padding and no ground between panels, and the controls float
   over the pictures. Colours for place and movement are data and live here; they passed the data-viz validator, all pairs, in
   both themes (light: blue, aqua, yellow, red; CVD worst pair 6.9, so every colour also has its name in the key and tables). */
:root {
  --pk-home: var(--ds-band); --pk-unnamed: var(--ds-data-gray-6); --pk-transport: var(--ds-text); --pk-ghost: var(--ds-rule); --pk-track: var(--ds-band);
  --pk-office: #2a78d6; --pk-regular: #1baf7a; --pk-other: #eda100; --pk-walking: #e34948;
}
:root[data-theme="dark"] { --pk-office: #3987e5; --pk-regular: #199e70; --pk-other: #c98500 }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) { --pk-office: #3987e5; --pk-regular: #199e70; --pk-other: #c98500 } }

/* Hidden means hidden, whatever display a class gives: the row tools, the view tabs and the held page all rely on it. */
[hidden] { display: none !important }

.ds-topbar { height: 32px; min-height: 32px; padding: 0 var(--ds-space-3) }
.ds-topbar .ds-tools { margin-inline-start: auto }
.sketch-tag { margin-inline-start: var(--ds-space-2); font-size: 11px }
.ds-statusbar { min-height: 20px; padding: 1px var(--ds-space-3); font-size: 11px }
.ds-statusbar > [role="status"] { min-height: 0 }
.ds-split > [role=separator] { width: 5px }
.side { background: var(--ds-surface); overflow-x: hidden }
.stack-pane, .day-pane { background: var(--ds-surface) }
.ds-dock-head { padding: 2px var(--ds-space-2) }
.ds-dock-head h2 { font-size: 12px }
.ds-dock-body { padding: 2px var(--ds-space-2) var(--ds-space-2) }
.ds-checkbox { min-height: 18px; gap: 4px; font-size: 11px }
.ds-checkbox input { width: 12px; height: 12px }
.ds-icon-button { width: 22px; height: 22px; min-width: 22px; min-height: 22px; padding: 0 }

/* Start here: in the tool's own type, beside the picture it explains. */
.explain, .side { font-size: 12px; line-height: 1.4 }
.side p { margin: 0 0 6px; font-size: inherit; line-height: inherit; max-width: none }
.side h3 { margin: 6px 0 2px; font-size: 12px; font-weight: var(--ds-weight-semibold) }
.fine { font-size: 11px; color: var(--ds-text-2) }
.moments { list-style: none; margin: 0; padding: 0 }
.moments button { display: grid; grid-template-columns: 74px 1fr; gap: 6px; width: 100%; padding: 2px 3px; border: 0; border-radius: var(--ds-radius-act);
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer }
.moments button:hover { background: var(--ds-hover) }
.moments .t { font-family: var(--ds-font-mono); font-size: 11px; color: var(--ds-text-2) }
.ds-table.tight { width: 100%; font-size: 11px; line-height: 1.25 }
.ds-table.tight th, .ds-table.tight td { height: 18px; padding: 0 4px 0 0; white-space: nowrap; font-size: 11px }
.ds-table.tight .n, .data .n { text-align: right; font-variant-numeric: tabular-nums }
.ds-table.tight td.wrap, .ds-table.tight th { white-space: normal }
.ds-table.tight tbody tr:last-child td { border-bottom-color: var(--ds-rule) }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ds-text-2) }
.sw { display: inline-block; width: 10px; height: 10px; margin-inline-end: 3px; vertical-align: -1px }
.sw.blank { background: var(--ds-surface); box-shadow: inset 0 0 0 1px var(--ds-rule-strong) }

/* The dock's notes: short, and in the tool's own type. */
.read { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 1px 6px; margin: 0; font-size: 11.5px; line-height: 1.35 }
.read dt { font-weight: var(--ds-weight-semibold); white-space: nowrap }
.read dd { margin: 0 }
.months { display: flex; font: 9.5px/1.2 var(--ds-font-mono); color: var(--ds-text-2); margin-top: 2px }
.months span { min-width: 0; overflow: hidden; border-left: var(--ds-line) solid var(--ds-rule); padding-left: 1px }
.stream { margin: 2px 0 5px }
.stream-head { display: flex; align-items: baseline; gap: 5px; font-size: 11.5px }
.stream-head .letter { font-family: var(--ds-font-mono); color: var(--ds-text-2); font-weight: var(--ds-weight-medium) }
.stream-head .days { margin-inline-start: auto; font: 10.5px var(--ds-font-mono); color: var(--ds-text-2) }
.cover-bar { display: block; width: 100%; height: 6px; background: var(--ds-surface-sunk) }
.cover-bar rect { fill: var(--ds-text) }
.stream p { margin: 2px 0 0; font-size: 11px; line-height: 1.32; color: var(--ds-text-2) }
.side p.together { font-size: 11.5px; margin: 4px 0 0; padding: 3px 5px; background: var(--ds-surface-sunk) }
.caveats { list-style: none; margin: 0 0 4px; padding: 0; font-size: 11px; line-height: 1.32 }
.caveats li { margin: 0 0 3px; color: var(--ds-text-2) }
.caveats b { color: var(--ds-text); font-weight: var(--ds-weight-semibold) }
.types { margin: 2px 0 6px }
.types .rule { display: block; font-size: 10px; line-height: 1.2; color: var(--ds-text-2); padding-bottom: 1px; white-space: normal }

/* The key under the rows, and on the map. */
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 1px 9px; padding: 2px 6px 3px; border-top: var(--ds-line) solid var(--ds-rule); font-size: 11px; line-height: 1.3; min-width: 0 }
.legend .says { flex: 1 0 100%; color: var(--ds-text-2) }
.legend .item, .map-key .item { white-space: nowrap; cursor: help }
.legend .star { color: var(--ds-text-2); font-size: 10.5px }
.ramp { display: inline-block; width: 70px; height: 9px; vertical-align: -1px }
.map-key { right: 4px; bottom: 4px; gap: 7px; padding: 1px 5px; flex-wrap: wrap; max-width: calc(100% - 180px); justify-content: flex-end }
.map-key .line { display: inline-block; width: 12px; height: 2px; margin-inline-end: 3px; vertical-align: 3px }
.map-key .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-inline-end: 3px; vertical-align: 0 }
#day-name { cursor: help }

/* The work: the days on the left, the selected day on the right. */
.work { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-width: 0; min-height: 0; height: 100%; overflow: hidden }
.stack-pane { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 20px 16px minmax(0, 1fr) auto; min-width: 0; min-height: 0; border-right: var(--ds-line) solid var(--ds-rule) }
#axis { display: block; width: 100%; height: 16px }
.scroller { min-height: 0; overflow-y: auto; overflow-x: hidden }
#stack { display: block; width: 100%; cursor: crosshair }
.over { position: absolute; display: flex; align-items: center; gap: 2px; padding: 1px; border: var(--ds-line) solid var(--ds-rule);
  border-radius: var(--ds-radius-act); background: color-mix(in srgb, var(--ds-surface) 88%, transparent); backdrop-filter: blur(4px); font-size: 11px; z-index: 2 }
.over .ds-icon-button { border-color: transparent; background: transparent }
.over .ds-icon-button:hover { background: var(--ds-hover) }
.over select, .tab-row select { font: inherit; font-size: 11px; height: 20px; padding: 0 2px; border: var(--ds-line) solid var(--ds-rule); border-radius: var(--ds-radius-act); background: var(--ds-surface); color: var(--ds-text) }
.stack-tools { top: 38px; right: 8px }
.view-tabs { border-bottom: var(--ds-line) solid var(--ds-rule); overflow: auto hidden; scrollbar-width: none }
.moments button.is-open { background: var(--ds-surface-sunk); box-shadow: inset 2px 0 0 var(--ds-text) }
.views { margin-top: 2px }
.held { position: absolute; inset: 40px 16px auto 16px; margin: 0; font-size: 13px; line-height: 1.7; max-width: 64ch }
.held .ds-button, .who .ds-button, .slides-link { font-size: 11px; min-height: 22px; padding: 0 8px; vertical-align: 1px }
.signout { display: inline }
.who { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ds-text-2); margin-inline-end: 6px; white-space: nowrap }
@media (prefers-reduced-transparency: reduce) { .over { background: var(--ds-surface); backdrop-filter: none } }

.day-pane { display: grid; grid-template-rows: minmax(160px, 1fr) auto minmax(120px, 36%); min-width: 0; min-height: 0 }
.map-wrap { position: relative; min-height: 0; overflow: hidden }
#map { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none }
#map:active { cursor: grabbing }
.day-title { top: 4px; left: 4px; padding-inline: 1px 1px }
.day-title output { font: 500 11px/1.2 var(--ds-font-mono); font-variant-numeric: tabular-nums; padding-inline: 2px; white-space: nowrap }
.map-tools { top: 4px; right: 4px; padding-inline-start: 4px; gap: 6px }
.scale { cursor: help; position: absolute; left: 6px; bottom: 4px; font: 10px/1.2 var(--ds-font-mono); color: var(--ds-text-2); background: color-mix(in srgb, var(--ds-surface) 80%, transparent); padding: 0 3px }
.strips-wrap { border-top: var(--ds-line) solid var(--ds-rule) }
#strips { display: block; width: 100%; cursor: crosshair }

.tables { display: grid; grid-template-rows: 20px minmax(0, 1fr); min-height: 0; border-top: var(--ds-line) solid var(--ds-rule-strong); margin: 0 }
.tab-row { display: flex; align-items: center; gap: 2px; padding: 0 4px; background: var(--ds-surface-sunk); border-bottom: var(--ds-line) solid var(--ds-rule); font-size: 11px; min-width: 0 }
.tab-row [role=tab] { all: unset; flex: none; white-space: nowrap; padding: 1px 6px; cursor: pointer; border-radius: 2px; color: var(--ds-text-2); font-size: 11px }
.tab-row [role=tab]:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: -2px }
.tab-row [role=tab][aria-selected=true] { background: var(--ds-surface); color: var(--ds-text); font-weight: var(--ds-weight-semibold) }
.tab-note { margin-inline-start: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.table-scroll { overflow: auto; min-height: 0 }
.data { width: 100%; border-collapse: collapse; font-size: 11px; line-height: 1.25 }
.data th { position: sticky; top: 0; background: var(--ds-surface); font: 500 10px/18px var(--ds-font-mono); color: var(--ds-text-2); text-align: left; padding: 0 6px; border-bottom: var(--ds-line) solid var(--ds-rule); white-space: nowrap; z-index: 1 }
.data th.n { text-align: right }
.data th[data-tip] { cursor: help }
.data td { height: 18px; padding: 0 6px; border-bottom: var(--ds-line) solid var(--ds-rule-soft); white-space: nowrap }
.data td.wrap { white-space: normal; overflow-wrap: anywhere; min-width: 120px }
.data td.m { font-family: var(--ds-font-mono); font-size: 10.5px; font-variant-numeric: tabular-nums }
.data tbody tr:hover td { background: var(--ds-hover) }
.empty { margin: 6px; font-size: 11px; color: var(--ds-text-2) }

.tip { position: fixed; z-index: 10; max-width: 340px; padding: 2px 6px; border: var(--ds-line) solid var(--ds-rule-strong); border-radius: 2px; background: var(--ds-surface); color: var(--ds-text); font-size: 11px; line-height: 1.35; pointer-events: none; white-space: pre-line; box-shadow: 0 1px 3px rgb(0 0 0 / 0.25) }

@media (width <= 900px) {
  .work { grid-template-columns: minmax(0, 1fr); grid-template-rows: 60vh auto; overflow: auto }
  .day-pane { grid-template-rows: 300px auto 280px }
  /* A narrow map: the tools go under the day's name, and the key over the scale, so that none of the three covers another. */
  .map-tools { top: 30px }
  .map-key { bottom: 20px; max-width: calc(100% - 8px) }
}

/* On a live slide (dist/slides/): the days alone, in the whole of the frame. The slide carries the page number and the footer, and the slides before it say what this is. */
[data-embed] :is(.ds-skip, .ds-topbar, .ds-statusbar, #side, #main > [role=separator]) { display: none !important }
html[data-embed][data-ds-page="tool"] > body:has(> .ds-split) { grid-template-rows: minmax(0, 1fr) }
html[data-embed][data-ds-page="tool"] > body > .ds-split { grid-template-columns: minmax(0, 1fr) !important }