/* ═══════════════════════════════════════════════════════════════
   components.css — Design System Component Definitions
   Auto-extracted from preview/component-*.html
   DO NOT EDIT MANUALLY — regenerate via extract-components-css.mjs
   ═══════════════════════════════════════════════════════════════ */

/* ── Button ────────────────────────────────────────────────── */
/* @anatomy
   <div class="row"><span class="label">Primary</span><button class="btn btn-primary">Create Session</button><button class="btn btn-primary">Publish Update</button><button class="btn btn-primary" disabled>View Insights</button></div>
   <hr class="divider">
   <div class="row"><span class="label">Secondary</span><button class="btn btn-secondary">Create Session</button><button class="btn btn-secondary" disabled>Publish Update</button><button class="btn btn-ghost">View Insights</button></div>
*/
body{margin:0;padding:12px;background:var(--background);color:var(--foreground);font:500 14px/1.4 var(--font-sans)}.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 8px}.label{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-foreground);min-width:64px}.divider{border:0;border-top:1px solid var(--border);margin:10px 0}.btn{display:inline-flex;align-items:center;justify-content:center;gap:calc(var(--spacing)*2);min-height:40px;padding:0 calc(var(--spacing)*4);border:1px solid transparent;border-radius:var(--radius);box-shadow:var(--shadow-xs);font:600 13px/1 var(--font-sans);letter-spacing:var(--tracking-normal);cursor:pointer;transition:background-color .16s ease,color .16s ease,border-color .16s ease,transform .16s ease}.btn:focus-visible{outline:2px solid var(--ring);outline-offset:2px}.btn:active{transform:translateY(1px)}.btn-primary{background:var(--primary);color:var(--primary-foreground)}.btn-primary:hover{filter:brightness(.96)}.btn-secondary{background:var(--secondary);color:var(--secondary-foreground);border-color:var(--secondary)}.btn-secondary:hover{filter:brightness(1.08)}.btn-ghost{background:transparent;color:var(--foreground);border-color:var(--border);min-height:32px;padding:0 calc(var(--spacing)*3)}.btn-ghost:hover{background:var(--accent);color:var(--accent-foreground)}.btn:disabled{background:var(--muted);color:var(--muted-foreground);border-color:var(--border);box-shadow:none;cursor:not-allowed;transform:none;filter:none}

/* ── Card ──────────────────────────────────────────────────── */
/* @anatomy
   <div class="row"><span class="label">summary</span><article class="card"><p class="eyebrow">Vibecamp Dashboard</p><h2 class="title">Active Sessions</h2><p class="body">148 members checked in across 12 live rooms.</p><div class="meta"><span>Updated 2m ago</span><span>+18%</span></div></article><article class="card disabled" aria-disabled="true"><p class="eyebrow">Vibecamp Dashboard</p><h2 class="title">Community Pulse</h2><p class="body">Signal refresh is paused until the next sync window.</p><div class="meta"><span>Sync queued</span><span>Standby</span></div></article></div>
   <hr class="divider">
   <div class="row"><span class="label">featured</span><article class="card accent selected"><h2 class="title">Peak Attendance</h2><p class="body">North Hall is trending ahead of forecast for tonight.</p><div class="meta"><span>1,284 attendees</span><span>Prime slot</span></div><span class="action">View trend</span></article><article class="card compact"><h2 class="title">Community Pulse</h2><p class="body">Volunteer notes and member sentiment are grouped here.</p><div class="meta"><span>18 updates</span><span>Low noise</span></div></article></div>
*/
body{margin:0;padding:12px;background:var(--background);color:var(--foreground);font:13px/1.4 var(--font-sans)}.row{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch;margin-bottom:8px}.label{width:100%;font:600 10px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted-foreground)}.card{flex:1 1 176px;min-width:176px;max-width:220px;padding:calc(var(--spacing)*4) calc(var(--spacing)*4.5);border:1px solid var(--border);border-radius:var(--radius);background:var(--card);color:var(--card-foreground);box-shadow:var(--shadow);transition:transform .16s ease,border-color .16s ease,background .16s ease}.card:hover{transform:translateY(-1px);border-color:var(--ring)}.eyebrow{margin:0 0 calc(var(--spacing)*1.5);font:600 10px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted-foreground)}.title{margin:0;font-size:14px;font-weight:600}.body{margin:calc(var(--spacing)*2) 0 0;font-size:12px;color:var(--muted-foreground)}.meta{display:flex;justify-content:space-between;gap:8px;margin-top:calc(var(--spacing)*3);font-size:11px;color:var(--muted-foreground)}.disabled{background:var(--muted);opacity:.56;pointer-events:none;box-shadow:var(--shadow-xs)}.selected{border-color:var(--primary)}.accent{background:var(--accent);color:var(--foreground);border-color:transparent}.accent .body,.accent .meta{color:var(--foreground)}.compact{padding:calc(var(--spacing)*3)}.action{display:inline-flex;align-items:center;justify-content:center;min-width:70px;margin-top:calc(var(--spacing)*3);padding:calc(var(--spacing)*1.5) calc(var(--spacing)*3);border-radius:var(--radius);background:var(--primary);color:var(--primary-foreground);font-size:11px;font-weight:600}.divider{margin:10px 0;border:0;border-top:1px solid var(--border)}

