/* ═══════════════════════════════════════════════════════════
       CHASSIS 2.0 — Swiss rigor with a pulse
       Standalone documentation. Mirrors apps/frontend tokens.
       ═══════════════════════════════════════════════════════════ */

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; scroll-padding-top: 72px; }

    /* ─── Figments (light, warm beige chassis) — DEFAULT ─── */
    :root, [data-theme="figments"] {
      --bg:        oklch(0.965 0.005 85);
      --bg-alt:    oklch(0.955 0.006 90);
      --surface:   oklch(1 0 0);
      --surface-2: oklch(0.98 0.005 85);
      --ink:       oklch(0.145 0 0);
      --ink-2:     oklch(0.32 0 0);
      --ink-3:     oklch(0.48 0.01 260);
      --ink-4:     oklch(0.42 0.008 90);
      --border:    oklch(0.85 0.005 85);
      --border-2:  oklch(0.92 0.006 90);
      --node:      oklch(0.78 0.008 95);

      --red:   oklch(0.58 0.22 27);
      --blue:  oklch(0.55 0.20 260);
      --amber: oklch(0.72 0.16 75);
      --green: oklch(0.58 0.17 152);

      --red-tint:   color-mix(in oklch, var(--red) 7%, var(--bg));
      --blue-tint:  color-mix(in oklch, var(--blue) 7%, var(--bg));
      --amber-tint: color-mix(in oklch, var(--amber) 9%, var(--bg));
      --green-tint: color-mix(in oklch, var(--green) 9%, var(--bg));

      --shadow-sm:   0 1px 2px rgba(0,0,0,0.04);
      --shadow-md:   0 2px 8px rgba(0,0,0,0.06);
      --shadow-lift: 0 4px 20px rgba(0,0,0,0.08);
      --scan-opacity: 0.18;
    }

    /* ─── Motion tokens (global, theme-independent) ─── */
    :root {
      --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
      --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
      --dur-instant: 90ms;
      --dur-quick:   160ms;
      --dur-base:    220ms;
      --dur-stage:   320ms;
    }

    /* ─── Figments Dark — charcoal darkroom ─── */
    [data-theme="figments-dark"] {
      --bg:        oklch(0.145 0 0);
      --bg-alt:    oklch(0.22 0 0);
      --surface:   oklch(0.18 0 0);
      --surface-2: oklch(0.20 0 0);
      --ink:       oklch(0.92 0.008 90);
      --ink-2:     oklch(0.80 0 0);
      --ink-3:     oklch(0.68 0 0);
      --ink-4:     oklch(0.62 0 0);
      --border:    oklch(0.28 0 0);
      --border-2:  oklch(0.24 0 0);
      --node:      oklch(0.32 0 0);

      --red:   oklch(0.62 0.20 25);
      --blue:  oklch(0.62 0.18 260);
      --amber: oklch(0.75 0.15 75);
      --green: oklch(0.65 0.16 152);

      --red-tint:   color-mix(in oklch, var(--red) 14%, var(--bg));
      --blue-tint:  color-mix(in oklch, var(--blue) 12%, var(--bg));
      --amber-tint: color-mix(in oklch, var(--amber) 12%, var(--bg));
      --green-tint: color-mix(in oklch, var(--green) 14%, var(--bg));

      --shadow-sm:   0 1px 2px rgba(0,0,0,0.35);
      --shadow-md:   0 2px 8px rgba(0,0,0,0.45);
      --shadow-lift: 0 4px 20px rgba(0,0,0,0.60);
      --scan-opacity: 0.25;
    }

    /* ─── Midnight — indigo + cyan terminal ─── */
    [data-theme="midnight"] {
      --bg:        oklch(0.16 0.03 260);
      --bg-alt:    oklch(0.24 0.02 260);
      --surface:   oklch(0.19 0.025 260);
      --surface-2: oklch(0.215 0.025 260);
      --ink:       oklch(0.90 0.02 220);
      --ink-2:     oklch(0.82 0.015 220);
      --ink-3:     oklch(0.74 0.01 230);
      --ink-4:     oklch(0.64 0.015 240);
      --border:    oklch(0.28 0.02 260);
      --border-2:  oklch(0.25 0.015 260);
      --node:      oklch(0.35 0.015 260);

      --red:   oklch(0.65 0.20 15);
      --blue:  oklch(0.75 0.15 195);
      --amber: oklch(0.78 0.14 80);
      --green: oklch(0.68 0.15 155);

      --red-tint:   color-mix(in oklch, var(--red) 12%, var(--bg));
      --blue-tint:  color-mix(in oklch, var(--blue) 10%, var(--bg));
      --amber-tint: color-mix(in oklch, var(--amber) 10%, var(--bg));
      --green-tint: color-mix(in oklch, var(--green) 10%, var(--bg));

      --shadow-sm:   0 1px 3px rgba(0,0,0,0.35);
      --shadow-md:   0 2px 10px rgba(0,0,0,0.45);
      --shadow-lift: 0 4px 20px rgba(0,0,0,0.60);
      --scan-opacity: 0.32;
    }

    /* ─── Bone — cream + burnt sienna, letterpress ─── */
    [data-theme="bone"] {
      --bg:        oklch(0.96 0.02 80);
      --bg-alt:    oklch(0.92 0.025 75);
      --surface:   oklch(0.97 0.025 80);
      --surface-2: oklch(0.94 0.022 78);
      --ink:       oklch(0.20 0.02 50);
      --ink-2:     oklch(0.38 0.02 50);
      --ink-3:     oklch(0.46 0.02 50);
      --ink-4:     oklch(0.42 0.015 60);
      --border:    oklch(0.82 0.02 70);
      --border-2:  oklch(0.88 0.02 75);
      --node:      oklch(0.76 0.02 65);

      --red:   oklch(0.55 0.20 35);
      --blue:  oklch(0.55 0.15 250);
      --amber: oklch(0.68 0.16 65);
      --green: oklch(0.55 0.12 155);

      --red-tint:   color-mix(in oklch, var(--red) 7%, var(--bg));
      --blue-tint:  color-mix(in oklch, var(--blue) 7%, var(--bg));
      --amber-tint: color-mix(in oklch, var(--amber) 8%, var(--bg));
      --green-tint: color-mix(in oklch, var(--green) 8%, var(--bg));

      --shadow-sm:   0 1px 2px rgba(60,40,20,0.08);
      --shadow-md:   0 2px 8px rgba(60,40,20,0.10);
      --shadow-lift: 0 4px 20px rgba(60,40,20,0.14);
      --scan-opacity: 0.18;
    }

    /* ─── Slate — cool blue-gray professional ─── */
    [data-theme="slate"] {
      --bg:        oklch(0.13 0.03 255);
      --bg-alt:    oklch(0.25 0.025 250);
      --surface:   oklch(0.16 0.025 255);
      --surface-2: oklch(0.185 0.025 253);
      --ink:       oklch(0.97 0.01 220);
      --ink-2:     oklch(0.84 0.02 230);
      --ink-3:     oklch(0.74 0.02 230);
      --ink-4:     oklch(0.64 0.02 240);
      --border:    oklch(0.25 0.025 250);
      --border-2:  oklch(0.22 0.02 250);
      --node:      oklch(0.35 0.02 245);

      --red:   oklch(0.62 0.20 25);
      --blue:  oklch(0.58 0.18 260);
      --amber: oklch(0.75 0.15 75);
      --green: oklch(0.65 0.16 152);

      --red-tint:   color-mix(in oklch, var(--red) 14%, var(--bg));
      --blue-tint:  color-mix(in oklch, var(--blue) 12%, var(--bg));
      --amber-tint: color-mix(in oklch, var(--amber) 12%, var(--bg));
      --green-tint: color-mix(in oklch, var(--green) 14%, var(--bg));

      --shadow-sm:   0 1px 2px rgba(0,0,0,0.35);
      --shadow-md:   0 2px 8px rgba(0,0,0,0.45);
      --shadow-lift: 0 4px 20px rgba(0,0,0,0.60);
      --scan-opacity: 0.28;
    }

    /* ═══════════ BASE ═══════════ */
    body {
      font-family: 'Onest', system-ui, sans-serif;
      font-weight: 400;
      background: var(--bg);
      color: var(--ink);
      line-height: 1.6;
      transition: background-color 0.3s ease, color 0.3s ease;
    }

    /* Subtle dot grid environment (mirrors the board canvas) */
    body::before {
      content: '';
      position: fixed; inset: 0; z-index: 0; pointer-events: none;
      background-image: radial-gradient(circle, color-mix(in oklch, var(--ink) 7%, transparent) 1px, transparent 1px);
      background-size: 28px 28px;
      opacity: 0.5;
    }

    ::selection { background: var(--red); color: #fff; }

    a { color: inherit; }
    button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }

    /* ═══════════ NAV ═══════════ */
    .nav {
      position: sticky; top: 0; z-index: 100;
      background: color-mix(in oklch, var(--bg) 85%, transparent);
      backdrop-filter: blur(16px) saturate(1.2);
      -webkit-backdrop-filter: blur(16px) saturate(1.2);
      border-bottom: 1px solid var(--border-2);
      padding: 12px 28px;
      display: flex; align-items: center; gap: 14px;
      flex-wrap: wrap;
    }
    .nav-home {
      font-family: 'Martian Mono', monospace;
      font-size: 11px; font-weight: 500;
      letter-spacing: 0.02em;
      color: var(--ink-3);
      padding-right: 16px; margin-right: 4px;
      border-right: 1px solid var(--border-2);
      text-decoration: none;
      transition: color 0.15s;
    }
    .nav-home:hover { color: var(--ink); }
    .nav-title {
      font-family: 'Martian Mono', monospace;
      font-size: 11px; font-weight: 600;
      letter-spacing: 0.02em;
      color: var(--ink-2);
      display: flex; align-items: center; gap: 10px;
    }
    .nav-title::before {
      content: ''; width: 14px; height: 1.5px;
      background: var(--red);
    }
    .nav-version {
      font-family: 'Martian Mono', monospace;
      font-size: 10px; font-weight: 500;
      letter-spacing: 0.06em;
      color: var(--ink-3);
    }
    .nav-spacer { flex: 1; }

    /* Compact theme swatches in the nav */
    .nav-themes {
      display: inline-flex;
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
    }
    .nav-theme-btn {
      width: 20px; height: 20px;
      display: block;
      padding: 0;
      border: none;
      cursor: pointer;
      background: currentColor;
      position: relative;
    }
    .nav-theme-btn[aria-pressed="true"]::after {
      content: '';
      position: absolute;
      inset: -3px;
      border: 1.5px solid var(--ink);
      pointer-events: none;
    }

    /* Jump menu (section quick-nav) */
    .nav-jump {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .nav-jump-btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 4px 10px;
      font-family: 'Martian Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.02em;
      background: var(--surface);
      color: var(--ink-2);
      border: 1px solid var(--border);
      cursor: pointer;
    }
    .nav-jump-btn::after {
      content: '';
      width: 0; height: 0;
      border-left: 3.5px solid transparent;
      border-right: 3.5px solid transparent;
      border-top: 4px solid var(--ink-3);
    }
    .nav-jump-btn:hover { color: var(--ink); border-color: var(--ink); }
    .nav-jump-panel {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      width: 280px;
      max-height: 420px;
      overflow-y: auto;
      background: var(--surface);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-lift);
      display: none;
      z-index: 90;
      padding: 8px 0;
    }
    .nav-jump[data-open="true"] .nav-jump-panel { display: block; }
    .nav-jump-item {
      display: grid;
      grid-template-columns: 28px 1fr;
      gap: 10px;
      padding: 7px 14px;
      color: var(--ink-2);
      text-decoration: none;
      font-size: 13px;
      align-items: baseline;
      line-height: 1.2;
    }
    .nav-jump-item:hover { background: var(--bg-alt); color: var(--ink); }
    .nav-jump-item-num {
      font-family: 'Martian Mono', monospace;
      font-size: 10px;
      color: var(--ink-4);
      letter-spacing: 0.02em;
    }
    .nav-jump-item.is-active { color: var(--ink); font-weight: 600; }
    .nav-jump-item.is-active .nav-jump-item-num { color: var(--red); }

    /* ═══════════ STICKY SECTION RAIL ═══════════ */
    .rail {
      display: none;
      position: fixed;
      top: 88px;
      left: 16px;
      width: 196px;
      max-height: calc(100vh - 110px);
      overflow-y: auto;
      z-index: 40;
    }
    .rail-inner {
      padding: 14px 10px 14px 12px;
      background: color-mix(in oklch, var(--surface) 94%, transparent);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid var(--border-2);
    }
    .rail-head {
      font-family: 'Martian Mono', monospace;
      font-size: 10px; font-weight: 600;
      letter-spacing: 0.02em;
      color: var(--ink-3);
      padding: 0 8px 10px;
      margin-bottom: 4px;
      border-bottom: 1px solid var(--border-2);
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }
    .rail-head::before {
      content: ''; width: 12px; height: 1.5px; background: var(--red);
    }
    .rail-list { display: grid; gap: 1px; }
    .rail-item {
      display: grid;
      grid-template-columns: 22px 1fr;
      gap: 8px;
      padding: 5px 8px;
      color: var(--ink-3);
      text-decoration: none;
      font-size: 12px;
      font-family: 'Onest', sans-serif;
      line-height: 1.2;
      align-items: baseline;
      transition: color 0.12s, background 0.12s;
    }
    .rail-item:hover { color: var(--ink); background: var(--bg-alt); }
    .rail-item-num {
      font-family: 'Martian Mono', monospace;
      font-size: 10px;
      color: var(--ink-4);
      letter-spacing: 0.02em;
    }
    .rail-item.is-active { color: var(--ink); font-weight: 600; }
    .rail-item.is-active .rail-item-num { color: var(--red); }

    @media (min-width: 1320px) {
      .rail { display: block; }
    }

    /* ═══════════ PAGE ═══════════ */
    .page { position: relative; z-index: 1; }
    .wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

    /* ═══════════ HERO ═══════════ */
    .hero {
      padding: clamp(64px, 10vw, 120px) 0 56px;
      position: relative;
      overflow-x: clip;
    }
    .hero-tag {
      display: inline-flex; align-items: center; gap: 10px;
      font-family: 'Martian Mono', monospace;
      font-size: 11px; font-weight: 600;
      letter-spacing: 0.02em;
      color: var(--ink-3);
      margin-bottom: 28px;
    }
    .hero-tag::before {
      content: ''; width: 14px; height: 1.5px;
      background: var(--red);
    }
    .hero-title {
      font-family: 'Bricolage Grotesque', serif;
      font-weight: 800;
      font-size: clamp(56px, 11vw, 144px);
      letter-spacing: -0.045em;
      line-height: 0.88;
      color: var(--ink);
      margin-bottom: 0;
    }
    .hero-title .amp {
      color: var(--red);
      font-weight: 400;
      font-style: italic;
      letter-spacing: -0.02em;
    }
    .hero-sub {
      margin-top: 28px;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 48px;
      align-items: end;
      border-top: 1px solid var(--border);
      padding-top: 20px;
    }
    .hero-lede {
      font-family: 'Bricolage Grotesque', serif;
      font-weight: 600;
      font-size: clamp(18px, 1.8vw, 22px);
      line-height: 1.35;
      letter-spacing: -0.015em;
      color: var(--ink-2);
      max-width: 52ch;
    }
    .hero-meta {
      font-family: 'Martian Mono', monospace;
      font-size: 11px; font-weight: 500;
      letter-spacing: 0.02em;
      color: var(--ink-3);
      text-align: right;
      line-height: 1.8;
      white-space: nowrap;
    }
    .hero-meta b { color: var(--ink); font-weight: 600; }

    /* Scan line — slowed and subtler than 1.0 */
    .scan-line {
      position: absolute; top: 0; left: 0;
      width: 60px; height: 1.5px;
      background: linear-gradient(90deg, transparent, var(--red), transparent);
      opacity: var(--scan-opacity);
      animation: scan 14s linear infinite;
      pointer-events: none;
    }
    @keyframes scan {
      0%   { transform: translateX(-100px); }
      100% { transform: translateX(calc(100vw + 100px)); }
    }

    /* ═══════════ SECTIONS ═══════════ */
    .section { padding: 72px 0 0; position: relative; }
    .section:last-of-type { padding-bottom: 96px; }

    .section-head {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 32px;
      align-items: end;
      margin-bottom: 28px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--border);
    }
    .section-eyebrow {
      font-family: 'Martian Mono', monospace;
      font-size: 11px; font-weight: 600;
      letter-spacing: 0.02em;
      color: var(--ink-3);
      display: inline-flex; align-items: center; gap: 10px;
      margin-bottom: 10px;
    }
    .section-eyebrow::before {
      content: ''; width: 14px; height: 1.5px;
      background: var(--red);
    }
    .section-title {
      font-family: 'Bricolage Grotesque', serif;
      font-weight: 800;
      font-size: clamp(32px, 4vw, 56px);
      letter-spacing: -0.035em;
      line-height: 1.0;
      color: var(--ink);
    }
    .section-num {
      font-family: 'Martian Mono', monospace;
      font-size: 11px; font-weight: 600;
      letter-spacing: 0.08em;
      color: var(--ink-4);
      padding-bottom: 4px;
    }
    .section-intro {
      font-size: 15px;
      line-height: 1.65;
      color: var(--ink-2);
      max-width: 65ch;
      margin-bottom: 32px;
    }

    /* ═══════════ CHASSIS FRAME (grid of panels with 1px seam) ═══════════ */
    .chassis {
      display: grid;
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
      position: relative;
    }
    .chassis--3 { grid-template-columns: repeat(3, 1fr); }
    .chassis--2 { grid-template-columns: repeat(2, 1fr); }
    .chassis--4 { grid-template-columns: repeat(4, 1fr); }

    /* Node corners on top-level chassis (selective — only container corners) */
    .chassis::before,
    .chassis::after,
    .chassis > .node-tl,
    .chassis > .node-tr {
      content: '';
      position: absolute;
      width: 7px; height: 7px;
      background: var(--surface-2);
      border: 1.5px solid var(--node);
      border-radius: 50%;
      z-index: 2;
    }
    .chassis::before { top: -4px; left: -4px; }
    .chassis::after  { bottom: -4px; right: -4px; }
    .node-tr { top: -4px; right: -4px; }
    .node-bl { position: absolute; bottom: -4px; left: -4px; width: 7px; height: 7px; background: var(--surface-2); border: 1.5px solid var(--node); border-radius: 50%; z-index: 2; }

    .cell {
      background: var(--surface);
      padding: 28px;
      position: relative;
      min-height: 200px;
    }
    .cell-label {
      font-family: 'Martian Mono', monospace;
      font-size: 11px; font-weight: 600;
      letter-spacing: 0.02em;
      color: var(--ink-3);
      display: inline-flex; align-items: center; gap: 8px;
      margin-bottom: 22px;
    }
    .cell-label::before {
      content: ''; width: 12px; height: 1.5px;
      background: var(--red);
    }

    /* ═══════════ TYPE SPECIMEN ═══════════ */
    .type-stack { display: grid; gap: 28px; }
    .type-row { display: grid; gap: 4px; }
    .type-tag {
      font-family: 'Martian Mono', monospace;
      font-size: 10px; font-weight: 500;
      letter-spacing: 0.02em;
      color: var(--ink-4);
    }
    .type-display {
      font-family: 'Bricolage Grotesque', serif;
      font-weight: 800;
      font-size: 48px;
      letter-spacing: -0.04em;
      line-height: 0.95;
      color: var(--ink);
    }
    .type-heading {
      font-family: 'Bricolage Grotesque', serif;
      font-weight: 700;
      font-size: 22px;
      letter-spacing: -0.02em;
      color: var(--ink);
    }
    .type-body {
      font-family: 'Onest', sans-serif;
      font-weight: 400;
      font-size: 15px;
      line-height: 1.6;
      color: var(--ink-2);
    }
    .type-mono {
      font-family: 'Martian Mono', monospace;
      font-weight: 500;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--ink-3);
    }

    /* ═══════════ SIGNAL COLOR TABLE ═══════════ */
    .signal-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      font-size: 13px;
    }
    .signal-table th,
    .signal-table td {
      padding: 14px 18px;
      text-align: left;
      border-bottom: 1px solid var(--border-2);
    }
    .signal-table th {
      font-family: 'Martian Mono', monospace;
      font-size: 9px; font-weight: 600;
      text-transform: uppercase; letter-spacing: 0.10em;
      color: var(--ink-3);
      background: var(--bg-alt);
      border-bottom: 1px solid var(--border);
    }
    .signal-table tbody tr:last-child td { border-bottom: none; }
    .signal-table td:first-child { width: 80px; }
    .signal-chip {
      display: inline-flex; align-items: center; gap: 10px;
      font-family: 'Martian Mono', monospace;
      font-size: 10px; font-weight: 600;
      text-transform: uppercase; letter-spacing: 0.04em;
    }
    .signal-chip i {
      width: 14px; height: 14px;
      display: block;
    }
    .signal-table .use {
      color: var(--ink);
      font-weight: 500;
    }
    .signal-table .avoid {
      color: var(--ink-3);
      font-family: 'Onest', sans-serif;
      font-style: italic;
    }

    /* ═══════════ THEME GRID ═══════════ */
    .theme-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
    }
    .theme-card {
      background: var(--surface);
      padding: 20px;
      display: grid;
      gap: 12px;
    }
    .theme-card-head {
      display: flex; align-items: center; justify-content: space-between;
    }
    .theme-card-name {
      font-family: 'Bricolage Grotesque', serif;
      font-weight: 700; font-size: 17px;
      letter-spacing: -0.02em;
      color: var(--ink);
    }
    .theme-card-code {
      font-family: 'Martian Mono', monospace;
      font-size: 9px; font-weight: 500;
      text-transform: uppercase; letter-spacing: 0.08em;
      color: var(--ink-3);
    }
    .theme-card-swatches {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 1px;
      height: 44px;
    }
    .theme-card-swatches span {
      display: block;
      outline: 1px solid color-mix(in oklch, var(--ink) 8%, transparent);
    }
    .theme-card-desc {
      font-size: 12px;
      line-height: 1.5;
      color: var(--ink-3);
    }

    /* ═══════════ BUTTONS ═══════════ */
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      font-family: 'Onest', sans-serif;
      font-size: 13px; font-weight: 500;
      letter-spacing: 0.005em;
      padding: 10px 20px;
      border: 1px solid var(--ink);
      background: transparent;
      color: var(--ink);
      transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.08s, box-shadow 0.15s;
      white-space: nowrap;
    }
    .btn:hover { background: var(--ink); color: var(--bg); box-shadow: var(--shadow-sm); }
    .btn:active { transform: translateY(1px); }
    .btn--primary { background: var(--ink); color: var(--bg); }
    .btn--primary:hover { background: var(--ink-2); border-color: var(--ink-2); }
    .btn--signal {
      background: var(--red); color: #fff;
      border-color: var(--red);
    }
    .btn--signal:hover {
      background: color-mix(in oklch, var(--red) 85%, black);
      border-color: color-mix(in oklch, var(--red) 85%, black);
      box-shadow: 0 2px 12px color-mix(in oklch, var(--red) 35%, transparent);
    }
    .btn--ghost {
      border-color: var(--border);
      color: var(--ink-3);
    }
    .btn--ghost:hover {
      background: transparent;
      color: var(--ink);
      border-color: var(--ink);
    }
    .btn--sm { font-size: 12px; padding: 7px 14px; }
    .btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

    /* ═══════════ INPUTS ═══════════ */
    .input {
      width: 100%;
      font-family: 'Onest', sans-serif;
      font-size: 14px; font-weight: 400;
      padding: 10px 14px;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--ink);
      outline: none;
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .input::placeholder { color: var(--ink-4); }
    .input:focus {
      border-color: var(--ink);
      box-shadow: 0 0 0 3px color-mix(in oklch, var(--ink) 8%, transparent);
    }

    /* ═══════════ BADGES ═══════════ */
    .badge {
      display: inline-flex; align-items: center; gap: 6px;
      font-family: 'Martian Mono', monospace;
      font-size: 10px; font-weight: 500;
      letter-spacing: 0.04em; text-transform: uppercase;
      padding: 3px 10px;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--ink-3);
    }
    .badge::before {
      content: ''; width: 5px; height: 5px; border-radius: 50%;
      flex-shrink: 0;
      background: var(--ink-4);
    }
    .badge--red { border-color: color-mix(in oklch, var(--red) 30%, transparent); color: var(--red); background: var(--red-tint); }
    .badge--red::before { background: var(--red); }
    .badge--blue { border-color: color-mix(in oklch, var(--blue) 30%, transparent); color: var(--blue); background: var(--blue-tint); }
    .badge--blue::before { background: var(--blue); }
    .badge--amber { border-color: color-mix(in oklch, var(--amber) 30%, transparent); color: color-mix(in oklch, var(--amber) 80%, black); background: var(--amber-tint); }
    .badge--amber::before { background: var(--amber); }
    .badge--green { border-color: color-mix(in oklch, var(--green) 30%, transparent); color: color-mix(in oklch, var(--green) 90%, black); background: var(--green-tint); }
    .badge--green::before { background: var(--green); }
    [data-theme="figments-dark"] .badge--amber,
    [data-theme="midnight"] .badge--amber,
    [data-theme="slate"] .badge--amber { color: var(--amber); }
    [data-theme="figments-dark"] .badge--green,
    [data-theme="midnight"] .badge--green,
    [data-theme="slate"] .badge--green { color: var(--green); }

    .badge-row { display: flex; gap: 6px; flex-wrap: wrap; }

    /* ═══════════ CARDS ═══════════ */
    .card {
      border: 1px solid var(--border);
      background: var(--surface);
      transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
      position: relative;
    }
    .card:hover {
      border-color: color-mix(in oklch, var(--ink) 30%, var(--border));
      box-shadow: var(--shadow-lift);
      transform: translateY(-1px);
    }
    .card-rail { height: 3px; background: var(--border); }
    .card-rail--red { background: var(--red); }
    .card-rail--blue { background: var(--blue); }
    .card-rail--amber { background: var(--amber); }
    .card-rail--green { background: var(--green); }
    .card-body { padding: 20px; }
    .card-meta {
      font-family: 'Martian Mono', monospace;
      font-size: 11px; font-weight: 500;
      letter-spacing: 0.02em;
      color: var(--ink-3);
      margin-bottom: 6px;
    }
    .card-title {
      font-family: 'Bricolage Grotesque', serif;
      font-weight: 700; font-size: 16px;
      letter-spacing: -0.015em;
      color: var(--ink);
      margin-bottom: 6px;
    }
    .card-text {
      font-size: 13px;
      line-height: 1.6;
      color: var(--ink-3);
    }

    /* ═══════════ SPACE SCALE ═══════════ */
    .space-scale {
      display: grid;
      grid-template-columns: 80px 1fr;
      gap: 0;
      font-family: 'Martian Mono', monospace;
      font-size: 11px;
    }
    .space-row {
      display: contents;
    }
    .space-row > .space-key {
      padding: 10px 16px 10px 0;
      color: var(--ink);
      border-bottom: 1px solid var(--border-2);
    }
    .space-row > .space-bar {
      padding: 10px 0;
      border-bottom: 1px solid var(--border-2);
      display: flex; align-items: center; gap: 10px;
    }
    .space-row > .space-bar i {
      display: block;
      background: var(--ink);
      height: 8px;
    }
    .space-row > .space-bar span {
      font-size: 10px;
      color: var(--ink-3);
      letter-spacing: 0.04em;
    }
    .space-row:last-child .space-key,
    .space-row:last-child .space-bar { border-bottom: none; }

    /* ═══════════ APP SAMPLE (mini dashboard) ═══════════ */
    .app-frame {
      border: 1px solid var(--border);
      background: var(--surface);
      overflow: hidden;
      position: relative;
      display: grid;
      grid-template-columns: 244px 1fr;
      min-height: 480px;
    }
    .app-frame-stack {
      display: grid;
      gap: 28px;
    }
    .app-frame-label {
      display: flex; align-items: baseline; gap: 10px;
      font-family: 'Martian Mono', monospace;
      font-size: 10px; font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--ink-3);
      padding: 0 0 8px;
    }
    .app-frame-label b {
      font-weight: 700;
      color: var(--ink);
      letter-spacing: -0.01em;
      text-transform: none;
      font-family: 'Onest', sans-serif;
      font-size: 12px;
    }
    .app-frame-caption {
      margin-top: 14px;
    }

    /* ─── Sidebar ─────────────────────────────────── */
    .app-side {
      border-right: 1px solid var(--border);
      background: var(--surface);
      display: grid;
      grid-template-rows: 1fr auto;
      position: relative;
      overflow: hidden;
    }
    .app-side-stack {
      display: grid;
      grid-template-rows: auto auto auto 1fr;
      padding: 14px 0 0;
      min-height: 0;
      overflow: hidden;
      /* Both stacks share grid row 1 in .app-side — cross-fade between them */
      grid-column: 1;
      grid-row: 1;
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--dur-quick) var(--ease-out-quart);
    }
    .app-side[data-state="default"] .app-side-stack--default,
    .app-side[data-state="history"] .app-side-stack--history {
      opacity: 1;
      pointer-events: auto;
    }
    .app-side-scroll {
      overflow: hidden;
      min-height: 0;
    }
    .app-side-brand {
      font-family: 'Bricolage Grotesque', serif;
      font-weight: 800; font-size: 17px;
      letter-spacing: -0.03em;
      color: var(--ink);
      padding: 0 16px 14px;
    }
    .app-search-btn {
      margin: 0 12px 14px;
      padding: 7px 10px;
      font-family: 'Onest', sans-serif;
      font-size: 12px; font-weight: 500;
      display: grid;
      grid-template-columns: 14px 1fr auto;
      align-items: center; gap: 10px;
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--ink-3);
      text-align: left;
      cursor: pointer;
      transition: background var(--dur-instant) var(--ease-out-quart),
                  border-color var(--dur-instant) var(--ease-out-quart),
                  color var(--dur-instant) var(--ease-out-quart);
    }
    .app-search-btn:hover {
      background: var(--bg-alt);
      border-color: var(--ink-4);
      color: var(--ink-2);
    }
    .app-search-btn .app-icon { color: var(--ink-3); }
    .app-search-btn-label {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .app-search-btn-kbd {
      display: inline-flex; align-items: center; gap: 2px;
      font-family: 'Martian Mono', monospace;
      font-size: 10px;
      color: var(--ink-4);
    }
    .app-search-btn-kbd kbd {
      font-family: inherit;
      padding: 1px 4px;
      border: 1px solid var(--border-2);
      background: var(--bg-alt);
      color: var(--ink-3);
      line-height: 1;
    }
    .app-side-nav {
      display: grid; gap: 1px;
      padding: 0 12px;
    }
    /* .app-side-item renders as <button> for keyboard + SR reach. Resets
       the browser's default button chrome so the visual identity stays the
       same as the rest of the sidebar chrome. */
    .app-side-item {
      display: flex; align-items: center; gap: 10px;
      padding: 7px 10px;
      font: inherit;
      font-size: 13px;
      color: var(--ink-2);
      background: transparent;
      border: 0;
      text-align: left;
      width: 100%;
      cursor: pointer;
      transition: background 0.12s, color 0.12s;
    }
    .app-side-item:hover { background: var(--bg-alt); color: var(--ink); }
    .app-side-item:focus-visible {
      outline: 2px solid var(--ink);
      outline-offset: -2px;
    }
    .app-side-item.is-active {
      background: var(--bg-alt);
      color: var(--ink);
      font-weight: 500;
    }
    .app-side-item .app-icon {
      width: 14px; height: 14px;
      flex-shrink: 0;
      color: var(--ink-3);
      transition: color var(--dur-instant) var(--ease-out-quart);
    }
    .app-side-item.is-active .app-icon { color: var(--ink); }
    /* Nav icons stay in nav-language (outlined, neutral). Kind color is for *instances* —
       items in History and Recent — not for navigation destinations. */

    .app-side-section {
      padding: 18px 24px 6px;
      display: flex; align-items: center; gap: 8px;
      font-family: 'Martian Mono', monospace;
      font-size: 11px; font-weight: 500;
      letter-spacing: 0.02em;
      color: var(--ink-3);
    }
    .app-side-section-add { margin-left: auto; }
    .app-side-section-add {
      width: 16px; height: 16px;
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--ink-4);
      font-size: 14px;
      border: 1px solid var(--border-2);
      background: transparent;
    }
    .app-side-hint {
      padding: 4px 24px 10px;
      font-size: 12px;
      color: var(--ink-3);
      line-height: 1.45;
    }
    .app-side-hint a {
      color: var(--ink);
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    /* .app-side-thread renders as <button> for keyboard + SR reach. */
    .app-side-thread {
      padding: 8px 16px 8px 14px;
      display: grid;
      grid-template-columns: 22px 1fr;
      align-items: center;
      column-gap: 10px;
      font: inherit;
      color: inherit;
      background: transparent;
      border: 0;
      text-align: left;
      width: 100%;
      cursor: pointer;
      transition: background 0.12s;
    }
    .app-side-thread:hover { background: var(--bg-alt); }
    .app-side-thread:focus-visible {
      outline: 2px solid var(--ink);
      outline-offset: -2px;
    }
    .app-side-thread-cube {
      grid-column: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px; height: 22px;
      color: var(--ink);
      /* Reserved slot; only the active thread fills it with a cube glyph. */
    }
    .app-side-thread-cube svg {
      width: 22px; height: 22px;
      overflow: visible;
    }
    /* Inactive threads leave the cube slot empty — keep the column width so
       titles stay aligned between active and inactive rows. */
    .app-side-thread:not(.is-active) .app-side-thread-cube { visibility: hidden; }
    .app-side-thread-body {
      grid-column: 2;
      display: grid; gap: 2px;
      min-width: 0;
    }
    .app-side-thread-title {
      font-size: 13px; font-weight: 500; color: var(--ink);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .app-side-thread-time {
      font-family: 'Martian Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.02em;
      color: var(--ink-3);
    }
    .app-side-thread.is-active {
      background: color-mix(in oklch, var(--kind-figment) 8%, var(--surface));
      box-shadow: inset 2px 0 0 var(--kind-figment);
    }
    .app-side-thread.is-active .app-side-thread-title { color: var(--ink); font-weight: 600; }
    /* Empty-state row — shown below the Sessions header when the user has
       no sessions yet. Non-interactive text with a single inline link that
       creates and opens the first session. ⌘/ does the same.
       Expected markup:
         <p class="app-side-threads-empty">
           Press <kbd>⌘</kbd><kbd>/</kbd> or
           <a>start your first chat</a>
         </p>
    */
    .app-side-threads-empty {
      margin: 0;
      padding: 8px 24px 12px;
      font-size: 12px;
      line-height: 1.45;
      color: var(--ink-3);
    }
    .app-side-threads-empty a {
      color: var(--ink);
      text-decoration: underline;
      text-underline-offset: 2px;
      cursor: pointer;
    }
    /* Hide empty-state row in rail — the rail has no Sessions header to
       anchor it against, and an empty state there would be ambiguous. */
    .app-frame--ask-open .app-side-threads-empty,
    .studio-frame .app-side-threads-empty { display: none; }

    .app-user {
      display: flex; align-items: center; gap: 10px;
      padding: 12px 16px;
      border-top: 1px solid var(--border);
      background: var(--surface);
    }
    .app-user-avatar {
      width: 28px; height: 28px;
      background: var(--ink);
      color: var(--bg);
      display: inline-flex; align-items: center; justify-content: center;
      font-family: 'Onest', sans-serif;
      font-size: 12px; font-weight: 600;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .app-user-name {
      font-size: 13px; font-weight: 600; color: var(--ink);
      line-height: 1.15;
    }
    .app-user-email {
      font-family: 'Martian Mono', monospace;
      font-size: 10px;
      color: var(--ink-3);
      letter-spacing: 0.02em;
    }

    /* ─── Sidebar: bottom block (history row + user) ─ */
    .app-side-bottom {
      display: grid;
      grid-template-rows: auto auto;
    }

    /* (Retired: .app-threads-btn, .app-threads-popover* — the rail hamburger
        + flyout pattern was replaced by a column header dropdown. The rail
        no longer advertises threads; thread switching happens in-context,
        at the top of the chat column where the active thread is named and
        the picker lives. See .ask-column-header + .ask-column-thread-menu
        below.) */
    .app-history-row {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 16px;
      font-size: 12px; font-weight: 500;
      font-family: 'Onest', sans-serif;
      color: var(--ink-2);
      background: transparent;
      border: none;
      border-top: 1px solid var(--border);
      text-align: left;
      cursor: pointer;
      transition: background var(--dur-instant) var(--ease-out-quart),
                  color var(--dur-instant) var(--ease-out-quart);
    }
    .app-history-row .app-icon {
      transition: transform var(--dur-quick) var(--ease-out-expo),
                  color var(--dur-instant) var(--ease-out-quart);
    }
    .app-side[data-state="history"] .app-history-row .app-icon {
      transform: rotate(-18deg);
    }
    .app-history-row:hover { background: var(--bg-alt); color: var(--ink); }
    .app-side[data-state="history"] .app-history-row {
      background: var(--bg-alt);
      color: var(--ink);
    }
    .app-history-row .app-icon {
      width: 14px; height: 14px;
      color: var(--ink-3);
      flex-shrink: 0;
    }
    .app-side[data-state="history"] .app-history-row .app-icon { color: var(--ink); }

    /* ─── Sidebar: history state ─────────────────── */
    .app-side-history-head {
      display: flex; align-items: center; gap: 10px;
      padding: 0 14px 14px;
    }
    .app-side-history-back {
      width: 22px; height: 22px;
      display: inline-flex; align-items: center; justify-content: center;
      border: 1px solid var(--border);
      background: var(--bg-alt);
      color: var(--ink-2);
      font-size: 12px; line-height: 1;
      cursor: pointer;
      transition: background 0.12s, color 0.12s;
      flex-shrink: 0;
    }
    .app-side-history-back:hover { color: var(--ink); background: var(--surface); }
    .app-side-history-title {
      font-family: 'Bricolage Grotesque', serif;
      font-weight: 800; font-size: 16px;
      letter-spacing: -0.025em;
      color: var(--ink);
    }
    .app-side-history-list {
      display: grid; gap: 1px;
      padding: 0 8px 12px;
    }
    .app-side-history-item {
      display: grid;
      grid-template-columns: 16px 1fr auto;
      align-items: center;
      gap: 10px;
      padding: 7px 10px;
      cursor: pointer;
      transition: background var(--dur-instant) var(--ease-out-quart),
                  transform var(--dur-instant) var(--ease-out-quart);
    }
    .app-side-history-item:hover {
      background: var(--bg-alt);
      transform: translateX(2px);
    }
    .app-side-history-item-icon {
      width: 12px; height: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--ink-3);
      transition: color var(--dur-instant) var(--ease-out-quart);
    }
    .app-side-history-item-icon svg {
      width: 100%; height: 100%;
    }
    /* Kind-colored glyph — identity carries into the sidebar via 03-objects tokens. */
    .app-side-history-item[data-kind="figment"]     .app-side-history-item-icon { color: var(--kind-figment); }
    .app-side-history-item[data-kind="workflow"]    .app-side-history-item-icon { color: var(--kind-workflow); }
    .app-side-history-item[data-kind="board"]       .app-side-history-item-icon { color: var(--kind-board); }
    .app-side-history-item[data-kind="integration"] .app-side-history-item-icon { color: var(--kind-integration); }
    .app-side-history-item[data-kind="document"]    .app-side-history-item-icon { color: var(--kind-document); }
    .app-side-history-item[data-kind="memory"]      .app-side-history-item-icon { color: var(--kind-memory); }
    .app-side-history-item-title {
      font-size: 12.5px;
      font-weight: 500;
      color: var(--ink);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .app-side-history-item-time {
      font-family: 'Martian Mono', monospace;
      font-size: 10px;
      color: var(--ink-3);
      letter-spacing: 0.02em;
    }
    .app-side-history-empty {
      padding: 12px 16px;
      font-size: 12px;
      color: var(--ink-3);
      line-height: 1.5;
    }

    /* ─── Main area ───────────────────────────────── */
    .app-main {
      padding: 22px 24px 24px;
      background: var(--bg);
      display: grid;
      grid-template-rows: auto 1fr;
      gap: 18px;
      align-content: start;
    }
    .app-main-head {
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap;
      gap: 14px;
    }
    .app-main-left {
      display: flex; align-items: center; gap: 16px;
    }
    .app-toggle {
      width: 18px; height: 14px;
      display: inline-flex; flex-direction: column; justify-content: space-between;
      color: var(--ink-3);
      cursor: pointer;
    }
    .app-toggle i {
      display: block; height: 1.5px; background: currentColor;
    }
    .app-toggle i:nth-child(2) { width: 70%; }
    .app-main-title {
      font-family: 'Bricolage Grotesque', serif;
      font-weight: 800; font-size: 22px;
      letter-spacing: -0.025em;
      color: var(--ink);
      line-height: 1;
    }
    .app-pill-tabs {
      display: flex; gap: 2px; align-items: center;
      margin-left: 4px;
    }
    .app-pill {
      font-size: 13px; font-weight: 500;
      padding: 5px 14px;
      color: var(--ink-3);
      cursor: pointer;
      transition: color 0.12s;
    }
    .app-pill:hover { color: var(--ink); }
    .app-pill.is-active {
      background: var(--ink);
      color: var(--bg);
      border-radius: 999px;
      padding: 5px 14px;
    }
    .app-sort {
      font-family: 'Onest', sans-serif;
      font-size: 12px; font-weight: 500;
      color: var(--ink-2);
      padding: 6px 12px;
      border: 1px solid var(--border);
      background: var(--surface);
      display: inline-flex; align-items: center; gap: 6px;
    }
    .app-sort::after {
      content: '';
      width: 0; height: 0;
      border-left: 3.5px solid transparent;
      border-right: 3.5px solid transparent;
      border-top: 4px solid var(--ink-3);
      margin-top: 1px;
    }
    .app-head-actions {
      display: inline-flex; align-items: center; gap: 10px;
    }
    .app-create-btn {
      font-family: 'Onest', sans-serif;
      font-size: 12px; font-weight: 600;
      color: var(--bg);
      background: var(--ink);
      border: 1px solid var(--ink);
      padding: 6px 12px 6px 9px;
      display: inline-flex; align-items: center; gap: 6px;
      cursor: pointer;
      transition: background var(--dur-instant) var(--ease-out-quart),
                  border-color var(--dur-instant) var(--ease-out-quart);
    }
    .app-create-btn:hover { background: var(--ink-2); border-color: var(--ink-2); }
    .app-create-btn::before {
      content: '+';
      font-family: 'Onest', sans-serif;
      font-size: 14px; font-weight: 400;
      line-height: 1;
    }

    /* ─── Shell: Create form — opens Studio with name + type ─ */
    .shell-create-stage {
      background: var(--bg-alt);
      border: 1px solid var(--border);
      padding: 32px;
      position: relative;
      overflow: hidden;
    }
    .shell-create-stage::before {
      content: '';
      position: absolute; inset: 0;
      background-image: radial-gradient(circle, color-mix(in oklch, var(--ink) 10%, transparent) 1px, transparent 1px);
      background-size: 28px 28px;
      opacity: 0.35;
      pointer-events: none;
    }
    .shell-create-form {
      position: relative;
      display: grid;
      gap: 20px;
      max-width: 720px;
      margin: 0 auto;
      padding: 24px 28px 28px;
      background: var(--surface);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-lift);
      animation: shell-create-form-reveal var(--dur-quick) var(--ease-out-expo) both;
    }
    @keyframes shell-create-form-reveal {
      from { opacity: 0; transform: translateY(-4px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .shell-create-composer {
      display: grid; gap: 14px;
      padding: 16px 18px 14px;
      min-height: 96px;
      background: var(--surface-2);
      border: 1px solid var(--border-2);
    }
    .shell-create-composer-prompt {
      font-size: 13px;
      color: var(--ink-4);
      line-height: 1.5;
    }
    .shell-create-composer-hint {
      display: flex; align-items: center; gap: 8px;
      font-family: 'Martian Mono', monospace;
      font-size: 10px;
      color: var(--ink-3);
      margin-top: auto;
    }
    .shell-create-composer-hint kbd {
      font-family: inherit;
      padding: 1px 5px;
      border: 1px solid var(--border-2);
      background: var(--bg-alt);
      color: var(--ink-2);
      line-height: 1;
    }
    .shell-create-fields {
      display: grid;
      grid-template-columns: 1fr 220px;
      gap: 14px;
    }
    .shell-create-field {
      display: grid; gap: 6px;
      position: relative;
    }
    .shell-create-field-label {
      font-size: 12px; font-weight: 500;
      color: var(--ink);
    }
    .shell-create-input {
      display: flex; align-items: center;
      padding: 10px 10px 10px 14px;
      border: 1px solid var(--border);
      background: var(--surface);
      min-height: 38px;
    }
    .shell-create-input-text {
      flex: 1;
      font-family: 'Martian Mono', monospace;
      font-size: 13px;
      letter-spacing: 0.01em;
      color: var(--ink);
    }
    .shell-create-input-actions {
      display: inline-flex; align-items: center; gap: 4px;
    }
    .shell-create-input-btn {
      width: 24px; height: 24px;
      display: inline-flex; align-items: center; justify-content: center;
      border: 1px solid var(--border-2);
      background: var(--bg-alt);
      color: var(--ink-3);
      cursor: pointer;
      transition: color var(--dur-instant) var(--ease-out-quart),
                  border-color var(--dur-instant) var(--ease-out-quart);
    }
    .shell-create-input-btn:hover { color: var(--ink); border-color: var(--ink-4); }
    .shell-create-input-btn svg { width: 12px; height: 12px; }

    .shell-create-select {
      display: flex; align-items: center; justify-content: space-between;
      padding: 10px 12px;
      border: 1px solid var(--blue);
      background: var(--surface);
      box-shadow: 0 0 0 2px color-mix(in oklch, var(--blue) 20%, transparent);
      min-height: 38px;
      cursor: pointer;
    }
    .shell-create-select-value {
      font-size: 13px; font-weight: 500;
      color: var(--ink);
    }
    .shell-create-select-caret {
      width: 12px; height: 12px;
      color: var(--ink-3);
    }
    .shell-create-select-menu {
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      left: 0;
      background: var(--surface);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-lift);
      padding: 4px 0;
      display: grid;
      animation: shell-create-form-reveal var(--dur-quick) var(--ease-out-expo) both;
    }
    .shell-create-select-item {
      display: grid;
      grid-template-columns: 16px 1fr;
      align-items: center;
      gap: 10px;
      padding: 9px 14px;
      font-size: 13px;
      color: var(--ink-2);
      cursor: pointer;
      transition: background var(--dur-instant) var(--ease-out-quart),
                  color var(--dur-instant) var(--ease-out-quart);
    }
    .shell-create-select-item:hover {
      background: var(--bg-alt);
      color: var(--ink);
    }
    .shell-create-select-item.is-selected {
      color: var(--ink);
      font-weight: 500;
    }
    .shell-create-select-item.is-selected ~ .shell-create-select-item { color: var(--ink-2); }
    .shell-create-select-check {
      width: 12px; height: 12px;
      color: var(--ink);
    }
    .shell-create-select-item:not(.is-selected) .shell-create-select-check { visibility: hidden; }
    .shell-create-select-kind {
      width: 10px; height: 10px;
      justify-self: center;
      background: var(--ink-3);
    }
    .shell-create-select-item[data-kind="figment"] .shell-create-select-kind { background: var(--kind-figment); }
    .shell-create-select-item[data-kind="workflow"] .shell-create-select-kind {
      width: 0; height: 0;
      background: transparent;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-bottom: 9px solid var(--kind-workflow);
    }

    .shell-create-dest {
      padding: 14px 16px;
      border: 1px solid var(--border-2);
      background: var(--bg-alt);
      display: grid; gap: 4px;
    }
    .shell-create-dest-label {
      font-size: 12px; font-weight: 600;
      color: var(--ink);
    }
    .shell-create-dest-value {
      font-size: 13px; font-weight: 700;
      color: var(--ink);
    }
    .shell-create-dest-meta {
      font-size: 12px;
      line-height: 1.5;
      color: var(--ink-3);
    }

    /* Explicit-type select (closed menu with kind glyph in the button) */
    .shell-create-select[data-kind] {
      display: grid;
      grid-template-columns: 10px 1fr 12px;
      gap: 10px;
      align-items: center;
    }
    .shell-create-select[data-kind="figment"] {
      border-color: var(--kind-figment);
      box-shadow: 0 0 0 2px color-mix(in oklch, var(--kind-figment) 20%, transparent);
    }
    .shell-create-select[data-kind="workflow"] {
      border-color: var(--kind-workflow);
      box-shadow: 0 0 0 2px color-mix(in oklch, var(--kind-workflow) 24%, transparent);
    }
    .shell-create-select[data-kind="figment"] > .shell-create-select-kind {
      background: var(--kind-figment);
    }
    .shell-create-select[data-kind="workflow"] > .shell-create-select-kind {
      width: 0; height: 0;
      background: transparent;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-bottom: 9px solid var(--kind-workflow);
    }

    /* Detail — three name-handling states */
    .shell-create-detail-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
    }
    @media (max-width: 900px) {
      .shell-create-detail-grid { grid-template-columns: 1fr; }
    }
    .shell-create-detail-card {
      background: var(--surface);
      padding: 24px 24px 22px;
      display: grid;
      gap: 16px;
      align-content: start;
    }
    .shell-create-detail-name {
      display: flex; align-items: center;
      padding: 10px 10px 10px 14px;
      border: 1px solid var(--border);
      background: var(--bg-alt);
      min-height: 38px;
    }
    .shell-create-detail-meta {
      font-size: 12.5px;
      line-height: 1.55;
      color: var(--ink-3);
    }
    .shell-create-detail-meta b { color: var(--ink); font-weight: 600; }
    .shell-create-input-btn.is-hot {
      color: var(--ink);
      border-color: var(--ink);
      background: var(--surface);
    }
    .shell-create-input-text--typed { color: var(--ink); }

    /* (Retired: .shell-summon*, .shell-summon-flow*, .shell-summon-stage/demo/teach
        Replaced by the Ask bar pattern + cubic kit. See .ask-bar* and .cc-* rules.) */

    /* ══════════ Ask bar — persistent bottom composer ══════════
       Replaces the corner summon mark. Welded to the page bottom
       on every non-chat surface. Rests as a 44px strip; expands
       upward into a chat panel. */

    /* (Retired: .ask-stage*  — the Ask bar now lives inside real shell frames.) */

    /* (Retired: .app-main--has-ask — the bottom Ask bar is gone; composer now
        lives inside the chat column, which is summoned from the sidebar.) */

    /* When a thread is active, the sidebar collapses to an icon rail and the
       chat column unfurls in its place. Grid: [rail | chat | main] — total
       left chrome is ~408px instead of ~604px, so main stays breathable even
       at 1024–1280 widths. Below 1100px the chat column narrows to 320; below
       900px it takes over main entirely (see mobile rules). */
    .app-frame--ask-open {
      grid-template-columns: 48px 360px 1fr;
    }
    @media (max-width: 1100px) {
      .app-frame--ask-open {
        grid-template-columns: 48px 320px 1fr;
      }
    }
    @media (max-width: 900px) {
      /* Tablet: chat column takes over main. Rail stays as exit path.
         See also the min-height / border override later in the file. */
      .app-frame--ask-open {
        grid-template-columns: 48px 1fr;
      }
    }
    @media (max-width: 600px) {
      /* Phone: rail hides entirely. The chat column is the whole surface.
         A hamburger in the chat header toggles a full-width sidebar drawer.
         .ask-column-menu is the hamburger; it mirrors the rail's nav + the
         expanded threads list in a single overlay. */
      .app-frame--ask-open {
        grid-template-columns: 1fr;
      }
      .app-frame--ask-open .app-side { display: none; }
      .ask-column-menu {
        position: absolute;
        top: 8px; left: 8px;
        z-index: 2;
        width: 32px; height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--border);
        background: var(--surface);
        color: var(--ink-2);
        cursor: pointer;
      }
      /* On phone, the column header doubles its responsibilities (carries
         the sidebar drawer toggle too), and the hamburger sits left of the
         thread picker. No extra body-top padding needed; the header
         already separates body from chrome. */
    }
    /* Desktop-only: hamburger is hidden; rail handles nav. */
    @media (min-width: 601px) {
      .ask-column-menu { display: none; }
    }

    /* ─── Sidebar rail state ───
       Same sidebar markup, collapsed to icons when chat is open. Labels,
       section headers, session titles, hints, search label, user name, and
       history label all hide; icons center in a 48px column; sessions show
       only the active cube. Restores to full width when chat closes. */
    .app-frame--ask-open .app-side { overflow: hidden; }
    .app-frame--ask-open .app-side-brand,
    .studio-frame .app-side-brand {
      padding: 0 0 10px;
      text-align: center;
      font-size: 14px;
      letter-spacing: -0.02em;
      /* Collapse "figments" to monogram "f" — no CSS truncation on full text,
         so the brand div in the rail frame just renders "f" at the HTML level.
         10px bottom padding matches the 10px top/bottom rhythm of search and
         nav items, so the header zone doesn't feel disproportionately tall. */
    }
    .app-frame--ask-open .app-search-btn,
    .studio-frame .app-search-btn {
      grid-template-columns: 1fr;
      justify-items: center;
      margin: 0;
      padding: 10px 0;
      gap: 0;
      border: 0;
      background: transparent;
    }
    .app-frame--ask-open .app-search-btn .app-icon,
    .studio-frame .app-search-btn .app-icon {
      width: 14px; height: 14px;
      flex-shrink: 0;
    }
    .app-frame--ask-open .app-search-btn:hover,
    .studio-frame .app-search-btn:hover {
      background: var(--bg-alt);
      border: 0;
    }
    .app-frame--ask-open .app-search-btn-label,
    .studio-frame .app-search-btn-label,
    .app-frame--ask-open .app-search-btn-kbd,
    .studio-frame .app-search-btn-kbd,
    .app-frame--ask-open .app-side-section,
    .studio-frame .app-side-section,
    .app-frame--ask-open .app-side-hint,
    .studio-frame .app-side-hint,
    .app-frame--ask-open .app-user-name,
    .studio-frame .app-user-name,
    .app-frame--ask-open .app-user-email,
    .studio-frame .app-user-email,
    .app-frame--ask-open .app-history-row > span,
    .studio-frame .app-history-row > span { display: none; }
    .app-frame--ask-open .app-side-item,
    .studio-frame .app-side-item {
      justify-content: center;
      padding: 10px 0;
      gap: 0;
    }
    .app-frame--ask-open .app-side-item .app-icon,
    .studio-frame .app-side-item .app-icon { margin: 0; }

    /* Visually hidden — labels that stay in the accessibility tree but take
       no visual space. Replaces the font-size:0 hack. Rail nav items wrap
       their text labels in <span class="visually-hidden">…</span> so SRs
       announce "Inbox" etc. while sighted users see only the icon. */
    .visually-hidden {
      position: absolute;
      width: 1px; height: 1px;
      padding: 0; margin: -1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
      border: 0;
    }
    /* All sessions hide from the rail when chat is open — the active one's
       cube has traveled into the composer, and the rail doesn't need to echo
       the thread you're clearly inside. Inactive rows would just be clutter
       at this width. "Sessions" returns in full when the chat closes. */
    .app-frame--ask-open .app-side-thread,
    .studio-frame .app-side-thread { display: none; }
    /* Hide History in the rail — it's a full-sidebar-swap action and doesn't
       belong mid-chat. Returns when the rail expands. */
    .app-frame--ask-open .app-history-row,
    .studio-frame .app-history-row { display: none; }
    /* Avatar row sits at 44px so its top border aligns with the composer's
       top border — one shared baseline across the bottom of rail + column. */
    .app-frame--ask-open .app-user,
    .studio-frame .app-user {
      justify-content: center;
      height: 44px;
      padding: 0;
      gap: 0;
    }
    .app-frame--ask-open .app-user-avatar,
    .studio-frame .app-user-avatar {
      width: 24px; height: 24px;
      font-size: 11px;
    }

    /* Chat column — welded to the right edge of the sidebar rail. Unfurls in
       the direction opposite the click origin (rail → right), so the motion
       reads as directional, not as a teleport. Header is omitted here: the
       active thread's cube on the rail already identifies the thread, so
       the column carries only transcript + composer, with a small close
       affordance floating in the top-right. */
    .ask-column {
      position: relative;
      display: flex;
      flex-direction: column;
      background: var(--surface);
      border-right: 1px solid var(--border);
      overflow: hidden;
      animation: ask-column-slide var(--dur-base, 220ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
    }
    .ask-column .ask-column-header,
    .ask-column .ask-composer,
    .ask-column .ask-bar { flex: 0 0 auto; }

    /* Column header — 40px strip at the top carrying the active thread's
       name (as a dropdown trigger) + a close button. Brings the identity
       anchor back onto the surface the user is reading, replacing the
       retired rail hamburger/flyout pattern. */
    .ask-column-header {
      position: relative;
      display: flex;
      align-items: center;
      gap: 8px;
      height: 40px;
      padding: 0 6px 0 14px;
      border-bottom: 1px solid var(--border);
      background: var(--surface);
    }
    .ask-column-thread-picker {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex: 1;
      min-width: 0;
      height: 28px;
      padding: 0 8px 0 0;
      background: transparent;
      border: 0;
      color: var(--ink);
      font-family: inherit;
      font-size: 13px;
      font-weight: 500;
      letter-spacing: -0.005em;
      text-align: left;
      cursor: pointer;
    }
    .ask-column-thread-picker-name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .ask-column-thread-picker svg {
      width: 10px; height: 10px;
      flex: none;
      color: var(--ink-3);
      transition: transform var(--dur-instant, 120ms) var(--ease-out-quart, cubic-bezier(0.25,1,0.5,1));
    }
    .ask-column-thread-picker:hover,
    .ask-column-thread-picker[aria-expanded="true"] {
      color: var(--ink);
    }
    .ask-column-thread-picker[aria-expanded="true"] svg { transform: rotate(180deg); }
    .ask-column-thread-picker:focus-visible {
      outline: 2px solid var(--ink);
      outline-offset: 2px;
    }

    /* Header trailing buttons: overflow (⋯) + close (×). Both 28px.
       Overflow is muted so it reads as secondary to close. */
    .ask-column-overflow,
    .ask-column-close {
      width: 28px; height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 0;
      background: transparent;
      cursor: pointer;
      transition: color var(--dur-instant) var(--ease-out-quart);
      flex: none;
    }
    .ask-column-overflow { color: var(--ink-3); }
    .ask-column-close { color: var(--ink-2); }
    .ask-column-overflow:hover,
    .ask-column-close:hover { color: var(--ink); }
    .ask-column-overflow:focus-visible,
    .ask-column-close:focus-visible {
      outline: 2px solid var(--ink);
      outline-offset: 2px;
    }
    .ask-column-close svg { width: 12px; height: 12px; }
    /* ⋯ is the one filled glyph in the UI family — stroked dots at 14×14
       would look like tiny circles, not dots. Filled is the convention
       (Figma, Google, Linear all filled). */
    .ask-column-overflow svg { width: 14px; height: 14px; }

    /* Thread menu — dropdown opened by the picker. Positioned below the
       header, overlays the transcript while open. Reuses .app-side-thread
       row rendering + the "kind-dot, not cube" pattern from the retired
       rail flyout. */
    .ask-column-thread-menu {
      position: absolute;
      top: 40px;
      left: 0;
      right: 0;
      z-index: 4;
      max-height: 320px;
      display: flex;
      flex-direction: column;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      box-shadow: 0 4px 16px color-mix(in oklch, var(--ink) 10%, transparent);
      overflow: hidden;
      animation: ask-column-thread-menu-in var(--dur-instant, 150ms) var(--ease-out-quart, cubic-bezier(0.25,1,0.5,1)) both;
    }
    @keyframes ask-column-thread-menu-in {
      from { transform: translateY(-6px); opacity: 0; }
      to   { transform: translateY(0);    opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
      .ask-column-thread-menu { animation: none; }
    }
    .ask-column-thread-menu-head {
      display: flex; align-items: center; justify-content: space-between;
      padding: 8px 12px 8px 14px;
      background: var(--bg-alt);
      border-bottom: 1px solid var(--border);
      font-family: 'Martian Mono', monospace;
      font-size: 10px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink-3);
    }
    .ask-column-thread-menu-new {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 3px 8px 3px 6px;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--ink-2);
      font-family: inherit;
      font-size: inherit;
      letter-spacing: inherit;
      cursor: pointer;
      text-transform: none;
    }
    .ask-column-thread-menu-new:hover {
      color: var(--ink);
      border-color: var(--ink-3);
    }
    .ask-column-thread-menu-new svg { width: 10px; height: 10px; }
    .ask-column-thread-menu-list {
      overflow-y: auto;
      min-height: 0;
    }
    /* Menu rows — reuse .app-side-thread styling. The broad rail-collapse
       rule would hide them (since the menu lives inside .app-frame--ask-open
       / .studio-frame); override to re-show and swap the cube for a tiny
       kind-color dot (preserving "one cube, two homes" — sidebar + composer). */
    .app-frame--ask-open .ask-column-thread-menu-list .app-side-thread,
    .studio-frame .ask-column-thread-menu-list .app-side-thread {
      display: grid;
      padding: 10px 14px 10px 14px;
      grid-template-columns: 10px 1fr auto;
      column-gap: 10px;
    }
    /* Toolbox meta is hidden by default (the full-sidebar thread rows stay
       as single-line title+time). Only the header dropdown menu shows it. */
    .app-side-thread-toolbox { display: none; }

    /* Toolbox meta line — muted mono sub-text below the title, so each
       thread row shows which toolbox it's using. Secondary to the title;
       set-once on thread creation, changed via the overflow menu. */
    .ask-column-thread-menu-list .app-side-thread-toolbox {
      display: block;
      grid-column: 2;
      grid-row: 2;
      margin-top: 1px;
      font-family: var(--font-mono, 'Martian Mono', monospace);
      font-size: 10.5px;
      letter-spacing: 0.02em;
      color: var(--ink-3);
    }
    .ask-column-thread-menu-list .app-side-thread-body {
      grid-column: 2;
      grid-row: 1;
    }
    .ask-column-thread-menu-list .app-side-thread-time {
      grid-column: 3;
      grid-row: 1;
      align-self: start;
    }
    .ask-column-thread-menu-list .app-side-thread-cube { visibility: hidden; }
    .ask-column-thread-menu-list .app-side-thread.is-active {
      background: color-mix(in oklch, var(--kind-figment) 6%, var(--surface));
      box-shadow: inset 2px 0 0 var(--kind-figment);
    }
    .ask-column-thread-menu-list .app-side-thread.is-active .app-side-thread-cube {
      visibility: visible;
      width: 10px; height: 10px;
      display: inline-block;
      background: transparent;
    }
    .ask-column-thread-menu-list .app-side-thread.is-active .app-side-thread-cube::before {
      content: "";
      display: block;
      width: 6px; height: 6px;
      margin: 2px;
      background: var(--kind-figment);
    }
    .ask-column-thread-menu-list .app-side-thread.is-active .app-side-thread-cube svg {
      display: none;
    }
    @keyframes ask-column-slide {
      from { transform: translateX(-24px); opacity: 0; }
      to   { transform: translateX(0);     opacity: 1; }
    }
    /* Cube travel: when the chat unfurls, the cube enters from the rail
       position on the left and settles into its sub-bar send slot on the
       right. The real impl uses a shared-element transition to hand the
       cube off between sidebar row and composer. */
    .app-frame--ask-open .ask-subbar .ask-bar-glyph {
      animation: cube-travel var(--dur-base, 220ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
    }
    @keyframes cube-travel {
      /* The cube lands on the right of the sub-bar (bottom-right of the
         composer). Its origin is the 22px cube in the expanded-sidebar
         thread row, roughly 340px to the left of the final position at
         1440px viewport. -320 reads as "came from the sidebar" without
         physics-level accuracy. scale(0.69) = 22/32, mirroring the size
         difference at the endpoints. */
      from { transform: translateX(-320px) scale(0.69); opacity: 0; }
      to   { transform: translateX(0)      scale(1);    opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
      .ask-column { animation: none; }
      .app-frame--ask-open .ask-subbar .ask-bar-glyph { animation: none; }
    }
    .ask-column-body {
      flex: 1 1 0;
      display: flex; flex-direction: column;
      /* 14px between turns — wide enough that each message reads as a
         separate speaker without feeling like separate conversations. */
      gap: 14px;
      padding: 14px 16px;
      overflow-y: auto;
      min-height: 0;
    }
    /* Input row inside the chat column: pure text, full width. Action
       glyphs (add, send) live in .ask-subbar below. */
    .ask-bar--in-column {
      position: relative;
      left: auto; right: auto; bottom: auto;
      grid-template-columns: 1fr;
      border-top: 1px solid var(--border);
      padding: 0 14px;
    }

    /* When .ask-bar-glyph is a <button> (cube-as-send), reset button chrome
       and layer the arrow on top of the cube, opacity-swapping on hover. */
    button.ask-bar-glyph {
      position: relative;
      padding: 0;
      background: transparent;
      border: 0;
      color: var(--ink);
      cursor: pointer;
    }
    button.ask-bar-glyph:focus-visible {
      outline: 2px solid var(--ink);
      outline-offset: 2px;
    }
    .ask-bar-glyph .cc-send-arrow {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity var(--dur-quick, 180ms) var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
      pointer-events: none;
    }
    .ask-bar-glyph .cc-send-arrow svg {
      width: 20px; height: 20px;
    }
    /* Status cube fades out + arrow fades in when composer has content ready
       to send. The `data-ready="true"` signal is set on the .ask-composer
       wrapper by the composer's draft state — if empty, the cube stays in
       its status role and doesn't morph (clicking an empty composer has
       nothing to send). */
    .ask-composer[data-ready="true"] button.ask-bar-glyph:hover .cc-send-arrow,
    .ask-composer[data-ready="true"] button.ask-bar-glyph:focus-visible .cc-send-arrow {
      opacity: 1;
    }
    .ask-composer[data-ready="true"] button.ask-bar-glyph:hover .cc-cube-svg,
    .ask-composer[data-ready="true"] button.ask-bar-glyph:focus-visible .cc-cube-svg {
      opacity: 0;
    }
    .ask-bar-glyph .cc-cube-svg {
      transition: opacity var(--dur-quick, 180ms) var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
    }
    @media (prefers-reduced-motion: reduce) {
      .ask-bar-glyph .cc-send-arrow,
      .ask-bar-glyph .cc-cube-svg { transition: none; }
    }

    /* ─── Named tiles for the live-link demo ─── */
    .app-grid--named {
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
      padding: 0;
    }
    .app-tile-named {
      position: relative;
      background: var(--surface);
      display: grid;
      grid-template-rows: 1fr auto;
      min-height: 120px;
      transition:
        opacity var(--dur-base, 220ms) var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
        transform var(--dur-base, 220ms) var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
    }
    .app-tile-named-art {
      background-image: repeating-linear-gradient(
        135deg,
        color-mix(in oklch, var(--ink) 8%, transparent) 0 6px,
        transparent 6px 12px
      );
      border-bottom: 1px solid var(--border);
    }
    .app-tile-named-art[data-kind="figment"]  { background-color: color-mix(in oklch, var(--kind-figment) 14%, var(--surface)); }
    .app-tile-named-art[data-kind="workflow"] { background-color: color-mix(in oklch, var(--kind-workflow) 14%, var(--surface)); }
    .app-tile-named-art[data-kind="board"]    { background-color: color-mix(in oklch, var(--kind-board) 14%, var(--surface)); }
    .app-tile-named-body {
      padding: 10px 12px;
      display: flex; flex-direction: column; gap: 2px;
    }
    .app-tile-named-title {
      font-family: 'Onest', sans-serif;
      font-size: 13px;
      font-weight: 600;
      color: var(--ink);
      letter-spacing: -0.005em;
    }
    .app-tile-named-meta {
      font-family: 'Martian Mono', monospace;
      font-size: 10px;
      color: var(--ink-3);
      letter-spacing: 0.02em;
    }

    /* When another tile is cited, dim the rest to push focus forward */
    .app-grid--named:has(.app-tile-named.is-cited) .app-tile-named:not(.is-cited) {
      opacity: 0.55;
    }

    /* The cited tile — outlined in kind color, marker pulsing */
    .app-tile-named.is-cited {
      outline: 2px solid var(--kind-figment);
      outline-offset: -2px;
      box-shadow: 0 0 0 4px color-mix(in oklch, var(--kind-figment) 14%, transparent);
      z-index: 1;
      animation: ask-tile-focus 2.4s ease-in-out infinite;
    }
    @keyframes ask-tile-focus {
      0%, 100% { box-shadow: 0 0 0 4px color-mix(in oklch, var(--kind-figment) 14%, transparent); }
      50%      { box-shadow: 0 0 0 7px color-mix(in oklch, var(--kind-figment) 8%,  transparent); }
    }
    .app-tile-cite-mark {
      position: absolute;
      top: 8px; right: 8px;
      width: 18px; height: 18px;
      display: inline-flex; align-items: center; justify-content: center;
      background: var(--kind-figment);
      color: var(--surface);
      font-family: 'Martian Mono', monospace;
      font-size: 10px;
      font-weight: 600;
      z-index: 2;
    }

    /* Chat-side citation — underlined with the kind color, footnote number */
    .ask-cite {
      display: inline-flex;
      align-items: baseline;
      gap: 3px;
      color: var(--ink);
      text-decoration: none;
      font-weight: 600;
      padding-bottom: 1px;
      border-bottom: 1.5px solid var(--kind-figment);
      cursor: pointer;
      transition: background var(--dur-instant, 120ms) var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
    }
    .ask-cite:hover {
      background: color-mix(in oklch, var(--kind-figment) 14%, transparent);
    }
    .ask-cite-mark {
      display: inline-flex;
      align-items: center; justify-content: center;
      width: 14px; height: 14px;
      background: var(--kind-figment);
      color: var(--surface);
      font-family: 'Martian Mono', monospace;
      font-size: 8.5px;
      font-weight: 600;
      vertical-align: super;
      transform: translateY(-1px);
    }
    .ask-msg--you .ask-cite { color: var(--surface); border-bottom-color: color-mix(in oklch, var(--kind-figment) 70%, var(--surface)); }
    .ask-msg--you .ask-cite-mark { background: var(--surface); color: var(--kind-figment); }
    @media (prefers-reduced-motion: reduce) {
      .app-tile-named.is-cited { animation: none; }
    }

    /* Ask bar — the composer row inside the chat column. No longer a welded
       bottom bar; the column provides its own positioning context. */
    .ask-bar {
      height: 44px;
      display: grid;
      grid-template-columns: 40px 1fr auto auto;
      align-items: center;
      gap: 14px;
      padding: 0 14px 0 10px;
      background: var(--surface);
      border-top: 1px solid var(--border);
    }
    /* (Retired: .ask-bar--focused ink-bar treatment. With the composer living
        inside the chat column as the only input surface, there's nothing to
        distinguish it from — the focused state no longer needs its own
        visual weight, and the heavy ink bar broke line-weight consistency
        with the rail's 1px dividers.) */
    .ask-bar--focused { background: var(--surface); }
    .ask-bar-glyph {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px; height: 20px;
      color: var(--ink);
    }
    .ask-bar-glyph svg { width: 32px; height: 20px; display: block; }

    /* Cubic variant — square, 32×32 cube glyph replacing the old signal-flow */
    .ask-bar-glyph--cubic {
      width: 32px; height: 32px;
    }
    .ask-bar-glyph--cubic svg {
      width: 32px !important;
      height: 32px !important;
      overflow: visible;
    }
    /* (Retired: .ask-flow-* — signal-flow replaced by cubic kit.) */

    /* (Retired: .ask-bar-placeholder, .ask-bar-kbd, .ask-bar-context* — the
        collapsed bottom bar that showed a muted placeholder + ⌘/ is gone. The
        assistant is summoned from the Threads list in the sidebar; the only
        composer surface now is inside the chat column. See .ask-bar--in-column
        and .app-side-thread.is-active.) */

    .ask-bar-input {
      font-size: 13.5px;
      color: var(--ink);
      letter-spacing: -0.005em;
      display: flex;
      align-items: center;
      min-width: 0;
      /* Single line; long placeholders truncate instead of wrapping and
         overflowing into the sub-bar below. The real impl uses <input>
         which gets this behavior natively; the mock needs the rules. */
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .ask-bar-caret {
      display: inline-block;
      width: 2px; height: 14px;
      margin-left: 1px;
      background: var(--ink);
      animation: ask-caret-blink 1.05s steps(2, end) infinite;
    }
    @keyframes ask-caret-blink {
      50% { opacity: 0; }
    }
    /* (Retired: .ask-bar-send — the cube now doubles as the send target.
        See .ask-bar-glyph when rendered as a <button>, with .cc-send-arrow
        as the hover-morph overlay.) */

    /* ─── Composer sub-bar ───
       Below the primary input row: left-side "+" opens the add menu
       (attach, reference a figment, pick a workflow, etc.); an optional
       kind-dotted context chip shows what the assistant is attending to
       and can be dismissed; the toolbox/model selector sits right-flush.
       Total composer height when the sub-bar is present: ~84px
       (44 input row + 40 sub-bar). */
    .ask-composer {
      display: flex;
      flex-direction: column;
      background: var(--surface);
    }
    /* Horizontal 14px matches .ask-bar--in-column — + glyph aligns with the
       input row's left edge, cube-send aligns with the input row's right
       edge. Explicit height: 44px (content-box) matches .ask-bar exactly,
       so sub-bar total = 45px (44 + 1 border) matches the input row's 45px
       total — their borders line up at frame_bottom - 45 and frame_bottom
       - 90, matching the rail's avatar + threads-btn stack on the left.
       align-items: center vertically centers the 32px children within the
       44px content area (6px above/below — same visual as the old padding). */
    .ask-subbar {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 14px;
      border-top: 1px solid var(--border-light, var(--border));
      height: 44px;
    }
    /* Add button sized to match the cube-send's 32px footprint, so the
       action row reads as "two equal-weight glyphs at the margins" rather
       than "primary + secondary." The border + surface-chip treatment
       still distinguishes + (static) from cube (animated). */
    .ask-subbar-add {
      width: 32px; height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--ink-2);
      cursor: pointer;
      transition: color var(--dur-instant, 120ms) var(--ease-out-quart, cubic-bezier(0.25,1,0.5,1)),
                  border-color var(--dur-instant, 120ms) var(--ease-out-quart, cubic-bezier(0.25,1,0.5,1));
    }
    .ask-subbar-add:hover { border-color: var(--ink-3); color: var(--ink); }
    .ask-subbar-add:focus-visible {
      outline: 2px solid var(--ink);
      outline-offset: 2px;
    }
    .ask-subbar-add svg { width: 12px; height: 12px; }

    .ask-subbar-spacer { flex: 1; }

    /* When the cube-send lives in the sub-bar (not the input row), it sits
       flex-aligned on the right. The base .ask-bar-glyph--cubic sizing
       (32×32) already fits the 40px sub-bar height with room. */
    .ask-subbar .ask-bar-glyph { flex: 0 0 32px; }

    /* (Retired: .ask-subbar-chip, .ask-subbar-model — inline citations inside
        chat messages handle the "what the assistant is attending to" signal
        better than a pinned chip, and model/toolbox choice belongs at session
        level, not on every composer row.) */

    /* ─── UI glyphs (supplementary to the cubic kit) ───
       Arrow + cross glyphs drawn on the same grid as the cube: 14×14 viewBox
       with 2px stroke, round caps + joins. Shared treatment keeps the
       composer's send arrow, the × close, the sub-bar's "+" and ×, and any
       other single-stroke UI glyph reading as one family. The cubic kit
       owns assistant identity (stateful); these UI glyphs own verbs
       (static icons on buttons). Don't invent new stroke weights per
       context — 2px is the whole family's handshake. */

    /* Expanded panel — rises above the bar */
    /* (Retired: .ask-panel*, .ask-panel-head, .ask-panel-body, .ask-panel-context,
        @keyframes ask-panel-rise — the bottom-up panel was replaced by the right
        chat column layout. .ask-panel-thread and .ask-panel-x kept below; they
        moved into the column header.) */
    .ask-panel-thread {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 12.5px; font-weight: 500;
      color: var(--ink);
      cursor: pointer;
    }
    .ask-panel-thread svg { width: 10px; height: 10px; color: var(--ink-3); }
    .ask-panel-x {
      margin-left: auto;
      width: 24px; height: 24px;
      display: inline-flex; align-items: center; justify-content: center;
      border: 0;
      background: transparent;
      color: var(--ink-3);
      cursor: pointer;
    }
    .ask-panel-x:hover { color: var(--ink); }
    .ask-panel-x svg { width: 11px; height: 11px; }
    .ask-msg { display: grid; gap: 4px; max-width: 80%; }
    .ask-msg--you { justify-self: end; text-align: right; }
    .ask-msg--assistant { justify-self: start; }
    .ask-msg-role {
      font-family: 'Martian Mono', monospace;
      font-size: 9px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink-3);
    }
    .ask-msg-bubble {
      display: inline-block;
      padding: 7px 10px;
      font-size: 12.5px;
      line-height: 1.45;
      background: var(--bg-alt);
      border: 1px solid var(--border-2);
      color: var(--ink);
    }
    .ask-msg--you .ask-msg-bubble {
      background: var(--ink);
      color: var(--surface);
      border-color: var(--ink);
    }

    /* Anatomy callouts */
    .ask-anatomy {
      display: grid;
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
      margin-top: 4px;
    }
    .ask-anatomy-row {
      display: grid;
      grid-template-columns: 160px 1fr;
      gap: 18px;
      align-items: baseline;
      padding: 14px 20px;
      background: var(--surface);
    }
    .ask-anatomy-label {
      font-family: 'Martian Mono', monospace;
      font-size: 11px;
      color: var(--ink);
      letter-spacing: 0.01em;
    }
    .ask-anatomy-body {
      font-size: 12.5px;
      line-height: 1.55;
      color: var(--ink-2);
    }
    .ask-anatomy-body b { color: var(--ink); font-weight: 600; }
    .ask-anatomy-body code {
      font-family: 'Martian Mono', monospace;
      font-size: 11.5px;
      color: var(--ink);
    }
    .ask-anatomy-body kbd {
      font-family: 'Martian Mono', monospace;
      font-size: 10px;
      padding: 1px 5px;
      border: 1px solid var(--border-2);
      background: var(--bg-alt);
      color: var(--ink);
    }
    @media (max-width: 700px) {
      .ask-anatomy-row { grid-template-columns: 1fr; gap: 4px; }
      .ask-bar { grid-template-columns: 40px 1fr auto; gap: 10px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .ask-bar-caret { animation: none; }
    }

    /* (Retired: .shell-assistant-* — the old corner-unfolding panel is gone;
        the chat now lives as a right-side column via .ask-column*.) */

    /* ─── Glyphs section — catalog styling ─── */
    .glyph-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
    }
    .glyph-grid--kinds { grid-template-columns: repeat(4, 1fr); }
    .glyph-grid--ui    { grid-template-columns: repeat(4, 1fr); }
    @media (max-width: 900px) {
      .glyph-grid,
      .glyph-grid--kinds,
      .glyph-grid--ui { grid-template-columns: repeat(2, 1fr); }
    }
    .glyph-cell {
      background: var(--surface);
      padding: 20px 18px;
      display: grid;
      grid-template-rows: auto 1fr;
      gap: 14px;
      margin: 0;
    }
    .glyph-swatch {
      width: 48px; height: 48px;
      display: inline-flex; align-items: center; justify-content: center;
      border: 1px solid var(--border-2);
      background: var(--bg-alt);
      color: var(--ink);
    }
    .glyph-swatch svg { width: 24px; height: 24px; }
    .glyph-swatch--ink {
      background: var(--ink);
      color: var(--surface);
      border-color: var(--ink);
    }
    .glyph-cell[data-kind="figment"]  .glyph-swatch { color: var(--kind-figment); }
    .glyph-cell[data-kind="workflow"] .glyph-swatch { color: var(--kind-workflow); }
    .glyph-cell[data-kind="board"]    .glyph-swatch { color: var(--kind-board); }
    .glyph-cell[data-kind="integration"] .glyph-swatch { color: var(--kind-integration); }
    .glyph-cell[data-kind="identity"] .glyph-swatch { color: var(--kind-identity); }
    .glyph-cell[data-kind="document"] .glyph-swatch { color: var(--kind-document); }
    .glyph-cell[data-kind="memory"]   .glyph-swatch { color: var(--kind-memory); }
    .glyph-cell figcaption {
      display: grid;
      gap: 4px;
      align-content: start;
    }
    .glyph-name {
      font-family: 'Martian Mono', monospace;
      font-size: 11px;
      color: var(--ink);
      letter-spacing: 0.01em;
    }
    .glyph-role {
      font-size: 12.5px;
      line-height: 1.45;
      color: var(--ink-3);
    }
    .glyph-role code {
      font-family: 'Martian Mono', monospace;
      font-size: 10.5px;
      color: var(--ink-2);
    }
    .glyph-where {
      font-size: 11.5px;
      color: var(--ink-4);
      line-height: 1.4;
    }

    /* Candidates · chat mark proposal */
    .glyph-candidates {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
    }
    @media (max-width: 700px) {
      .glyph-candidates { grid-template-columns: 1fr; }
    }
    .glyph-candidate {
      background: var(--surface);
      padding: 28px 24px 24px;
      display: grid;
      grid-template-rows: auto 1fr;
      gap: 18px;
      margin: 0;
    }
    /* Every candidate mock is a two-state split (idle + active) */
    .glyph-candidate-mock {
      width: 148px; height: 64px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      background: var(--ink);
      color: var(--surface);
      justify-self: start;
      overflow: hidden;
    }
    .glyph-candidate-mock > .glyph-candidate-state {
      overflow: hidden;
      position: relative;
    }
    .glyph-candidate-mock > .glyph-candidate-state:first-child {
      box-shadow: inset -1px 0 0 color-mix(in oklch, var(--surface) 14%, transparent);
    }
    .glyph-candidate-mock svg { width: 28px; height: 28px; }
    /* (candidate width modifier no longer used — every cell is split by default) */
    .glyph-candidate-state {
      position: relative;
      display: flex; align-items: center; justify-content: center;
      color: var(--surface);
    }
    .glyph-candidate-state svg { width: 28px; height: 28px; }
    .glyph-candidate-state-label {
      position: absolute;
      bottom: 5px; left: 0; right: 0;
      text-align: center;
      font-family: 'Martian Mono', monospace;
      font-size: 7.5px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: color-mix(in oklch, var(--surface) 50%, transparent);
    }

    /* ─── Candidate animations — match §17 motion vocabulary ─── */

    /* 07 · Heartbeat — lift of anim-02 */
    .cm-heartbeat circle {
      fill: var(--red);
      transform-origin: center;
      transform-box: fill-box;
      animation: cm-heart 1.6s ease-out infinite;
    }
    @keyframes cm-heart {
      0%   { transform: scale(.7);  opacity: .25; }
      22%  { transform: scale(1.1); opacity: 1;   }
      48%  { transform: scale(.9);  opacity: .7;  }
      70%  { transform: scale(1.05);opacity: .95; }
      100% { transform: scale(.7);  opacity: .25; }
    }

    /* 08 · Signal flow — verbatim lift of anim-39 from §17 */
    .cm-flow {
      position: relative;
      display: block;
      width: 50px; height: 30px;
      flex: none;
    }
    .cm-flow > svg {
      width: 50px !important;
      height: 30px !important;
      display: block;
    }
    .cm-flow .cm-flow-track {
      fill: none;
      stroke: color-mix(in oklch, var(--surface) 30%, transparent);
      stroke-width: 0.8;
    }
    .cm-flow--active .cm-flow-p {
      offset-path: path('M 6 24 Q 24 4, 40 24 T 74 24');
      offset-rotate: 0deg;
      animation: cm-flow-travel 2.4s linear infinite;
    }
    .cm-flow--active .cm-flow-p1 { animation-delay: 0s;   fill: var(--red); }
    .cm-flow--active .cm-flow-p2 { animation-delay: .8s;  fill: var(--blue); }
    .cm-flow--active .cm-flow-p3 { animation-delay: 1.6s; fill: var(--kind-workflow); }
    @keyframes cm-flow-travel {
      0%   { offset-distance: 0%;   opacity: 0; }
      10%  { opacity: 1; }
      90%  { opacity: 1; }
      100% { offset-distance: 100%; opacity: 0; }
    }

    /* 09 · Frozen / working */
    .cm-idle rect { fill: var(--surface); }
    .cm-working .cm-working-d {
      transform-origin: center;
      transform-box: fill-box;
      animation: cm-working-bob 1.4s cubic-bezier(0.25, 1, 0.5, 1) infinite;
    }
    .cm-working .cm-working-d1 { fill: var(--red);           animation-delay: 0s;   }
    .cm-working .cm-working-d2 { fill: var(--kind-workflow); animation-delay: .22s; }
    .cm-working .cm-working-d3 { fill: var(--kind-board);    animation-delay: .44s; }
    @keyframes cm-working-bob {
      0%, 60%, 100% { transform: translateY(0)   scale(1);    opacity: .55; }
      18%           { transform: translateY(-2px) scale(1.15); opacity: 1;   }
      35%           { transform: translateY(1px) scale(.9);   opacity: .7;  }
    }

    /* 10 · Mono + status dot */
    .cm-status .cm-status-base { fill: var(--surface); }
    .cm-status .cm-status-dot {
      fill: var(--kind-workflow);
      transform-origin: 11px 3px;
      transform-box: view-box;
      animation: cm-status-pop 3.6s cubic-bezier(0.16, 1, 0.3, 1) infinite;
    }
    @keyframes cm-status-pop {
      0%, 12%  { transform: scale(0); opacity: 0; }
      22%      { transform: scale(1.3); opacity: 1; }
      32%      { transform: scale(1);   opacity: 1; }
      88%      { transform: scale(1);   opacity: 1; }
      100%     { transform: scale(.9);  opacity: 0; }
    }

    /* 01 · I-beam — blink */
    .cm-ibeam-active path { animation: cm-blink 1.1s steps(1, end) infinite; }
    @keyframes cm-blink {
      0%, 48%  { opacity: 1; }
      50%, 98% { opacity: 0.2; }
    }

    /* 02 · Ellipsis — wave bounce */
    .cm-ellipsis .cm-ellipsis-d {
      transform-origin: center;
      transform-box: fill-box;
      animation: cm-ellipsis-wave 1.2s cubic-bezier(0.25, 1, 0.5, 1) infinite;
    }
    .cm-ellipsis .cm-ellipsis-d1 { animation-delay: 0s;   }
    .cm-ellipsis .cm-ellipsis-d2 { animation-delay: .15s; }
    .cm-ellipsis .cm-ellipsis-d3 { animation-delay: .30s; }
    @keyframes cm-ellipsis-wave {
      0%, 60%, 100% { transform: translateY(0);   opacity: .55; }
      20%           { transform: translateY(-3px); opacity: 1;   }
      40%           { transform: translateY(1px);  opacity: .75; }
    }

    /* 03 · Speech brackets — dot pulses between */
    .cm-brackets-active .cm-brackets-dot {
      fill: var(--red);
      transform-origin: center;
      transform-box: fill-box;
      animation: cm-bracket-pulse 1.4s ease-out infinite;
    }
    @keyframes cm-bracket-pulse {
      0%, 100% { transform: scale(0);   opacity: 0; }
      18%      { transform: scale(1.3); opacity: 1; }
      40%      { transform: scale(1);   opacity: 1; }
      70%      { transform: scale(.9);  opacity: .7; }
    }

    /* 04 · Wordmark bars — VU meter */
    .cm-bars .cm-bars-l {
      animation: cm-vu 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
      transform-origin: bottom;
      transform-box: fill-box;
    }
    .cm-bars .cm-bars-l1 { animation-delay: 0s;   }
    .cm-bars .cm-bars-l2 { animation-delay: .1s;  }
    .cm-bars .cm-bars-l3 { animation-delay: .25s; }
    @keyframes cm-vu {
      0%, 100% { transform: scaleY(.35); }
      20%      { transform: scaleY(1);   }
      40%      { transform: scaleY(.55); }
      60%      { transform: scaleY(.85); }
    }

    /* 05 · Single dot — breathe */
    .cm-dot-idle rect { fill: var(--surface); opacity: .55; }
    .cm-dot-active .cm-dot-square {
      fill: var(--surface);
      transform-origin: center;
      transform-box: fill-box;
      animation: cm-breathe 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }
    @keyframes cm-breathe {
      0%, 100% { transform: scale(.55); opacity: .55; }
      50%      { transform: scale(1);   opacity: 1;   }
    }

    /* 06 · Speech rect — three dots typing inside */
    .cm-rect-active .cm-rect-d {
      transform-origin: center;
      transform-box: fill-box;
      animation: cm-rect-type 1.2s cubic-bezier(0.25, 1, 0.5, 1) infinite;
    }
    .cm-rect-active .cm-rect-d1 { animation-delay: 0s;   }
    .cm-rect-active .cm-rect-d2 { animation-delay: .15s; }
    .cm-rect-active .cm-rect-d3 { animation-delay: .30s; }
    @keyframes cm-rect-type {
      0%, 60%, 100% { transform: translateY(0); opacity: .4; }
      25%           { transform: translateY(-1px); opacity: 1; }
    }

    /* 07 · Heartbeat idle = dim */
    .cm-heart-idle circle { fill: var(--red); opacity: .35; }

    /* 08 · Signal flow idle track */
    .cm-flow-idle path { stroke: color-mix(in oklch, var(--surface) 30%, transparent); }

    /* 11 · Kind cycle (anim-03) */
    .cm-kind-idle rect { fill: var(--kind-figment); }
    .cm-kind-stage {
      position: relative;
      width: 28px; height: 28px;
      display: inline-block;
    }
    .cm-kind-stage .cm-kind-layer {
      position: absolute; inset: 0;
      width: 28px; height: 28px;
      opacity: 0;
      animation: cm-kind-swap 4.8s steps(4, end) infinite;
    }
    .cm-kind-stage .cm-kind-l1 { animation-delay: 0s;   }
    .cm-kind-stage .cm-kind-l2 { animation-delay: 1.2s; }
    .cm-kind-stage .cm-kind-l3 { animation-delay: 2.4s; }
    .cm-kind-stage .cm-kind-l4 { animation-delay: 3.6s; }
    .cm-kind-stage .cm-kind-l1 rect     { fill: var(--kind-figment);  }
    .cm-kind-stage .cm-kind-l2 polygon  { fill: var(--kind-workflow); }
    .cm-kind-stage .cm-kind-l3 rect     { fill: var(--kind-board);    }
    .cm-kind-stage .cm-kind-l4 polygon  { fill: var(--kind-integration); }
    @keyframes cm-kind-swap {
      0%   { opacity: 0; }
      2%   { opacity: 1; }
      25%  { opacity: 1; }
      27%  { opacity: 0; }
      100% { opacity: 0; }
    }

    /* 12 · Orbit (anim-33) */
    .cm-orbit-idle rect { fill: var(--surface); }
    .cm-orbit .cm-orbit-core { fill: var(--surface); }
    .cm-orbit .cm-orbit-p {
      transform-origin: 7px 7px;
      transform-box: view-box;
    }
    .cm-orbit .cm-orbit-p1 {
      fill: var(--red);
      animation: cm-orbit-rot 2.4s linear infinite;
    }
    .cm-orbit .cm-orbit-p2 {
      fill: var(--blue);
      animation: cm-orbit-rot-rev 3.6s linear infinite;
    }
    @keyframes cm-orbit-rot {
      from { transform: rotate(0deg)   translateX(4px) rotate(0deg); }
      to   { transform: rotate(360deg) translateX(4px) rotate(-360deg); }
    }
    @keyframes cm-orbit-rot-rev {
      from { transform: rotate(0deg)    translateX(5.5px) rotate(0deg); }
      to   { transform: rotate(-360deg) translateX(5.5px) rotate(360deg); }
    }

    /* 13 · Constellation settle (anim-21) */
    .cm-constellation-idle circle { fill: var(--surface); opacity: .7; }
    .cm-constellation .cm-const-node {
      fill: var(--red);
      transform-origin: center;
      transform-box: fill-box;
      animation: cm-const-node 4s ease-out infinite;
      opacity: 0;
    }
    .cm-constellation .cm-const-n1 { fill: var(--red);            animation-delay: 0s;   }
    .cm-constellation .cm-const-n2 { fill: var(--blue);           animation-delay: .3s;  }
    .cm-constellation .cm-const-n3 { fill: var(--kind-workflow);  animation-delay: .6s;  }
    @keyframes cm-const-node {
      0%, 5%  { transform: scale(0); opacity: 0; }
      15%     { transform: scale(1.3); opacity: 1; }
      22%     { transform: scale(1);   opacity: 1; }
      75%     { transform: scale(1);   opacity: 1; }
      90%     { transform: scale(1);   opacity: 0; }
      100%    { transform: scale(.8);  opacity: 0; }
    }
    .cm-constellation .cm-const-edge {
      stroke: color-mix(in oklch, var(--surface) 55%, transparent);
      stroke-width: 0.6;
      stroke-dasharray: 10;
      stroke-dashoffset: 10;
      animation: cm-const-edge 4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
    }
    .cm-constellation .cm-const-e1 { animation-delay: .8s;  }
    .cm-constellation .cm-const-e2 { animation-delay: 1.0s; }
    .cm-constellation .cm-const-e3 { animation-delay: 1.2s; }
    @keyframes cm-const-edge {
      0%, 15%  { stroke-dashoffset: 10; opacity: 0; }
      30%      { stroke-dashoffset: 0;  opacity: 1; }
      75%      { stroke-dashoffset: 0;  opacity: 1; }
      90%      { stroke-dashoffset: 0;  opacity: 0; }
      100%     { stroke-dashoffset: -10; opacity: 0; }
    }

    /* 14 · Breathing quad (anim-01) */
    .cm-quad-idle rect { fill: var(--surface); opacity: .6; }
    .cm-quad .cm-quad-c {
      transform-origin: center;
      transform-box: fill-box;
      animation: cm-quad-pulse 3.2s ease-in-out infinite;
    }
    .cm-quad .cm-quad-c1 { fill: var(--red);           animation-delay: 0s;   }
    .cm-quad .cm-quad-c2 { fill: var(--blue);          animation-delay: .8s;  }
    .cm-quad .cm-quad-c3 { fill: var(--kind-workflow); animation-delay: 1.6s; }
    .cm-quad .cm-quad-c4 { fill: var(--kind-board);    animation-delay: 2.4s; }
    @keyframes cm-quad-pulse {
      0%, 100% { transform: scale(.7); opacity: .4; }
      25%      { transform: scale(1);  opacity: 1;  }
      50%      { transform: scale(.85);opacity: .75;}
    }

    /* 15 · Beat + echo — pulse travels left-to-right, leaving fading trail */
    .cm-beatecho .cm-beatecho-d {
      fill: var(--red);
      transform-origin: center;
      transform-box: fill-box;
    }
    .cm-beatecho--idle .cm-beatecho-d {
      animation: cm-beatecho-idle 3s linear infinite;
    }
    .cm-beatecho--idle .cm-beatecho-d1 { animation-delay: 0s;   }
    .cm-beatecho--idle .cm-beatecho-d2 { animation-delay: .28s; }
    .cm-beatecho--idle .cm-beatecho-d3 { animation-delay: .56s; }
    .cm-beatecho--idle .cm-beatecho-d4 { animation-delay: .84s; }
    .cm-beatecho--idle .cm-beatecho-d5 { animation-delay: 1.12s;}
    @keyframes cm-beatecho-idle {
      0%   { opacity: 0;   transform: scale(0.7); }
      6%   { opacity: 1;   transform: scale(1.3); }
      14%  { opacity: .85; transform: scale(1.1); }
      50%  { opacity: .25; transform: scale(0.9); }
      100% { opacity: 0;   transform: scale(0.7); }
    }
    .cm-beatecho--streaming .cm-beatecho-d {
      animation: cm-beatecho-streaming 1.1s linear infinite;
    }
    .cm-beatecho--streaming .cm-beatecho-d1 { animation-delay: 0s;   }
    .cm-beatecho--streaming .cm-beatecho-d2 { animation-delay: .1s; }
    .cm-beatecho--streaming .cm-beatecho-d3 { animation-delay: .2s; }
    .cm-beatecho--streaming .cm-beatecho-d4 { animation-delay: .3s; }
    .cm-beatecho--streaming .cm-beatecho-d5 { animation-delay: .4s; }
    @keyframes cm-beatecho-streaming {
      0%   { opacity: .15; transform: scale(0.8); }
      14%  { opacity: 1;   transform: scale(1.5); }
      40%  { opacity: .55; transform: scale(1);   }
      100% { opacity: .15; transform: scale(0.8); }
    }

    /* 16 · Dot + anchor — static period + live heartbeat */
    .cm-anchor .cm-anchor-anchor {
      fill: var(--red);
      opacity: .5;
    }
    .cm-anchor .cm-anchor-live {
      fill: var(--red);
      transform-origin: center;
      transform-box: fill-box;
    }
    .cm-anchor--idle .cm-anchor-live {
      animation: cm-heart 1.6s ease-out infinite;
    }
    .cm-anchor--streaming .cm-anchor-live {
      animation: cm-heart 0.55s ease-out infinite;
    }

    /* 17 · Italic period — slanted comma-shape pulses */
    .cm-italic .cm-italic-dot {
      fill: var(--red);
      transform-origin: center;
      transform-box: fill-box;
    }
    .cm-italic--idle .cm-italic-dot {
      animation: cm-heart 1.6s ease-out infinite;
    }
    .cm-italic--streaming .cm-italic-dot {
      animation: cm-heart 0.55s ease-out infinite;
    }

    /* ════════ Thread family 18–27 ════════ */

    /* Shared thread stroke defaults */
    .cm-weave path,
    .cm-taut .cm-taut-line,
    .cm-loop .cm-loop-path,
    .cm-stitch .cm-stitch-track,
    .cm-stitch .cm-stitch-line,
    .cm-tangle .cm-tangle-line,
    .cm-trace .cm-trace-line,
    .cm-zigzag .cm-zigzag-track,
    .cm-zigzag .cm-zigzag-packet,
    .cm-cube .cm-cube-cube,
    .cm-cube .cm-cube-thread,
    .cm-fold .cm-fold-path,
    .cm-meet .cm-meet-a,
    .cm-meet .cm-meet-b {
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* 18 · Thread weave */
    .cm-weave .cm-weave-a { stroke: var(--red);  stroke-width: 1.2; }
    .cm-weave .cm-weave-b { stroke: var(--blue); stroke-width: 1.2; opacity: .6; }
    .cm-weave--streaming .cm-weave-a,
    .cm-weave--streaming .cm-weave-b {
      animation: cm-weave-drift 1.4s ease-in-out infinite alternate;
    }
    .cm-weave--streaming .cm-weave-b { animation-delay: .2s; }
    @keyframes cm-weave-drift {
      from { transform: translateX(-1px); }
      to   { transform: translateX(1px); }
    }

    /* 19 · Taut thread */
    .cm-taut .cm-taut-end { fill: var(--ink); }
    .cm-taut .cm-taut-line { stroke: var(--ink); stroke-width: 1.1; }
    .cm-taut--idle .cm-taut-line {
      animation: cm-taut-sag 3.2s ease-in-out infinite alternate;
    }
    @keyframes cm-taut-sag {
      from { d: path("M 2 7 Q 16 10, 30 7"); }
      to   { d: path("M 2 7 Q 16 11, 30 7"); }
    }
    .cm-taut--streaming .cm-taut-line {
      stroke: var(--red);
      animation: cm-taut-vibrate 0.14s linear infinite alternate;
    }
    @keyframes cm-taut-vibrate {
      from { transform: translateY(-0.5px); }
      to   { transform: translateY(0.5px); }
    }

    /* 20 · Endless loop */
    .cm-loop .cm-loop-path {
      stroke: var(--ink);
      stroke-width: 1.2;
      stroke-dasharray: 3 2;
    }
    .cm-loop--streaming .cm-loop-path {
      stroke: var(--kind-workflow);
      animation: cm-loop-march 1.4s linear infinite;
    }
    @keyframes cm-loop-march {
      from { stroke-dashoffset: 0; }
      to   { stroke-dashoffset: -10; }
    }

    /* 21 · Thought stitch */
    .cm-stitch .cm-stitch-track {
      stroke: color-mix(in oklch, var(--surface) 30%, transparent);
      stroke-width: 1.6;
      stroke-dasharray: 2 2;
    }
    .cm-stitch .cm-stitch-line {
      stroke: var(--kind-board);
      stroke-width: 1.6;
      stroke-dasharray: 2 30;
      stroke-dashoffset: 0;
    }
    .cm-stitch--streaming .cm-stitch-line {
      animation: cm-stitch-sew 2s linear infinite;
    }
    @keyframes cm-stitch-sew {
      0%   { stroke-dasharray: 0 30;  stroke-dashoffset: 0; }
      40%  { stroke-dasharray: 28 2;  stroke-dashoffset: 0; }
      50%  { stroke-dasharray: 28 2;  stroke-dashoffset: 0; opacity: 1; }
      60%  { stroke-dasharray: 28 2;  stroke-dashoffset: 0; opacity: 1; }
      100% { stroke-dasharray: 28 2;  stroke-dashoffset: -30; opacity: 0; }
    }

    /* 22 · Tangled node */
    .cm-tangle .cm-tangle-line {
      stroke: var(--ink);
      stroke-width: 1.3;
    }
    .cm-tangle--streaming .cm-tangle-line {
      stroke: var(--red);
      stroke-dasharray: 50;
      stroke-dashoffset: 50;
      animation: cm-tangle-draw 3s ease-in-out infinite;
    }
    @keyframes cm-tangle-draw {
      0%   { stroke-dashoffset: 50; }
      50%  { stroke-dashoffset: 0; }
      100% { stroke-dashoffset: -50; }
    }

    /* 23 · Data trace */
    .cm-trace .cm-trace-grid {
      fill: color-mix(in oklch, var(--ink) 30%, transparent);
    }
    .cm-trace .cm-trace-line {
      stroke: var(--ink);
      stroke-width: 1.2;
    }
    .cm-trace .cm-trace-end { fill: var(--ink); }
    .cm-trace--streaming .cm-trace-line {
      stroke: var(--kind-figment);
      stroke-dasharray: 40;
      stroke-dashoffset: 40;
      animation: cm-trace-route 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }
    @keyframes cm-trace-route {
      0%   { stroke-dashoffset: 40; }
      60%  { stroke-dashoffset: 0; }
      100% { stroke-dashoffset: -40; }
    }

    /* 24 · Zigzag pulse */
    .cm-zigzag .cm-zigzag-track {
      stroke: color-mix(in oklch, var(--ink) 25%, transparent);
      stroke-width: 1.2;
    }
    .cm-zigzag .cm-zigzag-packet {
      stroke: var(--red);
      stroke-width: 2;
    }
    .cm-zigzag--idle .cm-zigzag-packet { display: none; }
    .cm-zigzag--streaming .cm-zigzag-packet {
      animation: cm-zigzag-pulse 1.2s linear infinite;
    }
    @keyframes cm-zigzag-pulse {
      0%   { stroke-dasharray: 0 80; stroke-dashoffset: 0; opacity: 1; }
      100% { stroke-dasharray: 0 80; stroke-dashoffset: -60; opacity: 0; }
    }

    /* 25 · Cubic wrap */
    .cm-cube .cm-cube-cube {
      stroke: color-mix(in oklch, var(--ink) 35%, transparent);
      stroke-width: 1;
    }
    .cm-cube .cm-cube-thread {
      stroke: var(--kind-workflow);
      stroke-width: 1.6;
    }
    .cm-cube--streaming .cm-cube-thread {
      stroke-dasharray: 80;
      stroke-dashoffset: 80;
      animation: cm-cube-wrap 2.8s ease-in-out infinite;
    }
    @keyframes cm-cube-wrap {
      0%   { stroke-dashoffset: 80; }
      50%  { stroke-dashoffset: 0; }
      100% { stroke-dashoffset: -80; }
    }

    /* 26 · Square fold */
    .cm-fold .cm-fold-path {
      stroke: var(--kind-board);
      stroke-width: 1.5;
    }
    .cm-fold--streaming .cm-fold-path {
      stroke-dasharray: 140;
      stroke-dashoffset: 140;
      animation: cm-fold-inward 3s cubic-bezier(0.22, 1, 0.36, 1) infinite;
    }
    @keyframes cm-fold-inward {
      0%   { stroke-dashoffset: 140; }
      70%  { stroke-dashoffset: 0; }
      100% { stroke-dashoffset: -140; }
    }

    /* 27 · Digital meet */
    .cm-meet .cm-meet-a { stroke: var(--red);  stroke-width: 1.4; }
    .cm-meet .cm-meet-b { stroke: var(--blue); stroke-width: 1.4; }
    .cm-meet--streaming .cm-meet-a,
    .cm-meet--streaming .cm-meet-b {
      stroke-dasharray: 20;
      animation: cm-meet-approach 1.6s ease-in-out infinite alternate;
    }
    .cm-meet--streaming .cm-meet-a { animation-name: cm-meet-approach-a; }
    .cm-meet--streaming .cm-meet-b { animation-name: cm-meet-approach-b; }
    @keyframes cm-meet-approach-a {
      from { stroke-dashoffset: 20; }
      to   { stroke-dashoffset: 0; }
    }
    @keyframes cm-meet-approach-b {
      from { stroke-dashoffset: 20; }
      to   { stroke-dashoffset: 0; }
    }

    /* ════════ Cubic size-survival rail ════════ */
    .cubic-rail {
      display: grid;
      grid-template-columns: 160px 1fr 1fr 1fr 1fr;
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
    }
    .cubic-rail-head {
      display: contents;
    }
    .cubic-rail-head > span {
      background: var(--bg-alt);
      padding: 12px 14px;
      font-family: 'Martian Mono', monospace;
      font-size: 10px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink-3);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .cubic-rail-head .cubic-rail-corner {
      justify-content: flex-start;
    }
    .cubic-rail-label {
      background: var(--bg-alt);
      padding: 18px 16px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      justify-content: center;
    }
    .cubic-rail-state {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 14px;
      font-weight: 600;
      color: var(--ink);
      letter-spacing: -0.01em;
    }
    .cubic-rail-name {
      font-family: 'Martian Mono', monospace;
      font-size: 10px;
      color: var(--ink-3);
    }
    .cubic-rail-cell {
      background: var(--surface);
      padding: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 120px;
    }
    /* Per-size SVG rendering — overrides the catalog's 88px cubic default */
    .cubic-rail-cell[data-size="24"] svg { width: 24px !important; height: 24px !important; overflow: visible; }
    .cubic-rail-cell[data-size="32"] svg { width: 32px !important; height: 32px !important; overflow: visible; }
    .cubic-rail-cell[data-size="48"] svg { width: 48px !important; height: 48px !important; overflow: visible; }
    .cubic-rail-cell[data-size="88"] svg { width: 88px !important; height: 88px !important; overflow: visible; }

    /* Kit-star inline highlight */
    .glyph-kit-star {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 8px;
      background: var(--ink);
      color: var(--surface);
      font-family: 'Martian Mono', monospace;
      font-size: 10.5px;
      letter-spacing: 0.02em;
      margin: 0 2px;
    }

    /* ════════ Cubic kit 28–39 — cube is identity, each state is a verb ════════
       Google brand palette → Figments signal vars. */

    /* Cubic SVGs render at 88×88 (matching Gemini's 100px canvas proportions
       on viewBox 60) so stroke weights read correctly. */
    .glyph-candidate-state .cc-base,
    .glyph-candidate-state .cc-ghost,
    .glyph-candidate-state .cc-core,
    .glyph-candidate-state .cc-drift,
    .glyph-candidate-state .cc-vertex,
    .glyph-candidate-state .cc-construct,
    .glyph-candidate-state .cc-step,
    .glyph-candidate-state .cc-orbit,
    .glyph-candidate-state .cc-uplink,
    .glyph-candidate-state .cc-gyro,
    .glyph-candidate-state .cc-unspool,
    .glyph-candidate-state .cc-facet,
    .glyph-candidate-state .cc-hex {
      width: 88px;
      height: 88px;
      overflow: visible;
    }

    /* Auto-collapse cubic cards to single-mock layout, and give them
       taller cells so the cube can render at Gemini's intended 1.67× scale
       (viewBox 60 at 100px canvas). 52px was crushing the stroke weights. */
    .glyph-candidate-mock:has(.cc-base) {
      grid-template-columns: 1fr;
      height: 120px;
    }
    .glyph-candidate-mock:has(.cc-base) > .glyph-candidate-state:first-child {
      display: none;
    }
    .glyph-candidate-mock:has(.cc-base) > .glyph-candidate-state:first-child ~ .glyph-candidate-state {
      box-shadow: none;
    }

    /* Shared cube primitives — stroke-linejoin: round (match Gemini original) */
    .cc-base,
    .cc-base polygon,
    .cc-base polyline {
      stroke: var(--border);
      stroke-width: 1;
      stroke-linejoin: round;
      fill: none;
    }
    .cc-frame {
      stroke: var(--border);
      stroke-width: 1;
      fill: none;
      stroke-linejoin: round;
    }
    .cc-frame-faint {
      stroke: var(--border);
      stroke-width: 1;
      fill: none;
      stroke-linejoin: round;
      opacity: 0.35;
    }

    /* 28 · Ghost trace */
    .cc-ghost-trace {
      fill: none;
      stroke: var(--ink-3);
      stroke-width: 2;
      stroke-linejoin: round;
      stroke-dasharray: 80;
      animation: cc-ghost-trace 4s ease-in-out infinite;
    }
    .cc-ghost-b { animation-delay: -2s; }
    @keyframes cc-ghost-trace {
      0%, 100% { stroke-dashoffset: 80; opacity: 0; }
      50%      { stroke-dashoffset: 0;  opacity: 0.9; }
    }

    /* 29 · Core breathe */
    .cc-core-heart {
      fill: var(--ink-3);
      transform-origin: center;
      transform-box: fill-box;
      animation: cc-core-breathe 3.2s ease-in-out infinite;
    }
    @keyframes cc-core-breathe {
      0%, 100% { transform: scale(0.9); opacity: 0.25; }
      50%      { transform: scale(1.1); opacity: 0.8; }
    }

    /* 30 · Cubic drift */
    .cc-drift-cube {
      transform-origin: center;
      animation: cc-drift-float 4s ease-in-out infinite;
    }
    .cc-drift-frame {
      fill: var(--surface);
      stroke: var(--border-2, var(--border));
      stroke-width: 1.5;
      stroke-linejoin: round;
    }
    .cc-drift-cube polyline.cc-drift-frame { fill: none; }
    .cc-drift-shadow {
      fill: color-mix(in oklch, var(--ink) 25%, transparent);
      transform-origin: center;
      animation: cc-drift-shadow 4s ease-in-out infinite;
    }
    @keyframes cc-drift-float {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-4px); }
    }
    @keyframes cc-drift-shadow {
      0%, 100% { transform: scale(1);   opacity: 0.22; }
      50%      { transform: scale(0.8); opacity: 0.10; }
    }

    /* 31 · Vertex blink */
    .cc-vertex-d {
      fill: var(--ink-3);
      animation: cc-vertex-pop 1.5s infinite;
    }
    .cc-vertex-d1 { transform-origin: 17px 22px; transform-box: view-box; }
    .cc-vertex-d2 { transform-origin: 30px 15px; transform-box: view-box; animation-delay: 0.2s; }
    .cc-vertex-d3 { transform-origin: 43px 22px; transform-box: view-box; animation-delay: 0.4s; }
    @keyframes cc-vertex-pop {
      0%, 60%, 100% { transform: scale(0.5); opacity: 0.35; fill: var(--ink-3); }
      30%           { transform: scale(1.5); opacity: 1;    fill: var(--blue); }
    }

    /* 32 · Edge construct */
    .cc-construct-seg {
      fill: none;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 60;
      animation: cc-construct-trace 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }
    .cc-cs1 { stroke: var(--blue); animation-delay: 0s; }
    .cc-cs2 { stroke: var(--kind-workflow); animation-delay: 0.5s; }
    .cc-cs3 { stroke: var(--red); animation-delay: 1s; }
    @keyframes cc-construct-trace {
      0%, 10%  { stroke-dashoffset: 60; opacity: 1; }
      50%, 80% { stroke-dashoffset: 0;  opacity: 1; }
      90%,100% { stroke-dashoffset: 0;  opacity: 0; }
    }

    /* 33 · Step thread */
    .cc-step-thread {
      fill: none;
      stroke: var(--blue);
      stroke-width: 2;
      stroke-linecap: square;
      stroke-linejoin: miter;
      stroke-dasharray: 20 80;
      animation: cc-step-climb 2s linear infinite;
    }
    @keyframes cc-step-climb {
      0%       { stroke-dashoffset: 100; }
      50%,100% { stroke-dashoffset: -100; }
    }

    /* 34 · Orbit chase */
    .cc-orbit-chase {
      fill: none;
      stroke: var(--kind-workflow);
      stroke-width: 2.5;
      stroke-linejoin: round;
      stroke-dasharray: 40 80;
      animation: cc-orbit-chase 1.2s linear infinite;
    }
    @keyframes cc-orbit-chase {
      from { stroke-dashoffset: 120; }
      to   { stroke-dashoffset: 0; }
    }

    /* 35 · Data uplink */
    .cc-uplink-pkt {
      fill: none;
      stroke: var(--ink);
      stroke-width: 2;
      stroke-dasharray: 10 40;
      animation: cc-uplink-flow 1s linear infinite;
    }
    .cc-up1 { animation-delay: 0s; }
    .cc-up2 { animation-delay: -0.3s; }
    .cc-up3 { animation-delay: -0.6s; }
    @keyframes cc-uplink-flow {
      from { stroke-dashoffset: 50; }
      to   { stroke-dashoffset: -50; }
    }

    /* 36 · Inner gyro */
    .cc-gyro-arm {
      fill: none;
      stroke-linecap: round;
      stroke-width: 1.5;
      animation: cc-gyro-spin 0.6s infinite;
    }
    .cc-gyro-a1 { animation-delay: 0s; }
    .cc-gyro-a2 { animation-delay: 0.2s; }
    .cc-gyro-a3 { animation-delay: 0.4s; }
    .cc-gyro-core { fill: var(--ink); }
    @keyframes cc-gyro-spin {
      0%, 100% { stroke: var(--border); stroke-width: 1.5; }
      50%      { stroke: var(--red);    stroke-width: 2.5; }
    }

    /* 37 · Data unspool */
    .cc-unspool-w1,
    .cc-unspool-w2,
    .cc-unspool-w3 {
      fill: none;
      stroke-width: 1.5;
      stroke-linejoin: round;
    }
    .cc-unspool-w1 {
      stroke: var(--blue);
      stroke-dasharray: 50 250;
      animation: cc-unspool 2s linear infinite;
    }
    .cc-unspool-w2 {
      stroke: var(--red);
      stroke-dasharray: 80 220;
      animation: cc-unspool 2.5s linear infinite reverse;
    }
    .cc-unspool-w3 {
      stroke: var(--kind-workflow);
      stroke-dasharray: 30 270;
      animation: cc-unspool 1.5s linear infinite;
    }
    @keyframes cc-unspool {
      from { stroke-dashoffset: 300; }
      to   { stroke-dashoffset: 0; }
    }

    /* 38 · Facet fill */
    .cc-facet-face {
      animation: cc-facet-render 2s infinite;
    }
    .cc-ff1 { fill: var(--blue);           animation-delay: 0s; }
    .cc-ff2 { fill: var(--kind-board);     animation-delay: 0.3s; }
    .cc-ff3 { fill: var(--kind-workflow);  animation-delay: 0.6s; }
    @keyframes cc-facet-render {
      0%, 10%  { opacity: 0; }
      20%, 80% { opacity: 1; }
      90%,100% { opacity: 0; }
    }

    /* 39 · Hex burst */
    .cc-hex-ring {
      fill: none;
      stroke-linejoin: miter;
      transform-origin: center;
      transform-box: view-box;
      animation: cc-hex-ripple 2s ease-out infinite;
    }
    .cc-hr1 { stroke: var(--kind-board); }
    .cc-hr2 { stroke: var(--red); animation-delay: 0.6s; }
    .cc-hex-core { fill: var(--ink); }
    @keyframes cc-hex-ripple {
      0%   { transform: scale(0.25); opacity: 1; stroke-width: 3; }
      100% { transform: scale(1.8);  opacity: 0; stroke-width: 0.5; }
    }

    @media (prefers-reduced-motion: reduce) {
      .cm-heartbeat circle,
      .cm-flow .cm-flow-p,
      .cm-working .cm-working-d,
      .cm-status .cm-status-dot,
      .cm-ibeam-active path,
      .cm-ellipsis .cm-ellipsis-d,
      .cm-brackets-active .cm-brackets-dot,
      .cm-bars .cm-bars-l,
      .cm-dot-active .cm-dot-square,
      .cm-rect-active .cm-rect-d,
      .cm-kind-stage .cm-kind-layer,
      .cm-orbit .cm-orbit-p,
      .cm-constellation .cm-const-node,
      .cm-constellation .cm-const-edge,
      .cm-quad .cm-quad-c,
      .cm-beatecho .cm-beatecho-d,
      .cm-anchor .cm-anchor-live,
      .cm-italic .cm-italic-dot,
      .cm-weave .cm-weave-a,
      .cm-weave .cm-weave-b,
      .cm-taut .cm-taut-line,
      .cm-loop .cm-loop-path,
      .cm-stitch .cm-stitch-line,
      .cm-tangle .cm-tangle-line,
      .cm-trace .cm-trace-line,
      .cm-zigzag .cm-zigzag-packet,
      .cm-cube .cm-cube-thread,
      .cm-fold .cm-fold-path,
      .cm-meet .cm-meet-a,
      .cm-meet .cm-meet-b,
      .cc-ghost-trace,
      .cc-core-heart,
      .cc-drift-cube,
      .cc-drift-shadow,
      .cc-vertex-d,
      .cc-construct-seg,
      .cc-step-thread,
      .cc-orbit-chase,
      .cc-uplink-pkt,
      .cc-gyro-arm,
      .cc-unspool-w1,
      .cc-unspool-w2,
      .cc-unspool-w3,
      .cc-facet-face,
      .cc-hex-ring { animation: none; opacity: 1; }
    }
    .glyph-candidate figcaption {
      display: grid;
      gap: 6px;
      align-content: start;
    }
    .glyph-candidate-name {
      font-family: 'Martian Mono', monospace;
      font-size: 11px;
      color: var(--ink);
      letter-spacing: 0.01em;
    }
    .glyph-candidate-pros {
      font-size: 12.5px;
      line-height: 1.5;
      color: var(--ink-2);
    }
    .glyph-candidate-cons {
      font-size: 12px;
      line-height: 1.5;
      color: var(--ink-4);
      padding-top: 2px;
      border-top: 1px solid var(--border-2);
      margin-top: 4px;
    }

    /* Conventions rules */
    .glyph-rules {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
    }
    @media (max-width: 700px) {
      .glyph-rules { grid-template-columns: 1fr; }
    }
    .glyph-rule {
      background: var(--surface);
      padding: 24px 24px 20px;
      display: grid;
      grid-template-columns: 28px 1fr;
      gap: 14px;
      align-items: baseline;
    }
    .glyph-rule-no {
      font-family: 'Martian Mono', monospace;
      font-size: 13px;
      font-weight: 600;
      color: var(--ink);
    }
    .glyph-rule p {
      margin: 0;
      font-size: 13px;
      line-height: 1.55;
      color: var(--ink-2);
    }
    .glyph-rule p code {
      font-family: 'Martian Mono', monospace;
      font-size: 11.5px;
      color: var(--ink);
    }

    .app-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
    }
    .app-tile {
      background: var(--surface);
      display: grid;
      grid-template-rows: auto 1fr;
      cursor: pointer;
      transition: background 0.15s;
    }
    .app-tile:hover { background: var(--surface-2); }
    .app-tile-art {
      aspect-ratio: 4/3;
      background-size: cover;
      image-rendering: pixelated;
    }
    .app-tile-body {
      padding: 10px 12px;
      display: grid; gap: 4px;
    }
    .app-tile-title {
      font-family: 'Bricolage Grotesque', serif;
      font-weight: 700; font-size: 13px;
      letter-spacing: -0.01em;
      color: var(--ink);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .app-tile-meta {
      font-family: 'Martian Mono', monospace;
      font-size: 10px; font-weight: 500;
      color: var(--ink-3);
      display: flex; align-items: center; justify-content: space-between;
    }

    /* ═══════════ BLOCK ART STRIP ═══════════ */
    .art-strip {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
    }
    .art-cell {
      aspect-ratio: 1/1;
      background-size: cover;
      background-color: var(--surface);
      image-rendering: pixelated;
    }

    /* ═══════════ MOTION DEMO ═══════════ */
    .motion-row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
    }
    .motion-cell {
      background: var(--surface);
      padding: 20px;
      display: grid; gap: 12px;
    }
    .motion-label {
      font-family: 'Martian Mono', monospace;
      font-size: 11px; font-weight: 600;
      letter-spacing: 0.02em;
      color: var(--ink-3);
    }
    .motion-value {
      font-family: 'Bricolage Grotesque', serif;
      font-weight: 800; font-size: 24px;
      letter-spacing: -0.03em;
      color: var(--ink);
    }
    .motion-desc {
      font-size: 12px;
      line-height: 1.55;
      color: var(--ink-3);
    }

    /* ─── Motion tokens block ──────────────────────── */
    .motion-tokens {
      margin-top: 32px;
      border: 1px solid var(--border);
      background: var(--surface);
    }
    .motion-tokens-head {
      padding: 22px 24px 16px;
      border-bottom: 1px solid var(--border);
    }
    .motion-tokens-title {
      font-family: 'Bricolage Grotesque', serif;
      font-weight: 800; font-size: 22px;
      letter-spacing: -0.025em;
      color: var(--ink);
      margin-bottom: 10px;
    }
    .motion-tokens-desc {
      font-size: 13px;
      line-height: 1.6;
      color: var(--ink-2);
      max-width: 65ch;
    }
    .motion-tokens-desc code,
    .motion-tokens-note code {
      font-family: 'Martian Mono', monospace;
      font-size: 11.5px;
      background: var(--bg-alt);
      padding: 1px 6px;
      color: var(--ink);
    }
    .motion-tokens-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 1px;
      background: var(--border);
    }
    .motion-token {
      background: var(--surface);
      padding: 16px 20px 14px;
      display: grid; gap: 8px;
    }
    .motion-token-name {
      font-family: 'Martian Mono', monospace;
      font-size: 12px; font-weight: 600;
      letter-spacing: 0.02em;
      color: var(--ink);
    }
    .motion-token-value {
      font-family: 'Martian Mono', monospace;
      font-size: 10.5px;
      color: var(--ink-3);
      word-break: break-all;
    }
    .motion-token-use {
      font-size: 12px;
      line-height: 1.5;
      color: var(--ink-3);
    }
    .motion-tokens-note {
      padding: 14px 24px 18px;
      font-size: 12px;
      line-height: 1.55;
      color: var(--ink-3);
      border-top: 1px solid var(--border);
    }

    /* ═══════════ PRINCIPLES ═══════════ */
    .principles {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
    }
    .principle {
      background: var(--surface);
      padding: 24px 22px 26px;
    }
    .principle-num {
      font-family: 'Martian Mono', monospace;
      font-size: 10px; font-weight: 600;
      letter-spacing: 0.08em;
      color: var(--red);
      margin-bottom: 16px;
    }
    .principle-title {
      font-family: 'Bricolage Grotesque', serif;
      font-weight: 700; font-size: 17px;
      letter-spacing: -0.02em;
      color: var(--ink);
      margin-bottom: 8px;
      line-height: 1.2;
    }
    .principle-body {
      font-size: 13px;
      line-height: 1.6;
      color: var(--ink-2);
    }

    /* ═══════════ COLOPHON ═══════════ */
    .colophon {
      margin-top: 96px;
      padding: 32px 0 64px;
      border-top: 1px solid var(--border);
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 32px;
      align-items: end;
      font-family: 'Martian Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.01em;
      line-height: 1.7;
      color: var(--ink-3);
    }
    .colophon b { color: var(--ink); font-weight: 600; }

    /* ═══════════ KINDS (object identity palette) ═══════════ */
    :root, [data-theme="figments"] {
      --kind-figment: oklch(0.60 0.16 250);
      --kind-workflow: oklch(0.66 0.14 75);
      --kind-board: oklch(0.52 0.13 150);
      --kind-integration: oklch(0.55 0.18 300);
      --kind-identity: oklch(0.45 0.17 305);
      --kind-document: oklch(0.55 0 0);
      --kind-memory: oklch(0.56 0.20 25);
    }
    [data-theme="figments-dark"],
    [data-theme="midnight"],
    [data-theme="slate"] {
      --kind-figment: oklch(0.68 0.17 245);
      --kind-workflow: oklch(0.75 0.14 78);
      --kind-board: oklch(0.62 0.15 150);
      --kind-integration: oklch(0.65 0.19 300);
      --kind-identity: oklch(0.55 0.18 305);
      --kind-document: oklch(0.70 0 0);
      --kind-memory: oklch(0.65 0.20 25);
    }
    [data-theme="bone"] {
      --kind-figment: oklch(0.50 0.16 250);
      --kind-workflow: oklch(0.58 0.16 70);
      --kind-board: oklch(0.48 0.14 150);
      --kind-integration: oklch(0.45 0.18 305);
      --kind-identity: oklch(0.38 0.17 310);
      --kind-document: oklch(0.48 0.02 50);
      --kind-memory: oklch(0.52 0.20 30);
    }

    .kinds-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
    }
    .kinds-note {
      background: var(--bg-alt);
      padding: 22px;
      display: grid;
      align-content: center;
      gap: 10px;
      border-left: 1px solid var(--border);
    }
    .kinds-note-eyebrow {
      font-family: 'Martian Mono', monospace;
      font-size: 11px; font-weight: 600;
      letter-spacing: 0.02em;
      color: var(--ink-3);
      display: inline-flex; align-items: center; gap: 8px;
    }
    .kinds-note-eyebrow::before {
      content: ''; width: 12px; height: 1.5px; background: var(--red);
    }
    .kinds-note-body {
      font-family: 'Bricolage Grotesque', serif;
      font-weight: 600; font-size: 18px;
      line-height: 1.25;
      letter-spacing: -0.015em;
      color: var(--ink);
    }
    .kinds-note-body em {
      font-style: normal;
      color: var(--red);
    }
    .kinds-note-cap {
      font-size: 12px;
      line-height: 1.55;
      color: var(--ink-2);
    }
    .kind {
      background: var(--surface);
      padding: 22px 22px 24px;
      display: grid;
      gap: 12px;
      grid-template-rows: auto auto 1fr auto;
    }
    .kind-head {
      display: flex; align-items: center; gap: 12px;
    }
    .kind-mark {
      width: 28px; height: 28px;
      flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      background: color-mix(in oklch, var(--kind, var(--ink)) 12%, var(--surface));
      border: 1px solid color-mix(in oklch, var(--kind, var(--ink)) 40%, transparent);
      color: var(--kind, var(--ink));
    }
    .kind-mark svg { display: block; }
    .kind-name {
      font-family: 'Bricolage Grotesque', serif;
      font-weight: 700; font-size: 18px;
      letter-spacing: -0.02em;
      color: var(--ink);
      line-height: 1.1;
    }
    .kind-meta {
      font-family: 'Martian Mono', monospace;
      font-size: 11px; font-weight: 500;
      letter-spacing: 0.01em;
      color: var(--ink-3);
      margin-top: 2px;
      display: inline-flex; align-items: center; gap: 6px;
    }
    .kind-meta .kind-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--kind, var(--ink));
    }
    .kind-role {
      font-size: 13px;
      line-height: 1.55;
      color: var(--ink-2);
    }
    .kind-states {
      display: flex; flex-wrap: wrap; gap: 4px;
      padding-top: 6px;
    }
    .kind-state {
      font-family: 'Martian Mono', monospace;
      font-size: 9px; font-weight: 500;
      text-transform: uppercase; letter-spacing: 0.06em;
      padding: 2px 7px;
      background: var(--bg-alt);
      color: var(--ink-3);
      border: 1px solid var(--border-2);
    }

    /* ═══════════ WORKFLOW NODES ═══════════ */
    .flow {
      padding: 32px 28px 36px;
      background: var(--surface);
      border: 1px solid var(--border);
      position: relative;
      overflow-x: auto;
    }
    .flow-canvas {
      position: relative;
      width: 920px;
      height: 220px;
      margin: 0 auto;
    }
    .flow-connectors {
      position: absolute; inset: 0;
      pointer-events: none;
      width: 100%; height: 100%;
    }
    /* Hero diagram — sequential signal-flow particles on the happy-path edges */
    .flow-edge-p {
      offset-rotate: 0deg;
      animation: flow-edge-travel 4.2s linear infinite;
    }
    .flow-edge-p1 { offset-path: path('M 162 39 L 186 39'); animation-delay: 0s;   fill: var(--red); }
    .flow-edge-p2 { offset-path: path('M 352 39 L 376 39'); animation-delay: 0.9s; fill: var(--blue); }
    .flow-edge-p3 { offset-path: path('M 542 39 L 566 39'); animation-delay: 1.8s; fill: var(--kind-workflow); }
    .flow-edge-p4 { offset-path: path('M 732 39 L 756 39'); animation-delay: 2.7s; fill: var(--kind-board); }
    @keyframes flow-edge-travel {
      0%, 10%  { offset-distance: 0%;   opacity: 0; }
      12%      { opacity: 1; }
      30%      { offset-distance: 100%; opacity: 1; }
      34%, 100% { offset-distance: 100%; opacity: 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      .flow-edge-p { animation: none; opacity: 0; }
    }
    .flow-node {
      position: absolute;
      width: 160px;
      padding: 12px 14px;
      background: var(--surface);
      border: 1px solid var(--border);
      display: grid; gap: 4px;
      z-index: 1;
    }
    .flow-node-label {
      font-family: 'Martian Mono', monospace;
      font-size: 10px; font-weight: 600;
      letter-spacing: 0.02em;
      color: var(--ink-3);
    }
    .flow-node-title {
      font-family: 'Bricolage Grotesque', serif;
      font-weight: 700; font-size: 14px;
      letter-spacing: -0.015em;
      color: var(--ink);
      line-height: 1.15;
    }
    .flow-node-sub {
      font-size: 10px;
      color: var(--ink-3);
      font-family: 'Martian Mono', monospace;
      letter-spacing: 0.02em;
    }
    .flow-node--trigger { border-top: 2px solid var(--kind-workflow); }
    .flow-node--task { border-top: 2px solid var(--ink); }
    .flow-node--task .flow-node-label { color: var(--ink-2); }
    .flow-node--branch {
      border-top: 2px dashed var(--kind-workflow);
      background: color-mix(in oklch, var(--kind-workflow) 4%, var(--surface));
    }
    .flow-node--waiting {
      border: 1px dashed var(--kind-figment);
      color: var(--ink-2);
      background: color-mix(in oklch, var(--kind-figment) 5%, var(--surface));
    }
    .flow-node--end { border-top: 2px solid var(--green); }

    /* Column positions */
    .flow-c1 { left: 0; }
    .flow-c2 { left: 190px; }
    .flow-c3 { left: 380px; }
    .flow-c4 { left: 570px; }
    .flow-c5 { left: 760px; }
    .flow-top { top: 0; }
    .flow-bot { top: 130px; }

    .flow-cond {
      position: absolute;
      font-family: 'Martian Mono', monospace;
      font-size: 10px;
      letter-spacing: 0.02em;
      color: var(--ink-3);
      background: var(--surface);
      padding: 1px 6px;
      border: 1px solid var(--border-2);
      z-index: 2;
    }

    .node-legend {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
      margin-top: 20px;
    }
    .node-legend-cell:nth-child(-n+3) { grid-column: span 2; }
    .node-legend-cell:nth-child(n+4)  { grid-column: span 3; }
    .node-legend-cell {
      background: var(--surface);
      padding: 18px 20px;
      display: grid; gap: 8px;
    }
    .node-legend-label {
      font-family: 'Martian Mono', monospace;
      font-size: 11px; font-weight: 600;
      letter-spacing: 0.02em;
      color: var(--ink-3);
    }
    .node-legend-title {
      font-family: 'Bricolage Grotesque', serif;
      font-weight: 700; font-size: 15px;
      letter-spacing: -0.015em;
      color: var(--ink);
    }
    .node-legend-body {
      font-size: 12px;
      line-height: 1.55;
      color: var(--ink-3);
    }
    .node-legend-tags {
      display: flex; flex-wrap: wrap; gap: 4px;
      margin-top: 4px;
    }
    .node-legend-tags span {
      font-family: 'Martian Mono', monospace;
      font-size: 9px; font-weight: 500;
      text-transform: uppercase; letter-spacing: 0.06em;
      padding: 2px 7px;
      background: var(--bg-alt);
      color: var(--ink-2);
      border: 1px solid var(--border-2);
    }

    /* ═══════════ WORKFLOW RUNTIME — manual run, history, detail ═══════════ */

    /* Manual run form */
    .wf-run {
      background: var(--surface);
      border: 1px solid var(--border);
      display: grid;
      grid-template-rows: auto 1fr auto;
    }
    .wf-run-head {
      display: flex; align-items: baseline; gap: 12px;
      padding: 16px 20px 14px;
      border-bottom: 1px solid var(--border);
      background: var(--bg-alt);
    }
    .wf-run-head-eyebrow {
      font-family: 'Martian Mono', monospace;
      font-size: 9.5px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ink-3);
    }
    .wf-run-head-title {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 16px; font-weight: 600;
      letter-spacing: -0.005em;
      color: var(--ink);
    }
    .wf-run-head-meta {
      margin-left: auto;
      font-family: 'Martian Mono', monospace;
      font-size: 10.5px;
      color: var(--ink-3);
    }
    /* Target preview — shows what will fire */
    .wf-run-target {
      display: grid;
      grid-template-columns: auto 80px 1fr;
      align-items: center;
      gap: 18px;
      padding: 18px 20px;
      border-bottom: 1px solid var(--border);
      background: var(--surface);
    }
    .wf-run-target-node {
      display: flex; flex-direction: column; gap: 3px;
      padding: 11px 14px 13px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-top: 3px solid var(--kind-workflow);
      min-width: 200px;
    }
    .wf-run-target-node-kind {
      font-family: 'Martian Mono', monospace;
      font-size: 9.5px;
      letter-spacing: 0.06em;
      color: var(--ink-3);
    }
    .wf-run-target-node-name {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 15px;
      font-weight: 600;
      color: var(--ink);
      letter-spacing: -0.01em;
    }
    .wf-run-target-node-meta {
      font-family: 'Martian Mono', monospace;
      font-size: 10px;
      color: var(--ink-4);
      margin-top: 2px;
    }
    .wf-run-target-edge {
      width: 80px; height: 40px;
      display: block;
    }
    .wf-run-target-rest {
      display: flex; flex-direction: column; gap: 8px;
    }
    .wf-run-target-bits {
      display: inline-flex; gap: 4px;
    }
    .wf-run-target-bits .wf-bit {
      width: 10px; height: 10px;
    }
    .wf-run-target-rest-note {
      font-size: 11.5px;
      color: var(--ink-3);
    }
    @media (max-width: 700px) {
      .wf-run-target { grid-template-columns: 1fr; gap: 12px; }
      .wf-run-target-edge { display: none; }
    }
    .wf-run-fields {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1px;
      background: var(--border);
    }
    .wf-run-field {
      display: flex; flex-direction: column; gap: 8px;
      padding: 18px 20px 20px;
      background: var(--surface);
    }
    .wf-run-field--wide { grid-column: span 2; }
    .wf-run-field-label {
      display: flex; align-items: baseline; gap: 8px;
      font-size: 12.5px; font-weight: 500;
      color: var(--ink);
    }
    .wf-run-field-hint {
      font-family: 'Martian Mono', monospace;
      font-size: 9.5px;
      letter-spacing: 0.05em;
      color: var(--ink-4);
      text-transform: lowercase;
    }
    .wf-run-input {
      padding: 9px 12px;
      border: 1px solid var(--border);
      background: var(--bg-alt);
      font-family: 'Martian Mono', monospace;
      font-size: 12px;
      color: var(--ink);
      line-height: 1.45;
      min-height: 36px;
      display: flex; align-items: center;
    }
    .wf-run-input--multi {
      min-height: 54px;
      align-items: flex-start;
      padding: 10px 12px 12px;
      white-space: pre-wrap;
    }
    .wf-run-toggle {
      display: inline-flex; align-items: center;
      width: 36px; height: 20px;
      border: 1px solid var(--border);
      background: var(--bg-alt);
      padding: 2px;
      cursor: pointer;
      transition: background var(--dur-instant) var(--ease-out-quart);
    }
    .wf-run-toggle[data-on="true"] { background: var(--ink); border-color: var(--ink); }
    .wf-run-toggle-thumb {
      width: 14px; height: 14px;
      background: var(--surface);
      transition: transform var(--dur-quick) var(--ease-out-expo);
    }
    .wf-run-toggle[data-on="true"] .wf-run-toggle-thumb { transform: translateX(14px); }
    .wf-run-foot {
      display: flex; align-items: center; gap: 16px;
      padding: 14px 20px;
      border-top: 1px solid var(--border);
      background: var(--bg-alt);
    }
    .wf-run-foot-meta {
      font-size: 11.5px;
      color: var(--ink-3);
      line-height: 1.5;
    }
    .wf-run-foot-meta code {
      font-family: 'Martian Mono', monospace;
      font-size: 10.5px;
      color: var(--ink-2);
    }
    .wf-run-btn {
      margin-left: auto;
      display: inline-flex; align-items: center; gap: 8px;
      padding: 9px 16px 9px 14px;
      background: var(--blue);
      color: var(--surface);
      border: 0;
      font-family: 'Onest', sans-serif;
      font-size: 13px; font-weight: 600;
      letter-spacing: -0.005em;
      cursor: pointer;
      transition: background var(--dur-instant) var(--ease-out-quart);
    }
    .wf-run-btn:hover { background: color-mix(in oklch, var(--blue) 88%, var(--ink)); }
    .wf-run-btn-glyph {
      font-size: 10px;
      margin-top: 1px;
    }
    @media (max-width: 700px) {
      .wf-run-fields { grid-template-columns: 1fr; }
      .wf-run-field--wide { grid-column: span 1; }
    }

    /* Run history list */
    .wf-runs {
      background: var(--surface);
      border: 1px solid var(--border);
    }
    .wf-runs-head,
    .wf-run-row {
      display: grid;
      grid-template-columns: 130px 1.3fr 1.4fr 88px;
      gap: 20px;
      align-items: center;
      padding: 13px 20px;
    }
    .wf-runs-head {
      background: var(--bg-alt);
      border-bottom: 1px solid var(--border);
      font-family: 'Martian Mono', monospace;
      font-size: 10px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-3);
      padding-top: 10px; padding-bottom: 10px;
    }
    .wf-runs-head-right { text-align: right; }
    .wf-runs-list > .wf-run-row + .wf-run-row { border-top: 1px solid var(--border); }
    .wf-run-row {
      transition: background var(--dur-instant) var(--ease-out-quart);
      cursor: pointer;
    }
    .wf-run-row:hover { background: var(--bg-alt); }
    .wf-run-row-status {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 12.5px; font-weight: 500;
      color: var(--ink);
    }
    .wf-run-row-dot {
      width: 7px; height: 7px;
      background: var(--ink-3);
      flex: none;
    }
    .wf-run-row[data-status="running"] .wf-run-row-dot {
      background: var(--kind-workflow);
      animation: wf-pulse 1.4s ease-in-out infinite;
    }
    .wf-run-row[data-status="waiting"] .wf-run-row-dot {
      background: var(--kind-workflow);
      opacity: .7;
      animation: wf-pulse 2s ease-in-out infinite;
    }
    .wf-run-row[data-status="completed"] .wf-run-row-dot { background: var(--kind-board); }
    .wf-run-row[data-status="failed"] .wf-run-row-dot { background: var(--red); }
    .wf-run-row[data-status="cancelled"] .wf-run-row-dot {
      background: transparent;
      box-shadow: inset 0 0 0 1.5px var(--ink-3);
    }
    @keyframes wf-pulse {
      0%, 100% { opacity: .5; transform: scale(.85); }
      50%      { opacity: 1;  transform: scale(1); }
    }
    .wf-run-row-trigger {
      font-size: 12.5px;
      color: var(--ink-2);
      display: inline-flex; align-items: baseline; gap: 4px;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .wf-run-row-kind {
      font-family: 'Martian Mono', monospace;
      font-size: 10.5px;
      padding: 2px 6px;
      border: 1px solid var(--border-2);
      color: var(--ink);
      background: var(--bg-alt);
    }
    .wf-run-row-block {
      display: inline-flex; align-items: center; gap: 12px;
      font-family: 'Martian Mono', monospace;
      font-size: 12px;
      color: var(--ink);
      min-width: 0;
    }
    .wf-run-row-block-text {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    /* Block-progress bit strip */
    .wf-bits {
      display: inline-flex; gap: 3px;
      flex: none;
    }
    .wf-bit {
      width: 8px; height: 8px;
      background: var(--ink-4);
      flex: none;
    }
    .wf-bit--done { background: var(--kind-board); }
    .wf-bit--current {
      background: var(--kind-workflow);
      animation: wf-pulse 1.4s ease-in-out infinite;
    }
    .wf-bit--waiting {
      background: var(--kind-workflow);
      opacity: .55;
    }
    .wf-bit--failed { background: var(--red); }
    .wf-bit--cancelled {
      background: transparent;
      box-shadow: inset 0 0 0 1.5px var(--ink-3);
    }
    .wf-bit--pending {
      background: transparent;
      box-shadow: inset 0 0 0 1px var(--border);
    }
    .wf-run-row-sub {
      font-family: 'Martian Mono', monospace;
      font-size: 10.5px;
      color: var(--ink-4);
      margin-left: 4px;
    }
    .wf-run-row-time {
      font-family: 'Martian Mono', monospace;
      font-size: 11px;
      color: var(--ink-3);
      text-align: right;
    }
    @media (max-width: 700px) {
      .wf-runs-head,
      .wf-run-row {
        grid-template-columns: 1fr 1fr;
        gap: 6px 16px;
      }
      .wf-runs-head > :nth-child(3),
      .wf-runs-head > :nth-child(4) { display: none; }
      .wf-run-row-block,
      .wf-run-row-time { grid-column: span 2; font-size: 11px; }
    }

    /* Run detail — the graph IS the timeline */
    .wf-detail {
      background: var(--surface);
      border: 1px solid var(--border);
    }
    .wf-detail-head {
      display: flex; align-items: center; gap: 12px;
      padding: 14px 20px;
      background: var(--bg-alt);
      border-bottom: 1px solid var(--border);
    }
    .wf-detail-head-left {
      display: inline-flex; align-items: center; gap: 10px;
      flex-wrap: wrap;
    }
    .wf-detail-head-dot {
      width: 8px; height: 8px;
      background: var(--kind-workflow);
      animation: wf-pulse 1.4s ease-in-out infinite;
    }
    .wf-detail-head-status {
      font-size: 13px; font-weight: 600;
      color: var(--ink);
    }
    .wf-detail-head-sep { color: var(--ink-4); font-size: 12px; }
    .wf-detail-head-id,
    .wf-detail-head-progress {
      font-family: 'Martian Mono', monospace;
      font-size: 11px;
      color: var(--ink-3);
    }
    .wf-detail-head-right { margin-left: auto; }
    .wf-detail-head-btn {
      padding: 6px 12px;
      background: transparent;
      border: 1px solid var(--border);
      color: var(--ink-2);
      font-family: 'Onest', sans-serif;
      font-size: 12px;
      cursor: pointer;
      transition: color var(--dur-instant), border-color var(--dur-instant);
    }
    .wf-detail-head-btn:hover { color: var(--red); border-color: var(--red); }

    /* Mini-graph — the workflow rendered as a horizontal ribbon */
    .wf-mini {
      position: relative;
      padding: 28px 24px 32px;
      background: var(--surface);
      overflow-x: auto;
    }
    .wf-mini-edges {
      position: absolute;
      inset: 0;
      width: 100%; height: 100%;
      pointer-events: none;
    }
    .wf-mini-edge { stroke-width: 1; fill: none; }
    .wf-mini-edge--done    { stroke: var(--ink-2); }
    .wf-mini-edge--pending { stroke: var(--ink-4); stroke-dasharray: 2 3; }
    .wf-mini-edge--live    { stroke: color-mix(in oklch, var(--kind-workflow) 60%, transparent); }
    .wf-mini-particle {
      offset-path: path('M 534 30 L 596 30');
      offset-rotate: 0deg;
      animation: wf-mini-flow 1.8s linear infinite;
    }
    .wf-mini-particle--p1 { animation-delay: 0s;   fill: var(--red); }
    .wf-mini-particle--p2 { animation-delay: .6s;  fill: var(--blue); }
    .wf-mini-particle--p3 { animation-delay: 1.2s; fill: var(--kind-workflow); }
    @keyframes wf-mini-flow {
      0%   { offset-distance: 0%;   opacity: 0; }
      15%  { opacity: 1; }
      85%  { opacity: 1; }
      100% { offset-distance: 100%; opacity: 0; }
    }

    .wf-mini-nodes {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 50px;
      min-width: 900px;
    }
    .wf-mini-node {
      display: flex; flex-direction: column; gap: 4px;
      padding: 12px 14px 14px;
      background: var(--surface);
      border: 1px solid var(--border);
      min-height: 76px;
      position: relative;
    }
    .wf-mini-node-kind {
      font-family: 'Martian Mono', monospace;
      font-size: 9.5px;
      letter-spacing: 0.06em;
      color: var(--ink-3);
      text-transform: lowercase;
      margin-bottom: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .wf-mini-node-name {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 14px;
      font-weight: 600;
      color: var(--ink);
      letter-spacing: -0.01em;
      line-height: 1.15;
    }
    .wf-mini-node-time {
      margin-top: auto;
      font-family: 'Martian Mono', monospace;
      font-size: 10px;
      color: var(--ink-4);
    }
    /* Node kind: border treatments (matching the main flow grammar) */
    .wf-mini-node--trigger { border-top: 3px solid var(--kind-workflow); padding-top: 10px; }
    .wf-mini-node--task    { border-top: 3px solid var(--ink); padding-top: 10px; }
    .wf-mini-node--end     { border-top: 3px solid var(--kind-board); padding-top: 10px; }
    /* Node status: filled vs outlined */
    .wf-mini-node--done {
      background: color-mix(in oklch, var(--ink) 6%, var(--surface));
    }
    .wf-mini-node--done .wf-mini-node-kind,
    .wf-mini-node--done .wf-mini-node-time { color: var(--ink-3); }
    .wf-mini-node--running {
      background: color-mix(in oklch, var(--kind-workflow) 12%, var(--surface));
      box-shadow: 0 0 0 2px color-mix(in oklch, var(--kind-workflow) 35%, transparent);
      animation: wf-node-pulse 2s ease-in-out infinite;
    }
    @keyframes wf-node-pulse {
      0%, 100% { box-shadow: 0 0 0 2px color-mix(in oklch, var(--kind-workflow) 25%, transparent); }
      50%      { box-shadow: 0 0 0 4px color-mix(in oklch, var(--kind-workflow) 18%, transparent); }
    }
    .wf-mini-node--pending {
      background: var(--surface);
      border-style: dashed;
      opacity: .55;
    }
    .wf-mini-node--pending .wf-mini-node-name { color: var(--ink-3); }

    /* Meta strip below the mini-graph */
    .wf-detail-meta-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr) 1.4fr;
      gap: 1px;
      background: var(--border);
      border-top: 1px solid var(--border);
    }
    .wf-detail-meta-cell {
      padding: 14px 18px 16px;
      background: var(--bg-alt);
      display: flex; flex-direction: column; gap: 4px;
    }
    .wf-detail-meta-label {
      font-family: 'Martian Mono', monospace;
      font-size: 9.5px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-3);
    }
    .wf-detail-meta-value {
      font-size: 12.5px;
      color: var(--ink);
      line-height: 1.4;
    }
    .wf-detail-meta-value--mono {
      font-family: 'Martian Mono', monospace;
      font-size: 11.5px;
    }
    .wf-detail-meta-sub {
      color: var(--ink-3);
      font-size: 11px;
      margin-left: 4px;
    }
    @media (max-width: 900px) {
      .wf-detail-meta-row {
        grid-template-columns: 1fr 1fr;
      }
      .wf-detail-meta-cell--wide { grid-column: span 2; }
    }
    @media (prefers-reduced-motion: reduce) {
      .wf-mini-particle { animation: none; opacity: 0; }
      .wf-mini-node--running { animation: none; }
    }

    /* ═══════════ LIFECYCLE BAR ═══════════ */
    .lifecycle {
      padding: 28px 28px 32px;
      background: var(--surface);
      border: 1px solid var(--border);
      overflow-x: auto;
    }
    .lifecycle-label {
      font-family: 'Martian Mono', monospace;
      font-size: 11px; font-weight: 600;
      letter-spacing: 0.02em;
      color: var(--ink-3);
      display: inline-flex; align-items: center; gap: 10px;
      margin-bottom: 22px;
    }
    .lifecycle-label::before {
      content: ''; width: 12px; height: 1.5px;
      background: var(--red);
    }
    .lifecycle-track {
      display: flex;
      align-items: flex-start;
      gap: 0;
      min-width: 720px;
    }
    .stage {
      flex: 1 1 0;
      display: grid;
      grid-template-rows: auto auto auto;
      gap: 8px;
      justify-items: start;
      position: relative;
      padding-right: 12px;
    }
    .stage:last-child { padding-right: 0; }
    .stage-index {
      font-family: 'Martian Mono', monospace;
      font-size: 9px; font-weight: 600;
      letter-spacing: 0.08em;
      color: var(--ink-4);
    }
    .stage-bar {
      width: 100%;
      height: 3px;
      background: var(--border);
      position: relative;
    }
    .stage--done .stage-bar { background: var(--ink); }
    .stage--current .stage-bar {
      background: var(--kind-figment);
      box-shadow: 0 0 0 2px color-mix(in oklch, var(--kind-figment) 20%, transparent);
    }
    .stage--current .stage-bar::after {
      content: '';
      position: absolute; right: 0; top: 50%;
      width: 8px; height: 8px;
      background: var(--kind-figment);
      transform: translateY(-50%);
      animation: stage-pulse 1.4s ease-in-out infinite;
    }
    @keyframes stage-pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.4; }
    }
    .stage-name {
      font-family: 'Bricolage Grotesque', serif;
      font-weight: 700; font-size: 13px;
      letter-spacing: -0.01em;
      color: var(--ink);
      line-height: 1.2;
    }
    .stage--future .stage-name { color: var(--ink-4); font-weight: 500; }
    .stage-note {
      font-size: 10px;
      color: var(--ink-3);
      line-height: 1.4;
    }

    /* ═══════════ COMMAND PALETTE (⌘K) ═══════════ */
    .palette-stage {
      position: relative;
      background: var(--bg-alt);
      border: 1px solid var(--border);
      padding: 48px 24px;
      overflow: hidden;
      min-height: 420px;
    }
    .palette-stage::before {
      content: '';
      position: absolute; inset: 0;
      background-image: radial-gradient(circle, color-mix(in oklch, var(--ink) 10%, transparent) 1px, transparent 1px);
      background-size: 28px 28px;
      opacity: 0.35;
      pointer-events: none;
    }
    .palette-backdrop {
      position: absolute; inset: 0;
      background: color-mix(in oklch, var(--ink) 40%, transparent);
      backdrop-filter: blur(2px);
    }
    .palette-dialog {
      position: relative;
      max-width: 520px;
      margin: 0 auto;
      background: var(--surface);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-lift);
    }
    .palette-head {
      display: flex; align-items: center; gap: 10px;
      padding: 12px 14px;
      border-bottom: 1px solid var(--border);
    }
    .palette-prompt {
      font-family: 'Martian Mono', monospace;
      font-size: 14px;
      color: var(--ink-3);
      line-height: 1;
    }
    .palette-input {
      flex: 1;
      font-family: 'Onest', sans-serif;
      font-size: 14px;
      color: var(--ink);
      border: none;
      outline: none;
      background: transparent;
      padding: 0;
    }
    .palette-input::placeholder { color: var(--ink-4); }
    .palette-caret {
      display: inline-block;
      width: 1.5px;
      height: 16px;
      background: var(--ink);
      margin-left: 1px;
      vertical-align: middle;
      animation: palette-blink 1.1s steps(2, end) infinite;
    }
    @keyframes palette-blink { 50% { opacity: 0; } }
    .palette-kbd {
      display: inline-flex; align-items: center; gap: 4px;
      font-family: 'Martian Mono', monospace;
      font-size: 10px;
      letter-spacing: 0.02em;
      color: var(--ink-3);
    }
    .palette-kbd kbd {
      font-family: inherit;
      padding: 2px 6px;
      border: 1px solid var(--border);
      background: var(--bg-alt);
      color: var(--ink-2);
    }
    /* ─── Palette: Recent strip ─────────────────── */
    .palette-recent {
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      gap: 12px;
      padding: 8px 14px 10px;
      border-bottom: 1px solid var(--border-2);
      background: var(--bg-alt);
      overflow: hidden;
      max-height: 80px;
      transition: opacity var(--dur-quick) var(--ease-out-quart),
                  max-height var(--dur-quick) var(--ease-out-quart),
                  padding var(--dur-quick) var(--ease-out-quart),
                  border-bottom-width var(--dur-quick) var(--ease-out-quart);
      transform-origin: top;
    }
    /* When the palette dialog is in "typed" mode, Recent strip collapses. */
    .palette-dialog[data-typed="true"] .palette-recent {
      opacity: 0;
      padding-top: 0;
      padding-bottom: 0;
      max-height: 0;
      border-bottom-width: 0;
      pointer-events: none;
    }
    /* ─── Palette: demo input (reveal "lib" when typed) ─── */
    .palette-input--demo {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 0;
      min-height: 18px;
    }
    .palette-input-empty,
    .palette-input-typed {
      transition: opacity var(--dur-instant) var(--ease-out-quart);
    }
    .palette-input-empty {
      color: var(--ink-4);
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      pointer-events: none;
      opacity: 1;
    }
    .palette-input-typed {
      color: var(--ink);
      opacity: 0;
    }
    .palette-dialog[data-typed="true"] .palette-input-empty { opacity: 0; }
    .palette-dialog[data-typed="true"] .palette-input-typed { opacity: 1; }

    /* ─── Palette: demo controls ─── */
    .palette-demo-controls {
      display: flex; align-items: center; gap: 14px;
      margin-top: 14px;
    }
    .palette-demo-btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 6px 12px 6px 10px;
      font-family: 'Onest', sans-serif;
      font-size: 12px; font-weight: 500;
      color: var(--ink-2);
      background: var(--surface);
      border: 1px solid var(--border);
      cursor: pointer;
      transition: background var(--dur-instant) var(--ease-out-quart),
                  border-color var(--dur-instant) var(--ease-out-quart),
                  color var(--dur-instant) var(--ease-out-quart);
    }
    .palette-demo-btn:hover {
      border-color: var(--ink-4);
      color: var(--ink);
    }
    .palette-demo-btn[aria-pressed="true"] {
      background: var(--ink);
      border-color: var(--ink);
      color: var(--bg);
    }
    .palette-demo-btn-dot {
      width: 6px; height: 6px;
      background: currentColor;
      border-radius: 50%;
      transition: transform var(--dur-base) var(--ease-out-expo);
    }
    .palette-demo-btn[aria-pressed="true"] .palette-demo-btn-dot {
      transform: scale(1.2);
    }
    .palette-demo-hint {
      font-family: 'Martian Mono', monospace;
      font-size: 10px;
      color: var(--ink-3);
      letter-spacing: 0.02em;
    }
    .palette-recent-label {
      font-family: 'Martian Mono', monospace;
      font-size: 10px; font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--ink-3);
    }
    .palette-recent-items {
      display: flex; gap: 6px;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .palette-recent-items::-webkit-scrollbar { display: none; }
    .palette-recent-item {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 5px 9px;
      font-size: 11.5px; font-weight: 500;
      color: var(--ink-2);
      background: var(--surface);
      border: 1px solid var(--border-2);
      white-space: nowrap;
      flex-shrink: 0;
      cursor: pointer;
      transition: border-color var(--dur-instant) var(--ease-out-quart),
                  color var(--dur-instant) var(--ease-out-quart),
                  transform var(--dur-instant) var(--ease-out-quart),
                  background var(--dur-instant) var(--ease-out-quart);
      max-width: 160px;
    }
    .palette-recent-item:hover {
      color: var(--ink);
      border-color: var(--ink-4);
      background: var(--bg-alt);
      transform: translateY(-1px);
    }
    .palette-recent-item-icon {
      width: 10px; height: 10px;
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--ink-3);
      flex-shrink: 0;
      transition: color var(--dur-instant) var(--ease-out-quart);
    }
    .palette-recent-item-icon svg { width: 100%; height: 100%; }
    .palette-recent-item[data-kind="figment"]     .palette-recent-item-icon { color: var(--kind-figment); }
    .palette-recent-item[data-kind="workflow"]    .palette-recent-item-icon { color: var(--kind-workflow); }
    .palette-recent-item[data-kind="board"]       .palette-recent-item-icon { color: var(--kind-board); }
    .palette-recent-item[data-kind="integration"] .palette-recent-item-icon { color: var(--kind-integration); }
    .palette-recent-item[data-kind="document"]    .palette-recent-item-icon { color: var(--kind-document); }
    .palette-recent-item[data-kind="memory"]      .palette-recent-item-icon { color: var(--kind-memory); }
    .palette-recent-item-title {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .palette-recent-item-time {
      font-family: 'Martian Mono', monospace;
      font-size: 9.5px;
      color: var(--ink-4);
      letter-spacing: 0.02em;
    }

    .palette-list { max-height: 340px; overflow: hidden; }
    .palette-group {
      padding: 8px 0 6px;
      border-bottom: 1px solid var(--border-2);
    }
    .palette-group:last-child { border-bottom: none; }
    .palette-group-label {
      font-family: 'Martian Mono', monospace;
      font-size: 10px; font-weight: 600;
      letter-spacing: 0.02em;
      color: var(--ink-3);
      padding: 4px 16px 6px;
    }
    .palette-item {
      display: grid;
      grid-template-columns: 20px 1fr auto;
      align-items: center;
      gap: 12px;
      padding: 8px 16px;
      font-size: 13px;
      color: var(--ink-2);
      cursor: pointer;
      transition: background var(--dur-instant) var(--ease-out-quart),
                  color var(--dur-instant) var(--ease-out-quart);
    }
    .palette-item:hover {
      background: color-mix(in oklch, var(--bg-alt) 60%, var(--surface));
      color: var(--ink);
    }
    .palette-item.is-selected {
      background: var(--bg-alt);
      color: var(--ink);
    }
    .palette-item-icon {
      width: 14px; height: 14px;
      color: var(--ink-3);
    }
    .palette-item.is-selected .palette-item-icon { color: var(--ink); }
    .palette-item-shortcut {
      font-family: 'Martian Mono', monospace;
      font-size: 10px;
      letter-spacing: 0.02em;
      color: var(--ink-4);
    }
    .palette-item-check {
      color: var(--green);
      font-size: 13px;
    }
    .palette-foot {
      display: flex; gap: 18px;
      padding: 10px 16px;
      border-top: 1px solid var(--border);
      font-family: 'Martian Mono', monospace;
      font-size: 10px;
      color: var(--ink-3);
      letter-spacing: 0.02em;
    }
    .palette-foot span { display: inline-flex; align-items: center; gap: 5px; }
    .palette-foot kbd {
      font-family: inherit;
      padding: 1px 5px;
      border: 1px solid var(--border-2);
      background: var(--bg-alt);
      color: var(--ink-2);
    }

    /* ═══════════ OBSERVATORY (map + slash command) ═══════════ */
    .obs-frame {
      border: 1px solid var(--border);
      background: var(--surface);
      overflow: hidden;
    }
    .obs-bar {
      display: flex; align-items: center; gap: 14px;
      padding: 12px 18px;
      background: var(--bg-alt);
      border-bottom: 1px solid var(--border);
    }
    .obs-bar-eyebrow {
      font-family: 'Martian Mono', monospace;
      font-size: 10px; font-weight: 600;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: var(--ink-3);
    }
    .obs-bar-divider {
      width: 1px; height: 14px; background: var(--border);
    }
    .obs-bar-prompt {
      font-family: 'Martian Mono', monospace;
      font-size: 14px;
      color: var(--ink-3);
    }
    .obs-bar-input {
      flex: 1;
      font-family: 'Onest', sans-serif;
      font-size: 14px;
      color: var(--ink);
      display: inline-flex; align-items: center; gap: 4px;
    }
    .obs-bar-input .obs-cmd {
      font-family: 'Martian Mono', monospace;
      font-size: 13px;
      padding: 1px 6px;
      background: color-mix(in oklch, var(--kind-figment) 12%, var(--surface));
      color: var(--kind-figment);
      border: 1px solid color-mix(in oklch, var(--kind-figment) 30%, transparent);
      letter-spacing: 0.01em;
    }
    .obs-bar-hint {
      font-family: 'Martian Mono', monospace;
      font-size: 10px;
      letter-spacing: 0.02em;
      color: var(--ink-4);
    }
    .obs-map {
      position: relative;
      background:
        radial-gradient(circle, color-mix(in oklch, var(--ink) 8%, transparent) 1px, transparent 1px) 0 0/22px 22px,
        var(--bg);
      min-height: 360px;
      display: grid;
      grid-template-columns: 1fr 200px;
    }
    .obs-canvas {
      position: relative;
      min-height: 360px;
    }
    .obs-canvas svg { display: block; width: 100%; height: 100%; }
    .obs-legend {
      border-left: 1px solid var(--border);
      background: var(--surface);
      padding: 18px 18px;
      display: grid; gap: 10px;
      align-content: start;
    }
    .obs-legend-head {
      font-family: 'Martian Mono', monospace;
      font-size: 10px; font-weight: 600;
      letter-spacing: 0.02em;
      color: var(--ink-3);
      padding-bottom: 10px;
      border-bottom: 1px solid var(--border-2);
      margin-bottom: 4px;
    }
    .obs-legend-item {
      display: grid;
      grid-template-columns: 14px 1fr auto;
      align-items: center;
      gap: 10px;
      font-size: 12px;
      color: var(--ink-2);
    }
    .obs-legend-item.is-focused {
      color: var(--ink);
      font-weight: 500;
    }
    .obs-legend-item.is-dim { color: var(--ink-4); }
    .obs-legend-mark {
      width: 10px; height: 10px;
      display: block;
    }
    .obs-legend-count {
      font-family: 'Martian Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.02em;
      color: var(--ink-3);
    }

    /* ═══════════ RESPONSIVE ═══════════ */
    @media (max-width: 900px) {
      .wrap { padding: 0 20px; }
      .chassis--3, .chassis--4 { grid-template-columns: 1fr; }
      .chassis--2 { grid-template-columns: 1fr; }
      .app-frame { grid-template-columns: 1fr; }
      /* Tablet ≤900px: three-column grid collapses. Chat column replaces
         main; rail stays as navigation back out.
         Grid becomes [rail | chat]; main hides. */
      .app-frame--ask-open {
        grid-template-columns: 48px 1fr;
      }
      .app-frame--ask-open .app-main { display: none; }
      .app-frame--ask-open .ask-column {
        border-right: 0;
        width: auto;
      }
      .app-side { display: none; }
      .app-grid { grid-template-columns: repeat(2, 1fr); }
      .hero-sub { grid-template-columns: 1fr; gap: 18px; }
      .hero-meta { text-align: left; }
      .kinds-grid { grid-template-columns: repeat(2, 1fr); }
      .kinds-note { border-left: none; border-top: 1px solid var(--border); grid-column: span 2; }
      .node-legend { grid-template-columns: 1fr; }
      .node-legend-cell:nth-child(-n+3),
      .node-legend-cell:nth-child(n+4) { grid-column: span 1; }
      .obs-map { grid-template-columns: 1fr; }
      .obs-legend { border-left: none; border-top: 1px solid var(--border); display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 14px; }
      .obs-legend-head { grid-column: 1 / -1; }
      .flow-canvas { width: 920px; /* scroll horizontally, don't collapse */ }
    }
    @media (max-width: 600px) {
      .app-grid { grid-template-columns: 1fr; }
      .kinds-grid { grid-template-columns: 1fr; }
      .kinds-note { grid-column: span 1; }
      .palette-foot { flex-wrap: wrap; gap: 10px 18px; }
      .nav-version { display: none; }
      .nav { padding: 10px 16px; gap: 10px; }
      .nav-home { padding-right: 10px; }
    }

    /* ═══════════ FORMS (section 13) ═══════════ */
    /* Soft field vocabulary. Sentence-case labels, generous padding, hairline focus.
       Lives alongside the existing .input (which is already chassis-compliant) —
       adds the label + helper + error + layout bits that the app had been
       inventing ad-hoc in mono uppercase. */
    .field { display: flex; flex-direction: column; gap: 6px; }
    .field-label {
      font-family: 'Onest', sans-serif;
      font-size: 13px; font-weight: 500;
      letter-spacing: -0.005em;
      color: var(--ink);
    }
    .field-label--optional::after {
      content: 'optional';
      margin-left: 6px;
      font-family: 'Martian Mono', monospace;
      font-size: 9px; font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--ink-4);
    }
    .field-hint { font-family: 'Onest', sans-serif; font-size: 12px; color: var(--ink-3); line-height: 1.55; }
    .field-error {
      font-family: 'Onest', sans-serif;
      font-size: 12px;
      color: var(--red);
      display: inline-flex; align-items: center; gap: 6px;
    }
    .field-error::before {
      content: ''; width: 4px; height: 4px; border-radius: 50%;
      background: var(--red);
    }
    .input--soft {
      width: 100%;
      font-family: 'Onest', sans-serif;
      font-size: 14px; font-weight: 400;
      padding: 11px 14px;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--ink);
      outline: none;
      transition: border-color 0.15s;
    }
    .input--soft::placeholder { color: var(--ink-4); }
    .input--soft:focus { border-color: var(--ink); }
    .input--soft.is-invalid { border-color: color-mix(in oklch, var(--red) 55%, var(--border)); }
    .textarea--soft {
      width: 100%;
      min-height: 108px;
      resize: vertical;
      font-family: 'Onest', sans-serif;
      font-size: 14px; line-height: 1.55;
      padding: 11px 14px;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--ink);
      outline: none;
      transition: border-color 0.15s;
    }
    .textarea--soft::placeholder { color: var(--ink-4); }
    .textarea--soft:focus { border-color: var(--ink); }
    .select--soft {
      width: 100%;
      appearance: none;
      font-family: 'Onest', sans-serif;
      font-size: 14px; font-weight: 400;
      padding: 11px 36px 11px 14px;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--ink);
      outline: none;
      cursor: pointer;
      background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                        linear-gradient(-45deg, transparent 50%, var(--ink-3) 50%);
      background-position: calc(100% - 16px) 50%, calc(100% - 12px) 50%;
      background-size: 4px 4px, 4px 4px;
      background-repeat: no-repeat;
      transition: border-color 0.15s;
    }
    .select--soft:focus { border-color: var(--ink); }
    .field-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    .field-row--asym { grid-template-columns: 1fr 140px; }
    .input-well {
      display: flex;
      align-items: stretch;
      border: 1px solid var(--border);
      background: var(--surface);
      transition: border-color 0.15s;
    }
    .input-well:focus-within { border-color: var(--ink); }
    .input-well .input--bare {
      flex: 1;
      background: transparent;
      border: 0;
      outline: none;
      padding: 10px 12px;
      font-family: 'Martian Mono', monospace;
      font-size: 13px;
      color: var(--ink);
    }
    .input-well .input-action {
      width: 36px;
      flex-shrink: 0;
      display: inline-flex; align-items: center; justify-content: center;
      border-left: 1px solid var(--border);
      color: var(--ink-3);
      background: transparent;
      cursor: pointer;
      transition: color 0.15s, background 0.15s;
    }
    .input-well .input-action:hover { color: var(--ink); background: color-mix(in oklch, var(--ink) 4%, transparent); }
    .check-row { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; }
    .check-row input[type="checkbox"],
    .check-row input[type="radio"] {
      appearance: none;
      -webkit-appearance: none;
      flex-shrink: 0;
      width: 16px; height: 16px;
      margin-top: 2px;
      border: 1px solid var(--border);
      background: var(--surface);
      cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
      transition: border-color 0.15s, background 0.15s;
    }
    .check-row input[type="radio"] { border-radius: 50%; }
    .check-row input[type="checkbox"]:checked { border-color: var(--ink); background: var(--ink); }
    .check-row input[type="checkbox"]:checked::after {
      content: ''; width: 8px; height: 4px;
      border: 2px solid var(--surface);
      border-top: 0; border-right: 0;
      transform: rotate(-45deg) translate(1px, -1px);
    }
    .check-row input[type="radio"]:checked { border-color: var(--ink); }
    .check-row input[type="radio"]:checked::after {
      content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ink);
    }
    .check-row > div { display: flex; flex-direction: column; gap: 2px; }
    .check-row .field-label { font-weight: 400; }
    .inline-edit {
      display: inline-flex; align-items: baseline; gap: 6px;
      padding: 2px 6px;
      margin: -2px -6px;
      border: 1px solid transparent;
      font-family: 'Onest', sans-serif;
      font-size: 15px; font-weight: 500;
      color: var(--ink);
      cursor: text;
      transition: border-color 0.15s, background 0.15s;
    }
    .inline-edit:hover { border-color: var(--border); background: color-mix(in oklch, var(--ink) 3%, transparent); }
    .inline-edit::after {
      content: '✎';
      font-size: 11px;
      color: var(--ink-4);
      opacity: 0;
      transition: opacity 0.15s;
    }
    .inline-edit:hover::after { opacity: 1; }
    /* ═══════════ CHAT — the primary conversational surface ═══════════ */
    .chat-stage {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
      gap: 24px;
      align-items: start;
    }
    @media (max-width: 960px) { .chat-stage { grid-template-columns: 1fr; } }

    .chat-frame {
      border: 1px solid var(--border);
      background: var(--surface);
      display: flex; flex-direction: column;
      min-height: 560px;
      overflow: hidden;
    }
    .chat-head {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 16px;
      border-bottom: 1px solid var(--border);
      background: var(--bg-alt);
    }
    .chat-head-tag {
      font-family: 'Martian Mono', monospace;
      font-size: 10px; font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      padding: 3px 7px;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--ink-2);
    }
    .chat-head-title {
      font-family: 'Bricolage Grotesque', serif;
      font-size: 14px; font-weight: 600;
      color: var(--ink);
      flex: 1; min-width: 0;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .chat-head-meta {
      font-family: 'Martian Mono', monospace;
      font-size: 10px;
      color: var(--ink-3);
      letter-spacing: 0.06em;
    }

    .chat-body {
      flex: 1;
      padding: 18px 18px 8px;
      display: flex; flex-direction: column; gap: 16px;
      overflow-y: auto;
    }
    .chat-turn { display: flex; flex-direction: column; gap: 6px; }
    .chat-turn--user { align-items: flex-end; }
    .chat-turn-role {
      font-family: 'Martian Mono', monospace;
      font-size: 10.5px; font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-3);
    }
    .chat-bubble {
      max-width: 82%;
      padding: 10px 14px;
      border: 1px solid var(--border);
      background: var(--surface);
      font-family: 'Onest', sans-serif;
      font-size: 13.5px;
      line-height: 1.55;
      color: var(--ink);
    }
    .chat-turn--user .chat-bubble {
      background: var(--ink);
      color: var(--surface);
      border-color: var(--ink);
    }
    .chat-bubble strong { font-weight: 600; }
    .chat-bubble em {
      font-style: normal;
      border-bottom: 2px solid var(--amber);
      padding-bottom: 1px;
    }

    /* Tool-call footprint: shows the agent invoking a tool in-turn */
    .chat-toolcall {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 5px 10px;
      border: 1px dashed var(--border);
      background: color-mix(in oklch, var(--ink) 3%, transparent);
      font-family: 'Martian Mono', monospace;
      font-size: 10.5px;
      color: var(--ink-3);
      align-self: flex-start;
    }
    .chat-toolcall-dot {
      width: 5px; height: 5px;
      background: var(--blue);
    }
    .chat-toolcall-name { color: var(--ink-2); font-weight: 600; letter-spacing: 0.04em; }
    .chat-toolcall-status { color: var(--ink-4); letter-spacing: 0.06em; }

    /* Inline action card — CTA inside a chat turn.
       Flat: no head bar, no footer receipt. Glyph sits inline with the
       title; the card's state (picked pill / disabled actions / muted
       body) carries the rest. One border, sharp corners, mixed-case. */
    .chat-card {
      align-self: flex-start;
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 10px 12px;
      border: 1px solid var(--border);
      background: var(--surface);
      max-width: 520px;
    }
    .chat-card-title {
      display: flex;
      align-items: baseline;
      gap: 8px;
      font-family: 'Bricolage Grotesque', serif;
      font-size: 13.5px; font-weight: 600;
      color: var(--ink);
      line-height: 1.3;
      letter-spacing: -0.005em;
    }
    .chat-card-glyph {
      width: 9px; height: 9px;
      flex-shrink: 0;
      position: relative;
      top: 1px;
    }
    .chat-card-glyph--integration { background: oklch(0.58 0.22 300); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
    .chat-card-glyph--figment { background: var(--blue); }
    .chat-card-glyph--workflow { background: var(--amber); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
    .chat-card-glyph--memory { background: var(--red); border-radius: 50%; }
    .chat-card-glyph--upload {
      background: none; border: 1.25px solid var(--ink-3);
      position: relative;
    }
    .chat-card-glyph--choice {
      background: none;
      border: 1.25px solid var(--blue);
    }
    .chat-card-desc {
      font-family: 'Onest', sans-serif;
      font-size: 12.5px;
      line-height: 1.5;
      color: var(--ink-2);
    }
    .chat-card-meta {
      font-family: 'Martian Mono', monospace;
      font-size: 10px;
      color: var(--ink-3);
      letter-spacing: 0.01em;
      display: flex; gap: 12px; flex-wrap: wrap;
      align-items: baseline;
    }
    .chat-card-meta span strong { color: var(--ink-2); font-weight: 600; margin-right: 4px; }
    .chat-card-actions {
      display: flex;
      gap: 10px;
      margin-top: 2px;
      align-items: center;
    }
    .chat-card-action {
      background: transparent;
      border: none;
      padding: 4px 10px;
      font-family: 'Onest', sans-serif;
      font-size: 12px; font-weight: 500;
      color: var(--ink-2);
      cursor: pointer;
      transition: background 0.12s, color 0.12s;
    }
    .chat-card-action:hover { background: var(--bg-alt); color: var(--ink); }
    .chat-card-action--primary {
      background: var(--ink);
      color: var(--surface);
      font-weight: 600;
      padding: 5px 12px;
    }
    .chat-card-action--primary:hover { background: var(--ink); color: var(--surface); opacity: 0.88; }
    .chat-card-action--danger { color: var(--red); }
    .chat-card-action--danger:hover { background: color-mix(in oklch, var(--red) 10%, var(--surface)); color: var(--red); }

    /* ChoiceCard option pills — inline flex-wrap row, filled state when picked. */
    .chat-card-choices {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }
    .chat-card-choice {
      background: transparent;
      border: 1px solid var(--border);
      padding: 4px 9px;
      font-family: 'Onest', sans-serif;
      font-size: 12.5px; font-weight: 500;
      line-height: 1.3;
      color: var(--ink-2);
      cursor: pointer;
      transition: background 0.12s, color 0.12s, border-color 0.12s;
      white-space: nowrap;
    }
    .chat-card-choice:hover { border-color: var(--ink-2); color: var(--ink); }
    .chat-card-choice[data-picked="true"] {
      background: var(--ink);
      color: var(--surface);
      border-color: var(--ink);
    }

    /* Small inline chip variant — request_upload uses this */
    .chat-chip {
      align-self: flex-start;
      display: inline-flex; align-items: center; gap: 10px;
      padding: 8px 12px;
      border: 1px dashed var(--border);
      background: color-mix(in oklch, var(--amber) 6%, var(--surface));
      font-family: 'Onest', sans-serif;
      font-size: 12.5px;
      color: var(--ink);
    }
    .chat-chip-icon {
      width: 16px; height: 16px;
      border: 1.5px solid var(--ink-3);
      position: relative; flex-shrink: 0;
    }
    .chat-chip-icon::before, .chat-chip-icon::after {
      content: ''; position: absolute;
      background: var(--ink-3);
    }
    .chat-chip-icon::before { left: 50%; top: 25%; bottom: 25%; width: 1.5px; transform: translateX(-50%); }
    .chat-chip-icon::after { top: 50%; left: 25%; right: 25%; height: 1.5px; transform: translateY(-50%); }
    .chat-chip-cta {
      font-family: 'Onest', sans-serif;
      font-size: 11.5px; font-weight: 500;
      color: var(--ink-3);
      margin-left: auto;
    }

    /* Foot: composer + ambient hints */
    .chat-foot {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 14px;
      border-top: 1px solid var(--border);
      background: var(--bg-alt);
    }
    .chat-foot-compose {
      flex: 1;
      font-family: 'Onest', sans-serif;
      font-size: 13px;
      color: var(--ink-4);
      padding: 6px 10px;
      background: var(--surface);
      border: 1px solid var(--border);
    }
    .chat-foot-hint {
      font-family: 'Martian Mono', monospace;
      font-size: 10.5px;
      color: var(--ink-3);
      letter-spacing: 0.08em;
    }

    /* Card catalog — right column grid of variants */
    .chat-catalog {
      display: flex; flex-direction: column; gap: 10px;
    }
    .chat-catalog-note {
      font-family: 'Martian Mono', monospace;
      font-size: 10px; font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ink-3);
      padding-bottom: 2px;
      border-bottom: 1px solid var(--border);
    }

    /* Situation → capability table */
    .situation-grid {
      display: grid;
      grid-template-columns: minmax(210px, max-content) minmax(0, 1fr) minmax(220px, max-content);
      border: 1px solid var(--border);
      background: var(--surface);
      font-size: 12.5px;
    }
    @media (max-width: 640px) {
      .situation-grid {
        grid-template-columns: 1fr;
      }
      .situation-grid > div:nth-child(3n) {
        border-right: 1px solid var(--border);
      }
    }
    .situation-grid > div {
      padding: 10px 14px;
      border-right: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      line-height: 1.55;
    }
    .situation-grid > div:nth-child(3n) { border-right: none; }
    .situation-grid > div:nth-last-child(-n+3) { border-bottom: none; }
    .situation-grid-head {
      font-family: 'Martian Mono', monospace;
      font-size: 10px; font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-3);
      background: var(--bg-alt);
    }
    .situation-grid-cell-name {
      font-family: 'Martian Mono', monospace;
      font-weight: 600;
      color: var(--ink);
      font-size: 11.5px;
    }
    .situation-grid-caps {
      font-family: 'Martian Mono', monospace;
      font-size: 10.5px;
      color: var(--ink-2);
      line-height: 1.65;
    }
    .situation-grid-caps span {
      display: inline-block;
      padding: 2px 6px;
      margin: 2px 3px 2px 0;
      border: 1px solid var(--border-2);
      background: var(--bg-alt);
      color: var(--ink-2);
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
      }
    }


