/* LifeHQ — a warm plum/pastel palette (v2, replacing the original flat gray
   functional-first pass). Every text/tint pair below was measured against
   WCAG relative luminance before being picked, not eyeballed — pastels are
   easy to get "pretty but fails contrast," which is exactly what happened
   on the first two attempts at the business segment's teal (see git history
   if this ever needs re-deriving): green/teal hues need much more
   darkening-for-light-mode-text than blue or purple do, because green
   contributes far more to perceived luminance per the sRGB coefficients.

   Roles, so this stays sane to extend:
   --color-accent        = solid fill (buttons, active pills) — same hex
                            both modes, since it's always paired with white
                            text regardless of page background.
   --color-accent-fg     = accent used AS TEXT directly on the page surface
                            (nav active label, links) — needs a different,
                            mode-specific shade because "safe on white" and
                            "safe on near-black" are different requirements.
   --color-accent-soft   = decorative pastel tint (never used for text).
   --segment-*           = solid, text-safe color for that segment (badge
                            text, calendar dots).
   --segment-*-tint      = pastel background for that segment's badge. */

:root {
  --color-bg: #f8f3fb;
  --color-surface: #ffffff;
  --color-border: #e8dcf0;
  --color-text: #2b2438;
  --color-text-muted: #7a6f8a;

  --color-accent: #b81a52;
  --color-accent-text: #ffffff;
  --color-accent-fg: #b81a52;
  --color-accent-soft: #ffe0ec;

  --color-danger: #d92d20;
  --color-success: #1a9e4a;
  --color-warning: #e8930f;

  --segment-personal: #1c64d1;
  --segment-personal-tint: #e3efff;
  --segment-family: #7c2fc7;
  --segment-family-tint: #f1e5ff;
  --segment-business: #0a7355;
  --segment-business-tint: #d7f7ec;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --radius: 10px;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --nav-height: 64px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1a1420;
    --color-surface: #241c2e;
    --color-border: #3a2f47;
    --color-text: #f3edf7;
    --color-text-muted: #a99bb8;

    --color-accent-fg: #ff6fa5;
    --color-accent-soft: #4a1830;

    --color-danger: #ff6b5e;

    --segment-personal: #6ba8ff;
    --segment-personal-tint: #16294a;
    --segment-family: #c294f0;
    --segment-family-tint: #331d47;
    --segment-business: #4fd6ac;
    --segment-business-tint: #0f3329;
  }
}

* { box-sizing: border-box; }

/* The `hidden` attribute's UA-stylesheet `display:none` loses to any
   same-specificity author class rule that also sets `display` (e.g.
   `.category-grid { display: grid }`), regardless of source order — so an
   element toggled via `.hidden = true/false` in JS can stay visible even
   while `hidden` is present. Force it to always win. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font);
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}

body {
  padding-bottom: calc(var(--nav-height) + var(--safe-bottom));
  min-height: 100vh;
}

a { color: var(--color-accent-fg); }

button, input, select, textarea {
  font-family: inherit;
  font-size: 1rem;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.app-header h1 {
  font-size: 1.125rem;
  margin: 0;
}

.icon-btn {
  background: none;
  border: none;
  color: var(--color-text);
  font-size: 1.25rem;
  cursor: pointer;
  padding: var(--space-2);
  line-height: 1;
}

main {
  padding: var(--space-4);
  max-width: 640px;
  margin: 0 auto;
}

.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--color-border);
  display: flex;
  padding-bottom: var(--safe-bottom);
}

.bottom-nav a {
  flex: 1;
  text-align: center;
  padding: var(--space-2) 0;
  font-size: 0.7rem;
  color: var(--color-text-muted);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.bottom-nav a .icon {
  width: 30px;
  height: 22px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .15s;
}
.bottom-nav a.active .icon { background: var(--color-accent-soft); }
.bottom-nav a .icon svg { width: 21px; height: 21px; }
.bottom-nav a.active { color: var(--color-accent-fg); font-weight: 600; }

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--color-text) 6%, transparent);
}

.card h2 {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}

/* Reserved for genuinely time-critical content (e.g. Overdue on Home) so it
   reads as more urgent than a routine section, not just another gray box. */
.card--urgent {
  border-color: var(--color-danger);
  border-width: 1.5px;
}
.card--urgent h2 { color: var(--color-danger); }

.list { list-style: none; margin: 0; padding: 0; }

.list-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.list-item:last-child { border-bottom: none; }
.list-item:active { background: color-mix(in srgb, var(--color-text) 5%, transparent); }

.list-item.is-done .list-item-title {
  text-decoration: line-through;
  color: var(--color-text-muted);
}

.checkbox {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  padding: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  flex-shrink: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .1s;
}
.checkbox.checked {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
.checkbox:active {
  transform: scale(0.88);
}

.list-item-body { flex: 1; min-width: 0; }
.list-item-title { font-weight: 500; word-break: break-word; }
.list-item-meta { font-size: 0.8rem; color: var(--color-text-muted); margin-top: 2px; }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
}
.badge-personal { background: var(--segment-personal-tint); color: var(--segment-personal); }
.badge-family { background: var(--segment-family-tint); color: var(--segment-family); }
.badge-business { background: var(--segment-business-tint); color: var(--segment-business); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  min-height: 44px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 600;
  cursor: pointer;
  transition: transform .1s;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-text);
}
.btn-danger { color: var(--color-danger); border-color: var(--color-danger); background: none; }
.btn-block { width: 100%; }
.btn-sm { padding: var(--space-1) var(--space-3); min-height: 36px; font-size: 0.8rem; }