/* ── Chart ─────────────────────────────────────────────────── */
/* @anatomy
   <div class="r"><span class="l">bar</span><article class="c"><div class="m"><h2 class="t">Attendance Trend</h2><span class="x">+18%</span></div><div class="g"><span class="k"><span class="d a"></span>Early</span><span class="k"><span class="d b"></span>Peak</span><span class="k"><span class="d n"></span>Late</span></div><div class="bars"><span></span><span></span><span></span><span></span></div><div class="f"><span>Mon-Thu</span><span>1,284 check-ins</span></div></article><article class="c off" aria-disabled="true"><div class="m"><h2 class="t">Attendance Trend</h2><span class="x">Paused</span></div><div class="bars"><span></span><span></span><span></span><span></span></div><div class="f"><span>14m ago</span><span>Standby</span></div></article></div>
   <hr class="divider">
   <div class="r"><span class="l">highlighted</span><article class="c"><div class="m"><h2 class="t">Community Growth</h2><span class="x">Top cohort</span></div><svg class="s" viewBox="0 0 160 92" aria-hidden="true"><path d="M8 58L48 42L82 58L116 38L152 50"/></svg><div class="f"><span>7-day trend</span><span>+246 members</span></div></article><article class="c"><h2 class="t">Audience Mix</h2><div class="w"><div class="o"></div><div class="v"><span class="k"><span class="d a"></span>Members 42%</span><span class="k"><span class="d b"></span>Guests 32%</span><span class="k"><span class="d n"></span>Hosts 26%</span></div></div><div class="f"><span>Live rooms</span><span>Balanced reach</span></div></article></div>
*/
body{margin:0;padding:12px;background:var(--background);color:var(--foreground);font:13px/1.4 var(--font-sans)}.r{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}.l{width:100%;font:600 10px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted-foreground)}.c{flex:1 1 190px;min-width:190px;padding:calc(var(--spacing)*3.5);border:1px solid var(--border);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow-sm)}.c:hover{border-color:var(--ring)}.m,.g,.f{display:flex;gap:8px}.m,.f{justify-content:space-between}.t{margin:0;font-size:14px}.x,.g,.f{font-size:11px;color:var(--muted-foreground)}.x{color:var(--chart-2);font-weight:600}.g{flex-wrap:wrap;margin-top:calc(var(--spacing)*2)}.k{display:inline-flex;align-items:center;gap:4px}.d{width:8px;height:8px;border-radius:99px}.a{background:var(--chart-1)}.b{background:var(--chart-2)}.n{background:var(--chart-3)}.bars{display:flex;align-items:flex-end;gap:8px;height:96px;margin-top:calc(var(--spacing)*3)}.bars span{flex:1;border-radius:var(--radius) var(--radius) 0 0}.bars span:nth-child(1){height:60%;background:var(--chart-1)}.bars span:nth-child(2){height:84%;background:var(--chart-2)}.bars span:nth-child(3){height:52%;background:var(--chart-4)}.bars span:nth-child(4){height:94%;background:var(--chart-3)}.f{margin-top:calc(var(--spacing)*2)}.off{background:var(--muted);opacity:.58;pointer-events:none;box-shadow:var(--shadow-xs)}.divider{margin:10px 0;border:0;border-top:1px solid var(--border)}.s{width:100%;height:92px;margin-top:calc(var(--spacing)*3)}.s path{fill:none;stroke:var(--chart-2);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.w{display:flex;align-items:center;gap:12px;margin-top:calc(var(--spacing)*3)}.o{width:84px;height:84px;border-radius:99px;background:conic-gradient(var(--chart-1) 0 42%,var(--chart-2) 42% 74%,var(--chart-3) 74%);position:relative;box-shadow:inset 0 0 0 1px var(--border)}.o:after{content:"";position:absolute;inset:18px;border-radius:99px;background:var(--card)}.v{display:grid;gap:6px;font-size:11px;color:var(--muted-foreground)}

/* ── Navigation ────────────────────────────────────────────── */
/* @anatomy
   <div class="row">
   <span class="label">topbar</span>
   <nav class="bar" aria-label="Primary">
   <span class="brand">Vibecamp</span>
   <span class="links">
   <a class="item active" href="#">Overview</a>
   <a class="item" href="#">Program</a>
   <a class="item" href="#">Community</a>
   </span>
   <span class="util" aria-hidden="true">24</span>
   </nav>
   <nav class="bar is-disabled" aria-label="Primary disabled">
   <span class="brand">Vibecamp</span>
   <span class="links">
   <a class="item active" href="#" aria-disabled="true">Overview</a>
   <a class="item" href="#" aria-disabled="true">Program</a>
   <a class="item" href="#" aria-disabled="true">Community</a>
   </span>
   <span class="util" aria-hidden="true">24</span>
   </nav>
   </div>
   <hr class="divider">
   <div class="row">
   <span class="label">segmented</span>
   <div class="seg" role="tablist" aria-label="View switch">
   <a class="item active" href="#" role="tab" aria-selected="true">Overview</a>
   <a class="item" href="#" role="tab" aria-selected="false">Program</a>
   <a class="item" href="#" role="tab" aria-selected="false">Community</a>
   </div>
   <div class="seg is-disabled" role="tablist" aria-label="View switch disabled">
   <a class="item active" href="#" role="tab" aria-selected="true" aria-disabled="true">Overview</a>
   <a class="item" href="#" role="tab" aria-selected="false" aria-disabled="true">Program</a>
   <a class="item" href="#" role="tab" aria-selected="false" aria-disabled="true">Community</a>
   </div>
   </div>
*/
body{margin:0;padding:12px;background:var(--background);color:var(--foreground);font:14px/1.4 var(--font-sans)}.row{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap;margin-bottom:8px}.label{display:inline-flex;align-items:center;min-height:44px;padding:0 calc(var(--spacing)*2);font:600 10px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted-foreground)}.bar,.seg{display:flex;align-items:center;gap:calc(var(--spacing)*2);border:1px solid var(--border);border-radius:calc(var(--radius) + 6px);background:var(--card);color:var(--card-foreground);box-shadow:var(--shadow-sm)}.bar{min-width:300px;justify-content:space-between;padding:calc(var(--spacing)*2) calc(var(--spacing)*3)}.brand{font-weight:700;letter-spacing:-.02em}.links,.switch{display:flex;gap:6px;align-items:center}.item{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 calc(var(--spacing)*2);border-radius:var(--radius);color:var(--muted-foreground);text-decoration:none;border:1px solid transparent;white-space:nowrap}.item.active{background:var(--secondary);color:var(--secondary-foreground);border-color:var(--border)}.bar .item:hover,.seg .item:hover{background:var(--accent);color:var(--accent-foreground)}.item:focus-visible{outline:2px solid var(--ring);outline-offset:2px}.item[aria-disabled=true],.is-disabled .item{opacity:.45;pointer-events:none}.util{display:inline-flex;align-items:center;min-width:32px;min-height:32px;justify-content:center;border-radius:var(--radius);background:var(--muted);color:var(--foreground);font-size:12px}.seg{padding:4px;background:var(--muted)}.seg .item{min-height:34px;color:var(--foreground)}.seg .item.active{background:var(--primary);color:var(--primary-foreground);border-color:transparent}.divider{height:1px;margin:8px 0;border:0;background:var(--border)}

