:root {
  --bg: #FAF9F5;
  --surface: #FFFFFF;
  --border: #E8E5DD;
  --text: #2D2A26;
  --text-muted: #6E675C;
  --accent: #D97757;
  --accent-dark: #9C4A2D;
  --accent-soft: #F3E4DC;
  --danger: #C0533E;
  --overdue: #C0533E;
  --soon: #B8863A;
  --priority-low: #7FA378;
  --priority-low-soft: #E6EEE4;
  --priority-low-dark: #4E6B49;
  --priority-normal: #7C93B0;
  --priority-normal-soft: #E6EBF1;
  --priority-normal-dark: #4A5F79;
  --priority-high: var(--accent-dark);
  --priority-high-soft: var(--accent-soft);
  --priority-high-dark: var(--accent-dark);
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(45, 42, 38, 0.06), 0 4px 12px rgba(45, 42, 38, 0.05);
  --tabbar-height: 60px;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  /* Set from JS via visualViewport — how much of the layout viewport's
     bottom is currently covered by the on-screen keyboard. */
  --kb-inset: 0px;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Replacing the whole screen on every SPA navigation can land a fast tap's
     synthetic double-tap right on the new screen's top text (title, list
     badge, chips), which mobile Chrome/Safari read as "select this word" and
     pop up their native selection UI. UI chrome isn't meant to be selected
     anyway, so disable it app-wide and re-enable it below for the few spots
     that hold real user content worth copying. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
}

.hidden {
  display: none !important;
}

/* Undo the app-wide user-select: none (see html, body above) wherever text
   is actually meant to be read, selected and copied. */
input,
textarea,
.rich-editor,
[contenteditable="true"],
.detail-note-body,
.detail-notes-text,
.chat-bubble-text {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

.app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
}

.screen {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 100vh;
  min-height: 100dvh;
}

/* --- Headers ------------------------------------------------------- */

.app-header {
  padding: calc(env(safe-area-inset-top, 0) + 28px) 20px 22px;
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 10;
}

.app-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.home-header-text {
  min-width: 0;
}

.app-header h1 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}

.app-date {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--text-muted);
}

.home-stats-row {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.stat-tile {
  flex: 1;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  font-family: inherit;
}

.stat-tile-numbers {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.stat-tile-big {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
}

.stat-tile-big.stat-barometer-calm { color: var(--text); }
.stat-tile-big.stat-barometer-mild { color: var(--priority-normal-dark); }
.stat-tile-big.stat-barometer-warm { color: var(--soon); }
.stat-tile-big.stat-barometer-hot { color: var(--danger); }

.stat-tile-label {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  color: var(--text-muted);
}

.search-bar svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.search-bar input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 16px;
  font-family: inherit;
  color: var(--text);
  width: 100%;
}

.app-header.simple-header {
  padding-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.app-header.simple-header h1 {
  font-size: 24px;
}

/* --- Screen body & lists --------------------------------------------- */

.screen-body {
  flex: 1;
  padding: 8px 20px calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0) + 24px);
}

.empty-state {
  text-align: center;
  color: var(--text-muted);
  padding: 60px 20px;
  font-size: 15px;
  margin: 0;
}

.task-list {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* A parent's overdue sub-items, nested directly under its row on the Home
   "Vandaag" list — indented and visually tied to the parent above it. */
.home-nested-subtasks {
  margin: 10px 0 0 34px;
  gap: 8px;
}

.task-row {
  position: relative;
}

.swipe-bg {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  overflow: hidden;
}

/* Each action fills the whole row edge-to-edge (not just a pill sized to
   its content) so the revealed strip is always solid color, never showing
   the page background behind it, however far the card is dragged. */
.swipe-action {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 20px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  opacity: 0;
  transition: opacity 0.15s ease;
  white-space: nowrap;
}

.swipe-action svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.swipe-delete {
  background: var(--danger);
  justify-content: flex-start;
}

.swipe-complete {
  background: var(--priority-low);
  justify-content: flex-end;
}

.task-row.reveal-delete .swipe-delete {
  opacity: 1;
}

.task-row.reveal-complete .swipe-complete {
  opacity: 1;
}

.task-card {
  position: relative;
  z-index: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  box-shadow: var(--shadow);
  cursor: pointer;
  touch-action: pan-y;
  transition: transform 0.2s ease, opacity 0.15s ease;
}

.task-card.swiping {
  transition: none;
  user-select: none;
}

/* Dimming for a done task/note sits on the individual elements rather than
   the whole card, so the unread-chat chip (and its pulse) stays at full
   strength even after the task is completed. */
.task-card.done {
  background: #FAF9F6;
}

.task-card.done .task-check,
.task-card.done .task-title,
.task-card.done .task-desc,
.task-card.done .task-date-chip,
.task-card.done .task-time-chip,
.task-card.done .avatar-circle,
.task-card.done .task-meta > .chip:not(.chip-icon-unread) {
  opacity: 0.6;
}

.task-check {
  position: relative;
  flex-shrink: 0;
  min-width: 24px;
  height: 22px;
  padding: 0 5px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--surface);
  cursor: pointer;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

/* Visible box stays compact for the task-row layout; the tappable area is
   enlarged toward the ~44px touch-target guideline via an invisible
   pseudo-element instead. */
.task-check::before {
  content: '';
  position: absolute;
  inset: -11px;
}

.task-check.priority-low { background: var(--priority-low-soft); color: var(--priority-low-dark); }
.task-check.priority-normal { background: var(--priority-normal-soft); color: var(--priority-normal-dark); }
.task-check.priority-high { background: var(--priority-high-soft); color: var(--priority-high-dark); }

.task-check.checked {
  color: #fff;
}

.task-check.checked.priority-low { background: var(--priority-low); }
.task-check.checked.priority-normal { background: var(--priority-normal); }
.task-check.checked.priority-high { background: var(--priority-high); }

.task-check-label {
  display: block;
  line-height: 1;
}

.task-check.checked .task-check-label {
  display: none;
}

.task-check svg {
  width: 12px;
  height: 12px;
  display: none;
}

.task-check.checked svg {
  display: block;
}

.task-check.note-indicator {
  cursor: default;
}

.task-check.note-indicator:disabled {
  opacity: 1;
}

.task-check.note-indicator svg {
  display: block;
  width: 11px;
  height: 11px;
  color: inherit;
}

.task-body {
  flex: 1;
  min-width: 0;
}

.task-top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.task-title {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  word-break: break-word;
}

.task-card.done .task-title {
  text-decoration: line-through;
  color: var(--text-muted);
}

.task-date-chip,
.task-time-chip {
  flex-shrink: 0;
  margin-top: 1px;
}

.avatar-circle {
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--accent-soft);
  color: var(--accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  text-transform: uppercase;
}

.avatar-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-circle-badge {
  width: 20px;
  height: 20px;
  font-size: 9px;
}

.avatar-circle-md {
  width: 44px;
  height: 44px;
  font-size: 16px;
  flex-shrink: 0;
}

.avatar-circle-lg {
  width: 72px;
  height: 72px;
  font-size: 24px;
}

.avatar-circle-xl {
  width: 96px;
  height: 96px;
  font-size: 32px;
  margin: 0 auto;
}

.avatar-upload-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.avatar-upload-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.premium-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8px 12px 28px;
  gap: 6px;
}

