/*
  widget-host.css
  ----------------
  The visuals in this package were originally rendered inside the claude.ai
  chat "visualizer" host, which supplied a set of CSS variables and SVG helper
  classes. This file recreates that host environment so every original widget
  renders correctly as a standalone page or when inlined into the website.

  Provides:
    - Semantic tokens: --text-*, --bg-*, --border-*, --surface-*, --radius, fonts
    - Short aliases used by the SVGs: --t (tertiary stroke), --p, --s, --b
    - SVG text classes: .t .ts .th
    - SVG helper classes: .box .arr .leader .node
    - Colour ramps: .c-purple .c-teal .c-coral .c-pink .c-gray .c-blue
                    .c-green .c-amber .c-red
      (fill 50 / stroke 600 / title 800 / subtitle 600 in light mode,
       fill 800 / stroke 200 / title 100 / subtitle 200 in dark mode)
    - Pre-styled form controls (button, input[type=text], input[type=range])

  Dark mode: follows prefers-color-scheme unless <html data-theme="light|dark">
  is set explicitly.
*/

:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --radius: 8px;

  --text-primary: #1F1E1C;
  --text-secondary: #5F5E5A;
  --text-muted: #888780;
  --surface-0: #F7F6F2;
  --surface-1: #F1EFE8;
  --surface-2: #FFFFFF;
  --border: rgba(31, 30, 28, 0.15);
  --border-strong: rgba(31, 30, 28, 0.30);

  --text-accent: #185FA5;  --bg-accent: #E6F1FB;  --border-accent: #378ADD;
  --text-danger: #A32D2D;  --bg-danger: #FCEBEB;  --border-danger: #E24B4A;
  --text-success: #3B6D11; --bg-success: #EAF3DE; --border-success: #639922;
  --text-warning: #854F0B; --bg-warning: #FAEEDA; --border-warning: #BA7517;

  --t: #888780;
  --p: var(--text-primary);
  --s: var(--text-secondary);
  --b: var(--border);
  --bg2: var(--surface-2);

  /* ramp stops: 50 100 200 400 600 800 900 */
  --purple-50:#EEEDFE; --purple-100:#CECBF6; --purple-200:#AFA9EC; --purple-400:#7F77DD; --purple-600:#534AB7; --purple-800:#3C3489; --purple-900:#26215C;
  --teal-50:#E1F5EE;   --teal-100:#9FE1CB;   --teal-200:#5DCAA5;   --teal-400:#1D9E75;   --teal-600:#0F6E56;   --teal-800:#085041;   --teal-900:#04342C;
  --coral-50:#FAECE7;  --coral-100:#F5C4B3;  --coral-200:#F0997B;  --coral-400:#D85A30;  --coral-600:#993C1D;  --coral-800:#712B13;  --coral-900:#4A1B0C;
  --pink-50:#FBEAF0;   --pink-100:#F4C0D1;   --pink-200:#ED93B1;   --pink-400:#D4537E;   --pink-600:#993556;   --pink-800:#72243E;   --pink-900:#4B1528;
  --gray-50:#F1EFE8;   --gray-100:#D3D1C7;   --gray-200:#B4B2A9;   --gray-400:#888780;   --gray-600:#5F5E5A;   --gray-800:#444441;   --gray-900:#2C2C2A;
  --blue-50:#E6F1FB;   --blue-100:#B5D4F4;   --blue-200:#85B7EB;   --blue-400:#378ADD;   --blue-600:#185FA5;   --blue-800:#0C447C;   --blue-900:#042C53;
  --green-50:#EAF3DE;  --green-100:#C0DD97;  --green-200:#97C459;  --green-400:#639922;  --green-600:#3B6D11;  --green-800:#27500A;  --green-900:#173404;
  --amber-50:#FAEEDA;  --amber-100:#FAC775;  --amber-200:#EF9F27;  --amber-400:#BA7517;  --amber-600:#854F0B;  --amber-800:#633806;  --amber-900:#412402;
  --red-50:#FCEBEB;    --red-100:#F7C1C1;    --red-200:#F09595;    --red-400:#E24B4A;    --red-600:#A32D2D;    --red-800:#791F1F;    --red-900:#501313;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --text-primary: #ECEBE6; --text-secondary: #B4B2A9; --text-muted: #888780;
    --surface-0: #1A1A19; --surface-1: #232322; --surface-2: #2A2A28;
    --border: rgba(255,255,255,0.14); --border-strong: rgba(255,255,255,0.28);
    --text-accent: #85B7EB;  --bg-accent: #0C447C;  --border-accent: #378ADD;
    --text-danger: #F09595;  --bg-danger: #501313;  --border-danger: #E24B4A;
    --text-success: #97C459; --bg-success: #173404; --border-success: #639922;
    --text-warning: #EF9F27; --bg-warning: #412402; --border-warning: #BA7517;
    --t: #B4B2A9;
  }
}
:root[data-theme="dark"] {
  --text-primary: #ECEBE6; --text-secondary: #B4B2A9; --text-muted: #888780;
  --surface-0: #1A1A19; --surface-1: #232322; --surface-2: #2A2A28;
  --border: rgba(255,255,255,0.14); --border-strong: rgba(255,255,255,0.28);
  --text-accent: #85B7EB;  --bg-accent: #0C447C;  --border-accent: #378ADD;
  --text-danger: #F09595;  --bg-danger: #501313;  --border-danger: #E24B4A;
  --text-success: #97C459; --bg-success: #173404; --border-success: #639922;
  --text-warning: #EF9F27; --bg-warning: #412402; --border-warning: #BA7517;
  --t: #B4B2A9;
}

