/* Playground layout. Uses the design system's variables only; never redefines them (D-7). */
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;min-height:100vh;background:var(--surface-page);color:var(--text-primary);font:var(--text-body);letter-spacing:var(--tracking-body)}
a{color:inherit}
a.ht-btn,a.ht-tab{text-decoration:none}
code{font:var(--text-code);font-size:var(--fs-12)}
img{display:block}

/* Top bar: 52px, never scrolls away */
.bar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:var(--space-4);height:52px;padding:0 var(--space-3);background:var(--surface-panel);border-bottom:1px solid var(--border-subtle)}
.wordmark{display:flex;align-items:center;gap:var(--space-2);font:500 18px/1 var(--font-sans);letter-spacing:-0.045em;text-decoration:none;flex:none}
.wordmark img{border-radius:var(--radius-2)}
.bar__tabs{align-self:stretch;flex:1}
.bar__tabs .ht-tab{height:52px}
.bar__spec{flex:none}

.app{display:grid;grid-template-columns:minmax(0,1fr) var(--layout-rail);min-height:calc(100vh - 52px)}
.main{min-width:0;padding:var(--space-6)}
.view{display:flex;flex-direction:column;gap:var(--space-4);max-width:960px;margin:0 auto}

/* Parameter rail */
.rail{position:sticky;top:52px;height:calc(100vh - 52px);overflow:auto;padding:14px;background:var(--surface-panel);border-left:1px solid var(--border-subtle)}
.rail form{display:flex;flex-direction:column;gap:var(--space-5)}
.group{display:flex;flex-direction:column;gap:14px;margin:0;padding:0;border:0;min-width:0}
.group legend{padding:0;margin-bottom:14px}
.seed-row{display:flex;gap:var(--space-2)}
.seed-row .ht-input{flex:1}
.reset{align-self:flex-start}
.ht-hint--err:empty{display:none}
.ht-field + .ht-hint--err{margin:-8px 0 0}

/* Segmented controls driven by radio inputs: mirror the component's aria-pressed state */
.ht-seg__opt{position:relative}
.ht-seg__opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.ht-seg__opt:has(input:checked){background:var(--surface-hover);color:var(--text-primary);box-shadow:inset 0 0 0 1px var(--border-strong)}
.ht-seg__opt:has(input:focus-visible){outline:2px solid var(--focus-ring);outline-offset:1px}
.ht-seg--mono .ht-seg__opt{font-size:var(--fs-10)}

/* Stage: avatars sit on the 16px dot grid */
.stage{display:grid;place-items:center;padding:var(--space-10) var(--space-4)}
.stage img{max-width:100%;height:auto}
.row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap}
.row__actions{display:flex;gap:var(--space-2)}
.ht-ident img{border-radius:var(--radius-2)}

.sizes{display:flex;align-items:flex-end;gap:var(--space-6);flex-wrap:wrap}
.sizes figure{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);margin:0}
.swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3)}
.swatch{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-3);border:1px solid var(--border-subtle);border-radius:var(--radius-3);text-decoration:none;transition:border-color var(--dur-1)}
.swatch:hover{border-color:var(--border-strong)}
.swatch--selected,.swatch--selected:hover{border-color:var(--accent)}

/* Inspect */
.inspect{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:var(--space-4);align-items:start}
.inspect__left{display:flex;flex-direction:column;gap:var(--space-4)}
.stage--grid{padding:var(--space-5)}
.gridwrap{position:relative;width:min(256px,100%)}
.gridwrap img{width:100%;height:auto}
.gridlines{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);margin:0;padding:0;list-style:none}
.gridlines li{border:1px dashed color-mix(in oklch,var(--text-muted) 35%,transparent);margin:-0.5px;padding:2px 4px;font:500 var(--fs-10)/1 var(--font-mono);color:var(--text-secondary)}
.words{display:flex;flex-direction:column;gap:var(--space-3)}
.word{display:flex;flex-direction:column;gap:4px}
.word code{font:var(--text-hash);font-size:var(--fs-14);color:var(--text-primary)}
.cells{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-2)}
.cell{position:relative;display:flex;flex-direction:column;gap:4px;padding:var(--space-2);border:1px solid var(--border-subtle);border-radius:var(--radius-2);min-width:0}
.cell--empty{opacity:.45;border-style:dashed}
.cell__i{position:absolute;top:var(--space-2);right:var(--space-2);color:var(--text-muted)}
.cell__swatch{width:20px;height:20px;border-radius:var(--radius-1);box-shadow:inset 0 0 0 1px oklch(1 0 0 / .08)}
.cell__el{font:500 var(--fs-12)/1.2 var(--font-mono)}
.cell .ht-hint{font-size:var(--fs-11)}

/* Export */
.export{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--space-4);align-items:stretch}
.export__meta .ht-card__body{display:flex;flex-direction:column;gap:var(--space-4)}
.facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-2) var(--space-4);margin:0;align-items:baseline}
.facts dd{margin:0;overflow-wrap:anywhere}
.export__foot{display:flex;justify-content:flex-end;gap:var(--space-2);padding:var(--space-3) 14px;border-top:1px solid var(--border-subtle)}
.export__out{max-height:180px}

/* API docs */
.doc{display:flex;flex-direction:column;gap:var(--space-4);max-width:760px}
.doc__head{display:flex;align-items:center;gap:var(--space-5)}
.doc__head img{border-radius:var(--radius-4)}
.doc h1{font:var(--text-h1);letter-spacing:var(--tracking-heading);margin:0 0 var(--space-2)}
.doc h2{font:var(--text-h3);margin:var(--space-4) 0 0}
.doc p{margin:0;color:var(--text-secondary);max-width:640px;text-wrap:pretty}
.doc p code{color:var(--text-primary)}
.doc__badges{display:flex;gap:6px}
.table{border:1px solid var(--border-subtle);border-radius:var(--radius-3);overflow:hidden}
.tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-3);align-items:baseline;padding:11px 14px;border-top:1px solid var(--border-subtle);font:var(--text-small);color:var(--text-secondary)}
.tr:first-child{border-top:0}
.tr:nth-child(odd){background:var(--surface-panel)}
.table--params .tr{grid-template-columns:90px minmax(0,1.4fr) 70px minmax(0,2fr)}
.tr code{overflow-wrap:anywhere}
.accent{color:var(--accent-text)}
.muted{color:var(--text-muted)}

@media (max-width:860px){
  .app{grid-template-columns:minmax(0,1fr)}
  .rail{position:static;height:auto;border-left:0;border-top:1px solid var(--border-subtle)}
  .main{padding:var(--space-4)}
  .inspect,.export{grid-template-columns:minmax(0,1fr)}
  .bar__spec{display:none}
  .bar__tabs .ht-tab .ht-icon{display:none}
}
@media (max-width:560px){
  .cells{grid-template-columns:repeat(2,minmax(0,1fr))}
  .swatches{grid-template-columns:repeat(2,minmax(0,1fr))}
  .table--params .tr{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}