:root {
      --bg: #060606;
      --bg-card: #111;
      --card-bg: var(--bg-card);
      --border: #444;
      --text: #f5f5f5;
      --text-primary: #f5f5f5;
      --text-secondary: #d0d6df;
      --foreground: #f5f5f5;
      --muted: #aaaaaa;
      --accent: #00b894;
      --panel-bg: #0f1520;
      --panel-elevated: #1a2130;
      --pill-inactive: #333;
      --input-bg: #111;
      --input-border: #555;

      /* Extended palette for theme-awareness */
      --overlay-subtle: rgba(255,255,255,0.03);
      --overlay-hover: rgba(255,255,255,0.05);
      --overlay-active: rgba(255,255,255,0.08);
      --overlay-strong: rgba(255,255,255,0.12);
      --card-shadow: rgba(0, 0, 0, 0.35);
      --accent-faint: rgba(0, 184, 148, 0.12);
      --accent-light: rgba(0, 184, 148, 0.2);
      --accent-glow: rgba(0, 184, 148, 0.5);
      --error: #e74c3c;
      --error-faint: rgba(231, 76, 60, 0.15);
      --warning: #e67e22;
      --warning-faint: rgba(230, 126, 34, 0.1);
      --info: #3498db;
      --info-faint: rgba(52, 152, 219, 0.15);
      --purple: #b39ddb;
      --purple-faint: rgba(179, 157, 219, 0.15);
      --teal: #80cbc4;
      --teal-faint: rgba(128, 203, 196, 0.15);
      --amber: #f9a825;
      --amber-faint: rgba(249, 168, 37, 0.15);
      --user-note: #7c4dff;
      --user-note-faint: rgba(124, 77, 255, 0.15);
      --user-note-editor-bg: rgba(0,0,0,0.08);
      --user-note-placeholder: rgba(208, 214, 223, 0.56);
      --user-note-divider: rgba(255,255,255,0.06);
      --user-note-control-border: rgba(255,255,255,0.14);
      --user-note-heading-toggle: rgba(208,214,223,0.48);
      --shared-note: #009688;
      --shared-note-faint: rgba(0, 150, 136, 0.15);
      --green-badge: #27ae60;
      --green-badge-bg: rgba(39,174,96,0.2);
      --success: #51cf66;
      --success-faint: rgba(81,207,102,0.15);
      --warning-yellow: #ffd93d;
      --warning-yellow-faint: rgba(255,217,61,0.15);
      --disabled-bg: #3a3a3a;
      --disabled-border: #555;
      --disabled-text: #888;
      --code-bg: #222;
      --select-bg: #1a1a1a;
      --select-hover-bg: #222;
      --modal-overlay: rgba(0, 0, 0, 0.8);
      --btn-secondary-hover: #444;
      --scrollbar-thumb: #555;
      --scrollbar-hover: #777;
      --border-subtle: rgba(255,255,255,0.05);
      --workbench-bg: #1a1a2e;
      --workbench-accent: #64c8ff;
      --workbench-gold: #feca57;
      --workbench-chrome-bg: rgba(8, 10, 14, 0.82);
      --workbench-chrome-surface: rgba(20, 24, 31, 0.88);
      --workbench-chrome-surface-strong: rgba(28, 33, 42, 0.94);
      --workbench-chrome-border: rgba(255,255,255,0.11);
      --workbench-chrome-text: #f3f6f8;
      --workbench-chrome-muted: rgba(226, 232, 240, 0.62);
      --workbench-control-bg: rgba(255,255,255,0.055);
      --workbench-control-hover: rgba(255,255,255,0.1);
      --workbench-control-active: rgba(100, 200, 255, 0.18);
      --workbench-danger: #ff7a7a;
      --workbench-panel-bg: rgba(15, 21, 32, 0.94);
      --workbench-panel-border: rgba(100, 200, 255, 0.34);
      --workbench-panel-text: #edf6ff;
      --workbench-panel-muted: rgba(208, 224, 238, 0.66);
      --workbench-panel-control-bg: rgba(255,255,255,0.08);
      --workbench-panel-control-border: rgba(100, 200, 255, 0.28);
      --workbench-panel-danger: #ff7676;
      --workbench-panel-shadow: rgba(0, 0, 0, 0.34);
      --dialog-bg: #15181f;
      --code-block-bg: rgba(15, 20, 30, 0.9);
      --code-block-text: #d8e0ff;
    }

    /* ═══════════════════════════════════════════
       LIGHT THEME — Pastel Matte on White
       ═══════════════════════════════════════════ */
    body.light-theme {
      --bg: #ffffff;
      --bg-card: #f3f4f6;
      --card-bg: var(--bg-card);
      --border: #d1d5db;
      --text: #1f2937;
      --text-primary: #1f2937;
      --text-secondary: #475569;
      --foreground: #1f2937;
      --muted: #6b7280;
      --accent: #4a9882;
      --panel-bg: #eef2f7;
      --panel-elevated: #ffffff;
      --pill-inactive: #e5e7eb;
      --input-bg: #ffffff;
      --input-border: #c4c8d0;

      --overlay-subtle: rgba(0,0,0,0.02);
      --overlay-hover: rgba(0,0,0,0.04);
      --overlay-active: rgba(0,0,0,0.06);
      --overlay-strong: rgba(0,0,0,0.08);
      --card-shadow: rgba(0, 0, 0, 0.08);
      --accent-faint: rgba(74, 152, 130, 0.08);
      --accent-light: rgba(74, 152, 130, 0.14);
      --accent-glow: rgba(74, 152, 130, 0.3);
      --error: #c0564e;
      --error-faint: rgba(192, 86, 78, 0.1);
      --warning: #b87a45;
      --warning-faint: rgba(184, 122, 69, 0.08);
      --info: #5b8fb0;
      --info-faint: rgba(91, 143, 176, 0.1);
      --purple: #8b7aaf;
      --purple-faint: rgba(139, 122, 175, 0.1);
      --teal: #5e9e97;
      --teal-faint: rgba(94, 158, 151, 0.1);
      --amber: #e69100;
      --amber-faint: rgba(230, 145, 0, 0.12);
      --user-note: #6a3de8;
      --user-note-faint: rgba(106, 61, 232, 0.12);
      --user-note-editor-bg: rgba(106, 61, 232, 0.035);
      --user-note-placeholder: rgba(71, 85, 105, 0.72);
      --user-note-divider: rgba(15, 23, 42, 0.1);
      --user-note-control-border: rgba(15, 23, 42, 0.14);
      --user-note-heading-toggle: rgba(71, 85, 105, 0.54);
      --shared-note: #26a69a;
      --shared-note-faint: rgba(38, 166, 154, 0.12);
      --green-badge: #4a9882;
      --green-badge-bg: rgba(74, 152, 130, 0.12);
      --success: #3a9d6e;
      --success-faint: rgba(58, 157, 110, 0.12);
      --warning-yellow: #c49a32;
      --warning-yellow-faint: rgba(196, 154, 50, 0.1);
      --disabled-bg: #e5e7eb;
      --disabled-border: #d1d5db;
      --disabled-text: #9ca3af;
      --code-bg: #f0f1f3;
      --select-bg: #f9fafb;
      --select-hover-bg: #f3f4f6;
      --modal-overlay: rgba(0, 0, 0, 0.4);
      --btn-secondary-hover: #e5e7eb;
      --scrollbar-thumb: #c4c8d0;
      --scrollbar-hover: #9ca3af;
      --border-subtle: rgba(0,0,0,0.05);
      --workbench-bg: #f0f2f5;
      --workbench-accent: #4a8ab5;
      --workbench-gold: #b8943a;
      --workbench-chrome-bg: rgba(255, 255, 255, 0.78);
      --workbench-chrome-surface: rgba(255, 255, 255, 0.86);
      --workbench-chrome-surface-strong: rgba(255, 255, 255, 0.95);
      --workbench-chrome-border: rgba(15, 23, 42, 0.11);
      --workbench-chrome-text: #172033;
      --workbench-chrome-muted: rgba(71, 85, 105, 0.72);
      --workbench-control-bg: rgba(15, 23, 42, 0.045);
      --workbench-control-hover: rgba(15, 23, 42, 0.075);
      --workbench-control-active: rgba(74, 138, 181, 0.13);
      --workbench-danger: #b85b5b;
      --workbench-panel-bg: rgba(255, 255, 255, 0.94);
      --workbench-panel-border: rgba(74, 138, 181, 0.32);
      --workbench-panel-text: #1f2937;
      --workbench-panel-muted: rgba(71, 85, 105, 0.72);
      --workbench-panel-control-bg: rgba(74, 138, 181, 0.07);
      --workbench-panel-control-border: rgba(74, 138, 181, 0.22);
      --workbench-panel-danger: #b74f4f;
      --workbench-panel-shadow: rgba(15, 23, 42, 0.14);
      --dialog-bg: #ffffff;
      --code-block-bg: #f0f1f4;
      --code-block-text: #2d3748;
    }

    * {
      box-sizing: border-box;
    }

    /* Themed scrollbars globally */
    * {
      scrollbar-color: var(--scrollbar-thumb) var(--bg-card);
      scrollbar-width: thin;
    }

    *::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    *::-webkit-scrollbar-track {
      background: var(--bg-card);
    }

    *::-webkit-scrollbar-thumb {
      background: var(--scrollbar-thumb);
      border-radius: 4px;
    }

    *::-webkit-scrollbar-thumb:hover {
      background: var(--scrollbar-hover);
    }

    *::-webkit-scrollbar-corner {
      background: var(--bg-card);
    }

    *::-webkit-scrollbar-button:single-button {
      background: var(--bg-card) !important;
      border: none !important;
      height: 0 !important;
      width: 0 !important;
    }

    *::-webkit-scrollbar-button {
      background: var(--bg-card) !important;
      border: none !important;
      height: 0 !important;
      width: 0 !important;
    }

    /* MEP Network applet */
    .mep-app {
      min-height: 100%;
      padding: 10px 14px 14px;
      background: var(--bg);
      color: var(--text);
      font-size: 0.84rem;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    /* ── 3-panel workspace ────────────────────────────────────────────── */

    .mep-workspace {
      display: grid;
      grid-template-columns: 210px 1fr 340px;
      gap: 0;
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden;
      background: var(--border);
      min-height: 540px;
      flex: 1 1 0;
    }

    .mep-workspace-tree,
    .mep-workspace-diagram,
    .mep-workspace-schedule {
      min-width: 0;
      overflow: hidden;
      background: var(--bg);
    }

    .mep-workspace-tree { overflow-y: auto; }
    .mep-workspace-diagram { display: flex; flex-direction: column; background: var(--bg-card); overflow: hidden; }
    .mep-workspace-schedule { overflow-y: auto; border-left: 1px solid var(--border); }

    /* ── System tree ──────────────────────────────────────────────────── */

    .mep-tree { padding: 4px 0; }

    .mep-tree-group { border-bottom: 1px solid var(--border-subtle); }

    .mep-tree-disc {
      display: grid;
      grid-template-columns: 1fr auto auto;
      align-items: center;
      gap: 5px;
      width: 100%;
      padding: 9px 10px 8px;
      border: 0;
      background: var(--overlay-subtle);
      color: var(--text);
      text-align: left;
      cursor: pointer;
      border-bottom: 1px solid var(--border-subtle);
    }
    .mep-tree-disc:hover,
    .mep-tree-disc.active { background: rgba(77,182,172,0.08); }

    .mep-tree-disc-name {
      font-size: 0.72rem;
      font-weight: 850;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--muted);
    }
    .mep-tree-disc.active .mep-tree-disc-name { color: var(--teal); }

    .mep-tree-disc-metric {
      font-size: 0.68rem;
      color: var(--muted);
      white-space: nowrap;
    }

    .mep-tree-sys {
      display: grid;
      grid-template-columns: 1fr auto auto;
      align-items: center;
      gap: 5px;
      width: 100%;
      padding: 8px 10px 8px 18px;
      border: 0;
      border-bottom: 1px solid var(--border-subtle);
      background: transparent;
      color: var(--text);
      text-align: left;
      cursor: pointer;
    }
    .mep-tree-sys:hover { background: var(--overlay-subtle); }
    .mep-tree-sys.active {
      background: rgba(77,182,172,0.07);
      color: var(--teal);
    }
    .mep-tree-sys.status-review { color: var(--warning); }
    .mep-tree-sys.status-blocked { color: var(--error); }
    .mep-tree-sys.active.status-review { background: rgba(255,180,0,0.05); }
    .mep-tree-sys.active.status-blocked { background: rgba(220,60,60,0.04); }

    .mep-tree-sys-label {
      font-size: 0.79rem;
      font-weight: 700;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .mep-tree-sys-meta {
      font-size: 0.67rem;
      color: var(--muted);
      white-space: nowrap;
    }

    .mep-tree-dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
      background: var(--border);
    }
    .mep-tree-dot.ok { background: var(--teal); opacity: 0.5; }
    .mep-tree-dot.code-critical { background: var(--error); }
    .mep-tree-dot.code-warning  { background: var(--warning); }
    .mep-tree-dot.code-info     { background: var(--info); }

    /* ── SLD toolbar and frame ────────────────────────────────────────── */

    .mep-sld-toolbar {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 7px 10px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
      background: var(--bg-card);
    }

    .mep-sld-title {
      flex: 1;
      font-size: 0.79rem;
      font-weight: 700;
      color: var(--text);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .mep-sld-back { flex-shrink: 0; }

    .mep-sld-scroll {
      flex: 1 1 0;
      overflow: auto;
      background:
        radial-gradient(circle, color-mix(in srgb, var(--border-subtle) 55%, transparent) 1px, transparent 1px),
        color-mix(in srgb, var(--bg-card) 96%, var(--overlay-subtle));
      background-size: 32px 32px;
    }

    /* ── SLD SVG ──────────────────────────────────────────────────────── */

    .mep-sld-svg {
      display: block;
      width: 100%;
      min-width: 640px;
      height: auto;
      padding: 8px;
    }

    .mep-sld-source-body {
      fill: color-mix(in srgb, var(--bg-card) 85%, var(--teal));
      stroke: var(--teal);
      stroke-width: 1.5;
    }

    .mep-sld-node-label {
      fill: var(--text);
      font-size: 11px;
      font-weight: 800;
      pointer-events: none;
    }

    .mep-sld-node-metric {
      fill: var(--muted);
      font-size: 9.5px;
      font-weight: 650;
      pointer-events: none;
    }

    .mep-sld-trunk,
    .mep-sld-rail {
      stroke: color-mix(in srgb, var(--muted) 55%, var(--border));
      stroke-width: 2;
      fill: none;
    }

    .mep-sld-branch {
      stroke: color-mix(in srgb, var(--muted) 38%, var(--border));
      stroke-width: 1.2;
      fill: none;
      stroke-dasharray: 4 3;
    }

    .mep-sld-route-label {
      fill: var(--muted);
      font-size: 9px;
      font-weight: 600;
      pointer-events: none;
    }

    .mep-sld-arrowhead { fill: color-mix(in srgb, var(--muted) 55%, var(--border)); }

    .mep-sld-room rect {
      fill: var(--bg-card);
      stroke: var(--border);
      stroke-width: 1;
    }
    .mep-sld-room:hover rect,
    .mep-sld-room.is-selected rect {
      stroke: var(--teal);
      stroke-width: 1.5;
      fill: rgba(77,182,172,0.07);
    }
    .mep-sld-room.code-critical rect { stroke: var(--error); }
    .mep-sld-room.code-warning  rect { stroke: var(--warning); }

    .mep-sld-room-name {
      fill: var(--text);
      font-size: 10px;
      font-weight: 760;
      pointer-events: none;
    }
    .mep-sld-room-metric {
      fill: var(--muted);
      font-size: 9px;
      pointer-events: none;
    }

    .mep-sld-code-dot { pointer-events: none; }
    .mep-sld-code-dot.code-critical { fill: var(--error); }
    .mep-sld-code-dot.code-warning  { fill: var(--warning); }
    .mep-sld-code-dot.code-info     { fill: var(--info); }

    .mep-sld-more {
      fill: var(--muted);
      font-size: 9.5px;
      font-style: italic;
      pointer-events: none;
    }

    /* ── Room schedule ────────────────────────────────────────────────── */

    .mep-schedule { display: flex; flex-direction: column; }

    .mep-schedule-head {
      display: grid;
      grid-template-columns: 1fr 68px 120px 58px;
      gap: 4px;
      padding: 7px 10px;
      border-bottom: 1px solid var(--border);
      background: var(--overlay-subtle);
      position: sticky;
      top: 0;
      z-index: 2;
      font-size: 0.67rem;
      font-weight: 850;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--muted);
    }

    .mep-schedule-empty {
      padding: 18px 12px;
      font-size: 0.76rem;
      color: var(--muted);
    }

    .mep-schedule-row {
      border-bottom: 1px solid var(--border-subtle);
    }
    .mep-schedule-row.is-open {
      background: var(--bg-card);
      border-color: var(--border);
    }

    .mep-schedule-row-head {
      display: grid;
      grid-template-columns: 1fr 68px 120px 58px;
      gap: 4px;
      padding: 8px 10px;
      cursor: pointer;
      align-items: center;
    }
    .mep-schedule-row-head:hover { background: var(--overlay-subtle); }
    .mep-schedule-row.is-open .mep-schedule-row-head { background: rgba(77,182,172,0.05); }

    .mep-sh-name, .mep-sh-metric, .mep-sh-system, .mep-sh-status { min-width: 0; }

    .mep-sr-code {
      display: inline-block;
      margin-right: 4px;
      padding: 1px 4px;
      background: var(--overlay-subtle);
      border: 1px solid var(--border);
      border-radius: 3px;
      font-size: 0.64rem;
      font-weight: 700;
      color: var(--muted);
      flex-shrink: 0;
    }
    .mep-sr-name-text {
      font-size: 0.79rem;
      font-weight: 700;
      color: var(--text);
    }
    .mep-sr-dept {
      display: block;
      font-size: 0.65rem;
      color: var(--muted);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .mep-sh-metric { font-size: 0.76rem; color: var(--text); white-space: nowrap; }
    .mep-sh-system { font-size: 0.68rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .mep-sr-pill {
      display: inline-block;
      padding: 2px 6px;
      border-radius: 3px;
      font-size: 0.62rem;
      font-weight: 800;
      text-transform: uppercase;
    }
    .mep-sr-pill.code-critical { background: var(--error-faint); color: var(--error); }
    .mep-sr-pill.code-warning  { background: var(--warning-faint); color: var(--warning); }
    .mep-sr-pill.code-info     { background: var(--info-faint); color: var(--info); }
    .mep-sr-ok { color: var(--teal); font-size: 0.76rem; }

    /* Expanded row detail */
    .mep-sr-expanded {
      padding: 10px 12px 14px;
      border-top: 1px solid var(--border-subtle);
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .mep-sr-basis {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }
    .mep-sr-basis span {
      padding: 2px 7px;
      background: var(--overlay-subtle);
      border: 1px solid var(--border);
      border-radius: 3px;
      font-size: 0.68rem;
      color: var(--muted);
    }

    .mep-sr-170-ref {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 5px 8px;
      background: rgba(77,182,172,0.06);
      border: 1px solid rgba(77,182,172,0.3);
      border-radius: 5px;
      font-size: 0.7rem;
      color: var(--muted);
    }
    .mep-sr-170-badge {
      flex-shrink: 0;
      padding: 1px 5px;
      background: var(--teal);
      color: var(--bg);
      border-radius: 3px;
      font-size: 0.6rem;
      font-weight: 800;
    }

    .mep-sr-occ {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.72rem;
      color: var(--muted);
    }
    .mep-sr-occ span { font-weight: 700; white-space: nowrap; }
    .mep-sr-occ select {
      flex: 1;
      font-size: 0.72rem;
      padding: 3px 5px;
      background: var(--input-bg, var(--overlay-subtle));
      border: 1px solid var(--border);
      border-radius: 4px;
      color: var(--text);
    }

    .mep-sr-overrides {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
    }
    .mep-sr-overrides label {
      display: flex;
      flex-direction: column;
      gap: 2px;
      font-size: 0.68rem;
    }
    .mep-sr-overrides label span {
      font-weight: 700;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }
    .mep-sr-overrides input {
      width: 100%;
      font-size: 0.72rem;
      padding: 3px 5px;
      background: var(--input-bg, var(--overlay-subtle));
      border: 1px solid var(--border);
      border-radius: 4px;
      color: var(--text);
    }

    .mep-sr-notes {
      width: 100%;
      min-height: 48px;
      resize: vertical;
      font-size: 0.72rem;
      padding: 5px 7px;
      background: var(--input-bg, var(--overlay-subtle));
      border: 1px solid var(--border);
      border-radius: 4px;
      color: var(--text);
      font-family: inherit;
      box-sizing: border-box;
    }
    .mep-sr-notes::placeholder { color: var(--muted); opacity: 0.6; }

    .mep-sr-assigns { display: flex; flex-direction: column; gap: 4px; }

    .mep-sr-checks { display: flex; flex-direction: column; gap: 5px; }

    .mep-sr-check {
      display: grid;
      grid-template-columns: 90px 1fr;
      gap: 6px;
      padding: 6px 8px;
      border: 1px solid var(--border);
      border-radius: 4px;
      background: var(--overlay-subtle);
      font-size: 0.72rem;
    }
    .mep-sr-check.severity-critical { border-color: color-mix(in srgb, var(--error) 45%, var(--border)); background: var(--error-faint); }
    .mep-sr-check.severity-warning  { border-color: color-mix(in srgb, var(--warning) 45%, var(--border)); background: var(--warning-faint); }

    .mep-sr-check-std {
      font-size: 0.62rem;
      font-weight: 800;
      text-transform: uppercase;
      color: var(--muted);
      padding-top: 1px;
    }
    .mep-sr-check-body strong {
      display: block;
      color: var(--text);
      font-weight: 760;
      margin-bottom: 2px;
    }
    .mep-sr-check-body span {
      display: block;
      color: var(--muted);
      font-size: 0.68rem;
    }

    .mep-toolbar,
    .mep-assumptions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      margin-bottom: 10px;
    }

    .mep-toolbar {
      padding: 10px;
      border: 1px solid var(--border);
      border-radius: 7px;
      background: var(--bg-card);
    }

    .mep-toolbar-main,
    .mep-toolbar-secondary,
    .mep-toolbar-more-body {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      min-width: 0;
    }

    .mep-toolbar-main {
      flex: 1 1 540px;
    }

    .mep-toolbar-secondary {
      flex: 1 1 320px;
      justify-content: flex-end;
    }

    .mep-toolbar.is-guided {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
    }

    .mep-toolbar-more {
      border: 1px dashed var(--border);
      border-radius: 7px;
      background: color-mix(in srgb, var(--bg-card) 86%, var(--overlay-subtle));
      padding: 8px 10px;
    }

    .mep-toolbar-more summary {
      cursor: pointer;
      color: var(--muted);
      font-size: 0.74rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .mep-toolbar-more-body {
      margin-top: 8px;
    }

    .mep-primary-filter {
      display: grid;
      grid-template-columns: auto minmax(190px, 260px);
      gap: 8px;
      align-items: center;
      padding-right: 8px;
      border-right: 1px solid var(--border);
      color: var(--muted);
      font-size: 0.72rem;
      font-weight: 850;
      text-transform: uppercase;
      letter-spacing: 0.07em;
    }

    .mep-primary-filter select {
      height: 34px;
      font-size: 0.84rem;
      font-weight: 760;
      text-transform: none;
      letter-spacing: 0;
      color: var(--text);
    }

    .mep-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 10px;
      border-bottom: 1px solid var(--border);
      padding-bottom: 8px;
    }

    .mep-tab {
      height: 30px;
      padding: 0 11px;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--overlay-subtle);
      color: var(--muted);
      font-weight: 700;
      cursor: pointer;
    }

    .mep-tab.active {
      background: rgba(77, 182, 172, 0.18);
      border-color: rgba(77, 182, 172, 0.55);
      color: var(--text);
    }

    .mep-tabs {
      justify-content: space-between;
    }

    .mep-disc-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    /* === MEP Atlas — Source → Systems → Endpoints === */

    .mep-atlas {
      display: grid;
      grid-template-columns: 190px minmax(220px, 260px) 1fr;
      gap: 1px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--border);
      overflow: hidden;
      min-height: 460px;
    }

    .mep-atlas-col {
      background: var(--bg);
      min-width: 0;
      overflow-y: auto;
    }

    .mep-atlas-col-head {
      padding: 11px 12px 9px;
      border-bottom: 1px solid var(--border);
      background: var(--bg-card);
      position: sticky;
      top: 0;
      z-index: 1;
    }

    .mep-atlas-col-head strong {
      display: block;
      font-size: 0.71rem;
      font-weight: 850;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      color: var(--muted);
    }

    .mep-atlas-col-head span {
      display: block;
      font-size: 0.71rem;
      color: var(--muted);
      margin-top: 2px;
    }

    .mep-atlas-empty {
      padding: 16px 12px;
      font-size: 0.78rem;
      color: var(--muted);
      line-height: 1.5;
    }

    .mep-atlas-source-card {
      display: block;
      width: 100%;
      padding: 11px 12px;
      border: 0;
      border-bottom: 1px solid var(--border-subtle);
      background: transparent;
      text-align: left;
      cursor: pointer;
      color: inherit;
    }

    .mep-atlas-source-card:hover,
    .mep-atlas-source-card.active {
      background: var(--overlay-subtle);
    }

    .mep-atlas-source-disc {
      font-size: 0.7rem;
      font-weight: 850;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--muted);
    }

    .mep-atlas-source-metric {
      font-size: 1rem;
      font-weight: 800;
      color: var(--text);
      margin: 3px 0 2px;
    }

    .mep-atlas-source-label {
      font-size: 0.71rem;
      color: var(--muted);
      margin-bottom: 4px;
    }

    .mep-atlas-system-item {
      display: block;
      width: 100%;
      padding: 9px 12px;
      border: 0;
      border-bottom: 1px solid var(--border-subtle);
      background: transparent;
      text-align: left;
      cursor: pointer;
      color: inherit;
    }

    .mep-atlas-system-item:hover {
      background: var(--overlay-subtle);
    }

    .mep-atlas-system-item.active {
      background: rgba(77, 182, 172, 0.07);
      color: var(--teal);
    }

    .mep-atlas-system-item.status-review { color: var(--warning); }
    .mep-atlas-system-item.status-review.active { background: rgba(255,180,0,0.05); }
    .mep-atlas-system-item.status-blocked { color: var(--error); }
    .mep-atlas-system-item.status-blocked.active { background: rgba(220,60,60,0.05); }

    .mep-atlas-system-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 6px;
    }

    .mep-atlas-system-head strong {
      font-size: 0.83rem;
      font-weight: 760;
      color: var(--text);
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .mep-atlas-system-head span {
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--text);
      white-space: nowrap;
      flex-shrink: 0;
    }

    .mep-atlas-system-sub {
      font-size: 0.68rem;
      color: var(--muted);
      margin-top: 2px;
    }

    .mep-atlas-system-path {
      font-size: 0.68rem;
      color: var(--muted);
      margin-top: 3px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .mep-atlas-room {
      border-bottom: 1px solid var(--border-subtle);
    }

    .mep-atlas-room.active {
      background: var(--bg-card);
    }

    .mep-atlas-room-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      width: 100%;
      padding: 9px 12px;
      border: 0;
      background: transparent;
      text-align: left;
      cursor: pointer;
      color: inherit;
    }

    .mep-atlas-room-head:hover {
      background: var(--overlay-subtle);
    }

    .mep-atlas-room-info strong {
      display: block;
      font-size: 0.82rem;
      font-weight: 760;
      color: var(--text);
    }

    .mep-atlas-room-info span {
      display: block;
      font-size: 0.68rem;
      color: var(--muted);
    }

    .mep-atlas-room-right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 4px;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .mep-atlas-room-right > span {
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--text);
    }

    .mep-atlas-room-detail {
      padding: 12px;
      border-top: 1px solid var(--border-subtle);
      background: var(--bg-card);
    }

    /* Trace section headers */
    .mep-trace-section-head {
      display: flex;
      align-items: baseline;
      gap: 6px;
      margin: 10px 0 5px;
      font-size: 0.7rem;
      font-weight: 850;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      color: var(--muted);
    }

    .mep-trace-section-head:first-child { margin-top: 0; }

    .mep-trace-section-head span {
      font-size: 0.65rem;
      font-weight: 600;
      text-transform: none;
      letter-spacing: 0;
      color: var(--muted);
      opacity: 0.7;
    }

    .mep-trace-assign-head { color: rgba(77, 182, 172, 0.8); }

    /* MEP Basis rows (calculated, read-only) */
    .mep-trace-basis {
      display: flex;
      flex-direction: column;
      gap: 3px;
      margin-bottom: 6px;
      padding: 8px 10px;
      background: var(--overlay-subtle);
      border-radius: 5px;
    }

    .mep-basis-row {
      display: grid;
      grid-template-columns: 72px 1fr auto;
      gap: 8px;
      align-items: baseline;
    }

    .mep-trace-disc {
      font-size: 0.68rem;
      font-weight: 850;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--muted);
    }

    .mep-basis-detail {
      font-size: 0.79rem;
      color: var(--text);
    }

    .mep-basis-source {
      font-size: 0.67rem;
      color: var(--muted);
      white-space: nowrap;
      font-style: italic;
    }

    /* System Assignment rows (engineer input) */
    .mep-trace-assigns {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin-bottom: 8px;
    }

    .mep-assign-row {
      display: grid;
      grid-template-columns: 72px 1fr auto;
      gap: 8px;
      align-items: center;
    }

    .mep-assign-input {
      height: 26px;
      padding: 2px 7px;
      border: 1px solid var(--input-border);
      border-radius: 4px;
      background: var(--input-bg);
      color: var(--text);
      font: inherit;
      font-size: 0.79rem;
      min-width: 0;
    }

    .mep-assign-input.is-default {
      border-style: dashed;
      color: var(--muted);
    }

    .mep-assign-input:focus {
      outline: none;
      border-color: rgba(77, 182, 172, 0.65);
      border-style: solid;
      color: var(--text);
    }

    .mep-assign-hint {
      font-size: 0.65rem;
      color: var(--muted);
      white-space: nowrap;
    }

    .mep-assign-hint.is-set {
      color: rgba(77, 182, 172, 0.8);
    }

    .mep-trace-issues {
      display: flex;
      flex-direction: column;
      gap: 3px;
      margin-bottom: 8px;
    }

    .mep-trace-issue {
      font-size: 0.72rem;
      color: var(--warning);
      padding-left: 15px;
      position: relative;
    }

    .mep-trace-issue::before {
      content: '⚠';
      position: absolute;
      left: 0;
    }

    .mep-trace-full {
      border: 1px dashed var(--border);
      border-radius: 5px;
      padding: 6px 10px;
    }

    .mep-trace-full summary {
      font-size: 0.72rem;
      color: var(--muted);
      cursor: pointer;
      font-weight: 700;
    }

    .mep-trace-full-body { margin-top: 10px; }

    .mep-atlas-issues {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
      margin-top: 8px;
      padding: 8px 10px;
      border: 1px solid var(--border);
      border-radius: 7px;
      background: var(--bg-card);
    }

    .mep-atlas-issues-label {
      font-size: 0.71rem;
      font-weight: 850;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--muted);
      margin-right: 4px;
    }

    .mep-atlas-issue {
      display: flex;
      flex-direction: column;
      padding: 5px 9px;
      border: 1px solid var(--border);
      border-radius: 5px;
      background: var(--overlay-subtle);
      cursor: pointer;
      text-align: left;
      color: inherit;
      max-width: 260px;
    }

    .mep-atlas-issue.status-blocked { border-color: var(--error); }
    .mep-atlas-issue.status-review { border-color: var(--warning); }

    .mep-atlas-issue strong {
      font-size: 0.74rem;
      font-weight: 760;
      color: var(--text);
    }

    .mep-atlas-issue span {
      font-size: 0.68rem;
      color: var(--muted);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* Revit system match badges on system nodes */
    .mep-atlas-system-revit {
      display: flex;
      align-items: center;
      gap: 4px;
      margin-top: 2px;
    }

    .mep-sys-revit-badge {
      display: inline-block;
      font-size: 0.62rem;
      font-weight: 600;
      padding: 1px 5px;
      border-radius: 3px;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      background: var(--overlay-subtle, rgba(0,0,0,0.06));
      color: var(--muted);
      border: 1px solid transparent;
    }

    .mep-sys-revit-badge.is-matched {
      background: color-mix(in srgb, var(--teal, #0d9488) 12%, transparent);
      color: var(--teal, #0d9488);
      border-color: color-mix(in srgb, var(--teal, #0d9488) 30%, transparent);
    }

    .mep-sys-revit-badge.is-partial {
      background: color-mix(in srgb, var(--warning, #d97706) 12%, transparent);
      color: var(--warning, #d97706);
      border-color: color-mix(in srgb, var(--warning, #d97706) 30%, transparent);
    }

    .mep-sys-revit-badge.is-missing {
      background: color-mix(in srgb, var(--muted, #888) 10%, transparent);
      color: var(--muted, #888);
      border-color: color-mix(in srgb, var(--muted, #888) 25%, transparent);
    }

    /* Assignment dropdown (matches text input styling) */
    .mep-assign-select {
      height: 26px;
      padding: 2px 6px;
      font-size: 0.76rem;
      border-radius: 4px;
      border: 1px solid var(--border);
      background: var(--bg-input, var(--bg-card));
      color: var(--text);
      cursor: pointer;
      min-width: 0;
      width: 100%;
    }

    .mep-assign-select.is-default {
      border-style: dashed;
      color: var(--muted);
    }

    .mep-assign-select:focus {
      outline: none;
      border-color: var(--teal, #0d9488);
    }

    /* Revit tab systems delta table */
    .mep-systems-delta-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.76rem;
      margin-top: 8px;
    }

    .mep-systems-delta-table th {
      text-align: left;
      font-size: 0.68rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--muted);
      padding: 4px 8px;
      border-bottom: 1px solid var(--border);
    }

    .mep-systems-delta-table td {
      padding: 5px 8px;
      border-bottom: 1px solid var(--border-subtle, var(--border));
      vertical-align: middle;
    }

    .mep-table-group-row td {
      font-size: 0.68rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--muted);
      padding: 8px 8px 3px;
      background: var(--bg-card);
      border-bottom: 1px solid var(--border);
    }

    .mep-systems-delta-table tr.status-ok td { color: var(--text); }
    .mep-systems-delta-table tr.status-review td:first-child { color: var(--warning, #d97706); }
    .mep-systems-delta-table tr.status-missing td:first-child { color: var(--muted); font-style: italic; }

    /* Model components section (placed Revit MEP families) */
    .mep-trace-components-head { color: var(--teal, #0d9488); }

    .mep-trace-components {
      display: flex;
      flex-direction: column;
      gap: 3px;
      padding: 6px 0;
    }

    .mep-component-row {
      display: grid;
      grid-template-columns: 18px 1fr auto;
      align-items: center;
      gap: 6px;
      padding: 3px 4px;
      border-radius: 4px;
      font-size: 0.74rem;
    }

    .mep-component-row.is-low {
      background: color-mix(in srgb, var(--warning, #d97706) 8%, transparent);
    }

    .mep-component-row.is-high {
      background: color-mix(in srgb, var(--teal, #0d9488) 8%, transparent);
    }

    .mep-component-cat {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      border-radius: 3px;
      font-size: 0.6rem;
      font-weight: 700;
      flex-shrink: 0;
    }

    .mep-component-cat--hvac       { background: color-mix(in srgb, var(--teal, #0d9488) 18%, transparent); color: var(--teal, #0d9488); }
    .mep-component-cat--electrical { background: color-mix(in srgb, var(--warning, #d97706) 18%, transparent); color: var(--warning, #d97706); }
    .mep-component-cat--piping     { background: color-mix(in srgb, #3b82f6 18%, transparent); color: #3b82f6; }

    .mep-component-label {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--text);
      display: flex;
      flex-direction: column;
      gap: 1px;
    }

    .mep-component-label small {
      font-size: 0.62rem;
      color: var(--muted);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .mep-component-eng {
      font-size: 0.7rem;
      color: var(--muted);
      white-space: nowrap;
      text-align: right;
    }

    .mep-component-eng.is-low  { color: var(--warning, #d97706); font-weight: 600; }
    .mep-component-eng.is-high { color: var(--teal, #0d9488);    font-weight: 600; }

    /* System node wrapper — groups the node button with its action row */
    .mep-atlas-system-wrap {
      display: flex;
      flex-direction: column;
    }

    .mep-sys-actions {
      display: flex;
      gap: 4px;
      padding: 3px 8px 5px;
      background: var(--bg-card);
    }

    .mep-atlas-system-wrap:has(.mep-atlas-system-item.active) .mep-sys-actions {
      color: var(--teal, #0d9488);
    }

    .mep-sys-action-btn {
      font-size: 0.65rem;
      font-weight: 600;
      padding: 2px 7px;
      border-radius: 3px;
      border: 1px solid var(--border);
      background: var(--bg-card);
      color: var(--muted);
      cursor: pointer;
      letter-spacing: 0.02em;
      transition: color 0.1s, border-color 0.1s;
    }

    .mep-sys-action-btn:hover {
      color: var(--text);
      border-color: var(--text);
    }

    .mep-sys-action-enact {
      color: var(--teal, #0d9488);
      border-color: color-mix(in srgb, var(--teal, #0d9488) 40%, transparent);
    }

    .mep-sys-action-enact:hover {
      background: color-mix(in srgb, var(--teal, #0d9488) 10%, transparent);
      border-color: var(--teal, #0d9488);
      color: var(--teal, #0d9488);
    }

    .mep-toolbar input,
    .mep-toolbar select,
    .mep-field input,
    .mep-field select,
    .mep-inline-controls select,
    .mep-mini-select,
    .mep-detail-row input {
      height: 32px;
      padding: 6px 8px;
      border: 1px solid var(--input-border);
      border-radius: 6px;
      background: var(--input-bg);
      color: var(--text);
      font: inherit;
    }

    .mep-check {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--muted);
      font-size: 0.78rem;
      white-space: nowrap;
    }

    .mep-search {
      flex: 1 1 260px;
      min-width: 180px;
    }

    .mep-mode-toggle {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      padding: 3px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: var(--overlay-subtle);
      white-space: nowrap;
    }

    .mep-mode-toggle button {
      height: 30px;
      min-width: 74px;
      padding: 0 12px;
      border: 1px solid transparent;
      border-radius: 999px;
      background: transparent;
      color: var(--muted);
      font: inherit;
      font-size: 0.75rem;
      font-weight: 820;
      cursor: pointer;
    }

    .mep-mode-toggle button.active {
      background: rgba(77, 182, 172, 0.18);
      border-color: rgba(77, 182, 172, 0.4);
      color: var(--text);
    }

    .mep-guide-rail {
      display: grid;
      grid-template-columns: minmax(260px, 1fr) minmax(260px, 0.85fr);
      gap: 12px;
      margin-bottom: 8px;
      padding: 11px 12px;
      border: 1px solid rgba(77, 182, 172, 0.28);
      border-radius: 8px;
      background:
        radial-gradient(circle at top right, rgba(77, 182, 172, 0.14), transparent 36%),
        linear-gradient(135deg, color-mix(in srgb, var(--bg-card) 92%, var(--overlay-subtle)), color-mix(in srgb, var(--bg-card) 82%, var(--overlay-subtle)));
    }

    .mep-guide-intro span {
      display: block;
      margin-bottom: 4px;
      color: var(--teal);
      font-size: 0.68rem;
      font-weight: 850;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .mep-guide-intro h3 {
      margin: 0 0 4px;
      color: var(--text);
      font-size: 0.94rem;
      line-height: 1.2;
    }

    .mep-guide-intro p {
      color: var(--muted);
      font-size: 0.74rem;
      line-height: 1.35;
      max-width: 62ch;
    }

    .mep-guide-steps {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .mep-guide-step {
      padding: 9px 10px;
      border: 1px solid var(--border);
      border-radius: 7px;
      background: rgba(255,255,255,0.04);
    }

    .mep-guide-step strong {
      display: block;
      color: var(--text);
      font-size: 0.92rem;
      line-height: 1.25;
      margin-bottom: 2px;
    }

    .mep-guide-step small {
      display: block;
      color: var(--muted);
      font-size: 0.7rem;
      line-height: 1.35;
    }

    .mep-discipline-context {
      display: grid;
      grid-template-columns: minmax(260px, 0.8fr) minmax(320px, 1.2fr);
      gap: 12px;
      align-items: stretch;
      margin: 0 0 12px;
      padding: 12px;
      border: 1px solid var(--border);
      border-radius: 7px;
      background: var(--bg-card);
    }

    .mep-discipline-context > div:first-child {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-width: 0;
    }

    .mep-discipline-context strong {
      color: var(--text);
      font-size: 0.94rem;
      font-weight: 850;
      line-height: 1.2;
    }

    .mep-discipline-context span {
      margin-top: 5px;
      color: var(--muted);
      font-size: 0.78rem;
      line-height: 1.4;
    }

    .mep-discipline-context .mep-impact-strip {
      margin: 0;
    }

    .mep-btn {
      height: 32px;
      padding: 0 12px;
      border: 1px solid rgba(77, 182, 172, 0.45);
      border-radius: 6px;
      background: rgba(77, 182, 172, 0.14);
      color: var(--text);
      font-weight: 700;
      cursor: pointer;
    }

    .mep-btn:hover {
      background: rgba(77, 182, 172, 0.22);
    }

    .mep-field {
      display: grid;
      grid-template-columns: auto 76px;
      gap: 6px;
      align-items: center;
      color: var(--muted);
      font-size: 0.76rem;
    }

    .mep-field input,
    .mep-field select {
      width: 76px;
      text-align: right;
    }

    .mep-assumption-panel {
      margin-bottom: 10px;
      border: 1px solid var(--border);
      border-radius: 7px;
      background: var(--overlay-subtle);
      padding: 8px 10px;
    }

    .mep-assumption-panel summary {
      cursor: pointer;
      color: var(--muted);
      font-size: 0.76rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .mep-assumption-panel .mep-assumptions {
      margin-top: 10px;
      margin-bottom: 2px;
    }

    .mep-section-group {
      border: 1px solid var(--border);
      border-radius: 7px;
      background: var(--bg-card);
      margin: 0 0 10px;
      overflow: hidden;
    }

    .mep-section-group > summary {
      display: flex;
      align-items: center;
      min-height: 42px;
      padding: 0 12px;
      cursor: pointer;
      color: var(--text);
      background: color-mix(in srgb, var(--bg-card) 88%, var(--overlay-subtle));
      border-bottom: 1px solid transparent;
      font-size: 0.78rem;
      font-weight: 850;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      list-style: none;
    }

    .mep-section-group > summary::-webkit-details-marker {
      display: none;
    }

    .mep-section-group > summary::after {
      content: '+';
      margin-left: auto;
      color: var(--muted);
      font-size: 1rem;
      font-weight: 600;
    }

    .mep-section-group[open] > summary {
      border-bottom-color: var(--border);
    }

    .mep-section-group[open] > summary::after {
      content: '-';
    }

    .mep-section-group-body {
      padding: 12px;
    }

    .mep-section-group-body > .mep-section-title:first-child,
    .mep-section-group-body > .mep-impact-strip:first-child,
    .mep-section-group-body > .mep-summary:first-child {
      margin-top: 0;
    }

    .mep-summary {
      display: grid;
      grid-template-columns: repeat(6, minmax(120px, 1fr));
      gap: 8px;
      margin: 12px 0 14px;
    }

    .mep-impact-strip {
      display: grid;
      grid-template-columns: repeat(3, minmax(150px, 1fr));
      gap: 8px;
      margin: 0 0 14px;
    }

    .mep-metric {
      border: 1px solid var(--border);
      border-radius: 6px;
      background: color-mix(in srgb, var(--bg-card) 88%, var(--overlay-subtle));
      padding: 11px 12px;
      min-width: 0;
    }

    .mep-metric-label {
      color: var(--muted);
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-bottom: 4px;
    }

    .mep-metric-value {
      font-size: 1.05rem;
      font-weight: 800;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .mep-metric-sub,
    .mep-room-path,
    .mep-note {
      color: var(--muted);
      font-size: 0.74rem;
    }

    .mep-section-title {
      margin: 16px 0 7px;
      color: var(--text);
      font-size: 0.78rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .mep-table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 12px;
      border: 1px solid var(--border);
      background: var(--bg-card);
    }

    .mep-table th,
    .mep-table td {
      border-bottom: 1px solid var(--border-subtle);
      padding: 7px 8px;
      text-align: right;
      vertical-align: top;
    }

    .mep-table th {
      position: sticky;
      top: 0;
      z-index: 1;
      background: var(--panel-elevated);
      color: var(--muted);
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .mep-table th:first-child,
    .mep-table td:first-child,
    .mep-room-table th:nth-child(2),
    .mep-room-table td:nth-child(2),
    .mep-room-table th:last-child,
    .mep-room-table td:last-child {
      text-align: left;
    }

    .mep-table tr:hover td {
      background: var(--overlay-hover);
    }

    .mep-row-selected td {
      background: rgba(77, 182, 172, 0.1);
    }

    .mep-room-name {
      color: var(--text);
      font-weight: 700;
      line-height: 1.25;
    }

    .mep-ledger-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 16px;
      margin: 12px 0 10px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--border);
    }

    .mep-ledger-head p {
      max-width: 780px;
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 0.82rem;
      line-height: 1.42;
    }

    .mep-ledger-count {
      color: var(--text);
      font-size: 1.35rem;
      font-weight: 850;
      text-align: right;
      white-space: nowrap;
    }

    .mep-ledger-count span {
      display: block;
      color: var(--muted);
      font-size: 0.68rem;
      font-weight: 760;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .mep-ledger-table td {
      text-align: left;
      white-space: normal;
      line-height: 1.35;
    }

    .mep-ledger-table td strong {
      color: var(--text);
      font-weight: 820;
    }

    .mep-ledger-table th:nth-child(2),
    .mep-ledger-table td:nth-child(2) {
      width: 30%;
    }

    .mep-ledger-table th:nth-child(3),
    .mep-ledger-table td:nth-child(3) {
      width: 28%;
    }

    .mep-ledger-table th:nth-child(4),
    .mep-ledger-table td:nth-child(4) {
      width: 22%;
    }

    .mep-driver {
      display: inline-block;
      max-width: 220px;
      color: var(--teal);
      line-height: 1.25;
    }

    .mep-mini-select {
      width: 180px;
      max-width: 100%;
      height: 28px;
      font-size: 0.76rem;
    }

    .mep-inline-controls {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 6px;
    }

    .mep-risk-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 8px;
      margin-bottom: 12px;
    }

    .mep-risk-item {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 3px;
      min-height: 54px;
      padding: 9px;
      border: 1px solid var(--warning);
      border-radius: 7px;
      background: var(--warning-faint);
      color: var(--text);
      cursor: pointer;
      text-align: left;
    }

    .mep-risk-item span {
      font-weight: 800;
    }

    .mep-risk-item small {
      color: var(--muted);
      line-height: 1.25;
    }

    .mep-standards-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 8px;
      margin: 10px 0 14px;
    }

    .mep-standard-card {
      border: 1px solid var(--border);
      border-radius: 7px;
      background: var(--overlay-subtle);
      padding: 10px;
      min-width: 0;
    }

    .mep-standard-label {
      color: var(--text);
      font-weight: 850;
      margin-bottom: 3px;
    }

    .mep-standard-discipline,
    .mep-standard-intent {
      color: var(--muted);
      font-size: 0.73rem;
      line-height: 1.35;
    }

    .mep-standard-count {
      margin: 7px 0;
      color: var(--teal);
      font-size: 0.78rem;
      font-weight: 800;
    }

    .mep-mini-list {
      margin: 8px 0 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 7px;
    }

    .mep-mini-list li {
      display: grid;
      gap: 2px;
      color: var(--muted);
      font-size: 0.72rem;
      line-height: 1.32;
    }

    .mep-mini-list strong {
      color: var(--text);
      font-size: 0.73rem;
    }

    .mep-mini-list em {
      color: var(--teal);
      font-style: normal;
      font-size: 0.68rem;
    }

    .mep-standard-link {
      display: inline-flex;
      margin-top: 7px;
      color: var(--accent);
      font-size: 0.73rem;
      font-weight: 800;
      text-decoration: none;
    }

    .mep-standard-link:hover {
      text-decoration: underline;
    }

    .mep-intent-shell {
      display: block;
    }

    .mep-intent-hero {
      display: grid;
      grid-template-columns: minmax(280px, 1fr) minmax(320px, 0.72fr);
      gap: 18px;
      align-items: end;
      padding: 18px 2px 16px;
      border-bottom: 1px solid var(--border);
      margin-bottom: 14px;
    }

    .mep-intent-hero h3 {
      margin: 0;
      color: var(--text);
      font-size: 1.35rem;
      line-height: 1.15;
      letter-spacing: 0;
      font-weight: 820;
    }

    .mep-intent-hero p {
      max-width: 660px;
      margin: 8px 0 0;
      color: var(--muted);
      font-size: 0.86rem;
      line-height: 1.45;
    }

    .mep-intent-stats {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .mep-intent-flow {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      border: 1px solid var(--border);
      border-radius: 6px;
      overflow: hidden;
      background: var(--bg-card);
      margin-bottom: 12px;
    }

    .mep-intent-flow div {
      min-height: 78px;
      padding: 12px;
      border-right: 1px solid var(--border-subtle);
      background: linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 94%, white), var(--bg-card));
    }

    .mep-intent-flow div:last-child {
      border-right: 0;
    }

    .mep-intent-flow strong {
      display: block;
      margin-bottom: 6px;
      color: var(--text);
      font-size: 0.8rem;
      font-weight: 850;
    }

    .mep-intent-flow span {
      display: block;
      color: var(--muted);
      font-size: 0.72rem;
      line-height: 1.35;
    }

    .mep-intent-reference {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin: 10px 0 14px;
    }

    .mep-intent-reference details {
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--overlay-subtle);
      padding: 0;
    }

    .mep-intent-reference summary {
      cursor: pointer;
      padding: 10px 12px;
      color: var(--text);
      font-size: 0.78rem;
      font-weight: 820;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .mep-intent-reference dl {
      display: grid;
      grid-template-columns: minmax(130px, 0.42fr) minmax(0, 1fr);
      gap: 8px 12px;
      margin: 0;
      padding: 0 12px 12px;
    }

    .mep-intent-reference dt {
      color: var(--text);
      font-size: 0.74rem;
      font-weight: 800;
    }

    .mep-intent-reference dd {
      margin: 0;
      color: var(--muted);
      font-size: 0.73rem;
      line-height: 1.35;
    }

    .mep-intent-table td {
      text-align: left;
      white-space: normal;
      line-height: 1.35;
    }

    .mep-token-list {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 7px;
    }

    .mep-token-list span {
      display: inline-flex;
      align-items: center;
      min-height: 22px;
      padding: 3px 7px;
      border: 1px solid var(--border);
      border-radius: 5px;
      background: color-mix(in srgb, var(--bg-card) 90%, var(--overlay-subtle));
      color: var(--muted);
      font-size: 0.68rem;
      font-weight: 720;
      line-height: 1.15;
    }

    .mep-intent-box .mep-detail-row strong {
      text-align: left;
      line-height: 1.25;
    }

    .mep-intent-large {
      color: var(--text);
      font-size: 0.92rem;
      font-weight: 850;
      line-height: 1.3;
      margin-bottom: 6px;
    }

    .mep-muted-line {
      color: var(--muted);
      font-size: 0.73rem;
      line-height: 1.35;
    }

    .mep-intent-review {
      display: inline-block;
      margin-top: 6px;
      color: var(--warning);
      font-size: 0.73rem;
      font-weight: 720;
      line-height: 1.35;
    }

    .mep-target-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      border: 1px solid var(--border);
      border-radius: 6px;
      overflow: hidden;
      background: var(--bg-card);
      margin-bottom: 14px;
    }

    .mep-target-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 38px;
      padding: 8px 11px;
      border-right: 1px solid var(--border-subtle);
      border-bottom: 1px solid var(--border-subtle);
      color: var(--muted);
      font-size: 0.74rem;
    }

    .mep-target-row span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .mep-target-row strong {
      color: var(--text);
      font-size: 0.82rem;
      font-weight: 850;
    }

    .mep-target-row:nth-child(3n) {
      border-right: 0;
    }

    .mep-check-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 8px;
      margin: 8px 0;
    }

    .mep-check-card {
      border: 1px solid var(--border);
      border-radius: 7px;
      background: var(--overlay-subtle);
      padding: 9px;
      line-height: 1.35;
    }

    .mep-check-card.severity-critical,
    .mep-severity-pill.severity-critical {
      border-color: var(--error);
      background: var(--error-faint);
    }

    .mep-check-card.severity-warning,
    .mep-severity-pill.severity-warning {
      border-color: var(--warning);
      background: var(--warning-faint);
    }

    .mep-check-card.severity-info,
    .mep-severity-pill.severity-info {
      border-color: var(--info);
      background: var(--info-faint);
    }

    .mep-check-head {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      color: var(--muted);
      font-size: 0.68rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 5px;
    }

    .mep-check-title {
      color: var(--text);
      font-weight: 800;
      margin-bottom: 4px;
    }

    .mep-check-detail,
    .mep-check-action {
      color: var(--muted);
      font-size: 0.74rem;
    }

    .mep-check-action {
      margin-top: 5px;
      color: var(--teal);
    }

    /* Staged-from badge — shown when a check is downgraded due to design stage */
    .mep-check-staged-badge {
      margin-left: auto;
      color: var(--muted);
      font-size: 0.62rem;
      opacity: 0.7;
      font-style: italic;
      white-space: nowrap;
    }

    /* ASHRAE 170 floor reference banner above check list */
    .mep-check-170-ref {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      background: var(--overlay-subtle);
      border: 1px solid var(--teal);
      border-radius: 6px;
      padding: 6px 10px;
      font-size: 0.72rem;
      color: var(--muted);
      margin-bottom: 8px;
    }
    .mep-check-170-label {
      color: var(--teal);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-right: 4px;
    }

    /* Stage context note above check cards */
    .mep-check-stage-note {
      font-size: 0.7rem;
      color: var(--muted);
      font-style: italic;
      margin-bottom: 6px;
      padding: 0 2px;
    }

    .mep-severity-pill {
      display: inline-flex;
      align-items: center;
      height: 22px;
      padding: 0 7px;
      border: 1px solid var(--border);
      border-radius: 999px;
      color: var(--text);
      font-size: 0.68rem;
      font-weight: 800;
      text-transform: uppercase;
    }

    .mep-readiness-pill {
      display: inline-flex;
      align-items: center;
      height: 22px;
      padding: 0 7px;
      border: 1px solid var(--border);
      border-radius: 999px;
      color: var(--text);
      font-size: 0.68rem;
      font-weight: 800;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .mep-readiness-pill.status-ready {
      border-color: var(--success);
      background: var(--success-faint);
    }

    .mep-readiness-pill.status-review {
      border-color: var(--warning);
      background: var(--warning-faint);
    }

    .mep-readiness-pill.status-not-ready {
      border-color: var(--error);
      background: var(--error-faint);
    }

    .mep-readiness-table td {
      text-align: left;
      white-space: normal;
      line-height: 1.35;
    }

    .mep-check-table td {
      text-align: left;
      white-space: normal;
      line-height: 1.35;
    }

    .mep-chain-table td {
      text-align: left;
      white-space: normal;
      line-height: 1.35;
    }

    .mep-chain-table td:nth-child(5) strong {
      display: block;
      max-width: 280px;
      color: var(--text);
      font-size: 0.73rem;
      line-height: 1.3;
      word-break: break-word;
    }

    .mep-chain-status {
      display: inline-flex;
      align-items: center;
      min-height: 22px;
      padding: 2px 7px;
      border: 1px solid var(--border);
      border-radius: 5px;
      color: var(--text);
      background: var(--overlay-subtle);
      font-size: 0.68rem;
      font-weight: 820;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .mep-chain-status.status-ready {
      border-color: var(--success);
      background: var(--success-faint);
    }

    .mep-chain-status.status-review,
    .mep-chain-status.status-inferred,
    .mep-chain-status.status-assumption-led {
      border-color: var(--warning);
      background: var(--warning-faint);
    }

    .mep-chain-status.status-needs-data,
    .mep-chain-status.status-needs-area,
    .mep-chain-status.status-needs-zone,
    .mep-chain-status.status-critical-review {
      border-color: var(--error);
      background: var(--error-faint);
    }

    .mep-chain-status.status-blocked {
      border-color: var(--error);
      background: var(--error-faint);
    }

    .mep-network-workspace {
      display: grid;
      gap: 14px;
      padding: 0 0 18px;
    }

    .mep-network-topline {
      display: grid;
      grid-template-columns: minmax(280px, 0.8fr) minmax(360px, 1fr);
      gap: 14px;
      align-items: end;
      padding: 12px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg-card);
    }

    .mep-network-topline .mep-section-title {
      margin-top: 0;
    }

    .mep-network-topline h3 {
      margin: 0 0 5px;
      color: var(--text);
      font-size: 1.08rem;
      line-height: 1.2;
    }

    .mep-network-topline p {
      margin: 0;
      color: var(--muted);
      font-size: 0.76rem;
      line-height: 1.4;
      max-width: 72ch;
    }

    .mep-network-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(250px, 0.28fr);
      gap: 12px;
      align-items: start;
    }

    .mep-network-layout > main,
    .mep-network-layout > aside,
    .mep-network-inspector {
      min-width: 0;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg-card);
    }

    .mep-network-layout > main {
      overflow: auto;
    }

    .mep-network-layout > aside {
      padding: 12px;
    }

    .mep-network-schematic-shell {
      min-height: 520px;
      overflow: auto;
      background:
        linear-gradient(90deg, color-mix(in srgb, var(--border-subtle) 42%, transparent) 1px, transparent 1px),
        linear-gradient(0deg, color-mix(in srgb, var(--border-subtle) 34%, transparent) 1px, transparent 1px),
        color-mix(in srgb, var(--bg-card) 94%, var(--overlay-subtle));
      background-size: 160px 160px, 160px 160px, auto;
    }

    .mep-network-schematic {
      display: block;
      min-width: 980px;
      width: 100%;
      height: auto;
      padding: 6px;
    }

    .mep-network-schematic text {
      font-family: inherit;
      pointer-events: none;
    }

    .mep-network-schematic marker path {
      fill: color-mix(in srgb, var(--muted) 58%, transparent);
    }

    .mep-schematic-axis {
      fill: var(--muted);
      font-size: 11px;
      font-weight: 850;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .mep-schematic-band {
      fill: color-mix(in srgb, var(--bg-card) 88%, var(--overlay-subtle));
      stroke: var(--border-subtle);
      stroke-width: 1;
    }

    .mep-schematic-discipline {
      fill: var(--text);
      font-size: 13px;
      font-weight: 850;
    }

    .mep-schematic-discipline-sub {
      fill: var(--muted);
      font-size: 10px;
      font-weight: 700;
    }

    .mep-schematic-run,
    .mep-schematic-branch path,
    .mep-schematic-rail {
      fill: none;
      stroke: color-mix(in srgb, var(--muted) 34%, transparent);
      stroke-width: 1.4;
      stroke-linecap: round;
      marker-end: url(#mepSchematicArrow);
    }

    .mep-schematic-rail,
    .mep-schematic-branch path {
      stroke: color-mix(in srgb, var(--muted) 30%, transparent);
      stroke-width: 1;
      marker-end: none;
    }

    .mep-schematic-node,
    .mep-schematic-system,
    .mep-schematic-endpoint {
      cursor: pointer;
    }

    .mep-schematic-node circle,
    .mep-schematic-endpoint circle {
      fill: var(--bg-card);
      stroke: color-mix(in srgb, var(--muted) 48%, var(--border));
      stroke-width: 1.5;
    }

    .mep-schematic-system rect {
      fill: color-mix(in srgb, var(--bg-card) 98%, var(--overlay-subtle));
      stroke: color-mix(in srgb, var(--muted) 34%, var(--border));
      stroke-width: 1;
    }

    /* Code severity tint on system rects */
    .mep-schematic-system.code-node-critical rect {
      stroke: var(--error);
      stroke-width: 1.5;
    }
    .mep-schematic-system.code-node-warning rect {
      stroke: var(--warning);
      stroke-width: 1.5;
    }
    /* Code severity tint on endpoint circles */
    .mep-schematic-endpoint.code-node-critical circle:first-of-type {
      stroke: var(--error);
      stroke-width: 2;
    }
    .mep-schematic-endpoint.code-node-warning circle:first-of-type {
      stroke: var(--warning);
      stroke-width: 2;
    }

    /* Severity indicator dot floating at top-right of system rect */
    .mep-schematic-code-dot {
      pointer-events: none;
    }
    .mep-schematic-code-dot.code-critical { fill: var(--error); }
    .mep-schematic-code-dot.code-warning  { fill: var(--warning); }
    .mep-schematic-code-dot.code-info     { fill: var(--info); }

    .mep-schematic-node.selected circle,
    .mep-schematic-endpoint:hover circle,
    .mep-schematic-system:hover rect,
    .mep-schematic-branch.selected .mep-schematic-system rect {
      stroke: color-mix(in srgb, var(--teal) 62%, var(--border));
      stroke-width: 2;
    }

    .mep-schematic-label,
    .mep-schematic-system-title {
      fill: var(--text);
      font-size: 10.5px;
      font-weight: 820;
    }

    .mep-schematic-sub {
      fill: var(--muted);
      font-size: 9.5px;
      font-weight: 650;
    }

    .mep-network-issue span {
      display: block;
      color: var(--muted);
      font-size: 0.68rem;
      line-height: 1.3;
    }

    .mep-network-issues {
      display: grid;
      gap: 0;
      max-height: 490px;
      overflow: auto;
      border-top: 1px solid var(--border-subtle);
    }

    .mep-network-issue {
      width: 100%;
      padding: 10px 2px;
      border: 0;
      border-bottom: 1px solid var(--border-subtle);
      border-left: 0;
      border-radius: 0;
      background: transparent;
      text-align: left;
      cursor: pointer;
    }

    .mep-network-issue.status-blocked { color: var(--error); }

    .mep-network-issue strong {
      display: block;
      margin-bottom: 4px;
      color: var(--text);
      font-size: 0.76rem;
      line-height: 1.25;
    }

    .mep-network-issue em {
      display: block;
      margin-bottom: 5px;
      color: var(--muted);
      font-size: 0.64rem;
      font-style: normal;
      font-weight: 850;
      letter-spacing: 0.07em;
      line-height: 1.2;
      text-transform: uppercase;
    }

    .mep-network-inspector {
      padding: 16px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr);
      grid-template-rows: auto;
      column-gap: 20px;
      row-gap: 0;
    }

    /* Inspector head + metrics span full width */
    .mep-network-inspector-head,
    .mep-network-inspector > .mep-impact-strip,
    .mep-network-inspector > .mep-network-path {
      grid-column: 1 / -1;
    }

    /* Code compliance and section titles sit in columns 1 and 2 */
    .mep-network-inspector > .mep-section-title:nth-of-type(1),
    .mep-network-inspector > .mep-code-grid {
      grid-column: 1 / 2;
    }
    .mep-network-inspector > .mep-section-title:nth-of-type(2),
    .mep-network-inspector > .mep-network-room-list {
      grid-column: 2 / 3;
    }
    /* Selected room trace expands into column 3 */
    .mep-network-inspector > .mep-grouped-section {
      grid-column: 3 / 4;
      grid-row: 3 / 8;
    }

    .mep-network-inspector-head {
      margin-bottom: 12px;
    }

    .mep-network-inspector-head span {
      display: block;
      margin-bottom: 5px;
      color: var(--teal);
      font-size: 0.68rem;
      font-weight: 850;
      letter-spacing: 0.07em;
      text-transform: uppercase;
    }

    .mep-network-inspector-head h3 {
      margin: 0 0 4px;
      color: var(--text);
      font-size: 1rem;
      line-height: 1.22;
    }

    .mep-network-inspector-head p {
      margin: 0;
      color: var(--muted);
      font-size: 0.75rem;
    }

    .mep-network-path {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1px;
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--border);
      margin-bottom: 12px;
    }

    .mep-network-path > div {
      min-width: 0;
      padding: 10px;
      background: color-mix(in srgb, var(--bg-card) 90%, var(--overlay-subtle));
    }

    .mep-network-path label {
      display: block;
      margin-bottom: 5px;
      color: var(--muted);
      font-size: 0.66rem;
      font-weight: 850;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .mep-network-path p {
      margin: 0;
      color: var(--text);
      font-size: 0.74rem;
      line-height: 1.35;
    }

    .mep-network-room-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 7px;
      margin-bottom: 12px;
    }

    .mep-network-room-list button {
      min-width: 0;
      padding: 9px 10px;
      border: 1px solid var(--border);
      border-radius: 7px;
      background: var(--overlay-subtle);
      color: var(--text);
      text-align: left;
      cursor: pointer;
    }

    .mep-network-room-list button.selected {
      border-color: rgba(77, 182, 172, 0.65);
      background: rgba(77, 182, 172, 0.12);
    }

    .mep-network-room-list strong,
    .mep-network-room-list span {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .mep-network-room-list strong {
      margin-bottom: 3px;
      font-size: 0.76rem;
      line-height: 1.25;
    }

    .mep-network-room-list span {
      color: var(--muted);
      font-size: 0.68rem;
    }

    /* Inline code severity tag on room list buttons */
    .mep-room-code-tag {
      display: inline-block;
      margin-left: 5px;
      padding: 1px 5px;
      border-radius: 3px;
      font-size: 0.6rem;
      font-weight: 700;
      text-transform: uppercase;
      vertical-align: middle;
    }
    .mep-room-code-tag.code-critical { background: var(--error-faint); color: var(--error); }
    .mep-room-code-tag.code-warning  { background: var(--warning-faint); color: var(--warning); }
    .mep-room-code-tag.code-info     { background: var(--info-faint); color: var(--info); }

    /* Code compliance grid in network inspector */
    .mep-code-grid {
      margin-bottom: 14px;
    }
    .mep-code-grid-ok {
      font-size: 0.72rem;
      color: var(--muted);
      font-style: italic;
      margin-bottom: 12px;
    }
    .mep-code-grid-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 10px;
    }
    .mep-code-grid-pill {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      padding: 6px 10px;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: var(--overlay-subtle);
      min-width: 68px;
    }
    .mep-code-grid-pill.code-critical { border-color: var(--error);   background: var(--error-faint); }
    .mep-code-grid-pill.code-warning  { border-color: var(--warning); background: var(--warning-faint); }
    .mep-code-grid-pill.code-info     { border-color: var(--info);    background: var(--info-faint); }
    .mep-code-grid-std {
      font-size: 0.62rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--muted);
    }
    .mep-code-grid-sev {
      font-size: 0.8rem;
      font-weight: 800;
      color: var(--text);
    }
    .mep-code-grid-pill.code-critical .mep-code-grid-sev { color: var(--error); }
    .mep-code-grid-pill.code-warning  .mep-code-grid-sev { color: var(--warning); }
    .mep-code-grid-count {
      font-size: 0.62rem;
      color: var(--muted);
    }

    /* Rooms with code issues in the compliance grid */
    .mep-code-offender-list {
      display: grid;
      gap: 5px;
    }
    .mep-code-offender-row {
      padding: 7px 9px;
      border: 1px solid var(--border);
      border-radius: 5px;
      background: var(--overlay-subtle);
    }
    .mep-code-offender-row.severity-critical { border-color: color-mix(in srgb, var(--error) 45%, var(--border)); background: var(--error-faint); }
    .mep-code-offender-row.severity-warning  { border-color: color-mix(in srgb, var(--warning) 45%, var(--border)); background: var(--warning-faint); }
    .mep-code-offender-name {
      font-size: 0.76rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 3px;
    }
    .mep-code-offender-check {
      display: flex;
      gap: 6px;
      font-size: 0.68rem;
      color: var(--muted);
      line-height: 1.3;
    }
    .mep-code-offender-std {
      flex-shrink: 0;
      font-weight: 700;
      color: var(--text);
    }

    .mep-system-row.status-review td:first-child,
    .mep-system-row.status-blocked td:first-child {
      box-shadow: none;
    }

    .mep-system-card.status-review,
    .mep-system-card.status-blocked {
      border-color: var(--border);
    }

    .mep-workflow-map {
      display: grid;
      grid-template-columns: repeat(5, minmax(150px, 1fr));
      gap: 1px;
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: 7px;
      background: var(--border);
    }

    .mep-workflow-stage {
      min-width: 0;
      background: var(--bg-card);
    }

    .mep-workflow-stage header {
      min-height: 0;
      padding: 9px 11px;
      border-bottom: 1px solid var(--border-subtle);
    }

    .mep-workflow-stage header span {
      display: block;
      color: var(--text);
      font-size: 0.78rem;
      font-weight: 850;
      line-height: 1.2;
    }

    .mep-workflow-stage header small,
    .mep-workflow-item small,
    .mep-system-table small {
      display: block;
      color: var(--muted);
      font-size: 0.68rem;
      line-height: 1.3;
    }

    .mep-workflow-items {
      display: grid;
      gap: 0;
    }

    .mep-workflow-item {
      display: grid;
      grid-template-columns: 8px minmax(0, 1fr);
      gap: 8px;
      min-height: 44px;
      padding: 8px 11px;
      border-bottom: 1px solid var(--border-subtle);
    }

    .mep-workflow-item:last-child {
      border-bottom: 0;
    }

    .mep-workflow-item i {
      width: 8px;
      height: 8px;
      margin-top: 3px;
      border-radius: 50%;
      background: var(--success);
    }

    .mep-workflow-item.status-review i,
    .mep-workflow-item.status-inferred i,
    .mep-workflow-item.status-assumption i,
    .mep-workflow-item.status-assumption-led i {
      background: var(--warning);
    }

    .mep-workflow-item.status-blocked i {
      background: var(--error);
    }

    .mep-workflow-item.status-endpoint i {
      background: #7dd3fc;
    }

    .mep-workflow-item strong,
    .mep-system-table td strong {
      display: block;
      color: var(--text);
      font-size: 0.74rem;
      font-weight: 820;
      line-height: 1.25;
      margin-bottom: 3px;
    }

    .mep-system-lens {
      display: grid;
      grid-template-columns: minmax(220px, 0.9fr) minmax(360px, 1.8fr) minmax(180px, 0.7fr);
      gap: 14px;
      align-items: stretch;
      margin-bottom: 14px;
      padding: 14px;
      border: 1px solid var(--border);
      border-radius: 7px;
      background: var(--bg-card);
    }

    .mep-system-lens span {
      display: block;
      color: var(--muted);
      font-size: 0.68rem;
      font-weight: 850;
      letter-spacing: 0.07em;
      line-height: 1.2;
      margin-bottom: 6px;
      text-transform: uppercase;
    }

    .mep-system-lens h3 {
      margin: 0 0 6px;
      color: var(--text);
      font-size: 1rem;
      line-height: 1.2;
    }

    .mep-system-lens p {
      margin: 0;
      color: var(--muted);
      font-size: 0.76rem;
      line-height: 1.4;
    }

    .mep-system-lens ol {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1px;
      margin: 0;
      padding: 0;
      overflow: hidden;
      border: 1px solid var(--border-subtle);
      border-radius: 6px;
      background: var(--border-subtle);
      list-style: none;
    }

    .mep-system-lens li {
      min-width: 0;
      padding: 10px;
      background: var(--overlay-subtle);
    }

    .mep-system-lens li strong {
      display: block;
      color: var(--text);
      font-size: 0.74rem;
      line-height: 1.2;
      margin-bottom: 4px;
    }

    .mep-system-lens li small {
      display: block;
      color: var(--muted);
      font-size: 0.67rem;
      line-height: 1.3;
    }

    .mep-system-lens-metrics {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
    }

    .mep-system-table td {
      text-align: left;
      white-space: normal;
      line-height: 1.35;
      vertical-align: top;
    }

    .mep-system-row.status-review td:first-child,
    .mep-system-row.status-blocked td:first-child {
      box-shadow: none;
    }

    .mep-system-row.status-blocked td:first-child {
      box-shadow: none;
    }

    .mep-system-card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 10px;
      margin-bottom: 14px;
    }

    .mep-system-card {
      min-width: 0;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--bg-card);
      overflow: hidden;
      box-shadow: 0 8px 22px rgba(0,0,0,0.08);
    }

    .mep-system-card.status-review {
      border-color: var(--border);
    }

    .mep-system-card.status-blocked {
      border-color: var(--border);
    }

    .mep-system-card header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      margin: 0;
      padding: 12px 12px 10px;
      border-bottom: 1px solid var(--border-subtle);
    }

    .mep-system-card header span {
      display: block;
      margin-bottom: 4px;
      color: var(--muted);
      font-size: 0.67rem;
      font-weight: 820;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .mep-system-card header h4 {
      color: var(--text);
      font-size: 0.92rem;
      line-height: 1.2;
    }

    .mep-system-card header strong {
      flex-shrink: 0;
      padding: 4px 8px;
      border-radius: 999px;
      background: rgba(77, 182, 172, 0.14);
      color: var(--text);
      font-size: 0.7rem;
      font-weight: 820;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .mep-system-card.status-review header strong {
      background: var(--overlay-subtle);
      color: var(--text);
    }

    .mep-system-card.status-blocked header strong {
      background: var(--overlay-subtle);
      color: var(--text);
    }

    .mep-system-card-metrics {
      padding: 10px 12px 0;
    }

    .mep-system-card-metrics .mep-metric {
      padding: 10px 11px;
      min-height: 0;
    }

    .mep-system-card-path {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1px;
      margin: 10px 12px 0;
      border: 1px solid var(--border-subtle);
      border-radius: 8px;
      overflow: hidden;
      background: var(--border-subtle);
    }

    .mep-system-card-path > div {
      padding: 10px 11px;
      background: color-mix(in srgb, var(--bg-card) 84%, var(--overlay-subtle));
    }

    .mep-system-card-path p,
    .mep-system-card-foot {
      color: var(--text);
      font-size: 0.74rem;
      line-height: 1.38;
    }

    .mep-system-card-foot {
      padding: 12px;
      color: var(--muted);
    }

    .mep-diagram-shell {
      display: block;
    }

    .mep-diagram-stage {
      min-height: 430px;
      overflow: auto;
      border: 1px solid var(--border);
      border-radius: 7px;
      background: #111827;
      padding: 14px;
      perspective: 1200px;
    }

    .mep-btn.mep-btn-on {
      background: rgba(77, 182, 172, 0.38);
      border-color: rgba(77, 182, 172, 0.9);
    }

    .mep-diagram-svg {
      width: 100%;
      min-width: 860px;
      min-height: 420px;
      transform: rotate(var(--diagram-rotate, 0deg));
      transform-origin: center;
      transition: transform 300ms ease;
    }

    .mep-diagram-stage.isometric {
      overflow: visible;
    }

    .iso-trunk {
      fill: none;
      stroke: #7dd3fc;
      stroke-width: 2.5;
      stroke-linecap: round;
    }

    .iso-riser {
      fill: none;
      stroke: #7dd3fc;
      stroke-width: 2;
      stroke-linecap: round;
    }

    .iso-branch {
      fill: none;
      stroke: #5eead4;
      stroke-width: 1.5;
      stroke-linecap: round;
    }

    .iso-stub {
      fill: none;
      stroke: #94a3b8;
      stroke-width: 1.5;
      stroke-linecap: round;
    }

    .iso-node-src {
      fill: #0e4f6b;
      stroke: #7dd3fc;
      stroke-width: 2;
    }

    .iso-tap {
      fill: #7dd3fc;
      stroke: none;
    }

    .iso-terminal {
      fill: #111827;
      stroke: #5eead4;
      stroke-width: 1.5;
    }

    .iso-terminal.iso-review {
      stroke: #f59e0b;
    }

    .iso-src-label {
      fill: #7dd3fc;
      font-size: 12px;
      font-weight: 800;
    }

    .iso-sys-label {
      fill: #5eead4;
      font-size: 12px;
      font-weight: 800;
    }

    .iso-zone-label {
      fill: #f8fafc;
      font-size: 11px;
      font-weight: 700;
    }

    .iso-zone-label.iso-review {
      fill: #f59e0b;
    }

    .iso-metric-label {
      fill: #94a3b8;
      font-size: 10px;
    }

    .mep-diagram-title {
      fill: #f8fafc;
      font-size: 18px;
      font-weight: 850;
    }

    .mep-diagram-edge {
      fill: none;
      stroke: #7dd3fc;
      stroke-width: 2;
      marker-end: url(#mepArrow);
      stroke-dasharray: 10 7;
      animation: mep-flow 1.1s linear infinite;
    }

    .mep-diagram-svg marker path {
      fill: #7dd3fc;
    }

    .mep-diagram-edge-label {
      fill: #cbd5e1;
      font-size: 11px;
      font-weight: 700;
    }

    .mep-diagram-node rect {
      fill: #1f2937;
      stroke: #5eead4;
      stroke-width: 1.5;
      filter: drop-shadow(0 8px 14px rgba(0,0,0,0.25));
    }

    .mep-diagram-node.node-source rect {
      fill: #12313a;
      stroke: #7dd3fc;
    }

    .mep-diagram-node.status-review rect {
      stroke: #f59e0b;
    }

    .mep-diagram-label {
      fill: #f8fafc;
      font-size: 13px;
      font-weight: 800;
    }

    .mep-diagram-sub {
      fill: #cbd5e1;
      font-size: 11px;
    }

    .mep-diagram-metric {
      fill: #5eead4;
      font-size: 12px;
      font-weight: 850;
      text-anchor: end;
    }

    @keyframes mep-flow {
      to { stroke-dashoffset: -17; }
    }

    .mep-revit-panel {
      display: block;
    }

    .mep-revit-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      margin-bottom: 10px;
      padding: 10px;
      border: 1px solid var(--border);
      border-radius: 7px;
      background: var(--overlay-subtle);
    }

    .mep-revit-actions > div:first-child {
      margin-right: auto;
      min-width: 220px;
    }

    .mep-btn:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }

    .mep-room-detail {
      padding: 10px;
      border: 1px solid rgba(77, 182, 172, 0.35);
      border-radius: 7px;
      background: var(--bg);
    }

    .mep-room-detail-header {
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
    }

    .mep-room-detail-header h3 {
      margin: 0;
      color: var(--text);
      font-size: 1rem;
      line-height: 1.2;
      letter-spacing: 0;
    }

    .mep-room-detail-header p {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 0.76rem;
    }

    .mep-room-brief {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1px;
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--border);
      margin-bottom: 10px;
    }

    .mep-room-brief > div {
      min-width: 0;
      padding: 10px;
      background: var(--bg-card);
    }

    .mep-room-brief span,
    .mep-room-brief small {
      display: block;
      color: var(--muted);
      font-size: 0.7rem;
      line-height: 1.3;
    }

    .mep-room-brief span {
      text-transform: uppercase;
      letter-spacing: 0.06em;
      font-weight: 820;
      margin-bottom: 4px;
    }

    .mep-room-brief strong {
      display: block;
      color: var(--text);
      font-size: 0.9rem;
      font-weight: 850;
      line-height: 1.25;
      margin-bottom: 4px;
    }

    .mep-detail-switcher {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin: 0 0 10px;
      padding: 4px;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--bg-card);
    }

    .mep-detail-switcher button {
      min-height: 28px;
      padding: 0 10px;
      border: 1px solid transparent;
      border-radius: 5px;
      background: transparent;
      color: var(--muted);
      font: inherit;
      font-size: 0.74rem;
      font-weight: 800;
      cursor: pointer;
    }

    .mep-detail-switcher button.active {
      border-color: var(--border);
      background: var(--overlay-subtle);
      color: var(--text);
    }

    .mep-detail-panel {
      margin-bottom: 10px;
    }

    .mep-detail-panel > .mep-table,
    .mep-detail-panel > .mep-detail-grid,
    .mep-detail-panel > .mep-check-list {
      margin-bottom: 0;
    }

    .mep-detail-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      gap: 8px;
      margin-bottom: 8px;
    }

    .mep-detail-box {
      border: 1px solid var(--border);
      border-radius: 7px;
      background: var(--overlay-subtle);
      padding: 9px;
      min-width: 0;
    }

    .mep-detail-box h4 {
      font-size: 0.78rem;
      margin-bottom: 8px;
      color: var(--text);
    }

    .mep-quicktake-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 8px;
    }

    .mep-guided-overview-grid {
      align-items: start;
    }

    .mep-quicktake-card {
      min-width: 0;
      padding: 10px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: color-mix(in srgb, var(--bg-card) 88%, var(--overlay-subtle));
    }

    .mep-quicktake-card span,
    .mep-system-card-path label {
      display: block;
      color: var(--muted);
      font-size: 0.68rem;
      font-weight: 820;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: 5px;
    }

    .mep-quicktake-card strong {
      display: block;
      color: var(--text);
      font-size: 0.86rem;
      font-weight: 840;
      line-height: 1.25;
      margin-bottom: 4px;
    }

    .mep-quicktake-card small {
      display: block;
      color: var(--muted);
      font-size: 0.7rem;
      line-height: 1.35;
    }

    .mep-utility-grid .mep-quicktake-card strong {
      font-size: 0.8rem;
    }

    .mep-coordination-compass {
      display: grid;
      gap: 6px;
      padding: 8px;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--bg-card);
    }

    .mep-coordination-compass-head span,
    .mep-compass-card header span,
    .mep-coordination-item header span,
    .mep-coordination-grid label {
      display: block;
      color: var(--muted);
      font-size: 0.67rem;
      font-weight: 850;
      letter-spacing: 0.07em;
      line-height: 1.2;
      margin-bottom: 3px;
      text-transform: uppercase;
    }

    .mep-coordination-compass-head h3 {
      margin: 0;
      color: var(--text);
      font-size: 0.86rem;
      line-height: 1.2;
    }

    .mep-coordination-compass-head p {
      margin: 0;
      max-width: 86ch;
      color: var(--muted);
      font-size: 0.76rem;
      line-height: 1.4;
    }

    .mep-coordination-compass-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 5px;
    }

    .mep-compass-card {
      min-width: 0;
      padding: 7px 8px;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: color-mix(in srgb, var(--bg-card) 88%, var(--overlay-subtle));
    }

    .mep-compass-card.status-review,
    .mep-coordination-item.status-review {
      border-color: color-mix(in srgb, var(--warning) 58%, var(--border));
    }

    .mep-compass-card.status-blocked,
    .mep-coordination-item.status-blocked {
      border-color: color-mix(in srgb, var(--error) 62%, var(--border));
    }

    .mep-compass-card header,
    .mep-coordination-item header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 6px;
      margin-bottom: 4px;
    }

    .mep-compass-card strong {
      display: block;
      color: var(--text);
      font-size: 0.78rem;
      font-weight: 850;
      line-height: 1.25;
      margin-bottom: 2px;
    }

    .mep-compass-card small,
    .mep-coordination-item header small {
      display: block;
      color: var(--muted);
      font-size: 0.66rem;
      line-height: 1.25;
    }

    .mep-compass-card details {
      margin-top: 4px;
    }

    .mep-compass-card summary,
    .mep-coordination-details summary {
      cursor: pointer;
      color: var(--teal);
      font-size: 0.64rem;
      font-weight: 820;
      line-height: 1.2;
    }

    .mep-compass-card p {
      margin: 5px 0 0;
      color: var(--muted);
      font-size: 0.68rem;
      line-height: 1.3;
    }

    .mep-coordination-panel {
      display: grid;
      gap: 7px;
    }

    .mep-coordination-list {
      display: grid;
      gap: 5px;
    }

    .mep-coordination-list.is-compact {
      gap: 4px;
    }

    .mep-coordination-item {
      min-width: 0;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--bg-card);
      overflow: hidden;
    }

    .mep-coordination-item header {
      margin: 0;
      padding: 7px 8px 4px;
      border-bottom: 0;
    }

    .mep-coordination-item header strong {
      display: block;
      color: var(--text);
      font-size: 0.74rem;
      font-weight: 850;
      line-height: 1.25;
    }

    .mep-coordination-status {
      flex: 0 0 auto;
      display: grid;
      justify-items: end;
      gap: 3px;
      max-width: 150px;
    }

    .mep-coordination-status small {
      overflow: hidden;
      max-width: 100%;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .mep-coordination-next {
      margin: 0 8px 6px;
      color: var(--text);
      font-size: 0.72rem;
      font-weight: 720;
      line-height: 1.25;
    }

    .mep-coordination-details {
      border-top: 1px solid var(--border-subtle);
      padding: 6px 8px 7px;
    }

    .mep-coordination-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1px;
      background: var(--border-subtle);
      margin-top: 6px;
      overflow: hidden;
      border-radius: 6px;
    }

    .mep-coordination-grid > div {
      min-width: 0;
      padding: 7px 8px;
      background: color-mix(in srgb, var(--bg-card) 92%, var(--overlay-subtle));
    }

    .mep-coordination-grid p {
      margin: 0;
      color: var(--text);
      font-size: 0.67rem;
      line-height: 1.3;
    }

    .mep-detail-row {
      display: grid;
      grid-template-columns: minmax(78px, 0.8fr) minmax(0, 1.2fr);
      gap: 8px;
      align-items: center;
      min-height: 28px;
      color: var(--muted);
      font-size: 0.76rem;
    }

    .mep-detail-row strong {
      color: var(--text);
      font-weight: 700;
      text-align: right;
    }

    .mep-detail-row input {
      width: 100%;
      min-width: 0;
      height: 28px;
      font-size: 0.76rem;
    }

    .mep-equipment-strip {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin: 8px 0;
    }

    .mep-eq-chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      max-width: 260px;
      padding: 4px 7px;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--overlay-subtle);
      color: var(--text);
      font-size: 0.72rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .mep-eq-chip em {
      color: var(--muted);
      font-style: normal;
    }

    .mep-notes {
      width: 100%;
      min-height: 54px;
      padding: 8px;
      border: 1px solid var(--input-border);
      border-radius: 6px;
      background: var(--input-bg);
      color: var(--text);
      font: inherit;
      resize: vertical;
    }

    .mep-criteria-table td {
      white-space: normal;
      line-height: 1.35;
    }

    .mep-empty {
      padding: 28px;
      color: var(--muted);
      text-align: center;
    }

    .mep-note {
      margin-top: 10px;
      padding: 10px;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--overlay-subtle);
      line-height: 1.45;
    }

    @media (max-width: 980px) {
      .mep-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .mep-impact-strip {
        grid-template-columns: 1fr;
      }

      .mep-intent-hero,
      .mep-intent-reference,
      .mep-discipline-context,
      .mep-network-topline,
      .mep-network-layout,
      .mep-network-path {
        grid-template-columns: 1fr;
      }

      .mep-intent-stats {
        grid-template-columns: 1fr;
      }

      .mep-primary-filter {
        grid-template-columns: 1fr;
        border-right: 0;
        padding-right: 0;
        width: 100%;
      }

      .mep-intent-flow {
        grid-template-columns: 1fr;
      }

      .mep-intent-flow div {
        min-height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--border-subtle);
      }

      .mep-intent-flow div:last-child {
        border-bottom: 0;
      }

      .mep-ledger-head,
      .mep-room-detail-header {
        align-items: flex-start;
        flex-direction: column;
      }

      .mep-ledger-count {
        text-align: left;
      }

      .mep-room-brief {
        grid-template-columns: 1fr;
      }

      .mep-workflow-map {
        grid-template-columns: 1fr;
      }

      .mep-workflow-stage header {
        min-height: auto;
      }

      .mep-system-lens {
        grid-template-columns: 1fr;
      }

      .mep-system-lens ol {
        grid-template-columns: 1fr;
      }

      .mep-network-room-list {
        grid-template-columns: 1fr;
      }

      .mep-coordination-grid {
        grid-template-columns: 1fr;
      }

      .mep-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
      }

      .mep-system-table {
        white-space: normal;
      }
    }

    *::-webkit-scrollbar-button:start:decrement,
    *::-webkit-scrollbar-button:end:increment,
    *::-webkit-scrollbar-button:start:increment,
    *::-webkit-scrollbar-button:end:decrement {
      background: var(--bg-card) !important;
      border: none !important;
      height: 0 !important;
      width: 0 !important;
    }

    body {
      margin: 0;
      padding: 24px;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background-color: var(--bg);
      color: var(--text);
      /* Prevent Safari iOS pull-to-refresh from reloading the page unintentionally */
      overscroll-behavior-y: none;
    }

    h1, h2, h3, h4 {
      margin: 0;
    }

    p {
      margin: 0;
    }

    header {
      margin-bottom: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
    }

    header .header-content {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-width: 0;
    }

    .brand-row {
      display: flex;
      align-items: stretch;
      gap: 10px;
      min-width: 0;
    }

    .brand-row h1 {
      line-height: 1;
    }

    /* Brand wordmark — the logotype is the logo. Geometry lives in
       css/brand-lockup.css; only app-side sizing belongs here. */
    .brand-row .brand-lockup {
      align-self: center;
    }

    .brand-row .brand-wordmark {
      height: 30px;
      color: var(--text);
    }

    .brand-status-stack {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-self: stretch;
      min-height: 32px;
      padding: 1px 0 1px;
    }

    .app-version {
      color: var(--muted);
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.05em;
      line-height: 1;
    }

    /* Project context indicator in header */
    .project-indicator {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 4px;
      min-height: 16px;
      font-size: 0.8rem;
      color: var(--muted);
      visibility: hidden;
      opacity: 0;
      transition: opacity 140ms ease;
    }

    .project-indicator.is-active {
      visibility: visible;
      opacity: 1;
    }

    @keyframes projectIndicatorIn {
      from { opacity: 0; transform: translateY(-4px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .project-indicator-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--green-badge);
      box-shadow: 0 0 6px var(--accent-glow);
      flex-shrink: 0;
    }

    .project-indicator-name {
      font-weight: 500;
      letter-spacing: 0.3px;
      max-width: 260px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .project-save-dot {
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      margin-left: 6px;
      flex-shrink: 0;
      opacity: 0;
      vertical-align: middle;
      transition: opacity 0.4s ease, background 0.2s ease;
    }

    .project-save-dot[data-state="queued"] {
      background: var(--warning-yellow);
      opacity: 1;
    }

    .project-save-dot[data-state="saving"] {
      background: var(--info);
      opacity: 1;
      animation: pulse 1s infinite;
    }

    .project-save-dot[data-state="saved"] {
      background: var(--success);
      opacity: 1;
    }

    .project-save-dot[data-state="error"] {
      background: var(--error);
      opacity: 1;
    }

    .header-control {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 34px;
      border: 1px solid var(--border-subtle);
      border-radius: 7px;
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      text-decoration: none;
      transition:
        color 0.15s,
        background 0.15s,
        border-color 0.15s,
        box-shadow 0.15s;
      flex-shrink: 0;
    }

    .header-control:hover {
      color: var(--text);
      border-color: var(--border);
      background: var(--overlay-subtle);
    }

    .header-text-control {
      gap: 8px;
      padding: 0 12px;
      font-size: 13px;
      font-weight: 600;
      line-height: 1;
    }

    .header-icon-control {
      width: 34px;
      padding: 0;
      font-size: 16px;
    }

    .header-multi-btn.active {
      color: var(--accent);
      border-color: var(--accent);
      background: var(--accent-faint, rgba(108, 92, 231, 0.08));
    }

    .veldt-toggle {
      opacity: 0.56;
    }

    .veldt-toggle.active,
    .veldt-toggle[aria-pressed="true"] {
      opacity: 1;
      color: var(--accent);
      border-color: var(--accent);
      background: var(--accent-faint);
    }

    /* Close button on project root node in multi mode */
    .tree-project-close-btn {
      margin-left: auto;
      padding: 0 4px;
      background: transparent;
      border: none;
      color: var(--muted);
      font-size: 0.9rem;
      cursor: pointer;
      line-height: 1;
      border-radius: 4px;
      opacity: 0;
      transition: opacity 0.15s, color 0.15s;
    }

    .tree-item:hover .tree-project-close-btn {
      opacity: 0.6;
    }

    .tree-project-close-btn:hover {
      opacity: 1 !important;
      color: var(--error);
    }

    /* Top accent bar when project is open */
    body.project-open::before {
      content: '';
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--accent), var(--green-badge), var(--accent));
      z-index: 10010;
      animation: accentBarIn 0.4s ease-out;
    }

    @keyframes accentBarIn {
      from { transform: scaleX(0); }
      to   { transform: scaleX(1); }
    }

    .version-badge {
      font-size: 0.4em;
      font-weight: 400;
      color: var(--muted);
      vertical-align: super;
      letter-spacing: 0.5px;
      margin-left: 2px;
    }

    header .header-actions {
      display: flex;
      gap: 8px;
      padding-top: 0;
      align-items: center;
    }

    /* Revit Status Indicator */
    .revit-status-indicator {
      gap: 4px;
      height: 13px;
      padding: 0 5px;
      border-color: transparent;
      border-radius: 999px;
      background: var(--overlay-subtle);
      font-size: 9px;
      line-height: 1;
    }

    .revit-status-indicator:hover {
      background: var(--overlay-strong);
    }

    .revit-status-indicator .status-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      transition: background 0.3s;
    }

    .revit-status-indicator .status-dot.disconnected {
      background: var(--muted);
    }

    .revit-status-indicator .status-dot.connecting {
      background: var(--warning);
      animation: pulse 1s infinite;
    }

    .revit-status-indicator .status-dot.connected {
      background: var(--green-badge);
    }

    .revit-status-indicator .status-text {
      color: var(--text);
      font-weight: 600;
      max-width: 150px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* Revit Tools Dropdown */
    .revit-tools-wrapper {
      position: relative;
    }

    .revit-tools-panel {
      display: none;
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      width: min(420px, calc(100vw - 24px));
      max-height: min(720px, calc(100vh - 72px));
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 12px;
      box-shadow: 0 8px 32px var(--card-shadow);
      z-index: 10000;
      overflow: hidden auto;
      animation: revitPanelSlide 0.2s ease-out;
    }

    .brand-status-stack .revit-tools-panel {
      left: 0;
      right: auto;
      top: calc(100% + 6px);
    }

    .revit-tools-panel.active {
      display: block;
    }

    @keyframes revitPanelSlide {
      from { opacity: 0; transform: translateY(-8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .revit-tools-panel .panel-header {
      padding: 12px 16px;
      border-bottom: 1px solid var(--border, #333);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .revit-tools-panel .panel-header h3 {
      margin: 0;
      font-size: 0.9rem;
      font-weight: 600;
    }

    .revit-tools-panel .panel-header .project-name {
      font-size: 0.75rem;
      color: var(--muted, #888);
      margin-top: 2px;
    }

    .revit-tools-panel .tool-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      padding: 8px 12px;
      border: none;
      background: none;
      color: var(--text, #eee);
      cursor: pointer;
      text-align: left;
      font-size: 0.8rem;
      transition: background 0.15s;
    }

    .revit-tools-panel .tool-btn:hover {
      background: var(--overlay-active);
    }

    .revit-tools-panel .tool-btn .tool-icon {
      font-size: 0.95rem;
      width: 20px;
      text-align: center;
      flex-shrink: 0;
    }

    .revit-tools-panel .tool-btn .tool-label {
      flex: 1;
    }

    .revit-tools-panel .tool-btn .tool-desc {
      font-size: 0.7rem;
      color: var(--muted, #888);
      margin-top: 1px;
    }

    .revit-tools-panel .tool-btn:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    .revit-tools-panel .tool-section {
      padding: 6px 0;
      border-bottom: 1px solid var(--border, #333);
    }

    .revit-tools-panel .tool-section:last-child {
      border-bottom: none;
    }

    .revit-tools-panel .section-label {
      font-size: 0.65rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--muted, #888);
      padding: 4px 16px 2px;
    }

    .revit-tools-panel .tool-btn.disconnect {
      color: #ff6b6b;
    }

    #revit-connected-tools {
      padding: 8px;
    }

    .revit-room-preview {
      padding: 8px 8px 10px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--overlay-subtle);
      margin-bottom: 8px;
    }

    .revit-panel-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 6px;
    }

    .revit-panel-title {
      font-size: 0.76rem;
      font-weight: 700;
      color: var(--text);
    }

    .revit-panel-pill {
      font-size: 0.7rem;
      background: var(--green-badge-bg);
      color: var(--green-badge);
      border-radius: 999px;
      padding: 2px 8px;
      white-space: nowrap;
    }

    .revit-room-list {
      max-height: 128px;
      overflow-y: auto;
      font-size: 0.74rem;
    }

    .revit-command-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
      margin-bottom: 8px;
    }

    .revit-command {
      min-width: 0;
      min-height: 54px;
      padding: 7px 6px;
      border: 1px solid var(--border);
      border-radius: 7px;
      background: var(--bg);
      color: var(--text);
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      font-size: 0.72rem;
      transition: background 0.15s, border-color 0.15s, transform 0.15s;
    }

    .revit-command:hover {
      background: var(--overlay-active);
      border-color: var(--accent);
      transform: translateY(-1px);
    }

    .revit-command span {
      font-size: 1rem;
      line-height: 1;
    }

    .revit-command strong {
      font-size: 0.7rem;
      font-weight: 700;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 100%;
    }

    .revit-command.primary {
      border-color: rgba(0, 184, 148, 0.45);
      background: var(--accent-faint);
      color: var(--accent);
    }

    .revit-tool-group {
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg);
      overflow: hidden;
      margin-top: 6px;
    }

    .revit-tool-group summary {
      padding: 8px 10px;
      cursor: pointer;
      list-style: none;
      font-size: 0.72rem;
      font-weight: 700;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .revit-tool-group summary::-webkit-details-marker {
      display: none;
    }

    .revit-tool-group summary::after {
      content: '+';
      font-size: 0.9rem;
      color: var(--muted);
    }

    .revit-tool-group[open] summary::after {
      content: '-';
    }

    .revit-tool-group[open] summary {
      border-bottom: 1px solid var(--border);
    }

    @media (max-width: 520px) {
      .revit-tools-panel {
        right: -8px;
      }

      .brand-status-stack .revit-tools-panel {
        position: fixed;
        top: 58px;
        right: 12px;
        left: 12px;
        width: auto;
        max-height: calc(100vh - 76px);
      }

      .revit-command-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }
    
    @keyframes fadeInOut {
      0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
      15% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
      85% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
      100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    }

    header .icon-btn {
      width: 40px;
      height: 40px;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-size: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    header .icon-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }

    header .icon-btn.portal {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
    }

    header .icon-btn.sync {
      background: linear-gradient(135deg, #00b894 0%, #00cec9 100%);
      color: white;
    }

    header .icon-btn.workbench {
      background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%);
      color: white;
    }

    header .icon-btn.workbench.active {
      background: linear-gradient(135deg, #feca57 0%, #ff6b6b 100%);
      box-shadow: 0 0 20px rgba(254, 202, 87, 0.5);
    }

    header p {
      margin-top: 8px;
      color: var(--muted);
      max-width: 800px;
      font-size: 0.95rem;
    }

    .layout {
      display: flex;
      gap: 0;
      align-items: flex-start;
    }

    .layout.compare-mode {
      /* flex layout handles all three columns */
    }

    #left-column {
      display: block;
      position: relative;
      width: 400px;
      min-width: 280px;
      max-width: 800px;
      flex-shrink: 0;
      padding-right: 6px;
      transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease, padding 0.3s ease;
    }

    #left-column.collapsed {
      width: 42px;
      min-width: 42px;
      max-width: 42px;
      padding-right: 0;
      overflow: hidden;
    }

    #left-column.collapsed > * {
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.15s ease;
    }

    #left-column > * {
      opacity: 1;
      transition: opacity 0.15s ease 0.15s;
    }

    #right-column {
      display: block;
      flex: 1;
      min-width: 0;
      padding-left: 6px;
      padding-right: 6px;
      transition: padding-left 0.3s ease;
    }

    #left-column.collapsed + .column-resizer + #right-column {
      padding-left: 6px;
    }

    #compare-column {
      display: none;
      flex: 1;
      min-width: 0;
      padding-left: 6px;
    }

    .layout.compare-mode #compare-column {
      display: block;
    }

    /* Column Resizer */
    .column-resizer {
      width: 12px;
      background: transparent;
      cursor: col-resize;
      flex-shrink: 0;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: width 0.3s ease;
    }

    .column-resizer::after {
      content: '';
      width: 8px;
      height: 60px;
      background: var(--overlay-strong);
      border-radius: 8px;
      transition: width 0.3s ease, height 0.3s ease, background 0.3s ease, border-radius 0.3s ease, margin-top 0.3s ease, font-size 0.3s ease, letter-spacing 0.3s ease, color 0.3s ease;
      margin-top: 0;
    }

    .column-resizer:hover::after {
      background: var(--overlay-strong);
      height: 80px;
    }

    .column-resizer.resizing::after {
      background: var(--accent);
      height: 100px;
    }

    .column-resizer.collapsed {
      cursor: pointer;
      width: 0;
      overflow: visible;
    }

    .column-resizer.collapsed::after {
      content: 'NAVIGATOR';
      position: absolute;
      right: 0;
      top: 20px;
      width: 32px;
      height: 200px;
      background: var(--overlay-strong);
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      writing-mode: vertical-rl;
      text-orientation: mixed;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 2px;
      color: var(--muted);
      margin-top: 0;
    }

    .column-resizer.collapsed:hover::after {
      background: var(--overlay-strong);
      color: var(--text);
    }

    .layout.compare-mode #compare-resizer {
      display: flex;
    }

    .compare-column {
      background: var(--bg-card);
      border-radius: 12px;
      padding: 20px;
      border: 2px dashed var(--border);
      min-height: 400px;
      transition: border-color 0.2s;
    }

    .compare-column.drag-over {
      border-color: var(--accent);
      background: var(--accent-faint);
    }

    .compare-column h3 {
      margin-bottom: 12px;
      color: var(--muted);
      font-size: 1rem;
    }

    .compare-search {
      width: 100%;
      padding: 8px 12px;
      background: var(--input-bg);
      border: 1px solid var(--input-border);
      border-radius: 6px;
      color: var(--text);
      font-size: 0.9rem;
      margin-bottom: 16px;
    }

    .compare-room-display {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 16px;
    }

    .compare-room-display h4 {
      margin-bottom: 12px;
      color: var(--accent);
    }

    .compare-room-display .detail-row {
      display: flex;
      justify-content: space-between;
      padding: 6px 0;
      border-bottom: 1px solid var(--border);
    }

    .compare-room-display .detail-row:last-child {
      border-bottom: none;
    }

    @media (max-width: 900px) {
      .layout {
        flex-direction: column;
      }
      
      .layout.compare-mode {
        flex-direction: column;
      }
      
      .layout.compare-mode #left-column {
        order: 1;
      }

      .layout.compare-mode #resizer {
        order: 2;
      }
      
      .layout.compare-mode #right-column {
        order: 3;
      }
      
      .layout.compare-mode #compare-column {
        order: 4;
      }

      #left-column {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding-right: 0;
      }

      #left-column.collapsed {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        overflow: hidden;
      }

      #left-column:not(.collapsed) {
        overflow: hidden;
      }

      #left-column:not(.collapsed) .tree-container {
        max-height: none;
        height: 100%;
        box-sizing: border-box;
      }

      #right-column {
        width: 100%;
        min-height: 0;
        flex: 1;
        overflow-y: auto;
        padding-left: 0;
        padding-right: 0;
      }

      .layout.compare-mode #compare-column {
        width: 100%;
      }

      /* Horizontal resizer on mobile */
      .column-resizer {
        width: 100% !important;
        height: 16px !important;
        cursor: row-resize;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        z-index: 2;
        touch-action: none;
      }

      .column-resizer::after {
        width: 60px !important;
        height: 6px !important;
        border-radius: 8px;
      }

      .column-resizer:hover::after {
        width: 80px !important;
        height: 6px !important;
      }

      .column-resizer.resizing::after {
        width: 100px !important;
        height: 6px !important;
      }

      .column-resizer.collapsed {
        width: 100% !important;
        height: auto !important;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        background: var(--bg-card);
      }

      .column-resizer.collapsed::after {
        content: '▶ NAVIGATOR';
        position: static;
        right: auto;
        top: auto;
        width: auto !important;
        height: auto !important;
        padding: 8px 24px;
        border-radius: 0;
        writing-mode: horizontal-tb;
        text-orientation: initial;
        margin-top: 0;
        margin-bottom: 0;
        background: transparent;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 2px;
        color: var(--muted);
      }

      .column-resizer.collapsed:hover::after {
        color: var(--text);
        background: var(--overlay-subtle);
      }
    }

    /* ===== COMPREHENSIVE MOBILE STYLES ===== */
    
    /* Small mobile devices */
    @media (max-width: 480px) {
      body {
        padding: 12px;
      }

      /* In windowed mode, override the general body padding */
      body.windowed-layout {
        padding: 0 !important;
      }
      
      header {
        flex-direction: column;
        gap: 12px;
      }
      
      header h1 {
        font-size: 1.3rem;
      }
      
      header p {
        font-size: 0.85rem;
      }
      
      header .header-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 8px;
      }
      
      header .icon-btn {
        width: 44px;
        height: 44px;
        font-size: 18px;
      }
      
      .revit-status-indicator {
        height: 13px;
        padding: 0 5px;
        font-size: 9px;
      }

      /* Very small screens: hide taskbar button labels, show icon only */
      .taskbar-btn-label {
        display: none;
      }

      .taskbar-btn {
        min-width: 40px;
        padding: 0 8px;
      }

      /* Windowed titlebar even more compact on very small phones */
      .window-titlebar {
        min-height: 44px;
        padding: 4px 6px 4px 10px;
      }

      /* Window body can use more height since header is taller */
      .app-window .window-body {
        max-height: 65vh;
      }
    }
    
    /* Tablets and larger phones */
    @media (max-width: 768px) {
      body {
        padding: 16px;
      }

      /* In windowed mode, override the general body padding */
      body.windowed-layout {
        padding: 0 !important;
      }
      
      header {
        flex-wrap: wrap;
      }
      
      header .header-actions {
        flex-wrap: wrap;
      }
      
      /* Touch-friendly tree items */
      .tree-chapter,
      .tree-dept,
      .tree-fa,
      .tree-room {
        min-height: 44px;
        display: flex;
        align-items: center;
      }
      
      .tree-chapter-header,
      .tree-dept-header,
      .tree-fa-header,
      .tree-room-header {
        padding: 12px 10px;
      }
      
      /* Better tap targets for buttons */
      .btn-primary,
      .btn-secondary,
      button {
        min-height: 44px;
        min-width: 44px;
        padding: 10px 16px;
      }
      
      /* Tree container takes more height */
      .tree-container {
        max-height: 50vh;
      }
      
      /* Room detail panel improvements */
      .room-detail-panel {
        font-size: 0.9rem;
      }
      
      .room-detail-panel .detail-row {
        flex-direction: column;
        gap: 4px;
        padding: 10px 0;
      }
      
      .room-detail-panel .detail-label {
        font-weight: 600;
      }
      
      /* Tab buttons on mobile */
      .tab-buttons {
        flex-wrap: wrap;
        gap: 6px;
      }
      
      .tab-buttons button {
        flex: 1 1 auto;
        min-width: 80px;
        padding: 10px 8px;
        font-size: 0.85rem;
      }
      
      /* Table responsiveness */
      .equipment-table,
      .jsn-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
      
      .equipment-table table,
      .jsn-table-wrapper table {
        min-width: 500px;
      }
      
      /* Input fields */
      input[type="text"],
      input[type="number"],
      input[type="search"],
      select,
      textarea {
        font-size: 16px; /* Prevents iOS zoom on focus */
        min-height: 44px;
        padding: 10px 12px;
      }
      
      /* Modal improvements */
      .modal-content,
      .sync-modal-content,
      .logic-modal-content {
        margin: 10px;
        max-height: calc(100vh - 20px);
        width: calc(100% - 20px);
        max-width: 100%;
      }
      
      /* Pagination */
      .jsn-pagination-buttons button {
        min-width: 40px;
        min-height: 40px;
        padding: 8px;
      }
    }
    
    /* Touch device specific improvements */
    @media (pointer: coarse) {
      /* All interactive elements need bigger touch targets */
      .tree-expand-icon,
      .tree-toggle {
        min-width: 32px;
        min-height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      
      /* Row hover states are less useful on touch */
      .tree-room:hover,
      .tree-fa:hover,
      .tree-dept:hover,
      .tree-chapter:hover {
        background: transparent;
      }
      
      .tree-room:active,
      .tree-fa:active,
      .tree-dept:active,
      .tree-chapter:active {
        background: var(--accent-light);
      }
      
      /* Increase spacing for touch */
      .tree-room {
        padding: 10px 8px;
        margin: 2px 0;
      }
      
      /* Scrollbars hidden on touch devices */
      .tree-container::-webkit-scrollbar,
      #toolbox-rooms::-webkit-scrollbar {
        width: 0;
        height: 0;
      }
    }

    /* Tree View Styles */
    .tree-container {
      background-color: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 16px;
      max-height: calc(100vh - 200px);
      overflow-y: auto;
      scrollbar-width: none !important;
      -ms-overflow-style: none;
    }

    .tree-container::-webkit-scrollbar {
      width: 0 !important;
      height: 0 !important;
      display: none !important;
    }

    .navigator-scroll-host {
      position: relative;
      min-width: 0;
    }

    .navigator-scroll-rail {
      position: absolute;
      top: 8px;
      right: -5px;
      z-index: 8;
      width: 10px;
      pointer-events: none;
      opacity: 0;
      transition: opacity 140ms ease;
    }

    body.windowed-layout .navigator-scroll-host {
      height: 100%;
      min-height: 0;
      box-sizing: border-box;
    }

    body.windowed-layout .navigator-scroll-rail {
      right: -16px;
    }

    .navigator-scroll-rail.is-visible {
      pointer-events: auto;
      opacity: 1;
    }

    .navigator-scroll-thumb {
      position: absolute;
      inset-inline: 1px;
      top: 0;
      min-height: 28px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--scrollbar-thumb) 84%, transparent);
      box-shadow: 0 1px 3px rgba(20, 40, 56, 0.16);
      cursor: grab;
      touch-action: none;
      transition: width 120ms ease, background 120ms ease;
    }

    .navigator-scroll-rail:hover .navigator-scroll-thumb,
    .navigator-scroll-thumb.is-dragging {
      inset-inline: 0;
      background: var(--scrollbar-thumb-hover);
      cursor: grabbing;
    }
    }

    .tree-header {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 16px;
    }

    .tree-header-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .tree-header-right {
      display: flex;
      gap: 6px;
      align-items: center;
      justify-content: flex-end;
      min-height: 28px;
    }

    .tree-header-title {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .nav-ghost-btn.is-hidden,
    .nav-toolbar.is-hidden,
    .nav-btn-sep.is-hidden {
      display: none;
      pointer-events: none;
    }

    /* ── Unified ghost button for navigator header ── */
    .nav-ghost-btn {
      position: relative;
      background: none;
      border: none;
      padding: 4px 6px;
      font-size: 1rem;
      cursor: pointer;
      color: var(--text);
      border-radius: 4px;
      transition: background 0.15s ease, color 0.15s ease;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0.7;
    }

    .nav-ghost-btn:hover {
      background: var(--overlay-active);
      opacity: 1;
    }

    .nav-ghost-btn.active {
      color: var(--accent);
      background: var(--accent-faint);
      opacity: 1;
    }

    #navigator-search-toggle {
      transform-origin: center;
    }

    #navigator-search-toggle.active {
      box-shadow: inset 0 0 0 1px var(--accent-light);
      transform: scale(1.04);
    }

    .nav-ghost-btn.nav-accent {
      color: var(--accent);
      opacity: 0.85;
    }

    .nav-ghost-btn.nav-accent:hover {
      opacity: 1;
      background: rgba(0, 184, 148, 0.1);
    }

    /* Subtle divider between button groups on the same row */
    .nav-btn-sep {
      width: 1px;
      height: 16px;
      background: var(--border);
      opacity: 0.5;
      flex-shrink: 0;
    }

    /* ── Navigator Toolbar (project list actions) ── */
    .nav-toolbar {
      display: flex;
      gap: 2px;
      align-items: center;
    }

    .navigator-search-row.is-hidden {
      display: none;
    }

    .navigator-search-row {
      overflow: hidden;
      transform-origin: top right;
      animation: navigatorSearchRowIn 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .navigator-search-shell {
      display: flex;
      align-items: center;
      gap: 6px;
      width: 100%;
      min-height: 34px;
      padding: 0 8px;
      border: 1px solid var(--input-border);
      border-radius: 6px;
      background: var(--input-bg);
      box-shadow: 0 0 0 0 var(--accent-faint);
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
      transform-origin: right center;
      animation: navigatorSearchGrow 0.24s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .navigator-search-shell:focus-within {
      border-color: var(--accent);
      box-shadow: 0 0 0 2px var(--accent-faint);
    }

    .navigator-search-icon {
      flex-shrink: 0;
      color: var(--muted);
      font-size: 0.85rem;
      line-height: 1;
      transform-origin: center;
      animation: navigatorSearchIconSettle 0.24s ease-out;
    }

    .navigator-search-clear {
      flex-shrink: 0;
      width: 22px;
      height: 22px;
      border: none;
      border-radius: 4px;
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      line-height: 1;
      font-size: 0.8rem;
    }

    .navigator-search-clear:hover {
      background: var(--overlay-active);
      color: var(--text);
    }

    @keyframes navigatorSearchRowIn {
      from {
        opacity: 0;
        max-height: 0;
        transform: translateY(-4px);
      }
      to {
        opacity: 1;
        max-height: 42px;
        transform: translateY(0);
      }
    }

    @keyframes navigatorSearchGrow {
      from {
        opacity: 0;
        transform: scaleX(0.12);
      }
      65% {
        opacity: 1;
        transform: scaleX(1.02);
      }
      to {
        opacity: 1;
        transform: scaleX(1);
      }
    }

    @keyframes navigatorSearchIconSettle {
      from {
        opacity: 0;
        transform: rotate(-12deg) scale(0.7);
      }
      to {
        opacity: 1;
        transform: rotate(0deg) scale(1);
      }
    }

    .mode-toggle {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .mode-btn {
      padding: 6px 12px;
      border-radius: 6px;
      border: 1px solid var(--border);
      background-color: var(--pill-inactive);
      color: var(--text);
      font-size: 0.75rem;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .mode-btn.active {
      background-color: var(--accent);
      border-color: var(--accent);
    }

    .mode-btn:hover {
      transform: translateY(-1px);
    }

    .tree-node {
      margin-left: 0;
    }

    .tree-item {
      position: relative;
      display: flex;
      align-items: flex-start;
      padding: 2px 8px 2px 28px;
      cursor: pointer;
      border-radius: 4px;
      transition: background-color 0.15s ease;
      user-select: none;
      gap: 3px;
      min-height: 24px;
    }

    /* Hide spinner arrows on number inputs */
    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    
    input[type="number"] {
      -moz-appearance: textfield;
      appearance: textfield;
    }

    /* Select element styling for better visibility */
    select {
      background-color: var(--select-bg);
      color: var(--text);
      border: 1px solid var(--border);
      cursor: pointer;
    }

    select:hover {
      border-color: var(--accent);
      background-color: var(--select-hover-bg);
    }

    select:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 2px var(--accent-faint);
      background-color: var(--select-hover-bg);
    }

    /* Style dropdown options - note: browser support is limited */
    select option {
      background-color: var(--select-bg);
      color: var(--text);
      padding: 4px;
    }

    .tree-item:hover {
      background-color: var(--overlay-hover);
    }

    .tree-item.selected {
      background-color: var(--accent-light);
    }

    .tree-item.draggable-item {
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
    }

    .tree-item.draggable-item:active {
      cursor: grabbing !important;
    }

    .tree-drag-handle {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 20px;
      cursor: grab;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.2s;
      z-index: 10;
    }

    .tree-drag-handle::before {
      content: '⋮';
      font-size: 14px;
      color: var(--muted);
    }

    .tree-item:hover .tree-drag-handle {
      opacity: 1;
    }

    .tree-drag-handle:active {
      cursor: grabbing;
    }

    .tree-item {
      position: relative;
      padding-left: 24px;
    }

    .tree-item.drag-over {
      border-top: 2px solid var(--accent);
      background-color: rgba(0, 184, 148, 0.1);
    }

    .tree-item[draggable="true"] {
      -webkit-user-drag: element;
    }

    .navigator-layout-popover:empty { display: none; }

    .navigator-layout-menu {
      margin: 8px 2px 2px;
      padding: 8px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--panel-bg, var(--card));
      box-shadow: 0 8px 22px rgba(18, 36, 48, 0.10);
    }

    .navigator-layout-menu p {
      display: grid;
      gap: 2px;
      margin: 0 0 7px;
      color: var(--text);
      font-size: 0.72rem;
    }

    .navigator-layout-menu p span {
      color: var(--muted);
      font-size: 0.64rem;
      line-height: 1.25;
    }

    .navigator-layout-list { display: grid; gap: 2px; }

    .navigator-layout-row {
      display: grid;
      grid-template-columns: 14px minmax(0, 1fr) auto;
      align-items: center;
      min-height: 27px;
      padding: 1px 2px;
      border: 1px solid transparent;
      border-radius: 5px;
      cursor: grab;
    }

    .navigator-layout-row:hover,
    .navigator-layout-row.is-drop-target {
      border-color: var(--accent);
      background: var(--accent-faint);
    }

    .navigator-layout-row.is-drop-target { box-shadow: inset 0 2px 0 var(--accent); }

    .navigator-layout-row.is-hidden-section,
    .navigator-layout-row.is-unavailable { opacity: 0.56; }

    .navigator-layout-grip {
      color: var(--muted);
      font-size: 0.82rem;
      line-height: 1;
    }

    .navigator-layout-name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--text);
      font-size: 0.72rem;
    }

    .navigator-layout-name small {
      color: var(--muted);
      font-size: 0.58rem;
    }

    .navigator-layout-actions {
      display: inline-flex;
      align-items: center;
      gap: 1px;
    }

    .navigator-layout-actions button {
      min-width: 20px;
      height: 20px;
      padding: 0 4px;
      border: 0;
      border-radius: 4px;
      background: transparent;
      color: var(--muted);
      font-size: 0.7rem;
      cursor: pointer;
    }

    .navigator-layout-actions button:hover:not(:disabled) {
      background: var(--overlay-hover);
      color: var(--text);
    }

    .navigator-layout-actions button:disabled {
      opacity: 0.25;
      cursor: default;
    }

    .navigator-layout-actions .navigator-layout-visibility {
      min-width: 34px;
      color: var(--accent-dark, var(--accent));
      font-weight: 700;
      font-size: 0.62rem;
    }

    .tree-toggle {
      width: 16px;
      min-height: 16px;
      margin-right: 4px;
      margin-top: 2px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.7rem;
      color: var(--muted);
      flex-shrink: 0;
    }

    .tree-toggle.collapsed::before {
      content: '▶';
    }

    .tree-toggle.expanded::before {
      content: '▼';
    }

    .tree-toggle.leaf {
      font-size: 0.55rem;
    }

    .tree-toggle.leaf::before {
      content: '●';
    }

    .tree-toggle.leaf-template {
      font-size: 0.7rem;
      font-weight: bold;
      color: var(--purple);
    }

    .tree-toggle.leaf-template::before {
      content: 'T';
    }

    .tree-icon {
      width: 18px;
      height: 18px;
      margin-right: 6px;
      margin-top: 1px;
      font-size: 0.85rem;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .tree-label {
      font-size: 0.85rem;
      flex: 1;
      word-wrap: break-word;
      overflow-wrap: break-word;
      min-width: 0;
    }

    .tree-count {
      font-size: 0.75rem;
      color: var(--muted);
      margin-left: 8px;
    }

    .tree-children {
      margin-left: 16px;
      display: none;
    }

    .tree-children.expanded {
      display: block;
    }

    .detail-panel {
      background-color: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 12px;
      margin-bottom: 10px;
    }

    .detail-panel h3 {
      margin: 0 0 8px 0;
      font-size: 1rem;
      color: var(--accent);
    }

    .overview-hero-panel h3 {
      color: var(--text);
      font-size: 1.35rem;
      line-height: 1.2;
      margin-bottom: 8px;
    }

    .project-home-hero {
      position: relative;
      overflow: hidden;
      border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
      background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 42%),
        linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, var(--bg-card)), var(--bg-card) 64%);
    }

    .project-home-hero::after {
      position: absolute;
      right: -32px;
      bottom: -42px;
      width: 144px;
      height: 144px;
      border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
      border-radius: 50%;
      box-shadow: 0 0 0 20px color-mix(in srgb, var(--accent) 8%, transparent), 0 0 0 46px color-mix(in srgb, var(--accent) 4%, transparent);
      content: '';
      pointer-events: none;
    }

    .project-home-hero-top,
    .project-home-panel-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
    }

    .project-home-source {
      display: grid;
      gap: 2px;
      min-width: 132px;
      padding: 8px 10px;
      border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
      border-radius: 6px;
      background: color-mix(in srgb, var(--bg-card) 78%, transparent);
      color: var(--accent);
      font-size: 0.74rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .project-home-source small {
      color: var(--muted);
      font-size: 0.68rem;
      font-weight: 500;
      letter-spacing: 0;
      text-transform: none;
    }

    .project-home-hero .overview-metric-grid,
    .project-home-hero .overview-metric {
      position: relative;
      z-index: 1;
    }

    .project-home-hero .overview-metric {
      background: color-mix(in srgb, var(--bg-card) 82%, transparent);
    }

    .project-home-dashboard {
      display: grid;
      gap: 10px;
      align-content: start;
    }

    .project-home-dashboard .detail-panel {
      margin: 0;
    }

    .project-home-hero--compact .overview-metric-grid {
      margin-top: 12px;
    }

    .project-home-dashboard-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.3fr) minmax(290px, 0.9fr);
      gap: 10px;
    }

    .project-home-mode-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-top: 12px;
    }

    .project-home-mode-grid .overview-feature-tile {
      padding: 9px;
    }

    .project-home-tools-panel h3 {
      margin-bottom: 4px;
    }

    .project-home-settings-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-top: 10px;
    }

    .modal-content.project-attribute-settings-content {
      display: flex;
      flex-direction: column;
      width: min(980px, calc(100vw - 32px));
      max-height: min(86vh, 820px);
      overflow: hidden;
    }

    .project-attribute-settings-body {
      flex: 1 1 auto;
      min-height: 0;
      overflow: auto;
      padding: 0 20px 20px;
    }

    .project-attribute-settings-intro,
    .project-attribute-settings-group-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
    }

    .project-attribute-settings-intro {
      padding: 4px 0 14px;
      border-bottom: 1px solid var(--border);
    }

    .project-attribute-settings-intro h3,
    .project-attribute-settings-group-head h4 {
      margin: 3px 0 4px;
    }

    .project-attribute-settings-intro p {
      max-width: 670px;
      margin: 0;
      color: var(--muted);
      font-size: 0.86rem;
      line-height: 1.45;
    }

    .project-attribute-settings-count {
      display: grid;
      min-width: 108px;
      padding: 8px 10px;
      border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
      border-radius: 6px;
      background: color-mix(in srgb, var(--accent) 8%, var(--bg-card));
      color: var(--accent);
      text-align: right;
    }

    .project-attribute-settings-count strong {
      font-size: 1.18rem;
      line-height: 1;
    }

    .project-attribute-settings-count span,
    .project-attribute-settings-group-head span {
      color: var(--muted);
      font-size: 0.74rem;
      line-height: 1.35;
    }

    .project-attribute-settings-groups {
      display: grid;
      gap: 10px;
      margin-top: 14px;
    }

    .project-attribute-settings-group {
      padding: 12px;
      border: 1px solid var(--border);
      border-radius: 7px;
      background: var(--bg);
    }

    .project-attribute-settings-group-head button {
      flex: 0 0 auto;
      padding: 5px 8px;
      font-size: 0.76rem;
    }

    .project-attribute-settings-fields {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px 10px;
      margin-top: 10px;
    }

    .project-attribute-settings-field {
      display: flex;
      align-items: flex-start;
      gap: 7px;
      min-width: 0;
      color: var(--text);
      font-size: 0.8rem;
      line-height: 1.3;
      cursor: pointer;
    }

    .project-attribute-settings-field input {
      flex: 0 0 auto;
      margin: 2px 0 0;
      accent-color: var(--accent);
    }

    .project-home-route-card {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .project-home-route-item {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 5px 8px;
      align-items: start;
      padding: 9px;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--bg);
    }

    .project-home-route-item > span {
      color: var(--accent);
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.06em;
    }

    .project-home-route-item strong,
    .project-home-route-item small {
      display: block;
    }

    .project-home-route-item strong {
      color: var(--text);
      font-size: 0.79rem;
    }

    .project-home-route-item small {
      margin-top: 3px;
      color: var(--muted);
      font-size: 0.7rem;
      line-height: 1.35;
    }

    .project-home-route-item button {
      grid-column: 1 / -1;
      width: 100%;
      margin-top: 2px;
    }

    .project-home-panel-head h3 {
      margin-bottom: 4px;
    }

    .project-home-panel-head > div:first-child {
      max-width: 620px;
    }

    .project-home-panel-head .muted {
      margin: 0;
    }

    .project-home-tools-panel {
      border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
    }

    .project-home-tools-status {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 14px;
      padding: 10px;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--bg);
    }

    .project-home-tool-count {
      display: grid;
      min-width: 86px;
      padding-right: 12px;
      border-right: 1px solid var(--border);
    }

    .project-home-tool-count strong {
      color: var(--accent);
      font-size: 1.28rem;
      line-height: 1;
    }

    .project-home-tool-count span,
    .project-home-tool-copy {
      color: var(--muted);
      font-size: 0.76rem;
      line-height: 1.4;
    }

    .project-home-tool-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 10px;
    }

    .project-home-tool-chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 5px 7px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: var(--bg);
      color: var(--text);
      font-size: 0.72rem;
      font-weight: 600;
    }

    @media (max-width: 560px) {
      .project-home-source {
        width: 100%;
      }

      .project-home-tools-status {
        align-items: flex-start;
      }

      .project-home-settings-actions,
      .project-attribute-settings-fields {
        grid-template-columns: 1fr;
      }

      .modal-content.project-attribute-settings-content {
        width: calc(100vw - 20px);
      }

      .project-attribute-settings-intro,
      .project-attribute-settings-group-head {
        gap: 10px;
      }

      .project-attribute-settings-count {
        min-width: 84px;
      }

      .project-home-dashboard-grid,
      .project-home-route-card,
      .project-home-mode-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (min-width: 561px) and (max-width: 980px) {
      .project-home-dashboard-grid {
        grid-template-columns: 1fr;
      }
    }

    .overview-kicker {
      color: var(--accent);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: 6px;
    }

    .overview-metric-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
      gap: 8px;
      margin-top: 14px;
    }

    .overview-metric {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 10px;
      min-width: 0;
    }

    .overview-metric-value {
      color: var(--text);
      font-size: 1.15rem;
      font-weight: 700;
      line-height: 1.15;
      overflow-wrap: anywhere;
    }

    .overview-metric-label {
      color: var(--muted);
      font-size: 0.72rem;
      font-weight: 700;
      margin-top: 3px;
      text-transform: uppercase;
    }

    .overview-metric-note {
      color: var(--muted);
      font-size: 0.72rem;
      margin-top: 3px;
    }

    .overview-feature-grid,
    .overview-signal-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
      gap: 8px;
    }

    .overview-feature-tile {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 10px;
      min-width: 0;
    }

    .overview-feature-title {
      color: var(--text);
      font-size: 0.86rem;
      font-weight: 700;
      margin-bottom: 4px;
    }

    .overview-feature-text {
      color: var(--muted);
      font-size: 0.78rem;
      line-height: 1.45;
    }

    .overview-step-list {
      display: grid;
      gap: 8px;
    }

    .overview-step {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 10px;
    }

    .overview-step-title {
      color: var(--text);
      font-size: 0.86rem;
      font-weight: 700;
      margin-bottom: 3px;
    }

    .overview-step-text {
      color: var(--muted);
      font-size: 0.78rem;
      line-height: 1.45;
    }

    .overview-step-action,
    .overview-action-row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      flex-shrink: 0;
    }

    .overview-action-row > button {
      flex: 1 1 130px;
    }

    .detail-row {
      display: grid;
      grid-template-columns: 110px 1fr;
      gap: 6px;
      padding: 3px 0;
      border-bottom: 1px solid var(--border-subtle);
      font-size: 0.8rem;
    }

    .detail-row:last-child {
      border-bottom: none;
    }

    .detail-label {
      font-weight: 600;
      min-width: 100px;
      color: var(--muted);
      font-size: 0.78rem;
    }

    .detail-value {
      flex: 1;
    }

    .equipment-list {
      max-height: 400px;
      overflow-y: auto;
    }

    .equipment-item {
      padding: 0;
      margin: 2px 0;
      background-color: var(--overlay-subtle);
      border: 1px solid var(--border);
      border-radius: 6px;
      font-size: 0.8rem;
      overflow: hidden;
      transition: border-color 0.15s;
    }

    .equipment-item:hover {
      border-color: var(--primary);
    }

    .equipment-item.eq-expanded {
      border-color: var(--primary);
    }

    .equipment-item-header {
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 600;
      min-width: 0;
      padding: 8px 12px;
      cursor: pointer;
      flex-wrap: wrap;
    }
    
    .equipment-item-body {
      display: none;
      padding: 0 12px 10px 12px;
    }

    .equipment-item.eq-expanded .equipment-item-body {
      display: block;
    }

    .equipment-item-controls {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      padding-top: 6px;
      border-top: 1px solid var(--border-subtle);
      font-size: 0.8rem;
    }

    .equipment-item-controls .eq-field {
      display: flex;
      align-items: center;
      gap: 4px;
      white-space: nowrap;
    }

    .equipment-item-controls .eq-field label {
      font-size: 0.7rem;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }

    .equipment-item-controls .eq-total {
      font-weight: 600;
      color: var(--text);
      margin-left: auto;
    }

    .equipment-item-controls .eq-category {
      font-size: 0.7rem;
      color: var(--muted);
      background: var(--overlay-hover);
      padding: 2px 6px;
      border-radius: 3px;
    }

    .equipment-item-desc {
      color: var(--muted);
      font-size: 0.75rem;
      line-height: 1.4;
      display: block;
      word-wrap: break-word;
      overflow-wrap: break-word;
    }

    .equipment-item-desc.truncated {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .equipment-item-desc.expanded {
      display: block;
      white-space: normal;
    }

    .equipment-desc-toggle {
      color: var(--primary);
      cursor: pointer;
      font-size: 0.75rem;
      margin-left: 4px;
      text-decoration: underline;
      display: inline;
    }

    .equipment-desc-toggle:hover {
      color: var(--primary-hover);
    }

    /* Equipment Detail Panel Styles */
    .equipment-detail-section {
      margin-bottom: 20px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--border);
    }
    
    .equipment-detail-section:last-child {
      border-bottom: none;
      margin-bottom: 0;
    }
    
    .equipment-detail-section h3 {
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--accent);
      margin: 0 0 12px 0;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    
    .equipment-detail-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 6px;
    }
    
    .equipment-detail-row {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    
    .equipment-detail-label {
      font-size: 0.8rem;
      color: var(--muted);
      min-width: 80px;
      flex-shrink: 0;
    }
    
    .equipment-detail-value {
      font-size: 0.85rem;
      color: var(--text);
      word-break: break-word;
    }
    
    .equipment-detail-value.highlight {
      color: var(--accent);
      font-weight: 600;
    }
    
    .equipment-vendor-card {
      background: var(--bg-hover);
      border-radius: 6px;
      padding: 12px;
      margin-bottom: 8px;
    }
    
    .equipment-vendor-card:last-child {
      margin-bottom: 0;
    }

    /* Compact equipment detail modal - dashboard layout */
    #equipment-detail-modal .modal-content {
      max-width: 1200px;
    }

    #equipment-detail-content.eq-compact {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px 16px;
      padding: 10px 16px;
    }

    #equipment-detail-content.eq-compact .eq-full-span {
      grid-column: 1 / -1;
    }

    #equipment-detail-content.eq-compact .equipment-detail-section {
      margin-bottom: 0;
      padding-bottom: 4px;
    }

    #equipment-detail-content.eq-compact .equipment-detail-section h3 {
      font-size: 0.75rem;
      margin: 0 0 5px 0;
      letter-spacing: 0.8px;
    }

    #equipment-detail-content.eq-compact .equipment-detail-grid {
      gap: 3px;
    }

    #equipment-detail-content.eq-compact .equipment-detail-row {
      gap: 4px;
    }

    #equipment-detail-content.eq-compact .equipment-detail-label {
      font-size: 0.75rem;
      min-width: 65px;
    }

    #equipment-detail-content.eq-compact .equipment-detail-value {
      font-size: 0.8rem;
    }

    /* Vendor cards side-by-side */
    .eq-vendors-row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .eq-vendors-row > .equipment-vendor-card {
      flex: 1;
      min-width: 220px;
      margin-bottom: 0;
      padding: 8px 10px;
    }

    .eq-vendors-row > .equipment-vendor-card .equipment-detail-grid {
      grid-template-columns: 1fr;
    }

    /* Modal header/footer compact in eq detail */
    #equipment-detail-modal .modal-header {
      margin-bottom: 8px;
      padding-bottom: 8px;
    }

    #equipment-detail-modal .modal-header h2 {
      font-size: 1rem;
    }

    #equipment-detail-modal .modal-footer {
      margin-top: 8px;
      padding-top: 8px;
    }

    /* Replace equipment modal sits above equipment detail modal */
    #replace-equipment-modal {
      z-index: 1100;
    }
    
    .jsn-clickable {
      cursor: pointer;
      color: var(--primary);
      text-decoration: underline;
      transition: color 0.2s;
    }
    
    .jsn-clickable:hover {
      color: var(--accent);
    }

    /* JSN Lookup Mode Styles */
    .jsn-lookup-container {
      padding: 20px;
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow: hidden;
    }
    
    .jsn-lookup-search {
      display: flex;
      gap: 12px;
      margin-bottom: 12px;
      flex-shrink: 0;
    }
    
    .jsn-lookup-search input {
      flex: 1;
      padding: 12px 16px;
      font-size: 1rem;
      border: 2px solid var(--border);
      border-radius: 8px;
      background: var(--input-bg);
      color: var(--text);
      transition: border-color 0.2s;
    }
    
    .jsn-lookup-search input:focus {
      border-color: var(--accent);
      outline: none;
    }
    
    .jsn-lookup-results {
      display: grid;
      gap: 12px;
    }
    
    .jsn-result-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 16px;
      cursor: pointer;
      transition: all 0.2s;
    }
    
    .jsn-result-card:hover {
      border-color: var(--accent);
      box-shadow: 0 2px 8px var(--accent-faint);
    }
    
    .jsn-result-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 8px;
    }
    
    .jsn-result-jsn {
      font-weight: 700;
      font-size: 1.1rem;
      color: var(--accent);
    }
    
    .jsn-result-category {
      font-size: 0.75rem;
      padding: 2px 8px;
      border-radius: 4px;
      background: var(--bg-hover);
      color: var(--muted);
    }
    
    .jsn-result-name {
      font-weight: 600;
      margin-bottom: 4px;
    }
    
    .jsn-result-desc {
      font-size: 0.85rem;
      color: var(--muted);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .jsn-result-specs {
      display: flex;
      gap: 16px;
      margin-top: 8px;
      font-size: 0.8rem;
      color: var(--muted);
    }

    /* JSN Flat List Styles */
    .jsn-lookup-list {
      flex: 1;
      overflow-y: auto;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--bg);
    }
    
    .jsn-list-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      cursor: pointer;
      border-bottom: 1px solid var(--border);
      transition: background 0.15s;
    }
    
    .jsn-list-item:last-child {
      border-bottom: none;
    }
    
    .jsn-list-item:hover {
      background: var(--bg-hover);
    }
    
    .jsn-list-item.selected {
      background: var(--accent);
      color: var(--bg);
    }
    
    .jsn-list-item.selected .jsn-list-jsn {
      color: var(--bg);
    }
    
    .jsn-list-item.selected .jsn-list-name {
      color: var(--bg);
    }
    
    .jsn-list-jsn {
      font-weight: 600;
      font-size: 0.85rem;
      color: var(--primary);
      min-width: 60px;
      flex-shrink: 0;
    }
    
    .jsn-list-name {
      font-size: 0.85rem;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    /* Pagination Styles */
    .jsn-lookup-pagination {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
      margin-top: 8px;
      border-top: 1px solid var(--border);
      flex-shrink: 0;
    }
    
    .jsn-pagination-info {
      font-size: 0.8rem;
      color: var(--muted);
    }
    
    .jsn-pagination-buttons {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .jsn-pagination-buttons button {
      padding: 6px 12px;
      font-size: 0.8rem;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 4px;
      color: var(--text);
      cursor: pointer;
      transition: all 0.2s;
    }
    
    .jsn-pagination-buttons button:hover:not(:disabled) {
      background: var(--accent);
      color: var(--bg);
      border-color: var(--accent);
    }
    
    .jsn-pagination-buttons button:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }
    
    .jsn-pagination-current {
      font-size: 0.8rem;
      color: var(--muted);
      padding: 0 8px;
    }

    /* Logic Portal Styles */
    .logic-card {
      background: var(--bg-card);
      border: 2px solid var(--border);
      border-radius: 8px;
      padding: 20px;
      transition: all 0.2s;
    }

    .logic-card:hover {
      border-color: var(--accent);
      box-shadow: 0 4px 12px var(--accent-light);
    }

    .logic-card-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 15px;
      padding-bottom: 15px;
      border-bottom: 2px solid var(--border);
    }

    .logic-card-title {
      flex: 1;
    }

    .logic-card-code {
      font-weight: bold;
      color: var(--accent);
      font-size: 16px;
      margin-bottom: 5px;
    }

    .logic-card-name {
      color: var(--muted);
      font-size: 14px;
    }

    .logic-fields {
      display: grid;
      gap: 15px;
    }

    .logic-field {
      display: grid;
      grid-template-columns: 150px 1fr;
      gap: 10px;
      align-items: start;
    }

    .logic-field-label {
      font-weight: 600;
      color: var(--text);
      padding-top: 8px;
      font-size: 13px;
    }

    .logic-field-input, .logic-field-textarea {
      padding: 8px 12px;
      border: 2px solid var(--input-border);
      border-radius: 4px;
      font-size: 14px;
      font-family: 'Courier New', monospace;
      background: var(--input-bg);
      color: var(--text);
    }

    .logic-field-input:focus, .logic-field-textarea:focus {
      outline: none;
      border-color: var(--accent);
    }

    .logic-field-textarea {
      min-height: 60px;
      resize: vertical;
    }

    .logic-help-text {
      grid-column: 2;
      font-size: 12px;
      color: var(--muted);
      font-style: italic;
      margin-top: -10px;
    }

    .logic-status {
      display: inline-block;
      padding: 4px 10px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
    }

    .logic-status.complete {
      background: var(--accent-light);
      color: var(--accent);
    }

    .logic-status.partial {
      background: var(--warning-faint);
      color: var(--warning);
    }

    .logic-status.empty {
      background: var(--overlay-active);
      color: var(--muted);
    }

    .card {
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 16px;
      margin-bottom: 16px;
      background-color: var(--bg-card);
      box-shadow: 0 0 12px var(--card-shadow);
    }

    .card h2 {
      margin-bottom: 8px;
      font-size: 1.1rem;
    }

    .pill {
      border-radius: 999px;
      padding: 6px 12px;
      margin-right: 8px;
      margin-bottom: 8px;
      border: none;
      cursor: pointer;
      background-color: var(--pill-inactive);
      color: var(--text);
      font-size: 0.75rem;
      transition: background-color 0.15s ease, transform 0.12s ease;
    }

    .pill.active {
      background-color: var(--accent);
    }

    .pill:hover {
      transform: translateY(-1px);
    }

    .pill-group {
      display: flex;
      flex-wrap: wrap;
    }

    .ids-list {
      max-height: 420px;
      overflow-y: auto;
      padding-right: 4px;
    }

    .ids-item {
      margin-bottom: 12px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--border);
      font-size: 0.8rem;
    }

    .ids-question {
      font-weight: 600;
      margin-bottom: 4px;
    }

    .ids-input {
      width: 100%;
      padding: 6px;
      border-radius: 4px;
      border: 1px solid var(--input-border);
      background-color: var(--input-bg);
      color: var(--text);
      font-size: 0.8rem;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.8rem;
    }

    th, td {
      padding: 4px 0;
    }

    th {
      text-align: left;
      border-bottom: 1px solid var(--border);
      padding-bottom: 4px;
      font-weight: 600;
    }

    th.right,
    td.right {
      text-align: right;
    }

    .muted {
      color: var(--muted);
      font-size: 0.9rem;
    }

    code {
      font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
      font-size: 0.8rem;
      background-color: var(--code-bg);
      padding: 1px 4px;
      border-radius: 3px;
    }

    ul {
      padding-left: 18px;
    }

    li {
      margin-bottom: 4px;
    }

    /* Modal Styles */
    .modal-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: var(--modal-overlay);
      backdrop-filter: blur(2px);
      z-index: 1000;
      align-items: center;
      justify-content: center;
    }

    .modal-overlay.active {
      display: flex;
    }

    .modal-content {
      background-color: var(--bg-card);
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 24px;
      max-width: 900px;
      max-height: 80vh;
      overflow-y: auto;
      width: 90%;
      box-shadow: 0 18px 60px var(--card-shadow);
    }

    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      border-bottom: 1px solid var(--border);
      padding-bottom: 12px;
    }

    .modal-close {
      background: none;
      border: none;
      color: var(--text);
      font-size: 1.5rem;
      cursor: pointer;
      padding: 0;
      width: 30px;
      height: 30px;
    }

    .modal-close:hover {
      color: var(--accent);
    }

    .import-options {
      display: flex;
      gap: 12px;
      margin-bottom: 20px;
    }

    .import-option-btn {
      padding: 8px 16px;
      border-radius: 6px;
      border: 1px solid var(--border);
      background-color: var(--pill-inactive);
      color: var(--text);
      cursor: pointer;
      font-size: 0.85rem;
      transition: all 0.15s ease;
    }

    .import-option-btn.active {
      background-color: var(--accent);
      border-color: var(--accent);
    }

    .import-mode-tabs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
      margin-bottom: 16px;
      padding: 4px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg);
    }

    .import-mode-tab {
      padding: 8px 10px;
      border: 1px solid transparent;
      border-radius: 6px;
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      font-size: 0.88rem;
      font-weight: 600;
      transition: all 0.15s ease;
    }

    .import-mode-tab:hover {
      color: var(--text);
      background: var(--overlay-hover);
    }

    .import-mode-tab.active {
      color: white;
      background: var(--accent);
      border-color: var(--accent);
    }

    .import-tree {
      max-height: 400px;
      overflow-y: auto;
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 12px;
      background-color: var(--bg);
    }

    .import-tree-item {
      padding: 6px 0;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .import-tree-item input[type="checkbox"] {
      cursor: pointer;
    }

    .import-tree-item label {
      cursor: pointer;
      flex: 1;
    }

    .import-tree-children {
      margin-left: 24px;
    }

    .merge-option {
      margin-top: 16px;
      padding: 12px;
      background-color: var(--bg);
      border: 1px solid var(--border);
      border-radius: 6px;
    }

    .merge-option label {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      font-size: 0.9rem;
    }

    .blank-room-form {
      display: grid;
      gap: 14px;
      padding: 16px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg);
    }

    .blank-room-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .blank-room-field label {
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--muted);
    }

    .blank-room-field input {
      width: 100%;
      padding: 8px;
      border: 1px solid var(--input-border);
      border-radius: 6px;
      background: var(--input-bg);
      color: var(--text);
      font-size: 0.92rem;
    }

    .blank-room-checkbox {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      font-size: 0.9rem;
      color: var(--text);
    }

    .blank-room-prefill-fields {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    @media (max-width: 680px) {
      .blank-room-prefill-fields {
        grid-template-columns: 1fr;
      }
    }

    .btn-primary {
      background-color: var(--accent);
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 0.9rem;
      transition: all 0.15s ease;
    }

    .btn-primary:hover {
      opacity: 0.9;
    }

    .btn-secondary {
      background-color: var(--pill-inactive);
      color: var(--text);
      border: 1px solid var(--border);
      padding: 10px 20px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 0.9rem;
      transition: all 0.15s ease;
    }

    .btn-secondary:hover {
      background-color: var(--btn-secondary-hover);
    }

    .modal-footer {
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
      gap: 12px;
      padding-top: 12px;
      border-top: 1px solid var(--border);
    }

    .project-name-input {
      width: 100%;
      padding: 8px;
      border-radius: 4px;
      border: 1px solid var(--input-border);
      background-color: var(--input-bg);
      color: var(--text);
      font-size: 0.9rem;
      margin-bottom: 16px;
    }

    .tree-search-box {
      width: 100%;
      padding: 8px 12px;
      background: var(--input-bg);
      border: 1px solid var(--input-border);
      border-radius: 6px;
      color: var(--text);
      font-size: 0.9rem;
      margin-top: 12px;
      margin-bottom: 0;
    }

    .tree-search-box:focus {
      outline: none;
      border-color: var(--accent);
    }

    .navigator-search-shell .tree-search-box {
      flex: 1;
      min-width: 0;
      padding: 7px 0;
      margin: 0;
      border: none;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .navigator-search-shell .tree-search-box:focus {
      border-color: transparent;
      box-shadow: none;
    }

    .navigator-search-results {
      display: grid;
      gap: 6px;
      animation: navigatorSearchResultsIn 0.18s ease-out;
    }

    .navigator-search-summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 0 2px 6px;
      color: var(--muted);
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      border-bottom: 1px solid var(--border-subtle);
      margin-bottom: 2px;
    }

    .navigator-search-back {
      padding: 2px 7px;
      border: 1px solid var(--border);
      border-radius: 4px;
      background: var(--bg-card);
      color: var(--text-secondary);
      cursor: pointer;
      font-size: 0.68rem;
      font-weight: 700;
      text-transform: none;
      letter-spacing: 0;
      white-space: nowrap;
    }

    .navigator-search-back:hover,
    .navigator-search-back:focus {
      outline: none;
      color: var(--text);
      border-color: var(--accent);
      background: var(--overlay-hover);
    }

    .navigator-search-result {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      width: 100%;
      padding: 8px;
      border: 1px solid transparent;
      border-radius: 6px;
      background: transparent;
      color: var(--text);
      cursor: pointer;
      text-align: left;
      transform: translateY(0);
      transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    }

    .navigator-search-result:hover,
    .navigator-search-result:focus {
      outline: none;
      background: var(--overlay-hover);
      border-color: var(--border);
      transform: translateY(-1px);
    }

    .navigator-search-result.is-selected {
      background: var(--accent-faint);
      border-color: var(--accent);
    }

    .navigator-search-result-icon {
      width: 18px;
      flex-shrink: 0;
      text-align: center;
      font-size: 0.88rem;
      line-height: 1.25;
      margin-top: 1px;
    }

    .navigator-search-result-main {
      min-width: 0;
      flex: 1;
    }

    .navigator-search-result-title {
      display: block;
      font-size: 0.84rem;
      font-weight: 600;
      line-height: 1.25;
      overflow-wrap: anywhere;
    }

    .navigator-search-result-meta,
    .navigator-search-result-match {
      display: block;
      margin-top: 2px;
      color: var(--muted);
      font-size: 0.72rem;
      line-height: 1.25;
      overflow-wrap: anywhere;
    }

    .navigator-search-result-match {
      color: var(--text-secondary);
    }

    .navigator-search-result mark {
      padding: 0 2px;
      border-radius: 3px;
      background: var(--accent-light);
      color: var(--text);
    }

    .navigator-search-empty {
      padding: 18px 8px;
      color: var(--muted);
      font-size: 0.82rem;
      text-align: center;
      border: 1px dashed var(--border);
      border-radius: 6px;
      background: var(--overlay-subtle);
    }

    @keyframes navigatorSearchResultsIn {
      from {
        opacity: 0;
        transform: translateY(-3px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .tree-item.search-match {
      background-color: var(--accent-faint);
    }

    .tree-item.search-highlight {
      background-color: var(--accent-light);
    }

    /* Room Logic Indicators */
    .logic-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 0.7rem;
      padding: 2px 8px;
      border-radius: 12px;
      font-weight: 600;
      margin-left: 8px;
      vertical-align: middle;
    }

    .logic-badge.enabled {
      background: linear-gradient(135deg, var(--accent) 0%, var(--teal) 100%);
      color: white;
      box-shadow: 0 2px 4px var(--accent-glow);
    }

    .logic-badge.disabled {
      background: var(--pill-inactive);
      color: var(--muted);
      border: 1px solid var(--border);
    }

    .logic-badge::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      display: inline-block;
    }

    .logic-badge.enabled::before {
      background: white;
      box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
    }

    .logic-badge.disabled::before {
      background: var(--muted);
    }

    .import-tree-item.has-logic {
      background: var(--accent-faint);
      color: var(--accent);
    }

    .import-tree-item.no-logic {
      opacity: 0.7;
    }

    /* Logic Toggle Switch */
    .logic-toggle-switch {
      position: relative;
      display: inline-block !important;
      width: 24px !important;
      height: 14px !important;
      margin-left: 4px !important;
      margin-right: 4px !important;
      vertical-align: middle;
      flex-shrink: 0;
      min-width: 24px !important;
      max-width: 24px !important;
    }

    .logic-toggle-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .logic-toggle-slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: var(--pill-inactive);
      border: 1px solid var(--border);
      transition: .3s;
      border-radius: 14px;
    }

    .logic-toggle-slider:before {
      position: absolute;
      content: "";
      height: 10px;
      width: 10px;
      left: 2px;
      bottom: 1px;
      background-color: white;
      transition: .3s;
      border-radius: 50%;
    }

    .logic-toggle-switch input:checked + .logic-toggle-slider {
      background: linear-gradient(135deg, var(--accent) 0%, var(--teal) 100%);
      border-color: var(--accent);
    }

    .logic-toggle-switch input:checked + .logic-toggle-slider:before {
      transform: translateX(10px);
    }

    .logic-toggle-switch:hover .logic-toggle-slider {
      box-shadow: 0 0 8px var(--accent-glow);
    }

    .logic-toggle-switch.disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }

    .logic-toggle-switch.disabled .logic-toggle-slider {
      cursor: not-allowed;
    }

    /* Template Toggle Switch - for disassociating attributes/equipment */
    .template-toggle-switch {
      position: relative;
      display: inline-block !important;
      width: 28px !important;
      height: 16px !important;
      margin-right: 4px !important;
      vertical-align: middle;
      flex-shrink: 0;
      min-width: 28px !important;
      max-width: 28px !important;
    }

    .template-toggle-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .template-toggle-slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: var(--green-badge);
      border: 1px solid var(--green-badge);
      transition: .3s;
      border-radius: 16px;
    }

    .template-toggle-slider:before {
      position: absolute;
      content: "";
      height: 12px;
      width: 12px;
      left: 2px;
      bottom: 1px;
      background-color: white;
      transition: .3s;
      border-radius: 50%;
    }

    /* When checked = disassociated/custom mode */
    .template-toggle-switch input:checked + .template-toggle-slider {
      background: var(--error);
      border-color: var(--error);
    }

    .template-toggle-switch input:checked + .template-toggle-slider:before {
      transform: translateX(12px);
    }

    .template-toggle-switch:hover .template-toggle-slider {
      box-shadow: 0 0 8px var(--purple-faint);
    }

    /* Department Input Modal */
    .input-modal {
      background: var(--bg-card);
      padding: 20px;
      border-radius: 8px;
      margin-top: 16px;
      border: 1px solid var(--border);
    }

    .input-field {
      margin-bottom: 16px;
    }

    .input-field label {
      display: block;
      margin-bottom: 6px;
      font-weight: 500;
      color: var(--text);
    }

    .input-field input[type="number"],
    .input-field input[type="text"] {
      width: 100%;
      padding: 10px;
      background: var(--input-bg);
      border: 1px solid var(--input-border);
      border-radius: 6px;
      color: var(--text);
      font-size: 0.95rem;
    }

    .input-field .help-text {
      font-size: 0.85rem;
      color: var(--muted);
      margin-top: 4px;
    }

    .calculation-result {
      background: var(--accent-faint);
      border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
      padding: 12px;
      border-radius: 4px;
      margin-top: 16px;
    }

    .calculation-result h4 {
      color: var(--accent);
      margin-bottom: 8px;
      font-size: 0.9rem;
    }

    .calculation-summary {
      font-size: 0.85rem;
      color: var(--muted);
    }

    /* Workbench Mode */
    #workbench-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--workbench-bg);
      z-index: 9999;
      display: none;
      flex-direction: column;
      color: var(--workbench-chrome-text);
      --wb-right-panel-space: 232px;
      --wb-panel-edge: 14px;
    }

    #workbench-container.wb-sim-collapsed {
      --wb-right-panel-space: 0px;
    }

    #workbench-container.active {
      display: flex;
    }

    #workbench-header {
      background: var(--workbench-chrome-bg);
      border-bottom: 1px solid var(--workbench-chrome-border);
      padding: 6px 10px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 8px;
      min-height: 44px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.14);
      backdrop-filter: blur(18px);
      position: relative;
      z-index: 110;
    }

    #workbench-header h2 {
      color: var(--workbench-chrome-text);
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.055em;
      text-transform: uppercase;
      margin: 0;
      white-space: nowrap;
      color: var(--workbench-chrome-muted);
    }

    #workbench-controls {
      display: flex;
      gap: 6px;
      align-items: center;
      flex-wrap: wrap;
    }
    
    #workbench-sliders {
      display: flex;
      flex-direction: column;
      gap: 7px;
      align-items: stretch;
    }

    .workbench-slider-group {
      display: grid;
      grid-template-columns: 78px minmax(88px, 1fr) 34px;
      align-items: center;
      gap: 8px;
      min-height: 27px;
    }

    .workbench-slider-group > span:first-child {
      color: var(--workbench-chrome-muted);
      font-size: 0.72rem;
      font-weight: 600;
      white-space: nowrap;
    }
    
    .workbench-slider-group input[type="range"] {
      width: 100%;
      height: 4px;
      -webkit-appearance: none;
      appearance: none;
      background: var(--workbench-chrome-border);
      border-radius: 2px;
      cursor: pointer;
      accent-color: var(--workbench-accent);
    }
    
    .workbench-slider-group input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 12px;
      height: 12px;
      background: var(--workbench-accent);
      border: 2px solid var(--workbench-chrome-surface-strong);
      border-radius: 50%;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }

    .workbench-slider-group input[type="number"] {
      width: 100%;
      padding: 2px 4px;
      border: 1px solid var(--workbench-chrome-border);
      border-radius: 5px;
      background: var(--workbench-chrome-surface-strong);
      color: var(--workbench-chrome-text);
      font: inherit;
      font-size: 0.72rem;
      font-variant-numeric: tabular-nums;
    }

    .workbench-slider-group output {
      color: var(--workbench-chrome-text);
      font-size: 0.72rem;
      font-variant-numeric: tabular-nums;
      min-width: 0;
      text-align: right;
    }

    .workbench-btn {
      background: var(--workbench-control-bg);
      border: 1px solid var(--workbench-chrome-border);
      color: var(--workbench-chrome-text);
      padding: 5px 9px;
      border-radius: 6px;
      cursor: pointer;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      font-size: 0.72rem;
      font-weight: 600;
      line-height: 1;
      min-height: 28px;
      transition: background 0.16s, border-color 0.16s, color 0.16s, transform 0.16s;
    }

    .workbench-btn:hover {
      background: var(--workbench-control-hover);
      border-color: var(--workbench-accent);
      transform: translateY(-1px);
    }

    .workbench-btn.danger {
      border-color: var(--workbench-chrome-border);
      color: var(--workbench-danger);
      background: transparent;
    }

    .workbench-btn.danger:hover {
      background: var(--error-faint);
      border-color: var(--workbench-danger);
    }

    .workbench-btn.firstperson {
      border-color: var(--workbench-chrome-border);
      color: var(--workbench-chrome-text);
      background: var(--workbench-control-bg);
    }

    .workbench-btn.firstperson:hover {
      background: var(--workbench-control-hover);
      border-color: var(--workbench-gold);
    }

    .workbench-btn.firstperson.active {
      background: var(--warning-yellow-faint);
      border-color: var(--workbench-gold);
      color: var(--workbench-chrome-text);
    }

    .workbench-btn.planview {
      border-color: var(--workbench-chrome-border);
      color: var(--workbench-chrome-text);
      background: var(--workbench-control-bg);
    }

    .workbench-btn.planview:hover {
      background: var(--workbench-control-hover);
      border-color: var(--workbench-accent);
    }

    .workbench-btn.planview.active {
      background: var(--workbench-control-active);
      border-color: var(--workbench-accent);
      color: var(--workbench-chrome-text);
    }

    /* Orbit + Clean/Studio style toggles share the plan-view chrome look */
    .workbench-btn.orbit,
    .workbench-btn.scenestyle {
      border-color: var(--workbench-chrome-border);
      color: var(--workbench-chrome-text);
      background: var(--workbench-control-bg);
    }

    .workbench-btn.orbit:hover,
    .workbench-btn.scenestyle:hover {
      background: var(--workbench-control-hover);
      border-color: var(--workbench-accent);
    }

    .workbench-btn.orbit.active,
    .workbench-btn.scenestyle.active {
      background: var(--workbench-control-active);
      border-color: var(--workbench-accent);
      color: var(--workbench-chrome-text);
    }

    /* Visualization Mode Selector */
    #viz-mode-selector {
      display: flex;
      margin-left: 0;
      padding: 2px;
      border: 1px solid var(--workbench-chrome-border);
      border-radius: 7px;
      background: var(--workbench-control-bg);
      gap: 2px;
    }

    .viz-mode-btn,
    .wb-view-btn {
      background: transparent;
      border: 1px solid transparent;
      color: var(--workbench-chrome-muted);
      padding: 4px 9px;
      border-radius: 5px;
      cursor: pointer;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      font-size: 0.72rem;
      font-weight: 600;
      min-height: 24px;
      transition: background 0.16s, color 0.16s, border-color 0.16s;
    }

    .viz-mode-btn:hover,
    .wb-view-btn:hover {
      background: var(--workbench-control-hover);
      color: var(--workbench-chrome-text);
    }

    .viz-mode-btn.active,
    .wb-view-btn.active {
      background: var(--workbench-chrome-surface-strong);
      border-color: var(--workbench-chrome-border);
      color: var(--workbench-chrome-text);
      box-shadow: 0 1px 5px rgba(0,0,0,0.13);
    }

    #floor-selector {
      display: flex;
      align-items: center;
      gap: 2px;
      margin-left: 0;
      color: var(--workbench-chrome-muted);
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      font-size: 0.72rem;
      padding: 2px;
      border: 1px solid var(--workbench-chrome-border);
      border-radius: 7px;
      background: var(--workbench-control-bg);
    }

    #floor-selector[hidden] { display: none; }

    .floor-btn {
      background: transparent;
      border: none;
      color: var(--workbench-chrome-text);
      width: 23px;
      height: 23px;
      padding: 0;
      border-radius: 5px;
      cursor: pointer;
      font-size: 0.75rem;
      transition: background 0.16s;
    }

    .floor-btn:hover {
      background: var(--workbench-control-hover);
    }

    #current-floor {
      font-weight: 700;
      font-size: 0.72rem;
      color: var(--workbench-chrome-text);
    }

    #floor-label {
      opacity: 0.75;
      font-size: 0.66rem;
    }

    .wb-floor-readout {
      display: flex;
      align-items: baseline;
      gap: 4px;
      min-width: 54px;
      justify-content: center;
      white-space: nowrap;
    }

    .wb-header-spacer { flex: 1 1 auto; }

    .wb-selection-controls {
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
      padding: 2px 4px 2px 8px;
      border: 1px solid var(--workbench-chrome-border);
      border-radius: 7px;
      background: var(--workbench-control-bg);
    }

    .wb-selection-controls[hidden] { display: none; }

    .wb-selection-label {
      max-width: 150px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--workbench-chrome-text);
      font-size: 0.7rem;
      font-weight: 650;
    }

    .wb-dimension-field {
      display: flex;
      align-items: center;
      gap: 3px;
      color: var(--workbench-chrome-muted);
      font-size: 0.66rem;
      font-weight: 700;
    }

    .wb-dimension-field input {
      width: 49px;
      height: 23px;
      padding: 2px 4px;
      border: 1px solid var(--workbench-chrome-border);
      border-radius: 5px;
      background: var(--workbench-chrome-surface-strong);
      color: var(--workbench-chrome-text);
      font: inherit;
      font-variant-numeric: tabular-nums;
    }

    .wb-actions {
      position: relative;
      flex: 0 0 auto;
    }

    .wb-actions > summary {
      list-style: none;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      user-select: none;
    }

    .wb-actions > summary::-webkit-details-marker { display: none; }
    .wb-actions > summary::after {
      content: '›';
      color: var(--workbench-chrome-muted);
      transform: rotate(90deg);
      transition: transform 0.15s ease;
    }
    .wb-actions[open] > summary::after { transform: rotate(-90deg); }

    .wb-actions-menu {
      position: absolute;
      top: calc(100% + 7px);
      right: 0;
      width: 286px;
      max-height: calc(100vh - 68px);
      overflow: auto;
      padding: 8px;
      border: 1px solid var(--workbench-chrome-border);
      border-radius: 9px;
      background: var(--workbench-chrome-bg);
      color: var(--workbench-chrome-text);
      box-shadow: 0 16px 42px rgba(0,0,0,0.28);
      backdrop-filter: blur(20px);
      z-index: 120;
    }

    .wb-actions-section {
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 7px;
    }

    .wb-actions-section + .wb-actions-section {
      border-top: 1px solid var(--workbench-chrome-border);
    }

    .wb-actions-heading {
      color: var(--workbench-chrome-muted);
      font-size: 0.62rem;
      font-weight: 750;
      letter-spacing: 0.055em;
      text-transform: uppercase;
    }

    .wb-actions-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 5px;
    }

    .wb-actions-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .wb-actions-grid .workbench-btn { width: 100%; }

    .wb-close-btn {
      width: 28px;
      padding: 0;
      font-size: 1rem;
      line-height: 1;
    }

    #firstperson-overlay {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      display: none;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      z-index: 100;
    }

    #firstperson-overlay.active {
      display: flex;
    }

    #firstperson-controls-hint {
      background: var(--workbench-chrome-bg);
      color: var(--workbench-chrome-text);
      padding: 10px 20px;
      border-radius: 999px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      font-size: 0.8rem;
      border: 1px solid var(--workbench-chrome-border);
      text-align: center;
      box-shadow: 0 12px 28px rgba(0,0,0,0.22);
      backdrop-filter: blur(14px);
    }
    
    /* Hide keyboard hint on mobile */
    @media (max-width: 768px), (pointer: coarse) {
      #firstperson-controls-hint {
        display: none;
      }
    }

    #firstperson-controls-hint strong {
      color: var(--workbench-gold);
    }
    
    /* Mobile joystick for first-person */
    #mobile-joystick {
      position: absolute;
      bottom: 100px;
      left: 40px;
      width: 120px;
      height: 120px;
      background: var(--workbench-chrome-bg);
      border: 1px solid var(--workbench-chrome-border);
      border-radius: 50%;
      display: none;
      z-index: 101;
      box-shadow: 0 16px 36px rgba(0,0,0,0.24);
      backdrop-filter: blur(14px);
    }
    
    /* Only show on mobile-sized touch devices */
    @media (max-width: 1024px) and (pointer: coarse) {
      #mobile-joystick.active {
        display: block;
      }
    }
    
    /* Never show on desktop regardless of touch */
    @media (min-width: 1025px) {
      #mobile-joystick,
      #mobile-joystick.active {
        display: none !important;
      }
    }
    
    #mobile-joystick-knob {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 50px;
      height: 50px;
      background: var(--workbench-control-active);
      border: 1px solid var(--workbench-accent);
      border-radius: 50%;
      box-shadow: 0 8px 18px rgba(0,0,0,0.24);
    }
    
    /* Mobile exit button - larger touch target */
    #mobile-fp-exit {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 60px;
      height: 60px;
      background: var(--workbench-chrome-bg);
      border: 1px solid var(--workbench-chrome-border);
      border-radius: 50%;
      display: none;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      color: var(--workbench-danger);
      z-index: 101;
      cursor: pointer;
      box-shadow: 0 14px 30px rgba(0,0,0,0.24);
      backdrop-filter: blur(14px);
    }
    
    /* Only show on mobile-sized touch devices */
    @media (max-width: 1024px) and (pointer: coarse) {
      #mobile-fp-exit.active {
        display: flex;
      }
    }
    
    /* Never show on desktop regardless of touch */
    @media (min-width: 1025px) {
      #mobile-fp-exit,
      #mobile-fp-exit.active {
        display: none !important;
      }
    }
    
    /* Make workbench buttons touch-friendly on mobile */
    @media (max-width: 768px), (pointer: coarse) {
      .workbench-btn {
        min-width: 44px;
        min-height: 44px;
        padding: 10px 14px;
        font-size: 1rem;
      }
      
      .workbench-slider-group input[type="range"] {
        height: 30px;
      }
      
      .toolbox-room {
        padding: 10px 12px;
        min-height: 44px;
      }
      
      /* Workbench controls bar */
      #workbench-controls {
        padding: 8px 12px;
        gap: 6px;
        flex-wrap: wrap;
      }
      
      #workbench-controls .workbench-btn {
        padding: 8px 10px;
        font-size: 0.85rem;
      }
      
      /* Hide secondary button labels on very small screens. */
      #workbench-controls .workbench-btn span.btn-text {
        display: none;
      }
      
      /* Viz mode buttons */
      .viz-mode-btn {
        min-width: 44px;
        min-height: 44px;
        padding: 8px;
      }
      
      /* Sliders need more height for touch */
      .workbench-slider-group {
        padding: 8px 0;
      }
      
      .workbench-slider-group label {
        font-size: 0.8rem;
      }
    }
    
    /* Mobile workbench full viewport layout */
    @media (max-width: 768px) {
      #workbench-overlay {
        padding: 0;
      }
      
      #workbench-canvas-container {
        flex-direction: column;
      }
      
      /* Compact header for mobile - prioritize mode buttons */
      #workbench-header {
        position: sticky;
        top: 0;
        z-index: 1000;
        padding: 6px 8px;
        gap: 6px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
      
      /* Hide title on mobile to save space */
      #workbench-header h2 {
        display: none;
      }
      
      /* Compact controls */
      #workbench-controls {
        gap: 4px;
        flex-wrap: nowrap;
        flex-shrink: 0;
      }
      
      /* Hide sliders on mobile */
      #workbench-sliders {
        display: none;
      }
      
      /* Hide less important buttons on mobile */
      #workbench-controls .workbench-btn:not(.firstperson):not(.planview) {
        display: none;
      }
      
      /* Force viz mode selector to always be visible */
      #viz-mode-selector {
        display: flex !important;
        gap: 4px;
        flex-shrink: 0;
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        order: -1; /* Show mode buttons first */
      }
      
      /* Ensure all viz mode buttons are visible and touch-friendly */
      .viz-mode-btn {
        display: block !important;
        padding: 12px 16px;
        font-size: 1.1rem;
        min-width: auto;
        touch-action: manipulation;
        -webkit-tap-highlight-color: var(--workbench-control-active);
      }
      
      .viz-mode-btn.active {
        transform: scale(1.05);
        font-weight: bold;
      }
      
      /* Compact other buttons */
      .workbench-btn {
        padding: 6px 8px;
        font-size: 0.85rem;
      }
    }

    /* Compact Workbench chrome overrides the older mobile control treatment. */
    @media (max-width: 1100px) {
      #workbench-header h2 { display: none; }
      .wb-selection-label { max-width: 92px; }
    }

    @media (max-width: 768px) {
      #workbench-header {
        min-height: 48px;
        padding: 5px 7px;
        gap: 5px;
        overflow: visible;
      }

      #viz-mode-selector {
        order: initial;
        gap: 1px;
        padding: 2px;
      }

      #workbench-header .wb-view-btn {
        display: block !important;
        min-width: 0;
        min-height: 34px;
        padding: 7px 9px;
        font-size: 0.78rem;
        transform: none;
        touch-action: manipulation;
      }

      #workbench-header > .scenestyle,
      #workbench-header > .wb-close-btn,
      #workbench-header > .wb-actions > summary {
        min-width: 38px;
        min-height: 38px;
        padding: 6px 8px;
        font-size: 0.76rem;
      }

      #workbench-header > .wb-close-btn { padding: 0; font-size: 1.05rem; }
      .wb-header-spacer { min-width: 0; }

      .wb-selection-controls {
        position: absolute;
        top: calc(100% + 7px);
        left: 50%;
        transform: translateX(-50%);
        max-width: calc(100vw - 20px);
        box-shadow: 0 9px 24px rgba(0,0,0,0.2);
        backdrop-filter: blur(16px);
      }

      .wb-actions-menu {
        position: fixed;
        top: 54px;
        right: 7px;
        width: min(286px, calc(100vw - 14px));
        max-height: calc(100vh - 64px);
      }

      #workbench-actions #workbench-sliders {
        display: flex !important;
      }

      .wb-actions-menu .workbench-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-height: 42px;
        padding: 8px;
        font-size: 0.78rem;
      }

      .wb-actions-menu .workbench-slider-group {
        display: grid;
        grid-template-columns: 78px minmax(82px, 1fr) 34px;
        padding: 0;
      }
    }

    @media (max-width: 430px) {
      #workbench-header .wb-view-btn { padding-inline: 7px; }
      .wb-selection-label { max-width: 82px; }
    }
    
    /* Mobile toolbox - slide-up drawer style */
    @media (max-width: 768px) {
      #workbench-toolbox {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100% !important;
        min-width: 100% !important;
        height: 45%;
        max-height: 50vh;
        border-right: none;
        border-top: 1px solid var(--workbench-chrome-border);
        z-index: 100;
        transition: transform 0.3s ease, opacity 0.3s ease;
      }
      
      #workbench-toolbox.mobile-minimized {
        transform: translateY(calc(100% - 44px));
      }
      
      #workbench-toolbox.mobile-minimized #toolbox-rooms,
      #workbench-toolbox.mobile-minimized #toolbox-search {
        display: none;
      }
      
      #toolbox-header {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      
      #toolbox-header::after {
        content: '⌄';
        font-size: 0.8rem;
        color: var(--workbench-chrome-muted);
        transition: transform 0.3s ease;
      }
      
      #workbench-toolbox.mobile-minimized #toolbox-header::after {
        transform: rotate(180deg);
      }
      
      /* Also minimize legend on mobile */
      #workbench-legend {
        position: absolute;
        top: auto;
        right: 10px;
        bottom: 58px;
        max-width: 150px;
        font-size: 0.75rem;
        max-height: 40vh;
      }

      .workbench-panel-dock {
        top: 8px;
        left: 8px;
        right: 8px;
        justify-content: center;
        overflow-x: auto;
        max-width: calc(100% - 16px);
      }

      #workbench-legend.collapsed {
        max-height: 28px;
        overflow: hidden;
      }
    }

    #firstperson-crosshair {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 20px;
      height: 20px;
      display: none;
      pointer-events: none;
      z-index: 99;
    }

    #firstperson-crosshair.active {
      display: block;
    }

    #firstperson-crosshair::before,
    #firstperson-crosshair::after {
      content: '';
      position: absolute;
      background: rgba(255, 255, 255, 0.7);
    }

    #firstperson-crosshair::before {
      width: 2px;
      height: 100%;
      left: 50%;
      transform: translateX(-50%);
    }

    #firstperson-crosshair::after {
      height: 2px;
      width: 100%;
      top: 50%;
      transform: translateY(-50%);
    }

    #workbench-canvas-container {
      flex: 1;
      position: relative;
      overflow: hidden;
      display: flex;
      background: var(--workbench-bg);
    }

    .workbench-panel-dock {
      position: absolute;
      top: var(--wb-panel-edge);
      right: calc(var(--wb-right-panel-space) + var(--wb-panel-edge));
      z-index: 110;
      display: flex;
      gap: 4px;
      padding: 4px;
      border: 1px solid var(--workbench-chrome-border);
      border-radius: 999px;
      background: var(--workbench-chrome-bg);
      box-shadow: 0 14px 34px rgba(0,0,0,0.2);
      backdrop-filter: blur(18px);
      transition: right 0.22s ease, transform 0.22s ease, opacity 0.22s ease;
    }

    .wb-dock-btn {
      min-height: 30px;
      padding: 6px 10px;
      border: 1px solid transparent;
      border-radius: 999px;
      background: transparent;
      color: var(--workbench-chrome-muted);
      cursor: pointer;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      font-size: 0.72rem;
      font-weight: 650;
      line-height: 1;
      transition: background 0.16s, color 0.16s, border-color 0.16s;
    }

    .wb-dock-btn:hover {
      background: var(--workbench-control-hover);
      color: var(--workbench-chrome-text);
    }

    .wb-dock-btn.active {
      background: var(--workbench-chrome-surface-strong);
      border-color: var(--workbench-chrome-border);
      color: var(--workbench-chrome-text);
      box-shadow: 0 2px 10px rgba(0,0,0,0.14);
    }

    .wb-dock-btn.has-alert {
      border-color: var(--workbench-accent);
    }

    .wb-dock-btn.wb-dock-action {
      border-color: rgba(99, 162, 255, 0.55);
    }
    .wb-dock-btn.wb-dock-action:hover {
      background: rgba(99, 162, 255, 0.18);
      color: #fff;
    }

    /* ───────────────────────────────────────────────────────────
       Ergonomic Mode — design system
       Single accent color, restrained palette, clear hierarchy.
       Rams principles: as little design as possible, honest, durable.
       ─────────────────────────────────────────────────────────── */
    :root {
      --ergo-bg: rgba(14, 19, 26, 0.96);
      --ergo-bg-elev: rgba(28, 36, 48, 0.65);
      --ergo-border: rgba(255, 255, 255, 0.08);
      --ergo-border-strong: rgba(255, 255, 255, 0.16);
      --ergo-text: #eef2f8;
      --ergo-text-muted: rgba(238, 242, 248, 0.55);
      --ergo-text-subtle: rgba(238, 242, 248, 0.4);
      --ergo-accent: #5b9dff;
      --ergo-accent-soft: rgba(91, 157, 255, 0.14);
      --ergo-success: #4ade80;
      --ergo-warning: #ff9533;
      --ergo-error: #ff5468;
      --ergo-radius: 10px;
      --ergo-radius-sm: 6px;
      --ergo-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
      --ergo-font: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
    }

    /* Selection banner — minimal centered pill, used during cube pick */
    .ergo-banner {
      position: absolute;
      top: 16px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 60;
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 10px 16px;
      background: var(--ergo-bg);
      color: var(--ergo-text);
      border: 1px solid var(--ergo-border-strong);
      border-radius: 999px;
      font: 500 12px var(--ergo-font);
      letter-spacing: 0.01em;
      box-shadow: var(--ergo-shadow);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    .ergo-banner-msg { font-weight: 500; }
    .ergo-banner-count { color: var(--ergo-text-muted); font-variant-numeric: tabular-nums; }
    .ergo-banner-count b { color: var(--ergo-text); font-weight: 600; }
    .ergo-banner-btn {
      padding: 6px 14px;
      border-radius: 999px;
      border: 1px solid var(--ergo-border-strong);
      background: transparent;
      color: var(--ergo-text);
      font: 500 12px var(--ergo-font);
      cursor: pointer;
      transition: background 0.18s, border-color 0.18s;
    }
    .ergo-banner-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); }
    .ergo-banner-btn:disabled { opacity: 0.4; cursor: not-allowed; }
    .ergo-banner-btn.ergo-banner-primary {
      background: var(--ergo-accent);
      border-color: var(--ergo-accent);
      color: #fff;
    }
    .ergo-banner-btn.ergo-banner-primary:hover:not(:disabled) {
      background: #6cb4ff;
      border-color: #6cb4ff;
    }

    /* ─── Unified shell sidebar ─── */
    .ergo-shell {
      position: absolute;
      top: 16px;
      left: 16px;
      bottom: 16px;
      width: 320px;
      z-index: 60;
      display: flex;
      flex-direction: column;
      background: var(--ergo-bg);
      color: var(--ergo-text);
      border: 1px solid var(--ergo-border);
      border-radius: var(--ergo-radius);
      box-shadow: var(--ergo-shadow);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      font: 13px/1.5 var(--ergo-font);
      transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
      overflow: hidden;
    }
    .ergo-shell.collapsed {
      transform: translateX(calc(-100% - 16px));
    }
    .ergo-shell-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 20px 14px;
      border-bottom: 1px solid var(--ergo-border);
    }
    .ergo-shell-brand {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .ergo-shell-mark {
      display: inline-block;
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--ergo-accent);
      box-shadow: 0 0 0 3px rgba(91, 157, 255, 0.18);
    }
    .ergo-shell-title {
      font-size: 14px;
      font-weight: 600;
      letter-spacing: -0.01em;
      line-height: 1.2;
    }
    .ergo-shell-sub {
      font-size: 11px;
      color: var(--ergo-text-muted);
      margin-top: 2px;
      font-variant-numeric: tabular-nums;
    }

    .ergo-icon-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px; height: 28px;
      padding: 0;
      background: transparent;
      border: 1px solid transparent;
      border-radius: var(--ergo-radius-sm);
      color: var(--ergo-text-muted);
      font-size: 18px;
      line-height: 1;
      cursor: pointer;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }
    .ergo-icon-btn:hover {
      background: rgba(255, 255, 255, 0.06);
      color: var(--ergo-text);
      border-color: var(--ergo-border);
    }

    .ergo-shell-tabs {
      display: flex;
      padding: 0 12px;
      border-bottom: 1px solid var(--ergo-border);
      gap: 0;
    }
    .ergo-shell-tab {
      flex: 1;
      padding: 12px 8px;
      background: transparent;
      border: none;
      color: var(--ergo-text-muted);
      font: 500 12px var(--ergo-font);
      letter-spacing: 0.01em;
      cursor: pointer;
      border-bottom: 2px solid transparent;
      transition: color 0.15s, border-color 0.15s;
    }
    .ergo-shell-tab:hover { color: var(--ergo-text); }
    .ergo-shell-tab.active {
      color: var(--ergo-text);
      border-bottom-color: var(--ergo-accent);
    }

    .ergo-shell-body {
      flex: 1;
      overflow-y: auto;
      padding: 18px 20px;
    }
    .ergo-shell-section { display: flex; flex-direction: column; gap: 12px; }
    .ergo-shell-section[hidden] { display: none; }

    .ergo-shell-footer {
      padding: 12px 20px 14px;
      border-top: 1px solid var(--ergo-border);
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .ergo-status {
      font-size: 12px;
      color: var(--ergo-text-muted);
    }
    .ergo-result {
      font: 11px/1.4 ui-monospace, 'SF Mono', Menlo, monospace;
      color: var(--ergo-text-muted);
      letter-spacing: 0.01em;
    }
    .ergo-result.ergo-pass { color: var(--ergo-success); }
    .ergo-result.ergo-fail { color: var(--ergo-error); }

    /* Floating action bar (top-right) */
    .ergo-floatbar {
      position: absolute;
      top: 16px;
      right: 16px;
      z-index: 60;
      display: flex;
      gap: 4px;
      padding: 4px;
      background: var(--ergo-bg);
      border: 1px solid var(--ergo-border);
      border-radius: var(--ergo-radius-sm);
      box-shadow: var(--ergo-shadow);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    /* ─── Common primitives in the shell ─── */
    .ergo-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .ergo-row-between { justify-content: space-between; }
    .ergo-eyebrow {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ergo-text-muted);
    }
    .ergo-muted { color: var(--ergo-text-subtle); font-weight: 400; text-transform: none; letter-spacing: 0; }
    .ergo-divider {
      height: 1px;
      background: var(--ergo-border);
      margin: 4px 0;
    }
    .ergo-hint {
      font-size: 11px;
      color: var(--ergo-text-subtle);
      line-height: 1.5;
      padding-top: 4px;
    }

    .ergo-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 7px 14px;
      background: transparent;
      border: 1px solid var(--ergo-border-strong);
      border-radius: var(--ergo-radius-sm);
      color: var(--ergo-text);
      font: 500 12px var(--ergo-font);
      letter-spacing: 0.01em;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
      white-space: nowrap;
    }
    .ergo-btn:hover:not(:disabled) {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.24);
    }
    .ergo-btn:disabled { opacity: 0.4; cursor: not-allowed; }
    .ergo-btn-primary {
      background: var(--ergo-accent);
      border-color: var(--ergo-accent);
      color: #fff;
    }
    .ergo-btn-primary:hover:not(:disabled) {
      background: #6cb4ff;
      border-color: #6cb4ff;
    }
    .ergo-btn-ghost {
      border-color: transparent;
      color: var(--ergo-text-muted);
    }
    .ergo-btn-ghost:hover:not(:disabled) {
      color: var(--ergo-text);
      background: rgba(255, 255, 255, 0.06);
    }
    .ergo-btn-block { width: 100%; }

    .ergo-field {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .ergo-field span {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--ergo-text-muted);
    }
    .ergo-field select,
    .ergo-select-block {
      padding: 8px 10px;
      background: var(--ergo-bg-elev);
      color: var(--ergo-text);
      border: 1px solid var(--ergo-border-strong);
      border-radius: var(--ergo-radius-sm);
      font: 13px var(--ergo-font);
      cursor: pointer;
      width: 100%;
      transition: border-color 0.15s;
    }
    .ergo-field select:hover,
    .ergo-select-block:hover {
      border-color: rgba(255, 255, 255, 0.32);
    }
    .ergo-field select:focus,
    .ergo-select-block:focus {
      outline: none;
      border-color: var(--ergo-accent);
    }

    /* Custom toggle: replaces native checkbox with a clean pill */
    .ergo-toggle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 6px 0;
      cursor: pointer;
      font-size: 13px;
      color: var(--ergo-text);
    }
    .ergo-toggle input { display: none; }
    .ergo-toggle span {
      flex: 1;
    }
    .ergo-toggle::after {
      content: '';
      width: 28px; height: 16px;
      background: rgba(255, 255, 255, 0.12);
      border-radius: 999px;
      position: relative;
      transition: background 0.18s;
      flex-shrink: 0;
    }
    .ergo-toggle::before {
      content: '';
      width: 12px; height: 12px;
      background: #fff;
      border-radius: 50%;
      position: absolute;
      right: 14px;
      transform: translateY(0);
      transition: right 0.18s;
      z-index: 1;
    }
    .ergo-toggle { position: relative; }
    .ergo-toggle:has(input:checked)::after { background: var(--ergo-accent); }
    .ergo-toggle:has(input:checked)::before { right: 2px; }

    /* Pegmen list */
    .ergo-pegmen-list {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin-top: 4px;
    }
    .ergo-pegmen-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      border-radius: var(--ergo-radius-sm);
      cursor: pointer;
      transition: background 0.15s;
      border: 1px solid transparent;
    }
    .ergo-pegmen-row:hover { background: rgba(255, 255, 255, 0.04); }
    .ergo-pegmen-row.active {
      background: var(--ergo-accent-soft);
      border-color: rgba(91, 157, 255, 0.4);
    }
    .ergo-pegmen-row.conflict {
      border-color: rgba(255, 84, 104, 0.55);
    }
    .ergo-pegmen-swatch {
      width: 12px; height: 12px;
      border-radius: 50%;
      border: 1px solid rgba(0, 0, 0, 0.4);
      flex-shrink: 0;
    }
    .ergo-pegmen-name {
      flex: 1;
      font-size: 13px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .ergo-pegmen-meta {
      font-size: 11px;
      color: var(--ergo-text-muted);
      font-variant-numeric: tabular-nums;
    }
    .ergo-pegmen-rm {
      width: 22px; height: 22px;
      padding: 0;
      background: transparent;
      border: 1px solid transparent;
      color: var(--ergo-text-muted);
      border-radius: 4px;
      font-size: 14px;
      cursor: pointer;
      line-height: 1;
      transition: color 0.15s, background 0.15s;
    }
    .ergo-pegmen-rm:hover {
      background: rgba(255, 84, 104, 0.16);
      color: var(--ergo-error);
    }

    /* Room rows (door flip) */
    /* ── Ergo in-app report modal ── */
    .ergo-report-overlay {
      position: absolute; inset: 0; z-index: 900;
      background: rgba(10,12,18,0.72); backdrop-filter: blur(3px);
      display: flex; align-items: center; justify-content: center;
      padding: 16px; box-sizing: border-box;
    }
    .ergo-report-card {
      background: var(--ergo-surface);
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: var(--ergo-radius-lg, 10px);
      width: 100%; max-width: 680px;
      max-height: calc(100% - 32px);
      display: flex; flex-direction: column;
      overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,0.55);
    }
    .ergo-report-hd {
      display: flex; align-items: center; gap: 10px;
      padding: 14px 16px 10px; border-bottom: 1px solid rgba(255,255,255,0.07);
      flex-shrink: 0;
    }
    .ergo-report-hd h2 {
      flex: 1; margin: 0; font-size: 15px; font-weight: 600;
      color: var(--ergo-text);
    }
    .ergo-report-hd-meta {
      font-size: 11px; color: var(--ergo-text-muted); flex-shrink: 0;
    }
    .ergo-report-close {
      background: none; border: none; color: var(--ergo-text-muted);
      font-size: 18px; cursor: pointer; padding: 0 4px; line-height: 1;
      flex-shrink: 0;
    }
    .ergo-report-close:hover { color: var(--ergo-text); }
    .ergo-report-body {
      flex: 1; overflow-y: auto; padding: 14px 16px;
      display: flex; flex-direction: column; gap: 16px;
    }
    /* Stat summary cards */
    .ergo-stat-row {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
    }
    .ergo-stat-box {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: var(--ergo-radius-sm, 6px);
      padding: 10px 8px; text-align: center;
    }
    .ergo-stat-val {
      font-size: 22px; font-weight: 700; letter-spacing: -0.5px;
      color: var(--ergo-text);
    }
    .ergo-stat-val.pass  { color: #4ade80; }
    .ergo-stat-val.warn  { color: #fbbf24; }
    .ergo-stat-val.fail  { color: #ef4444; }
    .ergo-stat-lbl {
      font-size: 10px; color: var(--ergo-text-muted);
      text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px;
    }
    /* Section headers */
    .ergo-report-section-title {
      font-size: 11px; font-weight: 600; text-transform: uppercase;
      letter-spacing: 0.06em; color: var(--ergo-text-muted);
      padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,0.06);
      margin-bottom: 6px;
    }
    /* Data tables */
    .ergo-report-tbl {
      width: 100%; border-collapse: collapse; font-size: 12px;
    }
    .ergo-report-tbl th {
      text-align: left; padding: 4px 6px; font-size: 10px;
      font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
      color: var(--ergo-text-muted); border-bottom: 1px solid rgba(255,255,255,0.07);
    }
    .ergo-report-tbl td {
      padding: 5px 6px; color: var(--ergo-text);
      border-bottom: 1px solid rgba(255,255,255,0.04);
    }
    .ergo-report-tbl tr:last-child td { border-bottom: none; }
    .ergo-report-tbl .rpt-pass { color: #4ade80; font-weight: 600; }
    .ergo-report-tbl .rpt-warn { color: #fbbf24; font-weight: 600; }
    .ergo-report-tbl .rpt-fail { color: #ef4444; font-weight: 600; }
    .ergo-report-tbl .rpt-swatch {
      display: inline-block; width: 9px; height: 9px;
      border-radius: 50%; margin-right: 5px; vertical-align: middle;
    }
    /* Risk pill */
    .ergo-risk-pill {
      display: inline-block; font-size: 10px; font-weight: 700;
      padding: 1px 6px; border-radius: 20px; text-transform: uppercase;
    }
    .ergo-risk-high   { background: rgba(239,68,68,0.18);  color: #ef4444; }
    .ergo-risk-medium { background: rgba(251,191,36,0.18); color: #fbbf24; }
    .ergo-risk-low    { background: rgba(74,222,128,0.18); color: #4ade80; }
    .ergo-risk-none   { background: rgba(74,222,128,0.10); color: #4ade80; }
    /* Footer */
    .ergo-report-ft {
      display: flex; gap: 8px; justify-content: flex-end;
      padding: 10px 16px 12px; border-top: 1px solid rgba(255,255,255,0.07);
      flex-shrink: 0;
    }

    .ergo-rooms-list {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .ergo-room-row {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 5px 8px;
      border-radius: var(--ergo-radius-sm);
      border: 1px solid rgba(255,255,255,0.06);
      background: rgba(255,255,255,0.02);
    }
    .ergo-room-name {
      flex: 1;
      font-size: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--ergo-text);
    }
    .ergo-room-door-badge {
      font-size: 11px;
      color: var(--ergo-text-muted);
      font-variant-numeric: tabular-nums;
      flex-shrink: 0;
    }
    .ergo-btn-sm {
      font-size: 11px;
      padding: 2px 7px;
      height: auto;
      line-height: 1.5;
      flex-shrink: 0;
    }

    /* Workflow lists */
    .ergo-wf-list {
      display: flex;
      flex-direction: column;
      gap: 2px;
      max-height: 200px;
      overflow-y: auto;
      border: 1px solid var(--ergo-border);
      border-radius: var(--ergo-radius-sm);
      padding: 4px;
    }
    .ergo-wf-list:empty::after {
      content: 'None';
      display: block;
      padding: 12px;
      text-align: center;
      color: var(--ergo-text-subtle);
      font-size: 12px;
      font-style: italic;
    }
    .ergo-wf-tasks { background: rgba(91, 157, 255, 0.04); }
    .ergo-wf-item, .ergo-wf-task {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 8px;
      border-radius: 4px;
      font-size: 12px;
      transition: background 0.15s;
    }
    .ergo-wf-item:hover, .ergo-wf-task:hover {
      background: rgba(255, 255, 255, 0.04);
    }
    .ergo-wf-item-name, .ergo-wf-task-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ergo-wf-item-room { color: var(--ergo-text-subtle); font-size: 10px; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ergo-wf-add, .ergo-wf-up, .ergo-wf-dn, .ergo-wf-rm {
      width: 22px; height: 22px;
      padding: 0;
      background: transparent;
      border: 1px solid transparent;
      color: var(--ergo-text-muted);
      border-radius: 4px;
      font-size: 11px;
      cursor: pointer;
      line-height: 1;
      transition: background 0.15s, color 0.15s;
    }
    .ergo-wf-add:hover { background: var(--ergo-accent-soft); color: var(--ergo-accent); border-color: rgba(91, 157, 255, 0.3); }
    .ergo-wf-up:hover, .ergo-wf-dn:hover { background: rgba(255, 255, 255, 0.06); color: var(--ergo-text); }
    .ergo-wf-rm:hover { background: rgba(255, 84, 104, 0.16); color: var(--ergo-error); }
    .ergo-wf-task-num { color: var(--ergo-text-subtle); min-width: 18px; font-variant-numeric: tabular-nums; }
    .ergo-wf-task-type {
      padding: 2px 6px;
      background: rgba(255, 255, 255, 0.06);
      color: var(--ergo-text-muted);
      border: 1px solid var(--ergo-border);
      border-radius: 3px;
      font-size: 10px;
    }

    /* Compliance */
    .ergo-compliance-summary {
      padding: 10px 12px;
      font-size: 12px;
      border-radius: var(--ergo-radius-sm);
      background: rgba(255, 255, 255, 0.04);
      color: var(--ergo-text-muted);
      font-variant-numeric: tabular-nums;
    }
    .ergo-compliance-summary.all-pass {
      background: rgba(74, 222, 128, 0.10);
      color: #c5e7d2;
    }
    .ergo-compliance-summary.has-fail {
      background: rgba(255, 84, 104, 0.10);
      color: #f5c2c8;
    }
    .ergo-compliance-list {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .ergo-compliance-empty {
      padding: 24px 8px;
      text-align: center;
      color: var(--ergo-text-subtle);
      font-size: 12px;
      font-style: italic;
      line-height: 1.5;
    }
    .ergo-compliance-row {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 10px;
      border-radius: var(--ergo-radius-sm);
      cursor: pointer;
      transition: background 0.15s;
    }
    .ergo-compliance-row:hover { background: rgba(255, 255, 255, 0.04); }
    .ergo-compliance-row.fail-major { background: rgba(255, 84, 104, 0.08); }
    .ergo-compliance-row.fail-minor { background: rgba(255, 149, 51, 0.08); }
    .ergo-compliance-icon {
      width: 18px;
      flex-shrink: 0;
      text-align: center;
      font-weight: 700;
      font-size: 13px;
      line-height: 18px;
    }
    .ergo-compliance-row.pass .ergo-compliance-icon { color: var(--ergo-success); }
    .ergo-compliance-row.fail-major .ergo-compliance-icon { color: var(--ergo-error); }
    .ergo-compliance-row.fail-minor .ergo-compliance-icon { color: var(--ergo-warning); }
    .ergo-compliance-info { flex: 1; min-width: 0; }
    .ergo-compliance-label { font-weight: 500; font-size: 12px; line-height: 1.3; }
    .ergo-compliance-msg { font-size: 11px; color: var(--ergo-text-muted); margin-top: 2px; line-height: 1.4; }
    .ergo-compliance-code { font-size: 10px; color: var(--ergo-text-subtle); margin-top: 2px; font-variant-numeric: tabular-nums; }

    /* Per-instance dimension override panel */
    .ergo-override-panel {
      position: fixed;
      z-index: 80;
      width: 220px;
      padding: 14px 16px;
      background: var(--ergo-bg);
      color: var(--ergo-text);
      border: 1px solid var(--ergo-border-strong);
      border-radius: var(--ergo-radius);
      font: 12px var(--ergo-font);
      box-shadow: var(--ergo-shadow);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }
    .ergo-override-header {
      font-weight: 600;
      font-size: 13px;
      margin-bottom: 4px;
    }
    .ergo-override-source {
      font-size: 10px;
      color: var(--ergo-text-subtle);
      margin-bottom: 12px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .ergo-override-source em { font-style: normal; color: var(--ergo-text-muted); }
    .ergo-override-row { margin-bottom: 8px; }
    .ergo-override-row label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      font-size: 12px;
      color: var(--ergo-text-muted);
    }
    .ergo-override-row input {
      width: 80px;
      padding: 5px 8px;
      background: var(--ergo-bg-elev);
      color: var(--ergo-text);
      border: 1px solid var(--ergo-border-strong);
      border-radius: 4px;
      font: 12px var(--ergo-font);
      text-align: right;
      font-variant-numeric: tabular-nums;
    }
    .ergo-override-row input:focus {
      outline: none;
      border-color: var(--ergo-accent);
    }
    .ergo-override-actions {
      display: flex;
      gap: 6px;
      padding-top: 10px;
      border-top: 1px solid var(--ergo-border);
      margin-top: 10px;
    }

    /* Workbench dock — restyle "Ergo" button to match the system */
    .wb-dock-btn.wb-dock-action {
      border-color: rgba(91, 157, 255, 0.4);
      color: rgba(255, 255, 255, 0.85);
    }
    .wb-dock-btn.wb-dock-action:hover {
      background: var(--ergo-accent-soft);
      color: #fff;
    }

    @media (max-width: 768px) {
      .workbench-panel-dock {
        top: 8px;
        left: 8px;
        right: 8px;
        justify-content: center;
        overflow-x: auto;
        max-width: calc(100% - 16px);
      }
    }

    #workbench-toolbox {
      width: 292px;
      min-width: 292px;
      flex-shrink: 0;
      background: var(--workbench-chrome-surface);
      border-right: 1px solid var(--workbench-chrome-border);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      transition: width 0.3s ease, min-width 0.3s ease, opacity 0.3s ease;
      pointer-events: auto;
      opacity: 1;
      color: var(--workbench-chrome-text);
      backdrop-filter: blur(18px);
    }

    #workbench-toolbox.collapsed {
      width: 0;
      min-width: 0;
      opacity: 0;
      border-right: none;
      pointer-events: none;
    }
    
    #toolbox-header {
      padding: 14px 14px 12px;
      background: transparent;
      border-bottom: 1px solid var(--workbench-chrome-border);
    }

    #toolbox-header h3 {
      margin: 0;
      color: var(--workbench-chrome-text);
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      font-size: 0.84rem;
      font-weight: 650;
      letter-spacing: 0;
    }

    .toolbox-hint {
      color: var(--workbench-chrome-muted);
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      font-size: 0.72rem;
      line-height: 1.35;
      margin-top: 5px;
    }

    #toolbox-search {
      width: 100%;
      padding: 8px 11px;
      margin-top: 12px;
      background: var(--workbench-control-bg);
      border: 1px solid var(--workbench-chrome-border);
      border-radius: 999px;
      color: var(--workbench-chrome-text);
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      font-size: 0.82rem;
      outline: none;
    }

    #toolbox-search:focus {
      border-color: var(--workbench-accent);
      background: var(--workbench-chrome-surface-strong);
    }

    #toolbox-search::placeholder {
      color: var(--workbench-chrome-muted);
    }
    
    #toolbox-rooms {
      flex: 1;
      overflow-y: auto;
      padding: 10px 10px 8px;
    }

    .toolbox-department {
      margin-bottom: 8px;
    }

    .toolbox-dept-header {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 9px;
      background: transparent;
      border: 1px solid transparent;
      border-radius: 7px;
      cursor: pointer;
      transition: background 0.16s, border-color 0.16s;
    }

    .toolbox-dept-header:hover {
      background: var(--workbench-control-hover);
      border-color: var(--workbench-chrome-border);
    }
    
    .toolbox-dept-color {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 1px solid var(--workbench-chrome-border);
    }

    .toolbox-dept-name {
      flex: 1;
      color: var(--workbench-chrome-text);
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      font-size: 0.8rem;
      font-weight: 650;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .toolbox-dept-count {
      color: var(--workbench-chrome-muted);
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      font-size: 0.7rem;
      padding: 2px 7px;
      background: var(--workbench-control-bg);
      border: 1px solid var(--workbench-chrome-border);
      border-radius: 999px;
    }

    .toolbox-dept-toggle {
      color: var(--workbench-chrome-muted);
      font-size: 0.72rem;
    }
    
    .toolbox-room-list {
      padding-left: 8px;
      margin-top: 4px;
      display: none;
    }
    
    .toolbox-room-list.expanded {
      display: block;
    }
    
    .toolbox-fa-group {
      margin-bottom: 8px;
    }
    
    .toolbox-fa-header {
      font-size: 0.68rem;
      color: var(--workbench-chrome-muted);
      padding: 8px 8px 4px;
      background: transparent;
      border-left: none;
      margin: 2px 0;
      letter-spacing: 0;
    }

    .toolbox-room {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 7px 8px;
      margin: 2px 0;
      background: transparent;
      border: 1px solid transparent;
      border-radius: 7px;
      cursor: pointer;
      transition: background 0.16s, border-color 0.16s, opacity 0.16s;
    }

    .toolbox-room:hover {
      background: var(--workbench-control-hover);
      border-color: var(--workbench-chrome-border);
    }

    .toolbox-room.selected {
      background: var(--workbench-control-active);
      border-color: var(--workbench-accent);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
    }
    
    .toolbox-room.placed {
      opacity: 0.4;
      cursor: default;
    }
    
    .toolbox-room-preview {
      width: 24px;
      height: 24px;
      border-radius: 6px;
      border: 1px solid var(--workbench-chrome-border);
      flex-shrink: 0;
    }
    
    .toolbox-room-info {
      flex: 1;
      min-width: 0;
    }
    
    .toolbox-room-name {
      color: var(--workbench-chrome-text);
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      font-size: 0.75rem;
      font-weight: 550;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .toolbox-room-nsf {
      color: var(--workbench-chrome-muted);
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      font-size: 0.67rem;
    }

    .toolbox-room-check {
      color: var(--success);
      font-size: 0.8rem;
    }

    #toolbox-stats {
      padding: 10px 14px;
      background: transparent;
      border-top: 1px solid var(--workbench-chrome-border);
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      font-size: 0.72rem;
      color: var(--workbench-chrome-muted);
    }

    #toolbox-stats span {
      color: var(--workbench-chrome-text);
      font-weight: 650;
    }

    #workbench-canvas {
      flex: 1;
      display: block;
      height: 100%;
      image-rendering: pixelated;
    }

    #workbench-legend {
      position: absolute;
      bottom: 20px;
      right: calc(var(--wb-right-panel-space) + 20px);
      background: var(--workbench-chrome-surface);
      border: 1px solid var(--workbench-chrome-border);
      border-radius: 8px;
      padding: 10px 11px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      color: var(--workbench-chrome-text);
      font-size: 0.72rem;
      max-width: 220px;
      max-height: 280px;
      overflow-y: auto;
      box-shadow: 0 14px 34px rgba(0,0,0,0.22);
      backdrop-filter: blur(18px);
      transform: translateY(0);
      opacity: 1;
      pointer-events: auto;
      transition: right 0.22s ease, opacity 0.18s ease, transform 0.18s ease, max-height 0.18s ease;
    }

    #workbench-legend.wb-panel-hidden {
      opacity: 0;
      transform: translateY(10px);
      pointer-events: none;
    }

    #workbench-legend.collapsed {
      max-height: 32px;
      overflow: hidden;
    }

    #workbench-legend h4 {
      margin: 0 0 8px 0;
      color: var(--workbench-chrome-text);
      font-size: 0.72rem;
      font-weight: 650;
      cursor: pointer;
      user-select: none;
      letter-spacing: 0;
    }

    #workbench-legend h4:hover {
      color: var(--workbench-accent);
    }

    .legend-section {
      margin-bottom: 10px;
    }

    .legend-section:last-child {
      margin-bottom: 0;
    }
    
    .legend-section strong {
      font-size: 0.68rem;
      display: block;
      margin-bottom: 4px;
      color: var(--workbench-chrome-muted);
      font-weight: 650;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
      margin: 4px 0;
      font-size: 0.68rem;
      color: var(--workbench-chrome-text);
    }

    .legend-color-box {
      width: 16px;
      height: 16px;
      border: 1px solid var(--workbench-chrome-border);
      border-radius: 5px;
      flex-shrink: 0;
    }

    .legend-pattern-box {
      width: 16px;
      height: 16px;
      border: 1px solid var(--workbench-chrome-border);
      border-radius: 5px;
      flex-shrink: 0;
      position: relative;
    }

    .pattern-dots {
      background-image: radial-gradient(circle, #000 2px, transparent 2px);
      background-size: 8px 8px;
    }

    .pattern-diagonal {
      background: repeating-linear-gradient(45deg, transparent, transparent 4px, #000 4px, #000 5px);
    }

    .pattern-crosshatch {
      background: 
        repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(0,0,0,0.5) 4px, rgba(0,0,0,0.5) 5px),
        repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba(0,0,0,0.5) 4px, rgba(0,0,0,0.5) 5px);
    }

    .pattern-horizontal {
      background: repeating-linear-gradient(0deg, transparent, transparent 4px, #000 4px, #000 5px);
    }

    .pattern-vertical {
      background: repeating-linear-gradient(90deg, transparent, transparent 4px, #000 4px, #000 5px);
    }
    
    /* Context Menu */
    .context-menu {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      font-size: 0.9rem;
    }
    
    .context-menu-item {
      padding: 10px 16px;
      cursor: pointer;
      transition: background 0.2s;
      display: flex;
      align-items: center;
      color: var(--text);
    }
    
    .context-menu-item:hover {
      background: var(--bg-secondary);
    }
    
    .context-menu-item:active {
      background: var(--accent);
      color: white;
    }
    
    .context-menu-separator {
      height: 1px;
      background: var(--border);
      margin: 4px 0;
    }

    /* ── Chip navigation context menu ── */
    .chip-nav-menu {
      position: absolute;
      z-index: 100000;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      box-shadow: 0 6px 20px rgba(0,0,0,0.35);
      min-width: 130px;
      padding: 4px 0;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      font-size: 0.85rem;
      animation: chipMenuFadeIn 0.12s ease-out;
    }
    @keyframes chipMenuFadeIn {
      from { opacity: 0; transform: translateY(-4px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .chip-nav-item {
      padding: 8px 14px;
      cursor: pointer;
      color: var(--text);
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background 0.15s;
      white-space: nowrap;
    }
    .chip-nav-item:first-child { border-radius: 7px 7px 0 0; }
    .chip-nav-item:last-child  { border-radius: 0 0 7px 7px; }
    .chip-nav-item:only-child  { border-radius: 7px; }
    .chip-nav-item:hover {
      background: var(--bg-secondary);
    }
    .chip-nav-item:active {
      background: var(--accent);
      color: white;
    }
    
    /* Room list plus button */
    .room-list-add-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 12px;
      margin-top: 8px;
      border: 2px dashed var(--border);
      border-radius: 6px;
      background: transparent;
      color: var(--accent);
      cursor: pointer;
      transition: all 0.2s;
      font-size: 0.9rem;
      font-weight: 600;
    }
    
    .room-list-add-btn:hover {
      background: var(--bg-secondary);
      border-color: var(--accent);
      transform: translateY(-1px);
    }
    
    .room-list-add-btn:active {
      transform: translateY(0);
    }

    /* Round checkbox styles for equipment and attribute selection */
    .eq-select-cb,
    .attr-select-cb {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      width: 18px;
      height: 18px;
      border: 2px solid var(--border);
      border-radius: 50%;
      background: var(--input-bg);
      cursor: pointer;
      position: relative;
      transition: all 0.2s;
      flex-shrink: 0;
    }

    .eq-select-cb:hover,
    .attr-select-cb:hover {
      border-color: var(--accent);
    }

    .eq-select-cb:checked,
    .attr-select-cb:checked {
      background: var(--accent);
      border-color: var(--accent);
    }

    .eq-select-cb:checked::after,
    .attr-select-cb:checked::after {
      content: '';
      position: absolute;
      width: 8px;
      height: 8px;
      background: white;
      border-radius: 50%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    /* Hide checkboxes by default - only show in selection mode */
    .eq-select-cb,
    .attr-select-cb {
      display: none;
    }

    body.equipment-selection-mode .eq-select-cb,
    body.attribute-selection-mode .attr-select-cb {
      display: inline-block;
    }

    /* Room type rows in the FA/Department detail views: one compact grid row per room
       type, row checkboxes always visible (no separate "selection mode" needed). */
    .fa-room-row-header > div {
      font-size: 0.65rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      color: var(--muted);
      padding: 0 0 4px;
      border-bottom: 2px solid var(--border);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .fa-room-row > * {
      padding: 3px 0;
      border-bottom: 1px solid var(--border);
    }

    .fa-room-row:hover > * {
      background: rgba(100, 100, 100, 0.06);
    }

    /* ========================================
       CONTEXTUAL HELP PANEL
       ======================================== */
    .help-panel {
      position: fixed;
      bottom: 20px;
      right: 20px;
      width: 380px;
      max-height: 520px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 16px;
      box-shadow: 0 8px 32px var(--card-shadow);
      z-index: 10000;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      animation: helpPanelSlideIn 0.25s ease-out;
      font-size: 0.9rem;
    }

    @keyframes helpPanelSlideIn {
      from { opacity: 0; transform: translateY(20px) scale(0.95); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    .help-panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 16px;
      background: linear-gradient(135deg, #fdcb6e 0%, #e17055 100%);
      color: #2d3436;
      flex-shrink: 0;
    }

    .help-panel-header h3 {
      font-weight: 700;
      color: #2d3436;
    }

    .help-nav-btn {
      background: rgba(0, 0, 0, 0.15);
      border: none;
      border-radius: 6px;
      width: 28px;
      height: 28px;
      cursor: pointer;
      font-size: 0.85rem;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #2d3436;
      transition: background 0.15s;
    }

    .help-nav-btn:hover {
      background: rgba(0, 0, 0, 0.25);
    }

    .help-panel-search {
      padding: 8px 12px;
      border-bottom: 1px solid var(--border, #444);
      flex-shrink: 0;
    }

    .help-panel-search input {
      width: 100%;
      padding: 8px 12px;
      border-radius: 8px;
      border: 1px solid var(--border, #444);
      background: var(--input-bg, #1e1e1e);
      color: var(--text, #eee);
      font-size: 0.85rem;
      outline: none;
    }

    .help-panel-search input:focus {
      border-color: #fdcb6e;
    }

    .help-panel-body {
      overflow-y: auto;
      padding: 12px;
      flex: 1;
      min-height: 0;
    }

    .help-context-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 10px;
      background: rgba(253, 203, 110, 0.15);
      border: 1px solid rgba(253, 203, 110, 0.3);
      border-radius: 20px;
      font-size: 0.75rem;
      color: #fdcb6e;
      margin-bottom: 12px;
    }

    .help-topic-card {
      padding: 10px 12px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid var(--border, #444);
      border-radius: 10px;
      margin-bottom: 8px;
      cursor: pointer;
      transition: all 0.15s;
    }

    .help-topic-card:hover {
      background: rgba(253, 203, 110, 0.08);
      border-color: rgba(253, 203, 110, 0.3);
    }

    .help-topic-card .topic-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 600;
      font-size: 0.85rem;
      color: var(--text, #eee);
    }

    .help-topic-card .topic-preview {
      margin-top: 4px;
      font-size: 0.78rem;
      color: var(--muted, #999);
      line-height: 1.4;
    }

    .help-detail-content {
      line-height: 1.6;
      font-size: 0.84rem;
      color: var(--text, #ddd);
    }

    .help-detail-content h4 {
      margin: 14px 0 6px;
      font-size: 0.9rem;
      color: #fdcb6e;
    }

    .help-detail-content p {
      margin: 6px 0;
    }

    .help-detail-content ul, .help-detail-content ol {
      padding-left: 20px;
      margin: 6px 0;
    }

    .help-detail-content li {
      margin: 4px 0;
    }

    .help-detail-content code {
      background: rgba(255, 255, 255, 0.08);
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 0.8rem;
      color: #fdcb6e;
    }

    .help-detail-content .help-step {
      display: flex;
      gap: 10px;
      padding: 8px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .help-detail-content .step-num {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: linear-gradient(135deg, #fdcb6e, #e17055);
      color: #2d3436;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 0.75rem;
      flex-shrink: 0;
    }

    .help-back-btn {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 10px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid var(--border, #444);
      border-radius: 6px;
      color: var(--muted, #999);
      font-size: 0.78rem;
      cursor: pointer;
      margin-bottom: 10px;
      transition: all 0.15s;
    }

    .help-back-btn:hover {
      background: rgba(255, 255, 255, 0.1);
      color: var(--text, #eee);
    }

    .help-tip-box {
      padding: 10px 12px;
      background: rgba(253, 203, 110, 0.1);
      border: 1px solid color-mix(in srgb, #fdcb6e 45%, var(--border));
      border-radius: 8px;
      margin: 8px 0;
      font-size: 0.82rem;
    }

    .help-tip-box strong {
      color: #fdcb6e;
    }

    /* Hide undo FAB on desktop - desktop users have Ctrl+Z */
    @media (min-width: 769px) {
      #undo-fab {
        display: none !important;
      }
    }

    /* Tablet positioning - keep on right side but adjust spacing */
    @media (min-width: 481px) and (max-width: 768px) {
      #undo-fab {
        bottom: 20px !important;
        right: 20px !important;
      }
    }

    @media (max-width: 480px) {
      .help-panel {
        width: calc(100vw - 20px);
        right: 10px;
        bottom: 10px;
        max-height: 60vh;
      }

      /* Move undo FAB to left side on mobile to avoid conflict with help panel */
      #undo-fab {
        left: 16px !important;
        right: auto !important;
        bottom: 80px !important;
        width: 44px !important;
        height: 44px !important;
        font-size: 1.1rem !important;
      }
    }

    /* ============================================
       Drawing Overlay Controls Panel
       ============================================ */
    .drawing-controls-panel {
      position: absolute;
      top: 60px;
      right: calc(var(--wb-right-panel-space) + var(--wb-panel-edge));
      width: min(224px, calc(100% - 28px));
      max-height: calc(100% - 96px);
      background: var(--workbench-panel-bg);
      border: 1px solid var(--workbench-panel-border);
      border-radius: 8px;
      padding: 0;
      z-index: 100;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      color: var(--workbench-panel-text);
      box-shadow: 0 12px 34px var(--workbench-panel-shadow);
      display: none;
      backdrop-filter: blur(8px);
      overflow: hidden;
      flex-direction: column;
    }

    .drawing-controls-panel.is-open {
      display: flex;
    }

    .drawing-panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 10px;
      background: var(--accent-faint);
      border-bottom: 1px solid var(--workbench-panel-control-border);
      font-weight: bold;
      font-size: 0.78rem;
      color: var(--workbench-accent);
      border-radius: 6px 6px 0 0;
      gap: 8px;
    }

    .drawing-panel-title {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .drawing-panel-close {
      background: var(--workbench-panel-control-bg);
      border: 1px solid var(--workbench-panel-control-border);
      color: var(--workbench-panel-muted);
      min-width: 48px;
      height: 24px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 0.68rem;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.16s, color 0.16s, border-color 0.16s;
    }
    .drawing-panel-close:hover {
      background: var(--overlay-hover);
      color: var(--workbench-panel-text);
    }

    .drawing-panel-filename {
      padding: 6px 10px;
      font-size: 0.75rem;
      color: var(--workbench-panel-muted);
      border-bottom: 1px solid var(--border-subtle);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .drawing-panel-body {
      overflow: auto;
      min-height: 0;
    }

    .drawing-control-group {
      padding: 7px 10px;
      border-bottom: 1px solid var(--border-subtle);
    }

    .drawing-control-group label {
      display: block;
      font-size: 0.75rem;
      color: var(--workbench-panel-muted);
      margin-bottom: 4px;
    }

    .drawing-input-row {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .drawing-control-group input[type="number"] {
      width: 80px;
      padding: 4px 8px;
      background: var(--workbench-panel-control-bg);
      border: 1px solid var(--workbench-panel-control-border);
      border-radius: 4px;
      color: var(--workbench-panel-text);
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      font-size: 0.85rem;
    }
    .drawing-control-group input[type="number"]:focus {
      border-color: var(--workbench-accent);
      outline: none;
      box-shadow: 0 0 0 2px var(--accent-faint);
    }

    .drawing-unit {
      font-size: 0.75rem;
      color: var(--workbench-panel-muted);
    }

    .drawing-control-group select {
      width: 100%;
      padding: 4px 8px;
      background: var(--workbench-panel-control-bg);
      border: 1px solid var(--workbench-panel-control-border);
      border-radius: 4px;
      color: var(--workbench-panel-text);
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      font-size: 0.8rem;
      cursor: pointer;
    }
    .drawing-control-group select:focus {
      border-color: var(--workbench-accent);
      outline: none;
    }
    .drawing-control-group select option {
      background: var(--panel-elevated);
      color: var(--text);
    }

    .drawing-control-group input[type="range"] {
      width: 100%;
      height: 4px;
      -webkit-appearance: none;
      appearance: none;
      background: var(--workbench-panel-control-bg);
      border-radius: 2px;
      outline: none;
      margin-top: 4px;
    }
    .drawing-control-group input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 14px;
      height: 14px;
      background: var(--workbench-accent);
      border-radius: 50%;
      cursor: pointer;
      box-shadow: 0 0 6px var(--accent-glow);
    }

    .drawing-button-row {
      display: flex;
      gap: 4px;
      padding: 8px 10px;
    }

    .drawing-btn {
      flex: 1;
      padding: 6px 4px;
      background: var(--workbench-panel-control-bg);
      border: 1px solid var(--workbench-panel-control-border);
      color: var(--workbench-accent);
      border-radius: 4px;
      cursor: pointer;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      font-size: 0.7rem;
      text-align: center;
      transition: all 0.2s;
      white-space: nowrap;
    }
    .drawing-btn:hover {
      background: var(--overlay-hover);
      border-color: var(--workbench-accent);
    }
    .drawing-btn.active {
      background: var(--accent-light);
      border-color: var(--workbench-accent);
      color: var(--workbench-panel-text);
      box-shadow: 0 0 10px var(--accent-glow);
    }

    .drawing-panel-footer {
      display: flex;
      gap: 6px;
      padding: 8px 10px 10px;
      border-top: 1px solid var(--border-subtle);
    }

    .drawing-panel-action {
      flex: 1;
      min-height: 28px;
      padding: 5px 8px;
      background: var(--workbench-panel-control-bg);
      border: 1px solid var(--workbench-panel-control-border);
      border-radius: 4px;
      color: var(--workbench-panel-text);
      cursor: pointer;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      font-size: 0.7rem;
    }

    .drawing-panel-action:hover {
      background: var(--overlay-hover);
    }

    .drawing-panel-action.danger {
      color: var(--workbench-panel-danger);
      border-color: var(--workbench-panel-danger);
    }

    .drawing-panel-action.danger:hover {
      background: var(--error-faint);
    }

    .drawing-hint {
      padding: 6px 10px 0;
      font-size: 0.65rem;
      color: var(--workbench-panel-muted);
      text-align: center;
      font-style: italic;
    }

    .drawing-panel-chip {
      position: absolute;
      top: 60px;
      right: calc(var(--wb-right-panel-space) + var(--wb-panel-edge));
      z-index: 99;
      display: none;
      align-items: center;
      gap: 8px;
      max-width: min(240px, calc(100% - 28px));
      padding: 7px 10px;
      background: var(--workbench-panel-bg);
      border: 1px solid var(--workbench-panel-border);
      border-radius: 999px;
      box-shadow: 0 10px 24px var(--workbench-panel-shadow);
      color: var(--workbench-panel-text);
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      font-size: 0.72rem;
      backdrop-filter: blur(8px);
      transition: right 0.22s ease, transform 0.22s ease, opacity 0.22s ease;
    }

    .drawing-panel-chip.is-visible {
      display: inline-flex;
    }

    .drawing-panel-chip button {
      border: 0;
      background: transparent;
      color: var(--workbench-accent);
      cursor: pointer;
      font-family: inherit;
      font-size: 0.72rem;
      padding: 0;
    }

    .workbench-btn.drawing-import {
      border-color: var(--workbench-chrome-border);
      color: var(--workbench-chrome-text);
      background: var(--workbench-control-bg);
    }
    .workbench-btn.drawing-import:hover {
      background: var(--workbench-control-hover);
      border-color: var(--workbench-accent);
    }

    .va-reference-plans-panel {
      width: min(310px, calc(100% - 28px));
    }

    .va-reference-panel-body {
      overflow: auto;
      min-height: 0;
      padding: 10px;
    }

    .va-reference-panel-body section + section {
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px solid var(--border-subtle);
    }

    .va-reference-kicker {
      margin: 0 0 8px;
      color: var(--workbench-panel-muted);
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .va-reference-card,
    .va-reference-choice {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      padding: 8px;
      border: 1px solid var(--workbench-panel-control-border);
      border-radius: 6px;
      background: var(--workbench-panel-control-bg);
    }

    .va-reference-card + .va-reference-card,
    .va-reference-choice + .va-reference-choice {
      margin-top: 6px;
    }

    .va-reference-card.is-auto {
      border-color: color-mix(in srgb, var(--workbench-accent) 48%, var(--workbench-panel-control-border));
      background: color-mix(in srgb, var(--workbench-accent) 6%, var(--workbench-panel-control));
    }

    .va-reference-card > div,
    .va-reference-choice > span {
      display: grid;
      gap: 2px;
      min-width: 0;
      flex: 1;
    }

    .va-reference-card strong,
    .va-reference-choice strong {
      color: var(--workbench-panel-text);
      font-size: 0.75rem;
      line-height: 1.25;
    }

    .va-reference-card span,
    .va-reference-card small,
    .va-reference-choice small {
      color: var(--workbench-panel-muted);
      font-size: 0.66rem;
      line-height: 1.35;
    }

    .va-reference-group {
      min-width: 0;
      margin: 0 0 10px;
      padding: 8px;
      border: 1px solid var(--border-subtle);
      border-radius: 7px;
    }

    .va-reference-group legend {
      max-width: 100%;
      padding: 0 4px;
      color: var(--workbench-accent);
      font-size: 0.72rem;
      font-weight: 700;
    }

    .va-reference-choice {
      cursor: pointer;
    }

    .va-reference-choice:has(input:checked) {
      border-color: var(--workbench-accent);
      background: var(--accent-faint);
    }

    .va-reference-choice input {
      margin: 2px 0 0;
      accent-color: var(--workbench-accent);
    }

    .va-reference-note,
    .va-reference-empty {
      margin: 8px 0 0;
      color: var(--workbench-panel-muted);
      font-size: 0.66rem;
      line-height: 1.4;
    }

    /* Mobile adjustments for drawing panel */
    @media (max-width: 768px) {
      .drawing-controls-panel {
        width: min(220px, calc(100% - 10px));
        top: auto;
        bottom: 60px;
        right: 5px;
        font-size: 0.8rem;
      }
      .drawing-panel-chip {
        top: auto;
        bottom: 60px;
        right: 5px;
      }
      .drawing-btn {
        font-size: 0.65rem;
        padding: 5px 3px;
      }
    }

    /* ===========================================
       ITERATION SAVE SLOTS BAR
       =========================================== */
    #iteration-bar {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-left: 8px;
      padding-left: 10px;
      border-left: 1px solid rgba(255,255,255,0.12);
    }

    .iter-label {
      font-size: 0.7rem;
      color: rgba(255, 255, 255, 0.45);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      white-space: nowrap;
      user-select: none;
    }

    .iter-slots {
      display: flex;
      gap: 4px;
      align-items: center;
    }

    .iter-slot {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 3px 8px;
      border: 1px solid var(--border-subtle);
      border-radius: 4px;
      background: var(--overlay-subtle);
      color: var(--muted);
      font-size: 0.72rem;
      font-family: 'Segoe UI', system-ui, sans-serif;
      cursor: pointer;
      transition: all 0.15s ease;
      user-select: none;
      white-space: nowrap;
      min-width: 28px;
      justify-content: center;
    }

    .iter-slot:hover {
      background: var(--overlay-active);
      border-color: var(--overlay-strong);
      color: var(--text);
    }

    .iter-slot.has-data {
      border-color: var(--slot-color, #888);
      border-color: color-mix(in srgb, var(--slot-color, #888) 40%, transparent);
      color: rgba(255, 255, 255, 0.7);
      background: color-mix(in srgb, var(--slot-color, #888) 8%, transparent);
    }

    .iter-slot.has-data:hover {
      background: color-mix(in srgb, var(--slot-color, #888) 18%, transparent);
      border-color: var(--slot-color, #888);
      color: #fff;
    }

    .iter-slot.active {
      border-color: var(--slot-color, #888);
      background: color-mix(in srgb, var(--slot-color, #888) 22%, transparent);
      color: #fff;
      box-shadow: 0 0 8px color-mix(in srgb, var(--slot-color, #888) 30%, transparent);
    }

    .iter-slot.active:hover {
      background: color-mix(in srgb, var(--slot-color, #888) 30%, transparent);
    }

    .iter-slot-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--slot-color, #555);
      flex-shrink: 0;
      opacity: 0.5;
    }

    .iter-slot.has-data .iter-slot-dot {
      opacity: 1;
    }

    .iter-slot.active .iter-slot-dot {
      box-shadow: 0 0 6px var(--slot-color, #888);
    }

    .iter-slot-num {
      font-weight: 600;
      font-size: 0.7rem;
    }

    .iter-slot-name {
      font-size: 0.65rem;
      opacity: 0.7;
      max-width: 60px;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    @media (max-width: 768px) {
      #iteration-bar {
        margin-left: 4px;
        padding-left: 6px;
        gap: 3px;
      }
      .iter-label {
        display: none;
      }
      .iter-slot {
        padding: 3px 5px;
        font-size: 0.65rem;
      }
      .iter-slot-name {
        display: none;
      }
    }

    /* ========================================
       TASKS FEATURE
       ======================================== */

    /* Task list container */
    .task-list {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    /* Individual task card */
    .task-item {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 6px;
      overflow: hidden;
    }

    /* Row inside a task card (checkbox + title + actions) */
    .task-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      position: relative;
    }

    /* Drag handle for tasks */
    .task-drag-handle {
      flex-shrink: 0;
      width: 14px;
      cursor: grab;
      opacity: 0;
      transition: opacity 0.15s;
      font-size: 12px;
      color: var(--muted);
      user-select: none;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .task-drag-handle::before {
      content: '⋮⋮';
      letter-spacing: -3px;
    }
    .task-drag-handle-sm {
      width: 12px;
      font-size: 10px;
    }
    .task-item:hover .task-drag-handle,
    .task-subtask-wrap:hover > .task-row .task-drag-handle {
      opacity: 0.5;
    }
    .task-drag-handle:hover {
      opacity: 1 !important;
    }
    .task-drag-handle:active {
      cursor: grabbing;
    }

    /* Dragging state */
    .task-dragging {
      opacity: 0.4;
    }
    .task-drag-over {
      border-top: 2px solid #80cbc4 !important;
    }

    /* Sub-task rows are indented */
    .task-subtask-list {
      border-top: 1px solid var(--border);
      padding: 0 10px 4px 10px;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .task-subtask-row {
      padding: 5px 0;
      border-bottom: none;
    }

    /* Checkbox bubble — empty state */
    .task-check {
      flex-shrink: 0;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 2px solid #80cbc4;
      background: transparent;
      cursor: pointer;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, border-color 0.15s;
    }

    .task-check:hover {
      border-color: #4db6ac;
      background: rgba(128,203,196,0.12);
    }

    /* Checkbox bubble — completed state */
    .task-check-done {
      background: #80cbc4;
      border-color: #80cbc4;
    }

    .task-check-done::after {
      content: '';
      display: block;
      width: 5px;
      height: 9px;
      border: 2px solid #1a2332;
      border-top: none;
      border-left: none;
      transform: rotate(45deg) translate(-1px, -1px);
    }

    /* Smaller checkbox for sub-tasks */
    .task-check-sm {
      width: 14px;
      height: 14px;
    }

    .task-check-sm.task-check-done::after {
      width: 4px;
      height: 7px;
    }

    /* Task title — flex-item that holds inline text + chips naturally */
    .task-title-area {
      flex: 1;
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .task-title {
      flex: 1;
      cursor: pointer;
      min-width: 0;
      line-height: 1.6;
      font-size: 0.875rem;
      color: var(--text);
      /* No display:flex — inline content flows naturally */
    }

    .task-title:hover .task-title-text {
      color: #80cbc4;
    }

    .task-title-text {
      color: var(--text);
      word-break: break-word;
    }

    /* Sub-task title is slightly smaller */
    .task-subtitle {
      font-size: 0.82rem;
      color: var(--muted);
    }

    /* Strike-through only the text, not the chips */
    .task-done-text {
      text-decoration: line-through;
      opacity: 0.6;
    }

    /* Action buttons on the right of a task row */
    .task-actions {
      display: flex;
      gap: 4px;
      flex-shrink: 0;
      opacity: 0;
      transition: opacity 0.15s;
    }

    .task-row:hover .task-actions {
      opacity: 1;
    }

    .task-btn-add-sub,
    .task-btn-delete {
      background: none;
      border: 1px solid var(--border);
      color: var(--muted);
      border-radius: 4px;
      width: 22px;
      height: 22px;
      font-size: 0.85rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      transition: background 0.1s, color 0.1s;
    }

    .task-btn-add-sub:hover {
      background: rgba(128,203,196,0.15);
      color: #80cbc4;
      border-color: #80cbc4;
    }

    .task-btn-delete:hover {
      background: rgba(239,83,80,0.12);
      color: #ef5350;
      border-color: #ef5350;
    }

    /* Inline text input when editing a task title */
    .task-inline-input {
      flex: 1;
      background: var(--input-bg, var(--bg));
      border: 1px solid #80cbc4;
      border-radius: 3px;
      color: var(--text);
      font-size: 0.875rem;
      padding: 2px 6px;
      width: 100%;
      outline: none;
    }

    /* Contenteditable task inputs */
    [contenteditable].task-new-input,
    [contenteditable].task-inline-input {
      display: inline;
      outline: none;
      border: none;
      background: transparent;
      font-size: inherit;
      color: inherit;
      line-height: inherit;
      min-width: 60px;
      cursor: text;
      white-space: pre-wrap;
      word-break: break-word;
      caret-color: #80cbc4;
    }
    [contenteditable].task-new-input {
      border-bottom: 1.5px dashed #80cbc4;
    }
    [contenteditable].task-new-input:empty::before {
      content: attr(data-placeholder);
      color: var(--muted);
      pointer-events: none;
    }
    [contenteditable].task-inline-input {
      border-bottom: 1.5px solid #80cbc4;
    }

    /* Host span for CE inputs in draft rows */
    .task-ce-host {
      flex: 1;
      min-width: 0;
    }

    /* Chips inside a contenteditable (edit mode) */
    .ce-chip {
      display: inline-flex;
      align-items: center;
      vertical-align: middle;
      border-radius: 10px;
      padding: 1px 7px;
      font-size: 0.76rem;
      line-height: 1.4;
      user-select: none;
      cursor: default;
      white-space: nowrap;
      margin: 0 2px;
    }
    .ce-chip-room {
      background: rgba(128, 203, 196, 0.15);
      border: 1px solid rgba(128, 203, 196, 0.4);
      color: #80cbc4;
    }
    .ce-chip-dept {
      background: rgba(129, 199, 132, 0.15);
      border: 1px solid rgba(129, 199, 132, 0.4);
      color: #a5d6a7;
    }
    .ce-chip-disc {
      background: rgba(179, 157, 219, 0.15);
      border: 1px solid rgba(179, 157, 219, 0.4);
      color: #b39ddb;
    }
    .ce-chip-attr {
      background: rgba(255, 183, 77, 0.15);
      border: 1px solid rgba(255, 183, 77, 0.4);
      color: #ffb74d;
    }
    .ce-chip-attachment {
      background: rgba(66, 165, 245, 0.15);
      border: 1px solid rgba(66, 165, 245, 0.4);
      color: #42a5f5;
    }
    /* Cross-project ref chips in user notes — clickable to navigate */
    .un-ref-chip {
      cursor: pointer;
    }
    .un-ref-chip:hover {
      filter: brightness(1.25);
    }

    /* ── Task attachment chips (rendered in display mode) ── */

    .task-attachment-chip {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 1px 6px;
      border-radius: 4px;
      background: rgba(66, 165, 245, 0.12);
      border: 1px solid rgba(66, 165, 245, 0.35);
      color: #42a5f5;
      font-size: 0.82em;
      cursor: pointer;
      vertical-align: baseline;
      transition: background 0.15s;
    }
    .task-attachment-chip:hover {
      background: rgba(66, 165, 245, 0.25);
    }
    .task-attachment-chip .chip-remove {
      font-size: 0.75em;
      opacity: 0.5;
      cursor: pointer;
      margin-left: 2px;
    }
    .task-attachment-chip .chip-remove:hover {
      opacity: 1;
      color: #ef5350;
    }

    /* ── Task-linked room chips ────────────────────────────── */

    .task-room-chips {
      display: inline;
    }

    .task-room-chips-sub {
      /* same */
    }

    .task-room-chip {
      display: inline-flex;
      align-items: center;
      vertical-align: middle;
      gap: 3px;
      background: rgba(128, 203, 196, 0.1);
      border: 1px solid rgba(128, 203, 196, 0.35);
      border-radius: 12px;
      padding: 1px 6px 1px 8px;
      font-size: 0.76rem;
      color: #80cbc4;
      max-width: 260px;
      margin: 0 2px;
    }

    .task-room-chip-sm {
      font-size: 0.72rem;
      padding: 2px 5px 2px 7px;
    }

    .task-chip-label {
      cursor: pointer;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 160px;
      color: #80cbc4;
    }

    .task-chip-label:hover {
      text-decoration: underline;
    }

    .task-chip-revit,
    .task-chip-remove {
      background: none;
      border: none;
      padding: 0 1px;
      cursor: pointer;
      font-size: 0.78rem;
      line-height: 1;
      color: inherit;
      opacity: 0.6;
      transition: opacity 0.1s;
      flex-shrink: 0;
    }

    .task-chip-revit:hover {
      opacity: 1;
      color: #80cbc4;
    }

    .task-chip-remove:hover {
      opacity: 1;
      color: #ef5350;
    }

    /* Sub-task wrap — needed to contain chips after sub-task row */
    .task-subtask-wrap {
      display: flex;
      flex-direction: column;
    }

    /* Link-room button (house icon) in task actions */
    .task-btn-link-room {
      background: none;
      border: 1px solid var(--border);
      color: var(--muted);
      border-radius: 4px;
      width: 22px;
      height: 22px;
      font-size: 0.75rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      transition: background 0.1s, color 0.1s;
    }

    .task-btn-link-room:hover {
      background: rgba(128, 203, 196, 0.15);
      color: #80cbc4;
      border-color: #80cbc4;
    }

    .task-btn-link-room-sm {
      width: 18px;
      height: 18px;
      font-size: 0.68rem;
    }

    /* ── Room picker modal rows ───────────────────────────── */

    .room-picker-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 8px;
      padding: 7px 10px;
      border-radius: 5px;
      cursor: pointer;
      border: 1px solid transparent;
      transition: background 0.12s, border-color 0.12s;
    }

    .room-picker-row:hover {
      background: rgba(128, 203, 196, 0.1);
      border-color: rgba(128, 203, 196, 0.3);
    }

    .room-picker-label {
      font-size: 0.875rem;
      color: var(--text);
      flex: 1;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .room-picker-loc {
      font-size: 0.74rem;
      color: var(--muted);
      white-space: nowrap;
      flex-shrink: 0;
    }

    /* ── Dept / FA chips (teal-green tint vs room chips) ─── */
    .task-dept-chip {
      background: rgba(165, 214, 167, 0.1);
      border-color: rgba(165, 214, 167, 0.35);
      color: #a5d6a7;
    }
    .task-dept-chip .task-chip-label {
      color: #a5d6a7;
    }
    .task-dept-chip .task-chip-label:hover {
      text-decoration: underline;
    }

    /* ── Discipline chips (purple tint) ────────────────────── */
    .task-disc-chip {
      background: rgba(179, 157, 219, 0.1);
      border-color: rgba(179, 157, 219, 0.35);
      color: #b39ddb;
    }
    .task-disc-chip .task-chip-label {
      color: #b39ddb;
      cursor: pointer;
    }
    .task-disc-chip .task-chip-label:hover {
      text-decoration: underline;
    }

    /* ── Attribute chips (amber tint) ──────────────────────── */
    .task-attr-chip {
      background: rgba(255, 183, 77, 0.1);
      border-color: rgba(255, 183, 77, 0.35);
      color: #ffb74d;
    }
    .task-attr-chip .task-chip-label {
      color: #ffb74d;
    }

    /* ── Inline new-task input ─────────────────────────────── */
    .task-new-input {
      flex: 1;
      width: 100%;
      background: transparent;
      border: none;
      border-bottom: 1px dashed rgba(128, 203, 196, 0.5);
      color: var(--text);
      font-size: 0.875rem;
      padding: 2px 4px;
      outline: none;
    }
    .task-new-input:focus {
      border-bottom-color: #80cbc4;
    }
    .task-new-input::placeholder {
      color: var(--muted);
      font-style: italic;
      font-size: 0.82rem;
    }
    .task-item-new {
      border-style: dashed;
      opacity: 0.85;
    }
    .task-item-add-row {
      border-style: dashed;
      border-color: transparent;
      opacity: 0.75;
      transition: opacity 0.15s, border-color 0.15s;
      cursor: text;
    }
    .task-item-add-row:focus-within {
      opacity: 0.95;
      border-color: var(--border);
    }
    .task-add-input[data-placeholder]:empty:before {
      content: attr(data-placeholder);
      color: var(--muted);
      font-style: italic;
      font-size: 0.82rem;
      pointer-events: none;
    }
    .task-new-input-wrap {
      flex: 1;
      display: flex;
      align-items: center;
    }

    /* ── @ mention dropdown ──────────────────────────────────── */
    .at-mention-dropdown {
      position: fixed;
      z-index: 99999;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 6px;
      box-shadow: 0 6px 20px rgba(0,0,0,0.4);
      max-height: 260px;
      overflow-y: auto;
      padding: 4px 0;
      display: none;
      font-size: 0.85rem;
      line-height: 1.4;
    }

    .at-mention-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 7px 12px;
      cursor: pointer;
      transition: background 0.1s;
      font-size: 0.85rem;
      line-height: 1.4;
      min-height: 28px;
    }

    .at-mention-item:hover,
    .at-mention-highlighted {
      background: rgba(128, 203, 196, 0.12);
    }

    .at-mention-icon {
      font-size: 0.75rem;
      flex-shrink: 0;
      min-width: 32px;
      text-align: center;
      color: var(--muted);
      background: rgba(128, 203, 196, 0.08);
      border-radius: 3px;
      padding: 1px 4px;
    }

    .at-mention-label {
      flex: 1;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .at-mention-sub {
      font-size: 0.74rem;
      color: var(--muted);
      white-space: nowrap;
      flex-shrink: 0;
      max-width: 120px;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* ── OneNote Import ──────────────────────────────────────── */
    .onenote-paste-area {
      min-height: 120px;
      max-height: 220px;
      overflow-y: auto;
      border: 1.5px dashed var(--border);
      border-radius: 6px;
      padding: 10px 12px;
      font-size: 0.83rem;
      color: var(--text);
      background: var(--surface);
      outline: none;
      line-height: 1.5;
      word-break: break-word;
      cursor: text;
      transition: border-color 0.15s;
    }
    .onenote-paste-area:focus {
      border-color: #80cbc4;
    }
    .onenote-paste-area:empty::before {
      content: attr(placeholder);
      color: var(--muted);
      pointer-events: none;
    }
    .onenote-preview-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: rgba(128,203,196,0.08);
      border: 1px solid rgba(128,203,196,0.25);
      border-radius: 6px 6px 0 0;
      padding: 8px 12px;
      font-size: 0.82rem;
      color: var(--text);
      margin-top: 12px;
    }
    .onenote-preview-body {
      border: 1px solid rgba(128,203,196,0.18);
      border-top: none;
      border-radius: 0 0 6px 6px;
      max-height: 220px;
      overflow-y: auto;
      padding: 8px 12px;
      background: var(--surface);
    }
    .onenote-disc-block {
      margin-bottom: 10px;
    }
    .onenote-disc-block:last-child {
      margin-bottom: 0;
    }
    .onenote-disc-heading {
      font-size: 0.79rem;
      font-weight: 600;
      color: #80cbc4;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-bottom: 3px;
    }
    .onenote-task-row {
      font-size: 0.82rem;
      color: var(--text);
      padding: 1px 0 1px 10px;
    }
    .onenote-subtask-row {
      font-size: 0.79rem;
      color: var(--muted);
      padding: 1px 0 1px 28px;
    }

    /* ── Task Toolbar (filter/sort) ──────────────────────────────── */
    .task-toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
      flex-wrap: wrap;
    }
    .task-toolbar-filters {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }
    .task-toolbar-sort {
      display: flex;
      gap: 6px;
    }
    .task-filter-select {
      background: var(--bg);
      border: 1px solid var(--border);
      color: var(--text);
      border-radius: 4px;
      padding: 3px 6px;
      font-size: 0.76rem;
      cursor: pointer;
      outline: none;
    }
    .task-filter-select:focus {
      border-color: #80cbc4;
    }

    /* ── Task metadata row ────────────────────────────────────── */
    .task-meta-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 10px 6px 42px;
      flex-wrap: wrap;
    }
    .task-meta-row-sub {
      padding-left: 56px;
    }
    .task-meta-priority {
      font-size: 0.7rem;
      font-weight: 600;
      border-radius: 3px;
      padding: 1px 6px;
      white-space: nowrap;
    }
    .task-meta-pri-low {
      color: #81c784;
      background: rgba(129,199,132,0.12);
    }
    .task-meta-pri-medium {
      color: #ffb74d;
      background: rgba(255,183,77,0.12);
    }
    .task-meta-pri-high {
      color: #ef5350;
      background: rgba(239,83,80,0.12);
    }
    .task-meta-due {
      font-size: 0.72rem;
      color: var(--muted);
      white-space: nowrap;
    }
    .task-meta-overdue {
      color: #ef5350;
      font-weight: 600;
    }
    .task-meta-due-soon {
      color: #ffb74d;
    }
    .task-meta-assignee {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: rgba(128,203,196,0.18);
      color: #80cbc4;
      font-size: 0.65rem;
      font-weight: 700;
      flex-shrink: 0;
      line-height: 22px;
      text-align: center;
    }
    .task-meta-attach {
      font-size: 0.72rem;
      color: var(--muted);
    }
    .task-meta-note {
      font-size: 0.72rem;
      color: var(--muted);
    }
    .task-meta-milestone {
      font-size: 0.7rem;
      font-weight: 600;
      border-radius: 3px;
      padding: 1px 6px;
      color: #80cbc4;
      background: rgba(128,203,196,0.12);
      border: 1px solid rgba(128,203,196,0.22);
      white-space: nowrap;
      max-width: 260px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .task-meta-milestone-blocked,
    .task-meta-milestone-overdue {
      color: #ef5350;
      background: rgba(239,83,80,0.12);
      border-color: rgba(239,83,80,0.25);
    }
    .task-meta-milestone-soon {
      color: #ffb74d;
      background: rgba(255,183,77,0.12);
      border-color: rgba(255,183,77,0.25);
    }
    .task-meta-milestone-done {
      color: #81c784;
      background: rgba(129,199,132,0.12);
      border-color: rgba(129,199,132,0.24);
    }

    /* ── Project milestones ─────────────────────────────────── */
    .milestone-panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
    }
    .milestone-panel-subtitle {
      margin-top: 3px;
      color: var(--muted);
      font-size: 0.76rem;
    }
    .milestone-summary-strip {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 10px;
      color: var(--muted);
      font-size: 0.76rem;
    }
    .milestone-summary-strip span {
      padding: 2px 7px;
      border: 1px solid var(--border);
      border-radius: 4px;
      background: var(--bg);
    }
    .milestone-summary-strip .milestone-summary-alert {
      color: #ef5350;
      border-color: rgba(239,83,80,0.3);
      background: rgba(239,83,80,0.08);
    }
    .milestone-summary-strip .milestone-summary-warn {
      color: #ffb74d;
      border-color: rgba(255,183,77,0.3);
      background: rgba(255,183,77,0.08);
    }
    .milestone-empty {
      color: var(--muted);
      font-size: 0.82rem;
      padding: 8px 0 2px;
    }
    .milestone-list {
      display: flex;
      flex-direction: column;
      gap: 7px;
    }
    .milestone-graphics {
      display: grid;
      grid-template-columns: minmax(240px, 0.82fr) minmax(320px, 1.18fr);
      gap: 10px;
      margin: 10px 0 12px;
    }
    .milestone-calendar-card,
    .milestone-gantt-card {
      min-width: 0;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--bg);
      padding: 9px;
    }
    .milestone-graphic-title {
      margin-bottom: 7px;
      color: var(--muted);
      font-size: 0.68rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .milestone-calendar-grid {
      display: grid;
      grid-template-columns: repeat(7, minmax(28px, 1fr));
      gap: 3px;
    }
    .milestone-calendar-day {
      position: relative;
      min-height: 42px;
      padding: 4px;
      border: 1px solid var(--border-subtle);
      border-radius: 4px;
      background: var(--bg-card);
      overflow: hidden;
    }
    .milestone-calendar-day.has-marker {
      border-color: rgba(128,203,196,0.34);
      background: rgba(128,203,196,0.045);
    }
    .milestone-calendar-day span {
      display: block;
      color: var(--text);
      font-size: 0.68rem;
      font-variant-numeric: tabular-nums;
    }
    .milestone-calendar-day em {
      position: absolute;
      top: 4px;
      right: 4px;
      color: var(--muted);
      font-size: 0.56rem;
      font-style: normal;
      text-transform: uppercase;
    }
    .milestone-calendar-markers {
      display: flex;
      gap: 2px;
      flex-wrap: wrap;
      margin-top: 6px;
    }
    .milestone-calendar-markers b,
    .milestone-gantt-pin {
      display: inline-grid;
      place-items: center;
      min-width: 15px;
      width: auto;
      padding: 0 3px;
      height: 15px;
      border-radius: 50%;
      font-size: 0.55rem;
      font-weight: 800;
      font-style: normal;
      line-height: 1;
    }
    .milestone-marker-pencil,
    .milestone-gantt-pencil {
      background: rgba(128,203,196,0.18);
      color: #80cbc4;
      border: 1px solid rgba(128,203,196,0.4);
    }
    .milestone-marker-qc,
    .milestone-gantt-qc {
      background: rgba(255,183,77,0.18);
      color: #ffb74d;
      border: 1px solid rgba(255,183,77,0.4);
    }
    .milestone-marker-review,
    .milestone-gantt-review {
      background: rgba(179,157,219,0.18);
      color: #b39ddb;
      border: 1px solid rgba(179,157,219,0.4);
    }
    .milestone-gantt {
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-width: 0;
    }
    .milestone-gantt-scale {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      color: var(--muted);
      font-size: 0.62rem;
      padding-left: min(220px, 36%);
    }
    .milestone-gantt-scale span:nth-child(2) {
      text-align: center;
    }
    .milestone-gantt-scale span:last-child {
      text-align: right;
    }
    .milestone-gantt-row {
      display: grid;
      grid-template-columns: minmax(120px, 210px) minmax(160px, 1fr) 42px;
      gap: 8px;
      align-items: center;
      min-height: 36px;
    }
    .milestone-gantt-label {
      min-width: 0;
    }
    .milestone-gantt-label strong,
    .milestone-gantt-label span {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .milestone-gantt-label strong {
      color: var(--text);
      font-size: 0.74rem;
    }
    .milestone-gantt-label span {
      color: var(--muted);
      font-size: 0.64rem;
    }
    .milestone-gantt-track {
      position: relative;
      height: 22px;
      border: 1px solid var(--border-subtle);
      border-radius: 4px;
      background: repeating-linear-gradient(
        90deg,
        var(--bg-card),
        var(--bg-card) calc(14.28% - 1px),
        var(--border-subtle) 14.28%
      );
    }
    .milestone-gantt-bar {
      position: absolute;
      top: 7px;
      height: 6px;
      border-radius: 999px;
      background: rgba(128,203,196,0.45);
    }
    .milestone-gantt-row-done .milestone-gantt-bar {
      background: rgba(129,199,132,0.45);
    }
    .milestone-gantt-row-blocked .milestone-gantt-bar {
      background: rgba(239,83,80,0.45);
    }
    .milestone-gantt-pin {
      position: absolute;
      top: 2px;
      transform: translateX(-50%);
      z-index: 2;
    }
    .phase-gate-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 8px;
      margin: 10px 0 12px;
    }
    .phase-gate-card {
      min-width: 0;
      padding: 9px 10px;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--bg);
    }
    .phase-gate-card-risk {
      border-color: rgba(255,183,77,0.36);
      background: rgba(255,183,77,0.035);
    }
    .phase-gate-top {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 8px;
    }
    .phase-gate-top span {
      color: var(--muted);
      font-size: 0.72rem;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }
    .outlook-sync-row {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-top: 7px;
      color: var(--muted);
      font-size: 0.68rem;
    }
    .outlook-sync-row > span {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      flex-wrap: wrap;
      min-width: 0;
      padding: 2px 6px;
      border: 1px solid var(--border);
      border-radius: 4px;
      background: var(--bg-card);
    }
    .outlook-sync-row b {
      color: #80cbc4;
      font-weight: 800;
    }
    .outlook-chip {
      display: inline-flex;
      align-items: center;
      height: 17px;
      padding: 0 6px;
      border-radius: 999px;
      border: 1px solid var(--border);
      font-size: 0.62rem;
      font-weight: 700;
      line-height: 1;
      white-space: nowrap;
    }
    .outlook-chip-ok,
    .outlook-status-ok {
      color: #81c784 !important;
      border-color: rgba(129,199,132,0.35) !important;
      background: rgba(129,199,132,0.08) !important;
    }
    .outlook-chip-error,
    .outlook-status-warn {
      color: #ffb74d !important;
      border-color: rgba(255,183,77,0.35) !important;
      background: rgba(255,183,77,0.08) !important;
    }
    .outlook-chip-idle,
    .outlook-status-idle {
      color: var(--muted) !important;
    }
    .outlook-mini-btn,
    .outlook-mini-link {
      color: #80cbc4;
      background: transparent;
      border: 1px solid rgba(128,203,196,0.28);
      border-radius: 3px;
      padding: 1px 5px;
      font: inherit;
      font-size: 0.62rem;
      cursor: pointer;
      text-decoration: none;
      white-space: nowrap;
    }
    .outlook-mini-btn:hover,
    .outlook-mini-link:hover {
      background: rgba(128,203,196,0.1);
    }
    .outlook-modal-status,
    .outlook-modal-intro,
    .outlook-help-text,
    .outlook-error {
      padding: 7px 9px;
      border: 1px solid var(--border);
      border-radius: 5px;
      background: var(--bg-card);
      color: var(--muted);
      font-size: 0.76rem;
      line-height: 1.35;
    }
    .outlook-modal-intro {
      margin-bottom: 9px;
      border: none;
      padding: 0;
      background: transparent;
    }
    .outlook-account-row {
      display: flex;
      align-items: center;
      gap: 9px;
      margin-top: 10px;
      padding: 8px 9px;
      border: 1px solid var(--border);
      border-radius: 5px;
      background: var(--bg-card);
      color: var(--text);
      font-size: 0.78rem;
    }
    .outlook-account-row small {
      display: block;
      margin-top: 2px;
      color: var(--muted);
      font-size: 0.68rem;
    }
    .outlook-account-avatar {
      display: inline-grid;
      place-items: center;
      width: 27px;
      height: 27px;
      flex: 0 0 27px;
      border-radius: 50%;
      background: rgba(128,203,196,0.14);
      color: #80cbc4;
      font-weight: 800;
    }
    .outlook-friendly-settings {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 12px;
    }
    .outlook-friendly-settings .task-detail-input {
      max-width: 220px;
    }
    .outlook-advanced {
      margin-top: 12px;
      border-top: 1px solid var(--border);
      padding-top: 9px;
      color: var(--muted);
      font-size: 0.76rem;
    }
    .outlook-advanced summary {
      cursor: pointer;
      color: var(--muted);
      font-weight: 700;
    }
    .outlook-help-text {
      margin-top: 10px;
      word-break: break-word;
    }
    .outlook-error {
      margin-top: 10px;
      color: #ffb74d;
      border-color: rgba(255,183,77,0.35);
      background: rgba(255,183,77,0.08);
    }
    .outlook-check-row {
      display: flex;
      align-items: center;
      gap: 6px;
      color: var(--text);
      font-size: 0.78rem;
    }
    .outlook-option-stack {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .milestone-prereq-editor {
      margin-top: 12px;
      padding: 9px;
      border: 1px solid var(--border);
      border-radius: 5px;
      background: var(--bg-card);
    }
    .milestone-prereq-options {
      display: flex;
      flex-direction: column;
      gap: 5px;
      max-height: 124px;
      margin-top: 6px;
      overflow-y: auto;
    }
    .milestone-prereq-option {
      align-items: baseline;
    }
    .milestone-prereq-option small,
    .milestone-prereq-empty {
      color: var(--muted);
      font-size: 0.68rem;
    }
    .milestone-prereq-summary {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-wrap: wrap;
      margin-top: 7px;
      color: var(--muted);
      font-size: 0.68rem;
    }
    .milestone-prereq-summary b {
      color: #80cbc4;
    }
    .milestone-prereq-summary span,
    .milestone-prereq-summary em {
      padding: 2px 5px;
      border: 1px solid var(--border);
      border-radius: 3px;
      background: var(--bg-card);
      color: var(--muted);
      font-style: normal;
    }
    .milestone-prereq-summary-waiting b {
      color: #ffb74d;
    }
    .milestone-gantt-readiness {
      color: var(--muted);
      font-size: 0.7rem;
      text-align: right;
      font-variant-numeric: tabular-nums;
    }
    .milestone-card {
      display: grid;
      grid-template-columns: 22px 1fr;
      gap: 9px;
      align-items: start;
      padding: 9px 10px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 6px;
    }
    .milestone-card-overdue {
      border-color: rgba(239,83,80,0.34);
      background: rgba(239,83,80,0.035);
    }
    .milestone-card-soon {
      border-color: rgba(255,183,77,0.32);
      background: rgba(255,183,77,0.035);
    }
    .milestone-card-done {
      opacity: 0.76;
    }
    .milestone-done-toggle {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 2px solid #80cbc4;
      background: transparent;
      cursor: pointer;
      padding: 0;
      margin-top: 1px;
    }
    .milestone-done-toggle.is-done {
      background: #81c784;
      border-color: #81c784;
      position: relative;
    }
    .milestone-done-toggle.is-done::after {
      content: '';
      position: absolute;
      left: 5px;
      top: 2px;
      width: 4px;
      height: 8px;
      border: 2px solid #1a2332;
      border-top: none;
      border-left: none;
      transform: rotate(45deg);
    }
    .milestone-card-body {
      min-width: 0;
    }
    .milestone-card-top {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 10px;
    }
    .milestone-title-btn {
      background: none;
      border: none;
      color: var(--text);
      cursor: pointer;
      font: inherit;
      font-weight: 600;
      padding: 0;
      text-align: left;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .milestone-title-btn:hover {
      color: #80cbc4;
    }
    .milestone-date {
      color: var(--muted);
      font-size: 0.75rem;
      white-space: nowrap;
    }
    .milestone-flow-line {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 4px;
      color: var(--muted);
      font-size: 0.74rem;
      flex-wrap: wrap;
    }
    .milestone-flow-line b {
      color: #80cbc4;
      font-weight: 700;
    }
    .milestone-type-line {
      margin-top: 2px;
      color: var(--muted);
      font-size: 0.66rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .milestone-gate-row,
    .milestone-analysis-row {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-top: 7px;
    }
    .milestone-gate-row span,
    .milestone-analysis-row span {
      padding: 2px 6px;
      border: 1px solid var(--border);
      border-radius: 4px;
      color: var(--muted);
      background: var(--bg-card);
      font-size: 0.68rem;
      white-space: nowrap;
    }
    .milestone-gate-row b {
      color: #80cbc4;
      font-weight: 800;
    }
    .milestone-criteria {
      margin-top: 7px;
      color: var(--text);
      font-size: 0.78rem;
      line-height: 1.4;
      word-break: break-word;
    }
    .milestone-description {
      margin-top: 3px;
      color: var(--muted);
      font-size: 0.78rem;
      line-height: 1.4;
      word-break: break-word;
    }
    .milestone-progress-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 8px;
      align-items: center;
      margin-top: 7px;
      color: var(--muted);
      font-size: 0.72rem;
      font-variant-numeric: tabular-nums;
    }
    .milestone-progress-bar {
      height: 4px;
      background: var(--border);
      border-radius: 2px;
      overflow: hidden;
    }
    .milestone-progress-bar div {
      height: 100%;
      background: #80cbc4;
      border-radius: 2px;
    }
    .milestone-modal-grid {
      grid-template-columns: 86px 1fr;
    }
    .milestone-modal-grid .task-detail-input {
      max-width: none;
    }

    /* ── Schedule hub (offset cascade: client due ← QC ← pencil-downs) ── */
    .sched-root {
      display: flex;
      flex-direction: column;
      gap: 14px;
      padding: 14px;
      min-height: 100%;
    }
    .sched-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      flex-wrap: wrap;
    }
    .sched-title {
      margin: 0;
      color: #80cbc4;
      font-size: 1.02rem;
    }
    .sched-subtitle {
      margin-top: 2px;
      color: var(--muted);
      font-size: 0.76rem;
    }
    .sched-actions {
      display: flex;
      gap: 6px;
      align-items: center;
      flex-wrap: wrap;
    }
    .sched-actions .btn-secondary {
      font-size: 0.78rem;
      padding: 4px 10px;
    }
    .sched-primary-btn {
      border-color: #80cbc4 !important;
      color: #80cbc4 !important;
    }
    .sched-empty,
    .sched-empty-state {
      padding: 26px 20px;
      border: 1px dashed var(--border);
      border-radius: 8px;
      color: var(--muted);
      text-align: center;
    }
    .sched-empty-state p {
      max-width: 460px;
      margin: 8px auto 0;
      font-size: 0.82rem;
      line-height: 1.55;
    }
    .sched-empty-state b {
      color: #80cbc4;
    }
    .sched-empty-title {
      color: var(--text);
      font-weight: 700;
      font-size: 0.95rem;
    }
    .sched-empty-actions {
      display: flex;
      gap: 8px;
      justify-content: center;
      margin-top: 14px;
    }

    /* horizon bar */
    .sched-horizon {
      padding: 14px 12px 4px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 8px;
    }
    .sched-horizon-track {
      position: relative;
      height: 22px;
    }
    .sched-horizon-track::before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      height: 2px;
      background: var(--border);
    }
    .sched-h-today {
      position: absolute;
      top: -4px;
      bottom: -4px;
      width: 2px;
      background: #80cbc4;
      transform: translateX(-50%);
      opacity: 0.9;
    }
    .sched-h-dot {
      position: absolute;
      top: 50%;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      border: none;
      padding: 0;
      cursor: pointer;
      transform: translate(-50%, -50%);
      background: var(--muted);
    }
    .sched-h-dot.is-ok { background: #80cbc4; }
    .sched-h-dot.is-soon { background: #ffb74d; }
    .sched-h-dot.is-overdue,
    .sched-h-dot.is-conflict { background: #ef5350; }
    .sched-h-dot.is-done { background: #81c784; opacity: 0.55; }
    .sched-h-dot:hover { transform: translate(-50%, -50%) scale(1.45); }
    .sched-h-qc {
      position: absolute;
      top: 50%;
      width: 2px;
      height: 14px;
      background: #ffb74d;
      transform: translate(-50%, -50%);
      opacity: 0.85;
    }
    .sched-h-qc.is-conflict { background: #ef5350; }
    .sched-h-due {
      position: absolute;
      top: 50%;
      width: 11px;
      height: 11px;
      border: none;
      padding: 0;
      cursor: pointer;
      background: #d98a5a;
      transform: translate(-50%, -50%) rotate(45deg);
    }
    .sched-h-due.is-past { opacity: 0.4; }
    .sched-h-due:hover { transform: translate(-50%, -50%) rotate(45deg) scale(1.35); }
    .sched-horizon-labels {
      position: relative;
      height: 14px;
    }
    .sched-h-label {
      position: absolute;
      transform: translateX(-50%);
      color: #d98a5a;
      font-size: 0.66rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      white-space: nowrap;
    }
    .sched-horizon-axis {
      display: flex;
      justify-content: space-between;
      color: var(--muted);
      font-size: 0.66rem;
      margin-top: 2px;
    }

    /* next up strip */
    .sched-nextup {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .sched-nextup-title {
      color: var(--muted);
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .sched-nextup-chip {
      display: inline-flex;
      align-items: baseline;
      gap: 7px;
      padding: 5px 10px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 14px;
      cursor: pointer;
      color: var(--text);
      font-size: 0.76rem;
    }
    .sched-nextup-chip:hover { border-color: #80cbc4; }
    .sched-nextup-chip b { font-weight: 600; }
    .sched-nextup-chip span { color: var(--muted); font-size: 0.7rem; }
    .sched-nextup-chip em {
      font-style: normal;
      color: #80cbc4;
      font-size: 0.7rem;
      white-space: nowrap;
    }
    .sched-nextup-chip.is-soon em { color: #ffb74d; }
    .sched-nextup-chip.is-overdue { border-color: rgba(239,83,80,0.4); }
    .sched-nextup-chip.is-overdue em { color: #ef5350; }
    .sched-nextup-chip.is-due { border-color: rgba(217,138,90,0.45); }
    .sched-nextup-chip.is-due b { color: #d98a5a; }

    /* phase cascade card */
    .sched-phase-card {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 12px 14px;
    }
    .sched-phase-card.is-risk { border-color: rgba(239,83,80,0.4); }
    .sched-phase-card.is-past { opacity: 0.65; }
    .sched-phase-card.is-loose { border-style: dashed; }
    .sched-phase-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 10px;
      margin-bottom: 10px;
    }
    .sched-phase-name {
      font-size: 0.92rem;
      font-weight: 700;
      color: var(--text);
    }
    .sched-phase-status {
      color: var(--muted);
      font-size: 0.72rem;
      white-space: nowrap;
    }
    .sched-chain {
      position: relative;
      display: flex;
      flex-direction: column;
    }
    .sched-chain::before {
      content: '';
      position: absolute;
      left: 8px;
      top: 10px;
      bottom: 10px;
      width: 2px;
      background: var(--border);
    }
    .sched-row {
      position: relative;
      display: grid;
      grid-template-columns: 18px 1fr auto;
      gap: 10px;
      align-items: start;
      padding: 7px 0;
    }
    .sched-row .milestone-done-toggle {
      position: relative;
      z-index: 1;
      background: var(--bg);
    }
    .sched-row.is-overdue .milestone-done-toggle { border-color: #ef5350; }
    .sched-row.is-soon .milestone-done-toggle { border-color: #ffb74d; }
    .sched-row-empty {
      grid-template-columns: 1fr;
      padding-left: 26px;
      color: var(--muted);
      font-size: 0.76rem;
      font-style: italic;
    }
    .sched-node {
      position: relative;
      z-index: 1;
      width: 10px;
      height: 10px;
      margin: 4px 0 0 4px;
      background: var(--bg);
    }
    .sched-node-qc {
      border: 2px solid #ffb74d;
      border-radius: 2px;
      transform: rotate(45deg);
    }
    .sched-row-qc.is-conflict .sched-node-qc { border-color: #ef5350; }
    .sched-node-due {
      border: 2px solid #d98a5a;
      background: #d98a5a;
      transform: rotate(45deg);
    }
    .sched-row-main { min-width: 0; }
    .sched-row-gate-label {
      font-weight: 700;
      font-size: 0.82rem;
      color: var(--text);
    }
    .sched-row-due .sched-row-gate-label { color: #d98a5a; }
    .sched-row-flow {
      display: block;
      margin-top: 1px;
      color: var(--muted);
      font-size: 0.72rem;
    }
    .sched-row-flow b { color: #80cbc4; }
    .sched-row-note {
      margin-top: 3px;
      color: var(--muted);
      font-size: 0.74rem;
      line-height: 1.4;
      word-break: break-word;
    }
    .sched-row-tasks {
      display: inline-block;
      margin-top: 4px;
      padding: 1px 6px;
      border: 1px solid var(--border);
      border-radius: 4px;
      color: var(--muted);
      font-size: 0.66rem;
    }
    .sched-row-date {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 1px;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }
    .sched-row-edit-target {
      min-width: 132px;
      margin: -4px -6px -4px 0;
      padding: 4px 6px;
      border: 1px solid transparent;
      border-radius: 6px;
      background: transparent;
      color: inherit;
      font: inherit;
      cursor: pointer;
      text-align: right;
      transition: background 120ms ease, border-color 120ms ease;
    }
    .sched-row-edit-target:hover,
    .sched-row-edit-target:focus-visible {
      border-color: rgba(128,203,196,0.42);
      background: rgba(128,203,196,0.08);
      outline: none;
    }
    .sched-edit-cue {
      color: #80cbc4;
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      opacity: 0.58;
      text-transform: uppercase;
      transition: opacity 120ms ease;
    }
    .sched-row-edit-target:hover .sched-edit-cue,
    .sched-row-edit-target:focus-visible .sched-edit-cue {
      opacity: 1;
    }
    .sched-row-date b {
      font-size: 0.82rem;
      color: var(--text);
    }
    .sched-row-date .sched-relative-rule {
      max-width: 180px;
      color: #80cbc4;
      font-size: 0.72rem;
      line-height: 1.25;
      text-align: right;
      white-space: normal;
    }
    .sched-row.is-done .sched-row-date b,
    .sched-row.is-done .milestone-title-btn { opacity: 0.6; }
    .sched-countdown {
      font-size: 0.68rem;
      color: var(--muted);
    }
    .sched-countdown.is-ok { color: #80cbc4; }
    .sched-countdown.is-soon { color: #ffb74d; }
    .sched-countdown.is-overdue { color: #ef5350; font-weight: 700; }
    .sched-countdown.is-done { color: #81c784; }
    .sched-pin {
      font-size: 0.64rem;
      color: var(--muted);
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 0 5px;
    }
    .sched-conflict-flag {
      font-size: 0.64rem;
      font-weight: 700;
      color: #ef5350;
      border: 1px solid rgba(239,83,80,0.45);
      border-radius: 4px;
      padding: 0 5px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .sched-add-row {
      margin-top: 6px;
      padding: 3px 0 0 26px;
      background: none;
      border: none;
      color: var(--muted);
      font-size: 0.76rem;
      cursor: pointer;
      text-align: left;
    }
    .sched-add-row:hover { color: #80cbc4; }
    .sched-card-focus {
      outline: 2px solid #80cbc4;
      outline-offset: 2px;
      transition: outline-color 0.3s;
      border-radius: 6px;
    }

    /* modal "when" rows (shared by deliverable + pencil-down modals) */
    .sched-when { margin-top: 12px; }
    .sched-when-row {
      display: flex;
      align-items: center;
      gap: 7px;
      margin-top: 6px;
      color: var(--text);
      font-size: 0.8rem;
      cursor: pointer;
    }
    .sched-when-row b {
      color: #80cbc4;
      font-weight: 700;
      white-space: nowrap;
    }
    .sched-days-input { max-width: 64px !important; }
    .sched-when-hint {
      margin-top: 5px;
      min-height: 1em;
      color: #ffb74d;
      font-size: 0.72rem;
    }
    @media (max-width: 980px) {
      .milestone-graphics {
        grid-template-columns: 1fr;
      }
      .milestone-gantt-row {
        grid-template-columns: minmax(96px, 0.8fr) minmax(120px, 1fr) 38px;
      }
    }

    /* ── Priority indicator dot ────────────────────────────────── */
    .task-pri-dot {
      flex-shrink: 0;
      width: 6px;
      height: 6px;
      border-radius: 50%;
    }
    .task-pri-dot-sm {
      width: 5px;
      height: 5px;
    }
    .task-pri-dot-high {
      background: #ef5350;
      box-shadow: 0 0 4px rgba(239,83,80,0.5);
    }
    .task-pri-dot-medium {
      background: #ffb74d;
    }
    .task-pri-dot-low {
      background: #81c784;
    }

    /* ── Overdue task highlight ────────────────────────────────── */
    .task-item-overdue {
      border-color: rgba(239,83,80,0.35) !important;
      background: rgba(239,83,80,0.03);
    }

    /* ── Detail panel (expandable per-task) ─────────────────────── */
    .task-detail-panel {
      padding: 10px 12px 10px 42px;
      border-top: 1px solid var(--border);
      background: rgba(128,203,196,0.02);
    }
    .task-detail-grid {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 6px 10px;
      align-items: center;
    }
    .task-detail-label {
      font-size: 0.75rem;
      color: var(--muted);
      white-space: nowrap;
    }
    .task-detail-input {
      background: var(--bg);
      border: 1px solid var(--border);
      color: var(--text);
      border-radius: 4px;
      padding: 3px 6px;
      font-size: 0.8rem;
      outline: none;
      width: 100%;
      max-width: 220px;
    }
    .task-detail-input:focus {
      border-color: #80cbc4;
    }
    .task-detail-textarea {
      width: 100%;
      background: var(--bg);
      border: 1px solid var(--border);
      color: var(--text);
      border-radius: 4px;
      padding: 6px 8px;
      font-size: 0.8rem;
      resize: vertical;
      min-height: 48px;
      outline: none;
      font-family: inherit;
      line-height: 1.5;
    }
    .task-detail-textarea:focus {
      border-color: #80cbc4;
    }

    /* ── Detail toggle button ──────────────────────────────────── */
    .task-btn-detail {
      background: none;
      border: 1px solid var(--border);
      color: var(--muted);
      border-radius: 4px;
      width: 22px;
      height: 22px;
      font-size: 0.85rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      transition: background 0.1s, color 0.1s;
      letter-spacing: -1px;
    }
    .task-btn-detail:hover {
      background: rgba(128,203,196,0.15);
      color: #80cbc4;
      border-color: #80cbc4;
    }

    /* ── Attachment thumbnails ────────────────────────────────── */
    .task-attach-thumbs {
      display: flex;
      gap: 6px;
      padding: 4px 10px 8px 42px;
      flex-wrap: wrap;
    }
    .task-attach-thumbs-sub {
      padding-left: 56px;
    }
    .task-attach-thumb {
      width: 48px;
      height: 48px;
      object-fit: cover;
      border-radius: 4px;
      border: 1px solid var(--border);
      cursor: pointer;
      transition: border-color 0.15s, transform 0.1s;
    }
    .task-attach-thumb:hover {
      border-color: #80cbc4;
      transform: scale(1.05);
    }
    .task-attach-thumb-lg {
      width: 64px;
      height: 64px;
    }
    .task-attach-thumb-wrap {
      position: relative;
      display: inline-block;
    }
    .task-attach-remove {
      position: absolute;
      top: -4px;
      right: -4px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #ef5350;
      color: white;
      border: none;
      font-size: 0.65rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      opacity: 0;
      transition: opacity 0.15s;
    }
    .task-attach-thumb-wrap:hover .task-attach-remove {
      opacity: 1;
    }

    /* ===== WORKSPACE CANVAS ===== */

    .ws-viewport {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background: var(--bg);
    }

    .ws-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 6px 12px;
      background: var(--overlay-subtle);
      border-bottom: 1px solid var(--border-subtle);
      flex-shrink: 0;
      z-index: 20;
    }

    .ws-toolbar-title {
      font-size: 13px;
      font-weight: 600;
      color: rgba(224,224,224,0.85);
      letter-spacing: 0.3px;
    }

    .ws-toolbar-actions {
      display: flex;
      align-items: center;
      gap: 3px;
    }

    .ws-tb-btn {
      background: rgba(128,203,196,0.1);
      border: 1px solid rgba(128,203,196,0.15);
      color: rgba(224,224,224,0.8);
      border-radius: 4px;
      padding: 3px 8px;
      cursor: pointer;
      font-size: 13px;
      line-height: 1.2;
      transition: background 0.15s;
    }
    .ws-tb-btn:hover {
      background: rgba(128,203,196,0.2);
    }

    .ws-tb-zoom {
      cursor: default;
      min-width: 38px;
      text-align: center;
      font-size: 11px;
      color: rgba(128,203,196,0.7);
    }

    .ws-tb-sep {
      width: 1px;
      height: 18px;
      background: rgba(128,203,196,0.12);
      margin: 0 4px;
    }

    .ws-canvas-wrap {
      flex: 1;
      position: relative;
      overflow: hidden;
      background: var(--bg);
      cursor: grab;
    }

    .ws-canvas-wrap.ws-interacting,
    .ws-canvas-wrap.ws-interacting * {
      user-select: none !important;
      -webkit-user-select: none !important;
      cursor: inherit;
    }

    .ws-canvas {
      position: absolute;
      top: 0;
      left: 0;
      transform-origin: 0 0;
      width: 0;
      height: 0;
    }

    .ws-svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      overflow: visible;
      transform-origin: 0 0;
      z-index: 5;
    }
    .ws-svg path, .ws-svg line {
      pointer-events: stroke;
    }

    /* ── Node styling ────────────────────────────── */

    .ws-node {
      position: absolute;
      background: rgba(22,24,28,0.97);
      border: 1px solid rgba(128,203,196,0.15);
      border-radius: 8px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.5);
      min-width: 220px;
      max-width: 520px;
      z-index: 10;
      transition: box-shadow 0.15s;
      overflow: visible;
    }
    .ws-node:hover {
      box-shadow: 0 4px 20px rgba(0,0,0,0.6), 0 0 3px rgba(128,203,196,0.12);
    }
    .ws-node-dragging {
      box-shadow: 0 8px 30px rgba(0,0,0,0.7), 0 0 6px rgba(128,203,196,0.2) !important;
      opacity: 0.92;
    }
    .ws-node-collapsed {
      max-height: none;
    }

    .ws-node-header {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 7px 10px;
      border-radius: 8px 8px 0 0;
      cursor: move;
      user-select: none;
      border-bottom: 1px solid rgba(128,203,196,0.1);
    }
    .ws-node-collapsed .ws-node-header {
      border-radius: 8px;
      border-bottom: none;
    }

    .ws-node-icon {
      font-size: 14px;
      flex-shrink: 0;
    }

    .ws-node-label {
      font-size: 12px;
      font-weight: 600;
      color: rgba(224,224,224,0.85);
      letter-spacing: 0.3px;
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .ws-node-header-actions {
      display: flex;
      gap: 2px;
      flex-shrink: 0;
    }

    .ws-node-btn {
      background: none;
      border: none;
      color: rgba(224,224,224,0.5);
      cursor: pointer;
      font-size: 14px;
      padding: 0 3px;
      line-height: 1;
      border-radius: 3px;
      transition: color 0.15s, background 0.15s;
    }
    .ws-node-btn:hover {
      color: rgba(224,224,224,0.9);
      background: rgba(128,203,196,0.15);
    }
    .ws-node-btn-close:hover {
      color: #ef5350;
      background: rgba(239,83,80,0.15);
    }

    .ws-node-body {
      padding: 8px;
      max-height: 500px;
      overflow-y: auto;
      overflow-x: hidden;
    }

    .ws-node-content {
      font-size: 12px;
    }

    /* ── Connection ports ─────────────────────────── */

    .ws-node-port-in,
    .ws-node-port-out,
    .ws-task-port {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: rgba(128,203,196,0.3);
      border: 2px solid rgba(128,203,196,0.5);
      cursor: crosshair;
      transition: background 0.15s, transform 0.15s;
      z-index: 15;
    }
    .ws-node-port-in:hover,
    .ws-node-port-out:hover,
    .ws-task-port:hover {
      background: rgba(128,203,196,0.7);
      transform: scale(1.3);
    }

    .ws-node-port-in {
      position: absolute;
      left: -6px;
      top: 50%;
      transform: translateY(-50%);
    }
    .ws-node-port-in:hover {
      transform: translateY(-50%) scale(1.3);
    }

    .ws-task-port {
      width: 10px;
      height: 10px;
      flex-shrink: 0;
      margin-left: 4px;
    }

    /* ── Wires ───────────────────────────────────── */

    .ws-wire {
      fill: none;
      stroke: rgba(128,203,196,0.45);
      stroke-width: 2;
      cursor: pointer;
      transition: stroke 0.15s;
    }
    .ws-wire:hover {
      stroke: rgba(128,203,196,0.8);
      stroke-width: 3;
    }
    .ws-wire-temp {
      stroke: rgba(128,203,196,0.3);
      stroke-dasharray: 6 3;
    }

    /* ── Photo node ──────────────────────────────── */

    .ws-photo-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 6px;
    }

    .ws-photo-item {
      position: relative;
      border-radius: 4px;
      overflow: hidden;
      background: rgba(0,0,0,0.3);
    }

    .ws-photo-img {
      width: 80px;
      height: 80px;
      object-fit: cover;
      cursor: pointer;
      display: block;
      border-radius: 4px;
      transition: opacity 0.15s;
    }
    .ws-photo-img:hover {
      opacity: 0.85;
    }

    .ws-photo-remove {
      position: absolute;
      top: 2px;
      right: 2px;
      background: rgba(0,0,0,0.6);
      color: #ef5350;
      border: none;
      border-radius: 50%;
      width: 18px;
      height: 18px;
      font-size: 12px;
      line-height: 18px;
      text-align: center;
      cursor: pointer;
      opacity: 0;
      transition: opacity 0.15s;
      padding: 0;
    }
    .ws-photo-item:hover .ws-photo-remove {
      opacity: 1;
    }

    .ws-photo-caption {
      font-size: 10px;
      color: rgba(224,224,224,0.6);
      padding: 2px 4px;
      text-align: center;
      max-width: 80px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .ws-photo-drop {
      border: 1px dashed rgba(128,203,196,0.2);
      border-radius: 4px;
      padding: 10px;
      text-align: center;
      color: rgba(224,224,224,0.4);
      font-size: 11px;
      transition: border-color 0.15s, background 0.15s;
    }
    .ws-photo-drop-active {
      border-color: rgba(128,203,196,0.5);
      background: rgba(128,203,196,0.08);
    }

    .ws-photo-upload-btn {
      color: rgba(128,203,196,0.7);
      cursor: pointer;
      text-decoration: underline;
    }
    .ws-photo-upload-btn:hover {
      color: rgba(128,203,196,0.9);
    }

    /* ── Notes node ──────────────────────────────── */

    .ws-notes-textarea {
      width: 100%;
      min-height: 80px;
      background: rgba(0,0,0,0.2);
      border: 1px solid rgba(128,203,196,0.1);
      border-radius: 4px;
      padding: 6px 8px;
      color: rgba(224,224,224,0.85);
      font-size: 12px;
      font-family: inherit;
      resize: vertical;
      outline: none;
      transition: border-color 0.15s;
    }
    .ws-notes-textarea:focus {
      border-color: rgba(128,203,196,0.3);
    }

    /* ── Links node ──────────────────────────────── */

    .ws-links-list {
      margin-bottom: 6px;
    }

    .ws-link-row {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 3px 0;
      border-bottom: 1px solid rgba(128,203,196,0.05);
    }

    .ws-link-url {
      flex: 1;
      color: rgba(128,203,196,0.8);
      font-size: 11px;
      text-decoration: none;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .ws-link-url:hover {
      text-decoration: underline;
      color: rgba(128,203,196,1);
    }

    .ws-link-remove {
      background: none;
      border: none;
      color: rgba(224,224,224,0.3);
      cursor: pointer;
      font-size: 12px;
      padding: 0 2px;
    }
    .ws-link-remove:hover {
      color: #ef5350;
    }

    .ws-link-add {
      display: flex;
      gap: 4px;
    }

    .ws-link-input {
      flex: 1;
      background: rgba(0,0,0,0.2);
      border: 1px solid rgba(128,203,196,0.1);
      border-radius: 4px;
      padding: 4px 6px;
      color: rgba(224,224,224,0.8);
      font-size: 11px;
      outline: none;
    }
    .ws-link-input:focus {
      border-color: rgba(128,203,196,0.3);
    }

    /* ── Checklist node ──────────────────────────── */

    .ws-checklist {
      margin-bottom: 4px;
    }

    .ws-check-row {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 3px 0;
    }

    .ws-check-box {
      accent-color: #80cbc4;
      flex-shrink: 0;
      cursor: pointer;
    }

    .ws-check-text {
      flex: 1;
      color: rgba(224,224,224,0.8);
      font-size: 12px;
      cursor: text;
      border-radius: 3px;
      padding: 1px 3px;
    }
    .ws-check-text[contenteditable="true"] {
      outline: 1px solid rgba(128,203,196,0.3);
      background: rgba(0,0,0,0.2);
    }

    .ws-check-done {
      text-decoration: line-through;
      color: rgba(224,224,224,0.35);
    }

    .ws-check-remove {
      background: none;
      border: none;
      color: rgba(224,224,224,0.2);
      cursor: pointer;
      font-size: 12px;
      padding: 0 2px;
      opacity: 0;
      transition: opacity 0.15s;
    }
    .ws-check-row:hover .ws-check-remove {
      opacity: 1;
    }
    .ws-check-remove:hover {
      color: #ef5350;
    }

    .ws-check-add {
      width: 100%;
      background: rgba(0,0,0,0.2);
      border: 1px solid rgba(128,203,196,0.08);
      border-radius: 4px;
      padding: 4px 6px;
      color: rgba(224,224,224,0.7);
      font-size: 11px;
      outline: none;
    }
    .ws-check-add:focus {
      border-color: rgba(128,203,196,0.3);
    }

    /* Task items inside workspace node - override some styles */
    .ws-node-content .task-toolbar { padding: 4px 0; }
    .ws-node-content .task-list { margin: 0; }
    .ws-node-content .task-item .task-row {
      display: flex;
      align-items: center;
    }

    /* ===== LIVE PROJECT SYSTEM ===== */

    @keyframes live-pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%       { opacity: 0.45; transform: scale(0.85); }
    }

    /* Small animated dot used in badges and sidebar headers */
    .live-pulse-dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #00b894;
      animation: live-pulse 2s ease-in-out infinite;
      flex-shrink: 0;
    }

    /* Compact "LIVE" pill badge */
    .live-badge-small {
      display: inline-flex;
      align-items: center;
      padding: 1px 6px;
      background: rgba(0, 184, 148, 0.15);
      border: 1px solid rgba(0, 184, 148, 0.5);
      border-radius: 10px;
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      color: #00b894;
      white-space: nowrap;
      flex-shrink: 0;
    }

    /* "Open Live Project" button accent */
    .live-open-btn {
      background: linear-gradient(135deg, #00b894 0%, #00cec9 100%) !important;
      border-color: #00b894 !important;
    }
    .live-open-btn:hover {
      opacity: 0.9;
    }

    /* Live project card hover border glow */
    .tree-item:has(.live-badge-small):hover {
      border-color: rgba(0, 184, 148, 0.65) !important;
    }


    /* ════════════════════════════════════════════════════════════════
       WINDOW MANAGER SYSTEM
       Desktop-style windowing for all application panels
       ════════════════════════════════════════════════════════════════ */

    /* ── Desktop (replaces .layout flex) ── */
    body.windowed-layout {
      padding-bottom: 0;
    }

    /* Fix header height so project indicator show/hide doesn't shift the desktop */
    body.windowed-layout header {
      min-height: 48px;
      margin-bottom: 8px;
    }

    body.windowed-layout .layout {
      display: block;
      position: relative;
      height: calc(100vh - 64px - 38px);
      overflow: hidden;
      gap: 0;
    }

    body.windowed-layout .column-resizer {
      display: none !important;
    }

    /* Override sim-mode hiding in windowed layout */
    body.windowed-layout.sim-mode #left-column,
    body.windowed-layout.sim-mode #right-column,
    body.windowed-layout.sim-mode #compare-column,
    body.windowed-layout.sim-mode #resizer,
    body.windowed-layout.sim-mode #compare-resizer {
      display: block !important;
    }
    body.windowed-layout.sim-mode #sim-main-view {
      display: flex !important;
    }

    /* Panels inside windows should fill the window body */
    body.windowed-layout #left-column {
      width: 100% !important;
      max-width: none !important;
      min-width: 0 !important;
      height: 100%;
      min-height: 0;
      flex: none !important;
      padding: 0 !important;
      transition: none !important;
    }

    /* Navigator has one intentional scroll surface: the tree itself. Keep
       the floating window body from creating a second native scrollbar, while
       allowing the custom pill to sit just beyond the window edge. */
    body.windowed-layout [data-win-id="navigator"].app-window {
      overflow: visible;
    }

    body.windowed-layout [data-win-id="navigator"] .window-body {
      overflow: hidden;
    }

    body.windowed-layout [data-win-id="navigator"] #left-column {
      overflow: visible;
    }
    /* Disable collapsed state inside windows */
    body.windowed-layout #left-column.collapsed {
      width: 100% !important;
      min-width: 0 !important;
      max-width: none !important;
      overflow: visible !important;
    }
    body.windowed-layout #left-column.collapsed > * {
      opacity: 1 !important;
      pointer-events: auto !important;
    }
    body.windowed-layout #right-column {
      width: 100% !important;
      min-width: 0 !important;
      flex: none !important;
      padding: 0 6px !important;
      transition: none !important;
    }
    body.windowed-layout #compare-column {
      display: block !important;
      width: 100% !important;
      min-width: 0 !important;
      flex: none !important;
      padding: 0 6px !important;
    }
    body.windowed-layout #sim-main-view {
      width: 100% !important;
      height: 100% !important;
      min-width: 0 !important;
      flex: 1 !important;
      min-height: 0 !important;
    }
    body.windowed-layout #workbench-container {
      position: static !important;
      width: 100% !important;
      height: 100% !important;
      z-index: auto !important;
    }
    body.windowed-layout #workbench-container.active {
      display: flex !important;
    }
    body.windowed-layout .help-panel {
      position: static !important;
      width: 100% !important;
      max-height: none !important;
      height: 100% !important;
      bottom: auto !important;
      right: auto !important;
      z-index: auto !important;
      border-radius: 0 !important;
      animation: none !important;
      display: flex !important;
    }

    /* ── The Window ── */
    .app-window {
      position: absolute;
      display: flex;
      flex-direction: column;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 6px;
      box-shadow:
        0 2px 12px var(--card-shadow);
      overflow: hidden;
      transition: box-shadow 0.2s ease, border-color 0.2s ease;
    }

    .app-window.win-focused {
      border-color: var(--border);
      box-shadow:
        0 2px 12px var(--card-shadow),
        0 0 20px var(--accent-faint);
    }

    .app-window.win-maximized {
      left: 0 !important;
      top: 0 !important;
      width: 100% !important;
      height: 100% !important;
      border-radius: 0;
    }

    .app-window.win-dragging {
      opacity: 0.92;
      transition: none !important;
    }

    .app-window.win-opening {
      animation: winOpen 0.2s ease-out;
    }

    .app-window.win-closing {
      animation: winClose 0.15s ease-in forwards;
      pointer-events: none;
    }

    .app-window.win-minimize-anim {
      animation: winMinimize 0.18s ease-in forwards;
      pointer-events: none;
    }

    @keyframes winOpen {
      from { opacity: 0; transform: scale(0.92) translateY(12px); }
      to   { opacity: 1; transform: scale(1) translateY(0); }
    }

    @keyframes winClose {
      from { opacity: 1; transform: scale(1); }
      to   { opacity: 0; transform: scale(0.92) translateY(10px); }
    }

    @keyframes winMinimize {
      from { opacity: 1; transform: scale(1); }
      to   { opacity: 0; transform: scale(0.7) translateY(60px); }
    }

    /* ── Title Bar ── */
    .window-titlebar {
      display: flex;
      align-items: center;
      height: 26px;
      padding: 0 6px;
      background: transparent;
      border-bottom: none;
      cursor: grab;
      user-select: none;
      flex-shrink: 0;
    }

    .window-titlebar:active {
      cursor: grabbing;
    }

    .win-focused .window-titlebar {
      background: transparent;
    }

    .window-icon {
      font-size: 12px;
      margin-right: 5px;
      flex-shrink: 0;
    }

    .window-title {
      flex: 1;
      font-size: 11px;
      font-weight: 600;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .win-focused .window-title {
      color: var(--text);
    }

    .window-controls {
      display: flex;
      gap: 2px;
      margin-left: 6px;
    }

    .win-btn {
      width: 20px;
      height: 18px;
      border: none;
      border-radius: 3px;
      background: transparent;
      color: var(--muted);
      font-size: 11px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.12s, color 0.12s;
      line-height: 1;
    }

    .win-btn:hover {
      background: var(--overlay-active);
      color: var(--text);
    }

    .win-btn.win-close:hover {
      background: rgba(192, 57, 43, 0.6);
      color: #fff;
    }

    /* ── Window Body ── */
    .window-body {
      flex: 1;
      overflow: auto;
      min-height: 0;
    }

    /* ── Resize Handles ── */
    .resize-handle {
      position: absolute;
      z-index: 5;
    }

    .resize-n { top: -3px; left: 6px; right: 6px; height: 6px; cursor: n-resize; }
    .resize-s { bottom: -3px; left: 6px; right: 6px; height: 6px; cursor: s-resize; }
    .resize-e { right: -3px; top: 6px; bottom: 6px; width: 6px; cursor: e-resize; }
    .resize-w { left: -3px; top: 6px; bottom: 6px; width: 6px; cursor: w-resize; }
    .resize-ne { top: -3px; right: -3px; width: 12px; height: 12px; cursor: ne-resize; }
    .resize-nw { top: -3px; left: -3px; width: 12px; height: 12px; cursor: nw-resize; }
    .resize-se { bottom: -3px; right: -3px; width: 12px; height: 12px; cursor: se-resize; }
    .resize-sw { bottom: -3px; left: -3px; width: 12px; height: 12px; cursor: sw-resize; }

    /* Maximized windows hide resize handles */
    .win-maximized .resize-handle {
      display: none;
    }

    /* ── Snap Preview ── */
    .snap-preview {
      position: fixed;
      background: var(--accent-faint);
      border: 2px solid var(--accent-glow);
      border-radius: 6px;
      z-index: 9998;
      pointer-events: none;
      display: none;
      backdrop-filter: blur(2px);
      transition: all 0.12s ease;
    }

    /* ── Taskbar ── */
    .window-taskbar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 32px;
      background: var(--bg-card);
      border-top: 1px solid var(--border);
      display: flex;
      align-items: center;
      padding: 0 4px;
      z-index: 10002;
      backdrop-filter: blur(16px);
      gap: 2px;
      /* Promote to its own compositor layer so Safari viewport-height changes
         (address bar show/hide) don't cause a repaint flash on the taskbar */
      will-change: transform;
      transform: translateZ(0);
    }

    .taskbar-attention-hint {
      position: fixed;
      left: 0;
      bottom: 22px;
      width: 132px;
      height: 112px;
      z-index: 10001;
      pointer-events: none;
      color: #00b894;
      opacity: 0.86;
      transform-origin: 24px 100%;
      animation: taskbarHintFloat 2.8s ease-in-out infinite;
    }

    .taskbar-spiral-arrow {
      width: 100%;
      height: 100%;
      overflow: visible;
      filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.45)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
      animation: taskbarHintPop 0.42s ease-out both;
    }

    .taskbar-spiral-line,
    .taskbar-arrow-head {
      fill: none;
      stroke: currentColor;
      stroke-width: 4.25;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .taskbar-spiral-line {
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
      animation: taskbarSpiralDraw 1.85s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
    }

    .taskbar-arrow-head {
      opacity: 0;
      transform-box: fill-box;
      transform-origin: center;
      animation: taskbarArrowHeadIn 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) 1.92s forwards;
    }

    .taskbar-hint-dismissed {
      animation: taskbarHintExit 0.24s ease-in forwards;
    }

    @keyframes taskbarSpiralDraw {
      to { stroke-dashoffset: 0; }
    }

    @keyframes taskbarHintFloat {
      0%, 100% { transform: translateY(0) rotate(-1deg); }
      50% { transform: translateY(-4px) rotate(1deg); }
    }

    @keyframes taskbarHintPop {
      from {
        opacity: 0;
        transform: translateY(5px) scale(0.94) rotate(-5deg);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0);
      }
    }

    @keyframes taskbarArrowHeadIn {
      from {
        opacity: 0;
        transform: scale(0.72);
      }
      72% {
        opacity: 1;
        transform: scale(1.08);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    @keyframes taskbarHintExit {
      to {
        opacity: 0;
        transform: translateY(8px) scale(0.96);
      }
    }

    .taskbar-start {
      flex-shrink: 0;
      margin-right: 4px;
    }

    .taskbar-start-btn {
      width: 26px;
      height: 22px;
      border: none;
      border-radius: 4px;
      background: linear-gradient(135deg, rgba(0, 184, 148, 0.2), rgba(0, 184, 148, 0.05));
      color: var(--accent);
      font-size: 12px;
      cursor: pointer;
      transition: all 0.15s;
    }

    .taskbar-start-btn:hover {
      background: linear-gradient(135deg, rgba(0, 184, 148, 0.35), rgba(0, 184, 148, 0.1));
      box-shadow: 0 0 12px rgba(0, 184, 148, 0.2);
    }

    .taskbar-windows {
      display: flex;
      gap: 3px;
      flex: 1;
      overflow-x: auto;
      padding: 0 4px;
    }

    .taskbar-windows::-webkit-scrollbar { height: 0; }

    .taskbar-btn {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 2px 8px;
      height: 24px;
      background: var(--overlay-subtle);
      border: 1px solid transparent;
      border-radius: 4px;
      color: var(--muted);
      font-size: 10px;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.12s;
      font-family: inherit;
    }

    .taskbar-btn:hover {
      background: var(--overlay-active);
      color: var(--text);
    }

    .taskbar-btn.taskbar-active {
      background: var(--overlay-hover);
      border-bottom: 2px solid var(--tb-accent, var(--accent));
      color: var(--text);
    }

    .taskbar-btn.taskbar-focused {
      background: var(--accent-faint);
      border-color: var(--accent-light);
      border-bottom: 2px solid var(--tb-accent, var(--accent));
    }

    .taskbar-btn.taskbar-minimized {
      opacity: 0.5;
    }

    .taskbar-btn-icon {
      font-size: 11px;
    }

    .taskbar-btn-label {
      max-width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .taskbar-tray {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-shrink: 0;
      margin-left: auto;
    }

    .taskbar-tray-btn {
      width: 26px;
      height: 24px;
      border: none;
      border-radius: 4px;
      background: var(--overlay-subtle);
      color: var(--muted);
      font-size: 13px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.12s;
    }

    .taskbar-tray-btn:hover {
      background: var(--overlay-active);
      color: var(--text);
    }

    .taskbar-separator {
      width: 1px;
      height: 18px;
      background: var(--border);
      margin: 0 4px;
    }

    .taskbar-clock {
      font-size: 11px;
      color: var(--muted);
      font-family: 'Courier New', monospace;
      letter-spacing: 0.5px;
      padding: 0 6px;
      min-width: 65px;
      text-align: right;
    }

    /* ── Start Menu ── */
    .wm-start-menu,
    .wm-workspace-menu {
      position: absolute;
      bottom: 34px;
      left: 4px;
      width: 200px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 6px;
      box-shadow: 0 6px 24px var(--card-shadow);
      padding: 4px;
      z-index: 10003;
      backdrop-filter: blur(16px);
      animation: startMenuOpen 0.15s ease-out;
    }

    .wm-workspace-menu {
      left: auto;
      right: 76px;
      width: 210px;
    }

    .wm-menu-label {
      padding: 5px 10px 4px;
      color: var(--muted);
      font-size: 9px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    @keyframes startMenuOpen {
      from { opacity: 0; transform: translateY(8px) scale(0.96); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }

    .wm-start-item {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      padding: 6px 10px;
      border: none;
      border-radius: 4px;
      background: transparent;
      color: var(--text);
      font-size: 11px;
      cursor: pointer;
      text-align: left;
      font-family: inherit;
      transition: background 0.1s;
    }

    .wm-start-item:hover {
      background: var(--overlay-active);
    }

    .wm-start-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      color: var(--muted);
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      font-size: 12px;
      font-weight: 700;
      line-height: 1;
      text-align: center;
    }

    .wm-start-label {
      flex: 1;
    }

    .wm-start-status {
      font-size: 8px;
      color: var(--accent);
    }

    .wm-start-sep {
      height: 1px;
      background: var(--border-subtle);
      margin: 4px 8px;
    }

    /* ── Workbench window adjustments ── */
    /* Hide redundant close button and title from workbench header when windowed */
    body.windowed-layout #workbench-header .danger:last-child {
      display: none;
    }
    body.windowed-layout #workbench-header h2 {
      display: none;
    }
    body.windowed-layout #workbench-header {
      padding: 6px 12px;
    }

    /* Hide redundant help panel header close button when windowed */
    body.windowed-layout .help-panel-header .help-nav-btn:last-child {
      display: none;
    }

    /* Tree container fills window body fully — no interior border */
    body.windowed-layout .tree-container {
      max-height: none !important;
      height: 100%;
      border: none;
      border-radius: 0;
      background: transparent;
      padding: 8px 10px;
    }

    /* Detail panels lose their card-style border inside windows */
    body.windowed-layout .detail-panel {
      border: none;
      border-radius: 0;
      background: transparent;
      margin-bottom: 2px;
    }

    /* Detail view scrolls naturally in window body */
    body.windowed-layout #detail-view {
      max-height: none;
      overflow-y: auto;
    }

    /* ── Responsive: Mobile windowing ── */
    /* Covers phones in portrait (≤768px) AND touch devices such as large phones
       in landscape and iPad-sized screens up to 1024px wide (pointer: coarse). */
    @media (max-width: 768px), (max-width: 1024px) and (pointer: coarse) {
      /* Remove body padding so windows reach screen edges */
      body.windowed-layout {
        padding: 0 !important;
        padding-top: 0 !important;
        overflow-x: hidden;
      }

      /* Header needs safe-area padding instead */
      body.windowed-layout header {
        padding-left: max(8px, env(safe-area-inset-left, 0px));
        padding-right: max(8px, env(safe-area-inset-right, 0px));
        margin-bottom: 0;
        min-height: 44px;
      }

      body.windowed-layout .layout {
        height: auto !important; /* JS _syncDesktopHeight is skipped on mobile; CSS wins */
        overflow: hidden auto;   /* x: hidden (no stray h-scroll), y: allow scroll */
        -webkit-overflow-scrolling: touch;
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); /* taskbar + home indicator */
        width: 100vw;
        max-width: 100vw;
      }

      /* Windows become full-width stacked cards */
      .app-window {
        position: relative !important;
        left: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100vw !important;
        height: auto !important;
        min-height: 0 !important;
        border-radius: 0;
        margin-bottom: 2px;
        border-left: none;
        border-right: none;
        overflow: hidden;
      }

      /* Portrait phones/tablets: keep visible side outlines and a tiny gutter */
      @media (orientation: portrait) {
        body.windowed-layout .layout {
          width: 100% !important;
          max-width: 100% !important;
          padding-left: max(6px, env(safe-area-inset-left, 0px));
          padding-right: max(6px, env(safe-area-inset-right, 0px));
          box-sizing: border-box;
        }

        .app-window {
          width: 100% !important;
          max-width: 100% !important;
          border-left: 1px solid var(--border);
          border-right: 1px solid var(--border);
          border-radius: 8px;
          margin-bottom: 6px;
        }
      }

      .app-window.win-closed,
      .app-window.win-minimized {
        display: none !important;
      }

      /* Give window bodies a reasonable height on mobile */
      .app-window .window-body {
        max-height: 75vh;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding-left: max(4px, env(safe-area-inset-left, 0px));
        padding-right: max(4px, env(safe-area-inset-right, 0px));
      }

      /* Ensure inner content doesn't overflow horizontally */
      .app-window .window-body > * {
        max-width: 100%;
        overflow-x: auto;
      }

      /* Titlebar: no drag cursor, auto height so buttons aren't clipped by height: 26px */
      .window-titlebar {
        cursor: default;
        height: auto !important;
        min-height: 48px;
        padding: 6px 8px 6px 12px;
        -webkit-user-select: none;
        user-select: none;
      }

      /* Larger window control buttons for touch */
      .win-btn {
        width: 44px;
        height: 44px;
        font-size: 18px;
        min-width: 44px;
        min-height: 44px; /* Ensure tap target meets 44px minimum even with button { min-height } override */
        padding: 0; /* override general button { padding: 10px 16px } from mobile styles */
        touch-action: manipulation;
      }

      .win-btn:active {
        background: var(--overlay-active);
        color: var(--text);
      }

      .win-close:active {
        background: rgba(192, 57, 43, 0.6) !important;
        color: #fff !important;
      }

      /* Hide maximize — not useful on mobile stacked layout */
      .win-maximize {
        display: none;
      }

      .resize-handle {
        display: none !important;
      }

      /* Snap preview never shown on mobile */
      .snap-preview {
        display: none !important;
      }

      /* ── Taskbar mobile ── */
      /* Keep start + tray pinned; only the window-button strip scrolls */
      .window-taskbar {
        height: calc(52px + env(safe-area-inset-bottom, 0px));
        padding: 4px 6px;
        padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
        padding-left: max(6px, env(safe-area-inset-left, 0px));
        padding-right: max(6px, env(safe-area-inset-right, 0px));
        gap: 4px;
        flex-wrap: nowrap;
        overflow: visible; /* outer bar must NOT scroll — inner .taskbar-windows handles it */
      }

      .taskbar-attention-hint {
        left: 0;
        bottom: calc(30px + env(safe-area-inset-bottom, 0px));
        width: 118px;
        height: 100px;
      }

      .taskbar-start {
        flex-shrink: 0;
      }

      .taskbar-start-btn {
        min-width: 44px;
        height: 44px;
        font-size: 18px;
        flex-shrink: 0;
        touch-action: manipulation;
      }

      .taskbar-windows {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        flex: 1;
        min-width: 0; /* allow shrinking below content size so tray stays visible */
      }

      .taskbar-btn {
        height: 40px;
        padding: 0 10px;
        font-size: 11px;
        flex-shrink: 0;
        min-width: 0;
        touch-action: manipulation;
      }

      .taskbar-btn:active {
        background: var(--overlay-active);
        color: var(--text);
      }

      .taskbar-btn-icon {
        font-size: 14px;
      }

      .taskbar-btn-label {
        max-width: 70px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      /* Hide tile/cascade/reset — these actions don't apply to mobile stacked layout */
      .taskbar-tray-btn {
        display: none !important;
      }

      .taskbar-tray {
        flex-shrink: 0;
        gap: 0;
      }

      .taskbar-separator {
        display: none;
      }

      .taskbar-clock {
        display: none;
      }

      /* ── Start menu mobile: full-width bottom sheet ── */
      .wm-start-menu {
        position: fixed;
        bottom: 52px;
        left: 0;
        right: 0;
        width: auto;
        max-height: 60vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 12px 12px 0 0;
        border-bottom: none;
        animation: startMenuOpenMobile 0.2s ease-out;
      }

      @keyframes startMenuOpenMobile {
        from { opacity: 0; transform: translateY(20px); }
        to   { opacity: 1; transform: translateY(0); }
      }

      .wm-start-item {
        padding: 12px 16px;
        font-size: 14px;
        gap: 12px;
        min-height: 44px;
      }

      .wm-start-icon {
        font-size: 15px;
        width: 28px;
      }

      .wm-start-status {
        font-size: 10px;
      }

      /* ── App window split-panes: stack vertically ── */
      .ref-window-container {
        flex-direction: column;
      }

      .ref-window-tree {
        width: 100% !important;
        max-height: 35vh;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.1);
      }

      .ref-window-detail {
        min-height: 40vh;
      }

      /* JSN Lookup app */
      .jsn-app-container {
        flex-direction: column;
      }

      .jsn-app-nav {
        width: 100% !important;
        min-width: 0;
        max-height: 30vh;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.1);
      }

      .jsn-app-detail {
        min-height: 40vh;
      }

      /* ── Reel Recorder window on mobile ──
         Desktop relies on position:absolute;inset:0 inside a sized window, but
         on mobile the height:auto flex chain makes Safari collapse every layer.
         Bypass the whole chain: pull the shell out of absolute positioning and
         give it a direct concrete height so it flows naturally. */
      /* ── Reel Recorder: force content to expand on mobile ──
         Desktop uses position:absolute;inset:0 which doesn't work when
         the window has height:auto. Switch to a simple flow layout with
         an explicit height so all flex children (controls, canvas,
         transport) render at their natural sizes. */
      [data-win-id^="reel-viz-"] .window-body {
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
      }
      [data-win-id^="reel-viz-"] .dynamic-window-content {
        height: auto !important;
        overflow: visible !important;
        padding: 0 !important;
      }
      [data-win-id^="reel-viz-"] .reel-viz-shell {
        position: relative !important;
        inset: auto !important;
        height: min(420px, 72vh) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
      }
      [data-win-id^="reel-viz-"] .reel-viz-wrap {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
      }
      [data-win-id^="reel-viz-"] .reel-viz-deck {
        flex: 1 1 0 !important;
        min-height: 80px !important;
      }
      [data-win-id^="reel-viz-"] .reel-viz-controls {
        flex-shrink: 0 !important;
      }
      [data-win-id^="reel-viz-"] .reel-viz-transport {
        flex-shrink: 0 !important;
      }
      [data-win-id^="reel-viz-"] .reel-viz-footer {
        flex-shrink: 0 !important;
      }

      /* ── Reel controls: compact on mobile ── */
      .reel-viz-controls-row {
        gap: 3px !important;
      }
      .reel-viz-select {
        font-size: 0.68rem !important;
        min-width: 70px !important;
      }
      .reel-viz-btn {
        font-size: 0.68rem !important;
        padding: 3px 4px !important;
      }

      /* ── Transcript window on mobile ── */
      [data-win-id^="reel-transcript-"] .window-body {
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
      }
      [data-win-id^="reel-transcript-"] .dynamic-window-content {
        height: auto !important;
        overflow: visible !important;
        padding: 0 !important;
      }
      [data-win-id^="reel-transcript-"] .reel-tx-win {
        position: relative !important;
        inset: auto !important;
        min-height: 200px;
        max-height: 60vh;
      }

      /* ── Note editor: compact toolbar on mobile ── */
      .note-editor-toolbar {
        flex-wrap: wrap;
        gap: 1px;
        padding: 3px 2px;
      }
      .note-tb-btn {
        padding: 6px 7px;
        font-size: 0.9rem;
        min-width: 36px;
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      .note-tb-sep {
        height: 12px;
        margin: 0 2px;
      }
      .un-tags-inline-row {
        padding: 2px 4px 4px;
      }
    }

    /* ── Detail window bar (Open in Window) ── */
    .detail-window-bar {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 6px;
      padding: 2px 4px 3px;
    }

    .detail-window-hint {
      font-size: 0.62rem;
      color: rgba(255,255,255,0.2);
      font-style: italic;
    }

    .detail-window-btn {
      padding: 2px 8px;
      font-size: 0.68rem;
      background: transparent;
      border: 1px solid var(--border-subtle);
      color: var(--muted);
      border-radius: 3px;
      cursor: pointer;
      transition: all 0.15s;
    }

    .detail-window-btn:hover {
      color: var(--text);
      border-color: var(--border);
      background: var(--overlay-hover);
    }

    /* ── Dynamic window content ── */
    .dynamic-window-content {
      padding: 4px 6px;
    }

    /* Accent icon glow on focused window titlebar */
    .win-focused .window-icon {
      filter: drop-shadow(0 0 4px rgba(255,255,255,0.2));
    }

    /* Window title shows accent color when set */
    .window-titlebar[style*="--win-accent"] .window-title {
      color: var(--win-accent);
      opacity: 0.8;
    }
    .win-focused .window-titlebar[style*="--win-accent"] .window-title {
      opacity: 1;
    }

    /* ── Tasks Hub Node System ── */
    .tasks-hub {
      padding: 2px 0;
    }

    .hub-disc-row {
      padding: 4px 8px 4px 6px;
      transition: background 0.12s;
    }

    .hub-disc-row:hover {
      background: rgba(255,255,255,0.04);
    }

    .hub-disc-row.hub-expanded {
      background: rgba(39,174,96,0.06);
      color: #27ae60;
    }

    .hub-disc-info {
      display: flex;
      align-items: center;
      gap: 5px;
      cursor: pointer;
    }

    .hub-disc-toggle {
      font-size: 9px;
      color: var(--muted);
      width: 12px;
      flex-shrink: 0;
    }

    .hub-disc-name {
      font-size: 0.78rem;
      color: var(--text);
      flex: 1;
    }

    .hub-disc-count {
      font-size: 0.65rem;
      color: var(--muted);
      background: rgba(255,255,255,0.04);
      padding: 1px 5px;
      border-radius: 3px;
      font-variant-numeric: tabular-nums;
    }

    .hub-disc-bar {
      height: 2px;
      background: rgba(255,255,255,0.06);
      border-radius: 1px;
      margin: 2px 0 1px 17px;
      overflow: hidden;
    }

    .hub-disc-bar-fill {
      height: 100%;
      background: #27ae60;
      border-radius: 1px;
      transition: width 0.3s;
    }

    /* ── Discipline Node Bar (inside expanded disc window) ── */
    .task-disc-node-bar {
      display: flex;
      gap: 4px;
      padding: 3px 6px;
      border-bottom: 1px solid rgba(255,255,255,0.05);
    }

    .task-child-btn {
      padding: 2px 7px;
      font-size: 0.68rem;
      background: transparent;
      border: 1px solid rgba(255,255,255,0.08);
      color: var(--muted);
      border-radius: 3px;
      cursor: pointer;
      transition: all 0.12s;
    }

    .task-child-btn:hover {
      background: rgba(255,255,255,0.05);
      border-color: rgba(255,255,255,0.15);
      color: var(--text);
    }

    /* ── Child Note Node ── */
    .task-child-note {
      height: 100%;
    }

    .task-child-textarea {
      width: 100%;
      height: 100%;
      background: transparent;
      color: var(--text);
      border: none;
      resize: none;
      font-family: inherit;
      font-size: 0.8rem;
      padding: 6px 8px;
      line-height: 1.5;
    }

    .task-child-textarea:focus {
      outline: none;
    }

    .task-child-textarea::placeholder {
      color: rgba(255,255,255,0.2);
    }

    /* ── Child Photo Node ── */
    .task-child-photo {
      padding: 4px;
      height: 100%;
    }

    .task-child-photo img {
      width: 100%;
      height: auto;
      display: block;
    }

    .task-child-photo-clear {
      display: block;
      width: 100%;
      margin-top: 4px;
      padding: 2px 0;
      background: transparent;
      border: 1px solid rgba(255,255,255,0.08);
      color: var(--muted);
      font-size: 0.68rem;
      border-radius: 3px;
      cursor: pointer;
    }

    .task-child-photo-clear:hover {
      background: rgba(192,57,43,0.15);
      border-color: rgba(192,57,43,0.3);
      color: #e74c3c;
    }

    .photo-drop-zone {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      min-height: 80px;
      height: calc(100% - 8px);
      border: 1.5px dashed rgba(255,255,255,0.12);
      border-radius: 4px;
      color: var(--muted);
      font-size: 0.75rem;
      cursor: pointer;
      transition: all 0.15s;
    }

    .photo-drop-zone:hover,
    .photo-drop-zone.drag-over {
      border-color: rgba(66,165,245,0.5);
      background: rgba(66,165,245,0.04);
    }

    /* ═══════════════════════════════════════════════════════════════
       NOTES FEATURE
       ═══════════════════════════════════════════════════════════════ */

    /* ── Notes Overview (Hub) ── */
    .notes-overview {
      padding: 16px;
    }
    .notes-overview-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }
    .notes-overview-header h3 {
      margin: 0;
      font-size: 1rem;
      font-weight: 600;
    }
    .note-add-btn {
      background: rgba(249,168,37,0.12);
      color: #f9a825;
      border: 1px solid rgba(249,168,37,0.25);
      border-radius: 6px;
      padding: 5px 14px;
      font-size: 0.8rem;
      cursor: pointer;
      transition: all 0.15s;
    }
    .note-add-btn:hover {
      background: rgba(249,168,37,0.22);
      border-color: rgba(249,168,37,0.4);
    }
    .notes-overview-empty {
      text-align: center;
      padding: 32px 16px;
      color: var(--muted);
    }
    .notes-overview-empty p:first-child {
      font-size: 0.95rem;
      margin-bottom: 8px;
    }
    .notes-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .notes-list-item {
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      padding: 10px 14px;
      cursor: pointer;
      transition: all 0.15s;
    }
    .notes-list-item:hover {
      background: rgba(249,168,37,0.06);
      border-color: rgba(249,168,37,0.2);
    }
    .notes-list-item-title {
      font-weight: 500;
      font-size: 0.88rem;
      margin-bottom: 4px;
    }
    .notes-list-item-meta {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 0.72rem;
      color: var(--muted);
    }
    .notes-list-chip-badge {
      color: #f9a825;
    }
    /* Download / export button on each note row */
    .un-export-btn {
      margin-left: auto;
      background: transparent;
      border: none;
      color: var(--muted);
      font-size: 13px;
      cursor: pointer;
      padding: 0 2px;
      line-height: 1;
      opacity: 0;
      transition: opacity 0.12s;
      min-height: 0;
      min-width: 0;
    }
    .notes-list-item:hover .un-export-btn,
    .notes-list-item:focus-within .un-export-btn {
      opacity: 0.6;
    }
    .un-export-btn:hover {
      opacity: 1 !important;
      color: var(--accent);
    }
    /* Always visible on touch devices */
    @media (pointer: coarse) {
      .un-export-btn { opacity: 0.5; }
    }
    .notes-list-item-preview {
      font-size: 0.78rem;
      color: var(--muted);
      margin-top: 4px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* ── Note Editor ── */
    .note-editor {
      display: flex;
      flex-direction: column;
      height: 100%;
      padding: 12px;
      gap: 8px;
      overflow-y: auto;
    }
    .note-editor-empty {
      padding: 32px;
      text-align: center;
      color: var(--muted);
    }
    .note-editor-title-row {
      flex-shrink: 0;
    }
    .note-editor-title {
      width: 100%;
      background: transparent;
      border: none;
      border-bottom: 1px solid var(--user-note-divider);
      color: var(--text);
      font-size: 1.15rem;
      font-weight: 600;
      padding: 4px 0 6px;
      outline: none;
      font-family: inherit;
    }
    .note-editor-title:focus {
      border-bottom-color: #f9a825;
    }
    .note-editor-title::placeholder {
      color: var(--muted);
      opacity: 0.5;
    }

    /* ── Note Editor Toolbar ── */
    .note-editor-toolbar {
      display: flex;
      align-items: center;
      gap: 1px;
      flex-shrink: 0;
      padding: 0;
      border-bottom: 1px solid var(--user-note-divider);
    }
    .note-tb-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      height: 24px;
      min-width: 24px;
      padding: 0 6px;
      background: transparent;
      border: 1px solid transparent;
      color: var(--text);
      opacity: 0.76;
      font-size: 0.88rem;
      line-height: 1;
      border-radius: 5px;
      cursor: pointer;
      transition: background 0.12s, border-color 0.12s, color 0.12s, opacity 0.12s;
      font-family: inherit;
      font-weight: 500;
    }
    .note-tb-btn:hover {
      opacity: 1;
      background: var(--overlay-active);
      border-color: rgba(124,77,255,0.18);
      color: var(--text-primary);
    }
    .note-tb-btn--icon {
      width: 24px;
      padding: 0;
    }
    .note-tb-btn--label {
      min-width: 0;
      padding: 0 7px 0 6px;
      font-size: 0.76rem;
      font-weight: 600;
      white-space: nowrap;
    }
    .note-tb-glyph {
      display: inline-flex;
      width: 16px;
      height: 16px;
      align-items: center;
      justify-content: center;
      line-height: 1;
    }
    .note-tb-icon {
      width: 17px;
      height: 17px;
      display: block;
      flex-shrink: 0;
      stroke: currentColor;
    }
    .note-tb-glyph .note-tb-icon {
      width: 16px;
      height: 16px;
    }
    .note-tb-btn strong,
    .note-tb-btn em {
      font-size: 0.86rem;
      font-weight: 650;
      line-height: 1;
    }
    .note-tb-btn--danger {
      opacity: 0.42;
    }
    .note-tb-btn--danger:hover {
      color: #ef9a9a;
      border-color: rgba(239,83,80,0.28);
      background: rgba(239,83,80,0.12);
    }
    .note-tb-btn .un-tb-hl {
      display: inline-block;
      padding: 1px 3px;
      border-radius: 3px;
      background: var(--warning-yellow-faint);
      color: var(--warning-yellow);
      font-size: 0.66rem;
      line-height: 1.1;
      font-weight: 700;
      letter-spacing: 0;
    }
    .note-tb-sep {
      width: 1px;
      height: 14px;
      background: var(--user-note-divider);
      margin: 0 3px;
      flex-shrink: 0;
    }
    /* ── Toolbar overflow "Blocks" dropdown ── */
    .un-tb-more-wrap {
      position: relative;
      display: inline-flex;
    }
    /* Bullet style split-button (bullet + style/numbering caret) — reuses
       the "Blocks" dropdown menu styling above. */
    .un-tb-split {
      align-items: center;
    }
    .note-tb-btn--caret {
      width: 13px;
      min-width: 13px;
      padding: 0;
      opacity: 0.55;
    }
    .note-tb-btn--caret:hover {
      opacity: 1;
    }
    .note-tb-btn--caret .note-tb-icon {
      width: 11px;
      height: 11px;
    }
    .note-tb-more-btn {
      opacity: 0.72;
      border: 1px solid var(--user-note-control-border) !important;
      border-radius: 4px !important;
    }
    .note-tb-more-btn:hover {
      opacity: 1;
      border-color: var(--user-note) !important;
    }
    .un-tb-more-menu {
      display: none;
      position: absolute;
      top: calc(100% + 4px);
      left: 0;
      z-index: 500;
      background: var(--dialog-bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      box-shadow: 0 6px 20px rgba(0,0,0,0.25);
      padding: 4px;
      min-width: 140px;
      flex-direction: column;
      gap: 2px;
    }
    .un-tb-more-menu.un-tb-more-open {
      display: flex;
    }
    .un-tb-more-item {
      background: transparent;
      border: none;
      color: var(--text);
      font-size: 0.82rem;
      font-family: inherit;
      padding: 7px 12px;
      border-radius: 5px;
      cursor: pointer;
      text-align: left;
      opacity: 0.85;
      transition: background 0.1s, opacity 0.1s;
      white-space: nowrap;
    }
    .un-tb-more-item:hover {
      background: var(--overlay-active);
      opacity: 1;
    }
    .un-quick-tags-row {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      margin-top: -1px;
      padding: 2px 0 6px;
      border-bottom: 1px solid var(--user-note-divider);
    }
    .un-quick-tags-label {
      font-size: 0.68rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--muted);
      margin-right: 2px;
    }
    .un-quick-tags-hint {
      margin-left: auto;
      font-size: 0.68rem;
      color: var(--user-note-placeholder);
      cursor: default;
    }
    .un-quick-tag-btn {
      border: 1px solid var(--user-note-control-border);
      background: var(--overlay-subtle);
      color: var(--text);
      border-radius: 999px;
      padding: 3px 9px;
      font-size: 0.72rem;
      line-height: 1.25;
      cursor: pointer;
      transition: border-color 0.12s, background 0.12s;
    }
    .un-quick-tag-btn:hover {
      border-color: var(--user-note);
      background: var(--user-note-faint);
    }
    .un-quick-tag-btn--todo {
      border-color: rgba(90, 200, 120, 0.4);
    }
    .un-quick-tag-btn--important {
      border-color: rgba(255, 190, 70, 0.42);
    }
    .un-quick-tag-btn--question {
      border-color: rgba(90, 170, 255, 0.42);
    }
    .un-quick-tag-btn--contact {
      border-color: rgba(188, 125, 255, 0.42);
    }

    /* ── Note Blocks ── */
    .note-editor-blocks {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-height: 120px;
    }
    .note-block {
      position: relative;
      border-radius: 6px;
      transition: background 0.12s;
    }
    .note-block:hover {
      background: var(--overlay-subtle);
    }
    .note-block-actions {
      position: absolute;
      top: 2px;
      right: 2px;
      display: none;
      gap: 1px;
      z-index: 1;
    }
    .note-block:hover .note-block-actions {
      display: flex;
    }
    .note-block-btn {
      background: rgba(0,0,0,0.4);
      border: none;
      color: var(--muted);
      font-size: 0.7rem;
      width: 20px;
      height: 20px;
      border-radius: 3px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: color 0.12s;
    }
    .note-block-btn:hover {
      color: var(--text);
    }
    .note-block-btn-del:hover {
      color: #ef5350;
    }

    /* Text block */
    .note-block-text {
      min-height: 28px;
      padding: 6px 8px;
      font-size: 0.85rem;
      line-height: 1.55;
      color: var(--text);
      outline: none;
      border-radius: 4px;
      word-break: break-word;
    }
    .note-block-text:empty::before {
      content: attr(placeholder);
      color: var(--muted);
      opacity: 0.4;
      pointer-events: none;
    }
    .note-block-text:focus {
      background: var(--overlay-subtle);
    }

    /* Heading block */
    .note-block-heading {
      font-size: 1.1rem;
      font-weight: 600;
      padding: 6px 8px;
      outline: none;
      border-radius: 4px;
      color: var(--text);
    }
    .note-block-heading:empty::before {
      content: attr(placeholder);
      color: var(--muted);
      opacity: 0.4;
      pointer-events: none;
    }
    .note-block-heading:focus {
      background: var(--overlay-subtle);
    }

    /* Divider block */
    .note-block-divider {
      border: none;
      border-top: 1px solid var(--user-note-divider);
      margin: 8px 0;
    }

    /* Checklist block */
    .note-checklist {
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding: 4px 0;
    }
    .note-check-row {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 2px 8px;
      border-radius: 4px;
    }
    .note-check-row:hover {
      background: var(--overlay-subtle);
    }
    .note-check-box {
      flex-shrink: 0;
      accent-color: #f9a825;
    }
    .note-check-text {
      flex: 1;
      font-size: 0.82rem;
      outline: none;
      min-height: 20px;
      line-height: 1.4;
    }
    .note-check-done {
      text-decoration: line-through;
      opacity: 0.5;
    }
    .note-check-remove {
      background: none;
      border: none;
      color: var(--muted);
      font-size: 0.7rem;
      cursor: pointer;
      opacity: 0;
      transition: opacity 0.12s;
    }
    .note-check-row:hover .note-check-remove {
      opacity: 0.6;
    }
    .note-check-remove:hover {
      color: #ef5350;
      opacity: 1 !important;
    }
    .note-check-add {
      background: transparent;
      border: none;
      border-bottom: 1px solid var(--user-note-divider);
      color: var(--text);
      font-size: 0.82rem;
      padding: 4px 8px;
      outline: none;
      margin-top: 2px;
      font-family: inherit;
    }
    .note-check-add::placeholder {
      color: var(--muted);
      opacity: 0.4;
    }

    /* Image block */
    .note-image-container {
      padding: 4px;
    }
    .note-block-img {
      max-width: 100%;
      border-radius: 6px;
      display: block;
    }
    .note-img-remove {
      background: rgba(192,57,43,0.12);
      border: 1px solid rgba(192,57,43,0.25);
      color: #e74c3c;
      border-radius: 4px;
      padding: 3px 8px;
      font-size: 0.72rem;
      cursor: pointer;
      margin-top: 4px;
      transition: all 0.12s;
    }
    .note-img-remove:hover {
      background: rgba(192,57,43,0.25);
    }
    .note-img-caption {
      width: 100%;
      background: transparent;
      border: none;
      border-bottom: 1px solid var(--user-note-divider);
      color: var(--muted);
      font-size: 0.78rem;
      padding: 4px 0;
      outline: none;
      margin-top: 4px;
      font-family: inherit;
    }
    .note-img-drop {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-height: 80px;
      border: 1.5px dashed rgba(249,168,37,0.2);
      border-radius: 6px;
      color: var(--muted);
      font-size: 0.78rem;
      cursor: pointer;
      transition: all 0.15s;
      padding: 16px;
    }
    .note-img-drop:hover,
    .note-img-drop.drag-over {
      border-color: rgba(249,168,37,0.5);
      background: rgba(249,168,37,0.04);
    }

    /* ── Note Editor Footer ── */
    .note-editor-footer {
      flex-shrink: 0;
      padding: 6px 0 0;
      border-top: 1px solid var(--user-note-divider);
    }
    .note-editor-meta {
      font-size: 0.7rem;
      color: var(--muted);
      opacity: 0.6;
    }

    /* ── Note Chips Summary ── */
    .note-chips-summary {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 4px;
      padding: 8px 0;
      border-top: 1px solid var(--user-note-divider);
      margin-top: 4px;
    }
    .note-chips-label {
      font-size: 0.72rem;
      color: var(--muted);
      margin-right: 4px;
    }
    .note-chip-tag {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: rgba(249,168,37,0.1);
      border: 1px solid rgba(249,168,37,0.2);
      border-radius: 12px;
      padding: 2px 8px 2px 10px;
      font-size: 0.72rem;
      color: #f9a825;
    }
    .note-chip-remove {
      background: none;
      border: none;
      color: rgba(249,168,37,0.6);
      font-size: 0.7rem;
      cursor: pointer;
      padding: 0 2px;
      line-height: 1;
    }
    .note-chip-remove:hover {
      color: #ef5350;
    }

    /* ── Chip Modal ── */
    #note-chip-modal-wrap {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.5);
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .note-chip-modal-inner {
      background: var(--dialog-bg);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 20px;
      min-width: 320px;
      max-width: 500px;
      max-height: 60vh;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .note-chip-modal-inner h4 {
      margin: 0;
      font-size: 0.95rem;
    }
    .note-chip-task-list {
      overflow-y: auto;
      max-height: 300px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .note-chip-task-option {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 8px;
      border-radius: 6px;
      font-size: 0.82rem;
      cursor: pointer;
      transition: background 0.12s;
    }
    .note-chip-task-option:hover {
      background: rgba(255,255,255,0.04);
    }
    .note-chip-task-disc {
      font-size: 0.7rem;
      color: var(--teal);
      background: rgba(128,203,196,0.08);
      padding: 1px 6px;
      border-radius: 8px;
      flex-shrink: 0;
    }
    .note-chip-modal-close {
      align-self: flex-end;
      background: rgba(249,168,37,0.12);
      color: #f9a825;
      border: 1px solid rgba(249,168,37,0.25);
      border-radius: 6px;
      padding: 6px 20px;
      font-size: 0.82rem;
      cursor: pointer;
      transition: all 0.12s;
    }
    .note-chip-modal-close:hover {
      background: rgba(249,168,37,0.22);
    }

    /* ── End Notes Feature ── */

    /* ── User Notes Feature ── */
    .user-notes-overview {
      padding: 16px;
      font-size: 0.85rem;
      overflow-y: auto;
      height: 100%;
    }
    .user-notes-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
    }
    .user-notes-header h3 {
      margin: 0;
      font-size: 1rem;
      color: var(--user-note);
    }
    .user-notes-status {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      background: var(--user-note-faint);
      border: 1px solid rgba(124,77,255,0.25);
      border-radius: 8px;
      margin-bottom: 14px;
      font-size: 0.82rem;
      color: var(--text-secondary);
    }
    .user-notes-connect-btn {
      background: var(--user-note);
      color: #fff;
      border: none;
      border-radius: 6px;
      padding: 7px 16px;
      font-size: 0.82rem;
      cursor: pointer;
      transition: background 0.15s;
    }
    .user-notes-connect-btn:hover {
      background: #6a3de8;
    }
    .user-notes-folder-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 12px;
      background: var(--user-note-faint);
      border: 1px solid rgba(124,77,255,0.2);
      border-radius: 8px;
      margin-bottom: 14px;
    }
    .user-notes-folder-name {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 0.82rem;
      color: var(--text-secondary);
    }
    .user-notes-folder-icon {
      font-size: 1rem;
    }
    .user-notes-disconnect-btn {
      background: none;
      border: 1px solid rgba(124,77,255,0.3);
      color: var(--user-note);
      border-radius: 5px;
      padding: 4px 10px;
      font-size: 0.75rem;
      cursor: pointer;
      transition: background 0.15s;
    }
    .user-notes-disconnect-btn:hover {
      background: rgba(124,77,255,0.12);
    }
    .user-notes-empty {
      text-align: center;
      padding: 28px 14px;
      color: var(--text-secondary);
      font-size: 0.82rem;
      opacity: 0.7;
    }
    .user-notes-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .user-notes-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 12px;
      background: rgba(124,77,255,0.06);
      border: 1px solid rgba(124,77,255,0.15);
      border-radius: 7px;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s;
    }
    .user-notes-card:hover {
      background: rgba(124,77,255,0.12);
      border-color: rgba(124,77,255,0.3);
    }
    .user-notes-card-title {
      font-weight: 500;
      font-size: 0.84rem;
      color: var(--text-primary);
    }
    .user-notes-card-meta {
      font-size: 0.72rem;
      color: var(--text-secondary);
      margin-top: 2px;
    }
    .user-notes-card-actions {
      display: flex;
      gap: 4px;
    }
    .user-notes-card-actions button {
      background: none;
      border: none;
      color: var(--text-secondary);
      cursor: pointer;
      padding: 3px 5px;
      border-radius: 4px;
      font-size: 0.8rem;
      transition: background 0.12s, color 0.12s;
    }
    .user-notes-card-actions button:hover {
      background: rgba(124,77,255,0.15);
      color: var(--user-note);
    }
    .user-note-editor {
      display: flex;
      flex-direction: column;
      height: 100%;
      padding: 5px 8px 0;
      gap: 1px;
    }
    /* ── Chrome bar: title + view controls in one thin row ── */
    .un-chrome-bar {
      display: flex;
      align-items: center;
      gap: 1px;
      padding: 0 0 1px;
      flex-shrink: 0;
      border-bottom: 1px solid var(--user-note-divider);
    }
    .un-chrome-bar .note-editor-title {
      flex: 1;
      min-width: 0;
      font-size: 0.88rem;
      font-weight: 600;
      padding: 2px 4px;
      border-bottom: none;
    }
    /* Hide formatting toolbar in canvas mode */
    .user-note-editor[data-canvas-mode] .note-editor-toolbar {
      display: none;
    }
    /* Tags row hidden when empty */
    .un-tags-row-hidden {
      display: none !important;
    }
    .user-note-editor-toolbar {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-wrap: wrap;
    }
    .user-note-editor-toolbar button {
      background: rgba(124,77,255,0.08);
      border: 1px solid rgba(124,77,255,0.18);
      color: var(--text-secondary);
      border-radius: 5px;
      padding: 4px 8px;
      font-size: 0.75rem;
      cursor: pointer;
      transition: background 0.12s, color 0.12s;
    }
    .user-note-editor-toolbar button:hover {
      background: rgba(124,77,255,0.18);
      color: var(--user-note);
    }
    .user-note-title-input {
      background: rgba(0,0,0,0.15);
      border: 1px solid rgba(124,77,255,0.2);
      border-radius: 6px;
      color: var(--text-primary);
      padding: 8px 10px;
      font-size: 0.92rem;
      font-weight: 500;
      outline: none;
      transition: border-color 0.15s;
    }
    .user-note-title-input:focus {
      border-color: var(--user-note);
    }
    .user-note-textarea {
      flex: 1;
      background: var(--user-note-editor-bg);
      border: 1px solid rgba(124,77,255,0.15);
      border-radius: 6px;
      color: var(--text-primary);
      padding: 10px 12px;
      font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
      font-size: 0.82rem;
      line-height: 1.55;
      resize: none;
      outline: none;
      transition: border-color 0.15s;
      tab-size: 2;
    }
    .user-note-textarea:focus {
      border-color: var(--user-note);
    }

    /* ── User Note WYSIWYG Contenteditable Body ── */
    .user-note-body-ce {
      flex: 1;
      background: var(--user-note-editor-bg);
      border: 1px solid rgba(124,77,255,0.15);
      border-radius: 6px;
      padding: 10px 14px;
      overflow-y: auto;
      min-height: 120px;
      font-size: 0.85rem;
      line-height: 1.65;
      color: var(--text);
      outline: none;
      cursor: text;
      word-break: break-word;
      transition: border-color 0.15s;
      position: relative;
    }
    /* ── Canvas mode ── */
    .user-note-body-ce.un-canvas-mode {
      cursor: default;
      min-height: 480px;
      padding: 0;
      overflow: hidden;
      background: var(--panel-bg);
      /* small plus (+) marks as canvas grid */
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cline x1='10' y1='7' x2='10' y2='13' stroke='%23909090' stroke-width='1' stroke-opacity='0.22'/%3E%3Cline x1='7' y1='10' x2='13' y2='10' stroke='%23909090' stroke-width='1' stroke-opacity='0.22'/%3E%3C/svg%3E");
      background-size: 20px 20px;
    }
    body.light-theme .user-note-body-ce.un-canvas-mode {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cline x1='10' y1='7' x2='10' y2='13' stroke='%23505060' stroke-width='1' stroke-opacity='0.22'/%3E%3Cline x1='7' y1='10' x2='13' y2='10' stroke='%23505060' stroke-width='1' stroke-opacity='0.22'/%3E%3C/svg%3E");
    }
    /* Hint shown when canvas is empty */
    .user-note-body-ce.un-canvas-mode:empty::before {
      content: 'Click anywhere to start writing';
      color: rgba(124,77,255,0.35);
      font-style: italic;
      font-size: 0.85rem;
      pointer-events: none;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    /* Zoom layer that wraps all canvas blocks — transforms without affecting layout */
    .un-canvas-zoom-layer {
      position: absolute;
      top: 0; left: 0;
      min-width: 100%;
      min-height: 100%;
      transform-origin: 0 0;
      will-change: transform;
    }
    /* Zoom-level badge (shown briefly after zooming) */
    .un-canvas-zoom-badge {
      position: absolute;
      bottom: 8px;
      right: 10px;
      background: rgba(0,0,0,0.52);
      color: rgba(255,255,255,0.8);
      font-size: 0.7rem;
      padding: 2px 8px;
      border-radius: 10px;
      pointer-events: none;
      z-index: 50;
      opacity: 0;
      transition: opacity 0.5s;
      user-select: none;
    }
    .un-canvas-zoom-badge.un-zoom-badge-visible {
      opacity: 1;
      transition: opacity 0s;
    }
    /* Pan cursor states */
    .user-note-body-ce.un-canvas-mode.un-canvas-can-pan { cursor: grab; }
    .user-note-body-ce.un-canvas-mode.un-canvas-panning { cursor: grabbing !important; }
    /* Canvas blocks in document (non-canvas) mode — render as normal flow */
    .user-note-body-ce:not(.un-canvas-mode) .un-canvas-block {
      position: static;
      min-width: unset;
      min-height: unset;
      width: auto !important;
      height: auto !important;
      background: none;
      border: none;
      border-radius: 0;
      box-shadow: none;
      display: block;
      left: auto !important;
      top: auto !important;
    }
    .user-note-body-ce:not(.un-canvas-mode) .un-canvas-block:hover {
      box-shadow: none;
    }
    .user-note-body-ce:not(.un-canvas-mode) .un-canvas-block-handle,
    .user-note-body-ce:not(.un-canvas-mode) .un-canvas-block-del,
    .user-note-body-ce:not(.un-canvas-mode) .un-grip-overlay {
      display: none !important;
    }
    .user-note-body-ce:not(.un-canvas-mode) .un-canvas-block-body {
      padding: 0;
      min-height: unset;
    }
    /* Canvas block (canvas mode) */
    .un-canvas-block {
      position: absolute;
      min-width: 160px;
      min-height: 48px;
      background: var(--panel-elevated);
      border: 1px solid rgba(124,77,255,0.22);
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.18);
      display: flex;
      flex-direction: column;
      transition: box-shadow 0.12s;
    }
    .un-canvas-block:hover {
      box-shadow: 0 4px 18px rgba(124,77,255,0.18);
    }
    .un-canvas-block-dragging {
      opacity: 0.75;
      box-shadow: 0 8px 28px rgba(124,77,255,0.3) !important;
      z-index: 10;
    }
    /* Drag handle bar */
    .un-canvas-block-handle {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      padding: 3px 8px;
      background: rgba(124,77,255,0.08);
      border-radius: 7px 7px 0 0;
      cursor: grab;
      user-select: none;
      font-size: 0.7rem;
      letter-spacing: -1px;
      color: rgba(124,77,255,0.55);
      border-bottom: 1px solid rgba(124,77,255,0.12);
    }
    .un-canvas-block-handle:active { cursor: grabbing; }
    /* Delete button inside handle */
    .un-canvas-block-del {
      background: none;
      border: none;
      color: rgba(124,77,255,0.35);
      font-size: 0.68rem;
      cursor: pointer;
      padding: 0 2px;
      margin-left: auto;
      line-height: 1;
      transition: color 0.12s;
    }
    .un-canvas-block-del:hover { color: #ef5350; }
    /* Editable body */
    .un-canvas-block-body {
      flex: 1;
      padding: 8px 12px;
      outline: none;
      font-size: 0.84rem;
      line-height: 1.6;
      color: var(--text);
      min-height: 40px;
      word-break: break-word;
    }
    .un-canvas-block-body:empty::before {
      content: 'Type something\2026';
      color: var(--muted);
      opacity: 0.5;
      pointer-events: none;
    }
    /* Bounding-box resize grips (8 handles, shown on hover/selected) */
    .un-grip-overlay {
      display: none;
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 6;
    }
    .un-canvas-block:hover .un-grip-overlay,
    .un-canvas-block.un-block-selected .un-grip-overlay {
      display: block;
    }
    .un-grip {
      position: absolute;
      width: 9px;
      height: 9px;
      background: #fff;
      border: 1.5px solid rgba(124,77,255,0.85);
      border-radius: 2px;
      pointer-events: all;
      z-index: 7;
      box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    }
    .un-grip[data-dir="nw"] { top: -5px;           left: -5px;           cursor: nwse-resize; }
    .un-grip[data-dir="n"]  { top: -5px;           left: calc(50% - 5px); cursor: ns-resize;   }
    .un-grip[data-dir="ne"] { top: -5px;           right: -5px;          cursor: nesw-resize; }
    .un-grip[data-dir="e"]  { top: calc(50% - 5px); right: -5px;          cursor: ew-resize;   }
    .un-grip[data-dir="se"] { bottom: -5px;        right: -5px;          cursor: nwse-resize; }
    .un-grip[data-dir="s"]  { bottom: -5px;        left: calc(50% - 5px); cursor: ns-resize;   }
    .un-grip[data-dir="sw"] { bottom: -5px;        left: -5px;           cursor: nesw-resize; }
    .un-grip[data-dir="w"]  { top: calc(50% - 5px); left: -5px;           cursor: ew-resize;   }
    /* When a block has an explicit height, body scrolls */
    .un-canvas-block.un-block-sized .un-canvas-block-body {
      overflow-y: auto;
    }
    .user-note-body-ce:focus {
      border-color: rgba(124,77,255,0.45);
    }
    .user-note-body-ce.un-img-drop {
      border-color: rgba(124,77,255,0.7);
      box-shadow: 0 0 0 2px rgba(124,77,255,0.2) inset;
    }
    /* Placeholder via CSS (shown when CE is empty) */
    .user-note-body-ce:empty::before {
      content: attr(data-placeholder);
      color: var(--user-note-placeholder);
      font-style: italic;
      pointer-events: none;
      position: absolute;
    }
    /* Formatted elements inside the CE */
    .user-note-body-ce .un-h {
      color: var(--user-note);
      line-height: 1.3;
      margin-top: 8px;
      margin-bottom: 2px;
      position: relative;
      padding-left: 14px;
    }
    .user-note-body-ce .un-h::before {
      content: '▾';
      position: absolute;
      left: 0;
      top: 0.02em;
      font-size: 0.68rem;
      color: var(--user-note-heading-toggle);
    }
    .user-note-body-ce .un-h.un-heading-collapsed::before {
      content: '▸';
    }
    .user-note-body-ce .un-fold-hidden {
      display: none !important;
    }
    .user-note-body-ce h2.un-h {
      font-size: 0.95rem;
      font-weight: 600;
      border-bottom: 1px solid rgba(124,77,255,0.18);
      padding-bottom: 3px;
    }
    .user-note-body-ce h3.un-h {
      font-size: 0.82rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      opacity: 0.8;
    }
    .user-note-body-ce mark.un-hl {
      background: var(--warning-yellow-faint);
      color: var(--text);
      border-radius: 3px;
      padding: 0 2px;
    }
    .user-note-body-ce .un-quick-tag {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      border-radius: 999px;
      border: 1px solid rgba(124,77,255,0.3);
      background: rgba(124,77,255,0.13);
      color: var(--text);
      padding: 1px 8px;
      margin: 0 2px;
      font-size: 0.72rem;
      line-height: 1.45;
      white-space: nowrap;
      user-select: none;
    }
    .user-note-body-ce .un-quick-tag--todo {
      border-color: rgba(71, 201, 126, 0.45);
      background: rgba(71, 201, 126, 0.14);
      color: var(--text);
    }
    .user-note-body-ce .un-quick-tag--important {
      border-color: rgba(255, 196, 86, 0.5);
      background: rgba(255, 196, 86, 0.16);
      color: var(--text);
    }
    .user-note-body-ce .un-quick-tag--question {
      border-color: rgba(80, 170, 255, 0.5);
      background: rgba(80, 170, 255, 0.16);
      color: var(--text);
    }
    .user-note-body-ce .un-quick-tag--contact {
      border-color: rgba(201, 135, 255, 0.48);
      background: rgba(201, 135, 255, 0.16);
      color: var(--text);
    }
    .user-note-body-ce .un-hr {
      border: none;
      border-top: 1px solid rgba(124,77,255,0.2);
      margin: 8px 0;
    }
    .user-note-body-ce .un-callout {
      border: 1px solid rgba(124,77,255,0.38);
      background: rgba(124,77,255,0.08);
      border-radius: 8px;
      padding: 8px 10px;
      margin: 8px 0;
      display: grid;
      gap: 4px;
    }
    .user-note-body-ce .un-callout-head {
      font-size: 0.7rem;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: var(--text-secondary);
      font-weight: 700;
    }
    .user-note-body-ce .un-callout-body {
      color: var(--text);
      line-height: 1.55;
    }
    .user-note-body-ce .un-callout--tip {
      border-color: rgba(40, 199, 111, 0.48);
      background: rgba(40, 199, 111, 0.12);
    }
    .user-note-body-ce .un-callout--important {
      border-color: rgba(255, 193, 7, 0.52);
      background: rgba(255, 193, 7, 0.14);
    }
    .user-note-body-ce .un-callout--warning {
      border-color: rgba(255, 120, 80, 0.54);
      background: rgba(255, 120, 80, 0.14);
    }
    .user-note-body-ce .un-callout--question {
      border-color: rgba(80, 170, 255, 0.52);
      background: rgba(80, 170, 255, 0.12);
    }
    .user-note-body-ce .un-code {
      background: var(--code-block-bg);
      border: 1px solid rgba(124,77,255,0.2);
      border-radius: 8px;
      padding: 10px 12px;
      margin: 10px 0;
      overflow-x: auto;
      white-space: pre;
    }
    .user-note-body-ce .un-code code {
      font-family: Consolas, Monaco, "Courier New", monospace;
      font-size: 0.78rem;
      color: var(--code-block-text);
      line-height: 1.55;
      display: block;
    }
    .user-note-body-ce .un-table {
      width: 100%;
      border-collapse: collapse;
      margin: 10px 0;
      border: 1px solid rgba(124,77,255,0.22);
      background: var(--overlay-subtle);
    }
    .user-note-body-ce .un-table th,
    .user-note-body-ce .un-table td {
      border: 1px solid rgba(124,77,255,0.18);
      padding: 6px 8px;
      text-align: left;
      vertical-align: top;
    }
    .user-note-body-ce .un-table th {
      background: rgba(124,77,255,0.14);
      font-weight: 600;
      font-size: 0.78rem;
      color: var(--text-primary);
    }
    .user-note-body-ce .un-table td {
      font-size: 0.8rem;
    }
    .user-note-body-ce .un-attachment {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      border: 1px solid rgba(124,77,255,0.24);
      background: rgba(124,77,255,0.08);
      border-radius: 8px;
      padding: 7px 9px;
      margin: 8px 0;
      user-select: none;
    }
    .user-note-body-ce .un-attachment-icon {
      opacity: 0.9;
      font-size: 0.85rem;
    }
    .user-note-body-ce .un-attachment-name {
      color: var(--text);
      font-weight: 600;
      font-size: 0.78rem;
      max-width: min(60vw, 360px);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .user-note-body-ce .un-attachment-meta {
      color: var(--muted);
      font-size: 0.72rem;
      margin-right: auto;
    }
    .user-note-body-ce .un-attachment-btn {
      border: 1px solid rgba(124,77,255,0.34);
      background: rgba(124,77,255,0.14);
      color: var(--text);
      border-radius: 6px;
      font-size: 0.7rem;
      line-height: 1.1;
      padding: 5px 7px;
      cursor: pointer;
    }
    .user-note-body-ce .un-attachment-btn:hover {
      border-color: rgba(124,77,255,0.62);
      background: rgba(124,77,255,0.24);
    }
    .user-note-body-ce .un-list {
      list-style: disc;
      padding-left: 18px;
      margin: 3px 0;
    }
    .user-note-body-ce ol.un-list {
      list-style: decimal;
    }
    .user-note-body-ce .un-list--circle {
      list-style-type: circle;
    }
    .user-note-body-ce .un-list--square {
      list-style-type: square;
    }
    .user-note-body-ce .un-list li {
      margin: 2px 0;
    }
    .user-note-body-ce .un-check-item {
      list-style: none;
      margin-left: -4px;
    }
    .user-note-body-ce .un-check-item label {
      display: flex;
      align-items: baseline;
      gap: 7px;
      cursor: pointer;
      padding: 2px 0;
      user-select: none;
    }
    .user-note-body-ce .un-check-item input[type="checkbox"] {
      accent-color: var(--user-note);
      flex-shrink: 0;
      cursor: pointer;
      width: 14px;
      height: 14px;
      margin-top: 2px;
    }
    /* CSS :has() strikethrough on checked items */
    .user-note-body-ce .un-check-item:has(input:checked) .un-check-text {
      text-decoration: line-through;
      opacity: 0.45;
    }
    .user-note-body-ce .un-check-text {
      flex: 1;
    }
    /* Images inserted into notes */
    .un-figure {
      display: flex;
      flex-direction: column;
      gap: 6px;
      width: 100%;
      margin: 10px 0;
      position: relative;
      overflow: visible;
    }
    .un-figure--left {
      align-items: flex-start;
    }
    .un-figure--center {
      align-items: center;
    }
    .un-figure--right {
      align-items: flex-end;
    }
    .un-figure--tile {
      display: inline-flex;
      width: calc(50% - 10px);
      margin: 8px 5px;
      vertical-align: top;
    }
    .un-img {
      max-width: min(100%, 360px);
      max-height: 320px;
      width: auto;
      height: auto;
      display: block;
      border-radius: 6px;
      margin: 0;
      border: 1px solid rgba(124,77,255,0.15);
      object-fit: contain;
      cursor: pointer;
      transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
    }
    .un-img:hover {
      border-color: rgba(124,77,255,0.45);
      box-shadow: 0 0 12px rgba(124,77,255,0.15);
    }
    .un-img-selected {
      border-color: rgba(124,77,255,0.9);
      box-shadow: 0 0 0 2px rgba(124,77,255,0.28);
    }
    /* .un-figure-selected is kept as a DOM marker for click-guard logic */
    .un-figure-selected {
      /* no visual styling here — the overlay handles the selection ring */
    }
    /* Overlay: absolutely positioned and JS-sized to match the img exactly */
    .un-img-select-overlay {
      position: absolute;
      border: 1.5px dashed rgba(124,77,255,0.65);
      border-radius: 5px;
      overflow: visible;
      pointer-events: none; /* pass clicks through to the img; grabbers opt back in */
      z-index: 11;
    }
    .un-img-select-overlay > .un-img-grabber {
      pointer-events: auto;
    }
    .un-img-caption {
      font-size: 0.75rem;
      line-height: 1.4;
      color: var(--muted);
      text-align: center;
      max-width: min(100%, 560px);
      padding: 0 2px;
      word-break: break-word;
    }
    .un-img-note {
      font-size: 0.74rem;
      line-height: 1.45;
      color: var(--text-secondary);
      background: rgba(124,77,255,0.08);
      border: 1px solid rgba(124,77,255,0.16);
      border-radius: 6px;
      padding: 6px 8px;
      max-width: min(100%, 560px);
      word-break: break-word;
    }

    .un-img-inspector {
      position: absolute;
      left: 8px;
      right: 8px;
      bottom: 8px;
      z-index: 12;
      display: flex;
      align-items: center;
      gap: 3px;
      flex-wrap: wrap;
      justify-content: center;
      padding: 6px 8px;
      border-radius: 9px;
      border: 1px solid rgba(124,77,255,0.42);
      background: var(--dialog-bg);
      box-shadow: 0 8px 18px rgba(0,0,0,0.25);
      backdrop-filter: blur(4px);
    }
    .un-img-inspector button {
      border: 1px solid rgba(124,77,255,0.28);
      background: rgba(124,77,255,0.12);
      color: var(--text);
      border-radius: 7px;
      font-size: 0.68rem;
      line-height: 1;
      padding: 5px 8px;
      min-height: 26px;
      cursor: pointer;
      transition: background 0.12s, border-color 0.12s;
      pointer-events: auto;
      white-space: nowrap;
    }
    .un-img-inspector button:hover {
      border-color: rgba(124,77,255,0.65);
      background: rgba(124,77,255,0.22);
    }
    /* Separator between inspector groups */
    .un-img-insp-sep {
      width: 1px;
      height: 18px;
      background: rgba(124,77,255,0.3);
      margin: 0 2px;
      flex-shrink: 0;
    }
    /* Delete button — red tint */
    .un-img-inspector .un-img-insp-del {
      border-color: rgba(239, 83, 80, 0.35);
      background: rgba(239, 83, 80, 0.1);
      color: #ef9a9a;
    }
    .un-img-inspector .un-img-insp-del:hover {
      border-color: rgba(239, 83, 80, 0.7);
      background: rgba(239, 83, 80, 0.22);
      color: #ffcdd2;
    }
    .un-img-move-grabber {
      cursor: grab !important;
      font-size: 0.74rem !important;
      font-weight: 700;
      padding-inline: 8px !important;
    }
    .un-img-grabber {
      position: absolute;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #7c4dff;
      border: 2px solid rgba(255,255,255,0.95);
      box-shadow: 0 0 0 1px rgba(124,77,255,0.35);
      z-index: 13;
      pointer-events: auto;
    }
    .un-img-grabber--nw { left: -6px; top: -6px; cursor: nwse-resize; }
    .un-img-grabber--ne { right: -6px; top: -6px; cursor: nesw-resize; }
    .un-img-grabber--sw { left: -6px; bottom: -6px; cursor: nesw-resize; }
    .un-img-grabber--se { right: -6px; bottom: -6px; cursor: nwse-resize; }
    /* Rotation handle — sits centred above the image */
    .un-img-grabber--rot {
      left: 50%;
      top: -28px;
      transform: translateX(-50%);
      width: 20px;
      height: 20px;
      background: #7c4dff;
      border-color: rgba(255,255,255,0.9);
      cursor: grab;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.75rem;
      color: #fff;
      user-select: none;
    }
    .un-img-grabber--rot:active { cursor: grabbing; }
    /* Thin stem connecting rotation handle to the figure */
    .un-img-grabber--rot::after {
      content: '';
      position: absolute;
      left: 50%;
      top: 100%;
      width: 1px;
      height: 14px;
      background: rgba(124,77,255,0.55);
      transform: translateX(-50%);
    }
    /* Cursor affordance: image body is draggable when selected */
    .un-figure-selected img.un-img-selected {
      cursor: grab;
    }
    .un-figure-selected img.un-img-selected:active {
      cursor: grabbing;
    }
    .un-figure-dragging {
      opacity: 0.45;
      transform: scale(0.995);
    }
    .un-img-drop-marker {
      height: 0;
      border-top: 2px dashed rgba(124,77,255,0.8);
      margin: 8px 0;
      border-radius: 3px;
    }
    @media (max-width: 900px) {
      .un-figure--tile {
        width: 100%;
        margin: 8px 0;
      }
      .un-img-inspector {
        left: 6px;
        right: 6px;
        bottom: 6px;
      }
      .un-img-inspector button {
        font-size: 0.62rem;
        min-height: 22px;
        padding: 4px 5px;
      }
      .un-img-insp-sep {
        height: 16px;
      }
    }

    /* ── Image Lightbox ── */
    .un-lightbox-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.82);
      z-index: 100000;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: zoom-out;
      animation: un-lb-fadein 0.15s ease;
    }
    @keyframes un-lb-fadein {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    .un-lightbox-container {
      position: relative;
      max-width: 92vw;
      max-height: 90vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: default;
    }
    .un-lightbox-img {
      max-width: 92vw;
      max-height: 85vh;
      object-fit: contain;
      border-radius: 8px;
      box-shadow: 0 8px 40px rgba(0,0,0,0.5);
    }
    .un-lightbox-close {
      position: absolute;
      top: -12px;
      right: -12px;
      background: rgba(0,0,0,0.7);
      border: 1px solid rgba(255,255,255,0.2);
      color: #fff;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      font-size: 1.2rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.12s;
      z-index: 1;
    }
    .un-lightbox-close:hover {
      background: rgba(244,67,54,0.8);
    }
    .un-lightbox-caption {
      margin-top: 10px;
      color: rgba(255,255,255,0.7);
      font-size: 0.82rem;
      text-align: center;
      max-width: 80%;
    }
      flex: 1;
      background: rgba(0,0,0,0.08);
      border: 1px solid rgba(124,77,255,0.15);
      border-radius: 6px;
      padding: 10px 14px;
      overflow-y: auto;
      cursor: text;
      min-height: 100px;
      font-size: 0.85rem;
      line-height: 1.65;
      color: var(--text);
      user-select: text;
      transition: border-color 0.15s;
    }
    .user-note-preview:hover {
      border-color: rgba(124,77,255,0.28);
    }
    .user-note-preview .un-h {
      color: var(--user-note);
      line-height: 1.3;
      margin-top: 10px;
      margin-bottom: 2px;
    }
    .user-note-preview h1.un-h { font-size: 1.05rem; font-weight: 700; }
    .user-note-preview h2.un-h {
      font-size: 0.92rem;
      font-weight: 600;
      border-bottom: 1px solid rgba(124,77,255,0.18);
      padding-bottom: 3px;
    }
    .user-note-preview h3.un-h {
      font-size: 0.82rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      opacity: 0.8;
    }
    .user-note-preview .un-hr {
      border: none;
      border-top: 1px solid rgba(124,77,255,0.2);
      margin: 8px 0;
    }
    .user-note-preview .un-list {
      list-style: disc;
      padding-left: 18px;
      margin: 3px 0;
    }
    .user-note-preview ol.un-list {
      list-style: decimal;
    }
    .user-note-preview .un-list--circle {
      list-style-type: circle;
    }
    .user-note-preview .un-list--square {
      list-style-type: square;
    }
    .user-note-preview .un-list li {
      margin: 2px 0;
    }
    .user-note-preview .un-list li.un-check-item {
      list-style: none;
      margin-left: -4px;
      padding-left: 0;
    }
    .user-note-preview .un-list li.un-check-item label {
      display: flex;
      align-items: baseline;
      gap: 7px;
      cursor: pointer;
      padding: 2px 0;
    }
    .user-note-preview .un-list li.un-check-item input[type="checkbox"] {
      accent-color: var(--user-note);
      flex-shrink: 0;
      cursor: pointer;
      width: 14px;
      height: 14px;
      margin-top: 2px;
    }
    .user-note-preview .un-check-text {
      flex: 1;
    }
    .user-note-preview .un-check-done {
      text-decoration: line-through;
      opacity: 0.45;
    }
    .user-note-preview .un-p {
      margin: 2px 0;
    }
    .user-note-preview .un-blank {
      height: 7px;
    }
    .user-note-preview .un-placeholder {
      color: var(--muted);
      opacity: 0.5;
      font-style: italic;
    }
    /* Active state for compact user-note toolbar buttons */
    .note-tb-btn--active {
      background: rgba(124,77,255,0.22) !important;
      color: var(--user-note) !important;
      border-color: rgba(124,77,255,0.4) !important;
      opacity: 1 !important;
    }
    .user-note-tags {
      display: flex;
      align-items: center;
      gap: 5px;
      flex-wrap: wrap;
      padding: 4px 0;
    }
    .user-note-tag {
      background: var(--user-note-faint);
      color: var(--user-note);
      border: 1px solid rgba(124,77,255,0.2);
      border-radius: 10px;
      padding: 2px 9px;
      font-size: 0.7rem;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .user-note-tag .remove-tag {
      cursor: pointer;
      opacity: 0.6;
      transition: opacity 0.12s;
    }
    .user-note-tag .remove-tag:hover {
      opacity: 1;
    }

    /* ── Tags inline row (collapsible, shown by 🏷 toggle) ── */
    .un-tags-inline-row {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-wrap: wrap;
      padding: 2px 2px 3px;
      min-height: 20px;
    }
    /* ── Toolbar spacer pushes right-side actions to far right ── */
    .note-tb-spacer {
      flex: 1;
      min-width: 4px;
    }
    /* ── More-menu divider between quick tags and block types ── */
    .un-tb-more-divider {
      border: none;
      border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.1));
      margin: 2px 8px;
    }
    /* ── User Note Metadata Panel (hidden by default, toggled by gear) ── */
    .un-meta-panel {
      border: 1px solid rgba(124,77,255,0.12);
      border-radius: 6px;
      background: rgba(124,77,255,0.03);
      overflow: hidden;
      margin-bottom: 4px;
      transition: max-height 0.2s ease, opacity 0.15s ease;
    }
    .un-meta-hidden {
      display: none;
    }
    .un-meta-body {
      padding: 6px 10px 10px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .un-meta-row {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.78rem;
    }
    .un-meta-label {
      flex-shrink: 0;
      width: 60px;
      font-weight: 600;
      color: var(--muted);
      text-transform: uppercase;
      font-size: 0.68rem;
      letter-spacing: 0.04em;
    }
    .un-meta-value {
      color: var(--text-secondary);
      font-size: 0.78rem;
    }
    .un-meta-tags {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-wrap: wrap;
      flex: 1;
    }
    .un-meta-tag-input {
      background: transparent;
      border: 1px solid rgba(124,77,255,0.18);
      border-radius: 10px;
      color: var(--text);
      padding: 2px 8px;
      font-size: 0.7rem;
      outline: none;
      transition: border-color 0.15s;
    }
    .un-meta-tag-input:focus {
      border-color: var(--user-note);
    }
    .un-meta-select {
      background: var(--overlay-subtle);
      border: 1px solid rgba(124,77,255,0.18);
      border-radius: 5px;
      color: var(--text);
      padding: 3px 8px;
      font-size: 0.78rem;
      outline: none;
      cursor: pointer;
    }
    .un-meta-select:focus {
      border-color: var(--user-note);
    }

    @media (max-width: 900px), (pointer: coarse) {
      .un-chrome-bar .note-editor-title,
      .un-meta-tag-input,
      .un-meta-select,
      .user-note-body-ce {
        font-size: 16px;
      }
    }

    /* ── Folder Management ── */
    .un-folder-action-btn {
      background: transparent;
      border: 1px solid rgba(124,77,255,0.18);
      color: var(--muted);
      border-radius: 5px;
      padding: 2px 7px;
      font-size: 0.72rem;
      cursor: pointer;
      margin-left: auto;
      transition: all 0.12s;
    }
    .un-folder-action-btn:hover {
      background: rgba(124,77,255,0.1);
      color: var(--user-note);
    }
    .un-folder-list {
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding: 4px 0;
    }
    .un-folder-item {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 3px 8px;
      border-radius: 4px;
      font-size: 0.78rem;
      color: var(--text-secondary);
      transition: background 0.12s;
    }
    .un-folder-item:hover {
      background: rgba(124,77,255,0.06);
    }
    .un-folder-item-icon {
      font-size: 0.85rem;
    }
    .un-folder-item-name {
      flex: 1;
    }
    .un-folder-item-count {
      font-size: 0.7rem;
      color: var(--muted);
      background: rgba(255,255,255,0.05);
      border-radius: 8px;
      padding: 1px 6px;
      min-width: 16px;
      text-align: center;
    }
    .un-folder-item-del {
      background: none;
      border: none;
      color: var(--muted);
      font-size: 0.8rem;
      cursor: pointer;
      opacity: 0;
      transition: opacity 0.12s, color 0.12s;
      padding: 0 4px;
    }
    .un-folder-item:hover .un-folder-item-del {
      opacity: 0.6;
    }
    .un-folder-item-del:hover {
      opacity: 1 !important;
      color: var(--danger, #f44);
    }
    .un-folder-group-header {
      font-size: 0.72rem;
      font-weight: 600;
      color: var(--muted);
      padding: 10px 4px 4px;
      border-top: 1px solid rgba(255,255,255,0.04);
      margin-top: 4px;
    }
    .user-note-link-chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: rgba(249,168,37,0.12);
      border: 1px solid rgba(249,168,37,0.25);
      color: var(--amber);
      border-radius: 10px;
      padding: 2px 9px;
      font-size: 0.7rem;
      cursor: pointer;
      transition: background 0.12s;
    }
    .user-note-link-chip:hover {
      background: rgba(249,168,37,0.2);
    }
    .user-notes-new-btn {
      background: var(--user-note);
      color: #fff;
      border: none;
      border-radius: 6px;
      padding: 7px 14px;
      font-size: 0.8rem;
      cursor: pointer;
      transition: background 0.15s;
    }
    .user-notes-new-btn:hover {
      background: #6a3de8;
    }
    .user-notes-hub-topbar {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 5px 8px;
      border-bottom: 1px solid var(--border);
    }
    .user-notes-hub-folder {
      font-size: 0.8rem;
      color: var(--muted);
      flex: 1;
      min-width: 90px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .user-notes-hub-search-toggle {
      position: relative;
      background: transparent;
      border: none;
      padding: 2px 6px;
      min-width: 26px;
      height: 24px;
      color: var(--text);
      border-radius: 4px;
      cursor: pointer;
      opacity: 0.72;
      line-height: 1;
      transform-origin: center;
      transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    }
    .user-notes-hub-search-toggle:hover {
      background: var(--overlay-active);
      opacity: 1;
    }
    .user-notes-hub-search-toggle.active {
      color: var(--user-note);
      background: var(--user-note-faint);
      box-shadow: inset 0 0 0 1px rgba(124,77,255,0.18);
      opacity: 1;
      transform: scale(1.04);
    }
    .user-notes-hub-search-row {
      padding: 6px 8px 5px;
      border-bottom: 1px solid var(--border);
      overflow: hidden;
      transform-origin: top right;
      animation: userNotesSearchRowIn 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .user-notes-hub-search-shell {
      display: flex;
      align-items: center;
      gap: 6px;
      width: 100%;
      min-height: 30px;
      padding: 0 8px;
      border: 1px solid rgba(124,77,255,0.22);
      border-radius: 6px;
      background: var(--input-bg);
      transform-origin: right center;
      animation: userNotesSearchGrow 0.24s cubic-bezier(0.16, 1, 0.3, 1);
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }
    .user-notes-hub-search-shell:focus-within {
      border-color: var(--user-note);
      box-shadow: 0 0 0 2px var(--user-note-faint);
    }
    .user-notes-hub-search-icon {
      color: var(--muted);
      font-size: 0.78rem;
      line-height: 1;
      flex-shrink: 0;
      transform-origin: center;
      animation: userNotesSearchIconSettle 0.24s ease-out;
    }
    .user-notes-hub-search-input {
      flex: 1;
      min-width: 0;
      border: none;
      outline: none;
      background: transparent;
      color: var(--text);
      font-size: 0.8rem;
      padding: 0;
    }
    .user-notes-hub-search-clear {
      width: 18px;
      height: 18px;
      border: none;
      border-radius: 4px;
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      font-size: 0.7rem;
      line-height: 1;
      padding: 0;
      flex-shrink: 0;
    }
    .user-notes-hub-search-clear:hover {
      background: var(--user-note-faint);
      color: var(--text);
    }
    .user-notes-hub-search-clear.is-hidden {
      visibility: hidden;
      pointer-events: none;
    }
    @keyframes userNotesSearchRowIn {
      from {
        opacity: 0;
        max-height: 0;
        transform: translateY(-4px);
      }
      to {
        opacity: 1;
        max-height: 42px;
        transform: translateY(0);
      }
    }
    @keyframes userNotesSearchGrow {
      from {
        opacity: 0;
        transform: scaleX(0.12);
      }
      65% {
        opacity: 1;
        transform: scaleX(1.02);
      }
      to {
        opacity: 1;
        transform: scaleX(1);
      }
    }
    @keyframes userNotesSearchIconSettle {
      from {
        opacity: 0;
        transform: rotate(-12deg) scale(0.7);
      }
      to {
        opacity: 1;
        transform: rotate(0deg) scale(1);
      }
    }
    .user-notes-hub-search-summary {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      padding: 5px 8px 4px;
      color: var(--muted);
      font-size: 0.68rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }
    .user-notes-hub-empty {
      padding: 14px 8px;
      color: var(--muted);
      font-size: 0.8rem;
      text-align: center;
    }
    .user-notes-hub-match {
      display: block;
      margin-top: 1px;
      color: var(--muted);
      font-size: 0.7rem;
      line-height: 1.25;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .user-notes-hub-match mark,
    .user-notes-tree-item mark {
      padding: 0 2px;
      border-radius: 3px;
      background: var(--user-note-faint);
      color: var(--text);
    }
    .user-notes-tree-item {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 4px 8px;
      border-radius: 5px;
      cursor: pointer;
      font-size: 0.78rem;
      color: var(--text-secondary);
      transition: background 0.12s;
    }
    .user-notes-tree-item:hover {
      background: var(--user-note-faint);
    }
    .user-notes-tree-item .icon {
      color: var(--user-note);
      font-size: 0.85rem;
    }
    .user-notes-tree-folder {
      transition: background 0.12s;
    }
    .user-notes-tree-folder:hover {
      background: var(--user-note-faint);
    }

    /* ── Audio Transcription Panel ── */
    .un-transcribe-slot {
      /* container that holds the panel when open */
    }
    .un-transcribe-panel {
      background: var(--panel-elevated);
      border: 1px solid var(--border);
      border-radius: 8px;
      margin: 6px 8px;
      overflow: hidden;
      font-size: 0.82rem;
      color: var(--text-primary);
      box-shadow: 0 12px 26px var(--card-shadow);
    }
    .un-transcribe-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 12px;
      background: var(--user-note-faint);
      border-bottom: 1px solid var(--border-subtle);
    }
    .un-transcribe-title {
      font-weight: 600;
      font-size: 0.85rem;
      color: var(--user-note, #7c4dff);
    }
    .un-transcribe-close {
      background: none;
      border: none;
      color: var(--muted);
      font-size: 1.1rem;
      cursor: pointer;
      padding: 0 4px;
      line-height: 1;
    }
    .un-transcribe-close:hover {
      color: var(--text-primary);
    }
    .un-transcribe-controls {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 12px;
      flex-wrap: wrap;
    }
    .un-transcribe-btn {
      padding: 5px 12px;
      border-radius: 5px;
      border: 1px solid var(--border);
      background: var(--overlay-subtle);
      color: var(--text-primary);
      font-size: 0.78rem;
      cursor: pointer;
      transition: all 0.15s;
    }
    .un-transcribe-btn:hover:not(:disabled) {
      background: var(--user-note-faint);
      border-color: rgba(124,77,255,0.3);
      color: var(--text-primary);
    }
    .un-transcribe-btn:disabled {
      opacity: 0.35;
      cursor: not-allowed;
    }
    .un-transcribe-btn--start {
      background: rgba(124,77,255,0.15);
      border-color: rgba(124,77,255,0.35);
      color: var(--user-note, #7c4dff);
      font-weight: 600;
    }
    .un-transcribe-btn--recording {
      background: rgba(244,67,54,0.15);
      border-color: rgba(244,67,54,0.4);
      color: #f44;
      font-weight: 600;
      animation: un-rec-glow 1.5s ease-in-out infinite;
    }
    @keyframes un-rec-glow {
      0%, 100% { box-shadow: 0 0 4px rgba(244,67,54,0.2); }
      50%      { box-shadow: 0 0 12px rgba(244,67,54,0.5); }
    }
    .un-rec-dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #f44;
      margin-right: 4px;
      animation: un-rec-blink 1s ease-in-out infinite;
      vertical-align: middle;
    }
    @keyframes un-rec-blink {
      0%, 100% { opacity: 1; }
      50%      { opacity: 0.3; }
    }
    .un-transcribe-lang {
      padding: 4px 8px;
      border-radius: 4px;
      border: 1px solid var(--border);
      background: var(--input-bg);
      color: var(--text-primary);
      font-size: 0.75rem;
      margin-left: auto;
    }
    .un-transcribe-status {
      padding: 4px 12px;
      font-size: 0.73rem;
      color: var(--text-secondary);
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .un-transcribe-status--active {
      color: var(--user-note, #7c4dff);
    }
    .un-transcribe-diagnostic {
      margin: 0 12px 8px;
      padding: 7px 10px;
      border-radius: 6px;
      background: var(--overlay-subtle);
      border: 1px solid var(--border-subtle);
      color: var(--text-primary);
      font-size: 0.74rem;
      line-height: 1.4;
      min-height: 18px;
    }
    .un-transcribe-diagnostic--error {
      background: rgba(244,67,54,0.09);
      border-color: rgba(244,67,54,0.22);
      color: #ffb4b4;
    }
    .un-transcribe-clip {
      margin: 0 12px 8px;
      padding: 10px;
      border-radius: 8px;
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .un-transcribe-clip-meta {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }
    .un-transcribe-clip-kicker {
      font-size: 0.68rem;
      color: var(--user-note, #7c4dff);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }
    .un-transcribe-clip-meta strong {
      font-size: 0.8rem;
      color: var(--text-primary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .un-transcribe-clip-details {
      color: var(--text-secondary);
      font-size: 0.72rem;
    }
    .un-transcribe-audio {
      width: 100%;
      height: 32px;
      filter: saturate(0.92) hue-rotate(-6deg);
    }
    .un-rec-pulse {
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #f44;
      animation: un-rec-blink 1s ease-in-out infinite;
    }
    .un-transcribe-transcript {
      margin: 0 12px 8px;
      padding: 8px 10px;
      background: var(--bg);
      border: 1px solid var(--border-subtle);
      border-radius: 6px;
      max-height: 200px;
      overflow-y: auto;
      min-height: 60px;
    }
    .un-transcribe-placeholder {
      color: var(--text-secondary);
      font-size: 0.78rem;
      text-align: center;
      padding: 16px 8px;
      line-height: 1.6;
    }
    .un-transcribe-seg {
      display: flex;
      gap: 8px;
      padding: 2px 0;
      font-size: 0.78rem;
      line-height: 1.45;
    }
    .un-transcribe-seg--interim {
      opacity: 0.5;
      font-style: italic;
    }
    .un-transcribe-ts {
      color: var(--user-note, #7c4dff);
      font-family: monospace;
      font-size: 0.7rem;
      flex-shrink: 0;
      opacity: 0.7;
      padding-top: 1px;
    }
    .un-transcribe-text {
      color: var(--text-primary);
    }
    .un-transcribe-actions {
      display: flex;
      gap: 6px;
      padding: 8px 12px;
      border-top: 1px solid var(--border-subtle);
      flex-wrap: wrap;
      align-items: center;
    }
    .un-transcribe-proj-label {
      display: flex;
      align-items: center;
      width: 100%;
      margin-bottom: 2px;
    }
    .un-transcribe-proj-select {
      flex: 1;
      background: var(--bg-card);
      color: var(--text-primary);
      border: 1px solid var(--border);
      border-radius: 4px;
      font-size: 0.78rem;
      padding: 3px 6px;
    }
    .un-transcribe-action-btn {
      padding: 6px 14px;
      border-radius: 5px;
      border: 1px solid var(--border);
      background: var(--overlay-subtle);
      color: var(--text-primary);
      font-size: 0.78rem;
      cursor: pointer;
      transition: all 0.15s;
    }
    .un-transcribe-action-btn:hover {
      background: rgba(124,77,255,0.12);
      border-color: rgba(124,77,255,0.3);
      color: var(--text-primary);
    }
    .un-transcribe-action-btn--primary {
      background: rgba(124,77,255,0.2);
      border-color: rgba(124,77,255,0.4);
      color: var(--user-note, #7c4dff);
      font-weight: 600;
    }
    .un-transcribe-action-btn--primary:hover {
      background: rgba(124,77,255,0.35);
    }
    .un-transcribe-action-btn--danger {
      margin-left: auto;
    }
    .un-transcribe-action-btn--danger:hover {
      background: rgba(244,67,54,0.12);
      border-color: rgba(244,67,54,0.3);
      color: #f44;
    }
    .un-transcribe-unsupported {
      padding: 16px;
      text-align: center;
      color: var(--text-secondary);
      font-size: 0.8rem;
    }
    .un-transcribe-unsupported p { margin: 4px 0; }

    /* ── Reel Visualizer Window ── */
    .reel-viz-wrap {
      display: flex;
      flex-direction: column;
      flex: 1 1 0;
      min-width: 0;
      position: relative;
      background: var(--bg);
      color: var(--text-primary);
      overflow: hidden;
    }
    .reel-viz-status-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 3px 10px;
      background: var(--overlay-subtle);
      border-bottom: 1px solid var(--border-subtle);
      font-size: 12px;
      font-weight: 600;
      height: 24px;
      flex-shrink: 0;
    }
    .reel-viz-status-text {
      color: var(--text-primary);
      font-size: 11px;
      letter-spacing: 0.12em;
    }
    .reel-viz-time {
      color: var(--text-secondary);
      font-size: 11px;
      font-family: 'Courier New', Courier, monospace;
    }
    .reel-viz-controls {
      display: flex;
      flex-direction: column;
      gap: 3px;
      padding: 4px 8px;
      background: transparent;
      border-bottom: 1px solid var(--border-subtle);
      flex-shrink: 0;
    }
    .reel-viz-controls-row {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-wrap: wrap;
    }
    /* Ghost icon buttons — no border, just text/symbol */
    .reel-viz-btn {
      border: none;
      background: transparent;
      color: var(--text-secondary);
      border-radius: 4px;
      padding: 3px 6px;
      font-size: 0.72rem;
      font-weight: 500;
      cursor: pointer;
      transition: color 0.12s, background 0.12s;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .reel-viz-btn:hover {
      color: var(--text-primary);
      background: var(--overlay-hover);
    }
    .reel-viz-btn:disabled {
      opacity: 0.35;
      cursor: not-allowed;
    }
    .reel-viz-btn--ghost {
      color: var(--text-secondary);
      opacity: 0.7;
    }
    .reel-viz-btn--ghost:hover {
      opacity: 1;
      background: var(--overlay-hover);
    }
    /* Whisper key button — accent tint when key is set */
    .reel-viz-btn--key-set {
      color: var(--user-note, #7c4dff);
    }
    /* Slim borderless pill selects */
    .reel-viz-select {
      flex: 1 1 80px;
      min-width: 80px;
      border: none;
      background: transparent;
      color: var(--text-secondary);
      font-size: 0.72rem;
      padding: 2px 2px;
      outline: none;
      cursor: pointer;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .reel-viz-select:hover {
      color: var(--text-primary);
    }
    .reel-viz-select:disabled {
      opacity: 0.35;
      cursor: not-allowed;
    }
    .reel-viz-select--compact {
      flex: 0 0 auto;
      min-width: 72px;
    }
    .reel-viz-sep {
      width: 1px;
      height: 14px;
      background: var(--border-subtle);
      flex-shrink: 1;
      margin: 0 2px;
    }
    /* ── Transport bar — below the reel canvas ── */
    .reel-viz-transport {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2px;
      padding: 3px 10px;
      border-top: 1px solid var(--border-subtle);
      background: var(--overlay-subtle);
      flex-shrink: 0;
    }
    .reel-viz-tport-btn {
      border: none;
      background: transparent;
      color: var(--text-secondary);
      padding: 3px 9px;
      font-size: 0.92rem;
      cursor: pointer;
      border-radius: 4px;
      transition: color 0.12s, background 0.12s;
      flex-shrink: 0;
      line-height: 1;
    }
    .reel-viz-tport-btn:hover {
      color: var(--text-primary);
      background: var(--overlay-hover);
    }
    .reel-viz-tport-btn:disabled {
      opacity: 0.28;
      cursor: not-allowed;
    }
    .reel-viz-tport-btn--play {
      font-size: 1rem;
      color: var(--text-primary);
    }
    .reel-viz-tport-btn--rec {
      color: #e04444;
    }
    .reel-viz-tport-btn--rec-active {
      color: #ff2222;
      animation: reel-rec-blink 1s ease-in-out infinite;
    }
    .reel-viz-tport-btn--overwrite {
      color: var(--accent-2, #f59e0b);
      font-size: 0.72rem;
    }
    .reel-viz-tport-btn:not(.reel-viz-tport-btn--overwrite) {
      font-size: 0.95rem;
    }
    /* Keep the mode toggle label small */
    .reel-viz-tport-btn--play,
    .reel-viz-tport-btn--rec,
    .reel-viz-tport-btn--rec-active {
      font-size: 1.05rem;
    }
    /* Fixed-width mode button so layout never jumps on Append↔Overwrite toggle */
    .reel-viz-tport-btn--mode {
      min-width: 82px;
      text-align: center;
      font-size: 0.72rem !important;
    }
    @keyframes reel-rec-blink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.45; }
    }
    .reel-viz-deck {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      background: var(--bg);
      position: relative;
      overflow: hidden;
      min-height: 0;
    }
    .reel-viz-deck canvas {
      display: block;
      width: 100%;
      height: 100%;
    }
    /* Sleek indicator mode — wheel canvas hidden, recording shown as a glow
       on the note editor + transcript panels instead (see .un-rec-glow). */
    .reel-viz-sleek-note {
      display: none;
    }
    .reel-viz-deck--sleek canvas {
      display: none;
    }
    .reel-viz-deck--sleek .reel-viz-sleek-note {
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-size: 0.72rem;
      line-height: 1.5;
      opacity: 0.5;
      padding: 0 20px;
      height: 100%;
    }
    @keyframes un-rec-glow-pulse {
      0%, 100% { box-shadow: 0 0 0 1px rgba(231,76,60,0.55), 0 0 14px 2px rgba(231,76,60,0.28); }
      50%      { box-shadow: 0 0 0 1px rgba(231,76,60,0.85), 0 0 22px 5px rgba(231,76,60,0.48); }
    }
    .app-window.un-rec-glow {
      animation: un-rec-glow-pulse 1.8s ease-in-out infinite;
    }
    .reel-viz-footer {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding: 2px 10px;
      background: transparent;
      border-top: 1px solid var(--border-subtle);
      min-height: 18px;
      flex-shrink: 0;
    }
    .reel-viz-level {
      font-size: 10px;
      color: var(--user-note, #7c4dff);
      font-family: 'Courier New', Courier, monospace;
      white-space: nowrap;
    }

    body.light-theme .un-transcribe-panel {
      background: var(--panel-elevated);
    }

    body.light-theme .un-transcribe-audio {
      filter: none;
    }

    body.light-theme .reel-viz-deck {
      background: #ffffff;
    }

    body.light-theme .reel-viz-btn {
      box-shadow: none;
    }

    /* ── Reel viz shell (simple fill container) ── */

    [data-win-id^="reel-viz-"] .window-body,
    [data-win-id^="reel-transcript-"] .window-body {
      overflow: hidden;
    }
    [data-win-id^="reel-viz-"] .dynamic-window-content,
    [data-win-id^="reel-transcript-"] .dynamic-window-content {
      padding: 0 !important;
      overflow: hidden !important;
      position: relative !important;
    }
    .reel-viz-shell {
      position: absolute;
      inset: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    /* Footer transcript toggle button */
    .reel-tx-toggle-btn {
      font-size: 0.68rem !important;
      opacity: 0.75;
      flex-shrink: 0;
    }
    .reel-tx-toggle-btn:hover { opacity: 1; }
    /* ── Satellite transcript window content ── */
    .reel-tx-win {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background: var(--bg);
      color: var(--text-primary);
      font-size: 0.8rem;
    }
    /* Status header row */
    .reel-tx-status-row {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 5px 10px 4px;
      border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.1));
      flex-shrink: 0;
      background: var(--overlay-subtle, rgba(255,255,255,0.04));
    }
    .reel-tx-label {
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-secondary, #aaa);
    }
    .reel-tx-status {
      flex: 1;
      font-size: 0.68rem;
      font-family: 'Courier New', Courier, monospace;
      color: var(--text-secondary, #aaa);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: right;
    }
    /* Diagnostic strip — reset heavy panel styles */
    .reel-tx-diag {
      margin: 0 !important;
      padding: 3px 10px !important;
      border-radius: 0 !important;
      border: none !important;
      border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.08)) !important;
      background: transparent !important;
      font-size: 0.7rem !important;
      color: var(--text-secondary, #aaa) !important;
      flex-shrink: 0;
      line-height: 1.3;
    }
    .reel-tx-diag:empty { display: none; }
    /* Transcript scroll area — reset heavy panel box styles */
    .reel-tx-scroll.un-transcribe-transcript {
      margin: 0 !important;
      padding: 6px 10px !important;
      background: transparent !important;
      border: none !important;
      border-radius: 0 !important;
      max-height: none !important;
      min-height: 0 !important;
      flex: 1 !important;
      overflow-y: auto !important;
    }
    /* Actions bar */
    .reel-viz-drawer-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      padding: 5px 8px;
      border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.1));
      flex-shrink: 0;
      background: var(--overlay-subtle, rgba(255,255,255,0.04));
    }
    .reel-act-btn {
      border: none;
      background: var(--overlay-hover, rgba(255,255,255,0.08));
      color: var(--text-secondary, #aaa);
      border-radius: 4px;
      padding: 3px 7px;
      font-size: 0.7rem;
      cursor: pointer;
      transition: background 0.12s, color 0.12s;
      white-space: nowrap;
    }
    .reel-act-btn:hover {
      background: var(--overlay-active, rgba(255,255,255,0.14));
      color: var(--text-primary, #fff);
    }
    .reel-act-btn:disabled { opacity: 0.35; cursor: not-allowed; }
    .reel-act-btn--primary {
      background: var(--user-note-faint, rgba(124,77,255,0.15));
      color: var(--user-note, #7c4dff);
    }
    .reel-act-btn--primary:hover {
      background: rgba(124,77,255,0.28);
      color: var(--user-note, #7c4dff);
    }
    .reel-act-btn--danger { color: #e04444; }
    /* Suppress old inline slot */
    .un-transcribe-slot { display: none !important; }

    /* ── AI Settings Modal ── */
    .ai-settings-modal {
      position: fixed;
      inset: 0;
      z-index: 99999;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,0.55);
      backdrop-filter: blur(4px);
    }
    .ai-settings-modal-inner {
      background: var(--dialog-bg, #1e1e2e);
      border: 1px solid var(--border, #333);
      border-radius: 12px;
      padding: 22px 24px;
      min-width: 380px;
      max-width: 520px;
      max-height: 85vh;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 4px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    }
    .ai-settings-field {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin-bottom: 10px;
    }
    .ai-settings-label {
      font-size: 0.82rem;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .ai-settings-input {
      background: rgba(255,255,255,0.06);
      border: 1px solid var(--border, #444);
      border-radius: 6px;
      padding: 7px 10px;
      font-size: 0.82rem;
      color: var(--text, #ddd);
      flex: 1;
      font-family: inherit;
    }
    .ai-settings-input:focus {
      outline: none;
      border-color: var(--accent, #7c4dff);
      box-shadow: 0 0 0 2px rgba(124,77,255,0.18);
    }
    .ai-settings-textarea {
      background: rgba(255,255,255,0.06);
      border: 1px solid var(--border, #444);
      border-radius: 6px;
      padding: 8px 10px;
      font-size: 0.8rem;
      color: var(--text, #ddd);
      font-family: 'Fira Code', 'Consolas', monospace;
      resize: vertical;
      min-height: 80px;
      line-height: 1.5;
    }
    .ai-settings-textarea:focus {
      outline: none;
      border-color: var(--accent, #7c4dff);
      box-shadow: 0 0 0 2px rgba(124,77,255,0.18);
    }
    .ai-settings-btn {
      background: rgba(255,255,255,0.08);
      border: 1px solid var(--border, #444);
      border-radius: 6px;
      padding: 7px 18px;
      font-size: 0.82rem;
      color: var(--text, #ddd);
      cursor: pointer;
      transition: all 0.12s;
    }
    .ai-settings-btn:hover {
      background: rgba(255,255,255,0.14);
    }
    .ai-settings-btn--primary {
      background: rgba(124,77,255,0.15);
      color: #b388ff;
      border-color: rgba(124,77,255,0.3);
    }
    .ai-settings-btn--primary:hover {
      background: rgba(124,77,255,0.28);
    }
    .ai-settings-btn-sm {
      background: rgba(255,255,255,0.06);
      border: 1px solid var(--border, #444);
      border-radius: 5px;
      padding: 4px 10px;
      font-size: 0.75rem;
      color: var(--text, #ddd);
      cursor: pointer;
      flex-shrink: 0;
    }
    .ai-settings-btn-sm:hover {
      background: rgba(255,255,255,0.12);
    }

    /* ── End User Notes Feature ── */

    /* ── Reference Database Window ── */
    .ref-window-container {
      font-size: 0.85rem;
    }
    .ref-window-tree {
      background: rgba(0,0,0,0.3);
      border-right: 1px solid rgba(255,255,255,0.1);
    }
    .ref-window-resizer {
      width: 5px;
      flex-shrink: 0;
      cursor: col-resize;
      background: transparent;
      transition: background 0.15s;
      margin: 0 -1px;
      z-index: 1;
    }
    .ref-window-resizer:hover,
    .ref-window-resizer:active {
      background: rgba(255,255,255,0.15);
    }
    .ref-window-tree .tree-node {
      font-size: 0.8rem;
    }
    .ref-window-tree .tree-item {
      padding: 4px 8px;
      border-radius: 3px;
    }
    .ref-window-tree .tree-item:hover {
      background: rgba(255,255,255,0.06);
    }
    .ref-window-tree .tree-item.selected {
      background: rgba(0,184,148,0.15);
      color: var(--accent);
    }
    .ref-window-detail {
      background: rgba(0,0,0,0.15);
    }
    .ref-window-detail .detail-panel {
      margin-bottom: 12px;
    }

    /* ── JSN Lookup App Window ── */
    .jsn-app-container {
      display: flex;
      height: 100%;
      overflow: hidden;
    }
    .jsn-app-nav {
      width: 280px;
      min-width: 180px;
      border-right: 1px solid rgba(255,255,255,0.1);
      overflow-y: auto;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
    }
    .jsn-window-resizer {
      width: 5px;
      flex-shrink: 0;
      cursor: col-resize;
      background: transparent;
      transition: background 0.15s;
      margin: 0 -1px;
      z-index: 1;
    }
    .jsn-window-resizer:hover,
    .jsn-window-resizer:active {
      background: rgba(255,255,255,0.15);
    }
    .jsn-app-detail {
      flex: 1;
      overflow-y: auto;
      padding: 10px;
    }

    /* ═══════════════════════════════════════════════════════════════
       LIGHT THEME OVERRIDES — Comprehensive
       Handles all remaining hardcoded dark-theme colors
       ═══════════════════════════════════════════════════════════════ */

    /* ── Theme Toggle Button ── */
    header .icon-btn.theme {
      background: var(--overlay-active);
      color: var(--text);
    }

    body.light-theme header .icon-btn.theme {
      background: var(--overlay-strong);
    }

    /* ── Light theme-specific overrides ── */
    body.light-theme .revit-tools-panel .panel-header {
      border-bottom-color: var(--border);
    }

    body.light-theme .revit-tools-panel .tool-section {
      border-bottom-color: var(--border);
    }

    body.light-theme .revit-tools-panel .tool-btn .tool-desc {
      color: var(--muted);
    }

    body.light-theme .revit-tools-panel .tool-btn.disconnect {
      color: var(--error);
    }

    body.light-theme header .icon-btn.portal {
      background: linear-gradient(135deg, #8b9cf7 0%, #a78bc2 100%) !important;
    }

    body.light-theme header .icon-btn.sync {
      background: linear-gradient(135deg, var(--accent) 0%, var(--teal) 100%) !important;
    }

    body.light-theme header .icon-btn.workbench {
      background: linear-gradient(135deg, #d08888 0%, #d4b75e 100%) !important;
    }

    body.light-theme header .icon-btn.workbench.active {
      background: linear-gradient(135deg, #d4b75e 0%, #d08888 100%) !important;
      box-shadow: 0 0 20px rgba(212, 183, 94, 0.3);
    }

    body.light-theme header .icon-btn.ifc-checker {
      background: linear-gradient(135deg, #8b9cf7 0%, #a78bc2 100%) !important;
    }

    body.light-theme header .icon-btn.help-btn {
      background: linear-gradient(135deg, #6a9ec7 0%, #8bb8db 100%) !important;
    }

    body.light-theme .btn-primary {
      color: #ffffff;
    }

    /* Workbench chrome and the Clean WebGL field follow the application theme. */
    body.light-theme #workbench-container {
      background: var(--workbench-bg);
    }

    /* Help panel - muted warm gradient */
    body.light-theme .help-panel-header {
      background: linear-gradient(135deg, #d4a86d 0%, #c4856a 100%);
      color: #3d3025;
    }

    body.light-theme .help-panel-header h3 {
      color: #3d3025;
    }

    body.light-theme .help-nav-btn {
      background: rgba(0, 0, 0, 0.1);
      color: #3d3025;
    }

    body.light-theme .help-nav-btn:hover {
      background: rgba(0, 0, 0, 0.2);
    }

    body.light-theme .help-context-badge {
      background: rgba(184, 140, 88, 0.1);
      border-color: rgba(184, 140, 88, 0.25);
      color: #a07840;
    }

    body.light-theme .help-topic-card {
      background: var(--overlay-subtle);
      border-color: var(--border);
    }

    body.light-theme .help-topic-card:hover {
      background: rgba(184, 140, 88, 0.06);
      border-color: rgba(184, 140, 88, 0.25);
    }

    body.light-theme .help-detail-content h4 {
      color: #a07840;
    }

    body.light-theme .help-detail-content code {
      background: var(--code-bg);
      color: #a07840;
    }

    body.light-theme .help-tip-box {
      background: rgba(184, 140, 88, 0.08);
      border-color: color-mix(in srgb, #a07840 45%, var(--border));
    }

    body.light-theme .help-tip-box strong {
      color: #a07840;
    }

    body.light-theme .help-panel-search input:focus {
      border-color: #a07840;
    }

    body.light-theme .help-detail-content .step-num {
      background: linear-gradient(135deg, #d4a86d, #c4856a);
      color: #3d3025;
    }

    /* Logic toggle colors for light */
    body.light-theme .logic-badge.enabled {
      background: linear-gradient(135deg, var(--accent) 0%, var(--teal) 100%);
    }

    /* Iteration bar for light */
    body.light-theme .iter-label {
      color: var(--muted);
    }

    body.light-theme #iteration-bar {
      border-left-color: var(--border);
    }

    /* Tasks — teal accents stay but pastel-ized */
    body.light-theme .task-check {
      border-color: var(--teal);
    }

    body.light-theme .task-check:hover {
      border-color: #4a8a83;
      background: var(--teal-faint);
    }

    body.light-theme .task-check-done {
      background: var(--teal);
      border-color: var(--teal);
    }

    body.light-theme .task-check-done::after {
      border-color: #ffffff;
    }

    body.light-theme .task-title:hover .task-title-text {
      color: var(--teal);
    }

    body.light-theme .task-btn-add-sub:hover {
      background: var(--teal-faint);
      color: var(--teal);
      border-color: var(--teal);
    }

    body.light-theme .task-inline-input {
      border-color: var(--teal);
      caret-color: var(--teal);
    }

    body.light-theme [contenteditable].task-new-input {
      border-bottom-color: var(--teal);
      caret-color: var(--teal);
    }

    body.light-theme [contenteditable].task-inline-input {
      border-bottom-color: var(--teal);
    }

    body.light-theme .task-new-input:focus {
      border-bottom-color: var(--teal);
    }

    body.light-theme .task-room-chip {
      background: var(--teal-faint);
      border-color: var(--teal);
      color: var(--teal);
    }

    body.light-theme .task-chip-label {
      color: var(--teal);
    }

    body.light-theme .task-dept-chip {
      background: rgba(74, 152, 130, 0.08);
      border-color: rgba(74, 152, 130, 0.3);
      color: #4a9882;
    }

    body.light-theme .task-dept-chip .task-chip-label {
      color: #4a9882;
    }

    body.light-theme .task-disc-chip {
      background: var(--purple-faint);
      border-color: rgba(139, 122, 175, 0.3);
      color: var(--purple);
    }

    body.light-theme .task-disc-chip .task-chip-label {
      color: var(--purple);
    }

    body.light-theme .task-attr-chip {
      background: var(--warning-faint);
      border-color: rgba(184, 122, 69, 0.3);
      color: var(--warning);
    }

    body.light-theme .task-attr-chip .task-chip-label {
      color: var(--warning);
    }

    body.light-theme .task-attachment-chip {
      background: var(--info-faint);
      border-color: rgba(91, 143, 176, 0.3);
      color: var(--info);
    }

    body.light-theme .ce-chip-room {
      background: var(--teal-faint);
      border-color: var(--teal);
      color: var(--teal);
    }

    body.light-theme .ce-chip-dept {
      background: rgba(74, 152, 130, 0.08);
      border-color: rgba(74, 152, 130, 0.35);
      color: #4a9882;
    }

    body.light-theme .ce-chip-disc {
      background: var(--purple-faint);
      border-color: rgba(139, 122, 175, 0.35);
      color: var(--purple);
    }

    body.light-theme .ce-chip-attr {
      background: var(--warning-faint);
      border-color: rgba(184, 122, 69, 0.35);
      color: var(--warning);
    }

    body.light-theme .ce-chip-attachment {
      background: var(--info-faint);
      border-color: rgba(91, 143, 176, 0.35);
      color: var(--info);
    }

    body.light-theme .task-meta-pri-low {
      color: #4a9882;
      background: rgba(74, 152, 130, 0.1);
    }

    body.light-theme .task-meta-pri-medium {
      color: var(--warning);
      background: var(--warning-faint);
    }

    body.light-theme .task-meta-pri-high {
      color: var(--error);
      background: var(--error-faint);
    }

    body.light-theme .task-meta-overdue {
      color: var(--error);
    }

    body.light-theme .task-meta-due-soon {
      color: var(--warning);
    }

    body.light-theme .task-meta-assignee {
      background: var(--teal-faint);
      color: var(--teal);
    }

    body.light-theme .task-pri-dot-high {
      background: var(--error);
      box-shadow: 0 0 4px var(--error-faint);
    }

    body.light-theme .task-pri-dot-medium {
      background: var(--warning);
    }

    body.light-theme .task-pri-dot-low {
      background: #4a9882;
    }

    body.light-theme .task-item-overdue {
      border-color: rgba(192, 86, 78, 0.3) !important;
      background: rgba(192, 86, 78, 0.03);
    }

    body.light-theme .task-detail-panel {
      background: var(--overlay-subtle);
    }

    body.light-theme .task-detail-input:focus,
    body.light-theme .task-detail-textarea:focus {
      border-color: var(--teal);
    }

    body.light-theme .task-filter-select:focus {
      border-color: var(--teal);
    }

    body.light-theme .task-drag-over {
      border-top-color: var(--teal) !important;
    }

    body.light-theme .at-mention-dropdown {
      background: var(--bg-card);
      box-shadow: 0 6px 20px var(--card-shadow);
    }

    body.light-theme .at-mention-item:hover,
    body.light-theme .at-mention-highlighted {
      background: var(--teal-faint);
    }

    body.light-theme .at-mention-icon {
      background: var(--teal-faint);
    }

    /* OneNote import */
    body.light-theme .onenote-paste-area:focus {
      border-color: var(--teal);
    }

    body.light-theme .onenote-disc-heading {
      color: var(--teal);
    }

    body.light-theme .onenote-preview-header {
      background: var(--teal-faint);
      border-color: var(--teal);
    }

    body.light-theme .onenote-preview-body {
      border-color: var(--teal);
    }

    /* Hub disc rows */
    body.light-theme .hub-disc-row.hub-expanded {
      background: var(--accent-faint);
      color: var(--accent);
    }

    body.light-theme .hub-disc-bar-fill {
      background: var(--accent);
    }

    /* Workspace node */
    body.light-theme .ws-node {
      background: var(--bg-card);
      border-color: var(--border);
      box-shadow: 0 2px 12px var(--card-shadow);
    }

    body.light-theme .ws-node-label {
      color: var(--text);
    }

    body.light-theme .ws-toolbar-title {
      color: var(--text);
    }

    /* Live project badges */
    body.light-theme .live-pulse-dot {
      background: var(--accent);
    }

    body.light-theme .live-badge-small {
      background: var(--accent-faint);
      border-color: var(--accent-glow);
      color: var(--accent);
    }

    body.light-theme .live-open-btn {
      background: linear-gradient(135deg, var(--accent) 0%, var(--teal) 100%) !important;
      border-color: var(--accent) !important;
    }

    /* Ref window */
    body.light-theme .ref-window-tree {
      background: var(--overlay-subtle);
      border-right-color: var(--border);
    }

    body.light-theme .ref-window-tree .tree-item:hover {
      background: var(--overlay-hover);
    }

    body.light-theme .ref-window-tree .tree-item.selected {
      background: var(--accent-faint);
    }

    body.light-theme .ref-window-detail {
      background: var(--bg);
    }

    /* JSN list selected */
    body.light-theme .jsn-list-item.selected {
      background: var(--accent);
      color: #fff;
    }

    body.light-theme .jsn-list-item.selected .jsn-list-jsn,
    body.light-theme .jsn-list-item.selected .jsn-list-name {
      color: #fff;
    }

    body.light-theme .jsn-list-item:hover {
      background: var(--overlay-hover);
    }

    /* Drawing controls inherit the workbench overlay tokens above. */

    /* Equipment round checkboxes */
    body.light-theme .eq-select-cb,
    body.light-theme .attr-select-cb {
      background: var(--bg);
    }

    body.light-theme .eq-select-cb:checked,
    body.light-theme .attr-select-cb:checked {
      background: var(--accent);
      border-color: var(--accent);
    }

    body.light-theme .eq-select-cb:checked::after,
    body.light-theme .attr-select-cb:checked::after {
      background: #ffffff;
    }

    /* Room list plus button */
    body.light-theme .room-list-add-btn:hover {
      background: var(--overlay-hover);
    }

    /* Context menu */
    body.light-theme .context-menu-item:hover {
      background: var(--overlay-hover);
    }

    body.light-theme .context-menu-item:active {
      background: var(--accent);
      color: #ffffff;
    }

    /* ═══════════════════════════════════════════════════════════════
       FINISH BOARD — Architecture Palette & Finish Schedule
       ═══════════════════════════════════════════════════════════════ */

    @keyframes fb-card-in {
      from { opacity: 0; transform: translateY(14px) scale(0.97); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes fb-row-in {
      from { opacity: 0; transform: translateX(-8px); }
      to   { opacity: 1; transform: translateX(0); }
    }

    @keyframes fb-modal-fade {
      from { opacity: 0; }
      to   { opacity: 1; }
    }

    @keyframes fb-modal-rise {
      from { transform: scale(0.91) translateY(20px); opacity: 0; }
      to   { transform: scale(1) translateY(0); opacity: 1; }
    }

    /* Root */
    .fb-root {
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow: hidden;
    }

    /* ── Header ─────────────────────────────────────────── */
    .fb-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      padding: 18px 20px 12px;
      border-bottom: 1px solid var(--border);
      gap: 12px;
      flex-shrink: 0;
    }

    .fb-header-title {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .fb-header-icon {
      font-size: 2.1rem;
      line-height: 1;
      filter: drop-shadow(0 2px 8px rgba(0,0,0,0.45));
    }

    .fb-title-main {
      font-size: 1.35rem;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -0.02em;
    }

    .fb-title-sub {
      font-size: 0.76rem;
      color: var(--muted);
      margin-top: 3px;
    }

    .fb-header-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
    }

    /* View toggle */
    .fb-view-toggle {
      display: flex;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden;
    }

    .fb-toggle-btn {
      padding: 6px 13px;
      border: none;
      background: transparent;
      color: var(--muted);
      font-size: 0.78rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 5px;
      white-space: nowrap;
      transition: background 0.13s, color 0.13s;
    }

    .fb-toggle-btn:hover { color: var(--text); background: var(--overlay-hover); }

    .fb-toggle-btn.active {
      background: var(--accent);
      color: #fff;
      font-weight: 600;
    }

    .fb-toggle-icon { font-size: 1rem; }

    /* Add button */
    .fb-add-btn {
      padding: 7px 14px;
      background: var(--accent);
      color: #fff;
      border: none;
      border-radius: 7px;
      font-size: 0.8rem;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      transition: opacity 0.14s, transform 0.12s;
    }

    .fb-add-btn:hover { opacity: 0.82; transform: translateY(-1px); }
    .fb-add-btn:active { transform: translateY(0); }

    .fb-add-btn-lg {
      font-size: 0.92rem;
      padding: 10px 22px;
      margin-top: 18px;
    }

    /* Category pills strip */
    .fb-cat-pills {
      display: flex;
      gap: 7px;
      padding: 9px 20px;
      overflow-x: auto;
      flex-shrink: 0;
      border-bottom: 1px solid var(--border-subtle);
      scrollbar-width: none;
    }
    .fb-cat-pills::-webkit-scrollbar { display: none; }

    .fb-cat-pill {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 3px 9px;
      border-radius: 20px;
      font-size: 0.7rem;
      font-weight: 500;
      white-space: nowrap;
      background: hsl(var(--hue, 0), 28%, 17%);
      color: hsl(var(--hue, 0), 55%, 72%);
      border: 1px solid hsl(var(--hue, 0), 28%, 26%);
    }

    body.light-theme .fb-cat-pill {
      background: hsl(var(--hue, 0), 28%, 94%);
      color: hsl(var(--hue, 0), 45%, 36%);
      border-color: hsl(var(--hue, 0), 28%, 80%);
    }

    .fb-cat-count {
      background: rgba(255,255,255,0.14);
      border-radius: 9px;
      padding: 0 5px;
      font-size: 0.65rem;
      font-weight: 700;
    }

    body.light-theme .fb-cat-count { background: rgba(0,0,0,0.08); }

    .fb-filter-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 20px;
      border-bottom: 1px solid var(--border-subtle);
      background: var(--overlay-subtle);
      flex-shrink: 0;
      min-width: 0;
    }

    .fb-filter-fields {
      display: grid;
      grid-template-columns: repeat(4, minmax(120px, 1fr));
      gap: 8px;
      flex: 1;
      min-width: 0;
    }

    .fb-filter-select {
      min-width: 0;
      width: 100%;
      background: var(--input-bg);
      border: 1px solid var(--input-border);
      border-radius: 6px;
      color: var(--text);
      font-size: 0.75rem;
      padding: 7px 9px;
      outline: none;
    }

    .fb-filter-select:focus { border-color: var(--accent); }

    .fb-filter-summary {
      color: var(--muted);
      font-size: 0.72rem;
      white-space: nowrap;
    }

    .fb-filter-clear {
      border: 1px solid var(--border);
      background: var(--bg-card);
      color: var(--text);
      border-radius: 6px;
      padding: 6px 9px;
      font-size: 0.72rem;
      cursor: pointer;
      white-space: nowrap;
    }

    .fb-filter-clear:hover {
      border-color: var(--accent);
      background: var(--overlay-hover);
    }

    @media (max-width: 760px) {
      .fb-filter-bar {
        align-items: stretch;
        flex-direction: column;
      }

      .fb-filter-fields {
        grid-template-columns: 1fr;
      }

      .fb-filter-summary {
        align-self: flex-start;
      }

      .fb-mosaic-grid {
        grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
      }

      .fb-mosaic-card:nth-child(n) {
        grid-column: span 1;
        grid-row: auto;
      }

      .fb-rooms-grid {
        grid-template-columns: 1fr;
      }
    }

    /* Body scroll area */
    .fb-body {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
    }

    /* ── Palette View ─────────────────────────────────── */
    .fb-palette-view { padding: 16px 20px 24px; }

    .fb-cat-section { margin-bottom: 26px; }

    .fb-cat-header {
      display: flex;
      align-items: center;
      gap: 7px;
      margin-bottom: 11px;
      font-size: 0.69rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: hsl(var(--hue, 200), 55%, 65%);
    }

    body.light-theme .fb-cat-header { color: hsl(var(--hue, 200), 45%, 40%); }

    .fb-cat-header-icon { font-size: 0.95rem; }

    .fb-cat-header-count {
      margin-left: auto;
      color: var(--muted);
      font-weight: 400;
      letter-spacing: 0;
      font-size: 0.75rem;
    }

    /* Swatch grid */
    .fb-swatch-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(192px, 1fr));
      gap: 11px;
    }

    .fb-mosaic-view {
      padding: 8px;
    }

    .fb-board-section {
      margin-bottom: 18px;
    }

    .fb-board-section:last-child {
      margin-bottom: 0;
    }

    .fb-board-section-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 12px;
      padding: 0 2px 7px;
    }

    .fb-board-section-head strong {
      display: block;
      color: var(--text);
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .fb-board-section-head span {
      display: block;
      margin-top: 2px;
      color: var(--muted);
      font-size: 0.7rem;
    }

    .fb-board-section-head em {
      color: var(--muted);
      font-size: 0.72rem;
      font-style: normal;
    }

    .fb-needs-detail-section {
      padding-top: 14px;
      border-top: 1px solid var(--border-subtle);
    }

    /* ── Rooms View — wall-section stack per room ─────────── */
    .fb-rooms-view { padding: 10px; }

    .fb-rooms-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 12px;
      align-items: start;
    }

    .fb-rooms-focused {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    .fb-rooms-back {
      align-self: flex-start;
      background: var(--overlay-subtle);
      border: 1px solid var(--border-subtle);
      color: var(--text);
      font-size: 0.74rem;
      font-weight: 600;
      padding: 6px 12px;
      border-radius: 6px;
      cursor: pointer;
      transition: border-color 0.14s, background 0.14s;
    }

    .fb-rooms-back:hover {
      border-color: var(--accent);
      background: var(--accent-faint);
    }

    .fb-room-section {
      border: 1px solid var(--border);
      border-radius: 10px;
      overflow: hidden;
      background: var(--bg-card);
      animation: fb-card-in 0.36s ease both;
    }

    .fb-room-section.focused {
      width: 100%;
      max-width: 560px;
    }

    .fb-section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 9px 12px;
      border-bottom: 1px solid var(--border-subtle);
    }

    .fb-section-head.clickable {
      cursor: pointer;
      transition: background 0.14s;
    }

    .fb-section-head.clickable:hover { background: var(--accent-faint); }

    .fb-section-head-main { min-width: 0; }

    .fb-section-head-main strong {
      display: block;
      color: var(--text);
      font-size: 0.84rem;
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .fb-section-head-main span {
      display: block;
      margin-top: 2px;
      color: var(--muted);
      font-size: 0.68rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .fb-section-progress {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 0.68rem;
      font-weight: 800;
      letter-spacing: 0.02em;
      color: var(--muted);
      padding: 3px 9px;
      border: 1px solid var(--border-subtle);
      border-radius: 999px;
      white-space: nowrap;
    }

    .fb-section-progress.complete {
      color: var(--accent);
      border-color: var(--accent);
      background: var(--accent-faint);
    }

    .fb-section-progress.empty { opacity: 0.6; }

    .fb-section-expand { font-size: 0.78rem; opacity: 0.7; }

    .fb-section-body {
      display: flex;
      gap: 8px;
      padding: 10px;
    }

    /* The vertical wall section: bands stack in true proportion. */
    .fb-section-stack {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      height: 300px;
      border: 1px solid var(--border-subtle);
      border-radius: 6px;
      overflow: hidden;
    }

    .fb-room-section.focused .fb-section-stack { height: 420px; }

    .fb-band {
      display: flex;
      min-height: 0;
      cursor: pointer;
      position: relative;
      border-bottom: 1px solid rgba(0,0,0,0.18);
      transition: box-shadow 0.12s;
    }

    .fb-band:last-child { border-bottom: 0; }

    /* True vertical proportions (flex-basis 0, grow = relative band height). */
    .fb-band-ceiling  { flex: 12; }
    .fb-band-wall     { flex: 40; }
    .fb-band-wainscot { flex: 18; }
    .fb-band-base     { flex: 6; }
    .fb-band-floor    { flex: 24; }

    .fb-band:hover { box-shadow: inset 0 0 0 2px var(--accent); z-index: 2; }

    .fb-band-fill {
      flex: 1;
      min-width: 0;
      background-color: var(--overlay-subtle);
    }

    .fb-band-info {
      width: 132px;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 1px;
      padding: 4px 9px;
      background: var(--bg-card);
      border-right: 1px solid var(--border-subtle);
      overflow: hidden;
    }

    .fb-room-section.focused .fb-band-info { width: 168px; }

    .fb-band-abbr {
      color: var(--accent);
      font-size: 0.56rem;
      font-weight: 800;
      letter-spacing: 0.12em;
    }

    .fb-band-name {
      color: var(--text);
      font-size: 0.72rem;
      line-height: 1.15;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .fb-band-sub {
      color: var(--muted);
      font-size: 0.61rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .fb-band-rawcode {
      font-family: var(--mono, ui-monospace, monospace);
      font-size: 0.68rem;
      color: var(--text);
    }

    .fb-band-missing { color: var(--muted); font-style: italic; font-size: 0.68rem; }

    /* Empty / unmatched bands get a hatched fill to read as "to be specified". */
    .fb-band.missing .fb-band-fill,
    .fb-band.unmatched .fb-band-fill,
    .fb-door-leaf.missing,
    .fb-door-leaf.unmatched {
      background-color: var(--overlay-subtle);
      background-image: repeating-linear-gradient(45deg,
        var(--border-subtle) 0, var(--border-subtle) 1px,
        transparent 1px, transparent 8px);
    }

    .fb-band.missing .fb-band-info { opacity: 0.82; }

    /* Slim door-elevation strip beside the section. */
    .fb-section-door-col {
      width: 66px;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .fb-room-section.focused .fb-section-door-col { width: 84px; }

    .fb-door-frame {
      flex: 1;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding-top: 12%;
    }

    .fb-door-leaf {
      position: relative;
      width: 100%;
      height: 88%;
      border-radius: 2px 2px 0 0;
      border: 1px solid rgba(0,0,0,0.28);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 4px 12px rgba(0,0,0,0.22);
      background-color: var(--overlay-subtle);
      cursor: pointer;
      transition: box-shadow 0.12s;
    }

    .fb-door-leaf:hover { box-shadow: inset 0 0 0 2px var(--accent); }

    .fb-door-hardware {
      position: absolute;
      right: 5px;
      top: 50%;
      transform: translateY(-50%);
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: var(--muted);
      box-shadow: 0 0 0 1px rgba(0,0,0,0.3);
      cursor: pointer;
    }

    .fb-door-hardware:hover { box-shadow: 0 0 0 2px var(--accent); }
    .fb-door-hardware.missing, .fb-door-hardware.unmatched { background-color: var(--border-subtle); }

    .fb-door-labels {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .fb-door-label {
      display: flex;
      flex-direction: column;
      gap: 1px;
      min-width: 0;
    }

    .fb-door-label.missing, .fb-door-label.unmatched { opacity: 0.7; }

    .fb-door-label-name {
      color: var(--text);
      font-size: 0.62rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .fb-mosaic-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      grid-auto-rows: auto;
      gap: 4px;
      align-items: stretch;
    }

    /* Swatch card */
    .fb-swatch-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 10px;
      overflow: hidden;
      position: relative;
      animation: fb-card-in 0.38s ease both;
      transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.18s;
    }

    .fb-mosaic-card {
      min-height: 154px;
      height: 154px;
      cursor: grab;
      border-radius: 3px;
      background: var(--bg);
    }

    .fb-mosaic-card:nth-child(n) {
      grid-column: auto;
      grid-row: auto;
    }

    .fb-mosaic-card:active { cursor: grabbing; }

    .fb-mosaic-card.dragging {
      opacity: 0.55;
      transform: scale(0.98);
    }

    .fb-mosaic-card.drag-over {
      border-color: var(--accent);
      box-shadow: 0 0 0 2px var(--accent-light), 0 10px 32px var(--card-shadow);
    }

    .fb-needs-detail-grid {
      grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    }

    .fb-needs-detail-grid .fb-mosaic-card {
      min-height: 128px;
      height: 128px;
    }

    .fb-swatch-needs-detail {
      opacity: 0.86;
      border-style: dashed;
    }

    .fb-swatch-card:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 18px var(--card-shadow);
      border-color: var(--accent);
      z-index: 2;
    }

    .fb-swatch-color {
      height: 90px;
      position: relative;
      overflow: hidden;
      transition: filter 0.2s;
    }

    .fb-mosaic-card .fb-swatch-color {
      height: 100%;
      min-height: inherit;
      display: flex;
      align-items: flex-end;
    }

    .fb-swatch-texture-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      z-index: 1;
    }

    .fb-swatch-texture-img + .fb-swatch-actions,
    .fb-swatch-color .fb-swatch-actions,
    .fb-swatch-color .fb-auto-badge,
    .fb-swatch-color .fb-swatch-cat-badge {
      z-index: 3;
    }

    .fb-swatch-card:hover .fb-swatch-color {
      filter: brightness(1.05);
    }

    /* Hover-reveal action buttons */
    .fb-swatch-actions {
      position: absolute;
      top: 7px;
      left: 7px;
      display: flex;
      gap: 4px;
      opacity: 0;
      transition: opacity 0.15s;
      z-index: 3;
    }

    .fb-swatch-card:hover .fb-swatch-actions { opacity: 1; }

    .fb-mosaic-card .fb-swatch-actions {
      top: 32px;
      left: auto;
      right: 5px;
      gap: 3px;
    }

    .fb-action-btn {
      background: rgba(10,10,10,0.6);
      border: none;
      color: #fff;
      width: 26px;
      height: 26px;
      border-radius: 3px;
      cursor: pointer;
      font-size: 0.72rem;
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      transition: background 0.12s;
    }

    .fb-action-btn:hover { background: rgba(0,184,148,0.82); }
    .fb-action-btn.fb-action-delete:hover { background: rgba(231,76,60,0.82); }

    body.light-theme .fb-action-btn { background: rgba(0,0,0,0.45); }

    /* Code badge (bottom-left of swatch) */
    .fb-swatch-code {
      position: absolute;
      bottom: 8px;
      left: 8px;
      font-size: 0.67rem;
      font-weight: 800;
      letter-spacing: 0.07em;
      background: rgba(0,0,0,0.22);
      border: 1px solid currentColor;
      border-radius: 4px;
      padding: 2px 6px;
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      transition: opacity 0.15s;
    }

    /* Category icon badge (top-right of swatch) */
    .fb-swatch-cat-badge {
      position: absolute;
      top: 5px;
      right: 5px;
      min-width: 30px;
      text-align: center;
      font-size: 0.57rem;
      font-weight: 900;
      letter-spacing: 0.08em;
      opacity: 0.82;
      color: rgba(255,255,255,0.9);
      background: rgba(0,0,0,0.34);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 3px;
      padding: 3px 4px;
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
      pointer-events: none;
    }

    /* Swatch body */
    .fb-swatch-body { padding: 9px 11px 8px; }

    .fb-mosaic-card .fb-swatch-body {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
      padding: 22px 48px 6px 7px;
      background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.18) 45%, rgba(0,0,0,0.48) 100%);
      color: #fff;
      pointer-events: none;
    }

    .fb-mosaic-card .fb-swatch-label,
    .fb-mosaic-card .fb-swatch-mfr,
    .fb-mosaic-card .fb-swatch-product,
    .fb-mosaic-card .fb-swatch-meta,
    .fb-mosaic-card .fb-spec-code {
      color: rgba(255,255,255,0.88);
      text-shadow: 0 1px 4px rgba(0,0,0,0.55);
    }

    .fb-mosaic-card .fb-swatch-meta {
      display: flex;
      justify-content: flex-end;
      margin-top: 1px;
    }

    .fb-mosaic-card .fb-finish-type {
      display: none;
    }

    .fb-mosaic-card .fb-swatch-mfr,
    .fb-mosaic-card .fb-swatch-product {
      display: none;
    }

    .fb-mosaic-card .fb-swatch-label {
      font-size: 0.68rem;
      font-weight: 700;
      opacity: 0.88;
    }

    .fb-swatch-label {
      font-size: 0.83rem;
      font-weight: 600;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .fb-swatch-mfr {
      font-size: 0.7rem;
      color: var(--accent);
      margin-top: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .fb-swatch-product {
      font-size: 0.67rem;
      color: var(--muted);
      margin-top: 1px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .fb-swatch-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 7px;
      font-size: 0.67rem;
      color: var(--muted);
    }

    .fb-finish-type { display: flex; align-items: center; gap: 4px; }

    .fb-sheen-dots {
      letter-spacing: -1px;
      font-size: 0.58rem;
      color: var(--amber);
    }

    .fb-usage-count { display: flex; align-items: center; gap: 4px; }

    .fb-usage-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent);
      display: inline-block;
      flex-shrink: 0;
    }

    .fb-room-codes {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 0.63rem;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 120px;
    }

    .fb-room-more {
      color: var(--accent);
      font-size: 0.6rem;
      font-style: normal;
      white-space: nowrap;
    }

    /* Empty state */
    .fb-empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 64px 24px;
      text-align: center;
    }

    .fb-empty-icon { font-size: 3rem; margin-bottom: 16px; }

    .fb-empty-title {
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 8px;
    }

    .fb-empty-sub {
      font-size: 0.8rem;
      color: var(--muted);
      max-width: 340px;
      line-height: 1.65;
    }

    /* ── Schedule / Matrix View ─────────────────────────── */
    .fb-schedule-view {
      display: flex;
      flex-direction: column;
    }

    .fb-schedule-table-wrap { overflow-x: auto; }

    .fb-schedule-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.77rem;
      min-width: 560px;
    }

    .fb-schedule-header-row th {
      position: sticky;
      top: 0;
      background: var(--panel-bg);
      border-bottom: 2px solid var(--border);
      padding: 9px 8px;
      text-align: center;
      font-weight: 700;
      font-size: 0.68rem;
      letter-spacing: 0.05em;
      color: var(--muted);
      z-index: 2;
      white-space: nowrap;
    }

    .fb-schedule-header-row th.fb-col-code,
    .fb-schedule-header-row th.fb-col-room { text-align: left; }

    .fb-col-code { width: 88px; padding-left: 12px !important; }
    .fb-col-room { min-width: 150px; }
    .fb-col-cat { width: 66px; color: hsl(var(--hue,200), 55%, 68%) !important; line-height: 1.3; }
    .fb-col-abbr { font-size: 0.62rem; font-weight: 700; display: block; }

    /* Dept / FA separator rows */
    .fb-dept-row td {
      background: var(--overlay-subtle);
      color: var(--text);
      font-weight: 700;
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.09em;
      padding: 7px 12px;
      border-top: 1px solid var(--border);
    }

    .fb-fa-row td {
      color: var(--muted);
      font-size: 0.68rem;
      padding: 3px 12px 3px 22px;
      background: var(--overlay-subtle);
      border-bottom: 1px solid var(--border-subtle);
    }

    /* Room rows */
    .fb-room-row {
      animation: fb-row-in 0.22s ease both;
    }

    .fb-room-row:hover { background: var(--overlay-hover); }

    .fb-room-row td {
      padding: 5px 8px;
      border-bottom: 1px solid var(--border-subtle);
      vertical-align: middle;
    }

    .fb-cell-code {
      font-family: monospace;
      font-size: 0.7rem;
      color: var(--muted);
      white-space: nowrap;
      padding-left: 12px !important;
    }

    .fb-cell-name {
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 190px;
    }

    .fb-cell-finish { text-align: center; }
    .fb-cell-empty { color: var(--muted); opacity: 0.3; }

    .fb-cell-swatch-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
    }

    .fb-cell-swatch-dot {
      width: 30px;
      height: 22px;
      border-radius: 4px;
      border: 1px solid rgba(255,255,255,0.1);
    }

    body.light-theme .fb-cell-swatch-dot { border-color: rgba(0,0,0,0.12); }

    .fb-cell-code-label {
      font-size: 0.6rem;
      color: var(--muted);
      letter-spacing: 0.04em;
    }

    /* Finish legend strip */
    .fb-schedule-legend {
      padding: 16px 20px 20px;
      border-top: 1px solid var(--border);
    }

    .fb-legend-title {
      font-size: 0.69rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--muted);
      margin-bottom: 10px;
    }

    .fb-legend-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .fb-legend-item {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 6px 10px 6px 6px;
    }

    .fb-legend-swatch {
      width: 30px;
      height: 30px;
      border-radius: 4px;
      flex-shrink: 0;
      border: 1px solid rgba(255,255,255,0.1);
    }

    body.light-theme .fb-legend-swatch { border-color: rgba(0,0,0,0.1); }

    .fb-legend-info {
      display: flex;
      flex-direction: column;
      gap: 1px;
    }

    .fb-legend-code { font-size: 0.69rem; font-weight: 700; color: var(--text); letter-spacing: 0.05em; }
    .fb-legend-label { font-size: 0.66rem; color: var(--muted); }
    .fb-legend-mfr { font-size: 0.63rem; color: var(--accent); }

    /* ── Room Finish Assignment Section (in room detail) ── */
    .fb-room-section {
      margin-top: 2px;
      padding-bottom: 4px;
    }

    .fb-room-section-header {
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--accent);
      margin-bottom: 8px;
    }

    .fb-room-row-assign {
      display: grid;
      grid-template-columns: 22px 90px 1fr;
      align-items: center;
      gap: 8px;
      margin-bottom: 6px;
    }

    .fb-room-swatch {
      width: 22px;
      height: 22px;
      border-radius: 4px;
      border: 1px solid var(--border);
      flex-shrink: 0;
    }

    .fb-room-swatch-empty { background: var(--bg-card); }

    .fb-room-cat-label {
      font-size: 0.72rem;
      color: var(--muted);
      white-space: nowrap;
    }

    .fb-room-select {
      background: var(--input-bg);
      border: 1px solid var(--input-border);
      border-radius: 5px;
      color: var(--text);
      font-size: 0.75rem;
      padding: 4px 6px;
      outline: none;
      cursor: pointer;
      width: 100%;
      transition: border-color 0.14s;
    }

    .fb-room-select:focus { border-color: var(--accent); }

    /* ── Edit / Add Modal ────────────────────────────────── */
    .fb-modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: var(--modal-overlay);
      z-index: 3000;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }

    .fb-modal-overlay.active {
      display: flex;
      animation: fb-modal-fade 0.18s ease;
    }

    .fb-modal-panel {
      background: var(--dialog-bg);
      border: 1px solid var(--border);
      border-radius: 13px;
      width: min(660px, 95vw);
      max-height: 92vh;
      overflow-y: auto;
      box-shadow: 0 28px 90px rgba(0,0,0,0.55);
      animation: fb-modal-rise 0.26s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

    .fb-modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 20px 13px;
      border-bottom: 1px solid var(--border);
    }

    .fb-modal-title { font-size: 1rem; font-weight: 700; color: var(--text); }

    .fb-modal-close {
      background: none;
      border: none;
      color: var(--muted);
      font-size: 1rem;
      cursor: pointer;
      padding: 5px 8px;
      border-radius: 5px;
      transition: color 0.12s, background 0.12s;
    }

    .fb-modal-close:hover { color: var(--error); background: var(--error-faint); }

    .fb-modal-body {
      display: grid;
      grid-template-columns: 190px 1fr;
    }

    /* Preview column */
    .fb-modal-preview-col {
      padding: 20px 16px;
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .fb-modal-preview-swatch {
      height: 150px;
      border-radius: 9px;
      border: 1px solid var(--border);
      position: relative;
      display: flex;
      align-items: flex-end;
      padding: 10px;
      transition: background-color 0.14s, background-image 0.14s;
    }

    .fb-preview-code {
      font-size: 0.82rem;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-shadow: 0 1px 5px rgba(0,0,0,0.5);
      transition: color 0.14s;
    }

    .fb-modal-preview-info { text-align: center; }
    .fb-preview-label { font-size: 0.8rem; font-weight: 600; color: var(--text); min-height: 1.1em; }
    .fb-preview-mfr { font-size: 0.68rem; color: var(--muted); margin-top: 3px; min-height: 1em; }

    /* Color picker */
    .fb-color-picker-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 4px;
      min-width: 0;
    }

    input[type="color"]#fb-color-native {
      width: 34px;
      height: 34px;
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 2px;
      background: var(--input-bg);
      cursor: pointer;
      flex-shrink: 0;
    }

    .fb-color-hex {
      flex: 1 1 auto;
      min-width: 0;
      width: 100%;
      box-sizing: border-box;
      font-family: monospace;
      font-size: 0.82rem;
      letter-spacing: 0.04em;
    }

    .fb-texture-upload-row {
      display: flex;
      gap: 7px;
      min-width: 0;
    }

    .fb-texture-btn {
      flex: 1 1 0;
      min-width: 0;
      padding: 6px 8px;
      background: var(--input-bg);
      border: 1px solid var(--input-border);
      color: var(--text);
      border-radius: 6px;
      font-size: 0.76rem;
      cursor: pointer;
      transition: border-color 0.14s, background 0.14s, opacity 0.14s;
    }

    .fb-texture-btn:hover:not(:disabled) {
      border-color: var(--accent);
      background: var(--overlay-hover);
    }

    .fb-texture-btn:disabled {
      cursor: default;
      opacity: 0.45;
    }

    .fb-texture-name {
      color: var(--muted);
      font-size: 0.66rem;
      line-height: 1.25;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* Form column */
    .fb-modal-form-col {
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .fb-field-row { display: flex; gap: 10px; }

    .fb-field-group { display: flex; flex-direction: column; gap: 4px; }

    .fb-field-label {
      font-size: 0.69rem;
      font-weight: 700;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.07em;
    }

    .fb-input, .fb-select, .fb-textarea {
      background: var(--input-bg);
      border: 1px solid var(--input-border);
      border-radius: 6px;
      color: var(--text);
      font-size: 0.82rem;
      padding: 7px 9px;
      outline: none;
      font-family: inherit;
      transition: border-color 0.14s;
    }

    .fb-input:focus, .fb-select:focus, .fb-textarea:focus { border-color: var(--accent); }

    .fb-textarea { resize: vertical; min-height: 58px; }

    .fb-modal-footer {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      padding: 13px 20px;
      border-top: 1px solid var(--border);
    }

    .fb-btn-cancel {
      padding: 7px 16px;
      border: 1px solid var(--border);
      background: transparent;
      color: var(--muted);
      border-radius: 7px;
      font-size: 0.82rem;
      cursor: pointer;
      transition: background 0.12s, color 0.12s;
    }

    .fb-btn-cancel:hover { background: var(--overlay-hover); color: var(--text); }

    .fb-btn-save {
      padding: 7px 20px;
      background: var(--accent);
      border: none;
      color: #fff;
      border-radius: 7px;
      font-size: 0.82rem;
      font-weight: 600;
      cursor: pointer;
      transition: opacity 0.14s, transform 0.1s;
    }

    .fb-btn-save:hover { opacity: 0.83; transform: translateY(-1px); }
    .fb-btn-save:active { transform: translateY(0); }

    /* Narrow screen: stack modal columns */
    @media (max-width: 520px) {
      .fb-modal-body { grid-template-columns: 1fr; }
      .fb-modal-preview-col { border-right: none; border-bottom: 1px solid var(--border); }
    }

    /* ── Auto-populated (TIL) card treatment ────────────── */
    .fb-swatch-auto { border-style: dashed; }

    .fb-auto-badge {
      position: absolute;
      top: 5px;
      left: 5px;
      font-size: 0.54rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      background: rgba(0,0,0,0.3);
      color: rgba(255,255,255,0.78);
      border-radius: 2px;
      padding: 2px 4px;
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }

    .fb-spec-code {
      font-family: monospace;
      font-size: 0.72rem;
      opacity: 0.75;
    }

    .fb-swatch-label-spec { font-weight: 500; color: var(--muted); }

    .fb-modal-usage-section {
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid var(--border-subtle);
    }

    .fb-usage-room-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 6px;
    }

    .fb-usage-room-chip {
      display: inline-block;
      padding: 3px 8px;
      font-size: 0.67rem;
      border: 1px solid var(--border-subtle);
      border-radius: 3px;
      background: var(--overlay-subtle);
      color: var(--text);
      white-space: nowrap;
      cursor: default;
    }

    body.light-theme .fb-usage-room-chip {
      background: rgba(0,0,0,0.04);
    }

    .fb-swatch-mfr-empty {
      font-style: italic;
      opacity: 0.45;
      font-size: 0.67rem;
    }

    /* Unmatched cell in schedule (spec exists in room but not in palette) */
    .fb-cell-unmatched { opacity: 0.45; }

    .fb-cell-raw {
      font-family: monospace;
      font-size: 0.62rem;
      color: var(--muted);
    }

    /* Wide code input in modal */
    .fb-code-input-wide { font-family: monospace; font-size: 0.8rem; }

    /* ── Navigator tree node color ──────────────────────── */
    .fb-tree-label-color { color: #e891c8; }

    body.light-theme .fb-tree-label-color { color: #c0609f; }

    /* Room Matrix */
    .rm-root {
      display: flex;
      flex-direction: column;
      height: 100%;
      min-height: 0;
      overflow: hidden;
      background: var(--bg);
      color: var(--text);
    }

    .rm-header {
      display: grid;
      grid-template-columns: minmax(190px, 0.85fr) minmax(320px, 1fr) auto;
      gap: 10px 14px;
      padding: 11px 14px 9px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
      align-items: center;
    }

    .rm-header-title {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }

    .rm-header-icon,
    .rm-inspector-code {
      display: grid;
      place-items: center;
      border: 1px solid rgba(122, 199, 216, 0.4);
      border-radius: 7px;
      color: #7ac7d8;
      background: rgba(122, 199, 216, 0.08);
      font-weight: 800;
      font-family: monospace;
    }

    .rm-header-icon {
      width: 30px;
      height: 30px;
      flex: 0 0 auto;
    }

    .rm-title-main {
      font-size: 0.98rem;
      font-weight: 750;
      color: var(--text);
      line-height: 1.1;
    }

    .rm-title-sub {
      margin-top: 3px;
      font-size: 0.68rem;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 54vw;
    }

    .rm-header-actions,
    .rm-filter-actions,
    .rm-custom-picker,
    .rm-custom-chip-row {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .rm-header-actions {
      justify-content: flex-end;
      align-items: center;
    }

    .rm-view-toggle {
      display: flex;
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg-card);
    }

    .rm-toggle-btn {
      border: 0;
      border-right: 1px solid var(--border);
      background: transparent;
      color: var(--muted);
      padding: 6px 9px;
      font-size: 0.7rem;
      cursor: pointer;
      white-space: nowrap;
    }

    .rm-toggle-btn:last-child { border-right: 0; }
    .rm-toggle-btn:hover { color: var(--text); background: var(--overlay-hover); }
    .rm-toggle-btn.active { color: #071114; background: #7ac7d8; font-weight: 700; }

    .rm-export-btn,
    .rm-filter-clear,
    .rm-icon-btn {
      border: 1px solid var(--border);
      border-radius: 7px;
      background: var(--bg-card);
      color: var(--text);
      padding: 6px 9px;
      font-size: 0.7rem;
      cursor: pointer;
      white-space: nowrap;
    }

    .rm-export-btn:hover,
    .rm-filter-clear:hover,
    .rm-icon-btn:hover {
      border-color: #7ac7d8;
      background: rgba(122, 199, 216, 0.08);
    }

    .rm-density-toggle {
      display: flex;
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: 7px;
      background: var(--bg-card);
    }

    .rm-density-toggle .rm-icon-btn {
      border: 0;
      border-right: 1px solid var(--border);
      border-radius: 0;
      width: 30px;
      padding: 7px 0;
    }

    .rm-density-toggle .rm-icon-btn:last-child { border-right: 0; }

    .rm-icon-btn {
      min-width: 30px;
      height: 29px;
      display: inline-grid;
      place-items: center;
      padding: 0 8px;
      font-size: 0.78rem;
      line-height: 1;
    }

    .rm-icon-btn.active {
      color: #071114;
      background: #7ac7d8;
      border-color: #7ac7d8;
      font-weight: 800;
    }

    .rm-metrics {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 6px;
      min-width: 0;
    }

    .rm-metric {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
      min-width: 0;
      padding: 5px 7px;
      border: 0;
      border-radius: 5px;
      background: transparent;
    }

    .rm-metric span {
      font-size: 0.58rem;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .rm-metric strong {
      font-size: 0.76rem;
      color: var(--text);
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    .rm-filter-bar {
      display: flex;
      flex-direction: column;
      gap: 7px;
      padding: 7px 14px;
      border-bottom: 1px solid var(--border-subtle);
      background: var(--overlay-subtle);
      flex-shrink: 0;
    }

    .rm-lens-strip {
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 7px 14px;
      border-bottom: 1px solid var(--border-subtle);
      background: var(--bg);
      flex-shrink: 0;
    }

    .rm-lens-row {
      display: flex;
      align-items: center;
      gap: 5px;
      overflow-x: auto;
      padding-bottom: 1px;
    }

    .rm-lens-card {
      flex: 0 0 auto;
      min-height: 28px;
      padding: 5px 10px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: var(--bg-card);
      color: var(--text);
      text-align: center;
      cursor: pointer;
      transition: border-color 0.14s, background 0.14s, transform 0.12s;
    }

    .rm-lens-card:hover {
      border-color: rgba(122, 199, 216, 0.55);
      background: rgba(122, 199, 216, 0.08);
    }

    .rm-lens-card.active {
      border-color: #7ac7d8;
      background: rgba(122, 199, 216, 0.14);
      box-shadow: none;
    }

    .rm-lens-card strong {
      display: block;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .rm-lens-card strong {
      font-size: 0.68rem;
      line-height: 1.2;
    }

    .rm-focus-row {
      display: flex;
      align-items: center;
      gap: 5px;
      flex-wrap: wrap;
    }

    .rm-focus-chip,
    .rm-focus-clear {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 25px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: var(--bg-card);
      color: var(--text);
      padding: 3px 8px;
      font-size: 0.66rem;
      cursor: pointer;
    }

    .rm-focus-chip strong {
      min-width: 16px;
      height: 16px;
      display: inline-grid;
      place-items: center;
      border-radius: 999px;
      background: rgba(122, 199, 216, 0.16);
      color: #7ac7d8;
      font-size: 0.66rem;
      font-variant-numeric: tabular-nums;
    }

    .rm-focus-chip:hover,
    .rm-focus-clear:hover {
      border-color: rgba(122, 199, 216, 0.55);
      background: rgba(122, 199, 216, 0.08);
    }

    .rm-focus-chip.active {
      border-color: #7ac7d8;
      background: rgba(122, 199, 216, 0.14);
    }

    .rm-focus-chip.disabled {
      opacity: 0.48;
      cursor: default;
    }

    .rm-focus-clear {
      border-radius: 7px;
      color: var(--muted);
    }

    .rm-root.quiet-mode:not(.filters-open) .rm-focus-chip:not(.active) {
      display: none;
    }

    .rm-root.quiet-mode:not(.filters-open) .rm-lens-card:not(.active) {
      color: var(--muted);
      background: transparent;
      border-color: transparent;
    }

    .rm-root.quiet-mode:not(.filters-open) .rm-lens-card:not(.active):hover {
      border-color: var(--border);
      background: var(--overlay-hover);
    }

    .rm-filter-fields {
      display: grid;
      grid-template-columns: minmax(180px, 1.2fr) repeat(8, minmax(112px, 1fr));
      gap: 8px;
      min-width: 0;
    }

    .rm-filter-compact {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .rm-search-primary {
      max-width: 360px;
    }

    .rm-filter-summary {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--muted);
      font-size: 0.68rem;
    }

    .rm-filter-fields,
    .rm-filter-actions,
    .rm-custom-picker {
      display: none;
    }

    .rm-root.filters-open .rm-filter-fields {
      display: grid;
    }

    .rm-root.filters-open .rm-filter-actions,
    .rm-root.filters-open .rm-custom-picker {
      display: flex;
    }

    .rm-root.filters-open .rm-filter-search-advanced {
      display: none;
    }

    .rm-filter-input,
    .rm-filter-select {
      min-width: 0;
      width: 100%;
      height: 32px;
      border: 1px solid var(--input-border);
      border-radius: 6px;
      background: var(--input-bg);
      color: var(--text);
      padding: 0 9px;
      font-size: 0.74rem;
      outline: none;
    }

    .rm-filter-input:focus,
    .rm-filter-select:focus { border-color: #7ac7d8; }

    .rm-group-select { width: auto; min-width: 134px; }
    .rm-saved-view-select { width: auto; min-width: 150px; }

    .rm-bulk-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-height: 0;
      max-height: 0;
      padding: 0 14px;
      overflow: hidden;
      border-bottom: 1px solid var(--border-subtle);
      background: var(--bg-card);
      flex-shrink: 0;
      opacity: 0;
      transition: max-height 0.16s ease, padding 0.16s ease, opacity 0.16s ease;
    }

    .rm-bulk-bar.active {
      max-height: 74px;
      padding: 6px 14px;
      background: rgba(122, 199, 216, 0.08);
      opacity: 1;
    }

    .rm-bulk-left,
    .rm-bulk-actions {
      display: flex;
      align-items: center;
      gap: 7px;
      flex-wrap: wrap;
      min-width: 0;
    }

    .rm-bulk-left strong {
      min-width: 24px;
      height: 24px;
      display: inline-grid;
      place-items: center;
      border-radius: 999px;
      background: #7ac7d8;
      color: #071114;
      font-size: 0.72rem;
      font-variant-numeric: tabular-nums;
    }

    .rm-bulk-left span,
    .rm-bulk-left em {
      color: var(--muted);
      font-size: 0.72rem;
      font-style: normal;
    }

    .rm-bulk-actions button {
      min-height: 27px;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--bg);
      color: var(--text);
      padding: 4px 8px;
      font-size: 0.7rem;
      cursor: pointer;
    }

    .rm-bulk-actions button:hover:not(:disabled) {
      border-color: rgba(122, 199, 216, 0.55);
      background: rgba(122, 199, 216, 0.1);
    }

    .rm-bulk-actions button:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }

    .rm-custom-picker {
      padding-top: 8px;
      border-top: 1px solid var(--border-subtle);
    }

    .rm-custom-picker > .rm-filter-select { width: min(360px, 100%); }

    .rm-custom-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 26px;
      border: 1px solid rgba(122, 199, 216, 0.28);
      border-radius: 6px;
      background: rgba(122, 199, 216, 0.08);
      color: var(--text);
      font-size: 0.7rem;
      cursor: pointer;
    }

    .rm-custom-chip span { color: var(--muted); font-weight: 700; }

    .rm-body {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 320px;
      min-height: 0;
      flex: 1;
    }

    .rm-root.inspector-closed .rm-body {
      grid-template-columns: minmax(0, 1fr);
    }

    .rm-table-panel {
      min-width: 0;
      min-height: 0;
      overflow: hidden;
    }

    .rm-table-wrap {
      height: 100%;
      overflow: auto;
    }

    .rm-table {
      width: max-content;
      min-width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
      font-size: 0.75rem;
    }

    .rm-table th {
      position: sticky;
      top: 0;
      z-index: 3;
      height: 30px;
      padding: 0;
      border-bottom: 1px solid var(--border);
      border-right: 1px solid var(--border-subtle);
      background: var(--bg-card);
      color: var(--muted);
      text-align: left;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      font-size: 0.6rem;
      white-space: nowrap;
    }

    .rm-th-inner {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 5px;
      width: 100%;
      height: 100%;
      min-width: 0;
      padding: 0 14px 0 8px;
      box-sizing: border-box;
    }

    .rm-th-inner span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .rm-col-resizer {
      position: absolute;
      top: 0;
      right: -4px;
      width: 9px;
      height: 100%;
      border: 0;
      border-radius: 0;
      background: transparent;
      cursor: col-resize;
      z-index: 8;
    }

    .rm-col-resizer::after {
      content: "";
      position: absolute;
      top: 8px;
      bottom: 8px;
      left: 4px;
      width: 1px;
      background: transparent;
    }

    .rm-table th:hover .rm-col-resizer::after,
    body.rm-resizing .rm-col-resizer::after {
      background: #7ac7d8;
    }

    .rm-table td {
      height: 32px;
      padding: 3px 7px;
      border-bottom: 1px solid var(--border-subtle);
      border-right: 1px solid var(--border-subtle);
      color: var(--text);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      vertical-align: middle;
    }

    .rm-root.wrap-text .rm-table {
      table-layout: fixed;
    }

    .rm-root.wrap-text .rm-table td {
      height: auto;
      min-height: 34px;
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
      overflow-wrap: anywhere;
      word-break: normal;
      line-height: 1.3;
      vertical-align: top;
      padding-top: 7px;
      padding-bottom: 7px;
    }

    .rm-root.wrap-text .rm-cell-value {
      max-width: calc(100% - 20px);
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
      overflow-wrap: anywhere;
      vertical-align: top;
    }

    .rm-root.wrap-text .rm-cell-room,
    .rm-root.wrap-text .rm-jsn-list,
    .rm-root.wrap-text .rm-muted-line {
      white-space: normal;
      overflow-wrap: anywhere;
    }

    .rm-root.wrap-text .rm-chip-row {
      display: flex;
      flex-wrap: wrap;
      overflow: visible;
      align-items: flex-start;
      gap: 4px;
    }

    .rm-root.wrap-text .rm-chip {
      max-width: 100%;
      white-space: normal;
      line-height: 1.2;
    }

    .rm-root.wrap-text .rm-data-row.selected .rm-sticky-col,
    .rm-root.wrap-text .rm-data-row:hover .rm-sticky-col,
    .rm-root.wrap-text .rm-sticky-col {
      background-clip: padding-box;
    }

    .rm-density-compact .rm-table th { height: 28px; }
    .rm-density-compact .rm-table td {
      height: 28px;
      padding-top: 2px;
      padding-bottom: 2px;
      font-size: 0.7rem;
    }

    .rm-density-compact.wrap-text .rm-table td {
      min-height: 28px;
      padding-top: 5px;
      padding-bottom: 5px;
    }

    .rm-density-compact .rm-filter-bar {
      padding-top: 8px;
      padding-bottom: 8px;
    }

    .rm-density-compact .rm-metric {
      padding-top: 6px;
      padding-bottom: 6px;
    }

    .rm-select-col {
      width: 38px;
      text-align: center !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    .rm-select-th {
      justify-content: center;
      padding: 0 !important;
    }

    .rm-select-col input {
      width: 14px;
      height: 14px;
      accent-color: #7ac7d8;
      cursor: pointer;
    }

    .rm-group-row td {
      position: sticky;
      top: 30px;
      z-index: 2;
      height: 28px;
      background: color-mix(in srgb, var(--bg-card) 78%, #7ac7d8 8%);
      color: #7ac7d8;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-size: 0.66rem;
    }

    .rm-sticky-col {
      position: sticky;
      z-index: 4;
      background: var(--bg);
      box-shadow: 1px 0 0 var(--border-subtle);
    }

    th.rm-sticky-col {
      z-index: 7;
      background: var(--bg-card);
    }

    .rm-data-row:hover .rm-sticky-col { background: var(--overlay-hover); }
    .rm-data-row.selected .rm-sticky-col { background: color-mix(in srgb, var(--bg) 88%, #7ac7d8 12%); }

    .rm-data-row { cursor: pointer; }
    .rm-data-row:hover td { background: var(--overlay-hover); }
    .rm-data-row.selected td { background: rgba(122, 199, 216, 0.1); }
    .rm-data-row.checked td { box-shadow: inset 0 1px 0 rgba(122, 199, 216, 0.08), inset 0 -1px 0 rgba(122, 199, 216, 0.08); }

    .rm-cell-code {
      font-family: monospace;
      font-weight: 750;
      color: #7ac7d8 !important;
    }

    .rm-cell-room { font-weight: 650; }

    .rm-attr-cell {
      position: relative;
      cursor: cell;
    }

    .rm-attr-cell:hover {
      outline: 1px solid rgba(122, 199, 216, 0.38);
      outline-offset: -1px;
    }

    .rm-attr-cell.missing {
      color: var(--muted);
      opacity: 0.58;
    }

    .rm-cell-value {
      display: inline-block;
      max-width: calc(100% - 20px);
      overflow: hidden;
      text-overflow: ellipsis;
      vertical-align: middle;
    }

    .rm-finish-swatch {
      display: inline-block;
      width: 13px;
      height: 13px;
      margin-right: 6px;
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: 3px;
      vertical-align: -2px;
    }

    body.light-theme .rm-finish-swatch { border-color: rgba(0,0,0,0.15); }

    .rm-source-dot {
      position: absolute;
      right: 5px;
      top: 50%;
      width: 6px;
      height: 6px;
      margin-top: -3px;
      border-radius: 50%;
      background: var(--muted);
      opacity: 0;
      transition: opacity 0.12s ease;
    }

    .rm-attr-cell:hover .rm-source-dot,
    .rm-data-row.selected .rm-source-dot {
      opacity: 0.72;
    }

    .rm-source-dot.project { background: #7ac7d8; }
    .rm-source-dot.room { background: #8ddf9f; }
    .rm-source-dot.criteria { background: #d8a85f; }
    .rm-source-dot.missing { background: #9ca3af; opacity: 0.45; }

    .rm-review-mark {
      position: absolute;
      right: 5px;
      bottom: 5px;
      width: 8px;
      height: 3px;
      border-radius: 999px;
      background: #7ed6a4;
      opacity: 0;
      transition: opacity 0.12s ease;
    }

    .rm-attr-cell:hover .rm-review-mark,
    .rm-data-row.selected .rm-review-mark {
      opacity: 0.82;
    }

    .rm-review-mark.approved { background: #7ac7d8; }
    .rm-review-mark.ignored { background: #9ca3af; }
    .rm-review-mark.override { background: #e4bd7d; }

    .rm-source-chip-row {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      flex-wrap: wrap;
      max-width: 100%;
    }

    .rm-source-chip,
    .rm-source-pill {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      border-radius: 999px;
      border: 1px solid var(--border-subtle);
      background: var(--overlay-subtle);
      color: var(--muted);
      font-size: 0.62rem;
      line-height: 1;
      white-space: nowrap;
    }

    .rm-source-chip {
      min-height: 20px;
      padding: 3px 7px;
    }

    .rm-source-chip strong {
      color: var(--text);
      font-variant-numeric: tabular-nums;
    }

    .rm-source-pill {
      justify-self: end;
      padding: 3px 6px;
    }

    .rm-source-chip.project,
    .rm-source-pill.project {
      border-color: rgba(122, 199, 216, 0.35);
      background: rgba(122, 199, 216, 0.1);
      color: #8dd8e8;
    }

    .rm-source-chip.room,
    .rm-source-pill.room {
      border-color: rgba(98, 190, 142, 0.35);
      background: rgba(98, 190, 142, 0.1);
      color: #7ed6a4;
    }

    .rm-source-chip.criteria,
    .rm-source-pill.criteria {
      border-color: rgba(216, 168, 95, 0.4);
      background: rgba(216, 168, 95, 0.11);
      color: #e4bd7d;
    }

    .rm-source-chip.missing,
    .rm-source-pill.missing {
      border-color: var(--border-subtle);
      background: transparent;
      color: var(--muted);
    }

    .rm-chip-row {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      max-width: 100%;
      flex-wrap: nowrap;
      overflow: hidden;
      vertical-align: middle;
    }

    .rm-chip-row.large {
      display: flex;
      flex-wrap: wrap;
      overflow: visible;
    }

    .rm-chip {
      display: inline-flex;
      align-items: center;
      min-height: 20px;
      max-width: 130px;
      padding: 2px 6px;
      border: 1px solid rgba(122, 199, 216, 0.28);
      border-radius: 5px;
      background: rgba(122, 199, 216, 0.08);
      color: var(--text);
      font-size: 0.66rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .rm-chip-row.muted .rm-chip {
      border-color: var(--border);
      background: var(--overlay-subtle);
      color: var(--muted);
    }

    .rm-issue-row {
      display: flex;
      flex-wrap: wrap;
      overflow: visible;
    }

    .rm-issue-chip,
    .rm-ok-chip {
      display: inline-flex;
      align-items: center;
      min-height: 21px;
      max-width: 100%;
      padding: 2px 7px;
      border-radius: 999px;
      font-size: 0.66rem;
      white-space: nowrap;
    }

    .rm-ok-chip {
      border: 1px solid rgba(98, 190, 142, 0.35);
      background: rgba(98, 190, 142, 0.1);
      color: #7ed6a4;
    }

    .rm-issue-chip.high {
      border: 1px solid rgba(231, 76, 60, 0.42);
      background: rgba(231, 76, 60, 0.12);
      color: #ff8d7f;
    }

    .rm-issue-chip.medium {
      border: 1px solid rgba(216, 168, 95, 0.42);
      background: rgba(216, 168, 95, 0.12);
      color: #e4bd7d;
    }

    .rm-issue-chip.low {
      border: 1px solid rgba(122, 199, 216, 0.34);
      background: rgba(122, 199, 216, 0.1);
      color: #8dd8e8;
    }

    .rm-finish-token-row {
      display: flex;
      align-items: center;
      gap: 5px;
      flex-wrap: wrap;
    }

    .rm-finish-token {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      min-width: 0;
      max-width: 100%;
      padding: 2px 5px 2px 3px;
      border: 1px solid var(--border-subtle);
      border-radius: 5px;
      background: var(--overlay-subtle);
      font-size: 0.66rem;
    }

    .rm-finish-token span:last-child {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .rm-complete-bar {
      display: inline-block;
      width: 48px;
      height: 6px;
      border-radius: 999px;
      background: var(--border);
      overflow: hidden;
      vertical-align: 1px;
      margin-right: 5px;
    }

    .rm-complete-bar span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: #7ac7d8;
    }

    .rm-cell em {
      font-style: normal;
      color: var(--muted);
      font-size: 0.68rem;
    }

    .rm-jsn-list {
      font-family: monospace;
      font-size: 0.7rem;
      color: var(--muted);
    }

    .rm-muted-line {
      color: var(--muted);
      font-size: 0.72rem;
    }

    .rm-inspector {
      min-width: 0;
      min-height: 0;
      overflow: auto;
      border-left: 1px solid var(--border);
      background: var(--bg-card);
      padding: 14px;
    }

    .rm-inspector-head {
      display: grid;
      grid-template-columns: 54px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      margin-bottom: 12px;
    }

    .rm-inspector-code {
      min-height: 42px;
      font-size: 0.8rem;
      overflow: hidden;
    }

    .rm-inspector-title {
      color: var(--text);
      font-weight: 750;
      line-height: 1.2;
    }

    .rm-inspector-path {
      margin-top: 3px;
      color: var(--muted);
      font-size: 0.7rem;
      line-height: 1.35;
    }

    .rm-inspector-metrics {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 7px;
      margin-bottom: 14px;
    }

    .rm-inspector-metrics .rm-metric {
      display: block;
      padding: 7px;
    }

    .rm-inspector-metrics .rm-metric strong {
      display: block;
      margin-top: 3px;
    }

    .rm-inspector-tabs {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 4px;
      margin: 0 0 12px;
      padding: 3px;
      border: 1px solid var(--border-subtle);
      border-radius: 7px;
      background: var(--bg);
    }

    .rm-inspector-tabs button {
      min-width: 0;
      min-height: 26px;
      border: 0;
      border-radius: 5px;
      background: transparent;
      color: var(--muted);
      font-size: 0.66rem;
      cursor: pointer;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .rm-inspector-tabs button:hover {
      color: var(--text);
      background: var(--overlay-hover);
    }

    .rm-inspector-tabs button.active {
      color: #071114;
      background: #7ac7d8;
      font-weight: 750;
    }

    .rm-inspector-section {
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px solid var(--border-subtle);
    }

    .rm-inspector-section h4 {
      margin: 0 0 8px;
      color: var(--muted);
      font-size: 0.68rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .rm-inspector-field {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(72px, auto) minmax(68px, auto);
      width: 100%;
      gap: 8px;
      align-items: center;
      min-height: 30px;
      margin-bottom: 5px;
      border: 1px solid var(--border-subtle);
      border-radius: 6px;
      background: var(--bg);
      color: var(--text);
      font-size: 0.72rem;
      text-align: left;
      cursor: pointer;
    }

    .rm-inspector-field:has(.rm-field-review) {
      grid-template-columns: minmax(0, 1fr) minmax(72px, auto) minmax(68px, auto);
    }

    .rm-inspector-field:hover { border-color: rgba(122, 199, 216, 0.5); }

    .rm-inspector-field span,
    .rm-inspector-field strong {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .rm-inspector-field span { color: var(--muted); }
    .rm-inspector-field strong { font-weight: 650; text-align: right; }

    .rm-field-review {
      grid-column: 1 / -1;
      justify-self: start;
      color: var(--muted);
      font-size: 0.62rem;
      font-style: normal;
    }

    .rm-field-review.reviewed { color: #7ed6a4; }
    .rm-field-review.approved { color: #8dd8e8; }
    .rm-field-review.ignored { color: #9ca3af; }
    .rm-field-review.override { color: #e4bd7d; }

    .rm-provenance-list {
      display: grid;
      gap: 5px;
    }

    .rm-provenance-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(60px, auto) minmax(74px, auto);
      align-items: center;
      gap: 8px;
      min-height: 29px;
      width: 100%;
      border: 1px solid var(--border-subtle);
      border-radius: 6px;
      background: var(--bg);
      color: var(--text);
      padding: 4px 7px;
      font-size: 0.7rem;
      text-align: left;
      cursor: pointer;
    }

    .rm-provenance-row:hover {
      border-color: rgba(122, 199, 216, 0.5);
    }

    .rm-provenance-row span,
    .rm-provenance-row strong {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .rm-provenance-row span { color: var(--muted); }
    .rm-provenance-row strong { text-align: right; font-weight: 650; }

    .rm-cell-popover-backdrop {
      position: fixed;
      inset: 0;
      z-index: 10020;
      background: transparent;
    }

    .rm-cell-popover {
      position: fixed;
      z-index: 10021;
      width: min(360px, calc(100vw - 24px));
      max-height: min(430px, calc(100vh - 24px));
      overflow: auto;
      border: 1px solid rgba(122, 199, 216, 0.35);
      border-radius: 8px;
      background: var(--bg-card);
      color: var(--text);
      box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
      padding: 10px;
    }

    .rm-cell-popover-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px;
    }

    .rm-cell-popover-head strong,
    .rm-cell-popover-head span {
      display: block;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .rm-cell-popover-head strong {
      color: var(--text);
      font-size: 0.86rem;
    }

    .rm-cell-popover-head span {
      margin-top: 2px;
      color: var(--muted);
      font-size: 0.7rem;
    }

    .rm-cell-popover-head button {
      width: 24px;
      height: 24px;
      border: 1px solid var(--border-subtle);
      border-radius: 50%;
      background: transparent;
      color: var(--muted);
      cursor: pointer;
    }

    .rm-cell-editor {
      display: grid;
      gap: 5px;
      margin-bottom: 9px;
      color: var(--muted);
      font-size: 0.68rem;
    }

    .rm-cell-editor input,
    .rm-cell-editor select,
    .rm-cell-editor textarea {
      width: 100%;
      min-height: 32px;
      border: 1px solid var(--input-border);
      border-radius: 6px;
      background: var(--input-bg);
      color: var(--text);
      padding: 7px 8px;
      font-size: 0.78rem;
      box-sizing: border-box;
    }

    .rm-cell-editor textarea {
      resize: vertical;
      min-height: 72px;
    }

    .rm-cell-popover-meta {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      margin-bottom: 8px;
    }

    .rm-popover-provenance {
      display: grid;
      gap: 3px;
      max-height: 118px;
      overflow: auto;
      margin-bottom: 10px;
      padding: 8px;
      border: 1px solid var(--border-subtle);
      border-radius: 6px;
      background: var(--overlay-subtle);
      color: var(--muted);
      font-size: 0.68rem;
      line-height: 1.35;
    }

    .rm-cell-popover-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
    }

    .rm-cell-popover-actions button {
      min-height: 30px;
      border: 1px solid var(--border-subtle);
      border-radius: 6px;
      background: var(--bg);
      color: var(--text);
      font-size: 0.68rem;
      font-weight: 650;
      cursor: pointer;
    }

    .rm-cell-popover-actions button.primary {
      border-color: #7ac7d8;
      background: #7ac7d8;
      color: #071114;
    }

    .rm-cell-popover-actions button:hover:not(:disabled) {
      border-color: rgba(122, 199, 216, 0.58);
      background: rgba(122, 199, 216, 0.12);
    }

    .rm-cell-popover-actions button.primary:hover {
      background: #8dd8e8;
    }

    .rm-cell-popover-actions button:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }

    .rm-menu-btn {
      min-height: 28px;
      padding: 0 10px;
      border: 1px solid var(--border-subtle);
      border-radius: 6px;
      background: var(--bg);
      color: var(--text);
      font-size: 0.72rem;
      font-weight: 600;
      cursor: pointer;
    }

    .rm-menu-btn:hover { border-color: rgba(122, 199, 216, 0.55); background: rgba(122, 199, 216, 0.1); }
    .rm-menu-btn.active { border-color: #7ac7d8; background: rgba(122, 199, 216, 0.18); color: var(--text); }

    .rm-popover-backdrop {
      position: fixed;
      inset: 0;
      z-index: 10020;
      background: transparent;
    }

    .rm-header-popover {
      position: fixed;
      z-index: 10021;
      max-height: calc(100vh - 96px);
      overflow: auto;
      border: 1px solid rgba(122, 199, 216, 0.4);
      border-radius: 10px;
      background: var(--bg-card);
      color: var(--text);
      box-shadow: 0 18px 42px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(122, 199, 216, 0.08);
      padding: 12px;
      display: grid;
      gap: 10px;
      animation: rm-popover-in 0.12s ease-out;
    }

    .rm-popover-caret {
      position: absolute;
      top: -7px;
      left: var(--rm-caret-x, 50%);
      transform: translateX(-50%) rotate(45deg);
      width: 12px;
      height: 12px;
      background: var(--bg-card);
      border-top: 1px solid rgba(122, 199, 216, 0.4);
      border-left: 1px solid rgba(122, 199, 216, 0.4);
      border-top-left-radius: 2px;
    }

    @keyframes rm-popover-in {
      from { opacity: 0; transform: translateY(-4px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .rm-popover-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .rm-popover-head strong { font-size: 0.82rem; color: var(--text); }

    .rm-popover-status {
      font-size: 0.66rem;
      color: var(--muted);
      padding: 2px 8px;
      border-radius: 999px;
      border: 1px solid var(--border-subtle);
    }

    .rm-popover-status.connected {
      color: #7ac7d8;
      border-color: rgba(122, 199, 216, 0.45);
      background: rgba(122, 199, 216, 0.1);
    }

    .rm-popover-meta { font-size: 0.68rem; color: var(--muted); }

    .rm-popover-row {
      display: grid;
      grid-template-columns: 70px 1fr;
      align-items: center;
      gap: 8px;
    }

    .rm-popover-row label { font-size: 0.7rem; color: var(--muted); }

    .rm-segmented {
      display: inline-flex;
      border: 1px solid var(--border-subtle);
      border-radius: 6px;
      overflow: hidden;
    }

    .rm-segmented button {
      flex: 1 1 0;
      min-height: 26px;
      padding: 0 8px;
      border: 0;
      border-right: 1px solid var(--border-subtle);
      background: var(--bg);
      color: var(--text);
      font-size: 0.7rem;
      cursor: pointer;
    }

    .rm-segmented button:last-child { border-right: 0; }
    .rm-segmented button.active { background: rgba(122, 199, 216, 0.18); color: var(--text); }

    .rm-popover-toggle {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.74rem;
      color: var(--text);
      cursor: pointer;
    }

    .rm-popover-toggle input { margin: 0; }

    .rm-popover-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .rm-popover-actions button,
    .rm-popover-menu button {
      min-height: 30px;
      padding: 0 10px;
      border: 1px solid var(--border-subtle);
      border-radius: 6px;
      background: var(--bg);
      color: var(--text);
      font-size: 0.7rem;
      font-weight: 600;
      cursor: pointer;
      text-align: left;
    }

    .rm-popover-menu {
      display: grid;
      gap: 6px;
    }

    .rm-popover-actions button:hover:not(:disabled),
    .rm-popover-menu button:hover:not(:disabled) {
      border-color: rgba(122, 199, 216, 0.55);
      background: rgba(122, 199, 216, 0.1);
    }

    .rm-popover-actions button:disabled,
    .rm-popover-menu button:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }

    .rm-command-panel {
      margin-bottom: 14px;
      padding: 8px;
      border: 1px solid var(--border-subtle);
      border-radius: 7px;
      background: var(--bg);
    }

    .rm-command-head {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      align-items: center;
      margin-bottom: 8px;
      font-size: 0.72rem;
    }

    .rm-command-head strong {
      color: var(--text);
      font-weight: 750;
    }

    .rm-command-head span {
      color: var(--muted);
      font-size: 0.68rem;
    }

    .rm-command-head span.connected { color: #4cc38a; }

    .rm-command-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 5px;
    }

    .rm-command-grid button {
      min-height: 28px;
      border: 1px solid var(--border-subtle);
      border-radius: 6px;
      background: var(--bg-card);
      color: var(--text);
      font-size: 0.66rem;
      font-weight: 650;
      cursor: pointer;
    }

    .rm-command-grid button:hover:not(:disabled) {
      border-color: rgba(122, 199, 216, 0.58);
      background: rgba(122, 199, 216, 0.12);
    }

    .rm-command-grid button:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }

    .rm-command-status {
      margin-top: 8px;
      color: var(--muted);
      font-size: 0.68rem;
      line-height: 1.35;
    }

    .rm-eq-line {
      display: grid;
      grid-template-columns: 54px minmax(0, 1fr) 34px 26px;
      gap: 7px;
      min-height: 28px;
      align-items: center;
      border-bottom: 1px solid var(--border-subtle);
      font-size: 0.72rem;
    }

    .rm-eq-line strong {
      color: #7ac7d8;
      font-family: monospace;
      font-size: 0.68rem;
    }

    .rm-eq-line span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .rm-eq-line em {
      color: var(--muted);
      font-style: normal;
      text-align: right;
    }

    .rm-eq-remove {
      width: 22px;
      height: 22px;
      border: 1px solid var(--border-subtle);
      border-radius: 50%;
      background: transparent;
      color: var(--muted);
      line-height: 18px;
      cursor: pointer;
    }

    .rm-eq-remove:hover {
      border-color: rgba(255, 107, 107, 0.6);
      color: #ff6b6b;
    }

    .rm-eq-summary-list {
      display: grid;
      gap: 4px;
    }

    .rm-eq-summary-item {
      display: grid;
      grid-template-columns: 52px minmax(0, 1fr) 28px;
      gap: 6px;
      align-items: center;
      min-height: 24px;
      padding: 2px 0;
      font-size: 0.68rem;
    }

    .rm-eq-summary-item strong {
      color: #7ac7d8;
      font-family: monospace;
      font-size: 0.64rem;
    }

    .rm-eq-summary-item span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .rm-eq-summary-item em {
      color: var(--muted);
      font-style: normal;
      text-align: right;
    }

    .rm-empty-state,
    .rm-inspector-empty {
      display: grid;
      place-items: center;
      min-height: 180px;
      color: var(--muted);
      text-align: center;
    }

    .rm-empty-title {
      color: var(--text);
      font-weight: 700;
    }

    @media (max-width: 980px) {
      .rm-header { grid-template-columns: 1fr; }
      .rm-header-actions { justify-content: flex-start; }
      .rm-title-sub { max-width: 78vw; }
      .rm-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .rm-filter-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .rm-search-primary { max-width: none; }
      .rm-filter-compact { flex-wrap: wrap; }
      .rm-body { grid-template-columns: 1fr; }
      .rm-inspector {
        border-left: 0;
        border-top: 1px solid var(--border);
        max-height: 42vh;
      }
    }

    /* ── Room Detail Story Layer ─────────────────────────────────── */
    .room-story-root {
      height: 100%;
      overflow: auto;
      background: var(--bg);
      color: var(--text);
      padding: 18px;
      box-sizing: border-box;
    }

    .room-story-inline {
      height: auto;
      overflow: visible;
      margin: 0;
      padding: 0;
      border: none;
      border-radius: 0;
      background: transparent;
    }

    .detail-panel .room-story-inline .room-story-model-panel,
    .detail-panel .room-story-inline .room-story-narrative-panel {
      background: var(--bg);
    }

    .room-story-grid-inline {
      grid-template-columns: minmax(300px, 1.2fr) minmax(260px, 0.95fr);
    }

    .room-story-inline .room-story-canvas-wrap {
      height: 360px;
    }

    .room-story-inline .room-story-narrative-panel {
      min-height: 360px;
    }

    .room-story-picker {
      height: 100%;
      display: flex;
      flex-direction: column;
      background: var(--bg);
      color: var(--text);
      overflow: hidden;
    }

    .room-story-picker-head {
      padding: 14px;
      border-bottom: 1px solid var(--border);
      display: grid;
      gap: 12px;
    }

    .room-story-picker-head strong {
      display: block;
      font-size: 1rem;
      color: var(--text);
    }

    .room-story-picker-head span {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 0.78rem;
    }

    .room-story-picker-head input {
      width: 100%;
      box-sizing: border-box;
      border: 1px solid var(--input-border);
      border-radius: 7px;
      background: var(--input-bg);
      color: var(--text);
      padding: 8px 10px;
      font-size: 0.84rem;
      outline: none;
    }

    .room-story-picker-head input:focus { border-color: #e891c8; }

    .room-story-picker-list {
      flex: 1;
      overflow-y: auto;
      padding: 8px;
      display: grid;
      gap: 7px;
      align-content: start;
    }

    .room-story-picker-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 12px;
      align-items: center;
      width: 100%;
      text-align: left;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg-card);
      color: var(--text);
      padding: 10px;
      cursor: pointer;
    }

    .room-story-picker-row:hover {
      border-color: #e891c8;
      background: var(--overlay-hover);
    }

    .room-story-picker-main,
    .room-story-picker-meta {
      min-width: 0;
      display: grid;
      gap: 2px;
    }

    .room-story-picker-main strong {
      font-size: 0.84rem;
      color: #e891c8;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .room-story-picker-main span,
    .room-story-picker-meta span {
      color: var(--muted);
      font-size: 0.72rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .room-story-picker-meta {
      text-align: right;
      max-width: 190px;
    }

    .room-story-picker-empty {
      color: var(--muted);
      font-size: 0.84rem;
      padding: 18px;
      text-align: center;
    }

    .room-story-hero {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 16px;
    }

    .room-story-kicker {
      font-size: 0.68rem;
      color: #e891c8;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-weight: 800;
      margin-bottom: 4px;
    }

    .room-story-hero h2 {
      margin: 0;
      font-size: 1.28rem;
      line-height: 1.2;
      color: var(--text);
    }

    .room-story-identity {
      margin-top: 5px;
      color: var(--muted);
      font-size: 0.82rem;
    }

    .room-story-score {
      width: 92px;
      height: 92px;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      background:
        radial-gradient(circle at center, var(--bg-card) 58%, transparent 60%),
        conic-gradient(#e891c8 var(--score), rgba(255,255,255,0.1) 0);
      border: 1px solid var(--border);
    }

    .room-story-score strong { font-size: 1.18rem; line-height: 1; }
    .room-story-score span { margin-top: 4px; font-size: 0.62rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }

    .room-story-grid {
      display: grid;
      grid-template-columns: minmax(360px, 1.45fr) minmax(280px, 0.9fr);
      gap: 14px;
      align-items: stretch;
    }

    .room-story-model-panel,
    .room-story-narrative-panel,
    .room-story-section {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden;
    }

    .room-story-panel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 11px 13px;
      border-bottom: 1px solid var(--border);
    }

    .room-story-panel-head strong {
      display: block;
      font-size: 0.86rem;
      color: var(--text);
    }

    .room-story-panel-head span {
      display: block;
      margin-top: 2px;
      font-size: 0.68rem;
      color: var(--muted);
    }

    .room-story-panel-head button,
    .room-story-actions button,
    .room-story-model-actions button {
      border: 1px solid var(--border);
      background: var(--input-bg);
      color: var(--text);
      border-radius: 6px;
      padding: 6px 9px;
      font-size: 0.74rem;
      cursor: pointer;
    }

    .room-story-panel-head button:hover,
    .room-story-actions button:hover,
    .room-story-model-actions button:hover {
      border-color: #e891c8;
      background: var(--overlay-hover);
    }

    .room-story-model-actions {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .room-story-canvas-wrap {
      position: relative;
      height: 390px;
      min-height: 280px;
      background: radial-gradient(circle at top, rgba(43, 54, 67, 0.9), rgba(12, 16, 22, 0.98));
    }

    .room-story-canvas {
      display: block;
      width: 100%;
      height: 100%;
      cursor: grab;
      touch-action: none;
    }

    .room-story-canvas:active { cursor: grabbing; }

    .room-story-model-badge {
      position: absolute;
      left: 12px;
      bottom: 12px;
      max-width: calc(100% - 24px);
      padding: 6px 9px;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 6px;
      background: rgba(0,0,0,0.42);
      color: rgba(255,255,255,0.82);
      font-size: 0.72rem;
      backdrop-filter: blur(6px);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .room-story-narrative-panel {
      display: flex;
      flex-direction: column;
      min-height: 390px;
    }

    .room-story-textarea {
      flex: 1;
      min-height: 170px;
      margin: 12px;
      padding: 10px;
      resize: vertical;
      border: 1px solid var(--input-border);
      border-radius: 7px;
      background: var(--input-bg);
      color: var(--text);
      font-family: inherit;
      font-size: 0.84rem;
      line-height: 1.5;
      outline: none;
    }

    .room-story-textarea:focus { border-color: #e891c8; }

    .room-story-actions {
      display: flex;
      justify-content: flex-end;
      padding: 0 12px 10px;
    }

    .room-story-qa {
      display: grid;
      gap: 5px;
      padding: 0 12px 12px;
    }

    .room-story-qa div {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 0.72rem;
      color: var(--muted);
    }

    .room-story-qa span {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.62rem;
      font-weight: 800;
      flex-shrink: 0;
    }

    .room-story-qa .ok span { background: var(--success-faint); color: var(--success); }
    .room-story-qa .warn span { background: var(--warning-faint); color: var(--warning); }

    .room-story-section {
      margin-top: 14px;
      padding: 13px;
    }

    .room-story-section-title {
      color: var(--muted);
      font-size: 0.69rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 10px;
    }

    .room-story-finish-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
      gap: 10px;
    }

    .room-story-finish-card {
      display: grid;
      grid-template-columns: 58px 1fr;
      gap: 10px;
      align-items: stretch;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--overlay-subtle);
      padding: 8px;
      min-width: 0;
    }

    .room-story-finish-card.missing { opacity: 0.62; }
    .room-story-finish-card.unmatched { border-color: rgba(255,193,7,0.45); }

    .room-story-finish-swatch {
      min-height: 58px;
      border-radius: 6px;
      border: 1px solid rgba(255,255,255,0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--warning);
      font-weight: 800;
      background: var(--input-bg);
    }

    .room-story-finish-body { min-width: 0; }

    .room-story-finish-top {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      font-size: 0.76rem;
      font-weight: 700;
      color: var(--text);
    }

    .room-story-finish-top em {
      color: var(--muted);
      font-size: 0.64rem;
      font-style: normal;
      font-weight: 500;
    }

    .room-story-finish-code {
      margin-top: 4px;
      font-size: 0.72rem;
      color: #e891c8;
      font-family: monospace;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .room-story-finish-name {
      margin-top: 3px;
      font-size: 0.68rem;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .room-story-section-split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
    }

    .room-story-similar-list,
    .room-story-dna {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .room-story-similar,
    .room-story-dna span {
      border: 1px solid var(--border);
      background: var(--input-bg);
      color: var(--text);
      border-radius: 6px;
      padding: 7px 9px;
      font-size: 0.74rem;
    }

    .room-story-similar {
      cursor: pointer;
      text-align: left;
      max-width: 220px;
    }

    .room-story-similar:hover { border-color: #e891c8; }
    .room-story-similar span { display: block; font-weight: 700; }
    .room-story-similar em { display: block; color: var(--muted); font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .room-story-muted {
      color: var(--muted);
      font-size: 0.78rem;
    }

    @media (max-width: 900px) {
      .room-story-grid,
      .room-story-grid-inline,
      .room-story-section-split {
        grid-template-columns: 1fr;
      }
      .room-story-canvas-wrap { height: 320px; }
    }

    /* ═══════════════════════════════════════════════════════════════
       MEP CALCULATOR — REDESIGNED 4-TAB LAYOUT
       ─────────────────────────────────────────────────────────────── */

    /* ── Top Chrome ────────────────────────────────────────────────── */
    .mep-top-chrome {
      display: flex;
      flex-direction: column;
      gap: 0;
    }
    .mep-chrome-left {
      font-weight: 600;
      font-size: 0.83rem;
      color: var(--text);
      flex-shrink: 0;
      margin-right: 4px;
    }
    .mep-disc-filters {
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
    }
    .mep-disc-filter {
      padding: 4px 11px;
      border-radius: 20px;
      border: 1px solid var(--border);
      background: transparent;
      color: var(--text-secondary);
      font-size: 0.78rem;
      cursor: pointer;
      transition: all 0.12s;
      white-space: nowrap;
    }
    .mep-disc-filter:hover { border-color: var(--accent); color: var(--accent); }
    .mep-disc-filter.active { background: var(--accent); border-color: var(--accent); color: #000; font-weight: 600; }
    .mep-disc-filter.active-hvac { background: var(--teal); border-color: var(--teal); color: #000; }
    .mep-disc-filter.active-electrical { background: var(--amber); border-color: var(--amber); color: #000; }
    .mep-disc-filter.active-plumbing { background: var(--info); border-color: var(--info); color: #000; }
    .mep-disc-filter.active-medGas { background: var(--purple); border-color: var(--purple); color: #000; }
    .mep-chrome-right {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-left: auto;
    }
    .mep-revit-badge {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 3px 9px;
      border-radius: 12px;
      border: 1px solid var(--border);
      font-size: 0.75rem;
      color: var(--muted);
      white-space: nowrap;
    }
    .mep-revit-badge.connected { border-color: var(--success); color: var(--success); }
    .mep-revit-badge .dot, .mep-revit-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }

    /* ── Content Tab Bar ───────────────────────────────────────────── */
    .mep-content-tabs {
      display: flex;
      gap: 2px;
      border-bottom: 1px solid var(--border);
      margin-bottom: 0;
    }
    .mep-content-tab {
      padding: 7px 16px;
      background: transparent;
      border: none;
      border-bottom: 2px solid transparent;
      color: var(--text-secondary);
      font-size: 0.82rem;
      cursor: pointer;
      transition: all 0.12s;
      margin-bottom: -1px;
      white-space: nowrap;
    }
    .mep-content-tab:hover { color: var(--text); }
    .mep-content-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

    /* ── Tab Content Area ──────────────────────────────────────────── */
    .mep-tab-body {
      flex: 1 1 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }

    /* ── Network Tab ───────────────────────────────────────────────── */
    /* ── New 3-column network layout ─────────────────────────────────── */
    .mep-network-layout {
      display: flex;
      flex-direction: row;
      align-items: stretch;
      gap: 0;
      min-height: 260px;
      max-height: 520px;
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden;
      background: var(--panel-bg);
    }
    .mep-net-col {
      display: flex;
      flex-direction: column;
      gap: 0;
      padding: 10px 8px;
      overflow: hidden;
    }
    .mep-net-col-src {
      flex: 0 0 200px;
      border-right: 1px solid var(--border);
      background: var(--panel-elevated);
    }
    .mep-net-col-sys {
      flex: 0 0 220px;
      border-right: 1px solid var(--border);
    }
    .mep-net-col-rm {
      flex: 1 1 0;
      min-width: 0;
    }
    .mep-net-nodes {
      flex: 1 1 0;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 5px;
      padding-top: 4px;
    }
    .mep-net-arrow {
      flex: 0 0 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      color: var(--muted);
      padding: 0 2px;
      padding-top: 28px;
    }
    /* ── System node (tier-2 button) ──────────────────────────────── */
    .mep-node-sys {
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding: 7px 10px;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: var(--panel-bg);
      cursor: pointer;
      text-align: left;
      transition: border-color 0.12s, background 0.12s;
    }
    .mep-node-sys:hover { border-color: var(--accent); background: var(--overlay-hover); }
    .mep-node-sys.selected { border-color: var(--accent); background: var(--accent-faint); }
    .mep-node-sys.status-review { border-color: var(--warning); }
    .mep-node-sys.selected.status-review { border-color: var(--warning); background: rgba(230,126,34,0.08); }
    .mep-node-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
    .mep-node-flag { font-size: 0.68rem; color: var(--warning); margin-top: 1px; }
    /* ── Room endpoint list ───────────────────────────────────────── */
    .mep-node-rm-header {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 4px 6px 8px;
      border-bottom: 1px solid var(--border-subtle);
      margin-bottom: 6px;
    }
    .mep-node-rm-header strong { font-size: 0.83rem; flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mep-node-rm-header span { font-size: 0.75rem; color: var(--accent); white-space: nowrap; }
    .mep-node-rm-close { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.9rem; padding: 0 2px; flex-shrink: 0; }
    .mep-node-rm-close:hover { color: var(--text); }
    .mep-node-rm-list { display: flex; flex-direction: column; gap: 3px; }
    .mep-room-endpoint {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 5px 8px;
      border-radius: 5px;
      border: 1px solid var(--border-subtle);
      background: none;
      cursor: pointer;
      text-align: left;
      font-size: 0.78rem;
      transition: background 0.1s, border-color 0.1s;
    }
    .mep-room-endpoint:hover { background: var(--overlay-hover); border-color: var(--accent); }
    .mep-room-endpoint.ep-warn { border-color: rgba(230,126,34,0.4); }
    .mep-re-label { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
    .mep-re-metric { font-size: 0.72rem; color: var(--accent); white-space: nowrap; flex-shrink: 0; }
    .mep-rd { font-size: 0.6rem; flex-shrink: 0; }
    .mep-revit-dot-match { color: var(--success); }
    .mep-revit-dot-miss  { color: var(--muted); }
    .mep-revit-dot-delta { color: var(--warning); }
    .mep-node-rm-empty { font-size: 0.77rem; color: var(--muted); padding: 8px 4px; }
    .mep-node-rm-hint {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      gap: 8px;
      color: var(--muted);
      font-size: 0.8rem;
    }
    .mep-node-rm-hint-icon { font-size: 1.6rem; opacity: 0.35; }
    .mep-node-rm-push { margin-top: 0; }
    .mep-node-rm-place { margin-top: 0; background: var(--accent-dim, rgba(99,179,237,0.12)); border-color: var(--accent); color: var(--accent); }
    .mep-node-rm-place:hover { background: var(--accent); color: #fff; }
    .mep-node-rm-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 8px;
      padding-top: 6px;
      border-top: 1px solid var(--border-subtle);
    }
    .mep-revit-status-banner {
      font-size: 0.72rem;
      padding: 4px 8px;
      border-radius: 4px;
      margin: 4px 0 2px;
    }
    .mep-status-ok { background: rgba(72,187,120,0.15); color: var(--success, #48bb78); }
    .mep-status-warn { background: rgba(237,137,54,0.15); color: var(--warning, #ed8936); }
    .mep-status-busy { background: rgba(99,179,237,0.12); color: var(--accent); font-style: italic; }
    .mep-node-rm-hint-small {
      font-size: 0.71rem;
      color: var(--muted);
      padding: 6px 2px 4px;
      border-top: 1px solid var(--border-subtle);
      margin-top: 6px;
    }
    /* ── Room group heading (family view) ─────────────────────────── */
    .mep-room-group-head {
      display: flex;
      align-items: center;
      gap: 5px;
      width: 100%;
      padding: 5px 6px 3px;
      background: none;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 0.76rem;
      font-weight: 600;
      color: var(--text-secondary);
      text-align: left;
      margin-top: 8px;
    }
    .mep-room-group-head:first-child { margin-top: 0; }
    .mep-room-group-head:hover { background: var(--overlay-hover); color: var(--text); }
    .mep-room-group-head.ep-warn { color: var(--warning); }
    .mep-room-group-head .mep-re-label { font-weight: 600; }
    /* ── Family row (individual Revit component) ──────────────────── */
    .mep-family-row {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 3px 6px 3px 18px;
      font-size: 0.75rem;
      border-radius: 3px;
    }
    .mep-family-row.ep-low .mep-family-metric { color: var(--error); font-weight: 600; }
    .mep-family-row.ep-high .mep-family-metric { color: var(--warning); font-weight: 600; }
    .mep-family-row.ep-dim { opacity: 0.5; }
    .mep-family-disc {
      flex-shrink: 0;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--muted);
    }
    .mep-family-disc--hvac { background: var(--teal); }
    .mep-family-disc--electrical { background: var(--amber); }
    .mep-family-disc--plumbing { background: var(--info); }
    .mep-family-disc--medGas { background: var(--purple); }
    .mep-family-label {
      flex: 1 1 0;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--text);
    }
    .mep-family-metric {
      font-size: 0.71rem;
      color: var(--accent);
      white-space: nowrap;
      flex-shrink: 0;
    }
    /* keep legacy SVG style stubs (used by old renderNetworkSchematic dead code) */
    .mep-edge-line { stroke: var(--border); stroke-width: 1.5; fill: none; }
    .mep-edge-label { fill: var(--muted); font-size: 9.5px; pointer-events: none; }
    .mep-code-dot-ok { fill: var(--success); }
    .mep-code-dot-warning { fill: var(--warning); }
    .mep-code-dot-critical { fill: var(--error); }

    /* ── Inspector Panel ───────────────────────────────────────────── */
    .mep-inspector-panel {
      width: 0;
      overflow: hidden;
      transition: width 0.18s ease;
      border-left: 1px solid transparent;
      background: var(--panel-bg);
      display: flex;
      flex-direction: column;
      min-height: 0;
    }
    .mep-inspector-panel.open {
      width: 340px;
      border-left-color: var(--border);
    }
    .mep-inspector-inner {
      width: 340px;
      padding: 14px;
      overflow-y: auto;
      flex: 1 1 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .mep-inspector-head {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      justify-content: space-between;
    }
    .mep-inspector-title { font-weight: 700; font-size: 0.9rem; color: var(--text); }
    .mep-inspector-sub { font-size: 0.75rem; color: var(--muted); margin-top: 2px; }
    .mep-inspector-close {
      background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1rem; padding: 0 2px; flex-shrink: 0;
    }
    .mep-inspector-close:hover { color: var(--text); }
    .mep-inspector-metrics {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    .mep-inspector-metric {
      background: var(--panel-elevated);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 8px 10px;
    }
    .mep-inspector-metric-label { font-size: 0.7rem; color: var(--muted); margin-bottom: 3px; }
    .mep-inspector-metric-val { font-size: 0.95rem; font-weight: 700; color: var(--text); }
    .mep-inspector-metric-sub { font-size: 0.7rem; color: var(--muted); margin-top: 2px; }
    .mep-inspector-metric.delta .mep-inspector-metric-val { color: var(--warning); }
    .mep-inspector-section-head {
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--muted);
      margin-bottom: 4px;
      margin-top: 4px;
    }
    .mep-room-chips { display: flex; flex-wrap: wrap; gap: 5px; }
    .mep-room-chip {
      padding: 3px 9px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: var(--input-bg);
      color: var(--text-secondary);
      font-size: 0.74rem;
      cursor: pointer;
      transition: border-color 0.1s;
    }
    .mep-room-chip:hover { border-color: var(--accent); color: var(--accent); }
    .mep-inspector-actions { display: flex; gap: 6px; flex-wrap: wrap; }
    .mep-inspector-action {
      padding: 5px 12px;
      border-radius: 5px;
      border: 1px solid var(--border);
      background: var(--input-bg);
      color: var(--text);
      font-size: 0.77rem;
      cursor: pointer;
    }
    .mep-inspector-action:hover { border-color: var(--accent); color: var(--accent); }
    .mep-inspector-action.primary { background: var(--accent); border-color: var(--accent); color: #000; font-weight: 600; }
    .mep-inspector-action:disabled { opacity: 0.4; cursor: not-allowed; }

    /* Network toolbar (iso toggle, SVG export) */
    .mep-network-toolbar {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border-bottom: 1px solid var(--border);
      background: var(--panel-bg);
    }
    .mep-network-toolbar-title { font-size: 0.8rem; color: var(--text); font-weight: 600; flex: 1; }

    /* All-discipline mini network grid */
    .mep-network-all-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      padding: 14px;
      overflow-y: auto;
      flex: 1 1 0;
    }
    .mep-network-mini-card {
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden;
      background: var(--panel-bg);
      cursor: pointer;
      transition: border-color 0.12s;
    }
    .mep-network-mini-card:hover { border-color: var(--accent); }
    .mep-network-mini-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 12px;
      border-bottom: 1px solid var(--border);
      font-weight: 600;
      font-size: 0.8rem;
    }
    .mep-network-mini-svg { display: block; width: 100%; height: 160px; }

    /* ── Live Schedule (Tab 2) ─────────────────────────────────────── */
    .mep-schedule-wrap {
      display: flex;
      flex-direction: column;
      flex: 1 1 0;
      min-height: 0;
      overflow: hidden;
    }
    .mep-schedule-toolbar {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 0 6px;
      flex-shrink: 0;
      flex-wrap: wrap;
    }
    .mep-schedule-title { font-weight: 700; font-size: 0.85rem; flex: 1; }
    .mep-schedule-search {
      padding: 4px 10px;
      border-radius: 5px;
      border: 1px solid var(--border);
      background: var(--input-bg);
      color: var(--text);
      font-size: 0.78rem;
      width: 160px;
    }
    .mep-schedule-outer {
      flex: 1 1 0;
      overflow: auto;
      border: 1px solid var(--border);
      border-radius: 6px;
    }
    .mep-live-schedule {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.78rem;
    }
    .mep-live-schedule thead th {
      position: sticky;
      top: 0;
      z-index: 2;
      background: var(--panel-elevated);
      border-bottom: 2px solid var(--border);
      padding: 6px 8px;
      text-align: left;
      white-space: nowrap;
      font-size: 0.72rem;
      color: var(--text-secondary);
      font-weight: 600;
      cursor: pointer;
      user-select: none;
    }
    .mep-live-schedule thead th:hover { color: var(--accent); }
    .mep-live-schedule thead th.group-hvac { border-top: 3px solid var(--teal); }
    .mep-live-schedule thead th.group-elec { border-top: 3px solid var(--amber); }
    .mep-live-schedule thead th.group-plumb { border-top: 3px solid var(--info); }
    .mep-live-schedule thead th.group-gas { border-top: 3px solid var(--purple); }
    .mep-live-schedule tbody tr:hover { background: var(--overlay-hover); }
    .mep-live-schedule tbody tr.selected { background: var(--accent-faint); }
    .mep-ls-cell {
      padding: 5px 8px;
      border-bottom: 1px solid var(--border-subtle);
      color: var(--text);
      white-space: nowrap;
      vertical-align: middle;
    }
    .mep-ls-cell.readonly { color: var(--muted); }
    .mep-ls-cell.editable { cursor: pointer; }
    .mep-ls-cell.editable:hover { background: var(--overlay-active); }
    .mep-ls-cell.pass { background: rgba(81,207,102,0.08); }
    .mep-ls-cell.fail { background: rgba(231,76,60,0.10); }
    .mep-ls-cell.warn { background: rgba(230,126,34,0.10); }
    .mep-ls-cell.delta { position: relative; }
    .mep-ls-cell.delta::after {
      content: '△';
      font-size: 8px;
      color: var(--warning);
      margin-left: 4px;
      vertical-align: super;
    }
    .mep-ls-cell.check-pass::before { content: '✓ '; color: var(--success); }
    .mep-ls-cell.check-fail::before { content: '✗ '; color: var(--error); }
    .mep-ls-cell.check-warn::before { content: '⚠ '; color: var(--warning); }
    .mep-ls-cell input, .mep-ls-cell select {
      background: var(--input-bg);
      border: 1px solid var(--accent);
      border-radius: 3px;
      color: var(--text);
      font-size: 0.77rem;
      padding: 2px 5px;
      width: 100%;
      max-width: 120px;
    }
    .mep-ls-cell .mep-mini-select {
      min-width: 120px;
      max-width: 220px;
    }
    .mep-ls-footer {
      position: sticky;
      bottom: 0;
      background: var(--panel-elevated);
      border-top: 2px solid var(--border);
      font-weight: 700;
    }
    .mep-ls-footer td { padding: 5px 8px; font-size: 0.77rem; color: var(--text-secondary); }
    .mep-status-pill {
      display: inline-block;
      padding: 2px 7px;
      border-radius: 10px;
      font-size: 0.7rem;
      font-weight: 600;
      white-space: nowrap;
    }
    .mep-status-pill.ok { background: var(--success-faint); color: var(--success); }
    .mep-status-pill.warn { background: var(--warning-faint); color: var(--warning); }
    .mep-status-pill.fail { background: var(--error-faint); color: var(--error); }
    .mep-status-pill.info { background: var(--info-faint); color: var(--info); }
    .mep-status-pill.muted { background: var(--overlay-subtle); color: var(--muted); }

    /* ── Flag badge (schedule status column) ──────────────────────── */
    .mep-flag-badge {
      display: inline-flex;
      align-items: center;
      padding: 2px 8px;
      border-radius: 10px;
      font-size: 0.7rem;
      font-weight: 600;
      white-space: nowrap;
      border: none;
      cursor: default;
      font-family: inherit;
    }
    .mep-flag-badge.pass { background: var(--success-faint, rgba(34,197,94,0.12)); color: var(--success, #16a34a); }
    .mep-flag-badge.warn { background: var(--warning-faint, rgba(234,179,8,0.15)); color: var(--warning, #b45309); cursor: pointer; }
    .mep-flag-badge.fail { background: var(--error-faint, rgba(239,68,68,0.12)); color: var(--error, #dc2626); cursor: pointer; }
    button.mep-flag-badge:hover { opacity: 0.75; }

    /* ── Inline system name input (in schedule table cells) ────────── */
    .mep-ls-sys-input {
      width: 100%;
      min-width: 90px;
      background: transparent;
      border: none;
      border-bottom: 1px solid transparent;
      color: inherit;
      font-size: inherit;
      font-family: inherit;
      padding: 1px 2px;
      outline: none;
    }
    .mep-ls-sys-input:hover { border-bottom-color: var(--border, #ccc); }
    .mep-ls-sys-input:focus { border-bottom-color: var(--accent, #3b82f6); background: rgba(59,130,246,0.04); }

    /* ── Check detail panel (expanded row: active code issues only) ─ */
    .mep-check-detail-panel {
      padding: 10px 16px 12px;
      background: var(--surface-secondary, #f8f9fa);
    }
    .mep-check-detail-panel .mep-expanded-check-section {
      padding: 8px;
      border: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
      border-radius: 6px;
      background: var(--panel-bg, #fff);
    }
    .mep-check-detail-panel .mep-expand-empty { color: var(--muted, #888); }

    /* ── Room Schedule (Tab 3) ─────────────────────────────────────── */
    .mep-rooms-wrap {
      display: flex;
      flex-direction: column;
      flex: 1 1 0;
      min-height: 0;
      overflow: hidden;
    }
    .mep-rooms-toolbar {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 0 6px;
      flex-shrink: 0;
      flex-wrap: wrap;
    }
    .mep-rooms-outer {
      flex: 1 1 0;
      overflow: auto;
      border: 1px solid var(--border);
      border-radius: 6px;
    }
    .mep-rooms-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.78rem;
    }
    .mep-rooms-table thead th {
      position: sticky;
      top: 0;
      z-index: 2;
      background: var(--panel-elevated);
      border-bottom: 2px solid var(--border);
      padding: 6px 8px;
      text-align: left;
      white-space: nowrap;
      font-size: 0.72rem;
      color: var(--text-secondary);
      font-weight: 600;
      cursor: pointer;
      user-select: none;
    }
    .mep-rooms-table thead th:hover { color: var(--accent); }
    .mep-rooms-table thead th.disc-group { border-top: 3px solid var(--accent); }
    .mep-rooms-table thead th.disc-group-hvac { border-top-color: var(--teal); }
    .mep-rooms-table thead th.disc-group-elec { border-top-color: var(--amber); }
    .mep-rooms-table thead th.disc-group-plumb { border-top-color: var(--info); }
    .mep-rooms-table thead th.disc-group-gas { border-top-color: var(--purple); }
    .mep-rooms-row td {
      padding: 5px 8px;
      border-bottom: 1px solid var(--border-subtle);
      white-space: nowrap;
      vertical-align: middle;
    }
    .mep-rooms-row:hover td { background: var(--overlay-hover); }
    .mep-rooms-row.expanded td { background: var(--accent-faint); }
    .mep-rooms-row { cursor: pointer; }
    .mep-readiness-bar {
      display: inline-block;
      height: 6px;
      border-radius: 3px;
      background: var(--border);
      width: 50px;
      vertical-align: middle;
      position: relative;
      overflow: hidden;
    }
    .mep-readiness-bar-fill {
      position: absolute;
      left: 0; top: 0; bottom: 0;
      border-radius: 3px;
      background: var(--success);
    }
    .mep-readiness-bar-fill.warn { background: var(--warning); }
    .mep-readiness-bar-fill.fail { background: var(--error); }

    /* Expanded row detail */
    .mep-rooms-expand-row td {
      padding: 0;
      border-bottom: 2px solid var(--border);
    }
    .mep-rooms-expand {
      padding: 14px 16px;
      background: var(--panel-bg);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
    .mep-expand-section { display: flex; flex-direction: column; gap: 8px; }
    .mep-expand-section-title {
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--muted);
      border-bottom: 1px solid var(--border);
      padding-bottom: 4px;
    }
    .mep-expand-field {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.77rem;
    }
    .mep-expand-field-label { color: var(--muted); min-width: 110px; flex-shrink: 0; }
    .mep-expand-field-val { color: var(--text); }
    .mep-expand-field input, .mep-expand-field select {
      background: var(--input-bg);
      border: 1px solid var(--border);
      border-radius: 3px;
      color: var(--text);
      font-size: 0.77rem;
      padding: 3px 6px;
      flex: 1;
    }
    .mep-expand-field input:focus, .mep-expand-field select:focus { border-color: var(--accent); outline: none; }
    .mep-expand-checks { display: flex; flex-direction: column; gap: 6px; }
    .mep-expand-check {
      border-radius: 5px;
      border: 1px solid var(--border);
      padding: 6px 10px;
      font-size: 0.76rem;
    }
    .mep-expand-check.critical { border-color: var(--error); background: var(--error-faint); }
    .mep-expand-check.warning { border-color: var(--warning); background: var(--warning-faint); }
    .mep-expand-check.info { border-color: var(--info); background: var(--info-faint); }
    .mep-expand-check-title { font-weight: 600; color: var(--text); }
    .mep-expand-check-detail { color: var(--muted); margin-top: 2px; }
    .mep-expand-check-std { font-size: 0.7rem; color: var(--muted); margin-top: 3px; }
    .mep-expand-actions { display: flex; gap: 6px; flex-wrap: wrap; }
    .mep-expand-action {
      padding: 5px 12px;
      border-radius: 4px;
      border: 1px solid var(--border);
      background: var(--input-bg);
      color: var(--text);
      font-size: 0.77rem;
      cursor: pointer;
    }
    .mep-expand-action:hover { border-color: var(--accent); color: var(--accent); }
    .mep-expand-action.primary { background: var(--accent); border-color: var(--accent); color: #000; font-weight: 600; }

    /* ── Model Link (Tab 4) ───────────────────────────────────────── */
    .mep-modellink-wrap {
      display: flex;
      flex-direction: column;
      gap: 14px;
      padding: 14px 0;
      overflow-y: auto;
      flex: 1 1 0;
    }
    .mep-ml-section {
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden;
      flex: 0 0 auto;
      background: var(--panel);
    }
    .mep-ml-section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-height: 38px;
      padding: 10px 14px;
      background: var(--panel-elevated);
      border-bottom: 1px solid var(--border);
      font-weight: 600;
      font-size: 0.83rem;
      line-height: 1.25;
      white-space: normal;
      overflow: visible;
    }
    .mep-ml-section-body {
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-height: 0;
      overflow: visible;
    }
    .mep-ml-row {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .mep-ml-label { font-size: 0.78rem; color: var(--muted); min-width: 100px; }
    .mep-ml-input {
      flex: 1;
      padding: 5px 9px;
      border-radius: 4px;
      border: 1px solid var(--border);
      background: var(--input-bg);
      color: var(--text);
      font-size: 0.8rem;
      min-width: 200px;
    }
    .mep-ml-status {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 6px 12px;
      border-radius: 6px;
      border: 1px solid var(--border);
      font-size: 0.8rem;
      color: var(--muted);
    }
    .mep-ml-status.ok { border-color: var(--success); color: var(--success); background: var(--success-faint); }
    .mep-ml-status.err { border-color: var(--error); color: var(--error); background: var(--error-faint); }
    .mep-ml-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
    .mep-ml-scan-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
      gap: 8px;
      width: 100%;
    }
    .mep-ml-scan-btn {
      min-height: 58px;
      padding: 9px 12px;
      border-radius: 5px;
      border: 1px solid var(--border);
      background: var(--input-bg);
      color: var(--text);
      font-size: 0.8rem;
      cursor: pointer;
      text-align: left;
      transition: border-color 0.1s;
      white-space: normal;
      line-height: 1.25;
    }
    .mep-ml-scan-btn strong { display: block; font-size: 0.82rem; color: var(--text); }
    .mep-ml-scan-btn.primary { border-color: var(--accent); background: var(--accent-faint); }
    .mep-ml-scan-btn:hover { border-color: var(--accent); }
    .mep-ml-scan-btn:disabled { opacity: 0.45; cursor: not-allowed; }
    .mep-ml-scan-btn small { display: block; color: var(--muted); font-size: 0.7rem; margin-top: 3px; white-space: normal; }
    .mep-ml-summary {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }
    .mep-ml-summary-item {
      background: var(--panel-elevated);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 6px 12px;
      font-size: 0.78rem;
    }
    .mep-ml-summary-val { font-size: 1.1rem; font-weight: 700; color: var(--text); }
    .mep-ml-summary-label { color: var(--muted); font-size: 0.7rem; }
    /* Parameter mapping table */
    .mep-ml-mapping-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.77rem;
    }
    .mep-ml-mapping-table thead th {
      position: sticky;
      top: 0;
      background: var(--panel-elevated);
      border-bottom: 2px solid var(--border);
      padding: 6px 8px;
      text-align: left;
      font-size: 0.7rem;
      color: var(--text-secondary);
      font-weight: 600;
      white-space: nowrap;
    }
    .mep-ml-mapping-table tbody tr:hover { background: var(--overlay-hover); }
    .mep-ml-mapping-table td {
      padding: 5px 8px;
      border-bottom: 1px solid var(--border-subtle);
      vertical-align: middle;
    }
    .mep-ml-tier-group {
      background: var(--panel-elevated);
      font-weight: 600;
      font-size: 0.72rem;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding: 5px 8px;
    }
    .mep-ml-param-name { font-weight: 600; color: var(--text); }
    .mep-ml-param-desc { color: var(--muted); font-size: 0.7rem; }
    .mep-ml-param-disc { font-size: 0.7rem; color: var(--muted); }
    .mep-ml-param-unit { font-size: 0.7rem; color: var(--muted); }
    .mep-ml-param-select {
      width: 100%;
      max-width: 220px;
      padding: 3px 6px;
      border-radius: 4px;
      border: 1px solid var(--border);
      background: var(--input-bg);
      color: var(--text);
      font-size: 0.75rem;
    }
    .mep-ml-param-select.mapped { border-color: var(--success); }
    .mep-ml-param-readonly {
      padding: 3px 6px;
      border-radius: 4px;
      background: var(--overlay-subtle);
      color: var(--muted);
      font-size: 0.75rem;
      display: inline-block;
    }
    .mep-ml-last-push { font-size: 0.7rem; color: var(--muted); font-style: italic; }
    .mep-ml-param-search {
      padding: 5px 10px;
      border-radius: 5px;
      border: 1px solid var(--border);
      background: var(--input-bg);
      color: var(--text);
      font-size: 0.78rem;
      width: 200px;
    }
    .mep-ml-discovered-list {
      background: var(--panel-bg);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 10px;
      font-size: 0.75rem;
      max-height: 200px;
      overflow-y: auto;
    }
    .mep-ml-discovered-item {
      padding: 4px 6px;
      border-radius: 3px;
      cursor: pointer;
      color: var(--text-secondary);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .mep-ml-discovered-item:hover { background: var(--overlay-hover); color: var(--text); }
    .mep-ml-discovered-guid { font-size: 0.67rem; color: var(--muted); font-family: monospace; }

    /* ── Shared MEP UI tweaks for new layout ─────────────────────── */
    .mep-btn-sm {
      padding: 4px 10px;
      border-radius: 4px;
      border: 1px solid var(--border);
      background: var(--input-bg);
      color: var(--text);
      font-size: 0.76rem;
      cursor: pointer;
    }
    .mep-btn-sm:hover { border-color: var(--accent); color: var(--accent); }
    .mep-btn-sm.primary { background: var(--accent); border-color: var(--accent); color: #000; font-weight: 600; }
    .mep-btn-sm:disabled { opacity: 0.4; cursor: not-allowed; }
    .mep-export-dropdown { position: relative; display: inline-block; }
    .mep-export-menu {
      position: absolute;
      top: 100%;
      right: 0;
      z-index: 100;
      background: var(--panel-elevated);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 4px 0;
      min-width: 180px;
      box-shadow: 0 4px 16px var(--card-shadow);
      display: none;
    }
    .mep-export-dropdown.open .mep-export-menu, .mep-export-menu.open { display: block; }
    .mep-export-item {
      display: block;
      width: 100%;
      padding: 7px 14px;
      background: none;
      border: none;
      color: var(--text);
      font-size: 0.8rem;
      text-align: left;
      cursor: pointer;
    }
    .mep-export-item:hover { background: var(--overlay-hover); }
    .mep-empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40px 20px;
      color: var(--muted);
      font-size: 0.82rem;
      gap: 8px;
      text-align: center;
    }
    .mep-empty-state strong { font-size: 0.9rem; color: var(--text-secondary); }
    /* Revit delta badge on values */
    .mep-delta-badge {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      font-size: 0.69rem;
      color: var(--warning);
      background: var(--warning-faint);
      border-radius: 3px;
      padding: 1px 4px;
      margin-left: 4px;
    }
    /* Code severity label */
    .mep-sev { display: inline-block; width: 6px; height: 6px; border-radius: 50%; vertical-align: middle; margin-right: 3px; }
    .mep-sev.critical { background: var(--error); }
    .mep-sev.warning { background: var(--warning); }
    .mep-sev.info { background: var(--info); }
    .mep-sev.ok { background: var(--success); }

    /* ── Top Chrome ────────────────────────────────────────────────────── */
    .mep-top-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 8px 14px 0;
      flex-wrap: wrap;
    }
    .mep-project-name {
      font-weight: 700;
      font-size: 0.82rem;
      color: var(--text);
      flex-shrink: 0;
    }
    .mep-disc-filters {
      display: flex;
      gap: 4px;
      flex: 1;
    }
    .mep-top-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }

    /* ── Source node (tier-0, div) ─────────────────────────────────────── */
    .mep-tier-label {
      font-size: 0.66rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--muted);
      margin-bottom: 4px;
    }
    .mep-node {
      width: 100%;
      padding: 8px 11px;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: var(--panel-elevated);
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .mep-node-source { border-color: var(--teal); }
    .mep-node .mep-node-label {
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .mep-node .mep-node-metric {
      font-size: 0.74rem;
      color: var(--accent);
    }
    .mep-node .mep-node-rooms {
      font-size: 0.68rem;
      color: var(--muted);
    }

    /* ── Mini network card internals ──────────────────────────────────── */
    .mep-mini-head {
      padding: 8px 12px;
      font-weight: 700;
      font-size: 0.82rem;
      border-bottom: 1px solid var(--border);
    }
    .mep-mini-metric {
      padding: 8px 12px 2px;
      font-size: 0.9rem;
      font-weight: 700;
      color: var(--accent);
    }
    .mep-mini-systems {
      padding: 2px 12px 8px;
      font-size: 0.72rem;
      color: var(--muted);
    }
    .mep-mini-empty {
      padding: 12px;
      font-size: 0.75rem;
      color: var(--muted);
    }

    /* ── Inspector section ────────────────────────────────────────────── */
    .mep-inspector-section {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .mep-inspector-section > strong {
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--muted);
    }

    /* ── Schedule table (wrapper + table) ────────────────────────────── */
    .mep-live-schedule {
      overflow: auto;
      border: 1px solid var(--border);
      border-radius: 6px;
      flex: 1 1 0;
      min-height: 0;
      max-height: clamp(280px, calc(100dvh - 260px), 78dvh);
      overscroll-behavior: contain;
    }
    .mep-ls-table {
      width: max-content;
      min-width: 100%;
      table-layout: auto;
      border-collapse: collapse;
      font-size: clamp(0.68rem, 0.62rem + 0.18vw, 0.76rem);
    }
    .mep-ls-table thead th {
      position: sticky;
      top: 0;
      z-index: 2;
      background: var(--panel-elevated);
      border-bottom: 1px solid var(--border);
      padding: 5px 13px 5px 6px;
      text-align: center;
      white-space: normal;
      overflow-wrap: anywhere;
      font-size: 0.68rem;
      font-weight: 600;
      color: var(--text-secondary);
      min-width: 56px;
      max-width: 360px;
      overflow: hidden;
      vertical-align: middle;
    }
    .mep-ls-table thead th[title] {
      cursor: help;
      text-decoration: underline dotted color-mix(in srgb, var(--text-secondary) 42%, transparent);
      text-underline-offset: 3px;
    }
    .mep-ls-table thead th.mep-th-edit {
      color: var(--text);
      background: color-mix(in srgb, var(--panel-elevated) 88%, var(--accent) 12%);
    }
    .mep-ls-table thead th.mep-th-calc {
      color: var(--muted);
    }
    .mep-ls-table thead th.mep-th-check {
      text-align: center;
    }
    .mep-th-label {
      display: block;
      line-height: 1.15;
    }
    .mep-col-resize-handle {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 9px;
      cursor: col-resize;
      z-index: 3;
    }
    .mep-col-resize-handle::after {
      content: "";
      position: absolute;
      top: 7px;
      bottom: 7px;
      right: 3px;
      width: 1px;
      background: color-mix(in srgb, var(--border) 72%, var(--text) 28%);
      opacity: 0.65;
    }
    .mep-col-resize-handle:hover::after {
      background: var(--accent);
      opacity: 1;
    }
    body.mep-column-resizing,
    body.mep-column-resizing * {
      cursor: col-resize !important;
      user-select: none !important;
    }
    .mep-ls-table td {
      padding: 4px 6px;
      border-bottom: 1px solid var(--border-subtle);
      white-space: normal;
      overflow-wrap: anywhere;
      text-align: left;
      vertical-align: middle;
      min-width: 0;
    }
    .mep-ls-table tbody tr:hover { background: var(--overlay-hover); }
    .mep-ls-row.active td { background: var(--accent-faint); }
    .mep-ls-row.expanded td { border-bottom-color: var(--accent); }
    .mep-ls-cell.editable { cursor: pointer; }
    .mep-ls-cell.editable:hover { background: var(--accent-faint); }
    .mep-ls-cell.readonly { color: var(--muted); font-style: italic; }
    .mep-ls-cell.check-pass, .check-pass { color: var(--success); font-weight: 700; }
    .mep-ls-cell.check-fail, .check-fail { color: var(--error); font-weight: 700; }
    .mep-col-170 { background: color-mix(in srgb, var(--teal) 6%, transparent); }
    .mep-col-check { text-align: center; width: 28px; }
    .mep-col-status { text-align: center; }
    .mep-loop-input {
      width: clamp(44px, 4.6vw, 64px);
      padding: 2px 4px;
      border: 1px solid var(--border);
      border-radius: 4px;
      background: var(--panel-bg);
      color: var(--text);
      font-size: 0.74rem;
      text-align: left;
    }
    .mep-loop-input[type="text"] {
      width: clamp(88px, 8vw, 128px);
      text-align: left;
    }
    .mep-loop-input.mep-loop-input-narrow { width: 44px; }
    .mep-loop-input:focus { border-color: var(--accent); outline: none; }
    .mep-ls-sys-input {
      width: clamp(96px, 9vw, 150px);
      text-align: left;
    }

    /* ── Room table readiness ─────────────────────────────────────────── */
    .mep-readiness-score {
      display: inline-block;
      padding: 2px 7px;
      border-radius: 9px;
      font-size: 0.72rem;
      font-weight: 700;
    }
    .mep-readiness-score.good { background: rgba(56,189,125,0.15); color: var(--success); }
    .mep-readiness-score.partial { background: rgba(217,119,6,0.12); color: var(--warning); }
    .mep-readiness-score.low { background: rgba(239,68,68,0.12); color: var(--error); }
    .mep-readiness-wrap { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; }
    .mep-readiness-wrap .mep-readiness-bar {
      display: inline-block;
      height: 6px;
      min-width: 4px;
      border-radius: 3px;
      background: var(--accent);
    }

    /* ── Expanded room detail ─────────────────────────────────────────── */
    .mep-expand-head {
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--muted);
      padding-bottom: 4px;
      border-bottom: 1px solid var(--border-subtle);
    }
    .mep-expand-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
      gap: 6px;
    }
    .mep-expand-grid > div {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .mep-expand-grid label { font-size: 0.68rem; color: var(--muted); }
    .mep-expand-grid span { font-size: 0.78rem; color: var(--text); font-weight: 600; }

    /* ── Model Link section internals ────────────────────────────────── */
    .mep-ml-section:empty,
    .mep-ml-section-body:empty,
    .mep-ml-scan-footer:empty {
      display: none;
    }
    .mep-ml-connection { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; }
    .mep-ml-model-select { display: flex; align-items: center; gap: 8px; font-size: 0.74rem; color: var(--muted); }
    .mep-ml-model-select select { min-width: 240px; max-width: 100%; height: 30px; border: 1px solid var(--border); border-radius: 4px; background: var(--panel); color: var(--text); }
    .mep-ml-note { font-size: 0.73rem; color: var(--muted); line-height: 1.35; }
    .mep-ml-scan-btns { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 14px; }
    .mep-ml-scan-summary {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      padding: 4px 0;
    }
    .mep-ml-scan-summary span {
      font-size: 0.74rem;
      color: var(--muted);
      background: var(--panel-elevated);
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 2px 8px;
    }
    .mep-ml-scan-footer { display: flex; flex-direction: column; gap: 8px; padding: 8px 14px 12px; }
    .mep-ml-scan-time { font-size: 0.73rem; color: var(--muted); }
    .mep-ml-error { font-size: 0.74rem; color: var(--error); background: var(--error-faint); padding: 6px 10px; border-radius: 4px; }
    .mep-ml-busy { font-size: 0.74rem; color: var(--warning); }
    .mep-ml-mapped-count { font-size: 0.72rem; color: var(--muted); font-weight: 400; margin-left: 6px; }
    .mep-ml-native { color: var(--muted); font-style: italic; font-size: 0.74rem; }
    .mep-ml-push-btn { margin-top: 8px; }

    /* ── Main content area ───────────────────────────────────────────── */
    .mep-content {
      flex: 1 1 0;
      min-height: 0;
      overflow: auto;
      display: flex;
      flex-direction: column;
      padding: 12px 14px;
    }
/* Adjacency brief */
.adj-root {
  /* The whole feature is built on --surface (panels, drawers, the Add panel,
     the graph card). It was never defined in the loaded theme, so every
     color-mix using it collapsed and the panels read dark in both themes.
     Bind it to the app's theme-aware elevated-panel token: dark #1a2130,
     light #ffffff — so the surface follows the theme like everything else. */
  --surface: var(--panel-elevated);
  /* Primary planning viewports share one neutral ground. Elevation and
     classification belong to controls and content, never the canvas. */
  --adj-workspace-base: #000;
  --adj-ink: var(--text);
  --adj-muted: var(--muted);
  --adj-line: color-mix(in srgb, var(--border) 82%, transparent);
  --adj-gold: #d5a253;
  --adj-blue: #5d8fa8;
  /* Blue classifies a strong relationship. Teal is reserved for attention:
     hover, keyboard focus, and the live cross-panel highlight must never
     impersonate a relationship's secondary tone. */
  --adj-focus: #3f9898;
  color: var(--adj-ink);
  min-height: 100%;
  padding: 26px;
  background:
    radial-gradient(circle at 88% 0%, rgba(213, 162, 83, 0.09), transparent 31%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, #fff 4%), var(--surface));
}

body.light-theme .adj-root { --adj-workspace-base: #fff; }

.adj-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 8px 4px 24px;
}

.adj-eyebrow,
.adj-step {
  color: var(--adj-gold);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.adj-hero h2 {
  margin: 5px 0 7px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 4vw, 3.35rem);
  font-weight: 500;
  letter-spacing: -0.035em;
}

.adj-hero p {
  max-width: 680px;
  margin: 0;
  color: var(--adj-muted);
  font-size: 1rem;
  line-height: 1.55;
}

.adj-hero-actions {
  display: flex;
  gap: 9px;
  padding-top: 10px;
  white-space: nowrap;
}

.adj-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--adj-line);
  border-radius: 14px;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface) 91%, transparent);
}

.adj-metric {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 16px 18px;
  border-right: 1px solid var(--adj-line);
}

.adj-metric:last-child {
  border-right: 0;
}

.adj-metric strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.75rem;
  font-weight: 500;
}

.adj-metric span {
  color: var(--adj-muted);
  font-size: 0.72rem;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.adj-survey,
.adj-constraints-section,
.adj-rules-section,
.adj-options-section {
  padding: 32px 4px 4px;
}

.adj-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 17px;
}

.adj-section-heading > div {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.adj-section-heading h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.45rem;
  font-weight: 500;
}

.adj-section-heading p {
  max-width: 520px;
  margin: 0;
  color: var(--adj-muted);
  font-size: 0.82rem;
  line-height: 1.45;
  text-align: right;
}

.adj-goals {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.adj-goal {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px 10px 10px;
  border: 1px solid var(--adj-line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--adj-muted);
  cursor: pointer;
  transition: 150ms ease;
}

.adj-goal:hover {
  border-color: color-mix(in srgb, var(--adj-gold) 55%, var(--border));
  color: var(--adj-ink);
}

.adj-goal.is-active {
  border-color: color-mix(in srgb, var(--adj-gold) 65%, var(--border));
  background: color-mix(in srgb, var(--adj-gold) 12%, var(--surface));
  color: var(--adj-ink);
}

.adj-goal-check {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--adj-gold) 16%, var(--surface));
  color: var(--adj-gold);
  font-size: 0.8rem;
  font-weight: 800;
}

.adj-composer {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 24px minmax(160px, 1fr) minmax(135px, 0.68fr) minmax(110px, 0.48fr) auto;
  gap: 10px;
  align-items: end;
  padding: 15px;
  border: 1px solid var(--adj-line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--surface) 94%, var(--adj-gold) 6%);
}

.adj-composer label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.adj-composer label > span {
  color: var(--adj-muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.adj-composer select,
.adj-rule-controls select {
  min-width: 0;
  height: 38px;
  border: 1px solid var(--adj-line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--adj-ink);
  padding: 0 30px 0 10px;
}

.adj-composer-arrow {
  padding-bottom: 9px;
  color: var(--adj-gold);
  text-align: center;
}

/* Guided planning moves */
.adj-patterns {
  margin-bottom: 12px;
  padding: 15px;
  border: 1px solid var(--adj-line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--surface) 96%, var(--adj-blue) 4%);
}

.adj-patterns-intro {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 11px;
}

.adj-patterns-intro strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-weight: 500;
}

.adj-patterns-intro span {
  color: var(--adj-muted);
  font-size: 0.75rem;
}

.adj-pattern-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(145px, 1fr));
  gap: 8px;
}

.adj-pattern-card {
  display: flex;
  min-width: 0;
  min-height: 154px;
  flex-direction: column;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid var(--adj-line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--adj-ink);
  text-align: left;
  cursor: pointer;
  transition: 150ms ease;
}

.adj-pattern-card:hover {
  border-color: color-mix(in srgb, var(--adj-blue) 60%, var(--border));
  box-shadow: 0 6px 18px color-mix(in srgb, #000 8%, transparent);
  transform: translateY(-1px);
}

.adj-pattern-shape {
  margin-bottom: 9px;
  padding: 3px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--adj-blue) 13%, transparent);
  color: color-mix(in srgb, var(--adj-ink) 78%, var(--adj-blue));
  font-size: 0.61rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.adj-pattern-card strong {
  font-size: 0.82rem;
}

.adj-pattern-card p {
  flex: 1 1 auto;
  margin: 5px 0 10px;
  color: var(--adj-muted);
  font-size: 0.7rem;
  line-height: 1.4;
}

.adj-pattern-card em {
  color: var(--adj-muted);
  font-size: 0.66rem;
  font-style: normal;
  line-height: 1.35;
}

/* Natural-language rule composer */
.adj-nl {
  padding: 16px;
  border: 1px solid var(--adj-line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--surface) 90%, var(--adj-gold) 10%);
  margin-bottom: 12px;
}

.adj-nl-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.adj-nl-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 42px;
  border: 1px solid var(--adj-line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--adj-ink);
  padding: 0 14px;
  font-size: 0.95rem;
}

.adj-nl-input:focus {
  outline: none;
  border-color: var(--adj-gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--adj-gold) 22%, transparent);
}

.adj-nl-note {
  margin-top: 10px;
  padding: 8px 11px;
  border-radius: 8px;
  font-size: 0.85rem;
  line-height: 1.4;
}

.adj-nl-note.ok {
  background: color-mix(in srgb, #8f9c73 16%, transparent);
  color: color-mix(in srgb, var(--adj-ink) 88%, #4f5a3a);
}

.adj-nl-note.err {
  background: color-mix(in srgb, #c27655 15%, transparent);
  color: color-mix(in srgb, var(--adj-ink) 86%, #7a3a25);
}

.adj-nl-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 11px;
}

.adj-nl-chip {
  padding: 5px 10px;
  border: 1px solid var(--adj-line);
  border-radius: 999px;
  background: transparent;
  color: var(--adj-muted);
  font-size: 0.78rem;
  cursor: pointer;
}

.adj-nl-chip:hover {
  border-color: var(--adj-gold);
  color: var(--adj-ink);
  background: color-mix(in srgb, var(--adj-gold) 10%, transparent);
}

.adj-typed-rules {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.adj-rule-card.adj-typed {
  grid-template-columns: minmax(0, 1fr) auto;
}

.adj-typed-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.adj-typed-type {
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--adj-gold) 16%, transparent);
  color: color-mix(in srgb, var(--adj-ink) 80%, var(--adj-gold));
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.adj-typed-head strong {
  font-weight: 500;
  color: var(--adj-ink);
  line-height: 1.35;
}

.adj-manual-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 12px;
  color: var(--adj-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.adj-manual-label::before,
.adj-manual-label::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--adj-line);
}

/* Site & arrival anchors */
.adj-site-list {
  display: grid;
  gap: 8px;
}

.adj-site-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 11px;
  border: 1px solid var(--adj-line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface) 97%, transparent);
}

.adj-site-row > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.adj-site-row strong {
  font-size: 0.86rem;
  color: var(--adj-ink);
}

.adj-site-row span {
  font-size: 0.74rem;
  color: var(--adj-muted);
  line-height: 1.35;
}

.adj-site-row select {
  flex: 0 0 auto;
  height: 34px;
  border: 1px solid var(--adj-line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--adj-ink);
  padding: 0 26px 0 10px;
}

/* Area budget */
.adj-budget-card {
  grid-column: span 2;
}

.adj-budget-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
}

.adj-budget-fields label {
  display: flex;
  min-height: 58px;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid var(--adj-line);
  border-radius: 8px;
  background: var(--surface);
}

.adj-budget-fields span,
.adj-budget-ledger span,
.adj-budget-efficiency span {
  color: var(--adj-muted);
  font-size: 0.61rem;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.adj-budget-fields strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  font-weight: 500;
}

.adj-budget-fields input {
  width: 100%;
  height: 29px;
  border: 0;
  border-bottom: 1px solid var(--adj-line);
  background: transparent;
  color: var(--adj-ink);
  font-size: 0.95rem;
}

.adj-budget-ledger {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--adj-line);
}

.adj-budget-ledger > div {
  display: flex;
  min-height: 55px;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 9px 12px;
  border-right: 1px solid var(--adj-line);
}

.adj-budget-ledger > div:last-child {
  border-right: 0;
}

.adj-budget-ledger strong {
  font-size: 0.82rem;
}

.adj-budget-ledger .is-negative strong {
  color: #b86450;
}

.adj-budget-efficiency {
  background: color-mix(in srgb, var(--adj-gold) 6%, transparent);
}

.adj-budget-note {
  margin: 0;
  padding: 10px 12px;
  border-top: 1px solid var(--adj-line);
  color: var(--adj-muted);
  font-size: 0.7rem;
  line-height: 1.45;
}

.adj-circulation-framework {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 180px 120px minmax(140px, 0.55fr);
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid var(--adj-line);
  background: color-mix(in srgb, var(--adj-blue) 6%, var(--surface));
}

.adj-circulation-copy {
  display: flex;
  align-items: center;
  gap: 10px;
}

.adj-circulation-copy > div,
.adj-circulation-status,
.adj-circulation-framework label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.adj-circulation-copy strong,
.adj-circulation-status strong {
  font-size: 0.78rem;
}

.adj-circulation-copy p,
.adj-circulation-status span {
  margin: 0;
  color: var(--adj-muted);
  font-size: 0.67rem;
  line-height: 1.35;
}

.adj-circulation-icon {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--adj-blue) 45%, var(--border));
  border-radius: 50%;
  color: var(--adj-blue);
}

.adj-circulation-framework label > span {
  color: var(--adj-muted);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.adj-circulation-framework select {
  min-width: 0;
  height: 34px;
  border: 1px solid var(--adj-line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--adj-ink);
  padding: 0 26px 0 8px;
}

.adj-circulation-disclosure {
  grid-column: 1 / -1;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--adj-blue) 25%, var(--border));
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  color: var(--adj-muted);
  font-size: 0.67rem;
  line-height: 1.4;
}

/* Optional project rule starters */
.adj-knows {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--adj-line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--surface) 95%, var(--adj-blue) 5%);
}

.adj-knows-head h4 {
  margin: 0 0 4px;
  font-size: 0.95rem;
  color: var(--adj-ink);
}

.adj-knows-head p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--adj-muted);
  line-height: 1.45;
}

.adj-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.adj-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  border: 1px solid var(--adj-line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--adj-muted);
  font-size: 0.74rem;
}

.adj-tag-chip strong {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--adj-blue) 14%, transparent);
  color: var(--adj-ink);
  font-size: 0.7rem;
  text-align: center;
}

.adj-assume-list {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

.adj-assume {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border: 1px solid var(--adj-line);
  border-radius: 9px;
  background: var(--surface);
}

.adj-assume.is-off {
  opacity: 0.55;
}

.adj-assume-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.adj-assume-copy strong {
  font-size: 0.84rem;
  color: var(--adj-ink);
}

.adj-assume-copy em {
  font-style: normal;
  font-size: 0.74rem;
  color: var(--adj-muted);
  line-height: 1.35;
}

.adj-assume-force {
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--border) 50%, transparent);
  color: var(--adj-muted);
}

.adj-assume-force.tone-priority {
  background: color-mix(in srgb, var(--adj-gold) 18%, transparent);
  color: color-mix(in srgb, var(--adj-ink) 82%, var(--adj-gold));
}

.adj-assume-force.tone-required {
  background: color-mix(in srgb, #c27655 18%, transparent);
  color: color-mix(in srgb, var(--adj-ink) 82%, #c27655);
}

.adj-starter-add {
  flex: 0 0 auto;
  min-width: 76px;
}

.adj-starter-add:disabled {
  cursor: default;
  opacity: 0.5;
}

.adj-typed-count {
  align-self: flex-start;
  font-size: 0.72rem;
  color: var(--adj-muted);
}

.adj-rule-filters {
  display: flex;
  gap: 5px;
  margin: 15px 0 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--adj-line);
}

.adj-rule-filters button {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--adj-muted);
  cursor: pointer;
}

.adj-rule-filters button:hover,
.adj-rule-filters button.is-active {
  background: color-mix(in srgb, var(--adj-gold) 11%, transparent);
  color: var(--adj-ink);
}

.adj-rule-filters button span {
  min-width: 19px;
  padding: 1px 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 58%, transparent);
  font-size: 0.68rem;
}

.adj-rule-list {
  display: grid;
  gap: 8px;
}

.adj-rule-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 13px;
  border: 1px solid var(--adj-line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
}

.adj-rule-spaces {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.adj-rule-spaces > div:not(.adj-rule-link) {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.adj-rule-spaces span {
  overflow: hidden;
  color: var(--adj-muted);
  font-size: 0.67rem;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.adj-rule-spaces strong {
  overflow: hidden;
  font-size: 0.86rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adj-rule-link {
  color: var(--adj-gold);
  text-align: center;
}

.adj-rule-note {
  margin: 7px 0 0;
  color: var(--adj-muted);
  font-size: 0.75rem;
  line-height: 1.4;
}

.adj-rule-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.adj-rule-controls select {
  width: 104px;
  height: 34px;
}

.adj-rule-controls .adj-force-select {
  width: 100px;
}

.adj-layer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
}

.adj-layer-card {
  min-width: 0;
  border: 1px solid var(--adj-line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  overflow: hidden;
}

.adj-layer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--adj-line);
  background: color-mix(in srgb, var(--adj-gold) 5%, var(--surface));
}

.adj-layer-head > div {
  display: flex;
  align-items: center;
  gap: 11px;
}

.adj-layer-head h4 {
  margin: 0 0 2px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  font-weight: 500;
}

.adj-layer-head p {
  margin: 0;
  color: var(--adj-muted);
  font-size: 0.72rem;
}

.adj-layer-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--adj-gold) 34%, var(--border));
  border-radius: 9px;
  color: var(--adj-gold);
  font-size: 1.1rem;
}

.adj-layer-count {
  display: grid;
  min-width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--adj-gold) 11%, transparent);
  color: var(--adj-muted);
  font-size: 0.7rem;
}

.adj-room-constraint-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--adj-line);
}

.adj-room-constraint-composer select,
.adj-room-constraint input,
.adj-room-constraint select,
.adj-group-row select {
  height: 34px;
  min-width: 0;
  border: 1px solid var(--adj-line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--adj-ink);
  padding: 0 9px;
}

.adj-room-constraint-list,
.adj-group-list {
  max-height: 310px;
  overflow: auto;
}

.adj-room-constraint {
  display: grid;
  grid-template-columns: minmax(145px, 1fr) 68px 68px 76px 96px 30px;
  align-items: end;
  gap: 7px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--adj-line);
}

.adj-room-constraint:last-child,
.adj-group-row:last-child {
  border-bottom: 0;
}

.adj-constraint-title {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-self: center;
}

.adj-constraint-title strong,
.adj-group-row strong {
  overflow: hidden;
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adj-constraint-title span,
.adj-group-row span {
  overflow: hidden;
  color: var(--adj-muted);
  font-size: 0.65rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adj-room-constraint label:not(.adj-check-label) {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.adj-room-constraint label > span {
  color: var(--adj-muted);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.adj-room-constraint input {
  width: 100%;
}

.adj-check-label {
  display: flex;
  height: 34px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--adj-line);
  border-radius: 7px;
  color: var(--adj-muted);
  font-size: 0.68rem;
}

.adj-check-label input {
  width: auto;
  height: auto;
}

.adj-group-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-bottom: 1px solid var(--adj-line);
}

.adj-group-row > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.adj-layer-empty {
  padding: 24px 16px;
  color: var(--adj-muted);
  font-size: 0.78rem;
  text-align: center;
}

.adj-score-empty {
  margin-top: 15px;
  color: var(--adj-muted);
  font-size: 0.68rem;
  font-style: italic;
}

.adj-study-audit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 8px 9px;
  border: 1px solid var(--adj-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 92%, var(--adj-blue) 8%);
}

.adj-study-audit > div:first-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.adj-study-audit strong {
  overflow: hidden;
  color: var(--adj-ink);
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adj-study-audit span {
  color: var(--adj-muted);
  font-size: 0.58rem;
}

.adj-study-audit-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.adj-study-audit-chips span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  padding: 3px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--adj-muted);
  font-size: 0.55rem;
  text-transform: uppercase;
}

.adj-study-audit-chips b {
  color: var(--adj-ink);
  font-size: 0.62rem;
}

.adj-study-audit.has-failures {
  border-color: rgba(190, 94, 72, 0.42);
  background: rgba(190, 94, 72, 0.08);
}

.adj-study-audit.has-remainder {
  border-color: color-mix(in srgb, var(--adj-gold) 45%, var(--adj-line));
  background: color-mix(in srgb, var(--surface) 90%, var(--adj-gold) 10%);
}

.adj-study-audit.has-passed {
  border-color: rgba(95, 145, 111, 0.32);
  background: rgba(95, 145, 111, 0.08);
}

.adj-study-archive {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 8px;
  padding: 10px 11px;
  border: 1px solid var(--adj-line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 94%, var(--adj-blue) 6%);
}

.adj-study-archive-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.adj-study-archive-head > div:first-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.adj-study-archive-head strong {
  color: var(--adj-ink);
  font-size: 0.76rem;
}

.adj-study-archive-head span {
  color: var(--adj-muted);
  font-size: 0.64rem;
}

.adj-study-archive-stats,
.adj-study-archive-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.adj-study-archive-stats {
  justify-content: flex-end;
}

.adj-study-archive-stats span,
.adj-study-archive-row {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 4px 7px;
  border: 1px solid var(--adj-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 91%, transparent);
  color: var(--adj-muted);
  font-size: 0.58rem;
  text-transform: uppercase;
}

.adj-study-archive-stats b {
  color: var(--adj-ink);
  font-size: 0.7rem;
}

.adj-study-archive-list {
  max-height: 68px;
  overflow: auto;
  padding-right: 3px;
}

.adj-study-archive-row {
  border-radius: 7px;
  text-transform: none;
}

.adj-study-archive-row strong {
  color: var(--adj-ink);
  font-size: 0.62rem;
}

.adj-study-archive-row.has-failures {
  border-color: rgba(190, 94, 72, 0.36);
}

.adj-study-archive-row.has-remainder {
  border-color: color-mix(in srgb, var(--adj-gold) 42%, var(--adj-line));
}

.adj-study-archive-row.has-passed {
  border-color: rgba(95, 145, 111, 0.28);
}

.adj-study-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
  padding: 11px 13px;
  border: 1px solid var(--adj-line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 96%, var(--adj-gold) 4%);
}

.adj-study-controls > div,
.adj-study-controls label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.adj-study-controls strong,
.adj-study-controls label > span {
  font-size: 0.76rem;
}

.adj-study-controls > div span {
  color: var(--adj-muted);
  font-size: 0.68rem;
}

.adj-study-controls select {
  height: 34px;
  border: 1px solid var(--adj-line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--adj-ink);
  padding: 0 30px 0 10px;
}

.adj-option-fit {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 9px;
  border: 1px solid var(--adj-line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
}

.adj-spatial-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid var(--adj-line);
  border-radius: 8px;
}

.adj-spatial-facts > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
  padding: 7px 8px;
  border-right: 1px solid var(--adj-line);
}

.adj-spatial-facts > div:last-child {
  border-right: 0;
}

.adj-spatial-facts strong {
  font-size: 0.73rem;
}

.adj-spatial-facts span {
  overflow: hidden;
  color: var(--adj-muted);
  font-size: 0.52rem;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.adj-fit-value {
  display: grid;
  width: 54px;
  height: 54px;
  place-content: center;
  border: 1px solid color-mix(in srgb, var(--adj-blue) 35%, var(--border));
  border-radius: 50%;
  text-align: center;
}

.adj-fit-value strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;
}

.adj-fit-value span {
  margin-top: 2px;
  color: var(--adj-muted);
  font-size: 0.53rem;
  text-transform: uppercase;
}

.adj-fit-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.adj-fit-copy strong {
  font-size: 0.72rem;
}

.adj-fit-copy span {
  color: var(--adj-muted);
  font-size: 0.64rem;
  line-height: 1.35;
}

.adj-scorecard {
  display: grid;
  gap: 6px;
  margin-top: 15px;
}

.adj-score-row {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 7px;
  color: var(--adj-muted);
  font-size: 0.65rem;
}

.adj-score-row > div {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 68%, transparent);
}

.adj-score-row i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--adj-blue), var(--adj-gold));
}

.adj-score-row strong {
  color: var(--adj-ink);
  font-size: 0.65rem;
  text-align: right;
}

.adj-score-warning,
.adj-score-pass {
  margin-top: 3px;
  padding: 5px 7px;
  border-radius: 6px;
  font-size: 0.64rem;
}

.adj-score-warning {
  background: rgba(190, 94, 72, 0.1);
  color: #b86450;
}

.adj-score-pass {
  background: rgba(95, 145, 111, 0.1);
  color: #5f916f;
}

.adj-decision-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 7px;
  margin-top: 3px;
  padding-top: 6px;
  border-top: 1px solid var(--adj-line);
  font-size: 0.62rem;
}

.adj-decision-row span {
  color: var(--adj-muted);
  text-transform: uppercase;
}

.adj-decision-row strong {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adj-decision-row.good strong {
  color: #5f916f;
}

.adj-decision-row.caution strong {
  color: #b47a45;
}

.adj-source-badge {
  padding: 4px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--adj-gold) 12%, transparent);
  color: var(--adj-muted);
  font-size: 0.64rem;
  text-transform: uppercase;
}

/* §3.9 provenance: fluid (engine-drafted) vs sticky (human-confirmed). */
.adj-prov-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: help;
}

.adj-prov-chip::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  content: "";
}

.adj-prov-chip.is-inferred {
  border: 1px dashed color-mix(in srgb, var(--adj-blue) 45%, var(--border));
  background: color-mix(in srgb, var(--adj-blue) 9%, transparent);
  color: color-mix(in srgb, var(--adj-ink) 70%, var(--adj-blue));
}

.adj-prov-chip.is-inferred::before {
  background: color-mix(in srgb, var(--adj-blue) 70%, transparent);
}

.adj-prov-chip.is-confirmed {
  border: 1px solid color-mix(in srgb, var(--adj-ink) 22%, var(--border));
  background: color-mix(in srgb, var(--adj-ink) 6%, transparent);
  color: color-mix(in srgb, var(--adj-ink) 88%, transparent);
}

.adj-prov-chip.is-confirmed::before {
  background: color-mix(in srgb, var(--adj-ink) 60%, transparent);
}

.adj-delete {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--adj-muted);
  cursor: pointer;
  font-size: 1.1rem;
}

.adj-delete:hover {
  background: rgba(190, 74, 74, 0.11);
  color: #bd5c5c;
}

.adj-option-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 12px;
}

.adj-option-card {
  position: relative;
  display: flex;
  min-height: 210px;
  flex-direction: column;
  padding: 19px;
  overflow: visible;
  border: 1px solid var(--adj-line);
  border-radius: 13px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--surface) 96%, #fff 4%), color-mix(in srgb, var(--surface) 94%, var(--adj-gold) 6%));
}

.adj-option-card.is-recommended {
  border-color: color-mix(in srgb, var(--adj-gold) 72%, var(--border));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--adj-gold) 18%, transparent);
}

.adj-recommended {
  position: relative;
  align-self: flex-start;
  margin: -4px 0 8px;
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--adj-gold) 18%, transparent);
  color: color-mix(in srgb, var(--adj-ink) 82%, var(--adj-gold));
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.adj-option-number {
  position: absolute;
  top: -15px;
  right: 7px;
  color: color-mix(in srgb, var(--adj-gold) 12%, transparent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 5.5rem;
}

.adj-option-card h4 {
  position: relative;
  margin: 0 0 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.3rem;
  font-weight: 500;
}

.adj-option-card p {
  position: relative;
  margin: 0;
  color: var(--adj-muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.adj-plan-preview {
  position: relative;
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid var(--adj-line);
  border-radius: 9px;
  background:
    linear-gradient(color-mix(in srgb, var(--border) 14%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--border) 14%, transparent) 1px, transparent 1px),
    color-mix(in srgb, var(--surface) 96%, #fff 4%);
  background-size: 12px 12px;
}

.adj-preview-label {
  position: absolute;
  z-index: 1;
  top: 7px;
  left: 8px;
  display: flex;
  flex-direction: column;
  padding: 4px 6px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(4px);
}

.adj-preview-label span {
  color: var(--adj-muted);
  font-size: 0.5rem;
  text-transform: uppercase;
}

.adj-preview-label strong {
  font-size: 0.62rem;
}

.adj-preview-va-source {
  position: absolute;
  z-index: 1;
  top: 8px;
  right: 9px;
  padding: 3px 6px;
  border: 1px solid color-mix(in srgb, var(--adj-blue) 26%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  color: var(--adj-muted);
  font-size: 0.49rem;
  font-weight: 650;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.adj-plan-preview svg {
  display: block;
  width: 100%;
  height: 133px;
}

.adj-preview-neighborhood rect {
  opacity: 0.09;
  stroke: currentColor;
  stroke-width: 0.7;
  stroke-dasharray: 2 2;
}

.adj-preview-blocks rect {
  stroke: color-mix(in srgb, var(--adj-ink) 35%, transparent);
  stroke-width: 0.7;
  opacity: 0.88;
}

.adj-preview-blocks .is-circulation rect {
  stroke: #3c8797;
  stroke-width: 1.2;
  opacity: 0.58;
}

.adj-preview-blocks text {
  fill: #fff;
  font-family: sans-serif;
  font-size: 4.5px;
  text-anchor: middle;
  pointer-events: none;
}

/* Corridor bands under the rooms — the readable circulation parti */
.adj-preview-corridor {
  fill: color-mix(in srgb, var(--adj-blue) 26%, transparent);
  stroke: color-mix(in srgb, var(--adj-blue) 45%, transparent);
  stroke-width: 0.5;
}

.adj-preview-corridor.is-primary {
  fill: color-mix(in srgb, var(--adj-blue) 38%, transparent);
}

/* Exit-stair markers from the egress analysis */
.adj-preview-exit {
  fill: #e4564e;
  stroke: #fff;
  stroke-width: 1;
}

.adj-preview-floors {
  margin-top: 4px;
  color: var(--adj-muted);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.adj-option-meta {
  margin: 16px 0 9px;
  color: var(--adj-muted);
  font-size: 0.68rem;
  text-transform: uppercase;
}

.adj-option-card button {
  align-self: flex-start;
  margin-top: auto;
}

.adj-empty {
  padding: 28px;
  border: 1px dashed var(--adj-line);
  border-radius: 12px;
  color: var(--adj-muted);
  text-align: center;
}

.adj-empty-rules {
  padding: 20px;
}

@media (max-width: 860px) {
  .adj-root {
    padding: 18px;
  }

  .adj-hero,
  .adj-section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .adj-section-heading p {
    text-align: left;
  }

  .adj-metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .adj-metric:nth-child(2) {
    border-right: 0;
  }

  .adj-metric:nth-child(-n+2) {
    border-bottom: 1px solid var(--adj-line);
  }

  .adj-composer {
    grid-template-columns: 1fr;
  }

  .adj-pattern-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .adj-composer-arrow {
    display: none;
  }

  .adj-rule-card {
    grid-template-columns: 1fr;
  }

  .adj-layer-grid {
    grid-template-columns: 1fr;
  }

  .adj-budget-card {
    grid-column: auto;
  }

  .adj-circulation-framework {
    grid-template-columns: 1fr 1fr;
  }

  .adj-circulation-copy,
  .adj-circulation-disclosure {
    grid-column: 1 / -1;
  }

  .adj-room-constraint {
    grid-template-columns: minmax(130px, 1fr) 62px 62px;
  }

  .adj-room-constraint .adj-check-label,
  .adj-room-constraint .adj-force-select,
  .adj-room-constraint .adj-delete {
    align-self: center;
  }

  .adj-rule-controls {
    justify-content: flex-end;
  }

  .adj-option-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .adj-patterns-intro,
  .adj-study-controls {
    align-items: flex-start;
    flex-direction: column;
  }

  .adj-pattern-grid {
    grid-template-columns: 1fr;
  }

  .adj-budget-fields,
  .adj-budget-ledger {
    grid-template-columns: 1fr;
  }

  .adj-circulation-framework {
    grid-template-columns: 1fr;
  }

  .adj-circulation-copy,
  .adj-circulation-disclosure {
    grid-column: auto;
  }

  .adj-budget-ledger > div {
    border-right: 0;
    border-bottom: 1px solid var(--adj-line);
  }
}

/* ── Adjacency Brief shell: single-screen staged layout ──
   The brief fills its window with no page scroll; long lists scroll
   inside their own cards instead. */
[data-win-id="adjacency-planner-hub"] .window-body {
  overflow: hidden;
}

[data-win-id="adjacency-planner-hub"] .dynamic-window-content {
  padding: 0;
  overflow: hidden !important;
}

[data-win-id="adjacency-planner-hub"] #adjacency-planner-root {
  height: 100%;
}

.adj-root.adj-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  min-height: 0;
  padding: 10px 14px 14px;
  overflow: hidden;
}

.adj-slimbar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 3px 7px;
  border-bottom: 1px solid color-mix(in srgb, var(--adj-line) 82%, transparent);
}

.adj-slim-title {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  padding-right: 4px;
}

.adj-slim-title h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
}

.adj-slim-mark {
  color: var(--adj-gold);
  font-size: 1.05rem;
}

.adj-slim-tabs {
  display: flex;
  flex: 1 1 auto;
  align-self: stretch;
  gap: 2px;
  min-width: 0;
}

.adj-stage-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 5px 9px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--adj-muted);
  cursor: pointer;
  text-align: left;
  transition: 140ms ease;
}

.adj-stage-tab:hover {
  border-color: color-mix(in srgb, var(--adj-gold) 24%, transparent);
  background: color-mix(in srgb, var(--adj-gold) 7%, transparent);
  color: var(--adj-ink);
}

.adj-stage-tab.is-active {
  border-color: color-mix(in srgb, var(--adj-gold) 42%, var(--adj-line));
  background: color-mix(in srgb, var(--adj-gold) 12%, var(--surface));
  color: var(--adj-ink);
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--adj-gold) 78%, transparent);
}

.adj-stage-num {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.78rem;
  line-height: 1;
  color: color-mix(in srgb, var(--adj-gold) 54%, var(--adj-muted));
}

.adj-stage-tab.is-active .adj-stage-num {
  color: color-mix(in srgb, var(--adj-gold) 85%, var(--adj-ink));
}

.adj-stage-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.adj-stage-copy strong {
  overflow: hidden;
  font-size: 0.72rem;
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adj-slim-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  padding: 2px;
  border: 1px solid var(--adj-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 94%, var(--adj-ink) 6%);
}

.adj-slim-actions button {
  display: inline-flex;
  height: 29px;
  min-height: 29px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 11px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-size: 0.68rem;
  line-height: 1;
}

.adj-slim-actions .btn-secondary {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.adj-slim-actions button:hover,
.adj-slim-actions button.is-active {
  background: color-mix(in srgb, var(--adj-ink) 7%, var(--surface));
  color: var(--adj-ink);
}

.adj-slim-actions button > i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--adj-muted) 58%, transparent);
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--surface) 70%, transparent);
}

.adj-slim-actions button.is-active > i {
  border-color: color-mix(in srgb, var(--adj-gold) 76%, var(--adj-line));
  background: var(--adj-gold);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--adj-gold) 13%, transparent);
}

.adj-stage-viewport {
  display: flex;
  flex: 1 1 0;
  min-height: 0;
}

.adj-stage-pane {
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  gap: 12px;
}

.adj-stage-heading h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.22rem;
  font-weight: 500;
}

.adj-stage-note {
  max-width: 560px;
  margin: 0;
  color: var(--adj-muted);
  font-size: 0.79rem;
  line-height: 1.5;
}

/* Stage 01 — outcomes as large tiles */
.adj-pane-outcomes .adj-goals {
  display: grid;
  flex: 1;
  min-height: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-content: stretch;
  margin-top: 4px;
}

.adj-pane-outcomes .adj-goal {
  justify-content: flex-start;
  padding: 18px;
  border-radius: 13px;
  font-size: 0.98rem;
}

/* Stage 02 — planning field as a fixed 2x2 of self-scrolling cards */
.adj-pane-field .adj-layer-grid {
  display: grid;
  flex: 1;
  min-height: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 12px;
  overflow: hidden;
}

.adj-pane-field .adj-layer-card {
  min-height: 0;
  overflow: auto;
}

.adj-pane-field .adj-budget-card {
  grid-column: auto;
}

/* Stage 03 — compose on the left, the living brief on the right */
.adj-pane-rules {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 14px;
}

.adj-rules-say {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 11px;
  overflow: auto;
  padding-right: 3px;
}

.adj-rules-ledger {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--adj-line);
  border-radius: 13px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--surface) 96%, #fff 4%), color-mix(in srgb, var(--surface) 94%, var(--adj-gold) 6%));
}

.adj-ledger-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.adj-ledger-head h4 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.02rem;
  font-weight: 500;
}

.adj-ledger-head .adj-rule-filters {
  margin: 0;
}

.adj-ledger-scroll {
  display: flex;
  flex: 1 1 0;
  min-height: 0;
  flex-direction: column;
  gap: 10px;
  overflow: auto;
}

.adj-pane-rules .adj-pattern-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Stage 04 — directions stay the hero */
.adj-directions-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
}

.adj-directions-head .adj-stage-note {
  flex: 1;
  min-width: 250px;
}

.adj-directions-head .adj-study-controls {
  margin: 0;
}

.adj-pane-directions .adj-option-grid {
  flex: 1;
  min-height: 0;
  padding: 2px 10px 18px 2px;
  overflow: auto;
  align-content: start;
}

/* Shell refinement: quiet scrollbars, structure lines, compact composers */
.adj-shell {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--adj-gold) 30%, transparent) transparent;
}

.adj-shell *::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

.adj-shell *::-webkit-scrollbar-track {
  background: transparent;
}

.adj-shell *::-webkit-scrollbar-thumb {
  border-radius: 99px;
  background: color-mix(in srgb, var(--adj-gold) 28%, transparent);
}

.adj-shell *::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--adj-gold) 48%, transparent);
}

.adj-topbar {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--adj-line);
}

.adj-stage-tab:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--adj-gold) 60%, transparent);
  outline-offset: 2px;
}

.adj-stage-tab.is-active::after {
  content: '';
  position: absolute;
  right: 14px;
  bottom: 0;
  left: 14px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: color-mix(in srgb, var(--adj-gold) 75%, transparent);
}

/* Field cards: pin the card head, scroll the body lists */
.adj-pane-field .adj-layer-card {
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.adj-pane-field .adj-layer-head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: inherit;
  background-color: color-mix(in srgb, var(--surface) 98%, var(--adj-gold) 2%);
}

/* Ledger: filters live in the head, no doubled borders */
.adj-ledger-head .adj-rule-filters {
  margin: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

/* Rule cards breathe less in the narrow ledger column */
.adj-rules-ledger .adj-rule-card {
  gap: 10px;
  padding: 11px;
}

.adj-rules-ledger .adj-rule-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Precise composer reflows to the ledger column width */
.adj-rules-ledger .adj-composer {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 12px;
}

.adj-rules-ledger .adj-composer-arrow {
  display: none;
}

.adj-rules-ledger .adj-composer .btn-primary {
  grid-column: 1 / -1;
  justify-self: end;
}

/* Compose column: lighter planning-move cards, tighter starters */
.adj-rules-say .adj-pattern-card {
  min-height: 0;
  padding: 10px 11px;
}

.adj-rules-say .adj-pattern-card p {
  display: none;
}

.adj-rules-say .adj-knows {
  margin-top: 0;
  padding: 13px;
}

.adj-rules-say .adj-patterns {
  padding: 13px;
}

/* Stage 02 gains an architecture band, so the pane scrolls as one column and
   the layer grid sizes to content rather than stretching to a fixed 2 rows. */
.adj-pane-field {
  overflow: hidden;
}

.adj-field-scroll {
  display: flex;
  flex: 1 1 0;
  min-height: 0;
  flex-direction: column;
  gap: 12px;
  overflow: auto;
  padding-right: 3px;
}

.adj-field-scroll .adj-layer-grid {
  grid-template-rows: none;
}

.adj-field-scroll .adj-pane-field .adj-layer-card,
.adj-field-scroll .adj-layer-card {
  overflow: visible;
}

/* Architectural logic panel — one designed surface, four control families */
.adj-arch-card {
  border-color: color-mix(in srgb, var(--adj-gold) 38%, var(--adj-line));
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--surface) 95%, var(--adj-gold) 5%), color-mix(in srgb, var(--surface) 97%, var(--adj-blue) 3%));
}

.adj-arch-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
}

.adj-arch-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--adj-line);
  border-radius: 11px;
  background: color-mix(in srgb, var(--surface) 97%, transparent);
}

.adj-arch-group-title {
  color: var(--adj-muted);
  font-size: 0.66rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.adj-arch-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border: 1px solid var(--adj-line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--adj-muted);
  font-size: 0.8rem;
  text-align: left;
  cursor: pointer;
  transition: 150ms ease;
}

.adj-arch-toggle:hover {
  border-color: color-mix(in srgb, var(--adj-gold) 45%, var(--border));
}

.adj-arch-toggle.is-on {
  border-color: color-mix(in srgb, var(--adj-gold) 60%, var(--border));
  background: color-mix(in srgb, var(--surface) 88%, var(--adj-gold) 12%);
  color: var(--adj-ink);
}

.adj-arch-knob {
  position: relative;
  flex: 0 0 auto;
  width: 30px;
  height: 17px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 75%, transparent);
  transition: background 150ms ease;
}

.adj-arch-knob::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 150ms ease;
}

.adj-arch-toggle.is-on .adj-arch-knob {
  background: var(--adj-gold);
}

.adj-arch-toggle.is-on .adj-arch-knob::after {
  transform: translateX(13px);
}

.adj-arch-nums {
  display: flex;
  gap: 8px;
}

.adj-arch-num,
.adj-arch-select {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
}

.adj-arch-num > span,
.adj-arch-select > span {
  color: var(--adj-muted);
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.adj-arch-num {
  position: relative;
}

.adj-arch-num input,
.adj-arch-select select {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  border: 1px solid var(--adj-line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--adj-ink);
  font-size: 0.82rem;
}

.adj-arch-num em {
  position: absolute;
  right: 9px;
  bottom: 7px;
  color: var(--adj-muted);
  font-size: 0.66rem;
  font-style: normal;
  pointer-events: none;
}

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

/* ── The living constellation: the brief as visible threads ── */
.adj-main-duo {
  display: flex;
  flex: 1 1 0;
  min-height: 0;
  gap: 0;
}

.adj-stage-viewport {
  min-width: 0;
  padding-right: 10px;
}

.adj-panel-resizer {
  position: relative;
  z-index: 4;
  flex: 0 0 7px;
  cursor: col-resize;
  touch-action: none;
}

.adj-panel-resizer::after {
  content: '';
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 3px;
  width: 1px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--adj-line) 86%, transparent);
  transition: 140ms ease;
}

.adj-panel-resizer:hover::after,
.adj-panel-resizer.is-resizing::after {
  left: 2px;
  width: 3px;
  background: color-mix(in srgb, var(--adj-gold) 68%, var(--adj-line));
}

.adj-graph-panel {
  /* Resting threads read as a neutral hairline (KB graph), not a warm gold
     cord. The gold is reserved for the anchor/highlight state. */
  --adj-g-edge: color-mix(in srgb, var(--adj-ink) 50%, var(--surface));
  --adj-g-repel: #c4685a;
  --adj-g-route: color-mix(in srgb, #43a6ad 78%, var(--adj-ink));
  --adj-g-ghost: color-mix(in srgb, var(--adj-ink) 16%, transparent);
  --adj-g-label: color-mix(in srgb, var(--adj-ink) 82%, transparent);
  --adj-g-anchor: color-mix(in srgb, var(--adj-blue) 68%, var(--adj-gold));
  --adj-g-peg-metal: color-mix(in srgb, #dce3e5 90%, var(--adj-ink));
  --adj-g-peg-shadow: color-mix(in srgb, #111820 30%, transparent);
  --adj-g-wire-highlight: rgba(255, 255, 255, 0.34);
  --adj-g-pegboard-dot: color-mix(in srgb, var(--adj-ink) 13%, transparent);
  --adj-g-minimap-bg: color-mix(in srgb, var(--surface) 94%, transparent);
  --adj-g-minimap-border: color-mix(in srgb, var(--adj-ink) 30%, transparent);
  --adj-g-minimap-edge: color-mix(in srgb, var(--adj-ink) 42%, transparent);
  --adj-g-minimap-viewport: var(--adj-g-anchor);
  --adj-g-edge-label-bg: color-mix(in srgb, var(--surface) 92%, transparent);
  --adj-g-edge-label-border: color-mix(in srgb, var(--adj-ink) 18%, transparent);
  position: relative;
  display: flex;
  flex: 0 0 300px;
  min-width: 232px;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--adj-workspace-base);
  box-shadow: 0 10px 28px color-mix(in srgb, #000 7%, transparent);
}

/* Dark mode: the canvas is genuinely black, so the colored node dots and
   faint threads sit on true black rather than a lifted blue-gray. Scoped
   under .adj-table and given the resolved/napkin/technical variants too, so
   nothing reintroduces the surface tint. Light mode keeps the paper surface. */
body:not(.light-theme) .adj-table .adj-graph-panel,
body:not(.light-theme) .adj-table .adj-graph-panel.is-resolved,
body:not(.light-theme) .adj-table .adj-graph-panel[data-graph-style="napkin"],
body:not(.light-theme) .adj-table .adj-graph-panel[data-graph-style="technical"] {
  background-color: var(--adj-workspace-base);
  border-color: var(--border);
  --adj-g-minimap-bg: rgba(4, 4, 6, 0.92);
  --adj-g-minimap-border: rgba(230, 234, 241, 0.24);
  --adj-g-minimap-edge: rgba(202, 211, 226, 0.36);
  --adj-g-minimap-viewport: #d8b164;
  --adj-g-route: #65c4ca;
  --adj-g-peg-metal: rgba(177, 187, 193, 0.92);
  --adj-g-peg-shadow: rgba(0, 0, 0, 0.62);
  --adj-g-wire-highlight: rgba(255, 255, 255, 0.3);
  --adj-g-pegboard-dot: rgba(220, 226, 235, 0.12);
  --adj-g-edge-label-bg: rgba(7, 8, 11, 0.9);
  --adj-g-edge-label-border: rgba(224, 230, 240, 0.22);
}

.adj-graph-head {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 42px;
  padding: 9px 10px 7px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--adj-line) 72%, transparent);
}

.adj-cg-head {
  min-width: 0;
}

.adj-graph-tools,
.adj-graph-switch {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px;
}

.adj-graph-switch {
  gap: 0;
  padding: 2px;
  border: 1px solid var(--adj-line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
}

.adj-graph-switch button,
.adj-graph-tool {
  min-width: 27px;
  height: 25px;
  padding: 0 7px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--adj-muted);
  font-size: 0.64rem;
  font-weight: 700;
  cursor: pointer;
}

.adj-graph-switch button:hover,
.adj-graph-tool:hover,
.adj-graph-switch button.is-active {
  background: color-mix(in srgb, var(--adj-gold) 14%, var(--surface));
  color: var(--adj-ink);
}

.adj-graph-tool {
  padding: 0;
  font-size: 0.9rem;
}

.adj-graph-tool.adj-graph-whole {
  width: auto;
  padding: 0 7px;
  font-size: 0.57rem;
  letter-spacing: 0.02em;
}

.adj-graph-tool.adj-graph-hand-tool {
  width: auto;
  padding: 0 6px;
  font-size: 0.52rem;
  letter-spacing: 0.02em;
}

.adj-graph-canvas-wrap {
  position: relative;
  flex: 1 1 0;
  min-height: 150px;
  overflow: hidden;
  transition: opacity 140ms ease;
}

/* A room can be temporarily held off the shared spatial table without being
   removed from the program. The hand stays tucked away until approached. */
#adj-graph-hand {
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}

.adj-room-hand {
  position: absolute;
  z-index: 6;
  right: 8px;
  bottom: 8px;
  width: 178px;
  height: 62px;
  pointer-events: auto;
}

#adj-graph-hand .adj-room-hand { right: 0; bottom: 0; }

/* The hand is a deliberately quiet card deck along the table edge. It opens
   upward on approach instead of fanning into the drawing or hiding the plan. */
#adj-graph-hand .adj-room-hand,
.adj-room-hand--block,
.adj-room-hand--parti {
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
}

.adj-room-hand--block { right: 0; bottom: 0; }
.adj-room-hand--ledger { right: 10px; bottom: 9px; }
.adj-room-hand--parti { right: 10px; bottom: 10px; }

.adj-room-hand-sort {
  position: absolute;
  z-index: 230;
  bottom: 0;
  left: 0;
  display: grid;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--adj-line) 78%, transparent);
  border-radius: 50%;
  place-items: center;
  background: color-mix(in srgb, var(--surface) 86%, var(--adj-gold) 14%);
  color: var(--adj-muted);
  box-shadow: 0 3px 9px color-mix(in srgb, #000 12%, transparent);
  cursor: pointer;
  opacity: 0.9;
  transform: translate3d(0, 0, 0);
  transition: transform 150ms cubic-bezier(.16,.96,.28,1), box-shadow 110ms ease, opacity 90ms ease, background 110ms ease;
}

.adj-room-hand-sort:hover,
.adj-room-hand-sort:focus-visible {
  color: var(--adj-ink);
  opacity: 1;
  outline: none;
  transform: translate3d(0, -1px, 0) scale(1.08);
  background: color-mix(in srgb, var(--surface) 78%, var(--adj-gold) 22%);
  box-shadow: 0 5px 14px color-mix(in srgb, var(--adj-gold) 21%, transparent);
}

.adj-room-hand-sort span { color: color-mix(in srgb, var(--adj-gold) 74%, var(--adj-ink)); font-size: 0.84rem; font-weight: 850; line-height: 1; }

.adj-room-hand-fan {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 34px;
  height: 60px;
  contain: layout style;
  perspective: 720px;
}

.adj-room-hand-card {
  position: absolute;
  z-index: var(--hand-layer, 1);
  left: min(calc(var(--hand-index, 0) * var(--hand-exposure, 32px)), calc(var(--hand-progress, 0) * (100% - 142px)));
  bottom: -51px;
  display: flex;
  width: min(142px, calc(100% - 18px));
  height: 68px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2px;
  padding: 6px 8px 7px;
  border: 1px solid color-mix(in srgb, var(--hand-color) 48%, var(--adj-line));
  border-radius: 8px 8px 0 0;
  background: color-mix(in srgb, var(--hand-color) 10%, var(--surface));
  box-shadow: 0 3px 9px color-mix(in srgb, #000 10%, transparent);
  color: var(--adj-ink);
  cursor: grab;
  opacity: 0.66;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  transform-origin: center bottom;
  will-change: transform, opacity;
  transition: transform 260ms cubic-bezier(.16,.96,.28,1), box-shadow 180ms ease, opacity 160ms ease, background 180ms ease;
}

.adj-room-hand-card:hover,
.adj-room-hand-card:focus-visible {
  z-index: 200;
  opacity: 1;
  transform: translate3d(0, -38px, 0) scale(1.018);
  background: color-mix(in srgb, var(--hand-color) 31%, var(--surface));
  box-shadow: 0 6px 17px color-mix(in srgb, var(--hand-color) 26%, transparent);
  outline: none;
}

/* A compact wave follows the active card without waking the whole hundred-card
   deck. :has() gives the preceding cards the same response as following cards. */
@supports selector(.adj-room-hand-card:has(+ .adj-room-hand-card:hover)) {
  .adj-room-hand-card:has(+ .adj-room-hand-card:hover),
  .adj-room-hand-card:hover + .adj-room-hand-card,
  .adj-room-hand-card:has(+ .adj-room-hand-card:focus-visible),
  .adj-room-hand-card:focus-visible + .adj-room-hand-card {
    z-index: 160;
    opacity: 0.94;
    transform: translate3d(0, -18px, 0) scale(1.01);
  }

  .adj-room-hand-card:has(+ .adj-room-hand-card + .adj-room-hand-card:hover),
  .adj-room-hand-card:hover + .adj-room-hand-card + .adj-room-hand-card,
  .adj-room-hand-card:has(+ .adj-room-hand-card + .adj-room-hand-card:focus-visible),
  .adj-room-hand-card:focus-visible + .adj-room-hand-card + .adj-room-hand-card {
    z-index: 120;
    opacity: 0.82;
    transform: translate3d(0, -8px, 0) scale(1.004);
  }
}

.adj-room-hand-card:active { cursor: grabbing; }
.adj-room-hand-card.is-lifted { opacity: 0.32; }
.adj-room-hand.is-spotlight .adj-room-hand-card {
  bottom: -24px;
  opacity: 0.92;
}
.adj-room-hand.is-spotlight .adj-room-hand-card:hover,
.adj-room-hand.is-spotlight .adj-room-hand-card:focus-visible {
  transform: translate3d(0, -18px, 0) scale(1.018);
}
.adj-room-hand-card-top { display: flex; width: 100%; min-height: 11px; align-items: center; justify-content: space-between; gap: 5px; }
.adj-room-hand-card-top b { overflow: hidden; color: color-mix(in srgb, var(--hand-color) 82%, var(--adj-ink)); font-size: 0.45rem; font-weight: 850; letter-spacing: 0.085em; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.adj-room-hand-card-top em { flex: 0 0 auto; color: var(--adj-muted); font-size: 0.42rem; font-style: normal; font-weight: 720; letter-spacing: 0.03em; line-height: 1; }
.adj-room-hand-card strong { display: -webkit-box; max-width: 100%; overflow: hidden; color: var(--adj-ink); font-size: 0.59rem; font-weight: 740; line-height: 1.12; text-align: left; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.adj-room-hand-card small { max-width: 100%; overflow: hidden; color: var(--adj-muted); font-size: 0.45rem; font-weight: 590; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.adj-room-hand-node-code { display: none; }

.adj-room-hand-more {
  position: absolute;
  z-index: 21;
  right: 3px;
  top: 0;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--surface) 42%, transparent);
  background: var(--adj-ink);
  color: var(--surface);
  cursor: pointer;
  font-size: 0.48rem;
  font-weight: 750;
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.adj-room-hand-more:hover,
.adj-room-hand-more:focus-visible { box-shadow: 0 4px 12px color-mix(in srgb, #000 26%, transparent); outline: none; transform: scale(1.1); }

.adj-room-hand-library {
  position: absolute;
  z-index: 30;
  right: 0;
  bottom: 79px;
  display: grid;
  width: min(510px, calc(100vw - 32px));
  max-height: min(360px, calc(100vh - 150px));
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--adj-line) 82%, transparent);
  border-radius: 12px 12px 8px 8px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 16px 38px color-mix(in srgb, #000 24%, transparent);
  backdrop-filter: blur(16px);
}

.adj-room-hand-library-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 10px 7px; border-bottom: 1px solid color-mix(in srgb, var(--adj-line) 64%, transparent); }
.adj-room-hand-library-head div { display: grid; gap: 1px; }
.adj-room-hand-library-head strong { color: var(--adj-ink); font-size: 0.66rem; letter-spacing: 0.04em; text-transform: uppercase; }
.adj-room-hand-library-head span { color: var(--adj-muted); font-size: 0.54rem; }
.adj-room-hand-library-head button { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--adj-muted); cursor: pointer; font-size: 1rem; line-height: 1; }
.adj-room-hand-library-head button:hover,
.adj-room-hand-library-head button:focus-visible { background: color-mix(in srgb, var(--adj-ink) 9%, transparent); color: var(--adj-ink); outline: none; }
.adj-room-hand-library-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(126px, .48fr); gap: 6px; padding: 7px 9px; border-bottom: 1px solid color-mix(in srgb, var(--adj-line) 56%, transparent); }
.adj-room-hand-library-controls label { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 5px; color: var(--adj-muted); font-size: 0.5rem; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; }
.adj-room-hand-library-controls input,
.adj-room-hand-library-controls select { min-width: 0; height: 24px; padding: 3px 6px; border: 1px solid color-mix(in srgb, var(--adj-line) 80%, transparent); border-radius: 5px; background: color-mix(in srgb, var(--surface) 84%, transparent); color: var(--adj-ink); font: inherit; font-size: 0.58rem; letter-spacing: 0; text-transform: none; }
.adj-room-hand-library-list { display: grid; min-height: 0; grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)); gap: 5px; padding: 8px; overflow: auto; align-content: start; }
.adj-room-hand-library-card { display: grid; min-width: 0; gap: 1px; padding: 6px 7px; border: 1px solid color-mix(in srgb, var(--hand-color) 42%, var(--adj-line)); border-radius: 6px; background: color-mix(in srgb, var(--hand-color) 9%, var(--surface)); color: var(--adj-ink); cursor: grab; text-align: left; }
.adj-room-hand-library-card:hover,
.adj-room-hand-library-card:focus-visible { border-color: color-mix(in srgb, var(--hand-color) 70%, var(--adj-ink)); background: color-mix(in srgb, var(--hand-color) 20%, var(--surface)); box-shadow: 0 4px 12px color-mix(in srgb, var(--hand-color) 22%, transparent); outline: none; transform: translateY(-1px); }
.adj-room-hand-library-card span { color: color-mix(in srgb, var(--hand-color) 78%, var(--adj-ink)); font-size: 0.45rem; font-weight: 800; letter-spacing: 0.08em; }
.adj-room-hand-library-card strong { overflow: hidden; font-size: 0.6rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.adj-room-hand-library-card em { overflow: hidden; color: var(--adj-muted); font-size: 0.48rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }

.adj-room-hand-drag {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2px;
  padding: 6px 8px 7px;
  border: 1px solid color-mix(in srgb, var(--hand-color) 62%, var(--adj-line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--hand-color) 20%, var(--surface));
  box-shadow: 0 9px 25px color-mix(in srgb, var(--hand-color) 28%, transparent);
  color: var(--adj-ink);
  overflow: hidden;
  pointer-events: none;
  transform-origin: center;
  will-change: transform, width, height, border-radius, opacity;
  transition: border-color 120ms ease, background 140ms ease, box-shadow 140ms ease, opacity 120ms ease;
}

.adj-room-hand-drag::after {
  position: absolute;
  inset: 3px;
  border: 1px solid color-mix(in srgb, #fff 34%, transparent);
  border-radius: inherit;
  content: "";
  opacity: calc(var(--hand-morph, 0) * .82);
  pointer-events: none;
}

.adj-room-hand-drag .adj-room-hand-card-top {
  display: flex;
  width: 100%;
  min-height: 11px;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  opacity: var(--hand-meta-opacity, 1);
  transition: opacity 70ms linear;
}

.adj-room-hand-drag .adj-room-hand-card-top b {
  overflow: hidden;
  color: color-mix(in srgb, var(--hand-color) 82%, var(--adj-ink));
  font-size: 0.45rem;
  font-weight: 850;
  letter-spacing: 0.085em;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adj-room-hand-drag .adj-room-hand-card-top em {
  flex: 0 0 auto;
  color: var(--adj-muted);
  font-size: 0.42rem;
  font-style: normal;
  font-weight: 720;
  letter-spacing: 0.03em;
  line-height: 1;
}

.adj-room-hand-drag strong {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  color: var(--adj-ink);
  font-size: 0.59rem;
  font-weight: 740;
  line-height: 1.12;
  opacity: var(--hand-label-opacity, 1);
  transition: opacity 70ms linear;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.adj-room-hand-drag small {
  max-width: 100%;
  overflow: hidden;
  color: var(--adj-muted);
  font-size: 0.45rem;
  font-weight: 590;
  line-height: 1.1;
  opacity: var(--hand-meta-opacity, 1);
  text-overflow: ellipsis;
  transition: opacity 70ms linear;
  white-space: nowrap;
}

.adj-room-hand-drag .adj-room-hand-node-code {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: color-mix(in srgb, #fff 88%, var(--hand-color));
  font-size: 0.52rem;
  font-style: normal;
  font-weight: 840;
  letter-spacing: 0.035em;
  opacity: var(--hand-node-opacity, 0);
  text-align: center;
  transition: opacity 70ms linear;
}

.adj-room-hand-drag .adj-room-hand-node-code b,
.adj-room-hand-drag .adj-room-hand-node-code span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adj-room-hand-drag .adj-room-hand-node-code span {
  margin-top: 2px;
  font-size: 0.86em;
  font-weight: 700;
  letter-spacing: 0;
}

.adj-room-hand-drag[data-morph="graph"] {
  border-color: color-mix(in srgb, var(--hand-color) 76%, var(--adj-ink));
  background: color-mix(in srgb, var(--hand-color) var(--hand-fill-strength, 32%), var(--surface));
  box-shadow: 0 8px 22px color-mix(in srgb, var(--hand-color) 38%, transparent), 0 0 0 4px color-mix(in srgb, var(--hand-color) 10%, transparent);
}

.adj-room-hand-drag[data-morph="block"] {
  border-color: color-mix(in srgb, var(--hand-color) 76%, var(--adj-ink));
  background: color-mix(in srgb, var(--hand-color) var(--hand-fill-strength, 42%), var(--surface));
  box-shadow: 0 10px 26px color-mix(in srgb, var(--hand-color) 34%, transparent), inset 0 0 0 1px color-mix(in srgb, #fff 24%, transparent);
}
.adj-room-hand-drag[data-morph="block"] .adj-room-hand-node-code {
  place-items: start;
  padding: 8px;
  font-size: 0.58rem;
  letter-spacing: 0.075em;
  text-align: left;
}
.adj-room-hand-drag.is-restoring { border-radius: 999px; box-shadow: 0 9px 25px color-mix(in srgb, var(--hand-color) 44%, transparent); }
.adj-room-hand-drag.is-returning {
  opacity: 0.68;
  transition: transform 220ms cubic-bezier(.2,.78,.24,1), width 180ms cubic-bezier(.2,.78,.24,1), height 180ms cubic-bezier(.2,.78,.24,1), border-radius 180ms cubic-bezier(.2,.78,.24,1), background 120ms ease, box-shadow 120ms ease, opacity 180ms ease;
}
.adj-room-hand-drag.is-settling {
  filter: saturate(1.12);
  transition: transform 520ms cubic-bezier(.2,.78,.24,1), width 480ms cubic-bezier(.2,.78,.24,1), height 480ms cubic-bezier(.2,.78,.24,1), border-radius 480ms cubic-bezier(.2,.78,.24,1), opacity 560ms ease, filter 360ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .adj-room-hand-drag,
  .adj-room-hand-card { transition-duration: 1ms !important; }
}

/* Workbench reuses the canonical adjacency graph instead of maintaining a
   second force canvas with different gestures and relationship semantics. */
.wb-shared-graph-root {
  position: absolute;
  inset: 0 0 0 50%;
  z-index: 10;
  min-height: 0;
  padding: 8px;
  background: var(--workbench-bg, var(--bg));
}

.wb-shared-graph-root[data-full="true"] { left: 0; }

.wb-shared-graph-panel {
  width: 100%;
  height: 100%;
  min-width: 0;
  border-radius: 10px;
}

.adj-graph-canvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
}

.wb-shared-graph-hint {
  color: var(--adj-muted);
  font-size: 0.62rem;
  line-height: 1.4;
}

.adj-graph-canvas-wrap.is-hidden {
  display: none;
}

#adj-graph-canvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
}

.adj-graph-extra {
  display: flex;
  flex: 0 0 auto;
  min-height: 0;
  flex-direction: column;
  gap: 8px;
  padding: 8px 11px 10px;
}

.adj-graph-lenses {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-bottom: 7px;
  border-bottom: 1px solid color-mix(in srgb, var(--adj-line) 70%, transparent);
}

.adj-graph-lens-row,
.adj-graph-layout-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.adj-graph-lens-row > span {
  width: 42px;
  flex: 0 0 42px;
  color: var(--adj-muted);
  font-size: 0.55rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.adj-graph-lens-row select {
  min-width: 0;
  flex: 1;
  height: 24px;
  padding: 0 6px;
  border: 1px solid var(--adj-line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--adj-ink);
  font-size: 0.62rem;
}

.adj-graph-lens-buttons {
  display: flex;
  min-width: 0;
  flex: 1;
  overflow: hidden;
  border: 1px solid var(--adj-line);
  border-radius: 6px;
}

.adj-graph-lens-buttons button,
.adj-lens-action {
  min-width: 0;
  flex: 1;
  height: 23px;
  padding: 0 5px;
  border: 0;
  border-right: 1px solid var(--adj-line);
  background: transparent;
  color: var(--adj-muted);
  font-size: 0.57rem;
  font-weight: 700;
  cursor: pointer;
}

.adj-graph-lens-buttons button:last-child {
  border-right: 0;
}

.adj-graph-lens-buttons button:hover,
.adj-graph-lens-buttons button.is-active,
.adj-lens-action:hover {
  background: color-mix(in srgb, var(--adj-gold) 14%, var(--surface));
  color: var(--adj-ink);
}

.adj-lens-action {
  flex: 0 0 auto;
  border: 1px solid var(--adj-line);
  border-radius: 6px;
}

.adj-lens-action.is-primary {
  color: color-mix(in srgb, var(--adj-ink) 82%, var(--adj-gold));
  border-color: color-mix(in srgb, var(--adj-gold) 48%, var(--adj-line));
}

.adj-graph-layout-row {
  justify-content: space-between;
  margin-top: 2px;
}

.adj-graph-layout-row span {
  color: var(--adj-muted);
  font-size: 0.56rem;
  font-variant-numeric: tabular-nums;
}

.adj-graph-panel[data-graph-style="napkin"] {
  background:
    repeating-linear-gradient(0deg, transparent 0 16px, color-mix(in srgb, var(--adj-ink) 3%, transparent) 16px 17px),
    var(--adj-workspace-base);
}

.adj-graph-panel[data-graph-style="technical"] {
  background:
    linear-gradient(color-mix(in srgb, var(--adj-blue) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--adj-blue) 6%, transparent) 1px, transparent 1px),
    var(--adj-workspace-base);
  background-size: 16px 16px;
}

.adj-graph-panel.is-resolved {
  border-color: color-mix(in srgb, var(--adj-blue) 42%, var(--adj-line));
  background: var(--adj-workspace-base);
}

.adj-graph-panel.is-resolved .adj-graph-extra {
  flex: 1 1 0;
  overflow: hidden;
}

.adj-graph-panel.adj-graph-overlay {
  position: absolute;
  z-index: 40;
  inset: 52px 4px 4px;
  width: auto;
  max-width: none;
  box-shadow: 0 20px 70px color-mix(in srgb, #000 30%, transparent);
}

.adj-graph-popover {
  position: absolute;
  z-index: 50;
  width: min(286px, calc(100% - 12px));
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--adj-gold) 42%, var(--adj-line));
  border-radius: 11px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: 0 16px 42px color-mix(in srgb, #000 24%, transparent);
  backdrop-filter: blur(16px);
}

.adj-graph-popover-title {
  margin-bottom: 7px;
  color: var(--adj-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.82rem;
}

.adj-gpop-title,
.adj-gpop-rule,
.adj-gpop-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.adj-gpop-title {
  flex-wrap: wrap;
  margin-bottom: 7px;
  color: var(--adj-muted);
  font-size: 0.68rem;
}

.adj-gpop-rule {
  padding: 6px 0;
  border-top: 1px solid color-mix(in srgb, var(--adj-line) 72%, transparent);
}

.adj-gpop-rule select {
  min-width: 0;
  flex: 1 1 auto;
}

.adj-gpop-desc {
  flex: 1 1 auto;
  font-size: 0.7rem;
  line-height: 1.35;
}

.adj-gpop-actions {
  flex-wrap: wrap;
}

.adj-gpop-rel {
  flex: 1 1 46%;
  padding: 6px 7px;
  border: 1px solid var(--adj-line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  color: var(--adj-ink);
  font-size: 0.67rem;
  cursor: pointer;
}

.adj-rule-card.is-hot {
  border-color: color-mix(in srgb, var(--adj-gold) 72%, var(--adj-line)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--adj-gold) 40%, transparent), 0 8px 24px color-mix(in srgb, var(--adj-gold) 10%, transparent);
}

.adj-rule-card.is-first-nl-rule {
  border-color: color-mix(in srgb, var(--adj-gold) 64%, var(--adj-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--adj-gold) 13%, transparent), 0 12px 28px color-mix(in srgb, var(--adj-gold) 12%, transparent);
}
.adj-first-nl-rule-handoff {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 9px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--adj-gold) 9%, var(--surface));
  color: var(--adj-ink);
}
.adj-first-nl-rule-handoff div { display: grid; gap: 2px; min-width: 0; }
.adj-first-nl-rule-handoff strong { font-size: 0.67rem; }
.adj-first-nl-rule-handoff span { color: var(--adj-muted); font-size: 0.6rem; line-height: 1.35; }
.adj-first-nl-rule-handoff button {
  flex: 0 0 auto;
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, var(--adj-gold) 38%, var(--adj-line));
  border-radius: 6px;
  background: transparent;
  color: var(--adj-muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.57rem;
}
.adj-first-nl-rule-handoff button:hover { color: var(--adj-ink); border-color: var(--adj-gold); }

.adj-brief-orientation { display: grid; gap: 10px; }
.adj-brief-orientation > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--adj-blue) 20%, var(--adj-line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--adj-blue) 5%, var(--surface));
}
.adj-brief-orientation > header > div { display: grid; gap: 3px; }
.adj-brief-orientation > header strong { font-size: 0.74rem; }
.adj-brief-orientation > header span { color: var(--adj-muted); font-size: 0.62rem; }
.adj-brief-orientation > header button { flex: 0 0 auto; }
.adj-orientation-anchor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.adj-orientation-anchor-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 9px;
  border: 1px solid var(--adj-line);
  border-radius: 9px;
  background: var(--surface);
}
.adj-orientation-anchor-card > div { display: grid; gap: 3px; }
.adj-orientation-anchor-card strong { font-size: 0.68rem; }
.adj-orientation-anchor-card span,
.adj-orientation-anchor-card small { color: var(--adj-muted); font-size: 0.58rem; line-height: 1.35; }
.adj-orientation-anchor-card small { grid-column: 1 / -1; }
.adj-orientation-help { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; color: var(--adj-muted); font-size: 0.6rem; }
.adj-orientation-help kbd { margin-left: 4px; }
.adj-orientation-circulation-list { display: grid; gap: 7px; }
.adj-orientation-circulation-card { display: grid; grid-template-columns: minmax(110px, .4fr) minmax(0, 1fr); gap: 8px; align-items: center; padding: 8px; border: 1px solid var(--adj-line); border-radius: 8px; }
.adj-orientation-circulation-card > div:first-child { display: grid; gap: 2px; }
.adj-orientation-circulation-card strong { font-size: 0.65rem; }
.adj-orientation-circulation-card span,
.adj-orientation-room-links em { color: var(--adj-muted); font-size: 0.58rem; font-style: normal; }
.adj-orientation-room-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
@container (max-width: 620px) {
  .adj-orientation-anchor-grid { grid-template-columns: 1fr; }
  .adj-orientation-circulation-card { grid-template-columns: 1fr; }
}

@media (max-width: 940px) {
  .adj-slim-title h2 {
    display: none;
  }

  .adj-slimbar {
    gap: 5px;
  }

  .adj-stage-tab {
    padding-inline: 6px;
  }

  .adj-slim-actions .btn-secondary {
    display: none;
  }
}

/* neighborhood gravity rendered as hairline ghosts under the authored web */
.adj-cg-ghost {
  stroke: color-mix(in srgb, var(--adj-ink) 30%, transparent);
  stroke-width: 0.45;
  opacity: 0.28;
}

.adj-rg-switch {
  display: flex;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--adj-line);
  border-radius: 9px;
}

.adj-resolved-lenses {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-bottom: 2px;
}

.adj-rg-intent {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--adj-gold) 32%, var(--adj-line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 92%, var(--adj-gold) 8%);
}

.adj-rg-intent .adj-parti-sketch {
  width: 44px;
  height: 31px;
  flex: 0 0 auto;
}

.adj-rg-intent div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.adj-rg-intent span,
.adj-rg-intent em {
  overflow: hidden;
  color: var(--adj-muted);
  font-size: 0.5rem;
  font-style: normal;
  letter-spacing: 0.05em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.adj-rg-intent strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.76rem;
  font-weight: 500;
}

.adj-rg-switch button {
  flex: 1;
  overflow: hidden;
  padding: 5px 4px;
  border: 0;
  border-right: 1px solid var(--adj-line);
  background: var(--surface);
  color: var(--adj-muted);
  font-size: 0.62rem;
  font-weight: 650;
  cursor: pointer;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: 130ms ease;
}

.adj-rg-switch button:last-child {
  border-right: 0;
}

.adj-rg-switch button.is-active {
  background: color-mix(in srgb, var(--adj-blue) 18%, var(--surface));
  color: var(--adj-ink);
}

.adj-rg-e {
  stroke-linecap: round;
  transition: opacity 160ms ease;
}

.adj-rg-e.is-direct {
  stroke: color-mix(in srgb, var(--adj-ink) 58%, var(--adj-gold));
  stroke-width: 1.5;
}

.adj-rg-e.is-route {
  stroke: color-mix(in srgb, var(--adj-blue) 80%, transparent);
  stroke-width: 1.1;
  stroke-dasharray: 5 4;
  animation: adjThreadFlow 30s linear infinite;
}

.adj-rg-e.is-unmet {
  stroke: #c4564a;
  stroke-width: 1.5;
  stroke-dasharray: 2.5 4;
  animation: adjThreadFlow 14s linear infinite;
}

.adj-rg-e.is-upper,
.adj-cg-n.is-upper circle {
  opacity: 0.38;
}

.adj-rg-unmet-count {
  color: #c4564a;
  font-style: normal;
  font-weight: 750;
}

.adj-rg-label {
  opacity: 0;
  fill: var(--adj-ink);
  stroke: var(--surface);
  stroke-width: 3px;
  paint-order: stroke;
  font-size: 8px;
  font-weight: 700;
  pointer-events: none;
  transition: opacity 100ms ease;
}

.adj-cg-n:hover .adj-rg-label {
  opacity: 1;
}

.adj-cg-legend .lg-direct::before {
  border-top-color: color-mix(in srgb, var(--adj-ink) 58%, var(--adj-gold));
}

.adj-cg-legend .lg-route::before {
  border-top-style: dashed;
  border-top-color: var(--adj-blue);
}

.adj-cg-legend .lg-unmet::before {
  border-top-style: dotted;
  border-top-color: #c4564a;
}

.adj-cg-head strong {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.98rem;
  font-weight: 500;
}

.adj-cg-head span {
  color: var(--adj-muted);
  font-size: 0.64rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.adj-cgraph {
  flex: 1;
  min-height: 0;
  width: 100%;
}

.adj-cg-e {
  stroke: color-mix(in srgb, var(--adj-ink) 52%, var(--adj-gold));
  stroke-linecap: round;
  transition: opacity 160ms ease;
  animation: adjThreadFlow 30s linear infinite;
}

.adj-cg-e.prov-user { stroke-dasharray: none; }
.adj-cg-e.prov-nl { stroke-dasharray: 7 4; }
.adj-cg-e.prov-va { stroke-dasharray: 1.5 4; }
.adj-cg-e.prov-starter { stroke-dasharray: 8 3 2 3; }

.adj-cg-e.is-repel {
  stroke: #c4685a;
  stroke-dasharray: 3 6;
}

@keyframes adjThreadFlow {
  to { stroke-dashoffset: -220; }
}

.adj-cg-anchorline {
  stroke: color-mix(in srgb, var(--adj-blue) 65%, transparent);
  stroke-width: 0.9;
  stroke-dasharray: 2 3;
  animation: adjThreadFlow 30s linear infinite;
}

.adj-cg-anchorline.is-repel {
  stroke: #c4685a;
}

.adj-cg-anchor rect {
  fill: color-mix(in srgb, var(--adj-blue) 30%, var(--surface));
  stroke: var(--adj-blue);
  stroke-width: 1;
}

.adj-cg-anchor text {
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  fill: var(--adj-blue);
}

.adj-cg-n {
  cursor: pointer;
}

.adj-cg-n circle {
  stroke: color-mix(in srgb, var(--adj-ink) 40%, transparent);
  stroke-width: 0.8;
  transition: opacity 160ms ease;
}

.adj-cg-n:hover circle {
  stroke: var(--adj-gold);
  stroke-width: 1.6;
}

.adj-cg-label {
  font-family: -apple-system, sans-serif;
  font-size: 6.5px;
  fill: color-mix(in srgb, var(--adj-ink) 72%, transparent);
}

.adj-cg-lvl {
  font-size: 7px;
  font-weight: 800;
  fill: #fff;
  pointer-events: none;
}

/* hover focus: untouched threads recede, the hovered room's web stays lit */
.adj-cgraph.has-focus [data-n].is-dim {
  opacity: 0.13;
}

.adj-cgraph.has-focus line[data-n].is-hot {
  stroke-width: 2.4 !important;
}

.adj-cg-empty {
  display: flex;
  flex: 1;
  align-items: center;
  padding: 0 14px;
  color: var(--adj-muted);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.85rem;
  font-style: italic;
  line-height: 1.6;
  text-align: center;
}

.adj-cg-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  color: var(--adj-muted);
  font-size: 0.6rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.adj-cg-legend span::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 0;
  margin-right: 4px;
  border-top: 2px solid color-mix(in srgb, var(--adj-ink) 55%, var(--adj-gold));
  vertical-align: 3px;
}

.adj-cg-legend .lg-nl::before { border-top-style: dashed; }
.adj-cg-legend .lg-va::before { border-top-style: dotted; }
.adj-cg-legend .lg-starter::before { border-top-style: double; border-top-width: 3px; }
.adj-cg-legend .lg-repel::before { border-top-style: dashed; border-top-color: #c4685a; }
.adj-cg-legend .lg-area::before {
  width: 13px;
  height: 7px;
  border: 1px solid color-mix(in srgb, var(--adj-gold) 58%, var(--adj-line));
  border-radius: 3px;
  background: color-mix(in srgb, var(--adj-gold) 10%, transparent);
  vertical-align: 0;
}

/* ── Stage 02 field rail: one altitude at a time ── */
.adj-field-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.adj-field-rail {
  display: flex;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--adj-line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
}

.adj-field-tab {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 13px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--adj-muted);
  text-align: left;
  cursor: pointer;
  transition: 140ms ease;
}

.adj-field-tab strong {
  font-size: 0.78rem;
  font-weight: 700;
}

.adj-field-tab span {
  font-size: 0.6rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.adj-field-tab:hover {
  color: var(--adj-ink);
}

.adj-field-tab.is-active {
  border-color: color-mix(in srgb, var(--adj-gold) 55%, var(--border));
  background: color-mix(in srgb, var(--surface) 88%, var(--adj-gold) 12%);
  color: var(--adj-ink);
}

.adj-field-panel {
  display: flex;
  flex: 1 1 0;
  min-height: 0;
  flex-direction: column;
}

.adj-field-panel > .adj-layer-card {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.adj-rooms-duo {
  display: grid;
  flex: 1;
  min-height: 0;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 12px;
}

.adj-rooms-duo > .adj-layer-card {
  min-height: 0;
  overflow: auto;
}

.adj-rooms-duo .adj-attr-list {
  max-height: none;
  flex: 1;
}

/* The site, drawn: diagram left, segmented pickers right */
.adj-site-panel {
  display: flex;
}

.adj-site-duo {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 18px;
}

.adj-site-diagram {
  width: 100%;
  max-height: 320px;
}

.adj-site-plot {
  fill: color-mix(in srgb, var(--adj-gold) 5%, transparent);
  stroke: color-mix(in srgb, var(--adj-ink) 35%, transparent);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}

.adj-site-mass {
  fill: color-mix(in srgb, var(--adj-blue) 22%, transparent);
  stroke: color-mix(in srgb, var(--adj-ink) 45%, transparent);
  stroke-width: 1.2;
}

.adj-site-mark {
  stroke: var(--adj-gold);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.adj-site-diagram text {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 8px;
  fill: color-mix(in srgb, var(--adj-ink) 80%, var(--adj-gold));
}

.adj-site-diagram text.is-north {
  font-weight: 700;
  fill: var(--adj-blue);
}

.adj-site-picks {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.adj-site-pick > span {
  display: block;
  margin-bottom: 5px;
  color: var(--adj-muted);
  font-size: 0.66rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.adj-seg {
  display: flex;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--adj-line);
  border-radius: 9px;
}

.adj-seg button {
  flex: 1;
  padding: 7px 0;
  border: 0;
  border-right: 1px solid var(--adj-line);
  background: var(--surface);
  color: var(--adj-muted);
  font-size: 0.72rem;
  cursor: pointer;
  transition: 130ms ease;
}

.adj-seg button:last-child {
  border-right: 0;
}

.adj-seg button:hover {
  color: var(--adj-ink);
}

.adj-seg button.is-active {
  background: color-mix(in srgb, var(--adj-gold) 22%, var(--surface));
  color: var(--adj-ink);
  font-weight: 700;
}

.adj-site-note {
  margin: 2px 0 0;
  color: var(--adj-muted);
  font-size: 0.72rem;
  line-height: 1.5;
}

/* ── Stage 03: the rule vocabulary ── */
.adj-vocab {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--adj-line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
}

.adj-vocab-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.adj-vocab-head strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.98rem;
  font-weight: 500;
}

.adj-vocab-head span {
  color: var(--adj-muted);
  font-size: 0.72rem;
}

.adj-vocab-name {
  margin-bottom: 4px;
  color: color-mix(in srgb, var(--adj-ink) 70%, var(--adj-gold));
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.adj-vocab-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.adj-vocab-chip {
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--adj-line) 80%, transparent);
  border-radius: 999px;
  background: var(--surface);
  color: var(--adj-ink);
  font-size: 0.72rem;
  font-style: italic;
  cursor: pointer;
  transition: 130ms ease;
}

.adj-vocab-chip:hover {
  border-color: color-mix(in srgb, var(--adj-gold) 60%, var(--border));
  background: color-mix(in srgb, var(--adj-gold) 10%, var(--surface));
  transform: translateY(-1px);
}

@media (max-width: 880px) {
  .adj-site-duo,
  .adj-rooms-duo {
    grid-template-columns: 1fr;
  }
}

/* ── Values mixer: one vocabulary for what matters ── */
.adj-values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 22px;
  margin-top: 6px;
}

.adj-value-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.9fr) minmax(0, 1.1fr) 34px;
  align-items: center;
  gap: 14px;
  padding: 12px 15px;
  border: 1px solid var(--adj-line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 97%, transparent);
  transition: border-color 150ms ease;
}

.adj-value-row.is-leading {
  border-color: color-mix(in srgb, var(--adj-gold) 55%, var(--border));
  background: color-mix(in srgb, var(--surface) 93%, var(--adj-gold) 7%);
}

.adj-value-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.adj-value-copy strong {
  font-size: 0.85rem;
  font-weight: 650;
}

.adj-value-copy span {
  color: var(--adj-muted);
  font-size: 0.68rem;
}

.adj-value-row input[type="range"] {
  width: 100%;
  accent-color: var(--adj-gold);
}

.adj-value-row output {
  color: color-mix(in srgb, var(--adj-ink) 80%, var(--adj-gold));
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.adj-values-read {
  margin: 4px 0 0;
  color: var(--adj-muted);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.95rem;
  font-style: italic;
}

/* ── Outcomes as typed aspiration assertions (target / accept / floor) ── */
.adj-stakeholder-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--adj-line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 94%, var(--adj-blue) 6%);
}

.adj-stakeholder-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.adj-stakeholder-copy strong {
  font-size: 0.78rem;
}

.adj-stakeholder-copy span {
  color: var(--adj-muted);
  font-size: 0.62rem;
  line-height: 1.35;
}

.adj-stakeholder-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.adj-stakeholder-buttons button {
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid var(--adj-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  color: var(--adj-muted);
  font-size: 0.62rem;
  font-weight: 650;
}

.adj-stakeholder-buttons button.is-active {
  border-color: color-mix(in srgb, var(--adj-gold) 52%, var(--adj-line));
  background: color-mix(in srgb, var(--surface) 88%, var(--adj-gold) 12%);
  color: color-mix(in srgb, var(--adj-ink) 84%, var(--adj-gold));
}

.adj-outcomes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 6px;
}

.adj-outcome-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--adj-line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 97%, transparent);
  transition: border-color 150ms ease;
}

.adj-outcome-card.is-leading {
  border-color: color-mix(in srgb, var(--adj-gold) 55%, var(--border));
  background: color-mix(in srgb, var(--surface) 93%, var(--adj-gold) 7%);
}

/* The head is the press-to-reveal threshold for the drawer below. */
.adj-outcome-head {
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.adj-outcome-aside {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.adj-outcome-chevron {
  color: var(--adj-muted);
  font-size: 0.7rem;
  line-height: 1;
  transition: transform 160ms ease, color 160ms ease;
}

.adj-outcome-card.is-open .adj-outcome-chevron {
  transform: rotate(180deg);
  color: color-mix(in srgb, var(--adj-ink) 70%, var(--adj-gold));
}

.adj-outcome-head:hover .adj-outcome-chevron {
  color: color-mix(in srgb, var(--adj-ink) 60%, var(--adj-gold));
}

/* The drawer — the poché where the aspiration's instruments live, revealed
   only on intent. Set apart from the brief face by a hairline and inset tone. */
.adj-outcome-drawer {
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--adj-line) 70%, transparent);
}

.adj-outcome-drawer[hidden] {
  display: none;
}

.adj-outcome-drawer {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Authored goals carry a faint inked margin — the designer's hand on the brief. */
.adj-outcome-card.is-authored {
  border-color: var(--adj-line);
}

/* "Built from": the measure vocabulary, grouped by family. */
.adj-measure-composer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.adj-measure-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.adj-measure-head span {
  font-size: 0.56rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--adj-muted);
}

.adj-measure-head em {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 0.7rem;
  color: color-mix(in srgb, var(--adj-ink) 70%, var(--adj-blue));
}

.adj-measure-fam {
  display: grid;
  grid-template-columns: 92px 1fr;
  align-items: start;
  gap: 8px;
}

.adj-measure-fam-label {
  padding-top: 4px;
  font-size: 0.58rem;
  line-height: 1.3;
  color: var(--adj-muted);
}

.adj-measure-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.adj-measure-chip {
  min-height: 24px;
  padding: 3px 9px;
  border: 1px solid var(--adj-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  color: var(--adj-muted);
  font-size: 0.62rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 130ms ease, background 130ms ease, color 130ms ease;
}

.adj-measure-chip:hover {
  border-color: color-mix(in srgb, var(--adj-blue) 40%, var(--adj-line));
}

.adj-measure-chip.is-on {
  border-color: color-mix(in srgb, var(--adj-blue) 55%, var(--adj-line));
  background: color-mix(in srgb, var(--surface) 84%, var(--adj-blue) 16%);
  color: color-mix(in srgb, var(--adj-ink) 86%, var(--adj-blue));
}

/* Gated: real lever, not yet analyzable for this project. Visible (palette stays
   rich) but not selectable — hover says what unlocks it. */
.adj-measure-chip.is-gated {
  border-style: dashed;
  background: transparent;
  color: color-mix(in srgb, var(--adj-muted) 70%, transparent);
  cursor: not-allowed;
}

/* Inactive: was selected, but its precondition is no longer met. Flagged so the
   number it would contribute is never silently assumed. Still removable. */
.adj-measure-chip.is-inactive {
  border-color: color-mix(in srgb, #c2614c 45%, var(--adj-line));
  border-style: dashed;
  color: color-mix(in srgb, var(--adj-ink) 55%, #c2614c);
  cursor: pointer;
}

/* Authored-goal controls: rename and remove, set apart at the drawer's foot. */
.adj-outcome-custom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px dashed color-mix(in srgb, var(--adj-line) 70%, transparent);
}

.adj-outcome-rename {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.adj-outcome-rename span {
  font-size: 0.56rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--adj-muted);
}

.adj-outcome-rename input {
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid var(--adj-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  color: var(--adj-ink);
  font-size: 0.78rem;
}

.adj-outcome-del {
  flex-shrink: 0;
  padding: 5px 11px;
  border: 1px solid color-mix(in srgb, #c2614c 40%, var(--adj-line));
  border-radius: 8px;
  background: transparent;
  color: color-mix(in srgb, var(--adj-ink) 60%, #c2614c);
  font-size: 0.64rem;
  font-weight: 650;
  cursor: pointer;
}

.adj-outcome-del:hover {
  background: color-mix(in srgb, var(--surface) 88%, #c2614c 12%);
}

/* The add-a-goal tile sits in the outcomes grid as an open, dashed invitation. */
.adj-outcome-add {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px dashed color-mix(in srgb, var(--adj-line) 85%, var(--adj-blue));
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 98%, transparent);
  cursor: pointer;
  text-align: left;
  transition: border-color 140ms ease, background 140ms ease;
}

.adj-outcome-add:hover {
  border-color: color-mix(in srgb, var(--adj-blue) 50%, var(--adj-line));
  background: color-mix(in srgb, var(--surface) 92%, var(--adj-blue) 8%);
}

.adj-outcome-add-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 80%, var(--adj-blue) 20%);
  color: color-mix(in srgb, var(--adj-ink) 78%, var(--adj-blue));
  font-size: 1.1rem;
  line-height: 1;
}

.adj-outcome-add-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.adj-outcome-add-copy strong {
  font-size: 0.85rem;
  font-weight: 650;
}

.adj-outcome-add-copy span {
  color: var(--adj-muted);
  font-size: 0.68rem;
}

.adj-outcome-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.adj-outcome-copy strong {
  font-size: 0.85rem;
  font-weight: 650;
}

.adj-outcome-copy span {
  color: var(--adj-muted);
  font-size: 0.68rem;
}

/* The aspiration track: a floor band, an accept band, and two markers for the
   acceptable limit and the ideal. Reads the whole aspiration at a glance. */
.adj-asp-track {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 60%, transparent);
  overflow: hidden;
}

.adj-asp-track i,
.adj-asp-track b {
  position: absolute;
  top: 0;
  height: 100%;
}

.adj-asp-floor {
  left: 0;
  background: repeating-linear-gradient(45deg,
    color-mix(in srgb, #c2614c 22%, transparent) 0 3px,
    transparent 3px 6px);
}

.adj-asp-accept {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--adj-blue) 32%, transparent),
    color-mix(in srgb, var(--adj-gold) 42%, transparent));
}

.adj-asp-track b {
  width: 2px;
  border-radius: 0;
}

.adj-asp-mark-accept {
  background: color-mix(in srgb, var(--adj-ink) 75%, var(--adj-gold));
}

.adj-asp-mark-target {
  background: color-mix(in srgb, var(--adj-blue) 70%, var(--adj-ink));
}

.adj-asp-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(96px, 1.2fr);
  gap: 8px;
}

.adj-asp-field,
.adj-asp-constituency {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  border: 1px solid var(--adj-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
}

.adj-asp-field span,
.adj-asp-constituency span {
  flex: 1;
  color: var(--adj-muted);
  font-size: 0.56rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.adj-asp-field input {
  width: 34px;
  border: 0;
  background: transparent;
  color: var(--adj-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.9rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.adj-asp-field input::-webkit-outer-spin-button,
.adj-asp-field input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.adj-asp-field i {
  color: var(--adj-muted);
  font-size: 0.62rem;
  font-style: normal;
}

.adj-asp-constituency select {
  min-width: 0;
  max-width: 86px;
  border: 0;
  background: transparent;
  color: var(--adj-ink);
  font-size: 0.68rem;
}

.adj-asp-read {
  margin: 0;
  color: var(--adj-muted);
  font-size: 0.66rem;
  line-height: 1.4;
}

.adj-asp-read strong {
  color: color-mix(in srgb, var(--adj-ink) 88%, transparent);
}

.adj-asp-read em {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  color: color-mix(in srgb, var(--adj-ink) 78%, var(--adj-gold));
}

@media (max-width: 860px) {
  .adj-outcomes {
    grid-template-columns: 1fr;
  }

  .adj-stakeholder-strip {
    align-items: flex-start;
    flex-direction: column;
  }

  .adj-stakeholder-buttons {
    justify-content: flex-start;
  }
}

/* Expanded Parti chooser retained for compatible secondary surfaces. */
.adj-parti-rail {
  display: grid;
  grid-template-columns: 76px repeat(6, minmax(0, 1fr));
  gap: 8px;
  flex: 0 0 auto;
}

.adj-parti-card {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid var(--adj-line);
  border-radius: 11px;
  background: color-mix(in srgb, var(--surface) 97%, transparent);
  color: var(--adj-ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.adj-parti-card:hover {
  border-color: color-mix(in srgb, var(--adj-gold) 50%, var(--border));
  transform: translateY(-1px);
}

.adj-parti-card.is-active {
  border-color: color-mix(in srgb, var(--adj-gold) 78%, var(--border));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--adj-gold) 24%, transparent);
  background: color-mix(in srgb, var(--surface) 91%, var(--adj-gold) 9%);
}

.adj-parti-card strong {
  font-size: 0.74rem;
  font-weight: 700;
}

.adj-parti-card span {
  display: -webkit-box;
  overflow: hidden;
  color: var(--adj-muted);
  font-size: 0.62rem;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.adj-parti-card small {
  color: color-mix(in srgb, var(--adj-muted) 78%, var(--adj-gold));
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.adj-parti-card em {
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.adj-parti-card.fit-good em { color: #5d8f6a; }
.adj-parti-card.fit-ok em { color: color-mix(in srgb, var(--adj-gold) 80%, var(--adj-ink)); }
.adj-parti-card.fit-low em { color: #b06a55; }

.adj-parti-auto {
  align-items: center;
  justify-content: center;
  text-align: center;
  border-style: dashed;
}

.adj-parti-auto strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.95rem;
  font-weight: 500;
}

.adj-parti-sketch {
  width: 44px;
  height: 32px;
  fill: none;
  stroke: color-mix(in srgb, var(--adj-ink) 62%, var(--adj-gold));
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.adj-parti-sketch .mark-field {
  fill: color-mix(in srgb, var(--adj-ink) 7%, transparent);
  stroke-width: 1.2;
}

.adj-parti-sketch .mark-dot {
  fill: color-mix(in srgb, var(--adj-gold) 48%, var(--surface));
  stroke-width: 1.6;
}

.adj-parti-sketch .mark-line.is-primary {
  stroke-width: 4;
}

.adj-parti-sketch .mark-line.is-loop {
  fill: none;
  stroke-width: 3.2;
}

.adj-parti-sketch .mark-court {
  fill: color-mix(in srgb, var(--adj-gold) 18%, transparent);
  stroke: color-mix(in srgb, var(--adj-gold) 72%, var(--adj-ink));
  stroke-dasharray: 3 3;
  stroke-width: 1.2;
}

.adj-parti-sketch .mark-hatch {
  stroke-width: 1;
}

.adj-parti-sketch .mark-hatch-line {
  stroke: color-mix(in srgb, var(--adj-ink) 48%, var(--adj-gold));
  stroke-width: 1.4;
}

.adj-parti-sketch .mark-edge {
  stroke: var(--adj-gold);
  stroke-width: 3.2;
}

.adj-parti-sketch .mark-threshold {
  stroke: var(--adj-blue);
  stroke-width: 5;
}

.adj-parti-sketch .mark-arrow {
  stroke: var(--adj-blue);
  stroke-width: 2.4;
}

.adj-parti-sketch .mark-arrowhead {
  fill: var(--adj-blue);
  stroke: none;
}

.adj-parti-card.is-active .adj-parti-sketch {
  stroke: color-mix(in srgb, var(--adj-gold) 85%, var(--adj-ink));
}

.adj-option-parti {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.adj-option-parti .adj-parti-sketch {
  width: 52px;
  height: 38px;
}

.adj-parti-grammar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 7px;
}

.adj-parti-grammar span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border: 1px solid color-mix(in srgb, var(--adj-line) 78%, transparent);
  border-radius: 999px;
  color: var(--adj-muted);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.adj-parti-grammar i {
  width: 9px;
  height: 5px;
  border-top: 1.5px solid currentColor;
}

.adj-parti-grammar .is-dot i {
  width: 5px;
  height: 5px;
  border: 0;
  border-radius: 50%;
  background: currentColor;
}

.adj-parti-grammar .is-field i,
.adj-parti-grammar .is-court i,
.adj-parti-grammar .is-hatch i {
  height: 6px;
  border: 1px solid currentColor;
  border-radius: 1px;
  background: color-mix(in srgb, currentColor 9%, transparent);
}

.adj-parti-grammar .is-court i {
  border-style: dashed;
}

.adj-parti-grammar .is-hatch i {
  background: repeating-linear-gradient(45deg, transparent 0 2px, currentColor 2px 3px);
  opacity: 0.55;
}

.adj-parti-grammar .is-arrow i {
  border-right: 3px solid currentColor;
  transform: skewX(28deg);
}

.adj-parti-grammar .is-threshold i {
  height: 8px;
  border-top: 0;
  border-left: 3px solid var(--adj-blue);
}

.adj-direction-role {
  color: var(--adj-muted);
  font-size: 0.6rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.adj-direction-role.is-lead {
  color: color-mix(in srgb, var(--adj-ink) 80%, var(--adj-gold));
}

/* ── Stage 4 option card: tags row, archive-status badge, structured readout ── */
.adj-option-tags {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.adj-option-parti {
  justify-content: center;
}

.adj-option-badge {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: help;
}

.adj-option-badge.is-pick {
  background: color-mix(in srgb, var(--adj-gold) 22%, transparent);
  color: color-mix(in srgb, var(--adj-ink) 80%, var(--adj-gold));
}

.adj-option-badge.is-frontier {
  background: color-mix(in srgb, var(--adj-blue) 16%, transparent);
  color: color-mix(in srgb, var(--adj-ink) 72%, var(--adj-blue));
}

.adj-option-badge.is-dominated {
  border: 1px solid var(--adj-line);
  color: var(--adj-muted);
}

.adj-option-card.is-frontier:not(.is-recommended) {
  border-color: color-mix(in srgb, var(--adj-blue) 40%, var(--border));
}

.adj-study-readout {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-top: 13px;
}

.adj-readout-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--adj-line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
}

/* Status reads through a subtle full tint + a small dot on the label — not a side
   stripe — matching the rest of the applet's quiet, paper-like graphic language. */
.adj-readout-status.has-failures {
  border-color: rgba(190, 94, 72, 0.36);
  background: rgba(190, 94, 72, 0.06);
}

.adj-readout-status.has-remainder {
  border-color: color-mix(in srgb, var(--adj-gold) 42%, var(--adj-line));
  background: color-mix(in srgb, var(--surface) 92%, var(--adj-gold) 8%);
}

.adj-readout-status.has-passed {
  border-color: rgba(95, 145, 111, 0.3);
  background: rgba(95, 145, 111, 0.06);
}

.adj-readout-status-main {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.adj-readout-status-main strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
}

.adj-readout-status-main strong::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--adj-muted);
  content: "";
}

.adj-readout-status.has-failures .adj-readout-status-main strong::before {
  background: #c2614c;
}

.adj-readout-status.has-remainder .adj-readout-status-main strong::before {
  background: color-mix(in srgb, var(--adj-gold) 78%, var(--adj-ink));
}

.adj-readout-status.has-passed .adj-readout-status-main strong::before {
  background: #5f916f;
}

.adj-readout-status-main span {
  color: var(--adj-muted);
  font-size: 0.58rem;
  line-height: 1.4;
}

.adj-readout-status .adj-fit-value {
  width: 50px;
  height: 50px;
  margin: 0;
}

.adj-readout-problems {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.adj-readout-problems span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 600;
}

.adj-readout-problems b {
  font-size: 0.7rem;
  font-weight: 800;
}

.adj-readout-problems .is-bad {
  background: rgba(190, 94, 72, 0.12);
  color: #b15640;
}

.adj-readout-problems .is-warn {
  background: color-mix(in srgb, var(--adj-gold) 16%, transparent);
  color: color-mix(in srgb, var(--adj-ink) 70%, var(--adj-gold));
}

.adj-readout-problems .is-muted {
  background: color-mix(in srgb, var(--border) 40%, transparent);
  color: var(--adj-muted);
}

.adj-readout-problems .is-good {
  background: rgba(95, 145, 111, 0.13);
  color: #527e62;
}

.adj-companion-readout {
  display: grid;
  gap: 8px;
  padding: 10px 11px;
  border: 1px solid color-mix(in srgb, var(--adj-blue) 30%, var(--adj-line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 94%, var(--adj-blue) 6%);
}

.adj-companion-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 9px;
}

.adj-companion-head strong,
.adj-provocateur strong {
  color: var(--adj-ink);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.adj-companion-head span {
  color: var(--adj-muted);
  font-size: 0.58rem;
}

.adj-companion-readout ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 15px;
  color: color-mix(in srgb, var(--adj-ink) 78%, transparent);
  font-size: 0.64rem;
  line-height: 1.35;
}

.adj-provocateur {
  display: grid;
  gap: 5px;
  padding-top: 7px;
  border-top: 1px dashed color-mix(in srgb, var(--adj-line) 80%, transparent);
}

.adj-fit-families {
  display: grid;
  gap: 7px;
}

.adj-fit-detail {
  margin-top: 1px;
}

.adj-fit-detail > summary {
  color: var(--adj-muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

.adj-fit-detail > summary::-webkit-details-marker {
  display: none;
}

.adj-fit-detail > summary::before {
  content: "▸ ";
}

.adj-fit-detail[open] > summary::before {
  content: "▾ ";
}

.adj-fit-detail .adj-scorecard {
  margin-top: 8px;
}

/* ── Attribute fabric: visible, correctable room intelligence ── */
.adj-attr-card .adj-attr-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px 4px;
}

.adj-attr-tools input[type="search"] {
  flex: 1;
  max-width: 250px;
  padding: 6px 10px;
  border: 1px solid var(--adj-line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--adj-ink);
  font-size: 0.8rem;
}

.adj-attr-legend {
  display: flex;
  gap: 10px;
  color: var(--adj-muted);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.adj-attr-legend span::before {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-radius: 3px;
  vertical-align: -1px;
}

.adj-attr-legend .is-inferred::before {
  border: 1px solid color-mix(in srgb, var(--adj-gold) 70%, transparent);
}

.adj-attr-legend .is-forced-on::before {
  background: var(--adj-gold);
}

.adj-attr-legend .is-forced-off::before {
  background: #b06a55;
}

.adj-attr-list {
  display: flex;
  max-height: 280px;
  flex-direction: column;
  overflow: auto;
  padding: 4px 14px 12px;
}

.adj-attr-row {
  display: grid;
  grid-template-columns: minmax(160px, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--adj-line) 55%, transparent);
}

.adj-attr-room {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.adj-attr-room strong {
  overflow: hidden;
  font-size: 0.78rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adj-attr-room span {
  color: var(--adj-muted);
  font-size: 0.64rem;
}

.adj-attr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.adj-attr-chip {
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--adj-line) 70%, transparent);
  border-radius: 999px;
  background: transparent;
  color: color-mix(in srgb, var(--adj-muted) 55%, transparent);
  font-size: 0.62rem;
  font-weight: 650;
  cursor: pointer;
  transition: 120ms ease;
}

.adj-attr-chip.is-inferred {
  border-color: color-mix(in srgb, var(--adj-gold) 65%, transparent);
  color: color-mix(in srgb, var(--adj-ink) 78%, var(--adj-gold));
}

.adj-attr-chip.is-forced-on {
  border-color: var(--adj-gold);
  background: color-mix(in srgb, var(--adj-gold) 24%, transparent);
  color: var(--adj-ink);
}

.adj-attr-chip.is-forced-off {
  border-color: color-mix(in srgb, #b06a55 60%, transparent);
  color: #b06a55;
  text-decoration: line-through;
}

.adj-derived-mode {
  display: flex;
  flex-direction: column;
  padding: 6px 0 0;
  font-size: 0.8rem;
  font-weight: 650;
}

.adj-derived-mode em {
  color: var(--adj-muted);
  font-size: 0.62rem;
  font-style: normal;
}

@media (max-width: 980px) {
  .adj-values {
    grid-template-columns: 1fr;
  }

  .adj-parti-rail {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .adj-stage-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .adj-pane-rules {
    grid-template-columns: 1fr;
    overflow: auto;
  }

  .adj-pane-field .adj-layer-grid {
    grid-template-rows: none;
    overflow: auto;
  }

  .adj-topbar-lede {
    display: none;
  }
}

/* ── Adjacency Brief · the drafting table ────────────────────────────
   The node graph is the permanent center of the window. Inputs to its
   equation (parti / rules / goals / building / program) open one at a
   time as a drawer on the left; the layout panel rides in tandem on
   the right, assembling true-size blocks; the studies shelf runs along
   the bottom. Drawer + layout-tab state ride as data attributes on
   .adj-table. */

.adj-table-main {
  display: flex;
  flex: 1 1 0;
  min-height: 0;
  gap: 10px;
}

/* The graph module writes an inline flex-basis at mount (its old docked-
   panel habit); the graph owns the center now, so win with !important. */
.adj-table .adj-graph-panel {
  flex: 1 1 auto !important;
  min-width: 232px;
  max-width: none;
}

/* — the input drawer — */
.adj-input-drawer {
  display: flex;
  flex: 0 0 470px;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--adj-gold) 26%, var(--adj-line));
  border-radius: 13px;
  background: color-mix(in srgb, var(--surface) 97%, transparent);
}

.adj-table[data-input="none"] .adj-input-drawer {
  display: none;
}

/* Drawing deserves room: the parti drawer opens wider than the form-like
   inputs, and any drawer can spread over the whole table. */
.adj-table[data-input="parti"] .adj-input-drawer {
  flex-basis: 604px;
}

.adj-table[data-drawer="max"]:not([data-input="none"]) .adj-input-drawer {
  position: absolute;
  z-index: 34;
  inset: 48px 8px 58px;
  width: auto;
  flex: none;
  border-color: color-mix(in srgb, var(--adj-gold) 44%, var(--adj-line));
  box-shadow: 0 26px 80px color-mix(in srgb, #000 38%, transparent);
}

/* Spread parti recovers the original three-paper composition: tool rail,
   the sheet at full width, the reading beside it. */
.adj-table[data-drawer="max"] .adj-parti--drawer {
  display: grid;
  grid-template-columns: 158px minmax(0, 1fr) 280px;
  align-items: start;
}

.adj-table[data-drawer="max"] .adj-parti--drawer .adj-parti__tools {
  flex-direction: column;
  align-items: stretch;
}

.adj-table[data-drawer="max"] .adj-parti--drawer .adj-parti-svg {
  max-width: 1080px;
  margin: 0 auto;
}

.adj-drawer-head {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding: 9px 10px 8px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--adj-line) 72%, transparent);
}

.adj-drawer-copy {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1px;
}

.adj-drawer-copy strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.92rem;
  font-weight: 500;
}

.adj-drawer-copy span {
  overflow: hidden;
  color: var(--adj-muted);
  font-size: 0.66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adj-drawer-close,
.adj-drawer-expand {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: 1px solid var(--adj-line);
  border-radius: 7px;
  background: transparent;
  color: var(--adj-muted);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
}

.adj-drawer-close:hover,
.adj-drawer-expand:hover {
  border-color: color-mix(in srgb, var(--adj-gold) 42%, var(--adj-line));
  color: var(--adj-ink);
}

.adj-drawer-expand {
  font-size: 0.78rem;
}

.adj-drawer-expand.is-on {
  border-color: color-mix(in srgb, var(--adj-gold) 46%, var(--adj-line));
  background: color-mix(in srgb, var(--adj-gold) 12%, transparent);
  color: var(--adj-ink);
}

.adj-drawer-scroll {
  display: flex;
  flex: 1 1 0;
  min-height: 0;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding: 10px;
}

/* Drawer-width overrides: goal cards and program layers stack single-file. */
.adj-drawer-scroll .adj-outcomes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}

.adj-drawer-scroll .adj-stakeholder-strip {
  flex-wrap: wrap;
  gap: 6px;
}

.adj-drawer-scroll .adj-attr-list {
  max-height: 320px;
  overflow-y: auto;
}

.adj-drawer-scroll .adj-layer-card {
  min-width: 0;
}

.adj-drawer-scroll .adj-rule-card {
  padding: 8px 9px;
}

.adj-drawer-scroll .adj-rule-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.adj-drawer-scroll .adj-rule-controls,
.adj-drawer-scroll .adj-composer {
  flex-wrap: wrap;
}

/* The ledger group inside the rules drawer. */
.adj-ledger {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.adj-drawer-scroll .adj-ledger-head {
  flex-wrap: wrap;
  gap: 6px;
}

/* Authoring-aid drawers inside the rules input, folded until wanted. */
.adj-reading-sec {
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--adj-line) 82%, transparent);
  border-radius: 10px;
}

.adj-rail-chevron {
  flex: 0 0 auto;
  color: var(--adj-muted);
  font-size: 0.7rem;
  font-style: normal;
  transition: transform 140ms ease;
}

.adj-reading-sec.is-open .adj-rail-chevron {
  transform: rotate(180deg);
}

.adj-reading-sec-head {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: var(--adj-ink);
  cursor: pointer;
  text-align: left;
}

.adj-reading-sec-head:hover {
  background: color-mix(in srgb, var(--adj-gold) 7%, transparent);
}

.adj-reading-sec-head strong {
  flex: 0 0 auto;
  font-size: 0.7rem;
  font-weight: 680;
}

.adj-reading-sec-head span {
  overflow: hidden;
  flex: 1 1 auto;
  color: var(--adj-muted);
  font-size: 0.64rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adj-reading-sec-body {
  padding: 4px 10px 10px;
  border-top: 1px solid color-mix(in srgb, var(--adj-line) 62%, transparent);
}

.adj-reading-sec-body .adj-pattern-grid {
  grid-template-columns: 1fr;
}

.adj-reading-sec-body .adj-vocab-chips {
  max-height: 200px;
  overflow-y: auto;
}

/* — the layout panel — */
.adj-layout-panel {
  display: flex;
  flex: 0 0 396px;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--adj-blue) 30%, var(--adj-line));
  border-radius: 13px;
  background: color-mix(in srgb, var(--surface) 97%, transparent);
}

.adj-layout-head {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px 8px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--adj-line) 72%, transparent);
}

.adj-layout-title {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}

.adj-layout-title strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.92rem;
  font-weight: 500;
}

.adj-layout-title span {
  overflow: hidden;
  color: var(--adj-muted);
  font-size: 0.64rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adj-laytab-rail {
  display: flex;
  flex: 0 0 auto;
  gap: 0;
  padding: 2px;
  border: 1px solid var(--adj-line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
}

.adj-laytab-rail button {
  min-width: 27px;
  height: 25px;
  padding: 0 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--adj-muted);
  font-size: 0.64rem;
  font-weight: 700;
  cursor: pointer;
}

.adj-laytab-rail button:hover,
.adj-laytab-rail button.is-active {
  background: color-mix(in srgb, var(--adj-blue) 16%, var(--surface));
  color: var(--adj-ink);
}

.adj-layout-body {
  display: flex;
  flex: 1 1 0;
  min-height: 0;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding: 10px;
}

/* Studies inside the layout panel stack single-file. */
.adj-layout-body .adj-option-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.adj-layout-body .adj-parti-rail {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.adj-layout-body .adj-directions-head .adj-stage-note {
  max-width: none;
}

/* Assembly — true-size blocks as the readout. */
.adj-assembly {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.adj-assembly-head {
  display: flex;
  align-items: center;
  gap: 7px;
}

.adj-assembly-head strong {
  overflow: hidden;
  flex: 1 1 auto;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.88rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adj-assembly-fit {
  flex: 0 0 auto;
  color: var(--adj-muted);
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
}

.adj-assembly-live {
  flex: 0 0 auto;
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--adj-blue) 16%, transparent);
  color: color-mix(in srgb, var(--adj-blue) 80%, var(--adj-ink));
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.adj-assembly-svg {
  width: 100%;
  height: auto;
  border: 1px solid color-mix(in srgb, var(--adj-line) 82%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}

.adj-assembly-note {
  margin: 0;
  color: var(--adj-muted);
  font-size: 0.68rem;
  line-height: 1.45;
}

.adj-assembly-empty {
  padding: 18px 8px;
  text-align: center;
}

.adj-assembly-empty p {
  margin: 0 0 10px;
  color: var(--adj-muted);
  font-size: 0.72rem;
  line-height: 1.5;
}

/* — the graph tune panel — one floating card over the canvas, in the
   spirit of Obsidian's graph settings: Filters / Display / Forces as
   quiet folds, sliders that act live, nothing permanent on screen. */
.adj-graph-settings {
  position: absolute;
  z-index: 24;
  top: 46px;
  right: 10px;
  display: flex;
  width: 232px;
  max-height: calc(100% - 96px);
  flex-direction: column;
  overflow-y: auto;
  border: 1px solid color-mix(in srgb, var(--adj-gold) 34%, var(--adj-line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: 0 18px 48px color-mix(in srgb, #000 26%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.adj-gs-sec {
  border-bottom: 1px solid color-mix(in srgb, var(--adj-line) 62%, transparent);
}

.adj-gs-sec:last-child {
  border-bottom: 0;
}

.adj-gs-head {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 8px 11px;
  border: 0;
  background: transparent;
  color: var(--adj-muted);
  cursor: pointer;
  text-align: left;
}

.adj-gs-head:hover {
  color: var(--adj-ink);
}

.adj-gs-head strong {
  font-size: 0.58rem;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.adj-gs-head i {
  font-size: 0.62rem;
  font-style: normal;
  transition: transform 140ms ease;
}

.adj-gs-sec.is-open .adj-gs-head {
  color: var(--adj-ink);
}

.adj-gs-sec.is-open .adj-gs-head i {
  transform: rotate(180deg);
}

.adj-gs-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 1px 11px 11px;
}

/* The scope helper is deliberately quieter than the controls it explains. */
.adj-gs-note {
  display: block;
  margin: 1px 0 2px;
  color: var(--adj-muted);
  font-size: 0.62rem;
  font-weight: 560;
  line-height: 1.38;
}

.adj-gs-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.adj-gs-row > span {
  width: 44px;
  flex: 0 0 44px;
  color: var(--adj-muted);
  font-size: 0.55rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.adj-graph-selectionbar,
.adj-block-selection-tools {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--adj-g-anchor) 38%, var(--adj-line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  box-shadow: 0 5px 18px color-mix(in srgb, #000 9%, transparent);
  backdrop-filter: blur(10px);
}

.adj-selection-chip {
  display: inline-flex;
  height: 24px;
  flex: 0 0 auto;
  align-items: center;
  padding: 0 7px;
  border: 1px solid var(--adj-line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--adj-ink);
  font-size: .52rem;
  font-weight: 760;
  white-space: nowrap;
}

.adj-selection-more { position: relative; flex: 0 0 auto; }
.adj-selection-more > summary {
  display: flex;
  height: 24px;
  align-items: center;
  padding: 0 7px;
  border: 1px solid var(--adj-line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--adj-muted);
  font-size: .51rem;
  font-weight: 720;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}
.adj-selection-more > summary::-webkit-details-marker { display: none; }
.adj-selection-more-menu {
  position: absolute;
  z-index: 20;
  display: grid;
  width: 210px;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 7px;
  border: 1px solid var(--adj-line);
  border-radius: 7px;
  background: var(--surface);
  box-shadow: 0 10px 24px color-mix(in srgb, #000 18%, transparent);
}
.adj-graph-selectionbar .adj-selection-more-menu { bottom: 31px; left: 0; }
.adj-block-selection-tools .adj-selection-more-menu,
.adj-ledger-selection .adj-selection-more-menu { top: 29px; right: 0; }
.adj-selection-more-menu label { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.adj-selection-more-menu label span { color: var(--adj-muted); font-size: .43rem; font-weight: 750; letter-spacing: .045em; text-transform: uppercase; }
.adj-selection-more-menu select,
.adj-selection-more-menu button {
  min-width: 0;
  height: 26px;
  border: 1px solid var(--adj-line);
  border-radius: 4px;
  background: var(--bg-card);
  color: var(--adj-ink);
  padding: 0 5px;
  font-size: .5rem;
}
.adj-selection-more-menu > button { grid-column: 1 / -1; font-weight: 750; cursor: pointer; }

.adj-block-selection-tools {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.adj-selection-count {
  display: flex;
  flex: 0 0 auto;
  align-items: baseline;
  gap: 4px;
  padding: 0 3px;
}

.adj-selection-count strong { color: var(--adj-ink); font-size: 0.72rem; }
.adj-selection-count span,
.adj-block-selection-tools > span,
.adj-selection-hint { color: var(--adj-muted); font-size: 0.55rem; }
.adj-selection-hint { flex: 1 1 110px; line-height: 1.25; }

.adj-selection-relations,
.adj-selection-actions {
  display: flex;
  min-width: 0;
  flex: 0 1 auto;
  gap: 3px;
}

.adj-selection-actions { margin-left: auto; }

.adj-selection-relations button,
.adj-selection-actions button,
.adj-block-selection-tools button {
  height: 24px;
  padding: 0 6px;
  border: 1px solid var(--adj-line);
  border-radius: 6px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--adj-muted);
  font-size: 0.54rem;
  font-weight: 720;
  cursor: pointer;
}

.adj-selection-relations button:hover,
.adj-selection-actions button:hover,
.adj-block-selection-tools button:hover {
  border-color: color-mix(in srgb, var(--adj-gold) 48%, var(--adj-line));
  color: var(--adj-ink);
}

.adj-selection-relations .tone-red { color: #b75c52; }
.adj-selection-relations .tone-green { color: color-mix(in srgb, #278e77 82%, var(--adj-ink)); }
.adj-selection-actions .is-route,
.adj-selection-relations .is-route { color: color-mix(in srgb, #3d9ca3 82%, var(--adj-ink)); }
.adj-selection-actions .is-workset { color: var(--adj-g-anchor); }

.adj-selection-relations button:has(.adj-rule-thread) {
  width: 58px;
  height: 34px;
  padding: 2px 5px;
}

.adj-selection-relations button .adj-rule-thread { width: 100%; min-width: 0; }
.adj-selection-relations button .adj-rule-thread em { font-size: 0.41rem; letter-spacing: 0.04em; }

.adj-graph-selectionbar,
.adj-ledger-selection {
  position: relative;
  display: block;
  width: max-content;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.adj-selection-dock > .adj-selection-trigger {
  display: flex;
  height: 27px;
  box-sizing: border-box;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}

.adj-selection-dock > .adj-selection-trigger strong { font-size: 0.56rem; }
.adj-selection-dock > .adj-selection-trigger span { color: var(--text-secondary); font-size: 0.48rem; }
.adj-selection-dock > .adj-selection-trigger i { color: var(--text-secondary); font-size: 0.58rem; font-style: normal; transition: transform 140ms ease; }
.adj-selection-dock.is-open > .adj-selection-trigger i { transform: rotate(180deg); }

/* Release is always one hit away. It is positioned over the floating pill,
   never added to a toolbar or the Block Plan layout flow. */
.adj-selection-clear {
  position: absolute;
  z-index: 1;
  top: -5px;
  right: -10px;
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--adj-muted);
  font-size: .7rem;
  line-height: 1;
  cursor: pointer;
}
.adj-selection-clear:hover { border-color: var(--text); color: var(--text); }

.adj-graph-selection-popover,
.adj-ledger-selection-popover {
  position: absolute;
  z-index: 30;
  display: flex;
  width: max-content;
  max-width: min(430px, calc(100vw - 48px));
  box-sizing: border-box;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 120ms ease, transform 150ms cubic-bezier(.2,.8,.2,1), visibility 0s linear 150ms;
}

.adj-graph-selection-popover { bottom: 32px; left: 0; transform: translateY(5px) scale(.985); transform-origin: bottom left; }
.adj-ledger-selection-popover { top: 32px; right: 0; transform: translateY(-5px) scale(.985); transform-origin: top right; }
.adj-selection-dock.is-open > .adj-graph-selection-popover,
.adj-selection-dock.is-open > .adj-ledger-selection-popover { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); transition-delay: 0s; }
.adj-graph-selection-popover .adj-selection-actions,
.adj-ledger-selection-popover .adj-selection-actions { margin-left: 0; }
.adj-ledger-selection-popover > button {
  height: 24px;
  padding: 0 7px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 0.51rem;
  font-weight: 720;
  cursor: pointer;
}

.adj-selection-depth {
  display: flex;
  align-items: center;
  gap: 3px;
  padding-right: 6px;
  border-right: 1px solid var(--border);
}
.adj-selection-depth > span,
.adj-matrix-axis-hint { color: var(--text-secondary); font-size: 0.49rem; }
.adj-selection-depth button {
  height: 24px;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.5rem;
  cursor: pointer;
}
.adj-selection-depth button.is-active { background: var(--text); color: var(--bg); }
.adj-matrix-axis-hint { max-width: 230px; line-height: 1.3; }

/* The graph has one visual vocabulary: connections are concise properties,
   not a second toolbar. Give their names just enough measure to stay readable
   beside the segmented controls. */
.adj-gs-connection-row > span {
  width: 40px;
  flex-basis: 40px;
  letter-spacing: 0.06em;
}

.adj-gs-connection-row .adj-graph-lens-buttons button {
  font-size: 0.51rem;
  letter-spacing: 0.01em;
}

.adj-gs-row select {
  min-width: 0;
  flex: 1;
  height: 24px;
  padding: 0 6px;
  border: 1px solid var(--adj-line);
  border-radius: 6px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--adj-ink);
  font-size: 0.62rem;
}

.adj-gs-filter-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}

.adj-gs-filter-grid label {
  display: grid;
  min-width: 0;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
}

.adj-gs-filter-label {
  color: var(--adj-muted);
  font-family: inherit;
  font-size: 0.55rem !important;
  font-weight: 750;
  line-height: 1;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.adj-gs-select-wrap {
  position: relative;
  display: block;
  min-width: 0;
  border-radius: 7px;
}

.adj-gs-select-wrap > i {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--adj-muted);
  border-bottom: 1.5px solid var(--adj-muted);
  pointer-events: none;
  transform: translateY(-68%) rotate(45deg);
  transition: border-color 140ms ease, transform 140ms ease;
}

.adj-gs-filter-grid select {
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  width: 100%;
  height: 29px;
  padding: 0 28px 0 9px;
  border: 1px solid var(--adj-line);
  border-radius: 7px;
  outline: none;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  color: var(--adj-ink);
  font-family: inherit;
  font-size: 0.61rem !important;
  font-weight: 650;
  line-height: 29px;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.adj-gs-select-wrap:hover select {
  border-color: color-mix(in srgb, var(--adj-gold) 42%, var(--adj-line));
  background: color-mix(in srgb, var(--surface) 94%, transparent);
}

.adj-gs-select-wrap:focus-within select {
  border-color: color-mix(in srgb, var(--adj-gold) 70%, var(--adj-line));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--adj-gold) 13%, transparent);
}

.adj-gs-select-wrap:focus-within > i {
  border-color: var(--adj-ink);
  transform: translateY(-34%) rotate(225deg);
}

.adj-gs-display-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  padding: 1px 0 2px;
}

.adj-gs-display-toggle {
  display: grid;
  min-width: 0;
  grid-template-columns: 16px minmax(0, 1fr);
  grid-template-rows: 15px 12px;
  column-gap: 5px;
  align-items: center;
  min-height: 40px;
  padding: 5px 6px;
  border: 1px solid var(--adj-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  color: var(--adj-muted);
  cursor: pointer;
  text-align: left;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.adj-gs-display-toggle:hover {
  border-color: color-mix(in srgb, var(--adj-gold) 42%, var(--adj-line));
  color: var(--adj-ink);
}

.adj-gs-display-toggle > i {
  position: relative;
  grid-row: 1 / span 2;
  width: 16px;
  height: 14px;
  color: currentColor;
}

.adj-gs-display-toggle > span {
  overflow: hidden;
  font-size: 0.57rem;
  font-weight: 750;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adj-gs-display-toggle > b {
  color: var(--adj-muted);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.adj-gs-display-toggle.is-on {
  border-color: color-mix(in srgb, var(--adj-gold) 52%, var(--adj-line));
  background: color-mix(in srgb, var(--adj-gold) 10%, var(--surface));
  color: var(--adj-ink);
}

.adj-gs-display-toggle.is-on > b { color: var(--adj-gold); }

.adj-gs-display-toggle[data-display="areas"] > i {
  border: 1px solid currentColor;
  border-radius: 4px;
}

.adj-gs-display-toggle[data-display="areas"] > i::after {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid currentColor;
  border-radius: 2px;
  opacity: 0.56;
}

.adj-gs-display-toggle[data-display="arrows"] > i::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 0;
  width: 13px;
  border-top: 1.5px solid currentColor;
}

.adj-gs-display-toggle[data-display="arrows"] > i::after {
  content: '';
  position: absolute;
  top: 3px;
  right: 0;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.adj-gs-display-toggle[data-display="minimap"] > i {
  border: 1px solid currentColor;
  background: linear-gradient(90deg, transparent 45%, currentColor 46% 54%, transparent 55%),
    linear-gradient(transparent 45%, currentColor 46% 54%, transparent 55%);
  opacity: 0.9;
}

.adj-gs-display-toggle[data-display="pegs"] > i::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 13px;
  border-top: 1.5px solid currentColor;
}

.adj-gs-display-toggle[data-display="pegs"] > i::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 10px;
  border-bottom: 1.5px solid currentColor;
  border-radius: 0 0 50% 50%;
}

.adj-gs-relationship-buttons button {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0 2px;
}

.adj-gs-relationship-buttons button > i {
  width: 9px;
  flex: 0 0 auto;
  border-top: 1.5px solid currentColor;
  opacity: 0.8;
}

.adj-gs-relationship-buttons button[data-relationship="near"] > i { border-top-style: dashed; }
.adj-gs-relationship-buttons button[data-relationship="convenient"] > i { border-top-style: dotted; }
.adj-gs-relationship-buttons button[data-relationship="separate"] > i { border-top-style: dashed; border-top-color: #c4685a; }
.adj-gs-relationship-buttons button > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.adj-gs-slider {
  display: flex;
  align-items: center;
  gap: 6px;
}

.adj-gs-slider > span {
  width: 74px;
  flex: 0 0 74px;
  color: var(--adj-muted);
  font-size: 0.6rem;
}

.adj-gs-slider input[type="range"] {
  min-width: 0;
  flex: 1;
  height: 18px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}

.adj-gs-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--adj-line) 92%, transparent);
}

.adj-gs-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 11px;
  height: 11px;
  margin-top: -4px;
  border: 1px solid color-mix(in srgb, var(--adj-gold) 70%, var(--adj-line));
  border-radius: 50%;
  background: color-mix(in srgb, var(--adj-gold) 30%, var(--surface));
  box-shadow: 0 1px 3px color-mix(in srgb, #000 30%, transparent);
  transition: transform 120ms ease;
}

.adj-gs-slider input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.adj-gs-slider input[type="range"]::-moz-range-track {
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--adj-line) 92%, transparent);
}

.adj-gs-slider input[type="range"]::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border: 1px solid color-mix(in srgb, var(--adj-gold) 70%, var(--adj-line));
  border-radius: 50%;
  background: color-mix(in srgb, var(--adj-gold) 30%, var(--surface));
}

.adj-gs-actions {
  display: flex;
  gap: 6px;
  padding-top: 3px;
}

.adj-gs-quality {
  color: var(--adj-muted);
  font-size: 0.56rem;
  font-variant-numeric: tabular-nums;
}

/* — input tab statuses — the tabs answer "what's in there" at a glance */
.adj-tab-status {
  overflow: hidden;
  max-width: 128px;
  color: var(--adj-muted);
  font-size: 0.58rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adj-stage-tab.is-active .adj-tab-status {
  color: color-mix(in srgb, var(--adj-ink) 62%, var(--adj-muted));
}

/* — the first move, centered on the empty graph — */
.adj-graph-empty {
  position: absolute;
  z-index: 12;
  bottom: 10px;
  left: 10px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 0;
  pointer-events: none;
}

.adj-graph-empty[hidden] {
  display: none;
}

.adj-ge-empty {
  display: flex;
  max-width: min(310px, calc(100vw - 42px));
  align-items: baseline;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--adj-line) 86%, transparent);
  border-radius: 5px;
  background: color-mix(in srgb, var(--surface) 91%, transparent);
  box-shadow: 0 4px 14px color-mix(in srgb, #000 12%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: auto;
  color: var(--adj-muted);
}

.adj-ge-empty strong { flex: 0 0 auto; color: var(--adj-ink); font-size: .55rem; font-weight: 780; }
.adj-ge-empty span { font-size: .52rem; line-height: 1.3; }
.adj-ge-empty button {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--adj-blue);
  font: inherit;
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.adj-ge-empty button:hover,
.adj-ge-empty button:focus-visible { color: var(--adj-focus, #3f9898); outline: 0; }

/* — the studies shelf — */
.adj-shelf {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--adj-line) 82%, transparent);
}

.adj-shelf-label {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 1px;
}

.adj-shelf-label strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.8rem;
  font-weight: 500;
}

.adj-shelf-label span {
  color: var(--adj-muted);
  font-size: 0.62rem;
  white-space: nowrap;
}

.adj-shelf-chips {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  gap: 6px;
  overflow-x: auto;
  padding: 2px;
}

.adj-shelf-chip {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border: 1px solid var(--adj-line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  color: var(--adj-ink);
  cursor: pointer;
  transition: 140ms ease;
}

.adj-shelf-chip:hover {
  border-color: color-mix(in srgb, var(--adj-gold) 42%, var(--adj-line));
  background: color-mix(in srgb, var(--adj-gold) 9%, var(--surface));
}

.adj-shelf-chip strong {
  font-size: 0.68rem;
  font-weight: 650;
  white-space: nowrap;
}

.adj-shelf-chip span {
  color: var(--adj-muted);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
}

.adj-shelf-chip em {
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.adj-shelf-chip.is-pick em {
  background: color-mix(in srgb, var(--adj-gold) 22%, transparent);
  color: color-mix(in srgb, var(--adj-gold) 85%, var(--adj-ink));
}

.adj-shelf-chip.is-frontier em {
  background: color-mix(in srgb, var(--adj-blue) 18%, transparent);
  color: color-mix(in srgb, var(--adj-blue) 80%, var(--adj-ink));
}

.adj-shelf-chip.is-ungenerated {
  border-style: dashed;
  color: var(--adj-muted);
}

.adj-shelf-archive {
  flex: 0 0 auto;
  color: var(--adj-muted);
  font-size: 0.64rem;
  white-space: nowrap;
}

.adj-shelf-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
  margin-left: auto;
}

.adj-shelf-actions button {
  padding: 6px 10px;
  font-size: 0.68rem;
  white-space: nowrap;
}

/* — narrow windows — the drawer and layout panel slim down, then the
   drawer floats over the graph so the center never collapses. */
@media (max-width: 1240px) {
  .adj-input-drawer {
    flex-basis: 408px;
  }

  .adj-table[data-input="parti"] .adj-input-drawer {
    flex-basis: 508px;
  }

  .adj-layout-panel {
    flex-basis: 336px;
  }

  .adj-tab-status {
    max-width: 92px;
  }
}

@media (max-width: 1040px) {
  .adj-table {
    position: relative;
  }

  .adj-table:not([data-input="none"]) .adj-input-drawer {
    position: absolute;
    z-index: 30;
    top: 50px;
    bottom: 56px;
    left: 4px;
    width: min(420px, 84%);
    border-color: color-mix(in srgb, var(--adj-gold) 40%, var(--adj-line));
    box-shadow: 0 20px 60px color-mix(in srgb, #000 32%, transparent);
  }

  .adj-table[data-input="parti"] .adj-input-drawer {
    width: min(540px, 94%);
  }

  .adj-layout-panel {
    flex-basis: 300px;
  }

  .adj-shelf-label span,
  .adj-shelf-archive {
    display: none;
  }

  .adj-tab-status {
    display: none;
  }
}

/* Adjacency Brief: graph-first applet --------------------------------------
   The window already supplies the product/title chrome, so the planner gets
   one compact command bar and one full workspace. Authoring tools are
   callable overlays; the block plan replaces the graph only when requested. */
.adj-root.adj-shell {
  /* The planner is a work surface inside Arrange, not a second tinted app. */
  --adj-ink: var(--text);
  --adj-muted: var(--text-secondary);
  --adj-line: var(--border);
  --surface: var(--bg);
  position: relative;
  gap: 6px;
  padding: 6px 8px 8px;
  background: var(--bg);
}

.adj-slimbar {
  min-height: 32px;
  gap: 6px;
  padding: 0 2px 4px;
}

.adj-guide-button {
  height: 27px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--adj-muted);
  font-size: .58rem;
  font-weight: 760;
  cursor: pointer;
}
.adj-guide-button:hover { color: var(--adj-ink); }

/* The planner and Knowledge Base use the same quick-start language: a quiet
   modal card, a compact action grid, and short gesture-first instructions. */
.adj-howto-layer {
  position: absolute;
  z-index: 90;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  background: color-mix(in srgb, #0a0907 55%, transparent);
  animation: adj-howto-layer-in 180ms ease-out both;
}

.adj-howto-panel {
  width: min(660px, 100%);
  max-height: min(92dvh, 100%);
  overflow: auto;
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--text) 16%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-card) 86%, var(--bg));
  color: var(--text);
  box-shadow: 0 20px 60px color-mix(in srgb, #000 35%, transparent);
  animation: adj-howto-panel-in 240ms cubic-bezier(.2,.82,.2,1) both;
}

@keyframes adj-howto-layer-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes adj-howto-panel-in { from { opacity: 0; transform: translateY(9px) scale(.985); } to { opacity: 1; transform: none; } }

.adj-howto-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: start;
  gap: 10px;
  margin-bottom: 12px;
}
.adj-howto-head > div { min-width: 0; }
.adj-howto-head span {
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.adj-howto-head h2 {
  margin: 2px 0 4px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 760;
  letter-spacing: -.012em;
}
.adj-howto-head p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 11.5px;
  line-height: 1.35;
}

.adj-howto-close {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-secondary);
  font-size: 1rem;
  cursor: pointer;
}
.adj-howto-close:hover { background: var(--overlay-hover); color: var(--text); }

.adj-howto-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.adj-howto-grid article {
  display: flex;
  min-width: 0;
  min-height: 108px;
  flex-direction: column;
  align-items: center;
  padding: 9px 7px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg) 58%, var(--bg-card));
  text-align: center;
}
.adj-howto-grid strong { display: block; margin: 1px 0 3px; font-size: 11.5px; line-height: 1.25; }
.adj-howto-grid p { margin: 0; color: var(--text-secondary); font-size: 10px; line-height: 1.35; }
.adj-howto-grid p b { color: var(--text); font-weight: 760; }
.adj-howto-glyph {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  margin-bottom: 5px;
  color: color-mix(in srgb, #3a4f72 78%, var(--text));
  font-size: .92rem;
  font-weight: 720;
  line-height: 1;
}
.adj-howto-glyph.is-add { font-size: 1.25rem; font-weight: 440; }
.adj-howto-glyph.is-views,
.adj-howto-glyph.is-options { font-size: .56rem; letter-spacing: -.03em; }
.adj-howto-glyph.is-block { border: 1.5px solid currentColor; border-radius: 3px; font-size: 0; transform: scale(.72); }
.adj-howto-glyph.is-circulation { font-family: Georgia, "Times New Roman", serif; font-size: 1.5rem; font-style: italic; }
.adj-howto-panel kbd {
  padding: 1px 4px;
  border: 1px solid color-mix(in srgb, var(--text) 20%, var(--border));
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

.adj-howto-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}
.adj-howto-foot label { display: inline-flex; align-items: center; gap: 7px; color: var(--text-secondary); font-size: 11.5px; cursor: pointer; }
.adj-howto-foot input { width: 14px; height: 14px; accent-color: #3a4f72; }
.adj-howto-foot > button {
  min-width: 120px;
  height: 31px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg) 58%, var(--bg-card));
  color: var(--text);
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
}
.adj-howto-foot > button:hover { border-color: color-mix(in srgb, #3a4f72 66%, var(--border)); }

@media (max-width: 720px) {
  .adj-howto-layer { padding: 9px; }
  .adj-howto-panel { padding: 14px; }
  .adj-howto-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adj-howto-grid article { min-height: 104px; }
  .adj-howto-foot { align-items: stretch; flex-direction: column; }
  .adj-howto-foot > button { width: 100%; }
}

.adj-view-switch {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--adj-line);
  border-radius: 5px;
  background: var(--bg-card);
}

.adj-view-switch button {
  display: inline-flex;
  height: 27px;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--adj-muted);
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
}

.adj-view-switch button:hover,
.adj-view-switch button.is-active {
  background: var(--bg);
  box-shadow: none;
  color: var(--adj-ink);
}

.adj-view-switch button > i {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border: 1px solid color-mix(in srgb, var(--adj-muted) 58%, transparent);
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--surface) 70%, transparent);
}

.adj-view-switch button.is-active > i {
  border-color: color-mix(in srgb, var(--adj-gold) 76%, var(--adj-line));
  background: var(--adj-gold);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--adj-gold) 13%, transparent);
}

.adj-command-label {
  flex: 0 0 auto;
  margin-left: 5px;
  color: var(--adj-muted);
  font-size: 0.56rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.adj-slim-tabs {
  flex: 1 1 auto;
  align-self: center;
  gap: 1px;
  overflow-x: auto;
}

.adj-stage-tab {
  flex: 0 0 auto;
  gap: 5px;
  height: 29px;
  padding: 4px 8px;
  border-radius: 7px;
}

.adj-stage-tab.is-active {
  box-shadow: none;
}

.adj-stage-tab.is-active::after {
  display: none;
}

.adj-stage-copy strong {
  font-size: 0.68rem;
}

.adj-slim-actions button {
  height: 29px;
  padding: 0 11px;
}

.adj-alternatives-launch {
  display: inline-flex;
  height: 29px;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--adj-muted);
  cursor: pointer;
  font: inherit;
}

.adj-alternatives-launch span {
  color: var(--adj-ink);
  font-size: 0.67rem;
  font-weight: 700;
}

.adj-alternatives-launch small {
  font-size: 0.51rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.adj-alternatives-launch:hover,
.adj-alternatives-launch.is-active {
  border-color: color-mix(in srgb, var(--adj-gold) 48%, var(--adj-line));
  background: color-mix(in srgb, var(--adj-gold) 7%, var(--surface));
  color: var(--adj-ink);
}

.adj-alternatives-gateway {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--adj-gold) 30%, var(--adj-line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 97%, var(--adj-gold) 3%);
}

.adj-alternatives-intro,
.adj-alternatives-parti,
.adj-alternatives-foot {
  display: flex;
  align-items: center;
  gap: 10px;
}

.adj-alternatives-intro > div,
.adj-alternatives-parti-copy,
.adj-alternatives-foot > p {
  min-width: 0;
  flex: 1 1 auto;
}

.adj-alternatives-intro > div > span,
.adj-alternatives-parti-copy > span,
.adj-alternatives-parti label > span {
  display: block;
  color: color-mix(in srgb, var(--adj-gold) 66%, var(--adj-muted));
  font-size: 0.52rem;
  font-weight: 760;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.adj-alternatives-intro strong,
.adj-alternatives-parti-copy strong {
  display: block;
  margin-top: 2px;
  color: var(--adj-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.85rem;
  font-weight: 500;
}

.adj-alternatives-intro p,
.adj-alternatives-parti-copy p,
.adj-alternatives-foot > p {
  margin: 2px 0 0;
  color: var(--adj-muted);
  font-size: 0.61rem;
  line-height: 1.35;
}

.adj-alternatives-intro > button,
.adj-alternatives-parti > button,
.adj-alternatives-foot > button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.adj-alternatives-intro > button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.adj-alternatives-readiness {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block: 1px solid var(--adj-line);
}

.adj-alternatives-readiness > span {
  min-width: 0;
  padding: 6px 8px;
  border-right: 1px solid var(--adj-line);
}

.adj-alternatives-readiness > span:last-child { border-right: 0; }

.adj-alternatives-readiness i,
.adj-alternatives-readiness strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adj-alternatives-readiness i {
  color: var(--adj-muted);
  font-size: 0.5rem;
  font-style: normal;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Goals now live on the Alternatives surface: the ends, beside the studies
   they judge. Reuses the .adj-brief-outcomes rows already styled elsewhere. */
.adj-alternatives-goals {
  border: 1px solid var(--adj-line);
  border-radius: 8px;
  margin-block: 10px;
  overflow: hidden;
}

.adj-alternatives-goals-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 10px;
  background: var(--adj-subtle, rgba(0, 0, 0, 0.02));
  border-bottom: 1px solid var(--adj-line);
}

.adj-alternatives-goals-toggle {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
}

.adj-alternatives-goals-toggle > span {
  font-size: 0.72rem;
  font-weight: 600;
}

.adj-alternatives-goals-toggle > strong {
  color: var(--adj-muted);
  font-size: 0.62rem;
  font-weight: 500;
}

.adj-alternatives-goals-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.adj-alternatives-goals-tools label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.6rem;
  color: var(--adj-muted);
}

.adj-alternatives-goals-note {
  margin: 0;
  padding: 6px 10px 0;
  color: var(--adj-muted);
  font-size: 0.62rem;
  line-height: 1.4;
}

.adj-alternatives-goals .adj-brief-outcomes { padding: 8px 10px 10px; }

.adj-alternatives-readiness strong {
  margin-top: 1px;
  color: var(--adj-ink);
  font-size: 0.61rem;
}

.adj-alternatives-readiness .is-needed strong {
  color: color-mix(in srgb, #b95b4b 78%, var(--adj-ink));
}

.adj-alternatives-parti label {
  flex: 0 0 160px;
}

.adj-alternatives-parti select {
  width: 100%;
  height: 28px;
  margin-top: 2px;
  border: 1px solid var(--adj-line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--adj-ink);
  font-size: 0.62rem;
}

.adj-alternatives-foot {
  align-items: flex-end;
}

.adj-alternatives-foot .adj-study-controls {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.adj-alternatives-foot .adj-study-controls > div { display: none; }

.adj-alternatives-foot .adj-study-controls select {
  height: 28px;
  font-size: 0.61rem;
}

@media (max-width: 760px) {
  .adj-alternatives-readiness { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adj-alternatives-readiness > span:nth-child(2) { border-right: 0; }
  .adj-alternatives-intro,
  .adj-alternatives-parti,
  .adj-alternatives-foot { align-items: stretch; flex-direction: column; }
  .adj-alternatives-parti label { flex-basis: auto; width: 100%; }
  .adj-alternatives-intro > button,
  .adj-alternatives-parti > button,
  .adj-alternatives-foot > button { align-self: flex-start; }
}

.adj-table-main {
  position: relative;
  gap: 0;
}

.adj-table .adj-graph-panel,
.adj-layout-panel {
  flex: 1 1 auto !important;
  width: 100%;
  min-width: 0;
  max-width: none;
}

.adj-table[data-view="graph"] .adj-layout-panel,
.adj-table[data-view="block"] .adj-graph-panel {
  display: none;
}

.adj-input-drawer,
.adj-table:not([data-input="none"]) .adj-input-drawer {
  position: absolute;
  z-index: 34;
  inset: 6px auto 6px 6px;
  display: flex;
  width: min(470px, calc(100% - 12px));
  flex: none;
  border-color: var(--border);
  background: var(--bg);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
}

.adj-table[data-input="none"] .adj-input-drawer {
  display: none;
}

.adj-table[data-input="parti"] .adj-input-drawer {
  width: min(610px, calc(100% - 12px));
  flex-basis: auto;
}

.adj-table[data-drawer="max"]:not([data-input="none"]) .adj-input-drawer {
  inset: 4px;
  width: auto;
}

.adj-layout-panel {
  border-color: var(--border);
  background: var(--adj-workspace-base);
}

.adj-layout-head {
  min-height: 42px;
  padding: 7px 10px 6px 12px;
}

.adj-block-picker {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--adj-muted);
  font-size: 0.6rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.adj-block-picker select {
  min-width: 150px;
  height: 28px;
  padding: 0 28px 0 9px;
  border: 1px solid var(--adj-line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--adj-ink);
  font: inherit;
  font-size: 0.67rem;
  letter-spacing: 0;
  text-transform: none;
}

.adj-block-single {
  padding: 4px 9px;
  border: 1px solid var(--adj-line);
  border-radius: 999px;
  color: var(--adj-muted);
  font-size: 0.64rem;
}

.adj-layout-body {
  overflow: hidden;
  padding: 8px 10px 10px;
}

.adj-layout-body .adj-assembly {
  height: 100%;
  min-height: 0;
}

.adj-layout-body .adj-plan-preview {
  display: flex;
  flex: 1 1 0;
  min-height: 220px;
  margin-top: 0;
}

.adj-layout-body .adj-plan-preview svg {
  width: 100%;
  height: 100%;
  min-height: 220px;
}

.adj-layout-body .adj-assembly-svg {
  flex: 1 1 0;
  min-height: 220px;
}

.adj-layout-body .adj-assembly > button {
  align-self: flex-start;
}

@media (max-width: 760px) {
  .adj-command-label {
    display: none;
  }

  .adj-stage-tab {
    padding-inline: 6px;
  }

  .adj-stage-copy strong {
    display: none;
  }

  .adj-block-picker span {
    display: none;
  }

  .adj-block-picker select {
    min-width: 116px;
  }
}

/* ============================================================ */
/* REPORT STUDIO                                                */
/* ============================================================ */
.rs-overlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 24px;
}
.rs-overlay.active { display: flex; animation: rs-fade-in 0.2s ease; }
@keyframes rs-fade-in { from { opacity: 0; } to { opacity: 1; } }

.rs-shell {
  width: min(1320px, 100%);
  height: min(880px, 96vh);
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  animation: rs-pop-in 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes rs-pop-in { from { transform: translateY(14px) scale(0.985); opacity: 0; } to { transform: none; opacity: 1; } }

.rs-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-bg);
}
.rs-title { font-size: 1.05rem; font-weight: 700; color: var(--text); white-space: nowrap; }
.rs-toolbar-title { flex: 0 1 260px; min-width: 150px; }
.rs-toolbar-kicker { font-size: 0.78rem; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); }
.rs-toolbar-subtitle { margin-top: 2px; font-size: 0.7rem; color: var(--muted); line-height: 1.2; }
.rs-preset-bar { display: flex; align-items: center; gap: 10px; flex: 1; }
.rs-preset-bar select {
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--input-bg); color: var(--text); font-size: 0.85rem; min-width: 180px;
}
.rs-btn-ghost {
  background: transparent; border: 1px dashed var(--border); color: var(--muted);
  padding: 7px 12px; border-radius: 8px; cursor: pointer; font-size: 0.82rem; transition: all 0.15s;
}
.rs-btn-ghost:hover { color: var(--accent); border-color: var(--accent); }
.rs-close {
  background: transparent; border: none; color: var(--muted); font-size: 1.6rem;
  cursor: pointer; line-height: 1; padding: 0 6px; transition: color 0.15s;
}
.rs-close:hover { color: var(--text); }

.rs-body {
  flex: 1;
  display: grid;
  grid-template-columns: 200px minmax(320px, 380px) 1fr;
  min-height: 0;
}

/* Destination rail */
.rs-rail { border-right: 1px solid var(--border); padding: 14px 12px; background: var(--panel-bg); display: flex; flex-direction: column; gap: 10px; }
.rs-dest {
  text-align: left; display: flex; flex-direction: column; gap: 3px;
  padding: 12px 12px; border: 1.5px solid var(--border); border-radius: 12px;
  background: var(--overlay-subtle); color: var(--text); cursor: pointer; transition: all 0.18s;
}
.rs-dest:hover { border-color: var(--accent); transform: translateY(-1px); }
.rs-dest.active { border-color: var(--accent); background: var(--overlay-active); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.rs-dest-ico { font-size: 1.4rem; }
.rs-dest-lbl { font-weight: 700; font-size: 0.92rem; }
.rs-dest-hint { font-size: 0.72rem; color: var(--muted); line-height: 1.25; }

/* Controls column */
.rs-controls { border-right: 1px solid var(--border); overflow-y: auto; padding: 14px; }
.rs-section { margin-bottom: 18px; }
.rs-section-h { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.rs-section-note { font-size: 0.74rem; color: var(--muted); line-height: 1.35; margin-bottom: 10px; }
.rs-source-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.rs-advanced { margin-bottom: 14px; border-top: 1px solid var(--border); padding-top: 10px; }
.rs-advanced > summary { cursor: pointer; list-style: none; color: var(--text); font-size: 0.78rem; font-weight: 800; }
.rs-advanced > summary::-webkit-details-marker { display: none; }
.rs-advanced > summary::after { content: "＋"; float: right; color: var(--muted); font-size: 0.9rem; }
.rs-advanced[open] > summary::after { content: "−"; }

/* Block rows */
.rs-block { border: 1px solid var(--border); border-radius: 11px; margin-bottom: 9px; overflow: hidden; transition: border-color 0.18s, background 0.18s; }
.rs-block.on { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: var(--overlay-subtle); }
.rs-block-top { display: flex; align-items: flex-start; gap: 10px; padding: 10px 11px; }
.rs-block-ico { font-size: 1.05rem; line-height: 1.2; }
.rs-block-meta { flex: 1; min-width: 0; }
.rs-block-name { font-weight: 700; font-size: 0.86rem; color: var(--text); }
.rs-block-desc { font-size: 0.73rem; color: var(--muted); line-height: 1.3; margin-top: 2px; }
.rs-block-opts { padding: 4px 12px 12px 44px; display: flex; flex-direction: column; gap: 7px; border-top: 1px dashed var(--border); margin-top: 2px; }

/* iOS-style switch */
.rs-switch { position: relative; display: inline-block; width: 34px; height: 19px; flex-shrink: 0; margin-top: 2px; }
.rs-switch input { opacity: 0; width: 0; height: 0; }
.rs-slider { position: absolute; inset: 0; cursor: pointer; background: var(--pill-inactive, #555); border-radius: 999px; transition: 0.2s; }
.rs-slider::before { content: ""; position: absolute; height: 15px; width: 15px; left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: 0.2s; }
.rs-switch input:checked + .rs-slider { background: var(--accent); }
.rs-switch input:checked + .rs-slider::before { transform: translateX(15px); }

.rs-opt { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--text); cursor: pointer; }
.rs-opt input[type="checkbox"] { accent-color: var(--accent); }
.rs-opt-text { flex-direction: column; align-items: flex-start; gap: 4px; }
.rs-opt-text input { width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--input-bg); color: var(--text); font-size: 0.8rem; }

/* Style panel */
.rs-style-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; align-items: center; }
.rs-field-lbl { font-size: 0.74rem; color: var(--muted); font-weight: 600; }
.rs-style-grid select { padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--input-bg); color: var(--text); font-size: 0.8rem; }
.rs-text-input, .rs-subsection input[type="url"], .rs-subsection input[type="text"], .rs-subsection input[type="number"] { width: 100%; min-width: 0; padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--input-bg); color: var(--text); font-size: 0.8rem; }
.rs-swatches { display: flex; gap: 8px; margin-top: 12px; }
.rs-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform 0.15s; }
.rs-swatch:hover { transform: scale(1.12); }
.rs-swatch.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }

.rs-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 12px; }
.rs-subsection { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.rs-subsection-h { margin-bottom: 8px; color: var(--muted); font-size: 0.7rem; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; }
.rs-logo-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; min-width: 0; }
.rs-file-btn { display: inline-flex; align-items: center; padding: 6px 9px; border: 1px solid var(--border); border-radius: 7px; color: var(--text); background: var(--overlay-subtle); cursor: pointer; font-size: 0.75rem; white-space: nowrap; }
.rs-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 0.72rem; }
.rs-color-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rs-color-grid label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 0.68rem; }
.rs-color-grid input { width: 100%; height: 28px; padding: 2px; border: 1px solid var(--border); border-radius: 6px; background: var(--input-bg); cursor: pointer; }
.rs-link-row { display: grid; grid-template-columns: 78px 1fr 1.45fr 24px; gap: 5px; margin-bottom: 6px; align-items: center; }
.rs-link-row select, .rs-link-row input { min-width: 0; padding: 5px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--input-bg); color: var(--text); font-size: 0.72rem; }
.rs-link-remove { width: 24px; height: 27px; padding: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; font-size: 1rem; }
.rs-link-remove:hover { border-color: #e06b6b; color: #e06b6b; }
.rs-add-link { margin-top: 4px; }
.rs-empty-links { padding: 8px; border: 1px dashed var(--border); border-radius: 7px; color: var(--muted); font-size: 0.72rem; text-align: center; }
.rs-pdf-options select { width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--input-bg); color: var(--text); font-size: 0.8rem; }

/* Preview pane */
.rs-preview-pane { display: flex; flex-direction: column; min-height: 0; background:
  repeating-linear-gradient(45deg, var(--overlay-subtle) 0 1px, transparent 1px 12px), var(--panel-elevated, #1a2130); min-width: 0; }
.rs-preview-bar { display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-bottom: 1px solid var(--border); font-size: 0.76rem; color: var(--muted); }
.rs-preview-tools { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.rs-preview-btn { min-height: 26px; padding: 3px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--overlay-subtle); color: var(--muted); cursor: pointer; font-size: 0.7rem; line-height: 1; }
.rs-preview-btn:hover, .rs-preview-btn.is-active { border-color: var(--accent); color: var(--text); background: color-mix(in srgb, var(--accent) 12%, var(--overlay-subtle)); }
.rs-preview-icon { width: 26px; padding: 0; font-size: 1rem; }
.rs-preview-zoom { min-width: 58px; color: var(--text); text-align: center; font-size: 0.7rem; font-variant-numeric: tabular-nums; }
.rs-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent); animation: rs-pulse 1.8s infinite; }
@keyframes rs-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.rs-preview { flex: 1; min-width: 0; overflow: auto; overscroll-behavior: contain; padding: 18px; scrollbar-gutter: stable both-edges; }
.rs-preview-stack { display: flex; flex-direction: column; align-items: center; gap: 22px; width: max-content; min-width: 100%; }

/* A faux paper page */
.rs-page-frame { flex: 0 0 auto; width: var(--rs-render-width, 460px); height: var(--rs-render-height, 595px); }
.rs-page {
  width: var(--rs-page-width, 460px);
  min-height: var(--rs-page-height, 595px);
  background: #fff;
  color: var(--rs-doc-text, #1f2d3d);
  font-family: var(--rs-doc-font, 'Helvetica Neue', Arial, sans-serif);
  font-size: calc(11px * var(--rs-doc-scale, 1));
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
  border-radius: 3px;
  padding: 26px 28px;
  opacity: 0;
  transform-origin: top left;
  transform: scale(var(--rs-page-scale, 1));
}
.rs-page-in { animation: rs-page-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes rs-page-in { from { opacity: 0; transform: translateY(22px) scale(calc(var(--rs-page-scale, 1) * 0.97)); } to { opacity: 1; transform: scale(var(--rs-page-scale, 1)); } }

/* Page content primitives (themed via document CSS vars) */
.rs-cover { height: calc(var(--rs-page-height, 595px) - 52px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: var(--rs-doc-header, #2980b9); color: #fff; margin: -26px -28px; border-radius: 3px; }
.rs-cover-logo { width: 54px; max-height: 30px; object-fit: contain; margin-bottom: 18px; }
.rs-cover-title { font-size: 1.7em; font-weight: 800; padding: 0 24px; }
.rs-cover-sub { font-size: 1.05em; margin-top: 10px; opacity: 0.92; }
.rs-cover-project { font-size: 0.82em; margin-top: 10px; opacity: 0.78; }
.rs-cover-date { font-size: 0.8em; margin-top: 18px; opacity: 0.8; }
.rs-banner { background: var(--rs-doc-header, #2980b9); color: #fff; font-weight: 700; padding: 7px 10px; border-radius: 4px; margin-bottom: 12px; display: flex; justify-content: space-between; }
.rs-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.rs-chip { border: 1.5px solid var(--rs-doc-accent, #2ecc71); border-radius: 6px; padding: 8px; text-align: center; background: #fafafa; }
.rs-chip-v { font-size: 1.3em; font-weight: 800; color: var(--rs-doc-header, #2980b9); }
.rs-chip-l { font-size: 0.72em; color: #777; margin-top: 2px; }
.rs-h { font-size: 0.74em; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #888; margin: 12px 0 5px; }
.rs-row { font-size: 0.82em; padding: 2px 0; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; gap: 8px; }
.rs-right { margin-left: auto; color: #555; }
.rs-dim { color: #999; }
.rs-card { border: 1px solid #e2e2e2; border-radius: 6px; padding: 10px 12px; margin-bottom: 12px; }
.rs-card-h { background: var(--rs-doc-header, #2980b9); color: #fff; font-weight: 700; margin: -10px -12px 8px; padding: 6px 12px; border-radius: 6px 6px 0 0; display: flex; justify-content: space-between; }
.rs-attrs { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px; font-size: 0.78em; }
.rs-attrs b { color: #777; font-weight: 600; }
.rs-note { font-size: 0.8em; color: #555; margin: 6px 0; line-height: 1.4; }
.rs-rowhead { background: var(--rs-doc-header, #2980b9); color: #fff; font-weight: 700; font-size: 0.82em; padding: 5px 9px; border-radius: 4px; margin: 12px 0 6px; }
.rs-tbl { width: 100%; border-collapse: collapse; font-size: 0.74em; margin-bottom: 6px; }
.rs-tbl th { background: color-mix(in srgb, var(--rs-doc-header, #2980b9) 18%, #fff); text-align: left; padding: 4px 6px; font-weight: 700; }
.rs-tbl td { padding: 3px 6px; border-bottom: 1px solid #f1f1f1; }
.rs-tbl tbody tr:nth-child(even) td { background: var(--rs-doc-zebra, #f4f8fb); }
.rs-xls-tab { display: inline-block; background: var(--rs-doc-header, #2980b9); color: #fff; font-weight: 700; font-size: 0.78em; padding: 4px 12px; border-radius: 5px 5px 0 0; }
.rs-xls { border: 1px solid #ddd; }
.rs-total { text-align: right; font-weight: 700; font-size: 0.8em; color: var(--rs-doc-accent, #2ecc71); margin-bottom: 8px; }
.rs-pdfstub { border: 1px dashed #bbb; border-radius: 5px; padding: 14px; text-align: center; color: #888; font-size: 0.82em; margin-top: 6px; background: #fafafa; }
.rs-empty-doc { display: flex; height: 100%; align-items: center; justify-content: center; text-align: center; color: #999; font-size: 0.95em; padding: 40px; }

/* Footer */
.rs-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 18px; border-top: 1px solid var(--border); background: var(--panel-bg); }
.rs-footer-hint { font-size: 0.78rem; color: var(--muted); }
.rs-footer-actions { display: flex; gap: 10px; }

@media (max-width: 1000px) {
  .rs-toolbar { align-items: flex-start; flex-wrap: wrap; }
  .rs-toolbar-title { flex: 1 1 100%; }
  .rs-toolbar .rs-preset-bar { justify-content: flex-start; }
  .rs-body { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; }
  .rs-rail { flex-direction: row; overflow-x: auto; }
  .rs-dest { min-width: 150px; }
}

/* Section ordering / delete controls + add-section row */
.rs-block-ord { display: flex; gap: 3px; align-items: center; margin-left: auto; }
.rs-ord { background: var(--overlay-subtle); border: 1px solid var(--border); color: var(--muted); width: 22px; height: 22px; border-radius: 6px; cursor: pointer; font-size: 0.8rem; line-height: 1; padding: 0; transition: all 0.15s; }
.rs-ord:hover:not(:disabled) { color: var(--text); border-color: var(--accent); }
.rs-ord:disabled { opacity: 0.3; cursor: default; }
.rs-ord.rs-del:hover { color: #e74c3c; border-color: #e74c3c; }
.rs-add-row { display: flex; gap: 8px; margin-top: 6px; }
.rs-add-row select { flex: 1; padding: 7px 8px; border: 1px dashed var(--border); border-radius: 8px; background: var(--input-bg); color: var(--text); font-size: 0.82rem; }

/* Data View editor */
.rs-dv-editor { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.rs-dv-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; align-items: center; }
.rs-dv-editor select { padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--input-bg); color: var(--text); font-size: 0.8rem; }
.rs-grps { display: flex; flex-wrap: wrap; gap: 6px; }
.rs-grp { font-size: 0.74rem; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--overlay-subtle); color: var(--muted); cursor: pointer; transition: all 0.15s; }
.rs-grp b { font-weight: 700; }
.rs-grp.hdr { border-color: var(--accent); color: var(--text); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.rs-grp.col { border-color: #e6a23c; color: var(--text); background: color-mix(in srgb, #e6a23c 16%, transparent); }
.rs-grp.off { opacity: 0.6; }
.rs-cols { display: flex; flex-wrap: wrap; gap: 5px; }
.rs-colchip { display: inline-flex; align-items: center; gap: 5px; font-size: 0.73rem; padding: 4px 8px; border: 1px solid var(--border); border-radius: 7px; cursor: pointer; color: var(--text); background: var(--overlay-subtle); }
.rs-colchip input { accent-color: var(--accent); margin: 0; }
.rs-colchip.gated { opacity: 0.4; cursor: not-allowed; text-decoration: line-through; }
.rs-filters { margin-top: 4px; border: 1px dashed var(--border); border-radius: 8px; padding: 6px 10px; }
.rs-filters summary { font-size: 0.78rem; color: var(--muted); cursor: pointer; font-weight: 600; }
.rs-filters[open] { padding-bottom: 10px; }
.rs-filters .rs-opt { margin-top: 7px; }

/* ---- Studio as a window-manager applet (fills the window body) ---- */
.rs-window { display: flex; flex-direction: column; height: 100%; width: 100%; min-height: 0; background: var(--bg); color: var(--text); }
.rs-toolbar { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--border); background: var(--panel-bg); flex: 0 0 auto; }
.rs-toolbar .rs-preset-bar { flex-wrap: wrap; justify-content: flex-end; }
.rs-window .rs-footer { flex: 0 0 auto; }
/* Fallback when no window manager is present: a centered fixed panel */
#report-studio.rs-fallback { position: fixed; inset: 3%; z-index: 4000; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5); overflow: hidden; }

/* ---- Spreadsheet-style Excel preview ---- */
.rs-preview.rs-preview-sheet { padding: 0; background: #eceef1; }
.rs-xls-shell { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.rs-xls-scroll { flex: 1 1 auto; overflow: auto; background: #fff; }
.rs-sheet { border-collapse: collapse; font-size: 12px; font-family: var(--rs-doc-font, 'Helvetica Neue', Arial, sans-serif); width: max-content; min-width: 100%; }
.rs-sheet th, .rs-sheet td { border: 1px solid #d6d8dc; padding: 2px 8px; white-space: nowrap; text-align: left; }
.rs-sheet-letters th { position: sticky; top: 0; background: #e8eaed; color: #5a5f66; font-weight: 600; text-align: center; min-width: 46px; z-index: 2; }
.rs-rownum { position: sticky; left: 0; background: #e8eaed; color: #80868b; text-align: center; font-size: 10px; min-width: 30px; }
.rs-sheet-letters .rs-rownum { z-index: 3; }
.rs-scolhead { background: #eef0f6; font-weight: 700; color: #2a2f36; }
.rs-sbanner { background: var(--rs-doc-header, #2980b9); color: #fff; font-weight: 700; }
.rs-scell { color: #222; }
.rs-srow:nth-child(even) .rs-scell:not(.rs-scolhead) { background: #fafbfc; }
.rs-xtabs { flex: 0 0 auto; display: flex; gap: 2px; padding: 5px 6px 0; background: #dfe1e5; border-top: 1px solid #c6c9ce; overflow-x: auto; }
.rs-xtab { font-size: 12px; padding: 5px 14px; border: 1px solid #c6c9ce; border-bottom: none; border-radius: 5px 5px 0 0; background: #eef0f3; color: #5a5f66; cursor: pointer; white-space: nowrap; }
.rs-xtab.on { background: #fff; color: var(--rs-doc-header, #2980b9); font-weight: 700; }

/* Adjacency planner · unified brief workflow ------------------------------ */
.adj-parti-control {
  display: inline-flex;
  flex: 0 1 190px;
  min-width: 122px;
  height: 31px;
  align-items: center;
  gap: 6px;
  padding: 0 5px 0 9px;
  border: 1px solid var(--adj-line);
  border-radius: 8px;
  color: var(--adj-muted);
  font-size: 0.58rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.adj-parti-control select {
  min-width: 0;
  flex: 1 1 auto;
  height: 25px;
  border: 0;
  background: transparent;
  color: var(--adj-ink);
  font-size: 0.68rem;
  text-transform: none;
}

.adj-command-button,
.adj-command-settings {
  height: 31px;
  flex: 0 0 auto;
  padding: 0 10px;
  border: 1px solid var(--adj-line);
  border-radius: 8px;
  background: transparent;
  color: var(--adj-muted);
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
}

.adj-command-button:hover,
.adj-command-button.is-active,
.adj-command-settings:hover,
.adj-command-settings.is-active {
  background: color-mix(in srgb, var(--adj-blue) 12%, var(--surface));
  color: var(--adj-ink);
}

.adj-command-button.is-add {
  color: var(--adj-ink);
}

.adj-command-button > span {
  margin-left: 3px;
  color: var(--adj-muted);
  font-variant-numeric: tabular-nums;
}

/* The Planner command rail is one family of controls. Keep the peer views,
   Brief, and NL+ on the same height, border, and active-state geometry even
   though the view switch remains a segmented group. */
.adj-view-switch,
.adj-command-button,
.adj-nlbar-toggle {
  box-sizing: border-box;
  height: 31px;
}

.adj-view-switch {
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-card) 92%, var(--adj-ink) 8%);
}

.adj-view-switch button {
  height: 25px;
  padding-inline: 10px;
  border-radius: 6px;
}

.adj-view-switch button:hover,
.adj-view-switch button.is-active {
  background: var(--bg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--adj-line) 72%, transparent);
}

.adj-view-switch .adj-view-count {
  height: 25px;
  min-width: 28px;
  padding-inline: 5px;
}

.adj-command-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 58px;
  background: var(--bg-card);
}

.adj-command-button:hover,
.adj-command-button.is-active {
  border-color: color-mix(in srgb, var(--adj-gold) 42%, var(--adj-line));
  background: var(--bg);
}

.adj-command-button .adj-command-count {
  margin-left: 1px;
  padding: 1px 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--adj-muted) 10%, transparent);
  font-size: .56rem;
}

.adj-nlbar-toggle {
  min-width: 54px;
}

.adj-group-edit-command kbd {
  margin-left: 4px;
  padding: 1px 4px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg-card);
  color: var(--adj-muted);
  font: inherit;
  font-size: 0.52rem;
}

.adj-group-edit-command.is-active {
  border-color: var(--text);
  background: var(--text);
  color: var(--bg);
}

.adj-group-edit-command.is-active kbd {
  border-color: color-mix(in srgb, var(--bg) 38%, transparent);
  background: transparent;
  color: inherit;
}

.adj-command-settings {
  display: inline-flex;
  width: auto;
  min-width: 76px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  padding: 2px 8px;
  line-height: 1.05;
}
.adj-command-settings strong { color: inherit; font-size: .62rem; }
.adj-command-settings span { color: var(--adj-muted); font-size: .43rem; font-weight: 650; }

.adj-parti-workspace {
  position: relative;
  display: none;
  width: 100%;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--adj-line);
  border-radius: 12px;
  background: var(--surface, #101214);
}

.adj-table[data-view="parti"] .adj-graph-panel,
.adj-table[data-view="parti"] .adj-layout-panel {
  display: none;
}

.adj-table[data-view="parti"] .adj-parti-workspace {
  display: flex;
}

.adj-parti-mode-head {
  display: flex;
  min-height: 44px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 10px 7px 13px;
  border-bottom: 1px solid var(--adj-line);
}

.adj-parti-mode-head > div:first-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}

.adj-parti-mode-head strong { font-size: 0.82rem; }
.adj-parti-mode-head span { color: var(--adj-muted); font-size: 0.62rem; }
.adj-parti-mode-head > div:last-child { display: flex; gap: 6px; }
.adj-parti-mode-head button {
  height: 28px;
  padding: 0 9px;
  border: 1px solid var(--adj-line);
  border-radius: 7px;
  background: transparent;
  color: var(--adj-muted);
  font-size: 0.65rem;
  cursor: pointer;
}
.adj-parti-mode-head button.is-active { background: color-mix(in srgb, var(--adj-blue) 14%, var(--surface)); color: var(--adj-ink); }

.adj-parti-workspace > .adj-parti--drawer {
  display: grid;
  min-height: 0;
  flex: 1 1 0;
  grid-template-columns: 150px minmax(360px, 1fr) minmax(250px, 310px);
  align-items: start;
  gap: 8px;
  overflow: auto;
  padding: 8px;
}

.adj-parti-workspace .adj-parti__tools {
  position: sticky;
  top: 0;
  flex-direction: column;
  align-items: stretch;
}

.adj-parti-workspace .adj-parti-svg {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}

.adj-parti-workspace .pf-sheets.is-compact {
  display: grid;
  grid-template-columns: auto minmax(100px, 1fr) auto auto;
  gap: 4px;
}

.adj-parti-workspace .pf-sheet-select {
  min-width: 0;
  height: 28px;
  border: 1px solid var(--adj-line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--adj-ink);
  font-size: 0.64rem;
}

.adj-table[data-input="add"] .adj-input-drawer { width: min(430px, calc(100% - 12px)); }
.adj-table[data-input="brief"] .adj-input-drawer,
.adj-table[data-input="ai"] .adj-input-drawer { width: min(610px, calc(100% - 12px)); }
.adj-table[data-input="settings"] .adj-input-drawer { width: min(760px, calc(100% - 12px)); }
.adj-table .adj-input-drawer { border-color: var(--adj-line); }
.adj-parti-workspace .adj-parti__activate { display: none; }

.adj-add-kinds,
.adj-settings-nav {
  display: grid;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--adj-line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface) 86%, var(--bg));
}

.adj-add-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.adj-settings-nav { grid-template-columns: repeat(4, 1fr); }

.adj-add-kinds button,
.adj-settings-nav button {
  min-height: 29px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--adj-muted);
  font-size: 0.66rem;
  font-weight: 700;
  cursor: pointer;
}

.adj-add-kinds button.is-active,
.adj-settings-nav button.is-active {
  background: var(--surface);
  color: var(--adj-ink);
  box-shadow: 0 1px 3px color-mix(in srgb, #000 20%, transparent);
}

.adj-add-body,
.adj-settings-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.adj-equation-find {
  display: flex;
  align-items: end;
  gap: 7px;
  margin-bottom: 6px;
}

.adj-equation-find label {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 3px;
}

.adj-equation-find label > span {
  color: var(--adj-muted);
  font-size: .48rem;
  font-weight: 760;
  letter-spacing: .065em;
  text-transform: uppercase;
}

.adj-equation-find input {
  width: 100%;
  height: 31px;
  min-width: 0;
  padding: 0 9px;
  border: 1px solid var(--adj-line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--adj-ink);
  font-size: .62rem;
}

.adj-equation-find kbd {
  height: 25px;
  padding: 6px 7px 0;
  border: 1px solid var(--adj-line);
  border-radius: 5px;
  background: var(--bg-card);
  color: var(--adj-muted);
  font-size: .48rem;
  font-family: inherit;
  white-space: nowrap;
}

.adj-equation-overview { display: flex; flex-direction: column; gap: 8px; }

.adj-equation-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(180px, .7fr);
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--adj-line);
  border-radius: 8px;
  background: var(--surface);
}

.adj-equation-summary > div:first-child { display: flex; flex-direction: column; gap: 2px; }
.adj-equation-summary > div:first-child > span,
.adj-equation-open > span {
  color: var(--adj-muted);
  font-size: .48rem;
  font-weight: 760;
  letter-spacing: .065em;
  text-transform: uppercase;
}
.adj-equation-summary strong { font-size: .8rem; }
.adj-equation-summary p { margin: 2px 0 0; color: var(--adj-muted); font-size: .56rem; line-height: 1.35; }

.adj-equation-open {
  display: flex;
  align-content: flex-start;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px;
}
.adj-equation-open > span { width: 100%; text-align: right; }
.adj-equation-open b {
  padding: 3px 5px;
  border: 1px solid var(--adj-line);
  border-radius: 4px;
  color: var(--adj-ink);
  font-size: .48rem;
  font-weight: 650;
}
.adj-equation-open b.is-complete { color: var(--adj-muted); }

.adj-equation-map {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.adj-equation-card {
  display: flex;
  min-width: 0;
  min-height: 116px;
  flex-direction: column;
  gap: 7px;
  padding: 10px;
  border: 1px solid var(--adj-line);
  border-radius: 8px;
  background: var(--surface);
}
.adj-equation-card header { display: flex; align-items: center; gap: 7px; }
.adj-equation-card header span {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid var(--adj-line);
  border-radius: 50%;
  color: var(--adj-muted);
  font-size: .45rem;
  font-variant-numeric: tabular-nums;
}
.adj-equation-card header strong { font-size: .68rem; }
.adj-equation-card > p { flex: 1 1 auto; margin: 0; color: var(--adj-muted); font-size: .55rem; line-height: 1.38; }
.adj-equation-card > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.adj-equation-card > div em { overflow: hidden; color: var(--adj-muted); font-size: .49rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.adj-equation-card > div button,
.adj-equation-site header button {
  flex: 0 0 auto;
  padding: 4px 6px;
  border: 0;
  border-radius: 4px;
  background: var(--bg-card);
  color: var(--adj-ink);
  font-size: .51rem;
  font-weight: 720;
  cursor: pointer;
}
.adj-equation-card > div button:hover,
.adj-equation-site header button:hover { background: var(--overlay-hover); }
.adj-equation-card.is-search label { display: flex; flex-direction: column; gap: 3px; }
.adj-equation-card.is-search label span { color: var(--adj-muted); font-size: .48rem; }
.adj-equation-card.is-search select {
  height: 28px;
  border: 1px solid var(--adj-line);
  border-radius: 5px;
  background: var(--bg-card);
  color: var(--adj-ink);
  padding: 0 6px;
  font-size: .55rem;
}

.adj-equation-site {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--adj-line);
  border-radius: 8px;
  background: var(--surface);
}
.adj-equation-site > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.adj-equation-site > header > div { display: flex; flex-direction: column; gap: 1px; }
.adj-equation-site > header span { color: var(--adj-muted); font-size: .48rem; font-weight: 760; letter-spacing: .06em; text-transform: uppercase; }
.adj-equation-site > header strong { font-size: .68rem; }

.adj-add-note {
  margin: 0;
  color: var(--adj-muted);
  font-size: 0.7rem;
  line-height: 1.45;
}

.adj-add-suggestions {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.adj-add-suggestions > span {
  color: var(--adj-muted);
  font-size: 0.58rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.adj-add-suggestions button,
.adj-add-va,
.adj-add-settings {
  min-height: 30px;
  padding: 6px 9px;
  border: 1px solid var(--adj-line);
  border-radius: 7px;
  background: transparent;
  color: var(--adj-ink);
  text-align: left;
  font-size: 0.67rem;
  cursor: pointer;
}

.adj-add-goal {
  display: grid;
  grid-template-columns: 1fr 130px;
  gap: 9px;
}

.adj-add-goal label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--adj-muted);
  font-size: 0.6rem;
}
.adj-add-goal label:first-child { grid-column: 1 / -1; }
.adj-add-goal input[type="text"], .adj-add-goal select { height: 32px; }
.adj-add-goal .btn-primary { align-self: end; }

.adj-brief-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 8px;
}

.adj-brief-toolbar label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--adj-muted);
  font-size: 0.58rem;
}
.adj-brief-toolbar select { height: 29px; min-width: 150px; }

.adj-brief-index-status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 1px 7px;
  color: var(--adj-muted);
  font-size: 0.52rem;
}
.adj-brief-index-status span { display: inline-flex; align-items: baseline; gap: 3px; }
.adj-brief-index-status b { color: var(--adj-ink); font-size: 0.68rem; }
.adj-brief-nav { margin-bottom: 7px; }
.adj-brief-connections-toolbar { align-items: center; }
.adj-brief-connections-toolbar > div { display: flex; flex-direction: column; gap: 1px; }
.adj-brief-connections-toolbar > div strong { font-size: 0.7rem; }
.adj-brief-connections-toolbar > div span { color: var(--adj-muted); font-size: 0.54rem; }

.adj-brief-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 2px;
}

.adj-brief-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 1px;
  border-bottom: 1px solid var(--adj-line);
}
.adj-brief-section-head strong { font-size: 0.72rem; }
.adj-brief-section-head span { color: var(--adj-muted); font-size: 0.62rem; }

.adj-brief-outcomes,
.adj-brief-rules {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.adj-brief-outcome {
  border: 1px solid var(--adj-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 94%, var(--bg));
}

.adj-brief-outcome-main {
  display: grid;
  grid-template-columns: minmax(135px, 1fr) minmax(100px, 0.8fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
}

.adj-brief-outcome-name,
.adj-brief-reveal {
  border: 0;
  background: transparent;
  color: var(--adj-ink);
  cursor: pointer;
}
.adj-brief-outcome-name { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; text-align: left; }
.adj-brief-outcome-name strong { max-width: 100%; overflow: hidden; font-size: 0.68rem; text-overflow: ellipsis; white-space: nowrap; }
.adj-brief-outcome-name span { color: var(--adj-muted); font-size: 0.56rem; }
.adj-brief-reveal { color: var(--adj-muted); font-size: 0.6rem; }

.adj-brief-outcome-detail {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 9px;
  border-top: 1px solid var(--adj-line);
}

.adj-brief-fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
.adj-brief-fields label { display: flex; flex-direction: column; gap: 3px; color: var(--adj-muted); font-size: 0.58rem; }
.adj-brief-fields input, .adj-brief-fields select { height: 29px; }
.adj-brief-custom { display: flex; gap: 6px; }
.adj-brief-custom input { min-width: 0; flex: 1 1 auto; }

.adj-brief-rules .adj-rule-card { padding: 7px 8px; border-color: var(--adj-line); }
.adj-brief-constraints {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 9px;
  border: 1px solid var(--adj-line);
  border-radius: 8px;
}
.adj-brief-constraints > div { display: flex; flex-direction: column; gap: 2px; }
.adj-brief-constraints strong { font-size: 0.68rem; }
.adj-brief-constraints span { color: var(--adj-muted); font-size: 0.58rem; }
.adj-brief-constraints button,
.adj-program-audit-head button { border: 0; background: transparent; color: var(--adj-muted); font-size: 0.62rem; cursor: pointer; }

.adj-program-audit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.adj-program-audit-head > div { display: flex; flex-direction: column; }
.adj-program-audit-head strong { font-size: 0.72rem; }
.adj-program-audit-head span { color: var(--adj-muted); font-size: 0.6rem; }

@media (max-width: 900px) {
  .adj-parti-workspace > .adj-parti--drawer {
    grid-template-columns: 1fr;
  }
  .adj-parti-workspace .adj-parti__tools {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .adj-parti-control { flex-basis: 150px; }
  .adj-command-button { padding: 0 7px; }
}

@media (max-width: 680px) {
  .adj-slimbar { flex-wrap: wrap; }
  .adj-view-switch { order: 1; }
  .adj-parti-control { order: 2; flex: 1 1 150px; }
  .adj-command-button { order: 3; }
  .adj-slim-actions { order: 4; margin-left: auto; }
  .adj-brief-outcome-main { grid-template-columns: 1fr auto; }
  .adj-brief-outcome-main input[type="range"] { grid-column: 1 / -1; grid-row: 2; }
  .adj-brief-fields { grid-template-columns: 1fr; }
}

/* Adjacency planner: responsive callable panels and theme-safe graphics. */
.adj-table-main {
  display: grid;
  grid-template-columns: minmax(0, 0fr) minmax(0, 1fr);
  gap: 0;
  transition: grid-template-columns 240ms cubic-bezier(.2, .75, .25, 1), gap 240ms ease;
}

.adj-table[data-input="add"] .adj-table-main {
  grid-template-columns: minmax(0, .52fr) minmax(0, 1fr);
  gap: 8px;
}

.adj-table[data-input="brief"] .adj-table-main,
.adj-table[data-input="ai"] .adj-table-main {
  grid-template-columns: minmax(0, .75fr) minmax(0, 1fr);
  gap: 8px;
}

.adj-table[data-input="settings"] .adj-table-main {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.adj-input-drawer,
.adj-table:not([data-input="none"]) .adj-input-drawer,
.adj-table[data-input="add"] .adj-input-drawer,
.adj-table[data-input="brief"] .adj-input-drawer,
.adj-table[data-input="settings"] .adj-input-drawer {
  position: relative;
  inset: auto;
  display: flex;
  width: 100%;
  max-width: none;
  height: 100%;
  flex: none;
  container-type: inline-size;
  opacity: 1;
  transform: translateX(0);
  visibility: visible;
  transition: opacity 160ms ease, transform 240ms cubic-bezier(.2, .75, .25, 1), visibility 0s;
}

.adj-table[data-input="none"] .adj-input-drawer {
  display: flex;
  opacity: 0;
  transform: translateX(-14px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 120ms ease, transform 200ms ease, visibility 0s 240ms;
}

.adj-table .adj-graph-panel,
.adj-table .adj-layout-panel,
.adj-table .adj-parti-workspace {
  min-width: 0;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

/* Anything authored inside a callable panel must yield to its container. */
.adj-input-drawer *,
.adj-parti-mode-head > *,
.adj-slimbar > * {
  min-width: 0;
  box-sizing: border-box;
}

.adj-drawer-copy strong,
.adj-parti-mode-head strong,
.adj-parti-mode-head span,
.adj-layer-head h4,
.adj-layer-head p,
.adj-program-audit-head strong,
.adj-program-audit-head span,
.adj-add-suggestions button,
.adj-add-settings,
.adj-add-va {
  overflow-wrap: anywhere;
}

.adj-add-kinds button,
.adj-settings-nav button,
.adj-command-button,
.adj-view-switch button {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adj-nl-row {
  min-width: 0;
}

.adj-nl-row .btn-primary {
  flex: 0 0 auto;
}

.adj-rule-controls {
  min-width: 0;
  flex-wrap: wrap;
}

.adj-rule-main,
.adj-typed-head,
.adj-brief-constraints > div,
.adj-program-audit-head > div,
.adj-layer-head > div,
.adj-layer-head > div > div {
  min-width: 0;
}

.adj-graph-panel {
  --adj-g-node-stroke: color-mix(in srgb, var(--adj-ink) 42%, transparent);
  --adj-g-node-badge: #fff;
}

.adj-preview-blocks text {
  fill: #fff;
  stroke: rgba(0, 0, 0, 0.52);
  stroke-width: 1px;
  paint-order: stroke fill;
}

.adj-preview-exit {
  stroke: var(--surface);
}

@container (max-width: 700px) {
  .adj-rule-card,
  .adj-rule-card.adj-typed {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .adj-rule-controls {
    justify-content: flex-start;
  }

  .adj-layer-head {
    padding: 11px 12px;
  }

  .adj-budget-fields,
  .adj-budget-ledger {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .adj-circulation-framework {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .adj-circulation-copy,
  .adj-circulation-disclosure {
    grid-column: 1 / -1;
  }
}

@container (max-width: 540px) {
  .adj-composer {
    grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr);
    gap: 8px;
    padding: 10px;
  }

  .adj-composer label:nth-of-type(3) { grid-column: 1 / 3; }
  .adj-composer label:nth-of-type(4) { grid-column: 3; }
  .adj-composer > .btn-primary { grid-column: 1 / -1; }

  .adj-attr-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .adj-room-constraint {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 30px;
  }

  .adj-room-constraint .adj-constraint-title { grid-column: 1 / -1; }
  .adj-room-constraint .adj-force-select { grid-column: 1 / 3; }

  .adj-brief-outcome-main {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .adj-brief-outcome-main input[type="range"] {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .adj-brief-fields,
  .adj-add-goal {
    grid-template-columns: minmax(0, 1fr);
  }

  .adj-add-goal label,
  .adj-add-goal label:first-child,
  .adj-add-goal .btn-primary {
    grid-column: 1;
  }

  .adj-brief-toolbar,
  .adj-brief-constraints,
  .adj-program-audit-head {
    align-items: stretch;
    flex-direction: column;
  }

  .adj-site-row {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 760px) {
  .adj-table[data-input="add"] .adj-table-main,
  .adj-table[data-input="brief"] .adj-table-main,
  .adj-table[data-input="ai"] .adj-table-main,
  .adj-table[data-input="settings"] .adj-table-main {
    grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  }

  .adj-parti-mode-head {
    align-items: flex-start;
  }

  .adj-parti-mode-head > div:last-child {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

@media (prefers-reduced-motion: reduce) {
  .adj-table-main,
  .adj-input-drawer,
  .adj-table:not([data-input="none"]) .adj-input-drawer {
    transition: none;
  }
}

/* Graph + Workbench plan: two synchronized readings can share the table. */
.adj-workspace-deck {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0fr);
  gap: 0;
  overflow: hidden;
  transition: grid-template-columns 260ms cubic-bezier(.2, .75, .25, 1), gap 260ms ease;
}

.adj-workspace-deck > .adj-graph-panel,
.adj-workspace-deck > .adj-layout-panel,
.adj-workspace-deck > .adj-parti-workspace {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.adj-table[data-view="graph"] .adj-workspace-deck > .adj-graph-panel,
.adj-table[data-view="split"] .adj-workspace-deck > .adj-graph-panel,
.adj-table[data-view="split"] .adj-workspace-deck > .adj-layout-panel {
  display: flex;
}

.adj-table[data-view="graph"] .adj-workspace-deck > .adj-layout-panel {
  display: flex;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.adj-table[data-view="split"] .adj-workspace-deck {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 8px;
}

.adj-table[data-view="split"] .adj-workspace-deck > .adj-layout-panel {
  opacity: 1;
  visibility: visible;
  transition: opacity 180ms ease 60ms, visibility 0s;
}

.adj-table[data-view="parti"] .adj-workspace-deck {
  display: flex;
}

.adj-table[data-view="parti"] .adj-workspace-deck > .adj-graph-panel,
.adj-table[data-view="parti"] .adj-workspace-deck > .adj-layout-panel {
  display: none;
}

.adj-table[data-view="parti"] .adj-workspace-deck > .adj-parti-workspace {
  display: flex;
}

.adj-layout-panel {
  container-type: inline-size;
}

.adj-block-toolbar {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  padding: 6px;
  border: 1px solid var(--adj-line);
  border-radius: 6px;
  background: var(--bg);
}

.adj-block-selection {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

.adj-block-selection strong,
.adj-block-selection span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adj-block-selection strong { font-size: 0.67rem; }
.adj-block-selection span { color: var(--adj-muted); font-size: 0.56rem; }

.adj-block-floors,
.adj-block-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px;
}

.adj-block-spatial-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}
.adj-va-cues-control {
  position: relative;
  flex: 0 0 auto;
  font-size: .54rem;
}
.adj-va-cues-control > summary {
  display: inline-flex;
  height: 25px;
  box-sizing: border-box;
  align-items: center;
  gap: 5px;
  padding: 0 8px 0 5px;
  border: 1px dashed var(--adj-line);
  border-radius: 999px;
  background: var(--adj-workspace-base);
  color: var(--adj-muted);
  font-weight: 760;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}
.adj-va-cues-control > summary::-webkit-details-marker { display: none; }
.adj-va-cues-control > summary i {
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, #2d708a 12%, transparent);
  color: #245d74;
  font-size: .43rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: -.02em;
}
.adj-va-cues-control > summary b {
  color: var(--adj-muted);
  font-size: .43rem;
  font-weight: 820;
  text-transform: uppercase;
}
.adj-va-cues-control.is-enabled > summary {
  border-style: solid;
  border-color: color-mix(in srgb, #2d708a 42%, var(--adj-line));
  color: var(--text-primary);
}
.adj-va-cues-control.is-enabled > summary b { color: #245d74; }
.adj-va-cues-control[open] { z-index: 30; }
.adj-va-cues-popover {
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  width: clamp(380px, 34vw, 480px);
  max-width: calc(100vw - 24px);
  box-sizing: border-box;
  padding: 11px;
  border: 1px solid var(--adj-line);
  border-radius: 12px;
  background: var(--adj-workspace-base, #fbfcfd);
  color: var(--adj-ink);
  box-shadow: 0 16px 40px color-mix(in srgb, var(--adj-ink) 22%, transparent);
  transform: translateX(-50%);
  white-space: normal;
  overflow-wrap: anywhere;
}
.adj-va-cues-control:not([open]) > .adj-va-cues-popover {
  display: none;
}
.adj-va-cues-popover header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--adj-line);
}
.adj-va-cues-popover header > div { min-width: 0; }
.adj-va-cues-popover header strong,
.adj-va-cues-popover header span { display: block; }
.adj-va-cues-popover header strong { font-size: .64rem; }
.adj-va-cues-popover header span,
.adj-va-cues-popover p {
  margin: 3px 0 0;
  color: var(--adj-muted);
  font-size: .5rem;
  line-height: 1.38;
}
.adj-va-master-toggle {
  height: 23px;
  flex: 0 0 auto;
  padding: 0 9px;
  border: 1px solid var(--adj-line);
  border-radius: 999px;
  background: transparent;
  color: var(--adj-muted);
  font-size: .49rem;
  font-weight: 830;
  cursor: pointer;
}
.adj-va-master-toggle.is-active {
  border-color: #2d708a;
  background: #2d708a;
  color: #fff;
}
.adj-va-underlay-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
  padding-top: 10px;
}
.adj-va-segment {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 1fr 1fr;
  padding: 2px;
  border: 1px solid var(--adj-line);
  border-radius: 8px;
}
.adj-va-segment button,
.adj-va-actions button {
  min-height: 24px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--adj-muted);
  font-size: .5rem;
  font-weight: 780;
  cursor: pointer;
}
.adj-va-segment button.is-active {
  background: color-mix(in srgb, #2d708a 13%, var(--adj-workspace-base));
  color: #245d74;
}
.adj-va-check {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--adj-ink);
  font-size: .51rem;
  cursor: pointer;
}
.adj-va-check input { accent-color: #2d708a; }
.adj-va-opacity {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 9px;
  color: var(--adj-muted);
  font-size: .49rem;
}
.adj-va-opacity input { width: 100%; accent-color: #2d708a; }
.adj-va-actions {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
.adj-va-actions button { border: 1px solid var(--adj-line); }
.adj-va-actions button.is-primary {
  border-color: #2d708a;
  background: #2d708a;
  color: #fff;
}
.adj-va-geometry-mode {
  display: grid;
  grid-column: 1 / -1;
  gap: 2px;
  margin: 0;
  padding: 7px 8px;
  border: 1px solid color-mix(in srgb, #2d708a 42%, var(--adj-line));
  border-radius: 7px;
  background: color-mix(in srgb, #2d708a 7%, var(--adj-workspace-base));
  color: var(--adj-ink);
  font-size: .47rem;
  line-height: 1.35;
}
.adj-va-geometry-mode span {
  color: var(--adj-muted);
  font-size: .43rem;
}
.adj-va-decision-card {
  display: grid;
  grid-column: 1 / -1;
  gap: 7px;
  padding: 9px;
  border: 1px solid color-mix(in srgb, #2d708a 48%, var(--adj-line));
  border-radius: 9px;
  background: linear-gradient(145deg, color-mix(in srgb, #2d708a 9%, var(--adj-workspace-base)), var(--adj-workspace-base));
}
.adj-va-underlay-controls > .adj-va-decision-card { order: -1; }
.adj-va-cues-popover .adj-va-decision-card > header {
  align-items: center;
  padding: 0 0 6px;
  border-bottom-color: color-mix(in srgb, #2d708a 24%, var(--adj-line));
}
.adj-va-decision-card > header span {
  color: #245d74;
  font-size: .43rem;
  font-weight: 880;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.adj-va-decision-card > header b {
  color: var(--adj-muted);
  font-size: .42rem;
}
.adj-va-decision-card [data-decision-current] {
  display: grid;
  gap: 6px;
}
.adj-va-decision-card h3 {
  margin: 0;
  color: var(--adj-ink);
  font-size: .59rem;
  line-height: 1.3;
}
.adj-va-decision-card [data-decision-current] > p { margin: 0; }
.adj-va-decision-card [data-decision-recommendation] { color: #245d74; }
.adj-va-decision-card [role="group"] > div[role="group"] {
  display: grid;
  gap: 4px;
}
.adj-va-decision-card [data-decision-accept] {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 7px 8px;
  border: 1px solid var(--adj-line);
  border-radius: 7px;
  background: var(--adj-workspace-base);
  color: var(--adj-ink);
  text-align: left;
  cursor: pointer;
}
.adj-va-decision-card [data-decision-accept][data-decision-recommendation] {
  border-color: color-mix(in srgb, #2d708a 58%, var(--adj-line));
}
.adj-va-decision-card [data-decision-accept]:disabled {
  opacity: .58;
  cursor: not-allowed;
}
.adj-va-decision-card [data-decision-accept] strong { font-size: .49rem; }
.adj-va-decision-card [data-decision-accept] small {
  color: var(--adj-muted);
  font-size: .43rem;
  font-weight: 520;
  line-height: 1.3;
}
.decision-recommended {
  display: inline-block !important;
  margin-left: 3px;
  color: #245d74;
  font-size: .38rem !important;
  letter-spacing: .025em;
  text-transform: uppercase;
}
.decision-source-ranked {
  display: inline-block !important;
  margin-left: 3px;
  color: #91661f;
  font-size: .38rem !important;
  letter-spacing: .025em;
  text-transform: uppercase;
}
.adj-va-decision-card [data-decision-defer] {
  justify-self: start;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--adj-muted);
  font-size: .44rem;
  font-weight: 720;
  cursor: pointer;
}
.adj-va-decision-card > footer {
  padding-top: 6px;
  border-top: 1px solid color-mix(in srgb, var(--adj-line) 72%, transparent);
  color: var(--adj-muted);
  font-size: .4rem;
  line-height: 1.35;
}
.adj-va-trust-gates {
  display: grid;
  grid-column: 1 / -1;
  gap: 4px;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--adj-line) 80%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--adj-ink) 2.5%, transparent);
}
.adj-va-trust-gates > div {
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr) auto;
  align-items: start;
  gap: 6px;
  padding: 3px 2px;
}
.adj-va-trust-gates > div > i {
  width: 6px;
  height: 6px;
  margin-top: 3px;
  border-radius: 50%;
  background: #3e8a69;
}
.adj-va-trust-gates > div.is-review > i { background: #b47b25; }
.adj-va-trust-gates > div.is-fail > i { background: #b44f4f; }
.adj-va-trust-gates span,
.adj-va-trust-gates strong,
.adj-va-trust-gates small { min-width: 0; }
.adj-va-trust-gates strong {
  color: var(--adj-ink);
  font-size: .49rem;
  line-height: 1.2;
}
.adj-va-trust-gates small {
  display: block;
  margin-top: 1px;
  color: var(--adj-muted);
  font-size: .43rem;
  font-weight: 540;
  line-height: 1.25;
}
.adj-va-trust-gates > div > b {
  color: #36755b;
  font-size: .41rem;
  line-height: 1.3;
  text-transform: uppercase;
}
.adj-va-trust-gates > div.is-review > b { color: #95631c; }
.adj-va-trust-gates > div.is-fail > b { color: #a43f3f; }
.adj-va-underlay-controls > p { grid-column: 1 / -1; }
.adj-va-underlay-controls > p.is-status {
  padding: 6px 7px;
  border-radius: 7px;
  background: color-mix(in srgb, #2d708a 8%, transparent);
  color: var(--adj-ink);
}
.va-planning-decision-modal-content { max-width: 650px; }
.va-planning-decision-modal-content .modal-header p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.4;
}
.va-decision-eyebrow {
  display: block;
  color: #2d708a;
  font-size: .68rem;
  font-weight: 760;
  letter-spacing: .075em;
  text-transform: uppercase;
}
.va-program-area-form {
  display: grid;
  gap: 14px;
  padding: 20px;
}
.va-program-area-form > label {
  display: grid;
  gap: 7px;
  color: var(--text);
  font-size: .78rem;
  font-weight: 700;
}
.va-program-area-form input {
  width: min(240px, 100%);
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--input-bg, var(--card-bg));
  color: var(--text);
  font: inherit;
  font-size: 1rem;
}
.va-program-area-context {
  margin: 0;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.45;
}
.va-planning-decision-modal-body { padding: 20px; }
.va-planning-decision-modal-body [data-decision-current] { display: grid; gap: 11px; }
.va-planning-decision-modal-body [data-decision-current] h2 {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.35;
}
.va-planning-decision-modal-body [data-decision-current] > p {
  margin: 0;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.48;
}
.va-planning-decision-modal-body [data-decision-recommendation] {
  padding: 8px 10px;
  border-radius: 7px;
  background: color-mix(in srgb, #2d708a 9%, transparent);
  color: #245d74 !important;
}
.va-planning-decision-modal-body [data-decision-current] > div[role="group"] {
  display: grid;
  gap: 8px;
}
.va-planning-decision-modal-body [data-decision-accept] {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg-secondary);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.va-planning-decision-modal-body [data-decision-accept][data-decision-recommendation] {
  border-color: #2d708a;
  background: color-mix(in srgb, #2d708a 7%, var(--bg-secondary));
}
.va-planning-decision-modal-body [data-decision-accept] strong { font-size: .86rem; }
.va-planning-decision-modal-body [data-decision-accept] small {
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.42;
}
.va-planning-decision-modal-body [data-decision-defer] {
  justify-self: start;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
}
.adj-plan-editor > .adj-block-spatial-controls {
  position: absolute;
  z-index: 8;
  top: 8px;
  left: 50%;
  padding: 0;
  transform: translateX(-50%);
}
.adj-plan-editor > .adj-block-spatial-controls > .adj-block-plan-reading-controls {
  position: absolute;
  top: 32px;
  left: 50%;
  display: flex;
  max-width: min(760px, calc(100vw - 54px));
  align-items: center;
  gap: 5px;
  transform: translateX(-50%);
  white-space: nowrap;
}
.adj-block-floors-shared,
.adj-block-reading-rail {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 1px;
  padding: 2px;
  border: 1px solid color-mix(in srgb, var(--adj-ink) 13%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--adj-workspace-base) 92%, transparent);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--adj-ink) 5%, transparent);
  backdrop-filter: blur(8px);
}
.adj-block-plan-reading-controls button {
  height: 25px;
  padding: 0 7px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--adj-muted);
  font: 720 .625rem/1 var(--font-sans, system-ui, sans-serif);
  cursor: pointer;
  white-space: nowrap;
  transition: background 140ms ease, color 140ms ease;
}
.adj-block-plan-reading-controls button:hover {
  color: var(--adj-ink);
}
.adj-block-plan-reading-controls button.is-active {
  background: color-mix(in srgb, var(--adj-ink) 9%, transparent);
  color: var(--adj-ink);
}
.adj-block-layer-legend {
  display: inline-flex;
  min-width: 0;
  max-width: min(560px, 42vw);
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 9px;
  margin-left: 2px;
  color: var(--adj-muted);
  font: 650 .47rem/1.15 var(--font-sans, system-ui, sans-serif);
  letter-spacing: .01em;
  white-space: normal;
}
.adj-block-layer-legend span {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.adj-block-layer-legend i {
  display: inline-block;
  width: 12px;
  height: 7px;
  flex: 0 0 auto;
  box-sizing: border-box;
  border-radius: 2px;
}
.adj-block-layer-legend .is-source i {
  border: 1px dashed color-mix(in srgb, var(--adj-ink) 52%, transparent);
  background: repeating-linear-gradient(135deg, transparent 0 3px, color-mix(in srgb, var(--adj-ink) 20%, transparent) 3px 4px);
}
.adj-block-layer-legend .is-functional i {
  border: 1px solid color-mix(in srgb, #7895a5 68%, var(--adj-ink));
  background: color-mix(in srgb, #7895a5 24%, transparent);
}
.adj-block-layer-legend .is-circulation i {
  border: 1px solid color-mix(in srgb, #4fa5ab 76%, var(--adj-ink));
  background: color-mix(in srgb, #4fa5ab 38%, transparent);
}
.adj-block-plan-chrome .adj-block-layer-legend {
  max-width: 100%;
}
.adj-block-toolbar .adj-block-plan-reading-controls {
  display: flex;
  align-items: center;
  gap: 5px;
}
.adj-plan-editor > .adj-block-spatial-controls:has(.adj-va-cues-control[open]) {
  z-index: 12;
}
/* The orbit pill is a second segment of the same control. It follows the
   dimensional pill in flow and tucks its first 26px behind it, which is what
   lets it read as sliding out from behind rather than appearing beside. It
   stays in flow rather than floating over the row, so the width it occupies is
   width the row actually reserves and its label can never paint on top of the
   scene-style control sitting next to it. */
.adj-block-view-cluster {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 25px;
}
.adj-block-orbit-toggle {
  z-index: 0;
  order: 2;
  display: inline-flex;
  height: 25px;
  max-width: 0;
  box-sizing: border-box;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 1px dashed var(--adj-line);
  border-left: 0;
  border-radius: 0 999px 999px 0;
  background: transparent;
  color: var(--adj-muted);
  font-size: 0.51rem;
  font-weight: 750;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: max-width 320ms cubic-bezier(.22,.8,.2,1), margin 320ms cubic-bezier(.22,.8,.2,1),
    padding 320ms cubic-bezier(.22,.8,.2,1), opacity 180ms ease, color 160ms ease;
}
.adj-block-orbit-toggle > i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  border-top-color: transparent;
  border-bottom-color: transparent;
  transition: transform 260ms ease, border-color 160ms ease;
}
.adj-block-view-cluster[data-has-orbit="true"] .adj-block-orbit-toggle {
  max-width: 110px;
  margin-left: -26px;
  padding: 0 10px 0 26px;
  opacity: 1;
  pointer-events: auto;
}
.adj-block-orbit-toggle:hover { color: var(--text-primary); }
.adj-block-orbit-toggle.is-active {
  border-color: var(--text-primary);
  background: transparent;
  color: var(--text-primary);
}
.adj-block-orbit-toggle.is-active > i {
  border-color: currentColor;
  border-top-color: transparent;
  transform: rotate(45deg);
}

.adj-block-view-rail {
  position: relative;
  z-index: 1;
  display: grid;
  order: 1;
  width: 86px;
  height: 25px;
  flex: 0 0 auto;
  grid-template-columns: repeat(2, 1fr);
  padding: 2px;
  box-sizing: border-box;
  border: 1px solid var(--adj-line);
  border-radius: 999px;
  background: var(--adj-workspace-base);
  isolation: isolate;
}
.adj-block-view-rail button {
  position: relative;
  z-index: 2;
  height: 19px;
  padding: 0 4px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--adj-muted);
  font-size: 0.51rem;
  font-weight: 750;
  cursor: pointer;
  transition: color 180ms ease;
}
.adj-block-view-rail button.is-hidden { display: none; }
.adj-block-view-rail button:hover,
.adj-block-view-rail button.is-active {
  background: transparent;
  color: var(--text-primary);
}
.adj-block-view-rail > i {
  position: absolute;
  z-index: 1;
  top: 2px;
  left: 2px;
  width: calc((100% - 4px) / 2);
  height: 19px;
  box-sizing: border-box;
  border: 1px solid var(--adj-line);
  border-radius: 999px;
  background: transparent;
  transition: transform 420ms cubic-bezier(.22,.8,.2,1);
}
.adj-block-view-rail[data-active-view="3d"] > i { transform: translateX(100%); }
.adj-block-scene-style {
  height: 25px;
  min-width: 48px;
  padding: 0 7px;
  border: 1px dashed var(--adj-line);
  border-radius: 999px;
  background: transparent;
  color: var(--adj-muted);
  font-size: .52rem;
  font-weight: 750;
  cursor: pointer;
}
.adj-block-scene-style:hover {
  background: var(--bg-card);
  color: var(--text-primary);
}
.adj-block-toolbar .adj-block-scene-style {
  border-style: dashed;
}
.adj-block-scene-style.is-hidden { display: none; }

/* Block conversions reachable by right-click on the 3D table, matching the
   vocabulary of the full plan editor's block menu. */
.adj-block-3d-menu {
  position: fixed;
  z-index: 100000;
  min-width: 168px;
  max-height: none;
  overflow: visible;
  padding: 4px;
  border: 1px solid var(--adj-line);
  border-radius: 9px;
  background: var(--adj-workspace-base, #fbfcfd);
  opacity: 1;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--adj-ink) 30%, transparent), inset 0 1px 0 rgba(255,255,255,.72);
}
.adj-block-3d-menu-head {
  padding: 5px 9px 6px;
  border-bottom: 1px solid var(--adj-line);
  margin-bottom: 3px;
  color: var(--adj-muted);
  font-size: 0.52rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.adj-block-3d-menu-caption {
  padding: 6px 9px 3px;
  color: var(--adj-muted);
  font-size: 0.46rem;
  font-weight: 780;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.adj-block-3d-menu-item {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 6px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--adj-ink);
  font-size: 0.57rem;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}
.adj-block-3d-menu-item:hover { background: var(--bg-card); }
.adj-block-3d-menu-item.is-checked { color: var(--text-primary); font-weight: 800; }
.adj-block-3d-menu-item.is-checked::after {
  content: '✓';
  color: var(--adj-gold);
  font-size: 0.6rem;
}

.adj-block-3d-utilities {
  position: absolute;
  z-index: 8;
  top: 44px;
  right: 9px;
  display: none;
  align-items: center;
  gap: 5px;
  max-width: calc(100% - 18px);
}
.adj-plan-editor[data-block-view="locked3d"] > .adj-block-3d-utilities,
.adj-plan-editor[data-block-view="orbit3d"] > .adj-block-3d-utilities {
  display: flex;
}
.adj-block-3d-utilities button,
.adj-block-3d-hint {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--adj-line) 82%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  box-shadow: 0 5px 16px color-mix(in srgb, #000 12%, transparent);
  backdrop-filter: blur(9px);
  color: var(--adj-muted);
  font-size: .52rem;
  font-weight: 740;
}
.adj-block-3d-utilities button { cursor: pointer; }
.adj-block-3d-utilities button:hover,
.adj-block-3d-utilities button.is-active {
  border-color: color-mix(in srgb, var(--adj-gold) 54%, var(--adj-line));
  color: var(--adj-ink);
}
.adj-block-3d-utilities button b {
  display: grid;
  min-width: 16px;
  height: 16px;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--adj-gold) 20%, var(--surface));
  color: var(--adj-ink);
  font-size: .48rem;
}
.adj-block-3d-utilities button i {
  color: var(--adj-muted);
  font-size: .72rem;
  font-style: normal;
}
.adj-block-3d-hint {
  border-style: dashed;
  box-shadow: none;
}

.adj-block-toolbar button {
  height: 25px;
  padding: 0 7px;
  border: 1px solid var(--adj-line);
  border-radius: 4px;
  background: transparent;
  color: var(--adj-muted);
  font-size: 0.58rem;
  font-weight: 700;
  cursor: pointer;
}

.adj-block-toolbar button:hover,
.adj-block-toolbar button.is-active {
  background: var(--bg-card);
  color: var(--adj-ink);
}

.adj-block-proactivity {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 25px;
  padding: 0 8px;
  border: 1px solid var(--adj-line);
  border-radius: 999px;
  background: transparent;
  color: var(--adj-muted);
  font-size: .52rem;
  font-weight: 750;
  white-space: nowrap;
  cursor: pointer;
}

.adj-block-proactivity:hover,
.adj-block-proactivity.is-active {
  background: var(--bg-card);
  color: var(--text-primary);
}

.adj-block-proactivity i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.38;
}

.adj-block-proactivity.is-active i {
  background: #42a98f;
  box-shadow: 0 0 0 3px rgba(66, 169, 143, 0.14);
  opacity: 1;
}

.adj-block-clear-connections {
  height: 25px;
  padding: 0 8px;
  border: 1px dashed var(--adj-line);
  border-radius: 999px;
  background: transparent;
  color: var(--adj-muted);
  font-size: .52rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.adj-block-clear-connections:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--warning, #a76a42) 55%, var(--adj-line));
  color: var(--text-primary);
}

.adj-block-clear-connections:disabled {
  opacity: .34;
  cursor: default;
}

/* Simulate opens the shared tabletop; it should read as a deliberate Block
   action rather than inheriting the browser's default button treatment. */
.adj-block-open-tabletop {
  display: inline-flex;
  height: 25px;
  min-width: 76px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--adj-blue) 46%, var(--adj-line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--adj-blue) 9%, var(--surface));
  color: color-mix(in srgb, var(--adj-blue) 80%, var(--adj-ink));
  font-size: .52rem;
  font-weight: 800;
  letter-spacing: .015em;
  white-space: nowrap;
  cursor: pointer;
}

.adj-block-open-tabletop::before {
  content: '\25B6';
  font-size: .43rem;
  line-height: 1;
}

.adj-block-open-tabletop:hover,
.adj-block-open-tabletop:focus-visible {
  border-color: color-mix(in srgb, var(--adj-blue) 72%, var(--adj-line));
  background: color-mix(in srgb, var(--adj-blue) 16%, var(--surface));
  color: var(--adj-ink);
  outline: none;
}

.adj-edit-block[style*="transform"] {
  will-change: transform;
}

.adj-block-toolbar button:disabled {
  opacity: 0.38;
  cursor: default;
}

.adj-block-dimensions,
.adj-block-precision {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 6px 2px 2px;
  border: 0;
  background: transparent;
}

.adj-block-toolbar + .adj-block-dimensions { margin-top: 0; }

.adj-block-dimensions > label,
.adj-block-precision > label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--adj-muted);
  font-size: 0.52rem;
  font-weight: 750;
}

.adj-block-dimension-input {
  display: flex;
  align-items: center;
  gap: 4px;
}

.adj-block-dimension-input input {
  width: 58px;
  height: 26px;
  box-sizing: border-box;
  padding: 0 6px;
  border: 1px solid var(--adj-line);
  border-radius: 4px;
  background: var(--surface);
  color: var(--adj-ink);
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
}

.adj-block-dimension-input b,
.adj-block-area-lock {
  color: var(--adj-muted);
  font-size: 0.54rem;
  font-weight: 650;
}

.adj-block-area-lock { align-self: center; margin-left: auto; }

.adj-block-more-menu .adj-block-precision {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 2px 2px 6px;
  border-bottom: 1px solid var(--adj-line);
}
.adj-block-more-menu .adj-block-area-lock {
  grid-column: 1 / -1;
  margin-left: 0;
}

.adj-block-more { position: relative; }
.adj-block-more summary {
  display: grid;
  width: 28px;
  height: 25px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--adj-muted);
  font-size: 0.66rem;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}
.adj-block-more summary::-webkit-details-marker { display: none; }
.adj-block-more[open] summary,
.adj-block-more summary:hover { background: var(--bg-card); color: var(--adj-ink); }
.adj-block-more-menu {
  position: absolute;
  z-index: 8;
  top: calc(100% + 5px);
  right: 0;
  display: grid;
  width: 176px;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}
.adj-block-more-menu button { width: 100%; justify-content: flex-start; text-align: left; }
.adj-block-shape-picker { position: relative; }
.adj-block-shape-picker > summary {
  display: flex;
  height: 25px;
  box-sizing: border-box;
  align-items: center;
  gap: 5px;
  padding: 0 7px;
  border: 1px solid var(--adj-line);
  border-radius: 4px;
  color: var(--adj-muted);
  font-size: 0.58rem;
  font-weight: 750;
  cursor: pointer;
  list-style: none;
}
.adj-block-shape-picker > summary::-webkit-details-marker { display: none; }
.adj-block-shape-picker > summary b {
  display: grid;
  min-width: 14px;
  height: 14px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--adj-gold) 18%, transparent);
  color: var(--adj-ink);
  font-size: 0.48rem;
}
.adj-block-shape-picker[open] > summary,
.adj-block-shape-picker > summary:hover {
  background: var(--bg-card);
  color: var(--adj-ink);
}
.adj-block-shape-menu {
  position: absolute;
  z-index: 10;
  top: calc(100% + 5px);
  right: 0;
  display: grid;
  width: 214px;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}
.adj-block-shape-menu-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.adj-block-shape-menu-head strong { color: var(--adj-ink); font-size: 0.63rem; }
.adj-block-shape-menu-head span,
.adj-block-shape-caption,
.adj-block-shape-menu small {
  color: var(--adj-muted);
  font-size: 0.5rem;
}
.adj-block-shape-presets,
.adj-block-cut-sides {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}
.adj-block-cut-sides { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.adj-block-shape-menu button { width: 100%; justify-content: center; }
.adj-block-perimeter-rail {
  display: flex;
  height: 25px;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--adj-line);
  border-radius: 999px;
  background: var(--bg);
}
.adj-block-perimeter-rail button {
  min-width: 0;
  height: 23px;
  padding: 0 7px;
  border: 0;
  border-right: 1px solid var(--adj-line);
  border-radius: 0;
  color: var(--adj-muted);
  background: transparent;
  font-size: 0.56rem;
}
.adj-block-perimeter-rail button:last-child { border-right: 0; }
.adj-block-perimeter-rail select {
  width: 76px;
  height: 23px;
  padding: 0 4px;
  border: 0;
  border-right: 1px solid var(--adj-line);
  border-radius: 0;
  color: #d43f3f;
  background: color-mix(in srgb, #e34b4b 7%, transparent);
  font: inherit;
  font-size: 0.56rem;
}
.adj-block-perimeter-sides {
  width: 34px;
  height: 23px;
  padding: 0 2px 0 5px;
  border: 0;
  border-right: 1px solid var(--adj-line);
  border-radius: 0;
  color: #d43f3f;
  background: color-mix(in srgb, #e34b4b 7%, transparent);
  font: inherit;
  font-size: 0.56rem;
}
.adj-block-perimeter-rail button.is-active,
.adj-block-perimeter-rail button.is-apply { color: #d43f3f; background: color-mix(in srgb, #e34b4b 10%, transparent); }
.adj-block-shape-menu .adj-block-cut-remove {
  border-style: dashed;
  justify-content: flex-start;
}
.adj-block-shape-menu small {
  line-height: 1.35;
}
.adj-block-minimum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 2px 7px;
  border-bottom: 1px solid var(--border);
  color: var(--adj-muted);
  font-size: 0.54rem;
  font-weight: 700;
}

.adj-plan-editor {
  position: relative;
  flex: 1 1 0;
  min-height: 250px;
  margin-top: 0;
  background: var(--adj-workspace-base);
}

.adj-plan-editor.adj-plan-preparing {
  display: grid;
  min-height: 250px;
  place-items: center;
  background: #fff;
}

.adj-plan-preparing-copy {
  display: grid;
  justify-items: center;
  gap: 7px;
  max-width: 230px;
  color: var(--adj-ink);
  text-align: center;
}

.adj-plan-preparing-copy > i {
  width: 20px;
  height: 20px;
  border: 2px solid color-mix(in srgb, var(--adj-blue) 22%, transparent);
  border-top-color: var(--adj-blue);
  border-radius: 50%;
  animation: adj-layout-thinking .84s linear infinite;
}

.adj-plan-preparing-copy > strong {
  font-size: .7rem;
  font-weight: 780;
}

.adj-plan-preparing-copy > span {
  color: var(--adj-muted);
  font-size: .56rem;
  line-height: 1.45;
}

.adj-proactive-recomposition {
  position: absolute;
  z-index: 240;
  inset: 14px 14px auto auto;
  display: block;
  width: min(340px, calc(100% - 28px));
  background: transparent;
  color: #17212b;
  pointer-events: none;
}

.adj-proactive-recomposition[hidden] {
  display: none;
}

.adj-proactive-recomposition-copy {
  display: grid;
  width: 100%;
  justify-items: start;
  gap: 7px;
  padding: 13px 15px;
  border: 1px solid color-mix(in srgb, var(--adj-blue) 18%, #dce4e7);
  border-radius: 12px;
  background: color-mix(in srgb, #fff 94%, transparent);
  box-shadow: 0 12px 32px rgba(21, 34, 43, .14);
  text-align: left;
  backdrop-filter: blur(12px);
}

/* The cold transaction may reshape canonical rooms, so room/circulation edits
   wait for publication. Camera pan and wheel zoom remain live on the SVG and
   every Planner control outside the geometry continues to respond. */
#adjacency-planner-root.is-proactive-recomposing .adj-edit-block,
#adjacency-planner-root.is-proactive-recomposing .adj-block-handle,
#adjacency-planner-root.is-proactive-recomposing .adj-block-cut-handle,
#adjacency-planner-root.is-proactive-recomposing .adj-corridor-node,
#adjacency-planner-root.is-proactive-recomposing .adj-circulation-segment {
  pointer-events: none;
}

.adj-proactive-recomposition-copy > i {
  width: 24px;
  height: 24px;
  margin-bottom: 2px;
  border: 2px solid color-mix(in srgb, var(--adj-blue) 20%, transparent);
  border-top-color: var(--adj-blue);
  border-radius: 50%;
  animation: adj-layout-thinking .84s linear infinite;
}

.adj-proactive-recomposition-copy > strong {
  font-size: .82rem;
  font-weight: 780;
  letter-spacing: -.01em;
}

.adj-proactive-recomposition-copy > span {
  color: #697580;
  font-size: .62rem;
  line-height: 1.5;
}

.adj-proactive-recomposition-copy > small {
  min-height: 1em;
  color: #7b858e;
  font-size: .54rem;
  font-variant-numeric: tabular-nums;
}

.adj-proactive-recomposition-progress {
  width: min(260px, 100%);
  height: 3px;
  margin-top: 5px;
  overflow: hidden;
  border-radius: 99px;
  background: color-mix(in srgb, var(--adj-blue) 12%, #f3f6f6);
}

.adj-proactive-recomposition-progress > i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--adj-blue);
  transition: width 180ms cubic-bezier(.2,.8,.35,1);
}

.adj-plan-editor.is-proactive-reveal {
  animation: adj-proactive-plan-reveal 240ms cubic-bezier(.2,.8,.35,1) both;
}

@keyframes adj-proactive-plan-reveal {
  from { opacity: .72; }
  to { opacity: 1; }
}

@keyframes adj-layout-thinking { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .adj-plan-preparing-copy > i,
  .adj-proactive-recomposition-copy > i,
  .adj-plan-editor.is-proactive-reveal { animation: none; }
  .adj-proactive-recomposition-progress > i { transition: none; }
}

.adj-block-3d-host {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  background: var(--adj-workspace-base);
  transition: opacity 520ms cubic-bezier(.22,.8,.2,1);
}

.adj-block-3d-host[data-block-build-state="building"]::before,
.adj-block-3d-host[data-block-floor-empty="true"]::before {
  position: absolute;
  z-index: 4;
  top: 76px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--adj-ink) 14%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--adj-workspace-base) 86%, transparent);
  color: var(--adj-muted);
  font: 600 11px/1.2 var(--font-sans, system-ui, sans-serif);
  letter-spacing: .01em;
  pointer-events: none;
  white-space: nowrap;
}

.adj-block-3d-host[data-block-build-state="building"]::before {
  content: "Building plan blocks " attr(data-block-build-count) " / " attr(data-block-build-total);
}

.adj-block-3d-host[data-block-floor-empty="true"]::before {
  content: "No rooms on this floor";
}

.adj-plan-editor[data-block-scene-style="voxel"] .adj-block-3d-host {
  background: var(--adj-workspace-base);
}
.adj-block-3d-canvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
  cursor: grab;
  touch-action: none;
}
.adj-block-3d-canvas.is-over-room { cursor: pointer; }
.adj-block-3d-host.is-dragging-room .adj-block-3d-canvas { cursor: grabbing; }
.adj-plan-editor[data-block-view="locked3d"] .adj-block-3d-canvas { cursor: move; }
.adj-plan-editor[data-block-view="orbit3d"] .adj-block-3d-canvas:active { cursor: grabbing; }
.adj-plan-editor[data-block-view] .adj-block-3d-canvas.is-over-room { cursor: pointer; }
.adj-plan-editor[data-block-view] .adj-block-3d-host.is-dragging-room .adj-block-3d-canvas { cursor: grabbing; }
.adj-block-3d-host.is-resizing-room,
.adj-block-3d-host.is-resizing-room .adj-block-3d-canvas { cursor: crosshair; }
/* A pinned or geometry-locked block reports that it will not move before the
   hand commits to the drag, the way the 2D block's pin mark does. */
.adj-plan-editor[data-block-view] .adj-block-3d-canvas.is-over-locked-room { cursor: not-allowed; }
.adj-block-3d-host.is-marquee-selecting .adj-block-3d-canvas { cursor: crosshair; }
/* The same marquee the 2D canvas draws, in the same ink, so a swept selection
   looks like one gesture across both projections. */
.adj-block-3d-marquee {
  position: absolute;
  z-index: 6;
  border: 1.25px dashed color-mix(in srgb, var(--adj-blue) 76%, var(--adj-gold));
  background: color-mix(in srgb, var(--adj-blue) 10%, transparent);
  pointer-events: none;
}

.adj-plan-editor > .adj-block-plan-svg {
  position: relative;
  z-index: 3;
  opacity: 1;
  transform: translateZ(0) scale(1);
  transform-origin: center;
  transition:
    opacity 560ms cubic-bezier(.22,.8,.2,1),
    transform 900ms cubic-bezier(.22,.8,.2,1),
    filter 520ms ease;
}
.adj-plan-editor[data-block-view="locked3d"] .adj-block-3d-host,
.adj-plan-editor[data-block-view="orbit3d"] .adj-block-3d-host {
  opacity: 1;
  pointer-events: auto;
}
.adj-plan-editor[data-block-view="locked3d"] > .adj-block-plan-svg,
.adj-plan-editor[data-block-view="orbit3d"] > .adj-block-plan-svg {
  opacity: 0;
  transform: scale(.975);
  filter: blur(1.5px);
  pointer-events: none;
}
/* Perimeter drafting lives entirely in the 3D scene: one selected extrusion
   disappears and its true outline becomes the editable object. */
.adj-plan-editor.is-perimeter-drafting[data-block-view="locked3d"] .adj-block-3d-host,
.adj-plan-editor.is-perimeter-drafting[data-block-view="orbit3d"] .adj-block-3d-host {
  pointer-events: auto;
}
.adj-plan-editor.is-perimeter-drafting[data-block-view="locked3d"] > .adj-block-plan-svg,
.adj-plan-editor.is-perimeter-drafting[data-block-view="orbit3d"] > .adj-block-plan-svg {
  opacity: 0;
  pointer-events: none;
}
.adj-plan-editor.is-perimeter-drafting .adj-block-3d-utilities { display: none; }
.adj-block-3d-host.is-editing-perimeter,
.adj-block-3d-host.is-editing-perimeter .adj-block-3d-canvas { cursor: crosshair; }
.adj-plan-editor.is-view-transitioning {
  --adj-money-shot-ring: color-mix(in srgb, var(--adj-gold) 35%, transparent);
  box-shadow: inset 0 0 0 1px var(--adj-money-shot-ring), 0 0 34px color-mix(in srgb, var(--adj-gold) 10%, transparent);
}
.adj-block-3d-host.is-focus-reveal {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--adj-focus) 32%, transparent),
    inset 0 0 54px color-mix(in srgb, var(--adj-focus) 8%, transparent);
  animation: adj-block-focus-camera 980ms cubic-bezier(.22,.8,.2,1);
}
@keyframes adj-block-focus-camera {
  0% { filter: saturate(.72) brightness(.86); }
  48% { filter: saturate(1.2) brightness(1.06); }
  100% { filter: saturate(1) brightness(1); }
}
.adj-plan-editor.is-view-transitioning[data-block-transition-to="2d"] .adj-block-3d-host {
  opacity: 1;
  pointer-events: none;
}
.adj-plan-editor.is-view-transitioning[data-block-transition-to="2d"] > .adj-block-plan-svg {
  opacity: .18;
  filter: none;
}
.adj-plan-editor .adj-preview-label,
.adj-plan-editor .adj-preview-va-source,
.adj-plan-editor .adj-initial-layout-status,
.adj-plan-editor .adj-plan-edited,
.adj-plan-editor .adj-block-settings-toggle,
.adj-plan-editor .adj-block-tune,
.adj-plan-editor .adj-room-hand {
  z-index: 7;
}

@media (prefers-reduced-motion: reduce) {
  .adj-block-view-rail > i,
  .adj-block-3d-host,
  .adj-plan-editor > .adj-block-plan-svg {
    transition-duration: 1ms !important;
  }
  .adj-block-3d-host.is-focus-reveal { animation: none; }
}

.adj-block-settings-toggle {
  position: absolute;
  z-index: 25;
  top: 8px;
  right: 8px;
  height: 25px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .08);
  color: var(--text-secondary);
  font-size: .5rem;
  font-weight: 750;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.adj-block-settings-toggle:hover,
.adj-block-settings-toggle.is-active {
  border-color: color-mix(in srgb, var(--adj-blue) 48%, var(--border));
  color: var(--adj-blue);
}

.adj-block-settings {
  top: 40px;
  right: 8px;
  width: min(268px, calc(100% - 16px));
  max-height: calc(100% - 50px);
  box-sizing: border-box;
}

.adj-block-settings .adj-gs-display-grid {
  grid-template-columns: minmax(0, 1fr);
}

.adj-gs-display-toggle[data-display="grid"] > i {
  border: 1px solid currentColor;
  border-radius: 3px;
  background-image:
    linear-gradient(to right, transparent 46%, currentColor 47%, currentColor 53%, transparent 54%),
    linear-gradient(to bottom, transparent 46%, currentColor 47%, currentColor 53%, transparent 54%);
  opacity: .82;
}

.adj-block-settings .adj-bp-slider > span {
  width: 72px;
  flex-basis: 72px;
}

.adj-block-settings .adj-bp-slider > output {
  width: 31px;
  flex: 0 0 31px;
  color: var(--adj-ink);
  font-size: .52rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.adj-block-settings .adj-gs-actions {
  gap: 5px;
}

.adj-block-settings .adj-gs-actions .adj-lens-action {
  flex: 1 1 0;
}

.adj-gs-format-note {
  display: block;
  color: var(--adj-muted);
  font-size: .5rem;
  font-weight: 650;
  letter-spacing: .035em;
}

.adj-block-settings .adj-gs-slider input[type="number"],
.adj-block-settings .adj-gs-slider select {
  min-width: 0;
  flex: 1;
  height: 25px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  padding: 0 5px;
  font: inherit;
  font-size: .56rem;
}

.adj-block-color-controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.adj-block-color-field {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}

.adj-block-color-field > span {
  width: 58px;
  flex: 0 0 58px;
  color: var(--adj-muted);
  font-size: .56rem;
}

.adj-block-color-field > select {
  min-width: 0;
  height: 25px;
  flex: 1 1 auto;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  padding: 0 5px;
  font: inherit;
  font-size: .56rem;
}

.adj-block-color-field:focus-within > select {
  border-color: color-mix(in srgb, var(--adj-blue) 54%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--adj-blue) 10%, transparent);
}

.adj-block-color-preset-actions {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
  margin-top: -2px;
}

.adj-block-color-preset-actions button,
.adj-block-color-field.is-color button,
.adj-block-color-clear {
  min-height: 22px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: color-mix(in srgb, var(--bg) 92%, var(--surface));
  color: var(--text-secondary);
  padding: 0 7px;
  font-size: .51rem;
  font-weight: 680;
  cursor: pointer;
}

.adj-block-color-preset-actions button:hover,
.adj-block-color-field.is-color button:hover,
.adj-block-color-clear:hover {
  border-color: color-mix(in srgb, var(--adj-blue) 48%, var(--border));
  color: var(--adj-blue);
}

.adj-block-color-preset-actions button:disabled,
.adj-block-color-field.is-color button:disabled {
  opacity: .34;
  cursor: default;
}

.adj-block-color-swatches {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  overflow: hidden;
  height: 13px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 5px;
}

.adj-block-color-swatches > i {
  min-width: 0;
  background: var(--adj-color-swatch);
}

.adj-block-color-custom {
  border-top: 1px solid color-mix(in srgb, var(--adj-line) 68%, transparent);
  padding-top: 4px;
}

.adj-block-color-custom > summary {
  color: var(--adj-muted);
  font-size: .54rem;
  font-weight: 720;
  cursor: pointer;
  list-style-position: inside;
}

.adj-block-color-custom[open] > summary {
  margin-bottom: 6px;
  color: var(--adj-ink);
}

.adj-block-color-custom > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.adj-block-color-field.is-color > input[type="color"] {
  width: 44px;
  height: 25px;
  flex: 0 0 44px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  padding: 2px;
  cursor: pointer;
}

.adj-block-color-field.is-color > button {
  flex: 1 1 auto;
}

.adj-block-color-clear {
  align-self: flex-end;
}

.adj-block-reference-name {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 2px;
}
.adj-block-reference-name strong { overflow: hidden; font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
.adj-block-reference-name span { flex: 0 0 auto; color: var(--adj-muted); font-size: .48rem; }

.adj-block-reference-plan {
  isolation: isolate;
  mix-blend-mode: multiply;
}

body:not(.light-theme) .adj-block-reference-plan { mix-blend-mode: screen; }

.adj-block-selection-overlay {
  position: absolute;
  z-index: 7;
  top: 8px;
  left: 50%;
  width: max-content;
  max-width: calc(100% - 180px);
  transform: translateX(-50%);
}

.adj-block-selection-overlay > .adj-selection-trigger {
  display: flex;
  height: 27px;
  box-sizing: border-box;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
  color: var(--text);
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.adj-block-selection-overlay > .adj-selection-trigger strong { font-size: 0.56rem; white-space: nowrap; }
.adj-block-selection-overlay > .adj-selection-trigger span { color: var(--text-secondary); font-size: 0.48rem; white-space: nowrap; }
.adj-block-selection-overlay > .adj-selection-trigger i { color: var(--text-secondary); font-size: 0.58rem; font-style: normal; transition: transform 140ms ease; }

.adj-block-selection-popover {
  position: absolute;
  top: 32px;
  left: 50%;
  display: grid;
  width: min(390px, calc(100vw - 48px));
  box-sizing: border-box;
  gap: 7px;
  padding: 8px;
  transform: translateX(-50%);
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -5px) scale(.985);
  transform-origin: top center;
  transition: opacity 120ms ease, transform 150ms cubic-bezier(.2,.8,.2,1), visibility 0s linear 150ms;
}

.adj-block-selection-overlay.is-open > .adj-block-selection-popover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
  transition-delay: 0s;
}

.adj-block-selection-popover .adj-selection-relations { justify-content: center; }
.adj-block-selection-popover .adj-selection-actions { justify-content: center; margin-left: 0; flex-wrap: wrap; }

.adj-block-selection-bulk,
.adj-selection-bulk {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: end;
  gap: 6px;
}

.adj-block-selection-bulk label,
.adj-selection-bulk label { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.adj-block-selection-bulk label span,
.adj-selection-bulk label span { color: var(--text-secondary); font-size: 0.44rem; font-weight: 750; letter-spacing: 0.045em; text-transform: uppercase; }
.adj-block-selection-bulk select,
.adj-block-selection-bulk button,
.adj-selection-bulk select,
.adj-selection-bulk button {
  min-width: 0;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-card);
  color: var(--text);
  padding: 0 6px;
  font-size: 0.5rem;
}

.adj-plan-editor.is-edited {
  border-color: color-mix(in srgb, var(--adj-gold) 46%, var(--adj-line));
}

.adj-block-plan-svg {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 250px;
  outline: none;
  touch-action: none;
  user-select: none;
  cursor: grab;
  overflow: hidden;
}

.adj-block-plan-svg.is-panning { cursor: grabbing; }

.adj-block-plan-svg:focus-visible {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--adj-blue) 50%, transparent);
}

.adj-block-plan-surface {
  fill: transparent;
}

/* Entry thresholds are compact site annotations, not coloured building
   edges. They stay on the shared 2D plan surface in every reading and use a
   screen-stable arrow/node so a zoomed-out floor still communicates access. */
.adj-plan-editor .adj-block-plan-entry-markers,
.adj-plan-editor .adj-block-plan-entry-marker,
.adj-plan-editor .adj-block-plan-entry-marker * {
  pointer-events: none;
}

.adj-block-plan-entry-marker {
  --adj-entry-marker-color: var(--adj-focus, #8aa4c3);
  color: var(--adj-entry-marker-color);
  vector-effect: non-scaling-stroke;
}

.adj-block-plan-entry-marker.is-materials-service {
  --adj-entry-marker-color: var(--adj-gold, #c59b56);
}

.adj-block-plan-entry-marker.is-staff {
  --adj-entry-marker-color: var(--adj-blue, #7ca1bf);
}

.adj-block-plan-entry-marker.is-urgent-ambulance {
  --adj-entry-marker-color: #c77c70;
}

.adj-block-plan-entry-marker.is-morgue-decedent,
.adj-block-plan-entry-marker.is-womens-health {
  --adj-entry-marker-color: color-mix(in srgb, var(--adj-muted, #9a9ca4) 82%, var(--adj-focus, #8aa4c3));
}

.adj-block-plan-entry-arrow {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.adj-block-plan-entry-node {
  fill: color-mix(in srgb, currentColor 20%, var(--bg-card, #fff));
  stroke: currentColor;
  stroke-width: 1.25px;
  vector-effect: non-scaling-stroke;
}

.adj-block-plan-entry-label {
  fill: currentColor;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 8.5px;
  font-weight: 680;
  letter-spacing: 0.015em;
  paint-order: stroke;
  stroke: color-mix(in srgb, var(--bg, #fff) 86%, transparent);
  stroke-width: 2.4px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* The registered VA plate and the live functional-area membrane are two
   coordinated readings of one Planner model. The source layer sits below the
   elastic live field, never owns input, and keeps every line/arrow crisp while
   Planner rooms remain the only editable geometry. */
.adj-plan-editor .adj-va-source-underlay,
.adj-plan-editor .adj-va-source-underlay * {
  pointer-events: none;
}

.adj-plan-editor .adj-va-source-underlay {
  opacity: 1;
  transition: opacity 180ms ease;
}

.adj-plan-editor .adj-va-source-underlay path {
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.adj-plan-editor .adj-va-source-underlay .va-planner-underlay-zone,
.adj-plan-editor .adj-va-source-underlay .va-planner-underlay-room {
  filter: saturate(0.72);
}

.adj-plan-editor .adj-va-source-underlay text {
  font-family: var(--font-sans, system-ui, sans-serif);
}

/* In the complete Plan reading, source copy is contextual and follows the
   same screen-aware semantic scale as live FA copy. The isolated VA reading
   intentionally keeps each source diagram's authored size, alignment,
   weight, baseline and colour attributes. */
.adj-plan-editor[data-block-reading="plan"] .adj-va-source-underlay text {
  fill: color-mix(in srgb, var(--adj-ink) 78%, var(--adj-muted));
  font-size: calc(var(--adj-fa-label-size, 2.4px) * var(--va-source-label-scale, 1));
  font-weight: 650;
  letter-spacing: 0.012em;
  paint-order: stroke;
  stroke: color-mix(in srgb, var(--bg) 78%, transparent);
  stroke-width: 0.7px;
  stroke-linejoin: round;
}

/* The isolated reading keeps the source document's relative heading/body
   hierarchy but translates its absolute page typography into Planner's live
   camera scale. Gallery/proof renderers remain untouched by this rule. */
.adj-plan-editor[data-block-reading="departments"] .adj-va-source-underlay .va-planner-underlay-label,
.adj-plan-editor[data-block-reading="va-diagrams"] .adj-va-source-underlay .va-planner-underlay-label {
  font-size: calc(var(--adj-fa-label-size, 2.4px) * 0.74 * var(--va-source-label-scale, 1));
}

.adj-plan-editor[data-block-reading="departments"] .adj-va-source-underlay .va-planner-underlay-label.is-room,
.adj-plan-editor[data-block-reading="va-diagrams"] .adj-va-source-underlay .va-planner-underlay-label.is-room {
  font-size: calc(var(--adj-fa-label-size, 2.4px) * 0.54 * var(--va-source-label-scale, 1));
  font-weight: 540;
}

.adj-plan-editor[data-block-reading="departments"] .adj-va-source-underlay .va-planner-underlay-annotation-label,
.adj-plan-editor[data-block-reading="va-diagrams"] .adj-va-source-underlay .va-planner-underlay-annotation-label {
  font-size: calc(var(--adj-fa-label-size, 2.4px) * 0.64 * var(--va-source-label-scale, 1));
}

/* VA Diagrams is the source-gallery reading. Keep the registered entity
   colours authored by the plate, but raise their surface presence enough that
   the semantic regions remain visible beneath the topology and department
   envelope layers. Functional Areas keeps its quiet source-line treatment. */
.adj-plan-editor[data-block-reading="departments"] .adj-va-source-underlay .va-planner-underlay-zone,
.adj-plan-editor[data-block-reading="va-diagrams"] .adj-va-source-underlay .va-planner-underlay-zone,
.adj-plan-editor[data-block-reading="departments"] .adj-va-source-underlay .va-planner-underlay-room,
.adj-plan-editor[data-block-reading="va-diagrams"] .adj-va-source-underlay .va-planner-underlay-room {
  filter: saturate(1.08);
  fill-opacity: 0.62;
  stroke-opacity: 0.9;
}

.adj-plan-editor[data-block-reading="departments"] .adj-va-source-underlay .va-planner-underlay-legend-label,
.adj-plan-editor[data-block-reading="va-diagrams"] .adj-va-source-underlay .va-planner-underlay-legend-label {
  font-size: calc(var(--adj-fa-label-size, 2.4px) * 0.58 * var(--va-source-label-scale, 1));
}

.adj-plan-editor[data-block-reading="plan"] .adj-va-source-underlay .va-planner-underlay-annotation-label {
  font-size: calc(var(--adj-fa-label-size, 2.4px) * 0.86);
  font-weight: 620;
}

.adj-plan-editor .adj-va-source-underlay .va-planner-underlay-leader,
.adj-plan-editor .adj-va-source-underlay .va-planner-underlay-annotation {
  fill: none;
  opacity: 0.82;
}

.adj-plan-editor .adj-va-source-underlay.is-flex {
  transition: opacity 180ms ease, transform 260ms cubic-bezier(0.22, 0.75, 0.2, 1);
}

.adj-block-plan-svg.is-workset .adj-va-source-underlay { opacity: 0.22; }

/* Planner readings are one shared state across the 2D drawing and the
   neighboring spatial preview. Keep the mode switch attribute-driven so a
   2D reading change does not rebuild every room node. */
.adj-plan-editor[data-block-reading="functional-areas"] .adj-va-source-underlay,
.adj-block-plan-svg[data-plan-reading="functional-areas"] .adj-va-source-underlay {
  display: none;
}

.adj-plan-editor[data-block-reading="plan"] .adj-va-source-underlay,
.adj-block-plan-svg[data-plan-reading="plan"] .adj-va-source-underlay {
  display: none;
}

/* Source plates remain behind the live membrane in the shared SVG order.
   Keep authored boundary, hatch, and relationship styles intact; the layer
   distinction comes from this context opacity and the solid live outline. */
.adj-plan-editor[data-block-reading="departments"] .adj-va-source-underlay,
.adj-plan-editor[data-block-reading="va-diagrams"] .adj-va-source-underlay {
  opacity: .72;
}
.adj-plan-editor[data-block-reading="departments"] .adj-va-source-underlay .va-planner-underlay-leader,
.adj-plan-editor[data-block-reading="va-diagrams"] .adj-va-source-underlay .va-planner-underlay-leader,
.adj-plan-editor[data-block-reading="departments"] .adj-va-source-underlay .va-planner-underlay-annotation,
.adj-plan-editor[data-block-reading="va-diagrams"] .adj-va-source-underlay .va-planner-underlay-annotation {
  opacity: .58;
}

/* At floor overview, source connectors obscure the registered area shapes.
   Their semantic paths stay mounted and return with source-level detail. */
.adj-block-plan-svg[data-plan-label-detail="0"] .adj-va-source-underlay .va-planner-underlay-relationship,
.adj-block-plan-svg[data-plan-label-detail="0"] .adj-va-source-underlay .va-planner-underlay-arrow,
.adj-block-plan-svg[data-plan-label-detail="1"] .adj-va-source-underlay .va-planner-underlay-relationship,
.adj-block-plan-svg[data-plan-label-detail="1"] .adj-va-source-underlay .va-planner-underlay-arrow {
  display: none;
}

/* Semantic zoom keeps authored source copy quiet at the far stop while the
   department and functional-area identity layers remain camera-allocated.
   Every label stays mounted for an instant reading switch and remains
   available through its title/ARIA metadata. */
.adj-block-plan-svg[data-plan-reading="plan"][data-plan-label-detail="0"] .adj-va-source-underlay text,
.adj-block-plan-svg[data-plan-reading="plan"][data-plan-label-detail="1"] .adj-va-source-underlay text,
.adj-block-plan-svg[data-plan-reading="departments"][data-plan-label-detail="0"] .adj-va-source-underlay text,
.adj-block-plan-svg[data-plan-reading="va-diagrams"][data-plan-label-detail="0"] .adj-va-source-underlay text,
.adj-block-plan-svg[data-plan-reading="departments"][data-plan-label-detail="1"] .adj-va-source-underlay text,
.adj-block-plan-svg[data-plan-reading="va-diagrams"][data-plan-label-detail="1"] .adj-va-source-underlay text,
.adj-block-plan-svg[data-plan-reading="functional-areas"][data-plan-label-detail="0"] .adj-va-source-underlay text,
.adj-block-plan-svg[data-plan-reading="functional-areas"][data-plan-label-detail="1"] .adj-va-source-underlay text {
  display: none;
}

.adj-plan-editor[data-block-reading="functional-areas"] .adj-edit-block:not(.is-circulation),
.adj-block-plan-svg[data-plan-reading="functional-areas"] .adj-edit-block:not(.is-circulation),
.adj-plan-editor[data-block-reading="departments"] .adj-edit-block:not(.is-circulation),
.adj-plan-editor[data-block-reading="va-diagrams"] .adj-edit-block:not(.is-circulation),
.adj-block-plan-svg[data-plan-reading="departments"] .adj-edit-block:not(.is-circulation),
.adj-block-plan-svg[data-plan-reading="va-diagrams"] .adj-edit-block:not(.is-circulation) {
  display: none;
}

.adj-plan-editor[data-block-reading="va-diagrams"] .adj-preview-neighborhoods,
.adj-block-plan-svg[data-plan-reading="va-diagrams"] .adj-preview-neighborhoods {
  display: none;
}

.adj-va-functional-diagram-rings {
  display: none;
  pointer-events: none;
}

.adj-plan-editor[data-block-reading="functional-areas"] .adj-va-functional-diagram-rings {
  display: block;
}

/* The source boundary uses the same world polygon in both readings. The
   solid, filled FA membrane remains the occupied room/corridor envelope. */
.adj-va-functional-diagram-source-outline {
  fill: none;
  stroke: color-mix(in srgb, var(--teal) 78%, var(--adj-ink));
  stroke-width: 1px;
  stroke-dasharray: 3 2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.adj-plan-editor[data-block-reading="functional-areas"] .adj-va-functional-diagram-outline,
.adj-plan-editor[data-block-reading="functional-areas"] .adj-va-functional-diagram-label {
  display: none;
}

.adj-plan-editor[data-block-reading="functional-areas"] .adj-va-functional-diagram-source-lines {
  opacity: .38;
}

.adj-plan-editor[data-block-reading="departments"] .adj-va-functional-diagram-ring,
.adj-plan-editor[data-block-reading="va-diagrams"] .adj-va-functional-diagram-ring {
  pointer-events: auto;
  cursor: grab;
}

.adj-plan-editor[data-block-reading="departments"] .adj-va-functional-diagram-ring:active,
.adj-plan-editor[data-block-reading="va-diagrams"] .adj-va-functional-diagram-ring:active {
  cursor: grabbing;
}

.adj-va-functional-diagram-outline {
  fill: color-mix(in srgb, var(--teal) 7%, transparent);
  fill-opacity: 0.15;
  stroke: color-mix(in srgb, var(--teal) 78%, var(--adj-ink));
  stroke-width: 1.2px;
  stroke-dasharray: 2.5 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}

.adj-va-functional-diagram-label {
  fill: color-mix(in srgb, var(--teal) 82%, var(--adj-ink));
  /* A plate ID is a child locator, never a second department heading. */
  font-size: calc(var(--adj-department-label-size, 2.8px) * 0.56);
  font-weight: 720;
  letter-spacing: 0.018em;
  text-anchor: middle;
  paint-order: stroke;
  stroke: color-mix(in srgb, var(--bg) 84%, transparent);
  stroke-width: 0.45px;
  pointer-events: none;
}

.adj-va-parent-envelopes {
  display: none;
  pointer-events: none;
}

.adj-plan-editor[data-block-reading="departments"] .adj-va-parent-envelope,
.adj-plan-editor[data-block-reading="va-diagrams"] .adj-va-parent-envelope {
  pointer-events: auto;
  cursor: grab;
}

.adj-plan-editor[data-block-reading="departments"] .adj-va-parent-envelope:active,
.adj-plan-editor[data-block-reading="va-diagrams"] .adj-va-parent-envelope:active {
  cursor: grabbing;
}

.adj-plan-editor[data-block-reading="plan"] .adj-va-parent-envelopes,
.adj-plan-editor[data-block-reading="departments"] .adj-va-parent-envelopes,
.adj-plan-editor[data-block-reading="va-diagrams"] .adj-va-parent-envelopes {
  display: block;
}

/* Functional Areas uses occupied department bounds as a quiet overview
   locator. Keep only the text identifier; the live FA membrane supplies the
   visible shape and the source diagram is intentionally out of this reading. */
.adj-plan-editor[data-block-reading="functional-areas"] .adj-va-parent-envelopes {
  display: block;
  pointer-events: none;
}
.adj-plan-editor[data-block-reading="functional-areas"] .adj-va-parent-envelope-hit {
  display: none;
}
.adj-plan-editor[data-block-reading="functional-areas"] .adj-va-parent-envelope-outline {
  fill: none;
  stroke-opacity: 0.55;
  stroke-width: 1.2px;
  pointer-events: stroke;
}
.adj-plan-editor[data-block-reading="functional-areas"] .adj-preview-corridor,
.adj-plan-editor[data-block-reading="departments"] .adj-preview-corridor,
.adj-plan-editor[data-block-reading="va-diagrams"] .adj-preview-corridor {
  pointer-events: none;
}
.adj-plan-editor[data-block-reading="plan"] .adj-va-functional-diagram-label {
  display: none;
}
.adj-plan-editor[data-block-reading="functional-areas"] .adj-va-parent-envelope-label {
  fill: color-mix(in srgb, var(--adj-ink) 86%, var(--adj-muted));
  font-size: calc(var(--adj-department-label-size, 2.8px) * 0.76);
}

.adj-plan-editor[data-block-reading="plan"] .adj-va-parent-envelopes {
  opacity: 0.58;
}
.adj-plan-editor[data-block-reading="plan"] .adj-va-parent-envelope-label {
  fill: color-mix(in srgb, var(--adj-ink) 82%, var(--adj-muted));
  font-weight: 720;
  paint-order: stroke;
  stroke: color-mix(in srgb, var(--bg) 84%, transparent);
  stroke-width: 0.46px;
}

.adj-plan-editor[data-block-reading="plan"] .adj-va-parent-envelope,
.adj-plan-editor[data-block-reading="plan"] .adj-va-parent-envelope-hit {
  pointer-events: none;
}

.adj-va-parent-envelope-hit {
  fill: transparent;
  fill-opacity: 0.001;
  stroke: transparent;
  stroke-width: 10px;
  pointer-events: all;
  vector-effect: non-scaling-stroke;
}

.adj-va-parent-envelope-outline {
  fill: color-mix(in srgb, var(--adj-department-color, var(--adj-gold)) 5%, transparent);
  fill-opacity: 0.1;
  stroke: color-mix(in srgb, var(--adj-department-color, var(--adj-gold)) 82%, var(--adj-ink));
  stroke-width: 1.65px;
  stroke-dasharray: 7 3.5;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}

.adj-va-parent-envelope-label {
  fill: color-mix(in srgb, var(--adj-department-color, var(--adj-gold)) 78%, var(--adj-ink));
  font-size: calc(var(--adj-department-label-size, 2.8px) * 0.76);
  font-weight: 760;
  letter-spacing: 0.02em;
  text-anchor: middle;
  paint-order: stroke;
  stroke: color-mix(in srgb, var(--bg) 82%, transparent);
  stroke-width: 0.42px;
  pointer-events: none;
}

.adj-plan-editor[data-block-reading="functional-areas"] .adj-preview-neighborhood {
  pointer-events: auto;
  cursor: grab;
}

.adj-plan-editor[data-block-reading="functional-areas"] .adj-preview-neighborhood:active {
  cursor: grabbing;
}

.adj-plan-editor[data-block-reading="functional-areas"] .adj-circulation-segments,
.adj-plan-editor[data-block-reading="functional-areas"] .adj-block-joints,
.adj-plan-editor[data-block-reading="functional-areas"] .adj-edit-blocks,
.adj-plan-editor[data-block-reading="functional-areas"] .adj-circulation-walls,
.adj-plan-editor[data-block-reading="functional-areas"] .adj-corridor-nodes,
.adj-plan-editor[data-block-reading="functional-areas"] .adj-block-measures,
.adj-plan-editor[data-block-reading="functional-areas"] .adj-block-perimeter-sketch-layer,
.adj-plan-editor[data-block-reading="departments"] .adj-circulation-segments,
.adj-plan-editor[data-block-reading="va-diagrams"] .adj-circulation-segments,
.adj-plan-editor[data-block-reading="departments"] .adj-block-joints,
.adj-plan-editor[data-block-reading="va-diagrams"] .adj-block-joints,
.adj-plan-editor[data-block-reading="departments"] .adj-edit-blocks,
.adj-plan-editor[data-block-reading="va-diagrams"] .adj-edit-blocks,
.adj-plan-editor[data-block-reading="departments"] .adj-circulation-walls,
.adj-plan-editor[data-block-reading="va-diagrams"] .adj-circulation-walls,
.adj-plan-editor[data-block-reading="departments"] .adj-corridor-nodes,
.adj-plan-editor[data-block-reading="va-diagrams"] .adj-corridor-nodes,
.adj-plan-editor[data-block-reading="departments"] .adj-block-measures,
.adj-plan-editor[data-block-reading="va-diagrams"] .adj-block-measures,
.adj-plan-editor[data-block-reading="departments"] .adj-block-perimeter-sketch-layer,
.adj-plan-editor[data-block-reading="va-diagrams"] .adj-block-perimeter-sketch-layer {
  display: none;
}

.adj-plan-editor .adj-preview-neighborhoods rect,
.adj-plan-editor .adj-preview-neighborhoods {
  /* Functional-area mats are visual feedback only. Room faces and their edge
     grippers remain the only draggable or magnetic targets in the plan. */
  pointer-events: none;
}
.adj-plan-editor .adj-preview-neighborhoods path {
  opacity: 1;
  stroke: color-mix(in srgb, var(--adj-ink) 20%, transparent);
  stroke-width: 0.8;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.adj-plan-editor .adj-preview-neighborhoods path {
  fill-opacity: 0.1;
  stroke-dasharray: none;
}
.adj-plan-editor .adj-preview-neighborhoods .adj-preview-neighborhood-outline {
  fill-opacity: 0.1;
  stroke: color-mix(in srgb, var(--adj-ink) 20%, transparent);
  stroke-width: 0.8px;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.adj-plan-editor .adj-preview-neighborhoods text {
  fill: var(--adj-muted);
  font-size: var(--adj-fa-local-size, var(--adj-fa-label-size, 4.4px));
  font-weight: 650;
  letter-spacing: 0.018em;
  pointer-events: none;
  text-rendering: geometricPrecision;
}
.adj-plan-editor .adj-preview-neighborhoods .adj-preview-neighborhood-label {
  /* Perimeter type is already laid over the quiet FA wash. A stroke grows
     inward as well as outward and closes the counters at larger zoom levels. */
  paint-order: normal;
  stroke: none;
}

/* Functional-area labels follow the semantic-zoom budget above. One caption
   remains attached to each genuinely separate live island. */
.adj-plan-editor .adj-preview-neighborhoods .adj-preview-neighborhood-label-guide {
  fill: none;
  stroke: none;
  pointer-events: none;
}

.adj-plan-editor[data-block-reading="plan"] .adj-preview-neighborhood-outline {
  fill: none;
  stroke-opacity: .35;
}

.adj-plan-editor[data-block-reading="functional-areas"] .adj-preview-neighborhood-outline {
  pointer-events: all;
  fill-opacity: 0.24;
  stroke: color-mix(in srgb, var(--adj-ink) 52%, transparent);
  stroke-width: 1.15px;
}

.adj-plan-editor[data-block-reading="functional-areas"] .adj-preview-neighborhood-label {
  fill: color-mix(in srgb, var(--adj-ink) 88%, var(--adj-muted));
  font-weight: 720;
  paint-order: stroke;
  stroke: color-mix(in srgb, var(--bg) 82%, transparent);
  stroke-width: 0.5px;
}

/* Selected, hovered, and focused groups are promoted by the camera allocator
   and can carry their full department/FA name without turning every island
   into a heading. */
.adj-plan-editor .adj-va-parent-envelope-label.is-label-priority,
.adj-plan-editor .adj-va-functional-diagram-label.is-label-priority,
.adj-plan-editor .adj-preview-neighborhood.is-label-priority .adj-preview-neighborhood-label {
  fill: var(--adj-ink);
  font-weight: 780;
  paint-order: stroke;
  stroke: color-mix(in srgb, var(--bg) 90%, transparent);
  stroke-width: 0.65px;
}

.adj-plan-editor .adj-block-joint line {
  pointer-events: none;
  vector-effect: non-scaling-stroke;
  stroke: var(--adj-gold);
  stroke-width: 3;
  stroke-linecap: round;
}

.adj-block-snap-guide {
  pointer-events: none;
  vector-effect: non-scaling-stroke;
  stroke: var(--teal);
  stroke-width: 3;
  stroke-linecap: round;
}

.adj-edit-block {
  /* Room copy is one clear tonal shade of its own face—no visual effects. */
  --adj-block-tag-fill: color-mix(in srgb, var(--adj-block-fill, #7895a5) 42%, #071923);
  cursor: grab;
  outline: none;
}

body.light-theme .adj-edit-block {
  --adj-block-tag-fill: color-mix(in srgb, var(--adj-block-fill, #7895a5) 28%, #fff);
}

.adj-edit-block:active { cursor: grabbing; }

.adj-block-hit-target {
  fill: transparent;
  stroke: transparent;
  pointer-events: all;
}

.adj-edit-block .adj-block-shape {
  opacity: 0.82;
  stroke: color-mix(in srgb, var(--adj-ink) 42%, transparent);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 1.5px 1.8px rgba(0, 0, 0, 0.12));
  transition: opacity 120ms ease, stroke 120ms ease, filter 140ms ease;
}

.adj-block-plan-svg[data-plan-semantic-lod="whole-building"] .adj-block-shape {
  stroke-width: 0.55;
  filter: none;
}

.adj-edit-block:hover .adj-block-shape {
  opacity: 1;
  stroke: color-mix(in srgb, var(--adj-ink) 72%, var(--adj-gold));
  filter: drop-shadow(0 2.5px 3px rgba(0, 0, 0, 0.18));
}

.adj-edit-block.is-graph-hot .adj-block-shape {
  opacity: 1;
  stroke: var(--adj-blue);
  stroke-width: 2.25;
}

.adj-edit-block.is-selected .adj-block-shape {
  opacity: 1;
  stroke: var(--text);
  stroke-width: 2;
}
.adj-edit-block.is-perimeter-edit .adj-block-shape {
  stroke: #e34b4b;
  stroke-width: 1.55;
  stroke-dasharray: none;
  stroke-linejoin: round;
}
.adj-edit-block.is-perimeter-edit .adj-block-handle-mark,
.adj-edit-block.is-perimeter-edit .adj-block-notch-mark {
  display: none;
}
.adj-edit-block.is-perimeter-draw .adj-block-handle,
.adj-edit-block.is-perimeter-draw .adj-block-notch-handle,
.adj-edit-block.is-perimeter-draw .adj-block-handle-hit,
.adj-edit-block.is-perimeter-draw .adj-block-notch-hit { pointer-events: none !important; }
.adj-block-perimeter-sketch {
  stroke: #e34b4b;
  stroke-width: 1.25;
  stroke-dasharray: 3 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.adj-block-perimeter-sketch-layer { pointer-events: none; }
.adj-block-perimeter-rubber-band {
  fill: none;
  stroke: #e34b4b;
  stroke-width: 1.1;
  stroke-dasharray: 3 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.adj-block-perimeter-construction {
  fill: none;
  stroke: color-mix(in srgb, #e34b4b 55%, var(--adj-muted));
  stroke-width: 0.75;
  stroke-dasharray: 2 3;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.adj-block-perimeter-sketch-point.is-pending {
  fill: var(--bg);
  stroke: #e34b4b;
  stroke-width: 1.6;
}
.adj-block-perimeter-pen-handle {
  fill: var(--bg);
  stroke: #e34b4b;
  stroke-width: 0.9;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.adj-plan-editor.is-perimeter-drafting .adj-block-plan-svg { cursor: default; }
.adj-plan-editor.is-perimeter-drafting .adj-block-plan-svg:focus { outline: none; }
.adj-plan-editor.is-perimeter-drafting:has(.adj-block-perimeter-rail button:nth-child(2).is-active) .adj-block-plan-svg { cursor: crosshair; }
.adj-block-perimeter-sketch.is-complete { stroke-dasharray: none; opacity: 0.8; }
.adj-block-perimeter-sketch-point { fill: #e34b4b; stroke: var(--bg); stroke-width: 1; pointer-events: none; }
.adj-block-perimeter-profile-anchor {
  fill: var(--bg);
  stroke: #e34b4b;
  stroke-width: 0.85;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.adj-block-perimeter-profile-hover {
  fill: #e34b4b;
  stroke: var(--bg);
  stroke-width: 0.9;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.adj-perimeter-reference-guides { pointer-events: none; }
.adj-perimeter-reference-guide {
  fill: none;
  stroke: var(--adj-muted);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
  opacity: 0.7;
  vector-effect: non-scaling-stroke;
}
.adj-perimeter-reference-guide.is-captured {
  stroke: var(--adj-gold);
  stroke-width: 1.35;
  stroke-dasharray: 5 3;
  opacity: 1;
}
.adj-perimeter-reference-origin {
  fill: var(--adj-gold);
  stroke: var(--bg);
  stroke-width: 0.8;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.adj-edit-block.is-workset-context .adj-block-shape {
  opacity: 0.38;
}

.adj-edit-block.is-workset-background .adj-block-shape,
.adj-edit-block.is-workset-background text {
  opacity: 0.1;
}

.adj-edit-block.is-workset-background:hover .adj-block-shape,
.adj-edit-block.is-workset-background:focus-visible .adj-block-shape {
  opacity: 0.78;
  stroke: var(--adj-focus);
  stroke-width: 1.8;
}

.adj-edit-block.is-workset-background:hover text,
.adj-edit-block.is-workset-background:focus-visible text { opacity: 0.92; }

.adj-edit-block.is-workset-focus .adj-block-shape {
  opacity: 1;
}

.adj-block-plan-svg.is-workset .adj-preview-neighborhoods { opacity: 0.14; transition: opacity 180ms ease; }
/* A non-focus room is a quiet index card waiting just beyond the focused plan:
   its low-chroma face masks the rail behind it, while its dashed edge keeps it
   distinct from the more saturated Cards in Hand. */
.adj-edit-block.is-focus-tray {
  cursor: grab;
  opacity: 1;
  touch-action: none;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 260ms cubic-bezier(.16,.96,.28,1), opacity 160ms ease, filter 180ms ease;
}
.adj-edit-block.is-focus-tray .adj-block-shape {
  fill: color-mix(in srgb, var(--adj-block-fill) 7%, var(--adj-workspace-base, #fbfcfd));
  fill-opacity: 1;
  opacity: 1;
  stroke: color-mix(in srgb, var(--adj-block-fill) 56%, var(--adj-line));
  stroke-width: 1px;
  stroke-dasharray: 3 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: fill-opacity 180ms ease, stroke 180ms ease, filter 180ms ease;
}
/* Rail copy belongs to the card, not to the room. Once a card is pulled free of
   its edge the block's own labelling takes over and these lines step aside. */
.adj-edit-block:not(.is-focus-tray) .adj-focus-rail-card-name,
.adj-edit-block:not(.is-focus-tray) .adj-focus-rail-card-nsf,
.adj-edit-block:not(.is-focus-tray) .adj-focus-rail-card-area { display: none; }
.adj-edit-block.is-focus-tray text {
  opacity: 1;
  paint-order: normal;
  stroke: none;
}
.adj-edit-block.is-focus-tray .adj-block-code {
  fill: color-mix(in srgb, var(--adj-block-fill) 82%, var(--adj-ink));
  font-size: var(--adj-focus-card-code-size, 4px);
  font-weight: 850;
  letter-spacing: 0.085em;
}
.adj-edit-block.is-focus-tray .adj-focus-rail-card-nsf {
  fill: var(--adj-muted);
  font-size: var(--adj-focus-card-nsf-size, 3.7px);
  font-weight: 720;
  letter-spacing: 0.03em;
}
.adj-edit-block.is-focus-tray .adj-focus-rail-card-name {
  fill: var(--adj-ink);
  font-size: var(--adj-focus-card-name-size, 5px);
  font-weight: 740;
  letter-spacing: 0;
}
.adj-edit-block.is-focus-tray .adj-focus-rail-card-area {
  fill: var(--adj-muted);
  font-size: var(--adj-focus-card-area-size, 3.9px);
  font-weight: 590;
}
.adj-edit-block.is-focus-tray .adj-focus-rail-card-shape {
  stroke-linejoin: round;
}
/* Hover raises the card the way the room hand raises its own: further out of
   the edge, never clear of it. The travel is a measured share of the part still
   tucked away, set per card in plan units, so a zoomed plan peeks by the same
   proportion instead of throwing the whole card onto the table. */
.adj-edit-block.is-focus-tray[data-focus-edge="left"]:hover,
.adj-edit-block.is-focus-tray[data-focus-edge="left"]:focus-visible { transform: translate3d(var(--adj-focus-peek, 28px), 0, 0) scale(1.012); }
.adj-edit-block.is-focus-tray[data-focus-edge="right"]:hover,
.adj-edit-block.is-focus-tray[data-focus-edge="right"]:focus-visible { transform: translate3d(calc(var(--adj-focus-peek, 28px) * -1), 0, 0) scale(1.012); }
.adj-edit-block.is-focus-tray[data-focus-edge="top"]:hover,
.adj-edit-block.is-focus-tray[data-focus-edge="top"]:focus-visible { transform: translate3d(0, var(--adj-focus-peek, 20px), 0) scale(1.012); }
/* Picking a card up strengthens the same dashed index line without turning it
   into an in-hand card or exposing the rail behind it. */
.adj-edit-block.is-focus-tray:hover,
.adj-edit-block.is-focus-tray:focus-visible { opacity: 1; outline: none; }
.adj-edit-block.is-focus-tray:hover .adj-block-shape,
.adj-edit-block.is-focus-tray:focus-visible .adj-block-shape {
  fill: color-mix(in srgb, var(--adj-block-fill) 11%, var(--adj-workspace-base, #fbfcfd));
  fill-opacity: 1;
  opacity: 1;
  stroke: color-mix(in srgb, var(--adj-block-fill) 68%, var(--adj-ink));
  stroke-width: 1px;
  stroke-dasharray: 3 2;
  filter: drop-shadow(0 3px 8px color-mix(in srgb, var(--adj-block-fill) 16%, transparent));
}
.adj-edit-block.is-focus-tray:active { cursor: grabbing; }
.adj-edit-block.is-focus-pulling {
  transform-box: fill-box;
  transform-origin: center;
}
.adj-edit-block.is-focus-pulling .adj-block-shape {
  opacity: .96;
  filter: drop-shadow(0 3px 6px color-mix(in srgb, var(--adj-ink) 22%, transparent));
}

/* Frontier floor-plan drawer. It is deliberately quieter than the primary
   Generate control: an external proposal is a study source, not the planner's
   deterministic answer. */
.adj-ai-plan {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 2px 1px 16px;
}

.adj-ai-plan__intro {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--adj-blue) 28%, var(--adj-line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--adj-blue) 8%, var(--surface));
}

.adj-ai-plan__intro > span {
  color: var(--adj-muted);
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.adj-ai-plan__intro > strong { color: var(--adj-ink); font-size: 0.84rem; }
.adj-ai-plan__intro p,
.adj-ai-plan__privacy,
.adj-ai-plan__status { margin: 0; color: var(--adj-muted); font-size: 0.64rem; line-height: 1.45; }

.adj-ai-plan > label,
.adj-ai-plan__settings label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--adj-muted);
  font-size: 0.59rem;
  font-weight: 720;
}

.adj-ai-plan label small { font-weight: 500; opacity: 0.7; }

.adj-ai-plan input,
.adj-ai-plan select,
.adj-ai-plan textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--adj-line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--adj-ink);
  font: inherit;
  font-size: 0.68rem;
}

.adj-ai-plan input,
.adj-ai-plan select { height: 31px; padding: 0 8px; }
.adj-ai-plan textarea { min-height: 76px; padding: 8px; resize: vertical; line-height: 1.4; }

.adj-ai-plan__settings {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--adj-line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface) 94%, var(--bg));
}

.adj-ai-plan__settings > button { align-self: flex-start; }
.adj-ai-plan__run { min-height: 34px; }
.adj-ai-plan__status {
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--adj-blue) 35%, var(--adj-line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--adj-blue) 5%, var(--surface));
  color: var(--adj-ink);
}

.adj-sketch-reading-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--adj-blue) 35%, var(--adj-line));
  border-radius: 10px;
  background: linear-gradient(105deg, color-mix(in srgb, var(--adj-blue) 8%, var(--surface)), color-mix(in srgb, var(--adj-gold) 5%, var(--surface)));
}

.adj-sketch-reading-banner span {
  color: var(--adj-muted);
  font-size: 0.54rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.adj-sketch-reading-banner strong {
  overflow: hidden;
  color: var(--adj-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.7rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adj-sketch-reading-banner button {
  height: 25px;
  padding: 0 8px;
  border: 1px solid var(--adj-line);
  border-radius: 6px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--adj-muted);
  font-size: 0.56rem;
  font-weight: 700;
  cursor: pointer;
}

.adj-add-kinds button {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  text-align: left;
}

.adj-add-kinds button > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}

.adj-add-kinds button strong { color: inherit; font-size: 0.68rem; }
.adj-add-kinds button small { color: var(--adj-muted); font-size: 0.54rem; font-weight: 550; }

.adj-kind-graphic {
  width: 31px;
  height: 25px;
  flex: 0 0 auto;
  overflow: visible;
  color: var(--adj-muted);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.adj-add-kinds button.is-active .adj-kind-graphic { color: var(--adj-gold); stroke-width: 1.7; }

.adj-edit-block .adj-block-shape.is-source-open-work-area {
  fill-opacity: 0.24;
  stroke-dasharray: 3 3;
}
.adj-edit-block.is-locked .adj-block-shape {
  stroke-dasharray: 3 2;
}

.adj-edit-block.is-locked { cursor: not-allowed; }

.adj-block-lasso {
  fill: color-mix(in srgb, var(--adj-blue) 10%, transparent);
  stroke: color-mix(in srgb, var(--adj-blue) 76%, var(--adj-gold));
  stroke-width: 1.25;
  stroke-dasharray: 6 4;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.adj-preview-corridor.is-authored {
  fill: color-mix(in srgb, #4fa5ab 38%, transparent);
  stroke: color-mix(in srgb, #4fa5ab 72%, var(--adj-ink));
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.adj-preview-corridor.is-authored.is-union {
  /* One quiet circulation silhouette: no stacked seams at shared route arms. */
  stroke: none;
}

.adj-preview-corridor.is-authored.is-ribbon {
  fill: color-mix(in srgb, #4fa5ab 46%, transparent);
  filter: drop-shadow(0 2px 3px rgba(20, 70, 74, 0.18));
  transition: fill 150ms ease, filter 150ms ease;
}

.adj-preview-corridor.is-authored.is-ribbon.is-quality-review {
  fill: color-mix(in srgb, #caa45c 42%, transparent);
  filter: drop-shadow(0 2px 3px rgba(95, 70, 24, 0.18));
}

.adj-preview-corridor.is-authored.is-ribbon.is-quality-invalid {
  fill: color-mix(in srgb, #c77a5d 46%, transparent);
  filter: drop-shadow(0 2px 4px rgba(106, 49, 31, 0.22));
}

.adj-circulation-segment-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 18;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  cursor: crosshair;
  pointer-events: stroke;
}

.adj-circulation-segment.is-selected .adj-circulation-segment-hit {
  stroke: color-mix(in srgb, #8bd6d8 18%, transparent);
  stroke-width: 20;
}

.adj-circulation-width-control { pointer-events: none; }
.adj-circulation-width-control circle {
  fill: color-mix(in srgb, var(--surface) 92%, #4fa5ab);
  stroke: #8bd6d8;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.22));
}
.adj-circulation-width-control text {
  fill: var(--text);
  font-size: 3.8px;
  font-weight: 760;
  text-anchor: middle;
}

.adj-preview-corridor.is-space {
  fill: color-mix(in srgb, #4fa5ab 20%, var(--bg));
  stroke-width: 1.4;
  stroke-dasharray: 3 2;
}

.adj-authored-corridor-line {
  stroke: color-mix(in srgb, #4fa5ab 80%, var(--adj-ink));
  stroke-width: 1.2;
  stroke-dasharray: 4 3;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.adj-corridor-node { cursor: crosshair; }
.adj-corridor-node:active { cursor: none; }
.adj-corridor-node circle {
  display: none;
}

.adj-corridor-node .adj-circulation-center-grab {
  display: block;
  fill: #4fa5ab;
  stroke: var(--surface);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  cursor: crosshair;
  pointer-events: all;
}

.adj-corridor-node .adj-circulation-center-grab:hover,
.adj-corridor-node.is-selected .adj-circulation-center-grab {
  fill: #277a82;
  stroke-width: 2.5;
}

.adj-corridor-node.is-embedded .adj-circulation-center-grab {
  fill: #d7f4f1;
  stroke: #277a82;
  filter: drop-shadow(0 1px 3px color-mix(in srgb, #277a82 42%, transparent));
}

.adj-circulation-brush-preview {
  opacity: 0;
  pointer-events: none;
  transition: opacity 70ms ease;
}
.adj-circulation-brush-preview.is-active { opacity: 1; }
.adj-circulation-brush-membrane,
.adj-circulation-brush-stroke {
  fill: var(--adj-circulation-brush-fill, color-mix(in srgb, #53b5bb 42%, var(--surface)));
  stroke: color-mix(in srgb, #277a82 32%, transparent);
  stroke-width: 0.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.adj-circulation-brush-membrane {
  opacity: 0;
  filter: drop-shadow(0 1px 2px color-mix(in srgb, #277a82 20%, transparent));
}
.adj-circulation-brush-preview.is-membrane .adj-circulation-brush-membrane { opacity: 0.96; }
.adj-circulation-brush-stroke { opacity: 0; }
.adj-circulation-brush-preview.is-ribbon .adj-circulation-brush-stroke { opacity: 0.92; }
.adj-circulation-brush-head {
  fill: color-mix(in srgb, #8bd6d8 22%, transparent);
  stroke: #277a82;
  stroke-width: 1.5;
  stroke-dasharray: 3 2;
  vector-effect: non-scaling-stroke;
  opacity: 0;
}
.adj-circulation-brush-preview.is-ribbon .adj-circulation-brush-head { opacity: 1; }
.adj-circulation-brush-label {
  fill: color-mix(in srgb, #277a82 88%, var(--adj-ink));
  font: 700 9px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 3;
  stroke-linejoin: round;
  text-anchor: middle;
  vector-effect: non-scaling-stroke;
  opacity: 0;
}
.adj-circulation-brush-preview.is-ribbon .adj-circulation-brush-label { opacity: 1; }
.adj-edit-block.is-circulation-brush-target .adj-block-shape {
  filter: drop-shadow(0 0 6px color-mix(in srgb, #53b5bb 78%, transparent));
  stroke: #a7ece8;
  stroke-width: 2.4;
}

.adj-corridor-node rect {
  fill: var(--surface);
  stroke: color-mix(in srgb, #4fa5ab 82%, var(--adj-ink));
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  transition: fill 150ms ease, stroke 150ms ease;
}

.adj-corridor-node.is-door rect {
  fill: color-mix(in srgb, #4fa5ab 24%, var(--surface));
}

.adj-corridor-node.is-lobby rect {
  fill: color-mix(in srgb, #4fa5ab 34%, var(--surface));
  stroke-width: 2.4;
}

.adj-corridor-node.is-unplaced rect {
  fill: color-mix(in srgb, #4fa5ab 10%, var(--surface));
  stroke-dasharray: 3 2;
}

.adj-corridor-node.is-selected rect {
  fill: color-mix(in srgb, #4fa5ab 28%, var(--surface));
  stroke: #4fa5ab;
  stroke-width: 2.6;
}

/* Once a route has a shaded body, its topology nodes stay interactive but
   disappear visually. The circulation reads as one cutout, not dots on top. */
.adj-corridor-node.is-embedded rect,
.adj-corridor-node.is-embedded.is-selected rect {
  fill: transparent;
  stroke: transparent;
  filter: none;
}

.adj-corridor-node.is-pocket rect {
  fill: color-mix(in srgb, #4fa5ab 44%, var(--surface));
  stroke-dasharray: none;
  filter: drop-shadow(0 0 5px color-mix(in srgb, #8bd6d8 34%, transparent));
}

.adj-corridor-node.is-restrained:not(.is-unplaced) rect { stroke-dasharray: 2.5 2; }
.adj-corridor-node.is-quality-review:not(.is-embedded) rect { stroke: #caa45c; }
.adj-corridor-node.is-quality-invalid:not(.is-embedded) rect {
  fill: color-mix(in srgb, #c77a5d 18%, var(--surface));
  stroke: #c77a5d;
}

.adj-circulation-wall {
  cursor: context-menu;
  stroke: color-mix(in srgb, #65c4c5 86%, var(--text));
  stroke-width: 3;
  stroke-linecap: butt;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 2px color-mix(in srgb, #8bd6d8 36%, transparent));
  transition: stroke-width 140ms ease, stroke 140ms ease, opacity 140ms ease;
}

.adj-circulation-access-seam {
  /* A highlighted wall seam, not a promise of a designed door or opening. */
  shape-rendering: geometricPrecision;
}

.adj-circulation-wall:hover { stroke: #a7ece8; stroke-width: 4; }
.adj-circulation-wall.is-attached {
  stroke: #73d0cd;
  stroke-width: 3.5;
}
.adj-circulation-wall.is-loose {
  cursor: pointer;
  stroke: color-mix(in srgb, #4fa5ab 74%, var(--text-muted));
  stroke-width: 2;
  stroke-dasharray: 1.5 2.5;
  opacity: .72;
}
.adj-circulation-wall.is-loose:hover {
  stroke: #9ce5e3;
  stroke-width: 3;
  stroke-dasharray: none;
  opacity: 1;
}
.adj-circulation-wall.is-detaching {
  stroke: #dba978;
  stroke-dasharray: 2 2;
  animation: adj-circulation-tension 210ms ease-in-out infinite alternate;
}

@keyframes adj-circulation-tension {
  from { opacity: 1; stroke-width: 4.5; }
  to { opacity: .42; stroke-width: 7; }
}
.adj-circulation-wall.is-releasing {
  pointer-events: none;
  animation: adj-circulation-release 300ms ease-out both;
}

@keyframes adj-circulation-release {
  from { opacity: 1; stroke-width: 5; }
  to { opacity: 0; stroke-width: 11; }
}

/* White is for marks drawn over a room's own fill. A focus-rail card is a card
   in hand sitting on the workspace, so its copy keeps the hand's ink and halo
   rather than being bleached to the block-face treatment. */
.adj-edit-block text:not(.adj-block-code):not(.adj-block-name):not(.adj-focus-rail-card-name):not(.adj-focus-rail-card-nsf):not(.adj-focus-rail-card-area) {
  fill: #fff;
  stroke: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  pointer-events: none;
}

.adj-circulation-edge-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 14;
  stroke-linecap: butt;
  vector-effect: non-scaling-stroke;
  pointer-events: stroke;
  cursor: grab;
  transition: stroke 90ms ease;
}

/* There is no resting handle. Hover only whispers which edge Ctrl can pinch. */
.adj-circulation-edge-hit:hover {
  stroke: color-mix(in srgb, #a9edf0 18%, transparent);
}

.adj-circulation-edge-hit:active { cursor: grabbing; }

.adj-circulation-branch-preview {
  opacity: 0;
  pointer-events: none;
  transition: opacity 90ms ease;
}
.adj-circulation-branch-preview.is-active { opacity: 1; }
.adj-circulation-jelly-ribbon {
  /* The pull is literally an extension of its parent circulation field.
     Its SVG silhouette supplies the liquid reading; a remixed fill, highlight,
     or outline would make it read as a separate object. */
  fill: var(--adj-circulation-pull-fill, #53b5bb);
  stroke: none;
  vector-effect: non-scaling-stroke;
  filter: none;
}

.adj-circulation-jelly-sheen {
  display: none;
}

.adj-circulation-jelly-root {
  display: none;
}

.adj-circulation-branch-preview.is-snapped .adj-circulation-jelly-ribbon {
  fill: var(--adj-circulation-pull-fill, #53b5bb);
  filter: none;
}

/* Wetting a room face: the foot has landed on the wall — settle the breathing
   animation and firm the fill so it reads as grabbed rather than mid-flight. */
.adj-circulation-branch-preview.is-wet .adj-circulation-jelly-ribbon {
  fill: var(--adj-circulation-pull-fill, #53b5bb);
  filter: none;
}

/* At an exposed corner the foot rolls around one vertex instead of implying
   that a blocked adjacent room face is part of the connection. */
.adj-circulation-branch-preview.is-corner-wet .adj-circulation-jelly-ribbon {
  filter: none;
}

.adj-circulation-branch-preview.is-stretched .adj-circulation-jelly-ribbon { opacity: 0.94; }

.adj-edit-scope {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 27px;
  padding: 0 5px 0 9px;
  border: 1px solid color-mix(in srgb, #8bd6d8 38%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, #4fa5ab 10%, var(--surface));
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}
.adj-edit-scope i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8bd6d8;
  box-shadow: 0 0 0 3px color-mix(in srgb, #8bd6d8 18%, transparent);
}
.adj-edit-scope strong { color: var(--text); font-size: 10px; }
.adj-edit-scope button {
  width: 19px;
  height: 19px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
}
.adj-edit-scope button:hover { background: color-mix(in srgb, var(--text) 9%, transparent); color: var(--text); }

.adj-block-copy { pointer-events: none; }
.adj-edit-block .adj-block-code {
  fill: var(--adj-block-tag-fill);
  font-size: var(--adj-block-code-size, 5.2px);
  font-weight: 790;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.075em;
  opacity: 0.98;
}
.adj-edit-block .adj-block-name {
  fill: var(--adj-block-tag-fill);
  font-size: var(--adj-block-name-size, 6.5px);
  font-weight: 650;
  letter-spacing: -0.012em;
  opacity: var(--adj-block-name-opacity, 1);
  transition: opacity 90ms linear;
}
.adj-edit-block .adj-block-code,
.adj-edit-block .adj-block-name {
  paint-order: normal;
  stroke: none;
  text-rendering: geometricPrecision;
  transition: fill 240ms ease, opacity 90ms linear;
}
.adj-block-copy.is-primary .adj-block-code { opacity: 0.96; }
.adj-block-copy.is-primary .adj-block-name { font-weight: 690; }

.adj-block-handle-hit { fill: transparent; stroke: none; pointer-events: all; }
.adj-block-handle-mark {
  fill: none;
  stroke: color-mix(in srgb, var(--adj-gold) 70%, var(--surface));
  stroke-width: 2.4px;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: .92;
  filter: drop-shadow(0 0 1.5px color-mix(in srgb, var(--adj-ink) 55%, transparent));
  transition: stroke 140ms ease, opacity 140ms ease, filter 140ms ease;
  pointer-events: none;
}
.adj-block-handle:hover .adj-block-handle-mark {
  stroke: var(--adj-gold);
  opacity: 1;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--adj-gold) 52%, transparent));
}

.adj-block-handle.is-n,
.adj-block-handle.is-s { cursor: ns-resize; }
.adj-block-handle.is-e,
.adj-block-handle.is-w { cursor: ew-resize; }

.adj-block-notch-hit { fill: transparent; stroke: none; cursor: move; pointer-events: all; }
.adj-block-notch-mark {
  fill: var(--surface);
  stroke: color-mix(in srgb, var(--adj-gold) 82%, var(--adj-ink));
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.adj-block-notch-handle:hover .adj-block-notch-mark { fill: var(--adj-gold); stroke: var(--surface); }
.adj-block-cut-handle.is-n,
.adj-block-cut-handle.is-s { cursor: ns-resize; }
.adj-block-cut-handle.is-e,
.adj-block-cut-handle.is-w { cursor: ew-resize; }

.adj-block-measures { pointer-events: none; }
.adj-block-measure { pointer-events: none; }
.adj-block-measure-leader,
.adj-block-measure-tick {
  fill: none;
  stroke: color-mix(in srgb, var(--adj-ink) 48%, var(--adj-gold));
  stroke-width: .8px;
  vector-effect: non-scaling-stroke;
}
.adj-block-measure-tick { stroke-width: 1.1px; }
.adj-block-measure text {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--adj-block-measure-size, 3.6px);
  font-weight: 650;
  text-anchor: middle;
  pointer-events: none;
  paint-order: stroke;
  stroke: color-mix(in srgb, var(--adj-workspace-base) 94%, transparent);
  stroke-width: var(--adj-block-measure-halo, .55px);
  stroke-linejoin: round;
}
.adj-block-readout-dimension {
  fill: var(--adj-ink);
  letter-spacing: .01em;
}
.adj-block-readout-dimension.is-width { dominant-baseline: central; }
.adj-block-readout-dimension.is-depth { dominant-baseline: central; }

.adj-plan-edited {
  position: absolute;
  z-index: 2;
  top: 8px;
  /* Clears the View toggle, which is also pinned to this corner. Both were at
     right: 8px, so the badge sat underneath the button and the pair read as one
     control with its label knocked out. */
  right: 60px;
  display: inline-flex;
  align-items: center;
  height: 25px;
  max-width: calc(50% - 80px);
  padding: 0 8px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--adj-gold) 42%, var(--adj-line));
  border-radius: 6px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  color: color-mix(in srgb, var(--adj-ink) 80%, var(--adj-gold));
  font-size: 0.55rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adj-initial-layout-status {
  position: absolute;
  z-index: 8;
  top: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: calc(100% - 92px);
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, var(--adj-blue) 34%, var(--adj-line));
  border-radius: 6px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .06);
  color: var(--adj-ink);
  font-size: .55rem;
  font-weight: 680;
  backdrop-filter: blur(8px);
}

.adj-layout-prepare-action {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--adj-blue);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.adj-layout-prepare-action:focus-visible {
  outline: 2px solid var(--adj-blue);
  outline-offset: 2px;
}

.adj-option-badge.is-edited {
  border-color: color-mix(in srgb, var(--adj-gold) 48%, var(--adj-line));
  color: color-mix(in srgb, var(--adj-ink) 82%, var(--adj-gold));
}

@container (max-width: 520px) {
  .adj-block-toolbar {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .adj-block-selection { flex-basis: 100%; }
  .adj-block-actions { flex: 1 1 auto; }
  .adj-block-actions button { flex: 1 1 auto; }
}

/* Block Plan controls share one collision-aware layout while remaining the
   floating instruments architects already recognize. The transparent wrapper
   coordinates them; only the individual pills receive a surface. */
.adj-plan-editor:not(.adj-plan-preparing) {
  display: block;
}

.adj-block-plan-chrome {
  position: absolute;
  z-index: 12;
  inset: 8px 8px auto;
  display: grid;
  min-width: 0;
  grid-template-areas:
    "identity primary metadata"
    "status reading utilities";
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 5px 8px;
  pointer-events: none;
}

.adj-block-plan-meta,
.adj-block-plan-chrome > .adj-block-spatial-controls {
  display: contents;
}

.adj-block-plan-chrome .adj-preview-label {
  position: relative;
  z-index: auto;
  top: auto;
  left: auto;
  grid-area: identity;
  min-width: 0;
  max-width: 100%;
  width: fit-content;
  padding: 4px 6px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--adj-line) 64%, transparent);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  box-shadow: 0 3px 12px color-mix(in srgb, var(--adj-ink) 7%, transparent);
  backdrop-filter: blur(7px);
  pointer-events: auto;
}

.adj-block-plan-chrome .adj-preview-label strong {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adj-block-plan-meta-actions {
  display: flex;
  min-width: 0;
  max-width: 100%;
  grid-area: metadata;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  justify-self: stretch;
  pointer-events: auto;
}

.adj-block-plan-chrome .adj-preview-va-source,
.adj-block-plan-chrome .adj-plan-edited,
.adj-block-plan-chrome .adj-block-settings-toggle {
  position: relative;
  z-index: auto;
  top: auto;
  right: auto;
  left: auto;
}

.adj-block-plan-chrome .adj-preview-va-source,
.adj-block-plan-chrome .adj-plan-edited {
  min-width: 0;
  max-width: min(280px, 100%);
  overflow: hidden;
  flex: 0 1 auto;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adj-block-plan-chrome .adj-preview-va-source {
  background: color-mix(in srgb, var(--surface) 84%, transparent);
}

.adj-block-plan-chrome .adj-plan-edited {
  height: 25px;
  max-width: 174px;
  box-sizing: border-box;
}

.adj-block-plan-chrome .adj-block-settings-toggle {
  flex: 0 0 auto;
}

.adj-block-plan-primary-controls {
  display: flex;
  min-width: 0;
  grid-area: primary;
  align-items: center;
  justify-content: center;
  gap: 4px;
  justify-self: center;
  white-space: nowrap;
  pointer-events: auto;
}

.adj-block-plan-chrome .adj-block-plan-reading-controls {
  position: relative;
  top: auto;
  left: auto;
  display: grid;
  grid-template-columns: max-content max-content;
  grid-template-rows: auto 26px;
  min-width: 0;
  max-width: 100%;
  grid-area: reading;
  align-items: center;
  gap: 5px;
  justify-self: center;
  transform: none;
  white-space: nowrap;
  pointer-events: auto;
}

/* The legend occupies its own fixed-height row and contributes no intrinsic
   width. Changing readings must never move the floor or view pills. */
.adj-block-plan-reading-controls > .adj-block-layer-legend {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 0;
  min-width: 100%;
  max-width: none;
  height: 26px;
  margin: 0;
  justify-content: center;
  align-content: center;
  gap: 2px 9px;
  font-size: .625rem;
}

.adj-block-plan-chrome .adj-initial-layout-status {
  position: relative;
  z-index: auto;
  top: auto;
  left: auto;
  min-width: 0;
  max-width: 100%;
  grid-area: status;
  justify-self: start;
  pointer-events: auto;
}

.adj-block-plan-chrome > .adj-block-3d-utilities {
  position: relative;
  z-index: auto;
  top: auto;
  right: auto;
  min-width: 0;
  max-width: 100%;
  grid-area: utilities;
  justify-self: end;
  pointer-events: auto;
}

.adj-plan-editor[data-block-view="locked3d"] .adj-block-plan-chrome > .adj-block-3d-utilities,
.adj-plan-editor[data-block-view="orbit3d"] .adj-block-plan-chrome > .adj-block-3d-utilities {
  display: flex;
}

.adj-block-plan-chrome:has(.adj-va-cues-control[open]) {
  z-index: 30;
  /* The popover intentionally overflows the transparent chrome rail. Promote
     the rail into hit testing while it is open so the SVG below cannot steal
     clicks from visible planning controls. */
  pointer-events: auto;
}

.adj-block-plan-chrome:has(.adj-block-settings) {
  z-index: 30;
  pointer-events: auto;
}

.adj-block-plan-chrome .adj-va-cues-popover {
  width: clamp(380px, 34vw, 480px);
  max-width: calc(100vw - 24px);
  max-height: min(620px, 64dvh);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.adj-va-cues-popover *,
.adj-va-cues-popover *::before,
.adj-va-cues-popover *::after { min-width: 0; }

.adj-block-plan-chrome .adj-block-settings {
  top: calc(100% + 6px);
  right: 0;
  width: min(268px, calc(100% - 16px));
  max-height: min(520px, calc(100vh - 150px));
}

.adj-block-canvas-stage {
  position: absolute;
  z-index: 1;
  inset: 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--adj-workspace-base);
}

.adj-block-canvas-stage > .adj-block-3d-host {
  inset: 0;
  border-radius: 0;
}

.adj-block-canvas-stage > .adj-block-plan-svg {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  transform: translateZ(0) scale(1);
  transform-origin: center;
  transition:
    opacity 560ms cubic-bezier(.22,.8,.2,1),
    transform 900ms cubic-bezier(.22,.8,.2,1),
    filter 520ms ease;
}

.adj-plan-editor[data-block-view="locked3d"] .adj-block-canvas-stage > .adj-block-plan-svg,
.adj-plan-editor[data-block-view="orbit3d"] .adj-block-canvas-stage > .adj-block-plan-svg,
.adj-plan-editor.is-perimeter-drafting[data-block-view="locked3d"] .adj-block-canvas-stage > .adj-block-plan-svg,
.adj-plan-editor.is-perimeter-drafting[data-block-view="orbit3d"] .adj-block-canvas-stage > .adj-block-plan-svg {
  opacity: 0;
  transform: scale(.975);
  filter: blur(1.5px);
  pointer-events: none;
}

.adj-plan-editor.is-view-transitioning[data-block-transition-to="2d"] .adj-block-canvas-stage > .adj-block-plan-svg {
  opacity: .18;
  filter: none;
}

/* SVG descendants can explicitly opt back into pointer events even when the
   invisible root opts out. Keep the retained 2D drawing inert above 3D. */
.adj-plan-editor[data-block-view="locked3d"] .adj-block-plan-svg *,
.adj-plan-editor[data-block-view="orbit3d"] .adj-block-plan-svg * {
  pointer-events: none !important;
}

.adj-block-plan-primary-controls,
.adj-block-plan-chrome .adj-block-plan-reading-controls,
.adj-block-plan-chrome > .adj-block-3d-utilities {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--adj-ink) 24%, transparent) transparent;
}

.adj-block-plan-primary-controls::-webkit-scrollbar,
.adj-block-plan-chrome .adj-block-plan-reading-controls::-webkit-scrollbar,
.adj-block-plan-chrome > .adj-block-3d-utilities::-webkit-scrollbar {
  height: 3px;
}

@container (max-width: 1100px) {
  .adj-block-plan-chrome {
    grid-template-areas:
      "identity metadata"
      "status status"
      "primary primary"
      "reading utilities";
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .adj-block-plan-primary-controls {
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
    justify-self: stretch;
  }

  .adj-block-plan-primary-controls:not(:has(.adj-va-cues-control[open])),
  .adj-block-plan-chrome .adj-block-plan-reading-controls,
  .adj-block-plan-chrome > .adj-block-3d-utilities {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
  }

  .adj-block-plan-chrome .adj-block-plan-reading-controls {
    justify-self: start;
  }
}

@container (max-width: 620px) {
  .adj-block-plan-chrome {
    grid-template-areas:
      "identity metadata"
      "status status"
      "primary primary"
      "reading reading"
      "utilities utilities";
    gap: 6px;
    inset: 6px 6px auto;
  }

  .adj-block-plan-meta-actions {
    width: min(220px, 62vw);
  }

  .adj-block-plan-chrome .adj-preview-va-source { max-width: 96px; }
  .adj-block-plan-chrome .adj-plan-edited { max-width: 72px; }

  .adj-block-plan-chrome .adj-block-plan-reading-controls,
  .adj-block-plan-chrome > .adj-block-3d-utilities {
    width: 100%;
    justify-self: stretch;
  }

  .adj-block-plan-chrome .adj-block-3d-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .adj-block-canvas-stage > .adj-block-plan-svg {
    transition-duration: 1ms !important;
  }
}

@media (max-width: 860px) {
  .adj-table[data-view="split"] .adj-workspace-deck {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .adj-workspace-deck,
  .adj-table[data-view="split"] .adj-workspace-deck > .adj-layout-panel {
    transition: none;
  }
}

/* Adjacency authoring: demo-grade visual grammar.
   Shape describes what is being authored; line type describes relationship;
   color remains reserved for force/state. */
.adj-table[data-input="add"] .adj-table-main {
  grid-template-columns: minmax(470px, .68fr) minmax(0, 1fr);
}

.adj-add-body { gap: 11px; }

.adj-add-hero {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--adj-gold) 26%, var(--adj-line));
  border-radius: 11px;
  background:
    radial-gradient(circle at 0 50%, color-mix(in srgb, var(--adj-gold) 14%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface) 96%, var(--bg));
}

.adj-add-hero .adj-kind-graphic {
  width: 52px;
  height: 42px;
  color: var(--adj-gold);
  opacity: 0.9;
  stroke-width: 1.25;
}

.adj-add-hero > div { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.adj-add-hero span { color: var(--adj-gold); font-size: 0.54rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.adj-add-hero strong { font-family: Georgia, "Times New Roman", serif; font-size: 0.94rem; font-weight: 500; }
.adj-add-hero p { margin: 1px 0 0; color: var(--adj-muted); font-size: 0.63rem; line-height: 1.4; }

.adj-add-body .adj-nl {
  margin: 0;
  padding: 11px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 96%, var(--adj-gold) 4%);
}

.adj-add-body .adj-nl-input { height: 44px; font-size: 0.78rem; }
.adj-add-body .adj-nl-row .btn-primary { min-width: 92px; }

.adj-add-suggestions button {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 45px;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.adj-add-suggestions button:hover {
  border-color: color-mix(in srgb, var(--adj-gold) 52%, var(--adj-line));
  background: color-mix(in srgb, var(--adj-gold) 7%, transparent);
  transform: translateX(2px);
}

.adj-add-suggestions button > span { line-height: 1.35; }
.adj-add-suggestions button > b { color: var(--adj-gold); font-size: 0.9rem; font-weight: 500; }

.adj-add-va,
.adj-add-settings {
  display: flex;
  min-height: 39px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-style: dashed;
}

.adj-add-va > span,
.adj-add-settings > span { color: var(--adj-muted); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.adj-add-va > b,
.adj-add-settings > b { font-size: 0.65rem; font-weight: 650; }

.adj-typed-graphic {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--adj-line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface) 92%, var(--bg));
  color: var(--adj-muted);
}

.adj-typed-graphic svg {
  width: 29px;
  height: 22px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.adj-typed-graphic.is-separate { color: color-mix(in srgb, #c27655 84%, var(--adj-ink)); }
.adj-typed-graphic.is-sequence { color: var(--adj-blue); }
.adj-typed-graphic.is-position { color: color-mix(in srgb, #8f9c73 82%, var(--adj-ink)); }
.adj-typed-graphic.is-near { color: var(--adj-gold); }

.adj-rule-card.adj-typed { grid-template-columns: auto minmax(0, 1fr) auto; }

.adj-rule-card {
  position: relative;
  overflow: hidden;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.adj-rule-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--adj-line);
  content: "";
}

.adj-rule-card.tone-critical::before { background: var(--adj-gold); }
.adj-rule-card.tone-high::before { background: var(--adj-blue); }
.adj-rule-card.tone-medium::before { background: color-mix(in srgb, var(--adj-muted) 70%, transparent); }
.adj-rule-card.tone-separate::before { background: #c27655; }
.adj-rule-card:hover { border-color: color-mix(in srgb, var(--adj-gold) 38%, var(--adj-line)); background: color-mix(in srgb, var(--surface) 92%, var(--adj-gold) 8%); }
.adj-rule-spaces { grid-template-columns: minmax(0, 1fr) 74px minmax(0, 1fr); }

.adj-rule-thread {
  --thread-color: var(--adj-muted);
  display: inline-flex;
  min-width: 54px;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  color: var(--thread-color);
}

.adj-rule-thread-line {
  position: relative;
  display: block;
  width: 100%;
  height: 9px;
}

.adj-rule-thread-line::before,
.adj-rule-thread-line::after {
  position: absolute;
  right: 3px;
  left: 3px;
  top: 4px;
  border-top: 1.5px solid currentColor;
  content: "";
}

.adj-rule-thread-line i,
.adj-rule-thread-line b {
  position: absolute;
  z-index: 1;
  top: 1px;
  width: 7px;
  height: 7px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: var(--surface);
}
.adj-rule-thread-line i { left: 0; }
.adj-rule-thread-line b { right: 0; }
.adj-rule-thread em { max-width: 76px; overflow: hidden; font-size: 0.48rem; font-style: normal; font-weight: 800; letter-spacing: 0.07em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }

.adj-rule-thread.is-must { --thread-color: var(--adj-gold); }
.adj-rule-thread.is-must .adj-rule-thread-line::before { top: 2.5px; border-top-width: 1.5px; }
.adj-rule-thread.is-must .adj-rule-thread-line::after { top: 6px; border-top-width: 1.5px; }
.adj-rule-thread.is-near { --thread-color: var(--adj-blue); }
.adj-rule-thread.is-near .adj-rule-thread-line::after { display: none; }
.adj-rule-thread.is-near .adj-rule-thread-line { background: radial-gradient(circle, currentColor 0 1.5px, transparent 1.8px) 50% 4px / 8px 8px no-repeat; }
.adj-rule-thread.is-convenient .adj-rule-thread-line::before { border-top-style: dotted; border-top-width: 2px; }
.adj-rule-thread.is-convenient .adj-rule-thread-line::after { display: none; }
.adj-rule-thread.is-separate { --thread-color: #c27655; }
.adj-rule-thread.is-separate .adj-rule-thread-line::before { border-top-style: dashed; }
.adj-rule-thread.is-separate .adj-rule-thread-line::after { top: 0; right: auto; left: 50%; width: 7px; height: 7px; border: 0; border-left: 1.5px solid currentColor; transform: rotate(45deg); }

.adj-composer-shell {
  overflow: hidden;
  border: 1px solid var(--adj-line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 96%, var(--bg));
}

.adj-rel-preview {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 112px;
  padding: 15px 16px 18px;
  background:
    linear-gradient(color-mix(in srgb, var(--adj-ink) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--adj-ink) 4%, transparent) 1px, transparent 1px),
    color-mix(in srgb, var(--surface) 98%, var(--bg));
  background-size: 18px 18px;
}

.adj-rel-node {
  display: grid;
  min-width: 0;
  grid-template-columns: 13px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 7px;
  padding: 9px 10px;
  border: 1px solid var(--adj-line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: 0 4px 14px color-mix(in srgb, #000 9%, transparent);
}

.adj-rel-node i { grid-row: 1 / 3; align-self: center; width: 10px; height: 10px; border: 2px solid var(--adj-gold); border-radius: 50%; background: var(--surface); }
.adj-rel-node span { color: var(--adj-muted); font-size: 0.49rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; }
.adj-rel-node strong { overflow: hidden; font-size: 0.64rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.adj-rel-span { display: flex; min-width: 0; flex-direction: column; align-items: center; gap: 2px; }
.adj-rel-span .adj-rule-thread { width: 100%; }
.adj-rel-span > small { color: var(--adj-muted); font-size: 0.52rem; }
.adj-rel-force { position: absolute; right: 12px; bottom: 8px; padding: 3px 7px; border: 1px solid var(--adj-line); border-radius: 999px; background: var(--surface); color: var(--adj-muted); font-size: 0.5rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; }
.adj-composer-shell[data-force="required"] .adj-rel-force { border-color: #c27655; color: #c27655; }
.adj-composer-shell[data-force="priority"] .adj-rel-force { border-color: var(--adj-gold); color: var(--adj-gold); }

.adj-rel-palette {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  padding: 8px;
  border-top: 1px solid var(--adj-line);
  background: color-mix(in srgb, var(--surface) 97%, var(--bg));
}

.adj-rel-choice {
  display: grid;
  min-width: 0;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 7px;
  border: 1px solid var(--adj-line);
  border-radius: 8px;
  background: transparent;
  color: var(--adj-muted);
  text-align: left;
  cursor: pointer;
}

.adj-rel-choice > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.adj-rel-choice > span:last-child strong { overflow: hidden; color: var(--adj-ink); font-size: 0.58rem; text-overflow: ellipsis; white-space: nowrap; }
.adj-rel-choice > span:last-child small { overflow: hidden; color: var(--adj-muted); font-size: 0.49rem; text-overflow: ellipsis; white-space: nowrap; }
.adj-rel-choice .adj-rule-thread em { display: none; }
.adj-rel-choice:hover { border-color: color-mix(in srgb, var(--adj-gold) 42%, var(--adj-line)); }
.adj-rel-choice.is-active { border-color: color-mix(in srgb, var(--adj-gold) 62%, var(--adj-line)); background: color-mix(in srgb, var(--adj-gold) 9%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--adj-gold) 14%, transparent); }

.adj-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.adj-composer-shell .adj-composer {
  position: relative;
  grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) minmax(92px, .5fr);
  gap: 8px;
  padding: 11px;
  border: 0;
  border-top: 1px solid var(--adj-line);
  border-radius: 0;
  background: color-mix(in srgb, var(--surface) 93%, var(--bg));
}

.adj-composer-shell .adj-composer label > span { font-size: 0.54rem; }
.adj-composer-shell .adj-composer select { height: 33px; font-size: 0.62rem; }
.adj-composer-shell .adj-composer > .btn-primary { grid-column: 1 / -1; min-height: 34px; }
.adj-add-footnote { padding: 0 2px; font-size: 0.59rem; }

.adj-empty-relationship {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 18px;
  text-align: left;
}
.adj-empty-relationship .adj-kind-graphic { width: 46px; height: 38px; color: var(--adj-muted); }
.adj-empty-relationship > div { display: flex; flex-direction: column; gap: 3px; }
.adj-empty-relationship strong { color: var(--adj-ink); font-family: Georgia, "Times New Roman", serif; font-size: 0.82rem; font-weight: 500; }
.adj-empty-relationship span { color: var(--adj-muted); font-size: 0.61rem; line-height: 1.4; }

.adj-goal-preview {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid var(--adj-line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 95%, var(--adj-gold) 5%);
}

.adj-goal-orbit { position: relative; width: 49px; height: 49px; border: 1px solid color-mix(in srgb, var(--adj-gold) 34%, var(--adj-line)); border-radius: 50%; background: conic-gradient(var(--adj-gold) var(--adj-goal-value), color-mix(in srgb, var(--adj-line) 65%, transparent) 0); }
.adj-goal-orbit::after { position: absolute; inset: 5px; border-radius: 50%; background: var(--surface); content: ""; }
.adj-goal-orbit i,
.adj-goal-orbit b { position: absolute; z-index: 1; inset: 13px; border: 1px solid color-mix(in srgb, var(--adj-gold) 55%, var(--adj-line)); border-radius: 50%; }
.adj-goal-orbit b { inset: 21px; border: 0; background: var(--adj-gold); }
.adj-goal-preview > div:last-child { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 8px; }
.adj-goal-preview span { color: var(--adj-muted); font-size: 0.56rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; }
.adj-goal-preview strong { color: var(--adj-gold); font-size: 0.86rem; }
.adj-goal-preview small { grid-column: 1 / -1; color: var(--adj-muted); font-size: 0.6rem; }
.adj-add-goal-name { grid-column: 1 / -1; }

.adj-constraint-diagram { display: grid; grid-template-columns: 116px minmax(0, 1fr); align-items: center; gap: 13px; padding: 11px; border: 1px solid var(--adj-line); border-radius: 10px; background: color-mix(in srgb, var(--surface) 96%, var(--bg)); }
.adj-constraint-site { position: relative; height: 76px; border: 1px solid color-mix(in srgb, var(--adj-ink) 30%, var(--adj-line)); background: linear-gradient(color-mix(in srgb, var(--adj-ink) 5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--adj-ink) 5%, transparent) 1px, transparent 1px); background-size: 12px 12px; }
.adj-constraint-site > span { position: absolute; top: 4px; right: 5px; color: var(--adj-muted); font-size: 0.52rem; font-weight: 800; }
.adj-constraint-site i { position: absolute; left: 17px; right: 17px; top: 36px; border-top: 2px solid var(--adj-gold); transform: rotate(-12deg); }
.adj-constraint-site b { position: absolute; left: 52px; bottom: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--adj-gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--adj-gold) 18%, transparent); }
.adj-constraint-site em { position: absolute; left: 4px; bottom: 3px; color: var(--adj-muted); font-size: 0.48rem; font-style: normal; }
.adj-constraint-diagram > div:last-child strong { font-family: Georgia, "Times New Roman", serif; font-size: 0.82rem; font-weight: 500; }
.adj-constraint-diagram > div:last-child p { margin: 3px 0 0; color: var(--adj-muted); font-size: 0.61rem; line-height: 1.42; }

.adj-gs-relationship-buttons button > i { position: relative; }
.adj-gs-relationship-buttons button[data-relationship="must"] > i {
  border-top-color: var(--adj-gold);
  box-shadow: 0 3px 0 -1px var(--adj-gold);
}
.adj-gs-relationship-buttons button[data-relationship="near"] > i { border-top-style: solid; border-top-color: var(--adj-blue); }
.adj-gs-relationship-buttons button[data-relationship="near"] > i::after { position: absolute; top: -2.5px; left: 4px; width: 3px; height: 3px; border-radius: 50%; background: var(--adj-blue); content: ""; }
.adj-gs-relationship-buttons button[data-relationship="separate"] > i::after { position: absolute; top: -4px; left: 4px; height: 7px; border-left: 1.5px solid #c4685a; content: ""; transform: rotate(42deg); }

.adj-add-kinds button:focus-visible,
.adj-add-suggestions button:focus-visible,
.adj-rule-card select:focus-visible,
.adj-composer-shell select:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--adj-gold) 72%, transparent);
  outline-offset: 2px;
}

.adj-nl-note.ok::before { margin-right: 6px; content: "\2713"; font-weight: 800; }
.adj-nl-note.err::before { margin-right: 6px; content: "!"; font-weight: 900; }

@container (max-width: 620px) {
  .adj-rel-preview { grid-template-columns: minmax(0, 1fr) 78px minmax(0, 1fr); gap: 7px; padding-right: 10px; padding-left: 10px; }
  .adj-rel-palette { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adj-composer-shell .adj-composer { grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr); }
  .adj-composer-shell .adj-composer label:nth-of-type(4) { grid-column: 3; }
  .adj-rule-card.adj-typed { grid-template-columns: auto minmax(0, 1fr); }
  .adj-rule-card.adj-typed .adj-rule-controls { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .adj-table[data-input="add"] .adj-table-main { grid-template-columns: minmax(0, 1fr) minmax(0, .72fr); }
}

@media (prefers-reduced-motion: reduce) {
  .adj-add-suggestions button,
  .adj-rule-card,
  .adj-selection-dock > .adj-selection-trigger i,
  .adj-graph-selection-popover,
  .adj-ledger-selection-popover,
  .adj-block-selection-popover { transition: none; }
  .adj-edit-block.is-workset-focus,
  .adj-edit-block.is-focus-tray { animation: none; }
}

/* Shared adjacency workbench: Graph, Block Plan, and Rows/Matrix are peer
   projections. Any one or two can occupy the table at once. */
.adj-view-count {
  display: grid;
  min-width: 27px;
  height: 27px;
  place-items: center;
  color: var(--adj-muted);
  font-size: 0.56rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.adj-table[data-view="workspace"] .adj-workspace-deck {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.adj-table[data-view="workspace"][data-pane-count="2"] .adj-workspace-deck {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

/* The master view switch already names Graph and Block plan. Each open pane
   gets one compact information rail instead of repeating that title and then
   adding another assembly header beneath it. */
.adj-table[data-view="workspace"] .adj-graph-head,
.adj-table[data-view="workspace"] .adj-layout-head {
  box-sizing: border-box;
  height: 34px;
  min-height: 34px;
  padding: 3px 8px;
}

.adj-table[data-view="workspace"] .adj-cg-head.is-summary span {
  font-size: 0.6rem;
}

.adj-table[data-view="workspace"] .adj-layout-title {
  flex-direction: row;
  align-items: baseline;
  gap: 7px;
}

.adj-table[data-view="workspace"] .adj-layout-title strong {
  font-size: 0.82rem;
}

.adj-table[data-view="workspace"] .adj-layout-title span {
  font-size: 0.6rem;
}

.adj-table[data-view="workspace"] .adj-laytab-rail {
  padding: 1px;
}

.adj-table[data-view="workspace"] .adj-laytab-rail button {
  height: 23px;
}

.adj-table[data-view="workspace"] .adj-workspace-deck > .adj-graph-panel,
.adj-table[data-view="workspace"] .adj-workspace-deck > .adj-layout-panel,
.adj-table[data-view="workspace"] .adj-workspace-deck > .adj-ledger-panel,
.adj-table[data-view="workspace"] .adj-workspace-deck > .adj-parti-workspace {
  display: none;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.adj-table[data-view="workspace"][data-views~="graph"] .adj-workspace-deck > .adj-graph-panel,
.adj-table[data-view="workspace"][data-views~="block"] .adj-workspace-deck > .adj-layout-panel,
.adj-table[data-view="workspace"][data-views~="ledger"] .adj-workspace-deck > .adj-ledger-panel {
  display: flex;
}

.adj-table[data-view="parti"] .adj-workspace-deck > .adj-ledger-panel { display: none; }

.adj-ledger-panel {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  container-type: inline-size;
}

.adj-ledger-shell {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

.adj-ledger-head {
  display: flex;
  min-height: 44px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 9px 7px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
}

.adj-ledger-head > div:first-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}

.adj-ledger-head strong { font-size: 0.78rem; }
.adj-ledger-head span { color: var(--adj-muted); font-size: 0.59rem; }

.adj-ledger-head-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 4px;
}
.adj-ledger-head-actions { flex: 0 0 auto; }
.adj-ledger-whole {
  height: 25px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--text) 34%, var(--adj-line));
  border-radius: 5px;
  background: var(--text);
  color: var(--bg-card);
  font-size: 0.54rem;
  font-weight: 800;
  letter-spacing: 0.025em;
  cursor: pointer;
}
.adj-ledger-whole:hover { transform: translateY(-1px); }
.adj-ledger-selection > button {
  height: 25px;
  padding: 0 7px;
  border: 1px solid var(--adj-line);
  border-radius: 5px;
  background: var(--bg);
  color: var(--adj-muted);
  font-size: .51rem;
  font-weight: 720;
  cursor: pointer;
}
.adj-ledger-selection > button:hover { color: var(--adj-ink); }
.adj-selection-done {
  color: var(--adj-muted);
  font-size: .46rem;
  font-weight: 720;
}

.adj-ledger-mode {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--adj-line);
  border-radius: 4px;
  background: var(--bg);
}

.adj-ledger-mode button,
.adj-ledger-scope button,
.adj-gpop-open-ledger {
  height: 25px;
  padding: 0 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--adj-muted);
  font-size: 0.59rem;
  font-weight: 750;
  cursor: pointer;
}

.adj-ledger-mode button.is-active,
.adj-ledger-mode button:hover,
.adj-ledger-scope button,
.adj-gpop-open-ledger:hover {
  background: var(--bg-card);
  color: var(--adj-ink);
}

.adj-gpop-open-ledger {
  width: 100%;
  margin-top: 7px;
  border: 1px solid var(--adj-line);
}

.adj-ledger-scope {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 7px 7px 0;
  padding: 7px 8px 7px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-card);
}

.adj-ledger-scope.is-active {
  border-color: var(--border);
  background: var(--bg-card);
}

.adj-ledger-scope > div { display: flex; min-width: 0; flex-direction: column; gap: 1px; }
.adj-ledger-scope strong { font-size: 0.65rem; }
.adj-ledger-scope span { color: var(--adj-muted); font-size: 0.56rem; }
.adj-ledger-scope button { flex: 0 0 auto; border: 1px solid var(--adj-line); }

.adj-ledger-scope.is-selecting {
  border-color: var(--text);
}

.adj-ledger-tools {
  position: relative;
  display: flex;
  min-width: 0;
  flex: 0 0 auto;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 7px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.adj-ledger-tools > label {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-direction: row;
  gap: 6px;
}

.adj-ledger-tools > label > span {
  color: var(--adj-muted);
  font-size: 0.48rem;
  font-weight: 760;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.adj-ledger-tools input,
.adj-ledger-tools select,
.adj-ledger-areas summary {
  height: 27px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-card);
  color: var(--text);
  padding: 0 7px;
  font-size: 0.56rem;
}

.adj-ledger-search { flex: 1 1 170px; }
.adj-ledger-search input { width: 100%; }

.adj-ledger-tools > label:not(.adj-ledger-search) select { min-width: 116px; }

.adj-ledger-tool-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
}

.adj-ledger-areas {
  position: relative;
  flex: 0 0 auto;
}

.adj-ledger-areas summary {
  display: flex;
  align-items: center;
  cursor: pointer;
  list-style: none;
}

.adj-ledger-areas summary::-webkit-details-marker { display: none; }

.adj-ledger-areas > div {
  position: absolute;
  z-index: 8;
  top: 31px;
  right: 0;
  display: grid;
  width: min(300px, 72vw);
  max-height: 260px;
  overflow: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg-card);
  box-shadow: 0 12px 28px color-mix(in srgb, #000 16%, transparent);
}

.adj-ledger-areas button {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  padding: 6px 7px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  font-size: 0.55rem;
  text-align: left;
  cursor: pointer;
}

.adj-ledger-areas button:hover { background: var(--overlay-hover); }
.adj-ledger-areas button.is-selected { border-color: var(--text); }
.adj-ledger-areas button.is-partial { border-color: var(--border); }
.adj-ledger-areas button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adj-ledger-areas button b { color: var(--adj-muted); font-size: 0.5rem; }

.adj-ledger-results {
  flex: 0 0 auto;
  padding-bottom: 0;
  color: var(--adj-muted);
  font-size: 0.5rem;
  font-variant-numeric: tabular-nums;
}

.adj-ledger-color-key {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  padding-bottom: 0;
  color: var(--adj-muted);
  font-size: 0.5rem;
}

.adj-ledger-color-key i {
  width: 24px;
  height: 7px;
  border-radius: 2px;
  background: conic-gradient(#6f95a8, #8d789d, #8d9a6b, #bd895f, #708f87, #6f95a8);
}

.adj-ledger-row-actions {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 2px;
}

.adj-ledger-row-actions button {
  height: 27px;
  padding: 0 7px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-card);
  color: var(--adj-muted);
  font-size: 0.53rem;
  font-weight: 700;
  cursor: pointer;
}

.adj-ledger-row-actions button:hover { color: var(--text); }

.adj-ledger-circulation {
  flex: 0 0 auto;
  padding: 7px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
}

.adj-ledger-circulation > header {
  display: grid;
  grid-template-columns: minmax(120px, auto) auto auto minmax(180px, 1fr);
  align-items: end;
  gap: 8px;
  margin-bottom: 5px;
}

.adj-ledger-circulation > header > div { display: flex; flex-direction: column; gap: 1px; }
.adj-ledger-circulation > header span {
  color: var(--adj-muted);
  font-size: 0.44rem;
  font-weight: 760;
  letter-spacing: .065em;
  text-transform: uppercase;
}
.adj-ledger-circulation > header strong { font-size: .65rem; }
.adj-ledger-circulation > header p,
.adj-ledger-circulation > header small { margin: 0; color: var(--adj-muted); font-size: .49rem; }
.adj-ledger-circulation > header small { text-align: right; }

.adj-ledger-add-circulation {
  align-self: center;
  min-height: 25px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--text) 38%, var(--border));
  border-radius: 4px;
  background: var(--surface);
  color: var(--adj-ink);
  font-size: .52rem;
  font-weight: 760;
  cursor: pointer;
}
.adj-ledger-add-circulation:hover { background: var(--overlay-hover); }

.adj-circulation-records {
  display: flex;
  min-width: 0;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 1px;
}

.adj-circulation-record-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px;
  align-items: stretch;
}

.adj-circulation-record-fill {
  min-width: 62px;
  border: 1px solid color-mix(in srgb, #4fa5ab 36%, var(--border));
  border-radius: 6px;
  background: color-mix(in srgb, #4fa5ab 9%, var(--surface));
  color: var(--adj-muted);
  font-size: .46rem;
  cursor: pointer;
}

.adj-circulation-record-fill:hover {
  border-color: #4fa5ab;
  color: var(--text);
}

.adj-circulation-record {
  display: grid;
  min-width: 210px;
  max-width: 330px;
  grid-template-columns: 22px minmax(75px, auto) auto;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.adj-circulation-record:hover { background: var(--overlay-hover); }
.adj-circulation-record.is-quality-review {
  border-color: color-mix(in srgb, #caa45c 52%, var(--border));
}
.adj-circulation-record.is-quality-invalid {
  border-color: color-mix(in srgb, #c77a5d 68%, var(--border));
  background: color-mix(in srgb, #c77a5d 5%, var(--bg));
}
.adj-circulation-record > i {
  position: relative;
  width: 18px;
  height: 18px;
  border: 2px solid var(--text);
  border-radius: 50%;
  opacity: .72;
}
.adj-circulation-record.is-corridor > i::after {
  content: '';
  position: absolute;
  top: 7px;
  left: 15px;
  width: 7px;
  border-top: 2px solid var(--text);
}
.adj-circulation-record.is-lobby > i { border-radius: 3px; }
.adj-circulation-record.is-free > i { border-style: dashed; opacity: .42; }
.adj-circulation-record > span { display: flex; min-width: 0; flex-direction: column; gap: 1px; }
.adj-circulation-record > span strong { overflow: hidden; font-size: .57rem; text-overflow: ellipsis; white-space: nowrap; }
.adj-circulation-record > span small,
.adj-circulation-record > em { color: var(--adj-muted); font-size: .46rem; font-style: normal; }
.adj-circulation-record .adj-circulation-quality {
  color: color-mix(in srgb, #4fa5ab 76%, var(--text));
  font-weight: 760;
}
.adj-circulation-record.is-quality-review .adj-circulation-quality { color: #a77d29; }
.adj-circulation-record.is-quality-invalid .adj-circulation-quality { color: #b85f43; }
.adj-circulation-record > b {
  display: flex;
  min-width: 0;
  grid-column: 2 / -1;
  gap: 3px;
  overflow: hidden;
}
.adj-circulation-record > b span {
  overflow: hidden;
  padding: 2px 4px;
  border-radius: 3px;
  background: var(--bg-card);
  color: var(--adj-muted);
  font-size: .44rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adj-ledger-circulation.is-matrix .adj-circulation-record { min-width: 190px; }

.adj-ledger-body {
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  padding: 7px;
  background: var(--bg);
}

.adj-ledger-rows {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
}

.adj-ledger-room {
  overflow: hidden;
  flex: 0 0 auto;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}
.adj-ledger-room:last-child { border-bottom: 0; }

.adj-ledger-area-heading {
  flex: 0 0 auto;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--adj-area-color) 26%, var(--bg-card));
}

/* Rows are a long architectural schedule. Keep the current classification
   visible as the list moves, then give the room name the strongest contrast. */
.adj-ledger-shell[data-mode="rows"] .adj-ledger-area-heading {
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: 0 1px 0 var(--border), 0 5px 10px color-mix(in srgb, #000 5%, transparent);
}
.adj-ledger-shell[data-mode="rows"] .adj-ledger-room:hover {
  background: color-mix(in srgb, var(--adj-area-color, var(--border)) 8%, var(--surface));
}

.adj-ledger-area-heading:not(:first-child) {
  border-top: 5px solid var(--bg);
}

.adj-ledger-area-heading.is-context { opacity: 0.5; }

.adj-ledger-area-heading button {
  display: grid;
  width: 100%;
  min-height: 40px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 5px 9px;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.adj-ledger-area-heading button:hover { background: var(--overlay-hover); }

.adj-ledger-area-heading button > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}

.adj-ledger-area-heading small {
  color: var(--adj-muted);
  font-size: 0.47rem;
  font-weight: 750;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.adj-ledger-area-heading strong { font-size: 0.65rem; }
.adj-ledger-area-heading b { color: var(--adj-muted); font-size: 0.5rem; font-weight: 650; }

.adj-ledger-room.is-selected {
  border-color: var(--text);
  box-shadow: inset 0 0 0 1px var(--text);
  background: color-mix(in srgb, var(--text) 5%, var(--bg));
}
.adj-ledger-room.is-selected .adj-ledger-mainline { background: color-mix(in srgb, var(--text) 7%, var(--bg)); }
.adj-ledger-room.is-selected .adj-ledger-room-name strong { font-weight: 800; }

.adj-ledger-room.is-context {
  opacity: 0.46;
}

.adj-ledger-room.is-context:hover,
.adj-ledger-room.is-context:focus-within {
  opacity: 0.72;
}

.adj-ledger-room.is-held {
  opacity: 0.48;
  background: color-mix(in srgb, var(--adj-muted) 5%, var(--bg));
}

.adj-ledger-room.is-held:hover { opacity: 0.76; }

.adj-ledger-room.is-held .adj-ledger-mainline:hover { background: color-mix(in srgb, var(--adj-muted) 8%, var(--bg)); }

.adj-ledger-held-mark {
  display: grid;
  place-items: center;
  color: var(--adj-muted);
  font-size: 0.82rem;
}

.adj-ledger-activate {
  height: 23px;
  margin-right: 6px;
  padding: 0 7px;
  border: 1px solid color-mix(in srgb, var(--adj-muted) 56%, var(--adj-line));
  border-radius: 5px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--adj-ink);
  cursor: pointer;
  font-size: 0.5rem;
  font-weight: 750;
}

.adj-ledger-activate:hover { border-color: var(--adj-ink); }

.adj-ledger-subline.is-held {
  grid-template-columns: minmax(0, 1fr);
  color: var(--adj-muted);
}

.adj-ledger-mainline {
  display: grid;
  min-height: 50px;
  grid-template-columns: 28px minmax(0, 1fr) 26px 28px;
  align-items: center;
  border-bottom: 1px solid var(--adj-line);
}
.adj-ledger-mainline:hover { background: var(--overlay-hover); }

.adj-ledger-room.is-collapsed .adj-ledger-mainline { border-bottom: 0; }

.adj-ledger-select,
.adj-ledger-room-name,
.adj-ledger-chevron {
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--adj-ink);
  cursor: pointer;
}

.adj-ledger-select { display: grid; place-items: center; }
.adj-ledger-select i {
  width: 11px;
  height: 11px;
  border: 1px solid var(--adj-line);
  border-radius: 999px;
  background: var(--surface);
}
.adj-ledger-select[aria-pressed="true"] i {
  border-color: var(--text);
  background: var(--text);
  box-shadow: inset 0 0 0 3px var(--bg);
}

.adj-ledger-room-name {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  padding: 0;
  text-align: left;
}
.adj-ledger-room-name span {
  color: var(--adj-muted);
  font-size: 0.48rem;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}
.adj-ledger-room-name strong {
  overflow: hidden;
  width: 100%;
  font-size: 0.7rem;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adj-ledger-count {
  display: grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: transparent;
  color: var(--adj-muted);
  font-size: 0.54rem;
  font-weight: 800;
}

.adj-ledger-chevron { color: var(--adj-muted); font-size: 0.88rem; }
.adj-ledger-room.is-collapsed .adj-ledger-sublines { display: none; }

.adj-ledger-sublines { display: flex; min-width: 0; flex-direction: column; }

.adj-ledger-subline {
  display: grid;
  min-width: 0;
  min-height: 36px;
  grid-template-columns: minmax(150px, 1.25fr) minmax(92px, .66fr) minmax(78px, .58fr) minmax(120px, 1fr) 27px;
  align-items: center;
  gap: 5px;
  padding: 5px 5px 5px 34px;
  border-bottom: 1px solid color-mix(in srgb, var(--adj-line) 65%, transparent);
}
.adj-ledger-subline:last-child { border-bottom: 0; }
.adj-ledger-subline > i:first-child {
  display: none;
}

.adj-ledger-target { display: flex; min-width: 0; flex-direction: column; justify-content: center; gap: 1px; }
.adj-ledger-target span { color: var(--adj-muted); font-size: 0.49rem; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; }
.adj-ledger-target strong { overflow: hidden; font-size: 0.6rem; text-overflow: ellipsis; white-space: nowrap; }

.adj-ledger-subline select,
.adj-ledger-note {
  min-width: 0;
  height: 26px;
  border: 1px solid var(--adj-line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--adj-ink);
  padding: 0 6px;
  font-size: 0.56rem;
}

.adj-ledger-subline.is-derived {
  background: transparent;
}
.adj-ledger-subline.is-circulation {
  grid-template-columns: minmax(150px, 1.25fr) minmax(92px, .66fr) auto;
  background: color-mix(in srgb, #4fa5ab 6%, var(--bg-card));
}
.adj-ledger-subline.is-circulation.is-add { background: transparent; }
.adj-ledger-route-select { min-width: 120px; }
.adj-ledger-route-toggle {
  min-height: 25px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, #4fa5ab 44%, var(--adj-line));
  border-radius: 5px;
  background: var(--surface);
  color: var(--adj-ink);
  font-size: .51rem;
  font-weight: 760;
  cursor: pointer;
}
.adj-ledger-route-toggle:hover { background: color-mix(in srgb, #4fa5ab 10%, var(--surface)); }
.adj-ledger-route-toggle.is-connected { border-color: #4fa5ab; color: #277a82; }
.adj-ledger-derived,
.adj-ledger-source,
.adj-ledger-add-hint {
  overflow: hidden;
  color: var(--adj-muted);
  font-size: 0.52rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adj-ledger-derived { color: var(--adj-muted); font-weight: 800; text-transform: uppercase; }

.adj-ledger-add { background: transparent; }
.adj-ledger-add > button {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--adj-ink);
  cursor: pointer;
}

.adj-matrix-wrap {
  min-width: 100%;
  width: max-content;
  overflow: visible;
}

.adj-matrix-wrap.is-axis-selection td:not(.is-row-selected):not(.is-column-selected) { opacity: 0.34; }
.adj-matrix-wrap.is-axis-selection td.is-row-selected:not(.is-column-selected),
.adj-matrix-wrap.is-axis-selection td.is-column-selected:not(.is-row-selected) { opacity: 0.68; }

.adj-matrix {
  width: max-content;
  min-width: max-content;
  border-spacing: 0;
  border-collapse: separate;
  /* Fixed layout with no resolved table width lets Chromium collapse every
     relationship column. This is intentionally a wide drafting table: retain
     each room-pair cell and let the ledger body provide the scroll frame. */
  table-layout: auto;
  font-size: 0.55rem;
}

.adj-matrix th,
.adj-matrix td {
  width: 68px;
  min-width: 68px;
  height: 46px;
  padding: 2px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.adj-matrix thead th {
  position: sticky;
  z-index: 3;
  top: -7px;
  height: 76px;
  color: var(--adj-muted);
  font-weight: 750;
  vertical-align: bottom;
  background: var(--bg-card);
}

.adj-matrix .adj-matrix-superhead th {
  top: -7px;
  height: 40px;
  padding: 3px 5px;
  vertical-align: middle;
  background: color-mix(in srgb, var(--adj-area-color, var(--bg-card)) 28%, var(--bg-card));
}

.adj-matrix .adj-matrix-room-head th {
  top: 33px;
}

.adj-matrix-superhead th > button {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.adj-matrix-superhead th > button span,
.adj-matrix-superhead th > button strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adj-matrix-superhead th > button span { font-size: 0.41rem; letter-spacing: 0.04em; text-transform: uppercase; }
.adj-matrix-superhead th > button strong { color: var(--text); font-size: 0.5rem; }

.adj-matrix th:first-child {
  position: sticky;
  z-index: 2;
  left: -7px;
  width: 156px;
  min-width: 156px;
  padding: 5px 8px;
  text-align: left;
}
.adj-matrix thead th:first-child { z-index: 4; writing-mode: horizontal-tb; }
.adj-matrix .adj-matrix-superhead th:first-child { z-index: 6; background: var(--bg-card); }
.adj-matrix .adj-matrix-room-head th:first-child { z-index: 5; }
.adj-matrix .adj-matrix-room-head th:not(:first-child) {
  box-shadow: inset 0 3px 0 var(--adj-area-color);
  background: color-mix(in srgb, var(--adj-area-color) 8%, var(--bg-card));
}
.adj-matrix-column {
  display: flex;
  width: 100%;
  height: 70px;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 2px;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  user-select: none;
  touch-action: none;
}
.adj-matrix-column span { font-size: 0.5rem; font-weight: 800; }
.adj-matrix-column strong { max-width: 64px; overflow: hidden; font-size: 0.48rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.adj-matrix-column em {
  padding: 1px 3px;
  border-radius: 2px;
  background: var(--text);
  color: var(--bg);
  font-size: .4rem;
  font-style: normal;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.adj-matrix tbody th button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  user-select: none;
  touch-action: none;
}
.adj-matrix th.is-selected,
.adj-matrix tr.is-selected > th {
  box-shadow: inset 0 0 0 2px var(--text);
  background: color-mix(in srgb, var(--text) 9%, var(--bg-card)) !important;
}
.adj-matrix td.is-row-selected,
.adj-matrix td.is-column-selected {
  background: color-mix(in srgb, var(--text) 5%, var(--bg));
}
.adj-matrix td.is-selection-intersection {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 52%, transparent);
  background: color-mix(in srgb, var(--text) 11%, var(--bg));
}
.adj-matrix td.is-selection-intersection .adj-matrix-cell select {
  border-color: color-mix(in srgb, var(--text) 44%, var(--border));
}
.adj-matrix th.is-context,
.adj-matrix tr.is-context > th,
.adj-matrix td.is-context { opacity: 0.42; }
.adj-matrix td.is-context:hover,
.adj-matrix th.is-context:hover { opacity: 0.68; }

.adj-matrix th.is-held,
.adj-matrix tr.is-held > th,
.adj-matrix td.adj-matrix-held-cell {
  opacity: 0.42;
}

.adj-matrix-column.is-held,
.adj-matrix tbody th button.is-held {
  cursor: pointer;
}

.adj-matrix-column.is-held em,
.adj-matrix tbody th button.is-held em {
  background: color-mix(in srgb, var(--adj-muted) 76%, var(--text));
}

.adj-matrix-held-cell {
  min-width: 54px;
  background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--adj-muted) 7%, transparent) 0 3px, transparent 3px 7px);
  color: var(--adj-muted);
  text-align: center;
}

.adj-matrix-held-cell span {
  font-size: 0.42rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.adj-matrix tbody th span,
.adj-matrix tbody th strong,
.adj-matrix tbody th em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adj-matrix tbody th span { color: var(--adj-muted); font-size: 0.49rem; }
.adj-matrix tbody th strong { color: var(--adj-ink); font-size: 0.56rem; }
.adj-matrix tbody th em { display: flex; align-items: center; gap: 4px; color: var(--adj-muted); font-size: 0.45rem; font-style: normal; font-weight: 500; }
.adj-matrix tbody tr:not(.adj-matrix-row-superhead) > th {
  background: color-mix(in srgb, var(--adj-area-color) 8%, var(--bg));
}

.adj-matrix-row-superhead th {
  position: relative !important;
  left: auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 32px;
  padding: 0 !important;
  background: color-mix(in srgb, var(--adj-area-color) 26%, var(--bg-card)) !important;
}

.adj-matrix-row-superhead button {
  display: flex;
  width: 100%;
  height: 32px;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.adj-matrix-row-superhead button span {
  color: var(--adj-muted);
  font-size: 0.45rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.adj-matrix-row-superhead button strong { font-size: 0.58rem; }
.adj-matrix-row-superhead button b { margin-left: auto; color: var(--adj-muted); font-size: 0.48rem; font-weight: 650; }
.adj-matrix td.is-diagonal { background: var(--bg-card); }
.adj-matrix td.adj-matrix-mirror { background: repeating-linear-gradient(135deg, var(--bg-card) 0 4px, var(--bg) 4px 8px); }

/* A route is a spatial network, not another adjacency type. Its compact
   bipartite band uses the matrix's same room columns without polluting the
   room-to-room relationship grid. */
.adj-matrix-circulation {
  width: max-content;
  min-width: 100%;
  margin-top: 8px;
  border: 1px solid color-mix(in srgb, #4fa5ab 34%, var(--adj-line));
  border-radius: 7px;
  overflow: hidden;
  background: color-mix(in srgb, #4fa5ab 4%, var(--bg));
}
.adj-matrix-circulation > header {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(250px, 1.8fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 5px 8px;
  border-bottom: 1px solid color-mix(in srgb, #4fa5ab 26%, var(--adj-line));
}
.adj-matrix-circulation > header div { display: flex; flex-direction: column; gap: 1px; }
.adj-matrix-circulation > header span { color: #277a82; font-size: .43rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.adj-matrix-circulation > header strong { font-size: .61rem; }
.adj-matrix-circulation > header small { color: var(--adj-muted); font-size: .48rem; }
.adj-matrix-circulation > header > button,
.adj-matrix-circulation-empty button {
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, #4fa5ab 48%, var(--adj-line));
  border-radius: 5px;
  background: var(--surface);
  color: #277a82;
  font-size: .51rem;
  font-weight: 780;
  cursor: pointer;
}
.adj-matrix-circulation table { width: max-content; min-width: 100%; border-spacing: 0; border-collapse: collapse; }
.adj-matrix-circulation th { width: 150px; min-width: 150px; padding: 3px 7px; text-align: left; }
.adj-matrix-circulation th button { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; border: 0; background: transparent; color: var(--adj-ink); font-size: .53rem; font-weight: 740; cursor: pointer; }
.adj-matrix-circulation th button i { width: 13px; height: 7px; border: 2px solid #4fa5ab; border-radius: 999px; }
.adj-matrix-circulation th button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adj-matrix-circulation td { width: 68px; min-width: 68px; height: 32px; padding: 3px; border-left: 1px solid var(--adj-line); text-align: center; }
.adj-matrix-route-toggle { display: inline-grid; width: 18px; height: 18px; place-items: center; padding: 0; border: 1px solid color-mix(in srgb, #4fa5ab 48%, var(--adj-line)); border-radius: 999px; background: var(--surface); cursor: pointer; }
.adj-matrix-route-toggle i { width: 5px; height: 5px; border-radius: 50%; background: transparent; }
.adj-matrix-route-toggle.is-connected { border-color: #4fa5ab; background: #4fa5ab; }
.adj-matrix-route-toggle.is-connected i { background: #fff; }
.adj-matrix-circulation-empty { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 6px 9px; color: var(--adj-muted); font-size: .52rem; }

.adj-planner-context-menu {
  position: fixed;
  z-index: 10040;
  width: 224px;
  max-height: none;
  overflow: visible;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text);
  box-shadow: 0 14px 34px color-mix(in srgb, #000 20%, transparent);
}

.adj-context-group { display: flex; flex-direction: column; gap: 1px; }
.adj-context-group + .adj-context-group { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border); }
.adj-context-group > span {
  padding: 4px 7px 3px;
  color: var(--adj-muted);
  font-size: .46rem;
  font-weight: 760;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.adj-context-group > button {
  display: grid;
  width: 100%;
  min-height: 31px;
  grid-template-columns: 22px minmax(0, 1fr);
  grid-template-rows: 1fr;
  align-items: center;
  column-gap: 6px;
  padding: 4px 7px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.adj-context-group > button:hover,
.adj-context-group > button:focus-visible { background: var(--overlay-hover); outline: 0; }
.adj-context-group > button:disabled { opacity: .42; cursor: default; }
.adj-context-group > button i {
  position: relative;
  width: 17px;
  height: 17px;
  grid-row: 1;
  border: 2px solid currentColor;
  border-radius: 50%;
  opacity: .68;
}
.adj-context-group > button i.is-lobby { border-radius: 3px; }
.adj-context-group > button i.is-focus { border-style: double; border-width: 3px; }
.adj-context-group > button i.is-room { border-radius: 4px; }
.adj-context-group > button i.is-select::after,
.adj-context-group > button i.is-remove::after,
.adj-context-group > button i.is-whole::after,
.adj-context-group > button i.is-pin::after,
.adj-context-group > button i.is-thread::after {
  content: '';
  position: absolute;
  inset: 6px 3px;
  border-top: 2px solid currentColor;
}
.adj-context-group > button i.is-select::before { content: '+'; position: absolute; inset: -4px 0 0; text-align: center; font-size: 13px; font-style: normal; }
.adj-context-group > button i.is-remove::before { content: '−'; position: absolute; inset: -5px 0 0; text-align: center; font-size: 14px; font-style: normal; }
.adj-context-group > button i.is-pin { border-radius: 50% 50% 50% 0; transform: rotate(-45deg) scale(.78); }
.adj-context-group > button i.is-thread { border-width: 0 0 2px; border-radius: 0; transform: rotate(-16deg); }
.adj-context-group > button i.is-rotate { border-style: dashed; }
.adj-context-group > button i.is-rotate::after {
  content: '↻';
  position: absolute;
  inset: -5px 0 0;
  border: 0;
  text-align: center;
  font-size: 15px;
  font-style: normal;
}
.adj-context-group > button i.is-corridor::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 14px;
  width: 6px;
  border-top: 2px solid currentColor;
}
.adj-context-group > button strong { font-size: .58rem; line-height: 1.15; }

.adj-context-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 5px 7px 7px;
}
.adj-context-fields.is-single { grid-template-columns: 1fr; }
.adj-context-fields > label { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.adj-context-fields > label > span,
.adj-context-fields > small {
  color: var(--adj-muted);
  font-size: .44rem;
  font-weight: 720;
}
.adj-context-fields > small { grid-column: 1 / -1; }
.adj-context-number { display: flex; align-items: center; gap: 4px; }
.adj-context-number input,
.adj-context-fields select {
  width: 100%;
  height: 27px;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--adj-workspace-base);
  color: var(--text);
  padding: 0 6px;
  font-size: .56rem;
  font-variant-numeric: tabular-nums;
}
.adj-context-number b { color: var(--adj-muted); font-size: .48rem; }
.adj-context-fields.is-relationship { grid-template-columns: 1fr .82fr; }
.adj-context-fields.is-relationship > button {
  grid-column: 1 / -1;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  font-size: .52rem;
  font-weight: 750;
  cursor: pointer;
}
.adj-context-fields.is-relationship > button:hover { background: var(--overlay-hover); }
.adj-context-footprint > small {
  padding: 3px 7px 1px;
  color: var(--adj-muted);
  font-size: .48rem;
}
.adj-context-shape-presets,
.adj-context-cut-sides {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  padding: 2px 5px;
}
.adj-context-cut-sides { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.adj-context-shape-presets button,
.adj-context-cut-sides button {
  min-height: 25px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: transparent;
  color: var(--adj-muted);
  font-size: .52rem;
  cursor: pointer;
}
.adj-context-shape-presets button:hover,
.adj-context-cut-sides button:hover {
  background: var(--overlay-hover);
  color: var(--adj-ink);
}
.adj-context-floor { display: flex; gap: 3px; padding: 4px 7px; }
.adj-context-floor button {
  min-width: 29px;
  height: 25px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: transparent;
  color: var(--adj-muted);
  font-size: .5rem;
  font-weight: 760;
  cursor: pointer;
}
.adj-context-floor button:hover,
.adj-context-floor button.is-active { background: var(--overlay-hover); color: var(--text); }

/* Every Planner select shares one instrument face. Context may change its
   width or height, but never its arrow, border, radius, or focus language. */
.adj-root select:not([multiple]) {
  appearance: none;
  -webkit-appearance: none;
  border-color: var(--adj-line);
  border-radius: 6px;
  outline: none;
  background-color: var(--bg-card);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--adj-muted) 50%),
    linear-gradient(135deg, var(--adj-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 11px) 50%,
    calc(100% - 7px) 50%;
  background-repeat: no-repeat;
  background-size: 4px 4px, 4px 4px;
  color: var(--adj-ink);
  padding-right: 25px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 130ms ease, background-color 130ms ease, box-shadow 130ms ease;
}

.adj-root select:not([multiple]):hover {
  border-color: color-mix(in srgb, var(--adj-gold) 42%, var(--adj-line));
}

.adj-root select:not([multiple]):focus {
  border-color: color-mix(in srgb, var(--adj-gold) 72%, var(--adj-line));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--adj-gold) 13%, transparent);
}

.adj-root select:not([multiple]):disabled {
  opacity: .48;
  cursor: default;
}

.adj-gs-select-wrap > i { display: none; }

.adj-matrix-cell { position: relative; }
.adj-matrix-select-wrap {
  position: relative;
  display: block;
}
.adj-matrix-cell select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg);
  color: var(--adj-muted);
  padding: 0 18px 0 4px;
  font-size: 0.56rem;
}
.adj-matrix-select-wrap > i {
  position: absolute;
  top: 50%;
  right: 7px;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  color: var(--adj-muted);
  pointer-events: none;
  transform: translateY(-68%) rotate(45deg);
  transition: color 140ms ease, transform 140ms ease;
}
.adj-matrix-select-wrap:focus-within > i {
  color: var(--adj-ink);
  transform: translateY(-34%) rotate(225deg);
}
.adj-matrix-cell.has-explicit select { color: var(--adj-ink); font-weight: 750; }
.adj-matrix-cell.is-satisfied select {
  color: color-mix(in srgb, var(--success, #3c8d64) 78%, var(--adj-ink));
}
.adj-matrix-cell.is-unresolved select {
  color: color-mix(in srgb, var(--warning, #a66b22) 84%, var(--adj-ink));
}
.adj-matrix-cell.is-context select { cursor: default; }
.adj-matrix-reading {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--adj-muted);
  font-size: 0.5rem;
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adj-matrix-reading.is-satisfied { color: color-mix(in srgb, var(--success, #3c8d64) 78%, var(--adj-ink)); }
.adj-matrix-reading.is-unresolved { color: color-mix(in srgb, var(--warning, #a66b22) 84%, var(--adj-ink)); }
.adj-ledger-reading,
.adj-gpop-reading {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  border-radius: 999px;
  padding: 0 7px;
  color: var(--adj-muted);
  background: color-mix(in srgb, var(--adj-muted) 8%, transparent);
  font-size: 0.55rem;
  font-weight: 720;
  white-space: nowrap;
}
.adj-ledger-reading.is-satisfied,
.adj-gpop-reading.is-satisfied {
  color: color-mix(in srgb, var(--success, #3c8d64) 78%, var(--adj-ink));
}
.adj-ledger-reading.is-unresolved,
.adj-gpop-reading.is-unresolved {
  color: color-mix(in srgb, var(--warning, #a66b22) 84%, var(--adj-ink));
  background: color-mix(in srgb, var(--warning, #a66b22) 10%, transparent);
}
.adj-gpop-reading { margin-right: 4px; }
.adj-matrix-cell > i {
  position: absolute;
  top: -3px;
  right: -3px;
  display: grid;
  min-width: 13px;
  height: 13px;
  place-items: center;
  border-radius: 999px;
  background: var(--adj-blue);
  color: #fff;
  font-size: 0.44rem;
  font-style: normal;
  font-weight: 800;
}

.adj-graph-selectionbar.is-workset {
  border-color: color-mix(in srgb, var(--adj-gold) 50%, var(--adj-line));
  background: color-mix(in srgb, var(--adj-gold) 7%, var(--surface));
}

@container (max-width: 620px) {
  .adj-ledger-subline {
    grid-template-columns: minmax(120px, 1fr) minmax(76px, .7fr) 27px;
    padding-left: 34px;
  }
  .adj-ledger-subline > .adj-force-select,
  .adj-ledger-note,
  .adj-ledger-source,
  .adj-ledger-add > [data-ledger-force],
  .adj-ledger-add-hint { display: none; }
}

/* Rows use a fixed semantic sequence: target, relationship, reading,
   importance, note, delete. The old five-track grid placed the delete button
   on an implicit track, which is why it could drift below the row and expose
   native overflow at ordinary desktop widths. */
.adj-ledger-subline {
  box-sizing: border-box;
  grid-template-columns: minmax(148px, 1.15fr) minmax(82px, .62fr) minmax(90px, .68fr) minmax(86px, .65fr) minmax(104px, .82fr) 30px;
}

.adj-ledger-subline > * {
  min-width: 0;
}

.adj-ledger-target strong,
.adj-ledger-subline > .adj-ledger-reading,
.adj-ledger-derived,
.adj-ledger-source,
.adj-ledger-note {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adj-ledger-subline select {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.adj-ledger-subline > .adj-delete {
  display: grid;
  width: 28px;
  height: 28px;
  min-width: 28px;
  place-items: center;
  justify-self: end;
  padding: 0;
  border: 1px solid var(--adj-line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--adj-muted);
  font-size: .88rem;
  line-height: 1;
}

.adj-ledger-subline > .adj-delete:hover,
.adj-ledger-subline > .adj-delete:focus-visible {
  border-color: color-mix(in srgb, #bd5c5c 62%, var(--adj-line));
  background: color-mix(in srgb, #bd5c5c 10%, var(--surface));
  color: #bd5c5c;
  outline: none;
}

.adj-ledger-subline.is-derived {
  grid-template-columns: minmax(148px, 1.25fr) minmax(80px, .66fr) minmax(76px, .56fr) minmax(112px, .84fr) 30px;
}

@container (max-width: 620px) {
  .adj-ledger-subline {
    grid-template-columns: minmax(112px, 1fr) minmax(76px, .72fr) minmax(82px, .76fr) 28px;
  }

  .adj-ledger-subline.is-derived,
  .adj-ledger-subline.is-circulation,
  .adj-ledger-subline.is-add {
    grid-template-columns: minmax(112px, 1fr) minmax(76px, .72fr) 28px;
  }
}

@media (max-width: 860px) {
  .adj-table[data-view="workspace"][data-pane-count="2"] .adj-workspace-deck {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .adj-view-switch button { padding-right: 7px; padding-left: 7px; }
}

/* Dimensional Block Plan pins: exact local givens inside the larger Parti. */
.adj-spatial-precedence {
  display: inline-flex;
  min-width: 0;
  height: 29px;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--adj-gold) 35%, var(--adj-line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--adj-gold) 6%, var(--surface));
  color: var(--adj-muted);
  font-size: 0.51rem;
  white-space: nowrap;
}
.adj-spatial-precedence i,
.adj-brief-index-status .is-scope i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--adj-gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--adj-gold) 16%, transparent);
}
.adj-spatial-precedence strong { color: var(--adj-ink); font-size: 0.56rem; }
.adj-block-pin-button.is-active {
  border-color: color-mix(in srgb, var(--adj-gold) 55%, var(--adj-line)) !important;
  background: color-mix(in srgb, var(--adj-gold) 13%, var(--surface)) !important;
  color: var(--adj-ink) !important;
}
.adj-block-selection.is-pinned strong { color: color-mix(in srgb, var(--adj-gold) 75%, var(--adj-ink)); }
.adj-edit-block.is-pinned .adj-block-shape {
  stroke: color-mix(in srgb, var(--adj-gold) 84%, var(--adj-ink));
  stroke-width: 1.5px;
  stroke-dasharray: 2 1;
}
.adj-block-pin-mark { pointer-events: none; }
.adj-block-pin-mark circle {
  fill: color-mix(in srgb, var(--adj-gold) 88%, var(--surface));
  stroke: color-mix(in srgb, var(--adj-ink) 70%, var(--adj-gold));
  stroke-width: 0.7px;
}
.adj-block-pin-mark path {
  fill: none;
  stroke: color-mix(in srgb, var(--adj-ink) 84%, #000);
  stroke-width: 0.85px;
  stroke-linecap: round;
}

.adj-spatial-pin-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--adj-gold) 32%, var(--adj-line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--adj-gold) 5%, var(--surface));
}
.adj-spatial-pin-summary > div { display: grid; min-width: 0; gap: 1px; }
.adj-spatial-pin-summary span { color: var(--adj-muted); font-size: 0.5rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.adj-spatial-pin-summary strong { font-size: 0.68rem; }
.adj-spatial-pin-summary p { margin: 0; color: var(--adj-muted); font-size: 0.56rem; }
.adj-spatial-pin-summary button { flex: 0 0 auto; border: 0; background: transparent; color: var(--adj-ink); cursor: pointer; font-size: 0.59rem; font-weight: 700; }
.adj-study-pin-banner {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb, var(--adj-gold) 30%, var(--adj-line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--adj-gold) 5%, var(--surface));
  font-size: 0.56rem;
}
.adj-study-pin-banner i { width: 7px; height: 7px; border: 1.5px solid var(--adj-gold); border-radius: 50%; }
.adj-study-pin-banner span { color: var(--adj-muted); }

/* The Brief is a dense planning ledger, not a stack of presentation cards. */
.adj-brief-connections-toolbar {
  display: grid;
  grid-template-columns: minmax(105px, 1fr) minmax(115px, 0.9fr) auto auto auto;
  align-items: end;
  gap: 6px;
}
.adj-brief-connections-title { align-self: center; }
.adj-brief-connection-search input {
  width: 100%;
  min-width: 0;
  height: 29px;
}
.adj-brief-connections-toolbar label select { min-width: 88px; }
.adj-brief-index-status .is-scope {
  gap: 6px;
  padding-right: 9px;
  border-right: 1px solid var(--adj-line);
  color: var(--adj-ink);
}
.adj-brief-rules { gap: 3px; }
.adj-brief-rules .adj-rule-card {
  min-height: 36px;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 8px;
  border-radius: 6px;
}
.adj-brief-rules .adj-rule-card.adj-typed,
.adj-brief-rules .adj-spatial-pin-card {
  grid-template-columns: 27px minmax(0, 1fr) auto;
}
.adj-brief-rules .adj-typed-graphic {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 6px;
  background: color-mix(in srgb, var(--adj-muted) 7%, transparent);
}
.adj-brief-rules .adj-typed-graphic svg { width: 22px; height: 18px; }
.adj-brief-rules .adj-typed-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 5px;
}
.adj-brief-rules .adj-typed-head strong,
.adj-brief-rules .adj-rule-spaces strong { overflow: hidden; font-size: 0.61rem; text-overflow: ellipsis; white-space: nowrap; }
.adj-brief-rules .adj-typed-type,
.adj-brief-rules .adj-typed-count,
.adj-brief-rules .adj-rule-spaces span { font-size: 0.46rem; }
.adj-brief-rules .adj-rule-spaces { grid-template-columns: minmax(0, 1fr) 62px minmax(0, 1fr); align-items: center; gap: 4px; }
.adj-brief-rules .adj-rule-note { max-width: 100%; margin: 1px 0 0; overflow: hidden; font-size: 0.5rem; text-overflow: ellipsis; white-space: nowrap; }
.adj-brief-rules .adj-rule-controls { flex-wrap: nowrap; gap: 3px; }
.adj-brief-rules .adj-rule-controls select { width: auto; max-width: 82px; height: 24px; padding: 0 18px 0 5px; font-size: 0.5rem; }
.adj-brief-rules .adj-rule-controls button { min-height: 23px; padding: 0 5px; font-size: 0.49rem; }
.adj-pin-symbol {
  position: relative;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--adj-gold) 18%, var(--surface));
}
.adj-pin-symbol::before { width: 7px; height: 7px; border: 1.5px solid var(--adj-gold); border-radius: 50%; content: ""; }
.adj-pin-symbol i { position: absolute; top: 14px; width: 1px; height: 7px; background: var(--adj-gold); transform: rotate(12deg); }

@container (max-width: 720px) {
  .adj-brief-connections-toolbar { grid-template-columns: minmax(0, 1fr) repeat(2, auto); }
  .adj-brief-connections-title,
  .adj-brief-connection-search { grid-column: span 2; }
  .adj-brief-rules .adj-rule-card,
  .adj-brief-rules .adj-rule-card.adj-typed,
  .adj-brief-rules .adj-spatial-pin-card { grid-template-columns: minmax(0, 1fr); }
  .adj-brief-rules .adj-typed-graphic,
  .adj-brief-rules .adj-pin-symbol { display: none; }
  .adj-brief-rules .adj-rule-controls { justify-content: flex-start; }
}

/* Linked language: the Brief sentence behaves like a strip of annotated paper. */
.adj-nl-composer-shell {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
.adj-nl-input[contenteditable="true"] {
  display: block;
  width: 100%;
  min-height: 42px;
  height: auto;
  padding: 9px 12px;
  overflow: visible;
  line-height: 22px;
  white-space: pre-wrap;
}
.adj-nl-input[contenteditable="true"]:empty::before {
  color: color-mix(in srgb, var(--adj-muted) 78%, transparent);
  content: attr(data-placeholder);
  pointer-events: none;
}
.adj-nl-guidance {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  color: var(--adj-muted);
  font-size: 0.51rem;
}
.adj-nl-guidance kbd {
  padding: 1px 4px;
  border: 1px solid color-mix(in srgb, var(--adj-gold) 45%, var(--adj-line));
  border-radius: 4px;
  background: color-mix(in srgb, var(--adj-gold) 8%, var(--surface));
  color: var(--adj-ink);
  font-family: inherit;
  font-size: inherit;
}
.adj-nl-ref-chip,
.adj-brief-room-chip {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 5px;
  border: 1px solid color-mix(in srgb, var(--adj-blue) 26%, var(--adj-line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--adj-blue) 7%, var(--surface));
  color: var(--adj-ink);
  vertical-align: middle;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.adj-nl-ref-chip {
  min-height: 22px;
  margin: 0 2px;
  padding: 0 8px 0 4px;
  line-height: 20px;
  user-select: none;
}
.adj-brief-room-chip {
  min-width: 0;
  min-height: 20px;
  padding: 1px 7px 1px 3px;
  text-align: left;
}
.adj-nl-ref-chip:hover,
.adj-brief-room-chip:hover {
  border-color: color-mix(in srgb, var(--adj-gold) 68%, var(--adj-line));
  background: color-mix(in srgb, var(--adj-gold) 10%, var(--surface));
  box-shadow: 0 2px 9px color-mix(in srgb, #000 12%, transparent);
  transform: translateY(-1px);
}
.adj-nl-ref-chip i,
.adj-brief-room-chip i {
  display: inline-grid;
  min-width: 25px;
  height: 16px;
  place-items: center;
  padding: 0 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--adj-blue) 17%, var(--surface));
  color: color-mix(in srgb, var(--adj-blue) 72%, var(--adj-ink));
  font-size: 0.43rem;
  font-style: normal;
  font-weight: 820;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.adj-nl-ref-chip.is-area i,
.adj-brief-room-chip.is-area i { background: color-mix(in srgb, var(--adj-gold) 18%, var(--surface)); color: color-mix(in srgb, var(--adj-gold) 72%, var(--adj-ink)); }
.adj-nl-ref-chip.is-department i,
.adj-brief-room-chip.is-department i { background: color-mix(in srgb, #9a78c7 17%, var(--surface)); color: color-mix(in srgb, #9a78c7 72%, var(--adj-ink)); }
.adj-nl-ref-chip b,
.adj-brief-room-chip b {
  min-width: 0;
  overflow: hidden;
  font-size: 0.58rem;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adj-nl-ref-chip b { font-size: 0.68rem; }

/* Brief refinement: a quiet constraint ledger, not a parade of colored cards
   or control pills. The graph carries the color; this panel carries the words. */
.adj-settings-nav.adj-brief-nav { grid-template-columns: repeat(3, 1fr); }
.adj-settings-body .adj-brief-conditions-intro {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 1px 8px;
  border-bottom: 1px solid var(--adj-line);
}
.adj-brief-conditions-intro > div { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.adj-brief-conditions-intro strong { font-size: 0.72rem; }
.adj-brief-conditions-intro span { color: var(--adj-muted); font-size: 0.58rem; }
.adj-brief-conditions-intro > b { color: var(--adj-muted); font-size: 0.56rem; font-weight: 650; white-space: nowrap; }
.adj-brief-condition-rows { display: flex; flex-direction: column; gap: 4px; padding-top: 5px; }
.adj-settings-body .adj-building-duo { gap: 4px !important; }
.adj-settings-body .adj-layer-card,
.adj-settings-body .adj-equation-site,
.adj-settings-body .adj-spatial-pin-summary,
.adj-settings-body .adj-area-budget,
.adj-settings-body .adj-study-controls {
  border-color: var(--adj-line);
  border-radius: 4px;
  background: color-mix(in srgb, var(--surface) 98%, var(--adj-blue) 2%);
  box-shadow: none;
}
.adj-settings-body .adj-layer-head {
  padding: 8px 10px;
  background: color-mix(in srgb, var(--adj-blue) 4%, var(--surface));
}
.adj-settings-body .adj-layer-head h4 { font-family: inherit; font-size: 0.72rem; font-weight: 760; }
.adj-settings-body .adj-layer-head p { font-size: 0.58rem; }
.adj-settings-body .adj-layer-icon,
.adj-settings-body .adj-layer-count { border-radius: 3px; }
.adj-settings-body .adj-layer-icon { width: 24px; height: 24px; border-color: color-mix(in srgb, var(--adj-line) 82%, transparent); color: var(--adj-muted); font-size: 0.8rem; }
.adj-settings-body .adj-layer-count { min-width: auto; height: auto; padding: 2px 5px; background: transparent; }
.adj-brief-rules .adj-rule-card { border-left: 0; border-radius: 3px; background: color-mix(in srgb, var(--surface) 99%, var(--adj-blue) 1%); }
.adj-brief-rules .adj-rule-card.tone-critical { background: color-mix(in srgb, var(--surface) 93%, var(--adj-gold) 7%); }
.adj-brief-rules .adj-rule-card.tone-high { background: color-mix(in srgb, var(--surface) 94%, var(--adj-blue) 6%); }
.adj-brief-rules .adj-rule-card.tone-medium { background: color-mix(in srgb, var(--surface) 96%, var(--adj-muted) 4%); }
.adj-brief-rules .adj-rule-card.tone-separate { background: color-mix(in srgb, var(--surface) 94%, #c27655 6%); }
.adj-brief-rules .adj-rule-card::before { display: none; }
.adj-brief-rules .adj-rule-card:hover,
.adj-brief-rules .adj-rule-card:focus-within {
  border-color: color-mix(in srgb, var(--adj-focus) 56%, var(--adj-line));
  background: color-mix(in srgb, var(--adj-focus) 8%, var(--surface));
  color: var(--adj-focus);
}
.adj-brief-rules .adj-brief-room-chip,
.adj-brief-rules .adj-prov-chip,
.adj-brief-rules .adj-source-badge,
.adj-brief-rules .adj-force-chip {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--adj-muted);
  font-size: 0.5rem;
  line-height: 1.25;
}
.adj-brief-rules .adj-brief-room-chip { gap: 3px; color: var(--adj-ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--adj-line) 85%, transparent); text-underline-offset: 2px; }
.adj-brief-rules .adj-brief-room-chip:hover { border: 0; background: transparent; box-shadow: none; color: var(--adj-blue); transform: none; }
.adj-brief-rules .adj-brief-room-chip i { display: none; }
.adj-brief-rules .adj-brief-room-chip b { font-size: 0.58rem; font-weight: 700; }
.adj-brief-rules .adj-prov-chip::before { width: 4px; height: 4px; }
.adj-brief-rules .adj-rule-controls { align-items: center; }
.adj-nl-suggest {
  position: absolute;
  z-index: 80;
  top: calc(100% + 5px);
  left: 0;
  display: grid;
  width: min(390px, 100%);
  max-height: 260px;
  overflow: auto;
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--adj-gold) 28%, var(--adj-line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 97%, var(--adj-gold) 3%);
  box-shadow: 0 16px 36px color-mix(in srgb, #000 27%, transparent);
}
.adj-nl-suggest[hidden] { display: none; }
.adj-nl-suggest-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 4px 7px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--adj-ink);
  text-align: left;
  cursor: pointer;
}
.adj-nl-suggest-item:hover,
.adj-nl-suggest-item.is-active { background: color-mix(in srgb, var(--adj-gold) 11%, var(--surface)); }
.adj-nl-suggest-item i { color: var(--adj-muted); font-size: 0.47rem; font-style: normal; font-weight: 800; text-transform: uppercase; }
.adj-nl-suggest-item strong { overflow: hidden; font-size: 0.64rem; text-overflow: ellipsis; white-space: nowrap; }
.adj-nl-suggest-item span { color: var(--adj-muted); font-size: 0.49rem; white-space: nowrap; }

.adj-brief-reference-row {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 3px;
}
.adj-brief-reference-more {
  align-self: center;
  color: var(--adj-muted);
  font-size: 0.48rem;
}
.adj-brief-rules .adj-rule-spaces .adj-brief-room-chip { width: fit-content; max-width: 100%; }
.adj-brief-rules .adj-typed-head > .adj-brief-room-chip { align-self: center; }
.adj-edit-block.is-brief-hot .adj-block-shape {
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--adj-gold) 78%, transparent));
  stroke: var(--adj-gold);
  stroke-width: 2px;
}
.adj-ledger-room.is-brief-hot,
.adj-matrix tr.is-brief-hot > th,
.adj-matrix th.is-brief-hot {
  background: color-mix(in srgb, var(--adj-gold) 15%, var(--surface));
  color: color-mix(in srgb, var(--adj-gold) 78%, var(--adj-ink));
}

@container (max-width: 580px) {
  .adj-nl-row { flex-wrap: wrap; }
  .adj-nl-row > .btn-primary { width: 100%; }
  .adj-nl-guidance { align-items: flex-start; flex-direction: column; gap: 2px; }
  .adj-nl-suggest-item { grid-template-columns: 32px minmax(0, 1fr); }
  .adj-nl-suggest-item span { display: none; }
}

/* ===== Slim NL bar: a small "NL +" chip that unrolls into the composer ===== */
.adj-nlbar {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}
.adj-nlbar[data-open="true"] {
  /* The composer uses the toolbar's remaining space, not viewport width. */
  flex: 1 1 220px;
}
.adj-nlbar-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 800;
  letter-spacing: 0.04em;
  transition: width 300ms cubic-bezier(.22, .61, .36, 1), margin 300ms cubic-bezier(.22, .61, .36, 1), padding 300ms cubic-bezier(.22, .61, .36, 1), opacity 180ms ease;
}
.adj-nlbar-toggle .adj-nlbar-glyph { color: var(--adj-gold); }
.adj-nlbar-toggle .adj-nlbar-plus {
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  color: var(--adj-muted);
  font-weight: 900;
  line-height: 1;
  transition: transform 260ms cubic-bezier(.22, .61, .36, 1), color 160ms ease;
}
.adj-nlbar-toggle.is-active { background: color-mix(in srgb, var(--adj-gold) 15%, var(--surface)); color: var(--adj-ink); }
.adj-nlbar-toggle.is-active .adj-nlbar-plus { transform: rotate(45deg); color: var(--adj-ink); }
.adj-nlbar-shell {
  display: flex;
  align-items: center;
  height: 34px;
  width: 0;
  min-width: 0;
  max-width: 0;
  flex: 0 1 0;
  opacity: 0;
  overflow: hidden;
  transform: translateX(-8px);
  pointer-events: none;
  transition: max-width 340ms cubic-bezier(.22, .61, .36, 1), opacity 220ms ease, transform 300ms cubic-bezier(.22, .61, .36, 1);
}
.adj-nlbar[data-open="true"] .adj-nlbar-shell {
  width: 100%;
  max-width: 100%;
  flex: 1 1 auto;
  opacity: 1;
  overflow: visible;
  transform: none;
  pointer-events: auto;
}
.adj-nlbar[data-open="true"] .adj-nlbar-toggle {
  width: 0;
  min-width: 0;
  margin: 0;
  padding-inline: 0;
  border-color: transparent;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Compact single-line composer inside the bar. Popovers escape the bar height. */
.adj-nl.is-bar {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.adj-nl.is-bar .adj-nl-row { display: flex; width: 100%; min-width: 0; flex-wrap: nowrap; gap: 0; align-items: flex-start; }
.adj-nl.is-bar .adj-nl-composer-shell { width: 100%; min-width: 0; }
.adj-nl.is-bar .adj-nl-input[contenteditable="true"] {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-height: 34px;
  max-height: 68px;
  height: auto;
  padding: 7px 11px;
  overflow-x: hidden;
  overflow-y: auto;
  overflow-wrap: anywhere;
  line-height: 19px;
  white-space: pre-wrap;
}
.adj-nl.is-bar .adj-nl-input::-webkit-scrollbar { width: 5px; }
.adj-nl.is-bar .adj-nl-guidance { display: none; }
.adj-nl.is-bar .adj-nl-note {
  position: absolute;
  z-index: 82;
  top: calc(100% + 6px);
  left: 0;
  width: max-content;
  max-width: 100%;
  margin: 0;
}
.adj-nl-note button {
  margin-left: 5px;
  padding: 1px 5px;
  border: 1px solid currentColor;
  border-radius: 5px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
}

/* Cycling greyed example marquee before the user types. */
.adj-nl-input.is-marquee:empty::before {
  animation: adjNlMarquee 2.8s ease-in-out infinite;
}
@keyframes adjNlMarquee {
  0% { opacity: 0; transform: translateY(3px); }
  10% { opacity: 0.72; transform: none; }
  86% { opacity: 0.72; transform: none; }
  100% { opacity: 0; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .adj-nlbar-shell { transition: opacity 120ms ease; }
  .adj-nl-input.is-marquee:empty::before { animation: none; }
}

/* Tag ("#class") chip — a third color family alongside room/area/dept. */
.adj-nl-ref-chip.is-tag { border-color: color-mix(in srgb, #3f9d6b 30%, var(--adj-line)); background: color-mix(in srgb, #3f9d6b 8%, var(--surface)); }
.adj-nl-ref-chip.is-tag i { background: color-mix(in srgb, #3f9d6b 17%, var(--surface)); color: color-mix(in srgb, #3f9d6b 74%, var(--adj-ink)); }

/* Suggest-menu badge tints per trigger. */
.adj-nl-suggest-item.is-tag i { color: color-mix(in srgb, #3f9d6b 78%, var(--adj-ink)); }
.adj-nl-suggest-item.is-template i { color: color-mix(in srgb, var(--adj-gold) 82%, var(--adj-ink)); font-weight: 900; }

/* ===== Live parse preview: "this becomes → …" with confidence ===== */
.adj-nl-preview {
  position: absolute;
  z-index: 79;
  top: calc(100% + 5px);
  left: 0;
  width: min(420px, 92vw);
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--adj-gold) 24%, var(--adj-line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 97%, var(--adj-gold) 3%);
  box-shadow: 0 14px 32px color-mix(in srgb, #000 24%, transparent);
  font-size: 0.6rem;
}
.adj-nl-preview[hidden] { display: none; }
.adj-nl-preview-hit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.adj-nl-preview-badge {
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--adj-blue) 16%, var(--surface));
  color: color-mix(in srgb, var(--adj-blue) 78%, var(--adj-ink));
  font-size: 0.5rem;
  font-weight: 820;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.adj-nl-preview-hit.is-goal .adj-nl-preview-badge { background: color-mix(in srgb, var(--adj-gold) 18%, var(--surface)); color: color-mix(in srgb, var(--adj-gold) 80%, var(--adj-ink)); }
.adj-nl-preview-hit strong { flex: 1 1 auto; min-width: 0; color: var(--adj-ink); font-size: 0.64rem; font-weight: 720; }
.adj-nl-preview-conf {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--adj-muted);
  font-variant-numeric: tabular-nums;
  font-size: 0.52rem;
}
.adj-nl-preview-conf i {
  width: 34px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--adj-gold) var(--adj-conf, 0%), color-mix(in srgb, var(--adj-muted) 30%, transparent) var(--adj-conf, 0%));
}
.adj-nl-preview-cta { color: var(--adj-muted); font-size: 0.5rem; font-style: normal; }
.adj-nl-preview-miss > span { color: var(--adj-muted); }
.adj-nl-preview-tips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.adj-nl-preview-tip {
  padding: 3px 8px;
  border: 1px solid var(--adj-line);
  border-radius: 999px;
  background: transparent;
  color: var(--adj-ink);
  font-size: 0.55rem;
  cursor: pointer;
}
.adj-nl-preview-tip:hover { border-color: color-mix(in srgb, var(--adj-gold) 60%, var(--adj-line)); background: color-mix(in srgb, var(--adj-gold) 10%, var(--surface)); }
.adj-nl-preview-tip.is-hint { cursor: default; color: var(--adj-muted); }
.adj-nl-preview-tip.is-hint:hover { border-color: var(--adj-line); background: transparent; }
.adj-nl-preview-tip.is-lead { border-color: color-mix(in srgb, var(--adj-gold) 42%, var(--adj-line)); }
.adj-nl-preview-tip b { margin-right: 4px; padding: 0 4px; border: 1px solid color-mix(in srgb, var(--adj-gold) 45%, var(--adj-line)); border-radius: 4px; font-size: 0.48rem; }

@media (max-width: 720px) {
  .adj-nlbar { order: 5; flex: 1 1 100%; }
  .adj-nlbar[data-open="true"] .adj-nlbar-shell { max-width: 100%; flex: 1 1 auto; }
  .adj-nl.is-bar,
  .adj-nl.is-bar .adj-nlbar-shell { width: 100%; }
}

.adj-fa-unions {
  opacity: 1;
}
.adj-fa-union-ghosts { pointer-events: none; }
.adj-fa-tension-bridges { pointer-events: none; }
.adj-fa-tension-bridge {
  fill-opacity: 0.1;
  stroke: color-mix(in srgb, var(--adj-ink) 20%, transparent);
  stroke-width: 0.8;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.adj-preview-neighborhood.is-fusing path {
  transform-box: fill-box;
  transform-origin: center;
  animation: adj-fa-outline-join 720ms cubic-bezier(.18,.82,.22,1) both;
}
@keyframes adj-fa-outline-join {
  0% { fill-opacity: 0.025; stroke-width: 0.45; opacity: 0.3; transform: scale(0.96); }
  58% { fill-opacity: 0.16; stroke-width: 1.45; opacity: 1; transform: scale(1.01); }
  100% { fill-opacity: 0.1; stroke-width: 0.8; opacity: 1; transform: scale(1); }
}
.adj-preview-neighborhood.is-separating path {
  transform-box: fill-box;
  transform-origin: center;
  animation: adj-fa-outline-split 360ms cubic-bezier(.16,.86,.24,1) both;
}
@keyframes adj-fa-outline-split {
  0% { fill-opacity: 0.025; stroke-width: 0.45; opacity: 0.22; transform: scale(0.72); }
  68% { fill-opacity: 0.15; stroke-width: 1.25; opacity: 1; transform: scale(1.035); }
  100% { fill-opacity: 0.1; stroke-width: 0.8; opacity: 1; transform: scale(1); }
}
.adj-fa-union-ghosts .adj-preview-neighborhood.is-fading-out {
  transform-box: fill-box;
  transform-origin: center;
  animation: adj-fa-outline-release 280ms cubic-bezier(.16,.8,.3,1) both;
}
@keyframes adj-fa-outline-release {
  0% { opacity: 0.7; transform: scale(1); }
  44% { opacity: 0.22; transform: scale(0.985); }
  100% { opacity: 0; transform: scale(0.96); }
}

/* In the finished Brief, references are typography—not pills. */
.adj-brief-room-chip {
  gap: 2px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--adj-muted) 34%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.adj-brief-room-chip:hover {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: color-mix(in srgb, var(--adj-gold) 76%, var(--adj-ink));
  text-decoration-color: var(--adj-gold);
  transform: none;
}
.adj-brief-room-chip b {
  order: 1;
  font-size: 0.59rem;
  font-weight: 720;
}
.adj-brief-room-chip i,
.adj-brief-room-chip.is-area i,
.adj-brief-room-chip.is-department i {
  order: 2;
  align-self: flex-start;
  min-width: 0;
  height: auto;
  margin-top: -2px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--adj-blue);
  font-size: 0.34rem;
  line-height: 1;
  letter-spacing: 0.06em;
}
.adj-brief-room-chip.is-area i { color: var(--adj-gold); }
.adj-brief-room-chip.is-department i { color: #9a78c7; }

@media (prefers-reduced-motion: reduce) {
  .adj-fa-unions,
  .adj-preview-neighborhood.is-fusing path,
  .adj-preview-neighborhood.is-separating path,
  .adj-fa-union-ghosts .adj-preview-neighborhood.is-fading-out { animation: none; transition: none; }
}

/* Ideal source and occupied adaptation are distinct retained readings.
   Switching changes presentation only, never saved room geometry. */
.adj-va-ideal-source { display: none; pointer-events: none; }
.adj-plan-editor[data-block-reading="va-diagrams"] .adj-va-ideal-source {
  display: block;
  opacity: 1;
}
.adj-plan-editor[data-block-reading="va-diagrams"] .adj-va-adapted-source,
.adj-plan-editor[data-block-reading="va-diagrams"] .adj-va-functional-diagram-rings,
.adj-plan-editor[data-block-reading="va-diagrams"] .adj-preview-corridor {
  display: none;
}
.adj-plan-editor[data-block-reading="va-diagrams"] .adj-va-parent-envelope-hit {
  display: none;
}
.adj-plan-editor[data-block-reading="va-diagrams"] .adj-va-parent-envelope-outline {
  fill: none;
  stroke-opacity: .28;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .adj-va-source-underlay { transition: opacity 160ms ease; }
}

/* Department overview is for interdepartment fit. Interior copy returns at
   inspection scale; the occupied outside edge remains the primary figure. */
.adj-plan-editor[data-block-reading="departments"] .adj-va-parent-envelope-outline {
  stroke-width: 1.8px;
  stroke-opacity: .9;
}
.adj-plan-editor[data-block-reading="departments"] .adj-va-adapted-source {
  display: none;
}
.adj-plan-editor[data-block-reading="departments"] .adj-preview-neighborhood-outline {
  fill-opacity: .20;
  stroke-opacity: .45;
}
.adj-plan-editor[data-block-reading="departments"] .adj-va-functional-diagram-source-lines {
  opacity: .32;
}
.adj-plan-editor[data-block-reading="departments"] .adj-va-adapted-source .va-planner-underlay-room,
.adj-plan-editor[data-block-reading="departments"] .adj-va-adapted-source .va-planner-underlay-annotation,
.adj-plan-editor[data-block-reading="departments"] .adj-va-adapted-source .va-planner-underlay-leader,
.adj-plan-editor[data-block-reading="departments"] .adj-va-adapted-source .va-planner-underlay-relationship,
.adj-plan-editor[data-block-reading="departments"] .adj-va-adapted-source .va-planner-underlay-arrow {
  display: none;
}
.adj-block-plan-svg[data-plan-reading="departments"][data-plan-label-detail="0"] .adj-va-functional-diagram-label,
.adj-block-plan-svg[data-plan-reading="departments"][data-plan-label-detail="1"] .adj-va-functional-diagram-label,
.adj-block-plan-svg[data-plan-reading="departments"][data-plan-label-detail="0"] .va-planner-underlay-room {
  display: none;
}
.adj-block-plan-svg[data-plan-reading="departments"][data-plan-label-detail="0"] .adj-va-adapted-source {
  opacity: .32;
}

.adj-plan-editor[data-block-reading="va-diagrams"] .adj-va-ideal-source .is-source-only-unmapped {
  fill-opacity: .12;
  stroke-opacity: .65;
  stroke-dasharray: 6 4;
  filter: saturate(.25);
  pointer-events: visiblePainted;
}

.adj-va-ideal-departments { display: none; pointer-events: none; }
.adj-va-ideal-departments [data-va-parent-members]:not([data-va-parent-members=""]) { pointer-events: all; cursor: grab; }
.adj-va-ideal-departments [data-va-parent-members]:active { cursor: grabbing; }
.adj-department-move-progress { width: min(420px, 85vw); padding: 24px; border: 1px solid #cbd5da; border-radius: 16px; background: var(--bg-primary, #fff); color: var(--text-primary, #253b43); box-shadow: 0 16px 64px #23364030; }
.adj-department-move-progress::backdrop { background: #23364038; }
.adj-department-move-progress strong { font-size: 16px; }
.adj-department-move-progress p { margin: 12px 0 18px; font-size: 13px; line-height: 1.5; }
.adj-department-move-progress progress { width: 100%; height: 8px; accent-color: #538a82; }
.adj-plan-editor[data-block-reading="va-diagrams"] .adj-va-ideal-departments { display: block; }
.adj-plan-editor[data-block-reading="va-diagrams"] .adj-va-parent-envelopes { display: none; }
.adj-va-ideal-department-outline {
  fill: none;
  stroke: var(--adj-department-color, #657980);
  stroke-width: 1.2px;
  stroke-opacity: .65;
  vector-effect: non-scaling-stroke;
}

/* PACT module handles sit above the department/source frame so a repeated
   source module can be moved with its exact live rooms. */
.adj-va-pact-module-handles { display: none; pointer-events: none; }
.adj-plan-editor[data-block-reading="departments"] .adj-va-pact-module-handles[data-va-module-reading="adapted"],
.adj-plan-editor[data-block-reading="va-diagrams"] .adj-va-pact-module-handles[data-va-module-reading="ideal"] {
  display: block;
}
.adj-va-pact-module-handle { pointer-events: all; cursor: grab; }
.adj-va-pact-module-handle:active { cursor: grabbing; }
.adj-va-pact-module-handle-surface {
  fill: color-mix(in srgb, var(--teal) 8%, transparent);
  fill-opacity: .22;
  stroke: color-mix(in srgb, var(--teal) 74%, var(--adj-ink));
  stroke-width: 1.1px;
  stroke-dasharray: 3 2;
  pointer-events: all;
  vector-effect: non-scaling-stroke;
}