/* ==========================================================
   Productivity app — Slice 1.2 stylesheet
   Warm earth-tone palette, battery as the visual hero.
   ========================================================== */

/* ---------- tokens ---------- */
:root {
  --bg-top:    #f7f1e3;
  --bg-mid:    #ebe2cf;
  --bg-bot:    #d8cdb6;

  --surface:        #fdfaf3;
  --surface-2:      #f6f0e0;
  --surface-strong: #fffdf6;

  --line:      rgba(120, 100, 60, 0.18);
  --line-soft: rgba(120, 100, 60, 0.10);
  --line-strong: rgba(50, 35, 15, 0.55);

  --fg:    #2a221a;
  --fg-2:  #4a3f30;
  --muted: #7d7060;

  --accent:        #5b6e58;
  --accent-2:      #475744;
  --accent-soft:   #c6cfc2;
  --accent-warm:   #a86b3c;

  --restore:       #6b8c66;
  --restore-soft:  #d9e4d7;

  /* Eisenhower quadrant earth tones */
  --q1-bg: #f3d9d0; --q1-fg: #7a2a18; --q1-bar: #b8492a;
  --q2-bg: #d6dbe5; --q2-fg: #2c4159; --q2-bar: #4a6385;
  --q3-bg: #f1deb1; --q3-fg: #6b4c1a; --q3-bar: #b78e2a;
  --q4-bg: #e5dfd0; --q4-fg: #58504a; --q4-bar: #978c7c;

  /* Battery fill colours by state */
  --batt-healthy:  linear-gradient(90deg, #8aa085, #5b6e58);
  --batt-low:      linear-gradient(90deg, #d4a651, #b78e2a);
  --batt-critical: linear-gradient(90deg, #d36540, #b8492a);

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --shadow-sm: 0 1px 2px rgba(80, 60, 30, 0.06);
  --shadow:    0 4px 16px rgba(80, 60, 30, 0.08);
  --shadow-soft: 0 2px 8px rgba(80, 60, 30, 0.05);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--bg-mid); }

body {
  font-family: -apple-system, "Segoe UI", system-ui, "Inter", sans-serif;
  color: var(--fg);
  line-height: 1.5;
  font-feature-settings: "tnum" 1;
  min-height: 100vh;
  padding-bottom: 56px;
  position: relative;
  background:
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 45%, var(--bg-bot) 100%) fixed;
}

.ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse at 80% -10%, rgba(255, 240, 215, 0.55), transparent 55%),
    radial-gradient(ellipse at 10% 105%, rgba(210, 195, 165, 0.35), transparent 60%);
}

.topbar, .battery-hero, .day-layout, .multi-grid-wrap, .month-shell,
.form-shell, .task-shell, .legend, .floating-strip { position: relative; z-index: 1; }

a { color: inherit; text-decoration: none; }
.muted { color: var(--muted); font-weight: 400; }
.small { font-size: 11px; }

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  background: rgba(253, 250, 243, 0.88);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.topbar-left {
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap;
}
.date-nav { display: flex; align-items: center; gap: 8px; }
.date-block { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.date-day { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.date-rest { font-size: 12px; color: var(--muted); }
/* Phone-only short date (day-of-month). Hidden on desktop because
   .date-rest already carries the full date there. */
.date-dd { display: none; }
.header-actions { display: flex; gap: 8px; }

.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--fg);
  font-size: 18px; line-height: 1;
  cursor: pointer;
  transition: background .15s ease;
}
.btn-icon:hover { background: var(--surface-2); }

.btn-today, .btn-secondary {
  display: inline-flex; align-items: center;
  padding: 6px 11px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 13px; font-weight: 500;
  color: var(--fg);
  cursor: pointer;
  transition: background .15s ease;
}
.btn-today:hover, .btn-secondary:hover { background: var(--surface-2); }

.btn-add, .btn-primary {
  display: inline-flex; align-items: center;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: white;
  border: 0;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background .15s ease, transform .1s ease;
}
.btn-add:hover, .btn-primary:hover { background: var(--accent-2); }
.btn-add:active, .btn-primary:active { transform: translateY(1px); }

.btn-danger {
  padding: 8px 14px;
  border-radius: var(--r-sm);
  background: var(--surface);
  color: #8b2e1f;
  border: 1px solid rgba(184, 73, 42, 0.4);
  font-size: 14px; font-weight: 600;
  cursor: pointer;
}
.btn-danger:hover { background: rgba(243, 217, 208, 0.5); }

.btn-mini {
  padding: 3px 10px;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: white;
  border: 0;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
}
.btn-mini:hover { background: var(--accent-2); }

