/* ============================================================
   Variables
   ============================================================ */
:root {
  --color-bg:           #f7f7f6;
  --color-surface:      #ffffff;
  --color-border:       #e4e4e2;
  --color-border-focus: #16a34a;
  --color-text:         #18181b;
  --color-muted:        #71717a;
  --color-accent:       #16a34a;
  --color-accent-hover: #15803d;
  --color-accent-light: #f0fdf4;
  --color-danger:       #dc2626;
  --color-danger-light: #fef2f2;
  --color-user-bubble:  #18181b;
  --color-asst-bubble:  #f4f4f5;

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow:    0 1px 4px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.04);

  --nav-height: 56px;
  --tab-bar-height: 56px;
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Fira Mono", monospace;
}

/* ============================================================
   Reset & base
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { height: 100%; }

body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  height: 100%;
  min-height: 100dvh;
}

a { color: inherit; text-decoration: none; }

/* ============================================================
   Nav
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-height);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

/* Landing nav — dark to match hero */
.layout--landing .nav {
  background: #021a0c;
  border-bottom-color: rgba(255,255,255,.08);
}

.layout--landing .nav__brand { color: #fff; }
.layout--landing .nav__link  { color: rgba(255,255,255,.7); }
.layout--landing .nav__link:hover { color: #fff; background: rgba(255,255,255,.1); }
.layout--landing .nav__link--cta {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
}
.layout--landing .nav__link--cta:hover { background: rgba(255,255,255,.25); }

.nav__inner {
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 1.25rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: relative;
}

/* Hamburger toggle (CSS-only, hidden on desktop) */
.nav__toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.nav__toggle:focus-visible + .nav__hamburger {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
.nav__hamburger { display: none; }

.nav__brand {
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-accent);
  letter-spacing: -.01em;
  text-decoration: none;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: .25rem;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  padding: .375rem .75rem;
  border-radius: var(--radius-sm);
  font-size: .875rem;
  font-weight: 500;
  color: var(--color-muted);
  text-decoration: none;
  transition: color .15s, background .15s;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
}

.nav__link:hover { color: var(--color-text); background: var(--color-bg); }
.nav__link--active { color: var(--color-accent); }
.nav__link--cta {
  background: var(--color-accent);
  color: #fff;
  margin-left: .25rem;
}
.nav__link--cta:hover { background: var(--color-accent-hover); color: #fff; }
.nav__link--logout { color: var(--color-muted); }

/* ---- Mobile nav (hamburger) ---- */
@media (max-width: 760px) {
  .nav__inner { padding: 0 1rem; }

  .nav__hamburger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: transparent;
    border: 0;
  }
  .nav__hamburger span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--color-text);
    border-radius: 1px;
    transition: transform .2s ease, opacity .15s ease;
    transform-origin: center;
  }
  .layout--landing .nav__hamburger span { background: #fff; }
  .nav__hamburger:hover { background: var(--color-bg); }
  .layout--landing .nav__hamburger:hover { background: rgba(255,255,255,.1); }
  .nav__hamburger:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }

  .nav__links {
    position: absolute;
    top: var(--nav-height);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow);
    display: none;
  }
  .layout--landing .nav__links {
    background: #021a0c;
    border-bottom-color: rgba(255,255,255,.08);
  }

  .nav__toggle:checked ~ .nav__links { display: flex; }

  .nav__toggle:checked ~ .nav__hamburger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav__toggle:checked ~ .nav__hamburger span:nth-child(2) { opacity: 0; }
  .nav__toggle:checked ~ .nav__hamburger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .nav__links .nav__link {
    width: 100%;
    padding: .75rem 1rem;
    font-size: .9375rem;
    border-radius: var(--radius-sm);
    justify-content: flex-start;
  }
  .nav__links .nav__link--cta { margin-left: 0; margin-top: .25rem; }
  .nav__links form { width: 100%; margin: 0; }
  .nav__links form .nav__link { width: 100%; text-align: left; }
}

/* ============================================================
   Flash messages
   ============================================================ */
.flash {
  padding: .75rem 1.25rem;
  font-size: .875rem;
  font-weight: 500;
  text-align: center;
}
.flash--notice { background: var(--color-accent-light); color: #166534; }
.flash--alert  { background: var(--color-danger-light); color: #991b1b; }

/* ============================================================
   Main
   ============================================================ */
.main {
  width: 100%;
}

/* Layout: chat fills viewport height */
.layout--chat .main {
  height: calc(100dvh - var(--nav-height));
  overflow: hidden;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .5rem 1.25rem;
  background: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s;
  white-space: nowrap;
}
.btn:hover { background: var(--color-accent-hover); }
.btn--lg  { padding: .75rem 2rem; font-size: 1rem; border-radius: var(--radius); }
.btn--full { width: 100%; }
.btn--ghost {
  background: transparent;
  color: var(--color-text);
  border: 1.5px solid var(--color-border);
}
.btn--ghost:hover { background: var(--color-bg); }

/* ============================================================
   Landing pages
   ============================================================ */


/* Dark hero wrapper — full-bleed */


/* Hero banner — two-column with demo chat */


.btn--white {
  background: #fff;
  color: #052e16;
}
.btn--white:hover { background: #f0fdf4; }


/* Phone column */


/* ── Phone mockup (pure CSS) ─────────────────────────────────────────── */


/* Fake input pill at the bottom of the phone */


/* Mascot break — robot between sections */


/* Robot in centered hero (features, about, pricing) */


/* Robot in CTA banner */


/* Demo window with browser chrome */


/* Demo chat */


/* Proof strip */


/* Steps — elevated cards */
/* (step styles below in Steps section) */

/* Example cards */


/* Hero — compact (inner pages) */


/* Sections */


/* Steps */


/* Horizontal connector line behind the number circles */


.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}


/* Feature cards (home page grid) */


/* Hero centered variant (features, etc.) */


/* Feature showcase — alternating visual/text rows */


/* Small demo window variant */


/* Feature visual card (progress mockup) */


/* Feature detail rows (features page) */


/* Pricing — single plan */
/* Pricing — single plan */
/* ============================================================
   Pricing page — full split layout (content left / sticky CTA right)
   ============================================================ */


/* ── LEFT: main content ─────────────────────────────────────────────── */


.marketing-page__hero {
  margin-bottom: 3rem;
}

/* Inline divider hero used between major chapters of a marketing page
   (e.g. MCP vs REST API on /api_docs). Mimics the page hero but sits
   between sections, with its own top border to clearly segment them. */
.marketing-page__hero--break {
  margin-top: 3rem;
  padding-top: 3rem;
  border-top: 1px solid var(--color-border);
  margin-bottom: 2rem;
}

/* Drop the duplicate border-top when a section directly follows a
   --break hero — the hero already provides the divider. */
.marketing-page__section--continuation {
  border-top: 0;
  padding-top: 0;
}


.marketing-page__title {
  font-size: 2.75rem;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.05;
  color: var(--color-text);
  margin-bottom: .75rem;
}

.marketing-page__accent {
  display: block;
  color: var(--color-accent);
}

.marketing-page__sub {
  font-size: 1.0625rem;
  color: var(--color-muted);
  line-height: 1.5;
  max-width: 540px;
}

.marketing-page__section {
  padding: 2rem 0;
  border-top: 1px solid var(--color-border);
}

.marketing-page__section-title {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-muted);
  margin-bottom: 1.25rem;
}


/* ── RIGHT: sticky CTA ──────────────────────────────────────────────── */


/* When the feature-showcase sits inside a narrower column, stack rather
   than splitting into two columns. */
/* Phone mockup + text side-by-side layout for features */


/* When progress-card sits inside a phone mockup, drop its own card chrome
   and let the phone provide the frame. */


/* Collapse to stacked layout on narrow screens */


/* Inside the narrower marketing-page left column, stack the about/value
   grids vertically and tighten padding so they read as a flowing list. */


/* ─── API docs — quiet ──────────────────────────────────────────────
   The 600-line body keeps its markup; only these five classes carry
   its look. Same rules as everywhere else: hairlines, no slabs.
   ------------------------------------------------------------------ */
.api-docs__h3 {
  font-size: .9375rem;
  font-weight: 500;
  color: var(--q-text);
  margin: 2.25rem 0 .6rem;
}
.api-docs__h3:first-child { margin-top: 0; }

.api-docs__text {
  font-size: .9375rem;
  color: var(--q-muted);
  line-height: 1.6;
  margin-bottom: .9rem;
  max-width: 46ch;
  text-wrap: pretty;
}

.api-docs__text code,
.api-docs__endpoint code,
.api-docs__list code {
  font-family: var(--font-mono);
  font-size: .8125rem;
  padding: 0;
  background: none;
  border: 0;
  color: var(--q-text);
}

/* A code sample is a quotation, so it gets a rule, not a dark slab. */
.api-docs__code {
  background: none;
  color: var(--q-muted);
  border: 0;
  border-left: 1px solid var(--q-rule-strong);
  border-radius: 0;
  padding: .2rem 0 .2rem 1rem;
  font-family: var(--font-mono);
  font-size: .8125rem;
  line-height: 1.7;
  overflow-x: auto;
  margin: .75rem 0 1.5rem;
  white-space: pre;
}

.api-docs__placeholder { color: var(--q-warm); font-weight: 500; }

.api-docs__endpoint {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin: 0;
  padding: .7rem 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--q-rule);
  border-radius: 0;
  font-size: .875rem;
}
.api-docs__endpoint code { font-weight: 400; }

