/* The gallery's chrome: the API reference's own vocabulary, reproduced.

   The tokens, the two families and the base layer come from clobber.css, linked in the head with
   its content hash. The top bar, the sidebar, the code blocks and the callouts are copied from
   site/docs/index.html rather than imported, which is the same bargain that page makes with the
   design system: these pages are hand written single files, and a shared component stylesheet
   would be a third file that has to arrive with both of them.

   Everything below the chrome section is this page's own: the stages the components mount into,
   the skin grid, the controls and the event log. */

:root{ --sidebar:230px }

/* ---------------------------------------------------------------- chrome */

.topbar{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:var(--border) solid var(--line)}
.topinner{display:flex;align-items:center;justify-content:space-between;gap:var(--s-6);padding:var(--s-3) var(--s-8);min-height:64px}
.logo{font-weight:700;font-size:1.25rem;letter-spacing:-.03em;text-decoration:none;white-space:nowrap;color:var(--fg)}
.logo .dot{color:var(--mark)}
.logo .sub{font-family:var(--mono);font-weight:500;font-size:var(--fs-label);color:var(--fg-muted);margin-left:.6em;letter-spacing:var(--track-label);text-transform:uppercase}
.toplinks{display:flex;align-items:center;gap:var(--s-6);font-size:var(--fs-small);color:var(--fg-muted)}
.toplinks a:not(.btn){text-decoration:none;padding:var(--s-2) 0;border-bottom:2px solid transparent;color:inherit;transition:color var(--t) var(--ease),border-color var(--t) var(--ease)}
.toplinks a:not(.btn):hover{color:var(--fg)}
.toplinks a.here{color:var(--fg);border-bottom-color:var(--mark)}
.menubtn{display:none;background:var(--bg-raised);border:var(--border) solid var(--line);color:var(--fg);border-radius:var(--r-2);padding:var(--s-2) var(--s-3);font-family:var(--mono);font-size:var(--fs-caption);cursor:pointer}

.shell{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);gap:0;max-width:1400px;margin:0 auto}
.sidebar{border-right:var(--border) solid var(--line);padding:var(--s-8) var(--s-4) var(--s-16);position:sticky;top:64px;height:calc(100vh - 64px);overflow-y:auto;overscroll-behavior:contain}
.sidebar::-webkit-scrollbar{width:8px}
.sidebar::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.navgroup{margin-bottom:var(--s-6)}
.navgroup .gt{font-family:var(--mono);font-size:var(--fs-label);font-weight:500;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fg-muted);margin-bottom:var(--s-2);padding-left:var(--s-3)}
.sidebar a{display:block;text-decoration:none;color:var(--fg-muted);font-size:var(--fs-small);padding:var(--s-1) var(--s-3);border-left:var(--border) solid var(--line);line-height:1.4;transition:color var(--t) var(--ease),border-color var(--t) var(--ease)}
.sidebar a:hover{color:var(--fg);border-left-color:var(--fg-muted)}
.sidebar a.active{color:var(--fg);font-weight:600;border-left:2px solid var(--mark);padding-left:calc(var(--s-3) - 1px)}

