/*
 * css/layouts/today.css
 * 17 Oct 2026 v14
 *   D662-8 HOME-FIT (Graeme's device check, 13 Oct: "a tiny scroll").
 *   Plan Home's doors and Library row a little shorter (8px top and
 *   bottom, 8px apart; still 56px or more to tap). Measured in Chromium
 *   at 412 x 915 with a week day set: the Library row ended at 910px,
 *   under the bar at 843px; now 834px.
 * 12 Oct 2026 v13
 *   A-1 PLAN-HOME-PRUNE. The Today card (.home-week, .home-today) in the
 *   teal of the arc; the arc as a line inside it (.home-arcline); the
 *   coach's card heading as a button to the arc (.home-today__arc); Plan
 *   your week as a text link; one Library row. Free Home untouched.
 * 06 Oct 2026 v12
 *   D-12 PROGRESS-FIT. Free Home's door tiles: as many columns as fit
 *   9 characters each (two at normal text, one at large text). Two fixed
 *   columns pushed "Mobility & Conditioning" off the phone at 2x.
 * 05 Oct 2026 v11
 *   D-8 TEXT-FIT (device test, 05 Oct). Only 10 minutes and Something else
 *   today ran out of their buttons side by side at a large text size: they
 *   stack now, full width, and their words wrap.
 * 05 Oct 2026 v10
 *   D-6 WEEK-SHAPE. .home-week: "Today, from your week" above the doors;
 *   the odd last link tile (Your week) runs full width as a row.
 * 04 Oct 2026 v9
 *   LOOK-4. Plan Home: the arc and the three doors as cards with a tile,
 *   words and a chevron; the four links as a 2x2 grid of tiles. Free Home:
 *   session tiles with a kind-colour tile, Wellbeing full width, the
 *   reference rows in one card. Shared .kind-tile / .look-label /
 *   .look-card live in base/global.css.
 * 28 Sep 2026 v8
 *   SMOOTH-P3a. Plan Home: .home-arc (the arc in one line), .home-doors /
 *   .home-door (three doors, the first filled), .home-links (three quiet
 *   links), .home-carry (the Carry-on card). Every door is at least 64px
 *   tall and says what happens next in its second line, so the choice is
 *   made on words rather than on colour (1.4.1).
 *
 * 03 Sep 2026 v7
 *   LOBBY-1a. .today-reference / .today-ref-row.
 *
 *   Home had seven tiles of equal weight. These are the three that are
 *   not sessions -- Library, Conditions Update, Wellbeing -- demoted to
 *   rows so the eye reaches the four that are.
 *
 *   Deliberately quiet, and deliberately NOT disabled-looking: these are
 *   ordinary destinations somebody may well want. Quiet means lower
 *   contrast on the label, not grey-on-grey. Rows keep the same 48px
 *   target the tiles have -- demoting something visually must not demote
 *   it for thumbs.
 *
 * 17 Aug 2026 v6
 *   CHAP-1 step 6. .today-hinge__aside / __event / __input.
 *
 * 16 Aug 2026 v5
 *   CHAP-1 step 3. .today-hinge, the end-of-chapter offer.
 *
 * 16 Aug 2026 v4
 *
 * v4 — CHAP-1 step 2. .today-programme-row added: full width, above the
 *   grid, deliberately NOT a .today-door. The six tiles answer "what
 *   shall I do now?"; this answers "where am I going?", and styling it
 *   as a tile would make people tap it expecting a workout. It is a row
 *   with a chevron, which is the established shape for "this leads
 *   somewhere" rather than "this starts something".
 *
 *   .today-settings-link REMOVED with the cog it styled. Settings is a
 *   bottom-nav destination reachable from every screen. The greeting's
 *   padding-right went with it — it existed only to clear the cog, and
 *   leaving it would have kept a 52px gap guarding nothing.
 *
 * 04 Aug 2026 v3
 *
 * v3 — .today-door__hint added for the "Your programme" indicator on
 *   Mobility & Conditioning when a condition programme exists (today.js v10).
 *
 * v2 — Phase C, Home Nav & Conditions Redesign. New six-door grid
 * (.today-doors/.today-door) replacing the old single CTA + secondary
 * actions row. New .today-settings-link corner affordance (Settings
 * now reachable directly from Home, per spec). .today-checkin-link
 * replaces .today-checkin-btn — check-in is no longer the dominant
 * primary action, just a modest link shown only when not yet checked
 * in today. Old .today-cta-block/.today-checkin-btn/.today-secondary-
 * actions/.today-secondary-btn/.today-view--done/.today-second-session
 * rules removed — confirmed unused, today.js v5 no longer renders
 * those classes.
 *
 * 25 Jun 2026 v1
 *
 * Styles for today.js v2 — the daily entry point view.
 * New Phase 5 layout replacing the old intention.js-based today.
 */

