/* ─── Breathe tokens (aligned with breathe-board / breathe-books) ─── */
/* When packages/style is extracted in Phase 3, this block moves there. */

:root, [data-theme="light"] {
    --bg: #f5f3ef;
    --bg-surface: #ebe8e3;
    --bg-hover: #e5e2dc;
    --bg-active: #dddad4;
    --bg-inset: #e0ddd7;
    --text-primary: #2c2c2c;
    --text-secondary: #6b6b6b;
    --text-muted: #a0a0a0;
    --text-inverse: #f5f3ef;
    --accent: #4a7090;
    --accent-hover: #3d5f7a;
    --accent-soft: rgba(74, 112, 144, 0.1);
    --forest: #4a7060;
    --gold: #8a7a4a;
    --blue: #4a7090;
    --border: #d5d0c8;
    --border-light: #e0ddd7;
    --border-focus: #4a7090;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.08);
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --weight-light: 300;
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;

    /* breathe-lines-local tokens; will move to packages/style if shared */
    --priority-high: var(--gold);
    --priority-medium: var(--accent);
    --priority-low: var(--forest);
    --now-marker: #a85048;
    --now-marker-soft: rgba(168, 80, 72, 0.1);
    --danger: #d9534f;
}

[data-theme="dark"] {
    --bg: #0c0f14;
    --bg-surface: #111520;
    --bg-hover: #1a2030;
    --bg-active: #202838;
    --bg-inset: #151a25;
    --text-primary: #fcfcfd;
    --text-secondary: #dce2e8;
    --text-muted: #bcc8d4;
    --text-inverse: #0c0f14;
    --accent: #c0d8f0;
    --accent-hover: #dce8f4;
    --accent-soft: rgba(192, 216, 240, 0.1);
    --forest: #7aaa90;
    --gold: #c0b080;
    --blue: #c0d8f0;
    --border: #1a2030;
    --border-light: #151a25;
    --border-focus: #c0d8f0;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4);

    --now-marker: #c87870;
    --now-marker-soft: rgba(200, 120, 112, 0.15);
    --danger: #e8736f;
}

@media (prefers-color-scheme: light) {
    [data-theme="system"] {
        --bg: #f5f3ef;
        --bg-surface: #ebe8e3;
        --bg-hover: #e5e2dc;
        --bg-active: #dddad4;
        --bg-inset: #e0ddd7;
        --text-primary: #2c2c2c;
        --text-secondary: #6b6b6b;
        --text-muted: #a0a0a0;
        --text-inverse: #f5f3ef;
        --accent: #4a7090;
        --accent-hover: #3d5f7a;
        --accent-soft: rgba(74, 112, 144, 0.1);
        --forest: #4a7060;
        --gold: #8a7a4a;
        --blue: #4a7090;
        --border: #d5d0c8;
        --border-light: #e0ddd7;
        --border-focus: #4a7090;
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
        --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.06);
        --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.08);
        --now-marker: #a85048;
        --now-marker-soft: rgba(168, 80, 72, 0.1);
        --danger: #d9534f;
    }
}

@media (prefers-color-scheme: dark) {
    [data-theme="system"] {
        --bg: #0c0f14;
        --bg-surface: #111520;
        --bg-hover: #1a2030;
        --bg-active: #202838;
        --bg-inset: #151a25;
        --text-primary: #fcfcfd;
        --text-secondary: #dce2e8;
        --text-muted: #bcc8d4;
        --text-inverse: #0c0f14;
        --accent: #c0d8f0;
        --accent-hover: #dce8f4;
        --accent-soft: rgba(192, 216, 240, 0.1);
        --forest: #7aaa90;
        --gold: #c0b080;
        --blue: #c0d8f0;
        --border: #1a2030;
        --border-light: #151a25;
        --border-focus: #c0d8f0;
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
        --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.3);
        --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4);
        --now-marker: #c87870;
        --now-marker-soft: rgba(200, 120, 112, 0.15);
        --danger: #e8736f;
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    font-weight: var(--weight-normal);
    background: var(--bg);
    color: var(--text-primary);
    min-height: 100vh;
    letter-spacing: 0.01em;
    line-height: 1.5;
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

::selection {
    background: var(--accent-soft);
    color: var(--text-primary);
}

header {
    padding: 16px 24px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 20px;
}

.header-settings {
    margin-left: auto;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}

.header-settings:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.header-settings svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Settings is now a page (Phase 3.5+, 2026-06-13). The old
   .settings-dialog / .settings-dialog-back / .settings-dialog-header /
   .settings-dialog-close rules are gone — the page chrome lives in
   @breathe/style/settings.css (.settings-page, .settings-inner, h2,
   .settings-back-link) and the open/close flow is handled by
   openSettings() / closeSettings() in app.js.

   While settings is open, document.body gets .settings-open. Use it
   as a hook if any other CSS needs to react (currently nothing does). */

/* .settings-section + h3 moved to @breathe/style/settings.css in Phase 3.5
   (canonical card pattern shared with breathe-books and breathe-board).
   The old breathe-lines-only divider pattern (padding + border-bottom on
   each section, UPPERCASE h3) was the visual divergence that triggered
   the extraction. */

/* Theme picker — segmented-control look. One pill-shaped container; each
   option is a borderless segment inside. JS adds .selected to the active
   label. Matches breathe-board/breathe-books idiom: light typography,
   soft pill corners, accent on selection. */
.settings-theme-options {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--bg);
    width: fit-content;
}

.settings-theme-options label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 16px;
    font-size: 13px;
    font-weight: var(--weight-light);
    color: var(--text-secondary);
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    user-select: none;
}

.settings-theme-options label:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.settings-theme-options label.selected {
    background: var(--btn-bg, var(--accent));
    color: var(--btn-text, var(--bg));
    font-weight: var(--weight-normal);
}

.settings-theme-options label.selected:hover {
    background: var(--btn-bg, var(--accent));
    color: var(--btn-text, var(--bg));
    opacity: 0.92;
}

/* Hide the underlying radio entirely — JS sets the .selected class on
   the label so the radio's state isn't what drives visual selection. */
.settings-theme-options input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    margin: 0;
    padding: 0;
}

.settings-palette-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.settings-palette-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: border-color 0.15s, background 0.15s;
}

.settings-palette-row:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
}

.settings-palette-row.selected {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
}

.settings-palette-name {
    flex: 0 0 90px;
    font-size: 13px;
    font-weight: var(--weight-medium);
}

.settings-palette-strip {
    display: flex;
    gap: 3px;
    flex: 1;
}

.settings-palette-dot {
    width: 14px;
    height: 14px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

/* About section — small definition-list layout. Diagnostic feel: label
   on the left in muted, value on the right in primary. */
.settings-about {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 16px;
    margin: 0;
    font-size: 13px;
}

.settings-about dt {
    color: var(--text-secondary);
    font-weight: var(--weight-light);
}

.settings-about dd {
    color: var(--text-primary);
    margin: 0;
    overflow-wrap: anywhere;
}

.settings-theme-options label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    cursor: pointer;
}

.settings-tags-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.settings-tag-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    transition: background 0.1s, border-top-color 0.1s;
    border-top: 2px solid transparent;
}

.settings-tag-swatch-trigger {
    width: 22px;
    height: 22px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    padding: 0;
}

.settings-tag-name-input {
    flex: 1;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    font-size: 13px;
    font-family: inherit;
}

.settings-tag-name-input:focus {
    border-color: var(--accent);
    outline: none;
}

.settings-tag-delete {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: 16px;
    line-height: 1;
}

.settings-tag-delete:hover {
    color: var(--danger);
    background: var(--bg-hover);
}

.settings-tags-new {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.settings-tags-new input {
    flex: 1;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-size: 13px;
    font-family: inherit;
}

.settings-tags-new input:focus {
    border-color: var(--accent);
    outline: none;
}

.settings-tags-new button {
    background: var(--btn-bg, var(--accent));
    color: var(--btn-text, var(--bg));
    border: none;
    border-radius: var(--radius-sm);
    padding: 6px 14px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.15s;
}

.settings-tags-new button:hover {
    opacity: 0.88;
}

/* Swatch picker popover — opens when user clicks the swatch on a tag row */
.swatch-picker {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(6, 22px);
    gap: 6px;
    z-index: 10;
}

.swatch-picker[hidden] {
    display: none;
}

.swatch-picker-swatch {
    width: 22px;
    height: 22px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
    cursor: pointer;
    padding: 0;
}

.swatch-picker-swatch.selected {
    box-shadow: 0 0 0 2px var(--accent);
}

/* ── Project tag chips (on cards) ──────────────────────────────────── */
.gtd-project-tag-chips {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    margin-left: 4px;
}

/* Narrow row directly under the project header — keeps chips off the title. */
.gtd-project-tag-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px 0 8px;  /* aligned with description; bottom padding adds breathing room above it */
}

.gtd-project-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: var(--weight-medium);
    color: #fff;
    line-height: 1.4;
}

.gtd-project-tag-chip.removable {
    padding-right: 4px;
}

.gtd-project-tag-chip-x {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}

.gtd-project-tag-chip-x:hover {
    color: #fff;
}

/* ── Project dialog: tag row ───────────────────────────────────────── */
.project-tags-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 12px;
    flex-wrap: wrap;
    position: relative;
}

.project-tags-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}

