/* ==========================================================================
   TinkySpeak Board Builder — Stylesheet
   --------------------------------------------------------------------------
   EXTRACTED from builder.html on 2026-05-01 as Phase 0a step 1 of the
   3681-line monolith split. No declarations changed — this is a pure
   lift of the inline <style> block at the top of the page. The HTML now
   loads it via <link rel="stylesheet" href="/css/builder.css">.

   LABEL: PRODUCTION-READY (lift-and-shift; zero behavior change).
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#FBF7F0;--bg-warm:#F5EDE0;--bg-cool:#F0EBE3;
  --ink:#1A1A2E;--ink-soft:#4A4A5A;--ink-muted:#8A8A9A;
  /* Tinky brand — dark blue, modern. The brand-bearing primary
     CTA color across the platform (Add pill, modal primary
     buttons, hover/focus rings on nav). Values match the Tailwind
     `brand.blue*` palette in tailwind.config.ts so the static HTML
     surfaces and the Next.js surfaces visually agree.
     Amber (below) is retained for warning / save-state / active-
     filter accents only — it is NOT the primary CTA color. */
  --brand-blue:#7C3AED;
  --brand-blue-dark:#5B21B6;
  --brand-blue-light:#DDD6FE;
  --brand-ink:#0C1530;
  --brand-bg-soft:#F3EEFF;
  --amber:#E8A838;--amber-light:#F5C563;--amber-dark:#C48A20;
  /* CANONICAL token source is css/builder/tokens.css (loaded app-wide). These
     brand tokens MUST match it — enforced by the token-drift-guard test. Only
     the builder-layout vars below (--sidebar-w/--topbar-h/...) are base-only. */
  --amber-bg:#FFF8E1;
  --nav-bg:#1A1A2E;--nav-text:#F5EDE0;
  --surface:#FFFFFF;--surface-hover:#FAFAF5;--surface-active:#F5F0E8;
  --border:#E5DDD0;--border-light:#EDE8E0;
  --shadow-sm:0 1px 3px rgba(26,26,46,0.06);
  --shadow-md:0 4px 12px rgba(26,26,46,0.08);
  --shadow-lg:0 8px 30px rgba(26,26,46,0.12);
  --shadow-xl:0 16px 50px rgba(26,26,46,0.16);
  --radius-sm:8px;--radius-md:12px;--radius-lg:18px;--radius-xl:24px;
  /* Fitzgerald Key */
  --fk-verb:#FF8C00;--fk-noun:#FFD700;--fk-adj:#4169E1;
  --fk-social:#FF69B4;--fk-question:#32CD32;--fk-misc:#FFFFFF;--fk-neg:#DC143C;
  --fk-verb-bg:#FFF3E0;--fk-noun-bg:#FFFDE7;--fk-adj-bg:#E3F2FD;
  --fk-social-bg:#FCE4EC;--fk-question-bg:#E8F5E9;--fk-misc-bg:#FAFAFA;--fk-neg-bg:#FFEBEE;
  --sidebar-w:280px;--topbar-h:60px;--props-w:320px;--ai-rail-w:320px;
  --transition:0.2s cubic-bezier(0.4,0,0.2,1);
  /* ── Unified motion language (2026-06-22, Luke) ──────────────────
     ONE curve for every overlay/drawer/panel in the builder so the
     whole UI reads as a single fluid surface — not a pile of bespoke
     animations. `ease-out` is the "winner" curve the right sidebar
     (My Library / Ask-bar-style) already used; everything else now
     references these tokens instead of hardcoding its own timing.
       --motion-slide : drawers & panels sliding in/out (props, sidebar)
       --motion-fade  : backdrop dimmer (kept in sync with the slide)
       --motion-enter : element entrance (a freshly-added tile)
     Keep these in lockstep; diverging them is how the "load-bearing
     wall collapsing" feeling crept back in. */
  --motion-slide:0.25s ease-out;
  --motion-fade:0.25s ease-out;
  --motion-enter:0.22s ease-out;
}
html{font-size:16px;-webkit-font-smoothing:antialiased}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--ink);overflow:hidden;height:100vh}
h1,h2,h3,h4{font-family:'Bricolage Grotesque',sans-serif;font-weight:700}
button{font-family:inherit;cursor:pointer;border:none;background:none;font-size:inherit}
input,select,textarea{font-family:inherit;font-size:inherit}