/* Tempo — ink-and-paper: dark ink canvas by default, the splash screen's
   cream paper as the light theme (palette shared with the Android app). */

:root {
  color-scheme: dark;
  --ink: #14161A;
  --surface1: #1C1F25;
  --surface2: #232830;
  --surface3: #2B313B;
  --outline: #3A414C;
  --text1: #F1EDE2;
  --text2: #A9A396;
  --text3: #6F6B60;
  --accent: #8B7CF0;
  --accent-dim: #2C2A4A;
  --teal: #2FB8AA;
  --danger: #E05B55;
  --success: #43B36B;
  --warn: #D99136;
  --scrim: rgba(0, 0, 0, 0.5);
}

:root[data-theme="light"] {
  color-scheme: light;
  --ink: #F6F2E9;
  --surface1: #FBF8F0;
  --surface2: #FFFDF6;
  --surface3: #FFFFFF;
  --outline: #DFD8C8;
  --text1: #1E2126;
  --text2: #6E6A5E;
  --text3: #A39E8F;
  --accent: #6B5AE8;
  --accent-dim: #E7E2F9;
  --teal: #0F9D8F;
  --danger: #DC4B45;
  --success: #2FA45B;
  --warn: #C77D1B;
  --scrim: rgba(30, 33, 38, 0.4);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
  background: radial-gradient(circle 480px at 50% -80px, color-mix(in srgb, var(--accent) 8%, transparent), transparent), var(--ink);
  color: var(--text1);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
svg { display: block; }

/* ---------------------------------------------------------------- header */

/* a whisper of raised surface fading into the canvas: light falls from the
   top in both themes, separating the header from the scroll below */
header {
  padding: calc(10px + env(safe-area-inset-top)) 20px 14px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--surface2) 55%, transparent), transparent);
}

.header-row { display: flex; align-items: center; gap: 2px; }

h1 { display: flex; align-items: center; font-size: 34px; font-weight: 700; letter-spacing: -1px; }
h1 svg { height: 33px; width: 33px; margin-right: -5px; }

/* the count pill shares the date line so title, date, and status read as one
   block instead of a chip floating among the icons */
.count-pill {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 50px;
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.header-date-row { display: flex; align-items: center; gap: 5px; margin-top: 2px; min-height: 24px; }
/* today as an hourglass: its sand level is how much of the day has run out */
#day-hg { color: var(--text3); flex-shrink: 0; }
.header-date { font-size: 14px; color: var(--text2); }

/* ≥44px touch targets (parity with the app's 48dp IconButtons) */
#theme-btn, #groups-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--text3);
}
#theme-btn .moon { display: none; }
:root[data-theme="light"] #theme-btn .sun { display: none; }
:root[data-theme="light"] #theme-btn .moon { display: block; }

/* ------------------------------------------------------------------ list */

main {
  flex: 1;
  overflow-y: auto;
  padding: 4px 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.section-label {
  margin: 10px 0 -6px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text3);
}

.empty {
  margin-top: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.empty svg { color: var(--outline); margin-bottom: 10px; }
.empty .title { font-size: 17px; font-weight: 600; color: var(--text2); }
.empty .sub { font-size: 14px; color: var(--text3); }

/* task card */
.task {
  padding: 14px;
  border-radius: 20px;
  background: var(--surface2);
  border: 1px solid color-mix(in srgb, var(--text1) 10%, transparent);
}
.task .row { display: flex; align-items: center; gap: 14px; }

/* overdue: the sand ran out */
.task.overdue { border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.task.overdue .time-block { background: color-mix(in srgb, var(--danger) 14%, transparent); }
.task.overdue .time-block .clock, .task.overdue .time-block .rel { color: var(--danger); }

/* card hourglass: the sand level is the time remaining, grains fall while
   any is left — green, then amber inside 12 hours, red inside the last 3 */
.task .sand-row {
  display: flex;
  align-items: center;
  margin-top: 10px;
  color: var(--success);
}
.task .sand-row.mid { color: var(--warn); }
.task .sand-row.low { color: var(--danger); }
.task .hg-mini { flex-shrink: 0; }
.hg-grain { animation: hg-fall 0.7s linear infinite; }
@keyframes hg-fall {
  from { transform: translateY(0); }
  to { transform: translateY(var(--fall)); }
}
@media (prefers-reduced-motion: reduce) {
  .hg-grain { animation: none; visibility: hidden; }
}

/* one-tap reschedule for overdue tasks */
.task .resched { display: flex; gap: 8px; margin-top: 10px; }
.re-chip {
  padding: 7px 14px;
  border-radius: 50px;
  background: color-mix(in srgb, var(--teal) 12%, transparent);
  color: var(--teal);
  font-size: 14px;
  font-weight: 600;
}

.task .time-block {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.task .time-block .clock { font-size: 14px; font-weight: 600; color: var(--accent); }
.task .time-block .rel { font-size: 12px; font-weight: 500; color: var(--text2); }
/* rescheduling flips the hourglass: the time block turns over, then the task moves */
.task .time-block { transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.task .time-block.flip { transform: rotate(180deg); }

.task .body { flex: 1; min-width: 0; }
.task .title { font-size: 17px; font-weight: 600; letter-spacing: -0.2px; overflow-wrap: break-word; }
.task .notes { font-size: 14px; color: var(--text2); }
.task .repeat-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  color: var(--teal);
}

.task .icon-btn { flex-shrink: 0; padding: 4px; color: var(--text3); }
.task .icon-btn.danger:active { color: var(--danger); }

.done-circle {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--text3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s, border-color 0.2s;
}
.done-circle.checked {
  transform: scale(1.25);
  background: var(--success);
  border-color: var(--success);
  color: var(--ink);
}

/* done card */
.done-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface3) 55%, transparent);
}
.done-card svg:first-child { color: var(--success); flex-shrink: 0; }
.done-card .title {
  flex: 1;
  font-size: 14px;
  color: var(--text3);
  text-decoration: line-through;
  overflow-wrap: anywhere;
}
.done-card .icon-btn { padding: 4px; color: var(--text3); }

