/* The Turning Year — night-sky first, with a parchment daylight theme. */

:root {
  --void: #05060d;
  --bg: #080a15;
  --bg-2: #0d1020;
  --panel: rgba(13, 16, 32, .82);
  --line: rgba(190, 200, 235, .14);
  --line-soft: rgba(190, 200, 235, .07);
  --ink: #e9ecf7;
  --ink-2: #a8b0cc;
  --ink-3: #6f7899;

  --sun-bright: #ffd873;
  --sun: #e8b84b;
  --sun-deep: #b8791f;
  --night: #1b2342;
  --night-2: #26305a;
  --twilight-1: #2b3565;   /* civil */
  --twilight-2: #202a52;   /* nautical */
  --twilight-3: #171e3d;   /* astronomical */


  /* The eight stations, each its own colour, running the spectrum round the
   * year: yellow at midsummer through orange and red into autumn, purple at
   * midwinter, then blue and the greens back up into spring. Keyed by offset
   * from the local winter solstice, so a southern cycle gets midsummer yellow
   * in December where it belongs. */
  --st-0: #9e7bd6;      /* winter solstice   purple      */
  --st-45: #5a9be2;     /* winter midseason  blue        */
  --st-90: #4cbe74;     /* spring equinox    green       */
  --st-135: #a6d64a;    /* spring midseason  light green */
  --st-180: #f5d046;    /* summer solstice   yellow      */
  --st-225: #f2a03e;    /* summer midseason  yellow-orange */
  --st-270: #ec7228;    /* autumn equinox    orange      */
  --st-315: #e24c4c;    /* autumn midseason  red         */

  --moon: #cfd8ef;
  --moon-dim: #59637f;
  /* The phase glyph needs "lit" and "unlit" explicitly. Reusing --moon for lit
     broke in the daylight theme, where --moon is a dark ink picked to read on
     parchment, so full moons drew darker than new ones. */
  --moon-lit: #e8eeff;
  --moon-shadow: #3d4763;
  --grow: #6fbf8b;
  --frost: #8fd3ff;
  --solstice: #ff9d5c;
  --equinox: #9db8ff;
  --cross: #d98cff;
  --today: #ff6b8a;
  --sky-patch: #0a0e22;   /* the Dipper's own patch of night sky — stays dark in both themes */

  --shadow: 0 18px 50px rgba(0,0,0,.55);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

body[data-theme="day"] {
  --void: #e6dcc6;
  --bg: #f7f2e6;
  --bg-2: #f1ead9;
  --panel: rgba(253, 250, 244, .93);
  --line: rgba(58, 46, 28, .28);
  --line-soft: rgba(58, 46, 28, .13);
  --ink: #1e180f;
  --ink-2: #4a4133;
  --ink-3: #786d5b;

  --sun-bright: #f2a80f;
  --sun: #dd8f10;
  --sun-deep: #ad6704;
  --night: #656d88;
  --night-2: #566080;
  --twilight-1: #a9aec2;
  --twilight-2: #8f95ab;
  --twilight-3: #787f97;


  /* Deepened for the cream ground, same eight hues in the same order. */
  --st-0: #6b4c9a;
  --st-45: #2f6fb8;
  --st-90: #2e8b4f;
  --st-135: #6b9e24;
  --st-180: #c2960a;
  --st-225: #d4791a;
  --st-270: #c2500f;
  --st-315: #b02a2a;

  --moon: #454c6b;
  --moon-dim: #a29a89;
  --moon-lit: #fffdf4;
  --moon-shadow: #8a8296;
  --grow: #2f7d4e;
  --frost: #1c6b98;
  --solstice: #b04a12;
  --equinox: #2c4c9c;
  --cross: #7a2c9c;
  --today: #b32744;
  --shadow: 0 14px 40px rgba(90, 70, 40, .2);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.app { display: flex; height: 100dvh; }

/* ------------------------------------------------------------------ panel */
.panel {
  width: 316px; flex: 0 0 316px; height: 100%; overflow-y: auto;
  background: var(--panel); backdrop-filter: blur(14px);
  border-right: 1px solid var(--line);
  padding: 22px 20px 28px; z-index: 5;
}
.panel-head h1 {
  font-family: var(--serif); font-weight: 500; font-size: 26px;
  margin: 0 0 2px; letter-spacing: .01em;
}
.panel-head .sub { margin: 0 0 12px; color: var(--ink-3); font-size: 12.5px; }
/* Why the wheel is built this way, at the top rather than in the footer with
 * the tools. It is the first thing to read, not the last. Sized to its own
 * word so it reads as an invitation beside the title, not as another control
 * in the stack below. */
.panel-head .ethos-btn {
  width: auto; margin: 0 0 22px; padding: 6px 16px; border-radius: 999px;
  font-family: var(--serif); font-size: 13px; letter-spacing: .06em;
  color: var(--sun); border-color: var(--line);
}
.panel-head .ethos-btn:hover { border-color: var(--sun); }


.field { margin-bottom: 22px; }
.field > label {
  display: block; font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 8px;
}
.meta { color: var(--ink-3); font-size: 12px; margin: 7px 0 0; }

input[type="text"] {
  width: 100%; padding: 9px 11px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg-2); color: var(--ink);
  font: inherit; font-size: 14px;
}
input[type="text"]:focus { outline: none; border-color: var(--sun); }
input[type="date"] {
  padding: 9px 11px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg-2); color: var(--ink); font: inherit; font-size: 13px;
  color-scheme: dark;
}
body[data-theme="day"] input[type="date"] { color-scheme: light; }
input[type="date"]:focus { outline: none; border-color: var(--sun); }

.goto-row { display: flex; gap: 8px; margin-top: 8px; }
.goto-row input[type="date"] { flex: 1; min-width: 0; }
.goto-row .ghost-btn { width: auto; flex: 0 0 auto; padding: 8px 16px; }
/* Date, then an optional time beside it. The time is narrower because it
 * always holds five characters and the date does not. */
.goto-row #goto-time { flex: 0 0 auto; width: 7.5em; }
.goto-row #goto-date { min-width: 0; }

.place-row { display: flex; gap: 8px; }
.icon-btn {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg-2); color: var(--ink-2);
  cursor: pointer; font-size: 16px; line-height: 1;
}
.icon-btn:hover { border-color: var(--sun); color: var(--sun); }

.results {
  list-style: none; margin: 6px 0 0; padding: 4px; max-height: 230px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2);
}
.results li { padding: 7px 9px; border-radius: 6px; cursor: pointer; font-size: 13.5px; }
.results li:hover, .results li[aria-selected="true"] { background: rgba(232,184,75,.14); }
.results li small { color: var(--ink-3); display: block; font-size: 11px; }

.cycle-row { display: flex; align-items: center; gap: 8px; }
.cycle-label { flex: 1; text-align: center; line-height: 1.25; }
.cycle-label strong { font-family: var(--serif); font-size: 16px; font-weight: 500; }
.cycle-label .meta { margin: 1px 0 0; }

.ghost-btn {
  width: 100%; margin-top: 8px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: transparent; color: var(--ink-2);
  font: inherit; font-size: 13px; cursor: pointer;
}
.ghost-btn:hover { border-color: var(--sun); color: var(--sun); }

.toggles { display: grid; gap: 7px; }
.tog { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
.tog input { accent-color: var(--sun); width: 15px; height: 15px; }

.frost-grid { display: grid; grid-template-columns: 1fr 92px; gap: 7px 10px; align-items: center; }
.frost-tag { font-size: 12.5px; color: var(--ink-2); }
.md-input { padding: 6px 8px !important; font-size: 13px !important; text-align: center; }

.notes-row { display: flex; gap: 8px; }
.notes-row .ghost-btn { flex: 1; }
.legend ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.legend li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ink-2); }
.sw { width: 13px; height: 13px; border-radius: 3px; flex: 0 0 auto; }
.sw-day { background: linear-gradient(0deg, var(--sun-deep), var(--sun-bright)); }
.sw-night { background: var(--night-2); }
.sw-moon { background: var(--moon); border-radius: 50%; }
.sw-grow { background: var(--grow); }
/* The eight-station wheel, in one swatch and in order. */
.sw-wheel {
  border-radius: 50%;
  background: conic-gradient(
    var(--st-0) 0 12.5%, var(--st-45) 12.5% 25%, var(--st-90) 25% 37.5%,
    var(--st-135) 37.5% 50%, var(--st-180) 50% 62.5%, var(--st-225) 62.5% 75%,
    var(--st-270) 75% 87.5%, var(--st-315) 87.5% 100%);
}
.sw-sol { background: var(--ink-3); border-radius: 50%; }
.sw-cq { background: var(--cross); transform: rotate(45deg); border-radius: 2px; }
.sw-noted { background: var(--sun-bright); border-radius: 50%; width: 8px; height: 8px; }
.sw-sky { background: none; border: 1px solid var(--ink-3); border-radius: 50%; position: relative; }
.sw-sky::after { content: ''; position: absolute; inset: 3px; background: var(--ink-2); border-radius: 1px; transform: rotate(20deg); }
.sw-dec {
  /* The two-tone swatch described a fill that no longer exists. It is the
     curve now: a line crossing its own equator. */
  background: linear-gradient(to bottom,
    transparent 0 42%, var(--sun-bright) 42% 58%, transparent 58% 100%);
}
/* Backed by the same dark sky patch the real glyphs sit on, so a white star
   stays visible in the daylight theme too. */
.sw-polaris {
  background:
    radial-gradient(circle, #fff 0 22%, rgba(188,212,255,.5) 23% 48%, transparent 49%),
    var(--sky-patch);
  border-radius: 50%;
}
.sw-twi { background: linear-gradient(0deg, var(--twilight-3), var(--twilight-1)); }
.sw-sunline { width: 14px; height: 0; border-top: 2px solid var(--sun-bright); border-radius: 0; background: none; }
.sw-moonline { width: 14px; height: 0; border-top: 2px dashed var(--moon); border-radius: 0; background: none; }
.sw-fill { background: var(--sun); opacity: .35; }
.sw-ring { background: none; border: 1.5px dashed var(--ink-3); border-radius: 50%; }
.sw-earth {
  background: linear-gradient(115deg, var(--sun) 45%, var(--night-2) 47%);
  border-radius: 50%; border: 1px solid var(--line);
}

.panel-foot { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line-soft); }

/* ------------------------------------------------------------------ stage */
.stage { position: relative; flex: 1; min-width: 0; overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, var(--bg-2), var(--bg) 70%); }

.crumbs {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; z-index: 4;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 12px; backdrop-filter: blur(10px);
  /* Four levels do not fit a phone's width. One line that scrolls beats a bar
   * that wraps and grows down over whatever it is labelling. */
  max-width: calc(100% - 150px); overflow-x: auto; scrollbar-width: none;
}
.crumbs::-webkit-scrollbar { display: none; }
.crumb { flex: 0 0 auto; }
.crumb-sep { flex: 0 0 auto; }
.crumb {
  border: 0; background: transparent; color: var(--ink-3); font: inherit; font-size: 12.5px;
  cursor: pointer; padding: 3px 7px; border-radius: 999px;
}
.crumb:disabled { opacity: .35; cursor: default; }
.crumb.is-on { color: var(--sun); }
.crumb-sep { color: var(--ink-3); font-size: 11px; }

