/* ── surfaces/eclipse/eclipse.css — this surface's own furniture ─────────────

   EVERY CLASS HERE IS `ec-`, NEVER `sh-`. The `sh-` prefix is the shell's
   namespace and a surface that writes into it has quietly forked the shell:
   the next surface inherits a rule it never asked for, or worse, overrides one
   and nobody can tell which file won. Anything in here that a second surface
   turns out to want is a candidate to be PROMOTED into shell.css by hand — it
   does not get there by being named as if it already had.

   NOT ONE HARD-CODED COLOUR. Every value below is a shell token or a
   color-mix of one, which is what lets all four skins work without this file
   knowing they exist. `python3 surfaces/_shell/check_css.py` measures the
   palette; it does not read this file, so the discipline here is the guard.

   ── WHY THIS IS A FILE AND NOT A <style> BLOCK, AND WHAT THAT COSTS ────────
   Two of the three pages need these rules. A <style> block in each would be
   the same stylesheet twice, which is the duplication the shell exists to
   prevent arriving one level down.

   So it is one file — and build.py has no way to put a <link> for it in
   <head>, because it owns <head> and a surface only writes a <main>. The pages
   link it as the first child of <main> instead. That works in every browser
   and it is late: the browser discovers this stylesheet after the document has
   started, rather than in the first packet with shell.css. Small, real, and
   reported rather than hidden. See the session ledger.                       */

/* ── the diagram ───────────────────────────────────────────────────────────
   The SVG is drawn in DEGREES × 100, so every radius in it is the engine's own
   number and there is no second scale to keep in step. */
.ec-figure{margin:0;}
.ec-figure svg{display:block;width:100%;height:auto;
  background:radial-gradient(ellipse at 50% 50%,
    color-mix(in srgb,var(--glow) 70%,transparent) 0%,transparent 70%);
  border-radius:var(--radius);}
:root[data-skin="7"] .ec-figure svg{background:none;}

/* ── DEEPER SHADOW = STRONGER TINT, AND NOT "DARKER" ──────────────────────
   The first version filled the umbra from `--ink`, reasoning that the umbra is
   the dark shadow and `--ink` is the darkest ground. In Midnight that is true.
   In PORCELAIN `--ink` is #FCFDFE — the palettes are inverses by design, so
   `--ink` is the deepest ground at night and the LIGHTEST on paper — and the
   figure came out with the umbra paler than the penumbra. The dark shadow drawn
   lighter than the outer one, in the one skin that looks like software.

   There is no token that means "dark" in all four skins, and there cannot be.
   So the figure encodes depth as TINT STRENGTH against the card instead: the
   umbra is tinted about twice as hard as the penumbra, and that reads as
   "deeper shadow" whether the card underneath is near-black or white.

   `--faint` is the token used because it is a MID tone in both bases — grey-blue
   at night, grey on paper — so the same mix separates from either ground.

   ── EVERY color-mix() FILL HERE IS DECLARED TWICE, AND THAT IS DELIBERATE ──
   An SVG `fill` the browser cannot parse does not fall back to nothing, it
   falls back to BLACK — so one unsupported function turns the whole figure into
   black discs on a black card rather than degrading. The plain declaration
   first, the mix second: a browser that understands both takes the second, and
   one that does not keeps a flat token colour and a figure that still reads.

   This matters because `var()` STANDING IN FOR THE PERCENTAGE inside
   color-mix() is the newest thing on this surface, and iOS Safari is the floor
   (`I239`). It has not been checked on a device — the Browser pane is Chromium
   and is never evidence — so it is written to be harmless if it fails. */
.ec-penumbra{fill:var(--line);
  fill:color-mix(in srgb,var(--faint) 20%,transparent);
  stroke:var(--line2);stroke-width:1.5;stroke-dasharray:6 5;}

/* THE UMBRA'S EDGE IS THE VERDICT, so it is the clearest line in the figure.
   Drawn faint first, and a reader could not see where the shadow that decides
   total-or-partial actually falls — the one boundary the whole page is about
   was the least legible thing on it. */
.ec-umbra{fill:var(--line2);
  fill:color-mix(in srgb,var(--faint) 44%,transparent);
  stroke:var(--moon-deep);
  stroke:color-mix(in srgb,var(--moon-deep) 70%,var(--line2));stroke-width:2.5;}
.ec-axis{stroke:var(--line2);stroke-width:1;stroke-dasharray:3 6;}
.ec-path{fill:none;stroke:var(--moon-deep);stroke-width:1.5;
  stroke-dasharray:5 4;opacity:.75;}
.ec-moon{stroke:var(--moon-deep);stroke-width:1.2;}
.ec-moon.ghost{fill:var(--panel2);
  fill:color-mix(in srgb,var(--moon) 22%,transparent);
  stroke:var(--line2);
  stroke:color-mix(in srgb,var(--moon-deep) 55%,transparent);}