/* ═══════════════════════════════════════════════════════════
   Multi-page scaffold additions (TOC + between-section nav)
   ═══════════════════════════════════════════════════════════ */

.toc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0;
  border: 1px solid var(--border);
  background: var(--surface);
}
.toc-item {
  display: flex; align-items: baseline; gap: 12px;
  padding: 16px 18px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--ink-2);
  transition: background 0.15s, color 0.15s;
}
.toc-item:hover {
  background: var(--bg-alt);
  color: var(--ink);
}
.toc-num {
  font-family: 'Martian Mono', monospace;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--red);
  min-width: 22px;
}
.toc-name {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 15px; font-weight: 600;
}

.sec-foot {
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
  padding: 32px 0;
  margin-top: 64px;
}
.sec-foot-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.sec-foot-link {
  display: grid;
  grid-template-rows: auto auto;
  gap: 4px;
  text-decoration: none;
  padding: 16px 18px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-2);
  transition: background 0.15s, color 0.15s;
}
.sec-foot-link:hover {
  background: var(--bg-alt);
  color: var(--ink);
}
.sec-foot-next {
  text-align: right;
}
.sec-foot-dir {
  font-family: 'Martian Mono', monospace;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.sec-foot-num {
  font-family: 'Martian Mono', monospace;
  font-size: 11px; font-weight: 600;
  color: var(--red);
  display: inline-block;
  margin-right: 6px;
}
.sec-foot-next .sec-foot-num { margin-right: 0; margin-left: 6px; }
.sec-foot-name {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 15px; font-weight: 600;
  color: var(--ink);
}

@media (max-width: 640px) {
  .sec-foot-wrap { grid-template-columns: 1fr; }
  .sec-foot-next { text-align: left; }
}

/* ═══════════════════════════════════════════════════════════
   CHAT · multi-part section additions
   Adds sub-section chrome + state variants used in 14-chat.
   The base .chat-* grammar (frame, head, body, card, bubble,
   toolcall, situation-grid, chip) is defined earlier.
   ═══════════════════════════════════════════════════════════ */

.chat-sub {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.chat-sub:first-of-type {
  margin-top: 40px;
  padding-top: 0;
  border-top: 0;
}
.chat-sub-head {
  display: flex; align-items: baseline; gap: 16px;
  margin-bottom: 8px;
}
.chat-sub-eyebrow {
  font-family: 'Martian Mono', monospace;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* Body stays on ink-2 for contrast; the section number tag below wears the
     brand red. Splits the label into accent + content. */
  color: var(--ink-2);
}
.chat-sub-eyebrow-num {
  /* Slightly deepened red so small-text contrast clears 4.5:1 on light themes
     without touching the --red token globally. Dark themes already clear. */
  color: color-mix(in oklch, var(--red) 92%, var(--ink));
  margin-right: 8px;
}
.chat-sub-title {
  font-family: 'Bricolage Grotesque', serif;
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.chat-sub-intro {
  font-family: 'Onest', sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 66ch;
  margin-bottom: 24px;
}

/* ── 14.1 · Anatomy — frame with floating zone tags + legend below ── */
.chat-anatomy-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* leaves room at the left for the absolute-positioned zone tags */
  padding-left: 104px;
}
.chat-anatomy-frame {
  position: relative;
  /* Tags float outside the frame border to the left; don't clip them. */
  overflow: visible;
}
.chat-anatomy-frame .chat-head,
.chat-anatomy-frame .chat-body,
.chat-anatomy-frame .chat-foot {
  position: relative;
}
.chat-anatomy-frame .chat-head::before,
.chat-anatomy-frame .chat-body::before,
.chat-anatomy-frame .chat-foot::before {
  position: absolute;
  right: calc(100% + 14px);
  top: 10px;
  font-family: 'Martian Mono', monospace;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
  white-space: nowrap;
}
.chat-anatomy-frame .chat-head::before { content: 'A · Head'; }
.chat-anatomy-frame .chat-body::before { content: 'B · Transcript'; }
.chat-anatomy-frame .chat-foot::before { content: 'C · Composer'; }

.chat-anatomy-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
}
.chat-anatomy-key {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
}
.chat-anatomy-key-num {
  font-family: 'Martian Mono', monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--red);
  line-height: 1.6;
}
.chat-anatomy-key-body {
  font-family: 'Onest', sans-serif;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-2);
}
.chat-anatomy-key-body strong {
  color: var(--ink);
  font-weight: 600;
}