main{padding:var(--s-12) var(--s-12) var(--s-24);max-width:1120px;min-width:0}
h1{font-weight:700;font-size:clamp(2rem,1.45rem + 2.4vw,3.25rem);line-height:var(--lh-snug);letter-spacing:var(--track-h2);margin-bottom:var(--s-4)}
h2{font-weight:700;font-size:clamp(1.625rem,1.4rem + 1.05vw,2.125rem);line-height:1.2;letter-spacing:var(--track-h2);margin:0 0 var(--s-4);scroll-margin-top:88px;text-wrap:balance}
h3{font-size:clamp(1.25rem,1.15rem + .3vw,1.375rem);font-weight:600;line-height:1.3;letter-spacing:-.01em;margin:var(--s-8) 0 var(--s-3);scroll-margin-top:88px}
p{margin-bottom:var(--s-4);max-width:var(--measure);text-wrap:pretty}
main section{padding-top:var(--s-12);border-top:var(--border) solid var(--line);margin-top:var(--s-12);scroll-margin-top:88px}
main section:first-of-type{border-top:none;margin-top:0;padding-top:0}
.kicker{display:flex;align-items:center;gap:var(--s-3);font-family:var(--mono);font-size:var(--fs-label);font-weight:500;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fg-muted);margin-bottom:var(--s-3)}
.kicker::before{content:"";width:var(--s-4);height:2px;background:var(--mark);flex:none}
.lead{font-size:clamp(1.125rem,1.05rem + .35vw,1.375rem);line-height:1.45;color:var(--fg-muted);margin-bottom:var(--s-8);max-width:var(--measure)}
ul{margin:0 0 var(--s-4) var(--s-6);max-width:var(--measure)}
li{padding:3px 0}
li::marker{color:var(--fg-muted)}
strong{font-weight:600}
code{font-family:var(--mono);font-size:.88em;background:var(--bg-sunken);border:var(--border) solid var(--line);border-radius:var(--r-1);padding:1px 5px;white-space:nowrap}
a.ln{color:inherit;text-decoration:underline;text-decoration-color:var(--fg-muted);text-decoration-thickness:1px;text-underline-offset:.2em}
a.ln:hover{text-decoration-color:currentColor}

.codeblock{background:var(--bg-raised);border:var(--border) solid var(--line);border-radius:var(--r-3);font-family:var(--mono);font-size:.8125rem;line-height:1.65;margin-bottom:var(--s-4);overflow:hidden}
.codehead{padding:var(--s-2) var(--s-3) var(--s-2) var(--s-4);border-bottom:var(--border) solid var(--line);background:var(--bg-sunken);color:var(--fg-muted);font-size:var(--fs-label);display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);text-transform:uppercase;letter-spacing:var(--track-label)}
.codeblock pre{padding:var(--s-4);overflow-x:auto;white-space:pre;tab-size:2;margin:0}
/* Two panes per example, one language each. Picking a tab picks it everywhere on the page,
   because a reader who works in React should not have to say so nine times. */
.codehead .tabs{display:flex;gap:2px;margin-right:auto}
.tab{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-muted);background:transparent;border:var(--border) solid transparent;border-radius:var(--r-1);padding:3px 9px;cursor:pointer}
.tab:hover{color:var(--fg)}
.tab[aria-selected="true"]{color:var(--fg);background:var(--bg);border-color:var(--line)}
.tab:focus-visible{outline:2px solid var(--focus);outline-offset:1px}