.premium-hero-badge {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(155deg, var(--accent), var(--accent-dark));
  color: #fff;
  margin-bottom: 6px;
  opacity: 0;
  transform: scale(0.6);
  animation:
    premium-badge-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s forwards,
    premium-badge-pulse 2.6s ease-in-out 0.5s infinite;
}

.premium-hero-badge svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
  stroke: currentColor;
}

@keyframes premium-badge-in {
  to { opacity: 1; transform: scale(1); }
}

@keyframes premium-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 119, 87, 0.35); }
  50% { box-shadow: 0 0 0 10px rgba(217, 119, 87, 0); }
}

@keyframes premium-fade-up {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .premium-hero-badge,
  .premium-hero-title,
  .premium-hero-sub,
  .premium-feature,
  .premium-plan-card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

.premium-hero-title {
  font-family: var(--font-display);
  font-size: 22px;
  margin: 0;
  opacity: 0;
  transform: translateY(6px);
  animation: premium-fade-up 0.4s ease 0.15s forwards;
}

.premium-hero-sub {
  color: var(--text-muted);
  font-size: 14px;
  max-width: 340px;
  margin: 0;
  opacity: 0;
  transform: translateY(6px);
  animation: premium-fade-up 0.4s ease 0.22s forwards;
}

.premium-hero .btn {
  margin-top: 10px;
}

.premium-feature-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.premium-feature {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  opacity: 0;
  transform: translateY(10px);
  animation: premium-fade-up 0.45s ease forwards;
}

.premium-feature:nth-child(1) { animation-delay: 0.3s; }
.premium-feature:nth-child(2) { animation-delay: 0.38s; }
.premium-feature:nth-child(3) { animation-delay: 0.46s; }
.premium-feature:nth-child(4) { animation-delay: 0.54s; }

.premium-feature-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

.premium-feature-icon svg {
  width: 18px;
  height: 18px;
}

.premium-feature-title {
  font-weight: 600;
  font-size: 14.5px;
}

.premium-feature-desc {
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 2px;
  line-height: 1.4;
}

.premium-plans {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.premium-plan-card {
  position: relative;
  flex: 1 1 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 18px 12px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  transition: border-color 0.15s ease, transform 0.1s ease;
  opacity: 0;
  transform: translateY(10px);
  animation: premium-fade-up 0.45s ease 0.62s forwards;
}

.premium-plan-card:hover {
  border-color: var(--accent);
}

.premium-plan-card:active {
  transform: scale(0.98);
}

.premium-plan-card-featured {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.premium-plan-name {
  font-weight: 600;
  font-size: 15px;
}

.premium-plan-price {
  color: var(--text-muted);
  font-size: 13px;
  min-height: 16px;
}

.billing-test-results {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}

.billing-test-ok {
  color: var(--priority-low-dark);
}

.billing-test-error {
  color: var(--danger);
}

.premium-plan-badge {
  position: absolute;
  top: -10px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
}

.task-desc {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.4;
  margin-top: 4px;
  word-break: break-word;
}

.task-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.chip {
  font-size: 12px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.chip.deadline {
  background: #EFEDE4;
  color: var(--text-muted);
}

.chip.deadline.overdue {
  background: #F7E3DE;
  color: var(--overdue);
}

.chip.deadline.soon {
  background: #F6EAD3;
  color: var(--soon);
}

.source-badge {
  font-weight: 600;
}

.source-badge-claude {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.source-badge-chatgpt {
  background: #D9EEE9;
  color: #1F7A6C;
}

.source-badge-generic {
  background: #EFEDE4;
  color: var(--text-muted);
}

.person-badge {
  background: #EFEDE4;
  color: var(--text-muted);
}

button.chip {
  border: none;
  font-family: inherit;
  cursor: pointer;
}

.chip-icon {
  display: flex;
  align-items: center;
  gap: 3px;
  background: #EFEDE4;
  color: var(--text-muted);
  padding: 3px 7px;
}

.chip-icon svg {
  width: 12px;
  height: 12px;
}

.chip-icon-unread {
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 600;
  animation: chip-icon-unread-pulse 1.6s ease-in-out infinite;
}

@keyframes chip-icon-unread-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(195, 98, 63, 0.45);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(195, 98, 63, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chip-icon-unread {
    animation: none;
  }
}

/* "An AI just picked this task up" — reuses the chat chip's pulse animation
   (.chip-icon-unread) but in the AI's own badge color, so it reads as a
   distinct signal from unread chat messages rather than a duplicate of it.
   The claude variant needs no override: it's already the same orange as
   .chip-icon-unread. */
.chip-working.chip-icon-unread.chip-working-chatgpt {
  background: #D9EEE9;
  color: #1F7A6C;
  animation-name: chip-working-pulse-chatgpt;
}

.chip-working.chip-icon-unread.chip-working-generic {
  background: #EFEDE4;
  color: var(--text-muted);
  animation-name: chip-working-pulse-generic;
}

@keyframes chip-working-pulse-chatgpt {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(31, 122, 108, 0.45);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(31, 122, 108, 0);
  }
}

@keyframes chip-working-pulse-generic {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(90, 90, 90, 0.35);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(90, 90, 90, 0);
  }
}

/* Marks a sub-item's card, nested under its parent on Home's Vandaag list, as
   a sub-item — sitting in the row's own indent gutter, outside the card's
   border, pointing at it, rather than as a badge inside the card. .task-row
   (the <li> this attaches to) is already position:relative. */
.subtask-connector-icon {
  position: absolute;
  left: -27px;
  top: 15px;
  width: 20px;
  height: 20px;
  color: var(--accent-dark);
}

.subtask-connector-icon svg {
  width: 100%;
  height: 100%;
}

.icon-btn {
  position: relative;
  border: none;
  background: transparent;
  color: var(--text-muted);
  width: 30px;
  height: 30px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-btn::before {
  content: '';
  position: absolute;
  inset: -7px;
}

.icon-btn:active {
  background: var(--bg);
}

.icon-btn svg {
  width: 17px;
  height: 17px;
}

/* --- Icon picker (create list) ------------------------------------------ */

.icon-picker {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px;
  margin-bottom: 10px;
}

.icon-option {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  background: var(--surface);
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
}

.icon-option svg {
  width: 18px;
  height: 18px;
}

.icon-option.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-dark);
}

/* --- Bottom nav -------------------------------------------------------- */

.bottom-tabs {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.bottom-tabs-inner {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  height: var(--tabbar-height);
}

.bottom-tabs .tab {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  position: relative;
}

.bottom-tabs .tab svg {
  width: 21px;
  height: 21px;
}

.tab-icon-wrap {
  position: relative;
  display: inline-flex;
}

.tab-badge {
  position: absolute;
  top: -4px;
  right: -8px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
}

.bottom-tabs .tab.active {
  color: var(--accent-dark);
  font-weight: 600;
}

.bottom-tabs .tab.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--accent);
}

/* --- FAB ---------------------------------------------------------------- */

.fab {
  position: fixed;
  bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0) + 16px);
  right: max(20px, calc((100vw - 480px) / 2 + 20px));
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(217, 119, 87, 0.4);
  cursor: pointer;
  z-index: 20;
}

