:root {
  --bg: #0f1115;
  --card-bg: #1a1d24;
  --text: #eef0f3;
  --text-dim: #9aa1ac;
  --border: #2a2e37;
  --keep: #2fae66;
  --dismiss: #d9534f;
  --skip: #4a90d9;
  --accent: #eef0f3;
  font-size: 16px;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f5f6f8;
    --card-bg: #ffffff;
    --text: #1a1d24;
    --text-dim: #5a6270;
    --border: #dde1e6;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  height: 100%;
  overflow: hidden;
  /* Android/Chrome paints a grey flash rectangle on every tap without this,
     which reads as lag on an otherwise instant UI. */
  -webkit-tap-highlight-color: transparent;
  /* Kill the rubber-band / pull-to-refresh chain. In an installed PWA on
     Android, dragging down at the top of a list otherwise reloads the whole
     app and throws away the view you were in. */
  overscroll-behavior: none;
}

body {
  display: flex;
  flex-direction: column;
  /* Fixed height (not min-height) so the page itself never grows taller
     than the viewport and never scrolls as a whole — only .home-view,
     .card-summary and the deck scroll internally.
     Use 100svh (the *smallest* viewport height — browser UI shown, system
     nav bar reserved), NOT 100dvh. dvh is dynamic: right after a full
     reload (e.g. the sandbox reset button's location.reload()) Android can
     resolve 100dvh to the taller "chrome-retracted" viewport, which pushes
     the fixed bottom tab bar down behind the phone's navigation bar. svh is
     always the safe minimum, and since the page never scrolls there's no
     gap tradeoff. 100vh / 100dvh below are ordered fallbacks. */
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  max-width: 480px;
  margin: 0 auto;
  overflow: hidden;
  /* viewport-fit=cover + apple-mobile-web-app-status-bar-style=black-translucent
     means the page starts at y=0 UNDERNEATH the notch/status bar once the app
     is installed to the home screen — the greeting and the back buttons sat
     behind the clock and battery on every notched iPhone. Padding the shell
     once fixes every screen at the same time (box-sizing: border-box keeps the
     100svh height exact). The left/right insets keep content clear of the
     rounded corners and the camera cutout in landscape. */
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

.mini-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  flex-shrink: 0;
}

.back-btn {
  appearance: none;
  border: none;
  background: none;
  color: var(--text);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  touch-action: manipulation;
}

.back-btn:active { background: var(--card-bg); }
.back-btn svg { width: 22px; height: 22px; }

.feed-status {
  font-size: 0.8rem;
  color: var(--text-dim);
  flex: 1;
}

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

.hdr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface, transparent);
  color: var(--text);
  cursor: pointer;
  padding: 0;
}

.hdr-btn svg { width: 20px; height: 20px; }
.hdr-btn:active { transform: scale(0.94); }

.push-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.push-sub { font-family: monospace; font-size: 0.72rem; word-break: break-all; }

/* ---- single-shell app + views ---- */

#app {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

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

.view[hidden] { display: none; }

/* Every internal scroller stops its scroll at its own edge instead of handing
   the leftover momentum to the page behind it — no bounce-through, and no
   pull-to-refresh reload when a list is already at the top. */
.home-view,
.calendar-view,
.settings-view,
.util-launcher,
.card-summary,
.detail-body,
.cal-week-scroll { overscroll-behavior: contain; }

.home-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 18px;
  padding: 16px;
  text-align: left;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.home-hero {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ---- hero row: the small app tiles ---- */

.hero-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

/* Mini weather pill: sits on the greeting line (2026-09-04), tap opens the
   forecast accordion under the tile row. */
.mini-weather-tile {
  appearance: none;
  background: var(--card-bg);
  border: 1.5px solid transparent;
  border-radius: 999px;
  padding: 6px 12px 6px 10px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
  touch-action: manipulation;
  text-align: left;
}

.mini-weather-tile:active { transform: scale(0.97); }
.mini-weather-tile.tile-active { border-color: var(--skip); }

.mwt-bottom {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mwt-icon {
  width: 22px;
  height: 22px;
  color: #d9a441;
  flex-shrink: 0;
}

.mwt-icon svg { width: 100%; height: 100%; display: block; }

.mwt-temp {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}

.hero-row .loop-card,
.hero-row .done-card {
  flex: 1;
  min-width: 0;
}

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

.home-greeting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.home-date {
  font-size: 0.78rem;
  color: var(--text-dim);
}

.home-greeting {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
}

/* ---- loop card (Today, not yet done) ---- */

.loop-card {
  appearance: none;
  border: 1.5px solid transparent;
  background: var(--card-bg);
  border-radius: 18px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  width: 100%;
}

.loop-card:active { transform: scale(0.99); }

.ring {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.ring svg { display: block; }

.ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text);
}

.loop-card-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.loop-card-title {
  font-size: 0.95rem;
  font-weight: 600;
}

.loop-card-sub {
  font-size: 0.82rem;
  color: var(--skip);
}

/* ---- done card (Today, loop finished) ---- */

.done-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: var(--card-bg);
  border-radius: 16px;
  padding: 24px 20px;
  text-align: center;
}

.done-badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(47, 174, 102, 0.16);
  color: var(--keep);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.done-badge svg { width: 28px; height: 28px; }

.done-title {
  font-size: 1.1rem;
  font-weight: 700;
}

.done-counts {
  font-size: 0.85rem;
  color: var(--text-dim);
}

.done-copy-btn {
  width: 100%;
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.done-hint {
  font-size: 0.72rem;
  color: var(--text-dim);
}

.done-again-btn {
  margin-top: 2px;
}

.streak-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--bg);
  border-radius: 999px;
  padding: 5px 12px;
  color: #d9a441;
  font-size: 0.85rem;
}

.streak-icon {
  width: 15px;
  height: 15px;
}

.practice-openlink {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--text-dim);
  text-decoration: none;
  white-space: nowrap;
}

.practice-frame-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
}

.practice-frame {
  flex: 1;
  width: 100%;
  border: none;
  background: var(--bg);   /* was #fff: a white flash before the app painted (2026-09-08) */
}

main#deckArea {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 12px;
  overflow: hidden;
}

.progress {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.progress-dots {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  flex-shrink: 0;
}

.dot-done { background: var(--keep); border-color: var(--keep); }
.dot-current { width: 8px; height: 8px; background: var(--text); border-color: var(--text); }

.progress-fraction {
  font-size: 0.78rem;
  color: var(--text-dim);
  flex-shrink: 0;
}

.card-wrap {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
}

.card-stack-shadow {
  position: absolute;
  inset: 10px 6px -8px 6px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  opacity: 0.5;
  border-radius: 18px;
  transform: rotate(1.5deg);
  z-index: 0;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1), opacity 0.3s ease, inset 0.3s ease;
}
/* while the top card flies out, the sliver rises to full size = next card */
.card-stack-shadow.stack-promote {
  transform: rotate(0deg) translateY(-10px) scale(1.01);
  opacity: 1;
}

.card {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
  min-height: 0;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.card-header {
  margin-bottom: 8px;
}

.card-title {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 6px 0;
  line-height: 1.3;
}

.card-meta {
  font-size: 0.8rem;
  color: var(--text-dim);
}

.card-summary {
  flex: 1;
  overflow-y: auto;
  touch-action: pan-y;
  font-size: 0.95rem;
  line-height: 1.5;
  white-space: pre-wrap;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
  margin: 8px 0;
  -webkit-overflow-scrolling: touch;
}

.card-link {
  display: inline-block;
  margin-top: 4px;
  color: var(--skip);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
}

.card-link:active { opacity: 0.7; }

/* Luisterinus: podcastknop + speler op de digest-kaart. De knop draagt ook
   .card-link voor het uiterlijk; dit zijn alleen de button-resets. */
.podcast-row { margin-top: 2px; }
.podcast-btn { border: none; background: none; padding: 0; font-family: inherit; cursor: pointer; }
.podcast-btn:disabled { opacity: 0.5; }
.podcast-status { display: inline-block; margin-top: 4px; font-size: 0.9rem; color: var(--text-dim); }
.podcast-player { width: 100%; height: 32px; margin-top: 6px; }

/* decision feedback: a pill that pops in the card's centre (was a full-card
   colour wash — dated) */
.decision-flash {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  padding: 10px 24px;
  border-radius: 999px;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fff;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  transition: opacity 0.16s ease, transform 0.2s cubic-bezier(0.2, 0.8, 0.3, 1);
  z-index: 3;
}
.decision-flash.show { opacity: 0.95; transform: translate(-50%, -50%) scale(1); }

/* On the Triage tab the capture FAB would sit on top of the action bar's
   Undo button — hide it there (the bar has its own Note; + is one tab away). */
body:has(#view-triage:not([hidden])) .capture-fab { display: none; }

/* swipe decides keep/nope; this bar carries the rest, icons + tiny labels */
.tri-swipe-hint {
  text-align: center;
  font-size: 0.7rem;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  padding: 8px 0 6px;
  flex-shrink: 0;
  opacity: 0.8;
}

.tri-bar {
  display: flex;
  gap: 2px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 6px;
  flex-shrink: 0;
}

.tri-act {
  appearance: none;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  border-radius: 15px;
  padding: 9px 2px 7px;
  color: var(--text-dim);
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s ease, transform 0.1s ease;
}
.tri-act:active { transform: scale(0.93); background: var(--surface, rgba(127, 127, 127, 0.12)); }
.tri-act:disabled { opacity: 0.3; }
.tri-act svg { width: 22px; height: 22px; }
.tri-act-label { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.02em; }
.tri-act-task { color: var(--skip); }
.tri-act-project { color: var(--accent, var(--skip)); }

/* triage history sheet */
.tri-hist-list { max-height: 55vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.tri-hist-empty { color: var(--text-dim); font-size: 0.9rem; text-align: center; padding: 14px 4px; }
.tri-hist-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
}
.tri-hist-row:last-child { border-bottom: none; }
.tri-hist-action { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.05em; flex-shrink: 0; min-width: 58px; }
.tri-hist-keep { color: var(--keep); }
.tri-hist-dismiss { color: var(--dismiss); }
.tri-hist-task { color: var(--skip); }
.tri-hist-project { color: var(--accent, var(--skip)); }
.tri-hist-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tri-hist-date { color: var(--text-dim); font-size: 0.72rem; flex-shrink: 0; }

/* ---- tappable dashboard rows ---- */
.dash-item-tap { cursor: pointer; border-radius: 10px; }
.dash-item-tap:active { background: var(--surface, rgba(127,127,127,0.10)); }
.dash-chev { margin-left: auto; color: var(--text-dim); font-size: 1.15rem; line-height: 1; padding-left: 6px; }
.dash-subprog { font-size: 0.72rem; color: var(--text-dim); border: 1px solid var(--border); border-radius: 8px; padding: 1px 6px; }

/* ---- de-emphasized compliance radar strip ---- */
.radar-strip { margin-top: 0; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.radar-strip-urgent { border-color: var(--dismiss); }
.radar-strip-head {
  width: 100%; appearance: none; background: transparent; border: none; cursor: pointer;
  display: flex; align-items: center; gap: 8px; padding: 11px 13px; color: var(--text);
}
.radar-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); flex-shrink: 0; }
.radar-dot-urgent { background: var(--dismiss); }
.radar-strip-label { font-size: 0.9rem; font-weight: 600; }
.radar-strip-status { font-size: 0.8rem; color: var(--text-dim); }
.radar-strip-urgent .radar-strip-status { color: var(--dismiss); }
.radar-strip-chev { margin-left: auto; color: var(--text-dim); transition: transform 0.15s ease; }
.radar-strip-open .radar-strip-chev { transform: rotate(90deg); }
.radar-strip-body { padding: 0 13px 12px; }
.radar-weekly { margin: 8px 0 10px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 12px; display: flex; flex-direction: column; gap: 4px; }
.radar-weekly-head { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); }
.radar-weekly-line { font-size: 0.85rem; line-height: 1.45; color: var(--text); }

