/* components.css: masthead, switcher, toolbar, sections, cards, form, dialogs, menus, toasts. */

/* ---------- layout ---------- */
.app { max-width: calc(var(--column) + 48px); margin: 0 auto; padding: 18px 24px 120px; }
.workspace { transition: filter 0.3s ease, opacity 0.3s ease; }
.app.is-switching .workspace,
.app.is-switching .query-return,
.app.is-switching .banner { filter: blur(5px); opacity: 0.35; pointer-events: none; }
body.has-dialog .app { filter: blur(2px); }

/* ---------- masthead ---------- */
.masthead { position: relative; text-align: center; }
.masthead-bar { display: flex; align-items: center; justify-content: space-between; min-height: 40px; }
.docket-name { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.title { margin: 2px 0 0; font: 400 clamp(40px, 6.2vw, 58px)/1.12 var(--font-display); color: var(--title); letter-spacing: -0.005em; }
.title-btn {
  font: inherit; color: inherit; background: none; border: 0; padding: 2px 12px 6px; border-radius: var(--radius);
  transition: background-color 0.15s ease;
}
.title-btn:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.title-ws { text-decoration: underline; text-decoration-color: var(--border-strong); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.title-btn:hover .title-ws { text-decoration-color: var(--primary); }
.title-caret { display: inline-block; margin-left: 0.25em; font-size: 0.38em; vertical-align: middle; color: var(--text-faint); transition: transform 0.2s ease; }
.title-btn[aria-expanded="true"] .title-caret { transform: rotate(180deg); }
.tagline { margin: 4px 0 26px; color: var(--text-muted); font-size: 16px; }

.switcher { position: absolute; left: 0; right: 0; top: calc(100% - 6px); z-index: 20; animation: fade-in 0.25s ease; }
.switcher-list { list-style: none; margin: 0; padding: 8px 0 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.switcher-item {
  font: 400 clamp(34px, 5vw, 46px)/1.15 var(--font-display); color: var(--title); background: none; border: 0;
  padding: 2px 14px; border-radius: var(--radius); text-decoration: underline; text-decoration-color: var(--border-strong);
  text-decoration-thickness: 1px; text-underline-offset: 0.2em;
}
.switcher-item:hover { text-decoration-color: var(--primary); background: color-mix(in srgb, var(--surface) 70%, transparent); }
@keyframes fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 8px 16px; border-radius: var(--radius-small);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  font-weight: 500; font-size: 15px; line-height: 1.2; transition: background-color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { background: var(--surface-hover); border-color: var(--text-faint); }
.btn-primary { background: var(--primary); border-color: transparent; color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-hover); border-color: transparent; }
.btn-danger { background: var(--danger); border-color: transparent; color: var(--on-danger); }
.btn-danger:hover { background: var(--danger-hover); border-color: transparent; }
/* v0.18: a button that can't be used yet (Create notebook before a title, Save before a change)
   looks it, instead of looking ready and doing nothing. */
.btn:disabled, .btn:disabled:hover { opacity: 0.5; }
.btn:not(.btn-primary):not(.btn-danger):disabled:hover { background: var(--surface); border-color: var(--border-strong); }
.btn-primary:disabled:hover { background: var(--primary); }
.btn-quiet { border-color: var(--border); background: var(--surface); }
.btn-small { min-height: 34px; padding: 6px 12px; font-size: 14px; }

.icon-btn {
  display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: var(--radius-small); background: transparent; color: var(--text-muted);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.icon-btn:hover { background: var(--surface-hover); color: var(--text); }
.icon-btn.is-on { color: var(--primary); }
html[data-theme="dark"] .icon-btn.is-on { color: var(--focus); }
.icon-btn-danger:hover { color: var(--danger); }
html[data-theme="dark"] .icon-btn-danger:hover { color: var(--overdue-text); }

/* ---------- banner (save problems) ---------- */
.banner {
  display: flex; align-items: center; gap: 14px; justify-content: space-between;
  margin: 0 0 16px; padding: 12px 16px; border-radius: var(--radius);
  background: var(--overdue); color: var(--overdue-text); font-size: 15px;
}

/* ---------- toolbar ---------- */
.toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-large);
  box-shadow: var(--shadow);
}
.toolbar-group { display: flex; align-items: center; gap: 8px; }
.menu-anchor { position: relative; }

/* ---------- popovers & menus ---------- */
.popover {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 200px;
  padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-raised); text-align: left; animation: fade-in 0.15s ease;
}
.popover-end { left: auto; right: 0; }
.menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--radius-small);
  background: none; color: var(--text); text-align: left; font-size: 15px;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--surface-hover); }
