/* Tool-specific layout only. Faces, buttons, fields, the toolbar, the table
   and its rows come from ../assets/base.css over the vendored system. This
   file draws the two things this tool adds: the disc and the clock beside it. */

.field.place {
  width: min(320px, 58vw);
  font-family: var(--pp-font-mono);
  font-size: 0.86rem;
}

/* "Looking that up" is not an error, and .hint is a plate-2 line. */
.hint.is-quiet {
  color: var(--pp-faint);
}

/* A place name rarely has one obvious match, so the runners-up stay on the
   page as options rather than being discarded. */
.alts {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  margin: -0.6rem 0 1.35rem;
}
.alts-label {
  font-family: var(--pp-font-mono);
  font-size: var(--pp-size-label);
  letter-spacing: var(--w-track-label);
  text-transform: uppercase;
  color: var(--pp-faint);
}
.alts-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.btn-ghost.alt {
  padding: 0.22rem 0.55rem;
  font-size: 0.76rem;
}

.card.prompt {
  font-size: 0.94rem;
  line-height: 1.62;
  color: var(--pp-muted);
  margin-bottom: 1.75rem;
}
.card.prompt strong,
.card.prompt code {
  font-family: var(--pp-font-mono);
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--pp-ink);
}

/* The note under the toolbar says where a place name goes; the report starts a
   new section below it and needs the space to show that. */
#report {
  margin-top: 2rem;
}

.where-cap {
  font-family: var(--pp-font-mono);
  font-size: 0.76rem;
  letter-spacing: var(--w-track-mono);
  color: var(--pp-faint);
}

/* ── The stage ──────────────────────────────────────────────────────────────
   The picture and the number are one sentence — that is the Sun, and this is
   how long until it changes — so they sit side by side and neither scrolls
   away from the other. Below the measure where the disc would be a stamp they
   stack, disc first: it is the thing worth looking at. */
.stage {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: 1.6rem 2.25rem;
  align-items: start;
  margin-bottom: 1.75rem;
}
@media (max-width: 760px) {
  .stage {
    grid-template-columns: minmax(0, 1fr);
  }
}

.disc-wrap {
  margin: 0;
}
.disc {
  display: block;
  width: 100%;
  height: auto;
  border: var(--pp-rule-line) solid var(--pp-line);
}
.disc-cap {
  margin-top: 0.7rem;
}
.disc-state {
  margin: 0;
  font-family: var(--pp-font-mono);
  font-size: 0.94rem;
  letter-spacing: var(--w-track-mono);
  color: var(--pp-ink);
}
.disc-note {
  margin: 0.15rem 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--pp-faint);
}
.btn-ghost.play {
  margin-top: 0.7rem;
  padding: 0.28rem 0.6rem;
  font-size: 0.78rem;
}
.btn-ghost.play.is-on {
  border-color: var(--pp-plate-3);
  color: var(--pp-plate-3-text);
}

/* Sky, plate, ink, hatch. The Sun takes plate 2 at full strength because it is
   printed rather than lit, and the Moon is the ink over it: black in both
   modes. That is one of two values here that do not follow the mode, for the
   same reason Recon prints the umbra in black. The four pens are named here
   rather than written into each rule, so the figure is restyled in one place. */
.disc {
  --ec-sky: var(--pp-sunk);
  --ec-pen: var(--pp-faint);
  --ec-rule: var(--pp-line);
  --ec-edge: var(--pp-edge);
}
.disc .sky,
.disc .erase {
  fill: var(--ec-sky);
}
.disc .sun {
  fill: var(--pp-plate-2);
}
/* The Moon, printed twice: the whole disc in plate 3, then the part covering
   the Sun's face again in the overprint, the product of the two inks. Three
   flat regions, no translucency and no blend mode. */
