/* ═══════════════════════════════════════════════════════════════════════════
   BuildOS UI — the design system as a plain stylesheet for the Workbench
   GENERATED by sync-ui-theme.py on 2026-10-22 18:08 — DO NOT EDIT BY HAND.
   Source: aec-craft/ui at tag v0.8.0 (@aec-craft/ui@0.8.0) —
           styles/globals.css · fonts.ts · components/branding/buildos-mark.tsx
   Read straight out of the clone at that tag; no node_modules copy involved.
   Re-run sync-ui-theme.py after bumping the package; every value below that is
   not marked DERIVED came out of the package verbatim.

   CONSUMERS: the Workbench pages (Flask app.py templates, architecture/*.html,
              decisions/*.html, message-structure/*.html, reports/*.html) and the
              same pages served from ~/tailserve/.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Typefaces the design system names in fonts.ts: Geist (sans), JetBrains Mono (mono).
      Self-hosted, no CDN. A change in fonts.ts arrives here on the next run. ── */
@font-face{font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/gate/fonts/geist-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/gate/fonts/geist-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist";font-style:italic;font-weight:100 900;font-display:swap;
  src:url("/gate/fonts/geist-latin-italic.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;
  src:url("/gate/fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;
  src:url("/gate/fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ── The light ramp (package :root), verbatim ── */
:root{
  --background: oklch(0.985 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.945 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.945 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.945 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --warning: oklch(0.6 0.18 48);
  --caution: oklch(0.62 0.15 78);
  --success: oklch(0.577 0.16 155);
  --info: oklch(0.577 0.19 255);
  --discovery: oklch(0.577 0.21 300);
  --border: oklch(0.91 0 0);
  --input: oklch(0.91 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.87 0 0);
  --chart-2: oklch(0.556 0 0);
  --chart-3: oklch(0.439 0 0);
  --chart-4: oklch(0.371 0 0);
  --chart-5: oklch(0.269 0 0);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.945 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.91 0 0);
  --sidebar-ring: oklch(0.708 0 0);

  /* radius scale (package @theme inline), verbatim */
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);
  --radius-2xl: calc(var(--radius) * 1.8);
  --radius-3xl: calc(var(--radius) * 2.2);
  --radius-4xl: calc(var(--radius) * 2.6);

  /* frost material (package :root), verbatim */
  --frost-blur: 24px;
  --frost-fill: color-mix( in oklab, color-mix(in oklab, var(--card), var(--foreground) 6%) 78%, transparent );

  --font-sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}

/* ── The dark ramp (package .dark), verbatim. The Workbench opens in it:
      <html class="dark">, flipped by the theme switch in the top bar. ── */
.dark{
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --warning: oklch(0.75 0.17 55);
  --caution: oklch(0.8 0.16 85);
  --success: oklch(0.72 0.17 155);
  --info: oklch(0.72 0.15 250);
  --discovery: oklch(0.72 0.17 300);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --chart-1: oklch(0.87 0 0);
  --chart-2: oklch(0.556 0 0);
  --chart-3: oklch(0.439 0 0);
  --chart-4: oklch(0.371 0 0);
  --chart-5: oklch(0.269 0 0);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);

  --frost-fill: color-mix( in oklab, color-mix(in oklab, var(--card), var(--foreground) 18%) 74%, transparent );
}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root,.dark{--frost-fill:var(--card)}
}

/* ═══ DERIVED — what the design system does not ship yet ═══════════════════
  The design system ships no accent colour: every token in its ramp is
  chroma 0, and the only non-neutral values are --destructive and a green
  Tailwind class inside ai-elements/tool.tsx. It also ships no elevation ramp
  for a hand-drawn diagram, no theme switch and no status LED. Until it does,
  the block below DERIVES what the Workbench needs from package tokens with
  color-mix(), so a designer's change still propagates, and takes the single
  brand colour from the one place the package hardcodes it (the ember dot in
  components/branding/buildos-mark.tsx). Requested as package additions —
  see the UI-package lane.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  /* Brand colour — source: the ember dot in the mark (no --brand token yet). */
  --brand-ember:#c47a3a;

  /* Diagram ramp. A hand-drawn SVG carries no utility classes, so every colour
     in a flowchart is one of these — that is what lets a diagram follow the
     theme switch instead of staying dark on a white page. Elevation is
     expressed as "further from the page, toward the ink", which lightens in
     dark mode and darkens in light mode without a second set of values. */
  --dg-canvas:var(--background);
  --dg-lane-stroke:var(--border);
  --dg-lane-hub-fill:color-mix(in oklab, var(--card) 55%, transparent);
  --dg-lane-hub-stroke:color-mix(in oklab, var(--border), var(--foreground) 8%);
  --dg-node-fill:color-mix(in oklab, var(--card), var(--foreground) 8%);
  --dg-node-stroke:var(--input);
  --dg-node-quiet-fill:var(--card);
  --dg-node-hub-fill:color-mix(in oklab, var(--card), var(--foreground) 16%);
  --dg-node-hub-stroke:color-mix(in oklab, var(--input), var(--foreground) 20%);
  --dg-badge:var(--primary);
  --dg-badge-fg:var(--primary-foreground);
  --dg-edge:var(--muted-foreground);
  --dg-edge-quiet:var(--ring);
  --dg-label:var(--card-foreground);
  --dg-label-muted:var(--muted-foreground);
  --dg-label-quiet:var(--muted-foreground); /* quiet LABEL text: muted, not the focus-ring grey (2.5:1 as text in light; contrast sweep 22.10.2026). --dg-edge-quiet stays --ring: it only strokes lines */
  --dg-accent:var(--brand-ember);
  --dg-accent-fill:color-mix(in oklab, var(--brand-ember) 12%, transparent);
  /* ink that reads on the brand fill; no --brand-foreground in the
     package yet, and a lone hex does not flip, so neither does this */
  --dg-accent-fg:color-mix(in oklab, var(--brand-ember) 22%, black);

  /* --success comes from the package now; the local stand-in is gone. */

  /* Ground texture. Derived from the ink so it inverts with the theme. */
  --grid-line:color-mix(in oklab, var(--foreground) 6%, transparent);
  --grid-line-x:color-mix(in oklab, var(--foreground) 11%, transparent);
  /* Secondary text on the frosted bar: the muted grey is 4.18:1 there in light (package gap), so it
     leans 30 % to the ink, as the --wb-*-text tokens do (chrome contrast fix 22.10.2026). */
  --chrome-muted:color-mix(in oklab, var(--muted-foreground) 70%, var(--foreground));

  /* ─── Aliases: the Dark-Glass vocabulary the older pages are written in, so a
         page migrates by swapping its <link>. Nothing here is a new value. ─── */
  --bg:var(--background); --fg:var(--foreground);
  --fg2:var(--muted-foreground); --fg3:var(--muted-foreground); /* --fg3 is the faint TEXT grey: muted, not --ring (a focus-ring token is 2.5:1 as text in light; Batch C1 review 22.10.2026) */
  --pri:var(--primary); --pri15:var(--accent); --pri30:var(--input);
  --brd:var(--border); --brd-t:var(--border); --brd-l:var(--border); --brd-h:var(--input);
  --sh1:0 1px 2px color-mix(in oklab, var(--foreground) 14%, transparent);
  --sh2:none; --shi:none;
  --ok:var(--success); --warnc:var(--warning); --danger:var(--destructive);
  --r:var(--radius-xl); --r-s:var(--radius-md);
  --f:var(--font-sans); --mono:var(--font-mono);
  --ease:cubic-bezier(.4,0,.2,1); --easeOut:cubic-bezier(.16,1,.3,1);
  --edge:var(--border);
}