/* ---------- SVG text and helpers ---------- */
svg { font-family: var(--font-sans); }
svg .t  { font-size: 14px; font-weight: 400; fill: var(--text-primary); }
svg .ts { font-size: 12px; font-weight: 400; fill: var(--text-secondary); }
svg .th { font-size: 14px; font-weight: 500; fill: var(--text-primary); }
svg .box { fill: var(--surface-1); stroke: var(--border-strong); }
svg .arr { fill: none; stroke: var(--text-secondary); stroke-width: 1.5px; }
svg .leader { fill: none; stroke: var(--t); stroke-width: 0.5px; stroke-dasharray: 3 3; }
svg .node { cursor: pointer; }
svg .node:hover { opacity: 0.85; }

/* ---------- Colour ramps (light) ---------- */
/* shapes: the class on the shape itself, or on a <g> wrapping it */
.c-purple>rect,.c-purple>circle,.c-purple>ellipse,.c-purple>polygon,rect.c-purple,circle.c-purple,ellipse.c-purple,polygon.c-purple{fill:var(--purple-50);stroke:var(--purple-600)}
.c-teal>rect,.c-teal>circle,.c-teal>ellipse,.c-teal>polygon,rect.c-teal,circle.c-teal,ellipse.c-teal,polygon.c-teal{fill:var(--teal-50);stroke:var(--teal-600)}
.c-coral>rect,.c-coral>circle,.c-coral>ellipse,.c-coral>polygon,rect.c-coral,circle.c-coral,ellipse.c-coral,polygon.c-coral{fill:var(--coral-50);stroke:var(--coral-600)}
.c-pink>rect,.c-pink>circle,.c-pink>ellipse,.c-pink>polygon,rect.c-pink,circle.c-pink,ellipse.c-pink,polygon.c-pink{fill:var(--pink-50);stroke:var(--pink-600)}
.c-gray>rect,.c-gray>circle,.c-gray>ellipse,.c-gray>polygon,rect.c-gray,circle.c-gray,ellipse.c-gray,polygon.c-gray{fill:var(--gray-50);stroke:var(--gray-600)}
.c-blue>rect,.c-blue>circle,.c-blue>ellipse,.c-blue>polygon,rect.c-blue,circle.c-blue,ellipse.c-blue,polygon.c-blue{fill:var(--blue-50);stroke:var(--blue-600)}
.c-green>rect,.c-green>circle,.c-green>ellipse,.c-green>polygon,rect.c-green,circle.c-green,ellipse.c-green,polygon.c-green{fill:var(--green-50);stroke:var(--green-600)}
.c-amber>rect,.c-amber>circle,.c-amber>ellipse,.c-amber>polygon,rect.c-amber,circle.c-amber,ellipse.c-amber,polygon.c-amber{fill:var(--amber-50);stroke:var(--amber-600)}
.c-red>rect,.c-red>circle,.c-red>ellipse,.c-red>polygon,rect.c-red,circle.c-red,ellipse.c-red,polygon.c-red{fill:var(--red-50);stroke:var(--red-600)}
/* text inside a ramp group: title 800, subtitle 600 */
.c-purple>.th,.c-purple>.t{fill:var(--purple-800)} .c-purple>.ts{fill:var(--purple-600)}
.c-teal>.th,.c-teal>.t{fill:var(--teal-800)}       .c-teal>.ts{fill:var(--teal-600)}
.c-coral>.th,.c-coral>.t{fill:var(--coral-800)}    .c-coral>.ts{fill:var(--coral-600)}
.c-pink>.th,.c-pink>.t{fill:var(--pink-800)}       .c-pink>.ts{fill:var(--pink-600)}
.c-gray>.th,.c-gray>.t{fill:var(--gray-800)}       .c-gray>.ts{fill:var(--gray-600)}
.c-blue>.th,.c-blue>.t{fill:var(--blue-800)}       .c-blue>.ts{fill:var(--blue-600)}
.c-green>.th,.c-green>.t{fill:var(--green-800)}    .c-green>.ts{fill:var(--green-600)}
.c-amber>.th,.c-amber>.t{fill:var(--amber-800)}    .c-amber>.ts{fill:var(--amber-600)}
.c-red>.th,.c-red>.t{fill:var(--red-800)}          .c-red>.ts{fill:var(--red-600)}

