* { box-sizing: border-box; }

  :root,
  html[data-theme="dark"] {
    --bg: #1e1e1e;
    --fg: #d4d4d4;
    --panel-bg: #252525;
    --panel-border: #3a3a3a;
    --sidebar-bg: #202020;
    --tab-bg: #2d2d2d;
    --tab-border: #4a4a4a;
    --tab-text: #aaa;
    --tab-hover: #383838;
    --tab-active-bg: #3a3a3a;
    --tab-active-text: #eaeaea;
    --accent: #6a9fd8;
    --danger: #e06c60;
    --success: #7fc97f;
    --line-hover: #272727;
    --zebra: rgba(255, 255, 255, 0.025);
    --muted: #5a5a5a;
    --muted-2: #666;
    --muted-3: #777;
    --muted-strong: #999;
    --title-text: #eaeaea;
    --done-text: #767676;
    --abandoned-text: #c97b76;
    --status-empty-border: #666;
    --status-done: #3fa76a;
    --status-review: #d9a930;
    --status-broken: #d9534f;
    --menu-bg: #2d2d2d;
    --menu-border: #4a4a4a;
    --menu-hover: #3a3a3a;
    --menu-current: #fff;
    --font-size-base: 14px;
    --title-weight: bold;
    --sidebar-width: 220px;
    --tp-ui-scale: 1;
  }

  /* Main-window redesign tokens (--tp-*), additive alongside the theme
     variables above. Expressed as formulas over the existing per-theme
     variables so every theme automatically gets a derived value with no
     per-theme repetition here - only `light` (below) and the new `teal`
     block get literal/independently-authored values, per the redesign
     spec's "only Light gets exact fidelity" decision. */
  :root {
    --tp-font-ui: 'Segoe UI Variable Text', 'Segoe UI', system-ui, sans-serif;
    --tp-close-red: #D6453A;

    --tp-surface: var(--bg);
    --tp-surface-raised: var(--panel-bg);
    --tp-surface-sunken: var(--sidebar-bg);
    --tp-fill-subtle: var(--tab-bg);
    --tp-hover-fill: var(--tab-hover);
    --tp-hairline: var(--panel-border);
    --tp-hairline-faint: color-mix(in srgb, var(--panel-border) 55%, transparent);
    --tp-border: var(--tab-border);
    /* --fg, not --title-text: --title-text is the user's per-project
       "default title color" override (Settings), meant only for section
       titles inside the document - chrome ink must stay a stable neutral
       regardless of that setting. */
    --tp-ink: var(--fg);
    --tp-ink-secondary: var(--fg);
    --tp-muted: var(--muted-strong);
    --tp-muted-light: var(--muted);
    --tp-accent: var(--accent);
    --tp-accent-hover: color-mix(in srgb, var(--accent) 85%, black);
    --tp-accent-tint: color-mix(in srgb, var(--accent) 12%, var(--bg));
    --tp-accent-tint-strong: color-mix(in srgb, var(--accent) 20%, var(--bg));
    --tp-accent-tint-hover: color-mix(in srgb, var(--accent) 18%, var(--bg));
    --tp-icon-accent: color-mix(in srgb, var(--accent) 35%, var(--bg));
    --tp-status-done: var(--status-done);
    --tp-status-review: var(--status-review);
    --tp-status-abandoned: color-mix(in srgb, var(--fg) 18%, var(--bg));
    --tp-status-open-ring: var(--status-empty-border);
    /* Quieter than --tp-ink-secondary but must still clear 4.5:1 on
       --tp-surface (the add-task row's resting state, and the delete-X's
       only state) - falling back to full ink is the safe choice for themes
       that don't get the redesign's exact-fidelity treatment (see light
       block below). */
    --tp-secondary-quiet: var(--tp-ink-secondary);
    --tp-danger-tint: color-mix(in srgb, var(--danger) 16%, var(--tp-surface));
    --tp-accent-on-tint: color-mix(in srgb, var(--accent) 55%, black);
    --tp-danger-text: var(--danger);
    --tp-danger-border: color-mix(in srgb, var(--danger) 55%, var(--tp-surface));
    --tp-danger-ring: color-mix(in srgb, var(--danger) 30%, var(--tp-surface));
    /* Deliberately theme-invariant, like --tp-close-red above: the one
       saturated non-accent color in the app, so it must not shift with
       the active theme's accent. */
    --tp-support-fill: #E8A54A;
    --tp-support-text: #5A3D14;
    --tp-support-hover: #DE9526;
    --tp-support-shadow: rgba(214, 150, 60, .35);
    /* Also theme-invariant, like --tp-support-fill above: violet has no
       natural relationship to the app's teal accent, so it doesn't derive
       from --accent the way --tp-accent-tint etc. do. */
    --tp-terminal-tint: #EDE4F5;
    --tp-terminal-on-tint: #6B4A9A;
  }

  html[data-theme="light"] {
    --bg: #f5f5f2;
    --fg: #2a2a2a;
    --panel-bg: #ececec;
    --panel-border: #d0d0d0;
    --sidebar-bg: #eeeeee;
    --tab-bg: #e2e2e2;
    --tab-border: #cfcfcf;
    --tab-text: #555;
    --tab-hover: #d5d5d5;
    --tab-active-bg: #ffffff;
    --tab-active-text: #111;
    --accent: #3a6fc4;
    --danger: #c0392b;
    --success: #2e8b57;
    --line-hover: #e9e9e9;
    --zebra: rgba(0, 0, 0, 0.035);
    --muted: #9a9a9a;
    --muted-2: #8a8a8a;
    --muted-3: #8a8a8a;
    --muted-strong: #555;
    --title-text: #111;
    --done-text: #9a9a9a;
    --abandoned-text: #b5453a;
    --status-empty-border: #999;
    --status-done: #3fa76a;
    --status-review: #c99323;
    --status-broken: #c0392b;
    --menu-bg: #ffffff;
    --menu-border: #d0d0d0;
    --menu-hover: #eeeeee;
    --menu-current: #000;

    /* Literal spec values - this is the redesign's one fully-specified
       palette, not derived from the formulas above. */
    --tp-surface: #FBFAF9;
    --tp-surface-raised: #FDFCFC;
    --tp-surface-sunken: #F5F3F1;
    --tp-fill-subtle: #F2EFEC;
    --tp-hover-fill: #EDEAE7;
    --tp-hairline: #EFEDEA;
    --tp-hairline-faint: #F4F1EE;
    --tp-border: #EAE7E3;
    --tp-ink: #3F3B37;
    --tp-ink-secondary: #4A4642;
    --tp-muted: #98938E;
    --tp-muted-light: #A9A49F;
    --tp-accent: #0E7C8B;
    --tp-accent-hover: #0B6875;
    --tp-accent-tint: #EAF3F5;
    --tp-accent-tint-strong: #F0F7F8;
    --tp-accent-tint-hover: #DDEDF0;
    --tp-icon-accent: #B6DCE3;
    --tp-status-done: #4EC08A;
    --tp-status-review: #F0C05A;
    --tp-status-abandoned: #DDD9D4;
    --tp-status-open-ring: #C4BFB9;
    --tp-secondary-quiet: #6E6963;
    --tp-danger-tint: #F0E1DE;
    --tp-accent-on-tint: #2F6B78;
    --tp-danger-text: #A93226;
    --tp-danger-border: #E2A9A1;
    --tp-danger-ring: #E9C9C4;
  }

  html[data-theme="blue"] {
    --bg: #141b26;
    --fg: #cfe0f0;
    --panel-bg: #1a2433;
    --panel-border: #2c3d54;
    --sidebar-bg: #111925;
    --tab-bg: #1f2c3f;
    --tab-border: #33475f;
    --tab-text: #8fb0d1;
    --tab-hover: #26364c;
    --tab-active-bg: #2b3f5c;
    --tab-active-text: #eaf3ff;
    --accent: #4fa3ff;
    --danger: #e0776b;
    --success: #59c68d;
    --line-hover: #1c2738;
    --zebra: rgba(120, 170, 255, 0.045);
    --muted: #4f6a86;
    --muted-2: #5c7891;
    --muted-3: #6a86a3;
    --muted-strong: #9fc1e0;
    --title-text: #eaf3ff;
    --done-text: #5c7891;
    --abandoned-text: #e0857c;
    --status-empty-border: #4f6a86;
    --status-done: #3fa76a;
    --status-review: #d9a930;
    --status-broken: #d9534f;
    --menu-bg: #1a2433;
    --menu-border: #33475f;
    --menu-hover: #26364c;
    --menu-current: #fff;
  }

  html[data-theme="orange"] {
    --bg: #221a12;
    --fg: #eaddc7;
    --panel-bg: #2a2015;
    --panel-border: #493823;
    --sidebar-bg: #1e170f;
    --tab-bg: #332612;
    --tab-border: #5a4526;
    --tab-text: #c9a876;
    --tab-hover: #3d2e18;
    --tab-active-bg: #463420;
    --tab-active-text: #fff2df;
    --accent: #e0983f;
    --danger: #e0705f;
    --success: #8fbf6d;
    --line-hover: #2b2116;
    --zebra: rgba(255, 170, 90, 0.045);
    --muted: #8a6a3f;
    --muted-2: #9a7a4a;
    --muted-3: #a88a5a;
    --muted-strong: #d0ab73;
    --title-text: #fff2df;
    --done-text: #8a7355;
    --abandoned-text: #e0857c;
    --status-empty-border: #8a6a3f;
    --status-done: #3fa76a;
    --status-review: #d9a930;
    --status-broken: #d9534f;
    --menu-bg: #2a2015;
    --menu-border: #5a4526;
    --menu-hover: #3d2e18;
    --menu-current: #fff;
  }

  html[data-theme="sepia"] {
    --bg: #f4ecdd;
    --fg: #4a3826;
    --panel-bg: #ede2cd;
    --panel-border: #d9c7a3;
    --sidebar-bg: #efe4d0;
    --tab-bg: #e6d7b8;
    --tab-border: #d1bb8d;
    --tab-text: #6b5a3e;
    --tab-hover: #ddc9a0;
    --tab-active-bg: #fffaf0;
    --tab-active-text: #3a2d1a;
    --accent: #b5772e;
    --danger: #b1432f;
    --success: #4c7a3f;
    --line-hover: #ece0c8;
    --zebra: rgba(120, 90, 40, 0.04);
    --muted: #b3a07d;
    --muted-2: #a08d6a;
    --muted-3: #8f7c5c;
    --muted-strong: #6b5a3e;
    --title-text: #2e2011;
    --done-text: #a99878;
    --abandoned-text: #a1503b;
    --status-empty-border: #b3a07d;
    --status-done: #4c8a4f;
    --status-review: #c99323;
    --status-broken: #b1432f;
    --menu-bg: #fffaf0;
    --menu-border: #d9c7a3;
    --menu-hover: #ede2cd;
    --menu-current: #2e2011;
  }

  html[data-theme="slate"] {
    --bg: #eef1f4;
    --fg: #2c333a;
    --panel-bg: #e3e8ed;
    --panel-border: #c7d0d9;
    --sidebar-bg: #e6ebef;
    --tab-bg: #dbe2e9;
    --tab-border: #c0cad4;
    --tab-text: #55626e;
    --tab-hover: #cfd8e0;
    --tab-active-bg: #ffffff;
    --tab-active-text: #1c2229;
    --accent: #4a72a3;
    --danger: #b0453a;
    --success: #3f7d5c;
    --line-hover: #e2e7ec;
    --zebra: rgba(40, 60, 80, 0.035);
    --muted: #9aa7b3;
    --muted-2: #8b98a5;
    --muted-3: #7c8a97;
    --muted-strong: #55626e;
    --title-text: #161b20;
    --done-text: #97a2ac;
    --abandoned-text: #a1554a;
    --status-empty-border: #9aa7b3;
    --status-done: #3fa76a;
    --status-review: #c99323;
    --status-broken: #c0392b;
    --menu-bg: #ffffff;
    --menu-border: #c7d0d9;
    --menu-hover: #e6ebef;
    --menu-current: #000000;
  }

  html[data-theme="teal"] {
    --bg: #E2F0F3;
    --fg: #1F3A3F;
    --panel-bg: #D0E6EB;
    --panel-border: #B4D6DF;
    --sidebar-bg: #D6E9EC;
    --tab-bg: #CBE3E8;
    --tab-border: #B4D6DF;
    --tab-text: #3D5C61;
    --tab-hover: #BFDEE4;
    --tab-active-bg: #FFFFFF;
    --tab-active-text: #123338;
    --accent: #0E7C8B;
    --danger: #C0392B;
    --success: #2E8B57;
    --line-hover: #D8ECEF;
    --zebra: rgba(14, 124, 139, 0.035);
    --muted: #7C9EA3;
    --muted-2: #6C9297;
    --muted-3: #6C9297;
    --muted-strong: #3D5C61;
    --title-text: #123338;
    --done-text: #7C9EA3;
    --abandoned-text: #6C9297;
    --status-empty-border: #8CA7AB;
    --status-done: #3fa76a;
    --status-review: #c99323;
    --status-broken: #c0392b;
    --menu-bg: #ffffff;
    --menu-border: #B4D6DF;
    --menu-hover: #D6E9EC;
    --menu-current: #123338;
  }

  html, body {
    height: 100%;
  }

  body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: Consolas, "Courier New", monospace;
    font-size: var(--font-size-base);
    line-height: 1.5;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--tp-border), 0 20px 50px -16px rgba(0, 0, 0, 0.30);
  }
  body.maximized {
    border-radius: 0;
    box-shadow: none;
  }

  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: var(--tp-border);
    border-radius: 6px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--tp-muted-light);
  }

  #app {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100vh;
    font-family: var(--tp-font-ui);
    background: var(--tp-surface);
  }
  #windowBody {
    flex: 1;
    display: flex;
    min-height: 0;
    /* #iconRail is position: fixed (see #iconRail below) so it no longer
       takes up flex space here - this padding reserves the same width so
       #sidebar/#main still start right after it instead of underneath it. */
    padding-left: calc(60px * var(--tp-ui-scale));
  }

  #titleBar {
    height: 32px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    background: var(--tp-surface-sunken);
    border-bottom: 1px solid var(--tp-hairline);
  }
  #titleBarLeft {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    flex: 1;
    min-width: 0;
  }
  #appGlyph { border-radius: 4px; flex: 0 0 auto; }
  #windowTitle {
    font-size: 12px;
    color: var(--tp-ink-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #saveIndicator {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--tp-muted);
    flex: 0 0 auto;
  }
  #saveIndicatorDot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tp-status-done);
  }
  #saveIndicator.unsaved #saveIndicatorDot { background: #E8B04B; }
  #saveIndicator.saving #saveIndicatorDot { background: var(--tp-muted); }

  #titleBarCaptions {
    display: flex;
    flex: 0 0 auto;
    height: 32px;
  }
  #titleBarCaptions button {
    width: 46px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--tp-ink-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  #minimizeBtn:hover, #maximizeBtn:hover { background: var(--tp-hover-fill); }
  #closeBtn:hover { background: var(--tp-close-red); color: white; }

  /* Window Controls Overlay (installed web app only - never matches inside
     Tauri, which has its own titleBar drag mechanism via data-tauri-drag-
     region, or in a plain browser tab, which has no titlebar-area env vars
     to read). Lets #titleBar - already rendered for every context - stand
     in for the browser's own title bar instead of sitting redundantly
     below it: same content, now draggable, sized to the exact strip the
     browser reserves for the native minimize/maximize/close buttons. */
  @media (display-mode: window-controls-overlay) {
    #titleBar {
      height: env(titlebar-area-height, 33px);
      -webkit-app-region: drag;
    }
  }

  #sidebar {
    width: var(--sidebar-width);
    flex: none;
    background: var(--tp-surface);
    border-right: 1px solid var(--tp-hairline);
    display: flex;
    flex-direction: column;
    position: relative;
    font-family: var(--tp-font-ui);
  }
  #sidebarResizeHandle {
    position: absolute;
    top: 0;
    right: -3px;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    z-index: 10;
    touch-action: none;
  }
  #sidebarResizeHandle:hover,
  #sidebarResizeHandle.resizing {
    background: var(--accent);
    opacity: 0.5;
  }

  #sidebar.collapsed {
    width: 0;
    min-width: 0;
    border-right: none;
    overflow: hidden;
  }
  #sidebarExpandBtn {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 50;
    background: var(--tab-bg);
    border: 1px solid var(--tab-border);
    color: var(--fg);
    border-radius: 3px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 14px;
  }
  #sidebarExpandBtn:hover {
    background: var(--tab-hover);
  }
  #sidebarExpandBtn[hidden] {
    display: none;
  }
  .sidebar-inline-btn {
    background: none;
    border: none;
    color: var(--muted-3);
    cursor: pointer;
    font-size: calc(13px * var(--tp-ui-scale));
    line-height: 1;
    padding: 0 2px;
    width: calc(24px * var(--tp-ui-scale));
    height: calc(24px * var(--tp-ui-scale));
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #newTabBtn svg {
    width: calc(14px * var(--tp-ui-scale));
    height: calc(14px * var(--tp-ui-scale));
  }
  .sidebar-inline-btn:hover {
    color: var(--title-strong, var(--fg));
    background: var(--tp-hover-fill);
  }
  #sidebarCollapseBtn {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 16px;
  }
  #sidebarCollapseBtn[hidden] {
    display: none;
  }

  #sidebarProjects {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 14px 10px;
    flex: none;
  }
  #sidebarProjectsHeading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2px 2px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--tp-muted);
    text-transform: uppercase;
  }

  #tabs {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .tab {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 8px;
    border-radius: 8px;
    font-size: 12.5px;
    cursor: pointer;
    color: var(--tp-ink-secondary);
    width: 100%;
  }
  .tab:hover { background: var(--tp-fill-subtle); }
  .tab.active { background: var(--tp-fill-subtle); color: var(--tp-ink); font-weight: 500; }
  .tab-grip {
    flex: none;
    width: 8px;
    height: 14px;
    cursor: grab;
    opacity: 0;
    touch-action: none;
    transition: opacity 0.15s ease;
    background-image: radial-gradient(circle, var(--tp-muted-light) 1px, transparent 1.3px);
    background-size: 4px 4px;
    background-repeat: repeat;
  }
  .tab:hover .tab-grip {
    opacity: 1;
  }
  .tab-grip:active {
    cursor: grabbing;
  }
  .tab.dragging {
    opacity: 0.4;
  }
  .tab.drag-over-top {
    box-shadow: inset 0 2px 0 0 var(--tp-accent);
  }
  .tab.drag-over-bottom {
    box-shadow: inset 0 -2px 0 0 var(--tp-accent);
  }
  .tab-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--tp-border);
  }
  .tab.active .tab-dot { background: var(--tp-accent); }
  .tab-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tab-name[contenteditable="true"] {
    outline: 1px solid var(--tp-accent);
    outline-offset: 1px;
    border-radius: 2px;
    cursor: text;
  }
  .tab-shared-badge {
    flex: 0 0 auto;
    display: flex;
    color: var(--tp-accent);
  }
  .tab-owner-archived-badge {
    flex: 0 0 auto;
    display: flex;
    color: var(--tp-muted-light);
  }
  .tab-count {
    flex: 0 0 auto;
    font-size: 10.5px;
    color: var(--tp-muted-light);
    font-variant-numeric: tabular-nums;
  }

  .tab-close {
    background: none;
    border: none;
    color: var(--tp-muted-light);
    cursor: pointer;
    padding: 0 2px;
    font-size: 12px;
    line-height: 1;
    flex: none;
    display: none;
  }
  .tab:hover .tab-close { display: block; }
  .tab-close:hover {
    color: var(--tp-close-red);
  }

  #sidebarOutline {
    display: flex;
    flex-direction: column;
    padding: 6px 14px 14px;
    gap: 2px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    border-top: 1px solid var(--tp-hairline);
    margin: 0 14px;
    padding-left: 0;
    padding-right: 0;
  }
  #sidebarFooter {
    flex: none;
    padding: 10px 14px 14px;
    border-top: 1px solid var(--tp-hairline);
  }
  .support-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 12px;
    border: none;
    border-radius: 8px;
    background: var(--tp-support-fill);
    color: var(--tp-support-text);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 1px 3px var(--tp-support-shadow);
  }
  .support-btn:hover { background: var(--tp-support-hover); }
  .support-btn-compact {
    background: var(--tp-support-fill);
    color: var(--tp-support-text);
    border: none;
  }
  .support-btn-compact:hover { background: var(--tp-support-hover); }
  #sidebarShared {
    flex: none;
    padding: 6px 14px 10px;
    border-top: 1px solid var(--tp-hairline);
  }
  #sidebarSharedHeading {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--tp-muted-light);
    margin-bottom: 4px;
  }
  #sidebarShared:empty,
  #sidebarShared.is-empty {
    display: none;
  }
  .shared-project-row {
    padding: 4px 0;
    font-size: 12px;
    cursor: pointer;
    color: var(--tp-ink);
  }
  .shared-project-lines {
    padding: 2px 0 6px 10px;
  }
  .shared-task-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 11.5px;
    color: var(--tp-muted-light);
    padding: 1px 0;
  }
  .shared-task-row.is-done {
    text-decoration: line-through;
  }
  #sidebarOutlineHeading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tp-muted);
    padding: 4px 2px 6px;
    margin-bottom: 0;
    flex: none;
  }
  .outline-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 8px;
    border-radius: 7px;
    font-size: 12px;
    color: var(--tp-ink-secondary);
    cursor: pointer;
    flex: none;
    position: relative;
  }
  .outline-item:hover {
    background: var(--tp-fill-subtle);
  }
  .outline-item-bar {
    width: 3px;
    height: 13px;
    border-radius: 2px;
    flex: 0 0 auto;
    background: var(--tp-border);
  }
  .outline-item-bar.has-pending { background: var(--tp-accent); }
  .outline-item-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .outline-item-label[contenteditable="true"] {
    outline: 1px solid var(--tp-accent);
    outline-offset: 1px;
    border-radius: 2px;
    cursor: text;
  }
  .outline-item-count {
    flex: 0 0 auto;
    font-size: 10.5px;
    color: var(--tp-muted-light);
    font-variant-numeric: tabular-nums;
  }
  .outline-item-delete {
    flex: none;
    background: none;
    border: none;
    color: var(--tp-muted-light);
    cursor: pointer;
    padding: 0 2px;
    font-size: 12px;
    line-height: 1;
    display: none;
  }
  .outline-item:hover .outline-item-delete {
    display: block;
  }
  .outline-item-delete:hover {
    color: var(--tp-close-red);
  }
  .outline-item-grip {
    flex: none;
    width: 8px;
    height: 14px;
    cursor: grab;
    opacity: 0;
    touch-action: none;
    transition: opacity 0.15s ease;
    background-image: radial-gradient(circle, var(--tp-muted-light) 1px, transparent 1.3px);
    background-size: 4px 4px;
    background-repeat: repeat;
    background-position: 0 0;
  }
  .outline-item:hover .outline-item-grip {
    opacity: 1;
  }
  .outline-item-grip:active {
    cursor: grabbing;
  }
  .outline-item.dragging {
    opacity: 0.4;
  }
  .outline-item.drag-over-top {
    box-shadow: inset 0 2px 0 0 var(--tp-accent);
  }
  .outline-item.drag-over-bottom {
    box-shadow: inset 0 -2px 0 0 var(--tp-accent);
  }
  .outline-empty {
    font-size: 12px;
    color: var(--tp-muted-light);
    padding: 2px 6px;
    font-style: italic;
    flex: none;
  }

  /* ---------- Settings dialog (redesign) ---------- */

  .settings-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 660px;
    height: 520px;
    max-height: 90vh;
    background: var(--tp-surface);
    border-radius: 10px;
    box-shadow: 0 0 0 1px var(--tp-border), 0 30px 70px -20px rgba(83, 78, 73, .45);
    font-family: var(--tp-font-ui);
    color: var(--tp-ink);
    overflow: hidden;
  }
  .settings-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--tp-hairline);
    color: var(--tp-ink-secondary);
  }
  .settings-header > svg {
    width: calc(18px * var(--tp-ui-scale));
    height: calc(18px * var(--tp-ui-scale));
  }
  .settings-header h2 {
    flex: 1 1 auto;
    margin: 0;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--tp-ink);
  }
  .settings-close-btn {
    flex: none;
    width: calc(30px * var(--tp-ui-scale));
    height: calc(30px * var(--tp-ui-scale));
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--tp-ink-secondary);
    cursor: pointer;
  }
  .settings-close-btn svg {
    width: calc(15px * var(--tp-ui-scale));
    height: calc(15px * var(--tp-ui-scale));
  }
  .settings-close-btn:hover {
    background: var(--tp-hover-fill);
  }
  .settings-body {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
  }
  .settings-tab-rail {
    flex: 0 0 176px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 10px;
    background: var(--tp-surface-sunken);
    border-right: 1px solid var(--tp-hairline);
  }
  .settings-tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 10px 8px 12px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--tp-muted-light);
    font-family: inherit;
    font-size: 12.5px;
    cursor: pointer;
    text-align: left;
  }
  .settings-tab-icon {
    flex: none;
    width: calc(18px * var(--tp-ui-scale));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tp-muted-light);
  }
  .settings-tab-icon svg {
    width: calc(15px * var(--tp-ui-scale));
    height: calc(15px * var(--tp-ui-scale));
  }
  .settings-tab-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--tp-muted-light);
  }
  .settings-tab:hover {
    background: var(--tp-hover-fill);
  }
  .settings-tab[aria-selected="true"] {
    background: var(--tp-surface-raised);
    box-shadow: 0 0 0 1px var(--tp-hairline);
  }
  .settings-tab[aria-selected="true"]::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 15px;
    border-radius: 2px;
    background: var(--tp-accent);
  }
  .settings-tab[aria-selected="true"] .settings-tab-icon,
  .settings-tab[aria-selected="true"] .settings-tab-label {
    color: var(--tp-ink-secondary);
  }
  .settings-tab[aria-selected="true"] .settings-tab-icon {
    color: var(--tp-accent);
  }
  .settings-pane-wrap {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
  }
  .settings-pane {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 22px;
  }
  .settings-pane[hidden] {
    display: none;
  }
  .settings-pane-header {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .settings-pane-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--tp-ink);
  }
  .settings-pane-desc {
    font-size: 11.5px;
    color: var(--tp-muted-light);
  }
  .settings-group-card {
    display: flex;
    flex-direction: column;
    background: var(--tp-surface-raised);
    border-radius: 8px;
    box-shadow: 0 0 0 1px var(--tp-hairline);
  }
  .settings-group-card[hidden] {
    display: none;
  }
  .settings-group-card.is-danger {
    box-shadow: 0 0 0 1px var(--tp-danger-ring);
  }
  .ghost-btn-danger {
    padding: 6px 12px;
    border-radius: 7px;
    border: 1px solid var(--tp-danger-border);
    background: transparent;
    color: var(--tp-danger-text);
    font-family: inherit;
    font-size: 11.5px;
    cursor: pointer;
  }
  .ghost-btn-danger:hover { background: var(--tp-danger-tint); }
  .settings-group-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tp-muted);
    padding: 12px 15px 4px;
  }
  .settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 13px 15px;
    border-bottom: 1px solid var(--tp-hairline-faint);
    font-size: 12.5px;
  }
  /* Same specificity bug as #iconRail button above (item 264):
     .settings-row's display:flex ties with the browser's [hidden] UA rule
     on specificity, and an author-origin rule wins that tie - so
     #settingsInstallRow's hidden attribute (set correctly by app.js,
     never unhidden under platform.isTauri) never actually took visual
     effect on desktop. */
  #settingsInstallRow[hidden] { display: none; }
  #projectSettingsAutoStartCustomRow[hidden] { display: none; }
  .settings-group-card .settings-row:last-child {
    border-bottom: none;
  }
  .settings-row-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .settings-row-label {
    font-size: 12.5px;
    color: var(--tp-ink-secondary);
  }
  .settings-row-desc {
    font-size: 11px;
    color: var(--tp-muted-light);
  }
  .settings-row-meta {
    padding: 10px 15px;
  }
  .settings-row-meta-value {
    font-size: 12px;
    color: var(--tp-muted);
    font-variant-numeric: tabular-nums;
  }
  .settings-stacked-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 13px 15px;
  }
  .settings-textarea-field {
    width: 100%;
    min-height: 120px;
    padding: 9px 11px;
    background: var(--tp-fill-subtle);
    border: none;
    border-radius: 7px;
    color: var(--tp-ink-secondary);
    font-family: inherit;
    font-size: 12.5px;
    line-height: 1.5;
    resize: vertical;
    box-sizing: border-box;
  }
  .settings-textarea-field:focus {
    outline: 1px solid var(--tp-accent);
    outline-offset: 1px;
  }
  .settings-inline-input {
    width: 170px;
    height: 30px;
    padding: 0 10px;
    background: var(--tp-fill-subtle);
    border: none;
    border-radius: 7px;
    color: var(--tp-ink-secondary);
    font-family: inherit;
    font-size: 12px;
    box-sizing: border-box;
  }

  .ghost-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--tp-border);
    border-radius: 7px;
    background: transparent;
    color: var(--tp-ink-secondary);
    font-family: inherit;
    font-size: 11.5px;
    white-space: nowrap;
    cursor: pointer;
  }
  .ghost-btn[hidden] {
    display: none;
  }
  .ghost-btn svg {
    width: calc(14px * var(--tp-ui-scale));
    height: calc(14px * var(--tp-ui-scale));
  }
  .ghost-btn:hover {
    background: var(--tp-hover-fill);
  }
  .ghost-btn-filled {
    background: var(--tp-accent);
    border-color: var(--tp-accent);
    color: #fff;
  }
  .ghost-btn-filled:hover {
    background: var(--tp-accent-hover);
  }
  .settings-link {
    background: none;
    border: none;
    color: var(--tp-accent);
    cursor: pointer;
    font-size: 11.5px;
    padding: 0;
    text-decoration: underline;
  }
  .settings-link:disabled {
    color: var(--tp-muted-light);
    cursor: default;
    text-decoration: none;
  }

  /* Theme dropdown */
  .theme-dropdown {
    position: relative;
    flex: none;
  }
  .theme-dropdown-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 176px;
    height: 32px;
    padding: 0 10px;
    background: var(--tp-surface-raised);
    border: none;
    border-radius: 7px;
    box-shadow: 0 0 0 1px var(--tp-border);
    color: var(--tp-ink-secondary);
    font-family: inherit;
    font-size: 12.5px;
    cursor: pointer;
  }
  .theme-swatch {
    flex: none;
    width: calc(17px * var(--tp-ui-scale));
    height: calc(17px * var(--tp-ui-scale));
    border-radius: 5px;
    box-shadow: 0 0 0 1px var(--tp-border);
  }
  .theme-dropdown-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
  }
  .theme-dropdown-chevron {
    flex: none;
    width: calc(13px * var(--tp-ui-scale));
    height: calc(13px * var(--tp-ui-scale));
    color: var(--tp-muted);
    transition: transform .16s;
  }
  .theme-dropdown-btn[aria-expanded="true"] .theme-dropdown-chevron {
    transform: rotate(180deg);
  }
  .theme-dropdown-menu {
    position: absolute;
    top: 36px;
    right: 0;
    z-index: 10;
    width: 200px;
    max-height: 260px;
    overflow-y: auto;
    padding: 4px;
    background: var(--tp-surface-raised);
    border-radius: 8px;
    box-shadow: 0 0 0 1px var(--tp-border), 0 14px 34px -12px rgba(83, 78, 73, .35);
  }
  .theme-menu-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 8px;
    border-radius: 6px;
    font-size: 12.5px;
    color: var(--tp-ink-secondary);
    cursor: pointer;
  }
  .theme-menu-row:hover,
  .theme-menu-row.active-option {
    background: var(--tp-hover-fill);
  }
  .theme-menu-row.selected {
    background: var(--tp-accent-tint-strong);
  }
  .theme-menu-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .theme-menu-check {
    flex: none;
    width: calc(14px * var(--tp-ui-scale));
    height: calc(14px * var(--tp-ui-scale));
    color: var(--tp-accent);
    opacity: 0;
  }
  .theme-menu-row.selected .theme-menu-check {
    opacity: 1;
  }
  .theme-menu-divider {
    height: 1px;
    margin: 4px 4px;
    background: var(--tp-hairline);
  }
  .theme-menu-row-actions {
    flex: none;
    display: none;
    align-items: center;
    gap: 2px;
  }
  .theme-menu-row-custom:hover .theme-menu-row-actions {
    display: flex;
  }
  .theme-menu-row-custom:hover .theme-menu-check {
    display: none;
  }
  .theme-menu-edit,
  .theme-menu-delete {
    flex: none;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 5px;
    color: var(--tp-muted);
    cursor: pointer;
  }
  .theme-menu-edit:hover {
    background: var(--tp-border);
    color: var(--tp-ink-secondary);
  }
  .theme-menu-delete:hover {
    background: var(--tp-border);
    color: var(--tp-close-red);
  }

  /* Theme creator */
  .theme-creator {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin: 0 15px 15px;
    padding: 14px 15px;
    background: var(--tp-accent-tint-strong);
    border-radius: 8px;
    box-shadow: 0 0 0 1px var(--tp-accent-tint);
  }
  .theme-creator[hidden] {
    display: none;
  }
  .theme-creator-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--tp-accent-hover);
  }
  #customThemeNameInput {
    height: 32px;
    padding: 0 11px;
    background: var(--tp-surface-raised);
    border: none;
    border-radius: 7px;
    box-shadow: 0 0 0 1px var(--tp-accent-tint);
    color: var(--tp-ink-secondary);
    font-family: inherit;
    font-size: 12.5px;
  }
  .theme-creator-swatches {
    display: flex;
    gap: 8px;
  }
  .theme-creator-swatch-btn {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: var(--tp-surface-raised);
    border: none;
    border-radius: 7px;
    box-shadow: 0 0 0 1px var(--tp-accent-tint);
    color: var(--tp-ink-secondary);
    font-family: inherit;
    font-size: 11.5px;
    cursor: pointer;
  }
  .theme-creator-swatch {
    flex: none;
    width: 12px;
    height: 12px;
    border-radius: 4px;
    box-shadow: 0 0 0 1px var(--tp-border);
  }
  .theme-creator-actions {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .settings-swatch-btn {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid var(--tp-border);
    cursor: pointer;
    padding: 0;
  }

  /* Toggle */
  .tp-toggle {
    position: relative;
    flex: none;
    display: inline-flex;
    width: 36px;
    height: 20px;
    cursor: pointer;
  }
  .tp-toggle input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
  }
  .tp-toggle-track {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: var(--tp-status-abandoned);
    transition: background .16s;
  }
  .tp-toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--tp-surface-raised);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    transition: left .16s;
  }
  .tp-toggle input:checked ~ .tp-toggle-track {
    background: var(--tp-accent);
  }
  .tp-toggle input:checked ~ .tp-toggle-track .tp-toggle-knob {
    left: 18px;
  }
  .tp-toggle input:focus-visible ~ .tp-toggle-track {
    box-shadow: 0 0 0 2px var(--tp-surface), 0 0 0 4px var(--tp-accent);
  }

  /* Stepper */
  .tp-stepper {
    flex: none;
    display: flex;
    align-items: center;
    padding: 2px;
    background: var(--tp-fill-subtle);
    border-radius: 7px;
  }
  .tp-stepper-btn {
    flex: none;
    width: 26px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--tp-ink-secondary);
    font-size: 14px;
    cursor: pointer;
  }
  .tp-stepper-btn:hover {
    background: var(--tp-surface-raised);
  }
  .tp-stepper-value {
    flex: none;
    width: 40px;
    text-align: center;
    font-size: 12px;
    color: var(--tp-ink-secondary);
    font-variant-numeric: tabular-nums;
  }

  .tp-segmented {
    flex: none;
    display: flex;
    padding: 2px;
    gap: 2px;
    background: var(--tp-fill-subtle);
    border-radius: 7px;
  }
  .tp-segmented-btn {
    border: none;
    background: transparent;
    padding: 5px 12px;
    font-size: 11.5px;
    font-family: inherit;
    color: var(--tp-secondary-quiet);
    border-radius: 5px;
    cursor: pointer;
  }
  .tp-segmented-btn[aria-selected="true"] {
    background: var(--tp-surface-raised);
    box-shadow: 0 0 0 1px var(--tp-border);
    color: var(--tp-ink-secondary);
    font-weight: 500;
  }

  /* Title colour swatches */
  .title-color-swatches {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .title-swatch {
    position: relative;
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    box-shadow: 0 0 0 1px var(--tp-border);
    cursor: pointer;
    padding: 0;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tp-muted-light);
  }
  .title-swatch.selected {
    box-shadow: 0 0 0 2px var(--tp-surface-raised), 0 0 0 4px var(--tp-accent);
  }

  /* Autosave */
  .autosave-interval-field {
    flex: none;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  #autosaveMinutesInput {
    width: 48px;
    height: 30px;
    background: var(--tp-fill-subtle);
    border: none;
    border-radius: 7px;
    color: var(--tp-ink-secondary);
    font-family: inherit;
    font-size: 12px;
    text-align: center;
  }
  .autosave-interval-field span {
    font-size: 11.5px;
    color: var(--tp-muted-light);
  }

  /* Sync */
  .sync-panel {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 0 15px 15px;
    padding: 14px 15px;
    background: var(--tp-accent-tint-strong);
    border-radius: 8px;
    box-shadow: 0 0 0 1px var(--tp-accent-tint);
  }
  .sync-panel-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--tp-muted-light);
  }
  .sync-field-input {
    height: 32px;
    padding: 0 11px;
    background: var(--tp-surface-raised);
    border: none;
    border-radius: 7px;
    box-shadow: 0 0 0 1px var(--tp-accent-tint);
    color: var(--tp-ink-secondary);
    font-family: inherit;
    font-size: 12.5px;
  }
  .sync-panel-actions {
    display: flex;
    justify-content: flex-end;
  }
  .sync-panel-google-btn {
    width: 100%;
  }
  .sync-panel-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10.5px;
    color: var(--tp-muted-light);
  }
  .sync-panel-divider::before,
  .sync-panel-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--tp-accent-tint);
  }
  .conflict-backup-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 15px;
    border-top: 1px solid var(--tp-hairline);
  }
  .conflict-backup-row-text {
    font-size: 12px;
    color: var(--tp-ink-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .share-modal-invite-row {
    display: flex;
    gap: 8px;
    margin-top: 10px;
  }
  .share-modal-invite-row .sync-field-input {
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
  }
  .share-modal-status {
    min-height: 16px;
    margin-top: 8px;
    font-size: 11.5px;
    color: var(--tp-secondary-quiet);
  }
  .share-modal-status.is-error {
    color: var(--danger);
  }
  .share-modal-list {
    max-height: 220px;
    overflow-y: auto;
    margin-top: 4px;
    border-top: 1px solid var(--tp-hairline);
  }
  .share-modal-empty {
    padding: 12px 2px;
    font-size: 12px;
    color: var(--tp-secondary-quiet);
  }
  .share-collab-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 2px;
    border-bottom: 1px solid var(--tp-hairline);
  }
  .share-collab-email {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    color: var(--tp-ink-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .share-collab-status {
    flex: none;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--tp-muted);
    background: var(--tp-fill-subtle);
    padding: 2px 6px;
    border-radius: 20px;
  }
  .share-collab-status.is-pending {
    color: var(--tp-accent);
    background: var(--tp-accent-tint);
  }
  .share-collab-remove {
    flex: none;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--tp-muted-light);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
  }
  .share-collab-remove:hover {
    background: var(--tp-danger-tint);
    color: var(--tp-close-red);
  }
  .share-modal-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
  }

  .archived-project-entry {
    border-bottom: 1px solid var(--tp-hairline);
  }
  .archived-project-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 2px;
  }
  .archived-project-summary {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    cursor: pointer;
  }
  .archived-project-name {
    font-size: 12.5px;
    color: var(--tp-ink-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .archived-project-counts {
    font-size: 10.5px;
    color: var(--tp-muted);
  }
  .archived-project-restore {
    flex: none;
    padding: 4px 10px;
    font-size: 11px;
  }
  .archived-project-delete {
    flex: none;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--tp-muted-light);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
  }
  .archived-project-delete:hover {
    background: var(--tp-danger-tint);
    color: var(--tp-close-red);
  }
  .archived-preview {
    padding: 2px 2px 10px 2px;
  }
  .archived-preview-empty {
    font-size: 11.5px;
    color: var(--tp-secondary-quiet);
    padding: 4px 0;
  }
  .archived-preview-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--tp-muted);
    margin-top: 6px;
  }
  .archived-preview-title:first-child {
    margin-top: 0;
  }
  .archived-preview-line {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    font-size: 12px;
    color: var(--tp-ink-secondary);
  }
  .archived-preview-line.is-note {
    padding-left: 18px;
    color: var(--tp-muted);
  }
  .archived-preview-glyph {
    flex: none;
    display: flex;
    width: 14px;
    height: 14px;
  }
  .archived-preview-glyph svg {
    width: 14px;
    height: 14px;
  }
  .archived-preview-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Compound selector, not just .archived-modal-card - .cp-card's own
     width:236px (below, later in this file) has equal specificity as a
     bare single-class rule and was silently winning on source order alone,
     which is why widening this kept having no visible effect at all. */
  .cp-card.archived-modal-card {
    display: flex;
    flex-direction: column;
    width: 720px;
    max-width: 92vw;
    max-height: 86vh;
  }
  .archived-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
  }
  .archived-modal-header-actions {
    flex: none;
    display: flex;
    align-items: center;
    gap: 2px;
  }
  .archived-modal-icon-btn {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--tp-muted-light);
    cursor: pointer;
    padding: 0;
  }
  .archived-modal-icon-btn:hover { background: var(--tp-fill-subtle); color: var(--tp-ink-secondary); }
  .archived-modal-list {
    max-height: 400px;
  }
  .archived-modal-card.is-maximized {
    width: 92vw;
    height: 86vh;
  }
  .archived-modal-card.is-maximized .archived-modal-list {
    flex: 1 1 auto;
    max-height: none;
  }
  .cp-card.project-settings-card {
    display: flex;
    flex-direction: column;
    width: 460px;
    max-width: 92vw;
    max-height: 86vh;
  }
  .project-settings-body {
    flex: 1 1 auto;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .settings-footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 20px;
    background: var(--tp-surface-sunken);
    border-top: 1px solid var(--tp-hairline);
  }
  .settings-footer-hint {
    flex: 1 1 auto;
    font-size: 11.5px;
    color: var(--tp-muted);
  }
  .settings-done-btn {
    flex: none;
    padding: 8px 20px;
    background: var(--tp-accent);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
  }
  .settings-done-btn:hover {
    background: var(--tp-accent-hover);
  }

  #main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
  }

  /* #editorHeader+#editorBody (wrapped in #editorColumn) on the left,
     the right-docked terminal placement on the right (when open) - a
     real row, not #editorHeader spanning full width above both, so
     .terminal-panel-right's own titlebar starts at the same top edge as
     #editorHeader instead of a whole header-height below it (that
     full-width version left a dead gap above the terminal column with
     nothing in it, once the header's own actions stopped short of the
     terminal at #editorColumn's edge - item 227/228). */
  #mainBody {
    flex: 1 1 auto;
    display: flex;
    min-width: 0;
    min-height: 0;
  }
  #editorColumn {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
  }
  #editorBody {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
  }

  #iconRail {
    width: calc(60px * var(--tp-ui-scale));
    /* Fixed to the viewport rather than a normal #windowBody flex child:
       .terminal-panel-bottom is a flex sibling of #windowBody (see that
       rule below), so windowBody shrinks vertically to make room for it -
       a plain flex #iconRail would get stretched down to that shrunk
       height right along with it, losing reach to whatever no longer fits
       (Settings, Help), which is exactly what a bottom terminal must never
       do to the rail. Fixed positioning makes the rail's own height
       (top:32px, the titlebar, to the literal window bottom) independent
       of windowBody's size entirely, so it always keeps its full height
       and every icon stays reachable no matter how tall the terminal gets.
       #windowBody gets matching padding-left below so its content still
       starts after the rail. z-index sits above both terminal placements
       (0 and .terminal-panel-overlay's 50) but below context menus/help
       drawer/modals (100+, see those rules) so those can still cover it. */
    position: fixed;
    top: 32px;
    left: 0;
    bottom: 0;
    z-index: 55;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 0;
    border-right: 1px solid var(--tp-hairline);
    background: var(--tp-surface-sunken);
    font-family: var(--tp-font-ui);
    overflow-y: auto;
  }
  #iconRail button {
    width: calc(40px * var(--tp-ui-scale));
    height: calc(40px * var(--tp-ui-scale));
    flex-shrink: 0;
    border: none;
    background: transparent;
    border-radius: 9px;
    color: var(--tp-ink-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  #iconRail button:hover { background: var(--tp-hover-fill); }
  /* #iconRail button's display: flex above beats the browser's [hidden] UA
     rule on specificity - see the near-identical comment further down this
     file for #shareProjectBtn svg[hidden]. installAppBtn had the exact same
     bug (item 264): its hidden attribute was always set correctly by app.js
     (never unhidden under platform.isTauri), but display:flex above made it
     render anyway regardless, on desktop and web alike. */
  #terminalToggleBtn[hidden],
  #installAppBtn[hidden] { display: none; }
  #terminalToggleBtn.active {
    background: var(--tp-terminal-tint);
    color: var(--tp-terminal-on-tint);
  }
  #terminalToggleBtn.active:hover { background: var(--tp-terminal-tint); }
  #loginBtn.is-signed-in {
    background: var(--tp-accent-tint);
    color: var(--tp-accent-on-tint);
  }
  #loginBtn.is-signed-in:hover { background: var(--tp-accent-tint-hover); }
  #iconRail button svg {
    width: calc(22px * var(--tp-ui-scale));
    height: calc(22px * var(--tp-ui-scale));
  }
  .iconRailDivider {
    width: calc(26px * var(--tp-ui-scale));
    height: 1px;
    flex-shrink: 0;
    background: var(--tp-hairline);
    margin: 8px 0;
  }
  #iconRailSpacer { flex: 1; }

  #railSyncBtn { position: relative; }
  .rail-sync-dot {
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--tp-surface-sunken);
  }
  .rail-sync-dot.dot-connected { background: var(--tp-status-done); }
  .rail-sync-dot.dot-off { background: var(--tp-status-abandoned); }
  .rail-sync-dot.dot-error { background: var(--tp-danger-text); }
  #railSyncBtn:not(.is-syncing) svg { color: var(--tp-ink-secondary); }
  #railSyncBtn.is-off svg { color: var(--tp-muted); }
  #railSyncBtn.is-syncing svg {
    animation: rail-sync-spin 0.9s linear infinite;
  }
  @keyframes rail-sync-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  .toolbar-btn {
    font-family: inherit;
    font-size: 13px;
    padding: 4px 10px;
    background: var(--tab-bg);
    border: 1px solid var(--tab-border);
    border-radius: 3px;
    cursor: pointer;
    color: var(--fg);
    flex: none;
  }
  .toolbar-btn:hover {
    background: var(--tab-hover);
  }

  #editorHeader {
    flex: 0 0 auto;
    padding: 16px 28px 12px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    font-family: var(--tp-font-ui);
  }
  #editorHeaderText {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex: 1;
    min-width: 0;
  }
  #projectNameHeading {
    font-size: 18px;
    font-weight: 600;
    color: var(--tp-ink);
    letter-spacing: -0.01em;
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #projectSummary {
    font-size: 12px;
    color: var(--tp-muted);
    flex: 0 100 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #editorHeaderActions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
  }
  #syncSharedProjectBtn {
    display: flex;
    align-items: center;
    gap: 7px;
    height: calc(32px * var(--tp-ui-scale));
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid var(--tp-border);
    background: transparent;
    color: var(--tp-ink-secondary);
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
  }
  #syncSharedProjectBtn:hover { background: var(--tp-hover-fill); }
  #syncSharedProjectBtn .header-sync-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--tp-status-abandoned);
  }
  #syncSharedProjectBtn.is-connected {
    border-color: transparent;
    background: var(--tp-accent-tint);
    color: var(--tp-accent-on-tint);
  }
  #syncSharedProjectBtn.is-connected:hover { background: var(--tp-accent-tint-hover); }
  #syncSharedProjectBtn.is-connected .header-sync-dot { background: var(--tp-status-done); }
  #syncSharedProjectBtn[hidden] { display: none; }

  #shareProjectBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(32px * var(--tp-ui-scale));
    height: calc(32px * var(--tp-ui-scale));
    padding: 0;
    gap: 7px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--tp-ink-secondary);
    cursor: pointer;
  }
  #shareProjectBtn:hover { background: var(--tp-hover-fill); }
  #shareProjectBtn span { display: none; }
  /* The browser's [hidden] UA rule is an HTML-only default and does not
     extend to inline <svg> root elements, so toggling the `hidden`
     attribute on these two icons would otherwise silently do nothing. */
  #shareProjectBtn svg[hidden] { display: none; }
  #shareProjectBtn.is-shared {
    width: auto;
    padding: 0 12px;
    background: var(--tp-accent-tint);
    color: var(--tp-accent-on-tint);
  }
  #shareProjectBtn.is-shared:hover {
    background: var(--tp-accent-tint-hover);
  }
  #shareProjectBtn.is-shared span {
    display: inline;
    font-size: 11.5px;
    font-weight: 500;
  }
  #searchGroup { position: relative; flex: 0 0 auto; }
  #searchToggleBtn {
    width: calc(32px * var(--tp-ui-scale));
    height: calc(32px * var(--tp-ui-scale));
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--tp-ink-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #searchToggleBtn svg {
    width: calc(18px * var(--tp-ui-scale));
    height: calc(18px * var(--tp-ui-scale));
  }
  #searchToggleBtn:hover, #searchToggleBtn[aria-expanded="true"] { background: var(--tp-hover-fill); }
  #searchPanel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: min(340px, 90vw);
    background: var(--tp-surface-raised);
    border: 1px solid var(--tp-border);
    border-radius: 9px;
    box-shadow: 0 14px 32px -12px rgba(83, 78, 73, .4);
    padding: 8px;
    z-index: 56;
  }
  #searchPanel[hidden] { display: none; }
  #searchInput {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 6px;
  }
  #searchResultsList {
    max-height: 320px;
    overflow-y: auto;
  }
  .search-result-empty {
    padding: 8px 6px;
    font-size: 12px;
    color: var(--tp-muted-light);
  }
  .search-result-row {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px 8px;
    border-radius: 7px;
    cursor: pointer;
  }
  .search-result-row:hover { background: var(--tp-hover-fill); }
  .search-result-group {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--tp-muted-light);
    text-transform: uppercase;
  }
  .search-result-text {
    font-size: 12.5px;
    color: var(--tp-ink-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  @keyframes searchResultFlash {
    0% { background: var(--tp-accent-tint-strong); }
    100% { background: transparent; }
  }
  .line.is-search-flash {
    animation: searchResultFlash 1.2s ease-out;
  }
  #hideDoneBtn {
    width: calc(32px * var(--tp-ui-scale));
    height: calc(32px * var(--tp-ui-scale));
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--tp-ink-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #hideDoneBtn svg {
    width: calc(18px * var(--tp-ui-scale));
    height: calc(18px * var(--tp-ui-scale));
  }
  #hideDoneBtn:hover { background: var(--tp-hover-fill); }
  #hideDoneBtn.active {
    background: var(--tp-accent-tint);
    color: var(--tp-accent-on-tint);
  }
  #copySplitGroup { position: relative; display: flex; align-items: stretch; flex: 0 0 auto; }
  #copyPendingBtn {
    display: flex;
    align-items: center;
    gap: 7px;
    height: calc(32px * var(--tp-ui-scale));
    padding: 0 13px;
    border-radius: 8px;
    border: none;
    background: var(--tp-accent);
    color: white;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
  }
  #copySplitGroup.has-caret #copyPendingBtn { border-radius: 8px 0 0 8px; }
  #copyPendingBtn:hover { background: var(--tp-accent-hover); }
  #copyPendingBtn svg {
    width: calc(16px * var(--tp-ui-scale));
    height: calc(16px * var(--tp-ui-scale));
  }
  #copySplitCaretBtn {
    width: 26px;
    height: calc(32px * var(--tp-ui-scale));
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, .22);
    border-radius: 0 8px 8px 0;
    background: var(--tp-accent);
    color: white;
    cursor: pointer;
    padding: 0;
  }
  #copySplitCaretBtn:hover { background: var(--tp-accent-hover); }
  #copySplitCaretBtn[hidden] { display: none; }
  /* No terminal open right now - space stays reserved (button never
     resizes) but the caret blends into a seamless "Copy to Pool" pill:
     no chevron, no divider, unreachable by click or keyboard. */
  #copySplitCaretBtn:disabled {
    cursor: default;
    opacity: 1;
    border-left-color: transparent;
  }
  #copySplitCaretBtn:disabled:hover { background: var(--tp-accent); }
  #copySplitCaretBtn:disabled svg { visibility: hidden; }
  #copySplitMenu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 236px;
    background: var(--tp-surface-raised);
    border: 1px solid var(--tp-border);
    border-radius: 9px;
    box-shadow: 0 14px 32px -12px rgba(83, 78, 73, .4);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 56;
  }
  #copySplitMenu[hidden] { display: none; }
  .copy-split-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 7px;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
  }
  .copy-split-menu-item:hover { background: var(--tp-hover-fill); }
  .copy-split-menu-item[hidden] { display: none; }
  .copy-split-menu-separator {
    height: 1px;
    background: var(--tp-hairline);
    margin: 4px 2px;
  }
  .copy-split-menu-icon {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--tp-accent-tint);
    color: var(--tp-accent-on-tint);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .copy-split-menu-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .copy-split-menu-title { font-size: 12.5px; font-weight: 500; color: var(--tp-ink); }
  .copy-split-menu-desc { font-size: 11px; color: var(--tp-muted); line-height: 1.3; }
  /* Groups "Tasks only"/"With Context" under which outcome they produce
     (Copy vs Copy to Pool) - same label styling as search.js's grouped
     results (.search-result-group) for a consistent "small caps section
     header inside a list" look elsewhere in the app. */
  .copy-split-menu-group-label {
    padding: 4px 8px 2px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--tp-muted-light);
    text-transform: uppercase;
  }

  #legendStrip {
    flex: 0 0 auto;
    padding: 0 28px 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--tp-hairline);
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--tp-font-ui);
  }
  .legend-item { display: flex; align-items: center; gap: 6px; }
  .legend-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
  .legend-dot-open { background: transparent; box-shadow: inset 0 0 0 1.6px var(--tp-status-open-ring); }
  .legend-dot-done { background: var(--tp-status-done); }
  .legend-dot-review { background: var(--tp-status-review); }
  .legend-dot-abandoned { background: var(--tp-status-abandoned); }
  .legend-label { font-size: 11px; color: var(--tp-ink-secondary); }
  .legend-count { font-size: 11px; color: var(--tp-muted-light); font-variant-numeric: tabular-nums; }
  #legendCopyConfirm {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: #1E9E6A;
  }
  #legendCopyConfirm.error { color: var(--tp-close-red); }
  #legendCopyConfirm[hidden] { display: none; }

  /* left is a CSS custom property, not a bare 50%: centering on the
     viewport put the toast dead center of the whole window, which drifts
     off-center over the task-list/Outline pane once a sidebar and/or a
     right-docked terminal panel are eating into one side (item 284). JS
     recomputes it against #editorColumn's own bounds each time a toast is
     shown, so it stays centered over the pane the feedback is actually
     about instead of the window as a whole. */
  #toast {
    position: fixed;
    left: var(--toast-center-x, 50%);
    bottom: 20px;
    transform: translateX(-50%) translateY(8px);
    background: var(--tp-surface-raised);
    color: var(--tp-ink-secondary);
    font-size: 12px;
    padding: 8px 14px;
    border-radius: 8px;
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--tp-border);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 30;
  }
  #toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

  #editor {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 12px 16px 60px 16px;
    outline: none;
  }

  .line {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 5px 8px 5px 4px;
    border-radius: 7px;
    border-bottom: 1px solid var(--tp-hairline);
    font-family: var(--tp-font-ui);
  }
  .line:hover {
    background: var(--tp-surface-raised);
  }

  .line-ghost {
    opacity: 0.55;
  }

  .line-number {
    flex: none;
    min-width: 26px;
    text-align: right;
    color: var(--tp-muted-light);
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: calc(var(--font-size-base) - 2px);
    font-variant-numeric: tabular-nums;
    padding-top: 2px;
    user-select: none;
    -webkit-user-select: none;
    /* A note's "parent.child" number (e.g. "253.1") is wider than a plain
       task number - the old fixed 26px width had no room for it and no
       nowrap, so the browser wrapped mid-number ("253." / "1" on the next
       line). min-width keeps single-digit numbers aligned as before, while
       nowrap+min-width (not a fixed width) lets a wider number grow the box
       instead of wrapping. */
    white-space: nowrap;
  }

  .line-status {
    flex: none;
    width: calc(24px * var(--tp-ui-scale));
    height: calc(24px * var(--tp-ui-scale));
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    margin-top: 1px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .line-status svg {
    width: calc(18px * var(--tp-ui-scale));
    height: calc(18px * var(--tp-ui-scale));
  }

  .line-text {
    flex: 1 1 auto;
    outline: none;
    white-space: pre-wrap;
    word-break: break-word;
    min-height: 1.4em;
    font-size: var(--font-size-base);
    line-height: 1.5;
  }

  .line-title {
    border-bottom: none;
    padding: 6px 8px 6px 4px;
    margin-top: 14px;
    /* Overrides .line's flex-start: a title long enough to wrap onto a
       second line grows taller than the fixed-size chevron/+ icons next
       to it, which stayed pinned to the top of that taller box under
       flex-start - centering keeps them aligned with the text regardless
       of how many lines it wraps to (task/note rows keep flex-start,
       since their number/status icons are meant to anchor to the first
       line of a wrapped task). */
    align-items: center;
  }
  .line-title:first-child {
    margin-top: 0;
  }
  .line-title:hover {
    background: var(--tp-surface-raised);
    border-radius: 7px;
  }
  .line-title .line-text {
    flex: 0 1 auto;
    font-weight: var(--title-weight);
    color: var(--tp-ink);
    font-size: 12.5px;
  }
  .line-title-pill {
    flex: 0 0 auto;
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
    color: var(--tp-muted);
    background: var(--tp-fill-subtle);
    padding: 1px 7px;
    border-radius: 20px;
  }
  .line-title-pill.has-pending {
    color: var(--tp-accent);
    background: var(--tp-accent-tint);
  }
  .line-title-rule {
    flex: 1;
    height: 1px;
    background: var(--tp-hairline);
    margin-left: 2px;
  }
  .line-title-planning-badge {
    flex: 0 0 auto;
    margin-left: 8px;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--tp-muted);
    background: var(--tp-fill-subtle);
    border: 1px solid var(--tp-hairline);
    padding: 1px 6px;
    border-radius: 4px;
  }

  .line-task,
  .line-note {
    padding-left: 4px;
  }

  .line-note {
    padding-left: 26px;
  }

  .line-text.done {
    color: var(--tp-muted);
    text-decoration: line-through;
    text-decoration-color: var(--tp-border);
  }

  .line-text.abandoned {
    color: var(--tp-muted-light);
    text-decoration: line-through;
    text-decoration-color: var(--tp-border);
  }

  .line-grip {
    position: absolute;
    left: 4px;
    top: 7px;
    width: 8px;
    height: 14px;
    cursor: grab;
    opacity: 0;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    transition: opacity 0.15s ease;
    /* Drawn as a fixed-size dot grid instead of a Unicode glyph (e.g. braille
       dots) so its width can never vary with font/OS fallback rendering and
       drift into the number/checkbox column next to it. */
    background-image: radial-gradient(circle, var(--muted-2) 1px, transparent 1.3px);
    background-size: 4px 4px;
    background-repeat: repeat;
    background-position: 0 0;
  }
  .line:hover .line-grip {
    opacity: 1;
  }
  .line-grip:active {
    cursor: grabbing;
  }
  .line.dragging {
    opacity: 0.4;
  }
  .line.drag-over-top {
    box-shadow: inset 0 2px 0 0 var(--accent);
  }
  .line.drag-over-bottom {
    box-shadow: inset 0 -2px 0 0 var(--accent);
  }

  .line-collapse {
    flex: none;
    width: 20px;
    height: 20px;
    background: none;
    border: none;
    color: var(--tp-muted);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.16s ease;
    -webkit-appearance: none;
    appearance: none;
  }
  .line-collapse svg {
    width: calc(14px * var(--tp-ui-scale));
    height: calc(14px * var(--tp-ui-scale));
  }
  .line-collapse:hover {
    color: var(--tp-ink-secondary);
  }

  /* Item 164: .line-section-copy and .line-copy used to be unboxed text
     (padding + font-size only, no explicit height), while .line-delete is
     a fixed-size box - two different box models can't be relied on to line
     up vertically without guessing at font-metric rendering, which is what
     the previous fix here tried and got wrong. Now all three share the
     exact same width/height/margin-top as .line-delete below, so they
     align by construction instead of by a tuned guess. */
  .line-section-copy {
    flex: none;
    width: calc(26px * var(--tp-ui-scale));
    height: calc(26px * var(--tp-ui-scale));
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--tp-muted);
    font-size: 13px;
    cursor: pointer;
    padding: 0;
    opacity: 0;
    transition: opacity 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
  }
  .line:hover .line-section-copy {
    opacity: 1;
  }
  .line-section-copy:hover {
    background: var(--tp-hover-fill);
    color: var(--tp-ink-secondary);
  }

  /* Item 270: same box model as .line-section-copy so the two icons line
     up, sitting right next to it. */
  .line-section-push-pool {
    flex: none;
    width: calc(26px * var(--tp-ui-scale));
    height: calc(26px * var(--tp-ui-scale));
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--tp-muted);
    cursor: pointer;
    padding: 0;
    opacity: 0;
    transition: opacity 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
  }
  .line:hover .line-section-push-pool {
    opacity: 1;
  }
  .line-section-push-pool:hover {
    background: var(--tp-hover-fill);
    color: var(--tp-ink-secondary);
  }

  .line-title-add {
    flex: none;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--tp-muted);
    cursor: pointer;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
  }
  .line-title-add:hover {
    background: var(--tp-accent-tint-strong);
    color: var(--tp-accent);
  }

  .line-copy {
    flex: none;
    width: calc(26px * var(--tp-ui-scale));
    height: calc(26px * var(--tp-ui-scale));
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--tp-muted);
    font-size: 13px;
    cursor: pointer;
    padding: 0;
    opacity: 0;
    transition: opacity 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
  }
  .line:hover .line-copy {
    opacity: 1;
  }
  .line-copy:hover {
    background: var(--tp-hover-fill);
    color: var(--tp-ink-secondary);
  }

  .line-collapsed .line-text {
    opacity: 0.7;
  }

  .line-delete {
    flex: 0 0 auto;
    width: calc(26px * var(--tp-ui-scale));
    height: calc(26px * var(--tp-ui-scale));
    margin-top: 1px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--tp-secondary-quiet);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-appearance: none;
    appearance: none;
  }
  .line-delete svg {
    width: calc(14px * var(--tp-ui-scale));
    height: calc(14px * var(--tp-ui-scale));
  }
  .line-delete:hover,
  .line-delete:focus-visible {
    background: var(--tp-danger-tint);
    color: var(--danger);
  }

  /* Both values below line up with the task row's own layout (see .line,
     .line-number, .line-status) so the "+"/label read as a continuation of
     the list under the text column, not the status circles. */
  .line-add-task-empty-msg {
    padding: 6px 4px 2px calc(4px + 26px + 9px + calc(24px * var(--tp-ui-scale)) + 9px + calc(16px * var(--tp-ui-scale)) + 8px);
    font-size: 12px;
    color: var(--tp-secondary-quiet);
  }
  .line-add-task-empty-msg.drag-over-bottom {
    box-shadow: inset 0 -2px 0 0 var(--accent);
  }

  .context-menu {
    position: fixed;
    background: var(--menu-bg);
    border: 1px solid var(--menu-border);
    border-radius: 4px;
    padding: 4px 0;
    min-width: 160px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    z-index: 100;
    font-size: 13px;
  }
  .context-menu-item {
    padding: 6px 12px;
    cursor: pointer;
    color: var(--fg);
    white-space: nowrap;
  }
  .context-menu-item:hover {
    background: var(--menu-hover);
  }
  .context-menu-item.current {
    color: var(--menu-current);
    font-weight: bold;
  }
  .context-menu-separator {
    height: 1px;
    background: var(--menu-border);
    margin: 4px 0;
  }
  .context-menu-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    margin-right: 8px;
    border: 1px solid var(--status-empty-border);
    vertical-align: middle;
  }
  .context-menu-dot.status-empty {
    background: transparent;
  }
  .context-menu-dot.status-done {
    background: var(--status-done);
    border-color: var(--status-done);
  }
  .context-menu-dot.status-review {
    background: var(--status-review);
    border-color: var(--status-review);
  }
  .context-menu-dot.status-broken {
    background: var(--status-broken);
    border-color: var(--status-broken);
  }

  /* ---------- Colour picker ---------- */

  .cp-overlay {
    position: absolute;
    inset: 0;
    z-index: 6;
    background: rgba(95, 91, 87, .18);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cp-overlay[hidden] {
    display: none;
  }
  .cp-card {
    width: 236px;
    border-radius: 10px;
    background: var(--tp-surface-raised);
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--tp-border), 0 20px 44px -14px rgba(83, 78, 73, .42);
    font-family: var(--tp-font-ui);
  }
  .cp-header {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 14px 10px;
  }
  .cp-preview-swatch {
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    box-shadow: 0 0 0 1px var(--tp-border);
  }
  .cp-channel-label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--tp-ink-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cp-hex-readout {
    flex: none;
    font-family: Consolas, "Courier New", monospace;
    font-size: 10.5px;
    color: var(--tp-muted-light);
    text-transform: uppercase;
  }
  .cp-sv-area {
    position: relative;
    margin: 0 14px;
    height: 124px;
    border-radius: 7px;
    cursor: crosshair;
    box-shadow: 0 0 0 1px var(--tp-border);
    background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0)), linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
    touch-action: none;
  }
  .cp-hue-slider {
    position: relative;
    margin: 10px 14px 0;
    height: 12px;
    border-radius: 6px;
    cursor: crosshair;
    box-shadow: 0 0 0 1px var(--tp-border);
    background-image: linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
    touch-action: none;
  }
  .cp-knob {
    position: absolute;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    margin: -7px 0 0 -7px;
    pointer-events: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(83, 78, 73, .5);
  }
  .cp-sv-knob {
    background: transparent;
  }
  .cp-hex-row {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 14px 0;
  }
  .cp-hex-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 28px;
    padding: 0 9px;
    border: none;
    border-radius: 6px;
    background: var(--tp-fill-subtle);
    color: var(--tp-ink-secondary);
    font-family: Consolas, "Courier New", monospace;
    font-size: 11.5px;
  }
  .cp-eyedropper-btn {
    flex: none;
    width: calc(30px * var(--tp-ui-scale));
    height: calc(30px * var(--tp-ui-scale));
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    background: var(--tp-fill-subtle);
    color: var(--tp-ink-secondary);
    cursor: pointer;
  }
  .cp-eyedropper-btn svg {
    width: calc(16px * var(--tp-ui-scale));
    height: calc(16px * var(--tp-ui-scale));
  }
  .cp-eyedropper-btn:hover {
    background: var(--tp-hover-fill);
  }
  .cp-eyedropper-btn:disabled {
    opacity: 0.4;
    cursor: default;
  }
  .cp-eyedropper-btn:disabled:hover {
    background: var(--tp-fill-subtle);
  }
  .cp-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 14px;
    border-top: 1px solid var(--tp-hairline-faint);
    background: var(--tp-surface-sunken);
  }
  .cp-cancel-btn {
    padding: 6px 12px;
    border: 1px solid var(--tp-border);
    border-radius: 6px;
    background: var(--tp-surface-raised);
    color: var(--tp-muted);
    font-family: var(--tp-font-ui);
    font-size: 11.5px;
    cursor: pointer;
  }
  .cp-cancel-btn:hover {
    background: var(--tp-hover-fill);
  }
  .cp-ok-btn {
    padding: 6px 15px;
    border: none;
    border-radius: 6px;
    background: var(--tp-accent);
    color: white;
    font-family: var(--tp-font-ui);
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
  }
  .cp-ok-btn:hover {
    background: var(--tp-accent-hover);
  }
  /* Applied to whichever swatch/channel button opened the picker, for as
     long as it's open - the trigger keeps showing the committed colour
     underneath, this ring is the only feedback that it's the active one. */
  .cp-trigger-active {
    box-shadow: 0 0 0 2px var(--tp-accent) !important;
  }

  .emoji-popover {
    position: fixed;
    z-index: 40;
    background: var(--tp-surface-raised);
    border-radius: 8px;
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--tp-border);
    padding: 8px;
  }
  #emojiGrid {
    display: grid;
    grid-template-columns: repeat(8, 28px);
    gap: 2px;
  }
  #emojiGrid button {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #emojiGrid button:hover {
    background: var(--tp-hover-fill);
  }

  .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
  }
  .modal-overlay[hidden] {
    display: none;
  }

  /* Account decisions (frontend/choiceDialog.js, item 287) - same card,
     heading and buttons as Clear this device / Delete all my data; only
     the stacked option layout is new. Above other modals: these can open
     from inside Settings. */
  .choice-dialog-overlay { z-index: 300; }
  .cp-card.choice-dialog-card { width: 380px; max-width: calc(100vw - 32px); padding: 18px; box-sizing: border-box; }
  .choice-dialog-body { margin: 10px 0 14px; font-size: 12.5px; color: var(--tp-muted-light); line-height: 1.5; }
  .choice-dialog-options { display: flex; flex-direction: column; gap: 8px; }
  .choice-dialog-option.ghost-btn,
  .choice-dialog-option.ghost-btn-danger {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 8px 12px;
    text-align: left;
    white-space: normal;
  }
  .choice-dialog-option-label { font-size: 12.5px; font-weight: 600; }
  .choice-dialog-option-desc { font-size: 11.5px; line-height: 1.4; color: var(--tp-muted-light); }
  .choice-dialog-option.ghost-btn-danger .choice-dialog-option-desc { color: var(--tp-danger-text); opacity: 0.85; }
  .choice-dialog-option.is-default { border-color: var(--tp-accent); box-shadow: 0 0 0 1px var(--tp-accent) inset; }
  .choice-dialog-option:focus-visible { outline: 2px solid var(--tp-accent); outline-offset: 2px; }
  .choice-dialog-option:disabled { opacity: 0.45; cursor: not-allowed; }
  .choice-dialog-option.ghost-btn-danger:disabled:hover { background: transparent; }

  /* ---------- Help drawer ---------- */

  .help-drawer {
    position: absolute;
    top: 32px;
    right: 0;
    bottom: 0;
    width: 390px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    background: var(--tp-surface-raised);
    border-left: 1px solid var(--tp-hairline);
    box-shadow: -24px 0 60px -24px rgba(83, 78, 73, .30);
    font-family: var(--tp-font-ui);
    color: var(--tp-ink);
    z-index: 150;
    transform: translateX(100%);
    transition: transform .18s ease-out;
  }
  .help-drawer.open {
    transform: translateX(0);
  }
  .help-drawer[hidden] {
    display: none;
  }
  .help-drawer-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 18px 20px 14px;
  }
  .help-drawer-header h2 {
    flex: 1 1 auto;
    margin: 0;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--tp-ink);
  }
  .help-drawer-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .help-block h3 {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tp-muted);
  }
  .help-block p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--tp-ink-secondary);
  }
  .help-block code {
    font-family: Consolas, "Courier New", monospace;
  }
  .help-section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tp-accent-hover);
    margin: 0;
  }
  .help-flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    margin-top: 10px;
  }
  .help-flow-box {
    padding: 6px 12px;
    border-radius: 7px;
    background: var(--tp-fill-subtle);
    font-size: 12px;
    font-weight: 600;
    color: var(--tp-ink);
    text-align: center;
  }
  .help-flow-arrow {
    color: var(--tp-accent);
    font-size: 13px;
    line-height: 1;
  }
  #helpTerminalSection {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .help-status-key {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 16px;
    margin-top: 10px;
  }
  .help-status-key-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--tp-ink-secondary);
  }
  .help-shortcuts {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .help-shortcut-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
    color: var(--tp-ink-secondary);
  }
  .key-chip {
    font-family: Consolas, "Courier New", monospace;
    font-size: 11px;
    color: var(--tp-ink-secondary);
    background: var(--tp-fill-subtle);
    padding: 2px 7px;
    border-radius: 5px;
    white-space: nowrap;
  }

  /* ---------- Onboarding tour ---------- */

  .onboarding-overlay {
    background: rgba(95, 91, 87, 0.3);
    overflow-y: auto;
    padding: 24px 0;
  }
  .onboarding-card {
    width: 520px;
    max-width: 92vw;
    max-height: 90vh;
    border-radius: 10px;
    background: var(--tp-surface-raised);
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--tp-border), 0 30px 70px -20px rgba(83, 78, 73, .45);
    font-family: var(--tp-font-ui);
    display: flex;
    flex-direction: column;
  }
  .onboarding-illustration {
    position: relative;
    height: 196px;
    flex: 0 0 auto;
    background: var(--tp-accent-tint-strong);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .onboarding-illustration.is-tall {
    height: auto;
    min-height: 196px;
    padding: 18px 0;
  }
  .onboarding-illustration.is-tall .onboarding-illustration-body {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 26px;
    text-align: left;
  }
  .onboarding-skip-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px 10px;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.6);
    color: var(--tp-ink-secondary);
    font-size: 11.5px;
    font-family: var(--tp-font-ui);
    cursor: pointer;
  }
  .onboarding-skip-btn:hover {
    background: rgba(255, 255, 255, 0.85);
  }
  .onboarding-copy {
    flex: 0 0 auto;
    padding: 22px 26px 8px;
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
  .onboarding-kicker {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--tp-accent-hover);
  }
  .onboarding-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--tp-ink);
  }
  .onboarding-body {
    margin: 0;
    min-height: 42px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--tp-ink-secondary);
  }
  .onboarding-subbody {
    margin: -2px 0 0;
    font-size: 12px;
    font-style: italic;
    color: var(--tp-ink-secondary);
  }
  .onboarding-subbody:empty {
    display: none;
  }
  .onboarding-footer {
    flex: 0 0 auto;
    padding: 12px 26px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .onboarding-dots {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .onboarding-dot {
    width: 7px;
    height: 7px;
    border-radius: 4px;
    border: none;
    padding: 0;
    background: var(--tp-status-abandoned);
    cursor: pointer;
    transition: width .18s, background .18s;
  }
  .onboarding-dot.active {
    width: 20px;
    background: var(--tp-accent);
  }
  .onboarding-footer-buttons {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .onboarding-back-btn[hidden] {
    display: none;
  }
  .onboarding-primary-btn {
    padding: 8px 17px;
    font-size: 12.5px;
    font-weight: 500;
    border-radius: 7px;
  }
  @media (prefers-reduced-motion: reduce) {
    .help-drawer, .onboarding-dot { transition: none; }
    #railSyncBtn.is-syncing svg { animation: none; }
    #railSyncBtn.is-syncing .rail-sync-dot { animation: rail-sync-pulse 1.2s ease-in-out infinite; }
  }
  @keyframes rail-sync-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
  }

  /* Onboarding illustrations - flat UI mocks, not artwork */

  .ob-illus-row {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .ob-illus-row-arrow {
    gap: 10px;
    color: var(--tp-accent);
  }
  .ob-mini-sidebar {
    width: 132px;
    padding: 10px 9px;
    border-radius: 8px;
    background: var(--tp-surface-raised);
    box-shadow: 0 4px 14px -6px rgba(83, 78, 73, .30);
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .ob-mini-sidebar-label {
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--tp-muted);
  }
  .ob-mini-row {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .ob-mini-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tp-border);
    flex: none;
  }
  .ob-mini-row.active .ob-mini-dot {
    background: var(--tp-accent);
  }
  .ob-mini-bar {
    flex: 1 1 auto;
    height: 6px;
    border-radius: 3px;
    background: var(--tp-hairline);
  }
  .ob-mini-row.active .ob-mini-bar {
    background: var(--tp-fill-subtle);
  }
  .ob-mini-list {
    width: 180px;
    padding: 12px;
    border-radius: 8px;
    background: var(--tp-surface-raised);
    box-shadow: 0 4px 14px -6px rgba(83, 78, 73, .30);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .ob-mini-list-bar {
    height: 6px;
    border-radius: 3px;
    background: var(--tp-hairline);
  }
  .ob-mini-list-bar.indent {
    margin-left: 12px;
  }
  .onboarding-illustration-body .w40 { width: 40%; }
  .onboarding-illustration-body .w50 { width: 50%; }
  .onboarding-illustration-body .w60 { width: 60%; }
  .onboarding-illustration-body .w70 { width: 70%; }

  .ob-mono-card {
    width: 330px;
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--tp-surface-raised);
    box-shadow: 0 4px 14px -6px rgba(83, 78, 73, .30);
    font-family: Consolas, "Courier New", monospace;
    font-size: 11.5px;
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
  .ob-mono-line {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--tp-ink-secondary);
  }
  .ob-mono-title {
    font-weight: 700;
    color: var(--tp-accent);
  }
  .ob-mono-note {
    padding-left: 14px;
    color: var(--tp-muted);
  }
  .ob-mini-ring {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: none;
    box-shadow: inset 0 0 0 1.6px var(--tp-status-open-ring);
  }
  .ob-tab-chip {
    font-size: 9.5px;
    color: var(--tp-accent);
    background: var(--tp-accent-tint);
    padding: 1px 5px;
    border-radius: 4px;
  }

  .ob-status-list {
    width: 330px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .ob-status-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 10px;
    border-radius: 7px;
    background: var(--tp-surface-raised);
    box-shadow: 0 2px 8px -4px rgba(83, 78, 73, .25);
    font-size: 11.5px;
    color: var(--tp-ink-secondary);
  }
  .ob-status-row > span:nth-child(2) {
    flex: 1 1 auto;
  }
  .ob-status-name {
    color: var(--tp-muted);
    font-size: 10.5px;
  }
  .ob-status-done-text {
    text-decoration: line-through;
    color: var(--tp-muted);
  }
  .ob-status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: none;
  }
  .ob-status-dot.done { background: var(--tp-status-done); }
  .ob-status-dot.review { background: var(--tp-status-review); }
  .ob-status-dot.abandoned { background: var(--tp-status-abandoned); }

  .ob-mini-outline {
    width: 148px;
    padding: 8px;
    border-radius: 8px;
    background: var(--tp-surface-raised);
    box-shadow: 0 4px 14px -6px rgba(83, 78, 73, .30);
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .ob-mini-outline-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 5px;
    border-radius: 5px;
  }
  .ob-mini-outline-row.active {
    background: var(--tp-accent-tint-strong);
  }
  .ob-mini-bar-accent {
    width: 3px;
    height: 11px;
    border-radius: 2px;
    background: var(--tp-border);
    flex: none;
  }
  .ob-mini-outline-row.active .ob-mini-bar-accent {
    background: var(--tp-accent);
  }
  .ob-mini-outline-row .ob-mini-list-bar {
    flex: 1 1 auto;
  }
  .ob-mini-count {
    font-size: 9px;
    color: var(--tp-accent);
    font-variant-numeric: tabular-nums;
  }
  .ob-mini-count.muted {
    color: var(--tp-muted-light);
  }
  /* Item 165's "Tour footer arrow" spec row doesn't cleanly map onto this
     element: the doc gives a single glyph size (14, from 13) as if this
     were a small square icon, but .ob-arrow is a wide horizontal arrow
     illustration (26x16, ~1.6:1) inside one tour slide's diagram, not a
     footer nav icon - no element literally matching "tour footer arrow"
     exists (the real footer nav is Back/Next text buttons). Treated as the
     closest available match and scaled proportionally (~1.2x, in line
     with this spec's other glyph bumps) rather than force-fitting the
     single "14" onto a non-square shape. Revisit if this wasn't the
     intended target. */
  .ob-arrow {
    flex: none;
    width: calc(31px * var(--tp-ui-scale));
    height: calc(19px * var(--tp-ui-scale));
  }
  .ob-mini-section {
    width: 150px;
    padding: 9px;
    border-radius: 8px;
    background: var(--tp-surface-raised);
    box-shadow: 0 4px 14px -6px rgba(83, 78, 73, .30);
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
  .ob-mini-section-header {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--tp-muted);
  }
  .ob-mini-section-header .ob-mini-list-bar {
    flex: 1 1 auto;
  }

  .ob-illus-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .ob-copy-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border: none;
    border-radius: 8px;
    background: var(--tp-accent);
    color: white;
    font-size: 12px;
    font-weight: 500;
    font-family: var(--tp-font-ui);
    cursor: default;
  }
  .ob-illus-copy .ob-mono-card {
    width: 290px;
  }
  .ob-theme-row {
    display: flex;
    gap: 8px;
  }
  .ob-theme-swatch {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    box-shadow: 0 0 0 1px var(--tp-border);
  }
  .ob-theme-swatch.active {
    box-shadow: 0 0 0 2px var(--tp-surface-raised), 0 0 0 4px var(--tp-accent);
  }
  .ob-toggle-on .tp-toggle-track {
    background: var(--tp-accent);
  }
  .ob-toggle-on .tp-toggle-knob {
    left: 18px;
  }
  .ob-save-icons {
    display: flex;
    gap: 10px;
  }
  .ob-save-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--tp-surface-raised);
    box-shadow: 0 4px 14px -6px rgba(83, 78, 73, .30);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tp-ink-secondary);
  }
  .ob-autosave-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11.5px;
    color: var(--tp-ink-secondary);
  }
  .ob-mini-grip {
    width: 6px;
    height: 12px;
    flex: none;
    background-image: radial-gradient(circle, var(--tp-muted-light) 1px, transparent 1.3px);
    background-size: 4px 4px;
    background-repeat: repeat;
  }
  .ob-menu-mock {
    width: 160px;
    padding: 4px;
    border-radius: 8px;
    background: var(--tp-surface-raised);
    box-shadow: 0 4px 14px -6px rgba(83, 78, 73, .30);
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .ob-menu-row {
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 10.5px;
    color: var(--tp-ink-secondary);
  }
  .ob-menu-row.active {
    background: var(--tp-hover-fill);
  }

  .ob-flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
  }
  .ob-flow-box {
    padding: 7px 14px;
    border-radius: 7px;
    background: var(--tp-surface-raised);
    box-shadow: 0 2px 8px -4px rgba(83, 78, 73, .3);
    font-size: 12px;
    font-weight: 600;
    color: var(--tp-ink);
    text-align: center;
  }
  .ob-flow-arrow {
    color: var(--tp-accent);
    font-size: 14px;
    line-height: 1;
  }
  .ob-flow-branch {
    display: flex;
    gap: 18px;
    justify-content: center;
    width: 100%;
    margin-top: 2px;
  }
  .ob-flow-branch .ob-flow-box.done {
    background: var(--tp-status-done);
    color: #fff;
  }
  .ob-flow-branch .ob-flow-box.review {
    background: var(--tp-status-review);
    color: #fff;
  }
  .onboarding-task-input {
    width: 100%;
    box-sizing: border-box;
    height: 36px;
    padding: 0 12px;
    background: var(--tp-fill-subtle);
    border: none;
    border-radius: 7px;
    color: var(--tp-ink);
    font-family: inherit;
    font-size: 13px;
  }

  .whats-new-card {
    width: 440px;
    max-width: 92vw;
    max-height: 86vh;
    overflow-y: auto;
    border-radius: 10px;
    background: var(--tp-surface-raised);
    box-shadow: 0 0 0 1px var(--tp-border), 0 30px 70px -20px rgba(83, 78, 73, .45);
    font-family: var(--tp-font-ui);
    padding: 24px 26px 20px;
  }
  .whats-new-title {
    margin: 0 0 14px;
    font-size: 18px;
    font-weight: 600;
    color: var(--tp-ink);
  }
  .whats-new-section {
    margin-bottom: 14px;
  }
  .whats-new-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--tp-ink);
    margin: 0 0 3px;
  }
  .whats-new-section-body {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--tp-ink-secondary);
    margin: 0;
  }
  .whats-new-list-item {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--tp-ink-secondary);
    margin: 4px 0 0;
  }
  .whats-new-footer {
    margin-top: 4px;
    display: flex;
    justify-content: flex-end;
  }

  .line-title.title-flash {
    background: var(--accent);
    transition: background-color 0.6s ease;
  }

