/* ================================================================
   Premium visual layer — Linear/Height/Superhuman-grade polish
   Применяется поверх legacy style.css через @layer overrides.

   Паттерны (по приоритету визуального импакта):
   1. Inter + OpenType cv11 + 13px base + -0.006em letter-spacing
   2. 4px spacing scale (плотнее чем 8px → «tool», не «toy»)
   3. 3-layer OKLCH фон с дельтой 0.03 lightness между уровнями
   4. Монохромная дисциплина: accent только на focus/CTA/selected
   5. 44px header, 240px sidebar, 32-48px kanban card height
   6. 120ms fade page transitions, 80ms hover, 220ms View Transition
   7. 2px focus ring + 2px offset, never outline:none
   8. Hidden scrollbars until hover
   9. Accent 22% alpha selection
   10. FLIP cards on drag via View Transitions API
   ================================================================ */

@layer overrides {

  :root {
    /* --- Refined OKLCH palette (3-layer, 0.03 delta) --- */
    --bg-0: oklch(0.14 0.005 265);       /* app shell baseline */
    --bg-1: oklch(0.175 0.005 265);      /* sidebar/panels */
    --bg-2: oklch(0.205 0.006 265);      /* cards */
    --bg-3: oklch(0.245 0.008 265);      /* hover/elevated */
    --bg-4: oklch(0.28 0.009 265);       /* pressed/active */

    --text-1: oklch(0.96 0.004 265);
    --text-2: oklch(0.78 0.008 265);
    --text-3: oklch(0.58 0.012 265);
    --text-4: oklch(0.42 0.01 265);      /* captions */

    --border: oklch(0.30 0.008 265 / 0.6);
    --border-strong: oklch(0.35 0.010 265);

    --accent: oklch(0.66 0.17 265);
    --accent-hover: oklch(0.72 0.17 265);
    --accent-pressed: oklch(0.58 0.17 265);
    --accent-bg: oklch(0.30 0.09 265 / 0.22);
    --accent-fg: oklch(0.78 0.09 265);
    --accent-subtle: oklch(0.66 0.17 265 / 0.22); /* selection, ring alpha */

    --success: oklch(0.72 0.15 155);
    --warn: oklch(0.78 0.17 70);
    --danger: oklch(0.68 0.20 22);

    /* --- 4px spacing scale (Linear density) --- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;
    --sp-12: 48px;

    /* --- Radii (tool-feel: 6px cards, 8px panels, 4px buttons) --- */
    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-xl: 16px;

    /* --- Typography: 13px base (dense), fluid headings --- */
    --fs-xs: 11px;
    --fs-sm: 12px;
    --fs-base: 13px;
    --fs-md: 14px;
    --fs-lg: 15px;
    --fs-xl: 18px;
    --fs-2xl: 22px;
    --fs-3xl: 28px;

    --lh-tight: 1.2;
    --lh-snug: 1.35;
    --lh-normal: 1.5;

    /* --- Motion tokens (Linear cadence) --- */
    --dur-instant: 80ms;    /* hover, button press */
    --dur-fast: 120ms;      /* page fade, menu open */
    --dur-base: 180ms;      /* sidebar collapse */
    --dur-slow: 260ms;      /* modal enter, view transitions */
    --dur-page: 320ms;      /* cross-route with View Transitions */

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);         /* Linear default */
    --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
    --ease-spring: linear(
      0, 0.4 8.5%, 0.73 18%, 0.92 27%, 1.02 37%, 1.045 44%, 1.03 52%,
      1.002 62%, 0.98 72%, 0.985 82%, 0.998 92%, 1
    );

    /* --- Shadow scale (restrained) --- */
    --shadow-xs: 0 1px 2px oklch(0% 0 0 / 0.08);
    --shadow-sm: 0 2px 4px oklch(0% 0 0 / 0.08), 0 1px 2px oklch(0% 0 0 / 0.06);
    --shadow-md: 0 6px 12px oklch(0% 0 0 / 0.10), 0 2px 4px oklch(0% 0 0 / 0.06);
    --shadow-lg: 0 16px 32px oklch(0% 0 0 / 0.14), 0 4px 8px oklch(0% 0 0 / 0.06);
    --shadow-xl: 0 24px 48px oklch(0% 0 0 / 0.20), 0 8px 16px oklch(0% 0 0 / 0.08);

    /* --- Focus ring (consistent everywhere) --- */
    --focus-ring: 0 0 0 2px var(--bg-0), 0 0 0 4px var(--accent);

    /* --- Sidebar sizes --- */
    --sidebar-w: 232px;
    --sidebar-w-collapsed: 56px;
    --header-h: 44px;
  }

  [data-theme="light"] {
    --bg-0: oklch(0.99 0.002 265);
    --bg-1: oklch(0.965 0.003 265);
    --bg-2: oklch(0.935 0.005 265);
    --bg-3: oklch(0.90 0.006 265);
    --bg-4: oklch(0.87 0.008 265);

    --text-1: oklch(0.20 0.005 265);
    --text-2: oklch(0.38 0.008 265);
    --text-3: oklch(0.52 0.010 265);
    --text-4: oklch(0.62 0.010 265);

    --border: oklch(0.82 0.008 265 / 0.85);
    --border-strong: oklch(0.75 0.010 265);

    --accent: oklch(0.52 0.18 265);
    --accent-hover: oklch(0.46 0.18 265);
    --accent-pressed: oklch(0.42 0.18 265);
    --accent-bg: oklch(0.94 0.05 265);
    --accent-fg: oklch(0.35 0.15 265);

    --shadow-xs: 0 1px 2px oklch(0% 0 0 / 0.04);
    --shadow-sm: 0 2px 4px oklch(0% 0 0 / 0.05), 0 1px 2px oklch(0% 0 0 / 0.03);
    --shadow-md: 0 6px 12px oklch(0% 0 0 / 0.06);
    --shadow-lg: 0 16px 32px oklch(0% 0 0 / 0.08);
  }

  /* ==============================================================
     Typography — Inter + OpenType + optimal rendering
     ============================================================== */
  html, body {
    font-family: "Inter", "Inter Variable", -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-feature-settings: "cv11", "ss01", "ss03", "cv05";
    font-variation-settings: "opsz" 14;
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    letter-spacing: -0.006em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    color: var(--text-1);
    background: var(--bg-0);
  }

  h1 { font-size: var(--fs-3xl); letter-spacing: -0.025em; font-weight: 650; line-height: var(--lh-tight); }
  h2 { font-size: var(--fs-2xl); letter-spacing: -0.020em; font-weight: 640; line-height: var(--lh-tight); }
  h3 { font-size: var(--fs-xl);  letter-spacing: -0.015em; font-weight: 620; line-height: var(--lh-snug); }
  h4 { font-size: var(--fs-lg);  letter-spacing: -0.010em; font-weight: 600; }
  h5 { font-size: var(--fs-md);  font-weight: 600; }

  /* Small caps label (Linear style) */
  .label {
    font-size: var(--fs-xs);
    font-weight: 550;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-3);
  }

  /* Mono for timestamps, IDs, keybinds */
  code, kbd, .mono, .ts, .chat-time, .ticket-time-badge {
    font-family: "JetBrains Mono", "SF Mono", "Monaco", ui-monospace, monospace;
    font-feature-settings: "calt" 0;
    letter-spacing: 0;
  }

  /* ==============================================================
     Selection & scrollbars (premium details)
     ============================================================== */
  ::selection { background: var(--accent-subtle); color: var(--text-1); }
  ::-moz-selection { background: var(--accent-subtle); color: var(--text-1); }

  /* Hidden scrollbars until hover */
  * {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color var(--dur-fast) var(--ease-out);
  }
  *:hover { scrollbar-color: oklch(0.50 0 0 / 0.35) transparent; }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background-color var(--dur-fast) var(--ease-out);
  }
  *:hover::-webkit-scrollbar-thumb { background: oklch(0.50 0 0 / 0.35); background-clip: padding-box; }
  ::-webkit-scrollbar-thumb:hover { background: oklch(0.55 0 0 / 0.55) !important; background-clip: padding-box; }

  /* ==============================================================
     Focus rings — consistent, accessible
     ============================================================== */
  :focus { outline: none; }
  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: inherit;
  }
  button:focus-visible,
  a:focus-visible,
  [role="button"]:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible,
  .ticket:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  /* ==============================================================
     Cursor discipline — pointer ONLY where appropriate
     ============================================================== */
  body { cursor: default; }
  a, button, [role="button"], summary,
  input[type="submit"], input[type="button"], input[type="reset"],
  [data-action], label[for] { cursor: pointer; }
  [draggable="true"], .ticket { cursor: grab; }
  [draggable="true"][aria-grabbed="true"], .ticket--dragging,
  .ticket[aria-grabbed="true"] { cursor: grabbing; }
  input[type="text"], input[type="email"], input[type="password"],
  input[type="search"], input[type="url"], input[type="tel"],
  input[type="number"], textarea { cursor: text; }
  :disabled, [aria-disabled="true"] { cursor: not-allowed; }

  /* ==============================================================
     Layout — sidebar, header, main
     ============================================================== */
  .sidebar {
    width: var(--sidebar-w);
    min-width: var(--sidebar-w);
    background: var(--bg-1);
    border-right: 1px solid var(--border);
    padding: var(--sp-3) var(--sp-2);
    gap: var(--sp-1);
  }

  .sidebar a, .sidebar-nav a {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 6px var(--sp-2);
    border-radius: var(--r-sm);
    font-size: var(--fs-md);
    color: var(--text-2);
    text-decoration: none;
    transition: background-color var(--dur-instant) var(--ease-out),
                color var(--dur-instant) var(--ease-out);
    min-height: 32px;
  }
  .sidebar a:hover { background: var(--bg-3); color: var(--text-1); }
  .sidebar a.active, .sidebar a[aria-current="page"] {
    background: var(--accent-bg);
    color: var(--accent-fg);
    font-weight: 550;
  }

  .header, .topbar {
    height: var(--header-h);
    padding: 0 var(--sp-4);
    background: var(--bg-0);
    border-bottom: 0;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
  }
  .header h1, .topbar h1 {
    font-size: var(--fs-lg);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
  }

  /* Header shadow only on scroll — sentinel pattern */
  .header.is-scrolled, .topbar.is-scrolled {
    box-shadow: 0 1px 0 var(--border);
  }

  /* ==============================================================
     Kanban — Linear density
     ============================================================== */
  .board, .board-container {
    gap: var(--sp-3);
  }
  .board-col {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--sp-2);
    min-width: 280px;
  }
  .board-col-header {
    padding: var(--sp-2) var(--sp-3) var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .board-col-count {
    font-size: var(--fs-xs);
    padding: 1px 6px;
    background: var(--bg-3);
    border-radius: 999px;
    color: var(--text-3);
    font-weight: 500;
    letter-spacing: 0;
  }
  .board-col-body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding: var(--sp-1);
    min-height: 80px;
  }

  /* Kanban card — dense, 32-48px */
  .ticket {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: var(--sp-2) var(--sp-3);
    min-height: 36px;
    gap: var(--sp-1);
    transition: background-color var(--dur-instant) var(--ease-out),
                border-color var(--dur-instant) var(--ease-out),
                box-shadow var(--dur-instant) var(--ease-out);
  }
  .ticket:hover {
    background: var(--bg-3);
    border-color: var(--border-strong);
  }
  .ticket[aria-grabbed="true"], .ticket--dragging {
    background: var(--accent-bg);
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
  }
  .ticket-row1 {
    font-size: var(--fs-xs);
    color: var(--text-3);
    gap: var(--sp-2);
  }
  .ticket-row2 {
    font-size: var(--fs-md);
    line-height: var(--lh-snug);
    color: var(--text-1);
    word-break: break-word;
  }
  .ticket-num {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: var(--fs-xs);
    color: var(--text-4);
  }
  .ticket-time-badge,
  .ticket-date-badge,
  .ticket-project-badge {
    padding: 1px 6px;
    border-radius: var(--r-xs);
    font-size: var(--fs-xs);
    font-weight: 500;
    background: var(--bg-3);
    color: var(--text-2);
    letter-spacing: 0;
  }
  .ticket-project-badge {
    background: var(--accent-bg);
    color: var(--accent-fg);
  }

  /* Urgent — single red dot indicator, not full-card treatment (restrained) */
  .ticket--urgent::before {
    content: "";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--danger);
    box-shadow: 0 0 8px oklch(from var(--danger) l c h / 0.6);
  }
  .ticket { position: relative; }

  /* Overdue — subtle left-border accent, not full red */
  .ticket--overdue {
    border-left: 2px solid var(--danger);
    padding-left: calc(var(--sp-3) - 1px);
  }

  /* Done — de-emphasize */
  .ticket--done {
    opacity: 0.5;
    text-decoration: line-through;
    text-decoration-color: var(--text-4);
  }

  /* Ticket action buttons — minimal until hover */
  .ticket-btn {
    opacity: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-xs);
    padding: 2px 6px;
    font-size: var(--fs-sm);
    color: var(--text-3);
    cursor: pointer;
    transition: opacity var(--dur-instant) var(--ease-out),
                background-color var(--dur-instant) var(--ease-out),
                color var(--dur-instant) var(--ease-out);
  }
  .ticket:hover .ticket-btn,
  .ticket:focus-within .ticket-btn {
    opacity: 1;
  }
  .ticket-btn:hover {
    background: var(--bg-4);
    color: var(--text-1);
  }
  .ticket-btn--del:hover {
    background: oklch(from var(--danger) l c h / 0.18);
    color: var(--danger);
  }

  /* ==============================================================
     Buttons — restrained, monochrome default, accent only on primary
     ============================================================== */
  button, .btn {
    font-family: inherit;
    font-size: var(--fs-md);
    font-weight: 550;
    letter-spacing: -0.005em;
    padding: 6px var(--sp-3);
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: var(--bg-2);
    color: var(--text-1);
    cursor: pointer;
    min-height: 28px;
    transition: background-color var(--dur-instant) var(--ease-out),
                border-color var(--dur-instant) var(--ease-out),
                color var(--dur-instant) var(--ease-out);
  }
  button:hover, .btn:hover {
    background: var(--bg-3);
    border-color: var(--border-strong);
  }
  button:active, .btn:active { background: var(--bg-4); }

  .btn-primary, button.primary, .btn.btn-accent {
    background: var(--accent);
    color: white;
    border-color: transparent;
  }
  .btn-primary:hover, button.primary:hover, .btn.btn-accent:hover {
    background: var(--accent-hover);
  }
  .btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--text-2);
  }
  .btn-ghost:hover { background: var(--bg-3); color: var(--text-1); }

  .btn-sm { font-size: var(--fs-sm); padding: 4px var(--sp-2); min-height: 24px; }
  .btn-lg { font-size: var(--fs-lg); padding: 8px var(--sp-4); min-height: 36px; }

  /* ==============================================================
     Inputs — subtle, accent on focus
     ============================================================== */
  input, textarea, select {
    font-family: inherit;
    font-size: var(--fs-md);
    padding: 6px var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--bg-2);
    color: var(--text-1);
    min-height: 28px;
    transition: border-color var(--dur-instant) var(--ease-out),
                box-shadow var(--dur-instant) var(--ease-out),
                background-color var(--dur-instant) var(--ease-out);
  }
  input:hover, textarea:hover, select:hover { border-color: var(--border-strong); }
  input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-subtle);
    background: var(--bg-2);
  }

  /* ==============================================================
     Chat — Superhuman-style dense bubbles
     ============================================================== */
  .chat-message, .chat-bubble {
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-md);
    max-width: 76ch;
    line-height: var(--lh-snug);
    font-size: var(--fs-md);
  }
  .chat-message.user, .chat-bubble.user {
    background: var(--accent-bg);
    color: var(--accent-fg);
    align-self: flex-end;
    border-bottom-right-radius: 4px;
  }
  .chat-message.assistant, .chat-bubble.assistant {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-bottom-left-radius: 4px;
  }
  .chat-time {
    font-size: 10px;
    color: var(--text-4);
    letter-spacing: 0;
    margin-top: var(--sp-1);
    opacity: 0.8;
  }

  /* ==============================================================
     Tool-call transparency (chat)
     ============================================================== */
  .chat-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--border);
  }
  .chat-tool {
    font-size: var(--fs-xs);
  }
  .chat-tool__summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-1);
    color: var(--text-2);
    cursor: pointer;
    list-style: none;
    font-family: inherit;
    user-select: none;
    transition: background-color var(--dur-instant) var(--ease-out),
                border-color var(--dur-instant) var(--ease-out);
  }
  .chat-tool__summary::-webkit-details-marker { display: none; }
  .chat-tool__summary::marker { content: ''; }
  .chat-tool__summary:hover { background: var(--bg-3); border-color: var(--border-strong); }
  .chat-tool[open] .chat-tool__summary {
    background: var(--accent-bg);
    border-color: var(--accent);
    color: var(--accent-fg);
  }
  .chat-tool__icon { font-size: 11px; line-height: 1; }
  .chat-tool__name {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0;
  }
  .chat-tool__lat {
    font-size: 10px;
    color: var(--text-4);
    letter-spacing: 0;
  }
  .chat-tool[data-status="error"] .chat-tool__summary {
    border-color: oklch(from var(--danger) l c h / 0.4);
    color: var(--danger);
  }
  .chat-tool[data-status="timeout"] .chat-tool__summary {
    border-color: oklch(from var(--warn) l c h / 0.4);
    color: var(--warn);
  }
  .chat-tool__body {
    margin-top: 6px;
    padding: 8px 10px;
    background: var(--bg-0);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-size: var(--fs-xs);
    max-width: 100%;
    overflow-x: auto;
  }
  .chat-tool__args {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10px;
    color: var(--text-2);
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0 0 6px 0;
    line-height: 1.35;
  }
  .chat-tool__error {
    color: var(--danger);
    font-size: 11px;
    margin: 4px 0;
  }
  .chat-tool__result {
    color: var(--text-2);
    font-size: 11px;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
  }

  /* Message actions (copy/retry) */
  .chat-actions {
    display: flex;
    gap: 4px;
    margin-top: 6px;
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-out);
  }
  .chat-bubble:hover .chat-actions,
  .chat-bubble:focus-within .chat-actions { opacity: 1; }
  .chat-action-btn {
    min-height: 22px;
    min-width: 22px;
    padding: 2px 6px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: var(--r-xs);
    font-size: 11px;
    color: var(--text-3);
    cursor: pointer;
    line-height: 1;
    transition: background-color var(--dur-instant) var(--ease-out),
                color var(--dur-instant) var(--ease-out),
                border-color var(--dur-instant) var(--ease-out);
  }
  .chat-action-btn:hover {
    background: var(--bg-3);
    color: var(--text-1);
    border-color: var(--border);
  }

  /* ==============================================================
     Task Grouping — container + nested children (v25)
     Things-3 style: subtle background, hairline indent, counter badge.
     ============================================================== */
  .ticket--group {
    padding: var(--sp-2) var(--sp-3);
    background: oklch(from var(--bg-2) calc(l - 0.015) c h);
    border-color: var(--border-strong);
    position: relative;
  }
  .ticket--group::before {
    content: none;  /* override .ticket--urgent red dot, container doesn't carry urgent */
  }

  .ticket-group-header {
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    cursor: pointer;
    user-select: none;
    padding: var(--sp-1) 0;
    margin: 0;
  }

  .ticket-group-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    transition: transform var(--dur-fast) var(--ease-out);
    color: var(--text-3);
    font-size: 12px;
    flex-shrink: 0;
  }
  .ticket-group-children[data-collapsed="true"] ~ .ticket-group-toggle,
  .ticket-group-header:has(+ .ticket-group-children[data-collapsed="true"]) .ticket-group-toggle {
    transform: rotate(-90deg);
  }

  .ticket-group-icon {
    font-size: 14px;
    flex-shrink: 0;
    opacity: 0.9;
  }

  .ticket-group-label {
    font-size: var(--fs-md);
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--text-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 0 1 auto;
  }

  .ticket-group-badge {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--bg-3);
    color: var(--text-3);
    flex-shrink: 0;
  }

  .ticket-group-mixed {
    font-size: 11px;
    opacity: 0.7;
    flex-shrink: 0;
  }

  .ticket-group-children {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: var(--sp-2);
    padding-left: var(--sp-3);
    border-left: 1px solid var(--border);
    transition: opacity var(--dur-fast) var(--ease-out);
  }
  .ticket-group-children[data-collapsed="true"] {
    display: none;
  }

  .ticket--group .ticket-group-toggle::before {
    content: "\25be";
  }
  .ticket--group:has(> .ticket-group-children[data-collapsed="true"]) .ticket-group-toggle::before {
    content: "\25b8";
  }
  .ticket--group .ticket-group-toggle {
    /* hide raw unicode inside span — replaced by pseudo */
    font-size: 0;
  }
  .ticket--group .ticket-group-toggle::before {
    font-size: 12px;
  }

  /* Nested ticket inside group — less visual weight */
  .ticket--nested {
    padding: var(--sp-1) var(--sp-2);
    background: var(--bg-2);
    font-size: var(--fs-sm);
  }
  .ticket--nested .ticket-num {
    color: var(--text-4);
  }

  /* ==============================================================
     Keybind badges
     ============================================================== */
  .kbd, kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: var(--r-xs);
    background: var(--bg-2);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10px;
    color: var(--text-2);
    letter-spacing: 0;
  }

  /* ==============================================================
     Progress bar on top for route changes (Superhuman)
     ============================================================== */
  .route-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--accent);
    transform-origin: left;
    transform: scaleX(0);
    transition: transform var(--dur-page) var(--ease-out),
                opacity var(--dur-fast) var(--ease-out);
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
  }
  .route-progress.is-active {
    opacity: 1;
    transform: scaleX(0.85);
  }
  .route-progress.is-done {
    transform: scaleX(1);
    opacity: 0;
  }

  /* ==============================================================
     Page transitions — Linear cadence (fade + 4px Y)
     ============================================================== */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) {
    animation: view-fade-out var(--dur-fast) var(--ease-out) forwards;
  }
  ::view-transition-new(root) {
    animation: view-fade-in var(--dur-page) var(--ease-out) forwards;
  }
  @keyframes view-fade-out {
    to { opacity: 0; transform: translateY(-4px); }
  }
  @keyframes view-fade-in {
    from { opacity: 0; transform: translateY(4px); }
  }

  /* View Transition for Kanban cards (FLIP) */
  ::view-transition-group(card-*) {
    animation-duration: 220ms;
    animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1);
  }

  @media (prefers-reduced-motion: reduce) {
    ::view-transition-old(*), ::view-transition-new(*) {
      animation: none !important;
    }
    * {
      transition-duration: 1ms !important;
      animation-duration: 1ms !important;
    }
  }

  /* ==============================================================
     Modal — Arc-style spring enter
     ============================================================== */
  .modal, dialog {
    border-radius: var(--r-xl);
    border: 1px solid var(--border);
    background: var(--bg-1);
    box-shadow: var(--shadow-xl);
  }
  dialog::backdrop {
    background: oklch(0% 0 0 / 0.50);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  /* ==============================================================
     Empty states — inline, restrained
     ============================================================== */
  .empty-state,
  .board-col-empty,
  .notes-empty,
  .inbox-empty,
  .agenda-empty {
    padding: var(--sp-8) var(--sp-4);
    text-align: center;
    color: var(--text-3);
  }
  .empty-state img,
  .empty-state svg,
  .board-col-empty-illo {
    max-width: 88px !important;
    max-height: 88px !important;
    opacity: 0.65;
    margin: 0 auto var(--sp-3);
  }
  .empty-state-title,
  .board-col-empty-title {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-2);
    margin-bottom: var(--sp-1);
  }
  .empty-state-hint,
  .board-col-empty-hint {
    font-size: var(--fs-sm);
    color: var(--text-3);
    line-height: var(--lh-snug);
  }

  /* ==============================================================
     Command palette refinements (Raycast-level)
     ============================================================== */
  gip-command::part(panel) {
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xl);
  }

  /* ==============================================================
     Utility classes (Linear uses a handful)
     ============================================================== */
  .muted { color: var(--text-3); }
  .strong { font-weight: 600; }
  .dim { opacity: 0.65; }
  .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .divider { height: 1px; background: var(--border); margin: var(--sp-2) 0; }
  .surface { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r-lg); }

  /* ==============================================================
     Kill legacy box-shadow/transforms that feel like plastic
     ============================================================== */
  .board-col:hover,
  .agenda-container:hover,
  .ticket-btn {
    transform: none;
  }

  /* Remove excessive padding from legacy stats cards */
  .stat-card,
  .metric-tile {
    padding: var(--sp-4);
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
  }

  /* Links */
  a:not([class]) {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid oklch(from var(--accent) l c h / 0.3);
    transition: border-color var(--dur-instant) var(--ease-out);
  }
  a:not([class]):hover {
    border-bottom-color: var(--accent);
  }
}