/* akash-world -- plain CSS, no build step, no framework.
   docs/architecture.md: "Jinja2, plain CSS, vanilla JS. No SPA, no build step." */

/* UI-31: every colour on the site is one of these tokens. The light set is
   the default; the dark set below replaces it when the system asks for dark
   (and the person has not chosen light), or when the person chose dark. The
   choice is a column on `users` (`users.theme`), rendered by base.html as
   `data-theme` on <html> -- server-side, so no script decides the theme and
   the production CSP (script-src 'self', no inline) has nothing to refuse.
   tests/unit/test_theme_tokens.py measures every text pair at WCAG AA in
   both sets, keeps the two dark blocks identical, and refuses a colour
   literal anywhere outside a token block. */
:root {
  color-scheme: light dark;
  /* One palette for the whole site, landing page included. Cool paper,
     slate ink (the apex page's family), and two meter colours that carry
     meaning: teal for charges and positive amounts, amber only for held
     credits. Workspace review 2026-09-29 replaced the cream-and-lime set. */
  --color-bg: #eef2f1;
  --color-surface: #ffffff;
  --color-border: #d3dcda;
  /* The edge of a control (inputs, selects, checkboxes): WCAG 1.4.11 asks
     3:1 against what it sits on, which --color-border is not. */
  --color-control-border: #788a8f;
  --color-text: #132029;
  --color-text-muted: #56666e;
  --color-accent: #0f7b6c;
  --color-accent-soft: #dcefeb;
  /* The AW Fitness app's palette (aw_fitness_app theme/colors.ts), so the
     website reads like the app: a raised fill for secondary actions and
     inputs, the 1 px top highlight of a card, text on the accent fill, and
     the three macro colours. Shapes: 8 / 14 (buttons, inputs) / 20 (cards)
     / 28 (the hero). */
  --color-surface-2: #f3f6f5;
  --color-highlight: #e3e9e7;
  --color-on-accent: #ffffff;
  --color-protein: #1d4ed8;
  --color-carbs: #8a5a0c;
  --color-fat: #7b3fa8;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --color-accent-soft-hover: #cbe6e0;
  --color-hold: #9a5b12;
  --color-hold-soft: #f6ead8;
  --color-link: #0f6357;
  --color-success: #1f7a4d;
  --color-danger: #b3392f;
  /* Text on a --color-danger fill (UI-26's .button-danger and the nav
     badge). */
  --color-on-danger: #ffffff;
  /* "Waiting on something" (status pills, the busy notice). */
  --color-busy: #a8871f;
  --color-busy-text: #7a6212;
  --color-busy-soft: #fdf6d8;
  /* A run that is running. */
  --color-running: #1d4ed8;
  /* The brand mark: a light glyph on a dark tile in both themes. */
  --color-logo-bg: #132029;
  --color-logo-mark: #8fd8cb;
  /* Shadows are drawn in this colour, as `rgb(var(--color-shadow) / a)`. */
  --color-shadow: 19 32 41;
  /* Server-rendered SVG charts (runs/charts.py, gym_tracker/_chart.html).
     charts.STANDALONE_CSS repeats these for the downloaded file; a test
     keeps the two equal. */
  --color-chart-grid: #e3e9e7;
  --color-chart-axis: #b9c5c2;
  --color-chart-series: #008a74;
  /* The traffic page's client lines (admin/analytics/traffic_chart.py):
     a fixed hue per client, validated as a set in both themes (all pairs,
     >= 3:1 on the surface; the CVD margin is thin, so each line also has
     its own dash). "Other" is the muted ink, "All clients" the ink. */
  --color-traffic-web: #2a78d6;
  --color-traffic-ios: #c4531c;
  --color-traffic-android: #11815a;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  /* A system serif, because the CSP's font-src is 'self' and no web font
     ships with the app. Headings only; body and UI stay sans. */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
    Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* The dark set, twice: once for "system" when the system is dark, once for
   an explicit "dark". The two blocks must stay identical (a test compares
   them). `screen` only: a printout is always the light set. */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #0f171c;
    --color-surface: #16222a;
    --color-border: #2a3a43;
    --color-control-border: #5f747d;
    --color-text: #e6eeec;
    --color-text-muted: #a3b4ba;
    --color-accent: #4cc3ad;
    --color-accent-soft: #143a35;
    --color-surface-2: #1b2a33;
    --color-highlight: #1f2f38;
    --color-on-accent: #06231e;
    --color-protein: #6ea8fe;
    --color-carbs: #f2b45a;
    --color-fat: #c792ea;
    --color-accent-soft-hover: #1b4a44;
    --color-hold: #e0a458;
    --color-hold-soft: #3a2a14;
    --color-link: #6fd3c1;
    --color-success: #5cc98f;
    --color-danger: #f08a7e;
    --color-on-danger: #1a0f0e;
    --color-busy: #c9a43a;
    --color-busy-text: #e5c66b;
    --color-busy-soft: #33290c;
    --color-running: #8fb3ff;
    --color-logo-bg: #0b2e29;
    --color-logo-mark: #8fd8cb;
    --color-shadow: 0 0 0;
    --color-chart-grid: #26302f;
    --color-chart-axis: #3c4a4c;
    --color-chart-series: #1ea58c;
    --color-traffic-web: #3987e5;
    --color-traffic-ios: #d95926;
    --color-traffic-android: #199e70;
  }
}

@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;
    --color-bg: #0f171c;
    --color-surface: #16222a;
    --color-border: #2a3a43;
    --color-control-border: #5f747d;
    --color-text: #e6eeec;
    --color-text-muted: #a3b4ba;
    --color-accent: #4cc3ad;
    --color-accent-soft: #143a35;
    --color-surface-2: #1b2a33;
    --color-highlight: #1f2f38;
    --color-on-accent: #06231e;
    --color-protein: #6ea8fe;
    --color-carbs: #f2b45a;
    --color-fat: #c792ea;
    --color-accent-soft-hover: #1b4a44;
    --color-hold: #e0a458;
    --color-hold-soft: #3a2a14;
    --color-link: #6fd3c1;
    --color-success: #5cc98f;
    --color-danger: #f08a7e;
    --color-on-danger: #1a0f0e;
    --color-busy: #c9a43a;
    --color-busy-text: #e5c66b;
    --color-busy-soft: #33290c;
    --color-running: #8fb3ff;
    --color-logo-bg: #0b2e29;
    --color-logo-mark: #8fd8cb;
    --color-shadow: 0 0 0;
    --color-chart-grid: #26302f;
    --color-chart-axis: #3c4a4c;
    --color-chart-series: #1ea58c;
    --color-traffic-web: #3987e5;
    --color-traffic-ios: #d95926;
    --color-traffic-android: #199e70;
  }
}

/* An explicit "light" is light even on a dark system. */
:root[data-theme="light"] {
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: var(--color-link);
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: underline;
}

/* UI-18: a link inside running text is underlined, not told apart by
   colour alone (WCAG 1.4.1; axe link-in-text-block, which
   scripts/page_checks.py fails on). Navigation, cards and buttons keep
   their own styles: only links inside text containers are matched. */
.site-main :is(p, li, dd, td, .hint, .empty-state, .empty-message) > a:not(.button) {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem 2rem;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.site-header .brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-text);
}

.site-header .brand:hover {
  text-decoration: none;
}

.site-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.6rem;
  background: var(--color-logo-bg);
  color: var(--color-logo-mark);
  flex-shrink: 0;
}

.site-logo svg {
  width: 1.15rem;
  height: 1.15rem;
}

.site-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.1rem;
  font-size: 0.9rem;
}

.site-nav a {
  color: var(--color-text-muted);
}

.site-nav a:hover {
  color: var(--color-text);
  text-decoration: none;
}

.site-nav .nav-credits {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--color-text);
  background: var(--color-accent-soft);
  margin-left: auto;
}

.site-nav .nav-credits:hover {
  text-decoration: none;
  background: var(--color-accent-soft-hover);
}

/* Admin attention count on the Admin nav link (app/platform/admin/attention.py). */
.nav-badge {
  display: inline-block;
  min-width: 1.3rem;
  padding: 0.05rem 0.4rem;
  margin-left: 0.3rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  color: var(--color-on-danger);
  background: var(--color-danger);
  font-variant-numeric: tabular-nums;
}

/* PL-IDEA-12: the notifications bell, in both headers. */
.nav-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  border-radius: 999px;
  color: var(--color-text-muted);
}

.site-nav .nav-bell:hover,
.nav-bell:hover {
  background: var(--color-bg);
  color: var(--color-text);
  text-decoration: none;
}

.nav-bell[aria-current] {
  color: var(--color-text);
}

.nav-bell-icon {
  width: 1.3rem;
  height: 1.3rem;
}

.nav-bell-badge {
  position: absolute;
  top: 0.05rem;
  right: -0.2rem;
  margin-left: 0;
  min-width: 1.1rem;
  padding: 0 0.3rem;
  font-size: 0.68rem;
}

.admin-attention {
  margin-bottom: 1.5rem;
}

.admin-attention__count {
  font-variant-numeric: tabular-nums;
}

.admin-attention__count--due {
  color: var(--color-danger);
}

/* PL-IDEA-9/10: admin users search, metrics and balance corrections. */
.admin-table-wrapper {
  overflow-x: auto;
  margin-bottom: 1rem;
}

.admin-links,
.admin-windows {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.admin-windows a[aria-current="page"] {
  font-weight: 700;
  text-decoration: underline;
}

.admin-search__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.admin-search__row input {
  flex: 1 1 14rem;
  min-width: 0;
}

.admin-count,
.admin-metrics td,
.admin-metrics dd {
  font-variant-numeric: tabular-nums;
}

.admin-sparkline {
  display: block;
  width: 100%;
  height: 4rem;
  color: var(--color-accent);
  margin: 0.5rem 0;
}

.admin-correction {
  max-width: 32rem;
}

/* Admin analytics (/admin/analytics). */
.analytics-range {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1.5rem;
}

.analytics-range__custom {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem;
}

.analytics-range__custom label {
  display: flex;
  flex-direction: column;
  font-size: 0.85rem;
}

.analytics-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.75rem;
  margin: 0.75rem 0;
}

.analytics-tile {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.75rem 0.9rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
}

.analytics-tile span,
.analytics-tile small {
  color: var(--color-text-muted);
  font-size: 0.82rem;
}

.analytics-tile strong {
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
}

.analytics-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.75rem 1.5rem;
}

.analytics-csv {
  font-size: 0.8rem;
  font-family: var(--font-sans);
  font-weight: 400;
  margin-left: 0.4rem;
}

.admin-analytics td,
.admin-analytics dd {
  font-variant-numeric: tabular-nums;
}

/* /admin/analytics/traffic: a line chart per product (traffic_chart.py).
   Colour follows the client, never its rank; text stays in ink. */
.traffic-measure {
  align-items: baseline;
  margin: 1rem 0 0.25rem;
}

.traffic-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 1rem 1.5rem;
  margin: 0.75rem 0 1rem;
}

