:root {
  --surface-1: #ffffff;
  --surface-2: #f5f5fb;
  --page: #faf8f6;
  --text-primary: #23222b;
  --text-secondary: #565563;
  --muted: #777684;
  --grid: #e9e5e1;
  --baseline: #d8d4d0;
  --border: #e7e2dc;
  --border-strong: #d8d3ce;
  --shadow: 0 16px 48px -34px rgba(35, 34, 43, 0.35);
  --series-1: #5b76d8;
  --series-2: #8a72af;
  --series-3: #c69a55;
  --series-4: #5f9690;
  --series-5: #5238cc;
  --series-6: #bf7388;
  --series-7: #9270b7;
  --series-8: #c77b62;
  --blue-bright: #a9caff;
  --paper-blue: #f2f5ff;
  --lavender: #dbc1f8;
  --good: #4f8b74;
  --radius: 20px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "DM Sans", -apple-system, "Segoe UI", sans-serif;
  background: var(--page);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  line-height: 1.45;
}

body.auth-locked { overflow: hidden; }
body.auth-locked .shell { visibility: hidden; }

.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 76% 20%, rgba(169, 202, 255, 0.32), transparent 28%),
    var(--page);
}
.auth-gate[hidden] { display: none; }
.auth-card {
  width: min(100%, 390px);
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow);
}
.auth-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 12px;
  background: var(--series-1);
  color: #fff;
  font-size: 20px;
}
.auth-card h1 { margin: 0 0 8px; font-size: 24px; font-weight: 500; }
.auth-card p { margin: 0 0 22px; color: var(--text-secondary); font-size: 14px; line-height: 1.5; }
.auth-card input { margin-bottom: 12px; }
.auth-card button { width: 100%; }
.auth-status { min-height: 18px; margin-top: 10px; color: var(--series-6); font-size: 13px; }

a { color: var(--series-1); }

.shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 28px 80px;
}

header.top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  flex-wrap: wrap;
  gap: 18px;
  min-height: 190px;
  margin-bottom: 18px;
  padding: 36px 42px 48px;
  border: 1px solid #e2e7f6;
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(255,255,255,0.96), var(--paper-blue));
  box-shadow: var(--shadow);
}
header.top::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 34px;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--blue-bright) 20%, var(--series-1) 62%, transparent);
  opacity: 0.5;
}
.top-copy, .top-right { position: relative; z-index: 2; }
.page-eyebrow {
  margin-bottom: 9px;
  color: var(--series-1);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.top-stars { position: absolute; top: 30px; right: 40px; color: var(--series-5); }
.top-stars span:first-child { font-size: 24px; }
.top-stars span:last-child { display: inline-block; margin: 28px 0 0 16px; color: var(--series-2); font-size: 13px; }

header.top h1 {
  font-size: clamp(38px, 5vw, 58px);
  font-weight: 300;
  margin: 0;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

header.top .date {
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* ---- stat row ---- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: 32px;
}

.stat-tile {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow);
}

.stat-tile .eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--series-1);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.stat-tile .eyebrow svg { width: 13px; height: 13px; opacity: 0.8; }

.stat-tile .value {
  font-size: 24px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.2;
}
#stat-news { font-size: 14px; font-weight: 500; line-height: 1.35; }

.stat-tile .value small {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.stat-tile .delta {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.mood-dot {
  width: 14px; height: 14px; border-radius: 50%; flex: none;
  box-shadow: 0 0 0 3px var(--surface-2);
}

/* ---- eyebrow section labels ---- */
.section-label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--series-2);
  margin: 40px 0 14px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--border);
}
/* Only zero the top margin when the label really is the very first thing in its
   panel. This used to be :first-of-type, which fired once inside every tab and left
   labels like "To carry into the room" hugging the card above them. */
.tabpanel > .section-label:first-child,
.shell > .section-label:first-child { margin-top: 0; }
.section-label .sl-note {
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--muted);
}
/* A firmer divide where the daily log ends and the reflective material begins. */
.section-label.group-break {
  margin-top: 56px;
  border-bottom: none;
  padding-bottom: 4px;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.22em;
}
.section-label.group-break::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border-strong), transparent);
}
/* Section labels that are nested inside their own section wrapper keep the old lightness. */
.years-ahead .section-label,
.wishlist-section .section-label { border-bottom: none; padding-bottom: 0; color: var(--series-1); font-size: 11px; letter-spacing: 0.2em; }

/* ---- layout ---- */
.hero-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 18px;
  align-items: start;
}

.stack { display: grid; gap: 18px; }

.trends-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 18px;
}

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
}

/* ---- card ---- */
.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 28px;
  box-shadow: var(--shadow);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.card.wide { grid-column: 1 / -1; }
.hero-grid > .stack:first-child .card { background: linear-gradient(145deg, #fff, #fbfaff); }

.history-preview {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 142px;
  border-color: #e2e7f6;
  background: linear-gradient(135deg, #fff, var(--paper-blue));
}
.history-preview::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 24px;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--blue-bright), transparent);
  opacity: 0.65;
}
.history-preview > * { position: relative; z-index: 1; }
.history-preview .sub { margin-bottom: 0; }
.history-open {
  flex: none;
  padding: 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  color: var(--series-1);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.history-open:hover {
  border-color: var(--series-1);
  background: var(--surface-2);
}

@media (max-width: 700px) {
  .history-preview { align-items: flex-start; flex-direction: column; }
}

.card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.card-head .icon {
  width: 32px; height: 32px; border-radius: 10px;
  background: var(--paper-blue);
  display: flex; align-items: center; justify-content: center;
  color: var(--series-1);
  flex: none;
}
.card-head .icon svg { width: 15px; height: 15px; }

.card h2 {
  font-size: 18px;
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.005em;
}

.card .sub {
  font-size: 13px;
  color: var(--muted);
  margin: 3px 0 18px 42px;
  line-height: 1.55;
}
.card > form, .card > .body { margin-top: 2px; }

label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  margin: 12px 0 5px;
}

input, select, textarea {
  width: 100%;
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: #faf9fc;
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--series-1);
  background: var(--surface-1);
  box-shadow: 0 0 0 3px rgba(91, 118, 216, 0.11);
}

input[type="color"] { padding: 3px; height: 38px; cursor: pointer; }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

button {
  margin-top: 16px;
  padding: 10px 18px;
  border-radius: 10px;
  border: none;
  background: var(--text-primary);
  color: var(--page);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.05s ease;
}
button:hover { opacity: 0.85; }
button:active { transform: scale(0.98); }
button.secondary {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-strong);
}
button.secondary:hover { background: var(--surface-2); opacity: 1; }

.status-msg { font-size: 12px; color: var(--good); margin-top: 8px; min-height: 14px; }

.todo-row { display: grid; grid-template-columns: auto 1fr 120px; gap: 8px; align-items: center; margin-bottom: 8px; }
.todo-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--series-1); cursor: pointer; }
.todo-row.done label,
.todo-row.done span { text-decoration: line-through; color: var(--muted); }

.news-item { padding: 14px 0; border-bottom: 1px solid var(--grid); }
.news-item:first-child { padding-top: 4px; }
.news-item:last-child { border-bottom: none; }
.news-item .rank {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--surface-2); color: var(--text-secondary);
  font-size: 10.5px; font-weight: 700; margin-right: 7px;
}
.news-item h3 { font-size: 15px; font-weight: 500; line-height: 1.4; margin: 0 0 6px; display: inline; }
.news-item p { font-size: 13px; color: var(--text-secondary); margin: 7px 0; line-height: 1.6; }
.news-item a { font-size: 12px; text-decoration: none; font-weight: 600; }
.news-item a:hover { text-decoration: underline; }

.chart-wrap { position: relative; }
svg.chart { width: 100%; height: 200px; overflow: visible; display: block; }
.chart-line { fill: none; stroke: var(--series-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-dot { fill: var(--series-1); }
.chart-grid { stroke: var(--grid); stroke-width: 1; }
.chart-axis-label { fill: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.chart-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--text-primary);
  color: var(--page);
  border-radius: 7px;
  padding: 5px 9px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  transform: translate(-50%, -115%);
  white-space: nowrap;
  box-shadow: var(--shadow);
  display: none;
  z-index: 2;
}

.legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; font-size: 12px; color: var(--text-secondary); }
.legend .swatch { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }

.emo-strip { display: flex; gap: 3px; flex-wrap: wrap; margin-bottom: 16px; }
.emo-swatch { width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--border); transition: transform 0.1s ease; }
.emo-swatch:hover { transform: scale(1.15); }

