/* ─ Midnight Violet palette ─ */
:root {
  --bg: #0a0510;          /* near-black with violet tint */
  --bg-card: #1a0f2b;     /* deep purple card */
  --bg-input: #1f1233;    /* form inputs / search bar */
  --border: #2a1a42;
  --fg: #ede9fe;          /* lavender-white text */
  --fg-muted: #b8a5e0;
  --accent: #a855f7;      /* violet-500 — primary actions */
  --accent-hover: #c084fc;
  --overdue: #f43f5e;     /* rose — past-due warning */
  --today: #c4b5fd;       /* violet-300 — due today */
  --upcoming: #8b5cf6;    /* violet-500 — future */
  --success: #86efac;     /* saved/ok states */

  --font-body: "Space Grotesk", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-feature-settings: "ss01", "ss02";
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

/* Header */
header {
  background: linear-gradient(180deg, #160a24 0%, #0a0510 100%);
  border-bottom: 1px solid var(--border);
  padding: 1rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header a, header strong {
  color: var(--fg);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.02em;
}
header button {
  background: transparent;
  color: var(--fg-muted);
  border: 1px solid var(--border);
  padding: 0.35rem 0.85rem;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  transition: border-color 0.15s, color 0.15s;
}
header button:hover {
  border-color: var(--accent);
  color: var(--fg);
}

main {
  padding: 1.25rem;
  max-width: 720px;
  margin: 0 auto;
}

/* Search bar */
.search input {
  width: 100%;
  padding: 0.6rem 0.85rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--fg);
  font-family: inherit;
  font-size: 0.95rem;
}
.search input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2);
}

/* New task CTA */
.new-task-btn {
  display: inline-block;
  margin: 1rem 0 1.5rem;
  padding: 0.55rem 1.1rem;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s;
}
.new-task-btn:hover { background: var(--accent-hover); }

/* Sections */
.section { margin-bottom: 1.75rem; }
.section:not(:has(.task-card)) { display: none; }
.section h2 {
  margin: 0.5rem 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-muted);
}
.section.overdue h2 { color: var(--overdue); }
.section.today h2 { color: var(--today); }
.section.upcoming h2 { color: var(--upcoming); }

/* Task cards */
.task-card {
  position: relative;        /* anchor for ::before stripe */
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: var(--bg-card);
  padding: 0.85rem 1rem 0.85rem 1.15rem;  /* extra left padding for stripe */
  margin-bottom: 0.55rem;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: border-color 0.15s, transform 0.1s;
  overflow: hidden;          /* clip the stripe to the rounded corner */
}
/* List-color stripe — driven by inline --list-color CSS var on each card. */
.task-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--list-color, var(--accent));
}
.task-card:hover {
  border-color: var(--border);
  transform: translateY(-1px);
}
.task-checkbox {
  background: transparent;
  border: 1.5px solid var(--fg-muted);
  border-radius: 4px;
  width: 1.4rem;
  height: 1.4rem;
  cursor: pointer;
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex-shrink: 0;
  margin-top: 0.1rem;
  font-size: 0.8rem;
  transition: border-color 0.15s, background 0.15s;
}
.task-checkbox:hover {
  border-color: var(--accent);
  background: rgba(168, 85, 247, 0.1);
}
.task-body {
  flex: 1;
  display: block;
  color: var(--fg);
  text-decoration: none;
}
.task-title {
  display: block;
  font-weight: 500;
  line-height: 1.35;
}
.task-subtitle {
  display: block;
  font-size: 0.85rem;
  color: var(--fg-muted);
  margin-top: 0.15rem;
  line-height: 1.3;
}
.task-due {
  display: inline-block;
  font-size: 0.8rem;
  color: var(--fg-muted);
  margin-top: 0.3rem;
  letter-spacing: 0.01em;
}
.section.overdue .task-due { color: var(--overdue); font-weight: 500; }
.section.today .task-due { color: var(--today); }
/* Fallback for views that don't bucket cards into sections (Search). The */
/* server-side {% due_state task %} tag emits data-due-state on the card; */
/* this matches the same overdue/today treatment the section selectors    */
/* give on the Today page. Spec §2 (2026-05-13) — web↔Android parity.     */
.task-card[data-due-state="overdue"] .task-due { color: var(--overdue); font-weight: 500; }
.task-card[data-due-state="today"] .task-due { color: var(--today); }