.traffic-chart {
  margin: 0;
  padding: 0.75rem 0.9rem 0.6rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  min-width: 0;
}

.traffic-chart--total {
  grid-column: 1 / -1;
}

.traffic-chart figcaption {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: 0.35rem;
}

.traffic-chart figcaption strong {
  color: var(--color-text);
}

.traffic-chart svg.tc {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--font-sans);
  overflow: visible;
}

.traffic-chart__empty {
  margin: 1.5rem 0;
  color: var(--color-text-muted);
  text-align: center;
}

.traffic-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0.4rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.82rem;
  color: var(--color-text);
}

.traffic-chart__legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.traffic-chart__swatch {
  width: 24px;
  height: 10px;
}

.tc-grid {
  stroke: var(--color-chart-grid);
  stroke-width: 1;
}

.tc-axis {
  stroke: var(--color-chart-axis);
  stroke-width: 1;
}

.tc-tick {
  fill: var(--color-text-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.tc-line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.tc-dot {
  stroke: var(--color-surface);
  stroke-width: 1.5;
}

.tc-s-web {
  stroke: var(--color-traffic-web);
}

.tc-s-ios {
  stroke: var(--color-traffic-ios);
}

.tc-s-android {
  stroke: var(--color-traffic-android);
}

.tc-s-other {
  stroke: var(--color-text-muted);
}

.tc-s-all {
  stroke: var(--color-text);
}

.tc-line.tc-s-all {
  stroke-width: 2.5;
}

.tc-dot.tc-s-web {
  fill: var(--color-traffic-web);
  stroke: var(--color-surface);
}

.tc-dot.tc-s-ios {
  fill: var(--color-traffic-ios);
  stroke: var(--color-surface);
}

.tc-dot.tc-s-android {
  fill: var(--color-traffic-android);
  stroke: var(--color-surface);
}

.tc-dot.tc-s-other {
  fill: var(--color-text-muted);
  stroke: var(--color-surface);
}

.tc-dot.tc-s-all {
  fill: var(--color-text);
  stroke: var(--color-surface);
}

.tc-hit {
  fill: transparent;
}

.tc-guide {
  stroke: var(--color-chart-axis);
  stroke-width: 1;
  visibility: hidden;
}

.tc-day:hover .tc-guide {
  visibility: visible;
}

.traffic-numbers {
  margin-top: 1rem;
}

.traffic-numbers summary {
  cursor: pointer;
  font-weight: 600;
}

/* /admin/analytics/traffic: one tbody per day, its Total row set apart. */
.analytics-traffic td {
  text-align: right;
}

.analytics-traffic tbody + tbody th[scope="rowgroup"],
.analytics-traffic tbody + tbody tr:first-child > * {
  border-top: 2px solid var(--color-border);
}

.analytics-traffic__total td {
  font-weight: 600;
}

/* An email is one long word; let it break rather than widen the page. */
.admin-user-detail h1,
.admin-users td:first-child {
  overflow-wrap: anywhere;
}

.admin-correction fieldset {
  border: none;
  padding: 0;
  margin: 0 0 0.75rem;
}

.nav-credits-amount {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.nav-credits-unit {
  color: var(--color-text-muted);
}

.nav-user-section {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding-left: 1rem;
  border-left: 1px solid var(--color-border);
}

.nav-user-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  color: var(--color-text);
  font-weight: 600;
  max-width: 180px;
  overflow: hidden;
  white-space: nowrap;
}

.site-nav .nav-user-link {
  color: var(--color-text);
}

.nav-user-link:hover {
  background: var(--color-bg);
  text-decoration: none;
}

.nav-user-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: currentColor;
}

.nav-user-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-logout-form {
  display: inline-flex;
  margin: 0;
}

/* A plain text button: logging out is an ordinary action, not a warning. */
.site-nav .nav-logout-btn {
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  background: none;
  color: var(--color-text-muted);
  font-weight: 500;
  font-size: 0.9rem;
}

.site-nav .nav-logout-btn:hover {
  background: var(--color-bg);
  color: var(--color-text);
  filter: none;
}

/* UI-16: the current page and section (base.html sets aria-current). */
.site-nav a[aria-current],
.nav-menu-panel a[aria-current] {
  color: var(--color-text);
  font-weight: 600;
}

.site-nav > a[aria-current]:not(.nav-credits):not(.nav-bell) {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.45em;
}

/* UI-16: the compact signed-in header, below 40rem. At 390px the full row
   wrapped to three lines (~205px of chrome on every page). */
.site-header-compact {
  display: none;
}

.nav-menu {
  position: relative;
}

.nav-menu summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.5rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
}

.nav-menu summary::-webkit-details-marker {
  display: none;
}

.nav-menu summary::after {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  margin-left: 0.1rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.12rem) rotate(45deg);
}

.nav-menu[open] summary::after {
  transform: translateY(0.12rem) rotate(-135deg);
}

.nav-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  z-index: 20;
  display: flex;
  flex-direction: column;
  width: min(16rem, calc(100vw - 2rem));
  padding: 0.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.6rem;
  box-shadow: 0 8px 24px rgb(var(--color-shadow) / 0.12);
}