/* The verb still needs to be scannable, so it keeps its colour — as
   text, not as a filled chip. */
.api-docs__method {
  flex: 0 0 3.5rem;
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .08em;
  padding: 0;
  border-radius: 0;
  background: none;
  text-transform: uppercase;
}
.api-docs__method--get    { color: var(--q-muted); }
.api-docs__method--post   { color: var(--q-accent); }
.api-docs__method--patch  { color: var(--q-warm); }
.api-docs__method--delete { color: var(--q-warm); }

.api-docs__list {
  font-size: .9375rem;
  color: var(--q-muted);
  line-height: 1.6;
  margin: .25rem 0 1.25rem;
  padding-left: 0;
  list-style: none;
}
.api-docs__list li {
  display: flex;
  gap: .75rem;
  margin-bottom: .4rem;
}
.api-docs__list li::before {
  content: "";
  flex: 0 0 10px;
  height: 1px;
  margin-top: .8em;
  background: var(--q-rule-strong);
}

/* The section shell api_docs still uses. */
.q-page .marketing-page__section { margin-top: 4rem; }
.q-page .marketing-page__section-title {
  font-size: .72rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--q-faint);
  font-weight: 500;
  margin: 0 0 .9rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--q-rule);
}
.q-page .marketing-page__hero--break { margin-top: 5rem; }
.q-page .marketing-page__title {
  font-size: 1.9rem;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.1;
  margin: 0;
}
.q-page .marketing-page__accent { color: var(--q-muted); }
.q-page .marketing-page__sub {
  margin: .9rem 0 0;
  font-size: 1rem;
  color: var(--q-muted);
  max-width: 44ch;
  text-wrap: pretty;
}

/* FAQ items in the marketing layout: flat list, no card chrome */


/* ── Responsive — stack below 900px ─────────────────────────────────── */
@media (max-width: 900px) {
  

  

  /* On mobile, surface the CTA immediately after the hero */
  

  .marketing-page__title { font-size: 2rem; }
  
}

/* Pricing FAQ — flat list, always visible */


/* About page — story blocks */


/* Values */


/* Tech strip */


/* FAQ */


/* CTA banner */


/* Footer */


/* ============================================================
   Auth pages (login / signup)
   ============================================================ */
.layout--auth:not(.layout--landing) .main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  min-height: calc(100dvh - var(--nav-height));
}

.auth {
  width: 100%;
  max-width: 400px;
}


/* ============================================================
   Forms
   ============================================================ */
.form { display: flex; flex-direction: column; gap: 1rem; }


input[type="text"],
input[type="email"],
input[type="password"],
textarea {
  width: 100%;
  padding: .625rem .875rem;
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: .9375rem;
  color: var(--color-text);
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(22,163,74,.12);
  background: #fff;
}


/* ============================================================
   Links
   ============================================================ */
.link {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 500;
}
.link:hover { text-decoration: underline; }

/* ============================================================
   Chat — quiet
   ------------------------------------------------------------
   Same class names throughout: chat_controller.js and
   chat_channel.js build .message / .message__bubble nodes at
   runtime, so these names are a contract, not a choice.

   The assistant simply speaks — no bubble, no border. Your own
   messages sit right-aligned and grey, because you already know
   what you said.
   ============================================================ */

/* Flex, not grid. On mobile the sidebar becomes position:fixed and leaves the
   flow, and the chat column has to take the full width — a fixed grid track
   would go on reserving its 15rem. */
.chat-layout {
  display: flex;
  height: 100%;
  overflow: hidden;
  background: var(--q-bg);
}

/* ── History drawer ───────────────────────────────────────── */
.chat-sidebar {
  width: 15rem;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--q-bg);
  border-right: 1px solid var(--q-rule);
  overflow-y: auto;
}

.chat-sidebar__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 2rem 1.5rem 1rem;
}

.chat-sidebar__title {
  font-size: .72rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--q-faint);
  font-weight: 500;
}

.chat-sidebar__list {
  display: flex;
  flex-direction: column;
  padding: 0 1.5rem 2rem;
}

.chat-sidebar__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  padding: .6rem 0;
  color: var(--q-muted);
  text-decoration: none;
  font-size: .875rem;
  transition: color .15s;
}
.chat-sidebar__item:hover { color: var(--q-text); }
.chat-sidebar__item--active { color: var(--q-text); }

.chat-sidebar__date { white-space: nowrap; }
.chat-sidebar__year {
  font-size: .75rem;
  color: var(--q-faint);
  font-variant-numeric: tabular-nums;
}

/* ── Main column ──────────────────────────────────────────── */
.chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  min-width: 0;
}

.chat__date-label {
  flex-shrink: 0;
  padding: 2rem 0 .5rem;
  font-size: .72rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--q-faint);
  font-weight: 500;
}

.chat__messages {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  padding: 1.5rem 0 2rem;
}

/* ── Empty state ──────────────────────────────────────────── */
.chat__empty {
  margin: auto 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.chat__empty-title {
  font-size: 2.4rem;
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1.06;
  color: var(--q-text);
}

.chat__empty-hint {
  font-size: 1.0625rem;
  color: var(--q-muted);
  margin-top: 1.1rem;
  max-width: 32ch;
  text-wrap: pretty;
}

/* ── Messages ─────────────────────────────────────────────── */
.message {
  display: flex;
  max-width: 100%;
}
.message--user { justify-content: flex-end; }
.message--assistant,
.message--error { justify-content: flex-start; }

/* No bubble. The bubble was the noise. */
.message__bubble {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  min-width: 0;
}
.message__bubble p { margin: 0; }
.message__bubble p + p { margin-top: .5em; }

/* A soft sent-message bubble — what makes the thread read as a conversation. */
.message--user .message__bubble {
  max-width: 80%;
  padding: .6rem .9rem;
  background: color-mix(in srgb, var(--q-text) 6%, var(--q-bg));
  border-radius: 18px 18px 5px 18px;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--q-text);
  text-wrap: pretty;
}

.message--assistant .message__bubble {
  max-width: 42ch;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--q-text);
  text-wrap: pretty;
}

.message--error .message__bubble {
  background: none;
  max-width: 42ch;
  font-size: .9375rem;
  color: var(--q-warm);
}

/* ── Assistant markdown ───────────────────────────────────── */
.message__bubble--markdown { line-height: 1.55; }

.message__bubble--markdown p { margin: 0 0 .7em; }
.message__bubble--markdown p:last-child { margin-bottom: 0; }

.message__bubble--markdown h1,
.message__bubble--markdown h2,
.message__bubble--markdown h3 {
  font-weight: 600;
  margin: 1em 0 .4em;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.message__bubble--markdown h1 { font-size: 1.1em; }
.message__bubble--markdown h2 { font-size: 1.03em; }
.message__bubble--markdown h3 { font-size: .95em; }

.message__bubble--markdown ul,
.message__bubble--markdown ol {
  padding-left: 1.2em;
  margin: .4em 0 .7em;
}
.message__bubble--markdown li { margin-bottom: .25em; }
.message__bubble--markdown li:last-child { margin-bottom: 0; }
.message__bubble--markdown li::marker { color: var(--q-faint); }

.message__bubble--markdown strong { font-weight: 600; }
.message__bubble--markdown em     { font-style: italic; }

.message__bubble--markdown code {
  font-family: var(--font-mono);
  font-size: .85em;
  color: var(--q-muted);
}

.message__bubble--markdown pre {
  border-left: 1px solid var(--q-rule-strong);
  padding: .1em 0 .1em 1em;
  overflow-x: auto;
  margin: .7em 0;
}
.message__bubble--markdown pre code { font-size: .85em; }

.message__bubble--markdown blockquote {
  border-left: 1px solid var(--q-rule-strong);
  margin: .7em 0;
  padding: 0 0 0 1em;
  color: var(--q-muted);
}

/* Hairlines only — the table is data, not a grid of boxes. */
.message__bubble--markdown table {
  border-collapse: collapse;
  width: 100%;
  margin: .8em 0;
  font-size: .9em;
  font-variant-numeric: tabular-nums;
}
.message__bubble--markdown th,
.message__bubble--markdown td {
  border: 0;
  border-bottom: 1px solid var(--q-rule);
  padding: .5em .8em .5em 0;
  text-align: left;
}
.message__bubble--markdown th {
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--q-faint);
  font-weight: 500;
}

.message__bubble--markdown hr {
  border: none;
  border-top: 1px solid var(--q-rule);
  margin: 1em 0;
}

