/* ═══ Today: Greeting, Quick Add, Frog Hero, Tasks, Progress, Mood ═══ */

/* ── Header summary ── */
.today-summary{font-size:13px;color:var(--muted);font-weight:500;margin-top:6px;line-height:1.7}

/* ── Quick Add ── */
/* Quick Add: convenience action — quiet until focused, never a rival to the Decision Hero */
.today-add{display:flex;align-items:center;gap:10px;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-pill);padding:6px 6px 6px 18px;box-shadow:none;transition:border-color var(--duration-base),box-shadow var(--duration-base),background var(--duration-slow)}
.today-add:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft),var(--shadow-sm)}
.today-add .ta-ico{color:var(--accent);opacity:.8;flex-shrink:0;transition:transform var(--duration-base) cubic-bezier(.34,1.56,.64,1),opacity var(--duration-base)}
.today-add:focus-within .ta-ico{transform:rotate(90deg) scale(1.1);opacity:1}
.today-add input{flex:1;min-width:0;border:none;outline:none;background:transparent;color:var(--text);font-family:var(--font-ui);font-size:15px;padding:9px 0;font-weight:400}
.today-add input::placeholder{color:var(--muted);font-weight:400}
.today-go{width:44px;height:44px;flex-shrink:0;border:none;border-radius:50%;background:var(--accent);color:#fff;cursor:pointer;display:grid;place-items:center;box-shadow:var(--shadow-accent);transition:transform var(--duration-fast) var(--ease-spring),box-shadow var(--duration-fast)}
.today-go:hover{transform:translateY(-1px)}
.today-go:active{transform:translateY(2px) scale(.97);box-shadow:0 1px 0 0 rgba(120,55,20,.35)}
.today-add.shake{animation:shake var(--duration-base) ease;border-color:var(--danger)!important}

/* ── Section titles ── */
/* ── Section rhythm (Priority 8.4 hierarchy) ──
   Decision Hero gets the most breathing room; task list is compact;
   progress and mood stay quiet reflections of the day. */
.frog-sec{margin:8px 0 4px}
.today-sec{animation:fadeUp var(--duration-slow) ease;padding:10px 0}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}
.frog-sec .sec-head{margin-bottom:0}

#moodLabel{font-size:12px;color:var(--muted);font-weight:500}

/* ── Frog hero ── */
/* ── Decision Hero ──
   The signature component: largest title, strongest CTA, most air.
   Everything else on Today is quieter than this card.

   The card is paper, not glass. It used to carry two corner radials — accent
   top-inline-end, green bottom-inline-start — over the surface, plus two
   drifting dots. Together those read as a decorative glow that no other card in
   the app has, which is exactly what makes a screen look machine-dressed: hue
   with no job. So the halos and the dots are gone, and what is left is the one
   thing this card should have been all along — the same flat surface every other
   card uses, with the notebook's own ruling showing through it.

   The ruling used to be written out here, in --text at a flat 5%, with a long
   note about why --border would have been wrong and why a fraction of it would
   have been worse. Both reasons still hold and neither has gone anywhere: they
   are written once, on .sheet-paper in css/base.css, and this card now reads
   them like the other five sheets do. Duplicating that paragraph here was how the
   gradient ended up duplicated here too — same 22px pitch, same 5%, written out
   twice so that changing it in one place was a coin toss.

*/
/* The paper, the ruling and the tape are .sheet-paper's now (css/base.css) — the
   same declaration the two calendars, the birthday greeting and the update note
   read. This card had its own copy of the gradient, identical to the calendar's
   down to the 22px pitch, and no tape at all; it also clipped with
   overflow:hidden, so the one thing that made it read as a page of this notebook
   rather than as a themed panel was missing.

   What stays here is what is genuinely this card's: the 30px radius (it is the
   biggest thing on the screen), the padding, the centred column, and one border
   — a green-tinted one, because the card is about the day being finished or
   about there being nothing to do, and the accent edge says so before the words
   are read. Everything else is inherited. */
.frog-hero{border-radius:30px;padding:30px 24px 26px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
  border-color:color-mix(in srgb,var(--green) 28%,var(--color-border));
  transition:background var(--duration-slow)}