.fab:active {
  background: var(--accent-dark);
}

.fab-menu {
  position: fixed;
  bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0) + 82px);
  right: max(20px, calc((100vw - 480px) / 2 + 20px));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 180px;
  z-index: 25;
}

.fab-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
  background: transparent;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.fab-menu-item:active {
  background: var(--bg);
}

.fab-menu-item svg {
  width: 17px;
  height: 17px;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* --- Planning: month calendar -------------------------------------- */

.calendar-month-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 2px 14px;
  font-size: 16px;
  font-weight: 700;
}

.calendar-weekday-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 6px;
}

.calendar-weekday-label {
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

.calendar-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 18px;
}

.cal-day {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 4px 2px;
  cursor: pointer;
  font-family: inherit;
  position: relative;
}

.cal-day.outside-month {
  opacity: 0.4;
}

.cal-day-num {
  font-size: 13px;
  font-weight: 600;
}

.cal-day.is-today .cal-day-num {
  color: var(--accent-dark);
}

.cal-day.selected {
  background: var(--accent);
  border-color: var(--accent);
}

.cal-day.selected .cal-day-num {
  color: #fff;
}

.cal-day-dots {
  display: flex;
  gap: 3px;
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
}

.cal-day-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.cal-day.selected .cal-day-dot {
  box-shadow: 0 0 0 1px #fff;
}

/* --- Home: list tiles ---------------------------------------------------- */

.lists-grid {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 10px;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.lists-grid::-webkit-scrollbar {
  display: none;
}

.list-tile {
  background: var(--tile-color, var(--accent-soft));
  border: none;
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  aspect-ratio: 1;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  position: relative;
  min-width: 0;
  width: 160px;
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.lists-nav-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin: 12px auto 0;
  padding: 7px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.lists-nav-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--border);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: width 0.2s ease, background 0.2s ease;
}

.lists-nav-dot.active {
  width: 18px;
  background: var(--accent);
}

.home-section-heading {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 24px 0 12px;
}

.list-tile-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  color: rgba(45, 42, 38, 0.62);
}

.list-tile-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.75;
}

.list-tile-text {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.list-tile-name-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.list-tile-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.list-tile-progress {
  display: block;
  width: 100%;
  height: 5px;
  background: rgba(45, 42, 38, 0.12);
  border-radius: 999px;
  overflow: hidden;
}

.list-tile-progress-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
}

.list-tile-count {
  font-size: 12.5px;
  color: rgba(45, 42, 38, 0.62);
}

.list-tile-premium-teaser {
  background: linear-gradient(155deg, var(--accent), var(--accent-dark));
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.list-tile-premium-teaser .list-tile-icon,
.list-tile-premium-teaser .list-tile-name,
.list-tile-premium-teaser .list-tile-count {
  color: #fff;
}

.list-tile-premium-teaser.list-tile-dismissing {
  opacity: 0;
  transform: scale(0.9);
}

.list-tile-overdue-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 11px;
  padding: 2px 8px;
}

/* --- Sub-screen header (e.g. list detail) -------------------------------- */

.subscreen-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(env(safe-area-inset-top, 0) + 16px) 12px 14px 8px;
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 10;
}

.subscreen-header h1 {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The list's own icon, sized to match the title text and sitting right
   before it in the header. */
.list-detail-icon-badge {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
}

.list-detail-icon-badge.hidden {
  display: none;
}

.list-detail-icon-badge-icon {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--accent-dark);
}

.list-detail-icon-badge-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.75;
}

/* --- Screen: Archive ------------------------------------------------------ */

#screen-archive .search-bar {
  margin-bottom: 14px;
}

/* A snapshot, not a live task — no swipe, no tap-through, so it doesn't
   invite the same "this is clickable" affordance as a normal task card. */
.archive-card {
  cursor: default;
}

.archive-card .task-check {
  cursor: default;
}

.list-detail-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.list-detail-search-row .list-detail-search {
  flex: 1;
  margin-bottom: 0;
}

.list-detail-filter-trigger {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted);
}

.list-detail-filter-trigger::before {
  content: '';
  position: absolute;
  inset: -2px;
}

.list-detail-filter-trigger svg {
  width: 18px;
  height: 18px;
  pointer-events: none;
}

.list-detail-filter-trigger:focus-within {
  border-color: var(--accent);
}

.list-detail-filter-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.list-detail-group-header {
  padding: 8px 2px 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 14px;
}

.list-detail-group-header:first-child {
  margin-top: 0;
}

.list-detail-group-header.overdue {
  color: var(--overdue);
}

.list-detail-group-header.soon {
  color: var(--soon);
}

.list-detail-done-group {
  margin-top: 14px;
}

.list-detail-done-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  cursor: pointer;
  padding: 8px 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.list-detail-done-summary::-webkit-details-marker {
  display: none;
}

.list-detail-done-chevron {
  display: flex;
  width: 16px;
  height: 16px;
  transition: transform 0.15s ease;
}

.list-detail-done-chevron svg {
  width: 100%;
  height: 100%;
}

.list-detail-done-group[open] .list-detail-done-chevron {
  transform: rotate(180deg);
}

.list-detail-done-list {
  margin-top: 4px;
}

.list-info-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-bottom: 14px;
}

.list-info-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  color: rgba(45, 42, 38, 0.55);
}

.list-info-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.5;
}

.list-info-text {
  flex: 1;
  min-width: 0;
}

