/* ─────────────────────────────────────────────────────────────────────────
   surfaces/almanac/almanac.css — the almanac's own layer, and only its own.

   The palette, the type scale, the card, the eyebrow, the button, the header,
   the footer and the method line are all `surfaces/_shell/shell.css`. Nothing
   here redeclares any of them. What is here is the four pieces of geometry
   that make a panchang readable — the day band, the limb rail, the period
   strip and the status block — and none of those belong in the shell, because
   no other surface in the network has a sunrise-to-sunset interval to cut up.

   ── NOT ONE HARD-CODED COLOUR, AND NOT ONE NEW TOKEN ───────────────────────
   Every colour on this page is a shell token or a color-mix() of one, which is
   what lets all four skins work without this file knowing they exist.

   THAT IS NOW MEASURED RATHER THAN PROMISED. This paragraph used to say that
   `surfaces/_shell/check_css.py` did not reach a surface stylesheet and that
   the rule was therefore held here BY HAND, with the gap filed in the ledger.
   The shell closed it on 2026-08-08 (`I428`, and `I443` is this correction):
   the instrument now discovers every `*.css` under `surfaces/` that is not
   inside a `dist/`, and measures each one against all four palettes in turn,
   because a surface sheet declares no palette of its own and measured alone
   would pass by knowing nothing. This sheet came back clean the first time it
   was run — six resolved foreground/ground pairs, zero findings.

   So the check to run before committing anything below is:

       python3 surfaces/_shell/check_css.py

   A comment describing a hole that somebody has since filled is worse than no
   comment, because the next reader believes it and does the work again.

   ── THE DESIGN ARGUMENT, IN ONE PARAGRAPH ──────────────────────────────────
   A printed panchang is forty rows at one weight, and every incumbent has
   reproduced that on a screen and then put an ad in the middle of it. The
   claim of this page is not that the rows are prettier. It is that a panchang
   is made of INTERVALS and a table cannot show an interval — so the tithi gets
   a rail showing how far through it is, the day gets a band with the marked
   windows drawn on it in proportion, and the thing running RIGHT NOW is said
   in a sentence before any table appears. The tables are still here, under the
   pictures, because a glance and a check are different needs.

   ── QUALITY IS NEVER COLOUR ALONE ──────────────────────────────────────────
   Choghadiya carries good/neutral/avoid, and roughly one man in twelve cannot
   separate the green from the rose. Every quality is a word in the cell as
   well as a tint on it, and the "now" cell is marked by a ring and a label
   rather than by hue.                                                        */

/* ── 1 · THE PLACE CONTROL ─────────────────────────────────────────────────
   The first thing on the page, and deliberately not a dropdown. It states
   where the answer is for and how we know — a guessed city that does not
   admit it is a guess is the one way this page can be quietly wrong. */

.al-placebar{margin:0 0 18px;}

/* THE EDGE AND THE RISE COME FROM kit.css (2026-08-13), and the flat
   `1px solid var(--line)` is what they replace. Two lines of the same weight
   round a control that is the first thing on the page told the reader nothing
   about which of the two mattered; a lit hairline and a shadow say "this is an
   object you can press" without a single word of copy. The plain form is
   declared first and is still the whole control if the second rule is
   dropped. */
.al-place{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  width:100%;text-align:left;cursor:pointer;
  font-family:var(--sans);padding:11px 13px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  color:var(--text);
  box-shadow:var(--rise-1),var(--edge-lit);
  transition:box-shadow var(--dur-move) var(--ease-out),
             transform  var(--dur-tap)  var(--ease-press);}
.al-place{border-color:transparent;
  background:
    linear-gradient(var(--panel),var(--panel)) padding-box,
    var(--edge-grad) border-box;}
.al-place:hover{box-shadow:var(--rise-2),var(--edge-lit);}
.al-place:active{transform:translateY(1px);}
.al-place:focus-visible{outline:2px solid var(--moon);outline-offset:3px;}
.al-place-n{font-size:var(--t-md);font-weight:600;}
.al-place-h{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.06em;
  color:var(--faint);}

.al-pick{margin-top:8px;padding:14px;background:var(--panel2);
  border:1px solid var(--line);border-radius:var(--radius);}
.al-pick[hidden]{display:none;}
.al-pick-l{display:block;font-family:var(--mono);font-size:var(--t-xs);
  letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin:0 0 8px;}
/* ⇄ 2026-08-13: THE FOCUS STATE IS kit.css's, and it is the one thing this
   input was missing. A search box with no focus ring on a page whose only
   other control is a button is a keyboard user guessing where they are. The
   3px moon wash outside the border is `.uv-field`'s exactly, so the city
   search and Yuti's eight birth fields answer a tab key the same way. */
.al-pick-i{width:100%;font-family:var(--sans);font-size:var(--t-md);
  padding:10px 12px;color:var(--text);background:var(--ink);
  border:1px solid var(--line2);border-radius:var(--radius);
  outline:none;
  box-shadow:inset 0 1px 3px rgb(0 0 0 / .22);
  transition:border-color var(--dur-move) var(--ease-out),
             box-shadow   var(--dur-move) var(--ease-out);}
.al-pick-i::placeholder{color:var(--faint);}
.al-pick-i:focus{border-color:var(--moon-deep);
  box-shadow:inset 0 1px 3px rgb(0 0 0 / .22),
             0 0 0 3px color-mix(in srgb,var(--moon) 18%,transparent);}

.al-pick-r{display:flex;flex-direction:column;gap:1px;margin-top:10px;}
.al-pick-r:empty{display:none;}
.al-hit{display:flex;align-items:baseline;gap:8px;width:100%;text-align:left;
  cursor:pointer;padding:9px 10px;border-radius:8px;
  background:transparent;border:1px solid transparent;color:var(--text);
  font-family:var(--sans);font-size:var(--t-sm);}
.al-hit:hover{background:var(--panel);border-color:var(--line);}
.al-hit b{font-weight:600;}
.al-hit span{color:var(--muted);font-size:var(--t-xs);}

.al-pick-a{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.al-pick-m{font-size:var(--t-xs);color:var(--muted);margin:8px 0 0;min-height:1em;}
.al-pick-m:empty{margin:0;min-height:0;}

/* ── 2 · THE STATUS BLOCK ──────────────────────────────────────────────────
   The one thing on the page that is answering a question rather than
   presenting a record: is it rahu kaal, what choghadiya is running, what hora.
   It is the reason to open this every morning, so it is above everything.

   THE TINT IS THE VERDICT. A left edge and a wash, keyed off the state — and
   the sentence says the same thing, so the colour is reinforcement and never
   the message. */

/* ⇄ 2026-08-13: THIS BLOCK IS RAISED NOW, AND IT DOES NOT GLOW. Both halves
   of that were decided rather than defaulted.

   RAISED, because it is the reason to open the page in the morning and
   everything below it is a record. `--rise-2` plus the lit top edge is the
   whole difference between a section and an object, and it costs no colour.

   NOT `.uv-aura`, AND THIS IS THE INTERESTING HALF. That class draws its halo
   on a `z-index:-1` pseudo-element which paints BEHIND its host's background
   and shows only where the blur bleeds past the host's edge. Two things are
   required of the host and this element gives neither: it must not clip, and
   it must not be a stacking context. This one clips, and it has to — the 3px
   verdict edge below is square-cornered and would poke out of the radius at
   both ends without `overflow:hidden`. Clipped, the halo is cut off at exactly
   the edge it exists to cross, so the class would cost a pseudo-element and an
   18px blur to paint nothing at all.

   AND THE TINT WOULD HAVE FOUGHT IT ANYWAY. The wash on this block IS the
   verdict — rose, green or amber by `.is-bad` / `.is-good` / `.is-warn` — and
   a second uncoloured glow around the one block whose whole job is to signal
   is a competing signal. So Prahar spends its aura elsewhere: Umbra's shadow
   diagram and Yuti's score, both of which sit on a plain `.sh-card` that
   clips nothing and both of which have one thing to make luminous. */
.al-now{position:relative;overflow:hidden;
  padding:18px 18px 16px 20px;margin:0 0 16px;
  background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--rise-2),var(--edge-lit);}
.al-now::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;
  background:var(--line2);}
.al-now.is-bad::before{background:var(--rose);}
.al-now.is-good::before{background:var(--green);}
.al-now.is-warn::before{background:var(--amber);}

/* The wash is declared as nothing first: a browser that cannot parse
   color-mix() keeps the plain panel and the block still reads.

   AND EACH OF THE THREE DECLARES WHAT SITS ON IT — the `carries:` convention
   from `I446`, and this block is the reason it exists. The tint is here and
   the four tones of text are declared thirty lines down on `.al-now-k`,
   `.al-now-k b`, `.al-now-v` and `.al-now-s`; no single rule names both, so
   until these comments were written the sheet's most deliberate colour
   decision resolved ZERO measured pairs. It passed the check by being
   invisible to it. Now check_css.py composites each tone against each of the
   three washes in all four palettes.

   The names are the selectors AS WRITTEN, which is why `.al-now-k b` is
   listed apart from `.al-now-k`, and why the eyebrow is named in its TINTED
   form below: the instrument matches exactly and never infers, because
   guessing which of two rules the words actually take is how a guard starts
   reporting on a pair the page never paints. Rename a class below and the
   check fails here rather than going quiet. */