.today-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-4) var(--space-8);
  max-width: 480px;
  margin: 0 auto;
  min-height: 100%;
  position: relative;
}

/* ── Greeting ─────────────────────────────────────────────────── */

.today-greeting {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin: 0;
  line-height: 1.2;
}

.today-coach-line {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: var(--leading-relaxed);
}

/* ── Week count ───────────────────────────────────────────────── */

.today-week-count {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-elevated);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

.today-week-count__number {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-primary);
  line-height: 1;
}

.today-week-count__label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ── The hinge (CHAP-1 step 3) ────────────────────────────────── */
/* Bordered rather than filled, and no accent on the heading. A chapter
   ending is a fact, not a trophy — the moment this reads as a reward is
   the moment the next chapter reads as an obligation. */

.today-hinge {
  padding: var(--space-4);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.today-hinge__heading {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin: 0;
  line-height: var(--leading-snug);
}

.today-hinge__body {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: var(--leading-relaxed);
}

.today-hinge__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.today-hinge__actions .btn {
  min-height: 44px;
}

/* ── The event goal at the hinge (CHAP-1 step 6) ──────────────── */
/* Quieter than the chapter choice above it. The chapter is the
   question; this is an aside, and it should look like one. */

.today-hinge__aside {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: var(--leading-relaxed);
}

.today-hinge__event {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.today-hinge__label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.today-hinge__input {
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.today-hinge__input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ── My Programme row (CHAP-1 step 2) ─────────────────────────── */

.today-programme-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 64px;
  padding: var(--space-4);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.today-programme-row:hover {
  border-color: var(--color-primary);
}

.today-programme-row:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.today-programme-row__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
  min-width: 0;
}

.today-programme-row__label {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  line-height: var(--leading-snug);
}

.today-programme-row__hint {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-snug);
}

/* Decorative only — aria-hidden in the markup, and the row's accessible
   name already says where it goes. Nothing here is the sole carrier of
   meaning, so it can be safely ignored by a screen reader. */
.today-programme-row__chevron {
  font-size: var(--text-xl);
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/* ── Six doors ────────────────────────────────────────────────── */

.today-doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9em), 1fr));
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.today-door {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4);
  min-height: 100px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.today-door:hover {
  border-color: var(--color-primary);
}

.today-door:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.today-door__icon {
  font-size: var(--text-2xl);
  line-height: 1;
}

.today-door__label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  line-height: var(--leading-snug);
}

.today-door__hint {
  font-size: var(--text-xs);
  color: var(--color-primary);
  font-weight: var(--font-semibold);
}

/* "Unsure? Coach decides" — the zero-effort door, spans both columns
   so it reads as the deliberately different, delegate-everything
   option rather than a seventh peer among six equal tiles. */
.today-door--unsure {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  border-style: dashed;
  background: var(--color-bg-elevated);
}

.today-door--unsure .today-door__icon {
  font-size: var(--text-xl);
}

/* ── Check-in link (modest, not the primary CTA) ─────────────────── */

