/* ==========================================================================
   NITRATE — REEL.  Pairs with reel.js.  Nothing else.

   Two blocks that were poster rails and are now instruments:
     .rl-booth   what you are in the middle of, on one shared minute rule
     .rl-reg     what arrived, as a dated columnar register

   Every colour comes from tokens.css; none are redefined here.  Safety orange
   carries exactly one meaning per block —
     booth:    WHERE YOU STOPPED.  The playhead in the print, and the figure
               for how long ago you walked out.  Nothing else is orange.
     register: THE SORT AXIS.  The arrival date and its volume bar.  Nothing
               else is orange.
   Both blocks take the host's gutter (--pad-x) and claim no margin of their
   own, so the foyer keeps deciding where they sit.
   ========================================================================== */

.rl {
  display: block;
  position: relative;
  padding: 0 var(--pad-x, 0px);
  margin: 0;
  --rl-act-w: 58px;
}

/* --- heading: a rule with the tally sitting on it ------------------------- */
.rl-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
}
.rl-h {
  font-family: var(--font-marquee, var(--font-display));
  font-size: clamp(17px, 2vw, 23px);
  letter-spacing: -.02em;
  flex: 0 0 auto;
}
.rl-note {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
}
.rl-rule {
  flex: 1 1 auto;
  min-width: 16px;
  height: 0;
  border-top: var(--hair) solid var(--rule);
  transform: translateY(-4px);
}

.rl-empty {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
}

/* the label glued to the drawer, not a strapline */
.rl-cap {
  margin: 16px 0 0;
  padding-left: 12px;
  border-left: var(--hair) solid var(--rule);
  max-width: 108ch;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* shared marks ------------------------------------------------------------ */
.rl-hot { color: var(--accent); }
.rl-dim { color: var(--muted); }

.rl-thumb {
  position: relative;
  aspect-ratio: 2 / 3;
  width: 100%;
  overflow: hidden;
  background: var(--panel-2);
  border: var(--hair) solid var(--rule);
}
.rl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rl-thumb.is-blank img { visibility: hidden; }

/* the shared Plex + Stream pair.  Never inside the row's <button> — an <a>
   cannot live in a button — always an absolutely-parked sibling, in a track
   reserved for it so it can never cover a figure. */
.rl-act {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity .14s ease;
}
.rl-r:hover > .rl-act,
.rl-r:focus-within > .rl-act,
.rl-gr:hover > .rl-act,
.rl-gr:focus-within > .rl-act { opacity: 1; }

/* 🔴 ON A FINGER THE PAIR IS NOT DRAWN AT ALL (spec §4.2: a control that only
   exists on :hover does not exist on a phone).  Both blocks already drop it
   when they are NARROW — the register through `.rl-grid.is-narrow`, the spool
   through the mobile tier at the foot of this file — but both of those are
   WIDTH tests, and a phone held in landscape is 844px wide, which is neither.
   There the pair came back as a 24px, zero-opacity, hover-only control parked
   over a row: unreachable, and 72 invisible tab-stop-free targets a thumb can
   land on by accident.  `(hover: none)` is the test that does not change when
   the phone rotates.  Nothing is lost — the row opens the sheet, and the sheet
   carries the same two controls full size with words on them (the same
   reasoning plexlink.css records for the shell's own hover placements). */
@media (hover: none) {
  .rl-r > .rl-act,
  .rl-gr > .rl-act { display: none; }
}

/* Glyph only in a dense row: the words would be wider than the whole figures
   column.  Both controls set their own aria-label, so nothing is lost to a
   screen reader by dropping the visible one. */
.rl-act .plexlink-label,
.rl-act .nstream-label { display: none; }
.rl-act .plexlink,
.rl-act .nstream-btn { height: 24px; padding: 0 8px; }

/* ══════════════════════════════════════════════════ 1 · THE BOOTH ═══════ */

.rl-booth-body {
  display: grid;
  grid-template-columns: minmax(330px, .92fr) minmax(0, 1.4fr);
  gap: 28px;
  align-items: start;
}
/* the gate and its label are one object; the spool is the other column */
.rl-gate-col { min-width: 0; }
.rl-gate-col .rl-cap { margin-top: 14px; }

/* --- the gate: the print you walked out of, threaded ---------------------- */
.rl-gate {
  background: var(--panel-2);
  border: var(--hair) solid var(--rule);
  padding: 14px 16px 16px;
}
.rl-gate-hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: var(--hair) solid var(--rule);
}
.rl-eye {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.rl-eye-n {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--accent);
  white-space: nowrap;
}

.rl-gate-row { display: flex; gap: 16px; align-items: flex-start; }