/* carries: .al-now.is-bad .al-now-k, .al-now-k b, .al-now-v, .al-now-s */
.al-now.is-bad{background:var(--panel);
  background:color-mix(in srgb,var(--rose) 7%,var(--panel));}
/* carries: .al-now.is-good .al-now-k, .al-now-k b, .al-now-v, .al-now-s */
.al-now.is-good{background:var(--panel);
  background:color-mix(in srgb,var(--green) 7%,var(--panel));}
/* carries: .al-now.is-warn .al-now-k, .al-now-k b, .al-now-v, .al-now-s */
.al-now.is-warn{background:var(--panel);
  background:color-mix(in srgb,var(--amber) 7%,var(--panel));}

/* THE LIT EDGE IS A MASKED RING, NOT THE TWO-LAYER BACKGROUND, and this block
   is the one place on the network where that distinction is forced.

   `kit.css` draws its hairline by painting the panel to the padding box and
   the gradient to the border box, in one `background` shorthand. That needs
   layer one to be an OPAQUE FILL — it is what covers the gradient everywhere
   except the border ring. Here layer one would have to be the verdict wash,
   which means folding `--edge-grad` into the three `.is-*` rules above; and
   those three are the sheet's most carefully measured colour decision — four
   tones of text against three washes across four palettes. Their winning
   `background` has to stay a single flat colour check_css.py can read, or the
   measurement goes QUIET rather than wrong, which is the worse failure.

   So the ring is drawn on a pseudo-element instead: the gradient filling the
   whole box, masked down to a 1px frame by two stacked masks that cancel each
   other everywhere except the border. `mask-composite:exclude` is Safari 15.4,
   under the 16.4 floor, and the `-webkit-mask-composite:xor` line above it is
   the older WebKit spelling that iOS shipped first — both are written because
   the two syntaxes are not aliases and a device can honour either one.

   IT IS `::after`, NOT `::before`. `::before` is the 3px verdict edge and it
   is load-bearing. `overflow:hidden` on the parent clips this to the same
   rounded box, which is what makes the ring follow the radius.

   THE WASH IS UNTOUCHED. Nothing here paints a ground; the annotated rules
   above still own every measured pair on this block. */
.al-now::after{
  content:"";position:absolute;inset:0;
  border-radius:inherit;
  padding:1px;
  background:var(--edge-grad);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  pointer-events:none;}

.al-now-k{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);margin:0 0 8px;
  display:flex;justify-content:space-between;gap:12px;}
.al-now-k b{color:var(--muted);font-weight:400;font-variant-numeric:tabular-nums;}

/* THE EYEBROW STEPS UP WHEN THE BLOCK IS TINTED, and this rule exists because
   the annotations above went in and immediately found it. `--faint` on a dark
   `--panel` is already the tightest legitimate pair on the page; the 7% wash
   spends what is left of its margin, and the smallest text here landed at
   4.48:1 in Midnight and Abyss against green and amber — under the 4.5 floor,
   on the one block the reader opens this page for.

   THE TINT IS NOT WHAT MOVED, and that was the choice. Dropping the wash to 6%
   also clears the floor, at 4.56:1 — six hundredths of headroom, which is not
   a fix but a number waiting for the next palette edit to eat. `--muted` on
   the same 7% wash measures 6.38:1 at its worst. So the verdict wash keeps the
   weight it was designed with and the label gets a real margin instead.
   Untinted, the eyebrow stays `--faint`: that state is every day that is not
   today, it has no wash to fight, and it should stay quiet.

   It costs the tonal step between the label and its `b` timestamp in the
   tinted state, which is a small loss knowingly taken — they sit at opposite
   ends of a `space-between` row, one letterspaced uppercase and the other
   tabular numerals, so the tone was doing the least of the work separating
   them. Legibility of the smallest text outranks it. */
.al-now.is-bad .al-now-k,
.al-now.is-good .al-now-k,
.al-now.is-warn .al-now-k{color:var(--muted);}
.al-now-v{font-family:var(--serif);font-size:var(--t-2xl);line-height:1.2;
  color:var(--text);margin:0;}
.al-now-s{font-size:var(--t-sm);color:var(--muted);margin:8px 0 0;}

/* Two readouts under the verdict — the choghadiya and the hora you are in. */
/* Two readouts under the verdict, and they are WELLS rather than cards — the
   `.uv-card--well` treatment from kit.css, written out here because these are
   flex children with their own sizing. A thing sitting inside the block that
   contains it should read as recessed into it; giving them the same rise as
   their parent would make three objects out of one. */
.al-pair{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0;}
.al-pair div{flex:1 1 140px;padding:10px 12px;border-radius:8px;
  background:var(--ink);border:1px solid var(--line);
  box-shadow:inset 0 1px 3px rgb(0 0 0 / .22);}
.al-pair p{margin:0;}
.al-pair .k{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);}
.al-pair .v{font-size:var(--t-md);font-weight:600;color:var(--text);margin-top:3px;}
.al-pair .t{font-size:var(--t-xs);color:var(--muted);margin-top:2px;
  font-variant-numeric:tabular-nums;}

/* ── 3 · THE LIMB RAIL ─────────────────────────────────────────────────────
   The design idea this page is actually built on. `engine/panchang.js` returns
   `elapsed` as a percentage for four of the five limbs, and printing it is the
   thing no paper panchang can do: a tithi is not a label on a day, it is a
   24.8-hour interval that is part-way through, and "63% through, ends 13:59"
   is a different and better sentence than "upto 13:59". */

.al-limb{padding:14px 0;border-top:1px solid var(--line);}
.al-limb:first-of-type{padding-top:0;border-top:0;}
.al-limb-k{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);margin:0;}
.al-limb-n{font-family:var(--serif);font-size:var(--t-xl);line-height:1.25;
  color:var(--text);margin:3px 0 0;
  display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;}
.al-limb-x{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.1em;
  color:var(--muted);text-transform:uppercase;}

/* The rail. One element; the fill is a gradient stop at --f, so there is no
   inner div to keep in sync and no width animation to fight.

   ⇄ 2026-08-13: THE FILL RAMPS AND THE LEADING EDGE HAS A HEAD. Both come
   from kit.css's `.uv-rail`, and the reason to spend two declarations on them
   is that this rail is the design idea the whole page is built on — it is the
   thing a paper panchang cannot print.

   A FILL THAT STOPS DEAD READS AS A BAR CHART. A tithi that is 63% elapsed is
   not a quantity of 63; it is a thing in motion that has got this far. So the
   fill ramps from a dimmer `--moon-deep` at the start to full `--moon` at the
   head, and the head itself is a 3px dot with a soft halo sitting exactly on
   the stop. Two hard stops in one gradient still give the fill a crisp end —
   the ramp is inside the filled part, not a fade across the boundary, which
   would make the position ambiguous and the position is the whole point.

   The head is `::after` on a 3px-tall element, so it needs the rail to be a
   containing block; `position:relative` is what buys that and costs nothing.

   IT DOES NOT ANIMATE ON ITS OWN. `--f` is written once per render by
   almanac.js and the transition catches it when a day changes — response, not
   ambience, which is the rule kit.css is measured against. */
.al-rail{--f:0%;position:relative;height:3px;margin:10px 0 0;border-radius:2px;
  background:var(--line);
  background:linear-gradient(to right,
             color-mix(in srgb,var(--moon-deep) 62%,var(--line)) 0,
             var(--moon) var(--f),
             var(--line) var(--f),var(--line) 100%);}
.al-rail::after{content:"";position:absolute;top:50%;left:var(--f);
  width:3px;height:3px;margin:-1.5px 0 0 -1.5px;border-radius:999px;
  background:var(--moon);
  box-shadow:0 0 6px 1px color-mix(in srgb,var(--moon) 55%,transparent);}

.al-limb-t{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-family:var(--mono);font-size:var(--t-xs);color:var(--muted);
  font-variant-numeric:tabular-nums;margin:7px 0 0;}
.al-limb-t span:last-child{color:var(--text);text-align:right;}

/* A limb quoted at sunrise that has since ended. It stays at full strength,
   and that is a decision rather than an oversight: dimming the NAME would grey
   out exactly the thing the reader opened the page for — "what is today's
   nakshatra" is answered by the sunrise quote whatever the clock says. Only
   the rail and the timestamp step back, so the row stops claiming to be
   running without the answer receding with it.

   THIS COMMENT USED TO SAY "by evening four of the five have ended" AND THAT
   WAS NEVER MEASURED. Counted over all 365 days of 2026 at Delhi (I429): the
   mean is 2.49 of five at 18:00 and 3.03 at 22:00, and four or more have ended
   on 0% of days at noon, 14% at 18:00 and 30% at 22:00. The shape matters more
   than the mean — the vara can NEVER end because it runs sunrise to sunrise,
   the karana has ended on 100% of days by 20:00, and tithi, nakshatra and yoga
   are 57–60% each. So it is one limb that is always stale after dark and three
   that are coin-flips, which is a different design problem from "four of five"
   and is why the row below exists. */