/* ── Typing indicator ─────────────────────────────────────── */
.message__bubble--typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: .5rem 0;
  min-width: 0;
}

.message__bubble--typing span {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--q-faint);
  animation: typing-bounce 1.2s ease-in-out infinite;
}

.message__bubble--typing span:nth-child(2) { animation-delay: .2s; }
.message__bubble--typing span:nth-child(3) { animation-delay: .4s; }

@keyframes typing-bounce {
  0%, 80%, 100% { transform: translateY(0);    opacity: .35; }
  40%           { transform: translateY(-5px); opacity: 1;   }
}

@media (prefers-reduced-motion: reduce) {
  .message__bubble--typing span { animation: none; opacity: .5; }
}

/* ── Composer ─────────────────────────────────────────────── */
.chat__input-area {
  flex-shrink: 0;
  width: 100%;
  padding: 0 0 1.75rem;
  background: var(--q-bg);
}

.chat__form {
  display: flex;
  gap: .5rem;
  align-items: flex-end;
  border: 1px solid var(--q-rule-strong);
  border-radius: 22px;
  padding: .45rem .45rem .45rem 1rem;
  background: var(--q-bg);
  transition: border-color .15s, box-shadow .15s;
}
.chat__form:focus-within {
  border-color: var(--q-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--q-accent) 12%, transparent);
}

.chat__textarea {
  flex: 1;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  font-family: var(--font);
  font-size: 1rem;
  color: var(--q-text);
  resize: none;
  line-height: 1.5;
  min-height: 1.6rem;
  max-height: 160px;
  outline: none;
  box-shadow: none;
}
.chat__textarea::placeholder { color: var(--q-faint); }
.chat__textarea:focus { border: 0; box-shadow: none; }

/* ============================================================
   Page (workouts)
   ============================================================ */
.page {
  max-width: 1024px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}

/* ── Workouts index hero ──────────────────────────────────────────────────── */
.workouts-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2.5rem;
  padding: 2rem;
  background: linear-gradient(135deg, #052e16 0%, #14532d 60%, #166534 100%);
  border-radius: var(--radius-lg);
  color: #fff;
}

.workouts-hero__title {
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: #fff;
  margin-bottom: .2rem;
}

.workouts-hero__sub {
  font-size: .9375rem;
  color: rgba(255,255,255,.6);
}

.workouts-hero .btn {
  background: rgba(255,255,255,.15);
  border: 1.5px solid rgba(255,255,255,.3);
  color: #fff;
  white-space: nowrap;
  flex-shrink: 0;
}

.workouts-hero .btn:hover { background: rgba(255,255,255,.25); }

/* Month groups */


/* ── Workout show hero ────────────────────────────────────────────────────── */


/* ── Exercise list (grouped) ──────────────────────────────────────────────── */
.exercise-list {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-bottom: 2rem;
}


/* Set table (multi-set exercises) */


/* ── Workout edit form ────────────────────────────────────────────────────── */


/* Mark the whole card as pending deletion */


.btn--danger {
  background: transparent;
  color: var(--color-danger);
  border: 1.5px solid var(--color-danger);
  margin-left: auto;
}
.btn--danger:hover {
  background: var(--color-danger);
  color: #fff;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* ============================================================
   Progress page
   ============================================================ */


/* Progress card list */


/* Chart area */


/* Footer stats */


/* Session history expandable */


/* Single session exercises */


/* ============================================================
   Export page
   ============================================================ */
.export-hero {
  margin-bottom: 2rem;
  padding: 2rem;
  background: linear-gradient(135deg, #052e16 0%, #14532d 60%, #166534 100%);
  border-radius: var(--radius-lg);
  color: #fff;
}

.export-hero__title {
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: #fff;
  margin-bottom: .25rem;
}

.export-hero__sub {
  font-size: .9375rem;
  color: rgba(255,255,255,.6);
}

.export-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}

.export-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.export-card__header {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.export-card__title {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.02em;
}

.export-card__badge {
  font-size: .6875rem;
  font-weight: 600;
  color: var(--color-accent);
  background: var(--color-accent-light);
  border-radius: 4px;
  padding: .15rem .5rem;
}

.export-card__desc {
  font-size: .875rem;
  color: var(--color-muted);
  line-height: 1.6;
  flex: 1;
}

.export-card__stats {
  display: flex;
  gap: 1rem;
  font-size: .8125rem;
  color: var(--color-muted);
  font-weight: 500;
  padding-top: .25rem;
}


/* ============================================================
   Workout list
   ============================================================ */


/* ============================================================
   Workout detail
   ============================================================ */


/* ============================================================
   Profile
   ============================================================ */


/* Profile grid */


/* Profile edit form */


/* ============================================================
   Empty state
   ============================================================ */
.empty-state {
  padding: 3rem 0;
  text-align: center;
  color: var(--color-muted);
  font-size: .9375rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}

/* ============================================================
   Dashboard
   ============================================================ */
.dashboard {
  max-width: 1024px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}

/* Greeting header */


/* Stats row */


/* ============================================================
   Home — active injuries summary
   ============================================================ */


/* Body: main + sidebar */


/* Section */


/* Aside */


/* workout-card__exercises */


/* Top exercises list */


/* Highlights row — PRs + weekly activity side by side */


/* Exercise progressions */
.progressions {
  margin-bottom: 2rem;
}


.sparkline {
  display: block;
  width: 100%;
  height: 56px;
}


/* Weekly bar chart */


/* ============================================================
   Responsive
   ============================================================ */


@media (max-width: 600px) {
  
  
  
  
  
  
  
  
  
  
  
  
  .step { align-items: flex-start; }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .message { max-width: 90%; }
  .page { padding: 1.5rem 1rem 3rem; }
  
  .dashboard { padding: 1.25rem .875rem 3rem; }
  
  
  
  
  
  .workouts-hero { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .workouts-hero__title { font-size: 1.25rem; }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
}

/* ============================================================
   Injuries page
   ============================================================ */


/* ============================================================
   Workout heatmap (30-day calendar)
   ============================================================ */


/* Mirrors the per-column month label row so the day labels below line up
   pixel-for-pixel with the cell rows. */


/* Legend cells are fixed small size, not inheriting the calendar sizing */


/* ============================================================
   OAuth consent screen
   ============================================================ */
.consent-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 80px);
  padding: 2rem 1rem;
}

.consent-card {
  width: 100%;
  max-width: 480px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.consent-card__header {
  text-align: center;
  padding: 2rem 2rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
}

.consent-card__logo {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  margin: 0 auto .75rem;
  display: block;
  object-fit: cover;
}

.consent-card__logo--placeholder {
  background: linear-gradient(135deg, var(--color-accent), #4ade80);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.03em;
}

.consent-card__logo--error {
  background: linear-gradient(135deg, #dc2626, #ef4444);
}

.consent-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: .375rem;
}

.consent-card__title strong { font-weight: 800; }

.consent-card__sub {
  font-size: .8125rem;
  color: var(--color-muted);
}

.consent-card__body {
  padding: 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.consent-card__intro {
  font-size: .9375rem;
  color: var(--color-text);
  line-height: 1.5;
}

.consent-card__intro-sub {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: .5rem;
}

.consent-card__perms {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .375rem;
}

.consent-card__perms li {
  font-size: .875rem;
  color: var(--color-text);
  padding-left: 1.25rem;
  position: relative;
}

.consent-card__perms li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: 700;
}

.consent-card__redirect {
  font-size: .75rem;
  color: var(--color-muted);
  margin-top: .5rem;
  padding-top: .75rem;
  border-top: 1px dashed var(--color-border);
}

.consent-card__uri {
  display: block;
  margin-top: .375rem;
  padding: .5rem .625rem;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .75rem;
  color: var(--color-text);
  word-break: break-all;
}

.consent-card__form {
  padding: 1rem 2rem 1.5rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
}

.consent-card__actions {
  display: flex;
  gap: .75rem;
  justify-content: flex-end;
}

.consent-card__actions .btn {
  flex: 1;
  padding: .625rem 1rem;
  font-weight: 600;
}

.btn--ghost {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.btn--ghost:hover {
  background: var(--color-surface);
  border-color: var(--color-muted);
}

.btn--primary {
  background: var(--color-accent);
  color: #fff;
  border: 1px solid var(--color-accent);
}

.btn--primary:hover {
  filter: brightness(0.95);
}

/* ---------- Goals ---------- */


/* ---------- Admin ---------- */
.admin__hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.admin__title { font-size: 1.75rem; font-weight: 700; margin: 0; }
.admin__sub   { color: var(--color-muted); margin: .25rem 0 0; font-size: .9375rem; }

.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .75rem;
  margin-bottom: 2rem;
}
.admin-stat {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.admin-stat__label { color: var(--color-muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
.admin-stat__value { font-size: 1.5rem; font-weight: 700; color: var(--color-text); }
.admin-stat__delta { color: var(--color-accent); font-size: .8125rem; }

.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.admin-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}
.admin-panel__title { font-size: 1rem; font-weight: 600; margin: 0 0 .75rem; color: var(--color-text); }

.admin-search {
  display: flex;
  gap: .5rem;
  align-items: center;
  margin-bottom: 1rem;
}
.admin-search__input {
  flex: 1;
  padding: .5rem .75rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: .9375rem;
  background: var(--color-surface);
}
.admin-search__input:focus { outline: none; border-color: var(--color-border-focus); }

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
}
.admin-table th, .admin-table td {
  text-align: left;
  padding: .625rem .5rem;
  border-bottom: 1px solid var(--color-border);
}
.admin-table th { color: var(--color-muted); font-weight: 500; font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em; }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table__muted { color: var(--color-muted); }

.admin-badge {
  display: inline-block;
  padding: .125rem .5rem;
  border-radius: 999px;
  font-size: .75rem;
  background: var(--color-bg);
  color: var(--color-muted);
  border: 1px solid var(--color-border);
}
.admin-badge--ok    { background: var(--color-accent-light); color: #166534; border-color: #bbf7d0; }
.admin-badge--alert { background: var(--color-danger-light); color: #991b1b; border-color: #fecaca; }

.admin-detail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.admin-detail__col {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.25rem;
}

.admin-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .375rem 1rem;
  margin: 0;
  font-size: .9375rem;
}
.admin-dl dt { color: var(--color-muted); }
.admin-dl dd { margin: 0; color: var(--color-text); }

.admin-messages {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.admin-message {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: .75rem 1rem;
  background: var(--color-bg);
}
.admin-message--user      { background: var(--color-surface); }
.admin-message--assistant { background: var(--color-asst-bubble); }
.admin-message__meta {
  display: flex;
  justify-content: space-between;
  font-size: .75rem;
  color: var(--color-muted);
  margin-bottom: .375rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.admin-message__role { font-weight: 600; }
.admin-message__body { font-size: .9375rem; color: var(--color-text); white-space: pre-wrap; }
.admin-message__body p { margin: 0 0 .5rem; }
.admin-message__body p:last-child { margin-bottom: 0; }

.admin-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: .75rem;
}
.admin-panel__head .admin-panel__title { margin: 0; }

.admin-pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}
.admin-pager__status { color: var(--color-muted); font-size: .875rem; }
.admin-pager__disabled { opacity: .4; pointer-events: none; cursor: default; }

.admin__hero-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Server health charts */
.sh-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.sh-card { margin-bottom: 0; }
.sh-chart__svg {
  display: block;
  width: 100%;
  height: auto;
}
.sh-chart__grid { stroke: var(--color-border); stroke-width: 1; }
.sh-chart__ylabel,
.sh-chart__xlabel {
  fill: var(--color-muted);
  font-size: 11px;
  font-family: inherit;
}

/* ============================================================
   Welcome / zero-state (new user home)
   ============================================================ */


/* ============================================================
   Billing (no-card persuasion page)
   ============================================================ */

.billing-hero {
  background: linear-gradient(135deg, #021a0c 0%, #0d3b1f 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 3rem 2.5rem;
  margin-bottom: 2.5rem;
  position: relative;
  overflow: hidden;
}
.billing-hero::after {
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(22,163,74,.35) 0%, transparent 70%);
  pointer-events: none;
}
.billing-hero__main { position: relative; z-index: 1; max-width: 640px; }
.billing-hero__badge {
  display: inline-block;
  background: rgba(22,163,74,.25);
  color: #86efac;
  border: 1px solid rgba(134,239,172,.4);
  padding: .25rem .75rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 1rem;
}
.billing-hero__title {
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0 0 1rem;
  line-height: 1.15;
}
.billing-hero__title-accent {
  display: block;
  color: #86efac;
  margin-top: .25rem;
}
.billing-hero__sub {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(255,255,255,.8);
  margin: 0 0 1.75rem;
}
.billing-hero__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.billing-hero__price {
  color: rgba(255,255,255,.6);
  font-size: .875rem;
}
.billing-hero__actions form { margin: 0; }

.billing-section__title {
  font-size: .875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-muted);
  margin: 0 0 1.25rem;
}

/* Timeline */
.billing-timeline { margin-bottom: 2.5rem; }
.billing-timeline__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.billing-timeline__step {
  position: relative;
  padding: 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.billing-timeline__step--now {
  border-color: var(--color-accent);
  background: var(--color-accent-light);
}
.billing-timeline__marker {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-muted);
  font-weight: 700;
  font-size: .9375rem;
}
.billing-timeline__step--now .billing-timeline__marker {
  background: var(--color-accent);
  color: #fff;
}
.billing-timeline__heading {
  margin: 0 0 .375rem;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--color-text);
}
.billing-timeline__copy {
  margin: 0;
  font-size: .875rem;
  color: var(--color-muted);
  line-height: 1.5;
}
.billing-timeline__copy strong { color: var(--color-text); }

/* Features grid */
.billing-features { margin-bottom: 2.5rem; }
.billing-features__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
.billing-feature {
  padding: 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color .15s, transform .15s;
}
.billing-feature:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}
.billing-feature__icon {
  display: block;
  font-size: 1.5rem;
  line-height: 1;
  margin-bottom: .75rem;
}
.billing-feature__name {
  margin: 0 0 .375rem;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--color-text);
}
.billing-feature__copy {
  margin: 0;
  font-size: .875rem;
  color: var(--color-muted);
  line-height: 1.5;
}

/* Trust strip */
.billing-trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  padding: 1.5rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 2.5rem;
}
.billing-trust__item {
  display: flex;
  gap: .875rem;
  align-items: flex-start;
}
.billing-trust__icon {
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
}
.billing-trust__item h4 {
  margin: 0 0 .25rem;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--color-text);
}
.billing-trust__item p {
  margin: 0;
  font-size: .8125rem;
  color: var(--color-muted);
  line-height: 1.5;
}

