/* Tunes Reviews — the one-screen house shell (v6, 2026-11-02).
   House law, applied across the board: the page lives inside a single
   viewport-height stage; every section is a collapsible numbered room —
   a title row at rest in the index; opening a room steps the index
   aside and the content stands whole on one surface, under a slim bar
   with its number, name, and a way back. The footer rides the stage
   as its last item. Dress is Tunes Reviews' own (styles.css variables:
   dark walnut ground, gold accent, Georgia serif) — the shell is what
   transfers from the house pattern, not another site's skin.
   Without the script the page flows long and every room stands open —
   nothing is ever trapped behind a script. */

:root{ --shell-radius:14px; --shell-head-h:52px; }

/* ================= ONE-SCREEN SHELL ================= */
html.js,html.js body{height:100%}
html.js body{display:flex;flex-direction:column;overflow:hidden}
main.stage{display:block}
html.js main.stage{
  flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;
  gap:9px;
  padding:12px clamp(8px,2vw,22px) 14px;
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--card-edge) transparent;
  background:
    radial-gradient(60rem 30rem at 85% -10%, rgba(217,164,65,.08), transparent 60%),
    radial-gradient(50rem 26rem at -10% 110%, rgba(217,164,65,.05), transparent 60%),
    var(--bg);
}

/* The Lobby's grand hero steps back inside the shell so the entrance
   and the first room rows share the screen; the gate out front still
   makes the grand entrance. Presentation only — every word stands. */
html.js .hero-exp{min-height:0}
html.js .hero-exp .inner{padding:52px 0 40px}

/* In a room, the entrance steps aside with the index. */
body.in-room .entrance{display:none}