/* Idle motion: one slow, very low-character breathing drift for the hero only */
.frog-emoji{font-size:58px;line-height:1;transform-origin:bottom center;filter:drop-shadow(0 10px 14px rgba(0,0,0,.14));animation:drift 6s ease-in-out infinite}
@keyframes frogFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-4px) rotate(1deg)}}
.frog-kicker{display:inline-flex;align-items:center;gap:7px;background:color-mix(in srgb,var(--green) 14%,transparent);color:#5f8f4d;font-family:var(--font-ui);font-size:12px;font-weight:700;padding:5px 15px;border-radius:var(--radius-pill)}
html[data-mode="dark"] .frog-kicker{color:#9ccc86}
.frog-name{font-family:var(--font-personality);font-size:24px;font-weight:700;line-height:1.55;word-break:break-word;max-width:100%}
.frog-meta{display:flex;gap:7px;flex-wrap:wrap;justify-content:center}
.frog-chip{--fc:#5f8f4d;font-size:11px;font-weight:600;color:var(--fc);background:color-mix(in srgb,var(--fc) 12%,transparent);border:1px solid color-mix(in srgb,var(--fc) 28%,transparent);padding:3px 12px;border-radius:var(--radius-pill);animation:popIn var(--duration-base) var(--ease-out)}
.rec-reason{margin:0;color:var(--muted);font-size:12.5px;font-weight:500;line-height:1.8}
.frog-actions{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap;justify-content:center;align-items:stretch}
.frog-start{border:none;background:var(--green);color:#fff;font-family:var(--font-ui);font-size:14px;font-weight:700;padding:11px 26px;border-radius:var(--radius-pill);cursor:pointer;box-shadow:0 4px 0 0 rgba(90,130,75,.55);transition:transform var(--duration-fast),box-shadow var(--duration-fast)}
.frog-start:hover{transform:translateY(-1px)}
.frog-start:active{transform:translateY(3px);box-shadow:0 1px 0 0 rgba(90,130,75,.55)}
.frog-next{border:1.5px solid var(--border);background:transparent;color:var(--muted);font-family:var(--font-ui);font-size:13px;font-weight:500;padding:12px 20px;border-radius:var(--radius-pill);cursor:pointer;transition:all var(--duration-fast)}
.frog-next:hover{color:var(--accent);border-color:var(--accent)}
.frog-empty .frog-none{color:var(--muted);font-size:13px;line-height:2;font-weight:400;max-width:300px}

/* ── Empty states: three distinct moods, never error-like ── */
.frog-empty{padding:30px 22px 26px}
.frog-empty-title{font-family:var(--font-personality);font-size:18px;font-weight:700;line-height:1.7;color:var(--text);margin-top:2px}
.frog-empty-done .frog-emoji{filter:none}
.frog-empty-done .frog-empty-title{color:var(--green)}
html[data-mode="dark"] .frog-empty-done .frog-empty-title{color:#9ccc86}
.frog-add{border:1.5px dashed color-mix(in srgb,var(--accent) 45%,transparent);background:transparent;color:var(--accent);font-family:var(--font-ui);font-size:13px;font-weight:600;padding:10px 22px;border-radius:var(--radius-pill);cursor:pointer;transition:all var(--duration-fast);margin-top:4px}
.frog-add:hover{background:var(--accent-soft);border-style:solid}

.today-sec h2{font-family:var(--font-personality);font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px;color:var(--muted)}
.today-sec h2::before{content:'';width:14px;height:4px;border-radius:var(--radius-pill);background:var(--accent-soft);flex-shrink:0}

/* ── Today's task rows (visually quieter than the Decision Hero) ── */
.today-list{list-style:none;display:flex;flex-direction:column;gap:7px}
/* contain:layout style keeps a row's own content from reflowing the short
   today list — the list is reconciled in place, so a row must be able to
   change (title, chips, done) without moving its neighbours. */
.t-row{position:relative;contain:layout style;display:flex;align-items:center;gap:10px;background:color-mix(in srgb,var(--surface) 82%,transparent);border:1px solid var(--border);border-radius:var(--radius-md);padding:9px 12px;transition:transform var(--duration-fast),box-shadow var(--duration-fast),opacity var(--duration-base);animation:taskIn .45s var(--ease-out) backwards}
.t-row:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.t-check{width:25px;height:25px;flex-shrink:0;border-radius:var(--radius-xs);border:2px solid var(--muted);background:transparent;cursor:pointer;display:grid;place-items:center;color:transparent;transition:background var(--duration-fast) var(--ease-out),border-color var(--duration-fast),box-shadow var(--duration-base) var(--ease-out),transform var(--duration-fast) var(--ease-out)}
.t-check:active{transform:scale(.9)}
.t-check svg{width:13px;height:13px;stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset var(--duration-base) ease}
.t-row.done .t-check{background:var(--green);border-color:transparent;box-shadow:0 4px 10px -5px var(--green);animation:pop var(--duration-base) var(--ease-out)}
.t-row.done .t-check svg{stroke-dashoffset:0}
.t-dot{width:8px;height:8px;border-radius:50%;background:var(--pr,#7fb069);flex-shrink:0;transition:opacity var(--duration-base)}
.t-row.done .t-dot{opacity:.25}
.t-title{flex:1;min-width:0;font-family:var(--font-ui);font-size:14px;font-weight:500;line-height:1.6;word-break:break-word;transition:color var(--duration-base)}
.t-row.done .t-title{color:var(--muted);font-weight:400;text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--muted) 70%,transparent)}
.t-due{flex-shrink:0;font-size:10.5px;font-weight:600;padding:2px 9px;border-radius:var(--radius-pill)}
.t-due.today{color:var(--accent);background:var(--accent-soft)}
.t-due.late{color:#d84a4a;background:rgba(255,93,93,.12)}
html[data-mode="dark"] .t-due.late{color:#ff8f8f}
.t-due.soon{color:var(--muted);background:var(--bg)}
/* A finished task never reads as due: the deadline chip is hidden, not removed.
   The row is updated in place when it is checked off, so the chip has to be
   able to appear and disappear without the row being rebuilt. */
.t-row.done .t-due{display:none}
.t-dur{flex-shrink:0;font-size:10.5px;font-weight:600;padding:2px 9px;border-radius:var(--radius-pill);color:#7b6fd8;background:rgba(123,111,216,.12)}
html[data-mode="dark"] .t-dur{color:#a79bf5}
.t-del{border:none;background:transparent;color:var(--muted);width:28px;height:28px;border-radius:var(--radius-xs);cursor:pointer;display:grid;place-items:center;flex-shrink:0;opacity:0;transform:scale(.8);transition:all var(--duration-fast)}
.t-row:hover .t-del,.t-del:focus-visible{opacity:1;transform:none}
.t-del:hover{color:var(--danger);background:rgba(228,88,79,.12);transform:scale(1.12)!important}
@media (hover:none){.t-del{opacity:.55;transform:none}}
.t-empty{list-style:none;text-align:center;padding:20px 12px;color:var(--muted);font-size:13px;line-height:1.9;font-weight:400;background:color-mix(in srgb,var(--surface) 55%,transparent);border:1.5px dashed var(--border);border-radius:var(--radius-lg)}
/* Navigation to the full list stays quieter than the Decision Hero CTA */
.today-all{display:flex;margin:12px auto 0;align-items:center;gap:6px;border:none;background:transparent;color:var(--accent);font-family:var(--font-ui);font-size:12.5px;font-weight:600;padding:8px 14px;border-radius:var(--radius-pill);cursor:pointer;transition:transform var(--duration-fast)}
.today-all:hover{text-decoration:underline}
.today-all:active{transform:scale(.96)}

/* ── Recommendation: reason + alternatives ── */
.rec-reason{margin:0;color:var(--muted);font-size:12.5px;font-weight:500;line-height:1.8}
.rec-alts{margin-top:4px;display:flex;flex-direction:column;gap:6px;width:100%}
.rec-alts-label{font-size:11px;font-weight:700;color:var(--muted)}
.rec-alts ul{list-style:none;display:flex;flex-direction:column;gap:5px;margin:0;padding:0}
.rec-alt{width:100%;text-align:start;border:1px solid var(--border);background:color-mix(in srgb,var(--surface) 60%,transparent);color:var(--text);font-family:var(--font-ui);font-size:12.5px;font-weight:500;padding:7px var(--space-3);border-radius:var(--radius-sm);cursor:pointer;transition:border-color var(--duration-fast),color var(--duration-fast),transform var(--duration-fast)}
.rec-alt:hover{border-color:var(--accent);color:var(--accent)}
.rec-alt::before{content:'•';margin-inline-end:6px;color:var(--muted)}

/* ── Daily progress ── */
.tp-track{height:12px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--text) 9%,transparent);overflow:hidden}
.tp-track i{display:block;height:100%;width:0;border-radius:var(--radius-pill);background:linear-gradient(90deg,var(--green),var(--accent-2));transition:width var(--duration-slow) cubic-bezier(.22,1,.36,1)}
.tp-track i.full{background:linear-gradient(90deg,var(--green),#a8d08d)}
.tp-text{margin-top:9px;font-size:12px;color:var(--muted);font-weight:500;min-height:1.6em}
.tp-text b{color:var(--green);font-weight:700}

/* ── Mood ── */
.mood-sec{padding-bottom:4px}
.mood-sec .moods{gap:9px;flex-wrap:wrap}
.mood-sec .moods button{width:44px;height:44px;border-radius:var(--radius-sm)}
.mood-sec .moods button svg{width:24px;height:24px}

/* ═══ Responsive: Today ═══ */
@media (max-width:480px){
  .frog-hero{padding:26px 18px 22px;border-radius:var(--radius-xl);gap:10px}
  .frog-emoji{font-size:50px}
  .frog-name{font-size:20px}
  .frog-start{font-size:14px;padding:11px 24px}
  .frog-next{font-size:12.5px;padding:11px 18px}
  .frog-empty-title{font-size:16px}
  .today-add{padding:5px 5px 5px 14px;gap:8px}
  .today-add input{font-size:14px;padding:8px 0}
  .today-go{width:40px;height:40px}
  .t-row{padding:8px 10px}
  .t-title{font-size:13.5px}
  .today-sec h2{font-size:13px}
  .today-sec{padding:8px 0}
}
@media (max-width:360px){
  .frog-emoji{font-size:44px}
  .frog-name{font-size:18px}
  .frog-empty-title{font-size:15px}
  .mood-sec .moods button{width:38px;height:38px}
  .mood-sec .moods button svg{width:20px;height:20px}
}