/* Sol hub — the app's design doctrine, as CSS.
   Law 2: sky above, ground below. The sky carries the colour; chrome is
   monochrome white. Every stroke ends round; data lines 3px+, hairlines
   only for chrome. One rounded family; hierarchy is white, never a hue. */

/* The base layer: the original sheet. Everything after the Observatory edition is
   unlayered and therefore wins over any rule in here, whatever its specificity —
   an id-scoped phone rule (#ss-oracle) once beat every class rule; it cannot now. */
@layer base {
:root {
  --night-0: #05080f;                       /* the ground's black */
  --night: #0a1020;                         /* night sky */
  --night-2: #101a30;                       /* raised night */
  --ink: #f4f7fc;                           /* bright — what matters */
  --ink-2: rgba(244, 247, 252, 0.62);       /* speaking */
  --ink-3: rgba(244, 247, 252, 0.38);       /* receding */
  --hairline: rgba(244, 247, 252, 0.13);
  --lift-04: rgba(255, 255, 255, 0.05);
  --lift-08: rgba(255, 255, 255, 0.09);
  --lift-14: rgba(255, 255, 255, 0.15);
  --dawn-a: #fd70b5;                        /* the mark's sky, top */
  --dawn-b: #fc364c;                        /* the mark's sky, bottom */
  --round: "Nunito", -apple-system, "SF Pro Rounded", "Segoe UI", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--night-0);
  color: var(--ink);
  font-family: var(--round);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink-2); }
:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 3px; border-radius: 4px; }

/* the chip dress — the app's one capsule, worn by every control */
.chip-dress {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--lift-08); border-radius: 999px;
  padding: 8px 16px; border: none;
  font-family: var(--round); font-size: 13px; font-weight: 700;
  letter-spacing: 0.02em; color: var(--ink); text-decoration: none;
}
.chip-dress:hover { background: var(--lift-14); }
.chip-dress.bright { background: var(--lift-14); }
.chip-dress.bright:hover { background: rgba(255, 255, 255, 0.22); }

.mast-mark { width: 24px; height: 24px; border-radius: 6px; display: block; }
.mast-name {
  font-size: 15px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink);
}

/* sliders — the scrub, chip-dressed */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  height: 28px; background: transparent; margin: 0; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px; background: var(--lift-14);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--ink); margin-top: -8px;
  box-shadow: 0 1px 10px rgba(5, 8, 15, 0.5);
}
input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--lift-14); }
input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--ink); border: none; }

/* charts — the line rule */
.chart { position: relative; width: 100%; }
.chart svg { display: block; width: 100%; height: auto; }
.chart .grid-line { stroke: var(--hairline); stroke-width: 1; }
.chart .axis-text, .ray .axis-text {
  font-family: var(--round); font-size: 11.5px; font-weight: 600;
  fill: var(--ink-3); font-variant-numeric: tabular-nums;
}
.chart .series-line { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.chart .series-faint { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; opacity: 0.22; }
.chart .end-label { font-family: var(--round); font-size: 12px; font-weight: 700; fill: var(--ink); }
.chart .anno-line { stroke: var(--ink-3); stroke-width: 1; stroke-linecap: round; opacity: 0.7; }
.chart .anno-text, .ray .anno-text { font-family: var(--round); font-size: 11.5px; font-weight: 600; fill: var(--ink-3); }
.chart .end-dot { stroke: var(--night-2); stroke-width: 2; }
.chart .crosshair { stroke: var(--ink-3); stroke-width: 1; stroke-linecap: round; opacity: 0; }

.tooltip {
  position: absolute; pointer-events: none; z-index: 5;
  background: rgba(16, 26, 48, 0.92); border-radius: 12px;
  padding: 8px 12px; font-family: var(--round); font-size: 12.5px; font-weight: 600;
  color: var(--ink); opacity: 0; transform: translate(-50%, 0);
  white-space: nowrap; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.tooltip .tt-x { color: var(--ink-3); margin-bottom: 4px; font-size: 11px; }
.tooltip .tt-row { display: flex; align-items: center; gap: 7px; }
.tooltip .tt-key { display: inline-block; width: 12px; height: 3px; border-radius: 2px; }
.tooltip .tt-val { font-weight: 800; }
.tooltip .tt-name { color: var(--ink-2); }

.legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.legend .lg-item { display: flex; align-items: center; gap: 7px; }
.legend .lg-key { display: inline-block; width: 14px; height: 3px; border-radius: 2px; }

.table-view { margin-top: 12px; border-top: 1px solid var(--hairline); padding-top: 10px; }
.table-view summary {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3); cursor: pointer;
}
.table-view summary:hover { color: var(--ink-2); }
.table-view table {
  border-collapse: collapse; margin-top: 10px; width: 100%; max-width: 540px;
  font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.table-view th, .table-view td {
  text-align: right; padding: 6px 12px; border-bottom: 1px solid var(--hairline); color: var(--ink-2);
}
.table-view th { color: var(--ink-3); font-weight: 700; }
.table-view th:first-child, .table-view td:first-child { text-align: left; }

.model-note { font-size: 12.5px; color: var(--ink-3); margin: 14px 0 4px; max-width: 70ch; line-height: 1.65; }

.shadow-diagram { margin: clamp(30px, 5vh, 50px) 0 0; }
.shadow-diagram svg { display: block; width: 100%; height: auto; }

@media (max-width: 640px) {
  body { font-size: 16px; }
  .chart .axis-text, .chart .anno-text, .ray .axis-text, .ray .anno-text { font-size: 16px; }
  .chart .end-label { font-size: 17px; }
  .chart .series-name { display: none; }
  .chart .series-line { stroke-width: 4; }
  .chart .end-dot { r: 7px; }
}

/* ================================================================
   THE WORLD SYSTEM — Law 2: sky above, ground below.
   No header bars, no cards, no footers. Chrome floats as chips.
   (Legacy classes above remain only until every page is rebuilt.)
   ================================================================ */

.sky-section {
  position: relative; overflow: hidden; background: var(--night-0);
  height: 100dvh; min-height: 580px; max-height: 1100px;
}
.sky-section.roomy { height: 92dvh; min-height: 640px; }
.sky-section canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sky-ui { position: absolute; inset: 0; pointer-events: none; }
.sky-ui > * { pointer-events: auto; }

/* the seated moments — the app's pills, riding the arc */
.sky-chip {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); will-change: transform;
  display: inline-flex; align-items: baseline; gap: 6px;
  background: var(--lift-08); backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 999px; padding: 5px 12px; white-space: nowrap;
  font-size: 12.5px; font-weight: 700;
  opacity: 0; transition: opacity 0.4s ease;
}
.sky-chip.on { opacity: 1; }
.sky-chip .k { color: var(--ink-2); letter-spacing: 0.08em; font-size: 11px; }
.sky-chip .v { color: var(--ink); font-variant-numeric: tabular-nums; }

/* floating corner chrome — the only navigation that exists */
.sky-mark {
  position: absolute; top: 18px; left: 18px;
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; padding: 6px 14px 6px 7px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.sky-mark .mast-mark { width: 22px; height: 22px; border-radius: 6px; }
.sky-mark .mast-name { font-size: 13px; }
.sky-corner {
  position: absolute; top: 18px; right: 18px; display: flex; gap: 8px;
}
.sky-corner .chip-dress, .answer-chips .chip-dress {
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.07);
}
.sky-corner .chip-dress:hover, .answer-chips .chip-dress:hover { background: var(--lift-14); }

/* the answer — the page's H1, seated in the sky */
.answer {
  position: absolute; left: clamp(18px, 6vw, 90px); right: clamp(18px, 6vw, 90px);
  top: clamp(84px, 15%, 190px); max-width: 660px;
}
.answer h1 {
  font-weight: 300; font-size: clamp(27px, 4.2vw, 46px);
  line-height: 1.18; letter-spacing: -0.008em; margin: 0 0 10px;
  text-wrap: balance;
}
.answer h1 strong { font-weight: 700; font-variant-numeric: tabular-nums; }
.answer-place {
  margin: 0 0 18px; font-size: 14px; font-weight: 600; color: var(--ink-2);
}
.answer-chips { display: flex; gap: 8px; flex-wrap: wrap; }

/* chip-dressed form controls */
.chip-dress.has-select { position: relative; padding-right: 34px; cursor: pointer; }
.chip-dress.has-select select { padding-right: 4px; max-width: 100%; text-overflow: ellipsis; }
.chip-dress.has-select::after {
  content: ""; position: absolute; right: 13px; top: 50%;
  width: 7px; height: 7px; border-right: 2px solid var(--ink-2);
  border-bottom: 2px solid var(--ink-2); border-radius: 1px;
  transform: translateY(-70%) rotate(45deg);
}
.chip-dress select, .chip-dress input[type="date"] {
  -webkit-appearance: none; appearance: none;
  background: transparent; border: none; color: var(--ink);
  font-family: var(--round); font-size: 13px; font-weight: 700;
  padding: 0; cursor: pointer; font-variant-numeric: tabular-nums;
}
.chip-dress select:focus, .chip-dress input:focus { outline: none; }
.chip-dress select option { background: var(--night-2); color: var(--ink); }
.chip-dress input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.8); }
button.chip-dress { cursor: pointer; }

/* ---------------- the ground ---------------- */

.ground { background: var(--night-0); }
.ground-inner {
  max-width: 720px; margin: 0 auto;
  padding: clamp(40px, 7vh, 80px) 22px 0;
}

.bridge { margin: 0 0 8px; }
.bridge p {
  margin: 0 0 20px; font-size: clamp(17px, 2.2vw, 20px); font-weight: 300;
  line-height: 1.55; color: var(--ink); max-width: 44ch; text-wrap: balance;
}
.bridge p strong { font-weight: 700; }
.bridge .chip-dress.bright { font-size: 14px; padding: 12px 24px; }

/* facts — seated values, aligned type on the ground, no boxes */
.facts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px;
  margin: clamp(34px, 6vh, 60px) 0 0;
}
.fact {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 13px 2px; border-bottom: 1px solid var(--hairline);
}
.fact-k {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3); white-space: nowrap;
}
.fact-v { font-size: 15.5px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.fact-k { white-space: normal; }   /* a long value keeps its line; the key wraps instead of the number */

/* the day's curve, laid straight on the ground */
.ground .chart { margin: clamp(36px, 6vh, 60px) 0 0; }

/* the lesson */
.lesson { max-width: 60ch; margin-top: clamp(44px, 7vh, 76px); }
.lesson h2 { font-weight: 700; font-size: 20px; margin: 32px 0 8px; }
.lesson p { margin: 0 0 1.05em; color: var(--ink-2); font-size: 16px; line-height: 1.7; }

/* siblings — rows seated on hairlines, each carrying a live value */
.sibs { margin-top: clamp(44px, 7vh, 76px); }
.sibs-head {
  font-size: 11px; font-weight: 800; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 4px;
}
.sib {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 17px 2px; border-bottom: 1px solid var(--hairline);
  text-decoration: none;
}
.sib:hover { background: var(--lift-04); border-radius: 10px; padding-left: 10px; padding-right: 10px; margin: 0 -10px; }
.sib-name { font-size: 16px; font-weight: 700; color: var(--ink); }
.sib-name::after { content: " →"; color: var(--ink-3); font-weight: 600; }
.sib-value { font-size: 13.5px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; text-align: right; }

/* the signature — the page simply ends */
.signature {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: clamp(60px, 9vh, 100px) 22px clamp(40px, 6vh, 64px);
}
.signature .mast-mark { width: 20px; height: 20px; border-radius: 5px; }
.signature span { font-size: 12.5px; font-weight: 600; color: var(--ink-3); }

@media (max-width: 640px) {
  .facts { grid-template-columns: 1fr; }
  .answer { top: 76px; }
  .answer h1 { font-size: 25px; }
  .sky-mark { top: 12px; left: 12px; }
  .sky-corner { top: 12px; right: 12px; }
  .sky-section { min-height: 540px; }
}

/* ---------------- sunset tonight ---------------- */

.rungs { display: flex; gap: 7px; margin: 0 0 18px; height: 10px; }
.rungs i { width: 10px; height: 10px; border-radius: 50%; background: var(--lift-14); display: block; }
.rungs i.on { background: var(--ink); }

.ray { margin: clamp(30px, 5vh, 50px) 0 0; }
.ray svg { display: block; width: 100%; height: auto; }

.call-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }

/* ---------------- sun on my window ---------------- */

.win-scrub {
  position: absolute; left: clamp(18px, 6vw, 90px); right: clamp(18px, 6vw, 90px); bottom: 22px;
  display: flex; align-items: center; gap: 12px;
}
.win-scrub input[type="range"] { flex: 1; min-width: 0; }
.win-scrub .chip-dress {
  min-width: 96px; justify-content: center; font-variant-numeric: tabular-nums;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: rgba(255, 255, 255, 0.07);
}

/* a plain table on the ground — real rows, no box, always open */
.table-plain { margin-top: clamp(36px, 6vh, 60px); }
.table-plain table {
  border-collapse: collapse; width: 100%; font-size: 13.5px; font-weight: 600;
  font-variant-numeric: tabular-nums; margin-top: 6px;
}
.table-plain th, .table-plain td {
  text-align: right; padding: 9px 10px; border-bottom: 1px solid var(--hairline); color: var(--ink-2);
}
.table-plain th { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.table-plain th:first-child, .table-plain td:first-child { text-align: left; padding-left: 2px; }
.table-plain td:first-child a { color: var(--ink); font-weight: 700; text-decoration: none; }
.table-plain td:first-child a:hover { text-decoration: underline; text-decoration-color: var(--ink-3); }
.table-plain tr.is-current td { color: var(--ink); }
.table-plain td .note { color: var(--ink-3); font-weight: 600; }
@media (max-width: 640px) {
  .table-plain th, .table-plain td { padding: 9px 6px; font-size: 12.5px; }
  .win-scrub { bottom: 16px; }
}

/* ---------------- the moon tonight ---------------- */

.moons { margin: clamp(36px, 6vh, 60px) 0 0; }
.moons svg { display: block; width: 100%; height: auto; }
.moons .m-text { font-family: var(--round); font-size: 11px; font-weight: 700; fill: var(--ink-3); text-anchor: middle; font-variant-numeric: tabular-nums; }
.moons .m-name { fill: var(--ink-2); }
@media (max-width: 640px) { .moons .m-text { font-size: 15px; } }

/* ================================================================
   THE WAY AROUND — no header bar. A trail above the answer says where
   you are; the corner chip opens a sheet of every instrument with its
   live value; sibling rows carry the city with you.
   ================================================================ */

.trail {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px;
  margin: 0 0 12px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--ink-3);
}
.trail a { color: var(--ink-2); text-decoration: none; }
.trail a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-3); }
.trail [aria-current] { color: var(--ink-3); }
.trail .sep { color: var(--ink-3); opacity: 0.9; }   /* a separator still has to read: half ink is the floor for anything printed small */

