/* ============================================================
   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; }

.admin-notice {
  background: var(--color-accent-light);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: .75rem 1rem;
  margin: 0 0 1.5rem;
  font-size: .9375rem;
  color: var(--color-text);
}
.admin-notice--alert { background: var(--color-danger-light); color: #991b1b; }
.admin-notice code { font-size: .875em; }

.admin-note {
  color: var(--color-muted);
  font-size: .8125rem;
  line-height: 1.5;
  margin: 1rem 0 0;
}
.admin-note code { font-size: .9375em; }

.admin-stat__value.is-alert { color: var(--color-danger); }

/* Revenue — collected cash, one bar per month */
.revenue-bars {
  display: flex;
  align-items: flex-end;
  gap: .5rem;
  height: 200px;
  padding-top: 1.25rem;
}
.revenue-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  gap: .25rem;
  min-width: 0;
}
.revenue-bar__track {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
}
.revenue-bar__fill {
  width: 100%;
  min-height: 2px;
  background: var(--color-accent);
  border-radius: 4px 4px 0 0;
}
.revenue-bar__value {
  font-size: .6875rem;
  color: var(--color-muted);
  white-space: nowrap;
}
.revenue-bar__label {
  font-size: .75rem;
  color: var(--color-muted);
}

/* 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 single content column every logged-out page shares. The nav reads it
     too, so the wordmark stays on the same left edge as the page below it —
     they drifted apart once already when the column moved and the nav didn't. */
  --q-marketing-width: 48rem;
}

/* 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;
}
/* The training lists put a list of exercise names in __sub, where clipping to
   one line is right. On the marketing index rows it is a full sentence, which
   would ellipsize to nothing on a phone. */
.q-row__sub--wrap {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.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; }
}

/* ── Share ────────────────────────────────────────────────── */
/* Top-right of the page, level with the back link: copy, X, Facebook. Quiet
   until pointed at — a share button is an offer, not an instruction. */
.q-page__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
/* .q-back owns the gap under the whole row, so the row itself adds none. */
.q-page__head .q-back { margin-bottom: 0; }
.q-page__head + .q-eyebrow { margin-top: 2.5rem; }

.q-share { display: flex; gap: .25rem; margin: -.35rem 0 0; }
.q-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--q-faint);
  cursor: pointer;
  transition: color .15s, background-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.q-share__btn:hover { color: var(--q-text); background: color-mix(in srgb, var(--q-text) 6%, transparent); }
.q-share__btn:active { background: color-mix(in srgb, var(--q-text) 11%, transparent); }
.q-share__btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--q-accent) 50%, transparent);
  outline-offset: 1px;
}
.q-share__icon { width: .95rem; height: .95rem; display: block; }
/* The tick lives in the button alongside the link glyph and takes its place
   for a moment after a copy, so the button never changes size. */
.q-share__icon--done { display: none; }
.q-share__btn.is-copied { color: var(--q-accent); }
.q-share__btn.is-copied .q-share__icon { display: none; }
.q-share__btn.is-copied .q-share__icon--done { display: block; }

/* The one outbound line on a public share page. */
.q-shared-by {
  margin-top: 3.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--q-rule);
  font-size: .8125rem;
  color: var(--q-faint);
}
.q-shared-by__link { color: var(--q-muted); text-decoration: none; border-bottom: 1px solid var(--q-rule); }
.q-shared-by__link:hover { color: var(--q-text); }

/* ── Stat block ───────────────────────────────────────────── */
/* One line under the title, readings separated by a middot. Each reading is
   arrow, amount, then what it's measured over — so a glance down the row
   answers "which way" before it asks "how much". */
.q-stats {
  list-style: none;
  margin: .9rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .45rem;
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
}
.q-stat {
  display: flex;
  align-items: baseline;
  gap: .3rem;
}
/* Trailing rather than leading, so a row that wraps on a narrow screen ends
   with the separator instead of opening on one. */
.q-stat:not(:last-child)::after { content: "·"; color: var(--q-faint); margin-left: .15rem; }
.q-stat__arrow { font-size: .78rem; color: var(--q-faint); }
.q-stat--up   .q-stat__arrow { color: var(--q-accent); }
.q-stat--down .q-stat__arrow { color: var(--q-warm); }
.q-stat__v { color: var(--q-text); font-weight: 500; }
.q-stat__k { color: var(--q-muted); }