/* ---------- Colour ramps (dark) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .c-purple>rect,:root:not([data-theme="light"]) .c-purple>circle,:root:not([data-theme="light"]) .c-purple>polygon,:root:not([data-theme="light"]) rect.c-purple,:root:not([data-theme="light"]) circle.c-purple{fill:var(--purple-800);stroke:var(--purple-200)}
  :root:not([data-theme="light"]) .c-teal>rect,:root:not([data-theme="light"]) .c-teal>circle,:root:not([data-theme="light"]) .c-teal>polygon,:root:not([data-theme="light"]) rect.c-teal,:root:not([data-theme="light"]) circle.c-teal{fill:var(--teal-800);stroke:var(--teal-200)}
  :root:not([data-theme="light"]) .c-coral>rect,:root:not([data-theme="light"]) .c-coral>circle,:root:not([data-theme="light"]) .c-coral>polygon,:root:not([data-theme="light"]) rect.c-coral,:root:not([data-theme="light"]) circle.c-coral{fill:var(--coral-800);stroke:var(--coral-200)}
  :root:not([data-theme="light"]) .c-pink>rect,:root:not([data-theme="light"]) .c-pink>circle,:root:not([data-theme="light"]) .c-pink>polygon,:root:not([data-theme="light"]) rect.c-pink,:root:not([data-theme="light"]) circle.c-pink{fill:var(--pink-800);stroke:var(--pink-200)}
  :root:not([data-theme="light"]) .c-gray>rect,:root:not([data-theme="light"]) .c-gray>circle,:root:not([data-theme="light"]) .c-gray>polygon,:root:not([data-theme="light"]) rect.c-gray,:root:not([data-theme="light"]) circle.c-gray{fill:var(--gray-800);stroke:var(--gray-200)}
  :root:not([data-theme="light"]) .c-amber>rect,:root:not([data-theme="light"]) .c-amber>circle,:root:not([data-theme="light"]) .c-amber>polygon,:root:not([data-theme="light"]) rect.c-amber,:root:not([data-theme="light"]) circle.c-amber{fill:var(--amber-800);stroke:var(--amber-200)}
  :root:not([data-theme="light"]) .c-purple>.th,:root:not([data-theme="light"]) .c-purple>.t{fill:var(--purple-50)} :root:not([data-theme="light"]) .c-purple>.ts{fill:var(--purple-100)}
  :root:not([data-theme="light"]) .c-teal>.th,:root:not([data-theme="light"]) .c-teal>.t{fill:var(--teal-50)}     :root:not([data-theme="light"]) .c-teal>.ts{fill:var(--teal-100)}
  :root:not([data-theme="light"]) .c-coral>.th,:root:not([data-theme="light"]) .c-coral>.t{fill:var(--coral-50)}  :root:not([data-theme="light"]) .c-coral>.ts{fill:var(--coral-100)}
  :root:not([data-theme="light"]) .c-pink>.th,:root:not([data-theme="light"]) .c-pink>.t{fill:var(--pink-50)}     :root:not([data-theme="light"]) .c-pink>.ts{fill:var(--pink-100)}
  :root:not([data-theme="light"]) .c-gray>.th,:root:not([data-theme="light"]) .c-gray>.t{fill:var(--gray-50)}     :root:not([data-theme="light"]) .c-gray>.ts{fill:var(--gray-100)}
  :root:not([data-theme="light"]) .c-amber>.th,:root:not([data-theme="light"]) .c-amber>.t{fill:var(--amber-50)}  :root:not([data-theme="light"]) .c-amber>.ts{fill:var(--amber-100)}
}
:root[data-theme="dark"] .c-purple>rect,:root[data-theme="dark"] .c-purple>circle,:root[data-theme="dark"] .c-purple>polygon,:root[data-theme="dark"] rect.c-purple,:root[data-theme="dark"] circle.c-purple{fill:var(--purple-800);stroke:var(--purple-200)}
:root[data-theme="dark"] .c-teal>rect,:root[data-theme="dark"] .c-teal>circle,:root[data-theme="dark"] .c-teal>polygon,:root[data-theme="dark"] rect.c-teal,:root[data-theme="dark"] circle.c-teal{fill:var(--teal-800);stroke:var(--teal-200)}
:root[data-theme="dark"] .c-coral>rect,:root[data-theme="dark"] .c-coral>circle,:root[data-theme="dark"] .c-coral>polygon,:root[data-theme="dark"] rect.c-coral,:root[data-theme="dark"] circle.c-coral{fill:var(--coral-800);stroke:var(--coral-200)}
:root[data-theme="dark"] .c-pink>rect,:root[data-theme="dark"] .c-pink>circle,:root[data-theme="dark"] .c-pink>polygon,:root[data-theme="dark"] rect.c-pink,:root[data-theme="dark"] circle.c-pink{fill:var(--pink-800);stroke:var(--pink-200)}
:root[data-theme="dark"] .c-gray>rect,:root[data-theme="dark"] .c-gray>circle,:root[data-theme="dark"] .c-gray>polygon,:root[data-theme="dark"] rect.c-gray,:root[data-theme="dark"] circle.c-gray{fill:var(--gray-800);stroke:var(--gray-200)}
:root[data-theme="dark"] .c-amber>rect,:root[data-theme="dark"] .c-amber>circle,:root[data-theme="dark"] .c-amber>polygon,:root[data-theme="dark"] rect.c-amber,:root[data-theme="dark"] circle.c-amber{fill:var(--amber-800);stroke:var(--amber-200)}
:root[data-theme="dark"] .c-purple>.th,:root[data-theme="dark"] .c-purple>.t{fill:var(--purple-50)} :root[data-theme="dark"] .c-purple>.ts{fill:var(--purple-100)}
:root[data-theme="dark"] .c-teal>.th,:root[data-theme="dark"] .c-teal>.t{fill:var(--teal-50)}       :root[data-theme="dark"] .c-teal>.ts{fill:var(--teal-100)}
:root[data-theme="dark"] .c-coral>.th,:root[data-theme="dark"] .c-coral>.t{fill:var(--coral-50)}    :root[data-theme="dark"] .c-coral>.ts{fill:var(--coral-100)}
:root[data-theme="dark"] .c-pink>.th,:root[data-theme="dark"] .c-pink>.t{fill:var(--pink-50)}       :root[data-theme="dark"] .c-pink>.ts{fill:var(--pink-100)}
:root[data-theme="dark"] .c-gray>.th,:root[data-theme="dark"] .c-gray>.t{fill:var(--gray-50)}       :root[data-theme="dark"] .c-gray>.ts{fill:var(--gray-100)}
:root[data-theme="dark"] .c-amber>.th,:root[data-theme="dark"] .c-amber>.t{fill:var(--amber-50)}    :root[data-theme="dark"] .c-amber>.ts{fill:var(--amber-100)}

/* ---------- Form controls the widgets expect to be pre-styled ---------- */
.widget-root { font-family: var(--font-sans); color: var(--text-primary); line-height: 1.6; }
.widget-root button {
  font: inherit; font-size: 14px; padding: 6px 14px; cursor: pointer;
  background: transparent; color: var(--text-primary);
  border: 0.5px solid var(--border-strong); border-radius: var(--radius);
  transition: background .15s, transform .05s;
}
.widget-root button:hover { background: var(--surface-1); }
.widget-root button:active { transform: scale(0.98); }
.widget-root button:focus-visible, .widget-root input:focus-visible { outline: 2px solid var(--border-accent); outline-offset: 2px; }
.widget-root input[type="text"] {
  height: 36px; padding: 0 10px; font: inherit; font-size: 14px;
  color: var(--text-primary); background: var(--surface-2);
  border: 0.5px solid var(--border-strong); border-radius: var(--radius); box-sizing: border-box;
}
.widget-root input[type="range"] { accent-color: var(--border-accent); height: 18px; }