/* FitMaxxing — single stylesheet. Self-hosted font, no frameworks, no JS dependency.
 *
 * Brand comes from the printed card: near-black, a gold-to-bronze gradient on "Fit",
 * white on "maxxing", geometric sans, lowercase letterspaced tagline.
 *
 * Gold is a DISPLAY colour — wordmark, eyebrows, buttons, rules. Contrast on --bg is not
 * the reason: --gold is 7.3:1 and --gold-hi is 12:1, both comfortably past AA. The reason
 * is that an accent used for body copy stops being an accent. Body text stays --text.
 *
 * The one real contrast trap is gold as a BACKGROUND. White on gold is ~2.2:1. Anything
 * sitting on a gold fill uses the near-black label colour, and the button gradient stops
 * at --gold rather than --gold-deep to keep the worst case at 7:1.
 */

/* Montserrat, latin subset, variable 500-800. Self-hosted deliberately: loading it from
 * Google's CDN would send every visitor's IP to a third party, which contradicts the
 * privacy notice. ~38KB, one request, swap so text renders immediately. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  /* Relative, NOT root-relative. BASE_PATH rewriting happens in write() for HTML only —
   * this stylesheet is copied verbatim, so a leading slash would 404 under /FitMaxxing/
   * and the page would silently fall back to the system font. Relative to the stylesheet
   * resolves correctly at both the subpath and the root domain. */
  src: url('fonts/montserrat-latin-var.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #0b0d10;
  --bg-2: #121519;
  --bg-3: #171b21;
  --line: #262c34;
  --text: #e8ecf1;
  --muted: #9aa5b1;

  /* The card's gold, sampled: a warm bronze deepening to antique gold. */
  --gold: #c9962f;
  --gold-hi: #e8c86a;
  --gold-deep: #9c6f1d;
  --gold-ink: #e3bb63; /* the only gold light enough to use as small text on --bg */
  --gold-grad: linear-gradient(100deg, var(--gold-hi) 0%, var(--gold) 45%, var(--gold-deep) 100%);
  /* Buttons stop at --gold. Running the fill all the way to --gold-deep would put the
   * label at 4.17:1 over the right-hand end — this keeps the worst case at 7:1. */
  --gold-grad-solid: linear-gradient(100deg, var(--gold-hi) 0%, var(--gold) 100%);

  --accent: var(--gold);
  --accent-2: var(--gold-hi);
  --ok: #35c48a;
  --warn: #ffb020;
  --bad: #ff5a5a;
  --radius: 12px;
  --wrap: 1120px;
  --narrow: 720px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: 'Montserrat', var(--font);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; }

a { color: var(--text); text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); }

/* Display face on headings only. Body copy stays on the system stack — Montserrat is a
 * geometric sans built for signage, and it is measurably harder to read at 17px over
 * 1,800 words than the reader's own UI font. Brand where it is seen, legibility where it
 * is read. */
h1, h2, h3, h4 {
  font-family: var(--display);
  line-height: 1.18; letter-spacing: -0.02em; margin: 0 0 .5em; font-weight: 750;
}
h1 { font-size: clamp(2rem, 5vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.05rem); }
h3 { font-size: 1.22rem; }
p { margin: 0 0 1.1em; }

code, pre { font-family: var(--mono); font-size: .9em; }
code { background: var(--bg-3); padding: .15em .4em; border-radius: 5px; }
pre { background: var(--bg-3); padding: 1rem; border-radius: var(--radius); overflow-x: auto; border: 1px solid var(--line); }
pre code { background: none; padding: 0; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, var(--narrow)); }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -9999px; top: 0; background: var(--gold);
  color: #17120a; font-weight: 700; padding: .6rem 1rem; z-index: 100; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

.eyebrow {
  text-transform: uppercase; letter-spacing: .1em; font-size: .72rem;
  font-weight: 700; color: var(--accent-2); margin: 0 0 .5em;
}

/* ------------------------------------------------------------- header */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 1.5rem; min-height: 64px; }
.brand {
  display: flex; align-items: center; gap: .6rem; text-decoration: none;
  font-family: var(--display); font-weight: 800; letter-spacing: -.02em;
}
/* The card's wordmark: "Fit" in the gold gradient, "maxxing" in white. Rendered as text
 * rather than an image so it stays crisp, selectable and searchable. The gradient clips to
 * the glyphs; background-clip: text is safe in every browser we care about, and the
 * fallback is simply solid gold. */