/* ---- item detail sheet ---- */
.detail-overlay {
  position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,0.4);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transition: opacity 0.2s ease;
}
.detail-overlay.show { opacity: 1; }
.detail-panel {
  width: 100%; max-width: 480px; height: 92%; background: var(--bg);
  border-top-left-radius: 20px; border-top-right-radius: 20px;
  display: flex; flex-direction: column;
  transform: translateY(24px); transition: transform 0.2s ease;
}
.detail-overlay.show .detail-panel { transform: translateY(0); }
.detail-header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; flex-shrink: 0; }
.detail-close {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border);
  background: transparent; color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.detail-close svg { width: 20px; height: 20px; }
.detail-kind { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); }
.detail-body { flex: 1; overflow-y: auto; padding: 4px 18px calc(24px + env(safe-area-inset-bottom, 0px)); }
.detail-title { font-size: 1.35rem; font-weight: 700; margin: 4px 0 6px; color: var(--text); }
.detail-info { font-size: 0.85rem; color: var(--text-dim); margin: 0 0 10px; }
.detail-section-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); margin: 20px 0 8px; }
.detail-seg { display: flex; gap: 6px; }
.detail-seg-btn {
  flex: 1; appearance: none; border: 1px solid var(--border); background: transparent;
  color: var(--text-dim); border-radius: 10px; padding: 10px; font-size: 0.88rem; cursor: pointer;
}
.detail-seg-btn.active { border-color: var(--accent, var(--skip)); color: var(--text); font-weight: 600; background: var(--surface, rgba(127,127,127,0.08)); }
.detail-empty { font-size: 0.85rem; color: var(--text-dim); margin: 2px 0; }
.detail-subs { display: flex; flex-direction: column; gap: 2px; }
.detail-sub { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.detail-check {
  width: 24px; height: 24px; flex-shrink: 0; border-radius: 7px; border: 1.5px solid var(--border);
  background: transparent; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.detail-check.checked { background: var(--keep); border-color: var(--keep); }
.detail-check svg { width: 15px; height: 15px; }
.detail-sub-text { flex: 1; font-size: 0.95rem; color: var(--text); }
.detail-sub.done .detail-sub-text { text-decoration: line-through; color: var(--text-dim); }
.detail-sub-del { background: none; border: none; color: var(--text-dim); font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.detail-add-row { display: flex; gap: 8px; margin-top: 8px; }
.detail-input {
  flex: 1; box-sizing: border-box; border: 1px solid var(--border); border-radius: 10px;
  background: var(--card-bg, transparent); color: var(--text); padding: 10px 12px; font-size: 0.95rem; font-family: inherit;
}
.detail-note-input { resize: none; }
.detail-add-btn {
  appearance: none; border: none; border-radius: 10px; background: var(--accent, var(--skip));
  color: #fff; padding: 0 16px; font-size: 0.9rem; font-weight: 600; cursor: pointer; align-self: stretch;
}
.detail-notes { display: flex; flex-direction: column; gap: 8px; }
.detail-note { border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; }
.detail-note-text { font-size: 0.92rem; color: var(--text); white-space: pre-wrap; }
.detail-note-ts { font-size: 0.72rem; color: var(--text-dim); margin-top: 4px; }

/* ---- quick-capture FAB + sheet ---- */
.capture-fab {
  position: fixed;
  right: 16px;
  bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  z-index: 55;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--accent, var(--skip));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
  cursor: pointer;
}
.capture-fab svg { width: 26px; height: 26px; }
.capture-fab:active { transform: scale(0.94); }

.capture-heading { font-size: 1.05rem; font-weight: 700; color: var(--text); padding: 4px 6px 2px; }
.capture-textarea {
  width: 100%;
  box-sizing: border-box;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card-bg, transparent);
  color: var(--text);
  padding: 12px;
  font-size: 1rem;
  font-family: inherit;
  resize: none;
}
.capture-seg { display: flex; gap: 6px; }
.capture-seg-btn {
  flex: 1;
  appearance: none;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  border-radius: 10px;
  padding: 9px;
  font-size: 0.9rem;
  cursor: pointer;
}
.capture-seg-btn.active { border-color: var(--accent, var(--skip)); color: var(--text); font-weight: 600; }
.capture-send { width: 100%; padding: 13px; }
.capture-when { display: flex; flex-direction: column; gap: 6px; }
.capture-when-label { font-size: 0.8rem; font-weight: 600; color: var(--text-dim); padding: 0 2px; }
.capture-when-date { width: 100%; }

.capture-history-link {
  appearance: none;
  width: 100%;
  border: none;
  background: none;
  color: var(--text-dim);
  padding: 8px;
  font-size: 0.85rem;
  cursor: pointer;
}
.capture-history-link:active { opacity: 0.7; }

/* ---- card "more" bottom-sheet menu ---- */
.card-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.card-menu-backdrop.show { opacity: 1; }

.card-menu {
  width: 100%;
  max-width: 480px;
  background: var(--card-bg, var(--bg));
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  border: 1px solid var(--border);
  border-bottom: none;
  padding: 10px 10px calc(12px + env(safe-area-inset-bottom, 0px));
  transform: translateY(16px);
  transition: transform 0.18s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.card-menu-backdrop.show .card-menu { transform: translateY(0); }

.card-menu-item {
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 12px;
  text-align: left;
  padding: 14px 14px;
  color: var(--text);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.card-menu-item:active { background: var(--surface, rgba(127,127,127,0.12)); }
.cm-label { font-size: 1rem; font-weight: 600; }
.cm-sub { font-size: 0.78rem; color: var(--text-dim); }

.card-menu-cancel {
  appearance: none;
  margin-top: 6px;
  background: var(--surface, rgba(127,127,127,0.10));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 13px;
  color: var(--text-dim);
  font-size: 0.95rem;
  cursor: pointer;
}

.card-link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
}

.btn {
  appearance: none;
  border: none;
  border-radius: 12px;
  padding: 16px 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  display: block;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
}

.btn:active { transform: scale(0.97); }

.btn-undo {
  background: none;
  color: var(--text-dim);
  font-size: 0.9rem;
  padding: 10px 14px;
  text-decoration: underline;
}

.btn-undo:disabled {
  opacity: 0.35;
  text-decoration: none;
}

.complete-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  text-align: center;
}

.complete-view h2 {
  margin: 0;
  font-size: 1.3rem;
}

.complete-counts {
  color: var(--text-dim);
  font-size: 0.95rem;
}

.complete-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn-primary { background: var(--skip); color: #fff; }
.btn-ghost { background: none; border: 1px solid var(--border); color: var(--text); }

.hidden { display: none !important; }

.bottombar {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.bottombar .btn {
  flex: 1;
}

.toast {
  position: fixed;
  bottom: calc(74px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--bg);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.85rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 10;
}

.toast.show {
  opacity: 1;
}

.empty-state {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  text-align: center;
  padding: 24px;
}

/* ---- icon tile grid + inline accordion (Today dashboard) ---- */

.dashboard-area {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Rows of tiles, not a CSS grid — each row is its own flex container so
   the shared accordion element can be inserted directly after whichever
   row holds the tapped tile, instead of always landing at the bottom of
   one big grid. */
.tile-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tile-row {
  display: flex;
  gap: 12px;
}

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

.tile {
  appearance: none;
  background: var(--card-bg);
  border: 1.5px solid transparent;
  border-radius: 18px;
  padding: 18px 8px 14px;
  min-height: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  touch-action: manipulation;
  position: relative;
}

.tile:active { transform: scale(0.97); }

.tile-active {
  border-color: var(--skip);
}

/* Icon + label wrapper. Column-centered by default (matches the plain
   square tiles); wide tiles (the Today/weather tile) lay it out as a row
   at the top instead, leaving room for extra content — the weather strip
   — stacked below. */
.tile-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.tile-icon {
  width: 30px;
  height: 30px;
}

.tile-icon svg { width: 100%; height: 100%; display: block; }

.tile-tasks .tile-icon { color: var(--skip); }
.tile-projects .tile-icon { color: var(--keep); }
.tile-radar .tile-icon { color: var(--dismiss); }
.tile-chores .tile-icon { color: #7cb87c; }
.tile-todos .tile-icon { color: #8fb3e0; }
.tile-backlog .tile-icon { color: #b48ead; }

.tile-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
}

/* ---- wide tile (full-width row — currently just urgent cards) ---- */

.tile-wide {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 14px 16px 16px;
  min-height: 0;
  gap: 12px;
}

.tile-wide .tile-head {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.tile-wide .tile-icon { width: 22px; height: 22px; }
.tile-wide .tile-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); }

.tile-badge {
  position: absolute;
  top: 9px;
  right: 9px;
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 7px;
  min-width: 16px;
  text-align: center;
  color: #fff;
}

.tile-badge-blue { background: var(--skip); }
.tile-badge-green { background: var(--keep); }
.tile-badge-red { background: var(--dismiss); }
.tile-badge-amber { background: #d9a441; color: #1a1d24; }
.tile-badge-gray { background: var(--border); color: var(--text-dim); }

.accordion-body:empty { display: none; }

.accordion-card {
  background: var(--card-bg);
  border-radius: 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.accordion-card-title {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}

/* ---- weather (inside the Weather tile's accordion card) ---- */

.weather-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

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

.weather-row-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: #d9a441;
}

.weather-row-icon svg { width: 100%; height: 100%; display: block; }

.weather-row-label {
  width: 66px;
  flex-shrink: 0;
  font-size: 0.85rem;
  font-weight: 600;
}

.weather-row-cond {
  flex: 1;
  min-width: 0;
  font-size: 0.82rem;
  color: var(--text-dim);
}

.weather-row-temp {
  font-size: 1rem;
  font-weight: 700;
  flex-shrink: 0;
}

.weather-day-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  border-top: 1px solid var(--border);
}

.weather-day-row:first-of-type { border-top: none; }

.weather-day-icon {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  color: #d9a441;
}

.weather-day-icon svg { width: 100%; height: 100%; display: block; }

.weather-day-label {
  width: 36px;
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 600;
}

.weather-day-cond {
  flex: 1;
  min-width: 0;
  font-size: 0.78rem;
  color: var(--text-dim);
}

.weather-day-temp {
  font-size: 0.82rem;
  color: var(--text-dim);
  flex-shrink: 0;
}

/* ---- shared inline add/edit form (chores + to-dos) ---- */

.inline-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
  margin-top: 2px;
}

.inline-form-row {
  display: flex;
  gap: 8px;
}

.field-input,
.field-select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 12px;
  font-family: inherit;
  /* 16px is a hard iOS requirement, not a taste call: Safari zooms the whole
     page in when you focus a field smaller than this and never zooms back,
     which left the app scrolled sideways after every edit on iPhone/iPad.
     Matches .capture-textarea, which was already 1rem. */
  font-size: 1rem;
  min-height: 44px;
}

.field-input { width: 100%; }
.field-input-narrow { width: 72px; flex-shrink: 0; text-align: center; }
.field-select { flex: 1; min-width: 0; }
.field-select-wide { flex: 2; }

.inline-form-label {
  display: flex;
  align-items: center;
  font-size: 0.88rem;
  color: var(--text-dim);
  flex-shrink: 0;
}

.inline-form-row .btn,
.inline-form > .btn {
  width: 100%;
}

/* ---- weekly chores (inside the Chores tile's accordion card) ---- */

.chore-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.chore-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chore-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.chore-name-btn {
  appearance: none;
  border: none;
  background: none;
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 600;
  padding: 4px 0;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}

.chore-del-btn {
  appearance: none;
  border: none;
  background: none;
  color: var(--text-dim);
  font-size: 1.2rem;
  line-height: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  touch-action: manipulation;
}

.chore-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chore-freq {
  font-size: 0.78rem;
  color: var(--text-dim);
}

.chore-due-chip {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: rgba(217, 83, 79, 0.18);
  color: var(--dismiss);
  border-radius: 999px;
  padding: 2px 8px;
}

.chore-check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}

.chore-check-label {
  font-size: 0.82rem;
  color: var(--text-dim);
}

/* ---- history (shared by chores + to-dos accordion cards) ---- */

.history-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.82rem;
}

.history-row-name {
  color: var(--text);
  flex: 1;
  min-width: 0;
}

.history-row-date {
  color: var(--text-dim);
  font-size: 0.75rem;
  flex-shrink: 0;
}

/* Restore button in the History view */
.cal-restore {
  appearance: none;
  border: 1px solid var(--skip);
  background: transparent;
  color: var(--skip);
  border-radius: 9px;
  padding: 6px 12px;
  font-size: 0.82rem;
  cursor: pointer;
  margin-left: auto;
  align-self: center;
  flex-shrink: 0;
}
.cal-restore:active { background: var(--skip); color: #fff; }

/* Compact variant for the single-line log rows further down History, so an
   undo button doesn't make those rows as tall as the Restore cards above. */
.cal-undo {
  padding: 3px 9px;
  font-size: 0.72rem;
  border-radius: 7px;
  margin-left: 4px;
}

/* ---- one-off to-dos (inside the To-dos tile's accordion card) ---- */

.todo-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.todo-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}

.todo-check {
  appearance: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: none;
  color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  flex-shrink: 0;
}

.todo-check svg { width: 16px; height: 16px; }

.todo-check-done {
  background: var(--keep);
  border-color: var(--keep);
  color: #fff;
}

.todo-text-wrap {
  flex: 1;
  min-width: 0;
}

.todo-text {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text);
}

