/* Self-hosted faces (issue 908, decided 2026-10-28): static/fonts, OFL, see NOTICE.txt there. Sans for text, serif for headlines and big figures. */
@font-face { font-family: "Source Sans 3"; font-weight: 400; font-display: swap; src: url(/app/static/fonts/source-sans-3-400.woff2) format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 600; font-display: swap; src: url(/app/static/fonts/source-sans-3-600.woff2) format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 700; font-display: swap; src: url(/app/static/fonts/source-sans-3-700.woff2) format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 600; font-display: swap; src: url(/app/static/fonts/source-serif-4-600.woff2) format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 700; font-display: swap; src: url(/app/static/fonts/source-serif-4-700.woff2) format("woff2"); }
/* The clean shell both page families share (blocks.html and base.html): page frame, the one top bar, the Lab row, the footer,
   the ⌘K palette and the ? help. Colours, fonts and sizes come from tokens.css; a page's own CSS loads after this. */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; color-scheme: dark; }
body { margin: 0; background: var(--ground); color: var(--text); font: 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
main { max-width: 760px; margin: 0 auto; padding: 16px; }
a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
kbd { font: 12px var(--mono); padding: 2px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); }

nav.top, nav.lab, nav.sub { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 16px; border-bottom: 1px solid var(--line); }
nav.top a, nav.lab a, nav.sub a, nav.top button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--r-control); text-decoration: none; color: var(--muted); font-weight: 400; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
nav.top a.on, nav.lab a.on, nav.sub a.on { color: var(--text); background: var(--chip); box-shadow: inset 0 -2px 0 var(--accent); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
nav.top a.brand { padding: 0 8px 0 4px; min-width: 44px; justify-content: center; } nav.top a.brand img { display: block; }
nav.top .tail, nav.top .sports { display: flex; flex-wrap: wrap; gap: 4px; } nav.top .tail { margin-left: auto; }
nav.top button { font: inherit; font-weight: 400; background: none; border: 1px solid var(--border); cursor: pointer; }
nav.lab, nav.sub { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; } nav.lab a, nav.sub a { flex: 0 0 auto; }
/* The Lab row: "‹ Lab" back to the map and the group's name stay put at the left; only that group's pages scroll. */
nav.lab .here { position: sticky; left: 0; z-index: 1; display: flex; flex: 0 0 auto; background: var(--ground); box-shadow: -16px 0 0 var(--ground), 8px 0 8px var(--ground); }
nav.lab a.map { color: var(--text); font-weight: 600; } nav.lab a.map::before { content: "‹"; margin-right: 6px; color: var(--muted); }
nav.lab .group { align-self: center; padding: 0 12px 0 4px; margin-right: 4px; border-right: 1px solid var(--line);
  color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; line-height: 28px; white-space: nowrap; }
/* Phones: the top bar is one row that scrolls sideways, like the Lab row under it, and never wraps or hides a link. */
@media (max-width: 640px) {
  nav.top { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  nav.top > a, nav.top > button, nav.top .tail, nav.top .sports { flex: 0 0 auto; }
  nav.top a.record { display: none; }  /* a phone's bar is full: the footer carries the link */
  nav.top .tail, nav.top .sports { flex-wrap: nowrap; }
}
/* The Lab map (D5, issue 909): the groups side by side where there is room. A group is not a card: its name in the serif and its question
   over the pages as rows on the ground, a hairline between them and a chevron at the right (the list pattern of the Board and Picks). */
.lab-map { margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); gap: 8px 48px; align-items: start; }
.lab-map .lab-group { margin: 0 0 20px; }
.lab-map .lab-group > h2 { margin: 0; padding: 8px 0 10px; border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: 24px; font-weight: 700; line-height: 1.15; }
.lab-map h2 .q { display: block; margin-top: 4px; color: var(--muted); font-family: var(--sans); font-size: 15px; font-weight: 400; }
.lab-map .plist { padding: 0; }
.lab-map .plist-row > a { position: relative; padding-right: 28px; }
.lab-map .plist-row > a::after { content: "›"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 22px; }
.lab-map .plist-row:last-child > a { border-bottom: 0; }
/* The Lab row scrolls sideways: a soft edge shows on whichever side has more links (the shade stays put; the cover scrolls with the links). */
nav.lab, nav.sub { background:
  linear-gradient(to right, var(--ground) 40%, transparent) left / 32px 100% no-repeat local,
  linear-gradient(to left, var(--ground) 40%, transparent) right / 32px 100% no-repeat local,
  linear-gradient(to right, var(--edge-shade), transparent) left / 16px 100% no-repeat scroll,
  linear-gradient(to left, var(--edge-shade), transparent) right / 16px 100% no-repeat scroll,
  var(--ground); }
footer.status { max-width: 760px; margin: 0 auto; padding: 16px; color: var(--muted); font-size: 13px; }
footer.status > span { margin-right: 12px; }
/* The customer app's one way back to the public record (issue 1317): a plain link in the top bar where there is room, and always in the footer. */
nav.top a.record { margin-left: auto; }
footer.status a.record { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); }

.palette, .help { width: min(680px, calc(100vw - 32px)); max-height: min(70vh, 560px); margin: 10vh auto auto; padding: 0; border: 1px solid var(--border);
  border-radius: 12px; background: var(--card); color: var(--text); font: 16px/1.45 var(--sans); overflow: hidden; }
.palette[open] { display: flex; flex-direction: column; }
.palette::backdrop, .help::backdrop { background: rgba(0, 0, 0, .6); }
.palette label { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--line); color: var(--muted); }
.palette input { flex: 1; min-width: 0; min-height: 44px; border: 0; background: none; color: var(--text); font: inherit; }
.palette input:focus-visible { outline: 0; }
.palette ul { list-style: none; margin: 0; padding: 6px 0; overflow-y: auto; }
.palette li.group { padding: 8px 16px 2px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.palette li a { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding: 0 16px; text-decoration: none; }
.palette li a span:last-child { color: var(--muted); font-size: 13px; white-space: nowrap; }
.palette li a.sel { background: var(--chip); color: var(--accent); }
.palette footer { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 8px 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.palette footer span:last-child { margin-left: auto; }
.help { padding: 16px; }
.help h2 { margin: 0 0 8px; font-size: 16px; }
.help dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0 0 12px; } .help dd { margin: 0; }
.help form { margin: 0; } .help button { min-height: 44px; padding: 0 16px; font: inherit; color: var(--text); background: var(--ground); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.cur { outline: 2px solid var(--accent); outline-offset: -2px; }