.emo-entry { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--grid); }
.emo-entry:last-child { border-bottom: none; }
.emo-entry .dot { width: 15px; height: 15px; border-radius: 50%; margin-top: 3px; box-shadow: 0 0 0 3px var(--surface-2); }
.emo-entry .meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.emo-entry .date { font-size: 11px; color: var(--muted); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

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

/* ---- her story so far ---- */
.thread-row { border-bottom: 1px solid var(--grid); }
.thread-row:last-child { border-bottom: none; }
.thread-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
}
.thread-head[role="button"] { cursor: pointer; }
.thread-head[role="button"]:hover .thread-title { color: var(--series-1); }
.thread-caret {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 16px;
  transition: transform 0.15s ease;
}
.thread-row.open .thread-caret { transform: rotate(90deg); }
.thread-detail { padding: 2px 0 14px 32px; }
.thread-detail-note { font-size: 12px; color: var(--muted); margin-bottom: 10px; font-style: italic; }
.thread-example { padding: 8px 0 8px 12px; border-left: 2px solid var(--grid); margin-bottom: 8px; }
.thread-example .meta { font-size: 11.5px; color: var(--muted); margin-bottom: 3px; font-variant-numeric: tabular-nums; }
.thread-example-text { font-size: 13px; line-height: 1.55; color: var(--text-secondary); }
.thread-row .rank {
  flex: 0 0 20px;
  font-size: 12px;
  font-weight: 650;
  color: var(--muted);
  text-align: right;
}
.thread-main { flex: 1; min-width: 0; }
.thread-title { font-size: 14px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-main .meta { font-size: 12px; color: var(--muted); margin-top: 1px; font-variant-numeric: tabular-nums; }
.thread-tags { display: flex; gap: 5px; flex-shrink: 0; }
.chip {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  background: var(--surface-2);
}
.thread-count {
  flex: 0 0 44px;
  text-align: right;
  font-size: 13px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

footer.foot {
  text-align: center;
  color: var(--muted);
  font-size: 11.5px;
  margin-top: 48px;
}

/* ---------- Today's briefing ---------- */
.briefing-story {
  padding: 16px 0;
  border-top: 1px solid var(--border);
}
.briefing-story:first-of-type { border-top: none; padding-top: 6px; }
.briefing-story .eyebrow {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 4px;
}
.briefing-core h3 {
  font-size: 18px; font-weight: 500; line-height: 1.38; margin: 2px 0 8px; color: var(--text-primary);
}
.briefing-core p, .briefing-detail p {
  margin: 8px 0; color: var(--text-secondary); line-height: 1.6; font-size: 14.5px;
}
.briefing-core > p:first-of-type { color: var(--text-primary); }
.briefing-detail strong, .briefing-core strong { color: var(--series-1); font-weight: 600; }
.briefing-toggle {
  margin: 0; padding: 4px 0; background: none; border: none;
  color: var(--series-1); font-size: 13px; font-weight: 600; cursor: pointer; width: auto;
}
.briefing-toggle:hover { text-decoration: underline; }

/* ---------- preview / demo mode ---------- */
.top-right { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; max-width: 430px; }
.demo-toggle {
  margin-top: 0; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface-1);
  color: var(--text-secondary); cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.demo-toggle:hover { border-color: var(--series-1); color: var(--series-1); }
.demo-toggle.on { background: var(--series-1); color: #fff; border-color: var(--series-1); }
.preview-banner { display: none; }
body.demo .preview-banner {
  display: block; margin: 0 0 16px; padding: 9px 14px; border-radius: 10px;
  font-size: 13px; font-weight: 500;
  color: var(--series-1);
  background: rgba(91, 118, 216, 0.09);
  border: 1px solid rgba(91, 118, 216, 0.24);
}

@media (max-width: 700px) {
  .shell { padding: 16px 14px 60px; }
  header.top { min-height: 210px; padding: 32px 26px 50px; align-items: flex-start; }
  .top-right { justify-content: flex-start; max-width: calc(100% - 20px); }
  .top-stars { top: 22px; right: 24px; }
  .card { padding: 23px 20px; }
  .trends-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  header.top { min-height: 250px; flex-direction: column; justify-content: center; }
  header.top h1 { font-size: 42px; }
  .top-right { width: 100%; }
  header.top .date { flex-basis: 100%; }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .stat-tile { padding: 17px 16px; }
  .stat-tile .value { font-size: 21px; }
  .row2, .row3 { grid-template-columns: 1fr; }
  .todo-row { grid-template-columns: auto minmax(0, 1fr); }
  .todo-row select { grid-column: 2; }
  .card .sub { margin-left: 0; }
  .history-open { white-space: normal; }
  .emo-entry { grid-template-columns: 18px 1fr; }
  .emo-entry .date { grid-column: 2; text-align: left; }
}

/* ---- Year & month themes: the main highlight ---- */
.hero-month {
  margin: 18px 0 0;
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.2;
}
.hero-month-name { color: var(--text-secondary); font-weight: 500; }
.hero-month-sep { color: var(--blue-bright); }
.hero-month-theme { color: var(--series-1); font-weight: 500; letter-spacing: -0.01em; }

.theme-month { margin-bottom: 18px; }
.theme-month .card-head { margin-bottom: 12px; }
.theme-month h2 .sep { color: var(--blue-bright); font-weight: 300; }
.theme-month h2 #tm-title { color: var(--series-1); }

.theme-edit {
  margin-left: auto;
  padding: 6px 13px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.theme-edit:hover { border-color: var(--series-1); color: var(--series-1); background: var(--paper-blue); }

.theme-body {
  max-width: 68ch;
  margin: 0 0 22px;
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1.72;
}
.theme-body:empty { display: none; }

.focus-block { border-top: 1px solid var(--grid); padding-top: 18px; }
.focus-label {
  margin-bottom: 12px;
  color: var(--series-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.focus-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.focus-list li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px 9px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-primary);
  font-size: 14px;
}
.focus-list li::before {
  content: "✦";
  color: var(--series-1);
  font-size: 12px;
  line-height: 1;
}

/* ---- Years ahead: a horizon of themes ---- */
.years-ahead { margin-bottom: 8px; }
.horizon {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}
.horizon-card {
  position: relative;
  padding: 18px 18px 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-1);
  box-shadow: var(--shadow);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.horizon-card:hover { transform: translateY(-2px); }
.horizon-card .hy-year {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  margin-bottom: 9px;
}
.horizon-card .hy-theme { font-size: 15px; font-weight: 400; line-height: 1.4; color: var(--text-primary); }

/* This year is the star; the rest recede into smaller, quieter cards. */
.horizon-card.is-current {
  grid-column: 1 / -1;
  padding: 26px 28px 30px;
  border-color: transparent;
  background:
    linear-gradient(150deg, rgba(255,255,255,0.92), var(--paper-blue)),
    var(--surface-1);
  box-shadow: 0 18px 44px -30px rgba(82, 56, 204, 0.5);
  outline: 1px solid var(--blue-bright);
}
.horizon-card.is-current .hy-year { color: var(--series-1); font-size: 14px; }
.horizon-card.is-current .hy-year::before { content: "✦"; color: var(--series-5); }
.horizon-card.is-current .hy-theme { color: var(--series-5); font-weight: 500; font-size: clamp(22px, 3.4vw, 30px); line-height: 1.2; }

.horizon-card:not(.is-current) { padding: 13px 15px 15px; box-shadow: 0 10px 30px -26px rgba(35,34,43,0.4); }
.horizon-card:not(.is-current) .hy-year { font-size: 12px; margin-bottom: 6px; }
.horizon-card:not(.is-current) .hy-theme { font-size: 13.5px; color: var(--text-secondary); }
.horizon-card .hy-edit {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: rgba(255,255,255,0.7);
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.horizon-card:hover .hy-edit, .hy-edit:focus-visible { opacity: 1; }
.horizon-card .hy-edit:hover { border-color: var(--series-1); color: var(--series-1); }

/* ---- inline theme editor ---- */
.theme-editor { display: grid; gap: 12px; }
.theme-editor label {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.theme-editor input, .theme-editor textarea {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--border-strong);
  border-radius: 11px;
  background: var(--surface-1);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.6;
}
.theme-editor input:focus, .theme-editor textarea:focus {
  outline: none;
  border-color: var(--series-1);
  box-shadow: 0 0 0 3px rgba(91,118,216,0.12);
}
.theme-editor textarea { resize: vertical; min-height: 92px; }
.theme-editor .hint { margin: -4px 0 0; color: var(--muted); font-size: 12px; }
.theme-editor .editor-actions { display: flex; gap: 10px; align-items: center; }
.theme-editor .editor-actions .save-note { color: var(--good); font-size: 13px; }
.horizon-card .theme-editor input { font-size: 14px; padding: 8px 10px; }

@media (max-width: 720px) {
  .theme-body { font-size: 15px; }
  .horizon { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

/* ---- Wishlist: things she wants to buy ---- */
.wishlist-section { margin-bottom: 8px; }
.wishlist .card-head { margin-bottom: 4px; }
.wishlist-total {
  margin-left: auto;
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--paper-blue);
  color: var(--series-1);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wish-list { list-style: none; margin: 14px 0 4px; padding: 0; }
.wish-item {
  display: grid;
  grid-template-columns: 26px 1fr auto 30px;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--grid);
}
.wish-item:last-child { border-bottom: none; }
.wish-item.empty, .wish-list .empty { display: block; padding: 16px 4px; color: var(--muted); font-size: 14px; border: none; }
.wish-check {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 1.5px solid var(--border-strong);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.wish-item.bought .wish-check { background: var(--good); border-color: var(--good); }
.wish-name {
  font-size: 15.5px;
  cursor: text;
  border-radius: 6px;
  padding: 2px 4px;
  margin: -2px -4px;
  transition: background 0.12s ease;
}
.wish-name:hover { background: var(--surface-2); }
.wish-item.bought .wish-name { text-decoration: line-through; color: var(--muted); }
.wish-cost {
  padding: 6px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-primary);
  font-size: 13.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.wish-cost:hover { border-color: var(--series-1); color: var(--series-1); }
.wish-cost.is-empty { background: transparent; border-style: dashed; color: var(--muted); font-weight: 500; }
.wish-remove {
  width: 30px; height: 30px;
  border: none; border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 20px; line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.wish-item:hover .wish-remove, .wish-remove:focus-visible { opacity: 1; }
.wish-remove:hover { background: #fbf0f3; color: var(--series-6); }
.wish-inline-input {
  width: 100%;
  min-width: 90px;
  padding: 6px 10px;
  border: 1px solid var(--series-1);
  border-radius: 9px;
  background: var(--surface-1);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 14px;
  box-shadow: 0 0 0 3px rgba(91,118,216,0.12);
}
.wish-add {
  display: grid;
  grid-template-columns: 1fr 150px auto;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--grid);
}
.wish-add input {
  padding: 10px 13px;
  border: 1px solid var(--border-strong);
  border-radius: 11px;
  background: var(--surface-1);
  font-family: inherit;
  font-size: 14.5px;
  color: var(--text-primary);
}
.wish-add input:focus { outline: none; border-color: var(--series-1); box-shadow: 0 0 0 3px rgba(91,118,216,0.12); }
.wish-add button { margin: 0; white-space: nowrap; }

@media (max-width: 620px) {
  .wish-add { grid-template-columns: 1fr auto; }
  .wish-add input[name="item"] { grid-column: 1 / -1; }
  .wish-remove { opacity: 1; }
}

/* ---- Illustrated aspirational background ---- */
.sky-scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.sky-scene svg { width: 100%; height: 100%; display: block; }
/* Let the dreamy horizon breathe behind the content: the page plane itself
   is transparent so the fixed scene shows through the margins and gaps, while
   the white cards keep every reading surface calm and legible. */
body { background: #f3ecfb; }
body.auth-locked .sky-scene { filter: blur(2px); opacity: 0.6; }

/* ---- Gentle emotion-exploration chat ---- */
.explore-btn { margin-top: 12px; }
.reflect-panel { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--grid); }
.reflect-panel[hidden] { display: none; }
.reflect-intro { margin: 0 0 12px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.reflect-log { display: flex; flex-direction: column; gap: 10px; max-height: 340px; overflow-y: auto; padding: 2px; }
.reflect-log:empty { display: none; }
.reflect-msg {
  max-width: 86%;
  padding: 10px 14px;
  border-radius: 15px;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.reflect-msg.user { align-self: flex-end; background: var(--series-1); color: #fff; border-bottom-right-radius: 5px; }
.reflect-msg.assistant { align-self: flex-start; background: var(--surface-2); color: var(--text-primary); border-bottom-left-radius: 5px; }
.reflect-msg.pending { display: inline-flex; gap: 5px; align-items: center; padding: 13px 14px; }
.reflect-msg.pending span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: reflectdot 1s infinite; }
.reflect-msg.pending span:nth-child(2) { animation-delay: 0.15s; }
.reflect-msg.pending span:nth-child(3) { animation-delay: 0.3s; }
@keyframes reflectdot { 0%, 100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.reflect-input { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 12px; align-items: end; }
.reflect-input textarea {
  resize: vertical;
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface-1);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
}
.reflect-input textarea:focus { outline: none; border-color: var(--series-1); box-shadow: 0 0 0 3px rgba(91,118,216,0.12); }
.reflect-input button { margin: 0; align-self: stretch; }
.reflect-actions { display: flex; gap: 12px; margin-top: 12px; align-items: center; }
.reflect-actions .ghost { margin: 0; padding: 8px 4px; background: transparent; border: none; color: var(--muted); font-size: 12px; cursor: pointer; }
.reflect-actions .ghost:hover { color: var(--text-secondary); }

/* ---- reflection saving + past reflections ---- */
.reflect-saved { margin-right: auto; font-size: 12px; color: var(--good); font-weight: 500; }
.past-reflections { margin-top: 18px; }
.past-reflections:empty { display: none; }
.past-head { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--series-2); margin: 0 0 10px; }
.past-item { border-top: 1px solid var(--grid); }
.past-item:last-child { border-bottom: 1px solid var(--grid); }
.past-toggle {
  width: 100%;
  margin: 0;
  padding: 12px 2px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--text-primary);
  font-weight: 400;
}
.past-toggle:hover { opacity: 0.75; }
.past-date { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }
.past-emotion { font-size: 12px; font-weight: 600; color: var(--series-1); flex: none; }
.past-snippet { font-size: 13px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.past-body { padding: 4px 2px 16px; }
.past-body .reflect-log { max-height: none; margin-bottom: 12px; }
.past-delete { margin: 0; padding: 6px 4px; background: transparent; border: none; color: var(--muted); font-size: 12px; cursor: pointer; }
.past-delete:hover { color: var(--series-6); }

/* ---- daily to-do list (linked to the month theme) ---- */
.todo-theme { margin: 4px 0 14px; }
.todo-theme:empty { display: none; }
.todo-theme-head { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.todo-theme-name { color: var(--series-5); font-weight: 600; }
.todo-focus-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.focus-chip {
  margin: 0;
  padding: 6px 12px;
  border: 1px dashed var(--border-strong);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--series-1);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
}
.focus-chip:hover { border-style: solid; border-color: var(--series-1); background: var(--paper-blue); }
.todo-list { list-style: none; margin: 0 0 4px; padding: 0; }
.todo-empty { color: var(--muted); font-size: 14px; padding: 10px 2px; }
.todo-item { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--grid); }
.todo-item:last-child { border-bottom: none; }
.todo-check {
  flex: none; width: 22px; height: 22px; margin: 0;
  display: grid; place-items: center;
  border: 1.5px solid var(--border-strong); border-radius: 7px;
  background: transparent; color: #fff; font-size: 13px; cursor: pointer;
}
.todo-item.done .todo-check { background: var(--series-1); border-color: var(--series-1); }
.todo-text { flex: 1; font-size: 15px; }
.todo-item.done .todo-text { text-decoration: line-through; color: var(--muted); }
.todo-linked { flex: none; color: var(--series-5); font-size: 12px; }
.todo-cat-tag { flex: none; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--text-secondary); font-size: 11px; }
.todo-del {
  flex: none; width: 26px; height: 26px; margin: 0; padding: 0;
  border: none; border-radius: 7px; background: transparent;
  color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity 0.15s ease;
}
.todo-item:hover .todo-del, .todo-del:focus-visible { opacity: 1; }
.todo-del:hover { background: #fbf0f3; color: var(--series-6); }
.todo-add { display: grid; grid-template-columns: 1fr 110px auto; gap: 8px; margin-top: 14px; }
.todo-add input {
  padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: 10px;
  background: var(--surface-1); font-family: inherit; font-size: 14px; color: var(--text-primary);
}
.todo-add input:focus { outline: none; border-color: var(--series-1); box-shadow: 0 0 0 3px rgba(91,118,216,0.12); }
.todo-add button { margin: 0; }
.todo-link-toggle { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12.5px; color: var(--text-secondary); cursor: pointer; }
.todo-link-toggle input { width: 16px; height: 16px; accent-color: var(--series-5); }

@media (max-width: 520px) {
  .todo-add { grid-template-columns: 1fr auto; }
  .todo-add .todo-add-cat { grid-column: 1 / -1; }
  .todo-del { opacity: 1; }
}

/* ---- mood picker (energy x pleasantness): glowing orbs ---- */
.mood-picker { margin-bottom: 6px; }
.mood-prompt { display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--text-secondary); margin: 2px 0 16px; }
.mood-prompt::before { content: "\2726"; color: var(--series-5); font-size: 12px; }
.mood-quadrants { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 340px; }
.mood-quadrants[hidden] { display: none; }
.mood-q {
  position: relative;
  margin: 0;
  min-height: 72px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 12px 10px;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  color: color-mix(in srgb, var(--q) 72%, #1a1205);
  background: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--q) 20%, #fff) 0%, var(--q) 60%, color-mix(in srgb, var(--q) 80%, #000) 135%);
  box-shadow: 0 14px 34px -12px color-mix(in srgb, var(--q) 60%, transparent), inset 0 2px 6px rgba(255,255,255,0.35);
  overflow: hidden;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.mood-q::after {
  content: ""; position: absolute; top: 9%; left: 14%; width: 46%; height: 34%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.55), rgba(255,255,255,0) 70%);
  pointer-events: none;
}
.mood-q:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 22px 44px -12px color-mix(in srgb, var(--q) 72%, transparent), inset 0 2px 6px rgba(255,255,255,0.4); }
.mood-q:active { transform: translateY(-1px) scale(0.99); }
.mood-q-energy { position: relative; z-index: 1; font-size: 13.5px; font-weight: 700; }
.mood-q-sub { position: relative; z-index: 1; font-size: 11.5px; font-weight: 500; opacity: 0.82; }

.mood-feelings[hidden] { display: none; }
.mood-feelings { animation: moodIn 0.22s ease; }
@keyframes moodIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.mood-back {
  margin: 0 0 14px; padding: 5px 13px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; color: var(--series-1); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.mood-feeling-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.mood-feeling {
  margin: 0;
  padding: 10px 17px;
  border: none;
  border-radius: 999px;
  color: color-mix(in srgb, var(--q) 74%, #1a1205);
  background: radial-gradient(circle at 36% 30%, color-mix(in srgb, var(--q) 24%, #fff), color-mix(in srgb, var(--q) 72%, #fff));
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--q) 65%, transparent);
  font-size: 14px; font-weight: 500;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.mood-feeling:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 13px 26px -10px color-mix(in srgb, var(--q) 78%, transparent); }
.mood-feeling.selected {
  color: #fff;
  background: radial-gradient(circle at 36% 30%, color-mix(in srgb, var(--q) 60%, #fff), var(--q));
  box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--q) 85%, transparent), 0 0 0 3px color-mix(in srgb, var(--q) 28%, transparent);
}
.mood-own-toggle { margin: 16px 0 0; padding: 4px 2px; background: transparent; border: none; color: var(--muted); font-size: 12px; cursor: pointer; }
.mood-own-toggle:hover { color: var(--text-secondary); }
.mood-own-input { margin-top: 10px; }
.mood-own-input[hidden] { display: none; }

/* ============================================================
   Quick-log bar — always within reach at the top of the page
   ============================================================ */
.quicklog {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 0 0 26px;
  padding: 13px 17px;
  border: 1px solid #dfe4f4;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f6f8ff 100%);
  box-shadow: var(--shadow);
}
.quicklog .ql-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--series-1);
}
.ql-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ql-pill {
  margin: 0;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
}
.ql-pill:hover { background: var(--surface-2); opacity: 1; }
.ql-pill.on { background: var(--series-1); color: #fff; border-color: var(--series-1); }
.ql-flash { flex-basis: 100%; min-height: 0; font-size: 12.5px; color: var(--good); }
.ql-flash:empty { display: none; }

.ql-drawer { flex-basis: 100%; }
.ql-drawer[hidden] { display: none; }
.ql-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
  margin-top: 4px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
}
.ql-form .ql-field { display: flex; flex-direction: column; gap: 0; }
.ql-form label { margin: 0 0 4px; }
.ql-form input { width: auto; min-width: 86px; }
.ql-form input.ql-wide { min-width: 220px; flex: 1; }
.ql-form button { margin: 0; }
.ql-form .ql-hint { flex-basis: 100%; margin: 0; font-size: 12px; color: var(--muted); }

/* ============================================================
   Topic sections — each input sits with its own results
   ============================================================ */
.topic-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}
.inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
}
.inline-form > div { display: flex; flex-direction: column; }
.inline-form label { margin: 0 0 4px; }
.inline-form input { width: auto; min-width: 120px; }
.inline-form button { margin: 0; }
.inline-form .status-msg { flex-basis: 100%; }

.topic-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 22px;
}
.topic-chart-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 34px;
  margin-bottom: 9px;
}
.topic-chart-title:first-child { margin-top: 0; }
.topic-chart-title .sub-inline,
.sub-inline { font-weight: 400; color: var(--muted); font-size: 12px; }
.opt { color: var(--muted); font-weight: 400; }

@media (max-width: 860px) {
  .topic-two { grid-template-columns: 1fr; }
  .topic-charts { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Milk section
   ============================================================ */
.milk-glance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 6px 0 22px;
}
.milk-stat {
  padding: 15px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
}
.milk-stat .ms-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--series-1);
  margin-bottom: 7px;
}
.milk-stat .ms-value {
  font-size: 23px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.milk-stat .ms-value small { font-size: 12px; color: var(--muted); font-weight: 500; }
.milk-stat .ms-sub { margin-top: 5px; font-size: 11.5px; color: var(--text-secondary); }
.milk-stat.up .ms-value { color: var(--good); }
.milk-stat.down .ms-value { color: var(--series-6); }

.milk-form { margin-top: 4px; }
.milk-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px 14px;
}
.milk-form-grid label { margin: 0 0 5px; }
.milk-form-grid input { width: 100%; }
.milk-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}
.milk-form-actions button { margin: 0; }
.milk-form-actions .status-msg { margin: 0; }