.brand-fit {
  color: var(--gold);
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .brand-fit { color: transparent; }
}
/* No separate logo mark — the printed card is the wordmark alone, and a gold tile beside a
 * gold "Fit" just competes with it. */
.brand-name { font-size: 1.15rem; }

.site-nav { margin-left: auto; display: flex; align-items: center; gap: 1.35rem; }
.site-nav a { text-decoration: none; font-size: .93rem; color: var(--muted); font-weight: 500; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--text); }
.nav-cta {
  background: var(--gold-grad-solid); background-color: var(--gold); color: #17120a !important;
  padding: .5rem .9rem; border-radius: 8px; font-weight: 750;
}
.navtoggle, .navbtn { display: none; }

@media (max-width: 800px) {
  .navbtn {
    display: block; margin-left: auto; width: 40px; height: 34px; cursor: pointer;
    position: relative; border: 1px solid var(--line); border-radius: 8px;
  }
  .navbtn span, .navbtn::before, .navbtn::after {
    content: ""; position: absolute; left: 9px; right: 9px; height: 2px;
    background: var(--text); border-radius: 2px;
  }
  .navbtn span { top: 15px; }
  .navbtn::before { top: 9px; }
  .navbtn::after { top: 21px; }
  .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-2); border-bottom: 1px solid var(--line); padding: .5rem 0;
  }
  .site-nav a { padding: .8rem 1.25rem; }
  .nav-cta { margin: .5rem 1.25rem; text-align: center; }
  .navtoggle:checked ~ .site-nav { display: flex; }
}

/* --------------------------------------------------------------- hero */

.hero {
  padding: clamp(3.5rem, 9vw, 6.5rem) 0 clamp(2.5rem, 6vw, 4rem);
  background:
    radial-gradient(1100px 480px at 15% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 62%),
    radial-gradient(800px 400px at 88% 0%, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 60%);
  border-bottom: 1px solid var(--line);
}
.hero h1 { max-width: 16ch; }
.hero-sub { font-size: 1.12rem; color: var(--muted); max-width: 60ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.75rem 0 2.5rem; }

.proof {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem; margin: 0; padding: 1.35rem; border: 1px solid var(--line);
  border-radius: var(--radius); background: color-mix(in srgb, var(--bg-2) 70%, transparent);
  max-width: 640px;
}
.proof div { margin: 0; }
.proof dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.proof dd { margin: .15rem 0 0; font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; }

/* ------------------------------------------------------------ buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .8rem 1.4rem; border-radius: 10px; font-weight: 650; font-size: .96rem;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover { transform: translateY(-1px); }
/* White on gold is about 2.2:1 and unreadable. The card puts gold on near-black, so the
 * button inverts it: gold fill, near-black label. That lands past 8:1 and matches print. */
.btn-primary { background: var(--gold-grad-solid); background-color: var(--gold); color: #17120a; font-weight: 800; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { border-color: var(--line); color: var(--text); background: var(--bg-2); }
.btn-ghost:hover { border-color: var(--muted); }
.btn-sm { padding: .55rem 1rem; font-size: .875rem; }

.link-arrow { font-weight: 600; text-decoration: none; color: var(--accent-2); }
.link-arrow::after { content: " →"; }

/* -------------------------------------------------------------- bands */

.band { padding: clamp(2.5rem, 6vw, 4rem) 0; border-bottom: 1px solid var(--line); }
.band-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-bottom: 1rem; }

.founders { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; }
.founder { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.founder h3 { margin-bottom: .25rem; }

/* -------------------------------------------------------------- cards */

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.1rem; }
.card {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .15s ease, transform .15s ease;
}
.card:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); transform: translateY(-2px); }
.card-link { display: block; padding: 1.35rem; text-decoration: none; height: 100%; }
.card h3 { margin: 0 0 .5rem; font-size: 1.1rem; }
.card-desc { color: var(--muted); font-size: .93rem; margin-bottom: .9rem; }
.card-meta { color: var(--muted); font-size: .8rem; margin: 0; }

/* ------------------------------------------------------- article body */

.post, .page { padding: clamp(2.5rem, 6vw, 4rem) 0; }
.crumbs { font-size: .85rem; color: var(--muted); margin-bottom: 1.25rem; }
.crumbs a { color: var(--muted); }
.post-head { margin-bottom: 2rem; }
.lede { font-size: 1.15rem; color: var(--muted); max-width: 62ch; }
.post-meta { font-size: .85rem; color: var(--muted); margin: 0; }