.project-tags-chips {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.project-tags-add {
    background: transparent;
    border: 1px dashed var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-family: inherit;
}

.project-tags-add:hover {
    color: var(--text-primary);
    border-color: var(--accent);
}

.project-tags-popover {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    padding: 10px;
    min-width: 260px;
    max-width: 360px;
    z-index: 10;
}

.project-tags-popover[hidden] {
    display: none;
}

/* Chip-grid tag picker — all tags visible at once, click to toggle.
   Selected chips get a stronger ring; unselected stay dimmer. */
.tags-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tags-chip-grid-chip {
    background: var(--bg);
    color: #fff;
    border: 2px solid transparent;
    border-radius: var(--radius-full);
    padding: 4px 12px;
    font-family: inherit;
    font-size: 12px;
    font-weight: var(--weight-medium);
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.15s, border-color 0.15s, transform 0.05s;
}

.tags-chip-grid-chip:hover {
    opacity: 0.85;
}

.tags-chip-grid-chip.selected {
    opacity: 1;
    border-color: var(--text-primary);
    box-shadow: 0 0 0 1px var(--bg);
}

.tags-chip-grid-chip:active {
    transform: scale(0.97);
}

/* "+ New" pill — same chip shape, neutral colours so it doesn't look like
   an existing tag option. */
.tags-chip-grid-chip.tags-chip-grid-new {
    background: transparent;
    color: var(--text-secondary);
    border: 1px dashed var(--border);
    opacity: 1;
}

.tags-chip-grid-chip.tags-chip-grid-new:hover {
    color: var(--text-primary);
    border-color: var(--accent);
}

/* Inline create form — same popover, swapped content. Compact so it fits
   inside narrow dialogs (tickler) without the popover overflowing. */
.tags-chip-grid-create {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 220px;
}

.tags-chip-grid-create-name {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    font-family: inherit;
    font-size: 12px;
}

.tags-chip-grid-create-name:focus {
    border-color: var(--accent);
    outline: none;
}

.tags-chip-grid-create-swatches {
    display: grid;
    grid-template-columns: repeat(6, 18px);
    gap: 4px;
    justify-content: center;
}

.tags-chip-grid-create-swatch {
    width: 18px;
    height: 18px;
    border-radius: var(--radius-full);
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    transition: transform 0.05s;
}

.tags-chip-grid-create-swatch.selected {
    border-color: var(--text-primary);
}

.tags-chip-grid-create-swatch:active {
    transform: scale(0.92);
}

.tags-chip-grid-create-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

.tags-chip-grid-create-cancel {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    padding: 3px 10px;
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
}

.tags-chip-grid-create-cancel:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.tags-chip-grid-create-confirm {
    background: var(--btn-bg, var(--accent));
    color: var(--btn-text, var(--bg));
    border: none;
    border-radius: var(--radius-sm);
    padding: 3px 12px;
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
    transition: opacity 0.15s;
}

.tags-chip-grid-create-confirm:hover {
    opacity: 0.88;
}

.project-tags-popover-empty {
    padding: 8px 12px;
    font-size: 12px;
    color: var(--text-secondary);
}

.project-tags-popover-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 12px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.project-tags-popover-option:hover {
    background: var(--bg-hover);
}

.project-tags-popover-option.selected {
    background: var(--accent-soft);
}

.project-tags-popover-swatch {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.project-tags-popover-check {
    margin-left: auto;
    color: var(--accent);
}

/* ── Search-bar tag filter chips ───────────────────────────────────── */
.gtd-tag-filter-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Center the chips in the band between the search box and the columns: the
   #tab-now flex gap already puts 12px below, so add 12px above — but only when
   chips are present, so an empty row adds no phantom space. */
.gtd-tag-filter-chips:not(:empty) {
    margin-top: 12px;
}

/* Search-bar tag filter chips — same visual vocabulary as the chip-grid
   picker in the project/tickler dialogs. Coloured fill always, opacity
   shifts to mark active vs inactive. tag colour comes in via
   `background:` set inline from JS. */
.gtd-tag-filter-chip {
    background: var(--bg);
    color: #fff;
    border: 2px solid transparent;
    border-radius: var(--radius-full);
    padding: 3px 12px;
    font-size: 11px;
    font-weight: var(--weight-medium);
    line-height: 1.4;
    font-family: inherit;
    cursor: pointer;
    opacity: 0.70;
    transition: opacity 0.15s, border-color 0.15s, transform 0.05s;
}

.gtd-tag-filter-chip:hover {
    opacity: 0.85;
}

.gtd-tag-filter-chip.active {
    opacity: 1;
    border-color: var(--text-primary);
    box-shadow: 0 0 0 1px var(--bg);
}

.gtd-tag-filter-chip:active {
    transform: scale(0.97);
}

/* Show only on mobile widths — used for the tickler collapse/expand toggle
   that lets the user see other lists when the tickler grows long. */
.gtd-mobile-only {
    display: none;
}

@media (max-width: 768px) {
    .gtd-mobile-only {
        display: inline-flex;
    }
}

/* Top-level tab navigation — sits in the header next to the brand */
.tabs {
    display: flex;
    gap: 4px;
    align-items: center;
}

/* Tabs follow the breathe-books pattern (Book / Ideas / Patterns): quiet
   text, no background pill, a 2px accent underline on the active tab. */
.tab {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: var(--weight-medium);
    padding: 6px 12px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-bottom: 2px solid transparent;
}

/* On desktop the tab is text-only — the icon SVG is shipped in the markup
   so the mobile bottom bar can promote it, but it stays hidden up here. */
.tab .tab-icon {
    display: none;
}

.tab:hover {
    color: var(--text-primary);
}

.tab.active {
    color: var(--text-primary);
    border-bottom-color: var(--accent);
}

.tab-panel[hidden] {
    display: none;
}

header h1 {
    font-size: 18px;
    font-weight: var(--weight-light);
    color: var(--text-primary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
}

header h1 span {
    color: var(--accent);
}

.header-brand {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.header-tagline {
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.controls {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.controls label {
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.controls input[type="time"] {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: inherit;
}

#btn-add-task,
#btn-print {
    background: var(--accent);
    color: var(--text-inverse);
    border: none;
    padding: 6px 14px;
    border-radius: var(--radius-md);
    font-size: 13px;
    cursor: pointer;
    font-weight: var(--weight-medium);
    font-family: inherit;
    transition: opacity 0.15s, background 0.15s;
}

#btn-add-task:hover {
    opacity: 0.88;
}

#btn-print {
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

#btn-print:hover {
    background: var(--bg-hover);
}

#print-view {
    display: none;
}

@media print {
    @page { margin: 0.5in; }
    body { background: #fff; color: #000; }
    header, main, .stats-panel, dialog { display: none !important; }
    #print-view {
        display: block;
        color: #000;
        font-family: var(--font-body);
    }
    #print-view svg {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}

main {
    display: flex;
    padding: 24px;
    gap: 24px;
    justify-content: flex-start;
}

/* Mobile: stack sections vertically. Drag-and-drop on touch is a known gap —
   tracked in BACKLOG.md; for now mobile users edit via card-click → dialog.
   On the Lines tab specifically we hide the side rails entirely — phone
   real estate is too tight for "On the fly" + Library + Stats + chart, and
   the chart is the only thing worth seeing on the go. */
@media (max-width: 768px) {
    header {
        padding: 12px 16px;
        /* Brand-only on mobile (tabs move to the bottom bar — see below). */
        justify-content: center;
    }

    .controls {
        gap: 10px;
    }

    main {
        flex-direction: column;
        padding: 16px;
        gap: 16px;
        align-items: stretch;
    }

    /* Hide the left rail on the Lines tab — chart-only view. */
    #tab-lines #backlog,
    #tab-lines #backlog-right {
        display: none;
    }

    #timeline-container {
        max-width: 100%;
    }

    /* Bottom-fixed tab bar (breathe-books pattern). The .tabs nav lives in
       the header at desktop; on mobile we reposition it to a full-width bar
       pinned to the bottom of the viewport so it's always reachable. Each
       tab is icon-over-label (compact, glanceable). */
    .tabs {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 20;
        display: flex;
        gap: 0;
        background: var(--bg-surface, var(--bg));
        border-top: 1px solid var(--border);
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom)) 8px;
        justify-content: space-around;
    }

    .tab {
        flex: 1;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 6px 0 4px;
        border-radius: var(--radius-md);
    }

    .tab .tab-icon {
        display: block;
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.75;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .tab .tab-label {
        font-size: 10px;
        letter-spacing: 0.06em;
        line-height: 1;
    }

    /* Leave room at the bottom of each tab panel so the last bit of content
       isn't hidden under the fixed tab bar (plus the iOS safe-area inset).
       Targets the panels by id so we beat the existing #tab-now id rule. */
    #tab-lines,
    #tab-now {
        padding-bottom: calc(72px + env(safe-area-inset-bottom));
    }
}

/* Sidebars — left aside (#backlog) holds Contexts; right aside
   (#backlog-right) holds Library + On the fly. Same dimensions so the
   timeline stays centered. */
#backlog,
#backlog-right {
    width: 220px;
    flex-shrink: 0;
    position: sticky;
    top: 24px;
    align-self: flex-start;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.side-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.side-panel[hidden] {
    display: none;
}

/* Contexts owns the entire left column now — let it grow vertically. */
#contexts-panel {
    flex: 1;
    min-height: 0;
}

/* Library + On the fly stack in the right column; each gets a slice. */
#tasks-panel,
#activity-panel,
#stats-panel {
    flex-shrink: 0;
    max-height: 45vh;
    min-height: 120px;
}

#contexts-panel #lines-context-list,
#tasks-panel #backlog-list,
#activity-panel #activity-list,
#stats-panel .stats-body {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

#contexts-panel .gtd-context-picker {
    margin-bottom: 8px;
}

#contexts-panel #lines-context-select {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    font-family: inherit;
    font-size: 13px;
}

/* Mark Context rows whose action is already on the current breatheline.
   Subtle accent stripe + a small clock badge on the right side. */
.gtd-context-row.on-line {
    opacity: 0.7;
}

.gtd-on-line-badge {
    display: inline-flex;
    align-items: center;
    color: var(--accent);
    margin-left: 4px;
    flex-shrink: 0;
}

.gtd-on-line-badge svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Time-of-day pill lives on its own row directly under main, indented to
   line up with the label (offset matches the check button + flex gap). */
.gtd-action-time {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    align-self: flex-start;
    margin-left: 26px;
    padding: 0 6px;
    border: 1px solid currentColor;
    border-radius: var(--radius-full);
    font-size: 10px;
    color: var(--text-secondary);
    opacity: 0.8;
    flex-shrink: 0;
}

.gtd-action-time svg {
    width: 10px;
    height: 10px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.context-automap-default-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.context-automap-default-row input {
    width: 100%;
    max-width: 140px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    font-family: inherit;
    font-size: 13px;
}

.automap-note {
    margin-left: 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--accent);
}

#btn-context-automap-confirm {
    background: var(--btn-bg, var(--accent));
    color: var(--btn-text, var(--bg));
    border: none;
    border-radius: var(--radius-sm);
    padding: 6px 14px;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.15s;
}

#btn-context-automap-confirm:hover {
    opacity: 0.88;
}

#backlog h2 {
    font-size: 13px;
    font-weight: var(--weight-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.backlog-input-row {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

#backlog-input {
    flex: 1;
    min-width: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 8px 10px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-family: inherit;
    transition: border-color 0.15s;
}

#backlog-input:focus {
    outline: none;
    border-color: var(--accent);
}

#backlog-input::placeholder {
    color: var(--text-muted);
}

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

.backlog-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    font-size: 13px;
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    user-select: none;
    color: var(--text-primary);
    transition: background 0.15s;
}

.backlog-card:hover {
    background: var(--bg-hover);
}

.backlog-card:active {
    cursor: grabbing;
}

.backlog-card.dragging {
    opacity: 0.4;
}

.backlog-card .card-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.backlog-card .card-duration {
    color: var(--text-muted);
    font-size: 11px;
    flex-shrink: 0;
}

.backlog-card .card-icon-btn {
    cursor: pointer;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    flex-shrink: 0;
    color: var(--text-muted);
    transition: color 0.15s;
}

.backlog-card .card-icon-btn svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.backlog-card .card-icon-btn.complete:hover {
    color: var(--forest);
}

.backlog-card .card-icon-btn.delete:hover {
    color: var(--now-marker);
}

/* Library panel — sectioned list with Groups and Activities */
.library-section + .library-section {
    margin-top: 14px;
}

.library-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2px 4px;
    margin-bottom: 6px;
}

.library-section-header h3 {
    font-size: 11px;
    font-weight: var(--weight-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.library-add-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    border-radius: 3px;
    padding: 0;
    font-family: inherit;
    transition: color 0.15s, background 0.15s;
}

.library-add-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.library-empty {
    color: var(--text-muted);
    font-size: 12px;
    font-style: italic;
    padding: 4px 6px;
}

.library-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.library-group + .library-group {
    margin-top: 2px;
}

.group-card {
    border-left: 3px solid var(--accent);
    position: relative;
}

.group-chevron {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    transition: color 0.15s, transform 0.15s;
}

.group-chevron:hover {
    color: var(--text-primary);
}

.group-chevron svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.group-card.expanded .group-chevron {
    transform: rotate(90deg);
}

.group-members {
    margin-left: 12px;
    padding-left: 8px;
    border-left: 1px dashed var(--border);
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 2px;
    padding-bottom: 4px;
}

.group-member-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding: 2px 6px;
    font-size: 12px;
    color: var(--text-secondary);
    opacity: 0.85;
}

.group-member-row.is-anchor .group-member-label::after {
    content: " ·";
    color: var(--accent);
    font-weight: var(--weight-semibold);
}

.group-member-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.group-member-duration {
    color: var(--text-muted);
    font-size: 11px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}


#timeline-container {
    width: 100%;
    max-width: 540px;
    flex-shrink: 1;
}

#timeline-container.drag-over .center-line {
    stroke: var(--accent);
}

.drag-create-preview {
    fill: var(--accent);
    opacity: 0.3;
    rx: 6;
    ry: 6;
    pointer-events: none;
}

.drop-indicator {
    stroke: var(--accent);
    stroke-width: 2;
    stroke-dasharray: 4 3;
    pointer-events: none;
}

.drop-time-label {
    fill: var(--accent);
    font-size: 11px;
    font-family: inherit;
    font-weight: var(--weight-semibold);
    pointer-events: none;
}

#timeline-svg {
    width: 100%;
    display: block;
}

/* Empty state — shown when no breathelines are visible. */
.empty-state {
    padding: 48px 24px;
    text-align: center;
    color: var(--text-secondary);
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    margin-top: 12px;
}

.empty-state-title {
    font-size: 15px;
    font-weight: var(--weight-medium);
    color: var(--text-primary);
    margin-bottom: 8px;
}

.empty-state-sub {
    font-size: 13px;
    color: var(--text-secondary);
    max-width: 36em;
    margin: 0 auto 20px;
    line-height: 1.5;
}

.empty-state-actions {
    display: flex;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
}

.empty-state-actions .bin-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.empty-state-actions .bin-btn svg {
    width: 22px;
    height: 22px;
}

/* Stats panel — bottom of the left column, real-time breatheline stats */
.stats-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stats-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    font-size: 13px;
}

.stats-label {
    color: var(--text-secondary);
}