/* stats card: how much sand has already made it through the glass */
.stats-card {
  padding: 16px;
  border-radius: 20px;
  background: var(--surface2);
  border: 1px solid color-mix(in srgb, var(--text1) 10%, transparent);
}
.stats-card .headline { font-size: 17px; font-weight: 600; letter-spacing: -0.2px; }
.stats-card .headline b { color: var(--accent); }
.stats-card .sub { margin-top: 2px; font-size: 14px; color: var(--text2); }

/* ----------------------------------------------------------- first-run hint */

.hint {
  margin: 0 16px 6px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--surface3);
  border: 1px solid var(--outline);
  display: flex;
  align-items: center;
  gap: 12px;
}
/* display:flex above would otherwise override the hidden attribute */
.hint[hidden] { display: none; }
.hint p { flex: 1; font-size: 13px; color: var(--text2); }
.hint button { color: var(--accent); font-size: 14px; font-weight: 600; white-space: nowrap; }

/* --------------------------------------------------------- preview card */

/* gradient border via a 1px-padded gradient wrapper */
.preview {
  margin: 6px 16px;
  padding: 1px;
  border-radius: 24px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 55%, transparent), color-mix(in srgb, var(--teal) 35%, transparent));
  animation: preview-in 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
}
@keyframes preview-in {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.preview .inner { border-radius: 23px; background: var(--surface3); padding: 18px; }

.preview .head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.4px;
  color: var(--accent);
}
.preview .head .dismiss { margin-left: auto; padding: 2px; color: var(--text2); }

.preview .divider { height: 1px; margin: 12px 0 0; background: color-mix(in srgb, var(--text1) 10%, transparent); }