/* Final CTA */
.billing-final-cta {
  text-align: center;
  padding: 2.5rem 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 2rem;
}
.billing-final-cta__title {
  margin: 0 0 .5rem;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--color-text);
}
.billing-final-cta__sub {
  margin: 0 0 1.5rem;
  color: var(--color-muted);
  font-size: .9375rem;
}
.billing-final-cta form { margin: 0; display: inline-block; }

@media (max-width: 700px) {
  .billing-hero { padding: 2rem 1.5rem; }
  .billing-hero__title { font-size: 1.75rem; }
  .billing-timeline__steps { grid-template-columns: 1fr; }
  .billing-final-cta { padding: 2rem 1rem; }
  .billing-final-cta__title { font-size: 1.25rem; }
}

/* ============================================================
   Chat-first UI — suggestion chips, history drawer,
   mobile chat header, and bottom tab bar
   ============================================================ */

/* Suggestions in the empty chat state — rows you can read, not chips. */
.chat__suggestions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin-top: 2.75rem;
  width: 100%;
  max-width: 32rem;
}

.chat__suggestion {
  display: block;
  width: 100%;
  text-align: left;
  padding: 1rem 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--q-rule);
  border-radius: 0;
  font-family: inherit;
  font-size: .9375rem;
  font-weight: 400;
  color: var(--q-text);
  cursor: pointer;
  transition: opacity .15s;
}
.chat__suggestion:first-child { border-top: 1px solid var(--q-rule); }
.chat__suggestion:hover {
  background: none;
  border-color: var(--q-rule);
  opacity: .6;
}

/* Send is the one action on the page, so it gets the one accent. */
.chat__send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--q-accent);
  color: #fff;
  cursor: pointer;
  align-self: flex-end;
  transition: background .15s, transform .06s;
}
.chat__send:hover { background: #196537; }
.chat__send:active { transform: scale(.94); }
.chat__send svg { width: 18px; height: 18px; }

/* Chat header + drawer plumbing — inert on desktop (sidebar stays inline) */
.chat__header { display: none; }

.chat__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  color: var(--q-muted);
  cursor: pointer;
  background: none;
  border: 0;
  transition: color .15s;
}
.chat__icon-btn:hover { background: none; color: var(--q-text); }
.chat__icon-btn svg { width: 20px; height: 20px; }

.chat-drawer-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.chat-drawer-backdrop { display: none; }

/* Bottom tab bar — mobile only */
.tab-bar { display: none; }