/* Padding on the bottom carves out room for the summary card so the circle
 * is centred in what's left, never behind it; the svg's own max-height (below)
 * matches this reservation so the two can never overlap at any viewport size. */
.scene { position: absolute; inset: 0; display: grid; place-items: center;
  padding: 48px 12px calc(32dvh + 32px); touch-action: none;
  transition: opacity .45s ease, transform .45s ease; }
.scene[hidden] { display: none; }
.scene.fading { opacity: 0; transform: scale(.94); }

#wheel-svg, #day-svg, #orrery-svg {
  width: min(100%, calc(68dvh - 80px)); height: min(100%, calc(68dvh - 80px));
  display: block; overflow: visible; touch-action: none;
}
.scene { overflow: hidden; }
.moon-glyph { display: inline-block; vertical-align: middle; flex: 0 0 auto; }

#wheel, #dayclock { transform-box: view-box; }
#wheel, #hud { transform-origin: 500px 500px;
  transition: transform 900ms cubic-bezier(.5,.05,.2,1); }

/* Both the year/season readout and the day-clock panel live in a card below
 * the wheel, never on top of it — the circle stays fully visible, and the
 * text has a fixed, predictable home regardless of zoom level or screen size.
 * Its own max-height (matched by the space .scene reserves below the circle,
 * and by the svg's own max-height) is what keeps it from ever growing into
 * the wheel above it — it scrolls internally instead. */
.readout, .day-panel {
  position: absolute; left: 50%; top: auto; bottom: 16px; transform: translateX(-50%);
  text-align: center; pointer-events: none; width: min(300px, calc(100% - 32px));
  max-height: 40dvh; overflow-y: auto; box-sizing: border-box; touch-action: pan-y;
  overscroll-behavior: contain;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 15px 20px; backdrop-filter: blur(10px); box-shadow: var(--shadow);
}
.readout .r-num { font-family: var(--serif); font-size: 34px; line-height: 1; color: var(--ink); }
.readout .r-lab { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.readout .r-date { font-family: var(--serif); font-size: 15px; margin-top: 6px; color: var(--ink-2); }
.readout .r-rows {
  margin-top: 10px; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 2px 14px; font-size: 12px; color: var(--ink-2);
}
.readout .r-rows span { color: var(--ink-3); }
.readout .r-station { margin-top: 9px; font-family: var(--serif); font-size: 14px; color: var(--sun-bright); }
.readout .r-moon {
  margin-top: 9px; display: flex; align-items: center; justify-content: center;
  gap: 7px; font-size: 12px; color: var(--ink-2);
}
.readout .r-lunation { margin-top: 4px; font-size: 11.5px; color: var(--ink-3); }
.readout .r-hint { margin-top: 12px; font-size: 11px; color: var(--ink-3); }

/* -------------------------------------------------------------- day panel */
/* The day panel carries far more than the readout does, so it is allowed to
 * be taller, and it takes its own pointer events so the overflow can actually
 * be scrolled. Without that the tail of it, the moon's rows, was clipped and
 * out of reach. The readout keeps pointer-events: none, since the wheel
 * underneath it still needs the hover. */
/* Wider than the readout, because two columns of times stand half as tall as
 * one, and the wheel behind matters more than the panel does. */
/* The system panel carries seven bodies and four lines each, so it overflows
 * and has to be scrollable. It cannot be while it refuses the pointer, which
 * the readout does by default so the wheel behind it stays hoverable. This one
 * takes its events like the day panel does. */
/* Kept inside the strip of screen the scene reserves for it. Taller than
 * that and it climbs over the middle of the wheel, which on this view is
 * where the earth is: the card was hiding the very thing the view is named
 * for. It scrolls instead, now that it can. */
#orrery-readout { pointer-events: auto; max-height: min(31dvh, 300px);
  width: min(360px, calc(100% - 32px)); }

.day-panel { max-height: min(58dvh, 520px); pointer-events: auto;
  width: min(540px, calc(100% - 32px)); }
.day-panel .d-num { font-family: var(--serif); font-size: 46px; line-height: .95; }
.day-panel .d-of { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.day-panel .d-date { font-family: var(--serif); font-size: 17px; margin-top: 10px; }
.day-panel .d-week { font-size: 12px; color: var(--ink-3); }
.day-panel .d-station { margin-top: 10px; font-family: var(--serif); color: var(--sun-bright); font-size: 15px; }
.day-panel .d-term { font-size: 12px; color: var(--ink-3); }
.day-panel .d-split { margin-top: 13px; display: flex; justify-content: center; gap: 14px; font-size: 12px; }
.day-panel .d-split b { display: block; font-family: var(--mono); font-size: 15px; font-weight: 500; }
.day-panel .d-sun b { color: var(--sun); }
.day-panel .d-dark b { color: var(--ink-2); }
.day-panel .d-peaks { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.day-panel .d-peak {
  display: flex; align-items: baseline; gap: 7px; font-size: 12px;
  color: var(--ink-2); margin-bottom: 3px; text-align: left;
}
.day-panel .d-peak .pk { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  align-self: center; }
.day-panel .d-peak .pk-sun { background: var(--sun-bright); }
.day-panel .d-peak .pk-dark { background: var(--equinox); }
.day-panel .d-peak .pk-moon { background: var(--moon); }
.day-panel .d-peak .pk-now { background: var(--today); }
.day-panel .d-cols { display: grid; grid-template-columns: 1fr; }
.day-panel .d-moonblock { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.day-panel .d-moon-sub { font-size: 11px; color: var(--ink-3); text-align: left; margin: -2px 0 6px; }

@media (min-width: 700px) {
  /* The moon's rows carry a bearing as well as a height, so they need the
   * wider half; the sun's are short. */
  .day-panel .d-cols { grid-template-columns: 0.82fr 1.18fr; gap: 16px; align-items: start; }
  .day-panel .d-moonblock {
    margin-top: 0; padding-top: 0; border-top: none;
    border-left: 1px solid var(--line-soft); padding-left: 16px;
  }
}
.day-panel .d-peak .pk-name { flex: 1; text-align: left; white-space: nowrap; }
.day-panel .d-peak b { font-family: var(--mono); font-weight: 500; color: var(--ink); white-space: nowrap; }
.day-panel .d-peak .pk-at { font-family: var(--mono); color: var(--ink-3); min-width: 40px;
  text-align: right; flex: 0 0 auto; }
/* The planets, folded into the day panel behind their own switch. A grid so
 * the glyph, the name, the sign and the constellation line up down the
 * column rather than wandering with the length of each word. */
.day-panel .d-planets {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft);
  text-align: left;
}
.day-panel .d-planets-tog { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.day-panel .d-pl-list { margin-top: 8px; }
.day-panel .d-pl {
  display: grid; grid-template-columns: 18px 1fr auto; align-items: baseline;
  column-gap: 8px; row-gap: 0; font-size: 11.5px; padding: 2px 0;
}
.day-panel .d-pl-g { font-style: normal; font-size: 13px; line-height: 1; text-align: center; }
.day-panel .d-pl-n { color: var(--ink-2); }
.day-panel .d-pl b {
  font-family: var(--mono); font-weight: 500; color: var(--ink); white-space: nowrap;
}
.day-panel .d-pl-c {
  grid-column: 2 / 4; color: var(--ink-3); font-size: 10.5px; margin-top: -1px;
}
.day-panel .d-pl-c em { font-style: normal; color: var(--sun); }
.day-panel .d-pl-c em.d-pl-down { color: var(--ink-3); opacity: .8; }
.day-panel .d-pl-rule {
  height: 1px; background: var(--line-soft); margin: 7px 0 6px;
}
/* The cycle's own flyout, hinged off the sidebar rather than the right-hand
 * tools, because it is opened from the left and belongs to its own wheel. */
.menses-flyout {
  position: absolute; top: 14px; left: 14px; z-index: 7;
  width: min(340px, calc(100% - 28px)); max-height: min(80dvh, 700px);
  overflow-y: auto; background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow); backdrop-filter: blur(14px);
}
.menses-flyout[hidden] { display: none; }
/* The wheel takes the whole stage when the blueprint is folded away, and the
 * usual share when it is not. */
#preg-svg { width: min(100%, calc(68dvh - 80px)); height: min(100%, calc(68dvh - 80px));
  display: block; overflow: visible; touch-action: none; }
.pg-tri:hover, .pg-baby:hover, .pg-sense:hover { fill-opacity: .48; }
.pg-week:hover { fill: var(--sun); fill-opacity: .2; }
.pg-mark:hover { fill: var(--sun-bright); }
#pg-sel { transition: opacity .1s; }

#menses-svg { width: min(100%, calc(68dvh - 80px)); height: min(100%, calc(68dvh - 80px));
  display: block; overflow: visible; touch-action: none; }
.scene-menses:has(.readout.min) #menses-svg {
  width: min(100%, calc(88dvh - 80px)); height: min(100%, calc(88dvh - 80px));
}
.scene-menses:has(.readout.min) { padding-bottom: 88px; }
.ghost-btn.is-on { border-color: var(--sun); color: var(--sun); }
.readout .r-key {
  display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 9px 0 2px;
  font-size: 10.5px; color: var(--ink-3); justify-content: center;
}
.readout .r-key span, .readout .r-key .r-key-btn {
  display: inline-flex; align-items: center; gap: 5px;
}
.readout .r-key-btn {
  background: none; border: 0; padding: 2px 4px; border-radius: 6px;
  font: inherit; font-size: 10.5px; color: var(--ink-3);
  cursor: pointer; pointer-events: auto;
}
.readout .r-key-btn:hover { color: var(--ink); background: var(--bg-2); }
.mn-horm:hover + * { opacity: 1; }
.readout .r-key i { width: 14px; height: 2.5px; border-radius: 2px; flex: 0 0 auto; }
.readout .r-hint b { font-weight: 500; color: var(--ink-2); }
.mn-phase:hover { fill-opacity: .5; }
.mn-day:hover { fill: var(--sun); fill-opacity: .2; }
.mn-moon:hover { fill: var(--moon); fill-opacity: .22; }
#mn-sel { transition: opacity .1s; }

/* The prose drawers: same shell as the lists, but they scroll and hold
 * paragraphs rather than rows. */