/* ═══ Base layer — the package's @layer base, expressed without Tailwind ═══ */
*{box-sizing:border-box}
html{scroll-behavior:smooth;font-family:var(--font-sans)}
body{margin:0;background:var(--background);color:var(--foreground);
  font:15px/1.6 var(--font-sans);-webkit-font-smoothing:antialiased;
  min-width:360px}          /* the package's hard floor: scroll, never break */
a{color:var(--foreground);text-underline-offset:3px;text-decoration-color:var(--input)}
a:hover{text-decoration-color:var(--muted-foreground)}
button:not(:disabled),[role=button]:not(:disabled){cursor:pointer}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
*{scrollbar-color:color-mix(in oklab,var(--foreground) 20%,transparent) transparent;
  scrollbar-width:thin}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background-color:color-mix(in oklab,var(--foreground) 20%,transparent);
  background-clip:padding-box;border:2px solid transparent;border-radius:9999px}

/* Dark Glass drew an animated mesh here; the system has a flat surface, so the
   element older pages still carry renders as nothing. */
/* Dark Glass drew an animated mesh into this element. It is now inert — an
   opaque fill here would sit on top of the ground texture below. */
#mesh,#mesh-blobs,#mesh-noise{display:none}
/* A very quiet grid drawn from the ink colour, so it follows the theme and the
   frosted surfaces above it have something to let through. 2% of the foreground
   is below the threshold of "a pattern" and above the threshold of "flat". */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to right, var(--grid-line-x) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line-x) 1px, transparent 1px);
  background-size:32px 32px,32px 32px,160px 160px,160px 160px;
  -webkit-mask-image:radial-gradient(ellipse 130% 100% at 50% 0%,#000 20%,transparent 85%);
  mask-image:radial-gradient(ellipse 130% 100% at 50% 0%,#000 20%,transparent 85%)}
body>*{position:relative;z-index:1}

/* ═══ Surfaces ═══════════════════════════════════════════════════════════════
   `.gl` was the glass panel and is now the system's card. The frosted material
   is NOT the card in the design system — it is floating chrome — so it keeps
   its own class, the package's `frosted` utility written out. ═══ */
.gl,.frosted{background-color:var(--frost-fill);
  -webkit-backdrop-filter:blur(var(--frost-blur)) saturate(1.4);
  backdrop-filter:blur(var(--frost-blur)) saturate(1.4);
  border:1px solid var(--border)}
.gl{box-shadow:var(--sh1)}
.gl-e{position:relative}
.solid{background-color:var(--card)}   /* opt back out where blur costs more than it gives */
figure.dg{background-color:var(--dg-canvas)}   /* a diagram is a canvas, not a card */

/* ═══ Components ═══ */
.card{border-radius:var(--radius-xl);padding:20px 22px}
.chip{font-size:13px;border:1px solid var(--border);border-radius:var(--radius-md);
  padding:6px 11px;background:var(--secondary);color:var(--secondary-foreground)}
.chip small{display:block;font:11px var(--font-mono);color:var(--muted-foreground)}
code{font:0.86em var(--font-mono);background:var(--secondary);
  border-radius:var(--radius-sm);padding:2px 6px}
pre{font:13px/1.7 var(--font-mono);background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:18px 20px;overflow-x:auto;color:var(--foreground)}
pre code{background:none;padding:0;font-size:inherit}
pre .c{color:var(--muted-foreground)}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--border);vertical-align:top}
th{font:12px var(--font-mono);text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted-foreground);background:var(--secondary);font-weight:500}
tr:last-child td{border-bottom:0}
.tablewrap{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--border)}
.warn{border-left:2px solid var(--brand-ember);
  background:color-mix(in oklab,var(--brand-ember) 8%,transparent);
  border-radius:0 var(--radius-md) var(--radius-md) 0;padding:12px 16px;margin:10px 0;
  font-size:14px}