.al-limb.is-over .al-limb-t span:last-child{color:var(--muted);}
.al-limb.is-over .al-rail{background:var(--line2);
  background:linear-gradient(to right,var(--line2) 0,var(--line2) 100%);}
/* AND THE HEAD GOES WITH IT. A limb that has ended has no leading edge — a
   glowing cap parked at the right-hand end of a spent rail would say the
   opposite of what the greyed-out fill says. This is the one line that keeps
   the two halves of the "is over" state telling the same story. */
.al-limb.is-over .al-rail::after{display:none;}

/* WHAT IS RUNNING NOW, beside the sunrise quote and never instead of it —
   I429, ruled by applying I328's answer for the two month names to the two
   instants. Rendered only when the sunrise limb has actually ended, and only
   on today's view. The label is a word, not a colour: `now` is spelled out for
   the same reason the choghadiya prints "avoid" beside its tint. No background
   is declared here, so the sheet's `carries:` convention (I446/I472) does not
   apply — this is text on the card ground the palette matrix already covers. */
.al-limb-now{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  font-family:var(--mono);font-size:var(--t-xs);color:var(--text);
  font-variant-numeric:tabular-nums;margin:6px 0 0;}
.al-limb-now span{letter-spacing:.2em;text-transform:uppercase;color:var(--faint);}
.al-limb-now em{font-style:normal;color:var(--muted);}

/* ── 4 · THE DAY BAND ──────────────────────────────────────────────────────
   Sunrise to sunset as a line, with the marked windows drawn on it in
   proportion. Four labels do not fit on a 340-pixel phone and never will, so
   the band carries no text at all and the exact minutes live in the table
   below it. The band answers "am I in it"; the table answers "when exactly". */

/* NO `carries:` ON THE MARKS BELOW, AND THAT IS THE DECISION, not the thing
   nobody got round to. The band holds no text, so the three marks have no
   foreground to be measured against and annotating them would be a claim the
   guard then has to answer — `I446` names `.al-mark` as the exact case that
   would make the check cry wolf, and a guard that cries wolf gets tuned
   lenient, which is the one direction it must never move. The instrument
   counts these as unannotated grounds and prints the count; silence with a
   number on it is the intended state here.

   IF A LABEL IS EVER PUT ON A MARK it needs BOTH annotations, not one. These
   fills are color-mix()es against `transparent`, and a mix against transparent
   is not a colour until something is under it — so `over: .al-band` has to say
   what composites it before any `carries:` can be resolved. check_css.py
   refuses a `carries:` on a translucent ground rather than measuring the
   half-colour, which is why writing only the obvious half would fail. */
/* ⇄ 2026-08-13: THE BAND IS A TROUGH NOW. An inset shadow at the top edge is
   the exact inverse of the lit edge every raised thing on the page carries, so
   the band reads as cut into the card rather than laid on it — which is what a
   day is: an interval the marked windows are carved out of. Two declarations,
   no colour, and it makes the marks look like they are IN something. */
.al-band{position:relative;height:26px;border-radius:6px;overflow:hidden;
  background:var(--panel2);border:1px solid var(--line);margin:2px 0 0;
  box-shadow:inset 0 1px 3px rgb(0 0 0 / .26);}
.al-mark{position:absolute;top:0;bottom:0;}
.al-mark.is-bad{background:var(--rose);
  background:color-mix(in srgb,var(--rose) 62%,transparent);}
.al-mark.is-warn{background:var(--amber);
  background:color-mix(in srgb,var(--amber) 34%,transparent);}
.al-mark.is-good{background:var(--green);
  background:color-mix(in srgb,var(--green) 48%,transparent);}

/* The only thing on the band that moves. It is --moon rather than a warm tone
   because it must stay legible on top of any of the three marks. */
/* ⇄ 2026-08-13: AND IT GLOWS, by the same six pixels the limb rail's head
   does. The 1px ink ring is what keeps it legible on top of a rose or green
   mark; the halo outside that ring is what makes the eye find it first on a
   band with four windows drawn on it. Same recipe as `.uv-rail`'s cap, so the
   two "you are here" marks on the page are recognisably one idea. */
.al-nowline{position:absolute;top:-2px;bottom:-2px;width:2px;
  background:var(--moon);
  box-shadow:0 0 0 1px var(--ink),
             0 0 7px 1px color-mix(in srgb,var(--moon) 55%,transparent);}

.al-bandends{display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:var(--t-xs);color:var(--muted);
  font-variant-numeric:tabular-nums;margin:6px 0 0;}

/* The table under the band. Not a <table>: three columns of two-to-four
   characters wrap into an unreadable mess on a phone, and a definition-style
   row does not. */
.al-rows{margin:14px 0 0;}
.al-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:9px 0;border-top:1px solid var(--line);}
.al-row:first-child{border-top:0;padding-top:0;}
.al-row .n{font-size:var(--t-sm);color:var(--text);}
.al-row .n small{display:block;font-size:var(--t-xs);color:var(--faint);
  font-family:var(--sans);margin-top:2px;}
.al-row .t{font-family:var(--mono);font-size:var(--t-sm);color:var(--text);
  font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;}
.al-row.is-now .n{font-weight:600;}
.al-row.is-now .t{color:var(--moon);}
.al-row .t em{font-style:normal;color:var(--faint);}

/* ── 5 · THE PERIOD STRIP ──────────────────────────────────────────────────
   Choghadiya and hora. Eight and twenty-four cells; auto-fill means the same
   markup is three columns on a phone and six on a laptop without a media
   query and without either one being the compromise. */

/* ⇄ 2026-08-13: THE CELLS LIFT ON HOVER AND THE LIFT IS THE LINE, NOT A
   SHADOW. `.uv-draw` in kit.css is the technique — two 1px pseudo-elements
   scaled from zero along the top and left edges, so the frame appears to be
   drawn on. It is used here rather than a shadow for the reason that class
   records: a shadow on hover in a 24-cell grid makes the whole grid twitch as
   the pointer crosses it, and a hora strip is 24 cells.

   The classes are not applied in the markup because these cells are built by
   `almanac.js` in a string; the two rules are written out against `.al-cell`
   directly, which is the same three declarations without a class to remember.
   `--dur-sweep` and `--ease-out` come from kit.css, so this shares a clock
   with every other borrowed control on the network rather than picking its
   own. */
.al-strip{display:grid;gap:6px;margin:2px 0 0;
  grid-template-columns:repeat(auto-fill,minmax(96px,1fr));}
.al-cell{position:relative;padding:9px 10px;border-radius:8px;
  background:var(--panel2);border:1px solid var(--line);
  overflow:hidden;
  transition:border-color var(--dur-move) var(--ease-out);}
.al-cell::before{content:"";position:absolute;inset:0 0 auto 0;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);}
.al-cell:hover::before{transform:scaleX(1);opacity:.6;}
.al-cell-n{font-size:var(--t-sm);font-weight:600;color:var(--text);margin:0;}
.al-cell-t{font-family:var(--mono);font-size:var(--t-xs);color:var(--muted);
  font-variant-numeric:tabular-nums;margin:3px 0 0;}
.al-cell-t span{color:var(--faint);}
.al-cell-q{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.12em;
  text-transform:uppercase;margin:5px 0 0;}

.al-cell.q-good{border-color:var(--line);
  border-color:color-mix(in srgb,var(--green) 38%,var(--line));}
.al-cell.q-good .al-cell-q{color:var(--green);}
.al-cell.q-bad{border-color:var(--line);
  border-color:color-mix(in srgb,var(--rose) 38%,var(--line));}
.al-cell.q-bad .al-cell-q{color:var(--rose);}
.al-cell.q-neutral .al-cell-q{color:var(--faint);}

/* Running now: a ring and a word, in the moon tone, so it reads the same in
   every skin and does not collide with the quality hue it sits beside. */
/* ⇄ 2026-08-13: THE RUNNING CELL NOW CARRIES AN OUTWARD HALO AS WELL AS THE
   RING. Three things on this page mean "you are here" — the rail's head, the
   band's nowline and this cell — and until now the third one was the only one
   marked by an edge alone. Same halo recipe as the other two, at the same
   tone, so a reader who has learned what the glow means on the band reads it
   here for free. The ring stays: on Plain, where `--rise-*` is `none` and the
   look is carried by edges, the halo is the part that goes. */
.al-cell.is-now{border-color:var(--moon-deep);
  box-shadow:inset 0 0 0 1px var(--moon-deep),
             0 0 12px -2px color-mix(in srgb,var(--moon) 60%,transparent);}
:root[data-skin="7"] .al-cell.is-now{box-shadow:inset 0 0 0 1px var(--moon-deep);}
.al-cell-live{position:absolute;top:8px;right:9px;
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--moon);margin:0;}
.al-cell.is-now .al-cell-n{padding-right:34px;}

/* Hora has no quality, so its cells are quieter by one step. */
.al-strip.is-hora .al-cell{background:var(--ink);}