/* the lit case, at a quarter of the hero's size */
.rl-case { position: relative; flex: 0 0 clamp(84px, 13vw, 132px); }
.rl-case-art { border-color: var(--rule); }
.rl-case-glass {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(196deg,
              color-mix(in srgb, #fff 16%, transparent) 0 22%,
              transparent 46%);
}

.rl-gate-b { flex: 1 1 auto; min-width: 0; }
.rl-gate-t {
  font-family: var(--font-marquee, var(--font-display));
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: .98;
  letter-spacing: -.01em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.rl-gate-sub {
  margin-top: 5px;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* the one figure the rail could never give: what is LEFT */
.rl-gate-fig {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 14px 0 10px;
}
.rl-fig-n {
  font-family: var(--font-marquee, var(--font-display));
  font-variant-numeric: tabular-nums;
  font-size: clamp(40px, 5.4vw, 62px);
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.03em;
  color: var(--ink);
}
.rl-fig-u {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- the strip: 35 mm, one frame line per ten minutes --------------------- */
.rl-strip {
  --frames: 10;
  position: relative;
  height: 42px;
  border: var(--hair) solid var(--rule);
  background-color: var(--panel);
  background-image: repeating-linear-gradient(90deg,
      transparent 0 calc(100% / var(--frames) - 1px),
      var(--rule) calc(100% / var(--frames) - 1px) calc(100% / var(--frames)));
  overflow: hidden;
}
/* perforations punched through to the page ground, top and bottom */
.rl-strip::before,
.rl-strip::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 7px;
  z-index: 2;
  background: repeating-linear-gradient(90deg,
      var(--panel-2) 0 5px, transparent 5px 13px);
}
.rl-strip::before { top: 3px; }
.rl-strip::after { bottom: 3px; }

.rl-strip-run {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: color-mix(in srgb, var(--ink) 20%, transparent);
}
.rl-strip-head {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--accent);
  z-index: 3;
}
/* runtime the file cannot support: the strip is torn off, never extrapolated */
.rl-strip.is-torn {
  background-image: none;
  -webkit-mask-image: linear-gradient(90deg, #000 62%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 62%, transparent 100%);
}
.rl-strip.is-torn .rl-strip-run {
  background: repeating-linear-gradient(135deg,
      transparent 0 4px,
      color-mix(in srgb, var(--ink) 22%, transparent) 4px 5px);
}

.rl-gate-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--muted);
}

/* the figures, as a register would keep them */
.rl-gate-tab {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 14px;
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}
.rl-gate-tab dt {
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 4px 0;
  border-bottom: var(--hair) solid var(--rule);
}
.rl-gate-tab dd {
  margin: 0;
  text-align: right;
  color: var(--ink);
  padding: 4px 0;
  border-bottom: var(--hair) solid var(--rule);
  white-space: nowrap;
}

.rl-warn {
  margin: 10px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-2);
  border-left: 2px solid var(--rule);
  padding-left: 9px;
}

.rl-gate-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.rl-ghost {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: transparent;
  border: var(--hair) solid var(--rule);
  padding: 0 12px;
  height: 30px;
}
.rl-ghost:hover { color: var(--accent); border-color: var(--accent); }

/* --- the spool: the other prints, on one rule ----------------------------- */
.rl-spool {
  --rl-spool-cols: 26px minmax(0, 1fr) minmax(118px, 1.5fr) 9ch 11ch var(--rl-act-w);
  min-width: 0;
}
.rl-spool-hd,
.rl-r-open {
  display: grid;
  grid-template-columns: var(--rl-spool-cols);
  align-items: center;
  gap: 12px;
  width: 100%;
}
.rl-spool-hd {
  padding: 0 0 6px;
  border-bottom: var(--hair) solid var(--rule);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* the ruler every bar below is measured against: one continuous rule, a tick
   every thirty minutes, a figure on every hour */
.rl-ruler {
  position: relative;
  height: 16px;
  border-top: var(--hair) solid var(--rule);
}
.rl-tick {
  position: absolute;
  top: 0;
  padding-top: 7px;
  transform: translateX(-50%);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  white-space: nowrap;
}
.rl-tick::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 4px;
  background: var(--rule);
}
/* the end figures hang INSIDE the rule — centred on their own tick they push
   the block four pixels wider than the phone it is drawn on */
.rl-tick:first-child { transform: none; }
.rl-tick:first-child::before { left: 0; }
.rl-tick:last-child::before { left: auto; right: 0; }
.rl-tick.is-end { transform: translateX(-100%); }
.rl-tick.is-end::before { left: auto; right: 0; }
.rl-tick.is-minor { padding: 0; }