.toc {
  background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius); padding: 1.15rem 1.35rem; margin-bottom: 2rem;
}
.toc-title { font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin: 0 0 .6rem; font-weight: 700; }
.toc ol { margin: 0; padding-left: 1.15rem; }
.toc li { margin-bottom: .35rem; font-size: .93rem; }
.toc a { color: var(--muted); text-decoration: none; }
.toc a:hover { color: var(--text); text-decoration: underline; }

.prose { font-size: 1.06rem; }
.prose h2 { margin-top: 2.4em; padding-top: .3em; scroll-margin-top: 90px; }
.prose h3 { margin-top: 1.9em; scroll-margin-top: 90px; }
.prose ul, .prose ol { padding-left: 1.35rem; margin-bottom: 1.2em; }
.prose li { margin-bottom: .45em; }
.prose blockquote {
  margin: 1.6em 0; padding: .3rem 0 .3rem 1.25rem;
  border-left: 3px solid var(--accent); color: var(--muted); font-style: italic;
}
.prose table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: .95rem; }
.prose th, .prose td { text-align: left; padding: .7rem .85rem; border-bottom: 1px solid var(--line); }
.prose th { background: var(--bg-2); font-weight: 700; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.5em 0; }
.prose strong { color: #fff; }

.faq { margin-top: 3rem; }
.faq details {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.25rem; margin-bottom: .75rem; background: var(--bg-2);
}
.faq summary { cursor: pointer; font-weight: 650; }
.faq details > div { margin-top: .75rem; color: var(--muted); }

.related { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--line); }

/* ---------------------------------------------------------------- CTA */

.cta {
  margin: 3rem 0 0; padding: 2rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--bg-2); text-align: center;
}
.cta h2 { margin-bottom: .5rem; font-size: 1.5rem; }
.cta p { color: var(--muted); max-width: 52ch; margin-inline: auto; }
.cta-coaching {
  background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 16%, var(--bg-2)), var(--bg-2));
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}

.optin { padding: clamp(2.5rem, 6vw, 4rem) 0; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.optin-inner { width: min(100% - 2.5rem, var(--narrow)); margin-inline: auto; text-align: center; }
.optin-form { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; margin: 1.5rem 0 .75rem; }
/* Scoped to the email field: the consent checkbox is also an input and must not inherit this. */
.optin-form input[type="email"],
.admin-lock .optin-form input[type="text"],
.admin-lock .optin-form input[type="password"] {
  flex: 1 1 260px; max-width: 340px; padding: .8rem 1rem; font-size: 1rem;
  border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text);
}
.optin-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.optin-note { flex-basis: 100%; color: var(--warn); font-size: .85rem; margin: .5rem 0 0; }
.optin-consent { flex-basis: 100%; margin: .25rem 0 0; }
.optin-consent label {
  display: flex; gap: .55rem; align-items: flex-start; justify-content: center;
  text-align: left; max-width: 34rem; margin-inline: auto;
  font-size: .85rem; color: var(--muted); cursor: pointer;
}
.optin-consent input[type="checkbox"] { margin-top: .18rem; flex: none; accent-color: var(--accent); }

/* ------------------------------------------------------------- footer */

.site-footer { padding: 3rem 0 2rem; border-top: 1px solid var(--line); background: var(--bg-2); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; }
.footer-brand { font-family: var(--display); font-weight: 800; font-size: 1.25rem; margin: 0 0 .15rem; }
/* The card's tagline treatment: lowercase, wide tracking, quiet. */
.brand-tagline {
  font-family: var(--display); font-weight: 500; font-size: .78rem;
  letter-spacing: .18em; color: var(--gold-ink); margin: 0 0 .5rem;
}
.footer-nav { display: flex; flex-direction: column; gap: .5rem; }
.footer-nav a { color: var(--muted); text-decoration: none; font-size: .93rem; }
.footer-nav a:hover { color: var(--text); }
.site-footer .btn { margin: 0 .5rem .5rem 0; }
.disclaimer {
  font-size: .82rem; color: var(--muted); border-top: 1px solid var(--line);
  padding-top: 1.25rem; max-width: 78ch;
}
.empty { color: var(--muted); background: var(--bg-2); border: 1px dashed var(--line); border-radius: var(--radius); padding: 2rem; text-align: center; }

/* -------------------------------------------------------------- admin */