.sky-section.short { height: 52dvh; min-height: 400px; max-height: 640px; }
.sky-section.short .answer { top: clamp(76px, 14%, 150px); }

.nav-sheet {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(5, 8, 15, 0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.18s ease;
}
.nav-sheet.on { opacity: 1; }
.nav-panel {
  position: absolute; top: 62px; right: 18px;
  width: min(440px, calc(100vw - 36px)); max-height: calc(100dvh - 84px); overflow: auto;
  background: var(--night-2); border-radius: 22px; padding: 14px 20px 20px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  transform: translateY(-6px); transition: transform 0.18s ease;
}
.nav-sheet.on .nav-panel { transform: none; }
.nav-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 4px; }
.nav-head .sibs-head { margin: 0; }
.nav-panel .sib { padding: 13px 2px; }
.nav-panel .sib[aria-current] .sib-name::after { content: " · here"; color: var(--ink-3); }
.nav-panel .sib[aria-current] { background: var(--lift-04); border-radius: 10px; padding-left: 10px; padding-right: 10px; margin: 0 -10px; }
.nav-panel .nav-sub { margin-top: 18px; }
.nav-bridge { margin-top: 18px; }
html.nav-open { overflow: hidden; }
@media (max-width: 640px) {
  .nav-panel {
    top: auto; bottom: 10px; left: 10px; right: 10px; width: auto;
    max-height: calc(100dvh - 40px); border-radius: 22px; transform: translateY(8px);
  }
}

/* the fleet, listed — city rows under region eyebrows */
.fleet { margin-top: clamp(30px, 5vh, 50px); }
.fleet .sibs-head { margin: 26px 0 2px; }
.fleet .sib-value { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.fleet .sib-value a { color: var(--ink-2); text-decoration: none; padding: 3px 9px; border-radius: 999px; background: var(--lift-04); font-size: 12px; }
.fleet .sib-value a:hover { background: var(--lift-14); color: var(--ink); }
.fleet .sib:hover { background: none; padding-left: 2px; padding-right: 2px; margin: 0; }
.fleet .sib-name::after { content: none; }
.fleet a.sib .sib-name::after { content: " →"; color: var(--ink-3); font-weight: 600; }
.nav-panel .sib-name, .fleet .sib-name { white-space: nowrap; flex: 0 0 auto; }
.nav-panel .sib-value, .fleet .sib-value { text-align: right; }

/* ---------------- the widgets — drawn answers on the ground ----------------
   Owner rule: visual widgets over text. A figure is the drawing with the
   old fact rows as its caption; nothing is boxed. */
.figures {
  display: grid; grid-template-columns: 1fr 1fr; gap: 26px 44px;
  margin: clamp(34px, 6vh, 60px) 0 0; align-items: start;
}
.fig { margin: 0; min-width: 0; }
.fig-wide { grid-column: 1 / -1; }
.fig-draw { margin: 0 0 6px; }
.fig-draw svg { display: block; width: 100%; height: auto; }
.fig-draw.fig-round { max-width: 200px; margin: 0 auto 6px; }
.fig-draw.fig-gauge { max-width: 240px; margin: 0 auto 6px; }
.fig-cap { display: block; margin: 0; }
.fig-cap .fact { display: flex; }
.widget .w-text { font-family: var(--round); font-size: 12.5px; font-weight: 700; fill: var(--ink-2); letter-spacing: 0.02em; }
.widget .w-dim { fill: rgba(244,247,252,.62); }   /* a label must read at a glance; dim is a step down, not a whisper */
.widget .w-bright { fill: var(--ink); font-size: 12.5px; }
.widget .w-big { font-family: var(--round); font-size: 21px; font-weight: 300; fill: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .figures { grid-template-columns: 1fr; }
  .fig-wide { grid-column: auto; }
}

/* sibling rows carry a glyph: the instrument's answer, drawn small */
.sib { align-items: center; }
.sib-glyph { flex: none; width: 46px; height: 30px; display: flex; align-items: center; justify-content: center; margin-right: 2px; }
.sib-glyph svg { width: 100%; height: 100%; display: block; }
.sib-glyph.g-round { width: 34px; height: 34px; }
.sib-name { flex: 1; min-width: 0; }
.nav-panel .sib-glyph { width: 40px; height: 26px; }

/* narrow frames: a sibling row stacks its value under its name beside the glyph,
   and wide figures set their labels larger so a 720-unit drawing at 350px still reads */
@media (max-width: 640px) {
  .sib:has(.sib-glyph) {
    display: grid; grid-template-columns: 46px 1fr; grid-template-areas: "g n" "g v";
    column-gap: 14px; row-gap: 2px; align-items: center;
  }
  .sib:has(.sib-glyph) .sib-glyph { grid-area: g; }
  .sib:has(.sib-glyph) .sib-name { grid-area: n; white-space: normal; }
  .sib:has(.sib-glyph) .sib-value { grid-area: v; text-align: left; }
  .fig-wide .widget .w-text { font-size: 19px; }
  .fig-wide .widget .w-bright { font-size: 20px; }
  .fig .widget .w-text { font-size: 16px; }
  .fig-round { max-width: 170px; }
}
@media (max-width: 640px) { .fig-round .widget .w-text { font-size: 11px; } }



}
/* Observatory edition: a shared hierarchy for the entire instrument fleet. */
:root {
  --ink-2: rgba(244,247,252,.76);
  --ink-3: rgba(244,247,252,.58);
  --round: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif;
}
body { font-weight: 400; }
.sky-section, .sky-section.roomy { height: 740px; min-height: 660px; max-height: 880px; }
.sky-section.solar-instrument { height: min(760px, 88dvh); min-height: 650px; }
.sky-section::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg,rgba(5,8,15,.38),transparent 65%); }
.sky-ui { z-index: 2; }
.sky-mark { top: 28px; left: 5vw; background: none; padding: 0; gap: 11px; }
.sky-mark .mast-mark { width: 30px; height: 30px; border-radius: 8px; }
.sky-mark .mast-name { font-size: 23px; font-weight: 500; letter-spacing: -.06em; text-transform: none; }
.sky-corner { top: 24px; right: 5vw; }
.chip-dress { min-height: 44px; font-size: 14px; font-weight: 500; letter-spacing: 0; padding: 10px 18px; transition: background .18s, box-shadow .18s; }
/* and the select variant keeps the room its chevron stands in. The rule that reserves it — see site/visual-rendering-notes.md. */
.chip-dress.has-select { padding-right: 34px; }
.sky-corner .chip-dress { background: rgba(255,255,255,.045); box-shadow: none; }
.sky-corner .chip-dress::after { content: "↗"; margin-left: 14px; }
.answer { left: 5vw; right: 5vw; top: 112px; max-width: 740px; }
.answer h1 { font-size: clamp(32px,3.8vw,52px); letter-spacing: -.045em; line-height: 1.12; font-weight: 400; }
.answer h1 strong { font-weight: 500; }
.answer-place { font-weight: 400; line-height: 1.65; margin: 20px 0 24px; max-width: 53ch; }
.trail { font-size: 12px; font-weight: 400; margin-bottom: 24px; }
.answer-chips { gap: 8px; }
/* the owner's rule: never a solid grey, and never a ring — a chip is white at 9%,
   on a painted sky or on the ground alike */