/* overflow: hidden is load-bearing, not decorative: xterm.js renders each
   row as its own absolutely-positioned element sized to the current
   column count, and as the user types, a long unwrapped line (or the
   parallel accessibility-tree mirror xterm keeps for screen readers)
   grows wider than the panel before the next fit/resize pass catches up.
   Without a clipping ancestor that overflow doesn't just get visually cut
   off - flexbox seats the sibling column of tasks based on the widened
   content, so typing in a docked terminal was shoving the whole task
   panel sideways instead of the text simply wrapping (item 229). */
.terminal-instance { width: 100%; height: 100%; overflow: hidden; }
.terminal-instance .xterm { padding: 6px; }

.terminal-panel { background: var(--bg); position: relative; display: flex; flex-direction: column; overflow: hidden; }
.terminal-panel[hidden] { display: none; }
.terminal-panel-titlebar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--tp-hairline);
}
.terminal-panel-placement.tp-segmented .tp-segmented-btn { padding: 5px 7px; display: flex; align-items: center; }
.terminal-font-size-control.tp-segmented .tp-segmented-btn {
  width: 20px;
  padding: 5px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
}
.terminal-panel-close {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 6px;
  color: var(--tp-ink-secondary);
  cursor: pointer;
  padding: 0;
}
.terminal-panel-close:hover { background: var(--tp-hover-fill); color: var(--tp-close-red); }
.terminal-panel-body { flex: 1; min-width: 0; min-height: 0; overflow: hidden; }
/* Bottom is a normal flex child of #app (a column: #titleBar, #windowBody,
   then this) - NOT position:fixed. A fixed-position bottom bar would sit
   on top of #windowBody's own content (covering the rail's footer icons
   and the tail of a long task list) instead of making room for it. As a
   real flex sibling, #windowBody's own flex:1/min-height:0 (see #main and
   #windowBody in this file) shrinks to fit around it automatically.
   Height is a CSS custom property (--terminal-bottom-height, default set
   by JS from the persisted terminalBottomHeight setting) so the drag
   handle below can resize it live, same pattern as --sidebar-width. */