/* Snooze button — sits at the right edge of the card. Form wrapper exists */
/* only to carry the CSRF token; it shouldn't add layout. */
.task-snooze-form {
  display: inline-flex;
  margin: 0;
  padding: 0;
  align-self: center;
  flex-shrink: 0;
}
.task-snooze {
  /* Both <button> (unsnooze form) and <a> (snooze GET → picker) wear this */
  /* class — keep style identical so a11y/affordance stays consistent. The */
  /* anchor needs explicit text-decoration:none + flex centering since */
  /* browsers underline links and don't auto-center their content. */
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  color: var(--fg-muted);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.35rem 0.5rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.task-snooze:hover {
  border-color: var(--border);
  color: var(--fg);
  background: rgba(168, 85, 247, 0.08);
}
/* Snoozed card — slightly dimmed so the user reads it as "hibernating". */
/* Title stays full-strength; the rest fades. The wake-up time appears as */
/* an inline pill below the due date. */
.task-card-snoozed {
  opacity: 0.72;
}
.task-card-snoozed .task-title {
  color: var(--fg-muted);
}
.task-snooze-until {
  display: inline-block;
  margin-top: 0.3rem;
  margin-left: 0.5rem;
  font-size: 0.75rem;
  color: var(--fg-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
}
.task-unsnooze {
  font-size: 1.05rem;
}
.recurrence-icon {
  display: inline-block;
  margin-left: 0.4rem;
  color: var(--accent);
  opacity: 0.75;
}
.checklist-badge {
  display: inline-block;
  margin-top: 0.3rem;
  margin-left: 0.5rem;
  font-size: 0.75rem;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  opacity: 0.85;
}

/* Inline subtasks toggle — replaces the static .checklist-badge with an
   interactive button. Tap toggles .checklist-expanded on the parent
   .task-card; CSS below shows/hides the panel accordingly. */
.checklist-badge-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.3rem;
  margin-left: 0.5rem;
  background: transparent;
  font-size: 0.75rem;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  cursor: pointer;
  font-family: inherit;
  opacity: 0.85;
}
.checklist-badge-toggle:hover { opacity: 1; }
.checklist-badge-toggle .chevron {
  display: inline-block;
  transition: transform 200ms ease;
}
.checklist-badge-toggle[aria-expanded="true"] .chevron {
  transform: rotate(90deg);
}

.checklist-panel {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0.4rem 0 0 0;
  border-top: 1px solid var(--border);
  display: none;
}
.task-card.checklist-expanded .checklist-panel {
  display: block;
}
.checklist-panel li {
  padding: 0.15rem 0;
  font-size: 0.9rem;
}
.checklist-panel label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.checklist-panel .checklist-text.done {
  text-decoration: line-through;
  opacity: 0.6;
}

/* Auto-complete toast (2-action: Desfazer / Concluir). */
.toast.toast-auto-complete {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 20, 30, 0.96);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  font-size: 0.9rem;
}
.toast.toast-auto-complete .toast-action {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 0.25rem 0.75rem;
  border-radius: 0.25rem;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
}
.toast.toast-auto-complete .toast-action:hover {
  background: var(--accent);
  color: var(--bg);
}

/* Server-side flash messages (e.g. post-list-delete toast). Reuses the
   bottom-center toast pattern; auto-dismissed by inline JS in base.html. */
.message-stack {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 1000;
}
.toast.toast-flash {
  background: rgba(20, 20, 30, 0.96);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  font-size: 0.9rem;
  max-width: min(90vw, 32rem);
}
.toast.toast-flash.toast-success {
  border-color: var(--accent);
}
.toast.toast-flash.toast-error {
  border-color: #ef4444;
}
.toast.toast-flash.fade-out {
  opacity: 0;
  transition: opacity 0.4s ease-out;
}
.empty-state {
  color: var(--fg-muted);
  text-align: center;
  margin-top: 3rem;
  font-size: 0.95rem;
}

/* Search-result snippet block: rendered under a task card when the match
   came from one or more checklist items. The card itself stays untouched
   (it is also used by Today/Upcoming where snippets don't apply). */
.search-snippets {
  list-style: none;
  margin: -0.4rem 0 0.9rem 2.4rem; /* tuck under the card, indent past the checkbox */
  padding: 0;
  font-size: 0.85rem;
  color: var(--fg-muted);
  font-style: italic;
}
.search-snippets li { line-height: 1.4; }
.search-snippets strong {
  color: var(--accent);
  font-weight: 600;
  font-style: normal;
}
.search-snippets-overflow { opacity: 0.7; }

/* Modals */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.modal-content {
  background: var(--bg-card);
  color: var(--fg);
  padding: 1.75rem;
  border-radius: 12px;
  max-width: 420px;
  border: 1px solid var(--border);
}
.modal-content strong { color: var(--accent); }
.modal-content button {
  margin-left: 0.5rem;
  padding: 0.5rem 1.15rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
}
.modal-content a {
  color: var(--fg-muted);
  text-decoration: none;
}
.modal-content a:hover { color: var(--fg); }

