/* Today view (#today): the morning briefing.
   Shared components (.panel, .status, .btn, .legend, .num, .fine) and the story classes
   (.story, .story-section, .section-title, .lead, .takeaway, .bridge, .why-cards, .card,
   .chips, .chip, details.more, .highlight-once) come from styles.css; ui.js styles the
   dialog. Only Today's own layout lives here. */

.today-page {
  container: today / inline-size;
}

.today-section {
  min-width: 0;
  /* Arriving from a link (?focus=) leaves room above the section title. */
  scroll-margin-top: calc(var(--safe-top, 0px) + 24px);
}

.today-page .today-section-lead {
  max-width: 34em;
  font-size: 19px;
  line-height: 1.4;
}

@container today (min-width: 720px) {
  .today-page .today-section-lead {
    font-size: 21px;
  }
}

/* ------------------------------------------------------------------ */
/* 1. The answer                                                       */

.today-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  row-gap: 20px;
}

@container today (min-width: 720px) {
  .today-hero {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: stretch;
    align-items: center;
    column-gap: 56px;
  }
}

.today-dial-wrap {
  display: grid;
  justify-items: center;
  gap: 4px;
}

.today-dial-stage {
  position: relative;
  isolation: isolate;
  padding: 18px;
}

/* The one decorative gradient: a soft glow in the recovery zone color behind the dial. */
.today-glow {
  position: absolute;
  inset: -6px;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    closest-side,
    color-mix(in oklab, var(--today-zone, transparent) 20%, transparent) 0%,
    color-mix(in oklab, var(--today-zone, transparent) 9%, transparent) 55%,
    transparent 100%
  );
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .today-glow {
    opacity: 0.55;
  }
}

:root[data-theme="light"] .today-glow {
  opacity: 0.55;
}

.today-dial {
  position: relative;
}

.today-dial-caption {
  margin: 0;
  text-align: center;
}

.today-answer {
  display: grid;
  gap: 28px;
  min-width: 0;
  width: 100%;
  justify-items: start;
}

.today-page .today-verdict {
  max-width: 30em;
  font-size: 21px;
  line-height: 1.38;
  text-wrap: pretty;
}

@container today (min-width: 720px) {
  .today-page .today-verdict {
    font-size: 26px;
    line-height: 1.3;
  }
}

/* Training call: label, pill, reasons, "How this works" */

.today-call {
  display: grid;
  justify-items: start;
  gap: 10px;
  min-width: 0;
  max-width: 40em;
}

.today-call-label {
  font-size: 13px;
  color: var(--ink-3);
}

.today-call-pill .status {
  min-height: 36px;
  padding: 6px 16px 6px 12px;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
}

.today-call-reasons {
  list-style: none;
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-2);
}

/* A fine-print link, not a section divider: no rule above it, no extra padding. */
.today-page details.today-how {
  border-top: 0;
}

.today-page details.today-how > summary {
  min-height: 32px;
  padding: 0;
  font-size: 13px;
  color: var(--ink-3);
}

.today-page details.today-how[open] > summary {
  margin-bottom: 8px;
}

.today-page details.today-how > summary:hover {
  color: var(--ink);
}

.today-how .more-body {
  gap: 8px;
}

.today-how .fine {
  max-width: 60ch;
}

/* ------------------------------------------------------------------ */
/* Body watch promoted under the hero ('watch' or 'alert')             */

.today-watch-alert {
  gap: 12px;
  padding: 20px;
  border: 1px solid color-mix(in oklab, var(--status-warn) 45%, var(--hairline));
  border-radius: var(--radius-panel);
  background: var(--surface);
}

.today-watch-alert.is-alert {
  border-color: color-mix(in oklab, var(--status-serious) 55%, var(--hairline));
}

.today-watch-alert-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.today-watch-alert-title {
  font-size: 20px;
  font-stretch: 105%;
  font-weight: 600;
}

.today-watch-summary {
  max-width: 44em;
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink);
}