/* ── 6 · SMALL THINGS ──────────────────────────────────────────────────────*/

/* The two-up fact grid: sunrise/sunset, moonrise/moonset, day and night
   length. Numbers are tabular so the columns line up down the page. */
.al-facts{display:grid;gap:10px;margin:2px 0 0;
  grid-template-columns:repeat(auto-fit,minmax(132px,1fr));}
.al-fact{padding:11px 12px;border-radius:8px;
  background:var(--panel2);border:1px solid var(--line);}
.al-fact p{margin:0;}
.al-fact .k{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);}
.al-fact .v{font-family:var(--mono);font-size:var(--t-lg);color:var(--text);
  font-variant-numeric:tabular-nums;margin-top:4px;}

/* The day stepper. Yesterday / today / tomorrow, because a panchang is
   consulted forward as often as it is read today. */
.al-days{display:flex;align-items:center;gap:8px;margin:0 0 14px;}
.al-days .sh-btn{padding:7px 11px;}
.al-days-n{flex:1;text-align:center;font-family:var(--mono);
  font-size:var(--t-xs);letter-spacing:.1em;color:var(--muted);
  font-variant-numeric:tabular-nums;}

/* A note the engine itself raised — a polar day, no moonrise, a suppressed
   abhijit. It comes from the computation, so it is styled as part of it. */
.al-caveat{font-size:var(--t-sm);line-height:1.6;color:var(--muted);
  padding:11px 13px;margin:12px 0 0;border-radius:8px;
  border:1px solid var(--line);background:var(--panel2);}

/* Everything computed starts blank rather than showing a placeholder number
   that is about to be replaced by a different one. */
[data-pending]{opacity:.4;}

.al-quiet{font-size:var(--t-xs);color:var(--faint);margin:10px 0 0;line-height:1.7;}
.al-quiet a{color:var(--muted);}

/* <details> for hora: twenty-four rows is a wall on a phone, and it is the
   least-consulted thing on the page. Open, it is identical to any other
   strip; closed, it is one line — and it is in the document either way, which
   a tab or a fetch-on-click would not be. */
.al-more{border-top:1px solid var(--line);margin-top:14px;padding-top:12px;}
.al-more summary{cursor:pointer;font-family:var(--mono);font-size:var(--t-xs);
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  list-style:none;display:flex;justify-content:space-between;gap:10px;}
.al-more summary::-webkit-details-marker{display:none;}
.al-more summary::after{content:"+";color:var(--faint);}
.al-more[open] summary::after{content:"–";}
.al-more summary:hover{color:var(--text);}
.al-more > :not(summary){margin-top:12px;}

/* ── 7 · THE MONTH ─────────────────────────────────────────────────────────
   Everything below belongs to /calendar. The arithmetic is month.js and the
   markup is almanac.js §5b; this is the last third.

   THE COLOUR RULE THIS SECTION IS UNDER. Two lunar month systems have to be
   told apart, and hue cannot be the thing that does it — the same rule the
   choghadiya strip is held to two sections up, and for the same reason. So
   the two band rows are separated by their own LABELS, not by colour, and
   within a row adjacent months alternate in TONE rather than in hue, so a
   boundary is visible without any hue being read at all. The only hue in the
   section is the amber of an adhika month, which also carries the word
   "Adhika" and a hatch. */

/* ── the two month bands ──────────────────────────────────────────────────
   The picture the calendar exists for: amanta and purnimanta drawn against
   the same axis of dates, a fortnight apart. */

.al-mbands{margin:2px 0 0;}
.al-mband-k{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);margin:12px 0 5px;}
.al-mband-k:first-child{margin-top:0;}
.al-mband-k span{letter-spacing:.04em;text-transform:none;
  font-family:var(--sans);color:var(--muted);}

.al-mband-row{position:relative;height:30px;border-radius:6px;overflow:hidden;
  background:var(--ink);border:1px solid var(--line);}
.al-mband{position:absolute;top:0;bottom:0;display:flex;align-items:center;
  justify-content:center;overflow:hidden;
  font-family:var(--sans);font-size:var(--t-xs);font-weight:600;
  color:var(--text);
  background:color-mix(in srgb,var(--moon-deep) 16%,var(--panel2));
  border-left:1px solid var(--line2);}
.al-mband:first-child{border-left:0;}
/* Alternating tone, not hue: this is what makes a boundary visible. */
.al-mband:nth-child(even){
  background:color-mix(in srgb,var(--moon-deep) 32%,var(--panel2));}
/* An intercalary month is the one thing here worth a hue, and it says the
   word as well — the hatch carries it for a reader who cannot see the tint. */
.al-mband.is-adhika{
  background:repeating-linear-gradient(135deg,
    color-mix(in srgb,var(--amber) 26%,var(--panel2)) 0 6px,
    color-mix(in srgb,var(--amber) 13%,var(--panel2)) 6px 12px);}

/* ── the grid ─────────────────────────────────────────────────────────────
   Seven columns, Sunday first because the vara is: engine/panchang.js indexes
   weekday 0 as Ravivara and states the rahu kaal, gulika and yamaganda tables
   from Sunday, so a Monday-first grid would put the column those tables count
   from at the far right. */

.al-cal{padding-left:10px;padding-right:10px;}
.al-ghead,.al-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.al-gh{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);text-align:center;margin:0 0 4px;}

.al-gc{display:flex;flex-direction:column;align-items:center;gap:2px;
  min-height:66px;padding:6px 2px 7px;cursor:pointer;
  border-radius:8px;border:1px solid transparent;
  background:var(--panel2);color:var(--text);
  font-family:var(--sans);text-align:center;overflow:hidden;}
.al-gc:hover{border-color:var(--line2);}

.al-gc-d{font-family:var(--mono);font-size:var(--t-sm);font-weight:600;
  font-variant-numeric:tabular-nums;line-height:1.1;}
/* THE MOON INVERTS WITH THE SKIN AND THAT IS DELIBERATE, not an oversight.
   --moon is a pale blue in Midnight and a deep one in Porcelain, because the
   palettes are inverses; so a full Moon is a bright disc at night and a filled
   dark one on paper. Both are the right convention for their medium — a
   printed panchang has drawn a full Moon as a filled circle for as long as
   there have been printed panchangs — and neither is ever the only signal,
   because the tithi is written beside it: S15 is a full Moon and K15 is a new
   one whichever way round the ink went.

   The outline is what makes that safe. Stroking the whole disc means the
   reader is judging HOW MUCH OF A KNOWN CIRCLE IS FILLED rather than guessing
   where its edge is, which is the one thing that genuinely breaks when the
   unlit fill sits a few points off the cell behind it. */
.al-moon{display:block;flex:none;overflow:visible;}
.al-moon-dark{fill:var(--line2);stroke:var(--moon-deep);stroke-width:.07;}
.al-moon-lit{fill:var(--moon);}

/* The paksha is a letter and a tone, never a tone alone. */
.al-gc-t{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.04em;
  color:var(--muted);font-variant-numeric:tabular-nums;line-height:1.2;}
.al-gc-t em{font-style:normal;font-weight:600;margin-right:1px;}
.al-gc.is-shukla .al-gc-t em{color:var(--moon);}
.al-gc.is-krishna .al-gc-t em{color:var(--faint);}

/* Built up rather than cut down: the tithi's NAME and then the nakshatra
   arrive as the grid gets room for them, and neither is ever truncated —
   a clipped "Uttara Bha…" teaches less than nothing. Both are in the button's
   aria-label at every width, and both are in the day panel below. */
.al-gc-n,.al-gc-k{display:none;font-size:var(--t-xs);line-height:1.25;}
.al-gc-n{color:var(--muted);}
.al-gc-k{color:var(--faint);}
@media (min-width:480px){
  .al-gc{min-height:80px;}
  .al-gc-n{display:block;}
}
@media (min-width:640px){
  .al-gc{min-height:104px;padding:8px 4px 9px;}
  .al-gc-k{display:block;}
}

/* ── THE FESTIVAL IN THE CELL ────────────────────────────────────────────────
   THE NAME IS THE MARKER, and that is the one real design decision here.
   Every calendar in this category draws a coloured icon in the cell and puts
   the legend somewhere else, so the cell tells you that something happens and
   a second lookup tells you what. Below 480px there is genuinely no room for
   a word, and only there does a dot carry it.

   A vrat and a festival are drawn differently because they are different
   things: Ekadashi every fortnight is a rhythm, Diwali is an event, and
   giving them the same weight is what makes Diwali hard to find in a grid
   that has both. The vrat is set in the muted ink the tithi name uses; the
   festival gets the moon colour and the weight. */
.al-gc-f{display:none;flex-direction:column;gap:1px;width:100%;
  margin-top:2px;padding:0 2px;}
