/* The figure's stylesheet, loaded after calc.css by the two places that draw
 * one: /sun, which asks for it in its head, and the calculator, which asks for
 * it the first time an answer has a latitude in it and never otherwise.
 *
 * Not folded into calc.css, and not left inline in the page either. Inline was
 * how the figure arrived and the policy in public/_headers refuses it: there is
 * no 'unsafe-inline' in style-src, so a <style> block would have been dropped
 * on the floor and the page served as a column of unstyled SVG. Folded in, the
 * eleven kilobytes below would ride along on every visit from every reader,
 * including everybody who only ever converts a currency.
 *
 * So it is a second file, versioned in its name exactly as calc.css is, for the
 * reason written out in build.js: a name that has never existed cannot be
 * answered with last week's bytes.
 *
 * What is *not* here is everything calc.css already says. The figure arrived as
 * a standalone file carrying its own copy of the tokens, the body rule, .wrap,
 * .sr, .nav and .foot, and every one of those is now the sheet next door's.
 * Two copies of a token is one token that will be changed in one place.
 */

/* ===== THE HAND ===== */
/* The one face calc.css does not carry, because until this page there was
 * nothing on the site set in it. Named by the first eight hex of its own
 * sha256, like the two Inter files beside it and for the same reason: the name
 * moves when the glyphs move and never otherwise, so the year-long cache in
 * _headers is a promise that can be kept.
 */
@font-face {
  font-family: "Clipboard Script";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/clipboard-script.woff2?v=73e20a41") format("woff2");
}

:root { --hand: "Clipboard Script", "Inter", sans-serif; }

/* ===== TYPE ===== */
/* The heading is lettered rather than set, which is the one place this page
 * departs from the prose pages, and it departs on purpose: the drawing below
 * is labelled in this face throughout, and a title in Inter over a ring
 * lettered by hand reads as two documents stacked. The selector carries .page
 * because calc.css's own `.page h1` would otherwise outrank a bare h1 here and
 * quietly hand the title back to Inter.
 */
.page h1 {
  font-family: var(--hand);
  font-size: clamp(2.1rem, 6.5vw, 2.9rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0;
  margin-bottom: 0.5rem;
  overflow-wrap: break-word;
}

.lede { font-size: 0.9375rem; }
/* the prose follows the readouts rather than leading into the figure, so the
   air belongs above the first paragraph instead of below the last */
.stats + .lede { margin-top: 1.75rem; }

/* ===== THE FIGURE ===== */
.sky {
  position: relative; width: 100%;
  aspect-ratio: 680/700;
  border: 1px solid var(--line);
  overflow: hidden;
}
/* ===== THE ONE UNDER AN ANSWER ===== */
/* The same figure on the calculator rather than on this page, and the same
   width as the answer above it: the ring runs the full column, edge to edge
   with the headline and the echo, because a drawing indented inside a block of
   text reads as an attachment to it rather than as part of it. The lettering
   is drawn for this size too, which is the other half of it -- narrowed, the
   sixteen points of the rose close up into a smudge.

   Everything it drops, it drops here rather than in the script: the drawing is
   one implementation, and a second one built out of options is a second one to
   keep right.

   The panel goes, because an answer is not a place to put six controls, and
   display:none rather than a hidden attribute so its sliders leave the tab
   order with it. What stays is everything you can do on the drawing itself:
   the sun still drags round the ring, and either bearing still sends it there. */
.sun--inline .sky { margin-top: 1.25rem; }
.sun--inline .panel { display: none; }

/* The readouts stay, and for a while they did not.
   They were hidden here because the ring stood at an equinox while the answer
   above described a real evening: both printed a golden hour, the two differed
   by twenty minutes, and nothing on screen said which was which. Hiding them
   was a label on a discrepancy rather than a fix, and it left the ring drawing
   a twelve-hour day under an answer that said fifteen hours twenty-three.
   The ring takes the real declination now, so there is one evening on the
   screen and these describe it. */
.sun--inline .stats { margin-top: 1rem; }
.sun--inline .stat { font-size: 0.875rem; padding: 0.35rem 0; }

/* What the drawing will not say for itself: which parallel it is standing on,
   and that it is an equinox rather than tonight. The link is the way through to
   the full figure, which is the same drawing with its controls back. */
.figure__note {
  margin-top: 0.5rem;
  color: var(--faint);
  font-size: 0.875rem;
}

.figure__note a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line);
}