/* ---- Mobile: tab bar, chat drawer, chat header (<=760px) ---- */
@media (max-width: 760px) {
  /* Fixed bottom tab bar sits over scrolling app pages — pad them clear */
  .layout--app .main {
    padding-bottom: calc(var(--tab-bar-height) + env(safe-area-inset-bottom));
  }

  /* Chat fills the gap between the top nav and the tab bar */
  .layout--chat .main {
    height: calc(100dvh - var(--nav-height) - var(--tab-bar-height) - env(safe-area-inset-bottom));
  }

  .chat { padding: 0 1rem; }
  .chat__messages { padding: 1rem 0 1rem; gap: 1.5rem; }
  .chat__input-area { padding: .5rem 0 1rem; }

  /* Compact contextual header replaces the centered date label */
  .chat__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .25rem .25rem;
    border-bottom: 1px solid var(--q-rule);
    flex-shrink: 0;
  }
  .chat__header-title {
    font-size: .72rem;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--q-faint);
    font-weight: 500;
  }
  .chat__date-label { display: none; }

  /* History drawer — off-canvas conversation list */
  .chat-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 82%;
    max-width: 320px;
    z-index: 300;
    display: flex;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: var(--shadow);
  }
  .chat-drawer-toggle:checked ~ .chat-sidebar { transform: translateX(0); }

  .chat-drawer-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 250;
    background: rgba(0,0,0,.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
  }
  .chat-drawer-toggle:checked ~ .chat-drawer-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* The tab bar itself */
  .tab-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    height: calc(var(--tab-bar-height) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
  }

  .tab-bar__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--color-muted);
    text-decoration: none;
    font-size: .6875rem;
    font-weight: 500;
    -webkit-tap-highlight-color: transparent;
  }
  .tab-bar__item--active { color: var(--color-accent); }
  .tab-bar__icon { width: 24px; height: 24px; }
  .tab-bar__label { line-height: 1; }
}

/* ============================================================
   Quiet UI
   ------------------------------------------------------------
   The app pages (home, training, exercise, plan, profile) are
   laid out on one rule: if a thing doesn't change what you do
   next, it isn't on the page. No cards, no boxes, no badges.
   Hairlines separate; type does the rest.

   Scoped under .q-* with its own --q-* tokens so it can't
   collide with the component styles above, which still dress
   the landing pages, chat, and the workout detail views.
   ============================================================ */
:root {
  --q-bg:          #fbfbfa;
  --q-text:        #1a1a19;
  --q-muted:       #84847e;
  --q-faint:       #b8b8b2;
  --q-rule:        #e8e8e4;
  --q-rule-strong: #d6d6d0;
  --q-accent:      #1f7a44;
  --q-warm:        #a8632a;
}

/* The quiet ground is a touch warmer than the app's default grey. */
body.layout--app { background: var(--q-bg); }

.q-page {
  max-width: 34rem;
  margin: 0 auto;
  padding: 4.5rem 1.5rem 4rem;
  color: var(--q-text);
}
@media (max-width: 560px) {
  .q-page { padding: 2.5rem 1.5rem 3rem; }
}

.q-eyebrow {
  font-size: .72rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--q-faint);
  font-weight: 500;
  margin: 0;
}

.q-title {
  font-size: 2.4rem;
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1.06;
  margin: 1rem 0 0;
  text-wrap: balance;
}
/* "Up next" label above the suggested session, so the hero reads as a
   recommendation and not a title for what was just logged. */
.q-kicker {
  font-size: .72rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--q-accent);
  font-weight: 600;
  margin: 1.6rem 0 0;
}

.q-title--hero {
  font-size: 3.4rem;
  line-height: 1.02;
  margin-top: 1.6rem;
}
/* When the kicker is present it owns the top gap; the title tucks under it. */
.q-kicker + .q-title--hero { margin-top: .4rem; }
@media (max-width: 560px) {
  .q-title { font-size: 2rem; }
  .q-title--hero { font-size: 2.6rem; }
}

.q-lede {
  font-size: 1.0625rem;
  color: var(--q-muted);
  margin: 1.1rem 0 0;
  max-width: 32ch;
  text-wrap: pretty;
}

.q-caution {
  font-size: .9375rem;
  color: var(--q-muted);
  margin: 1.1rem 0 0;
  max-width: 34ch;
  text-wrap: pretty;
}
.q-caution b { color: var(--q-warm); font-weight: 500; }

/* The one thing on the page you can act on. */
.q-action {
  display: inline-block;
  margin-top: 2.4rem;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--q-accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--q-accent) 35%, transparent);
  padding-bottom: 1px;
  transition: border-color .15s;
}
.q-action:hover { border-bottom-color: var(--q-accent); }

/* Filled primary action. (Distinct from .q-btn, which is a quiet text button
   used inside the app.) An inline-flex pill so the label + arrow sit centred. */
.q-primary {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: 2.4rem;
  padding: .72rem 1.4rem;
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1;
  color: #fff;
  background: var(--q-accent);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(3, 26, 12, .18), 0 3px 10px rgba(3, 26, 12, .10);
  transition: background .15s, transform .06s, box-shadow .15s;
}
.q-primary:hover {
  background: #196537;
  box-shadow: 0 2px 4px rgba(3, 26, 12, .20), 0 6px 18px rgba(3, 26, 12, .14);
}
.q-primary:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(3, 26, 12, .20);
}
.q-primary:focus-visible {
  outline: 2px solid var(--q-accent);
  outline-offset: 2px;
}
.q-primary + .q-fineprint { margin-top: 1rem; }

.q-quiet-link {
  display: inline-block;
  font-size: .8125rem;
  color: var(--q-muted);
  text-decoration: none;
  transition: color .15s;
}
.q-quiet-link:hover { color: var(--q-accent); }
.q-group .q-quiet-link { margin-top: 1.5rem; }

.q-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .55rem;
  margin-top: 1.5rem;
}
.q-quiet-link--button {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: .8125rem;
  color: var(--q-muted);
  cursor: pointer;
}
.q-quiet-link--button:hover { color: var(--q-accent); }

.q-back {
  display: inline-block;
  margin-bottom: 2.5rem;
  font-size: .8125rem;
  color: var(--q-faint);
  text-decoration: none;
  transition: color .15s;
}
.q-back:hover { color: var(--q-muted); }

/* ── Tabs ─────────────────────────────────────────────────── */
.q-tabs {
  display: flex;
  gap: 1.6rem;
  margin-top: 2.25rem;
  border-bottom: 1px solid var(--q-rule);
}
.q-tab {
  font-size: .875rem;
  color: var(--q-faint);
  text-decoration: none;
  padding: 0 0 .8rem;
  margin-bottom: -1px;
  border-bottom: 1px solid transparent;
  transition: color .15s;
}
.q-tab:hover { color: var(--q-muted); }
.q-tab[aria-selected="true"] {
  color: var(--q-text);
  border-bottom-color: var(--q-text);
}

/* ── Sections and rows ────────────────────────────────────── */
.q-group { margin-top: 4.5rem; }
.q-group--tight { margin-top: 2.75rem; }

.q-group__label {
  font-size: .72rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--q-faint);
  font-weight: 500;
  margin: 0;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--q-rule);
}

.q-row {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--q-rule);
  color: inherit;
  text-decoration: none;
  transition: opacity .15s;
}
.q-row:hover { opacity: .6; }
.q-row--static:hover { opacity: 1; }