.today-checkin-link {
  width: 100%;
  min-height: 44px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* ── LOBBY-1a ─────────────────────────────────────────────────────────
   Reference and settings. See the v7 note. */
.today-reference {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.today-ref-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 48px;              /* WCAG 2.2 target size — same as a tile */
  padding: var(--space-3) var(--space-1);
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-border);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.today-ref-row:last-child {
  border-bottom: none;
}

.today-ref-row__icon {
  font-size: var(--text-lg, 1.125rem);
  flex: 0 0 auto;
}

.today-ref-row__label {
  flex: 1 1 auto;
  font-size: var(--text-base);
  color: var(--color-text-secondary, inherit);
}

.today-ref-row__chevron {
  flex: 0 0 auto;
  opacity: 0.5;
}

.today-ref-row:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

/* ── LOBBY-1b: the arc on the lobby ───────────────────────────────────
   The gold edge marks premium CAPABILITY. It is an edge, deliberately —
   an addition around something whole, not a colour that makes the rest
   of the screen look drained. Free must look finished, and this
   audience has spent enough time being told it does not qualify. */
.today-arc {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  min-height: 48px;
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  border: 2px solid var(--color-gold, #B8970A);
  border-radius: var(--radius-lg, 12px);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.today-arc__label {
  font-size: var(--text-sm);
  color: var(--color-gold, #B8970A);
}

.today-arc__aim {
  font-size: var(--text-lg, 1.125rem);
  font-weight: var(--font-bold, 700);
  line-height: var(--leading-tight, 1.3);
}

.today-arc__strands {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Unlit is NOT unfinished. A strand nothing has touched yet is a
   starting line, so it must read as quiet rather than as failed. */
.today-arc__strand {
  padding: 2px var(--space-3);
  border-radius: var(--radius-sm, 4px);
  border: 1px solid var(--color-border);
  font-size: var(--text-sm);
}

.today-arc__strand--lit {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.today-arc__note,
.today-arc__offer {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed, 1.6);
  opacity: 0.85;
}

/* DIC-SIGNAL, 16 Sep 2026. Names the tier, quietly, on the free arc
   invitation.

   The aria-label said "part of the Plan" and the visible text did not,
   so a screen-reader user knew which tier this was and a sighted user
   did not. 1.3.1 -- the same information by every route.

   Deliberately small and muted: it labels, it does not argue. The
   invitation above is the argument, in the coach's own words, and
   Locked Principles P1/P2 keep any selling out of the coach's voice
   entirely. */
.today-arc__tier {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.today-arc:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* LOBBY-1c. The invitation. One primary action on the lobby, with the
   price of entry stated beneath it rather than sprung afterwards. */
.today-invite {
  margin-top: var(--space-2);
}

.today-invite__note {
  margin: var(--space-2) 0 var(--space-5) 0;
  font-size: var(--text-sm);
  text-align: center;
  opacity: 0.75;
}

/* The session space's escape. Quieter than the suggestion above it —
   the coach leads, and this is one tap for somebody who has decided. */
.cp-else-label {
  margin: var(--space-5) 0 var(--space-2) 0;
  font-size: var(--text-sm);
  opacity: 0.75;
}

.cp-else {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.cp-else__btn {
  min-height: 48px;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}

.cp-else__btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ── TIER-HOME: the free chooser ──────────────────────────────────────
   Headings, not doors. They give the territory shape without adding a
   level — the depth rule holds: at most one screen before moving. */
.today-chooser-q {
  margin: var(--space-2) 0 var(--space-5) 0;
  font-size: var(--text-lg, 1.125rem);
  line-height: var(--leading-relaxed, 1.5);
}

.today-group-label {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  opacity: 0.75;
}

.today-doors + .today-group-label {
  margin-top: var(--space-5);
}

/* The coach-picks fallback. Quiet, but not hidden — it is the drop-in,
   and it spent months as the eighth tile labelled "Unsure?". */
.today-unsure {
  margin-top: var(--space-5);
}

/* A pick on the free chooser. Same target and weight as a Plan tile —
   free is not a smaller version of the screen, it is a different one. */
.today-door--pick {
  min-height: 48px;
}


/* ============================================================
   SMOOTH-P3a. Plan Home: three doors.
   ============================================================ */

.home-arc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  margin: var(--space-2) 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  min-height: 48px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full, 999px);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
}
.home-arc__label { font-size: var(--text-sm); color: var(--color-text-secondary); }
.home-arc__aim   { font-weight: 600; line-height: 1.3; }
.home-arc:focus-visible { outline: 3px solid var(--color-border-focus); outline-offset: 2px; }

.home-doors {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.home-door {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  min-height: 72px;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 16px);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s, transform 0.12s;
}
.home-door:hover { border-color: var(--color-primary); }
.home-door:active { transform: scale(0.99); }
.home-door:focus-visible { outline: 3px solid var(--color-border-focus); outline-offset: 2px; }
.home-door__title { font-size: var(--text-lg); font-weight: 700; line-height: 1.25; }
.home-door__sub   { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.4; }

.home-door--primary {
  /* The same fill and text as .btn-primary, so the primary action looks
     like the primary action everywhere and meets the same contrast. */
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}
.home-door--primary .home-door__sub { color: inherit; opacity: 0.85; }

.home-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1) var(--space-4);
  margin: var(--space-4) 0 0;
}
.home-link {
  min-height: 44px;
  padding: 0 var(--space-2);
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.home-link:focus-visible { outline: 3px solid var(--color-border-focus); outline-offset: 2px; }

.home-doors__or {
  margin: var(--space-5, 1.5rem) 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.home-carry {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-lg, 16px);
  background: var(--color-surface);
}
.home-carry__kicker { margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--color-primary); }
.home-carry__title  { margin: 0; font-size: var(--text-xl); color: var(--color-text); }
.home-carry__next   { margin: 0; color: var(--color-text-secondary); }
.home-carry__bar    { height: 6px; background: var(--color-border); border-radius: 999px; overflow: hidden; margin: var(--space-1) 0 var(--space-2); }
.home-carry__fill   { height: 100%; background: var(--color-primary); }

@media (prefers-reduced-motion: reduce) {
  .home-door { transition: none; }
  .home-door:active { transform: none; }
}

/* SMOOTH-P3a. With a session to carry on, the other doors step back:
   one line each, so the card and all three still fit a phone. */
.home-carry ~ .home-doors .home-door { min-height: 52px; padding: var(--space-3) var(--space-4); }
.home-carry ~ .home-doors .home-door__sub { display: none; }
.home-carry ~ .home-doors .home-door__title { font-size: var(--text-base); }
.home-carry .btn-large { min-height: 52px; }

/* SMOOTH-P3a. The general-guidance line (GUIDANCE-1, once a month) sits
   above the doors on Plan Home. Compact there, so on the day it shows
   the three doors still fit a phone. Same words, same role="note". */
.today-guidance:has(~ .home-doors) {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.45;
}


/* ============================================================
   LOOK-4 — Home, 04 Oct 2026
   ============================================================ */
.home-arc {
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  min-height: 72px;
  padding: var(--space-3) var(--space-4);
  border-radius: 20px;
  background: var(--color-bg);
  background: color-mix(in srgb, var(--kind-teal) 12%, var(--color-bg));
  border-color: color-mix(in srgb, var(--kind-teal) 35%, var(--color-border-light));
}
.home-arc__text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.home-arc__label { color: var(--color-text); font-weight: 600; font-size: var(--text-sm); }
.home-door__chev { flex: none; margin-left: auto; color: var(--color-text-secondary); }

.home-door {
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  border-radius: 20px;
  background: var(--color-bg);
  border-color: var(--color-border-light);
}
.home-door:hover { background: var(--color-bg-hover); }
.home-door__text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.home-door__title { font-size: var(--text-base); font-weight: 600; }
.home-door--primary { background: var(--color-primary); }
.home-door--primary:hover { background: var(--color-primary); filter: brightness(1.05); }
.home-door--primary .kind-tile { color: var(--color-text-inverse); background: rgba(15, 23, 42, 0.14); }
.home-door--primary .home-door__sub { opacity: 1; }
.home-door--primary .home-door__chev { color: var(--color-text-inverse); }

.home-links--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  justify-content: stretch;
  margin: 0;
}
.home-link--tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: 108px;
  padding: var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: 20px;
  color: var(--color-text);
  font-size: var(--text-base);
  text-decoration: none;
  text-align: left;
}
.home-link--tile:hover { background: var(--color-bg-hover); }
.home-link__label { line-height: 1.3; }
.home-links--grid > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  min-height: 72px;
}