/* Snooze duration picker — stacks the three duration buttons vertically */
/* (matches Android's SnoozeOptionsDialog) instead of the default inline */
/* "Cancel | Confirm" pair. The Cancel link sits below as a low-emphasis */
/* escape hatch. */
.snooze-picker {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1rem;
}
.snooze-picker button {
  margin-left: 0;
  width: 100%;
}
.snooze-picker a {
  text-align: center;
  margin-top: 0.35rem;
}

/* Native <dialog> styling (quit-confirm modal) */
dialog {
  background: var(--bg-card);
  color: var(--fg);
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  max-width: 400px;
}
dialog::backdrop {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}
dialog strong { color: var(--accent); }
dialog button {
  margin-left: 0.5rem;
  padding: 0.45rem 1rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}
dialog button[value="cancel"] {
  background: transparent;
  color: var(--fg-muted);
  border: 1px solid var(--border);
}

/* Forms */
form p { margin: 0.85rem 0; }
/* `<div class="form-row">` is used for form rows that nest block-level
   children (e.g., a date input plus a row of preset chip buttons) — `<p>`
   is invalid HTML5 around `<div>`. Same vertical rhythm as `<p>`. */
form .form-row { margin: 0.85rem 0; display: block; }
form label {
  display: block;
  font-size: 0.85rem;
  color: var(--fg-muted);
  margin-bottom: 0.3rem;
  letter-spacing: 0.01em;
}
form input[type="text"],
form input[type="search"],
form input[type="datetime-local"],
form input[type="number"],
form select,
form textarea {
  background: var(--bg-input);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.55rem 0.75rem;
  width: 100%;
  font-family: inherit;
  font-size: 0.95rem;
}
form input:focus,
form select:focus,
form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2);
}
form input[type="number"] { width: auto; }

/* Date-preset chip row above the datetime-local input. Outlined / subdued
   look so it complements (rather than competes with) the primary "Save"
   button below. Wraps to 2 rows on narrow viewports. */
.date-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.25rem 0 0.5rem;
}
.date-presets .preset-btn {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--border);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  transition: border-color 0.15s, background 0.15s;
}
.date-presets .preset-btn:hover {
  border-color: var(--accent);
  background: rgba(168, 85, 247, 0.08);
}

form button[type="submit"] {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 0.55rem 1.2rem;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  transition: background 0.15s;
}
form button[type="submit"]:hover { background: var(--accent-hover); }
form a {
  color: var(--fg-muted);
  margin-left: 0.6rem;
  text-decoration: none;
}
form a:hover { color: var(--fg); }

.error {
  color: var(--overdue);
  font-size: 0.85rem;
  display: block;
  margin-top: 0.2rem;
}

.optional-field { opacity: 0.6; transition: opacity 0.2s; }
.optional-field:focus-within { opacity: 1; }
.optional-field textarea {
  background: rgba(31, 18, 51, 0.6);
}
.muted {
  font-size: 0.78rem;
  color: var(--fg-muted);
  font-style: italic;
  margin-left: 0.3rem;
}

/* Selection */
::selection {
  background: rgba(168, 85, 247, 0.35);
  color: var(--fg);
}

/* ─ Login page ─────────────────────────────────────────────
   Full-bleed cosmic background asset (mirrors the Android
   pre-login screen — same WebP file, served from `tasks/img/`).
   No card chrome — content sits directly on the image with the
   4-line tagline + Google button centered vertically. The dark
   gradient overlay deepens the lower half so text stays legible
   over any cropping of the underlying image. */
.login-body {
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(13, 11, 20, 0.35) 0%, rgba(13, 11, 20, 0.7) 100%),
    url("img/hindsight_prelogin_background.webp") center / cover no-repeat,
    #0d0b14;
  display: flex;
}
.login-shell {
  margin: auto;
  padding: 3rem 1.25rem;
  width: 100%;
  max-width: 460px;
  text-align: center;
}
.login-brand {
  margin: 0 0 1.75rem 0;
  display: inline-flex;
  align-items: flex-start;
  gap: 0.4rem;
  font-size: clamp(2.5rem, 8vw, 3.75rem);
  font-weight: 300;
  letter-spacing: 0.5px;
  color: #f2f2f7;
  line-height: 1.1;
}
.login-brand-sparkle {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.25rem;
  color: #ede9fe;
  flex-shrink: 0;
}
.login-tagline {
  margin: 0 0 2.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.login-tagline p {
  margin: 0;
  font-size: 1.05rem;
}
.login-tagline-lead {
  color: #f2f2f7;
  margin-bottom: 0.85rem !important;
  font-size: 1.15rem !important;
}
.login-tagline-accent {
  color: #a78bfa;
}
.login-shell .g_id_signin {
  display: inline-block;
}

/* ─ Lists feature ─────────────────────────────────────────────
   Chips on the home view, the dedicated /lists/ CRUD page, and
   the 8-swatch color picker in the create/edit form. List-color
   is delivered via the --list-color custom property on each
   element so the same dot/stripe styles work for any palette
   value without per-color CSS classes. */

/* Filter chips on the home view */
.list-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.85rem 0 1rem;
}
.list-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--fg);
  font-size: 0.85rem;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.list-chip:hover {
  border-color: var(--accent);
}
/* Selected highlight: solid lavender-white fill with the bg color flipped to */
/* dark text. This "inverse" treatment is dramatically louder than a tinted   */
/* bg and reads as an unambiguous active state at a glance — and it doesn't  */
/* compete with the violet dot that the Default chip already carries.        */
.list-chip.selected {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--bg);
  font-weight: 600;
}
.list-chip.muted-chip {
  color: var(--fg-muted);
  border-style: dashed;
}

