/* Titan Reliquary · Grand Hall wing (styles/hall.css)
   Scoped to #pane-hall. Theme tokens only (--bg --surface --surface2 --ink --muted --gold --gold-soft --line ...),
   so every atmosphere inherits it. Loaded after styles.css. */

/* ---------- Valuation hub: themed, first thing after the wire ---------- */
#pane-hall .vault-valuation-hub {
  max-width: 780px;
  margin: 1.1rem auto 1rem;
  background: linear-gradient(180deg, var(--surface2) 0%, var(--surface) 100%);
  border: 1px solid var(--line-strong);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28), inset 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent);
}
#pane-hall .hero-grand {
  background: linear-gradient(135deg, var(--ink) 8%, var(--gold-soft) 52%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 4px 22px color-mix(in srgb, var(--gold) 22%, transparent));
}
#pane-hall .hero-cap {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  /* "TOTAL ESTIMATED VALUATION" sat at 4.53:1 on afterhours (below AA once effects overlay it): lift --muted toward --ink */
  color: color-mix(in srgb, var(--muted) 68%, var(--ink));
  margin-bottom: 0.35rem;
}
#pane-hall .hall-asof {
  margin: 0 0 1.1rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: color-mix(in srgb, var(--muted) 68%, var(--ink));
  letter-spacing: 0.02em;
}
#pane-hall .hall-asof .hall-stale { color: var(--warn, #b45309); font-weight: 600; }

/* Melt bar: taller, labels only where they fit (hall.js adds .hg-narrow) */
#pane-hall .melt-allocation-bar { height: 28px; }
#pane-hall .melt-seg { font-size: 0.76rem; }
#pane-hall .melt-seg.hg-narrow .seg-label { visibility: hidden; }
#pane-hall .melt-legend {
  gap: 0.55rem 1.6rem;
  font-size: 0.92rem;
  color: var(--muted);
}
#pane-hall .legend-item { flex-wrap: wrap; justify-content: center; gap: 0.2rem 0.45rem; }
#pane-hall .legend-item strong { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
#pane-hall .legend-item .lg-sub { font-size: 0.82rem; color: var(--muted); }
#pane-hall #hdr-stats { display: none; } /* replaced by the glance strip below */

/* ---------- The collection at a glance ---------- */
#pane-hall .hall-glance {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 0 0 1.4rem;
  text-align: left;
}
#pane-hall .hg-tile {
  appearance: none;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-height: 108px;
  padding: 0.95rem 1rem 0.9rem;
  border-radius: 14px;
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 60%),
    var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.25s var(--ease-out), border-color 0.2s, box-shadow 0.25s;
}
#pane-hall .hg-tile::after { /* hairline gilt edge, museum label feel */
  content: "";
  position: absolute;
  left: 1rem; right: 1rem; top: 0;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.55;
}
#pane-hall .hg-tile:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
}
#pane-hall .hg-k {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
#pane-hall .hg-v {
  font-family: var(--serif);
  font-weight: 650;
  font-size: clamp(1.6rem, 2.4vw, 2.05rem);
  line-height: 1.05;
  color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
}
#pane-hall .hg-v small { font-size: 0.55em; font-weight: 600; color: var(--muted); }
#pane-hall .hg-s { font-size: 0.86rem; color: var(--muted); line-height: 1.3; }
@media (max-width: 1060px) {
  #pane-hall .hall-glance { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  #pane-hall .hall-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; }
  #pane-hall .hg-tile { min-height: 96px; padding: 0.8rem 0.85rem; }
  #pane-hall .hg-v { font-size: 1.65rem; }
}
@media (prefers-reduced-motion: no-preference) {
  #pane-hall.hall-ready .hg-tile { animation: hgRise 0.7s var(--ease-out) both; }
  #pane-hall.hall-ready .hg-tile:nth-child(2) { animation-delay: 0.06s; }
  #pane-hall.hall-ready .hg-tile:nth-child(3) { animation-delay: 0.12s; }
  #pane-hall.hall-ready .hg-tile:nth-child(4) { animation-delay: 0.18s; }
  #pane-hall.hall-ready .hg-tile:nth-child(5) { animation-delay: 0.24s; }
  #pane-hall.hall-ready .hg-tile:nth-child(6) { animation-delay: 0.30s; }
}
@keyframes hgRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Market wire: themed, slower, readable ---------- */
#pane-hall .market-ticker-tape {
  height: 46px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}