@media (max-width: 640px) {
  .chat-anatomy-wrap { padding-left: 0; }
  .chat-anatomy-frame .chat-head::before,
  .chat-anatomy-frame .chat-body::before,
  .chat-anatomy-frame .chat-foot::before {
    /* On narrow screens, surface tags inline at top of zone instead of floating. */
    position: static;
    display: block;
    margin-bottom: 6px;
  }
}

.chat-head-kebab {
  font-family: 'Martian Mono', monospace;
  font-size: 14px; font-weight: 700;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-3);
  padding: 2px 8px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.chat-head-kebab:hover {
  color: var(--ink);
  border-color: var(--border);
}

/* Tool-call grouping */
.chat-toolcall-group {
  align-self: stretch;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  margin-bottom: 6px;
}
.chat-toolcall-group .chat-toolcall-rows { display: none; }
.chat-toolcall-group[data-state="expanded"] .chat-toolcall-rows { display: block; }
/* Header row — the integration name anchors in mono; every other token is
   sans at a slightly smaller size so it reads as metadata, not code. All
   tokens nowrap so "3 calls" never breaks into "3" + "calls". */
.chat-toolcall-head {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  font-family: 'Onest', sans-serif;
  font-size: 11.5px;
  color: var(--ink-3);
  white-space: nowrap;
}
/* Fixed-width tokens don't shrink; only the status text is allowed to
   flex down and ellipsize so the header can't overflow the card. */