/* margin-left reserves #iconRail's now-fixed-position width (see #iconRail
   in this file) so the terminal's own content area - and xterm's fit
   calculation, which sizes off this box, not the viewport - genuinely
   starts after the rail instead of being rendered full-width and then
   just visually covered by it, which was silently clipping the first
   ~60px of every line (the rail sitting on top of, rather than beside,
   the terminal). */
.terminal-panel-bottom { flex: 0 0 var(--terminal-bottom-height, 87px); min-height: 0; margin-left: calc(60px * var(--tp-ui-scale)); border-top: 1px solid var(--tp-border); }
/* Right is a normal flex child of #mainBody (last, after #editorColumn) -
   NOT position:fixed, for the same reason: a fixed-width panel doesn't
   reflow #editorBody's content, so a task row's delete-X button
   (right-aligned) would render underneath it instead of shrinking to make
   room. It's a full-height sibling of #editorColumn (which wraps
   #editorHeader+#editorBody), not nested below #editorHeader spanning the
   full window width - that would leave .terminal-panel-titlebar sitting a
   whole header-height below #editorHeader's own actions instead of beside
   them (item 227/228). As a real flex sibling, #editorColumn's own
   flex:1 1 auto/min-width:0 shrinks its available width automatically,
   same as it already does for the resizable sidebar. Width is a CSS
   custom property for the same live-drag-resize reason as above. */