.rl-rows { display: block; }

/* rows are cut by how stale they are: the shelf shows its own decay */
.rl-div {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0 5px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.rl-div-r { flex: 1 1 auto; height: 0; border-top: var(--hair) solid var(--rule); }
.rl-div-n { font-variant-numeric: tabular-nums; }

.rl-r { position: relative; border-bottom: var(--hair) solid var(--rule); }
.rl-r-open {
  border: 0;
  background: transparent;
  padding: 7px 0;
  text-align: left;
  color: inherit;
}
.rl-r:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.rl-r-open:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.rl-c-th { width: 26px; }
.rl-c-ti { min-width: 0; display: block; }
.rl-r-t {
  display: block;
  font-size: 12.5px;
  font-weight: 620;
  color: var(--ink);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rl-r-e {
  display: block;
  font-size: 10.5px;
  color: var(--muted);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rl-c-le, .rl-c-ag {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  text-align: right;
  white-space: nowrap;
}
.rl-c-ag { letter-spacing: .02em; }
.rl-spool-hd .rl-c-le, .rl-spool-hd .rl-c-ag { font-size: 10px; }

/* THE BAR.  Left edge 0, right edge the running time, both on the block's one
   shared rule — so length is runtime and the gap after the mark is what is
   left.  The orange mark is where you stopped. */
.rl-track { position: relative; height: 14px; display: block; }
/* no trustworthy end: the whole rule is voided for this row, so a two-pixel
   bar reads as "unmeasurable", not as a rendering fault */
.rl-track.is-void::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  border-top: 1px dotted var(--rule);
}
.rl-bar {
  --stop: 0%;
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  height: 12px;
  border: var(--hair) solid var(--rule);
  background: var(--panel-2);
}
.rl-bar-seen {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: color-mix(in srgb, var(--ink) 26%, transparent);
}
.rl-bar-head {
  position: absolute;
  top: -2px; bottom: -2px;
  left: var(--stop);
  width: 2px;
  margin-left: -1px;
  background: var(--accent);
}
/* no trustworthy end: draw only what was watched, keep that width honest even
   when it is two pixels, and tear the bar off where the truth runs out.  The
   left cap guarantees the mark is visible without overstating the figure. */
.rl-bar.is-torn {
  border: 0;
  border-left: 2px solid color-mix(in srgb, var(--ink) 55%, transparent);
  z-index: 1;
  background: repeating-linear-gradient(135deg,
      transparent 0 4px,
      color-mix(in srgb, var(--ink) 30%, transparent) 4px 5px);
  -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 55%, transparent 100%);
}

/* the bars draw themselves in, once, on mount */
.rl-booth.is-in .rl-bar,
.rl-booth.is-in .rl-strip-run { animation: rl-draw .5s cubic-bezier(.2,.75,.3,1) both; }
@keyframes rl-draw { from { transform: scaleX(.001); } to { transform: scaleX(1); } }
.rl-booth.is-in .rl-bar { transform-origin: left center; }
.rl-booth.is-in .rl-strip-run { transform-origin: left center; }
/* the bar is already translated on Y; the keyframe must keep that */
@keyframes rl-draw-y { from { transform: translateY(-50%) scaleX(.001); }
                       to   { transform: translateY(-50%) scaleX(1); } }
.rl-booth.is-in .rl-bar { animation-name: rl-draw-y; }

/* ══════════════════════════════════ 2 · THE ACCESSIONS REGISTER ═════════ */

/* a bound ledger: its own surface, so it reads the same whatever ground the
   host block sits on */
.rl-reg-scroll {
  position: relative;
  background: var(--panel);
  border: var(--hair) solid var(--rule);
  max-height: clamp(400px, 62vh, 760px);
  overflow: auto;
  overscroll-behavior-x: contain;
}
.rl-grid {
  display: block;
  min-width: var(--rl-min, 100%);
  padding: 0 10px 6px;
}

.rl-grid-hd,
.rl-gr-open {
  display: grid;
  grid-template-columns: var(--rl-cols);
  align-items: center;
  gap: 10px;
  width: 100%;
}
.rl-grid-hd {
  position: sticky;
  top: 0;
  z-index: 4;
  height: 26px;
  background: var(--panel);
  border-bottom: var(--hair) solid var(--rule);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* the day: a real date, its tally, and how heavy it was */
.rl-day {
  position: sticky;
  top: 26px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 6px 7px;
  margin: 0 -6px;
  background: var(--panel-2);
  border-bottom: var(--hair) solid var(--rule);
}
.rl-day-d {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.rl-day-a, .rl-day-n {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--muted);
  white-space: nowrap;
}
/* a bar, not a rule: pinned to 140px and pushed to the right so the heaviest
   day cannot draw an orange line the width of the page */
.rl-day-bar {
  flex: 0 0 140px;
  margin-left: auto;
  height: 6px;
  border-bottom: var(--hair) solid var(--rule);
  position: relative;
}
.rl-day-fill {
  position: absolute;
  left: 0; bottom: 0;
  height: 4px;
  background: var(--accent);
  opacity: .85;
}

.rl-gr { position: relative; }
.rl-gr + .rl-gr { border-top: var(--hair) solid var(--rule); }
.rl-gr-open {
  border: 0;
  background: transparent;
  padding: 4px 0;
  text-align: left;
  color: inherit;
}
.rl-gr:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.rl-gr-open:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.rl-g-ti { min-width: 0; display: flex; align-items: baseline; gap: 7px; }
/* the index leader: a register carries the eye from the entry to its figures
   across whatever gap the longest title leaves behind */
.rl-g-ti::after {
  content: '';
  flex: 1 1 auto;
  min-width: 8px;
  border-bottom: 1px dotted var(--rule);
  transform: translateY(-3px);
}
.rl-g-t {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.rl-g-y {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  color: var(--muted);
  flex: 0 0 auto;
}

/* every figure in the register is mono and tabular, so the columns line up */
.rl-n, .rl-k, .rl-g {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rl-n { text-align: right; }
.rl-k { letter-spacing: .08em; color: var(--muted); }
.rl-g { color: var(--muted); }
.rl-grid-hd .rl-n { text-align: right; }
.rl-gr-open .rl-thumb { width: 100%; }
/* a figure that does not apply to this kind of entry — an episode count on a
   film — is held back so it reads as "not applicable", never as "missing" */
.rl-na { color: var(--rule); }

/* --- the ledger on a phone ------------------------------------------------
   Set from the container by reel.js, not from a media query: the tier is
   measured on the scroll box and a viewport query disagrees with it by the
   page gutter.  Everything dropped here is either unreachable by touch or
   repeated elsewhere in the row. */
.rl-grid.is-narrow .rl-act { display: none; }
.rl-grid.is-narrow .rl-g-ti::after { display: none; }   /* the title needs the room */
.rl-grid.is-narrow .rl-day-a { display: none; }         /* the date is right there */
.rl-grid.is-narrow .rl-day-bar { flex-basis: 56px; }
.rl-grid.is-narrow .rl-day { gap: 8px; }

/* ═══════════════════════════════════════════════════════════════ narrow */
@media (max-width: 1080px) {
  .rl-booth-body { grid-template-columns: 1fr; gap: 24px; }
  .rl-gate-row { align-items: flex-start; }
}
/* folded 700 → 760, the house mobile tier (MOBILE_SPEC §1).  1080 is above 820
   and is a desktop fold, so it stays. */
@media (max-width: 760px) {
  /* the heading tally was nowrap+ellipsis inside a flex row that had no room
     for it: "15 part-watched · 15 h 53 m still…" cut off the one figure the
     block exists to report.  Heading and rule keep line one, the tally gets
     line two whole. */
  .rl-head { flex-wrap: wrap; gap: 5px 12px; }
  .rl-h { flex: 0 0 auto; }
  .rl-rule { flex: 1 1 30px; order: 0; }
  .rl-note {
    flex: 1 1 100%;
    order: 1;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: 11.5px;
    line-height: 1.4;
  }

  /* --- text floors on a phone: body ≥12.5, mono figures ≥11 ------------- */
  .rl-cap { font-size: 12.5px; line-height: 1.5; }
  .rl-warn { font-size: 12.5px; }
  .rl-gate-sub { font-size: 12.5px; }
  .rl-eye, .rl-fig-u, .rl-gate-axis { font-size: 11px; }
  .rl-div { font-size: 11px; letter-spacing: .14em; }
  .rl-day-a, .rl-day-n { font-size: 11px; }
  .rl-n, .rl-k, .rl-g { font-size: 11px; }
  .rl-c-le, .rl-c-ag { font-size: 11px; }
  .rl-spool-hd .rl-c-le, .rl-spool-hd .rl-c-ag { font-size: 11px; }
  .rl-grid-hd { font-size: 11px; letter-spacing: .12em; }
  .rl-r-e { font-size: 12.5px; }
  .rl-r-t { font-size: 13px; }
  .rl-g-y { font-size: 11px; }
  .rl-tick { font-size: 11px; }
  .rl-gate-acts .plexlink-label,
  .rl-gate-acts .nstream-label { font-size: 12.5px; }

  /* --- the gate's controls --------------------------------------------
     Resume / Stream / Details were 28, 28 and 30px tall.  They are the reason
     the block exists.  plexlink.css and stream.css are not this agent's to
     edit, so the marquee's trick is repeated here: a two-class selector
     scoped to this one row of buttons. */
  .rl-gate-acts { gap: 9px; margin-top: 16px; }
  .rl-gate-acts .plexlink,
  .rl-gate-acts .nstream-btn { height: 44px; padding: 0 14px; font-size: 12px; }
  .rl-ghost { height: 44px; font-size: 11px; padding: 0 15px; }

  .rl-spool {
    --rl-spool-cols: 24px minmax(0, 1fr) 11ch;
  }
  .rl-r-open {
    grid-template-areas: "th ti ag" "th ba le";
    row-gap: 5px;
    column-gap: 10px;
    align-items: center;
  }
  /* scoped to the ROW: the header grid declares no areas, and a stray
     grid-area name there spawns an implicit track and throws the ruler to the
     far right on top of its own first figure */
  .rl-r-open > .rl-c-th { grid-area: th; align-self: start; width: 24px; }
  .rl-r-open > .rl-c-ti { grid-area: ti; }
  .rl-r-open > .rl-c-ba { grid-area: ba; }
  .rl-r-open > .rl-c-le { grid-area: le; }
  .rl-r-open > .rl-c-ag { grid-area: ag; }
  .rl-r > .rl-act { display: none; }        /* touch opens the sheet instead */
  .rl-spool-hd {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .rl-spool-hd .rl-c-th,
  .rl-spool-hd .rl-c-ti,
  .rl-spool-hd .rl-c-le,
  .rl-spool-hd .rl-c-ag { display: none; }
  .rl-ruler-u { right: 0; }
  .rl-gate-tab { font-size: 11px; }
  .rl-gate-tab dt, .rl-gate-tab dd { padding: 5px 0; }

  /* THE LEDGER DRAWER.  70vh is 591px of an 844px phone: with a finger inside
     it there was no page left to grab, so the natural swipe scrolled the
     register instead of the foyer and the block became a trap.  At 48vh there
     is a screenful of page above and below it at all times, the day headers
     still stack, and it still bounds a register that would otherwise run for
     thousands of pixels. */
  .rl-reg-scroll { max-height: clamp(320px, 48vh, 460px); }
  .rl-gr-open { padding: 6px 0; }
  .rl-day { padding: 10px 6px 8px; }

  /* The day header is date · bar · tally on one line, all three nowrap.  At
     11px the tally is 13px wider than it was at 10, and at 360 that pushed the
     whole ledger into a stubby 13px sideways scroll — a real regression this
     file caused.  The two figures never shrink; the BAR gives the width back
     instead, and because every bar in the register is drawn against the same
     track a narrower track scales all of them equally and the comparison
     between days is unchanged. */
  .rl-grid.is-narrow .rl-day-d,
  .rl-grid.is-narrow .rl-day-n { flex: 0 0 auto; }
  .rl-grid.is-narrow .rl-day-bar { flex: 0 1 56px; min-width: 30px; }
}
/* folded 460 → 760 as well (spec §10: 460 belongs to the mobile tier, not the
   narrow one).  These rules are keyed to the SECOND thing that goes wrong on a
   small screen, so they are still written after the block above and win where
   the two disagree — exactly as they did at 460. */
@media (max-width: 760px) {
  /* reel.js sets --rl-min from each surviving column's declared minimum.  At
     360 that floor lands 14px past the box, so the ledger picked up a stubby
     sideways scroll with no scrollbar and nothing to grab — 14px of hidden
     travel is worse than 14px off a title that is ellipsised anyway.  The
     title track is minmax(96px,1fr) and absorbs it; no column is dropped and
     none falls under its own minimum. */
  .rl-grid { min-width: 100%; }

  .rl-case { flex-basis: 88px; }
  .rl-gate-row { gap: 12px; }
  .rl-cap { padding-left: 10px; }
  .rl-gate { padding: 13px 13px 15px; }
  /* three ghost buttons at 44px will not sit on one 354px line; let them wrap
     cleanly rather than shrink below the target */
  .rl-gate-acts { gap: 8px; }
}

/* ═══════════════════════════════════════════════════════════════ motion */
@media (prefers-reduced-motion: reduce) {
  .rl-act { transition: none; }
  .rl-booth.is-in .rl-bar,
  .rl-booth.is-in .rl-strip-run { animation: none; transform: translateY(-50%); }
  .rl-booth.is-in .rl-strip-run { transform: none; }
}