/* Today (§3; D41–D43, D46) — owned by the "today" builder. Ported from prototype v2 views/today.css.
   Phone: one column with a generous vertical rhythm. Container ≥ 760px: two calm columns whose section rules line
   up across (left: Readiness, Last night, Overnight; right: Today so far, This week, prompts). The number is the
   hero; section headings are quiet small caps; labels and the usual are small and muted. Tokens only.
   #view is the `view` size container; #view[data-route="today"] is this view (the router sets data-route). */

/* ---- head: kicker date, "Today", refresh (no date sticker: calm first) -------------------------------- */
#view .view-head.today-head{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 40px}
#view .today-head .view-kicker{margin:0 0 6px}
#view .today-head .view-actions{flex:none;display:flex;align-items:center;gap:22px;margin:0}
@media (pointer:coarse),(max-width:900px){#view .today-refresh{min-width:44px;min-height:44px}}
.today-refresh.is-spinning{opacity:.55;cursor:progress}
.today-refresh.is-spinning svg{animation:today-spin .9s linear infinite}
@keyframes today-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.today-refresh.is-spinning svg{animation:none}}

/* ---- time-zone notice (an exception, so it shows): in the head. Phone: its own line under the title.
   Container ≥ 760: beside the title, so it never pushes the two columns below the fold (D43). ---------------- */
#view .view-head.today-head.has-tz{flex-wrap:wrap}
.today-head>.today-tz{order:3;flex:1 0 100%;margin:20px 0 0}
.today-tz{padding:9px 12px 10px;border-left:3px solid var(--desk-blue);background:var(--desk-soft);max-width:72ch;box-sizing:border-box}
@container view (min-width:760px){
  #view .view-head.today-head.has-tz{flex-wrap:nowrap;gap:28px}
  .today-head>.today-tz{order:0;flex:0 1 auto;margin:0 0 2px auto;max-width:min(72ch,62%)}
}
.today-tz p{margin:0}
.today-tz-1{font:500 13px/1.5 var(--desk-font);color:var(--desk-ink)}
.today-tz .v-info{margin-left:2px}
#view .today-tz .today-inline-link{font:700 13px/1.5 var(--desk-font);color:var(--desk-blue);background:none;border:0;box-shadow:none;padding:0;min-height:0;cursor:pointer;border-bottom:1px solid transparent;white-space:nowrap}
#view .today-tz .today-inline-link:hover{border-bottom-color:currentColor}
@media (max-width:900px),(pointer:coarse){#view .today-tz .today-inline-link{padding:12px 0;margin:-12px 0}}

/* ---- the grid --------------------------------------------------------------------------------------- */
.today-grid{display:grid;grid-template-columns:minmax(0,1fr);row-gap:40px;align-items:start}
.today-grid>.v-section,.today-grid>.today-prompts,.today-grid>.v-panel-error{margin:0;min-width:0}
.today-grid .is-busy{opacity:.72;transition:opacity .2s}
@media (prefers-reduced-motion:reduce){.today-grid .is-busy{transition:none}}
@container view (min-width:760px){
  .today-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(56px,7cqi,112px);row-gap:48px;
    grid-template-areas:"ready sofar" "night week" "over prompts"}
  /* Without Readiness (its check hasn't passed, §3.0): Last night opens the left column. */
  .today-grid.no-ready{grid-template-areas:"night sofar" "over week" "over prompts"}
  .today-grid>.today-ready{grid-area:ready}
  .today-grid>.today-night{grid-area:night}
  .today-grid>.today-over{grid-area:over}
  .today-grid>.today-sofar{grid-area:sofar}
  .today-grid>.today-week{grid-area:week}
  .today-grid>.today-prompts{grid-area:prompts}
  /* very wide containers: keep the two columns at a readable measure */
  #view[data-route="today"]>.today-grid,#view[data-route="today"]>.today-head{max-width:1360px}
  #view .view-head.today-head{margin-bottom:40px}
  #view .fig-wrap:has(>.today-fig){--tip-top:10px}
  #view .fig-wrap:has(>.today-fig.fig-xl){--tip-top:25px}
  .today-sec>.v-section-body{padding-top:24px}
  /* wide: the figures get bigger, the labels stay small */
  .today-fig.fig-xl .fig-value{font-size:76px;letter-spacing:-2.8px}
  .today-fig.fig-lg .fig-value{font-size:46px;letter-spacing:-1.6px}
  .today-fig.fig-lg .fig-unit,.today-fig.fig-lg .fig-extra{font-size:16px}
  .today-fig.fig-md .fig-value{font-size:32px}
}

/* Quiet section heads: a hairline of ink, small caps, the verdict on the right. More air under the head. */
.today-sec>.v-section-head{align-items:center;min-height:20px}
.today-sec>.v-section-body{padding-top:18px;gap:14px}
.today-sec .v-section-meta{margin-left:auto}
.today-ohead{font:500 12px/1.5 var(--desk-mono);color:var(--desk-muted)}
.today-called{font-size:11px}

