/* ===========================================================================
 * Kriyasya Ayurveda — Report document styles
 *
 * Loaded after app.css and app-v2.css (see includes/header.php) so the .reco-*
 * corrections at the bottom of this file can override the originals.
 *
 * The report is styled as a DOCUMENT, not a web page: a single measured column,
 * serif headings, numbered sections, and a legal block set small at the end.
 * Nothing here relies on colour alone to carry meaning.
 * ======================================================================== */

.rpt {
  --rpt-ink: #1f2b27;
  --rpt-ink-soft: #5b6863;
  --rpt-ink-faint: #8b968f;
  --rpt-line: #e2e7e1;
  --rpt-line-strong: #c2ccc4;
  --rpt-accent: #174c42;
  --rpt-accent-soft: #eef3ed;
  --rpt-gold: #b0862f;
  --rpt-paper: #fff;

  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3.25rem) clamp(1.25rem, 4vw, 3.25rem);
  background: var(--rpt-paper);
  border: 1px solid var(--rpt-line);
  border-top: 3px solid var(--rpt-accent);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(25, 45, 39, .05), 0 18px 48px rgba(25, 45, 39, .07);
  color: var(--rpt-ink);
  font-size: 1rem;
  line-height: 1.62;
}

.rpt p { margin: 0 0 .9rem; max-width: 64ch; }
.rpt p:last-child { margin-bottom: 0; }

/* Screen-reader-only text. Used to give qualitative signal labels their subject
   ("Leading" alone is meaningless read out of context). */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------- cover */
.rpt__cover { padding-bottom: 1.75rem; border-bottom: 1px solid var(--rpt-line); margin-bottom: 2.25rem; }
.rpt__masthead {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-bottom: 1.25rem; border-bottom: 1px solid var(--rpt-line); margin-bottom: 1.5rem;
}
.rpt__brand { display: inline-flex; align-items: center; gap: .45rem; color: var(--rpt-accent); font-weight: 800; font-size: .95rem; letter-spacing: -.01em; }
.rpt__brand svg { flex: none; }
.rpt__doctype { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rpt-ink-faint); text-align: right; }
html[lang="hi"] .rpt__doctype { text-transform: none; letter-spacing: 0; font-size: .78rem; }

.rpt__title {
  font-family: var(--font-head, Georgia, serif);
  font-size: clamp(1.85rem, 4.6vw, 2.7rem);
  line-height: 1.12; letter-spacing: -.02em; margin: 0 0 .5rem; max-width: 28ch;
}
.rpt__subtitle { font-size: 1.06rem; color: var(--rpt-ink-soft); max-width: 56ch; margin: 0 0 1.5rem; }

.rpt-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0; margin: 0 0 1.25rem; border: 1px solid var(--rpt-line); border-radius: 6px; overflow: hidden;
}
.rpt-meta__row { padding: .7rem .85rem; border-right: 1px solid var(--rpt-line); }
.rpt-meta__row:last-child { border-right: 0; }
.rpt-meta dt { font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rpt-ink-faint); margin: 0 0 .2rem; }
html[lang="hi"] .rpt-meta dt { text-transform: none; letter-spacing: 0; font-size: .74rem; }
.rpt-meta dd { margin: 0; font-size: .9rem; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.rpt__privacy { display: flex; gap: .4rem; align-items: flex-start; margin: 0; font-size: .82rem; color: var(--rpt-ink-soft); }
.rpt__privacy svg { flex: none; margin-top: .2rem; opacity: .7; }

/* ---------------------------------------------------------------- sections */
.rpt__section { margin: 0 0 2.25rem; }
.rpt__sectionhead { display: flex; align-items: flex-start; gap: .85rem; margin: 0 0 1rem; }
.rpt__sectionno {
  flex: none; font-family: var(--font-head, Georgia, serif); font-size: 1.05rem; font-weight: 700;
  line-height: 1; color: var(--rpt-gold); padding-top: .35rem;
  font-variant-numeric: tabular-nums; letter-spacing: .04em;
}
.rpt__kicker { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--rpt-ink-faint); margin-bottom: .15rem; }
html[lang="hi"] .rpt__kicker { text-transform: none; letter-spacing: 0; font-size: .76rem; }
.rpt__sectionhead h2 {
  font-family: var(--font-head, Georgia, serif); font-size: clamp(1.15rem, 2.3vw, 1.45rem);
  line-height: 1.25; margin: 0; letter-spacing: -.01em;
}
.rpt__lead { font-size: 1.06rem; color: var(--rpt-ink); }
.rpt__note { font-size: .84rem; color: var(--rpt-ink-soft); }

