/* styles/today.css — Today and the ＋ sheet's Today-facing bits (WP1, ADR-0031).
 *
 * Everything here is scoped to Today's own classes; the shared system lives in
 * styles.css and is never edited from a view file. Tokens only, no raw hex. */

/* ---------- the page head: the DATE is the title ----------
 * `tc-date` rides along on the h1 so the phone suite's decision-above-the-fold
 * measurement keeps pointing at the element that carries today's date; it must
 * not inherit the old 14px dim caption styling. */
h1.page-title.tc-date{font-size:22px;font-weight:700;color:var(--txt);line-height:1.25}

/* ---------- layout ----------
 * One column on a phone, in reading order: decision → next up → this week →
 * recovery. Two columns from 900px, decision on the left. */
.today-grid{display:grid;gap:12px;align-items:start}
.today-main,.today-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.today-main>.card+.card,.today-side>.card+.card,
.today-main>section+section,.today-side>section+section{margin-top:0}
@media(min-width:900px){
  .today-grid{grid-template-columns:minmax(0,640px) minmax(260px,1fr);gap:16px}
}

/* ---------- the session blocks ---------- */
.tc-sess+.tc-sess{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.tc-sess .tc-top{margin-bottom:6px}
.tc-n{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;
  border-radius:999px;background:var(--panel2);border:1px solid var(--line);
  color:var(--dim);font-size:13px;font-weight:600}
.tc-opt{color:var(--faint);font-size:14px}
.today-card .tc-title{font-size:20px;font-weight:700;line-height:1.25;margin:2px 0;letter-spacing:-.01em}
.today-card .tc-why{color:var(--dim)}
.today-hero .tc-title{font-size:17px;font-weight:600;line-height:1.3;margin:2px 0 0}
.today-card .fold,.today-hero .fold{border-top:1px solid var(--line);margin-top:8px}
.today-card .fold>summary,.today-hero .fold>summary{min-height:44px;font-size:14.5px;color:var(--dim)}
.today-card .fold .ck-list,.today-hero .fold .ck-list{margin-top:0}
.today-card .ck-item{align-items:center}
.today-card .ck-item .ic{color:var(--amber);flex:0 0 auto}

/* the one status pill, only when there is something to say */
.tc-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.today-card .big-pill,.today-hero .big-pill{margin-left:auto}
.pill.kind-chip{font-weight:600}
.run-glance{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
.pill .ic{width:14px;height:14px;vertical-align:-2px;margin-right:2px}

/* ---------- actions ---------- */
.today-card .tc-primary{margin-top:16px}
.today-card .tc-secondary{gap:4px}
.today-card .tc-secondary .btn.quiet,.today-hero .tc-secondary .btn.quiet{flex:0 0 auto;justify-content:flex-start;gap:6px}
.today-hero .hero-meta{gap:8px}
.reveal-note{font-size:14px}

/* the day's own log, folded away behind one quiet line */
.today-card details[data-fold-id="today-applog"]{margin-top:14px;border-top:1px solid var(--line)}
.today-card details[data-fold-id="today-applog"]>summary{font-weight:500;color:var(--dim);font-size:14.5px}
.today-card .day-status{border-top:0;padding-top:0;margin-top:0}
.applog{gap:8px}

/* ---------- next up / this week ---------- */
.tc-next{margin-top:0;padding-top:0;border-top:0}
.tc-next .tc-next-btn{min-height:44px;padding:4px 0;text-align:left;color:var(--txt);
  text-decoration:none;font-weight:600;font-size:15px;gap:6px}
.tc-next .tc-next-btn:hover{color:var(--violet-bright);text-decoration:none}
.week-card .wk7{margin-top:2px}
.wk7 .d7 .ic{margin-top:1px}

/* ---------- recovery ---------- */
.today-side .recovery-quiet{margin:0;padding:14px 18px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius)}
.today-side .recovery-card .rc-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
.recovery-card .rc-m b{font-size:22px}
.recovery-card .compare{margin-top:12px}

/* ---------- the ＋ sheet: tiles and receipts ---------- */
.sh-tile .sh-ic{display:flex;align-items:center;justify-content:center;color:var(--violet-bright)}
.sh-tile .sh-ic .ic{width:24px;height:24px}
.sh-tile.wide .sh-ic{flex:0 0 auto}
.sh-tile .sh-state{font-weight:500}
.sh-tile .sh-state.ok{color:var(--green)}
.sh-done .sh-done-check .ic{width:30px;height:30px}
.sh-done .sync-line{font-size:14.5px}
.recent-note{margin-top:10px;color:var(--faint);font-size:13.5px}
.recent-row .rl-time{color:var(--faint);font-size:14px;min-width:96px}

/* ---------- small phones: the decision must land in the first viewport ---------- */
@media (max-height: 600px){
  .today-card .tc-title{font-size:18px}
  h1.page-title.tc-date{font-size:19px}
  .page-head{margin:0 0 10px}
  .today-grid{gap:10px}
  .today-card .tc-sess .fold{display:none}
}

/* The campaign name belongs to Today's own page head (the quiet line above the
 * date), so the sticky header does not say it a second time on this route. */
body[data-page="today"] header .sub{display:none}

/* the quiet recovery line: label, one dated sentence, then the way in */
.recovery-quiet .rq-body{margin-top:2px;line-height:1.45}
.recovery-quiet .rq-link{display:inline-block;margin-top:6px;font-size:14px}

/* Receipt tiers: styles.css carries the green/blue/violet circles; the calm
 * refinement's receipt also uses the red "Not accepted" and the dim tiers. */
.sh-done-check.r{background:var(--red-dim);border-color:var(--red-line);color:var(--red)}
.sh-done-check.dim{background:var(--panel2);border-color:var(--line);color:var(--dim)}