.terminal-panel-right { flex: 0 0 var(--terminal-right-width, 190px); min-width: 0; border-left: 1px solid var(--tp-border); }
/* Matches #editorHeader's own vertical padding/alignment (see #editorHeader)
   so the dock-placement/close icons line up with the app's own header
   actions (Share/Sync/Copy to Pool) sitting at the same height next door,
   instead of the shorter/centered default .terminal-panel-titlebar uses
   for the bottom and overlay placements, where there's no adjacent header
   to match. */
.terminal-panel-right > .terminal-panel-titlebar { padding: 16px 8px 12px; align-items: flex-end; }

.terminal-resize-handle { position: absolute; z-index: 10; touch-action: none; }
.terminal-resize-handle:hover, .terminal-resize-handle.resizing { background: var(--accent); opacity: 0.5; }
.terminal-panel-bottom > .terminal-resize-handle { top: -3px; left: 0; width: 100%; height: 6px; cursor: row-resize; }
.terminal-panel-right > .terminal-resize-handle { top: 0; left: -3px; width: 6px; height: 100%; cursor: col-resize; }
/* Overlay is the one placement that's deliberately NOT a flex participant -
   the whole point is to cover as much as possible. It's still fixed, but
   insets past #titleBar (32px, see #titleBar in this file) and the icon
   rail (60px, see #iconRail) so the window's own close/minimize/maximize
   controls and the terminal toggle/Settings are never trapped behind it
   with no way back. */
.terminal-panel-overlay {
  position: fixed;
  top: 32px;
  right: 0;
  bottom: 0;
  left: calc(60px * var(--tp-ui-scale));
  z-index: 50;
}