.chat-toolcall-head > *:not(.chat-toolcall-status):not(.chat-toolcall-identity) {
  flex-shrink: 0;
}
.chat-toolcall-dot {
  width: 5px; height: 5px;
  background: var(--blue);
}
.chat-toolcall-dot--running {
  background: var(--amber);
  animation: tool-pulse 1.2s ease-in-out infinite;
}
.chat-toolcall-dot--failed { background: var(--red); }
@keyframes tool-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
.chat-toolcall-logo { width: 10px; height: 10px; }

/* Only the name keeps the code voice — it's what the agent called. */
.chat-toolcall-name {
  font-family: 'Martian Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.02em;
  text-transform: lowercase;
}

/* Identity, badge, count, duration — sans, quieter, reads as meta. */
.chat-toolcall-identity {
  color: var(--ink-2);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 22ch;
}
.chat-toolcall-identity::before {
  content: '·';
  margin: 0 8px 0 0;
  color: var(--ink-4);
}
.chat-toolcall-idbadge {
  font-family: 'Martian Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 2px 6px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.chat-toolcall-count { color: var(--ink-3); }
.chat-toolcall-status {
  color: var(--ink-3);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-toolcall-duration {
  margin-left: auto;
  color: var(--ink-3);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.chat-toolcall-caret {
  color: var(--ink-4);
  font-size: 10px;
  margin-left: 2px;
}
.chat-toolcall-rows {
  border-top: 1px solid var(--border);
  padding: 4px 0;
  background: var(--surface);
}
.chat-toolcall-row {
  padding: 6px 12px;
  font-family: 'Martian Mono', monospace;
  font-size: 10.5px;
  color: var(--ink-3);
  line-height: 1.55;
}
.chat-toolcall-row:not(:last-child) { border-bottom: 1px dashed var(--border-2); }

/* ── Multi-identity sub-group ──
   Sits inside an expanded group when multiple identities were touched.
   First-child header carries the identity name + per-identity count;
   following rows are the calls under that identity. */
.chat-toolcall-idgroup {
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.chat-toolcall-idgroup:first-of-type {
  /* chat-toolcall-rows's own border-top handles the seam for single-id
     groups; when idgroups are used INSTEAD of chat-toolcall-rows, the
     first idgroup needs its own seam. */
  border-top: 1px solid var(--border);
}
.chat-toolcall-idrow {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 6px 12px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border-2);
  font-family: 'Martian Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
}
.chat-toolcall-idname {
  font-weight: 700;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-toolcall-idcount {
  color: var(--ink-3);
  font-size: 10px;
  margin-left: 12px;
  flex-shrink: 0;
}
.chat-toolcall-idgroup .chat-toolcall-row {
  /* Calls inside an idgroup sit one step further inset than flat rows,
     so the identity-grouping reads without needing a visible
     border-left stripe (banned pattern). */
  padding-left: 34px;
}
.chat-toolcall-op {
  display: inline-block;
  font-weight: 700;
  color: var(--ink-2);
  padding: 1px 6px;
  border: 1px solid var(--border-2);
  background: var(--bg-alt);
  margin-right: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 9.5px;
}
.chat-toolcall-group--failed .chat-toolcall-head { color: var(--red); }
.chat-toolcall-cta {
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.chat-toolcall-open {
  font-family: 'Martian Mono', monospace;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 6px 10px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.chat-toolcall-open:hover {
  background: var(--ink);
  color: var(--surface);
}

/* ── L1 · outer receipt ────────────────────────────────────────────────
   Wraps one or more integration groups. Collapsed by default; carries
   total call count, total duration, a pulse if any call is still in
   flight, and a red fail-count when anything errored. Tapping the head
   toggles the whole body. */
.chat-toolcall-wrap {
  border: 1px solid var(--border);
  background: var(--surface);
  margin-bottom: 6px;
}
.chat-toolcall-wrap-head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  font-family: 'Onest', sans-serif;
  font-size: 11.5px;
  color: var(--ink-3);
  white-space: nowrap;
  cursor: pointer;
  transition: background 120ms ease;
}
.chat-toolcall-wrap-head:hover { background: var(--bg-alt); }
.chat-toolcall-wrap-count {
  color: var(--ink-2);
  font-weight: 500;
}
.chat-toolcall-wrap-fail {
  color: var(--red);
  margin-left: 2px;
}
.chat-toolcall-wrap-duration {
  margin-left: auto;
  color: var(--ink-3);
  font-family: 'Martian Mono', monospace;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}
.chat-toolcall-wrap-caret {
  color: var(--ink-4);
  font-size: 10px;
}
.chat-toolcall-wrap-pulse {
  width: 6px; height: 6px;
  background: var(--amber);
  animation: tool-pulse 1.2s ease-in-out infinite;
  flex-shrink: 0;
}

/* Body only shows in expanded state. Integration groups stack with a
   hairline seam between them — no extra outer padding, so the groups
   touch the wrap's frame and inherit its rhythm. */
.chat-toolcall-wrap-body { display: none; }
.chat-toolcall-wrap[data-state="expanded"] .chat-toolcall-wrap-body {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}
.chat-toolcall-wrap[data-state="expanded"] .chat-toolcall-group {
  border: 0;
  margin-bottom: 0;
  background: transparent;
}
.chat-toolcall-wrap[data-state="expanded"] .chat-toolcall-group + .chat-toolcall-group {
  border-top: 1px solid var(--border-2);
}

/* ── L3 · call row with action / summary / duration ────────────────────
   The row is the atomic unit of the tool-call drill-down. Status dot +
   sans action name + mono-muted summary text + optional inline Open
   link + tabular duration + caret. No uppercase; lowercase dignified
   voice keeps the row scannable without shouting. */
.chat-toolcall-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 12px 6px 26px;
  font-family: 'Onest', sans-serif;
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.55;
  cursor: pointer;
  transition: background 120ms ease;
}
.chat-toolcall-row:hover {
  background: color-mix(in oklch, var(--bg-alt) 60%, transparent);
}
.chat-toolcall-rowdot {
  width: 5px; height: 5px;
  background: var(--signal-green, #16a34a);
  flex-shrink: 0;
  align-self: center;
}
.chat-toolcall-rowdot--failed { background: var(--red); }
.chat-toolcall-rowaction {
  color: var(--ink-2);
  font-weight: 500;
  flex-shrink: 0;
}
.chat-toolcall-rowsummary {
  color: var(--ink-3);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-toolcall-rowdur {
  margin-left: auto;
  color: var(--ink-4);
  font-family: 'Martian Mono', monospace;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.chat-toolcall-rowopen {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-size: 11px;
  flex-shrink: 0;
  cursor: pointer;
}
.chat-toolcall-rowopen:hover { color: var(--ink); }
.chat-toolcall-row--failed .chat-toolcall-rowaction,
.chat-toolcall-row--failed .chat-toolcall-rowsummary {
  color: var(--red);
}

/* ── L4 · raw result ────────────────────────────────────────────────────
   Revealed only when a row is explicitly expanded. Mono font, dashed
   frame, fixed max-height with scroll so long payloads don't stretch
   the transcript. No copy button — we surface that on hover in-product;
   here it stays quiet. */
.chat-toolcall-result {
  margin: 0 12px 8px 26px;
  border: 1px dashed var(--border);
  background: var(--bg-alt);
  max-height: 200px;
  overflow: auto;
}
.chat-toolcall-result-body {
  margin: 0;
  padding: 10px 12px;
  font-family: 'Martian Mono', monospace;
  font-size: 10.5px;
  line-height: 1.55;
  color: var(--ink-3);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Four-level anatomy panel ──────────────────────────────────────────
   A reading artefact for the doc, not a production component. Shows
   the L1/L2/L3/L4 stack so the reader can map every level to its job
   before the example grid below. */
.toolcall-levels {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  margin-bottom: 28px;
}
.toolcall-level {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-2);
}
.toolcall-level:last-child { border-bottom: 0; }
.toolcall-level-num {
  font-family: 'Martian Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-4);
  align-self: start;
  padding-top: 1px;
}
.toolcall-level-body { display: flex; flex-direction: column; gap: 3px; }
.toolcall-level-body strong {
  color: var(--ink);
  font-family: 'Bricolage Grotesque', serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.005em;
}
.toolcall-level-body span {
  color: var(--ink-3);
  font-size: 12.5px;
  line-height: 1.5;
}

/* ── Built-in glyph key ────────────────────────────────────────────────
   Reference panel: which geometric glyph stands in for which built-in
   family when no vendor logo is available. Fills the gap otherwise
   occupied by the integration logo. */
.toolcall-glyphkey {
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 16px 18px;
  margin-bottom: 28px;
}
.toolcall-glyphkey-head {
  font-family: 'Bricolage Grotesque', serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-bottom: 6px;
}
.toolcall-glyphkey-intro {
  font-family: 'Onest', sans-serif;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-3);
  margin: 0 0 14px;
  max-width: 62ch;
}
.toolcall-glyphkey-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px 24px;
}
.toolcall-glyphkey-cell {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.toolcall-glyphkey-cell > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.toolcall-glyphkey-cell strong {
  font-family: 'Onest', sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: var(--ink);
}
.toolcall-glyphkey-cell span {
  font-family: 'Onest', sans-serif;
  font-size: 11px;
  color: var(--ink-4);
}

/* Built-in kind glyphs — tinted by family, used both in the glyph key
   above AND inline as a tool-call group head marker when no vendor
   logo exists. All use the same 12×12 box so they sit on the same
   baseline as an integration logo. */
.toolcall-kindglyph {
  width: 12px; height: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  flex-shrink: 0;
}
.toolcall-kindglyph--canvas      { color: var(--blue); }
.toolcall-kindglyph--theme       { color: var(--amber); }
.toolcall-kindglyph--figment     { color: var(--green, #16a34a); }
.toolcall-kindglyph--board       { color: var(--blue); }
.toolcall-kindglyph--file        { color: var(--ink-3); }
.toolcall-kindglyph--integration { color: var(--amber); }

/* Tightened-up variant of the section intro paragraph — used for the
   wrap-up note below the tool-call grid where a full intro gap would
   read as detached. */
.chat-sub-intro--tight {
  margin-top: 20px;
  margin-bottom: 0;
}

/* Streaming indicator */
.chat-stream {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border: 1px dashed var(--border);
  background: var(--bg-alt);
  align-self: flex-start;
  font-family: 'Martian Mono', monospace;
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.chat-stream-dots { display: inline-flex; gap: 3px; }
.chat-stream-dots span {
  width: 5px; height: 5px;
  background: var(--blue);
  animation: tool-pulse 1.1s ease-in-out infinite;
}
.chat-stream-dots span:nth-child(2) { animation-delay: 0.15s; }
.chat-stream-dots span:nth-child(3) { animation-delay: 0.3s; }
.chat-stream-status { color: var(--ink-2); }
.chat-stream-stop {
  margin-left: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--red);
  font-size: 10px;
  padding: 3px 7px;
  cursor: pointer;
}

/* ── 14.2 · Message catalog ── */
.msg-catalog {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}
.msg-catalog-item {
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 110px;
}
.msg-catalog-label {
  font-family: 'Martian Mono', monospace;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.chat-bubble--error {
  background: var(--red-bg);
  border-color: var(--red-border);
  color: var(--ink);
}
.chat-bubble-retry {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px;
  padding: 5px 10px;
  border: 1px solid var(--red-border);
  background: var(--surface);
  color: var(--red);
  font-family: 'Martian Mono', monospace;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.chat-bubble-retry:hover {
  background: var(--red);
  color: var(--surface);
}

.chat-attach-strip {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 2px;
}

/* ── 14.3 · Tool demos ── */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.tool-demo {
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.tool-demo-label {
  font-family: 'Martian Mono', monospace;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ── 14.4 · Composer grid ── */
.composer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}
.composer-demo {
  display: flex; flex-direction: column; gap: 8px;
}
.composer-demo-label {
  font-family: 'Martian Mono', monospace;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.composer-frame {
  border: 1px solid var(--border);
  background: var(--surface);
  display: flex; flex-direction: column;
  transition: border-color 0.15s, background 0.15s;
}
.composer-frame--focused { border-color: var(--signal-blue); }
.composer-frame--dragover {
  border-color: var(--signal-blue);
  border-style: dashed;
  background: color-mix(in oklch, var(--signal-blue) 4%, var(--surface));
  min-height: 76px;
  align-items: center; justify-content: center;
}
.composer-dropmask {
  font-family: 'Martian Mono', monospace;
  font-size: 11px; font-weight: 700;
  color: var(--signal-blue);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.composer-row {
  display: flex; align-items: center; gap: 6px;
  padding: 6px;
}
.composer-attach-strip {
  padding: 6px 6px 0;
}
.composer-attach {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.composer-attach svg { width: 15px; height: 15px; }
.composer-attach:hover { color: var(--ink); border-color: var(--border); }
.composer-attach--spinning {
  color: var(--signal-blue);
}
.composer-attach--spinning svg {
  animation: composer-spin 1.2s linear infinite;
}
@keyframes composer-spin {
  to { transform: rotate(360deg); }
}
.composer-input {
  flex: 1;
  font-family: 'Onest', sans-serif;
  font-size: 13px;
  padding: 4px 8px;
  min-height: 22px;
  color: var(--ink);
  display: inline-flex; align-items: center;
}
.composer-input--placeholder { color: var(--ink-4); }
.composer-caret {
  display: inline-block;
  width: 1px; height: 14px;
  background: var(--ink);
  margin-left: 1px;
  animation: caret-blink 1s step-end infinite;
}
@keyframes caret-blink {
  50% { background: transparent; }
}
.composer-send,
.composer-stop {
  width: 28px; height: 28px;
  font-family: 'Martian Mono', monospace;
  font-weight: 700; font-size: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink-3);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.composer-send:disabled { opacity: 0.4; cursor: not-allowed; }
.composer-send--ready {
  background: var(--ink);
  color: var(--surface);
  border-color: var(--ink);
}
.composer-stop {
  background: var(--red);
  color: var(--surface);
  border-color: var(--red);
}
.composer-hint {
  padding: 6px 10px;
  border-top: 1px dashed var(--border-2);
  font-family: 'Martian Mono', monospace;
  font-size: 10px;
  color: var(--ink-4);
  letter-spacing: 0.04em;
}

/* ── 14.5 · Attach chips ── */
.attach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.attach-demo {
  display: flex; flex-direction: column; gap: 8px;
  align-items: flex-start;
}
.attach-demo-label {
  font-family: 'Martian Mono', monospace;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.chat-attach-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  font-family: 'Onest', sans-serif;
  font-size: 12px;
  color: var(--ink);
}
.chat-attach-chip--uploading { color: var(--ink-3); border-style: dashed; }
.chat-attach-chip--failed {
  border-color: var(--red-border);
  background: var(--red-bg);
  color: var(--red);
}
.chat-attach-icon {
  font-family: 'Martian Mono', monospace;
  font-size: 10px;
  color: var(--ink-3);
}
.chat-attach-thumb {
  width: 16px; height: 16px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  position: relative;
  flex-shrink: 0;
}
.chat-attach-thumb::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 5px 5px 0;
  border-color: transparent var(--ink-3) transparent transparent;
}
.chat-attach-size {
  font-family: 'Martian Mono', monospace;
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.chat-attach-remove {
  background: transparent;
  border: none;
  color: var(--ink-4);
  font-size: 12px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
}
.chat-attach-remove:hover { color: var(--red); }

/* ── 14.6 · Thread list + empty ── */
.thread-split {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  background: var(--surface);
}
.thread-list {
  border-right: 1px solid var(--border);
  background: var(--bg-alt);
  display: flex; flex-direction: column;
}
.thread-list-head {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-family: 'Martian Mono', monospace;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.thread-item {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-family: 'Onest', sans-serif;
  font-size: 12.5px;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.thread-item:hover { background: var(--surface); color: var(--ink); }
.thread-item--hover { background: var(--surface); color: var(--ink); }
.thread-item--active {
  background: var(--ink);
  color: var(--surface);
  font-weight: 600;
}
.thread-item--active:hover { background: var(--ink); color: var(--surface); }
.thread-item-title {
  flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.thread-item-time {
  font-family: 'Martian Mono', monospace;
  font-size: 10px;
  color: currentColor;
  opacity: 0.6;
}
.thread-item-kebab {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink-3);
  font-size: 13px;
  padding: 2px 6px;
  cursor: pointer;
}
.thread-item--renaming {
  padding: 6px 10px;
  background: var(--surface);
}
.thread-item-rename {
  flex: 1;
  font-family: 'Onest', sans-serif;
  font-size: 12.5px;
  padding: 4px 6px;
  border: 1px solid var(--signal-blue);
  background: var(--surface);
  color: var(--ink);
  outline: none;
}
.thread-new {
  margin-top: auto;
  padding: 10px 14px;
  background: var(--surface);
  border: none;
  border-top: 1px solid var(--border);
  font-family: 'Martian Mono', monospace;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.thread-new:hover { background: var(--ink); color: var(--surface); }

.thread-empty {
  padding: 56px 36px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  text-align: left;
  max-width: 44ch;
}
.thread-empty-label {
  font-family: 'Martian Mono', monospace;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  align-self: stretch;
}
.thread-empty-title {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 20px; font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.thread-empty-body {
  font-family: 'Onest', sans-serif;
  font-size: 13px;
  line-height: 1.6;
  max-width: 40ch;
  color: var(--ink-3);
}
.thread-empty-cta {
  margin-top: 4px;
  font-family: 'Martian Mono', monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--surface);
  border: 1px solid var(--ink);
  padding: 9px 14px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.thread-empty-cta:hover { background: var(--surface); color: var(--ink); }

@media (max-width: 640px) {
  .thread-split { grid-template-columns: 1fr; }
  .thread-list { border-right: 0; border-bottom: 1px solid var(--border); }
}

/* ── 14.7 · Card catalog grid + extra glyphs ── */
.card-catalog {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
  align-items: start;
}
.chat-card-glyph--search {
  background: none;
  border: 1.5px solid var(--ink-2);
  position: relative;
}
.chat-card-glyph--search::after {
  content: '';
  position: absolute;
  top: 60%; left: 60%;
  width: 5px; height: 1.5px;
  background: var(--ink-2);
  transform: rotate(45deg);
}
.chat-card-glyph--confirm {
  background: var(--ink-3);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.chat-card--inline {
  max-width: 520px;
  align-self: flex-start;
}
.chat-card-search-list {
  display: flex; flex-direction: column;
  border: 1px solid var(--border);
}
.chat-card-search-hit {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  font-family: 'Onest', sans-serif;
  font-size: 12.5px;
  color: var(--ink);
}
.chat-card-search-hit:last-child { border-bottom: 0; }
.chat-card-search-kind {
  font-family: 'Martian Mono', monospace;
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  min-width: 64px;
}
.chat-chip--standalone {
  grid-column: 1 / -1;
  align-self: start;
  justify-self: start;
}

/* ── 14.9 · Wide vs compact ── */
.variant-side-by-side {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  align-items: start;
}
.variant-demo {
  display: flex; flex-direction: column; gap: 8px;
}
.variant-demo-label {
  font-family: 'Martian Mono', monospace;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.variant-wide .chat-body { padding: 20px 24px; }
.variant-wide .chat-bubble { font-size: 14px; max-width: 90%; }
.variant-compact .chat-body--compact { padding: 10px 12px; gap: 8px; }
.chat-turn--compact { flex-direction: row; align-items: flex-start; gap: 10px; }
.chat-turn--compact .chat-turn-role {
  min-width: 64px;
  padding-top: 4px;
}
.chat-bubble--compact {
  font-size: 12.5px;
  padding: 6px 10px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  max-width: 100%;
}

/* ── 14 · Dark-theme line-height boost
   Impeccable color rule: light text on dark bg needs +0.05–0.1 leading. ── */
[data-theme="figments-dark"] .chat-bubble,
[data-theme="midnight"] .chat-bubble,
[data-theme="slate"] .chat-bubble {
  line-height: 1.65;
}
[data-theme="figments-dark"] .chat-sub-intro,
[data-theme="midnight"] .chat-sub-intro,
[data-theme="slate"] .chat-sub-intro,
[data-theme="figments-dark"] .chat-anatomy-key-body,
[data-theme="midnight"] .chat-anatomy-key-body,
[data-theme="slate"] .chat-anatomy-key-body {
  line-height: 1.7;
}

/* ═══════════════════════════════════════════════════════════
   14.10 · FIRST-THREAD RITUAL
   A once-per-account moment. Five figure blocks, each framed
   as a "beat" of the sequence. The hero shot (Beat 5) is a
   two-pane split with a live SVG context map next to the
   chat frame. Everything else is a still mock showing the
   pre-reveal, mid-reveal, or post-reveal state.
   ═══════════════════════════════════════════════════════════ */

.ritual-figure {
  margin: 28px 0 0;
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.ritual-figure--wide {
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
}
@media (max-width: 900px) {
  .ritual-figure, .ritual-figure--wide {
    grid-template-columns: 1fr;
  }
}

.ritual-caption {
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 6px;
  font-family: 'Onest', sans-serif;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.ritual-beat {
  font-family: 'Martian Mono', monospace;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* Same slight deepening used on .chat-sub-eyebrow-num — keeps the brand red
     voice while clearing 4.5:1 on light themes. */
  color: color-mix(in oklch, var(--red) 92%, var(--ink));
}
.ritual-caption-title {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 16px; font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.ritual-caption-body {
  color: var(--ink-2);
}
.ritual-caption code {
  font-family: 'Martian Mono', monospace;
  font-size: 11.5px;
  padding: 1px 5px;
  background: var(--bg-alt);
  border: 1px solid var(--border-2);
}

.ritual-stage {
  border: 1px solid var(--border);
  background: var(--bg-alt);
  padding: 32px;
  position: relative;
  overflow: hidden;
}
.ritual-stage::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, color-mix(in oklch, var(--ink) 8%, transparent) 1px, transparent 1px);
  background-size: 20px 20px;
  opacity: 0.35;
  pointer-events: none;
}

/* ── Beat 1 · Begin frame ── */
.ritual-stage--begin {
  padding: 64px 32px;
}
.ritual-begin {
  position: relative;
  z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 20px;
  text-align: center;
}
.ritual-begin-wordmark {
  font-family: 'Bricolage Grotesque', serif;
  font-size: clamp(48px, 6vw, 72px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
}
.ritual-begin-wordmark .ritual-period {
  color: var(--red);
}
.ritual-begin-subtitle {
  font-family: 'Martian Mono', monospace;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
}
.ritual-begin-btn {
  margin-top: 12px;
  padding: 12px 28px;
  font-family: 'Martian Mono', monospace;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--bg);
  border: 1px solid var(--ink);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.ritual-begin-btn:hover {
  background: var(--bg);
  color: var(--ink);
  transform: translateY(-1px);
}

/* ── Beat 2-3 · Centered thread ── */
.ritual-chat--centered {
  max-width: 680px;
  margin: 0 auto;
  box-shadow: var(--shadow-lift);
  position: relative;
  z-index: 1;
}
.ritual-caret {
  display: inline-block;
  width: 1px;
  height: 1em;
  margin-left: 2px;
  background: var(--ink);
  vertical-align: -2px;
  animation: ritual-caret-blink 1s steps(2, end) infinite;
}
@keyframes ritual-caret-blink {
  50% { background: transparent; }
}

/* ── Storyboard (3-frame strip) — used for Beat 4 + Beat 6 ── */
.storyboard {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 24px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
}
.storyboard-frame {
  display: flex; flex-direction: column; gap: 8px;
}
.storyboard-frame-label {
  font-family: 'Martian Mono', monospace;
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.storyboard-frame--active .storyboard-frame-label {
  color: var(--red);
}
.storyboard-canvas {
  position: relative;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
}
.storyboard-arrow {
  font-family: 'Martian Mono', monospace;
  font-size: 18px;
  color: var(--ink-4);
  line-height: 1;
  padding-top: 16px;
}
@media (max-width: 720px) {
  .storyboard {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .storyboard-arrow {
    transform: rotate(90deg);
    justify-self: center;
    padding: 0;
  }
}

/* Storyboard mini-elements — lightweight proxies for the chat + map panes */
.sb-chat, .sb-map {
  position: absolute;
  top: 8%; bottom: 8%;
  border: 1px solid var(--border);
  background: var(--surface);
}
.sb-chat { display: flex; flex-direction: column; padding: 6px; gap: 4px; }
.sb-chat--centered {
  left: 18%; right: 18%;
}
.sb-chat--left {
  left: 6%; right: 48%;
}
.sb-chat--sliding {
  left: 10%; right: 40%;
  transform: translateX(-4%);
  transition: none;
}
.sb-chat--expanding { left: 6%; right: 36%; }
.sb-chat--studio   { left: 14%; right: 6%; }

.sb-chat-head {
  height: 6px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  margin: -6px -6px 0;
}
.sb-chat-turn {
  height: 10px;
  background: var(--bg-alt);
  margin-top: auto;
  align-self: flex-start;
  width: 50%;
}
.sb-chat-turn--user {
  background: var(--ink);
  align-self: flex-end;
  width: 60%;
  margin-top: 6px;
}
.sb-chat-toolcall {
  height: 6px;
  margin-top: 4px;
  border: 1px dashed var(--border);
  background: transparent;
}

.sb-map {
  right: 6%; left: 54%;
  display: flex; flex-direction: column;
}
.sb-map--sliding {
  right: 6%; left: 60%;
  transform: translateX(12%);
  opacity: 0.55;
  transition: none;
}
.sb-map--collapsing {
  right: 72%; left: 78%;
  transform: translateX(0);
  opacity: 0.5;
}
.sb-map-head {
  height: 6px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  margin: -1px -1px 0;
}
.sb-map-svg {
  flex: 1;
  padding: 4px;
  color: var(--ink-2);
}

.sb-studio-spine {
  position: absolute;
  top: 8%; bottom: 8%; left: 6%; width: 6%;
  background: var(--bg-alt);
  border: 1px solid var(--border);
}

/* ── Beat 5 · Two-pane populated (hero shot) ── */
.ritual-twopane {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 0;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
@media (max-width: 860px) {
  .ritual-twopane { grid-template-columns: 1fr; }
}
.ritual-chat--split {
  border: none;
  border-right: 1px solid var(--border);
  min-height: 560px;
}
@media (max-width: 860px) {
  .ritual-chat--split {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}
.ritual-map {
  display: flex; flex-direction: column;
  background: var(--bg-alt);
  min-height: 560px;
  position: relative;
  overflow: hidden;
}
.ritual-map::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, color-mix(in oklch, var(--ink) 7%, transparent) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.5;
  pointer-events: none;
}
.ritual-map-head {
  position: relative; z-index: 1;
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.ritual-map-title {
  font-family: 'Martian Mono', monospace;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.ritual-map-meta {
  font-family: 'Onest', sans-serif;
  font-size: 11.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.ritual-map-canvas {
  flex: 1;
  position: relative; z-index: 1;
  padding: 18px;
}
.ritual-map-svg {
  width: 100%; height: 100%;
  overflow: visible;
}
.ritual-node text {
  font-family: 'Onest', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  fill: var(--ink);
}
.ritual-node-kind {
  font-family: 'Martian Mono', monospace !important;
  font-size: 8.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  fill: var(--ink-3) !important;
}

.ritual-pulse {
  transform-origin: center;
  transform-box: fill-box;
  animation: ritual-pulse 1.4s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}
@keyframes ritual-pulse {
  0%   { transform: scale(0.55); opacity: 1; }
  70%  { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}

.ritual-edge--new {
  stroke: var(--amber);
  stroke-opacity: 0.85;
  animation: ritual-edge-trace 2.4s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}
@keyframes ritual-edge-trace {
  0%   { stroke-dashoffset: 28; }
  50%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}

/* ── Rules + motion spec ── */
.ritual-rules {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0;
  border: 1px solid var(--border);
}
.ritual-rule {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  padding: 16px 18px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}
.ritual-rule:nth-child(even) { background: var(--surface); }
.ritual-rule-num {
  font-family: 'Martian Mono', monospace;
  font-size: 14px; font-weight: 700;
  color: var(--red);
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.ritual-rule-body {
  font-family: 'Onest', sans-serif;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-2);
}
.ritual-rule-body strong {
  color: var(--ink);
  font-weight: 600;
  display: block;
  margin-bottom: 2px;
}
.ritual-rule-body code {
  font-family: 'Martian Mono', monospace;
  font-size: 11.5px;
  padding: 1px 5px;
  background: var(--surface);
  border: 1px solid var(--border-2);
}

.ritual-spec {
  margin-top: 24px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.ritual-spec-head {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
  font-family: 'Martian Mono', monospace;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.ritual-spec-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(0, 2fr) minmax(140px, 1fr) minmax(140px, 1fr);
  gap: 16px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-2);
  font-family: 'Onest', sans-serif;
  font-size: 12px;
  line-height: 1.5;
}
.ritual-spec-row:last-child { border-bottom: none; }
.ritual-spec-event {
  font-weight: 600;
  color: var(--ink);
}
.ritual-spec-motion {
  color: var(--ink-2);
}
.ritual-spec-dur,
.ritual-spec-ease {
  font-family: 'Martian Mono', monospace;
  font-size: 11px;
  color: var(--ink-3);
}
@media (max-width: 720px) {
  .ritual-spec-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ═══════════════════════════════════════════════════════════
   CHIPS & SHARED PATTERNS
   Extracted from §18 inbox. These primitives are now available to
   any surface that needs object-origin identifiers, completion
   chips, inline verdicts, filter tokens, toggles, or compact list
   labels. Each .inbox-* class is kept in the selector list for
   backwards compatibility — new code should prefer the unprefixed
   forms.
   ═══════════════════════════════════════════════════════════ */

/* ── .pin — mono lowercase code chip for object origin (figment, workflow, integration) ── */
.pin, .inbox-pin {
  font-family: 'Martian Mono', monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  padding: 1px 5px 2px;
  border: 1px solid var(--border);
  background: var(--surface);
  display: inline-block;
  white-space: nowrap;
  vertical-align: baseline;
  text-transform: lowercase;
}
.pin--figment, .inbox-pin--fig {
  color: color-mix(in oklch, var(--blue) 60%, var(--ink-2));
  border-color: color-mix(in oklch, var(--blue) 18%, var(--border));
  background: color-mix(in oklch, var(--blue) 4%, var(--surface));
}
.pin--workflow, .inbox-pin--wf {
  color: color-mix(in oklch, var(--amber) 55%, var(--ink-2));
  border-color: color-mix(in oklch, var(--amber) 22%, var(--border));
  background: color-mix(in oklch, var(--amber) 5%, var(--surface));
}
.pin--integration, .inbox-pin--integ {
  color: color-mix(in oklch, var(--green) 60%, var(--ink-2));
  border-color: color-mix(in oklch, var(--green) 20%, var(--border));
  background: color-mix(in oklch, var(--green) 4%, var(--surface));
}
[data-theme="figments-dark"] .pin--figment,
[data-theme="figments-dark"] .inbox-pin--fig,
[data-theme="midnight"] .pin--figment,
[data-theme="midnight"] .inbox-pin--fig,
[data-theme="slate"] .pin--figment,
[data-theme="slate"] .inbox-pin--fig { color: var(--blue); }
[data-theme="figments-dark"] .pin--workflow,
[data-theme="figments-dark"] .inbox-pin--wf,
[data-theme="midnight"] .pin--workflow,
[data-theme="midnight"] .inbox-pin--wf,
[data-theme="slate"] .pin--workflow,
[data-theme="slate"] .inbox-pin--wf { color: var(--amber); }
[data-theme="figments-dark"] .pin--integration,
[data-theme="figments-dark"] .inbox-pin--integ,
[data-theme="midnight"] .pin--integration,
[data-theme="midnight"] .inbox-pin--integ,
[data-theme="slate"] .pin--integration,
[data-theme="slate"] .inbox-pin--integ { color: var(--green); }

/* ── .chip — Onest sentence-case completion/status chip
   (distinct from .badge, which is mono-uppercase chrome) ── */
.chip, .inbox-tag {
  display: inline-flex; align-items: center;
  font-family: 'Onest', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  padding: 2px 8px;
  border: 1px solid var(--border);
  color: var(--ink-3);
  background: var(--surface);
}
.chip--green, .inbox-tag--green {
  border-color: color-mix(in oklch, var(--green) 35%, transparent);
  color: color-mix(in oklch, var(--green) 90%, black);
  background: var(--green-tint);
}
.chip--red, .inbox-tag--red {
  border-color: color-mix(in oklch, var(--red) 35%, transparent);
  color: var(--red);
  background: var(--red-tint);
}
[data-theme="figments-dark"] .chip--green,
[data-theme="figments-dark"] .inbox-tag--green,
[data-theme="midnight"] .chip--green,
[data-theme="midnight"] .inbox-tag--green,
[data-theme="slate"] .chip--green,
[data-theme="slate"] .inbox-tag--green { color: var(--green); }

/* ── .verdict — inline colored-text verdict (NOT a chip).
   Use when a judgement rides at the end of a title or finding row. ── */
.verdict, .inbox-verdict {
  font-family: 'Onest', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-3);
  white-space: nowrap;
}
.verdict--pass, .inbox-verdict--pass    { color: color-mix(in oklch, var(--green) 85%, var(--ink)); }
.verdict--partial, .inbox-verdict--partial { color: color-mix(in oklch, var(--amber) 85%, var(--ink-2)); }
.verdict--fail, .inbox-verdict--fail    { color: var(--red); }
.verdict--neutral, .inbox-verdict--neutral { color: var(--ink-4); }
[data-theme="figments-dark"] .verdict--pass,
[data-theme="figments-dark"] .inbox-verdict--pass,
[data-theme="midnight"] .verdict--pass,
[data-theme="midnight"] .inbox-verdict--pass,
[data-theme="slate"] .verdict--pass,
[data-theme="slate"] .inbox-verdict--pass { color: var(--green); }
[data-theme="figments-dark"] .verdict--partial,
[data-theme="figments-dark"] .inbox-verdict--partial,
[data-theme="midnight"] .verdict--partial,
[data-theme="midnight"] .inbox-verdict--partial,
[data-theme="slate"] .verdict--partial,
[data-theme="slate"] .inbox-verdict--partial { color: var(--amber); }

/* ── .toggle — tight toggle chip for yes/no, single-select, multi-select.
   Alternative to dropdowns when the options fit on one line. ── */
.toggle-row, .inbox-toggle-row { display: flex; flex-wrap: wrap; gap: 6px; }
.toggle, .inbox-toggle {
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-2);
  font-family: 'Onest', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.toggle:hover, .inbox-toggle:hover { color: var(--ink); border-color: var(--ink-3); }
.toggle.is-on, .inbox-toggle.is-on {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

/* ── .filter-chip — mono token chip for search/filter bars.
   Example: "project:Acme deal" or "person:sarah". ── */
.filter-chip, .inbox-filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  font-family: 'Martian Mono', monospace;
  font-size: 11px;
  color: var(--ink-2);
  background: var(--bg-alt);
  border: 1px solid var(--border-2);
}
.filter-chip--project, .inbox-filter-chip--project {
  color: color-mix(in oklch, var(--blue) 60%, var(--ink-2));
  border-color: color-mix(in oklch, var(--blue) 22%, var(--border));
  background: color-mix(in oklch, var(--blue) 4%, var(--surface));
}
.filter-chip--person, .inbox-filter-chip--person {
  color: color-mix(in oklch, var(--green) 60%, var(--ink-2));
  border-color: color-mix(in oklch, var(--green) 22%, var(--border));
  background: color-mix(in oklch, var(--green) 4%, var(--surface));
}
[data-theme="figments-dark"] .filter-chip--project,
[data-theme="figments-dark"] .inbox-filter-chip--project,
[data-theme="midnight"] .filter-chip--project,
[data-theme="midnight"] .inbox-filter-chip--project,
[data-theme="slate"] .filter-chip--project,
[data-theme="slate"] .inbox-filter-chip--project { color: var(--blue); }
[data-theme="figments-dark"] .filter-chip--person,
[data-theme="figments-dark"] .inbox-filter-chip--person,
[data-theme="midnight"] .filter-chip--person,
[data-theme="midnight"] .inbox-filter-chip--person,
[data-theme="slate"] .filter-chip--person,
[data-theme="slate"] .inbox-filter-chip--person { color: var(--green); }

/* Plain-text variant used inside the filter demo bar (no chip styling) */
.inbox-filter-chip-text {
  font-family: 'Onest', sans-serif;
  font-size: 12.5px;
  color: var(--ink);
}
.inbox-filter-demo-caret {
  font-family: 'Martian Mono', monospace;
  font-size: 13px;
  color: var(--ink-3);
  animation: inbox-caret 1.1s steps(2) infinite;
  margin-left: 2px;
}
@keyframes inbox-caret {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Facet reference grid */
.inbox-filter-facets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.inbox-filter-facet {
  padding: 16px 18px 18px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.inbox-filter-facet-head {
  font-family: 'Martian Mono', monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.inbox-filter-facet-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.inbox-filter-facet-examples span {
  font-family: 'Martian Mono', monospace;
  font-size: 10.5px;
  color: var(--ink-2);
  padding: 1px 6px;
  background: var(--bg-alt);
  border: 1px solid var(--border-2);
}
.inbox-filter-facet-desc {
  font-family: 'Onest', sans-serif;
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.5;
  margin-top: 2px;
}

/* ── 18.6 Signifier — sidebar mark on the Inbox nav row ──
   Sharp rectangle, transparent fill, 1px severity border, 6px severity
   dot, Martian Mono count. Warning pulses (approvals waiting). Error
   stays still — the color is the weight. Zero pending → no mark. */
.inbox-mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 7px 2px 6px;
  border: 1px solid var(--border);
  background: transparent;
  font-family: 'Martian Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--ink-3);
  transform-origin: center;
  animation: inbox-mark-in 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.inbox-mark-dot {
  width: 6px;
  height: 6px;
  background: currentColor;
  flex-shrink: 0;
  opacity: 0.9;
}
.inbox-mark-count { font-variant-numeric: tabular-nums; }

.inbox-mark--info    { border-color: color-mix(in oklch, var(--blue)  45%, transparent); color: var(--blue); }
.inbox-mark--warning { border-color: color-mix(in oklch, var(--amber) 55%, transparent); color: color-mix(in oklch, var(--amber) 80%, black); }
.inbox-mark--error   { border-color: color-mix(in oklch, var(--red)   50%, transparent); color: var(--red); }
.inbox-mark--success { border-color: color-mix(in oklch, var(--green) 45%, transparent); color: color-mix(in oklch, var(--green) 85%, black); }

[data-theme="figments-dark"] .inbox-mark--warning,
[data-theme="midnight"] .inbox-mark--warning,
[data-theme="slate"] .inbox-mark--warning { color: var(--amber); }

.inbox-mark--warning .inbox-mark-dot { animation: inbox-mark-pulse 3.2s ease-in-out infinite; }

/* Hover on the parent nav row steadies the pulse — a small nod to the
   viewer. Paired selector keeps the signifier-demo self-contained. */
.inbox-signifier-rail:hover .inbox-mark--warning .inbox-mark-dot { animation-play-state: paused; opacity: 1; }

@keyframes inbox-mark-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.88); }
}
@keyframes inbox-mark-in {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* Demo scaffolding for the §18.6 signifier grid. Compact faux-sidebar
   showing every variant side by side. */
.inbox-signifier-demo {
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 18px;
  max-width: 720px;
}
.inbox-signifier-rail {
  display: grid;
  grid-template-columns: 120px 1fr 1.6fr;
  row-gap: 2px;
  column-gap: 18px;
  align-items: center;
  font-family: 'Onest', sans-serif;
}
.inbox-signifier-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-2);
  min-height: 36px;
  font-size: 13px;
  color: var(--ink-2);
}
.inbox-signifier-rail > .inbox-signifier-row:nth-last-child(-n+3) { border-bottom: none; }
.inbox-signifier-row--label {
  font-family: 'Martian Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.inbox-signifier-row--cap {
  font-family: 'Martian Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.inbox-signifier-row--cap em {
  font-style: normal;
  color: var(--ink-4);
  font-size: 10.5px;
}
.inbox-signifier-row--note {
  font-size: 12.5px;
  color: var(--ink-4);
  line-height: 1.5;
}
.inbox-signifier-glyph {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: var(--ink-2);
}
.inbox-signifier-label {
  font-weight: 500;
  color: var(--ink);
  margin-right: auto;
}

.inbox-signifier-rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 18px;
  max-width: 900px;
}
.inbox-signifier-rule {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.inbox-signifier-rule-num {
  font-family: 'Martian Mono', monospace;
  font-size: 10px;
  color: var(--ink-4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-top: 2px;
}
.inbox-signifier-rule-title {
  font-family: 'Onest', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.inbox-signifier-rule p {
  font-family: 'Onest', sans-serif;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-3);
}
@media (max-width: 640px) {
  .inbox-signifier-rail {
    grid-template-columns: 1fr;
    row-gap: 0;
  }
  .inbox-signifier-row--label:not(:first-child) { display: none; }
}

/* ── 18.3 Severity key — a compact 4-row guide instead of a 2x2 grid ── */
.inbox-sev-key {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--border);
  background: var(--surface);
  max-width: 620px;
}
.inbox-sev-key-row {
  display: grid;
  grid-template-columns: 16px 140px 1fr;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-2);
}
.inbox-sev-key-row:last-child { border-bottom: none; }
.inbox-sev-key-row .inbox-dot { margin-top: 0; }
.inbox-sev-key-name {
  font-family: 'Onest', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.inbox-sev-key-name em {
  font-weight: 400;
  font-style: normal;
  color: var(--ink-4);
  font-size: 12px;
}
.inbox-sev-key-use {
  font-family: 'Onest', sans-serif;
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.5;
}
@media (max-width: 640px) {
  .inbox-sev-key-row { grid-template-columns: 12px 1fr; gap: 10px; }
  .inbox-sev-key-use { grid-column: 2; color: var(--ink-4); font-size: 12px; }
}

/* ── 18.4 Field gallery ── */
.inbox-field-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.inbox-field-demo {
  background: var(--surface);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.inbox-field-demo-label {
  font-family: 'Martian Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  color: color-mix(in oklch, var(--red) 88%, var(--ink));
}
[data-theme="figments-dark"] .inbox-field-demo-label,
[data-theme="midnight"] .inbox-field-demo-label,
[data-theme="slate"] .inbox-field-demo-label { color: var(--red); }

/* ── 18.5 State grid ── */
.inbox-state-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  background: var(--border);
}
.inbox-state-cell {
  background: var(--surface);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 160px;
}
.inbox-state-label {
  font-family: 'Onest', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-3);
}
.inbox-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 12px 8px 4px;
}
.inbox-empty-title {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.inbox-empty-body {
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.55;
  max-width: 32ch;
}

@media (max-width: 720px) {
  .inbox-state-grid { grid-template-columns: 1fr; }
}

/* ── Small inline link helper (used in 18.4 intro) ── */
.inline-link {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, var(--blue) 30%, transparent);
  text-underline-offset: 3px;
}
.inline-link:hover { text-decoration-color: var(--blue); }

/* Responsive frame padding */
@media (max-width: 720px) {
  .inbox-frame { padding: 16px 16px 24px; }
  .inbox-fields { max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   INBOX · §18 page-scoped overrides
   Quiet the section + sub-section eyebrows that are uppercase
   mono in the shared design system. Only §18 — the rest of the
   site still wears the louder eyebrow treatment.
   ═══════════════════════════════════════════════════════════ */
#sec-inbox .section-eyebrow,
#sec-inbox .chat-sub-eyebrow {
  font-family: 'Onest', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
}
#sec-inbox .section-eyebrow::before {
  background: var(--ink-4);
}
#sec-inbox .chat-sub-eyebrow-num {
  color: color-mix(in oklch, var(--red) 70%, var(--ink));
  font-family: 'Martian Mono', monospace;
  font-size: 11px;
}

/* ═══════════════════════════════════════════════════════════
   INBOX · §18 item + control primitives
   (Restored after a regex extraction pass that overreached.
   These aren't candidates for the shared CHIPS section above —
   they're shape/layout specific to inbox items.)
   ═══════════════════════════════════════════════════════════ */

/* Item controls (dismiss/delete/confirm icon buttons) */
.inbox-ctl {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  color: var(--ink-4);
  border: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.inbox-ctl:hover { color: var(--ink); border-color: var(--border); }
.inbox-ctl--danger:hover { color: var(--red); border-color: color-mix(in oklch, var(--red) 40%, var(--border)); }
.inbox-ctl--confirm {
  color: var(--red);
  border-color: color-mix(in oklch, var(--red) 40%, var(--border));
}
.inbox-ctl--confirm:hover { background: var(--red-tint); }

/* Compact item card shape — used by §18.5 state grid examples */
.inbox-item {
  border-bottom: 1px solid var(--border-2);
  padding: 18px 4px 18px;
  transition: background-color 0.2s;
}
.inbox-item:last-child { border-bottom: none; }
.inbox-item--pending {
  background: color-mix(in oklch, var(--ink) 2.5%, transparent);
  padding-left: 12px;
  padding-right: 12px;
  margin-left: -12px;
  margin-right: -12px;
}
.inbox-item--compact {
  padding: 10px 12px;
  margin: 0;
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.inbox-item--compact.inbox-item--pending {
  background: color-mix(in oklch, var(--ink) 3%, var(--surface-2));
}
.inbox-item--compact.inbox-item--completed {
  background: var(--surface);
}

/* Item head row: dot + (title+time stack) + controls */
.inbox-item-head { display: flex; align-items: flex-start; gap: 12px; }
.inbox-item-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.inbox-item-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.inbox-item-title {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.35;
}
.inbox-item--completed .inbox-item-title {
  font-weight: 500;
  color: var(--ink-2);
}
.inbox-item-time {
  font-family: 'Onest', sans-serif;
  font-size: 11.5px;
  color: var(--ink-4);
}
.inbox-item-ctls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* Item body + prose */
.inbox-item-body { padding: 8px 0 0 20px; }
.inbox-prose {
  font-family: 'Onest', sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 64ch;
  white-space: pre-wrap;
}
.inbox-prose--clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--ink-3);
}

/* Fields region (reply form inside an item) */
.inbox-fields {
  margin: 14px 0 0 20px;
  padding-left: 14px;
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 520px;
}
.inbox-field { display: flex; flex-direction: column; gap: 6px; }
.inbox-field-label {
  font-family: 'Onest', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.inbox-field-req { color: var(--red); margin-left: 2px; }
.inbox-field-desc {
  font-family: 'Onest', sans-serif;
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.5;
}

/* Action row (below form) */
.inbox-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
  padding-left: 20px;
}

/* Button primitive — used by inbox action rows. Theme-aware primary variant
   keeps WCAG AA contrast across all 5 themes (figments / figments-dark /
   midnight / bone / slate) by darkening --blue where the default mix is
   too light for white text. */
.inbox-btn {
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font-family: 'Onest', sans-serif;
  font-size: 13px;
  font-weight: 500;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.inbox-btn:hover { border-color: var(--ink-3); }
.inbox-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ink-3);
}
.inbox-btn--ghost:hover { color: var(--ink); border-color: transparent; }
.inbox-btn--danger {
  background: var(--red);
  border-color: var(--red);
  color: color-mix(in oklch, white 96%, var(--ink));
}
.inbox-btn--danger:hover {
  background: color-mix(in oklch, var(--red) 85%, black);
  border-color: color-mix(in oklch, var(--red) 85%, black);
}
.inbox-btn--sm {
  height: auto;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
}
.inbox-btn--primary {
  background: var(--blue);
  color: color-mix(in oklch, white 96%, var(--ink));
  border-color: var(--blue);
}
.inbox-btn--primary:hover {
  background: color-mix(in oklch, var(--blue) 85%, black);
  border-color: color-mix(in oklch, var(--blue) 85%, black);
}
[data-theme="midnight"] .inbox-btn--primary {
  color: oklch(0.15 0.03 240);
}
[data-theme="figments-dark"] .inbox-btn--primary {
  background: color-mix(in oklch, var(--blue) 72%, black);
  border-color: color-mix(in oklch, var(--blue) 72%, black);
}
[data-theme="figments-dark"] .inbox-btn--primary:hover {
  background: color-mix(in oklch, var(--blue) 60%, black);
  border-color: color-mix(in oklch, var(--blue) 60%, black);
}
[data-theme="slate"] .inbox-btn--primary {
  background: color-mix(in oklch, var(--blue) 85%, black);
  border-color: color-mix(in oklch, var(--blue) 85%, black);
}
[data-theme="bone"] .inbox-btn--primary {
  background: color-mix(in oklch, var(--blue) 92%, black);
  border-color: color-mix(in oklch, var(--blue) 92%, black);
}

/* Completed-item summary (key:value pairs after a resolved item) */
.inbox-summary {
  margin: 10px 0 0 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
}
.inbox-summary-kv {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
}
.inbox-summary-k { color: var(--ink-4); }
.inbox-summary-v { color: var(--ink-2); }

/* Callback-failure error line */
.inbox-callback-err {
  margin: 8px 0 0 20px;
  font-size: 12px;
  color: var(--red);
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════
   INBOX · §18.1 Spatial frame
   Three-pane hero: time-grouped list · focused item · source
   context. This is the "canvas" view — more of the product's
   shape, less of a feed. The narrow feed below (§18.2) is the
   focused mode; this is the same data given room to breathe.
   ═══════════════════════════════════════════════════════════ */

.inbox-space {
  border: 1px solid var(--border);
  background: var(--surface);
  display: grid;
  grid-template-columns: 252px 1fr 316px;
  min-height: 540px;
  overflow: hidden;
}

.inbox-space-nav,
.inbox-space-main,
.inbox-space-source {
  padding: 22px 22px 20px;
  position: relative;
  min-width: 0;
}
.inbox-space-nav    { border-right: 1px solid var(--border-2); background: var(--bg-alt); }
.inbox-space-source { border-left:  1px solid var(--border-2); background: var(--surface-2); }

/* Left column chrome: search-like mono header + expand glyph */
.inbox-space-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: 'Onest', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-3);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-2);
  margin-bottom: 4px;
}

/* Filter bar — thin, always-visible, list-local. Global search is ⌘K. */
.inbox-space-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 8px 0 10px;
  margin: 8px 0 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  transition: border-color 0.15s, background 0.15s;
}
.inbox-space-filter:hover { border-color: var(--ink-4); }
.inbox-space-filter:focus-within {
  border-color: var(--ink);
  background: var(--surface);
}
.inbox-space-filter-glyph {
  color: var(--ink-4);
  flex-shrink: 0;
}
.inbox-space-filter:focus-within .inbox-space-filter-glyph { color: var(--ink-2); }
.inbox-space-filter input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: 0;
  font-family: 'Onest', sans-serif;
  font-size: 12px;
  color: var(--ink);
  padding: 0;
}
.inbox-space-filter input::placeholder { color: var(--ink-4); }
.inbox-space-filter-key {
  font-family: 'Martian Mono', monospace;
  font-size: 10px;
  color: var(--ink-4);
  padding: 1px 5px;
  border: 1px solid var(--border-2);
  background: var(--bg-alt);
  line-height: 1;
  flex-shrink: 0;
}
.inbox-space-filter:focus-within .inbox-space-filter-key { opacity: 0; }
.inbox-space-head-ctl {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  color: var(--ink-4);
  border: 1px solid var(--border);
}
.inbox-space-head-ctl:hover { color: var(--ink); }


/* Nav items — a 3-column grid with time fixed right, pin on its own line.
   Columns: dot · title+pin stack · time. The fixed right slot means times
   line up vertically across rows regardless of pin width. */
.inbox-nav-item {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) 32px;
  column-gap: 10px;
  align-items: center;
  padding: 9px 8px 9px 8px;
  border-bottom: 1px solid var(--border-2);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s, padding-left 0.15s;
  position: relative;
  overflow: hidden;
}
.inbox-nav-item:last-of-type { border-bottom: none; }

/* Grid placement — one row per item. Dot, title (flex), time. */
.inbox-nav-item > .inbox-nav-item-dot,
.inbox-nav-item > .inbox-nav-item-mark { grid-column: 1; }
.inbox-nav-item > .inbox-nav-item-title { grid-column: 2; min-width: 0; }
.inbox-nav-item > .inbox-nav-item-time  { grid-column: 3; }

.inbox-nav-item:hover { background: color-mix(in oklch, var(--ink) 2.5%, transparent); }

/* Active state: meaningfully darker fill + a thin right-edge bar + a chevron
   that leans toward the center pane. The bar is a ::after so it's not a
   border-stripe on the item itself. */
.inbox-nav-item.is-active {
  background: color-mix(in oklch, var(--ink) 7%, transparent);
  padding-left: 10px;
}
.inbox-nav-item.is-active::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 1px;
  background: var(--ink);
}

.inbox-nav-item-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: color-mix(in oklch, var(--ink) 25%, transparent);
  justify-self: center;
}
.inbox-nav-item-dot--info    { background: var(--blue); }
.inbox-nav-item-dot--warning { background: var(--amber); animation: inbox-pulse 3.2s ease-in-out infinite; }
.inbox-nav-item-dot--error   { background: var(--red); }
.inbox-nav-item-dot--success { background: var(--green); }

/* Completion mark — sits in the dot's slot for done items.
   Tiny glyph (tick / dash) carries the verdict; no words needed. */
.inbox-nav-item-mark {
  width: 10px; height: 10px;
  display: grid; place-items: center;
  color: var(--ink-4);
  justify-self: center;
}
.inbox-nav-item-mark--pass    { color: color-mix(in oklch, var(--green) 60%, var(--ink-3)); }
.inbox-nav-item-mark--partial { color: color-mix(in oklch, var(--amber) 55%, var(--ink-3)); }
.inbox-nav-item-mark--fail    { color: var(--red); }
.inbox-nav-item-mark--neutral { color: var(--ink-4); }
[data-theme="figments-dark"] .inbox-nav-item-mark--pass,
[data-theme="midnight"] .inbox-nav-item-mark--pass,
[data-theme="slate"] .inbox-nav-item-mark--pass { color: var(--green); }
[data-theme="figments-dark"] .inbox-nav-item-mark--partial,
[data-theme="midnight"] .inbox-nav-item-mark--partial,
[data-theme="slate"] .inbox-nav-item-mark--partial { color: var(--amber); }

/* Done rows: title + pin recede */
.inbox-nav-item--done .inbox-nav-item-title { color: var(--ink-3); }
.inbox-nav-item--done .inbox-pin { opacity: 0.75; }

.inbox-nav-item-title {
  font-family: 'Onest', sans-serif;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  padding-right: 4px;
}
.inbox-nav-item.is-active .inbox-nav-item-title { color: var(--ink); font-weight: 600; }
.inbox-nav-item-time {
  font-family: 'Onest', sans-serif;
  font-size: 10.5px;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
  text-align: right;
  justify-self: stretch;
}
.inbox-nav-item--done .inbox-nav-item-time { display: none; }



/* Center column — focused item */
.inbox-space-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.inbox-space-titlerow {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-2);
}
.inbox-space-title-col { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.inbox-space-titlepins {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.inbox-space-title {
  font-family: 'Bricolage Grotesque', serif;
  font-size: clamp(16px, 2vw, 19px);
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink);
  line-height: 1.25;
}
.inbox-space-meta {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 11.5px;
  color: var(--ink-4);
  font-family: 'Onest', sans-serif;
}
.inbox-space-meta-dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--border);
  align-self: center;
}
.inbox-space-verdict-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.inbox-space-body {
  font-family: 'Onest', sans-serif;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 58ch;
}
.inbox-space-body strong { color: var(--ink); font-weight: 600; }
.inbox-space-body .inbox-pin { position: relative; top: -1px; }

/* Draft preview — the actual drafted email, with inline concern marks. */
.inbox-draft {
  margin-top: 4px;
  border: 1px solid var(--border-2);
  background: var(--surface-2);
}
.inbox-draft-head {
  padding: 8px 14px;
  font-family: 'Onest', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-3);
  border-bottom: 1px solid var(--border-2);
  background: var(--bg-alt);
}
.inbox-draft-body {
  padding: 14px 16px 4px;
  font-family: 'Onest', sans-serif;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink);
  max-width: 60ch;
}
.inbox-draft-body p { margin-bottom: 10px; }
.inbox-draft-body p:last-child { margin-bottom: 14px; color: var(--ink-2); }

/* Inline concern marks — soft phrase tint, nothing more. */
.inbox-draft-mark {
  color: inherit;
  padding: 1px 2px;
  margin: 0 -2px;
  text-decoration: none;
  background: color-mix(in oklch, var(--ink) 4%, transparent);
  transition: background 0.15s;
}
.inbox-draft-mark--flag {
  background: color-mix(in oklch, var(--amber) 14%, transparent);
}
.inbox-draft-mark--blocker {
  background: color-mix(in oklch, var(--red) 10%, transparent);
}
[data-theme="figments-dark"] .inbox-draft-mark--flag,
[data-theme="midnight"] .inbox-draft-mark--flag,
[data-theme="slate"] .inbox-draft-mark--flag {
  background: color-mix(in oklch, var(--amber) 16%, transparent);
}
[data-theme="figments-dark"] .inbox-draft-mark--blocker,
[data-theme="midnight"] .inbox-draft-mark--blocker,
[data-theme="slate"] .inbox-draft-mark--blocker {
  background: color-mix(in oklch, var(--red) 14%, transparent);
}

/* Stats block — used by the Meta ads scenario (approval w/ metrics). */
.inbox-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0;
  border: 1px solid var(--border-2);
  background: var(--surface-2);
  margin-top: 4px;
}
.inbox-stat {
  padding: 12px 14px;
  border-right: 1px solid var(--border-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.inbox-stat:last-child { border-right: none; }
@media (max-width: 640px) {
  .inbox-stat { border-right: none; border-bottom: 1px solid var(--border-2); }
  .inbox-stat:last-child { border-bottom: none; }
}
.inbox-stat-k {
  font-family: 'Onest', sans-serif;
  font-size: 11.5px;
  color: var(--ink-4);
}
.inbox-stat-v {
  font-family: 'Onest', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.inbox-stat-v em {
  font-weight: 400;
  font-style: normal;
  color: var(--ink-4);
  font-size: 12px;
}

/* Completion chip block — shown on done scenarios */
.inbox-completed-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 0 0;
  font-size: 12px;
}
.inbox-completed-meta { color: var(--ink-4); font-family: 'Onest', sans-serif; }

/* Agent notes — quote-led, referencing phrases in the draft. */
.inbox-notes {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
}
.inbox-notes-head {
  font-family: 'Onest', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.inbox-note {
  padding: 10px 0 12px 12px;
  border-top: 1px solid var(--border-2);
  position: relative;
}
.inbox-note:first-of-type { border-top: none; padding-top: 4px; }
.inbox-note::before {
  content: '';
  position: absolute;
  left: 0;
  top: 13px;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--ink-4);
}
.inbox-note--flag::before    { background: var(--amber); }
.inbox-note--blocker::before { background: var(--red); }
.inbox-note:first-of-type::before { top: 7px; }

.inbox-note-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.inbox-note-quote {
  font-family: 'Onest', sans-serif;
  font-size: 12.5px;
  font-style: italic;
  color: var(--ink-2);
}
.inbox-note-body > span:not(.inbox-note-quote) {
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.55;
  max-width: 56ch;
}

/* Pending form surface under the finding list */
.inbox-space-reply {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 0 0;
  border-top: 1px solid var(--border-2);
}
.inbox-space-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Item-level chat button — tucks into the focused item's top-right. */
.inbox-item-chat {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  color: var(--ink-3);
  border: 1px solid transparent;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.inbox-item-chat:hover {
  color: var(--ink);
  border-color: var(--border);
  background: color-mix(in oklch, var(--ink) 2%, transparent);
}

/* Right column — source pane */
.inbox-space-source { display: flex; flex-direction: column; }
.inbox-source-head {
  font-family: 'Onest', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-3);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-2);
}
.inbox-source-head-pin { color: var(--ink-4); letter-spacing: 0; font-family: 'Martian Mono', monospace; font-size: 10px; }
.inbox-source-title {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  padding-top: 12px;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.inbox-source-snippet {
  font-family: 'Onest', sans-serif;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--ink-2);
  margin-top: 8px;
}
.inbox-source-snippet p { margin-bottom: 8px; }
.inbox-source-snippet p:last-child { margin-bottom: 0; }
.inbox-source-highlight {
  background: color-mix(in oklch, var(--amber) 16%, transparent);
  padding: 1px 2px;
  margin: 0 -2px;
}
[data-theme="figments-dark"] .inbox-source-highlight,
[data-theme="midnight"] .inbox-source-highlight,
[data-theme="slate"] .inbox-source-highlight {
  background: color-mix(in oklch, var(--amber) 18%, transparent);
}
.inbox-source-meta {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border-2);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.inbox-source-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 12px;
}
.inbox-source-meta-k {
  font-family: 'Onest', sans-serif;
  font-size: 11.5px;
  letter-spacing: 0;
  color: var(--ink-4);
}
.inbox-source-meta-v { color: var(--ink-2); font-size: 12px; }

/* Showing-source connector — a dotted line from the focused finding
   into the source pane (purely visual aid in the hero visual) */
.inbox-space-connector {
  position: absolute;
  top: 0;
  right: -1px;
  width: 1px;
  height: 100%;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, var(--ink-4) 0 3px, transparent 3px 7px);
  opacity: 0.25;
}

@media (max-width: 1120px) {
  .inbox-space { grid-template-columns: 220px 1fr 280px; }
}
@media (max-width: 960px) {
  .inbox-space { grid-template-columns: 200px 1fr; }
  .inbox-space-source {
    grid-column: 1 / -1;
    border-left: none;
    border-top: 1px solid var(--border-2);
  }
}
@media (max-width: 720px) {
  .inbox-space { grid-template-columns: 1fr; }
  .inbox-space-nav {
    border-right: none;
    border-bottom: 1px solid var(--border-2);
  }
}

/* ═══════════ 19 · Integrations ═══════════ */

/* ── Catalog grid ── */
.integ-catalog {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1px;
  background: var(--border-2);
  border: 1px solid var(--border-2);
  margin-top: 20px;
}
.integ-card {
  position: relative;
  background: var(--surface);
  padding: 16px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 148px;
  cursor: pointer;
  transition: background 180ms ease;
}
.integ-card:hover {
  background: var(--surface-2);
}
.integ-card:hover .integ-card-title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.integ-card:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: -1px;
}
.integ-card--connected { background: var(--surface); }
.integ-card--connected:hover { background: var(--surface-2); }
.integ-rail {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--green);
}
.integ-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 2px;
}
.integ-logo {
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.integ-logo--md { width: 40px; height: 40px; }
.integ-logo--sm { width: 28px; height: 28px; }
.integ-logo-mark {
  font-family: 'Bricolage Grotesque', serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.integ-logo--sm .integ-logo-mark { font-size: 13px; }
.integ-logo-mark--gmail    { color: oklch(0.58 0.20 27); }
.integ-logo-mark--hubspot  { color: oklch(0.65 0.18 45); }
.integ-logo-mark--meta     { color: oklch(0.55 0.20 250); font-size: 22px; }
.integ-logo-mark--slack    { color: oklch(0.60 0.18 330); }
.integ-logo-mark--notion   { color: var(--ink); }
.integ-logo-mark--stripe   { color: oklch(0.55 0.20 280); }
.integ-logo-mark--google   { color: oklch(0.62 0.18 220); }
.integ-logo-mark--calendar { color: oklch(0.58 0.20 260); font-size: 16px; }
.integ-logo-mark--analytics { color: oklch(0.65 0.16 50); }
.integ-card-title {
  font-family: 'Bricolage Grotesque', serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
}
.integ-card-desc {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-3);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.integ-card .chrome-label { margin-top: auto; opacity: 0.7; align-self: flex-start; }

/* ── Identity ── */
.integ-ident-demo {
  margin-top: 20px;
  border: 1px solid var(--border-2);
  background: var(--surface);
}
.integ-ident-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-2);
  background: var(--surface-2);
}
.integ-ident-head-text { display: flex; flex-direction: column; gap: 2px; }
.integ-ident-head-text strong {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.integ-ident-head-text span { font-size: 11px; color: var(--ink-3); }
.integ-ident-list { list-style: none; margin: 0; padding: 0; }
.integ-ident-row {
  display: grid;
  grid-template-columns: 10px 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--border-2);
}
.integ-ident-row:first-child { border-top: none; }
.integ-ident-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.integ-ident-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.25;
}
.integ-ident-label {
  font-family: 'Martian Mono', monospace;
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: -0.01em;
}
.integ-ident-note {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 4px;
  line-height: 1.5;
}
.integ-ident-note em {
  font-style: normal;
  font-family: 'Martian Mono', monospace;
  font-size: 10px;
  color: var(--red);
}
.integ-ident-meta {
  font-size: 10.5px;
  color: var(--ink-4);
  font-family: 'Martian Mono', monospace;
  white-space: nowrap;
}
/* Compact in-row action button with a destructive hover signal.
   Kept section-local because the transparent→red hover is a softer
   destructive cue than .inbox-btn--danger (which is solid-red always).
   Use this for "Disconnect" that shouldn't shout until the cursor
   commits. Reconnect / primary CTAs use .inbox-btn--sm + --primary. */
.integ-ident-act {
  font: inherit;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink-2);
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}
.integ-ident-act:hover { color: var(--red); border-color: var(--red); }
.integ-ident-confirm { display: flex; gap: 6px; }
.integ-ident-row--fail { background: var(--red-tint); }

/* ── Severity + status dot (shared primitive) ──
   9px with shape variation (solid / hollow / inset-ring / dashed-muted),
   so red-green confusions still parse in monochrome. Used by §18
   severity key, inbox in-row dots, and §19 lifecycle states. */
.inbox-dot,
.integ-status-dot {
  width: 9px; height: 9px;
  display: inline-block;
  background: var(--ink-4);
  flex-shrink: 0;
  box-sizing: border-box;
}

/* §18 severity variants — info/warning/error/success */
.inbox-dot--info    { background: var(--blue); }
.inbox-dot--warning { background: var(--amber); animation: integ-pulse 1.8s ease-in-out infinite; }
.inbox-dot--error   { background: var(--red); }
.inbox-dot--success { background: var(--green); }

/* §19 lifecycle variants — connected/pending/expired/failed/disconnected.
   Expired and disconnected carry shape (hollow/dashed) so they stay
   distinguishable from connected without relying on hue alone. */
.integ-status-dot--connected    { background: var(--green); }
.integ-status-dot--pending      { background: var(--amber); animation: integ-pulse 1.8s ease-in-out infinite; }
.integ-status-dot--expired      { background: transparent; border: 1.5px solid var(--amber); }
.integ-status-dot--failed       { background: var(--red); box-shadow: inset 0 0 0 1.5px var(--bg); }
.integ-status-dot--disconnected { background: transparent; border: 1px solid var(--ink-4); opacity: 0.65; }
@keyframes integ-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* ── Auth setup ── */
.integ-auth-demo {
  margin-top: 20px;
  border: 1px solid var(--border-2);
  background: var(--surface);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 620px;
}
.integ-auth-stack {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  max-width: 620px;
}
.integ-auth-stack .integ-state-label {
  margin-top: 28px;
  margin-bottom: 8px;
}
.integ-auth-stack .integ-state-label:first-child { margin-top: 0; }
.integ-auth-stack .integ-auth-demo { margin-top: 0; max-width: none; }
.integ-auth-demo--power {
  background: var(--surface-2);
  gap: 20px;
}
.integ-auth-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--border-2);
}
.integ-auth-group:first-of-type { padding-top: 0; border-top: none; }
.integ-auth-group-label {
  font-family: 'Martian Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-4);
}
.integ-auth-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.integ-auth-head-text strong {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  display: block;
  margin-bottom: 2px;
}
.integ-auth-head-text span {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.5;
}
.integ-auth-schemes { display: flex; gap: 6px; flex-wrap: wrap; }
.integ-auth-pill {
  font: inherit;
  cursor: pointer;
  padding: 4px 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 500;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.integ-auth-pill:hover { border-color: var(--ink-3); color: var(--ink); }
.integ-auth-pill.is-on {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.integ-auth-fields { display: flex; flex-direction: column; gap: 12px; }
.integ-auth-defaults {
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.55;
  margin: -2px 0 0;
}
.integ-mode-seg {
  display: flex;
  border: 1px solid var(--border);
  background: var(--border-2);
  gap: 1px;
}
.integ-mode-tab {
  flex: 1;
  font: inherit;
  cursor: pointer;
  padding: 7px 12px;
  border: none;
  background: var(--surface);
  color: var(--ink-3);
  font-size: 11.5px;
  font-weight: 500;
  transition: color 120ms ease;
}
.integ-mode-tab:hover { color: var(--ink); }
.integ-mode-tab.is-on {
  background: var(--surface);
  color: var(--ink);
}
.integ-mode-tab:not(.is-on) { background: transparent; }

.integ-auth-note {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border-2);
  background: var(--bg);
}
.integ-auth-note-glyph {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--ink);
  font-size: 13px;
  flex-shrink: 0;
}
.integ-auth-note strong {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  display: block;
  margin-bottom: 2px;
}
.integ-auth-note span {
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.5;
}

/* ── Scope chips ── */
.integ-scope-block { display: flex; flex-direction: column; gap: 10px; }
.integ-scope-head strong {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  display: block;
  margin-bottom: 2px;
}
.integ-scope-head span {
  font-size: 11.5px;
  color: var(--ink-3);
}
.integ-scope-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.integ-scope-chip {
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 7px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-2);
  font-family: 'Martian Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.integ-scope-chip:hover { border-color: var(--ink-3); color: var(--ink); }
.integ-scope-chip.is-on {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.integ-scope-check {
  width: 10px;
  height: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Onest', sans-serif;
  font-size: 10px;
  line-height: 1;
}

.integ-auth-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--border-2);
  gap: 16px;
}
.integ-auth-foot span {
  font-size: 11.5px;
  color: var(--ink-3);
}
/* Button primitive moved to .inbox-btn (see above).
   §19 reuses --ghost and --danger variants defined there. */

/* ── Toolboxes ── */
.integ-toolbox-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.integ-toolbox {
  border: 1px solid var(--border-2);
  background: var(--surface);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.integ-toolbox-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-2);
}
.integ-toolbox-name {
  font-family: 'Bricolage Grotesque', serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.integ-toolbox-count {
  font-family: 'Martian Mono', monospace;
  font-size: 10px;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.integ-toolbox-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.integ-toolbox-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--ink-2);
}
.integ-toolbox-mini {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.integ-toolbox-mini .integ-logo-mark { font-size: 11px; }
.integ-toolbox--empty { border-style: dashed; }
.integ-toolbox-empty {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.5;
  margin: 0 0 6px;
}

/* ── Provenance ── */
.integ-anatomy {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  flex-wrap: wrap;
}
.integ-anatomy-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.5;
}
.integ-anatomy-body strong {
  color: var(--ink);
  font-weight: 600;
  margin-right: 2px;
}
.integ-prov-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.integ-prov-cell { display: flex; flex-direction: column; gap: 8px; }
.integ-prov-label {
  font-family: 'Martian Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-4);
}
.integ-prov-demo {
  border: 1px solid var(--border-2);
  background: var(--surface);
  padding: 12px 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.integ-prov-demo-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.integ-prov-demo-body strong {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.25;
}
.integ-prov-meta {
  font-family: 'Martian Mono', monospace;
  font-size: 10px;
  color: var(--ink-4);
  letter-spacing: -0.01em;
}
.integ-prov-demo--chat { flex-direction: column; gap: 6px; }
.integ-prov-quote {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0;
  font-style: normal;
}
.integ-prov-quote mark {
  background: var(--amber-tint);
  color: var(--ink);
  padding: 0 2px;
}
.integ-prov-quote em { font-style: normal; color: var(--ink); font-weight: 500; }
.integ-prov-demo--peek { flex-direction: column; gap: 10px; }
.integ-prov-peek-head { display: flex; gap: 10px; align-items: center; }
.integ-prov-peek-head strong {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.integ-prov-peek-body {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
}
.integ-prov-peek-body > div { display: contents; }
.integ-prov-peek-body dt {
  font-family: 'Martian Mono', monospace;
  font-size: 10px;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.integ-prov-peek-body dd {
  font-size: 11.5px;
  color: var(--ink);
  margin: 0;
}
.integ-prov-peek-body dd em {
  font-style: normal;
  color: var(--ink-3);
  font-size: 10.5px;
}
.integ-prov-demo--bind { flex-direction: column; gap: 8px; }
.integ-prov-bind-name {
  font-family: 'Bricolage Grotesque', serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
}
.integ-prov-bind-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.integ-prov-bind-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 5px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-size: 11px;
  color: var(--ink-2);
}
.integ-prov-bind-chip .integ-logo-mark { font-size: 11px; }

/* ── Lifecycle / States ── */
.integ-state-key {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border-2);
  border: 1px solid var(--border-2);
}
.integ-state-row {
  display: grid;
  grid-template-columns: 14px 120px 1fr;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: var(--surface);
}
.integ-state-name {
  font-family: 'Bricolage Grotesque', serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
}
.integ-state-use {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.5;
}
.integ-state-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.integ-state-cell { display: flex; flex-direction: column; gap: 8px; }
.integ-state-label {
  font-family: 'Martian Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-4);
}
.integ-empty {
  border: 1px solid var(--border-2);
  background: var(--surface);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.integ-empty-title {
  font-family: 'Bricolage Grotesque', serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  margin: 0;
}
.integ-empty-body {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.5;
  margin: 0 0 6px;
}
.integ-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border-2);
  border: 1px solid var(--border-2);
}
.integ-skeleton {
  height: 80px;
  background: var(--surface);
  position: relative;
  overflow: hidden;
}
.integ-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--ink-4) 10%, transparent), transparent);
  animation: integ-shimmer 1.6s ease-in-out infinite;
}
@keyframes integ-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.integ-ident-row--confirm {
  border: 1px solid var(--border-2);
  grid-template-columns: 10px 1fr auto;
  border-top: 1px solid var(--border-2);
}