.view-switch {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 2px;
  gap: 0;
}
.view-btn {
  padding: 5px 11px;
  border-radius: 6px;
  font-size: 13px; font-weight: 500;
  color: var(--fg-2);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.view-btn:hover { color: var(--fg); background: rgba(255, 253, 246, 0.7); }
.view-btn.active {
  background: var(--surface-strong);
  color: var(--fg);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

/* ==========================================================
   BATTERY — the hero of every screen
   ========================================================== */

.battery-shape {
  display: inline-flex; align-items: center;
  user-select: none;
}
.battery-body {
  position: relative;
  border-style: solid;
  border-color: var(--line-strong);
  border-radius: var(--r-sm);
  background: rgba(255, 252, 244, 0.5);
  overflow: hidden;
  flex-shrink: 0;
}
.battery-fill {
  position: absolute;
  left: 2px; top: 2px; bottom: 2px;
  width: 100%;
  border-radius: 4px;
  transition: width .35s ease-out, background .25s ease;
}
.battery-fill.battery-healthy  { background: var(--batt-healthy); }
.battery-fill.battery-low      { background: var(--batt-low); }
.battery-fill.battery-critical { background: var(--batt-critical); }
.battery-nub {
  background: var(--line-strong);
  flex-shrink: 0;
  margin-left: 1px;
  border-radius: 0 2px 2px 0;
}

/* Hero card — day view. Scoped to `section.battery-hero` so the card's
   layout rules don't leak into the inner `<div class="battery-shape
   battery-hero">` that wraps the actual battery graphic. Without the
   `section` qualifier, the inner div inherited `flex-wrap: wrap` and the
   nub dropped onto a new line below the body. */
section.battery-hero {
  display: flex; align-items: center;
  gap: 24px;
  margin: 18px 20px 4px;
  padding: 20px 24px;
  background:
    linear-gradient(135deg, rgba(253, 250, 243, 0.9), rgba(246, 240, 224, 0.75));
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
  flex-wrap: wrap;
}
.battery-hero-shape { flex-shrink: 0; }
.battery-hero .battery-shape { }
.battery-hero .battery-body {
  width: 280px;
  height: 64px;
  border-width: 3px;
  border-radius: 10px;
}
.battery-hero .battery-fill {
  left: 3px; top: 3px; bottom: 3px;
  border-radius: 5px;
  width: calc(100% - 6px);
  /* width is overridden inline; the inline width works against the body bounds */
}
.battery-hero .battery-nub {
  width: 10px; height: 30px;
  border-radius: 0 4px 4px 0;
  margin-left: 2px;
}

/* Quarter + half graduation marks on the hero battery — dashed vertical
   lines at 25%, 50%, 75% so fill level reads at a glance. The 50% mark
   is slightly wider and darker so it clearly reads as the half
   indicator vs the two quarter marks. The pseudo-element sits above
   the fill, so marks stay visible whether the battery is empty,
   mid-charge, or full. */
.battery-hero .battery-body::before {
  content: "";
  position: absolute;
  left: 3px; right: 3px; top: 3px; bottom: 3px;
  z-index: 3;
  pointer-events: none;
  background-image:
    linear-gradient(to bottom, rgba(40, 28, 12, 0.32) 50%, transparent 50%),
    linear-gradient(to bottom, rgba(40, 28, 12, 0.45) 50%, transparent 50%),
    linear-gradient(to bottom, rgba(40, 28, 12, 0.32) 50%, transparent 50%);
  background-size: 1.5px 8px, 2.5px 8px, 1.5px 8px;
  background-position: 25% 0, 50% 0, 75% 0;
  background-repeat: repeat-y;
}

.battery-hero-info {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
}
.battery-hero-number {
  font-size: 36px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1; color: var(--fg);
  display: flex; align-items: baseline; gap: 4px;
}
.battery-hero-number .of {
  font-size: 18px; font-weight: 400; color: var(--muted);
}
.battery-hero-sub {
  font-size: 13px; color: var(--muted);
}
.battery-hero-breakdown {
  display: flex; gap: 8px; margin-top: 2px;
}
.drain-chip, .restore-chip {
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.drain-chip { background: rgba(184, 73, 42, 0.12); color: #8b2e1f; }
.restore-chip { background: var(--restore-soft); color: #2e4a2c; }

.battery-hero-supply {
  margin-left: auto;
  display: flex; align-items: center; gap: 6px;
  font-size: 12px;
}
.battery-hero-supply input[type="number"] {
  width: 72px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  background: var(--surface-strong);
  color: var(--fg);
}
.battery-hero-supply input:focus {
  outline: 2px solid var(--accent-soft);
  outline-offset: -1px;
  border-color: var(--accent);
}

/* Small size — multiday column header */
.battery-small .battery-body {
  width: 100%;
  height: 18px;
  border-width: 2px;
  border-radius: 4px;
}
.battery-small .battery-fill {
  left: 1px; top: 1px; bottom: 1px;
  border-radius: 2px;
  width: calc(100% - 2px);
}
.battery-small .battery-nub {
  width: 4px; height: 10px;
  margin-left: 1px;
  border-radius: 0 2px 2px 0;
}

/* Medium — not currently used but available */
.battery-medium .battery-body {
  width: 100%;
  height: 28px;
  border-width: 2px;
  border-radius: 6px;
}
.battery-medium .battery-fill { left: 2px; top: 2px; bottom: 2px; border-radius: 3px; width: calc(100% - 4px); }
.battery-medium .battery-nub { width: 5px; height: 14px; margin-left: 1px; }

/* Mini — month cell */
.battery-mini .battery-body {
  width: 100%;
  height: 8px;
  border-width: 1px;
  border-radius: 2px;
}
.battery-mini .battery-fill {
  left: 1px; top: 1px; bottom: 1px;
  border-radius: 1px;
  width: calc(100% - 2px);
}
.battery-mini .battery-nub {
  width: 2px; height: 4px;
  margin-left: 1px;
}

/* ---------- day view layout ---------- */
.day-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  padding: 12px 20px 80px;
  align-items: start;
}

.time-column {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.grid-canvas {
  position: relative;
  height: 1080px;
}
.hour-row {
  position: absolute;
  left: 0; right: 0;
  height: 60px;
  border-top: 1px solid var(--line-soft);
}
.hour-row:first-of-type { border-top: 0; }
.hour-label {
  position: absolute;
  left: 8px; top: -7px;
  background: var(--surface);
  padding: 0 4px;
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

/* tasks on the grid */
.task {
  position: absolute;
  left: 56px; right: 12px;
  border-radius: var(--r-sm);
  padding: 6px 10px;
  display: flex; flex-direction: column; gap: 2px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  min-height: 28px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.task:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.task .task-title {
  font-weight: 600; font-size: 14px; line-height: 1.2;
  /* Title is the most important glanceable info: it never shrinks and
     never gets clipped before the meta row. */
  flex: 0 0 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task .task-meta {
  font-size: 11px; opacity: .85;
  display: flex; gap: 6px; flex-wrap: nowrap;
  /* Meta is allowed to clip / shrink. Title wins. */
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
}
.task.done { opacity: 0.55; }
.task.done .task-title { text-decoration: line-through; }

.now-line {
  position: absolute;
  left: 0; right: 0;
  height: 0;
  border-top: 2px solid #c4502d;
  z-index: 5;
  pointer-events: none;
}
.now-line::before {
  content: "";
  position: absolute;
  left: -5px; top: -6px;
  width: 10px; height: 10px;
  background: #c4502d;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(196, 80, 45, 0.18);
}

/* quadrant colours */
.task-q1, .task-card.task-q1, .task-detail-card.task-q1 {
  background: var(--q1-bg); color: var(--q1-fg); border-left: 4px solid var(--q1-bar);
}
.task-q2, .task-card.task-q2, .task-detail-card.task-q2 {
  background: var(--q2-bg); color: var(--q2-fg); border-left: 4px solid var(--q2-bar);
}
.task-q3, .task-card.task-q3, .task-detail-card.task-q3 {
  background: var(--q3-bg); color: var(--q3-fg); border-left: 4px solid var(--q3-bar);
}
.task-q4, .task-card.task-q4, .task-detail-card.task-q4 {
  background: var(--q4-bg); color: var(--q4-fg); border-left: 4px solid var(--q4-bar);
}

/* restore tasks: add a green right-border tint and slightly tint the bg */
.task.is-recuperation, .task-card.is-recuperation, .task-detail-card.is-recuperation {
  box-shadow: var(--shadow-sm), inset -3px 0 0 var(--restore);
}
.task.is-recuperation:hover, .task-card.is-recuperation:hover {
  box-shadow: var(--shadow), inset -3px 0 0 var(--restore);
}

/* Side-by-side stacked tasks (when 2+ overlap in time) get tighter padding
   and stronger left-border so they read as distinct narrow chips. */
.task.is-stacked {
  padding: 4px 6px;
  border-left-width: 3px;
}
.task.is-stacked .task-title {
  font-size: 12px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.task.is-stacked .task-meta {
  font-size: 10px;
  /* In narrow side-by-side columns the title is the only thing worth
     showing. Hide meta entirely — the user can click for full details. */
  display: none;
}
.task.is-stacked .badge { padding: 0 4px; }

.badge {
  display: inline-flex; align-items: center;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255, 252, 244, 0.55);
  font-size: 11px; font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.effort-badge { font-weight: 600; }
.is-recuperation .effort-badge { background: var(--restore-soft); color: #2e4a2c; }

/* ---------- floating panel (day view) ---------- */
.floating-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  position: sticky;
  top: 16px;
  box-shadow: var(--shadow-soft);
}
.floating-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  gap: 8px;
}
.floating-header h2 {
  margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.toggle-floating {
  background: transparent; border: 0; cursor: pointer;
  font-size: 16px; line-height: 1; padding: 0 6px;
  color: var(--muted);
  margin-left: auto;
}
.floating-body {
  padding: 8px;
  display: flex; flex-direction: column; gap: 6px;
  max-height: 70vh;
  overflow-y: auto;
}
.floating-panel.collapsed .floating-body { display: none; }

.task-card {
  display: flex; flex-direction: column; gap: 3px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.task-card:hover { box-shadow: var(--shadow); }
.task-card .task-title { font-weight: 600; font-size: 14px; word-break: break-word; }
.task-card .task-meta { font-size: 11px; display: flex; gap: 4px; opacity: .85; }
.task-card.done { opacity: .55; }
.task-card.done .task-title { text-decoration: line-through; }
.empty { color: var(--muted); font-style: italic; padding: 8px; margin: 0; font-size: 13px; }

/* ==========================================================
   MULTI-DAY VIEW (3-day / Next 7 / Week)
   ----------------------------------------------------------
   One CSS grid, one scroll container. Columns line up by
   construction; the day cards above and the time-grid below
   scroll together because they ARE one element.

   Each component is self-contained in its own block:
     1. Wrap          — the single scroll port
     2. Grid          — the layout (rows × columns)
     3. Day header    — row 1, sticky to top of wrap
     4. Hour gutter   — column 1, sticky to left of wrap
     5. Corner cell   — row 1 col 1, sticky in both axes
     6. Day canvas    — row 2 cols 2..n, where tasks live
     7. Task chips    — sized for the canvas

   To tweak any one piece, edit only its block. Nothing
   cross-references anything else. Mobile overrides live
   immediately under each block.
   ========================================================== */

/* ---- 1. WRAP — the single horizontal-and-vertical scroll port ---- */
.multi-grid-wrap {
  margin: 16px 20px 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-soft);
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  /* Calendar viewport height — leaves room for topbar above and the
     floating-strip below. clamp() keeps it sensible on tall + short
     screens; 100dvh handles iOS Safari's collapsing toolbar. */
  height: clamp(420px, calc(100dvh - var(--topbar-h, 60px) - 200px), 920px);
}
@media (max-width: 600px) {
  .multi-grid-wrap {
    margin: 10px 10px 0;
    height: clamp(380px, calc(100dvh - var(--topbar-h, 60px) - 120px), 100dvh);
  }
}

/* ---- 2. GRID — rows × columns; ONE source of truth for alignment ---- */
.multi-grid {
  display: grid;
  grid-template-columns: 52px repeat(var(--n-days), minmax(120px, 1fr));
  grid-template-rows: auto 1fr;
  gap: 0;
  min-width: max-content;
}
@media (max-width: 600px) {
  .multi-grid {
    grid-template-columns: 36px repeat(var(--n-days), minmax(86px, 1fr));
  }
}
@media (max-width: 420px) {
  .multi-grid {
    grid-template-columns: 32px repeat(var(--n-days), minmax(76px, 1fr));
  }
}

/* ---- 3. DAY HEADER — row 1, sticky-top within the wrap ---- */
.multi-grid-header {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 10px 8px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.day-header { cursor: pointer; transition: background .15s ease; }
.day-header:hover { background: var(--surface-strong); }
.day-header.today {
  background: linear-gradient(180deg, rgba(168, 107, 60, 0.10), var(--surface-2));
}
.day-header-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 6px;
}
.day-dow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}
.day-header.today .day-dow { color: var(--accent-warm); }
.day-date { font-size: 14px; font-weight: 600; color: var(--fg); }
.day-header-numbers {
  font-size: 11px; font-variant-numeric: tabular-nums;
  color: var(--fg-2);
  display: flex; gap: 4px;
}
.day-header-numbers strong { color: var(--fg); font-weight: 700; }
@media (max-width: 600px) {
  .multi-grid-header { padding: 8px 6px; gap: 4px; }
  .day-date { font-size: 13px; }
}

/* ---- 4. HOUR GUTTER — column 1, sticky-left within the wrap ---- */
.hour-gutter {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--surface);
  border-right: 1px solid var(--line);
}
.hour-mark {
  position: absolute;
  left: 0; right: 0;
  height: 60px;
  border-top: 1px solid var(--line-soft);
}
.hour-mark:first-child { border-top: 0; }
.hour-mark-label {
  position: absolute;
  left: 6px; top: -7px;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  background: var(--surface);
  padding: 0 3px;
}
@media (max-width: 600px) {
  .hour-mark-label {
    left: 2px; font-size: 9px; padding: 0 2px;
  }
}

/* ---- 5. CORNER CELL — row 1 col 1, sticky-top AND sticky-left ---- */
.multi-grid-header.gutter-corner {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 7;
  align-items: center; justify-content: center;
  border-left: 0;
  padding: 6px;
  background: var(--surface-2);
}

/* ---- 6. DAY CANVAS — row 2 cols 2..n, holds the tasks ---- */
.day-canvas {
  position: relative;
  background: var(--surface);
  border-left: 1px solid var(--line-soft);
  min-width: 0;
}
.day-canvas.today {
  background:
    linear-gradient(180deg, rgba(168, 107, 60, 0.04), transparent 25%),
    var(--surface);
}
.hour-line {
  position: absolute;
  left: 0; right: 0;
  border-top: 1px solid var(--line-soft);
  height: 0;
}

/* ---- 7. TASK CHIPS — sized for the multi-day canvas ---- */
.day-canvas .task {
  left: 4px; right: 4px;
  padding: 4px 6px;
  font-size: 12px;
  min-height: 22px;
  z-index: 1;
}
.day-canvas .task .task-title { font-size: 12px; }
.day-canvas .task .task-meta { font-size: 10px; }
.day-canvas .hour-line,
.day-canvas .now-line { z-index: 1; }

/* multi-day floating strip */
.floating-strip {
  margin: 16px 20px 80px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.floating-body-horizontal {
  display: flex; flex-direction: row; gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-height: none;
}
.floating-body-horizontal .task-card {
  min-width: 160px;
  flex-shrink: 0;
}
.floating-strip.collapsed .floating-body { display: none; }

/* ==========================================================
   MONTH VIEW
   ----------------------------------------------------------
   One CSS grid (.month-grid) holds the dow labels AND the date
   cells, so columns line up by construction across every viewport.

     1. Shell         — outer padding
     2. Grid          — 7 cols × (1 dow row + 6 week rows); fills viewport
     3. Dow labels    — row 1, all 7 columns
     4. Date cell     — sizes to its row; one tall cell expands its whole week
     5. Cell internals — date number, task count, dots

   Row sizing:
     `grid-template-rows: auto repeat(6, 1fr)`
       - dow row sizes to content
       - the 6 week rows share remaining height EQUALLY by default
       - if any cell needs more (e.g. a Mother's-Day chip), 1fr's auto floor
         lets that row grow; every cell in that row shares the new height
         because rows are atomic in CSS Grid.

   To tweak any one piece, edit only its block.
   ========================================================== */

/* ---- 1. Shell ---- */
.month-shell {
  padding: 16px 20px 24px;
}
@media (max-width: 600px) {
  .month-shell { padding: 10px 10px 16px; }
}

/* ---- 2. Grid — fills the available viewport ---- */
.month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: auto repeat(6, 1fr);
  gap: 4px;
  /* Fill the screen from below the topbar down to a small bottom margin.
     `min-height` (not `height`) so a content-heavy row can grow past it
     without overflow. 100dvh handles iOS Safari's collapsing toolbar. */
  min-height: calc(100dvh - var(--topbar-h, 60px) - 80px);
}
@media (max-width: 600px) {
  .month-grid {
    gap: 3px;
    min-height: calc(100dvh - var(--topbar-h, 60px) - 40px);
  }
}
@media (max-width: 420px) {
  .month-grid { gap: 2px; }
}

/* ---- 3. Dow labels ---- */
.month-dow {
  text-align: center;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 4px 0 8px;
  align-self: end;
  min-width: 0;
}
.month-dow.weekend { color: var(--accent-warm); }
@media (max-width: 600px) {
  .month-dow { font-size: 10px; padding: 2px 0 4px; }
}

/* ---- 4. Date cell ---- */
.month-cell {
  /* No aspect-ratio — the row controls the height. Every cell in a row
     gets that row's height, so a Mother's-Day cell expanding pulls its
     six siblings up to the same height. */
  min-width: 0;
  min-height: 0;
  padding: 8px 8px 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  display: flex; flex-direction: column; gap: 6px;
  transition: background .18s ease, border-color .18s ease, transform .14s ease;
}
.month-cell:hover {
  background: var(--surface-strong);
  border-color: var(--accent-soft);
  transform: translateY(-1px);
}
.month-cell.today {
  border-color: var(--accent);
  border-width: 2px;
  background: linear-gradient(180deg, rgba(91, 110, 88, 0.08), var(--surface));
}
.month-cell.out-of-month {
  opacity: 0.4;
  background: transparent;
  border-color: var(--line-soft);
}
.month-cell.weekend:not(.out-of-month) {
  background: linear-gradient(180deg, rgba(168, 107, 60, 0.03), var(--surface));
}
@media (max-width: 600px) {
  .month-cell { padding: 5px 5px 4px; gap: 3px; }
}

/* ---- 5. Cell internals ---- */
.month-cell-top {
  display: flex; justify-content: space-between; align-items: center;
}
.month-date-num {
  font-size: 15px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.month-cell.today .month-date-num { color: var(--accent); font-weight: 700; }
.month-task-count {
  font-size: 11px; font-weight: 600;
  background: rgba(120, 100, 60, 0.12);
  color: var(--fg-2);
  padding: 1px 6px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.month-dots {
  display: flex; flex-wrap: wrap; gap: 2px;
  margin-top: auto;
}
.month-dots .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
}
@media (max-width: 600px) {
  .month-date-num { font-size: 12px; }
  .month-task-count { font-size: 10px; padding: 0 4px; }
  .month-dots .dot { width: 4px; height: 4px; }
}

/* ---------- legend ---------- */
.legend {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  padding: 8px 20px;
  background: rgba(253, 250, 243, 0.92);
  border-top: 1px solid var(--line);
  display: flex; gap: 18px;
  font-size: 12px;
  color: var(--muted);
  z-index: 50;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot.q1 { background: var(--q1-bar); }
.dot.q2 { background: var(--q2-bar); }
.dot.q3 { background: var(--q3-bar); }
.dot.q4 { background: var(--q4-bar); }

/* ---------- form view ---------- */
.form-shell, .task-shell {
  max-width: 720px;
  margin: 24px auto;
  padding: 0 20px 60px;
}
.task-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 22px;
  display: flex; flex-direction: column; gap: 18px;
  box-shadow: var(--shadow-soft);
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-size: 13px; font-weight: 600;
  display: flex; justify-content: space-between; align-items: center;
}
.field input[type="text"],
.field input[type="date"],
.field input[type="time"],
.field input[type="number"],
.field textarea {
  font-family: inherit;
  font-size: 15px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-strong);
  color: var(--fg);
  width: 100%;
}
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus {
  outline: 2px solid var(--accent-soft);
  outline-offset: -1px;
  border-color: var(--accent);
}

/* kind toggle */
.kind-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.kind-option {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 2px 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-strong);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.kind-option:hover { border-color: var(--accent-soft); }
.kind-option.selected {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(91, 110, 88, 0.06), var(--surface-strong));
}
.kind-option input[type="radio"] { display: none; }
.kind-icon {
  grid-row: 1 / 3;
  align-self: center;
  font-size: 22px;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--surface-2);
}
.kind-option.selected .kind-icon {
  background: var(--accent);
  color: white;
}
.kind-label-text { font-weight: 600; font-size: 14px; }
.kind-hint { font-size: 12px; }

.sliders {
  display: flex; flex-direction: column; gap: 14px;
  padding: 14px;
  background: var(--surface-2);
  border-radius: var(--r-sm);
  border: 1px solid var(--line-soft);
}
.slider-field { display: flex; flex-direction: column; gap: 4px; }
.slider-field label {
  font-size: 13px; font-weight: 600;
  display: flex; justify-content: space-between; align-items: baseline;
}
.slider-field output {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 14px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--accent);
  color: white;
  min-width: 30px;
  text-align: center;
}
.slider-scale {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--muted);
  padding: 0 2px;
}
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, var(--q4-bar), var(--accent));
  border-radius: 999px;
  outline: none;
  margin: 4px 0;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: white;
  border: 2px solid var(--accent);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: white;
  border: 2px solid var(--accent);
  cursor: pointer;
}

.schedule-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

.form-actions {
  display: flex; justify-content: flex-end; gap: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
}

/* ---------- task detail view ---------- */
.task-detail-card {
  border-radius: var(--r-md);
  padding: 24px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-soft);
}
.task-detail-card.done .task-detail-title { text-decoration: line-through; }
.task-detail-title {
  margin: 0 0 10px; font-size: 22px; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
}
.restore-indicator {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--restore-soft);
  color: var(--restore);
  font-size: 18px; font-weight: 700;
}
.task-detail-meta {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 14px;
}
.task-detail-meta .badge { font-size: 12px; padding: 3px 8px; }
.task-detail-meta .done-badge { background: var(--surface-strong); }
.task-detail-body {
  background: rgba(255, 252, 244, 0.6);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  white-space: pre-wrap;
  font-size: 15px;
}
.task-actions {
  display: flex; gap: 10px; align-items: center;
  margin: 10px 0;
}
.created-at {
  margin-top: 18px;
  font-size: 12px;
  color: var(--muted);
}