.milk-factors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 24px 0 10px;
}
.factor-card {
  padding: 15px 17px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--series-2);
  border-radius: 12px;
  background: var(--surface-1);
}
.factor-card .fc-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--series-2);
  font-weight: 700;
  margin-bottom: 9px;
}
.factor-card .fc-insight { font-size: 13.5px; color: var(--text-primary); line-height: 1.5; }
.factor-card .fc-rows { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.factor-card .fc-row {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 12.5px; color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.factor-card .fc-row b { color: var(--text-primary); font-weight: 600; }
.factor-card .fc-quiet { font-size: 12.5px; color: var(--muted); line-height: 1.5; }

.milk-log-wrap { margin-top: 22px; }
.milk-log-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--grid);
  font-size: 13px;
}
.milk-log-row .mlr-when { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 116px; }
.milk-log-row .mlr-kind {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-secondary);
}
.milk-log-row .mlr-kind.latch { background: #efe7f8; color: var(--series-2); }
.milk-log-row .mlr-main { flex: 1; color: var(--text-primary); }
.milk-log-row .mlr-main b { font-variant-numeric: tabular-nums; }
.milk-log-row .mlr-del {
  margin: 0; padding: 3px 8px; font-size: 15px; line-height: 1;
  background: transparent; color: var(--muted); border: none;
}
.milk-log-row .mlr-del:hover { color: var(--series-6); opacity: 1; }

.ql-highlight { box-shadow: 0 0 0 3px rgba(91, 118, 216, 0.35), var(--shadow); transition: box-shadow 0.3s ease; }

/* ============================================================
   Round 3 — day-ordered daily log, robust milk form, chips
   ============================================================ */

/* Grid/flex children must be allowed to shrink, or wide inputs
   (number spinners, datetime-local on iOS) overflow and overlap. */
.milk-lr > div, .milk-glance > div, .milk-factors > div,
.inline-form > div, .milk-time-row > div, .topic-charts > div { min-width: 0; }
.milk-lr input, .milk-glance input, .inline-form input, .milk-time-row input { max-width: 100%; }

/* The daily log stacks, and anything already done today sinks via `order`. */
.daily-zone { display: flex; flex-direction: column; }
.log-block { display: block; }
.log-block .done-badge {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px;
  background: #e9f4ee; color: var(--good);
  font-size: 12px; font-weight: 600;
}
.log-block.is-done > .section-label { color: var(--muted); }
.log-block.is-done .card { box-shadow: 0 8px 26px -26px rgba(35,34,43,0.4); }

/* Emotion: destacked, compact; the "lately" strip is a slim reflection. */
.emotion-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.emotion-detail > div { min-width: 0; }
.emotion-detail label { margin-top: 12px; }
@media (max-width: 520px) { .emotion-detail { grid-template-columns: 1fr; } }

.lately { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--grid); }
.lately-head { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-secondary); margin-bottom: 10px; }
.lately .emo-strip { margin-bottom: 12px; }
.lately-more { margin-top: 8px; }
.lately-more summary { cursor: pointer; font-size: 12.5px; color: var(--series-1); font-weight: 600; }
.lately-more[open] summary { margin-bottom: 10px; }