.stats-value {
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.stats-slots-header {
    font-size: 11px;
    font-weight: var(--weight-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

.stats-slots {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 10px;
    row-gap: 4px;
    margin-top: 6px;
    align-items: baseline;
}

.stats-slot-duration {
    color: var(--text-primary);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.stats-slot-range {
    color: var(--text-muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

@media print {
    #stats-panel { display: none; }
}

/* Time picker */
.time-picker {
    position: fixed;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px;
    box-shadow: var(--shadow-lg);
    z-index: 200;
    font-family: var(--font-body);
    margin: 0;
}

.time-picker[hidden] { display: none; }

.tp-cols {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tp-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.tp-step {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 10px;
    padding: 2px 6px;
    transition: color 0.15s;
    font-family: inherit;
    line-height: 1;
}

.tp-step:hover {
    color: var(--text-primary);
}

.tp-val {
    font-size: 18px;
    font-weight: var(--weight-medium);
    color: var(--text-primary);
    min-width: 32px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    user-select: none;
}

.tp-sep {
    font-size: 18px;
    color: var(--text-muted);
    align-self: center;
    padding-bottom: 2px;
}

.tp-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.tp-actions button {
    padding: 6px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: var(--weight-medium);
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, color 0.15s, opacity 0.15s;
}

.tp-actions button:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

#tp-set {
    background: var(--accent);
    color: var(--text-inverse);
    border-color: var(--accent);
}

#tp-set:hover {
    opacity: 0.88;
    background: var(--accent);
    color: var(--text-inverse);
}

.task-time-clickable {
    pointer-events: auto;
    cursor: pointer;
    text-decoration: underline dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.task-time-clickable:hover {
    text-decoration: underline solid;
    text-decoration-thickness: 1px;
}

.task-description-preview {
    fill: var(--text-inverse);
    opacity: 0.7;
    font-size: 10px;
    font-family: inherit;
    pointer-events: none;
}

.task-more-link {
    pointer-events: auto;
    cursor: pointer;
    opacity: 1;
    text-decoration: underline;
}

/* Card overlay — expanded preview of a card's full content */
.card-overlay {
    position: fixed;
    background: var(--accent);
    color: var(--text-inverse);
    border-radius: 6px;
    padding: 12px 14px;
    box-shadow: var(--shadow-lg);
    z-index: 100;
    max-width: 320px;
    min-width: 200px;
    font-family: var(--font-body);
}

.card-overlay[hidden] { display: none; }

.card-overlay-label {
    font-size: 14px;
    font-weight: var(--weight-medium);
    margin-bottom: 4px;
}

.card-overlay-meta {
    font-size: 11px;
    opacity: 0.85;
    margin-bottom: 8px;
    font-variant-numeric: tabular-nums;
}

.card-overlay-description {
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 10px;
    white-space: pre-wrap;
    max-height: 50vh;
    overflow-y: auto;
}

.card-overlay-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.card-overlay-actions button {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: var(--text-inverse);
    border-radius: var(--radius-sm);
    padding: 3px 12px;
    font-size: 11px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}

.card-overlay-actions button:hover {
    background: rgba(255, 255, 255, 0.15);
}

.card-overlay-actions .overlay-icon-btn {
    padding: 3px 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.card-overlay-actions .overlay-icon-btn svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.time-text-btn {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--text-primary);
    font: inherit;
    cursor: pointer;
    text-decoration: underline dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    text-align: left;
}

.time-text-btn:hover {
    text-decoration: underline solid;
    text-decoration-thickness: 1px;
}

.time-text-btn:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: 2px;
    border-radius: 2px;
}

.time-text-btn.empty {
    color: var(--text-muted);
    font-style: italic;
}

dialog .time-text-btn {
    display: block;
    margin-top: 4px;
    font-size: 14px;
}

.tp-spacer {
    flex: 1;
}

/* Timeline header — horizontal row of per-breatheline column headers.
   Each column header stacks the breatheline name and its action icons vertically,
   left-aligned to its card column. The first column lines up with the SVG's
   content (viewBox x=64). An "add" slot at the right lets users add more. */
.timeline-header {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin-bottom: 12px;
    padding-left: calc(100% * 64 / 540);
    gap: 16px;
}

.breatheline-column-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    flex-shrink: 0;
    min-width: 0;
}

.breatheline-column-header h2 {
    font-size: 13px;
    font-weight: var(--weight-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.breatheline-add-slot {
    display: flex;
    align-items: flex-start;
    padding-top: 2px;
}

.add-breatheline-btn {
    width: 22px;
    height: 22px;
    border-radius: var(--radius-sm);
    border: 1px dashed var(--border);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.add-breatheline-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.add-breatheline-btn svg {
    width: 14px;
    height: 14px;
}

.timeline-actions .bin-btn.close-btn:hover {
    color: var(--now-marker);
}

.timeline-header h2.breatheline-name {
    cursor: pointer;
    padding: 2px 6px;
    margin: -2px -6px;
    border-radius: 3px;
    transition: background 0.15s, color 0.15s;
    outline: none;
}

.timeline-header h2.breatheline-name:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.timeline-header h2.breatheline-name[contenteditable="true"] {
    background: var(--bg-surface);
    box-shadow: 0 0 0 1px var(--accent);
    cursor: text;
    color: var(--text-primary);
    text-transform: none;
    letter-spacing: normal;
    font-weight: var(--weight-normal);
}

.timeline-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-start;
}

/* Breatheline settings dialog — start/end pickers for one breatheline.
 * Chrome comes from breathe-style/settings.css (.settings-section card,
 * .settings-hint) so this reads like every other settings surface in the
 * family rather than a bespoke popover. Only the label/control row is
 * local, since the settings pages have no equivalent primitive — their
 * .settings-option is a selectable chip, not a labeled field. */
#bl-settings-dialog {
    width: min(360px, calc(100vw - 32px));
}

#bl-settings-title {
    font-weight: var(--weight-light);
}

.bl-settings-field {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Fixed label column, not content-width: "Start" is wider than "End", so an
 * intrinsically-sized label pushed the two time controls to different x
 * positions and the rows read as jagged. `dialog label` is also a block with
 * a 12px bottom margin, which is wrong inside a flex row. */
.bl-settings-field label {
    margin-bottom: 0;
    flex: none;
    width: 3.25rem;
}

/* Control fills the rest of the row, so both fields share left AND right edges. */
.bl-settings-field .tickler-time-control-input {
    flex: 1;
    min-width: 0;
}

.bl-settings-field .tickler-time-input {
    width: auto;
    flex: 1;
}

/* Picker dropdowns (templates, breathelines) */
.picker-dropdown {
    position: fixed;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 6px 0;
    box-shadow: var(--shadow-lg);
    z-index: 150;
    min-width: 240px;
    max-height: 60vh;
    overflow-y: auto;
}

.picker-dropdown[hidden] {
    display: none;
}

.picker-list {
    display: flex;
    flex-direction: column;
}

.picker-item {
    background: transparent;
    border: none;
    text-align: left;
    padding: 8px 14px;
    font-family: inherit;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.picker-item:hover {
    background: var(--bg-hover);
}

.picker-item-meta {
    font-size: 11px;
    color: var(--text-muted);
}

.picker-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.picker-item.disabled:hover {
    background: transparent;
}

.picker-empty {
    padding: 12px 14px;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
}

.picker-section-header {
    padding: 8px 14px 4px;
    font-size: 11px;
    font-weight: var(--weight-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.picker-section-header:not(:first-child) {
    border-top: 1px solid var(--border);
    margin-top: 4px;
}

/* Bin dock + dialog */
.backlog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.bin-dock {
    display: flex;
    gap: 6px;
}

.bin-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: inherit;
    font-size: 11px;
    line-height: 1;
    transition: color 0.15s;
}

.bin-btn:hover {
    color: var(--text-primary);
}

.bin-btn svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bin-count {
    font-size: 11px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.bin-count:empty {
    display: none;
}

.bin-dialog {
    width: 480px;
}

#bin-content h2 {
    font-size: 16px;
    font-weight: var(--weight-medium);
    margin-bottom: 16px;
}

.bin-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 60vh;
    overflow-y: auto;
}

.bin-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
}

.bin-item-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary);
}

.bin-item-meta {
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.bin-item-undo {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
    transition: background 0.15s, color 0.15s;
}

.bin-item-undo:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.bin-empty {
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
    padding: 20px;
}

.automap-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 50vh;
    overflow-y: auto;
    margin-bottom: 12px;
}

.automap-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.automap-row:hover {
    background: var(--bg-hover);
}

.automap-row input[type="checkbox"] {
    width: auto;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--accent);
}

.automap-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
    color: var(--text-primary);
}

.automap-duration {
    color: var(--text-muted);
    font-size: 11px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

#btn-automap-confirm {
    background: var(--accent);
    color: var(--text-inverse);
    border: none;
}

#btn-automap-confirm:hover {
    opacity: 0.88;
}

@media print {
    .bin-dock { display: none; }
}

/* Dialog */
dialog {
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    width: 340px;
    max-width: 90vw;
    box-shadow: var(--shadow-lg);
    font-family: inherit;
    margin: auto;
}

dialog::backdrop {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
}

dialog h2 {
    font-size: 16px;
    font-weight: var(--weight-medium);
    margin-bottom: 16px;
}

dialog label {
    display: block;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

dialog input:not([type="radio"]):not([type="checkbox"]),
dialog select,
dialog textarea {
    display: block;
    width: 100%;
    margin-top: 4px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 6px 10px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.15s;
}

dialog textarea {
    resize: vertical;
    min-height: 60px;
    line-height: 1.4;
}

dialog select {
    width: 100%;
    margin-top: 4px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 6px 10px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-family: inherit;
}

.nb-duration-row {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.nb-duration-row label {
    flex: 1;
    margin-bottom: 0;
}

dialog input:focus,
dialog select:focus,
dialog textarea:focus {
    outline: none;
    border-color: var(--accent);
}

/* Icon-labeled dialog fields (tightened editors). A Lucide icon stands in for
   the text label: title= gives a hover tooltip, and the control carries an
   aria-label for screen readers (the icon span is aria-hidden). */
.dialog-title-input {
    margin-bottom: 14px;
    font-size: 15px;
    font-weight: var(--weight-medium);
}
.dialog-field {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
/* The author display:flex above would otherwise defeat the [hidden] attribute
   (used to conditionally show e.g. the action "waiting for" row). */
.dialog-field[hidden] { display: none; }
.dialog-field.dialog-field-top { align-items: flex-start; }
.dialog-field-icon {
    flex: none;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}
.dialog-field.dialog-field-top .dialog-field-icon { margin-top: 9px; }
.dialog-field-icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* Controls fill the row and vertically center on the icon (cancel the broad
   `dialog input { width:100%; margin-top:4px }` rule for direct children). */
.dialog-field > select,
.dialog-field > input,
.dialog-field > textarea {
    flex: 1;
    width: auto;
    min-width: 0;
    margin-top: 0;
}
/* Drop the native number spinners — they clash with the app's calm, custom
   controls. Affects estimated-minutes (action) and duration (Lines task). */
.dialog-field input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}
.dialog-field input[type="number"]::-webkit-outer-spin-button,
.dialog-field input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Compact numeric field with a trailing unit label (e.g. "30 minutes").
   Selector is deliberately specific to beat the broad
   `dialog input:not([type=radio]):not([type=checkbox]) { width: 100% }`
   rule (specificity 0,2,2) earlier in this file. */
.dialog-field-controls .dialog-num-input[type="number"] {
    flex: none;
    width: 56px;
    text-align: center;
}
.dialog-field-unit {
    color: var(--text-secondary);
    font-size: 13px;
}
.dialog-field-controls {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    /* Anchor absolutely-positioned popovers (e.g. the tags picker) to this row
       rather than to the <dialog>, which would drop them off-screen. */
    position: relative;
}

.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}

.dialog-actions button {
    padding: 6px 16px;
    border-radius: var(--radius-md);
    font-size: 13px;
    cursor: pointer;
    border: none;
    font-family: inherit;
    transition: opacity 0.15s, background 0.15s;
}

#btn-cancel {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

#btn-cancel:hover {
    background: var(--bg-hover);
}

.dialog-actions button[type="submit"] {
    background: var(--accent);
    color: var(--text-inverse);
}

.dialog-actions button[type="submit"]:hover {
    opacity: 0.88;
}

/* SVG text */
.hour-label {
    fill: var(--text-muted);
    font-size: 12px;
    font-family: inherit;
}

.month-label {
    fill: var(--text-primary);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
}

.hour-line {
    stroke: var(--border);
    stroke-width: 1;
}

.center-line {
    stroke: var(--border);
    stroke-width: 2;
}

.task-block {
    rx: 6;
    ry: 6;
    cursor: grab;
    transition: opacity 0.15s;
}

.task-block { fill: var(--accent); }

/* Secondary-column cards: slight visual de-emphasis so the primary column
   reads as the editable one. */
.task-card.secondary-card .task-block {
    opacity: 0.85;
}

/* Group envelope — thin border-only card wrapping a chain of grouped tasks */
.group-envelope {
    fill: none;
    stroke: var(--accent);
    stroke-width: 1;
    stroke-dasharray: 3 2;
    opacity: 0.55;
    pointer-events: none;
}

/* Anchor card — small marker bar drawn just left of the card to indicate
   which member is the load-bearing one. */
.anchor-marker {
    fill: var(--accent);
    pointer-events: none;
}

.task-block:hover {
    opacity: 0.85;
}

.task-block:active {
    cursor: grabbing;
}

.task-label {
    fill: var(--text-inverse);
    font-size: 12px;
    font-family: inherit;
    font-weight: var(--weight-medium);
    pointer-events: none;
}

.task-duration-label {
    fill: var(--text-inverse);
    opacity: 0.6;
    font-size: 10px;
    font-family: inherit;
    pointer-events: none;
}