.todo-text-done {
  color: var(--text-dim);
  text-decoration: line-through;
}

.todo-due {
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-top: 1px;
}

.todo-del-btn {
  appearance: none;
  border: none;
  background: none;
  color: var(--text-dim);
  font-size: 1.2rem;
  line-height: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  touch-action: manipulation;
}

/* ---- urgent home-screen cards (due-soon chores, due-today to-dos) ---- */

.tile-urgent {
  cursor: default;
}

.tile-urgent .tile-head {
  justify-content: space-between;
}

.tile-urgent .tile-icon { color: #d9a441; }

.urgent-text-wrap {
  flex: 1;
  min-width: 0;
}

.urgent-text {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
}

.urgent-sub {
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-top: 2px;
}

.urgent-check {
  appearance: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: none;
  color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  flex-shrink: 0;
}

.urgent-check:active {
  background: var(--keep);
  border-color: var(--keep);
  color: #fff;
}

.urgent-check svg { width: 18px; height: 18px; }

.note-btn {
  appearance: none;
  border: 1px solid var(--border);
  background: none;
  color: var(--text-dim);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  touch-action: manipulation;
}

.note-btn.has-note {
  border-color: var(--skip);
  color: var(--skip);
}

.note-icon {
  width: 18px;
  height: 18px;
}

.note-input {
  width: 100%;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 1rem;   /* see .field-input — under 16px iOS zooms on focus */
  resize: vertical;
  margin-top: 6px;
  flex-shrink: 0;
}

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

.dash-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.dash-more-btn {
  appearance: none;
  border: none;
  background: none;
  color: var(--skip);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 4px;
  text-align: left;
  cursor: pointer;
  align-self: flex-start;
  touch-action: manipulation;
}

.dash-more-items {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.dash-more-items.hidden { display: none; }

.dash-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.dash-item-title {
  font-size: 0.92rem;
  font-weight: 500;
  flex: 1;
  min-width: 0;
}

.dash-hint {
  font-size: 0.8rem;
  color: var(--text-dim);
  padding-left: 2px;
}

.dash-date {
  font-size: 0.72rem;
  color: var(--text-dim);
  white-space: nowrap;
}

.dash-meta {
  font-size: 0.78rem;
  color: var(--text-dim);
}

.dash-empty {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.chip {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

.chip-doing, .chip-active { background: rgba(47, 174, 102, 0.16); color: var(--keep); }
.chip-todo { background: rgba(74, 144, 217, 0.16); color: var(--skip); }
.chip-paused { background: rgba(217, 164, 65, 0.16); color: #d9a441; }
.chip-idea-stage { background: var(--border); color: var(--text-dim); }
.chip-idea { background: var(--border); color: var(--text-dim); }
.chip-backlog { background: color-mix(in srgb, #b48ead 22%, transparent); color: #b48ead; }
.chip-done { background: rgba(47, 174, 102, 0.16); color: var(--keep); }
.chip-cancelled { background: var(--border); color: var(--text-dim); text-decoration: line-through; }

.project-row { padding: 2px 0; }
.project-dim .dash-item-title { color: var(--text-dim); font-weight: 400; }

.radar-headline {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
}

.dl-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  border-top: 1px solid var(--border);
}

.dl-row:first-of-type { border-top: none; }

.dl-days {
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 6px;
  padding: 2px 6px;
  min-width: 34px;
  text-align: center;
  flex-shrink: 0;
}

.dl-soon { background: rgba(217, 83, 79, 0.18); color: var(--dismiss); }
.dl-near { background: rgba(217, 164, 65, 0.18); color: #d9a441; }
.dl-far { background: var(--border); color: var(--text-dim); }

.dl-label {
  flex: 1;
  font-size: 0.85rem;
  min-width: 0;
}

.notes-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* ---- tinder swipe ---- */

.card {
  touch-action: pan-y;
  will-change: transform;
}

.card.card-dragging { transition: none !important; }

.card.card-animating {
  transition: transform 0.32s cubic-bezier(0.3, 0.7, 0.4, 1), opacity 0.3s ease-out;
}

/* released without deciding: spring back with a touch of overshoot */
.card.card-restoring {
  transition: transform 0.28s cubic-bezier(0.18, 0.89, 0.32, 1.18);
}

/* fresh card slides up into place */
.card.card-enter {
  animation: tri-card-in 0.26s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes tri-card-in {
  from { transform: translateY(12px) scale(0.965); opacity: 0.2; }
  to { transform: none; opacity: 1; }
}

.swipe-badge {
  position: absolute;
  top: 18px;
  padding: 4px 12px;
  border: 3px solid;
  border-radius: 8px;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

.swipe-badge-keep {
  left: 14px;
  color: var(--keep);
  border-color: var(--keep);
  transform: rotate(-12deg);
}

.swipe-badge-dismiss {
  right: 14px;
  color: var(--dismiss);
  border-color: var(--dismiss);
  transform: rotate(12deg);
}

/* ---- PIN gate ---- */

/* ---- Supabase login gate ---- */
.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.auth-box {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}
.auth-title { font-size: 1.5rem; font-weight: 700; color: var(--text); }
.auth-sub { font-size: 0.9rem; color: var(--text-dim); margin-bottom: 6px; }
.auth-input {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 14px;
  font-size: 1rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card-bg, transparent);
  color: var(--text);
}
.auth-primary { width: 100%; padding: 14px; font-size: 1rem; }
.auth-msg { font-size: 0.85rem; color: var(--text-dim); min-height: 1.1em; margin: 2px 0 0; }
.auth-msg-error { color: var(--dismiss); }
.auth-link {
  appearance: none;
  background: none;
  border: none;
  color: var(--accent, var(--skip));
  font-size: 0.9rem;
  cursor: pointer;
  padding: 6px;
}

.pin-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}

.pin-overlay.pin-ok { opacity: 0; }

.pin-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 24px;
  width: 100%;
  max-width: 300px;
}

.pin-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
}

.pin-dots {
  display: flex;
  gap: 18px;
}

.pin-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--text-dim);
  transition: background 0.1s ease, border-color 0.1s ease;
}

.pin-dot.filled {
  background: var(--text);
  border-color: var(--text);
}

.pin-shake { animation: pin-shake 0.3s ease; }

@keyframes pin-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-9px); }
  40% { transform: translateX(9px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}

.pin-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
}

.pin-key {
  appearance: none;
  border: none;
  background: var(--card-bg);
  color: var(--text);
  font-size: 1.5rem;
  font-weight: 500;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  transition: background 0.1s ease, transform 0.05s ease;
}

.pin-key:active {
  background: var(--border);
  transform: scale(0.94);
}

.pin-key-back {
  background: none;
  font-size: 1.3rem;
  color: var(--text-dim);
}

/* ---- task detail line ---- */

.dash-detail {
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--text);
  padding: 2px 0 0 2px;
}

/* ---- bottom tab bar ---- */

.tabbar {
  display: flex;
  border-top: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.tab-btn {
  flex: 1;
  appearance: none;
  border: none;
  background: none;
  color: var(--text-dim);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px 8px;
  min-height: 56px;
  font-size: 0.7rem;
  cursor: pointer;
  position: relative;
  touch-action: manipulation;
}

.tab-btn.active { color: var(--text); }

.tab-icon {
  width: 24px;
  height: 24px;
}

.tab-badge {
  position: absolute;
  top: 2px;
  right: calc(50% - 22px);
  background: var(--dismiss);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 5px;
  min-width: 15px;
  text-align: center;
  line-height: 1.3;
}

/* ---- view transitions (progressive enhancement, no-op if unsupported) ----
   In-app view switches (app.js) and the wake-up overlay: a quick fade. Named
   explicitly so design.css's app-launch zoom (cross-document) doesn't leak in. */

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.18s;
  animation-timing-function: ease-out;
}


.sandbox-reset-btn {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top, 0px));
  right: 8px;
  z-index: 101;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #d9a441;
  background: var(--card-bg);
  color: #d9a441;
  font-size: 1.15rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
}

.sandbox-reset-btn:active {
  transform: scale(0.94);
}

/* ---- calendar tab ---- */

.calendar-view {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 14px 24px;
}
/* Timeline views (week/day/etc.) fill the exact available height and scroll
   INTERNALLY (so the all-day row can stay frozen and there's no leftover
   empty margin at the bottom). Other views keep the outer scroll above. */
.calendar-view.cal-fill { overflow: hidden; padding: 10px 12px 0; }
.calendar-view.cal-fill .cal-week { flex: 1; min-height: 0; }