/* ── 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__plot { position: relative; }

/* The session dots. They sit in HTML rather than the SVG because the viewBox
   is stretched to the container, which would squash an <circle> into an
   ellipse — a CSS circle keeps its shape at any container width. */
.q-chart__dot {
  position: absolute;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--q-chart-ink, var(--q-accent));
  opacity: .85;
  pointer-events: none;
}
.q-chart__dot--last {
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  opacity: 1;
}

/* Hover readout: a hairline down the session, a ring on its dot, and the
   numbers above. Nothing is drawn until the pointer asks for it. */
.q-chart__cursor {
  position: absolute;
  top: var(--q-chart-top, 10%);
  height: calc(var(--q-chart-base, 92%) - var(--q-chart-top, 10%));
  width: 1px;
  margin-left: -0.5px;
  background: var(--q-rule-strong);
  pointer-events: none;
}
.q-chart__ring {
  position: absolute;
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border: 1.5px solid var(--q-chart-ink, var(--q-accent));
  border-radius: 50%;
  background: var(--q-bg);
  pointer-events: none;
}
.q-chart__tip {
  position: absolute;
  transform: translate(-50%, calc(-100% - 0.85rem));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  padding: .35rem .55rem;
  background: var(--q-text);
  color: var(--q-bg);
  border-radius: 4px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  z-index: 2;
}
/* display:flex would otherwise beat the UA's [hidden] rule and leave the
   tooltip on screen. */
.q-chart__tip[hidden] { display: none; }
.q-chart__tip--below { transform: translate(-50%, 0.85rem); }
.q-chart__tip-v { font-size: .8rem; font-weight: 600; }
.q-chart__tip-d { font-size: .68rem; opacity: .62; }
.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; }

/* The sessions behind a goal's percent — dates link to the workout. */
.q-prog__log {
  list-style: none;
  margin: .9rem 0 0;
  padding: 0;
  font-size: .8125rem;
  color: var(--q-faint);
  font-variant-numeric: tabular-nums;
}
.q-prog__logrow {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  padding: .2rem 0;
}
.q-prog__logdate { color: var(--q-muted); text-decoration: none; white-space: nowrap; }
.q-prog__logdate:hover { color: var(--q-accent); }
.q-prog__logset { flex: 1; min-width: 0; }
.q-prog__logpct { white-space: nowrap; }

.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. Same variable and the
   same 1.5rem gutter as .q-page, which is what makes the left edges match. */
.layout--landing .nav__inner,
.layout--auth .nav__inner {
  max-width: var(--q-marketing-width);
  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 ────────────────────────────────────────────────── */

/* One width for every logged-out marketing page, set by --q-marketing-width
   with the rest of the tokens. Before this there were three: .q-page (34rem)
   on pricing/about/faq, and .q-page--wide declared twice — 40rem here and
   60rem down in the insights section, where the later rule silently won for
   the whole site. */
.q-page--wide { max-width: var(--q-marketing-width); }

.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: 2.5rem 0 1rem;
  border-top: 1px solid var(--q-rule);
}

/* Every marketing page is now one width, so this resolves to four columns
   across and collapses to two, then one, as the viewport narrows. The 10rem
   track is the widest that still fits four inside the marketing column —
   "WORKOUT CHAT FOR" is the longest heading and clears it. */
.q-footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 2.25rem 1.25rem;
  align-items: start;
}

/* A column can hold more than one group — the last one stacks "Switching
   from" and "Account" so the grid stays four wide instead of five. */
.q-footer__group + .q-footer__group { margin-top: 2.25rem; }

.q-footer__head {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--q-text);
  margin: 0 0 .9rem;
}

.q-footer__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.q-footer__list a {
  font-size: .8125rem;
  color: var(--q-muted);
  text-decoration: none;
  transition: color .15s;
}
.q-footer__list a:hover { color: var(--q-accent); }

.q-footer__base {
  margin-top: 2.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--q-rule);
}
.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); }

