/* Rise Theatre Arts | seat map on the light (Box Office) theme.
   Same geometry as the seating tools' house.css so house.js renderMap draws
   identically; colors are the official palette: indigo stage, faint open
   seats, pink reserved, teal residents, coral companion, dashed teal
   wheelchair space. */
.house{--seat-w:15px;--gap:3px;--aisle:clamp(18px,3.5vw,46px);--seat:#DDF0F3;--seat-edge:rgba(46,107,121,.2);
  background:#fff;border:1px solid #DDF0F3;border-radius:12px;padding:22px 12px 26px;overflow-x:auto;box-shadow:0 1px 3px rgba(37,42,88,.08)}
.grid{display:grid;grid-template-columns:auto auto auto;column-gap:var(--aisle);row-gap:5px;justify-content:center;align-items:center}
.stage{grid-column:2;margin:0 calc(-1 * var(--aisle)) 6px;height:64px;border-radius:10px;background:#252A58;display:flex;align-items:center;justify-content:center;
  font:600 11px 'DM Sans',system-ui,sans-serif;letter-spacing:.28em;text-transform:uppercase;color:#73DAE5}
.band{grid-column:1 / -1;display:flex;align-items:center;gap:12px;margin:14px 0 8px;color:#6B6B6B;font:600 10px 'DM Sans',system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase}
.band::before,.band::after{content:"";flex:1;height:1px;background:#DDF0F3}
.cell{display:flex;align-items:center;gap:var(--gap);width:100%}
.cell.left{justify-content:flex-end}
.cell.ctr{justify-content:center}
.cell.right{justify-content:flex-start}
.cell.est{background-image:repeating-linear-gradient(45deg,rgba(234,217,121,.28) 0 6px,transparent 6px 12px);outline:1px dashed rgba(208,123,94,.5);outline-offset:2px;border-radius:3px}
/* Labels drawn inside the map are bound to its geometry, not the text ramp
   (DESIGN.md 1.5): a row letter shares a 14 px column with 15 px seats. The
   legend, the zoom chips and everything else around the drawing follow it. */
.rl{font:600 9px 'DM Sans',system-ui,sans-serif;color:#6B6B6B;width:14px;text-align:center;flex:none}

.seat{width:var(--seat-w);height:14px;border-radius:3px 3px 1.5px 1.5px;background:var(--seat);box-shadow:inset 0 -2px 0 var(--seat-edge);flex:none;cursor:pointer;position:relative;transition:transform 120ms var(--ease-out)}
/* C2: hover is a pointer-device affordance only. A lift plus a Teal ring, so
   the seat under the pointer is clear even with reduced motion; no filter.
   Touch gets tap feedback (O4) instead. */
@media (hover:hover) and (pointer:fine){
  .seat:hover{transform:translateY(-1px) scale(1.12);z-index:3;outline:2px solid #2E6B79;outline-offset:1px}
}
.seat:focus-visible{outline:2px solid #2E6B79;outline-offset:2px}
/* O4: a seat the person just tapped settles into its new state. */
/* O4, Reservations only. Box Office's first-load fill is seat-fill in
   index.html: a different shape at a different speed, deliberately. */
@keyframes seat-settle{from{transform:scale(.96);opacity:.4}to{transform:none;opacity:1}}
.seat.just{animation:seat-settle 140ms var(--ease-out)}
.seat.comp{background:#DC9880;box-shadow:inset 0 -2px 0 #D07B5E}
.seat.chair{background:transparent;border:1px dashed #2E6B79;border-radius:2px;box-shadow:none}
.seat.chair::before{content:"";position:absolute;inset:0;margin:auto;width:5px;height:5px;border:1.5px solid #2E6B79;border-radius:50%}
.seat.obs{box-shadow:inset 0 -2px 0 var(--seat-edge),0 0 0 1.5px #EAD979}

/* reservation states */
.seat.rsv{background:#D3659B;box-shadow:inset 0 -2px 0 #B04D81}
.seat.res{background:repeating-linear-gradient(45deg,#2E6B79 0 3px,#3D8A9A 3px 6px);box-shadow:inset 0 -2px 0 #252A58}
.seat.hld{background:repeating-linear-gradient(45deg,rgba(107,107,107,.7) 0 3px,rgba(107,107,107,.35) 3px 6px);box-shadow:inset 0 -2px 0 #6B6B6B}
.seat.mine{background:#73DAE5;box-shadow:inset 0 -2px 0 #2E6B79}
.seat.taken{background:rgba(107,107,107,.35);box-shadow:inset 0 -2px 0 rgba(107,107,107,.6);cursor:default}
.seat.taken:hover{transform:none;outline:0}
.seat.chair.rsv,.seat.chair.mine,.seat.chair.res,.seat.chair.hld,.seat.chair.taken{border-style:solid}
.seat.chair.rsv{border-color:#D3659B;background:rgba(211,101,155,.35)}
.seat.chair.mine{border-color:#2E6B79;background:rgba(115,218,229,.55)}
.seat.chair.res{border-color:#2E6B79;background:repeating-linear-gradient(45deg,#2E6B79 0 3px,#3D8A9A 3px 6px)}
.seat.chair.hld{border-color:#6B6B6B;background:repeating-linear-gradient(45deg,rgba(107,107,107,.7) 0 3px,rgba(107,107,107,.35) 3px 6px)}
.seat.chair.taken{border-color:rgba(107,107,107,.6);background:rgba(107,107,107,.35)}

.booth,.techspace{height:16px;border-radius:3px;display:flex;align-items:center;justify-content:center;font:600 7.5px 'DM Sans',system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#6B6B6B;flex:none;
  width:calc(var(--spans) * var(--seat-w) + (var(--spans) - 1) * var(--gap));overflow:hidden;white-space:nowrap}
.booth{border:1px solid #DDF0F3;background:#F0FAFB}
.techspace{border:1px dashed #DDF0F3}

/* legend */
.legend{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;margin-top:14px;font-size:13px;color:#6B6B6B}
.legend span{display:flex;align-items:center;gap:7px}
.chip{width:14px;height:12px;border-radius:3px 3px 1.5px 1.5px;display:inline-block;flex:none;background:#DDF0F3;box-shadow:inset 0 -2px 0 rgba(46,107,121,.2)}
.chip.c{background:#DC9880;box-shadow:inset 0 -2px 0 #D07B5E}
.chip.w{background:transparent;border:1px dashed #2E6B79;border-radius:2px;box-shadow:none}
.chip.rsv{background:#D3659B;box-shadow:inset 0 -2px 0 #B04D81}
.chip.res{background:repeating-linear-gradient(45deg,#2E6B79 0 3px,#3D8A9A 3px 6px);box-shadow:none}
.chip.hld{background:repeating-linear-gradient(45deg,rgba(107,107,107,.7) 0 3px,rgba(107,107,107,.35) 3px 6px);box-shadow:none}
.chip.mine{background:#73DAE5;box-shadow:inset 0 -2px 0 #2E6B79}
.chip.taken{background:rgba(107,107,107,.35);box-shadow:inset 0 -2px 0 rgba(107,107,107,.6)}


/* ---- R21 section zoom: chips above the map, dimming inside it ---- */
.zoombar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 10px}
.zoomlab{font:600 13px 'DM Sans',system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#6B6B6B;margin-right:2px}
.zoomchip{min-height:34px;padding:5px 12px;border:1.5px solid rgba(46,107,121,.35);border-radius:20px;background:#fff;color:#2E6B79;
  font:600 13px 'DM Sans',system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.zoomchip:hover{border-color:#2E6B79}
.zoomchip{transition:transform 120ms var(--ease-out)}
.zoomchip:active{transform:scale(.97)}
.zoomchip:focus-visible{outline:2px solid #2E6B79;outline-offset:2px}
.zoomchip[aria-pressed=true]{background:#2E6B79;border-color:#2E6B79;color:#fff}
.zoomnow{font-size:13px;color:#6B6B6B;margin-left:auto}
@media (max-width:600px){.zoomnow{margin-left:0;flex:1 0 100%}}
.house.zoomed{overflow:hidden}
.grid{transform-origin:0 0}
.cell,.band,.stage{transition:opacity 300ms var(--ease-out)}
.cell.dim,.band.dim,.stage.dim{opacity:.28;pointer-events:none}
.band[role=button]{cursor:pointer}
.band[role=button]:focus-visible{outline:2px solid #2E6B79;outline-offset:2px;border-radius:3px}

@media (prefers-reduced-motion:reduce){
  .seat,.cell,.band,.stage,.grid,.zoomchip{transition:none!important}
  .zoomchip:active{transform:none}
  .seat.just{animation:none}
}

@media (max-width:600px){.house{--seat-w:11px;--gap:2px;--aisle:14px;padding:16px 8px 20px}.seat{height:11px}.stage{height:48px}}
@media print{.house{box-shadow:none;border-color:#6B6B6B}.seat,.booth,.techspace,.stage,.chip{print-color-adjust:exact;-webkit-print-color-adjust:exact}}