.nav-menu-panel a,
.nav-menu-panel .nav-logout-btn {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.4rem;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.nav-menu-panel a:hover,
.nav-menu-panel .nav-logout-btn:hover {
  background: var(--color-bg);
  color: var(--color-text);
  text-decoration: none;
  filter: none;
}

.nav-menu-user {
  margin-top: 0.35rem;
  padding: 0.6rem 0.75rem 0.25rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.nav-menu-panel .nav-logout-form {
  display: block;
}

.nav-menu-panel .nav-logout-btn {
  width: 100%;
  background: none;
  font-weight: 500;
}

/* Mobile polish (2026-10-29): the compact header (brand, balance, bell, Menu) takes over below
   56rem, not 40rem: at tablet width (768 px) the full row of links wrapped to two lines. */
@media (max-width: 56rem) {
  .site-header {
    padding: 0.75rem 1rem;
    gap: 0.5rem;
  }

  .site-header--signed-in {
    flex-wrap: nowrap;
  }

  .site-header--signed-in .site-nav {
    display: none;
  }

  .site-header-compact {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
  }

  .site-header-compact .nav-credits {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    font-size: 0.85rem;
    color: var(--color-text);
    background: var(--color-accent-soft);
    white-space: nowrap;
  }

  .site-header-compact .nav-credits:hover {
    text-decoration: none;
  }

  .product-nav .nav-item {
    padding: 0.75rem 0.85rem;
  }

  /* The brand name gives way before the balance and the menu do. */
  .site-header--signed-in .brand {
    min-width: 0;
    white-space: nowrap;
  }
}

@media (max-width: 22rem) {
  .site-header--signed-in .brand {
    font-size: 0;
    gap: 0;
  }
}

.link-button {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

.link-button:hover {
  color: var(--color-text);
  text-decoration: underline;
}

/* A text-link button that destroys something (UI-26). */
.link-button-danger {
  color: var(--color-danger);
}

.link-button-danger:hover {
  color: var(--color-danger);
}

.site-main {
  flex: 1;
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding: 1.5rem 2rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.footer-brand {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--color-text);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

.footer-nav a {
  color: var(--color-text-muted);
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 10;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  background: var(--color-text);
  color: var(--color-bg);
}

.skip-link:focus {
  top: 1rem;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

h1,
h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* --- Error pages --- */

.error-page {
  text-align: center;
  padding: 3rem 1rem;
}

.error-page .error-code {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--color-text-muted);
  letter-spacing: 0.1em;
  margin: 0 0 0.5rem;
}

.error-page h1 {
  margin: 0 0 1rem;
  font-size: 1.75rem;
}

.error-page p {
  color: var(--color-text-muted);
}

.error-page .request-id {
  margin-top: 2rem;
  font-size: 0.85rem;
}

.error-page .request-id code {
  font-family: var(--font-mono);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.25rem;
  padding: 0.15rem 0.4rem;
  color: var(--color-text);
}

/* --- Forms (used from Phase 3 onward) --- */

.form-field {
  margin-bottom: 1rem;
}

.form-field label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

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

.form-field label.radio-option,
.form-fieldset label.radio-option {
  display: block;
  font-size: 0.95rem;
  color: var(--color-text);
  font-weight: 400;
  margin-bottom: 0.4rem;
}

.radio-option input[type="radio"] {
  width: auto;
  margin-right: 0.4rem;
}

/* Checkboxes, radios and range sliders take the accent colour instead of
   the browser's blue (UI-10). */
:root {
  accent-color: var(--color-accent);
}

/* UI-10: every text-like input shares one look. Number, date and time
   inputs used to be browser defaults beside styled text inputs -- small,
   square, a different border -- which is most of Gym Tracker. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="search"],
input[type="url"],
input[type="tel"],
select,
textarea {
  width: 100%;
  min-height: 2.5rem;
  padding: 0.5rem 0.65rem;
  background: var(--color-surface);
  border: 1px solid var(--color-control-border);
  border-radius: 0.25rem;
  color: var(--color-text);
  font: inherit;
  font-size: 0.95rem;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--color-accent);
}

/* A number field inside a table row (Gym Tracker's set rows) is a compact
   cell, not a full-width form field. */
td input[type="number"] {
  width: 6rem;
  min-width: 4.5rem;
}

input[type="checkbox"],
input[type="radio"] {
  width: 1.1rem;
  height: 1.1rem;
}

input[type="file"] {
  max-width: 100%;
  font: inherit;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* The file input's own button looks like .button-secondary. */
input[type="file"]::file-selector-button {
  margin-right: 0.75rem;
  padding: 0.5rem 1rem;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}

input[type="file"]::file-selector-button:hover {
  border-color: var(--color-text);
}

input[type="file"]:focus-visible::file-selector-button {
  border-color: var(--color-accent);
}

button,
.button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 1.15rem;
  background: var(--color-accent);
  color: var(--color-on-accent);
  border: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
}

/* Hover darkens: on the teal fill a lighter hover failed AA (3.26:1 in light). */
button:hover,
.button:hover {
  filter: brightness(0.88);
}

/* Platform-wide on purpose: a disabled button must read as disabled on
   every product, not only the one whose stylesheet happened to ship the
   rule first (it arrived with showcase and was left global by accident;
   it lives here now so the intent is explicit). */
button:disabled,
.button:disabled {
  opacity: 0.5;
  cursor: default;
}

button:disabled:hover,
.button:disabled:hover {
  filter: none;
}

.button-secondary {
  background: var(--color-surface-2);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  margin-left: 0.5rem;
}

.button-secondary:hover {
  border-color: var(--color-text);
  filter: none;
}

.flash-messages {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

.flash-messages li {
  padding: 0.75rem 1rem;
  border-radius: 0.6rem;
  margin-bottom: 0.5rem;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

.flash-error {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.flash-success {
  border-color: var(--color-success);
  color: var(--color-success);
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group > label {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

.mode-toggle {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.75rem;
}

.mode-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1rem;
  border: 2px solid var(--color-border);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--color-surface);
}

.mode-option:hover {
  border-color: var(--color-text-muted);
  background: var(--color-bg);
}

.mode-option input[type="radio"] {
  margin-bottom: 0.5rem;
  cursor: pointer;
}

.mode-option input[type="radio"]:checked ~ .mode-label {
  font-weight: 600;
  color: var(--color-text);
}

.mode-option input[type="radio"]:checked ~ .mode-desc {
  color: var(--color-link);
}

.mode-option input[type="radio"]:checked {
  accent-color: var(--color-accent);
}

.mode-label {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 0.25rem;
}

.mode-desc {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* --- Badges (used from Phase 4 onward: product access, run status) --- */

.badge {
  display: inline-block;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  background: var(--color-surface);
}

.badge-access {
  border-color: var(--color-success);
  color: var(--color-success);
}

.badge-no-access {
  color: var(--color-text-muted);
}

/* --- Dashboard, usage and admin tables (Phase 8) --- */

/* --- Improved Dashboard --- */

.dashboard-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: 0.5rem;
}

.header-content h1 {
  margin: 0 0 0.5rem;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.header-subtitle {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 1.05rem;
}

.header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.header-actions .button {
  white-space: nowrap;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1.5rem;
}

.dashboard-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

.dashboard-card-full {
  grid-column: 1 / -1;
}

.card-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.card-header h2 {
  margin: 0;
  font-size: 1.1rem;
}

.card-link {
  color: var(--color-link);
  font-size: 0.9rem;
  font-weight: 500;
}

.card-link:hover {
  text-decoration: underline;
}

/* --- Credits Card --- */

.dashboard-card-credits {
  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg) 100%);
}

.credits-display {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-border);
}

.credit-stat {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.credit-label {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

.credit-value {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.credit-value-secondary {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.credits-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.credits-actions .button-secondary {
  flex: 1;
  min-width: 140px;
  text-align: center;
  font-size: 0.9rem;
}

/* --- Products Card --- */

.products-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.product-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: var(--color-bg);
  border-radius: 0.5rem;
  border: 1px solid var(--color-border);
  transition: all 0.2s ease;
}

.product-item:hover {
  border-color: var(--color-link);
  background: var(--color-surface);
}

.product-name {
  font-weight: 500;
  color: var(--color-text);
}

.product-action {
  color: var(--color-link);
  font-size: 0.9rem;
  font-weight: 500;
}

.product-action:hover {
  text-decoration: underline;
}

.empty-message {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin: 0;
  padding: 1rem;
  text-align: center;
}

.empty-message a {
  color: var(--color-link);
  font-weight: 500;
}

/* --- Stats Card --- */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}

.stat-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.stat-label {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

/* --- Runs Table --- */

.runs-table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: 0.6rem;
  background: var(--color-bg);
}

.runs-table {
  width: 100%;
  border-collapse: collapse;
}

.runs-table th {
  background: var(--color-surface);
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 2px solid var(--color-border);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  position: sticky;
  top: 0;
  z-index: 1;
}

.runs-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9rem;
}

.runs-table tbody tr:hover {
  background: var(--color-bg);
}

.runs-table tbody tr:last-child td {
  border-bottom: none;
}

.run-id-link {
  color: var(--color-link);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  word-break: break-all;
}

.run-id-link:hover {
  text-decoration: underline;
}

.run-date {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

/* --- Empty State --- */

/* UI-11: a new account's first steps, one per product, each priced. */
.first-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.first-step {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--color-border);
  border-radius: 0.6rem;
  background: var(--color-bg);
}

.first-step__product {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
}

.first-step__action {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-text);
}

a.first-step__action {
  color: var(--color-link);
}

.first-step__detail {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.first-step__price {
  margin-top: auto;
  padding-top: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-accent);
}

.first-step__access {
  font-size: 0.85rem;
}

.low-balance {
  margin: 0 0 1.5rem;
}

.low-balance p {
  margin: 0;
}

.empty-state-large {
  text-align: center;
  padding: 3rem 2rem;
  color: var(--color-text-muted);
}

.empty-state-large h3 {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
  color: var(--color-text);
}

.empty-state-large p {
  margin: 0 0 1.5rem;
  font-size: 0.95rem;
}

.empty-state-large .button {
  margin-top: 0.5rem;
}

@media (max-width: 60rem) {
  .dashboard-header {
    flex-direction: column;
  }

  .header-content h1 {
    font-size: 1.5rem;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .credits-display {
    grid-template-columns: 1fr;
  }

  .credit-value {
    font-size: 1.5rem;
  }
}

.dashboard section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.dashboard section h2 {
  margin-top: 0;
}

.dashboard-products ul,
.dashboard-runs ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dashboard-products li,
.dashboard-runs li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--color-border);
}

.dashboard-products li:last-child,
.dashboard-runs li:last-child {
  border-bottom: none;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  text-align: left;
  padding: 0.6rem 0.65rem;
  border-bottom: 1px solid var(--color-border);
}

th {
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 0.85rem;
}

dl {
  margin: 0;
}

dt {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin-top: 0.75rem;
}

dd {
  margin: 0;
}

.run-state {
  color: var(--color-text-muted);
}

.run-result {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.run-result-field {
  border: 1px solid var(--color-border);
  border-radius: 0.6rem;
  background: var(--color-surface);
  padding: 1rem 1.25rem;
}

.run-result-question {
  margin-bottom: 1.5rem;
}

.run-result-key {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}

.run-result-value {
  white-space: pre-wrap;
  word-break: break-word;
}

.run-result-code {
  margin: 0;
  padding: 0.75rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}

.error {
  color: var(--color-danger);
}

/* --- Storage usage bar ---
   A native <progress> element, not a div with an inline `width: X%`.
   The production CSP (infra/Caddyfile) is `style-src 'self' 'unsafe-inline'`,
   and the 'unsafe-inline' is there for Razorpay's checkout.js, which creates
   a <style> element and sets a style attribute for its loading spinner
   (PL-7, read from the bundle). It is not an allowance for this app's own
   markup: keep styling in this file, so the allowance can be withdrawn the
   day the widget stops needing it. <progress> needs no inline style at all;
   its fill is drawn by the browser from value/max, and only the
   pseudo-elements below need real stylesheet rules. */

.storage-usage {
  margin-bottom: 1.5rem;
}

.storage-usage-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: 0.4rem;
}

.storage-usage-bar {
  width: 100%;
  height: 0.6rem;
  border: none;
  border-radius: 999px;
  overflow: hidden;
}

.storage-usage-bar::-webkit-progress-bar {
  background: var(--color-border);
  border-radius: 999px;
}

.storage-usage-bar::-webkit-progress-value {
  background: var(--color-text);
  border-radius: 999px;
}

.storage-usage-bar::-moz-progress-bar {
  background: var(--color-text);
  border-radius: 999px;
}

.storage-usage-bar-full::-webkit-progress-value {
  background: var(--color-danger);
}

.storage-usage-bar-full::-moz-progress-bar {
  background: var(--color-danger);
}

/* --- Storage Plan Page --- */

.storage-plan-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.storage-plan-container h1 {
  margin-bottom: 1.5rem;
  font-size: 1.8rem;
  color: var(--color-text);
}

/* Alert Section */

.alert {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-left: 4px solid;
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.alert h2 {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  color: var(--color-text);
}

.alert p {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  color: var(--color-text-muted);
}

.alert-danger {
  border-left-color: var(--color-danger);
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-danger) 5%, transparent), transparent);
}

.alert-info {
  border-left-color: var(--color-link);
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-link) 5%, transparent), transparent);
}

.button-small {
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
}

/* Storage Card */

.storage-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  padding: 2rem;
  margin-bottom: 2rem;
}

.storage-card h2 {
  margin: 0 0 1.5rem;
  font-size: 1.15rem;
  color: var(--color-text);
}

/* UI-8: the storage purchase confirmation (storage_plan_confirm.html). */
.quote-list {
  margin: 0 0 1rem;
}

.quote-row {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) 1fr;
  gap: 0.25rem 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--color-border);
}

.quote-row dt {
  color: var(--color-text-muted);
}

.quote-row dd {
  margin: 0;
}

.quote-row-total dd {
  font-size: 1.15rem;
}

.quote-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

@media (max-width: 40rem) {
  .quote-row {
    grid-template-columns: 1fr;
  }

  .storage-card {
    padding: 1.25rem;
  }
}

.usage-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.usage-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  background: var(--color-bg);
  border-radius: 0.5rem;
  text-align: center;
}

.usage-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.usage-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

/* Usage Bar */

.usage-bar-container {
  margin-bottom: 1.5rem;
}

.storage-usage-bar {
  width: 100%;
  height: 0.8rem;
  margin-bottom: 0.5rem;
}

.usage-percentage {
  text-align: right;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* Storage Breakdown */

.storage-breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}

.breakdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  background: var(--color-bg);
  border-radius: 0.5rem;
}

.breakdown-label {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.breakdown-value {
  font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

/* Actions Grid */

.storage-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.action-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  padding: 2rem;
}

.action-card h2 {
  margin: 0 0 1rem;
  font-size: 1.1rem;
  color: var(--color-text);
}

.pricing-info {
  margin: 0 0 1.5rem;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.info-text {
  margin: 0 0 1.5rem;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--color-text);
}

.input-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.input-group input {
  flex: 1;
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  font-size: 0.9rem;
}

.input-unit {
  font-weight: 600;
  color: var(--color-text-muted);
  padding: 0.75rem 0.5rem;
}

.form-hint {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.action-card .button {
  width: 100%;
}

.button-primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.button-primary:hover {
  filter: brightness(0.88);
}

.button-secondary {
  background: var(--color-surface-2);
  color: var(--color-text);
  border: 1.5px solid var(--color-border);
}

.button-secondary:hover {
  border-color: var(--color-text);
  filter: none;
}

/* Help Section */

.storage-help {
  text-align: center;
  padding: 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
}

.storage-help p {
  margin: 0;
}

.link-primary {
  color: var(--color-link);
  font-weight: 600;
}

.link-primary:hover {
  text-decoration: underline;
}

/* --- Auth pages (login/register/verify/forgot/reset) --- */

.auth-page {
  display: flex;
  justify-content: center;
  padding: 2rem 0;
}

.auth-card {
  width: 100%;
  max-width: 26rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  padding: 2rem;
}

.auth-card h1 {
  margin-top: 0;
}

.auth-card .form-field {
  margin-bottom: 1.1rem;
}

.auth-card button[type="submit"] {
  width: 100%;
  justify-content: center;
}

.auth-links {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin: 0.75rem 0 0;
}

/* Federated sign-in (auth/_federated_buttons.html). Apple's button is the
   inverse of the page, black in light and white in dark (Apple's HIG allows
   both); Google's is the surface with a control border (Google's "neutral"
   style). Same size, Apple first. */
.federated-sign-in {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0 0 1rem;
}

.federated-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding: 0.55rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--color-control-border);
  font-weight: 600;
  text-decoration: none;
}