.copy{background:transparent;border:var(--border) solid var(--line);color:var(--fg-muted);border-radius:var(--r-1);font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;padding:3px 8px;cursor:pointer;text-transform:uppercase}
.copy:hover{color:var(--fg);border-color:var(--fg-muted)}
.copy.done{color:var(--pos);border-color:var(--pos)}
.c-k{color:var(--fg);font-weight:500} .c-s{color:var(--pos)} .c-c{color:var(--fg-muted)}
.c-p{color:#3A5F8A} .c-n{color:#7A4E9E}

.note{border-left:2px solid #3A5F8A;background:rgba(58,95,138,.06);border-radius:0 var(--r-3) var(--r-3) 0;padding:var(--s-3) var(--s-4);margin-bottom:var(--s-6);max-width:var(--measure)}
.note.warn{border-left-color:var(--mark);background:var(--signal-wash)}
.note .nt{font-family:var(--mono);font-size:var(--fs-label);font-weight:500;letter-spacing:var(--track-label);text-transform:uppercase;color:#3A5F8A;margin-bottom:var(--s-1)}
.note.warn .nt{color:var(--fg)}
.note p:last-child{margin-bottom:0}

.tablewrap{overflow-x:auto;margin-bottom:var(--s-6);border:var(--border) solid var(--line);border-radius:var(--r-3);background:var(--bg-raised)}
table{border-collapse:collapse;width:100%;font-size:var(--fs-small);min-width:520px}
th{text-align:left;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fg-muted);font-weight:500;padding:var(--s-3) var(--s-4);background:var(--bg-sunken);border-bottom:var(--border) solid var(--line);white-space:nowrap}
td{padding:var(--s-3) var(--s-4);border-bottom:var(--border) solid var(--line-soft);vertical-align:top}
tr:last-child td{border-bottom:none}
td:first-child{font-family:var(--mono);font-size:var(--fs-caption);white-space:nowrap}

footer{border-top:var(--border) solid var(--line);padding:var(--s-6) var(--s-12);color:var(--fg-muted);font-size:var(--fs-caption);font-family:var(--mono);display:flex;justify-content:space-between;gap:var(--s-6);flex-wrap:wrap}
footer a{text-decoration:none;color:inherit}
footer a:hover{color:var(--fg)}

/* ---------------------------------------------------------------- the gallery itself */

/* Controls sit in the section that explains what they do, not in a band across the top: the skin
   switcher next to the skins, the three that break the feed next to the resync. */
.controls{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;margin-bottom:var(--s-4)}
.controls .tl{font-family:var(--mono);font-size:var(--fs-label);text-transform:uppercase;letter-spacing:var(--track-label);color:var(--fg-muted)}
.controls select,.controls button{font-family:var(--mono);font-size:var(--fs-caption);color:var(--fg);background:var(--bg-raised);border:var(--border) solid var(--line);border-radius:var(--r-2);padding:5px 9px;cursor:pointer}
.controls button:hover,.controls select:hover{border-color:var(--fg-muted)}

.split{display:grid;grid-template-columns:minmax(280px,1fr) minmax(300px,1fr);gap:var(--s-6);align-items:start;margin-bottom:var(--s-4)}
.stage{background:var(--clobber-bg,var(--bg-raised));border:var(--border) solid var(--line);border-radius:var(--r-3);padding:var(--s-4);min-height:320px;display:flex;flex-direction:column;gap:var(--s-3);transition:background var(--t) var(--ease)}
.stage>.clb{flex:1 1 auto}
.stage.short{min-height:0}
.stage.tall{min-height:380px}
.stage.flat{min-height:0;padding:var(--s-3)}
.stage.plain{background:transparent;border:none;padding:0;min-height:0}

.skin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));gap:var(--s-4)}
.skin-cell{display:flex;flex-direction:column;gap:var(--s-2)}
.skin-name{font-family:var(--mono);font-size:var(--fs-label);text-transform:uppercase;letter-spacing:var(--track-label);color:var(--fg-muted)}
.skin-cell .stage{min-height:0;padding:var(--s-3);border-color:var(--line-soft)}

.logwrap{border:var(--border) solid var(--line);border-radius:var(--r-3);background:var(--bg-raised);overflow:hidden}
.log{font-family:var(--mono);font-size:var(--fs-caption);line-height:1.75;padding:var(--s-3) var(--s-4);height:170px;overflow-y:auto;color:var(--fg-muted)}
.log b{color:var(--fg);font-weight:500}
.log .warn{color:#B5641F}
.log .bad{color:var(--neg)}
.log .good{color:var(--pos)}

@media (max-width:1000px){
  .shell{grid-template-columns:1fr}
  .sidebar{display:none;position:fixed;top:64px;left:0;right:0;height:auto;max-height:calc(100vh - 64px);width:100%;background:var(--bg);border-right:none;border-bottom:var(--border) solid var(--line);z-index:40}
  .sidebar.open{display:block}
  .menubtn{display:block}
  .toplinks{display:none}
  main{padding:var(--s-8) var(--s-4) var(--s-16)}
  .split{grid-template-columns:minmax(0,1fr)}
}