.overflow-header {
    fill: var(--text-secondary);
    font-size: 11px;
    font-family: inherit;
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.resize-handle {
    fill: transparent;
    cursor: ns-resize;
    transition: fill 0.15s;
}

.resize-handle:hover {
    fill: rgba(255, 255, 255, 0.15);
}

/* Action strip — vertical panel of card actions revealed on card hover */
.action-strip {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.08s;
}

.task-card.hovered .action-strip {
    opacity: 1;
    pointer-events: auto;
}

.action-strip-bg {
    cursor: pointer;
    fill: var(--accent);
}

.icon-btn {
    cursor: pointer;
}

.icon-btn-bg {
    fill: transparent;
    rx: 3;
    transition: fill 0.15s;
}

.icon-btn-glyph {
    stroke: var(--text-inverse);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    opacity: 0.7;
    pointer-events: none;
}

.icon-btn:hover .icon-btn-glyph {
    opacity: 1;
}

.icon-btn.complete:hover .icon-btn-bg {
    fill: rgba(122, 170, 144, 0.45);
}

.icon-btn.delete:hover .icon-btn-bg {
    fill: rgba(168, 80, 72, 0.45);
}

/* ── GTD tab (Now) ───────────────────────────────────────────────── */

#tab-now {
    display: flex;
    flex-direction: column;
    padding: 16px 24px 24px;
    gap: 12px;
}

/* `#tab-now { display: flex }` beats the user-agent `[hidden]` rule by
   specificity. Re-assert hiding at matching specificity (id + attribute) so
   switching to the Lines tab actually hides Now's content. */
#tab-now[hidden] {
    display: none;
}

/* GTD search — visible input at the top of Now (search-first user preference).
   Cmd/Ctrl+K focuses it from anywhere; Esc clears + blurs. */
.gtd-search {
    position: relative;
    width: 100%;
    max-width: 720px;
}

.gtd-search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.gtd-search-icon {
    position: absolute;
    left: 10px;
    width: 16px;
    height: 16px;
    pointer-events: none;
    color: var(--text-muted);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#gtd-search-input {
    width: 100%;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
    padding: 8px 32px 8px 34px;
    transition: border-color 0.15s, background 0.15s;
}

#gtd-search-input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg);
}

#gtd-search-input::placeholder {
    color: var(--text-muted);
}

.gtd-search-clear {
    position: absolute;
    right: 4px;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}

.gtd-search-clear:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

/* Results panel — drops down from the input. */
.gtd-search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 30;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    max-height: 70vh;
    overflow-y: auto;
    padding: 6px 0;
}

.gtd-search-empty {
    padding: 14px 16px;
    color: var(--text-muted);
    font-size: 13px;
    font-style: italic;
}

.gtd-search-group {
    padding: 4px 0;
}

.gtd-search-group + .gtd-search-group {
    border-top: 1px solid var(--border);
    margin-top: 4px;
    padding-top: 6px;
}

.gtd-search-group-header {
    padding: 4px 14px;
    font-size: 10px;
    font-weight: var(--weight-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    gap: 6px;
}

.gtd-search-group-count {
    color: var(--text-muted);
    opacity: 0.7;
    font-weight: var(--weight-medium);
}

.gtd-search-result {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    padding: 8px 14px;
    font-family: inherit;
    transition: background 0.15s;
}

.gtd-search-result:hover {
    background: var(--bg-hover);
}

.gtd-search-result-primary {
    font-size: 14px;
    line-height: 1.3;
}

.gtd-search-result-meta {
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.gtd-search-result-meta em {
    font-style: italic;
    color: var(--text-secondary);
}

.gtd-search-result-snippet {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.gtd-search-pill {
    display: inline-block;
    padding: 0 6px;
    border: 1px solid var(--border);
    border-radius: 9999px;
    font-size: 10px;
    color: var(--text-muted);
}

.gtd-search-pill.waiting {
    color: var(--gold, var(--text-secondary));
    border-color: var(--gold, var(--border));
    font-style: italic;
}

.gtd-search-wait-prefix {
    color: var(--gold, var(--text-secondary));
    font-style: italic;
    font-size: 12px;
    opacity: 0.85;
}

.gtd-search-results mark {
    background: var(--accent-soft, rgba(192, 216, 240, 0.4));
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
}

/* Brief flash on the navigated-to row/card so the eye lands on it. */
@keyframes gtd-search-flash {
    0%   { box-shadow: 0 0 0 2px var(--accent); background: var(--accent-soft, rgba(192, 216, 240, 0.4)); }
    100% { box-shadow: 0 0 0 0 transparent; background: transparent; }
}

.gtd-search-flash {
    animation: gtd-search-flash 1.4s ease-out;
    border-radius: var(--radius-sm);
}

@media (max-width: 768px) {
    .gtd-search {
        max-width: 100%;
    }
    .gtd-search-results {
        max-height: 60vh;
    }
}

/* Chips row — context filter */
.gtd-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.gtd-chip {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 12px;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.gtd-chip:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.gtd-chip.active {
    background: var(--accent);
    color: var(--text-inverse);
    border-color: var(--accent);
}

.gtd-chip.waiting {
    font-style: italic;
    color: var(--gold);
    border-color: var(--gold);
}

.gtd-chip.waiting.active {
    background: var(--gold);
    color: var(--text-inverse);
}

.gtd-chips-separator {
    width: 1px;
    height: 18px;
    background: var(--border);
    margin: 0 4px;
}

.gtd-chips-settings {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    transition: color 0.15s, background 0.15s;
    margin-left: auto;
}

.gtd-chips-settings:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

/* Five-column layout: Inbox | Tickler | Projects | Context | Reference.
   All five columns are similar widths so the user can see them at once. */
.gtd-columns {
    display: grid;
    grid-template-columns: 298px 298px 298px 298px;
    gap: 16px;
    align-items: start;
}

/* When the user flips Projects into 3-col mode, give that column much more
   horizontal room so three cards fit comfortably (Google-Keep style). */
body.projects-cols-3 .gtd-columns {
    grid-template-columns: 298px minmax(780px, 2.6fr) 298px 298px;
}

@media (max-width: 1400px) {
    .gtd-columns {
        grid-template-columns: 298px 298px 298px;
    }
    body.projects-cols-3 .gtd-columns {
        grid-template-columns: 298px minmax(780px, 2.6fr) 298px;
    }
    /* Reference drops below the three columns as a full-width row (it's a real
       feature now, not a placeholder — keep it reachable). */
    .gtd-right { grid-column: 1 / -1; }
}

@media (max-width: 1100px) {
    .gtd-columns {
        grid-template-columns: 298px 298px 298px;
    }
    body.projects-cols-3 .gtd-columns {
        grid-template-columns: 298px minmax(780px, 2.6fr) 298px;
    }
}

@media (max-width: 900px) {
    /* `minmax(0, 1fr)` (not bare `1fr`) so a card with long content can't push
       the column wider than the viewport. */
    .gtd-columns,
    body.projects-cols-3 .gtd-columns {
        grid-template-columns: minmax(0, 1fr);
    }
    /* Mobile stack order: Inbox+Tickler (quick capture first), Context (on-the-go
       view), Projects (review), Reference (bookmarks last). */
    .gtd-inbox    { order: 1; }
    .gtd-context  { order: 2; }
    .gtd-projects { order: 3; }
    .gtd-right    { order: 4; }

    /* (.gtd-col min-height + padding override now lives after the base
       rule below, where source-order cascade lets it actually win.) */
    /* Force single-column on phones regardless of the persisted column toggle —
       multi-col needs horizontal room a phone doesn't have. `body` qualifier
       lifts specificity above the unconditional `cols-3` grid rule so this
       wins regardless of source order. Hide the toggle buttons too. */
    body #gtd-projects-list.cols-3,
    body #gtd-someday-list.cols-3 {
        display: flex;
        flex-direction: column;
    }
    #gtd-toggle-columns, #gtd-toggle-columns-someday { display: none; }
    /* Belt-and-braces: shrink the column + cards + descriptions so an expanded
       card with long content wraps instead of overflowing horizontally. */
    .gtd-projects { min-width: 0; }
    .gtd-project-card { min-width: 0; overflow-wrap: anywhere; }
    .gtd-project-description { overflow-wrap: anywhere; }
}

/* Up/down arrow reorder buttons — visible only on mobile (touch-friendly
   substitute for the drag-and-drop handle, which is unreliable on touch). */
.gtd-arrow-reorder {
    display: none;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.gtd-arrow-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s, opacity 0.15s;
}

.gtd-arrow-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.gtd-arrow-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.gtd-arrow-btn svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── Shared drag-to-reorder (pointer-based, dnd-kit style) ───────────
 * Always-visible handle on the RIGHT. Reordering is pointer-driven: the lifted
 * row follows the cursor while its neighbours glide aside — no native HTML5
 * drag, no insertion line. Wired by attachDragReorder() in app.js. */
.drag-reorder-handle {
    flex: none;
    cursor: grab;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1;
    padding: 0 4px;
    user-select: none;
    align-self: center;
    touch-action: none;          /* let touch-drag work without scrolling the page */
    transition: color 0.15s ease;
}
.drag-reorder-handle:hover { color: var(--text-secondary); }
.drag-reorder-handle:active { cursor: grabbing; color: var(--accent); }

/* The row being dragged: lifted above its neighbours and following the cursor.
 * A soft shadow + faint scale reads as "picked up." Its transform is driven
 * inline by JS, so don't set one here. */
.drag-reorder-lift {
    position: relative;
    z-index: 50;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
    cursor: grabbing;
}

/* While any sort is in progress: kill text selection and show the grab cursor
 * everywhere so a fast drag off the handle doesn't select surrounding text. */
body.drag-reorder-sorting { cursor: grabbing; user-select: none; }
body.drag-reorder-sorting * { cursor: grabbing !important; }

@media (max-width: 900px) {
    .gtd-arrow-reorder { display: inline-flex; }
    /* Hide drag handles on mobile only where arrow buttons replace them (the
     * main columns) — touch drag is unreliable. Settings/dialog lists have no
     * arrows, so their handle stays as the only reorder affordance there. */
    .gtd-context-row .drag-reorder-handle,
    .gtd-project-card .drag-reorder-handle,
    .gtd-reference-row .drag-reorder-handle {
        display: none;
    }
    /* Tighten outer padding so columns actually fit on narrow phone viewports.
       Bottom padding leaves room for the fixed tab bar (added in the 768px media). */
    #tab-now {
        padding: 12px 12px calc(72px + env(safe-area-inset-bottom));
        gap: 10px;
    }
    .gtd-col {
        padding: 10px;
    }
    /* Belt-and-braces — any odd content (long inbox item, sprawling description)
       should wrap rather than blow past the viewport. */
    .gtd-inbox-item,
    .gtd-context-row,
    .gtd-action-description {
        overflow-wrap: anywhere;
    }
    /* Smaller arrow buttons free up horizontal room on narrow screens while
       still being touch-friendly (28px is at the lower bound of Apple HIG). */
    .gtd-arrow-btn {
        width: 28px;
        height: 28px;
    }
}

/* Bottom-sheet popovers on mobile — slide up from the bottom edge with full
   width so touch targets are big enough and don't get clipped at the screen edge. */
@media (max-width: 768px) {
    .gtd-popover {
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        border-bottom: none;
        padding: 10px 10px 24px;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18);
    }
    .gtd-popover button {
        padding: 12px 14px;       /* taller touch targets */
        font-size: 14px;
    }
    #send-context-list button {
        padding: 8px 14px;
        font-size: 14px;
    }
    /* Bump input font on Now-tab inputs to 16px so iOS Safari doesn't zoom in
       when the user focuses them. Also helps general legibility on small screens. */
    #gtd-inbox-input,
    #gtd-context-select,
    #project-name,
    #project-description,
    #project-new-action,
    #action-label,
    #action-description,
    #contexts-new-name,
    .context-edit-row input,
    .project-action-input {
        font-size: 16px;
    }

    /* Bump GTD text scale on mobile so it doesn't read tiny next to 16px inputs.
       Roughly aligns with breathe-books body sizing. */
    .gtd-col-header h2 { font-size: 12px; }
    .gtd-chip { font-size: 14px; padding: 6px 14px; }
    .gtd-inbox-item { font-size: 15px; padding: 10px 12px; }
    .gtd-project-name { font-size: 15px; }
    .gtd-project-description { font-size: 13px; }
    .gtd-project-action-count { font-size: 12px; }
    .gtd-action-row { font-size: 14px; padding: 6px 8px; }
    .gtd-context-row { font-size: 14px; padding: 10px 12px; }
    .gtd-context-row-project { font-size: 12px; }
    .gtd-context-row-waiting { font-size: 12px; }
    .gtd-action-description { font-size: 12px; }
    .gtd-completed-row { font-size: 13px; }
    .gtd-completed-header { font-size: 12px; }
    .gtd-empty { font-size: 13px; }

    /* On mobile, let labels wrap to multiple lines instead of truncating.
       Vertical room is cheap on a phone; lost information is not.
       NB: .gtd-project-name has its own 2-line clamp set above (applies to all
       viewports) — we leave that alone here. */
    .gtd-action-label,
    .gtd-context-row-label,
    .gtd-completed-label {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: anywhere;
    }
}

