/* Component gallery: moved from the old components.html. Element rules are scoped to .legacy so they only reach the migrated
   mockups; the docs shell and live examples use the CSS system. */

/* Component gallery: every state of each shared component (components/*.yaml), rendered on the web with
   the app's own transit.js in fixed light and dark panes, beside the matching iOS screenshot. */
 .legacy{background:var(--paper);color:var(--ink)}
.g-main{max-width:1180px;margin:0 auto;padding:28px var(--gutter) 80px}
.g-head{padding-bottom:24px;border-bottom:1px solid var(--line)}
.g-head h1{margin:8px 0 0;font-size:clamp(32px,5vw,44px);font-weight:800;letter-spacing:-.02em;line-height:1.05}
.g-head p{margin:10px 0 0;color:var(--muted);max-width:68ch}
.g-crumb{font-size:var(--fs-sub);font-weight:600}
.g-toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.g-toc a{padding:6px 12px;border-radius:var(--radius-pill);background:var(--card);font-size:var(--fs-sub);font-weight:600;text-decoration:none}
.g-comp{padding-top:40px;scroll-margin-top:16px}
.g-comp>h2{margin:0;font-size:28px;font-weight:800;letter-spacing:-.01em}
.g-comp>h2 small{font-size:var(--fs-sub);font-weight:500;color:var(--muted);margin-left:8px;font-family:var(--font-mono, monospace)}
.g-comp>p{margin:6px 0 0;color:var(--muted);max-width:72ch}
.g-comp h3{margin:28px 0 10px;font-size:17px}
.g-state{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;margin-top:12px}
.g-state-head{padding:12px 16px;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline}
.g-state-head b{font-size:var(--fs-body)}
.g-state-head span{color:var(--muted);font-size:var(--fs-sub)}
.g-state-tokens{flex-basis:100%;font-size:12px;color:var(--muted)}
.g-state-tokens code{font-size:11.5px}
.g-chip{display:inline-block;padding:1px 8px;border-radius:var(--radius-pill);font-size:11px;font-weight:700;background:var(--card-2);color:var(--muted)}
.g-chip.on{background:var(--accent-tint);color:var(--accent)}
.g-chip.open{background:var(--card-2);color:var(--warn)}
.g-slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.g-slot{min-width:0;display:grid;grid-template-rows:auto 1fr;border-left:1px solid var(--line)}
.g-slot:first-child{border-left:0}
.g-slot>h4{margin:0;padding:6px 12px;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);background:var(--card);font-weight:700}
.g-pane{padding:16px 12px;display:grid;place-items:center;min-height:120px;background:var(--paper);color:var(--ink)}
.g-pane.wide{place-items:stretch;align-content:center}
.g-stage{position:relative;width:100%;height:96px;border-radius:10px;background:var(--card)}
.g-stage>.g-pin{position:absolute;left:50%;top:50%}
/* The app's markers sit in Leaflet's container, which lifts the reset's svg max-width. */
.g-stage svg{max-width:none}
.g-empty{display:grid;place-items:center;text-align:center;gap:4px;min-height:120px;padding:12px;margin:10px;border:1.5px dashed var(--line);border-radius:10px;color:var(--muted);font-size:12px}
.g-empty b{color:var(--ink);font-size:12.5px}
.g-shot{padding:10px;display:grid;justify-items:center;gap:6px;font-size:12px;color:var(--muted);text-align:center}
.g-shot img{width:auto;max-width:100%;max-height:300px;border-radius:12px;box-shadow:0 0 0 1px var(--line)}
.g-table{width:100%;border-collapse:collapse;font-size:var(--fs-sub)}
.g-table th,.g-table td{text-align:left;vertical-align:top;padding:7px 10px 7px 0;border-bottom:1px solid var(--line)}
.g-table th{font-size:12px;color:var(--muted);font-weight:700}
.g-table code{font-size:12px;white-space:nowrap}
.g-swatch{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px;margin-right:6px;box-shadow:0 0 0 1px var(--line)}
.g-lit{color:var(--warn);font-weight:700;font-size:11px;margin-right:4px}
.g-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:8px 32px}
.g-dl{margin:0;display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;font-size:var(--fs-sub)}
.g-dl dt{color:var(--muted);font-weight:600}
.g-dl dd{margin:0}
.g-scroll{overflow-x:auto}
@media (max-width:900px){
  .g-slots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-slot:nth-child(3){border-left:0}
  .g-slot:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:520px){
  .g-slots{grid-template-columns:minmax(0,1fr)}
  .g-slot{border-left:0}
  .g-slot+.g-slot{border-top:1px solid var(--line)}
}