.disc .moon-off {
  fill: var(--pp-plate-3);
}
.disc .moon-body {
  fill: var(--ec-overprint);
}
.disc .moon-cut {
  clip-path: url(#ec-face);
}

/* Two circles that are notes rather than sights: where the Moon is while it is
   still off the Sun's face, and where the Sun is once the ground is in front
   of it. Dotted, because the system fixes dotted as provisional — and a circle
   drawn around something you cannot see is exactly that. */
.disc .moon-edge,
.disc .ghost {
  fill: none;
  stroke: var(--ec-rule);
  stroke-width: 1;
  stroke-dasharray: 1 5;
  stroke-linecap: round;
}
.disc .ghost {
  stroke: var(--pp-plate-2);
  stroke-dasharray: 2 5;
  opacity: 0.85;
}

.disc .hatch {
  stroke: var(--ec-rule);
  stroke-width: 1;
}
.disc .horizon {
  stroke: var(--ec-edge);
  stroke-width: 2;
}

.disc .up-mark path {
  fill: none;
  stroke: var(--ec-pen);
  stroke-width: 1.2;
}
.disc .up-mark text {
  font-family: var(--pp-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  fill: var(--ec-pen);
}

.disc .is-off {
  display: none;
}

/* ── The clock ──────────────────────────────────────────────────────────────
   The one number the tool exists to print, so it is set at display size in the
   machine's own face: it is a reading off a clock, not a headline. */
.clock-label {
  margin: 0;
  font-family: var(--pp-font-mono);
  font-size: var(--pp-size-label);
  letter-spacing: var(--w-track-label);
  text-transform: uppercase;
  color: var(--pp-faint);
}
.clock-time {
  margin: 0.2rem 0 0;
  font-family: var(--pp-font-mono);
  font-size: clamp(1.9rem, 6.5vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--pp-ink);
  overflow-wrap: anywhere;
}
.clock-at {
  margin: 0.35rem 0 0;
  font-family: var(--pp-font-mono);
  font-size: 0.78rem;
  letter-spacing: var(--w-track-mono);
  color: var(--pp-muted);
}

/* The one line about eyes, kept beside the number rather than in the notes,
   because the number is what a reader is looking at when it matters. Plate 2
   is the tool's own colour for "the Sun is not where you think it is"; the
   rule under it is there so it reads as a caution without a box or an icon. */
.clock-caveat {
  margin: 0.55rem 0 0;
  padding-top: 0.4rem;
  border-top: var(--pp-rule-line) solid var(--pp-plate-2);
  max-width: 34ch;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--pp-plate-2-text);
}

/* The four or five facts a reader checks after the number: what kind of
   eclipse it is there, how deep, how long, how high the Sun will be. */
.stats {
  margin: 1.25rem 0 0;
  border-top: var(--pp-rule-line) solid var(--pp-line);
}
.stats > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.42rem 0;
  border-bottom: var(--pp-rule-hairline) solid var(--pp-hair);
}
.stats dt {
  font-size: 0.88rem;
  color: var(--pp-muted);
}
.stats dd {
  margin: 0;
  font-family: var(--pp-font-mono);
  font-size: 0.86rem;
  letter-spacing: var(--w-track-mono);
  text-align: right;
  color: var(--pp-ink);
}

/* ── The running order ──────────────────────────────────────────────────────
   A table of times is a table: the sheet's own tracks, with the phase names
   set in the reading face because they are words rather than figures. */
/* Four columns is the narrowest this table can honestly be — a phase, when it
   happens where you are, when it happens in UT, and how high the Sun is — so
   the sheet's sideways-scroll threshold comes down to where all four still fit
   a phone rather than leaving the last one off the edge. */
