/* youcoach2 SPA — Figma-matched login + admin. Mobile-first. */
@import url("/css/tokens.css?v=lightonly126");

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: var(--yc-font);
  color: var(--yc-fg);
  background: var(--yc-bg);
}

/* Universal `hidden` attribute — needs an override because several
   component rules below use `display: flex/grid`, which outrank the
   attribute's default `display: none`. */
[hidden] { display: none !important; }

/* ── App shell ─────────────────────────────────────────────────────────── */
#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* App header — Concept iii "one-menu drawer". Page title left, single
   You pill right that opens a drawer with Messages / Goals / Profile /
   Notifications / Log out. Everything else is one tap deeper, so the
   header never grows or shrinks screen-to-screen. */
.app-header {
  background: var(--yc-surface);
  border-bottom: 1px solid rgba(0,44,66,0.08);
  padding: 0 var(--yc-sp-5);
  min-height: var(--yc-header-h);
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 10;
  gap: var(--yc-sp-3);
}
/* Back chevron — hidden on / and when history.length <= 1 (rendered
   only when it can go somewhere). 44×44 tap target per d6 spec. */
.app-header-back {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; padding: 0;
  color: var(--yc-fg); cursor: pointer;
  font-size: 20px; line-height: 1;
}
.app-header-back:focus-visible {
  outline: var(--yc-focus); outline-offset: var(--yc-focus-offset);
}
/* Context strip — small padded row above the first content card that
   used to sit inside the (now-removed) client-header. Currently only
   carries the "On Track / Paused / Off Track" status pill on coach
   client screens. d6 2026-09-10. */
.context-strip {
  display: flex; align-items: center;
  padding: var(--yc-sp-3) var(--yc-sp-5) 0;
}
.app-header-title {
  margin: 0;
  font-family: var(--yc-font);
  font-weight: var(--yc-fw-semibold);
  font-size: var(--yc-fs-lg);
  color: var(--yc-fg);
  letter-spacing: -0.01em;
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-header-right { position: relative; }

/* Left cluster: brand mark + page title, sit side by side with 10px gap. */
.app-header-left {
  display: inline-flex; align-items: center; gap: var(--yc-sp-3);
  min-width: 0;
}
.app-header-brand {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
  color: inherit;
  text-decoration: none;
}
.app-header-brand img {
  width: 26px; height: 26px;
  display: block;
  object-fit: contain;
}
.app-header-brand:hover { background: rgba(0, 44, 66, 0.05); }
.app-header-brand:focus-visible {
  outline: var(--yc-focus); outline-offset: var(--yc-focus-offset);
}

.user-pill {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--yc-sp-2);
  background: var(--yc-grey);
  border: 1px solid var(--yc-border);
  border-radius: var(--yc-radius-pill);
  padding: 3px 4px 3px 12px;
  cursor: pointer;
  font: inherit;
}
.user-pill:hover { background: var(--yc-surface); }
.user-pill:focus-visible {
  outline: var(--yc-focus); outline-offset: var(--yc-focus-offset);
}
.user-pill-name {
  font-size: var(--yc-fs-sm);
  font-weight: var(--yc-fw-semibold);
  color: var(--yc-fg);
  max-width: 100px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-pill-dot {
  position: absolute; top: 1px; right: 2px;
  width: 9px; height: 9px; border-radius: 999px;
  background: var(--yc-danger);
  border: 1.5px solid var(--yc-white);
}

.user-drawer {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 240px;
  background: var(--yc-surface);
  border: 1px solid var(--yc-border);
  border-radius: var(--yc-radius-lg);
  padding: 6px;
  box-shadow: 0 20px 40px -18px rgba(0, 44, 66, 0.3),
              0 4px 10px -6px rgba(0, 44, 66, 0.12);
  z-index: 30;
  display: none;
}
.user-drawer.is-open { display: block; }
.user-drawer-head {
  padding: 10px 12px 6px;
  font-size: var(--yc-fs-xs);
  font-weight: var(--yc-fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--yc-fg);
  opacity: 0.6;
}
.user-drawer-row {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--yc-sp-3);
  padding: 10px 12px;
  border-radius: var(--yc-radius);
  background: transparent; border: none;
  font: inherit;
  font-size: var(--yc-fs-sm);
  font-weight: var(--yc-fw-medium);
  color: var(--yc-fg);
  cursor: pointer;
  text-align: left;
}
.user-drawer-row:hover { background: var(--yc-grey); }
.user-drawer-row:focus-visible {
  outline: var(--yc-focus); outline-offset: var(--yc-focus-offset);
}
.user-drawer-row-lbl { display: inline-flex; align-items: center; gap: var(--yc-sp-3); }
.user-drawer-row-icon {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  color: inherit;
}
.user-drawer-row-icon svg { width: 18px; height: 18px; display: block; color: inherit; }
.user-drawer-row-count {
  background: var(--yc-danger); color: var(--yc-white);
  min-width: 20px; height: 18px;
  border-radius: 999px;
  font-size: 10px; font-weight: var(--yc-fw-bold);
  display: inline-grid; place-items: center;
  padding: 0 6px;
}
.user-drawer-row--danger { color: var(--yc-danger); }
.user-drawer-divider {
  border: none; border-top: 1px solid var(--yc-border);
  margin: 4px 0;
}

/* Theme segmented control removed 2026-09-15 (#126) — app is
   light-only; no picker in the account drawer. */

/* ── Impersonation pill ────────────────────────────────────────────────
   Fixed top-right marker sized to match the app-header user-pill so it
   sits on the app as a peer control, not a banner. Same padding, same
   font, same hairline border. The orange dot + Exit chip keep it
   distinguishable as an admin-mode marker. */
/* Full-width impersonation banner per STYLE.md §5 (UX-5 2026-09-10).
   Sits under the sticky app-header, itself sticky so it stays on
   screen as the page scrolls — a superadmin acting as another user
   must NEVER lose sight of this. */
.imp-banner {
  position: sticky;
  top: var(--yc-header-h, 56px);
  z-index: 9;
  background: var(--yc-orange);
  color: var(--yc-fg);
  border-bottom: 1px solid rgba(0, 44, 66, 0.15);
  font-family: var(--yc-font);
  font-weight: var(--yc-fw-semibold);
}
.imp-banner__inner {
  max-width: 1024px;
  margin: 0 auto;
  padding: var(--yc-sp-2) var(--yc-sp-5);
  display: flex; align-items: center; gap: var(--yc-sp-3);
}
.imp-banner__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--yc-body);
  flex-shrink: 0;
}
.imp-banner__label {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--yc-fs-sm);
}
.imp-banner__exit {
  background: var(--yc-body);
  color: var(--yc-white);
  border: 0;
  padding: 6px 14px;
  border-radius: var(--yc-radius-pill);
  font: inherit;
  font-size: var(--yc-fs-xs);
  font-weight: var(--yc-fw-bold);
  cursor: pointer;
  flex-shrink: 0;
}
.imp-banner__exit:hover { background: rgba(0, 44, 66, 0.85); }
.imp-banner__exit:focus-visible {
  outline: var(--yc-focus); outline-offset: var(--yc-focus-offset);
}

.imp-pill {
  position: fixed;
  /* Sit below the app-header line (48-56px tall) so we don't collide
     with the user-pill during impersonation. On pages without the
     app-header (coach client screens) it just floats a bit further
     down from the top, which is fine visually. */
  top: 56px;
  right: var(--yc-sp-2);
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: var(--yc-sp-2);
  padding: 3px 4px 3px 12px;
  background: var(--yc-grey);
  color: var(--yc-fg);
  border: 1px solid var(--yc-border);
  border-radius: var(--yc-radius-pill);
  font-size: var(--yc-fs-sm);
  font-weight: var(--yc-fw-semibold);
  max-width: min(80vw, 260px);
}
.imp-pill__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--yc-orange);
  flex-shrink: 0;
}
.imp-pill__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.imp-pill__exit {
  background: var(--yc-orange);
  color: var(--yc-fg);
  border: none;
  padding: 2px 10px;
  border-radius: var(--yc-radius-pill);
  font-weight: var(--yc-fw-bold);
  font-size: var(--yc-fs-xs);
  cursor: pointer;
}
/* NOTE: earlier revision hid .user-pill during impersonation on the
   assumption that state.me would still be the admin. It's not — the
   pill shows the IMPERSONATED user (Sarah / Alex), which is what the
   drawer targets. Hiding it made the drawer unreachable in
   impersonation mode. The two pills are stacked at top-right; the
   imp-pill sits above the user-pill via its higher z-index. */

/* Label always shows — knowing WHO is being impersonated matters more
   than saving a few px in the corner, even on narrow phones. Layout
   below adjusts the client-header padding accordingly. */

/* ── Marketing landing (unauth "/") ─────────────────────────────────────
   Mobile-first landing served to first-time visitors before /register or
   /login. Warm off-white ground with brand teal accents; Fraunces for the
   editorial hero + section headings, Inter for everything else. Sticky
   bottom CTA bar so the sign-up path is always in thumb reach. */
.market {
  --market-bg: #F6F3EC;
  --market-bg-alt: #EFEAE0;
  --market-hair: #E4DFD1;
  --market-ink: var(--yc-body);
  --market-ink-mute: #55585C;
  --market-serif: "Fraunces", "Iowan Old Style", "Palatino", Georgia, serif;

  flex: 1;
  min-height: 100vh;
  background: var(--market-bg);
  color: var(--market-ink);
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  font-family: var(--yc-font);
}
.market a { color: inherit; text-decoration: none; }

.market-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px;
  background: transparent;
  border-bottom: 1px solid transparent;
}
.market-brand { display: inline-flex; align-items: center; line-height: 0; }
.market-brand img { height: 28px; width: auto; }
.market-login {
  font-size: 14px; font-weight: 600; color: var(--yc-teal-dark);
  padding: 6px 4px;
}
/* Mo #93: promote the top-right Log in to a bordered white pill so
   it reads as a button, not plain text. Same treatment previously
   only applied at ≥960px — now the default at every width. */
.market-login--pill {
  padding: 8px 16px;
  border: 1px solid var(--market-hair);
  border-radius: var(--yc-radius-pill);
  background: var(--yc-surface);
}
.market-login--pill:hover { border-color: var(--market-ink); }

.market-hero { padding: 24px 24px 28px; }
.market-kicker {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--yc-teal-dark); font-weight: 700;
  margin-bottom: 12px;
}
.market-h1 {
  font-family: var(--market-serif); font-weight: 500;
  font-size: 40px; line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 14px; text-wrap: balance;
}
.market-h1 em {
  font-style: italic; font-weight: 400; color: var(--yc-teal-dark);
}
.market-sub {
  font-size: 15.5px; line-height: 1.5; color: var(--market-ink-mute);
  margin: 0 0 22px;
}

/* Role toggle — swaps the CTAs so the sign-up form arrives pre-selected. */
.market-role {
  position: relative;
  background: var(--yc-surface);
  border: 1px solid var(--market-hair);
  border-radius: var(--yc-radius-pill);
  padding: 4px;
  display: grid; grid-template-columns: 1fr 1fr;
  margin-bottom: 12px;
  box-shadow: 0 4px 12px -8px rgba(0, 44, 66, 0.15);
}
.market-role-slider {
  position: absolute; top: 4px; bottom: 4px; left: 4px;
  width: calc(50% - 4px);
  background: var(--yc-teal);
  border-radius: var(--yc-radius-pill);
  transition: transform 220ms cubic-bezier(0.3, 0, 0, 1),
              background-color 220ms ease;
  box-shadow: 0 4px 10px -4px rgba(32, 128, 159, 0.4);
  pointer-events: none;
}
.market-role[data-role="coach"] .market-role-slider {
  transform: translateX(100%);
  background: var(--yc-teal-dark);
}
.market-role-opt {
  position: relative; z-index: 1;
  background: none; border: none; cursor: pointer;
  padding: 10px 12px;
  font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--market-ink-mute);
  transition: color 180ms ease;
}
.market-role-opt.is-active { color: var(--yc-white); }
.market-role-opt:focus-visible {
  outline: var(--yc-focus); outline-offset: 2px;
  border-radius: var(--yc-radius-pill);
}
.market-role-note {
  display: block; margin: 0 0 20px;
  font-size: 12.5px; color: var(--market-ink-mute); line-height: 1.45;
}
.market-role-note b { color: var(--market-ink); font-weight: 600; }

.market-cta {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--yc-orange); color: var(--market-ink);
  padding: 14px 22px; border-radius: 12px;
  font-weight: 700; font-size: 15px;
  box-shadow: 0 8px 16px -8px rgba(255, 173, 22, 0.5);
}
.market-cta:focus-visible {
  outline: var(--yc-focus); outline-offset: 2px;
}
.market-fine {
  display: block; margin-top: 10px;
  font-size: 12.5px; color: var(--market-ink-mute);
}

/* Preview card — teal card with a routine + coach ping, real-looking. */
.market-preview {
  margin: 8px 20px 32px;
  background: var(--yc-teal);
  border-radius: 24px;
  padding: 20px 18px 18px;
  color: var(--yc-white);
  box-shadow: 0 20px 40px -20px rgba(32, 128, 159, 0.4);
  position: relative;
  overflow: hidden;
}
.market-preview::after {
  content: ""; position: absolute; right: -60px; top: -60px;
  width: 180px; height: 180px; border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 173, 22, 0.25), transparent 70%);
  pointer-events: none;
}
.market-preview-hi {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  opacity: 0.85; margin-bottom: 4px;
}
.market-preview-day {
  font-family: var(--market-serif); font-weight: 500; font-size: 20px;
  line-height: 1.2; margin-bottom: 16px;
}
.market-today {
  background: var(--yc-surface); color: var(--market-ink);
  border-radius: 16px; padding: 14px 16px;
  box-shadow: 0 8px 20px -12px rgba(0, 44, 66, 0.3);
}
.market-today-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px;
}
.market-today-lbl { font-family: var(--market-serif); font-weight: 500; font-size: 14px; }
.market-today-streak {
  font-size: 10.5px; font-weight: 700; color: var(--yc-orange);
  letter-spacing: 0.05em;
}
.market-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; font-size: 13px;
  border-top: 1px solid #EEF2F5;
}
.market-row:first-of-type { border-top: none; }
.market-check {
  width: 16px; height: 16px; border-radius: 999px;
  border: 1.5px solid var(--yc-teal);
  color: var(--yc-white);
  font-size: 10px; font-weight: 900;
  display: grid; place-items: center;
  flex-shrink: 0; line-height: 1;
}
.market-row.is-done .market-check {
  background: var(--yc-teal); border-color: var(--yc-teal);
}
.market-row:not(.is-done) .market-check { color: transparent; }
.market-row.is-done .market-label {
  text-decoration: line-through; color: #7C8B94;
}
.market-label { flex: 1; font-weight: 500; }
.market-time {
  font-size: 11px; color: #7C8B94;
  font-variant-numeric: tabular-nums;
}
.market-ping {
  margin-top: 12px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px; padding: 10px 12px;
  display: flex; gap: 10px; align-items: flex-start;
}
.market-ping-av {
  width: 26px; height: 26px; border-radius: 999px;
  background: linear-gradient(135deg, #FFE0A6, #FF9F5C);
  color: var(--market-ink);
  font-weight: 700; font-size: 12px;
  display: grid; place-items: center; flex-shrink: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
}
.market-ping-name { font-size: 10.5px; font-weight: 600; opacity: 0.9; }
.market-ping-msg { font-size: 12.5px; line-height: 1.4; margin-top: 1px; }

/* Features — three rows, icon + one paragraph. */
.market-feats {
  padding: 4px 24px 28px;
  display: flex; flex-direction: column; gap: 20px;
}
.market-feat {
  display: grid; grid-template-columns: 44px 1fr; gap: 16px;
  align-items: flex-start;
}
.market-feat-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--market-bg-alt);
  color: var(--yc-teal-dark);
  display: grid; place-items: center;
  flex-shrink: 0; font-size: 20px;
}
.market-feat-h {
  font-family: var(--market-serif); font-weight: 500; font-size: 17px;
  line-height: 1.15; margin: 3px 0 4px;
  letter-spacing: -0.005em;
}
.market-feat-body {
  font-size: 13.5px; color: var(--market-ink-mute); line-height: 1.5;
  margin: 0;
}

/* Coach mini-band — dark teal contrast section. */
.market-coach-band {
  margin: 8px 20px 28px;
  background: var(--yc-teal-dark);
  color: var(--yc-white);
  border-radius: 20px;
  padding: 24px 22px;
}
.market-coach-k {
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--yc-orange); font-weight: 700; margin-bottom: 10px;
}
.market-coach-h {
  font-family: var(--market-serif); font-weight: 500; font-size: 22px;
  line-height: 1.15; margin: 0 0 8px; text-wrap: balance;
}
.market-coach-h em { font-style: italic; color: var(--yc-orange); font-weight: 400; }
.market-coach-p {
  font-size: 13.5px; line-height: 1.5;
  color: rgba(255, 255, 255, 0.85); margin: 0 0 16px;
}
.market-coach-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 700; color: var(--yc-orange);
  border-bottom: 1px solid rgba(255, 173, 22, 0.4);
  padding-bottom: 2px;
}

/* Testimonial. */
.market-quote {
  padding: 8px 32px 32px; text-align: center;
}
.market-quote blockquote {
  font-family: var(--market-serif); font-weight: 400; font-style: italic;
  font-size: 20px; line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 12px; text-wrap: balance;
  color: var(--market-ink);
}
.market-quote blockquote::before { content: "\201C"; color: var(--yc-teal); margin-right: 2px; }
.market-quote blockquote::after  { content: "\201D"; color: var(--yc-teal); margin-left: 2px; }
.market-attr {
  font-size: 12px; color: var(--market-ink-mute); letter-spacing: 0.06em;
  text-transform: uppercase; font-weight: 600;
}
.market-attr b { color: var(--market-ink); font-weight: 600; text-transform: none; letter-spacing: 0.01em; font-size: 13px; }

.market-footer {
  padding: 20px 24px 32px;
  border-top: 1px solid var(--market-hair);
  font-size: 12px; color: var(--market-ink-mute);
  display: flex; flex-direction: column; gap: 10px;
}
.market-footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.market-footer-links a { color: var(--market-ink-mute); }
.market-footer-links a:hover { color: var(--market-ink); }
.market-footer-made { font-size: 11px; opacity: 0.7; }

/* Tablet — cap the reading column, keep the single-column stack. */
@media (min-width: 640px) and (max-width: 959px) {
  .market > * { max-width: 560px; margin-left: auto; margin-right: auto; }
  .market-top { max-width: none; padding-left: 32px; padding-right: 32px; }
  .market-top-inner { max-width: 560px; margin: 0 auto; display: flex;
                      align-items: center; justify-content: space-between; }
}

/* Desktop — two-column hero (copy left, phone-preview right), wider
   max-width, larger type, feature grid, sticky bottom bar hidden. */
@media (min-width: 960px) {
  .market {
    max-width: 1160px;
    margin: 0 auto;
    padding-bottom: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    column-gap: 40px;
  }
  .market > * {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    grid-column: 1 / -1;
  }

  /* Top bar spans full width, its inner row is aligned edge-to-edge.
     Static — it scrolls off with the page (no more floating logo). */
  .market-top {
    padding: 20px 40px;
    background: transparent;
  }
  .market-brand img { height: 34px; }
  .market-login--pill { font-size: 15px; padding: 10px 18px; }

  /* Hero + preview share a row — hero on the left, preview on the right. */
  .market-hero {
    grid-column: 1;
    padding: 64px 24px 48px 40px;
    align-self: center;
    max-width: 640px;
  }
  .market-kicker { font-size: 13px; margin-bottom: 16px; }
  .market-h1 { font-size: 68px; line-height: 1.02; margin-bottom: 20px; }
  .market-sub { font-size: 18px; line-height: 1.55; margin-bottom: 28px; max-width: 520px; }
  .market-role { max-width: 380px; }
  .market-role-opt { padding: 12px 16px; font-size: 14.5px; }
  .market-role-note { font-size: 14px; margin-bottom: 28px; max-width: 480px; }
  .market-cta { padding: 16px 28px; font-size: 16px; }
  .market-fine { font-size: 13px; margin-top: 14px; }

  .market-preview {
    grid-column: 2;
    align-self: center;
    margin: 48px 40px 48px 0;
    max-width: 460px;
    justify-self: end;
    width: 100%;
  }

  /* Everything below the hero fold spans full width again. */
  .market-feats {
    grid-column: 1 / -1;
    padding: 56px 40px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 32px;
    row-gap: 32px;
    max-width: none;
  }
  .market-feat { padding: 0; }
  .market-feat-h { font-size: 20px; }
  .market-feat-body { font-size: 15px; }

  .market-coach-band { grid-column: 1 / -1; padding: 64px 40px; }
  .market-coach-h { font-size: 40px; }
  .market-coach-p { font-size: 17px; max-width: 640px; }

  .market-quote { grid-column: 1 / -1; padding: 40px 40px 64px; max-width: 720px; margin: 0 auto; }
  .market-quote blockquote { font-size: 22px; line-height: 1.4; }

  .market-footer { grid-column: 1 / -1; padding: 32px 40px; }
}

/* Extra headroom on very wide screens so the hero doesn't feel cramped. */
@media (min-width: 1280px) {
  .market-h1 { font-size: 76px; }
  .market-hero { padding-left: 56px; }
}

/* Role picker on /register — small segmented control matching the marketing
   toggle so the choice made on the landing is echoed here. */
.role-seg {
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--yc-radius-pill);
  padding: 4px;
  display: flex; align-items: center; gap: 8px;
}
.role-seg-wrap { display: flex; align-items: center; gap: 10px; width: 100%; padding-left: 10px; }
.role-seg-label {
  font-size: 0.8rem; font-weight: 600; color: var(--yc-white);
  opacity: 0.9;
}
.role-seg-buttons {
  margin-left: auto;
  background: rgba(255,255,255,0.16);
  border-radius: var(--yc-radius-pill);
  padding: 3px;
  display: flex;
}
.role-seg-opt {
  background: none; border: none; cursor: pointer;
  padding: 7px 14px;
  font: inherit; font-size: 0.82rem; font-weight: 600;
  color: var(--yc-white); opacity: 0.75;
  border-radius: var(--yc-radius-pill);
  transition: background 160ms ease, color 160ms ease, opacity 160ms ease;
}
.role-seg-opt.is-active {
  background: var(--yc-surface); color: var(--yc-teal-dark);
  opacity: 1;
}
.role-seg-opt:focus-visible {
  outline: var(--yc-focus); outline-offset: 2px;
}

/* .btn-outline retained here — still used by /reset-done etc. */
.btn-outline {
  background: transparent;
  border: 2px solid currentColor;
  color: var(--yc-teal-dark);
}

/* ── Auth screens (Figma: white top, teal rounded card at bottom) ──────── */
.auth-screen {
  flex: 1;
  background: var(--yc-surface);
  color: var(--yc-fg);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0 0;
  min-height: 100vh;
}

/* Wrap the img so it's a real link home; no underline / no offset from
   the default anchor styling. */
.brand-link {
  display: inline-block;
  line-height: 0;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.brand-logo {
  display: block;
  /* Figma "1.2 Register" — logo sits in a taller white top area,
     visibly bigger than the 88px we had. Bumped to 112px so the mark
     reads as the focal point of the top slab. */
  margin: 64px auto 32px;
  height: 112px;
  width: auto;
}
/* Auth screens center the logo — the wrapping link centers with it. */
.auth-screen > .brand-link {
  display: block;
  margin: 0 auto;
}
.app-header-logo {
  height: 32px;
  width: auto;
}

.auth-card {
  width: 100%;
  max-width: 480px;
  margin-top: auto;
  background: var(--yc-teal);
  /* Figma "1.2 Register" — card top radius is subtler (24px, not 32px)
     and the top padding is a touch more generous. */
  border-radius: 24px 24px 0 0;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

.auth-title {
  color: var(--yc-white);
  /* Figma title is closer to 1.5rem at a medium (500) weight — lighter
     than the display-y 1.8/600 we had. */
  font-size: 1.5rem;
  font-weight: 500;
  text-align: center;
  margin: 4px 0 8px;
}
.auth-hint {
  color: var(--yc-white);
  opacity: 0.95;
  text-align: center;
  margin: 0 auto 16px;
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: 30ch;
}

.pill-input {
  background: var(--yc-surface);
  border: none;
  border-radius: var(--yc-radius-pill);
  padding: 14px 22px;
  font-size: 1rem;
  color: var(--yc-fg);
  width: 100%;
  font-family: inherit;
  outline: none;
}
.pill-input:focus {
  box-shadow: 0 0 0 2px var(--yc-orange);
}
.pill-input::placeholder { color: var(--yc-fg-muted); }
/* #135 (2026-09-15) — a chevron-down glyph replaces the browser's
   native select arrow so the goal-form + role selects match the app's
   icon vocabulary. Scoped to `select.pill-input` so text inputs and
   textareas that share the class stay clean. Data URI stroke is
   `--yc-body` (#002C42); the extra right padding keeps the option
   text clear of the glyph. */
select.pill-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23002C42' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--yc-sp-4) center;
  background-size: 14px;
  padding-right: calc(var(--yc-sp-4) * 2 + 14px);
}
select.pill-input::-ms-expand { display: none; }

.remember {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--yc-white);
  font-size: 0.9rem;
  padding: 2px 4px;
}
.remember input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border: 2px solid var(--yc-white);
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.remember input[type=checkbox]:checked::after {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--yc-surface);
}

.btn {
  border: none;
  padding: 14px 20px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  border-radius: var(--yc-radius);
  /* Anchors wearing .btn inherit the default underline otherwise — reads
     as a broken link on the reminders empty-state pill (UX-3, Quinn audit). */
  text-decoration: none;
}
.btn-pill { border-radius: var(--yc-radius-pill); }
.btn-primary {
  background: var(--yc-orange);
  color: var(--yc-white);
}
.btn-primary:disabled { opacity: 0.55; cursor: wait; }

.forgot {
  color: var(--yc-white);
  text-align: center;
  font-size: 0.9rem;
  text-decoration: none;
  margin-top: -2px;
}
.forgot:hover { text-decoration: underline; }

.auth-divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.35);
  margin: 14px 4px 4px;
}

.auth-swap {
  color: var(--yc-white);
  text-align: center;
  font-size: 0.9rem;
  margin-top: auto;
  padding-top: 12px;
}
.auth-swap a { color: var(--yc-white); text-decoration: underline; font-weight: 600; }

/* Form-level error banner (top of a form, backend/link-state errors). */
.form-error {
  background: rgba(255, 200, 200, 0.95);
  color: #700;
  border-radius: var(--yc-radius);
  padding: 10px 14px;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 6px;
}
.form-error .icon svg { display: block; }

/* Field-level inline validation (one error under the specific input). */
.field-wrap { display: flex; flex-direction: column; gap: 4px; }
.field-error {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 12px 0;
  color: #b91c1c;
  font-size: 0.8rem;
  line-height: 1.3;
}
.field-error .icon svg { display: block; flex-shrink: 0; }
.pill-input.has-error,
.pill-input--light.has-error {
  box-shadow: 0 0 0 2px #ef4444;
}