/* Top bar: brand left, language + theme switch right. Both are floating chrome,
   so both use the frosted material. */
.topbar{position:sticky;top:12px;z-index:5;display:flex;align-items:center;gap:12px;
  justify-content:space-between;margin:-8px 0 12px;flex-wrap:wrap}
.topbar .right{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  color:var(--foreground);border:1px solid var(--border);border-radius:999px;
  padding:5px 14px 5px 11px;background:var(--frost-fill);backdrop-filter:blur(12px)}
.brand:hover{background:var(--secondary)}
.brand svg{display:block;flex:none}
.brand .wm{font-weight:500;letter-spacing:-.04em;font-size:15.5px;line-height:1}
.brand .wb{font-size:12.5px;color:var(--chrome-muted);line-height:1;
  border-left:1px solid var(--border);padding-left:9px}
/* The pill holds two links since 22.10.2026 (Manu): Workbench home and the Team section. */
.brand>a{display:inline-flex;align-items:center;gap:9px;color:inherit;text-decoration:none}
.brand a:hover .wb,.brand a.wb:hover{color:var(--foreground)}
.pill{font:inherit;font-size:13px;line-height:1;padding:8px 13px;border-radius:999px;
  border:1px solid var(--border);background:var(--frost-fill);color:var(--foreground);
  cursor:pointer;backdrop-filter:blur(12px)}
.pill:hover{background:var(--secondary)}
.pill.on{background:var(--primary);color:var(--primary-foreground);
  border-color:var(--primary);font-weight:500}
/* Three chips in one pill — the shape @aec-craft/ui 0.7.0's theme-toggle uses.
   No hover fill: one chip is always filled, so a hover fill makes two look chosen. */
.themeswitch{display:inline-flex;border:1px solid var(--border);border-radius:999px;
  background:var(--frost-fill);backdrop-filter:blur(12px);padding:2px;gap:2px}
.themeswitch .pill{border:0;background:none;backdrop-filter:none;min-width:34px;
  text-align:center;padding:6px 9px;font-size:13.5px}
.themeswitch .pill:hover{background:none}
.themeswitch .pill.on{background:var(--primary);color:var(--primary-foreground)}
.themebtn{min-width:38px;text-align:center}

/* ═══ Phone. One breakpoint; never minmax(<N>px,1fr), always
      minmax(min(<N>px,100%),1fr) — a hard floor makes the browser zoom out. ═══ */
@media(max-width:700px){
  .card{padding:16px;border-radius:var(--radius-lg)}
  pre{font-size:12px;padding:14px}
  table{font-size:13px}
  th,td{padding:8px 10px}
  button{min-height:40px}
  code,pre,td,p,li{overflow-wrap:anywhere}
}