.tool-panel.is-prose { max-height: min(76dvh, 660px); overflow-y: auto; }
.tool-panel-prose { padding: 12px 14px 16px; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.tool-panel-prose p { margin: 0 0 9px; }
.tool-panel-prose h4 {
  margin: 16px 0 5px; font-family: var(--serif); font-weight: 500;
  font-size: 13.5px; color: var(--sun-bright);
}
.tool-panel-prose b { font-weight: 500; color: var(--ink); }
.tool-panel-prose .tp-intro { color: var(--ink-3); font-size: 11.5px; margin-bottom: 12px; }
.tool-panel-prose .tp-sec {
  padding: 10px 0 4px; border-top: 1px solid var(--line-soft);
}
.tool-panel-prose .tp-sec:first-of-type { border-top: 0; padding-top: 0; }
.tool-panel-prose .tp-brief { font-size: 11.5px; color: var(--ink-3); }
.tool-panel-prose .tp-foot {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft);
}
.tool-panel-prose .tp-switch {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 10px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--bg-2); font-size: 12.5px;
}
.tool-panel-prose .tp-now {
  padding: 10px 12px; border-radius: 10px; margin-bottom: 10px;
  background: var(--bg-2); border: 1px solid var(--line-soft);
}
.tool-panel-prose .tp-now-lab {
  font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3);
}
.tool-panel-prose .tp-now-organ {
  font-family: var(--serif); font-size: 19px; color: var(--sun-bright); margin: 2px 0 4px;
}
.tool-panel-prose .tp-now-best { color: var(--ink-2); }
.tool-panel-prose .tp-now-avoid { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }
.tool-panel-prose .tp-levels { margin-top: 10px; }
.tool-panel-prose .tp-lv {
  display: grid; grid-template-columns: 88px 1fr 34px; align-items: center;
  column-gap: 7px; font-size: 11px; margin-bottom: 3px;
}
.tool-panel-prose .tp-lv-n { color: var(--ink-3); }
.tool-panel-prose .tp-lv-bar {
  height: 5px; border-radius: 3px; background: var(--line); overflow: hidden;
}
.tool-panel-prose .tp-lv-bar i { display: block; height: 100%; border-radius: 3px; }
.tool-panel-prose .tp-lv-v { font-family: var(--mono); color: var(--ink-2); text-align: right; }
.tool-panel-prose .tp-lv-d {
  grid-column: 2 / 4; font-size: 10px; color: var(--ink-3); margin: -2px 0 2px;
}
.tool-panel-prose .tp-lv-note {
  margin: 8px 0 0; font-size: 10.5px; line-height: 1.45; color: var(--ink-3);
}

.tool-panel-prose .tp-watches { list-style: none; margin: 10px 0 8px; padding: 0; }
.tool-panel-prose .tp-watches button {
  display: grid; grid-template-columns: 1fr auto auto; align-items: baseline;
  gap: 8px; width: 100%; min-height: 44px; padding: 7px 10px; text-align: left;
  background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 8px;
  margin-bottom: 4px; cursor: pointer; font: inherit; font-size: 12px; color: var(--ink-2);
}
.tool-panel-prose .tp-watches button:hover { border-color: var(--sun); }
.tool-panel-prose .tp-watches button.is-now { border-color: var(--sun); background: var(--panel); }
.tool-panel-prose .tp-watches .tw-organ { color: var(--ink); }
.tool-panel-prose .tp-watches .tw-branch { color: var(--sun); font-style: italic; }
.tool-panel-prose .tp-watches .tw-hours {
  font-family: var(--mono); font-size: 10px; color: var(--ink-3); text-align: right;
}
.tool-panel-prose .tp-watches .tw-hours em { display: block; font-style: normal; }
.tool-panel-prose .tp-watches .tw-hours { font-size: 11px; }

.tool-panel-prose .tp-refs { margin: 6px 0 0; padding-left: 16px; font-size: 11.5px; }
.tool-panel-prose .tp-refs li { margin-bottom: 4px; color: var(--ink-3); }
.tool-panel-prose .tp-refs a { color: var(--sun); }

.tool-btn.is-on { border-color: var(--sun); color: var(--sun); background: var(--bg-2); }
.tool-btn[hidden] { display: none; }

.watch-card { width: min(94vw, 520px); }
.watch-card h2 { margin-bottom: 4px; }
.watch-card .watch-when {
  font-size: 12px; letter-spacing: .06em; color: var(--ink-3);
  text-transform: lowercase; margin: 0 0 16px;
}
.watch-card .watch-pole {
  padding: 10px 12px; border-radius: 10px; background: var(--bg-2);
  border: 1px solid var(--line-soft); color: var(--sun-bright); font-size: 13px;
}
.watch-card h3 { font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin: 18px 0 4px; font-family: inherit; }

.day-panel .d-body-now {
  margin: 10px 0 12px; padding: 10px 12px; border-radius: 10px;
  background: var(--bg-2); border: 1px solid var(--line-soft);
}
.day-panel .d-body-now-lab {
  font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3);
}
.day-panel .d-body-now-organ {
  font-family: var(--serif); font-size: 19px; color: var(--sun-bright); margin: 2px 0 4px;
}
.day-panel .d-body-now-best { font-size: 12.5px; color: var(--ink-2); }
.day-panel .d-body-now-avoid { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }

.day-panel .d-body-key {
  display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 9px 0 4px;
  font-size: 10.5px; color: var(--ink-3);
}
.day-panel .d-body-key span { display: inline-flex; align-items: center; gap: 5px; }
.day-panel .d-body-key i { width: 14px; height: 2.5px; border-radius: 2px; flex: 0 0 auto; }
.day-panel .d-body .d-pl-note + .d-pl-note { margin-top: 7px; }
.day-panel .d-pl-note {
  margin: 9px 0 0; font-size: 10.5px; line-height: 1.45; color: var(--ink-3);
}
.day-panel .d-pl-note b { font-family: inherit; font-weight: 500; color: var(--ink-2); }

.day-panel .d-peak-note { font-size: 11px; color: var(--ink-3); margin-top: 5px; line-height: 1.35; }
.day-panel .d-moonblock .d-moon-row { justify-content: flex-start; margin-top: 0; margin-bottom: 6px; }
.day-panel .d-moon-row {
  margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.day-panel .d-moon-text { text-align: left; font-size: 12px; color: var(--ink-2); }
.day-panel .d-moon-text b { display: block; font-family: var(--mono); font-size: 14px; font-weight: 500; color: var(--moon); }

/* ------------------------------------------------------------- day notes */
.note-btn {
  margin-top: 12px; width: 32px; height: 32px; border-radius: 9px; position: relative;
  border: 1px solid var(--line); background: var(--bg-2); color: var(--ink-3);
  font-size: 14px; line-height: 1; cursor: pointer; pointer-events: auto;
}
.note-btn:hover { border-color: var(--sun); color: var(--sun); }
.note-btn.has-note { border-color: var(--sun-bright); color: var(--sun-bright); background: rgba(232, 184, 75, .12); }
.note-dot { position: absolute; top: -3px; right: -3px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--sun-bright); border: 1.5px solid var(--panel); }
.note-box { margin-top: 10px; text-align: left; pointer-events: auto; }
.note-box textarea {
  width: 100%; min-height: 68px; resize: vertical; box-sizing: border-box;
  border-radius: 9px; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink);
  font: inherit; font-size: 12.5px; line-height: 1.4; padding: 9px 10px;
}
.note-box textarea:focus { outline: none; border-color: var(--sun); }
.note-history { margin-top: 8px; font-size: 11px; color: var(--ink-3); max-height: 90px; overflow-y: auto; }
.note-history-label { text-transform: uppercase; letter-spacing: .1em; font-size: 9px; margin-bottom: 4px; color: var(--ink-3); }
.note-history-item { margin-bottom: 3px; line-height: 1.35; }
.note-history-item b { color: var(--ink-2); font-family: var(--mono); font-weight: 500; margin-right: 5px; }
.note-done {
  /* Stays reachable while the card scrolls (a long note plus its history can
     push this well below the fold), pinned to the bottom of the scrollport
     with its own background so scrolled content doesn't show through. */
  position: sticky; bottom: -15px; z-index: 1;
  margin: 12px -20px -15px; width: calc(100% + 40px); padding: 10px 20px 12px;
  box-sizing: border-box; border: 0; border-top: 1px solid var(--line);
  background: var(--panel); color: var(--sun);
  font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; pointer-events: auto;
}
.note-done:hover { color: var(--sun-bright); }

/* SVG text defaults */
#wheel text, #dayclock text { font-family: var(--sans); fill: var(--ink-2); }
.tick-label { font-size: 13px; fill: var(--ink-3); }
.station-label { font-family: var(--serif); font-size: 15px; fill: var(--ink); }
.station-sub { font-size: 9.5px; fill: var(--ink-3); }
.month-label { font-size: 11px; fill: var(--ink-3); letter-spacing: .1em; }
/* Moon-cycle numbers show at every zoom level, unlike the solar terms: being
   able to see where the moons fall across the whole year is the point of
   them, so gating them behind a zoom would defeat it. */
.moon-num { font-size: 12px; fill: var(--ink-2); }
.moon-season { font-size: 8px; fill: var(--ink-3); }
.moon-num.is-blue { fill: var(--frost); font-weight: 500; }
/* The partial wedges at the ends of the cycle: named, but quieter,
 * since their count belongs to the neighbouring year. */
.moon-num.is-edge { font-size: 10px; fill: var(--ink-3); }
.moon-season.is-edge { font-size: 7.5px; fill: var(--ink-3); opacity: .8; }
.moon-hit { fill: transparent; cursor: pointer; }
/* The moon band answers for itself, so it should look like it does. */
.moon-hit:hover { fill: var(--moon); fill-opacity: .12; }
.term-band { stroke: var(--night); opacity: .28; }
.term-cut { stroke: var(--equinox); stroke-width: 1.1; opacity: .65; }
.term-day { stroke: var(--ink-3); stroke-width: .6; opacity: .38; }
.term-label { font-size: 8.5px; fill: var(--ink-2); }
.frost-label { font-size: 9px; }
.term-sub { font-size: 7.5px; fill: var(--ink-3); }
/* The term labels used to be hidden until zoomed, back when they were a bare
 * number crowded in among the frost marks. Now the layer has a ring of its
 * own and is off by default, so turning it on should show it. */

.rot { transition: transform .35s ease; }
.rot.flip { transform: rotate(180deg); }
.day-cell { cursor: pointer; }
.hit { fill: transparent; cursor: pointer; }

.loading {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 16px; font-size: 12.5px; color: var(--ink-2); display: flex; gap: 9px; align-items: center;
}
.loading[hidden] { display: none; }
.spin { width: 12px; height: 12px; border: 2px solid var(--line); border-top-color: var(--sun);
  border-radius: 50%; animation: sp .8s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }

.panel-toggle {
  position: absolute; top: 14px; left: 14px; z-index: 6; display: none;
  width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink); font-size: 16px; cursor: pointer;
}

.top-tools {
  position: absolute; top: 14px; right: 14px; z-index: 6; display: flex; gap: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 5px;
  backdrop-filter: blur(10px);
}
.tool-btn {
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid transparent;
  background: transparent; color: var(--ink-2); font-size: 16px; line-height: 1; cursor: pointer;
}
.tool-btn:hover { border-color: var(--sun); color: var(--sun); background: var(--bg-2); }
.tool-btn.is-open { border-color: var(--sun); color: var(--sun); background: var(--bg-2); }