/* ============================================================
   Insights
   ------------------------------------------------------------
   The one page in the app that uses cards. Everywhere else a
   hairline is enough, because everywhere else the page reads
   top to bottom. A dashboard doesn't: it's five unrelated
   readings sharing a screen, and a card is what says where one
   reading stops and the next begins.

   Same tokens as the rest of the quiet UI — the surface is
   white against the warm ground, the rules are the same
   hairlines, and there is still only one accent.
   ============================================================ */
/* Scoped to the dashboard. Unscoped, this overrode the marketing column for
   the whole site purely by being further down the file. Insights is the only
   page that sets .layout--wide on the body. */
.layout--wide .q-page--wide { max-width: 60rem; }
/* The flash sits above the page in the layout, so it needs telling that
   this page's column is a wider one. */
.layout--wide .flash { max-width: 60rem; }

.q-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.q-title--flush { margin-top: 0; }

/* ── Period menu ──────────────────────────────────────────── */
.q-menu { position: relative; flex: none; }
.q-menu__summary {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  list-style: none;
  cursor: pointer;
  font-size: .9375rem;
  color: var(--q-accent);
  padding: .2rem 0;
  -webkit-tap-highlight-color: transparent;
}
.q-menu__summary::-webkit-details-marker { display: none; }
.q-menu__caret { width: .85rem; height: .85rem; transition: transform .15s; }
.q-menu[open] .q-menu__caret { transform: rotate(180deg); }

.q-menu__list {
  position: absolute;
  right: 0;
  top: calc(100% + .5rem);
  z-index: 20;
  min-width: 11rem;
  max-height: 19rem;
  overflow-y: auto;
  padding: .35rem;
  background: #fff;
  border: 1px solid var(--q-rule);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(20, 20, 16, .04), 0 8px 24px rgba(20, 20, 16, .08);
}
/* A menu hanging off the left edge of its trigger rather than the right. */
.q-menu__list--left { left: 0; right: auto; }

.q-menu__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .45rem .6rem;
  border-radius: 6px;
  font-size: .875rem;
  color: var(--q-muted);
  text-decoration: none;
}
.q-menu__item:hover { background: color-mix(in srgb, var(--q-text) 4%, transparent); color: var(--q-text); }
.q-menu__item.is-current { color: var(--q-accent); }
.q-menu__name { white-space: nowrap; }
/* What the number beside each movement counts. Without it the column is a
   row of digits nobody can name. */
.q-menu__label {
  margin: 0 0 .3rem;
  padding: .35rem .6rem .5rem;
  border-bottom: 1px solid var(--q-rule);
  font-size: .66rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--q-faint);
}
.q-menu__meta { color: var(--q-faint); font-size: .78rem; font-variant-numeric: tabular-nums; }

/* The picker as a page-title: the movement's own name is the control. */
.q-menu--title .q-menu__summary {
  gap: .45rem;
  padding: 0;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: -.03em;
  color: var(--q-text);
}
.q-menu--title .q-menu__caret { width: 1.05rem; height: 1.05rem; color: var(--q-faint); }
.q-menu--title .q-menu__summary:hover .q-menu__caret { color: var(--q-accent); }

/* ── Headline tiles ───────────────────────────────────────── */
/* Four readings across, divided by rules rather than boxed —
   they are one row of the same measurement, not four cards. */
.q-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 2.5rem;
}
.q-tile { padding: 0 1.5rem; border-left: 1px solid var(--q-rule); }
.q-tile:first-child { padding-left: 0; border-left: 0; }

.q-tile__k {
  font-size: .72rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--q-muted);
  font-weight: 500;
  margin: 0;
}
.q-tile__v {
  font-size: 2.1rem;
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.1;
  margin: .55rem 0 0;
  font-variant-numeric: tabular-nums;
}
.q-tile__v small {
  font-size: .9rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--q-muted);
  margin-left: .3rem;
}
.q-tile__note {
  font-size: .8125rem;
  color: var(--q-muted);
  margin: .5rem 0 0;
  font-variant-numeric: tabular-nums;
}
.q-tile__note--up   { color: var(--q-accent); }
.q-tile__note--down { color: var(--q-warm); }

