/* CertaRounds — Set up your plan screen styles (src/screens/onboarding.js). Owned by its M3 screen agent.
   Semantic tokens only (docs/COMPONENTS.md §2); scope every rule under a screen class.
   Components (Card, Button, Chip, TextField, SegmentedControl, ToggleRow…) keep their own styles;
   rules here only lay them out and style the screen's own elements (.ob-*). */

/* ============ Shared: heading block ============ */
.ob__stage { display: flex; flex-direction: column; min-width: 0; }
.ob__step {
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-accent);
}
.ob__title {
  margin-top: var(--sp-2);
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
  color: var(--text-strong);
  text-wrap: balance;
}
.ob__sub {
  margin-top: var(--sp-2);
  font-size: var(--fs-15);
  line-height: var(--lh-body);
  color: var(--text-2);
  text-wrap: pretty;
}
.ob__body { margin-top: var(--sp-6); min-width: 0; }

/* Step change: a short slide in the direction of travel (zeroed by reduced motion) */
@keyframes ob-in-fwd { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes ob-in-back { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.ob-anim--fwd { animation: ob-in-fwd var(--dur-3) var(--ease-out) both; }
.ob-anim--back { animation: ob-in-back var(--dur-3) var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) { .ob-anim { animation: none; } }
:root[data-motion="reduce"] .ob-anim { animation: none; }

/* ============ Phone: full-bleed, primary action pinned at the bottom ============ */
.ob--phone {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--topbar-h) - var(--safe-top) - var(--safe-bottom) - var(--sp-6));
  min-height: calc(100dvh - var(--topbar-h) - var(--safe-top) - var(--safe-bottom) - var(--sp-6));
}
.ob--phone .ob__form {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: var(--sp-3) var(--gutter) 0;
}
.ob--phone .ob__stage { flex: 1 1 auto; }
.ob--phone .ob__actions {
  position: sticky;
  bottom: 0;
  z-index: var(--z-sticky);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: var(--sp-6) calc(-1 * var(--gutter)) 0;
  padding: var(--sp-5) var(--gutter) calc(var(--sp-3) + var(--safe-bottom));
  background: linear-gradient(to top, var(--bg) 78%, transparent);
}

/* ============ Tablet / desktop: centred card ============ */
.ob--card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-8) var(--gutter) var(--sp-7);
}
.ob__brand { display: flex; justify-content: center; margin-bottom: var(--sp-6); }
.ob__card { width: 100%; max-width: 560px; }
.ob--card .ob__form { padding: var(--sp-2); }
.ob--card .ob__head .ob__step { display: none; }         /* the progress row already says it */
.ob--card .ob__title { font-size: var(--fs-30); }
.ob__progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.ob__progress-text {
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.ob--card .ob__body { margin-top: var(--sp-5); }
.ob--card .ob__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--divider);
}
.ob--card .ob__actions--done { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
.ob--card .ob__back { margin-left: calc(-1 * var(--sp-3)); }   /* optical: ghost label lines up with the content edge */
.ob__spacer { flex: 1 1 auto; }
.ob__privacy {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--sp-5);
  font-size: var(--fs-13);
  color: var(--text-3);
}

/* ============ Choice rows (Card as radio) ============ */
.ob-choices { display: flex; flex-direction: column; gap: 10px; }
.ob-choice {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 44px;
  padding: 2px 4px 2px 6px;
}
.ob-choice__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ob-choice__label { font-size: var(--fs-15); font-weight: var(--fw-semibold); line-height: 1.3; color: var(--text-strong); }
.ob-choice__sub { font-size: var(--fs-13); line-height: 1.4; color: var(--text-3); }
.card--selected .ob-choice__sub { color: var(--text-2); }
.ob-choice__mark {
  display: grid;
  place-items: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--border-control);
  color: var(--accent);
}
.ob-choice__mark.is-on { box-shadow: none; }
@media (min-width: 768px) {
  .ob-choice__label { font-size: 1rem; }
}

/* Resident → year */
.ob-years {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-4) var(--sp-2);
}
.ob-years__label { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--text-2); }
.ob-years .cluster { --cluster: 10px; }

.ob-error {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-13);
  color: var(--danger);
}
.ob-error:focus { outline: none; }

/* ============ Step 1: name + greeting preview ============ */
.ob-field { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.ob-field .segmented { align-self: flex-start; }
.ob-field__caption { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--text-strong); }
.ob-greet {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.ob-greet__avatar { display: inline-flex; flex-shrink: 0; }
.ob-greet__blank {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-soft-fg);
}
.ob-greet__text { display: flex; flex-direction: column; min-width: 0; }
.ob-greet__hello { font-size: var(--fs-15); color: var(--text-2); }
.ob-greet__name {
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.25;
  color: var(--text-strong);
  overflow-wrap: break-word;   /* D19: only a single over-long token may break */
}
.ob-greet__name.is-empty { font-size: var(--fs-17); font-weight: var(--fw-medium); letter-spacing: 0; color: var(--text-3); }

