/* ============================================================
   AXION TRACE — APPLICATION STYLES
   ------------------------------------------------------------
   Colours, sizes and radii all live in tokens.css. Change them
   there, never with a hard-coded value in this file.
   See docs/DESIGN-BRIEF.md for the full system.

   Structure of this file:
     01  Reset & base
     02  Typography helpers
     03  Layout primitives
     04  Header / navigation
     05  Buttons & form controls
     06  Cards, panels, tables
     07  Landing / product sections
     08  Today view
     09  Calendar view
     10  Dashboard view
     11  Weekly review view
     12  Settings view
     13  Charts (SVG)
     14  Modals, toasts, celebration
     15  Empty states & utilities
     15b Workout log (set rows, routines, exercise cards)
     16  Responsive
     16b Embed mode
     17  Print
   ============================================================ */

/* ---------- 01  RESET & BASE ------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;

  /* Paint the canvas explicitly rather than relying on the
     body-background-propagation rule. This avoids a white flash
     on overscroll and keeps the page correct in browsers that
     resolve the propagated background lazily. */
  background: var(--oa-paper);

  /* Tells the browser to render form controls, scrollbars and
     the caret in the matching scheme. Without this, native
     widgets stay light-styled inside a dark page. */
  color-scheme: light;
}

:root[data-oa-theme="dark"] { color-scheme: dark; }

@media (prefers-color-scheme: dark) {
  :root[data-oa-theme="auto"] { color-scheme: dark; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--oa-paper);
  color: var(--oa-text);
  font-family: var(--oa-font-sans);
  font-size: var(--oa-fs-base);
  line-height: var(--oa-lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}

img, svg { display: block; max-width: 100%; }

h1, h2, h3, h4, h5, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a {
  color: var(--oa-primary);
  text-decoration-color: var(--oa-primary-line);
  text-underline-offset: 3px;
}
a:hover { color: var(--oa-primary-hover); }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

/* Consistent, visible focus for keyboard users only. */
:focus-visible {
  outline: 2px solid var(--oa-primary);
  outline-offset: 2px;
  border-radius: var(--oa-r-xs);
}
:focus:not(:focus-visible) { outline: none; }

/* Screen-reader-only text (used for chart summaries & labels). */
.oa-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.oa-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--oa-primary);
  color: var(--oa-text-inverse);
  padding: var(--oa-s-3) var(--oa-s-5);
  border-radius: 0 0 var(--oa-r-md) 0;
  font-weight: 600;
}
.oa-skip-link:focus { left: 0; }


/* ---------- 02  TYPOGRAPHY --------------------------------- */

/* THE TWO-FAMILY RULE
   -------------------
   Questrial (body) ships in a SINGLE weight: 400. Ask a browser
   for Questrial at 600 and it synthesises a smeared faux-bold.
   Space Grotesk also carries every numeral, because its figures
   are tabular — weights, percentages and dates line up in
   columns, and Questrial's do not.

   So the default is Space Grotesk, and Questrial is opted into
   for running prose only. That direction matters: it fails
   safe. If a new component is missed, it renders in Space
   Grotesk — on brand, real weights, no faux-bold. The reverse
   arrangement fails ugly.

   Rule of thumb when adding components:
     prose you read in sentences  ->  add it to the Questrial list
     anything else                ->  leave it alone            */

body {
  font-family: var(--oa-font-display);

  /* Belt and braces. If any element ever does end up asking
     Questrial for a weight it does not have, the browser must
     drop to the real 400 rather than smearing a synthetic bold.
     Regular-weight text is a small loss; faux-bold looks broken. */
  font-synthesis-weight: none;
  -webkit-font-synthesis: none;
  font-synthesis: none;
}

/* --- Opted into Questrial: running prose -------------------
   Named explicitly rather than using a bare `p`, because plenty
   of UI labels in this app are paragraphs (.oa-eyebrow,
   .oa-feature__title, .oa-footer__title …) and an element
   selector loses to their class.                             */
.oa-lede,
.oa-card__sub,
.oa-feature__desc,
.oa-audience__item__desc,
.oa-empty__text,
.oa-textarea,
.oa-table td.oa-td-notes,
.oa-toast > span:last-child,
.oa-prose,
p.oa-secondary,
p.oa-muted,
blockquote {
  font-family: var(--oa-font-sans);
}

/* --- Forced back to the display face -----------------------
   Emphasis inside prose, plus anything carrying weight via an
   inline style. The attribute selectors catch markup that sets
   font-weight directly, which no class list would.           */
strong, b,
[style*="font-weight:500"], [style*="font-weight: 500"],
[style*="font-weight:600"], [style*="font-weight: 600"],
[style*="font-weight:700"], [style*="font-weight: 700"],
.oa-num,
.oa-table td.oa-td-num,
svg text {
  font-family: var(--oa-font-display);
}

/* Weight is inherited but font-family is not re-derived, so a
   child of a bolded prose block needs routing too. */
.oa-daypanel__row span:last-child,
.oa-week-card__row dd,
.oa-kv dt {
  font-family: var(--oa-font-display);
}

/* The mono token is only used for file paths and storage keys,
   where a true monospace beats tabular figures. */
.oa-mono, code, kbd, samp { font-family: var(--oa-font-mono); }

.oa-display {
  font-size: var(--oa-fs-3xl);
  line-height: var(--oa-lh-tight);
  letter-spacing: var(--oa-tracking-tight);
  font-weight: 600;
}
.oa-h1 {
  font-size: var(--oa-fs-2xl);
  line-height: var(--oa-lh-tight);
  letter-spacing: var(--oa-tracking-tight);
  font-weight: 600;
}
.oa-h2 {
  font-size: var(--oa-fs-xl);
  line-height: var(--oa-lh-snug);
  letter-spacing: var(--oa-tracking-tight);
  font-weight: 600;
}
.oa-h3 {
  font-size: var(--oa-fs-lg);
  line-height: var(--oa-lh-snug);
  font-weight: 600;
}
.oa-h4 {
  font-size: var(--oa-fs-md);
  line-height: var(--oa-lh-snug);
  font-weight: 600;
}

.oa-eyebrow {
  font-size: var(--oa-fs-xs);
  font-weight: 600;
  letter-spacing: var(--oa-tracking-label);
  text-transform: uppercase;
  color: var(--oa-text-muted);
}

.oa-lede {
  font-size: var(--oa-fs-md);
  line-height: var(--oa-lh-base);
  color: var(--oa-text-secondary);
  max-width: 62ch;
}

.oa-muted     { color: var(--oa-text-muted); }
.oa-secondary { color: var(--oa-text-secondary); }
.oa-small     { font-size: var(--oa-fs-sm); }
.oa-xs        { font-size: var(--oa-fs-xs); }
.oa-mono      { font-family: var(--oa-font-mono); font-size: .92em; }
.oa-num       { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

.oa-pos { color: var(--oa-success-text); }
.oa-neg { color: var(--oa-danger-text); }
.oa-neutral { color: var(--oa-text-muted); }


/* ---------- 03  LAYOUT PRIMITIVES -------------------------- */

.oa-wrap {
  width: 100%;
  max-width: var(--oa-maxw);
  margin-inline: auto;
  padding-inline: var(--oa-s-6);
}
.oa-wrap--narrow { max-width: var(--oa-maxw-narrow); }

.oa-section { padding-block: var(--oa-s-16); }
.oa-section--tight { padding-block: var(--oa-s-10); }

.oa-stack > * + * { margin-top: var(--oa-s-4); }
.oa-stack-sm > * + * { margin-top: var(--oa-s-2); }
.oa-stack-lg > * + * { margin-top: var(--oa-s-8); }

.oa-row {
  display: flex;
  align-items: center;
  gap: var(--oa-s-3);
}
.oa-row--between { justify-content: space-between; }
.oa-row--wrap { flex-wrap: wrap; }
.oa-row--top { align-items: flex-start; }

.oa-grid { display: grid; gap: var(--oa-s-4); }
.oa-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oa-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.oa-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.oa-grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.oa-grid--auto-lg { grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); }
/* Grid items may shrink below their content (a wide table scrolls inside
   its own wrapper instead of pushing the page sideways). */
.oa-grid > * { min-width: 0; }

.oa-divider {
  height: 1px;
  background: var(--oa-border);
  border: 0;
  margin-block: var(--oa-s-6);
}

.oa-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--oa-s-4);
  flex-wrap: wrap;
  margin-bottom: var(--oa-s-5);
}


/* ---------- 04  HEADER / NAVIGATION ------------------------ */

.oa-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--oa-paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--oa-border);
}

.oa-header__inner {
  display: flex;
  align-items: center;
  gap: var(--oa-s-4);
  height: var(--oa-header-h);
  max-width: var(--oa-maxw);
  margin-inline: auto;
  padding-inline: var(--oa-s-6);
}

/* --- Brand lockup. Swap the mark for your own logo file. --- */
.oa-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--oa-s-3);
  text-decoration: none;
  color: var(--oa-text);
  flex-shrink: 0;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.oa-brand__mark {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--oa-primary);
}
.oa-brand__name {
  font-weight: 600;
  font-size: var(--oa-fs-md);
  letter-spacing: var(--oa-tracking-tight);
  white-space: nowrap;
}
.oa-brand__sub {
  font-size: var(--oa-fs-xs);
  color: var(--oa-text-muted);
  border-left: 1px solid var(--oa-border-strong);
  padding-left: var(--oa-s-3);
  margin-left: var(--oa-s-1);
  white-space: nowrap;
}

.oa-nav {
  display: flex;
  align-items: center;
  gap: var(--oa-s-1);
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.oa-nav::-webkit-scrollbar { display: none; }

.oa-nav__btn {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--oa-text-secondary);
  font-size: var(--oa-fs-sm);
  font-weight: 500;
  padding: var(--oa-s-2) var(--oa-s-3);
  border-radius: var(--oa-r-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--oa-dur-fast) var(--oa-ease),
              color var(--oa-dur-fast) var(--oa-ease);
}
.oa-nav__btn:hover {
  background: var(--oa-surface-2);
  color: var(--oa-text);
}
.oa-nav__btn[aria-current="page"] {
  background: var(--oa-primary-soft);
  color: var(--oa-primary);
  font-weight: 600;
}