/* Grid children default to min-width:auto, and "598,745" is one
   unbreakable word — without this the tiles push the page wider than
   the phone rather than shrinking to it. */
.q-tile { min-width: 0; }

@media (max-width: 760px) {
  .q-tiles { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 0; }
  .q-tile { padding: 0 1rem; }
  .q-tile:nth-child(odd) { padding-left: 0; border-left: 0; }
  .q-tile__v { font-size: 1.75rem; }
}
@media (max-width: 430px) {
  .q-tile__v { font-size: 1.4rem; }
  .q-tile__k { font-size: .68rem; letter-spacing: .08em; }
}

/* ── Card ─────────────────────────────────────────────────── */
.q-card {
  margin-top: 1.5rem;
  padding: 1.6rem 1.75rem;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--q-rule);
  border-radius: 14px;
}
.q-tiles + .q-card { margin-top: 2.75rem; }

.q-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.q-card__more {
  font-size: .8125rem;
  color: var(--q-accent);
  text-decoration: none;
  white-space: nowrap;
}
.q-card__more:hover { opacity: .7; }

.q-card__figure {
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: -.035em;
  margin: 1.1rem 0 0;
  font-variant-numeric: tabular-nums;
}
.q-card__figure small {
  font-size: .85rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--q-muted);
  margin-left: .3rem;
}

/* ── Featured movement ────────────────────────────────────── */
.q-feature__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.q-feature__title { min-width: 0; }

/* Why this movement and not another. The card chooses one on the reader's
   behalf, so it owes them a sentence saying so. */
.q-feature__why {
  font-size: .8125rem;
  color: var(--q-muted);
  margin: .3rem 0 0;
}
.q-feature__sep { color: var(--q-faint); margin: 0 .15rem; }
.q-feature__link { color: var(--q-accent); text-decoration: none; }
.q-feature__link:hover { opacity: .7; }

/* The one badge in the app. (.q-badge, above, is the export page's
   label — a different thing wearing a similar shape.) */
.q-pr {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .75rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--q-accent) 8%, transparent);
  color: var(--q-accent);
  font-size: .8125rem;
  font-weight: 500;
  white-space: nowrap;
}
.q-pr__icon { width: .95rem; height: .95rem; }
.q-pr__when { color: var(--q-muted); font-weight: 400; }

.q-feature__body {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
  margin-top: 1.5rem;
}

.q-figures { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.q-figure { padding-left: 1.5rem; border-left: 1px solid var(--q-rule); }
.q-figure:first-child { padding-left: 0; border-left: 0; }

.q-figure__k {
  font-size: .8125rem;
  color: var(--q-muted);
  margin: 0;
}
.q-figure__k--second { margin-top: 1.1rem; }
.q-figure__v {
  font-size: 2.4rem;
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1.1;
  margin: .3rem 0 0;
  font-variant-numeric: tabular-nums;
}
.q-figure__v--sm { font-size: 1.4rem; }
.q-figure__v small {
  font-size: .85rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--q-muted);
  margin-left: .25rem;
}
.q-figure__note {
  font-size: .8125rem;
  color: var(--q-muted);
  margin: .45rem 0 0;
  font-variant-numeric: tabular-nums;
}
.q-figure__note--up   { color: var(--q-accent); }
.q-figure__note--down { color: var(--q-warm); }

/* The chart is a passenger here, not the subject — shorter than
   on the exercise page, and with no gap above it. */
.q-feature__chart .q-chart { margin-top: 0; }
.q-feature__chart .q-chart__svg,
.q-feature__chart .q-chart__yaxis { height: 132px; }

@media (max-width: 760px) {
  .q-feature__body { grid-template-columns: 1fr; gap: 1.5rem; }
  .q-figure__v { font-size: 2rem; }
}

/* ── Goals ────────────────────────────────────────────────── */
.q-goals {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) auto;
  gap: 1.5rem 2rem;
  align-items: center;
}
.q-goals__head { align-self: start; }
.q-goals__edit {
  display: inline-block;
  margin-top: .4rem;
  font-size: .8125rem;
  color: var(--q-accent);
  text-decoration: none;
}
.q-goals__edit:hover { opacity: .7; }

