/* ============================================================
   DOS 2026 — LIVE SEAT MAP (added 2026-08-06)
   Extends the design system in /css/style.css. Tokens reused:
   --ink #0A0E17 · --surface · --orange #F26A21 · --serif Cormorant
   Mobile first. No dependency, no framework, no web font of its own.
   ============================================================ */

/* The main nav is deliberately NOT touched: an eighth item squeezes the
   "Request Invitation" button into two lines below ~1300px. The seat map is
   reached from the Tickets section, the footer and /seats/ instead. */

.seatwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:start;margin-top:52px;text-align:left}

/* ---------- the room ---------- */
.seatroom{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px}
.seatroom svg{display:block;width:100%;height:auto;overflow:visible}
.seat{fill:transparent;stroke:rgba(167,176,194,.42);stroke-width:1.4;transition:fill .25s,stroke .25s,opacity .25s;cursor:pointer}
.seat:hover,.seat:focus{stroke:var(--orange);stroke-width:2;outline:none}
.seat.taken{stroke-width:0}
.seat.dim{opacity:.22}
.seat.hl{stroke-width:2}
.seatroom .ctr-l1{font-family:var(--serif);font-size:15px;fill:#fff}
.seatroom .ctr-l2{font-size:6.4px;letter-spacing:.28em;fill:var(--muted);text-transform:uppercase}
.seatroom .ctr-n{font-family:var(--serif);font-size:34px;fill:var(--orange)}
/* Cormorant defaults to old-style figures — a "0" then reads as an "O".
   Force lining figures wherever the map shows a number that must be read exactly. */
.seatroom .ctr-n,.seatcount b,.seatpanel .pfig b{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}

.seattip{position:absolute;pointer-events:none;background:var(--ink);border:1px solid var(--line);border-radius:5px;padding:6px 10px;font-size:12.5px;color:var(--text);white-space:nowrap;opacity:0;transform:translate(-50%,-135%);transition:opacity .15s;z-index:3}
.seattip.on{opacity:1}

.seatcap{margin-top:14px;text-align:center;font-size:12.5px;color:var(--muted);letter-spacing:.02em}

/* ---------- counter ---------- */
.seatcount{display:flex;gap:26px;flex-wrap:wrap;margin-bottom:26px}
.seatcount div{min-width:78px}
.seatcount b{display:block;font-family:var(--serif);font-size:40px;line-height:1;color:#fff}
.seatcount .open b{color:var(--orange)}
.seatcount span{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}

.seatrule{font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.45;color:var(--text);border-left:2px solid var(--orange);padding-left:16px;margin-bottom:28px}

/* ---------- category chips ---------- */
.seatchips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:22px}
.chip{display:inline-flex;align-items:center;gap:8px;-webkit-user-select:none;user-select:none;background:transparent;border:1px solid rgba(255,255,255,.24);color:var(--text);border-radius:999px;padding:9px 15px;font-size:13.5px;font-family:var(--sans);cursor:pointer;transition:border-color .2s,background .2s}
.chip:hover{border-color:rgba(255,255,255,.55)}
.chip[aria-pressed="true"]{border-color:var(--orange);background:var(--orange-soft)}
.chip i{width:9px;height:9px;border-radius:50%;display:block;flex:none}

/* ---------- availability panel ---------- */
.seatpanel{background:var(--surface2);border:1px solid var(--line);border-radius:10px;padding:24px 26px;min-height:186px}
.seatpanel h3{font-size:23px;margin-bottom:6px}
.seatpanel .pnote{font-size:14.5px;color:var(--muted);line-height:1.55;margin-bottom:16px}
.seatpanel .pfig{display:flex;gap:24px;flex-wrap:wrap;margin-bottom:14px}
.seatpanel .pfig div b{display:block;font-family:var(--serif);font-size:27px;line-height:1.1;color:#fff}
.seatpanel .pfig div span{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.seatpanel .plimit{font-size:13.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:13px;margin-bottom:17px}
.seatpanel .plimit b{color:var(--text)}
.seatpanel .btn{width:100%;text-align:center}

.seatacts{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.seatacts .btn{flex:1 1 190px;text-align:center}

.seatdisc{margin:34px auto 0;text-align:left;font-size:12.5px;color:var(--muted);line-height:1.6;max-width:860px}

/* ---------- standalone /seats/ page ---------- */
.seathead{padding:132px 0 0}
.seathead .eyebrow{margin-bottom:14px}
.seathead h1{font-size:clamp(34px,5.4vw,58px);letter-spacing:.01em;margin-bottom:18px}
.seathead .when{font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.seatpage-foot{border-top:1px solid var(--line);padding:34px 0;font-size:13px;color:var(--muted)}
.seatpage-foot a{color:var(--muted);text-decoration:underline}
.seatpage-foot a:hover{color:var(--orange-hi)}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .seatwrap{grid-template-columns:1fr;gap:32px}
  .seatroom{padding:10px}
  .seatcount b{font-size:34px}
  .seathead{padding:104px 0 0}
}
@media(max-width:430px){
  .seatcount{gap:18px}
  .seatcount div{min-width:64px}
  .seatpanel{padding:20px}
  .chip{padding:8px 13px;font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){
  .seat,.seattip{transition:none}
}