/* key observations — a label column keeps long observations readable */
.rpt-findings { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .5rem; }
.rpt-findings li {
  display: grid; grid-template-columns: minmax(7.5rem, auto) 1fr; gap: .85rem; align-items: baseline;
  padding: .7rem .9rem; background: var(--rpt-accent-soft); border-radius: 6px;
}
.rpt-findings__tag { font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--rpt-accent); }
html[lang="hi"] .rpt-findings__tag { text-transform: none; letter-spacing: 0; font-size: .78rem; }

.rpt-list { margin: .9rem 0 0; padding-left: 1.15rem; display: grid; gap: .45rem; }
.rpt-list li { max-width: 64ch; }
.rpt-datapoints { margin: .9rem 0 0; padding: .8rem 1rem .8rem 2rem; border-left: 2px solid var(--rpt-line-strong); display: grid; gap: .35rem; font-size: .92rem; color: var(--rpt-ink-soft); }

.rpt__figure { margin: 0 0 .9rem; }
.rpt__figure img, .rpt__figure svg { max-width: 100%; height: auto; }

.rpt__reflection {
  margin: 1.1rem 0 0; padding: 1rem 1.15rem; border: 0; border-left: 3px solid var(--rpt-gold);
  background: #fdfaf3; border-radius: 0 6px 6px 0; font-style: normal; color: var(--rpt-ink);
}
.rpt__reflection-label { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--rpt-gold); margin-bottom: .3rem; }
html[lang="hi"] .rpt__reflection-label { text-transform: none; letter-spacing: 0; font-size: .78rem; }

/* ---------------------------------------------------------- recommendations */
.rpt-reco { list-style: none; margin: 1.1rem 0 0; padding: 0; counter-reset: none; display: grid; gap: .6rem; }
.rpt-reco__item {
  display: grid; grid-template-columns: 2rem 1fr; gap: .85rem; align-items: start;
  padding: .95rem 1.05rem; border: 1px solid var(--rpt-line); border-radius: 8px; background: #fff;
}
.rpt-reco__no {
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--rpt-accent); color: #fff; font-size: .82rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.rpt-reco__body p { margin: 0; }
.rpt-reco__src { display: block; margin-top: .35rem; font-size: .74rem; color: var(--rpt-ink-faint); }

/* --------------------------------------------------------------- 7-day plan */
.rpt-plan { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: 0; border: 1px solid var(--rpt-line); border-radius: 8px; overflow: hidden; }
.rpt-plan li { display: grid; grid-template-columns: minmax(5rem, auto) 1fr; gap: .9rem; padding: .7rem .95rem; border-bottom: 1px solid var(--rpt-line); }
.rpt-plan li:last-child { border-bottom: 0; }
.rpt-plan li:nth-child(odd) { background: #fbfcfa; }
.rpt-plan__day { font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--rpt-accent); padding-top: .12rem; }
html[lang="hi"] .rpt-plan__day { text-transform: none; letter-spacing: 0; font-size: .82rem; }

.rpt__closing p { font-size: 1.02rem; color: var(--rpt-ink-soft); }

/* ------------------------------------------------------------- legal block */
.rpt__legal { margin-top: 2.5rem; padding-top: 1.1rem; border-top: 1px solid var(--rpt-line); }
.rpt__legal-title { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--rpt-ink-faint); margin: 0 0 .5rem; }
html[lang="hi"] .rpt__legal-title { text-transform: none; letter-spacing: 0; font-size: .8rem; }
.rpt__legal p { font-size: .76rem; line-height: 1.55; color: var(--rpt-ink-soft); margin: 0 0 .4rem; max-width: 72ch; }
.rpt__legal-sig { font-variant-numeric: tabular-nums; color: var(--rpt-ink-faint) !important; }