/* Milk — pick a source, left and right literally left and right. */
.milk-types { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.milk-type {
  margin: 0; padding: 9px 15px;
  border-radius: 999px; border: 1px solid var(--border-strong);
  background: var(--surface-1); color: var(--text-primary);
  font-size: 13px; font-weight: 500;
}
.milk-type:hover { background: var(--surface-2); opacity: 1; }
.milk-type.is-on { background: var(--series-2); border-color: var(--series-2); color: #fff; }
.milk-type[data-kind="latch"].is-on { background: var(--series-1); border-color: var(--series-1); }

.milk-lr { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.milk-lr label { margin: 0 0 5px; }
.milk-lr input { width: 100%; text-align: center; font-size: 17px; }
.milk-side-left label::before { content: "◀ "; color: var(--muted); }
.milk-side-right label::after { content: " ▶"; color: var(--muted); }
.milk-side-right { text-align: right; }
.milk-side-right label { display: block; }

.milk-time-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 14px; margin-top: 16px; }
.milk-time-field { flex: 1 1 100%; min-width: 0; }
.milk-time-field label { margin: 0 0 5px; }
.milk-time-row button { margin: 0; }
.milk-time-row .status-msg { flex-basis: 100%; margin: 0; }
.milk-form.is-latch .milk-lr { opacity: 0.5; }

/* Milk readouts and factors on a firm grid that never overlaps. */
.milk-glance { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) { .milk-glance { grid-template-columns: repeat(2, 1fr); } }
.milk-factors { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .milk-factors { grid-template-columns: 1fr; } }

/* To-do life-area chips (real categories, one tap). */
.todo-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.todo-cat-chip {
  margin: 0; padding: 7px 13px;
  border-radius: 999px; border: 1px solid var(--border-strong);
  background: var(--surface-1); color: var(--text-secondary);
  font-size: 12.5px; font-weight: 500;
}
.todo-cat-chip:hover { background: var(--surface-2); opacity: 1; }
.todo-cat-chip.is-on { background: var(--series-4); border-color: var(--series-4); color: #fff; }
.todo-add { margin-top: 4px; }

/* Years ahead — when only the future years show, keep them an even row. */
.horizon { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* ============================================================
   Tasks — capture, the capped choice, and the Starry-Night sky
   ============================================================ */
.tasks { margin: 0 0 10px; }

/* The sky is the reward and the visual centre. */
.sky-card {
  position: relative;
  width: 100%;
  height: clamp(240px, 34vw, 360px);
  margin-bottom: 18px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 24px 60px -30px rgba(24, 30, 74, 0.65);
  border: 1px solid #2a2f66;
}
.sky-card .starry { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sky-overlay { position: absolute; left: 22px; bottom: 18px; right: 22px; z-index: 2; pointer-events: none; }
.sky-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: #ffe9a8; text-shadow: 0 2px 12px rgba(0,0,0,0.6); margin-bottom: 5px;
}
.sky-sub { font-size: 13px; color: rgba(245,247,255,0.86); text-shadow: 0 2px 10px rgba(0,0,0,0.7); max-width: 46ch; }

.tasks-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 820px) { .tasks-grid { grid-template-columns: 1fr; } }

/* Chips shared by capture + the now selectors. */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.chip-row.small { gap: 7px; margin: 8px 0; }
.chip {
  margin: 0; padding: 8px 15px;
  border-radius: 999px; border: 1px solid var(--border-strong);
  background: var(--surface-1); color: var(--text-primary);
  font-size: 13px; font-weight: 500;
}
.chip:hover { background: var(--surface-2); opacity: 1; }
.chip.is-on { background: var(--series-1); border-color: var(--series-1); color: #fff; }
.chip-row.small .chip { padding: 6px 12px; font-size: 12.5px; }

.capture form { margin-top: 4px; }
.capture #capture-text { font-size: 16px; padding: 12px 14px; }
.capture button[type="submit"] { margin-top: 6px; }

.nowview-head, .card-head { position: relative; }
.review-open {
  margin: 0 0 0 auto; padding: 6px 13px;
  border-radius: 999px; border: 1px solid var(--border-strong);
  background: var(--surface-1); color: var(--series-2);
  font-size: 12px; font-weight: 600;
}
.review-open:hover { background: var(--surface-2); opacity: 1; }
.nowview-selectors { margin-bottom: 8px; }

.now-list { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.now-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface-2);
  min-width: 0;
}
.now-item.pinned { border-color: #e6d3a6; background: linear-gradient(180deg, #fffdf6, var(--surface-2)); }
.now-check {
  position: relative;
  flex: none; margin: 0; width: 26px; height: 26px; padding: 0;
  border-radius: 50%; border: 2px solid var(--border-strong);
  background: var(--surface-1); color: var(--border-strong); font-size: 14px; line-height: 1;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.12s;
  -webkit-tap-highlight-color: transparent;
}
/* The circle stays 26px because that is the right size on the page, but the area
   that actually accepts a finger is 44px. Missing it was why completing a task
   took several taps. */
.now-check::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
  border-radius: 50%;
}
.now-check:hover { border-color: var(--good); color: var(--good); opacity: 1; }
.now-check:active { transform: scale(0.88); }
/* Filled the instant she taps, before the server has answered, so the tap is
   never in doubt. */
.now-check.is-doing {
  background: var(--good); border-color: var(--good); color: #fff;
  animation: strikePop 0.4s cubic-bezier(.3,1.4,.5,1) both;
}
.now-item.is-doing .now-text { text-decoration: line-through; opacity: 0.55; }
.now-body { flex: 1; min-width: 0; }
.now-text { font-size: 14.5px; color: var(--text-primary); line-height: 1.4; }
.now-meta { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 11.5px; color: var(--muted); }
.now-meta .tag { display: inline-flex; align-items: center; gap: 4px; }
.now-meta .due { color: var(--series-6); font-weight: 600; }
.now-meta .due.soon { color: #c0392b; }
.now-pin {
  flex: none; margin: 0; padding: 10px;
  background: transparent; border: none; color: #cbb26a; font-size: 16px; line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.now-pin:active { transform: scale(0.88); }
.now-pin.off { color: var(--border-strong); }
.now-elsewhere {
  margin-top: 12px; padding: 10px 13px;
  border-left: 3px solid var(--series-3); border-radius: 8px;
  background: #fbf6ec; color: var(--text-secondary); font-size: 12.5px;
}
.now-elsewhere[hidden] { display: none; }
/* The head she's in: a quieter, cooler note than the amber deadline one. */
.now-heldback { border-left-color: var(--series-1); background: #f3f5fd; }
.now-brain-hint { margin: 2px 2px 0; font-size: 11px; color: var(--muted); line-height: 1.5; }
.now-brain-hint:empty { display: none; }
.now-meta .brain { font-weight: 600; }
.now-meta .brain-full { color: var(--series-1); }
.now-meta .brain-half { color: var(--series-3); }
.now-meta .brain-none { color: var(--muted); }

/* Star burst when a task is completed. */
@keyframes starPop { 0% { transform: scale(0) rotate(-30deg); opacity: 0; } 60% { transform: scale(1.25) rotate(6deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
.star-pop { animation: starPop 0.7s cubic-bezier(.3,1.3,.5,1) both; transform-origin: center; }

/* Weekly review modal. */
.review-panel { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: rgba(24, 26, 52, 0.5); backdrop-filter: blur(3px); }
.review-panel[hidden] { display: none; }
.review-inner { width: min(560px, 100%); max-height: 84vh; overflow-y: auto; padding: 24px 26px; border-radius: var(--radius); background: var(--surface-1); box-shadow: var(--shadow); }
.review-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.review-close { margin: 0; padding: 2px 8px; background: transparent; border: none; color: var(--muted); font-size: 24px; line-height: 1; }
.review-count { margin: 12px 0 8px; font-size: 12.5px; font-weight: 600; color: var(--series-2); }
.review-list { display: flex; flex-direction: column; gap: 8px; }
.review-item { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 12px; }
.review-item.pinned { border-color: #e6d3a6; background: #fffdf6; }
.review-item .ri-text { flex: 1; min-width: 0; font-size: 14px; }
.review-item .ri-meta { font-size: 11px; color: var(--muted); margin-top: 3px; }
.review-pin { margin: 0; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface-1); color: var(--text-secondary); font-size: 12.5px; font-weight: 600; }
.review-pin.on { background: #cbb26a; border-color: #cbb26a; color: #fff; }

/* Massage package. */
.massage-glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 6px 0 20px; }
.massage-glance > div { min-width: 0; }
.massage-stat { padding: 15px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); }
.massage-stat .ms-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--series-2); margin-bottom: 7px; }
.massage-stat .ms-value { font-size: 23px; font-weight: 400; font-variant-numeric: tabular-nums; }
.massage-stat .ms-value small { font-size: 12px; color: var(--muted); }
.massage-stat .ms-sub { margin-top: 5px; font-size: 11.5px; color: var(--text-secondary); }
.massage-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.massage-field { min-width: 0; }
.massage-field label { margin: 0 0 5px; }
.massage-form button { margin: 0; }
.massage-form .status-msg { flex-basis: 100%; margin: 0; }
.massage-log { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.massage-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 13px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-1); font-size: 12.5px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.massage-pill button { margin: 0; padding: 0 4px; background: transparent; border: none; color: var(--muted); font-size: 15px; line-height: 1; }
.massage-pill button:hover { color: var(--series-6); opacity: 1; }

/* ============================================================
   Round 5 — visual quick-log, editable categories, chunking,
   grouped vision, and the overlap fixes
   ============================================================ */

/* Buttons that live inside grids/rows must not inherit the global top margin. */
.wish-check, .wish-cost, .wish-remove { margin-top: 0; }

/* Visual quick-log: icon over label, easy to scan at a glance. */
.ql-pills { gap: 9px; }
.ql-pill {
  display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 15px; min-width: 66px; line-height: 1.1;
}
.ql-pill .ql-ic { font-size: 20px; }
.ql-pill .ql-lb { font-size: 11.5px; font-weight: 600; }

/* Grouped vision block. */
.vision { margin-bottom: 10px; }
.vision .theme-month { margin-bottom: 16px; }
.years-head { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--series-1); margin: 4px 2px 12px; }

/* Capture: category chips + spark + footer. */
/* A group label needs real air above it, or it reads as belonging to the row
   before rather than heading the one after. */
.cap-label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 24px 0 8px; }
.cap-label:first-child, form > .cap-label:first-of-type { margin-top: 14px; }
.chip-row.cats { gap: 8px; }
.cat-chip {
  display: inline-flex; align-items: center; gap: 7px; margin: 0;
  padding: 7px 13px 7px 10px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface-1);
  color: var(--text-primary); font-size: 13px; font-weight: 500;
}
.cat-chip .cc-dot { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; flex: none; }
.cat-chip.is-on { color: #fff; border-color: transparent; }
.cat-chip.is-on .cc-dot { background: rgba(255,255,255,0.28) !important; }
.cat-add { border-style: dashed; color: var(--muted); }
.cap-foot { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.cap-foot button[type="submit"] { margin: 0; }
.spark-toggle { margin: 0; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface-1); color: var(--text-secondary); font-size: 13px; font-weight: 500; }
.spark-toggle[aria-pressed="true"] { background: #fbeecb; border-color: #e6cf8a; color: #8a6d1f; }
/* Inline "new category" mini-form. */
.cat-new { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding: 12px; border: 1px dashed var(--border-strong); border-radius: 12px; background: var(--surface-2); }
.cat-new[hidden] { display: none; }
.cat-new input[type="text"] { width: auto; flex: 1 1 130px; min-width: 0; }
.cat-new .cat-emoji { width: 58px; text-align: center; }
.cat-new .cat-swatches { display: flex; gap: 6px; }
.cat-new .sw { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.cat-new .sw.on { border-color: var(--text-primary); }
.cat-new button { margin: 0; }

/* Task now-item: category dot, spark, chunk progress. */
.now-cat { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; margin-top: 1px; }
.now-spark { color: #d9a72a; }
.now-progress { margin-top: 8px; }
.now-bar { height: 6px; border-radius: 999px; background: var(--grid); overflow: hidden; }
.now-bar > span { display: block; height: 100%; background: var(--series-4); border-radius: 999px; transition: width 0.3s ease; }
.now-progress-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.now-chunk { margin: 0; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface-1); color: var(--series-4); font-size: 12px; font-weight: 600; }
.now-chunk:hover { background: var(--surface-2); opacity: 1; }
.now-progress-label { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Weekly category breakdown. */
.week-breakdown { margin-top: 18px; padding: 20px 24px; }
.week-breakdown[hidden] { display: none; }
.wb-head { font-size: 13px; font-weight: 600; margin-bottom: 14px; }
.wb-body { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.wb-donut { width: 120px; height: 120px; flex: none; }
.wb-legend { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 180px; }
.wb-legend .wb-row { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-secondary); }
.wb-legend .wb-sw { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.wb-legend .wb-name { flex: 1; color: var(--text-primary); }
.wb-legend .wb-val { font-variant-numeric: tabular-nums; color: var(--muted); }

/* Massage: stacked fields (no overlap), scheduled/upcoming list. */
.massage-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; margin-bottom: 12px; max-width: 420px; }
.massage-fields > div { min-width: 0; }
.massage-fields label { margin: 0 0 5px; }
.massage-form { display: block; }
.massage-form button[type="submit"] { margin: 0; }
.massage-hint { margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.massage-upcoming { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.massage-upcoming .mu-label { flex-basis: 100%; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--series-2); font-weight: 600; margin-bottom: 2px; }
.massage-up-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 13px; border: 1px solid #cbd8f0; border-radius: 999px; background: #f2f6ff; font-size: 12.5px; color: var(--series-1); font-variant-numeric: tabular-nums; }
.massage-up-pill button { margin: 0; padding: 0 4px; background: transparent; border: none; color: var(--series-1); font-size: 15px; line-height: 1; opacity: 0.7; }
.massage-up-pill button:hover { opacity: 1; }
@media (max-width: 520px) { .massage-fields { grid-template-columns: 1fr; } }

/* ============================================================
   Round 6 — nav bar, food & calories, "see everything" lists,
   and the remaining overlap fixes
   ============================================================ */

/* Inputs must be allowed to shrink, or native date/time widgets overflow cards. */
input, select, textarea { min-width: 0; max-width: 100%; }

/* ------------------------------------------------------------------
   Spill guards. A single long unbroken string she pastes into a task,
   a wishlist item or a note used to blow out the whole page: the text
   pushed its card, the card pushed the grid, and the grid pushed the
   background. Breaking long words is the fix, and it changes nothing
   about how ordinary prose wraps.
   ------------------------------------------------------------------ */
body { overflow-wrap: break-word; }

/* ------------------------------------------------------------------
   Native date and time fields on iOS Safari. These are the ones that
   kept escaping their card: Safari gives them an intrinsic width from
   the rendered value plus its own control chrome, and it will not let
   that shrink from width:100% alone. The inner value element has to be
   told to shrink too, which is what the ::-webkit-date-and-time-value
   rule does. Chromium never showed this, so it is fixed against
   Safari's documented behaviour rather than a reproduction.
   ------------------------------------------------------------------ */
input[type="date"],
input[type="datetime-local"],
input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  -webkit-min-logical-width: 0;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value {
  text-align: left;
  min-width: 0;
  width: 100%;
  margin: 0;
}
/* Safari lays the inner fields out as a flex row that can refuse to shrink. */
input[type="date"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit {
  min-width: 0;
  overflow: hidden;
  padding: 0;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  flex: none;
  margin-left: 4px;
}
/* And their containers must be allowed to shrink, or the field never can. */
.pf-time, .pump-form-grid > div,
.food-fields, .food-fields > div, .food-desc-field,
.massage-fields, .massage-fields > div, .massage-field { min-width: 0; }
.now-text, .agh-name, .cat-chip, .wish-name, .food-desc, .pump-hist-table td,
.reading-row, .now-meta, .all-group-head, .ml-note, .task-text, .note-text {
  overflow-wrap: anywhere;
}
/* Flex and grid children need this or they refuse to shrink below their content. */
.now-item, .now-body, .now-list, .all-group, .all-parent, .tasks-grid > *,
.card-head, .card-head h2 { min-width: 0; }

/* Wishlist: keep buttons out of the text (belt-and-braces on the margin bug). */
.wish-check, .wish-cost, .wish-remove { margin: 0; }
.wish-name { min-width: 0; }

/* Focus block: editable, renamed away from "flywheel". */
.focus-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.focus-head .focus-label { margin-bottom: 0; }
.focus-edit { margin: 0; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface-1); color: var(--series-2); font-size: 12px; font-weight: 600; }
.focus-edit:hover { background: var(--surface-2); opacity: 1; }

/* Body: every reading, as a simple list. */
.readings-wrap { margin-top: 22px; }
.readings { display: flex; flex-direction: column; }
/* Fixed value columns so weight and waist line up down the page even when one of
   them is missing and only a dash sits in the gap. */
.reading-row { display: grid; grid-template-columns: minmax(0,1fr) 84px 84px; align-items: baseline; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--grid); font-size: 13.5px; }
.reading-row:last-child { border-bottom: none; }
.reading-row .rr-date { color: var(--muted); font-variant-numeric: tabular-nums; }
.reading-row .rr-v { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.reading-row .rr-v b { font-weight: 600; }
.reading-row .rr-v small { color: var(--muted); margin-left: 3px; }
.reading-row .rr-none { color: var(--border-strong); }
.reading-head {
  position: sticky; top: 0; z-index: 1; background: var(--surface-1);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--muted); border-bottom: 1px solid var(--border-strong);
}
.reading-head .rr-v { color: var(--muted); }

/* A long list she can fold away or scroll, rather than one that runs off the page. */
.log-fold { margin-top: 26px; }
.log-fold > summary {
  cursor: pointer; list-style: none;
  font-size: 12px; font-weight: 600; color: var(--series-1);
  padding: 6px 0;
}
.log-fold > summary::-webkit-details-marker { display: none; }
.log-fold > summary::before { content: "▾"; display: inline-block; margin-right: 7px; }
.log-fold:not([open]) > summary::before { content: "▸"; }
.log-fold .lf-count {
  margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: var(--surface-2); color: var(--muted); font-weight: 500;
}
.log-scroll { max-height: 340px; overflow-y: auto; overflow-x: hidden; }
.reading-row .rr-del { margin: 0; padding: 2px 7px; background: transparent; border: none; color: var(--muted); font-size: 15px; line-height: 1; }
.reading-row .rr-del:hover { color: var(--series-6); opacity: 1; }

/* All captured tasks. */
.all-tasks { margin-top: 18px; }
.all-count { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--series-2); }
.all-list { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.all-list .now-item { background: var(--surface-1); }

/* Food & calories. */
.food-glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 6px 0 20px; }
.food-glance > div { min-width: 0; }
.food-stat { padding: 15px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); }
.food-stat .ms-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--series-2); margin-bottom: 7px; }
.food-stat .ms-value { font-size: 23px; font-weight: 400; font-variant-numeric: tabular-nums; }
.food-stat .ms-value small { font-size: 12px; color: var(--muted); }
.food-stat .ms-sub { margin-top: 5px; font-size: 11.5px; color: var(--text-secondary); }
.food-capture { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 14px; }
.food-photo-btn { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 14px 20px; border: 1.5px dashed var(--border-strong); border-radius: 14px; background: var(--surface-2); color: var(--series-1); font-size: 14px; font-weight: 600; cursor: pointer; }
.food-photo-btn:hover { background: var(--paper-blue); }
.food-preview { width: 88px; height: 88px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); flex: none; }
.food-preview[hidden] { display: none; }
.food-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.food-estimating { font-size: 13px; color: var(--series-2); font-style: italic; }
.food-estimating[hidden] { display: none; }
.food-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px 14px; }
.food-fields > div { min-width: 0; }
.food-fields label { margin: 0 0 5px; }
.food-desc-field { grid-column: span 2; }
@media (max-width: 560px) { .food-desc-field { grid-column: auto; } }
.food-foot { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.food-foot button { margin: 0; }
.food-foot .status-msg { margin: 0; }
.food-log-wrap { margin-top: 20px; }
.food-row { display: grid; grid-template-columns: auto 1fr auto 30px; align-items: center; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--grid); font-size: 13.5px; }
.food-row:last-child { border-bottom: none; }
.food-row .fr-date { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 86px; }
.food-row .fr-desc { min-width: 0; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.food-row .fr-cal { font-variant-numeric: tabular-nums; font-weight: 600; }
.food-row .fr-cal small { color: var(--muted); font-weight: 400; }
.food-row .fr-del { margin: 0; padding: 2px 7px; background: transparent; border: none; color: var(--muted); font-size: 15px; }
.food-row .fr-del:hover { color: var(--series-6); opacity: 1; }
/* On a phone the meal name was being cut off mid-word by the ellipsis, so the row
   folds instead: date and calories on one line, the full description beneath. */
@media (max-width: 520px) {
  .food-row { grid-template-columns: auto 1fr 30px; row-gap: 3px; }
  .food-row .fr-date { grid-row: 1; grid-column: 1; }
  .food-row .fr-cal { grid-row: 1; grid-column: 2; text-align: right; }
  .food-row .fr-del { grid-row: 1; grid-column: 3; }
  .food-row .fr-desc {
    grid-row: 2; grid-column: 1 / -1;
    white-space: normal; overflow: visible; text-overflow: clip;
    overflow-wrap: anywhere; color: var(--text-secondary); font-size: 12.5px;
  }
}

/* ============================================================
   Round 7 — category manage, anticipation, read markers,
   back-to-top, and the real wishlist circle fix
   ============================================================ */

/* The actual cause of the wishlist overlap: fixed-size icon buttons were
   inheriting the global button padding (10px 18px), forcing them wider than
   their grid column and into the text. Reset padding on them. */
.wish-check, .wish-remove { padding: 0; }
.now-check, .mlr-del, .rr-del, .fr-del, .review-close, .cat-chip .cc-x { padding: 0; }
.now-chunk { padding: 4px 11px; }
.cat-add { padding: 7px 13px; }

/* Category label row with an Edit (manage) toggle. */
.cap-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 24px 0 8px; }
.cap-label-row .cap-label { margin: 0; }
.cap-manage { margin: 0; padding: 3px 11px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface-1); color: var(--series-2); font-size: 11.5px; font-weight: 600; }
.cap-manage.on { background: var(--series-2); border-color: var(--series-2); color: #fff; }
.cat-chip .cc-x { margin-left: 4px; color: var(--series-6); font-weight: 700; font-size: 14px; }
.cat-chip.is-on .cc-x { color: #fff; }

/* Anticipation chips (how she feels about a task). */
.chip[data-antic="exciting"].is-on { background: #e8a13a; border-color: #e8a13a; color: #fff; }
.chip[data-antic="neutral"].is-on { background: #8a8f98; border-color: #8a8f98; color: #fff; }
.chip[data-antic="dreadful"].is-on { background: #bf7388; border-color: #bf7388; color: #fff; }
.now-meta .antic { font-weight: 600; }
.now-meta .antic-exciting { color: #c07e12; }
.now-meta .antic-dreadful { color: var(--series-6); }
.now-meta .antic-neutral { color: var(--muted); }

/* Read markers on briefing + news articles. */
.read-toggle { margin: 0; padding: 5px 13px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface-1); color: var(--muted); font-size: 11.5px; font-weight: 600; }
/* Striking an article off should feel like finishing something, not like filing it. */
.read-toggle { display: inline-flex; align-items: center; gap: 8px; }
.read-toggle .rt-box {
  display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; border-radius: 50%;
  border: 2px solid var(--border-strong); background: var(--surface-1);
  color: transparent; font-size: 11px; font-weight: 700; line-height: 1;
}
.read-toggle.is-read { background: #e9f4ee; border-color: #cfe6da; color: var(--good); }
.read-toggle.is-read .rt-box { background: var(--good); border-color: var(--good); color: #fff; }
.read-toggle .rt-box.pop { animation: strikePop 0.42s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes strikePop {
  0% { transform: scale(0.5); } 55% { transform: scale(1.3); } 100% { transform: scale(1); }
}
/* Struck items rule through, fade back, and sink below the ones still to read. */
#news-list, #briefing-list { display: flex; flex-direction: column; }
.briefing-story, .news-item { order: 1; }
.briefing-story.is-read, .news-item.is-read { order: 2; opacity: 0.45; }
.briefing-story.is-read:hover, .news-item.is-read:hover { opacity: 0.8; }
.briefing-story.is-read h3, .news-item.is-read h3 { text-decoration: line-through; text-decoration-thickness: 1.5px; }

.read-progress { margin: 0 0 16px; }
.read-progress .rp-track {
  height: 6px; border-radius: 999px; background: var(--surface-2);
  overflow: hidden; border: 1px solid var(--border);
}
.read-progress .rp-track span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--series-1), var(--good));
  transition: width 0.45s cubic-bezier(.3,1,.5,1);
}
.read-progress .rp-label { margin-top: 7px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.read-progress .rp-label.all-done { color: var(--good); font-weight: 600; }

/* Back to top. */
.to-top { position: fixed; right: 18px; bottom: 18px; z-index: 55; margin: 0; padding: 10px 16px; border-radius: 999px; border: 1px solid #dfe4f4; background: rgba(255,255,255,0.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--series-1); font-size: 13px; font-weight: 600; box-shadow: var(--shadow); cursor: pointer; }
.to-top[hidden] { display: none; }
.to-top:hover { background: #fff; opacity: 1; }

/* ============================================================
   Tabs — three rooms. The hero and the Jump-to bar sit above them and never move,
   so the way to anywhere else is always in the same place.
   ============================================================ */
.tabbar {
  display: flex; gap: 8px; margin: 0 0 26px; padding: 6px;
  border: 1px solid var(--border); border-radius: 16px;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.tab {
  flex: 1 1 0; min-width: 0; margin: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 14px; border: none; border-radius: 12px;
  background: transparent; color: var(--text-secondary);
  font-size: 13.5px; font-weight: 600; white-space: nowrap;
  transition: background 0.16s, color 0.16s;
}
.tab:hover { background: var(--surface-2); opacity: 1; }
.tab.is-on { background: var(--series-1); color: #fff; box-shadow: 0 2px 8px rgba(91,118,216,0.28); }
.tab.is-on:hover { background: var(--series-1); }
.tab .tab-ic { font-size: 14px; }
.tab .tab-lb-short { display: none; }
.tabpanel[hidden] { display: none; }
/* The first block inside a tab shouldn't carry the gap meant to separate blocks. */
.tabpanel > *:first-child { margin-top: 0; }

@media (max-width: 560px) {
  .tabbar { gap: 4px; padding: 5px; margin-bottom: 20px; }
  .tab { padding: 10px 6px; font-size: 12.5px; gap: 5px; }
  /* The full names do not fit three-across on a phone, so shorten rather than clip. */
  .tab .tab-lb { display: none; }
  .tab .tab-lb-short { display: inline; }
}

/* ============================================================
   Subfolders, grouped lists, and dedicating time to something today
   ============================================================ */
.cat-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-subrow {
  margin-top: 10px; padding: 10px 12px 12px;
  border-left: 2px solid var(--border-strong); border-radius: 0 12px 12px 0;
  background: var(--surface-2);
}
.cat-sublabel {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted); margin-bottom: 8px;
}
.cc-count {
  margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  background: rgba(0,0,0,0.07); font-size: 10.5px; font-variant-numeric: tabular-nums;
}
.cat-chip.is-on .cc-count { background: rgba(255,255,255,0.26); }
.cat-new-where {
  width: 100%; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted); margin-bottom: 2px;
}
.cap-opt { text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 400; }

.all-parent { margin-bottom: 22px; }
.all-parent:last-child { margin-bottom: 0; }
.all-group { margin-bottom: 14px; }
.all-group.is-sub { margin-left: 14px; }
.all-group-head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 7px 0 7px 11px; margin: 26px 0 10px;
  border-left: 3px solid var(--border-strong);
}
.all-parent > .all-group:first-child > .all-group-head,
.all-list > .all-group:first-child > .all-group-head { margin-top: 4px; }
.all-group-head .agh-name { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.all-group-head .agh-count { font-size: 11px; color: var(--muted); margin-left: auto; font-variant-numeric: tabular-nums; }
.all-group.is-sub .agh-name { font-size: 12.5px; font-weight: 500; color: var(--text-secondary); }

.now-booked {
  margin-bottom: 18px; padding: 14px 15px 15px;
  border: 1px solid #d8cfa8; border-radius: 14px;
  background: linear-gradient(180deg, #fffdf4, var(--surface-2));
}
.now-booked[hidden] { display: none; }
.now-booked .nb-head {
  font-size: 12px; font-weight: 700; color: #8a6d1f;
  text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 11px;
}
.now-item.booked { border-color: #e0d5a8; }
.now-book { margin-top: 9px; }
.now-book-open, .now-book-pick {
  margin: 0; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface-1);
  color: var(--text-secondary); font-size: 11.5px; font-weight: 600;
}
.now-book-picks { display: inline-flex; flex-wrap: wrap; gap: 6px; }
/* A CSS display rule beats the hidden attribute, so it has to be restated. */
.now-book-picks[hidden] { display: none; }
.now-book-open:hover, .now-book-pick:hover { background: var(--surface-2); opacity: 1; }
/* Priority, and the day a task is meant for. The weekly pin stays the gold star on
   the right; priority is a warm rose mark, so the two never read as the same thing. */
.now-plan { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 9px; }
.now-prio, .now-day-open, .now-day-pill, .now-day-pick, .now-day-clear {
  margin: 0; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface-1);
  color: var(--text-secondary); font-size: 11.5px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 5px;
}
.now-prio:hover, .now-day-open:hover, .now-day-pill:hover, .now-day-pick:hover { background: var(--surface-2); opacity: 1; }
.now-prio.is-on { background: #fdecef; border-color: #e8b9c4; color: #a8324c; }
.now-day-pick.is-on { background: var(--series-1); border-color: var(--series-1); color: #fff; }
.now-day-picks { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.now-day-picks[hidden] { display: none; }
.now-day-other {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--muted);
}
.now-day-other input { width: 130px; min-width: 0; padding: 3px 6px; font-size: 11.5px; }
.now-day-clear { color: var(--muted); }
/* A priority is edged in rose so it is findable at a glance in a full day. */
.now-item.is-priority { border-left: 3px solid #d98098; }

.now-ahead { margin-bottom: 18px; }
.now-ahead[hidden] { display: none; }
.now-ahead .na-head {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px;
}
.now-ahead .na-day { margin-bottom: 14px; }
.now-ahead .na-day-label {
  font-size: 12px; font-weight: 600; color: var(--series-1); margin-bottom: 7px;
  padding-left: 10px; border-left: 3px solid var(--border-strong);
}

/* the pill shown once a task already has time dedicated to it */
.now-booked-pill {
  display: inline-block; width: auto; margin: 9px 0 0; padding: 4px 11px;
  border-radius: 999px; border: 1px solid #d8cfa8; background: #fdf8e6;
  color: #8a6d1f; font-size: 11.5px; font-weight: 700;
}

/* ============================================================
   Word of the day — a quiet reading card, high up
   ============================================================ */
.wotd { margin-bottom: 22px; padding: 24px 26px 22px; }
.wotd-eyebrow {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--series-1); margin-bottom: 14px;
}
.wotd-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 14px; }
.wotd-word {
  margin: 0; font-size: clamp(28px, 5vw, 38px); font-weight: 400;
  letter-spacing: -0.015em; line-height: 1.1; color: var(--text-primary);
}
.wotd-say { font-size: 13px; color: var(--muted); font-style: italic; }
.wotd-pos { font-style: normal; color: var(--series-1); margin-left: 6px; }

.wotd-means { margin: 0 0 20px; padding-left: 20px; }
.wotd-means li { font-size: 15px; line-height: 1.62; color: var(--text-primary); margin-bottom: 6px; }
.wotd-means li::marker { color: var(--muted); font-size: 12px; }
.wotd-means li:only-child { list-style: none; margin-left: -20px; }

.wotd-section-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.13em;
  color: var(--muted); margin: 26px 0 9px;
}
.wotd-section-label:first-child { margin-top: 0; }
.wotd-roots { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.wotd-root {
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
  padding: 8px 13px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface-2);
}
.wotd-root em { font-size: 14.5px; font-style: normal; font-weight: 600; color: var(--series-1); }
.wotd-root .wr-lang { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.wotd-root .wr-sense { font-size: 12.5px; color: var(--text-secondary); line-height: 1.45; }

.wotd-origin { margin: 0 0 20px; font-size: 14px; line-height: 1.68; color: var(--text-secondary); }
.wotd-eg {
  margin: 0; padding: 13px 16px; border-left: 3px solid var(--series-1);
  border-radius: 0 10px 10px 0; background: var(--surface-2);
  font-size: 14.5px; line-height: 1.6; font-style: italic; color: var(--text-primary);
}

.wotd-past { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--grid); }
.wotd-past summary { cursor: pointer; font-size: 12.5px; color: var(--series-1); font-weight: 600; }
.wotd-past ul { margin: 12px 0 0; padding-left: 18px; }
.wotd-past li { font-size: 13px; line-height: 1.55; color: var(--text-secondary); margin-bottom: 9px; }
.wotd-past .wp-date { font-size: 11px; color: var(--muted); }
.wotd-past .wp-mean { color: var(--text-secondary); }

@media (max-width: 560px) {
  .wotd { padding: 20px 18px 18px; }
  .wotd-roots { flex-direction: column; }
  .wotd-root { width: 100%; }
}

/* ============================================================
   Pump log (PUMP_LOG_SPEC.md) — form, analysis, history, compare
   ============================================================ */
.pump-running { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 4px 0 20px; }
.pump-running > div { min-width: 0; }
.pump-run-card { padding: 15px 17px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); }
.pump-run-card .prc-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--series-1); margin-bottom: 7px; }
.pump-run-card .prc-value { font-size: 25px; font-weight: 400; font-variant-numeric: tabular-nums; }
.pump-run-card .prc-value small { font-size: 12px; color: var(--muted); }
.pump-run-card .prc-sub { margin-top: 5px; font-size: 11.5px; color: var(--text-secondary); }

.pump-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px 14px; }
.pump-form-grid > div { min-width: 0; }
.pump-form-grid .pf-time { grid-column: 1 / -1; }
.pump-form-grid label { margin: 0 0 5px; }
.pump-form #pump-note { margin-top: 14px; }
.pump-foot { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.pump-foot button { margin: 0; }
.pump-foot .status-msg { margin: 0; }

.pump-feedback { margin-top: 18px; padding: 16px 18px; border: 1px solid #cfe0d6; border-left: 3px solid var(--good); border-radius: 12px; background: #f4faf6; }
.pump-feedback[hidden] { display: none; }
.pump-feedback .pfb-head { font-size: 13px; font-weight: 700; color: var(--good); margin-bottom: 8px; }
.pump-feedback .pfb-line { font-size: 13.5px; color: var(--text-primary); margin: 3px 0; font-variant-numeric: tabular-nums; }
.pump-feedback .pfb-est { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #cfe0d6; }
.pump-feedback .pfb-caveats { margin: 8px 0 0; padding-left: 18px; font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.pump-feedback .pfb-caveats li { margin: 3px 0; }

.pump-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 16px; border-bottom: 1px solid var(--border); padding-bottom: 12px; }
.pump-tab { margin: 0; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface-1); color: var(--text-secondary); font-size: 12.5px; font-weight: 600; }
.pump-tab:hover { background: var(--surface-2); opacity: 1; }
.pump-tab.is-on { background: var(--series-1); border-color: var(--series-1); color: #fff; }
.pump-pane[hidden] { display: none; }

.pump-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.pump-table th, .pump-table td { text-align: right; padding: 9px 10px; border-bottom: 1px solid var(--grid); }
.pump-table th:first-child, .pump-table td:first-child { text-align: left; }
.pump-table th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600; }
.pump-table td.strong { font-weight: 600; }
.pump-table .muted { color: var(--muted); }
.pump-note-line { margin-top: 10px; font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
/* Plain-English line under a table, in place of the formula that used to sit there. */
.pump-plain { margin-top: 12px; font-size: 13px; line-height: 1.6; color: var(--text-secondary); }
.pump-more { margin-top: 18px; border-top: 1px solid var(--grid); padding-top: 14px; }
.pump-more > summary {
  cursor: pointer; list-style: none;
  font-size: 12.5px; font-weight: 600; color: var(--series-1);
}
.pump-more > summary::-webkit-details-marker { display: none; }
.pump-more > summary::before { content: "▾"; margin-right: 7px; display: inline-block; }
.pump-more:not([open]) > summary::before { content: "▸"; }
.pump-more-body { margin-top: 14px; overflow-x: auto; }
.pump-table .pt-n { font-size: 11px; }
.pump-fits { margin-top: 16px; }
.pump-fits .pf-title { font-size: 12px; font-weight: 600; margin-bottom: 8px; }

.pump-hist-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; align-items: center; }
.pump-hist-controls select, .pump-hist-controls input { width: auto; min-width: 0; padding: 6px 10px; font-size: 12.5px; }
.pump-hist-controls .hc-label { font-size: 11px; color: var(--muted); font-weight: 600; }
.pump-hist-wrap { overflow-x: auto; max-height: 460px; overflow-y: auto; border: 1px solid var(--border); border-radius: 12px; }
.pump-hist-table table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pump-hist-table th { position: sticky; top: 0; background: var(--surface-1); z-index: 1; text-align: right; padding: 9px 10px; border-bottom: 1px solid var(--border-strong); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); cursor: pointer; }
.pump-hist-table th:first-child, .pump-hist-table td:first-child { text-align: left; }
.pump-hist-table td { text-align: right; padding: 8px 10px; border-bottom: 1px solid var(--grid); }
.pump-hist-table tr.excluded td { color: var(--muted); font-style: italic; background: repeating-linear-gradient(135deg, transparent, transparent 6px, rgba(0,0,0,0.02) 6px, rgba(0,0,0,0.02) 12px); }
.pump-hist-table tr.flag-dl td, .pump-hist-table tr.flag-post_dl td, .pump-hist-table tr.flag-anchor_only td, .pump-hist-table tr.flag-no_anchor td { color: var(--muted); }
.pump-hist-table .fl { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 10px; background: var(--surface-2); color: var(--text-secondary); }
.pump-hist-table .fl-counted { background: #e9f4ee; color: var(--good); }

/* One action row per story, so "Show more" and "Strike it off" sit side by side with
   real space between them and clear air above, instead of stacked 6px apart. */
.story-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
  margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--grid);
}
.story-actions a { font-size: 13px; }
@media (max-width: 480px) {
  .story-actions { gap: 12px 16px; }
}

/* ============================================================
   What she's finished, and how far through each folder she is
   ============================================================ */
.fin-headline { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.fin-headline .fin-big {
  font-size: clamp(30px, 6vw, 40px); font-weight: 400; letter-spacing: -0.02em;
  color: var(--good); line-height: 1;
}
.fin-headline .fin-of { font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; }
.fin-headline .fin-sub { display: block; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

.fin-cats { display: flex; flex-direction: column; gap: 15px; }
.fin-cat { min-width: 0; }
.fin-cat.is-sub { padding-left: 14px; border-left: 2px solid var(--grid); }
.fin-cat .fc-top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.fin-cat .fc-name { font-size: 13px; font-weight: 600; color: var(--text-primary); min-width: 0; overflow-wrap: anywhere; }
.fin-cat .fc-num { margin-left: auto; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-cat .fc-num b { color: var(--text-primary); }
.fin-cat .fc-track {
  height: 7px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--border); overflow: hidden;
}
.fin-cat .fc-track span {
  display: block; height: 100%; border-radius: 999px;
  transition: width 0.5s cubic-bezier(.3,1,.5,1);
}
.fin-cat .fc-left { margin-top: 5px; font-size: 11px; color: var(--muted); }
.fin-cat .fc-left.fc-clear { color: var(--good); font-weight: 600; }

.fin-day { margin-bottom: 16px; }
.fin-day-label {
  font-size: 12px; font-weight: 600; color: var(--series-1);
  padding-left: 10px; border-left: 3px solid var(--border-strong); margin-bottom: 8px;
}
.fin-day-label .fd-date { color: var(--muted); font-weight: 400; margin-left: 6px; }
.fin-row {
  display: grid; grid-template-columns: 20px minmax(0,1fr) auto;
  gap: 10px; align-items: baseline;
  padding: 7px 2px; border-bottom: 1px solid var(--grid); font-size: 13.5px;
}
.fin-row:last-child { border-bottom: none; }
.fin-row .fin-tick { color: var(--good); font-weight: 700; }
.fin-row .fin-text { color: var(--text-secondary); text-decoration: line-through; overflow-wrap: anywhere; }
.fin-row .fin-meta { font-size: 11px; color: var(--muted); white-space: nowrap; }
@media (max-width: 520px) {
  .fin-row { grid-template-columns: 20px minmax(0,1fr); row-gap: 2px; }
  .fin-row .fin-meta { grid-column: 2; white-space: normal; }
}

/* ============================================================
   Apple Health — what the phone pushes over
   ============================================================ */
.h-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.h-tile {
  min-width: 0; padding: 14px 15px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2);
}
.h-tile .h-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--series-1); margin-bottom: 7px;
}
.h-tile .h-value {
  font-size: 25px; font-weight: 400; letter-spacing: -0.015em;
  color: var(--text-primary); line-height: 1.1; font-variant-numeric: tabular-nums;
}
.h-tile .h-value small { font-size: 12.5px; color: var(--muted); margin-left: 2px; }
.h-tile .h-sub { margin-top: 5px; font-size: 11px; color: var(--muted); }

.h-setup { font-size: 14px; line-height: 1.65; color: var(--text-secondary); }
.h-setup p { margin: 0 0 10px; }
.h-setup b { color: var(--text-primary); }
.h-setup .h-setup-note { color: var(--muted); font-size: 13px; margin: 0; }

.h-row {
  display: grid; grid-template-columns: minmax(0,1.4fr) repeat(5, minmax(0,1fr));
  gap: 8px; align-items: baseline; padding: 8px 2px;
  border-bottom: 1px solid var(--grid); font-size: 12.5px;
  font-variant-numeric: tabular-nums; text-align: right;
}
.h-row > :first-child { text-align: left; }
.h-row:last-child { border-bottom: none; }
.h-row .h-date { color: var(--muted); }
.h-row.h-head {
  position: sticky; top: 0; background: var(--surface-1); z-index: 1;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); border-bottom: 1px solid var(--border-strong);
}

/* ============================================================
   "Just say it" — typing the pump log the way she'd say it out loud
   ============================================================ */
.pump-say { margin: 4px 0 18px; }
.pump-say textarea {
  width: 100%; min-height: 84px; resize: vertical;
  font-size: 14.5px; line-height: 1.6;
}
.pump-say-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.pump-say-row button { margin: 0; }
.pump-say-hint { font-size: 11.5px; color: var(--muted); line-height: 1.5; min-width: 0; }
.pump-form-fold { margin-bottom: 18px; }
.pump-form-fold > summary {
  cursor: pointer; list-style: none; font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 6px 0;
}
.pump-form-fold > summary::-webkit-details-marker { display: none; }
.pump-form-fold > summary::before { content: "▸"; display: inline-block; margin-right: 7px; }
.pump-form-fold[open] > summary::before { content: "▾"; }

.pump-say-out {
  margin-top: 14px; padding: 15px 16px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2);
}
.pump-say-out[hidden] { display: none; }
.ps-working, .ps-problem { font-size: 13px; color: var(--muted); }
.ps-problem { color: var(--series-6); }
.ps-head {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--series-1); margin-bottom: 11px;
}
.ps-head.ps-saved { color: var(--good); }
.ps-rows { display: flex; flex-direction: column; }
.psr {
  display: grid; grid-template-columns: 86px 84px 34px 92px minmax(0, 1fr);
  gap: 8px; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid var(--grid);
  font-size: 12.5px; font-variant-numeric: tabular-nums;
}
.psr:last-child { border-bottom: none; }
.psr-when { color: var(--muted); }
.psr-vol { font-weight: 600; }
.psr-pump { color: var(--text-secondary); }
.psr-flag { font-weight: 600; font-size: 11px; }
.psr-why { font-size: 11px; color: var(--muted); line-height: 1.45; overflow-wrap: anywhere; }
.psr-counted .psr-flag { color: var(--good); }
.psr-post_dl .psr-flag { color: var(--series-3); }
.psr-dl .psr-flag, .psr-anchor_only .psr-flag { color: var(--muted); }
.psr-post_dl, .psr-dl, .psr-anchor_only { opacity: 0.82; }