.cal-headbox { margin-bottom: 8px; }
.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.cal-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.cal-today-btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}
.cal-seg {
  display: flex;
  gap: 3px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
}
.cal-seg-btn {
  appearance: none;
  border: none;
  background: none;
  color: var(--text-dim);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
}
.cal-seg-btn.active { background: var(--skip); color: #fff; }

.cal-title { font-size: 1.15rem; font-weight: 700; }

.cal-nav {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  width: 40px;
  height: 40px;
  border-radius: 10px;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
.cal-nav:active { transform: scale(0.95); }

.cal-dow {
  display: grid;
  grid-template-columns: 26px repeat(7, 1fr);
  margin-bottom: 4px;
}
.cal-dow-cell {
  text-align: center;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-dim);
  padding: 2px 0;
}

.cal-grid {
  display: grid;
  grid-template-columns: 26px repeat(7, 1fr);
  /* every row the same height (the tallest cell sets it) — cells used to
     grow individually with their chips, giving lopsided month rows */
  grid-auto-rows: 1fr;
  gap: 3px;
}
.cal-grid-week .cal-cell { aspect-ratio: auto; min-height: 60px; }
/* NB: .cal-cell is defined LATER in this file, so this needs the compound
   selector to actually win (a bare .cal-wk silently lost every clash). */
.cal-cell.cal-wk {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 0.7rem;
  cursor: default;
  align-self: stretch;
  /* .cal-cell's 1:1 aspect-ratio + stretched row height made this cell ~row-height
     WIDE, sliding it under the Monday column (the "messed up" weeknumbers) */
  aspect-ratio: auto;
  padding: 0;
}
.cal-wk-head { text-align: center; }
.cal-cell-out { opacity: 0.4; }

.cal-cell {
  appearance: none;
  border: 1px solid transparent;
  background: var(--card-bg);
  color: var(--text);
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  padding: 0;
  touch-action: manipulation;
}
.cal-cell-empty { background: none; border: none; cursor: default; }
.cal-cell-num { font-size: 0.9rem; }
.cal-cell-today { border-color: var(--skip); }
.cal-cell-today .cal-cell-num { color: var(--skip); font-weight: 700; }
.cal-cell-selected { background: var(--skip); }
.cal-cell-selected .cal-cell-num { color: #fff; font-weight: 700; }

.cal-dots { display: flex; gap: 3px; height: 6px; align-items: center; }
.cal-dot { width: 6px; height: 6px; border-radius: 50%; }
.cal-dot-todo { background: var(--skip); }
.cal-dot-chore { background: #d9a441; }
.cal-dot-overdue { background: var(--dismiss); }
.cal-dot-done { background: var(--keep); }
.cal-cell-selected .cal-dot-todo { background: #fff; }
.cal-cell-selected .cal-dot-chore { background: #fff; }

/* Month cells that carry all-day items grow to fit tappable chips (the grid
   scrolls, so the square aspect is relaxed only in month view). */
.cal-cell-month { aspect-ratio: auto; min-height: 64px; justify-content: flex-start; align-items: stretch; padding: 4px 4px 5px; gap: 2px; overflow: hidden; }
.cal-cell-month .cal-cell-num { align-self: flex-start; padding-left: 3px; }
.cal-cell-month .cal-dots { align-self: flex-start; padding-left: 3px; }
.cal-cell-chips { display: flex; flex-direction: column; gap: 2px; width: 100%; margin-top: auto; }
.cal-cell-chip {
  font-size: 0.62rem; line-height: 1.3; padding: 1px 5px; border-radius: 4px;
  background: var(--skip); color: #fff; text-align: left; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-cell-chip.done { opacity: 0.55; text-decoration: line-through; }
.cal-cell-more { font-size: 0.6rem; color: var(--text-dim); padding-left: 3px; }
.cal-cell-selected .cal-cell-chip { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.9); }

/* day detail */
.cal-day {
  margin-top: 16px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.cal-day-title { font-size: 1rem; font-weight: 700; margin-bottom: 10px; }
.cal-empty { color: var(--text-dim); font-size: 0.9rem; margin: 4px 0 12px; }

.cal-item-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.cal-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
}
.cal-item-body { flex: 1; min-width: 0; }
.cal-item-title { font-size: 0.95rem; font-weight: 500; }
.cal-item-done { text-decoration: line-through; color: var(--text-dim); }
.cal-item-sub { font-size: 0.75rem; color: var(--text-dim); margin-top: 2px; }

.cal-check {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid var(--text-dim);
  background: none;
  color: #fff;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
.cal-check-done { background: var(--keep); border-color: var(--keep); }

.cal-edit {
  flex-shrink: 0;
  appearance: none;
  border: none;
  background: none;
  color: var(--text-dim);
  font-size: 1rem;
  padding: 6px;
  cursor: pointer;
}

.cal-add { margin-top: 4px; }
.cal-add-btn { width: 100%; }
.cal-pick { display: flex; flex-direction: column; gap: 8px; }
.cal-pick-label { font-size: 0.85rem; color: var(--text-dim); }
.cal-link {
  appearance: none; border: none; background: none;
  color: var(--text-dim); text-decoration: underline;
  font-size: 0.85rem; cursor: pointer; padding: 6px;
}
.btn-danger { background: var(--dismiss); color: #fff; }

/* ---- themes (explicit data-theme wins over prefers-color-scheme) ---- */
/* De kleurpaletten per thema staan sinds 2026-08-22 in design.css (één bron, ook voor de
   utility-apps via theme-sync.js). Hier blijven alleen de thema-specifieke componentregels. */


:root[data-theme="emoji"] .tile-tasks .tile-label::before { content: "✅ "; }
:root[data-theme="emoji"] .tile-projects .tile-label::before { content: "🚀 "; }
:root[data-theme="emoji"] .loop-card-title::before { content: "🌅 "; }
:root[data-theme="emoji"] .done-title::before { content: "🎉 "; }
:root[data-theme="emoji"] .radar-strip-label::before { content: "📡 "; }
:root[data-theme="emoji"] .home-greeting::after { content: " ✨"; }

/* ---- contrastthema's (2026-09-08): lichte kaarten op een donkere pagina, of andersom ----
   design.css draagt de vlakke paletten (leesbaar in elke utility-app); hier krijgen ze hun echte
   kaartkleur en de kaart-tokens. --card-surface laat ook --bg binnen kaarten meelopen (velden,
   segmentknoppen), zodat er niets in de paginakleur op een kaart blijft staan. */
:root[data-theme="chalk"], .theme-swatch[data-theme="chalk"] {
  --card-bg: #ffffff; --card-text: #161616; --card-text-dim: #666666; --card-border: #e3e3e3;
  --card-surface: var(--card-bg);
}
:root[data-theme="blueprint"], .theme-swatch[data-theme="blueprint"] {
  --card-bg: #f8f4ea; --card-text: #13233a; --card-text-dim: #5d6a7e; --card-border: #e5ddcb;
  --card-surface: var(--card-bg);
}
:root[data-theme="ink"], .theme-swatch[data-theme="ink"] {
  --card-bg: #1f242d; --card-text: #f1f3f5; --card-text-dim: #a4abb6; --card-border: #343b47;
  --card-surface: var(--card-bg);
}
/* Binnen elke kaart-achtige container (alles met background: var(--card-bg)) gelden de kaart-tokens.
   :where() houdt de specificiteit op nul, zodat .theme-swatch[data-theme] zijn eigen paletpreview
   behoudt. Voor de gewone thema's is dit een no-op: kaart-tokens = paginatokens en zonder
   --card-surface valt --bg terug op --page-bg. */
:where(.card, .tile, .loop-card, .done-card, .accordion-card, .settings-section, .card-menu, .item-menu,
       .mini-weather-tile, .tri-bar, .pin-key, .sandbox-reset-btn, .cal-today-btn, .cal-nav, .cal-cell,
       .cal-item, .cal-icon-btn, .cal-chip, .cal-zoom-btn, .cal-week-scroll, .cal-quick, .cal-plan-btn,
       .sched-chip, .cal-burger, .cal-viewbtn, .backlog-item, .backlog-drag-clone, .detail-convert-btn,
       .gym-tile, .util-card, .app-tile, .app-tile-photo, .events-tile, .vault-note, .wk-close, .wk-slot,
       .wk-row, .wk-day, .overload-banner, .bulk-bar, .bulk-row-sel,
       .detail-input, .capture-textarea, .auth-input) {
  --bg: var(--card-surface, var(--page-bg));
  --text: var(--card-text); --text-dim: var(--card-text-dim); --border: var(--card-border);
  color: var(--text);
}

/* ---- settings tab ---- */

.settings-view {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 16px 28px;
}
.settings-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 4px; }
.settings-sub { font-size: 0.85rem; color: var(--text-dim); margin-bottom: 18px; }

.settings-section {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 14px;
}
.settings-section h2 {
  font-size: 0.8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-dim); margin: 0 0 12px;
}

.seg {
  display: flex; gap: 4px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 3px; margin-bottom: 14px;
}
.seg-btn {
  flex: 1; appearance: none; border: none; background: none;
  color: var(--text-dim); font-size: 0.85rem; font-weight: 600;
  padding: 8px; border-radius: 8px; cursor: pointer; touch-action: manipulation;
}
.seg-btn.active { background: var(--skip); color: #fff; }

.theme-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.theme-swatch {
  appearance: none; cursor: pointer; text-align: left;
  border: 2px solid var(--border); border-radius: 12px; padding: 8px;
  background: var(--card-bg); color: var(--card-text); touch-action: manipulation;
}
.theme-swatch.active { border-color: var(--skip); }
.theme-chip {
  height: 34px; border-radius: 8px; margin-bottom: 6px;
  display: flex; align-items: center; padding: 0 6px; gap: 4px;
}
.theme-dot { width: 10px; height: 10px; border-radius: 50%; }
.theme-swatch-label { font-size: 0.8rem; font-weight: 600; }

/* ---- thema-editor (2026-09-08): sheet onderaan óver Today; elke kleurkeuze previewt live ---- */
.theme-editor {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  width: 100%; max-width: 480px; margin: 0 auto;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-bottom: none;
  border-radius: 18px 18px 0 0;
  padding: 4px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 28px rgba(0,0,0,0.28);
}
.te-row { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.te-row .field-select { margin: 0; flex: 1; }
.te-title { font-weight: 700; font-size: 0.95rem; }
.te-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 10px; }
.te-field { display: flex; align-items: center; gap: 7px; font-size: 0.78rem; color: var(--text-dim); cursor: pointer; }
.te-field input[type="color"] {
  appearance: none; -webkit-appearance: none; flex-shrink: 0;
  width: 32px; height: 32px; padding: 0; background: none; cursor: pointer;
  border: 1px solid var(--border); border-radius: 9px;
}
.te-field input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.te-field input[type="color"]::-webkit-color-swatch { border: none; border-radius: 8px; }
.te-actions { justify-content: flex-end; }
.te-actions .btn { padding: 10px 16px; font-size: 0.9rem; }

.sched-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.sched-at { font-size: 0.85rem; color: var(--text-dim); }
.sched-row .field-input, .sched-row .field-select { margin: 0; }
.sched-row input[type="time"] { width: 110px; }
.sched-del {
  appearance: none; border: none; background: none; color: var(--text-dim);
  font-size: 1.2rem; cursor: pointer; padding: 4px 6px; margin-left: auto;
}
.sched-active {
  font-size: 0.82rem; color: var(--text-dim); margin-top: 8px;
}
.sched-active b { color: var(--text); }

/* ---- calendar: topbar, chips, search, agenda, categories, snooze, drag ---- */
.cal-topbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.cal-view-select { flex: 1; }
.cal-icon-btn {
  appearance: none; border: 1px solid var(--border); background: var(--card-bg);
  color: var(--text); width: 40px; height: 40px; border-radius: 10px;
  font-size: 1rem; cursor: pointer; touch-action: manipulation;
}
.cal-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 6px; -webkit-overflow-scrolling: touch; }
.cal-chip {
  appearance: none; border: 1px solid var(--border); background: var(--card-bg);
  color: var(--text-dim); border-radius: 999px; padding: 5px 12px; font-size: 0.8rem;
  font-weight: 600; white-space: nowrap; cursor: pointer; display: flex; align-items: center; gap: 5px;
  touch-action: manipulation;
}
.cal-chip.active { border-color: var(--skip); color: var(--text); }
.cal-chip-dot { width: 9px; height: 9px; border-radius: 50%; }

.cal-search { display: flex; flex-direction: column; gap: 10px; }
.cal-search-results { display: flex; flex-direction: column; gap: 8px; }

.cal-agenda { display: flex; flex-direction: column; gap: 8px; padding-bottom: 20px; }
.cal-agenda-head { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); margin: 12px 0 2px; }
.cal-overdue-head { color: var(--dismiss); }

.cal-cat-bar { width: 4px; align-self: stretch; border-radius: 3px; flex-shrink: 0; }
.cal-item-titlewrap { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cal-badge-snooze { font-size: 0.68rem; font-weight: 700; color: #d9a441; background: rgba(217,164,65,0.16); border-radius: 999px; padding: 1px 7px; }
.cal-badge-remind { font-size: 0.68rem; font-weight: 700; color: var(--skip); background: rgba(74,144,217,0.16); border-radius: 999px; padding: 1px 7px; }
.cal-snooze-btn {
  appearance: none; border: 1px solid var(--border); background: none; color: var(--text-dim);
  border-radius: 8px; padding: 4px 8px; font-size: 0.75rem; font-weight: 600; cursor: pointer;
  flex-shrink: 0; touch-action: manipulation;
}
.inline-form-hint { font-size: 0.75rem; color: var(--text-dim); }

.cal-cell-drop { outline: 2px dashed var(--skip); outline-offset: -2px; }
.cal-drag-ghost {
  position: fixed; z-index: 999; pointer-events: none; transform: translate(-50%, -50%);
  max-width: 240px; opacity: 0.9; box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
.cat-color { width: 40px; height: 34px; border: 1px solid var(--border); border-radius: 8px; background: none; padding: 2px; }

/* ---- completion celebration ---- */
.fx-confetti {
  position: fixed; width: 8px; height: 8px; border-radius: 2px;
  pointer-events: none; z-index: 2000; transform: translate(-50%, -50%);
  animation: fx-pop 0.7s ease-out forwards;
}
@keyframes fx-pop {
  0% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.3) rotate(180deg); opacity: 0; }
}

/* ---- bigger edit / menu button + drag handle ---- */
.cal-edit-big {
  font-size: 1.4rem; line-height: 1; padding: 8px 12px;
  min-width: 44px; min-height: 44px; color: var(--text-dim);
}
.cal-drag-handle {
  flex-shrink: 0; cursor: grab; color: var(--text-dim);
  font-size: 1.2rem; line-height: 1; padding: 8px 10px;
  min-width: 40px; min-height: 44px; display: flex; align-items: center; justify-content: center;
  touch-action: none; user-select: none;
}
.cal-drag-ghost {
  position: fixed; z-index: 2100; pointer-events: none; transform: translate(-50%, -50%);
  max-width: 220px; padding: 8px 12px; border-radius: 10px;
  background: var(--skip); color: #fff; font-size: 0.9rem; font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- item menu (hold / ⋯) ---- */
.item-menu-overlay {
  position: fixed; inset: 0; z-index: 1500; background: rgba(0,0,0,0.45);
  display: flex; align-items: flex-end; justify-content: center;
  animation: im-fade 0.15s ease;
}
@keyframes im-fade { from { opacity: 0; } to { opacity: 1; } }
.item-menu {
  width: 100%; max-width: 480px; background: var(--card-bg);
  border-top-left-radius: 18px; border-top-right-radius: 18px;
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 10px;
  animation: im-slide 0.2s ease;
}
@keyframes im-slide { from { transform: translateY(30px); } to { transform: translateY(0); } }
.item-menu-title { font-size: 1.05rem; font-weight: 700; padding: 4px 4px 2px; }
.item-menu-sub { font-size: 0.82rem; color: var(--text-dim); padding: 0 4px 4px; margin-top: -6px; }
.item-menu-btn {
  appearance: none; border: 1px solid var(--border); background: var(--bg); color: var(--text);
  border-radius: 12px; padding: 16px; font-size: 1rem; font-weight: 600;
  cursor: pointer; text-align: center; touch-action: manipulation; width: 100%;
}
.item-menu-btn:active { transform: scale(0.98); }
.im-done { background: var(--keep); border-color: var(--keep); color: #fff; }
.im-postpone { background: rgba(217,164,65,0.14); border-color: #d9a441; color: var(--text); }
.im-danger { color: var(--dismiss); }
.im-cancel { background: none; color: var(--text-dim); }
.im-confirm { display: flex; flex-direction: column; gap: 8px; padding: 8px; border: 1px dashed #d9a441; border-radius: 12px; }
.im-confirm-label { font-weight: 700; text-align: center; }
.im-yes { background: var(--keep); border-color: var(--keep); color: #fff; }
.im-no { background: none; color: var(--text-dim); }

/* ---- timed events (blocks on the week/day time-grid) ---- */
.cal-ev {
  position: absolute; left: 54px; right: 6px; background: var(--skip); color: #fff;
  border-left: 4px solid rgba(255,255,255,0.5); border-radius: 8px; padding: 4px 8px;
  overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.2); cursor: pointer; z-index: 2;
}
.cal-ev-time { font-size: 0.68rem; opacity: 0.9; }
.cal-ev-title { font-size: 0.82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev-ics { background: #7a6bd8; }

/* ics read-only rows */
.cal-item-ics { opacity: 0.92; }
.cal-ics-bar { width: 4px; align-self: stretch; border-radius: 3px; background: #7a6bd8; flex-shrink: 0; }
.cal-dot-event { background: #7a6bd8; }
.ics-url { flex: 1; font-size: 0.78rem; word-break: break-all; color: var(--text-dim); }

/* reminder + link chips, notes */
.cal-link-chip { text-decoration: none; font-size: 0.85rem; }
.cal-item-note { font-size: 0.78rem; color: var(--text-dim); margin-top: 3px; white-space: pre-wrap; }
.inline-form-col { display: flex; flex-direction: column; gap: 6px; }
.rem-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rem-chip { font-size: 0.75rem; background: rgba(74,144,217,0.14); color: var(--skip); border-radius: 999px; padding: 3px 6px 3px 10px; display: flex; align-items: center; gap: 4px; }
.rem-chip-x { appearance: none; border: none; background: none; color: inherit; font-size: 0.95rem; cursor: pointer; padding: 0 2px; }

/* ---- home surfaced "Today" items ---- */
/* Heads + lists live in .tile-rows (flex gap 12px); zero margins keep the
   whole Today column on the same 12px beat as the tiles. */
.home-today-head { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); margin: 0 2px -4px; font-weight: 700; }
.home-today-list { margin-bottom: 0; }
.home-overdue-head { color: var(--dismiss); }
.home-today-list + .home-today-head { margin-top: 4px; }
.cal-swipeable { touch-action: pan-y; }

/* ============================================================
   Button & surface polish (2026-07-24) — subtle depth everywhere.
   Flat is gone: every actionable control gets a faint top-light
   gradient, a hairline border, and a soft shadow; pressing sinks it.
   ============================================================ */

.btn,
.tri-bar,
.detail-add-btn,
.detail-seg-btn,
.capture-seg-btn,
.capture-fab,
.hdr-btn,
.tile,
.loop-card,
.pin-key,
.auth-primary {
  background-image: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0) 55%);
  box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform 0.08s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.btn:active,
.detail-add-btn:active,
.capture-fab:active,
.hdr-btn:active,
.tile:active,
.loop-card:active {
  box-shadow: 0 0 1px rgba(0,0,0,0.3), inset 0 1px 2px rgba(0,0,0,0.18);
  filter: brightness(0.97);
}
.btn-primary,
.detail-add-btn,
.capture-send,
.auth-primary {
  background-color: var(--skip);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0) 60%);
  color: #fff;
  border: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.18);
}
.capture-fab {
  background-color: var(--skip);
  box-shadow: 0 6px 18px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.2);
}
.detail-seg-btn.active,
.capture-seg-btn.active {
  border-color: var(--skip);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--skip), 0 1px 3px rgba(0,0,0,0.2);
}
.auth-link { color: var(--skip); }

/* Morning-loop card: was nearly invisible in dark themes — give it a real
   surface, a visible ring, and a hairline glow so it reads as THE main
   action on the home screen. */
.loop-card {
  background: var(--card-bg);
  border: 1.5px solid transparent;
}
.loop-card .loop-card-title { color: var(--text); }
.loop-card .loop-card-sub { color: var(--text-dim); }

/* Detail-sheet remove button */
.detail-remove {
  margin-left: auto;
  appearance: none;
  border: 1px solid var(--dismiss);
  background: transparent;
  color: var(--dismiss);
  border-radius: 10px;
  padding: 7px 13px;
  font-size: 0.85rem;
  cursor: pointer;
}
.detail-remove:active { background: var(--dismiss); color: #fff; }

/* Sync status lines (replaces the old Sync/Copy buttons) */
.sync-status {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-dim);
  padding: 8px 0;
}
.notes-footer.sync-status { border: none; background: transparent; }

/* "More options" toggle in the agenda editors */
.inline-form-moretoggle {
  appearance: none;
  background: none;
  border: none;
  color: var(--skip);
  font-size: 0.88rem;
  text-align: left;
  padding: 4px 0;
  cursor: pointer;
}
.inline-form-more { display: flex; flex-direction: column; gap: 8px; }
.inline-form-more.hidden { display: none; }

/* Nova-specific depth: slightly stronger elevation + gold focus ring */
:root[data-theme="nova"] .card,
:root[data-theme="nova"] .tile,
:root[data-theme="nova"] .loop-card,
:root[data-theme="nova"] .accordion-card,
:root[data-theme="nova"] .detail-panel,
:root[data-theme="nova"] .card-menu {
  box-shadow: 0 4px 20px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.05);
}
:root[data-theme="nova"] .detail-input:focus,
:root[data-theme="nova"] .capture-textarea:focus,
:root[data-theme="nova"] .auth-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(216,180,106,0.22);
}
:root[data-theme="nova"] .tab-btn.active { color: var(--gold); }

/* Carbon depth: soft elevation on the near-black ground + azure focus ring */
:root[data-theme="carbon"] .card,
:root[data-theme="carbon"] .tile,
:root[data-theme="carbon"] .loop-card,
:root[data-theme="carbon"] .accordion-card,
:root[data-theme="carbon"] .detail-panel,
:root[data-theme="carbon"] .card-menu {
  background: linear-gradient(180deg, #171c24, #12161d);
  box-shadow: 0 6px 22px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.045);
}
:root[data-theme="carbon"] .detail-input:focus,
:root[data-theme="carbon"] .capture-textarea:focus,
:root[data-theme="carbon"] .field-input:focus,
:root[data-theme="carbon"] .auth-input:focus {
  outline: none;
  border-color: var(--skip);
  box-shadow: 0 0 0 2px rgba(91,157,255,0.25);
}
:root[data-theme="carbon"] .tab-btn.active { color: var(--skip); }

/* Slate: flat and calm on purpose — just a hairline top highlight on cards */
:root[data-theme="slate"] .card,
:root[data-theme="slate"] .tile,
:root[data-theme="slate"] .accordion-card {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);
}

/* Porcelain: paper-soft double shadow instead of hard borders */
:root[data-theme="porcelain"] .card,
:root[data-theme="porcelain"] .tile,
:root[data-theme="porcelain"] .accordion-card,
:root[data-theme="porcelain"] .detail-panel {
  box-shadow: 0 1px 2px rgba(25,28,34,0.05), 0 4px 14px rgba(25,28,34,0.06);
}

/* ============================================================
   Outlook-style week time-grid (2026-07-24)
   ============================================================ */
.cal-headbox { display: flex; align-items: center; gap: 10px; }
.cal-zoom { display: flex; gap: 6px; margin-left: auto; }
.cal-zoom-btn {
  width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--card-bg); color: var(--text); font-size: 1.2rem; line-height: 1; cursor: pointer;
}

.cal-week { display: flex; flex-direction: column; min-height: 0; }
.cal-week-scroll {
  flex: 1; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border); border-radius: 12px; background: var(--card-bg);
}
/* the whole frozen block (day names + all-day row) sticks as one unit */
.cal-week-frozen { position: sticky; top: 0; z-index: 6; background: var(--card-bg); }
.cal-week-head {
  display: grid; z-index: 5;
  background: var(--card-bg); border-bottom: 1px solid var(--border);
}
.cal-week-corner { border-right: 1px solid var(--border); }
.cal-week-dhead {
  text-align: center; padding: 7px 2px; cursor: pointer;
  border-left: 1px solid var(--border);
}
.cal-week-dow { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); }
.cal-week-dnum { font-size: 1.05rem; font-weight: 600; color: var(--text); }
.cal-week-today .cal-week-dnum {
  background: var(--skip); color: #fff; border-radius: 50%;
  width: 28px; height: 28px; line-height: 28px; margin: 2px auto 0;
}