/* ═══ WORKBENCH PAGE TEMPLATE — <body class="wb-page">, reference: templates/page.html ═══
   Frame: body 24/16/64, main 1240 px centred (body.wide: full width), bare h1 first, then p.sub.
   Type scale, at most 6 sizes: h1 28 (24 below 700 px) · h2 20 · h3 16 · body 15 · small 13.
   Spacing: --wb-space-1/2/3/4/6/8/12/16 = 4/8/12/16/24/32/48/64 px, nothing in between. ═══ */
:root{
  /* semantic tokens: the template reads only these (token source today: the package ramp above) */
  --wb-bg:var(--background); --wb-fg:var(--foreground); --wb-muted:var(--muted-foreground);
  --wb-card:var(--card); --wb-line:var(--border); --wb-line-strong:var(--input);
  --wb-fill:var(--secondary); --wb-fill-fg:var(--secondary-foreground);
  --wb-primary:var(--primary); --wb-on-primary:var(--primary-foreground); --wb-ring:var(--ring);
  --wb-ok:var(--success); --wb-warn:var(--warning); --wb-bad:var(--destructive);
  /* status colour as TEXT (words, badges): package gap — the UI package has no text-safe status token; --success/--warning/--destructive
     reach only 3.4–4.2:1 as text in light. Derived: 70 % status hue toward the foreground, ≥ 6:1 light and ≥ 7:1 dark on card, page and tints (Batch C1 contrast fix 22.10.2026) */
  --wb-ok-text:color-mix(in oklab,var(--wb-ok) 70%,var(--wb-fg)); --wb-warn-text:color-mix(in oklab,var(--wb-warn) 70%,var(--wb-fg));
  --wb-bad-text:color-mix(in oklab,var(--wb-bad) 70%,var(--wb-fg));
  /* the same text-safe mix for the package's other hues that pages use as text: info blue (4.2:1 raw in light), caution amber (3.5:1), brand ember (3.3:1)
     (contrast sweep follow-up 22.10.2026). Words and labels use these; fills, borders and dots keep the raw token. */
  --wb-info-text:color-mix(in oklab,var(--info) 70%,var(--wb-fg)); --wb-caution-text:color-mix(in oklab,var(--caution) 70%,var(--wb-fg));
  --wb-ember-text:color-mix(in oklab,var(--brand-ember) 70%,var(--wb-fg));
  --wb-r-sm:var(--radius-sm); --wb-r-md:var(--radius-md); --wb-r-lg:var(--radius-lg); --wb-r-xl:var(--radius-xl);
  --wb-sans:var(--font-sans); --wb-mono:var(--font-mono); --wb-ease:cubic-bezier(.4,0,.2,1);
  --wb-hover:color-mix(in oklab,var(--wb-fill),var(--wb-fg) 8%); /* package gap: accent == secondary, no hover fill */
  --wb-hover-line:color-mix(in oklab,var(--wb-line-strong),var(--wb-fg) 30%);
  /* type scale */
  --wb-h1:28px; --wb-h2:20px; --wb-h3:16px; --wb-body:15px; --wb-small:13px; /* package gap: no type-size tokens */
  --wb-measure:72ch; /* package gap: no line-length token */
  --wb-max:1240px;
  /* spacing scale — package gap: no spacing token; 4 px = the components' Tailwind --spacing step */
  --wb-space-1:4px; --wb-space-2:8px; --wb-space-3:12px; --wb-space-4:16px;
  --wb-space-6:24px; --wb-space-8:32px; --wb-space-12:48px; --wb-space-16:64px;
}
@media(max-width:700px){:root{--wb-h1:24px}}
:root.dark:has(>body.wb-page){color-scheme:dark} /* package gap: .dark sets no color-scheme, so native controls draw light; template pages only */

:where(.wb-page){padding:var(--wb-space-6) var(--wb-space-4) var(--wb-space-16);}
:where(.wb-page) main{max-width:var(--wb-max);margin:0 auto}
:where(.wb-page).wide main{max-width:none}
/* full-width editor pages (/map): bar, brand and title stay where they are */
:where(.wb-page).wide main>:is(.topbar,header){max-width:var(--wb-max);margin-inline:auto}
/* type */
:where(.wb-page) h1{font-size:var(--wb-h1);line-height:1.2;font-weight:600;letter-spacing:-.02em;margin:var(--wb-space-4) 0 var(--wb-space-2)}
:where(.wb-page) h2{font-size:var(--wb-h2);line-height:1.3;font-weight:600;letter-spacing:-.01em;margin:0 0 var(--wb-space-3)}
:where(.wb-page) h3{font-size:var(--wb-h3);line-height:1.4;font-weight:600;margin:0}
:where(.wb-page) p{margin:0}
:where(.wb-page) p+p{margin-top:var(--wb-space-3)}
:where(.wb-page) main :is(p,blockquote,ul:not([class]),ol:not([class])){max-width:var(--wb-measure)}
/* prose stops at 72ch everywhere in main; grids, tables, cards and class-styled lists keep full width.
   The cap sits on the block (body font), not on each li, so a small-text list still fills its column */