.al-gc-f em{font-style:normal;font-size:var(--t-xs);line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.al-gc-f em.is-major{color:var(--moon);font-weight:600;}
.al-gc-f em.is-vrat{color:var(--muted);}
.al-gc-f em.is-more{color:var(--faint);}

/* The narrow fallback: one dot, and it is filled only when something more
   than a monthly vrat is on the day — so a scan of the month still finds the
   festivals rather than finding every Ekadashi. */
.al-gc-dot{width:4px;height:4px;border-radius:50%;margin-top:3px;
  background:var(--faint);}
.al-gc-dot.is-major{background:var(--moon);}
@media (min-width:640px){
  .al-gc-f{display:flex;}
  .al-gc-dot{display:none;}
}

/* ── THE MONTH'S FESTIVAL LIST ───────────────────────────────────────────── */
.al-fests{list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:2px;}
.al-fest{display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--line);}
.al-fest:first-child{border-top:0;}
.al-fest .d{flex:0 0 84px;font-family:var(--mono);font-size:var(--t-xs);
  color:var(--muted);padding-top:2px;}
.al-fest .b{flex:1 1 auto;min-width:0;}
.al-fest .n{font-size:var(--t-md);color:var(--text);font-weight:600;}
.al-fest .n small{display:block;font-size:var(--t-xs);font-weight:400;
  color:var(--faint);margin-top:1px;}
/* The rule that dated it — the thing no competitor prints, so it is set to be
   read rather than tucked away. Monospace because it is a citation. */
.al-fest .r{font-family:var(--mono);font-size:var(--t-xs);color:var(--moon);
  margin-top:3px;}
.al-fest .r em{font-style:normal;color:var(--faint);margin-left:6px;}
.al-fest .w{font-size:var(--t-sm);color:var(--muted);margin-top:4px;
  max-width:var(--measure);}
/* The two states worth explaining rather than looking confident about. */
.al-fest .x{font-size:var(--t-xs);color:var(--amber);margin-top:4px;}
.al-fest .v{font-size:var(--t-xs);color:var(--faint);margin-top:4px;
  padding-left:10px;border-left:1px solid var(--line2);}
/* A vrat recedes in the list the same way it recedes in the grid. */
.al-fest.is-vrat .n{font-weight:400;color:var(--muted);font-size:var(--t-sm);}
.al-fest.is-vrat .r{color:var(--faint);}

/* ── THE MOMENT DIAL ──────────────────────────────────────────────────────
   One Hindu day drawn end to end — this sunrise to the next — with the tithi
   that satisfied the rule and the moment that decided the date on top of it.
   Stretched to the column width rather than kept square, because the reading
   is POSITION ALONG THE DAY and horizontal resolution is the only resolution
   that carries it. */
.al-dial{display:block;width:100%;height:24px;margin-top:8px;overflow:visible;}
/* The night is a hairline and the day is the same hairline lit — one stroke
   weight, so sunset reads as a change in value rather than a change in shape. */
.al-dial-night{fill:var(--line2);}
.al-dial-day{fill:var(--moon-deep);}
/* The tithi is the object being measured, so it gets the body weight. */
.al-dial-t{fill:var(--moon-deep);opacity:.55;}
/* The moment is the answer, so it is the only thing at full strength. */
.al-dial-m{fill:var(--moon);stroke:var(--moon);stroke-width:1.5;}
/* A tithi that overruns the frame is cut, not scaled — the cap says so. */
.al-dial-x{stroke:var(--moon);stroke-width:1.5;opacity:.5;}
.al-dial-tick{stroke:var(--faint);stroke-width:1;}

.al-dialcap{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:3px;
  font-family:var(--mono);font-size:var(--t-xs);color:var(--faint);}
.al-dialcap em{font-style:normal;color:var(--moon);}

/* ── WHAT IS NOT DATED, AND WHY ──────────────────────────────────────────── */
.al-deferred{margin-top:16px;border-top:1px solid var(--line);padding-top:12px;}
.al-deferred summary{font-size:var(--t-sm);color:var(--muted);cursor:pointer;}
.al-deferred summary:hover{color:var(--text);}
.al-defer{margin-top:12px;padding-left:12px;border-left:2px solid var(--line2);}
.al-defer .n{font-size:var(--t-sm);color:var(--text);font-weight:600;}
.al-defer .n small{display:block;font-size:var(--t-xs);font-weight:400;
  color:var(--faint);}
.al-defer .r{font-family:var(--mono);font-size:var(--t-xs);color:var(--faint);
  margin-top:2px;}
.al-defer .w{font-size:var(--t-sm);color:var(--muted);margin-top:6px;
  max-width:var(--measure);}
.al-defer .p{font-family:var(--mono);font-size:var(--t-xs);color:var(--faint);
  margin-top:4px;}

/* A day outside the month is computed and shown, not blanked — it costs four
   percent of the sweep and it is the day a reader is most often looking for.
   Muted, so the month it belongs to is still obvious. */
.al-gc.is-outside{background:transparent;}
.al-gc.is-outside .al-gc-d{color:var(--faint);font-weight:400;}
.al-gc.is-outside .al-gc-n,.al-gc.is-outside .al-gc-k,
.al-gc.is-outside .al-gc-t{color:var(--faint);opacity:.75;}
.al-gc.is-outside .al-moon-lit{fill:var(--moon-deep);}

/* A full or new Moon is where both bands change, so it is the one cell state
   worth marking louder than selection. A rule above the date, not a hue. */
.al-gc.is-edge{box-shadow:inset 0 2px 0 -1px var(--moon-deep);}

.al-gc.is-today{border-color:var(--moon-deep);}
.al-gc.is-today .al-gc-d{color:var(--moon);}
.al-gc.is-sel{border-color:var(--moon-deep);
  background:color-mix(in srgb,var(--moon-deep) 20%,var(--panel2));}
.al-gc.is-sel .al-gc-n,.al-gc.is-sel .al-gc-t{color:var(--text);}

.al-legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin:12px 0 0;
  font-size:var(--t-xs);color:var(--faint);line-height:1.6;}
.al-legend b{color:var(--muted);font-weight:600;}

/* ── the two names, in the day panel ──────────────────────────────────────
   Side by side and the same size, because I328 ruled BOTH and a layout that
   makes one of them the subtitle of the other has quietly picked one. */
.al-masa{display:grid;gap:10px;margin:0 0 14px;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));}
.al-masa div{padding:10px 12px;border-radius:8px;
  background:var(--panel2);border:1px solid var(--line);}
.al-masa p{margin:0;}
.al-masa .k{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);}
.al-masa .v{font-family:var(--serif);font-size:var(--t-lg);color:var(--text);
  margin-top:3px;line-height:1.2;}
.al-masa .t{font-size:var(--t-xs);color:var(--muted);margin-top:3px;}

.al-limbs{margin-top:14px;border-top:1px solid var(--line);padding-top:4px;}


/* ── 7 · THE KUNDLI ─────────────────────────────────────────────────────────
   Blackbox I1172. The chart itself is inline SVG rather than CSS, and it is
   the same argument §5b's moon glyph makes: a diamond cut by its diagonals is
   not a proportion of a line, so the reasoning that keeps the day band and the
   limb rail in CSS does not reach it. It still inherits the palette — every
   stroke and fill below is a shell token, `currentColor` and `var()` both
   cross into inline SVG — so it costs nothing in the skin-safety that
   argument was protecting, and check_css.py measures this block like any
   other.

   NOT ONE HARD-CODED COLOUR HERE EITHER. Same rule as the whole sheet.       */

/* ── the form ── */
.ku-form{display:flex;flex-direction:column;gap:14px;}
.ku-row2{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
.ku-field{display:flex;flex-direction:column;gap:6px;position:relative;}
.ku-field label{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);}
.ku-opt{text-transform:none;letter-spacing:.02em;color:var(--faint);
  font-family:var(--sans);}
.ku-field input{width:100%;font-family:var(--sans);font-size:var(--t-md);
  padding:10px 12px;color:var(--text);background:var(--ink);
  border:1px solid var(--line2);border-radius:var(--radius);}
.ku-field input:disabled{opacity:.45;}
.ku-field input::placeholder{color:var(--faint);}

/* Not a bare checkbox in a row of stacked labels: the box and its sentence
   are one target, because on a phone the sentence is what people tap. */
.ku-check{display:flex;align-items:center;gap:9px;cursor:pointer;
  font-family:var(--sans);font-size:var(--t-sm);color:var(--muted);
  text-transform:none;letter-spacing:normal;}
.ku-check input{width:auto;accent-color:var(--moon-deep);}

.ku-hits{display:flex;flex-direction:column;gap:1px;}
.ku-hits:empty{display:none;}
.ku-hit{display:flex;align-items:baseline;gap:8px;width:100%;text-align:left;
  cursor:pointer;padding:9px 10px;border-radius:8px;
  background:var(--panel2);border:1px solid transparent;color:var(--text);
  font-family:var(--sans);font-size:var(--t-sm);}
.ku-hit:hover,.ku-hit:focus-visible{border-color:var(--moon-deep);}
.ku-hit b{font-weight:600;}
.ku-hit span{font-size:var(--t-xs);color:var(--faint);}

.ku-picked{margin:0;font-family:var(--mono);font-size:var(--t-xs);
  letter-spacing:.04em;color:var(--faint);}
.ku-picked:empty{display:none;}
.ku-actions{display:flex;flex-wrap:wrap;gap:8px;}
.ku-err{margin:0;font-size:var(--t-sm);color:var(--rose);}
.ku-err:empty{display:none;}