.q-row__when {
  flex: 0 0 3.4rem;
  font-size: .8125rem;
  color: var(--q-faint);
  font-variant-numeric: tabular-nums;
}
.q-row__what { flex: 1; font-size: .9375rem; min-width: 0; }
.q-row__sub {
  font-size: .8125rem;
  color: var(--q-faint);
  margin-top: .15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.q-row__n {
  font-size: .8125rem;
  color: var(--q-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.q-empty {
  font-size: .9375rem;
  color: var(--q-faint);
  padding: 2.5rem 0;
}

/* ── Exercise rows ────────────────────────────────────────── */
.q-ex {
  display: grid;
  grid-template-columns: 1fr 5rem 4.25rem;
  align-items: center;
  gap: 1.25rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--q-rule);
  color: inherit;
  text-decoration: none;
  transition: opacity .15s;
}
.q-ex:hover { opacity: .6; }

.q-ex__name { font-size: .9375rem; }
.q-ex__meta {
  font-size: .8125rem;
  color: var(--q-faint);
  margin-top: .1rem;
  font-variant-numeric: tabular-nums;
}
.q-ex__spark { height: 22px; }
.q-spark { display: block; width: 100%; height: 22px; }

.q-ex__nums {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.q-ex__weight { font-size: .9375rem; }
.q-ex__weight small { color: var(--q-faint); font-size: .75rem; }
.q-ex__delta { font-size: .75rem; margin-top: .1rem; color: var(--q-faint); }
.q-ex__delta--up { color: var(--q-accent); }
.q-ex__delta--down { color: var(--q-warm); }

@media (max-width: 560px) {
  .q-ex { grid-template-columns: 1fr 4.25rem; }
  .q-ex__spark { display: none; }
}

/* ── Chart ────────────────────────────────────────────────── */
.q-chart { margin-top: 3rem; }
.q-chart__svg { display: block; width: 100%; height: 180px; }

/* Chart with axis labels: a y-axis gutter (max/min value) beside the plot. */
.q-chart__grid { display: flex; gap: .6rem; align-items: flex-start; }
.q-chart__yaxis {
  height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 11px 0 12px;
  text-align: right;
  font-size: .7rem;
  color: var(--q-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.q-chart__main { flex: 1; min-width: 0; }
.q-chart__foot {
  display: flex;
  justify-content: space-between;
  font-size: .75rem;
  color: var(--q-faint);
  font-variant-numeric: tabular-nums;
  margin-top: .6rem;
}

/* ── Data table ───────────────────────────────────────────── */
.q-data {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}
.q-data th {
  text-align: right;
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--q-faint);
  font-weight: 500;
  padding: 0 0 .9rem;
  border-bottom: 1px solid var(--q-rule);
}
.q-data th:first-child { text-align: left; }
.q-data td {
  text-align: right;
  padding: .9rem 0;
  border-bottom: 1px solid var(--q-rule);
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
}
.q-data td:first-child {
  text-align: left;
  color: var(--q-muted);
  font-size: .8125rem;
}

/* Clickable session rows — each links to the workout it came from. The date is
   the real link; its ::after stretches over the whole row so any cell works. */
.q-data__row { position: relative; cursor: pointer; transition: background .12s; }
.q-data__row:hover { background: color-mix(in srgb, var(--q-text) 3.5%, transparent); }
.q-data__link { color: inherit; text-decoration: none; }
.q-data__link::after { content: ""; position: absolute; inset: 0; }
.q-data__row:hover .q-data__link { color: var(--q-accent); }

/* ── Progress rows (goals, recovery) ──────────────────────── */
.q-prog {
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--q-rule);
}
.q-prog__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.q-prog__name { font-size: .9375rem; }
.q-prog--done .q-prog__name { color: var(--q-muted); }
.q-prog__pct {
  font-size: .8125rem;
  color: var(--q-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.q-prog__meta {
  font-size: .8125rem;
  color: var(--q-faint);
  margin: .2rem 0 0;
  font-variant-numeric: tabular-nums;
}

/* A rule, not a bar. Two pixels, so the accent still reads as a colour
   rather than an anti-aliased grey hairline. */
.q-prog__track {
  height: 2px;
  background: var(--q-rule-strong);
  margin-top: 1rem;
  position: relative;
  border-radius: 2px;
}
.q-prog__fill {
  position: absolute;
  inset: 0 auto 0 0;
  height: 2px;
  background: var(--q-accent);
  border-radius: 2px;
}
.q-prog__fill--warm { background: var(--q-warm); }

/* Recovery slider — a draggable version of the progress bar. Fill is painted
   with a gradient driven by the --fill custom property (set inline + by JS). */
.q-recovery { margin-top: 1rem; }
.q-recovery__slider {
  --recovery-color: var(--q-accent);
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(to right,
    var(--recovery-color) var(--fill, 0%),
    var(--q-rule-strong) var(--fill, 0%));
  cursor: pointer;
  outline: none;
}
.q-recovery__slider--warm { --recovery-color: var(--q-warm); }

.q-recovery__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--recovery-color);
  border: 2px solid var(--q-bg);
  box-shadow: 0 0 0 1px var(--q-rule-strong);
  cursor: grab;
  transition: transform .1s;
}
.q-recovery__slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.15); }
.q-recovery__slider::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border: 2px solid var(--q-bg);
  border-radius: 50%;
  background: var(--recovery-color);
  box-shadow: 0 0 0 1px var(--q-rule-strong);
  cursor: grab;
}
.q-recovery__slider::-moz-range-track { background: transparent; }
.q-recovery__slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--recovery-color) 30%, transparent);
}

.q-recovery__actions { margin-top: .85rem; }

.q-avoid { font-size: .8125rem; color: var(--q-faint); margin: .8rem 0 0; }
.q-avoid b { color: var(--q-muted); font-weight: 400; }

.q-prog__actions { display: flex; gap: 1rem; margin-top: 1rem; }
.q-prog__actions form { margin: 0; }

.q-btn {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: .8125rem;
  color: var(--q-muted);
  cursor: pointer;
  transition: color .15s;
}
.q-btn:hover { color: var(--q-text); }
.q-btn--danger:hover { color: var(--q-warm); }

/* ── Profile fields ───────────────────────────────────────── */
.q-field {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--q-rule);
  font-size: .9375rem;
}
.q-field__k { color: var(--q-muted); font-size: .875rem; }
.q-field__v { font-variant-numeric: tabular-nums; }

/* ── Nav, quieted on app pages only ───────────────────────── */
.layout--app .nav { background: var(--q-bg); border-bottom-color: transparent; }
.layout--app .nav__link {
  background: none;
  color: var(--q-faint);
  font-weight: 400;
  font-size: .8rem;
  padding: .35rem .5rem;
}
.layout--app .nav__link:hover { background: none; color: var(--q-muted); }
.layout--app .nav__link--active { background: none; color: var(--q-text); }

/* The accent belongs to the one thing you can act on, so the brand gives it
   up here. It keeps the green on the landing pages, where it is the identity. */
.layout--app .nav__brand {
  font-size: .8rem;
  font-weight: 600;
  color: var(--q-text);
}

/* A flash is an aside, not a banner. */
.layout--app .flash {
  max-width: 34rem;
  margin: 1.25rem auto -1.5rem;
  padding: 0 1.5rem;
  background: none;
  text-align: left;
  font-size: .8125rem;
  font-weight: 400;
}
.layout--app .flash--notice { color: var(--q-muted); }
.layout--app .flash--alert  { color: var(--q-warm); }

/* ── Chat, quieted to match the app pages ─────────────────── */
body.layout--chat { background: var(--q-bg); }
.layout--chat .nav { background: var(--q-bg); border-bottom-color: var(--q-rule); }
.layout--chat .nav__link {
  background: none;
  color: var(--q-faint);
  font-weight: 400;
  font-size: .8rem;
  padding: .35rem .5rem;
}
.layout--chat .nav__link:hover { background: none; color: var(--q-muted); }
.layout--chat .nav__link--active { background: none; color: var(--q-text); }
.layout--chat .nav__brand {
  font-size: .8rem;
  font-weight: 600;
  color: var(--q-text);
}
.layout--chat .flash {
  max-width: 34rem;
  margin: 1rem auto -.5rem;
  padding: 0 1.5rem;
  background: none;
  text-align: left;
  font-size: .8125rem;
  font-weight: 400;
}
.layout--chat .flash--notice { color: var(--q-muted); }
.layout--chat .flash--alert  { color: var(--q-warm); }

/* ── Workout detail ───────────────────────────────────────── */
.q-notes {
  margin-top: 2.25rem;
  font-size: .9375rem;
  color: var(--q-muted);
  max-width: 42ch;
  text-wrap: pretty;
}
.q-notes p { margin: 0 0 .5em; }
.q-notes p:last-child { margin-bottom: 0; }

.q-exercise { padding: 1.3rem 0; border-bottom: 1px solid var(--q-rule); }

/* A grid, not flex: the sparklines have to land on the same x down the
   column, and a flexed stat of varying width would push each one around.
   Columns are pinned so a row with no sparkline leaves its slot empty
   rather than sliding the stat leftwards. */
.q-exercise__head {
  display: grid;
  grid-template-columns: 1.5rem 1fr 70px 7.5rem;
  align-items: baseline;
  gap: 1.25rem;
}
.q-exercise__name  { grid-column: 2; }
.q-exercise__spark { grid-column: 3; }
.q-exercise__stat  { grid-column: 4; text-align: right; }

@media (max-width: 560px) {
  .q-exercise__head { grid-template-columns: 1.5rem 1fr auto; }
  .q-exercise__stat { grid-column: 3; }
}