:where(.wb-page) p.sub{max-width:var(--wb-measure);color:var(--wb-muted)}
:where(.wb-page) b,:where(.wb-page) strong{font-weight:600}
:where(.wb-page) code{font-size:var(--wb-small)}
:where(.wb-page) :is(h1,h2,h3) code{font-size:inherit}
:where(.wb-page) pre{font-size:var(--wb-small);border-radius:var(--wb-r-lg)}
:where(.wb-page) pre code{font-size:inherit}
:where(.wb-page) .eb{font:500 var(--wb-small)/1.4 var(--wb-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--wb-muted);margin:0 0 var(--wb-space-2)}
/* in-section label; never above the h1 */
/* rhythm: 64 px between sections and below the header */
:where(.wb-page) section{margin-top:var(--wb-space-16);scroll-margin-top:var(--wb-space-16)}
:where(.wb-page) header+h2{margin-top:var(--wb-space-16)}
:where(.wb-page) section h2+h3,:where(.wb-page) section p+h3{margin-top:var(--wb-space-12)}
/* header card: question + 2–3 answer bullets + folded reasoning left, key numbers right (skill rule 2) */
:where(.wb-page) .top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--wb-space-12);margin-top:var(--wb-space-6);
    padding:var(--wb-space-6) var(--wb-space-8);border:1px solid var(--wb-line);border-radius:var(--wb-r-xl);background:var(--wb-card)}
:where(.wb-page) p.ask{font-size:var(--wb-h2);line-height:1.4;font-weight:500;letter-spacing:-.01em;margin:0 0 var(--wb-space-4)}
:where(.wb-page) ul.ans{margin:0;padding-left:var(--wb-space-6);display:grid;gap:var(--wb-space-3);line-height:1.6}
:where(.wb-page) ul.ans li::marker,:where(.wb-page) .side li::marker{color:var(--wb-muted)}
:where(.wb-page) .qa>.folds{margin-top:var(--wb-space-4)}
:where(.wb-page) dl.glance{margin:0;display:grid}
:where(.wb-page) dl.glance div{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--wb-space-1) var(--wb-space-4);
    padding:var(--wb-space-3) 0;border-top:1px solid var(--wb-line)}
:where(.wb-page) dl.glance div:last-child{border-bottom:1px solid var(--wb-line)}
:where(.wb-page) dl.glance dt{color:var(--wb-muted)}
:where(.wb-page) dl.glance dd{margin:0 0 0 auto;font-family:var(--wb-mono);text-align:right}
:where(.wb-page) .side dl.glance+.note{margin-top:var(--wb-space-4)}
/* prose + side column (rule 4); .solo = no side facts, centred at the measure */
:where(.wb-page) .split{display:grid;grid-template-columns:minmax(0,var(--wb-measure)) minmax(0,1fr);gap:var(--wb-space-12);align-items:start}
:where(.wb-page) .side{border-left:1px solid var(--wb-line);padding-left:var(--wb-space-8)}
:where(.wb-page) .top .side{padding-left:var(--wb-space-12)}
:where(.wb-page) .side .note{margin-top:var(--wb-space-3);color:var(--wb-muted)}
:where(.wb-page) .side ol{margin:0;padding-left:var(--wb-space-6);display:grid;gap:var(--wb-space-2)}
:where(.wb-page) dl.facts{margin:0;display:grid;gap:var(--wb-space-3)}
:where(.wb-page) dl.facts div{display:grid;grid-template-columns:minmax(0,7rem) minmax(0,1fr);gap:var(--wb-space-3)}
:where(.wb-page) dl.facts dt{font-weight:500}
:where(.wb-page) dl.facts dd{margin:0;color:var(--wb-muted)}
:where(.wb-page) .solo{max-width:var(--wb-measure);margin-inline:auto}
/* tablet: a 72ch text column plus a side column needs ~1100 px; below that .split stacks (no sideways scroll at 760–1099 px) */
@media(max-width:1099px){
  :where(.wb-page) .split{grid-template-columns:minmax(0,1fr);gap:var(--wb-space-6)}
  :where(.wb-page) .split>.side{border-left:0;padding-left:0;border-top:1px solid var(--wb-line);padding-top:var(--wb-space-6)}
}
/* fold: chevron left, grey fill, stronger outline, 44 px row, visible hover (rule 5) */
:where(.wb-page) .folds{display:grid;gap:var(--wb-space-3)}
:where(.wb-page) details.fold{border:1px solid var(--wb-line-strong);background:var(--wb-fill);border-radius:var(--wb-r-lg);overflow:hidden}
:where(.wb-page) details.fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--wb-space-3);min-height:44px;
    padding:var(--wb-space-2) var(--wb-space-4);font-weight:500;color:var(--wb-fill-fg)}