.menu-check { display: inline-grid; flex: none; place-items: center; width: 18px; color: var(--primary); } /* never squeezed by a long, wrapping name */
.menu-item[aria-disabled="true"] { color: var(--text-faint); cursor: default; }
.menu-item[aria-disabled="true"]:hover { background: none; }
html[data-theme="dark"] .menu-check { color: var(--focus); }
.menu-group { padding: 10px 10px 4px 36px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.menu-note { max-width: 250px; margin: 0; padding: 2px 10px 8px 36px; font-size: 13px; line-height: 1.4; color: var(--text-muted); }
.menu-sep { height: 1px; margin: 6px 4px; background: var(--border); }
.menu-command { white-space: nowrap; }

.settings { width: min(330px, calc(100vw - 32px)); padding: 14px; }
.settings-group + .settings-group { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.settings-label { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.settings-text { margin: 0 0 10px; font-size: 14px; color: var(--text-muted); }
.settings-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.settings-label[for] { display: block; }
.settings-label-next { margin-top: 14px; } /* v0.31: a second label in one group (Colors, then Paper texture) */
.input-compact { width: auto; min-height: 36px; padding: 6px 10px; }
.settings-note { margin: 8px 0 0; font-size: 13px; }
.settings-split { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } /* v0.24: Previous searches: Off/On, then Keep */
.settings-split .input { flex: 0 1 auto; width: auto; }
.settings-after { margin-top: 10px; }
.settings-foot { margin: 16px 0 0; font-size: 12px; color: var(--text-faint); text-align: right; }

/* ---------- sections ---------- */
.section { margin-top: 22px; }
.section-heading { margin: 0; font: inherit; }
.section-head {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 6px 8px; border: 0; border-radius: var(--radius-small); background: none; color: var(--text);
  font-size: 18px; font-weight: 600; text-align: left;
}
.section-head:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.section-head .count { font-weight: 500; color: var(--text-muted); }
.section-head .icon { color: var(--text-muted); transition: transform 0.2s ease; transform: rotate(180deg); }
.section.is-collapsed .section-head .icon { transform: none; }
.section-body { padding-top: 4px; }
.empty { margin: 10px 8px; color: var(--text-muted); }

.group { margin: 12px 0 18px; padding: 12px 14px 4px; border-radius: var(--radius-large); background: color-mix(in srgb, var(--surface) 55%, transparent); border: 1px solid var(--border); }
.group-title { margin: 8px 4px 2px; font: 500 22px/1.2 var(--font-display); color: var(--title); overflow-wrap: anywhere; }
.subgroup { margin: 10px 0 10px 4px; padding-left: 12px; border-left: 2px solid var(--border); }
.subgroup-title { margin: 6px 0 0; font-size: 14px; font-weight: 600; color: var(--text-muted); overflow-wrap: anywhere; }

/* ---------- cards ---------- */
.cards { list-style: none; margin: 0; padding: 0; }
.card {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: start; column-gap: 14px;
  margin-top: 8px; padding: 13px 12px 13px 22px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  transition: background-color 0.15s ease, box-shadow 0.2s ease;
}
.card:hover { background: var(--surface-hover); }
/* v0.25 (R13): the browser skips styling, laying out and painting cards that are off screen, so
   thousands of tasks cost little until they're scrolled to. That also clips a card's insides to
   its box: the 8 px margin keeps the drop line and the priority bar's edge, which sit just
   outside. The open task is never skipped (its editor's menus must not be clipped).
   v0.28: until a card has been seen, its inside counts as 51 px, a typical card's on a computer
   (a title and a line of chips: 79 px in all). It was 78 px, which made every unseen card 106 px,
   so a long list's scrollbar crept as the cards were first scrolled past (by about a third at
   5,000 tasks). A card seen once keeps its own size ("auto"). */
.card, .card-pending { --card-estimate: 51px; }
.card:not(.is-editing) { content-visibility: auto; contain-intrinsic-size: auto var(--card-estimate); overflow-clip-margin: 8px; }
/* v0.27 (R13): the place of a card still to be built, a moment after the screen shows; exactly
   the room a skipped card takes (margin, the estimate above, padding and border; phones have
   their own padding, below), so nothing moves when the card arrives. Never seen: anything the
   person does builds the rest first. */
.card-pending { display: block; margin-top: 8px; height: calc(var(--card-estimate) + 2 * 13px + 2 * 1px); }
.card-bar {
  position: absolute; left: -1px; top: -1px; bottom: -1px; width: 5px;
  border-radius: var(--radius) 0 0 var(--radius); background: var(--prio-medium);
}
.prio-high .card-bar { background: var(--prio-high); }
.prio-low .card-bar { background: var(--prio-low); }
.is-done .card-bar { background: var(--done); }
.is-archived .card-bar { background: var(--archived); }

.check {
  display: inline-grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; padding: 0;
  border-radius: 50%; border: 1.5px solid var(--text-faint); background: transparent; color: var(--on-primary);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.check:hover:not(:disabled) { border-color: var(--primary); background: var(--primary-soft); }
.is-done .check { background: var(--primary); border-color: var(--primary); }
.is-archived .check { opacity: 0.6; }

.card:not(.is-archived) { cursor: pointer; }
.card-main { min-width: 0; }
.card-title-row { display: flex; align-items: baseline; gap: 6px; }
.card-title { font-size: 16px; line-height: 1.45; color: var(--text); overflow-wrap: anywhere; }
.card-open { padding: 0; border: 0; background: none; text-align: left; border-radius: 4px; }
.card-open:hover { text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
/* The task's ▾, the same triangle as "Docket: Tasks ▾": quiet until hover or focus (always on
   touch screens and while open), and it flips to ▴ while the task is open. */
.card-caret {
  display: inline-block; flex: none; align-self: center; font-size: 13px; line-height: 1; color: var(--text-faint);
  opacity: 0; transition: opacity 0.15s ease, transform 0.2s ease;
}
.card:hover .card-caret, .card:focus-within .card-caret, .card.is-editing .card-caret { opacity: 1; }
.card.is-editing .card-caret { transform: rotate(180deg); color: var(--text-muted); }
@media (hover: none) { .card-caret { opacity: 1; } }
.is-done .card-title { color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--text-faint); }
.is-archived .card-title { color: var(--text-muted); }
.pin-mark { display: inline-flex; flex: none; color: var(--primary); transform: translateY(3px); }
html[data-theme="dark"] .pin-mark { color: var(--focus); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chips:empty { display: none; }
.chip { display: inline-block; max-width: 100%; padding: 1px 10px; border-radius: 11px; font-size: 13px; line-height: 20px; background: var(--chip); color: var(--chip-text); overflow-wrap: anywhere; }
.chip-soft { background: var(--chip-soft); color: var(--text-muted); }
.chip-info { background: var(--info); color: var(--info-text); }
.chip-overdue { background: var(--overdue); color: var(--overdue-text); font-weight: 600; }
.chip-prio { padding-left: 0; padding-right: 2px; background: none; color: var(--overdue-text); font-weight: 600; }

.card-actions { display: flex; gap: 2px; margin: -4px -2px 0 0; opacity: 0; transition: opacity 0.15s ease; }
.card:hover .card-actions, .card:focus-within .card-actions { opacity: 1; }
@media (hover: none) { .card-actions { opacity: 1; } }

.card.flash { animation: flash 1.4s ease; }
@keyframes flash { 0% { box-shadow: 0 0 0 3px var(--primary-soft), var(--shadow); } 100% { box-shadow: var(--shadow); } }

/* An open task: its line stays exactly where it was; the editor opens beneath it. */
.card.is-editing { border-color: var(--border-strong); }
.card.is-editing:hover { background: var(--surface); }
.card-editor { grid-column: 2 / -1; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--border); cursor: auto; }

/* subtask progress ("1/3") and the checklist under a card */
.progress {
  display: inline-flex; align-items: center; gap: 4px; flex: none; align-self: center; height: 24px; padding: 0 8px;
  border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--text-muted);
  font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; transition: background-color 0.15s ease;
}
.progress:hover { background: var(--surface-sunken); color: var(--text); }
.progress.is-static, .progress.is-static:hover { background: transparent; color: var(--text-muted); }
.progress[aria-expanded="true"] { background: var(--chip); color: var(--chip-text); border-color: transparent; }
.progress.is-complete { color: var(--primary); }
html[data-theme="dark"] .progress.is-complete { color: var(--focus); }
.card-subtasks { grid-column: 2 / -1; list-style: none; margin: 10px 0 0; padding: 8px 0 0; border-top: 1px dashed var(--border); }
.card-subtask { display: flex; align-items: center; gap: 10px; padding: 3px 0; font-size: 15px; }
.card-subtask-title { min-width: 0; overflow-wrap: anywhere; }
.card-subtask.is-done .card-subtask-title { color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--text-faint); }
/* A subtask's checkbox: a 20 px box, but a 24 px target (v0.33, WCAG 2.5.8): the button is 24 px,
   reaching 4 px further right (toward its words) and 2 px above and below, with margins that
   keep its 20 px place in the row; the box itself is drawn by ::before exactly where it was. */
.subcheck {
  position: relative; isolation: isolate; display: inline-grid; place-items: center; flex: none;
  width: 24px; height: 24px; margin: -2px -4px -2px 0; padding: 0 4px 0 0;
  border: 0; border-radius: 6px; background: none; color: var(--on-primary);
}
.subcheck::before {
  content: ''; position: absolute; inset: 2px 4px 2px 0; z-index: -1;
  border-radius: 6px; border: 1.5px solid var(--text-faint); background: transparent;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.subcheck:hover:not(:disabled)::before { border-color: var(--primary); background: var(--primary-soft); }
.subcheck[aria-checked="true"]::before { background: var(--primary); border-color: var(--primary); }
.subcheck:disabled { opacity: 0.6; }
.subcheck:focus-visible { outline: none; }
.subcheck:focus-visible::before { outline: 2px solid var(--focus); outline-offset: 2px; }
.chip-small { font-size: 12px; line-height: 18px; padding: 0 8px; }
.chip-repeat { display: inline-flex; align-items: center; gap: 4px; }
/* v0.29: the person's reminder: a bell after the due date words. */
.chip-reminder { display: inline-flex; align-items: center; gap: 5px; }
.chip-reminder .icon { flex: none; opacity: 0.85; }

/* reordering: a grip at the card's left edge (on hover/focus; always on touch screens) */
.drag-handle {
  position: absolute; left: 5px; top: 12px; display: inline-grid; place-items: center; width: 16px; height: 26px; padding: 0;
  border: 0; border-radius: 5px; background: none; color: var(--text-faint); cursor: grab; touch-action: none;
  opacity: 0; transition: opacity 0.15s ease, color 0.15s ease;
}
.drag-handle:hover { color: var(--text); }
.drag-handle::after { content: ''; position: absolute; inset: -10px 0 -10px -5px; } /* bigger target for fingers, not over the checkbox */
.drag-handle-inline::after { display: none; }
.card:hover .drag-handle, .card:focus-within .drag-handle, .drag-handle:focus-visible { opacity: 1; }
@media (hover: none) { .drag-handle { opacity: 0.8; } }
.drag-handle-inline { position: static; flex: none; width: 24px; height: 30px; margin: 0 -7px 0 -3px; } /* v0.33: 24 px wide, same place (was 18 px, margin-right -4px) */
/* v0.33 (WCAG 2.5.8): a card's grip sits 4 px further left, so a 24 px circle around it clears the
   checkbox (it was 1 px short of 24 px from it); its finger area still starts at the card's edge. */
.card > .drag-handle { left: 1px; }
.card > .drag-handle::after { inset: -10px 0 -10px -1px; }
.subtask-row:hover .drag-handle, .subtask-row:focus-within .drag-handle { opacity: 1; }
.is-dragging { position: relative; z-index: 5; box-shadow: var(--shadow-raised); opacity: 0.96; transition: none; }
.card.is-dragging, .card.is-dragging:hover { background: var(--surface); }
body.is-sorting, body.is-sorting * { cursor: grabbing !important; user-select: none; }
.drop-before, .drop-after { position: relative; }
.drop-before::before, .drop-after::after {
  content: ''; position: absolute; left: 0; right: 0; height: 3px; border-radius: 2px; background: var(--primary); pointer-events: none;
}
.drop-before::before { top: -6px; }
.drop-after::after { bottom: -6px; }
.subtask-row.drop-before::before { top: -5px; }
.subtask-row.drop-after::after { bottom: -5px; }
html[data-theme="dark"] .drop-before::before, html[data-theme="dark"] .drop-after::after { background: var(--focus); }

/* ---------- task form ---------- */
.task-form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field-label { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.input {
  width: 100%; min-height: 40px; padding: 8px 12px; border-radius: var(--radius-small);
  border: 1px solid var(--field-border); background: var(--field); color: var(--text);
}
.input::placeholder { color: var(--text-faint); }
.input:disabled { opacity: 0.5; cursor: default; } /* v0.25: faint like a disabled button (Zack: Keep looked clickable while off) */
.input:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: transparent; }
.input-title { font-size: 18px; min-height: 46px; }
.input-details { min-height: 84px; resize: vertical; line-height: 1.5; }
.input[aria-invalid] { border-color: var(--danger); }
.field-error { margin: 0; font-size: 13px; color: var(--overdue-text); font-weight: 600; }
.form-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.form-row-quick { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); }
.form-hint { margin: 0; font-size: 13px; color: var(--text-muted); }
/* v0.29: Reminder, then a number and a unit for Custom, whose place stays while hidden. */
.form-row-reminder { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: end; }
.reminder-custom { display: flex; gap: 8px; align-items: center; min-width: 0; }
.reminder-custom.is-hidden { visibility: hidden; }
.reminder-custom .input-amount { width: 5.5em; flex: none; }
.reminder-custom select { flex: 1 1 auto; min-width: 0; }
.reminder-hint { margin-top: -4px; }

/* ---------- reminders on screen (v0.29) ---------- */
/* Bottom right, above where the Undo toasts appear (bottom centre), so neither replaces or
   covers the other, and clear of the masthead's Settings button; calm, card-like. */
.reminders { position: fixed; bottom: 88px; right: 16px; z-index: 55; display: flex; flex-direction: column; gap: 8px; width: min(360px, calc(100vw - 32px)); pointer-events: none; }
.reminders[hidden] { display: none; }
body:has(.order-bar) .reminders { bottom: 160px; }
.reminder {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 10px;
  padding: 12px 8px 12px 14px; border: 1px solid var(--border); border-left: 4px solid var(--primary);
  border-radius: var(--radius); background: var(--surface); color: var(--text); box-shadow: var(--shadow-raised);
  pointer-events: auto; animation: fade-in 0.2s ease;
}
.reminder-icon { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; color: var(--primary); }
.reminder-main { min-width: 0; }
.reminder-title { display: block; max-width: 100%; padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-weight: 600; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.reminder-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.reminder-when { margin: 2px 0 0; font-size: 13px; color: var(--text-muted); }
.reminder-close { width: 32px; height: 32px; }
.form-more { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 4px; }

.disclosure {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; margin: -4px 0 0 -6px;
  border: 0; background: none; border-radius: 6px; color: var(--text-muted); font-weight: 600; font-size: 14px;
}
.disclosure:hover { color: var(--text); }
.disclosure .icon { transition: transform 0.2s ease; }
.disclosure[aria-expanded="true"] .icon { transform: rotate(180deg); }

.segmented { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--radius-small); background: var(--surface-sunken); border: 1px solid var(--border); }
.segment { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; font-size: 14px; font-weight: 500; color: var(--text-muted); cursor: pointer; white-space: nowrap; }
.segment input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segment:has(input:checked) { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.segment:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; }
.segment-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--prio-medium); }
/* Forced colors (e.g. Windows high contrast) drop backgrounds and shadows, so the chosen segment
   needs a mark of its own: a system-colored outline (review F15). Same for every segmented control. */
