:root {
    --bg: #1e1e1e; --surface: #252525; --surface-2: #2a2a2a; --row: #232323;
    --border: #383838; --text: #e6e6e6; --muted: #8a8a8a;
    --accent: #4a9eff; --project: #a98bff; --project-bg: #2b2440;
    --tag-bg: #2f2f2f; --tag-hover: #3a3a3a; --danger: #ff9a9a;
    --mobile-nav-height: 62px; --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
    --mobile-bottom-inset: 0px;
  }
  body[data-compact-ui] {
    --cui-accent-rgb: 214 182 116;
    --cui-accent: rgb(var(--cui-accent-rgb));
    --cui-accent-soft: rgb(var(--cui-accent-rgb) / .16);
    --cui-accent-strong: rgb(var(--cui-accent-rgb) / .72);
    --cui-on-accent: #0f0f0f;
    --cui-field: #1c1c1c;
    --cui-panel: #0f0f0f;
    --cui-row: #111111;
    --cui-line: #595959;
    --cui-head: #f0f0f0;
    --cui-ink: #e2e2e2;
    --cui-muted: #8c8c8c;
    --cui-ready: #79b84a;
    --cui-warning: #d0a04a;
    --cui-error: #d56d5c;
    --cui-control-size: 44px;
    --cui-font: Corbel, "Segoe UI", system-ui, sans-serif;
  }
  body[data-compact-ui][data-compact-accent="white"] {
    --cui-accent-rgb: 240 240 240;
  }
  @media (min-width: 921px) and (pointer: fine) {
    body[data-compact-ui] { --cui-control-size: 28px; }
  }
  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  html, body { height: 100%; }
  body {
    margin: 0; overflow: hidden; background: var(--bg); color: var(--text);
    font: 14px/1.5 "Segoe UI", system-ui, sans-serif;
  }
  body.auth-pending .rail, body.auth-pending .app { visibility: hidden; }
  .auth-overlay {
    position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
    padding: 24px; background: var(--bg);
  }
  .auth-overlay[hidden] { display: none; }
  .auth-card {
    width: min(100%, 360px); padding: 30px; border: 1px solid var(--border);
    border-radius: 14px; background: var(--surface); box-shadow: 0 24px 70px #0008;
  }
  .auth-mark {
    display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 20px;
    border-radius: 12px; background: var(--accent); color: #fff; font-size: 24px;
  }
  .auth-card h1 { margin: 0 0 6px; font-size: 22px; }
  .auth-intro { margin: 0 0 22px; color: var(--muted); }
  .auth-status { margin: 0; color: var(--muted); }
  .auth-form { display: grid; gap: 13px; }
  .auth-form[hidden] { display: none; }
  .auth-form label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
  .auth-form input {
    width: 100%; padding: 11px 12px; border: 1px solid var(--border); border-radius: 8px;
    outline: none; background: var(--surface-2); color: var(--text); font: inherit;
  }
  .auth-form input:focus { border-color: var(--accent); }
  .auth-submit {
    margin-top: 3px; padding: 11px; border: 0; border-radius: 8px;
    background: var(--accent); color: #fff; font-weight: 600; cursor: pointer;
  }
  .auth-submit:disabled { cursor: wait; opacity: .65; }
  .auth-error { min-height: 20px; margin: 0; color: var(--danger); font-size: 13px; }
  button, input, textarea { font: inherit; }
  button, a { -webkit-tap-highlight-color: transparent; }
  button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 1px solid var(--accent); outline-offset: 1px;
  }
  button {
    background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
    border-radius: 8px; padding: 8px 12px; cursor: pointer;
  }
  button:hover { background: var(--tag-hover); }
  button:disabled { cursor: default; opacity: .55; }
  a { color: var(--accent); text-decoration: none; }
  a:hover { text-decoration: underline; }

  .rail {
    position: fixed; inset: 0 auto 0 0; z-index: 20; width: 76px;
    display: flex; flex-direction: column; background: var(--surface);
    border-right: 1px solid var(--border);
  }
  .mode-button, .capture-nav, .settings-button {
    position: relative; width: 100%; height: 76px; padding: 9px 4px 7px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    border: 0; border-radius: 0; background: transparent; color: var(--muted);
  }
  .mode-button svg { width: 22px; height: 22px; stroke: currentColor; }
  .mode-button span, .settings-button span, .capture-nav small { font-size: 11px; line-height: 1; }
  .mode-button.active { background: var(--surface-2); color: var(--text); }
  .mode-button.active::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent);
  }
  .capture-nav { color: var(--accent); }
  .capture-nav > span { font-size: 29px; line-height: .75; }
  .capture-nav:hover { color: #fff; background: rgba(74, 158, 255, .18); }
  .capture-nav.voice-holding { background: rgba(74, 158, 255, .24); }
  .capture-nav.voice-hold-ready { color: #fff; background: #325f94; }
  .settings-button {
    margin-top: auto;
  }
  .settings-button:hover, .settings-button.open, .settings-button.mode-active {
    color: var(--text); background: var(--surface-2);
  }
  .settings-button svg { width: 21px; height: 21px; stroke: currentColor; }

  .pull-refresh {
    position: fixed; top: 10px; left: 50%; z-index: 30;
    display: flex; align-items: center; gap: 7px; padding: 7px 11px;
    border: 1px solid var(--border); border-radius: 999px;
    transform: translate(-50%, -150%); opacity: 0; pointer-events: none;
    background: var(--surface); color: var(--muted); box-shadow: 0 6px 18px #0006;
    transition: transform 120ms ease, opacity 120ms ease;
  }
  .pull-refresh.visible { transform: translate(-50%, 0); opacity: 1; }
  .pull-refresh.armed { border-color: var(--accent); color: var(--text); }
  .pull-refresh-icon { color: var(--accent); font-size: 16px; line-height: 1; }

  .app { height: 100%; margin-left: 76px; }
  .mode { display: none; height: 100%; }
  .mode.active { display: flex; }

  .ideas-mode { min-width: 0; }
  #capture {
    display: block; width: 100%; resize: vertical; padding: 8px 12px;
    color: var(--text); background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 8px; line-height: 1.5;
  }
  #capture::placeholder { color: var(--muted); }
  /* Capture is a popup, mirroring Ctrl+I: the list is what the page is for. */
  .capture-overlay {
    position: fixed; inset: 0; z-index: 40; display: flex;
    align-items: flex-start; justify-content: center; padding-top: 18vh;
    background: rgba(0, 0, 0, .45);
  }
  .capture-overlay[hidden] { display: none; }
  .capture-dialog {
    width: min(680px, calc(100% - 48px)); max-height: calc(100vh - 80px); overflow-y: auto;
    background: var(--surface); border: 1px solid var(--border-strong, var(--border));
    border-radius: 12px; padding: 16px; box-shadow: 0 24px 80px #0009;
  }
  .capture-head { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 12px; }
  .capture-head > div { min-width: 0; flex: 1; }
  .capture-head h2 { margin: 0; font-size: 18px; }
  .capture-head p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
  .capture-close { width: 34px; height: 34px; padding: 0; font-size: 21px; line-height: 1; }
  .capture-dialog #capture {
    display: block; width: 100%; resize: vertical; padding: 12px 14px;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
    color: var(--text); font-size: 15px; line-height: 1.55;
  }
  .capture-actions {
    display: flex; align-items: center; gap: 9px; min-height: 40px; margin-top: 10px;
  }
  .capture-spacer { flex: 1; }
  .capture-fallback { color: var(--muted); font-size: 11px; }
  .voice-start { display: inline-flex; align-items: center; gap: 7px; color: #fff; background: #325f94; border-color: #4a8bd3; }
  .voice-start:hover { background: #3a70ac; }
  .voice-mic { color: #ff8585; font-size: 9px; }
  .voice-type-instead { color: var(--muted); }
  .voice-foreground { margin: 10px 0 0; color: #d7c98b; font-size: 12px; }
  #capture-save { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
  .voice-panel {
    margin-top: 11px; padding: 12px; border: 1px solid var(--border);
    border-radius: 9px; background: var(--surface-2);
  }
  .voice-status-row { display: flex; align-items: center; gap: 10px; }
  .voice-status-row > div { min-width: 0; flex: 1; display: grid; }
  .voice-status-row strong { font-size: 13px; }
  .voice-status-row span:not(.voice-pulse) { color: var(--muted); font-size: 11px; }
  .voice-status-row .voice-wake-status { color: #d7c98b; }
  .voice-status-row time { min-width: 38px; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
  .voice-pulse { width: 10px; height: 10px; flex: none; border-radius: 50%; background: #777; }
  .voice-panel.recording .voice-pulse { background: #ff5f5f; box-shadow: 0 0 0 0 #ff5f5f66; animation: voice-pulse 1.5s ease-out infinite; }
  .voice-panel.durable .voice-pulse, .voice-panel.saved .voice-pulse { background: #64c887; }
  .voice-panel.failed .voice-pulse { background: var(--danger); }
  .voice-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  #voice-stop { background: #9a3434; border-color: #c65353; color: #fff; }
  #voice-cancel, #voice-discard-local { color: var(--danger); }
  .voice-recent { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
  .voice-recent h3 { margin: 0 0 8px; color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
  .voice-job { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #333; }
  .voice-job:first-child { border-top: 0; }
  .voice-job-copy { min-width: 0; flex: 1; display: grid; }
  .voice-job-copy strong { font-size: 12px; }
  .voice-job-copy span { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
  .voice-job-actions { display: flex; flex: none; gap: 6px; }
  .voice-job-actions button, .voice-job-actions a { padding: 5px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); font-size: 11px; }
  .voice-job-actions button:hover, .voice-job-actions a:hover { background: var(--tag-hover); text-decoration: none; }
  @keyframes voice-pulse { 70%, 100% { box-shadow: 0 0 0 8px #ff5f5f00; } }
  @media (prefers-reduced-motion: reduce) { .voice-panel.recording .voice-pulse { animation: none; } }
  .error-strip {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    margin: 8px 0 0; padding: 9px 12px; color: var(--danger); background: #3a2525;
    border: 1px solid #5a3030; border-radius: 8px;
  }
  .error-strip[hidden] { display: none; }
  .error-strip button { flex: none; padding: 5px 10px; }

  .review-panel {
    position: fixed; z-index: 36; inset: 0 auto 0 76px; width: 300px;
    overflow-y: auto; padding: 18px 16px 28px; background: var(--surface);
    border-right: 1px solid var(--border); box-shadow: 18px 0 45px #0007;
  }
  .review-panel[hidden], .filter-backdrop[hidden] { display: none; }
  .filter-backdrop { position: fixed; z-index: 35; inset: 0 0 0 76px; background: #0006; }
  .filters-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .filters-head h2 { margin: 0; font-size: 17px; }
  #filters-close { padding: 1px 9px; font-size: 20px; }
  .date-filter { margin-top: 20px; }
  .date-filter label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 12px; }
  .date-filter > div { display: flex; gap: 7px; }
  .date-filter input {
    min-width: 0; padding: 7px 9px; color: var(--text); color-scheme: dark;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  }
  .date-filter input { flex: 1; }
  .date-filter button { padding-inline: 9px; }
  .tags-heading { margin: 28px 5px 8px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .08em; }
  .tag-list { display: flex; flex-direction: column; gap: 2px; }
  .tag-row {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 6px 7px; border-color: transparent; background: transparent; text-align: left;
  }
  .tag-row:hover { background: var(--surface-2); }
  .tag-row.active { border-color: var(--accent); }
  .tag-row.project { color: var(--project); background: var(--project-bg); }
  .tag-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tag-count { flex: none; min-width: 2ch; color: var(--muted); text-align: right; font-size: 12px; }
  .tag-remove { margin-left: 3px; opacity: .75; }
  .tags-empty { padding: 5px 7px; color: var(--muted); font-size: 12px; }

  .review-main { min-width: 0; height: 100%; flex: 1; display: flex; flex-direction: column; }
  .review-toolbar, .today-toolbar { padding: 12px 20px 10px; border-bottom: 1px solid var(--border); }
  .review-toolbar { flex: none; }
  .today-toolbar {
    position: sticky; top: 0; z-index: 3; background: var(--bg);
  }
  /* Ideas and Today lead with the same three controls: add, find, and the box
     you type into. Only what follows them differs — Filters and the count on
     Ideas, the compact day chooser on Today. */
  .compose-row { display: flex; align-items: center; gap: 12px; }
  .task-compose-fields {
    min-width: 0; flex: 1; display: flex; align-items: center; gap: 12px;
  }
  .compose-new, .compose-search {
    flex: none; width: 38px; height: 38px; padding: 0; line-height: 1;
    display: grid; place-items: center;
  }
  .compose-new {
    font-size: 20px; color: var(--text);
    border-color: var(--border-accent, var(--accent)); background: rgba(74, 158, 255, .14);
  }
  .compose-new:hover { background: rgba(74, 158, 255, .26); }
  .compose-search { color: var(--muted); }
  .compose-search svg {
    width: 18px; height: 18px; fill: none; stroke: currentColor;
    stroke-width: 1.9; stroke-linecap: round;
  }
  .compose-search:hover { color: var(--text); }
  /* Search borrows the box rather than opening its own, so the lit toggle is
     the only thing saying which of the two the box currently is. */
  .compose-search.on {
    color: var(--accent); border-color: var(--accent); background: rgba(74, 158, 255, .12);
  }
  .compose-search.on:hover { background: rgba(74, 158, 255, .2); }
  .compose-input {
    flex: 1; min-width: 120px; height: 38px; padding: 0 13px; color: var(--text);
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  }
  .compose-input::placeholder { color: var(--muted); }
  /* The search field wears the accent even unfocused. The lit toggle already
     says the box has changed job; this means a glance at the box alone says it
     too, which is what the one-row layout costs if nothing marks it. */
  .compose-row input[type="search"] { border-color: var(--border-accent, var(--accent)); }
  .filters-button { flex: none; padding: 7px 11px; color: var(--muted); }
  .filters-button.active { color: var(--accent); border-color: var(--accent); }
  .count { flex: none; color: var(--muted); font-size: 13px; white-space: nowrap; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .spinner {
    display: inline-block; width: 10px; height: 10px; border-radius: 50%;
    border: 1.5px solid currentColor; border-top-color: transparent;
    animation: spin .7s linear infinite; vertical-align: -1px;
  }
  button.working {
    color: var(--accent); border-color: var(--accent); border-style: solid;
    background: rgba(74, 158, 255, .12); opacity: 1;
  }
  .icon-btn { display: inline-flex; align-items: center; justify-content: center; padding: 2px 7px; }
  .icon-btn .retag-icon { display: block; }
  button.working .retag-icon, .row-menu-toggle.working .retag-icon { animation: spin .8s linear infinite; }
  @media (prefers-reduced-motion: reduce) {
    button.working .retag-icon, .row-menu-toggle.working .retag-icon { animation: none; }
  }
  /* The spinning icon carries the working state; pulsing the button too is noise. */
  tr.retagging td { background: rgba(74, 158, 255, .09); }
  @media (prefers-reduced-motion: reduce) {
    .spinner { animation: none; }
    button.working { animation: none; }
  }
  .tag-input {
    flex: 1; min-width: 90px; padding: 1px 9px; font-size: 12px; border-radius: 999px;
    color: var(--text); background: var(--surface-2); border: 1px solid var(--accent);
  }
  .tag-note { margin-top: 8px; font-size: 12px; color: var(--muted); }
  .tag-note.error { color: var(--danger); }
  .tag-note.busy { color: var(--accent); }
  .empty-tags { color: var(--muted); }
  /* No min-height: with no filters this collapses instead of holding space. */
  .filterbar:not(:empty) { margin-top: 9px; display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
  .filter-label { color: var(--muted); font-size: 12px; }
  .chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px;
    background: var(--tag-bg); color: var(--text); border: 1px solid var(--border);
    border-radius: 999px; font-size: 12px; cursor: pointer; white-space: nowrap;
  }
  .chip:hover { background: var(--tag-hover); }
  .chip.project { background: var(--project-bg); border-color: #453a6b; color: #cbbcff; }
  .chip.active { border-color: var(--accent); color: var(--accent); }
  .chip.active.project { border-color: var(--project); color: var(--project); }
  /* Removal is one click, but invisible until you go near the chip. */
  .x-remove {
    margin-left: 1px; margin-right: -2px; padding: 0 2px; opacity: 0;
    font-size: 13px; line-height: 1; transition: opacity .12s;
  }
  .chip:hover .x-remove, .cell-tags.editing .x-remove { opacity: .55; }
  .x-remove:hover { opacity: 1; color: var(--danger); }
  @media (prefers-reduced-motion: reduce) { .x-remove { transition: none; } }
  .chip .x { opacity: .75; }
  .clear-filters { padding: 3px 8px; background: transparent; color: var(--muted); border-color: transparent; font-size: 12px; }
  .load-error { margin: 10px 20px 0; }
  .table-scroll { min-height: 0; flex: 1; overflow: auto; padding: 0 20px 48px; }
  table { width: 100%; border-collapse: collapse; }
  th {
    position: sticky; top: 0; z-index: 2; padding: 9px 12px; text-align: left;
    background: var(--bg); color: var(--muted); border-bottom: 1px solid var(--border);
    font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em;
  }
  td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
  tr:hover td { background: var(--row); }
  .idea { white-space: pre-wrap; overflow-wrap: anywhere; }
  .idea-display { display: flex; align-items: flex-start; gap: 10px; }
  .reorder-handle {
    display: grid; place-items: center; flex: none; width: 24px; height: 28px; padding: 0;
    border: 0; background: transparent; color: var(--muted); opacity: .28;
    cursor: grab; touch-action: none;
  }
  .reorder-handle svg { pointer-events: none; }
  .reorder-handle:hover, .reorder-handle:focus-visible { color: var(--text); opacity: 1; }
  .reorder-handle:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
  .reorder-handle:disabled { color: var(--muted); opacity: .12; cursor: default; }
  .idea-reorder-handle { margin: -4px 0 -3px -6px; }
  .idea-editor-wrap { flex: 1; min-width: 0; }
  body.is-reordering { cursor: grabbing; user-select: none; }
  body.is-reordering * { cursor: grabbing !important; }
  tr.reordering-item td { background: rgba(74, 158, 255, .11); opacity: .72; }
  .task-item.reordering-item { background: rgba(74, 158, 255, .11); opacity: .72; }
  .reordering-item .reorder-handle { color: var(--accent); opacity: 1; }
  .idea-text { flex: 1; min-width: 0; }
  .pinned-mark { flex: none; width: 20px; color: var(--accent); }
  .pinned-mark svg { width: 15px; height: 15px; stroke: currentColor; }
  .row-menu { position: relative; flex: none; margin-left: auto; white-space: normal; }
  .row-menu summary { list-style: none; }
  .row-menu summary::-webkit-details-marker { display: none; }
  .row-menu-toggle {
    display: grid; place-items: center; width: 30px; height: 28px; padding: 0;
    border: 1px solid transparent; border-radius: 7px; color: var(--muted); cursor: pointer;
    font-size: 20px; line-height: 1;
  }
  .row-menu-toggle:hover, .row-menu[open] .row-menu-toggle { border-color: var(--border); color: var(--text); }
  .row-menu-toggle.working { color: var(--accent); }
  .row-menu-popover {
    position: absolute; z-index: 10; top: calc(100% + 4px); right: 0; width: 150px;
    display: grid; padding: 5px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--surface); box-shadow: 0 14px 35px #0009;
  }
  .row-menu-popover button { padding: 7px 8px; border: 0; background: transparent; text-align: left; }
  .row-menu-popover button:hover { background: var(--surface-2); }
  .row-menu-popover .danger { color: var(--danger); }
  .idea-editor-wrap { white-space: normal; }
  .idea-editor {
    display: block; width: 100%; min-height: 84px; resize: vertical; overflow-y: hidden;
    padding: 10px 12px; color: var(--text); background: var(--surface-2);
    border: 1px solid var(--border); border-radius: 8px; line-height: 1.5;
  }
  .edit-hint { margin-top: 6px; color: var(--muted); font-size: 12px; }
  .edit-actions { display: flex; gap: 7px; margin-top: 9px; }
  .edit-actions button { padding: 5px 10px; }
  .edit-error { margin: 9px 0 0; padding: 7px 9px; }
  /* The flex layout must live on an inner wrapper: display:flex on a <td>
     takes the cell out of the table's row layout, so its bottom border stops
     lining up with the other columns. */
  .tag-wrap { display: flex; gap: 6px; flex-wrap: wrap; }
  .col-tags { width: 34%; }
  .col-when-h { width: 130px; }
  .col-when { color: var(--muted); font-size: 13px; white-space: nowrap; }
  .empty { padding: 48px 0; color: var(--muted); text-align: center; }

  .today-mode { min-width: 0; container: today-workspace / inline-size; }
  .today-main { flex: 1; min-width: 0; height: 100%; overflow: hidden; }
  .today-wrap {
    width: 100%; height: 100%; min-height: 0; margin: 0; overflow: auto;
    overscroll-behavior: contain; container: task-list-pane / inline-size;
  }
  .today-wrap:focus-visible { outline: 1px solid var(--accent); outline-offset: -2px; }
  .today-main.task-open .today-wrap { display: none; }
  .day-picker { flex: none; display: flex; align-items: center; gap: 4px; margin-left: auto; }
  .day-choice {
    height: 38px; padding: 0 9px; background: transparent;
    color: var(--muted); font-size: 12px;
  }
  .day-choice[aria-pressed="true"] {
    color: var(--accent); border-color: var(--accent);
    background: rgba(74, 158, 255, .12);
  }
  .task-date-control {
    position: relative; display: grid; place-items: center; min-width: 48px; height: 38px;
    padding: 0 8px; border: 1px solid var(--border); border-radius: 8px;
    background: transparent; color: var(--muted); cursor: pointer;
  }
  .task-date-control:hover { background: var(--tag-hover); }
  .task-date-control:focus-within { outline: 1px solid var(--accent); outline-offset: 1px; }
  .task-date-control.active {
    color: var(--accent); border-color: var(--accent);
    background: rgba(74, 158, 255, .12);
  }
  .task-date-control span { pointer-events: none; white-space: nowrap; font-size: 12px; }
  .task-date-control input {
    position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0;
    border: 0; cursor: pointer; color-scheme: dark;
  }
  .task-date-control input::-webkit-calendar-picker-indicator {
    position: absolute; inset: 0; width: auto; height: auto; cursor: pointer;
  }
  .idea-project-filters, .task-category-filters {
    display: flex; gap: 5px; margin-top: 11px; padding: 1px 0 3px;
    overflow-x: auto; scrollbar-width: none;
  }
  .idea-project-filters::-webkit-scrollbar,
  .task-category-filters::-webkit-scrollbar { display: none; }
  .idea-project-filter, .task-category-filter {
    flex: none; min-height: 24px; padding: 2px 8px; border-color: var(--border);
    border-radius: 999px; background: transparent; color: var(--muted);
    font-size: 10px; line-height: 1; white-space: nowrap;
  }
  .idea-project-filter:hover, .task-category-filter:hover {
    color: var(--text); background: var(--surface-2);
  }
  .idea-project-filter.active, .task-category-filter.active {
    color: var(--accent); border-color: rgba(74, 158, 255, .55);
    background: rgba(74, 158, 255, .1);
  }
  .idea-project-filter.project {
    color: #cbbcff; border-color: #453a6b; background: var(--project-bg);
  }
  .idea-project-filter.project.active {
    color: var(--project); border-color: var(--project);
  }
  .task-list-heading {
    display: grid; grid-template-columns: minmax(0, 1fr) 108px 66px 58px;
    column-gap: 11px; margin: 0 20px; padding: 9px 2px;
    color: var(--muted); border-bottom: 1px solid var(--border);
    font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em;
  }
  .task-list { margin-top: 0; padding: 0 20px 48px; }
  .task-item { border-bottom: 1px solid var(--border); }
  .task-item.selected { background: rgba(255, 255, 255, .035); }
  .task-row {
    display: grid; grid-template-columns: minmax(0, 1fr) 108px 66px 58px;
    align-items: flex-start; column-gap: 11px;
    padding: 9px 2px 9px 0;
    /* Carried by every row, transparent until the task is active, so lighting
       one up moves nothing on the page. 2px of border replaces 2px of padding,
       which is why the shorthand above drops padding-left. */
    border-left: 2px solid transparent;
  }
  .task-row.editing-row { grid-template-columns: minmax(0, 1fr); }
  .task-main-cell {
    min-width: 0; display: flex; align-items: flex-start; gap: 8px;
  }
  .task-reorder-handle { margin: -2px -4px -1px 0; }
  .task-active-slot, .task-active-pin {
    flex: none; width: 24px; height: 24px; margin: -2px 0 0; padding: 3px;
  }
  .task-active-slot { display: block; }
  .task-active-pin {
    border-color: transparent; background: transparent; color: var(--muted); opacity: .28;
  }
  .task-row:hover .task-active-pin, .task-active-pin:hover,
  .task-active-pin:focus-visible { color: var(--text); opacity: 1; }
  .task-active-pin[aria-pressed="true"] {
    color: var(--accent); opacity: 1;
  }
  .task-active-pin[aria-pressed="true"] svg { fill: currentColor; }
  .subtask-reorder-handle { width: 18px; height: 21px; margin: 0 -2px 0 -4px; }
  .task-subtask.reordering-item { background: rgba(74, 158, 255, .11); opacity: .72; }
  .task-check {
    flex: none; width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--accent); cursor: pointer;
  }
  .task-text {
    flex: 1; min-width: 0; min-height: 24px; margin: -2px 0; padding: 2px 0;
    display: flex; align-items: baseline; gap: 8px; overflow-wrap: anywhere;
    border: 0; border-radius: 3px; background: transparent; color: inherit;
    line-height: inherit; text-align: left; cursor: pointer;
  }
  .task-text:hover { background: transparent; color: #fff; }
  span.task-text { cursor: default; }
  .task-title { min-width: 0; overflow-wrap: anywhere; }
  .task-progress {
    flex: none; padding: 0 5px; border: 1px solid var(--border); border-radius: 999px;
    color: var(--muted); font-size: 10px; line-height: 16px; white-space: nowrap;
  }
  .task-progress.complete { color: var(--accent); border-color: rgba(74, 158, 255, .45); }
  /* The whole of what a collected idea costs the list. Same pill as the subtask
     count, accented and carrying the lamp the rail already uses for Ideas, so
     "has ideas" reads as a different kind of thing at a glance. */
  .task-ideas-count {
    flex: none; display: inline-flex; align-items: center; gap: 3px;
    padding: 0 6px; border: 1px solid rgba(74, 158, 255, .45); border-radius: 999px;
    color: var(--accent); font-size: 11px; line-height: 16px; white-space: nowrap;
  }
  .task-ideas-count svg { width: 11px; height: 11px; }
  .task-row.done .task-ideas-count { opacity: .7; }
  .task-row.done .task-title { color: var(--muted); text-decoration: line-through; }
  .task-row.done .task-progress { opacity: .7; }
  .task-category-cell {
    min-width: 0; min-height: 20px; align-self: center;
    position: relative; display: flex; align-items: center; justify-content: flex-start; gap: 5px;
  }
  .task-category-trigger {
    min-width: 0; max-width: 100%; min-height: 24px; padding: 1px 2px;
    display: inline-flex; align-items: center; gap: 5px;
    border: 0; background: transparent; color: inherit; text-align: left;
  }
  .task-category-trigger:hover .task-category-pill,
  .task-category-trigger:focus-visible .task-category-pill { border-color: #666; color: var(--text); }
  .task-category-trigger:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
  .task-category-cell.manual .task-category-pill {
    border-color: rgba(74, 158, 255, .55); color: #d2e7ff;
  }
  .task-category-pill {
    min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
    padding: 1px 7px; border: 1px solid var(--border); border-radius: 999px;
    color: #bdbdbd; font-size: 10px; line-height: 16px; white-space: nowrap;
  }
  .task-category-cell.pending .task-category-pill { opacity: .72; }
  .task-category-empty { color: #555; font-size: 11px; }
  .task-category-spinner {
    flex: none; width: 8px; height: 8px; border: 1px solid #555;
    border-top-color: var(--accent); border-radius: 50%; animation: category-spin 1s linear infinite;
  }
  .task-category-menu {
    position: absolute; z-index: 30; top: calc(100% + 5px); left: 0;
    width: max-content; min-width: 180px; max-width: min(260px, calc(100vw - 28px));
    padding: 5px; border: 1px solid #4b4b4b; border-radius: 9px;
    background: #252525; box-shadow: 0 12px 30px rgba(0, 0, 0, .42);
  }
  .task-category-menu button {
    width: 100%; min-width: 0; display: flex; align-items: center; gap: 7px;
    padding: 6px 9px; border: 0; border-radius: 6px; background: transparent;
    color: var(--text); font-size: 12px; text-align: left; white-space: nowrap;
  }
  .task-category-menu button:hover, .task-category-menu button:focus-visible {
    background: var(--surface-2); outline: none;
  }
  .task-category-menu button:disabled { opacity: .55; }
  .task-category-menu-check { flex: 0 0 12px; color: var(--accent); text-align: center; }
  /* The label is always the second span; a trailing redo mark must not be the
     one that ellipsises. */
  .task-category-menu button span:nth-child(2) {
    flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  }
  .task-category-menu-redo {
    flex: 0 0 auto; display: inline-flex; align-items: center; color: var(--muted);
  }
  .task-category-menu button:hover .task-category-menu-redo,
  .task-category-menu button:focus-visible .task-category-menu-redo {
    color: var(--text);
  }
  @keyframes category-spin { to { transform: rotate(360deg); } }
  /* Yesterday's unfinished tasks still count as today's problem, so they stay
     on the list — dated, so it is clear they carried over. */
  .task-day-cell { min-width: 0; min-height: 20px; align-self: center; }
  .task-day { flex: none; align-self: center; color: var(--muted); font-size: 12px; white-space: nowrap; }
  .task-actions {
    min-width: 0; min-height: 24px; align-self: center;
    display: flex; align-items: center; justify-content: flex-end; gap: 2px;
  }
  .task-action { flex: none; padding: 2px 6px; opacity: 0; pointer-events: none; color: var(--muted); background: transparent; }
  .task-row:hover .task-action, .task-row:focus-within .task-action, .task-action:focus-visible {
    opacity: 1; pointer-events: auto;
  }
  .task-action:hover { color: var(--text); }
  .task-action.task-delete:hover { color: var(--danger); border-color: #5a3030; }
  /* Active: "being worked on right now". Any number of rows can carry it.
     The bar scans as one top group; the filled pin remains visible so removing
     a task from that group never requires hunting for its control. */
  .task-row.active { border-left-color: var(--accent); }
  .task-row.selected { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .075); }
  .task-editor {
    flex: 1; min-width: 0; padding: 6px 10px; color: var(--text);
    background: var(--surface-2); border: 1px solid var(--accent); border-radius: 8px;
  }
  .task-markdown { font-size: 13.5px; line-height: 1.55; overflow-wrap: anywhere; }
  .task-md-gap { height: 7px; }
  .task-md-heading { margin: 6px 0 3px; color: var(--text); font-weight: 600; }
  .task-md-heading.level-1 { font-size: 16px; }
  .task-md-heading.level-2 { font-size: 15px; }
  .task-md-heading.level-3, .task-md-heading.level-4 { font-size: 14px; }
  .task-md-list, .task-subtask { margin: 2px 0; }
  .task-md-list { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 3px; }
  .task-subtask { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
  /* Typed at the checkbox, not at "any input": a subtask being edited puts a
     text box on this row, and a 15px-wide one has nowhere to show the words. */
  .task-subtask input[type="checkbox"] {
    flex: none; width: 15px; height: 15px; margin: 3px 0 0; accent-color: var(--accent); cursor: pointer;
  }
  .task-subtask input[type="checkbox"]:disabled { cursor: default; opacity: .65; }
  .task-subtask input[type="checkbox"]:checked + span {
    color: var(--muted); text-decoration: line-through;
  }
  /* The words take the room so the delete control sits at the end of the row,
     hover-revealed like every other destructive control in the app. */
  .task-subtask > span { flex: 1; min-width: 0; }
  .task-subtask-delete {
    flex: none; padding: 0 4px; border: 0; border-radius: 6px; background: transparent;
    color: var(--muted); opacity: 0; pointer-events: none;
  }
  .task-subtask:hover .task-subtask-delete,
  .task-subtask:focus-within .task-subtask-delete,
  .task-subtask-delete:focus-visible { opacity: 1; pointer-events: auto; }
  .task-subtask-delete:hover { color: var(--danger); background: transparent; }
  .task-subtask-delete:disabled { opacity: 0; }
  .task-markdown .depth-1 { margin-left: 16px; }
  .task-markdown .depth-2 { margin-left: 32px; }
  .task-markdown .depth-3 { margin-left: 48px; }
  .task-markdown .depth-4 { margin-left: 64px; }
  .task-md-quote {
    margin: 4px 0; padding-left: 10px; border-left: 2px solid var(--border); color: var(--muted);
  }
  .task-md-code {
    margin: 6px 0; padding: 8px 10px; overflow-x: auto;
    border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2);
    color: var(--text); font: 12px/1.5 ui-monospace, "Cascadia Code", Consolas, monospace;
  }
  .task-markdown :not(pre) > code {
    padding: 1px 4px; border-radius: 4px; background: var(--surface-2);
    color: var(--text); font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  }
  /* A past day is a record of what happened, not a list to work from: task
     controls are disabled, while existing details can still be inspected. */
  .task-check:disabled { cursor: default; opacity: .7; }
  .today-empty { padding: 40px 0; color: var(--muted); text-align: center; }

  /* Inside a task. The focused layout gives this workspace the whole page;
     once the Today area is wide enough, the same workspace becomes an
     independent right pane beside the still-usable task list. */
  .task-view {
    width: 100%; height: 100%; min-width: 0; margin: 0; overflow: auto;
    overscroll-behavior: contain;
  }
  .task-view[hidden] { display: none; }
  .task-view-shell { width: 100%; min-height: 100%; }
  .task-view-head {
    position: sticky; top: 0; z-index: 5;
    display: flex; align-items: center; gap: 6px;
    padding: 14px max(28px, calc((100% - 620px) / 2)) 12px;
    border-bottom: 1px solid var(--border); background: var(--bg);
  }
  .task-view-body {
    width: min(620px, calc(100% - 56px)); margin: 0 auto; padding-bottom: 48px;
  }
  .task-view-spacer { flex: 1; }
  .task-view-back {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 9px 5px 6px; border-color: transparent; background: transparent;
    color: var(--muted);
  }
  .task-view-back:hover { color: var(--text); background: var(--surface-2); }
  .task-view-back-only, .task-view-close-only { align-items: center; gap: 5px; }
  .task-view-back-only { display: inline-flex; }
  .task-view-close-only { display: none; }
  .task-view-action {
    display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px;
    border-color: transparent; background: transparent; color: var(--muted); font-size: 12px;
  }
  .task-view-action:hover { color: var(--text); background: var(--surface-2); }
  .task-view-action[aria-pressed="true"] { color: var(--accent); }
  .task-view-action.danger:hover { color: var(--danger); background: #3a2626; }
  .task-view-title-row {
    display: flex; align-items: baseline; gap: 10px; margin: 18px 0 2px;
  }
  .task-view-title-row .task-check { margin-top: 6px; }
  .task-view-title { flex: 1; min-width: 0; margin: 0; font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
  .task-view-title-row.done .task-view-title { color: var(--muted); text-decoration: line-through; }
  .task-view-rename {
    flex: 1; min-width: 0; padding: 6px 10px; color: var(--text);
    background: var(--surface-2); border: 1px solid var(--accent); border-radius: 8px;
  }
  .task-view-meta { margin-bottom: 16px; color: var(--muted); font-size: 12px; }
  .task-view-scores {
    margin-top: 22px;
  }
  .task-score-head { display: flex; align-items: center; gap: 8px; }
  .task-score-head svg { width: 14px; height: 14px; color: var(--accent); }
  .task-score-head h2 { margin: 0; font-size: 12px; font-weight: 400; }
  .task-score-state {
    color: var(--muted); font-size: 10px; text-transform: uppercase;
    letter-spacing: .06em;
  }
  .task-score-state.updating, .task-score-state.loading,
  .task-score-state.categorizing { color: var(--accent); }
  .task-score-state.unavailable { color: var(--danger); }
  .task-score-summary { margin: 10px 0 0 22px; color: var(--muted); font-size: 11px; }
  .task-score-threshold { margin: 7px 0 0 22px; color: var(--muted); font-size: 10px; }
  .task-score-list {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px 22px; margin: 10px 0 0 22px;
  }
  .task-score-row {
    display: flex; align-items: baseline; gap: 8px; min-width: 0;
  }
  .task-score-name {
    min-width: 0; overflow-wrap: anywhere; color: var(--muted); font-size: 11px;
  }
  .task-score-value {
    margin-left: auto; color: var(--muted); font-size: 11px;
    font-variant-numeric: tabular-nums; text-align: right;
  }
  .task-score-row.qualifies .task-score-value { color: var(--accent); }
  .task-score-message { margin: 10px 0 0 22px; color: var(--muted); font-size: 11px; }
  .task-score-message button { margin-left: 4px; padding: 3px 7px; font-size: 10px; }
  /* The stored document, read as written: checklist lines are real checkboxes
     and everything else is prose. There is no second copy of it in a box. */
  .task-view-details { margin: 0 0 14px; color: #cecece; }
  .task-view-details .task-subtask { cursor: default; }
  /* Clicking a line edits that line. The checkbox and the drag handle keep
     their own jobs, so only the words invite a click. */
  .task-view-details.editable .task-subtask span,
  .task-view-details.editable .task-md-paragraph,
  .task-view-details.editable .task-md-heading,
  .task-view-details.editable .task-md-quote,
  .task-view-details.editable .task-md-list span:last-child { cursor: text; }
  .task-view-details [data-line].editing {
    display: flex; align-items: center; gap: 8px; margin: 2px 0;
  }
  /* Holds the checkbox's place so an editing step does not jump left. */
  .task-view-line-gutter { flex: none; width: 15px; }
  .task-view-line-editor {
    flex: 1; min-width: 0; padding: 4px 8px; color: var(--text);
    background: var(--surface-2); border: 1px solid var(--accent); border-radius: 6px;
  }
  .task-view-line-editor:focus { outline: none; }
  .task-view-compose { margin-top: 18px; }
  .task-view-compose-box {
    display: block; width: 100%; resize: vertical; padding: 9px 12px;
    color: var(--text); background: var(--surface-2);
    border: 1px solid var(--border); border-radius: 8px; line-height: 1.5;
  }
  .task-view-compose-box:focus { border-color: var(--accent); outline: none; }
  .task-view-compose-box::placeholder { color: var(--muted); }
  .task-view-compose-row {
    display: flex; align-items: center; gap: 10px; margin-top: 8px;
  }
  /* Two real halves of one control, and the lit one is the only thing that says
     where Enter sends the text. The same answer the compose row gives to a slot
     with two purposes. */
  .task-view-target { display: inline-flex; }
  .task-view-target-option {
    display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px;
    color: var(--muted); font-size: 12px; border-radius: 0;
  }
  .task-view-target-option:first-child { border-radius: 8px 0 0 8px; }
  .task-view-target-option:last-child { border-radius: 0 8px 8px 0; margin-left: -1px; }
  .task-view-target-option svg { width: 12px; height: 12px; }
  .task-view-target-option.on {
    color: var(--text); border-color: rgba(74, 158, 255, .45); background: rgba(74, 158, 255, .14);
    position: relative; z-index: 1;
  }
  .task-view-compose-hint { flex: 1; min-width: 0; color: var(--muted); font-size: 11px; }
  .task-view-save { padding: 6px 12px; font-size: 12px; }
  .task-view-compose-error { margin-top: 8px; color: var(--danger); font-size: 12px; }
  .task-view-ideas { margin-top: 26px; }
  .task-view-ideas-head {
    display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
    color: var(--muted); font-size: 12px;
  }
  .task-view-ideas-head svg { width: 14px; height: 14px; color: var(--accent); }
  .task-view-rule { flex: 1; height: 1px; background: var(--border); }
  /* Read-oriented on purpose: text and a time, no row menu. Editing, tagging,
     pinning and archiving stay on Ideas so there is one place that manages an
     idea, and Today does not grow a second Ideas table. */
  .task-idea {
    display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border);
  }
  .task-idea:last-child { border-bottom: 0; }
  .task-idea-text { flex: 1; min-width: 0; font-size: 13.5px; overflow-wrap: anywhere; }
  .task-idea-when { flex: none; color: var(--muted); font-size: 12px; }
  .task-ideas-state { padding: 10px 0; color: var(--muted); font-size: 13px; }
  .task-ideas-state.error { color: var(--danger); }

  /* The split exists only when both sides can remain real workspaces: a useful
     task list at 420px and a readable task document at 500px, with the extra
     room biased slightly toward the document. */
  @container today-workspace (min-width: 1100px) {
    .today-main.task-open {
      display: grid;
      grid-template-columns: minmax(420px, 45fr) minmax(500px, 55fr);
    }
    .today-main.task-open .today-wrap { display: block; }
    .today-main.task-open .task-view { border-left: 1px solid var(--border); }
    .today-main.task-open .task-view-back-only { display: none; }
    .today-main.task-open .task-view-close-only { display: inline-flex; }
  }

  /* The left pane is allowed to become narrow without turning into a stripped
     down list. Its rows wrap to a second line, but category, date and every
     task action remain available. */
  @container task-list-pane (max-width: 700px) {
    .today-toolbar { padding-inline: 14px; }
    .compose-row { align-items: flex-start; flex-wrap: wrap; gap: 8px; }
    .task-compose-fields { flex-basis: 100%; }
    .day-picker { margin-left: 88px; }
    .task-list-heading {
      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }
    .task-list { margin-top: 12px; padding-inline: 14px; }
    .task-item:first-child { border-top: 1px solid var(--border); }
    .task-row { display: flex; flex-wrap: wrap; column-gap: 7px; row-gap: 6px; }
    .task-main-cell { flex: 1 0 100%; width: 100%; column-gap: 7px; }
    .task-text { flex: 1 1 auto; }
    .task-category-cell { flex: 0 1 78px; margin-left: 71px; }
    .task-day-cell { flex: 0 0 auto; }
    .task-actions { flex: 1 1 58px; }
    .task-category-pill { padding-inline: 5px; }
  }

  .projects-mode, .tags-mode {
    overflow: auto; align-items: flex-start; justify-content: center;
    color: var(--cui-ink); background: var(--cui-field);
    font-family: var(--cui-font);
  }
  .tags-mode { container: tags-board / inline-size; }
  .compact-panel {
    min-width: 0; border: 1px solid var(--cui-line); border-radius: 0;
    background: var(--cui-panel); box-shadow: none;
  }
  body[data-compact-ui] :is(.projects-mode, .tags-mode) :is(button, input) {
    min-height: var(--cui-control-size); border: 1px solid var(--cui-line);
    border-radius: 0; color: var(--cui-ink); background: var(--cui-row);
    font: 600 11px/1.2 var(--cui-font);
  }
  body[data-compact-ui] :is(.projects-mode, .tags-mode) button {
    padding: 0 6px;
  }
  body[data-compact-ui] :is(.projects-mode, .tags-mode) button:hover:not(:disabled) {
    border-color: var(--cui-accent-strong); background: var(--cui-accent-soft);
  }
  body[data-compact-ui] :is(.projects-mode, .tags-mode)
    :is(button, input, a):focus-visible {
    outline: 2px solid var(--cui-accent); outline-offset: 1px;
  }
  body[data-compact-ui] :is(.projects-mode, .tags-mode) :is(button, input):disabled {
    color: var(--cui-muted); opacity: .65;
  }

  .projects-wrap {
    container: projects-sheet / inline-size;
    width: min(1180px, calc(100% - 24px)); margin: 12px auto 24px;
  }
  .projects-head {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
    gap: 8px; min-height: 40px; padding: 5px 6px;
    border-bottom: 1px solid var(--cui-line);
  }
  .projects-heading { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
  .projects-head h1 { margin: 0; color: var(--cui-head); font-size: 18px; line-height: 1.15; }
  .projects-intro {
    min-width: 0; overflow: hidden; color: var(--cui-muted); font-size: 10px;
    line-height: 1.25; text-overflow: ellipsis; white-space: nowrap;
  }
  .projects-head-actions { display: flex; align-items: center; gap: 6px; }
  .projects-update { white-space: nowrap; }
  .projects-count { color: var(--cui-muted); font-size: 10px; white-space: nowrap; }
  .projects-note {
    margin: 0; padding: 5px 6px; border-bottom: 1px solid var(--cui-line);
    font-size: 11px; line-height: 1.3;
  }
  .projects-table-wrap { overflow: visible; background: var(--cui-panel); }
  /* width is explicit so the fixed layout gives the Goal column the remaining
     panel space instead of shrinking the table to the labelled columns. */
  .projects-table { width: 100%; min-width: 0; table-layout: fixed; font-size: 11px; }
  .projects-table th {
    padding: 5px 6px; color: var(--cui-muted); background: var(--cui-panel);
    border-color: var(--cui-line); font: 600 10px/1.2 var(--cui-font);
    letter-spacing: .04em;
  }
  .projects-table td {
    padding: 5px 6px; color: var(--cui-ink); background: var(--cui-row);
    border-color: var(--cui-line); line-height: 1.3;
  }
  .projects-table tbody tr:hover td { background: #161616; }
  .projects-table tr:last-child td { border-bottom: 0; }
  /* Fixed table layout sizes columns from the header row, so the widths must
     live on the th cells; the td mirrors keep body-only reads honest. */
  .projects-table th:nth-child(1), .project-name { width: 150px; }
  .project-name strong { display: block; color: var(--cui-head); font-size: 12px; font-weight: 600; }
  .project-slug { color: var(--cui-muted); font: 9px/1.3 Consolas, monospace; }
  .projects-table th:nth-child(2), .project-status-cell { width: 66px; }
  .project-status {
    color: var(--cui-muted); font-size: 10px; font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase;
  }
  .project-goal { color: var(--cui-ink); font-size: 12px; line-height: 1.35; }
  .projects-table th:nth-child(4), .project-document { width: 122px; white-space: nowrap; }
  .project-document a {
    display: inline-flex; align-items: center; gap: 4px; min-height: var(--cui-control-size);
    padding: 0 4px; border: 1px solid transparent; color: var(--cui-accent);
    font: 600 11px/1.2 var(--cui-font);
  }
  .project-document a:hover { border-color: var(--cui-accent-strong); text-decoration: none; }
  .projects-state {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 56px; padding: 12px; color: var(--cui-muted); text-align: center;
    font-size: 12px;
  }
  .projects-state[data-state="error"] { color: var(--cui-error); }

  .tags-wrap {
    width: min(1180px, calc(100% - 24px)); margin: 12px auto 24px;
    display: grid; grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "categories" "core" "promote";
    align-items: start; gap: 8px;
  }
  .tags-block {
    container: tag-panel / inline-size; margin: 0; overflow: hidden;
  }
  #task-category-editor { grid-area: categories; }
  .core-tags-panel { grid-area: core; }
  .promote-tags-panel { grid-area: promote; }
  .tags-block h2 {
    display: flex; align-items: center; min-height: 34px; margin: 0; padding: 0 6px;
    border-bottom: 1px solid var(--cui-line); color: var(--cui-head);
    font: 600 14px/1.2 var(--cui-font); letter-spacing: 0; text-transform: none;
  }
  .task-category-intro {
    margin: 0; padding: 5px 6px; border-bottom: 1px solid var(--cui-line);
    color: var(--cui-muted); font-size: 10px; line-height: 1.3;
  }
  .task-category-list, .core-list, .promote-list { border: 0; }
  .task-category-row, .task-category-add {
    display: grid; grid-template-columns: minmax(116px, .7fr) minmax(160px, 1.3fr) auto;
    align-items: center; gap: 4px; padding: 2px 4px;
    border-bottom: 1px solid var(--cui-line); background: var(--cui-row);
  }
  .task-category-row input, .task-category-add input, .core-input {
    min-width: 0; padding: 0 5px; overflow: hidden; text-overflow: ellipsis;
    background: transparent !important; border-color: transparent !important;
  }
  .task-category-row input:hover, .task-category-row input:focus,
  .task-category-add input:hover, .task-category-add input:focus,
  .core-input:hover, .core-input:focus {
    border-color: var(--cui-line) !important; background: #171717 !important;
  }
  .task-category-name, .core-name, .core-new-name { color: var(--cui-head) !important; font-weight: 600; }
  .task-category-description, .core-desc, .core-new-desc { color: var(--cui-muted) !important; }
  .task-category-description:focus, .core-desc:focus { color: var(--cui-ink) !important; }
  .task-category-actions { display: flex; align-items: center; gap: 2px; }
  .task-category-actions button { min-width: var(--cui-control-size); padding: 0 5px; }
  .task-category-actions button:disabled { opacity: .45; }
  .task-category-remove, .core-remove { color: var(--cui-muted) !important; }
  .task-category-remove:hover, .core-remove:hover {
    color: var(--cui-error) !important; border-color: var(--cui-error) !important;
  }
  .task-category-add { border-bottom: 0; }
  .core-row, .core-add {
    display: grid; grid-template-columns: minmax(104px, .7fr) minmax(150px, 1.3fr) 3ch auto;
    align-items: center; gap: 3px; padding: 1px 4px;
    border-bottom: 1px solid var(--cui-line); background: var(--cui-row);
  }
  .core-add { border-bottom: 0; }
  .core-row .core-input { font-size: 12px; }
  .core-count {
    min-width: 3ch; color: var(--cui-muted); text-align: right;
    font: 400 10px/1.2 var(--cui-font);
  }
  .core-remove {
    width: var(--cui-control-size); padding: 0; opacity: 1; pointer-events: auto;
    background: transparent !important; border-color: transparent !important;
  }
  .make-core, #core-add { padding: 0 6px; white-space: nowrap; }
  /* The promotion ledger flows into two columns once its panel has room;
     density comes from spacing and text, never from smaller controls. */
  .promote-list {
    display: grid; grid-template-columns: minmax(0, 1fr); align-items: start;
  }
  .promote-list .tags-hint { grid-column: 1 / -1; }
  @container tag-panel (min-width: 440px) {
    .promote-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  }
  .promote-row {
    display: grid; grid-template-columns: minmax(0, 1fr) 3ch auto;
    align-items: center; gap: 4px; min-height: calc(var(--cui-control-size) + 2px);
    padding: 1px 4px; border-bottom: 1px solid var(--cui-line); background: var(--cui-row);
  }
  .promote-row:last-child { border-bottom: 0; }
  .promote-name {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 12px;
  }
  /* The Tags in Use header carries the filter beside the heading. */
  .panel-head {
    display: flex; align-items: center; gap: 6px; padding: 2px 6px;
    border-bottom: 1px solid var(--cui-line);
  }
  .panel-head h2 { flex: 1 1 auto; min-height: 30px; padding: 0; border-bottom: 0; }
  .promote-filter {
    min-width: 0; width: 170px; padding: 0 5px;
    color: var(--cui-ink); background: var(--cui-row); border: 1px solid var(--cui-line);
    font: 400 11px/1.2 var(--cui-font);
  }
  .tags-hint { padding: 8px 6px; color: var(--cui-muted); font-size: 12px; line-height: 1.35; }
  .tags-block .tag-note {
    margin: 0; padding: 5px 6px; border-top: 1px solid var(--cui-line);
    font-size: 11px; line-height: 1.3;
  }
  .tag-note[data-state="busy"] { color: var(--cui-accent); }
  .tag-note[data-state="success"] { color: var(--cui-ready); }
  .tag-note[data-state="warning"], .projects-note.warning { color: var(--cui-warning); }
  .tag-note[data-state="error"] { color: var(--cui-error); }

  .compact-accent-setting {
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px;
    margin: 4px 0; padding: 6px 10px; border-block: 1px solid var(--cui-line);
    color: var(--cui-muted); font: 600 11px/1.2 var(--cui-font);
  }
  .compact-accent-options { display: grid; grid-auto-flow: column; gap: 2px; }
  .compact-accent-options button {
    min-height: var(--cui-control-size); padding: 0 6px; border: 1px solid var(--cui-line);
    border-radius: 0; color: var(--cui-muted); background: var(--cui-row);
    font: 600 11px/1.2 var(--cui-font);
  }
  .compact-accent-options button[aria-pressed="true"] {
    border-color: var(--cui-accent-strong); color: var(--cui-head);
    background: var(--cui-accent-soft); box-shadow: inset 0 -2px 0 var(--cui-accent);
  }
  .compact-accent-options button:focus-visible {
    outline: 2px solid var(--cui-accent); outline-offset: 1px;
  }

  @container tags-board (min-width: 920px) {
    .tags-wrap {
      grid-template-columns: minmax(520px, 1.25fr) minmax(360px, .85fr);
      grid-template-areas: "categories core" "categories promote";
    }
  }
  @container projects-sheet (max-width: 760px) {
    .projects-head { grid-template-columns: minmax(0, 1fr); }
    .projects-heading { align-items: flex-start; flex-direction: column; gap: 2px; }
    .projects-intro { white-space: normal; }
    .projects-head-actions { justify-content: space-between; }
    .projects-table { display: block; }
    .projects-table thead {
      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }
    .projects-table tbody, .projects-table tr, .projects-table td { display: block; width: 100%; }
    .projects-table tr { padding: 4px 6px; border-bottom: 1px solid var(--cui-line); }
    .projects-table tr:last-child { border-bottom: 0; }
    .projects-table td {
      display: grid; grid-template-columns: minmax(78px, .32fr) minmax(0, 1fr);
      gap: 0 6px; width: auto; padding: 3px 0; border: 0; background: transparent;
    }
    .projects-table td::before {
      content: attr(data-label); grid-column: 1; color: var(--cui-muted);
      font: 600 9px/1.3 var(--cui-font); letter-spacing: .04em; text-transform: uppercase;
    }
    .project-name::before { grid-row: 1 / span 2; }
    .project-name strong, .project-slug, .project-status,
    .project-goal-text, .project-document a { grid-column: 2; }
    .project-name strong { grid-row: 1; }
    .project-slug { grid-row: 2; }
    .project-document { white-space: normal; }
    .project-document a { justify-self: start; }
  }
  @container tag-panel (max-width: 560px) {
    .task-category-row, .task-category-add { grid-template-columns: minmax(0, 1fr) auto; }
    .task-category-name, .task-category-new-name { grid-column: 1; grid-row: 1; }
    .task-category-description, .task-category-new-description {
      grid-column: 1 / -1; grid-row: 2;
    }
    .task-category-actions, #task-category-add { grid-column: 2; grid-row: 1; }
  }
  @container tag-panel (max-width: 430px) {
    .task-category-actions { grid-column: 1 / -1; grid-row: 3; }
    .core-row, .core-add { grid-template-columns: minmax(0, 1fr) auto; }
    .core-name, .core-new-name { grid-column: 1; grid-row: 1; }
    .core-desc, .core-new-desc { grid-column: 1 / -1; grid-row: 2; }
    .core-row .core-count { grid-column: 2; grid-row: 1; }
    .core-remove { grid-column: 2; grid-row: 2; }
    .core-add .core-count { display: none; }
    #core-add { grid-column: 2; grid-row: 1; }
  }
  @media (min-width: 921px) and (pointer: fine) {
    .core-remove { opacity: 0; pointer-events: none; }
    .core-row:hover .core-remove, .core-row:focus-within .core-remove,
    .core-remove:focus-visible { opacity: 1; pointer-events: auto; }
  }
  @media (forced-colors: active) {
    body[data-compact-ui] :is(.compact-panel, .projects-table th, .projects-table td,
      .task-category-row, .task-category-add, .core-row, .core-add, .promote-row,
      .compact-accent-options button) { border-color: CanvasText; }
    body[data-compact-ui] :is(.projects-mode, .tags-mode, .compact-accent-setting)
      :is(button, input, a):focus-visible { outline-color: Highlight; }
    .compact-accent-options button[aria-pressed="true"] {
      border-color: Highlight; box-shadow: inset 0 -2px 0 Highlight;
    }
    .task-row.active { border-left-color: Highlight; }
    .task-active-pin[aria-pressed="true"] { color: Highlight; }
  }

  .settings-panel {
    position: fixed; z-index: 30; left: 64px; bottom: 14px; width: 290px; padding: 8px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  }
  .settings-panel[hidden] { display: none; }
  .settings-action {
    width: 100%; display: flex; padding: 9px 10px; border: 0; background: transparent;
    border-radius: 6px; color: var(--text); text-align: left;
  }
  a.settings-action:hover { background: var(--surface-2); text-decoration: none; }
  .settings-action:disabled { color: var(--muted); cursor: default; background: transparent; }
  .connection { margin-top: 5px; padding: 10px; border-top: 1px solid var(--border); }
  .connection-title { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; font-size: 12px; }
  .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
  .status-dot.reachable { background: #70c58b; }
  .status-dot.unreachable { background: #e87979; }
  .connection-url { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }

  .device-overlay {
    position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
    padding: 24px; background: rgba(0, 0, 0, .62);
  }
  .device-overlay[hidden] { display: none; }
  .device-dialog {
    width: min(100%, 560px); max-height: min(760px, calc(100vh - 48px)); overflow: auto;
    padding: 22px; border: 1px solid var(--border); border-radius: 12px;
    background: var(--surface); box-shadow: 0 24px 70px #0008;
  }
  .device-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
  .device-head h2 { margin: 0 0 4px; font-size: 19px; }
  .device-head p { margin: 0; color: var(--muted); font-size: 12px; }
  #device-close { flex: none; padding: 2px 9px; font-size: 20px; }
  .device-form { display: flex; gap: 8px; margin-top: 20px; }
  .device-form input {
    flex: 1; min-width: 0; padding: 9px 11px; border: 1px solid var(--border);
    border-radius: 8px; outline: 0; background: var(--surface-2); color: var(--text);
  }
  .device-form input:focus { border-color: var(--accent); }
  .device-token-once {
    display: grid; gap: 9px; margin-top: 14px; padding: 13px;
    border: 1px solid #665c2f; border-radius: 8px; background: #34301f;
  }
  .device-token-once[hidden] { display: none; }
  .device-token-once code {
    display: block; padding: 9px; overflow-wrap: anywhere; user-select: all;
    border-radius: 6px; background: #181818; color: #f2e5a2;
  }
  .device-token-once button { justify-self: start; }
  .device-error { min-height: 20px; margin-top: 8px; color: var(--danger); font-size: 12px; }
  .device-list { display: grid; gap: 8px; margin-top: 8px; }
  .device-row {
    display: flex; align-items: center; gap: 12px; padding: 10px;
    border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2);
  }
  .device-details { flex: 1; min-width: 0; }
  .device-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .device-used { color: var(--muted); font-size: 11px; }
  .device-revoke { flex: none; color: var(--danger); }
  .device-empty { padding: 14px 0; color: var(--muted); }

  @media (max-width: 640px) and (display-mode: standalone) {
    :root { --mobile-bottom-inset: var(--mobile-safe-bottom); }
  }

  @media (max-width: 640px) {
    html, body { overflow: hidden; overscroll-behavior-y: none; }
    .rail {
      position: fixed !important; inset: auto 0 0 !important; z-index: 25;
      width: auto; height: calc(var(--mobile-nav-height) + var(--mobile-bottom-inset));
      padding-bottom: var(--mobile-bottom-inset); flex-direction: row;
      border: 0; border-top: 1px solid var(--border); transform: translate3d(0, 0, 0);
    }
    .mode-button, .capture-nav, .settings-button {
      flex: 1 1 0; width: auto; min-width: 0; height: var(--mobile-nav-height); margin: 0;
    }
    .mode-button.active::before { inset: auto 0 0; width: auto; height: 3px; }
    .app {
      height: calc(100vh - var(--mobile-nav-height) - var(--mobile-bottom-inset));
      margin: 0; overflow: hidden;
    }
    /* Keep touch scrolling inside the pane so it cannot move the fixed app shell. */
    .ideas-mode.active, .today-mode.active {
      display: block; overflow: auto; overscroll-behavior-y: contain;
      -webkit-overflow-scrolling: touch;
    }
    .filter-backdrop { inset: 0 0 calc(var(--mobile-nav-height) + var(--mobile-bottom-inset)); }
    .review-panel {
      inset: 0 auto calc(var(--mobile-nav-height) + var(--mobile-bottom-inset)) 0;
      width: min(86vw, 320px); height: auto; max-height: none;
      border-right: 1px solid var(--border); border-bottom: 0;
    }
    .review-main, .today-main { height: auto; }
    .today-main { overflow: visible; }
    .today-wrap { height: auto; min-height: 100%; overflow: visible; }
    .review-main { min-height: 100%; }
    .table-scroll { overflow: visible; padding-inline: 10px; }
    .table-scroll table, .table-scroll tbody, .table-scroll tr, .table-scroll td { display: block; width: 100%; }
    .table-scroll thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
    .table-scroll tr { padding: 14px 2px; border-bottom: 1px solid var(--border); }
    .table-scroll td { padding: 0; border: 0; }
    .table-scroll tr:hover td { background: transparent; }
    .reorder-handle { width: 30px; opacity: .65; }
    .subtask-reorder-handle { width: 24px; }
    .idea-reorder-handle { margin-left: -4px; }
    .idea-display { flex-wrap: wrap; gap: 7px; }
    .idea-text { flex: 1 1 0; margin-bottom: 3px; font-size: 15px; line-height: 1.55; }
    .row-menu-toggle { width: 42px; height: 42px; }
    .cell-tags { margin-top: 9px; }
    .tag-wrap { gap: 7px; }
    .col-when { margin-top: 9px; font-size: 12px; }
    .col-when::before { content: "Created "; color: #666; }
    .review-toolbar, .today-toolbar { padding-inline: 10px; }
    .task-list-heading {
      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }
    .task-list { margin-top: 12px; padding-inline: 10px; }
    .task-item:first-child { border-top: 1px solid var(--border); }
    /* The bottom bar owns New on a phone, on both pages alike; the search
       icon stays, because nothing else offers it. */
    .compose-new { display: none; }
    .settings-panel { left: auto; right: 10px; bottom: calc(70px + var(--mobile-bottom-inset)); }
    .device-overlay { padding: 12px; }
    .device-dialog { max-height: calc(100vh - 24px); padding: 17px; }
    .device-form { align-items: stretch; flex-direction: column; }
    .capture-overlay { padding: 12px 12px calc(12px + var(--mobile-bottom-inset)); align-items: flex-start; }
    .capture-dialog { width: 100%; max-height: calc(100dvh - var(--mobile-nav-height) - 24px); margin-top: 3vh; padding: 14px; }
    .capture-actions { align-items: stretch; flex-wrap: wrap; }
    .capture-fallback { flex: 1 1 180px; align-self: center; }
    .capture-spacer { display: none; }
    .voice-job { align-items: flex-start; flex-wrap: wrap; }
    .voice-job-actions { width: 100%; }
    .capture-dialog.voice-focused {
      min-height: min(620px, calc(100dvh - var(--mobile-nav-height) - 24px));
      display: flex; flex-direction: column;
    }
    .capture-dialog.voice-focused #capture,
    .capture-dialog.voice-focused #capture-save,
    .capture-dialog.voice-focused .capture-fallback { display: none; }
    .capture-dialog.voice-focused .capture-actions {
      display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 24px;
    }
    .capture-dialog.voice-focused .voice-start {
      width: 100%; min-height: 96px; justify-content: center;
      border-radius: 18px; font-size: 23px; font-weight: 700;
    }
    .capture-dialog.voice-focused .voice-start .voice-mic { font-size: 16px; }
    .capture-dialog.voice-focused .voice-type-instead { min-height: 46px; }
    .capture-dialog.voice-focused .voice-foreground {
      margin: 13px 0 0; text-align: center; font-size: 13px;
    }
    .capture-dialog.voice-focused .voice-panel {
      margin-top: 20px; padding: 20px 16px; border-radius: 14px;
    }
    .capture-dialog.voice-focused .voice-status-row { align-items: flex-start; gap: 13px; }
    .capture-dialog.voice-focused .voice-status-row strong { font-size: 18px; }
    .capture-dialog.voice-focused .voice-status-row span:not(.voice-pulse) { margin-top: 4px; font-size: 13px; }
    .capture-dialog.voice-focused .voice-status-row time { font-size: 20px; }
    .capture-dialog.voice-focused .voice-pulse { width: 14px; height: 14px; margin-top: 6px; }
    .capture-dialog.voice-focused .voice-actions { margin-top: 22px; }
    .capture-dialog.voice-focused #voice-stop {
      width: 100%; min-height: 76px; border-radius: 15px; font-size: 20px; font-weight: 700;
    }
    .capture-dialog.voice-focused #voice-cancel { width: 100%; min-height: 48px; }
    .capture-dialog.voice-focused .voice-recent { margin-top: auto; }
    .col-tags { width: 30%; }
    .projects-wrap, .tags-wrap { width: calc(100% - 32px); margin-top: 5vh; }
    .projects-head { align-items: flex-start; flex-wrap: wrap; }
    .projects-intro { flex-basis: 100%; }
    .projects-update { margin-left: 0; }
    .projects-count { margin-left: 0; }
    .projects-table-wrap { overflow-x: visible; }
    .projects-table { display: block; min-width: 0; }
    .projects-table thead {
      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }
    .projects-table tbody, .projects-table tr, .projects-table td { display: block; width: 100%; }
    .projects-table tr { padding: 15px 13px; border-bottom: 1px solid var(--border); }
    .projects-table tr:last-child { border-bottom: 0; }
    .projects-table td { padding: 0; border: 0; }
    .projects-table tr:hover td { background: transparent; }
    .project-name { min-width: 0; margin-bottom: 8px; }
    .project-status-cell { margin-bottom: 10px; }
    .project-goal { min-width: 0; margin-bottom: 11px; }
    .project-document { width: auto; }
    /* Nothing to hover on a touch screen, so the row actions stay put. */
    .task-action, .task-active-pin, .core-remove, .task-subtask-delete {
      opacity: 1; pointer-events: auto;
    }
    /* Keep the task readable beside touch-visible actions. The title owns the
       first line; category and actions form one compact aligned second line. */
    .task-row { display: flex; flex-wrap: wrap; column-gap: 7px; row-gap: 6px; }
    .task-main-cell { flex: 1 0 100%; width: 100%; column-gap: 7px; }
    .task-text { flex: 1 1 auto; }
    .task-category-cell {
      flex: 0 1 78px; margin-left: 87px;
    }
    .task-day-cell { flex: 0 0 auto; }
    .task-actions { flex: 1 1 58px; }
    .task-category-pill { padding-inline: 5px; }
    .task-view { height: auto; min-height: 100%; overflow: visible; }
    .task-view-head { padding-inline: 16px; }
    .task-view-body { width: calc(100% - 32px); }
    /* One task is already the whole screen here, so its controls give up their
       labels rather than wrapping onto a second row. */
    .task-view-action span { display: none; }
    .task-view-action { padding: 7px 9px; }
    .task-view-compose-row { flex-wrap: wrap; }
    .task-view-compose-hint { order: 3; flex-basis: 100%; }
    .task-score-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 640px) {
    /* Unsupported dynamic viewport units leave the 100vh fallback above intact. */
    .app { height: calc(100dvh - var(--mobile-nav-height) - var(--mobile-bottom-inset)); }
  }

  @media (max-width: 420px) {
    .compose-row { gap: 8px; }
    .task-compose-fields { gap: 8px; }
    .compose-input { min-width: 0; }
    .count { display: none; }
    .day-choice { padding-inline: 6px; font-size: 11px; }
    .task-date-control { min-width: 38px; padding-inline: 6px; }
    .task-date-control span { font-size: 11px; }
  }