/* ============ Step 3: exam date ============ */
.ob-exam__readout {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.ob-exam__readout[hidden] { display: none; }
.ob-exam__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ob-exam__when { font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--text-strong); }
.ob-exam__date { font-weight: var(--fw-medium); color: var(--text-2); }
.ob-exam__why { font-size: var(--fs-13); line-height: 1.45; color: var(--text-2); }
.ob-or {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-13);
  color: var(--text-3);
}
.ob-or::before, .ob-or::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--divider); }

/* ============ Step 4: daily time ============ */
.ob-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-2); }
.ob-tile__in {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-2) 0 6px;
  text-align: center;
}
.ob-tile__value {
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.15;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.ob-tile__unit { font-size: var(--fs-12); font-weight: var(--fw-semibold); color: var(--text-3); }
.card--selected .ob-tile__value { color: var(--link); }
.card--selected .ob-tile__unit { color: var(--accent-soft-fg); }
@media (min-width: 768px) { .ob-tile__value { font-size: var(--fs-24); } }

.ob-readout__row { display: flex; align-items: center; gap: var(--sp-3); }
.ob-readout__title { font-size: var(--fs-17); font-weight: var(--fw-semibold); color: var(--text-strong); line-height: 1.3; }
.ob-readout__text { margin-top: 2px; font-size: var(--fs-13); line-height: 1.45; color: var(--text-2); }

.ob-remind {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--divider);
}

/* ============ Step 5: weakest areas ============ */
.ob-weak { --cluster: 10px 8px; }
.ob-count { font-size: var(--fs-13); line-height: 1.45; color: var(--text-2); }

/* ============ Done: plan summary ============ */
.ob-done__hero { display: flex; align-items: flex-end; gap: var(--sp-4); }
.ob-done__copy { flex: 1 1 auto; min-width: 0; padding-bottom: var(--sp-3); }
.ob-done__copy .ob__title { font-size: var(--fs-24); text-wrap: wrap; }
.ob-nowrap { white-space: nowrap; }
@media (min-width: 768px) { .ob-done__copy .ob__title { font-size: var(--fs-30); } }

.ob-plan__head { display: flex; align-items: center; gap: var(--sp-3); }
.ob-plan__title { font-size: var(--fs-17); font-weight: var(--fw-bold); letter-spacing: var(--tracking-snug); line-height: 1.3; color: var(--text-strong); }
.ob-plan__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin-top: 2px;
  font-size: var(--fs-15);
  color: var(--text-2);
}
.ob-plan__num { font-weight: var(--fw-semibold); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.ob-plan__dot { color: var(--text-3); }
.ob-plan__why { margin-top: var(--sp-4); font-size: var(--fs-15); line-height: var(--lh-body); color: var(--text-2); }
.ob-plan__specs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-4); }
.ob-plan__marks { display: flex; gap: 6px; }
.ob-plan__marks li { display: inline-flex; }
.ob-plan__more {
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--surface-sunken);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.ob-plan__span { font-size: var(--fs-13); color: var(--text-3); }
.ob-plan__facts {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--divider);
}
.ob-plan__facts li { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-13); line-height: 1.5; color: var(--text-2); }
.ob-plan__facts .icon { flex-shrink: 0; margin-top: 1px; color: var(--accent); }
.ob-plan__phase { font-weight: var(--fw-semibold); color: var(--text-strong); }
.ob-done__note { font-size: var(--fs-13); line-height: 1.5; color: var(--text-3); }
.ob-done__note a { font-weight: var(--fw-semibold); }

/* ============ F1: desktop uses the shared entry layout (login.css .auth--split) ============ */
.ob--entry { display: block; padding: 0; }
.ob--entry .ob__card { max-width: none; }
.auth--onboarding .auth__content { max-width: 560px; }

/* Plan summary inside the wizard card: a flat tinted section, not a card in a card */
.ob-plan--flat { padding: var(--sp-5); border-radius: var(--r-lg); background: var(--surface-2); }
.ob-plan--flat .ob-plan__facts { border-top-color: var(--border-strong); }
.ob-plan__marks { align-items: center; }

/* Phone: the pinned action bar is solid with a hairline, so it never slices a line of text */
.ob--phone .ob__actions {
  background: var(--bg);
  box-shadow: 0 -1px 0 var(--divider);
}

/* ============ F2 ============ */
/* "Which year?" is its own radiogroup after the level radiogroup in the DOM; the level group's box
   is dissolved (display: contents) so CSS order can show the years right under Resident. */
.ob-level { display: flex; flex-direction: column; gap: 10px; }
.ob-level > .ob-choices { display: contents; }
.ob-level .ob-choice-card { order: 2; }
.ob-level .ob-choice-card[data-key="level-resident"] { order: 0; }
.ob-level > .ob-years { order: 1; }