.list-info-text .settings-list-name {
  margin-bottom: 2px;
}

.list-info-actions-row {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}

/* --- Settings hub & profile ------------------------------------------- */

.settings-menu {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings-menu-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  color: var(--text);
}

.settings-menu-icon {
  display: flex;
  color: var(--text-muted);
}

.settings-menu-icon svg {
  width: 19px;
  height: 19px;
}

.settings-menu-label {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
}

.settings-menu-chevron {
  display: flex;
  color: var(--text-muted);
}

.settings-menu-chevron svg {
  width: 16px;
  height: 16px;
}

.settings-menu-status {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}

.settings-menu-status.active {
  color: var(--accent-dark);
  font-weight: 600;
}

.settings-menu-row.danger {
  color: var(--overdue);
}

.settings-menu-row.danger .settings-menu-icon {
  color: var(--overdue);
}

.settings-form {
  margin-bottom: 6px;
}

.settings-hint {
  font-size: 13px;
  color: var(--text-muted);
  margin: -6px 0 14px;
}

.settings-status {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 12px;
}

.settings-status.status-set {
  color: var(--priority-low-dark);
}

.settings-status.status-unset {
  color: var(--text-muted);
}

/* --- Settings: list management -------------------------------------------- */

.settings-section {
  margin: 4px 0 26px;
}

.settings-heading {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 12px;
}

/* --- Claude & ChatGPT (MCP) uitleg ---------------------------------------- */

.mcp-url-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.mcp-url {
  flex: 1;
  min-width: 0;
  font-family: 'SFMono-Regular', Consolas, Menlo, monospace;
  font-size: 13px;
  color: var(--text);
  overflow-x: auto;
  white-space: nowrap;
}

.settings-hint-spaced {
  margin-top: 20px;
}

.mcp-url-wrap {
  white-space: normal;
  overflow-x: visible;
  line-height: 1.5;
}

.provider-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.provider-header .settings-heading {
  margin: 0;
}

.provider-logo {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.provider-logo svg {
  width: 18px;
  height: 18px;
}

.provider-logo-claude {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.provider-logo-chatgpt {
  background: #D9EEE9;
  color: #1F7A6C;
}

.mcp-steps {
  margin: 0 0 26px;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}

.mcp-steps li {
  margin-bottom: 4px;
}

.list-form {
  margin-bottom: 18px;
}

.list-form-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  margin: 0 0 6px;
}

.list-form-submit {
  width: 100%;
  margin-top: 4px;
}

/* --- Color picker (create list) ------------------------------------------ */

.color-picker {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px;
  margin-bottom: 10px;
}

.color-option {
  aspect-ratio: 1 / 1;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
}

.color-option.active {
  border-color: var(--accent-dark);
}

.list-invite-section {
  margin-top: 4px;
}

/* --- MCP promo card (create list) ----------------------------------------- */

.mcp-promo-card {
  background: var(--accent-soft);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 20px;
}

.mcp-promo-logos {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.mcp-promo-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  margin: 0 0 12px;
}

.mcp-promo-text strong {
  display: block;
  margin-bottom: 2px;
  color: var(--accent-dark);
}

.settings-list-name {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-list-count {
  font-size: 13px;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* --- List sharing: members section (list detail, owner only) ------------ */

.list-members-section {
  margin: 24px 0 4px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.member-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.member-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.member-row-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.member-permissions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.member-info {
  flex: 1;
  min-width: 0;
}

.member-name {
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-email {
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-status {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
}

.member-status.status-pending {
  background: #EFEDE4;
  color: var(--text-muted);
}

.member-status.status-accepted {
  background: var(--priority-low-soft);
  color: var(--priority-low-dark);
}

.member-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.member-permission {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
}

.switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 20px;
  flex-shrink: 0;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-slider {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.switch-slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 2px;
  top: 2px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.15s ease;
  box-shadow: 0 1px 2px rgba(45, 42, 38, 0.2);
}

.switch input:checked + .switch-slider {
  background: var(--priority-low);
}

.switch input:checked + .switch-slider::before {
  transform: translateX(14px);
}

.account-row {
  cursor: pointer;
}

.account-detail-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.account-detail-heading {
  flex: 1;
  min-width: 0;
}

.account-detail-name {
  font-size: 17px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-detail-email {
  font-size: 13px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-detail-premium {
  flex-shrink: 0;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
}

#accountDetailResetBtn {
  width: 100%;
  margin-bottom: 8px;
}

.account-detail-section {
  margin: 22px 0;
}

.account-detail-section h2 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 8px;
}

.account-detail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.account-detail-list li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.account-detail-list .account-detail-list-main {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-detail-list .account-detail-list-meta {
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 12px;
  text-align: right;
}

.account-detail-empty {
  color: var(--text-muted);
  font-size: 13px;
}

.account-detail-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.account-detail-stats > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 13px;
}

.account-detail-stats span {
  color: var(--text-muted);
}

#accountDetailDeleteBtn {
  width: 100%;
  margin-top: 22px;
}

.member-remove-btn,
.member-copy-btn {
  position: relative;
  border: none;
  background: transparent;
  color: var(--text-muted);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.member-remove-btn::before,
.member-copy-btn::before {
  content: '';
  position: absolute;
  inset: -8px;
}

.member-remove-btn:active,
.member-copy-btn:active {
  background: var(--bg);
}

.member-remove-btn svg,
.member-copy-btn svg {
  width: 15px;
  height: 15px;
}

.invite-member-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.invite-member-form input {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 16px;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
}

.invite-member-form input:focus {
  outline: none;
  border-color: var(--accent);
}

/* --- Home: "shared with me" tag on a list tile --------------------------- */

.list-tile-shared-tag {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: rgba(45, 42, 38, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* --- Inbox: notifications ------------------------------------------------ */

.notification-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.notification-row {
  position: relative;
}

.swipe-read {
  background: var(--accent);
  justify-content: flex-end;
}

.notification-row.reveal-read .swipe-read {
  opacity: 1;
}

.notification-card {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
  touch-action: pan-y;
  transition: transform 0.2s ease, opacity 0.15s ease;
}

.notification-card.swiping {
  transition: none;
  user-select: none;
}

.notification-card.clickable {
  cursor: pointer;
}

/* A read notification looks like a completed task/note — grayed out
   instead of disappearing from the list. */
.notification-row.read .notification-card {
  background: #FAF9F6;
}

.notification-row.read .notification-icon,
.notification-row.read .notification-text,
.notification-row.read .notification-time {
  opacity: 0.6;
}

.notification-row.unread::before {
  content: '';
  position: absolute;
  top: 18px;
  left: -5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.notification-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--text-muted);
}

.notification-icon svg {
  width: 17px;
  height: 17px;
}

.notification-icon.type-list_accepted,
.notification-icon.type-item_toggled {
  background: var(--priority-low-soft);
  color: var(--priority-low-dark);
}

.notification-icon.type-item_deleted {
  background: var(--priority-high-soft);
  color: var(--priority-high-dark);
}

.notification-icon.type-list_invite {
  background: var(--priority-normal-soft);
  color: var(--priority-normal-dark);
}

.notification-icon.type-chat_message {
  background: var(--priority-normal-soft);
  color: var(--priority-normal-dark);
}

.notification-content {
  flex: 1;
  min-width: 0;
}

.notification-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text);
}

.notification-time {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
}

.notification-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.notification-actions .btn {
  flex: none;
  padding: 8px 14px;
  font-size: 13px;
}

.notification-resolved {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

/* --- Detail screen ------------------------------------------------------ */

.detail-header {
  display: flex;
  align-items: center;
  padding: calc(env(safe-area-inset-top, 0) + 16px) 12px 12px;
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 10;
}

.detail-body {
  flex: 1;
  padding: 4px 20px 4px;
}

.detail-actions-row {
  display: flex;
  gap: 8px;
  padding: 4px 20px calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0) + 24px);
}

.detail-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 12px 6px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
}

.detail-action-btn:active {
  background: var(--bg);
}

.detail-action-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.detail-action-btn-danger {
  color: var(--danger);
  border-color: var(--danger);
}

.detail-card {
  background: var(--accent-soft);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 18px;
}

.detail-card-category {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-dark);
  margin-bottom: 6px;
}

.detail-card-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}

.detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--border);
}