:where(.wb-page) details.fold>summary::-webkit-details-marker{display:none}
:where(.wb-page) details.fold>summary::before{content:"";flex:none;width:7px;height:7px;margin-left:var(--wb-space-1);
    border-right:2px solid var(--wb-muted);border-bottom:2px solid var(--wb-muted);transform:rotate(-45deg);transition:transform .15s var(--wb-ease)}
:where(.wb-page) details.fold[open]>summary::before{transform:rotate(45deg)}
:where(.wb-page) details.fold>summary:hover{background:var(--wb-hover)}
:where(.wb-page) details.fold[open]>summary{border-bottom:1px solid var(--wb-line)}
:where(.wb-page) .fold-body{background:var(--wb-card);padding:var(--wb-space-4) var(--wb-space-6)}
:where(.wb-page) .fold-body>*{margin:0}
:where(.wb-page) .fold-body>*+*{margin-top:var(--wb-space-3)}
:where(.wb-page) .fold-body ul,:where(.wb-page) .fold-body ol{padding-left:var(--wb-space-6);display:grid;gap:var(--wb-space-2)}
:where(.wb-page) details.fold>summary:has(>.pill){display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--wb-space-1) var(--wb-space-3)}
:where(.wb-page) details.fold>summary>.pill{justify-self:end;font-weight:400;background:var(--wb-card)}
/* card grid: auto-fit, never a hard floor; a card may be a link (a.card). 260 px minimum as in the old pattern library
   (4 cards in the 1240 px column; Batch B review: 300 px reflowed 4-card grids to 3 + 1) */
:where(.wb-page) .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:var(--wb-space-4)}
:where(.wb-page) .card{display:block;border:1px solid var(--wb-line);border-radius:var(--wb-r-lg);background:var(--wb-card);padding:var(--wb-space-6);color:inherit}
:where(.wb-page) .card>*{margin:0}
:where(.wb-page) .card>*+*{margin-top:var(--wb-space-2)}
:where(.wb-page) a.card{text-decoration:none;transition:border-color .14s var(--wb-ease)}
:where(.wb-page) a.card:hover,:where(.wb-page) a.card:focus-visible{border-color:var(--wb-ring)}
/* index grid (home, /team/): cards keep their column width when a row is short, description at the small size */
:where(.wb-page) .cards.index{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
:where(.wb-page) .cards.index .card>p{font-size:var(--wb-small);color:var(--wb-muted)}
/* muted description only on index tiles (home, /team/, as before the template); every other card keeps body colour (Batch A review: nothing greyer than before) */
/* tables: headers never break mid-word, pills never wrap, wide tables stack below 700 px (rule 11) */
:where(.wb-page) table{font-size:var(--wb-body)}
:where(.wb-page) th{font-size:var(--wb-small);overflow-wrap:normal;word-break:normal}
:where(.wb-page) .pill{white-space:nowrap}
:where(.wb-page) .pill.status{display:inline-flex;align-items:center;gap:var(--wb-space-2);font-size:var(--wb-small);padding:var(--wb-space-1) var(--wb-space-3);
    background:var(--wb-fill);backdrop-filter:none;cursor:default}
:where(.wb-page) .pill.status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--wb-muted)}
:where(.wb-page) .pill.status.ok::before{background:var(--wb-ok)}
:where(.wb-page) .pill.status.wait::before{background:var(--wb-warn)}
:where(.wb-page) .pill.status.bad::before{background:var(--wb-bad)}
/* decision card (rule 13); behaviour: /static/decision-cards.js with data-page="<slug>" */
:where(.wb-page) .dc-count{font-size:var(--wb-h2);font-weight:600;margin:0 0 var(--wb-space-2)}
:where(.wb-page) .dc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(440px,100%),1fr));gap:var(--wb-space-4);margin:var(--wb-space-6) 0 var(--wb-space-12)}
:where(.wb-page) .dc-card{display:flex;flex-direction:column;gap:var(--wb-space-3);border:1px solid var(--wb-line);border-radius:var(--wb-r-xl);background:var(--wb-card);padding:var(--wb-space-6);min-width:0;
    scroll-margin-top:calc(var(--wb-bar, 64px) + var(--wb-space-4))}
:where(.wb-page) .dc-title{font-size:var(--wb-h3);line-height:1.4;font-weight:600;margin:0}
:where(.wb-page) .dc-ctx{line-height:1.6;color:var(--wb-muted);margin:0}
:where(.wb-page) .dc-opts{display:grid;gap:var(--wb-space-2)}
:where(.wb-page) .dc-opt{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--wb-space-1) var(--wb-space-3);align-items:start;padding:var(--wb-space-3) var(--wb-space-4);
    background:var(--wb-fill);border:1px solid var(--wb-line);border-radius:var(--wb-r-lg);cursor:pointer;min-height:44px}