.phases {
  --w-sheet-min: 336px;
}
.phases table {
  table-layout: auto;
}
.phases tbody th {
  padding: 0.45rem 0.8rem;
  border-bottom: var(--pp-rule-hairline) solid var(--pp-hair);
  font-family: var(--pp-font-body);
  font-size: 0.92rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--pp-ink);
}
.phases tbody th small {
  display: block;
  font-size: 0.74rem;
  color: var(--pp-faint);
}
.phases td.t {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.phases td.meta {
  color: var(--pp-faint);
}
.phases td.is-under {
  color: var(--pp-plate-2-text);
}
.phases tbody tr:last-child th {
  border-bottom: 0;
}

/* The next thing to happen, marked the way a reader marks a printed timetable:
   a swipe of the pen through the line, not a coloured row. */
.phases tr.is-next th,
.phases tr.is-next td {
  background: var(--pp-marker-citron);
}

/* ── The strip of eclipses ──────────────────────────────────────────────────
   The catalogue as it stands at this place: one card per eclipse, the Sun it
   leaves here drawn on it, and the picked one marked. A strip rather than a
   list because a card is mostly a picture, and because the answer underneath
   is what the reader came for and should not be pushed off the screen. */
.choose {
  margin-bottom: 1.75rem;
}
.picks {
  display: flex;
  gap: 0.5rem;
  margin: 0.7rem 0 0;
  padding: 0 0 0.4rem;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
/* Every card the height of the tallest, so the strip reads as one row of
   plates rather than a ragged shelf. */
.picks li {
  flex: none;
  display: flex;
}
.pick {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0 0.55rem;
  width: 13rem;
  padding: 0.45rem 0.6rem;
  text-align: left;
  background: var(--pp-surface);
  border: var(--pp-rule-line) solid var(--pp-line);
  border-radius: var(--pp-radius-md);
}
.pick:hover:not([disabled]) {
  background: var(--pp-tint);
  border-color: var(--pp-edge);
}
.pick:active:not([disabled]) {
  transform: var(--w-press);
}
/* The picked one takes the structure rule — the weight the system keeps for
   the thing you are meant to notice — and its date takes the marker, which is
   how every other sheet on this page says "this line". */
.pick.is-on {
  border: var(--pp-rule-structure) solid var(--pp-edge);
  padding: calc(0.45rem - 1px) calc(0.6rem - 1px);
}
.pick-disc {
  grid-row: span 3;
  width: 46px;
  height: 46px;
  border: var(--pp-rule-hairline) solid var(--pp-line);
}
.pick-when {
  font-family: var(--pp-font-mono);
  font-size: 0.78rem;
  letter-spacing: var(--w-track-mono);
  color: var(--pp-ink);
}
.pick-what {
  font-family: var(--pp-font-mono);
  font-size: var(--pp-size-label);
  letter-spacing: var(--w-track-label);
  color: var(--pp-muted);
}
.pick-more {
  font-size: 0.74rem;
  color: var(--pp-faint);
}
.pick[disabled] .pick-when,
.pick[disabled] .pick-what,
.pick[disabled] .pick-more {
  color: var(--pp-faint);
}

/* The thumbnail is the big disc with everything situational taken out: no
   horizon, no zenith mark, no ghost — the Sun, the Moon, and the overprint
   where one covers the other. */
.pick-disc .sky {
  fill: var(--pp-sunk);
}
.pick-disc .sun {
  fill: var(--pp-plate-2);
}
.pick-disc .moon-off {
  fill: var(--pp-plate-3);
}
.pick-disc .moon-body {
  fill: var(--ec-overprint);
}

.colophon {
  max-width: 66ch;
  margin-top: 2.5rem;
}

/* ---- the horizon ------------------------------------------------------
   Recon's terrain question, asked only about the strip of sky this eclipse
   crosses and printed upright. The figure is SVG drawn by the script but
   inked here, so both colour modes are one stylesheet's business and the
   bench lamp restyles it with the page. */

.horizon {
  margin-top: 1.6rem;
}
.hz-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  padding-top: 0.7rem;
}
.hz-ask {
  margin: 0;
  max-width: 60ch;
}
.hz-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.9rem 1.4rem;
  margin: 0;
}
/* The frame is taller than wide on purpose and does not stretch to the
   column: a portrait figure blown up to 900px would put four degrees of sky
   across a foot of screen. */
.hz-fig {
  flex: none;
  width: 232px;
  height: 340px;
  background: var(--pp-surface);
  border: var(--pp-rule-line) solid var(--pp-line);
  border-radius: var(--pp-radius-md);
}
.hz-wrap figcaption {
  flex: 1 1 16rem;
  max-width: 44ch;
  margin: 0;
}

.hz-grid { stroke: var(--pp-hair); stroke-width: 0.6; }
.hz-zero { stroke: var(--pp-faint); stroke-width: 0.7; stroke-dasharray: 2 3; }
.hz-tick, .hz-clabel, .hz-axis {
  font-family: var(--pp-font-mono);
  fill: var(--pp-faint);
}
.hz-tick { font-size: 10px; }
.hz-clabel { font-size: 9px; letter-spacing: 0.04em; }
.hz-axis { font-size: 9px; letter-spacing: var(--w-track-label, 0.06em); }
.hz-ctick { stroke: var(--pp-faint); stroke-width: 0.8; }
/* the ground is ink, the one solid mass in the frame */
.hz-ground { fill: var(--pp-ink); fill-opacity: 0.85; }
/* the Sun's path: partial thin and quiet, totality thick in plate 3, and
   whatever the ground takes away dashed in plate 2 */
.hz-run { stroke: var(--pp-faint); stroke-width: 2; }
.hz-run.is-total { stroke: var(--pp-plate-3); stroke-width: 3.5; }
.hz-run.is-blocked { stroke: var(--pp-plate-2); stroke-dasharray: 3 2; }
.hz-sun { fill: none; stroke: var(--pp-ink); stroke-width: 1.4; }

@media (max-width: 560px) {
  .hz-wrap { gap: 0.7rem; }
  .hz-fig { width: 100%; max-width: 300px; height: auto; aspect-ratio: 232 / 340; }
}

/* The overprint: plate 2 x plate 3, multiplied channel by channel. Declared
   on the page rather than on the disc because both drawings print with it —
   the bite on the disc, and the same bite on every card in the strip. */
body {
  --ec-overprint: #00043f;                    /* #ed0a3f over #0066ff */
}
[data-mode="dark"] body {
  /* the product of the mode's own plates (#ff4d68 x #6a9dff), a shade denser
     so it clears 3:1 against both of them on a dark ground */
  --ec-overprint: #50244e;
}