/* 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)}

/* Every demo carries its own skin, on its own stage, so the page can show two at once. The
   control is drawn by the gallery's script next to the stage it owns. */
.demo{display:flex;flex-direction:column;min-width:0}
.stagebar{display:flex;align-items:center;gap:var(--s-2);justify-content:flex-end;margin-bottom:var(--s-2)}
.stagebar .tl{font-family:var(--mono);font-size:var(--fs-label);text-transform:uppercase;letter-spacing:var(--track-label);color:var(--fg-muted)}
.stagebar select{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:4px 8px;cursor:pointer}
.stagebar 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)}
.demo>.stage{flex:1 1 auto}
.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)}

/* ---------------------------------------------------------------- order channels */

/* Five surfaces that are not components: a phone, two chat clients, a wallet and an agent
   transcript. They are drawn with the page's own tokens rather than with the kit's, because they
   are not part of the package and a reader should never mistake one for something they install.
   Each carries one accent, which is the only place a channel's own colour appears. */
/* The surface is a phone sized thing and the code beside it is a webhook handler, so this split
   is not the even one the component sections use: the client gets what it needs, the code gets
   the rest of the row, and neither has to scroll sideways to be read. */
.chansplit{grid-template-columns:minmax(280px,360px) minmax(0,1fr)}
.chantabs{display:flex;gap:var(--s-1);flex-wrap:wrap;margin-bottom:var(--s-4)}
.chantab{font-family:var(--mono);font-size:var(--fs-caption);letter-spacing:.04em;color:var(--fg-muted);background:var(--bg-raised);border:var(--border) solid var(--line);border-radius:var(--r-2);padding:6px 12px;cursor:pointer}
.chantab:hover{color:var(--fg);border-color:var(--fg-muted)}
.chantab[aria-selected="true"]{color:var(--fg);border-color:var(--chan-on,var(--mark));box-shadow:inset 0 -2px 0 var(--chan-on,var(--mark))}
.chantab:focus-visible{outline:2px solid var(--focus);outline-offset:1px}