.tool-panel {
  position: absolute; top: 58px; right: 14px; z-index: 7; width: min(310px, calc(100vw - 28px));
  max-height: min(60dvh, 460px); display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  backdrop-filter: blur(14px); box-shadow: var(--shadow); overflow: hidden;
}
.tool-panel[hidden] { display: none; }
.tool-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--line-soft); flex: 0 0 auto;
}
.tool-panel-head strong { font-family: var(--serif); font-weight: 500; font-size: 14.5px; }
.tool-panel-head button {
  background: none; border: 0; color: var(--ink-3); font-size: 20px; line-height: 1; cursor: pointer;
}
.tool-panel-head button:hover { color: var(--sun); }
.tool-panel ul { list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1 1 auto; }
.tool-panel li { margin: 0; }
.tool-panel li button {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 8px 9px; border-radius: 8px; border: 0; background: transparent;
  color: var(--ink-2); font: inherit; font-size: 12.5px; cursor: pointer;
}
.tool-panel li button:hover { background: rgba(232,184,75,.14); color: var(--ink); }
.tool-panel li button.is-today { color: var(--today); }
.tool-panel .ti-name { flex: 1; min-width: 0; }
.tool-panel .ti-date { color: var(--ink-3); font-size: 11.5px; white-space: nowrap; }
.tool-panel .ti-day { color: var(--ink-3); font-family: var(--mono); font-size: 10.5px; min-width: 42px; text-align: right; }
.tool-panel .ti-sub { display: block; color: var(--ink-3); font-size: 10.5px; }
.tool-panel-empty { padding: 14px; color: var(--ink-3); font-size: 12.5px; }

.zoom-controls {
  position: absolute; right: 14px; bottom: 14px; z-index: 6;
  display: flex; flex-direction: column; gap: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 5px;
  backdrop-filter: blur(10px);
}
/* display:flex above outranks the browser's own [hidden] rule, so hiding the
 * stack needs saying explicitly, the same way .scene[hidden] does. */
.zoom-controls[hidden] { display: none; }
.zoom-controls button {
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid transparent;
  background: transparent; color: var(--ink-2); font-size: 16px; line-height: 1; cursor: pointer;
}
.zoom-controls button:hover { border-color: var(--sun); color: var(--sun); background: var(--bg-2); }
#zoom-reset { font-size: 14px; }

.scene.is-zoomed #wheel-svg, .scene.is-zoomed #day-svg { cursor: grab; }
.scene.is-zoomed #wheel-svg:active, .scene.is-zoomed #day-svg:active { cursor: grabbing; }

/* ------------------------------------------------------------------ modal */
.modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center;
  background: rgba(3,4,10,.72); padding: 20px; overflow-y: auto; }
.modal[hidden] { display: none; }
.modal-card {
  position: relative; width: min(94vw, 620px); margin: auto;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px;
  padding: 30px 32px; box-shadow: var(--shadow); box-sizing: border-box;
}
.modal-card h2 { font-family: var(--serif); font-weight: 500; margin: 0 0 14px; font-size: 24px; }
.modal-card h3 { font-family: var(--serif); font-weight: 500; font-size: 15.5px; margin: 22px 0 6px; color: var(--sun-bright); }
.modal-card p { margin: 0 0 10px; color: var(--ink-2); font-size: 14px; }
.close { position: absolute; top: 12px; right: 14px; background: none; border: 0;
  color: var(--ink-3); font-size: 26px; cursor: pointer; line-height: 1; }

.spiral-card { width: min(96vw, 940px); }
#spiral-svg { width: 100%; height: auto; margin-top: 12px; display: block; }
.compare-card { width: min(94vw, 700px); }
/* Longer lines than the reference sections, and no subheadings to break them,
 * so the measure is held in and the leading opened out. */

/* The system readout. Wider than the year readout because each line carries
 * a sign, a constellation and a distance, and folding those would cost more
 * than the width does. */
.scene-orbits .readout { width: min(340px, calc(100% - 32px)); text-align: left; }
.scene-orbits .readout .r-lab,
.scene-orbits .readout .r-date { text-align: center; }
/* The info corner needs its own pointer-events: the readout takes none so a
 * hover passes through to whatever is behind it. */
.readout .mr-info { pointer-events: auto; }
.readout.info { max-height: min(74dvh, 620px); overflow-y: auto; }
.readout .mr-info-panel { margin: 26px 0 12px; }
.readout .mr-info-panel b { color: var(--sun-bright); }
.readout .o-list { margin-top: 10px; }
.readout .o-pl {
  display: grid; grid-template-columns: 18px 1fr auto; align-items: baseline;
  column-gap: 8px; font-size: 11.5px; padding: 2px 0;
}
.readout .o-pl-g { font-style: normal; font-size: 13px; line-height: 1; text-align: center; }
.readout .o-pl-n { color: var(--ink-2); }
.readout .o-pl b { font-family: var(--mono); font-weight: 500; color: var(--ink); white-space: nowrap; }
.readout .o-pl-c { grid-column: 2 / 4; color: var(--ink-3); font-size: 10.5px; margin-top: -1px; }
.readout .r-hint b { font-weight: 500; color: var(--ink-2); }

/* The month fan: same shape as the lunation scene, a title bar above, the
 * drawing filling the middle, the readout at its foot. */
.scene-month {
  display: grid; place-items: stretch;
  grid-template-columns: 1fr; grid-template-rows: auto 1fr auto;
  padding: 58px 10px 18px;
}
.scene-month .month-topbar {
  grid-row: 1; display: flex; align-items: center; justify-content: center; gap: 12px;
}
.scene-month #month-svg {
  grid-row: 2; min-width: 0; min-height: 0;
  width: 100%; height: 100%; display: block; overflow: visible;
}
.month-head { text-align: center; pointer-events: none; padding-bottom: 8px; }
.month-head .mh-name { font-family: var(--serif); font-size: 24px; color: var(--ink); }
.month-head .mh-year { color: var(--ink-3); font-size: .72em; letter-spacing: .04em; }
.month-head .mh-sub { margin-top: 3px; font-size: 12px; color: var(--ink-3); }
.scene-month .readout { position: absolute; }

.month-hit:hover { fill: var(--sun); fill-opacity: .14; }
.mv-day:hover { fill: var(--sun); fill-opacity: .22; }
#mv-sel { transition: opacity .1s; }
.scene-month .readout .r-body {
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line-soft);
}
.scene-month .readout .r-num { font-size: 28px; }

.zodiac-card { width: min(96vw, 760px); }
#zodiac-svg, #sky-svg { width: 100%; height: auto; display: block; margin: 14px 0 4px; }
.zodiac-card h3 { margin-top: 26px; }

.ethos-card { width: min(94vw, 560px); }
.ethos-card p { font-size: 14.5px; line-height: 1.72; margin: 0 0 14px; }
.ethos-card p:last-of-type { margin-bottom: 0; }
.ethos-card b { color: var(--sun-bright); font-weight: 500; }
/* Reads as a phrase in the sentence, behaves as the button it is. This is the
 * one place the writing sends the reader somewhere, so it goes there. */
.inline-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-style: italic; color: var(--sun);
  text-decoration: underline; text-underline-offset: 2px;
}
.inline-link:hover { color: var(--sun-bright); }
.inline-link:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; }

/* The creed. Five tenets, each opening with the thing it commits to, set off
 * from the passage above by a rule down the side rather than by more colour:
 * the leads are already gold and that is enough weight in one place. */
.ethos-card .creed-lead { margin-bottom: 4px; }
.ethos-card .creed {
  margin: 0 0 18px; padding-left: 16px;
  border-left: 2px solid var(--line);
}
.ethos-card .creed p:last-child { margin-bottom: 0; }
.ethos-card .creed b { display: block; margin-bottom: 2px; }
.ethos-card .creed-close {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft);
  font-family: var(--serif); font-size: 16px; color: var(--ink);
}
#compare-svg { width: 100%; height: auto; margin-top: 10px; display: block; }
.compare-legend {
  list-style: none; margin: 14px 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px;
}
.compare-legend li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); min-width: 0; }
.compare-legend .swatch { width: 16px; height: 0; border-top-width: 2.5px; border-top-style: solid; flex: 0 0 auto; }
.compare-legend .stat { color: var(--ink-3); margin-left: auto; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) {
  .compare-legend { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------- mobile */
@media (max-width: 900px) {
  .panel { position: absolute; inset: 0 auto 0 0; width: min(320px, 88vw); flex-basis: auto;
    transform: translateX(-100%); transition: transform .3s ease; box-shadow: var(--shadow); }
  .app.panel-open .panel { transform: none; }
  .panel-toggle { display: block; }
  .crumbs { top: 15px; padding: 4px 8px; gap: 4px; }
  .crumb { font-size: 12px; padding: 3px 5px; }

  .readout, .day-panel { left: 10px; right: 10px; bottom: 10px; transform: none; width: auto; }
  /* The panel runs full width here and is height-capped, so its bottom-right
   * corner is fixed and the zoom controls would sit on top of the moon's
   * rows. Padding cannot lift the content clear once the cap is reached, so
   * the controls move up under the theme toggle instead, where the wheel is
   * narrow and nothing else is. */
  .zoom-controls { top: 76px; bottom: auto; }
  .readout .r-num { font-size: 30px; }
  .day-panel .d-num { font-size: 40px; }
  .day-panel .d-date { margin-top: 6px; font-size: 15px; }
  .day-panel .d-split { margin-top: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  #wheel, .scene { transition: none; }
}



.d-shift {
  margin-top: 10px; padding: 8px 10px; border-radius: 7px;
  border-left: 3px solid var(--cross);
  background: var(--bg-2); color: var(--ink-2);
  font-size: 12px; line-height: 1.5;
}

.day-panel .d-now {
  margin-top: 6px; font-family: var(--mono); font-size: 12px;
  color: var(--today); letter-spacing: .02em;
}

/* Minimise. The panel can stand taller than the wheel it explains, which on a
 * tablet leaves the day barely visible behind it. Collapsed it keeps only the
 * date and the control to bring it back. */
.panel-min {
  /* Was a bare chevron with no edge and no fill, which on a phone was almost
   * invisible and well under a comfortable touch target. It now carries its
   * own outline at all times and is 34 square. */
  position: absolute; top: 6px; right: 7px; z-index: 3;
  width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-2);
  font-size: 14px; line-height: 1; pointer-events: auto;
  display: flex; align-items: center; justify-content: center;
}
.panel-min:hover { color: var(--sun); border-color: var(--sun); }
.panel-min:focus-visible { outline: 2px solid var(--sun); outline-offset: 1px; }

/* The year readout collapses too. It stands over the foot of the wheel, and
 * on a short screen that is the part of the ring nearest the reader. Its
 * button has to carry its own pointer-events: the box itself takes none, so
 * that hovering it does not steal the hover from the wheel underneath. */
.readout .r-mini { display: none; }
.readout.min .r-mini {
  display: block; font-family: var(--serif); font-size: 15px;
  color: var(--ink-2); padding-right: 24px;
}
.readout.min > *:not(.r-mini):not(.panel-min) { display: none; }
.readout.min { max-height: none; overflow: visible; padding: 10px 16px;
  /* Same as the day panel: the narrow-screen rule pins the expanded box to
   * both edges, which would leave the collapsed line stretched across the
   * whole foot of the screen instead of sitting as a bar under the wheel. */
  width: min(300px, calc(100% - 32px));
  left: 50%; right: auto; transform: translateX(-50%); }
.readout .panel-min { pointer-events: auto; }

.day-panel .d-mini { display: none; }
.day-panel.min .d-mini {
  display: block; font-family: var(--serif); font-size: 15px;
  color: var(--ink-2); padding-right: 24px;
}
.day-panel.min > *:not(.d-mini):not(.panel-min) { display: none; }
.day-panel.min { max-height: none; overflow: visible; padding: 10px 16px;
  width: min(300px, calc(100% - 32px));
  /* Stay centred when collapsed. The narrow-screen rule pins the expanded
   * panel to both edges, which would otherwise drop the little bar into the
   * left corner the moment it shrinks. */
  left: 50%; right: auto; transform: translateX(-50%); }

/* ------------------------------------------------------ the lunar month
 * The month's name sits in the grid above the circle rather than floating
 * over it: the ring carries dates right out to its edge, and a header laid
 * on top of them buries the first few days of the month. */
/* One column, three rows: the title bar with its arrows, the circle, the
 * readout. The lunation arrows sit beside the title they step, and the day
 * arrows sit inside the readout beside the face they step, so each pair is
 * next to the thing it moves. */
/* Two rows now, not three. The readout used to be the third, which meant it
 * took real height out of the layout and left the circle a short, wide box to
 * sit in: on a phone it could only grow to about three hundred pixels while
 * two hundred and forty went to the card beneath it. Every other view floats
 * its detail box over the drawing instead, and reserves room underneath with
 * padding, so the circle gets the whole height and can be centred in it. This
 * one now does the same, which is also why it lines up with the others. */
.scene-moon {
  display: grid; place-items: stretch;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  padding: 58px 10px calc(32dvh + 28px);
}
.scene-moon .moon-topbar {
  grid-row: 1; display: flex; align-items: center; justify-content: center; gap: 12px;
}
.scene-moon .moon-topbar .moon-head { flex: 0 1 auto; min-width: 0; }
.scene-moon #moon-svg {
  grid-row: 2; min-width: 0; min-height: 0;
  width: 100%; height: 100%; display: block; overflow: visible;
}

.moon-head { text-align: center; pointer-events: none; padding-bottom: 4px; }
.moon-head .mh-name { font-family: var(--serif); font-size: 21px; color: var(--moon); }
.moon-head .mh-year { color: var(--ink-3); font-size: .72em; letter-spacing: .04em; }
.moon-head .mh-sub { margin-top: 3px; font-size: 12px; color: var(--ink-3); }
.moon-head .mh-day { margin-top: 4px; font-size: 12.5px; color: var(--ink-2); }

.moon-arrow {
  z-index: 5; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink-2);
  font-size: 22px; line-height: 1; backdrop-filter: blur(10px);
}
.moon-arrow:hover:not(:disabled) { border-color: var(--moon); color: var(--moon); }
.moon-arrow:disabled { opacity: .28; cursor: default; }
.moon-arrow:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; }

