/* PANIM — room.css  (Direction B — "The Plate")
   THE LISTENING ROOM only. The chapter frontispiece machinery that used to live
   at the top of this file is gone: photographs are plates now (components.css),
   not graded backdrops.

   The Room deliberately does NOT follow the book's paper arc. The page is a book
   and is read in daylight; the Room is a phone on a nightstand at 1 a.m. with the
   lights off. Making it cream would be consistent and wrong. It stays dark, and
   it is the one place in the site where the old night palette still belongs. */

/* ---------- the listening room ---------- */
#room {
  /* z-index 300 put the "full-screen" room UNDER the running head (800) and the
     player bar (900), so both stayed visible on top of it and the two interfaces
     rendered stacked. It now sits above them, but below the sheets (960) which are
     opened FROM the room and must appear over it. */
  position: fixed; inset: 0; z-index: 920;

  /* ---- THE ROOM IS A PAPER STOP, NOT A SECOND THEME (cohesion pass, 2026-08-29) ----
     This block used to declare two private tokens (--room-bg, --room-accent) and then
     REPAINT the shared components underneath it — `#room .btn`, `#room .btn-icon`, and
     a colour re-statement for every piece of room type — because --ink-soft and friends
     are paper values and resolved to dark grey on near-black.
     The page already re-declares --paper/--ink/--accent per chapter (the dawn arc,
     .section[data-ch] in site.css). The Room is simply the darkest stop on that arc, so
     it declares the same seven tokens and inherits every component unchanged. Roughly
     forty lines of override deleted with this; nothing here restyles a .btn any more. */
  --paper: #0C0B0A;
  --ink: #EFEAE1;
  /* Brighter than the page's soft ink, and the reason is the idle dim below: .btn-icon
     takes --ink-soft, and #room[data-idle] fades the controls to .45, which composites.
     #A9A196 (what this used to be) lands at 2.39:1 once dimmed — under the 3:1 floor for
     a control. #CBC4B9 is 11.36:1 at rest and 3.06:1 dimmed. Measured, not chosen. */
  --ink-soft: #CBC4B9;
  --ink-faint: #A9A196;
  --accent: #C98A4B;
  --rule-strong: rgba(239, 234, 225, .22);
  --control-edge: rgba(239, 234, 225, .46);   /* 4.09:1 on room paper; the floor is 3:1 */
  --control-wash: rgba(239, 234, 225, .05);

  /* 🛑 THERE ARE NO --room-* TOKENS ANY MORE. There used to be three, and js/room.js
     overwrote two of them inline on every tick from the page's PAPER table, which is
     how the Room came to paint itself cream (see the long note in js/room.js). One
     name per thing: the Room's colours are --paper / --ink / --accent, above. */

  background: var(--paper);
  color: var(--ink);
  opacity: 0; transition: opacity var(--dur-med) var(--ease);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#room.is-open { opacity: 1; }
/* `display: flex` above beats the `hidden` attribute's UA `display: none`, so a
   CLOSED room stayed in the layout: a full-viewport panel at z-index 920, opacity 0,
   pointer-events auto, sitting over the entire page and swallowing every click on
   the site. Nothing looked wrong, so nothing pointed at the room. Every other
   overlay in this build carries the same guard — .modal[hidden], .sheet[hidden],
   #lightbox[hidden], .nav-toc[hidden]. This one was missed. */
#room[hidden] { display: none; }
body.room-open { overflow: hidden; }
/* belt and braces: the page chrome is also faded out, so nothing bleeds through a
   translucent frame during the cross-fade */
body.room-open #site-nav,
body.room-open .player { opacity: 0; pointer-events: none; }
/* The toasts are pinned above the player bar at z-index 940 and the room is 920, so
   a card that arrives while the room is open — the resume prompt, the offline notice
   (js/offline.js) — paints ON TOP of the night player. They belong to the page behind
   it. The sheets are 970 and still open over the room, which is correct: those are
   the room's own surfaces.
   ⚠️ THE SELECTOR HAS TO BEAT `.toast:not([hidden]).is-shown`, which is three
   classes. Dropping .is-shown here would lose to it and do nothing. */