/* ── the chart ── */
.ku-when{margin:0 0 14px;font-family:var(--mono);font-size:var(--t-xs);
  letter-spacing:.06em;color:var(--muted);}

/* TWO CORRECT ANSWERS, SHOWN AS TWO EQUAL BUTTONS — the same layout rule the
   two month names get above, for the same reason: making one of them the
   default-looking one has quietly picked it. */
.ku-styles{display:flex;gap:8px;margin:0 0 14px;}
.ku-styles .sh-btn.is-on{background:var(--moon-deep);color:var(--ink);
  border-color:var(--moon-deep);}

.ku-chartwrap{display:flex;justify-content:center;}
.ku-chart{width:100%;max-width:340px;height:auto;display:block;}
.ku-frame{fill:none;stroke:var(--line2);stroke-width:1.2;}
/* The region polygons carry no paint. They are in the tree so each group is a
   real shape rather than three loose <text> nodes, and so a later pass that
   does want a tappable house has something to bind to — nothing on this page
   is tappable today, because a free chart with no house sheet behind it would
   be twelve targets that do nothing. */
.ku-chart polygon.ku-region{fill:none;stroke:none;}

/* NO font-size HERE, ON EITHER OF THESE. kundli.js computes a size per line
   from the room that line actually has, and a CSS declaration beats a
   presentation attribute — so a font-size in this block would silently undo
   the whole fitting pass and put the number back outside the triangle. */
.ku-n{fill:var(--faint);font-family:var(--mono);
  text-anchor:middle;letter-spacing:.04em;}
.ku-hn{fill:var(--moon-deep);}
.ku-p{fill:var(--text);font-family:var(--sans);text-anchor:middle;
  font-weight:600;}
.ku-p.is-lagna{fill:var(--moon);}
.ku-r{fill:var(--amber);color:var(--amber);}

.ku-legend{margin-top:12px;}

/* ── the tables ── */
.ku-table{width:100%;border-collapse:collapse;font-size:var(--t-sm);
  font-family:var(--sans);}
.ku-table caption{caption-side:bottom;margin-top:10px;text-align:left;
  font-size:var(--t-xs);color:var(--faint);line-height:1.6;}
.ku-table th,.ku-table td{padding:7px 8px;text-align:left;
  border-bottom:1px solid var(--line);}
.ku-table thead th{font-family:var(--mono);font-size:var(--t-xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
  font-weight:400;white-space:nowrap;}
.ku-table tbody th{font-weight:600;color:var(--text);white-space:nowrap;}
.ku-table td{color:var(--muted);}
.ku-num{font-family:var(--mono);font-size:var(--t-xs);white-space:nowrap;
  color:var(--muted);}
.ku-pada{color:var(--faint);}
.ku-empty{color:var(--faint);}
.ku-table tr.ku-lagna th,.ku-table tr.ku-lagna td{color:var(--moon);}

/* Six columns of arcseconds do not fit a 375-pixel phone and never will, so
   the table scrolls inside its own card rather than stretching the page. */
.ku-out,.sh-card .ku-table{max-width:100%;}
.sh-card:has(> .ku-table){overflow-x:auto;}

/* ── the dashas ── */
.ku-now{padding:12px 14px;margin:0 0 14px;border-radius:var(--radius);
  background:var(--panel2);border:1px solid var(--moon-deep);}
.ku-now-k{margin:0;font-family:var(--mono);font-size:var(--t-xs);
  letter-spacing:.2em;text-transform:uppercase;color:var(--faint);}
.ku-now-v{margin:4px 0 0;font-family:var(--serif);font-size:var(--t-lg);
  color:var(--text);line-height:1.3;}
.ku-now-v em{font-family:var(--mono);font-size:var(--t-xs);font-style:normal;
  letter-spacing:.1em;color:var(--faint);}
.ku-now-t{margin:6px 0 0;font-size:var(--t-xs);color:var(--muted);line-height:1.6;}

.ku-mahas{display:flex;flex-direction:column;gap:1px;}
.ku-maha{border:1px solid var(--line);border-radius:8px;background:var(--panel2);}
.ku-maha.is-now{border-color:var(--moon-deep);}
.ku-maha summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;
  padding:10px 12px;cursor:pointer;font-family:var(--sans);}
.ku-maha-l{font-size:var(--t-md);font-weight:600;color:var(--text);}
.ku-maha-y{font-family:var(--mono);font-size:var(--t-xs);color:var(--faint);}
.ku-maha-d{font-family:var(--mono);font-size:var(--t-xs);color:var(--muted);
  margin-left:auto;}
/* A word, not only a border — the same rule the choghadiya cells are held to
   two hundred lines up, and for the same reader. */
.ku-maha-n{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--moon);}
.ku-maha .ku-table{padding:0 12px 12px;}
.ku-maha .ku-table tr.is-now th,.ku-maha .ku-table tr.is-now td{color:var(--moon);}


/* ── 8 · VIEW OPTIONS ───────────────────────────────────────────────────────
   Blackbox I1174, Drik audit #2. Collapsed by default and quiet when open:
   this is a control panel on a page whose argument is that the answer comes
   first, so it is styled to be findable and not to compete. */
.al-view{margin:0 0 18px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel);}
.al-view summary{padding:9px 12px;cursor:pointer;font-family:var(--mono);
  font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);}
.al-view[open] summary{border-bottom:1px solid var(--line);}
.al-view-b{padding:12px;}
.al-view-b + .al-view-b{border-top:1px solid var(--line);}
.al-view-k{margin:0 0 8px;font-family:var(--mono);font-size:var(--t-xs);
  letter-spacing:.2em;text-transform:uppercase;color:var(--faint);}
.al-view-h{margin:8px 0 0;}

.al-seg{display:flex;flex-wrap:wrap;gap:6px;}
.al-seg .sh-btn.is-on{background:var(--moon-deep);color:var(--ink);
  border-color:var(--moon-deep);}

/* A chip is a checkbox and its word in one target — the same reason the
   kundli form's "I don't know the time" is one label rather than two. The box
   itself stays in the tree and stays focusable: this is a filter, and a filter
   a keyboard cannot reach is a filter half the readers do not have. */
.al-chips{display:flex;flex-wrap:wrap;gap:6px;}
.al-chip{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  padding:7px 11px;border-radius:999px;border:1px solid var(--line2);
  background:var(--panel2);color:var(--muted);
  font-family:var(--sans);font-size:var(--t-xs);}
.al-chip input{accent-color:var(--moon-deep);margin:0;}
.al-chip.is-on{border-color:var(--moon-deep);color:var(--text);}
.al-chip:focus-within{border-color:var(--moon);}


/* ── 9 · THE CALENDAR'S OTHER TWO SHAPES ────────────────────────────────────
   Blackbox I1181, Drik audit #1. The jump, the layout toggle, the list, and
   the year for paper.                                                       */

.al-calbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  margin:0 0 14px;}
.al-jump{display:flex;align-items:center;gap:8px;}
.al-jump label{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);}
.al-jump input{font-family:var(--sans);font-size:var(--t-sm);padding:7px 10px;
  color:var(--text);background:var(--ink);
  border:1px solid var(--line2);border-radius:var(--radius);}

/* ── the list layout ──
   One row per day, and every field spelled out — which is the layout's whole
   reason to exist, so nothing here truncates. */
.al-list{display:flex;flex-direction:column;gap:2px;}
.al-lrow{display:grid;align-items:center;gap:10px;width:100%;text-align:left;
  grid-template-columns:52px 22px minmax(0,1.1fr) minmax(0,1fr);
  padding:8px 10px;cursor:pointer;border-radius:8px;
  background:var(--panel2);border:1px solid transparent;color:var(--text);
  font-family:var(--sans);font-size:var(--t-sm);}
.al-lrow.is-krishna{background:var(--panel);}
.al-lr-d{display:flex;align-items:baseline;gap:5px;}
.al-lr-d b{font-size:var(--t-md);font-weight:600;}
.al-lr-d em{font-family:var(--mono);font-size:var(--t-xs);font-style:normal;
  color:var(--faint);}
.al-lr-t em{display:block;font-family:var(--mono);font-size:var(--t-xs);
  font-style:normal;letter-spacing:.1em;color:var(--faint);}
.al-lr-n{color:var(--muted);}
.al-lrow.is-today{border-color:var(--moon-deep);}
.al-lrow.is-today .al-lr-d b{color:var(--moon);}
.al-lrow.is-sel{border-color:var(--moon-deep);
  background:color-mix(in srgb,var(--moon-deep) 20%,var(--panel2));}
.al-lrow.is-edge{box-shadow:inset 2px 0 0 -0px var(--moon-deep);}
@media (max-width:520px){
  .al-lrow{grid-template-columns:46px 20px minmax(0,1fr);}
  .al-lr-n{grid-column:3;font-size:var(--t-xs);}
}

