/* -------------------------------------------------------------
       CSS Design Tokens & Theme Variables (Weel Harvest & Dark Obsidian)
       ------------------------------------------------------------- */
    :root {
      color-scheme: light;
      /* Weel Modernist Light Theme — one warm ground, ink, one red accent */
      --bg-app: #f2f2ef;
      --bg-surface: #fafaf8;
      --bg-surface-elevated: #ffffff;
      --bg-sidebar: #f2f2ef;
      --bg-hover: #e7e7e2;
      --bg-active: #dededa;
      --bg-highlight: rgba(227, 64, 31, 0.10);
      
      --border-subtle: #d6d6d1;
      --border-medium: #b8b8b2;
      --border-focus: #111111;

      --text-primary: #111111;
      --text-secondary: #3f3f3c;
      /* #73736e fell just under WCAG AA (4.3:1) against --bg-app at the
         11-12px sizes it is used at; this clears 4.5:1. */
      --text-muted: #6a6a64;
      --text-disabled: #a6a6a1;

      /* Single accent. The legacy --weel-amber names stay as aliases so
         every existing rule picks up the red without a rename. */
      --accent: #e3401f;
      --accent-light: #f9ddd5;
      --accent-glow: rgba(227, 64, 31, 0.18);
      /* The brand red reads at 3.8:1 on --bg-app, which fails AA for body
         copy. Fills, marks and buttons keep --accent; small red *text*
         uses this darker step, which is indistinguishable at a glance
         and clears 4.8:1. */
      --accent-text: #c4360f;
      /* Red text sitting on an --accent-light tint needs to go darker
         still to clear AA at chip/pill sizes. */
      --accent-on-tint: #9e2b0b;
      --weel-amber: var(--accent);
      --weel-amber-light: var(--accent-light);
      --weel-amber-glow: var(--accent-glow);
      --weel-violet: #3f3f3c;
      --weel-violet-light: #e7e7e2;
      --weel-accent-grad: var(--accent);
      --weel-ai-sparkle: var(--accent);

      --shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.04);
      --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
      --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.10);
      --shadow-spotlight: 0 16px 40px rgba(0, 0, 0, 0.14);

      --font-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      --font-mono: 'JetBrains Mono', monospace;

      --sidebar-width: 240px;
      --headsup-width: 320px;
      --radius-sm: 2px;
      --radius-md: 3px;
      --radius-lg: 4px;
      --radius-full: 2px;
      --transition: all 0.15s ease;
    }

    [data-theme="dark"] {
      /* Native controls (checkboxes, scrollbars, search-clear) follow the theme. */
      color-scheme: dark;
      --bg-app: #121211;
      --bg-surface: #181817;
      --bg-surface-elevated: #1f1f1d;
      --bg-sidebar: #121211;
      --bg-hover: #242423;
      --bg-active: #2d2d2b;
      --bg-highlight: rgba(242, 75, 37, 0.16);

      --border-subtle: #2c2c2a;
      --border-medium: #444441;
      --border-focus: #f2f2ef;

      --text-primary: #f2f2ef;
      --text-secondary: #b9b9b3;
      --text-muted: #7f7f79;
      --text-disabled: #4f4f4b;

      --accent: #f24b25;
      --accent-light: rgba(242, 75, 37, 0.16);
      --accent-glow: rgba(242, 75, 37, 0.25);
      --accent-text: #ff7a56;
      --accent-on-tint: #ff7a56;
      --weel-violet: #b9b9b3;
      --weel-violet-light: #242423;

      --shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.4);
      --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5);
      --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
      --shadow-spotlight: 0 16px 40px rgba(0, 0, 0, 0.7);
    }

    /* -------------------------------------------------------------
       Base & Reset Styles
       ------------------------------------------------------------- */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html, body {
      height: 100%;
      width: 100%;
      overflow: hidden;
      font-family: var(--font-main);
      background: var(--bg-app);
      color: var(--text-primary);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    button, input, textarea {
      font-family: inherit;
      color: inherit;
      border: none;
      background: none;
    }

    button {
      cursor: pointer;
      user-select: none;
    }

    /* Keyboard focus. The reset above used to clear `outline` outright,
       which left keyboard users with no visible focus anywhere in the app.
       :focus-visible keeps pointer clicks clean while always showing a
       ring for keyboard and assistive-tech navigation. */
    :focus { outline: none; }
    :focus-visible,
    [tabindex]:focus-visible,
    .note-card:focus-visible,
    .similar-note-card:focus-visible,
    .spotlight-item:focus-visible,
    .slash-item:focus-visible,
    .cal-note-card:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
      border-radius: var(--radius-sm);
    }
    .landing-btn:focus-visible,
    .landing-btn-outline:focus-visible {
      outline: 2px solid currentColor;
      outline-offset: 3px;
    }

    /* Respect users who ask the OS to reduce motion. */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
      }
    }

    /* The `hidden` attribute loses to any class that sets `display`, so
       elements like the Add-tag button and the AI undo controls stayed
       visible when scripts hid them. */
    [hidden] { display: none !important; }

    /* Visually hidden, still announced by screen readers. */
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
      border: 0;
    }

    ::selection {
      background: var(--weel-amber-light);
      color: var(--text-primary);
    }

    /* Custom Scrollbar */
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    ::-webkit-scrollbar-track {
      background: transparent;
    }
    ::-webkit-scrollbar-thumb {
      background: var(--border-medium);
      border-radius: var(--radius-full);
    }
    ::-webkit-scrollbar-thumb:hover {
      background: var(--text-muted);
    }

    /* -------------------------------------------------------------
       Main Layout Shell (3 Panes: Sidebar, Content, Heads Up)
       ------------------------------------------------------------- */
    #app-container {
      display: flex;
      width: 100vw;
      height: 100vh;
      height: 100dvh; /* mobile browser chrome doesn't cover the editor */
      overflow: hidden;
      position: relative;
    }

    /* -------------------------------------------------------------
       Left Navigation Sidebar
       ------------------------------------------------------------- */
    .sidebar {
      width: var(--sidebar-width);
      min-width: var(--sidebar-width);
      background: var(--bg-sidebar);
      border-right: 1px solid var(--border-subtle);
      display: flex;
      flex-direction: column;
      height: 100%;
      z-index: 20;
      transition: transform 0.25s ease, margin-left 0.25s ease;
    }
    .sidebar.collapsed {
      margin-left: calc(-1 * var(--sidebar-width));
    }

    .sidebar-header {
      padding: 16px 14px 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .workspace-btn {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 6px 8px;
      border-radius: var(--radius-md);
      transition: var(--transition);
      width: 100%;
      text-align: left;
    }
    /* Static header now — the old chevron promised a menu that never opened. */

    /* Brand marks: .weel-mark is Ascent (the rising W), .weel-icon is the
       solid Tile. Both draw from `color`, so they follow the accent into
       dark mode without a second asset. */
    .weel-mark, .weel-icon {
      color: var(--accent);
      display: block;
      flex-shrink: 0;
    }

    .workspace-info {
      flex: 1;
      min-width: 0;
    }
    .workspace-name {
      font-size: 13.5px;
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: var(--text-primary);
    }

    /* Quick Action: New Weel */
    .sidebar-actions {
      padding: 8px 14px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .btn-new-weel {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      background: var(--accent);
      color: #fff;
      padding: 10px 12px;
      border-radius: var(--radius-sm);
      font-size: 13px;
      font-weight: 700;
      transition: var(--transition);
    }
    .btn-new-weel:hover {
      filter: brightness(0.92);
    }
    .btn-new-weel .shortcut {
      font-size: 10px;
      opacity: 0.65;
      background: rgba(255, 255, 255, 0.15);
      padding: 2px 5px;
      border-radius: var(--radius-sm);
      font-family: var(--font-mono);
    }

    .search-trigger-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      padding: 7px 10px;
      border-radius: var(--radius-md);
      background: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      color: var(--text-muted);
      font-size: 12.5px;
      transition: var(--transition);
    }
    .search-trigger-btn:hover {
      border-color: var(--border-medium);
      color: var(--text-secondary);
    }
    .search-trigger-btn .kbd {
      margin-left: auto;
      font-size: 10px;
      font-family: var(--font-mono);
      background: var(--bg-sidebar);
      padding: 2px 4px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border-subtle);
    }

    /* Sidebar Navigation List */
    .sidebar-nav {
      flex: 1;
      overflow-y: auto;
      padding: 10px 8px;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .nav-section-title {
      font-size: 10.5px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--accent-text);
      padding: 14px 10px 4px;
    }

    .nav-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 7px 10px;
      border-radius: var(--radius-md);
      font-size: 13px;
      font-weight: 500;
      color: var(--text-secondary);
      transition: var(--transition);
      position: relative;
    }
    .nav-item:hover {
      background: var(--bg-hover);
      color: var(--text-primary);
    }
    .nav-item.active {
      background: var(--bg-active);
      color: var(--text-primary);
      font-weight: 700;
      box-shadow: inset 2px 0 0 var(--accent);
    }
    .nav-item svg {
      width: 16px;
      height: 16px;
      color: currentColor;
      flex-shrink: 0;
    }
    .nav-item .badge {
      margin-left: auto;
      font-size: 11px;
      color: var(--text-muted);
      background: var(--bg-hover);
      padding: 1px 6px;
      border-radius: var(--radius-sm);
      font-weight: 600;
      font-family: var(--font-mono);
    }

    .collection-item {
      padding-left: 28px;
      position: relative;
    }
    .collection-item::before {
      content: '#';
      position: absolute;
      left: 12px;
      font-weight: 600;
      color: var(--accent-text);
    }

    /* Sidebar Footer */
    .sidebar-footer {
      padding: 10px 14px;
      border-top: 1px solid var(--border-subtle);
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      gap: 4px;
    }

    .footer-btn {
      padding: 6px;
      border-radius: var(--radius-sm);
      color: var(--text-muted);
      transition: var(--transition);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .footer-btn:hover {
      background: var(--bg-hover);
      color: var(--text-primary);
    }

    /* -------------------------------------------------------------
       Center Stage: Notes List / Editor
       ------------------------------------------------------------- */
    .main-stage {
      flex: 1;
      display: flex;
      height: 100%;
      overflow: hidden;
      position: relative;
      background: var(--bg-app);
    }

    /* Split-Pane Note List Column */
    .notes-list-pane {
      width: 320px;
      min-width: 280px;
      border-right: 1px solid var(--border-subtle);
      background: var(--bg-surface);
      display: flex;
      flex-direction: column;
      height: 100%;
      transition: width 0.2s ease, transform 0.2s ease;
    }
    .notes-list-pane.collapsed {
      width: 0;
      min-width: 0;
      overflow: hidden;
      border-right: none;
    }

    .notes-list-header {
      padding: 16px 16px 12px;
      border-bottom: 1px solid var(--border-subtle);
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

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

    .notes-header-title {
      font-size: 18px;
      font-weight: 800;
      letter-spacing: -0.03em;
    }

    .notes-filter-tabs {
      display: flex;
      gap: 4px;
      background: var(--bg-sidebar);
      padding: 3px;
      border-radius: var(--radius-sm);
    }
    .filter-tab-btn {
      padding: 4px 10px;
      font-size: 11.5px;
      font-weight: 500;
      border-radius: var(--radius-sm);
      color: var(--text-muted);
      transition: var(--transition);
    }
    .filter-tab-btn.active {
      background: var(--bg-surface);
      color: var(--text-primary);
      font-weight: 600;
      box-shadow: var(--shadow-sm);
    }

    .notes-search-box {
      position: relative;
      width: 100%;
    }
    .notes-search-box input {
      width: 100%;
      padding: 6px 10px 6px 28px;
      font-size: 12.5px;
      background: var(--bg-sidebar);
      border-radius: var(--radius-sm);
      color: var(--text-primary);
      border: 1px solid transparent;
      transition: var(--transition);
    }
    .notes-search-box input:focus {
      border-color: var(--border-focus);
      background: var(--bg-surface);
    }
    .notes-search-box svg {
      position: absolute;
      left: 8px;
      top: 50%;
      transform: translateY(-50%);
      width: 14px;
      height: 14px;
      color: var(--text-muted);
    }

    .notes-items-container {
      flex: 1;
      overflow-y: auto;
      padding: 8px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .note-card {
      padding: 12px 14px;
      border-radius: var(--radius-md);
      background: transparent;
      border: 1px solid transparent;
      cursor: pointer;
      transition: var(--transition);
      display: flex;
      flex-direction: column;
      gap: 6px;
      position: relative;
    }
    .note-card:hover {
      background: var(--bg-hover);
    }
    .note-card.active {
      background: var(--bg-active);
      border-color: var(--border-subtle);
    }

    .note-card-title-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .note-card-title {
      font-size: 13.5px;
      font-weight: 600;
      color: var(--text-primary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1;
    }
    .note-card-pin {
      color: var(--weel-amber);
      display: none;
    }
    .note-card.is-pinned .note-card-pin {
      display: block;
    }

    .note-card-snippet {
      font-size: 12px;
      color: var(--text-secondary);
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .note-card-footer {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 2px;
    }
    .note-card-tags {
      display: flex;
      gap: 4px;
      overflow: hidden;
      white-space: nowrap;
    }
    .tag-chip {
      font-size: 10px;
      background: var(--accent-light);
      color: var(--accent-on-tint);
      font-weight: 600;
      padding: 1px 6px;
      border-radius: var(--radius-sm);
    }

    /* -------------------------------------------------------------
       Editor Pane (Clean, Distraction-Free, Weel Aesthetic)
       ------------------------------------------------------------- */
    .editor-pane {
      flex: 1;
      display: flex;
      flex-direction: column;
      height: 100%;
      background: var(--bg-app);
      overflow: hidden;
      position: relative;
    }

    .editor-topbar {
      height: 52px;
      padding: 0 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid var(--border-subtle);
      background: var(--bg-app);
      z-index: 10;
    }

    .editor-topbar-left {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .toggle-list-btn, .toggle-headsup-btn {
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 9px;
      border-radius: var(--radius-sm);
      font-size: 12px;
      font-weight: 500;
      color: var(--text-secondary);
      transition: var(--transition);
    }
    .toggle-list-btn:hover, .toggle-headsup-btn:hover {
      background: var(--bg-hover);
      color: var(--text-primary);
    }
    .toggle-headsup-btn.active {
      background: var(--weel-amber-light);
      color: var(--weel-amber);
      font-weight: 600;
    }

    .sync-status {
      font-size: 11.5px;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .sync-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--text-muted);
      transition: background 0.3s;
    }
    .sync-dot.saving {
      background: var(--weel-amber);
      animation: pulse 1s infinite;
    }
    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.4; transform: scale(0.85); }
    }

    .editor-topbar-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .btn-ai-pill {
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 5px 12px;
      border-radius: var(--radius-sm);
      font-size: 12px;
      font-weight: 700;
      background: transparent;
      border: 1px solid var(--text-primary);
      color: var(--text-primary);
      transition: var(--transition);
    }
    .btn-ai-pill:hover {
      background: var(--text-primary);
      color: var(--bg-app);
    }
    .btn-ai-pill svg {
      color: var(--weel-amber);
    }

    .btn-action-icon {
      padding: 6px 8px;
      border-radius: var(--radius-sm);
      color: var(--text-secondary);
      transition: var(--transition);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .btn-action-icon:hover {
      background: var(--bg-hover);
      color: var(--text-primary);
    }

    /* Editor Document Area */
    .editor-scroll-area {
      flex: 1;
      overflow-y: auto;
      padding: 40px 48px 160px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .editor-content-wrapper {
      width: 100%;
      max-width: 720px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .editor-meta-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 4px;
    }

    .editor-tags-list {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }
    .editor-tag-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: var(--bg-sidebar);
      border: 1px solid var(--border-subtle);
      color: var(--text-secondary);
      font-size: 11px;
      font-weight: 500;
      padding: 3px 8px;
      border-radius: var(--radius-sm);
    }
    .editor-tag-badge button {
      color: var(--text-muted);
      font-size: 12px;
      padding: 0 2px;
      line-height: 1;
    }
    .editor-tag-badge button:hover {
      color: #ef4444;
    }

    .add-tag-btn {
      font-size: 11px;
      color: var(--text-muted);
      padding: 3px 8px;
      border-radius: var(--radius-sm);
      border: 1px dashed var(--border-medium);
      display: flex;
      align-items: center;
      gap: 4px;
      transition: var(--transition);
    }
    .add-tag-btn:hover {
      border-color: var(--text-secondary);
      color: var(--text-primary);
    }

    .editor-title-input {
      display: block;
      resize: none;
      overflow: hidden;
      background: transparent;
      font-family: inherit;
      font-size: 36px;
      font-weight: 800;
      line-height: 1.1;
      color: var(--text-primary);
      width: 100%;
      letter-spacing: -0.04em;
      padding: 4px 0;
    }
    .editor-title-input::placeholder {
      color: var(--text-disabled);
    }

    .editor-canvas {
      min-height: 400px;
      width: 100%;
      font-size: 16px;
      line-height: 1.75;
      color: var(--text-primary);
      outline: none;
      word-break: break-word;
      position: relative;
    }
    /* contenteditable ignores the placeholder attribute; .is-empty is
       toggled in notes.js so an untouched note isn't a blank void. */
    .editor-canvas.is-empty::before {
      content: attr(placeholder);
      position: absolute;
      top: 0;
      left: 0;
      color: var(--text-disabled);
      pointer-events: none;
      font-size: 16px;
      line-height: 1.75;
    }

    .editor-canvas p {
      margin-bottom: 14px;
    }
    .editor-canvas h1 {
      font-size: 26px;
      font-weight: 700;
      margin: 28px 0 12px;
      letter-spacing: -0.02em;
    }
    .editor-canvas h2 {
      font-size: 21px;
      font-weight: 600;
      margin: 24px 0 10px;
      letter-spacing: -0.015em;
    }
    .editor-canvas h3 {
      font-size: 18px;
      font-weight: 600;
      margin: 18px 0 8px;
    }
    .editor-canvas ul, .editor-canvas ol {
      padding-left: 24px;
      margin-bottom: 14px;
    }
    .editor-canvas li {
      margin-bottom: 6px;
    }
    .editor-canvas blockquote {
      border-left: 3px solid var(--weel-amber);
      padding: 4px 0 4px 16px;
      margin: 16px 0;
      color: var(--text-secondary);
      font-style: italic;
    }
    .editor-canvas pre {
      background: var(--bg-sidebar);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      padding: 14px 16px;
      font-family: var(--font-mono);
      font-size: 13.5px;
      overflow-x: auto;
      margin: 18px 0;
    }
    .editor-canvas hr {
      border: 0;
      border-top: 1px solid var(--border-subtle);
      margin: 28px 0;
    }

    /* Interactive Task List */
    .editor-canvas .task-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin: 8px 0;
      list-style: none;
    }
    .editor-canvas .task-checkbox {
      margin-top: 4px;
      width: 16px;
      height: 16px;
      accent-color: var(--weel-amber);
      cursor: pointer;
    }
    .editor-canvas .task-done {
      text-decoration: line-through;
      color: var(--text-muted);
    }

    /* -------------------------------------------------------------
       Right Sidebar: The "Heads Up" Context & Copilot Panel
       ------------------------------------------------------------- */
    .headsup-sidebar {
      width: var(--headsup-width);
      min-width: var(--headsup-width);
      background: var(--bg-sidebar);
      border-left: 1px solid var(--border-subtle);
      display: flex;
      flex-direction: column;
      height: 100%;
      z-index: 15;
      transition: width 0.25s ease, margin-right 0.25s ease;
    }
    .headsup-sidebar.collapsed {
      width: 0;
      min-width: 0;
      overflow: hidden;
      border-left: none;
    }

    .headsup-header {
      padding: 14px 16px;
      border-bottom: 1px solid var(--border-subtle);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .headsup-title-badge {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: var(--text-primary);
    }
    .headsup-sparkle-icon {
      color: var(--weel-amber);
    }

    .headsup-tabs {
      display: flex;
      border-bottom: 1px solid var(--border-subtle);
      padding: 0 10px;
      background: var(--bg-sidebar);
    }
    .headsup-tab {
      flex: 1;
      text-align: center;
      padding: 10px 6px;
      font-size: 12px;
      font-weight: 500;
      color: var(--text-muted);
      border-bottom: 2px solid transparent;
      transition: var(--transition);
    }
    .headsup-tab:hover {
      color: var(--text-primary);
    }
    .headsup-tab.active {
      color: var(--text-primary);
      font-weight: 600;
      border-bottom-color: var(--weel-amber);
    }

    .headsup-body {
      flex: 1;
      overflow-y: auto;
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    /* Heads Up Tab: Similar Notes */
    .headsup-section-heading {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--accent-text);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .similar-notes-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .similar-note-card {
      background: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      padding: 12px;
      cursor: pointer;
      transition: var(--transition);
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .similar-note-card:hover {
      border-color: var(--weel-amber);
      box-shadow: var(--shadow-sm);
    }

    .similar-card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
    }
    .similar-card-title {
      font-size: 12.5px;
      font-weight: 600;
      color: var(--text-primary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .match-pill {
      font-size: 10px;
      font-weight: 600;
      color: var(--accent-on-tint);
      background: var(--accent-light);
      padding: 1px 6px;
      border-radius: var(--radius-full);
      flex-shrink: 0;
    }

    .similar-card-snippet {
      font-size: 11.5px;
      color: var(--text-secondary);
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* Heads Up Tab: Weel Chat */
    .headsup-chat-container {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .chat-messages {
      flex: 1;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding-bottom: 12px;
    }

    .chat-msg {
      display: flex;
      flex-direction: column;
      gap: 4px;
      max-width: 95%;
    }
    .chat-msg.user {
      align-self: flex-end;
    }
    .chat-msg.ai {
      align-self: flex-start;
    }

    .chat-bubble {
      padding: 10px 12px;
      border-radius: var(--radius-md);
      font-size: 12.5px;
      line-height: 1.5;
    }
    .chat-msg.user .chat-bubble {
      background: var(--text-primary);
      color: var(--bg-app);
      border-bottom-right-radius: 2px;
    }
    .chat-msg.ai .chat-bubble {
      background: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      color: var(--text-primary);
      border-bottom-left-radius: 2px;
      box-shadow: var(--shadow-sm);
    }

    .chat-input-row {
      display: flex;
      align-items: center;
      gap: 6px;
      background: var(--bg-surface);
      border: 1px solid var(--border-medium);
      border-radius: var(--radius-md);
      padding: 6px 10px;
      margin-top: auto;
    }
    .chat-input-row:focus-within {
      border-color: var(--weel-amber);
    }
    .chat-input-row input {
      flex: 1;
      font-size: 12.5px;
    }
    .chat-send-btn {
      color: var(--weel-amber);
      padding: 4px;
      display: flex;
    }

    /* Heads Up Tab: Actions & Insights */
    .ai-actions-grid {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .ai-action-card {
      background: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      padding: 10px 12px;
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      transition: var(--transition);
      text-align: left;
    }
    .ai-action-card:hover {
      border-color: var(--weel-amber);
      background: var(--bg-hover);
    }
    .ai-action-icon {
      width: 28px;
      height: 28px;
      border-radius: var(--radius-sm);
      background: var(--weel-amber-light);
      color: var(--weel-amber);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .ai-action-text {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .ai-action-title {
      font-size: 12.5px;
      font-weight: 600;
      color: var(--text-primary);
    }
    .ai-action-desc {
      font-size: 11px;
      color: var(--text-muted);
    }

    /* -------------------------------------------------------------
       Floating Contextual Formatting Bar
       ------------------------------------------------------------- */
    #floating-toolbar {
      position: fixed;
      display: none;
      background: var(--bg-surface-elevated);
      border: 1px solid var(--border-medium);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-md);
      padding: 4px;
      gap: 2px;
      z-index: 100;
      align-items: center;
    }
    .toolbar-btn {
      padding: 5px 8px;
      border-radius: var(--radius-sm);
      font-size: 12px;
      font-weight: 600;
      color: var(--text-secondary);
      transition: var(--transition);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .toolbar-btn:hover {
      background: var(--bg-hover);
      color: var(--text-primary);
    }
    .toolbar-divider {
      width: 1px;
      height: 16px;
      background: var(--border-subtle);
      margin: 0 4px;
    }

    /* -------------------------------------------------------------
       Slash Commands Menu Dropdown
       ------------------------------------------------------------- */
    #slash-menu {
      position: fixed;
      display: none;
      background: var(--bg-surface-elevated);
      border: 1px solid var(--border-medium);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-lg);
      width: 240px;
      max-height: 320px;
      overflow-y: auto;
      padding: 6px;
      z-index: 1000;
      flex-direction: column;
      gap: 2px;
    }
    .slash-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: var(--transition);
    }
    .slash-item:hover, .slash-item.selected {
      background: var(--bg-hover);
    }
    .slash-item-icon {
      width: 24px;
      height: 24px;
      border-radius: var(--radius-sm);
      background: var(--bg-sidebar);
      border: 1px solid var(--border-subtle);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
      color: var(--text-secondary);
    }
    .slash-item-text {
      display: flex;
      flex-direction: column;
    }
    .slash-item-title {
      font-size: 12.5px;
      font-weight: 600;
      color: var(--text-primary);
    }
    .slash-item-desc {
      font-size: 10.5px;
      color: var(--text-muted);
    }

    /* -------------------------------------------------------------
       Spotlight Search Modal (⌘K)
       ------------------------------------------------------------- */
    .modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(4px);
      display: none;
      align-items: flex-start;
      justify-content: center;
      padding: 14vh 16px 16px;
      z-index: 2000;
    }
    .modal-backdrop.open {
      display: flex;
    }

    .spotlight-modal {
      width: 100%;
      max-width: 620px;
      background: var(--bg-surface-elevated);
      border: 1px solid var(--border-medium);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-spotlight);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      animation: modalPop 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    }
    @keyframes modalPop {
      from { opacity: 0; transform: scale(0.96) translateY(-8px); }
      to { opacity: 1; transform: scale(1) translateY(0); }
    }

    .spotlight-input-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px 20px;
      border-bottom: 1px solid var(--border-subtle);
    }
    .spotlight-input-row svg {
      width: 18px;
      height: 18px;
      color: var(--weel-amber);
      flex-shrink: 0;
    }
    .spotlight-input-row input {
      flex: 1;
      font-size: 15px;
      color: var(--text-primary);
    }

    .spotlight-results {
      max-height: 380px;
      overflow-y: auto;
      padding: 8px;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .spotlight-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      border-radius: var(--radius-md);
      cursor: pointer;
      transition: var(--transition);
    }
    .spotlight-item:hover, .spotlight-item.active {
      background: var(--bg-hover);
    }
    .spotlight-item-icon {
      color: var(--text-muted);
    }
    .spotlight-item-content {
      flex: 1;
      min-width: 0;
    }
    .spotlight-item-title {
      font-size: 13.5px;
      font-weight: 600;
      color: var(--text-primary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .spotlight-item-sub {
      font-size: 11.5px;
      color: var(--text-muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .spotlight-footer {
      padding: 10px 20px;
      background: var(--bg-sidebar);
      border-top: 1px solid var(--border-subtle);
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 11.5px;
      color: var(--text-muted);
    }
    .spotlight-footer kbd {
      background: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-sm);
      padding: 2px 5px;
      font-family: var(--font-mono);
      font-size: 10px;
    }

    /* -------------------------------------------------------------
       Full Tasks & Full Chat Overlay Views
       ------------------------------------------------------------- */
    .view-overlay-pane {
      display: none;
      position: absolute;
      inset: 0;
      background: var(--bg-app);
      z-index: 12;
      flex-direction: column;
      padding: 36px 48px;
      overflow-y: auto;
    }
    .view-overlay-pane.active {
      display: flex;
    }

    .view-overlay-header {
      max-width: 780px;
      width: 100%;
      margin: 0 auto 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .view-overlay-title {
      font-size: 30px;
      font-weight: 800;
      letter-spacing: -0.03em;
    }

    .task-container-box {
      max-width: 780px;
      width: 100%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }
    .task-group-card {
      background: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-lg);
      padding: 18px 20px;
      box-shadow: var(--shadow-sm);
    }
    .task-group-title {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 12px;
      color: var(--text-secondary);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    /* -------------------------------------------------------------
       Calendar View (rolling daily agenda)
       ------------------------------------------------------------- */
    .calendar-header-left { display: flex; align-items: center; gap: 14px; }
    .calendar-add-btn {
      width: 36px;
      height: 36px;
      border-radius: var(--radius-sm);
      border: none;
      background: var(--accent);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: var(--transition);
    }
    .calendar-add-btn:hover { filter: brightness(0.92); }
    .calendar-today-btn {
      border: none;
      background: transparent;
      font-size: 13px;
      font-weight: 500;
      color: var(--text-muted);
      padding: 6px 10px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: var(--transition);
    }
    .calendar-today-btn:hover { background: var(--bg-hover); color: var(--text-primary); }

    .calendar-box {
      max-width: 780px;
      width: 100%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
    }
    .calendar-range-btn {
      align-self: flex-start;
      border: none;
      background: transparent;
      font-size: 14px;
      font-weight: 500;
      color: var(--text-muted);
      padding: 6px 8px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: var(--transition);
    }
    .calendar-range-btn:hover { color: var(--text-primary); background: var(--bg-hover); }
    #calendarMoreBtn { margin-top: 8px; }

    .cal-day {
      display: flex;
      align-items: stretch;
      gap: 20px;
      padding: 10px;
      margin: 4px 0;
      border-radius: var(--radius-lg);
      border: 1px solid transparent;
    }
    .cal-day.today {
      background: var(--bg-surface);
      border-color: var(--border-subtle);
      box-shadow: var(--shadow-sm);
      margin: 14px 0;
    }

    .cal-date-pill {
      flex: 0 0 150px;
      min-height: 0;
      padding: 12px 16px;
      border-radius: var(--radius-lg);
      background: var(--bg-hover);
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .cal-day.today .cal-date-pill { background: var(--weel-amber-light); }
    .cal-date-main { font-size: 16px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
    .cal-date-rel { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-top: 2px; }
    .cal-day.today .cal-date-rel { color: var(--accent-on-tint); }
    .cal-date-weekday { font-size: 16px; color: var(--text-muted); }

    .cal-day-body {
      flex: 1;
      min-width: 0;
      padding: 6px 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .cal-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: auto;
      opacity: 0;
      transition: opacity 0.15s ease;
    }
    .cal-day:hover .cal-actions,
    .cal-day:focus-within .cal-actions,
    .cal-day.today .cal-actions,
    .cal-day.has-input .cal-actions { opacity: 1; }
    .cal-action-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border: 1px solid var(--border-medium);
      border-radius: var(--radius-sm);
      background: var(--bg-surface);
      color: var(--text-secondary);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: var(--transition);
    }
    .cal-action-btn { white-space: nowrap; }
    .cal-action-btn:hover { color: var(--text-primary); border-color: var(--text-primary); }
    .cal-action-btn svg { flex-shrink: 0; }

    .cal-note-card {
      background: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-sm);
      padding: 14px 16px;
      cursor: pointer;
      transition: var(--transition);
    }
    .cal-day.today .cal-note-card { background: var(--bg-app); }
    .cal-note-card:hover { border-color: var(--weel-amber); }
    .cal-note-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
    .cal-note-snippet {
      font-size: 13px;
      color: var(--text-secondary);
      line-height: 1.5;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .cal-note-snippet.empty { color: var(--text-muted); font-style: italic; }
    .cal-task-list { list-style: none; margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
    .cal-task-list .task-item { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; }
    .cal-task-list .task-checkbox { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--weel-amber); cursor: pointer; }
    .cal-task-list .task-done { text-decoration: line-through; color: var(--text-muted); }

    .cal-task-input-row {
      display: flex;
      align-items: center;
      gap: 10px;
      background: var(--bg-surface);
      border: 1px solid var(--weel-amber);
      border-radius: var(--radius-sm);
      padding: 8px 12px;
      color: var(--text-muted);
    }
    .cal-task-input-row input {
      flex: 1;
      background: transparent;
      border: none;
      outline: none;
      font-size: 14px;
      font-family: inherit;
      color: var(--text-primary);
    }
    .cal-task-hint { font-size: 11px; font-family: var(--font-mono); color: var(--text-muted); white-space: nowrap; }

    /* Toast Notification */
    #toast {
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%) translateY(100px);
      background: var(--text-primary);
      color: var(--bg-app);
      padding: 9px 18px;
      border-radius: var(--radius-sm);
      font-size: 13px;
      font-weight: 600;
      box-shadow: var(--shadow-lg);
      z-index: 9999;
      transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
      opacity: 0;
      pointer-events: none;
    }
    #toast.show {
      transform: translateX(-50%) translateY(0);
      opacity: 1;
      /* Without this, the Undo / Connect buttons in toasts couldn't be clicked. */
      pointer-events: auto;
    }

    /* Dimmer behind off-canvas panes on small screens. Tapping it closes
       whatever is open, so a pane can never trap the user. */
    .pane-scrim {
      position: fixed;
      inset: 0;
      display: none;
      background: rgba(0, 0, 0, 0.42);
      z-index: 18;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
    }

    /* -------------------------------------------------------------
       Responsive
       -------------------------------------------------------------
       Below 1024px the Heads Up panel slides over the content instead of
       competing for width; below 768px the layout becomes editor-first,
       with the nav, note list and Heads Up panel all off-canvas. Before
       this, a 375px screen gave the editor 0px and the app was unusable.
       ------------------------------------------------------------- */
    @media (max-width: 1024px) {
      .headsup-sidebar {
        position: fixed;
        right: 0;
        top: 0;
        bottom: 0;
        width: min(var(--headsup-width), 88vw);
        min-width: 0;
        box-shadow: var(--shadow-lg);
        transition: transform 0.25s ease;
      }
      .headsup-sidebar.collapsed {
        width: min(var(--headsup-width), 88vw);
        min-width: 0;
        overflow: hidden;
        border-left: 1px solid var(--border-subtle);
        transform: translateX(100%);
      }
      .pane-scrim { display: block; }
      body.pane-open .pane-scrim { opacity: 1; pointer-events: auto; }
    }

    @media (max-width: 768px) {
      .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: min(var(--sidebar-width), 82vw);
        min-width: 0;
        box-shadow: var(--shadow-lg);
        transition: transform 0.25s ease;
      }
      .sidebar.collapsed {
        margin-left: 0;
        transform: translateX(-100%);
      }

      .notes-list-pane {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 19;
        width: min(340px, 86vw);
        min-width: 0;
        box-shadow: var(--shadow-lg);
        transition: transform 0.25s ease;
      }
      .notes-list-pane.collapsed {
        width: min(340px, 86vw);
        min-width: 0;
        overflow: hidden;
        border-right: 1px solid var(--border-subtle);
        transform: translateX(-100%);
      }

      /* Topbar has to survive a 375px width: icons only, no labels. */
      .editor-topbar { padding: 0 10px; }
      .editor-topbar-left { gap: 6px; }
      .editor-topbar-actions { gap: 2px; }
      /* Visually hidden rather than display:none — these labels are the
         buttons' accessible names, and removing them would leave a row of
         unlabelled icons for screen-reader users. */
      .toggle-list-btn span, .toggle-headsup-btn span, .btn-ai-pill span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
      }
      #wordCountLabel, .sync-status span:last-child { display: none; }
      .editor-scroll-area { padding: 24px 20px 120px; }
      .editor-title-input { font-size: 28px; }
      .editor-canvas.is-empty::before { font-size: 16px; }

      .view-overlay-pane { padding: 24px 20px 64px; }
      .view-overlay-title { font-size: 24px; }

      /* Calendar: the date rail stacks above the day instead of eating
         half the width. */
      .cal-day { flex-direction: column; gap: 10px; padding: 12px; }
      .cal-day.today { margin: 12px 0; }
      .cal-date-pill {
        flex: none;
        width: 100%;
        min-height: 0;
        padding: 12px 14px;
        flex-direction: row;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 4px 10px;
      }
      .cal-date-main { font-size: 17px; }
      .cal-date-rel { font-size: 15px; margin-top: 0; }
      .cal-date-weekday { font-size: 13px; }
      .cal-day-body { padding: 0; }
      .cal-task-hint { display: none; }
    }

    /* Touch screens have no hover, so hover-gated calendar actions would
       be permanently invisible there. */
    @media (hover: none) {
      .cal-actions { opacity: 1; }
    }

    @media (max-width: 560px) {
      /* Marketing links collapse; the sign-in CTA is what matters. */
      .landing-nav-links a { display: none; }
      .landing-stats { gap: 26px 20px; padding: 40px 0; }
      .landing-stat-value { font-size: 32px; }
      .landing-features { padding: 56px 0 24px; }
      .landing-feature { gap: 8px 14px; padding: 26px 0; }
      .landing-feature-title { font-size: 20px; }
      .landing-quote { padding: 40px 0 64px; }
      .landing-quote blockquote { font-size: 22px; }
      .landing-band .landing-inner { padding-top: 60px; padding-bottom: 60px; }
      .landing-mock { height: 220px; }
      .landing-cta-row { gap: 16px; }
      .landing-btn { width: 100%; }
      .landing-nav .landing-btn { width: auto; }
    }

    /* -------------------------------------------------------------
       Claude API Key Modal
       ------------------------------------------------------------- */
    .api-key-desc {
      font-size: 13px;
      color: var(--text-secondary);
      line-height: 1.5;
      padding: 16px 20px 0;
    }

    .api-key-account-line {
      font-size: 12px;
      color: var(--accent-text);
      font-weight: 500;
      padding: 8px 20px 0;
    }

    .api-key-connected { padding: 16px 20px 0; display: none; }
    .api-key-connected.show { display: block; }
    .api-key-connected-banner {
      display: flex;
      align-items: center;
      gap: 10px;
      background: var(--bg-hover);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      padding: 10px 12px;
    }
    .api-key-connected-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--accent);
      flex-shrink: 0;
    }
    .api-key-connected-text {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .api-key-connected-text strong { font-size: 12.5px; }
    .api-key-model { font-size: 11px; color: var(--text-muted); }
    .api-key-disconnect-btn {
      font-size: 11.5px;
      font-weight: 600;
      color: var(--text-muted);
      padding: 5px 10px;
      border-radius: var(--radius-sm);
      transition: var(--transition);
    }
    .api-key-disconnect-btn:hover {
      color: #ef4444;
      background: var(--bg-surface);
    }

    .api-key-form { padding: 16px 20px 0; }
    .api-key-form.hide { display: none; }
    .api-key-label {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-muted);
      display: block;
      margin-bottom: 6px;
    }
    .api-key-input-row { display: flex; gap: 8px; }
    .api-key-input {
      flex: 1;
      padding: 8px 10px;
      font-size: 13px;
      background: var(--bg-sidebar);
      border: 1px solid var(--border-medium);
      border-radius: var(--radius-sm);
      color: var(--text-primary);
    }
    .api-key-input:focus { border-color: var(--weel-amber); }
    .api-key-connect-btn {
      padding: 8px 14px;
      border-radius: var(--radius-sm);
      font-size: 12.5px;
      font-weight: 600;
      background: var(--accent);
      color: #fff;
      transition: var(--transition);
    }
    .api-key-connect-btn:hover { filter: brightness(0.92); }
    .api-key-connect-btn:disabled { opacity: 0.35; cursor: default; }
    .api-key-error {
      font-size: 11.5px;
      color: #ef4444;
      margin-top: 8px;
      display: none;
    }
    .api-key-hint {
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 10px;
      line-height: 1.5;
    }
    .api-key-hint a { color: var(--accent-text); text-decoration: underline; }
    .api-key-persist-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 12px;
      font-size: 11.5px;
      color: var(--text-secondary);
      cursor: pointer;
    }
    .api-key-persist-row input { accent-color: var(--weel-amber); }

    .api-key-features {
      padding: 16px 20px 20px;
      border-top: 1px solid var(--border-subtle);
      margin-top: 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .api-key-feature {
      font-size: 11.5px;
      color: var(--text-secondary);
      line-height: 1.5;
    }
    .api-key-feature strong {
      display: block;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-primary);
      margin-bottom: 2px;
    }

    .api-key-status-dot {
      display: none;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent);
      margin-left: 2px;
      vertical-align: top;
    }
    .footer-btn.api-key-active { color: var(--weel-amber); }
    .footer-btn.api-key-active .api-key-status-dot { display: inline-block; }

    /* Simple typing indicator + chat-bubble list styling for Claude replies */
    .cursor-typing { opacity: 0.6; font-style: italic; }
    .chat-bubble ul { padding-left: 18px; margin: 4px 0; }
    .chat-bubble li { margin-bottom: 3px; }

    /* -------------------------------------------------------------
       Auth Wall (Clerk sign-in gate)
       ------------------------------------------------------------- */
    .auth-wall {
      position: fixed;
      inset: 0;
      z-index: 5000;
      background: var(--bg-app);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }
    .auth-wall.hidden { display: none; }
    .auth-wall-card {
      width: 100%;
      max-width: 420px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 18px;
    }
    .auth-wall-brand {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .auth-wall-title {
      font-size: 22px;
      font-weight: 800;
      letter-spacing: -0.03em;
      color: var(--text-primary);
    }
    .auth-wall-back {
      position: absolute;
      top: 22px;
      left: 40px;
      font-size: 14px;
      font-weight: 600;
      color: var(--text-secondary);
      padding: 6px 0;
    }
    .auth-wall-back:hover { color: var(--text-primary); }
    .auth-wall-back.hidden { display: none; }
    .auth-wall-sub { font-size: 12.5px; color: var(--text-muted); }
    .auth-wall-status { font-size: 12.5px; color: var(--text-muted); text-align: center; }
    .auth-wall-status.hidden { display: none; }
    .auth-wall-error { color: #ef4444; line-height: 1.5; max-width: 340px; }
    #clerkSignIn { width: 100%; display: flex; justify-content: center; }

    /* Signed-in user avatar/menu (Clerk <UserButton />) in the sidebar footer.
       Sized to match the other footer-btn icon buttons (28px box) so the
       avatar, theme toggle, and help button line up and sit evenly spaced. */
    #clerkUserButton { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; }

    /* Flat, bright fallback avatar (used when the account has no photo)
       instead of Clerk's default gradient circle — keeps the same person
       icon, just recolored to match Weel's palette. */
    .weel-user-avatar {
      width: 28px !important;
      height: 28px !important;
      background: var(--weel-amber-light) !important;
      background-image: none !important;
      color: var(--weel-amber) !important;
    }

    /* -------------------------------------------------------------
       Landing page (shown before sign-in)
       ------------------------------------------------------------- */
    .landing {
      position: fixed;
      inset: 0;
      z-index: 4900;
      background: var(--bg-app);
      color: var(--text-primary);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    .landing.hidden { display: none; }
    .landing-inner { max-width: 1080px; margin: 0 auto; padding: 0 40px; }

    .landing-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 22px 0;
    }
    .landing-wordmark {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      font-size: 20px;
      font-weight: 800;
      letter-spacing: -0.03em;
      color: var(--text-primary);
      text-decoration: none;
    }
    .landing-nav-links { display: flex; align-items: center; gap: 22px; }
    .landing-nav-links a { font-size: 14px; font-weight: 500; color: var(--text-secondary); text-decoration: none; }
    .landing-nav-links a:hover { color: var(--text-primary); }

    .landing-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 10px 18px;
      font-size: 14px;
      font-weight: 700;
      border-radius: var(--radius-sm);
      border: 1px solid transparent;
      cursor: pointer;
      transition: var(--transition);
      text-decoration: none;
    }
    .landing-btn-primary { background: var(--accent); color: #fff; }
    .landing-btn-primary:hover { filter: brightness(0.92); }
    .landing-btn-outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.85); }
    .landing-btn-outline:hover { background: #fff; color: var(--accent); }
    .landing-link { font-size: 14px; font-weight: 700; color: var(--accent-text); text-decoration: none; }
    .landing-link:hover { text-decoration: underline; }

    .landing-hero { padding: 110px 0 80px; max-width: 760px; }
    .landing-h1 {
      font-size: clamp(40px, 6vw, 68px);
      font-weight: 800;
      line-height: 1.02;
      letter-spacing: -0.045em;
      margin-bottom: 30px;
    }
    .landing-lead {
      font-size: 18px;
      line-height: 1.55;
      color: var(--text-secondary);
      max-width: 640px;
      margin-bottom: 36px;
    }
    .landing-cta-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

    .landing-rule { border: 0; border-top: 1px solid var(--border-medium); margin: 0; }

    .landing-stats {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
      padding: 56px 0;
    }
    .landing-stat {
      padding: 22px 22px 24px;
      border: 1px solid var(--border-medium);
      border-radius: var(--radius-lg);
    }
    .landing-stat-value {
      font-size: 40px;
      font-weight: 800;
      color: var(--accent-text);
      letter-spacing: -0.03em;
      line-height: 1;
      margin-bottom: 12px;
    }
    .landing-stat-label {
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-secondary);
      max-width: 220px;
      line-height: 1.4;
    }

    .landing-eyebrow {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--accent-text);
    }

    .landing-features { padding: 80px 0 40px; }
    .landing-features .landing-eyebrow { margin-bottom: 40px; }
    .landing-feature {
      display: grid;
      grid-template-columns: 120px 1fr 1fr;
      gap: 32px;
      padding: 36px 0;
      border-top: 1px solid var(--border-medium);
    }
    .landing-feature:last-child { border-bottom: 1px solid var(--border-medium); }
    .landing-feature-num { font-size: 14px; font-weight: 700; letter-spacing: 0.06em; padding-top: 6px; }
    .landing-feature-title { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
    .landing-feature-desc { font-size: 15px; line-height: 1.65; color: var(--text-secondary); }

    .landing-workspace {
      display: grid;
      grid-template-columns: 1fr 1.1fr;
      gap: 56px;
      align-items: center;
      padding: 110px 0;
    }
    .landing-h2 {
      font-size: 34px;
      font-weight: 800;
      letter-spacing: -0.035em;
      line-height: 1.1;
      margin: 14px 0 16px;
    }
    .landing-workspace p { font-size: 15px; line-height: 1.65; color: var(--text-secondary); }

    /* CSS-drawn miniature of the three-pane workspace */
    .landing-mock {
      border: 1px solid var(--border-medium);
      background: var(--bg-surface);
      display: grid;
      grid-template-columns: 26% 1fr 30%;
      height: 300px;
      overflow: hidden;
      font-size: 10px;
    }
    .landing-mock > div { padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
    .landing-mock-side { background: var(--bg-app); border-right: 1px solid var(--border-subtle); }
    .landing-mock-heads { border-left: 1px solid var(--border-subtle); }
    .landing-mock-label {
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--accent-text);
    }
    .landing-mock-brand { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 11px; }
    .landing-mock-btn { background: var(--accent); color: #fff; font-weight: 700; padding: 6px 8px; }
    .landing-mock-line { height: 7px; background: var(--border-subtle); }
    .landing-mock-line.short { width: 60%; }
    .landing-mock-line.dark { background: var(--text-primary); height: 12px; width: 75%; }
    .landing-mock-card {
      border: 1px solid var(--border-subtle);
      padding: 8px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      background: var(--bg-surface-elevated);
    }
    .landing-mock-card b { font-size: 10px; }
    .landing-mock-tag {
      align-self: flex-start;
      color: var(--accent-on-tint);
      background: var(--accent-light);
      padding: 1px 5px;
      font-weight: 700;
      font-size: 9px;
    }

    .landing-quote { padding: 60px 0 90px; max-width: 700px; }
    .landing-quote blockquote {
      font-size: 30px;
      font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1.25;
      margin-bottom: 22px;
    }
    .landing-quote-by { font-size: 14px; color: var(--text-secondary); }

    .landing-band { background: var(--accent); color: #fff; }
    .landing-band .landing-inner { padding-top: 90px; padding-bottom: 90px; }
    .landing-band h2 {
      font-size: clamp(36px, 5vw, 56px);
      font-weight: 800;
      letter-spacing: -0.04em;
      line-height: 1.02;
      margin-bottom: 34px;
    }

    .landing-footer { padding: 34px 0 48px; font-size: 13px; color: var(--text-secondary); }

    @media (max-width: 860px) {
      .landing-inner { padding: 0 20px; }
      .landing-hero { padding: 64px 0 48px; }
      .landing-feature { grid-template-columns: 48px 1fr; }
      .landing-feature-desc { grid-column: 2; }
      .landing-workspace { grid-template-columns: 1fr; gap: 32px; padding: 64px 0; }
      .auth-wall-back { left: 20px; }
    }

    /* -------------------------------------------------------------
       Audit pass: keyboard-operable cards, empty states, inline tag
       entry, confirm dialog, and busy states for AI actions.
       ------------------------------------------------------------- */

    /* Note cards are real <button>s now, so undo the UA button styling. */
    .note-card {
      width: 100%;
      text-align: left;
      font: inherit;
      color: inherit;
      appearance: none;
    }
    .note-card-title-row,
    .note-card-footer { width: 100%; }

    /* Empty states */
    .feed-empty {
      padding: 40px 20px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }
    .feed-empty-title { font-size: 14px; font-weight: 700; color: var(--text-primary); }
    .feed-empty-sub { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; max-width: 240px; }
    .feed-empty-action {
      margin-top: 10px;
      font-size: 12.5px;
      font-weight: 600;
      color: var(--accent-text);
      padding: 7px 12px;
      border: 1px solid var(--border-medium);
      border-radius: var(--radius-sm);
      transition: var(--transition);
    }
    .feed-empty-action:hover { border-color: var(--accent); background: var(--bg-hover); }

    .nav-empty-hint {
      font-size: 11.5px;
      color: var(--text-muted);
      line-height: 1.5;
      padding: 4px 10px 8px;
    }

    .headsup-empty {
      font-size: 12px;
      color: var(--text-muted);
      line-height: 1.55;
      text-align: center;
      padding: 28px 12px;
    }

    /* Inline tag entry (replaces window.prompt) */
    .tag-input {
      font-size: 11px;
      font-family: inherit;
      color: var(--text-primary);
      background: var(--bg-surface);
      border: 1px solid var(--accent);
      border-radius: var(--radius-sm);
      padding: 3px 8px;
      width: 120px;
      outline: none;
    }

    /* Confirm dialog (replaces window.confirm) */
    .confirm-modal {
      width: 100%;
      max-width: 420px;
      background: var(--bg-surface-elevated);
      border: 1px solid var(--border-medium);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-spotlight);
      padding: 22px 22px 18px;
      animation: modalPop 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .confirm-title {
      font-size: 17px;
      font-weight: 800;
      letter-spacing: -0.02em;
      margin-bottom: 8px;
    }
    .confirm-message {
      font-size: 13px;
      line-height: 1.55;
      color: var(--text-secondary);
    }
    .confirm-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 20px;
    }
    .confirm-btn {
      font-size: 13px;
      font-weight: 600;
      padding: 9px 14px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border-medium);
      color: var(--text-primary);
      transition: var(--transition);
    }
    .confirm-btn:hover { background: var(--bg-hover); }
    .confirm-ok {
      background: var(--text-primary);
      color: var(--bg-app);
      border-color: var(--text-primary);
    }
    .confirm-ok:hover { opacity: 0.9; background: var(--text-primary); }
    .confirm-ok.is-destructive {
      background: #c0261a;
      border-color: #c0261a;
      color: #fff;
    }
    .confirm-ok.is-destructive:hover { background: #a61f15; border-color: #a61f15; opacity: 1; }

    /* Busy state for the AI action cards and pill */
    .ai-action-card[aria-busy="true"],
    .btn-ai-pill[aria-busy="true"] {
      opacity: 0.6;
      pointer-events: none;
    }
    .ai-action-card[aria-busy="true"] .ai-action-icon { animation: weelPulse 1s ease-in-out infinite; }
    @keyframes weelPulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.35; }
    }

    /* Chat typing indicator */
    .cursor-typing::after {
      content: '';
      display: inline-block;
      width: 1ch;
      animation: weelDots 1.2s steps(4, end) infinite;
    }
    @keyframes weelDots {
      0% { content: ''; }
      25% { content: '.'; }
      50% { content: '..'; }
      75% { content: '...'; }
    }

    /* Spotlight empty state */
    .spotlight-empty {
      padding: 28px 20px;
      text-align: center;
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.5;
    }

    /* The editor is the base layer on phones; give the title room to
       breathe once the panes are off-canvas. */
    @media (max-width: 480px) {
      .editor-content-wrapper { gap: 12px; }
      .confirm-modal { padding: 18px 16px 14px; }
      .confirm-actions { flex-direction: column-reverse; }
      .confirm-btn { width: 100%; }
    }

    /* Toast can carry one action (e.g. Undo after an AI rewrite). */
    #toast {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      max-width: min(520px, calc(100vw - 32px));
    }
    .toast-action {
      font-size: 12.5px;
      font-weight: 700;
      color: var(--bg-app);
      text-decoration: underline;
      text-underline-offset: 2px;
      padding: 2px 0;
      flex-shrink: 0;
    }
    .toast-action:hover { opacity: 0.75; }

    /* Save indicator failure state */
    .sync-dot.sync-error { background: #c0261a; }

    /* Similar-note cards are <button>s now (keyboard reachable). */
    .similar-note-card {
      width: 100%;
      text-align: left;
      font: inherit;
      color: inherit;
      appearance: none;
    }
    .similar-card-top, .similar-card-snippet { width: 100%; }

    /* Chat: secondary note + error text inside a bubble */
    .chat-note {
      margin-top: 8px;
      font-size: 11.5px;
      color: var(--text-muted);
      line-height: 1.5;
    }
    .chat-error { color: #c0261a; }
    [data-theme="dark"] .chat-error { color: #ff8a70; }
    .chat-bubble p + p { margin-top: 6px; }

    /* Shortcuts modal (markup moved off inline styles) */
    .modal-heading { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
    .shortcut-list { padding: 14px 20px 20px; display: flex; flex-direction: column; gap: 2px; }
    .shortcut-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 8px 0;
      font-size: 13px;
      border-bottom: 1px solid var(--border-subtle);
    }
    .shortcut-row:last-child { border-bottom: 0; }
    .shortcut-row dt { color: var(--text-secondary); }
    .shortcut-row dd { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
    .shortcut-row dd span { color: var(--text-disabled); font-size: 11px; }
    .shortcut-row kbd {
      background: var(--bg-sidebar);
      border: 1px solid var(--border-medium);
      border-radius: var(--radius-sm);
      padding: 2px 7px;
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--text-primary);
      white-space: nowrap;
    }

    /* Tasks overlay: note title is a button now */
    .task-group-link {
      font: inherit;
      font-weight: 700;
      color: var(--text-primary);
      text-align: left;
      padding: 0;
    }
    .task-group-link:hover { color: var(--accent-text); text-decoration: underline; }
    .task-group-card .task-list { list-style: none; display: flex; flex-direction: column; gap: 7px; }
    .task-group-card .task-item { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; }
    .task-group-card .task-checkbox { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
    .task-group-card .task-done { text-decoration: line-through; color: var(--text-muted); }

    /* De-inlined from main-stage.html so these follow the CSS cascade
       (and the responsive overrides above can actually reach them —
       inline styles have higher specificity than any class rule). */
    .word-count-label { font-size: 11px; color: var(--text-muted); margin-left: 4px; white-space: nowrap; }
    .chat-overlay-sub { font-size: 13px; color: var(--text-muted); }
    .full-chat-box {
      flex: 1;
      min-height: 320px;
      max-width: 780px;
      width: 100%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      background: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-lg);
      padding: 20px;
    }
    .full-chat-box .chat-messages { flex: 1; }
    .full-chat-box .chat-input-row { margin-top: 16px; }
    @media (max-width: 768px) {
      .full-chat-box { padding: 12px; min-height: 0; }
    }

    /* Undo / Redo controls for AI edits, next to Clean Up */
    .ai-history-controls {
      display: flex;
      align-items: center;
      gap: 2px;
      padding-left: 4px;
      margin-left: 2px;
      border-left: 1px solid var(--border-subtle);
    }
    .ai-history-controls .btn-action-icon:disabled {
      opacity: 0.35;
      cursor: default;
    }
    .ai-history-controls .btn-action-icon:disabled:hover {
      background: none;
    }
    @media (max-width: 768px) {
      .ai-history-controls { padding-left: 2px; margin-left: 0; }
    }

    /* -------------------------------------------------------------
       Glow card — pointer-tracked spotlight border (assets/js/glow-card.js)
       Reskinned to Weel's flat, sharp-cornered, single-accent system:
       no rounded-2xl, no multi-hue rotation, no blur-heavy bloom — just a
       precise accent line and a faint backdrop tint that follow the
       cursor. Degrades to nothing (a plain bordered card) with no JS,
       no pointer, or prefers-reduced-motion.
       ------------------------------------------------------------- */
    .glow-card {
      --x: 50%;
      --y: 50%;
      position: relative;
      overflow: hidden;
      isolation: isolate;
      transition: border-color 0.2s ease;
    }
    .glow-card::before,
    .glow-card::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.25s ease;
    }
    /* Backdrop tint, sits behind the content. */
    .glow-card::before {
      z-index: -1;
      background: radial-gradient(220px circle at var(--x) var(--y), var(--accent-light), transparent 70%);
    }
    /* Accent line traced along the border, revealed only near the cursor
       via a padding-box/border-box mask — a hairline, not a glow. */
    .glow-card::after {
      background: radial-gradient(160px circle at var(--x) var(--y), var(--accent), transparent 70%);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      padding: 1px;
    }
    .glow-card:hover,
    .glow-card:focus-within { border-color: transparent; }
    .glow-card:hover::before, .glow-card:focus-within::before,
    .glow-card:hover::after, .glow-card:focus-within::after {
      opacity: 1;
    }
    @media (prefers-reduced-motion: reduce) {
      .glow-card::before, .glow-card::after { transition: none; }
    }

    /* -------------------------------------------------------------
       UX pass 2: overflow menu, responsive topbar, nav on full-page
       views, honest AI affordances, tasks filter, compact calendar,
       chat suggestions, grouped Spotlight.
       ------------------------------------------------------------- */

    /* Workspace header is informational, not a control. */
    .workspace-btn { cursor: default; }

    /* Claude status in the sidebar footer: a visible icon, plus a dot when connected. */
    .api-key-footer-btn { position: relative; }
    .api-key-footer-btn .api-key-status-dot {
      position: absolute;
      top: 4px;
      right: 3px;
      margin: 0;
      box-shadow: 0 0 0 2px var(--bg-sidebar);
    }

    /* ---- Editor topbar ------------------------------------------ */
    /* The editor column is only ~560px wide with all three panes open, so
       labels collapse based on the editor's own width, not the window's. */
    .editor-pane { container-type: inline-size; container-name: editor; }
    .editor-topbar { gap: 12px; }
    .editor-topbar-left, .editor-topbar-actions { min-width: 0; }
    .editor-topbar-actions { gap: 4px; }
    @container editor (max-width: 540px) {
      .editor-topbar { padding: 0 12px; }
      .toggle-list-btn .topbar-label,
      .toggle-headsup-btn .topbar-label,
      .btn-ai-pill .topbar-label {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
      }
      .btn-ai-pill { padding: 6px 8px; }
    }
    @container editor (max-width: 420px) {
      .word-count-label, #syncText { display: none; }
    }

    .menu-wrap { position: relative; display: flex; }
    .popover-menu {
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      min-width: 210px;
      background: var(--bg-surface-elevated);
      border: 1px solid var(--border-medium);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-lg);
      padding: 4px;
      z-index: 60;
      display: flex;
      flex-direction: column;
      animation: modalPop 0.14s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .popover-menu [role="menuitem"] {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 8px 10px;
      font-size: 13px;
      font-weight: 500;
      text-align: left;
      color: var(--text-primary);
      border-radius: var(--radius-sm);
    }
    .popover-menu [role="menuitem"] svg { color: var(--text-muted); flex-shrink: 0; }
    .popover-menu [role="menuitem"]:hover,
    .popover-menu [role="menuitem"]:focus-visible { background: var(--bg-hover); outline: none; }
    .popover-menu .is-danger, .popover-menu .is-danger svg { color: #c0261a; }
    [data-theme="dark"] .popover-menu .is-danger, [data-theme="dark"] .popover-menu .is-danger svg { color: #ff8a70; }
    .popover-sep { height: 1px; background: var(--border-subtle); margin: 4px 2px; }

    .btn-ai-pill:disabled { cursor: progress; }

    /* ---- Title & canvas ----------------------------------------- */
    .editor-title-input { min-height: 1.2em; }
    .editor-canvas code {
      font-family: var(--font-mono);
      font-size: 0.88em;
      background: var(--bg-hover);
      padding: 1px 5px;
      border-radius: var(--radius-sm);
    }
    .editor-canvas pre code { background: none; padding: 0; font-size: inherit; }
    .editor-canvas a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
    .editor-canvas .task-list { padding-left: 2px; }
    .editor-canvas .task-text { flex: 1; min-width: 0; }

    .editor-tag-badge { padding: 0; gap: 0; }
    .editor-tag-link {
      font-size: 11px;
      font-weight: 500;
      color: var(--text-secondary);
      padding: 3px 4px 3px 8px;
    }
    .editor-tag-link:hover { color: var(--accent-text); }
    .editor-tag-badge .editor-tag-remove { padding: 3px 7px 3px 3px; font-size: 13px; }
    .editor-tag-badge .editor-tag-remove:hover { color: #c0261a; }

    /* ---- Notes list --------------------------------------------- */
    .notes-header-heading { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
    .notes-header-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .notes-header-count { font-size: 12px; font-family: var(--font-mono); color: var(--text-muted); white-space: nowrap; }
    .note-card-title.is-untitled { color: var(--text-muted); font-style: italic; font-weight: 500; }
    .note-card-snippet.is-empty { color: var(--text-muted); font-style: italic; }
    .tag-chip-more { background: var(--bg-hover); color: var(--text-muted); }
    .notes-search-box input::-webkit-search-cancel-button { cursor: pointer; }
    .filter-tab-btn:hover:not(.active) { color: var(--text-primary); }

    /* ---- Heads Up ----------------------------------------------- */
    .headsup-tab-content { display: block; }
    .headsup-chat-tab { display: flex; flex-direction: column; flex: 1; min-height: 0; }
    .headsup-body:has(> .headsup-chat-tab:not([hidden])) { overflow: hidden; }
    .headsup-section-heading { margin-bottom: 10px; }
    .headsup-section-meta {
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.02em;
      text-transform: none;
      color: var(--text-muted);
    }
    .similar-card-why { display: flex; flex-wrap: wrap; gap: 4px; }
    .why-term {
      font-size: 10px;
      font-weight: 500;
      color: var(--text-secondary);
      background: var(--bg-hover);
      padding: 1px 6px;
      border-radius: var(--radius-sm);
    }
    .ai-key-banner {
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: flex-start;
      background: var(--bg-surface);
      border: 1px dashed var(--border-medium);
      border-radius: var(--radius-md);
      padding: 10px 12px;
      margin-bottom: 10px;
      font-size: 12px;
      line-height: 1.45;
      color: var(--text-secondary);
    }
    .ai-key-banner-btn {
      font-size: 12px;
      font-weight: 700;
      color: #fff;
      background: var(--accent);
      padding: 5px 10px;
      border-radius: var(--radius-sm);
    }
    .ai-key-banner-btn:hover { filter: brightness(0.92); }
    .ai-action-title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
    .ai-needs-key {
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--text-muted);
      border: 1px solid var(--border-medium);
      padding: 0 4px;
      border-radius: var(--radius-sm);
    }
    body.has-claude .ai-needs-key { display: none; }
    body:not(.has-claude) .ai-action-card[data-needs-key] .ai-action-icon { filter: grayscale(1); opacity: 0.7; }

    /* ---- Chat --------------------------------------------------- */
    .chat-suggestions { display: flex; flex-wrap: wrap; gap: 6px; }
    .chat-suggestions:not(:empty) { margin: 4px 0 10px; }
    .chat-suggestion {
      font-size: 12px;
      font-weight: 500;
      color: var(--text-secondary);
      background: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      padding: 5px 10px;
      border-radius: 999px;
      transition: var(--transition);
    }
    .chat-suggestion:hover { border-color: var(--accent); color: var(--text-primary); }
    .chat-note-link, .chat-inline-link {
      font: inherit;
      font-weight: 700;
      color: var(--accent-text);
      text-decoration: underline;
      text-underline-offset: 2px;
      padding: 0;
    }
    .chat-bubble code { font-family: var(--font-mono); font-size: 0.9em; }
    .chat-bubble ol { padding-left: 18px; margin: 4px 0; }
    .chat-send-btn:disabled { opacity: 0.4; cursor: progress; }
    .chat-msg.user .chat-bubble { white-space: pre-wrap; }

    /* ---- Full-page views ---------------------------------------- */
    .view-overlay-header { gap: 16px; flex-wrap: wrap; align-items: flex-end; }
    .view-overlay-heading { display: flex; align-items: center; gap: 10px; min-width: 0; }
    .view-overlay-title:focus { outline: none; }
    .view-overlay-sub { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
    /* Only needed when the sidebar is out of view (phones, or hidden with ⌘[). */
    .view-menu-btn { display: none; margin-left: -8px; }
    body.sidebar-hidden .view-menu-btn { display: flex; }

    .btn-ghost {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-secondary);
      padding: 7px 10px;
      border-radius: var(--radius-sm);
      white-space: nowrap;
      transition: var(--transition);
    }
    .btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); }
    .btn-primary-sm {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 700;
      color: #fff;
      background: var(--accent);
      padding: 7px 12px;
      border-radius: var(--radius-sm);
      white-space: nowrap;
      transition: var(--transition);
    }
    .btn-primary-sm:hover { filter: brightness(0.92); }

    .segmented {
      display: inline-flex;
      background: var(--bg-hover);
      padding: 3px;
      border-radius: var(--radius-sm);
      gap: 2px;
    }
    .segmented-btn {
      font-size: 12.5px;
      font-weight: 600;
      color: var(--text-muted);
      padding: 5px 12px;
      border-radius: var(--radius-sm);
    }
    .segmented-btn.active { background: var(--bg-surface-elevated); color: var(--text-primary); box-shadow: var(--shadow-sm); }

    /* ---- Tasks -------------------------------------------------- */
    .task-group-title { justify-content: space-between; gap: 12px; }
    .task-group-progress { font-size: 12px; font-family: var(--font-mono); color: var(--text-muted); font-weight: 500; }
    .task-label { display: flex; align-items: flex-start; gap: 10px; flex: 1; cursor: pointer; min-width: 0; }
    .task-group-card .task-item { padding: 2px 0; }
    .feed-empty-lg { padding: 56px 20px; }
    .feed-empty-lg .feed-empty-sub { max-width: 380px; }
    .feed-empty-sub kbd {
      font-family: var(--font-mono);
      font-size: 11px;
      background: var(--bg-hover);
      border: 1px solid var(--border-subtle);
      padding: 0 5px;
      border-radius: var(--radius-sm);
    }

    /* ---- Calendar ----------------------------------------------- */
    .calendar-header-actions { display: flex; align-items: center; gap: 6px; }
    .cal-day { align-items: flex-start; }
    .cal-day.week-start { margin-top: 14px; }
    .cal-day.is-empty { padding-top: 6px; padding-bottom: 6px; align-items: center; }
    .cal-day.is-empty .cal-date-pill { background: transparent; }
    .cal-day.is-empty:hover .cal-date-pill { background: var(--bg-hover); }
    .cal-day.is-empty .cal-day-body { padding: 0; flex-direction: row; align-items: center; }
    .cal-day.is-empty .cal-actions { margin-top: 0; }
    .cal-day.past .cal-date-main { color: var(--text-muted); }
    .cal-action-btn { padding: 6px 10px; font-size: 12.5px; }
    .cal-task-list .task-label { font-size: 14px; }
    .cal-task-add {
      font-size: 12px;
      font-weight: 700;
      color: #fff;
      background: var(--accent);
      padding: 5px 10px;
      border-radius: var(--radius-sm);
    }
    .cal-task-cancel { color: var(--text-muted); padding: 4px 6px; font-size: 13px; }
    .cal-task-cancel:hover { color: var(--text-primary); }
    .cal-note-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

    /* ---- Slash menu & toolbar ----------------------------------- */
    .slash-item-desc kbd {
      font-family: var(--font-mono);
      font-size: 9.5px;
      padding: 0 3px;
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-sm);
    }
    .slash-item-icon-ai { color: var(--accent); }
    .slash-empty { padding: 10px; font-size: 12px; color: var(--text-muted); text-align: center; }
    .toolbar-btn.is-on { background: var(--bg-active); color: var(--text-primary); }
    .toolbar-btn-ai { color: var(--accent-text); white-space: nowrap; }
    .toolbar-btn:disabled { opacity: 0.6; cursor: progress; }

    /* ---- Spotlight ---------------------------------------------- */
    .spotlight-section {
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-muted);
      padding: 10px 14px 4px;
    }
    .spotlight-section:first-child { padding-top: 4px; }
    .spotlight-item mark {
      background: var(--accent-light);
      color: inherit;
      border-radius: 1px;
    }
    .spotlight-item-kbd {
      font-family: var(--font-mono);
      font-size: 10.5px;
      color: var(--text-muted);
      background: var(--bg-sidebar);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-sm);
      padding: 1px 6px;
      flex-shrink: 0;
    }

    /* ---- Shortcuts dialog --------------------------------------- */
    .modal-title-row { justify-content: space-between; }
    .shortcuts-dialog { max-width: 500px; }
    .shortcut-scroll { max-height: min(70vh, 560px); overflow-y: auto; padding-bottom: 8px; }
    .shortcut-group-title {
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--accent-text);
      padding: 16px 20px 0;
    }
    .shortcut-group-title + .shortcut-list { padding-top: 6px; padding-bottom: 4px; }

    /* ---- Toast -------------------------------------------------- */
    #toast { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }

    /* ---- Small screens ------------------------------------------ */
    @media (max-width: 768px) {
      /* Comfortable touch targets. */
      .btn-action-icon, .toggle-list-btn, .toggle-headsup-btn { min-width: 36px; min-height: 36px; justify-content: center; }
      .btn-ai-pill { min-height: 32px; }
      .modal-backdrop { padding-top: 10px; }
      .spotlight-results { max-height: calc(100dvh - 170px); }
      .spotlight-footer { display: none; }

      .view-overlay-header { align-items: center; margin-bottom: 16px; }
      .calendar-header-actions .btn-ghost { display: none; }

      /* Empty days: one tidy row with icon-only actions. */
      .cal-day.is-empty { flex-direction: row; align-items: center; gap: 8px; padding: 4px 6px; margin: 0; }
      .cal-day.is-empty .cal-date-pill { width: auto; flex: 1; padding: 8px 8px; }
      .cal-day.is-empty .cal-day-body { flex: none; }
      .cal-day.is-empty .cal-action-btn { padding: 7px 9px; gap: 5px; }
      .cal-day.week-start { margin-top: 10px; }
      .cal-actions { gap: 6px; }
      .cal-task-input-row { flex-wrap: wrap; }
      .cal-task-input-row input { min-width: 0; font-size: 16px; }

      /* iOS zooms the page when focusing inputs under 16px. */
      .chat-input-row input, .notes-search-box input, .api-key-input, #spotlightSearchInput, .tag-input { font-size: 16px; }
      .popover-menu [role="menuitem"] { padding: 11px 12px; font-size: 14px; }
    }

    /* Inputs that already show focus through their own border/container
       don't need the global outline stacked on top. */
    #spotlightSearchInput:focus-visible,
    .chat-input-row input:focus-visible,
    .notes-search-box input:focus-visible,
    .api-key-input:focus-visible,
    .tag-input:focus-visible,
    .cal-task-input-row input:focus-visible,
    .editor-title-input:focus-visible,
    .editor-canvas:focus-visible { outline: none; }
    .cal-task-input-row:focus-within { box-shadow: 0 0 0 2px var(--accent-glow); }

    /* Off-canvas panes kept their drop shadow while parked off-screen,
       leaving a grey smudge along the edges of a phone screen. */
    @media (max-width: 1024px) {
      .headsup-sidebar.collapsed { box-shadow: none; }
    }
    @media (max-width: 768px) {
      .sidebar.collapsed, .notes-list-pane.collapsed { box-shadow: none; }
    }

    /* Keyboard hints mean nothing on a touch-only device. */
    @media (hover: none) and (pointer: coarse) {
      .btn-new-weel .shortcut, .search-trigger-btn .kbd, .spotlight-item-kbd { display: none; }
    }

    /* -------------------------------------------------------------
       UX pass 3: workspace menu, backup reminder, drop-to-import,
       API key dialog, landing on phones.
       ------------------------------------------------------------- */
    .workspace-menu-wrap { width: 100%; }
    button.workspace-btn { cursor: pointer; }
    button.workspace-btn:hover, button.workspace-btn[aria-expanded="true"] { background: var(--bg-hover); }
    .workspace-chevron { color: var(--text-muted); flex-shrink: 0; }
    .workspace-backup-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--accent);
      flex-shrink: 0;
    }
    .popover-menu.workspace-menu { left: 0; right: auto; width: 260px; }
    .popover-note {
      font-size: 11.5px;
      line-height: 1.45;
      color: var(--text-secondary);
      padding: 8px 10px 10px;
      margin-bottom: 4px;
      border-bottom: 1px solid var(--border-subtle);
    }
    .popover-note strong { display: block; color: var(--text-primary); font-size: 12px; margin-bottom: 2px; }
    .popover-note-meta { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); }

    .drop-overlay {
      position: fixed;
      inset: 0;
      z-index: 3000;
      background: rgba(0, 0, 0, 0.35);
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }
    .drop-overlay-card {
      display: flex;
      flex-direction: column;
      gap: 4px;
      align-items: center;
      text-align: center;
      background: var(--bg-surface-elevated);
      border: 2px dashed var(--accent);
      border-radius: var(--radius-lg);
      padding: 36px 48px;
      box-shadow: var(--shadow-spotlight);
      font-size: 13px;
      color: var(--text-secondary);
    }
    .drop-overlay-card strong { font-size: 18px; color: var(--text-primary); }

    .api-key-dialog { max-width: 480px; }
    .api-key-field { position: relative; flex: 1; display: flex; }
    .api-key-field .api-key-input { padding-right: 56px; width: 100%; }
    .api-key-reveal {
      position: absolute;
      right: 4px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 11px;
      font-weight: 600;
      color: var(--text-muted);
      padding: 4px 8px;
      border-radius: var(--radius-sm);
    }
    .api-key-reveal:hover { color: var(--text-primary); background: var(--bg-hover); }
    .api-key-input[aria-invalid="true"] { border-color: #c0261a; }

    @media (max-width: 560px) {
      /* The number column squeezed feature copy into two-thirds of a phone. */
      .landing-feature { grid-template-columns: 1fr; gap: 6px; }
      .landing-feature-desc { grid-column: auto; }
      .landing-feature-num { padding-top: 0; color: var(--accent-text); }
      .api-key-input-row { flex-direction: column; }
      .api-key-connect-btn { padding: 10px 14px; }
    }