/* Shared Body watch list */

.today-watch {
  list-style: none;
  margin: 0;
  padding: 0;
}

.today-watch-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  column-gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--hairline);
}

.today-watch-row:first-child {
  border-top: 0;
}

.today-watch-icon {
  display: inline-flex;
  color: var(--ink-3);
}

.today-watch-flagged .today-watch-icon {
  color: var(--status-warn);
}

.today-watch-name {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.today-watch-flagged .today-watch-name > span:first-child {
  font-weight: 600;
}

.today-watch-base {
  font-size: 13px;
  color: var(--ink-3);
}

.today-watch-reading {
  display: grid;
  justify-items: end;
  gap: 1px;
  text-align: right;
}

.today-watch-value {
  font-size: 18px;
  line-height: 1.2;
  color: var(--ink);
}

.today-watch-delta {
  font-size: 13px;
  color: var(--ink-2);
}

.today-watch-when {
  margin-top: 2px;
}

.today-vitals {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 0;
}

.today-vital-value {
  color: var(--ink-2);
}

/* Quiet line (section 5) */

.today-page details.today-watch-line {
  border-top: 0;
}

.today-page details.today-watch-line > summary {
  align-items: flex-start;
  min-height: 44px;
  padding: 2px 0;
  color: var(--ink-2);
}

.today-page details.today-watch-line[open] > summary {
  margin-bottom: 12px;
}

.today-watch-line .more-body {
  gap: 12px;
}

.today-watch-line-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
}

.today-watch-line-text {
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 60ch;
}

.today-watch-line > summary > .icon {
  margin-top: 6px;
}

.today-watch-line[open] > :not(summary) {
  max-width: 720px;
}

.today-watch-line .today-watch {
  margin: 4px 0 8px;
}

/* ------------------------------------------------------------------ */
/* 2. Why you're at N%                                                 */

.today-page .today-why-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

@container today (min-width: 720px) {
  .today-page .today-why-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
}

.today-page .today-why-card {
  display: grid;
  grid-template-columns: auto minmax(64px, 1fr);
  grid-template-areas:
    "top top"
    "figure spark"
    "compare compare"
    "sentence sentence";
  align-items: end;
  /* Cards in a row stretch to the tallest one; keep the rows packed at the top so the
     label, figure and comparison line up across all three cards. */
  align-content: start;
  gap: 6px 16px;
  min-width: 0;
  padding: 16px 18px 18px;
  color: var(--ink);
  text-decoration: none;
}

.today-why-top {
  grid-area: top;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
}

.today-why-icon {
  display: inline-flex;
}

.today-why-label {
  flex: 1 1 auto;
  min-width: 0;
}

.today-chevron {
  flex: none;
  color: var(--ink-3);
  transition: transform 150ms ease, color 150ms ease;
}

.today-why-card:hover .today-chevron,
.today-why-card:focus-visible .today-chevron {
  color: var(--ink);
  transform: translateX(2px);
}

.today-why-figure {
  grid-area: figure;
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  margin-top: 4px;
}

.today-why-value {
  font-size: 40px;
  line-height: 1;
  white-space: nowrap;
  color: var(--ink);
}

/* Three narrow cards (Yoga in portrait, split view): the sparkline gets its own row. */
@container today (min-width: 720px) and (max-width: 859.98px) {
  .today-page .today-why-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "top"
      "figure"
      "spark"
      "compare"
      "sentence";
  }

  .today-why-spark {
    margin-top: 6px;
  }
}

.today-unit {
  font-size: 14px;
  color: var(--ink-2);
}

.today-why-spark {
  grid-area: spark;
  position: relative;
  min-width: 0;
  height: 40px;
  margin-bottom: 2px;
}

.today-why-compare {
  grid-area: compare;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-2);
}

.today-tone {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-3);
}

.today-tone.is-good {
  background: var(--status-good);
}

.today-tone.is-bad {
  background: var(--status-critical);
}