/* Lucide icon container — inline flex so it sits on the text baseline. */
.icon { display: inline-flex; line-height: 0; }
.icon svg { display: block; }

/* ── App/home + admin surfaces ─────────────────────────────────────────── */
.page {
  flex: 1;
  padding: 24px 20px;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}
.page h2 { margin-top: 0; }

.card {
  background: var(--yc-surface);
  border-radius: var(--yc-radius-lg);
  box-shadow: var(--yc-shadow-sm);
  padding: 20px;
  margin-bottom: 16px;
}

.users-table {
  width: 100%;
  border-collapse: collapse;
}
.users-table th, .users-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,44,66,0.06);
  font-size: 0.95rem;
}
.users-table th { background: var(--yc-grey); font-weight: 600; }
.role-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--yc-teal);
  color: var(--yc-white);
}
.role-pill.superadmin { background: var(--yc-body); }
.role-pill.coach { background: var(--yc-teal-dark); }
.role-pill.client { background: var(--yc-teal-medium); }

.btn-imp {
  background: var(--yc-orange);
  color: var(--yc-fg);
  border: none;
  padding: 6px 12px;
  border-radius: var(--yc-radius);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}
.btn-imp:disabled { background: rgba(0,0,0,0.05); color: rgba(0,0,0,0.4); cursor: not-allowed; }

.filters {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.filters input, .filters select {
  padding: 8px 12px;
  border-radius: var(--yc-radius);
  border: 1px solid rgba(0,44,66,0.15);
  font-family: inherit;
  font-size: 0.9rem;
}

/* Admin → Users listing. Card-per-user replaces the old <table> so the
   name/email/role each get their own line on mobile without horizontal
   scroll. Scales up to a comfortable single column on desktop. */
.admin-users__head {
  display: flex;
  align-items: center;
  /* Was space-between when the head carried the Users h2 too. Now
     it's just the + Add coach button; push it right (CSP #89 sweep
     — my earlier inline style="justify-content:flex-end" was silently
     stripped by style-src 'self'). */
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 12px;
}
.admin-users__head h2 { margin: 0; }
.admin-users__add { padding: 8px 16px; }
.admin-users__filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.admin-users__search,
.admin-users__role {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--yc-radius);
  border: 1px solid rgba(0,44,66,0.15);
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--yc-surface);
}
@media (min-width: 560px) {
  .admin-users__filters {
    grid-template-columns: 1fr 200px;
  }
}
.admin-users__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.user-card {
  background: var(--yc-surface);
  border: 1px solid var(--yc-border);
  border-radius: var(--yc-radius-lg);
  box-shadow: var(--yc-shadow-sm);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.user-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.user-card__id {
  flex: 1 1 200px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.user-card__name {
  font-weight: 600;
  color: var(--yc-fg);
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-card__email {
  color: var(--yc-fg-muted);
  font-size: 0.9rem;
  word-break: break-all;
}
.user-card__action { align-self: stretch; }
.user-card__meta {
  color: var(--yc-fg-muted);
  font-size: 0.85rem;
  font-style: italic;
}
@media (min-width: 560px) {
  .user-card { flex-direction: row; align-items: center; }
  .user-card__head { flex: 1; }
  .user-card__action { align-self: auto; min-width: 140px; }
}

/* ── Dev mailbox viewer ────────────────────────────────────────────────── */
.app-header-nav { display: flex; align-items: center; gap: 10px; }
.app-header-nav a { color: var(--yc-fg); text-decoration: none; font-size: 0.9rem; padding: 6px 10px; border-radius: var(--yc-radius); }
.app-header-nav a:hover { background: rgba(0,44,66,0.06); }

.mail-card { display: flex; flex-direction: column; gap: 8px; }
.mail-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.mail-to { font-size: 0.85rem; }
.mail-links { display: flex; flex-wrap: wrap; gap: 8px; }
.mail-link { padding: 8px 16px; font-size: 0.85rem; text-decoration: none; display: inline-block; }
.mail-preview { width: 100%; min-height: 300px; border: 1px solid rgba(0,44,66,0.15); border-radius: var(--yc-radius); background: var(--yc-surface); }
.mail-text { background: var(--yc-grey); padding: 12px; border-radius: var(--yc-radius); overflow-x: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem; }

/* Password field with an eye toggle — used on /reset/:token per Figma
   1.5. Label sits above; input + eye button live in a positioned wrap
   so the button rides on the right edge of the pill. */
.pw-group { display: flex; flex-direction: column; gap: 6px; }
/* Space out every stacked child of the reset form — pw-group blocks +
   the Change Password button — so the CTA doesn't kiss the second
   password field. */
.auth-card--light form { display: flex; flex-direction: column; gap: 14px; }
.auth-card--light form .btn { margin-top: 8px; }
.pw-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--yc-fg);
  padding: 0 4px;
}
.pw-req { color: var(--yc-danger, #D44A4A); margin-left: 2px; }
.pw-input-wrap { position: relative; display: block; }
.pw-input-wrap .pill-input { padding-right: 44px; }
.pw-eye {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--yc-fg-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.pw-eye:hover { color: var(--yc-fg); background: rgba(0, 44, 66, 0.04); }
.pw-eye:focus-visible { outline: 2px solid var(--yc-teal-dark); outline-offset: 2px; }

/* ── Reset password (light variant of auth card + fact list) ──────────── */
.auth-card--light {
  background: var(--yc-surface);
  color: var(--yc-fg);
  border-radius: var(--yc-radius-lg) var(--yc-radius-lg) 0 0;
  box-shadow: 0 -6px 20px rgba(0,44,66,0.06);
}
.auth-title--dark { color: var(--yc-fg); }
.auth-hint--dark  { color: var(--yc-fg-muted); }

.reset-sent-to {
  color: var(--yc-white);
  text-align: center;
  font-size: 0.95rem;
  margin: -4px 0 8px;
}
/* Reset-sent info panel — darker-teal sub-card grouping the email +
   expiry + security bullet points. Matches Figma 2616:521. */
.reset-info {
  background: rgba(0, 44, 66, 0.15);
  border-radius: 16px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--yc-white);
  font-size: 0.9rem;
  text-align: center;
  margin: 4px 0;
}
.reset-info__row { line-height: 1.4; }
.reset-info__email {
  display: block;
  /* Dark teal for the address text (#110 — orange-on-grey failed
     contrast; matches the app's dark-on-grey pattern). Leaves the
     surrounding "Link expires…" / "Secure password reset" rows and
     any brand-primary use of --yc-orange elsewhere unchanged. */
  color: var(--yc-teal-dark);
  font-weight: 600;
  margin-top: 2px;
  word-break: break-all;
}
.reset-done-check {
  align-self: center;
  background: var(--yc-orange);
  color: var(--yc-white);
  width: 64px; height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 2rem;
  font-weight: 700;
  margin: 4px 0 8px;
}

/* ── Invite accept — white top slab, teal body, white invite card ─────── */
.invite-screen {
  flex: 1;
  min-height: 100vh;
  background: var(--yc-teal);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.invite-top--brand {
  background: var(--yc-surface);
  padding: 40px 24px 32px;
  display: flex;
  justify-content: center;
}
.invite-logo { height: auto; width: min(60%, 220px); margin: 0; }
.invite-body {
  flex: 1;
  padding: 40px 20px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
}
.invite-card--intro {
  background: var(--yc-surface);
  color: var(--yc-fg);
  border-radius: var(--yc-radius-lg);
  padding: 28px 24px 24px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  box-shadow: 0 10px 30px rgba(0, 44, 66, 0.12);
}
.invite-card__title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--yc-fg);
  margin: 0;
  text-align: center;
}
.invite-card__body {
  margin: 0;
  color: var(--yc-fg-muted);
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: center;
}
.invite-coach-row {
  background: rgba(0, 44, 66, 0.04);
  border-radius: var(--yc-radius);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.invite-coach-row__meta { min-width: 0; }
.invite-coach-row__name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--yc-fg);
  line-height: 1.25;
}
.invite-coach-row__title {
  font-size: 0.85rem;
  color: var(--yc-teal-dark);
  margin-top: 2px;
}
.invite-cta { padding: 14px 20px; text-align: center; }
.invite-decline {
  color: var(--yc-white);
  text-decoration: underline;
  font-size: 0.95rem;
  padding: 4px 0;
}
.invite-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.invite-back {
  align-self: flex-start;
  margin-top: 4px;
  color: var(--yc-teal-dark);
  text-decoration: none;
  font-size: 0.9rem;
}

/* Circle avatar — image or initial, used on invite screens (and later
   client / coach lists). Size set inline; palette + letter are picked
   from the name in avatar() so re-renders stay stable. */
.avatar {
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  overflow: hidden;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}
.avatar__img { width: 100%; height: 100%; object-fit: cover; display: block; }

.invite-notice {
  padding: 40px 24px;
  text-align: center;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  color: var(--yc-white);
}

/* Coach invite list */
.invite-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.invite-status { text-transform: capitalize; }
.invite-status-pending { background: var(--yc-orange); color: var(--yc-fg); }
.invite-status-accepted { background: var(--yc-teal-dark); }
.invite-status-expired { background: #999; }

/* ── Routines (client home) ────────────────────────────────────────────── */
.routines { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.routine-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 4px;
}
.routine-head h3 { margin: 0; font-size: 1.1rem; }
.routine-actions { display: flex; gap: 8px; }
.routine-steps { margin: 8px 0 0; padding-left: 18px; }
.routine-steps li { margin: 4px 0; }
.muted { color: var(--yc-fg-muted); }
.btn-link {
  background: none; border: none; padding: 4px 8px; cursor: pointer;
  color: var(--yc-teal-dark); font-weight: 600; font-family: inherit; font-size: 0.9rem;
}
.btn-link.btn-danger { color: #c02626; }

.routine-editor { display: flex; flex-direction: column; gap: 10px; }
.pill-input--light {
  border: 1px solid rgba(0,44,66,0.15);
  background: var(--yc-surface);
  color: var(--yc-fg);
}
.steps-wrap { display: flex; flex-direction: column; gap: 8px; }
.step-row { display: flex; gap: 8px; align-items: center; }
.step-row .pill-input { flex: 1; }
.editor-ctas { display: flex; gap: 8px; margin-top: 4px; }
.editor-ctas .btn { flex: 1; }
.editor-ctas .btn-outline { color: var(--yc-fg); border-color: var(--yc-fg-subtle); }

.notice {
  background: var(--yc-teal);
  color: var(--yc-white);
  padding: 12px 16px;
  border-radius: var(--yc-radius);
  margin: 12px 0;
  font-size: 0.9rem;
  word-break: break-all;
}

/* ── Home landing (morning + evening) ─────────────────────────────────── */
.home-page {
  flex: 1;
  padding: var(--yc-sp-4) var(--yc-sp-4) calc(var(--yc-nav-h) + var(--yc-sp-4));
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--yc-sp-4);
}

.hero {
  border-radius: var(--yc-radius-hero);
  padding: var(--yc-sp-4) var(--yc-sp-5);
  color: var(--yc-hero-fg);
  min-height: var(--yc-hero-min-h);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--yc-sp-2);
  position: relative;
  overflow: hidden;
}
/* Hero fills the card with the time-of-day illustration; a soft gradient
   sits between the image and the text so the greeting stays legible on
   both the bright day sky and the darker night one. */
/* New atmospheric hero art (Figma 4526:2116) — the images already carry
   their own colour story (warm sunrise / moonlit night), so we only
   layer a light dark gradient for text contrast. No teal/blue overlay
   this time. */
.hero--morning {
  /* Sky-blue welcome art (2026-09-08). The day.png drop is already the
     right hue on its own; the very light wash just deepens the top edge
     so the white "Good morning" text keeps its contrast. */
  background-color: #84C3E3;
  background-image:
    linear-gradient(180deg,
      rgba(0, 44, 66, 0.10) 0%,
      rgba(0, 44, 66, 0)   45%,
      rgba(0, 44, 66, 0.15) 100%),
    url("/img/routine_hero/day_overlay.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--yc-white);
}
.hero--evening,
.hero--night {
  /* Night-sky welcome art (2026-09-08). Matches the day_overlay pattern
     — the illustration carries the palette, the wash only anchors the
     white greeting text. */
  background-color: #17264A;
  background-image:
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.15) 0%,
      rgba(0, 0, 0, 0)   45%,
      rgba(0, 0, 0, 0.25) 100%),
    url("/img/routine_hero/night_overlay.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--yc-white);
}
.hero-greeting {
  font-size: var(--yc-fs-xl);
  font-weight: var(--yc-fw-bold);
  margin: 0;
  line-height: var(--yc-lh-tight);
  text-shadow: 0 1px 3px rgba(0, 44, 66, 0.35);
}
.hero-meta {
  font-size: var(--yc-fs-sm);
  opacity: 0.95;
  margin: 0;
  text-shadow: 0 1px 2px rgba(0, 44, 66, 0.35);
}
/* The small corner illustration was the old design — day/night now fill
   the whole card, so this img is redundant. Kept in the DOM (owned by
   the home Web Component) but visually suppressed. */
.hero-illustration { display: none; }

/* Weather line under the greeting — text-only pill; the big corner
   .hero-icon carries the condition glyph. Hidden until /api/weather
   resolves so the hero paints without a "loading" flash. */
.hero-weather {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 6px 0 0;
  padding: 3px 12px;
  background: rgba(255, 255, 255, 0.22);
  border-radius: var(--yc-radius-pill);
  font-size: var(--yc-fs-sm);
  color: var(--yc-white);
  /* Text-shadow removed per Jeanndre 2026-09-11 — the pill's
     translucent white bg + blur already provides enough separation
     against the hero art, and the shadow was reading as muddy. */
  text-shadow: none;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.hero-weather-icon { display: inline-flex; line-height: 0; }
.hero-weather-icon svg { display: block; }

/* Tap-to-enable location chip — small, unobtrusive. Sits under the
   weather line when the user hasn't granted or denied geolocation, so
   they can opt in to real-local weather instead of the default city. */
.hero-locate {
  display: inline-flex; align-items: center;
  margin: 6px 0 0;
  padding: 3px 12px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--yc-radius-pill);
  font-size: var(--yc-fs-xs);
  color: var(--yc-white);
  cursor: pointer;
  font-family: inherit;
}
.hero-locate:hover { background: rgba(255, 255, 255, 0.25); }
.hero-locate:disabled { opacity: 0.6; cursor: wait; }

/* Big corner weather glyph (sun / moon / cloud-sun / …) — sits over
   the illustration in the top-right so the hero has an obvious focal
   symbol even before the weather API answers. Yellow sun over the
   morning sky, soft white moon at night. */
.hero-icon {
  position: absolute;
  top: var(--yc-sp-4);
  right: var(--yc-sp-4);
  color: #FFD861;
  filter: drop-shadow(0 2px 4px rgba(0, 44, 66, 0.25));
  pointer-events: none;
}
.hero--evening .hero-icon,
.hero--night .hero-icon {
  color: rgba(255, 255, 255, 0.92);
}
.hero-icon svg { display: block; }

/* ── /welcome — Figma "1.1 Landing" (in-app onboarding splash) ────────
   White top with logo + title/body/dots/arrows, teal card at the bottom
   with the two CTAs. Slide 1 of 5; carousel shell in place, more slides
   fill in when their copy lands. Kept independent of the marketing
   landing at `/`. */
.welcome {
  flex: 1;
  min-height: 100vh;
  background: var(--yc-surface);
  color: var(--yc-fg);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.welcome-top {
  flex: 1;
  padding: 32px 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
}
.welcome-logo {
  width: min(60%, 220px);
  height: auto;
  margin-top: 32px;
}
.welcome-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--yc-fg);
  margin: 24px 0 0;
  line-height: 1.25;
}
.welcome-body {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--yc-teal-dark);
  margin: 0;
  max-width: 34ch;
}
.welcome-dots {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.welcome-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(64, 162, 175, 0.35);
  transition: background 160ms ease;
}
.welcome-dot--active { background: var(--yc-teal-dark); }
.welcome-dot--empty  { background: rgba(64, 162, 175, 0.18); }
.welcome-nav {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 320px;
  margin-top: 4px;
}
.welcome-arrow {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--yc-teal-dark);
  background: var(--yc-surface);
  color: var(--yc-teal-dark);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.welcome-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}
.welcome-card {
  background: var(--yc-teal);
  border-radius: 24px 24px 0 0;
  padding: 24px 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}
.welcome-card .welcome-cta { display: block; text-align: center; text-decoration: none; }
/* Dark-teal Create-an-Account pill; matches the Figma. */
.btn-teal-deep {
  background: var(--yc-teal-dark);
  color: var(--yc-white);
}
.btn-teal-deep:hover { background: #1a6d88; }

/* ── In-app modals (replace native alert/confirm/prompt) ─────────────── */
.yc-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 44, 66, 0.45);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  animation: yc-modal-in 0.14s ease-out;
}
@keyframes yc-modal-in { from { opacity: 0; } to { opacity: 1; } }
.yc-modal {
  background: var(--yc-surface);
  color: var(--yc-fg);
  border-radius: var(--yc-radius-lg);
  box-shadow: var(--yc-shadow-md);
  padding: 24px;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: yc-modal-pop 0.16s ease-out;
}
@keyframes yc-modal-pop {
  from { transform: translateY(6px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0)   scale(1);    opacity: 1; }
}
.yc-modal__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--yc-fg);
  line-height: 1.3;
}
.yc-modal__body {
  margin: 0;
  color: var(--yc-fg-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}
.yc-modal__form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.yc-modal__label {
  font-size: 0.85rem; font-weight: 500;
  color: var(--yc-fg-muted);
  padding: 0 4px;
}
.yc-modal__actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  justify-content: flex-end;
}
.yc-modal__actions .btn { min-width: 96px; }
.yc-modal__textarea {
  width: 100%;
  min-height: 88px;
  padding: 10px 14px;
  border-radius: var(--yc-radius);
  border: 1px solid var(--yc-border);
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--yc-fg);
  background: var(--yc-surface);
  resize: vertical;
  line-height: var(--yc-lh-body);
  box-sizing: border-box;
}
.yc-modal__textarea.has-error { border-color: var(--yc-danger); }
.yc-modal .btn-outline {
  background: transparent;
  color: var(--yc-fg);
  border: 1px solid rgba(0, 44, 66, 0.2);
}
.yc-modal .btn-danger { background: var(--yc-danger, #D44A4A); color: var(--yc-white); }

/* Coach-link request banner (top of client home). One card per pending
   request; a coach's ask sits above the greeting so it's not lost. */
.coach-link-banner {
  background: var(--yc-surface);
  border: 1px solid var(--yc-teal);
  border-radius: var(--yc-radius-lg);
  padding: var(--yc-sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--yc-sp-3);
  box-shadow: var(--yc-shadow-sm);
}
.coach-link-banner__body strong {
  display: block;
  font-size: 1.05rem;
  color: var(--yc-fg);
  margin-bottom: 4px;
}
.coach-link-banner__body p {
  margin: 0;
  color: var(--yc-fg-muted);
  font-size: 0.9rem;
  line-height: 1.4;
}
.coach-link-banner__actions {
  display: flex;
  gap: 8px;
}
.coach-link-banner__actions .btn { flex: 1; padding: 10px 14px; font-size: 0.9rem; }

/* #92 unified empty-state shell (Dez 2026-09-13). One class set used
   by Home / Activities / Journal / Reminders (and Home when the day
   has no routine — the legacy caller). Icon is an outline SVG at
   --yc-empty-icon-size using `currentColor` so the token colour
   drives it; title is Fraunces; body is DM Sans muted; CTA is an
   optional orange pill button below. */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--yc-sp-4);
  padding: var(--yc-sp-6) var(--yc-sp-4);
  max-width: 420px;
  margin: 0 auto;
}
.empty-state__icon {
  width: var(--yc-empty-icon-size);
  height: var(--yc-empty-icon-size);
  color: var(--yc-empty-icon-color);
  display: block;
  flex-shrink: 0;
}
.empty-state__title {
  font-family: var(--yc-empty-title-font);
  font-size: var(--yc-empty-title-size);
  font-weight: var(--yc-empty-title-weight);
  line-height: 1.25;
  color: var(--yc-fg);
  margin: 0;
  max-width: 24ch;
  letter-spacing: -0.01em;
}
.empty-state__body {
  font-family: var(--yc-font, "DM Sans", system-ui, sans-serif);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--yc-empty-body-color);
  margin: 0;
  max-width: var(--yc-empty-body-width);
}
.empty-state__cta {
  margin-top: var(--yc-sp-2);
  padding: var(--yc-sp-3) var(--yc-sp-5);
  border-radius: var(--yc-radius-pill);
  background: var(--yc-orange);
  color: var(--yc-fg);
  font: inherit;
  font-weight: var(--yc-fw-semibold);
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px;
}
.empty-state__cta:focus-visible {
  outline: var(--yc-focus); outline-offset: var(--yc-focus-offset);
}

.routine-card {
  background: var(--yc-surface);
  border-radius: var(--yc-radius-lg);
  box-shadow: var(--yc-shadow-sm);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* Accordion header — the whole clickable target above the panel.
   Contains the hero art, slim progress bar, and the meta/chevron row.
   Native button semantics so keyboard + screen-reader work out of the
   box (aria-expanded on the button, aria-controls → panel id). */
.routine-card__header {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  width: 100%;
  /* Kill the mobile tap flash — Android/iOS synthesise a grey/blue
     highlight on tap for <button>s, which reads as a stutter on the
     accordion. `manipulation` also disables the 300ms delay + double-
     tap zoom that magnifies the effect. Fix for the "hover flash on
     click" reported on prod after 0fc12ba. */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.routine-card__header:focus-visible {
  outline: var(--yc-focus); outline-offset: var(--yc-focus-offset);
}
/* No hover state on touch devices — an @media (hover: hover) gate
   scopes any future hover paint to pointer devices only. Currently no
   :hover rule exists; this stays as a guardrail so a later cosmetic
   tweak doesn't reintroduce the flash. */
@media (hover: none) {
  .routine-card__header:hover { background: transparent; }
}
.routine-card__meta-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--yc-sp-4);
  gap: var(--yc-sp-3);
}
.routine-card__meta--muted { opacity: 0.55; }
.routine-card__meta-row .routine-card__meta {
  margin: var(--yc-sp-3) 0;
}
.routine-card__chevron {
  font-size: 20px; line-height: 1;
  color: var(--yc-fg);
  opacity: 0.55;
  transform: rotate(-90deg);
  transition: transform var(--yc-motion-fast) var(--yc-ease-out),
              opacity var(--yc-motion-fast) var(--yc-ease-out);
  padding: var(--yc-sp-2) 0;
}
.routine-card.is-expanded .routine-card__chevron {
  transform: rotate(0deg);
  opacity: 1;
}
/* Panel — the collapsible region. Collapsed = clipped, expanded =
   opens to a generous max-height so 5-10 step routines fit without a
   scroll. 600px matches the d6 spec. */
.routine-card__panel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height var(--yc-motion-standard) var(--yc-ease-out),
              opacity var(--yc-motion-standard) var(--yc-ease-out);
}
.routine-card.is-expanded .routine-card__panel {
  max-height: 600px;
  opacity: 1;
}
.routine-card__empty {
  margin: var(--yc-sp-4) var(--yc-sp-4) var(--yc-sp-5);
  color: var(--yc-fg-muted);
  font-size: var(--yc-fs-sm);
}
/* Colored hero band tops each routine card — orange sunrise for morning,
   dark moonlit for evening. The <div class="routine-card__hero"> is a
   fixed-height panel with the routine_hero art scaled to cover. */
.routine-card__hero {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--yc-white);
  background-color: var(--yc-orange);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.routine-card--morning .routine-card__hero {
  /* Art now shipped as inline SVG via home.js `_mountHeroArt` (2026-09-11)
     — see plan/home/... The background-color below is a token fallback
     for the ~200ms first-paint window before the SVG fetch resolves. */
  background-color: var(--yc-orange);
}
.routine-card--evening .routine-card__hero {
  /* See sibling comment on --morning. Night-navy fallback matches the
     top stop of routine-evening.svg's sky gradient. */
  background-color: #1F2E5C;
}
/* Inline SVG child scales to the hero box without pushing the DOM
   title / meta / progress rows off — 100% both axes, block layout. */
.routine-card__hero > svg { display: block; width: 100%; height: 100%; }
.routine-card__hero-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: var(--yc-fw-bold);
  color: var(--yc-white);
  text-shadow: 0 1px 4px rgba(0,44,66,0.25);
}
/* .routine-card__title dropped 2026-09-09 — the hero art already labels
   the card in display type, so the duplicate H2 was visual weight for
   no information gain. The <section> now carries the accessible name. */
.routine-card__meta {
  margin: var(--yc-sp-3) var(--yc-sp-4) 0;
  color: var(--yc-fg-muted);
  font-size: var(--yc-fs-sm);
  text-align: left;
}
/* Slim teal progress track that sits under the hero art. Fills as the
   client ticks steps. No text on the bar itself — the meta line below
   carries the "X of Y remaining" caption. */
.routine-card__progress {
  height: 3px;
  background: var(--yc-progress-track, #EDEFF1);
  overflow: hidden;
}
.routine-card__progress-fill {
  height: 100%;
  background: var(--yc-teal);
  transition: width 220ms cubic-bezier(0.3, 0, 0, 1);
}
/* Slot-tinted fills — the default teal blended into the card, so we
   pick a bolder hue per slot. Warm/cool split mirrors the sunrise vs
   moonlit hero art. See STYLE.md §5 for the evening-orange exception:
   this is decorative status, NOT a CTA, and the choice does not spread
   beyond the two routine-card slots. */
.routine-card--morning .routine-card__progress-fill {
  background: var(--yc-teal-dark);
}
.routine-card--evening .routine-card__progress-fill {
  background: var(--yc-orange);
}
.routine-card__steps {
  list-style: none;
  margin: var(--yc-sp-4) 0 0;   /* 16px above the checklist (d6 2026-09-10) */
  /* 16px below the last step so the card doesn't feel cramped when no
     CTA is rendered (activities-only card). When a CTA is present the
     button's own top margin sits above this padding — still legible. */
  padding: 0 var(--yc-sp-4) var(--yc-sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--yc-sp-2);
}
.routine-card__step {
  display: flex;
  align-items: center;
  gap: var(--yc-sp-3);
  font-size: var(--yc-fs-base);
}
.routine-card__step input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px; height: 22px;
  border: 2px solid var(--yc-teal-dark);
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.routine-card__step input[type=checkbox]:checked {
  background: var(--yc-teal-dark);
}
.routine-card__step input[type=checkbox]:checked::after {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--yc-surface);
}
.routine-card__step--done .routine-card__step-label {
  text-decoration: line-through;
  color: var(--yc-fg-subtle);
}
.routine-card__cta {
  /* 8px above the checklist, 16px sides + bottom. */
  margin: var(--yc-sp-2) var(--yc-sp-4) var(--yc-sp-4);
  align-self: flex-start;
  background: var(--yc-teal-dark);
  color: var(--yc-white);
  border: none;
  padding: var(--yc-sp-2) var(--yc-sp-4);
  border-radius: var(--yc-radius-pill);
  font-weight: var(--yc-fw-semibold);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--yc-fs-sm);
}