/* ── Sidebar ───────────────────────────────────────────────── */
/* @anatomy
   <div class="row"><span class="label">primary</span><aside class="sidebar"><div class="brand"><b>Vibecamp</b><span>Dashboard</span></div><div><div class="section">Workspace</div><nav class="nav"><a class="item active" href="#"><span class="dot"></span>Dashboard</a><a class="item" href="#"><span class="dot"></span>Check-ins</a><a class="item disabled" aria-disabled="true"><span class="dot"></span>Channels</a></nav></div><div class="foot">2 live rooms</div></aside><aside class="sidebar"><div class="brand"><b>Vibecamp</b><span>Dashboard</span></div><div><div class="section">Workspace</div><nav class="nav"><a class="item" href="#"><span class="dot"></span>Dashboard</a><a class="item active" href="#"><span class="dot"></span>Check-ins</a><a class="item" href="#"><span class="dot"></span>Channels</a></nav></div><div class="foot">Crew sync at 4:30</div></aside></div>
   <hr class="divider">
   <div class="row"><span class="label">compact</span><aside class="sidebar compact"><div><div class="section">Quick access</div><nav class="nav"><a class="item accent" href="#"><span class="dot"></span>Check-ins</a><a class="item" href="#"><span class="dot"></span>Dashboard</a><a class="item" href="#"><span class="dot"></span>Channels</a></nav></div></aside><aside class="sidebar collapsed" aria-label="Collapsed sidebar"><nav class="nav"><a class="item active" href="#" aria-label="Dashboard"><span class="dot">D</span></a><a class="item" href="#" aria-label="Check-ins"><span class="dot">C</span></a><a class="item disabled" aria-disabled="true" aria-label="Channels"><span class="dot">H</span></a></nav></aside></div>
*/
body{margin:0;padding:12px;background:var(--background);color:var(--foreground);font:13px/1.4 var(--font-sans)}.row{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start;margin-bottom:8px}.label{width:100%;font:600 10px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted-foreground)}.sidebar{display:flex;flex-direction:column;gap:calc(var(--spacing)*3);width:170px;min-height:228px;padding:calc(var(--spacing)*4);border:1px solid var(--sidebar-border);border-radius:var(--radius);background:var(--sidebar);color:var(--sidebar-foreground);box-shadow:var(--shadow)}.brand{display:grid;gap:2px;padding-bottom:calc(var(--spacing)*2);border-bottom:1px solid var(--sidebar-border)}.brand b{font-size:13px}.brand span,.section{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-foreground)}.nav{display:grid;gap:calc(var(--spacing)*1.5)}.item{display:flex;align-items:center;gap:calc(var(--spacing)*2);padding:calc(var(--spacing)*2) calc(var(--spacing)*2.5);border-radius:calc(var(--radius) - 8px);color:inherit;text-decoration:none;background:transparent;transition:background .16s ease,color .16s ease,outline-color .16s ease}.item:hover{background:var(--accent)}.item:focus-visible{outline:2px solid var(--sidebar-ring);outline-offset:1px}.item.active{background:var(--sidebar-primary);color:var(--sidebar-primary-foreground)}.item.accent{background:var(--sidebar-accent);color:var(--sidebar-accent-foreground)}.item.disabled{opacity:.46;pointer-events:none}.dot{width:8px;height:8px;border-radius:999px;background:currentColor;flex:none}.foot{margin-top:auto;padding-top:calc(var(--spacing)*2);border-top:1px solid var(--sidebar-border);font-size:11px;color:var(--muted-foreground)}.compact{width:154px;min-height:204px;padding:calc(var(--spacing)*3)}.collapsed{width:68px;min-height:204px;align-items:center;padding:calc(var(--spacing)*3)}.collapsed .brand,.collapsed .section,.collapsed .foot{display:none}.collapsed .nav{width:100%}.collapsed .item{justify-content:center;padding:calc(var(--spacing)*2.5)}.collapsed .dot{width:24px;height:24px;border-radius:calc(var(--radius) - 6px);display:grid;place-items:center;font:600 11px/1 var(--font-mono)}.divider{margin:10px 0;border:0;border-top:1px solid var(--border)}