.oa-header__tools {
  display: flex;
  align-items: center;
  gap: var(--oa-s-2);
  flex-shrink: 0;
}

/* Icon-only button, used for the theme toggle. */
.oa-icon-btn {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--oa-r-sm);
  border: 1px solid var(--oa-border);
  background: var(--oa-surface);
  color: var(--oa-text-secondary);
  cursor: pointer;
  transition: all var(--oa-dur-fast) var(--oa-ease);
}
.oa-icon-btn:hover {
  color: var(--oa-text);
  border-color: var(--oa-border-strong);
  box-shadow: var(--oa-shadow-xs);
}
.oa-icon-btn svg { width: 17px; height: 17px; }

/* Mobile bottom tab bar (shown under 860px). */
.oa-tabbar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 70;
  background: color-mix(in srgb, var(--oa-surface) 94%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--oa-border);
  padding: var(--oa-s-1) var(--oa-s-2) calc(var(--oa-s-1) + env(safe-area-inset-bottom, 0px));
}
.oa-tabbar__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
}
.oa-tabbar__btn {
  appearance: none;
  border: 0;
  background: none;
  color: var(--oa-text-muted);
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: var(--oa-s-2) 2px;
  border-radius: var(--oa-r-sm);
  font-size: 10.5px;
  font-weight: 500;
  cursor: pointer;
}
.oa-tabbar__btn svg { width: 19px; height: 19px; }
.oa-tabbar__btn[aria-current="page"] { color: var(--oa-primary); font-weight: 600; }
.oa-tabbar__btn { min-height: 48px; }

/* Screen title in the header, phones only (the nav says it on wide screens). */
.oa-header__title { display: none; font-weight: 600; font-size: var(--oa-fs-sm); color: var(--oa-text-secondary); margin-left: auto; }

/* The "More" sheet from the tab bar. */
.oa-more-list { display: grid; gap: var(--oa-s-1); }
.oa-more-list__btn {
  display: flex;
  align-items: center;
  gap: var(--oa-s-3);
  min-height: 48px;
  padding: var(--oa-s-2) var(--oa-s-3);
  border: 0;
  border-radius: var(--oa-r-md);
  background: none;
  color: var(--oa-text);
  font: inherit;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.oa-more-list__btn:hover, .oa-more-list__btn[aria-current="page"] { background: var(--oa-primary-softer); color: var(--oa-primary); }
.oa-more-list__btn:focus-visible { outline: none; box-shadow: var(--oa-ring); }
.oa-more-list__btn svg { width: 18px; height: 18px; flex-shrink: 0; }


/* ---------- 05  BUTTONS & FORM CONTROLS -------------------- */

.oa-btn {
  --btn-bg: var(--oa-surface);
  --btn-fg: var(--oa-text);
  --btn-bd: var(--oa-border-strong);
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--oa-s-2);
  padding: var(--oa-s-2) var(--oa-s-4);
  min-height: 38px;
  border-radius: var(--oa-r-sm);
  border: 1px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--oa-fs-sm);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--oa-dur-fast) var(--oa-ease),
              border-color var(--oa-dur-fast) var(--oa-ease),
              box-shadow var(--oa-dur-fast) var(--oa-ease),
              transform var(--oa-dur-fast) var(--oa-ease);
}
.oa-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.oa-btn:hover { box-shadow: var(--oa-shadow-sm); }
.oa-btn:active { transform: translateY(1px); }
.oa-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.oa-btn--primary {
  --btn-bg: var(--oa-primary);
  --btn-fg: var(--oa-text-inverse);
  --btn-bd: var(--oa-primary);
}
.oa-btn--primary:hover { --btn-bg: var(--oa-primary-hover); --btn-bd: var(--oa-primary-hover); }

.oa-btn--soft {
  --btn-bg: var(--oa-primary-soft);
  --btn-fg: var(--oa-primary);
  --btn-bd: transparent;
}
.oa-btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--oa-text-secondary);
  --btn-bd: transparent;
}
.oa-btn--ghost:hover { --btn-bg: var(--oa-surface-2); --btn-fg: var(--oa-text); }

.oa-btn--danger {
  --btn-bg: var(--oa-surface);
  --btn-fg: var(--oa-danger);
  --btn-bd: color-mix(in srgb, var(--oa-danger) 35%, transparent);
}
.oa-btn--danger:hover { --btn-bg: var(--oa-danger-soft); }

.oa-btn--lg { min-height: 46px; padding-inline: var(--oa-s-6); font-size: var(--oa-fs-base); }
.oa-btn--sm { min-height: 30px; padding: var(--oa-s-1) var(--oa-s-3); font-size: var(--oa-fs-xs); }
.oa-btn--block { width: 100%; }

/* --- Fields --- */
.oa-select--sm { min-height: 34px; width: auto; max-width: 100%; font-size: var(--oa-fs-xs); }

.oa-field { display: grid; gap: var(--oa-s-2); }

.oa-label {
  font-size: var(--oa-fs-sm);
  font-weight: 600;
  color: var(--oa-text-secondary);
  display: flex;
  align-items: baseline;
  gap: var(--oa-s-2);
}
.oa-label__hint {
  font-weight: 400;
  font-size: var(--oa-fs-xs);
  color: var(--oa-text-muted);
}

.oa-input,
.oa-select,
.oa-textarea {
  width: 100%;
  background: var(--oa-surface);
  border: 1px solid var(--oa-border-strong);
  border-radius: var(--oa-r-sm);
  padding: var(--oa-s-2) var(--oa-s-3);
  min-height: 38px;
  color: var(--oa-text);
  font-size: var(--oa-fs-base);
  transition: border-color var(--oa-dur-fast) var(--oa-ease),
              box-shadow var(--oa-dur-fast) var(--oa-ease);
}
.oa-input:focus,
.oa-select:focus,
.oa-textarea:focus {
  outline: none;
  border-color: var(--oa-primary);
  box-shadow: var(--oa-ring);
}
.oa-input::placeholder,
.oa-textarea::placeholder { color: var(--oa-text-muted); opacity: .8; }

.oa-textarea { min-height: 90px; resize: vertical; line-height: var(--oa-lh-base); }

.oa-select {
  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='%2377817B' stroke-width='2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  padding-right: 32px;
}

.oa-input-group { display: flex; align-items: stretch; }
.oa-input-group .oa-input { border-radius: var(--oa-r-sm) 0 0 var(--oa-r-sm); }
.oa-input-group__suffix {
  display: inline-flex;
  align-items: center;
  padding-inline: var(--oa-s-3);
  background: var(--oa-surface-2);
  border: 1px solid var(--oa-border-strong);
  border-left: 0;
  border-radius: 0 var(--oa-r-sm) var(--oa-r-sm) 0;
  font-size: var(--oa-fs-sm);
  color: var(--oa-text-muted);
  white-space: nowrap;
}

/* Segmented control — used for scoring and range pickers. */
.oa-segment {
  display: inline-flex;
  background: var(--oa-surface-2);
  border: 1px solid var(--oa-border);
  border-radius: var(--oa-r-sm);
  padding: 3px;
  gap: 2px;
  flex-wrap: wrap;
}
.oa-segment__opt {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--oa-text-secondary);
  font-size: var(--oa-fs-sm);
  font-weight: 600;
  padding: var(--oa-s-1) var(--oa-s-3);
  min-width: 34px;
  min-height: 30px;
  border-radius: var(--oa-r-xs);
  cursor: pointer;
  transition: all var(--oa-dur-fast) var(--oa-ease);
}
.oa-segment__opt svg { width: 14px; height: 14px; }
.oa-segment__opt:hover { background: var(--oa-surface-3); color: var(--oa-text); }
.oa-segment__opt[aria-pressed="true"] {
  background: var(--oa-surface);
  color: var(--oa-primary);
  box-shadow: var(--oa-shadow-xs);
}

/* Toggle switch — used in Settings for optional habits. */
.oa-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 23px;
  cursor: pointer;
}
.oa-switch input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0;
  cursor: pointer;
}
.oa-switch__track {
  width: 100%;
  height: 100%;
  border-radius: var(--oa-r-pill);
  background: var(--oa-surface-3);
  border: 1px solid var(--oa-border-strong);
  transition: background var(--oa-dur) var(--oa-ease),
              border-color var(--oa-dur) var(--oa-ease);
  pointer-events: none;
}
.oa-switch__thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--oa-surface);
  box-shadow: var(--oa-shadow-sm);
  transition: transform var(--oa-dur) var(--oa-ease-out);
  pointer-events: none;
}
.oa-switch input:checked ~ .oa-switch__track {
  background: var(--oa-primary);
  border-color: var(--oa-primary);
}
.oa-switch input:checked ~ .oa-switch__thumb { transform: translateX(17px); }
.oa-switch input:focus-visible ~ .oa-switch__track { box-shadow: var(--oa-ring); }


/* ---------- 06  CARDS, PANELS, TABLES ---------------------- */

.oa-card {
  background: var(--oa-surface);
  border: 1px solid var(--oa-border);
  border-radius: var(--oa-r-md);
  padding: var(--oa-s-5);
  box-shadow: var(--oa-shadow-xs);
}
.oa-card--flush { padding: 0; overflow: hidden; }
.oa-card--sand  { background: var(--oa-surface-2); box-shadow: none; }
.oa-card--quiet { box-shadow: none; }