/* ================= PANELS (the rooms) ================= */
main.stage{counter-reset:channel}
.panel{
  flex:none;display:flex;flex-direction:column;min-height:0;
  background:linear-gradient(180deg,#261d13,var(--card));
  border:1px solid var(--card-edge);border-radius:var(--shell-radius);
  overflow:hidden;counter-increment:channel;
}
.panel.alt{background:linear-gradient(180deg,#1f1811,var(--bg-alt))}
.panel.open{
  border-color:var(--gold);
  box-shadow:inset 0 1px 0 rgba(240,188,85,.35),0 14px 34px rgba(0,0,0,.4);
}
.panel-h{margin:0;font-family:inherit;font-size:inherit}
.panel-head{
  width:100%;display:flex;align-items:center;gap:14px;text-align:left;
  background:none;border:0;cursor:pointer;color:var(--ink);
  padding:0 16px 0 0;min-height:var(--shell-head-h);font:inherit;
}
.panel-head::before{
  content:counter(channel,decimal-leading-zero);
  flex:none;align-self:stretch;display:flex;align-items:center;
  padding:0 12px;margin-right:2px;
  font-family:var(--sans);
  font-size:.78rem;font-weight:700;letter-spacing:.12em;color:#1c1503;
  background:linear-gradient(180deg,#a87c2a,#7c5a16);
  border-right:1px solid var(--card-edge);
}
.panel.open .panel-head::before{
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#1c1503;
}
.ph-text{display:flex;flex-direction:column;gap:1px;padding:7px 0;min-width:0}
.ph-kicker{
  font-family:var(--sans);
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.panel.open .ph-kicker{color:var(--gold)}
.ph-title{
  font-family:var(--serif);font-size:1.13rem;font-weight:600;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ph-state{
  margin-left:auto;flex:none;display:flex;align-items:center;gap:9px;
  font-family:var(--sans);
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);font-weight:700;
}
.ph-state::after{
  content:"";width:9px;height:9px;flex:none;
  border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:rotate(45deg);transition:transform .3s ease;margin-right:4px;
}
.panel.open .ph-state::after{transform:rotate(225deg)}
.ph-state .on{display:none;color:var(--gold)}
.panel.open .ph-state .on{display:inline}
.panel.open .ph-state .off{display:none}
.panel-body{padding:26px 0 34px}
html.js .panel-body{display:none}
html.js .panel.open .panel-body{
  display:block;flex:1 1 auto;min-height:0;overflow:visible;
  animation:panel-in .45s ease both;
}
@keyframes panel-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ================= ROOM BAR ================= */
.room-bar{display:none}
body.in-room .panel{display:none}
body.in-room .panel.open{
  display:flex;flex:1 0 auto;overflow:visible;
}
body.in-room .panel.open .panel-h{display:none}
body.in-room .panel.open .room-bar{
  display:flex;align-items:center;gap:13px;
  position:sticky;top:0;z-index:6;
  min-height:var(--shell-head-h);padding:0 14px 0 0;flex:none;
  background:linear-gradient(180deg,#261d13,var(--card));
  border-bottom:1px solid var(--gold);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}
.room-num{
  flex:none;align-self:stretch;display:flex;align-items:center;
  padding:0 12px;margin-right:2px;
  font-family:var(--sans);
  font-size:.78rem;font-weight:700;letter-spacing:.12em;color:#1c1503;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  border-right:1px solid var(--card-edge);
}
.room-text{display:flex;flex-direction:column;gap:1px;padding:6px 0;min-width:0}
.room-kicker{
  font-family:var(--sans);
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.room-title{
  font-family:var(--serif);font-size:1.13rem;font-weight:600;line-height:1.2;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.room-back{
  margin-left:auto;flex:none;
  background:var(--bg-alt);border:1px solid var(--card-edge);
  border-radius:8px;color:var(--ink);padding:8px 13px;
  font-family:var(--sans);font-size:.85rem;cursor:pointer;
}
.room-back:hover{border-color:var(--gold);color:var(--gold-bright)}

/* The footer rides the stage as its last item, framed like a room. */
html.js main.stage .site-foot{
  flex:none;
  border:1px solid var(--card-edge);border-radius:var(--shell-radius);
  margin-top:2px;
}
a:focus-visible,button:focus-visible{
  outline:3px solid var(--gold);outline-offset:3px;
}

/* ---------- mobile ---------- */
@media (max-width:760px){
  .ph-kicker{letter-spacing:.14em}
  .panel-body{padding:20px 0 28px}
  html.js .hero-exp .inner{padding:40px 0 30px}
}
@media (prefers-reduced-motion: reduce){
  html.js .panel.open .panel-body{animation:none}
  .ph-state::after{transition:none}
}

/* =====================================================================
   FINISH PASS v7 — shell furniture (2026-11-02)
   Companion to the components layer in styles.css: closes the same
   v84 gap list on the shell itself — stage depth, scrollbar,
   kicker tracking, panel-head temperature. Pure overrides; the v6
   shell above is byte-identical.
   ===================================================================== */

/* F3 — Stage depth: the board gains atmosphere — layered radial
   glows in the site's own palette (gold top-right, copper
   bottom-left, a low gold wash) over the walnut ground, replacing
   the v6 stage's faint two-stop wash. Panels and plates are opaque
   furniture above it, so contrast is untouched. */
html.js main.stage{
  background:
    radial-gradient(60rem 30rem at 85% -10%, rgba(217,164,65,.13), transparent 60%),
    radial-gradient(50rem 26rem at -10% 110%, rgba(200,80,46,.09), transparent 60%),
    radial-gradient(40rem 20rem at 50% 130%, rgba(217,164,65,.05), transparent 60%),
    var(--bg);
}

/* Panel surfaces: the top stop lightens a step so rooms read as lit
   furniture on the deeper stage. */
.panel{background:linear-gradient(180deg,#2d2115,var(--card))}
.panel.alt{background:linear-gradient(180deg,#241b12,var(--bg-alt))}

/* F8 — Micro-details: kickers tracked to .24em (the house finish
   standard); the stage scrollbar takes a gold-deep thumb — thin,
   with a WebKit gradient — instead of the dull card-edge tone;
   panel heads gain a warm hover wash and their titles warm to
   gold-bright, easing rather than swapping. */
.ph-kicker,.room-kicker{letter-spacing:.24em}
.panel-head{transition:background .18s ease}
.panel-head:hover{background:rgba(217,164,65,.05)}
.ph-title{transition:color .18s ease}
.panel-head:hover .ph-title{color:var(--gold-bright)}
html.js main.stage{scrollbar-color:#a87c2a transparent}
html.js main.stage::-webkit-scrollbar{width:9px}
html.js main.stage::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#a87c2a,#5f4718);border-radius:6px;
}
html.js main.stage::-webkit-scrollbar-track{background:transparent}

/* Room bar + in-shell footer: inset gold highlights so the open
   room's furniture carries the same lit edge as the plate. */
body.in-room .panel.open .room-bar{
  box-shadow:inset 0 1px 0 rgba(240,188,85,.25),0 10px 24px rgba(0,0,0,.35);
}
html.js main.stage .site-foot{
  box-shadow:inset 0 1px 0 rgba(240,188,85,.18),0 10px 24px rgba(0,0,0,.25);
}

@media (prefers-reduced-motion: reduce){
  .panel-head,.ph-title{transition:none}
}