/* ----------------------------------------------------------------- actions */
.rpt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin: 1.5rem auto 0; max-width: 46rem; }
.rpt-actions__note { display: flex; align-items: center; gap: .35rem; margin: 0; font-size: .78rem; color: #5b6863; flex-basis: 100%; }
.rpt-actions__note svg { flex: none; opacity: .7; }
.rpt-actions .btn[aria-busy="true"] { opacity: .65; pointer-events: none; }

@media (max-width: 620px) {
  .rpt { border-radius: 0; padding-inline: 1.1rem; }
  .rpt__masthead { flex-direction: column; align-items: flex-start; gap: .35rem; }
  .rpt__doctype { text-align: left; }
  .rpt-meta { grid-template-columns: 1fr 1fr; }
  .rpt-meta__row:nth-child(even) { border-right: 0; }
  .rpt-meta__row:nth-child(-n+2) { border-bottom: 1px solid var(--rpt-line); }
  .rpt-findings li, .rpt-plan li { grid-template-columns: 1fr; gap: .25rem; }
  .rpt__sectionhead { gap: .6rem; }
}

/* ------------------------------------------------------------------- print */
@media print {
  .rpt {
    max-width: none; margin: 0; padding: 0; border: 0; box-shadow: none;
    font-size: 10.5pt; line-height: 1.5;
  }
  .rpt__cover { break-after: avoid; }
  .rpt__section, .rpt-reco__item, .rpt-plan, .rpt-findings li { break-inside: avoid; }
  .rpt__sectionhead { break-after: avoid; }
  .rpt__legal { break-before: auto; }
  .rpt-findings li, .rpt-plan li:nth-child(odd), .rpt__reflection { background: transparent !important; }
  .rpt-reco__no { background: transparent !important; color: #1f2b27 !important; border: 1pt solid #1f2b27; }
  .rpt-actions { display: none !important; }
}

@media (forced-colors: active) {
  .rpt, .rpt-reco__item, .rpt-meta, .rpt-plan { border: 1px solid CanvasText; }
  .rpt-reco__no { border: 1px solid CanvasText; }
}

/* ===========================================================================
 * Signal rows (.reco-*) — corrections to app.css
 *
 * app.css sizes the third column at a fixed 46px with text-align:right and
 * tabular-nums, because it was built to hold a percentage like "34%". The
 * assessment engine deliberately stopped emitting percentages and now writes
 * qualitative labels there instead ("leading signal", "close leading signal").
 * Those wrapped inside 46px, so every row wrapped to a different height and the
 * column never lined up. The column is now sized for words, left-aligned, and
 * the rows are baseline-consistent.
 * ======================================================================== */
.reco-bars { display: grid; gap: .65rem; margin: 1.1rem 0 0; background: #fbfcfa; border: 1px solid var(--rpt-line, #e2e7e1); border-radius: 8px; padding: 1rem; }
.reco-bar {
  display: grid;
  grid-template-columns: minmax(5.5rem, 7rem) minmax(0, 1fr) minmax(8rem, max-content);
  align-items: center; gap: .85rem; min-height: 2rem;
}
.reco-bar__name { font-weight: 700; font-size: .92rem; line-height: 1.3; }
.reco-bar__track { height: 10px; border-radius: 999px; background: #e6ebe4; overflow: hidden; }
.reco-bar__fill { display: block; height: 100%; border-radius: 999px; transition: width .8s cubic-bezier(.22,1,.36,1); }
/* .reco-bar__pct is the legacy class name kept for the existing engine markup. */
.reco-bar__pct, .reco-bar__signal {
  text-align: left;
  font-variant-numeric: normal;
  font-weight: 700;
  font-size: .78rem;
  line-height: 1.25;
  letter-spacing: .01em;
  color: #5b6863;
  text-transform: uppercase;
  overflow-wrap: normal;
  hyphens: none;
}
html[lang="hi"] .reco-bar__pct, html[lang="hi"] .reco-bar__signal { text-transform: none; letter-spacing: 0; font-size: .84rem; }

@media (max-width: 560px) {
  .reco-bar { grid-template-columns: 1fr auto; grid-template-areas: "name signal" "track track"; row-gap: .4rem; }
  .reco-bar__name { grid-area: name; }
  .reco-bar__pct, .reco-bar__signal { grid-area: signal; text-align: right; }
  .reco-bar__track { grid-area: track; }
}

@media print {
  .reco-bars { background: transparent; }
  .reco-bar__track { border: 1pt solid #9aa39f; }
}

/* ===========================================================================
 * Activity acknowledgement (.step-ack)
 *
 * Closes every "do this now" step in a guided journey. It is the only place the
 * product asks the user to commit to something, so it is styled as a distinct
 * footer on the step card rather than as another form field in the flow.
 * ======================================================================== */
.step-ack {
  margin: 1.5rem 0 0;
  padding: 1rem 1.1rem;
  border: 0;
  border-top: 1px solid var(--line, #e2e7e1);
  background: linear-gradient(180deg, rgba(238, 243, 237, .55), rgba(238, 243, 237, .18));
  border-radius: 0 0 12px 12px;
}
/* float + full width takes the legend out of the border-notching path, so the fieldset's
   top rule draws cleanly above it instead of striking through the words. */
.step-ack__legend {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0 0 .1rem;
  font-family: var(--font-head, Georgia, serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: #174c42;
}
.step-ack::after { content: ""; display: table; clear: both; }
.step-ack__hint { margin: .25rem 0 .8rem; font-size: .82rem; line-height: 1.5; color: #5b6863; max-width: 52ch; }
.step-ack__options { display: flex; flex-wrap: wrap; gap: .5rem; }
.step-ack__opt {
  position: relative;
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px; padding: .55rem .9rem;
  background: #fff; border: 1.5px solid var(--line, #dfe5dd); border-radius: 999px;
  font-size: .9rem; font-weight: 650; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.step-ack__opt:hover { border-color: #b7c9bd; }
.step-ack__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.step-ack__mark { display: grid; place-items: center; color: #8b968f; }
.step-ack__opt:has(input:checked) { border-color: #174c42; background: #174c42; color: #fff; }
.step-ack__opt:has(input:checked) .step-ack__mark { color: #fff; }
.step-ack__opt:has(input:focus-visible) { outline: 3px solid #0b6c5d; outline-offset: 3px; }

/* :has() is well supported now, but the checked state must never depend on it alone —
   without a fallback an unsupported browser gives no selection feedback at all. */
@supports not selector(:has(*)) {
  .step-ack__opt input:checked ~ .step-ack__label { text-decoration: underline; text-decoration-thickness: .18em; }
  .step-ack__opt input:checked ~ .step-ack__mark { color: #174c42; }
}

@media (forced-colors: active) {
  .step-ack__opt { border: 1px solid CanvasText; }
  .step-ack__opt:has(input:checked) { background: Highlight; color: HighlightText; }
}

@media print { .step-ack { display: none !important; } }

/* ===========================================================================
 * Today (R2)
 *
 * Visual hierarchy is the design: ONE action is unmissable, the rest of the day
 * is quiet context beneath it. Nothing here is a score, a grade or a progress
 * bar, because a wellness surface that grades you is a surface people avoid.
 * ======================================================================== */

.v2-today-hero { padding: clamp(1.5rem, 4vw, 3rem) 0 0; }
.v2-today-hero__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem;
}
.v2-today-hero h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); margin: .2rem 0 0; letter-spacing: -.02em; }

.v2-today-season {
  text-align: right; padding: .6rem .9rem; border-radius: var(--ay2-r1, 12px);
  background: var(--ay2-mist, #eef3ed); min-width: 12rem;
}
.v2-today-season strong { display: block; font-size: .95rem; color: var(--ay2-forest, #174c42); }
.v2-today-season span { font-size: .78rem; color: var(--ay2-ink-soft, #5c6762); }

/* ---- the one next action ---- */
.v2-today-next {
  display: flex; gap: 1.1rem; align-items: flex-start;
  padding: clamp(1.1rem, 3vw, 1.8rem);
  background: #fff; border: 1px solid var(--ay2-line, #dfe5dd);
  border-left: 4px solid var(--ay2-forest, #174c42);
  border-radius: var(--ay2-r2, 18px); box-shadow: var(--ay2-s2, 0 18px 48px rgba(25,45,39,.10));
}
.v2-today-next__icon {
  flex: none; display: grid; place-items: center; width: 54px; height: 54px;
  border-radius: 16px; background: var(--ay2-mist, #eef3ed); color: var(--ay2-forest, #174c42);
}
.v2-today-next__body { min-width: 0; }
.v2-today-next h2 { margin: .25rem 0 .4rem; font-size: clamp(1.4rem, 3vw, 2rem); }
.v2-today-next__short { color: var(--ay2-ink-soft, #5c6762); font-size: 1.05rem; margin: 0 0 1rem; max-width: 54ch; }
.v2-today-next__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.1rem 0 0; }
.v2-today-next--done { border-left-color: var(--ay2-leaf, #6f8f61); align-items: center; }
.v2-today-next.is-done { border-left-color: var(--ay2-leaf, #6f8f61); }

.v2-today-cues { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.v2-today-cues li { display: flex; gap: .5rem; align-items: flex-start; font-size: .94rem; }
.v2-today-cues svg { flex: none; margin-top: .2rem; color: var(--ay2-leaf, #6f8f61); }

.v2-today-seasonnote {
  display: flex; gap: .45rem; align-items: flex-start; margin: 1rem 0 0;
  padding: .7rem .85rem; border-radius: 10px; background: #fdfaf3;
  font-size: .88rem; line-height: 1.5;
}
.v2-today-seasonnote svg { flex: none; margin-top: .2rem; color: #b0862f; }

.v2-today-why {
  display: flex; gap: .45rem; align-items: flex-start; margin: 1rem 0 0;
  font-size: .82rem; line-height: 1.55; color: var(--ay2-ink-soft, #5c6762);
}
.v2-today-why svg { flex: none; margin-top: .2rem; opacity: .6; }

/* ---- the four anchors ---- */
.v2-today-count {
  font-variant-numeric: tabular-nums; font-weight: 800; font-size: 1.05rem;
  color: var(--ay2-forest, #174c42); background: var(--ay2-mist, #eef3ed);
  padding: .35rem .8rem; border-radius: 999px; flex: none;
}
.v2-today-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.v2-today-item {
  display: grid; grid-template-columns: auto 1fr auto; gap: .9rem; align-items: center;
  padding: .9rem 1.05rem; background: #fff;
  border: 1px solid var(--ay2-line, #dfe5dd); border-radius: var(--ay2-r1, 12px);
}
.v2-today-item__icon {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: var(--ay2-mist, #eef3ed); color: var(--ay2-forest, #174c42);
}
.v2-today-item__text { min-width: 0; display: grid; gap: .1rem; }
.v2-today-item__text strong { font-size: .98rem; }
.v2-today-item__text small { font-size: .82rem; color: var(--ay2-ink-soft, #5c6762); }
.v2-today-item__state { display: flex; align-items: center; gap: .6rem; flex: none; }
.v2-today-item.is-next { border-color: var(--ay2-forest, #174c42); box-shadow: inset 0 0 0 1px var(--ay2-forest, #174c42); }
.v2-today-item.is-done { background: #fbfcfa; }
.v2-today-item.is-done .v2-today-item__text strong { color: var(--ay2-ink-soft, #5c6762); }
/* "Later today" is dimmed but never disabled — someone who does it early may still tick it. */
.v2-today-item.is-later { opacity: .72; }

.v2-today-tick {
  display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; font-weight: 700;
  color: #2d6639; white-space: nowrap;
}
.v2-today-streak {
  font-size: .74rem; font-weight: 700; color: #b0862f; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---- where you are / notice one thing ---- */
.v2-today-progress, .v2-today-notice {
  background: #fff; border: 1px solid var(--ay2-line, #dfe5dd);
  border-radius: var(--ay2-r2, 18px); padding: clamp(1.1rem, 3vw, 1.6rem);
}
.v2-today-progress h2, .v2-today-notice h2 { margin: 0 0 .8rem; }
.v2-today-progress .rpt-meta { margin-bottom: .9rem; }
.v2-today-notice textarea { width: 100%; }
.v2-today-notice__actions { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: .6rem; }

@media (max-width: 620px) {
  .v2-today-season { text-align: left; min-width: 0; }
  .v2-today-next { flex-direction: column; gap: .8rem; }
  .v2-today-item { grid-template-columns: auto 1fr; }
  .v2-today-item__state { grid-column: 1 / -1; justify-content: flex-start; padding-left: 2.9rem; }
  .v2-today-next__actions .btn { width: 100%; justify-content: center; }
}

@media (forced-colors: active) {
  .v2-today-next, .v2-today-item, .v2-today-progress, .v2-today-notice { border: 1px solid CanvasText; }
  .v2-today-item.is-next { outline: 2px solid Highlight; }
}

@media print { .v2-today-next__actions, .v2-today-notice__actions { display: none !important; } }

/* ===========================================================================
   R3 — reminder settings rows.
   A row is one anchor: its switch and its time, side by side, so the pairing is
   obvious and the time control is never orphaned from what it belongs to.
   ======================================================================== */
.ayur-rem { border: 0; margin: 1.1rem 0 0; padding: 0; }
.ayur-rem[disabled] { opacity: .5; }
.ayur-rem__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: .7rem 0; border-bottom: 1px solid var(--v2-hairline, rgba(23, 76, 66, .14));
}
.ayur-rem__row:last-child { border-bottom: 0; }
.ayur-rem__on { flex: 1 1 16rem; margin: 0; }
.ayur-rem__time { display: inline-flex; align-items: center; gap: .5rem; font-size: .92rem; }
.ayur-rem__time input[type="time"] {
  font: inherit; padding: .42rem .6rem; min-height: 2.4rem;
  border: 1px solid var(--v2-hairline, rgba(23, 76, 66, .28));
  border-radius: .5rem; background: #fff; color: inherit;
}
.ayur-rem__time input[type="time"]:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
.ayur-rem__quiet {
  display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: center;
  margin-top: 1.1rem; padding-top: 1rem;
  border-top: 1px solid var(--v2-hairline, rgba(23, 76, 66, .14));
}
@media (max-width: 560px) {
  .ayur-rem__row { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .ayur-rem__quiet { flex-direction: column; align-items: flex-start; gap: .7rem; }
}
@media (forced-colors: active) {
  .ayur-rem__time input[type="time"] { border: 1px solid CanvasText; }
}

/* ===========================================================================
   R4 — weekly review.
   Verdicts are carried by a left border and a plain tag, not by colour alone:
   "held" and "slipped" must remain distinguishable in greyscale, in forced
   colours, and to anyone who does not see red and green as different.
   ======================================================================== */
.rev-list { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .7rem; }
.rev-item, .rev-prop {
  border: 1px solid var(--v2-hairline, rgba(23, 76, 66, .16));
  border-left-width: 4px;
  border-radius: .6rem;
  padding: .85rem 1rem;
  background: #fff;
}
.rev-item__head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.rev-item__icon { display: inline-flex; opacity: .75; }
.rev-item__title { font-size: 1rem; margin: 0; }
.rev-item__verdict { margin-left: auto; }
.rev-item__counts { margin: .4rem 0 0; font-size: .9rem; }

.rev-item--held { border-left-color: #2f7d5f; }
.rev-item--wobbled { border-left-color: #b8863b; }
.rev-item--slipped { border-left-color: #a4553c; }
.rev-item--untried { border-left-color: rgba(23, 76, 66, .28); }

.rev-prop__title { font-size: 1.02rem; margin: .45rem 0 .3rem; }
.rev-prop p { margin: 0; }
.rev-prop__cue {
  margin-top: .55rem; padding: .5rem .65rem;
  background: rgba(23, 76, 66, .05); border-radius: .45rem;
  font-size: .92rem; display: flex; gap: .45rem; align-items: flex-start;
}
.rev-prop--keep { border-left-color: #2f7d5f; }
.rev-prop--shrink { border-left-color: #b8863b; }
.rev-prop--add { border-left-color: #3d6ea5; }

.rev-note { margin-top: 1rem; display: flex; gap: .45rem; align-items: flex-start; }
.rev-season__heading { font-size: .95rem; margin: .9rem 0 .35rem; }
.rev-season__list { margin: 0; padding-left: 1.2rem; display: grid; gap: .3rem; }

@media (forced-colors: active) {
  .rev-item, .rev-prop { border: 1px solid CanvasText; border-left-width: 4px; }
  .rev-prop__cue { border: 1px solid CanvasText; }
}
@media print { #revAdoptWrap { display: none !important; } }

/* ===========================================================================
   R5 — meal rhythm.
   The main meal is marked by a heavier border and a tag, never by colour alone.
   ======================================================================== */
.mealgrid { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 1.1rem; }
@media (min-width: 860px) { .mealgrid { grid-template-columns: repeat(3, 1fr); } }

.mealcard {
  border: 1px solid var(--v2-hairline, rgba(23, 76, 66, .16));
  border-radius: .7rem; padding: 1rem 1.1rem; background: #fff;
  display: flex; flex-direction: column; gap: .5rem;
}
.mealcard.is-main { border-width: 2px; }
.mealcard__head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.mealcard__when { font-weight: 600; letter-spacing: .01em; }
.mealcard__window { margin: 0; font-size: .88rem; }
.mealcard__food { margin: .2rem 0 0; font-size: 1.12rem; }
.mealcard__idea { margin: 0; }
.mealcard__add {
  margin: .2rem 0 0; padding: .55rem .7rem; border-radius: .45rem;
  background: rgba(23, 76, 66, .05); font-size: .92rem;
  display: flex; gap: .45rem; align-items: flex-start;
}
.mealcard__props { margin: .5rem 0 0; display: grid; gap: .3rem; }
.mealcard__prop { display: grid; grid-template-columns: 8.5rem 1fr; gap: .5rem; font-size: .88rem; }
.mealcard__prop dt { color: var(--v2-ink-soft, #5b6d68); }
.mealcard__prop dd { margin: 0; }
.mealcard__mindful { margin: .4rem 0 0; font-size: .9rem; font-style: italic; }

.mealcard__comfort { border: 0; margin: .7rem 0 0; padding: .7rem 0 0; border-top: 1px solid var(--v2-hairline, rgba(23, 76, 66, .14)); }
.mealcard__comfort legend { font-size: .88rem; padding: 0; margin-bottom: .45rem; }
.mealcard__comfortopts { display: flex; gap: .4rem; flex-wrap: wrap; }
.mealcard__comfortopt { display: inline-flex; align-items: center; gap: .35rem; font-size: .86rem;
  border: 1px solid var(--v2-hairline, rgba(23, 76, 66, .22)); border-radius: var(--lv-r-pill, 999px);
  padding: .34rem .6rem; min-height: 2.2rem; cursor: pointer; }
.mealcard__comfortopt:focus-within { outline: 2px solid currentColor; outline-offset: 1px; }
.mealcard__comfortopt:has(input:checked) { border-width: 2px; font-weight: 600; }

.mealweek { display: grid; gap: .7rem; margin-top: 1rem; }
@media (min-width: 720px) { .mealweek { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } }
.mealweek__day {
  border: 1px solid var(--v2-hairline, rgba(23, 76, 66, .14));
  border-radius: .55rem; padding: .75rem .85rem;
}
.mealweek__day.is-today { border-width: 2px; }
.mealweek__date { font-size: .92rem; margin: 0 0 .45rem; }
.mealweek__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .88rem; }
.mealweek__when { display: inline-block; min-width: 4.6rem; color: var(--v2-ink-soft, #5b6d68); }
.mealweek__add { color: var(--v2-ink-soft, #5b6d68); }

.mealshop { display: grid; gap: 1rem; margin-top: 1rem; }
@media (min-width: 720px) { .mealshop { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } }
.mealshop__aisle h3 { font-size: .95rem; margin: 0 0 .4rem; }
.mealshop__aisle ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.mealshop__item { display: flex; align-items: center; gap: .5rem; min-height: 2.2rem; font-size: .92rem; cursor: pointer; }
.mealshop__item:has(input:checked) span { text-decoration: line-through; opacity: .6; }
.mealshop__times { margin-left: auto; color: var(--v2-ink-soft, #5b6d68); font-size: .85rem; }

.mealprefs { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }
.mealprefs__item {
  display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem;
  border: 1px solid var(--v2-hairline, rgba(23, 76, 66, .22));
  border-radius: var(--lv-r-pill, 999px); padding: .38rem .7rem; min-height: 2.3rem; cursor: pointer;
}
.mealprefs__item.is-off { opacity: .55; text-decoration: line-through; }

@media (forced-colors: active) {
  .mealcard, .mealweek__day, .mealcard__add, .mealprefs__item, .mealcard__comfortopt { border: 1px solid CanvasText; }
  .mealcard.is-main, .mealweek__day.is-today { border: 2px solid Highlight; }
}
@media print {
  .mealcard__comfort, .mealprefs, #mealPrefs, #mealStatus { display: none !important; }
  .mealgrid, .mealweek, .mealshop { break-inside: avoid; }
}

/* R5 — the meal line inside the Today anchor list. */
.v2-today-meal { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin-top: .25rem; opacity: .95; }
.v2-today-meal a { text-decoration: underline; }

/* ===========================================================================
   R6 — reference library.
   Read state is carried by a tag and a left border, never by colour alone.
   ======================================================================== */
.lib-card--link { display: block; text-decoration: none; color: inherit; border-left: 4px solid transparent; }
.lib-card--link:hover, .lib-card--link:focus-visible { border-left-color: currentColor; }
.lib-card--link.is-read { border-left-color: #2f7d5f; }
.lib-card__prov {
  display: inline-block; margin-top: .5rem; font-size: .78rem; letter-spacing: .01em;
  color: var(--v2-ink-soft, #5b6d68);
}
.lib-rec__names { display: flex; gap: .6rem; flex-wrap: wrap; margin: .2rem 0 .6rem; font-size: .96rem; }
.lib-rec__props { margin-top: .8rem; }
.lib-rec__list { margin: .5rem 0 0; padding-left: 1.2rem; display: grid; gap: .3rem; }

@media (forced-colors: active) {
  .lib-card--link { border: 1px solid CanvasText; }
  .lib-card--link.is-read { border-left: 4px solid Highlight; }
}
@media print { #libRead { display: none !important; } }

/* ===========================================================================
   R7 — personal record.
   The statement list is the document's spine, so it gets the most weight.
   ======================================================================== */
.prf-periods { display: flex; gap: .4rem; flex-wrap: wrap; }
.prf-period {
  display: inline-flex; align-items: center; min-height: 2.4rem; padding: .4rem .8rem;
  border: 1px solid var(--v2-hairline, rgba(23, 76, 66, .22));
  border-radius: var(--lv-r-pill, 999px); text-decoration: none; font-size: .9rem;
}
.prf-period.is-active { border-width: 2px; font-weight: 600; }

.prf-statements { margin: 1rem 0 0; padding-left: 1.4rem; display: grid; gap: .6rem; }
.prf-statement { line-height: 1.55; }
.prf-statement--trend, .prf-statement--comfort { font-weight: 500; }

.prf-table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: .92rem; }
.prf-table th, .prf-table td {
  text-align: left; padding: .55rem .6rem;
  border-bottom: 1px solid var(--v2-hairline, rgba(23, 76, 66, .14));
}
.prf-table thead th { font-size: .82rem; letter-spacing: .02em; color: var(--v2-ink-soft, #5b6d68); }
.prf-table tbody th { font-weight: 600; }
.prf-table tr.is-untried td { font-style: italic; }
.prf-pdf { display: inline; margin: 0; }

@media (max-width: 640px) {
  .prf-table { font-size: .86rem; }
  .prf-table th, .prf-table td { padding: .45rem .35rem; }
}
@media (forced-colors: active) {
  .prf-period { border: 1px solid CanvasText; }
  .prf-period.is-active { border: 2px solid Highlight; }
  .prf-table th, .prf-table td { border-bottom: 1px solid CanvasText; }
}
@media print {
  .prf-periods, #prfKeep, .breadcrumb { display: none !important; }
  .prf-table { break-inside: avoid; }
}

/* ===========================================================================
   R8 — first-run onboarding, and the shared empty/loading states.
   ======================================================================== */
.onb {
  border: 2px solid var(--v2-hairline, rgba(23, 76, 66, .2));
  border-radius: .8rem; padding: 1.1rem 1.2rem; background: #fff;
}
.onb__head { margin-bottom: 1rem; }
.onb__q { padding: .9rem 0; border-top: 1px solid var(--v2-hairline, rgba(23, 76, 66, .14)); }
.onb__q fieldset { border: 0; margin: 0; padding: 0; }
.onb__label { display: block; font-weight: 600; font-size: 1rem; padding: 0; }
.onb__help { margin: .25rem 0 .6rem; font-size: .9rem; }
.onb__q input[type="time"] {
  font: inherit; padding: .45rem .6rem; min-height: 2.6rem;
  border: 1px solid var(--v2-hairline, rgba(23, 76, 66, .28)); border-radius: .5rem; background: #fff;
}
.onb__opts { display: flex; gap: .45rem; flex-wrap: wrap; }
.onb__opt {
  display: inline-flex; align-items: center; gap: .4rem; font-size: .92rem; cursor: pointer;
  border: 1px solid var(--v2-hairline, rgba(23, 76, 66, .22));
  border-radius: var(--lv-r-pill, 999px); padding: .42rem .75rem; min-height: 2.4rem;
}
.onb__opt:has(input:checked) { border-width: 2px; font-weight: 600; }
.onb__opt:focus-within { outline: 2px solid currentColor; outline-offset: 1px; }
.onb__actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; padding-top: 1rem;
  border-top: 1px solid var(--v2-hairline, rgba(23, 76, 66, .14)); }

/* Loading skeletons. Same box dimensions as the resolved content, so nothing shifts. */
.ayur-skeleton { position: relative; overflow: hidden; border-radius: .5rem;
  background: rgba(23, 76, 66, .07); min-height: 1rem; }
.ayur-skeleton::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  animation: ayur-shimmer 1.1s infinite;
}
@keyframes ayur-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* Error state for a section that failed on its own, so one failure cannot blank a page. */
.ayur-error {
  border: 1px solid var(--v2-hairline, rgba(164, 85, 60, .5)); border-left-width: 4px;
  border-radius: .55rem; padding: .8rem 1rem; display: flex; gap: .6rem; align-items: flex-start;
}

/*
 * 320px is a hard requirement, not a nice-to-have. Long unbroken strings — a botanical name, a slug in
 * a shopping list — are the usual cause of horizontal overflow, so they wrap rather than push.
 */
@media (max-width: 420px) {
  .onb__opts { gap: .35rem; }
  .onb__opt { font-size: .88rem; padding: .38rem .6rem; }
  .lib-card__sanskrit, .lib-rec__names, .mealcard__food, .prf-statement { overflow-wrap: anywhere; }
  .rpt-meta__row, .mealcard__prop { grid-template-columns: 1fr; }
}
@media (forced-colors: active) {
  .onb, .onb__opt, .ayur-error { border: 1px solid CanvasText; }
  .ayur-skeleton::after { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ayur-skeleton::after { animation: none; }
}
@media print { .onb { display: none !important; } }