/* ═══ HUB LAYOUT — ChatSpace rider hub (spec 2026-07-16 §2) ═══════════════
   This file owns GEOMETRY: grid, positions, sizes, spacing. Material
   (color, type faces, borders, texture) comes from the active skin pack's
   --hub-* tokens (hub/skins/*.css) — that split IS law L1. Fallback values
   here keep the page legible if a pack ever fails to load.
   Desktop-first; must hold at 900px (spec §7 — true mobile pass rides later). */

/* ── the rail: a spine, not a menu — same positions in every skin ── */
.hub-rail{
  display:flex; align-items:stretch; gap:0;
  border-top:var(--hub-rule,1px solid rgba(139,124,255,.2));
  border-bottom:var(--hub-rule,1px solid rgba(139,124,255,.2));
  background:var(--hub-panel,var(--panel,#11142a));
}
.rail-item{
  display:flex; align-items:center; gap:8px;
  padding:10px 18px; cursor:pointer; border:none; background:transparent;
  font-family:var(--hub-mono,var(--mono,monospace)); font-size:12px; letter-spacing:.14em;
  color:var(--hub-ink,var(--ink,#eceaf6));
  border-right:var(--hub-rule,1px solid rgba(139,124,255,.2));
}
.rail-item:hover{background:var(--hub-panel2,var(--panel-2,#171b36))}
.rail-card{flex:1; justify-content:flex-start; text-align:left}
.rail-adv{font-weight:700}
.rail-thumb{
  width:34px; height:22px; display:inline-block; flex:none;
  background:var(--rail-thumb-bg,#18181f); border:1px solid currentColor;
}
.rail-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.vibe-strip{
  display:flex; gap:10px; flex-wrap:wrap; padding:12px 18px;
  background:var(--hub-panel2,var(--panel-2,#171b36));
  border-bottom:var(--hub-rule,1px solid rgba(139,124,255,.2));
}
.vibe-pick{display:flex; flex-direction:column; gap:2px; padding:8px 14px; cursor:pointer;
  font-family:var(--hub-text,var(--body,sans-serif))}
.vibe-pick b{font-size:12px; letter-spacing:.08em}
.vibe-pick small{font-size:9.5px; letter-spacing:.2em; opacity:.65}
.vibe-pick[aria-pressed="true"]{outline:3px solid var(--hub-hot,#ff7a3d); outline-offset:-3px}

/* ── hub view frame ── */
.hub{max-width:1160px; margin:0 auto; padding:26px 20px 60px}
.hub-kicker{font-family:var(--hub-mono,var(--mono,monospace)); font-size:11px;
  letter-spacing:.28em; text-transform:uppercase; color:var(--hub-accent,var(--ember,#ff7a3d))}
.hub-top{display:grid; grid-template-columns:minmax(340px,420px) 1fr; gap:26px; margin-bottom:30px}
.hub-cardstage{margin-top:10px; padding:18px;
  background:var(--hub-panel2,var(--panel-2,#171b36));
  border:var(--hub-rule,1px solid rgba(139,124,255,.2)); box-shadow:var(--hub-drop,none)}
#hubCard{width:100%; grid-template-columns:1fr}
.hub-wearing{margin-top:10px; font-family:var(--hub-mono,var(--mono,monospace));
  font-size:11px; letter-spacing:.08em; color:var(--hub-ink-dim,var(--dim,#8f8ca8))}
.hub-welcome{display:flex; flex-direction:column; gap:12px}
.hub-title{font-family:var(--hub-disp,var(--disp,sans-serif)); font-size:34px;
  line-height:38px; text-transform:uppercase; color:var(--hub-ink,var(--ink,#eceaf6))}
.hub-copy{font-family:var(--hub-text,var(--body,sans-serif)); font-size:15px; line-height:1.65;
  color:var(--hub-ink,var(--ink,#eceaf6)); max-width:60ch}
.hub-doors{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:auto}
.hub-door{display:flex; flex-direction:column; gap:6px; align-items:flex-start; text-align:left;
  padding:18px; cursor:pointer; border-radius:var(--hub-radius,0)}
.hub-door b{font-family:var(--hub-disp,var(--disp,sans-serif)); font-size:19px; line-height:24px; letter-spacing:.04em}
.hub-door small{font-family:var(--hub-text,var(--body,sans-serif)); font-size:12px; opacity:.75}

/* ── the five dials (L2: five, forever) ── */
.hub-dials{display:grid; grid-template-columns:repeat(6,1fr);
  border:var(--hub-rule,1px solid rgba(139,124,255,.2));
  background:var(--hub-panel,var(--panel,#11142a)); margin-bottom:30px}
.hub-dial{padding:16px; border-right:var(--hub-rule,1px solid rgba(139,124,255,.2)); min-width:0}
.hub-dial:last-child{border-right:none}
.hub-dial-wide{grid-column:span 2}
.hub-dial h3{font-family:var(--hub-disp,var(--disp,sans-serif)); font-size:16px;
  line-height:22px; letter-spacing:.05em; text-transform:uppercase; margin-bottom:2px;
  color:var(--hub-ink,var(--ink,#eceaf6))}
.hub-dial .dnum{color:var(--hub-accent,var(--ember,#ff7a3d)); margin-right:8px}
.hub-sub{font-family:var(--hub-text,var(--body,sans-serif)); font-size:11px; line-height:1.4;
  color:var(--hub-ink-dim,var(--dim,#8f8ca8)); margin-bottom:10px}
.dial-grid{display:flex; flex-wrap:wrap; gap:8px}
.struct-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.struct-mini{position:relative; padding:8px 6px 6px; cursor:pointer; text-align:center;
  border:1.5px solid var(--hub-ink,var(--line,#444)); background:transparent;
  font-family:var(--hub-mono,var(--mono,monospace)); font-size:10px; letter-spacing:.1em;
  color:var(--hub-ink,var(--ink,#eceaf6))}
.struct-mini .mini-art{display:block; height:34px; margin-bottom:6px;
  background:var(--hub-panel2,var(--panel-2,#171b36))}
.struct-mini.locked{opacity:.55; cursor:default}
.struct-mini .lock-chip{position:absolute; top:4px; right:4px; font-size:9px}
.dial-swatch{width:34px; height:34px; cursor:pointer; border:1.5px solid var(--hub-ink,var(--line,#444))}
.dial-swatch[aria-pressed="true"],.struct-mini[aria-pressed="true"]{outline:3px solid var(--hub-hot,#ff7a3d); outline-offset:-3px}

/* ── the rack ── */
.hub-rackhead{display:flex; align-items:center; gap:14px; margin-bottom:10px}
.hub-rackhead .hub-rackstatus{margin-left:auto; text-align:right}
#hubWearBtn.is-armed{outline:3px solid var(--hub-hot,#f4581c); outline-offset:-3px; animation:hub-arm-pulse 1s ease-in-out infinite}
@keyframes hub-arm-pulse{50%{outline-offset:0}}
@media (prefers-reduced-motion:reduce){#hubWearBtn.is-armed{animation:none}}
.hub-rackstatus{font-family:var(--hub-mono,var(--mono,monospace)); font-size:11px;
  color:var(--hub-ink-dim,var(--dim,#8f8ca8))}
.hub-rack{display:flex; gap:14px; overflow-x:auto; padding-bottom:10px}
.rack-look{flex:0 0 190px; padding:12px; cursor:pointer; text-align:left;
  border:var(--hub-rule,1px solid rgba(139,124,255,.2));
  background:var(--hub-panel,var(--panel,#11142a)); box-shadow:var(--hub-drop,none)}
.rack-look .look-swatch{height:56px; margin-bottom:8px}
.rack-look b{display:block; font-family:var(--hub-disp,var(--disp,sans-serif)); font-size:13px;
  line-height:18px; letter-spacing:.05em; text-transform:uppercase; color:var(--hub-ink,var(--ink,#eceaf6))}
.rack-look .look-meta{display:flex; gap:6px; margin-top:6px; align-items:center;
  font-family:var(--hub-mono,var(--mono,monospace)); font-size:9.5px; letter-spacing:.16em;
  color:var(--hub-ink-dim,var(--dim,#8f8ca8)); text-transform:uppercase}

/* ── wizard + ritual overlays ── */
.wizard-overlay,.ritual-overlay{position:fixed; inset:0; z-index:9995; display:flex;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(0,0,0,.55)}
.wizard-panel{width:min(680px,94vw); max-height:88vh; overflow:auto; padding:26px;
  background:var(--hub-panel,var(--panel,#11142a)); box-shadow:var(--hub-drop,none)}
.wizard-panel h2{font-family:var(--hub-disp,var(--disp,sans-serif)); font-size:26px;
  text-transform:uppercase; margin:6px 0 16px; color:var(--hub-ink,var(--ink,#eceaf6))}
.wizard-stage{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:18px; min-height:120px}
.wizard-nav{display:flex; gap:10px; flex-wrap:wrap}
.wizard-nav .nr-btn:last-child{margin-left:auto}
.ritual-prompt{text-align:center; display:flex; flex-direction:column; gap:14px; align-items:center;
  padding:30px 34px; background:var(--hub-panel,var(--panel,#11142a)); box-shadow:var(--hub-drop,none)}
.ritual-prompt p{font-family:var(--hub-text,var(--body,sans-serif));
  color:var(--hub-ink-dim,var(--dim,#8f8ca8))}
.ritual-strip{display:flex; gap:10px; flex-wrap:wrap; justify-content:center}
body.ritual-fade{transition:none}
body.ritual-fade #app{transition:opacity .9s ease}

/* ── 900px hold ── */
@media (max-width:900px){
  .hub-top{grid-template-columns:1fr}
  .hub-dials{grid-template-columns:1fr 1fr}
  .hub-dial{border-bottom:var(--hub-rule,1px solid rgba(139,124,255,.2))}
  .hub-dial-wide{grid-column:1/-1}
  .hub-doors{grid-template-columns:1fr}
  .rail-item{padding:10px 12px}
}
@media (prefers-reduced-motion:reduce){
  body.ritual-fade #app{transition:none}
}