/* Routine preview banner — the collapsed 'other slot' card that sits
   below the expanded routine (UP NEXT / Morning preview). Same hero art
   as the expanded card at a compact height, no step list. */
.routine-banner-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--yc-sp-2);
}
.routine-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  border-radius: var(--yc-radius-lg);
  box-shadow: var(--yc-shadow-sm);
  cursor: pointer;
  border: none;
  text-align: center;
  font-family: inherit;
  color: var(--yc-white);
  overflow: hidden;
  padding: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Collapsed preview art (2026-09-08). Distinct from the expanded card
   art — the *_Card.png set is composed for the compact 96px banner
   (title larger, illustration cropped tighter). */
.routine-banner--morning {
  background-color: var(--yc-orange);
  background-image:
    linear-gradient(180deg, rgba(0,44,66,0.10) 0%, rgba(0,44,66,0) 55%, rgba(0,44,66,0.20) 100%),
    url("/img/routine_hero/Morning_Card.png");
}
.routine-banner--evening {
  background-color: #1F2E5C;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.25) 100%),
    url("/img/routine_hero/Evening_Card.png");
}
.routine-banner__caption {
  font-size: var(--yc-fs-xs);
  font-weight: var(--yc-fw-semibold);
  letter-spacing: 0.08em;
  color: var(--yc-teal-dark);
  text-transform: uppercase;
  padding: 0 var(--yc-sp-1);
}
.routine-banner__title {
  font-size: 1.15rem;
  font-weight: var(--yc-fw-bold);
  margin: 0;
  color: var(--yc-white);
  text-shadow: 0 1px 4px rgba(0,44,66,0.25);
}

.action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--yc-sp-3);
}
.action-pill {
  padding: var(--yc-sp-3) var(--yc-sp-4);
  border-radius: var(--yc-radius-pill);
  border: 2px solid var(--yc-teal-dark);
  color: var(--yc-teal-dark);
  background: transparent;
  font-weight: var(--yc-fw-semibold);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--yc-fs-sm);
  text-align: center;
}

.bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--yc-nav-h);
  background: var(--yc-surface);
  border-top: 1px solid rgba(0,44,66,0.08);
  /* Distribute N items evenly across the row (2026-09-10). Was
     hardcoded to 4 columns, so the 3-item coach nav packed left and
     the 5-item client nav spilled to a second row. Auto-flow +
     auto-columns keeps everything on one row with equal widths at
     any count. */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  z-index: 5;
}
.bottom-nav__item {
  background: none;
  border: none;
  color: var(--yc-fg-muted);
  font-family: inherit;
  font-size: var(--yc-fs-xs);
  cursor: pointer;
  padding: var(--yc-sp-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  /* Nav items may render as either <button> (old) or <a> (new coach
     thread variant); strip the anchor's default underline either way. */
  text-decoration: none;
}
.bottom-nav__item--active {
  color: var(--yc-teal);
  font-weight: var(--yc-fw-semibold);
}
.bottom-nav__label { line-height: 1; }

/* Icons: SVG files under /img/menu/ used as CSS masks. The colored fill
   comes from `background-color: currentColor`, so the label color and
   the icon color stay in lock-step — inactive slate, active teal. */
.bottom-nav__icon {
  width: 22px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}
.bottom-nav__icon--home     { -webkit-mask-image: url("/img/menu/Home.svg");     mask-image: url("/img/menu/Home.svg"); }
.bottom-nav__icon--activity { -webkit-mask-image: url("/img/menu/activity.svg"); mask-image: url("/img/menu/activity.svg"); }
.bottom-nav__icon--journal  { -webkit-mask-image: url("/img/menu/journal.svg");  mask-image: url("/img/menu/journal.svg"); }
.bottom-nav__icon--reminder {
  -webkit-mask-image: url("/img/menu/reminder.svg"); mask-image: url("/img/menu/reminder.svg");
  /* reminder.svg's glyph carries more internal padding than
     Home/activity/journal, so at the shared 22x22 mask box it reads
     visibly smaller. Bump the box a couple px so the optical weight
     matches its siblings (Jeanndre 2026-09-11). */
  width: 26px; height: 26px;
}
.bottom-nav__icon--clients  { -webkit-mask-image: url("/img/menu/clients.svg");  mask-image: url("/img/menu/clients.svg"); }
.bottom-nav__icon--messages { -webkit-mask-image: url("/img/menu/messages.svg"); mask-image: url("/img/menu/messages.svg"); }
.bottom-nav__icon--you      { -webkit-mask-image: url("/img/menu/you.svg");      mask-image: url("/img/menu/you.svg"); }
/* Coach nav icons (2026-09-08). Progress + Messaging are PNG rasters so
   the mask-mode is set to alpha so the coloured background shows through
   the transparent parts of the artwork. */
.bottom-nav__icon--progress  { -webkit-mask-image: url("/img/menu/Progress.png");  mask-image: url("/img/menu/Progress.png");  -webkit-mask-mode: alpha; mask-mode: alpha; }
.bottom-nav__icon--messaging { -webkit-mask-image: url("/img/menu/messaging.png"); mask-image: url("/img/menu/messaging.png"); -webkit-mask-mode: alpha; mask-mode: alpha; }
.bottom-nav__icon--goals     { -webkit-mask-image: url("/img/menu/Goals.svg");     mask-image: url("/img/menu/Goals.svg"); }
.bottom-nav__icon--profile   { -webkit-mask-image: url("/img/menu/Profile.svg");   mask-image: url("/img/menu/Profile.svg"); }

/* ── Coach home — empty state ─────────────────────────────────────────────
   Mirrors the client home shell (hero + card + action pills + bottom nav)
   so the two roles feel like the same app. Renders when the coach has zero
   invitations; once they invite someone, .empty-card--list takes over. */
.empty-card {
  background: var(--yc-surface);
  border: 1px solid rgba(0, 44, 66, 0.08);
  border-radius: var(--yc-radius-lg);
  padding: 26px 22px 22px;
  text-align: center;
  display: flex; flex-direction: column; gap: 10px;
}
.empty-card__title {
  font-size: var(--yc-fs-lg);
  font-weight: var(--yc-fw-semibold);
  line-height: var(--yc-lh-tight);
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
.empty-card__body {
  font-size: var(--yc-fs-sm);
  color: var(--yc-fg-muted);
  line-height: var(--yc-lh-body);
  margin: 0 0 6px;
  text-wrap: balance;
}
.empty-card__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  align-self: stretch;
  background: var(--yc-teal);
  color: var(--yc-white);
  font-weight: var(--yc-fw-bold);
  font-size: var(--yc-fs-base);
  padding: 14px 20px;
  border-radius: var(--yc-radius-pill);
  border: none; cursor: pointer;
  font-family: inherit;
  box-shadow: 0 8px 18px -10px rgba(32, 128, 159, 0.4);
}
.empty-card__cta:focus-visible {
  outline: var(--yc-focus); outline-offset: 2px;
}
.empty-card__cta--compact {
  align-self: auto;
  padding: 8px 16px;
  font-size: var(--yc-fs-sm);
  box-shadow: none;
}
/* Client-facing Goals empty state (Slice B) — divider + softer secondary
   body under the primary body. Kept tiny so the empty card stays airy. */
.empty-card__divider {
  border: 0;
  border-top: 1px solid var(--yc-border);
  margin: 10px 0 6px;
  width: 100%;
}
.empty-card__body--muted {
  color: var(--yc-fg-subtle);
  font-style: italic;
}

/* When the coach has clients — list view uses the same card wrapper but
   drops centering and swaps the CTA for a compact + Invite in the header. */
.empty-card--list { text-align: left; padding: 20px; }
.clients-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--yc-sp-3);
  margin-bottom: var(--yc-sp-3);
}
.invites {
  display: flex; flex-direction: column;
  gap: var(--yc-sp-2);
}
.invite-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--yc-sp-3);
  padding: var(--yc-sp-3) 0;
  border-top: 1px solid rgba(0, 44, 66, 0.06);
}
.invite-row:first-child { border-top: none; }
.invite-row .muted {
  font-size: var(--yc-fs-sm);
  color: var(--yc-fg-muted);
}
.invite-status {
  font-size: var(--yc-fs-xs);
  padding: 3px 10px;
  border-radius: var(--yc-radius-pill);
  background: rgba(0, 44, 66, 0.08);
  color: var(--yc-fg);
  font-weight: var(--yc-fw-semibold);
}
.invite-status-accepted { background: rgba(137, 191, 108, 0.18); color: #3E7A22; }
.invite-status-pending  { background: rgba(255, 173, 22, 0.16); color: #8A5A00; }
.invite-status-expired  { background: rgba(255, 97, 88, 0.15); color: #A22B23; }
.invite-status-cancelled { background: rgba(0, 44, 66, 0.08); color: var(--yc-fg-muted); }
/* Right-side stack: status pill sits above a Cancel link on pending rows,
   so the row stays scannable and the destructive action never crowds the
   recipient name. */
.invite-row__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--yc-sp-1);
}
.invite-row__kind {
  font-size: var(--yc-fs-xs);
  color: var(--yc-fg-subtle);
  margin-top: 2px;
}

/* ── Activities (coach) ─────────────────────────────────────────────────
   Introduced 2026-09-08 for plan/activities. See STYLE.md §5 for the
   teal-primary exception on <activity-form>. */

.client-header {
  display: flex; align-items: center; gap: var(--yc-sp-3);
  padding: var(--yc-sp-3) var(--yc-sp-5);
  background: var(--yc-surface);
  border-bottom: 1px solid var(--yc-border);
  position: sticky; top: 0; z-index: 10;
}
/* When an .imp-pill is present it floats in the top-right corner over
   every screen. Push the client-header content out of the way so the
   client's name doesn't collide with the pill. */
body:has(.imp-pill) .client-header { padding-right: 220px; }
.client-header__back {
  background: none; border: 0; font-size: 1.4rem;
  color: var(--yc-fg); cursor: pointer;
}
.client-header__name {
  flex: 1; margin: 0;
  font-size: var(--yc-fs-lg); font-weight: var(--yc-fw-semibold);
  color: var(--yc-fg);
}

.status-pill {
  display: inline-flex; align-items: center;
  padding: var(--yc-sp-1) var(--yc-sp-3);
  border-radius: var(--yc-chip-radius);
  font-size: var(--yc-fs-xs); font-weight: var(--yc-fw-semibold);
  background: var(--yc-grey); color: var(--yc-fg);
  /* Nowrap + flex-shrink:0 keeps "On Track" on a single line even when
     the client name wraps to two lines and the impersonating banner
     eats space on the right. */
  white-space: nowrap;
  flex-shrink: 0;
}
.status-pill--on-track  { background: var(--yc-success-soft); color: var(--yc-success); }
.status-pill--off-track { background: var(--yc-danger-soft);  color: var(--yc-danger);  }
.status-pill--paused    { background: var(--yc-grey);         color: var(--yc-fg);    }

/* Activities date ribbon — hybrid compact-tile + swipeable ribbon.
   Replaces the old .date-strip. Month title hoisted to a header row so day
   tiles stop repeating "SEP / 2026". Ribbon scrolls natively (touch, wheel);
   the browser scrollbar is hidden — the ‹ › month arrows and Today jump are
   the explicit controls. Today = orange ring, selected = orange fill;
   two states, one hue, distinct by shape. */
.date-ribbon {
  background: var(--yc-surface);
  border-bottom: 1px solid var(--yc-border);
}
.date-ribbon__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--yc-sp-3);
  padding: var(--yc-sp-4) var(--yc-sp-5) var(--yc-sp-2);
}
.date-ribbon__title {
  font-family: var(--yc-font);
  font-weight: var(--yc-fw-semibold);
  font-size: var(--yc-fs-lg);
  color: var(--yc-fg);
  letter-spacing: -0.01em;
}
/* #144 (2026-09-15) — supersedes #142. Rips the Week|Month segmented
   control; arrows are weekly-only and now flank the scrollable tile
   strip so they sit visually INSIDE the ribbon container next to the
   tiles they page. Calendar-icon opens a full month grid popover for
   arbitrary-date navigation. */
.date-ribbon__cal {
  background: transparent;
  border: 1px solid var(--yc-hairline);
  border-radius: var(--yc-radius-pill);
  /* #145 — square-ish pill sized for a 16px SVG glyph. */
  padding: 6px 10px;
  color: var(--yc-teal-dark);
  cursor: pointer;
  font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 0;
}
.date-ribbon__cal:hover { background: rgba(0, 0, 0, 0.04); }
.date-ribbon__cal:focus-visible {
  outline: var(--yc-focus); outline-offset: var(--yc-focus-offset);
}
.date-ribbon__strip {
  display: flex; align-items: center;
  gap: var(--yc-sp-1);
  padding: 0 var(--yc-sp-2);
}
.date-ribbon__strip .date-ribbon__nav { flex: 0 0 auto; }
.date-ribbon__strip .date-ribbon__scroll {
  flex: 1 1 auto;
  min-width: 0;
}

/* Month-picker popover (monthPicker.js). Sits beneath the ribbon
   head; toggled via `hidden` attribute by the calendar-icon button. */
.month-picker {
  margin: 0 var(--yc-sp-4) var(--yc-sp-4);
  background: var(--yc-surface);
  border: 1px solid var(--yc-hairline);
  border-radius: var(--yc-radius-lg);
  padding: var(--yc-sp-3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.month-picker__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--yc-sp-2);
}
.month-picker__title {
  font-weight: var(--yc-fw-semibold);
  color: var(--yc-fg);
  font-size: var(--yc-fs-md);
}
.month-picker__nav {
  width: 30px; height: 30px;
  border-radius: var(--yc-radius-sm);
  background: var(--yc-grey);
  border: 1px solid var(--yc-border);
  color: var(--yc-fg);
  cursor: pointer;
  font-size: 14px; font-weight: var(--yc-fw-semibold);
}
.month-picker__nav:hover { background: var(--yc-surface); }
.month-picker__nav:focus-visible {
  outline: var(--yc-focus); outline-offset: var(--yc-focus-offset);
}
.month-picker__wd-row,
.month-picker__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.month-picker__wd {
  text-align: center;
  font-size: var(--yc-fs-xs);
  color: var(--yc-fg-muted);
  font-weight: var(--yc-fw-semibold);
  padding: 4px 0;
}
.month-picker__day,
.month-picker__blank {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: var(--yc-fs-sm);
  border: none;
  background: transparent;
  color: var(--yc-fg);
  cursor: pointer;
  font-family: inherit;
}
.month-picker__day:hover { background: var(--yc-grey); }
.month-picker__day.is-today {
  color: var(--yc-orange);
  font-weight: var(--yc-fw-semibold);
}
.month-picker__day.is-selected {
  background: var(--yc-teal-dark);
  color: var(--yc-white);
}
.month-picker__day:focus-visible {
  outline: var(--yc-focus); outline-offset: var(--yc-focus-offset);
}
.month-picker__blank {
  visibility: hidden;
  cursor: default;
}
.date-ribbon__ctrls {
  display: flex; align-items: center; gap: var(--yc-sp-2);
}
.date-ribbon__jump {
  background: transparent; border: none;
  font: inherit;
  font-size: var(--yc-fs-sm);
  font-weight: var(--yc-fw-semibold);
  color: var(--yc-teal-dark);
  padding: 6px 10px;
  cursor: pointer;
  border-radius: var(--yc-radius-sm);
}
.date-ribbon__jump:hover { color: var(--yc-fg); background: var(--yc-grey); }
.date-ribbon__jump:focus-visible {
  outline: var(--yc-focus); outline-offset: var(--yc-focus-offset);
}
.date-ribbon__nav {
  width: 30px; height: 30px;
  border-radius: var(--yc-radius-sm);
  display: grid; place-items: center;
  background: var(--yc-grey);
  border: 1px solid var(--yc-border);
  color: var(--yc-fg);
  font-size: 14px; font-weight: var(--yc-fw-semibold);
  cursor: pointer; padding: 0;
}
.date-ribbon__nav:hover { background: var(--yc-surface); }
.date-ribbon__nav:focus-visible {
  outline: var(--yc-focus); outline-offset: var(--yc-focus-offset);
}

.date-ribbon__scroll {
  display: flex; gap: var(--yc-sp-2);
  /* #142 (2026-09-15): bumped padding-inline 16 -> 20px, and added
     4px leading/trailing spacer pseudos so the edge tile can never
     rest against the padding under iOS momentum. Belt-and-braces
     tighten on #91/#93. */
  padding: var(--yc-sp-1) var(--yc-sp-5) var(--yc-sp-4);
  scroll-padding-inline: var(--yc-sp-5);
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.date-ribbon__scroll::before,
.date-ribbon__scroll::after {
  content: "";
  flex: 0 0 4px;
}
.date-ribbon__scroll::-webkit-scrollbar { display: none; }

.date-ribbon__day {
  flex: 0 0 auto;
  width: 42px;
  display: flex; flex-direction: column; align-items: center;
  padding: var(--yc-sp-2) 0 10px;
  border-radius: 14px;
  background: transparent;
  border: 1.5px solid transparent;
  cursor: pointer;
  font: inherit;
  transition: background 120ms ease, border-color 120ms ease;
}
.date-ribbon__day:hover { background: var(--yc-grey); }
.date-ribbon__day:focus-visible {
  outline: var(--yc-focus); outline-offset: var(--yc-focus-offset);
}
.date-ribbon__wd {
  font-size: 10px;
  font-weight: var(--yc-fw-semibold);
  letter-spacing: 0.08em;
  color: var(--yc-fg);
  opacity: 0.55;
}
.date-ribbon__num {
  font-size: var(--yc-fs-base);
  font-weight: var(--yc-fw-bold);
  color: var(--yc-fg);
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
}
.date-ribbon__day.is-today {
  border-color: var(--yc-orange);
  background: var(--yc-surface);
}
.date-ribbon__day.is-today .date-ribbon__num { color: var(--yc-orange); }
.date-ribbon__day.is-selected {
  background: var(--yc-orange);
  border-color: var(--yc-orange);
}
.date-ribbon__day.is-selected .date-ribbon__num,
.date-ribbon__day.is-selected .date-ribbon__wd {
  color: var(--yc-fg);
  opacity: 1;
}

.empty-card--activities {
  margin: var(--yc-sp-5);
  padding: var(--yc-sp-6);
  gap: var(--yc-sp-4);
  text-align: center;
}
.empty-card__secondary {
  font-size: var(--yc-fs-sm);
  color: var(--yc-fg); opacity: 0.7;
  margin: 0;
}
.hairline { border: 0; border-top: 1px solid var(--yc-border); margin: var(--yc-sp-3) 0; }

.activities-list {
  display: flex; flex-direction: column; gap: var(--yc-sp-4);
  padding: var(--yc-sp-5);
}
/* Populated day layout (d6 2026-09-10) — the day summary sits above
   slot groups; each slot group carries a 07:00-style label + the
   cards scheduled for that slot. Purely a coach view. */
.activities-day-summary {
  background: var(--yc-surface);
  border: 1px solid var(--yc-border);
  border-radius: var(--yc-radius-lg);
  padding: var(--yc-sp-3) var(--yc-sp-4);
  display: flex; flex-direction: column; gap: var(--yc-sp-2);
}
.activities-day-summary__label {
  font-size: var(--yc-fs-sm);
  color: var(--yc-fg);
  font-weight: var(--yc-fw-semibold);
}
.activities-day-summary__bar {
  height: 4px;
  background: var(--yc-progress-track, #EDEFF1);
  border-radius: 999px;
  overflow: hidden;
}
.activities-day-summary__bar-fill {
  height: 100%;
  background: var(--yc-teal);
  transition: width var(--yc-motion-standard, 240ms) var(--yc-ease-out, cubic-bezier(0.3, 0, 0, 1));
}
.activities-empty-day {
  margin: 0;
  padding: var(--yc-sp-3) var(--yc-sp-4);
  background: var(--yc-surface);
  border: 1px dashed var(--yc-border);
  border-radius: var(--yc-radius-lg);
}
.activities-slot {
  display: flex; flex-direction: column; gap: var(--yc-sp-2);
}
.activities-slot__label {
  margin: 0 0 var(--yc-sp-1) 0;
  font-size: var(--yc-fs-sm);
  color: var(--yc-fg-muted);
  font-weight: var(--yc-fw-semibold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.activities-slot--unscheduled .activities-slot__label {
  color: var(--yc-fg-subtle);
}
.activity-card--done {
  background: var(--yc-tint-teal, rgba(86, 182, 193, 0.08));
}
.activity-card {
  background: var(--yc-surface);
  border: 1px solid var(--yc-border);
  border-radius: var(--yc-radius-lg);
  padding: var(--yc-sp-4);
  display: flex; flex-direction: column; gap: var(--yc-sp-2);
}
.activity-card__head { display: flex; align-items: center; gap: var(--yc-sp-2); }
.activity-card__title { margin: 0; font-size: var(--yc-fs-base); flex: 1; }
.activity-card__meta { font-size: var(--yc-fs-sm); color: var(--yc-fg); opacity: 0.7; margin: 0; }
.activity-card__details { font-size: var(--yc-fs-sm); margin: 0; }
.activity-card__actions { display: flex; gap: var(--yc-sp-3); }

/* Compact circular FAB — replaces the earlier full-width orange pill
   that covered content on shorter viewports. Right-edge aligned, above
   the coach nav, tap target ≥44×44 so it stays accessible. */
.activity-fab {
  position: fixed;
  right: var(--yc-sp-4);
  bottom: calc(var(--yc-nav-h) + var(--yc-sp-4));
  /* 44px meets the Apple HIG minimum tap target and reads noticeably
     smaller than the old 52px. Still comfortable on a touchscreen,
     but doesn't cover the third activity card on shorter viewports. */
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  background: var(--yc-orange);
  color: var(--yc-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--yc-shadow-md);
  text-decoration: none;
  z-index: 20;
  transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}
.activity-fab:hover, .activity-fab:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 44, 66, 0.18);
}
.activity-fab__plus {
  font-size: 22px;
  font-weight: var(--yc-fw-medium);
  line-height: 1;
  margin-top: -1px; /* Optical: the + glyph sits a hair low in most fonts. */
}

.coach-bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: var(--yc-nav-h);
  background: var(--yc-surface); border-top: 1px solid var(--yc-border);
  display: flex; align-items: stretch; justify-content: space-around;
  z-index: 15;
}
.coach-bottom-nav__item {
  flex: 1; display: flex; align-items: center; justify-content: center;
  color: var(--yc-fg); opacity: 0.6; text-decoration: none;
  font-size: var(--yc-fs-xs); font-weight: var(--yc-fw-medium);
}
.coach-bottom-nav__item--active { color: var(--yc-teal); opacity: 1; font-weight: var(--yc-fw-bold); }

/* Chips: category / day / frequency — same shape, three roles. */
.chip {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--yc-sp-2) var(--yc-sp-4);
  border-radius: var(--yc-chip-radius);
  border: 1px solid var(--yc-border);
  background: var(--yc-surface); color: var(--yc-fg);
  font-size: var(--yc-fs-sm); font-weight: var(--yc-fw-medium);
  cursor: pointer;
}
.chip-row { display: flex; flex-wrap: wrap; gap: var(--yc-sp-2); }

/* Small round icon that precedes the category label on category chips.
   Icons live at /img/icon={body,mind,soul,other}.png as teal-on-white
   rasters; kept at the chip's line-height so tall descenders don't
   push the row. Inside the small activity-card pill they're a hair
   smaller than in the picker to keep the pill compact. */
.chip-icon {
  width: 16px; height: 16px;
  display: block;
  margin-right: var(--yc-sp-1);
  flex-shrink: 0;
}
.activity-card .chip--category .chip-icon { width: 14px; height: 14px; }

/* Category chips picked: soft teal wash + teal-dark border. Orange used to
   sit here too, but the Activities screen already spends orange on the
   date-strip today-highlight and the FAB, so a third orange on the
   category chip fought both. Teal wash lets the picked state read without
   competing for attention. Day chips still use the orange fill. */
.chip--category.is-selected {
  background: rgba(86, 182, 193, 0.15);
  border-color: var(--yc-teal-dark);
  border-width: 1.5px;
  color: var(--yc-fg);
}
.chip--day.is-selected {
  background: var(--yc-orange); color: var(--yc-fg);
  border-color: var(--yc-orange);
}
.chip--frequency.is-selected {
  background: var(--yc-teal); color: var(--yc-white);
  border-color: var(--yc-teal);
}