/* ── THE ECLIPSED MOON, AND WHY IT IS TWO RULES ───────────────────────────
   How coppery is a number the page computes — the engine's `depth`, 0..1 —
   handed in as `--ec-lit-pct` so the colour stays in the stylesheet and the
   script stays out of the palette.

   WHAT IT MIXES INTO HAS TO CHANGE WITH THE BASE. Mixed into `--moon` this is
   a bright copper at night, because `--moon` is a pale blue there. On paper
   `--moon` is #25415E — a dark navy — and amber into navy is OLIVE. The first
   version drew the eclipsed Moon as a dirty dark-green disc in Porcelain.

   So a light base mixes into `--panel` instead, which gives copper-on-paper: a
   warm tan, the colour copper actually is against white. Keyed on
   `[data-theme="day"]` rather than on `[data-skin="3"]`, deliberately — skin.js
   sets data-theme from each skin's own `--skin-base`, so a fifth light skin
   added to shell.css inherits this with nothing to remember. Listing skin
   numbers in a surface is how the numbering drifts, which shell.css spends
   fifteen lines warning about. */
.ec-moon.lit{fill:var(--amber);
  fill:color-mix(in srgb,var(--amber) var(--ec-lit-pct,55%),var(--moon));}
:root[data-theme="day"] .ec-moon.lit{fill:var(--amber);
  fill:color-mix(in srgb,var(--amber) var(--ec-lit-pct,55%),var(--panel));}
.ec-tag{fill:var(--faint);font-family:var(--mono);font-size:15px;
  letter-spacing:.08em;text-anchor:middle;}
.ec-tag.lit{fill:var(--muted);}

.ec-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:12px 0 0;
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.06em;
  color:var(--faint);text-transform:uppercase;}
.ec-legend b{color:var(--muted);font-weight:400;}

/* ── the headline number ───────────────────────────────────────────────────
   One number, set large, because it is the answer the reader came for. */
.ec-big{font-family:var(--mono);font-size:var(--t-2xl);line-height:1.1;
  color:var(--text);margin:0;font-variant-numeric:tabular-nums;}
.ec-sub{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin:6px 0 0;}

/* ── tables of times ──────────────────────────────────────────────────────
   tabular-nums throughout: a column of times that shifts by a pixel per digit
   is a column nobody can scan, and this surface is mostly columns of times. */
.ec-rows{width:100%;border-collapse:collapse;font-size:var(--t-sm);
  font-variant-numeric:tabular-nums;}
.ec-rows th{text-align:left;font-family:var(--mono);font-size:var(--t-xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
  font-weight:400;padding:0 10px 8px 0;border-bottom:1px solid var(--line);}
.ec-rows th:last-child,.ec-rows td:last-child{padding-right:0;text-align:right;}
.ec-rows td{padding:9px 10px 9px 0;border-bottom:1px solid var(--line);
  color:var(--muted);vertical-align:baseline;}
.ec-rows tr:last-child td{border-bottom:0;}
.ec-rows .t{color:var(--text);font-family:var(--mono);}
.ec-rows .now td{color:var(--text);}
.ec-rows tr.key td{color:var(--text);}
.ec-rows tr.key .t{color:var(--moon);}
.ec-rows .day{color:var(--faint);font-size:var(--t-xs);}

/* A whole row that is also a link, for the upcoming list. The anchor is the
   cell content rather than the row, because a wrapped <a> around <tr> is not
   valid HTML and the browsers that tolerate it do not agree on what it means. */
.ec-rows a{text-decoration:none;color:inherit;display:block;}
.ec-rows a:hover{color:var(--text);}

.ec-pill{display:inline-block;font-family:var(--mono);font-size:var(--t-xs);
  letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;
  border-radius:999px;border:1px solid var(--line2);color:var(--muted);}
.ec-pill.total{border-color:var(--amber);color:var(--amber);}
.ec-pill.partial{border-color:var(--moon-deep);color:var(--moon);}
.ec-pill.penumbral{border-color:var(--line2);color:var(--faint);}

/* ── the live banner ──────────────────────────────────────────────────────
   Only ever on screen during an eclipse, which is a handful of hours a year.
   It is a border and a tone, not an animation: a page that pulses at somebody
   watching the sky is a page competing with the thing it is about. */
.ec-live{border:1px solid var(--amber);border-radius:var(--radius);
  background:color-mix(in srgb,var(--amber) 10%,var(--panel));
  padding:14px 18px;margin:0 0 16px;}
.ec-live b{color:var(--amber);}

/* ── when the numbers were worked out (I391) ────────────────────────────────
   A sibling of the shell's .sh-method, sat directly under it and deliberately
   quieter: the method line is a standing claim about the surface and this one
   is about the copy in front of you, which changes between the response and
   the load. `--faint` rather than `--muted` because it should read as a
   footnote to the line above rather than as a second declaration — but it is
   NOT hidden and it is not smaller, because a page that dates its own numbers
   in type nobody can read has not dated them. */
.ec-built{font-family:var(--mono);font-size:var(--t-xs);line-height:1.7;
  color:var(--faint);margin:10px 0 0;}
.ec-built b{color:var(--muted);font-weight:600;}

.ec-note{font-size:var(--t-sm);color:var(--muted);margin:14px 0 0;}
.ec-fail{font-size:var(--t-sm);color:var(--rose);margin:10px 0 0;}
.ec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:14px;}