.moon-day-hit:hover { fill: var(--moon); fill-opacity: .10; }

/* The day under the cursor, read out below the circle. It follows the pointer
 * round the ring, takes its own arrows for stepping a day at a time, and
 * falls back to the day in hand when the pointer leaves.
 *
 * It stacks: the face, its name, then the day of the solar cycle set large,
 * then the standard date, the weekday, and the day's place in the lunation.
 * The solar day leads because it is the anchor into the other calendar.
 *
 * Height is the constraint, not width. On a phone this box and the circle
 * share one short screen, so every size here has a smaller counterpart below
 * and the circle is guaranteed the larger share. */
/* The info control, mirroring the collapse control on the other corner. Two
 * kinds of day in one box is a fair thing to want explained on the spot. */
.mr-info {
  position: absolute; top: 6px; left: 7px; z-index: 3;
  width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-2);
  font-family: var(--serif); font-size: 15px; font-style: italic; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.mr-info:hover { color: var(--sun); border-color: var(--sun); }
.mr-info[aria-expanded="true"] { color: var(--sun); border-color: var(--sun); }
.mr-info:focus-visible { outline: 2px solid var(--sun); outline-offset: 1px; }
.moon-readout.min .mr-info { display: none; }

/* Open, the note roughly doubles the box. On a tall screen it simply scrolls
 * inside itself rather than growing past its share. */
.moon-readout.info { max-height: 62dvh; overflow-y: auto; overscroll-behavior: contain; }
.mr-info-panel {
  text-align: left; margin: 26px 0 10px; padding: 10px 12px;
  border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line-soft);
}
.mr-info-panel p { margin: 0 0 7px; font-size: 11.5px; line-height: 1.5; color: var(--ink-2); }
.mr-info-panel p:last-of-type { margin-bottom: 9px; }
.mr-info-panel b { color: var(--moon); font-weight: 500; }
.mr-info-more {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--sun); font: inherit; font-size: 11.5px; text-decoration: underline;
}

/* The day panel takes the same info corner. A clock face with peak sun on it
 * is worth a sentence, and the panel is where the reader already is. */
.day-panel.info { max-height: min(76dvh, 640px); }
.day-panel .mr-info-panel b { color: var(--sun-bright); }
.day-panel .mr-info-panel { margin: 26px 0 12px; }

.moon-readout .mr-mini { display: none; }
.moon-readout.min .mr-mini {
  display: block; font-family: var(--serif); font-size: 15px; color: var(--ink-2);
  padding-right: 26px;
}
.moon-readout.min > *:not(.mr-mini):not(.panel-min) { display: none; }
.moon-readout.min { padding: 9px 14px; width: min(300px, 100%); }

.scene-moon .moon-readout {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  width: min(420px, calc(100% - 32px)); box-sizing: border-box; text-align: center;
  max-height: 40dvh; overflow-y: auto; overscroll-behavior: contain;
  padding: 10px 16px 12px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--line);
  backdrop-filter: blur(10px); box-shadow: var(--shadow);
}
.moon-readout .mr-facerow {
  display: flex; align-items: center; justify-content: center; gap: 16px;
}
.mr-step {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  background: transparent; border: 1px solid var(--line); color: var(--ink-3);
  font-size: 16px; line-height: 1;
}
.mr-step:hover { border-color: var(--moon); color: var(--moon); }
.mr-step:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; }

.moon-readout .mr-face { line-height: 0; }
.moon-readout .mr-phase { line-height: 1.25; margin-top: 4px; font-size: 12.5px; color: var(--moon); }
.moon-readout .mr-event {
  font-size: 10px; color: var(--sun-bright); border: 1px solid var(--sun-bright);
  border-radius: 999px; padding: 1px 7px; margin-left: 3px; white-space: nowrap;
}
.moon-readout .mr-solar { margin-top: 6px; line-height: 1.05; }
.moon-readout .mr-solar b {
  display: block; font-family: var(--serif); font-size: 38px; font-weight: 400;
  color: var(--ink); letter-spacing: .01em;
}
.moon-readout .mr-lab {
  display: block; font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3);
}
.moon-readout .mr-date {
  font-family: var(--serif); font-size: 15px; color: var(--ink-2); margin-top: 7px;
}
.moon-readout .mr-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.moon-readout .mr-lun { font-size: 11px; color: var(--ink-3); margin-top: 4px; }
/* The two anchoring counts, side by side and separately labelled, so neither
 * is mistaken for the tithi above them. */
.moon-readout .mr-refs {
  display: flex; justify-content: center; gap: 16px; flex-wrap: wrap;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-soft);
}
.moon-readout .mr-ref { min-width: 74px; }
/* With one reference left the row is a single centred cell. */
.moon-readout .mr-refs:has(> .mr-ref:only-child) { gap: 0; }
/* The date is prose, not a figure, so it keeps the serif and room to sit on
 * one line. */
.moon-readout .mr-ref-date b { font-family: var(--serif); font-size: 15px; white-space: nowrap; }
.moon-readout .mr-ref-date em {
  display: block; font-style: normal; font-size: 11.5px; color: var(--ink-2);
  margin-top: 1px;
}
.moon-readout .mr-ref b {
  display: block; font-family: var(--mono); font-size: 14px; font-weight: 500; color: var(--moon);
}
.moon-readout .mr-ref span {
  display: block; font-size: 9px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); margin-top: 2px; line-height: 1.3;
}
/* Short screens: the circle is the thing, so the box gives ground. */
@media (max-height: 760px), (max-width: 560px) {
  .scene-moon { padding-top: 50px; }
  .scene-moon .moon-readout { padding: 8px 12px 10px; }
  .moon-readout .mr-solar b { font-size: 30px; }
  .moon-readout .mr-date { font-size: 13.5px; margin-top: 5px; }
  .moon-readout .mr-phase { font-size: 11.5px; margin-top: 3px; }
  .moon-readout .mr-sub, .moon-readout .mr-lun { font-size: 10.5px; }
  /* On a short screen there is no room for the circle and a paragraph at
   * once: growing the box to fit the note left the ring at 88 pixels. The
   * note takes the box over instead, so the circle keeps very nearly the
   * height it had and comes straight back when the note is closed. */
  .moon-readout.info > *:not(.mr-info-panel):not(.mr-info):not(.panel-min) { display: none; }
  .moon-readout.info { max-height: 260px; }
  .moon-readout.info .mr-info-panel { margin-top: 30px; }
  .moon-readout .mr-refs { gap: 10px; margin-top: 6px; padding-top: 6px; }
  .moon-readout .mr-ref { min-width: 66px; }
  .moon-readout .mr-ref b { font-size: 13px; }
  .moon-readout .mr-ref-date b { font-size: 13.5px; }
  .moon-head .mh-name { font-size: 19px; }
  .moon-head .mh-sub, .moon-head .mh-day { font-size: 11px; }
  .moon-head { padding-bottom: 4px; }
}

/* On a phone the arrows flanking the circle would eat a quarter of the width
 * and squeeze it into a letterbox. They drop to the readout's row instead, so
 * the circle spans the full width and the arrows sit either side of the day
 * being described rather than on top of it. */
@media (max-width: 560px) {
  .scene-moon .moon-topbar { gap: 6px; }
  /* Three lines of header cost the circle about ninety pixels. Tightened
   * rather than removed: the words still matter, they just took up the room
   * the drawing needed. */
  .moon-head { padding-bottom: 2px; }
  .moon-head .mh-name { font-size: 18px; }
  .moon-head .mh-sub { font-size: 10.5px; line-height: 1.25; margin-top: 1px; }
  .moon-head .mh-day { font-size: 11px; margin-top: 2px; }
  .moon-readout .mr-facerow { gap: 12px; }
}