.activity-form {
  padding-bottom: calc(var(--yc-nav-h) + var(--yc-sp-6));
  background: var(--yc-grey);
}
.form-top {
  display: flex; align-items: center; gap: var(--yc-sp-3);
  padding: var(--yc-sp-4) var(--yc-sp-5);
  background: var(--yc-surface); border-bottom: 1px solid var(--yc-border);
}
.form-back {
  font-size: 1.4rem; color: var(--yc-fg); text-decoration: none;
}
.form-title { margin: 0; font-size: var(--yc-fs-lg); font-weight: var(--yc-fw-semibold); }
.form-section {
  background: var(--yc-surface);
  padding: var(--yc-sp-5);
  margin: var(--yc-sp-4) var(--yc-sp-5);
  border-radius: var(--yc-radius-lg);
  display: flex; flex-direction: column; gap: var(--yc-sp-3);
  border: 1px solid var(--yc-border);
}
.form-section__title {
  margin: 0; font-size: var(--yc-fs-sm);
  font-weight: var(--yc-fw-bold); color: var(--yc-fg);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.form-hint { margin: 0; font-size: var(--yc-fs-xs); color: var(--yc-fg); opacity: 0.65; }
.pill-input--multiline {
  /* Starts as a single line and auto-grows with content (see autoGrow()
     helper in activity-form.js). No manual resize handle — the field
     tracks the text. */
  min-height: 44px;
  padding: var(--yc-sp-3) var(--yc-sp-4);
  resize: none;
  overflow: hidden;
  line-height: 1.4;
}
/* #128 (2026-09-15). The goal-form's Description textarea sits above a
   Frequency picker built out of `.freq-row` (border-radius:
   var(--yc-radius)); the bare `.pill-input` pill radius made the two
   fields look mismatched. This modifier flattens the pill down to the
   same rounded-rect shape so the stack reads as one visual system. */
.pill-input--rect { border-radius: var(--yc-radius); }
.target-row { display: flex; align-items: center; gap: var(--yc-sp-3); }
.target-suffix { color: var(--yc-fg); opacity: 0.7; font-size: var(--yc-fs-sm); }
.when-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--yc-sp-3); }
.when-summary { margin: 0; font-size: var(--yc-fs-sm); color: var(--yc-fg); opacity: 0.75; }
.switch-row, .radio-row {
  display: flex; align-items: center; gap: var(--yc-sp-2);
  font-size: var(--yc-fs-sm);
}
.unit-list { display: flex; flex-direction: column; gap: var(--yc-sp-2); }
.unit-row { display: flex; align-items: center; gap: var(--yc-sp-2); font-size: var(--yc-fs-sm); }
.link-add-row { display: flex; gap: var(--yc-sp-2); }
.link-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--yc-sp-2); }
.link-tile {
  display: flex; flex-direction: column; align-items: center; gap: var(--yc-sp-1);
  padding: var(--yc-sp-3);
  background: var(--yc-surface); border: 1px solid var(--yc-border);
  border-radius: var(--yc-radius);
  color: var(--yc-fg); cursor: pointer;
  font-size: 10px; font-weight: var(--yc-fw-medium);
}
.link-tile__icon { width: 24px; height: 24px; }
.link-tile--brand-amazon    { color: #FF9900; }
.link-tile--brand-calm      { color: var(--yc-teal); }
.link-tile--brand-headspace { color: var(--yc-orange); }
.link-tile--brand-strava    { color: #FC4C02; }
.link-tile--brand-spotify   { color: #1DB954; }
.link-tile--brand-kindle    { color: var(--yc-teal-dark); }
.link-list { display: flex; flex-direction: column; gap: var(--yc-sp-2); }
.link-row {
  display: flex; align-items: center; gap: var(--yc-sp-3);
  padding: var(--yc-sp-2) var(--yc-sp-3);
  border: 1px solid var(--yc-border);
  border-radius: var(--yc-radius);
  font-size: var(--yc-fs-sm);
}
.link-row__provider { font-weight: var(--yc-fw-semibold); text-transform: capitalize; }
.link-row__url { flex: 1; color: var(--yc-fg); opacity: 0.75; overflow: hidden; text-overflow: ellipsis; }

.form-footer {
  display: flex; flex-direction: column; gap: var(--yc-sp-3);
  padding: var(--yc-sp-5);
  background: var(--yc-surface); border-top: 1px solid var(--yc-border);
  position: sticky; bottom: 0;
}

.btn.btn-teal {
  background: var(--yc-teal); color: var(--yc-white);
  border: 0; padding: var(--yc-sp-3) var(--yc-sp-5);
  border-radius: var(--yc-radius-pill);
  font-weight: var(--yc-fw-bold); cursor: pointer;
}
.btn.btn-teal:hover { background: var(--yc-teal-dark); }
.btn.btn-danger-outline {
  background: transparent; color: var(--yc-danger);
  border: 1px solid var(--yc-danger);
  padding: var(--yc-sp-3) var(--yc-sp-5);
  border-radius: var(--yc-radius-pill);
  font-weight: var(--yc-fw-semibold); cursor: pointer;
}
.btn.btn-danger-outline:hover { background: var(--yc-danger-soft); }
.btn.btn-round {
  width: 40px; height: 40px; padding: 0;
  border-radius: var(--yc-radius-pill);
}

.modal-scrim {
  position: fixed; inset: 0; background: rgba(0, 44, 66, 0.4); z-index: 40;
}
.modal.advanced-modal {
  position: fixed; z-index: 41;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(560px, 92vw); max-height: 90vh;
  background: var(--yc-surface); border-radius: var(--yc-radius-lg);
  display: flex; flex-direction: column;
  box-shadow: var(--yc-shadow-md);
}
.modal-head, .modal-foot {
  padding: var(--yc-sp-4) var(--yc-sp-5);
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--yc-border);
}
.modal-head h2 { margin: 0; font-size: var(--yc-fs-lg); }
.modal-close {
  background: none; border: 0; font-size: 1.4rem;
  color: var(--yc-fg); cursor: pointer;
}
.modal-body {
  padding: var(--yc-sp-4) var(--yc-sp-5);
  overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--yc-sp-4);
}
.modal-body .form-section {
  margin: 0; padding: var(--yc-sp-4);
  background: var(--yc-grey);
}
.modal-foot {
  display: flex; flex-direction: column; gap: var(--yc-sp-2);
  border-top: 1px solid var(--yc-border);
}
.time-list { display: flex; flex-direction: column; gap: var(--yc-sp-2); }
.time-row { display: flex; gap: var(--yc-sp-2); align-items: center; }
.preview-card {
  background: var(--yc-grey);
  padding: var(--yc-sp-4);
  border-radius: var(--yc-radius);
  border: 1px solid var(--yc-border);
}
.preview-card h3 {
  margin: 0 0 var(--yc-sp-2);
  font-size: var(--yc-fs-sm);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.field-error { color: var(--yc-danger); font-size: var(--yc-fs-xs); margin-top: var(--yc-sp-1); }

/* ── Profile page ───────────────────────────────────────────────────────
   /profile — shared shell for coach + client. Light grey page bg (matches
   the Figma), white rounded cards, teal Logout pill in the header, orange
   floating pencil FAB. Two-column head inside the profile card holds
   name/date on the left + circular avatar on the right. See
   plan/profile/PLAN.md. */

.profile-page {
  min-height: 100vh;
  background: #E7EEF2;
  padding: 0 var(--yc-sp-4) var(--yc-sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--yc-sp-4);
  position: relative;
  color: var(--yc-fg);
}

.profile-header {
  display: flex;
  align-items: center;
  gap: var(--yc-sp-3);
  padding: var(--yc-sp-4) 0;
  background: var(--yc-surface);
  margin: 0 calc(var(--yc-sp-4) * -1) 0;
  padding: var(--yc-sp-4);
  border-bottom-left-radius: var(--yc-radius-lg);
  border-bottom-right-radius: var(--yc-radius-lg);
}
.profile-header__back {
  background: transparent;
  border: none;
  font-size: 1.4rem;
  color: var(--yc-fg);
  padding: 4px 8px;
  cursor: pointer;
  line-height: 1;
}
.profile-header__title {
  flex: 1;
  margin: 0;
  text-align: center;
  font-size: 1.05rem;
  font-weight: var(--yc-fw-semibold);
  color: var(--yc-fg);
}
.profile-header__logout { padding: 8px 18px; font-size: 0.9rem; }

.profile-card {
  background: var(--yc-surface);
  border-radius: var(--yc-radius-lg);
  padding: var(--yc-sp-5);
  box-shadow: var(--yc-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--yc-sp-3);
}
.profile-card__title {
  margin: 0 0 var(--yc-sp-2);
  font-size: 1.1rem;
  font-weight: var(--yc-fw-bold);
  color: var(--yc-fg);
}
.profile-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--yc-sp-3);
}
.profile-card__id { flex: 1; min-width: 0; }
.profile-card__name {
  margin: 0 0 var(--yc-sp-2);
  font-size: 1.6rem;
  font-weight: var(--yc-fw-bold);
}
.profile-card__start {
  margin: 0;
  font-size: 0.95rem;
  color: var(--yc-fg);
}
.profile-card__dot { color: var(--yc-fg); }
.profile-card__extras { display: flex; flex-direction: column; gap: var(--yc-sp-2); margin-top: var(--yc-sp-3); }
.profile-card__label {
  margin: var(--yc-sp-2) 0 var(--yc-sp-1);
  font-size: 1rem;
  font-weight: var(--yc-fw-bold);
  color: var(--yc-fg);
}
.profile-card__body {
  margin: 0;
  font-size: 0.95rem;
  line-height: var(--yc-lh-body);
  color: var(--yc-fg);
}
.profile-card__cta-row {
  display: flex;
  justify-content: center;
  margin-top: var(--yc-sp-2);
}

/* Avatar — reuses the shared avatar() helper, but positions the teal
   camera badge in the bottom-right corner. */
.profile-avatar {
  position: relative;
  flex-shrink: 0;
  width: 96px;
  height: 96px;
}
.profile-avatar__camera {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--yc-teal);
  color: var(--yc-white);
  border: 3px solid var(--yc-white);
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Contact block — two-column label/value pairs. */
.profile-contact {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--yc-sp-1);
}
.profile-contact__label {
  font-size: 1rem;              /* 16px */
  font-weight: var(--yc-fw-semibold);
  color: var(--yc-fg);
  margin-top: var(--yc-sp-2);
  font-family: var(--yc-font);
}
.profile-contact__value {
  /* Email + phone are read as data, not headings — regular weight, 16px,
     DM Sans (default via var(--yc-font)) per the design brief. */
  font-size: 1rem;              /* 16px */
  font-weight: var(--yc-fw-regular);
  color: var(--yc-fg);
  word-break: break-word;
  font-family: var(--yc-font);
}
.profile-contact__label:first-child { margin-top: 0; }

/* Two-button CTA row (Decline + Accept) on the client profile invite
   card. Split evenly so neither dominates. */
.profile-card__cta-row--split {
  display: flex;
  gap: var(--yc-sp-3);
}
.profile-card__cta-row--split .btn { flex: 1; }

/* Version footer — small pill row on the coach layout. */
.profile-version {
  background: var(--yc-surface);
  border-radius: var(--yc-radius-lg);
  padding: var(--yc-sp-3) var(--yc-sp-5);
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: var(--yc-fg-muted);
  box-shadow: var(--yc-shadow-sm);
}

/* Orange pencil FAB — bottom-right, sits above bottom-nav space.
   44×44 matches every other FAB and meets the Apple HIG minimum
   tap target. */
.profile-fab {
  position: fixed;
  right: 20px;
  bottom: calc(var(--yc-nav-h, 64px) + 20px);
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--yc-orange);
  color: var(--yc-white);
  font-size: 1.05rem;
  cursor: pointer;
  box-shadow: var(--yc-shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-fab:hover { background: #E69A0F; }

/* Client Activities FAB (plan/self-serve-activities Slice SS.A, 2026-09-11).
   Mirrors .profile-fab exactly — same tap target, same orange, sits above
   the bottom-nav on the /activity screen. Routes to /activity/new. */
.activities-fab {
  position: fixed;
  right: 20px;
  bottom: calc(var(--yc-nav-h, 64px) + 20px);
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  background: var(--yc-orange);
  color: var(--yc-white);
  font-size: 1.6rem;
  line-height: 1;
  text-decoration: none;
  box-shadow: var(--yc-shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
}
.activities-fab:hover { background: #E69A0F; }
.activities-fab:focus-visible { outline: var(--yc-focus); outline-offset: 2px; }

/* "Mine" chip — solo activities (coach_id: null) on the client Activity
   list. Distinct from category / status chips: neutral outline, muted
   text; the chip is a marker, not a call to action. */
.chip--mine {
  background: transparent;
  color: var(--yc-fg-muted);
  border: 1px solid var(--yc-border);
  font-size: var(--yc-fs-xs);
  padding: 2px 8px;
  border-radius: var(--yc-radius-pill);
  align-self: center;
  margin-left: auto;
  font-weight: var(--yc-fw-medium);
}

/* Header profile pip — circular avatar tap-target that goes to /profile.
   Sits between the mail link and the logout button in the app header. */
.app-header-profile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
  width: 32px;
  height: 32px;
  line-height: 0;
}
.app-header-profile:hover { background: rgba(0,44,66,0.06); }

/* Coach home — linked client rows are clickable links, chevron on the
   right hints at the drill-down into the client's activities screen. */
.invite-row--linked {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--yc-sp-3);
  text-decoration: none;
  color: var(--yc-fg);
  padding: var(--yc-sp-3) 0;
  border-top: 1px solid rgba(0,44,66,0.06);
  cursor: pointer;
}
.invite-row--linked:first-child { border-top: none; }
.invite-row--linked:hover { background: rgba(0,44,66,0.03); }
.invite-row--linked strong { color: var(--yc-fg); }
.invite-row__chevron {
  font-size: 1.4rem;
  line-height: 1;
  color: var(--yc-fg-subtle);
}

/* Coach-home client card — additive on top of `.invite-row--linked`.
   Renders a traffic-light dot on the left, name + email + "last activity"
   in the middle, and the unread-messages pill + chevron on the right. */
.client-card__dot {
  flex: 0 0 auto;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(0,44,66,0.25);
}
.client-card__dot--green   { background: var(--yc-success); }
.client-card__dot--amber   { background: var(--yc-orange); }
.client-card__dot--red     { background: var(--yc-danger); }
.client-card__dot--neutral { background: rgba(0,44,66,0.25); }

.client-card__body { flex: 1 1 auto; min-width: 0; }
.client-card__meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.client-card__trailing {
  display: inline-flex;
  align-items: center;
  gap: var(--yc-sp-2);
  flex: 0 0 auto;
}
.client-card__unread {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--yc-orange);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
}

/* Client home — coach-assigned activity rows inside a routine's step list.
   Distinct from a plain step: no checkbox (client-side completion is a
   separate slice), a small teal dot marker on the left, and the first
   occurrence time on the right so the row reads as a schedule item. */
.routine-card__step--activity {
  display: flex;
  align-items: center;
  gap: var(--yc-sp-3);
}
.routine-card__step-marker {
  /* Empty circle — same shape and colour as an unchecked routine step,
     so an unfinished activity reads as a to-do item. Matches the
     browser-native checkbox margin (4px 3px 3px 5px in Chromium) so the
     circle lines up perfectly under an <input type=checkbox> in the
     same list. Client-side completion isn't wired yet; that flip lands
     in its own slice. */
  width: 22px;
  height: 22px;
  border: 2px solid var(--yc-teal-dark);
  border-radius: 50%;
  background: transparent;
  flex-shrink: 0;
  box-sizing: border-box;
  margin: 4px 3px 3px 4px;
}
.routine-card__step--activity .routine-card__step-label {
  flex: 1;
  min-width: 0;
}
.routine-card__step-time {
  font-size: 0.85rem;
  font-weight: var(--yc-fw-semibold);
  color: var(--yc-teal-dark);
  flex-shrink: 0;
}

/* Rating (1-5) completion — used on client home for `unit: "rating"`
   activities. The row wraps so the 1..5 pill scale sits under the
   title + time, matching the mockup shared with the coach. */
.routine-card__step--rating {
  flex-wrap: wrap;
}
.routine-card__step--rating .routine-card__step-label {
  flex: 1 1 auto;
}
.rating-scale {
  display: flex;
  gap: var(--yc-sp-2);
  width: 100%;
  margin-top: var(--yc-sp-2);
}
.rating-scale__btn {
  flex: 1;
  min-height: 44px;
  border: 1px solid var(--yc-teal-dark);
  border-radius: var(--yc-radius-pill);
  background: transparent;
  color: var(--yc-teal-dark);
  font-weight: var(--yc-fw-semibold);
  font-size: 1rem;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.rating-scale__btn:hover {
  background: rgba(64, 162, 175, 0.08);
}
.rating-scale__btn.is-selected {
  background: var(--yc-teal-dark);
  color: #fff;
}

/* Coach activity card — completion tally chip (2026-09-08). One line
   under the meta row: how many of today's occurrences the client has
   ticked. Colour tells the coach at a glance: soft-green = fully done,
   teal = partial, grey = untouched. */
.activity-card__tally {
  margin: var(--yc-sp-1) 0 0;
  font-size: var(--yc-fs-xs);
  font-weight: var(--yc-fw-semibold);
  padding: 2px 10px;
  border-radius: var(--yc-radius-pill);
  display: inline-block;
  align-self: flex-start;
}
.activity-card__tally--complete {
  background: var(--yc-success-soft);
  color: #3E7A22;
}
.activity-card__tally--partial {
  background: rgba(86, 182, 193, 0.18);
  color: var(--yc-teal-dark);
}
.activity-card__tally--none {
  background: rgba(0, 44, 66, 0.06);
  color: var(--yc-fg-muted);
}

/* Coach activities screen — weekly rollup card sits between the date
   strip and the day's activity list. Progress bar coloured to match
   the per-card tally: soft-green when full, teal partial, orange low,
   grey when nothing is scheduled yet. */
.week-card {
  margin: var(--yc-sp-3) var(--yc-sp-4) 0;
  padding: var(--yc-sp-3) var(--yc-sp-4);
  background: var(--yc-surface);
  border: 1px solid var(--yc-border);
  border-radius: var(--yc-radius-lg);
  box-shadow: var(--yc-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--yc-sp-2);
}
.week-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--yc-sp-3);
}
/* Status pill anchored inside the week card (P2 2026-09-10) — sits
   between the "This week" label and the count so it reads as part of
   the card rather than an orphan strip. */
.week-card__status {
  margin-right: auto;
  transform: translateY(1px);
}
.week-card__label {
  font-size: var(--yc-fs-sm);
  color: var(--yc-fg-muted);
  font-weight: var(--yc-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.week-card__count {
  font-size: var(--yc-fs-base);
  font-weight: var(--yc-fw-bold);
  color: var(--yc-fg);
}
.week-card__bar {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--yc-progress-track);
  overflow: hidden;
}
.week-card__bar-fill {
  height: 100%;
  border-radius: inherit;
  transition: width 220ms ease-out;
}
.week-card--complete .week-card__bar-fill { background: var(--yc-success); }
.week-card--partial .week-card__bar-fill  { background: var(--yc-teal-dark); }
.week-card--low .week-card__bar-fill      { background: var(--yc-orange); }
.week-card--none .week-card__count        { color: var(--yc-fg-muted); }

/* Completion-source split (plan/completion-source) — muted line under
   the progress bar, both counts always shown when at least one
   completion this week. Same wording on client + coach so the phrase
   travels across roles unchanged. */
.week-card__split {
  margin: 0.5rem 0 0;
  font-size: var(--yc-fs-xs);
  color: var(--yc-fg-muted);
}
.my-activity__week-split {
  margin: 0.25rem 0 0;
  font-size: var(--yc-fs-xs);
  color: var(--yc-fg-muted);
}

/* Activity card — inline slot check + kebab menu (2026-09-09).
   Each occurrence renders as its own span so a ticked one can show a ✓
   right next to the time. Kebab menu (⋮) folds Edit + Delete out of
   the row so the row stays compact. */
.activity-card__head { position: relative; padding-right: 32px; }
.activity-card__slot {
  display: inline-flex;
  align-items: baseline;
}
.activity-card__slot--done {
  color: var(--yc-success);
  font-weight: var(--yc-fw-semibold);
}
.activity-card__slot-check {
  color: var(--yc-success);
  margin-left: 2px;
  font-weight: var(--yc-fw-bold);
}
.activity-card__meta-sep { opacity: 0.5; }
.activity-card__target { color: var(--yc-fg); opacity: 0.75; }

.card-menu { position: absolute; top: 0; right: 0; }
.card-menu__trigger {
  background: transparent;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: var(--yc-fg-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-menu__trigger:hover { background: rgba(0, 44, 66, 0.06); color: var(--yc-fg); }
.card-menu__popover {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 140px;
  background: var(--yc-surface);
  border: 1px solid var(--yc-border);
  border-radius: var(--yc-radius);
  box-shadow: var(--yc-shadow-md);
  padding: var(--yc-sp-1);
  display: flex;
  flex-direction: column;
  z-index: 25;
}
.card-menu__item {
  padding: var(--yc-sp-2) var(--yc-sp-3);
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  color: var(--yc-fg);
  border-radius: var(--yc-radius-sm);
  font-size: var(--yc-fs-sm);
  font-family: inherit;
}
.card-menu__item:hover { background: rgba(0, 44, 66, 0.06); }
.card-menu__item--danger { color: var(--yc-danger); }
.card-menu__item--danger:hover { background: var(--yc-danger-soft); }

/* Date strip — desktop breathing room (2026-09-09). Mobile stays as
   the compact 7-across pill row; ≥560px viewports get slightly larger
   day cells with a bit more air between them. */
@media (min-width: 560px) {
  .date-strip__day {
    padding: var(--yc-sp-3) var(--yc-sp-4);
    font-size: var(--yc-fs-base);
  }
  .date-strip__weekday { font-size: var(--yc-fs-sm); }
}

/* Slice D — Avatar upload. Spinner overlay sits on top of the avatar
   image while the resize+POST is in flight. Remove-photo action lives
   as a danger link under the modal's primary action row. */
.profile-avatar__input { display: none; }
.profile-avatar__spinner {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(0, 44, 66, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.profile-avatar__spinner::after {
  content: "";
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid var(--yc-white);
  border-top-color: transparent;
  animation: yc-avatar-spin 0.9s linear infinite;
}
@keyframes yc-avatar-spin {
  to { transform: rotate(360deg); }
}
.yc-modal__secondary {
  margin-top: var(--yc-sp-3);
  display: flex;
  justify-content: center;
}
.btn.btn-danger-link {
  background: transparent;
  color: var(--yc-danger);
  border: none;
  padding: var(--yc-sp-2) var(--yc-sp-3);
  font-family: inherit;
  font-size: var(--yc-fs-sm);
  font-weight: var(--yc-fw-medium);
  cursor: pointer;
  text-decoration: underline;
}
.btn.btn-danger-link:hover { color: #b23a3a; }

/* ── Messaging ─────────────────────────────────────────────────────────
   Conversation list + thread view. Minimal shell that matches the rest
   of the app — white cards on the grey ground, teal for own bubbles,
   soft grey for the other side. */
.conv-list-page { padding: var(--yc-sp-4); }
.conv-list__title {
  margin: 0 0 var(--yc-sp-3);
  font-size: var(--yc-fs-xl);
  color: var(--yc-fg);
}
.conv-list { display: flex; flex-direction: column; gap: var(--yc-sp-2); }
.conv-row {
  display: flex;
  align-items: center;
  gap: var(--yc-sp-3);
  padding: var(--yc-sp-3);
  background: var(--yc-surface);
  border-radius: var(--yc-radius-lg);
  box-shadow: var(--yc-shadow-sm);
  text-decoration: none;
  color: var(--yc-fg);
}
.conv-row__body { flex: 1; min-width: 0; }
.conv-row__name {
  font-weight: var(--yc-fw-semibold);
  color: var(--yc-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conv-row__preview {
  color: var(--yc-fg-muted);
  font-size: var(--yc-fs-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conv-row__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--yc-sp-1);
  flex-shrink: 0;
}
.conv-row__time { font-size: var(--yc-fs-xs); color: var(--yc-fg-subtle); }
.conv-row__badge {
  background: var(--yc-orange);
  color: var(--yc-fg);
  font-weight: var(--yc-fw-bold);
  font-size: var(--yc-fs-xs);
  padding: 2px 8px;
  border-radius: var(--yc-radius-pill);
  min-width: 22px;
  text-align: center;
}
/* #97 bulk-delete — the .conv-row was the <a>; it is now a wrapper
   div holding a checkbox + inner .conv-row__link, so the click target
   moves inside without disrupting the visual. */
.conv-row__link {
  display: flex;
  align-items: center;
  gap: var(--yc-sp-3);
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.conv-row__select {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--yc-teal-dark);
  cursor: pointer;
}
.conv-row--selected {
  background: color-mix(in oklab, var(--yc-teal) 12%, var(--yc-surface));
}

.thread-page {
  /* Fill the space between the global app-header and the fixed bottom
     nav. Without subtracting BOTH the header AND the nav the compose
     bar falls behind the nav — that was the 2026-09-10 duplicate-layer
     bug on the coach side. */
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--yc-header-h));
  height: calc(-webkit-fill-available - var(--yc-header-h));
  height: calc(100dvh - var(--yc-header-h));
  padding: 0;
  box-sizing: border-box;
  /* ROOT CAUSE FIX for #63 regressions (2026-09-11): `.page` sets
     `flex: 1` (see line ~1390 of this file). `#app` is a flex column,
     so a `.thread-page`, which carries `.page`, inherited flex-grow=1
     and stretched to fill its parent — SILENTLY OVERRIDING the
     `height: calc(...)` above. That is why the compose kept slipping
     behind the nav after every "fix": the previous fixes tuned the
     calc math (padding-bottom, safe-area, --with-nav modifier) while
     flex-grow was ignoring it entirely. `flex: none` opts out of the
     inherited grow so the intrinsic height wins. Locking this in as
     the durable invariant Cody's guard (0d6e99a, 5a31dd0, 917eb99)
     was watching for. */
  flex: none;
}
.thread-page--with-nav {
  /* #111 (2026-09-14): drop the `- env(safe-area-inset-bottom)`
     subtraction. `.bottom-nav` is `position: fixed; bottom: 0` with
     NO safe-area padding, so on current iOS Safari (viewport-fit=cover)
     its visual top is at `100dvh - nav_h`. Subtracting the inset here
     made wrap end 34px SHORT of the nav, leaving a visible gap that
     Jeanndre reported ("wide empty band between compose and nav").
     The old subtraction was for a different iOS behaviour where the
     nav rendered above the notch — that no longer applies on current
     devices. If the older behaviour returns, put the inset on the
     NAV (padding-bottom) instead of subtracting it here — one source
     of truth beats two coupled calcs. */
  height: calc(100vh - var(--yc-header-h) - var(--yc-bottom-nav-h));
  height: calc(-webkit-fill-available - var(--yc-header-h) - var(--yc-bottom-nav-h));
  height: calc(100dvh - var(--yc-header-h) - var(--yc-bottom-nav-h));
}
/* Compose safe-area rule moved INTO the .thread-compose block below
   (was here as a separate rule but the fuller block later in the file
   redefined `padding` shorthand and silently wiped it — regression
   caught 2026-09-10 after the compose-hidden bug came back on prod). */
.thread-header {
  display: flex;
  align-items: center;
  gap: var(--yc-sp-3);
  padding: var(--yc-sp-3) var(--yc-sp-4);
  background: var(--yc-surface);
  border-bottom: 1px solid var(--yc-border);
  flex-shrink: 0;
}
.thread-header__back {
  background: none;
  border: 0;
  font-size: 1.4rem;
  color: var(--yc-fg);
  cursor: pointer;
}
.thread-header__name {
  margin: 0;
  font-size: var(--yc-fs-lg);
  font-weight: var(--yc-fw-semibold);
}
.thread-scroll {
  flex: 1;
  overflow-y: auto;
  padding: var(--yc-sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--yc-sp-2);
}
.thread-empty {
  text-align: center;
  padding: var(--yc-sp-8) var(--yc-sp-4);
  color: var(--yc-fg-subtle);
}
.bubble {
  max-width: 78%;
  padding: var(--yc-sp-2) var(--yc-sp-3);
  border-radius: var(--yc-radius-lg);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bubble--mine {
  align-self: flex-end;
  background: var(--yc-teal-dark);
  color: var(--yc-white);
  border-bottom-right-radius: 4px;
}
.bubble--theirs {
  align-self: flex-start;
  background: var(--yc-surface);
  color: var(--yc-fg);
  border-bottom-left-radius: 4px;
  box-shadow: var(--yc-shadow-sm);
}
.bubble__text { white-space: pre-wrap; word-break: break-word; }
.bubble__stamp {
  font-size: 10px;
  opacity: 0.7;
  align-self: flex-end;
}
.thread-compose {
  display: flex;
  /* #111 (2026-09-14): vertically center the input + Send button so
     their differing intrinsic heights (input min-height 40, .btn
     natural ~44) render aligned. Without this the default cross-axis
     `stretch` gave textarea+button mismatched heights on iPhone. */
  align-items: center;
  gap: var(--yc-sp-2);
  /* Longhand padding so a later `padding` shorthand can't silently
     wipe padding-bottom (2026-09-10 duplicate-shorthand bug). Safe-
     area padding is NOT needed here — the compose sits above the
     fixed nav, which already occupies the home-indicator zone. */
  padding-top: var(--yc-sp-3);
  padding-right: var(--yc-sp-4);
  padding-bottom: var(--yc-sp-3);
  padding-left: var(--yc-sp-4);
  background: var(--yc-surface);
  border-top: 1px solid var(--yc-border);
  flex-shrink: 0;
}
.thread-compose__input {
  flex: 1;
  min-height: 40px;
  max-height: 120px;
  resize: none;
  border: 1px solid var(--yc-border);
  border-radius: var(--yc-radius-lg);
  padding: var(--yc-sp-2) var(--yc-sp-3);
  font: inherit;
  color: var(--yc-fg);
}
.thread-compose__send { flex-shrink: 0; }

/* Unread badge on the bottom-nav Messaging icon — small orange pill,
   pinned to the top-right of the icon mask. Auto-hides at 0. The
   wrapper is needed because the icon span itself uses mask-image
   which would clip anything nested inside it. */
.bottom-nav__icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bottom-nav__badge {
  position: absolute;
  top: -6px;
  right: -10px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--yc-orange);
  color: var(--yc-fg);
  font-size: 11px;
  font-weight: var(--yc-fw-bold);
  line-height: 14px;
  text-align: center;
  box-sizing: border-box;
  border: 2px solid var(--yc-white);
  pointer-events: none;
}

/* Drawer Messages row — small orange dot in the label, mirrors the
   user-pill-dot semantics: hidden when no unread, visible otherwise.
   refreshMessagingBadge() toggles .hidden on demand. */
.user-drawer-row-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--yc-orange);
  margin-left: var(--yc-sp-2);
  vertical-align: middle;
}

/* ── Reminders ─────────────────────────────────────────────────────────
   List + card styling for the client's Reminders tab. Cards use the
   same rounded shell as the activity cards but pair a checkbox on the
   left for quick tick-off, and a category chip on the right. */
.reminders-list {
  /* Reserve room for the fixed --yc-bottom-nav-h so the last card
     never sits behind the client nav (added on /reminders in the same
     commit as this rule). */
  padding: var(--yc-sp-4);
  padding-bottom: calc(var(--yc-bottom-nav-h) + var(--yc-sp-4) + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: var(--yc-sp-3);
}
.reminders-empty { padding: var(--yc-sp-6) var(--yc-sp-4); }
.reminders-upcoming__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: var(--yc-sp-4);
}
.reminders-upcoming__head h3 {
  margin: 0;
  font-size: var(--yc-fs-lg);
  color: var(--yc-fg);
}

.reminder-card {
  display: flex;
  gap: var(--yc-sp-3);
  padding: var(--yc-sp-3);
  background: var(--yc-surface);
  border: 1px solid var(--yc-border);
  border-radius: var(--yc-radius-lg);
  box-shadow: var(--yc-shadow-sm);
  align-items: flex-start;
  position: relative;
}
.reminder-card__check input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border: 2px solid var(--yc-teal-dark);
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.reminder-card__check input[type=checkbox]:checked { background: var(--yc-teal-dark); }
.reminder-card__check input[type=checkbox]:checked::after {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--yc-surface);
}
.reminder-card__body { flex: 1; min-width: 0; }
.reminder-card__title {
  margin: 0 0 2px;
  font-size: 1rem;
  font-weight: var(--yc-fw-bold);
  color: var(--yc-fg);
}
.reminder-card__desc {
  margin: 0 0 var(--yc-sp-2);
  font-size: var(--yc-fs-sm);
  color: var(--yc-fg-muted);
}
.reminder-card__meta {
  display: flex;
  gap: var(--yc-sp-3);
  align-items: center;
  flex-wrap: wrap;
  font-size: var(--yc-fs-sm);
}
.reminder-card__time { color: var(--yc-teal-dark); font-weight: var(--yc-fw-semibold); }
.reminder-card__cat {
  padding: 2px 10px;
  border-radius: var(--yc-radius-pill);
  font-weight: var(--yc-fw-semibold);
  background: rgba(0, 44, 66, 0.06);
  color: var(--yc-fg);
}
.reminder-card__cat--body { background: rgba(86, 182, 193, 0.18); color: var(--yc-teal-dark); }
.reminder-card__cat--mind { background: rgba(86, 182, 193, 0.18); color: var(--yc-teal-dark); }
.reminder-card__cat--soul { background: rgba(137, 191, 108, 0.18); color: #3E7A22; }
.reminder-card__cat--other { background: rgba(0, 44, 66, 0.08); color: var(--yc-fg-muted); }
.reminder-card--done .reminder-card__title {
  text-decoration: line-through;
  color: var(--yc-fg-subtle);
}

/* Add/edit form — reuses .profile-card shell, adds row + toggle helpers. */
.reminder-form { padding: var(--yc-sp-4); display: flex; flex-direction: column; gap: var(--yc-sp-3); }
.reminder-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--yc-sp-3);
  margin-top: var(--yc-sp-2);
}
/* Grid items default to `min-width: auto`, which lets a native date /
   time input's chrome push its column past 1fr and bleed off-screen.
   Force min-width: 0 + border-box so 1fr actually constrains. */
.reminder-form__row > * { min-width: 0; }
.reminder-form__row .pill-input {
  box-sizing: border-box;
  width: 100%;
  padding: 12px 14px;
  font-size: 0.95rem;
}
.reminder-form__inline,
.reminder-form__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--yc-sp-2);
  margin-top: var(--yc-sp-2);
  font-weight: var(--yc-fw-semibold);
  color: var(--yc-fg);
}
.reminder-form__freqs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--yc-sp-2);
  margin-top: var(--yc-sp-2);
}
.reminder-form__preview {
  margin-top: var(--yc-sp-2);
  padding: var(--yc-sp-2) var(--yc-sp-3);
  background: rgba(0, 44, 66, 0.05);
  border-radius: var(--yc-radius);
  color: var(--yc-fg);
  font-size: var(--yc-fs-sm);
}
.reminder-form__cats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--yc-sp-2);
  margin-top: var(--yc-sp-2);
}
.reminder-form__actions {
  display: flex;
  gap: var(--yc-sp-3);
  padding: var(--yc-sp-4);
}
.reminder-form__actions .btn {
  flex: 1;
  /* Match the frequency chip height so the footer doesn't tower over
     the rest of the form. Same padding + font-size as .chip. */
  padding: var(--yc-sp-2) var(--yc-sp-4);
  font-size: var(--yc-fs-sm);
}