/* ── Table ─────────────────────────────────────────────────── */
/* @anatomy
   <div class="row"><span class="label">Roster</span><div class="panel"><table class="table"><thead><tr><th>Stage</th><th>Capacity</th><th>Host</th><th>Status</th><th></th></tr></thead><tbody><tr><td>Main Hall</td><td>220</td><td>Rina</td><td><span class="tag">Live</span></td><td><button class="btn">Open</button></td></tr><tr class="off"><td>Sunset Deck</td><td>80</td><td>Noah</td><td><span class="tag">Draft</span></td><td><button class="btn" disabled>Locked</button></td></tr></tbody></table></div></div>
   <hr class="divider">
   <div class="row"><span class="label">Selectable</span><div class="panel"><table class="table compact"><thead><tr><th></th><th>Stage</th><th>Capacity</th><th>Host</th></tr></thead><tbody><tr><td><span class="sel on">✓</span></td><td>Studio A</td><td>48</td><td>Maya</td></tr><tr><td><span class="sel"></span></td><td>Workshop Hub</td><td>36</td><td>Jules</td></tr></tbody></table></div></div>
*/
body{margin:0;padding:12px;background:var(--background);color:var(--foreground);font:14px/1.4 var(--font-sans);letter-spacing:var(--tracking-normal)}.row{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}.label{padding-top:10px;min-width:78px;color:var(--muted-foreground);font:600 10px/1 var(--font-mono);text-transform:uppercase;letter-spacing:.08em}.panel{min-width:0;flex:1;background:var(--card);color:var(--card-foreground);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}.table{width:100%;border-collapse:separate;border-spacing:0}.table th,.table td{padding:calc(var(--spacing)*3) calc(var(--spacing)*4);text-align:left;border-bottom:1px solid var(--border)}.table th{background:var(--muted);color:var(--muted-foreground);font-size:11px;font-weight:600}.table tr:last-child td{border-bottom:0}.tag{display:inline-flex;align-items:center;padding:0 calc(var(--spacing)*2);min-height:20px;border-radius:999px;background:var(--accent);color:var(--accent-foreground);font-size:11px}.btn{padding:calc(var(--spacing)*1.5) calc(var(--spacing)*3);border:1px solid var(--border);border-radius:calc(var(--radius) - 8px);background:var(--background);color:var(--foreground);font:600 12px/1 var(--font-sans)}.btn:disabled{background:var(--muted);color:var(--muted-foreground)}.off td{color:var(--muted-foreground)}.divider{margin:12px 0;border:0;border-top:1px solid var(--border)}.compact th,.compact td{padding:calc(var(--spacing)*2) calc(var(--spacing)*3)}.compact tbody tr:hover{background:var(--accent)}.sel{width:16px;height:16px;border:1px solid var(--border);border-radius:4px;display:inline-grid;place-items:center;background:var(--background)}.sel.on{border-color:var(--ring);background:var(--primary);color:var(--primary-foreground)}