.today-why-sentence {
  grid-area: sentence;
  min-width: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  text-wrap: pretty;
}

/* Last night */

.today-night .panel-head {
  margin-bottom: 14px;
}

.today-stage-bar {
  min-height: 12px;
}

.today-night .legend {
  margin-top: 10px;
}

.today-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 12px 20px;
  margin: 16px 0 0;
}

@container today (min-width: 720px) {
  .today-night-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Strain stats: 2 by 2 in a narrow panel, one row of 4 when there is room. */
.today-strain .panel-body {
  container: today-strain / inline-size;
}

.today-strain-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@container today-strain (min-width: 400px) {
  .today-strain-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.today-keep {
  white-space: nowrap;
}

.today-stat {
  min-width: 0;
}

.today-stat dt {
  font-size: 13px;
  color: var(--ink-2);
}

.today-stat dd {
  margin: 2px 0 0;
  font-size: 19px;
  line-height: 1.25;
  color: var(--ink);
}

/* ------------------------------------------------------------------ */
/* 3. Today's plan                                                     */

.today-plan-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}

@container today (min-width: 720px) {
  .today-plan-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 16px;
  }
}

.today-figure {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.today-figure-icon {
  display: inline-flex;
  align-self: center;
}

.today-big {
  font-size: 44px;
  line-height: 1;
  color: var(--ink);
}

.today-figure-note {
  font-size: 14px;
  color: var(--ink-2);
}

.today-meter {
  position: relative;
  margin-top: 12px;
  min-height: 50px;
}

.today-workouts {
  list-style: none;
  display: grid;
  gap: 6px;
  margin: 16px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--hairline);
}

.today-workout {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
}

.today-workout-meta {
  font-size: 13px;
  color: var(--ink-2);
}

.today-load {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.today-load-stat {
  display: grid;
  justify-items: start;
  /* Both stats share the row height; pack them at the top so values and pills line up. */
  align-content: start;
  gap: 4px;
}

.today-load-label {
  font-size: 13px;
  color: var(--ink-2);
}

.today-load-value {
  font-size: 34px;
  line-height: 1.05;
  color: var(--ink);
}

.today-load-trend {
  display: grid;
  gap: 6px;
  margin-top: 18px;
}

.today-load-caption {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-2);
}

.today-load-spark {
  position: relative;
  height: 44px;
}

/* ------------------------------------------------------------------ */
/* 4. Tonight                                                          */

.today-tonight-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  min-width: 0;
}

@container today (min-width: 720px) {
  .today-tonight-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 24px;
  }

  /* Labels line up with the title of the panel beside them. */
  .today-tonight-grid > .today-tonight-figures {
    padding-top: 21px;
  }
}

.today-tonight-figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-content: start;
  padding-top: 4px;
}

.today-tonight-figure {
  display: grid;
  gap: 4px;
  align-content: start;
  min-width: 0;
}

.today-figure-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
}

.today-tonight-value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
}

.today-tonight-value .num {
  font-size: 40px;
  line-height: 1.05;
  color: var(--ink);
}

.today-tonight-value .today-unit {
  font-size: 16px;
}

.today-figure-sub {
  max-width: 28em;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-3);
}

.today-tomorrow .panel-head {
  margin-bottom: 10px;
}

.today-tomorrow-range {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.today-tomorrow-range .num {
  font-size: 48px;
  line-height: 1;
  color: var(--ink);
}

.today-tomorrow-range .today-unit {
  font-size: 20px;
}

/* Round 3: the 50% range leads as "Most likely"; the 80% range is a sentence under it. */
.today-tomorrow-label {
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--ink-2);
}

.today-tomorrow-wide {
  max-width: 34em;
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-2);
}

.today-zone-track {
  position: relative;
  min-height: 56px;
  margin-top: 12px;
}

.today-tomorrow-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 14px;
}

.today-tomorrow-actions .fine {
  flex: 1 1 220px;
}