/* ── Goals ────────────────────────────────────────────────────────────
   Coach's per-client outcome layer. Uses the same card shell as
   activities; a category-tinted left border and a status pill are the
   distinguishing marks. Introduced 2026-09-09. */
/* Bottom padding clears BOTH the bottom nav AND the FAB, so the last
   goal card's action row is never hidden under the orange + button. */
.goals-page { padding-bottom: calc(var(--yc-nav-h) + var(--yc-sp-8) + 60px); }
.goals-empty { padding: var(--yc-sp-6) var(--yc-sp-4); }
.goals-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--yc-sp-2);
  padding: var(--yc-sp-3) var(--yc-sp-4) 0;
}
.goals-stat {
  background: var(--yc-surface);
  border-radius: var(--yc-radius);
  padding: var(--yc-sp-3);
  text-align: center;
  box-shadow: var(--yc-shadow-sm);
  /* Fixed tile height so a two-line label (e.g. "Days Missed / This Week")
     doesn't unbalance the row against its one-line neighbours. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 88px;
}
.goals-stat__value {
  font-size: 1.5rem;
  font-weight: var(--yc-fw-semibold);
  line-height: 1.1;
}
.goals-stat__value--ok { color: var(--yc-success); }
.goals-stat__value--warn { color: var(--yc-warn); }
.goals-stat__label {
  margin-top: var(--yc-sp-1);
  font-size: var(--yc-fs-xs);
  color: var(--yc-fg);
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.goals-insights {
  margin: var(--yc-sp-3) var(--yc-sp-4);
  padding: var(--yc-sp-4);
  background: var(--yc-teal);
  color: var(--yc-white);
  border-radius: var(--yc-radius);
}
.goals-insights__title {
  margin: 0 0 var(--yc-sp-2);
  font-size: var(--yc-fs-base);
  font-weight: var(--yc-fw-semibold);
}
.goals-insights ul { margin: 0; padding-left: 1.2em; }
.goals-insights li { margin: var(--yc-sp-1) 0; font-size: var(--yc-fs-sm); }
.goals-switch {
  display: flex;
  gap: var(--yc-sp-1);
  margin: var(--yc-sp-2) var(--yc-sp-4);
  background: var(--yc-progress-track);
  border-radius: var(--yc-radius-pill);
  padding: 3px;
}
.goals-switch__opt {
  flex: 1;
  padding: var(--yc-sp-2) var(--yc-sp-3);
  border: 0;
  background: transparent;
  border-radius: var(--yc-radius-pill);
  font: inherit;
  cursor: pointer;
  color: var(--yc-fg);
}
.goals-switch__opt.is-active {
  background: var(--yc-surface);
  font-weight: var(--yc-fw-semibold);
  box-shadow: var(--yc-shadow-sm);
}
.goals-list {
  padding: var(--yc-sp-3) var(--yc-sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--yc-sp-3);
}
.goal-card {
  background: var(--yc-surface);
  border-radius: var(--yc-radius);
  box-shadow: var(--yc-shadow-sm);
  overflow: hidden;                 /* let the teal hero paint edge-to-edge */
  display: flex;
  flex-direction: column;
}
/* Teal hero — carries the goal identity. All text + icon go white so the
   contrast reads. */
.goal-card__hero {
  background: var(--yc-teal-dark);
  color: var(--yc-white);
  padding: var(--yc-sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--yc-sp-2);
}
/* #141 → #146 (2026-09-15) — pencil sits at parity with Remind as the
   third action button inline. Solid orange background matches Remind's
   `.btn-primary` tone; teal-dark ink (`--yc-body`) is picked over white
   because #002C42 on #FFAD16 clears WCAG AA 3:1 for graphical objects
   (ratio ~4.9:1) while white on orange is ~1.9:1 and fails. */
.goal-card__edit {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  padding: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--yc-body);
  background: var(--yc-orange);
  border: none;
  text-decoration: none;
  cursor: pointer;
}
.goal-card__edit:hover {
  background: color-mix(in oklab, var(--yc-orange) 92%, black 8%);
}
.goal-card__edit:focus-visible {
  outline: 2px solid var(--yc-orange);
  outline-offset: 2px;
}
.goal-card__hero .goal-card__title,
.goal-card__hero .goal-card__desc,
.goal-card__hero .goal-card__metrics { color: var(--yc-white); opacity: 1; }
/* Icon tile: translucent-white disc + white glyph. `filter` recolours the
   category PNG (which is stroked in its category colour) to pure white
   without needing separate white assets. */
.goal-card__icon {
  width: 40px; height: 40px;
  border-radius: 999px;
  display: grid; place-items: center;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.15);
}
.goal-card__icon img { width: 22px; height: 22px; display: block; }
/* Native white SVGs render as-is; fallback colour PNGs get recoloured
   to white by filter until each category ships its own -white.svg. */
.goal-card__icon-png { filter: brightness(0) invert(1); }
/* White body — utilitarian bits sit on neutral ground so the teal hero
   above owns the visual identity. */
.goal-card__body {
  padding: var(--yc-sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--yc-sp-2);
}
.goal-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--yc-sp-2);
}
.goal-card__title {
  margin: 0;
  font-size: var(--yc-fs-lg);
  font-weight: var(--yc-fw-semibold);
}
.goal-pill {
  /* Nowrap + flex-shrink:0 keeps "On Track" / "Needs Attention" on a
     single line even when the goal title is long enough to eat the row. */
  padding: 2px var(--yc-sp-2);
  border-radius: var(--yc-radius-pill);
  font-size: var(--yc-fs-xs);
  font-weight: var(--yc-fw-semibold);
  text-transform: capitalize;
  white-space: nowrap;
  flex-shrink: 0;
}
.goal-pill--on_track { background: var(--yc-success-soft); color: var(--yc-success); }
.goal-pill--needs_attention { background: var(--yc-warn-soft); color: #8a5a00; }
.goal-pill--off_track { background: var(--yc-danger-soft); color: var(--yc-danger); }
/* GR.A role badge — sits next to the status pill on the goal card.
   Primary reads as brand teal, Secondary as a softer chrome outline
   so the pair doesn't compete visually with the on-track/off-track
   status colours. Tokens flip in dark mode with the rest of the card. */
.goal-card__role-badge {
  padding: 2px var(--yc-sp-2);
  border-radius: var(--yc-radius-pill);
  font-size: var(--yc-fs-xs);
  font-weight: var(--yc-fw-semibold);
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.goal-card__role-badge--primary {
  background: var(--yc-teal-dark);
  color: var(--yc-white);
}
.goal-card__role-badge--secondary {
  background: transparent;
  color: var(--yc-fg);
  border: 1px solid var(--yc-border-strong);
}

/* GR.B — coach caseload breakdown chip (renders above the client
   list on the coach home). Compact, muted, hides when the whole
   caseload has zero typed AND zero legacy goals. */
.coach-breakdown {
  margin: var(--yc-sp-3) var(--yc-sp-4) 0;
  padding: var(--yc-sp-3) var(--yc-sp-4);
  background: var(--yc-surface);
  border: 1px solid var(--yc-border);
  border-radius: var(--yc-radius);
  box-shadow: var(--yc-shadow-sm);
}
.coach-breakdown__title {
  margin: 0 0 var(--yc-sp-1);
  font-size: var(--yc-fs-xs);
  font-weight: var(--yc-fw-semibold);
  color: var(--yc-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.coach-breakdown__line {
  font-size: var(--yc-fs-sm);
  color: var(--yc-fg);
}
.coach-breakdown__chips {
  display: flex; gap: var(--yc-sp-2); flex-wrap: wrap;
  margin-top: var(--yc-sp-2);
}
.coach-breakdown__unclassified {
  padding: 2px var(--yc-sp-2);
  border-radius: var(--yc-radius-pill);
  background: var(--yc-warn-soft);
  color: #8a5a00;
  font-size: var(--yc-fs-xs);
  font-weight: var(--yc-fw-semibold);
  cursor: help;
}

/* GR.B — classify-legacy nudge banner on goal-details. Muted card
   above the weekly section; disappears once the user picks a type
   or dismisses via "Keep as custom". */
.classify-nudge {
  margin: 0 var(--yc-sp-4) var(--yc-sp-3);
  padding: var(--yc-sp-3) var(--yc-sp-4);
  background: var(--yc-surface-raised);
  border: 1px dashed var(--yc-border-strong);
  border-radius: var(--yc-radius);
  display: flex; flex-direction: column; gap: var(--yc-sp-2);
}
.classify-nudge__title {
  margin: 0; font-size: var(--yc-fs-base);
  font-weight: var(--yc-fw-semibold);
  color: var(--yc-fg);
}
.classify-nudge__body {
  margin: 0; font-size: var(--yc-fs-sm);
  color: var(--yc-fg-muted);
}
.classify-nudge__replace {
  display: flex; gap: var(--yc-sp-2); align-items: center;
  font-size: var(--yc-fs-xs);
  color: var(--yc-fg-muted);
}
.classify-nudge__actions {
  display: flex; gap: var(--yc-sp-3); align-items: center;
}
.goal-card__desc {
  margin: 0;
  font-size: var(--yc-fs-sm);
  color: var(--yc-fg);
  opacity: 0.8;
}
.goal-card__metrics {
  display: flex;
  gap: var(--yc-sp-3);
  font-size: var(--yc-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--yc-fg);
  opacity: 0.8;
}
.goal-card__metric strong { font-size: var(--yc-fs-sm); }
.goal-card__bar {
  height: 6px;
  background: var(--yc-progress-track);
  border-radius: var(--yc-radius-pill);
  overflow: hidden;
}
.goal-card__bar-fill {
  height: 100%;
  background: var(--yc-success);
  transition: width 0.2s ease;
}
.goal-card__bar-fill--warn { background: var(--yc-warn); }
.goal-card__bar-fill--danger { background: var(--yc-danger); }
/* At 0% we still render the fill node so the DOM shape stays constant,
   but paint it in the track colour so nothing green shows through. */
.goal-card__bar-fill--empty { background: var(--yc-progress-track); }
.goal-card__last {
  margin: 0;
  font-size: var(--yc-fs-xs);
  color: var(--yc-fg);
  opacity: 0.7;
}
.goal-card__actions {
  display: flex;
  gap: var(--yc-sp-2);
  margin-top: var(--yc-sp-2);
  align-items: center;
}
/* View details grows to fill; Remind hugs its label so the row never wraps. */
.goal-card__toggle { flex: 1 1 auto; }
.goal-card__remind {
  flex: 0 0 auto;
  /* Compact pill: 8px vertical / 16px horizontal, so it hugs the label
     without towering over the View-details button next to it. */
  padding: 8px 16px;
  font-size: var(--yc-fs-sm);
  font-weight: var(--yc-fw-semibold);
}
/* Inline expand panel — appears above the actions row when the card is
   expanded (either by its own toggle or by the "Details" segment). Shows
   the numbers the summary card promises + a link to the full details page
   for the 7-dot grid, recent activities, and stats. */
.goal-card__details {
  margin-top: var(--yc-sp-3);
  padding: var(--yc-sp-3);
  background: var(--yc-grey);
  border-radius: var(--yc-radius);
}
.goal-card__stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--yc-sp-3);
  margin: 0 0 var(--yc-sp-3);
}
.goal-card__stat-grid > div { margin: 0; }
.goal-card__stat-grid dt {
  font-size: var(--yc-fs-xs);
  color: var(--yc-fg);
  opacity: 0.65;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.goal-card__stat-grid dd {
  margin: var(--yc-sp-1) 0 0;
  font-size: var(--yc-fs-base);
  font-weight: var(--yc-fw-semibold);
  color: var(--yc-fg);
}
.goal-card__more {
  display: inline-block;
  font-size: var(--yc-fs-sm);
  font-weight: var(--yc-fw-semibold);
  color: var(--yc-teal-dark);
  text-decoration: none;
}
.goal-card__more:hover { text-decoration: underline; }
.goal-form { padding: var(--yc-sp-4);
  padding-bottom: calc(var(--yc-nav-h) + var(--yc-sp-8) + 60px); }
.goal-form .section { margin-bottom: var(--yc-sp-4); }
.goal-form .section-label {
  display: block;
  margin-bottom: var(--yc-sp-2);
  font-weight: var(--yc-fw-semibold);
  font-size: var(--yc-fs-sm);
}
.goal-form .chip-row { display: flex; flex-wrap: wrap; gap: var(--yc-sp-2); }
.goal-form .duration-row .chip { flex: 1; text-align: center; min-width: 60px; }
.goal-form .chip.is-selected {
  background: var(--yc-teal);
  color: var(--yc-white);
  border-color: var(--yc-teal);
}
.freq-list { display: flex; flex-direction: column; gap: var(--yc-sp-2); }
.freq-row {
  display: flex;
  align-items: center;
  gap: var(--yc-sp-2);
  padding: var(--yc-sp-3);
  background: var(--yc-surface);
  border-radius: var(--yc-radius);
  border: 1px solid var(--yc-border);
  cursor: pointer;
}
.freq-row.is-selected {
  border-color: var(--yc-teal);
  background: rgba(86, 182, 193, 0.06);
}
.freq-row__label { flex: 1; }
/* #131 (2026-09-15) — grey out the Custom row while the custom
   editor is still on the roadmap. Existing goals saved as custom
   still display selected via `.is-selected`; new picks are blocked. */
.freq-row--disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.freq-row--disabled input[type="radio"] { cursor: not-allowed; }
.freq-row__badge {
  font-size: var(--yc-fs-xs);
  padding: 2px 8px;
  border-radius: var(--yc-radius-pill);
  border: 1px solid var(--yc-hairline);
  background: var(--yc-surface);
}
.reminder-switch-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--yc-sp-3);
  background: var(--yc-surface);
  border-radius: var(--yc-radius);
  border: 1px solid var(--yc-border);
}
.reminder-time-row {
  margin-top: var(--yc-sp-2);
  display: flex;
  gap: var(--yc-sp-2);
  align-items: center;
}
.motivation-card {
  background: var(--yc-teal);
  color: var(--yc-white);
  padding: var(--yc-sp-4);
  border-radius: var(--yc-radius);
}
.motivation-card__quote { font-style: italic; margin: 0; }
.motivation-card__author {
  display: block;
  margin-top: var(--yc-sp-2);
  font-size: var(--yc-fs-sm);
  opacity: 0.85;
}
.goal-form__footer { display: flex; gap: var(--yc-sp-2); margin-top: var(--yc-sp-4); }
.goal-form__footer .btn { flex: 1; }
.goal-details { padding-bottom: calc(var(--yc-nav-h) + var(--yc-sp-6)); }
.goal-details__section {
  margin: var(--yc-sp-4);
  padding: var(--yc-sp-4);
  background: var(--yc-surface);
  border-radius: var(--yc-radius);
  box-shadow: var(--yc-shadow-sm);
}
.goal-details__section-title {
  margin: 0 0 var(--yc-sp-3);
  font-size: var(--yc-fs-base);
  font-weight: var(--yc-fw-semibold);
}
.week-dots {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--yc-sp-2);
  text-align: center;
}
.week-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--yc-sp-1);
  font-size: var(--yc-fs-xs);
  color: var(--yc-fg);
  opacity: 0.75;
}
.week-dot__circle {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--yc-progress-track);
  color: var(--yc-fg);
  font-weight: var(--yc-fw-semibold);
}
.week-dot--done .week-dot__circle {
  background: var(--yc-success);
  color: var(--yc-white);
}
.week-dot--missed .week-dot__circle {
  background: var(--yc-danger-soft);
  color: var(--yc-danger);
}
.week-dot--today .week-dot__circle {
  background: var(--yc-warn-soft);
  color: var(--yc-warn);
  outline: 2px solid var(--yc-warn);
}
.recent-list { display: flex; flex-direction: column; gap: var(--yc-sp-2); }
.recent-row {
  display: flex;
  gap: var(--yc-sp-3);
  align-items: center;
  padding: var(--yc-sp-3);
  border-radius: var(--yc-radius);
  background: var(--yc-grey);
}
.recent-row--missed { background: var(--yc-danger-soft); }
.recent-row__icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--yc-teal);
  color: var(--yc-white);
  display: grid;
  place-items: center;
  font-weight: var(--yc-fw-semibold);
}
.recent-row__body { flex: 1; }
.recent-row__title { font-weight: var(--yc-fw-semibold); }
.recent-row__sub { font-size: var(--yc-fs-xs); opacity: 0.75; }
.recent-row__status--completed { color: var(--yc-success); font-size: var(--yc-fs-sm); }
.recent-row__status--missed { color: var(--yc-danger); font-size: var(--yc-fs-sm); }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--yc-sp-2); }
.stat-tile {
  padding: var(--yc-sp-3);
  background: var(--yc-grey);
  border-radius: var(--yc-radius);
  text-align: center;
}
.stat-tile__value { font-size: 1.4rem; font-weight: var(--yc-fw-semibold); }
.stat-tile__label {
  font-size: var(--yc-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.75;
  margin-top: var(--yc-sp-1);
}
.goal-fab {
  position: fixed;
  right: var(--yc-sp-4);
  bottom: calc(var(--yc-nav-h) + var(--yc-sp-4));
  /* 44×44 to match .activity-fab / .profile-fab — same tap target
     across every FAB in the app. */
  width: 44px; height: 44px;
  min-width: 44px; min-height: 44px;
  border-radius: 999px;
  background: var(--yc-orange);
  color: var(--yc-white);
  border: 0;
  /* line-height:1 tightens the em-box; the "+" glyph then sits on the
     geometric centre. font-weight:400 keeps the crossbar readable at 44px. */
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  display: grid;
  place-items: center;
  padding-bottom: 3px;  /* optical nudge — "+" reads ~2px high in this font */
  box-shadow: var(--yc-shadow-md);
  text-decoration: none;
}

/* Category icon glyph — sits inline with the label in both the reminder
   card chip and the form's category picker. Vertical-align middle so
   the baseline matches the text height. */
.cat-icon {
  display: inline-block;
  vertical-align: middle;
  margin-right: 2px;
  object-fit: contain;
}

/* Daily Journal toggle card — sits at the top of the reminders screen.
   OFF state: title + "Off" sub-label + toggle switch on the right.
   ON  state: expands to reveal Remind me at (time pill) + Repeat rows. */
.journal-card {
  margin: var(--yc-sp-3) var(--yc-sp-4) 0;
  padding: var(--yc-sp-3) var(--yc-sp-4);
  background: var(--yc-surface);
  border: 1.5px solid var(--yc-teal);
  border-radius: var(--yc-radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--yc-sp-3);
  box-shadow: var(--yc-shadow-sm);
}
.journal-card--on {
  background: rgba(86, 182, 193, 0.06);
}
.journal-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--yc-sp-3);
}
.journal-card__head { min-width: 0; }
.journal-card__title-row {
  display: flex;
  align-items: baseline;
  gap: var(--yc-sp-2);
}
.journal-card__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: var(--yc-fw-bold);
  color: var(--yc-fg);
}
.journal-card__chevron {
  font-size: 1.2rem;
  color: var(--yc-fg-subtle);
  line-height: 1;
}
.journal-card__sub {
  margin-top: 2px;
  font-size: var(--yc-fs-sm);
  color: var(--yc-teal-dark);
  font-weight: var(--yc-fw-semibold);
}
.journal-card:not(.journal-card--on) .journal-card__sub {
  color: var(--yc-fg-muted);
  font-weight: var(--yc-fw-regular);
}

/* Toggle switch — a 44x24 pill with a 20x20 white thumb. */
.journal-toggle {
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: rgba(0, 44, 66, 0.15);
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: background 160ms ease-out;
  flex-shrink: 0;
}
.journal-toggle--on { background: var(--yc-teal); }
.journal-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--yc-surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: transform 160ms ease-out;
}
.journal-toggle--on .journal-toggle__thumb {
  transform: translateX(20px);
}

.journal-card__config-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--yc-sp-3);
}
.journal-card__label {
  color: var(--yc-fg);
  font-size: var(--yc-fs-base);
}
.journal-card__pill {
  background: var(--yc-teal);
  color: var(--yc-white);
  border: none;
  padding: 6px 16px;
  border-radius: var(--yc-radius-pill);
  font-weight: var(--yc-fw-semibold);
  font-size: var(--yc-fs-sm);
  cursor: pointer;
  font-family: inherit;
}
.journal-card__pill--input {
  /* Native time input styled as the pill — the browser handles the UI. */
  color: var(--yc-white);
  -webkit-appearance: none;
  appearance: none;
}
.journal-card__pill--input::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.85;
}

/* ── Journal ───────────────────────────────────────────────────────────
   One entry per day. Auto-saves 700ms after typing stops (and on blur).
   Textarea grows tall; the recent-entries strip below the writing card
   is quick date navigation. */
.journal-entry {
  margin: var(--yc-sp-4);
  padding: var(--yc-sp-4);
  background: var(--yc-surface);
  border-radius: var(--yc-radius-lg);
  box-shadow: var(--yc-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--yc-sp-3);
}
.journal-entry__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--yc-sp-3);
}
.journal-entry__title {
  margin: 0;
  font-size: var(--yc-fs-xl);
  color: var(--yc-fg);
}
.journal-entry__status {
  font-size: var(--yc-fs-xs);
  color: var(--yc-fg-subtle);
}
.journal-entry__textarea {
  /* Auto-grow + shorter start (Jeanndre 2026-09-10). field-sizing:
     content lets the browser size the textarea to its contents
     natively (Chrome/Edge/Safari); the JS handler in journal.js
     handles Firefox + older browsers. Radius matches the title
     input's --yc-radius-lg for form consistency. */
  width: 100%;
  min-height: 84px;
  max-height: 400px;
  padding: var(--yc-sp-3);
  border: 1px solid var(--yc-border);
  border-radius: var(--yc-radius-lg);
  font-family: inherit;
  font-size: 1rem;
  color: var(--yc-fg);
  background: var(--yc-surface);
  resize: none;
  field-sizing: content;
  line-height: var(--yc-lh-body);
  box-sizing: border-box;
  overflow-y: auto;
}
.journal-entry__textarea::placeholder {
  color: var(--yc-fg-subtle);
}
/* Body-head row (d6 2026-09-10) — pairs the section title with a
   live word count on the right; the count updates on every input so
   the client sees their reflection stack up. */