.oa-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--oa-s-3);
  margin-bottom: var(--oa-s-4);
}
.oa-card__title {
  font-size: var(--oa-fs-base);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.oa-card__sub {
  font-size: var(--oa-fs-xs);
  color: var(--oa-text-muted);
  margin-top: 2px;
}

/* Stat card — the core dashboard atom. */
.oa-stat {
  background: var(--oa-surface);
  border: 1px solid var(--oa-border);
  border-radius: var(--oa-r-md);
  padding: var(--oa-s-4);
  display: grid;
  gap: var(--oa-s-1);
  align-content: start;
  box-shadow: var(--oa-shadow-xs);
}
.oa-stat__label {
  font-size: var(--oa-fs-xs);
  font-weight: 600;
  letter-spacing: var(--oa-tracking-label);
  text-transform: uppercase;
  color: var(--oa-text-muted);
}
.oa-stat__value {
  font-size: var(--oa-fs-xl);
  font-weight: 600;
  letter-spacing: var(--oa-tracking-tight);
  line-height: 1.1;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.oa-stat__unit {
  font-size: var(--oa-fs-sm);
  font-weight: 500;
  color: var(--oa-text-muted);
}
.oa-stat__meta {
  font-size: var(--oa-fs-xs);
  color: var(--oa-text-muted);
  display: flex;
  align-items: center;
  gap: var(--oa-s-2);
  flex-wrap: wrap;
}

/* Delta pill (+/- change indicator). */
.oa-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--oa-fs-xs);
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--oa-r-pill);
  background: var(--oa-surface-2);
  color: var(--oa-text-muted);
}
.oa-delta--good { background: var(--oa-success-soft); color: var(--oa-success-text); }
.oa-delta--bad  { background: var(--oa-surface-2);     color: var(--oa-text-muted); }  /* a dip is neutral, never red */

/* Badge / tag. */
.oa-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--oa-fs-xs);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--oa-r-pill);
  background: var(--oa-surface-2);
  color: var(--oa-text-secondary);
  border: 1px solid var(--oa-border);
}
.oa-badge--primary { background: var(--oa-primary-soft); color: var(--oa-primary); border-color: transparent; }
.oa-badge--success { background: var(--oa-success-soft); color: var(--oa-success-text); border-color: transparent; }
.oa-badge--warn    { background: var(--oa-warn-soft);    color: var(--oa-warn-text);    border-color: transparent; }

/* Data table. */
.oa-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--oa-border);
  border-radius: var(--oa-r-md);
  background: var(--oa-surface);
}
.oa-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--oa-fs-sm);
  min-width: 640px;
}
.oa-table th,
.oa-table td {
  padding: var(--oa-s-3) var(--oa-s-4);
  text-align: left;
  border-bottom: 1px solid var(--oa-border);
  white-space: nowrap;
}
.oa-table th {
  font-size: var(--oa-fs-xs);
  font-weight: 600;
  letter-spacing: var(--oa-tracking-label);
  text-transform: uppercase;
  color: var(--oa-text-muted);
  background: var(--oa-surface-2);
  position: sticky;
  top: 0;
  z-index: 1;
}
.oa-table tbody tr:last-child td { border-bottom: 0; }
.oa-table tbody tr:hover td { background: var(--oa-primary-softer); }
.oa-table td.oa-td-num { text-align: right; font-variant-numeric: tabular-nums; }
.oa-table th.oa-td-num { text-align: right; }
.oa-table td.oa-td-notes {
  white-space: normal;
  min-width: 200px;
  max-width: 340px;
  color: var(--oa-text-secondary);
}

/* Progress bar. */
.oa-bar {
  height: 6px;
  border-radius: var(--oa-r-pill);
  background: var(--oa-surface-3);
  overflow: hidden;
}
.oa-bar__fill {
  height: 100%;
  border-radius: inherit;
  background: var(--oa-primary);
  transition: width var(--oa-dur-slow) var(--oa-ease-out);
}


/* ---------- 07  LANDING / PRODUCT SECTIONS ----------------- */

.oa-hero {
  position: relative;
  padding-block: var(--oa-s-20) var(--oa-s-16);
  overflow: hidden;
}
/* Very subtle warm wash — no gradients-as-decoration, just depth. */
.oa-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 420px at 12% -10%,
      color-mix(in srgb, var(--oa-primary) 7%, transparent), transparent 70%),
    linear-gradient(180deg, var(--oa-surface-2), transparent 55%);
  pointer-events: none;
}
.oa-hero__inner { position: relative; }

.oa-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: var(--oa-s-12);
  align-items: center;
}

.oa-hero__title {
  font-size: var(--oa-fs-4xl);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 600;
  margin-bottom: var(--oa-s-5);
}
.oa-hero__title em {
  font-style: normal;
  color: var(--oa-primary);
}

.oa-hero__actions {
  display: flex;
  gap: var(--oa-s-3);
  flex-wrap: wrap;
  margin-top: var(--oa-s-8);
}

.oa-hero__points {
  display: flex;
  gap: var(--oa-s-5);
  flex-wrap: wrap;
  margin-top: var(--oa-s-6);
  padding-top: var(--oa-s-5);
  border-top: 1px solid var(--oa-border);
}
.oa-hero__point {
  font-size: var(--oa-fs-sm);
  color: var(--oa-text-secondary);
  display: flex;
  align-items: center;
  gap: var(--oa-s-2);
}
.oa-hero__point svg { width: 15px; height: 15px; color: var(--oa-primary); flex-shrink: 0; }

/* Preview panel — a miniature of the app, sells the product. */
.oa-preview {
  background: var(--oa-surface);
  border: 1px solid var(--oa-border);
  border-radius: var(--oa-r-lg);
  box-shadow: var(--oa-shadow-lg);
  overflow: hidden;
}
.oa-preview__bar {
  display: flex;
  align-items: center;
  gap: var(--oa-s-2);
  padding: var(--oa-s-3) var(--oa-s-4);
  border-bottom: 1px solid var(--oa-border);
  background: var(--oa-surface-2);
}
.oa-preview__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--oa-border-strong);
}
.oa-preview__label {
  margin-left: auto;
  font-size: var(--oa-fs-xs);
  color: var(--oa-text-muted);
  font-weight: 500;
}
.oa-preview__body { padding: var(--oa-s-4); display: grid; gap: var(--oa-s-3); }

/* Feature grid — restrained, left-aligned, no icon-in-a-circle SaaS look. */
.oa-features { display: grid; gap: var(--oa-s-1); }
.oa-feature {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--oa-s-3);
  padding: var(--oa-s-4) 0;
  border-bottom: 1px solid var(--oa-border);
  align-items: start;
}
.oa-feature:last-child { border-bottom: 0; }
.oa-feature__icon { color: var(--oa-primary); margin-top: 2px; }
.oa-feature__icon svg { width: 18px; height: 18px; }
.oa-feature__title { font-weight: 600; font-size: var(--oa-fs-base); margin-bottom: 2px; }
.oa-feature__desc { font-size: var(--oa-fs-sm); color: var(--oa-text-secondary); }

/* "Who it's for" list. */
.oa-audience {
  border-left: 2px solid var(--oa-primary-line);
  padding-left: var(--oa-s-5);
  display: grid;
  gap: var(--oa-s-4);
}
.oa-audience__item__title { font-weight: 600; margin-bottom: 2px; }
.oa-audience__item__desc { font-size: var(--oa-fs-sm); color: var(--oa-text-secondary); }

/* Checkout / pricing block. */
.oa-pricing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: var(--oa-s-8);
  align-items: center;
  background: var(--oa-surface);
  border: 1px solid var(--oa-border);
  border-radius: var(--oa-r-lg);
  padding: var(--oa-s-8);
  box-shadow: var(--oa-shadow-sm);
}
.oa-pricing__price {
  font-size: var(--oa-fs-3xl);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}
.oa-pricing__period { font-size: var(--oa-fs-sm); color: var(--oa-text-muted); font-weight: 500; }
.oa-pricing__box {
  background: var(--oa-surface-2);
  border: 1px solid var(--oa-border);
  border-radius: var(--oa-r-md);
  padding: var(--oa-s-5);
  display: grid;
  gap: var(--oa-s-3);
}

/* Footer. */
.oa-footer {
  border-top: 1px solid var(--oa-border);
  background: var(--oa-surface-2);
  padding-block: var(--oa-s-12) var(--oa-s-10);
  margin-top: var(--oa-s-16);
}
/* Inside the app: one slim line. */
.oa-footer--slim { padding-block: var(--oa-s-4); margin-top: var(--oa-s-8); }
.oa-footer__slim {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--oa-s-1) var(--oa-s-4);
  font-size: var(--oa-fs-xs);
  color: var(--oa-text-muted);
}
.oa-footer__slim a { color: inherit; }
.oa-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: var(--oa-s-8);
}
.oa-footer__title {
  font-size: var(--oa-fs-xs);
  font-weight: 600;
  letter-spacing: var(--oa-tracking-label);
  text-transform: uppercase;
  color: var(--oa-text-muted);
  margin-bottom: var(--oa-s-3);
}
.oa-footer__list { display: grid; gap: var(--oa-s-2); font-size: var(--oa-fs-sm); }
.oa-footer__list a { color: var(--oa-text-secondary); text-decoration: none; }
.oa-footer__list a:hover { color: var(--oa-primary); text-decoration: underline; }
.oa-footer__legal {
  margin-top: var(--oa-s-8);
  padding-top: var(--oa-s-5);
  border-top: 1px solid var(--oa-border);
  font-size: var(--oa-fs-xs);
  color: var(--oa-text-muted);
  display: flex;
  justify-content: space-between;
  gap: var(--oa-s-4);
  flex-wrap: wrap;
}


/* ---------- 08  TODAY VIEW --------------------------------- */

.oa-datebar {
  display: flex;
  align-items: center;
  gap: var(--oa-s-3);
  flex-wrap: wrap;
  background: var(--oa-surface);
  border: 1px solid var(--oa-border);
  border-radius: var(--oa-r-md);
  padding: var(--oa-s-3) var(--oa-s-4);
  box-shadow: var(--oa-shadow-xs);
}
.oa-datebar__date { font-weight: 600; font-size: var(--oa-fs-md); letter-spacing: -0.01em; }
.oa-datebar__meta { font-size: var(--oa-fs-xs); color: var(--oa-text-muted); }
.oa-datebar__nav {
  display: flex;
  flex-wrap: wrap;            /* never wider than the card, even at 320 px */
  gap: var(--oa-s-1);
  margin-left: auto;
  align-items: center;
  min-width: 0;
}
.oa-datebar__nav .oa-input[type="date"] { width: 150px; min-height: 34px; max-width: 100%; }
@media (max-width: 560px) {
  /* One row of controls under the date, picker taking the spare width. */
  .oa-datebar__nav { width: 100%; margin-left: 0; }
  .oa-datebar__nav .oa-saved { display: none; }
  .oa-datebar__nav .oa-input[type="date"] { flex: 1 1 124px; width: auto; min-width: 0; padding-inline: var(--oa-s-2); }
}