.federated-button-apple {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-surface);
}

.federated-button-google {
  background: var(--color-surface);
  color: var(--color-text);
}

.federated-button:hover,
.federated-button:focus-visible {
  text-decoration: none;
  filter: brightness(1.08);
}

.federated-mark {
  flex: none;
}

.federated-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.4rem 0 0;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.federated-divider::before,
.federated-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--color-border);
}

.auth-hint {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin: -0.5rem 0 1.25rem;
}

.password-field {
  position: relative;
}

.password-field input[type="password"],
.password-field input[type="text"] {
  padding-right: 3.25rem;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 0.4rem;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0.3rem 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: 0.25rem;
}

.password-toggle:hover,
.password-toggle:focus-visible {
  color: var(--color-text);
}

.password-strength {
  list-style: none;
  margin: -0.4rem 0 1.1rem;
  padding: 0;
  font-size: 0.82rem;
}

.password-strength li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-text-muted);
  padding: 0.1rem 0;
}

.password-strength li::before {
  content: "\2717";
  color: var(--color-danger);
  font-weight: 700;
  width: 1em;
}

.password-strength li.met {
  color: var(--color-text);
}

.password-strength li.met::before {
  content: "\2713";
  color: var(--color-success);
}

/* --- Profile Page (Redesigned) --- */

.profile-container {
  max-width: 100%;
}

.profile-container h1 {
  margin-bottom: 2rem;
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.profile-card {
  background: var(--color-surface);
  border: 0;
  border-top: 1px solid var(--color-highlight);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}

/* A card title is the app's headline: system sans, 17 / 600. */
.profile-card h2 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 600;
}

.profile-card-full {
  grid-column: 1 / -1;
}

.profile-info {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-border);
}

.info-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.info-label {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  font-weight: 500;
}

.info-value {
  color: var(--color-text);
  font-weight: 500;
  word-break: break-word;
  text-align: right;
  max-width: 50%;
}

.profile-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.profile-links li a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-link);
  padding: 0.5rem 0;
  font-size: 0.95rem;
}

.profile-links li a:hover {
  text-decoration: underline;
}

.profile-form {
  max-width: 100%;
}

.form-fields-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.profile-form .form-field {
  margin-bottom: 0;
}

/* The profile card holds two forms (the username has its own route). */
.profile-form + .profile-form {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

.profile-form .hint {
  margin-top: 0.35rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* A hint under a table, outside any form (the RPE sentence under a
   workout's sets). */
.profile-card > .hint {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* The variants are excluded: at (0,2,1) this rule used to beat every
   one of them, so a quiet Filter button and a red Delete inside a
   profile-form both rendered as the ink primary (UI-9/UI-26). */
.profile-form .button:not(.button-secondary, .button-quiet, .button-danger, .button-danger-quiet),
.profile-form
  button[type="submit"]:not(.button-secondary, .button-quiet, .button-danger, .button-danger-quiet) {
  background: var(--color-text);
  color: var(--color-bg);
  border: none;
  border-radius: 999px;
  padding: 0.55rem 1.15rem;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.profile-form .button:not(.button-secondary, .button-quiet, .button-danger, .button-danger-quiet):hover,
.profile-form
  button[type="submit"]:not(
    .button-secondary,
    .button-quiet,
    .button-danger,
    .button-danger-quiet
  ):hover {
  filter: brightness(1.3);
}

.usage-table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: 0.6rem;
  background: var(--color-bg);
}

.usage-table {
  width: 100%;
  border-collapse: collapse;
}

.usage-table th {
  background: var(--color-surface);
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 2px solid var(--color-border);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.usage-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
}

.usage-table tbody tr:hover {
  background: var(--color-bg);
}

.usage-table tbody tr:last-child td {
  border-bottom: none;
}

.run-link {
  color: var(--color-link);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  word-break: break-all;
}

.run-link:hover {
  text-decoration: underline;
}

.status-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: capitalize;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.status-queued {
  border-color: var(--color-busy);
  color: var(--color-busy-text);
}

.status-running {
  border-color: var(--color-running);
  color: var(--color-running);
}

.status-succeeded,
.status-ready {
  border-color: var(--color-success);
  color: var(--color-success);
}

.status-failed {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.credit-amount {
  font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.empty-state {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--color-text-muted);
}

.empty-state a {
  color: var(--color-link);
}

/* --- Credits Page --- */

.credits-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.credits-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.credit-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  padding: 1.5rem;
  text-align: center;
  transition: all 0.2s ease;
}

.credit-card:hover {
  border-color: var(--color-text-muted);
  box-shadow: 0 2px 8px rgb(var(--color-shadow) / 0.08);
}

.credit-card h3 {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.credit-card .credit-amount {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0.5rem 0;
  font-variant-numeric: tabular-nums;
}

.credit-card .credit-label {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.credit-card.held {
  border-left: 4px solid var(--color-hold);
}

.credit-card.available {
  border-left: 4px solid var(--color-accent);
}

/* Action Cards */

.credits-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.action-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  padding: 2rem;
}

.action-card h2 {
  margin: 0 0 1.5rem;
  font-size: 1.1rem;
  color: var(--color-text);
}

.action-card .form-group {
  margin-bottom: 1rem;
}

.action-card .form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--color-text);
}

.action-card .form-group input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  font-size: 0.9rem;
}

.action-card .form-group small {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

#calculated-inr {
  display: block;
  margin-top: 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.calculated-amount {
  display: block;
  padding: 0.75rem;
  background: var(--color-bg);
  border: 2px solid var(--color-accent);
  border-radius: 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.action-card .button {
  width: 100%;
}

/* History Section */

.history-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  padding: 2rem;
}

.history-section h2 {
  margin: 0 0 1.5rem;
  font-size: 1.1rem;
  color: var(--color-text);
}

.history-table-wrapper {
  overflow-x: auto;
  margin-bottom: 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--color-border);
}

.history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.history-table thead {
  background: var(--color-bg);
  border-bottom: 2px solid var(--color-border);
  position: sticky;
  top: 0;
}

.history-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.history-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
}

.history-table tbody tr:last-child td {
  border-bottom: none;
}

.history-table tbody tr:hover {
  background: var(--color-bg);
}

.history-table .date {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.history-table .type {
  font-weight: 500;
}

.history-table .amount {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.history-table .balance {
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.history-table .reason {
  color: var(--color-text-muted);
  max-width: 200px;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* Transaction Type Badges */

.badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge-grant {
  background: color-mix(in srgb, var(--color-success) 10%, transparent);
  color: var(--color-success);
}

.badge-hold {
  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
  color: var(--color-danger);
}

.badge-capture {
  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
  color: var(--color-danger);
}

.badge-release {
  background: color-mix(in srgb, var(--color-success) 10%, transparent);
  color: var(--color-success);
}

.badge-refund {
  background: color-mix(in srgb, var(--color-success) 10%, transparent);
  color: var(--color-success);
}

.badge-adjust {
  background: var(--color-hold-soft);
  color: var(--color-hold);
}

/* UI-23: ledger rows in plain words. Teal for money in and money back,
   amber for money set aside, ink for a charge -- the landing receipt's
   colours. Red is for destruction, not for spending. */
.ledger-label {
  display: inline-block;
  margin-right: 0.4rem;
  font-weight: 600;
}

.ledger-label--added,
.ledger-label--returned {
  color: var(--color-accent);
}

.ledger-label--held {
  color: var(--color-hold);
}

.ledger-label--charged {
  color: var(--color-text);
}

.ledger-what {
  color: var(--color-text);
}

.ledger-run {
  display: inline-block;
  margin-left: 0.4rem;
  font-size: 0.85rem;
}

.history-table .amount {
  white-space: nowrap;
}

.history-table .reference {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.history-table .reference code {
  font-size: 0.75rem;
}

.ledger-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- Public pricing page (PL-IDEA-7) --- */

.pricing-page {
  max-width: 48rem;
}

.pricing-lede,
.pricing-signup {
  font-size: 1.05rem;
}

.pricing-how ol {
  padding-left: 1.25rem;
}

.pricing-section {
  margin-top: 2rem;
}

.pricing-lines {
  margin: 0;
}

.pricing-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.25rem 1.5rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-border);
}

.pricing-line dt {
  margin: 0;
  color: var(--color-text);
  font-size: 1rem;
}

.pricing-line dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.pricing-credits {
  font-weight: 700;
}

.pricing-rupees {
  color: var(--color-text-muted);
  margin-left: 0.35rem;
}

.pricing-note {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin-top: 0.2rem;
}

.pricing-footnote {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin-top: 2rem;
}

.pricing-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

@media (max-width: 40rem) {
  .pricing-line {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Pagination */

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.pagination a {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--color-text);
  color: var(--color-bg);
  border-radius: 0.25rem;
  font-weight: 600;
  font-size: 0.9rem;
  transition: filter 0.2s ease;
}

.pagination a:hover {
  filter: brightness(1.2);
  text-decoration: none;
}

.pagination .page-info {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* PL-IDEA-11: usage insights on /account/usage (credits charged by month). */
.usage-insights {
  margin-bottom: 2rem;
}

.usage-insights-wrapper {
  overflow-x: auto;
}

.usage-insights-table th[scope="row"] {
  font-weight: 600;
  color: var(--color-text);
  font-size: 0.9rem;
  white-space: nowrap;
}

.usage-insights-table th[data-month],
.usage-insights-table td {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.usage-insights-table tfoot th,
.usage-insights-table tfoot td {
  border-bottom: none;
}

.usage-insights-table tr[data-spend-total] td {
  font-weight: 700;
}

/* --- Product Header and Navigation --- */

.product-header {
  margin-bottom: 2rem;
}

.product-header h1 {
  margin-bottom: 1rem;
  font-family: var(--font-sans);
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.2;
}

/* The tab bar is the app's: Today, Meals, Workouts, Progress and More, in
   that order on every page. The rest of the product (Routines, Exercises,
   Measurements, Targets, Plan, trainers) is inside More, a plain <details>,
   so there is nothing to scroll and no script. The active tab is marked in
   place (aria-current), never moved. */
.product-nav {
  display: flex;
  gap: 0;
  position: relative;
  border-bottom: 1px solid var(--color-border);
}

.product-nav .nav-item,
.product-nav .nav-more > summary {
  display: inline-block;
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 0.75rem 1.25rem;
  border-bottom: 2px solid transparent;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  cursor: pointer;
  list-style: none;
}

.product-nav .nav-more > summary::-webkit-details-marker {
  display: none;
}

.product-nav .nav-more > summary::after {
  content: " \25BE";
}

.product-nav .nav-item:hover,
.product-nav .nav-more > summary:hover {
  color: var(--color-text);
  text-decoration: none;
}

.product-nav .nav-item.active,
.product-nav .nav-item[aria-current],
.product-nav .nav-more.active > summary {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
  font-weight: 600;
}

.product-nav .nav-more {
  flex: 0 0 auto;
  position: relative;
}

/* The panel opens over the page under the bar, as a list of 44 px rows. */
.product-nav .nav-more-panel {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 20;
  min-width: 12rem;
  display: flex;
  flex-direction: column;
  padding: 0.25rem;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.product-nav .nav-more-panel .nav-item {
  flex: none;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  border-bottom: 0;
  border-radius: var(--radius-sm);
}

/* --- Multiple File Upload --- */

.upload-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.upload-section h2 {
  margin-top: 0;
}

#file-info {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 0.6rem;
  padding: 1rem;
  margin: 1rem 0;
}

.file-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 1rem;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: 0.4rem;
  background: var(--color-surface);
}

.file-list li {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.file-list li:last-child {
  border-bottom: none;
}

.file-total-size,
.storage-available {
  margin: 0.5rem 0;
  font-size: 0.9rem;
}

.file-total-size span,
.storage-available span {
  color: var(--color-text);
  font-weight: 500;
}

.storage-warning {
  padding: 0.75rem 1rem;
  border-radius: 0.4rem;
  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-danger) 30%, transparent);
  color: var(--color-danger);
  margin: 0.75rem 0;
  font-size: 0.9rem;
}

#upload-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#upload-btn:disabled:hover {
  filter: none;
}

/* --- Postgres Data / Datasets (Postgres Data page) --- */

.postgres-data-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.storage-files-section,
.ingested-datasets-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  padding: 1.5rem;
}

.storage-files-section h2,
.ingested-datasets-section h2 {
  margin-top: 0;
  margin-bottom: 1rem;
}

.storage-files-table-wrapper,
.datasets-table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: 0.6rem;
  background: var(--color-bg);
}

.storage-files-table,
.datasets-table {
  width: 100%;
  border-collapse: collapse;
}

.storage-files-table th,
.datasets-table th {
  background: var(--color-surface);
  position: sticky;
  top: 0;
  z-index: 1;
}

.badge-coming-soon {
  border-color: var(--color-accent);
  background: var(--color-hold-soft);
  color: var(--color-hold);
}

/* ==========================================================================
   SHOWCASE PRODUCT (app/products/showcase) -- merged in from the standalone
   aw_showcase repo's own main.css. Everything below is namespaced
   (`project__*`, `panel__*`, `rows__*`, `chat__*`, `version-row__*`,
   `status-pill`, `notice`, `dot`, `empty`, `assets__upload`,
   `publishing__live`, `visually-hidden`) so it cannot collide with the
   platform rules above; the platform's own `.button-small` and
   `.badge-access` are reused rather than redefined. Note the app's CSP is
   `style-src 'self' 'unsafe-inline'` (infra/Caddyfile); the 'unsafe-inline'
   exists for Razorpay's widget, not for these pages, so every rule these
   pages need lives here rather than in style attributes (PL-7). Every rule
   below is namespaced; the
   one global rule showcase brought (`button:disabled`) now lives with the
   platform's own button rules above.
   ========================================================================== */

/* --- Project detail page --- */

.project__back {
  display: inline-block;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  text-decoration: none;
}

.project__back:hover {
  color: var(--color-text);
}

.project__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-border);
}