.journal-entry__body-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--yc-sp-3);
  margin-bottom: var(--yc-sp-2);
}
.journal-entry__words {
  font-size: var(--yc-fs-xs);
  color: var(--yc-fg-muted);
  font-variant-numeric: tabular-nums;
}
/* Recent-entries empty note — soft muted paragraph the client sees
   on their first day, so the section header does not sit above an
   empty box. */
.journal-recent__empty {
  margin: 0;
  padding: var(--yc-sp-2) var(--yc-sp-3);
  background: var(--yc-surface);
  border: 1px dashed var(--yc-border);
  border-radius: var(--yc-radius);
  font-size: var(--yc-fs-sm);
}
.journal-recent__mood {
  margin-left: var(--yc-sp-1);
  font-size: var(--yc-fs-sm);
}

/* Journal form polish (Jeanndre 2026-09-10). */
/* Title input matches the textareas' radius for form consistency;
   inside the Journal context only, so global .pill-input pills are
   unchanged. */
client-journal .pill-input,
client-journal .pill-input--light {
  border-radius: var(--yc-radius-lg);
}
/* Wrapper reserves room for the client bottom nav so the Save-entry
   button + last input never sit behind the fixed nav. */
client-journal {
  display: block;
  padding-bottom: calc(var(--yc-bottom-nav-h) + var(--yc-sp-6) + env(safe-area-inset-bottom, 0px));
}
.journal-entry__save-row {
  display: flex;
  justify-content: flex-end;
  padding: 0 var(--yc-sp-4) var(--yc-sp-4);
}
.journal-entry__save {
  min-width: 160px;
}

.journal-recent {
  margin: 0 var(--yc-sp-4) var(--yc-sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--yc-sp-2);
}
.journal-recent__title {
  margin: 0 0 var(--yc-sp-1);
  font-size: var(--yc-fs-lg);
  color: var(--yc-fg);
}
.journal-recent__row {
  display: block;
  background: var(--yc-surface);
  border: 1px solid var(--yc-border);
  border-radius: var(--yc-radius);
  padding: var(--yc-sp-2) var(--yc-sp-3);
  text-decoration: none;
  color: var(--yc-fg);
}
.journal-recent__row.is-current {
  border-color: var(--yc-teal);
  background: rgba(86, 182, 193, 0.06);
}
.journal-recent__date {
  font-size: var(--yc-fs-sm);
  font-weight: var(--yc-fw-semibold);
  color: var(--yc-teal-dark);
}
.journal-recent__preview {
  font-size: var(--yc-fs-sm);
  color: var(--yc-fg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Journal — guided prompts + mood chips (2026-09-10). Prompts collapsed
   by default so the clean freeform view stays the default look. Each
   prompt card has a +/- toggle top-right; expanded state reveals a
   textarea. Mood chips at the bottom mirror the mock's four options. */
.journal-entry__section-title {
  margin: 0 0 var(--yc-sp-2);
  font-size: var(--yc-fs-lg);
  color: var(--yc-fg);
  font-weight: var(--yc-fw-semibold);
}
.journal-prompt {
  margin: 0 var(--yc-sp-4) var(--yc-sp-3);
  padding: var(--yc-sp-3) var(--yc-sp-4);
  background: var(--yc-surface);
  border-radius: var(--yc-radius-lg);
  box-shadow: var(--yc-shadow-sm);
}
.journal-prompt__head {
  display: flex;
  align-items: flex-start;
  gap: var(--yc-sp-3);
  justify-content: space-between;
}
.journal-prompt__label {
  margin: 0;
  font-size: var(--yc-fs-base);
  font-weight: var(--yc-fw-semibold);
  color: var(--yc-fg);
  line-height: 1.35;
}
.journal-prompt__toggle {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--yc-border);
  font-size: 18px;
  line-height: 1;
  color: var(--yc-fg);
  cursor: pointer;
}
.journal-prompt__toggle:hover { background: var(--yc-grey); }
.journal-prompt__textarea {
  width: 100%;
  margin-top: var(--yc-sp-3);
  min-height: 64px;
  max-height: 400px;
  padding: var(--yc-sp-3);
  border: 1px solid var(--yc-border);
  border-radius: var(--yc-radius-lg);
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--yc-fg);
  background: var(--yc-surface);
  resize: none;
  field-sizing: content;
  line-height: var(--yc-lh-body);
  box-sizing: border-box;
  overflow-y: auto;
}
.journal-prompt__textarea::placeholder {
  color: var(--yc-fg-subtle);
}

.journal-mood {
  margin: 0 var(--yc-sp-4) var(--yc-sp-4);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--yc-sp-2);
}
.journal-mood__chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--yc-sp-2);
  background: var(--yc-surface);
  border: 1.5px solid var(--yc-border);
  border-radius: var(--yc-radius-lg);
  cursor: pointer;
  font: inherit;
  color: var(--yc-fg);
  transition: border-color 120ms ease-out, background 120ms ease-out;
}
.journal-mood__chip:hover { border-color: var(--yc-teal); }
.journal-mood__chip.is-active {
  border-color: var(--yc-teal);
  background: rgba(86, 182, 193, 0.08);
}
.journal-mood__chip--happy.is-active {
  border-color: var(--yc-success);
  background: var(--yc-success-soft);
}
.journal-mood__emoji { font-size: 22px; line-height: 1; }
.journal-mood__label { font-size: var(--yc-fs-sm); font-weight: var(--yc-fw-semibold); }

/* ── Client Activity tab ───────────────────────────────────────────────
   Persistent list of every activity the coach has assigned, with a
   this-week completion bar per card. Colour tier mirrors the coach's
   .activity-card__tally so both sides read the same visual language. */
.my-activities {
  padding: var(--yc-sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--yc-sp-3);
}
.my-activity {
  background: var(--yc-surface);
  border: 1px solid var(--yc-border);
  border-radius: var(--yc-radius-lg);
  box-shadow: var(--yc-shadow-sm);
  padding: var(--yc-sp-3) var(--yc-sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--yc-sp-2);
}
.my-activity__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--yc-sp-3);
}
.my-activity__title {
  margin: 0;
  font-size: 1rem;
  font-weight: var(--yc-fw-bold);
  color: var(--yc-fg);
}
.my-activity__meta {
  margin: 0;
  color: var(--yc-fg-muted);
  font-size: var(--yc-fs-sm);
}
.my-activity__details {
  margin: 0;
  font-size: var(--yc-fs-sm);
  color: var(--yc-fg-muted);
}
/* Category disc (Jeanndre 2026-09-11) — replaces the category pill on
   both client (.my-activity) and coach (.activity-card) rows. All four
   categories ship as self-contained SVG badges now (tinted circle +
   white glyph inside one file), so `.activity-disc` is a pure 40x40
   positioning wrapper — no background, no filter. */
.activity-disc {
  width: 40px; height: 40px;
  flex-shrink: 0;
  display: inline-grid; place-items: center;
}
.activity-disc__icon { width: 40px; height: 40px; display: block; }
/* Head rows on both cards now start with a disc — allow it to sit
   left with the title/meta stacking to its right. Title column takes
   remaining space; the play/menu control stays on the far right. */
.my-activity__head .my-activity__title,
.activity-card__head .activity-card__title { flex: 1; min-width: 0; }
.my-activity__week {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: var(--yc-sp-1);
}
.my-activity__week-label {
  font-size: var(--yc-fs-xs);
  color: var(--yc-fg-muted);
  font-weight: var(--yc-fw-semibold);
}
.my-activity__bar {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--yc-progress-track);
  overflow: hidden;
}
.my-activity__bar-fill {
  height: 100%;
  border-radius: inherit;
  transition: width 220ms ease-out;
}
.my-activity--complete .my-activity__bar-fill { background: var(--yc-success); }
.my-activity--partial  .my-activity__bar-fill { background: var(--yc-teal-dark); }
.my-activity--low      .my-activity__bar-fill { background: var(--yc-orange); }
.my-activity--none     .my-activity__week-label { color: var(--yc-fg-subtle); }

/* Reminder form — weekly day picker (2026-09-10). Row of 7 chips
   below the frequency row, orange fill when selected (same rule as
   the coach's advanced-scheduling day chips). */
.reminder-form__days {
  display: flex;
  flex-wrap: wrap;
  gap: var(--yc-sp-2);
  margin-top: var(--yc-sp-2);
}

/* Conversation list — new-conversation section header + row hint chip
   for eligible thread partners the caller hasn't messaged yet. */
.conv-list__section {
  margin: var(--yc-sp-4) 0 var(--yc-sp-1);
  font-size: var(--yc-fs-sm);
  font-weight: var(--yc-fw-semibold);
  color: var(--yc-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.conv-row--new .conv-row__preview { opacity: 0.7; }
.conv-row__new-chip {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--yc-teal);
  color: var(--yc-white);
  font-size: 18px;
  font-weight: var(--yc-fw-bold);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Activity timer play button (client Activity cards) ─────────────
   Small teal circle on the right of the card head. Flips to grey ❚❚
   while running and back to teal ▶ when paused/idle. Hidden by the
   card renderer when the activity is already completed today. */
.my-activity__play {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 0;
  background: var(--yc-teal);
  color: var(--yc-white);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.my-activity__play:focus-visible {
  outline: var(--yc-focus); outline-offset: var(--yc-focus-offset);
}
.my-activity__play--active {
  background: rgba(0, 44, 66, 0.55);
}
.my-activity__timer-btns {
  display: flex; gap: var(--yc-sp-2);
  margin-top: var(--yc-sp-2);
}
.my-activity__timer-btn {
  border: 1px solid var(--yc-border);
  background: var(--yc-surface);
  color: var(--yc-fg);
  border-radius: var(--yc-radius-pill);
  padding: 6px 14px;
  font: inherit;
  font-size: var(--yc-fs-sm);
  cursor: pointer;
}
.my-activity__timer-btn--stop {
  background: var(--yc-orange);
  color: var(--yc-white);
  border-color: transparent;
  /* Task #64.5 (Dez 2026-09-11): the stop button was measured at 57x31,
     visually mismatched against the sibling 40x40 play button. Resized
     to 40x40 square, icon-only ("Stop" moves to aria-label). */
  width: 40px;
  height: 40px;
  border-radius: var(--yc-radius-pill);
  padding: 0;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  line-height: 1;
}
.activity-timer-pill__btn--hide {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  font-size: 1rem;
}

/* ── Activity timer pill ──────────────────────────────────────────
   Sticky above the client bottom nav on every screen while a timer
   is running. Category-tinted progress bar underneath for
   duration-unit activities. */
activity-timer-pill {
  position: fixed;
  left: var(--yc-sp-3);
  right: var(--yc-sp-3);
  bottom: calc(var(--yc-nav-h) + env(safe-area-inset-bottom, 0px) + var(--yc-sp-2));
  z-index: 15;
  background: var(--yc-teal-dark, var(--yc-teal));
  color: var(--yc-white);
  border-radius: var(--yc-radius-lg);
  box-shadow: 0 6px 20px rgba(0, 44, 66, 0.18);
  padding: 8px 10px;
  display: block;
}
.activity-timer-pill__row {
  display: flex; align-items: center; gap: var(--yc-sp-2);
}
.activity-timer-pill__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--yc-cat-other, var(--yc-white));
  flex-shrink: 0;
}
.activity-timer-pill__dot--body  { background: var(--yc-cat-body); }
.activity-timer-pill__dot--mind  { background: var(--yc-cat-mind); }
.activity-timer-pill__dot--soul  { background: var(--yc-cat-soul); }
.activity-timer-pill__dot--other { background: var(--yc-cat-other); }
.activity-timer-pill__title {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: var(--yc-fw-semibold);
}
.activity-timer-pill__time {
  font-variant-numeric: tabular-nums;
  font-weight: var(--yc-fw-semibold);
}
.activity-timer-pill__btn {
  width: 32px; height: 32px;
  border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, 0.16);
  color: var(--yc-white);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.85rem; line-height: 1;
  flex-shrink: 0;
}
.activity-timer-pill__btn:focus-visible {
  outline: var(--yc-focus); outline-offset: var(--yc-focus-offset);
}
.activity-timer-pill__btn--stop { background: var(--yc-orange); }
.activity-timer-pill__bar {
  margin-top: 6px;
  height: 4px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  overflow: hidden;
}
.activity-timer-pill__bar-fill {
  height: 100%;
  background: var(--yc-surface);
  transition: width 0.3s ease;
}
.activity-timer-pill__bar-fill--body  { background: var(--yc-cat-body); }
.activity-timer-pill__bar-fill--mind  { background: var(--yc-cat-mind); }
.activity-timer-pill__bar-fill--soul  { background: var(--yc-cat-soul); }
.activity-timer-pill__bar-fill--other { background: var(--yc-cat-other); }

/* ── Progress screen (coach → client) ─────────────────────────────────── */
.progress-page {
  padding: var(--yc-sp-4);
  padding-bottom: calc(var(--yc-nav-h) + var(--yc-sp-8) + 60px);
  display: flex;
  flex-direction: column;
  gap: var(--yc-sp-4);
}

/* Month swiper — ‹ centred label ›. Native <input type="month"> sits on
   top of the label at zero opacity so a tap opens the OS picker. */
.progress-month {
  display: flex;
  align-items: center;
  gap: var(--yc-sp-3);
  background: var(--yc-surface);
  border-radius: var(--yc-radius);
  box-shadow: var(--yc-shadow-sm);
  padding: var(--yc-sp-3) var(--yc-sp-4);
}
.progress-month__nav {
  border: 0;
  background: transparent;
  color: var(--yc-teal-dark);
  font-size: var(--yc-fs-xl);
  font-weight: var(--yc-fw-semibold);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
}
.progress-month__nav:disabled,
.progress-month__nav.is-disabled { opacity: 0.35; cursor: not-allowed; }
.progress-month__label {
  flex: 1;
  text-align: center;
  position: relative;
  cursor: pointer;
}
.progress-month__input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  border: 0;
  padding: 0;
  font: inherit;
}
.progress-month__title {
  display: block;
  font-size: var(--yc-fs-lg);
  font-weight: var(--yc-fw-semibold);
  color: var(--yc-fg);
}
.progress-month__sub {
  display: block;
  font-size: var(--yc-fs-xs);
  color: var(--yc-fg);
  opacity: 0.55;
  margin-top: 2px;
}

/* Overall Progress hero — soft sky teal card, big pct + streak. */
.progress-hero {
  background: var(--yc-progress-hero-bg);
  color: var(--yc-white);
  border-radius: var(--yc-radius-lg);
  padding: var(--yc-sp-5);
  box-shadow: var(--yc-shadow-md);
}
.progress-hero__lbl {
  margin: 0 0 var(--yc-sp-3);
  font-size: var(--yc-fs-base);
  font-weight: var(--yc-fw-semibold);
}
.progress-hero__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--yc-sp-4);
}
.progress-hero__pct {
  font-size: 2.5rem;
  font-weight: var(--yc-fw-bold);
  line-height: 1;
}
.progress-hero__sub {
  font-size: var(--yc-fs-sm);
  margin-top: var(--yc-sp-2);
  opacity: 0.9;
}
.progress-hero__streak { text-align: right; }
.progress-hero__streak-num {
  font-size: var(--yc-fs-xl);
  font-weight: var(--yc-fw-bold);
  line-height: 1;
}
.progress-hero__streak-lbl {
  font-size: var(--yc-fs-xs);
  opacity: 0.9;
  margin-top: var(--yc-sp-1);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Activity Completion — 4 fixed bars, category-tinted, with a legend row. */
.progress-chart {
  background: var(--yc-surface);
  border-radius: var(--yc-radius);
  box-shadow: var(--yc-shadow-sm);
  padding: var(--yc-sp-4);
}
.progress-chart__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--yc-sp-2);
}
.progress-chart__title {
  margin: 0;
  font-size: var(--yc-fs-lg);
  font-weight: var(--yc-fw-semibold);
  color: var(--yc-fg);
}
.progress-chart__link {
  font-size: var(--yc-fs-sm);
  color: var(--yc-teal-dark);
  text-decoration: none;
  font-weight: var(--yc-fw-medium);
}
.progress-chart__link:hover { text-decoration: underline; }
.progress-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--yc-sp-3);
  margin: var(--yc-sp-3) 0;
  font-size: var(--yc-fs-xs);
  color: var(--yc-fg);
}
.progress-chart__legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--yc-sp-1);
}
.progress-chart__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.progress-chart__dot--body  { background: var(--yc-cat-body); }
.progress-chart__dot--mind  { background: var(--yc-cat-mind); }
.progress-chart__dot--soul  { background: var(--yc-cat-soul); }
.progress-chart__dot--other { background: var(--yc-cat-other); }

.progress-chart__bars {
  display: flex;
  align-items: flex-end;
  gap: var(--yc-sp-3);
  height: var(--yc-chart-bar-height);
  padding-top: var(--yc-sp-2);
}
.progress-chart__col {
  flex: 1;
  min-width: var(--yc-chart-bar-min-width);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--yc-sp-1);
  height: 100%;
}
.progress-chart__bar-track {
  height: 100px;               /* pin so pixel bar heights are meaningful */
  flex-shrink: 0;              /* stop the flex column from squeezing us */
  width: 100%;
  display: flex;
  align-items: flex-end;
  background: var(--yc-progress-track);
  border-radius: var(--yc-radius-sm);
  overflow: hidden;
}
.progress-chart__bar {
  width: 100%;
  min-height: 4px;
  border-radius: var(--yc-radius-sm) var(--yc-radius-sm) 0 0;
  transition: height 0.24s ease;
}
.progress-chart__bar--body  { background: var(--yc-cat-body); }
.progress-chart__bar--mind  { background: var(--yc-cat-mind); }
.progress-chart__bar--soul  { background: var(--yc-cat-soul); }
.progress-chart__bar--other { background: var(--yc-cat-other); }
.progress-chart__val {
  font-size: var(--yc-fs-xs);
  color: var(--yc-fg);
  opacity: 0.7;
}

/* Activity Categories — one card per non-empty category. Whole card is
   a link to /coach/clients/:id/activities?category=<key>. */
.progress-cats {
  display: flex;
  flex-direction: column;
  gap: var(--yc-sp-3);
}
.progress-cats__title,
.progress-goals__title {
  margin: var(--yc-sp-2) 0 0;
  font-size: var(--yc-fs-lg);
  font-weight: var(--yc-fw-semibold);
  color: var(--yc-fg);
}
.progress-cats__empty,
.progress-goals__empty {
  padding: var(--yc-sp-4);
  background: var(--yc-surface);
  border-radius: var(--yc-radius);
  box-shadow: var(--yc-shadow-sm);
}
.progress-cat {
  display: block;
  background: var(--yc-surface);
  border-radius: var(--yc-radius);
  box-shadow: var(--yc-shadow-sm);
  padding: var(--yc-sp-4);
  color: inherit;
  text-decoration: none;
}
.progress-cat__head {
  display: flex;
  align-items: center;
  gap: var(--yc-sp-3);
}
.progress-cat__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  /* Soft category tint — matches the chip-on-white pattern used
     elsewhere; the icon inside is the full category colour, so
     everything reads as one system. */
  background: color-mix(in srgb, var(--yc-cat-other) 15%, white);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.progress-cat--body  .progress-cat__icon { background: color-mix(in srgb, var(--yc-cat-body) 15%, white); }
.progress-cat--mind  .progress-cat__icon { background: color-mix(in srgb, var(--yc-cat-mind) 15%, white); }
.progress-cat--soul  .progress-cat__icon { background: color-mix(in srgb, var(--yc-cat-soul) 15%, white); }
.progress-cat--other .progress-cat__icon { background: color-mix(in srgb, var(--yc-cat-other) 15%, white); }
.progress-cat__icon-glyph { width: 24px; height: 24px; display: block; }
.progress-cat__meta { flex: 1; min-width: 0; }
.progress-cat__title {
  margin: 0;
  font-size: var(--yc-fs-base);
  font-weight: var(--yc-fw-semibold);
  color: var(--yc-fg);
}
.progress-cat__count {
  margin: 2px 0 0;
  font-size: var(--yc-fs-sm);
  color: var(--yc-fg);
  opacity: 0.7;
}
.progress-cat__streak {
  display: inline-flex;
  align-items: center;
  gap: var(--yc-sp-1);
  font-size: var(--yc-fs-sm);
  font-weight: var(--yc-fw-semibold);
  color: var(--yc-orange);
}
.progress-cat__flame { line-height: 1; }
.progress-cat__bar {
  height: 8px;
  background: var(--yc-progress-track);
  border-radius: var(--yc-radius-pill);
  overflow: hidden;
  margin-top: var(--yc-sp-3);
}
.progress-cat__bar-fill {
  height: 100%;
  border-radius: var(--yc-radius-pill);
  background: var(--yc-teal-dark);
  transition: width 0.24s ease;
}
.progress-cat__bar-fill--body  { background: var(--yc-cat-body); }
.progress-cat__bar-fill--mind  { background: var(--yc-cat-mind); }
.progress-cat__bar-fill--soul  { background: var(--yc-cat-soul); }
.progress-cat__bar-fill--other { background: var(--yc-cat-other); }
.progress-cat__pct {
  margin: var(--yc-sp-1) 0 0;
  font-size: var(--yc-fs-xs);
  color: var(--yc-fg);
  opacity: 0.7;
  text-align: right;
}

/* Goal Progress — compact goalCard variant. Whole card is a link. */
.progress-goals {
  display: flex;
  flex-direction: column;
  gap: var(--yc-sp-3);
}
.progress-goal-link {
  text-decoration: none;
  color: inherit;
  display: block;
}
.goal-card--compact {
  padding: var(--yc-sp-4);
  background: var(--yc-surface);
  border-radius: var(--yc-radius);
  box-shadow: var(--yc-shadow-sm);
}
.goal-card__compact-row {
  display: flex;
  align-items: center;
  gap: var(--yc-sp-3);
}
/* Compact card sits on a WHITE surface (used on Progress screen), so
   the disc uses the soft category tint pattern; the icon inside stays
   the full category colour to pop. Matches .progress-cat__icon so the
   two card families read as one system. */
.goal-card--compact .goal-card__icon {
  background: color-mix(in srgb, var(--yc-cat-other) 15%, white);
}
.goal-card--compact.goal-card--body  .goal-card__icon { background: color-mix(in srgb, var(--yc-cat-body) 15%, white); }
.goal-card--compact.goal-card--mind  .goal-card__icon { background: color-mix(in srgb, var(--yc-cat-mind) 15%, white); }
.goal-card--compact.goal-card--soul  .goal-card__icon { background: color-mix(in srgb, var(--yc-cat-soul) 15%, white); }
.goal-card--compact.goal-card--other .goal-card__icon { background: color-mix(in srgb, var(--yc-cat-other) 15%, white); }
/* Compact glyph is the coloured PNG (no filter) so it pops on the
   soft-tint disc. Same 22×22 as the teal-hero variant for optical size. */
.goal-card--compact .goal-card__icon-glyph {
  width: 22px; height: 22px; display: block;
}
.goal-card__compact-meta { flex: 1; min-width: 0; }
.goal-card__compact-sub {
  margin: 2px 0 0;
  font-size: var(--yc-fs-xs);
  color: var(--yc-fg);
  opacity: 0.7;
}
.goal-card__compact-count {
  margin: 2px 0 0;
  font-size: var(--yc-fs-sm);
  color: var(--yc-fg);
  opacity: 0.85;
}
.goal-card__compact-glyph {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: var(--yc-fs-base);
  font-weight: var(--yc-fw-bold);
  color: var(--yc-white);
}
.goal-card__compact-glyph--on_track        { background: var(--yc-success); }
.goal-card__compact-glyph--needs_attention { background: var(--yc-warn); }
.goal-card__compact-glyph--off_track       { background: var(--yc-danger); }

/* Coach Insight — teal card at the bottom of the screen. */
.progress-insight {
  background: var(--yc-teal-dark);
  color: var(--yc-white);
  border-radius: var(--yc-radius);
  padding: var(--yc-sp-4);
  display: flex;
  gap: var(--yc-sp-3);
  align-items: flex-start;
}
.progress-insight__icon {
  font-size: var(--yc-fs-lg);
  line-height: 1;
}
.progress-insight__body {
  margin: 0;
  font-size: var(--yc-fs-sm);
  line-height: var(--yc-lh-body);
}

/* Assign-new-activity floating pill — orange, bottom-right above the nav. */
.progress-assign-fab {
  position: fixed;
  right: var(--yc-sp-4);
  bottom: calc(var(--yc-nav-h) + var(--yc-sp-4));
  z-index: 20;
  background: var(--yc-orange);
  color: var(--yc-white);
  border-radius: var(--yc-radius-pill);
  padding: var(--yc-sp-3) var(--yc-sp-5);
  text-decoration: none;
  box-shadow: var(--yc-shadow-md);
  display: inline-flex;
  align-items: center;
  gap: var(--yc-sp-2);
  font-weight: var(--yc-fw-semibold);
  font-size: var(--yc-fs-sm);
}
.progress-assign-fab__plus {
  font-size: var(--yc-fs-lg);
  line-height: 1;
}

/* ── Notifications inbox (/notifications) ─────────────────────────────
   Bell in the header + full-page inbox. Type tints reuse the palette
   tokens (message = teal, goal = warn/orange, activity = success,
   coach = orange, system = grey) — every colour/radius/size below
   references a --yc-* token. */
.notif-page {
  padding: var(--yc-sp-4) var(--yc-sp-4) calc(var(--yc-nav-h) + var(--yc-sp-6));
  max-width: 720px;
  margin: 0 auto;
}
.notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--yc-sp-3);
  margin-bottom: var(--yc-sp-4);
}
.notif-title {
  font-size: var(--yc-fs-xl);
  font-weight: var(--yc-fw-bold);
  color: var(--yc-fg);
  margin: 0;
}
.notif-mark-all {
  color: var(--yc-teal-dark);
  font-weight: var(--yc-fw-semibold);
  font-size: var(--yc-fs-sm);
  background: none;
  border: 0;
  padding: var(--yc-sp-2) var(--yc-sp-3);
  cursor: pointer;
}
.notif-mark-all:hover { color: var(--yc-teal); }

.notif-empty {
  text-align: center;
  padding: var(--yc-sp-8) var(--yc-sp-4);
  color: var(--yc-fg);
}
.notif-empty__glyph {
  width: 64px; height: 64px;
  border-radius: var(--yc-radius-pill);
  background: color-mix(in srgb, var(--yc-success) 15%, white);
  color: var(--yc-success);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 28px;
  margin-bottom: var(--yc-sp-4);
}
.notif-empty__title {
  font-size: var(--yc-fs-lg);
  font-weight: var(--yc-fw-semibold);
  margin: 0 0 var(--yc-sp-2);
}
.notif-empty__body {
  color: color-mix(in srgb, var(--yc-body) 60%, white);
  font-size: var(--yc-fs-sm);
  margin: 0;
}