.detail-row-pair {
  display: flex;
  gap: 16px;
}

.detail-row-pair .detail-row {
  flex: 1;
  min-width: 0;
}

/* Flex items default to a content-based min-width, so an unbreakable string
   (an email address, a long link) would rather overflow the row than shrink —
   this lets both the label and the value truncate instead, now that a paired
   row is only half as wide as before. */
.detail-row > * {
  min-width: 0;
}

.detail-row-label {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
}

.detail-value {
  font-size: 14px;
  font-weight: 500;
  text-align: right;
}

.detail-value.muted {
  color: var(--text-muted);
  font-weight: 400;
}

.detail-value-link {
  color: var(--accent-dark);
  text-decoration: none;
}

.detail-chip {
  border: none;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.detail-chip.status-open {
  background: var(--priority-normal-soft);
  color: var(--priority-normal-dark);
}

.detail-chip.status-done {
  background: var(--priority-low-soft);
  color: var(--priority-low-dark);
}

.detail-chip.priority-low {
  background: var(--priority-low-soft);
  color: var(--priority-low-dark);
}

.detail-chip.priority-normal {
  background: var(--priority-normal-soft);
  color: var(--priority-normal-dark);
}

.detail-chip.priority-high {
  background: var(--priority-high-soft);
  color: var(--priority-high-dark);
}

.list-filter-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-radius: 12px;
  padding: 10px 14px;
  margin: 10px 0;
  font-size: 13px;
  font-weight: 600;
}

.list-filter-banner-clear {
  border: none;
  background: transparent;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
}

.detail-notes {
  padding: 16px 2px 0;
}

.detail-notes-text {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  text-align: left;
}

.detail-note-body {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
  text-align: left;
}

.detail-note-body ul,
.detail-note-body ol {
  padding-left: 22px;
}

.parent-task-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin: -8px 0 16px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.parent-task-hint svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.detail-subtasks {
  padding: 20px 2px 0;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}

.detail-subtasks .task-list {
  margin-top: 10px;
}

.add-subtask-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}

.add-subtask-btn:active {
  background: var(--bg);
}

.add-subtask-btn svg {
  width: 16px;
  height: 16px;
}

/* --- Attachments (task/note detail) -------------------------------------- */

.detail-attachments {
  padding: 20px 2px 0;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}

.attachment-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.attachment-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.attachment-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--text-muted);
}

.attachment-icon svg {
  width: 100%;
  height: 100%;
}

.attachment-thumb {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--bg);
  cursor: pointer;
}

.attachment-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--text);
}

.attachment-name {
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-meta {
  font-size: 12px;
  color: var(--text-muted);
}

.attachment-remove-btn {
  position: relative;
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--text-muted);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.attachment-remove-btn::before {
  content: '';
  position: absolute;
  inset: -8px;
}

.attachment-remove-btn:active {
  background: var(--bg);
}

.attachment-remove-btn svg {
  width: 15px;
  height: 15px;
}

.attachment-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.attachment-add-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  padding: 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}

.attachment-add-btn:active {
  background: var(--bg);
}

.attachment-add-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.attachment-link-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.attachment-link-form input {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 16px;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
}

.attachment-link-form input:focus {
  outline: none;
  border-color: var(--accent);
}

/* --- Priority picker (in the add/edit form) ----------------------------- */

.priority-picker {
  display: flex;
  gap: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px;
}

.priority-option {
  flex: 1;
  border: none;
  background: transparent;
  padding: 8px 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  border-radius: 7px;
  cursor: pointer;
  font-family: inherit;
}

.priority-option.active {
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  box-shadow: var(--shadow);
}

/* --- Form fields (task form, profile, lists) ------------------------------ */

#taskForm {
  display: flex;
  flex-direction: column;
}

.type-tabs {
  display: flex;
  gap: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px;
  margin-bottom: 16px;
  order: -1;
}

.type-tab {
  flex: 1;
  border: none;
  background: transparent;
  padding: 9px 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  border-radius: 7px;
  cursor: pointer;
  font-family: inherit;
}

.type-tab.active {
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 600;
}

.type-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.chat-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
}

/* #screen-detail has no .screen-body wrapper (unlike list-detail/task-form),
   so .type-tabs' shared order:-1 (meant to pull it above sibling form
   fields) would otherwise jump it above the header here — pin it back. */
#detailTabs {
  order: 0;
  margin: 8px 20px 12px;
}

/* .detail-card normally sits inside .detail-body (which has 20px side
   padding); here it's a direct sibling of #screen-detail, so it needs its
   own horizontal margin. */
#detailTitleCard {
  margin: 8px 20px 12px;
}

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

.task-chat-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 20px calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0) + 80px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.task-chat-empty {
  color: var(--text-muted);
  font-size: 14px;
  padding: 12px 0;
}

.chat-bubble {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
}

.chat-bubble-ai {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
}

.chat-bubble-mike {
  align-self: flex-end;
  background: var(--accent-soft);
}

