/* The front page: three lanes of studies over the list of them. Each anchor keeps one colour, on the timeline and in the
   table; the marks are thin, the labels stay in the text colours, and the table says everything the timeline shows.
   These three colours pass the dataviz validator in each theme (Claude Code's bundled validate_palette.js, 3 November 2026). */
:root { --lens-people: #2a78d6; --lens-places: #eb6834; --lens-things: #1baf7a }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --lens-people: #256abf; --lens-places: #d95926; --lens-things: #199e70 } }
:root[data-theme="dark"] { --lens-people: #256abf; --lens-places: #d95926; --lens-things: #199e70 }

.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-inline-end: 4px }
.dot.people { color: var(--lens-people) }
.dot.places { color: var(--lens-places) }
.dot.things { color: var(--lens-things) }
.dot.f { background: currentColor }
.dot.h { box-shadow: inset 0 0 0 1.4px currentColor }
.dot.n { box-shadow: inset 0 0 0 1px var(--ds-rule) }

.explain .tj { margin: 0 0 6px; padding-inline-start: var(--ds-space-2); border-inline-start: 2px solid var(--ds-rule) }
.explain .tj p { margin: 0 0 3px }
.moments a { display: grid; grid-template-columns: max-content 1fr; gap: var(--ds-space-2); padding: 3px 4px; border-radius: var(--ds-radius-act); color: inherit; text-decoration: none }
.moments a:hover { background: var(--ds-hover) }

.anchors-key { width: 100%; margin-bottom: 4px }
.anchors-key th, .anchors-key td { height: auto; border-bottom: 0; vertical-align: top }
.anchors-key th { font-weight: var(--ds-weight-semibold); white-space: nowrap; text-align: start }
.anchors-key td { color: var(--ds-text-2) }
.anchors-key .num, .studies-table .when { font-family: var(--ds-font-mono); font-size: 11px; font-variant-numeric: tabular-nums }
.anchors-key .num { padding-inline-end: 0; color: var(--ds-text); text-align: end }

/* The timeline takes the height its lanes need, and the list takes the rest and scrolls. */
.work.front { grid-template-rows: auto minmax(0, 1fr); background: var(--ds-surface) }
.timeline { position: relative; margin: 0; min-width: 0; border-bottom: var(--ds-line) solid var(--ds-rule); font-size: 11px }
.timeline svg { display: block; width: 100% }
.timeline text { fill: var(--ds-text); font-size: 11px }
.timeline .year { fill: var(--ds-text-2); font-family: var(--ds-font-mono); font-size: 10.5px }
.timeline .lane-name { font-weight: var(--ds-weight-semibold) }
.timeline .rule { stroke: var(--ds-rule); stroke-width: 1 }
.timeline .bar.faint { opacity: .45 }
.timeline .people { fill: var(--lens-people) }
.timeline .places { fill: var(--lens-places) }
.timeline .things { fill: var(--lens-things) }
.timeline .touch { fill: var(--ds-surface); stroke-width: 1.4 }
.timeline .touch.people { stroke: var(--lens-people) }
.timeline .touch.places { stroke: var(--lens-places) }
.timeline .touch.things { stroke: var(--lens-things) }
.timeline .link-line { stroke: var(--ds-text-2); stroke-width: 1; stroke-dasharray: 2 2 }
.timeline .hit { fill: transparent }
.timeline .study { cursor: pointer }
.timeline .study.hot text { font-weight: var(--ds-weight-semibold) }
.timeline a.study:hover text, .timeline a.study:focus text { text-decoration: underline }
.timeline .touch-hot { stroke-width: 2.4 }
.tip { position: absolute; z-index: 2; max-width: 300px; padding: 2px 6px; border: var(--ds-line) solid var(--ds-rule); border-radius: var(--ds-radius-act); background: var(--ds-surface); color: var(--ds-text); pointer-events: none }
.tip b { font-weight: var(--ds-weight-semibold) }
.tip span { display: block; color: var(--ds-text-2) }

.studies { min-height: 0; display: flex; flex-direction: column }
.studies-body { flex: 1; min-height: 0; overflow: auto; padding: 0 }
.studies-table { width: 100%; min-width: 900px; border-collapse: collapse }
.studies-table thead th { position: sticky; top: 0; z-index: 1; background: var(--ds-surface); text-align: start; white-space: nowrap }
.studies-table th, .studies-table td { padding: 1px var(--ds-space-2) 1px 0; vertical-align: top }
.studies-table th:first-child, .studies-table td:first-child { padding-inline-start: var(--ds-space-2) }
.studies-table td { height: auto; line-height: 1.3 }
.studies-table tr.lens th { padding-top: 4px; font-weight: var(--ds-weight-semibold); text-align: start; border-bottom: var(--ds-line) solid var(--ds-rule) }
.studies-table td:nth-child(1) { width: 19% }
.studies-table td:nth-child(2) { width: 11% }
.studies-table td:nth-child(3) { width: 50px; white-space: nowrap }
.studies-table td:nth-child(4) { width: 29% }
.studies-table td:nth-child(5) { width: 25% }
.studies-table .anchors .dot { margin-inline-end: 2px }
.studies-table .state { color: var(--ds-text-2) }
.studies-table .state.open { color: var(--ds-text); font-weight: var(--ds-weight-semibold) }
.studies-table tr.hot td { background: var(--ds-hover) }

/* A phone: Start here first on this page, then the lanes and the list; the list scrolls sideways in its own box. */
@media (width <= 639px) {
  .work.front { order: 0 }
  .studies-body { overflow-x: auto; overflow-y: visible }
}