/* D-6 WEEK-SHAPE, 05 Oct 2026. Today, from your week. */
.home-week {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  margin: 0 0 var(--space-4);
}
.home-week__lbl { margin: 0; }
.home-week__name { margin: 0; font-size: var(--text-xl, 1.25rem); font-weight: 700; color: var(--color-text); }
.home-week__line { margin: 0; font-size: var(--text-sm); line-height: 1.45; color: var(--color-text-secondary); }
.home-week .btn-primary { margin-top: var(--space-2); }
.home-week__row { display: flex; flex-direction: column; gap: var(--space-2); }
.home-week .btn { min-height: 48px; height: auto; white-space: normal; overflow-wrap: break-word; text-align: center; line-height: 1.3; }
.home-doors__or:focus { outline: none; }
.home-doors__or:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 4px; border-radius: 6px; }

/* Free Home */
.today-door {
  gap: var(--space-3);
  min-height: 112px;
  background: var(--color-bg);
  border-color: var(--color-border-light);
  border-radius: 20px;
}
.today-door:hover { background: var(--color-bg-hover); border-color: var(--color-border-light); }
.today-door__icon { font-size: inherit; line-height: 1; }
.today-door__label { font-size: var(--text-base); }
.today-door--wide { grid-column: 1 / -1; flex-direction: row; align-items: center; min-height: 72px; }
.today-reference { padding: var(--space-1) 0; overflow: hidden; }
.today-ref-row { gap: var(--space-3); }
.today-ref-row__icon { font-size: inherit; }