.chat-bubble-author {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.chat-bubble-text {
  color: var(--text);
  word-wrap: break-word;
}

.chat-bubble-text p {
  margin: 0 0 6px;
}

.chat-bubble-text p:last-child {
  margin-bottom: 0;
}

/* A link the AI includes in a chat message (e.g. a PR it couldn't merge on
   its own) renders as a tappable button rather than plain inline text. */
.chat-bubble-text a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  text-decoration: none;
}

.chat-bubble-text a:hover,
.chat-bubble-text a:active {
  background: var(--accent-dark);
}

.chat-bubble-time {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
  text-align: right;
}

.task-chat-form {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 20px;
  border-top: 1px solid var(--border);
  position: fixed;
  left: max(0px, calc((100vw - 480px) / 2));
  right: max(0px, calc((100vw - 480px) / 2));
  bottom: max(calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0)), var(--kb-inset));
  background: var(--bg);
  z-index: 25;
}

.task-chat-form input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 16px;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
}

.task-chat-send {
  background: var(--accent);
  color: #fff;
  flex-shrink: 0;
}

.rich-editor-toolbar {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}

.rich-btn {
  position: relative;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
}

.rich-btn::before {
  content: '';
  position: absolute;
  inset: -6px;
}

.rich-btn:active {
  background: var(--bg);
}

.rich-editor {
  width: 100%;
  min-height: 120px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 16px;
  font-family: inherit;
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
}

.rich-editor:focus {
  outline: none;
  border-color: var(--accent);
}

.rich-editor:empty:before {
  content: attr(data-placeholder);
  color: var(--text-muted);
}

.rich-editor ul,
.rich-editor ol {
  margin: 0;
  padding-left: 22px;
}

.field {
  display: block;
  margin-bottom: 14px;
}

.field span {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 16px;
  font-family: inherit;
  color: var(--text);
  background: var(--bg);
}

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

.field textarea {
  resize: vertical;
}

/* --- New/edit item as a bottom sheet, over whatever page it was opened from --- */

.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(45, 42, 38, 0.45);
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

.sheet-backdrop.sheet-open {
  opacity: 1;
  pointer-events: auto;
}

#screen-task-form.bottom-sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  top: auto;
  width: 100%;
  max-width: 480px;
  min-height: 0;
  max-height: calc(88vh - var(--kb-inset));
  z-index: 100;
  background: var(--bg);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 28px rgba(45, 42, 38, 0.2);
  transform: translate(-50%, 100%);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  overflow-y: auto;
  overscroll-behavior: contain;
}

#screen-task-form.bottom-sheet.sheet-open {
  transform: translate(-50%, 0);
}

#screen-task-form.bottom-sheet .subscreen-header {
  /* The sheet doesn't start at the very top of the viewport, unlike a full
     page, so it doesn't need the status-bar safe-area padding .subscreen-header
     normally carries. */
  padding-top: 16px;
  border-radius: 20px 20px 0 0;
}

#screen-task-form.bottom-sheet .screen-body {
  padding-bottom: calc(env(safe-area-inset-bottom, 0) + 24px);
}

/* --- Deadline / recurrence: a badge that opens a choice popup, not a full field --- */

.field-badge {
  display: block;
  margin-bottom: 14px;
}

/* Groups the deadline date badge with its time badge on one row, time after date. */
.field-badge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.field-badge-row .field-badge {
  margin-bottom: 0;
}

.badge-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  background: var(--bg);
  color: var(--text-muted);
  cursor: pointer;
}

.badge-trigger svg {
  width: 14px;
  height: 14px;
}

.badge-trigger.is-set {
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-color: transparent;
}

/* Kept in the DOM (not display:none) so .showPicker()/.click() can still open it.
   !important guards against .field input's width:100%/padding/border winning on
   specificity, which previously made this "hidden" date input render full-width
   and overflow the sheet horizontally. */
.sr-only-input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
}

/* A small centered choice popup, same idea as .fab-menu (list of tappable rows in a
   rounded card) but for a field opened from inside the task-form sheet, where anchoring
   to the field's own on-screen position isn't reliable inside a scrolling container. */
.field-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(45, 42, 38, 0.45);
}

.field-menu {
  width: 100%;
  max-width: 300px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Bottom sheet, same look and motion as the add/edit item form (#screen-task-form.bottom-sheet). */
.move-list-sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  top: auto;
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  z-index: 100;
  background: var(--bg);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 28px rgba(45, 42, 38, 0.2);
  transform: translate(-50%, 100%);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.move-list-sheet.sheet-open {
  transform: translate(-50%, 0);
}

.move-list-card {
  padding: 0 6px calc(env(safe-area-inset-bottom, 0) + 24px);
}

.move-list-header {
  padding: 20px 14px 14px;
}

.move-list-header-with-back {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding-left: 6px;
}

.move-list-header-with-back .icon-btn {
  flex-shrink: 0;
  margin-top: -2px;
}

.move-list-header-text {
  flex: 1;
  min-width: 0;
}

.move-list-title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.move-list-subtitle {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
}

.move-list-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* --- Move-to-list: one shared "card" look for every choice — a real list,
   "Geen hub", the standalone option, and a candidate parent item alike. --- */

.move-list-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 1px solid var(--border);
  background: var(--bg);
  padding: 12px;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.move-list-option:active {
  background: var(--accent-soft);
}

.move-list-option-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

.move-list-option-icon svg {
  width: 16px;
  height: 16px;
}

/* A real list's own icon/color, sized up a little to stand out as the "main" choice. */
.move-list-option-icon-list {
  width: 38px;
  height: 38px;
  background: var(--tile-color, var(--accent-soft));
  color: rgba(45, 42, 38, 0.62);
}

.move-list-option-icon-list svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.75;
}

.move-list-option-icon-muted {
  background: var(--border);
  color: var(--text-muted);
}

.move-list-option-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.move-list-option-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.move-list-option-hint {
  font-size: 12px;
  color: var(--text-muted);
}

.move-list-section-label {
  margin: 16px 0 4px;
  padding: 0 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}

.move-list-section-note {
  margin: 12px 0 0;
  padding: 0 8px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

.move-list-parent-items {
  max-height: 240px;
  overflow-y: auto;
}

.field-menu-item {
  border: none;
  background: transparent;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.field-menu-item:active {
  background: var(--bg);
}

.field-menu-item-clear {
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  border-radius: 0;
  margin-top: 4px;
  padding-top: 14px;
}

.field-menu-empty {
  margin: 0;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--text-muted);
  text-align: center;
}

.inline-number-input {
  width: 56px;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 4px 8px;
  font-size: 16px;
  font-family: inherit;
  text-align: center;
  color: var(--text);
  background: var(--bg);
}

#taskAttachmentsField {
  /* Shown for every item type, so it isn't part of TASK_FIELD_ORDER/NOTE_FIELD_ORDER —
     always sits after the type-specific fields (order 0-5) and before the buttons (99). */
  order: 10;
}

.modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
  order: 99;
}