/* ==========================================================
   AI flow — title prompt, refine page, insight panel, score
   ========================================================== */

.ai-prompt-hint {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(91, 110, 88, 0.08), rgba(168, 107, 60, 0.06));
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--fg-2);
}
.ai-prompt-hint.warn {
  background: rgba(184, 142, 42, 0.08);
}
.ai-icon {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
  color: var(--accent-warm);
}

.add-step-1 .field input[type="text"] {
  font-size: 18px;
  padding: 12px 14px;
}

/* Refine page — Claude's read card + questions */
.ai-read-card {
  background: linear-gradient(135deg, rgba(253, 250, 243, 0.95), rgba(246, 240, 224, 0.85));
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 20px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-soft);
}
.ai-read-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.ai-read-label {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
}
.ai-read-description {
  margin: 4px 0 12px;
  font-size: 18px; font-weight: 500;
  color: var(--fg);
  font-style: italic;
}
.ai-read-metrics {
  display: flex; gap: 12px; flex-wrap: wrap;
}
.ai-metric {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  background: var(--surface-strong);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.ai-metric strong { font-weight: 700; color: var(--fg); }
.ai-metric.ai-kind-recuperation {
  background: var(--restore-soft);
  border-color: var(--restore);
  color: #2e4a2c;
}
.ai-metric.ai-kind-drain {
  background: rgba(184, 73, 42, 0.08);
  border-color: rgba(184, 73, 42, 0.3);
  color: #8b2e1f;
}

.questions-intro {
  margin: 4px 0 10px;
}
.questions-intro h3 {
  margin: 0 0 4px; font-size: 15px; font-weight: 700;
}

.question-block {
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  margin-bottom: 10px;
}
.question-text {
  font-size: 14px; font-weight: 500;
  margin-bottom: 8px;
  line-height: 1.4;
}
.question-options {
  display: flex; gap: 8px;
  flex-wrap: wrap;
}
.qopt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-strong);
  cursor: pointer;
  font-size: 13px;
  transition: background .15s ease, border-color .15s ease;
}
.qopt:hover { border-color: var(--accent); }
.qopt input[type="radio"] {
  margin: 0;
  accent-color: var(--accent);
}
.qopt:has(input:checked) {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(91, 110, 88, 0.08), var(--surface-strong));
  font-weight: 600;
}