/* The number is the order you did them in — it carries information. */
.q-exercise__index {
  flex: 0 0 1.5rem;
  font-size: .8125rem;
  color: var(--q-faint);
  font-variant-numeric: tabular-nums;
}
.q-exercise__name { flex: 1; font-size: .9375rem; min-width: 0; }
.q-exercise__stat {
  font-size: .8125rem;
  color: var(--q-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.q-exercise__note {
  margin: .7rem 0 0 2.75rem;
  font-size: .8125rem;
  color: var(--q-faint);
  text-wrap: pretty;
}

/* A set table nested under its movement, indented to clear the index. */
.q-data--nested {
  margin: .9rem 0 0 2.75rem;
  width: calc(100% - 2.75rem);
}
.q-data--nested th { padding-bottom: .6rem; }
.q-data--nested td { padding: .55rem 0; font-size: .8125rem; }
.q-data--nested td:first-child { color: var(--q-faint); }
.q-data--nested tbody tr:last-child td { border-bottom: 0; }
.q-data--nested small { color: var(--q-faint); font-size: .75rem; }

@media (max-width: 560px) {
  .q-data--nested { margin-left: 0; width: 100%; }
  .q-exercise__note { margin-left: 0; }
}

/* Raw log — the thing you typed, kept but folded away. */
.q-raw { margin-top: 3rem; }
.q-raw > summary {
  list-style: none;
  cursor: pointer;
  font-size: .8125rem;
  color: var(--q-muted);
  transition: color .15s;
}
.q-raw > summary::-webkit-details-marker { display: none; }
.q-raw > summary:hover { color: var(--q-accent); }
.q-raw__text {
  margin-top: 1rem;
  padding-left: 1rem;
  border-left: 1px solid var(--q-rule-strong);
  font-family: var(--font-mono);
  font-size: .8125rem;
  line-height: 1.7;
  color: var(--q-muted);
  white-space: pre-wrap;
  overflow-x: auto;
}

/* ============================================================
   Quiet marketing
   ------------------------------------------------------------
   The logged-out pages, on the same system as the app: type,
   hairlines, one accent. The robot illustrations are the one
   warm note and the only images on the page.
   ============================================================ */
body.layout--auth { background: var(--q-bg); }

/* The landing nav was dark to sit on a dark hero. There is no dark hero now. */
.layout--auth .nav,
.layout--landing .nav {
  background: var(--q-bg);
  border-bottom-color: transparent;
}
.layout--landing .nav__brand,
.layout--auth .nav__brand {
  color: var(--q-text);
  font-size: .8rem;
  font-weight: 600;
}
.layout--landing .nav__link,
.layout--auth .nav__link {
  background: none;
  color: var(--q-faint);
  font-weight: 400;
  font-size: .8rem;
  padding: .35rem .5rem;
}
.layout--landing .nav__link:hover,
.layout--auth .nav__link:hover { background: none; color: var(--q-muted); }

/* Sign up is the one action in the nav, so it is the one accent. */
.layout--landing .nav__link--cta,
.layout--auth .nav__link--cta {
  background: none;
  border: 0;
  color: var(--q-accent);
  font-weight: 500;
}
.layout--landing .nav__link--cta:hover,
.layout--auth .nav__link--cta:hover { background: none; color: var(--q-accent); opacity: .7; }

.layout--auth:not(.layout--landing) .main { display: block; }

/* Sit the nav on the same column as the page content, so the wordmark lines up
   over the hero instead of floating far out to the left. */
.layout--landing .nav__inner,
.layout--auth .nav__inner {
  max-width: 40rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media (max-width: 760px) {
  .layout--landing .nav__hamburger span,
  .layout--auth .nav__hamburger span { background: var(--q-text); }
  .layout--landing .nav__links,
  .layout--auth .nav__links { background: var(--q-bg); border-bottom: 1px solid var(--q-rule); }
}

/* ── Shell ────────────────────────────────────────────────── */
.q-page--wide { max-width: 40rem; }

.q-page--auth {
  max-width: 24rem;
  padding-top: 6rem;
}
@media (max-width: 560px) { .q-page--auth { padding-top: 3rem; } }

.q-fineprint {
  margin-top: 1rem;
  font-size: .8125rem;
  color: var(--q-faint);
}
.q-action + .q-fineprint { margin-top: 1.1rem; }

.q-prose {
  font-size: 1rem;
  color: var(--q-muted);
  max-width: 42ch;
  text-wrap: pretty;
  margin-top: 1.5rem;
}
.q-prose h3 {
  font-size: .9375rem;
  font-weight: 500;
  color: var(--q-text);
  margin: 2rem 0 .5rem;
}
.q-prose h3:first-child { margin-top: 0; }
.q-prose p { margin: 0; }
.q-prose em { font-style: italic; color: var(--q-text); }

/* ── Numbered steps ───────────────────────────────────────── */
.q-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: q-step;
}

.q-step {
  counter-increment: q-step;
  position: relative;
  padding: 1.6rem 0 1.6rem 3.4rem;
  border-bottom: 1px solid var(--q-rule);
}
.q-step:last-child { border-bottom: 0; }
/* A small badged number reads as a step marker, not a stray digit — and gives
   the row a fixed left rail so the title and body sit on a clean edge. */
.q-step::before {
  content: counter(q-step);
  position: absolute;
  left: 0;
  top: 1.5rem;
  width: 1.85rem;
  height: 1.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--q-accent) 28%, transparent);
  background: color-mix(in srgb, var(--q-accent) 7%, transparent);
  color: var(--q-accent);
  font-size: .8125rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
/* Inline elements made block by CSS — see the note in home_page.html.erb. */
.q-step__title {
  display: block;
  font-size: .9375rem;
  font-weight: 500;
  margin: 0;
}
.q-step__desc {
  display: block;
  margin: .35rem 0 0;
  font-size: .9375rem;
  color: var(--q-muted);
  max-width: 42ch;
  text-wrap: pretty;
}
.q-step__example {
  display: inline-block;
  margin: .85rem 0 0;
  font-family: var(--font-mono);
  font-size: .8125rem;
  color: var(--q-muted);
  padding: .5rem .75rem;
  background: color-mix(in srgb, var(--q-accent) 5%, var(--q-bg));
  border: 1px solid var(--q-rule);
  border-radius: 7px;
}

/* ── Definition rows ──────────────────────────────────────── */
.q-defs { margin: 0; }

.q-def {
  padding: 1.3rem 0;
  border-bottom: 1px solid var(--q-rule);
}
.q-def dt {
  font-size: .9375rem;
  color: var(--q-text);
  text-wrap: pretty;
}
.q-def dd {
  margin: .35rem 0 0;
  font-size: .875rem;
  color: var(--q-muted);
  max-width: 46ch;
  text-wrap: pretty;
}
.q-defs--tight .q-def { padding: 1rem 0; }

/* "Things you can say" — style each phrase as a sent chat bubble (this is a
   chat app, after all). Scoped away from the plain feature list (--tight). */
.q-defs:not(.q-defs--tight) .q-def {
  border-bottom: 0;
  padding: .6rem 0;
}
.q-defs:not(.q-defs--tight) .q-def dt {
  display: inline-block;
  padding: .65rem .9rem;
  background: color-mix(in srgb, var(--q-accent) 8%, var(--q-bg));
  border: 1px solid color-mix(in srgb, var(--q-accent) 16%, transparent);
  border-radius: 13px 13px 13px 4px;
  color: var(--q-text);
}
.q-defs:not(.q-defs--tight) .q-def dt strong { font-weight: 450; }
.q-defs:not(.q-defs--tight) .q-def dd {
  margin: .5rem 0 0 .3rem;
}

/* ── Export ───────────────────────────────────────────────── */
.q-export {
  margin-top: 2.25rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--q-rule);
}
.q-export:first-of-type { margin-top: 3.25rem; }

.q-export__head {
  display: flex;
  align-items: baseline;
  gap: .75rem;
}
.q-export__name {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -.01em;
}
.q-export__desc {
  margin: .8rem 0 0;
  font-size: .9375rem;
  color: var(--q-muted);
  max-width: 48ch;
  text-wrap: pretty;
}
.q-export__stats {
  margin: 1rem 0 0;
  font-family: var(--font-mono);
  font-size: .8125rem;
  color: var(--q-faint);
}
.q-export .q-primary { margin-top: 1.4rem; }

/* ── Rename movement (exercise detail) ────────────────────── */
.q-rename__summary {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .8125rem;
  color: var(--q-muted);
  cursor: pointer;
  list-style: none;
}
.q-rename__summary::-webkit-details-marker { display: none; }
.q-rename__summary::before { content: "✎"; color: var(--q-faint); }
.q-rename[open] .q-rename__summary {
  color: var(--q-text);
  margin-bottom: 1rem;
}
.q-rename__form {
  display: flex;
  gap: .75rem;
  align-items: center;
  flex-wrap: wrap;
}
.q-rename__form .q-input { flex: 1; min-width: 12rem; }
.q-rename__hint {
  margin: .85rem 0 0;
  font-size: .78rem;
  color: var(--q-faint);
  text-wrap: pretty;
}

/* Subtle capsule badge — a quiet label, not a loud pill. */
.q-badge {
  font-size: .7rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--q-accent);
  background: color-mix(in srgb, var(--q-accent) 9%, var(--q-bg));
  border: 1px solid color-mix(in srgb, var(--q-accent) 16%, transparent);
  padding: .2rem .5rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* ── Plain lists ──────────────────────────────────────────── */
.q-list {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
}
/* Flex so a wrapped second line hangs clear of the dash instead of
   tucking underneath it. */
.q-list li {
  display: flex;
  gap: .75rem;
  padding: .55rem 0;
  font-size: .875rem;
  color: var(--q-muted);
}
.q-list li::before {
  content: "";
  flex: 0 0 10px;
  height: 1px;
  margin-top: .7em;
  background: var(--q-rule-strong);
}
.q-list--split {
  columns: 2;
  column-gap: 2.5rem;
  margin-top: .5rem;
}
.q-list--split li { break-inside: avoid; }
@media (max-width: 560px) { .q-list--split { columns: 1; } }

/* ── Feature blocks ───────────────────────────────────────── */
.q-feature {
  margin-top: 4rem;
  padding-bottom: 0;
}
.q-feature__label {
  font-size: .72rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--q-faint);
  font-weight: 500;
  margin: 0;
}
.q-feature__title {
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.15;
  margin: .8rem 0 0;
  text-wrap: balance;
}
.q-feature__desc {
  margin: .9rem 0 0;
  font-size: 1rem;
  color: var(--q-muted);
  max-width: 44ch;
  text-wrap: pretty;
}
.q-feature__more { margin: 1.25rem 0 0; }