/* ── Integrations responsive ── */
@media (max-width: 960px) {
  .integ-card { min-height: 136px; padding: 14px 16px 12px; }
  .integ-auth-demo { padding: 18px; }
  .integ-toolbox { padding: 12px 14px; }
}

@media (max-width: 720px) {
  /* Lifecycle state-key rows collapse to dot + stacked text */
  .integ-state-row { grid-template-columns: 14px 1fr; row-gap: 2px; }
  .integ-state-row .integ-state-use { grid-column: 2; }

  /* Identity rows drop the timestamp column */
  .integ-ident-row { grid-template-columns: 10px 1fr auto; row-gap: 8px; }
  .integ-ident-meta { display: none; }
  .integ-ident-confirm { flex-wrap: wrap; gap: 6px; }

  /* Catalog: narrower tiles so two can still fit at tablet widths */
  .integ-catalog { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
  .integ-card { padding: 14px 14px 12px; min-height: 128px; }
  .integ-card-title { font-size: 13px; }

  /* Auth demo: tighten and stack the footer */
  .integ-auth-demo { padding: 16px; gap: 14px; max-width: 100%; }
  .integ-auth-demo--power { gap: 16px; }
  .integ-auth-group { padding-top: 12px; gap: 8px; }
  .integ-auth-stack { max-width: 100%; }
  .integ-auth-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding-top: 12px;
  }
  .integ-auth-foot span { order: 2; font-size: 11px; }
  .integ-auth-foot .inbox-btn { order: 1; width: 100%; }

  /* Segmented mode toggle: wrap labels if needed */
  .integ-mode-tab { font-size: 11px; padding: 7px 10px; }

  /* Scope chips: slightly more compact */
  .integ-scope-chip { font-size: 10px; padding: 4px 9px 4px 7px; }

  /* Anatomy callout: tighter padding */
  .integ-anatomy { gap: 12px; padding: 10px 12px; }

  /* Provenance + state + toolbox grids already auto-fill; nothing to do */
}