/* Phone done screen: the diagnostic is a quiet text link under the pinned primary */
.ob-textlink {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--sp-3);
  border-radius: 10px;
  font-size: var(--fs-15);
  font-weight: var(--fw-semibold);
  color: var(--link);
}
.ob-textlink:hover { color: var(--link-hover); text-decoration: underline; }
.ob-textlink:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ob--phone .ob__actions--done { gap: var(--sp-1); }

/* The subline runs the column width (no early break at 360) */
.ob__sub { max-width: none; text-wrap: wrap; }

/* Step 5 on phones: an even two-column grid of chips instead of a ragged cloud */
@media (max-width: 767px) {
  .ob-weak.cluster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ob-weak .chip { width: 100%; min-height: 44px; height: auto; justify-content: flex-start; text-align: left; white-space: normal; padding-block: 6px; }
  .ob-weak .chip__label { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: normal; line-height: 1.25; }
}

/* Tablet portrait card: centred on tall screens (a fixed reference height, so it never jumps) */
@media (min-width: 768px) and (max-width: 1023px) {
  .ob--card:not(.ob--entry) {
    padding-top: max(var(--sp-8), calc((100vh - 720px) / 2));
    padding-top: max(var(--sp-8), calc((100dvh - 720px) / 2));
  }
}

/* Desktop done: the panel carries the greeting; the card opens on the plan */
.ob--entry .ob__form--done .ob__body { margin-top: 0; }

/* ============ F3 ============ */
/* Phones: the action bar follows short steps (sticky only once the content overflows) */
.ob--phone .ob__stage { flex: 0 0 auto; }
/* Step 5: an even grid on every viewport (2 columns on phones, 3 on the card), alphabetical */
.ob-weak { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
/* F4: columns follow the CARD width (container query), not the viewport — the desktop entry card is
   only ~440px wide, so it keeps 2 columns; 3 only where the card is wide enough for whole names */
.ob__body { container-type: inline-size; container-name: ob-body; }
@container ob-body (min-width: 600px) { .ob-weak { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } }
.ob-weak .chip { width: 100%; min-height: 44px; height: auto; justify-content: flex-start; text-align: left; white-space: normal; padding-block: 6px; }
.ob-weak .chip__label { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: normal; line-height: 1.25; }
/* At the maximum the others stay focusable but look unavailable */
.ob-weak .chip.is-blocked { color: var(--text-disabled); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); cursor: not-allowed; }
.ob-count.is-max { color: var(--text); font-weight: var(--fw-medium); }
/* Step 4: the readout is a white card (the step's payoff), not a pale tile */
.ob-readout { box-shadow: var(--shadow-card); }
/* Done: the prescription sits straight on the card (no nested well) on the tablet/desktop card */
.ob-plan--flat { padding: 0; background: none; border-radius: 0; }
.ob-plan--flat .ob-plan__facts { border-top-color: var(--divider); }
/* Done: named specialty chips (D18 day one) */
.ob-plan__specs { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
.ob-plan__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ob-plan__chips > li { display: inline-flex; }
.ob-plan__chips .chip { white-space: normal; }
.ob-plan__more { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--text-2); padding: 0 4px; }
/* The inline "Settings" link gets a 44px hit area without changing the line */
.ob-done__note a { position: relative; }
.ob-done__note a::after { content: ""; position: absolute; inset: -14px -8px; }

/* ============ F4 ============ */
/* D19: never break inside a word — chip labels wrap between words only (all viewports) */
.ob-weak .chip__label { overflow-wrap: normal; word-break: normal; hyphens: manual; }
/* One progress style for the setup flow (with First login): dots + sentence-case line, side by side */
.ob__progress { justify-content: flex-start; gap: var(--sp-3); }
.ob--phone .ob__progress { margin-bottom: var(--sp-4); }
.setup-progress .stepper__dot--done { background: var(--primary); }
.ob__progress-text { font-weight: var(--fw-semibold); }
/* Phones: the action bar is pinned to the bottom on every step, so Continue never moves (R4) */
.ob--phone .ob__stage { flex: 1 1 auto; }
/* Exam date: our outline calendar icon sits over the native picker button (which stays clickable) */
.ob-exam-field .field__control { --field-trail-w: 48px; }
.ob-exam-field .ob-exam__icon { display: inline-flex; padding: 0 8px; color: var(--text-strong); pointer-events: none; }
.ob-exam-field input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0; position: absolute; right: 0; top: 0; width: 48px; height: 100%; margin: 0; cursor: pointer; }
/* "Not scheduled yet" is a toggle: a checkbox-style square */
.ob-choice__mark--box { border-radius: 6px; width: 22px; height: 22px; flex-basis: 22px; }
.ob-choice__mark--box.is-on { background: var(--primary); color: var(--primary-fg); box-shadow: none; }
/* Done: the diagnostic is the same quiet text link on every viewport */
.ob--card .ob__actions--done .ob-textlink { align-self: center; }