.btn {
  flex: 1;
  border: none;
  border-radius: var(--radius-sm);
  padding: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}

.btn-primary:active {
  background: var(--accent-dark);
}

.btn-secondary {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-danger {
  background: var(--danger);
  color: #fff;
}

.btn-danger:active {
  background: var(--priority-high-dark);
}

.toast {
  position: fixed;
  bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0) + 16px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  z-index: 200;
  box-shadow: var(--shadow);
}

/* --- Attention dialog (blocking, for messages that need to be read) ---- */

.alert-overlay {
  position: fixed;
  inset: 0;
  background: rgba(45, 42, 38, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 300;
}

.alert-card {
  width: 100%;
  max-width: 340px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 24px 24px;
  text-align: center;
}

.alert-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--priority-high-soft);
  color: var(--priority-high-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

.alert-icon svg {
  width: 26px;
  height: 26px;
}

.alert-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--text);
}

.alert-message {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0 0 20px;
}

.alert-ok {
  width: 100%;
}

.alert-actions {
  display: flex;
  gap: 10px;
}

/* --- Location popup (task/note): GPS fetch + arrival/departure prefs ------ */

.location-card {
  text-align: left;
}

.location-card .alert-title {
  text-align: center;
}

.location-fetch-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.location-status {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}

.location-status.error {
  color: var(--danger);
}

.location-result {
  margin-top: 14px;
}

.location-result-label {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}

.checkbox-row input {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--accent);
}

.location-card .alert-actions {
  margin-top: 18px;
}

.location-close-btn {
  width: 100%;
  margin-top: 10px;
}

/* --- Image attachment viewer -------------------------------------------- */

.image-viewer-overlay {
  background: rgba(0, 0, 0, 0.85);
  padding: 40px 16px;
}

.image-viewer-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

.image-viewer-close-btn {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.image-viewer-close-btn::before {
  content: '';
  position: absolute;
  inset: -2px;
}

.image-viewer-close-btn svg {
  width: 20px;
  height: 20px;
}

/* --- Auth screen ---------------------------------------------------------- */

.auth-screen {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.auth-card {
  width: 100%;
  max-width: 380px;
}

.auth-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
  text-align: center;
}

.auth-logo-mark {
  width: 56px;
  height: 56px;
  border-radius: 14px;
}

.auth-subtitle {
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  margin: 6px 0 28px;
}

.auth-tabs {
  display: flex;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px;
  margin-bottom: 20px;
}

.auth-tab {
  flex: 1;
  border: none;
  background: transparent;
  padding: 9px 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  border-radius: 7px;
  cursor: pointer;
  font-family: inherit;
}

.auth-tab.active {
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 600;
}

.auth-error {
  background: var(--priority-high-soft);
  color: var(--priority-high-dark);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 13px;
  margin: 0 0 14px;
}

.auth-submit {
  width: 100%;
}

.auth-link {
  display: block;
  text-align: right;
  font-size: 13px;
  color: var(--accent-dark);
  text-decoration: none;
  margin: -8px 0 14px;
}

.auth-link:hover {
  text-decoration: underline;
}

/* --- New SSO-style auth screen (Hubs #197) -------------------------------- */

.sso-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 4px;
}

.btn-sso {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 11px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.btn-sso:hover {
  background: var(--bg);
}

.sso-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: flex;
}

.sso-icon svg {
  width: 100%;
  height: 100%;
}

/* Google's own rendered button (via Identity Services) replaces #googleSsoBtn's
   contents once the SDK is ready — this wrapper just gives it the same slot/width. */
#googleSsoRenderTarget {
  width: 100%;
  display: flex;
  justify-content: center;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 18px 0;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* --- Post-registration: name + avatar --------------------------------------- */

.onboarding-avatar-picker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

/* --- Swipeable tutorial carousel --------------------------------------------- */

.tutorial-screen {
  padding: 0;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

.tutorial-name {
  text-align: center;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  padding: max(24px, env(safe-area-inset-top)) 24px 8px;
  flex-shrink: 0;
}

.tutorial-track {
  flex: 1;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.tutorial-track::-webkit-scrollbar {
  display: none;
}

.tutorial-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 32px;
  text-align: center;
  gap: 20px;
}

.tutorial-slide-image {
  width: 100%;
  max-width: 320px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.tutorial-slide-graphic {
  aspect-ratio: 4 / 3;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tutorial-slide-icon {
  width: 30%;
  color: var(--accent-dark);
}

.tutorial-slide-icon svg {
  width: 100%;
  height: 100%;
}

.tutorial-slide-title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  margin: 0;
}

.tutorial-slide-text {
  color: var(--text-muted);
  font-size: 14.5px;
  line-height: 1.5;
  margin: 0;
  max-width: 320px;
}

.tutorial-slide-welcome .tutorial-slide-title {
  font-size: 28px;
}

.tutorial-welcome-icon {
  width: 88px;
  height: 88px;
  color: var(--accent);
}

.tutorial-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  padding: 4px 0 18px;
  flex-shrink: 0;
}

.tutorial-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border);
}

.tutorial-dot.active {
  background: var(--accent);
  width: 20px;
  border-radius: 4px;
}

.tutorial-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 24px max(20px, env(safe-area-inset-bottom));
  flex-shrink: 0;
}

.tutorial-actions .btn {
  flex: 1;
}

.tutorial-skip {
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 11px 8px;
}

.tutorial-actions.tutorial-actions-final .tutorial-skip {
  visibility: hidden;
}

.btn-sm {
  padding: 8px 16px;
  font-size: 13px;
}

.tutorial-premium-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.tutorial-premium-actions .tutorial-skip-inline {
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 4px;
}

/* --- Desktop three-pane view ---------------------------------------------
   Above the breakpoint the app becomes a fixed three-column shell, like a
   mail client: a permanent left sidebar (the old Home screen — greeting,
   search and the list of lists — with the Planning/Inbox/Instellingen menu
   docked under it), a middle pane that shows Planning by default and swaps
   to Inbox, Instellingen or an opened list, and a right pane for whatever
   was drilled into from there — a task/note's detail, or the new/edit
   form. Navigation only ever goes three panes deep: the sidebar picks what
   pane 2 shows, and pane 2's own content is what pane 3 drills into. The
   add/edit sheet follows the same rule — it opens over pane 3 whenever
   pane 2 already shows something, and over pane 2 itself when pane 2 is
   empty (see .sheet-pane2 below, toggled from renderRoute() in app.js).
   Below the breakpoint, everything above is untouched and the app renders
   exactly as the mobile layout. */