@media (max-width: 900px) {
  /* Bottom padding left alone on purpose: it reserves the room the readout
   * floats in, and a shorthand here would quietly wipe it. */
  .scene-moon { padding-top: 54px; padding-left: 4px; padding-right: 4px; }
  .moon-head .mh-name { font-size: 20px; }
  .moon-arrow { width: 38px; height: 38px; font-size: 19px; }
  .moon-prev { margin-left: 4px; }
  .moon-next { margin-right: 4px; }
}

/* Which phases the moon list shows. All four on by default: the list used to
 * carry new and full only, which left out half of what the moon does. */
.tool-panel-filter {
  padding: 8px 12px; border-bottom: 1px solid var(--line-soft);
}
/* The chips sit in an inner wrapper, so the layout belongs on that: putting
 * it on the outer box left them stacking one per line inside an unstyled
 * child. Two by two, because four will not fit the panel's width in a row. */
/* Eight faces, four across and two down. Eight names would not fit the panel
 * and a face reads faster anyway: the chip is the moon at that phase, and
 * switching it off dims and drains it rather than moving it. Four to a row
 * splits the cycle at the full moon, so waxing sits above waning. */
.phase-filter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.phase-filter .pf-opt { min-width: 0; }
.pf-opt { position: relative; cursor: pointer; }
.pf-opt input { position: absolute; opacity: 0; pointer-events: none; }
.pf-opt span {
  display: flex; align-items: center; justify-content: center;
  padding: 3px 0; border-radius: 8px; line-height: 0;
  border: 1px solid transparent; background: transparent;
  opacity: .3; filter: grayscale(1);
  transition: opacity .15s, border-color .15s, background .15s, filter .15s;
}
.pf-opt input:checked + span {
  opacity: 1; filter: none;
  border-color: var(--line); background: var(--bg-2);
}
.pf-opt input:focus-visible + span { outline: 2px solid var(--sun); outline-offset: 1px; }
.pf-opt:hover input:not(:checked) + span { opacity: .6; }
/* The station key in the corner list, matching the wheel's shapes. */
.st-sw { width: 16px; height: 16px; flex: 0 0 auto; }

/* The lunation ring's band of light. Radius carries the illumination, so the
 * colour only has to say "this is the lit part", and it must say it the same
 * way in both themes: the swell always lighter than the ring behind it.
 * Reading the fill from --moon failed that in daylight, where --moon is a
 * dark navy and the fullest part of the month came out as the darkest. */
/* Three reckonings, three bands, one flat colour each so a band can be told
 * from its neighbour at a glance. Gold for the sun's counting, neutral for
 * the ordinary calendar, blue for the moon's. */
.solar-band { fill: var(--sun); opacity: .10; }
.solar-tick { stroke: var(--sun); stroke-width: 1; opacity: .45; }
.cal-solar { font-size: 12px; fill: var(--sun); }

.date-band { fill: var(--ink-3); opacity: .09; }
.date-tick { stroke: var(--ink-3); stroke-width: 1; opacity: .4; }
.cal-date { font-size: 10.5px; fill: var(--ink-2); }

.lun-tick { stroke: var(--moon); stroke-width: 1; opacity: .35; }

/* The moon's nearest and furthest points. Warm for near, cool for far, since
 * the face beside them is already large or small to match. */
/* The eight phases. The four turning points are instants and read stronger;
 * the four stretches between them are named more quietly, since a crescent is
 * a span the moon is in rather than a moment it passes. */
.ph-tick { stroke: var(--moon); stroke-width: 1.1; opacity: .6; }
.ph-tick.is-turn { stroke: var(--sun-bright); stroke-width: 1.7; opacity: 1; }
.ph-label { font-size: 8.5px; fill: var(--moon); opacity: .85; }
.ph-label.is-turn { font-size: 10.5px; fill: var(--sun-bright); opacity: 1; }

.apsis-tick { stroke: var(--moon); stroke-width: 1.4; stroke-dasharray: 3 3; opacity: .75; }
.apsis-tick.is-near { stroke: var(--sun-bright); opacity: .9; }
.apsis-label { font-size: 8.5px; fill: var(--moon); letter-spacing: .04em; }
.apsis-label.is-near { fill: var(--sun-bright); }
.lun-hours { font-size: 8.5px; fill: var(--ink-3); opacity: .85; }

body[data-theme="day"] .solar-band { opacity: .14; }
body[data-theme="day"] .date-band { opacity: .07; }

.mb-bg { fill: var(--night); opacity: .32; }
.mb-base { stroke: var(--line); stroke-width: 1; opacity: .55; }
.mb-fill { fill: var(--moon-lit); opacity: .5; }
.mb-line { stroke: var(--moon-lit); opacity: .9; }

body[data-theme="day"] .mb-bg { opacity: .5; }
body[data-theme="day"] .mb-fill { opacity: .92; }
body[data-theme="day"] .mb-line { stroke: var(--moon); opacity: .5; }