.preview .task-title-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.preview .task-title { flex: 1; font-size: 22px; font-weight: 600; letter-spacing: -0.5px; }
.preview .task-title.small { font-size: 17px; letter-spacing: -0.2px; }
.preview .task-notes { margin-top: 2px; font-size: 14px; color: var(--text2); }
.preview .remove { padding: 2px; color: var(--text3); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.chip {
  position: relative;
  flex-shrink: 0;
  padding: 7px 14px;
  border-radius: 50px;
  background: color-mix(in srgb, var(--teal) 12%, transparent);
  color: var(--teal);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
/* native date/time input hidden behind its chip so the OS picker opens on tap */
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }

.preview .confirm-row { display: flex; gap: 10px; margin-top: 16px; }
.preview .confirm {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
  padding: 13px;
  border-radius: 16px;
  background: var(--accent);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}
.preview .confirm.alt {
  flex: 0 0 auto;
  padding: 13px 16px;
  background: var(--surface2);
  border: 1px solid var(--outline);
  color: var(--text1);
}
.preview .confirm.alt svg { color: var(--teal); }
.preview .confirm:active { filter: brightness(1.1); }

/* ------------------------------------------------------------- input bar */

/* --kb is the soft-keyboard height (set from visualViewport in app.js): it
   lifts the input bar above the iOS keyboard and compresses the list, since
   the layout viewport doesn't shrink there */
footer {
  padding: 0 16px calc(10px + env(safe-area-inset-bottom));
  margin-bottom: var(--kb, 0px);
  transition: margin-bottom 0.15s ease-out;
}

/* quick time chips: typed a title but no time yet? one tap finishes the sentence */
.quick-chips {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.quick-chips::-webkit-scrollbar { display: none; }
.quick-chips[hidden] { display: none; }
.quick-chips button {
  flex-shrink: 0;
  padding: 7px 14px;
  border-radius: 50px;
  background: color-mix(in srgb, var(--teal) 12%, transparent);
  color: var(--teal);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.input-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 8px 8px 18px;
  border-radius: 26px;
  background: var(--surface2);
  border: 1px solid var(--outline);
}

.input-bar input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  color: var(--text1);
  font: inherit;
  caret-color: var(--accent);
}
.input-bar input::placeholder { color: var(--text3); }

.send {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* thinking hourglass: sand drains ~0.9s, then the glass flips 180° in ~0.35s */
.send .hg { display: none; }
.send .hg svg { animation: hg-flip 1.25s linear infinite; }
.hg-sand-top { animation: hg-drain 1.25s linear infinite; }
.hg-sand-bot { animation: hg-fill 1.25s linear infinite; }
@keyframes hg-drain { 0% { transform: none; } 72%, 100% { transform: translateY(8px); } }
@keyframes hg-fill { 0% { transform: none; } 72%, 100% { transform: translateY(-8px); } }
@keyframes hg-flip { 0%, 72% { transform: none; } 100% { transform: rotate(180deg); } }

.input-bar.thinking .send > svg { display: none; }
.input-bar.thinking .send .hg { display: block; }

/* empty field → mic (speak the reminder) where the browser supports it */
.send .mic { display: none; }
.input-bar.voice:not(.thinking) .send { background: var(--surface3); color: var(--accent); }
.input-bar.voice:not(.thinking) .send .arrow { display: none; }
.input-bar.voice:not(.thinking) .send .mic { display: block; }

/* -------------------------------------------------------- v1.5 dashboard */

/* group filter chips pinned under the header */
.group-chips {
  display: flex;
  gap: 8px;
  padding: 0 20px 8px;
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
}
.group-chips::-webkit-scrollbar { display: none; }
.group-chips[hidden] { display: none; }
.g-chip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 50px;
  background: var(--surface2);
  border: 1px solid var(--outline);
  color: var(--text2);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.g-chip .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gc); }
.g-chip.sel {
  background: color-mix(in srgb, var(--gc) 16%, transparent);
  border-color: var(--gc);
  color: var(--text1);
}

/* hero: the very next reminder, big time, live countdown */
.task.hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 22px;
  background: linear-gradient(120deg, var(--accent-dim), var(--surface2));
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
.task.hero .hero-time { flex-shrink: 0; display: flex; flex-direction: column; }
.task.hero .hero-time .big { font-size: 30px; font-weight: 700; letter-spacing: -1px; color: var(--accent); }
.task.hero .hero-time .cd { font-size: 13px; color: var(--text2); }
.task.hero .hero-sub {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text2);
}
.task.hero .hero-sub .dot { width: 8px; height: 8px; border-radius: 50%; }
.task.hero .hg-mini { flex-shrink: 0; color: var(--accent); }

/* quick actions at the foot of the dashboard */
.quick-actions {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.quick-actions::-webkit-scrollbar { display: none; }
.qa {
  flex-shrink: 0;
  padding: 7px 14px;
  border-radius: 50px;
  background: var(--surface2);
  border: 1px solid var(--outline);
  color: var(--text2);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

/* "What time?" follow-up in the preview */
.ask-time { margin-top: 10px; }
.ask-time > span { font-size: 14px; font-weight: 600; color: var(--accent); }

/* autocomplete from past reminders, above the input bar */
.suggest { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.suggest[hidden] { display: none; }
.suggest button {
  text-align: left;
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--surface2);
  color: var(--text2);
  font-size: 14px;
}

/* a Today card lifted for drag-reordering */
.task.lifting {
  position: relative;
  z-index: 5;
  opacity: 0.95;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* ----------------------------------------------------------------- toast */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom));
  transform: translate(-50%, 16px);
  max-width: 85vw;
  padding: 12px 18px;
  border-radius: 14px;
  background: var(--surface3);
  border: 1px solid var(--outline);
  color: var(--text1);
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast-act { margin-left: 14px; color: var(--accent); font-weight: 600; font-size: 14px; }