/* ── the year, for paper ────────────────────────────────────────────────────
   Hidden on screen and unhidden by the print block below. It is styled in
   tokens like everything else here — the page is switched to the Porcelain
   palette before the dialog opens rather than this sheet hard-coding black on
   white, which is the one rule this file has never broken. */
 /* PRINT-ONLY BY CLASS, NOT BY THE `hidden` ATTRIBUTE — and the first version
    got this wrong in a way that was obvious the moment it ran. `hidden` was
    the only thing keeping the sheet off the screen, so unhiding it to print
    dumped twelve month tables onto the page the reader was still reading.
    A role this specific belongs in the stylesheet that knows about print. */
.al-year{display:none;margin-top:28px;}
.al-year-h h2{margin:0 0 4px;}
.al-year-h p{margin:0 0 14px;font-size:var(--t-xs);color:var(--muted);
  line-height:1.6;max-width:var(--measure);}
.al-year-g{display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));}
.al-pm h3{margin:0;font-size:var(--t-sm);}
.al-pm-masa{margin:1px 0 5px;font-family:var(--mono);font-size:var(--t-xs);
  letter-spacing:.06em;color:var(--faint);}
.al-pm table{width:100%;border-collapse:collapse;}
.al-pm th{font-family:var(--mono);font-size:9px;font-weight:400;
  color:var(--faint);padding:1px 0;}
.al-pm td{text-align:center;padding:2px 0;border:1px solid var(--line);
  font-size:10px;line-height:1.15;color:var(--text);}
.al-pm td b{display:block;font-weight:600;}
.al-pm td i{font-family:var(--mono);font-style:normal;font-size:8px;
  color:var(--muted);}
.al-pm td.is-out{color:var(--faint);}
.al-pm td.is-out b,.al-pm td.is-out i{color:var(--faint);}
.al-pm td.is-edge{border-color:var(--moon-deep);}

/* ── PRINT ──────────────────────────────────────────────────────────────────
   There is no PDF library in this network and there is not going to be: every
   browser that matters already has a PDF writer behind this dialog, iOS Safari
   included, and shipping 300KB to duplicate it on a page whose argument is
   that it works offline on a phone would be the wrong trade twice over.

   What prints is the year sheet and nothing else. A print of the SCREEN would
   be one month, three explanatory cards and a footer — which is not what the
   button says and not what anybody wants on paper. */
@media print{
  /* Everything that is not the year sheet, gone — including the shell's own
     header and footer, which are outside <main> and would otherwise print a
     navigation strip onto every reader's paper. */
  body > *:not(main){display:none !important;}
  main > *:not([data-yearsheet]){display:none !important;}
  .al-year{display:block;}
  /* A reader who hits Cmd-P without building the year gets the one thing that
     is honest to print in that state: a line saying so. Printing the screen
     would be one month, three explanatory cards and a footer. */
  [data-yearsheet]:empty::before{display:block;font-family:var(--sans);
    content:"Nothing to print yet — use “Print the year” on this page first.";}
  .al-year-g{grid-template-columns:repeat(3,1fr);gap:10px;}
  .al-pm{break-inside:avoid;}
  .al-year-h{break-after:avoid;}
}

/* The dasha timeline says which of the four counts made it — blackbox I1173.
   Quieter than the table it sits under, and never hidden: a page that offers
   one convention out of four and does not name it is the thing this whole
   surface exists not to be. */
.ku-dmethod{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);}


/* ── 10 · THE TITHI TRACKER ─────────────────────────────────────────────────
   Blackbox I1175, Drik audit #12. The one screen on this surface that shows a
   FUTURE date rather than a present one, which is why it looks different from
   everything above it: there is no interval to draw, no rail to fill and no
   "now" to mark. What it has instead is a list of dates and, next to some of
   them, a reason the date is not simple.

   THE TAG IS A WORD AND NOT A COLOUR, for the same reason §7's choghadiya
   cells carry the word "avoid" as well as the tint: roughly one man in twelve
   cannot separate the amber from the text around it, and "two mornings" is not
   decoration — it is the entire content of that row.

   Nothing here declares a colour. Every value is a shell token or a
   color-mix() of one, checked by `python3 surfaces/_shell/check_css.py`. */

.tk-form{display:flex;flex-direction:column;gap:14px;}
.tk-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));}
.tk-field{display:flex;flex-direction:column;gap:6px;}
.tk-field label{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);}
/* A select and an input styled as one control. The native arrow is left alone
   deliberately — a custom one is a listbox to rebuild for the keyboard and for
   VoiceOver, and the platform's own is already correct in both. */
.tk-field select,.tk-field input{width:100%;font-family:var(--sans);
  font-size:var(--t-md);padding:10px 12px;color:var(--text);
  background:var(--ink);border:1px solid var(--line2);border-radius:var(--radius);}
.tk-field select:focus-visible,.tk-field input:focus-visible{
  border-color:var(--moon-deep);outline:none;}
.tk-field input::placeholder{color:var(--faint);}

.tk-list{margin:14px 0 0;}
.tk-item{padding:16px 0;border-top:1px solid var(--line);}
.tk-item:first-child{padding-top:0;border-top:0;}
.tk-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
.tk-name{margin:0;font-family:var(--serif);font-size:var(--t-lg);line-height:1.25;
  color:var(--text);}
.tk-proper{margin:3px 0 0;font-family:var(--mono);font-size:var(--t-xs);
  letter-spacing:.1em;text-transform:uppercase;color:var(--faint);}
.tk-other{margin:6px 0 0;font-size:var(--t-xs);color:var(--muted);}

.tk-when{margin:10px 0 0;display:flex;flex-direction:column;gap:1px;}
.tk-date{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:8px 10px;border-radius:8px;background:var(--panel2);}
/* The soonest one, marked by a ring rather than by hue alone — the same
   treatment the "now" choghadiya cell gets in §7. */
.tk-date.is-next{border:1px solid var(--moon-deep);padding:7px 9px;}
.tk-date .d{font-family:var(--mono);font-size:var(--t-sm);color:var(--text);
  font-variant-numeric:tabular-nums;}
.tk-date.is-next .d{color:var(--moon);}
.tk-date .g{font-size:var(--t-xs);color:var(--faint);text-align:right;}
.tk-date .w{font-size:var(--t-sm);color:var(--muted);line-height:1.55;}

.tk-tag{display:inline-block;font-family:var(--mono);font-size:var(--t-xs);
  letter-spacing:.14em;text-transform:uppercase;padding:2px 7px;border-radius:5px;
  border:1px solid var(--line2);color:var(--muted);}
.tk-tag.is-two{border-color:color-mix(in oklab,var(--amber) 45%,transparent);
  color:var(--amber);}
.tk-tag.is-none{border-color:color-mix(in oklab,var(--rose) 45%,transparent);
  color:var(--rose);}

.tk-empty{margin:14px 0 0;padding:16px;border-radius:var(--radius);
  border:1px dashed var(--line2);color:var(--muted);font-size:var(--t-sm);
  line-height:1.7;}
.tk-busy{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin:10px 0 0;}
.tk-busy:empty{margin:0;}

/* ── the freshness line (I1549) ─────────────────────────────────────────────
   The one line that makes a prerendered panchang honest. In the document it
   reads "Computed for New Delhi on 2026-08-13"; on load the page replaces it
   with "Computed just now, in this browser, for <your city>".

   IT IS QUIET AND IT IS NOT HIDDEN. A caveat set in --faint at 11px that
   nobody can read is the same as not saying it, and the whole reason this
   element exists is that the built copy is for a city the reader may not be
   in. --muted, at the same size as every other note on the page. */
.al-fresh{margin:10px 0 0;font-size:var(--t-sm);color:var(--muted);
  line-height:1.6;}
.al-fresh-live{color:var(--faint);}

/* ── THE CITY SET — I1926, designed in Paper page K-0, 2026-08-16 ────────────
   THE LINK SET CARRIES THE ANSWER, NOT JUST THE NAME. Every competitor's city
   links are a bare list of names, which is a doorway. Each row here carries
   that city's real window for the day on screen, so the link is worth a tap
   and the block is content rather than SEO furniture.

   Nothing new is introduced: --panel, --line, --moon, --muted, --faint and
   the type scale are the surface's own, and check_css.py holds this to the
   same rule as everything else — every colour is a token. */

.al-kinwrap:empty,.al-citywrap:empty{display:none;}

