/* ══════════════════════════════════════════════════════════════════════════════════════════════
   almanac.css — the register block, the cards row and the Card Sheet.  (AL-3)

   THEMES: this file defines NO colour. Every colour is a token from AL-1's contract, taken by
   name, with a fallback to the token that carries the same meaning in `design.css` today so the
   surface is legible on either branch:
       --paper            the page ground              (fallback --bg)
       --ink              primary text                 (already in design.css)
       --card-face-frame  the frame around a card face (fallback --line)
   plus the existing names AL-1 keeps: --brass*, --ground-2, --line*, --faint, --dim, --deep.
   When AL-1 lands, the fallbacks stop being reached; nothing here changes.

   TYPE: rem only — the D-1 scale (`--fs-prose` 1.0625rem, `--fs-body` 1rem, `--fs-caption`
   0.875rem, `--fs-mono` 0.8125rem). There is no `px` font-size in this file.

   MOTION: the D-1 register — 200–400 ms, ease-out (`--ease`), small distances, one amber, no
   bounce. The reveal is an enhancement: a face is visible the moment it is in the DOM, and the
   pending state only exists on articles the script itself tagged (and it never tags them under
   `prefers-reduced-motion`).

   TAPS: every tappable thing is ≥ 44 px (`--tap`).
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── THE DOCUMENT: TWO BANDS (AL-15 Direction A) ──────────────────────────────────────────────
   Band 1 is what is happening now and takes no label — the host page's "Today" kicker sits above
   it. Band 2 is "The longer weather", and its label is the same kicker idiom, so the two read as
   one document with one voice rather than two lists. */