/* AI insight panel on the edit form */
.ai-insight-panel {
  background: linear-gradient(135deg, rgba(253, 250, 243, 0.95), rgba(246, 240, 224, 0.8));
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 18px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-soft);
}
.ai-insight-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.ai-insight-title {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
  flex: 1;
}
.ai-score {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--line);
}
.ai-score.score-good { background: var(--restore-soft); color: #2e4a2c; border-color: rgba(107, 140, 102, 0.4); }
.ai-score.score-mid  { background: #f1deb1; color: #6b4c1a; border-color: rgba(183, 142, 42, 0.4); }
.ai-score.score-far  { background: #f3d9d0; color: #7a2a18; border-color: rgba(184, 73, 42, 0.4); }

.ai-insight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.ai-insight-col h4 {
  margin: 0 0 6px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--muted);
}
.ai-metrics-list {
  list-style: none; padding: 0; margin: 0;
  font-size: 13px;
}
.ai-metrics-list li {
  padding: 3px 0;
  display: flex; justify-content: space-between;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--line-soft);
}
.ai-metrics-list li:last-child { border-bottom: 0; }
.ai-metrics-list strong { font-weight: 700; color: var(--fg); }

.ai-qa-col { grid-column: span 2; }
.ai-qa-list {
  list-style: none; padding: 0; margin: 0;
  font-size: 12px;
}
.ai-qa-list li {
  padding: 4px 0;
  border-bottom: 1px solid var(--line-soft);
  display: flex; gap: 8px; align-items: baseline;
}
.ai-qa-list li:last-child { border-bottom: 0; }
.ai-qa-q { flex: 1; color: var(--fg-2); }
.ai-qa-a {
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ai-qa-yes    { background: var(--restore-soft); color: #2e4a2c; }
.ai-qa-no     { background: rgba(184, 73, 42, 0.12); color: #8b2e1f; }
.ai-qa-unsure { background: var(--surface-2); color: var(--muted); }

.ai-score-hint {
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.5;
}

.task-side-actions {
  margin-top: 18px;
  padding: 14px 0 0;
  border-top: 1px solid var(--line-soft);
  display: flex; gap: 10px; align-items: center;
  flex-wrap: wrap;
}

/* ==========================================================
   LOGIN page
   ========================================================== */

body.login-view {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  min-height: 100vh;
}

.login-shell {
  width: 100%;
  max-width: 420px;
  position: relative;
  z-index: 1;
}

.login-card {
  background: linear-gradient(180deg, rgba(253, 250, 243, 0.96), rgba(246, 240, 224, 0.92));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px 28px;
  box-shadow: var(--shadow);
}

.login-brand {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; margin-bottom: 24px;
  text-align: center;
}

.login-battery-shape {
  display: inline-flex; align-items: center;
}
.login-battery-body {
  position: relative;
  width: 90px; height: 36px;
  border: 3px solid var(--line-strong);
  border-radius: 7px;
  overflow: hidden;
  background: rgba(255, 252, 244, 0.5);
}
.login-battery-fill {
  position: absolute;
  left: 2px; top: 2px; bottom: 2px;
  width: 78%;
  background: var(--batt-healthy);
  border-radius: 3px;
}
.login-battery-nub {
  width: 6px; height: 16px;
  background: var(--line-strong);
  border-radius: 0 3px 3px 0;
  margin-left: 1px;
}

.login-title {
  margin: 0;
  font-size: 22px; font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.01em;
}
.login-sub {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

.login-form {
  display: flex; flex-direction: column; gap: 14px;
}
.login-form .field input[type="password"],
.login-form .field input[type="text"] {
  font-size: 16px;
  padding: 10px 12px;
}
.login-hint a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.login-hint a:hover { color: var(--accent-strong, var(--accent)); }

/* Account / change-password section on Settings (Slice 1.19) */
.password-form {
  display: flex; flex-direction: column; gap: 12px;
  max-width: 380px;
}
.password-status {
  margin: -2px 0 0;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 500;
}
.password-status-ok {
  background: rgba(60, 130, 80, 0.10);
  color: #2e6b3f;
}
.password-status-error {
  background: rgba(184, 73, 42, 0.10);
  color: #8b2e1f;
}
.login-btn {
  width: 100%;
  justify-content: center;
  padding: 11px 16px;
  font-size: 15px;
}
.login-error {
  margin: -4px 0 0;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  background: rgba(184, 73, 42, 0.10);
  color: #8b2e1f;
  font-size: 13px;
  font-weight: 500;
}
.login-hint {
  margin: 18px 0 0;
  line-height: 1.5;
  text-align: center;
}

/* ==========================================================
   Top-bar widgets — user toggle + view switch + settings cog
   ========================================================== */

.topbar-widgets {
  display: inline-flex; align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.user-toggle {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  gap: 0;
}
.user-btn {
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 13px; font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
  letter-spacing: 0.01em;
}
.user-btn:hover { color: var(--fg); }
.user-btn.active {
  background: var(--accent);
  color: white;
  box-shadow: var(--shadow-sm);
}

.settings-cog {
  font-size: 16px;
  padding: 5px 10px;
}

/* ---------- responsive ---------- */
@media (max-width: 880px) {
  .day-layout {
    grid-template-columns: 1fr;
    padding: 12px;
  }
  .floating-panel { position: static; }
  .schedule-row { grid-template-columns: 1fr; }
  .topbar { flex-wrap: wrap; gap: 10px; padding: 10px 12px; }
  .topbar-left { gap: 8px; flex: 1; min-width: 0; }
  .date-rest { display: none; }
  /* Show the day-of-month number next to the weekday name on phone so
     it stays visible after the sticky topbar collapses on scroll. */
  .date-dd {
    display: inline;
    font-size: 18px;
    font-weight: 700;
    color: var(--accent-warm);
    margin-left: 6px;
  }
  /* Mobile: stack the hero CARD's children vertically (battery, info,
     supply form on their own lines). Must be scoped to the section
     tag, otherwise the inner `<div class="battery-shape battery-hero">`
     ALSO matches `.battery-hero` and ends up as a column flex container,
     dropping the nub onto a new line below the body. */
  section.battery-hero {
    margin: 12px;
    padding: 16px;
    gap: 14px;
    flex-direction: column; align-items: stretch;
  }
  .battery-hero-supply { margin-left: 0; }
  .battery-hero .battery-body { width: 100%; max-width: 320px; }
  .battery-hero-shape { align-self: center; }
  .floating-strip { margin: 12px 12px 80px; }
  .legend { gap: 10px; font-size: 11px; padding: 6px 12px; }
  .form-shell, .task-shell { padding: 0 12px 60px; }
  .kind-toggle { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .view-btn { padding: 5px 8px; font-size: 11px; }
  .date-day { font-size: 16px; }
  .battery-hero-number { font-size: 28px; }
}

/* ==========================================================
   SLICE 1.8 — THEMES + SETTINGS PAGE
   All rules below are additive. No existing rule is altered.
   Themes override CSS variables under [data-theme="..."] on <html>.
   Default = "warm" = the :root values above.
   ========================================================== */

/* ---------- theme: calm ---------- */
[data-theme="calm"] {
  --bg-top:    #eef2ec;
  --bg-mid:    #e0e6df;
  --bg-bot:    #cdd6cb;

  --surface:        #f5f7f3;
  --surface-2:      #ebefe9;
  --surface-strong: #fafcf8;

  --line:        rgba(80, 100, 80, 0.16);
  --line-soft:   rgba(80, 100, 80, 0.09);
  --line-strong: rgba(30, 50, 35, 0.45);

  --fg:    #2a3329;
  --fg-2:  #455147;
  --muted: #7a8278;

  --accent:      #6a8175;
  --accent-2:    #54665d;
  --accent-soft: #c9d3cc;
  --accent-warm: #8aa39a;

  --restore:      #6a8a78;
  --restore-soft: #d3e0d9;

  --q1-bg: #e8d8d4; --q1-fg: #6a3328; --q1-bar: #a85a48;
  --q2-bg: #d4dce2; --q2-fg: #2f4458; --q2-bar: #56708a;
  --q3-bg: #e8dec6; --q3-fg: #6a5230; --q3-bar: #a88a4a;
  --q4-bg: #dee0d8; --q4-fg: #4f544c; --q4-bar: #8e9088;
}
[data-theme="calm"] .ambient {
  background:
    radial-gradient(ellipse at 80% -10%, rgba(220, 235, 225, 0.6), transparent 55%),
    radial-gradient(ellipse at 10% 105%, rgba(180, 200, 190, 0.4), transparent 60%);
}

/* ---------- theme: energetic ---------- */
[data-theme="energetic"] {
  --bg-top:    #fff3e0;
  --bg-mid:    #f7d9b7;
  --bg-bot:    #e8b88a;

  --surface:        #fff9ed;
  --surface-2:      #fbe9c8;
  --surface-strong: #fffcf3;

  --line:        rgba(160, 90, 40, 0.22);
  --line-soft:   rgba(160, 90, 40, 0.12);
  --line-strong: rgba(80, 40, 10, 0.55);

  --fg:    #36231a;
  --fg-2:  #5a3a25;
  --muted: #8a6a4a;

  --accent:      #c8512a;
  --accent-2:    #a64218;
  --accent-soft: #f3c7a8;
  --accent-warm: #d28640;

  --restore:      #5d8a52;
  --restore-soft: #d3e4cd;

  --q1-bg: #f8c8b8; --q1-fg: #6a1d0a; --q1-bar: #c8421f;
  --q2-bg: #d9dde8; --q2-fg: #1d3050; --q2-bar: #3f5a82;
  --q3-bg: #f6cf8a; --q3-fg: #5a3a0a; --q3-bar: #b8821a;
  --q4-bg: #e8d6b8; --q4-fg: #4a3a25; --q4-bar: #9a7848;
}
[data-theme="energetic"] .ambient {
  background:
    radial-gradient(ellipse at 80% -10%, rgba(255, 200, 130, 0.6), transparent 55%),
    radial-gradient(ellipse at 10% 105%, rgba(220, 130, 80, 0.32), transparent 60%);
}

/* ---------- theme: dark ---------- */
[data-theme="dark"] {
  --bg-top:    #2a2520;
  --bg-mid:    #1f1c19;
  --bg-bot:    #161413;

  --surface:        #2e2925;
  --surface-2:      #3a342f;
  --surface-strong: #3e3833;

  --line:        rgba(220, 200, 160, 0.18);
  --line-soft:   rgba(220, 200, 160, 0.10);
  --line-strong: rgba(245, 235, 215, 0.55);

  --fg:    #ede4d1;
  --fg-2:  #c4b8a0;
  --muted: #8b8170;

  --accent:      #8aa085;
  --accent-2:    #a3b59e;
  --accent-soft: #475744;
  --accent-warm: #c98a55;

  --restore:      #8aa085;
  --restore-soft: #3a4a3a;

  --q1-bg: #4a201a; --q1-fg: #f3d9d0; --q1-bar: #d36540;
  --q2-bg: #1d2a3a; --q2-fg: #d6dbe5; --q2-bar: #7a93b8;
  --q3-bg: #3a2c10; --q3-fg: #f1deb1; --q3-bar: #d8a942;
  --q4-bg: #2e2a23; --q4-fg: #b9b0a3; --q4-bar: #8d8478;

  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow:      0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.30);
}
[data-theme="dark"] .ambient {
  background:
    radial-gradient(ellipse at 80% -10%, rgba(80, 65, 45, 0.45), transparent 55%),
    radial-gradient(ellipse at 10% 105%, rgba(40, 50, 45, 0.40), transparent 60%);
}
/* Dark-mode tweaks for elements that referenced hard-coded light tints */
[data-theme="dark"] .view-btn:hover { background: rgba(255, 253, 246, 0.06); }
[data-theme="dark"] .btn-danger { color: #f3a890; }
[data-theme="dark"] .btn-danger:hover { background: rgba(184, 73, 42, 0.18); }
[data-theme="dark"] .btn-add { color: #16140f; }

/* ---------- settings cog spacing in topbar ---------- */
.settings-cog { margin-left: 6px; }
.settings-cog.active {
  background: var(--surface-strong);
  box-shadow: var(--shadow-sm);
}

/* ---------- settings page layout ---------- */
.settings-shell {
  position: relative; z-index: 1;
  max-width: 820px;
  margin: 0 auto;
  padding: 20px 20px 40px;
}

.settings-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px 22px 18px;
  box-shadow: var(--shadow-soft);
}

.settings-heading {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fg);
}

.settings-sub {
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
}

.theme-picker-form { display: block; }

.theme-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.theme-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 2px solid var(--line);
  cursor: pointer;
  transition: border-color .15s ease, transform .1s ease, box-shadow .15s ease;
}
.theme-card:hover { border-color: var(--line-strong); }
.theme-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.theme-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.theme-swatches {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  height: 40px;
}
.sw {
  display: block;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.theme-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.theme-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--fg);
}
.theme-blurb {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

.settings-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}

/* ==========================================================
   End-of-day review modal (Slice 1.7c)
   Full-screen darkened overlay + centred card. Z-index above legend.
   ========================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(40, 28, 12, 0.55);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.modal-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 20px 60px rgba(40, 28, 12, 0.35);
  max-width: 560px;
  width: 100%;
  padding: 24px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}
.eod-card-header {
  margin: 0 0 12px;
}
.eod-card-header h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--fg);
}
.eod-card-date {
  margin: 2px 0 0;
}
.eod-summary {
  display: flex;
  gap: 18px;
  padding: 14px 16px;
  margin: 14px 0 20px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  flex-wrap: wrap;
}
.eod-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 78px;
}
.eod-stat-num {
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.restore-text { color: var(--restore); }
.eod-stat-label {
  letter-spacing: 0.03em;
}
.eod-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.eod-question {
  border: 0;
  padding: 0;
  margin: 0;
}
.eod-q-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 8px;
  padding: 0;
  line-height: 1.4;
}
.eod-q-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.eod-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-strong);
  cursor: pointer;
  font-size: 14px;
  transition: border-color .15s ease, background .15s ease;
}
.eod-opt:hover { border-color: var(--line-strong); }
.eod-opt:has(input:checked) {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(91, 110, 88, 0.10), var(--surface-strong));
  font-weight: 600;
}
.eod-opt input[type="radio"] {
  margin: 0;
  accent-color: var(--accent);
}
.eod-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  margin-top: 4px;
}
@media (max-width: 600px) {
  .modal-card { padding: 18px; }
  .eod-summary { gap: 12px; padding: 12px; }
  .eod-stat { min-width: 64px; }
  .eod-stat-num { font-size: 17px; }
}

/* ---------- Claude tone keyword chips (Slice 1.7b) ---------- */
.tone-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.tone-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-2);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  user-select: none;
}
.tone-chip:hover { border-color: var(--line-strong); color: var(--fg); }
.tone-chip input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.tone-chip.selected {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  box-shadow: var(--shadow-sm);
}
.tone-chip:has(input:checked) {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  box-shadow: var(--shadow-sm);
}
.tone-extra-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
}
.tone-extra-field textarea {
  font-family: inherit;
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-strong);
  color: var(--fg);
  resize: vertical;
  width: 100%;
}
.tone-extra-field textarea:focus {
  outline: 2px solid var(--accent-soft);
  outline-offset: -1px;
  border-color: var(--accent);
}