#pane-hall .ticker-badge { background: var(--surface2); border-right: 1px solid var(--line); }
#pane-hall .ticker-live-pulse { background: var(--gold); box-shadow: 0 0 8px var(--gold); animation: none; }
#pane-hall .ticker-live-lbl { color: var(--gold-soft); font-size: 0.74rem; }
#pane-hall .ticker-marquee-track { animation-duration: 80s; }
#pane-hall .ticker-item {
  color: var(--ink);
  font-size: 0.84rem;
  border-right: 1px solid var(--line);
  height: 46px;
}
#pane-hall .ticker-item:hover, #pane-hall .ticker-item:focus-visible { background: color-mix(in srgb, var(--gold) 14%, transparent); color: var(--ink); }
#pane-hall .ticker-item .tk-sym { color: var(--gold-soft); }
#pane-hall .ticker-item .tk-price { color: var(--ink); }
#pane-hall .tk-tag { font-size: 0.72rem; padding: 0.12rem 0.4rem; }
#pane-hall .tk-tag.tk-up {
  color: color-mix(in srgb, #22c55e 62%, var(--ink));
  background: color-mix(in srgb, #22c55e 13%, transparent);
  border-color: color-mix(in srgb, #22c55e 40%, transparent);
}
#pane-hall .tk-tag.tk-down {
  color: color-mix(in srgb, #ef4444 66%, var(--ink));
  background: color-mix(in srgb, #ef4444 12%, transparent);
  border-color: color-mix(in srgb, #ef4444 40%, transparent);
}
#pane-hall .tk-tag.tk-neu {
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 12%, transparent);
  border-color: var(--line);
}
#pane-hall .market-ticker-tape:focus-within .ticker-marquee-track { animation-play-state: paused; }

/* ---------- Now Exhibiting: legible, big targets ---------- */
/* The vitrine follows the atmosphere (it was hard-coded near-black, which hid its own labels in light rooms). */
#pane-hall .exhibit {
  background:
    radial-gradient(ellipse 70% 60% at 30% 40%, color-mix(in srgb, var(--gold) 9%, transparent), transparent 70%),
    linear-gradient(180deg, var(--surface2) 0%, var(--surface) 100%);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3), inset 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent);
}
#pane-hall .exhibit:hover { transform: none; }
#pane-hall .exhibit-kicker { color: var(--gold-soft); }
#pane-hall .ex-ctrl-btn {
  min-height: 40px;
  padding: 0.45rem 0.85rem;
  font-size: 0.84rem;
  color: var(--ink);
}
#pane-hall .ex-ctrl-btn.active { color: var(--bg); }
#pane-hall .ex-p2-tether-bar { display: none; } /* studio workflow lives in the Lab; the Hall placard stays a placard */
#pane-hall .placard-seal { letter-spacing: 0.14em; text-transform: uppercase; }
#pane-hall .pl-lbl { font-size: 0.74rem; }
#pane-hall .ex-nav-btn { min-width: 44px; min-height: 44px; }
/* Slides stack in one grid cell, so the frame grows to the tallest placard instead of clipping it (phone). */
#pane-hall .exhibit-frame { display: grid; min-height: 500px; }
#pane-hall .exhibit-slide { position: relative; inset: auto; grid-area: 1 / 1; }
@media (max-width: 860px) {
  #pane-hall .exhibit-frame { min-height: 0; }
}
@media (max-width: 640px) {
  #pane-hall .exhibit-top-bar { flex-direction: column; align-items: stretch; padding: 0.85rem 0.85rem 0.6rem; }
  #pane-hall .exhibit-view-controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
    overflow: visible;
  }
  #pane-hall .ex-ctrl-btn { min-height: 44px; padding: 0.4rem 0.3rem; white-space: normal; line-height: 1.15; text-align: center; font-size: 0.82rem; }
}

/* ---------- Market desk ---------- */
#pane-hall .term-tf-btn { min-height: 36px; font-size: 0.8rem; color: var(--muted); }
#pane-hall .term-tf-btn.active { color: var(--gold-soft); }
#pane-hall .term-asset-btn, #pane-hall .term-mode-btn { min-height: 40px; }
#pane-hall .ts-lbl { font-size: 0.74rem; color: var(--muted); }
#pane-hall .hall-term-note {
  margin: -0.4rem 0 1rem;
  text-align: left;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted);
}
@media (max-width: 640px) {
  #pane-hall .term-timeframes-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.35rem;
    overflow: visible;
  }
  #pane-hall .term-tf-btn { min-height: 44px; border-color: var(--line); text-align: center; }
  #pane-hall .term-asset-btn, #pane-hall .term-mode-btn { min-height: 44px; font-size: 0.84rem; }
  #pane-hall .melt-legend { flex-direction: column; align-items: center; gap: 0.5rem; }
}

/* ---------- Focus: visible everywhere in the Hall ---------- */
#pane-hall :is(button, [role="button"], a, input):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ---------- Reduced motion: one static, scrollable copy of the wire ---------- */
@media (prefers-reduced-motion: reduce) {
  #pane-hall .ticker-marquee-track { animation: none !important; }
  #pane-hall .market-ticker-tape { overflow-x: auto; scrollbar-width: thin; }
  #pane-hall .ticker-item.tk-dup { display: none; }
  #pane-hall .hg-tile { transition: none; }
}