@media (max-width: 480px) {
  /* Single column everywhere the grid density stops paying off */
  .integ-catalog,
  .integ-toolbox-grid,
  .integ-prov-grid,
  .integ-state-grid,
  .integ-skeleton-grid {
    grid-template-columns: 1fr;
  }

  /* Identity rows: buttons drop below the name/label column */
  .integ-ident-row { grid-template-columns: 10px 1fr; }
  .integ-ident-row > .integ-ident-act,
  .integ-ident-row > .integ-ident-confirm {
    grid-column: 2;
    justify-self: start;
    margin-top: 2px;
  }

  /* Anatomy: stack the pin above the description lines */
  .integ-anatomy { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* Auth schemes + mode toggle: allow wrapping with tighter spacing */
  .integ-auth-schemes { flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════════
   STUDIO (section 20) — chat + canvas, kind-accented panel
   ═══════════════════════════════════════════════════════════ */

/* Studio is the chat column pattern at full-page scale — same rail, same
   composer, same cube-as-send, same UI glyph family as §08. The difference
   is that the chat fills most of the frame (there's no "main" behind it)
   and an asset canvas opens alongside when the conversation focuses
   something buildable. */
.studio-frame {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  min-height: 520px;
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
}
/* Canvas open: [rail | chat | canvas]. Chat narrows to make room; canvas
   takes ~56% when there's a splitter, but the initial spec gives it
   1.05fr vs chat's 1fr (slight canvas preference since that's where the
   "seeing it work" happens). */
.studio-frame--split {
  grid-template-columns: 48px minmax(360px, 1fr) auto minmax(360px, 1.05fr);
}

/* Studio's chat reuses .ask-column from §08 but with a few overrides:
   - No floating close button (Studio is the page, you navigate away)
   - Larger body padding (the column fills the full surface, not a 360px
     sub-region, so it can breathe more)
   - The column's right border is drawn by the next grid column (canvas
     side or the frame's own border) */
/* Studio's column has no close button — Studio is a destination, not a
   panel. The thread picker in the header stays; close is hidden. */
.ask-column--studio .ask-column-close { display: none; }
.ask-column--studio .ask-column-body {
  padding: 24px 24px 16px;
  gap: 16px;
}
.studio-frame .ask-column { border-right: 1px solid var(--border); }
.studio-frame--split .ask-column { border-right: none; }

/* (Retired: .studio-navbar*, .studio-chip* — Studio no longer has its own
    header chrome. The sidebar rail identifies which session is active (same
    pattern as §08 Shell); the chat column itself carries only transcript +
    composer, so a navbar would be redundant. Canvas still has its own
    panel-header (kept below) because the canvas needs identity chrome
    (kind underline) and close/fullscreen controls.) */

/* .studio-navbar-sep kept — the › separator is reused in .studio-panel-crumb
   on the canvas side, which still renders a breadcrumb. */
.studio-navbar-sep {
  color: var(--ink-4);
  font-weight: 300;
}
.studio-icon-btn {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-3);
  cursor: pointer;
  transition: background var(--dur-instant) var(--ease-out-quart),
              color var(--dur-instant) var(--ease-out-quart),
              border-color var(--dur-instant) var(--ease-out-quart);
}
.studio-icon-btn:hover {
  background: var(--bg-alt);
  color: var(--ink);
  border-color: var(--border);
}
.studio-icon-btn.is-open {
  background: var(--bg-alt);
  color: var(--ink);
  border-color: var(--border);
}
.studio-icon-btn svg { width: 13px; height: 13px; }

.studio-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  font-family: 'Martian Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--amber);
  background: color-mix(in oklch, var(--amber) 10%, transparent);
  border: 1px solid color-mix(in oklch, var(--amber) 35%, transparent);
}
.studio-status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--amber);
  animation: studio-pulse 1.4s var(--ease-out-quart) infinite;
}
@keyframes studio-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* ─── Transcript area ─── */
.studio-transcript {
  overflow: hidden;
  padding: 20px 18px;
  display: flex; flex-direction: column;
  min-height: 0;
}
.studio-transcript--filled {
  gap: 18px;
  padding: 22px 22px 20px;
}