.chan[hidden]{display:none}
.chan{--chan:#6b7785;display:flex;flex-direction:column;min-height:420px;background:var(--bg-raised);border:var(--border) solid var(--line);border-radius:var(--r-3);overflow:hidden}
.chan-sms{--chan:#4a5a6b}
.chan-telegram{--chan:#2f87c7}
.chan-whatsapp{--chan:#1f8a5b}
.chan-wallet{--chan:#b5641f}
.chan-agent{--chan:#6f4ea3}
.chanhead{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:var(--s-3) var(--s-4);border-bottom:var(--border) solid var(--line);background:var(--bg-sunken)}
.chanwho{font-family:var(--mono);font-size:var(--fs-caption);color:var(--fg);display:flex;align-items:center;gap:var(--s-2);white-space:nowrap}
.chanwho::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--chan);flex:none}
.simtag{flex:none;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fg-muted);border:var(--border) solid var(--line);border-radius:var(--r-1);padding:1px 6px}

.thread{flex:1 1 auto;display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-4);overflow-y:auto;max-height:300px}
.bubrow{display:flex}
.bubrow.you{justify-content:flex-end}
.bub{max-width:82%;padding:7px 11px;border-radius:var(--r-3);font-size:var(--fs-small);line-height:1.45;white-space:pre-wrap;word-break:break-word}
.bub.them{background:var(--bg-sunken);border:var(--border) solid var(--line);border-bottom-left-radius:var(--r-1)}
.bub.you{background:var(--chan);color:#fff;border-bottom-right-radius:var(--r-1)}
.bub.good{border-left:2px solid var(--pos)}
.bub.bad{border-left:2px solid var(--neg)}
.bub.mono{font-family:var(--mono);font-size:var(--fs-caption)}
.bub.card{padding:0;background:transparent;border:none}

.kbd{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-top:2px}
.key{flex:1 1 auto;font-family:var(--mono);font-size:var(--fs-caption);color:var(--chan);background:var(--bg);border:var(--border) solid var(--line);border-radius:var(--r-2);padding:6px 8px;cursor:pointer}
.key:hover{border-color:var(--chan)}

.receipt{border:var(--border) solid var(--line);border-left:2px solid var(--chan);border-radius:var(--r-2);background:var(--bg-sunken);padding:var(--s-2) var(--s-3);min-width:210px}
.rrow{display:flex;justify-content:space-between;gap:var(--s-4);font-family:var(--mono);font-size:var(--fs-caption);padding:2px 0}
.rk{color:var(--fg-muted)}
.rv{color:var(--fg)}

.chips{display:flex;gap:var(--s-2);flex-wrap:wrap;padding:0 var(--s-4) var(--s-2)}
.chip{font-family:var(--mono);font-size:var(--fs-caption);color:var(--fg-muted);background:transparent;border:var(--border) solid var(--line);border-radius:999px;padding:3px 10px;cursor:pointer}
.chip:hover{color:var(--fg);border-color:var(--chan)}

.compose{display:flex;gap:var(--s-2);padding:var(--s-3) var(--s-4);border-top:var(--border) solid var(--line);background:var(--bg-sunken)}
.compose input{flex:1 1 auto;min-width:0;font-family:var(--mono);font-size:var(--fs-caption);color:var(--fg);background:var(--bg);border:var(--border) solid var(--line);border-radius:var(--r-2);padding:7px 10px}
.compose input:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.compose button{font-family:var(--mono);font-size:var(--fs-caption);color:#fff;background:var(--chan);border:var(--border) solid var(--chan);border-radius:var(--r-2);padding:7px 14px;cursor:pointer}
.compose button:hover{filter:brightness(1.08)}

.wallet{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-4)}
.wrow{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)}
.waddr{font-family:var(--mono);font-size:var(--fs-caption);color:var(--fg-muted)}
.wbtn{font-family:var(--mono);font-size:var(--fs-caption);color:var(--fg);background:var(--bg-sunken);border:var(--border) solid var(--line);border-radius:var(--r-2);padding:7px 12px;cursor:pointer}
.wbtn:hover{border-color:var(--chan)}
.wbtn.primary{color:#fff;background:var(--chan);border-color:var(--chan)}
.wform{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-2)}
.wfield{display:flex;flex-direction:column;gap:3px;min-width:0}
.wlabel{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fg-muted)}
.wfield input,.wfield select{font-family:var(--mono);font-size:var(--fs-caption);color:var(--fg);background:var(--bg);border:var(--border) solid var(--line);border-radius:var(--r-2);padding:6px 8px;min-width:0}
.wdata{font-family:var(--mono);font-size:var(--fs-caption);line-height:1.5;color:var(--fg-muted);background:var(--bg-sunken);border:var(--border) solid var(--line);border-radius:var(--r-2);padding:var(--s-3);margin:0;overflow-x:auto}
.wsteps{display:flex;flex-direction:column;gap:2px}
.wstep{font-family:var(--mono);font-size:var(--fs-caption);color:var(--fg-muted);padding:2px 0;border-top:var(--border) solid var(--line-soft)}
.wstep.good{color:var(--pos)}
.wstep.bad{color:var(--neg)}

.agent{flex:1 1 auto;display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-4);overflow-y:auto;max-height:380px}
.arow{display:flex;flex-direction:column;gap:2px}
.alabel{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fg-muted)}
.aval{font-size:var(--fs-small);line-height:1.45;white-space:pre-wrap;word-break:break-word}
.arow.you .aval{color:var(--fg);font-weight:500}
.arow.muted .aval{color:var(--fg-muted)}
.arow.good .aval{color:var(--pos)}
.arow.bad .aval{color:var(--neg)}
.arow.code .aval{font-family:var(--mono);font-size:var(--fs-caption);color:var(--fg-muted);background:var(--bg-sunken);border:var(--border) solid var(--line);border-left:2px solid var(--chan);border-radius:var(--r-2);padding:var(--s-2) var(--s-3);overflow-x:auto}

@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,.chansplit{grid-template-columns:minmax(0,1fr)}
  .wform{grid-template-columns:minmax(0,1fr)}
  .chan{min-height:0}
}