/* ---------- TR51 Hall: one token system for the Hall panels ----------
   styles.css pins dark "instrument" tokens on the ticker, exhibit, hero figure and valuation hub in
   light atmospheres. The Hall now paints those surfaces from the atmosphere's own tokens, so they take
   the parent's tokens back (custom-property `inherit`). Result: dark ink on paper in light rooms,
   light ink on dark in dark rooms, never the mismatch. The museum slab keeps its own pinned tokens. */
html[data-atmo] #pane-hall :is(#market-ticker-tape, #exhibit, #hero-grand, .vault-valuation-hub) {
  --ink: inherit; --text: inherit; --muted: inherit; --gold: inherit; --gold-soft: inherit;
}
/* Light atmospheres whose ticker / exhibit / valuation cases are dark or inverse: the reset above would leave
   dark paper ink on a dark case (1.0 to 1.9:1). Keep the atmosphere's own light case tokens there. */
html[data-atmo="conservator"] #pane-hall :is(#market-ticker-tape, #exhibit) {
  --ink: #f4ecdb; --text: #f4ecdb; --muted: #c2b89f; --gold: #dcbc62; --gold-soft: #efe0b0;
}
html[data-atmo="notepad"] #pane-hall :is(#market-ticker-tape, #exhibit, .vault-valuation-hub) {
  --ink: #ffffff; --text: #ffffff; --muted: #d4d4d4; --gold: #ffffff; --gold-soft: #ffff8a;
}
#pane-hall .ticker-item .tk-sym { color: var(--gold-soft); }
#pane-hall .ticker-item .tk-price { color: var(--ink); }

/* Melt-bar labels: solid dark pill so they read on every bar colour (was white on pale indigo, 1.6:1) */
#pane-hall .melt-seg .seg-label {
  background: rgba(10, 10, 14, 0.82);
  color: #fff;
  text-shadow: none;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
}

/* Contrast fixes found by tools/themes/audit.js (were fixed colours on token backgrounds) */
html[data-atmo] #pane-hall :is(.term-asset-btn, .term-mode-btn, .eyebrow-row .badge) {
  --ink: inherit; --text: inherit; --muted: inherit; --gold: inherit; --gold-soft: inherit;
}
#pane-hall .ex-nav-btn { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
#pane-hall .term-mode-btn.active { background: var(--gold); color: var(--surface); }
#pane-hall .term-live-badge {
  color: var(--ink);
  background: color-mix(in srgb, var(--gold) 16%, var(--surface));
  border: 1px solid var(--line-strong);
}
#pane-hall .term-delta.up { color: color-mix(in srgb, #16a34a 55%, var(--ink)); }
#pane-hall .term-delta.down { color: color-mix(in srgb, #dc2626 55%, var(--ink)); }
#pane-hall .term-asset-btn.active { background-color: var(--gold); color: var(--surface); }
#pane-hall .term-asset-btn.active .sym { color: var(--surface); }
#pane-hall .note-card .k, #pane-hall .note-card .s { color: var(--muted) !important; }
#pane-hall .lab-banner p { color: var(--ink); }

/* Perf (pass 2, phones/touch): only the showing exhibit slide is styled, laid out and painted.
   The other four are ~175 nodes each of 3D flipper + placard that nobody sees until they swipe. */
@media (max-width: 700px), (hover: none) and (pointer: coarse) {
  #pane-hall .exhibit-slide:not(.on) { content-visibility: hidden; contain-intrinsic-size: auto 720px; }
}

/* Market desk v2: series pills + 5 timeframes + area/candle toggle over real daily data (no layout redesign; same classes as before). */
#pane-hall .term-asset-pills { margin-top: 0.9rem; }
#pane-hall .term-time-bar { margin-top: 0.6rem; }
#pane-hall #term-chart-cap { font-size: 0.8rem; }
#pane-hall .term-live-badge.term-badge-stale { color: var(--muted); background: transparent; border-color: var(--line); }
#pane-hall .term-live-badge.term-badge-stale .term-live-dot { background: var(--muted); box-shadow: none; animation: none; }
@media (max-width: 640px) {
  #pane-hall .term-timeframes-row.tf5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  #pane-hall .term-time-bar { gap: 0.5rem; }
}
/* HUD stays a dark instrument panel in every atmosphere: fixed light text so the readout is legible on light themes too */
#pane-hall .term-hud .hud-date, #pane-hall .term-hud .hud-range { color: #c9cfda; font-size: 0.72rem; }
#pane-hall .term-hud .hud-val { color: #f2ead8; }