body.room-open .toast.is-shown { opacity: 0; pointer-events: none; }
#site-nav, .player { transition: opacity var(--dur-med) var(--ease); }

/* Same grading decision as the frontispiece: deepen, don't recolor. The room is a
   phone on a nightstand in a dark bedroom, so it goes further down than the page
   does — but the photograph keeps its own colour, and a slow drift keeps a
   forty-minute chapter from looking like a frozen JPEG. */
.room-backdrop {
  position: absolute; inset: -4%; background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.2s var(--ease);
  /* .30 still read as a lit photograph behind the controls and made the transport
     illegible. The room is a phone on a nightstand in the dark: the picture should
     be a presence, not an image you look at. */
  filter: brightness(.15) contrast(1.15) saturate(.75);
  animation: room-drift 48s ease-in-out infinite alternate;
}
.room-backdrop.has-image { opacity: 1; }
@keyframes room-drift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(0, -1.5%, 0); }
}
.room-grade {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 110%,
      color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 60%),
    /* a soft pool of dark directly behind the control stack, so the transport always
       has something to sit on whatever the photograph is doing underneath */
    radial-gradient(46% 42% at 50% 50%, rgba(0,0,0,.72) 0%, rgba(0,0,0,.34) 60%, transparent 100%),
    radial-gradient(105% 70% at 50% 40%, transparent 30%, rgba(0,0,0,.72) 100%);
  pointer-events: none;
}

.room-close {
  position: absolute; top: max(1rem, env(safe-area-inset-top)); right: 1rem; z-index: 2;
}
.room-sleep-badge {
  position: absolute; top: max(1.2rem, env(safe-area-inset-top)); left: 1.2rem; z-index: 2;
  display: flex; align-items: center; gap: .5em;
  font-family: var(--ui); font-size: var(--ap-md); letter-spacing: .15em;
  color: color-mix(in srgb, var(--accent) 80%, white);
}
.room-sleep-badge .moon {
  width: 10px; height: 10px; border-radius: 50%;
  box-shadow: inset -3px -1px 0 0 currentColor;
}
/* same miss as #room above: js/room.js sets .hidden when no timer is running, and
   `display: flex` overrode it — the moon sat in the Room's top-left corner always,
   announcing a sleep timer nobody had set */
.room-sleep-badge[hidden] { display: none; }

/* 🔴 THE STACK WAS RE-SPACED, 2026-09-05. The author: "can we clean upt his section
   and make it high level coding it looks cheap and we should ahve more options
   bigger buttons and a night mode."
   The old stack was one flat `gap: .9rem` between eight things of five different
   kinds — a mark, a numeral, a title, a clock, an arc, a transport and a control
   row — so nothing on the screen was grouped with anything else and the whole thing
   read as a list of widgets. The gap is 0 now and each element declares its own
   space, which is what lets the identity block (mark · numeral · title) sit tight
   while the transport gets real air around it. */
.room-stack {
  position: relative; z-index: 1; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 0;
  max-width: min(94vw, 32rem);
}
/* ⭐ THE MARK IS THE BOOK'S OWN WORD AND IT WAS SET AT 16px. It is the only thing on
   this screen that says which book you are inside; at --ap size it read as a
   watermark somebody forgot to remove. It is in the Hebrew face at display size now,
   the same relationship the jacket sets up between the mark and the title under it.
   🛑 THE OPACITY IS GONE. It was .8 over --accent, which composites to 3.6:1 on the
   room's own paper — under AA for text, and this is text. The colour carries it. */
