/* Layout — the page's own drawing: the bays at their physical width on one CSS grid (--n positions of --u each),
   a 13″ bay spanning two positions, and the key for its bay looks. Zoom (Fit / Close-up) and "Show reels now" are a
   radio pair and a switch the CSS reads. */
@layer page {
  .rl-shape { display: flex; flex-wrap: wrap; gap: var(--s5) var(--s8); align-items: start; }
  .rl-shape > :is(.rl-now, .rl-wide) { flex-basis: 100%; }
  .rl-radios { min-height: var(--h-md); }
  .rl-now { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); }
  .rl-now + .rl-now { padding-top: 0; border-top: 0; }

  .rl-ed { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s6); align-items: start; }
  .rl-ed > * { min-width: 0; }
  .rl-bar { justify-content: space-between; padding: var(--s3) var(--s5); border-bottom: 1px solid var(--line); }
  .rl-scroller { container-type: inline-size; overflow-x: auto; padding: var(--s5) var(--s5) var(--s4); }
  .rl-foot { padding: 0 var(--s5) var(--s4); }
  .rl-names-d { margin: 0 var(--s5) var(--s4); }
  .rl-names { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s6); }
  .rl-tlg { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s2) var(--s3); align-items: center; }
  .rl-acts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }

  /* The bay grid */
  .rl-grid { --n: 60; --u: max(4px, calc((100cqi - 96px - (var(--n) - 1) * 1px) / var(--n))); --g: 1px; display: grid; grid-template-columns: 80px repeat(var(--n), var(--u)); column-gap: var(--g); row-gap: var(--s2); width: max-content; }
  .rl-canvas:has(#zoomseg input[value="close"]:checked) .rl-grid { --u: 44px; --g: 2px; }
  .rl-row { display: contents; }
  .rl-grp, .rl-num, .rl-bay { grid-column: var(--col) / span var(--span, 1); }
  .rl-num { font-family: var(--font-mono); font-size: 11px; color: var(--text-2); white-space: nowrap; overflow: visible; }
  .rl-grp { height: 22px; border: 1px solid var(--line-2); border-bottom: 0; border-radius: var(--r1) var(--r1) 0 0; font-size: 11px; font-weight: 600; color: var(--text-2); padding: 3px 6px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--sheet-2); }
  .rl-tier { align-self: center; font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--text-2); display: grid; gap: 2px; min-width: 0; }
  .rl-tier small { max-width: 78px; line-height: 1.3; font-family: var(--font-ui); font-weight: 500; font-size: 11px; color: var(--text-3); }
  .rl-bay { position: relative; height: 64px; border-radius: 3px; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--line-2); cursor: pointer; display: grid; place-items: end center; font: 600 10px var(--font-mono); color: var(--text-3); min-width: 0; }
  .rl-row[data-tall] .rl-bay { height: 136px; }
  .rl-bay:hover { box-shadow: inset 0 0 0 1.5px var(--ink-400); }
  .rl-bay:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; z-index: 2; }
  :is(.rl-bay, .rl-sw)[data-kind="13"] { background: var(--info-surface); box-shadow: inset 0 0 0 1px var(--info-line); }
  .rl-bay[data-kind="13"]::before { content: ''; position: absolute; top: 10px; left: 50%; width: min(78%, 40px); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--info-line); }
  .rl-row[data-tall] .rl-bay[data-kind="13"]::before { top: 44px; }
  :is(.rl-bay, .rl-sw)[data-kind="off"] { background: repeating-linear-gradient(135deg, var(--line-2) 0 2px, transparent 2px 6px); box-shadow: inset 0 0 0 1px var(--ink-300); }
  :is(.rl-bay, .rl-sw)[data-kind="exp"] { background: var(--sheet-sunk); box-shadow: inset 0 0 0 1px var(--line); outline: 1px dashed var(--ink-300); outline-offset: -1px; }
  /* Unknown presence (board 5 silent): the same dashed "Unknown" mark as every rack drawing. */
  :is(.rl-bay, .rl-sw)[data-unknown] { background: transparent; box-shadow: none; outline: 1.5px dashed var(--cell-line); outline-offset: -1.5px; }
  :is(.rl-bay, .rl-sw)[data-changed] { box-shadow: inset 0 0 0 2px var(--warn-dot); }
  .rl-bay[aria-selected="true"] { box-shadow: inset 0 0 0 2px var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; z-index: 1; }
  .rl-bay__n { padding-bottom: 4px; display: none; }
  .rl-canvas:has(#zoomseg input[value="close"]:checked) .rl-bay__n, .rl-bay[data-kind="13"] .rl-bay__n { display: block; }
  .rl-reel { position: absolute; left: 50%; top: 22px; width: 6px; height: 6px; border-radius: 50%; transform: translateX(-50%); background: var(--accent); }
  .rl-row[data-tall] .rl-reel { top: 58px; }
  .rl-canvas:has(#pres:not(:checked)) .rl-reel { display: none; }
  .rl-scroller[data-kind="stencil"] .rl-bay::after { content: ''; position: absolute; inset: 8px 30%; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--line-2); }
  .rl-scroller[data-kind="stencil"] .rl-reel { width: 4px; height: 24px; border-radius: 2px; top: 16px; }

  /* The drawing's key */
  .rl-key { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); font-size: var(--t-cap); color: var(--text-2); }
  .rl-key li { display: inline-flex; align-items: center; gap: 6px; }
  .rl-sw { flex: none; width: 12px; height: 12px; border-radius: 2px; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--line-2); }
  .rl-sw[data-kind="tall"] { height: 24px; }
  .rl-sw[data-kind="slot"] { width: 8px; height: 24px; }
  .rl-key .rl-reel { position: static; transform: none; display: inline-block; }

  @media (max-width: 1180px) { .rl-ed { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 700px) { .rl-names { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 560px) {
    .rl-scroller { padding: var(--s3); } .rl-bar { padding: var(--s3); }
    .rl-grid { grid-template-columns: 40px repeat(var(--n), var(--u)); } .rl-tier small { display: none; }
    .rl-acts { grid-template-columns: minmax(0, 1fr); }
  }
}