/* Weight card: the first thing on Today. */
.oa-weight { display: grid; gap: var(--oa-s-3); }
.oa-weight__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--oa-s-1) var(--oa-s-3);
}
.oa-weight__head label { cursor: pointer; }
.oa-weight__row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  max-width: 380px;
  gap: var(--oa-s-2);
  align-items: center;
}
.oa-weight__input .oa-input {
  min-height: 48px;
  font-size: var(--oa-fs-xl);
  font-weight: 600;
  text-align: center;
}
.oa-stepper {
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--oa-r-md);
  border: 1px solid var(--oa-border-strong);
  background: var(--oa-surface-2);
  color: var(--oa-text);
  cursor: pointer;
}
.oa-stepper:hover { border-color: var(--oa-primary-line); background: var(--oa-primary-softer); }
.oa-stepper:focus-visible { outline: none; box-shadow: var(--oa-ring); }
.oa-stepper svg { width: 18px; height: 18px; }
.oa-weight__feedback { margin: 0; min-height: 1.4em; font-size: var(--oa-fs-sm); color: var(--oa-text-secondary); }
.oa-weight__suggest {
  min-height: 32px;
  padding: 0 var(--oa-s-3);
  margin-right: var(--oa-s-2);
  border: 1px solid var(--oa-primary);
  border-radius: var(--oa-r-pill);
  background: var(--oa-primary-softer);
  color: var(--oa-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.oa-weight__suggest:hover { background: var(--oa-primary-soft); }
.oa-weight__suggest:focus-visible { outline: none; box-shadow: var(--oa-ring); }
.oa-weight__bmi { margin: 0; }

/* "More measurements" disclosure. */
.oa-more-toggle {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--oa-s-1) var(--oa-s-3);
  width: 100%;
  min-height: 44px;
  margin-top: var(--oa-s-4);
  padding: var(--oa-s-2) var(--oa-s-3);
  border: 1px dashed var(--oa-border-strong);
  border-radius: var(--oa-r-md);
  background: none;
  color: var(--oa-text);
  font: inherit;
  font-weight: 600;
  font-size: var(--oa-fs-sm);
  text-align: left;
  cursor: pointer;
}

.oa-more-toggle::after { content: "+"; font-weight: 600; color: var(--oa-text-muted); }
.oa-more-toggle[aria-expanded="true"]::after { content: "\2212"; }
.oa-more-toggle:focus-visible { outline: none; box-shadow: var(--oa-ring); }
.oa-more { margin-top: var(--oa-s-4); }

/* "Clear this day" sits alone at the end of the page. */
.oa-day-actions { display: flex; justify-content: flex-end; }
.oa-btn--quiet-danger {
  --btn-bg: transparent;
  --btn-fg: var(--oa-danger-text);
  --btn-bd: transparent;
}
.oa-btn--quiet-danger:hover { --btn-bg: var(--oa-danger-soft); }

/* Habit checklist. */
.oa-habits { display: grid; gap: var(--oa-s-2); }

.oa-habit {
  display: flex;
  align-items: center;
  gap: var(--oa-s-3);
  width: 100%;
  text-align: left;
  background: var(--oa-surface);
  border: 1px solid var(--oa-border);
  border-radius: var(--oa-r-md);
  padding: var(--oa-s-3) var(--oa-s-4);
  cursor: pointer;
  font-size: var(--oa-fs-base);
  color: var(--oa-text);
  transition: border-color var(--oa-dur-fast) var(--oa-ease),
              background var(--oa-dur-fast) var(--oa-ease),
              transform var(--oa-dur-fast) var(--oa-ease);
}
.oa-habit:hover {
  border-color: var(--oa-primary-line);
  background: var(--oa-primary-softer);
}
.oa-habit:active { transform: scale(.995); }

.oa-habit__box {
  width: 22px; height: 22px;
  flex-shrink: 0;
  border-radius: var(--oa-r-xs);
  border: 1.5px solid var(--oa-border-strong);
  background: var(--oa-surface);
  display: grid;
  place-items: center;
  transition: all var(--oa-dur) var(--oa-ease-out);
}
.oa-habit__box svg {
  width: 14px; height: 14px;
  color: var(--oa-text-inverse);
  opacity: 0;
  transform: scale(.5);
  transition: all var(--oa-dur) var(--oa-ease-out);
}
.oa-habit__name { flex: 1; min-width: 0; }
.oa-habit__target {
  font-size: var(--oa-fs-xs);
  color: var(--oa-text-muted);
  white-space: nowrap;
}
.oa-habit__streak {
  font-size: var(--oa-fs-xs);
  font-weight: 600;
  color: var(--oa-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.oa-habit__streak svg { width: 12px; height: 12px; }

.oa-habit[aria-pressed="true"] {
  background: var(--oa-primary-soft);
  border-color: var(--oa-primary-line);
}
.oa-habit[aria-pressed="true"] .oa-habit__box {
  background: var(--oa-primary);
  border-color: var(--oa-primary);
}
.oa-habit[aria-pressed="true"] .oa-habit__box svg { opacity: 1; transform: scale(1); }
.oa-habit[aria-pressed="true"] .oa-habit__name { color: var(--oa-primary); font-weight: 500; }
.oa-habit[aria-pressed="true"] .oa-habit__streak { color: var(--oa-primary); }

/* Group heading inside the checklist. */
.oa-habit-group {
  display: flex;
  align-items: center;
  gap: var(--oa-s-3);
  margin: var(--oa-s-5) 0 var(--oa-s-2);
}
.oa-habit-group:first-child { margin-top: 0; }
.oa-habit-group__line { flex: 1; height: 1px; background: var(--oa-border); }

/* Today progress ring header. */
.oa-today-summary {
  display: flex;
  align-items: center;
  gap: var(--oa-s-5);
  flex-wrap: wrap;
}
.oa-today-summary__ring { flex-shrink: 0; }
.oa-today-summary__text { flex: 1; min-width: 180px; }

/* Metrics form grid. */
.oa-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--oa-s-4);
}
.oa-metrics-grid .oa-field--wide { grid-column: 1 / -1; }

/* Auto-derived read-only value (BMI). */
.oa-derived {
  background: var(--oa-surface-2);
  border: 1px dashed var(--oa-border-strong);
  border-radius: var(--oa-r-sm);
  padding: var(--oa-s-2) var(--oa-s-3);
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--oa-s-2);
  font-variant-numeric: tabular-nums;
}
.oa-derived__val { font-weight: 600; }

/* Save state indicator. */
.oa-saved {
  font-size: var(--oa-fs-xs);
  color: var(--oa-success);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: opacity var(--oa-dur) var(--oa-ease);
}
.oa-saved.is-on { opacity: 1; }
.oa-saved svg { width: 13px; height: 13px; }


/* ---------- 09  CALENDAR VIEW ------------------------------ */

.oa-cal {
  background: var(--oa-surface);
  border: 1px solid var(--oa-border);
  border-radius: var(--oa-r-md);
  padding: var(--oa-s-5);
  box-shadow: var(--oa-shadow-xs);
}
.oa-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--oa-s-3);
  margin-bottom: var(--oa-s-4);
  flex-wrap: wrap;
}
.oa-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--oa-s-2);
}
.oa-cal__dow {
  font-size: var(--oa-fs-xs);
  font-weight: 600;
  letter-spacing: var(--oa-tracking-label);
  text-transform: uppercase;
  color: var(--oa-text-muted);
  text-align: center;
  padding-bottom: var(--oa-s-1);
}
.oa-cal__cell {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--oa-r-sm);
  border: 1px solid var(--oa-border);
  background: var(--oa-surface-2);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 2px;
  transition: transform var(--oa-dur-fast) var(--oa-ease),
              box-shadow var(--oa-dur-fast) var(--oa-ease);
  min-height: 40px;
}
.oa-cal__cell:hover { transform: translateY(-1px); box-shadow: var(--oa-shadow-sm); z-index: 2; }
.oa-cal__cell--empty { visibility: hidden; cursor: default; }
.oa-cal__cell--future { opacity: .45; cursor: pointer; }
.oa-cal__cell--today { outline: 2px solid var(--oa-primary); outline-offset: 1px; }
.oa-cal__cell--selected { outline: 2px solid var(--oa-text); outline-offset: 1px; }
.oa-cal__num {
  font-size: var(--oa-fs-xs);
  font-weight: 600;
  line-height: 1;
}
.oa-cal__dot {
  position: absolute;
  bottom: 4px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--oa-viz-3);
}

/* Heat levels (shared by calendar + dashboard heatmap). */
.oa-heat-0 { background: var(--oa-heat-0); }
.oa-heat-1 { background: var(--oa-heat-1); }
.oa-heat-2 { background: var(--oa-heat-2); }
.oa-heat-3 { background: var(--oa-heat-3); }
.oa-heat-4 { background: var(--oa-heat-4); color: var(--oa-text-inverse); }
.oa-heat-5 { background: var(--oa-heat-5); color: var(--oa-text-inverse); }

.oa-legend {
  display: flex;
  align-items: center;
  gap: var(--oa-s-2);
  font-size: var(--oa-fs-xs);
  color: var(--oa-text-muted);
}
.oa-legend__swatches { display: flex; gap: 3px; }
.oa-legend__swatch {
  width: 13px; height: 13px;
  border-radius: 3px;
  border: 1px solid var(--oa-border);
}