.room-hebrew {
  font-family: var(--heb); font-weight: 400;
  font-size: clamp(1.9rem, 7vw, 2.7rem); line-height: 1;
  color: var(--accent);
  margin-bottom: .55rem;
}
.room-chnum {
  /* ⚠️ --ap-lg IS 13px AND A SINGLE ROMAN NUMERAL AT 13px WITH .45em OF TRACKING IS
     A SPECK. It is the only thing on the screen that says WHICH chapter, and on the
     shot the author sent it read as a stray mark above the title. Sized as a real
     line of apparatus instead. */
  font-family: var(--ui); font-size: .95rem; font-weight: 600;
  letter-spacing: .45em; text-indent: .45em;   /* tracking pushes the last letter off centre */
  color: var(--accent);
  margin-bottom: .5rem;
}
.room-title {
  font-family: var(--serif);
  font-variation-settings: var(--lit-display);
  font-weight: 350;
  font-size: clamp(1.95rem, 6.6vw, 3rem); line-height: 1.08;
  letter-spacing: -.018em;
  text-wrap: balance;
  margin-bottom: 1.3rem;
}
/* ⚠️ THE CLOCK IS A BUTTON AND HAD NO EDGE, so the one number on the screen that
   toggles when you press it looked exactly like the one number that does not. It
   keeps its size and gains a hairline under it — the site's own way of saying "this
   is pressable" without turning a 3.4rem numeral into a chip. */