/* A comparison in the About that is genuinely tabular. */
.about-table {
  width: 100%; border-collapse: collapse; margin: 12px 0 14px; font-size: 12.5px;
}
.about-table th, .about-table td {
  text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.about-table thead th { color: var(--ink-3); font-weight: 500; font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase; }
.about-table tbody th { color: var(--moon); font-weight: 500; white-space: nowrap; }
.about-table td { color: var(--ink-2); }

/* The season ring on the year wheel: four quarters cut at the solstices and
 * equinoxes, each halved again at its cross-quarter midpoint. The cardinal
 * cuts are drawn stronger than the midpoints, since one opens a season and
 * the other only divides it. */
/* Brighter than the months below it, and set apart from them: the months are
 * a soft neutral, this is the sky's own division and reads warmer. */
/* The station wording carries no shading and no line of its own: the season
 * band below already draws the divider, so this sits above it, centred on the
 * same angle rather than crossed by it. The day is the strongest thing in the
 * column, being the one exact fact among the names. */
.station-day { font-size: 15px; font-weight: 600; letter-spacing: .01em; }
/* The sun's furthest north and south, written on the curve itself. */
.dec-mark { font-size: 9.5px; font-family: var(--mono); fill: var(--sun-bright); }

.season-band { stroke: var(--night-2); opacity: .85; }
.season-tick { stroke-width: 2.4; opacity: 1; }
.season-label {
  font-size: 13px; letter-spacing: .3em; fill: var(--ink-2); font-weight: 500;
}

/* ---------------------------------------------------- phone control strip
 * At 375 the top strip cannot hold the menu, the crumbs and both control
 * clusters on one line: measured, the crumbs and the tool icons overlapped by
 * 25 pixels, and the zoom stack sat on the lunation view's next arrow by 33.
 *
 * Two rows instead. The menu and the crumbs take the first, the crumbs
 * stretching into whatever the menu leaves and scrolling if the trail is long.
 * The two control clusters take the second, one at each edge. Everything the
 * views draw then begins below both, which is what the scene padding buys.
 */
@media (max-width: 560px) {
  /* Every edge-anchored control is held off the hardware, not just off the
   * viewport. A phone's status bar, notch and home indicator all sit inside
   * the viewport when the page covers them, which `viewport-fit=cover` in the
   * head asks it to do, so a button at 12px from the top can end up genuinely
   * beneath the clock and the signal bars and take no taps at all. */
  .panel-toggle {
    top: calc(14px + env(safe-area-inset-top));
    left: calc(10px + env(safe-area-inset-left));
    width: 44px; height: 44px;
  }

  .crumbs {
    top: calc(14px + env(safe-area-inset-top));
    left: calc(62px + env(safe-area-inset-left));
    right: calc(10px + env(safe-area-inset-right));
    transform: none; padding: 8px 12px;
    max-width: none; width: auto; justify-content: flex-start;
  }
  /* 44 is the size a fingertip needs; the trail was giving each step 20. */
  .crumb { min-height: 44px; display: inline-flex; align-items: center; padding: 0 11px; }
  .crumbs { padding: 3px 8px; }

  .top-tools {
    top: calc(76px + env(safe-area-inset-top));
    left: calc(10px + env(safe-area-inset-left)); right: auto;
    padding: 4px; gap: 4px;
  }
  .zoom-controls {
    top: calc(76px + env(safe-area-inset-top));
    right: calc(10px + env(safe-area-inset-right)); bottom: auto;
    flex-direction: row; padding: 4px; gap: 4px;
  }
  .tool-btn, .zoom-controls button { width: 44px; height: 44px; }

  /* Clear of both rows, and of the notch above them. */
  .scene { padding-top: calc(134px + env(safe-area-inset-top)); }
  .scene-moon { padding-top: calc(134px + env(safe-area-inset-top)); }
  /* Extra specificity on purpose: the plain `.scene.scene-strip` rule further
   * down the file would otherwise win the tie and put the strip back under
   * the trail and the tool row. */
  body .scene.scene-strip { padding-top: calc(132px + env(safe-area-inset-top)); }

  /* Sat too high: a 10px gap plus a whole home-indicator's worth of margin
   * left about forty-four pixels of nothing under the card, and took that
   * room off the wheel above it. The inset alone is what the hardware needs;
   * four pixels on top of it is the whole of the breathing room required. */
  .day-panel, .moon-readout, .readout {
    bottom: calc(4px + env(safe-area-inset-bottom));
    margin-bottom: 0;
  }
}

/* ---------------------------------------------------------------- schedule --
 * A person's own day, laid over the sun's. Six colours that hold their
 * meaning in both themes: warm enough to read against the night palette,
 * deep enough not to glare on the daylight one.
 */
:root {
  --sc-rose:  #e0688a;
  --sc-amber: #e8a33c;
  --sc-leaf:  #6aab63;
  --sc-sea:   #43a0b8;
  --sc-iris:  #8b7bd8;
  --sc-stone: #8b93ad;
}
body[data-theme="day"] {
  --sc-rose:  #c23f65;
  --sc-amber: #b9781a;
  --sc-leaf:  #487f43;
  --sc-sea:   #217a92;
  --sc-iris:  #6353b4;
  --sc-stone: #5f6880;
}

.sc-ev { cursor: pointer; transition: fill-opacity .12s ease; }
.sc-ev:hover { fill-opacity: 1; }
.sc-tx { fill: #0d0f18; font-weight: 600; }
body[data-theme="day"] .sc-tx { fill: #fffaf0; }
.sc-hit { cursor: cell; }
.sc-hit:hover { fill: var(--line-soft); fill-opacity: .35; }

/* ---- the editor ---------------------------------------------------------- */
/* The editor is centred but never larger than the room it has. A long list of
 * other things on the day, or a keyboard rising over the bottom half, used to
 * push Save off the screen where it could not be reached at all: the box is
 * capped to the visible height minus the hardware insets and a margin, and
 * scrolls inside itself instead of growing past the edges.
 *
 * `dvh` rather than `vh` on purpose: it follows the browser chrome as it
 * shrinks and grows, which `vh` does not, and that difference is exactly the
 * strip of screen a Save button goes missing into. */
.sc-editor {
  position: fixed; z-index: 60; inset-inline-start: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(340px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  display: flex; flex-direction: column;
  background: var(--panel, #12141f);
  border: 1px solid var(--line); border-radius: 14px;
  padding: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.55);
  overflow: hidden;
}
/* Everything above the buttons scrolls; the buttons themselves stay put, so
 * Save and Cancel are reachable however much is in the box. */
.sc-editor > :not(.sc-actions) { flex: 0 0 auto; }
.sc-editor .sc-list { flex: 1 1 auto; min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch; }
.sc-editor .sc-actions { flex: 0 0 auto; position: sticky; bottom: 0;
  background: var(--panel, #12141f); padding-top: 12px; margin-top: 12px;
  border-top: 1px solid var(--line-soft); }
.sc-actions button { min-height: 44px; }
.sc-sw { width: 34px; height: 34px; }
.sc-when button { min-height: 44px; }

/* A quiet backing behind the editor, so a tap outside it lands somewhere
 * sensible rather than on whatever was underneath. */
.sc-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.45); }
.sc-editor h3 { margin: 0 0 12px; font-size: 15px; font-weight: 600; }
.sc-editor label { display: block; font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); margin: 10px 0 4px; }
.sc-editor input[type="text"], .sc-editor input[type="time"] {
  width: 100%; box-sizing: border-box; padding: 8px 10px;
  background: var(--void); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 14px;
}
.sc-times { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sc-times.is-off { opacity: .4; pointer-events: none; }
.sc-allday { display: flex; align-items: center; gap: 8px; margin: 12px 0 0;
  font-size: 13px; color: var(--ink-2); cursor: pointer; }
.sc-swatches { display: flex; gap: 8px; margin-top: 6px; }
.sc-sw { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; padding: 0; }
.sc-sw[aria-pressed="true"] { border-color: var(--ink); }
.sc-actions { display: flex; gap: 8px; margin-top: 16px; }
.sc-actions button { flex: 1; padding: 9px; border-radius: 8px; font: inherit;
  font-size: 13px; cursor: pointer; border: 1px solid var(--line);
  background: transparent; color: var(--ink-2); }
.sc-actions .sc-save { background: var(--sun-deep); border-color: var(--sun-deep);
  color: #12100a; font-weight: 600; }
.sc-actions .sc-del { color: var(--sc-rose); border-color: transparent; flex: 0 0 auto; }
.sc-list { margin: 10px 0 0; padding: 0; list-style: none; }
.sc-list li { display: flex; align-items: center; gap: 8px; padding: 5px 0;
  font-size: 13px; color: var(--ink-2); cursor: pointer; }
.sc-list .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.sc-list .when { margin-inline-start: auto; color: var(--ink-3);
  font-variant-numeric: tabular-nums; font-size: 12px; }

/* ------------------------------------------------------------ day strip ----
 * The day unrolled. Height carries time, so every band's position is a
 * percentage of the day's real span and a 23 or 25 hour day needs no special
 * case. The grid scrolls inside itself rather than growing the page.
 */
/* The strip is the one scene that scrolls, so it overrides the centred,
 * fixed-height framing every other face of the day uses. */
.scene.scene-strip { display: block; place-items: stretch; padding: 44px 0 0;
  touch-action: pan-y; overflow: hidden; }
/* Two classes outrank `.scene[hidden]` on a tie of specificity by being later
 * in the file, so hiding has to be restated here or the strip stays drawn
 * underneath whatever replaced it. */
.scene.scene-strip[hidden] { display: none; }
.st-wrap { height: 100%; overflow-y: auto; overflow-x: hidden;
  padding: 8px 12px calc(24px + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch; }
.st-body { max-width: 720px; margin: 0 auto; }

.st-grid {
  position: relative;
  display: grid;
  gap: 0 8px;
  height: 1440px;                 /* 60px an hour: a comfortable touch row */
  margin-top: 6px;
}

.st-col { position: relative; height: 100%; }

.st-gutter { overflow: visible; }
.st-hour {
  position: absolute; right: 6px; transform: translateY(-50%);
  font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink-3);
  white-space: nowrap;
}
.st-rule {
  position: absolute; left: 46px; right: -100vw; height: 1px;
  background: var(--line); opacity: .35; pointer-events: none;
}
.st-band { position: absolute; left: 0; right: 0; }
.st-sun, .st-moon, .st-organs { border-radius: 7px; overflow: hidden;
  background: var(--line-soft); }
.st-organ-tx { position: absolute; left: 0; right: 0; display: flex;
  align-items: center; justify-content: center; font-size: 9px;
  color: var(--ink); opacity: .8; pointer-events: none; overflow: hidden; }

/* ---- the day's own business ---- */
.st-events { }
.st-slot {
  position: absolute; box-sizing: border-box; left: 0; right: 0; padding: 0; margin: 0;
  background: transparent; border: 0; border-radius: 6px; cursor: cell;
}
.st-slot:hover { background: var(--line-soft); opacity: .5; }
.st-ev {
  position: absolute; box-sizing: border-box; padding: 4px 7px; border: 0;
  border-radius: 6px;
  text-align: start; overflow: hidden; cursor: pointer; font: inherit;
  color: #0d0f18; display: flex; flex-direction: column; gap: 1px;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
body[data-theme="day"] .st-ev { color: #fffaf0; }
.st-ev-t { font-size: 12.5px; font-weight: 600; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-ev-w { font-size: 10.5px; opacity: .75; font-variant-numeric: tabular-nums; }

.st-allday-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px;
  padding-inline-start: 52px; }
.st-allday { border: 0; border-radius: 5px; padding: 4px 9px; font: inherit;
  font-size: 12px; font-weight: 600; color: #0d0f18; cursor: pointer; }
body[data-theme="day"] .st-allday { color: #fffaf0; }

.st-now { position: absolute; left: 44px; right: 0; height: 2px;
  background: var(--today); pointer-events: none; z-index: 5; }
.st-now::before { content: ''; position: absolute; left: -4px; top: -3px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--today); }

/* ---- the untimed list ---- */
.st-untimed { max-width: 720px; margin: 20px auto 0; padding-top: 14px;
  border-top: 1px solid var(--line); }
.st-untimed-head { display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.st-add-untimed { background: transparent; border: 1px solid var(--line);
  border-radius: 7px; color: var(--ink-2); font: inherit; font-size: 12px;
  padding: 4px 10px; cursor: pointer; text-transform: none; letter-spacing: 0; }
.st-untimed ul { list-style: none; margin: 10px 0 0; padding: 0; }
.st-task { display: flex; align-items: center; gap: 9px; width: 100%;
  background: transparent; border: 0; padding: 9px 2px; font: inherit;
  font-size: 14px; color: var(--ink-2); cursor: pointer; text-align: start; }
.st-task .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.st-empty { font-size: 13px; color: var(--ink-3); margin: 10px 0 0; }

/* ---- the circle/strip switch ---- */
/* Anchored to the right, never the left.
 *
 * The left is where the controls drawer lives, and on a wide screen it is
 * docked open, so a switch eight pixels inside the stage's left edge sits
 * with almost nothing between it and the panel. Narrow the window and the
 * drawer slides over that spot entirely. The right side has only the tool
 * row above it and the zoom buttons far below, and nothing ever moves into
 * it, so the switch stays put and stays findable at every width. */
.view-switch { position: absolute; z-index: 30; display: flex;
  top: 72px; inset-inline-end: 14px;
  border: 1px solid var(--line); border-radius: 9px; overflow: hidden;
  background: var(--panel, rgba(10,12,20,.8)); backdrop-filter: blur(6px); }
/* A class that sets `display` beats the browser's own rule for [hidden], so
 * the attribute has to be honoured explicitly or the switch shows on every
 * view rather than only on the day. */
.view-switch[hidden] { display: none; }
.view-switch button { background: transparent; border: 0; color: var(--ink-3);
  font: inherit; font-size: 13px; padding: 7px 12px; cursor: pointer; }
.view-switch button[aria-pressed="true"] { background: var(--line-soft); color: var(--ink); }
.sc-when { display: flex; gap: 4px; margin-top: 6px; }
.sc-when button { flex: 1; background: transparent; border: 1px solid var(--line);
  border-radius: 7px; color: var(--ink-3); font: inherit; font-size: 12px;
  padding: 7px 4px; cursor: pointer; }
.sc-when button[aria-pressed="true"] { background: var(--line-soft); color: var(--ink);
  border-color: var(--ink-3); }
.st-head { max-width: 720px; margin: 0 auto 4px; display: flex; flex-direction: column; }
.st-head strong { font-size: 16px; font-weight: 600; }

/* On a narrow screen the trail already owns the top, so the switch drops to
 * the bottom corner, which is where a thumb is anyway. */
@media (max-width: 760px) {
  /* Still on the right, and down at the bottom where a thumb reaches. */
  .view-switch { top: auto; bottom: calc(12px + env(safe-area-inset-bottom));
    inset-inline-start: auto; inset-inline-end: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,.45); }
  .scene.scene-strip { padding-top: 8px; }
  .st-wrap { padding-bottom: 84px; }
}

/* A block cut by midnight is squared off at the cut, so it reads as running
 * off the end of the day rather than as beginning or ending there. */
.st-ev.is-from-prev { border-top-left-radius: 0; border-top-right-radius: 0;
  border-top: 2px dashed rgba(0,0,0,.35); }
.st-ev.is-into-next { border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  border-bottom: 2px dashed rgba(0,0,0,.35); }
.sc-span { margin: 7px 0 0; font-size: 11.5px; color: var(--ink-3);
  min-height: 15px; }

/* The nudge that says a newer version is sitting there waiting. Anchored to
 * the bottom, clear of the home indicator, and deliberately plain: it is a
 * message about the app rather than part of it. */
.sw-update {
  position: fixed; z-index: 90;
  left: 50%; transform: translateX(-50%);
  bottom: calc(14px + env(safe-area-inset-bottom));
  max-width: calc(100vw - 24px);
  padding: 11px 18px; min-height: 44px;
  background: var(--sun-deep); color: #12100a;
  border: 0; border-radius: 999px;
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  box-shadow: 0 8px 26px rgba(0,0,0,.45);
}

/* ---- stepping a day, in the same shape as stepping a lunation ---- */
.d-step { display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 10px; }
.d-step .d-date { margin-top: 0; flex: 0 1 auto; min-width: 0; }
.day-panel.min .d-step { margin-top: 0; }

/* Centred with the arrows hugging the date, which is how the lunation's own
 * header reads, rather than flung to either edge of a wide screen. */
.st-head-row { display: flex; align-items: center; justify-content: center; gap: 12px; }
.st-head-text { flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column;
  align-items: center; text-align: center; }
.st-head-row .moon-arrow { flex: 0 0 auto; }

/* ---- ticking things off ---- */
.st-task-row { display: flex; align-items: center; gap: 4px; }
.st-check {
  flex: 0 0 auto; width: 26px; height: 26px; margin: 9px 2px 9px 0;
  border: 1.6px solid var(--ink-3); border-radius: 7px;
  background: transparent; color: var(--void);
  font-size: 15px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
/* The box is small but the tap is not: an invisible pad carries it out to the
 * forty-four pixels a fingertip needs without making the mark itself clumsy. */
.st-check::before { content: ''; position: absolute; width: 44px; height: 44px;
  margin: -9px; }
.st-task-row { position: relative; }
.st-check[aria-checked="true"] {
  background: var(--sc-leaf); border-color: var(--sc-leaf); color: #0d0f18;
}
.st-task-row.is-done .st-task-t { text-decoration: line-through; opacity: .45; }
.st-task-row.is-done .dot { opacity: .4; }
.st-task { flex: 1 1 auto; min-width: 0; }
.st-task-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-carried {
  margin-inline-start: auto; flex: 0 0 auto;
  font-size: 11px; color: var(--sun-deep);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px;
}
.st-untimed-head { gap: 10px; }

/* The system's two faces share a stage, so the dome needs the same framing
 * the map has. */
.scene-orbits #sky-dome-svg {
  width: 100%; height: 100%; max-width: min(92vh, 100%);
  display: block; margin: 0 auto; overflow: visible;
}
.scene-orbits #sky-dome-svg[hidden] { display: none; }
.scene-orbits #orrery-svg[hidden] { display: none; }
/* Sits under the trail rather than beside it. On a wide screen the stage
 * starts only a little left of where the breadcrumbs begin, so a switch on
 * the same line runs into them, and being the higher of the two it wins and
 * hides part of the trail. Dropping it a row keeps both readable. */
#system-switch { top: 72px; inset-inline-end: 14px; }
@media (max-width: 760px) {
  #system-switch { top: auto; bottom: calc(12px + env(safe-area-inset-bottom));
    inset-inline-start: auto; inset-inline-end: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,.45); }
}
.o-head { font-family: var(--serif); font-size: 17px; }
.o-when { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.o-note { font-size: 12px; color: var(--ink-2); margin: 9px 0 0; line-height: 1.45;
  text-align: start; }

/* Where to turn to actually see it, which is the one thing neither ring can
 * say. Dimmed when the thing is under the horizon, since a bearing to
 * something below your feet is not a direction to look in. */
.o-pl-look { grid-column: 2 / -1; font-size: 11px; color: var(--ink-3);
  font-variant-numeric: tabular-nums; opacity: .55; }
.o-pl-look.is-up { color: var(--sun-bright); opacity: 1; }

/* Both zodiacs on one line, since the whole point is the comparison. */
.o-pl-z { grid-column: 2 / -1; font-size: 11px; color: var(--ink-2); }
.o-pl-z em { font-style: normal; color: var(--ink-3); letter-spacing: .04em;
  font-size: 10px; text-transform: uppercase; }
.mr-info-which { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 8px; }
.mr-info-which b { color: var(--sun-bright); font-weight: 600; }
.mr-info-panel h4 { margin: 14px 0 4px; font-size: 12.5px; color: var(--sun-bright);
  font-weight: 600; }
.o-pl-x { grid-column: 2 / -1; font-size: 11px; color: var(--moon); }

/* The stars of the sky ring. White with a soft halo at night; on the daylight
 * theme they become dark points, since a white star on cream is a hole. */
:root { --zstar: #ffffff; --zstar-glow: #cfe0ff; --zstar-line: #8fa3c8; }
body[data-theme="day"] { --zstar: #2b2f3d; --zstar-glow: #6b7386; --zstar-line: #7b8296; }
.sw-analemma { background: var(--sun-bright); width: 7px; height: 13px;
  border-radius: 50% / 40%; }

/* ---- the strip and its list, side by side when there is width for it ----
 * Below a certain width the list goes under the column, which is the only
 * thing that works on a phone. Given room, it belongs beside it: the two are
 * one day's business, and reading them as one glance rather than a scroll is
 * the whole advantage a wide screen has.
 */
.st-columns { display: block; }

/* 1120, not 1000. The panel takes about three hundred pixels of any wide
 * window, so the strip's real room is the viewport less that, and splitting a
 * thousand-pixel window leaves the hours about three hundred and sixty to
 * live in, which is worse than stacking. */
@media (min-width: 1120px) {
  .st-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 0 30px;
    align-items: start;
    max-width: 1040px;
    margin: 0 auto;
  }
  .st-columns .st-body { max-width: none; margin: 0; }
  /* No rule across the top: beside the column it is a neighbour, not a
   * footnote, and it stays in view while the hours scroll past. */
  .st-columns .st-untimed {
    margin: 0; padding-top: 0; border-top: 0;
    position: sticky; top: 4px; max-width: none;
  }
}
/* The body-clock silhouette. Fill follows the button's colour so it lights up
   with the rest of the control rather than staying a fixed grey. */
.ic-body { width: 19px; height: 19px; display: block; fill: currentColor; }

/* ---- what is scheduled, in the year and season readout ---- */
.r-plans { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft);
  text-align: start; }
.r-plan { display: flex; align-items: center; gap: 7px; font-size: 12px;
  color: var(--ink-2); padding: 2px 0; }
.r-plan .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.r-plan span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-plan b { margin-inline-start: auto; font-weight: 500; color: var(--ink-3);
  font-variant-numeric: tabular-nums; font-size: 11px; }
.r-plan-more { font-size: 11px; color: var(--ink-3); padding: 2px 0 0 15px; }
/* The readout takes no pointer events so the wheel behind stays hoverable;
   this one control asks for them back. */
.r-open-day { pointer-events: auto; display: block; width: 100%; margin-top: 9px;
  min-height: 36px; padding: 7px 10px; font: inherit; font-size: 12px;
  background: transparent; color: var(--ink-2); cursor: pointer;
  border: 1px solid var(--line); border-radius: 8px; }
.r-open-day:hover { border-color: var(--sun); color: var(--sun); }

/* ------------------------------------------------------- the cycle record --
 * Plain on purpose. This is somebody putting private dates into a machine and
 * reading a guess back out; it should look like a careful notebook rather than
 * anything that claims more authority than it has.
 */
.mn-record { padding: 4px 2px 2px; }
.mn-record label { display: block; font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); margin: 6px 0 6px; }
.mn-add { display: flex; gap: 8px; }
.mn-add input[type="date"] { flex: 1 1 auto; min-width: 0; padding: 8px 10px;
  background: var(--void); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; font: inherit; font-size: 13px; }
.mn-add .ghost-btn { margin-top: 0; flex: 0 0 auto; padding: 8px 14px; }

.mn-big { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 4px; }
.mn-big b { font-family: var(--serif); font-size: 40px; line-height: 1;
  color: var(--ink); font-weight: 400; }
.mn-big span { font-size: 12px; color: var(--ink-3); }

.mn-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px;
  margin: 12px 0 0; font-size: 12.5px; }
.mn-facts dt { color: var(--ink-3); }
.mn-facts dd { margin: 0; color: var(--ink-2); }

.mn-note { font-size: 11.5px; color: var(--ink-3); margin: 12px 0 0; line-height: 1.5; }
.mn-empty { font-size: 12.5px; color: var(--ink-2); margin: 12px 0 0; line-height: 1.5; }

.mn-list { list-style: none; margin: 14px 0 0; padding: 12px 0 0;
  border-top: 1px solid var(--line-soft); }
.mn-list li { display: flex; align-items: center; gap: 10px; padding: 5px 0;
  font-size: 12.5px; }
.mn-list .mn-d { color: var(--ink-2); }
.mn-list .mn-g { margin-inline-start: auto; color: var(--ink-3); font-size: 11.5px;
  font-variant-numeric: tabular-nums; }
.mn-x { background: transparent; border: 0; color: var(--ink-3); cursor: pointer;
  font-size: 17px; line-height: 1; padding: 4px 6px; flex: 0 0 auto; }
.mn-x:hover { color: var(--sc-rose); }

.mn-caveat { font-size: 11px; color: var(--ink-3); opacity: .8; line-height: 1.5;
  margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--line-soft); }

/* Today's own place on the ring. */
.mn-day.is-today { stroke: var(--sun-bright); stroke-width: 2; }
/* The cycle scene's own switch, clear of the flyout on the left. */
.mn-switch { top: 56px; inset-inline-end: 8px; inset-inline-start: auto; }
@media (max-width: 760px) {
  .mn-switch { top: auto; bottom: calc(12px + env(safe-area-inset-bottom));
    inset-inline-end: 12px; inset-inline-start: auto; }
}

/* The invitation to start recording. Deliberately the most prominent control
 * on the cycle view when there is nothing recorded yet, because the whole
 * feature is unreachable without it. */
.mn-cta {
  display: block; width: 100%; margin: 14px 0 0; padding: 11px 14px;
  background: var(--sun-deep); color: #12100a;
  border: 0; border-radius: 9px;
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.mn-cta:hover { filter: brightness(1.08); }
/* Once there is a record it is a way back in, not a summons. */
.menses-readout .mn-cta:not(:only-of-type) { }
.mn-cta-why { font-size: 11.5px; color: var(--ink-3); line-height: 1.5;
  margin: 8px 2px 0; }

/* ------------------------------------------------- the growing windows -----
 * Three temperaments inside one frost-free season. Cool at both ends of the
 * year and hot in the middle, so the two cool windows share a colour: they
 * are the same gardening, done twice.
 */
:root { --gw-cool: #6fb3d8; --gw-warm: #6fbf8b; --gw-hot: #e0a24c; }
body[data-theme="day"] { --gw-cool: #2f7ea8; --gw-warm: #3f8f5f; --gw-hot: #b8791f; }

.grow-windows { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.gw-intro { margin: 0 0 12px; }
.gw-none { margin: 0; }
.gw-row { margin: 0 0 14px; }
.gw-head { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.gw-head b { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.gw-dot { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }
.gw-temp { margin-inline-start: auto; font-size: 10.5px; color: var(--ink-3);
  font-variant-numeric: tabular-nums; }
.gw-dates { display: flex; align-items: center; gap: 6px; }
.gw-dates .md-input { flex: 1 1 0; min-width: 0; }
.gw-to { font-size: 11px; color: var(--ink-3); flex: 0 0 auto; }
.gw-reset { flex: 0 0 auto; background: transparent; border: 0; color: var(--ink-3);
  font: inherit; font-size: 10.5px; cursor: pointer; text-decoration: underline; }
.gw-note { width: 100%; box-sizing: border-box; margin-top: 6px; padding: 6px 8px;
  background: var(--void); color: var(--ink); border: 1px solid var(--line);
  border-radius: 7px; font: inherit; font-size: 12px; resize: vertical; }
.gw-hint { font-size: 11px; color: var(--ink-3); line-height: 1.45; margin: 5px 2px 0; }
/* One strip, so an overlap has to read as a deeper colour rather than as a
 * second ring. */
.gw-arc { cursor: pointer; transition: opacity .12s ease; }
.gw-arc:hover { opacity: .72 !important; }
.sw-gw { background: linear-gradient(90deg, var(--gw-cool), var(--gw-warm), var(--gw-hot));
  width: 16px; height: 8px; border-radius: 2px; }