/* ── Mascots — the one warm note ──────────────────────────── */
.q-mascot-break {
  display: flex;
  justify-content: center;
  padding: 4.5rem 0 3rem;
}
.q-mascot { display: block; height: auto; opacity: .9; }

/* ── Closing call to action ───────────────────────────────── */
.q-cta {
  margin-top: 5.5rem;
  padding-top: 3.5rem;
  border-top: 1px solid var(--q-rule);
  text-align: center;
}
.q-cta .q-mascot { margin: 0 auto 1.75rem; }
.q-cta__title {
  font-size: 1.9rem;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.1;
  text-wrap: balance;
}
@media (max-width: 560px) { .q-cta__title { font-size: 1.5rem; } }
.q-cta__sub {
  margin: .9rem auto 0;
  font-size: 1rem;
  color: var(--q-muted);
  max-width: 40ch;
  text-wrap: pretty;
}
.q-cta__sub code {
  font-family: var(--font-mono);
  font-size: .85em;
  color: var(--q-text);
}
.q-cta .q-action { margin-top: 2rem; }
.q-cta .q-fineprint { margin-top: 1.1rem; }

/* ── Footer ───────────────────────────────────────────────── */
.q-footer {
  margin-top: 5rem;
  padding: 2rem 0 1rem;
  border-top: 1px solid var(--q-rule);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.q-footer__links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.q-footer__links a {
  font-size: .8125rem;
  color: var(--q-muted);
  text-decoration: none;
  transition: color .15s;
}
.q-footer__links a:hover { color: var(--q-accent); }
.q-footer__copy { font-size: .8125rem; color: var(--q-faint); margin: 0; }

/* ── Auth forms ───────────────────────────────────────────── */
.q-form { margin-top: 2.75rem; }

.q-field-group { margin-bottom: 1.75rem; }

.q-field-group__label {
  display: block;
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--q-faint);
  font-weight: 500;
  margin-bottom: .5rem;
}

/* Label with a "Forgot?" link sharing its row. */
.q-field-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.q-field-group__head .q-field-group__label { margin-bottom: .5rem; }
.q-field-group__aux {
  font-size: .75rem;
  color: var(--q-muted);
  text-decoration: none;
  transition: color .15s;
}
.q-field-group__aux:hover { color: var(--q-accent); }

/* An underline, not a box. Qualified with the element name so it outranks the
   base `input[type="text"]` rule, which carries one more specificity point
   than a bare class would. */
input.q-input {
  width: 100%;
  padding: .4rem 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--q-rule-strong);
  border-radius: 0;
  font-family: var(--font);
  font-size: 1rem;
  color: var(--q-text);
  outline: none;
  box-shadow: none;
  transition: border-color .15s;
}
input.q-input::placeholder { color: var(--q-faint); }
input.q-input:focus {
  border-bottom-color: var(--q-text);
  background: none;
  box-shadow: none;
}

.q-submit {
  margin-top: .5rem;
  padding: 0 0 1px;
  background: none;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--q-accent) 35%, transparent);
  border-radius: 0;
  font-family: var(--font);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--q-accent);
  cursor: pointer;
  transition: border-color .15s;
}
.q-submit:hover { border-bottom-color: var(--q-accent); }

.q-form__errors {
  margin-bottom: 1.75rem;
  padding-left: 1rem;
  border-left: 1px solid var(--q-warm);
  color: var(--q-warm);
  font-size: .875rem;
}
.q-form__errors p { margin: 0 0 .25rem; }
.q-form__errors p:last-child { margin-bottom: 0; }

/* ── Question and answer ──────────────────────────────────────
   Real headings, not a <dl>: the .md rendering that agents and
   search engines read needs the question to be a heading and the
   answer to be its own paragraph, not one run-on line.
   ------------------------------------------------------------ */
.q-qa__item {
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--q-rule);
}
.q-qa__q {
  font-size: .9375rem;
  font-weight: 500;
  color: var(--q-text);
  margin: 0;
  text-wrap: pretty;
}
.q-qa__a {
  margin-top: .45rem;
  font-size: .875rem;
  color: var(--q-muted);
  max-width: 48ch;
  text-wrap: pretty;
}
.q-qa__a p { margin: 0; }

/* A dt is a term, so a little weight separates it from its description
   both on the page and in the generated markdown. */
.q-def dt strong { font-weight: 500; }

/* ── Sparklines on the workout detail page ────────────────────
   The line is the movement's whole history, so the row is a link
   into that exercise's page rather than a decoration.
   ------------------------------------------------------------ */
.q-exercise__link { color: inherit; text-decoration: none; }
.q-exercise__link:hover { color: var(--q-accent); }

.q-exercise__spark {
  flex: 0 0 70px;
  align-self: center;   /* the row is baseline-aligned; an svg has no baseline */
  display: block;
  height: 22px;
  opacity: .85;
  transition: opacity .15s;
}
.q-exercise__spark:hover { opacity: 1; }

/* Logged once: a level line, dimmer, and not a link — there's no page to open. */
.q-exercise__spark--flat,
.q-exercise__spark--flat:hover { opacity: .4; }

@media (max-width: 560px) {
  .q-exercise__spark { display: none; }
}

/* ── Editing ──────────────────────────────────────────────────
   Same underline fields as the auth forms. Textarea and select
   need their own element-qualified selectors: the base sheet
   styles `textarea` and browsers style `select` natively, and
   both outrank a bare class.
   ------------------------------------------------------------ */
textarea.q-input,
select.q-input {
  width: 100%;
  padding: .4rem 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--q-rule-strong);
  border-radius: 0;
  font-family: var(--font);
  font-size: 1rem;
  color: var(--q-text);
  outline: none;
  box-shadow: none;
  transition: border-color .15s;
}
textarea.q-input:focus,
select.q-input:focus {
  border-bottom-color: var(--q-text);
  background: none;
  box-shadow: none;
}
textarea.q-input::placeholder { color: var(--q-faint); }

textarea.q-textarea { resize: vertical; line-height: 1.6; min-height: 4.5rem; }

select.q-select {
  appearance: none;
  cursor: pointer;
  padding-right: 1.25rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--q-faint) 50%),
                    linear-gradient(135deg, var(--q-faint) 50%, transparent 50%);
  background-position: calc(100% - 9px) 1.05rem, calc(100% - 5px) 1.05rem;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}

input.q-input--short { max-width: 12rem; }

/* Number fields carry their own spinners; the digits are enough. */
input.q-input[type="number"] { appearance: textfield; }
input.q-input[type="number"]::-webkit-outer-spin-button,
input.q-input[type="number"]::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.q-field-group__hint {
  margin: .5rem 0 0;
  font-size: .75rem;
  color: var(--q-faint);
}

/* ── Checkbox toggle ──────────────────────────────────────── */
.q-check {
  display: flex;
  align-items: center;
  gap: .6rem;
  cursor: pointer;
}

.q-check__input {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--q-accent);
  cursor: pointer;
  flex: none;
}

.q-check__label {
  font-size: .9rem;
  color: var(--q-text);
}

/* ── Exercise rows in the editor ──────────────────────────── */
.q-exercise-edit {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--q-rule);
  transition: opacity .15s;
}

.q-exercise-edit__head {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
}
.q-exercise-edit__head .q-input--name {
  flex: 1;
  font-size: .9375rem;
}

.q-exercise-edit__remove {
  flex: 0 0 auto;
  cursor: pointer;
  line-height: 1;
}
.q-exercise-edit__remove-mark {
  display: block;
  font-size: 1.1rem;
  color: var(--q-faint);
  transition: color .15s;
}
.q-exercise-edit__remove:hover .q-exercise-edit__remove-mark { color: var(--q-warm); }
.exercise-destroy-check:focus-visible + .q-exercise-edit__remove-mark {
  outline: 2px solid var(--q-accent);
  outline-offset: 2px;
}

/* Marked for removal — struck through until you save, not vanished. */
.q-exercise-edit:has(.exercise-destroy-check:checked) { opacity: .4; }
.q-exercise-edit:has(.exercise-destroy-check:checked) .q-input--name {
  text-decoration: line-through;
  text-decoration-color: var(--q-warm);
}
.exercise-destroy-check:checked + .q-exercise-edit__remove-mark { color: var(--q-warm); }

.q-exercise-edit__fields {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem 1.5rem;
  margin: 1.4rem 0 0 2.75rem;
}
.q-exercise-edit__fields .q-field-group { margin-bottom: 0; }
.q-field-group--wide { grid-column: 1 / -1; }

@media (max-width: 640px) {
  .q-exercise-edit__fields {
    grid-template-columns: repeat(2, 1fr);
    margin-left: 0;
  }
}

/* ── Form actions ─────────────────────────────────────────── */
.q-actions {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--q-rule);
}
.q-quiet-link--danger:hover { color: var(--q-warm); }