/* THE HOME BOARD (2026-09-12) — one instrument, not eight panels.

   The home page stopped being an index. Every pane reads ONE presented
   moment, which sky.js owns and the scrubber writes, so this dress has a
   job the other figures do not have: NOTHING MAY MOVE WHILE THE HAND IS ON
   THE SCRUBBER. Each headline and each sub-line therefore stands in a box
   whose height is reserved for the longest thing it can say — the rule the
   daylight line taught (L-022). A wrap that appears at one minute and not
   the next would shift the whole page under the pointer, which the
   interaction gate reads as the defect it is.

   Nothing is boxed: a pane is a hairline, an eyebrow, an answer, its
   drawing and one line under it — the treatment `.fig` already has, at
   board scale. Hierarchy is SIZE and nothing else; every answer is full
   ink, and the lead's is nearly twice its siblings'.

   WHY ITS OWN SHEET. The board is the home page's own dress, and the home
   page's own weight note has said since L-025 that a page's dress goes in
   its own sheet and never in the shared one. Measured, that is not a
   preference: appended to styles.css these rules cost 1.3 KB brotli on all
   twenty-six pages and put /sunset/{city} (156.4 of 156) and
   /seasons/{city} (160.3 of 160) over budgets that were already
   tripwires — two pages failing for a change neither of them shows.
   Loaded after styles.css, and so unlayered and later: it wins over the
   base sheet whatever the specificity (L-031). */

.board { margin: 0; }
.board .pane { display: block; text-decoration: none; color: inherit; min-width: 0; }
.board-grid > .pane { border-top: 1px solid var(--hairline); padding-top: 18px; }
.board .pane-lead { border-top: none; padding-top: 0; }
.pane-k {
  display: block; font-size: 11px; font-weight: 400; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-2); margin: 0 0 5px;
}
/* the answer leads. Two lines are reserved whatever it says today. */
.pane-v {
  display: block; font-size: 21px; font-weight: 400; letter-spacing: -.02em;
  line-height: 1.2; color: var(--ink); min-height: 2.4em;
  font-variant-numeric: tabular-nums;
}
.board .pane-lead .pane-v { font-size: 30px; min-height: 1.2em; }
.pane-s {
  display: block; font-size: 13.5px; font-weight: 400; line-height: 1.45;
  color: var(--ink-2); min-height: 2.9em; margin: 14px 0 0;
}
/* a drawing crowds a line of text within 8px (tests/rhythm.cjs), so 14 each side */
.pane-draw { display: block; margin: 14px 0 0; }
.pane-draw svg { display: block; width: 100%; height: auto; }
/* widgets.js's svg() writes maxWidth AND auto side margins inline, as one gesture:
   the cap is what a board wants (a label must not scale past ~16px) and the centring
   is not — a pane's drawing begins where its words begin. An inline style can only
   be answered here. */
.board .pane-draw { margin-left: 0 !important; margin-right: 0 !important; }

/* THE DIALS ARE CAPPED, and the moon's cap is load-bearing. Left to their own
   caps the compass came out at 300px and the gauge at 200 beside a 125px moon —
   three different hands in one row; 104 makes them marks with the answers
   leading. The moon stops at 64 for a second reason: widgets.js fetches the
   26 KB lunar PHOTOGRAPH as soon as the rasterised disc passes 90px, which at
   `box:100, r:34` on a 2× screen is a host of 66. Every drawing on this board is
   built from the page's own numbers, so the front door draws the moon — the
   maria where they are, and Tycho — and /moon, one click away, wears the
   photograph. Measured: no /moon/moon-surface.jpg request at either width. */
.board .pane-round { max-width: 104px !important; }
.board .pane-moon { max-width: 64px !important; }

.pane:hover .pane-k { color: var(--ink); }
.pane:hover .pane-v {
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 5px; text-decoration-color: var(--hairline);
}

/* the one control. Its marks are seated at the minutes they name, not spaced
   evenly, and one that would sit on its neighbour is dropped rather than
   overlapped — the sky's own chips have done this since they were written. */
.board-scrub { margin: 26px 0 34px; }
.scrub-k {
  display: block; font-size: 11px; font-weight: 400; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-2); margin: 0 0 10px;
}
.board-scrub input[type="range"] { display: block; width: 100%; margin: 0; }
.scrub-marks { position: relative; height: 16px; margin-top: 10px; }
.scrub-mark {
  position: absolute; top: 0; font-size: 11px; line-height: 16px;
  color: var(--ink-2); white-space: nowrap;
}
.scrub-note { margin: 10px 0 0; font-size: 13.5px; color: var(--ink-2); }

.board-grid { display: grid; grid-template-columns: 1fr; gap: 30px; }