.notif-group {
  font-size: var(--yc-fs-sm);
  font-weight: var(--yc-fw-semibold);
  color: color-mix(in srgb, var(--yc-body) 55%, white);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: var(--yc-sp-5) 0 var(--yc-sp-2);
}
.notif-group:first-of-type { margin-top: 0; }

.notif-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--yc-sp-2);
}
.notif-row {
  background: var(--yc-surface);
  border-radius: var(--yc-radius);
  box-shadow: var(--yc-shadow-sm);
  position: relative;
  overflow: hidden;
  transition: transform 120ms ease;
}
.notif-row--unread { box-shadow: var(--yc-shadow-md); }
.notif-row__link {
  display: flex;
  align-items: flex-start;
  gap: var(--yc-sp-3);
  padding: var(--yc-sp-3) var(--yc-sp-4);
  text-decoration: none;
  color: inherit;
}
.notif-disc {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--yc-radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.notif-disc svg { width: 20px; height: 20px; }
.notif-disc--teal    { background: color-mix(in srgb, var(--yc-teal)       15%, white); color: var(--yc-teal-dark); }
.notif-disc--warn    { background: color-mix(in srgb, var(--yc-warn)       15%, white); color: var(--yc-warn); }
.notif-disc--success { background: color-mix(in srgb, var(--yc-success)    15%, white); color: var(--yc-success); }
.notif-disc--orange  { background: color-mix(in srgb, var(--yc-orange)     15%, white); color: var(--yc-orange); }
.notif-disc--grey    { background: color-mix(in srgb, var(--yc-cat-other)  15%, white); color: var(--yc-cat-other); }

.notif-row__meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--yc-sp-1);
}
.notif-row__title {
  font-weight: var(--yc-fw-semibold);
  color: var(--yc-fg);
  font-size: var(--yc-fs-base);
  line-height: var(--yc-lh-tight);
}
.notif-row__body {
  color: color-mix(in srgb, var(--yc-body) 70%, white);
  font-size: var(--yc-fs-sm);
  line-height: var(--yc-lh-body);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.notif-row__time {
  color: color-mix(in srgb, var(--yc-body) 50%, white);
  font-size: var(--yc-fs-xs);
  margin-top: var(--yc-sp-1);
}
.notif-row__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: var(--yc-radius-pill);
  background: var(--yc-teal);
  align-self: center;
}
.notif-row__dismiss {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  border-radius: var(--yc-radius-pill);
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--yc-body) 50%, white);
  font-size: var(--yc-fs-lg);
  line-height: 1;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
}
.notif-row:hover .notif-row__dismiss { display: inline-flex; }
.notif-row__dismiss:hover { color: var(--yc-danger); }

/* ── Header bell ─────────────────────────────────────────────────── */
.app-header-bell {
  position: relative;
  background: transparent;
  border: 0;
  padding: var(--yc-sp-2);
  border-radius: var(--yc-radius-pill);
  color: var(--yc-fg);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.app-header-bell:hover {
  background: color-mix(in srgb, var(--yc-body) 6%, white);
}
.app-header-bell__badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--yc-radius-pill);
  background: var(--yc-danger);
  color: var(--yc-white);
  font-size: 10px;
  font-weight: var(--yc-fw-bold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.app-header-bell__dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: var(--yc-radius-pill);
  background: var(--yc-danger);
}


/* ── Login (Concept 02 "Return to the day") ────────────────────────────
   Minimum chrome, largest possible tap targets. Named greeting when we
   remember the browser; time-aware sub-line reads consistently with the
   morning/afternoon/evening slot on the client home. See renderLogin. */
/* Sunrise gradient background (d6 Concept 01, 2026-09-10). Peach
   top-left → soft teal bottom-right, layered as radial washes so it
   reads as a mesh instead of a stripe. No imagery, ~0 KB — pure
   tokens + gradients. The wrap widens the tinted area to the full
   viewport; the max-width column stays 420px for the content. */
.login2-screen {
  min-height: 100dvh;
  padding: max(env(safe-area-inset-top), var(--yc-sp-8)) var(--yc-sp-5) var(--yc-sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--yc-sp-4);
  max-width: 420px;
  margin: 0 auto;
  background: transparent;
}
/* Editorial hero — hidden on mobile so nothing changes below 1024px.
   The 2-column desktop layout below reveals it. */
.login2-hero { display: none; }
.login2-panel {
  display: contents;
}
body:has(> #app > .login2-screen) {
  background:
    radial-gradient(120% 90% at 12% -10%,
      color-mix(in oklab, var(--yc-peach) 90%, white 10%) 0%,
      transparent 55%),
    radial-gradient(120% 100% at 100% 110%,
      color-mix(in oklab, var(--yc-teal) 45%, white 55%) 0%,
      transparent 60%),
    linear-gradient(180deg,
      color-mix(in oklab, var(--yc-peach) 55%, white 45%) 0%,
      color-mix(in oklab, var(--yc-teal) 22%, white 78%) 100%);
}
.login2-brand {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* Anchor-wrapped in #94 so tapping the mark routes home. Kill the
     default link chrome so the visual is unchanged. */
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.login2-brand:hover,
.login2-brand:focus-visible { text-decoration: none; }
.login2-brand:focus-visible {
  outline: var(--yc-focus); outline-offset: var(--yc-focus-offset);
  border-radius: var(--yc-radius-sm);
}
/* Full logo (icon + wordmark) per Jeanndre 2026-09-10. Landscape asset
   is 266×96 (~2.77:1), so height stays auto to preserve the aspect
   ratio. Width is prominent but stays under half the 420px column so
   the form still leads the screen. */
.login2-mark {
  width: 220px;
  max-width: 60%;
  height: auto;
  object-fit: contain;
  display: block;
}
.login2-title {
  /* Editorial serif per Jeanndre 2026-09-10 — login title only, not
     yet broadcast app-wide. Body + form stay on --yc-font (DM Sans). */
  font-family: var(--yc-font-display);
  font-weight: var(--yc-fw-bold);
  font-size: var(--yc-fs-xl);
  line-height: var(--yc-lh-tight);
  color: var(--yc-fg);
  margin: var(--yc-sp-5) 0 0;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.login2-greet {
  margin: 0;
  color: var(--yc-fg-muted);
  font-size: var(--yc-fs-sm);
  font-weight: var(--yc-fw-medium);
}
.login2-form {
  display: flex;
  flex-direction: column;
  gap: var(--yc-sp-3);
  margin-top: var(--yc-sp-3);
}
/* Discrete fields per d6 (2026-09-10) — override the .pill-input
   border-none default so each input reads as its own control, not
   one blob. Hairline border, standard app radius, and a clear gap
   between rows. */
.login2-fields {
  display: flex;
  flex-direction: column;
  gap: var(--yc-sp-3);
}
.login2-form .pill-input {
  height: 52px;
  font-size: var(--yc-fs-base);
  border: 1px solid var(--yc-border);
  border-radius: var(--yc-radius);
  padding: 14px 16px;
}
.login2-form .pill-input:focus {
  border-color: var(--yc-teal-dark);
  box-shadow: 0 0 0 2px rgba(32, 128, 159, 0.15);
}
.login2-remember {
  display: flex;
  align-items: center;
  gap: var(--yc-sp-2);
  font-size: var(--yc-fs-sm);
  color: var(--yc-fg-muted);
  padding: var(--yc-sp-1) 0;
  cursor: pointer;
  user-select: none;
}
.login2-remember input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--yc-teal-dark);
  cursor: pointer;
}
.login2-cta {
  /* Works for both <button> (login form submit) AND <a> (reset-done /
     forgot / reset-sent "Log in" links). <a> defaults to
     `display: inline; text-align: start; text-decoration: underline` —
     the browser UA button styles gave those to <button> for free.
     Setting them explicitly here matches both roles. */
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  text-decoration: none;
  width: 100%;
  height: 52px;
  border-radius: var(--yc-radius-pill);
  border: 0;
  background: var(--yc-teal-dark);
  color: var(--yc-white);
  font-family: var(--yc-font);
  font-weight: var(--yc-fw-semibold);
  font-size: 1rem;
  cursor: pointer;
  margin-top: var(--yc-sp-2);
  box-sizing: border-box;
  transition: background var(--yc-motion-fast) var(--yc-ease-out);
}
.login2-cta:hover:not(:disabled) { background: var(--yc-teal-medium); }
.login2-cta:disabled { opacity: 0.55; cursor: default; }
.login2-cta:focus-visible {
  outline: var(--yc-focus);
  outline-offset: var(--yc-focus-offset);
}
.login2-foot {
  margin-top: auto;
  text-align: center;
  font-size: var(--yc-fs-sm);
  color: var(--yc-fg-muted);
  padding: var(--yc-sp-3) 0 var(--yc-sp-2);
}
.login2-foot a {
  color: var(--yc-teal-dark);
  text-decoration: none;
  font-weight: var(--yc-fw-medium);
}
.login2-foot a:hover { text-decoration: underline; }
.login2-form .form-error {
  margin: 0;
}

/* Editorial hero desktop layout — Concept 03 (Dez, 2026-09-10).
   Everything gated by ≥ 1024px. Mobile stays exactly as it is above.
   Analytics / metric row is intentionally NOT rendered per Jeanndre. */
@media (min-width: 1024px) {
  .login2-screen {
    max-width: 1120px;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--yc-sp-8);
    align-items: center;
    padding: var(--yc-sp-8) var(--yc-sp-6);
    min-height: 100dvh;
  }
  .login2-panel {
    display: flex;
    flex-direction: column;
    gap: var(--yc-sp-3);
    justify-self: end;
    width: 100%;
    max-width: 420px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--yc-radius-lg);
    padding: var(--yc-sp-6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 12px 40px rgba(0, 44, 66, 0.08);
  }
  .login2-hero {
    display: flex;
    flex-direction: column;
    gap: var(--yc-sp-4);
    max-width: 540px;
  }
  .login2-hero__display {
    font-family: var(--yc-font-display);
    font-weight: var(--yc-fw-bold);
    font-size: clamp(2.6rem, 5.5vw, 4.2rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: var(--yc-fg);
    margin: 0;
    text-wrap: balance;
  }
  .login2-hero__accent {
    font-style: italic;
    font-weight: var(--yc-fw-medium);
    color: var(--yc-teal-dark);
  }
  .login2-hero__tag {
    font-family: var(--yc-font);
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--yc-fg-muted);
    margin: 0;
    max-width: 46ch;
  }
}

/* Link Activity to Goal (Dez 2026-09-10) — picker in the Coach New /
   Edit Activity form + "↳ {goal}" pill on activity cards. */
.form-section--goal .form-section__hint {
  margin: 0 0 var(--yc-sp-2);
  color: var(--yc-fg-muted);
  font-size: var(--yc-fs-sm);
}
.goal-picker { display: flex; flex-direction: column; gap: var(--yc-sp-2); }
.goal-picker__chips { flex-wrap: wrap; gap: var(--yc-sp-2); }
.goal-picker__skeleton { display: flex; gap: var(--yc-sp-2); }
.goal-picker__error, .goal-picker__empty {
  display: flex; align-items: baseline; gap: var(--yc-sp-2);
  font-size: var(--yc-fs-sm);
}
.goal-picker__ghost { margin: var(--yc-sp-2) 0 0; font-size: var(--yc-fs-xs); }
.chip--goal {
  padding: 6px 14px;
  border-radius: var(--yc-radius-pill);
  border: 1px solid var(--yc-border);
  border-left-width: 2px;
  background: var(--yc-surface);
  color: var(--yc-fg);
  font: inherit;
  font-size: var(--yc-fs-sm);
  cursor: pointer;
}
.chip--goal.is-selected {
  background: var(--yc-body); color: var(--yc-white);
  border-color: var(--yc-fg);
}
.chip--goal--body  { border-left-color: var(--yc-cat-body); }
.chip--goal--mind  { border-left-color: var(--yc-cat-mind); }
.chip--goal--soul  { border-left-color: var(--yc-cat-soul); }
.chip--goal--other { border-left-color: var(--yc-cat-other); }
.chip--goal--ghost {
  opacity: 0.6; cursor: default;
  border-style: dashed;
}
.goal-chip--skeleton {
  display: inline-block; height: 30px; width: 80px;
  border-radius: var(--yc-radius-pill);
  background: linear-gradient(90deg, #eee, #f6f6f6, #eee);
  animation: goalpick-shimmer 1.2s linear infinite;
}
@keyframes goalpick-shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}
/* "↳ {goal}" pill on activity cards (coach + client). Category-tinted
   2px left border per spec. */
.activity-goal-link {
  display: inline-flex; align-items: center;
  padding: 4px 10px 4px 8px;
  border: 1px solid var(--yc-border);
  border-left-width: 2px;
  border-radius: var(--yc-radius-pill);
  background: var(--yc-surface);
  color: var(--yc-fg);
  font-size: var(--yc-fs-xs);
  font-weight: var(--yc-fw-semibold);
  text-decoration: none;
  align-self: flex-start;
}
.activity-goal-link--body  { border-left-color: var(--yc-cat-body); }
.activity-goal-link--mind  { border-left-color: var(--yc-cat-mind); }
.activity-goal-link--soul  { border-left-color: var(--yc-cat-soul); }
.activity-goal-link--other { border-left-color: var(--yc-cat-other); }
.activity-goal-link:hover  { background: rgba(0, 44, 66, 0.03); }

/* ── Home — Concept 01 "Today's to-do" (2026-09-10) ───────────────────
   Replaces the sky-hero + routine cards + action pills. Minimal
   greeting, weather pill, and three slot groups (morning/afternoon/
   evening) each with a slot-tinted progress bar. Current-time slot
   auto-expands per _currentSlot() in home.js. */
.c1-home {
  display: flex;
  flex-direction: column;
  gap: var(--yc-sp-4);
  padding: var(--yc-sp-4) var(--yc-sp-4) calc(var(--yc-bottom-nav-h) + var(--yc-sp-6));
  background: var(--yc-surface);
}
.c1-home .c1-head {
  display: flex;
  flex-direction: column;
  gap: var(--yc-sp-2);
  padding: var(--yc-sp-2) 0 var(--yc-sp-1);
}
.c1-home .c1-greet {
  font-family: "Fraunces", Georgia, serif;
  font-weight: var(--yc-fw-semibold);
  font-size: 1.5rem;
  line-height: var(--yc-lh-tight);
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--yc-fg);
  text-wrap: balance;
}
.c1-home .c1-weather-pill {
  /* Pill styling stripped 2026-09-10 (Jeanndre) — just inline text +
     icon next to the greeting. Background / border / padding gone;
     the flex + gap stay so the icon and text still align. Scoped to
     .c1-home so other .hero-weather sites (if any) are untouched. */
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--yc-sp-2);
  padding: 0;
  background: transparent;
  color: var(--yc-fg);
  font-size: var(--yc-fs-sm);
  font-weight: var(--yc-fw-regular);
  margin: 0;
}
.c1-home .c1-weather-pill .hero-weather-icon {
  display: inline-flex;
  color: var(--yc-fg);
}
.c1-home .c1-locate {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: var(--yc-radius-pill);
  background: rgba(255, 173, 22, 0.14);
  color: var(--yc-orange);
  border: 0;
  font-size: var(--yc-fs-xs);
  font-weight: var(--yc-fw-medium);
  cursor: pointer;
}

/* Slot group — header (icon + label + count) + progress bar + body */
.c1-home .c1-slot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--yc-sp-2) 0 var(--yc-sp-1);
  border-top: 1px solid var(--yc-border);
}
.c1-home .c1-slot:first-of-type { border-top: 0; }
/* "Now" border ring (Jeanndre 2026-09-10). The slot the device's
   local hour falls into gets a 2px coloured left rail per time-of-day
   tint. Left rail (not full border) keeps the row rhythm of the
   Concept 01 list layout — a full box border would fight the shared
   top-hairline separators. */