.figure__note a:hover,
.figure__note a:focus-visible {
  color: var(--text);
  text-decoration-color: var(--faint);
}

/* The conic sky, clipped to the horizon circle. Percentages are the circle's
   bounding box inside the 680x700 viewBox, so it tracks the SVG exactly. */
.sky__disc {
  position: absolute;
  left: 13.2353%; top: 14.2857%;
  width: 73.5294%; height: 71.4286%;
  border-radius: 50%;
}
/* the figure's own drawing only: a descendant selector here would also catch
   the icons inside the control panel and stretch them across the whole frame */
.sky > svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  touch-action: none; user-select: none;
}

.ts { font-family: var(--font); font-size: 12px; font-weight: 500; letter-spacing: -0.01em; }
.tn { font-family: var(--font); font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; }
.hand { font-family: var(--hand); font-weight: 400; letter-spacing: 0; }
.ts.hand { font-size: 18px; }
.tb.hand { font-size: 22px; }
.tf.hand { font-size: 16px; }
.tn.hand { font-size: 15px; font-variant-numeric: normal; }
/* Band names sit inside their wedges, so they run a touch smaller. */
.tbd.hand { font-size: 15px; }

/* Labels on the page rather than on the artwork must follow the theme. */
.lab       { fill: var(--text); }
.lab-dim   { fill: var(--muted); }
.lab-faint { fill: var(--faint); }

/* The control panel, in the corner the compass leaves free. Compact rows of
   label, slider and reading, under a header that folds the whole thing away.
   It takes the page's own tokens rather than a debug-overlay grey, so it reads
   as part of the drawing in either theme. */
.panel {
  position: absolute; top: 1.5%; left: 1.5%; z-index: 2;
  /* A share of the frame on a desktop, but never below the width the rows need:
     on a phone 41% is about 150px and the sliders vanish between the label and
     the reading. It starts folded, so a wide panel costs nothing until opened. */
  width: clamp(214px, 41%, 252px);
  background: var(--chip);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  font-size: 0.75rem; line-height: 1.3;
  box-shadow: 0 2px 12px rgb(0 0 0 / 0.07);
}
.panel__head {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 0.4rem 0.55rem;
  font: inherit; font-weight: 500; color: var(--text);
  background: none; border: 0; border-bottom: 1px solid var(--line);
  cursor: pointer; text-align: left;
}
.panel__head:hover { color: var(--text); background: var(--bg); }
.panel__chev { color: var(--faint); transition: transform .15s ease; }
.panel[data-open="false"] .panel__chev { transform: rotate(-90deg); }
.panel[data-open="false"] .panel__head { border-bottom: 0; }
.panel[data-open="false"] .panel__body { display: none; }
.panel__body { padding: 0.5rem 0.55rem 0.6rem; display: grid; gap: 0.45rem; }
.panel__row {
  /* the reading column has to hold "equator", not just "55°N" */
  display: grid; grid-template-columns: 4.4em minmax(0,1fr) 4.7em;
  align-items: center; gap: 0.4rem;
}
.panel__row label { color: var(--muted); cursor: default; }
.panel__row input[type="range"] { width: 100%; }
.panel__val {
  padding: 0.05rem 0.3rem; text-align: right; white-space: nowrap; overflow: hidden;
  color: var(--text); font-variant-numeric: tabular-nums;
  background: var(--bg); border: 1px solid var(--line); border-radius: 4px;
}
.panel__buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; margin-top: 0.1rem; }
/* phones: tighten the two outer columns so the slider keeps a usable middle */
@media (max-width: 560px) {
  .panel { font-size: 0.7rem; }
  .panel__row { grid-template-columns: 3.9em minmax(0,1fr) 4.4em; gap: 0.3rem; }
  .panel__body { padding: 0.45rem 0.45rem 0.5rem; }
}
.panel__run { width: 100%; justify-content: center; padding-inline: 0.4rem; }

/* the compass rose is a plan view, so it takes the page's ink, not the sky's */
/* An inset in the ring's own frame, in the corner the circle cannot reach, so
   it is in view whenever the ring is. It reads only, so the pointer passes
   straight through to the sun, which swings through this corner towards noon. */