.project__title {
  margin: 0 0 0.5rem;
  font-size: 1.75rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.project__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
}

.project__slug {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.project__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* `.button-secondary` carries a left margin for its original inline use;
   these rows do their own spacing with `gap`. */
.project__actions .button-secondary,
.panel__actions .button-secondary {
  margin-left: 0;
}

.status-pill {
  display: inline-block;
  padding: 0.15rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
}

.status-pill--good {
  border-color: var(--color-success);
  color: var(--color-success);
}

.status-pill--bad {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.status-pill--info {
  border-color: var(--color-link);
  color: var(--color-link);
}

.status-pill--busy {
  border-color: var(--color-busy);
  color: var(--color-busy-text);
  background: var(--color-busy-soft);
}

/* --- Attention banner --- */

.notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 1.25rem 0 0;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--color-border);
  border-left-width: 3px;
  border-radius: 0.4rem;
  background: var(--color-surface);
  font-size: 0.9rem;
}

.notice--busy {
  border-left-color: var(--color-busy);
}

/* A flex item's minimum width is its content's, so one unbroken token -- a
   long URL in a publish warning -- pushed the text past the banner's edge.
   Let the text column shrink, and break such tokens anywhere. */
.notice > div {
  min-width: 0;
}

.publish-warnings {
  overflow-wrap: anywhere;
}

.notice--bad {
  border-left-color: var(--color-danger);
}

.notice__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.notice__detail {
  display: block;
  margin-top: 0.15rem;
  color: var(--color-text-muted);
}

/* --- Two-column body --- */

.project__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 1.25rem;
  margin-top: 1.5rem;
  align-items: start;
}

.project__col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