.gtd-col {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px;
    min-height: 240px;
}

/* Mobile override placed AFTER the base rule so source-order cascade
   makes it win (both have specificity 0,1,0). Without this, the 240px
   min-height locks the column tall even when its sub-panel is collapsed. */
@media (max-width: 900px) {
    .gtd-col {
        min-height: 0;
        padding: 10px 12px;
    }
}

.gtd-col-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.gtd-col-header h2,
.gtd-col-header h3 {
    font-size: 11px;
    font-weight: var(--weight-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0;
}

/* Someday/Maybe header sits below the active Projects list — give it the same
   divider styling the old <section-divider> had (top border + breathing room). */
.gtd-someday-header {
    margin-top: 18px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.gtd-add-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    width: 22px;
    height: 22px;
    line-height: 1;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.gtd-add-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--bg);
}

/* Reference links (right column) */
#gtd-reference-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gtd-reference-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.gtd-reference-link {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 14px;
    border-radius: var(--radius-sm);
    transition: background 0.15s ease, color 0.15s ease;
}

/* Favicon (or globe fallback). Fixed 16px box so titles align in a column
 * whether their icon loaded or fell back. Slightly recessive by default,
 * full-strength on hover with the rest of the row. */
.gtd-reference-icon {
    flex: none;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.85;
}

.gtd-reference-icon img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    border-radius: 3px;
}

.gtd-reference-icon svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: var(--text-secondary);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* The title truncates; the icon never does. */
.gtd-reference-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gtd-reference-link:hover {
    background: var(--bg-hover);
    color: var(--accent);
}

.gtd-reference-link:hover .gtd-reference-icon {
    opacity: 1;
}

.gtd-reference-edit {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 6px;
    line-height: 1;
    border-radius: var(--radius-sm);
    /* Always visible, matching the project edit button — a hover-only
       affordance is unreachable on touch. */
    transition: color 0.15s ease, background 0.15s ease;
}

.gtd-reference-edit svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gtd-reference-edit:hover,
.gtd-reference-edit:focus-visible {
    color: var(--accent);
    background: var(--bg-hover);
}

.gtd-reference-empty {
    color: var(--text-muted);
    font-size: 13px;
    margin: 4px 2px;
}

/* Inbox */
.gtd-inbox-input-row {
    margin-bottom: 10px;
}

#gtd-inbox-input {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 8px 10px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-family: inherit;
    transition: border-color 0.15s;
}

#gtd-inbox-input:focus {
    outline: none;
    border-color: var(--accent);
}

.gtd-inbox-item {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    font-size: 13px;
    color: var(--text-primary);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    gap: 8px;
    transition: background 0.15s, border-color 0.15s;
}

.gtd-inbox-label {
    flex: 1;
    overflow-wrap: anywhere;
}

.gtd-inbox-check,
.gtd-tickler-check {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
}

.gtd-inbox-check:hover,
.gtd-tickler-check:hover {
    color: var(--forest, var(--accent));
    background: rgba(74, 112, 96, 0.12);
}

.gtd-inbox-check svg,
.gtd-tickler-check svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gtd-inbox-item:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
}

/* Projects */
#gtd-projects-list, #gtd-someday-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Multi-column toggle: lay project cards out in a Google-Keep-style 3-col grid.
   `minmax(0, 1fr)` (not bare `1fr`) is critical — without it, a card containing
   a long unwrappable string (action label, description) pushes its column
   wider than its share and the rest of the grid spills out of the panel.
   No `align-items: start` — let cards stretch to the row height so the grid
   doesn't show visible whitespace gaps between cards of different heights. */
#gtd-projects-list.cols-3, #gtd-someday-list.cols-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

/* Belt-and-braces: also clamp the cards themselves so long-word descendants
   wrap instead of overflowing horizontally. */
#gtd-projects-list.cols-3 .gtd-project-card,
#gtd-someday-list.cols-3 .gtd-project-card {
    min-width: 0;
    overflow-wrap: anywhere;
}

.gtd-project-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
}

.gtd-project-card.someday {
    opacity: 0.85;
}

/* System project (Anytime) — subtle dashed left border to signal "different,
   not deletable." Stays quiet so it doesn't compete with real projects. */
.gtd-project-card.system {
    border-left: 2px dashed var(--accent);
}

.gtd-project-card.system .gtd-project-name {
    font-style: italic;
    color: var(--text-secondary);
}

.gtd-project-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

/* Chevron toggles project card expand/collapse */
.gtd-project-chevron {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 11px;
    width: 16px;
    height: 16px;
    line-height: 1;
    padding: 0;
    border-radius: 3px;
    transition: color 0.15s, background 0.15s, transform 0.15s;
}

.gtd-project-chevron:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.gtd-project-card.collapsed .gtd-project-description,
.gtd-project-card.collapsed .gtd-project-actions {
    display: none;
}

.gtd-project-card.collapsed {
    padding: 8px 12px;
}

.gtd-project-card.collapsed .gtd-project-header {
    margin-bottom: 0;
}

.gtd-project-action-count {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: 6px;
    font-variant-numeric: tabular-nums;
}

/* Column-header right side: collapse-all + add */
.gtd-col-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gtd-text-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 4px;
    border-radius: 3px;
    transition: color 0.15s, background 0.15s;
}

.gtd-text-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

/* Collapse-all toggle — uses Lucide list-chevrons-down-up / up-down */
.gtd-collapse-all-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    width: 22px;
    height: 22px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    transition: color 0.15s, background 0.15s;
}

.gtd-collapse-all-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.gtd-collapse-all-btn svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Pencil edit icon + calendar-arrow move icon + pin/pin-off — same chrome */
.gtd-project-edit-btn,
.gtd-project-move-btn,
.gtd-project-pin-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    width: 22px;
    height: 22px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    transition: color 0.15s, background 0.15s;
}

.gtd-project-edit-btn:hover,
.gtd-project-move-btn:hover,
.gtd-project-pin-btn:hover {
    color: var(--accent);
    background: var(--bg-hover);
}

.gtd-project-edit-btn svg,
.gtd-project-move-btn svg,
.gtd-project-pin-btn svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Pin in the .pinned state reads as "active" — accent color even at rest.
   Tells the user at a glance which projects are pinned, and the toggle
   icon flips from Pin (filled-feeling) to PinOff (slashed) too. */
.gtd-project-pin-btn.pinned {
    color: var(--accent);
}

.gtd-project-name {
    font-size: 14px;
    font-weight: var(--weight-medium);
    color: var(--text-primary);
    flex: 1;
}

.gtd-project-actions {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
}

.gtd-action-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text-secondary);
    transition: background 0.15s;
}

.gtd-action-row:hover {
    background: var(--bg-hover);
}

.gtd-action-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Square-check completion button — appears on every action row */
.gtd-action-check {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
}

.gtd-action-check:hover {
    color: var(--forest);
    background: rgba(74, 112, 96, 0.12);
}

.gtd-action-check svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gtd-action-context {
    font-size: 11px;
    color: var(--text-muted);
    padding: 1px 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
}

.gtd-action-send {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 4px;
    font-size: 12px;
    transition: color 0.15s;
}

.gtd-action-send:hover {
    color: var(--accent);
}

.gtd-add-action-row {
    margin-top: 6px;
}

.gtd-add-action-input {
    width: 100%;
    background: transparent;
    border: 1px dashed var(--border);
    color: var(--text-secondary);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-family: inherit;
}

.gtd-add-action-input:focus {
    outline: none;
    border-color: var(--accent);
    color: var(--text-primary);
}

/* Context column */
.gtd-context-picker {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

#gtd-context-select {
    flex: 1;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 4px 8px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
}

#gtd-context-select:focus {
    outline: none;
    border-color: var(--accent);
}

#gtd-context-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gtd-context-row {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    transition: background 0.15s;
}

.gtd-context-row:hover {
    background: var(--bg-hover);
}

.gtd-context-row-main {
    display: flex;
    align-items: center;
    gap: 6px;
}

.gtd-context-row-label {
    flex: 1;
    color: var(--text-primary);
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

.gtd-context-row-back,
.gtd-context-row-send {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
}

.gtd-context-row-back:hover,
.gtd-context-row-send:hover {
    color: var(--accent);
    background: var(--bg-hover);
}

.gtd-context-row-back svg,
.gtd-context-row-send svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Project link on a context card — clickable, takes you to the project's card.
   Stays quiet by default; underline on hover signals "this is a link." */
.gtd-context-row-project {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    font-family: inherit;
    font-size: 11px;
    color: var(--text-muted);
    cursor: pointer;
    text-align: left;
    align-self: flex-start;
    border-radius: 2px;
    transition: color 0.15s, text-decoration-color 0.15s;
    text-decoration: underline dotted transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.gtd-context-row-project:hover {
    color: var(--text-secondary);
    text-decoration-color: currentColor;
}

.gtd-context-row-project:disabled {
    cursor: default;
    text-decoration: none;
}

.gtd-context-row-waiting {
    font-size: 11px;
    color: var(--gold);
    font-style: italic;
    cursor: pointer;
    text-decoration: underline dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    align-self: flex-start;
}

/* Top-of-card placement (Waiting context view) — sits above the action label
   so the blocker is the first thing the eye lands on. */
.gtd-context-row-waiting.top {
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: var(--weight-medium, 500);
}

.gtd-context-row-waiting:hover {
    color: var(--accent);
}

/* Inline waiting-for editor: input + a small clear (×) button sitting inside
   the same field box. The wrap is what replaces the badge; the input has no
   right border-radius / border so it visually merges with the button. */
.gtd-waiting-edit-wrap {
    display: inline-flex;
    align-items: stretch;
    align-self: flex-start;
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    overflow: hidden;
    max-width: 100%;
}

.gtd-waiting-edit-input {
    background: transparent;
    border: none;
    color: var(--text-primary);
    padding: 3px 6px;
    font-size: 11px;
    font-style: italic;
    font-family: inherit;
    width: 200px;
    max-width: 100%;
}

.gtd-waiting-edit-input:focus {
    outline: none;
}

.gtd-waiting-edit-clear {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 6px;
    font-size: 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}

.gtd-waiting-edit-clear:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

/* Per-context completed bin — collapsible at the bottom of the context column */
.gtd-completed-section {
    margin-top: 14px;
    border-top: 1px solid var(--border);
    padding-top: 8px;
}

.gtd-completed-header {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 6px;
    border-radius: 3px;
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.15s, background 0.15s;
}

.gtd-completed-header:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.gtd-completed-chevron {
    width: 10px;
    text-align: center;
    font-size: 10px;
}

.gtd-completed-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
}

.gtd-completed-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    font-size: 12px;
    color: var(--text-muted);
}

.gtd-completed-label {
    flex: 1;
    min-width: 0;
    text-decoration: line-through;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gtd-completed-project {
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0.7;
    flex-shrink: 0;
}

/* Checked-state styling for the square-check icon in the completed list */
.gtd-action-check.checked {
    color: var(--forest);
}

.gtd-action-check.checked:hover {
    color: var(--text-muted);
}

/* Tickler section under the Inbox column. Same divider treatment as Someday
   so the column reads as two stacked sections. */
/* Tickler header sits below Inbox inside the same column — restore the
   visual separator (border-top + extra top spacing) it had before the
   Tickler-as-own-column experiment. */
.gtd-tickler-header {
    justify-content: flex-start;
    margin-top: 18px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.gtd-tickler-header.is-collapsed {
    margin-top: 12px;
    padding-top: 6px;
}

.gtd-tickler-header .gtd-col-actions {
    margin-left: auto;
}

.gtd-inbox-header {
    justify-content: flex-start;
}

.gtd-inbox-header .gtd-col-actions {
    margin-left: auto;
}

.gtd-inbox-header.is-collapsed,
.gtd-tickler-header.is-collapsed {
    margin-bottom: 0;
}

#gtd-inbox-body[hidden] {
    display: none;
}

.gtd-context-header {
    justify-content: flex-start;
}

.gtd-context-header .gtd-col-actions {
    margin-left: auto;
}

#gtd-context-body[hidden] {
    display: none;
}

.gtd-context-header.is-collapsed {
    margin-bottom: 0;
}

/* ── Schema-lock banner ────────────────────────────────────────────────
   Shown when this tab's GTD_SCHEMA_VERSION is older than what's in cloud.
   Sticky at top, accent color, with a Refresh button. Body gets a
   `schema-locked` class that disables pointer events on the rest of the
   UI so the user can't accumulate changes that would silently evaporate. */
.schema-lock-banner {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--forest);
    color: #fff;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-size: 14px;
    font-weight: var(--weight-medium);
}

