/* hub/studio.css - ChatSpace Studio tabs. Follows the active vibe through --hub-* tokens. */
.studio{display:flex;flex-direction:column;min-height:0;min-width:0;margin-top:18px}
.studio-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-bottom:10px}
.studio-title{margin:0;font:400 34px/1 var(--hub-disp,'Anton',sans-serif);color:var(--hub-ink,#101a30)}
.studio-lede{margin:0;font-size:16px;color:var(--hub-ink-dim,#4a5470)}
.studio-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 8px;margin:0 -2px;flex:none}
.studio-tabs::-webkit-scrollbar{display:none}
.studio-tab{flex:none;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(16,26,48,.25);background:var(--hub-panel,#faf6ea);color:var(--hub-ink,#101a30);font:600 15px var(--hub-text,inherit);cursor:pointer;white-space:nowrap}
.studio-tab[aria-selected="true"]{background:var(--hub-ink,#101a30);color:var(--hub-panel,#faf6ea);border-color:var(--hub-ink,#101a30)}
.studio-tab:focus-visible,.studio-link:focus-visible{outline:3px solid var(--hub-accent,#0a56b3);outline-offset:2px}
.studio-panels{flex:1;min-height:0;min-width:0}
.studio-panel{display:flex;flex-direction:column;gap:14px;min-height:0;height:100%;overflow-y:auto;padding:14px 2px 4px;border-top:1px solid rgba(16,26,48,.18)}
.studio-panel[hidden]{display:none}
.studio-intro{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px}
.studio-what{margin:0;font-weight:700;font-size:17px;color:var(--hub-ink,#101a30);flex-basis:100%}
.studio-where{margin:0;font-size:15px;color:var(--hub-ink-dim,#4a5470);flex:1 1 280px}
.studio-vibe{min-height:44px}
.studio-soon{margin:0;padding:14px 16px;border-radius:10px;background:var(--hub-panel2,#e9e1cf);color:var(--hub-ink,#101a30);font-size:15px}
.studio-panel > section[data-feature]{margin:0}
.studio-links{display:flex;flex-wrap:wrap;gap:8px}
.studio-link{min-height:44px;padding:0 14px;border-radius:10px;border:1px solid rgba(16,26,48,.25);background:transparent;color:var(--hub-accent,#0a56b3);font:600 15px var(--hub-text,inherit);cursor:pointer;text-align:left}
.studio-badges{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.studio-badge{display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:12px;border-radius:12px;border:1px dashed rgba(16,26,48,.3);background:var(--hub-panel,#faf6ea);color:var(--hub-ink,#101a30)}
.studio-badge b{font-size:16px}
.studio-badge small{grid-column:2;font-size:14px;color:var(--hub-ink-dim,#4a5470)}
.studio-badge-mark{grid-row:1/3;width:40px;height:40px;border-radius:50%;background:rgba(16,26,48,.12);box-shadow:inset 0 0 0 2px rgba(16,26,48,.25)}
.studio-badge.is-earned{border-style:solid;border-color:var(--hub-hot,#f4581c)}
.studio-badge.is-earned .studio-badge-mark{background:var(--hub-hot,#f4581c);box-shadow:inset 0 0 0 3px rgba(255,255,255,.6)}
.studio-badge.is-earned small{color:var(--hub-ink,#101a30);font-weight:600}
/* Away from Look, the card stays as your preview but the welcome copy steps aside. */
/* :not(html): studio.js also puts has-studio on <html> (10-19), which has no data-studio, so the bare
   selector hid the welcome (and the Gallery + Wizard doors) on every tab, Your Card included. WO-1023cv-1. */
:not(html).has-studio:not([data-studio="look"]) .hub-welcome{display:none}
/* URGENT 10-19 (TN live): hub.css's desktop non-scroll housing (body.mode-hub, 100dvh, overflow hidden) squeezed
   the Studio to 0px once the feature mounts filled the hub; its heading and tabs spilled under the card preview
   and everything below the fold was unreachable. With the Studio on, the hub is a normal scrolling page and every
   block keeps its own height, in order: Studio, card, the rest. (?studio=off brings the old housing back.) */
@media (min-width:901px){
  html.has-studio body.mode-hub{height:auto;overflow-x:hidden;overflow-y:visible}
  html.has-studio body.mode-hub .shell{height:auto;overflow:visible}
  html.has-studio body.mode-hub .hub > *{flex:none}
}
@media (max-width:560px){
  .studio-title{font-size:28px}
  .studio-badges{grid-template-columns:1fr 1fr}
  .studio-badge{grid-template-columns:1fr;text-align:left}
  .studio-badge-mark{grid-row:auto;width:32px;height:32px;margin-bottom:6px}
  .studio-badge small{grid-column:1}
}
.studio-guide{display:grid;gap:6px;margin:0 0 12px;font:15px/1.45 var(--hub-text,inherit)}.studio-guide p,.studio-guide ul{margin:0}.studio-guide ul{padding-left:20px}a.studio-link{display:inline-flex;align-items:center;text-decoration:none}
/* FL-24: mod queue folded shut at the bottom; the rail never pushes the page sideways at 390. */
.studio-modfold{margin-top:18px;border-top:1px solid rgba(16,26,48,.18);padding-top:10px}
.studio-modfold > summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;color:var(--hub-ink-dim,#4a5470)}
.hub-rail{flex-wrap:wrap;max-width:100%;min-width:0}
.rail-item{min-width:0}
@media (max-width:480px){.rail-item{padding:10px 8px;letter-spacing:.06em}.rail-adv{flex:1 1 100%;justify-content:center;border-top:var(--hub-rule,1px solid rgba(139,124,255,.2))}}
.studio-tab{font-size:16px}
.studio-tabs{flex-wrap:wrap;overflow-x:visible}
@media (max-width:600px){.studio-tab{flex:1 1 calc(50% - 6px);min-height:52px;padding:0 10px}}