/* ── 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;}

/* ══ THE KIT, APPLIED — 2026-08-13 ═════════════════════════════════════════
   Ether asked for a design revamp across Prahar, Overhead, Umbra and Yuti with
   uiverse deployed heavily on each. `kit.css` is the shared answer and it is
   linked ahead of this file on all three eclipse pages; this block is the part
   that is Umbra's alone.

   WHAT UMBRA ALREADY HAD AND KEEPS. The umbral diagram is the best drawing in
   the network — a real penumbra, a real umbra, the Moon's path to scale — and
   nothing here touches it. Everything below is the furniture AROUND it, which
   was shell defaults and nothing else.

   Every colour is a token or a color-mix() of one. Run
   `python3 surfaces/_shell/check_css.py` before committing.               */

/* ── THE FIGURE IS THE HERO, SO THE FIGURE GLOWS ───────────────────────────
   `.uv-aura` from kit.css — the twice-painted gradient from
   `htwarriors108_little-cat-84`, once as a frame and once through an 18px
   blur so the card appears to emit rather than to cast.
       https://uiverse.io/htwarriors108/little-cat-84  (MIT)

   ONE CARD PER PAGE MAY GLOW and on this page the choice is easy: a lunar
   eclipse is a picture of a shadow, and the shadow diagram is the only thing
   here a reader could not get from a table. The aura is applied through a
   marker class on the card in the markup rather than to `.ec-figure` itself,
   because the figure is a <figure> INSIDE the card and a halo drawn at the
   figure's edge would sit in the card's padding.

   IT WORKS HERE AND NOT ON `.al-now` FOR ONE REASON: `.sh-card` does not clip.
   A blurred `z-index:-1` pseudo-element only reads as a halo if it can bleed
   past its parent, and Prahar's status block sets `overflow:hidden` for its
   verdict edge. Nothing on this card needs clipping, so the halo lands. */

/* ── the magnitude, lit ────────────────────────────────────────────────────
   `.ec-big` is one number set large because it is the answer the reader came
   for, and it was `--text` on `--panel` like every other number on the page.
   A text-shadow in the moon tone is the cheapest possible way to say "this one
   is the answer" — no layout, no second element, and it degrades to nothing
   rather than to something wrong.

   NOT `background-clip:text`. It needs the `-webkit-` form on iOS, which
   `./uv` prices as a cost for exactly this reason, and a gradient-filled
   numeral that falls back to transparent on the floor device is a page with no
   answer on it. A shadow that fails to paint leaves the number. */
.ec-big{text-shadow:0 0 22px color-mix(in srgb,var(--moon) 34%,transparent);}
:root[data-skin="7"] .ec-big{text-shadow:none;}

/* ── the type pills ────────────────────────────────────────────────────────
   Total, partial, penumbral. They already carry the right colour and the right
   word; what they had no way to say is that a row in the ten-year list is a
   link you can follow. The lift is `--rise-1` and the ring is the shell
   button's, so a pill and a button answer a pointer the same way. */
.ec-pill{box-shadow:var(--rise-1);
  transition:box-shadow var(--dur-move) var(--ease-out),
             transform  var(--dur-tap)  var(--ease-press);}
.ec-rows a:hover .ec-pill{box-shadow:var(--rise-2);transform:translateY(-1px);}

/* ── the row that is a link ────────────────────────────────────────────────
   Ten years of eclipses, each row an anchor, and the only sign of that was the
   text going one tone brighter. `.uv-draw`'s idea at one edge: a line drawn
   along the top of the row from the left. It costs no layout, so a ten-row
   table does not reflow as the pointer travels down it — which is the whole
   reason kit.css prefers a drawn line to a shadow on anything that comes in a
   list. */
.ec-rows a{position:relative;
  transition:color var(--dur-move) var(--ease-out);}
.ec-rows a::before{content:"";position:absolute;inset:auto auto -1px 0;
  width:100%;height:1px;
  background:var(--moon);opacity:0;transform:scaleX(0);
  transform-origin:left center;pointer-events:none;
  transition:transform var(--dur-sweep) var(--ease-out),
             opacity   var(--dur-move)  var(--ease-out);}
.ec-rows a:hover::before,
.ec-rows a:focus-visible::before{transform:scaleX(1);opacity:.55;}
.ec-rows a:focus-visible{outline:2px solid var(--moon);outline-offset:3px;
  border-radius:4px;}

/* ── the live banner ───────────────────────────────────────────────────────
   On screen for a handful of hours a year, while somebody is standing outside
   looking at the sky. Its own comment above says why it does not animate: a
   page that pulses at somebody watching an eclipse is competing with the thing
   it is about. That decision stands and is not reopened here.

   WHAT IT GETS INSTEAD IS DEPTH. A raised amber-bordered block with a lit top
   edge reads as an object that has arrived on the page, which is what it is —
   it is `hidden` every other day of the year. `--rise-2` is the same lift
   Prahar's status block carries, and for the same reason: on the one day this
   is visible, it is the answer and everything else is a record. */
.ec-live{box-shadow:var(--rise-2),var(--edge-lit);}