/* Day detail panel next to the calendar. */
.oa-daypanel { display: grid; gap: var(--oa-s-4); align-content: start; }
.oa-daypanel__list { display: grid; gap: var(--oa-s-1); }
.oa-daypanel__row {
  display: flex;
  align-items: center;
  gap: var(--oa-s-2);
  font-size: var(--oa-fs-sm);
  padding: var(--oa-s-1) 0;
  border-bottom: 1px dotted var(--oa-border);
}
.oa-daypanel__row:last-child { border-bottom: 0; }
.oa-daypanel__row span:last-child { margin-left: auto; font-weight: 600; }
.oa-daypanel__mark { width: 14px; height: 14px; flex-shrink: 0; }
.oa-daypanel__mark--yes { color: var(--oa-success); }
.oa-daypanel__mark--no  { color: var(--oa-border-strong); }


/* ---------- 10  DASHBOARD VIEW ----------------------------- */

.oa-dash-toolbar {
  display: flex;
  align-items: center;
  gap: var(--oa-s-3);
  flex-wrap: wrap;
  margin-bottom: var(--oa-s-5);
}

.oa-rank { display: grid; gap: var(--oa-s-1); }
.oa-rank__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  align-items: center;
  gap: var(--oa-s-3);
  padding: var(--oa-s-2) 0;
}
.oa-rank__name {
  font-size: var(--oa-fs-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.oa-rank__val {
  font-size: var(--oa-fs-sm);
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.oa-rank__track { grid-column: 1 / -1; margin-top: -4px; }

/* Streak list. */
.oa-streaks { display: grid; gap: var(--oa-s-2); }
.oa-streak {
  display: flex;
  align-items: center;
  gap: var(--oa-s-3);
  padding: var(--oa-s-3);
  border: 1px solid var(--oa-border);
  border-radius: var(--oa-r-sm);
  background: var(--oa-surface-2);
}
.oa-streak__flame {
  width: 30px; height: 30px;
  border-radius: var(--oa-r-sm);
  display: grid;
  place-items: center;
  background: var(--oa-primary-soft);
  color: var(--oa-primary);
  flex-shrink: 0;
}
.oa-streak__flame svg { width: 16px; height: 16px; }
.oa-streak__name { flex: 1; min-width: 0; font-size: var(--oa-fs-sm); font-weight: 500; }
.oa-streak__count { font-weight: 600; font-variant-numeric: tabular-nums; }
.oa-streak__best { font-size: var(--oa-fs-xs); color: var(--oa-text-muted); }
@media (max-width: 560px) {
  .oa-streak { padding: var(--oa-s-2) var(--oa-s-3); }
  .oa-streak__flame { width: 26px; height: 26px; }
  /* Weight chart first; the rest behind "More body charts". */
  .oa-trends:not(.is-open) .oa-trend-extra { display: none; }
}
.oa-trends__toggle { margin-top: var(--oa-s-3); white-space: normal; text-align: left; }
@media (min-width: 561px) { .oa-trends__toggle { display: none; } }

/* Weekly summary card row. */
/* KPI tiles: two per row on a phone, as many as fit on desktop. */
.oa-stat-grid { display: grid; gap: var(--oa-s-3); grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); }
.oa-stat-grid > * { min-width: 0; }
@media (max-width: 560px) {
  .oa-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--oa-s-2); }
  .oa-stat-grid .oa-stat { padding: var(--oa-s-3); }
  .oa-stat-grid .oa-stat__value { font-size: var(--oa-fs-xl); }
}

/* Completion rings: always one row of four. */
.oa-ring-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--oa-s-2); }
.oa-ring-row > div { display: grid; justify-items: center; gap: var(--oa-s-2); text-align: center; min-width: 0; }

/* Hero: trend weight, weekly rate, conditional goal date (P5). */
.oa-hero-card { display: grid; gap: var(--oa-s-2); border-left: 3px solid var(--oa-primary); }
.oa-hero-card.is-toward { border-left-color: var(--oa-success); }
.oa-hero-card__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--oa-s-2) var(--oa-s-4); }
.oa-hero-card__value { font-size: var(--oa-fs-3xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.oa-hero-card__unit { font-size: var(--oa-fs-md); font-weight: 500; color: var(--oa-text-muted); margin-left: 4px; }
.oa-hero-card__rate { font-size: var(--oa-fs-md); font-weight: 600; color: var(--oa-text-secondary); }
.oa-hero-card.is-toward .oa-hero-card__rate { color: var(--oa-success-text); }
.oa-hero-card__line { margin: 0; font-size: var(--oa-fs-base); color: var(--oa-text); }
.oa-hero-inline { display: grid; gap: 2px; padding-top: var(--oa-s-2); border-top: 1px solid var(--oa-border); }
.oa-hero-inline__main { margin: 0; font-weight: 600; font-size: var(--oa-fs-sm); }
.oa-hero-inline.is-toward .oa-hero-inline__main { color: var(--oa-success-text); }

/* The first week on Progress. */
.oa-early__list { margin: var(--oa-s-3) 0; padding-left: var(--oa-s-5); list-style: disc; display: grid; gap: var(--oa-s-1); font-size: var(--oa-fs-sm); }

/* Six-week table. */
.oa-week-table tr.is-current td, .oa-week-table tr.is-current th { background: var(--oa-primary-softer); }
.oa-week-table th[scope="row"] { white-space: nowrap; }
.oa-week-table { min-width: 0; }
@media (max-width: 420px) {
  .oa-week-table th,
  .oa-week-table td { padding: var(--oa-s-2) var(--oa-s-2); font-size: var(--oa-fs-xs); white-space: normal; }
  .oa-week-table th:first-child,
  .oa-week-table td:first-child { padding-left: var(--oa-s-3); }
  .oa-week-table th:last-child,
  .oa-week-table td:last-child { padding-right: var(--oa-s-3); }
  .oa-week-table thead th { letter-spacing: 0; }
  .oa-week-table .oa-badge { display: table; margin-top: 2px; padding: 0 var(--oa-s-1); }
}

.oa-week-cards { display: grid; gap: var(--oa-s-3); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.oa-week-card {
  border: 1px solid var(--oa-border);
  border-radius: var(--oa-r-md);
  padding: var(--oa-s-4);
  background: var(--oa-surface);
  display: grid;
  gap: var(--oa-s-2);
}
.oa-week-card__label { font-size: var(--oa-fs-xs); color: var(--oa-text-muted); font-weight: 600; }
.oa-week-card__row {
  display: flex;
  justify-content: space-between;
  font-size: var(--oa-fs-sm);
  gap: var(--oa-s-2);
}
.oa-week-card__row dt { color: var(--oa-text-muted); }
.oa-week-card__row dd { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Chart card. */
.oa-chart-card {
  background: var(--oa-surface);
  border: 1px solid var(--oa-border);
  border-radius: var(--oa-r-md);
  padding: var(--oa-s-4) var(--oa-s-4) var(--oa-s-3);
  box-shadow: var(--oa-shadow-xs);
  display: grid;
  gap: var(--oa-s-3);
  align-content: start;
}
.oa-chart-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--oa-s-3);
  flex-wrap: wrap;
}
.oa-chart-card__title { font-size: var(--oa-fs-sm); font-weight: 600; }
.oa-chart-card__now {
  font-size: var(--oa-fs-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* Progress-vs-start comparison strip. */
.oa-compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--oa-border);
  border: 1px solid var(--oa-border);
  border-radius: var(--oa-r-md);
  overflow: hidden;
}
@media (max-width: 560px) { .oa-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.oa-compare__cell { background: var(--oa-surface); padding: var(--oa-s-4); display: grid; gap: var(--oa-s-1); }
.oa-compare__label {
  font-size: var(--oa-fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--oa-tracking-label);
  color: var(--oa-text-muted);
  font-weight: 600;
}
.oa-compare__nums { display: flex; align-items: baseline; gap: var(--oa-s-2); font-variant-numeric: tabular-nums; }
.oa-compare__from { color: var(--oa-text-muted); font-size: var(--oa-fs-sm); }
.oa-compare__arrow { color: var(--oa-text-muted); }
.oa-compare__to { font-size: var(--oa-fs-lg); font-weight: 600; }


/* ---------- 11  WEEKLY REVIEW ------------------------------ */

.oa-review-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: var(--oa-s-6);
  align-items: start;
}
.oa-review-list { display: grid; gap: var(--oa-s-2); max-height: 520px; overflow-y: auto; }
.oa-review-item {
  display: flex;
  align-items: center;
  gap: var(--oa-s-3);
  padding: var(--oa-s-3);
  border: 1px solid var(--oa-border);
  border-radius: var(--oa-r-sm);
  background: var(--oa-surface);
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.oa-review-item:hover { border-color: var(--oa-primary-line); background: var(--oa-primary-softer); }
.oa-review-item[aria-current="true"] { border-color: var(--oa-primary); background: var(--oa-primary-soft); }
.oa-review-item__wk { font-weight: 600; font-size: var(--oa-fs-sm); }
.oa-review-item__meta { font-size: var(--oa-fs-xs); color: var(--oa-text-muted); }
.oa-review-item__pct { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }


/* ---------- 12  SETTINGS VIEW ------------------------------ */

.oa-settings-grid {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: var(--oa-s-8);
  align-items: start;
}
.oa-settings-nav {
  position: sticky;
  top: calc(var(--oa-header-h) + var(--oa-s-5));
  display: grid;
  gap: 2px;
}
.oa-settings-nav__btn {
  appearance: none;
  border: 0;
  background: none;
  text-align: left;
  padding: var(--oa-s-2) var(--oa-s-3);
  border-radius: var(--oa-r-sm);
  font-size: var(--oa-fs-sm);
  color: var(--oa-text-secondary);
  cursor: pointer;
  border-left: 2px solid transparent;
}
.oa-settings-nav__btn:hover { background: var(--oa-surface-2); color: var(--oa-text); }
.oa-settings-nav__btn[aria-current="true"] {
  background: var(--oa-primary-soft);
  color: var(--oa-primary);
  font-weight: 600;
  border-left-color: var(--oa-primary);
}

/* Editable habit rows. */
.oa-habit-edit { display: grid; gap: var(--oa-s-2); }
.oa-habit-edit__row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 130px 44px 34px;
  align-items: center;
  gap: var(--oa-s-2);
  padding: var(--oa-s-2);
  border: 1px solid var(--oa-border);
  border-radius: var(--oa-r-sm);
  background: var(--oa-surface);
}
.oa-habit-edit__row.is-off { opacity: .55; }
.oa-habit-edit__drag {
  display: grid;
  place-items: center;
  color: var(--oa-text-muted);
  cursor: grab;
  height: 100%;
}
.oa-habit-edit__drag svg { width: 15px; height: 15px; }
.oa-habit-edit__row.is-dragging { opacity: .4; }
.oa-habit-edit__row.is-dropzone { border-color: var(--oa-primary); border-style: dashed; }
.oa-habit-edit__row .oa-input { min-height: 34px; font-size: var(--oa-fs-sm); }
.oa-habit-edit__row .oa-select { min-height: 34px; font-size: var(--oa-fs-sm); }

.oa-danger-zone {
  border: 1px solid color-mix(in srgb, var(--oa-danger) 30%, var(--oa-border));
  background: var(--oa-danger-soft);
  border-radius: var(--oa-r-md);
  padding: var(--oa-s-5);
}

.oa-kv {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--oa-s-2) var(--oa-s-4);
  font-size: var(--oa-fs-sm);
}
.oa-kv dt { color: var(--oa-text-muted); }
.oa-kv dd { font-weight: 500; font-variant-numeric: tabular-nums; }


/* ---------- 13  CHARTS (SVG) ------------------------------- */

.oa-chart { width: 100%; display: block; overflow: visible; }
.oa-chart text { font-family: var(--oa-font-display); fill: var(--oa-text-muted); }
.oa-chart .oa-c-grid { stroke: var(--oa-viz-grid); stroke-width: 1; }
.oa-chart .oa-c-axis-label { font-size: 10px; fill: var(--oa-text-muted); }
.oa-chart .oa-c-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.oa-chart .oa-c-area { opacity: .10; }
.oa-chart .oa-c-trend { stroke: var(--oa-viz-trend); stroke-width: 1.5; stroke-dasharray: 4 4; fill: none; }
.oa-chart .oa-c-dot { stroke: var(--oa-surface); stroke-width: 1.5; }
.oa-chart .oa-c-bar { transition: opacity var(--oa-dur-fast) var(--oa-ease); }
.oa-chart .oa-c-bar:hover { opacity: .78; }
.oa-chart .oa-c-hit { fill: transparent; cursor: crosshair; }
.oa-chart .oa-c-cursor { stroke: var(--oa-text-muted); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; }
.oa-chart .oa-c-value { font-size: 10.5px; font-weight: 600; fill: var(--oa-text); }

/* Chart tooltip (shared, positioned by JS). */
.oa-tip {
  position: fixed;
  z-index: 90;
  pointer-events: none;
  background: var(--oa-text);
  color: var(--oa-paper);
  font-size: var(--oa-fs-xs);
  padding: 6px 9px;
  border-radius: var(--oa-r-sm);
  box-shadow: var(--oa-shadow-md);
  opacity: 0;
  transform: translate(-50%, -120%);
  transition: opacity var(--oa-dur-fast) var(--oa-ease);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
}
.oa-tip.is-on { opacity: 1; }
.oa-tip strong { display: block; font-weight: 600; }

/* Progress ring. */
.oa-ring { display: block; }
.oa-ring__track { stroke: var(--oa-surface-3); fill: none; }
.oa-ring__fill {
  stroke: var(--oa-primary);
  fill: none;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dashoffset var(--oa-dur-slow) var(--oa-ease-out);
}
.oa-ring__label {
  font-size: 15px;
  font-weight: 600;
  fill: var(--oa-text);
  text-anchor: middle;
  dominant-baseline: central;
}
.oa-ring__sub { font-size: 8.5px; fill: var(--oa-text-muted); text-anchor: middle; }

/* Year heatmap. */
.oa-heatmap { display: grid; gap: var(--oa-s-3); }
.oa-heatmap__scroll { overflow-x: auto; padding-bottom: var(--oa-s-2); }
.oa-heatmap__grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 12px);
  gap: 3px;
  min-width: max-content;
}
.oa-heatmap__cell {
  width: 12px; height: 12px;
  border-radius: 2.5px;
  cursor: pointer;
  border: 0;
  padding: 0;
}
.oa-heatmap__cell:hover { outline: 1.5px solid var(--oa-text); outline-offset: 1px; }
.oa-heatmap__months {
  display: flex;
  gap: 3px;
  font-size: var(--oa-fs-xs);
  color: var(--oa-text-muted);
  min-width: max-content;
}