/* Empty state */
.studio-empty {
  margin: auto;
  display: flex; flex-direction: column; align-items: center;
  gap: 22px;
  text-align: center;
  padding: 24px;
  max-width: 440px;
  width: 100%;
}
/* (Retired: .studio-empty-mark — the Zap icon in a box is gone. The cube is
    Studio's identity; showing a second glyph in the empty state would break
    the "one cube, two homes" rule. The title + suggestions carry the empty
    state on their own.) */
.studio-empty-title {
  font-family: 'Bricolage Grotesque', serif;
  font-weight: 800; font-size: 28px;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1.1;
}
.studio-suggestions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  width: 100%;
}
.studio-suggestion {
  background: var(--surface);
  padding: 12px 14px;
  font-family: 'Onest', sans-serif;
  font-size: 12px;
  color: var(--ink-2);
  text-align: left;
  line-height: 1.45;
  border: none;
  cursor: pointer;
  transition: background var(--dur-instant) var(--ease-out-quart),
              color var(--dur-instant) var(--ease-out-quart);
}
.studio-suggestion:hover {
  background: var(--bg-alt);
  color: var(--ink);
}

/* Messages */
.studio-msg {
  display: grid; gap: 8px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.studio-msg--user {
  background: var(--bg-alt);
  border-color: var(--border-2);
}
.studio-msg-role {
  font-family: 'Martian Mono', monospace;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.studio-msg-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
}
.studio-caret {
  display: inline-block;
  width: 7px; height: 14px;
  background: var(--ink);
  margin-left: 2px;
  vertical-align: text-top;
  animation: palette-blink 1.1s steps(2, end) infinite;
}
.studio-msg-tool {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 6px;
  background: var(--bg-alt);
  border: 1px solid var(--border-2);
  font-family: 'Martian Mono', monospace;
  font-size: 11px;
  color: var(--ink-2);
  justify-self: start;
}
.studio-msg-tool-icon {
  color: var(--kind-figment);
  font-size: 11px;
  line-height: 1;
}
.studio-msg-tool-name { color: var(--ink); font-weight: 600; }
.studio-msg-tool-status { color: var(--ink-3); }

/* (Retired: .studio-composer, .studio-composer-field, .studio-composer-row,
    .studio-composer-placeholder, .studio-composer-hint, .studio-send —
    Studio now uses the same .ask-composer stack as §08: input row +
    sub-bar, cube-as-send on the right, + on the left. One composer,
    two homes — chat column and Studio.) */

/* ─── Splitter ─── */
.studio-splitter {
  width: 4px;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  gap: 2px;
  background: var(--border);
  cursor: col-resize;
  transition: background var(--dur-instant) var(--ease-out-quart);
}
.studio-splitter:hover { background: var(--ink-4); }
.studio-splitter i {
  width: 2px; height: 2px;
  background: var(--ink-3);
  border-radius: 50%;
}

/* ─── Canvas panel ─── */
.studio-canvas {
  display: grid;
  grid-template-rows: auto auto 1fr;
  min-width: 0;
  min-height: 0;
  background: var(--surface);
  overflow: hidden;
}
.studio-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface);
  min-height: 44px;
}
.studio-panel-crumb {
  display: flex; align-items: center; gap: 6px;
  font-family: 'Martian Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  min-width: 0;
  flex: 1;
}
.studio-panel-current {
  color: var(--ink);
  font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.studio-panel-actions {
  display: inline-flex; align-items: center; gap: 2px;
}

/* The 2px kind-color underline — identity's signature anchor. */
.studio-panel-underline {
  height: 2px;
  width: 100%;
  background: var(--panel-kind, transparent);
  transition: background var(--dur-base) var(--ease-out-quart);
}
.studio-canvas[data-kind="figment"]         { --panel-kind: var(--kind-figment); }
.studio-canvas[data-kind="workflow"]        { --panel-kind: var(--kind-workflow); }
.studio-canvas[data-kind="board"]           { --panel-kind: var(--kind-board); }
.studio-canvas[data-kind="integration"]     { --panel-kind: var(--kind-integration); }
.studio-canvas[data-kind="document"]        { --panel-kind: var(--kind-document); }
.studio-canvas[data-kind="memory"]          { --panel-kind: var(--kind-memory); }

/* Canvas body (live content goes here) */
.studio-canvas-body {
  padding: 18px;
  background: var(--bg);
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.studio-canvas-runtime {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
}
/* (Retired: .studio-canvas-runtime-head, -dot, -title — the outer
    .studio-panel-header already names the asset ("CAMPAIGN Q2") and carries
    identity via the 2px kind-underline. An inner runtime header repeating
    the same info was nested chrome. The runtime body now mounts directly
    under .studio-canvas-runtime with no secondary header.) */
.studio-canvas-runtime-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  min-height: 0;
}

/* Mock runtime "artifact" — a fake rendered landing page */
.studio-art-hero {
  display: grid;
  gap: 18px;
  max-width: 360px;
  width: 100%;
}
.studio-art-headline {
  font-family: 'Bricolage Grotesque', serif;
  font-weight: 800; font-size: 26px;
  letter-spacing: -0.035em;
  color: var(--ink);
  line-height: 1.05;
}
.studio-art-stat {
  display: grid; gap: 6px;
  padding: 14px 16px;
  background: var(--bg-alt);
  border: 1px solid var(--border-2);
}
.studio-art-stat-num {
  font-family: 'Bricolage Grotesque', serif;
  font-weight: 800; font-size: 40px;
  letter-spacing: -0.04em;
  color: var(--kind-figment);
  line-height: 1;
}
.studio-art-stat-unit {
  font-size: 22px;
  margin-left: 1px;
}
.studio-art-stat-label {
  font-size: 11px;
  color: var(--ink-3);
}
.studio-art-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.studio-art-cta-input {
  background: var(--surface);
  padding: 10px 12px;
  font-family: 'Martian Mono', monospace;
  font-size: 11px;
  color: var(--ink-3);
}
.studio-art-cta-btn {
  background: var(--ink);
  color: var(--bg);
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 600;
}

/* ─── Underline triptych (detail cards) ─── */
.studio-underline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.studio-underline-card {
  display: grid;
  gap: 10px;
  padding: 14px 16px 16px;
  background: var(--surface);
}
.studio-underline-crumb {
  display: flex; align-items: center; gap: 6px;
  font-family: 'Martian Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 4px 0;
}
.studio-underline-crumb .studio-navbar-sep { color: var(--ink-4); }
.studio-underline-rule {
  height: 2px;
  width: 100%;
  background: var(--panel-kind, var(--ink-4));
}
.studio-underline-card[data-kind="figment"]   { --panel-kind: var(--kind-figment); }
.studio-underline-card[data-kind="workflow"]  { --panel-kind: var(--kind-workflow); }
.studio-underline-card[data-kind="document"]  { --panel-kind: var(--kind-document); }
.studio-underline-card[data-kind="board"]     { --panel-kind: var(--kind-board); }
.studio-underline-meta {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-3);
}
.studio-underline-badge {
  margin-left: auto;
  padding: 2px 7px;
  font-size: 10px;
  border: 1px solid var(--border-2);
  background: var(--bg-alt);
  color: var(--ink-2);
  text-transform: none;
  letter-spacing: 0.02em;
}
.studio-underline-publish {
  padding: 2px 8px;
  font-size: 10px;
  border: 1px solid color-mix(in oklch, var(--kind-figment) 40%, transparent);
  background: color-mix(in oklch, var(--kind-figment) 10%, transparent);
  color: var(--kind-figment);
  text-transform: none;
  letter-spacing: 0.02em;
}

@media (max-width: 720px) {
  .studio-frame--split {
    grid-template-columns: 1fr;
  }
  .studio-splitter { display: none; }
  .studio-canvas { border-top: 1px solid var(--border); }
}