/* The day as a rule, painted with this place's own sky, and the presented minute standing
   on it. The marker is 3px and fully round, because it is DATA and the line rule gives data
   three points and round ends.

   THE MARKER RIDES ON A TRANSFORM, never on `left`. sky.js's inspector carries the same
   note and this board re-learned it: an absolutely positioned element moved by its offsets
   relayouts, and the browser records a layout shift for every step of a drag (measured
   0.0001 over one sweep, named as span#b-day-now).

   So the marker's BOX is the whole rule and its 3px bar stands at the box's leading edge;
   `p × (100% − 3px)` is a percentage of the marker's own width, which is the rule's, and it
   seats the bar at p of the day with both ends flush inside. And a full-width box translated
   to the far end reaches twice the rule's width, which is a page that scrolls SIDEWAYS —
   measured at 1844px of scroll in a 1280 viewport before the rule below was added, and no
   gate on this site looks at scrollWidth. The rail is two pixels taller than its band on
   each side so the marker can overhang the painted day and still be clipped by its own rail. */
.pane-rule { position: relative; height: 16px; overflow: hidden; }
.rule-band { position: absolute; left: 0; right: 0; top: 2px; bottom: 2px; border-radius: 999px; overflow: hidden; }
.rule-band svg { display: block; width: 100%; height: 100%; }
.rule-now, .wr-now {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  pointer-events: none; will-change: transform;
  transform: translateX(calc(var(--p, 0) * (100% - 3px)));
}
.rule-now i, .wr-now i {
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  border-radius: 999px; background: var(--ink); box-shadow: 0 0 0 1.5px rgba(5, 8, 15, .55);
}

/* three cities, the same instant, each on its own day */
.world-rows { display: block; margin: 14px 0 0; }
.world-row {
  display: grid; grid-template-columns: 26px auto minmax(48px, 1fr) auto;
  align-items: center; gap: 10px 14px; padding: 10px 0;
  border-top: 1px solid var(--hairline);
}
.world-row:first-child { border-top: none; padding-top: 2px; }
.wr-globe { display: block; width: 26px; height: 26px; }
.wr-globe svg { display: block; width: 100%; height: 100%; }
.wr-name { font-size: 15px; font-weight: 400; color: var(--ink); white-space: nowrap; }
.wr-rule { position: relative; height: 14px; overflow: hidden; }
.wr-band { position: absolute; left: 0; right: 0; top: 2px; bottom: 2px; border-radius: 999px; overflow: hidden; }
.wr-band svg { display: block; width: 100%; height: 100%; }
.wr-v { font-size: 13.5px; font-weight: 400; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* A PANE'S DRAWING IS ALREADY AT ITS OWN SCALE. The shared sheet enlarges every
   label inside a `.fig.fig-answer` to 20px on a phone, which is right for a
   720-unit figure squeezed into a 350px column and wrong here: it printed
   "48 MIN OF GOLDEN LIGHT" across "EVENING" in the same strip. The bands are
   built AT the pane's own width, one unit to the pixel, so their own sizes hold. */
@media (max-width: 640px) {
  .board.fig-answer .widget text:not(.w-big) { font-size: 12px; }
  .board.fig-answer .widget.golden-bands .w-big-num { font-size: 19px; }
  /* a phone gives a world row its rule on its own line, under the name — the way
     a sibling row already stacks its value beside its glyph */
  .world-row {
    grid-template-columns: 26px 1fr auto;
    grid-template-areas: "g n v" "g r r";
  }
  .wr-globe { grid-area: g; align-self: start; }
  .wr-name { grid-area: n; }
  .wr-v { grid-area: v; }
  .wr-rule { grid-area: r; }
}

@media (min-width: 641px) {
  .pane-k { font-size: 12px; }
  .pane-v { font-size: 24px; }
  .board .pane-lead .pane-v { font-size: 40px; }
  .pane-s { font-size: 14px; }
  .board-grid { grid-template-columns: 1fr 1fr; gap: 36px 44px; }
  .pane-world { grid-column: 1 / -1; }
  .board-scrub { margin: 30px 0 40px; }
}

@media (min-width: 1000px) {
  .board-grid { grid-template-columns: repeat(3, 1fr); }
  /* the lead reads like an instrument's face: the reading on the left, the dial beside it */
  .board .pane-lead {
    display: grid; grid-template-columns: 1fr 240px; column-gap: 56px; align-items: start;
  }
  .board .pane-lead .pane-k, .board .pane-lead .pane-v, .board .pane-lead .pane-s { grid-column: 1; }
  .board .pane-lead .pane-arc { grid-column: 2; grid-row: 1 / 4; align-self: center; margin: 0; }
}