.field { margin-bottom: var(--space-4); }
.field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: var(--space-3);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
}
.field textarea { resize: vertical; min-height: 72px; }

.capture-input-wrap { position: relative; }
.capture-input-wrap textarea { padding-right: 52px; }
.mic-btn {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .1s;
}
.mic-btn:active { transform: scale(0.92); }
.mic-btn.listening {
  background: var(--color-danger);
  color: #fff;
  animation: mic-pulse 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .mic-btn.listening { animation: none; }
}
@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-danger) 40%, transparent); }
  50% { box-shadow: 0 0 0 8px transparent; }
}

.quick-add {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.quick-add input { flex: 1; min-width: 0; }

.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 6px;
  animation: spin 0.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; opacity: 0.6; }
}
@keyframes spin { to { transform: rotate(360deg); } }

.category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.category-block {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  text-align: left;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4);
  min-height: 96px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--color-text) 6%, transparent);
  transition: transform .1s;
}
.category-block:active { transform: scale(0.97); }
.category-block .emoji { font-size: 1.5rem; }
.category-block .name { font-weight: 700; color: var(--color-text); }
.category-block .count { font-size: 0.75rem; color: var(--color-text-muted); }
.category-block.new-block {
  align-items: center;
  justify-content: center;
  color: var(--color-accent-fg);
  border-style: dashed;
  box-shadow: none;
}

.tabs { display: flex; gap: var(--space-2); overflow-x: auto; margin-bottom: var(--space-4); padding-bottom: var(--space-1); }
.tabs button {
  white-space: nowrap;
  padding: var(--space-2) var(--space-4);
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
}
.tabs button.active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-bottom: var(--space-4); }
.stat { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-4); text-align: center; }
.stat .num { font-size: 1.5rem; font-weight: 700; }
.stat .lbl { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); }
.stat.in .num { color: var(--color-success); }
.stat.out .num { color: var(--color-danger); }

.empty-state { text-align: center; padding: var(--space-6) var(--space-4); color: var(--color-text-muted); }

.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  display: none; align-items: flex-end; justify-content: center; z-index: 50;
}
.modal-overlay.open { display: flex; }
.modal-sheet {
  background: var(--color-surface);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: var(--space-5);
  width: 100%;
  max-width: 640px;
  max-height: 85vh;
  overflow-y: auto;
  padding-bottom: calc(var(--space-5) + var(--safe-bottom));
}
.modal-sheet h2 { margin-top: 0; }

.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.calendar-grid .day-name { text-align: center; font-size: 0.7rem; color: var(--color-text-muted); padding: var(--space-2) 0; }
.calendar-day {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: inherit;
  display: block;
  width: 100%;
  text-align: left;
  aspect-ratio: 1;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 4px;
  font-size: 0.75rem;
  position: relative;
  cursor: pointer;
  background: var(--color-surface);
  transition: transform .1s;
}
.calendar-day:active { transform: scale(0.94); }
.calendar-day.other-month { opacity: 0.35; }
.calendar-day.is-today { border-color: var(--color-accent); border-width: 2px; }
.calendar-day .dots { position: absolute; bottom: 4px; left: 4px; right: 4px; display: flex; gap: 2px; flex-wrap: wrap; }
.calendar-day .dot { width: 6px; height: 6px; border-radius: 50%; }

.month-switcher { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.month-switcher button { background: none; border: none; font-size: 1.25rem; cursor: pointer; color: var(--color-text); padding: var(--space-2); }

.login-wrap {
  min-height: 100vh; /* fallback for browsers without dvh */
  min-height: 100dvh; /* excludes the collapsing Safari toolbar, so this can't overflow into a scrollbar */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}
.login-box { width: 100%; max-width: 360px; }
.login-box h1 { text-align: center; margin-bottom: var(--space-5); }

.toast {
  position: fixed;
  bottom: calc(var(--nav-height) + var(--safe-bottom) + var(--space-3));
  left: var(--space-4);
  right: var(--space-4);
  max-width: 400px;
  margin: 0 auto;
  text-align: center;
  background: var(--color-text);
  color: var(--color-bg);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  font-size: 0.875rem;
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.toast.show { opacity: 1; }

/* Capture is an optional, not-yet-wired-up feature — kept collapsed by
   default (native <details>, no JS needed for expand/collapse, and it's
   free keyboard/screen-reader support) so it doesn't outweigh the actually
   time-critical content above it on Home. */
details.card {
  padding: 0;
}
details.card summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-4);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
details.card summary::-webkit-details-marker { display: none; }
details.card summary::after {
  content: '+';
  font-size: 1.25rem;
  color: var(--color-text-muted);
  line-height: 1;
}
details.card[open] summary::after { content: '–'; }
details.card[open] summary { border-bottom: 1px solid var(--color-border); }
details.card .details-body { padding: var(--space-4); }

.a2hs-hint {
  background: var(--color-accent-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.link-btn { background: none; border: none; color: var(--color-accent-fg); cursor: pointer; font-weight: 600; padding: 0; }

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