/* ---------- 14  MODALS, TOASTS, CELEBRATION ---------------- */

.oa-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--oa-text) 42%, transparent);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  padding: var(--oa-s-5);
  animation: oa-fade var(--oa-dur) var(--oa-ease);
  overflow-y: auto;
}
@keyframes oa-fade { from { opacity: 0; } to { opacity: 1; } }

.oa-modal {
  background: var(--oa-surface);
  border: 1px solid var(--oa-border);
  border-radius: var(--oa-r-lg);
  box-shadow: var(--oa-shadow-lg);
  width: 100%;
  max-width: 520px;
  max-height: min(88vh, 780px);
  display: flex;
  flex-direction: column;
  animation: oa-pop var(--oa-dur-slow) var(--oa-ease-out);
  margin: auto;
}
.oa-modal--wide { max-width: 720px; }
@keyframes oa-pop {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.oa-modal__head {
  padding: var(--oa-s-5) var(--oa-s-6) var(--oa-s-3);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--oa-s-4);
}
.oa-modal__body {
  padding: var(--oa-s-2) var(--oa-s-6) var(--oa-s-5);
  overflow-y: auto;
  flex: 1;
}
.oa-modal__foot {
  padding: var(--oa-s-4) var(--oa-s-6);
  border-top: 1px solid var(--oa-border);
  display: flex;
  gap: var(--oa-s-3);
  justify-content: flex-end;
  flex-wrap: wrap;
  background: var(--oa-surface-2);
  border-radius: 0 0 var(--oa-r-lg) var(--oa-r-lg);
}
.oa-modal__foot--split { justify-content: space-between; }

/* Onboarding step dots. */
.oa-steps { display: flex; gap: 5px; align-items: center; }
.oa-steps__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--oa-border-strong);
  transition: all var(--oa-dur) var(--oa-ease);
}
.oa-steps__dot.is-on { background: var(--oa-primary); width: 18px; border-radius: 3px; }

/* Single-choice cards (UI.radioGroup). Round markers, so they never
   read as "tick as many as you like". */
.oa-choices { display: grid; gap: var(--oa-s-2); }
.oa-choice {
  display: flex;
  align-items: flex-start;
  gap: var(--oa-s-3);
  min-height: 44px;
  padding: var(--oa-s-3) var(--oa-s-4);
  background: var(--oa-surface);
  border: 1px solid var(--oa-border);
  border-radius: var(--oa-r-md);
  cursor: pointer;
  transition: border-color var(--oa-dur-fast) var(--oa-ease),
              background var(--oa-dur-fast) var(--oa-ease);
}
.oa-choice:hover { border-color: var(--oa-primary-line); background: var(--oa-primary-softer); }
.oa-choice:focus-visible { outline: none; box-shadow: var(--oa-ring); }
.oa-choice[aria-checked="true"] { border-color: var(--oa-primary); background: var(--oa-primary-softer); }
.oa-choice__dot {
  flex-shrink: 0;
  width: 18px; height: 18px;
  margin-top: 2px;
  border-radius: 50%;
  border: 2px solid var(--oa-border-strong);
  background: var(--oa-surface);
}
.oa-choice[aria-checked="true"] .oa-choice__dot {
  border-color: var(--oa-primary);
  box-shadow: inset 0 0 0 3px var(--oa-surface);
  background: var(--oa-primary);
}
.oa-choice__body { display: grid; gap: 2px; min-width: 0; }
.oa-choice__title { font-weight: 600; font-size: var(--oa-fs-sm); color: var(--oa-text); }
.oa-choice__text { font-size: var(--oa-fs-xs); color: var(--oa-text-muted); }

/* A button that reads as an inline link. */
.oa-link-btn {
  background: none;
  border: 0;
  padding: 0;
  min-height: 30px;
  font: inherit;
  color: var(--oa-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.oa-link-btn:focus-visible { outline: none; box-shadow: var(--oa-ring); border-radius: 2px; }

/* "You are viewing sample data" line under the header. */
.oa-demo-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--oa-s-2) var(--oa-s-4);
  padding: var(--oa-s-2) var(--oa-s-4);
  background: var(--oa-primary-softer);
  border-bottom: 1px solid var(--oa-primary-line);
  font-size: var(--oa-fs-sm);
  color: var(--oa-text);
}
.oa-demo-banner__text { margin: 0; }

/* Licence: the key box takes a 143 character key, wrapped; the read only
   state switches entry boxes off (app.js lockInputs). */
.oa-licence__state { margin: 0 0 var(--oa-s-1); }
.oa-licence__key {
  font-family: var(--oa-font-mono);
  font-size: var(--oa-fs-sm);
  letter-spacing: 0.02em;
  word-break: break-all;
  resize: vertical;
  min-height: 96px;
}
.oa-licence__key::placeholder {
  font-family: var(--oa-font-display);
  letter-spacing: 0;
  word-break: normal;
}
.oa-readonly [data-ro-locked] { cursor: not-allowed; opacity: 0.7; }

