/* W17-06 — booking resource constellation inside chapter 04 (#ch-services, assets/js/booking-cinema.js).
   Motif: a temporal control room. Deep cobalt midnight, one luminous time ruler, a 3-resource × 6-slot heatmap
   whose chosen column is linked by a vertical beam, an all-or-none medallion beside it, and an ivory reading band.
   Accents: teal (available / confirmed), violet (requested / temporary hold), copper (occupied / collision).
   Deliberately not the P2P paper desk or the sales gold ribbon. Readable sizes: nothing customers read is below
   14px; touch controls ≥40px. Text is never faded; entrances move only (transform). */

.bkc {
  --bkc-teal: #3fd6c6; --bkc-teal-2: #b4fff2; --bkc-violet: #9b87ff; --bkc-violet-2: #e2dbff; --bkc-copper: #ff9a57;
  --bkc-ink: #0b1630; --bkc-ivory: #fbf8f0;
  --bkc-c-idle: #3a4a78; --bkc-c-free: #3fd6c6; --bkc-c-busy: #a8613a; --bkc-c-clash: #ff9a57;
  --bkc-c-ask: #9b87ff; --bkc-c-held: #c9bcff; --bkc-c-booked: #6ff0e0;
  grid-column: 1 / -1; position: relative; display: grid; gap: 1rem; margin-top: .5rem;
  padding: clamp(.9rem, .4rem + 1.6vw, 1.75rem); border-radius: 26px; overflow: clip;
  background:
    radial-gradient(60% 50% at 100% 0%, rgb(63 214 198 / .14), transparent 62%),
    radial-gradient(55% 45% at 0% 100%, rgb(155 135 255 / .16), transparent 60%),
    radial-gradient(40% 30% at 30% 0%, rgb(255 154 87 / .07), transparent 70%),
    linear-gradient(165deg, #0b1d57 0%, #08143f 48%, #050b26 100%);
  border: 1px solid rgb(63 214 198 / .3);
  box-shadow: 0 40px 90px -50px rgb(0 0 0 / .9), inset 0 1px 0 rgb(255 255 255 / .06);
  scroll-margin-top: calc(var(--header-h) + 12px);
}
.bkc ::selection { background: rgb(63 214 198 / .35); }

/* ---------- head ---------- */
.bkc-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem 1.5rem; align-items: end; }
.bkc-kicker { grid-column: 1 / -1; margin: 0; color: var(--bkc-teal-2); font-size: .875rem; font-weight: 600; }
.bkc-head h4 { margin: 0; color: #fff; font-family: var(--font-display); font-size: clamp(1.35rem, 1.05rem + 1vw, 1.9rem); font-weight: 600; line-height: 1.4; text-wrap: balance; }
.bkc-lead { grid-column: 1; margin: 0; max-width: 70ch; color: var(--text-2); font-size: 1rem; line-height: 1.8; }
.bkc-legend { grid-column: 2; grid-row: 2 / span 2; display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.bkc-legend li, .bkc-ev li > b { display: inline-flex; align-items: center; gap: .4rem; font-size: .875rem; font-weight: 600; line-height: 1.5; }
.bkc-legend li { padding: .2rem .65rem; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text-1); }
.bkc-legend li::before, .bkc-ev li > b::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; }
.bkc-legend .is-verified::before { background: var(--ok); }
.bkc-legend .is-runtime::before { background: var(--warn); }
.bkc-legend .is-example::before { background: transparent; border: 2px dashed #c9b6ff; }

/* ---------- stage (runway + sticky, driven by stage.js) ---------- */
.bkc-run { display: grid; gap: .5rem; }
.bkc-sticky { display: grid; gap: .6rem; align-content: start; }
.bkc-run.is-staged::after { content: ""; display: block; height: var(--stage-run, 0px); }
.bkc-run.is-staged .bkc-sticky { position: sticky; top: calc(var(--header-h) + 12px); }
.bkc-run.is-staged, .bkc-run.is-staged * { overflow-anchor: none; }
.bkc-hint { margin: 0; color: var(--text-2); font-size: .875rem; line-height: 1.6; }
.bkc-hint__scroll { display: none; }
.bkc-run.is-staged .bkc-hint__scroll { display: inline; }
.bkc-run.is-staged .bkc-hint__manual { display: none; }

.bkc-top { display: flex; align-items: center; gap: .5rem .75rem; }
.bkc-ctrl { flex: none; display: inline-flex; align-items: center; gap: .5rem; }
.bkc-nav { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgb(63 214 198 / .5); background: rgb(255 255 255 / .03); color: var(--text-1); cursor: pointer; transition: background var(--dur-1), border-color var(--dur-1); }
.bkc-nav svg { width: 18px; height: 18px; }
.bkc-nav:hover:not(:disabled) { background: rgb(63 214 198 / .16); border-color: var(--bkc-teal); }
.bkc-nav:disabled { cursor: default; color: var(--text-3); border-color: var(--line-2); }
.bkc-nav:focus-visible, .bkc-tab:focus-visible, .bkc-scene:focus-visible, .bkc-mod:focus-visible, .bkc-limit:focus-visible, .bkc-limit a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.bkc-count { min-width: 3.2em; color: var(--bkc-teal-2); font-family: var(--font-num); font-size: .95rem; font-weight: 600; text-align: center; direction: ltr; }

/* moment rail: six capsules over one light beam that fills from the right (RTL start) */
.bkc-rail { position: relative; flex: 1 1 auto; min-width: 0; padding-bottom: 7px; }
.bkc-rail__beam { position: absolute; bottom: 0; inset-inline: 1%; height: 3px; border-radius: 3px; background: rgb(150 172 224 / .18); pointer-events: none; }
.bkc-rail__beam i { position: absolute; inset-block: 0; inset-inline-start: 0; width: calc(var(--bkc-f, 0) * 100%); border-radius: inherit; background: linear-gradient(270deg, var(--bkc-teal), var(--bkc-violet)); box-shadow: 0 0 14px rgb(63 214 198 / .7); transition: width .45s var(--ease-out); }
.bkc-run.is-staged .bkc-rail__beam i { width: calc(clamp(0, (var(--stage-p, 0) * 6 - .5) / 5, 1) * 100%); transition: width .12s linear; }
.bkc-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .35rem; }
.bkc-tab { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .45rem; min-height: 48px; padding: .3rem .5rem; border-radius: 14px; border: 1px solid rgb(150 172 224 / .22); background: rgb(255 255 255 / .025); color: var(--text-2); font: inherit; text-align: start; cursor: pointer; transition: border-color var(--dur-2), background-color var(--dur-2); }
.bkc-tab__n { grid-row: 1 / span 2; position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgb(63 214 198 / .35); background: #0a1843; color: var(--text-2); font-family: var(--font-num); font-size: .875rem; font-weight: 700; }
.bkc-tab b { min-width: 0; color: var(--text-1); font-size: .95rem; font-weight: 600; line-height: 1.3; }
.bkc-tab small { min-width: 0; color: var(--text-2); font-size: .875rem; line-height: 1.3; }
.bkc-tab small .ident { font-family: var(--font-num); }
.bkc-tab:hover { border-color: rgb(63 214 198 / .5); }
.bkc-tab.is-past .bkc-tab__n { border-color: var(--bkc-teal); background: #0c3340; color: var(--bkc-teal-2); }
.bkc-tab[aria-selected="true"] { border-color: var(--bkc-teal); background: #0d2c55 linear-gradient(135deg, rgb(63 214 198 / .2), rgb(155 135 255 / .14)); }
.bkc-tab[aria-selected="true"] .bkc-tab__n { border-color: var(--bkc-teal-2); background: var(--bkc-teal); color: #03241f; box-shadow: 0 0 0 5px rgb(63 214 198 / .18); }
.bkc-tab[aria-selected="true"] small { color: var(--bkc-teal-2); }
.bkc-meter { display: none; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.bkc-meter i { height: 4px; border-radius: 4px; background: var(--line-2); transition: background var(--dur-2); }
.bkc-meter i.is-on { background: var(--bkc-teal); }

/* ---------- scene: control room (matrix + medallion) over the ivory reading band ---------- */
.bkc-scene { display: grid; gap: .6rem; border-radius: 20px; }
.bkc-room { display: grid; gap: .5rem; min-width: 0; padding: .7rem .85rem; border-radius: 20px; border: 1px solid rgb(63 214 198 / .24);
  background: radial-gradient(70% 90% at 50% 0%, rgb(63 214 198 / .1), transparent 70%), #081743; box-shadow: inset 0 1px 0 rgb(255 255 255 / .05); }
.bkc-room__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem 1rem; }
.bkc-room__t { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin: 0; }
.bkc-room__t b { color: #fff; font-family: var(--font-display); font-size: 1rem; font-weight: 600; line-height: 1.5; }
.bkc-ex { padding: 0 .55rem; border: 1px dashed #c9b6ff; border-radius: 999px; color: var(--bkc-violet-2); font-size: .875rem; font-weight: 600; line-height: 1.6; }
.bkc-keys { display: flex; flex-wrap: wrap; gap: .3rem .75rem; margin: 0; padding: 0; list-style: none; }
.bkc-keys li { display: inline-flex; align-items: center; gap: .35rem; color: var(--text-1); font-size: .875rem; line-height: 1.5; }
.bkc-keys li::before { content: ""; flex: none; width: 13px; height: 13px; border-radius: 4px; border: 1px solid; }
.bkc-room__body { display: grid; grid-template-columns: minmax(0, 1fr) 11.5rem; gap: .9rem; align-items: center; }
.bkc-matrix { min-width: 0; }

/* the grid: desktop = resources are rows, slots are columns (placed by --dr/--dc) */
.bkc-grid { position: relative; display: grid; grid-template-columns: minmax(6.6rem, 1.15fr) repeat(6, minmax(0, 1fr)); grid-template-rows: auto repeat(3, minmax(46px, auto)); gap: 6px; }
.bkc-grid > * { grid-row: var(--dr); grid-column: var(--dc); position: relative; z-index: 1; min-width: 0; }
/* the luminous time ruler under the slot heads */
.bkc-grid::before { content: ""; grid-row: 1; grid-column: 2 / span 6; align-self: end; height: 2px; border-radius: 2px; background: linear-gradient(270deg, var(--bkc-teal), var(--bkc-violet) 55%, var(--bkc-copper)); box-shadow: 0 0 12px rgb(63 214 198 / .6); z-index: 1; }
.bkc-grid > .bkc-beam { grid-row: 1 / span 4; grid-column: var(--bc); z-index: 0; margin: -4px; border-radius: 14px; pointer-events: none;
  background: linear-gradient(180deg, rgb(63 214 198 / .38), rgb(63 214 198 / .1)); box-shadow: 0 0 0 1px rgb(63 214 198 / .55), 0 0 30px rgb(63 214 198 / .4); transform-origin: top center; }
/* the filament: visible in the gaps between the three claims, it links them across the same time */
.bkc-beam::before { content: ""; position: absolute; inset-block: 10px; inset-inline-start: calc(50% - 1.5px); width: 3px; border-radius: 3px; background: linear-gradient(180deg, #fff, var(--bkc-teal)); box-shadow: 0 0 10px var(--bkc-teal); }
.bkc-beam.is-ask { background: linear-gradient(180deg, rgb(155 135 255 / .34), rgb(155 135 255 / .08)); box-shadow: 0 0 0 1px rgb(155 135 255 / .6), 0 0 28px rgb(155 135 255 / .4); }
.bkc-beam.is-ask::before { background: repeating-linear-gradient(180deg, var(--bkc-violet-2) 0 6px, transparent 6px 11px); box-shadow: none; }
.bkc-beam.is-clash { background: linear-gradient(180deg, rgb(63 214 198 / .3) 0 64%, rgb(255 154 87 / .38) 64%); box-shadow: 0 0 0 1px rgb(255 154 87 / .6), 0 0 28px rgb(255 154 87 / .35); }
.bkc-beam.is-clash::before { background: linear-gradient(180deg, var(--bkc-teal-2) 0 60%, transparent 60% 74%, var(--bkc-copper) 74%); }
.bkc-beam.is-held { background: linear-gradient(180deg, rgb(155 135 255 / .45), rgb(155 135 255 / .14)); box-shadow: 0 0 0 2px rgb(201 188 255 / .75), 0 0 36px rgb(155 135 255 / .55); }
.bkc-beam.is-held::before { background: linear-gradient(180deg, #fff, var(--bkc-violet)); box-shadow: 0 0 12px var(--bkc-violet); }
.bkc-beam.is-booked { box-shadow: 0 0 0 2px rgb(180 255 242 / .8), 0 0 40px rgb(63 214 198 / .55); }

.bkc-corner { display: grid; align-content: end; gap: 0; padding: 0 .2rem .45rem; color: var(--text-2); font-size: .875rem; line-height: 1.35; }
.bkc-corner span:last-child { color: var(--bkc-teal-2); }
.bkc-slot { display: grid; justify-items: center; align-content: end; gap: 0; padding: .1rem .1rem .55rem; text-align: center; }
.bkc-slot::after { content: ""; position: absolute; bottom: 0; inset-inline-start: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: #0a1843; border: 2px solid var(--bkc-teal); }
.bkc-slot.is-beam::after { background: #fff; box-shadow: 0 0 10px var(--bkc-teal); }
.bkc-slot__day { color: var(--text-2); font-size: .875rem; line-height: 1.45; }
.bkc-slot__time { color: #fff; font-family: var(--font-num); font-size: 1rem; font-weight: 700; line-height: 1.35; }
.bkc-slot.is-beam .bkc-slot__time { color: var(--bkc-teal-2); }
.bkc-tag { display: inline-block; max-width: 100%; margin-top: .2rem; padding: 0 .45rem; border-radius: 999px; font-size: .875rem; font-weight: 700; line-height: 1.55; white-space: nowrap; }
.bkc-tag.is-ask { background: var(--bkc-violet); color: #120a33; }
.bkc-tag.is-clash { background: var(--bkc-copper); color: #2a1004; }
.bkc-tag.is-fit { background: var(--bkc-teal); color: #03241f; }
.bkc-tag.is-held { background: #c9bcff; color: #140c3a; }
.bkc-tag.is-wait { border: 1px dashed #c9b6ff; background: #1a1446; color: var(--bkc-violet-2); }
.bkc-tag.is-booked { background: #fff; color: #03241f; }
.bkc-tag .ident { font-family: var(--font-num); }
.bkc-grid > .is-day { margin-inline-start: .55rem; } /* Thursday | Saturday */

.bkc-res { display: grid; align-content: center; gap: 0; padding: .25rem .55rem; border-radius: 12px; border: 1px solid var(--line-2); background: #0b1c4f; }
.bkc-res b { color: #fff; font-size: .95rem; font-weight: 600; line-height: 1.4; }
.bkc-res span { color: var(--text-2); font-size: .875rem; line-height: 1.35; }

.bkc-cell { display: grid; place-items: center; min-height: 46px; padding: 0 2px; border-radius: 10px; border: 1px solid; font-size: .875rem; font-weight: 700; line-height: 1.3; text-align: center; }
.bkc-cell.is-idle, .bkc-keys .is-idle::before { background-color: #0c1a44; border: 1px dashed rgb(150 172 224 / .35); color: #b8c4e6; }
.bkc-cell.is-free, .bkc-keys .is-free::before { background-color: #0d3a44; border-color: #2fb8aa; color: var(--bkc-teal-2); }
.bkc-cell.is-busy, .bkc-keys .is-busy::before { background-color: #2b1d2a; border-color: rgb(255 154 87 / .45); color: #ffcfb0; background-image: repeating-linear-gradient(135deg, rgb(255 154 87 / .12) 0 5px, transparent 5px 10px); }
.bkc-cell.is-clash { background-color: #5a2410; border: 2px solid var(--bkc-copper); color: #ffe1cc; box-shadow: 0 0 18px rgb(255 154 87 / .45); }
.bkc-cell.is-ask, .bkc-keys .is-ask::before { background-color: #221a56; border: 1px dashed var(--bkc-violet); color: var(--bkc-violet-2); }
.bkc-cell.is-held, .bkc-keys .is-held::before { background-color: #c9bcff; border-color: #efeaff; color: #140c3a; }
.bkc-cell.is-booked, .bkc-keys .is-booked::before { background-color: #6ff0e0; border-color: #e6fffb; color: #03241f; }
.bkc-cell.is-beam.is-free { border-width: 2px; border-color: var(--bkc-teal); }
.bkc-cell.is-short { outline: 2px dashed var(--bkc-copper); outline-offset: 2px; }
.bkc-cell.is-wait { outline: 2px dashed #c9b6ff; outline-offset: 2px; }

/* all-or-none medallion */
.bkc-orbit { display: grid; justify-items: center; gap: .45rem; text-align: center; }
.bkc-orbit__ring { position: relative; display: grid; place-items: center; width: 122px; height: 122px; }
.bkc-orbit__arcs { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from -60deg, var(--s1) 0 114deg, transparent 114deg 126deg, var(--s2) 126deg 234deg, transparent 234deg 246deg, var(--s3) 246deg 354deg, transparent 354deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 11px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 11px));
  filter: drop-shadow(0 0 8px rgb(63 214 198 / .45)); }
.bkc-orbit__spin { position: absolute; inset: -7px; border-radius: 50%; border: 1px dashed rgb(180 255 242 / .35); }
.bkc-orbit__spin i { position: absolute; top: -5px; inset-inline-start: calc(50% - 5px); width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px var(--bkc-teal); }
.bkc-orbit.is-held .bkc-orbit__ring::after, .bkc-orbit.is-booked .bkc-orbit__ring::after { content: ""; position: absolute; inset: 16px; border-radius: 50%; border: 2px solid #c9bcff; pointer-events: none; }
.bkc-orbit.is-booked .bkc-orbit__ring::after { border-color: var(--bkc-teal-2); }
.bkc-orbit__core { position: relative; display: grid; justify-items: center; gap: 0; max-width: 92px; margin: 0; }
.bkc-orbit__core b { color: #fff; font-family: var(--font-display); font-size: 1.55rem; font-weight: 700; line-height: 1.15; }
.bkc-orbit__core b .money { font-size: 1.05rem; }
.bkc-orbit__core > span { color: #d7e2ff; font-size: .875rem; font-weight: 600; line-height: 1.35; }
.bkc-orbit__keys { display: flex; flex-wrap: wrap; justify-content: center; gap: .15rem .55rem; margin: 0; padding: 0; list-style: none; }
.bkc-orbit__keys li { display: inline-flex; align-items: center; gap: .3rem; color: var(--text-1); font-size: .875rem; line-height: 1.5; }
.bkc-orbit__keys li::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--bkc-c-idle); }
.bkc-orbit__keys .is-free::before { background: var(--bkc-c-free); }
.bkc-orbit__keys .is-busy::before { background: var(--bkc-c-busy); }
.bkc-orbit__keys .is-clash::before { background: var(--bkc-c-clash); }
.bkc-orbit__keys .is-ask::before { background: var(--bkc-c-ask); }
.bkc-orbit__keys .is-held::before { background: var(--bkc-c-held); }
.bkc-orbit__keys .is-booked::before { background: var(--bkc-c-booked); }
.bkc-orbit__cap { margin: 0; max-width: 12rem; color: var(--text-2); font-size: .875rem; line-height: 1.5; }

/* ivory reading band: story | facts + constraint | proof */
.bkc-read { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.05fr) minmax(0, .95fr); gap: .5rem 1.1rem; align-items: start; padding: .85rem 1rem .8rem; border-radius: 18px; background: var(--bkc-ivory); color: var(--bkc-ink); box-shadow: 0 26px 50px -26px rgb(0 0 0 / .85), 0 0 0 1px rgb(10 20 48 / .06); }
.bkc-read::before { content: ""; position: absolute; top: 0; inset-inline: 16px; height: 4px; border-radius: 0 0 4px 4px; background: linear-gradient(270deg, #13a99a, #7b63f0 60%, #d0702f); }
.bkc-read > div { min-width: 0; }
.bkc-read__k { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin: 0; color: #0b6b62; font-size: .875rem; font-weight: 700; line-height: 1.5; }
.bkc-read__k span { padding: 0 .55rem; border-radius: 999px; background: #dff4f0; color: #0b4f49; font-weight: 600; }
.bkc-read h5 { margin: .2rem 0 0; color: var(--bkc-ink); font-family: var(--font-display); font-size: 1.08rem; font-weight: 600; line-height: 1.5; text-wrap: balance; }
.bkc-read h5 .ident { font-family: var(--font-num); }
.bkc-read .money .sar { color: inherit; }
.bkc-did { margin: .3rem 0 0; color: #33405f; font-size: .95rem; line-height: 1.7; }
.bkc-facts { display: grid; gap: .3rem; margin: 0; }
.bkc-facts > div { padding: .28rem .55rem; border-radius: 10px; background: #f0ebde; }
.bkc-facts dt { color: #4c5878; font-size: .875rem; font-weight: 500; line-height: 1.45; }
.bkc-facts dd { margin: 0; color: var(--bkc-ink); font-size: .95rem; font-weight: 600; line-height: 1.45; }
.bkc-guard { margin: .35rem 0 0; padding: .35rem .6rem; border-radius: 10px; border: 1px solid #9fdcd3; background: #e7f7f3; color: #0b3b37; font-size: .9rem; line-height: 1.55; }
.bkc-guard b { color: #0b6259; font-weight: 700; }
.bkc-ev { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.bkc-ev li { color: #33405f; font-size: .875rem; line-height: 1.55; }
.bkc-ev li > b { margin-inline-end: .2rem; color: var(--bkc-ink); }
.bkc-ev .is-verified > b::before { background: #0f9d6e; }
.bkc-ev .is-runtime > b::before { background: #c98a00; }
.bkc-ev .is-example > b::before { background: transparent; border: 2px dashed #6b4fd8; }
.bkc-mods { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-top: .45rem; }
.bkc-mods > small { color: #4c5878; font-size: .875rem; margin-inline-end: .1rem; }
.bkc-mod { display: inline-flex; align-items: center; gap: .35rem; min-height: 40px; padding: .1rem .65rem; border-radius: 999px; border: 1px solid #1d3f8f; color: #1d3f8f; font-size: .875rem; font-weight: 600; text-decoration: none; }
.bkc-mod:hover { background: #1d3f8f; color: #fff; }
.bkc-mod small { color: #7a4f00; font-size: .875rem; font-weight: 500; }

.bkc-limit { margin: 0; padding: .65rem .85rem; border-radius: 12px; border: 1px dashed rgb(63 214 198 / .45); color: var(--text-2); font-size: .95rem; line-height: 1.75; }
.bkc-limit b { color: var(--bkc-teal-2); }
.bkc-limit a { color: var(--bkc-teal-2); font-weight: 600; }

/* ---------- motion (transform only; never opacity on text) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .bkc-scene.is-entering .bkc-beam { animation: bkc-beam .7s var(--ease-out) both; }
  .bkc-scene.is-entering .bkc-cell.is-beam { animation: bkc-pop .55s var(--ease-out) .1s both; }
  .bkc-scene.is-entering .bkc-cell.is-beam[data-res="pro"] { animation-delay: .18s; }
  .bkc-scene.is-entering .bkc-cell.is-beam[data-res="dev"] { animation-delay: .26s; }
  .bkc-scene.is-entering .bkc-tag { animation: bkc-pop .5s var(--ease-out) .3s both; }
  .bkc-scene.is-entering .bkc-orbit__arcs { animation: bkc-turn .9s var(--ease-out) both; }
  .bkc-scene.is-entering .bkc-orbit__spin { animation: bkc-orbit 1.6s var(--ease-out) both; }
  .bkc-scene.is-entering .bkc-read > * { animation: bkc-rise .5s var(--ease-out) both; }
  .bkc-scene.is-entering .bkc-read > :nth-child(2) { animation-delay: 70ms; }
  .bkc-scene.is-entering .bkc-read > :nth-child(3) { animation-delay: 140ms; }
  .bkc[data-dir="back"] .bkc-scene.is-entering .bkc-read > * { animation-name: bkc-rise-back; }
  .bkc-orbit.is-held .bkc-orbit__ring::after { animation: bkc-lock 1.4s var(--ease-out) 2; }
  .bkc-tab[aria-selected="true"] .bkc-tab__n { animation: bkc-halo 2.2s var(--ease-out) 2; } /* glow only: never grows the tab */
}
@keyframes bkc-halo { from { box-shadow: 0 0 0 0 rgb(63 214 198 / .6); } to { box-shadow: 0 0 0 9px rgb(63 214 198 / 0); } }
@keyframes bkc-beam { from { transform: scaleY(.12); } to { transform: none; } }
@keyframes bkc-pop { 0% { transform: scale(.9); } 60% { transform: scale(1.04); } 100% { transform: none; } }
@keyframes bkc-turn { from { transform: rotate(-100deg); } to { transform: none; } }
@keyframes bkc-orbit { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes bkc-rise { from { transform: translateY(10px); } to { transform: none; } }
@keyframes bkc-rise-back { from { transform: translateY(-8px); } to { transform: none; } }
@keyframes bkc-lock { from { transform: scale(.92); } to { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) {
  .bkc *, .bkc *::before, .bkc *::after { animation: none !important; transition: none !important; }
}

/* ---------- compact desktop heights (stage only switches on if the tallest moment fits) ---------- */
@media (min-width: 1101px) and (max-height: 860px) {
  .bkc-sticky { gap: .4rem; }
  .bkc-scene { gap: .4rem; }
  .bkc-tab { min-height: 44px; padding-block: .2rem; }
  .bkc-room { gap: .35rem; padding: .5rem .7rem; }
  .bkc-grid { grid-template-rows: auto repeat(3, minmax(40px, auto)); gap: 5px; }
  .bkc-cell { min-height: 40px; }
  .bkc-res { padding-block: .1rem; }
  .bkc-res b, .bkc-res span { line-height: 1.25; }
  .bkc-slot { padding-bottom: .45rem; }
  .bkc-slot__day, .bkc-slot__time { line-height: 1.3; }
  .bkc-tag { margin-top: .1rem; line-height: 1.45; }
  .bkc-orbit { gap: .3rem; }
  .bkc-orbit__ring { width: 108px; height: 108px; }
  .bkc-read { gap: .35rem 1rem; padding: .6rem .85rem .55rem; }
  .bkc-read h5 { line-height: 1.4; }
  .bkc-did { margin-top: .2rem; line-height: 1.55; }
  .bkc-facts { gap: .22rem; }
  .bkc-facts > div { padding: .18rem .5rem; }
  .bkc-facts dt, .bkc-facts dd { line-height: 1.35; }
  .bkc-guard { margin-top: .25rem; padding: .25rem .5rem; line-height: 1.45; }
  .bkc-ev { gap: .15rem; }
  .bkc-ev li { line-height: 1.45; }
  .bkc-mods { margin-top: .3rem; }
  .bkc-mod { min-height: 32px; }
}

/* ---------- narrower desktops, tablet, mobile ---------- */
@media (max-width: 1300px) {
  /* slot columns drop under ~70px: tags may wrap (never spill), and 1101–1300 tabs stack number over label */
  .bkc-tag { white-space: normal; overflow-wrap: anywhere; }
  .bkc-room__body { grid-template-columns: minmax(0, 1fr) 10rem; }
}
@media (min-width: 1101px) and (max-width: 1300px) {
  .bkc-tab { grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: .1rem; padding: .3rem .25rem; text-align: center; }
  .bkc-tab__n { grid-row: auto; }
}
@media (max-width: 1100px) {
  .bkc-head { grid-template-columns: minmax(0, 1fr); }
  .bkc-legend { grid-column: 1; grid-row: auto; display: flex; flex-wrap: wrap; }
  .bkc-top { flex-wrap: wrap; }
  .bkc-rail { flex-basis: 100%; }
  .bkc-ctrl { margin-inline-start: auto; }
  .bkc-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .bkc-read { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bkc-read__story { grid-column: 1 / -1; }
  .bkc-room__body { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .bkc-orbit { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; column-gap: 1rem; text-align: start; }
  .bkc-orbit__ring { grid-row: 1 / span 2; width: 104px; height: 104px; }
  .bkc-orbit__keys { justify-content: start; }
}
@media (max-width: 720px) {
  .bkc { gap: .7rem; border-radius: 20px; }
  .bkc-head { gap: .3rem; }
  .bkc-head h4 { font-size: 1.2rem; line-height: 1.5; }
  .bkc-lead { line-height: 1.7; }
  .bkc-legend { gap: .3rem; }
  .bkc-legend li { gap: .35rem; padding: .05rem .5rem; }
  .bkc-sticky { gap: .5rem; }
  .bkc-rail { padding-bottom: 0; }
  .bkc-rail__beam { display: none; }
  .bkc-meter { display: grid; }
  .bkc-tabs { gap: .3rem; }
  .bkc-tab { min-height: 44px; padding: .2rem .4rem; }
  .bkc-tab__n { grid-row: auto; width: 28px; height: 28px; }
  .bkc-tab small { display: none; }
  .bkc-tab b { font-size: .875rem; line-height: 1.3; }
  .bkc-room { padding: .55rem .6rem; }
}
/* ≤560px: the matrix transposes (slots become rows, resources become columns), so cells stay wide enough to read */
@media (max-width: 560px) {
  .bkc-grid { grid-template-columns: minmax(3.4rem, .7fr) repeat(3, minmax(0, 1fr)); grid-template-rows: auto; gap: 4px; }
  .bkc-grid > * { grid-row: var(--mr); grid-column: var(--mc); }
  .bkc-grid::before { grid-row: 2 / span 6; grid-column: 1; align-self: stretch; justify-self: end; width: 2px; height: auto; background: linear-gradient(180deg, var(--bkc-teal), var(--bkc-violet) 55%, var(--bkc-copper)); }
  .bkc-grid > .bkc-beam { grid-row: var(--bc); grid-column: 1 / span 4; margin: -3px; background: linear-gradient(270deg, rgb(63 214 198 / .38), rgb(63 214 198 / .1)); transform-origin: right center; }
  .bkc-beam::before { inset-block: auto; top: calc(50% - 1.5px); inset-inline: 10px; width: auto; height: 3px; background: linear-gradient(270deg, #fff, var(--bkc-teal)); }
  .bkc-beam.is-ask { background: linear-gradient(270deg, rgb(155 135 255 / .34), rgb(155 135 255 / .08)); }
  .bkc-beam.is-ask::before { background: repeating-linear-gradient(270deg, var(--bkc-violet-2) 0 6px, transparent 6px 11px); }
  .bkc-beam.is-clash { background: linear-gradient(270deg, rgb(63 214 198 / .3) 0 70%, rgb(255 154 87 / .38) 70%); }
  .bkc-beam.is-clash::before { background: linear-gradient(270deg, var(--bkc-teal-2) 0 66%, transparent 66% 76%, var(--bkc-copper) 76%); }
  .bkc-beam.is-held { background: linear-gradient(270deg, rgb(155 135 255 / .45), rgb(155 135 255 / .14)); }
  .bkc-beam.is-held::before { background: linear-gradient(270deg, #fff, var(--bkc-violet)); }
  .bkc-grid > .is-day { margin-inline-start: 0; margin-top: .45rem; }
  .bkc-corner { align-content: end; padding: 0 0 .2rem; }
  .bkc-slot { justify-items: start; align-content: center; padding: .15rem 0; padding-inline-end: .55rem; text-align: start; }
  .bkc-slot::after { bottom: auto; top: calc(50% - 4px); inset-inline-start: auto; inset-inline-end: 0; } /* inside its box: no sideways spill */
  .bkc-tag { padding: 0 .35rem; }
  .bkc-res { padding: .25rem .15rem; text-align: center; }
  .bkc-res b { font-size: .875rem; line-height: 1.3; overflow-wrap: anywhere; }
  .bkc-res span { overflow-wrap: anywhere; }
  .bkc-cell { min-height: 42px; }
  .bkc-room__head { gap: .3rem; }
  .bkc-read { grid-template-columns: minmax(0, 1fr); padding: .8rem .75rem .7rem; }
}
@media (max-width: 440px) {
  .bkc { padding: .7rem; }
  .bkc-keys { gap: .2rem .55rem; }
}
@media (max-width: 379px) {
  .bkc-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 320: three rows of two */
  .bkc-room { padding: .5rem .45rem; }
  .bkc-orbit { column-gap: .6rem; }
  .bkc-orbit__ring { width: 96px; height: 96px; }
}

@media print {
  .bkc-run::after { display: none !important; }
  .bkc-sticky { position: static !important; }
}