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

.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:9px 12px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  color:var(--text);}
.al-place:hover{border-color:var(--moon-deep);}
.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;}
.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);}
.al-pick-i::placeholder{color:var(--faint);}

.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. */

.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);}
.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));}

.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. */
.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);}
.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. */
.al-rail{--f:0%;height:3px;margin:10px 0 0;border-radius:2px;
  background:var(--line);
  background:linear-gradient(to right,var(--moon-deep) 0,var(--moon-deep) var(--f),
             var(--line) var(--f),var(--line) 100%);}

.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%);}

/* 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. */
.al-band{position:relative;height:26px;border-radius:6px;overflow:hidden;
  background:var(--panel2);border:1px solid var(--line);margin:2px 0 0;}
.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. */
.al-nowline{position:absolute;top:-2px;bottom:-2px;width:2px;
  background:var(--moon);box-shadow:0 0 0 1px var(--ink);}

.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. */

.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);}
.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. */
.al-cell.is-now{border-color:var(--moon-deep);
  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;}