.admin-wrap { padding: 2.5rem 0 4rem; }
.admin-lock { max-width: 46ch; margin: 4rem auto; text-align: center; }
.admin-lock .optin-form { justify-content: center; margin: 1.5rem 0 1rem; }
.admin-lock code { font-size: .85em; }
.admin-warning {
  background: color-mix(in srgb, var(--warn) 14%, var(--bg-2));
  border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line));
  border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 2rem;
  font-size: .92rem; color: var(--text);
}
.admin-section { margin-bottom: 3.5rem; }
.stat-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.stat {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.5rem; min-width: 110px;
}
.stat-num { display: block; font-size: 1.9rem; font-weight: 800; line-height: 1; }
.stat-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }

.findings { display: flex; flex-direction: column; gap: 1rem; }
.finding {
  background: var(--bg-2); border: 1px solid var(--line); border-left: 4px solid var(--muted);
  border-radius: var(--radius); padding: 1.35rem;
}
.finding.sev-high { border-left-color: var(--bad); }
.finding.sev-medium { border-left-color: var(--warn); }
.finding.sev-low { border-left-color: var(--ok); }
.finding.is-resolved { opacity: .42; }
.finding.is-resolved .resolved-note { display: inline; }
.resolved-note { display: none; font-size: .8rem; color: var(--ok); margin-left: .5rem; }
.finding.is-resolved .resolved-note[hidden] { display: inline; }
.finding-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .6rem; }
.finding h3 { font-size: 1.05rem; margin: 0 0 .6rem; }
.finding-post { font-size: .85rem; color: var(--muted); }
.evidence { margin: .5rem 0; padding-left: 1rem; border-left: 2px solid var(--line); color: var(--muted); font-size: .92rem; font-style: italic; }
.fix { font-size: .93rem; margin: .6rem 0; }
.finding-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }

.pill {
  display: inline-block; padding: .18rem .55rem; border-radius: 999px;
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.pill-high { background: color-mix(in srgb, var(--bad) 22%, transparent); color: var(--bad); }
.pill-medium { background: color-mix(in srgb, var(--warn) 22%, transparent); color: var(--warn); }
.pill-low { background: color-mix(in srgb, var(--ok) 20%, transparent); color: var(--ok); }
.pill-cat { background: var(--bg-3); color: var(--muted); }

.table-scroll { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.admin-table th, .admin-table td { text-align: left; padding: .65rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.admin-table th { background: var(--bg-2); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.plain-list { list-style: none; padding: 0; }
.plain-list li { padding: .5rem 0; border-bottom: 1px solid var(--line); }

@media print { .site-header, .site-nav, .cta, .optin, .finding-actions { display: none !important; } }

/* ------------------------------------------------- printable documents
 *
 * body.printable — the lead magnet, and anything else meant to be saved as a PDF.
 *
 * Two things the default print rules get wrong for a document someone keeps:
 *   1. Web type. 17px with generous leading turned a 1,200-word guide into 11 pages.
 *   2. The dark ground. Near-black backgrounds cost a fortune in ink and read badly on
 *      paper, so print inverts to dark-on-white — same decision, same reasons, as the
 *      email template. Gold stays, so it is still recognisably ours.
 */
@media print {
  body.printable {
    background: #fff; color: #15181c;
    font-size: 10.5pt; line-height: 1.45;
  }
  body.printable .site-footer,
  body.printable .page-toc,
  body.printable .web-only,
  body.printable .skip { display: none !important; }

  /* Keep the real wordmark as a masthead rather than drawing a second one in CSS — one
     definition of the logo, so it cannot drift from the site. Nav and CTA button go. */
  body.printable .site-header {
    display: block !important;
    position: static !important;
    background: none !important;
    backdrop-filter: none !important;
    border-bottom: 0.7pt solid #d7dbdf !important;
    margin: 0 0 9pt;
    padding: 0 0 5pt;
  }
  body.printable .site-header .site-nav,
  body.printable .site-header .navbtn,
  body.printable .site-header .navtoggle { display: none !important; }
  body.printable .header-inner { min-height: 0 !important; width: 100% !important; padding: 0 !important; }
  body.printable .brand-name { font-size: 14pt; color: #15181c; }
  body.printable .brand-fit { color: #a9781c !important; background: none !important; -webkit-text-fill-color: #a9781c; }
  /* The tagline the printed card carries, so the PDF and the business card agree. */
  body.printable .site-header .header-inner::after {
    content: "get lean and strong with Mark and David";
    display: block; font-size: 7.5pt; letter-spacing: 1.6pt;
    text-transform: uppercase; color: #6b7480; margin-top: 2pt;
  }

  /* The CTA is the point of the document, so it survives print here even though the
     site-wide rule above hides it everywhere else. */
  body.printable .cta {
    display: block !important;
    background: #faf6ec; border: 1px solid #d9c48a; color: #15181c;
    padding: 10pt 12pt; border-radius: 6pt; margin-top: 12pt;
  }
  body.printable .cta h2 { margin-top: 0; }
  body.printable .cta .btn { background: none; color: #a9781c; padding: 0; font-weight: 700; }

  body.printable h1 { font-size: 21pt; margin: 0 0 6pt; }
  body.printable h2 {
    font-size: 12.5pt; margin: 10pt 0 4pt; color: #a9781c;
    border-top: 0.7pt solid #e0e3e6; padding-top: 6pt;
  }
  body.printable h1 + p, body.printable .lede { font-size: 11pt; color: #444b54; }
  body.printable p, body.printable li { margin: 0 0 5pt; }
  body.printable strong { color: #000; }
  body.printable a { color: #a9781c; text-decoration: none; }

  body.printable table { width: 100%; border-collapse: collapse; font-size: 9.5pt; margin: 5pt 0 8pt; }
  body.printable th, body.printable td { border: 0.5pt solid #d7dbdf; padding: 3.5pt 6pt; }
  body.printable thead th { background: #f4f1e8; }

  body.printable blockquote {
    border-left: 2.5pt solid #c9962f; background: #faf8f3;
    margin: 8pt 0; padding: 7pt 10pt; font-size: 9.5pt; color: #333940;
  }

  /* Nothing should straddle a page break — a split table or a heading stranded at the
     foot of a page is what makes a generated PDF look generated. */
  body.printable h1, body.printable h2, body.printable h3 { break-after: avoid; page-break-after: avoid; }
  /* Rows, not whole tables. Keeping a whole table together sounds tidy and in practice
     shunts a 10-row table onto the next page, wasting most of the current one — that alone
     cost a full page here. A table that splits at a row boundary reads fine. */
  body.printable tr, body.printable blockquote, body.printable li { break-inside: avoid; page-break-inside: avoid; }
  body.printable thead { display: table-header-group; }

  body.printable main { padding: 0 !important; }
  body.printable .wrap, body.printable .wrap-narrow { width: 100% !important; max-width: none !important; }
}


/* ---------------------------------------------------------------- capture
 *
 * /capture/ — a phone screen, held one-handed, probably in a shop aisle with one bar of
 * signal. Big targets, no chrome, nothing decorative. The whole page is two fields.
 */
body.capture { padding: 0; }
.cap {
  max-width: 32rem;
  margin: 0 auto;
  padding: 1.5rem 1.1rem 4rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.cap-head { display: flex; flex-direction: column; gap: 0.35rem; }
.cap-eyebrow {
  margin: 0;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
}
.cap h1 { margin: 0; font-size: 2rem; letter-spacing: -0.02em; }
.cap-sub { margin: 0; color: var(--muted); font-size: 0.95rem; }

#cap-app, .cap-key { display: flex; flex-direction: column; gap: 1.1rem; }

/* ⚠️ These two are toggled with the `hidden` attribute, and `display: flex` beats `hidden`.
   Without this rule the key form stays on screen after unlocking — which reads as "it is
   still asking me to unlock" while the app underneath is perfectly usable. */
#cap-app[hidden], .cap-key[hidden], .cap-bar[hidden], .cap-zone[hidden], .cap-hint[hidden] {
  display: none;
}

/* The camera button is the primary action and it is sized like one — a thumb finds it
   without looking, which matters when the other hand is holding a jar. */
.cap-shoot {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.1rem;
  border: 2px dashed var(--line);
  border-radius: 12px;
  cursor: pointer;
  background: var(--panel, rgba(255, 255, 255, 0.02));
}
.cap-shoot:focus-within { border-color: var(--gold); }
.cap-shoot input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cap-shoot-icon { font-size: 1.6rem; }
.cap-shoot-text { display: flex; flex-direction: column; }
.cap-shoot-text small { color: var(--muted); }

.cap-pool { margin: 0; font-size: 0.86rem; color: var(--muted); line-height: 1.5; }
.cap-thumbs { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Thumbnails are buttons, because tapping one assigns it to the entry being written.
   Selection has to read at a glance in a shop: a gold ring and a tick, not a subtle tint. */
.cap-thumb {
  position: relative;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: none;
  cursor: pointer;
  line-height: 0;
  opacity: 0.55;
}
.cap-thumb img { width: 74px; height: 74px; object-fit: cover; border-radius: 8px; display: block; }
.cap-thumb.is-on { border-color: var(--gold); opacity: 1; }
.cap-thumb.is-on::after {
  content: "✓";
  position: absolute;
  right: -6px;
  top: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gold);
  color: #14100a;
  font-size: 12px;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
}
.cap-thumb:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.cap-secondary {
  background: none !important;
  color: var(--muted) !important;
  border: 1px solid var(--line) !important;
  font-weight: 600 !important;
}

.cap-field { display: flex; flex-direction: column; gap: 0.35rem; }
.cap-field > span { font-weight: 600; font-size: 0.92rem; }
.cap-field small { color: var(--muted); font-size: 0.82rem; line-height: 1.45; }
.cap-field textarea,
.cap-field input[type="text"],
.cap-field input[type="password"],
.cap-field select {
  width: 100%;
  padding: 0.8rem 0.85rem;
  /* 16px minimum, or iOS Safari zooms the whole page on focus and the layout jumps. */
  font-size: 16px;
  font-family: inherit;
  color: inherit;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.cap-field textarea { resize: vertical; line-height: 1.5; }
.cap-field :is(textarea, input, select):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.cap-more summary { cursor: pointer; color: var(--muted); font-size: 0.9rem; padding: 0.4rem 0; }
.cap-more[open] { display: flex; flex-direction: column; gap: 1rem; }

/* `#cap-send` is named explicitly rather than `#cap-app button`, which would also catch the
   thumbnails, the × on each product and the Optional summary. Save is the only primary
   action on the screen and it should be the only thing that looks like one. */
#cap-send, .cap-key button {
  padding: 0.95rem 1.2rem;
  font-size: 1.02rem;
  font-weight: 700;
  font-family: inherit;
  color: #14100a;
  background: var(--gold-grad-solid, var(--gold));
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}
#cap-send[disabled] { opacity: 0.55; cursor: default; }
#cap-send { position: sticky; bottom: 1rem; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); }

.cap-status { margin: 0; min-height: 1.3em; font-size: 0.92rem; color: var(--gold); }
.cap-note-foot { margin: 0; color: var(--muted); font-size: 0.82rem; line-height: 1.5; }


/* --------------------------------------------------- capture: zones and the action bar */

.cap-zone {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.9rem 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin: 1rem 0;
}
.cap-zone h2 {
  margin: 0;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.cap-count {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
  font-variant-numeric: tabular-nums;
}
.cap-hint { margin: 0; color: var(--muted); font-size: 0.85rem; line-height: 1.5; }
.cap-product { border-color: var(--gold); }
.cap-bin { border-style: dashed; opacity: 0.75; }

.cap-zone-head { display: flex; align-items: center; gap: 0.5rem; }
.cap-name {
  flex: 1;
  padding: 0.6rem 0.7rem;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  color: inherit;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.cap-x {
  width: 2.2rem;
  height: 2.2rem;
  flex: none;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--muted);
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}
.cap-note {
  width: 100%;
  padding: 0.7rem 0.75rem;
  font-size: 16px;
  font-family: inherit;
  line-height: 1.5;
  color: inherit;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 10px;
  resize: vertical;
}

/* Pinned above the thumb while anything is selected, so a destination is never a reach. */
.cap-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  padding: 0.7rem 0.9rem calc(0.7rem + env(safe-area-inset-bottom));
  background: var(--ground, #0e1012);
  border-top: 1px solid var(--gold);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.cap-bar > span { font-size: 0.85rem; font-weight: 700; color: var(--gold); white-space: nowrap; }
.cap-bar-targets { display: flex; gap: 0.4rem; overflow-x: auto; flex: 1; }
.cap-bar-targets button {
  flex: none;
  padding: 0.55rem 0.8rem;
  font-size: 0.9rem;
  font-weight: 700;
  font-family: inherit;
  color: #14100a;
  background: var(--gold-grad-solid, var(--gold));
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.cap-bar-targets button.is-bin { background: none; color: var(--muted); border: 1px solid var(--line); }

/* Room for the bar so it never covers the save button. */
body.capture .cap { padding-bottom: 7rem; }