/* Color dot — used on chips and on the /lists/ rows */
.list-color-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--list-color, var(--accent));
  flex-shrink: 0;
}

/* /lists/ page */
.lists-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 1rem;
}
.lists-header h2 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
}
.lists-collection {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}
.list-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: var(--bg-card);
  margin-bottom: 0.5rem;
}
.list-row-name {
  flex: 1;
  font-weight: 500;
}
.badge-default {
  display: inline-block;
  padding: 0.1em 0.5em;
  margin-left: 0.5em;
  font-size: 0.7em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--accent, #8b5cf6);
  color: #fff;
  border-radius: 999px;
  vertical-align: middle;
}
.list-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
}
.list-row-actions a,
.list-row-actions .link-button {
  color: var(--fg-muted);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  padding: 0;
}
.list-row-actions a:hover,
.list-row-actions .link-button:hover {
  color: var(--fg);
}

/* Color picker — 8 swatches in a row */
.color-picker {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
}
.color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--list-color, var(--accent));
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.15s, transform 0.1s;
}
.color-swatch:hover {
  transform: scale(1.05);
}
.color-swatch.selected {
  border-color: var(--fg);
  box-shadow: 0 0 0 2px var(--bg);
}

/* ── Aggregation suggestions banner + cards ──────────────────────────── */
.suggestions-banner {
  display: block;
  padding: 0.75rem 1.25rem;
  background: rgba(168, 85, 247, 0.15);
  border-bottom: 1px solid rgba(168, 85, 247, 0.4);
  color: var(--fg);
  text-decoration: none;
  font-weight: 500;
}
.suggestions-banner:hover {
  background: rgba(168, 85, 247, 0.25);
}

.suggestion-card {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  background: rgba(255, 255, 255, 0.03);
}
.suggestion-badge {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}
.suggestion-badge-split {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
}
.suggestion-badge-merge {
  background: rgba(244, 63, 94, 0.2);
  color: #f43f5e;
}

/* ── Task checklist (from accepted aggregation suggestions) ─────────── */
.checklist-fieldset {
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: 8px;
  padding: 0.5rem 1rem 0.75rem;
  margin: 1rem 0;
}
.checklist-fieldset legend {
  padding: 0 0.5rem;
  font-size: 0.85rem;
  opacity: 0.7;
}
.checklist-items {
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0;
}
.checklist-items li {
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.checklist-items li > label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.checklist-text.done {
  text-decoration: line-through;
  opacity: 0.55;
}

/* Inline "×" beside each subtask on the edit form. Subtle by default,
   warms to a delete-red on hover so a misclick is recoverable (HTMX
   request happens on click — no confirmation, parallel to the toggle). */
.checklist-delete-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.45);
  font-size: 1.2rem;
  line-height: 1;
  padding: 0 0.4rem;
  cursor: pointer;
  border-radius: 4px;
}
.checklist-delete-btn:hover,
.checklist-delete-btn:focus-visible {
  color: #f43f5e;
  background: rgba(244, 63, 94, 0.1);
}

/* Add-subtask inline form below the list. Compact row — input takes the
   remaining width, the "+" button is square. */
.checklist-add-form {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.checklist-add-form input[type="text"] {
  flex: 1;
  padding: 0.35rem 0.5rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: 6px;
  color: inherit;
  font: inherit;
}
.checklist-add-form input[type="text"]:focus {
  outline: none;
  border-color: rgba(168, 85, 247, 0.6);
}
.checklist-add-form button[type="submit"] {
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  font-size: 1.1rem;
  line-height: 1;
  background: rgba(168, 85, 247, 0.18);
  border: 1px solid rgba(168, 85, 247, 0.4);
  border-radius: 6px;
  color: inherit;
  cursor: pointer;
}
.checklist-add-form button[type="submit"]:hover {
  background: rgba(168, 85, 247, 0.3);
}