.room-clock {
  font-family: var(--ui); font-variant-numeric: tabular-nums;
  font-size: clamp(2.4rem, 9.5vw, 3.6rem); letter-spacing: .04em; line-height: 1;
  padding: .12em .3em .18em;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.room-clock:hover, .room-clock:focus-visible {
  border-bottom-color: color-mix(in srgb, var(--accent) 60%, transparent);
}
.room-clock:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ⭐ THE ARC IS THE DAWN, 2026-09-05 — night on the left, morning on the right, the
   same three-accent story css/site.css walks the paper through across the ten
   chapters. The stops are in index.html (a gradient needs a <defs>, and it needs to
   be in the document rather than in a stylesheet).
   ⚠️ IT IS THICKER, AND THAT IS WHY THE GRADIENT IS WORTH HAVING AT ALL. At 1.4 the
   fill was a hairline and four colour stops inside a hairline are four colours
   nobody can see. 2.8 is still a line rather than a bar. */
.room-arc { width: min(70vw, 330px); margin: .9rem 0 .2rem; }
.room-arc svg { width: 100%; height: auto; overflow: visible; }
.room-arc path { fill: none; stroke-width: 2.8; stroke-linecap: round; }
.arc-track { stroke: color-mix(in srgb, currentColor 16%, transparent); }
.arc-fill {
  stroke: url(#room-arc-dawn);
  stroke-dasharray: 100; stroke-dashoffset: 100;
  /* ⚠️ THE ROUND CAP DRAWS A DOT AT ZERO LENGTH. With the whole dash offset out of
     the path there is nothing to draw, but a round linecap still paints its own
     half-circle at the dash boundary — a 3px tan bead sitting on the arc of a
     chapter that has not started. js/room.js fades the fill out below half a
     per cent rather than switching the cap to `butt`, because the cap is what makes
     the progress head read as a moving point of light rather than as a cut. */
  transition: stroke-dashoffset .5s linear, opacity var(--dur-fast) linear;
}

.room-transport {
  display: flex; align-items: center; gap: clamp(1.2rem, 5vw, 2rem);
  margin-top: 1.1rem;
}
/* 🔴 THE SKIP CONTROLS ARE DRAWN NOW, NOT TYPED. They were the strings "−15" and
   "+30" in a 52px box with no surface at all — the two cheapest-looking objects on
   the screen and, at --ap size, two of the smallest. Each is a circular arrow with a
   gap at twelve o'clock, an arrowhead in the gap, and its number set inside the ring:
   62px of target, which is the size a thumb wants on a phone in the dark.
   🛑 THE NUMBER IS aria-hidden AND THE BUTTON CARRIES A REAL LABEL. "15" alone is
   not an instruction; the aria-label says "Skip back 15 seconds" and always did. */
/* 🛑 THE RULES THAT USED TO SIT HERE ARE .skip-mark IN components.css, 2026-09-07,
   because the player bar needed the same drawing and was still carrying "−15" and
   "+30" as text. This is an INSTANCE now: 62px against the shared 44, and a number
   set to match. Everything else — the ring, the gap, the arrowhead, the hover, the
   focus ring and the press — is the shared component. .rs-n went with it and is
   .sm-n; the markup in index.html carries both class names on the button. */
.room-skip { --skip-size: 62px; --skip-num: .88rem; }

/* An instance of .transport-play (components.css), not a second build of it. The
   circle, the icon swap, the inversion on hover/focus and the press are all shared;
   what is genuinely the Room's own is the size, the clay edge, and the blur — this
   button sits over a photograph and the bar's does not.
   ⚠️ 88px, WAS 74. The author asked for bigger buttons and this is the one the whole
   screen is arranged around; the two skips beside it are 62. */
.room-play {
  --transport-size: 88px;
  /* 🛑 NO --transport-glyph HERE. components.css derives it from --transport-size minus
     the border, so this instance gets 85px inside its 88px button automatically and the
     two sizes cannot drift apart by hand. */
  border-color: color-mix(in srgb, var(--accent) 65%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  /* 🛑 THE GLYPH STAYS --ink HERE AND THE BAR'S DOES NOT, 2026-09-07. components.css
     redrew the shared mark and put it in the accent, which is right on paper and
     wrong over a photograph: this button floats on the chapter plate, behind 14px of
     blur, and the Room's token block has already swapped --ink to the light end — so
     --ink is the high-contrast paint here and the accent is not. Same component, one
     token different, which is what the shared build is for.
     ⚠️ THE GLYPH BOX IS THE BUTTON'S OWN SIZE now, not a fraction of it — the ring
     here is the button's border and the triangle is drawn in a 44-unit grid that
     assumes the ring is in the same grid. components.css says this once at length. */
  color: var(--ink);
}

/* 🔴 FIVE CHIPS WITH EDGES, NOT FOUR NAKED WORDS. These were .btn-icon — a class
   that deliberately has no border and no wash, because it is for CHROME (the nav's
   search glyph, the player bar's icons). Here it made "Sleep", "Read" and "Chapters"
   look like three pieces of caption text, and it gave the two of them that have a
   STATE no way to show it. They are .btn now, which is the site's real control
   surface, plus the pressed treatment below. */
.room-secondary {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .5rem; margin-top: 1.5rem;
  /* ⚠️ 20.5rem IS A WRAPPING DECISION, NOT A WIDTH. Five chips on a 402px phone
     cannot sit on one row; left to the stack's own 32rem the row breaks 4 + 1 and
     the fifth chip sits alone under four, which reads as an afterthought bolted on
     — which is exactly what "Continuous" would look like if it were one. Capped
     here the row breaks 3 + 2 and the block reads as a keypad.
     ⭐ SIX SINCE 2026-09-16 (the language chip). Measured at 402px the row breaks
     4 + 2 — the four short controls, then Continuous and the language, the two that
     change what happens next. (It was measured 4 + 1 before the sixth arrived.)
     ⭐ SEVEN SINCE 2026-09-16 (Download). At 20.5rem it broke 4 + 2 + 1, the lone chip
     again; 21.5rem is the least that holds 4 + 3 at 402px with the widest label the
     chip wears ("Download"), and the first row still cannot take a fifth. */
  max-width: 21.5rem;
}
.room-chip {
  min-height: 48px; padding: .6em 1.05em;
  font-size: var(--ap-lg); letter-spacing: .04em;
  font-variant-numeric: lining-nums tabular-nums;
}
/* ⚠️ aria-pressed IS THE SOURCE OF TRUTH, NOT A CLASS. Two of these five are
   toggles (Read, Continuous) and both already had to set aria-pressed for a screen
   reader; styling off the same attribute is what guarantees the two can never
   disagree — which is the classic failure of a parallel .is-on class. */
/* .is-saved: #room-save once the language playing is all on the phone — a fact, not
   a toggle, so it borrows the lit look without claiming to be pressable-off. */
.room-chip[aria-pressed="true"], .room-chip.is-saved {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--ink);
}

/* The Room's seek bar is .seekbar .seekbar-edge now (css/player.css) — the same
   component the transport bar uses, pinned to the bottom edge. Nothing left here. */

/* idle dim — the room recedes while you listen */
#room .room-stack, #room .room-close, #room .seekbar-edge { transition: opacity 1.2s var(--ease); }
/* Measured against the room's own base (#0C0B0A, text #f0edf4): .38 composited to
   3.20:1 — under the 4.5:1 AA floor for text — and .25 composited to 2.04:1, which
   is under even the 3:1 minimum for UI controls (WCAG 1.4.11). The close button and
   the seek bar were the worst of it. These land at ~5.1:1 and ~3.9:1, and over the
   backdrop photograph (brightness .15) there is headroom left for the bright patches.
   Receding is the intent; vanishing was the bug. */
#room[data-idle="true"] .room-stack { opacity: .55; }
#room[data-idle="true"] .room-close, #room[data-idle="true"] .seekbar-edge { opacity: .45; }
@media (prefers-reduced-motion: reduce) {
  #room, .room-backdrop, .arc-fill { transition: none; }
  .room-backdrop { animation: none; transform: scale(1.04); }
}

/* ---------- chapters sheet rows ---------- */
.chapter-row {
  display: flex; align-items: center; gap: .2rem; width: 100%;
  border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}
.chapter-row .cr-main {
  display: flex; align-items: baseline; gap: 1rem; flex: 1;
  padding: .8rem .4rem; text-align: left;
  transition: background var(--dur-fast) var(--ease);
}
.chapter-row .cr-main:hover, .chapter-row .cr-main:focus-visible { background: color-mix(in srgb, var(--accent) 8%, transparent); }
/* Offline with the chapter unsaved there is nothing to play, so the row says so rather
   than swallowing the tap (js/room.js paintRows). .btn[disabled] does not reach here —
   .cr-main is not a .btn — so it carries its own, and the hover above is suppressed
   because a row that lights up under the finger reads as tappable. */
.chapter-row .cr-main[disabled] { opacity: .35; cursor: not-allowed; }
.chapter-row .cr-main[disabled]:hover { background: none; }
.chapter-row .cr-dl { min-width: 44px; min-height: 44px; opacity: .7; }
.chapter-row .cr-dl.is-cached { color: var(--accent); opacity: 1; }
.chapter-row .cr-num { font-family: var(--ui); font-size: var(--ap-md); letter-spacing: .3em; color: var(--accent); min-width: 2.4em; }
.chapter-row .cr-title { font-family: var(--serif); font-size: 1.05rem; flex: 1; }
/* --ink-soft, not `opacity: .6` — same measurement as .meta-time in player.css: ink
   at .6 is 4.31:1 on the ch II stock. This row renders on paper in the Chapters sheet
   and on near-black in the Room, and the token is correct in both because the Room
   redeclares it. An opacity would have been wrong in both. */
.chapter-row .cr-dur { font-family: var(--ui); font-size: var(--ap-md); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.chapter-row.is-current .cr-title { color: var(--accent); }
.chapter-row.is-complete .cr-num::after { content: ' ✓'; letter-spacing: 0; }

/* This inherits --ink-soft from the sheet, so `opacity: .65` was dimming an already
   quiet ink: measured 2.91:1 on the jacket stock. --ink-faint is the site's token for
   the quietest legal text (4.72:1 at its worst stock). Third instance of the same
   mistake found on 2026-08-29 — an opacity on text is a colour nobody measured. */
.sheet-note { font-size: .85rem; color: var(--ink-faint); margin-top: 1rem; }

/* ---------- what is left of the room's own styling ----------
   Everything that used to sit here — `#room .btn`, `#room .btn-icon`, and a colour
   re-statement for .room-title / .room-clock / .room-chnum / .room-hebrew — is GONE,
   2026-08-29. The token block at the top of this file redeclares --paper / --ink /
   --ink-soft / --accent / --control-edge / --control-wash, so every shared component
   arrives already dressed for a dark surface. Do not add a `#room .btn` rule back:
   if a control looks wrong in the Room, the token is wrong, not the component.
   These three are real differences of KIND, not of colour, and stay. */
.room-secondary .btn-icon { font-size: var(--ap-md); letter-spacing: .06em; }
.room-btn { font-variant-numeric: lining-nums tabular-nums; }
/* the room's controls sit over a photograph, so the focus ring is offset further out
   than the page's 2px — it has to clear a bright patch, not just a flat paper */
#room .btn:focus-visible, #room .btn-icon:focus-visible { outline-offset: 3px; }