.al-run {
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.al-band {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.al-band-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--mono);
  font-size: var(--fs-mono, 0.8125rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

/* The hairline that carries the label across the column. A token, never a literal — and a
   background, not an opacity, so the file keeps its ONE opacity rule (the sheet's scrim). */
.al-band-label::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
}

/* ── the register block ───────────────────────────────────────────────────────────────────── */

/* THE PHONE ARITHMETIC (390 px): 390 − 2×16 page gutter − 2×18 block padding = 322 px of text
   column, which still holds three 94 px faces at a 12 px gap (3×94 + 2×12 = 306). The 18 px side
   padding buys the prose four more characters a line than AL-3's 22 px did without moving the
   card row's measured fit. */
.al-block {
  border: 1px solid var(--line);
  border-radius: var(--r-card, 12px);
  padding: 20px 18px 22px;
  background: var(--paper, var(--surface, transparent));
  color: var(--ink);
}

.al-block[data-headline="true"] {
  border-color: var(--brass-30, var(--line));
}

/* The overture's frame line: mono, the machine measured it. */
.al-frame {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: var(--fs-mono, 0.8125rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}

/* THE DATE LINE, which leads every block (AL-15 §1). It is not metadata in the corner — it is the
   entry's marker, the way an almanac's day is, so it is brass, tracked, and it sits on its own
   line above the headline with a hairline under it. The recurrence chip rides beside it. */
.al-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-2, var(--line));
  font-family: var(--mono);
  font-size: var(--fs-mono, 0.8125rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}

.al-date {
  white-space: nowrap;
  color: var(--brass);
}

/* AL-15b — an overture leads with its PERIOD ("The month of September", "2026"), and its frame
   line follows immediately underneath. The two are one head, so the period line drops the rule
   that separates an ordinary block's date from its headline. */
.al-overture .al-eyebrow {
  margin-bottom: 8px;
  padding-bottom: 0;
  border-bottom: 0;
}

/* THE HEADLINE — the Sky register's measured sentence, "that's what is driving it". Display
   serif, one step above the prose, so the collapsed block reads as an almanac entry with a
   headline and a voice rather than a stack of equal paragraphs.
   AL-17 §1 — Omar's live tap: the headline and the plain voice beneath it "read too alike".
   Pushed further within the SAME token system (no new colour, no px size): the headline keeps
   the page's strongest ink (`--ink`) and gains a touch of negative tracking — the tighter,
   measured-instrument set a display size earns — while the voice beneath drops a whole ink step
   (`--ink-2`, see `.al-plain`) and stays untracked prose. Two registers, one glance, still one
   token system. */
.al-sky {
  margin: 0;
  font-family: var(--display-serif, var(--serif));
  font-size: 1.1875rem;                            /* 19px — one step above --fs-prose */
  line-height: 1.45;
  letter-spacing: -0.01em;                         /* tighter — the instrument voice, not prose */
  color: var(--ink);
}

/* The overture's sky register is a whole paragraph, not a headline sentence — it says the year's
   three spines and their dates. It keeps the serif but drops to prose size and prose leading. */
.al-overture .al-sky {
  font-family: var(--serif);
  font-size: var(--fs-prose, 1.0625rem);
  line-height: 1.65;
  letter-spacing: normal;                          /* AL-17 §1 — a paragraph, not a headline */
  color: var(--ink-body, var(--ink));
}

/* The kicker above the faces, and the only place the words "The cards" are printed. */
.al-kicker {
  margin: 20px 0 10px;
  font-family: var(--mono);
  font-size: var(--fs-mono, 0.8125rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

/* The recurrence chip. It says only what the block carries — "Second pass", "Final pass". */
.al-recur {
  min-height: var(--tap, 44px);
  padding: 0 14px;
  border: 1px solid var(--brass-30, var(--line));
  border-radius: var(--r-chip, 20px);
  background: var(--brass-05, transparent);
  color: var(--brass);
  font-family: var(--mono);
  font-size: var(--fs-mono, 0.8125rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.al-recur:focus-visible,
.al-registers-toggle:focus-visible,
.al-face:focus-visible,
.al-placement:focus-visible,
.al-cardname:focus-visible,
.al-sheet-close:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

/* 3 — THE PLAIN VOICE. Unlabeled, serif: a human wrote it, and it sits under the headline.
   AL-17 §1 — body prose, regular weight, a full ink step quieter than the headline above it
   (`--ink-2`, "secondary body" in the token contract) — the second register, visibly. */
.al-plain {
  margin: 14px 0 0;
  font-family: var(--serif);
  font-size: var(--fs-prose, 1.0625rem);
  line-height: 1.7;
  color: var(--ink-2, var(--ink-body, var(--ink)));
}

/* An overture and a plain-gap block both open with no headline above the voice — nothing should
   then be pushed down by a margin that was meant to separate it from one. */
.al-sky + .al-plain { margin-top: 14px; }
.al-eyebrow + .al-plain,
.al-frame + .al-plain { margin-top: 0; }

/* 4 — THE CARDS ROW. Its own row, beneath the kicker, wrapping. Never beside the text. At 390 px
   the column is 322 px (see `.al-block`) and three faces fit at 3×94 + 2×12 = 306. At 96 px + a
   14 px gap a three-card story wrapped its third card onto a lonely second row. A story of four
   or more still wraps — that is the ruling (the row wraps; the text still leads). */
.al-cards-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}

.al-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 94px;
  min-height: var(--tap, 44px);
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-3, var(--ink));
  cursor: pointer;
  font: inherit;
}

.al-face-frame {
  display: block;
  width: 100%;
  aspect-ratio: 70 / 119;                          /* the 1909 card, 70 × 119 mm */
  border: 1px solid var(--card-face-frame, var(--line));
  border-radius: 4px;
  overflow: hidden;
  /* The LQIP stand-in until the Argo card back lands (WS-E open flag): the frame's own quiet
     ground, so a lazy image loads INTO a card-shaped hole rather than reflowing the row. */
  background: var(--ground-2, transparent);
}

.al-face-pic,
.al-face-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* AL-1c — the face that could not load. `display: block` above beats the UA's `[hidden]` rule,
   so the renderer's `hidden` needs saying here or a broken image stays on the page. What is left
   is the frame's own card-shaped ground and the name beneath it: an empty slot, not a defect
   icon. (`.al-sheet-figure[hidden]` already states the same thing further down.) */
.al-face-pic[hidden] { display: none; }

.al-face-name {
  font-family: var(--sans);
  font-size: var(--fs-caption, 0.875rem);
  line-height: 1.3;
  text-align: center;
  color: var(--dim);
}

/* 5 — "GO DEEPER". One control per block, at EVERY width — it is a choice the reader makes, not
   a desktop-only fold. A full-width row above a hairline, with the caret at the far end: the tap
   target is the whole line rather than four tracked words, which is what makes it read as a
   designed control on a phone instead of a footnote. */
.al-registers {
  margin-top: 20px;
  border-top: 1px solid var(--line-2, var(--line));
}

.al-registers-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: var(--tap, 44px);
  padding: 0;
  border: 0;
  background: none;
  color: var(--brass);
  font-family: var(--mono);
  font-size: var(--fs-mono, 0.8125rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}

.al-caret {
  width: 12px;
  height: 12px;
  transition: transform 200ms var(--ease, ease-out);
}

.al-registers-toggle[aria-expanded="true"] .al-caret { transform: rotate(90deg); }

.al-registers-body[data-open="false"] { display: none; }
.al-registers-body[data-open="true"] { display: block; padding-bottom: 4px; }

.al-reg + .al-reg { margin-top: 14px; }

.al-reg-text {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--fs-body, 1rem);
  line-height: 1.65;
  color: var(--ink-2, var(--ink));
}

/* A named placement / a named card inside a register sentence: a tap, drawn as an underline
   rather than a button, because it sits mid-sentence. The 44 px floor is met by the line-box
   padding, and these are exempt from the "every control is a box" reading of D-1 rule 6 the same
   way the pinned placement rows are — they are words, not controls. */
.al-placement,
.al-cardname {
  padding: 6px 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--brass);
  text-decoration: underline;
  text-decoration-color: var(--brass-40, currentColor);
  text-underline-offset: 3px;
  cursor: pointer;
}