@media (max-width: 60rem) {
  .project__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Panels --- */

.panel {
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  background: var(--color-surface);
}

.panel__head {
  margin-bottom: 0.9rem;
}

.panel__head h2 {
  margin: 0;
  font-size: 1rem;
  letter-spacing: 0.01em;
}

.panel__subhead {
  margin: 1.25rem 0 0.5rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.panel__hint {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

.panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.empty {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* --- Compact list rows (versions, publications, assets) --- */

.rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rows__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9rem;
}

.rows__item:last-child {
  border-bottom: none;
}

.rows__label {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.rows__sub {
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

/* --- Chat --- */

.chat__log {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.chat__log:empty {
  margin: 0;
}

.chat__message {
  padding: 0.65rem 0.85rem;
  border-radius: 0.45rem;
  font-size: 0.92rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

.chat__message--user {
  border-color: var(--color-text);
}

.chat__message--used {
  border-color: var(--color-border);
}

.chat__tag {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  white-space: normal;
}

.chat__tag--bad {
  color: var(--color-danger);
}

.chat__outcome {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  padding: 0 0.85rem;
  overflow-wrap: anywhere;
}

.chat__send {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.6rem;
}

.chat__cta {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

/* --- Assets upload --- */

.assets__upload {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.assets__upload input[type="file"] {
  flex: 1;
  min-width: 0;
  font-size: 0.82rem;
}

/* --- Quiet button variant ---
   `.button-small` is already defined earlier (platform rules); reused
   as-is rather than redefined here, so there is one definition of it in
   the file. */

/* UI-9: quiet is NEUTRAL. It used to be red, so Gym Tracker's Previous,
   Today, Next, Save, Filter and "Finish workout" all read as destructive.
   Red is reserved for the danger variants below, and only for actions that
   destroy or take something away (tests/unit/test_button_semantics.py). */
.button-quiet {
  background: var(--color-surface-2);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.button-quiet:hover {
  border-color: var(--color-text);
  filter: none;
}

/* UI-26: a destructive action that is the point of its page or form
   ("Delete project", "Request deletion"): white on red. */
.button-danger {
  background: var(--color-danger);
  color: var(--color-on-danger);
  border: 1px solid var(--color-danger);
}

.button-danger:hover {
  filter: brightness(0.9);
}

/* A destructive action in a row or beside other actions (Delete a set,
   Remove an asset, Unpublish): quiet, but red. */
.button-danger-quiet {
  background: var(--color-surface);
  color: var(--color-danger);
  border: 1px solid var(--color-border);
}

.button-danger-quiet:hover {
  border-color: var(--color-danger);
  filter: none;
}

.button-danger:focus-visible,
.button-danger-quiet:focus-visible,
.link-button-danger:focus-visible {
  outline-color: var(--color-danger);
}

.dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  margin-right: 0.15rem;
  background: var(--color-text-muted);
}

.dot--good {
  background: var(--color-success);
}

.publishing__live {
  margin: 0;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Version rows: inline rename / remove --- */

.version-row__name {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.version-row__edit {
  flex: none;
}

.version-row__toggle {
  list-style: none;
  cursor: pointer;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  user-select: none;
}

.version-row__toggle::-webkit-details-marker {
  display: none;
}

.version-row__toggle:hover {
  border-color: var(--color-text);
  color: var(--color-text);
}

.version-row__edit[open] .version-row__toggle {
  border-color: var(--color-text);
  color: var(--color-text);
}

/* The open panel spans the full row rather than squeezing beside it. */
.version-row {
  flex-wrap: wrap;
}

/* ...and is as wide as the row, no wider: `flex: none` sized the open
   <details> to its content on one line, so at 390px the panel ran 30-200px
   past the screen (measured 2026-10-10, SC-IDEA-3's restore button made it
   worse). Full basis plus `min-width: 0` lets the forms inside wrap. */
.version-row__edit[open] {
  flex: 1 1 100%;
  min-width: 0;
}

.version-row__edit[open] > .version-row__toggle {
  width: fit-content;
  margin-left: auto;
}

.version-row__panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--color-border);
}

.version-row__panel form {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}

.version-row__panel form:first-child {
  flex: 1;
  min-width: 12rem;
}

.version-row__panel input[type="text"] {
  flex: 1;
  min-width: 0;
  padding: 0.3rem 0.55rem;
  font-size: 0.82rem;
}

.version-row__panel .panel__hint {
  margin: 0;
}

/* --- Showcase dashboard ---
   Reuses the platform's `dashboard-card` / `card-header` / `stats-grid`
   shells so it reads as the same product as the account dashboard; the
   rest is namespaced `showcase-dash__*`. */

.showcase-dash {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.showcase-dash__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 2rem;
}

.showcase-dash__title {
  margin: 0 0 0.35rem;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.showcase-dash__subtitle {
  margin: 0;
  color: var(--color-text-muted);
}

.showcase-dash__subtitle code {
  font-size: 0.9em;
}

.showcase-dash__balance {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
  padding: 0.75rem 1.1rem;
  border: 1px solid var(--color-border);
  border-radius: 0.9rem;
  background: var(--color-surface);
  text-decoration: none;
  color: inherit;
}

.showcase-dash__balance:hover {
  border-color: var(--color-link);
}

.showcase-dash__balance-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.showcase-dash__balance-value {
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.showcase-dash__grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(20rem, 2fr);
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 60rem) {
  .showcase-dash__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.showcase-dash__count {
  min-width: 1.75rem;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  color: var(--color-text-muted);
}

.showcase-dash__create {
  display: flex;
  gap: 0.5rem;
  margin: 0;
}

.showcase-dash__create input[type="text"] {
  flex: 1;
  min-width: 0;
}

.showcase-dash__create button {
  white-space: nowrap;
}

.showcase-dash__projects .panel__hint {
  margin: 0.5rem 0 1.25rem;
}

.showcase-dash__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.showcase-dash__item-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  background: var(--color-bg);
  color: inherit;
  text-decoration: none;
}

.showcase-dash__item-link:hover {
  border-color: var(--color-link);
}

.showcase-dash__item-name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.showcase-dash__item-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.showcase-dash__item-date {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.showcase-dash__pricing .panel__hint {
  margin: 0 0 1.25rem;
}

.showcase-dash__headline {
  margin-bottom: 1.25rem;
}

.showcase-dash__headline .stat-item {
  border-bottom: none;
  padding-bottom: 0;
  gap: 0.15rem;
}

.showcase-dash__unit {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.showcase-dash__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.showcase-dash__table td {
  padding: 0.45rem 0;
  border-top: 1px solid var(--color-border);
  vertical-align: top;
}

.showcase-dash__table td:last-child {
  text-align: right;
  white-space: nowrap;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding-left: 1rem;
}

.showcase-dash__table-group th {
  padding: 1rem 0 0.35rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.showcase-dash__table-group:first-child th {
  padding-top: 0;
}

@media (max-width: 40rem) {
  .showcase-dash__headline {
    grid-template-columns: 1fr;
  }

  .showcase-dash__create {
    flex-direction: column;
  }
}

/* ==========================================================================
   Landing page, product catalogue, tags (workspace review 2026-09-29)

   The landing page used to be its own light theme with its own tokens;
   it now uses the site's. Its one memorable element is the receipt: the
   thing that distinguishes this product is that a job's cost is held,
   charged and returned, so that is what the hero shows. Everything else
   stays quiet. The products are ruled rows, not identical cards, and the
   three credit steps are numbered because they really are a sequence.
   ========================================================================== */

body.landing-page .site-main {
  max-width: none;
  padding: 0;
}

.lp-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  max-width: 72rem;
  width: 100%;
  margin: 0 auto;
  padding: 1.25rem 2rem;
}

.lp-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-text);
}

.lp-brand:hover {
  text-decoration: none;
}

.lp-nav {
  display: flex;
  gap: 1.5rem;
  margin-left: 1.5rem;
  font-size: 0.95rem;
}

.lp-nav a,
.lp-link {
  color: var(--color-text-muted);
}

.lp-nav a:hover,
.lp-link:hover {
  color: var(--color-text);
}

.lp-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-left: auto;
  font-size: 0.95rem;
}

.button-large {
  padding: 0.8rem 1.5rem;
  font-size: 1rem;
}

.lp-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 4rem;
  align-items: center;
  max-width: 72rem;
  margin: 0 auto;
  padding: 4.5rem 2rem 5rem;
}

.lp-hero h1 {
  margin: 0 0 1.25rem;
  font-size: clamp(2.4rem, 5.2vw, 3.9rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.lp-lede {
  margin: 0;
  max-width: 34rem;
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.lp-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-top: 2rem;
}

.lp-note {
  margin: 1rem 0 0;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* The receipt: a printed slip, so the numbers get tabular figures and a
   dashed tear between the question and the lines. */
.receipt {
  margin: 0;
  padding: 1.75rem 1.75rem 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  box-shadow: 0 18px 40px -24px rgb(var(--color-shadow) / 0.35);
  transform: rotate(1.2deg);
}

.receipt-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.receipt-product {
  font-weight: 700;
  color: var(--color-text);
}

.receipt-question {
  margin: 0.9rem 0 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px dashed var(--color-border);
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.35;
}

.receipt-lines {
  margin: 0;
}

.receipt-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.55rem 0;
}

.receipt-line dt {
  color: var(--color-text-muted);
}

.receipt-line dd {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.receipt-held dd {
  color: var(--color-hold);
}

.receipt-charged dd {
  color: var(--color-text);
}

.receipt-returned {
  margin-top: 0.35rem;
  padding-top: 0.9rem;
  border-top: 2px solid var(--color-text);
}

.receipt-returned dd {
  color: var(--color-accent);
}

.receipt figcaption {
  margin-top: 1.1rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.lp-section {
  max-width: 72rem;
  margin: 0 auto;
  padding: 3.5rem 2rem;
  border-top: 1px solid var(--color-border);
}

.lp-section > h2,
.lp-closing h2 {
  margin: 0 0 2rem;
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
}

/* --- Catalogue rows (landing page and /products) --- */

.catalog {
  list-style: none;
  margin: 0;
  padding: 0;
}

.catalog-row {
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  gap: 2rem;
  padding: 1.75rem 0;
  border-top: 1px solid var(--color-border);
}

.catalog-row:first-child {
  border-top: 2px solid var(--color-text);
}

.catalog-name h2,
.catalog-name h3 {
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
}

.catalog-body {
  max-width: 40rem;
}

.catalog-body > p:first-child {
  margin: 0 0 0.9rem;
  font-size: 1.05rem;
  line-height: 1.6;
}

.catalog-points {
  margin: 0 0 0.9rem;
  padding-left: 1.1rem;
  color: var(--color-text-muted);
}

.catalog-points li + li {
  margin-top: 0.25rem;
}

.catalog-price {
  margin: 0;
  font-size: 0.925rem;
  font-variant-numeric: tabular-nums;
}

.catalog-action {
  margin-top: 1.25rem;
}

.catalog-action p {
  margin: 0;
}

.tag {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.tag-available {
  border-color: transparent;
  background: var(--color-accent-soft);
  color: var(--color-link);
}

.tag-beta {
  border-color: transparent;
  background: var(--color-hold-soft);
  color: var(--color-hold);
}

.page-lede {
  margin: -0.5rem 0 2rem;
  max-width: 44rem;
  color: var(--color-text-muted);
}

.muted {
  color: var(--color-text-muted);
}

/* --- How credits work --- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  counter-increment: step;
  padding-top: 1rem;
  border-top: 2px solid var(--color-text);
}

.steps li:first-child {
  border-top-color: var(--color-hold);
}

.steps li:last-child {
  border-top-color: var(--color-accent);
}

.steps h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
}

.steps h3::before {
  content: counter(step) ". ";
  color: var(--color-text-muted);
  font-weight: 500;
}

.steps p {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.facts {
  margin: 2.5rem 0 0;
  padding: 1.25rem 1.5rem;
  list-style: none;
  background: var(--color-surface);
  border-radius: 8px;
}

.facts li + li {
  margin-top: 0.4rem;
}

.data-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}

.data-grid p {
  margin: 0;
  line-height: 1.65;
}

.lp-closing {
  max-width: 72rem;
  margin: 0 auto;
  padding: 4rem 2rem 5rem;
  border-top: 1px solid var(--color-border);
  text-align: center;
}

.lp-closing h2 {
  margin-bottom: 1.5rem;
}

@media (max-width: 60rem) {
  .lp-nav {
    display: none;
  }

  .lp-hero {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding: 2.5rem 1.25rem 3.5rem;
  }

  .receipt {
    transform: none;
  }

  .lp-header,
  .lp-section,
  .lp-closing {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .catalog-row,
  .steps,
  .data-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .steps,
  .data-grid {
    gap: 1.75rem;
  }
}

@media (max-width: 30rem) {
  .lp-actions .lp-link {
    display: none;
  }
}

/* --- Review 2026-09-29: small fixes on signed-in pages --- */

/* The dashboard's two credit actions: equal buttons, centred text. The old
   markup used `.button-secondary` alone, which has no padding. */
.credits-actions .button {
  justify-content: center;
}

.credits-actions .button-secondary,
.header-actions .button-secondary {
  margin-left: 0;
}

.credit-card h2 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
}

.form-label {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

/* Mode choices: the radio and the name on one line, the description
   under the name, and the whole card marked when it is chosen. */
.mode-toggle .mode-option {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.5rem;
  align-items: start;
  border-width: 1px;
}

.mode-toggle .mode-option input[type="radio"] {
  margin: 0.2rem 0 0;
}

.mode-toggle .mode-desc {
  grid-column: 2;
  display: block;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--color-text-muted);
}

.mode-toggle .mode-option:has(input:checked) {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.mode-toggle .mode-option-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.ask-form {
  margin-bottom: 2.5rem;
}

.ask-form textarea {
  min-height: 6rem;
}

.conversation-recent ul {
  padding-left: 0;
  list-style: none;
}

.conversation-recent li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--color-border);
}

.conversation-recent small {
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* --- Data Analyst: first visit (AN-4) --- */

.da-start {
  margin: 0 0 2.5rem;
}

.da-start h2 {
  margin: 0 0 1.25rem;
}

/* --- Data Analyst: add data here, or a sample (UI-13, AN-IDEA-15) --- */

.da-add-data {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  padding: 1.5rem;
}

.da-add-data h2 {
  margin-top: 0;
}

.da-upload-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  max-width: 100%;
}

.da-upload-form input[type="file"] {
  max-width: 100%;
}

.da-sample-start {
  margin: 0 0 2.5rem;
}

.da-samples h3 {
  margin: 1.5rem 0 0.75rem;
  font-size: 1rem;
}

.da-sample-start .da-samples h3 {
  margin-top: 0;
}

.da-sample-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.da-sample-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
}

.da-sample-list .inline-form {
  margin: 0;
}

/* UI-34: a fieldset is min-content wide by default, so a wide column table
   inside it widened the whole preview on a phone. Let it shrink, and let the
   tables scroll inside their own wrappers. */
.ingest-preview h1 {
  overflow-wrap: anywhere;
}

.ingest-part {
  min-width: 0;
  max-width: 100%;
}

.ingest-columns select {
  min-width: 9rem;
}

.da-sample-list button {
  white-space: normal;
  text-align: left;
}

/* --- Policy pages (roadmap WEB-2) --- */

.legal-page {
  max-width: 44rem;
}

.legal-page h2 {
  margin-top: 2rem;
  font-size: 1.2rem;
}

.legal-page h3 {
  margin-top: 1.25rem;
  font-size: 1rem;
}

.legal-page li {
  margin-bottom: 0.35rem;
}

.legal-page table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.legal-page th,
.legal-page td {
  padding: 0.45rem 0.5rem;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.legal-table-wrap {
  overflow-x: auto;
}

.legal-pending {
  font-style: italic;
  color: var(--color-hold);
}

.auth-legal {
  margin: 0.85rem 0 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-align: center;
}

.legal-updated {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.purchase-terms {
  margin-top: 0.75rem;
  font-size: 0.85rem;
}

/* --- PL-IDEA-4: purchase receipts ------------------------------------- */

.receipts-table-wrapper {
  overflow-x: auto;
}

.receipt {
  max-width: 40rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 1.5rem;
}

.receipt__header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem 1rem;
}

.receipt__header h1 {
  margin: 0;
}

.receipt__number {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  margin: 0;
}

.receipt__facts dd {
  overflow-wrap: anywhere;
}

.receipt__amount {
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.receipt__note {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

@media print {
  /* The dark set is screen-only, so a printout is the light set. */
  :root {
    color-scheme: light;
  }

  .site-header,
  .site-footer,
  .skip-link,
  .low-balance,
  .flash-messages,
  .receipt__actions {
    display: none !important;
  }

  .receipt-page,
  .receipt {
    background: #fff;
    color: #000;
    border: none;
    padding: 0;
  }
}

/* Gym Tracker exercise library (2026-10-07): one row per exercise, the
   instructions behind a native <details> disclosure. */
.exercise-library {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

.exercise-library li {
  border-top: 1px solid var(--color-border);
  padding: 0.75rem 0;
}

.exercise-library summary {
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.exercise-library details p {
  margin: 0.5rem 0 0;
}

/* PL-IDEA-12: /account/notifications. */
.notifications-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.notifications-filter {
  display: flex;
  gap: 1rem;
  margin: 0.5rem 0 1rem;
  font-size: 0.95rem;
}

.notifications-filter a[aria-current] {
  font-weight: 600;
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.notification-list {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 0.6rem;
  background: var(--color-surface);
}

.notification {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  padding: 0.9rem 1rem;
  border-top: 1px solid var(--color-border);
}

.notification:first-child {
  border-top: none;
}

.notification--unread {
  background: var(--color-accent-soft);
  box-shadow: inset 3px 0 0 var(--color-accent);
}

.notification-text {
  flex: 1 1 16rem;
  min-width: 0;
}

.notification-text p {
  margin: 0;
  overflow-wrap: anywhere;
}

.notification-title {
  font-weight: 600;
}

.notification--unread .notification-title {
  font-weight: 700;
}

.notification-body {
  margin-top: 0.25rem;
  color: var(--color-text-muted);
}

.notification-text .notification-when {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.notification-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
}

.notification-actions .link-button {
  min-height: 2.25rem;
}

/* --- WP-P2 accessibility sweep (UI-17, UI-28, UI-38) --- */

/* UI-17: flash regions carry the role; the list inside keeps its look. */
.flash-region .flash-messages {
  margin-bottom: 1rem;
}

.flash-region:last-of-type .flash-messages {
  margin-bottom: 1.5rem;
}

/* UI-17: an error that belongs to one field, said under that field. */
.field-error {
  margin: 0.35rem 0 0;
  color: var(--color-danger);
  font-size: 0.875rem;
  font-weight: 600;
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--color-danger);
}

/* UI-19: the server-rendered confirmation step (confirm_action.html). */
.confirm-page {
  max-width: 36rem;
}

.confirm-page__question {
  font-size: 1.05rem;
}

.confirm-page__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.confirm-page__actions form {
  margin: 0;
}

/* UI-31: a fieldset's default border is the browser's own grey, which does
   not follow the theme; draw it in the border token instead. */
fieldset {
  border: 1px solid var(--color-border);
  border-radius: 0.4rem;
}

/* UI-28: a radio group is a fieldset; the legend reads like a field label. */
.form-fieldset {
  border: none;
  padding: 0;
  margin: 0 0 1rem;
  min-width: 0;
}

.form-fieldset legend {
  padding: 0;
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* UI-38: a touch target is at least 44 x 44 CSS px (WCAG 2.5.5) wherever the
   pointer is a finger or the screen is phone-sized. Desktop density is left
   alone. A link inside a sentence is exempt by the same criterion, so only
   controls and stand-alone links are sized here. Measured by the WP-P2
   sweep at 390 px; tests/unit/test_touch_targets.py pins the selectors. */
@media (max-width: 40rem), (pointer: coarse) {
  button,
  .button,
  .link-button,
  summary,
  select,
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]) {
    min-height: 2.75rem;
  }

  button,
  .button,
  .link-button {
    min-width: 2.75rem;
  }

  .link-button {
    display: inline-flex;
    align-items: center;
    padding: 0 0.35rem;
  }

  summary,
  .nav-menu summary {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    min-width: 2.75rem;
  }

  .form-field label.radio-option,
  label:has(> input[type="checkbox"]),
  label:has(> input[type="radio"]) {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.75rem;
  }

  .site-header-compact .nav-credits,
  .site-nav .nav-credits {
    align-items: center;
  }

  .site-header .brand,
  .site-nav a,
  .nav-credits,
  .nav-bell,
  .footer-nav a,
  .auth-links > a:only-child,
  .project__back,
  .storage-usage-row a,
  .storage-help a,
  [data-account-facts] .info-value a,
  .admin-links a,
  .standalone-link,
  .usage-insights p > a,
  .rows__label > a,
  td > a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    min-width: 2.75rem;
  }
}

/* --- WP-P2 copy and pages (UI-24, UI-25, UI-29, UI-30, UI-37, WEB-4) --- */

/* UI-25: every error page ends in a next step. */
.error-page__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* UI-30: a table wider than the screen scrolls inside its own region (a
   focusable, labelled one, so the keyboard can scroll it) instead of
   widening the page. The run page's steps table had a wrapper with no rule
   at all, which is how it pushed the page to 399 px. */
.table-scroll,
.run-result-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.table-scroll {
  margin-bottom: 1rem;
}

.table-scroll:focus-visible {
  outline-offset: 2px;
}

/* UI-37: the empty state's heading at either level. */
.empty-state-large h2 {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
  color: var(--color-text);
}

/* UI-29: the one way to start a conversation, above the list. */
.conversations-start {
  margin: 0 0 1.25rem;
}

/* UI-24: the plan's notices sit above the usage card. */
.storage-notice {
  margin: 0 0 1.5rem;
}

.storage-notice p {
  margin: 0;
}

/* WEB-4: each account fact carries the one link that acts on it. */
[data-account-facts] .info-value a {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.875rem;
  font-weight: 400;
}

/* Account data export (PL-IDEA-24): one card per export, stacked. */
.export-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.export-item {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1rem;
  overflow-wrap: anywhere;
}

.export-item .button {
  margin-top: 0.75rem;
}

.status-expired {
  color: var(--color-text-muted);
}

/* PL-IDEA-25: the spend-limit card on the Credits page. */
.spend-limit-status {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.spend-limit-status li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.9rem;
}

.spend-limit-status__label {
  color: var(--color-text-muted);
}

.spend-limit-status__value {
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

/* PL-IDEA-22: "Report a problem with this run" and its admin queue. */
.run-problem {
  margin: 1.5rem 0;
}

.run-problem__report {
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
  background: var(--color-surface);
}

.run-problem__report p {
  margin: 0.25rem 0;
}

.run-problem__form summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-weight: 500;
}

.run-problem__form form {
  margin-top: 0.75rem;
  max-width: 36rem;
}

.run-problem__form select,
.run-problem__form textarea,
.run-report-card__resolve textarea,
.run-report-card__resolve input {
  width: 100%;
  box-sizing: border-box;
}

.run-report-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: grid;
  gap: 1rem;
}

.run-report-card {
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  background: var(--color-surface);
  overflow-wrap: anywhere;
}

.run-report-card__head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  align-items: baseline;
  margin: 0 0 0.25rem;
}

.run-report-card__note {
  margin: 0.75rem 0;
  padding-left: 0.75rem;
  border-left: 3px solid var(--color-border);
  white-space: pre-line;
}

.run-report-card__snapshot {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.2rem 0.75rem;
  font-size: 0.85rem;
  margin: 0 0 1rem;
}

.run-report-card__snapshot dt,
.run-report-card__snapshot dd {
  margin: 0;
  padding: 0;
  line-height: 1.5;
}

.run-report-card__snapshot dt {
  color: var(--color-text-muted);
}

.run-report-card__snapshot dd {
  font-variant-numeric: tabular-nums;
}

/* 2026-10-19: feedback replies and the admin page's lists. */
.feedback-views {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin: 0 0 1rem;
}

.feedback-views a {
  display: inline-block;
  padding: 0.75rem 0;
}

.feedback-views a[aria-current="page"] {
  font-weight: 600;
}

.feedback-thread {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0;
  display: grid;
  gap: 0.5rem;
}

.feedback-thread__reply {
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background: var(--color-bg);
}

.feedback-thread__reply p {
  margin: 0.25rem 0;
}

.feedback-thread__body {
  white-space: pre-line;
}

.feedback-action {
  margin-top: 0.75rem;
}

.run-report-card__who a {
  display: inline-block;
  padding: 0.75rem 0;
}

/* PL-IDEA-8: credit packs on the Credits page. */
.credit-packs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.credit-pack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  min-height: 44px;
  padding: 0.6rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
}

.credit-pack:hover {
  border-color: var(--color-text-muted);
}

.credit-pack[aria-pressed="true"] {
  border: 2px solid var(--color-accent);
  padding: calc(0.6rem - 1px) calc(0.5rem - 1px);
}

.credit-pack__credits {
  font-weight: 600;
}

.credit-pack__price {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.credit-pack__bonus {
  font-size: 0.8rem;
  color: var(--color-accent);
}

/* --- What's new (PL-IDEA-20) --- */

.changelog-page {
  max-width: 44rem;
}

.changelog-lede {
  font-size: 1.05rem;
  color: var(--color-text-muted);
}

.changelog-list {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.changelog-entry {
  padding: 1.25rem 0;
  border-top: 1px solid var(--color-border);
}

.changelog-entry h2 {
  margin: 0.35rem 0 0.5rem;
  font-size: 1.2rem;
}

.changelog-entry p {
  margin: 0 0 0.5rem;
  overflow-wrap: anywhere;
}

.changelog-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.changelog-tag {
  padding: 0.05rem 0.55rem;
  border-radius: 999px;
  background: var(--color-accent-soft);
  color: var(--color-text);
  font-size: 0.8rem;
  font-weight: 600;
}

.changelog-link a {
  display: inline-block;
  min-height: 2.75rem;
  padding: 0.6rem 0;
}

.whats-new-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
  min-height: 2.75rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.9rem;
  font-weight: 600;
}

.whats-new-badge:hover {
  text-decoration: none;
  background: var(--color-accent-soft);
}

.whats-new-badge__dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--color-accent);
}

/* AW Fitness plans page (2026-10-14). */
.plan-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.75rem;
}

.plan-option {
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  padding: 1rem;
  background: var(--color-bg);
}

.plan-option h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.plan-option--current {
  border: 2px solid var(--color-accent);
  padding: calc(1rem - 1px);
}

/* Feedback images (2026-10-15): the form's previews and the admin page's
   thumbnails. */
.feedback-previews {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.feedback-previews__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  overflow-wrap: anywhere;
}

.feedback-previews__image,
.feedback-thumbs__image {
  width: 4.5rem;
  height: 4.5rem;
  object-fit: cover;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  background: var(--color-surface);
  flex: none;
}

.feedback-previews__name {
  flex: 1;
  font-size: 0.9rem;
}

.feedback-thumbs {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.feedback-thumbs__image {
  width: 8rem;
  height: 8rem;
}

/* ==========================================================================
   Mobile polish (web-mobile-ui, 2026-10-29)

   A phone, or any coarse pointer: controls are the size a thumb needs and a
   text field is 16 px, because iOS Safari zooms the page into any field below
   that (the audit found 15.2 px fields on 68 of 142 pages). CSS only: the
   production CSP allows no inline script.
   ========================================================================== */
@media (max-width: 40rem), (pointer: coarse) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="time"],
  input[type="month"],
  input[type="search"],
  input[type="url"],
  input[type="tel"],
  select,
  textarea {
    font-size: 1rem;
    min-height: 2.75rem;
  }

  input[type="file"] {
    font-size: 1rem;
  }

  /* A box a thumb can hit, and its label is part of the target. */
  input[type="checkbox"],
  input[type="radio"] {
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
  }

  label:has(> input[type="checkbox"]),
  label:has(> input[type="radio"]) {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 2.75rem;
  }

  /* Links that stand alone (a card's "Open", a table's row action) are at least 44 px tall. */
  .card-link,
  .product-action,
  .first-step__action,
  .measurements-range-option,
  .analytics-csv,
  .site-main td > a:not(.button) {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }

  /* A field that sets its own size (a redeem code, a limit) still reads 16 px. */
  .site-main
    :is(input, select, textarea):not([type="checkbox"], [type="radio"], [type="hidden"], [type="range"], [type="submit"], [type="button"]) {
    font-size: 1rem;
  }

  .site-main input[type="checkbox"],
  .site-main input[type="radio"] {
    width: 1.5rem;
    height: 1.5rem;
  }
}

/* --- AW Fitness web pages, and cards, on a phone (web-mobile-ui, slice 2) --- */

/* Two cards in a row of the page's own column used to touch. */
.site-main > .profile-card + .profile-card {
  margin-top: 1.25rem;
}

@media (max-width: 40rem) {
  .site-main {
    padding: 1rem;
  }

  .profile-card {
    padding: 1rem;
  }

  /* The day's totals: two tiles to a row, not five full-width rows. */
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .stats-grid .stat-item,
  .stats-grid .stat-item:last-child {
    gap: 0.25rem;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    background: var(--color-bg);
  }

  .stats-grid .stat-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .stats-grid .stat-value {
    font-size: 1.25rem;
  }

  /* The product's tab bar is the app's: four tabs and More, always in the
     same order, each a share of the row, so nothing scrolls and the tab you
     are on never moves. */
  .product-nav .nav-item,
  .product-nav .nav-more > summary {
    flex: 1 1 0;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 600;
    /* Labels wrap rather than touch or overflow (larger text, 320 px); the bar
       itself must not scroll or clip, because the More panel hangs from it. */
    white-space: normal;
    line-height: 1.1;
    text-align: center;
    overflow-wrap: anywhere;
  }

  /* More is a tab like the rest: the same share of the row, the whole share tappable. */
  .product-nav .nav-more {
    flex: 1 1 0;
    min-width: 0;
  }

  .product-nav .nav-more > summary {
    width: 100%;
    box-sizing: border-box;
  }

  /* Previous / Today / Next share the row. */
  .card-header .header-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    width: 100%;
  }

  .card-header {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  /* A food's fields two to a row (the name and the checkbox take the whole row). */
  fieldset.form-fields-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-inline: 0;
    padding-inline: 0;
    border: 0;
  }

  fieldset.form-fields-grid > legend {
    padding: 0;
    font-weight: 600;
  }

  fieldset.form-fields-grid > .form-field:first-of-type,
  fieldset.form-fields-grid > .form-field:has(input[type="checkbox"]),
  fieldset.form-fields-grid > p {
    grid-column: 1 / -1;
  }

  .profile-form .form-fields-grid {
    gap: 0.75rem;
  }

  /* The main action is the whole width of the form. */
  .profile-form button[type="submit"],
  .profile-form .button-primary {
    width: 100%;
    justify-content: center;
    min-height: 2.75rem;
    margin-top: 0.5rem;
  }

  /* The photo picker is a big, plain target. */
  .profile-form input[type="file"] {
    width: 100%;
    padding: 0.75rem;
    border: 1px dashed var(--color-control-border);
    border-radius: 0.75rem;
    background: var(--color-bg);
  }

  .profile-form input[type="file"]::file-selector-button {
    min-height: 2.75rem;
    margin-right: 0.75rem;
  }
}

/* --- Credits, and tables that scroll sideways, on a phone (web-mobile-ui, slice 3) --- */

@media (max-width: 40rem) {
  /* An empty list is a short note, not a screenful of padding. */
  .empty-state-large {
    padding: 1.5rem 1rem;
  }

  /* Available is the number that matters; Held and Balance share the row beneath it. */
  .credits-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .credits-cards .credit-card {
    padding: 1rem;
  }

  .credits-cards .credit-card.available {
    grid-column: 1 / -1;
  }

  .credits-cards .credit-label {
    font-size: 0.8rem;
  }

  /* A table too wide for the phone scrolls inside its own box (it always did); its row
     labels stay put so a number is never read without its name. */
  :is(
      .usage-insights-wrapper,
      .usage-table-wrapper,
      .history-table-wrapper,
      .runs-table-wrapper,
      .admin-table-wrapper,
      .storage-files-table-wrapper,
      .datasets-table-wrapper,
      .receipts-table-wrapper,
      .table-scroll
    )
    th[scope="row"] {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--color-surface);
  }
}

/* --- Slice 4: stacked tables, thumb-size links, two-column forms (web-mobile-ui) --- */

@media (max-width: 40rem) {
  /* A table marked `stack-phone` (every cell carries data-label) becomes one card per row:
     the row's name on top, then "label  value" lines. Its header row is hidden visually and
     stays for screen readers. */
  .stack-phone,
  .stack-phone tbody,
  .stack-phone tfoot,
  .stack-phone tr,
  .stack-phone th,
  .stack-phone td {
    display: block;
    width: 100%;
  }

  .stack-phone thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .stack-phone tr {
    margin-bottom: 0.75rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    background: var(--color-surface);
  }

  .stack-phone th[scope="row"] {
    position: static;
    padding: 0 0 0.35rem;
    border: 0;
    background: none;
    white-space: normal;
  }

  .stack-phone td {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.35rem 0;
    border: 0;
    text-align: right;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .stack-phone td::before {
    content: attr(data-label);
    flex: none;
    max-width: 50%;
    color: var(--color-text-muted);
    font-weight: 500;
    text-align: left;
  }

  .stack-phone td:not([data-label])::before {
    content: none;
  }

  /* Short text links the audit found under 44 px. */
  .fitness-choices a,
  .notifications-filter a,
  .admin-windows a,
  .btn-prev,
  .btn-next,
  .lp-link,
  .lp-brand {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }

  .site-header:not(.site-header--signed-in) .site-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }

  /* Number and date fields two to a row; anything with words or a list is the whole row. */
  .profile-form .form-fields-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-form .form-fields-grid > .form-field:has(
      > :is(
          input[type="text"],
          input[type="email"],
          input[type="password"],
          input[type="url"],
          input[type="search"],
          input[type="tel"],
          input[type="file"],
          input[type="datetime-local"],
          select,
          textarea
        )
    ),
  .profile-form .form-fields-grid > p,
  .profile-form .form-fields-grid > .hint {
    grid-column: 1 / -1;
  }
}


/* --- The app's look on the Day page (slice 5) ---------------------------- */

/* The four totals are tiles with a ring (the app's hero, as CSS): the ring is
   a conic gradient filled to --pct, in the macro's own colour. No script. */
.stat-ring {
  align-items: center;
  text-align: center;
  padding: 0.75rem;
  background: var(--color-surface-2);
  border: 0;
  border-radius: var(--radius-lg);
}

.stat-ring:last-child {
  padding-bottom: 0.75rem;
}

.stat-ring::before {
  content: "";
  display: block;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: conic-gradient(var(--ring-color, var(--color-accent)) calc(var(--pct, 0) * 1%), var(--color-border) 0);
  -webkit-mask: radial-gradient(circle, transparent 56%, var(--color-text) 58%);
  mask: radial-gradient(circle, transparent 56%, var(--color-text) 58%);
}

.stat-ring-kcal::before {
  width: 5.5rem;
  height: 5.5rem;
}

.stat-ring-protein {
  --ring-color: var(--color-protein);
}

.stat-ring-carbs {
  --ring-color: var(--color-carbs);
}

.stat-ring-fat {
  --ring-color: var(--color-fat);
}

.stat-ring .stat-value {
  font-size: 1.125rem;
}

.stat-ring-kcal .stat-value {
  font-size: 1.5rem;
}

/* Four equal tiles under the totals, each an icon over a one-line label. */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}

.quick-actions a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 4.5rem;
  padding: 0.5rem 0.25rem;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.quick-actions .qa-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.quick-actions a:hover {
  border-color: var(--color-accent);
}

/* Fibre has no ring, but is the same kind of tile as the macros. */
.stats-grid .stat-item[data-fibre] {
  align-items: center;
  text-align: center;
  padding: 0.75rem;
  background: var(--color-surface-2);
  border: 0;
  border-radius: var(--radius-lg);
}

/* Suggestions are cards, not bullets: the name and its figures on the left,
   a quiet Log button on the right. */
.suggestion-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.suggestion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
}

.suggestion > div {
  min-width: 0;
}

.suggestion strong {
  display: block;
  font-size: 0.9375rem;
}

.suggestion .hint {
  display: block;
  margin: 0.125rem 0 0;
  font-variant-numeric: tabular-nums;
}

.suggestion .inline-form {
  flex: 0 0 auto;
}

/* Choices rendered as links are chips: filled, never underlined. */
.fitness-choices a,
.measurements-range-option {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  background: var(--color-surface-2);
  color: var(--color-text);
  text-decoration: none;
}

.fitness-choices a[aria-current],
.measurements-range-option.active {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

/* A disclosure is a row you can see is one: 44 px and a chevron. */
.profile-card details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 2.75rem;
  color: var(--color-accent);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.profile-card details > summary::-webkit-details-marker {
  display: none;
}

.profile-card details > summary::after {
  content: "\25BE";
}

/* An empty card says so once and offers its next step: no tall grey box. */
.empty-state {
  padding: 1rem;
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  color: var(--color-text);
}

.empty-state a {
  font-weight: 600;
}

/* One sentence, one action, with a round mark above them. */
.empty-state::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 auto 0.5rem;
  border-radius: 50%;
  background: var(--color-accent-soft);
  box-shadow: inset 0 0 0 0.75rem var(--color-accent-soft), inset 0 0 0 1rem var(--color-accent);
}

.empty-state p {
  margin: 0 0 0.75rem;
}

.empty-state .button {
  color: var(--color-on-accent);
}

@media (max-width: 40rem) {
  /* Calories across the top, the three macros side by side, fibre under. */
  .stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .stats-grid .stat-ring-kcal,
  .stats-grid .stat-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .stats-grid .stat-item {
    background: var(--color-surface-2);
    border: 0;
  }

  .stat-ring {
    padding: 0.625rem 0.25rem;
  }

  .quick-actions {
    gap: 0.5rem;
  }
}

/* The More panel's rows read as a list: left-aligned, regular size. */
.product-nav .nav-more-panel .nav-item {
  justify-content: flex-start;
  font-size: 0.9375rem;
}

@media (max-width: 22.5rem) {
  .product-nav .nav-item,
  .product-nav .nav-more > summary {
    font-size: 0.75rem;
  }
}