@media (forced-colors: active) {
  .segment:has(input:checked) { outline: 2px solid Highlight; outline-offset: -2px; }
  .segment-dot { forced-color-adjust: none; }
}
.segment.prio-high .segment-dot { background: var(--prio-high); }
.segment.prio-low .segment-dot { background: var(--prio-low); }
.segmented-plain { display: flex; }
.segmented-plain .segment { flex: 1; justify-content: center; }

/* repeat */
.repeat { display: flex; flex-direction: column; gap: 12px; }
.repeat.is-on { padding: 12px 14px 14px; border-radius: var(--radius); background: var(--surface-sunken); border: 1px solid var(--border); }
.repeat-freq .input { align-self: flex-start; width: auto; min-width: 180px; max-width: 100%; }
.repeat-detail { display: flex; flex-direction: column; gap: 12px; }
.repeat-grid { display: grid; grid-template-columns: max-content minmax(0, 220px); justify-content: start; gap: 12px 24px; align-items: end; }
.repeat-every { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); }
.input-every { width: 78px; }
.repeat-row { display: flex; flex-direction: column; gap: 5px; }
.repeat-row .input { align-self: flex-start; width: auto; max-width: 100%; }
.weekdays { display: flex; flex-wrap: wrap; gap: 6px; }
.weekday {
  min-width: 46px; height: 34px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text-muted); font-size: 14px; font-weight: 500;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.weekday:hover { color: var(--text); }
.weekday[aria-pressed="true"] { background: var(--primary); border-color: transparent; color: var(--on-primary); }
.repeat-on { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.repeat-on .input { width: auto; }
.segmented-small .segment { padding: 5px 10px; font-size: 13px; }
.repeat-hint { margin: 0; font-size: 13px; color: var(--text-muted); }
.input.is-moved { animation: moved 1.8s ease; }
@keyframes moved { 0%, 40% { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } 100% { box-shadow: none; } }
.repeat-summary { margin: 0; font-size: 14px; color: var(--text); }
.repeat-summary:empty { display: none; }

/* subtasks in the form */
.subtask-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.subtask-list:empty { display: none; }
.subtask-row { display: flex; align-items: center; gap: 8px; }
.input-subtask { flex: 1; min-width: 0; min-height: 36px; padding: 6px 10px; }
.subtask-row.is-done .input-subtask { color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--text-faint); }
.input-subdate { flex: none; width: auto; min-height: 36px; padding: 6px 8px; }
.icon-btn-small { width: 30px; height: 30px; flex: none; }
.link-btn {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; margin-left: -6px; padding: 4px 6px;
  border: 0; border-radius: 6px; background: none; color: var(--primary); font-weight: 600; font-size: 14px;
}
.link-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.link-btn:disabled { opacity: 0.5; cursor: default; text-decoration: none; }
html[data-theme="dark"] .link-btn { color: var(--focus); }