/* From the tablet up the block simply breathes more. "Go deeper" stays a control at every width
   (AL-15 §5) — it is named as a choice, so it is never auto-opened by a breakpoint. */
@media (min-width: 720px) {
  .al-block { padding: 24px 24px 26px; }
  .al-sky { font-size: 1.3125rem; }               /* 21px */
  .al-face { width: 116px; }
}

/* ── the reveal: turn-to-face (spec §3.3) ─────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .al-block .al-face-frame {
    transition: transform 320ms var(--ease, ease-out);
  }
  /* THE TURN NEVER HIDES THE CARD. Measured on Stage L (2026-08-30): an opacity-based reveal left
     every below-the-fold face at 0.001 in a full-page capture — content that exists and cannot be
     seen. Review #22 and D-1 rule 7 say a reveal is an enhancement and the thing is already
     visible, so the pending state is a TRANSFORM only: the face is fully opaque, turned a little
     away, and it turns to face you. Only articles the script tagged are ever pending, and it
     never tags them under reduced motion — no script, no motion at all. */
  .al-block[data-reveal="pending"] .al-face-frame {
    transform: perspective(600px) rotateY(-16deg) translateY(6px);
  }
  .al-block[data-reveal="done"] .al-face-frame {
    transform: none;
  }
  /* Stagger, small and finite: the row turns over, it never deals. */
  .al-face:nth-child(2) .al-face-frame { transition-delay: 60ms; }
  .al-face:nth-child(3) .al-face-frame { transition-delay: 120ms; }
  .al-face:nth-child(n+4) .al-face-frame { transition-delay: 180ms; }
}

@media (prefers-reduced-motion: reduce) {
  /* D-1 rule 7: transitions ≤ 1 ms and every reveal already visible. The fade is the whole
     motion register here, and it is instantaneous. */
  .al-block .al-face-frame,
  .al-caret,
  .al-sheet,
  .al-sheet-panel {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
  .al-block[data-reveal="pending"] .al-face-frame { transform: none; }
}

/* ── the Card Sheet: a full-screen takeover on a phone ────────────────────────────────────── */

.al-sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.al-sheet[hidden] { display: none; }

.al-sheet-scrim {
  position: absolute;
  inset: 0;
  /* No literal: the scrim is the page ground at low opacity, so it darkens the Night Table and
     lightens under the Printed Almanac without this file knowing either colour. */
  background: var(--bg);
  opacity: 0.72;
}

.al-sheet-panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: 100%;
  overflow-y: auto;
  padding: 22px 22px 32px;
  background: var(--paper, var(--surface, transparent));
  color: var(--ink);
  border-top: 1px solid var(--line);
  border-radius: var(--r-frame, 24px) var(--r-frame, 24px) 0 0;
}

@media (min-width: 720px) {
  .al-sheet { align-items: center; }
  .al-sheet-panel {
    border: 1px solid var(--line);
    border-radius: var(--r-card2, 14px);
    max-height: 90%;
  }
}

.al-sheet-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: var(--tap, 44px);
  height: var(--tap, 44px);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  color: var(--dim);
  cursor: pointer;
}

.al-sheet-close svg { width: 20px; height: 20px; }

.al-sheet-figure {
  margin: 8px auto 18px;
  max-width: 260px;
}

.al-sheet-figure[hidden] { display: none; }

.al-sheet-pic,
.al-sheet-img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--card-face-frame, var(--line));
  border-radius: 6px;
}

/* Name + Book T title in the site's display serif (WS-E addendum 3: the card title is Argo
   typography, composed over the panel — the library ships no type). `--display-serif` is the
   name that face is bound to; until it exists the body serif carries it. */
.al-sheet-name {
  margin: 0;
  font-family: var(--display-serif, var(--serif));
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--ink);
}

.al-sheet-title {
  margin: 4px 0 0;
  font-family: var(--display-serif, var(--serif));
  font-size: var(--fs-prose, 1.0625rem);
  font-style: italic;
  color: var(--brass);
}

.al-sheet-lattice {
  margin: 14px 0 0;
  font-family: var(--sans);
  font-size: var(--fs-body, 1rem);
  line-height: 1.6;
  color: var(--ink-2, var(--ink));
}

/* The traditional meaning, as received teaching — rendered ONLY when correspondence.json carries
   text. An empty one is not a blank paragraph; it is nothing at all. */
.al-sheet-meaning {
  margin: 12px 0 0;
  font-family: var(--serif);
  font-size: var(--fs-prose, 1.0625rem);
  line-height: 1.7;
  color: var(--ink-body, var(--ink));
}

.al-sheet-title[data-empty="true"],
.al-sheet-lattice[data-empty="true"],
.al-sheet-meaning[data-empty="true"] { display: none; }

.al-sheet-where:empty { display: none; }

.al-sheet-credit {
  margin: 20px 0 0;
  font-family: var(--sans);
  font-size: var(--fs-caption, 0.875rem);
  color: var(--faint);
}

/* The page behind a full-screen sheet does not scroll. */
:root[data-al-sheet="open"] body { overflow: hidden; }