.sky--rose {
  aspect-ratio: 429/464;
  position: absolute; top: 0.5%; right: 0.5%;
  width: 24%; pointer-events: none;
  /* no frame of its own: without one the rose can run wider than a boxed inset
     would, since only the drawn rose has to stay clear of the ring */
  border: 0; margin: 0;
}
/* the altitude scale sits outside the rim, on the page rather than on the sky,
   so it takes the page's ink instead of the white the hour ticks use */
.ring-rim  { fill: none; stroke: var(--faint); stroke-width: 1.1; opacity: 0.55; }
.alt-tick  { fill: var(--faint); stroke: none; }
.rose-rim  { stroke: var(--line); fill: none; }
.rose-tick { stroke: var(--faint); fill: none; }
/* The inset draws at a third of the ring's scale, so its lettering is set much
   larger in its own units to survive the reduction. Both selectors carry .hand
   to outrank .tf.hand, which would otherwise hold these at 16. 30 is the
   ceiling: past that NE and ENE start closing on each other. */
.rose-lab  { fill: var(--muted); }
.rose-card { fill: var(--text); }
.rose-lab.hand  { font-size: 30px; }
.rose-card.hand { font-size: 36px; }
.rose-dot  { fill: var(--text); }

/* the two horizon bearings are buttons — the ring is the hover affordance */
.mark { cursor: pointer; }
.mark:focus { outline: none; }
.mark .ring { opacity: 0; transition: opacity .12s ease; }
.mark:hover .ring, .mark:focus-visible .ring { opacity: 0.95; }

#hl { transition: opacity .4s ease; }
#sun-wrap { will-change: transform; }
#swatch { transition: background .5s ease; }

/* ===== CONTROLS ===== */

/* No slider exists in calculingo, so this is the system extrapolated:
   a 1px --line track, a --text thumb, no accent colour anywhere. */
input[type=range] {
  -webkit-appearance: none; appearance: none;
  background: none; cursor: pointer;
  width: 190px; height: 20px; flex: none;
}
input[type=range]:focus { outline: none; }
input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--chip), 0 0 0 4px var(--muted); }
input[type=range]::-webkit-slider-runnable-track { height: 1px; background: var(--line); }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px; margin-top: -5.5px;
  border: 0; border-radius: 999px; background: var(--text);
}
input[type=range]::-moz-range-track { height: 1px; background: var(--line); }
input[type=range]::-moz-range-thumb {
  width: 12px; height: 12px; border: 0; border-radius: 999px; background: var(--text);
}

/* The pill, lifted from .hints button — the one component this system has. */
.pill {
  font: inherit; font-size: 0.8125rem;
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--muted); background: var(--chip);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0.25rem 0.75rem; cursor: pointer; white-space: nowrap;
}
.pill:hover { color: var(--text); border-color: var(--muted); }

/* ===== READOUTS ===== */
/* calculingo has no cards: rows separated by a hairline, never by fill. */
.stats { margin-top: 1.75rem; }
.stat {
  display: flex; align-items: baseline; gap: 1rem;
  padding: 0.5rem 0; border-top: 1px solid var(--line);
  font-size: 0.9375rem;
}
.stat dt { flex: 1; min-width: 0; color: var(--muted); }
.stat dd { flex: 0 1 auto; text-align: right; font-variant-numeric: tabular-nums; }
.stat dd.hand { font-size: 1.2rem; line-height: 1.35; }
.stat__sky { display: inline-flex; align-items: center; gap: 0.5rem; }
/* Dragging a slider or the sun sweeps the pointer across the prose, and the
   browser treats that as a text drag-select. Suppress it for the duration. */
.panel { user-select: none; -webkit-user-select: none; }
body.ui-drag, body.ui-drag * { user-select: none !important; -webkit-user-select: none !important; }
#swatch {
  width: 12px; height: 12px; border-radius: 999px;
  display: inline-block; border: 1px solid var(--line);
}

.note { margin-top: 1.25rem; font-size: 1rem; line-height: 1.55; }

@media (prefers-reduced-motion: reduce) {
  #swatch, #hl, #sun-wrap, .mark .ring { transition: none !important; }
}