:root {
      color-scheme: light;

      /* Primitive colors */
      --color-canvas: #fdfbf7;
      --color-surface: #fffefc;
      --color-surface-raised: #fffdf9;
      --color-ink: #2a1d11;
      --color-muted: #453729;
      --color-line: #e4d6c0;
      --color-soft: #f6eee0;
      --color-accent-600: #a86826;
      --color-accent-700: #92591f;
      --color-accent-800: #765027;
      --color-accent-900: #573a21;
      --color-accent-mid: #d4a574;
      --color-accent-soft: #f5e6d0;
      --color-accent-pale: #fff8ee;
      --color-white: #fff;
      --color-body-warm: #4a433a;
      --color-text-warm: #655d54;
      --color-text-softer: #746655;
      --color-danger: #a34d40;
      --color-danger-strong: #8f3421;
      --color-danger-soft: #f5e3dc;
      --color-danger-pale: #f7ebe7;
      --color-danger-border: #d9a494;
      --color-danger-text: #955647;
      --color-warning: #86600f;
      --color-warning-soft: #fbefc5;
      --color-warning-border: #e6c56f;
      --color-success: #387044;
      --color-success-soft: #e4f2e6;
      --color-success-border: #a9cfb0;
      --color-online: #7e9a75;
      --color-offline: #bd795d;
      --color-hair: #efe6d7;
      --color-board-canvas: #fdfaf4;
      --color-connector: #b99a72;
      --color-connector-arrow: #8b6a44;
      --color-selection: #fff7dc;
      --color-selection-border: #ead9a3;
      --color-activity-create: #71866a;
      --color-activity-create-soft: #e1e8dc;
      --color-activity-update: #8a744f;
      --color-activity-update-soft: #eee5d5;
      --color-activity-move: #7a6fa5;
      --color-activity-move-soft: #e8e3f1;
      --color-activity-restore: #647f9b;
      --color-activity-restore-soft: #e0e8f0;
      --color-activity-delete: #ad6f5c;
      --color-activity-delete-soft: #f0ded7;
      --color-recurring: #7e9476;
      --color-recurring-soft: #e4eade;
      --color-recurring-text: #54684e;
      --color-matrix-deep: #1c1309;
      --color-matrix-muted: #453729;
      --color-matrix-faint: #564839;
      --color-matrix-ground: #faf6ee;
      --color-priority-high: #9a3a28;
      --color-priority-high-bg: #f9ece7;
      --color-priority-medium: #7d5f12;
      --color-priority-medium-bg: #f7f0dd;
      --color-priority-low: #456039;
      --color-priority-low-bg: #eef2ea;
      --color-codex: #9a6529;
      --color-done: #776546;
      --color-espresso: #553d25;
      --color-espresso-high: #6b5133;
      --color-espresso-deep: #3f2c19;
      --color-on-espresso: #fff4e2;
      --color-on-espresso-muted: #eed9bc;
      --color-band: #f6eee0;
      --color-band-strong: #f0e3cd;
      --color-timeline-today: #c68a63;
      --color-project-1: #9a7b6a;
      --color-project-1-soft: #eee5de;
      --color-project-1-text: #5f473b;
      --color-project-2: #6f7d78;
      --color-project-2-soft: #e3e8e5;
      --color-project-2-text: #46534f;
      --color-project-3: #a5763f;
      --color-project-3-soft: #f0e4d4;
      --color-project-3-text: #684622;
      --color-project-4: #8a8452;
      --color-project-4-soft: #ebe9d9;
      --color-project-4-text: #56522f;
      --color-project-5: #8a6a5e;
      --color-project-5-soft: #ece1dd;
      --color-project-5-text: #594238;
      --color-project-6: #7d735f;
      --color-project-6-soft: #e9e5dc;
      --color-project-6-text: #4e4738;
      --color-project-7: #9b8060;
      --color-project-7-soft: #efe6da;
      --color-project-7-text: #614d36;
      --color-project-8: #747b61;
      --color-project-8-soft: #e6e8dc;
      --color-project-8-text: #494e39;

      /* Semantic colors */
      --bg: var(--color-canvas);
      --panel: var(--color-surface);
      --ink: var(--color-ink);
      --muted: var(--color-muted);
      --line: var(--color-line);
      --hair: var(--color-hair);
      --soft: var(--color-soft);
      --accent: var(--color-accent-600);
      --accent-hover: var(--color-accent-700);
      --accent-strong: var(--color-accent-800);
      --accent-deep: var(--color-accent-900);
      --accent-mid: var(--color-accent-mid);
      --accent-soft: var(--color-accent-soft);
      --accent-pale: var(--color-accent-pale);
      --danger: var(--color-danger);
      --codex: var(--color-codex);
      --claude: var(--accent);
      --active: var(--accent);
      --done: var(--color-done);
      --espresso: var(--color-espresso);
      --espresso-high: var(--color-espresso-high);
      --espresso-deep: var(--color-espresso-deep);
      --on-espresso: var(--color-on-espresso);
      --on-espresso-muted: var(--color-on-espresso-muted);
      --band: var(--color-band);
      --band-strong: var(--color-band-strong);
      --ground: var(--color-matrix-ground);
      --board-canvas: var(--color-board-canvas);
      --connector: var(--color-connector);
      --connector-arrow: var(--color-connector-arrow);

      /* Typography scale — 6 steps, no 1px neighbours.
         13 meta · 15 body · 17 title · 20/26/34 headings.
         Low end sits 1px above the old scale: 12px was carrying most of the
         interface (181 uses) and read as cramped. */
      --fs-caption: 13px;
      --fs-body: 15px;
      --fs-title: 17px;
      --fs-h3: 20px;
      --fs-h2: 26px;
      --fs-h1: 34px;
      --fs-mobile-page-title: 22px;
      /* iOS zooms focused form controls below 16px; keep this semantic
         exception separate from the display typography scale. */
      --fs-mobile-control: 16px;
      /* Collapsed aliases: the old 13px/15px middle steps were visually
         indistinguishable from their neighbours and made text look uneven. */
      --fs-label: var(--fs-body);
      --fs-body-lg: var(--fs-title);

      /* One wordmark recipe keeps the signed-out and workspace headers from
         drifting into visually different brands. */
      --brand-serif: "Songti SC", "STSong", "Noto Serif CJK SC", serif;
      --brand-wordmark-weight: 500;
      --brand-wordmark-tracking: .1em;

      /* Spacing scale */
      --sp-1: 4px;
      --sp-2: 8px;
      --sp-3: 12px;
      --sp-4: 16px;
      --sp-5: 24px;
      --sp-6: 32px;

      /* One shared workspace width keeps navigation and page transitions
         stable. Wide screens add room without changing each page's internal
         composition; responsive reflow is reserved for narrow viewports. */
      --shell-max-workspace: 1720px;
      --shell-inline-gutter: 48px;

      /* Radius scale — panels keep a restrained 8px curve while interactive
         controls sit slightly rounder (10px) so they read as tappable
         without turning soft. */
      --r-card: 8px;
      --r-sm: 6px;
      --r-md: 10px;
      --r-lg: 14px;
      --r-full: 999px;
      --radius-control: var(--r-md);
      --radius-card: var(--r-card);
      --radius-panel: var(--r-card);

      /* Semantic surfaces and borders */
      --surface-glass: color-mix(in srgb, var(--panel) 88%, transparent);
      --surface-glass-strong: color-mix(in srgb, var(--panel) 94%, transparent);
      --surface-soft: color-mix(in srgb, var(--soft) 58%, var(--panel));
      --border-subtle: color-mix(in srgb, var(--line) 72%, transparent);
      --border-muted: color-mix(in srgb, var(--line) 82%, transparent);
      --accent-border-subtle: color-mix(in srgb, var(--accent-mid) 28%, var(--line));
      --accent-border: color-mix(in srgb, var(--accent-mid) 38%, var(--line));
      --accent-border-strong: color-mix(in srgb, var(--accent-mid) 58%, var(--line));
      --accent-surface-subtle: color-mix(in srgb, var(--accent-pale) 35%, var(--panel));
      --accent-surface: color-mix(in srgb, var(--accent-pale) 58%, var(--panel));
      --accent-surface-strong: color-mix(in srgb, var(--accent-pale) 72%, var(--panel));
      --accent-overlay: color-mix(in srgb, var(--accent-soft) 54%, transparent);
      --accent-ink: color-mix(in srgb, var(--accent) 82%, var(--ink));
      --text-secondary: color-mix(in srgb, var(--ink) 64%, var(--muted));
      --text-muted-faint: color-mix(in srgb, var(--muted) 46%, transparent);
      --danger-surface: color-mix(in srgb, var(--color-danger-soft) 62%, var(--panel));
      --danger-border-mixed: color-mix(in srgb, var(--color-danger-border) 42%, var(--line));
      --success-surface: color-mix(in srgb, var(--color-success-soft) 42%, var(--panel));
      --success-overlay: color-mix(in srgb, var(--color-success) 12%, transparent);
      --runtime-guard-backdrop: color-mix(in srgb, var(--color-espresso-deep) 46%, transparent);
      --matrix-label: var(--color-matrix-muted);
      --matrix-label-faint: var(--color-matrix-faint);
      --matrix-label-strong: var(--color-matrix-deep);
      --matrix-focus: var(--color-matrix-ground);
      --matrix-do: linear-gradient(150deg, var(--band-strong), var(--band));
      --matrix-watch: var(--panel);
      --matrix-quick: var(--color-matrix-ground);
      --matrix-divider: var(--line);
      --matrix-priority-high: var(--color-priority-high);
      --matrix-priority-high-bg: var(--color-priority-high-bg);
      --matrix-priority-high-border: color-mix(in srgb, var(--color-priority-high) 32%, var(--line));
      --matrix-priority-medium: var(--color-priority-medium);
      --matrix-priority-medium-bg: var(--color-priority-medium-bg);
      --matrix-priority-medium-border: color-mix(in srgb, var(--color-priority-medium) 32%, var(--line));
      --matrix-priority-low: var(--color-priority-low);
      --matrix-priority-low-bg: var(--color-priority-low-bg);
      --matrix-priority-low-border: color-mix(in srgb, var(--color-priority-low) 32%, var(--line));

      /* Dynamic component colors resolve against each component's local variables */
      --task-surface-subtle: color-mix(in srgb, var(--task-soft, var(--soft)) 35%, var(--panel));
      --task-surface: color-mix(in srgb, var(--task-soft, var(--soft)) 58%, var(--panel));
      --task-surface-strong: color-mix(in srgb, var(--task-soft, var(--soft)) 76%, var(--panel));
      --task-surface-whisper: color-mix(in srgb, var(--panel) 97%, var(--task-soft, var(--soft)));
      --task-surface-nearwhite: color-mix(in srgb, var(--panel) 99%, var(--task-soft, var(--soft)));
      --task-surface-hover: color-mix(in srgb, var(--panel) 92%, var(--task-soft, var(--soft)));
      --task-overlay: color-mix(in srgb, var(--task-soft, var(--soft)) 72%, transparent);
      --task-border-subtle: color-mix(in srgb, var(--task-color, var(--accent)) 28%, var(--line));
      --task-border: color-mix(in srgb, var(--task-color, var(--accent)) 42%, var(--line));
      --task-border-strong: color-mix(in srgb, var(--task-color, var(--accent)) 58%, var(--line));
      --task-accent-muted: color-mix(in srgb, var(--task-color, var(--accent)) 72%, var(--panel));
      --task-ring: color-mix(in srgb, var(--task-color, var(--accent)) 28%, transparent);
      --folder-surface: color-mix(in srgb, var(--folder-soft, var(--accent-pale)) 42%, var(--panel));
      --folder-ring: color-mix(in srgb, var(--folder-color, var(--accent)) 18%, transparent);
      --activity-surface-subtle: color-mix(in srgb, var(--activity-soft, var(--soft)) 28%, var(--panel));
      --activity-surface: color-mix(in srgb, var(--activity-soft, var(--soft)) 72%, var(--panel));
      --activity-border: color-mix(in srgb, var(--activity-color, var(--accent)) 34%, var(--line));
      --activity-ink: color-mix(in srgb, var(--activity-color, var(--accent)) 84%, var(--ink));
      --interactive-hover: color-mix(in srgb, currentColor 9%, transparent);
      --selected-bg: var(--band-strong);
      --selected-color: var(--espresso-deep);
      --selected-border: var(--espresso-high);
      --scrollbar-thumb: rgb(168 104 38 / .34);
      --scrollbar-thumb-hover: rgb(168 104 38 / .52);

      /* Component tokens */
      --card-padding: 20px;
      --panel-padding: 28px;
      --control-height: 44px;
      --height-control: var(--control-height);
      --matrix-chip-padding: 6px 11px 6px 9px;
      --matrix-chip-shadow: 0 2px 8px rgba(80, 56, 28, .07);
      --priority-pill-width: 76px;
      --idea-card-category-width: 96px;
      --idea-card-control-gap: calc(var(--sp-6) + var(--sp-6));
      --flow-canvas-height: 948px;
      --workspace-header-top-space: var(--sp-6);
      --workspace-header-top-space-mobile: calc(14px + 14px);
      --workspace-header-nav-space: var(--sp-5);
      --workspace-header-nav-space-mobile: calc(var(--sp-5) + var(--sp-4) + var(--sp-1));
      --workspace-page-heading-space: var(--sp-6);
      --workspace-page-content-space: var(--sp-5);
      --workspace-section-space: var(--sp-6);
      --overview-stat-gap: 10px;
      --runtime-guard-copy-gap: 10px;
      --overview-stat-radius: var(--radius-card);
      --overview-stat-value-size: 38px;
      --overview-stat-detail-size: 12px;
      --overview-stat-key-ink: #8a5219;
      --overview-stat-key-border: color-mix(in srgb, var(--accent) 24%, var(--line));
      --overview-stat-key-detail: color-mix(in srgb, var(--overview-stat-key-ink) 72%, var(--muted));
      --canvas-node-shadow: 0 4px 14px rgba(80, 56, 28, .09);
      --shadow: 0 1px 3px rgba(66, 44, 20, .04), 0 12px 36px rgba(66, 44, 20, .06);
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, "Helvetica Neue", sans-serif;
    }
    * { box-sizing: border-box; }
    [hidden] { display: none !important; }

    body {
      margin: 0;
      min-height: 100vh;
      overflow-x: hidden;
      background:
        radial-gradient(ellipse 60% 40% at 12% -6%, rgba(255,255,255,.75), transparent 60%),
        radial-gradient(ellipse 55% 35% at 92% 2%, rgba(232,212,180,.13), transparent 60%),
        var(--bg);
      color: var(--ink);
      font-size: var(--fs-body);
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
    }

    button, input, textarea, select {
      font: inherit;
    }

    button {
      border: 1px solid var(--line);
      background: var(--panel);
      color: var(--ink);
      min-height: 36px;
      border-radius: var(--radius-control);
      padding: 0 12px;
      cursor: pointer;
    }

    button:hover { border-color: var(--accent-mid); background: var(--accent-pale); }
    button:disabled {
      cursor: not-allowed;
      opacity: .48;
      box-shadow: none;
    }
    button.primary {
      background: linear-gradient(180deg, var(--espresso-high), var(--espresso));
      color: var(--on-espresso);
      border-color: var(--espresso);
      font-weight: 650;
      box-shadow: 0 4px 12px rgba(85,61,37,.16);
    }
    button.primary:hover { background: var(--espresso-deep); border-color: var(--espresso-deep); }
    button.ghost { background: transparent; }
    button.icon { width: 36px; padding: 0; display: inline-grid; place-items: center; }
    button.workspace-page-back {
      display: inline-flex;
      width: max-content;
      min-height: 42px;
      align-items: center;
      justify-content: center;
      padding: 0 var(--sp-3);
      border: 1px solid var(--line);
      background: var(--panel);
      color: var(--ink);
      font-size: var(--fs-label);
    }
    button.workspace-page-back:hover {
      border-color: var(--accent-border);
      background: var(--accent-pale);
      color: var(--accent);
    }

    .shell {
      width: min(var(--shell-max-workspace), calc(100vw - var(--shell-inline-gutter)));
      margin: 0 auto;
      padding: var(--workspace-header-top-space) 0 calc(var(--sp-6) + var(--sp-5));
    }

    #appShell > header {
      display: flex;
      flex-wrap: wrap;
      gap: var(--sp-4);
      align-items: center;
      justify-content: space-between;
      margin-bottom: 0;
    }

    h1 {
      margin: 0;
      font-size: var(--fs-h1);
      line-height: 1.15;
      letter-spacing: -.035em;
      font-weight: 600;
    }

    .workspace-brand-lockup {
      display: flex;
      flex: 0 0 auto;
      min-width: 0;
      align-items: center;
      gap: var(--sp-4);
    }
    .workspace-brand-mark {
      width: auto;
      height: 40px;
      display: grid;
      flex: 0 0 auto;
      place-items: center;
      padding: 0 var(--sp-3) 3px;
      border: 0;
      border-radius: 0;
      background: var(--espresso);
      color: var(--on-espresso);
      font-family: var(--brand-serif);
      font-size: var(--fs-h3);
      font-weight: var(--brand-wordmark-weight);
      letter-spacing: var(--brand-wordmark-tracking);
      text-indent: var(--brand-wordmark-tracking);
      line-height: 1;
      box-shadow: none;
    }
    .workspace-brand-copy {
      flex: 0 0 auto;
      min-width: max-content;
    }
    .workspace-brand-copy > p {
      margin: 0 0 5px;
      color: var(--accent);
      font-size: var(--fs-caption);
      font-weight: 750;
      letter-spacing: .28em;
      line-height: 1;
    }
    .workspace-brand-title {
      display: flex;
      align-items: baseline;
      gap: var(--sp-3);
    }
    .workspace-brand-title h1 {
      font-family: var(--brand-serif);
      font-size: var(--fs-h2);
      font-weight: 500;
      letter-spacing: .06em;
      text-indent: .06em;
    }
    .workspace-brand-title span {
      color: var(--ink);
      font-family: inherit;
      font-size: var(--fs-h2);
      font-weight: 400;
      letter-spacing: .1em;
      white-space: nowrap;
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .toolbar {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: var(--sp-2);
    }
    .account-utility-group {
      --utility-control-size: 40px;
      display: inline-flex;
      flex: 0 0 auto;
      min-height: var(--utility-control-size);
      align-items: center;
      gap: var(--sp-2);
    }
    .save-status-pill {
      display: inline-flex;
      min-height: var(--utility-control-size);
      align-items: center;
      gap: var(--sp-2);
      padding: 0 12px;
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-control);
      background: var(--surface-glass-strong);
      color: var(--muted);
      font-size: var(--fs-caption);
      font-weight: 650;
      white-space: nowrap;
      box-shadow: 0 3px 10px rgba(66,44,20,.04);
    }
    .save-status-pill[hidden] { display: none; }
    .save-status-pill:disabled {
      opacity: 1;
      cursor: default;
    }
    .save-status-dot {
      width: 8px;
      height: 8px;
      flex: 0 0 auto;
      border-radius: var(--r-full);
      background: currentColor;
    }
    .save-status-pill[data-sync-state="saving"] {
      border-color: var(--accent-border);
      background: var(--accent-surface-subtle);
      color: var(--accent-ink);
    }
    .save-status-pill[data-sync-state="saving"] .save-status-dot {
      width: 14px;
      height: 14px;
      border: 2px solid currentColor;
      border-top-color: transparent;
      background: transparent;
      animation: save-status-spin .8s linear infinite;
    }
    .save-status-pill[data-sync-state="saved"] {
      border-color: var(--color-success-border);
      background: var(--success-surface);
      color: var(--color-success);
    }
    .save-status-pill[data-sync-state="failed"] {
      border-color: var(--color-danger-border);
      background: var(--danger-surface);
      color: var(--color-danger-strong);
    }
    .save-status-alert {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: var(--sp-3);
      margin-top: var(--sp-4);
      padding: 12px 14px;
      border: 1px solid var(--color-danger-border);
      border-radius: var(--radius-card);
      background: var(--danger-surface);
      color: var(--color-danger-strong);
    }
    .save-status-alert[hidden] { display: none; }
    .save-status-alert-mark {
      display: grid;
      width: 26px;
      height: 26px;
      place-items: center;
      border-radius: var(--r-full);
      background: var(--color-danger-strong);
      color: var(--color-white);
      font-size: var(--fs-label);
      font-weight: 800;
    }
    .save-status-alert-copy {
      display: grid;
      min-width: 0;
      gap: var(--sp-1);
    }
    .save-status-alert-copy strong {
      color: var(--color-danger-strong);
      font-size: var(--fs-label);
      line-height: 1.3;
    }
    .save-status-alert-copy p {
      margin: 0;
      color: var(--color-danger-text);
      font-size: var(--fs-caption);
      line-height: 1.5;
      overflow-wrap: anywhere;
    }
    .save-status-alert-actions {
      display: flex;
      align-items: center;
      gap: var(--sp-2);
    }
    .save-status-alert-actions button {
      min-height: 34px;
      border-color: var(--color-danger-border);
      background: rgba(255,255,255,.56);
      color: var(--color-danger-strong);
      font-size: var(--fs-caption);
    }
    .save-status-alert-actions button:hover {
      border-color: var(--color-danger-strong);
      background: rgba(255,255,255,.8);
    }
    @keyframes save-status-spin {
      to { transform: rotate(360deg); }
    }
    @media (prefers-reduced-motion: reduce) {
      .save-status-pill[data-sync-state="saving"] .save-status-dot {
        animation: none;
        border-top-color: currentColor;
        opacity: .68;
      }
    }
    .sync-button {
      display: inline-flex;
      height: var(--utility-control-size);
      min-height: var(--utility-control-size);
      align-items: center;
      gap: var(--sp-2);
      padding: 0 14px;
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-control);
      background: var(--surface-glass-strong);
      color: var(--color-body-warm);
      font-size: var(--fs-label);
      box-shadow: 0 3px 10px rgba(66,44,20,.04);
    }
    .sync-button svg {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: currentColor;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 1.5;
    }
    .sync-button:hover {
      border-color: var(--accent-border);
      background: var(--accent-pale);
      color: var(--accent-ink);
    }
    @media (max-width: 600px) {
      #appShell > header {
        flex-wrap: nowrap;
        gap: var(--sp-2);
      }
      .workspace-brand-lockup { gap: var(--sp-2); }
      .workspace-brand-mark {
        height: 36px;
        padding-inline: var(--sp-2);
        font-size: var(--fs-title);
      }
      .workspace-brand-title span {
        font-size: var(--fs-title);
        letter-spacing: .04em;
      }
      .account-utility-group { gap: var(--sp-1); }
      .save-status-pill {
        min-height: 36px;
        padding: 0 9px;
      }
      .sync-button {
        width: var(--utility-control-size);
        justify-content: center;
        padding: 0;
      }
      .sync-button span { display: none; }
      .save-status-alert {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
      }
      .save-status-alert-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
      }
    }

    .page-heading {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: var(--sp-5);
      margin: var(--workspace-page-heading-space) 0 0;
    }
    .page-heading h2 {
      margin: 0;
      color: var(--color-ink);
      font-size: var(--fs-h2);
      font-weight: 600;
      letter-spacing: -.025em;
      line-height: 1.15;
    }
    .page-heading p {
      margin: var(--sp-2) 0 0;
      color: var(--muted);
      font-size: var(--fs-label);
      line-height: 1.65;
    }

    .metrics {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: var(--overview-stat-gap);
      margin: var(--workspace-page-content-space) 0 0;
    }
    .overview-stat {
      position: relative;
      min-height: 0;
      overflow: hidden;
      padding: 20px 20px 18px;
      border: 1px solid var(--hair);
      border-radius: var(--overview-stat-radius);
      background: var(--ground);
    }
    .overview-stat.is-key {
      border-color: var(--overview-stat-key-border);
      background: linear-gradient(160deg, var(--band-strong), var(--band));
    }
    .overview-stat > p {
      margin: 0;
      overflow: hidden;
      color: var(--muted);
      font-size: var(--fs-caption);
      letter-spacing: .14em;
      line-height: 1.5;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .overview-stat > strong {
      display: block;
      margin-top: var(--sp-3);
      color: var(--color-matrix-deep);
      font-size: var(--overview-stat-value-size);
      font-weight: 500;
      line-height: 1;
      letter-spacing: -.02em;
      font-variant-numeric: proportional-nums lining-nums;
      font-feature-settings: "pnum" 1, "lnum" 1;
    }
    .overview-stat.is-key > strong { color: var(--overview-stat-key-ink); }
    .overview-stat > small {
      display: block;
      margin-top: 9px;
      overflow: hidden;
      color: var(--color-matrix-faint);
      font-size: var(--overview-stat-detail-size);
      line-height: 1.5;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .overview-stat.is-key > small { color: var(--overview-stat-key-detail); }
    .overview-issues { margin-top: var(--workspace-section-space); }
    .overview-issue-summary {
      display: flex;
      width: 100%;
      min-height: 58px;
      align-items: center;
      gap: var(--sp-3);
      padding: 9px var(--sp-4);
      border-color: var(--accent-border-subtle);
      border-radius: var(--radius-card);
      background: linear-gradient(90deg, var(--accent-surface-strong), var(--panel));
      color: var(--ink);
      text-align: left;
      box-shadow: none;
    }
    .overview-issue-summary:hover {
      border-color: var(--accent-border);
      background: linear-gradient(90deg, var(--band), var(--accent-surface));
    }
    .overview-issue-mark {
      display: inline-flex;
      width: 28px;
      height: 28px;
      place-items: center;
      align-items: center;
      justify-content: center;
      color: var(--accent);
      line-height: 1;
    }
    .overview-issue-mark .decision-flag { width: 15px; height: 17px; }
    .overview-issue-copy {
      display: flex;
      flex: 1 1 auto;
      min-width: 0;
      align-items: center;
      gap: var(--sp-2);
    }
    .overview-issue-copy > strong {
      flex: 0 0 auto;
      color: var(--espresso);
      font-size: var(--fs-label);
      line-height: 1.5;
    }
    .overview-issue-copy > span {
      color: var(--muted);
      font-size: var(--fs-caption);
      line-height: 1.5;
      white-space: nowrap;
    }
    .overview-issue-meta {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: var(--sp-2);
      color: var(--muted);
      font-size: var(--fs-caption);
      line-height: 1.5;
      white-space: nowrap;
    }
    .overview-issue-meta > span {
      padding: 3px 7px;
      border-radius: var(--r-full);
      background: var(--panel);
    }
    .overview-issue-meta > b { color: var(--accent); font-weight: 650; }
    .overview-issue-overdue {
      border: 1px solid var(--danger-border-mixed);
      background: var(--danger-surface) !important;
      color: var(--danger);
    }
    @media (max-width: 820px) {
      .overview-issue-summary { flex-wrap: wrap; }
      .overview-issue-copy { min-width: calc(100% - 48px); }
      .overview-issue-meta { width: 100%; padding-left: 40px; flex-wrap: wrap; justify-content: flex-start; }
    }

    .idea-overview,
    .task-overview {
      background: var(--surface-glass-strong);
      border: 1px solid var(--line);
      border-radius: var(--radius-card);
      box-shadow: var(--shadow);
    }

    .idea-overview {
      display: grid;
      align-content: center;
      min-height: 208px;
      padding: var(--panel-padding);
      color: var(--accent);
      background: linear-gradient(145deg, var(--accent-surface-strong), var(--panel));
    }
    .idea-overview-kicker {
      margin-bottom: 20px;
      font-size: var(--fs-body-lg);
      font-weight: 700;
      letter-spacing: .04em;
    }
    .idea-overview > strong {
      display: block;
      color: var(--accent-ink);
      font-size: var(--fs-h1);
      font-variant-numeric: tabular-nums;
      line-height: 1;
      letter-spacing: -.04em;
    }
    .idea-overview-label {
      margin-top: 8px;
      font-size: var(--fs-title);
      font-weight: 650;
    }
    .idea-overview small {
      margin-top: 16px;
      padding-top: 14px;
      border-top: 1px solid var(--accent-border-subtle);
      color: var(--muted);
      font-size: var(--fs-caption);
      line-height: 1.5;
    }

    .task-overview {
      min-width: 0;
      padding: var(--card-padding) var(--panel-padding);
      border-top: 4px solid var(--espresso);
      background: linear-gradient(160deg, var(--panel), var(--accent-surface-subtle));
    }
    .task-overview-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--sp-4);
      margin-bottom: 8px;
    }
    .task-overview-head h2 {
      margin: 0;
      color: var(--ink);
      font-size: var(--fs-body-lg);
      font-weight: 650;
    }
    .task-overview-head > span { color: var(--muted); font-size: var(--fs-caption); }
    .task-overview-table { min-width: 520px; }
    .overview-row {
      display: grid;
      grid-template-columns: minmax(84px, .8fr) repeat(3, minmax(90px, 1fr));
      align-items: center;
      padding: var(--sp-3) 0;
      border-bottom: 1px solid var(--border-subtle);
      line-height: 1.5;
    }
    .overview-row:last-child { border-bottom: 0; }
    .overview-row.is-head {
      min-height: auto;
      padding: var(--sp-2);
      border-radius: var(--r-sm);
      background: var(--band);
      color: var(--espresso);
      font-size: var(--fs-caption);
      font-weight: 650;
      text-align: center;
    }
    .overview-row.is-head > :first-child { text-align: left; }
    .overview-row-label {
      color: var(--text-secondary);
      font-size: var(--fs-body);
      font-weight: 550;
    }
    .overview-row.is-total {
      min-height: auto;
      border-top: 1px solid var(--accent-border);
      background: linear-gradient(90deg, var(--band), var(--accent-surface-strong));
    }
    .overview-row.is-total .overview-row-label {
      color: var(--espresso);
      font-size: var(--fs-body);
      font-weight: 550;
    }
    .overview-count {
      display: grid;
      justify-content: center;
      justify-items: center;
      gap: var(--sp-1);
      color: var(--muted);
      font-variant-numeric: tabular-nums;
    }
    .overview-count strong {
      color: var(--text-secondary);
      font-size: var(--fs-h2);
      font-weight: 560;
      line-height: 1;
      letter-spacing: -.025em;
    }
    .overview-count span {
      color: var(--muted);
      font-size: var(--fs-caption);
      line-height: 1.15;
      white-space: nowrap;
    }
    .overview-count.is-total strong { color: var(--text-secondary); font-weight: 560; }
    .overview-row.is-total .overview-count strong {
      color: var(--espresso);
      font-size: var(--fs-h2);
      font-weight: 560;
    }
    .overview-row.is-total .overview-count.is-total strong {
      color: var(--espresso-deep);
      font-size: var(--fs-h2);
      font-weight: 560;
    }

    .control-band {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--sp-2);
      flex: 1 1 480px;
      justify-content: flex-end;
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
    }
    .control-band .search {
      min-width: min(320px, 100%);
      min-height: 42px;
      flex: 1 1 280px;
    }
    .control-band .select {
      min-height: 42px;
      padding-inline: var(--sp-3);
    }
    .control-band #cadenceFilter,
    .control-band #sort {
      padding-right: 34px;
      color: var(--accent);
      font-weight: 560;
      background-image:
        linear-gradient(45deg, transparent 50%, var(--accent) 50%),
        linear-gradient(135deg, var(--accent) 50%, transparent 50%);
      background-position:
        calc(100% - 15px) calc(50% - 1px),
        calc(100% - 10px) calc(50% - 1px);
      background-size: 5px 5px, 5px 5px;
      background-repeat: no-repeat;
    }
    .control-band #cadenceFilter:hover,
    .control-band #sort:hover {
      color: var(--accent-strong);
    }
    .control-band #cadenceFilter option,
    .control-band #sort option {
      color: var(--ink);
    }

    .task-control-row {
      display: grid;
      gap: var(--sp-5);
      margin-bottom: var(--sp-6);
      padding: 0 0 var(--sp-5);
      border: 0;
      border-bottom: 1px solid var(--border-subtle);
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }
    .task-filter-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--sp-5);
    }
    .stage-tabs {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--sp-2);
      flex: 0 0 auto;
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
    }
    .stage-tabs[hidden] { display: none; }

    .stage-tab {
      width: 96px;
      min-height: 42px;
      flex: 0 0 96px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--sp-2);
      padding: 7px var(--sp-3);
      border-color: var(--border-subtle);
      border-radius: var(--r-md);
      text-align: left;
      background: var(--surface-glass);
      white-space: nowrap;
    }

    .stage-tab span { color: inherit; font-size: var(--fs-caption); }
    .stage-tab small,
    .task-view-nav small {
      display: grid;
      min-width: 20px;
      min-height: 20px;
      place-items: center;
      padding: 2px 5px;
      border-radius: var(--r-full);
      background: var(--soft);
      color: var(--muted);
      font-size: var(--fs-caption);
      line-height: 1.15;
    }
    .stage-tab[aria-pressed="true"] {
      border-color: var(--selected-border);
      background: var(--selected-bg);
      color: var(--selected-color);
      box-shadow: none;
    }
    .stage-tab[aria-pressed="true"] small,
    .task-view-nav button[aria-selected="true"] small,
    .task-view-nav button[aria-pressed="true"] small { background: var(--panel); color: var(--selected-color); }

    .workspace-nav {
      display: flex;
      width: 100%;
      max-width: 100%;
      align-items: stretch;
      column-gap: calc(var(--sp-6) + var(--sp-5));
      row-gap: 0;
      margin: var(--workspace-header-nav-space) 0 0;
      padding: 0;
      overflow-x: auto;
      border: 0;
      border-bottom: 1px solid var(--line);
      border-radius: 0;
      position: static;
      background: transparent;
      box-shadow: none;
      scrollbar-width: none;
    }
    .workspace-nav::-webkit-scrollbar { display: none; }
    .workspace-nav-group {
      display: flex;
      flex: 0 0 auto;
      align-items: stretch;
      gap: var(--sp-5);
    }
    .workspace-nav-group-activity { margin-left: 0; }
    .workspace-nav button {
      display: inline-flex;
      min-height: 0;
      flex: 0 0 auto;
      align-items: center;
      gap: 0;
      padding: 0 1px var(--sp-3);
      border: 0;
      border-bottom: 2px solid transparent;
      border-radius: 0;
      margin-bottom: -1px;
      background: transparent;
      color: var(--muted);
      font-size: var(--fs-body);
      font-weight: 400;
      letter-spacing: .04em;
      transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
    }
    .workspace-nav button:hover { border-color: transparent; background: transparent; color: var(--ink); }
    .workspace-nav button svg { display: none; }
    .workspace-nav button[aria-selected="true"] {
      border-bottom-color: var(--espresso);
      background: transparent;
      color: var(--matrix-label-strong);
      font-weight: 600;
      box-shadow: none;
    }
    .workspace-nav button:focus:not(:focus-visible) { outline: none; }
    @media (max-width: 640px) {
      .workspace-nav {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--sp-1);
        margin-top: var(--workspace-header-nav-space-mobile);
        overflow: visible;
        border-bottom: 0;
      }
      .workspace-nav-group { display: contents; }
      .workspace-nav button {
        min-width: 0;
        min-height: 58px;
        justify-content: center;
        flex-direction: column;
        gap: var(--sp-1);
        margin: 0;
        padding: 6px 2px;
        border: 1px solid transparent;
        border-radius: var(--radius-control);
        font-size: var(--fs-caption);
        line-height: 1.15;
      }
      .workspace-nav button:hover {
        border-color: var(--border-subtle);
        background: var(--accent-surface-subtle);
      }
      .workspace-nav button svg {
        display: block;
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 1.4;
      }
      .workspace-nav button span { white-space: nowrap; }
      .workspace-nav button[aria-selected="true"] {
        border-color: var(--selected-border);
        background: var(--selected-bg);
        box-shadow: none;
      }
    }
    .task-view-nav {
      display: inline-flex;
      flex-wrap: wrap;
      gap: var(--sp-6);
      margin: 0;
      padding: 0;
      border: 0;
      border-bottom: 1px solid var(--border-subtle);
      background: transparent;
    }
    .task-view-nav button {
      display: inline-flex;
      align-items: center;
      gap: var(--sp-2);
      min-height: 44px;
      padding: 0 1px var(--sp-3);
      margin-bottom: -1px;
      border-color: transparent;
      border-width: 0 0 2px;
      border-radius: 0;
      background: transparent;
      color: var(--muted);
      font-size: var(--fs-body);
    }
    .task-view-nav button[aria-selected="true"],
    .task-view-nav button[aria-pressed="true"] {
      border-bottom-color: var(--espresso);
      background: transparent;
      color: var(--color-ink);
      font-weight: 650;
      box-shadow: none;
    }
    .workspace-page[hidden] { display: none; }
    .task-view[hidden] { display: none; }
    .workspace-access-bar {
      display: flex;
      min-width: 0;
      align-items: center;
      justify-content: space-between;
      gap: var(--sp-4);
      margin-top: var(--workspace-page-heading-space);
      padding: var(--sp-3) var(--sp-4);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-card);
      background: var(--surface-glass-strong);
      box-shadow: var(--shadow);
    }
    .workspace-access-main {
      display: flex;
      min-width: 0;
      flex: 1 1 260px;
      align-items: center;
      gap: var(--sp-3);
    }
    .workspace-access-icon {
      width: 42px;
      height: 36px;
      display: grid;
      flex: 0 0 auto;
      place-items: center;
      border-radius: var(--radius-control);
      background: var(--accent-soft);
      color: var(--accent);
      box-shadow: inset 0 0 0 1px var(--accent-border-subtle);
    }
    .workspace-access-icon svg {
      width: 23px;
      height: 20px;
      overflow: visible;
      fill: none;
      stroke: currentColor;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 1.4;
    }
    .workspace-access-copy {
      display: grid;
      min-width: 0;
      gap: var(--sp-1);
    }
    .workspace-access-copy span {
      color: var(--muted);
      font-size: var(--fs-caption);
      line-height: 1.3;
    }
    .workspace-access-copy strong {
      min-width: 0;
      overflow: hidden;
      color: var(--ink);
      font-size: var(--fs-title);
      line-height: 1.35;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .workspace-access-tools {
      display: flex;
      min-width: 0;
      flex: 0 1 auto;
      align-items: center;
      justify-content: flex-end;
      gap: var(--sp-2);
    }
    .workspace-access-members {
      display: flex;
      min-width: 0;
      align-items: center;
      gap: var(--sp-2);
      padding-inline: var(--sp-1);
    }
    .workspace-access-avatar-stack {
      display: flex;
      flex: 0 0 auto;
      align-items: center;
      gap: var(--sp-1);
    }
    .identity-avatar {
      position: relative;
      display: grid;
      place-items: center;
      overflow: hidden;
      background: var(--avatar-bg, var(--accent));
      color: var(--avatar-fg, var(--color-white));
      isolation: isolate;
    }
    .identity-avatar > b {
      position: relative;
      z-index: 0;
      color: inherit;
      font: inherit;
      line-height: 1;
    }
    .identity-avatar > img {
      position: absolute;
      z-index: 1;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .identity-avatar > img[hidden] { display: none; }
    .workspace-access-avatar {
      width: 32px;
      height: 32px;
      margin: 0;
      border: 1px solid var(--panel);
      border-radius: var(--r-full);
      font-size: var(--fs-caption);
      font-weight: 700;
      line-height: 1;
      box-shadow: 0 0 0 2px var(--panel);
    }
    .workspace-access-avatar-more {
      background: var(--surface-soft);
      color: var(--muted);
    }
    .workspace-access-member-count {
      overflow: hidden;
      color: var(--muted);
      font-size: var(--fs-caption);
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .workspace-member-add,
    .workspace-join-button,
    .workspace-settings-button {
      min-height: 40px;
      flex: 0 0 auto;
      padding-inline: var(--sp-4);
      white-space: nowrap;
    }
    .workspace-join-button,
    .workspace-settings-button {
      border-color: var(--border-subtle);
      background: var(--panel);
      color: var(--text-secondary);
    }
    .workspace-folder-menu {
      position: relative;
    }
    .workspace-folder-menu-trigger {
      display: inline-flex;
      min-height: 40px;
      align-items: center;
      gap: var(--sp-2);
    }
    .menu-plus,
    .action-plus {
      display: inline-flex;
      width: 1em;
      height: 1em;
      align-items: center;
      justify-content: center;
      font-size: var(--fs-h3);
      font-weight: 350;
      line-height: 1;
    }
    .page-primary-action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--sp-2);
    }
    .menu-chevron {
      display: inline-block;
      width: 8px;
      height: 8px;
      margin: -3px 1px 0 2px;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: rotate(45deg);
      transition: transform .16s ease;
    }
    .workspace-folder-menu-trigger[aria-expanded="true"] .menu-chevron {
      transform: rotate(225deg);
    }
    .workspace-folder-menu-popover {
      display: grid;
      position: absolute;
      z-index: 30;
      top: calc(100% + var(--sp-2));
      right: 0;
      width: min(320px, calc(100vw - 32px));
      gap: var(--sp-1);
      padding: var(--sp-2);
      border: 1px solid var(--line);
      border-radius: var(--radius-panel);
      background: var(--panel);
      box-shadow: 0 16px 38px rgba(66,44,20,.16);
    }
    .workspace-folder-menu-popover[hidden] {
      display: none;
    }
    .workspace-folder-menu-popover button {
      display: grid;
      min-height: 64px;
      justify-items: start;
      gap: var(--sp-1);
      padding: 11px 12px;
      border: 0;
      background: transparent;
      text-align: left;
      white-space: normal;
    }
    .workspace-folder-menu-popover button:hover,
    .workspace-folder-menu-popover button:focus-visible {
      background: var(--accent-surface);
    }
    .workspace-folder-menu-popover strong {
      color: var(--ink);
      font-size: var(--fs-label);
    }
    .workspace-folder-menu-popover span {
      color: var(--muted);
      font-size: var(--fs-caption);
      line-height: 1.45;
    }

    .workspace-settings-page {
      padding-bottom: calc(var(--sp-6) * 2);
    }
    .workspace-settings-page-head {
      display: grid;
      gap: var(--sp-5);
      margin-top: var(--workspace-page-heading-space);
      padding-bottom: var(--sp-5);
      border-bottom: 1px solid var(--line);
    }
    .workspace-settings-page-title {
      display: grid;
      gap: var(--sp-2);
    }
    .workspace-settings-page-title > p {
      margin: 0;
      color: var(--accent);
      font-size: var(--fs-caption);
      font-weight: 750;
      letter-spacing: .16em;
    }
    .workspace-settings-page-title > div {
      display: flex;
      min-width: 0;
      align-items: center;
      gap: var(--sp-3);
    }
    .workspace-settings-page-title h2 {
      min-width: 0;
      margin: 0;
      overflow-wrap: anywhere;
      font-size: var(--fs-h2);
      line-height: 1.25;
    }
    .workspace-settings-current-role {
      flex: 0 0 auto;
      padding: 5px 9px;
      border: 1px solid var(--accent-border);
      border-radius: var(--r-full);
      background: var(--accent-pale);
      color: var(--accent-ink);
      font-size: var(--fs-caption);
      font-weight: 700;
    }
    .workspace-settings-current-role.is-viewer {
      border-color: var(--border-subtle);
      background: var(--surface-soft);
      color: var(--muted);
    }
    .workspace-settings-layout {
      display: grid;
      gap: var(--sp-5);
      max-width: 1040px;
      margin: var(--sp-6) auto 0;
    }
    .workspace-settings-card {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius-panel);
      background: var(--surface-glass);
      box-shadow: 0 8px 28px rgba(66, 44, 20, .045);
    }
    .workspace-settings-card[hidden] {
      display: none;
    }
    .workspace-settings-card-head {
      display: flex;
      min-width: 0;
      align-items: center;
      justify-content: space-between;
      gap: var(--sp-4);
      padding: var(--sp-5);
      border-bottom: 1px solid var(--border-subtle);
      background: var(--accent-surface-subtle);
    }
    .workspace-settings-card-head > div {
      display: flex;
      min-width: 0;
      align-items: flex-start;
      gap: var(--sp-3);
    }
    .workspace-settings-card-head > div > span {
      display: grid;
      width: 30px;
      height: 30px;
      flex: 0 0 auto;
      place-items: center;
      border: 1px solid var(--accent-border);
      border-radius: var(--r-full);
      background: var(--panel);
      color: var(--accent);
      font-size: var(--fs-caption);
      font-weight: 750;
    }
    .workspace-settings-card-head h3 {
      margin: 0;
      font-size: var(--fs-title);
      line-height: 1.35;
    }
    .workspace-settings-card-head p {
      margin: var(--sp-1) 0 0;
      color: var(--muted);
      font-size: var(--fs-caption);
      line-height: 1.5;
    }
    .workspace-settings-card-head > button {
      min-height: 40px;
      flex: 0 0 auto;
    }
    .workspace-trash-head-actions {
      display: flex;
      flex: 0 0 auto;
      align-items: center;
      gap: var(--sp-2);
    }
    .workspace-trash-head-actions button {
      min-height: 40px;
    }
    .workspace-trash-head-actions .danger-button:disabled {
      cursor: not-allowed;
      opacity: .5;
    }
    .workspace-settings-member-list,
    .workspace-trash-list {
      display: grid;
      padding: 0 var(--sp-5);
    }
    .workspace-settings-member,
    .workspace-trash-item {
      display: grid;
      min-width: 0;
      align-items: center;
      gap: var(--sp-3);
      padding: var(--sp-4) 0;
      border-bottom: 1px solid var(--border-subtle);
    }
    .workspace-settings-member:last-child,
    .workspace-trash-item:last-child {
      border-bottom: 0;
    }
    .workspace-settings-member {
      grid-template-columns: 40px minmax(0, 1fr) auto;
    }
    .workspace-settings-member-actions {
      display: flex;
      min-width: 0;
      align-items: center;
      justify-content: flex-end;
      gap: var(--sp-2);
    }
    .workspace-settings-member-remove {
      display: inline-flex;
      min-height: 34px;
      align-items: center;
      justify-content: center;
      padding: 0 var(--sp-3);
      border: 1px solid var(--danger-border-mixed);
      border-radius: var(--r-full);
      background: var(--panel);
      color: var(--danger);
      font-size: var(--fs-caption);
      font-weight: 700;
      line-height: 1;
      white-space: nowrap;
    }
    .workspace-settings-member-remove:hover {
      border-color: var(--danger);
      background: var(--danger-surface);
      color: var(--danger);
    }
    .workspace-settings-member-remove:focus-visible {
      outline: 2px solid var(--danger);
      outline-offset: 2px;
    }
    .workspace-settings-member-avatar {
      width: 38px;
      height: 38px;
      border: 1px solid var(--panel);
      border-radius: var(--radius-control);
      background: var(--avatar-bg, var(--accent));
      color: var(--avatar-fg, var(--color-white));
      font-size: var(--fs-caption);
      font-weight: 750;
    }
    .workspace-settings-member-copy {
      min-width: 0;
    }
    .workspace-settings-member-name {
      display: flex;
      min-width: 0;
      align-items: center;
      gap: var(--sp-2);
    }
    .workspace-settings-member-copy strong,
    .workspace-trash-item strong {
      display: block;
      overflow: hidden;
      color: var(--ink);
      font-size: var(--fs-label);
      line-height: 1.35;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .workspace-settings-member-copy span,
    .workspace-trash-item div > span {
      display: block;
      margin-top: var(--sp-1);
      overflow-wrap: anywhere;
      color: var(--muted);
      font-size: var(--fs-caption);
      line-height: 1.4;
    }
    .workspace-settings-member-copy .workspace-settings-creator-mark {
      display: inline-flex;
      flex: 0 0 auto;
      align-items: center;
      margin-top: 0;
      padding: 2px 7px;
      border: 1px solid var(--accent-border-subtle);
      border-radius: var(--r-full);
      background: var(--accent-surface);
      color: var(--accent-ink);
      font-size: var(--fs-caption);
      font-weight: 750;
      line-height: 1.35;
    }
    .workspace-settings-role-field {
      position: relative;
      display: inline-flex;
      width: 132px;
      min-width: 112px;
      color: var(--accent-ink);
    }
    .workspace-settings-role-field::after {
      position: absolute;
      top: 50%;
      right: 13px;
      width: 6px;
      height: 6px;
      border-right: 1.5px solid currentColor;
      border-bottom: 1.5px solid currentColor;
      content: "";
      pointer-events: none;
      transform: translateY(-68%) rotate(45deg);
    }
    .workspace-settings-role-field select {
      appearance: none;
      width: 100%;
      min-height: 34px;
      padding: 0 31px 0 var(--sp-3);
      border: 1px solid var(--accent-border-subtle);
      border-radius: var(--r-full);
      background: var(--accent-surface);
      color: var(--accent-ink);
      cursor: pointer;
      font-size: var(--fs-caption);
      font-weight: 700;
      line-height: 1;
    }
    .workspace-settings-role-field:hover select:not(:disabled) {
      border-color: var(--accent-border-strong);
      background: var(--accent-surface-strong);
    }
    .workspace-settings-role-field select:disabled {
      cursor: wait;
      opacity: .62;
    }
    .workspace-settings-role-field select:focus-visible {
      border-color: var(--accent-border-strong);
      outline: 2px solid var(--accent);
      outline-offset: 2px;
      box-shadow: none;
    }
    .workspace-settings-role-badge {
      display: inline-flex;
      min-height: 34px;
      align-items: center;
      justify-content: center;
      padding: 0 var(--sp-3);
      border: 1px solid var(--accent-border-subtle);
      border-radius: var(--r-full);
      background: var(--accent-surface);
      color: var(--accent-ink);
      font-size: var(--fs-caption);
      font-weight: 700;
      line-height: 1;
      white-space: nowrap;
    }
    .workspace-settings-role-badge.is-admin {
      background: var(--accent-surface-strong);
    }
    .workspace-trash-item {
      grid-template-columns: 30px minmax(0, 1fr) auto;
    }
    .workspace-trash-kind {
      position: relative;
      display: block;
      width: 28px;
      height: 28px;
      border-radius: var(--r-full);
      background: var(--surface-soft);
      color: var(--accent);
    }
    .workspace-trash-kind::before,
    .workspace-trash-kind::after {
      position: absolute;
      display: block;
      content: "";
    }
    .workspace-trash-kind.is-root::before {
      top: 9px;
      left: 9px;
      width: 10px;
      height: 10px;
      border-radius: var(--r-full);
      background: currentColor;
      box-shadow: 0 0 0 3px var(--accent-soft);
    }
    .workspace-trash-kind.is-child::before {
      top: 6px;
      left: 7px;
      width: 11px;
      height: 12px;
      border-bottom: 2px solid var(--accent-border);
      border-left: 2px solid var(--accent-border);
      border-bottom-left-radius: 5px;
    }
    .workspace-trash-kind.is-child::after {
      right: 5px;
      bottom: 5px;
      width: 7px;
      height: 7px;
      border-radius: var(--r-full);
      background: currentColor;
    }
    .workspace-trash-item button {
      min-height: 36px;
      padding-inline: var(--sp-3);
      border-color: var(--accent-border);
      background: var(--panel);
      color: var(--accent-ink);
    }
    .workspace-trash-group {
      display: grid;
      gap: var(--sp-2);
      padding: var(--sp-4) 0;
      border-bottom: 1px solid var(--border-subtle);
    }
    .workspace-trash-group:last-child { border-bottom: 0; }
    .workspace-trash-group-head {
      display: flex;
      min-width: 0;
      align-items: center;
      justify-content: space-between;
      gap: var(--sp-3);
      padding-left: calc(30px + var(--sp-3));
    }
    .workspace-trash-group-head > div { min-width: 0; }
    .workspace-trash-group-head strong {
      display: block;
      color: var(--ink);
      font-size: var(--fs-caption);
      line-height: 1.35;
    }
    .workspace-trash-group-head span {
      display: block;
      margin-top: var(--sp-1);
      color: var(--muted);
      font-size: var(--fs-caption);
      line-height: 1.4;
    }
    .workspace-trash-group-action {
      display: grid;
      flex: 0 0 auto;
      justify-items: end;
      gap: var(--sp-1);
    }
    .workspace-trash-group-action > button {
      min-height: 36px;
      padding-inline: var(--sp-3);
      border-color: var(--accent-border);
      background: var(--panel);
      color: var(--accent-ink);
    }
    .workspace-trash-group-action > button:disabled {
      cursor: not-allowed;
      opacity: .55;
    }
    .workspace-trash-group-action > .workspace-trash-restore-note {
      max-width: 240px;
      margin-top: 0;
      color: var(--muted);
      font-size: var(--fs-caption);
      line-height: 1.35;
      text-align: right;
    }
    .workspace-trash-group-rows { display: grid; gap: var(--sp-1); }
    .workspace-trash-row {
      display: grid;
      grid-template-columns: 30px minmax(0, 1fr);
      align-items: center;
      gap: var(--sp-3);
      min-width: 0;
      padding: var(--sp-2) var(--sp-2) var(--sp-2) calc((var(--trash-depth, 0) * 24px) + 2px);
      border-radius: var(--r-md);
      background: var(--surface-soft);
    }
    .workspace-trash-row > div { min-width: 0; }
    .workspace-trash-row strong {
      display: block;
      overflow: hidden;
      color: var(--ink);
      font-size: var(--fs-label);
      line-height: 1.35;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .workspace-trash-row div > span {
      display: block;
      margin-top: var(--sp-1);
      color: var(--muted);
      font-size: var(--fs-caption);
      line-height: 1.35;
    }
    .workspace-settings-empty,
    .workspace-settings-loading {
      display: grid;
      min-height: 116px;
      place-items: center;
      align-content: center;
      gap: var(--sp-2);
      padding: var(--sp-5);
      color: var(--muted);
      text-align: center;
    }
    .workspace-settings-empty strong {
      color: var(--ink);
      font-size: var(--fs-label);
    }
    .workspace-settings-empty span {
      font-size: var(--fs-caption);
    }
    .workspace-settings-empty.is-error strong,
    .workspace-settings-empty.is-error span {
      color: var(--danger);
    }
    .workspace-settings-loading {
      grid-template-columns: auto auto;
    }
    .workspace-settings-loading > span {
      width: 16px;
      height: 16px;
      border: 2px solid var(--accent-border);
      border-top-color: var(--accent);
      border-radius: var(--r-full);
      animation: workspace-settings-spin .8s linear infinite;
    }
    @keyframes workspace-settings-spin {
      to { transform: rotate(360deg); }
    }
    .workspace-settings-danger {
      border-color: var(--danger-border-mixed);
      box-shadow: none;
    }
    .workspace-settings-danger .workspace-settings-card-head {
      background: var(--danger-surface);
    }
    .workspace-settings-danger .workspace-settings-card-head > div > span {
      border-color: var(--color-danger-border);
      color: var(--danger);
    }
    .workspace-danger-action {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--sp-4);
      padding: var(--sp-5);
    }
    .workspace-danger-action > div {
      display: grid;
      gap: var(--sp-1);
    }
    .workspace-danger-action strong {
      color: var(--danger);
      font-size: var(--fs-label);
    }
    .workspace-danger-action span {
      color: var(--muted);
      font-size: var(--fs-caption);
      line-height: 1.5;
    }
    .danger-button {
      min-height: 40px;
      border-color: var(--danger);
      background: var(--danger);
      color: var(--color-white);
      white-space: nowrap;
    }
    .danger-button:hover {
      border-color: var(--color-danger-strong);
      background: var(--color-danger-strong);
      color: var(--color-white);
    }
    .workspace-settings-status {
      min-height: 20px;
      max-width: 1040px;
      margin: var(--sp-4) auto 0;
      color: var(--muted);
      font-size: var(--fs-caption);
      line-height: 1.5;
      text-align: center;
    }
    .workspace-settings-status:empty {
      min-height: 0;
      margin-top: 0;
    }
    .workspace-settings-status.is-error {
      color: var(--danger);
    }
    .workspace-access-bar + #folderBrowser {
      margin-top: var(--workspace-page-content-space);
    }
    .workspace-access-bar ~ .folder-workspace > #folderWorkspaceHead {
      margin-top: var(--workspace-page-content-space);
    }
    .folder-browser {
      min-height: 0;
      margin-top: var(--workspace-page-heading-space);
      padding: var(--card-padding);
      border: 1px solid var(--line);
      border-radius: var(--radius-panel);
      background: var(--surface-glass);
      box-shadow: var(--shadow);
    }
    .folder-browser-toolbar,
    .folder-workspace-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--sp-3);
    }
    .folder-browser-toolbar { margin-bottom: var(--workspace-page-content-space); }
    .folder-browser-copy,
    .folder-workspace-title { display: grid; gap: var(--sp-1); }
    .folder-browser-copy strong,
    .folder-workspace-title strong { font-size: var(--fs-title); line-height: 1.3; }
    .folder-browser-copy span,
    .folder-workspace-title span { color: var(--muted); font-size: var(--fs-caption); line-height: 1.5; }
    .folder-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: var(--sp-3);
    }
    .folder-card {
      position: relative;
      min-height: 150px;
      border: 1px solid var(--line);
      border-radius: var(--radius-card);
      background: linear-gradient(145deg, var(--panel), var(--folder-surface));
      box-shadow: 0 6px 20px rgba(66,44,20,.055);
      transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
    }
    .folder-card:hover { transform: translateY(-2px); border-color: var(--folder-color, var(--accent-mid)); box-shadow: 0 12px 28px rgba(66,44,20,.09); }
    .folder-card-open {
      display: grid;
      width: 100%;
      height: 100%;
      min-height: 148px;
      align-content: center;
      justify-items: center;
      gap: var(--sp-2);
      padding: 26px 16px 18px;
      border: 0;
      background: transparent;
      text-align: center;
    }
    .folder-card-open:hover { border: 0; background: transparent; }
    .folder-icon {
      display: grid;
      width: 54px;
      height: 43px;
      place-items: center;
      border-radius: var(--r-md) var(--r-md) var(--r-md) var(--r-md);
      background: var(--folder-soft, var(--accent-soft));
      color: var(--folder-color, var(--accent));
      font-size: var(--fs-h3);
      box-shadow: inset 0 0 0 1px var(--folder-ring);
    }
    .folder-icon svg {
      width: 27px;
      height: 23px;
      overflow: visible;
      fill: none;
      stroke: currentColor;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 1.4;
    }
    .folder-card-open strong { max-width: 100%; overflow: hidden; font-size: var(--fs-body); line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
    .folder-card-open > .folder-card-meta {
      max-width: 100%;
      overflow: hidden;
      color: var(--muted);
      font-size: var(--fs-caption);
      line-height: 1.5;
      overflow-wrap: normal;
      text-align: center;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .folder-card-open > .folder-card-owner {
      max-width: 100%;
      overflow: hidden;
      color: var(--muted);
      font-size: var(--fs-caption);
      line-height: 1.5;
      opacity: .85;
      text-align: center;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .folder-create-tile,
    .folder-create-card {
      display: grid;
      min-height: 150px;
      place-items: center;
      align-content: center;
      gap: var(--sp-2);
      padding: 20px;
      border: 1px dashed var(--accent-border-strong);
      border-radius: var(--radius-card);
      background: var(--accent-surface-subtle);
      color: var(--muted);
      text-align: center;
      transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
    }
    .folder-create-tile:hover {
      border-color: var(--accent);
      background: var(--accent-surface-strong);
      color: var(--accent);
      transform: translateY(-2px);
    }
    .folder-create-tile-icon {
      display: grid;
      width: 52px;
      height: 42px;
      place-items: center;
      border: 1px dashed currentColor;
      border-radius: var(--r-md) var(--r-md) var(--r-md) var(--r-md);
      font-size: var(--fs-h2);
      font-weight: 300;
      line-height: 1;
    }
    .folder-create-tile strong { font-size: var(--fs-body); font-weight: 600; line-height: 1.5; }
    .folder-create-card input { width: 100%; min-height: 36px; border-radius: var(--r-md); text-align: center; }
    .folder-create-card-actions { display: flex; gap: var(--sp-1); }
    .folder-editor-status {
      min-height: 0;
      margin: 0;
      color: var(--muted);
      font-size: var(--fs-caption);
      line-height: 1.4;
    }
    .folder-editor-status:empty { display: none; }
    .folder-editor-status.is-error { color: var(--danger); }
    .folder-card-menu { position: absolute; top: 8px; right: 8px; z-index: 4; }
    .folder-card-menu summary { display: grid; width: 28px; min-height: 28px; place-items: center; border-radius: var(--r-md); color: var(--muted); cursor: pointer; list-style: none; }
    .folder-card-menu summary::-webkit-details-marker { display: none; }
    .folder-card-menu[open] summary,
    .folder-card-menu summary:hover { background: var(--soft); color: var(--ink); }
    .folder-card-menu-popover {
      display: grid;
      position: absolute;
      top: 32px;
      right: 0;
      width: 138px;
      padding: 5px;
      border: 1px solid var(--line);
      border-radius: var(--radius-panel);
      background: var(--panel);
      box-shadow: 0 14px 30px rgba(66,44,20,.14);
    }
    .folder-card-menu-popover button { min-height: 31px; border: 0; background: transparent; font-size: var(--fs-caption); text-align: left; }
    .folder-card-menu-popover .danger { color: var(--danger); }
    .folder-editor {
      display: flex;
      align-items: center;
      gap: var(--sp-1);
      margin-bottom: 14px;
      padding: 9px;
      border: 1px solid var(--line);
      border-radius: var(--radius-card);
      background: var(--accent-pale);
    }
    .folder-editor input { min-height: 34px; flex: 1 1 auto; border-radius: var(--r-md); }
    .folder-workspace-head {
      align-items: flex-end;
      margin: var(--workspace-page-heading-space) 0 var(--workspace-page-content-space);
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
    }
    .folder-page-copy { display: grid; gap: var(--sp-3); }
    .folder-page-copy h2 {
      margin: 0;
      color: var(--color-ink);
      font-size: var(--fs-h2);
      font-weight: 600;
      letter-spacing: -.025em;
      line-height: 1.15;
    }
    .folder-page-copy p { margin: 0; color: var(--muted); font-size: var(--fs-label); line-height: 1.65; }
    .folder-page-copy b { color: var(--color-ink); }
    .folder-back-button { color: var(--muted); }
    .folder-hierarchy {
      display: flex;
      min-width: 0;
      align-items: center;
      gap: var(--sp-2);
      color: var(--muted);
      font-size: var(--fs-caption);
    }
    .folder-hierarchy-mark {
      display: grid;
      width: 28px;
      height: 28px;
      flex: 0 0 auto;
      place-items: center;
      border-radius: var(--r-md);
      background: var(--accent-soft);
      color: var(--accent);
      font-size: var(--fs-title);
    }
    .folder-hierarchy button {
      min-height: 28px;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--muted);
      font-size: var(--fs-caption);
    }
    .folder-hierarchy button:hover { color: var(--accent); background: transparent; }
    .folder-hierarchy strong {
      min-width: 0;
      overflow: hidden;
      color: var(--ink);
      font-size: var(--fs-body);
      font-weight: 600;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .folder-hierarchy-separator { color: var(--text-muted-faint); font-size: var(--fs-title); }
    .folder-workspace-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: var(--sp-2);
    }
    .folder-new-task-menu {
      position: relative;
    }
    .folder-new-task-button {
      display: inline-flex;
      min-height: 44px;
      align-items: center;
      gap: var(--sp-2);
      padding-inline: var(--sp-4);
      white-space: nowrap;
    }
    .folder-new-task-button[aria-expanded="true"] .menu-chevron {
      transform: rotate(225deg);
    }
    .folder-new-task-popover {
      display: grid;
      position: absolute;
      z-index: 20;
      top: calc(100% + var(--sp-2));
      right: 0;
      width: min(300px, calc(100vw - 32px));
      gap: var(--sp-1);
      padding: var(--sp-2);
      border: 1px solid var(--line);
      border-radius: var(--radius-panel);
      background: var(--panel);
      box-shadow: 0 16px 38px rgba(66,44,20,.16);
    }
    .folder-new-task-popover[hidden] {
      display: none;
    }
    .folder-new-task-popover button {
      display: grid;
      min-height: 58px;
      justify-items: start;
      gap: var(--sp-1);
      padding: 10px 12px;
      border: 0;
      background: transparent;
      text-align: left;
      white-space: nowrap;
    }
    .folder-new-task-popover button:hover,
    .folder-new-task-popover button:focus-visible {
      background: var(--accent-surface);
    }
    .folder-new-task-popover strong {
      color: var(--ink);
      font-size: var(--fs-label);
    }
    .folder-new-task-popover span {
      color: var(--muted);
      font-size: var(--fs-caption);
      line-height: 1.45;
    }
    .folder-empty-state {
      display: grid;
      min-height: 230px;
      place-items: center;
      align-content: center;
      gap: var(--sp-2);
      padding: 32px;
      border: 1px dashed var(--line);
      border-radius: var(--radius-card);
      background: var(--accent-surface);
      text-align: center;
    }
    .folder-empty-state strong { font-size: var(--fs-title); }
    .folder-empty-state span { color: var(--muted); font-size: var(--fs-caption); }
    .folder-empty-state button { margin-top: 8px; }
    .empty-state-mark {
      display: grid;
      width: 42px;
      height: 42px;
      place-items: center;
      margin-bottom: 4px;
      border: 1px dashed var(--accent-border);
      border-radius: var(--r-md);
      background: var(--accent-surface-subtle);
      color: var(--accent);
    }
    .empty-state-icon-svg {
      width: 22px;
      height: 22px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.35;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .folder-empty-new-task {
      min-height: 42px;
      padding: 0 var(--sp-4);
      border: 1px solid var(--accent-border);
      border-radius: var(--radius-control);
      background: var(--panel);
      color: var(--accent-ink);
      font-size: var(--fs-label);
      font-weight: 700;
    }
    .folder-empty-new-task:hover,
    .folder-empty-new-task:focus-visible {
      border-color: var(--accent-border-strong);
      background: var(--accent-surface);
    }
    @media (max-width: 720px) {
      .workspace-access-bar {
        align-items: stretch;
        flex-direction: column;
        gap: var(--sp-3);
        padding: var(--sp-3);
      }
      .workspace-access-main {
        width: 100%;
        flex-basis: auto;
      }
      .workspace-access-copy strong {
        overflow-wrap: anywhere;
        text-overflow: clip;
        white-space: normal;
      }
      .workspace-access-tools {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
      }
      .workspace-access-members {
        grid-column: 1 / -1;
        justify-content: space-between;
        padding: 0;
      }
      .workspace-member-add,
      .workspace-join-button,
      .workspace-settings-button {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        padding-inline: var(--sp-3);
      }
      .workspace-folder-menu {
        width: 100%;
        grid-column: 1 / -1;
      }
      .workspace-folder-menu-trigger {
        justify-content: space-between;
      }
      .workspace-folder-menu-popover {
        width: min(100%, calc(100vw - 24px));
      }
      .workspace-settings-page-head {
        gap: var(--sp-4);
        padding-bottom: var(--sp-4);
      }
      .workspace-settings-page-title > div {
        align-items: flex-start;
        flex-direction: column;
      }
      .workspace-settings-page-title h2 {
        font-size: var(--fs-mobile-page-title);
      }
      .workspace-settings-layout {
        gap: var(--sp-4);
        margin-top: var(--sp-5);
      }
      .workspace-settings-card-head {
        align-items: stretch;
        flex-direction: column;
        padding: var(--sp-4);
      }
      .workspace-settings-card-head > button {
        width: 100%;
        min-height: 44px;
      }
      .workspace-settings-member-list,
      .workspace-trash-list {
        padding: 0 var(--sp-4);
      }
      .workspace-settings-member {
        grid-template-columns: 40px minmax(0, 1fr);
      }
      .workspace-settings-member-actions {
        grid-column: 2;
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
      }
      .workspace-settings-role-field {
        width: auto;
        max-width: none;
        flex: 1 1 128px;
      }
      .workspace-settings-role-field select,
      .workspace-settings-role-badge,
      .workspace-settings-member-remove {
        min-height: 44px;
        font-size: var(--fs-mobile-control);
      }
      .workspace-trash-item {
        grid-template-columns: 30px minmax(0, 1fr);
      }
      .workspace-trash-item button {
        grid-column: 2;
        width: 100%;
        min-height: 44px;
      }
      .workspace-danger-action {
        align-items: stretch;
        flex-direction: column;
        padding: var(--sp-4);
      }
      .workspace-danger-action button {
        width: 100%;
        min-height: 44px;
      }
      .folder-workspace-head { align-items: flex-start; flex-wrap: wrap; }
      .folder-workspace-title { order: -1; width: 100%; }
      .folder-workspace-actions {
        width: 100%;
        margin-left: 0;
      }
      .folder-new-task-menu,
      .folder-new-task-button {
        width: 100%;
      }
      .folder-new-task-button {
        justify-content: center;
      }
      .folder-new-task-popover {
        right: auto;
        left: 0;
        width: 100%;
      }
    }

    .workspace-section {
      margin-top: var(--workspace-section-space);
      background: transparent;
      border: 0;
      border-radius: 0;
      box-shadow: none;
      overflow: visible;
    }
    .workspace-page > .workspace-section:first-child {
      margin-top: var(--workspace-page-heading-space);
    }

    .workspace-section > .section-head {
      padding: 0 0 var(--sp-3);
      border-bottom: 1px solid var(--line);
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: var(--sp-3);
    }

    .section-head h2 { margin: 0; color: var(--color-ink); font-size: var(--fs-h2); font-weight: 600; letter-spacing: -.025em; line-height: 1.15; }
    .section-head p { margin: 0; color: var(--muted); font-size: var(--fs-label); line-height: 1.65; }
    .section-body { padding: var(--sp-5) 0 0; }
    .workspace-page > .workspace-section:first-child > .section-body {
      padding-top: var(--workspace-page-content-space);
    }
    .folder-scope-panel {
      display: grid;
      gap: var(--sp-4);
      margin-top: var(--workspace-page-heading-space);
      padding: var(--sp-4) var(--sp-5);
      border: 1px solid var(--accent-border-subtle);
      border-radius: var(--radius-card);
      background: linear-gradient(135deg, var(--panel) 0%, var(--accent-surface) 100%);
      box-shadow: 0 8px 22px rgba(66, 44, 20, .045);
    }
    .folder-scope-heading {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: var(--sp-2) var(--sp-3);
    }
    .folder-scope-heading strong {
      display: inline-flex;
      align-items: center;
      gap: var(--sp-2);
      color: var(--color-ink);
      font-size: var(--fs-body);
      font-weight: 750;
    }
    .folder-scope-heading strong::before {
      content: "";
      width: 4px;
      height: 18px;
      border-radius: var(--r-full);
      background: var(--accent);
    }
    .folder-scope-heading span {
      color: var(--muted);
      font-size: var(--fs-caption);
      line-height: 1.5;
    }
    .folder-scope-options {
      display: flex;
      flex-wrap: wrap;
      align-items: stretch;
      gap: var(--sp-2);
    }
    .folder-scope-option {
      display: flex;
      min-width: min(220px, 100%);
      max-width: 360px;
      flex: 0 1 260px;
      align-items: flex-start;
      gap: var(--sp-3);
      padding: 11px 13px;
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      background: var(--panel);
      color: var(--ink);
      cursor: pointer;
      transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
    }
    .folder-scope-option:hover {
      border-color: var(--accent-border);
      background: var(--accent-surface);
    }
    .folder-scope-option:has(input:checked) {
      border-color: var(--accent-border);
      background: var(--accent-pale);
      box-shadow: inset 0 0 0 1px var(--accent-border-subtle);
    }
    .folder-scope-option.is-all {
      min-width: 142px;
      flex-basis: 170px;
    }
    .folder-scope-option input {
      width: 18px;
      height: 18px;
      flex: 0 0 auto;
      margin: 2px 0 0;
      accent-color: var(--accent);
    }
    .folder-scope-option span {
      display: grid;
      min-width: 0;
      gap: var(--sp-1);
    }
    .folder-scope-option b {
      overflow-wrap: anywhere;
      font-size: var(--fs-label);
      font-weight: 700;
      line-height: 1.4;
    }
    .folder-scope-option small {
      color: var(--muted);
      font-size: var(--fs-caption);
      line-height: 1.35;
    }
    .folder-scope-panel + .workspace-section,
    .folder-scope-panel + #networkSection {
      margin-top: var(--sp-5);
    }
    #networkSection .section-head,
    #ganttSection .section-head { align-items: flex-start; }
    #networkSection > .section-head {
      padding-bottom: 0;
      border-bottom: 0;
    }
    #networkSection .section-head > div,
    #ganttSection .section-head > div { display: grid; gap: var(--sp-2); }
    #networkSection .section-head > button,
    #ganttSection .section-head > button { min-height: 40px; flex: 0 0 auto; padding-inline: var(--sp-5); }

    .idea-hub > .section-head,
    .issue-hub > .section-head {
      align-items: flex-end;
      padding-bottom: 0;
      border-bottom: 0;
    }
    .idea-hub .section-head > div,
    .issue-hub .section-head > div { display: grid; gap: var(--sp-2); }
    .idea-hub .section-body,
    .issue-hub .section-body { padding-top: var(--workspace-page-content-space); }
    .ideas-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 336px;
      gap: var(--sp-5);
      align-items: start;
    }
    .ideas-main { display: grid; gap: var(--sp-4); }
    .issue-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 336px;
      align-items: start;
      gap: var(--sp-5);
    }
    .issue-layout > #decisionsView {
      display: grid;
      gap: var(--sp-4);
    }
    .idea-page-new,
    .issue-page-new {
      min-height: 40px;
      flex: 0 0 auto;
      padding: 0 var(--sp-5);
    }
    .idea-block {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius-card);
      background: var(--panel);
    }
    .idea-block > header {
      display: flex;
      min-height: 48px;
      align-items: center;
      justify-content: space-between;
      gap: var(--sp-3);
      padding: 0 var(--sp-4);
      border-bottom: 1px solid var(--border-subtle);
      background: var(--band);
    }
    .idea-block > header > div { display: flex; align-items: baseline; gap: var(--sp-3); }
    .idea-block > header strong { font-size: var(--fs-body); line-height: 1.5; }
    .idea-block > header span { color: var(--muted); font-size: var(--fs-label); line-height: 1.5; }
    .idea-block > header em {
      display: grid;
      min-width: 20px;
      height: 20px;
      place-items: center;
      padding: 0 var(--sp-2);
      border-radius: var(--r-full);
      background: var(--espresso);
      color: var(--on-espresso);
      font-size: var(--fs-caption);
      font-style: normal;
      font-weight: 700;
    }
    .idea-list { display: grid; }
    .recurring-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: start;
      gap: var(--sp-5);
    }

    .recurring-card {
      border: 1px solid var(--line);
      border-left: 4px solid var(--task-color, var(--accent));
      border-radius: var(--radius-card);
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      background: var(--panel);
      padding: 26px;
      display: grid;
      gap: var(--sp-4);
      position: relative;
      box-shadow: 0 1px 2px rgba(66,44,20,.025);
    }

    .recurring-card h3 {
      margin: 0;
      min-height: 0;
      font-size: var(--fs-title);
      line-height: 1.5;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      padding-left: 22px;
      position: relative;
    }
    .recurring-card h3::before {
      content: "";
      position: absolute;
      left: 0;
      top: .42em;
      width: 8px;
      height: 8px;
      border-radius: var(--r-full);
      background: var(--task-color, var(--accent-mid));
      box-shadow: 0 0 0 4px var(--task-overlay);
    }
    .recurring-card p { margin: 0; color: var(--color-body-warm); font-size: var(--fs-body); line-height: 1.65; }
    .recurring-card .view-hierarchy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); color: var(--muted); font-size: var(--fs-label); line-height: 1.5; }
    .recurring-card-head,
    .recurring-child-main,
    .recurring-child-meta,
    .recurring-facts,
    .recurring-children-title {
      display: flex;
      align-items: center;
    }
    .recurring-card-head { align-items: flex-start; justify-content: space-between; gap: var(--sp-5); }
    .recurring-card-copy { display: grid; min-width: 0; gap: var(--sp-2); }
    .recurring-card-head-actions {
      display: flex;
      flex: 0 0 auto;
      align-items: center;
      gap: var(--sp-2);
    }
    .recurring-row-menu { flex: 0 0 auto; }
    .recurring-child-count {
      flex: 0 0 auto;
      min-height: 32px;
      display: inline-flex;
      align-items: center;
      padding: 6px var(--sp-3);
      border-radius: var(--r-full);
      background: var(--task-surface-strong);
      color: var(--task-text, var(--muted));
      font-size: var(--fs-caption);
      font-weight: 650;
      white-space: nowrap;
    }
    .recurring-facts { flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); padding-top: var(--sp-1); color: var(--muted); font-size: var(--fs-label); line-height: 1.5; }
    .recurring-children { display: grid; gap: var(--sp-3); margin-top: var(--sp-1); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
    .recurring-children-title { flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2); }
    .recurring-children-title strong { font-size: var(--fs-caption); white-space: nowrap; }
    .recurring-children-title span { color: var(--muted); font-size: var(--fs-caption); white-space: nowrap; }
    .recurring-child {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: var(--sp-4);
      position: relative;
      margin-left: calc((var(--recurring-depth, 1) - 1) * 14px);
      padding: var(--sp-4) 18px;
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-card);
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      background: var(--panel);
      box-shadow: 0 4px 14px rgba(66,44,20,.035);
    }
    .recurring-child::before {
      content: "";
      position: absolute;
      top: -1px;
      bottom: -1px;
      left: -1px;
      width: 3px;
      border-radius: 0;
      background: var(--task-color, var(--accent));
      opacity: .72;
    }
    .recurring-child-main { min-width: 0; gap: var(--sp-3); }
    .recurring-child-main > div { display: grid; min-width: 0; gap: var(--sp-2); }
    .recurring-child-main strong { overflow: hidden; font-size: var(--fs-label); text-overflow: ellipsis; white-space: nowrap; }
    .recurring-child-main span:not(.task-level-badge) { overflow: hidden; color: var(--muted); font-size: var(--fs-caption); text-overflow: ellipsis; white-space: nowrap; }
    .recurring-child-meta { justify-content: flex-end; gap: var(--sp-2); color: var(--muted); font-size: var(--fs-caption); white-space: nowrap; }
    .recurring-child-meta .project-row-menu summary { color: var(--muted); }
    .recurring-child-meta .project-row-menu-popover { top: 34px; }
    .recurring-child .task-level-badge {
      border-color: var(--border-subtle);
      background: var(--panel);
      color: var(--text-secondary);
    }
    .recurring-children-empty { padding: var(--sp-4); border: 1px dashed var(--line); border-radius: var(--radius-card); color: var(--muted); font-size: var(--fs-caption); line-height: 1.65; text-align: center; }
    .view-task-title-row { display: flex; min-width: 0; align-items: center; gap: var(--sp-2); }
    .task-level-badge {
      display: inline-flex;
      min-height: 26px;
      flex: 0 0 auto;
      align-items: center;
      padding: 0 9px;
      border: 1px solid var(--task-border-subtle);
      border-radius: var(--r-full);
      background: var(--task-surface);
      color: var(--task-text, var(--muted));
      font-size: var(--fs-caption);
      font-weight: 650;
      white-space: nowrap;
    }
    @media (max-width: 1100px) {
      .recurring-list { grid-template-columns: 1fr; }
    }
    @media (max-width: 820px) {
      .task-filter-row { align-items: stretch; flex-direction: column; gap: var(--sp-4); }
      .control-band { flex: 0 0 auto; justify-content: flex-start; }
      .control-band .search { flex-basis: 100%; }
    }
    @media (max-width: 640px) {
      .task-control-row { gap: var(--sp-4); margin-bottom: var(--sp-5); }
      .task-view-nav { width: 100%; }
      #taskViewNav {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--sp-1);
        overflow: visible;
      }
      #taskViewNav button {
        min-width: 0;
        width: 100%;
        justify-content: center;
        gap: var(--sp-1);
        font-size: var(--fs-caption);
      }
      #taskViewNav button span { white-space: nowrap; }
      .stage-tabs { width: 100%; }
      .stage-tab { flex: 1 1 0; justify-content: center; }
      .control-band > * { width: 100%; }
      .recurring-card { padding: var(--sp-5); }
      .recurring-card-head { display: grid; gap: var(--sp-3); }
      .recurring-child-count { justify-self: start; }
      .recurring-child { grid-template-columns: 1fr; }
      .recurring-child-meta { justify-content: flex-start; }
    }
    .idea-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) max-content;
      align-items: center;
      row-gap: var(--sp-5);
      column-gap: var(--sp-6);
      min-height: 84px;
      padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5);
      border-bottom: 1px solid var(--border-subtle);
      border-left: 3px solid var(--folder-color, transparent);
      background: var(--panel);
    }
    .idea-card:last-child { border-bottom: 0; }
    .idea-card-copy { display: grid; min-width: 0; gap: var(--sp-2); }
    .idea-card h3 { margin: 0; color: var(--color-ink); font-size: var(--fs-body-lg); line-height: 1.5; }
    .idea-card p { margin: 0; color: var(--muted); font-size: var(--fs-label); line-height: 1.65; }
    .idea-folder-meta {
      display: inline-flex;
      align-items: center;
      gap: var(--sp-2);
      min-width: 0;
      color: var(--folder-color, var(--muted));
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, "Helvetica Neue", sans-serif;
      font-size: var(--fs-label);
      font-weight: 500;
      letter-spacing: 0;
      line-height: 1.5;
    }
    .idea-folder-dot {
      flex: 0 0 auto;
      width: 8px;
      height: 8px;
      border-radius: var(--r-full);
      background: var(--folder-color, var(--muted));
    }
    .idea-folder-name {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .idea-card-category {
      justify-self: center;
      color: var(--muted);
      font-size: var(--fs-label);
      line-height: 1.5;
      text-align: center;
      white-space: nowrap;
    }
    .idea-card-controls {
      display: grid;
      grid-template-columns: var(--idea-card-category-width) max-content;
      align-items: center;
      justify-self: end;
      column-gap: var(--idea-card-control-gap);
    }
    .idea-card .card-actions { justify-content: flex-end; gap: var(--sp-2); margin: 0; }
    .idea-card .card-actions button {
      flex: 0 0 auto;
      min-height: 38px;
      padding: 0 var(--sp-3);
      border-color: var(--line);
      background: var(--panel);
      color: var(--espresso);
    }
    .idea-card .card-actions button:hover { border-color: var(--espresso); background: var(--band); }
    .idea-card .card-actions .idea-promote {
      border-color: var(--espresso);
      background: var(--espresso);
      color: var(--on-espresso);
    }
    .idea-card .card-actions .idea-promote:hover {
      border-color: var(--espresso-deep);
      background: var(--espresso-deep);
      color: var(--on-espresso);
    }
    .idea-zero {
      display: grid;
      min-height: 220px;
      place-content: center;
      justify-items: center;
      gap: var(--sp-2);
      padding: var(--sp-6);
      text-align: center;
    }
    .idea-zero > span {
      display: grid;
      width: 40px;
      height: 40px;
      place-items: center;
      border: 1px dashed var(--line);
      border-radius: var(--r-md);
      background: var(--ground, var(--soft));
      color: var(--muted);
      font-size: var(--fs-title);
    }
    .idea-zero strong { font-size: var(--fs-body-lg); }
    .idea-zero p { max-width: 520px; margin: 0; color: var(--muted); font-size: var(--fs-label); }
    .decision-zero .decision-zero-mark .decision-flag {
      width: 18px;
      height: 21px;
    }
    .decision-zero p {
      max-width: none;
      line-height: 1.65;
      overflow-wrap: normal;
      white-space: nowrap;
    }
    .idea-zero button { margin-top: var(--sp-2); color: var(--espresso); }
    .idea-flow-guide {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius-card);
      background: var(--panel);
    }
    .idea-flow-guide > header {
      display: flex;
      min-height: 48px;
      align-items: center;
      gap: var(--sp-3);
      padding: 0 var(--sp-4);
      background: var(--espresso);
      color: var(--on-espresso);
    }
    .idea-flow-guide > header span { color: var(--on-espresso-muted); font-size: var(--fs-label); }
    .idea-flow-steps { padding: var(--sp-5); }
    .idea-flow-step {
      display: grid;
      grid-template-columns: 24px minmax(0, 1fr);
      gap: var(--sp-4);
      position: relative;
      padding-bottom: var(--sp-5);
    }
    .idea-flow-step:last-child { padding-bottom: 0; }
    .idea-flow-step::before {
      content: "";
      position: absolute;
      left: 11px;
      top: 26px;
      bottom: 0;
      width: 1px;
      background: var(--line);
    }
    .idea-flow-step:last-child::before { display: none; }
    .idea-flow-step > span {
      display: grid;
      width: 24px;
      height: 24px;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: var(--r-full);
      background: var(--surface-soft);
      color: var(--muted);
      font-size: var(--fs-caption);
      font-weight: 700;
    }
    .idea-flow-step.is-current > span { border-color: var(--espresso); background: var(--espresso); color: var(--on-espresso); }
    .idea-flow-step strong { font-size: var(--fs-body); }
    .idea-flow-step p { margin: var(--sp-2) 0 0; color: var(--muted); font-size: var(--fs-label); line-height: 1.65; }
    @media (max-width: 960px) {
      .ideas-layout,
      .issue-layout { grid-template-columns: 1fr; }
      .idea-hub > .section-head,
      .issue-hub > .section-head { align-items: flex-start; }
      .idea-card { column-gap: var(--sp-5); }
      .idea-card-controls { column-gap: var(--sp-5); }
      .idea-card-category { white-space: nowrap; }
    }
    @media (max-width: 640px) {
      .idea-card {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
          "copy"
          "controls";
        align-items: center;
        gap: var(--sp-4) var(--sp-3);
        padding: var(--sp-5) var(--sp-4);
      }
      .idea-card-copy { grid-area: copy; }
      .idea-card-copy .task-title-line { align-items: flex-start; }
      .idea-card-copy .task-title-line h3 {
        display: -webkit-box;
        overflow: hidden;
        text-overflow: clip;
        white-space: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .idea-card-controls {
        grid-area: controls;
        grid-template-columns: minmax(0, 1fr) max-content;
        width: 100%;
        column-gap: var(--sp-3);
      }
      .idea-card-category {
        min-width: 0;
        justify-self: start;
        overflow-wrap: anywhere;
        text-align: left;
        white-space: normal;
      }
      .decision-zero p { max-width: 520px; overflow-wrap: anywhere; white-space: normal; }
      .idea-card .card-actions {
        justify-content: flex-end;
        flex-wrap: nowrap;
        gap: var(--sp-2);
        padding-top: 0;
      }
      .idea-card .card-actions button { min-height: 44px; padding-inline: var(--sp-3); }
      .matrix-view-nav button {
        min-width: 0;
        flex: 1 1 0;
        justify-content: center;
      }
    }

    #quadrantSection > .section-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      justify-content: stretch;
      align-items: start;
      gap: var(--workspace-page-content-space);
      padding-bottom: 0;
      border-bottom: 0;
    }
    #quadrantSection > .section-body { padding-top: var(--sp-5); }
    .matrix-section-heading {
      display: grid;
      gap: var(--sp-2);
    }
    .matrix-view-nav { width: 100%; }

    .canvas-toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--sp-2);
      margin-bottom: 10px;
    }
    .canvas-toolbar .hint { color: var(--muted); font-size: var(--fs-caption); }
    .canvas-toolbar .spacer { flex: 1 1 18px; }
    .partner-input {
      width: 112px;
      min-height: 36px;
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      padding: 0 9px;
      background: var(--panel);
    }

    .gantt-palette {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--sp-3);
      margin: 0 0 var(--sp-4);
      padding: var(--sp-4);
      border: 1px solid var(--accent-border-subtle);
      border-left: 3px solid var(--accent);
      border-radius: var(--radius-card);
      background: var(--accent-surface);
    }
    .gantt-palette-copy { display: grid; gap: var(--sp-1); }

    /* Mobile pages map desktop H2s down by semantic importance instead of
       shrinking body copy, controls, metrics, and every H2 token consumer. */
    @media (max-width: 640px) {
      :root {
        --workspace-page-heading-space: var(--sp-6);
        --workspace-page-content-space: var(--sp-5);
        --workspace-section-space: var(--sp-6);
      }
      .page-heading h2,
      .folder-page-copy h2 {
        font-size: var(--fs-mobile-page-title);
        line-height: 1.27;
        letter-spacing: -.02em;
      }
      .folder-page-copy { gap: var(--sp-2); }
      .folder-page-copy h2 { overflow-wrap: anywhere; }
      .folder-workspace-head {
        margin: var(--workspace-page-heading-space) 0 var(--workspace-page-content-space);
      }

      .workspace-section { margin-top: var(--workspace-section-space); }
      .workspace-section > .section-head {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--sp-1);
        padding-bottom: var(--sp-3);
      }
      .folder-scope-panel { padding: var(--sp-4); }
      .folder-scope-heading { display: grid; gap: var(--sp-1); }
      .folder-scope-option {
        width: 100%;
        max-width: none;
        flex-basis: 100%;
      }
      .section-head h2 {
        font-size: var(--fs-h3);
        line-height: 1.25;
        letter-spacing: -.015em;
      }
      .section-body { padding-top: var(--sp-4); }
      .workspace-section > .section-head > button { align-self: flex-start; }
    }