:where(.wb-page) .dc-opt:hover{background:var(--wb-hover);border-color:var(--wb-hover-line)}
:where(.wb-page) .dc-opt:focus-within,:where(.wb-page) .dc-send:focus-visible,:where(.wb-page) .dc-note:focus-visible{outline:2px solid var(--wb-ring);outline-offset:2px}
:where(.wb-page) .dc-opt:has(input:checked){border-color:var(--wb-primary);box-shadow:0 0 0 1px var(--wb-primary)}
:where(.wb-page) .dc-opt input{margin:var(--wb-space-1) 0 0;accent-color:var(--wb-primary)}
:where(.wb-page) .dc-ot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--wb-space-2)}
:where(.wb-page) .dc-ol{line-height:1.4}
:where(.wb-page) .dc-tag{font:500 var(--wb-small)/1.4 var(--wb-mono);text-transform:uppercase;letter-spacing:.08em;padding:var(--wb-space-1) var(--wb-space-2);border-radius:var(--wb-r-sm);background:var(--wb-primary);color:var(--wb-on-primary)}
:where(.wb-page) .dc-oc{grid-column:2;font-size:var(--wb-small);line-height:1.55;color:var(--wb-muted)}
:where(.wb-page) .dc-why{font-size:var(--wb-small);line-height:1.6;margin:0}
:where(.wb-page) .dc-note{width:100%;font:inherit;padding:var(--wb-space-2) var(--wb-space-3);background:var(--wb-bg);color:var(--wb-fg);border:1px solid var(--wb-line-strong);border-radius:var(--wb-r-md);resize:vertical}
:where(.wb-page) .dc-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--wb-space-3)}
:where(.wb-page) .dc-send{font:inherit;padding:var(--wb-space-2) var(--wb-space-6);min-height:44px;background:var(--wb-primary);color:var(--wb-on-primary);border:0;border-radius:var(--wb-r-lg);cursor:pointer}
:where(.wb-page) .dc-send:disabled{opacity:.6;cursor:wait}
:where(.wb-page) .dc-state{font-size:var(--wb-small);color:var(--wb-muted)}
:where(.wb-page) .dc-state.err{color:var(--wb-bad-text)}
:where(.wb-page) .dc-below{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr));gap:var(--wb-space-8);margin:0 0 var(--wb-space-8)}
:where(.wb-page) .dc-below>:only-child{max-width:var(--wb-measure);margin-inline:auto;width:100%}
:where(.wb-page) .dc-quiet{min-width:0}
:where(.wb-page) .dc-quiet h3{font-size:var(--wb-body);color:var(--wb-muted);margin:0 0 var(--wb-space-2)}
:where(.wb-page) .dc-quiet ul{list-style:none;margin:0;padding:0}
:where(.wb-page) .dc-quiet li{border-top:1px solid var(--wb-line);padding:var(--wb-space-3) 0;font-size:var(--wb-small);line-height:1.6;color:var(--wb-muted)}
:where(.wb-page) .dc-qt{color:var(--wb-fg)}
/* decided card = one folded row; the full card stays inside (votes, thread, #dc-<qid> keep working) */
:where(.wb-page) .dc-rows{display:grid;gap:var(--wb-space-2);margin:0 0 var(--wb-space-12)}
:where(.wb-page) details.dc-done{border:1px solid var(--wb-line-strong);background:var(--wb-fill);border-radius:var(--wb-r-lg);overflow:hidden;min-width:0}
:where(.wb-page) details.dc-done>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;gap:var(--wb-space-1) var(--wb-space-3);min-height:44px;padding:var(--wb-space-3) var(--wb-space-4)}
:where(.wb-page) details.dc-done>summary::-webkit-details-marker{display:none}
:where(.wb-page) details.dc-done>summary::before{content:"";grid-row:1 / span 2;align-self:center;width:7px;height:7px;margin-left:var(--wb-space-1);border-right:2px solid var(--wb-muted);border-bottom:2px solid var(--wb-muted);transform:rotate(-45deg);transition:transform .15s var(--wb-ease)}
:where(.wb-page) details.dc-done[open]>summary::before{transform:rotate(45deg)}
:where(.wb-page) details.dc-done>summary:hover{background:var(--wb-hover)}
:where(.wb-page) details.dc-done[open]>summary{border-bottom:1px solid var(--wb-line)}
:where(.wb-page) .dc-dq{line-height:1.4;font-weight:500}
:where(.wb-page) .dc-ddt{font:var(--wb-small)/1.4 var(--wb-mono);color:var(--wb-muted);white-space:nowrap}
:where(.wb-page) .dc-dd{grid-column:2 / span 2;font-size:var(--wb-small);line-height:1.55;color:var(--wb-muted)}
:where(.wb-page) .dc-dk{font:500 var(--wb-small)/1.4 var(--wb-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--wb-fg);margin-right:var(--wb-space-2)}
:where(.wb-page) .dc-dn{display:block;color:var(--wb-fg)}
:where(.wb-page) .dc-donebody{padding:var(--wb-space-2);background:var(--wb-bg)}
:where(.wb-page) .dc-donebody>.dc-card{border:0}
/* card thread, inserted by decision-cards.js */
:where(.wb-page) .dc-thread{display:grid;gap:var(--wb-space-2)}
:where(.wb-page) .dc-thread:empty{display:none}
:where(.wb-page) .dc-entry{display:grid;gap:var(--wb-space-1);border-top:1px solid var(--wb-line);padding-top:var(--wb-space-3);min-width:0}
:where(.wb-page) .dc-claude{margin-left:var(--wb-space-4);padding-left:var(--wb-space-3);border-left:2px solid var(--wb-ring)}
:where(.wb-page) .dc-meta{font:var(--wb-small)/1.4 var(--wb-mono);color:var(--wb-muted);margin:0}
:where(.wb-page) .dc-chip{justify-self:start;font-size:var(--wb-small);line-height:1.5;padding:var(--wb-space-1) var(--wb-space-2);background:var(--wb-fill);border-radius:var(--wb-r-sm)}
:where(.wb-page) .dc-text{line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;margin:0}
:where(.wb-page) .dc-text a{color:var(--wb-fg);text-decoration:underline;text-underline-offset:3px}
:where(.wb-page) .dc-ack,:where(.wb-page) .dc-dl{font-size:var(--wb-small);line-height:1.4;color:var(--wb-muted);margin:0}
:where(.wb-page) .dc-dl.err,:where(.wb-page) .dc-terr{color:var(--wb-bad-text)}
:where(.wb-page) .dc-terr{font-size:var(--wb-small);margin:0}
:where(.wb-page) .dc-link{font:inherit;font-size:var(--wb-small);color:var(--wb-fg);background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
:where(.wb-page) .dc-link.dc-more{justify-self:start;min-height:44px;padding:0 var(--wb-space-3);background:var(--wb-fill);border:1px solid var(--wb-line-strong);border-radius:var(--wb-r-lg);text-decoration:none}
:where(.wb-page) .dc-link.dc-more:hover{background:var(--wb-hover)}
:where(.wb-page) .dc-link:focus-visible{outline:2px solid var(--wb-ring);outline-offset:2px}
:where(.wb-page) .dc-test{margin-left:var(--wb-space-2);padding:0 var(--wb-space-1);font-weight:500;letter-spacing:.08em;border:1px solid var(--wb-line-strong);border-radius:var(--wb-r-sm);color:var(--wb-fg)}
/* phone — the page's one breakpoint */
@media(max-width:700px){
  :where(.wb-page) .top{grid-template-columns:minmax(0,1fr);gap:var(--wb-space-4);padding:var(--wb-space-6) var(--wb-space-4)}
  :where(.wb-page) .split{grid-template-columns:minmax(0,1fr);gap:var(--wb-space-6)}
  :where(.wb-page) .side,:where(.wb-page) .top .side{border-left:0;padding-left:0;border-top:1px solid var(--wb-line);padding-top:var(--wb-space-6)}
  :where(.wb-page) .card{padding:var(--wb-space-4)}
  :where(.wb-page) .fold-body{padding:var(--wb-space-4)}
  :where(.wb-page) pre{font-size:var(--wb-small)}
  :where(.wb-page) table{font-size:var(--wb-small)}
  :where(.wb-page) details.fold>summary:has(>.pill){grid-template-columns:auto minmax(0,1fr)}
  :where(.wb-page) details.fold>summary>.pill{grid-column:2}
  :where(.wb-page) .dc-claude{margin-left:var(--wb-space-3)}
  :where(.wb-page) table.stack thead{display:none}
  :where(.wb-page) table.stack,:where(.wb-page) table.stack tbody,:where(.wb-page) table.stack tr{display:block}
  :where(.wb-page) table.stack tr{padding:var(--wb-space-3) 0;border-bottom:1px solid var(--wb-line)}
  :where(.wb-page) table.stack tr:last-child{border-bottom:0}
  :where(.wb-page) table.stack td{display:grid;grid-template-columns:minmax(0,7rem) minmax(0,1fr);gap:var(--wb-space-3);border:0;padding:var(--wb-space-1) var(--wb-space-4)}
  :where(.wb-page) table.stack td>*{justify-self:start}
  :where(.wb-page) table.stack td::before{content:attr(data-label);font:500 var(--wb-small)/1.6 var(--wb-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--wb-muted)}
}