.c1-home .c1-slot.is-now {
  border-left: 2px solid transparent;
  padding-left: calc(var(--yc-sp-3));
  margin-left: calc(-1 * (var(--yc-sp-3) + 2px));
}
.c1-home .c1-slot--morning.is-now   { border-left-color: var(--yc-orange); }
.c1-home .c1-slot--afternoon.is-now { border-left-color: var(--yc-teal); }
.c1-home .c1-slot--evening.is-now   { border-left-color: var(--yc-navy); }
.c1-home .c1-slot__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--yc-sp-2) 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}
.c1-home .c1-slot__label {
  display: inline-flex;
  align-items: center;
  gap: var(--yc-sp-2);
  font-size: var(--yc-fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: var(--yc-fw-bold);
  color: var(--yc-teal-dark);
}
.c1-home .c1-slot__label > span:not(.c1-slot-icon):not(.c1-slot__caret) {
  /* the plain word — no extra styling, sits between icon and caret */
}
.c1-home .c1-slot-icon {
  /* #125 (Dez 2026-09-15) — coloured SVGs from /img/slot/. Colours
     are baked into the file so CSS `color:` no longer applies.
     Inactive slots dim via filter; the transition covers the
     is-active flip. */
  display: inline-block;
  vertical-align: middle;
  transition: filter var(--yc-motion-standard) var(--yc-ease-out);
}
.c1-home .c1-slot:not(.is-active) .c1-slot-icon {
  filter: saturate(0.4) opacity(0.55);
}
.c1-home .c1-slot__caret {
  display: inline-block;
  font-size: 10px;
  color: var(--yc-teal-dark);
  transition: transform var(--yc-motion-fast) var(--yc-ease-out);
}
.c1-home .c1-slot.is-open .c1-slot__caret { transform: rotate(0deg); }
.c1-home .c1-slot:not(.is-open) .c1-slot__caret { transform: rotate(-90deg); }
.c1-home .c1-slot__count {
  font-size: var(--yc-fs-xs);
  color: var(--yc-fg-muted);
  font-weight: var(--yc-fw-medium);
}
.c1-home .c1-slot__progress {
  /* Fully rounded ends (Jeanndre 2026-09-10) — bar height + colour
     unchanged; only the corner radius switches from 3px (barely
     rounded) to the pill token so the ends read as capsule shapes. */
  height: 4px;
  border-radius: var(--yc-radius-pill);
  background: var(--yc-progress-track);
  overflow: hidden;
  position: relative;
}
.c1-home .c1-slot__progress-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  border-radius: inherit;
  background: var(--yc-teal-dark);
  transition: width var(--yc-motion-standard) var(--yc-ease-out);
}
.c1-home .c1-slot--morning   .c1-slot__progress-fill { background: var(--yc-orange); }
.c1-home .c1-slot--afternoon .c1-slot__progress-fill { background: #D89530; }
.c1-home .c1-slot--evening   .c1-slot__progress-fill { background: #1F2E5C; }

.c1-home .c1-slot__body {
  overflow: hidden;
  transition: max-height var(--yc-motion-standard) var(--yc-ease-out);
}
.c1-home .c1-slot:not(.is-open) .c1-slot__body {
  max-height: 0;
}
.c1-home .c1-slot.is-open .c1-slot__body {
  max-height: 2000px;
}
.c1-home .c1-slot__list {
  list-style: none;
  padding: 0;
  margin: 4px 0 var(--yc-sp-2);
}

/* Green check background on completed rows — #89BF6C per design.
   Overrides the routine-card__step--done colour scoped under c1-home so
   other screens using .routine-card__step keep their existing look. */
.c1-home .routine-card__step {
  display: flex;
  align-items: center;
  gap: var(--yc-sp-3);
  padding: var(--yc-sp-3) 0;
  border-bottom: 1px solid var(--yc-border);
  font-size: var(--yc-fs-base);
  color: var(--yc-fg);
}
.c1-home .routine-card__step:last-child { border-bottom: 0; }
/* Custom check paint — the base .routine-card__step rule (app.css:1893)
   draws its own circle with `appearance: none`, so `accent-color` alone
   doesn't reach it. Restate border + checked-fill in the slot's green. */
.c1-home .routine-card__step input[type="checkbox"] {
  width: 20px;
  height: 20px;
  border-color: #89BF6C;
  cursor: pointer;
  flex-shrink: 0;
}
.c1-home .routine-card__step input[type="checkbox"]:checked {
  background: #89BF6C;
}
.c1-home .routine-card__step--done {
  color: var(--yc-fg-muted);
}
.c1-home .routine-card__step--done .routine-card__step-label {
  text-decoration: line-through;
}
.c1-home .routine-card__step-label {
  flex: 1;
}
.c1-home .routine-card__step-time {
  font-size: var(--yc-fs-xs);
  color: var(--yc-fg-muted);
  font-weight: var(--yc-fw-medium);
}

/* Jeanndre home layout — replaces the 3-stacked Concept 01 slots with
   ONE top card + a 3-tile selector row + optional Up-next card.
   2026-09-10. */
.j-home {
  gap: var(--yc-sp-4);
}
.j-section-title {
  margin: var(--yc-sp-4) 0 var(--yc-sp-2);
  font-size: var(--yc-fs-sm);
  color: var(--yc-fg-muted);
  font-weight: var(--yc-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* TODAY — big card that swaps by tile selection. */
.j-today-card {
  background: var(--yc-surface);
  border: 1px solid var(--yc-border);
  border-radius: var(--yc-radius-lg);
  padding: var(--yc-sp-4);
  display: flex; flex-direction: column;
  gap: var(--yc-sp-2);
}
.j-today-card__head {
  display: flex; align-items: center; gap: var(--yc-sp-2);
}
.j-today-card__title {
  margin: 0;
  font-size: var(--yc-fs-base);
  font-weight: var(--yc-fw-semibold);
  color: var(--yc-fg);
}
.j-today-card__meta {
  margin: 0;
  font-size: var(--yc-fs-sm);
  color: var(--yc-fg-muted);
}
.j-today-card__progress {
  height: 6px;
  border-radius: var(--yc-radius-pill);
  background: var(--yc-progress-track);
  overflow: hidden;
  position: relative;
}
.j-today-card__progress-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  border-radius: inherit;
  transition: width var(--yc-motion-standard) var(--yc-ease-out);
  background: var(--yc-orange);
}
.j-today-card--morning   .j-today-card__progress-fill { background: var(--yc-orange); }
.j-today-card--afternoon .j-today-card__progress-fill { background: var(--yc-teal); }
.j-today-card--evening   .j-today-card__progress-fill { background: var(--yc-navy); }
.j-today-card__list { margin-top: var(--yc-sp-2); }

/* TODAY'S PROGRESS — 3-tile selector row. Active tile carries a 2px
   --yc-body border (matches Jeanndre's screenshot); inactives are
   subtle --yc-hairline. */
.j-progress-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--yc-sp-2);
}
.j-progress-tile {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: var(--yc-sp-3) var(--yc-sp-2);
  background: var(--yc-surface);
  border: 1px solid var(--yc-border);
  border-radius: var(--yc-radius-lg);
  color: var(--yc-fg);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.j-progress-tile.is-active {
  /* Selected tile keeps the 2px vs 1px thickness contrast so the
     user can see which slot drives the top card. Colour is still
     hairline grey by default — the highlight rule below is what
     paints a slot tint. */
  border: 2px solid var(--yc-border);
  padding: calc(var(--yc-sp-3) - 1px) calc(var(--yc-sp-2) - 1px);
}
/* Coloured border ONLY when this tile matches BOTH the device's
   current time-of-day AND has ≥1 completion today (Jeanndre
   2026-09-10). Independent of selection: an unselected tile can
   still carry the tint. Thickness inherits from is-active / not. */
.j-progress-tile[data-highlight="1"].j-progress-tile--morning   { border-color: var(--yc-orange); }
.j-progress-tile[data-highlight="1"].j-progress-tile--afternoon { border-color: var(--yc-teal); }
.j-progress-tile[data-highlight="1"].j-progress-tile--evening   { border-color: var(--yc-navy); }
.j-progress-tile .c1-slot-icon { color: var(--yc-fg); }
.j-progress-tile__label {
  font-size: var(--yc-fs-sm);
  font-weight: var(--yc-fw-semibold);
}
.j-progress-tile__count {
  font-size: var(--yc-fs-xs);
  color: var(--yc-fg-muted);
  font-variant-numeric: tabular-nums;
}
.j-progress-tile:focus-visible {
  outline: var(--yc-focus); outline-offset: var(--yc-focus-offset);
}

/* UP NEXT — compact card, icon + title + "Later today" meta. */
.j-up-next {
  display: flex; align-items: center; gap: var(--yc-sp-3);
  background: var(--yc-surface);
  border: 1px solid var(--yc-border);
  border-radius: var(--yc-radius-lg);
  padding: var(--yc-sp-3) var(--yc-sp-4);
}
.j-up-next .c1-slot-icon { color: var(--yc-fg-muted); flex-shrink: 0; }
.j-up-next__body { flex: 1; min-width: 0; }
.j-up-next__title {
  font-size: var(--yc-fs-base);
  font-weight: var(--yc-fw-semibold);
  color: var(--yc-fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.j-up-next__meta {
  font-size: var(--yc-fs-xs);
  color: var(--yc-fg-muted);
}

/* ── Notification preferences (Slice C of plan/notifications/) ────────────
   /notifications/settings — sticky column header + grouped rows + a
   pill switch on every (type, channel) cell. Kept scoped to `.notif-prefs`
   so no bleed into the inbox screen above it. */
.notif-prefs { padding: 0 var(--yc-sp-4) var(--yc-sp-8); }
.notif-prefs__error {
  background: var(--yc-danger-soft);
  color: var(--yc-fg);
  border-radius: var(--yc-radius);
  padding: var(--yc-sp-3) var(--yc-sp-4);
  margin: var(--yc-sp-4) 0;
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--yc-sp-3);
}
.pref-col-heads {
  display: grid;
  grid-template-columns: 1fr 44px 44px 44px;
  gap: var(--yc-sp-3);
  position: sticky;
  top: var(--yc-header-h, 56px);
  background: var(--yc-surface);
  padding: var(--yc-sp-3) 0;
  font-size: var(--yc-fs-xs);
  font-weight: var(--yc-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--yc-fg); opacity: 0.65;
  border-bottom: 1px solid var(--yc-border);
  z-index: 5;
}
.pref-col-heads__label { grid-column: 1 / 2; }
.pref-col-heads__col   { text-align: center; }
.pref-group-title {
  font-family: var(--yc-font);
  font-size: var(--yc-fs-xs);
  font-weight: var(--yc-fw-semibold);
  color: var(--yc-fg); opacity: 0.60;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: var(--yc-sp-5) 0 var(--yc-sp-2);
}
.pref-row {
  display: grid;
  grid-template-columns: 1fr 44px 44px 44px;
  gap: var(--yc-sp-3);
  align-items: center;
  min-height: 48px;
  border-bottom: 1px solid var(--yc-border);
}
.pref-row__label {
  font-size: var(--yc-fs-base);
  color: var(--yc-fg);
}
.pref-row__cell {
  display: flex; justify-content: center; align-items: center;
  min-width: 44px; min-height: 44px;              /* tap target */
}
.pref-row__cell.is-shake { animation: pref-shake 240ms; }
@keyframes pref-shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
/* Pill switch — 36×20 track, 16×16 thumb. Native <input type=checkbox
   role=switch>; label wraps to give a full 44×44 tap area. */
.pref-switch {
  position: relative;
  width: 36px; height: 20px; display: inline-block;
  cursor: pointer;
}
.pref-switch input {
  position: absolute; inset: 0; opacity: 0; margin: 0;
  width: 100%; height: 100%; cursor: pointer;
}
.pref-switch__track {
  position: absolute; inset: 0;
  border-radius: 999px;
  background: var(--yc-switch-track-off);
  transition: background var(--yc-motion-fast, 180ms) var(--yc-ease-out, ease-out);
}
.pref-switch__thumb {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--yc-switch-thumb);
  box-shadow: 0 1px 2px rgba(0,44,66,0.20);
  transition: left var(--yc-motion-fast, 180ms) var(--yc-ease-out, ease-out);
}
.pref-switch input:checked ~ .pref-switch__track { background: var(--yc-switch-track-on); }
.pref-switch input:checked ~ .pref-switch__thumb { left: 18px; }
.pref-switch input:focus-visible ~ .pref-switch__track {
  box-shadow: 0 0 0 3px var(--yc-switch-focus-ring);
}
.pref-switch input:disabled { cursor: not-allowed; }
.pref-switch.is-disabled { opacity: 0.4; cursor: not-allowed; }
.pref-switch.is-glow .pref-switch__track {
  box-shadow: 0 0 0 3px var(--yc-switch-focus-ring);
  transition: box-shadow var(--yc-motion-standard, 240ms) var(--yc-ease-out, ease-out);
}
.pref-switch__lock {
  position: absolute; right: -14px; top: 4px;
  width: 12px; height: 12px;
  color: var(--yc-cat-other);
  pointer-events: none;
}
/* Push permission banner — orange-warn accent, one action pill. */
.push-cta {
  display: flex; justify-content: space-between; align-items: center; gap: var(--yc-sp-3);
  background: var(--yc-warn-soft);
  border-left: 3px solid var(--yc-orange);
  border-radius: var(--yc-radius);
  padding: var(--yc-sp-4);
  margin: var(--yc-sp-5) 0 var(--yc-sp-3);
}
.push-cta__text { font-size: var(--yc-fs-sm); color: var(--yc-fg); }
.push-cta .btn-orange {
  background: var(--yc-orange); color: var(--yc-white);
  border: 0; border-radius: var(--yc-radius-pill);
  padding: 10px 18px; font-weight: var(--yc-fw-semibold);
  cursor: pointer;
}
/* Skeleton rows — same grid as .pref-row so no CLS between skeleton and real. */
.pref-row--skeleton .pref-row__label { height: 14px; background: var(--yc-progress-track); border-radius: 4px; max-width: 60%; }
.pref-row--skeleton .pref-row__cell::before {
  content: ""; display: block; width: 36px; height: 20px;
  border-radius: 999px; background: var(--yc-progress-track);
}
/* Gear icon on the inbox header — matches other 32×32 header controls. */
.notif-header__gear {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; padding: 0;
  color: var(--yc-fg);
  cursor: pointer; border-radius: var(--yc-radius);
}
.notif-header__gear:hover { background: var(--yc-grey); }

/* ── Journal (Dez 2026-09-11 redesign, Phase 1: text-only) ───────────
   Two routes share the same page frame: `/journal` (timeline) and
   `/journal/new` + `/journal/{date}/edit` (entry form). Photo grid
   variants + lightbox land in Phase 2 (blocked on Plato routing). */
.journal-page {
  padding: var(--yc-sp-4) var(--yc-sp-4)
           calc(var(--yc-bottom-nav-h) + var(--yc-sp-8));
  min-height: calc(100dvh - var(--yc-header-h));
}
.journal-page__error {
  background: var(--yc-danger-soft);
  color: var(--yc-fg);
  border-radius: var(--yc-radius);
  padding: var(--yc-sp-3) var(--yc-sp-4);
  margin: var(--yc-sp-3) 0;
  display: flex; justify-content: space-between; align-items: center; gap: var(--yc-sp-3);
}
.journal-timeline { display: block; }
.journal-month-hdr {
  position: sticky;
  top: var(--yc-header-h, 56px);
  background: var(--yc-surface, var(--yc-white));
  z-index: 1;
  margin: var(--yc-sp-5) 0 var(--yc-sp-3);
  padding: var(--yc-sp-2) 0;
  font-family: var(--yc-font);
  font-weight: var(--yc-fw-bold);
  font-size: var(--yc-fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--yc-teal-dark);
}
.journal-card {
  position: relative;
  background: var(--yc-surface, var(--yc-white));
  border: 1px solid var(--yc-hairline);
  border-radius: var(--yc-radius);
  box-shadow: var(--yc-shadow-sm);
  padding: var(--yc-sp-4);
  margin-bottom: var(--yc-sp-3);
  cursor: pointer;
}
.journal-card__body {
  font-family: var(--yc-font);
  font-size: var(--yc-fs-base);
  line-height: var(--yc-lh-body);
  color: var(--yc-fg);
  /* 6-line clamp with a soft fade at the bottom. `-webkit-line-clamp`
     is widely supported by every browser we target. */
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
}
.journal-card__body--muted { color: var(--yc-fg-subtle); font-style: italic; }
.journal-card__date {
  margin-top: var(--yc-sp-3);
  padding-top: var(--yc-sp-3);
  border-top: 1px solid var(--yc-hairline);
  font-family: var(--yc-font);
  font-size: var(--yc-fs-xs);
  font-weight: var(--yc-fw-medium);
  color: var(--yc-fg-muted);
}
.journal-card__menu-btn {
  position: absolute;
  top: var(--yc-sp-2);
  right: var(--yc-sp-2);
  width: 32px; height: 32px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--yc-fg-muted);
  font-size: 20px;
  line-height: 1;
  display: inline-grid; place-items: center;
  cursor: pointer;
}
.journal-card__menu-btn:hover,
.journal-card__menu-btn:focus-visible {
  background: rgba(0, 44, 66, 0.06);
}
.journal-card__menu {
  position: absolute;
  top: calc(var(--yc-sp-2) + 32px);
  right: var(--yc-sp-2);
  min-width: 160px;
  background: var(--yc-surface, var(--yc-white));
  border: 1px solid var(--yc-hairline);
  border-radius: var(--yc-radius);
  box-shadow: var(--yc-shadow-md);
  padding: var(--yc-sp-1) 0;
  z-index: 3;
  display: flex; flex-direction: column;
}
.journal-card__menu-item {
  display: flex; align-items: center;
  height: 44px;
  padding: 0 var(--yc-sp-4);
  border: 0;
  background: transparent;
  color: var(--yc-fg);
  font: inherit;
  font-size: var(--yc-fs-base);
  text-align: left;
  cursor: pointer;
}
.journal-card__menu-item:hover { background: var(--yc-grey); }
.journal-card__menu-item--danger { color: var(--yc-danger); }
.journal-card__menu-item--danger:hover { background: var(--yc-danger-soft); }

/* Floating "+" FAB — orange, 44x44, 16px above bottom nav. */
.journal-fab {
  position: fixed;
  right: var(--yc-sp-4);
  bottom: calc(var(--yc-bottom-nav-h, 64px) + var(--yc-sp-4));
  width: 44px; height: 44px;
  border-radius: 999px;
  background: var(--yc-orange);
  color: var(--yc-white);
  text-decoration: none;
  display: inline-grid; place-items: center;
  box-shadow: var(--yc-shadow-md);
  z-index: 5;
}
.journal-fab__plus { font-size: 24px; line-height: 1; font-weight: 700; }
.journal-fab:focus-visible {
  outline: var(--yc-focus); outline-offset: 2px;
}

/* Empty state — reuses the empty-card treatment vibe but scoped so the
   book glyph + copy line up per Dez's mock. */
.journal-empty {
  padding: var(--yc-sp-8) var(--yc-sp-4);
  text-align: center;
}
.journal-empty__glyph { font-size: 40px; line-height: 1; margin-bottom: var(--yc-sp-4); }
.journal-empty__title {
  font-family: var(--yc-font);
  font-weight: var(--yc-fw-semibold);
  font-size: var(--yc-fs-xl);
  color: var(--yc-fg);
  margin: 0 0 var(--yc-sp-3);
}
.journal-empty__body {
  font-family: var(--yc-font);
  font-size: var(--yc-fs-base);
  color: var(--yc-fg-muted);
  line-height: var(--yc-lh-body);
  max-width: 32ch;
  margin: 0 auto var(--yc-sp-5);
}
.journal-empty__cta { display: inline-block; }

/* Entry form — new + edit share the same layout. */
.journal-entry-form { display: flex; flex-direction: column; gap: var(--yc-sp-3); }
.journal-entry-form__textarea {
  width: 100%;
  min-height: 120px;
  padding: var(--yc-sp-3) var(--yc-sp-4);
  border: 1px solid var(--yc-hairline);
  border-radius: var(--yc-radius);
  background: var(--yc-surface, var(--yc-white));
  color: var(--yc-fg);
  font: inherit;
  font-family: var(--yc-font);
  font-size: var(--yc-fs-base);
  line-height: var(--yc-lh-body);
  resize: none;
  overflow: hidden;
  box-sizing: border-box;
}
.journal-entry-form__textarea:focus-visible {
  outline: var(--yc-focus); outline-offset: 2px;
}
.journal-entry-form__date {
  margin: 0;
  color: var(--yc-fg-muted);
  font-size: var(--yc-fs-sm);
}
.journal-entry-form__actions {
  display: flex; justify-content: flex-end; gap: var(--yc-sp-3);
  margin-top: var(--yc-sp-3);
}
.journal-entry-form__cancel { color: var(--yc-fg); opacity: 0.7; }
.journal-entry-form__save[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Journal Phase 1.5 (Jeanndre 2026-09-11) — date-ribbon at top, entry
   header with emotion + prompt, structured entry form (type chips +
   emotion picker + optional title). */

/* Ribbon dot for dates that have an entry. Sits centred below the date
   number, orange = new/created signature colour. */
.date-ribbon__day .date-ribbon__dot {
  display: block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--yc-orange);
  margin: 2px auto 0;
}
.date-ribbon__day.is-selected .date-ribbon__dot { background: var(--yc-white); }

/* Card head — emotion emoji sits left of the prompt heading. */
.journal-card__head {
  display: flex; align-items: flex-start;
  gap: var(--yc-sp-2);
  margin-bottom: var(--yc-sp-2);
  padding-right: 36px; /* keeps text clear of the ⋯ menu */
}
.journal-card__emo {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}
.journal-card__prompt {
  margin: 0;
  font-family: var(--yc-font);
  font-size: var(--yc-fs-base);
  font-weight: var(--yc-fw-semibold);
  color: var(--yc-fg);
  line-height: 1.35;
}
.journal-card__subprompt {
  margin: 0 0 var(--yc-sp-2);
  font-size: var(--yc-fs-xs);
  color: var(--yc-fg-muted);
  font-style: italic;
}
/* Ribbon-tap flash on the target card so the user tracks where they
   landed. Fades in ~800ms then removed by the timeline. */
.journal-card.is-flash {
  animation: journal-card-flash 800ms ease-out;
}
@keyframes journal-card-flash {
  0% { box-shadow: 0 0 0 3px rgba(255, 173, 22, 0.35); }
  100% { box-shadow: var(--yc-shadow-sm); }
}

/* Entry form — structured inputs. Section labels + chips + emotion
   picker + title + textarea + actions row. */
.journal-form__section-label {
  display: block;
  font-family: var(--yc-font);
  font-size: var(--yc-fs-xs);
  font-weight: var(--yc-fw-semibold);
  color: var(--yc-fg);
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: var(--yc-sp-4) 0 var(--yc-sp-2);
}
.journal-form__type-row {
  display: flex; flex-wrap: wrap;
  gap: var(--yc-sp-2);
  margin-bottom: var(--yc-sp-3);
}
.journal-type-chip {
  padding: var(--yc-sp-2) var(--yc-sp-4);
  border-radius: var(--yc-radius-pill);
  border: 1px solid var(--yc-hairline);
  background: var(--yc-surface, var(--yc-white));
  color: var(--yc-fg);
  font: inherit;
  font-size: var(--yc-fs-sm);
  cursor: pointer;
  text-align: left;
  line-height: 1.3;
}
.journal-type-chip:hover { background: var(--yc-grey); }
.journal-type-chip.is-selected {
  background: rgba(32, 128, 159, 0.10);
  border-color: var(--yc-teal-dark);
  color: var(--yc-teal-dark);
  font-weight: var(--yc-fw-semibold);
}
.journal-form__emo-row {
  display: flex; gap: var(--yc-sp-2);
  margin-bottom: var(--yc-sp-3);
  flex-wrap: wrap;
}
.journal-emo-chip {
  display: flex; align-items: center;
  gap: var(--yc-sp-2);
  padding: var(--yc-sp-2) var(--yc-sp-3);
  border-radius: var(--yc-radius-pill);
  border: 1px solid var(--yc-hairline);
  background: var(--yc-surface, var(--yc-white));
  color: var(--yc-fg);
  font: inherit;
  font-size: var(--yc-fs-sm);
  cursor: pointer;
}
.journal-emo-chip:hover { background: var(--yc-grey); }
.journal-emo-chip.is-selected {
  background: rgba(32, 128, 159, 0.10);
  border-color: var(--yc-teal-dark);
  color: var(--yc-teal-dark);
  font-weight: var(--yc-fw-semibold);
}
.journal-emo-chip__emo { font-size: 18px; line-height: 1; }
/* 1.6a — outline SVG emotion glyphs (24px) that pick up the chip's
   own colour so hover / selected states drive them. */
.journal-emo-chip__svg {
  width: 24px; height: 24px;
  color: var(--yc-fg);
  display: block;
}
.journal-emo-chip.is-selected .journal-emo-chip__svg {
  color: var(--yc-orange);
}

/* 1.6a slot pills (Dez 2026-09-13). Empty = hairline chrome, no dot.
   Has-content = hairline + 6px green dot before label. Active = teal
   wash + teal-dark 1.5px border/text. Active+answered combines both. */
.jrn-pill-row {
  display: flex; flex-wrap: wrap; gap: var(--yc-sp-2);
  margin: 0 0 var(--yc-sp-3);
}
.jrn-pill {
  /* #103 — pills share the row equally and center their label so the
     four entry-types (Reflect / Gratitude / Learn / Goal) read as a
     balanced set instead of shrinking to their text width.
     #133 (regression) — the dot used to sit inline in the flex row
     with the label, so the "centered" group actually pushed the
     label RIGHT of centre (dot + gap + label = whole group centred,
     but the label alone visually reads as right of pill centre).
     Fix: dot is absolute-positioned at the pill's leading edge so
     the label centres in the pill on its own. Emotion pills use a
     different class and are unaffected. */
  position: relative;
  display: inline-flex; align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  padding: var(--yc-sp-2) var(--yc-sp-4);
  border-radius: var(--yc-radius-pill);
  background: transparent;
  border: 1px solid var(--yc-hairline);
  color: var(--yc-fg-muted);
  font: inherit;
  font-size: var(--yc-fs-sm);
  cursor: pointer;
  line-height: 1.2;
  text-align: center;
}
.jrn-pill__dot {
  position: absolute;
  left: var(--yc-sp-3);
  top: 50%;
  transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: transparent;
}
.jrn-pill__label { text-align: center; }
.jrn-pill--has-content { color: var(--yc-fg); }
.jrn-pill--has-content .jrn-pill__dot { background: var(--yc-success); }
.jrn-pill--active {
  background: rgba(86, 182, 193, 0.15);
  border: 1.5px solid var(--yc-teal-dark);
  color: var(--yc-teal-dark);
  padding: calc(var(--yc-sp-2) - 0.5px) calc(var(--yc-sp-4) - 0.5px);
}
.jrn-pill--active.jrn-pill--has-content { color: var(--yc-teal-dark); }
.jrn-pill:focus-visible {
  outline: var(--yc-focus); outline-offset: var(--yc-focus-offset);
}

/* Personal textarea — always visible below the pill row. Same look
   as .journal-entry-form__textarea, tighter caption label above. */
.jrn-personal-label { margin-top: var(--yc-sp-3); }
.jrn-personal-area { min-height: 96px; }

/* Timeline chip row (card render c) — filled chip per populated slot
   with a green dot. Non-interactive; the whole card is the click
   target. */
.jrn-chip-row {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: var(--yc-sp-2) 0;
}
.jrn-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: var(--yc-radius-pill);
  border: 1px solid var(--yc-hairline);
  color: var(--yc-fg);
  font-size: var(--yc-fs-xs);
  line-height: 1.2;
  background: var(--yc-surface, var(--yc-white));
}
.jrn-chip__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--yc-success);
  display: inline-block; flex-shrink: 0;
}
.journal-card__emo {
  width: 24px; height: 24px;
  color: var(--yc-fg);
  display: block;
}
.journal-form__title {
  width: 100%;
  padding: var(--yc-sp-3) var(--yc-sp-4);
  border: 1px solid var(--yc-hairline);
  border-radius: var(--yc-radius);
  background: var(--yc-surface, var(--yc-white));
  color: var(--yc-fg);
  font: inherit;
  font-family: var(--yc-font);
  font-size: var(--yc-fs-base);
  box-sizing: border-box;
  margin-bottom: var(--yc-sp-3);
}
.journal-form__title:focus-visible {
  outline: var(--yc-focus); outline-offset: 2px;
}

/* Activity filters (#64.2, Jeanndre 2026-09-11) — three chip groups
   below the date ribbon on /activity. Layout is one horizontal row
   that wraps on narrow, each group prefixed with a small label. */
.activity-filters {
  display: flex; flex-wrap: wrap;
  gap: var(--yc-sp-3);
  /* 8px breathing room between the date ribbon and the filter row
     (Jeanndre 2026-09-11). Scoped to .activity-filters so Journal and
     Reminders — which reuse the ribbon but no filter row — aren't
     affected. */
  margin-top: var(--yc-sp-2);
  padding: 0 var(--yc-sp-4) var(--yc-sp-3);
}
.activity-filters__group {
  display: flex; align-items: center;
  gap: var(--yc-sp-2);
  flex-wrap: wrap;
}
.activity-filters__label {
  font-family: var(--yc-font);
  font-size: var(--yc-fs-xs);
  font-weight: var(--yc-fw-semibold);
  color: var(--yc-fg);
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-right: var(--yc-sp-1);
}
.activity-filters__chips {
  display: flex; flex-wrap: wrap;
  gap: var(--yc-sp-2);
}
.activity-filter-chip {
  padding: 4px var(--yc-sp-3);
  border-radius: var(--yc-radius-pill);
  border: 1px solid var(--yc-hairline);
  background: var(--yc-surface, var(--yc-white));
  color: var(--yc-fg);
  font: inherit;
  font-size: var(--yc-fs-sm);
  cursor: pointer;
  min-height: 32px;
}
.activity-filter-chip:hover:not(:disabled) { background: var(--yc-grey); }
.activity-filter-chip.is-selected {
  background: rgba(32, 128, 159, 0.10);
  border-color: var(--yc-teal-dark);
  color: var(--yc-teal-dark);
  font-weight: var(--yc-fw-semibold);
}
.activity-filter-chip:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Activities filters — Concept 04 (icon + current-selection pills)
   (Jeanndre 2026-09-11) — replaces the label-prefix + chip-row treatment
   with one row of three buttons that each carry their own state, plus a
   Reset link when any filter is non-"all". Popover renders below the
   anchor button, positioned in JS, clamped inside the viewport. */
.activity-filters--icon {
  display: flex; flex-wrap: nowrap;
  gap: 6px;
  padding: 0 var(--yc-sp-3) var(--yc-sp-3);
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
}
.activity-filters--icon::-webkit-scrollbar { display: none; }
.afilter-btn {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px;
  border-radius: var(--yc-radius-pill);
  border: 1px solid var(--yc-hairline);
  background: var(--yc-white);
  color: var(--yc-fg-muted);
  font: inherit;
  font-size: var(--yc-fs-sm);
  font-weight: var(--yc-fw-medium);
  min-height: 32px;
  cursor: pointer;
  transition: color var(--yc-motion-fast) var(--yc-ease-out),
              background var(--yc-motion-fast) var(--yc-ease-out),
              border-color var(--yc-motion-fast) var(--yc-ease-out);
}
.afilter-btn:hover:not([disabled]) { background: var(--yc-grey); }
.afilter-btn.is-active {
  background: rgba(32, 128, 159, 0.10);
  border-color: var(--yc-teal-dark);
  color: var(--yc-teal-dark);
  font-weight: var(--yc-fw-semibold);
}
.afilter-btn__icon {
  display: inline-flex;
  width: 14px; height: 14px;
  color: inherit;
}
.afilter-btn__icon svg { width: 100%; height: 100%; display: block; }
.afilter-btn__label { white-space: nowrap; }
.afilter-btn__caret {
  font-size: 10px; opacity: 0.7; margin-left: 2px;
}
.afilter-btn:focus-visible {
  outline: var(--yc-focus);
  outline-offset: var(--yc-focus-offset);
}

.afilter-reset {
  flex-shrink: 0;
  width: 32px; height: 32px;
  background: var(--yc-grey);
  border: 1px solid var(--yc-hairline);
  border-radius: 50%;
  color: var(--yc-fg-muted);
  display: grid; place-items: center;
  cursor: pointer;
  padding: 0;
  transition: background var(--yc-motion-fast) var(--yc-ease-out),
              color var(--yc-motion-fast) var(--yc-ease-out);
}
.afilter-reset:hover { background: var(--yc-hairline); color: var(--yc-fg); }
.afilter-reset:hover { text-decoration: underline; }
.afilter-reset:focus-visible {
  outline: var(--yc-focus);
  outline-offset: var(--yc-focus-offset);
  border-radius: 4px;
}

/* Popover — absolutely positioned inside .activity-filters--icon.
   JS sets left+top after mount so the button rect + viewport clamp are
   available. Width is fixed so the clamp math works predictably. */
.afilter-pop {
  position: absolute;
  min-width: 160px; max-width: 220px;
  background: var(--yc-white);
  border: 1px solid var(--yc-hairline);
  border-radius: var(--yc-radius);
  box-shadow: var(--yc-shadow-md);
  padding: var(--yc-sp-1) 0;
  z-index: 30;
  display: flex; flex-direction: column;
  animation: afilter-pop-in var(--yc-motion-fast) var(--yc-ease-out);
}
@keyframes afilter-pop-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.afilter-pop__item {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--yc-sp-3);
  padding: 8px var(--yc-sp-3);
  min-height: 40px;
  background: transparent;
  border: 0;
  color: var(--yc-fg);
  font: inherit;
  font-size: var(--yc-fs-sm);
  text-align: left;
  cursor: pointer;
}
.afilter-pop__item:hover:not(:disabled) { background: var(--yc-grey); }
.afilter-pop__item.is-on {
  background: rgba(32, 128, 159, 0.10);
  color: var(--yc-teal-dark);
  font-weight: var(--yc-fw-semibold);
}
.afilter-pop__item.is-disabled,
.afilter-pop__item:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.afilter-pop__check { color: var(--yc-teal-dark); }

/* Notifications page context strip (2026-09-11 regression fix). The
   default `.context-strip` has `padding: 12px 20px 0` — inside the
   `.notif-page` (which itself has `padding: 16px`) that pushed
   Mark-all-read + the cog 20px past the notif-group headers and
   card grid below. Prior fix used inline `style="..."` which CSP
   `style-src 'self'` strips wholesale, so the flex-start + zero
   padding never took. Scoped class rule wins under CSP. */
.notif-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
  padding-left: 0;
  padding-right: 0;
}

/* Bulk-actions on notifications (#84 Jeanndre 2026-09-11).
   Row layout gains a leading checkbox; select-all + action bar sits
   above the first date group. All rules scoped so nothing else on
   the page is affected. */
.notif-row {
  display: flex;
  align-items: stretch;
}
.notif-row__link { flex: 1 1 auto; }
.notif-row__select {
  flex: 0 0 auto;
  align-self: center;
  margin: 0 var(--yc-sp-2) 0 var(--yc-sp-3);
  width: 20px; height: 20px;
  accent-color: var(--yc-teal-dark);
  cursor: pointer;
}
.notif-row--selected {
  background: color-mix(in srgb, var(--yc-teal) 8%, var(--yc-surface));
}

.notif-selectall {
  display: flex;
  align-items: center;
  gap: var(--yc-sp-3);
  padding: var(--yc-sp-2) 0 var(--yc-sp-3);
  margin-bottom: var(--yc-sp-2);
  border-bottom: 1px solid var(--yc-hairline);
}
.notif-selectall__box {
  width: 20px; height: 20px;
  accent-color: var(--yc-teal-dark);
  cursor: pointer;
  margin-left: var(--yc-sp-3);
}
.notif-selectall__label {
  font-size: var(--yc-fs-sm);
  color: var(--yc-fg);
  opacity: 0.75;
  cursor: pointer;
  user-select: none;
}
.notif-selectall__actions {
  margin-left: auto;
  display: flex; gap: var(--yc-sp-2);
}
.notif-selectall__btn {
  background: transparent;
  border: 1px solid var(--yc-teal-dark);
  color: var(--yc-teal-dark);
  border-radius: var(--yc-radius-pill);
  padding: 6px 14px;
  font: inherit;
  font-size: var(--yc-fs-sm);
  font-weight: var(--yc-fw-semibold);
  cursor: pointer;
}
.notif-selectall__btn:hover { background: color-mix(in srgb, var(--yc-teal) 8%, white); }
.notif-selectall__btn--danger {
  border-color: var(--yc-danger);
  color: var(--yc-danger);
}
.notif-selectall__btn--danger:hover {
  background: color-mix(in srgb, var(--yc-danger) 8%, white);
}

/* ── CSP inline-style sweep utilities (#89, 2026-09-11) ─────────────
   Extracted from repeat inline `style="..."` HTML attributes that
   CSP `style-src 'self'` was silently stripping. Class rules aren't
   affected by that policy. See fbb5015 / 1daa8bb for the pattern. */

/* Loading… placeholders across screens — same 24px padding recipe
   used in every list component's first-render <p class="muted">. */
.load-pad { padding: var(--yc-sp-6); }
.load-pad--centered { padding: var(--yc-sp-6); text-align: center; }
.load-pad--sm { padding: var(--yc-sp-4); }

/* Auth-flow labels above pill inputs (login / forgot / reset).
   Replaces the inline style="display:block;font-size:0.85rem;
   font-weight:600;color: var(--yc-fg);margin:0 0 4px 4px" that
   was on every <label class="login2-label"> — CSP stripped it and
   labels rendered as inline unsized text. Two margin variants: the
   FIRST label sits flush at margin-top:0 (--flush); every following
   label gets 12px of breathing room above (default). */
.login2-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--yc-fg);
  margin: 12px 0 4px 4px;
}
.login2-label--flush { margin-top: 0; }

/* Reset-flow spacing recovery — resend button on /reset-sent and the
   ✓ glyph on /reset-done both carried inline `style="margin-top:16px"`
   which CSP stripped. */
.mt-4 { margin-top: var(--yc-sp-4) !important; }