.today-tomorrow-empty {
  max-width: 40em;
  font-size: 15px;
  color: var(--ink-2);
}

/* Stand-in for charts.zoneTrack while charts.js lacks it */

.today-track {
  display: grid;
  gap: 8px;
  padding-top: 8px;
}

.today-track-bar {
  position: relative;
  display: flex;
  gap: 2px;
  height: 10px;
}

.today-track-seg {
  height: 100%;
  border-radius: 3px;
  background: color-mix(in oklab, var(--seg) 30%, var(--surface));
}

.today-track-seg.is-red { --seg: var(--c-red); }
.today-track-seg.is-yellow { --seg: var(--c-yellow); }
.today-track-seg.is-green { --seg: var(--c-green); }

.today-track-range {
  position: absolute;
  top: -3px;
  bottom: -3px;
  border-radius: 999px;
  background: var(--ink);
  opacity: 0.9;
}

.today-track-mean {
  position: absolute;
  top: -7px;
  width: 4px;
  height: 24px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--ink);
  box-shadow: 0 0 0 2px var(--surface);
}

.today-track-labels {
  display: flex;
  font-size: 12px;
  color: var(--ink-3);
}

.today-track-labels > span {
  text-align: center;
}

/* ------------------------------------------------------------------ */
/* 6. Notes                                                            */

.today-note-chips,
.today-note-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.today-note-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.today-note-list > li {
  display: flex;
  max-width: 100%;
}

.today-page .today-note-chip {
  max-width: 100%;
}

.today-note-chip > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-note-chip .icon {
  color: var(--ink-3);
}

.today-note-chip.is-experiment .icon {
  color: var(--c-hrv);
}

.today-notes-empty {
  display: grid;
  justify-items: start;
  gap: 14px;
}

.today-notes-text {
  max-width: 60ch;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}

.today-head-note .icon,
.today-add-note .icon {
  margin-left: -2px;
}

/* In the chip row the button takes the chips' height and pill shape, so the row reads as one set. */
.today-note-chips .today-add-note {
  min-height: 36px;
  border-radius: var(--radius-pill);
}

@media (any-pointer: coarse) {
  .today-note-chips .today-add-note {
    height: 44px;
  }
}

/* ------------------------------------------------------------------ */
/* 7. Your last two weeks                                              */

.today-recent .legend {
  margin-bottom: 8px;
}

.today-recent-chart {
  position: relative;
  min-height: 200px;
}

/* ------------------------------------------------------------------ */
/* Note dialog                                                         */

.today-note-form {
  display: grid;
  gap: 18px;
}

.today-note-form .input {
  font-size: 16px;
}

.today-note-textarea.input {
  height: auto;
  min-height: 88px;
  padding: 10px 12px;
  line-height: 1.45;
  resize: vertical;
}

.today-own-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 340px;
}

.today-own-tag .input {
  flex: 1 1 auto;
  min-width: 0;
}

.today-note-tags {
  min-width: 0;
}

/* ------------------------------------------------------------------ */
/* Touch: 44px targets                                                 */

@media (any-pointer: coarse) {
  .today-head-note,
  .today-add-note,
  .today-own-tag .btn {
    height: 44px;
    padding: 0 14px;
  }

  .today-page details.today-how > summary {
    min-height: 44px;
  }

  .today-page .bridge {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .today-chevron {
    transition: none;
  }
}

/* Round 3: "See the full day" in the Last night panel head opens the day sheet. */
.today-open-day {
  gap: 4px;
  white-space: nowrap;
}

.today-open-day .icon {
  margin-right: -4px;
  color: var(--ink-3);
}

/* Phones: the takeaway keeps the full width; the button follows it, left-aligned. */
@media (max-width: 599.98px) {
  .today-night > .panel-head > .panel-heading {
    flex-basis: 100%;
  }

  .today-night > .panel-head > .panel-actions {
    margin: -6px 0 -4px -12px;
  }
}