/* ── today.css — the daily rhythm ────────────────────────────────────────
   There is no streak here and no calendar, so there is nothing to style that
   would imply a run of days. That absence is the design.                  */

.today__row {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--s3);
}

#tt-note {
  display: block;
  width: 100%;
  margin-top: var(--s2);
  padding: var(--s2);
  font: inherit;
  font-size: var(--t-sm);
  color: var(--ink);
  background: var(--page-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  resize: vertical;
}

.sky #tt-note,
:root[data-theme='dark'] #tt-note {
  background: rgba(0, 0, 0, .16);
}

#tt-note:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.today__notes {
  list-style: none;
  padding: 0;
  margin: var(--s2) 0 0;
  display: grid;
  gap: var(--s2);
}

.today__notes li {
  padding-left: var(--s3);
  border-left: var(--stroke) solid var(--line-strong);
  color: var(--ink-2);
}

.practice ol { padding-left: 1.2em; margin: var(--s2) 0; }
.practice li { margin-bottom: var(--s1); }
.practice li::marker { color: var(--ink-3); }

/* The midday control is a plain button, not a scoreboard. */
[data-timer] { margin-top: var(--s2); }

/* ── the breathing orb ────────────────────────────────────────────────────
   The brand mark at practice size, pacing the breath on the site's one
   cycle: in 3s, hold 1s, out 3s. Nothing else on this page moves.

   There is no progress ring, on purpose. A ring that fills is a progress bar
   in a circle, and it turns the ninety seconds into something to get through
   rather than something to be inside.                                      */

.orb-stage {
  display: grid;
  place-items: center;
  gap: var(--s2);
  margin: var(--s4) 0 var(--s3);
}

.orb {
  width: clamp(9rem, 6rem + 14vw, 13rem);
  height: auto;
  overflow: visible;
}

.orb__half { stroke: none; }
.orb__half--ground { fill: var(--first-light); fill-opacity: .30; }
.orb__half--sky    { fill: var(--sky);         fill-opacity: .55; }

/* On the dark surface the warm half needs more presence and the cool half
   less, or the mark reads as a single dark blob. */
:root[data-theme='dark'] .orb__half--ground { fill-opacity: .42; }
:root[data-theme='dark'] .orb__half--sky    { fill: var(--sky-high); fill-opacity: .5; }

.orb__rim {
  fill: none;
  stroke: var(--rule);
  stroke-width: 1.5;
  opacity: .9;
}

.orb__glow { opacity: 0; transition: opacity .8s var(--ease); }

.orb__left {
  font-family: var(--font-util);
  font-size: var(--t-xs);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  margin: 0;
  opacity: .65;
}

/* The breath only runs while the practice is running. Both the mark and its
   glow are driven by the same 7s cycle so they rise and settle together. */
.orb-stage.is-running .orb__body {
  transform-origin: 60px 60px;
  animation: orb-breath var(--breath) ease-in-out infinite;
}
.orb-stage.is-running .orb__glow {
  transform-origin: 60px 60px;
  animation: orb-glow var(--breath) ease-in-out infinite;
}

/* 3s in · 1s hold · 3s out, expressed as percentages of the 7s cycle:
   inhale ends at 43%, the hold releases at 57%. */
@keyframes orb-breath {
  0%, 100% { transform: scale(1); }
  43%      { transform: scale(1.055); }
  57%      { transform: scale(1.055); }
}

@keyframes orb-glow {
  0%, 100% { opacity: .35; transform: scale(.95); }
  43%      { opacity: 1;   transform: scale(1.06); }
  57%      { opacity: 1;   transform: scale(1.06); }
}

/* Reduced motion: the orb still appears and still marks the practice, it just
   holds still. The instruction never depended on the movement. */
@media (prefers-reduced-motion: reduce) {
  .orb-stage.is-running .orb__body,
  .orb-stage.is-running .orb__glow { animation: none; }
  .orb-stage.is-running .orb__glow { opacity: .6; }
}