/* Toasts. */
.oa-toasts {
  position: fixed;
  bottom: var(--oa-s-5);
  right: var(--oa-s-5);
  z-index: 120;
  display: grid;
  gap: var(--oa-s-2);
  max-width: min(360px, calc(100vw - var(--oa-s-8)));
}
.oa-toast {
  background: var(--oa-surface);
  border: 1px solid var(--oa-border-strong);
  border-left: 3px solid var(--oa-primary);
  border-radius: var(--oa-r-sm);
  box-shadow: var(--oa-shadow-lg);
  padding: var(--oa-s-3) var(--oa-s-4);
  font-size: var(--oa-fs-sm);
  display: flex;
  align-items: flex-start;
  gap: var(--oa-s-3);
  animation: oa-slide-in var(--oa-dur-slow) var(--oa-ease-out);
}
.oa-toast.is-out { animation: oa-slide-out var(--oa-dur) var(--oa-ease) forwards; }
.oa-toast--success { border-left-color: var(--oa-success); }
.oa-toast--warn    { border-left-color: var(--oa-warn); }
.oa-toast--danger  { border-left-color: var(--oa-danger); }
.oa-toast__icon { flex-shrink: 0; margin-top: 1px; }
.oa-toast__icon svg { width: 16px; height: 16px; }
@keyframes oa-slide-in {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes oa-slide-out {
  to { opacity: 0; transform: translateX(16px); }
}

/* Save-failure banner. One persistent message while storage
   writes are failing (store.js onSaveStatus), with the export
   action inline. Uses the -text token for AA on the soft fill. */
.oa-save-banner {
  position: sticky;
  top: 0;
  z-index: 130;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--oa-s-2) var(--oa-s-4);
  padding: var(--oa-s-3) var(--oa-s-4);
  background: var(--oa-danger-soft);
  color: var(--oa-danger-text);
  border-bottom: 1px solid var(--oa-danger);
  font-size: var(--oa-fs-sm);
}
.oa-save-banner__text { flex: 1 1 240px; margin: 0; }
.oa-save-banner .oa-btn { min-height: 36px; }
/* Unexpected-error banner: same layout, neutral colours. Red is for
   destructive actions only, and nothing here is destroyed. */
.oa-error-banner {
  background: var(--oa-surface-2);
  color: var(--oa-text);
  border-bottom-color: var(--oa-border);
}
.oa-error-banner__actions { display: flex; gap: var(--oa-s-2); }

/* Milestone celebration — restrained: a soft bloom, small confetti,
   no full-screen takeover. Suppressed under reduced-motion. */
.oa-celebrate {
  position: fixed;
  inset: 0;
  z-index: 115;
  pointer-events: none;
  overflow: hidden;
}
.oa-confetti {
  position: absolute;
  width: 7px;
  height: 11px;
  border-radius: 1.5px;
  opacity: 0;
  animation: oa-confetti-fall 1500ms var(--oa-ease) forwards;
}
@keyframes oa-confetti-fall {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg); }
  12%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--dx, 0), 70vh, 0) rotate(var(--rot, 540deg)); }
}
@media (prefers-reduced-motion: reduce) {
  .oa-celebrate { display: none; }
}

/* Milestone banner. */
.oa-milestone {
  position: fixed;
  left: 50%;
  top: calc(var(--oa-header-h) + 14px);
  transform: translateX(-50%);
  z-index: 118;
  background: var(--oa-primary);
  color: var(--oa-text-inverse);
  padding: var(--oa-s-3) var(--oa-s-5);
  border-radius: var(--oa-r-pill);
  box-shadow: var(--oa-shadow-lg);
  font-size: var(--oa-fs-sm);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--oa-s-2);
  animation: oa-drop var(--oa-dur-slow) var(--oa-ease-out);
  max-width: calc(100vw - 32px);
}
.oa-milestone.is-out { animation: oa-lift var(--oa-dur) var(--oa-ease) forwards; }
.oa-milestone svg { width: 16px; height: 16px; }
@keyframes oa-drop {
  from { opacity: 0; transform: translate(-50%, -14px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes oa-lift {
  to { opacity: 0; transform: translate(-50%, -14px); }
}

/* Habit-tick pulse. */
@keyframes oa-tick-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--oa-primary) 40%, transparent); }
  100% { box-shadow: 0 0 0 12px transparent; }
}
.oa-habit.is-pulsing .oa-habit__box { animation: oa-tick-pulse 550ms var(--oa-ease-out); }


/* ---------- 15  EMPTY STATES & UTILITIES ------------------- */

.oa-empty {
  display: grid;
  place-items: center;
  gap: var(--oa-s-3);
  text-align: center;
  padding: var(--oa-s-10) var(--oa-s-5);
  border: 1px dashed var(--oa-border-strong);
  border-radius: var(--oa-r-md);
  background: var(--oa-surface-2);
}
.oa-empty__icon {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--oa-r-md);
  background: var(--oa-surface);
  border: 1px solid var(--oa-border);
  color: var(--oa-text-muted);
}
.oa-empty__icon svg { width: 20px; height: 20px; }
.oa-empty__title { font-weight: 600; }
.oa-empty__text { font-size: var(--oa-fs-sm); color: var(--oa-text-muted); max-width: 44ch; }

.oa-view { display: none; }
.oa-view.is-active { display: block; animation: oa-view-in var(--oa-dur) var(--oa-ease-out); }
@keyframes oa-view-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

.oa-hide { display: none !important; }
.oa-mt-0 { margin-top: 0 !important; }
.oa-app-pad { padding-block: var(--oa-s-8) var(--oa-s-12); }

/* --- Split layouts -----------------------------------------
   These two-column views collapse at their own breakpoints.
   Kept in CSS rather than JS so switching views never attaches
   another resize listener.                                    */

[data-today-grid],
[data-cal-grid],
[data-habit-grid],
[data-feature-grid],
[data-audience-grid] {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
  [data-today-grid]    { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  [data-feature-grid],
  [data-audience-grid] { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
}

@media (min-width: 940px) {
  [data-cal-grid]   { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  [data-habit-grid] { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}

/* Marketing grids get a tighter gutter once stacked. */
[data-feature-grid],
[data-audience-grid] { gap: var(--oa-s-6); }
@media (min-width: 900px) {
  [data-feature-grid],
  [data-audience-grid] { gap: var(--oa-s-12); }
}


/* ---------- 16  RESPONSIVE --------------------------------- */

@media (max-width: 1040px) {
  .oa-hero__grid { grid-template-columns: 1fr; gap: var(--oa-s-8); }
  .oa-pricing { grid-template-columns: 1fr; gap: var(--oa-s-6); }
  .oa-review-grid { grid-template-columns: 1fr; }
  .oa-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  :root { --oa-fs-4xl: 38px; --oa-fs-3xl: 31px; --oa-fs-2xl: 25px; }
  .oa-wrap { padding-inline: var(--oa-s-4); }
  .oa-section { padding-block: var(--oa-s-12); }
  .oa-hero { padding-block: var(--oa-s-12) var(--oa-s-10); }

  /* Swap top nav for a bottom tab bar on phones. */
  .oa-nav { display: none; }
  .oa-tabbar { display: block; }
  .oa-header__title { display: block; }
  body { padding-bottom: 62px; }
  .oa-toasts { bottom: 74px; left: var(--oa-s-4); right: var(--oa-s-4); max-width: none; }

  .oa-settings-grid { grid-template-columns: 1fr; gap: var(--oa-s-5); }
  .oa-settings-nav {
    position: static;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    gap: var(--oa-s-1);
    padding-bottom: var(--oa-s-2);
  }
  .oa-settings-nav__btn { border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap; }
  .oa-settings-nav__btn[aria-current="true"] { border-left-color: transparent; border-bottom-color: var(--oa-primary); }

  .oa-grid--3, .oa-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oa-habit-edit__row { grid-template-columns: 22px minmax(0, 1fr) 34px; row-gap: var(--oa-s-2); }
  .oa-habit-edit__row > .oa-select { grid-column: 2 / 4; }
  .oa-habit-edit__row > .oa-switch { grid-column: 2 / 3; justify-self: start; }
}

@media (max-width: 560px) {
  :root { --oa-fs-4xl: 32px; --oa-fs-3xl: 27px; }
  .oa-brand__sub { display: none; }
  .oa-grid--2, .oa-grid--3, .oa-grid--4 { grid-template-columns: 1fr; }
  .oa-footer__grid { grid-template-columns: 1fr; gap: var(--oa-s-6); }
  .oa-card { padding: var(--oa-s-4); }
  .oa-modal__head, .oa-modal__body, .oa-modal__foot { padding-inline: var(--oa-s-4); }
  .oa-hero__actions .oa-btn { width: 100%; }
  .oa-cal { padding: var(--oa-s-3); }
  .oa-cal__grid { gap: 4px; }
}


/* ---------- 15b  WORKOUT LOG -------------------------------
   The set row is the important thing here. It is designed to be
   used one-handed, standing up, on a phone, between sets — so
   the inputs are large, the target sits immediately left of them
   for comparison, and the tick on the right is the primary
   action rather than a checkbox tucked at the start.
   ---------------------------------------------------------- */

.oa-wk {
  background: var(--oa-surface);
  border: 1px solid var(--oa-border);
  border-radius: var(--oa-r-md);
  box-shadow: var(--oa-shadow-xs);
  overflow: hidden;
}
.oa-wk--cardio { border-left: 3px solid var(--oa-viz-4); }

.oa-wk__head {
  display: flex;
  align-items: flex-start;
  gap: var(--oa-s-3);
  padding: var(--oa-s-4) var(--oa-s-5);
  border-bottom: 1px solid var(--oa-border);
  background: var(--oa-surface-2);
}
.oa-wk__name {
  width: 100%;
  border: 0;
  background: transparent;
  font-family: var(--oa-font-display);
  font-size: var(--oa-fs-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--oa-text);
  padding: 2px 0;
  border-bottom: 1px solid transparent;
}
.oa-wk__name:focus {
  outline: none;
  border-bottom-color: var(--oa-primary);
}
.oa-wk__name::placeholder { color: var(--oa-text-muted); font-weight: 500; }
.oa-wk__meta { font-size: var(--oa-fs-xs); color: var(--oa-text-muted); margin-top: 2px; }
.oa-wk__del:hover { color: var(--oa-danger-text); border-color: var(--oa-danger); }

.oa-wk__body { padding: var(--oa-s-4) var(--oa-s-5); }

.oa-wk__foot {
  padding: var(--oa-s-4) var(--oa-s-5);
  border-top: 1px solid var(--oa-border);
  background: var(--oa-surface-2);
}

/* --- Exercise card --- */
.oa-wk__ex {
  border: 1px solid var(--oa-border);
  border-radius: var(--oa-r-sm);
  padding: var(--oa-s-3);
  margin-bottom: var(--oa-s-3);
  background: var(--oa-surface);
}
.oa-wk__ex-head {
  display: flex;
  align-items: flex-start;
  gap: var(--oa-s-2);
  margin-bottom: var(--oa-s-3);
}
.oa-wk__ex-name {
  font-family: var(--oa-font-display);
  font-weight: 600;
  font-size: var(--oa-fs-base);
}
.oa-wk__ex-last {
  font-size: var(--oa-fs-xs);
  color: var(--oa-text-muted);
  margin-top: 1px;
}

/* --- Set rows ---
   Capped rather than full-width. On a wide screen an uncapped row
   throws the inputs hundreds of pixels away from the set number,
   so your eye has to travel the whole width to read one set. The
   cap keeps the whole row inside one glance. */
.oa-wk__sets { display: grid; gap: 3px; max-width: 440px; }

.oa-wk__set {
  display: grid;
  grid-template-columns: 26px minmax(56px, 1fr) 72px 64px 40px;
  align-items: center;
  gap: var(--oa-s-2);
  padding: 3px 0;
  position: relative;
}
.oa-wk__set--hdr {
  font-family: var(--oa-font-display);
  font-size: var(--oa-fs-xs);
  font-weight: 600;
  letter-spacing: var(--oa-tracking-label);
  text-transform: uppercase;
  color: var(--oa-text-muted);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--oa-border);
  margin-bottom: 2px;
}
.oa-wk__set-n {
  font-family: var(--oa-font-display);
  font-size: var(--oa-fs-sm);
  font-weight: 600;
  color: var(--oa-text-muted);
  text-align: center;
}
.oa-wk__set-target {
  font-family: var(--oa-font-display);
  font-size: var(--oa-fs-sm);
  color: var(--oa-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.oa-wk__in {
  width: 100%;
  min-height: 38px;
  padding: var(--oa-s-1) var(--oa-s-2);
  border: 1px solid var(--oa-border-strong);
  border-radius: var(--oa-r-sm);
  background: var(--oa-surface);
  color: var(--oa-text);
  font-family: var(--oa-font-display);
  font-size: var(--oa-fs-base);
  font-variant-numeric: tabular-nums;
  text-align: center;
  /* Spinners steal width and are useless on touch. */
  appearance: textfield;
  -moz-appearance: textfield;
}
.oa-wk__in::-webkit-outer-spin-button,
.oa-wk__in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.oa-wk__in:focus {
  outline: none;
  border-color: var(--oa-primary);
  box-shadow: var(--oa-ring);
}

.oa-wk__tick {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--oa-r-sm);
  border: 1.5px solid var(--oa-border-strong);
  background: var(--oa-surface);
  color: transparent;
  cursor: pointer;
  transition: all var(--oa-dur) var(--oa-ease-out);
}
.oa-wk__tick svg { width: 18px; height: 18px; }
.oa-wk__tick:hover { border-color: var(--oa-primary-line); }
.oa-wk__set.is-done .oa-wk__tick {
  background: var(--oa-primary);
  border-color: var(--oa-primary);
  color: var(--oa-text-inverse);
}
.oa-wk__set.is-done .oa-wk__in {
  background: var(--oa-primary-softer);
  border-color: var(--oa-primary-line);
  font-weight: 600;
}
.oa-wk__set.is-done .oa-wk__set-n { color: var(--oa-primary); }

.oa-wk__set-e1rm {
  grid-column: 2 / -1;
  font-size: var(--oa-fs-xs);
  color: var(--oa-primary);
  font-variant-numeric: tabular-nums;
  margin-top: -2px;
}

@keyframes oa-set-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--oa-primary) 35%, transparent); }
  100% { box-shadow: 0 0 0 10px transparent; }
}
.oa-wk__set.is-pulsing .oa-wk__tick { animation: oa-set-pulse 500ms var(--oa-ease-out); }