.al-kinwrap{margin:24px 0 0;padding:18px 0 0;border-top:1px solid var(--line);}
.al-kin-k{margin:0 0 10px;font-family:var(--mono);font-size:var(--t-xs);
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.al-kin{display:flex;flex-wrap:wrap;gap:8px;}

/* A chip is a link and has to look like one at a glance — --moon is the
   surface's link colour and the border is one step brighter than a card's so
   the row does not read as four disabled buttons. */
.al-chip{display:inline-block;padding:8px 14px;border-radius:var(--r-pill,999px);
  background:var(--panel);border:1px solid var(--line2);
  font-size:var(--t-sm);font-weight:500;color:var(--moon);text-decoration:none;}
.al-chip:hover{border-color:var(--moon-deep);}

/* THE PLACES THIS PAGE IS ALSO EXACT FOR — I2347, 2026-08-21.

   It borrows the kinwrap's shape on purpose: same top rule, same uppercase mono
   kicker, so it reads as a second note about this city rather than a new kind of
   thing. What it does NOT borrow is `.al-chip`, and that is the whole difference
   between the two blocks — a chip is a link, every name here is a place with no
   page, and a chip would be a promise this network does not keep. Plain
   sentence, --muted, no interaction. Nothing new introduced: every value is a
   token the surface already declares. */
.al-nearwrap:empty{display:none;}
.al-nearwrap{margin:20px 0 0;padding:16px 0 0;border-top:1px solid var(--line);}
.al-near-k{margin:0 0 8px;font-family:var(--mono);font-size:var(--t-xs);
  letter-spacing:.1em;text-transform:uppercase;color:var(--faint);}
.al-near{margin:0;font-size:var(--t-sm);line-height:1.6;color:var(--muted);}

.al-citywrap{margin:26px 0 0;padding:18px 0 0;border-top:1px solid var(--line);}
.al-cityhead{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;}
.al-citylabel{margin:0;font-family:var(--mono);font-size:var(--t-xs);
  letter-spacing:.04em;text-transform:uppercase;color:var(--faint);}

.al-cities{margin:12px 0 0;}

/* THE TIME SITS IN A FIXED LANE. `flex:0 0 auto` with a min-width rather than
   gap alone: the names run from "Pune" to "Ahmedabad" and a column that
   shifts per row is the thing that makes a list of eight look untended. */
.al-city{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 0;border-top:1px solid var(--line);text-decoration:none;}
.al-city:first-child{border-top:0;}
.al-city .n{font-size:var(--t-md);font-weight:500;color:var(--moon);}
.al-city .t{flex:0 0 auto;min-width:108px;text-align:right;
  font-family:var(--mono);font-size:var(--t-sm);color:var(--muted);
  font-variant-numeric:tabular-nums;}
.al-city .t em{font-style:normal;color:var(--faint);}
.al-city:hover .n{color:var(--text);}

/* THE SPREAD LINE IS NOT DECORATION — it is the sentence that makes the block
   worth reading rather than scrolling past, and every part of it is computed.
   See almanac.js spreadLine(); a typed one would be wrong on the first day the
   earliest city changed, which is most days. */
.al-spread{margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--line);
  font-size:var(--t-sm);color:var(--muted);line-height:1.6;}

/* ── 9 · THE RING — the day round once, and the accessory move ─────────────
   Ether, 2026-08-14 (I1693): Prahar is not a smaller copy of the app, it is a
   FLASHY ACCESSORY worn beside it. Designed in Paper as PRAHAR B, "the dial",
   which he chose by name on 2026-08-15; drawn as board P1 on page 6-0 and
   executed 2026-08-17 under I1880, which is why none of this was invented in
   this file.

   THE DIVERGENCE FROM THE APP IS REGISTER, NOT PALETTE. Every colour below is
   a shell token or a color-mix() of one, exactly as the header of this file
   requires — nothing here would survive `check_css.py` otherwise, and the
   whole point of the accessory is that it is recognisably the same house. What
   diverges is DENSITY and the colour moment: one amber needle on a ring of
   muted quality tints, and the app has no such instrument anywhere.

   `.al-ring` and `momentDial()`'s `.al-dial` are DIFFERENT THINGS and the
   names are deliberately unalike. That one is a 240x24 linear bar inside a
   calendar row; this is the page's hero. Two geometries sharing a class prefix
   is how a stylesheet starts lying about what it draws.                     */

.al-ring{position:relative;display:flex;justify-content:center;margin:2px 0 0;}
.al-ring-svg{display:block;width:100%;max-width:340px;height:auto;}

/* The disc inside the ring. It is not a fill for its own sake: without it the
   readout sits on the page ground and the ring reads as a hoop lying beside
   some text rather than as one instrument with a face. */
.al-ring-in{fill:var(--panel);}

/* QUALITY IS A CLASS, NOT A FILL — so all four skins keep working and this
   file never learns their names. The tints are the same three the band and the
   cells already use, so a reader who has scrolled past either recognises them.
   Quality is ALSO a word, in `.al-ring-read` and in the key below: roughly one
   man in twelve cannot separate the green from the rose, and a picture that is
   the only place an answer exists fails him silently. */
.al-ring-s{stroke:var(--ink);stroke-width:1;}
.al-ring-s.q-good{fill:color-mix(in srgb,var(--green) 88%,transparent);}
.al-ring-s.q-neutral{fill:color-mix(in srgb,var(--moon-deep) 88%,transparent);}
.al-ring-s.q-bad{fill:color-mix(in srgb,var(--rose) 88%,transparent);}

/* AFTER SUNSET IS DIMMER, AND THAT IS THE SECOND FACT THE RING CARRIES FOR
   FREE. Day and night are drawn in one continuous circle, so the eye reads
   where the light goes out without a label — and because every sector is at
   its true angular length, it also reads that the night sectors are NARROWER.
   Opacity rather than a second palette: the quality of a night period is the
   same claim, made about a darker part of the day. */
.al-ring-s.is-night{opacity:.30;}

/* The running period, when there is one. A ring rather than a colour change,
   for the reason `.al-cell.is-now` gives: hue is already spent on quality. */
.al-ring-s.is-now{stroke:var(--moon);stroke-width:1.5;}

/* Abhijit rides outside the ring because it is not an eighth — one fifteenth
   on local noon. Drawn in --moon, the page's neutral highlight, so it is not
   mistaken for a fourth quality. */
.al-ring-abh{fill:color-mix(in srgb,var(--moon) 85%,transparent);}

.al-ring-tick{stroke:var(--faint);stroke-width:1.5;}

/* ── THE ONE COLOUR MOMENT ──────────────────────────────────────────────────
   Amber, once, on the needle — and nowhere else on the ring. This is the whole
   "flashy" half of Ether's sentence and it is spent in a single place, which
   is what keeps it flashy rather than busy. Same recipe as `.al-nowline`: a
   line, an ink ring to hold it off whatever it crosses, and a halo so the eye
   finds it first on a face with sixteen sectors on it. */
.al-ring-now{stroke:var(--amber);stroke-width:3.5;stroke-linecap:round;}
.al-ring-nowdot{fill:var(--amber);stroke:var(--ink);stroke-width:1;}
.al-ring-nowhalo{fill:color-mix(in srgb,var(--amber) 18%,transparent);}

/* THE READOUT sits at the centre of the face, where a watch puts a
   complication. It is absolutely positioned over the SVG rather than inside
   it: SVG text does not wrap, does not inherit the type scale, and is read
   badly by every screen reader that matters. */
.al-ring-read{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:60%;display:flex;flex-direction:column;align-items:center;gap:4px;
  text-align:center;pointer-events:none;}
.al-ring-read .k{font-family:var(--mono);font-size:10px;letter-spacing:.22em;
  color:var(--faint);text-transform:uppercase;margin:0;}
.al-ring-read .n{font-size:clamp(30px,10.5vw,44px);font-weight:600;
  letter-spacing:-.03em;line-height:1.1;color:var(--amber);margin:0;}
.al-ring-read .s{font-family:var(--mono);font-size:var(--t-xs);
  color:var(--muted);margin:0;font-variant-numeric:tabular-nums;}

/* The key. It exists because the ring is the first thing on the page and a
   reader arriving cold has been given three tints and a dim half with no
   caption — and because `--green`/`--rose` alone is not an answer for the
   reader who cannot tell them apart. */
.al-ring-key{display:flex;flex-wrap:wrap;justify-content:center;gap:7px 14px;
  margin:16px 0 0;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  color:var(--muted);text-transform:uppercase;}
.al-ring-key span{display:inline-flex;align-items:center;gap:6px;}
.al-ring-key span::before{content:"";width:9px;height:9px;border-radius:2px;
  background:var(--faint);}
.al-ring-key .q-good::before{background:var(--green);}
.al-ring-key .q-neutral::before{background:var(--moon-deep);}
.al-ring-key .q-bad::before{background:var(--rose);}
.al-ring-key .is-night::before{background:color-mix(in srgb,var(--moon-deep) 30%,transparent);}
.al-ring-key .is-abh::before{width:14px;height:4px;background:var(--moon);}

/* THE TWO ENDS OF THE RING, said as numbers. The lengths under them are the
   sentence the picture is making — 13h 07m against 10h 53m is why sunset does
   not land on three o'clock — and a reader who wants the fact rather than the
   shape gets it here without scrolling. Tabular numerals so the two columns
   sit in one lane. */
.al-ring-ends{display:flex;justify-content:space-between;align-items:flex-start;
  gap:16px;margin:18px 0 0;}
.al-ring-ends>div{display:flex;flex-direction:column;gap:3px;}
.al-ring-ends>div:last-child{align-items:flex-end;text-align:right;}
.al-ring-ends .k{font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  color:var(--faint);text-transform:uppercase;margin:0;}
.al-ring-ends .v{font-family:var(--mono);font-size:var(--t-lg);color:var(--text);
  margin:0;font-variant-numeric:tabular-nums;}
.al-ring-ends .l{font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  color:var(--faint);margin:0;font-variant-numeric:tabular-nums;}