/* ---------- dialogs ---------- */
.backdrop {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: start center; overflow-y: auto;
  padding: max(6vh, 24px) 16px 24px; background: var(--backdrop); animation: fade-in 0.15s ease;
}
.dialog {
  width: min(560px, 100%); padding: 20px 22px 22px; border-radius: var(--radius-large);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-raised); color: var(--text);
}
.dialog-task { width: min(680px, 100%); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.dialog-title { margin: 0; font: 500 26px/1.2 var(--font-display); color: var(--title); }
.dialog-text { margin: 0 0 10px; color: var(--text); }
.dialog-footer { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

/* Earlier copies (Settings) */
.copies { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--border); }
.copy-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--border); }
.copy-info { min-width: 0; }
.copy-when { display: block; color: var(--text); }
.copy-meta { display: block; font-size: 14px; color: var(--text-muted); }
.copies-empty { color: var(--text-muted); }

/* ---------- the unsaved-order bar (rearranged, not saved yet) ---------- */
.order-bar {
  position: fixed; left: 0; right: 0; bottom: 24px; z-index: 55; margin: 0 auto;
  display: flex; align-items: center; gap: 14px; width: max-content; max-width: calc(100% - 32px);
  padding: 8px 8px 8px 18px; background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-raised);
  animation: fade-in 0.15s ease;
}
.order-bar-text { margin: 0; font-size: 14px; }
.order-bar-actions { display: flex; flex: none; gap: 8px; }
.tasks:has(.order-bar) { padding-bottom: 72px; } /* the last card stays reachable above the bar */
body:has(.order-bar) .toasts { bottom: 92px; }  /* toasts sit above it */
.name-form { display: flex; flex-direction: column; gap: 14px; min-width: min(360px, 100%); }

/* ---------- toasts ---------- */
.toasts { position: fixed; left: 0; right: 0; bottom: 24px; z-index: 60; display: flex; justify-content: center; pointer-events: none; padding: 0 16px; }
.toast {
  display: flex; align-items: center; gap: 12px; max-width: 560px; padding: 10px 8px 10px 16px;
  border-radius: var(--radius); background: var(--toast-bg); color: var(--toast-text);
  box-shadow: var(--shadow-raised); pointer-events: auto; animation: fade-in 0.2s ease; font-size: 15px;
}
.toast-action { border: 0; background: none; color: var(--toast-action); font-weight: 700; padding: 6px 8px; border-radius: 6px; }
.toast-action:hover { text-decoration: underline; }
.toast-close { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 0; background: none; color: inherit; opacity: 0.7; border-radius: 6px; }
.toast-close:hover { opacity: 1; }

/* ---------- placeholders (Workspaces not built yet) ---------- */
.placeholder {
  margin: 8px auto 0; max-width: 560px; padding: 32px 28px; text-align: center; color: var(--text-muted);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-large); box-shadow: var(--shadow);
}
.placeholder p { margin: 0 0 8px; }
.placeholder-title { font: 500 26px/1.25 var(--font-display); color: var(--title); }
.fatal { margin-top: 12vh; }
.members { list-style: none; margin: 0 0 18px; padding: 0; display: flex; justify-content: center; }
.member { display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); }
.member-name { font-weight: 600; color: var(--text); }
.member-role { font-size: 13px; color: var(--text-muted); }
.avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-weight: 700; font-size: 15px; color: var(--on-color); background: var(--c-sage); }
.avatar-moss { background: var(--c-moss); } .avatar-clay { background: var(--c-clay); } .avatar-ochre { background: var(--c-ochre); }
.avatar-mist { background: var(--c-mist); } .avatar-blush { background: var(--c-blush); } .avatar-bark { background: var(--c-bark); } .avatar-stone { background: var(--c-stone); }

/* ---------- Queries (v0.13; search card and results reworked in v0.15) ---------- */
/* v0.18 (Claude): the card's top line. Left, what you're searching: "Search in Personal", or a
   saved query's name in the serif (as notebooks and notes are named) with a quiet state after it.
   Right, "Saved Queries ▾", quiet like Advanced Search ▾ below it. Fixed height: choosing,
   changing or deleting a query never moves the field. */
.query-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 12px; min-height: 34px; margin: -4px 0 8px; }
/* A long name shortens rather than pushing the menu onto a line of its own; only a very narrow
   card (a phone at 200% text) wraps, and then it does so whether or not a query is chosen. */
.query-identity { flex: 1 1 0; min-width: 6rem; display: flex; align-items: center; height: 34px; }
.query-head .query-scope { margin: 0; }
/* A long name shortens; its state ("· changed") always stays readable after it. */
.query-saved-status { display: flex; align-items: baseline; min-width: 0; margin: 0; color: var(--text-muted); font-size: 14px; }
.query-saved-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 21px/34px var(--font-display); color: var(--title); }
.query-saved-state { flex: none; margin-left: 2px; white-space: pre; }
.query-saved-tools { flex: none; margin-left: auto; }
.query-saved-menu { min-height: 34px; margin: 0 -6px 0 0; padding: 4px 6px; font-size: 14px; font-weight: 500; white-space: nowrap; }
.query-saved-caret::before { content: '▾'; }
.query-saved-menu[aria-expanded="true"] .query-saved-caret::before { content: '▴'; }
.query-saved-menu:disabled { opacity: 0.6; }
.query-saved-tools .popover { width: max-content; min-width: 220px; max-width: min(340px, calc(100vw - 60px)); max-height: min(60vh, 480px); overflow-y: auto; }
.query-saved-tools .menu-item > span:last-child { overflow-wrap: anywhere; }
.query-saved-tools .menu-command { white-space: normal; }
/* The card: one field (a magnifier inside it at the left, its own × at the right), Search, then a
   quiet line with Include archived and Advanced Search ▾. Nothing in it changes size when a
   choice changes: pills keep their weight when chosen, and chips only stand in for hidden pills. */
.query-form { padding: 16px 18px 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-large); box-shadow: var(--shadow); }
.query-scope { margin: 0 0 10px; color: var(--text-muted); font-size: 14px; overflow-wrap: anywhere; }
.query-search-row { display: flex; flex-wrap: wrap; gap: 8px; }
.query-field { position: relative; flex: 1 1 200px; min-width: 0; } /* Search wraps below only when space is very tight (e.g. 200% zoom on a phone) */
.query-input { min-height: 44px; padding-left: 40px; padding-right: 44px; }
.query-input::-webkit-search-cancel-button, .query-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.query-field-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); display: flex; color: var(--text-faint); pointer-events: none; }
.query-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: grid; place-items: center;
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text-muted);
}
.query-clear:hover { background: var(--surface-sunken); color: var(--text); }
.query-clear:focus-visible { border-radius: 50%; }
/* v0.24: Previous Searches, under the empty field and over the page (nothing moves). The
   highlighted row is the keyboard's; the × shows on hover or highlight (always on touch). */