.schema-lock-banner[hidden] {
    display: none;
}

#schema-lock-refresh {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    padding: 4px 14px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: var(--weight-medium);
    transition: background 0.15s;
}

#schema-lock-refresh:hover {
    background: rgba(255, 255, 255, 0.3);
}

body.schema-locked header,
body.schema-locked main,
body.schema-locked dialog {
    pointer-events: none;
    opacity: 0.55;
}

body.schema-locked .schema-lock-banner {
    pointer-events: auto;
    opacity: 1;
}

.gtd-projects-header {
    justify-content: flex-start;
}

.gtd-projects-header .gtd-col-actions {
    margin-left: auto;
}

.gtd-projects-header.is-collapsed {
    margin-bottom: 0;
}

.gtd-someday-header {
    justify-content: flex-start;
}

.gtd-someday-header .gtd-col-actions {
    margin-left: auto;
}

.gtd-someday-header.is-collapsed {
    margin-bottom: 0;
}

#gtd-projects-body[hidden],
#gtd-someday-body[hidden] {
    display: none;
}

.gtd-tickler-placeholder {
    background: var(--bg);
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.4;
}

.gtd-tickler-placeholder p {
    margin: 0;
}

.gtd-tickler-placeholder p + ul,
.gtd-tickler-placeholder ul + p {
    margin-top: 6px;
}

.gtd-tickler-placeholder ul {
    margin: 0;
    padding-left: 18px;
}

.gtd-tickler-placeholder li {
    margin: 2px 0;
}

.gtd-tickler-placeholder strong {
    color: var(--text-secondary);
    font-weight: var(--weight-medium);
}

/* Real tickler content (once items are seeded). The placeholder class is
   removed by the renderer, so #gtd-tickler-list returns to bare flow. */
#gtd-tickler-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#gtd-tickler-list[hidden] {
    display: none;
}

/* Chevron toggle sits to the LEFT of the Tickler title on mobile. Same
   sizing as .gtd-add-btn but with a leading flex order so it lands first. */
.gtd-tickler-chevron {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    width: 22px;
    height: 22px;
    line-height: 1;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    margin-right: 6px;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    align-items: center;
    justify-content: center;
}

.gtd-tickler-chevron:hover {
    color: var(--text-primary);
    border-color: var(--accent);
}

.gtd-tickler-group-header {
    font-size: 10px;
    font-weight: var(--weight-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 8px 4px 2px;
    margin-top: 4px;
}

.gtd-tickler-group-header:first-child {
    margin-top: 0;
}

/* Past = overdue → mild urgency via the now-marker accent. */
.gtd-tickler-group-past {
    color: var(--now-marker, var(--text-secondary));
}

/* Today = primary attention. */
.gtd-tickler-group-today {
    color: var(--accent);
}

.gtd-tickler-item {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font-size: 13px;
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    transition: background 0.15s, border-color 0.15s;
}

.gtd-tickler-top {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.gtd-tickler-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gtd-tickler-label {
    overflow-wrap: anywhere;
}

.gtd-tickler-desc {
    color: var(--text-secondary, var(--text-primary));
    opacity: 0.7;
    font-size: 12px;
    line-height: 1.35;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Project association badge on tickler rows. Subtle accent-bordered chip,
   truncates to avoid wrap; the project name is on the title for hover. */
.gtd-tickler-project {
    align-self: flex-start;
    margin-top: 4px;
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
    font-family: inherit;
    font-size: 10px;
    line-height: 1.4;
    padding: 1px 8px;
    border-radius: var(--radius-full);
    cursor: pointer;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.85;
    transition: opacity 0.15s, background 0.15s;
}

.gtd-tickler-project:hover {
    opacity: 1;
    background: var(--accent-soft);
}

.gtd-tickler-when {
    /* Pill is a direct child of the card so it can use the full card width
       instead of being squeezed by the check/edit/rocket gutters. The left
       margin (check button width + top-row gap) keeps it visually aligned
       under the title. */
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    margin-left: 28px;
    padding: 1px 8px;
    border: 1px solid currentColor;
    border-radius: 9999px;
    font-size: 11px;
    color: var(--text-primary);
    opacity: 0.55;
    line-height: 1.4;
}

.gtd-tickler-when-icon,
.gtd-tickler-when-repeat {
    flex-shrink: 0;
}

.gtd-tickler-when-text {
    min-width: 0;
}

.gtd-tickler-when.past {
    color: var(--danger);
    border-color: var(--danger);
    opacity: 1;
}

.gtd-tickler-when-icon svg,
.gtd-tickler-when-repeat svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    display: block;
}

.gtd-tickler-item:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
}

/* Tickler dialog — task editor. Slightly narrower than the default 460px
   .action-dialog since the fields are simple (title, date, time, badge).
   Compound-class selector beats the broader `.action-dialog` rule that lives
   ~700 lines later in this file. */
.tickler-dialog.action-dialog {
    width: 360px;
}

/* Repeat picker dialog — narrow; matches Google's compact picker shape.
   `min-height` instead of `height` so the dialog grows when Month adds its
   extra rows but doesn't collapse below the baseline for the simpler views.
   Vertical + horizontal centering via the transform pattern — works whether
   the browser's UA dialog-positioning rule is `inset:0;margin:auto` (which
   only centers horizontally in some browsers) or anything else. */
.tickler-repeat-dialog.action-dialog {
    width: 280px;
    min-height: 460px;
    height: auto;
    box-sizing: border-box;
    inset: 50% auto auto 50%;
    margin: 0;
    transform: translate(-50%, -50%);
}

/* Number-spinner arrows: `color-scheme: light dark` tells the browser to
   render native form chrome (the up/down nudge buttons) using the matching
   theme's palette instead of the default white — works in both themes. */
.tickler-repeat-dialog input[type="number"] {
    color-scheme: light dark;
}

.tickler-first-task {
    font-size: 11px;
    color: var(--text-muted);
    margin: 4px 0 8px;
}

/* Repeat badge row on the task editor. Click the badge → opens the repeat
   sub-dialog. Trailing × clears the rule (badge reads "Does not repeat"). */
.tickler-repeat-badge-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 8px 0;
}

.tickler-repeat-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-primary);
    cursor: pointer;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 13px;
    text-align: left;
    transition: border-color 0.15s, background 0.15s;
}

.tickler-repeat-badge:hover {
    border-color: var(--accent);
    background: var(--bg-hover);
}

.tickler-repeat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.tickler-repeat-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tickler-repeat-summary {
    flex: 1;
    overflow-wrap: anywhere;
}

.tickler-repeat-clear {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.tickler-repeat-clear:hover {
    color: var(--text-primary);
    border-color: var(--accent);
    background: var(--bg-hover);
}

/* "Repeats every" / similar section labels — own line above their controls. */
.tickler-field-label {
    font-size: 13px;
    color: var(--text-primary);
    margin: 12px 0 4px;
}

/* Repeat dialog's Set-time row — custom dropdown (native <select> can't be
   constrained to ~5 visible items or told to scroll a specific option to
   the top). Trigger button + absolute-positioned popover. */
.tickler-repeat-time-row {
    margin: 10px 0;
}

.tickler-time-control {
    position: relative;
    display: inline-block;
}

.tickler-time-trigger {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-primary);
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    text-align: left;
    height: 36px;
    box-sizing: border-box;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    min-width: 120px;
    transition: border-color 0.15s;
}

.tickler-time-trigger:hover {
    border-color: var(--accent);
}

/* Input + chevron combo: the input is the editable display, the chevron
   opens the dropdown. Both share a single bordered shell so they read as
   one control. */
.tickler-time-control-input {
    display: inline-flex;
    align-items: stretch;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    transition: border-color 0.15s;
    /* Note: do NOT set overflow:hidden here. The popover sibling that
       opens below this control is absolutely-positioned relative to the
       same element (this is also the tickler-time-control container,
       which has position:relative on the same div). An overflow:hidden
       ancestor that is ALSO the containing block clips the popover into
       invisibility — most noticeably on mobile, where there's no fallback
       hover affordance to reveal the bug.
       The children (input + arrow button) have transparent backgrounds
       and squared corners, so they don't visually leak past the parent's
       rounded border anyway. */
}

.tickler-time-control-input:focus-within {
    border-color: var(--accent);
}

.tickler-time-control-input .tickler-time-input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    padding: 0 4px 0 12px;
    width: 100px;
    min-width: 0;
}

/* Edit Tickler date/time row: clock icon + date + time all on one line.
   The shared .dialog-field-controls wraps by default; here we keep it on a
   single row and slim the time control so date + time fit side by side. */
.dialog-datetime .dialog-field-controls {
    flex-wrap: nowrap;
    align-items: center;
}

.dialog-datetime .date-picker-control,
.dialog-datetime .tickler-time-control-input {
    flex: none;
}

/* Belt-and-suspenders: lock the date trigger and time input to identical
   font properties so they match regardless of UA control defaults. */
.dialog-datetime .date-picker-trigger,
.dialog-datetime .tickler-time-control-input .tickler-time-input {
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: normal;
}

.dialog-datetime .date-picker-trigger {
    min-width: 144px;
}

.dialog-datetime .tickler-time-control-input .tickler-time-input {
    width: 77px;
    padding-left: 8px;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
}

/* On narrow phones the one-line date+time can't fit the dialog. Let it wrap
   (a desktop nicety, not a phone one) and reclaim the trigger's min-width so
   it never forces horizontal overflow of the dialog. */
@media (max-width: 480px) {
    .dialog-datetime .dialog-field-controls { flex-wrap: wrap; }
    .dialog-datetime .date-picker-control { flex: 1 1 100%; }
    .dialog-datetime .date-picker-trigger { min-width: 0; width: 100%; }
}

.tickler-time-control-input .tickler-time-arrow {
    background: transparent;
    border: none;
    border-left: 1px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 12px;
    padding: 0 8px;
    line-height: 1;
}

.tickler-time-control-input .tickler-time-arrow:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.tickler-time-popover {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 100;
    max-height: 160px;  /* ~5 items × 32px */
    overflow-y: auto;
    min-width: 100%;
    padding: 2px 0;
}

.tickler-time-popover[hidden] {
    display: none;
}

/* Date picker — reusable trigger+popover pattern, same shape as the time
   dropdown above. */
.date-picker-control {
    position: relative;
    display: inline-block;
}

.date-picker-trigger {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-primary);
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    text-align: left;
    height: 36px;
    box-sizing: border-box;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    min-width: 180px;
    transition: border-color 0.15s;
}

.date-picker-trigger:hover {
    border-color: var(--accent);
}

.date-picker-popover {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 100;
    padding: 8px;
    min-width: 240px;
}

.date-picker-popover[hidden] {
    display: none;
}

.date-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 4px 4px 8px;
}

.date-picker-title {
    flex: 1;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.date-picker-nav {
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 16px;
    cursor: pointer;
    padding: 0;
}

.date-picker-nav:hover {
    background: var(--bg-hover);
}

.date-picker-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.date-picker-weekday {
    font-size: 11px;
    color: var(--text-primary);
    opacity: 0.6;
    text-align: center;
    padding: 4px 0;
}

.date-picker-day {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    padding: 0;
    height: 28px;
    border-radius: var(--radius-sm);
}

.date-picker-day:hover {
    background: var(--bg-hover);
}

.date-picker-day.today {
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 500;
}

.date-picker-day.selected {
    background: var(--accent);
    color: var(--bg);
    font-weight: 500;
}

.date-picker-blank {
    height: 28px;
}

.date-picker-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 0 0;
    margin-top: 8px;
    border-top: 1px solid var(--border);
}

.date-picker-chip {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 9999px;
    transition: border-color 0.15s, background 0.15s;
}

.date-picker-chip:hover {
    border-color: var(--accent);
    background: var(--bg-hover);
}

.tickler-time-option {
    display: block;
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    padding: 6px 12px;
    font-family: inherit;
    font-size: 13px;
    transition: background 0.15s;
}

.tickler-time-option:hover {
    background: var(--bg-hover);
}

.tickler-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 10px;
    /* No flex-wrap — number + dropdown stay on one line. */
}

/* Specificity bumped via `.tickler-repeat-dialog` prefix to beat the broad
   `dialog input:not(...):not(...) { width: 100% }` rule above. */
.tickler-repeat-dialog .tickler-row input[type="number"],
.tickler-repeat-dialog .tickler-radio input[type="number"] {
    width: 51px;
    height: 36px;
    box-sizing: border-box;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 13px;
    margin-top: 0;
}

.tickler-row select,
.tickler-radio select {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 13px;
}

/* The broad `dialog input/select { margin-top: 4px }` rule earlier in the file
   offsets selects + date inputs by 4px, breaking vertical center-alignment
   in the repeat dialog rows. Reset to 0 for all form controls inside the
   repeat dialog's flex rows so they line up with the radio circle / the
   adjacent number input. */