/* ============================================================
   A-1 PLAN-HOME-PRUNE — Plan Home, 12 Oct 2026
   The Today card leads (.home-week, and .home-today for the coach's card),
   the arc a line inside it, then the doors and one Library row.
   ============================================================ */
.home-week, .home-today {
  background: color-mix(in srgb, var(--kind-teal) 14%, var(--color-bg));
  border-color: color-mix(in srgb, var(--kind-teal) 55%, var(--color-border-light));
}
.home-arcline {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  margin-top: var(--space-2);
  padding: var(--space-3) 0 0;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--kind-teal) 35%, transparent);
  background: none;
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}
.home-arcline svg { flex: none; color: var(--kind-teal); }
.home-arcline__text strong { font-weight: 700; }
.home-today__arc {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.home-today__link {
  align-self: center;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 0;
  background: none;
  color: var(--color-text);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.home-arcline:focus-visible, .home-today__arc:focus-visible, .home-today__link:focus-visible {
  outline: 3px solid var(--color-border-focus);
  outline-offset: 2px;
  border-radius: 8px;
}
.home-libraryrow { margin-top: var(--space-3); background: transparent; }
/* D662-8 HOME-FIT. Plan Home's doors and Library row, a little shorter. */
.home-doors { gap: var(--space-2); }
.home-doors .home-door,
.home-door.home-libraryrow { min-height: 56px; padding-top: var(--space-2); padding-bottom: var(--space-2); }
.home-door.home-libraryrow { margin-top: var(--space-2); }
#home-doors-label:focus { outline: none; }