.query-recent {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-raised); animation: fade-in 0.15s ease;
}
.query-recent-list { max-height: min(50vh, 360px); margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.query-recent-item {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 6px 4px 10px;
  border-radius: var(--radius-small); color: var(--text); font-size: 15px; cursor: pointer;
}
.query-recent-item:hover, .query-recent-item.is-active { background: var(--surface-hover); }
.query-recent-icon { display: flex; flex: none; color: var(--text-faint); }
.query-recent-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.query-recent-remove {
  display: grid; flex: none; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  color: var(--text-muted); opacity: 0;
}
.query-recent-item:hover .query-recent-remove, .query-recent-item.is-active .query-recent-remove { opacity: 1; }
.query-recent-remove:hover { background: var(--surface-sunken); color: var(--text); }
@media (hover: none) { .query-recent-remove { opacity: 1; } }
@media (forced-colors: active) { .query-recent-item.is-active { outline: 2px solid Highlight; outline-offset: -2px; } }
.query-search-row .btn-primary { flex: none; min-height: 44px; padding: 8px 20px; }
.query-options { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: 52px; align-items: center; gap: 0 12px; min-height: 52px; }
.query-archive { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--text-muted); font-size: 14px; cursor: pointer; }
.query-archive input { width: 18px; height: 18px; margin: 0; accent-color: var(--primary); }
.query-advanced-toggle { grid-column: 3; grid-row: 1; justify-self: end; min-height: 44px; margin: 0 -6px 0 0; font-size: 14px; font-weight: 500; white-space: nowrap; }
/* While Advanced Search is closed, its choices show as removable chips just before it. */
.query-filters { grid-column: 2; grid-row: 1; display: flex; min-width: 0; height: 52px; align-items: center; gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 2px; scrollbar-width: thin; }
.query-filter { display: inline-flex; flex: 0 1 auto; align-items: center; gap: 2px; min-width: 54px; max-width: 100%; min-height: 30px; padding: 2px 4px 2px 12px; border: 1px solid transparent; font-size: 13px; cursor: pointer; }
.query-filter:first-child { flex-shrink: 0; }
.query-filter-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.query-filter:hover { border-color: var(--border-strong); }
.query-filter:focus-visible { outline-offset: -2px; }
.query-filter-x { display: inline-grid; flex: none; place-items: center; width: 20px; height: 20px; font-size: 16px; line-height: 1; color: var(--text-muted); }
.query-filter:hover .query-filter-x { color: var(--text); }
/* Open: one labelled row of pills per filter; Task status appears only for Tasks. */
.query-advanced { display: grid; gap: 12px; padding: 14px 0 16px; border-top: 1px solid var(--border); }
.query-filter-row { display: grid; grid-template-columns: 100px 1fr; align-items: center; gap: 6px 12px; animation: fade-in 0.18s ease; }
/* v0.20: Due's Between… shows two optional dates under its pills. */
.query-dates { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.query-date-pair { display: inline-flex; align-items: center; gap: 8px; }
.query-dates-word { min-width: 2.2em; font-size: 14px; color: var(--text-muted); }
.query-date { width: auto; min-height: 36px; padding: 4px 10px; font-size: 14px; }
/* Clear all: a quiet word at the end of the Item type row, in place even when there's nothing to clear. */
.query-type-row { grid-template-columns: 100px 1fr auto; }
.query-reset {
  grid-column: 3; grid-row: 1; align-self: center; min-height: 34px; margin-right: -6px; padding: 4px 6px; border: 0; border-radius: 6px;
  background: none; color: var(--text-muted); font-size: 14px; font-weight: 500; white-space: nowrap;
}
.query-reset:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.query-reset:disabled { visibility: hidden; }
.query-filter-label { font-size: 14px; color: var(--text-muted); }
.query-pills { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
/* Rows whose choices come from your data (notebooks; v0.19 categories and sub-categories):
   long names shorten, a long list scrolls inside the row. */
.query-long-row { align-items: start; }
.query-long-row .query-filter-label { padding-top: 7px; }
.query-long-row .query-pills { max-height: 9rem; overflow-y: auto; padding: 3px; margin: -3px; scrollbar-gutter: stable; } /* room for focus rings, still lined up with the rows above */
.query-long-row .query-pill { max-width: 100%; }
.query-long-row .query-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.query-pill {
  position: relative; display: inline-flex; align-items: center; min-height: 34px; padding: 5px 14px;
  border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--text-muted);
  font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.query-pill:hover { border-color: var(--text-faint); color: var(--text); }
.query-pill input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.query-pill:has(input:checked) { background: var(--primary-soft); border-color: var(--primary); color: var(--text); }
html[data-theme="dark"] .query-pill:has(input:checked) { border-color: var(--focus); }
.query-pill:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.query-pill:has(input:disabled) { opacity: 0.6; cursor: default; }
@media (forced-colors: active) { .query-pill:has(input:checked) { outline: 2px solid Highlight; outline-offset: -2px; } }

/* Results: one ruled sheet. A mark says what each item is (a task's ring in its priority color,
   ticked when done; a note's page or a notebook in its notebook's color); then the title, the
   words that matched (picked out like a highlighter), and a quiet line of context. */
.query-summary { margin: 26px 8px 10px; color: var(--text-muted); overflow-wrap: anywhere; }
.query-summary:empty { display: none; }
.query-hint { margin-top: 24px; }
.query-results { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-large); box-shadow: var(--shadow); overflow: hidden; }
.query-item + .query-item { border-top: 1px solid var(--border); }
.query-result {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 14px; width: 100%; padding: 14px 20px 14px 18px;
  border: 0; background: none; color: var(--text); text-align: left; overflow-wrap: anywhere; transition: background-color 0.15s ease;
}
.query-result:hover { background: var(--surface-hover); }
.query-result:focus-visible { outline-offset: -3px; }
.query-mark { display: flex; padding-top: 2px; color: var(--prio-medium); }
.query-tasks.prio-high .query-mark { color: var(--prio-high); }
.query-tasks.prio-low .query-mark { color: var(--prio-low); }
.query-tasks.is-done .query-mark { color: var(--done); }
.query-tasks.is-archived .query-mark { color: var(--archived); }
.query-notes .query-mark, .query-notebooks .query-mark { color: color-mix(in srgb, var(--tile) 60%, var(--text)); }
html[data-theme="dark"] .query-notes .query-mark, html[data-theme="dark"] .query-notebooks .query-mark { color: color-mix(in srgb, var(--tile) 80%, var(--text)); }
.query-result-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.query-result-title { font-size: 16px; font-weight: 600; line-height: 1.4; }
.query-result.is-done .query-result-title { text-decoration: line-through; text-decoration-color: var(--text-faint); }
.query-result.is-archived .query-result-title { color: var(--text-muted); }
.query-result-excerpt {
  font-size: 15px; line-height: 1.5; color: var(--text-muted);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.query-field-name { color: var(--text-faint); }
.query-result-meta { margin-top: 1px; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.query-sep { color: var(--text-faint); }
.query-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--tile); vertical-align: 0.05em; }
.query-hit { padding: 0 1px; margin: 0 -1px; border-radius: 3px; background: color-mix(in srgb, var(--c-ochre) 38%, transparent); color: var(--text); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
html[data-theme="dark"] .query-hit { background: color-mix(in srgb, var(--c-ochre) 34%, transparent); }
/* High contrast replaces the tint, so a picked-out word is underlined there instead. */
@media (forced-colors: active) { html[data-theme] .query-hit { forced-color-adjust: none; background: Canvas; color: CanvasText; text-decoration: underline 2px; text-underline-offset: 3px; } .query-dot { forced-color-adjust: none; } }
.query-more { margin-top: 16px; }
.query-return { margin: 0 0 12px; }
.note-preview-title { margin: 2px 0; font: 500 30px/1.25 var(--font-display); color: var(--title); overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .query-form { padding: 12px 14px 2px; }
  .query-search-row .btn-primary { padding: 8px 14px; }
  .query-options { display: flex; flex-wrap: wrap; gap: 0 12px; }
  .query-archive { flex: 0 1 auto; min-width: 0; min-height: 52px; }
  .query-archive input { flex: none; }
  .query-advanced-toggle { order: 2; flex: 0 1 auto; min-height: 52px; margin-left: auto; white-space: normal; }
  .query-filters { order: 3; flex: 1 1 100%; }
  .query-filter-row { grid-template-columns: 1fr; }
  .query-long-row .query-filter-label { padding-top: 0; } /* the label sits above its pills here */
  .query-dates { grid-column: 1; }
  .query-dates-word { min-width: 2.6em; } /* stacked pairs line up */
  .query-type-row { grid-template-columns: 1fr auto; }
  .query-type-row .query-filter-label { grid-column: 1; grid-row: 1; }
  .query-type-row .query-pills { grid-column: 1 / -1; grid-row: 2; }
  .query-reset { grid-column: 2; }
  .query-saved-name { font-size: 19px; }
  .query-result { padding: 12px 14px; column-gap: 12px; }
}

/* ---------- small screens ---------- */
/* ---------- notes (v0.9) ---------- */
.tint-sage { --tile: var(--c-sage); } .tint-moss { --tile: var(--c-moss); } .tint-clay { --tile: var(--c-clay); } .tint-ochre { --tile: var(--c-ochre); }
.tint-mist { --tile: var(--c-mist); } .tint-blush { --tile: var(--c-blush); } .tint-bark { --tile: var(--c-bark); } .tint-stone { --tile: var(--c-stone); }
.tint-terracotta { --tile: var(--c-terracotta); } .tint-sand { --tile: var(--c-sand); } .tint-olive { --tile: var(--c-olive); } .tint-forest { --tile: var(--c-forest); }
.tint-juniper { --tile: var(--c-juniper); } .tint-slate { --tile: var(--c-slate); } .tint-heather { --tile: var(--c-heather); } .tint-plum { --tile: var(--c-plum); }
.tint-lake { --tile: var(--c-lake); } .tint-walnut { --tile: var(--c-walnut); } .tint-pebble { --tile: var(--c-pebble); } .tint-charcoal { --tile: var(--c-charcoal); }
.screen-title { margin: 22px 8px 12px; font: 500 28px/1.2 var(--font-display); color: var(--title); overflow-wrap: anywhere; }
.screen-bar { margin: 14px 0 12px; }
.back-btn { gap: 4px; padding-left: 6px; color: var(--text-muted); }
.back-btn:hover { color: var(--text); }
.back-label { max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.notebook-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 14px; }
.notebook-tile {
  position: relative; aspect-ratio: 1 / 1; min-height: 150px; border-radius: var(--radius-large);
  border: 1px solid color-mix(in srgb, var(--tile) 45%, var(--border)); box-shadow: var(--shadow);
  background: color-mix(in srgb, var(--tile) 30%, var(--surface)); transition: background-color 0.15s ease, transform 0.15s ease;
}
.notebook-tile:hover { background: color-mix(in srgb, var(--tile) 40%, var(--surface)); }
html[data-theme="dark"] .notebook-tile { background: color-mix(in srgb, var(--tile) 16%, var(--surface)); }
html[data-theme="dark"] .notebook-tile:hover { background: color-mix(in srgb, var(--tile) 24%, var(--surface)); }
.tile-open {
  display: flex; flex-direction: column; align-items: flex-start; width: 100%; height: 100%;
  padding: 18px 18px 16px; border: 0; border-radius: inherit; background: none; color: var(--text); text-align: left;
}
.tile-icon { margin-bottom: auto; color: color-mix(in srgb, var(--tile) 55%, var(--text)); }
html[data-theme="dark"] .tile-icon { color: color-mix(in srgb, var(--tile) 75%, var(--text)); }
.tile-title {
  max-width: 100%; font: 500 22px/1.2 var(--font-display); color: var(--title); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* v0.31: a tile's small text is half way from muted to full text, so it stays readable (4.5:1 or
   better) on all twenty notebook colors, hovered, in every palette; muted grey alone fell to
   3:1 on Charcoal. */
.tile-meta { margin-top: 6px; font-size: 14px; color: color-mix(in srgb, var(--text-muted) 50%, var(--text)); }
.tile-menu { position: absolute; top: 8px; right: 8px; display: flex; align-items: center; gap: 0; }
.tile-more { opacity: 0; transition: opacity 0.15s ease; }
.notebook-tile:hover .tile-more, .notebook-tile:focus-within .tile-more, .tile-more[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { .tile-more { opacity: 0.85; } }
/* v0.12: a grip beside ⋯ for rearranging notebooks (on hover or focus; always on touch screens). */
/* v0.19: the grip is its own positioning box (relative, no offsets), so its larger invisible
   target stays around the six dots. Static, that target spread over the whole tile menu and
   covered ⋯ once ⋯ had faded in fully (Zack couldn't click ⋯ with a mouse). The target grows
   up, down and left, never right onto ⋯. */
.tile-grip { position: relative; left: auto; top: auto; width: 26px; height: 36px; }
.tile-grip::after { inset: -4px 0 -4px -4px; }
.tile-more { position: relative; }
.notebook-tile:hover .tile-grip, .notebook-tile:focus-within .tile-grip { opacity: 1; }
/* In the tile grid, where a notebook will land shows as a moss line at a tile's side. */
.notebook-grid .drop-before::before, .notebook-grid .drop-after::after { top: 12px; bottom: 12px; left: auto; right: auto; width: 3px; height: auto; }
.notebook-grid .drop-before::before { left: -9px; }
.notebook-grid .drop-after::after { right: -9px; }
.notebook-tile.is-dragging { opacity: 0.94; }

/* v0.20–v0.21 (Claude, from Zack's notes): a notebook's ⋯ panel, in the menus' own style (as the
   v0.19 menu was): everything hangs from the menus' text column. The name field (no label, in the
   serif as on the tile), then COLOR (naming the color under the pointer or focus) over twenty
   round swatches in the tile's own wash and edge (v0.22; v0.21 tried mini tiles), then Save and
   Archive as quiet menu rows. It opens beside the tile so the preview stays in view. Swatch
   targets 36 px with a mouse, 44 px on touch screens. */
.nb-options { width: 244px; }
.nb-options:focus { outline: none; }
/* While its panel is open, the tile shows exactly its saved look (no hover tint over the preview). */
.notebook-tile:has(.nb-options):hover { background: color-mix(in srgb, var(--tile) 30%, var(--surface)); }
html[data-theme="dark"] .notebook-tile:has(.nb-options):hover { background: color-mix(in srgb, var(--tile) 16%, var(--surface)); }
.panel-name { padding: 4px 4px 2px 26px; } /* the field's text starts on the menus' text column */
.panel-field { min-height: 36px; padding: 5px 9px; font: 500 18px/1.25 var(--font-display); color: var(--title); }
.panel-name .field-error { margin: 6px 0 0; }
.swatch-section { padding: 0 10px 6px 36px; }
.swatch-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 8px 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.swatch-name { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.swatches { display: grid; grid-template-columns: repeat(4, 36px); gap: 4px; }
.swatch { position: relative; display: grid; place-items: center; height: 36px; border-radius: 9px; cursor: pointer; }
.swatch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
/* The tile's wash inside (30% light, 16% dark) and its edge as the outline, as on .notebook-tile. */
.swatch-dot {
  width: 26px; height: 26px; border-radius: 50%; pointer-events: none; box-sizing: border-box;
  background: color-mix(in srgb, var(--tile) 30%, var(--surface)); border: 1.5px solid color-mix(in srgb, var(--tile) 45%, var(--border));
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
html[data-theme="dark"] .swatch-dot { background: color-mix(in srgb, var(--tile) 16%, var(--surface)); }
.swatch:hover .swatch-dot { transform: scale(1.1); }
.swatch:has(input:checked) .swatch-dot { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--text); }
.swatch:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: -1px; }
.panel-save:disabled { color: var(--text-faint); cursor: default; }
.panel-save:disabled:hover { background: none; }
@media (hover: none) { .swatches { grid-template-columns: repeat(4, 44px); gap: 0; } .swatch { height: 44px; } .swatch-dot { width: 30px; height: 30px; } .swatch-section { padding-left: 26px; } }
@media (forced-colors: active) { .swatch-dot { forced-color-adjust: none; } .swatch:has(input:checked) { outline: 3px solid Highlight; outline-offset: -2px; } }

/* v0.21 (Zack): archived notebooks keep their cards. Restore and Delete permanently sit in the
   corner where the grip and ⋯ are (shown on hover or focus; always on touch screens). */
.tile-action { opacity: 0; transition: opacity 0.15s ease; }
.notebook-tile:hover .tile-action, .notebook-tile:focus-within .tile-action { opacity: 1; }
@media (hover: none) { .tile-action { opacity: 0.85; } }
.tile-meta { display: flex; flex-direction: column; }
.tile-when { font-size: 13px; color: color-mix(in srgb, var(--text-faint) 50%, var(--text)); }
/* An archived notebook's page (read only): Back at the left, its state and Restore at the right. */
.screen-bar-split { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.screen-bar-end { display: flex; align-items: center; gap: 10px; }
.screen-status { margin: 0; font-size: 14px; color: var(--text-muted); }
.archived-row { grid-template-columns: 1fr auto; padding-left: 16px; }
.notes:has(.order-bar) { padding-bottom: 72px; }
.row-detail { margin: 2px 0 0; font-size: 15px; color: var(--text-muted); overflow-wrap: anywhere; }
.row-when { margin: 4px 0 0; font-size: 13px; color: var(--text-faint); }
.row-detail.is-empty, .card-title.is-untitled { color: var(--text-faint); font-style: italic; }

/* A notebook's page (v0.15). The sheet is bound on the left in the notebook's color; a margin rule
   in that color runs the page's height; the name is written at the top; notes sit on ruled lines,
   their grips in the margin. Lines are tinted toward the notebook's color, never louder than a
   hairline. The page itself never moves: only a lifted line does while it's dragged. */
.notebook-page {
  --margin: 46px; --rule: color-mix(in srgb, var(--tile) 32%, var(--border));
  position: relative; margin-top: 14px; padding-bottom: 22px; background: var(--surface);
  border: 1px solid var(--border); border-left: 12px solid color-mix(in srgb, var(--tile) 85%, var(--surface));
  border-radius: var(--radius-large); box-shadow: var(--shadow);
}
html[data-theme="dark"] .notebook-page { --rule: color-mix(in srgb, var(--tile) 26%, var(--border)); border-left-color: color-mix(in srgb, var(--tile) 62%, var(--surface)); }
.notebook-page::before {
  content: ''; position: absolute; z-index: 1; top: 0; bottom: 0; left: var(--margin); width: 1.5px; pointer-events: none;
  background: color-mix(in srgb, var(--tile) 80%, var(--text) 8%);
}
.page-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; padding: 22px 22px 14px calc(var(--margin) + 18px); }
.notebook-heading { margin: 0; min-width: 0; font: 500 30px/1.2 var(--font-display); color: var(--title); overflow-wrap: anywhere; }
.notebook-heading:focus-visible { outline-offset: 4px; }
.page-count { margin: 0; font-size: 14px; color: var(--text-muted); white-space: nowrap; }
.page-empty { margin: 0; padding: 14px 22px 14px calc(var(--margin) + 18px); border-top: 1px solid var(--rule); color: var(--text-muted); font-style: italic; }
.note-list { list-style: none; margin: 0; padding: 0; }
.note-row {
  position: relative; display: grid; grid-template-columns: var(--margin) minmax(0, 1fr) auto; align-items: center; column-gap: 18px;
  padding: 11px 12px 11px 0; border-top: 1px solid var(--rule); cursor: pointer; transition: background-color 0.15s ease;
}
.note-list .note-row:last-child { border-bottom: 1px solid var(--rule); }
.note-row:hover { background: color-mix(in srgb, var(--tile) 9%, var(--surface)); }
html[data-theme="dark"] .note-row:hover { background: color-mix(in srgb, var(--tile) 8%, var(--surface)); }
.note-row .drag-handle { left: calc(var(--margin) / 2 - 8px); top: 50%; transform: translateY(-50%); }
.note-row:hover .drag-handle, .note-row:focus-within .drag-handle { opacity: 1; }
.note-row.is-dragging, .note-row.is-dragging:hover { background: var(--surface); border-radius: 4px; }
.note-list .drop-before::before { top: -2px; left: var(--margin); }
.note-list .drop-after::after { bottom: -2px; left: var(--margin); }
.note-line {
  grid-column: 2; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'title when' 'detail detail';
  align-items: baseline; column-gap: 16px; row-gap: 1px;
}
.note-line .note-open { grid-area: title; min-width: 0; justify-self: start; }
.note-line .card-title { font: 500 20px/1.3 var(--font-display); color: var(--title); }
.note-line .card-title.is-untitled { color: var(--text-faint); }
.note-line .row-when { grid-area: when; margin: 0; white-space: nowrap; }
.note-line .row-detail { grid-area: detail; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.note-row .card-actions { grid-column: 3; margin: 0; }
.note-row:hover .card-actions, .note-row:focus-within .card-actions { opacity: 1; }
@media (forced-colors: active) { .notebook-page, .note-sheet.is-bound, .note-sheet.is-bound:focus-within { border-left-width: 4px; } }
.row-actions { display: flex; gap: 2px; }
.archived-row .card-title { color: var(--text-muted); }

.note-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.note-status { margin: 0; font-size: 14px; color: var(--text-muted); text-align: right; }
.note-status[data-tone="problem"] { color: var(--overdue-text); }
/* v0.22: a note open in another tab is read only here, with Edit here at the bar's right (as
   Restore sits on an archived notebook's page). On a phone the status and button wrap below. */
.note-preview.is-away .note-bar { flex-wrap: wrap; row-gap: 8px; }
.note-preview.is-away .screen-bar-end { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.note-preview-title.is-untitled { color: var(--text-faint); font-style: italic; }
.note-sheet {
  margin-top: 8px; padding: 22px 28px 28px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-large); box-shadow: var(--shadow); transition: border-color 0.15s ease;
}
.note-sheet:focus-within { border-color: var(--border-strong); }
/* v0.15: an open note is a page of its notebook, bound on the left in the notebook's color. */
.note-sheet.is-bound, .note-sheet.is-bound:focus-within { border-left: 12px solid color-mix(in srgb, var(--tile, var(--border)) 85%, var(--surface)); }
html[data-theme="dark"] .note-sheet.is-bound, html[data-theme="dark"] .note-sheet.is-bound:focus-within { border-left-color: color-mix(in srgb, var(--tile, var(--border)) 62%, var(--surface)); }
.note-title-input { display: block; width: 100%; padding: 2px 0; border: 0; background: none; font: 500 30px/1.25 var(--font-display); color: var(--title); }
.note-body { display: block; width: 100%; min-height: 240px; margin-top: 16px; padding: 0; border: 0; background: none; font-size: 1.0625rem; line-height: 1.6; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.note-title-input::placeholder { color: var(--text-faint); opacity: 1; }
.note-body[data-empty="true"]::before { content: attr(data-placeholder); color: var(--text-faint); position: absolute; pointer-events: none; }
.note-body p, .note-body div { margin: 0; min-height: 1.6em; }
.note-body ul, .note-body ol { margin: 0; padding-left: 1.65em; }
.note-body li { margin: 0; min-height: 1.6em; }
.note-body a { color: var(--focus); text-decoration: underline; cursor: pointer; }
/* Nominal document sizes 10:12:14:16, anchored to Normal's accessible 1.0625rem.
   Absolute rem ratios (not nested em) prevent pasted/nested font tags multiplying sizes. */
.note-body font[size="1"] { font-size: 0.8854167rem; }
.note-body font[size="3"] { font-size: 1.0625rem; }
.note-body font[size="4"] { font-size: 1.2395833rem; }
.note-body font[size="5"] { font-size: 1.4166667rem; }
/* Formatting toolbar (v0.11): one quiet row of icon buttons in groups, divided by hairlines.
   It spans the sheet and stays at the top of the screen while a long note scrolls (a soft
   shadow shows then). The ▾ in the title row shows or hides it (▴ while shown). */
.note-sheet { position: relative; --sheet-pad: 28px; }
.note-head { display: flex; align-items: flex-start; gap: 12px; }
.note-head .note-title-input { flex: 1; min-width: 0; }
/* The ▾ that shows or hides the toolbar: the same triangle as "Docket: Tasks ▾" and an open task,
   turned to ▴ while the toolbar shows (Zack, 2026-10-02). */
.format-toggle {
  flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; margin-top: 3px;
  border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--text-muted); cursor: pointer;
}
.format-toggle-caret { display: inline-block; font-size: 17px; line-height: 1; transition: transform 0.2s ease; }
.format-toggle[aria-expanded="true"] .format-toggle-caret { transform: rotate(180deg); }
.format-toggle:hover { background: var(--surface-hover); color: var(--text); }
@media (prefers-reduced-motion: reduce) { .format-toggle-caret { transition: none; } }
.format-sentinel { height: 0; }
.note-formatting {
  position: sticky; top: 0; z-index: 3; margin: 10px calc(-1 * var(--sheet-pad)) 0; padding: 6px var(--sheet-pad);
  background: var(--surface); border-bottom: 1px solid var(--border); transition: box-shadow 0.15s ease;
}
.note-formatting.is-stuck { box-shadow: 0 6px 14px -10px rgba(40, 36, 26, 0.35); }
html[data-theme="dark"] .note-formatting.is-stuck { box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.6); }
.note-format-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; -webkit-user-select: none; user-select: none; }
.format-toggle, .link-card-btn { -webkit-user-select: none; user-select: none; }
.format-group { display: flex; align-items: center; gap: 2px; }
.format-sep { width: 1px; height: 20px; margin: 0 4px; background: var(--border); }
.format-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 34px; height: 34px; padding: 0 7px;
  border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text-muted); font-size: 0.875rem; cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.format-btn:hover { background: var(--surface-hover); color: var(--text); }
.format-btn:focus-visible, .format-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.format-btn[aria-pressed="true"] { background: var(--primary-soft); color: var(--focus); }
.format-btn[aria-pressed="mixed"] { color: var(--text); border: 1px dashed var(--text-faint); }
.format-size { min-width: 0; padding: 0 6px 0 10px; color: var(--text); }
.format-size .icon { color: var(--text-muted); }
.format-size-label { min-width: 4.6em; text-align: left; }
.format-glyph { font-size: 1rem; line-height: 1; }
.format-b { font-weight: 750; }
.format-i { font: italic 500 1.2rem/1 var(--font-display); }
.format-u { text-decoration: underline; text-underline-offset: 2px; }
.format-s { text-decoration: line-through; }
.size-sample { color: var(--text); white-space: nowrap; }
.size-small { font-size: 0.8854167rem; }
.size-normal { font-size: 1.0625rem; }
.size-large { font-size: 1.2395833rem; }
.size-xl { font-size: 1.4166667rem; }
.menu-hint { margin-left: auto; padding-left: 18px; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* The link card: the address (opens it), then Edit and Remove. */
.link-card {
  position: absolute; z-index: 4; display: flex; align-items: center; gap: 2px; max-width: min(420px, calc(100% - 16px));
  padding: 4px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: var(--shadow-raised);
}
.link-card[hidden] { display: none; }
.link-card-url {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 6px 8px; border-radius: 7px;
  color: var(--focus); font-size: 0.875rem; text-decoration: none;
}
.link-card-url:hover { background: var(--surface-hover); text-decoration: underline; }
.link-card-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-card-url .icon { flex: none; }
.link-card-sep { flex: none; width: 1px; height: 18px; margin: 0 2px; background: var(--border); }
.link-card-btn { flex: none; padding: 6px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--text); font-size: 0.875rem; cursor: pointer; }
.link-card-btn:hover { background: var(--surface-hover); }
.link-card-url:focus-visible, .link-card-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.note-editor.is-gone .note-body { color: var(--text-muted); }
.link-form .field { margin-bottom: 12px; }
@media (pointer: coarse) {
  .format-btn, .format-toggle { min-width: 44px; height: 44px; }
  .format-toggle { width: 44px; }
  .link-card-url, .link-card-btn { min-height: 40px; }
}
@media (forced-colors: active) {
  .format-btn[aria-pressed="true"] { outline: 2px solid Highlight; }
  .format-btn[aria-pressed="mixed"] { outline: 2px dashed Highlight; }
  .format-sep, .link-card-sep { background: CanvasText; }
}
/* A text field's caret marks where focus is; the sheet's border darkens too. */
.note-title-input:focus-visible, .note-body:focus-visible { outline: none; }
@media (forced-colors: active) { .note-sheet:focus-within { outline: 2px solid Highlight; } }

@media (max-width: 640px) {
  .app { padding: 10px 14px 120px; }
  .tagline { margin-bottom: 18px; }
  .card { padding: 12px 8px 12px 22px; column-gap: 10px; }
  .card-pending { height: calc(var(--card-estimate) + 2 * 12px + 2 * 1px); } /* (v0.28: the padding above; was 2 px too tall here) */
  .form-row.form-row-reminder { grid-template-columns: 1fr; } /* (Custom's place still kept while hidden) */
  body:has(.order-bar) .reminders { bottom: 188px; }
  .card-editor { grid-column: 1 / -1; }
  .form-row, .form-row-quick, .repeat-grid { grid-template-columns: 1fr; }
  .subtask-row { flex-wrap: wrap; }
  .input-subdate { order: 5; margin-left: 50px; }
  .segmented:not(.segmented-plain) { display: flex; }
  .segmented:not(.segmented-plain) .segment { flex: 1; justify-content: center; }
  .dialog { padding: 16px; }
  .toolbar { padding: 10px; }
  .notebook-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tile-open { padding: 14px 14px 12px; }
  .tile-title { font-size: 20px; }
  .note-sheet { padding: 16px 16px 20px; --sheet-pad: 16px; }
  .note-sheet.is-bound, .note-sheet.is-bound:focus-within { border-left-width: 9px; }
  /* The toolbar wraps on phones: groups keep apart by space, without dividing lines. */
  .format-sep { display: none; }
  .note-format-controls { column-gap: 14px; }
  .note-title-input { font-size: 26px; }
  .archived-row { padding-left: 14px; }
  .notebook-page { --margin: 34px; border-left-width: 9px; }
  .page-head { padding: 16px 14px 10px calc(var(--margin) + 12px); }
  .notebook-heading { font-size: 26px; }
  .page-empty { padding-left: calc(var(--margin) + 12px); }
  .note-row { column-gap: 12px; padding-right: 4px; }
  .note-line { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'title' 'detail' 'when'; }
  .note-line .row-when { margin-top: 2px; }
  .order-bar { left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; flex-wrap: wrap; justify-content: flex-end; padding: 10px 10px 10px 14px; }
  .order-bar-text { flex: 1 1 100%; }
  body:has(.order-bar) .toasts { bottom: 120px; }
}