/* --- Add buttons --- */
.oa-wk__add {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--oa-s-2);
  padding: var(--oa-s-3);
  border: 1px dashed var(--oa-border-strong);
  border-radius: var(--oa-r-sm);
  background: transparent;
  color: var(--oa-primary);
  font-family: var(--oa-font-display);
  font-size: var(--oa-fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--oa-dur-fast) var(--oa-ease);
}
.oa-wk__add:hover { background: var(--oa-primary-softer); border-color: var(--oa-primary-line); }
.oa-wk__add svg { width: 16px; height: 16px; }

/* --- Routine chips on the start card --- */
.oa-wk-routines {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: var(--oa-s-2);
}
.oa-wk-routine {
  text-align: left;
  padding: var(--oa-s-3) var(--oa-s-4);
  border: 1px solid var(--oa-border);
  border-radius: var(--oa-r-sm);
  background: var(--oa-surface);
  cursor: pointer;
  transition: all var(--oa-dur-fast) var(--oa-ease);
}
.oa-wk-routine:hover {
  border-color: var(--oa-primary);
  background: var(--oa-primary-softer);
  box-shadow: var(--oa-shadow-sm);
}
.oa-wk-routine__name {
  display: block;
  font-family: var(--oa-font-display);
  font-weight: 600;
  font-size: var(--oa-fs-sm);
}
.oa-wk-routine__meta {
  display: block;
  font-size: var(--oa-fs-xs);
  color: var(--oa-text-muted);
  margin-top: 2px;
}

/* --- History row icon --- */
.oa-wk-hist__icon {
  width: 30px; height: 30px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--oa-r-sm);
  background: var(--oa-primary-soft);
  color: var(--oa-primary);
}
.oa-wk-hist__icon.is-cardio {
  background: color-mix(in srgb, var(--oa-viz-4) 16%, transparent);
  color: var(--oa-viz-4);
}
.oa-wk-hist__icon svg { width: 15px; height: 15px; }

/* --- Narrow screens: drop the target column, stack the e1RM --- */
@media (max-width: 560px) {
  .oa-wk__head, .oa-wk__body, .oa-wk__foot { padding-inline: var(--oa-s-3); }
  .oa-wk__set { grid-template-columns: 22px minmax(46px, 1fr) 1fr 1fr 38px; gap: var(--oa-s-1); }
  .oa-wk__in { font-size: var(--oa-fs-sm); }
  .oa-wk-routines { grid-template-columns: 1fr 1fr; }
}


/* ---------- 16b  EMBED MODE --------------------------------
   Applied by app.js when the page is loaded with ?embed=1.
   Strips the marketing chrome so the app sits cleanly inside an
   iframe on someone else's site: no sticky header, no footer,
   no bottom tab bar, tighter padding, square corners.

   The view navigation survives as a compact inline row, so an
   embedded copy is still a working demo rather than a static
   screenshot. See docs/EMBEDDING.md.
   ---------------------------------------------------------- */

.oa-is-embed body { padding-bottom: 0; }

.oa-is-embed .oa-footer,
.oa-is-embed .oa-tabbar { display: none !important; }

.oa-is-embed .oa-header {
  position: static;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--oa-surface);
}
.oa-is-embed .oa-header__inner {
  height: auto;
  min-height: 48px;
  padding-block: var(--oa-s-2);
  flex-wrap: wrap;
  gap: var(--oa-s-2);
}

/* Keep the nav visible at phone widths in an embed — there is no
   tab bar to fall back to. */
.oa-is-embed .oa-nav {
  display: flex;
  width: 100%;
  margin-left: 0;
  order: 3;
  padding-bottom: 2px;
}
.oa-is-embed .oa-brand__sub { display: none; }

.oa-is-embed .oa-app-pad { padding-block: var(--oa-s-5) var(--oa-s-8); }
.oa-is-embed .oa-hero { padding-block: var(--oa-s-10) var(--oa-s-8); }
.oa-is-embed .oa-section { padding-block: var(--oa-s-10); }

/* An embedded frame is usually narrow — give the content its
   full width rather than centring it in a wide gutter. */
.oa-is-embed .oa-wrap { max-width: none; }

/* Toasts anchored to the frame, not the viewport. */
.oa-is-embed .oa-toasts { bottom: var(--oa-s-4); right: var(--oa-s-4); }


/* ---------- 17  PRINT -------------------------------------- */
/* The printable report lives in #view-report. When printing we
   hide the chrome and every other view, then lay the report out
   on A4 with a clean header. Works from the browser Print dialog
   (Ctrl/Cmd+P) or the "Print report" button.                  */

.oa-print-only { display: none; }

@media print {
  :root {
    --oa-paper: #fff;
    --oa-surface: #fff;
    --oa-surface-2: #fff;
    --oa-surface-3: #f2f2f2;
    --oa-border: #d8d8d8;
    --oa-border-strong: #b8b8b8;
    --oa-text: #101010;
    --oa-text-secondary: #333;
    --oa-text-muted: #666;
    --oa-shadow-xs: none; --oa-shadow-sm: none;
    --oa-shadow-md: none; --oa-shadow-lg: none;
  }

  @page { size: A4 portrait; margin: 14mm 12mm; }

  html, body { background: #fff !important; }

  .oa-header,
  .oa-tabbar,
  .oa-toasts,
  .oa-celebrate,
  .oa-milestone,
  .oa-modal-backdrop,
  .oa-footer,
  .oa-no-print { display: none !important; }

  .oa-print-only { display: block; }

  /* Only the report prints, regardless of the active view. */
  .oa-view { display: none !important; }
  .oa-view#view-report { display: block !important; }

  body { padding-bottom: 0; font-size: 10.5pt; }
  .oa-wrap { max-width: none; padding: 0; }
  .oa-section, .oa-app-pad { padding-block: 0; }

  .oa-card, .oa-stat, .oa-chart-card, .oa-table-wrap {
    border: 1px solid #d8d8d8 !important;
    box-shadow: none !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .oa-print-block { break-inside: avoid; page-break-inside: avoid; }
  .oa-print-break { break-before: page; page-break-before: always; }

  .oa-grid--auto,
  .oa-grid--auto-lg { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  a { color: inherit; text-decoration: none; }
  .oa-table { min-width: 0; font-size: 9pt; }
  .oa-table th { background: #f4f4f4 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Keep chart + heatmap colours in print. */
  .oa-chart, .oa-heatmap__cell, .oa-cal__cell, .oa-bar__fill, .oa-ring__fill {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}