.answer-chips .chip-dress, .sky-corner .chip-dress, .call-chips .chip-dress, .ot-actions .chip-dress { background: var(--lift-08); box-shadow: none; }
.answer-chips .chip-dress:hover, .sky-corner .chip-dress:hover, .call-chips .chip-dress:hover { background: var(--lift-14); box-shadow: none; }
.chip-dress select, .chip-dress input[type="date"] { font-size: 14px; font-weight: 400; }
.chip-dress:focus-within { outline: 2px solid var(--ink); outline-offset: 3px; }
.answer-eyebrow { display: block; font-size: 14px; letter-spacing: .02em; line-height: 1.6; color: var(--ink-2); margin-bottom: 20px; }
.answer h1 .answer-measure { display: block; font-size: clamp(38px,4.4vw,64px); letter-spacing: -.055em; line-height: 1.12; }
.answer-caption { display: block; margin-top: 20px; font-size: 20px; font-weight: 400; letter-spacing: -.025em; }
.sky-chip { background: rgba(5,8,15,.5); border-radius: 6px; padding: 7px 10px; font-weight: 500; gap: 8px; }
.sky-chip .k { font-size: 10px; letter-spacing: .12em; }
.sky-chip .v { font-size: 12px; }
.sky-readout { position: absolute; z-index: 3; bottom: 0; left: 5vw; right: 5vw; display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; padding: 20px 0; border-top: 1px solid var(--hairline); }
.sky-readout div { display: flex; align-items: baseline; gap: 14px; }
.sky-readout span { font-size: 10px; letter-spacing: .13em; color: var(--ink-3); }
.sky-readout strong { font-size: 15px; font-weight: 400; font-variant-numeric: tabular-nums; }
.sky-section:has(.win-scrub) .sky-readout, .sky-section.short .sky-readout { display: none; }
.ground-inner { max-width: 1120px; padding: 60px 32px 0; }
.figures { gap: 44px 72px; margin-top: 0; }
.fig { padding: 24px 0 0; border-top: 1px solid var(--hairline); }
.fig-draw { margin-bottom: 24px; }
.fig-draw.fig-round { max-width: 240px; margin: 8px auto 28px; }
.fig-draw.fig-gauge { max-width: 270px; margin: 8px auto 28px; }
.fig-cap .facts { margin-top: 20px; }
.fig-cap .fact { padding: 14px 0; }
.facts { gap: 0 64px; margin-top: 28px; }
.fact { padding: 19px 0; }
.fact-k { font-size: 12px; font-weight: 400; letter-spacing: .065em; }
.fact-v { font-size: 18px; font-weight: 400; letter-spacing: -.025em; }
.widget .w-text { font-size: 12px; font-weight: 400; letter-spacing: 0; }
.widget .w-big { font-size: 27px; font-weight: 400; letter-spacing: -.04em; }
.ground .chart { padding: 28px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.chart .axis-text, .chart .anno-text, .ray .axis-text { font-size: 12px; font-weight: 400; }
.chart .grid-line { stroke-dasharray: 2 6; }
.model-note { font-size: 13px; max-width: 84ch; }
.lesson { max-width: none; margin-top: 72px; display: grid; grid-template-columns: 1fr 2fr; column-gap: 64px; border-top: 1px solid var(--hairline); padding-top: 32px; }
.lesson h2 { margin: 0 0 28px; font-size: 20px; font-weight: 400; letter-spacing: -.03em; }
.lesson p { font-size: 16px; margin-bottom: 32px; max-width: 64ch; }
.bridge { position: relative; margin-top: 64px; padding: 36px 0; border-top: 1px solid var(--hairline); display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.bridge p { font-size: 24px; font-weight: 400; letter-spacing: -.025em; margin: 0; max-width: 35ch; }
.bridge .chip-dress.bright { flex: none; background: var(--ink); color: var(--night-0); padding: 14px 24px; font-weight: 500; }
.sibs { margin-top: 64px; }
.sibs-head { font-size: 12px; font-weight: 400; letter-spacing: .12em; margin-bottom: 12px; }
.sib { padding: 24px 0; gap: 22px; }
.sib-name { font-size: 22px; font-weight: 400; letter-spacing: -.025em; }
.sib-name::after { content: none; }
.sib-value { font-size: 14px; font-weight: 400; }
.sib::after { content: "↗"; color: var(--ink-3); font-size: 20px; }
.sib:hover { margin: 0; padding: 24px 0; background: none; border-radius: 0; }
.sib:hover .sib-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.nav-panel .sib::after, .fleet .sib::after { content: none; }
.nav-panel .sib-name { font-size: 16px; }
.nav-panel .sib:hover { padding: 13px 2px; }
.table-plain { overflow-x: auto; }
.table-plain table { font-weight: 400; font-size: 14px; }
.table-plain th { font-weight: 400; font-size: 12px; }
.table-plain td, .table-plain th { padding: 15px 12px; }
/* the signature shares the column's box: 1120 wide with a 32px inset, so the
   wordmark's left edge is the content's left edge at every width, not the
   viewport's (below 1120px a zero inset put the mark on the screen's edge) */
.signature { max-width: 1120px; box-sizing: border-box; margin: 0 auto; justify-content: flex-start; padding-left: 32px; padding-right: 32px; align-items: baseline; }
/* the wordmark image carries 19% transparent padding under its letters; cropping the
   box to the letters (a flex baseline is synthesised from the border box, so a margin
   would not do) puts the tagline and the links on the letters' baseline */
.signature .sol-wordmark { height: 34px; object-fit: cover; object-position: top; margin-bottom: 0; }
@media (min-width: 960px) {
  .solar-instrument .answer { top: 24%; max-width: 35vw; }
  .solar-instrument .answer h1 { font-size: clamp(36px,3.4vw,54px); }
  .solar-instrument .answer h1 .answer-measure { font-size: clamp(36px,3.8vw,60px); }
  .solar-instrument .answer-place { max-width: 34ch; }
}
@media (max-width: 959px) {
  .sky-section.solar-instrument { height: 790px; min-height: 790px; }
  .sky-readout div { flex-direction: column; gap: 4px; }
  .sky-readout { gap: 16px; }
}
@media (max-width: 640px) {
  .sky-section, .sky-section.roomy { height: 750px; min-height: 750px; }
  .sky-section.solar-instrument { height: 800px; min-height: 800px; }
  .sky-mark { left: 22px; top: 22px; }
  .sky-corner { right: 22px; top: 18px; }
  .answer { left: 24px; right: 24px; top: 104px; }
  .answer h1 { font-size: 33px; }
  .answer h1 .answer-measure { font-size: 38px; }
  .answer-caption { font-size: 18px; }
  .answer-place { font-size: 14px; margin: 16px 0 20px; }
  .sky-readout { left: 24px; right: 24px; gap: 14px 18px; grid-template-columns: repeat(2, 1fr); padding: 16px 0; }
  .sky-readout span { font-size: 9px; letter-spacing: .08em; }
  .sky-readout strong { font-size: 13px; }
  .ground-inner { padding: 40px 24px 0; }
  .facts { grid-template-columns: 1fr; }
  .figures { gap: 36px; }
  .fig { padding-top: 20px; }
  .fact-k { font-size: 11px; }
  .fact-v { font-size: 16px; }
  .fig .widget .w-text { font-size: 14px; }
  .fig-wide .widget .w-text { font-size: 19px; }
  .fig-round .widget .w-text { font-size: 9px; }
  .lesson { display: block; margin-top: 48px; padding-top: 28px; }
  .lesson h2 { margin-bottom: 12px; }
  .bridge { display: block; margin-top: 40px; }
  .bridge p { font-size: 22px; margin-bottom: 24px; }
  .sib-name { font-size: 19px; }
  .sib::after { display: none; }
  .sib:hover { padding: 24px 0; }
  .signature { padding: 56px 24px; }
}

/* Text in responsive SVGs is sized in CSS pixels by their measured viewBox. */
.fig .day-instrument .w-text, .fig-wide .day-instrument .w-text { font-size: 12px; }
.fig-round .compass-instrument .w-text { font-size: 12px; }
.compass-instrument .w-big { font-size: 28px; }
.chart .axis-text, .chart .anno-text { font-size: 12px; }
.chart .end-label { font-size: 13px; }
.shadow-diagram { padding: 28px 0; border-top: 1px solid var(--hairline); }
#mn-strip { overflow-x: auto; padding: 26px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
#mn-strip svg { min-width: 720px; }
#mn-strip .m-text { font-size: 11px; }
@media (max-width: 640px) { .fig .day-instrument .w-text { font-size: 11px; } .shadow-diagram text { font-size: 11px; } }

.gauge-instrument .w-big { font-size: 19px; }
.fig .gauge-instrument .w-text { font-size: 9px; }
.chip-dress[aria-disabled="true"], .bridge .chip-dress[aria-disabled="true"] { background: rgba(244,247,252,.07); color: var(--ink-2); cursor: default; box-shadow: inset 0 0 0 1px var(--hairline); }
#win-answer { max-width: 660px; }
#win-answer .answer-measure { font-size: 58px; }
#win-answer .answer-eyebrow { margin-bottom: 12px; }
#win-answer .answer-caption { margin-top: 12px; }
#mn-answer { font-size: clamp(30px,3vw,42px); max-width: 700px; }
#mn-answer + .answer-place { max-width: 68ch; }
@media(max-width:640px){
  #win-answer .answer-measure { font-size: 44px; }
  #win-answer .answer-caption { font-size: 17px; }
  .sky-section:has(#win-answer) { min-height: 820px; height: 820px; }
  #mn-answer { font-size: 30px; }
}

#mn-answer .answer-measure { font-size: clamp(40px,4.4vw,60px); }
#mn-answer .answer-caption { font-size: 20px; }
#ss-oracle { overflow-x: auto; }
@media(max-width:640px){
  #mn-answer .answer-measure { font-size: 40px; }
  #mn-answer .answer-caption { font-size: 18px; }
  #ss-oracle .w-text { font-size: 20px; }   /* the light path scales to the phone: 20 units at 0.47× is 9.5px */
}

.sol-wordmark { display: block; width: 60px; height: auto; object-fit: contain; }
.sky-mark { top: 13px; }
.signature .sol-wordmark { width: 46px; }
.fig-draw { position: relative; }
.widget-guide { margin-top: 14px; padding: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.widget-help { margin-top: 8px; }
.widget-help summary { color: var(--ink-2); cursor: pointer; min-height: 30px; padding: 4px 0; }
.widget-help p { font-size: 14px; line-height: 1.65; margin: 8px 0 0; color: var(--ink-2); }
.widget-inspector { position: absolute; z-index: 5; top: 20px; left: 50%; transform: translateX(-50%); padding: 10px 14px; border: 1px solid var(--hairline); border-radius: 8px; background: rgba(10,16,29,.96); color: var(--ink); font-size: 13px; line-height: 1.5; min-width: 200px; max-width: 100%; text-align: center; pointer-events: none; box-shadow: 0 12px 30px #0004; }
.widget[tabindex] { cursor: crosshair; }
.widget[tabindex]:focus-visible { outline-offset: 6px; border-radius: 5px; }
.fig-draw.fig-round, .fig-draw.fig-gauge { max-width: none; }
.fig-round > svg { max-width: 240px; margin: 0 auto; }
.fig-gauge > svg { max-width: 270px; margin: 0 auto; }
.fig-round .widget-inspector, .fig-gauge .widget-inspector { top: 0; }
@media(max-width:640px){ .sky-mark { top: 9px; } .widget-guide { font-size: 12px; } .widget-help summary { min-height: 44px; padding-top: 10px; } }
.reference-header { max-width: 1120px; margin: 0 auto; padding: 20px 32px; display: flex; align-items: center; justify-content: space-between; }
.reference-page h1 { font-size: clamp(44px,6vw,76px); font-weight: 400; letter-spacing: -.055em; line-height: 1.07; margin: 24px 0; }
.reference-intro { font-size: 21px; color: var(--ink-2); max-width: 50ch; }
.signature .source-link { margin-left: auto; font-size: 12px; color: var(--ink-2); }
.signature .source-link + .source-link { margin-left: 18px; }
@media(max-width:640px){ .reference-header { padding: 12px 24px; } .signature { flex-wrap: wrap; } .signature .source-link { width: 100%; margin-left: 56px; } .signature .source-link + .source-link { margin-left: 56px; } }

.sky-inspector { position:absolute; left:0; top:0; z-index:4; transform:translateX(-50%); will-change:transform; pointer-events:none; white-space:nowrap; padding:10px 14px; border-radius:8px; background:rgba(5,8,15,.93); border:1px solid var(--hairline); color:var(--ink); font-size:13px; line-height:1.5; box-shadow:0 8px 28px #0003; }
.not-found { width: min(720px,100%); min-height: 100dvh; margin: auto; padding: 15vh 24px; }
.not-found .sol-wordmark { margin-bottom: 64px; }
.not-found > p:not(.sibs-head) { color: var(--ink-2); margin-bottom: 32px; }

/* Tactile controls. Motion belongs to the control; measurements follow input directly. */
:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-spring: cubic-bezier(.2, 1.5, .4, 1);
}
.chip-dress {
  transition: transform 340ms var(--motion-spring), background 180ms ease, box-shadow 180ms ease;
}
button.chip-dress:active, a.chip-dress[href]:active { transform: scale(.96); transition-duration: 80ms; }
.chip-dress[aria-disabled="true"] { cursor: default; }
input[type="range"] { height: 44px; touch-action: pan-y; }
input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(to right, rgba(244,247,252,.72) 0 var(--range-fill, 50%), var(--lift-14) var(--range-fill, 50%) 100%);
}
input[type="range"]::-webkit-slider-thumb {
  transition: transform 380ms var(--motion-spring), box-shadow 200ms ease;
}
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: rgba(244,247,252,.72); }
input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px;
  transition: transform 380ms var(--motion-spring), box-shadow 200ms ease;
}
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.22); box-shadow: 0 0 0 8px rgba(244,247,252,.08), 0 2px 14px #05080f80; }
input[type="range"]:active::-moz-range-thumb { transform: scale(1.22); box-shadow: 0 0 0 8px rgba(244,247,252,.08), 0 2px 14px #05080f80; }
@media (hover: hover) {
  input[type="range"]:hover::-webkit-slider-thumb { box-shadow: 0 0 0 6px rgba(244,247,252,.07), 0 2px 14px #05080f80; }
  input[type="range"]:hover::-moz-range-thumb { box-shadow: 0 0 0 6px rgba(244,247,252,.07), 0 2px 14px #05080f80; }
}
.nav-sheet { transition: opacity 220ms ease; }
.nav-panel { transform: translateY(-10px) scale(.98); transform-origin: top right; transition: transform 220ms var(--motion-ease); }
.nav-sheet.on .nav-panel { transform: translateY(0) scale(1); transition-duration: 420ms; transition-timing-function: var(--motion-spring); }
@media (max-width: 640px) { .nav-panel { transform: translateY(20px) scale(.98); transform-origin: bottom center; } }
.answer-measure, .sky-readout strong { font-variant-numeric: tabular-nums; }

/* ---------------- motion — journeys, not teleports ----------------
   Nothing here applies until motion.js adds html.m-ready, so no-JS and
   reduced-motion readers see a finished page from the first paint. */
html.m-ready .m-word { display: inline-block; opacity: 0; transform: translateY(0.35em); transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
html.m-ready .m-in > .m-word, html.m-ready .m-in .m-word { opacity: 1; transform: none; }
html.m-ready .m-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
html.m-ready .m-reveal.m-in { opacity: 1; transform: none; }
/* the sky pinned under the ground: the ground slides over it and dims it as it goes */
html.m-pinned .sky-section { position: sticky; top: 0; z-index: 0; }
html.m-pinned .sky-section > canvas, html.m-pinned .sky-section > .sky-ui { transform: translateY(var(--m-drift, 0px)); }
html.m-pinned .sky-section::after { content: ""; position: absolute; inset: 0; background: var(--night-0); opacity: var(--m-dim, 0); pointer-events: none; z-index: 4; transition: opacity 0.1s linear; }
html.m-pinned .ground { position: relative; z-index: 1; box-shadow: 0 -40px 60px -30px rgba(5, 8, 15, 0.8); }

/* ---------------- lessons as figures — no paragraphs, one sentence each ---------------- */
.lessons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 32px; margin-top: clamp(44px, 7vh, 76px); align-items: start; }
.lessons .fig-draw { max-width: 360px; }
.lessons .fig-draw.fig-round { max-width: 200px; margin-left: 0; }
.lessons figcaption h2 { font-weight: 700; font-size: 17px; margin: 10px 0 6px; }
.lessons figcaption p { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.6; max-width: 38ch; }
.lessons figcaption a { color: var(--ink-2); }
.fig-head { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 10px; }
@media (max-width: 900px) { .lessons { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .lessons { grid-template-columns: 1fr; } }

/* ---------------- the shared chrome, on pages without a sky ----------------
   the same mark, trail and corner chip every sky page floats, seated in a row */
.mast { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px clamp(18px, 6vw, 90px) 0; }
.mast .sky-mark, .mast .sky-corner { position: static; }
.mast .trail { margin: 0; flex: 1; }
.mast-row { display: flex; align-items: center; gap: 16px; min-width: 0; }
.ground-inner .trail { margin-top: 0; }

/* hub rows: a live value and glyph, with the description underneath */
.sib-desc { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-3); margin-top: 2px; }
.sib .sib-name.has-desc { display: flex; flex-direction: column; }
.fig-wide .fig-draw.fig-round { max-width: 280px; }
.reference-title { font-weight: 300; font-size: clamp(30px, 4vw, 44px); line-height: 1.15; margin: 6px 0 12px; }
.reference-intro { color: var(--ink-2); font-size: 17px; max-width: 60ch; margin: 0; }
/* hub rows: title with its arrow, description beneath, value at the right */
.sib-name.has-desc { display: block; flex: 1; min-width: 0; }
.sib-name.has-desc::after { content: none; }
.sib-title::after { content: " →"; color: var(--ink-3); font-weight: 600; }
.fleet .sib { align-items: center; }
.fleet a.sib .sib-name.has-desc::after { content: none; }
.fleet .sib-name.has-desc { white-space: normal; flex: 1 1 auto; }

/* ---------------- polish pass ----------------
   one type scale, restrained tracking (a rounded face needs almost none),
   no chart line edge to edge, the mark crisp while the sky is pinned. */
.answer h1 { font-weight: 300; letter-spacing: -0.01em; line-height: 1.12; color: rgba(244,247,252,.92); }   /* a guest of the sky, never full white */
.answer h1 .answer-measure { font-weight: 300; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.answer-caption { font-size: 17px; font-weight: 500; letter-spacing: 0; line-height: 1.45; margin-top: clamp(16px, 0.38em, 24px); color: rgba(244,247,252,.78); }   /* a guest of the sky: medium, not full white; the gap scales with the line above */
.answer-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: var(--ink-2); margin-bottom: 14px; }
.answer .trail ~ h1 .answer-eyebrow { display: none; }          /* the trail already says it */
.chip-dress { font-weight: 700; font-size: 13.5px; letter-spacing: 0.01em; }
.fact-k { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.fact-v { font-size: 16px; font-weight: 700; letter-spacing: 0; }
.widget .w-text { font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; }
.widget .w-big { font-size: 24px; font-weight: 300; letter-spacing: -0.01em; }
.lesson h2, .lessons figcaption h2 { font-size: 17px; font-weight: 700; letter-spacing: 0; }
.bridge p { font-size: 20px; font-weight: 300; letter-spacing: 0; line-height: 1.5; }
.bridge p strong { font-weight: 700; }
.sibs-head, .fig-head { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.sib-name { font-size: 18px; font-weight: 700; letter-spacing: 0; }
.sib-value { font-size: 13.5px; font-weight: 600; }
.sib:hover, .sib:hover .sib-name { text-decoration: none; }
.sky-readout span { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; }
.sky-readout strong { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sky-chip .k { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; }
.reference-page h1, .reference-title { font-weight: 300; letter-spacing: -0.01em; }
.chart .grid-line { stroke-dasharray: none; stroke: var(--hairline); }
html.m-pinned .sky-section > .sky-ui .sky-mark, html.m-pinned .sky-section > .sky-ui .sky-corner { position: absolute; z-index: 5; }

/* ---- every zone in one glance: the world-time planner */
.zn-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 22px 0 18px; }
.zn-form { display: flex; gap: 8px; }
.chip-input { height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--hairline); background: rgba(244,247,252,.04); color: var(--ink); font: inherit; font-size: 14px; min-width: 190px; outline: none; }
.chip-input:focus { border-color: rgba(244,247,252,.4); }
.chip-input::placeholder { color: var(--ink-3); }
.zn-globe { margin: 8px 0 26px; }
.zn-globe-stage { position: relative; height: clamp(320px, 46vw, 540px); border-radius: 20px; overflow: hidden; touch-action: none; cursor: grab;
                  background: radial-gradient(ellipse at 50% 58%, #0b1430 0%, #05080f 62%); opacity: .35; transition: opacity .8s ease; }
.zn-globe-stage.is-lit { opacity: 1; }
.zn-globe-stage:active { cursor: grabbing; }
.zn-globe-stage canvas { display: block; }
.gl-pins { position: absolute; inset: 0; pointer-events: none; }
.gl-pin { position: absolute; transform: translate(-50%, -100%); white-space: nowrap; padding: 5px 10px; border-radius: 999px;
          font: 500 12px/1.3 var(--round); letter-spacing: .01em; color: rgba(244,247,252,.82); background: rgba(5,8,15,.58);
          border: 1px solid rgba(244,247,252,.14); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity .25s; }
.gl-pin.home { color: #f4f7fc; border-color: rgba(244,247,252,.3); }
.zn-wrap { position: relative; padding-top: 30px; }
.zn-instant { position: absolute; top: 0; left: 50%; transform: translateX(-50%); margin: 0; white-space: nowrap; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.zn-overlap { position: relative; height: 10px; margin: 0 0 4px; overflow: hidden; }
.zn-overlap i { position: absolute; top: 3px; height: 4px; border-radius: 2px; background: #f4f7fc; }
.zn-overlap i.all { top: 2px; height: 6px; box-shadow: 0 0 8px rgba(244,247,252,.45); }
.zn-board { position: relative; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; border-radius: 20px; overflow: hidden; border: 1px solid var(--hairline); background: var(--night-0); outline: none; min-height: 104px; }
.zn-board:active { cursor: grabbing; }
.zn-board:focus-visible { border-color: rgba(244,247,252,.45); }
.zn-scrubber { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: #f4f7fc; box-shadow: 0 0 12px rgba(244,247,252,.5); pointer-events: none; z-index: 3; }
.zn-empty { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; color: var(--ink-3); }
.zone { position: relative; height: 128px; overflow: hidden; border-top: 1px solid rgba(244,247,252,.08); }   /* the stack, then a breath, then the ruler's lane */
.zone:first-child { border-top: 0; }
.zone canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.zone-copy { position: absolute; left: 18px; top: 12px; display: flex; flex-direction: column; gap: 4px; pointer-events: none; text-shadow: 0 1px 14px rgba(5,8,15,.55); }
.zone-name { font-size: 13px; font-weight: 500; line-height: 1.3; letter-spacing: .02em; color: rgba(244,247,252,.72); }
.zone-time { font-size: 30px; font-weight: 300; letter-spacing: -.012em; line-height: 1.12; font-variant-numeric: tabular-nums; color: rgba(244,247,252,.9); }
.zone-meta { font-size: 12px; font-weight: 500; line-height: 1.3; margin-top: 2px; color: rgba(244,247,252,.55); }
.zone-ruler { position: absolute; left: 0; right: 0; bottom: 9px; height: 14px; pointer-events: none; }
.zone-ruler i { position: absolute; transform: translateX(-50%); font: 500 10.5px/1 var(--round); font-style: normal; letter-spacing: .06em; color: rgba(244,247,252,.5); text-shadow: 0 1px 8px rgba(5,8,15,.6); }
.zone-ruler i.midnight { color: rgba(244,247,252,.85); }
.zone-remove { position: absolute; right: 12px; top: 12px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--hairline); background: rgba(5,8,15,.4); color: var(--ink-2); font: 500 17px/1 var(--round); cursor: pointer; opacity: 0; transition: opacity .2s; z-index: 2; }
.zone:hover .zone-remove, .zone-remove:focus-visible { opacity: 1; }
.zones .how { margin-top: 18px; color: var(--ink-2); max-width: 70ch; }
.zones .how summary { cursor: pointer; color: var(--ink); font-weight: 600; }
.zones .how p { margin: 10px 0 0; line-height: 1.55; }
@media (max-width: 640px) {
  .zone { height: 116px; } .zone-time { font-size: 26px; } .zone-remove { opacity: 1; }
  .zn-instant { font-size: 11px; } .chip-input { min-width: 150px; }
}

/* the cities hub: the globe carries the world; the flat map is its fallback */
.hub-globe { margin: -14px 0 30px; }
.hub-globe .zn-globe-stage { touch-action: pan-y; }   /* at the top of a page a vertical swipe must scroll, not turn the Earth */
html.has-globe #hub-world { display: none; }

/* the planner's stack: desktop leads with the globe; a phone leads with the answer and folds the globe */
.zn-stack { display: flex; flex-direction: column; }
.zn-stack > .zn-controls { order: 1; } .zn-stack > .zn-globe { order: 2; } .zn-stack > .zn-wrap { order: 3; }
.zn-globe-summary { list-style: none; cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 12px; }
.zn-globe-summary::-webkit-details-marker { display: none; }
.zn-globe-summary::before { content: "▸ "; } .zn-globe[open] > .zn-globe-summary::before { content: "▾ "; }
@media (max-width: 699px) {
  .zn-stack > .zn-wrap { order: 1; } .zn-stack > .zn-controls { order: 2; margin-top: 22px; } .zn-stack > .zn-globe { order: 3; margin-top: 26px; }
}

/* the launch list and accounts: one field on the bridge, the rest on demand */
.bridge { flex-wrap: wrap; }
.launch { flex-basis: 100%; margin: 4px 0 0; }
.launch[hidden] { display: none; }
.launch-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.launch-field { display: flex; }
.launch .chip-input { min-width: 0; width: 240px; max-width: 100%; }
.launch .chip-dress { font-weight: 500; }
.bridge .launch p { font-size: 14px; font-weight: 400; letter-spacing: 0; line-height: 1.5; margin: 0; max-width: 60ch; text-wrap: pretty; color: var(--ink-3); }
.bridge .launch p strong { font-weight: 500; color: var(--ink); }
.bridge .launch .launch-lead { font-size: 15px; color: var(--ink); margin-bottom: 12px; }
.bridge .launch .launch-note, .bridge .launch .launch-state, .bridge .launch .launch-links { margin-top: 10px; }
.bridge .launch .launch-state.warn { color: var(--ink); }
.launch-link { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(244,247,252,.3); cursor: pointer; }
.launch-link:hover { color: var(--ink); }
.launch.is-busy { opacity: .7; }
@media (max-width: 640px) {
  .launch .chip-input { width: 100%; }
  .launch-field { width: 100%; }
}
.launch-prefs { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; }
.launch-pref { display: grid; grid-template-columns: 18px 1fr; column-gap: 10px; align-items: baseline; font-size: 14px; color: var(--ink); cursor: pointer; }
.launch-pref input { width: 16px; height: 16px; margin: 0; accent-color: var(--ink); align-self: center; }
.launch-pref-why { grid-column: 2; font-size: 13px; color: var(--ink-3); }

/* the instruments sheet: every row is glyph | name over value, at any width,
   so a long value never fights its name for the line and the names share
   one left edge a fixed gap from the glyph */
.nav-panel .sib { display: grid; grid-template-columns: 40px 1fr; grid-template-areas: "g n" "g v"; column-gap: 14px; row-gap: 3px; align-items: center; }
.nav-panel .sib-glyph { grid-area: g; width: 40px; height: 26px; margin: 0; justify-self: center; }
.nav-panel .sib-glyph.g-round { width: 30px; height: 30px; }
.nav-panel .sib-name { grid-area: n; white-space: normal; }
.nav-panel .sib-value { grid-area: v; text-align: left; }
/* a caption's heading breathes before its line */
.lessons figcaption h2 { margin: 10px 0 10px; }

/* the sunset page's one lesson: full width, the scale as the figure */
.lessons.lessons-one { grid-template-columns: 1fr; }
.lessons.lessons-one .fig-draw { max-width: 560px; }
.lessons.lessons-one figcaption p { max-width: 62ch; }
/* the year of light: the chart is an instrument, so its floor label and cursor read at size */
.year-light { display: block; width: 100%; height: auto; touch-action: pan-y; cursor: crosshair; }

/* the sunset outing: the plan in words, its actions, the kept outings, a date chip */
.plan-words { font-size: clamp(17px, 2.1vw, 20px); font-weight: 400; line-height: 1.5; color: var(--ink); max-width: 60ch; margin: 30px 0 14px; text-wrap: pretty; }
.ot-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 8px; }
.ot-plans { margin-top: 26px; }
.chip-dress.has-input { padding: 0; overflow: hidden; }
.chip-dress.has-input .chip-date { height: 44px; border: 0; background: transparent; padding: 0 16px; min-width: 0; width: 176px; color: var(--ink); color-scheme: dark; }
.answer-chips .chip-input { min-width: 0; width: 220px; }
#ot-state { margin-top: 6px; }
/* the evening strip draws at one unit per pixel, so its names keep their own size on any frame */
.fig-wide .widget.evening-strip .w-text { font-size: 12.5px; }
@media (max-width: 640px) { .fig-wide .widget.evening-strip .w-text { font-size: 12px; } }

/* the newcomer's rule: a framing line under the answer (first visit only), chips that say
   what they are with the native control underneath, and the answer settling after a change */
.first-frame { margin: 14px 0 18px; max-width: 56ch; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.first-frame .first-frame-close { margin-left: 6px; color: var(--ink); }
.chip-dress.has-native { position: relative; }
.chip-dress.has-native .chip-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; margin: 0; padding: 0; font: inherit; color-scheme: dark; }
.chip-dress.has-inline { gap: 6px; }
.chip-dress.has-inline .chip-label { color: var(--ink-2); white-space: nowrap; }
.chip-dress.has-inline .chip-inline { background: transparent; border: 0; outline: none; color: var(--ink); font: inherit; width: 132px; min-width: 0; padding: 0; height: auto; }
.chip-dress.has-inline .chip-inline::placeholder { color: var(--ink-3); }
.chip-dress.has-inline:focus-within { background: var(--lift-14); }
@keyframes settle { from { opacity: .35; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.answer h1.settle { animation: settle .55s ease-out; }
@media (prefers-reduced-motion: reduce) { .answer h1.settle { animation: none; } }

/* one figure in the open, and the room around it: the answer's figure has no rule
   above it and air below; the fold, the next instruments and the bridge each sit a
   full breath apart; the readout strip is gone from instrument pages */
.ground-inner { padding-top: clamp(64px, 10vh, 120px); }
.fig.fig-answer { border-top: 0; padding-top: 0; margin: 0; }
.fig.fig-answer .fig-draw { margin-bottom: 0; }
.call-chips, .ot-actions { margin-bottom: clamp(40px, 6vh, 64px); }
.model-note.provenance { margin: 22px 0 0; }
details.how.how-knows { margin: clamp(56px, 9vh, 96px) 0 0; border-top: 1px solid var(--hairline); padding-top: 22px; }
details.how.how-knows[open] > summary { margin-bottom: 30px; }
details.how.how-knows .figs, details.how.how-knows .figures { margin-top: 6px; }
details.how.how-knows .figs-cap { margin: 0 0 8px; }
details.how.how-knows .lessons { margin-top: 44px; }
details.how.how-knows > .model-note:first-of-type { margin-top: 0; }
.sibs { margin-top: clamp(80px, 12vh, 128px); }
.bridge { margin-top: clamp(80px, 12vh, 128px); }
.answer-chips { gap: 10px; }
/* the answer figure on a phone: a 720-unit drawing at 340px needs its labels set in
   larger units to land inside the 9–20px band; the big numerals keep their own size */
@media (max-width: 640px) { .fig.fig-answer .widget text:not(.w-big) { font-size: 20px; } }

/* the instruments sheet: a row keeps one box in every state — rest, hover, current —
   and only its background answers the pointer; a padding that changed on hover shrank
   the row by 22px and made the list jump under the pointer */
.nav-panel .sib, .nav-panel .sib:hover, .nav-panel .sib[aria-current] { padding: 13px 10px; margin: 0 -10px; transition: background-color .18s ease; border-radius: 10px; }
.nav-panel .sib:hover { background: var(--lift-04); }
.nav-panel .sib[aria-current] { background: var(--lift-04); }
.nav-panel .sib:hover .sib-name { text-decoration: none; }
/* the guide sits inside its figure, which may be narrow and centred: a rule there
   would print shorter and at a different inset than the column's own hairlines */

/* a date is chosen through a chip that says the day, with the native picker underneath:
   a raw "09/07/2026" field is a form, not an instrument */
.chip-dress.has-native { position: relative; cursor: pointer; }
.chip-dress.has-native .chip-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; margin: 0; padding: 0; font: inherit; color-scheme: dark; }

/* THE FLEET FINDER (/cities) — see site/visual-rendering-notes.md. */

.fleet-find { margin: clamp(30px, 5vh, 50px) 0 0; }
.fleet-find-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fleet-field { flex: 1 1 240px; max-width: 340px; }
.fleet-field .chip-inline { width: 100%; }
.fleet-orders { display: flex; flex-wrap: wrap; gap: 8px; }
/* the chosen order is a filled chip, never a ring; a pointer leaves no ring behind
   either — the shared .chip-dress:focus-within rule is for fields, and a keyboard
   visit still gets its outline */
.fleet-orders .chip-dress[aria-pressed="true"] { background: var(--ink); color: var(--night-0); }
.fleet-orders .chip-dress[aria-pressed="true"]:hover { background: #fff; }
.fleet-orders .chip-dress:focus-within:not(:focus-visible) { outline: none; }
.fleet-count { margin: 16px 0 0; max-width: 70ch; color: var(--ink-2); }
.fleet-legend { margin: 4px 0 0; max-width: 70ch; }
.fleet-legend .launch-link { font-size: inherit; color: var(--ink); }
.fleet-list .fleet:first-child { margin-top: 18px; }

/* a row: the city's place as its mark, name and its line, the ordered figure, the
   three doors, and the city's own day as the rule beneath. The mark stands on the
   page's edge and the words are indented from it, so the row still begins where
   everything else on the page begins. */
.fleet .ff-row, .fleet .ff-row:hover {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 158px 200px;
  grid-template-areas: "name figure links" "line figure links";
  align-items: center;
  column-gap: clamp(16px, 2.4vw, 36px);
  row-gap: 0;
  padding: 17px 10px 19px 52px;
  margin: 0 -10px;
  border-bottom: 0;
  border-radius: 12px;
  background: none;
}
.fleet .ff-row:hover { background: var(--lift-04); }
.fleet .ff-row .ff-name {
  grid-area: name; min-width: 0; white-space: normal;
  font-size: 18px; font-weight: 700; letter-spacing: 0; line-height: 1.3; color: var(--ink);
}
.fleet .ff-row .ff-line {
  grid-area: line; min-width: 0; margin-top: 4px;
  font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.fleet .ff-row .ff-figure {
  grid-area: figure; display: flex; align-items: baseline; justify-content: flex-end;
  gap: 8px; min-width: 0; text-align: right;
}
.fleet .ff-row .ff-k {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap;
}
.fleet .ff-row .ff-v {
  font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fleet .ff-row .sib-value { grid-area: links; justify-content: flex-end; }

/* the city's place, as the row's mark: absolute on the page's edge, so the row's
   grid — and every gate that measures it — is the grid it always was */
.fleet .ff-row .ff-globe {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; pointer-events: none;
}
.fleet .ff-row .ff-globe svg { display: block; width: 100%; height: 100%; }

/* the day, drawn: the row's own rule, painted with that city's own sky. Round ends,
   3px — a data line, not a hairline. The paint is a band under the dot, clipped to
   the rule's own round ends; the bar's own background is what a row wears if the
   drawing never arrives, and the dot stays white, because it is the marker and not
   the light. */
.fleet .ff-row .ff-bar {
  position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px;
  border-radius: 2px; background: var(--lift-08);
}
.fleet .ff-row .ff-paint {
  position: absolute; inset: 0; border-radius: 2px; overflow: hidden;
}
.fleet .ff-row .ff-paint svg { display: block; width: 100%; height: 100%; }
.fleet .ff-row .ff-bar b {
  position: absolute; top: -2.5px; width: 8px; height: 8px; margin-left: -4px;
  border-radius: 50%; background: rgba(244, 247, 252, 0.92);
  box-shadow: 0 0 0 2.5px var(--night-0);
}

/* nothing found: say so in plain words, and offer the way back */
.ff-empty { margin: 26px 0 clamp(40px, 6vh, 72px); max-width: 60ch; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.ff-empty .launch-link { color: var(--ink); }

@media (max-width: 700px) {
  .fleet .ff-row, .fleet .ff-row:hover {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name figure" "line line" "links links";
    align-items: start;
    column-gap: 14px;
    padding: 15px 10px 19px 44px;
  }
  /* the row grows a third line for its doors on a phone, and a mark centred on all
     three would float away from the name it belongs to: it sits on the name instead */
  .fleet .ff-row .ff-globe { top: 15px; transform: none; width: 26px; height: 26px; }
  .fleet .ff-row .ff-figure { align-self: baseline; }
  .fleet .ff-row .sib-value { justify-content: flex-start; margin-top: 12px; }
  .fleet .ff-row .ff-name { font-size: 17px; }
  .fleet .ff-row .ff-line { font-size: 12.5px; }
  .fleet-field { max-width: none; flex: 1 1 100%; }
  /* five orders on a phone: the tap target keeps its 44px, the words give up their air */
  .fleet-orders .chip-dress { padding: 10px 13px; font-size: 12.5px; }
}

/* ============================================================================
   THE EMBED BUILDER (/embed) — growth loop 4's product half.
   A partner assembles the embed here: the place, the answer, the line their
   reader actually needs, the day they want pinned, and the size that fits
   their column. The preview is the embed itself, run the way a host page runs
   it, and the cost panel reads its real bytes back out of the frame.
   Appended, unlayered: these rules win whatever their specificity.
   ========================================================================= */
.builder { margin-top: clamp(28px, 5vh, 48px); }
.em-rows { display: flex; flex-direction: column; gap: 22px; margin: 0 0 26px; }
/* the row's name and its chips: 12px of air, so the label never crowds a capsule */
.em-row-name { display: block; margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.em-row-set { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.em-row-set .chip-dress[aria-pressed="true"] { background: var(--lift-14); box-shadow: inset 0 0 0 1px rgba(244,247,252,.22); }
.preview { border: 1px solid var(--hairline); border-radius: 20px; padding: 18px; background: rgba(244,247,252,.02); }
.preview .host-note { margin: 0 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.em-caption { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); max-width: 62ch; }
.snippets { margin-top: 34px; }
.snippets h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin: 34px 0 6px; }
.snippets h2:first-of-type { margin-top: 0; }
.snippets p { color: var(--ink-2); margin: 0 0 12px; max-width: 62ch; }
.snip { position: relative; margin: 0 0 24px; }
.snippet { margin: 0; padding: 16px 112px 16px 18px; border: 1px solid var(--hairline); border-radius: 14px; background: rgba(244,247,252,.03);
           font: 500 13px/1.6 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--ink); overflow-x: auto; white-space: pre-wrap; word-break: break-all; }
.copy-btn { position: absolute; top: 12px; right: 12px; }
/* what the embed costs the host page, in the host page's own units */
.em-cost { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; }
.em-cost li { padding: 16px 18px; border: 1px solid var(--hairline); border-radius: 14px; }
.em-cost strong { display: block; margin-bottom: 8px; font-size: 26px; font-weight: 300; letter-spacing: -0.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.em-cost span { display: block; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.notes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 26px 0 0; padding: 0; list-style: none; }
.notes li { padding: 14px 16px; border: 1px solid var(--hairline); border-radius: 14px; color: var(--ink-2); line-height: 1.45; }
.notes li strong { color: var(--ink); display: block; margin-bottom: 6px; }

/* ============================================================
   THE ICON SET — the marks drawn by public/icons.js
   One grid (24 units, live area 2–22), one stroke (1.8, round-capped and
   round-joined), monochrome and inheriting currentColor. Nothing in this
   block paints a mark: every icon carries its own opacity hierarchy and
   its own var(--lift-08) bodies. All that is said here is how big a mark
   is, where it sits, and which ink it takes from the type beside it.
   ============================================================ */

svg.sol-icon { display: block; flex: none; }

/* The Instruments sheet. A 30px mark centred in the row's existing 40px
   slot, so the row's geometry — the grid column, the 13px padding, the
   line boxes — is exactly what it was under the live miniatures; only the
   drawing inside the slot changed. The mark takes the row's own ink, so
   it brightens and dims with the row it belongs to. */
.nav-panel .sib-icon { width: 40px; height: 30px; color: inherit; }
.nav-panel .sib-icon svg.sol-icon { width: 30px; height: 30px; }

/* a mark inside a chip rides beside its label, on the chip's own 7px gap */
.chip-mark { display: inline-flex; align-items: center; flex: none; margin-left: -2px; }
.chip-mark svg.sol-icon { width: 15px; height: 15px; }


/* ================================================================
   SKY OBSERVATIONS  (/tools/observations)
   The other half of the Oracle's record: the four words as a choice,
   the visitor's own evenings as a list, and the called-versus-seen
   drawing. Monochrome, like all chrome — the painted sky above carries
   the colour. No panel is a solid grey: every lift is white at 9%
   (--lift-08), which the chip dress already is. Appended and unlayered,
   so nothing here needs an id to win.
   ================================================================ */

/* the four words, kept together as one control inside the action row */
.ob-rate { display: flex; flex-wrap: wrap; gap: 8px; }
.ob-actions [aria-checked="true"]::before { content: "\25CF"; margin-right: 8px; font-size: .7em; vertical-align: 1px; }
.ob-actions { align-items: center; }
.ob-actions .chip-dress[disabled] { opacity: .5; cursor: default; }

/* the state line under the actions, in the outing's own voice */
.ob-state { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); max-width: 62ch; }
.ob-state.warn { color: var(--ink); }

/* the journal: one evening a row — when and where, what was called and what was seen */
.ob-journal { margin: 26px 0 32px; }
.ob-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; row-gap: 5px;
  padding: 15px 0; border-top: 1px solid var(--hairline);
}
.ob-journal .sibs-head + .ob-row { border-top: 0; }
.ob-when { font-size: 16px; line-height: 1.45; color: var(--ink); }
.ob-pair { font-size: 14px; line-height: 1.45; color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }
.ob-note { grid-column: 1 / -1; font-size: 14px; line-height: 1.5; color: var(--ink-2); max-width: 62ch; }
/* an evening is only yours if you can take it back */
.ob-drop { grid-column: 1 / -1; justify-self: start; font-size: 13px; color: var(--ink-2); min-height: 30px; }

/* the two links inside the fold wear the sib dress without the .sibs class: the layout
   snapshot takes the FIRST .ground .sibs on the page, and a closed <details> still
   reports a box for its subtree, so a .sibs in the fold would stand in for the page's
   own next-instruments row in every baseline it writes */
.ob-links { margin-top: 40px; }

/* the figure draws one unit per pixel, so its labels are set here in plain pixels and
   never scale past the 9–20px a label may render at. The ground-wide answer-figure
   rules size labels by the frame instead, so these carry a column of their own. */
.ground .fig .ob-chart text.w-text,
.ground .fig.fig-answer .ob-chart text.w-text { font-size: 13px; font-weight: 400; letter-spacing: 0; }
.ob-chart text.w-dim { fill: var(--ink-2); }

@media (max-width: 640px) {
  .ob-rate { width: 100%; }
  .ob-rate .chip-dress { flex: 1 1 45%; justify-content: center; }
  .ob-row { grid-template-columns: minmax(0, 1fr); }
  .ob-pair { text-align: left; }
  .ob-drop { min-height: 44px; }
  .ground .fig .ob-chart text.w-text,
  .ground .fig.fig-answer .ob-chart text.w-text { font-size: 15px; }
}

/*  — see site/visual-rendering-notes.md. */

.launch { max-width: 62ch; }
.bridge .launch, .nav-bridge .launch { margin-top: 18px; }
.bridge .launch { max-width: none; }

/* the row: fields side by side on a wide screen, stacked on a phone, the
   button on the capsules' own baseline rather than the labels' */
.launch .launch-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; row-gap: 20px; }
.launch .launch-row > .launch-go { margin-top: 28px; }
.launch .launch-choice { align-items: center; gap: 14px; margin-top: 6px; }

/* one field is one column — label, capsule, meter, hint all on one edge, so
   the Show button can never sit past the capsule's end */
.launch .launch-field { display: flex; flex-direction: column; align-items: stretch; width: 280px; max-width: 100%; min-width: 0; }
.bridge .launch .launch-label, .nav-bridge .launch .launch-label, .launch .launch-label {
  display: block; margin: 0 0 10px; font-size: 12px; line-height: 1.5; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
}
.launch .launch-box { position: relative; display: flex; align-items: center; width: 100%; }
.launch .chip-input { background: var(--lift-08); border: 0; width: 100%; min-width: 0; height: 46px; padding: 0 18px; }
.launch .chip-input:hover { background: var(--lift-14); }
.launch .chip-input:focus { background: var(--lift-14); outline: 2px solid var(--ink-2); outline-offset: 2px; }
.launch .chip-input[aria-invalid="true"] { background: var(--lift-14); }
.launch .launch-box.has-eye .chip-input { padding-right: 78px; }
.launch .launch-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; padding: 8px 12px; border-radius: 999px;
  font: inherit; font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-2); cursor: pointer;
}
.launch .launch-eye:hover { color: var(--ink); background: var(--lift-08); }
.launch .launch-go { min-height: 46px; font-weight: 500; }

/* the hint under a capsule: the strength in words, or the one correction.
   14px and speaking ink — a 13px whisper is a gate failure and a bad hint */
.bridge .launch .launch-hint, .nav-bridge .launch .launch-hint, .launch .launch-hint {
  margin: 10px 0 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); max-width: 46ch;
}
.bridge .launch .launch-hint.warn, .nav-bridge .launch .launch-hint.warn, .launch .launch-hint.warn { color: var(--ink); }

/* the strength, as three round-ended segments: white hierarchy, no verdict colour */
.launch .launch-meter { display: flex; gap: 5px; margin: 10px 0 0; width: 100%; }
.launch .launch-meter i { flex: 1; height: 3px; border-radius: 999px; background: var(--lift-08); }
.launch .launch-meter[data-score="1"] i:nth-child(1) { background: var(--ink-3); }
.launch .launch-meter[data-score="2"] i:nth-child(-n+2) { background: var(--ink-2); }
.launch .launch-meter[data-score="3"] i { background: var(--ink); }

/* the reasons, where the decision is made: a bright lead, then the plain fact */
.launch .launch-why { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; max-width: 62ch; }
.launch .launch-why li { font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: 0; color: var(--ink-2); text-wrap: pretty; }
.launch .launch-why li strong { font-weight: 600; color: var(--ink); }

/* the trust line, and the page that explains the whole of it */
.bridge .launch .launch-trust, .nav-bridge .launch .launch-trust, .launch .launch-trust {
  margin: 16px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); max-width: 62ch;
}
.launch .launch-methods { color: var(--ink); white-space: nowrap; }

/* what the account holds: spacing and one hairline, never a box */
.launch .launch-panel { margin: 6px 0 0; max-width: 58ch; border-top: 1px solid var(--hairline); padding-top: 22px; display: flex; flex-direction: column; gap: 26px; }
.bridge .launch .launch-head, .nav-bridge .launch .launch-head, .launch .launch-head {
  margin: 0 0 14px; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
}
.launch .launch-plans { display: flex; flex-direction: column; margin-bottom: 4px; }
.launch .launch-plan { display: flex; align-items: baseline; gap: 16px; padding: 12px 10px; margin: 0 -10px; border-radius: 10px; transition: background-color .18s ease; }
.launch .launch-plan:hover { background: var(--lift-04); }
.launch .launch-plan-link { flex: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; min-width: 0; text-decoration: none; }
.launch .launch-plan-link:hover { text-decoration: underline; text-decoration-color: var(--ink-2); }
.launch .launch-plan-name { font-size: 15px; line-height: 1.4; color: var(--ink); }
.launch .launch-plan-when { font-size: 14px; line-height: 1.4; color: var(--ink-2); white-space: nowrap; }
.launch .launch-remove { flex: none; font-size: 14px; color: var(--ink-2); }
.launch .launch-chip { margin-top: 14px; font-weight: 500; }
.launch .launch-choice .launch-chip { margin-top: 0; }
.launch .launch-verify { margin: 0; }
.bridge .launch .launch-wayout, .nav-bridge .launch .launch-wayout, .launch .launch-wayout { margin-top: 12px; }
.launch .launch-prefs { margin: 0; }
.launch .launch-prefs .launch-pref { margin: 0 0 10px; }
.launch .launch-prefs .launch-pref:last-child { margin-bottom: 0; }
.bridge .launch .launch-pref-why, .nav-bridge .launch .launch-pref-why, .launch .launch-pref-why { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
/* the offer and the two links that answer it are one thought: a wide breath
   above them, a short one between */
.bridge .launch .launch-links, .nav-bridge .launch .launch-links, .launch .launch-links { margin-top: 10px; }
.bridge .launch .launch-note, .nav-bridge .launch .launch-note, .launch .launch-note { margin-top: 20px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.bridge .launch .launch-state, .nav-bridge .launch .launch-state, .launch .launch-state { margin-top: 16px; font-size: 14px; line-height: 1.5; color: var(--ink); }

/* working: the page stays put and the control says what it is doing */
.launch[aria-busy="true"] { opacity: .72; }
.launch[aria-busy="true"] .launch-go { cursor: progress; }

/* the instruments sheet is a narrow column whatever the screen: the same form,
   stacked, so a long address is not clipped by a field sized for a wide bridge */
.nav-bridge .launch .launch-row { flex-direction: column; align-items: stretch; }
.nav-bridge .launch .launch-field { width: 100%; }
.nav-bridge .launch .launch-row > .launch-go { width: 100%; justify-content: center; margin-top: 0; }
.nav-bridge .launch .launch-panel { max-width: none; }

@media (max-width: 640px) {
  .launch .launch-row { flex-direction: column; align-items: stretch; }
  .launch .launch-field { width: 100%; }
  .launch .launch-row > .launch-go { width: 100%; justify-content: center; margin-top: 0; }
  .launch .launch-choice { flex-direction: row; flex-wrap: wrap; }
  .launch .launch-plan { gap: 12px; }
  .launch .launch-plan-link { flex-direction: column; gap: 4px; }
}

/* the trust link lands on the section, not under the mast */
#your-address { scroll-margin-top: 28px; }
/* the lesson is a two-column grid — a heading beside its prose — so more than one
   paragraph has to arrive as ONE grid child or the paragraphs zig-zag between the
   columns and the reading order breaks */
.lesson > .lesson-body { min-width: 0; }
.lesson > .lesson-body > p:last-child { margin-bottom: 0; }

/*  — see site/visual-rendering-notes.md. */

/* the options — one row each, the face on the left, the answer on the right */
.tm-slots { display: flex; flex-direction: column; gap: 10px; margin: 0 0 clamp(40px, 6vh, 64px); }
.tm-slot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--lift-08); border-radius: 20px; padding: 14px 16px;
}
.tm-slot.is-focused { background: var(--lift-14); }
.tm-slot.is-confirmed { background: rgba(255, 255, 255, 0.22); }
.tm-face {
  flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 3px;
  background: none; border: 0; padding: 0; margin: 0; text-align: left; cursor: pointer;
  font-family: var(--round); color: var(--ink);
}
.tm-n { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); line-height: 1.55; }
.tm-when { font-size: 19px; font-weight: 300; letter-spacing: -0.015em; line-height: 1.35; font-variant-numeric: tabular-nums; color: var(--ink); }
.tm-line { font-size: 14px; font-weight: 400; line-height: 1.5; color: rgba(244, 247, 252, 0.7); text-wrap: pretty; }
.tm-answers { display: flex; gap: 8px; flex-wrap: wrap; }
.tm-a { cursor: pointer; }
/* the answered option wears the bridge chip's own emphasis: white ground, night ink */
.tm-a[aria-pressed="true"] { background: var(--ink); color: var(--night-0); }
.tm-a[aria-pressed="true"]:hover { background: #fff; }

/* the roster — a fold of its own, closed until asked */
.tm-team { margin: 0 0 26px; }
.tm-team > summary { cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); list-style: none; line-height: 1.7; }
.tm-team > summary::-webkit-details-marker { display: none; }
.tm-team > summary::before { content: "\25B8  "; }
.tm-team[open] > summary::before { content: "\25BE  "; }
.tm-name-field { margin: 16px 0 4px; }
.tm-member { padding: 16px 0; border-top: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 10px; }
.tm-member:first-child { border-top: 0; }
.tm-member-head, .tm-days, .tm-hours, .tm-add, .tm-team-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tm-add, .tm-team-actions { margin: 14px 0 0; }
.tm-member-place { font-size: 14px; font-weight: 400; line-height: 1.6; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tm-days-label { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; line-height: 1.7; text-transform: uppercase; color: var(--ink-3); margin-right: 2px; }
.tm-days { gap: 6px; }
/* a working day is on or off by ink and weight, over the chip's own two-step lift */
.tm-day { min-width: 34px; justify-content: center; padding: 8px 8px; cursor: pointer; color: rgba(244, 247, 252, 0.55); font-weight: 400; }
.tm-day[aria-pressed="true"] { background: var(--lift-14); color: var(--ink); font-weight: 700; }
.tm-day[aria-pressed="true"]:hover { background: rgba(255, 255, 255, 0.22); }
.tm-remove { cursor: pointer; }
.tm-note { font-size: 14px; line-height: 1.6; color: var(--ink-2); max-width: 70ch; margin: 16px 0 0; }
.tm-state { font-size: 14px; line-height: 1.6; color: var(--ink-2); max-width: 70ch; margin: 0 0 20px; }
.tm-state.warn { color: var(--ink); }
.tm-teams { margin: 0 0 26px; }
.tm-team-row { width: 100%; background: none; border: 0; font: inherit; text-align: left; cursor: pointer; }

/* the figure: one instant, on everybody's own day. The drawing is laid out at one
   unit per pixel, so these labels keep their own size on any frame and stay inside
   the audit's 9–20px band; the specificity clears the .fig-wide rule that would
   otherwise print a 19px name across a phone column. */
.fig.fig-answer .fig-draw .widget.tm-band text { font-family: var(--round); font-weight: 400; letter-spacing: 0; }
.fig.fig-answer .fig-draw .widget.tm-band .tm-name { font-size: 13px; fill: rgba(244, 247, 252, 0.72); }
.fig.fig-answer .fig-draw .widget.tm-band .tm-time { font-size: 14px; fill: var(--ink); font-variant-numeric: tabular-nums; }
.fig.fig-answer .fig-draw .widget.tm-band .tm-tick { font-size: 11px; fill: rgba(244, 247, 252, 0.6); font-variant-numeric: tabular-nums; }
.fig.fig-answer .fig-draw .widget.tm-band .tm-cap { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; fill: rgba(244, 247, 252, 0.55); }

/* the fold's cross-reference: every option on every clock */
.tm-grid { margin: 0 0 10px; overflow-x: auto; }
.tm-grid table { border-collapse: collapse; width: 100%; font-size: 13.5px; font-weight: 400; font-variant-numeric: tabular-nums; margin-top: 6px; }
.tm-grid th, .tm-grid td { text-align: right; padding: 9px 10px; border-bottom: 1px solid var(--hairline); white-space: nowrap; line-height: 1.6; }
.tm-grid thead th { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.tm-grid tbody th { text-align: left; padding-left: 2px; font-weight: 400; color: var(--ink-2); }
.tm-grid td.tm-in { color: var(--ink); }
.tm-grid td.tm-out { color: rgba(244, 247, 252, 0.6); }
.tm-tally { margin: 18px 0 10px; }
.tm-tally-row { font-size: 14px; line-height: 1.6; color: var(--ink-2); margin: 0; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .tm-slot { padding: 13px 14px; }
  .tm-when { font-size: 17px; }
  .tm-answers { width: 100%; }
  .tm-a { flex: 1; justify-content: center; }
  .tm-member-head .chip-dress.has-inline .chip-inline { width: 104px; }
  .tm-hours .chip-dress.has-inline .chip-inline { width: 150px; }
  /* seven days and their name will not share a phone's line: the name takes its own */
  .tm-days-label { flex-basis: 100%; margin: 0; }
  .tm-day { min-width: 32px; padding: 8px 6px; }
}

/* The world-time planner, made a working tool (2026-09-07) — see site/visual-rendering-notes.md. */

/* the mirror an editable chip is measured against — never seen, never read */
.zn-mirror { position: absolute; left: -9999px; top: 0; white-space: pre; visibility: hidden; pointer-events: none; }
.zn-ico { width: 15px; height: 15px; flex: none; display: block; }

/* ── the lists ─────────────────────────────────────────────────────────── */
.zn-lists { margin: 20px 0 14px; }
.zn-lists-head { margin: 0 0 11px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.3; color: var(--ink-3); }
.zn-list-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.zn-list { display: inline-flex; align-items: center; gap: 9px; background: var(--lift-08); box-shadow: none; border: 0; }
.zn-list:hover { background: var(--lift-14); }
.zn-list.is-on { background: var(--lift-14); padding-right: 8px; cursor: default; }
.zn-list.is-on:hover { background: var(--lift-14); }
.zn-list-name {
  border: 0; background: none; padding: 0 1px; margin: 0; color: var(--ink);
  font: inherit; font-size: 14px; font-weight: 500; letter-spacing: 0; min-width: 28px;
  outline: none; border-radius: 4px; cursor: text;
  border-bottom: 1px solid transparent; transition: border-color .18s;
}
.zn-list-name:hover { border-bottom-color: var(--hairline); }
.zn-list-name:focus { border-bottom-color: var(--ink-2); }
.zn-list-name:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.zn-list-n { font-size: 12px; font-weight: 500; color: rgba(244,247,252,.62); font-variant-numeric: tabular-nums; }
.zn-list-x, .zn-list-keep {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: var(--lift-08); color: var(--ink-2); cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 500; letter-spacing: 0;
  border-radius: 999px; padding: 0; width: 28px; height: 28px; transition: background .18s, color .18s;
}
.zn-list-keep { width: auto; padding: 0 13px; height: 30px; color: var(--ink); }
.zn-list-x:hover, .zn-list-keep:hover { background: var(--lift-14); color: var(--ink); }
.zn-list-new { color: var(--ink-2); }
.zn-list-new:hover { color: var(--ink); }
.zn-list-new .zn-ico { width: 14px; height: 14px; }
.zn-list-state { margin: 14px 0 0; font-size: 13px; font-weight: 500; line-height: 1.45; color: rgba(244,247,252,.62); }
.zn-quiet {
  border: 0; background: none; padding: 0; color: var(--ink); cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 500; text-decoration: underline;
  text-decoration-color: var(--hairline); text-underline-offset: 3px;
}
.zn-quiet:hover { text-decoration-color: var(--ink-2); }

/* ── the picker: one plus, then a searchable list ──────────────────────── */
.zn-picker { position: relative; }
.zn-plus { display: inline-flex; align-items: center; gap: 9px; }
.zn-picker.is-open .zn-plus { visibility: hidden; }   /* it keeps its box, so nothing beside it moves */
.zn-field {
  position: absolute; z-index: 8; top: 0; left: 0; width: min(370px, calc(100vw - 48px));
  background: var(--night-2); border-radius: 22px; padding: 8px; box-shadow: 0 20px 52px rgba(0,0,0,.6);
}
.zn-field-row { display: flex; align-items: center; gap: 6px; }
.zn-search {
  flex: 1; min-width: 0; height: 42px; padding: 0 15px; border: 0; border-radius: 999px;
  background: var(--lift-08); color: var(--ink); font: inherit; font-size: 15px; font-weight: 500; outline: none;
}
.zn-search::placeholder { color: rgba(244,247,252,.5); font-weight: 400; }
.zn-search:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 2px; }
.zn-field-close {
  flex: none; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px; background: none; color: var(--ink-2); cursor: pointer; transition: background .18s, color .18s;
}
.zn-field-close:hover { background: var(--lift-08); color: var(--ink); }
.zn-options { list-style: none; margin: 2px 0 0; padding: 0; max-height: min(46vh, 340px); overflow-y: auto; overscroll-behavior: contain; }
.zn-opt {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 11px 15px; min-height: 44px; border-radius: 13px; cursor: pointer;
}
.zn-opt[aria-selected="true"] { background: var(--lift-08); }
.zn-opt-name { font-size: 14.5px; font-weight: 500; line-height: 1.35; color: var(--ink); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zn-opt-meta { flex: none; font-size: 12px; font-weight: 500; line-height: 1.35; color: rgba(244,247,252,.55); font-variant-numeric: tabular-nums; white-space: nowrap; }
.zn-pop-note { margin: 10px 9px 6px; font-size: 12px; font-weight: 500; line-height: 1.45; color: rgba(244,247,252,.55); }

/* ── the handle: the instant, dressed as the thing you pull ────────────── */
.zn-wrap { padding-top: 2px; }
.zn-head { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 12px; }
.zn-handle {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--lift-08);
  color: var(--ink-2); cursor: ew-resize; touch-action: none; user-select: none; -webkit-user-select: none;
  transition: background .18s, color .18s;
}
.zn-handle:hover { background: var(--lift-14); color: var(--ink); }
.zn-handle:active { background: var(--lift-14); }
.zn-grip { width: 14px; height: 12px; flex: none; display: block; opacity: .8; }
.zn-instant {
  position: static; transform: none; margin: 0; white-space: nowrap;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  line-height: 1.3; color: inherit; font-variant-numeric: tabular-nums;
}
.zn-hint { margin: 0; max-width: 46ch; text-align: center; font-size: 12.5px; font-weight: 500; line-height: 1.45; color: rgba(244,247,252,.62); }
/* the line that crosses every row keeps a knob where the hand meets it —
   and an empty list has no instant, so neither the line nor its knob is drawn */
.zn-board.is-empty .zn-scrubber { display: none; }
.zn-knob {
  position: absolute; top: 0; left: 50%; width: 9px; height: 9px; margin-left: -4.5px;
  border-radius: 50%; background: #f4f7fc; box-shadow: 0 0 10px rgba(244,247,252,.55);
}

/* ── the row: a name of its own, and its tools on the right ────────────── */
/* the row grows by the height of the name chip: the three lines keep the gaps
   they had, and the meta line still clears the ruler's numerals by nine px */
.zone { height: 140px; }
.zone-copy { gap: 0; top: 12px; right: 52px; }   /* the copy stops before the row's tools, whatever the city is called */
.zone-head { display: flex; align-items: center; gap: 9px; min-width: 0; margin-bottom: 10px; pointer-events: auto; }
.zone-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zone-time { margin-bottom: 3px; }
/* A CONTROL OVER A PAINTED SKY, and the one plate that reads on every one of
   them. A night scrim alone vanishes on a midnight row (measured: "HQ" over
   London at 11:40 PM read as a floating word, not a chip); a white lift alone
   vanishes at noon. So the plate is both, composited — the chip's own white
   over a night scrim — and it lands darker than a bright sky and lighter than
   a black one. No ring, no solid grey; the sky still shows through. */
.zn-tag, .zn-tag-edit {
  font: inherit; font-size: 11.5px; font-weight: 500; line-height: 1.3; letter-spacing: .01em;
  height: 24px; padding: 0 10px; border: 0; border-radius: 999px; outline: none;
  color: rgba(244,247,252,.72); cursor: pointer; text-shadow: inherit;
  background: linear-gradient(rgba(255,255,255,.10), rgba(255,255,255,.10)), rgba(5,8,15,.38);
  max-width: 16ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .18s, color .18s;
}
.zn-tag { display: inline-flex; align-items: center; gap: 5px; }
.zn-tag-plus { width: 11px; height: 11px; flex: none; display: block; }
.zn-tag-word { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.zn-tag.is-named { background: linear-gradient(rgba(255,255,255,.13), rgba(255,255,255,.13)), rgba(5,8,15,.5); color: rgba(244,247,252,.9); }
.zn-tag:hover { background: linear-gradient(rgba(255,255,255,.19), rgba(255,255,255,.19)), rgba(5,8,15,.6); color: rgba(244,247,252,.92); }
.zn-tag-edit { cursor: text; color: var(--ink); background: linear-gradient(rgba(255,255,255,.13), rgba(255,255,255,.13)), rgba(5,8,15,.72); min-width: 64px; text-shadow: none; }
.zn-tag-edit::placeholder { color: rgba(244,247,252,.5); }
.zn-tag:focus-visible, .zn-tag-edit:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.zn-tools { position: absolute; right: 12px; top: 8px; display: flex; gap: 6px; z-index: 2; }
.zn-tool {
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; color: rgba(244,247,252,.78);
  background: linear-gradient(rgba(255,255,255,.12), rgba(255,255,255,.12)), rgba(5,8,15,.42);
  cursor: pointer; opacity: 0; transition: opacity .2s, background .18s, color .18s;
}
.zn-tool:hover { background: linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,.2)), rgba(5,8,15,.62); color: var(--ink); }
.zone:hover .zn-tool, .zn-tool:focus-visible, .zone:focus-within .zn-tool { opacity: 1; }
.zn-empty { font-size: 14px; font-weight: 500; color: rgba(244,247,252,.62); text-align: center; padding: 0 24px; }

/* the stack's order: the lists name the board, so they come first everywhere */
.zn-stack > .zn-lists { order: 0; }
@media (max-width: 699px) {
  .zn-field { width: min(370px, calc(100vw - 40px)); }
}
@media (max-width: 640px) {
  .zone { height: 128px; }
  .zn-instant { font-size: 11px; letter-spacing: .06em; }
  .zn-tool { opacity: 1; }   /* there is no hover on a phone: the row's tools are simply there */
  .zn-hint { font-size: 12px; }
}

/* the globe's stage and its city names — globe.js owns the framing itself — see site/visual-rendering-notes.md.
   It owns the FADE too, as of 2026-09-12: a name's opacity is written every frame
   (its depth past the limb × how far it has arrived), and a CSS transition over a
   per-frame write is a lag, not a smoothing — it made every fade trail the globe by
   its own duration. One authority, and it stands down under reduced motion in the
   script, where every target is taken at once. `will-change` keeps the seven or so
   live names on their own layers, so a turn composites instead of repainting. */
.zn-globe-stage { background: radial-gradient(ellipse at 50% 50%, #0a1129 0%, #05080f 68%); }
.gl-pin { left: 0; top: 0; border: 0; padding: 5px 11px; font-weight: 500; color: rgba(244,247,252,.78);
          background: rgba(5,8,15,.52); box-shadow: 0 1px 10px rgba(5,8,15,.34);
          transition: none; }
.gl-pin.home { color: rgba(244,247,252,.96); background: rgba(5,8,15,.62); }

/* ============================================================================
   THE DRAWN FIGURES, September 2026 — appended block. Three owner notes:
   the moon read flat and cheap; the charts did not move or answer a pointer;
   and the golden-hour tool gave its own subject two ticks on a 24-hour bar.
   Nothing above this line is edited; everything here is additive.
   ========================================================================= */

/* A calm entrance. Only opacity and stroke length move, never geometry — a
   translated band changes its own box, and both the rhythm audit (`crowded`)
   and the interaction gate read boxes. The resting state is VISIBLE, so a
   drawing whose script never ran is simply shown. */
.widget .w-enter { opacity: 0; transition: opacity .62s cubic-bezier(.22,.68,.3,1); transition-delay: var(--w-d, 0ms); }
.widget .w-enter.w-in { opacity: var(--w-o, 1); }
.widget .w-draw { stroke-dasharray: var(--w-len, 1); stroke-dashoffset: var(--w-len, 1); transition: stroke-dashoffset .95s cubic-bezier(.25,.72,.28,1); transition-delay: var(--w-d, 0ms); }
.widget .w-draw.w-in { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .widget .w-enter, .widget .w-draw { opacity: var(--w-o, 1); stroke-dashoffset: 0; stroke-dasharray: none; transition: none; }
}

/* The golden hours, opened out. The figure draws at one unit per pixel — the
   doctrine's rule for drawings whose names must read at any size — so its
   labels are set here in px and land inside the 9–20 px band on every frame,
   including under the phone rule that lifts other answer figures to 20px.
   Type over a painted band is the sky's guest: hierarchy by size and opacity,
   regular or medium weight, never full white (doctrine, 2026-09-06). */
.golden-instrument { display: block; width: 100%; height: auto; touch-action: pan-y; cursor: crosshair; }
.widget.golden-instrument .w-head { font-size: 11.5px; font-weight: 700; letter-spacing: .11em; fill: rgba(244,247,252,.58); }
.widget.golden-instrument .w-band { font-size: 12.5px; font-weight: 500; letter-spacing: .02em; fill: rgba(244,247,252,.9); }
.widget.golden-instrument .w-sub  { font-size: 11px; font-weight: 400; letter-spacing: 0; fill: rgba(244,247,252,.66); }
.widget.golden-instrument .w-time { font-size: 12px; font-weight: 400; letter-spacing: 0; fill: rgba(244,247,252,.62); font-variant-numeric: tabular-nums; }
.widget.golden-instrument .w-time.w-key { font-weight: 700; fill: rgba(244,247,252,.95); }
.widget.golden-instrument .w-mins { font-size: 20px; font-weight: 300; letter-spacing: -.01em; fill: rgba(244,247,252,.95); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .fig .widget.golden-instrument text, .fig-wide .widget.golden-instrument text,
  .fig.fig-answer .widget.golden-instrument text { font-size: 12px; }
  .fig .widget.golden-instrument .w-head, .fig-wide .widget.golden-instrument .w-head,
  .fig.fig-answer .widget.golden-instrument .w-head { font-size: 10.5px; }
  .fig .widget.golden-instrument .w-sub, .fig-wide .widget.golden-instrument .w-sub,
  .fig.fig-answer .widget.golden-instrument .w-sub { font-size: 10.5px; }
  .fig .widget.golden-instrument .w-mins, .fig-wide .widget.golden-instrument .w-mins,
  .fig.fig-answer .widget.golden-instrument .w-mins { font-size: 19px; }
}

/* The four rungs and the light path answer a pointer now, so they wear the
   crosshair every other inspectable drawing wears. */
.rung-instrument, .oracle-instrument { cursor: crosshair; }

/* THE ONE-UNIT-PER-PIXEL DRAWINGS AND THE PHONE RULE. — see site/visual-rendering-notes.md. */
.widget.year-light .w-text { font-size: 12.5px; }
@media (max-width: 640px) {
  .fig .widget.year-light .w-text, .fig-wide .widget.year-light .w-text,
  .fig.fig-answer .widget.year-light text:not(.w-big) { font-size: 12px; }
  .fig.fig-answer .widget.evening-strip text:not(.w-big) { font-size: 12px; }
}

/* ---------------- data studies (L-018) ----------------
   A page built to be cited: the finding in the sky, one chart in the open,
   the citation to take, the working under the fold. The sky is taller here
   because the answer is a paragraph, not a number, and it needs air. No
   seated chips: the sky's times would only compete with the finding. */
.sky-section.study { height: 66dvh; min-height: 540px; max-height: 760px; }
.sky-section.study .answer { max-width: 720px; }
.sky-section.study .answer h1 { font-size: clamp(24px, 3.4vw, 38px); }
.sky-section.study #sky-chips { display: none; }
@media (max-width: 640px) { .sky-section.study .answer h1 { font-size: 23px; } .sky-section.study { min-height: 640px; } }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table { min-width: 860px; }
.table-plain td.note { white-space: nowrap; }
.cite { margin-top: clamp(40px, 6vh, 64px); }
.cite .cite-text {
  background: var(--lift-04); border-radius: 14px; padding: 14px 18px; margin: 8px 0 6px;
  font-size: 14.5px; font-weight: 600; color: var(--ink-2); line-height: 1.6; overflow-wrap: anywhere;
}
.cite .cite-note { font-size: 12.5px; color: var(--ink-3); margin: 6px 0 0; max-width: 70ch; line-height: 1.65; }

/* no frosted glass over a live canvas (owner, 2026-09-08) — see site/visual-rendering-notes.md. */
.sky-mark, .sky-corner .chip-dress, .answer-chips .chip-dress, .sky-chip, .sky-inspector, .win-scrub .chip-dress, .gl-pin {
  backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* ---------------- the words of light (L-019) ----------------
   A definition is a sentence, so the hero is sized like the study's: air
   above and below a three-line h1, the live line under it, two chips. */
.sky-section.learn { height: 66dvh; min-height: 600px; max-height: 760px; }
.sky-section.learn .answer { max-width: 720px; }
.sky-section.learn .answer h1 { font-size: clamp(24px, 3.2vw, 36px); }
@media (max-width: 640px) { .sky-section.learn .answer h1 { font-size: 22px; } .sky-section.learn { min-height: 660px; } }
/* no seated chips on a word's sky: the pinned moment puts RISE and SET on the horizon line, a pixel from the
   hero's own chips (the rhythm gate: 0.4px where 8 is the floor), and the live line already says the times */
.sky-section.learn #sky-chips { display: none; }

/* THE GRID — one edge, defined once (owner rule, 2026-09-09) — see site/visual-rendering-notes.md. */
:root { --content: 1120px; --gutter: clamp(20px, 5vw, 64px); --edge: max(var(--gutter), calc((100% - var(--content)) / 2)); }
.sky-mark { left: var(--edge); }
.sky-corner { right: var(--edge); }
.answer { left: var(--edge); right: var(--edge); }
.sky-readout { left: var(--edge); right: var(--edge); }
.ground-inner { max-width: none; padding-left: var(--edge); padding-right: var(--edge); }
/* The signature stands on the page's edge like everything else. It used to be BOTH centred to the
   content width (max-width 1120, margin auto) AND given the edge as padding, so its content landed
   at twice the edge: at 1920 the footer wordmark sat at 800 while the masthead's stood at 400. The
   rule for .ground-inner above sets max-width:none for exactly this reason; this one was missed. */
.signature { max-width: none; margin-left: 0; margin-right: 0; padding-left: var(--edge); padding-right: var(--edge); }
.mast { padding-left: var(--edge); padding-right: var(--edge); }
.mast-row { align-items: flex-end; }   /* nothing beside the mark is centred on it: bottom-aligned, or moved away */
.ground-inner > .trail { margin-bottom: 18px; }
.room-page details.how { margin-left: var(--edge); margin-right: var(--edge); }   /* the room's fold stood at 0: on the edge like everything else */

/* ---------------- the invitation (L-027: the fourth review) ----------------
   Beside the result, after the one figure and its note, never over the answer:
   one line naming the native benefit that matches the page's intent, a chip
   that carries the intent to /app, and on the sunset pages two of the app's
   widget shapes drawn for this city — a preview, and it says so. */
.app-invite { margin: clamp(28px, 4vh, 44px) 0 0; padding-top: 22px; border-top: 1px solid var(--hairline); }
.app-invite .invite-line { margin: 0 0 14px; font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 64ch; }
.app-invite .invite-line strong { color: var(--ink); font-weight: 600; }
.app-invite .invite-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 14px 0 0; }
.app-invite .invite-note { font-size: 13px; color: var(--ink-3); }
.invite-plates { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.wp-plate { background: var(--lift-08); border-radius: 22px; padding: 14px; box-sizing: border-box; }
.wp-medium { width: min(100%, 336px); }
.wp-small { width: 158px; height: 158px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.wp-head { display: flex; justify-content: space-between; gap: 8px; }
.wp-cap { font-family: var(--round); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); padding: 3px 9px; border: 1px solid var(--hairline); border-radius: 999px; }
.wp-draw svg { display: block; width: 100%; height: auto; }
.wp-draw { margin: 6px 0 2px; }
.wp-arc { width: 96px; margin: 0; }
.wp-foot, .wp-under { font-family: var(--round); font-size: 12.5px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; margin-top: 10px; }   /* the rhythm gate wants 8px between a line and a drawing */
.wp-under { text-align: center; }
@media (max-width: 640px) { .wp-medium { width: 100%; } }

/* the golden bands, compact (L-030): the golden-hour figure's essence as a strip
   any card can wear — the same four altitude bands, the same sunward palette */
.widget.golden-bands { display: block; width: 100%; height: auto; }
.widget.golden-bands .w-head { font-size: 11px; font-weight: 700; letter-spacing: .11em; fill: rgba(244,247,252,.58); }
.widget.golden-bands .w-big-num { font-size: 19px; font-weight: 300; letter-spacing: -.02em; fill: var(--ink); font-variant-numeric: tabular-nums; }
.widget.golden-bands .w-band-on { font-size: 11px; font-weight: 700; letter-spacing: .04em; fill: rgba(5,8,15,.72); }
.widget.golden-bands .w-band { font-size: 12px; font-weight: 500; fill: rgba(244,247,252,.9); }
.widget.golden-bands .w-sub { font-size: 11px; font-weight: 600; fill: rgba(244,247,252,.66); font-variant-numeric: tabular-nums; }
/* the home page's opening figure: the golden hours, before anything else */
.home-golden { margin: 0 0 clamp(36px, 6vh, 64px); }
.home-golden figcaption p { margin: 10px 0 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.6; max-width: 62ch; }

/* The shared light explorer makes the four bands an instrument visitors can
   open wherever they are already exploring the sun. */
.light-jump { color: #d3d3d3; font-size: 12px; text-decoration: none; white-space: nowrap; padding: 10px 0; }
.light-jump:hover { text-decoration: underline; text-underline-offset: 4px; }
.light-explorer { margin: 48px 0; padding: 32px 0 0; border: 0; border-radius: 0; background: none; scroll-margin-top: 24px;  border-top: 1px solid rgba(255,255,255,.12); }
.le-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.le-eyebrow { font-size: 11px; letter-spacing: .16em; font-weight: 700; text-transform: uppercase; color: #bcbcbc; margin: 0 0 10px; }
.le-heading h2 { margin: 0; font-size: clamp(23px,2.7vw,30px); line-height: 1.3; letter-spacing: -.035em;  font-weight: 300; }
.le-date { font-size: 11px; white-space: nowrap; color: #bfbfbf; border: 1px solid rgba(255,255,255,.12); border-radius: 24px; padding: 7px 12px; }
.le-intro { max-width: 58ch; margin: 14px 0 26px; font-size: 13px; line-height: 1.7; color: #c0c0c0; }
.le-windows { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; }
.le-windows h3 { display: flex; justify-content: space-between; font-size: 13px; margin: 0 0 16px; color: #d7d7d7; line-height: 1.4;  font-weight: 600; }
.le-windows h3 span { color: #bbbbbb; }
.le-windows .w-head[text-anchor="end"] { display: none; }
.le-windows .widget.golden-bands .w-band-on { stroke: none; }
.le-details { margin-top: 22px; border-top: 1px solid rgba(255,255,255,.1); }
.le-details summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 0 0; cursor: pointer; list-style: none; color: #e3e3e3; font-size: 13px; font-weight: 600; min-height: 44px; }
.le-details summary::-webkit-details-marker { display: none; }
.le-arrow { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid rgba(219,219,219,.25); border-radius: 50%; font-size: 18px; line-height: 1.4; font-weight: 300; }
.le-close, .le-details[open] .le-open { display: none; }
.le-details[open] .le-close { display: inline; }
.le-details[open] .le-arrow { transform: rotate(45deg); }
.le-expanded { padding-top: 22px; }
.le-prompt { margin: 0 0 14px; font-size: 12px; color: #bdbdbd; }
.le-phases { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.le-phase { display: grid; gap: 9px; text-align: left; padding: 10px; color: #dedede; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: rgba(255,255,255,.025); font-family: inherit; font-size: 12px; cursor: pointer; }
.le-phase:hover, .le-phase[aria-pressed="true"] { border-color: #b7b7b7; background: rgba(194,194,194,.07); }
/* The swatch is painted from the sky by widgets.js, with the band's own colour at its own two
   ends. What is left here is the shape and a neutral ground for the moment before the script
   runs and for a reader with none: four invented gradients used to stand here, and they did not
   match the light in the strip above them. */
.le-phase i { display: block; width: 100%; height: 32px; border-radius: 6px; background: rgba(255,255,255,.06); }
.le-note { min-height: 3.4em; margin: 16px 0; font-size: 12px; line-height: 1.7; color: #cacaca; }
.le-full { margin: 8px -6px 18px; }
.le-more { font-size: 12px; color: #e3e3e3; text-underline-offset: 4px; }
.le-caveat { font-size: 11px; line-height: 1.65; color: #b0b0b0; margin: 12px 0 0; }
@media (max-width: 640px) {
  .light-explorer { border-radius: 0;  background: none;  border: 0;  border-top: 1px solid rgba(255,255,255,.12);  padding: 32px 0 0;  margin: 48px 0; }
  .le-heading { flex-direction: column; align-items: flex-start; }
  .le-windows { grid-template-columns: 1fr; gap: 22px; }
  .le-phases { gap: 6px; }
  .le-phase { padding: 7px; font-size: 10px; }
  .le-note { min-height: 6.8em; }
}

/* the instruments sheet, opened out (L-031) — see site/visual-rendering-notes.md. */
.nav-body { display: block; }
.nav-group { break-inside: avoid; }
.nav-group .sibs-head { margin: 16px 0 2px; }
.nav-group:first-child .sibs-head { margin-top: 4px; }
.nav-preview { display: none; }
@media (min-width: 1024px) {
  .nav-panel { width: min(880px, calc(100vw - 36px)); padding: 16px 24px 22px; }
  .nav-body { display: grid; grid-template-columns: minmax(0, 1fr) 248px; gap: 26px; align-items: start; }
  /* columns, not a grid: five boxes of very different heights in a 2×N grid leave a hole under
     the short ones (Tonight has eight rows, Your window three). Multi-column flows and balances
     them, and break-inside on the group keeps a heading with its rows. */
  .nav-groups { column-count: 2; column-gap: 30px; }
  .nav-preview {
    display: block; position: sticky; top: 4px; height: 268px; box-sizing: border-box;
    background: var(--lift-04); border-radius: 18px; padding: 16px; overflow: hidden;
  }
  .nav-preview-draw { height: 176px; display: flex; align-items: center; justify-content: center; }
  .nav-preview-draw svg { display: block; max-width: 100%; max-height: 176px; height: auto; }
  .nav-preview-draw.g-round svg { max-width: 150px; }
  .nav-preview-name { margin: 6px 0 2px; font-size: 14.5px; font-weight: 700; color: var(--ink); }
  .nav-preview-value { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--ink-2); line-height: 1.45;
                       display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  /* Rest, hover and current share ONE box. This rule used to set the resting padding alone,
     and hover fell back to the 13px/10px above — so pointing at a row grew it 4px taller and
     8px narrower, the two columns rebalanced, and up to 160 elements moved under the pointer
     (measured 13 Sept: rest 73px, hover 77px, name 226px to 210px). The negative margin above
     still gives the hover tint its 10px of reach on each side; it just costs no layout now. */
  .nav-panel .sib, .nav-panel .sib:hover, .nav-panel .sib[aria-current] { padding: 11px 2px; }
}
/* the two labels in the signature never break mid-phrase: "Methods &" over "sources" is
   how it printed when the webfont had not loaded and the fallback ran wider (12 Sept) */
.signature .source-link { white-space: nowrap; }
/* the wordmark's clear space (owner rule, 12 Sept): "the logo can never sit this close to
   complex elements like this". It had a 10px gap to the tagline in the signature — a line of
   type starting within half a letter of the mark. The rule is a clear band of at least 0.6× the
   mark's height on the side anything else approaches from; at 34px tall that is ~22px, and with
   the row's own 10px gap the tagline now starts 32px away. tests/grid.cjs measures it. */
.signature .sol-wordmark { margin-right: 22px; }
@media (max-width: 640px) { .signature .source-link { margin-left: 78px; } }

/* ============================================================================
   THE PICKER (public/picker.js) — every bounded choice is a grid you point at.

   Owner, 12 Sept: "Replace all drop downs and keyboard input fields in all pages
   that can be replaced with a large grid of selectable options … I don't want the
   site full of form fields. I need a UI that just flows smoothly through mouse
   interactions alone."

   The chip keeps its dress, its edge and its type: the trigger takes the hidden
   control's exact face (14px / 400, the unlayered rule at the head of the
   Observatory edition), so nothing about the capsule is redrawn. Its WIDTH does
   move, once: a native <select> is as wide as its longest option and a button
   showing the current value is as wide as the value, so the chip rows narrow —
   four of them from two lines to one (the layout baselines re-accepted in L-032).

   These rules are UNLAYERED on purpose — everything after @layer base is, and an
   unlayered rule beats a layered one whatever its specificity (L-031). The chevron
   the chip reserves room for lives in @layer base; nothing here touches it.
   ============================================================================ */

[data-pick][hidden] { display: none; }

.pk-trigger {
  -webkit-appearance: none; appearance: none;
  background: none; border: 0; margin: 0; padding: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; min-width: 0;
}
.chip-dress .pk-trigger { font-size: 14px; font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums; }
.chip-dress.has-select .pk-trigger { max-width: 100%; }
.pk-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* a date chip writes its own face ("Evening · tonight"); the trigger is the whole
   capsule behind it, exactly where the native picker used to lie */
.pk-trigger.pk-cover { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the chip's :focus-within ring is for fields. A pointer that opens a grid leaves no
   ring behind; a keyboard visit gets one on the trigger itself (the fleet's rule) */
.chip-dress.pk-on:focus-within { outline: none; }
.pk-trigger:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 999px; }
.chip-dress.pk-on.pk-live { background: var(--lift-14); }

.pk-scrim { position: fixed; inset: 0; z-index: 80; background: transparent; }
.pk-sheet {
  position: fixed; z-index: 81; top: 0; left: 0;
  width: min(420px, calc(100vw - 24px));
  max-height: min(66vh, 560px);
  display: flex; flex-direction: column;
  background: rgba(10, 16, 32, 0.92);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(5, 8, 15, 0.62), inset 0 0 0 1px var(--hairline);
}
.pk-sheet.pk-wide { width: min(680px, calc(100vw - 24px)); max-height: min(72vh, 620px); }
.pk-sheet.pk-days-wide { width: min(352px, calc(100vw - 24px)); }
.pk-sheet.pk-in { animation: pk-rise .16s ease-out; }
@keyframes pk-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.pk-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 14px 8px 18px; }
.pk-title { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(244, 247, 252, .55); }
.pk-x {
  -webkit-appearance: none; appearance: none; background: var(--lift-08); border: 0;
  width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center;
  color: var(--ink-2); cursor: pointer; flex: none;
}
.pk-x:hover { background: var(--lift-14); color: var(--ink); }
.pk-x svg { width: 14px; height: 14px; display: block; }

.pk-body { overflow-y: auto; overscroll-behavior: contain; padding: 0 14px 14px; display: flex; flex-direction: column; gap: 14px; }
.pk-grid { display: grid; gap: 6px; }
.pk-list { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.pk-sheet.pk-wide .pk-list { grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); }
.pk-head {
  grid-column: 1 / -1; margin: 6px 0 0;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(244, 247, 252, .55);
}
.pk-opt {
  -webkit-appearance: none; appearance: none; background: var(--lift-04); border: 0;
  border-radius: 12px; padding: 11px 12px; min-height: 44px;
  font-family: var(--round); font-size: 14px; font-weight: 500; line-height: 1.3;
  color: var(--ink-2); text-align: left; cursor: pointer;
  display: flex; align-items: center;
  transition: background .14s, color .14s;
}
.pk-opt:hover { background: var(--lift-14); color: var(--ink); }
.pk-opt[aria-selected="true"] { background: var(--ink); color: var(--night-0); font-weight: 700; }
.pk-opt[aria-selected="true"]:hover { background: #fff; }
.pk-opt:disabled { background: none; color: var(--ink-3); opacity: .4; cursor: default; }
.pk-opt:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* the date grid: a month, its two steps, and the weekday letters over the columns */
.pk-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.pk-month { margin: 0; font-size: 15px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.pk-step {
  -webkit-appearance: none; appearance: none; background: var(--lift-08); border: 0;
  width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center;
  color: var(--ink-2); cursor: pointer; flex: none;
}
.pk-step:hover:not(:disabled) { background: var(--lift-14); color: var(--ink); }
.pk-step:disabled { opacity: .3; cursor: default; }
.pk-step svg { width: 15px; height: 15px; display: block; }
.pk-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: -4px; }
.pk-week span { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(244, 247, 252, .55); text-align: center; }
.pk-days { grid-template-columns: repeat(7, 1fr); }
.pk-days .pk-opt { justify-content: center; text-align: center; padding: 10px 0; font-variant-numeric: tabular-nums; }
.pk-days .pk-opt.pk-today:not([aria-selected="true"]) { box-shadow: inset 0 0 0 1px var(--hairline); color: var(--ink); }

/* on a phone the grid comes up from the bottom, on the page's own edge */
.pk-sheet.pk-bottom {
  left: var(--gutter, 20px); right: var(--gutter, 20px); top: auto; bottom: 14px;
  width: auto; max-width: none; max-height: 74vh;
}
.pk-sheet.pk-bottom.pk-in { animation: pk-up .2s ease-out; }
@keyframes pk-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (max-width: 639px) { .pk-scrim { background: rgba(5, 8, 15, .45); } }
@media (prefers-reduced-motion: reduce) { .pk-sheet.pk-in { animation: none; } }

/* The sunlit room dresses its own controls — its own capsule, its own chevron drawn
   in two gradients — so the trigger takes that dress rather than the chip's. The
   7px top margin is the room's own: the rhythm gate's "crowded" rule fails a box
   within 8px of a line, and a trigger with no margin sat 2.5px under "Location". */
.room-page .pk-trigger {
  width: 100%; height: 42px; min-width: 0; margin: 7px 0 0; padding: 8px 16px;
  background: var(--lift-08); border-radius: 999px; color: var(--ink);
  font-family: var(--round); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  outline-offset: 3px;
}
.room-page .pk-select .pk-trigger {
  padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%;
  background-size: 5px 5px; background-repeat: no-repeat;
}
.room-page .room-location .pk-trigger { font-size: 15px; height: 48px; }
.room-page .pk-date .pk-trigger { font-size: 12px; padding-left: 10px; }
.room-page .pk-trigger:hover { background: var(--lift-14); }
@media (max-width: 760px) {
  .room-page .room-location .pk-trigger { height: 44px; font-size: 14px; }
  .room-page .pk-date .pk-trigger { font-size: 13px; }
}

/* ══ THE WORDS OF LIGHT: a drawn mark on every glossary row (2026-09-12) ══
   /learn's thirty rows, and the "Related words" on each of the thirty term
   pages, carry their own term DRAWN — the band of sky, the depth below the
   horizon, the disc, the angle the word actually means. The marks are built
   in public/learn/marks.js on the icon set's grammar and baked into the row
   by build.js, so nothing is fetched for them and no row shifts after paint.

   Four rules, and they exist because a glossary row is not an instrument
   row. An instrument's mark is a live 46x30 STRIP of its own answer and its
   row has a live value to balance it; a word's mark is a square 24-unit box
   and its row carries only a gloss.

   So the box is made square at 34px. That is NOT a new size — it is the one
   .sib-glyph.g-round already gives the round marks (the moon, the compass,
   the gauge), which is what keeps a TERM page honest: it carries both kinds
   of block, and measured at 1280 its "Related words" names land on 138 and
   its "More instruments" names on 136, where the 46x30 strip would have put
   them 12px apart. In a 46x30 box a square mark also letterboxes to 30px
   with 8px of dead air each side. And the name is made to grow, because .sib
   is a space-between flex row and a third child pushed every term name into
   the middle of the page, off the one edge the grid gate holds.

   All four are scoped to .sib-mark, so the instruments hub, the nav sheet,
   the city boards and the foot sibling rows are untouched. */
.sib-glyph.sib-mark { width: 34px; height: 34px; }
.sib:has(.sib-mark) .sib-name { flex: 1 1 auto; }
/* And on a phone the shared rule stacks the gloss under the name beside a
   46px gutter cut for the wide strips. Two things to correct, both only for
   these rows: the gutter is cut to the mark, and the gloss is brought back
   under the name. The stacking rule already asks for `text-align: left` and
   cannot get it — `.fleet .sib-value` is itself a flex container justified to
   flex-end (it carries three link chips on the city boards), and text-align
   does not reach an anonymous flex item. So the gloss is un-justified here
   instead. Left alone it hangs off the right margin with the name at the
   left, which is how a glossary row reads on a phone today wherever a fleet
   row has a glyph; scoped to .sib-mark, this fixes the thirty it owns and
   leaves that to be fixed where it belongs. */
@media (max-width: 640px) {
  .sib:has(.sib-mark) { grid-template-columns: 34px 1fr; }
  .sib:has(.sib-mark) .sib-value { justify-content: flex-start; }
}