.tickler-repeat-dialog .tickler-row input,
.tickler-repeat-dialog .tickler-row select,
.tickler-repeat-dialog .tickler-radio input,
.tickler-repeat-dialog .tickler-radio select {
    margin-top: 0;
}

/* All form controls in the repeat dialog rows share size + padding + font so
   the row's `align-items: center` puts every visible baseline on the same
   line. The radio inputs themselves are excluded — they have their own
   explicit 14px sizing higher up. `line-height: 1` forces the text to sit
   at the centerline of the explicit 36px box instead of inheriting browser
   default line-heights that push it off-center (especially date inputs). */
.tickler-repeat-dialog .tickler-radio input[type="date"],
.tickler-repeat-dialog .tickler-radio input[type="number"],
.tickler-repeat-dialog .tickler-radio select,
.tickler-repeat-dialog .tickler-row input[type="number"],
.tickler-repeat-dialog .tickler-row select {
    height: 36px;
    box-sizing: border-box;
    width: auto;
    padding: 0 8px;
    font-size: 13px;
    line-height: 1;
    border-radius: var(--radius-sm);
}

/* Frequency dropdown — explicitly narrow since "month" is the widest option. */
#tickler-frequency {
    width: 96px;
}

.tickler-row input[type="date"],
.tickler-radio input[type="date"] {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 13px;
}

/* Weekday chips — circular, single-letter, click-to-toggle. */
.tickler-weekday-chips {
    display: flex;
    gap: 6px;
    margin: 4px 0 8px;
}

/* `display: flex/grid` above beats the user-agent [hidden] rule's
   `display: none` by specificity. Re-assert hiding at matching specificity
   so the frequency dropdown actually swaps which sub-row is showing. */
.tickler-weekday-chips[hidden],
.tickler-monthly-block[hidden] {
    display: none;
}

.tickler-chip {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-family: inherit;
    font-size: 12px;
    font-weight: var(--weight-medium);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.tickler-chip:hover {
    color: var(--text-primary);
    border-color: var(--accent);
}

.tickler-chip.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--text-inverse);
}

/* Monthly block — two radios (Day N / Nth weekday) stacked tightly. The
   selects are shorter than the 36px standard so the two radio circles sit
   closer vertically, matching the spacing between Ends Never and On. */
.tickler-monthly-block {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 4px 0 8px;
}

.tickler-repeat-dialog .tickler-monthly-block .tickler-radio {
    padding: 0;
}

.tickler-repeat-dialog .tickler-monthly-block select {
    height: 28px;
}

.tickler-radio {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 13px;
    line-height: 1.2;
    color: var(--text-primary);
    cursor: pointer;
    /* No flex-wrap — keep [radio][label][inputs] on one line. If a row would
       overflow the dialog width, expand the dialog rather than wrapping. */
}

.tickler-radio input[type="radio"] {
    margin: 0;
    flex-shrink: 0;
    /* Native radio in some browsers has subtle vertical offset; explicit
       sizing + vertical-align: middle keeps it center-locked with the label. */
    width: 14px;
    height: 14px;
    vertical-align: middle;
}

/* Ends rows all share min-height: 36px so the spacing between Never→On is
   equal to On→After, and each radio circle sits at the same vertical center
   as the adjacent input (Never has no input, but the empty space keeps the
   row at the standard height). Radio input gets the full row height so its
   visual circle is drawn at the true center, not biased to the baseline. */
.tickler-ends .tickler-radio {
    min-height: 36px;
}

.tickler-ends .tickler-radio input[type="radio"] {
    height: 36px;
}

/* The label text sits immediately to the right of the radio circle. */
.tickler-radio-label {
    margin-right: 2px;
    line-height: 1;
}

/* Disabled inputs fade out — used in Ends section when their radio is unselected. */
.tickler-radio input:disabled,
.tickler-radio input[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

.tickler-ends {
    border: none;
    padding: 0;
    margin: 12px 0 4px;
}

.tickler-ends legend {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: var(--weight-medium);
    padding: 0;
    margin-bottom: 4px;
    /* Default `legend` aligns natively to the fieldset's top border — but
       since we dropped the border, it just sits left-aligned in normal flow. */
}

/* Inputs that follow the label (date for "On", number for "After") sit at
   their natural distance from each label, not column-aligned. */

/* Tickler row — time prefix + edit pencil. */
.gtd-tickler-time {
    font-size: 11px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* Always-visible right-aligned row buttons (edit + rocket). Same shape for
   both ticklers and inbox; the rocket gets the .gtd-row-rocket modifier
   for any per-action tweaks (currently just placement on the far right). */
.gtd-row-action-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
}

.gtd-row-action-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.gtd-row-action-btn svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Push the rocket to the far right of the row. Inside a flex row with the
   label set to flex: 1, this is automatic. Inside the tickler top row, the
   body is flex: 1 so edit + rocket flow at the end; margin-left: auto pins
   rocket all the way to the end even when only the rocket is present. */
.gtd-row-rocket {
    margin-left: auto;
}

/* Right column placeholders */
.gtd-placeholder {
    background: var(--bg);
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    padding: 14px;
    margin-bottom: 12px;
    color: var(--text-muted);
}

.gtd-placeholder h2 {
    font-size: 11px;
    font-weight: var(--weight-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}

.gtd-placeholder p {
    font-size: 12px;
    color: var(--text-muted);
}

.gtd-empty {
    color: var(--text-muted);
    font-size: 12px;
    font-style: italic;
    padding: 8px;
    text-align: center;
}


/* ── GTD popovers & dialogs ───────────────────────────────────────── */

.gtd-popover {
    position: fixed;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 200;
    min-width: 220px;
    max-width: 320px;
    padding: 6px;
    font-family: var(--font-body);
    /* Never taller than the viewport — otherwise a long list (e.g. the project
       picker on a phone) runs off-screen with no way to reach the rest. */
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Keep the clarify action buttons in view and let just the project list scroll
   when there are many projects. */
#clarify-project-list {
    max-height: 40vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.gtd-popover[hidden] {
    display: none;
}

/* Inline context chips on the clarify popover — fast path: inbox → anytime
   + context in one click. Indented to align with the "Anytime" label so the
   row reads as "Anytime → these contexts." Same shortcut is also available
   via the trailing-@ syntax in the quick-capture input. */
.clarify-context-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 2px 8px 6px 36px;
}

/* Chip selector qualified with .gtd-popover button to beat the generic
   popover-button rule's `display: flex; width: 100%` from clobbering us. */
.gtd-popover button.clarify-context-chip {
    display: inline-flex;
    width: auto;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 9999px;
    gap: 0;
    text-align: center;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.gtd-popover button.clarify-context-chip:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
    border-color: var(--accent);
}

.gtd-popover-header {
    font-size: 11px;
    font-weight: var(--weight-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 6px 10px;
}

.gtd-popover-divider {
    font-size: 11px;
    font-weight: var(--weight-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 8px 10px 4px;
    border-top: 1px solid var(--border);
    margin-top: 4px;
}

.gtd-popover button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    color: var(--text-primary);
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    transition: background 0.15s;
}

.gtd-popover button:hover {
    background: var(--bg-hover);
}

.gtd-popover button.danger {
    color: var(--now-marker);
}

.gtd-popover button.danger:hover {
    background: var(--now-marker-soft);
}

.gtd-popover button > svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: var(--text-muted);
}

.gtd-popover button:hover > svg {
    color: var(--text-secondary);
}

.gtd-popover button.danger > svg {
    color: var(--now-marker);
}

#send-context-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 10px;
}

#send-context-list button {
    width: auto;
    padding: 4px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    font-size: 12px;
}

#send-context-list button:hover {
    background: var(--accent);
    color: var(--text-inverse);
    border-color: var(--accent);
}

#send-context-list button.waiting {
    font-style: italic;
    color: var(--gold);
    border-color: var(--gold);
}

#send-context-list button.waiting:hover {
    background: var(--gold);
    color: var(--text-inverse);
}

/* Inline "Waiting for…" input row — shared by the clarify popover and the
   send-to-context popover. The confirm button is a small circle-check icon
   instead of a text "Confirm" — quieter chrome, same affordance. */
.gtd-waiting-confirm-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-top: 1px solid var(--border);
    margin-top: 4px;
}

.gtd-waiting-confirm-row input {
    flex: 1;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 5px 8px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-family: inherit;
}

.gtd-waiting-confirm {
    background: transparent;
    border: none;
    padding: 0;
    width: 24px;
    height: 24px;
    color: var(--accent);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color 0.15s, background 0.15s;
}

.gtd-waiting-confirm svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gtd-waiting-confirm:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

/* Project edit dialog */
.project-dialog {
    width: 480px;
    max-width: 92vw;
}

.project-dialog h3 {
    font-size: 11px;
    font-weight: var(--weight-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 6px;
    margin-bottom: 8px;
}

.project-actions-section {
    margin-top: 8px;
    margin-bottom: 16px;
}

.project-repeating-section {
    margin-top: 8px;
    margin-bottom: 16px;
}

.project-repeating-section h3 {
    font-size: 12px;
    font-weight: var(--weight-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 8px;
}

#project-repeating-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.project-repeating-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid var(--border-light);
}

/* Body column: label + tag chips on top, cadence pill on its own line
   below. Keeps long cadence summaries from scrunching the title. */
.project-repeating-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.project-repeating-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.project-repeating-row:last-child {
    border-bottom: none;
}

.project-repeating-check {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.project-repeating-check:hover {
    color: var(--text-primary);
}

.project-repeating-check svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.project-repeating-label {
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    overflow-wrap: anywhere;
}

.project-repeating-label:hover {
    color: var(--accent);
}

.project-repeating-meta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-secondary);
    align-self: flex-start;  /* hug the left edge under the label */
}

.project-repeating-repeat-icon svg {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
}

.project-repeating-edit {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.project-repeating-edit:hover {
    color: var(--text-primary);
}

.project-repeating-edit svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.project-add-repeating {
    background: transparent;
    border: 1px dashed var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-family: inherit;
    margin-top: 8px;
}

.project-add-repeating:hover {
    color: var(--text-primary);
    border-color: var(--accent);
}

#project-actions-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 50vh;
    overflow-y: auto;
    margin-bottom: 8px;
}

.project-action-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.project-action-row {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px 8px;
    font-size: 13px;
}

.project-action-waiting {
    font-size: 11px;
    color: var(--gold);
    font-style: italic;
    padding: 3px 8px 2px 22px;
    line-height: 1.3;
    cursor: pointer;
    text-decoration: underline dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    align-self: flex-start;
}

.project-action-waiting:hover {
    color: var(--accent);
}

.project-action-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    min-width: 0;
}

.project-action-input:focus {
    outline: none;
    background: var(--bg-surface);
    border-radius: 3px;
    padding: 2px 4px;
    margin: -2px -4px;
}

.project-action-delete {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 6px;
    font-size: 14px;
    line-height: 1;
    border-radius: 3px;
    transition: color 0.15s, background 0.15s;
}

.project-action-delete:hover {
    color: var(--now-marker);
    background: var(--now-marker-soft);
}

/* Shared tap target for the quick-add rows. Enter alone isn't reliable on
   mobile keyboards (Android composes with keyCode 229, so keydown never
   reports "Enter"), so each quick-add needs a button you can tap. */
.inline-add-btn {
    flex: 0 0 auto;
    padding: 6px 14px;
    background: var(--accent);
    color: var(--text-inverse);
    border: none;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: opacity 0.15s;
}
.inline-add-btn:hover { opacity: 0.88; }

.project-add-action-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.project-add-action-row input {
    flex: 1;
    min-width: 0;
    background: var(--bg-surface);
    border: 1px dashed var(--border);
    color: var(--text-primary);
    padding: 6px 10px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-family: inherit;
}

.project-add-action-row input:focus {
    outline: none;
    border-color: var(--accent);
    border-style: solid;
}

.dialog-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
}

.dialog-actions-right {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.dialog-actions .danger {
    background: transparent;
    color: var(--now-marker);
    border: 1px solid var(--border);
}

.dialog-actions .danger:hover {
    background: var(--now-marker-soft);
    border-color: var(--now-marker);
}

.dialog-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 12px;
    line-height: 1.5;
}

/* Action edit dialog (title + description) */
.action-dialog {
    width: 460px;
    max-width: 92vw;
}

/* Reusable message dialog — replaces native alert() / confirm(). Inherits
   the .action-dialog chrome (border, padding, shadow, backdrop) via the
   surrounding <dialog> default styles in dialog.css; specific shape here
   keeps it narrow and centered. */
.message-dialog {
    width: 360px;
    max-width: 90vw;
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 20px;
    font-family: inherit;
    margin: auto;
}

.message-dialog::backdrop {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(6px);
}

.message-dialog h2 {
    font-size: 15px;
    font-weight: var(--weight-medium);
    margin: 0 0 8px;
}

.message-dialog h2[hidden] {
    display: none;
}