.ps-note { margin-top: 10px; font-size: 11.5px; color: var(--muted); }
.ps-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.ps-actions button { margin: 0; }
.ps-read p { margin: 0 0 11px; font-size: 14px; line-height: 1.65; color: var(--text-secondary); }
.ps-read p:last-child { margin-bottom: 0; }
.ps-read b { color: var(--text-primary); font-weight: 600; }
.ps-flags { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.ps-flag {
  padding: 10px 13px; border-left: 3px solid var(--series-3); border-radius: 0 9px 9px 0;
  background: #fbf6ec; font-size: 12.5px; line-height: 1.55; color: var(--text-secondary);
}
@media (max-width: 560px) {
  .psr { grid-template-columns: 78px 1fr; row-gap: 2px; }
  .psr-pump, .psr-flag { grid-column: 2; display: inline; }
  .psr-why { grid-column: 1 / -1; }
}

/* ============================================================
   At a glance — her own shorthand, a day to a line
   ============================================================ */
.glance { display: flex; flex-direction: column; }
.gl-day { padding: 11px 0; border-bottom: 1px solid var(--grid); }
.gl-day:last-child { border-bottom: none; }
.gl-date {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px;
}
.gl-date .gl-dow { font-weight: 400; color: var(--muted); }
.gl-date .gl-tot { margin-left: auto; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.gl-line { font-size: 13px; line-height: 1.9; overflow-wrap: anywhere; }
.gl-s { padding: 2px 7px; border-radius: 7px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gl-counted { background: #e9f4ee; color: #2f6b4f; }
.gl-post { background: #fbf1e0; color: #8a6d1f; }
.gl-dl, .gl-other { background: var(--surface-2); color: var(--muted); }
.gl-sep { color: var(--border-strong); }
.gl-suspect { outline: 1px dashed #d3a24a; }
.gl-warn { color: #a8721f; font-size: 11px; }

/* ============================================================
   Journal — a line a day, and more underneath when she wants it
   ============================================================ */
#journal-write .jr-date {
  margin-left: auto; width: auto; max-width: 190px;
  font-size: 12.5px; padding: 6px 10px;
}
#jr-one {
  font-size: 16.5px; line-height: 1.5; padding: 14px 16px;
  border-radius: 14px;
}
.jr-count { margin-top: 6px; font-size: 11px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }

.jr-more { margin-top: 22px; border-top: 1px solid var(--grid); padding-top: 16px; }
.jr-more > summary {
  cursor: pointer; list-style: none;
  font-size: 12.5px; font-weight: 600; color: var(--series-1); padding: 4px 0;
}
.jr-more > summary::-webkit-details-marker { display: none; }
.jr-more > summary::before { content: "▸"; display: inline-block; margin-right: 7px; }
.jr-more[open] > summary::before { content: "▾"; }
.jr-more textarea {
  margin-top: 12px; width: 100%; min-height: 190px; resize: vertical;
  font-size: 15px; line-height: 1.75;
}
.jr-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 20px; }
.jr-foot button { margin: 0; }

#journal-list .jr-total { margin-left: auto; font-size: 11.5px; color: var(--muted); }
.jr-month { margin-bottom: 8px; }
.jr-month > summary {
  cursor: pointer; list-style: none;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted); padding: 10px 0 8px; border-bottom: 1px solid var(--grid);
}
.jr-month > summary::-webkit-details-marker { display: none; }
.jr-month > summary::before { content: "▸"; display: inline-block; margin-right: 8px; }
.jr-month[open] > summary::before { content: "▾"; }
.jr-month .jr-month-count {
  margin-left: 7px; padding: 1px 7px; border-radius: 999px;
  background: var(--surface-2); font-weight: 500; letter-spacing: 0;
}
.jr-rows { display: flex; flex-direction: column; }

.jr-row {
  display: grid; grid-template-columns: 78px minmax(0, 1fr) 20px;
  gap: 12px; align-items: baseline; width: 100%;
  margin: 0; padding: 12px 6px; border: none; border-bottom: 1px solid var(--grid);
  background: transparent; text-align: left; border-radius: 8px;
  font-size: 14px; color: var(--text-primary); line-height: 1.55;
}
.jr-row:hover { background: var(--surface-2); opacity: 1; }
.jr-row.is-open { background: var(--surface-2); }
.jr-row-date { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.jr-row-line { min-width: 0; overflow-wrap: anywhere; }
.jr-row-more { color: var(--series-1); font-size: 12px; text-align: right; }
.jr-row-none { color: transparent; }

.jr-detail {
  padding: 18px 18px 16px; margin: 2px 0 10px;
  border-left: 3px solid var(--series-1); border-radius: 0 12px 12px 0;
  background: var(--surface-2);
}
.jr-detail[hidden] { display: none; }
.jr-d-head { font-size: 11px; text-transform: uppercase; letter-spacing: 0.11em; color: var(--muted); margin-bottom: 10px; }
.jr-d-one { font-size: 17px; line-height: 1.55; color: var(--text-primary); margin-bottom: 14px; overflow-wrap: anywhere; }
.jr-d-entry p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.78; color: var(--text-secondary); overflow-wrap: anywhere; }
.jr-d-entry p:last-child { margin-bottom: 0; }
.jr-d-none { font-size: 13px; color: var(--muted); font-style: italic; }
.jr-d-actions { margin-top: 16px; }
.jr-d-actions button { margin: 0; font-size: 12px; padding: 6px 13px; }

/* The heading must not be squeezed into "Tod / ay" by the date field beside it. */
#journal-write .card-head { flex-wrap: wrap; }
#journal-write .card-head h2 { white-space: nowrap; flex: 0 0 auto; min-width: auto; }
@media (max-width: 560px) {
  .jr-row { grid-template-columns: minmax(0, 1fr) 20px; row-gap: 3px; }
  .jr-row-date { grid-column: 1 / -1; }
  /* Below this width the date gets its own line rather than fighting the title. */
  #journal-write .jr-date { flex: 1 0 100%; margin-left: 0; width: 100%; max-width: none; margin-top: 4px; }
}

/* At the very narrowest phone widths the plan row was 5px wider than its card. */
@media (max-width: 360px) {
  .now-plan { gap: 5px; }
  .now-prio, .now-day-open, .now-day-pill, .now-day-pick, .now-day-clear,
  .now-book-open, .now-book-pick { padding: 4px 8px; font-size: 11px; }
  .now-day-other input { width: 116px; }
}
/* The reading shown before saving, so "what baby drank" is visible up front. */
.ps-read-preview { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--grid); }
/* A day with an unrecorded volume: the total is a floor, and says so. */
.gl-tot .gl-unknown { color: var(--series-3); font-weight: 700; }
/* Setting a session's status herself, from the history table. */
.hist-flag {
  width: auto; min-width: 0; max-width: 150px;
  padding: 3px 6px; font-size: 11px; border-radius: 8px;
}

/* =====================================================================
   DAYLIGHT — the look she chose, August 2026
   ---------------------------------------------------------------------
   Three things, all from her own direction:

   1. Type. A very light high-contrast serif set large with leading under
      one, against DM Sans in small heavy letterspaced caps for labels and
      plain DM Sans for body. No middle sizes. Her reference was Migra
      Extra Light over Aileron; Cormorant Light stands in for Migra, and
      DM Sans was already hers.

   2. Spacing. Tight inside a group, generous between them. Line height
      1.42 within, 32px between, and no hairline rules separating rows,
      so a group reads as one block rather than a list of boxes.

   3. Daylight. Five states across the day, set on the root element by
      daylight.js from her local clock. The sky, the ground, the text and
      the accent all move together.

   This block sits last on purpose, so it wins at equal specificity. Where
   it has to beat an existing rule it says so.
   ===================================================================== */

:root {
  --display: "Cormorant", Georgia, "Times New Roman", serif;

  /* Daylight tokens. Night is the default; daylight.js swaps them. */
  --sky:
    radial-gradient(1.6px 1.6px at 14% 24%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 58% 16%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 82% 34%, #dbe6ff, transparent),
    radial-gradient(1.7px 1.7px at 31% 46%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 70% 58%, #cfe0ff, transparent),
    radial-gradient(1.3px 1.3px at 9% 62%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 91% 72%, #fff, transparent),
    radial-gradient(circle at 78% 22%, rgba(169, 202, 255, 0.38), transparent 46%),
    linear-gradient(178deg, #0b1030 0%, #131b45 58%, #1e2358 100%);
  --sky-ink: #ffffff;
  --sky-ink-soft: rgba(255, 255, 255, 0.82);
  --sky-label: rgba(255, 255, 255, 0.86);
  --ground: #101636;
  --ground-2: #171d43;
  --day-ink: #ecEEfb;
  --day-ink-2: #a7b3e0;
  --day-ink-3: #7d8ac0;
  --day-edge: #2a3161;
  --day-acc: #a9caff;
  --day-acc-ink: #141a3a;
  --day-field: #171d43;
  --day-field-edge: #333c72;
  --day-field-ink: #97a4d4;
}

html[data-t="sunrise"] {
  --sky:
    radial-gradient(1.3px 1.3px at 22% 16%, rgba(255,255,255,0.9), transparent),
    radial-gradient(1.1px 1.1px at 66% 11%, rgba(255,255,255,0.72), transparent),
    radial-gradient(circle at 50% 104%, rgba(255, 214, 170, 0.95), transparent 52%),
    linear-gradient(178deg, #2c2b57 0%, #6b4a72 42%, #c4747a 72%, #efa87e 100%);
  --sky-ink: #fff8f2;
  --sky-ink-soft: rgba(255, 244, 236, 0.84);
  --sky-label: rgba(255, 240, 228, 0.88);
  --ground: #21203f;
  --ground-2: #2b2950;
  --day-ink: #f6eef0;
  --day-ink-2: #cbb4c4;
  --day-ink-3: #a48ea3;
  --day-edge: #453e6b;
  --day-acc: #f2b58c;
  --day-acc-ink: #33203a;
  --day-field: #2b2950;
  --day-field-edge: #4d4576;
  --day-field-ink: #baa9c2;
}

html[data-t="morning"] {
  --sky:
    radial-gradient(circle at 80% 14%, rgba(255, 244, 214, 0.95), transparent 44%),
    linear-gradient(178deg, #bcd4f2 0%, #d9e6f6 46%, #f6efe1 100%);
  --sky-ink: #201a14;
  --sky-ink-soft: rgba(32, 26, 20, 0.7);
  --sky-label: rgba(32, 26, 20, 0.62);
  --ground: #fbf8f2;
  --ground-2: #fffdf9;
  --day-ink: #262234;
  --day-ink-2: #5f5869;
  --day-ink-3: #6f6878;
  --day-edge: #e7dfd2;
  --day-acc: #4a63c8;
  --day-acc-ink: #ffffff;
  --day-field: #ffffff;
  --day-field-edge: #d8cfbf;
  --day-field-ink: #6b6474;
}

html[data-t="afternoon"] {
  --sky:
    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.85), transparent 40%),
    linear-gradient(178deg, #6d9be6 0%, #9dc0f2 52%, #d5e6fa 100%);
  --sky-ink: #161c2b;
  --sky-ink-soft: rgba(22, 28, 43, 0.72);
  --sky-label: rgba(22, 28, 43, 0.62);
  --ground: #f6f9fd;
  --ground-2: #ffffff;
  --day-ink: #1e2436;
  --day-ink-2: #55607a;
  --day-ink-3: #667186;
  --day-edge: #dde5f0;
  --day-acc: #2f4bbd;
  --day-acc-ink: #ffffff;
  --day-field: #ffffff;
  --day-field-edge: #cfdbeb;
  --day-field-ink: #616c80;
}

html[data-t="golden"] {
  --sky:
    radial-gradient(circle at 30% 96%, rgba(255, 206, 138, 0.95), transparent 50%),
    linear-gradient(178deg, #7f8fc4 0%, #d09a86 44%, #e8a86f 74%, #f0c48c 100%);
  --sky-ink: #2b1d12;
  --sky-ink-soft: rgba(43, 29, 18, 0.72);
  --sky-label: rgba(43, 29, 18, 0.64);
  --ground: #fdf5ea;
  --ground-2: #fffaf2;
  --day-ink: #33261c;
  --day-ink-2: #6d5b4a;
  --day-ink-3: #7c6a58;
  --day-edge: #ecdcc6;
  --day-acc: #8c3f1d;
  --day-acc-ink: #fff6ec;
  --day-field: #fffaf2;
  --day-field-edge: #e2cdb0;
  --day-field-ink: #786553;
}

/* The page takes the day's ground and ink, and every existing token that fed
   surfaces and text is repointed at the daylight ones so the panels follow
   without each needing its own rule. */
html[data-t] body,
body { background: var(--ground); color: var(--day-ink); transition: background .6s ease, color .6s ease; }
html[data-t] {
  --page: var(--ground);
  --surface-1: var(--ground-2);
  --surface-2: var(--ground);
  --text-primary: var(--day-ink);
  --text-secondary: var(--day-ink-2);
  --muted: var(--day-ink-3);
  --border: var(--day-edge);
  --border-strong: var(--day-edge);
  --paper-blue: var(--ground-2);
}

/* ---------- the categorical palette, kept categorical ----------
   Her eight series colours carry all the colour coding in the app: emotions,
   category chips, section accents, charts. They must stay eight different
   colours, and they must stay legible on whichever ground the hour has set. So
   the hues are fixed and only their lightness moves with the day. */
:root {
  --hue-1: #5b76d8;  /* Laneige blue    — milk, vision */
  --hue-2: #8a72af;  /* dusty purple    — feeling, briefing */
  --hue-3: #c69a55;  /* gold            — the list */
  --hue-4: #5f9690;  /* teal            — weight, body */
  --hue-5: #5238cc;  /* deep indigo     — tasks */
  --hue-6: #bf7388;  /* rose            — health */
  --hue-7: #9270b7;  /* plum            — word, journal */
  --hue-8: #c77b62;  /* clay            — food */
  --hue-9: #6f9463;  /* sage            — massage */
  --hue-10: #3f7fb0; /* deep sky        — milk */
}
/* On a deep ground the hues are lifted toward the sky so they carry. */
html[data-t="night"],
html[data-t="sunrise"] {
  --series-1: color-mix(in srgb, var(--hue-1) 52%, #eef1ff);
  --series-2: color-mix(in srgb, var(--hue-2) 52%, #f3edff);
  --series-3: color-mix(in srgb, var(--hue-3) 58%, #fff6e6);
  --series-4: color-mix(in srgb, var(--hue-4) 55%, #e9fbf7);
  --series-5: color-mix(in srgb, var(--hue-5) 46%, #e8e4ff);
  --series-6: color-mix(in srgb, var(--hue-6) 58%, #ffeef2);
  --series-7: color-mix(in srgb, var(--hue-7) 52%, #f5edff);
  --series-8: color-mix(in srgb, var(--hue-8) 60%, #fff0e8);
  --series-9: color-mix(in srgb, var(--hue-9) 55%, #eefbe9);
  --series-10: color-mix(in srgb, var(--hue-10) 52%, #e6f4ff);
}
/* On a pale ground they are deepened instead, so they hold against near-white. */
html[data-t="morning"],
html[data-t="afternoon"],
html[data-t="golden"] {
  --series-1: color-mix(in srgb, var(--hue-1) 88%, #14121a);
  --series-2: color-mix(in srgb, var(--hue-2) 84%, #14121a);
  --series-3: color-mix(in srgb, var(--hue-3) 74%, #14121a);
  --series-4: color-mix(in srgb, var(--hue-4) 68%, #0d1512);
  --series-5: color-mix(in srgb, var(--hue-5) 92%, #14121a);
  --series-6: color-mix(in srgb, var(--hue-6) 78%, #14121a);
  --series-7: color-mix(in srgb, var(--hue-7) 84%, #14121a);
  --series-8: color-mix(in srgb, var(--hue-8) 76%, #14121a);
  --series-9: color-mix(in srgb, var(--hue-9) 66%, #0d1510);
  --series-10: color-mix(in srgb, var(--hue-10) 88%, #14121a);
}

/* The full-page SVG sky is retired: the hero carries the sky now, so the two
   would fight. */
.sky-scene { display: none; }

/* ---------- type ---------- */

header.top h1,
.card h2,
h1, h2 {
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: -0.012em;
}
.card h2 { font-size: 31px; line-height: 0.96; }
header.top h1 { font-weight: 300; }

/* Labels: small, heavy, wide. This has to out-specify .section-label above. */
.shell .section-label,
.tabpanel .section-label,
.section-label {
  font-family: "DM Sans", sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--day-ink-3);
  border-bottom: 0;
  padding-bottom: 0;
  margin: 32px 0 10px;
}
.years-ahead .section-label,
.wishlist-section .section-label { font-size: 9.5px; letter-spacing: 0.18em; color: var(--day-ink-3); }
.section-label .sl-note { font-size: 11.5px; letter-spacing: 0.01em; font-weight: 400; }
.cap-label, .cap-label-row .cap-label, label {
  font-family: "DM Sans", sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--day-ink-3);
}

/* ---------- spacing: tight within, generous between ---------- */

.card {
  padding: 18px 19px;
  border-radius: 16px;
  box-shadow: none;
  border-color: var(--day-edge);
  background: var(--ground-2);
}
.card .sub {
  margin: 5px 0 14px 0;
  font-size: 13px;
  line-height: 1.42;
  color: var(--day-ink-2);
}
.card-head { margin-bottom: 2px; gap: 9px; }
.card-head .icon { width: 26px; height: 26px; border-radius: 8px; }
.card-head .icon svg { width: 13px; height: 13px; }

.stack { gap: 12px; }
.hero-grid { gap: 12px; }

/* ---------- the hero, carrying the sky ---------- */

header.top {
  display: block;
  min-height: 0;
  margin-bottom: 14px;
  padding: 26px 22px 22px;
  border: 0;
  border-radius: 20px;
  background: var(--sky);
  box-shadow: none;
  transition: background .6s ease;
}
header.top::after { display: none; }
.top-stars { display: none; }

.hero-theme {
  margin: 0 0 10px;
  font-family: "DM Sans", sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sky-label);
}
header.top h1#hero-hour {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(48px, 9.5vw, 82px);
  line-height: 0.86;
  letter-spacing: -0.012em;
  margin: 0 0 12px;
  color: var(--sky-ink);
}
header.top h1#hero-hour i { font-style: italic; display: block; }
.hero-sub {
  margin: 0;
  max-width: 46ch;
  font-size: 12.5px;
  line-height: 1.42;
  color: var(--sky-ink-soft);
}
.hero-month { margin: 8px 0 0; font-size: 12.5px; color: var(--sky-ink-soft); }
.hero-month-name, .hero-month-theme { color: var(--sky-ink-soft); }
.hero-month-sep { color: var(--sky-ink-soft); opacity: 0.6; }
.top-right { max-width: none; margin-top: 16px; justify-content: flex-start; }
.top-right .date { display: none; }
.demo-toggle {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.28);
  color: var(--sky-ink);
}
html[data-t="morning"] .demo-toggle,
html[data-t="afternoon"] .demo-toggle,
html[data-t="golden"] .demo-toggle {
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.14);
  color: var(--sky-ink);
}

/* ---------- capture, one tap under the sky ---------- */

.daycapture {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0 0 20px;
  padding: 13px 14px;
  border: 1px solid var(--day-field-edge);
  border-radius: 14px;
  background: var(--day-field);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color .16s ease, background .6s ease;
}
.daycapture:hover { border-color: var(--day-acc); }
.daycapture .dc-text { font-size: 14.5px; color: var(--day-field-ink); line-height: 1.3; }
.daycapture .dc-plus {
  flex: none;
  width: 28px; height: 28px;
  border-radius: 999px;
  background: var(--day-acc);
  color: var(--day-acc-ink);
  display: grid; place-items: center;
  font-size: 18px; line-height: 1;
}

/* ---------- the jump row becomes a sentence, not thirteen boxes ---------- */

.quicklog {
  display: block;
  margin-bottom: 18px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.quicklog .ql-label {
  display: block;
  margin-bottom: 6px;
  font-family: "DM Sans", sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--day-ink-3);
}
.ql-pills { display: flex; flex-wrap: wrap; gap: 7px; }
.quicklog .ql-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  margin: 0;
  padding: 8px 14px 8px 11px;
  border: 1px solid var(--day-edge);
  border-radius: 999px;
  background: var(--ground-2);
  color: var(--day-ink);
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  opacity: 1;
}
.quicklog .ql-pill:hover { background: var(--ground); border-color: var(--day-acc); color: var(--day-acc); }
.quicklog .ql-pill.on { background: var(--day-acc); border-color: var(--day-acc); color: var(--day-acc-ink); font-weight: 600; }
.quicklog .ql-ic { display: inline; font-size: 15px; line-height: 1; }
.quicklog .ql-pill .ql-lb::after { content: ""; }

/* ---------- rows read as one block ---------- */

.now-item, .task-row, .all-row, .jr-row, .wl-row {
  border-bottom: 0;
  padding-top: 3px;
  padding-bottom: 3px;
  line-height: 1.42;
}

/* ---------- tabs ---------- */

/* The tab bar was a floating light pill, which turns invisible on a dark
   ground. It becomes a plain underlined row instead, in the day's ink. */
.tabbar {
  gap: 0;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--day-edge);
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.tabbar .tab {
  flex: 0 1 auto;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--day-ink-3);
  font-family: "DM Sans", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 9px 0 11px;
  margin: 0 18px 0 0;
  box-shadow: none;
}
.tabbar .tab:hover { background: none; color: var(--day-ink-2); }
.tabbar .tab.is-on,
.tabbar .tab[aria-selected="true"] {
  background: none;
  color: var(--day-acc);
  box-shadow: inset 0 -2px 0 var(--day-acc);
}
.tabbar .tab.is-on:hover { background: none; color: var(--day-acc); }
.tabbar .tab .tab-ic { display: none; }
.tabbar .tab .tab-lb { display: inline; }
.tabbar .tab .tab-lb-short { display: none; }
/* Four full labels do not fit a phone, so the short ones come back there. This
   restores behaviour the layer above had flattened. */
@media (max-width: 620px) {
  .tabbar .tab .tab-lb { display: none; }
  .tabbar .tab .tab-lb-short { display: inline; }
  .tabbar .tab { margin-right: 22px; }
}

.foot { color: var(--day-ink-3); }

@media (max-width: 700px) {
  .shell { padding: 16px 14px 60px; }
  header.top { padding: 22px 17px 20px; }
  .card { padding: 15px 16px; }
}

/* ---------- form controls follow the day too ----------
   Inputs were a hardcoded near-white, which punches holes in a dark ground, and
   a selected chip was white text on the accent, which is unreadable when the
   accent is a pale blue. Both are fixed here rather than in the rules above so
   the original light-only styling stays intact if the daylight layer is removed. */

html[data-t] input,
html[data-t] select,
html[data-t] textarea {
  background: var(--day-field);
  border-color: var(--day-field-edge);
  color: var(--day-ink);
}
html[data-t] input::placeholder,
html[data-t] textarea::placeholder { color: var(--day-field-ink); }
html[data-t] input:focus,
html[data-t] select:focus,
html[data-t] textarea:focus {
  border-color: var(--day-acc);
  background: var(--day-field);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--day-acc) 22%, transparent);
}

/* No blanket rule for buttons. Almost everything on this page is a <button> —
   the capture bar, the tabs, the jump pills, the chips, and the mood quadrants
   which carry their own colour inline — so painting them all the accent kept
   destroying something. The base rule already gives ink-on-ground, which has
   high contrast in every state and lets the coloured ones keep their colour. */
html[data-t] .daycapture {
  background: var(--day-field);
  border: 1px solid var(--day-field-edge);
  color: var(--day-ink);
}
html[data-t] .daycapture:hover { border-color: var(--day-acc); }
html[data-t] button.secondary,
html[data-t] button.demo-toggle,
html[data-t] button.cap-manage {
  background: transparent;
  color: var(--day-ink-2);
  border: 1px solid var(--day-edge);
}
html[data-t] button.secondary:hover { background: var(--ground); }

html[data-t] .chip {
  background: var(--ground);
  border-color: var(--day-edge);
  color: var(--day-ink);
}
html[data-t] .chip:hover { background: var(--ground-2); }
html[data-t] .chip.is-on {
  background: var(--day-acc);
  border-color: var(--day-acc);
  color: var(--day-acc-ink);
}

/* ---------- each area with its own character ----------
   She reads by colour before she reads by word, so every section carries a hue
   from her palette. The type, spacing and shapes stay identical everywhere, so
   the page still reads as one thing: only the accent changes. */

.card { --cat: var(--series-1); }

#vision .card, .vision .card, #theme-month { --cat: var(--series-1); }
#tasks .card, .capture, .nowview, #finished, #all-tasks { --cat: var(--series-5); }
#health-section { --cat: var(--series-6); }
#body-section { --cat: var(--series-4); }
#emotion-section { --cat: var(--series-2); }
#milk-section { --cat: var(--series-10); }
#food-section { --cat: var(--series-8); }
#massage { --cat: var(--series-9); }
#wishlist-section .card { --cat: var(--series-3); }
#wotd { --cat: var(--series-7); }
#briefing { --cat: var(--series-2); }
#news-card { --cat: var(--series-1); }
#journal-write, #journal-list { --cat: var(--series-7); }
.history-preview { --cat: var(--series-2); }

/* The icon is where the hue lives loudest, and it is the thing she scans for. */
html[data-t] .card-head .icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--cat) 11%, var(--ground-2));
  color: var(--cat);
  border: 1px solid color-mix(in srgb, var(--cat) 30%, var(--ground-2));
}
html[data-t] .card-head .icon svg { width: 15px; height: 15px; }

/* A hairline of the hue along the top edge, so a card is placeable even when
   the icon is off screen. */
html[data-t] .card {
  position: relative;
  overflow: hidden;
}
html[data-t] .card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cat), color-mix(in srgb, var(--cat) 12%, transparent) 72%, transparent);
  opacity: 0.85;
  pointer-events: none;
}
/* The label above a group takes the hue of the group it names. */
html[data-t] #health-section-label, html[data-t] .section-label { color: var(--day-ink-3); }
html[data-t] .vision .section-label { color: var(--series-1); }
html[data-t] .wishlist-section .section-label { color: var(--series-3); }

/* ---------- the type ladder, stated in one place ----------
   9.5 label / 13 sub / 14.5 body / 31 heading / 48 hero. The gaps between the
   steps are the hierarchy; nothing sits in the middle of them. */
html[data-t] .card h2 { font-size: 31px; line-height: 0.96; letter-spacing: -0.014em; color: var(--day-ink); }
html[data-t] .card-head { align-items: center; gap: 11px; margin-bottom: 3px; }
html[data-t] .card .sub { font-size: 13px; line-height: 1.45; margin-left: 0; }

/* Sub-headings inside a card sit between body and heading, in the sans, so they
   never compete with the Cormorant. */
html[data-t] .card h3,
html[data-t] .card h4 {
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--day-ink-3);
}

/* ---------- fixes from her second read ---------- */

/* The pills were still stacking icon over label from the older rule, which is
   what made them tall enough to eat the screen. One line each instead. */
html[data-t] .quicklog .ql-pill {
  flex-direction: row;
  min-width: 0;
  padding: 8px 15px 8px 12px;
  line-height: 1.2;
}
html[data-t] .quicklog .ql-pill .ql-ic { font-size: 16px; }
html[data-t] .quicklog .ql-pill .ql-lb { font-size: 14px; font-weight: 500; }

/* A heading should not swallow data of unpredictable length. "This month" stays
   the heading; the month's own name drops beneath it in the sans, in the hue of
   its section, which is both a clearer hierarchy and easier to scan. */
html[data-t] .card-head { align-items: flex-start; flex-wrap: nowrap; }
html[data-t] .card-head h2 { flex: 1 1 auto; min-width: 0; }
html[data-t] .card-head .icon { margin-top: 3px; }
html[data-t] .theme-month h2 .sep { display: none; }
html[data-t] .theme-month h2 #tm-title {
  display: block;
  margin-top: 6px;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--cat);
}
html[data-t] .theme-edit,
html[data-t] .focus-edit { flex: none; margin-top: 2px; }