.q-goals__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1.5rem 2rem;
}
.q-goal { border-left: 1px solid var(--q-rule); padding-left: 1.5rem; min-width: 0; }
.q-goal:first-child { border-left: 0; padding-left: 0; }
.q-goal__name { font-size: .9375rem; margin: 0; }
.q-goal__target { font-size: .8125rem; color: var(--q-muted); margin: .15rem 0 0; }
.q-goal__bar { display: flex; align-items: center; gap: .75rem; margin-top: .9rem; }
.q-goal__bar .q-prog__track { flex: 1; margin-top: 0; }
.q-goal__pct {
  font-size: .8125rem;
  color: var(--q-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.q-goal__none { font-size: .875rem; color: var(--q-faint); margin: 0; }

.q-goals__add {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  color: var(--q-accent);
  text-decoration: none;
  white-space: nowrap;
}
.q-goals__plus {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--q-accent) 8%, transparent);
}
.q-goals__plus svg { width: 1.15rem; height: 1.15rem; }
.q-goals__add:hover { opacity: .7; }

@media (max-width: 760px) {
  .q-goals { grid-template-columns: 1fr; gap: 1.25rem; }
  .q-goal { border-left: 0; padding-left: 0; }
  .q-goals__add { flex-direction: row; justify-content: flex-start; }
}

/* ── Records ──────────────────────────────────────────────── */
/* auto-fit, not four fixed columns: a window with no most-improved
   movement has three records to show and they should spread across the
   card rather than leaving a hole at the end. */
.q-marks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1.5rem;
}
.q-mark { display: flex; align-items: flex-start; gap: .85rem; min-width: 0; }
.q-mark > div { min-width: 0; }
.q-mark__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--q-accent) 8%, transparent);
  color: var(--q-accent);
}
.q-mark__icon--warm {
  background: color-mix(in srgb, var(--q-warm) 10%, transparent);
  color: var(--q-warm);
}
.q-mark__icon svg { width: 1.05rem; height: 1.05rem; }

.q-mark__k { font-size: .8125rem; color: var(--q-muted); margin: 0; }
.q-mark__v {
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -.02em;
  margin: .2rem 0 0;
}
.q-mark__link { color: inherit; text-decoration: none; }
.q-mark__link:hover { color: var(--q-accent); }
.q-mark__note {
  font-size: .8125rem;
  color: var(--q-muted);
  margin: .3rem 0 0;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) { .q-marks { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .q-marks { grid-template-columns: 1fr; } }

/* ── The two columns underneath ───────────────────────────── */
.q-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}
.q-split .q-card { margin-top: 1.5rem; }
@media (max-width: 760px) {
  .q-split { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 480px) {
  .q-card { padding: 1.3rem 1.2rem; }
}

/* A row inside a card carries its own hairline and a chevron; the
   last one drops the rule so it doesn't underline the card's edge. */
.q-row--card { padding: .95rem 0; }
.q-card .q-row--card:last-child { border-bottom: 0; padding-bottom: 0; }
.q-card__head + .q-row--card { margin-top: .5rem; }
.q-row__chev { color: var(--q-faint); font-size: 1.1rem; line-height: 1; }

/* ── Volume bars ──────────────────────────────────────────── */
.q-bars__grid { display: flex; gap: .6rem; align-items: flex-start; margin-top: 1.5rem; }
.q-bars__yaxis {
  height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: right;
  font-size: .7rem;
  color: var(--q-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.q-bars__main { flex: 1; min-width: 0; }

.q-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 110px;
  border-bottom: 1px solid var(--q-rule);
}
.q-bars__bar {
  flex: 1;
  min-width: 2px;
  border-radius: 1px 1px 0 0;
  background: color-mix(in srgb, var(--q-accent) 45%, transparent);
}
/* A rest day is a gap, not a bar — but it still holds its column, so the
   dates under the row stay where they belong. */
.q-bars__bar--empty { background: none; }

/* Six destinations fit a phone, but only just — the labels give up a
   little size before they give up a letter. */
@media (max-width: 400px) {
  .tab-bar__item { gap: 1px; font-size: .625rem; }
  .tab-bar__icon { width: 21px; height: 21px; }
}