.cal-week-allday {
  display: grid; border-bottom: 1px solid var(--border);
  z-index: 4; background: var(--card-bg);
}
.cal-week-allday-label { font-size: 0.62rem; color: var(--text-dim); padding: 4px; text-align: right; border-right: 1px solid var(--border); }
.cal-week-allday-cell { border-left: 1px solid var(--border); padding: 3px; display: flex; flex-direction: column; gap: 3px; min-height: 22px; cursor: pointer; }
.cal-allday-chip { font-size: 0.7rem; padding: 2px 5px; border-radius: 6px; background: var(--skip); color: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cal-allday-chip.cal-allday-chore { background: var(--keep); }
.cal-allday-chip.done { opacity: 0.5; text-decoration: line-through; }

.cal-week-body { display: grid; position: relative; }
.cal-week-gutter { position: relative; border-right: 1px solid var(--border); }
.cal-week-hourlabel { position: absolute; right: 5px; font-size: 0.64rem; color: var(--text-dim); transform: translateY(-6px); }
.cal-week-col { position: relative; border-left: 1px solid var(--border); }
.cal-week-coltoday { background: color-mix(in srgb, var(--skip) 7%, transparent); }
.cal-week-hline { position: absolute; left: 0; right: 0; border-top: 1px solid var(--border); opacity: 0.5; }

.cal-week-ev {
  position: absolute; left: 2px; right: 3px; z-index: 2;
  background: var(--skip); color: #fff; border-left: 3px solid rgba(255,255,255,0.55);
  border-radius: 7px; padding: 2px 6px; overflow: hidden; cursor: grab;
  box-shadow: 0 1px 4px rgba(0,0,0,0.28); touch-action: none;
  user-select: none;
}
.cal-week-ev.dragging { cursor: grabbing; opacity: 0.9; box-shadow: 0 6px 18px rgba(0,0,0,0.4); z-index: 10; }
.cal-week-ev.done { opacity: 0.55; }
.cal-week-ev .cal-ev-time { font-size: 0.62rem; opacity: 0.92; }
.cal-week-ev .cal-ev-title { font-size: 0.76rem; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cal-week-ev.cal-ev-ics { background: #7a6bd8; cursor: default; }
.cal-ev-resize { position: absolute; left: 0; right: 0; height: 9px; cursor: ns-resize; touch-action: none; }
.cal-ev-resize-top { top: -1px; }
.cal-ev-resize-bot { bottom: -1px; }

/* week: drag-to-create ghost + touch behavior */
.cal-week-ghost { background: color-mix(in srgb, var(--skip) 55%, transparent); border: 1px dashed #fff; pointer-events: none; opacity: 0.85; }
.cal-week-col { touch-action: none; }
.cal-week-scroll { touch-action: pan-y; }

/* drag a block over the all-day strip: strip lights up, block previews the drop */
.cal-week-allday.cal-allday-drop {
  background: color-mix(in srgb, var(--skip) 16%, var(--card-bg));
  box-shadow: inset 0 0 0 1px var(--skip);
}
.cal-week-ev.cal-ev-overallday { opacity: 0.75; border-left-style: dashed; }
/* shift+drag: faded stand-in left at the origin while a copy is dragged out */
.cal-week-ev.cal-ev-dupe-src { opacity: 0.35; pointer-events: none; }

/* home: calendar quick-links (My Day / Week) */
/* Sits inside .dashboard-area (flex gap 12px) — no extra margins, so the
   quicklinks / tile rows / radar strip all share one 12px rhythm. */
.cal-quicklinks { display: flex; gap: 12px; margin: 0; }
.cal-quick {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--card-bg); color: var(--text); font-size: 0.95rem; font-weight: 600; cursor: pointer;
}
.cal-quick-icon svg { width: 20px; height: 20px; display: block; color: var(--skip); }

/* work schedule editor + week-grid work-hours shading */
.ws-sheet { max-height: 82vh; overflow-y: auto; }
.ws-sub { font-size: 0.82rem; color: var(--text-dim); margin: 0 4px 8px; }
.ws-row { display: flex; align-items: center; gap: 8px; padding: 5px 4px; }
.ws-daylabel { flex: 0 0 108px; font-size: 0.92rem; color: var(--text); }
.ws-row .field-input[type="time"] { flex: 0 0 auto; }

.cal-week-loc { font-size: 0.6rem; font-weight: 600; margin-top: 2px; padding: 1px 5px; border-radius: 6px; display: inline-block; }
.cal-loc-office { background: color-mix(in srgb, var(--skip) 22%, transparent); color: var(--skip); }
.cal-loc-home { background: color-mix(in srgb, var(--keep) 22%, transparent); color: var(--keep); }
.cal-loc-customer { background: color-mix(in srgb, #d8b46a 26%, transparent); color: #b78a2e; }

.cal-week-workband { position: absolute; left: 0; right: 0; pointer-events: none; background: color-mix(in srgb, var(--skip) 6%, transparent); z-index: 0; }
.cal-week-workband.cal-loc-home { background: color-mix(in srgb, var(--keep) 7%, transparent); }
.cal-week-workband.cal-loc-customer { background: color-mix(in srgb, #d8b46a 9%, transparent); }
.cal-week-workband.cal-loc-unspecified { background: color-mix(in srgb, var(--text-dim) 8%, transparent); }
.cal-week-hline, .cal-week-workband { pointer-events: none; }

/* to-do/chore editor shown as a bottom sheet over the week grid */
.cal-editor-overlay { position: fixed; inset: 0; z-index: 72; background: rgba(0,0,0,0.45); display: flex; align-items: flex-end; justify-content: center; }
.cal-editor-sheet {
  width: 100%; max-width: 480px; background: var(--bg);
  border-top-left-radius: 18px; border-top-right-radius: 18px;
  border: 1px solid var(--border); border-bottom: none;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  max-height: 88vh; overflow-y: auto;
}

/* work-hours "ghost" block: clearly a translucent fill (real blocks sit on
   top and never get pushed aside by it), tinted to the day's location */
.cal-week-workband { background: color-mix(in srgb, var(--skip) 16%, transparent); z-index: 0; }
.cal-week-workband.cal-loc-home { background: color-mix(in srgb, var(--keep) 16%, transparent); }
.cal-week-workband.cal-loc-customer { background: color-mix(in srgb, #d8b46a 20%, transparent); }
.cal-week-workband.cal-loc-office { background: color-mix(in srgb, var(--skip) 16%, transparent); }
.cal-week-workband.cal-loc-unspecified { background: color-mix(in srgb, var(--text-dim) 14%, transparent); }
.cal-week-ev { z-index: 2; }

/* work-schedule editor: stacked default-hours row (no more horizontal squeeze) */
.ws-hours { display: flex; flex-direction: column; gap: 6px; padding: 6px 4px; }
.ws-hours-inputs { display: flex; align-items: center; gap: 8px; }
.ws-hours-inputs .field-input { flex: 1; min-width: 0; }

/* month: "plan work" mode */
.cal-plan-btn { margin-left: auto; border: 1px solid var(--border); background: var(--card-bg); color: var(--text); border-radius: 9px; padding: 7px 12px; font-size: 0.85rem; cursor: pointer; }
.cal-plan-btn.active { border-color: var(--skip); color: var(--skip); font-weight: 600; }
.sched-bar { border: 1px solid var(--skip); border-radius: 12px; padding: 10px; margin: 8px 0; }
.sched-bar-hint { font-size: 0.82rem; color: var(--text-dim); margin-bottom: 8px; }
.sched-bar-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sched-chip { border: 1px solid var(--border); background: var(--card-bg); color: var(--text); border-radius: 8px; padding: 7px 11px; font-size: 0.82rem; cursor: pointer; }
.sched-chip.cal-loc-office { border-color: var(--skip); }
.sched-chip.cal-loc-home { border-color: var(--keep); }
.sched-chip.cal-loc-customer { border-color: #d8b46a; }
.sched-chip-default { color: var(--text-dim); }

/* month cell work-location tint + selection */
.cal-cell-loc-office { box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--skip) 60%, transparent); }
.cal-cell-loc-home { box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--keep) 60%, transparent); }
.cal-cell-loc-customer { box-shadow: inset 0 -3px 0 color-mix(in srgb, #d8b46a 75%, transparent); }
.cal-cell-override::after { content: ""; position: absolute; top: 3px; right: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--text-dim); }
.cal-cell { position: relative; }
.cal-cell-picked { outline: 2px solid var(--skip); outline-offset: -2px; background: color-mix(in srgb, var(--skip) 12%, transparent); }

/* stop Android's long-press selection/callout from cancelling drag-create */
.cal-week-col, .cal-week-ev, .cal-week-ghost, .cal-week-allday-cell {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}

/* timeline header tools: + Task + zoom */
.cal-tl-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.cal-tl-add { border: 1px solid var(--skip); background: transparent; color: var(--skip); border-radius: 9px; padding: 7px 12px; font-size: 0.85rem; font-weight: 600; cursor: pointer; }

/* all-day add hint */
.cal-week-allday-cell { align-items: stretch; justify-content: center; }
.cal-allday-add { color: var(--text-dim); opacity: 0.5; font-size: 1rem; text-align: center; line-height: 1; }

/* smaller week/day range title */
.cal-title { font-size: 0.95rem; font-weight: 600; flex: 1; text-align: center; }

/* view segmented control (Month / Week / My Day / More) */
.cal-viewseg { display: flex; gap: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.cal-viewseg-btn { appearance: none; background: transparent; border: none; border-right: 1px solid var(--border); color: var(--text-dim); font-size: 0.82rem; padding: 7px 10px; cursor: pointer; white-space: nowrap; }
.cal-viewseg-btn:last-child { border-right: none; }
.cal-viewseg-btn.active { background: var(--skip); color: #fff; font-weight: 600; }
.card-menu-item.active .cm-label { color: var(--skip); font-weight: 700; }

/* editor: sticky action bar at the top so the keyboard can't hide Save */
.cal-editor-sheet .inline-form-actions,
.inline-form-actions {
  position: sticky; top: 0; z-index: 3; background: var(--bg);
  padding: 6px 0 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border);
  display: flex; gap: 8px; align-items: center;
}

/* category (colour) manage link + coloured selects */
.cal-cat-manage { appearance: none; background: none; border: none; color: var(--skip); font-size: 0.82rem; cursor: pointer; white-space: nowrap; }

/* multi-day (holiday-style) span bar in the all-day row */
.cal-week-allday { grid-auto-rows: minmax(20px, auto); row-gap: 2px; }
.cal-allday-span {
  align-self: center; margin: 0 2px; padding: 2px 8px; border-radius: 6px;
  background: var(--skip); color: #fff; font-size: 0.72rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.cal-allday-span.done { opacity: 0.5; text-decoration: line-through; }

/* all-day row: allow horizontal drag-create (vertical still scrolls) */
.cal-week-allday-cell { touch-action: pan-y; }

.cal-allday-add { pointer-events: none; }

/* ---- swipe-down handle on sheets ---- */
.sheet-handle {
  width: 42px; height: 5px; border-radius: 3px; background: var(--border);
  margin: 8px auto 6px; flex: 0 0 auto; touch-action: none; cursor: grab;
}
.sheet-handle:active { cursor: grabbing; }

/* ---- calendar: minimal top bar with hamburger + view toggle ---- */
.cal-topbar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.cal-burger {
  appearance: none; border: 1px solid var(--border); background: var(--card-bg); color: var(--text);
  width: 40px; height: 38px; border-radius: 10px; font-size: 1.1rem; cursor: pointer; flex: 0 0 auto;
}
.cal-topbar .cal-viewseg { flex: 1; }

/* ---- calendar left drawer (Google-Calendar style) ---- */
.cal-drawer-backdrop {
  position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,0.45);
  opacity: 0; transition: opacity 0.22s ease;
}
.cal-drawer-backdrop.show { opacity: 1; }
.cal-drawer {
  position: absolute; top: 0; left: 0; bottom: 0; width: 82%; max-width: 320px;
  background: var(--bg); border-right: 1px solid var(--border);
  box-shadow: 4px 0 24px rgba(0,0,0,0.35);
  transform: translateX(-100%); transition: transform 0.24s ease;
  overflow-y: auto; padding: 14px 10px calc(20px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 2px;
}
.cal-drawer-backdrop.show .cal-drawer { transform: translateX(0); }
.cal-drawer-title { font-size: 1.2rem; font-weight: 700; color: var(--text); padding: 6px 10px 10px; }
.cal-drawer-sub { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); padding: 12px 10px 4px; }
.cal-drawer-item {
  appearance: none; text-align: left; background: transparent; border: none;
  color: var(--text); font-size: 1rem; padding: 12px 12px; border-radius: 10px; cursor: pointer;
}
.cal-drawer-item:active { background: var(--surface, rgba(127,127,127,0.12)); }
.cal-drawer-item.active { background: color-mix(in srgb, var(--skip) 16%, transparent); color: var(--skip); font-weight: 600; }

/* ---- quick-capture: peeking "cookie-banner" tab, forward on tap ---- */
.capture-fab {
  right: -6px; width: 48px; height: 48px; opacity: 0.42;
  transition: opacity 0.15s ease, right 0.15s ease, transform 0.08s ease;
}
.capture-fab:hover, .capture-fab:focus { opacity: 1; right: 16px; }
.capture-fab:active { opacity: 1; right: 16px; }
/* draggable: no native gestures on the button, and once moved it stays put */
.capture-fab { touch-action: none; }
.capture-fab-moved { right: 16px; opacity: 1; }
.capture-fab-dragging { cursor: grabbing; transition: none !important; box-shadow: 0 10px 26px rgba(0,0,0,0.4); }

/* ---- single-row calendar header ---- */
.cal-headbar { display: flex; align-items: center; gap: 6px; padding: 7px 10px; }
.cal-headbar .cal-burger { width: 38px; height: 36px; font-size: 1.05rem; }
.cal-headbar .cal-title { flex: 1; text-align: center; font-size: 0.95rem; font-weight: 600; }
.cal-headbar .cal-nav { flex: 0 0 auto; appearance: none; background: transparent; border: none; color: var(--text); font-size: 1.3rem; line-height: 1; padding: 4px 6px; cursor: pointer; }
.cal-viewbtn {
  flex: 0 0 auto; appearance: none; border: 1px solid var(--border); background: var(--card-bg); color: var(--text);
  border-radius: 10px; padding: 7px 11px; font-size: 0.85rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.cal-viewbtn.active { border-color: var(--skip); color: var(--skip); }

/* ---- tablet & laptop -------------------------------------------------
   The shell used to be capped at one width per screen size, so on an iPad or
   a laptop EVERY surface stretched to it: a one-line to-do row and a news
   article both ran to ~1200px, which measured 142 characters per line — far
   past the ~75 where reading falls apart — with a sea of empty space beside
   the short rows. The shell now takes the screen (the calendar's week grid is
   the one view that genuinely earns the width) while each reading surface
   keeps its own comfortable column. Phones are untouched: below 768px this
   whole block is inert and the single 480px column still applies. */
@media (min-width: 768px) {
  body { max-width: 1100px; }

  /* reading and form surfaces: one centred column, not a stretched band */
  .home-view,
  .settings-view,
  .util-launcher { width: 100%; max-width: 760px; margin-inline: auto; }

  /* the triage deck is prose — keep it near the classic measure */
  main#deckArea { width: 100%; max-width: 640px; margin-inline: auto; }

  /* full-bleed bar, centred cluster of buttons (a 1100px-wide row of five
     icons reads as five lost icons) */
  .tabbar { justify-content: center; }
  .tab-btn { flex: 1 1 0; max-width: 150px; }

  /* .calendar-view deliberately gets NO cap — month/week grids use it all */
}
@media (min-width: 1200px) {
  body { max-width: 1340px; }
}

/* Text selection fights a mouse swipe: without this, dragging the card to
   decide highlights the article instead of moving the card. */
.card.card-dragging { user-select: none; -webkit-user-select: none; }

/* Base state first — a later rule of equal specificity would silently beat
   the media query below (the bug that hid the week numbers). */
.tri-keys { display: none; color: var(--text-dim); }

/* Pointer-precise devices only: on a laptop the deck shows a grab cursor so
   the swipe is discoverable at all, and the keyboard hint appears. */
@media (hover: hover) and (pointer: fine) {
  .card { cursor: grab; }
  .card.card-dragging { cursor: grabbing; }
  .tri-keys { display: inline; }
}

/* sandbox-only marker — injected by app.js ONLY on the /sandbox/ URL, so it
   can never leak to the live app regardless of how files are promoted */
.sbx-badge {
  position: fixed; top: 10px; left: 50%; transform: translateX(-50%);
  background: #d9a441; color: #1a1d24; font-size: 0.62rem; font-weight: 800;
  letter-spacing: 0.06em; padding: 2px 10px; border-radius: 999px; z-index: 100;
  cursor: pointer; touch-action: manipulation; white-space: nowrap; max-width: 70vw; overflow: hidden; text-overflow: ellipsis;
}

/* detail sheet: schedule row + per-subtask calendar button */
.detail-sub-sched {
  background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 2px 4px;
  display: inline-flex; align-items: center;
}
.detail-sub-sched svg { width: 16px; height: 16px; }
.detail-sub-sched:active { color: var(--skip); }

/* ---- Backlog (unified items) ---- */
.backlog-add {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.backlog-add-input { flex: 1 1 140px; min-width: 0; }
.backlog-seg {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.backlog-seg-btn {
  appearance: none;
  background: none;
  border: none;
  color: var(--text-dim);
  padding: 6px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.backlog-seg-btn.active { background: var(--skip); color: #fff; }
.btn-sm { padding: 7px 12px; font-size: 0.8rem; }

.backlog-list { display: flex; flex-direction: column; gap: 8px; }
.backlog-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-bg);
  overflow: hidden;
}
.backlog-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
}
.backlog-ord { display: flex; flex-direction: column; gap: 1px; }
.backlog-ord-btn {
  appearance: none;
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.6rem;
  line-height: 1;
  padding: 1px 2px;
}
.backlog-ord-btn:disabled { opacity: 0.25; cursor: default; }

/* hold-and-drag reorder: the lifted clone rides under the finger, the
   original row stays in the list as the drop slot */
.backlog-drag-clone {
  position: fixed;
  z-index: 80;
  pointer-events: none;
  opacity: 0.95;
  transform: scale(1.02);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  background: var(--card-bg);
}
.backlog-drag-slot { opacity: 0.35; outline: 1px dashed var(--border); border-radius: 12px; }
.backlog-type {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 6px;
  white-space: nowrap;
}
.backlog-type-task { background: color-mix(in srgb, var(--skip) 22%, transparent); color: var(--skip); }
.backlog-type-project { background: color-mix(in srgb, var(--keep) 22%, transparent); color: var(--keep); }
.backlog-title { flex: 1; min-width: 0; font-size: 0.9rem; color: var(--text); }
.backlog-menu-btn {
  appearance: none;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
}
.backlog-actions {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 8px 8px;
  border-top: 1px solid var(--border);
}
.backlog-act {
  appearance: none;
  background: none;
  border: none;
  text-align: left;
  color: var(--text);
  font-size: 0.85rem;
  padding: 8px 8px;
  border-radius: 8px;
  cursor: pointer;
}
.backlog-act:active { background: var(--border); }
.backlog-act-danger { color: var(--dismiss); }
.backlog-sched-wrap { padding: 2px 4px; }
.backlog-schedule { display: flex; gap: 8px; align-items: center; padding: 4px 4px 8px; }
.backlog-schedule .field-input { flex: 1; min-width: 0; }
.app-items { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.app-items:empty { margin-top: 0; }
.detail-convert-btn {
  appearance: none;
  width: 100%;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 10px 12px;
  cursor: pointer;
}
.detail-convert-btn:active { background: var(--border); }

/* ---- inline item editor (state + subtasks) ---- */
.item-panel-label {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-dim); margin: 8px 4px 4px;
}
.item-state-seg { display: flex; gap: 4px; flex-wrap: wrap; padding: 0 4px; }
.item-state-btn {
  appearance: none; border: 1px solid var(--border); background: none; color: var(--text-dim);
  border-radius: 8px; padding: 5px 9px; font-size: 0.74rem; font-weight: 600; cursor: pointer;
}
.item-state-btn.active { background: var(--skip); color: #fff; border-color: var(--skip); }
.item-subs { display: flex; flex-direction: column; gap: 4px; padding: 0 4px; }
.item-sub { display: flex; align-items: center; gap: 8px; }
.item-sub.done .item-sub-text { text-decoration: line-through; color: var(--text-dim); }
.item-sub-check {
  appearance: none; width: 20px; height: 20px; flex-shrink: 0; border: 1.5px solid var(--border);
  border-radius: 6px; background: none; color: var(--keep); font-size: 0.8rem; line-height: 1; cursor: pointer;
}
.item-sub-check.checked { border-color: var(--keep); }
.item-sub-text { flex: 1; min-width: 0; font-size: 0.85rem; color: var(--text); }
.item-sub-del { appearance: none; background: none; border: none; color: var(--text-dim); font-size: 1.1rem; cursor: pointer; padding: 0 4px; }
.item-sub-add { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.item-sub-add .field-input { flex: 1; min-width: 0; }


/* Gym status tile (Kangaroo) — added 2026-08-12; colours match app bundle */
.gym-tile { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; margin-top: 12px; }
.gym-tile-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.gym-tile-title { font-size: 15px; font-weight: 600; color: var(--text); }
.gym-open { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; color: var(--text-dim); border: 1px solid var(--border); background: transparent; text-decoration: none; transition: color .15s, border-color .15s; }
.gym-open:hover { color: var(--text); border-color: var(--text-dim); }
.gym-open svg { width: 18px; height: 18px; display: block; }
.gym-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gym-chip { font-size: 12px; padding: 3px 10px; border-radius: 20px; line-height: 1.5; white-space: nowrap; color: #14261a; }
.gym-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; font-size: 11px; color: var(--text-dim); }
.gym-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 4px; vertical-align: 0; }
.gym-empty, .gym-loading { font-size: 13px; color: var(--text-dim); }


/* Radar items + tasks made from them (added 2026-08-12) */
.dl-days.dl-item { background: var(--border); color: var(--text-dim); }
.dl-task-pill { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--keep); border: 1px solid var(--keep); border-radius: 20px; padding: 1px 7px; margin-left: 6px; }
.dl-add { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--skip); background: none; border: 1px solid var(--skip); border-radius: 20px; padding: 1px 8px; margin-left: 6px; cursor: pointer; flex-shrink: 0; }
.dl-add:active { background: var(--skip); color: #fff; }
.detail-radar-task-wrap { margin-top: 4px; }
.detail-radar-task { font-size: 0.9rem; color: var(--text); padding: 4px 0; }

/* ---- Utilities launcher grid (2026-08-17, replaces the tab row) ---- */
.util-launcher {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 16px calc(24px + env(safe-area-inset-bottom, 0px));
}

.util-title {
  margin: 0 0 14px;
  font-size: 1.15rem;
  font-weight: 700;
}

.util-launcher-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.util-launcher-head .util-title { margin: 0; }

/* Formaat-slider. Vervangt de eerdere Klein/Normaal/Groot-knoppen, zodat het
   grid vrij schaalbaar is in plaats van drie vaste stappen. */
.util-size {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.util-size-hint { color: var(--text-dim); flex-shrink: 0; }
.util-size-hint-sm { width: 14px; height: 14px; }
.util-size-hint-lg { width: 18px; height: 18px; }

.util-size input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  width: 108px;
  height: 22px;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}

.util-size input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: var(--border);
}
.util-size input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: var(--border);
}

.util-size input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--skip);
  border: none;
}
.util-size input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--skip);
  border: none;
}

/* --tile is de minimale kolombreedte; practice.js zet hem op het grid.
   Alles in de kaart schaalt eraan mee, zodat groter niet alleen meer
   witruimte betekent. */
.util-grid {
  --tile: 96px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--tile), 1fr));
  gap: clamp(8px, calc(var(--tile) * 0.12), 18px);
}

.util-card {
  appearance: none;
  position: relative; /* anker voor .tile-badge (Luisterinus-wachtrij) */
  background: var(--card-bg);
  border: 1.5px solid transparent;
  border-radius: clamp(12px, calc(var(--tile) * 0.16), 22px);
  padding: clamp(10px, calc(var(--tile) * 0.15), 26px) 8px
           clamp(9px, calc(var(--tile) * 0.13), 22px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, calc(var(--tile) * 0.09), 14px);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  text-decoration: none;   /* page apps are <a> since 2026-09-08 */
}

.util-card:active { transform: scale(0.97); }

.util-card-icon {
  width: clamp(20px, calc(var(--tile) * 0.3), 64px);
  height: clamp(20px, calc(var(--tile) * 0.3), 64px);
  color: var(--keep);
}

.util-card-icon svg { width: 100%; height: 100%; display: block; }

.util-card-label {
  font-size: clamp(0.7rem, calc(var(--tile) * 0.13), 1.15rem);
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.util-frame-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Zonder deze regel wint `display: flex` van het hidden-attribuut en blijft
   een lege Frame onder het grid staan. Zelfde reden als `.view[hidden]`. */
.util-frame-wrap[hidden] { display: none; }
.util-launcher[hidden] { display: none; }

.util-frame-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.util-frame-title {
  font-size: 0.95rem;
  font-weight: 600;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- home: "most used" app tiles + events tile (2026-08-17) ----
   Zelfde formaat en opmaak als de kaarten in het Utilities-grid. Max 92px,
   maar op een smalle telefoon (Pixel 8: 380px binnen de padding) krimpt de
   breedte zodat er altijd vier naast elkaar passen (2026-09-04). */
.hero-row { flex-wrap: wrap; }

.app-tile {
  position: relative;
  width: calc((100% - 30px) / 4);
  max-width: 92px;
  flex-shrink: 1;   /* vier tegels + gaps = exact 100%; een subpixel mag krimpen i.p.v. wrappen */
  background: var(--card-bg);
  border: 1.5px solid transparent;
  border-radius: 16px;
  padding: 14px 6px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  color: var(--text);
  touch-action: manipulation;
}

.app-tile:active { transform: scale(0.97); }

.app-tile-icon { width: 26px; height: 26px; color: var(--keep); }
.app-tile-icon svg { width: 100%; height: 100%; display: block; }

/* Label fits the 92px tile on ONE line. `width:100%` is what makes the
   overflow measurable (a centred flex child would otherwise shrink to fit,
   so scrollWidth would always equal clientWidth); fitTileLabel() in home.js
   then steps the font size down until it fits, and only falls back to
   wrapping if even the floor size is too wide. Fixes "ChordSprint" breaking
   mid-word onto a second line (2026-08-18). */
.app-tile-label {
  width: 100%;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.15;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow-wrap: anywhere;
}

.app-tile-label.is-wrapped { white-space: normal; }

.app-tile-arrow {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 12px;
  height: 12px;
  color: var(--text-dim);
  opacity: 0.65;
}
.app-tile-arrow svg { width: 100%; height: 100%; display: block; }

/* Vogel van de dag: het plaatje IS de tegel. Vierkant, zelfde 92px breedte als
   de tegels ernaast. `object-position` staat op 32% in plaats van het midden:
   bij een liggende bron snijdt `cover` alleen links/rechts weg en blijft de
   volle hoogte staan, maar bij een staande bron wordt er verticaal gesneden —
   en dan zit de kop vrijwel altijd in de bovenste helft. (2026-08-18) */
.app-tile-photo {
  padding: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  justify-content: flex-end;
  gap: 0;
  background: var(--card-bg);
}

/* Ingezoomd op de kop. `object-position` kiest welk deel van de foto in het
   vierkant valt; `scale` vergroot dat vervolgens vanuit hetzelfde punt, zodat de
   vogel de tegel vult in plaats van een stipje in een landschap te zijn.
   Staat de kop er bij sommige vogels af, draai --bird-zoom dan omlaag. */
.app-tile-photo {
  --bird-zoom: 1.45;
  --bird-focus-y: 30%;
}

.app-tile-photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% var(--bird-focus-y);
  transform: scale(var(--bird-zoom));
  transform-origin: 50% var(--bird-focus-y);
  display: block;
}

/* Twee regels in plaats van één: 78 van de 561 namen zijn langer dan 18 tekens
   ("Amerikaanse blauwe kiekendief"), en die werden op één regel vrijwel meteen
   afgekapt. De volledige naam staat sowieso in de aria-label. */
.app-tile-photo-name {
  position: relative;
  width: 100%;
  padding: 14px 5px 5px;
  background: linear-gradient(to top, rgba(8, 10, 13, 0.9), rgba(8, 10, 13, 0));
  color: #f4f6f8;
  font-size: 0.6rem;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* Op een foto kan het pijltje op elke kleur belanden, dus het krijgt een eigen
   donkere achtergrond in plaats van alleen een kleur. */
.app-tile-photo .app-tile-arrow {
  top: 5px;
  right: 5px;
  width: 18px;
  height: 18px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(8, 10, 13, 0.55);
  color: #ffffff;
  opacity: 1;
}

.events-tile-slot:empty { display: none; }

.events-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card-bg);
  border: 1.5px solid transparent;
  border-radius: 16px;
  padding: 13px 14px;
  margin-top: 10px;
  text-decoration: none;
  color: var(--text);
  touch-action: manipulation;
}

.events-tile:active { transform: scale(0.99); }

.events-tile-icon { width: 24px; height: 24px; color: var(--keep); flex-shrink: 0; }
.events-tile-icon svg { width: 100%; height: 100%; display: block; }

.events-tile-text { flex: 1; min-width: 0; }
.events-tile-title { font-size: 0.95rem; font-weight: 600; }
.events-tile-sub { font-size: 0.78rem; color: var(--text-dim); margin-top: 1px; }

.events-tile-arrow { width: 16px; height: 16px; color: var(--text-dim); flex-shrink: 0; }
.events-tile-arrow svg { width: 100%; height: 100%; display: block; }

/* Trainerinus tile: per-app status dots (green = practised today) */
.trainer-dots { display: flex; gap: 5px; align-items: center; flex-shrink: 0; }
.trainer-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); opacity: 0.35; }
.trainer-dots i.on { background: #34c759; opacity: 1; }
.app-tile .trainer-dots { justify-content: center; margin-top: 2px; }  /* stippen in de kleine hero-tegel */

/* Opduikinus: één oude vault-notitie per dag (data uit feed.json:vaultNote) */
.vault-note {
  background: var(--card-bg);
  border-radius: 16px;
  padding: 13px 14px;
  margin-top: 10px;
}
.vault-note-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  font-weight: 700;
  margin-bottom: 5px;
}
.vault-note-title { font-size: 0.95rem; font-weight: 650; }
.vault-note-excerpt {
  font-size: 0.85rem;
  color: var(--text-dim);
  line-height: 1.5;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vault-note.open .vault-note-excerpt {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.vault-note-more {
  border: 0;
  background: none;
  color: var(--accent, #4a9eff);
  font-size: 0.78rem;
  font-weight: 650;
  padding: 4px 0 0;
  cursor: pointer;
}
.vault-note-path {
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-top: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.75;
}
.vault-note-actions { display: flex; gap: 8px; margin-top: 10px; }

/* Attentinus-datums in de agenda (all-day chips/items; bron: attentinus/dates.js + leescache uit home.js) */
.cal-allday-chip.cal-allday-attent { background: #d97706; }
.cal-item-attent .cal-ics-bar { background: #d97706; }
a.cal-item-attent { color: inherit; text-decoration: none; }
a.cal-allday-attent { text-decoration: none; }

/* ---- bulk-move to-dos: home's overload banner + the shared picker/bar ----
   .overload-* is the home-only banner; .bulk-* is shared by the home picker
   (home.js appendUrgentCards) and the calendar's "All" view (calendar.js). */
.overload-banner { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--space-3) var(--space-4); box-shadow: var(--shadow); margin-bottom: var(--space-3); }
.overload-banner-text { flex: 1 1 auto; min-width: 150px; font-size: 14px; color: var(--text); }
.bulk-pick { margin-bottom: var(--space-3); }
.bulk-row { cursor: pointer; padding-left: var(--space-2); padding-right: var(--space-2);
  border-radius: var(--radius-sm); border: 1px solid transparent; }
/* Picked, not finished — deliberately the blue accent, never the green
   "done" fill of .todo-check-done, which means something else everywhere. */
.bulk-row-sel { background: var(--card); border-color: var(--skip); }
.bulk-check-sel { background: var(--skip); border-color: var(--skip); color: #fff; }
.bulk-row:focus-visible { outline: 2px solid var(--skip); outline-offset: 2px; }
.bulk-bar { position: sticky; bottom: var(--space-2); z-index: 5; display: flex; align-items: center;
  gap: var(--space-2); flex-wrap: wrap; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--space-2) var(--space-3); box-shadow: var(--shadow);
  margin-top: var(--space-2); }
.bulk-bar-label { font-size: 13px; color: var(--muted); margin-right: auto; }
.bulk-bar .btn:disabled { opacity: 0.4; cursor: default; }

/* "All" view: the always-there entry point + selectable rows in that view */
.cal-bulk-start { display: flex; justify-content: flex-end; margin-bottom: var(--space-2); }
.cal-item.bulk-row-sel { background: var(--card); border-color: var(--skip); }
.cal-bulk-check { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--border);
  background: none; color: transparent; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-right: var(--space-3); }
.cal-bulk-check svg { width: 15px; height: 15px; }
/* Needs the compound selector: .cal-bulk-check sets background:none at equal
   specificity, so the plain .bulk-check-sel fill would lose on source order
   and leave a white check on a transparent circle (invisible in light mode). */
.cal-bulk-check.bulk-check-sel { background: var(--skip); border-color: var(--skip); color: #fff; }
.cal-item-locked { opacity: 0.45; }

/* ---- app launch card (home.js, 2026-09-04): zooms out of the tapped tile ---- */
.launch-card {
  position: fixed; inset: 0; z-index: 70;
  background: var(--bg);   /* the same background that ../launch.js paints next */
  animation: launch-card 0.24s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes launch-card {
  from { transform: scale(0.12); opacity: 0.6; border-radius: 80px; }
  to { transform: none; opacity: 1; border-radius: 0; }
}

/* ---- Wake-up (wakeup.js, 2026-09-03) ------------------------------------
   Full-screen start-the-day flow. Motion is CSS only: slots slide in staggered,
   icons drift, the temperature counts up in JS. Reduced motion = no motion. */
.wakeup-tile { cursor: pointer; font: inherit; }
.wakeup-tile .app-tile-icon { color: var(--warn); }
.wakeup-tile-done { opacity: 0.55; }
.wakeup-tile-done .app-tile-icon { color: var(--keep); }
.home-prio-head { color: var(--warn); }
.cal-badge-prio { color: var(--warn); font-size: 0.85rem; line-height: 1; }

.wk-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: var(--bg);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: calc(env(safe-area-inset-top, 0px) + 24px) 16px calc(env(safe-area-inset-bottom, 0px) + 32px);
  animation: wk-fade 0.25s ease-out both;
}
.wk-card { position: relative; max-width: 520px; margin: 0 auto; animation: wk-in 0.35s ease-out both; }
.wk-close {
  position: absolute; top: -6px; right: -4px; width: 40px; height: 40px;
  padding: 0; border-radius: 50%; font-size: 1.5rem; line-height: 1;
  background: var(--card-bg); color: var(--text-dim);
}
.wk-dots { display: flex; gap: 6px; height: 40px; align-items: center; }
.wk-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border); transition: background 0.2s, width 0.2s; }
.wk-dot-on { background: var(--skip); width: 18px; border-radius: 3px; }
.wk-kicker { color: var(--text-dim); font-size: 0.85rem; text-transform: capitalize; }
.wk-title { margin: 4px 0 6px; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em; }
.wk-sub { margin: 0 0 18px; color: var(--text-dim); font-size: 0.95rem; animation: wk-in 0.4s ease-out both; }

.wk-slots { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 8px; }
.wk-slot {
  display: flex; align-items: center; gap: 14px;
  background: var(--card-bg); border-radius: var(--radius); padding: 14px 16px;
  box-shadow: var(--shadow);
  animation: wk-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.wk-slot-icon { width: 36px; height: 36px; flex-shrink: 0; color: var(--skip); animation: wk-float 3.2s ease-in-out infinite; }
.wk-slot-icon svg { width: 100%; height: 100%; display: block; }
.wk-slot-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wk-slot-label { font-weight: 600; }
.wk-slot-cond { color: var(--text-dim); font-size: 0.85rem; }
.wk-slot-temp { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 2.5ch; text-align: right; }

.wk-list { display: flex; flex-direction: column; gap: 8px; }
.wk-row {
  appearance: none; font: inherit; color: var(--text); text-align: left; width: 100%;
  display: flex; align-items: center; gap: 12px;
  background: var(--card-bg); border: 1.5px solid transparent; border-radius: var(--radius);
  padding: 12px 14px; cursor: pointer; touch-action: manipulation;
  transition: border-color 0.15s, transform 0.1s;
}
.wk-row:active { transform: scale(0.985); }
.wk-star { color: var(--border); font-size: 1.25rem; line-height: 1; flex-shrink: 0; transition: color 0.15s, transform 0.2s; }
.wk-row-on { border-color: var(--warn); }
.wk-row-on .wk-star { color: var(--warn); transform: scale(1.2) rotate(-8deg); }
.wk-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wk-row-text { font-weight: 500; }
.wk-row-meta { color: var(--text-dim); font-size: 0.78rem; }

.wk-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; animation: wk-in 0.4s ease-out both; }
.wk-actions .btn { width: 100%; padding: 13px 16px; font-size: 1rem; }
.wk-big {
  font-size: 4rem; font-weight: 800; line-height: 1; color: var(--skip);
  margin: 24px 0 12px; animation: wk-pop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

@keyframes wk-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wk-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes wk-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes wk-pop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .wk-overlay, .wk-overlay * { animation: none; }
}

/* wake-up: gym day picker (7 rolling days) */
.wk-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.wk-day {
  appearance: none; font: inherit; color: var(--text); cursor: pointer; touch-action: manipulation;
  background: var(--card-bg); border: 1.5px solid transparent; border-radius: var(--radius-sm);
  padding: 10px 0 8px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: border-color 0.15s, background 0.15s;
}
.wk-day:active { transform: scale(0.96); }
.wk-day-dow { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); }
.wk-day-num { font-size: 1.1rem; font-weight: 700; }
.wk-day-on { border-color: var(--keep); background: color-mix(in srgb, var(--keep) 14%, var(--card-bg)); }
.wk-day-on .wk-day-dow { color: var(--keep); }