@media (min-width: 1024px) {
  :root {
    --sidebar-width: 280px;
    /* Pane 2 gets exactly half of whatever space is left after the sidebar,
       so it always matches pane 3 (the remaining 1fr column) in width. */
    --pane2-width: calc((min(100vw, 1200px) - var(--sidebar-width)) / 2);
    --tabbar-height: 0px;
  }

  .app {
    max-width: 1200px;
    padding-left: 0;
    height: 100vh;
    height: 100dvh;
    display: grid;
    grid-template-columns: var(--sidebar-width) var(--pane2-width) 1fr;
    grid-template-rows: 1fr auto;
    overflow: hidden;
  }

  /* Sidebar: #screen-home stays mounted and visible here regardless of the
     active route — Home has no destination of its own on desktop, it IS
     the sidebar. */
  #screen-home.hidden {
    display: flex !important;
  }

  #screen-home {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    overflow-y: auto;
    border-right: 1px solid var(--border);
  }

  /* The stats row and the "Vandaag" due-list below the lists grid belong to
     the mobile Home screen only — the sidebar is just greeting, search,
     lists and the nav menu underneath. */
  #screen-home #homeStatsRow,
  #screen-home .home-section-heading,
  #screen-home .home-section-heading + div {
    display: none;
  }

  /* The lists grid becomes a vertical row list instead of a horizontally
     scrolling tile carousel — colors/icon/counts all carried over. */
  #screen-home .lists-grid {
    display: flex;
    flex-direction: column;
    overflow: visible;
    scroll-snap-type: none;
    gap: 2px;
  }

  #screen-home .lists-nav-dots {
    display: none;
  }

  #screen-home .list-tile {
    width: 100%;
    aspect-ratio: auto;
    flex-direction: row;
    align-items: center;
    background: transparent;
    border-radius: var(--radius-sm);
    padding: 8px;
    gap: 12px;
  }

  #screen-home .list-tile:hover {
    background: var(--accent-soft);
  }

  #screen-home .list-tile-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--tile-color, var(--accent-soft));
    color: rgba(45, 42, 38, 0.7);
  }

  /* The generic #screen-home .list-tile rule above makes every row's own
     background transparent (just a hover tint) for the compact desktop
     list — which left this tile's white text sitting on the near-white
     page background, unreadable (gebruikerstest 2026-09-23, bevinding 5).
     Restore its gradient card look here instead of relying on the
     mobile-only .list-tile-premium-teaser rule this selector outranks. */
  #screen-home .list-tile-premium-teaser {
    background: linear-gradient(155deg, var(--accent), var(--accent-dark));
    padding: 10px 12px;
  }

  #screen-home .list-tile-premium-teaser:hover {
    background: linear-gradient(155deg, var(--accent), var(--accent-dark));
    opacity: 0.92;
  }

  #screen-home .list-tile-premium-teaser .list-tile-icon {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
  }

  #screen-home .list-tile-icon svg {
    width: 16px;
    height: 16px;
  }

  #screen-home .list-tile-text {
    flex: 1;
    min-width: 0;
  }

  #screen-home .list-tile-progress {
    margin-top: 4px;
  }

  /* Nav menu (Planning / Inbox / Instellingen), docked under the lists at
     the bottom of the sidebar column — no Home entry here, the sidebar
     already is Home. */
  #bottomNav {
    position: static;
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    height: auto;
    border-top: 1px solid var(--border);
    border-right: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  #bottomNav .tab[data-nav="home"] {
    display: none;
  }

  .bottom-tabs-inner {
    max-width: none;
    margin: 0;
    height: auto;
    flex-direction: column;
    align-items: stretch;
    padding: 8px 12px 12px;
    gap: 4px;
  }

  .bottom-tabs .tab {
    flex: none;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 14px;
  }

  .bottom-tabs .tab svg {
    width: 20px;
    height: 20px;
  }

  .bottom-tabs .tab.active {
    background: var(--accent-soft);
  }

  .bottom-tabs .tab.active::before {
    display: none;
  }

  /* Pane 2: Planning by default; Inbox, Instellingen (and its own
     sub-pages) and an opened list's tasks all replace it here too, always
     at this same fixed width. */
  #screen-today,
  #screen-assigned,
  #screen-overdue,
  #screen-inbox,
  #screen-settings,
  #screen-profile,
  #screen-email-settings,
  #screen-push-settings,
  #screen-mcp-help,
  #screen-premium-admin,
  #screen-account-detail,
  #screen-listdetail,
  #screen-assigned,
  #screen-overdue {
    grid-column: 2;
    grid-row: 1 / -1;
    min-height: 0;
    overflow-y: auto;
    border-right: 1px solid var(--border);
  }

  /* Pane 3: a task/note's detail, or the new/edit form. */
  #screen-detail,
  #screen-lists {
    grid-column: 3;
    grid-row: 1 / -1;
    min-height: 0;
    overflow-y: auto;
  }

  .fab,
  .fab-menu {
    right: max(20px, calc((100vw - 1200px) / 2 + 20px));
  }

  .task-chat-form {
    left: calc(max(0px, (100vw - 1200px) / 2) + var(--sidebar-width) + var(--pane2-width));
    right: max(0px, calc((100vw - 1200px) / 2));
  }

  /* On mobile the add/edit form is a bottom sheet that slides up over
     whatever page it was opened from, dimmed by a backdrop. On desktop
     that popup styling reads as an odd overlay, so it becomes a normal
     page instead: no backdrop, no rounded "sheet" chrome, no slide-in —
     it just occupies pane 3 (or pane 2 when app.js finds pane 2 itself
     empty and adds .sheet-pane2, e.g. the "+" pressed with nothing open
     there), like screen-detail/screen-lists do. */
  .sheet-backdrop {
    display: none;
  }

  #screen-task-form.bottom-sheet,
  #screen-task-form.bottom-sheet.sheet-open {
    position: static;
    grid-column: 3;
    grid-row: 1 / -1;
    min-height: 0;
    width: auto;
    max-width: none;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    transition: none;
  }

  #screen-task-form.bottom-sheet.sheet-pane2 {
    grid-column: 2;
  }

  #screen-task-form.bottom-sheet .subscreen-header {
    padding-top: calc(env(safe-area-inset-top, 0) + 16px);
    border-radius: 0;
  }
}