.message-dialog p {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
    white-space: pre-wrap;
}

.message-dialog .dialog-actions {
    display: flex;
    justify-content: flex-end;
}

.message-dialog button {
    background: var(--btn-bg, var(--accent));
    color: var(--btn-text, var(--bg));
    border: none;
    border-radius: var(--radius-sm);
    padding: 6px 14px;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: opacity 0.15s;
}

.message-dialog button:hover {
    opacity: 0.88;
}

.message-dialog #message-dialog-cancel {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    margin-right: 8px;
}

.message-dialog #message-dialog-cancel:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
    opacity: 1;
}

.message-dialog.destructive #message-dialog-confirm {
    background: var(--danger);
    color: #fff;
}

.project-action-edit {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 6px;
    font-size: 12px;
    line-height: 1;
    border-radius: 3px;
    transition: color 0.15s, background 0.15s;
}

.project-action-edit:hover {
    color: var(--accent);
    background: var(--accent-soft);
}

.project-action-rocket {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}

.project-action-rocket[disabled] {
    cursor: not-allowed;
    opacity: 0.4;
}

.project-action-rocket:hover:not([disabled]) {
    color: var(--accent);
    background: var(--accent-soft);
}

.project-action-rocket svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.project-repeating-rocket {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}

.project-repeating-rocket:hover {
    color: var(--accent);
    background: var(--accent-soft);
}

.project-repeating-rocket svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Action description shown on cards + context view (URLs auto-linked) */
.gtd-action-description {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
    margin-top: 2px;
    margin-left: 16px;
    padding-left: 6px;
    border-left: 2px solid var(--border-light);
    white-space: pre-wrap;
    word-break: break-word;
    cursor: pointer;
}

/* Clamp to 2 lines by default — click to expand (Google-Tasks style). */
.gtd-action-description.clamped {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gtd-action-description a {
    cursor: pointer;
}

.gtd-action-description a {
    color: var(--accent);
    text-decoration: underline;
}

.gtd-action-description a:hover {
    opacity: 0.85;
}

/* Context settings dialog */
#contexts-dialog {
    width: 380px;
    max-width: 92vw;
}

#contexts-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}

.context-edit-row {
    display: flex;
    gap: 6px;
    align-items: center;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px 8px;
}

.context-edit-row input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    min-width: 0;
}

.context-edit-row input:focus {
    outline: none;
    background: var(--bg-surface);
    border-radius: 3px;
    padding: 2px 4px;
    margin: -2px -4px;
}

.contexts-add-row {
    display: flex;
    gap: 6px;
}

.contexts-add-row input {
    flex: 1;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 6px 10px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-family: inherit;
}

.contexts-add-row button {
    padding: 6px 14px;
    background: var(--accent);
    color: var(--text-inverse);
    border: none;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}

/* Project card name made clickable so it opens the edit dialog */
.gtd-project-name {
    cursor: pointer;
    border-radius: 3px;
    padding: 2px 4px;
    margin: -2px -4px;
    transition: background 0.15s;
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.3;
    /* Up to two lines; anything past gets an ellipsis. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gtd-project-name:hover {
    background: var(--bg-hover);
}

.gtd-project-description {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: -2px;
    margin-bottom: 6px;
    line-height: 1.4;
    white-space: pre-wrap; /* preserve the note's line breaks, like the edit dialog */
}

/* ── Landing / sign-in screen ─────────────────────────────────────────
   Matches the breathe-books pattern: centered narrow column, art image,
   wordmark + tagline, then auth form. Same color tokens (--bg, --accent,
   --text-muted) so it inherits the dark/light theme. */

#landing,
#landing-blocked {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
}

#landing[hidden],
#landing-blocked[hidden],
#app-shell[hidden] {
    display: none;
}

.landing-inner {
    width: 100%;
    max-width: 340px;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.landing-art {
    width: 100%;
    height: 120px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 4px;
}

.landing-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.landing-wordmark {
    font-size: 22px;
    font-weight: 300;
    letter-spacing: -0.5px;
    color: var(--text-primary);
    margin: 0;
}

.landing-tagline {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0 0 8px;
}

.landing-auth-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.landing-auth-form input {
    width: 100%;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--text-primary);
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
}

.landing-auth-form input:focus {
    border-color: var(--accent);
}

.landing-password-field {
    position: relative;
}

.landing-password-field input {
    width: 100%;
    padding-right: 40px;
}

.landing-password-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}

.landing-password-toggle svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.landing-password-toggle:hover { color: var(--text-primary); }

.landing-auth-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
}

.landing-btn-primary {
    width: 100%;
    background: var(--btn-bg, var(--accent));
    color: var(--btn-text, #f0f2f5);
    border: none;
    border-radius: 8px;
    padding: 10px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.15s;
}

.landing-btn-primary:hover { opacity: 0.88; }

.landing-btn-google {
    width: 100%;
    background: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px;
    font-size: 13px;
    font-family: inherit;
    color: var(--text-muted);
    cursor: pointer;
    margin-top: 8px;
    transition: border-color 0.15s, color 0.15s;
}

.landing-btn-google:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}

.landing-auth-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
}

.landing-btn-link {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
}

.landing-btn-link:hover { color: var(--text-primary); }

/* ============================================================
   Redesigned active-project card (two-column, inline editing)
   ============================================================ */

/* Inline-editable project title */
.gtd-project-name[contenteditable="true"] {
    cursor: text;
    border-radius: 4px;
    padding: 1px 5px;
    margin: -1px -5px;
    transition: background 0.15s, box-shadow 0.15s;
}
.gtd-project-name[contenteditable="true"]:hover { background: var(--bg-hover); }
.gtd-project-name[contenteditable="true"]:focus {
    background: var(--bg-hover);
    box-shadow: inset 0 0 0 1.5px var(--accent);
    outline: none;
}

/* Header settings/⋯ button */
.gtd-project-more-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 0 4px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
.gtd-project-more-btn:hover { color: var(--text-primary); background: var(--bg-hover); }

/* Two-column body — full-bleed within the card's padding, hairline divider */
.gtd-pcard-body {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    margin: 8px -12px -10px;
    border-top: 1px solid var(--border);
}
.gtd-project-card.collapsed .gtd-pcard-body { display: none; }

.gtd-pcard-col { padding: 12px 14px; min-width: 0; }
.gtd-pcard-left { border-right: 1px solid var(--border); }

.gtd-pcard-flabel {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 6px;
}

/* Inline-editable note */
.gtd-pcard-note {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    border-radius: 6px;
    padding: 4px 6px;
    margin: -4px -6px;
    outline: none;
    cursor: text;
    overflow-wrap: anywhere;
    white-space: pre-wrap; /* preserve the note's line breaks, like the edit dialog */
    transition: background 0.15s, box-shadow 0.15s;
}
.gtd-pcard-note:hover { background: var(--bg-hover); }
.gtd-pcard-note:focus { background: var(--bg-hover); box-shadow: inset 0 0 0 1.5px var(--accent); }
.gtd-pcard-note.empty::before { content: attr(data-placeholder); color: var(--text-muted); }

/* Repeating section on the card */
.gtd-pcard-repeat { margin-top: 16px; }
.gtd-crepeat-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 13px;
    color: var(--text-secondary);
}
.gtd-crepeat-label {
    flex: 1;
    min-width: 0;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gtd-crepeat-label:hover { color: var(--text-primary); }
.gtd-crepeat-cadence { font-size: 11px; color: var(--text-muted); flex: none; }

/* Unified context slot — "send →" when empty, pill when assigned */
.gtd-ctx-slot {
    border: 1px solid transparent;
    font: inherit;
    font-size: 11px;
    padding: 2px 9px;
    border-radius: var(--radius-full);
    cursor: pointer;
    flex: none;
    white-space: nowrap;
    transition: opacity 0.15s, color 0.15s, border-color 0.15s, background 0.15s;
}
.gtd-ctx-slot.empty {
    opacity: 0;
    border-color: var(--border);
    background: transparent;
    color: var(--text-muted);
}
.gtd-action-row:hover .gtd-ctx-slot.empty,
.gtd-crepeat-row:hover .gtd-ctx-slot.empty { opacity: 1; }
.gtd-ctx-slot.empty:hover { color: var(--accent); border-color: var(--accent); }
.gtd-ctx-slot.filled {
    border-color: var(--border);
    color: var(--text-secondary);
    background: var(--bg-hover);
}
.gtd-ctx-slot.filled:hover { box-shadow: 0 0 0 1.5px var(--border); }

/* Inline quick-adds */
.gtd-pcard-quickadd {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    padding: 6px 0 2px;
    margin-top: 2px;
}
.gtd-pcard-quickadd:hover { color: var(--accent); }
.gtd-pcard-plus { font-size: 14px; line-height: 1; }
/* Quick-add row on a project card. The hairline separator moved from the input
   to the row so it spans the button too; :focus-within keeps the accent-on-focus
   behavior the input used to own. */
.gtd-pcard-quickadd {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding-top: 5px;
    border-top: 1px solid var(--border);
    transition: border-color 0.15s;
}
.gtd-pcard-quickadd:focus-within { border-top-color: var(--accent); }

.gtd-pcard-quickadd-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    padding: 2px;
    color: var(--text-primary);
    font: inherit;
    font-size: 13px;
    outline: none;
}
.gtd-pcard-quickadd-input::placeholder { color: var(--text-muted); }

/* Muted by default — every project card renders one of these, so it stays
   quiet until the row is in use. */
.gtd-pcard-quickadd-btn {
    flex: 0 0 auto;
    padding: 3px 9px;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 4px);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.gtd-pcard-quickadd-btn:hover,
.gtd-pcard-quickadd:focus-within .gtd-pcard-quickadd-btn {
    color: var(--text-inverse);
    background: var(--accent);
    border-color: var(--accent);
}

/* "Back to project" clear option in the send-to-context popover */
#send-context-list .clear { color: var(--text-muted); }

/* Next-actions column header + group-by control */
.gtd-pcard-collhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.gtd-pcard-collhead .gtd-pcard-flabel { margin-bottom: 0; }
.gtd-groupby {
    font-family: inherit;
    font-size: 11px;
    color: var(--text-secondary);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 2px 5px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.gtd-groupby:hover { color: var(--text-primary); border-color: var(--accent); }
/* Pin the option popup colors so the native list is never white-on-white in
   dark mode (the OS-rendered dropdown won't inherit the app theme otherwise). */
.gtd-groupby option { background: var(--bg-surface); color: var(--text-primary); }

/* Context group dividers inside the grouped action list */
.gtd-actgroup-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
    margin: 12px 0 3px;
}
.gtd-actgroup-head:first-child { margin-top: 0; }
.gtd-actgroup-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }

/* Mobile: stack the two columns, next actions on top */
@media (max-width: 720px) {
    .gtd-pcard-body { grid-template-columns: 1fr; }
    .gtd-pcard-left {
        border-right: none;
        border-top: 1px solid var(--border);
        order: 2;
    }
    .gtd-pcard-right { order: 1; }
}

/* Opt-in completion celebration — a calm, full-screen particle wash. */
.celebrate-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9999;
}
.settings-celebrate-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0 0 8px;
}
#settings-celebrate { color-scheme: light dark; }
#settings-celebrate option { background: var(--bg-surface); color: var(--text-primary); }

/* Native <select> option popups are OS-rendered and don't inherit the app theme,
   so in dark mode they can render white-on-white. color-scheme keeps the popup
   theme-aware where option colors aren't honored (Safari); the explicit option
   colors pin it everywhere else (Chromium/Firefox). Global so it covers every
   select in the app (the #settings-celebrate / .gtd-groupby rules above are now
   redundant but harmless). */
select { color-scheme: light dark; }
select option { background: var(--bg-surface); color: var(--text-primary); }

/* Settings data-section body text + link — mirrors breathe-books (13px). */
.settings-about-text {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.7;
    margin: 0;
}
.settings-inline-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--accent);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: opacity 0.15s;
}
.settings-inline-link:hover { opacity: 0.8; }

/* Collapsible section header (recent activity) */
.settings-collapse-head { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 7px; }
.settings-collapse-chev { font-size: 10px; color: var(--text-muted); display: inline-block; width: 10px; }

/* Recent-activity list: time · icon · item */
.settings-activity-list { display: flex; flex-direction: column; gap: 1px; max-height: 300px; overflow-y: auto; margin-top: 8px; }
.settings-activity-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; padding: 4px 0; }
.settings-activity-when { flex: none; width: 104px; color: var(--text-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.settings-activity-icon { flex: none; display: inline-flex; align-items: center; }
.settings-activity-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.settings-activity-icon.completed { color: var(--forest); }
.settings-activity-icon.deleted { color: var(--text-muted); }
.settings-activity-icon.created { color: var(--accent); }
.settings-activity-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.settings-activity-kind { flex: none; color: var(--text-muted); font-size: 10.5px; }