/* ---- figures: the whole block is the link; quiet hover and a clear focus ring -------------------------- */
.today-fig.fig-link{margin:-10px -12px;padding:10px 12px;border-radius:3px;min-height:44px;box-sizing:border-box;transition:background-color .12s ease}
.today-fig.fig-link:hover{background:var(--hover)}
.today-fig.fig-link:focus-visible{outline:2px solid var(--desk-blue);outline-offset:0}
@media (prefers-reduced-motion:reduce){.today-fig.fig-link{transition:none}}
.today-fig .fig-meta{flex-direction:column;align-items:flex-start;gap:3px}
.today-fig.fig-xl{gap:10px}
.today-fig.fig-lg{gap:8px}
.today-fig .fig-label{color:var(--desk-muted)}
.today-fig .v-usual{text-wrap:pretty}
.today-ov .today-fig .v-usual{white-space:nowrap}
.today-fig .fig-ex{align-self:baseline;position:relative;top:-2px}
.today-fig.is-empty .fig-value{visibility:hidden;width:0;overflow:hidden;margin-right:-8px}
.today-fig.is-empty .fig-ex{align-self:center;top:0;font-size:12px;padding:2px 7px}
.today-fig.fig-xl.is-empty .fig-ex{font-size:13px;padding:3px 9px}
.today-fig .fig-value.v-mark{padding:0 4px;margin:0 -2px}
.today-dur{display:inline-flex;align-items:baseline;gap:8px;font-weight:700;color:var(--desk-ink)}
.today-dot{color:var(--desk-muted);font-weight:400}
.fig-wrap:has(>.today-fig){gap:6px;--tip-top:8px}
.fig-wrap:has(>.today-fig.fig-xl){--tip-top:20px}
.fig-wrap:has(>.today-fig)>.v-info{margin-top:var(--tip-top)}

/* two figures side by side (Last night, Today so far, This week) */
.today-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 32px;align-items:stretch}
.today-pair.is-single{grid-template-columns:minmax(0,1fr)}
.today-pair>.today-fig.fig-link,.today-pair>.fig-wrap{justify-self:stretch}

/* ---- Overnight: 2×2 on the phone, four across when the column has room ------------------------------ */
.today-over>.v-section-body{container:today-ov / inline-size}
.today-ov{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 32px}
.today-ov-cell{min-width:0;display:flex}
.today-ov-cell>.today-fig{flex:1 1 auto;min-width:0}
@container today-ov (min-width:500px){
  .today-ov{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 16px}
}
.today-callout{margin:0 0 8px;max-width:48ch;padding:1px 0 1px 14px;box-shadow:inset 3px 0 var(--v-mark);font:500 15px/1.5 var(--desk-font);color:var(--desk-ink);text-wrap:pretty}
.today-callout-ctx{color:var(--desk-muted)}

/* ---- prompts (only when present) ------------------------------------------------------------------- */
.today-prompts{display:flex;flex-direction:column;gap:28px}
.today-more{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0}
.today-more-sep{display:none;color:var(--desk-muted)}
#view .today-more-btn{display:none;min-height:32px;margin:0;padding:0;border:0;background:none;box-shadow:none;cursor:pointer;font:600 13px/1.3 var(--desk-font);color:var(--desk-blue)}
#view .today-more-btn:hover{text-decoration:underline;text-underline-offset:3px}
#view .today-more-btn:focus-visible{outline:2px solid var(--desk-blue);outline-offset:2px;border-radius:2px}
.today-prompts>.v-section{margin:0}
.today-insights{margin:0;border-top:1px solid var(--desk-rule);padding-top:8px}
#view a.today-insights-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:600 15px/1.3 var(--desk-font);color:var(--desk-blue);text-decoration:none}
.today-insights-link:hover>span:first-child{text-decoration:underline;text-underline-offset:3px}
.today-insights-link:focus-visible{outline:2px solid var(--desk-blue);outline-offset:2px;border-radius:2px}
.today-insights-go{transition:transform .12s ease}
.today-insights-link:hover .today-insights-go{transform:translateX(2px)}
@media (prefers-reduced-motion:reduce){.today-insights-go{transition:none}}
.today-card{scroll-margin:80px}
.today-card:focus-visible{outline:2px solid var(--desk-blue);outline-offset:3px}
.today-confirm .v-section-body{gap:12px}
@media (max-width:900px),(pointer:coarse){#view .today-life-link{display:inline-flex;align-items:center;min-height:44px}}
@container view (min-width:760px){
  /* D43: the first card shows; '+N more to confirm' opens the rest in place, so Today fits one screen. */
  .today-confirm:not(.is-open) .today-card-extra{display:none}
  #view .today-more-btn{display:inline-flex;align-items:center}
  .today-more-sep{display:inline}
  .today-prompts{gap:16px}
  .today-confirm>.v-section-body{padding-top:16px}
  .today-prompts .v-card{padding:10px 14px 12px;gap:6px}
  .today-prompts .v-card .v-card-actions{gap:6px}
  #view .today-prompts .v-card .btn{min-height:30px;padding-top:0;padding-bottom:0}
  .today-insights{padding-top:0;border-top:0}
  #view a.today-insights-link{min-height:36px}
}
@media (pointer:coarse){#view .today-prompts .v-card .btn{min-height:44px}#view a.today-insights-link{min-height:44px}}

/* ---- live: a changed figure or the callout sentence gets the 1.2s yellow underline (components.css .is-updated) */

/* Desktop Today ends with its figures or prompts; a shorter tail keeps both columns on one screen (D43). */
@media (min-width:901px){#view[data-route="today"]{padding-bottom:24px}}

/* ---- phone ----------------------------------------------------------------------------------------- */
@media (max-width:900px){
  #view .view-head.today-head{flex-direction:row;align-items:flex-end;gap:12px;margin:0 0 28px}
  .today-grid{row-gap:28px}
  .today-pair{gap:20px 24px}
  .today-ov{gap:22px 24px}
  .today-head>.today-tz{margin-top:8px} /* + the head's 12px row gap */
}