/* ---------- theme card swatch previews (independent of active theme) ---------- */
/* Warm */
.theme-card[data-theme-preview="warm"] .sw-bg      { background: #ebe2cf; }
.theme-card[data-theme-preview="warm"] .sw-surface { background: #fdfaf3; }
.theme-card[data-theme-preview="warm"] .sw-accent  { background: #5b6e58; }
.theme-card[data-theme-preview="warm"] .sw-q1      { background: #b8492a; }
.theme-card[data-theme-preview="warm"] .sw-q2      { background: #4a6385; }
.theme-card[data-theme-preview="warm"] .sw-q3      { background: #b78e2a; }

/* Calm */
.theme-card[data-theme-preview="calm"] .sw-bg      { background: #e0e6df; }
.theme-card[data-theme-preview="calm"] .sw-surface { background: #f5f7f3; }
.theme-card[data-theme-preview="calm"] .sw-accent  { background: #6a8175; }
.theme-card[data-theme-preview="calm"] .sw-q1      { background: #a85a48; }
.theme-card[data-theme-preview="calm"] .sw-q2      { background: #56708a; }
.theme-card[data-theme-preview="calm"] .sw-q3      { background: #a88a4a; }

/* Energetic */
.theme-card[data-theme-preview="energetic"] .sw-bg      { background: #f7d9b7; }
.theme-card[data-theme-preview="energetic"] .sw-surface { background: #fff9ed; }
.theme-card[data-theme-preview="energetic"] .sw-accent  { background: #c8512a; }
.theme-card[data-theme-preview="energetic"] .sw-q1      { background: #c8421f; }
.theme-card[data-theme-preview="energetic"] .sw-q2      { background: #3f5a82; }
.theme-card[data-theme-preview="energetic"] .sw-q3      { background: #b8821a; }

/* Dark */
.theme-card[data-theme-preview="dark"] .sw-bg      { background: #1f1c19; }
.theme-card[data-theme-preview="dark"] .sw-surface { background: #2e2925; }
.theme-card[data-theme-preview="dark"] .sw-accent  { background: #8aa085; }
.theme-card[data-theme-preview="dark"] .sw-q1      { background: #d36540; }
.theme-card[data-theme-preview="dark"] .sw-q2      { background: #7a93b8; }
.theme-card[data-theme-preview="dark"] .sw-q3      { background: #d8a942; }

@media (max-width: 600px) {
  .theme-grid { grid-template-columns: 1fr; }
  .settings-shell { padding: 14px 14px 60px; }
}

/* ---------- day view: smooth glide on auto-scroll-to-now ---------- */
body.day-view,
html { scroll-behavior: smooth; }
body { overscroll-behavior-y: contain; }

/* ---------- settings page: time-axis form ---------- */
.time-axis-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.time-axis-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  background: var(--surface-2);
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
}
.time-axis-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.time-axis-input {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.time-axis-input input[type="number"] {
  width: 72px;
  padding: 6px 8px;
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.time-axis-input input[type="number"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.time-axis-suffix {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.time-axis-help {
  font-size: 11px;
  color: var(--muted);
}

@media (max-width: 480px) {
  .time-axis-row { grid-template-columns: 1fr; }
}

/* ==========================================================
   SLICE 1.12 — BATTERY OVERDRAW + RECALIBRATION + CHECK-IN POPUPS
   - Battery-hero phone visibility fix (the circular sizing bug).
   - "Over by N" chip + danger battery treatment when overdrawn.
   - Inline check-in callout under the hero (recalibrate + 20h snooze).
   All rules additive. The one media-query override on `.battery-shape`
   is explicitly the bug fix from Slice 1.12.
   ========================================================== */

/* ---------- battery hero: phone visibility fix ---------- */
/* On <=768px the inline-flex `.battery-shape` was auto-sized, so a child
   with `width: 100%` collapsed to ~0. Switch to flex so the body's
   percentage width resolves against a real container. */
@media (max-width: 768px) {
  /* Let the shape stretch the full width of the hero card instead of
     being capped at 320px — the day-view hero felt skinny otherwise. */
  .battery-hero-shape {
    align-self: stretch;
    width: 100%;
  }
  .battery-hero .battery-shape {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
  }
  .battery-hero .battery-body {
    flex: 1 1 auto;
    min-width: 0;
    height: 84px;        /* was 64 — at full width that read as skinny */
    border-radius: 12px;
  }
  .battery-hero .battery-nub {
    width: 12px;
    height: 36px;
    border-radius: 0 5px 5px 0;
  }
}

/* ---------- overdrawn battery styling ---------- */
.battery-hero.is-overdrawn .battery-body {
  border-color: #b8492a;
  box-shadow:
    0 0 0 2px rgba(184, 73, 42, 0.18),
    inset 0 0 0 1px rgba(184, 73, 42, 0.4);
}
.battery-hero.is-overdrawn .battery-fill {
  /* Even when the clamped fill width hits 0%, paint the body interior
     with a danger wash so the state is unmistakable. */
  background: linear-gradient(90deg, #c2553a, #a13a22);
}
.battery-hero.is-overdrawn .battery-body::after {
  /* Subtle diagonal stripe to read as "past empty". */
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(184, 73, 42, 0.10),
    rgba(184, 73, 42, 0.10) 6px,
    transparent 6px,
    transparent 12px
  );
  pointer-events: none;
}

/* "Over by N" chip sits alongside drain/restore chips */
.over-chip {
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: rgba(184, 73, 42, 0.16);
  color: #7a2a18;
  border: 1px solid rgba(184, 73, 42, 0.32);
}
[data-theme="dark"] .over-chip {
  background: rgba(211, 101, 64, 0.20);
  color: #f3a890;
  border-color: rgba(211, 101, 64, 0.40);
}

/* ---------- check-in callout (recalibrate prompt) ---------- */
.checkin-callout {
  position: relative;
  z-index: 1;
  margin: 12px 20px 4px;
  padding: 14px 16px;
  background: var(--surface-strong);
  border: 1px solid rgba(184, 73, 42, 0.28);
  border-left: 4px solid #b8492a;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.checkin-message {
  flex: 1 1 260px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg);
}
.checkin-message strong { color: #7a2a18; font-weight: 700; }
[data-theme="dark"] .checkin-message strong { color: #f3a890; }

.checkin-actions {
  display: flex; align-items: center; gap: 8px;
  margin: 0;
}
.checkin-input {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--muted);
}
.checkin-input input[type="number"] {
  width: 64px;
  padding: 6px 8px;
  font-size: 14px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.checkin-input input[type="number"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.checkin-snooze { margin: 0; }
.btn-link-quiet {
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 6px 8px;
}
.btn-link-quiet:hover { color: var(--fg); text-decoration-color: var(--accent); }

[data-theme="dark"] .checkin-callout {
  border-color: rgba(211, 101, 64, 0.42);
  border-left-color: #d36540;
}

@media (max-width: 768px) {
  .checkin-callout {
    margin: 10px 12px 4px;
    padding: 12px 14px;
    gap: 10px;
  }
  .checkin-actions { width: 100%; justify-content: space-between; }
  .checkin-snooze { width: 100%; text-align: right; }
}

/* ==========================================================
   SLICE 1.13 — STICKY TOPBAR + BIGGER GEAR + HOLIDAYS + ALL-DAY ROW
   (Stage A of this slice: sticky topbar so "Add task" is always
   reachable on multi-day views, and a noticeably larger gear icon.)
   --topbar-h is set by app.js after layout so the sticky day-header
   row inside multi-day grids tucks below the topbar instead of
   overlapping it.
   ========================================================== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.settings-cog {
  font-size: 22px;
  padding: 4px 12px;
  line-height: 1;
}
@media (max-width: 600px) {
  .settings-cog { font-size: 20px; padding: 4px 10px; }
}

/* ---------- weekend + holiday tints (Slice 1.13 Stage B) ----------
   Three flavours, none jarring:
     - .is-weekend   — very soft warm wash
     - .is-holiday   — slightly stronger warm wash + tinted left edge
     - Today + holiday/weekend stack cleanly via background layering
*/
body.day-view.is-weekend .grid-canvas {
  background:
    linear-gradient(180deg, rgba(168, 107, 60, 0.05), transparent 30%),
    var(--surface);
}
body.day-view.is-holiday .grid-canvas {
  background:
    linear-gradient(180deg, rgba(184, 73, 42, 0.08), transparent 35%),
    var(--surface);
}
.day-canvas.is-weekend {
  background:
    linear-gradient(180deg, rgba(168, 107, 60, 0.05), transparent 25%),
    var(--surface);
}
.day-canvas.is-holiday {
  background:
    linear-gradient(180deg, rgba(184, 73, 42, 0.08), transparent 30%),
    var(--surface);
}
.day-canvas.is-holiday.today,
.day-canvas.today.is-weekend {
  background:
    linear-gradient(180deg, rgba(168, 107, 60, 0.04), transparent 25%),
    linear-gradient(180deg, rgba(184, 73, 42, 0.05), transparent 30%),
    var(--surface);
}

/* Multi-day day-header gets a tinted top border when it's a holiday in
   the user's region — visible from the sticky position. */
.multi-grid-header.day-header.is-weekend {
  background: linear-gradient(180deg, rgba(168, 107, 60, 0.05), var(--surface-2));
}
.multi-grid-header.day-header.is-holiday {
  background: linear-gradient(180deg, rgba(184, 73, 42, 0.10), var(--surface-2));
  border-top: 2px solid rgba(184, 73, 42, 0.45);
}
.multi-grid-header.day-header.today.is-holiday {
  background: linear-gradient(180deg, rgba(184, 73, 42, 0.12), var(--surface-2));
}

/* Month cells */
.month-cell.is-holiday:not(.out-of-month) {
  background: linear-gradient(180deg, rgba(184, 73, 42, 0.10), var(--surface));
  border-color: rgba(184, 73, 42, 0.32);
}
.month-cell.is-holiday.today {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(184, 73, 42, 0.12), var(--surface));
}

/* ---------- all-day chip strip (Slice 1.13 Stage B) ---------- */
.allday-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 8px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-soft);
  align-items: center;
}
.allday-strip.compact {
  padding: 4px 0 0;
  background: transparent;
  border-bottom: 0;
  gap: 3px;
}

.allday-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-2);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.allday-chip.is-own {
  background: rgba(184, 73, 42, 0.10);
  border-color: rgba(184, 73, 42, 0.32);
  color: #8b2e1f;
  font-weight: 600;
}
.allday-chip.is-special {
  background: rgba(135, 91, 168, 0.10);
  border-color: rgba(135, 91, 168, 0.30);
  color: #4d2a6a;
  font-weight: 600;
}
[data-theme="dark"] .allday-chip { color: var(--fg-2); }
[data-theme="dark"] .allday-chip.is-own {
  background: rgba(211, 101, 64, 0.18);
  border-color: rgba(211, 101, 64, 0.42);
  color: #f3a890;
}
[data-theme="dark"] .allday-chip.is-special {
  background: rgba(168, 130, 200, 0.18);
  border-color: rgba(168, 130, 200, 0.40);
  color: #d6c2ee;
}
.allday-chip.is-user {
  background: rgba(91, 110, 88, 0.12);
  border-color: rgba(91, 110, 88, 0.32);
  color: var(--accent-2);
  font-weight: 600;
}
.chip-name { overflow: hidden; text-overflow: ellipsis; }
.chip-region {
  font-size: 10px;
  font-weight: 500;
  opacity: 0.75;
}
.chip-del-form { display: inline-flex; margin: 0; }
.chip-del {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  opacity: 0.55;
}
.chip-del:hover { opacity: 1; }

.allday-add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  margin-left: auto;
}
.allday-add input[type="text"] {
  font: inherit;
  font-size: 12px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-strong);
  color: var(--fg);
  min-width: 140px;
}
.allday-add input[type="text"]:focus {
  outline: 2px solid var(--accent-soft);
  outline-offset: -1px;
  border-color: var(--accent);
}
.allday-add .btn-mini { padding: 3px 10px; }

/* Compact chip strip in sticky multi-day headers: smaller everything */
.allday-strip.compact .allday-chip {
  padding: 1px 6px;
  font-size: 10px;
  line-height: 1.4;
}
.allday-strip.compact .chip-region { font-size: 9px; }
.allday-strip.compact .chip-del { font-size: 12px; }

/* Month-cell chips: 1-2 tiny labels */
.month-cell-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 2px 0;
}
.month-cell-chip {
  display: inline-flex;
  align-items: center;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--fg-2);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.month-cell-chip.is-own {
  background: rgba(184, 73, 42, 0.12);
  border-color: rgba(184, 73, 42, 0.32);
  color: #8b2e1f;
}
.month-cell-chip.is-special {
  background: rgba(135, 91, 168, 0.10);
  border-color: rgba(135, 91, 168, 0.30);
  color: #4d2a6a;
}
.month-cell-chip.is-user {
  background: rgba(91, 110, 88, 0.12);
  border-color: rgba(91, 110, 88, 0.32);
  color: var(--accent-2);
}
[data-theme="dark"] .month-cell-chip.is-own {
  background: rgba(211, 101, 64, 0.20);
  border-color: rgba(211, 101, 64, 0.40);
  color: #f3a890;
}

/* ---------- region prompt (first-visit modal) ---------- */
.region-prompt-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(20, 15, 10, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.region-prompt-card {
  width: 100%;
  max-width: 480px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px 24px 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.region-prompt-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--fg);
}
.region-prompt-sub {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.region-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.region-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.region-select {
  padding: 8px 10px;
  font-size: 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-strong);
  color: var(--fg);
  font-family: inherit;
}
.region-select:focus {
  outline: 2px solid var(--accent-soft);
  outline-offset: -1px;
  border-color: var(--accent);
}
.region-extra {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  padding: 12px 14px 4px;
  margin: 0;
}
.region-extra legend {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  padding: 0 6px;
}
.region-extra-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
}
.region-extra-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}
.region-extra-item input { accent-color: var(--accent); }
.region-extra-hint {
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
}
.region-prompt-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

@media (max-width: 600px) {
  .region-extra-grid { grid-template-columns: 1fr; }
  .region-prompt-card { padding: 18px 18px 14px; }
}

/* Settings page reuses some of these */
.region-form, .tz-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tz-form .region-select { font-family: -apple-system, "Segoe UI", system-ui, monospace; }

/* ==========================================================
   SLICE 1.14 — "How are you feeling?" check-in MVP
   Trigger pill on the battery hero → CSS-only modal (#wellbeing-modal
   :target trick) → chip grid → POST adjusts today's budget and surfaces
   an inline suggestion callout with an Add-to-today button.
   ========================================================== */
.wellbeing-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 6px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--surface-strong), var(--surface-2));
  border: 1px solid var(--line);
  color: var(--accent-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  align-self: flex-start;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.wellbeing-trigger::before {
  content: "♡";
  font-size: 14px;
  color: var(--accent-warm);
}
.wellbeing-trigger:hover {
  background: var(--surface-strong);
  border-color: var(--accent);
}
.wellbeing-trigger:active { transform: translateY(1px); }

/* Modal — opened via #wellbeing-modal hash. Default hidden; visible
   only when its id matches :target. */
.wellbeing-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(20, 15, 10, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.wellbeing-modal-backdrop:target { display: flex; }

.wellbeing-modal-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px 24px 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wellbeing-modal-close {
  position: absolute;
  top: 8px; right: 12px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  color: var(--muted);
  border-radius: 50%;
}
.wellbeing-modal-close:hover { background: var(--surface-2); color: var(--fg); }
.wellbeing-modal-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--fg);
}
.wellbeing-modal-sub {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

.wellbeing-chip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 14px;
}
/* Chip is now a <label> wrapping a hidden checkbox. Selection state is
   driven by the checkbox via `:has(:checked)` so the user can toggle
   on/off without a server round-trip; the final state submits on Save. */
.feeling-chip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--surface-strong);
  border: 1px solid var(--line);
  font: inherit;
  cursor: pointer;
  text-align: left;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .18s ease, background .18s ease, transform .12s ease, box-shadow .18s ease;
}
.feeling-chip > input[type="checkbox"] {
  /* Visually hidden but still focusable for keyboard / a11y. */
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
}
.feeling-chip:hover {
  border-color: var(--accent);
  background: var(--surface);
}
.feeling-chip:active { transform: translateY(1px); }
.feeling-chip.is-drain {
  background: linear-gradient(135deg, rgba(184, 73, 42, 0.06), var(--surface-strong));
  border-color: rgba(184, 73, 42, 0.28);
}
.feeling-chip.is-drain:hover {
  border-color: rgba(184, 73, 42, 0.55);
}
.feeling-chip.is-boost {
  background: linear-gradient(135deg, rgba(91, 110, 88, 0.10), var(--surface-strong));
  border-color: rgba(91, 110, 88, 0.40);
}
.feeling-chip .feeling-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--fg);
}
.feeling-chip .feeling-delta {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
}
.feeling-chip.is-drain .feeling-delta {
  background: rgba(184, 73, 42, 0.16);
  color: #8b2e1f;
}
.feeling-chip.is-boost .feeling-delta {
  background: var(--restore-soft);
  color: #2e4a2c;
}

/* Tick badge — invisible until the chip is selected. Sits in the top-right
   corner so the name + delta layout doesn't shift when toggling. */
.feeling-chip .feeling-tick {
  position: absolute;
  top: 6px; right: 8px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;
}

/* Selected state (driven by the hidden checkbox). */
.feeling-chip:has(input:checked) {
  border-color: var(--accent);
  background: linear-gradient(135deg, rgba(91, 110, 88, 0.12), var(--surface));
  box-shadow: 0 0 0 2px rgba(91, 110, 88, 0.18);
}
.feeling-chip:has(input:checked) .feeling-tick {
  opacity: 1;
  transform: scale(1);
}
.feeling-chip.is-drain:has(input:checked) {
  border-color: rgba(184, 73, 42, 0.65);
  background: linear-gradient(135deg, rgba(184, 73, 42, 0.16), var(--surface));
  box-shadow: 0 0 0 2px rgba(184, 73, 42, 0.20);
}
.feeling-chip.is-drain:has(input:checked) .feeling-tick {
  background: #b8492a;
}
.feeling-chip.is-boost:has(input:checked) {
  border-color: rgba(91, 110, 88, 0.65);
  background: linear-gradient(135deg, rgba(91, 110, 88, 0.18), var(--surface));
}

/* Keyboard focus ring on the chip when the hidden checkbox is focused. */
.feeling-chip:has(input:focus-visible) {
  outline: 2px solid var(--accent-soft);
  outline-offset: 2px;
}

/* Save / Cancel row under the chip grid. */
.wellbeing-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}
.wellbeing-modal-actions .btn-secondary,
.wellbeing-modal-actions .btn-primary {
  padding: 9px 16px;
  font-size: 14px;
}

.wellbeing-modal-foot {
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
}

/* Inline callout on the day view after check-ins exist */
.wellbeing-callout {
  position: relative;
  z-index: 1;
  margin: 4px 20px 8px;
  padding: 12px 16px;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wellbeing-callout-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.wellbeing-list { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.wellbeing-chip-mini {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-2);
}
.wellbeing-chip-mini.is-drain {
  background: rgba(184, 73, 42, 0.12);
  border-color: rgba(184, 73, 42, 0.32);
  color: #8b2e1f;
}
.wellbeing-chip-mini.is-boost {
  background: var(--restore-soft);
  border-color: rgba(107, 140, 102, 0.4);
  color: #2e4a2c;
}
.wellbeing-delta {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  opacity: 0.9;
}

.wellbeing-suggestion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--line-soft);
}
.wellbeing-blurb {
  flex: 1 1 200px;
  font-size: 13px;
  color: var(--fg-2);
  line-height: 1.45;
}
.wellbeing-add-form { margin: 0; }
.btn-sm {
  padding: 6px 12px;
  font-size: 13px;
}

@media (max-width: 600px) {
  .wellbeing-chip-grid { grid-template-columns: 1fr; }
  .wellbeing-modal-card { padding: 20px 18px 14px; }
  .wellbeing-callout { margin: 4px 12px 8px; }
}

[data-theme="dark"] .wellbeing-callout { border-left-color: var(--accent); }

/* ==========================================================
   SLICE 1.15 — Recurring tasks + profile + AI loosening
   ========================================================== */

.apply-to-block {
  padding: 14px;
  background: linear-gradient(135deg, rgba(91, 110, 88, 0.06), var(--surface-2));
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.apply-to-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}
.apply-to-option {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--surface-strong);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.apply-to-option:hover { border-color: var(--accent-soft); }
.apply-to-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.apply-to-option:has(input:checked) {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(91, 110, 88, 0.08), var(--surface-strong));
}
.apply-to-label { font-weight: 600; font-size: 14px; }
.apply-to-hint { font-size: 12px; }

@media (max-width: 600px) {
  .apply-to-toggle { grid-template-columns: 1fr; }
}

.recurrence-select {
  font: inherit;
  font-size: 15px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-strong);
  color: var(--fg);
}
.recurrence-select:focus {
  outline: 2px solid var(--accent-soft);
  outline-offset: -1px;
  border-color: var(--accent);
}
.recurrence-hint { margin: 4px 0 0; line-height: 1.4; }

.open-question-block {
  background: linear-gradient(135deg, rgba(168, 107, 60, 0.04), var(--surface-2));
}
.open-answer {
  width: 100%;
  font: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-strong);
  color: var(--fg);
  resize: vertical;
  margin-top: 8px;
}
.open-answer:focus {
  outline: 2px solid var(--accent-soft);
  outline-offset: -1px;
  border-color: var(--accent);
}

.profile-form textarea {
  width: 100%;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-strong);
  color: var(--fg);
  resize: vertical;
  min-height: 220px;
  font-variant-numeric: tabular-nums;
}
.profile-form textarea:focus {
  outline: 2px solid var(--accent-soft);
  outline-offset: -1px;
  border-color: var(--accent);
}

/* Slice 1.14 — swipe-out animation before navigation.
   Body slides + fades; the destination page lands fresh, but the brief
   slide hides the page-reload flash so it feels like a real transition. */
body.is-swiping-left {
  transform: translateX(-8%);
  opacity: 0.35;
  transition: transform .16s ease-out, opacity .16s ease-out;
}
body.is-swiping-right {
  transform: translateX(8%);
  opacity: 0.35;
  transition: transform .16s ease-out, opacity .16s ease-out;
}

/* Stage D: let our pinch handler capture two-finger gestures.
   `pan-x pan-y` keeps one-finger scroll working but disables browser
   pinch-zoom so the JS can re-purpose pinch into a view switch. */
.multi-grid-wrap,
.month-shell,
.day-view .time-column {
  touch-action: pan-x pan-y;
}

/* Stage C: timezone change banner.
   Note: `display: flex` overrides the [hidden] attribute's default
   `display: none`, so we re-assert hiding via the attribute selector. */
.tz-banner[hidden] { display: none !important; }
.tz-banner {
  position: relative;
  z-index: 49;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  margin: 0;
  background: linear-gradient(180deg, rgba(255, 244, 220, 0.95), rgba(246, 232, 200, 0.95));
  border-bottom: 1px solid rgba(184, 142, 42, 0.36);
  font-size: 13px;
  color: var(--fg-2);
}
.tz-banner-text { flex: 1 1 260px; }
.tz-banner-text strong {
  font-family: -apple-system, "Segoe UI", monospace;
  color: var(--fg);
  background: rgba(255, 255, 255, 0.55);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
}
.tz-banner-actions {
  display: flex; align-items: center; gap: 8px; margin: 0;
}
.tz-banner-btn { padding: 6px 12px; font-size: 13px; }
[data-theme="dark"] .tz-banner {
  background: linear-gradient(180deg, rgba(80, 60, 30, 0.30), rgba(60, 45, 20, 0.30));
  border-bottom-color: rgba(216, 169, 66, 0.40);
}
[data-theme="dark"] .tz-banner-text strong {
  background: rgba(255, 255, 255, 0.08);
}

/* (Slice 1.16's separate day-header strip has been retired — headers
   now live as row 1 of the single .multi-grid above. See the
   MULTI-DAY VIEW block near the top of this file.) */

/* ---------------------------------------------------------------------------
   Slice 2.5 — registered property + JS-driven zoom animation
   ---------------------------------------------------------------------------
   --px-per-min is registered as <number> so it's a real animatable property
   (CSS can interpolate it), but we DON'T use a CSS transition for the zoom.
   The reason: zoom needs both the variable AND the page scroll position to
   animate in perfect lockstep — otherwise the time-of-day the user was
   looking at slides away from their fingers during the transition.

   The animation is driven by requestAnimationFrame in app.js (see
   `animateZoom`). It updates `--px-per-min` and `window.scrollY` together
   every frame, so the anchor point stays visually stationary.
*/
@property --px-per-min {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}

/* Tasks, hour-rows, the now-line and the battery-curve buckets all use
   `calc(var(--px-per-min) * Npx)` for their top/height. As JS updates the
   variable each frame, those calc'd values re-evaluate every frame too. */

/* ---------------------------------------------------------------------------
   Slice 2 — drag-to-schedule
   --------------------------------------------------------------------------- */

/* Chips show a grab cursor on PC. On touch we use `touch-action: none`
   so the browser doesn't interpret finger-move on a chip as native
   scroll (which would fire pointercancel and kill our drag). Scrolling
   from the EMPTY space between chips still works normally because
   touch-action only affects touches that start on the chip itself. */
[data-draggable] {
  cursor: grab;
  touch-action: none;

  /* Stop the browser from selecting the chip title on long-press
     (Android Chrome's blue selection handles) — selection mode would
     swallow the gesture before our timer fires. */
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;

  /* iOS Safari shows a link-preview "callout" on long-press of an
     anchor by default. This disables it so the long-press is ours. */
  -webkit-touch-callout: none;
}
[data-draggable]:active {
  cursor: grabbing;
}

/* The original chip while it's being dragged — keep it in place but
   dim it so the user sees it lift off. */
.is-dragging-source {
  opacity: 0.35;
  filter: saturate(0.7);
}

/* Slice 2.5: brief "lift" the moment a touch long-press arms the drag.
   Gives the user a clear "yes — you're now in drag mode" before they
   move their finger. Removed automatically when drag begins or pointer up. */
.is-press-armed {
  transform: scale(1.04);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.2),
    0 1px 3px rgba(0, 0, 0, 0.1);
  transition: transform 80ms ease, box-shadow 80ms ease;
  z-index: 5;
}

/* The floating clone that follows the pointer. */
.drag-ghost {
  opacity: 0.85;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.25),
    0 2px 6px rgba(0, 0, 0, 0.15);
  transform: rotate(-1deg);
  transition: transform 80ms ease;
}

/* Subtle highlight on whichever drop zone the pointer is currently over. */
[data-drop-zone].is-drop-target {
  outline: 2px dashed var(--accent, #c89060);
  outline-offset: -2px;
  background-image:
    linear-gradient(
      to bottom,
      rgba(200, 144, 96, 0.06),
      rgba(200, 144, 96, 0.06)
    );
}

/* Brief red flash on the source chip if the reschedule request fails. */
@keyframes drag-error-flash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 60, 60, 0); }
  40%      { box-shadow: 0 0 0 3px rgba(220, 60, 60, 0.55); }
}
.drag-error-flash {
  animation: drag-error-flash 600ms ease-out;
}

/* ---------------------------------------------------------------------------
   Slice 2 follow-up — task categories (background vs active)
   --------------------------------------------------------------------------- */

/* Background tasks are calendar reminders that usually don't cost energy
   (holidays, meetings, "go to airport"). Keep the quadrant colour so the
   priority signal isn't lost, but dim and lighten so they read as
   "this is on the calendar but not consuming you". */
.task.is-background,
.task-card.is-background {
  opacity: 0.6;
  filter: saturate(0.85);
  border-style: dashed;
}

/* Hover lifts the dim a touch so they're still tappable / readable. */
.task.is-background:hover,
.task-card.is-background:hover {
  opacity: 0.85;
}

/* ---------------------------------------------------------------------------
   Slice 2 follow-up — per-weekday daily budget (Settings) + morning sleep prompt
   --------------------------------------------------------------------------- */

.weekday-budget-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 6px;
}
.weekday-budget-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.weekday-budget-label {
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
  color: var(--muted, #8a8170);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.weekday-budget-field input[type="number"] {
  width: 100%;
  min-width: 0;
  padding: 6px 8px;
  text-align: center;
  font-size: 0.95rem;
  border: 1px solid var(--border, #d8cdb6);
  border-radius: 6px;
  background: var(--surface, #fff);
}
/* Narrow phones — let it wrap to two rows rather than squashing illegibly. */
@media (max-width: 520px) {
  .weekday-budget-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Morning sleep prompt — a calmer cousin of the recalibrate callout.
   Buttons render on every platform: explicit -webkit-appearance: none
   so iOS Safari doesn't substitute its native button look (which can
   make them invisible against a light background). */
.sleep-prompt {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 12px 16px;
  margin: 0 0 16px;
  border-radius: 12px;
  background: var(--surface-soft, rgba(255, 255, 255, 0.6));
  border: 1px solid var(--border, #d8cdb6);
}
.sleep-prompt-text {
  flex: 1 1 100%;
  font-weight: 600;
  margin: 0 0 4px;
}
.sleep-prompt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}
.sleep-prompt-form {
  display: inline-block;
  margin: 0;
}
.sleep-prompt-chip,
.sleep-prompt-skip {
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  padding: 9px 16px;
  min-height: 38px;
  border-radius: 999px;
  border: 1px solid var(--border, #d8cdb6);
  background: var(--surface, #ffffff);
  color: var(--text, #2c241a);
  font-size: 0.95rem;
  font-family: inherit;
  line-height: 1.2;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, transform 100ms ease;
}
.sleep-prompt-chip:hover,
.sleep-prompt-skip:hover {
  background: var(--accent-soft, rgba(200, 144, 96, 0.15));
  border-color: var(--accent, #c89060);
}
.sleep-prompt-chip:active,
.sleep-prompt-skip:active {
  transform: scale(0.97);
}
.sleep-prompt-skip {
  background: transparent;
  border-color: transparent;
  color: var(--muted, #8a8170);
  font-style: italic;
}

/* ---------------------------------------------------------------------------
   Slice 2 follow-up — time-of-day battery curve (day view only, v1)
   --------------------------------------------------------------------------- */

/* Thin vertical strip in the grid gutter, between hour labels and tasks.
   The grid is 56px-wide-gutter, then task area. We sit at left 46px
   (4px gap from labels) and are 6px wide. Tasks start at left 56px so
   there's no overlap. pointer-events: none so the strip can't intercept
   drag-to-schedule events landing on the .grid-canvas. */
.battery-curve-strip {
  position: absolute;
  top: 0;
  left: 46px;
  width: 6px;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.battery-curve-bucket {
  position: absolute;
  left: 0;
  right: 0;
  border-radius: 2px;
}
/* State colours mirror the existing battery_state palette, with a new
   `over` state for the below-zero red zone. */
.battery-curve-bucket.state-healthy  { background: rgba( 95, 160, 100, 0.55); }
.battery-curve-bucket.state-low      { background: rgba(210, 145,  55, 0.55); }
.battery-curve-bucket.state-critical { background: rgba(200,  85,  55, 0.70); }
.battery-curve-bucket.state-over     { background: rgba(190,  40,  40, 0.85); }

/* Dark theme lifts the alpha so the strip remains visible on the dark surface. */
[data-theme="dark"] .battery-curve-bucket.state-healthy  { background: rgba(120, 200, 130, 0.65); }
[data-theme="dark"] .battery-curve-bucket.state-low      { background: rgba(225, 165,  75, 0.65); }
[data-theme="dark"] .battery-curve-bucket.state-critical { background: rgba(225, 105,  75, 0.80); }
[data-theme="dark"] .battery-curve-bucket.state-over     { background: rgba(225,  70,  70, 0.90); }

/* ---------------------------------------------------------------------------
   Slice 2.5+ — chip icons (always on) and tiered chip detail (zoom-aware)
   ---------------------------------------------------------------------------
   The chip HTML always contains every tier of content (title, meta,
   description, Q&A, metrics). CSS hides everything past the meta line by
   default and progressively reveals more as the day-view canvas's
   data-zoom attribute climbs. No JS gating, no re-fetch — just CSS.
*/

/* Always-on icons next to the title. Recurring (⟳) and high importance (!). */
.task-icon {
  display: inline-block;
  margin-left: 4px;
  font-size: 0.85em;
  opacity: 0.85;
  vertical-align: baseline;
}
.task-icon-recurring {
  color: var(--accent, #c89060);
}
.task-icon-important {
  font-weight: 800;
  color: #c8425a;
  margin-left: 3px;
}

/* Hide every chip-detail tier by default (1× zoom on day view, AND every
   other view that doesn't expose a data-zoom attribute on its grid). */
.task-description,
.task-qa,
.task-metrics {
  display: none;
}

/* Day-view 2× — show the AI's brief description. One short paragraph;
   we clamp it so it doesn't blow the chip out. */
.grid-canvas[data-zoom="2"] .task .task-description,
.grid-canvas[data-zoom="4"] .task .task-description,
.grid-canvas[data-zoom="8"] .task .task-description {
  display: block;
  margin-top: 4px;
  font-size: 0.78em;
  line-height: 1.3;
  opacity: 0.85;
  /* Soft clamp at zoom 2× so a long description doesn't push other
     content off-chip. Higher zoom levels relax this below. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Day-view 4× — keep description + show Claude's Q&A list. */
.grid-canvas[data-zoom="4"] .task .task-description {
  -webkit-line-clamp: 4;
}
.grid-canvas[data-zoom="4"] .task .task-qa,
.grid-canvas[data-zoom="8"] .task .task-qa {
  display: block;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.72em;
}
.grid-canvas[data-zoom="4"] .task .task-qa li,
.grid-canvas[data-zoom="8"] .task .task-qa li {
  display: flex;
  gap: 6px;
  align-items: baseline;
  padding: 2px 0;
  border-top: 1px dashed currentColor;
  opacity: 0.8;
}
.grid-canvas[data-zoom="4"] .task .task-qa li:first-child,
.grid-canvas[data-zoom="8"] .task .task-qa li:first-child {
  border-top: none;
}
.task-qa-q { flex: 1 1 auto; }
.task-qa-a {
  flex: 0 0 auto;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.task-qa-a-yes { color: #5fa064; }
.task-qa-a-no  { color: #c8694a; }

/* Day-view 8× — show everything: full description, Q&A, and the
   urgency / importance / category / recurrence metrics. */
.grid-canvas[data-zoom="8"] .task .task-description {
  -webkit-line-clamp: unset;
}
.grid-canvas[data-zoom="8"] .task .task-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
  font-size: 0.7em;
}
.task-metric {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.05);
}
[data-theme="dark"] .task-metric {
  background: rgba(255, 255, 255, 0.08);
}

/* At higher zooms the chip has more vertical real estate; allow scroll
   inside the chip if its content is denser than even the tall version
   (e.g. a long description + 10 Q&A items at 4×, 30 min duration). */
.grid-canvas[data-zoom="4"] .task,
.grid-canvas[data-zoom="8"] .task {
  overflow: hidden;  /* clip but don't add a scrollbar — keep it calm */
}

/* ---------------------------------------------------------------------------
   Settings — "How well is the app working?" section
   ---------------------------------------------------------------------------
   Compact, glance-able. Three stat tiles + a trend pill + a list of
   recent tasks with their scores. Score colours match the existing
   score-good/mid/far palette used on the (now-hidden) task-form badge.
*/
.accuracy-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 12px 0 8px;
  align-items: stretch;
}
.accuracy-stat {
  flex: 1 1 120px;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--surface-soft, rgba(255, 255, 255, 0.55));
  border: 1px solid var(--border, #d8cdb6);
}
.accuracy-stat-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #8a8170);
}
.accuracy-stat-value {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.1;
  margin: 4px 0 2px;
}
.accuracy-stat-sub {
  font-size: 0.78rem;
  color: var(--muted, #8a8170);
}
.accuracy-trend {
  flex: 1 1 100%;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
}
.accuracy-trend-improving { background: rgba(95, 160, 100, 0.18); color: #3f7a4a; }
.accuracy-trend-stable    { background: rgba(140, 130, 110, 0.15); color: var(--muted, #6e6452); }
.accuracy-trend-declining { background: rgba(200, 85, 55, 0.18); color: #a85033; }

.accuracy-recent-heading {
  margin: 18px 0 6px;
  font-size: 0.95rem;
  font-weight: 600;
}
.accuracy-recent {
  list-style: none;
  padding: 0;
  margin: 0;
}
.accuracy-recent-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--border, #d8cdb6);
}
.accuracy-recent-row:first-child { border-top: none; }
.accuracy-recent-title {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.accuracy-recent-score {
  flex: 0 0 auto;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  background: rgba(0, 0, 0, 0.05);
}
.accuracy-recent-score.score-good { background: rgba(95, 160, 100, 0.22); color: #3f7a4a; }
.accuracy-recent-score.score-mid  { background: rgba(210, 145, 55, 0.22); color: #a86d1e; }
.accuracy-recent-score.score-far  { background: rgba(200, 85, 55, 0.22); color: #a85033; }
.accuracy-recent-when {
  flex: 0 0 auto;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

[data-theme="dark"] .accuracy-recent-score { background: rgba(255, 255, 255, 0.08); }

/* ==========================================================
   SLICE 1.20 — Predicted-energy spike
   Numeric "what level am I at right now?" chips on the battery
   hero. Distinct from the wellbeing trigger (which captures
   categorical feelings). Step 1 only adds the chips — Step 2
   draws the predicted curve, Step 3 wires check-ins into it.
   ========================================================== */
.energy-checkin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 6px;
}
.energy-checkin-prompt {
  font-size: 12.5px;
  letter-spacing: 0.02em;
}
.energy-checkin-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}
.energy-checkin-form { margin: 0; padding: 0; }
.energy-checkin-chip {
  appearance: none;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface-strong), var(--surface-2));
  color: var(--accent-2);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease,
              color .15s ease, transform .1s ease;
}
.energy-checkin-chip:hover {
  background: var(--surface-strong);
  border-color: var(--accent);
}
.energy-checkin-chip:active { transform: translateY(1px); }

/* Tonal accents per level — low = warm-orange wash, great = leafy green.
   Calm and earth-toned to match the rest of the palette; opacity is
   the main lever so themes still drive the underlying hue. */
.energy-checkin-chip.energy-level-low::before   { content: "▁"; margin-right: 4px; opacity: 0.6; }
.energy-checkin-chip.energy-level-ok::before    { content: "▃"; margin-right: 4px; opacity: 0.6; }
.energy-checkin-chip.energy-level-good::before  { content: "▅"; margin-right: 4px; opacity: 0.6; }
.energy-checkin-chip.energy-level-great::before { content: "▇"; margin-right: 4px; opacity: 0.6; }

.energy-checkin-chip.energy-level-low   { color: #a85033; }
.energy-checkin-chip.energy-level-ok    { color: #a86d1e; }
.energy-checkin-chip.energy-level-good  { color: #4f7a3f; }
.energy-checkin-chip.energy-level-great { color: #3f7a4a; }

/* Currently-logged level: filled pill, stronger border. */
.energy-checkin-chip.is-current {
  background: var(--accent-warm);
  color: #fff;
  border-color: var(--accent-warm);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.energy-checkin-chip.is-current::before { opacity: 0.95; }

.energy-checkin-last {
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

[data-theme="dark"] .energy-checkin-chip {
  background: rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] .energy-checkin-chip:hover {
  background: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .energy-checkin-chip.energy-level-low   { color: #e89175; }
[data-theme="dark"] .energy-checkin-chip.energy-level-ok    { color: #e0a96b; }
[data-theme="dark"] .energy-checkin-chip.energy-level-good  { color: #93b87a; }
[data-theme="dark"] .energy-checkin-chip.energy-level-great { color: #88c79a; }

@media (max-width: 480px) {
  .energy-checkin { gap: 6px 8px; }
  .energy-checkin-prompt { flex: 1 1 100%; }
  .energy-checkin-chip { padding: 6px 11px; font-size: 12px; }
}

/* Predicted-energy sparkline section. Sits directly under the battery
   hero so the two energy reads — ledger vs. predicted — are side by side. */
.predicted-energy {
  margin: 6px 0 14px;
  padding: 10px 14px 8px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
}
.predicted-energy-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.predicted-energy-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-2);
}
.predicted-energy-swatch {
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent-warm);
  display: inline-block;
}
.predicted-energy-source { font-weight: 400; font-size: 11.5px; }
.predicted-energy-now {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.predicted-energy-now strong { font-size: 15px; }
.predicted-energy-chart {
  display: block;
  width: 100%;
  height: 60px;
  /* Soft border + tiny rounded corners frame the chart without competing
     with the prediction curve inside it. overflow: visible lets the
     line's stroke breathe past the viewBox top without clipping. */
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 2px 4px;
  box-sizing: border-box;
  overflow: visible;
}
/* Single faint 50% reference — the only background mark on the chart. */
.pe-midtick {
  stroke: var(--line);
  stroke-width: 1;
  opacity: 0.35;
}
.pe-curve {
  stroke: var(--accent-warm);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  fill: none;
}
/* "Now" marker — solid line, no dot. (Previously a <circle> sat on this
   line; preserveAspectRatio="none" stretched it into an oval.) */
.pe-now {
  stroke: var(--accent-2);
  stroke-width: 1;
  opacity: 0.55;
}
.predicted-energy-times {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

[data-theme="dark"] .predicted-energy {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
}

/* Step 4 — proactive suggestion callout. Sits just under the predicted-
   energy section when the user has runway + a free slot. Calm, not
   pushy — single primary action, "Not now" hits the same 20h snooze
   used elsewhere. */
.energy-suggestion {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--surface-strong), var(--surface-2));
  border: 1px solid var(--accent-warm);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.energy-suggestion-body {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: 1 1 320px;
  font-size: 13.5px;
  line-height: 1.45;
}
.energy-suggestion-icon { font-size: 16px; }
.energy-suggestion-text strong { font-weight: 700; }
.energy-suggestion-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.energy-suggestion-form { margin: 0; padding: 0; }

@media (max-width: 480px) {
  .energy-suggestion { padding: 10px 12px; }
  .energy-suggestion-body { flex: 1 1 100%; font-size: 13px; }
  .energy-suggestion-actions { flex: 1 1 100%; justify-content: flex-end; }
}