/* Pursuit Hub — the client-facing resource library.
   Standalone on purpose: a client opens this inside the Trainerize app on a
   phone, so it shares nothing with OfferOps' own stylesheet.

   The look is the Pursuit site's: near-black ground with charcoal panels,
   off-white text, one red, heavy condensed uppercase headlines with a word
   picked out in red, small tracked labels with a short red rule, sharp
   corners and hairline borders, numbered tiles with thin red line icons.
   Dark is the default (it is the brand); a client can pick light in Me. */

:root {
  --bg: #07090a;
  --bg-glow: rgba(255,255,255,.035);
  --panel: #101517;
  --panel-2: #151b1e;
  --line: rgba(255,255,255,.08);
  --line-strong: rgba(255,255,255,.18);
  --text: #f4f3ee;
  --muted: #aab7b4;
  --subtle: #7d8a87;
  --red: #e31b23;
  --red-ink: #ff3d44;           /* red as text on the dark ground */
  --red-tint: rgba(227,27,35,.14);
  --on-red: #ffffff;
  --top: #07090a;
  --good: #3ecf8e;
  --good-tint: rgba(62,207,142,.14);
  /* Reporting a problem is not an emergency and not a success. Amber keeps
     the one red in the hub for what it is already for. */
  --warn: #e9a13b;
  --field: #0c1113;
  --tab-h: 62px;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f4f3ee;
  --bg-glow: rgba(16,21,23,.04);
  --panel: #ffffff;
  --panel-2: #faf9f6;
  --line: rgba(16,21,23,.10);
  --line-strong: rgba(16,21,23,.22);
  --text: #101517;
  --muted: #4d5856;
  --subtle: #7d8a87;
  --red-ink: #c8161e;
  --red-tint: rgba(227,27,35,.10);
  --good: #178a4c;
  --good-tint: rgba(23,138,76,.12);
  --warn: #a96a06;
  --field: #ffffff;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--text); font-size: 16px; line-height: 1.55;
  font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  /* Black on black: the depth comes from the panels sitting a shade lighter
     than the ground, not from texture. A faint glow at the top is all. */
  background: var(--bg);
  background-image: radial-gradient(ellipse 120% 40% at 50% 0%, var(--bg-glow), transparent 70%);
  background-repeat: no-repeat;
}
h1, h2, h3, .display { font-family: "Barlow Condensed", Impact, "Arial Narrow", sans-serif; text-transform: uppercase; letter-spacing: .005em; line-height: .96; margin: 0; }
h1 { font-size: 40px; font-weight: 800; text-wrap: balance; }
h2 { font-size: 24px; font-weight: 700; }
h3 { font-size: 20px; font-weight: 700; }
h1 em, h2 em, .accent { font-style: normal; color: var(--red-ink); }
p { margin: 0; }
a { color: var(--red-ink); text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }
.muted { color: var(--muted); }
.subtle { color: var(--subtle); font-size: 13px; }
svg.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* small tracked label with the short red rule */
.eyebrow { display: flex; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--red-ink); margin-bottom: 10px; }
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--red); flex: none; }
.eyebrow.plain { color: var(--subtle); }
.eyebrow.plain::before { background: var(--subtle); }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20; background: var(--top); color: #fff; border-bottom: 1px solid rgba(255,255,255,.08);
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.topbar .brand { display: flex; align-items: center; gap: 9px; min-height: 40px; min-width: 0; color: inherit; }
.topbar .brand img { height: 40px; width: auto; max-width: 190px; object-fit: contain; }
.topbar .brand .crest-full { height: 50px; width: auto; flex: none; display: block; }
.topbar .mark { height: 32px; width: auto; flex: none; }
.wordmark { white-space: nowrap; }
/* The OfferOps phone preview: just enough room at the top that the frame's
   rounded corners stay off the logo. No pretend status bar -- Stefan read
   the band as a black bar sitting over the logo. */
html.framed .topbar { padding-top: 14px; }
html.framed .auth .top { padding-top: 26px; }
.wordmark { display: flex; flex-direction: column; line-height: 1; }
.wordmark b { font-family: "Barlow Condensed", Impact, sans-serif; font-weight: 800; font-size: 21px; letter-spacing: .06em; }
.wordmark span { font-size: 8px; letter-spacing: .24em; color: rgba(255,255,255,.62); margin-top: 3px; text-transform: uppercase; }
.topbar .actions { display: flex; align-items: center; gap: 6px; }
.iconbtn { width: 40px; height: 40px; border: 0; background: transparent; color: inherit; display: grid; place-items: center; }
.iconbtn:active { background: rgba(255,255,255,.12); }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; background: var(--red); color: #fff;
  font-family: "Barlow Condensed", Impact, sans-serif; font-weight: 700; font-size: 17px; border: 0; }
.previewbar { background: #f5b64e; color: #1a1200; font-size: 12.5px; font-weight: 600; text-align: center; padding: 6px 12px; }

/* ---------- page ---------- */
.wrap { max-width: 720px; margin: 0 auto; padding: 22px 16px calc(var(--tab-h) + 28px + env(safe-area-inset-bottom)); }
.view { animation: rise .22s ease both; }
@keyframes rise { from { transform: translateY(6px); } to { transform: none; } }
/* One line, then the content. The greeting used to be a poster; on a phone
   that pushed the sections a screen and a half down. */
.hello { margin: 2px 0 14px; }
.hello h1 { font-size: 30px; }
.sec { margin-top: 28px; }
.sec.tight { margin-top: 14px; }
/* the coach's note: a line from a person, above everything */
.note { position: relative; padding: 14px 16px 15px 18px; background: var(--panel); border: 1px solid var(--line); margin-bottom: 14px; }
.note::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--red); }
.note .eyebrow { margin-bottom: 6px; }
.note .eyebrow .when { color: var(--subtle); letter-spacing: .1em; }
.note p { font-size: 15.5px; line-height: 1.5; }
.note p a { text-decoration: underline; text-underline-offset: 3px; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sec-head a { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

/* panels */
.card { background: var(--panel); border: 1px solid var(--line); }
.hero { position: relative; overflow: hidden; padding: 18px 16px 16px; color: #f4f3ee; background: #101517; border: 1px solid var(--line);
  display: block; width: 100%; text-align: left; }
.hero::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--red); }
.hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(227,27,35,.28), transparent); }
.hero > * { position: relative; z-index: 1; }
.hero::before, .hero::after { z-index: 0; }
.hero .eyebrow { color: #ff5a5f; }
.hero .eyebrow::before { background: #e31b23; }
.hero h2 { font-size: 27px; font-weight: 800; }
.hero p { color: #aab7b4; margin-top: 8px; font-size: 14.5px; max-width: 36ch; }
.progress { height: 4px; background: rgba(255,255,255,.14); margin-top: 16px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--red); transition: width .4s ease; }
.hero .cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  background: var(--red); color: #fff; padding: 11px 14px; }

/* section tiles (un-numbered: the sections have no order, the steps do) */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; min-height: 112px; padding: 14px 14px 13px; text-align: left;
  border: 1px solid var(--line); background: var(--panel); color: inherit; transition: border-color .14s ease, transform .14s ease; }
.tile:active { transform: scale(.985); border-color: var(--line-strong); }
.tile .glyph { width: 30px; height: 30px; color: var(--red-ink); display: grid; place-items: center; font-size: 24px; margin-right: auto; }
.tile .glyph svg { width: 28px; height: 28px; stroke-width: 1.6; }
.tile b { font-family: "Barlow Condensed", Impact, sans-serif; font-weight: 700; text-transform: uppercase; font-size: 20px; line-height: 1; letter-spacing: .01em; }
.tile span { color: var(--subtle); font-size: 12.5px; margin-top: 5px; display: block; font-family: "DM Sans", sans-serif; text-transform: none; letter-spacing: 0; }
.tile.wide { flex-direction: row; align-items: center; min-height: 0; padding: 14px; gap: 14px; }
.tile.wide .glyph { margin-right: 0; }
.tile.wide .chev { margin-left: auto; color: var(--subtle); }

/* horizontal rail of pinned cards */
.rail { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 16px 10px; margin: 0 -16px; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail .mini { flex: 0 0 216px; scroll-snap-align: start; text-align: left; padding: 0; overflow: hidden; border: 1px solid var(--line); background: var(--panel); color: inherit; }
.mini .thumb { aspect-ratio: 16/9; border-radius: 0; }
.mini .mini-body { padding: 10px 12px 12px; border-top: 2px solid var(--red); }
.mini b { display: block; font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.mini span { display: block; color: var(--subtle); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-top: 6px; font-weight: 700; }

/* rows (resource lists) */
.rows { display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; gap: 12px; align-items: center; padding: 10px; text-align: left; color: inherit; border: 1px solid var(--line); background: var(--panel);
  transition: border-color .14s ease, transform .14s ease; width: 100%; }
.row:active { transform: scale(.99); border-color: var(--line-strong); }
.row .thumb { width: 96px; flex: none; aspect-ratio: 16/9; }
.row .txt { flex: 1; min-width: 0; }
.row b { display: block; font-weight: 600; font-size: 15px; line-height: 1.3; }
/* One line, always: a second line began with a stray "·". What does not fit is
   cut with an ellipsis -- the row's title carries the meaning, the meta is a hint. */
.row .meta { color: var(--subtle); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .meta > * { display: inline; }
.row .meta .badge { display: inline-flex; vertical-align: middle; margin-left: 6px; }
.row .meta .dot::before { margin: 0 6px; }
.row .chev { color: var(--subtle); flex: none; }
.thumb { background: var(--panel-2) center/cover no-repeat; position: relative; overflow: hidden; display: grid; place-items: center; color: var(--red-ink); border: 1px solid var(--line); }
.thumb.glyph svg { width: 24px; height: 24px; }
/* the drawn cover for a resource with no picture */
.thumb.gen { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: var(--panel-2); border-top: 2px solid var(--red); }
.thumb.gen i { display: grid; place-items: center; }
.thumb.gen svg { width: 20px; height: 20px; }
.thumb.gen span { font-size: 8.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--subtle); line-height: 1; }
.mini .thumb.gen svg { width: 30px; height: 30px; }
.mini .thumb.gen span { font-size: 10px; }
.thumb .play { position: absolute; inset: 0; display: grid; place-items: center; }
.thumb .play i { width: 32px; height: 32px; background: var(--red); display: grid; place-items: center; color: #fff; }
.thumb .play svg { width: 14px; height: 14px; fill: #fff; stroke: none; margin-left: 2px; }
.badge { display: inline-flex; align-items: center; padding: 2px 6px; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: var(--red); color: #fff; }
.badge.good { background: var(--good); color: #062; }
.dot::before { content: "·"; margin-right: 6px; color: var(--subtle); }

/* steps */
.step { align-items: flex-start; }
.row.hero-done .num { width: 34px; flex: none; color: var(--good); }
.row.hero-done .num svg { width: 22px; height: 22px; }
.step .num { width: 34px; flex: none; font-family: "Barlow Condensed", Impact, sans-serif; font-weight: 700; font-size: 22px; color: var(--subtle); line-height: 1; margin-top: 2px; }
.step.done .num { color: var(--good); }
.step.done b { color: var(--muted); }
.step .txt p { color: var(--muted); font-size: 13.5px; margin-top: 3px; }
.step .num svg { width: 22px; height: 22px; }

/* faq */
.faq { border: 1px solid var(--line); background: var(--panel); overflow: hidden; }
.faq summary { list-style: none; display: flex; gap: 12px; align-items: center; padding: 14px 14px; font-weight: 600; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { margin-left: auto; color: var(--red-ink); transition: transform .2s ease; }
.faq[open] summary { border-bottom: 1px solid var(--line); }
.faq[open] summary svg { transform: rotate(180deg); }
.faq .ans { padding: 14px 14px 16px; color: var(--text); }

/* topic tabs */
.chips { display: flex; gap: 6px; overflow-x: auto; padding: 2px 16px 10px; margin: 0 -16px 8px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; padding: 9px 13px; border: 1px solid var(--line-strong); background: transparent; color: var(--muted);
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.chip.active { background: var(--red); color: #fff; border-color: var(--red); }

/* detail */
.back { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-weight: 700; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  background: transparent; border: 0; padding: 6px 0 14px; margin-left: -4px; }
.detail h1 { font-size: 34px; }
.detail .meta { color: var(--subtle); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin: 10px 0 16px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.media { overflow: hidden; background: #000; border: 1px solid var(--line); margin-bottom: 16px; }
.media iframe { display: block; width: 100%; border: 0; aspect-ratio: 16/9; }
.media.tall iframe { aspect-ratio: 3/4; background: var(--panel); }
.media.canva iframe { aspect-ratio: 4/5; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 18px; border: 0;
  background: var(--red); color: #fff; font-weight: 700; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; width: 100%; transition: transform .12s ease; }
.btn:active { transform: scale(.98); }
.btn.secondary { background: transparent; color: var(--text); border: 1px solid var(--line-strong); }
.btn.done { background: var(--good); color: #062; }
.btn + .btn { margin-top: 10px; }

/* "Keep me signed in" on the sign-in card. A real checkbox, accented red so
   it reads as ticked at a glance on the dark ground, and a label big enough
   to be a thumb target rather than a 13px box to aim at. */
/* `.auth label` uppercases every label on this card, which is right for a
   field name above a box and wrong for a sentence beside a tick -- it came
   out shouting KEEP ME SIGNED IN ON THIS DEVICE. Reset here rather than
   narrowing that rule, which the three fields above still want. */
.auth label.remember { display: flex; align-items: center; gap: 10px;
  margin: 16px 0 4px; color: var(--muted); font-size: 14px; font-weight: 400;
  letter-spacing: 0; text-transform: none; cursor: pointer; min-height: 32px; }
.auth label.remember input { flex: 0 0 auto; width: 20px; height: 20px; margin: 0;
  accent-color: var(--red); cursor: pointer; }
.auth label.remember input:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.prose { font-size: 16px; line-height: 1.65; }
.prose > * + * { margin-top: 12px; }
.prose h2 { font-size: 24px; margin-top: 24px; }
.prose h3 { font-size: 19px; margin-top: 18px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li + li { margin-top: 4px; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose blockquote { border-left: 3px solid var(--red); padding: 4px 0 4px 14px; color: var(--muted); margin: 12px 0; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }
.prose img { border: 1px solid var(--line); }
.prose .media { margin: 12px 0; }
.prose code { font-family: ui-monospace, Menlo, monospace; font-size: .9em; background: var(--panel-2); padding: 1px 5px; }
.summary { color: var(--muted); font-size: 15.5px; margin-bottom: 16px; }
.done-row { margin-top: 20px; }

/* shop */
.code { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px dashed var(--line-strong); background: var(--panel); margin-bottom: 16px; }
.code b { font-family: "Barlow Condensed", Impact, sans-serif; letter-spacing: .14em; font-size: 22px; font-weight: 700; }
.code small { display: block; color: var(--subtle); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.code button { border: 0; background: var(--red); color: #fff; font-weight: 700; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; padding: 9px 12px; }
.products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.product { display: block; color: inherit; overflow: hidden; border: 1px solid var(--line); background: var(--panel); }
.product .pic { aspect-ratio: 1; background: #fff center/contain no-repeat; }
.product .pb { padding: 10px 12px 12px; }
.product b { display: block; font-size: 13.5px; line-height: 1.3; font-weight: 600; }
.product span { display: block; color: var(--muted); font-size: 13px; margin-top: 4px; }
.product .soldout { color: var(--subtle); font-style: normal; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }

/* product page */
.gallery { margin-bottom: 18px; }
.gallery-main { aspect-ratio: 1; background: #fff center/contain no-repeat; border: 1px solid var(--line); }
.gallery-thumbs { display: flex; gap: 6px; margin-top: 6px; overflow-x: auto; scrollbar-width: none; }
.gallery-thumbs button { flex: none; width: 56px; height: 56px; border: 1px solid var(--line-strong); background: #fff center/contain no-repeat; opacity: .6; }
.gallery-thumbs button.active { opacity: 1; border-color: var(--red); }
.product-page h1 { font-size: 30px; }
.price { font-family: "Barlow Condensed", Impact, sans-serif; font-weight: 700; font-size: 28px; margin: 10px 0 16px; }
.price s { color: var(--subtle); font-weight: 600; font-size: 20px; margin-left: 6px; }
.variant { display: block; margin-bottom: 14px; }
.variant span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--subtle); margin-bottom: 6px; }
select.field { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--subtle) 50%), linear-gradient(135deg, var(--subtle) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
.product-desc { margin-top: 20px; color: var(--muted); font-size: 15px; }
.product-desc p + p { margin-top: 10px; }
.products .product { text-align: left; padding: 0; cursor: pointer; }

/* me */
.kv { display: flex; flex-direction: column; }
.kv div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 16px; border-top: 1px solid var(--line); }
.kv div:first-child { border-top: 0; }
.kv span { color: var(--subtle); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.seg { display: inline-flex; border: 1px solid var(--line-strong); overflow: hidden; }
.seg button { border: 0; background: transparent; padding: 8px 13px; font-weight: 700; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.seg button + button { border-left: 1px solid var(--line-strong); }
.seg button.active { background: var(--red); color: #fff; }

/* search */
.field { width: 100%; border: 1px solid var(--line-strong); background: var(--field); color: var(--text); padding: 13px 14px; font: inherit; font-size: 16px; }
.field:focus { outline: 2px solid var(--red); outline-offset: 1px; border-color: transparent; }
.group-label { font-family: "Barlow Condensed", Impact, sans-serif; font-size: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--subtle); margin: 20px 0 8px; }
.empty { padding: 30px 16px; text-align: center; color: var(--muted); border: 1px dashed var(--line-strong); }
.empty b { display: block; color: var(--text); font-family: "Barlow Condensed", Impact, sans-serif; text-transform: uppercase; font-size: 22px; margin-bottom: 4px; }

/* bottom tab bar */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--top); border-top: 1px solid rgba(255,255,255,.1); padding-bottom: env(safe-area-inset-bottom);
  height: calc(var(--tab-h) + env(safe-area-inset-bottom)); }
.tabbar button { border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; color: rgba(255,255,255,.55); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.tabbar button.active { color: #fff; }
.tabbar button.active svg { color: var(--red); }
.tabbar svg { width: 22px; height: 22px; }
/* A check-in they are late on, from anywhere in the app. The dot is on the
   icon rather than the word so it reads the way every other unread dot does,
   and it keeps its colour on the active tab -- the point survives being on
   Home already. */
.tabbar button.owed { position: relative; }
.tabbar button.owed::after { content: ""; position: absolute; top: 12px;
  left: calc(50% + 7px); width: 9px; height: 9px; border-radius: 50%;
  background: var(--red); border: 2px solid var(--top); }

/* sheet (account menu) */
.veil { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 30; display: grid; align-items: end; }
.sheet { background: var(--panel); border-top: 2px solid var(--red); padding: 12px 16px calc(20px + env(safe-area-inset-bottom));
  max-width: 720px; width: 100%; margin: 0 auto; animation: up .22s ease; }
@keyframes up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet .grab { width: 40px; height: 3px; background: var(--line-strong); margin: 0 auto 14px; }
.sheet .item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 4px; border: 0; background: transparent;
  text-align: left; font-size: 15px; font-weight: 600; border-top: 1px solid var(--line); color: inherit; }
.sheet .item:first-of-type { border-top: 0; }
/* The late check-in, over whatever screen they landed on. Same sheet as the
   account menu so it is a shape they already know -- the difference is the
   headline, which is the whole message. */
.late-sheet b { display: block; font-family: "Barlow Condensed", Impact, sans-serif;
  font-weight: 800; text-transform: uppercase; font-size: 30px; line-height: 1;
  color: var(--red-ink); margin-bottom: 8px; }
.late-sheet p { color: var(--muted); font-size: 15px; line-height: 1.55; margin-bottom: 16px; }
.late-sheet p b { display: inline; font-family: inherit; font-size: inherit;
  text-transform: none; color: var(--text); margin: 0; }
.late-sheet .btn + .btn { margin-top: 8px; }

/* the onboarding form: one screen at a time */
.form-progress { margin: 0 0 18px; }
.form h1 { font-size: 32px; }
.form-list { margin: 14px 0 20px; padding: 0 0 0 18px; color: var(--muted); font-size: 15px; }
.form-list li + li { margin-top: 4px; }
/* The welcome post photo: what they chose, then the button. */
.form-photo-guide { display: flex; align-items: flex-start; gap: 16px; margin: 10px 0 16px; }
.form-photo-example { flex: 0 0 120px; margin: 0; }
.form-photo-example img { display: block; width: 120px; height: auto; border: 1px solid var(--line, rgba(255,255,255,.14)); }
.form-photo-example figcaption { margin-top: 6px; color: var(--subtle); font-size: 12px; text-align: center; }
.form-photo-hint { margin: 0; color: var(--muted); font-size: 14px; }
.form-photo:empty { display: none; }
.form-photo { margin: 0 0 12px; }
.form-photo img { display: block; width: 100%; max-width: 260px; max-height: 340px; object-fit: cover; }
.form-photo-ok { display: flex; align-items: center; gap: 8px; max-width: 260px; margin: 0 0 12px; padding: 10px 12px; background: var(--good-tint); color: var(--good); font-size: 15px; font-weight: 700; }
.form-photo-ok .i { stroke-width: 2.6; }
.form-photo-ok[hidden] { display: none; }
.form-photo-msg { min-height: 20px; margin: 10px 0 0; color: var(--muted); font-size: 14px; }
.form-photo-msg.bad { color: var(--red-ink); }
.ffields { display: flex; flex-direction: column; gap: 18px; margin-top: 18px; }
.ffields.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 10px; }
.ffields.grid .wide { grid-column: 1 / -1; }
.ffield { display: block; min-width: 0; }
.ffield .lbl { display: block; font-size: 15px; font-weight: 600; line-height: 1.4; margin-bottom: 8px; }
.ffield .lbl em { font-style: normal; color: var(--subtle); font-weight: 500; font-size: 13px; }
.ffield small { display: block; color: var(--subtle); font-size: 13px; margin-top: 6px; }
.ffield textarea.field { resize: none; line-height: 1.45; min-height: 120px; }
.ffield .details { margin-top: 10px; min-height: 96px; }
.unitwrap { display: flex; align-items: center; border: 1px solid var(--line-strong); background: var(--field); }
.unitwrap .field { border: 0; background: transparent; flex: 1; min-width: 0; }
.unitwrap .field:focus { outline: 0; }
.unitwrap:focus-within { outline: 2px solid var(--red); outline-offset: 1px; }
.unitwrap .unit { padding: 0 12px; color: var(--subtle); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; flex: none; }
.picks, .yn { display: flex; flex-wrap: wrap; gap: 8px; }
.picks .chip, .yn .chip, .chip.none { flex: none; text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; padding: 10px 14px; color: var(--text); }
.picks .chip.on, .yn .chip.on { background: var(--red); border-color: var(--red); color: #fff; }
.yn .chip { min-width: 96px; text-align: center; }
.chip.none { margin-top: 8px; font-size: 12.5px; padding: 7px 12px; color: var(--muted); }
.form-nav { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; margin-top: 22px; }
.form-nav .btn + .btn { margin-top: 0; }

/* written pieces: a screenshot, red words, and the line that must not be skipped */
.prose img.shot { max-width: 320px; width: 100%; margin: 12px auto; display: block; border: 1px solid var(--line-strong); }
mark.red { background: transparent; color: var(--red-ink); font-weight: 700; }
.callout { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; margin: 14px 0; background: var(--red-tint); border-left: 3px solid var(--red); }
.callout .tag { flex: none; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; background: var(--red); color: #fff; padding: 3px 7px; margin-top: 3px; }
.callout div { font-weight: 600; }

/* the next live call, and the recordings afterwards */
.nextcall { position: relative; padding: 16px 16px 15px 18px; background: var(--panel); border: 1px solid var(--line); }
.nextcall::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--red); }
.nextcall b { display: block; font-family: "Barlow Condensed", Impact, sans-serif; font-weight: 800; text-transform: uppercase; font-size: 26px; line-height: 1; }
.nextcall p { color: var(--muted); font-size: 14.5px; margin-top: 8px; }
/* A bold word INSIDE the paragraph -- "3 weeks in a row" -- is emphasis, not a
   second headline. Without this it inherits `.nextcall b` above and breaks out
   of the sentence as its own 26px condensed block line. */
.nextcall p b { display: inline; font-family: inherit; font-size: inherit;
  line-height: inherit; text-transform: none; color: var(--text); font-weight: 800; }
.nextcall .btn { margin-top: 14px; }
.nextcall .miss { display: block; color: var(--subtle); font-size: 12.5px; margin-top: 10px; }
/* THREE CARDS CAN SHARE A SHAPE BUT NOT A VOLUME. Stefan, 10-11-2026:
   "the Pursuit, Check In, Book a Call, and Start here all look exactly the
   same ... they can easily be missed because they all blend. More than
   anything, the check-in needs to stick out each week."

   They blended because each one had a red left edge AND a solid red
   full-width button, so nothing was louder than anything else. The fix is
   weight, not new colours -- this hub is built on one red and a second
   alarm colour would be a new vocabulary for the sake of one card:

     Start here   dark ground, red glow     a welcome
     Check-in     red-tinted ground, filled a duty, and the loudest thing here
     Book a call  plain ground, outlined    an offer you may ignore

   so the eye sorts them before it reads a word. */

/* THE CHECK-IN: the one thing they owe this week. Filled, not outlined. */
.nextcall.due { background: var(--red-tint); border-color: color-mix(in srgb, var(--red) 34%, transparent); }
.nextcall.due::before { width: 5px; }
.nextcall.due .eyebrow { color: var(--red-ink); }
.nextcall.due p { color: var(--text); }

/* BOOK A CALL: an offer, not a duty. No red at all -- a grey edge and an
   outlined button, so it reads as available rather than outstanding. */
/* The coach's reply: the one card in this stack that is good news rather
   than something they owe, so it is the one that is not red. */
.nextcall.reply::before { background: var(--good); }
.nextcall.reply .eyebrow { color: var(--good); }
.nextcall.reply .eyebrow::before { background: var(--good); }
.nextcall.reply p { font-style: italic; }
/* Saved for their call: the line saying when is a fact, not the coach's
   words, so only a note they added is in italics. */
.nextcall.oncall p { font-style: normal; }
.nextcall.oncall p.said { font-style: italic; margin-top: 6px; }

/* Sent, waiting on the coach: done on their side, so no red -- the green
   tick colour on the edge only, saving the full green card for the reply. */
.nextcall.sent::before { background: var(--good); }
.nextcall.sent .eyebrow { color: var(--subtle); }
.nextcall.sent .eyebrow::before { background: var(--good); }

.nextcall.support::before { background: var(--line-strong); }
.nextcall.support .eyebrow { color: var(--subtle); }
/* The eyebrow's dash is red by default, which left one red mark on the card
   that is meant to carry none. */
.nextcall.support .eyebrow::before { background: var(--line-strong); }
/* Late enough to say so. Still the one red -- a second alarm colour would be
   a new vocabulary for the sake of one card. */
.nextcall.late .eyebrow { color: var(--red-ink); }
.nextcall.live .eyebrow { color: var(--good); }
.nextcall.live .eyebrow::before { background: var(--good); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.row.call { align-items: flex-start; }
.row.call .txt p { color: var(--muted); font-size: 13.5px; margin-top: 5px; }
.row.call .meta .when { color: var(--red-ink); }
/* a recording's date is long; it wraps rather than being cut, since there is
   no topic on these rows competing for the line. */
.row.call .meta { white-space: normal; overflow: visible; }

/* ANNOUNCEMENTS: news, at the very top of home. A red line across the TOP
   rather than down the left, so it is a different shape from the stack of
   things a client owes underneath it, and outlined buttons, so it never
   out-shouts the check-in. A picture, when there is one, does the shouting. */
.news-stack { display: grid; gap: 10px; }
.news { position: relative; background: var(--panel); border: 1px solid var(--line); border-top: 2px solid var(--red);
  overflow: hidden; transition: opacity .2s ease, transform .2s ease; }
.news.going { opacity: 0; transform: translateY(-6px); }
.news-pic { aspect-ratio: 16 / 9; background: var(--panel-2) center / cover no-repeat; border-bottom: 1px solid var(--line); }
.news-pic[data-go] { cursor: pointer; }
/* On home the picture is a strip, so the banner leaves room for the rest of
   the screen; the post page shows it whole. */
.news.on-home .news-pic { aspect-ratio: 2 / 1; }
/* The others, one slim row each. */
.news-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px 10px 10px; text-align: left; color: inherit;
  background: var(--panel); border: 1px solid var(--line); cursor: pointer; }
.news-row-day { flex: none; width: 44px; text-align: center; border: 1px solid var(--line-strong); padding: 3px 0 4px; }
.news-row-day span { display: block; font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--red-ink); }
.news-row-day b { display: block; font-family: "Barlow Condensed", Impact, sans-serif; font-weight: 800; font-size: 22px; line-height: 1; }
.news-row-day.glyph { border: 0; padding: 0; color: var(--red-ink); display: grid; place-items: center; height: 36px; }
.news-row-day.glyph svg { width: 24px; height: 24px; stroke-width: 1.6; }
.news-row .txt { flex: 1; min-width: 0; }
.news-row .tag { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--red-ink); }
.news-row b { display: block; font-family: "Barlow Condensed", Impact, sans-serif; font-weight: 700; text-transform: uppercase; font-size: 19px;
  line-height: 1.05; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-row b em { font-style: normal; color: var(--red-ink); }
.news-row .chev { color: var(--subtle); }
.news-body { padding: 13px 16px 16px; }
.news-top { display: flex; align-items: center; gap: 10px; min-height: 26px; }
.news-top .eyebrow { margin-bottom: 0; }
.news-x { margin: -6px -10px -6px auto; width: 40px; height: 40px; display: grid; place-items: center; border: 0;
  background: transparent; color: var(--subtle); cursor: pointer; }
.news-x svg { width: 18px; height: 18px; }
.news-main { display: flex; gap: 14px; align-items: flex-start; margin-top: 8px; }
.news-text { flex: 1; min-width: 0; }
.news-text h2 { font-size: 27px; font-weight: 800; line-height: .98; overflow-wrap: anywhere; }
.news-text p { color: var(--muted); font-size: 14.5px; margin-top: 8px; }
.news-text p a { text-decoration: underline; text-underline-offset: 3px; }
/* The date tile: a calendar page, so "when" is read before a word is. */
.news-date { flex: none; width: 66px; text-align: center; border: 1px solid var(--line-strong); padding: 6px 4px 7px; }
.news-date span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--red-ink); }
.news-date b { display: block; font-family: "Barlow Condensed", Impact, sans-serif; font-weight: 800; font-size: 34px; line-height: 1; margin-top: 2px; }
.news-date i { display: block; font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--subtle); margin-top: 5px; line-height: 1.15; }
.news-cta { margin-top: 14px; }
.news-flag { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--warn);
  border: 1px solid currentColor; padding: 2px 6px; min-width: 0; line-height: 1.35; }
.news-row .news-flag { margin-left: 6px; padding: 0 5px; font-size: 9px; letter-spacing: .08em; }
.news-more { display: flex; align-items: center; justify-content: flex-end; gap: 4px; width: 100%; padding: 2px 0; border: 0; background: transparent;
  color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.news-more svg { width: 16px; height: 16px; }
.news-more.left { justify-content: flex-start; margin-top: 12px; color: var(--text); }
.news-restore { display: block; margin-top: 12px; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 13px;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.news-post .news-flag { display: inline-block; margin-bottom: 12px; }
.news-post .news-hero { display: block; width: 100%; height: auto; border: 1px solid var(--line); margin: 0 0 16px; }
.news-post .news-cta { margin-top: 18px; }

/* what is waiting behind the onboarding form */
/* The form is owed: nothing to wander off to until it is in. */
body.form-first .tabbar, body.form-first .topbar .iconbtn[data-go="/search"] { display: none; }
.detail.form h1 + .summary { margin-top: 12px; }

/* ask the coach */
.ask { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px; text-align: left; color: inherit; border: 1px dashed var(--line-strong); background: transparent; }
.ask .glyph { width: 30px; height: 30px; color: var(--red-ink); display: grid; place-items: center; flex: none; }
.ask .glyph svg { width: 24px; height: 24px; stroke-width: 1.6; }
.ask b { display: block; font-family: "Barlow Condensed", Impact, sans-serif; font-weight: 700; text-transform: uppercase; font-size: 19px; line-height: 1; }
.ask span:not(.glyph) { display: block; color: var(--subtle); font-size: 12.5px; margin-top: 4px; }
.ask .chev { margin-left: auto; color: var(--subtle); }
.ask-sheet textarea.field { resize: none; min-height: 110px; line-height: 1.45; }
/* The report lane reads as a warning, not an invitation: a dashed amber edge
   beside the coach's red one, so the two boxes are never the same button. */
.ask.help .glyph { color: var(--warn); }
/* Three lanes, three colours: the coach's red, a fault's amber, an idea's
   green. Asking for more hamstring work is not an incident and must not
   wear the colour of one. */
.ask.idea .glyph { color: var(--good); }
/* .chips is built to bleed off a page's gutters; inside a sheet it must not. */
.ask-sheet .chips { margin: 0 0 12px; padding: 0; overflow-x: visible; flex-wrap: wrap; }
.ask-sheet .btn + .btn { margin-top: 8px; }

/* toast */
.toast { position: fixed; left: 50%; bottom: calc(var(--tab-h) + 18px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: var(--red); color: #fff; padding: 10px 16px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; z-index: 40; animation: rise .2s ease;
  white-space: nowrap; max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis; }

/* ---------- standalone pages: sign-in, welcome, ended ---------- */
.auth { min-height: 100dvh; display: flex; flex-direction: column; }
.auth .top { background: var(--top); color: #fff; padding: calc(22px + env(safe-area-inset-top)) 20px 34px; text-align: center; border-bottom: 1px solid rgba(255,255,255,.08); }
.auth .top img { height: 44px; margin: 0 auto 6px; }
.auth .top .crest-full { width: min(330px, 84vw); height: auto; margin: 0 auto; display: block; }
.auth .card { margin: 18px 16px 0; padding: 22px 18px; }
.auth h1 { font-size: 34px; }
.auth .lede { color: var(--muted); margin: 10px 0 18px; font-size: 15px; }
.auth label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--subtle); margin: 14px 0 6px; }
.auth .err { margin-top: 12px; color: var(--red-ink); font-size: 14px; font-weight: 600; }
.auth .btn { margin-top: 20px; }
.auth .foot { text-align: center; color: var(--subtle); font-size: 13px; padding: 22px 24px; line-height: 1.55; }
.auth .foot a { font-weight: 600; }
/* ON A PHONE THE CREST GIVES WAY.

   At 375x812 the crest block was 263px -- a third of the screen -- and it
   pushed "First time here? Set up your password" 19px below the fold on the
   one screen where a first-timer most needs it. Measured 10-14-2026. The
   logo is still the first thing they see; it just stops being the biggest
   thing on the smallest screen. */
@media (max-width: 480px) {
  .auth .top { padding: calc(16px + env(safe-area-inset-top)) 20px 22px; }
  .auth .top .crest-full { width: min(250px, 66vw); }
  .auth .top img { height: 38px; }
  .auth .card { margin-top: 14px; }
  .auth .foot { padding: 16px 24px; }
}
.auth .linky { border: 0; background: none; color: var(--red-ink); font: inherit; font-weight: 700; padding: 0 0 8px; text-decoration: underline; text-underline-offset: 3px; }
.auth .card .linky { display: block; font-size: 13px; padding: 10px 0 0; margin-bottom: 4px; }
.auth .two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.auth .card.first .btn.secondary { margin-top: 10px; }

@media (min-width: 640px) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .row .thumb { width: 128px; }
  h1 { font-size: 48px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }


/* THE ACKNOWLEDGEMENT on the last screen of the onboarding form. The whole
   statement is the button, because a 16px tickbox beside a sentence is the
   thing people tick without reading, and being read is the only job this
   has. Stefan, 10-10-2026, on whether to ask for a drawn signature as well:
   the contract is already signed, so what the medical answers need is
   somebody saying they are accurate -- not a squiggle. */
.ack { display: flex; gap: 14px; align-items: flex-start; width: 100%; text-align: left;
  padding: 16px 16px 16px 14px; background: var(--panel); border: 1px solid var(--line-strong);
  color: var(--text); cursor: pointer; }
.ack .box { flex: none; width: 26px; height: 26px; margin-top: 1px; border: 2px solid var(--line-strong);
  display: grid; place-items: center; color: transparent; }
.ack .box svg { width: 16px; height: 16px; }
.ack b { display: block; font-weight: 600; font-size: 15.5px; line-height: 1.45; }
.ack small { display: block; color: var(--muted); font-size: 13.5px; margin-top: 7px; line-height: 1.5; }
.ack.on { border-color: var(--red); background: var(--red-tint); }
.ack.on .box { background: var(--red); border-color: var(--red); color: #fff; }

/* The Shop's two shelves, and the line that says whose store a tile opens. */
.shop-seg { margin: 0 0 14px; }
.phorm-note { border: 1px solid var(--line); background: var(--panel); padding: 12px 14px; margin: 0 0 12px; }
.phorm-note b { display: block; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.phorm-note span { display: block; color: var(--muted); font-size: 13.5px; margin-top: 4px; line-height: 1.45; }
.products + .group-label { margin-top: 22px; }
.disclose { margin-top: 14px; text-align: center; font-size: 12px; }

/* Coach's picks: the starred 1st Phorm products are the recommendation. */
.product .pic { position: relative; }
.pick-badge { position: absolute; top: 8px; left: 8px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; padding: 4px 7px; line-height: 1; }
.pick-note { display: flex; gap: 8px; align-items: flex-start; color: var(--muted); font-size: 13.5px; line-height: 1.45; margin: 0 0 12px; }
.pick-note .i { flex: none; width: 16px; height: 16px; color: var(--red); margin-top: 1px; }


/* A STAFF PREVIEW, seen from inside the hub. Unmistakable on purpose: this
   is somebody else's screen and anything that looks like an action here is a
   write against their record. A hairline band rather than a banner, because
   it must not change the layout being inspected -- the whole point is to see
   what THEY see. */
body.is-preview { box-shadow: inset 0 0 0 2px var(--red-ink); }
body.is-preview::before { content: "PREVIEW — read only"; position: fixed; z-index: 99;
  top: 0; left: 50%; transform: translateX(-50%);
  background: var(--red); color: #fff; font-size: 9.5px; font-weight: 800;
  letter-spacing: .14em; padding: 2px 10px 3px; border-radius: 0 0 6px 6px; }
.ghostbtn { display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 18px; width: 100%; background: transparent;
  border: 1px dashed var(--line-strong); color: var(--subtle);
  font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  text-align: center; }

/* ---------- Your check-ins ----------
   The home card carries the newest reply for three weeks and then drops it,
   which is right for news. This is the other thing a client wants: their own
   answers kept, and the videos in one place instead of scrolled for. */
.skel { height:120px; border-radius:14px; background:var(--panel);
  animation:skelpulse 1.2s ease-in-out infinite; }
@keyframes skelpulse { 0%,100% { opacity:.55 } 50% { opacity:.85 } }

.ci-vids { display:flex; gap:10px; overflow-x:auto; padding:2px 2px 10px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.ci-vid { flex:0 0 auto; scroll-snap-align:start; display:flex; align-items:center; gap:10px;
  padding:11px 14px 11px 11px; border-radius:14px; background:var(--panel);
  border:1px solid var(--line); color:var(--text); text-decoration:none; }
.ci-vid b { display:block; font-size:13.5px; }
.ci-vid i { display:block; font-style:normal; font-size:11.5px; color:var(--muted); margin-top:2px; }
.ci-play { width:30px; height:30px; flex:0 0 30px; border-radius:50%; display:grid; place-items:center;
  background:var(--red); color:var(--on-red); }
.ci-play svg { width:14px; height:14px; }

.ci-row { margin-top:10px; padding:0; overflow:hidden; }
.ci-row > summary { display:flex; align-items:center; gap:12px; padding:13px 14px;
  cursor:pointer; list-style:none; }
.ci-row > summary::-webkit-details-marker { display:none; }
.ci-when { flex:0 0 52px; font-size:12px; font-weight:700; color:var(--muted); line-height:1.25; }
.ci-body { flex:1; min-width:0; }
.ci-body b { font-size:14px; }
.ci-body .subtle { margin:2px 0 0; font-size:12px; }
.ci-chev { flex:0 0 auto; color:var(--muted); transition:transform .18s ease; }
.ci-chev svg { width:15px; height:15px; transform:rotate(90deg); }
.ci-row[open] .ci-chev { transform:rotate(180deg); }
.ci-row.missed, .ci-row.open { display:flex; align-items:center; gap:12px; padding:13px 14px; }
/* The open row opens the form. `a { color: var(--red-ink) }` would paint the
   whole row red, and a card that is tappable has to say so with the same
   chevron every finished row already uses. */
a.ci-row { color: inherit; }
a.ci-row:hover { border-color: var(--line-strong); }
a.ci-row:active { background: var(--panel-2); }
a.ci-row .ci-chev svg { transform: rotate(0deg); }
.ci-row.missed .ci-body b { color:var(--muted); }
.ci-open { padding:2px 14px 16px; }
.ci-reply { border-radius:12px; padding:12px 13px; background:var(--bg-glow);
  border:1px solid var(--line); }
.ci-reply p { margin:6px 0 12px; white-space:pre-wrap; line-height:1.5; }
.ci-reply .btn { margin-top:0; }
.ci-reply .btn + .btn { margin-top:8px; }
.ci-qa { margin-top:10px; }
.ci-qa span { display:block; font-size:12px; font-weight:700; color:var(--muted); }
.ci-qa p { margin:3px 0 0; white-space:pre-wrap; line-height:1.5; }

/* Colour and size on a Pursuit gear page, each its own row of buttons. A
   size the chosen colour has run out of is struck through but still takes
   a tap (it moves the colour to one that has it); a value with nothing left
   anywhere is dead. Buy now stays grey until every row has a pick. */
.opt { margin: 0 0 16px; }
.opt-name { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--subtle); margin-bottom: 8px; }
.opt-name b { color: var(--text); letter-spacing: .04em; text-transform: none; font-size: 13px; font-weight: 600; margin-left: 8px; }
.opt-vals { display: flex; flex-wrap: wrap; gap: 6px; }
.opt-vals button { min-width: 48px; min-height: 42px; padding: 0 13px; border: 1px solid var(--line-strong); background: transparent;
  color: var(--text); font: inherit; font-size: 14px; font-weight: 600; }
.opt-vals button.on { background: var(--red); border-color: var(--red); color: var(--on-red); }
.opt-vals button.out { color: var(--subtle); text-decoration: line-through; text-decoration-thickness: 1px; }
.opt-vals button.out.on { color: var(--on-red); }
.opt-vals button:disabled { color: var(--subtle); border-style: dashed; opacity: .55; text-decoration: line-through; }
.btn[aria-disabled] { background: var(--panel-2); color: var(--muted); border: 1px solid var(--line-strong); cursor: default; }
.btn[aria-disabled]:active { transform: none; }
.opt.need .opt-name { color: var(--red-ink); }
.opt.need .opt-vals { animation: opt-need .4s ease 1; }
@keyframes opt-need { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* ---------- Get the app (/app) ----------
   The install walkthrough. Each step is a small drawn screen beside the
   words, with the one thing to tap ringed in red -- WillOS's /app pattern,
   which Stefan liked, in the Hub's clothes. The drawings are always grey and
   schematic so nobody tries to tap them. */
.getapp .top { padding-bottom: 16px; }
.getapp .top .crest-full { width: min(190px, 52vw); }
.ga-chip { text-transform: none; letter-spacing: 0; color: var(--text); }
.getapp .ga { width: 100%; max-width: 620px; margin: 0 auto; padding: 0 0 28px; }
.ga-intro { padding: 22px 18px 4px; }
.ga-intro h1 { font-size: 38px; }
.ga-intro .lede { margin-bottom: 4px; }
.getapp .card { margin: 16px 16px 0; padding: 20px 16px; }
.getapp .card h2 { font-size: 26px; line-height: 1; }
.getapp .card h2 em { font-style: normal; color: var(--red-ink); }
.ga-sub { margin: 8px 0 4px; font-size: 15px; }
.getapp .btn { margin-top: 16px; }
.getapp .btn + .btn { margin-top: 10px; }

.ga-qr { display: flex; gap: 20px; align-items: center; }
.ga-qr .qr { flex: none; width: 168px; height: 168px; background: #fff; padding: 6px; }
.ga-qr .qr svg { width: 100%; height: 100%; display: block; }
.ga-qr p { margin-top: 10px; font-size: 15px; }

.ga-gate { border-color: var(--red); }
.ga-gate p.muted { margin-top: 8px; font-size: 15px; }
.ga-gate-then { margin-top: 12px; line-height: 1.5; }
.ga-url { width: 100%; margin-top: 10px; padding: 10px 12px; background: var(--field); color: var(--text); border: 1px solid var(--line-strong); font: inherit; font-size: 14px; }
.ga-url[hidden] { display: none; }
.ga-install .btn { margin-top: 14px; }
.ga-install p { margin-top: 8px; }

.ga-steps .ga-step { display: grid; grid-template-columns: 118px 1fr; gap: 16px; align-items: start; margin-top: 16px; }
.ga-steps .ga-step + .ga-step { padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--line); }
.s-h { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.s-h b { font-size: 16.5px; line-height: 1.25; }
.s-h .n { flex: none; width: 26px; height: 26px; display: grid; place-items: center; background: var(--red); color: #fff; font-family: "Barlow Condensed", Impact, sans-serif; font-weight: 800; font-size: 16px; }
.s-body p { font-size: 14.5px; line-height: 1.5; color: var(--muted); margin-top: 8px; }
.s-body p b { color: var(--text); font-weight: 600; }
.s-body p.subtle { font-size: 13px; color: var(--subtle); }
.s-body p.subtle b { color: var(--muted); }
/* The words of the button exactly as it looks on the phone. */
.ga-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--line-strong); font-size: 13.5px; font-weight: 600; background: var(--panel-2); }
.ga-chip svg.i { width: 16px; height: 16px; color: #3b82f6; }
.ga-chip .m-plus { color: var(--muted); }

/* the drawn phone */
.mock { width: 118px; height: 196px; border: 1.5px solid var(--line-strong); border-radius: 18px; background: #0c1012; overflow: hidden; position: relative; display: flex; flex-direction: column; font-size: 8.5px; line-height: 1.25; color: #c9d1cf; padding: 10px 7px 8px; }
:root[data-theme="light"] .mock { background: #f2f2ef; color: #3a4442; }
.mock .hl { outline: 2px solid var(--red); outline-offset: 1px; box-shadow: 0 0 0 5px rgba(227,27,35,.22); animation: ga-pulse 1.8s ease-in-out infinite; position: relative; z-index: 1; }
@keyframes ga-pulse { 50% { box-shadow: 0 0 0 8px rgba(227,27,35,.08); } }
@media (prefers-reduced-motion: reduce) { .mock .hl { animation: none; } }
.m-page { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 4px 3px; }
.m-page i { display: block; height: 6px; background: rgba(127,140,138,.28); }
.m-page i.short { width: 60%; }
.m-page i.m-logo { height: 22px; width: 44px; background: rgba(227,27,35,.5); margin-bottom: 4px; }
.m-bar { display: flex; align-items: center; gap: 4px; padding: 5px 4px; background: rgba(127,140,138,.16); border-radius: 12px; }
.m-bar.top { margin-bottom: 6px; border-radius: 8px; }
.m-pill { flex: 1; min-width: 0; display: flex; align-items: center; gap: 3px; padding: 1px 4px 1px 2px; border-radius: 10px; background: rgba(127,140,138,.18); }
.m-addr { flex: 1; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 7.5px; }
.m-ico { flex: none; padding: 2px 4px; font-weight: 700; font-size: 10px; border-radius: 6px; }
.m-sheet, .m-menu { display: flex; flex-direction: column; gap: 3px; margin-top: auto; }
.m-menu { margin: 0 0 0 auto; width: 92%; background: rgba(127,140,138,.14); padding: 4px; border-radius: 6px; }
.m-sheet-top, .m-add-icon { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.m-sheet-top img, .m-add-icon img { width: 22px; height: 22px; border-radius: 5px; flex: none; }
.m-sheet-top span, .m-add-icon span { display: flex; flex-direction: column; min-width: 0; }
.m-sheet-top small, .m-add-icon small { opacity: .6; font-size: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-row { padding: 5px 6px; background: rgba(127,140,138,.16); border-radius: 5px; display: flex; justify-content: space-between; }
.m-add { display: flex; flex-direction: column; gap: 10px; }
.m-add-top { display: flex; justify-content: space-between; align-items: center; color: #3b82f6; font-weight: 600; }
.m-add-top .hl { padding: 1px 5px; border-radius: 5px; }
.m-add-web { display: flex; justify-content: space-between; align-items: center; padding: 6px; background: rgba(127,140,138,.16); border-radius: 5px; }
.m-toggle { width: 20px; height: 12px; border-radius: 6px; background: #34c759; position: relative; flex: none; }
.m-toggle::after { content: ""; position: absolute; right: 1px; top: 1px; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.m-dialog { margin: auto 0; background: rgba(127,140,138,.18); border-radius: 8px; padding: 10px 8px; display: flex; flex-direction: column; gap: 10px; }
.m-dialog-btns { display: flex; justify-content: flex-end; gap: 10px; color: #8ab4f8; font-weight: 600; }
.m-dialog-btns .hl { padding: 1px 5px; border-radius: 5px; }
.m-home { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 14px 2px; }
.m-home i, .m-home .m-app { aspect-ratio: 1; border-radius: 6px; background: rgba(127,140,138,.22); display: block; }
.m-home .m-app { background: none; overflow: visible; }
.m-home .m-app img { width: 100%; height: 100%; border-radius: 6px; }

.ga-switch { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 22px 16px 0; }
.ga-switch .seg { display: inline-flex; border: 1px solid var(--line-strong); }
.ga-switch .seg button { border: 0; background: transparent; padding: 9px 14px; font-size: 13px; font-weight: 600; color: var(--muted); }
.ga-switch .seg button + button { border-left: 1px solid var(--line-strong); }
.ga-switch .seg button.active { background: var(--red); color: #fff; }
.ga-note { margin: 22px 16px 0; }
.ga-faq { margin: 26px 16px 0; }
.ga-faq h2 { margin-bottom: 10px; }
.ga-faq details { border-top: 1px solid var(--line); }
.ga-faq details:last-child { border-bottom: 1px solid var(--line); }
.ga-faq summary { list-style: none; cursor: pointer; padding: 14px 28px 14px 0; font-weight: 600; font-size: 15px; position: relative; }
.ga-faq summary::-webkit-details-marker { display: none; }
.ga-faq summary::after { content: "+"; position: absolute; right: 4px; top: 11px; color: var(--red-ink); font-size: 20px; font-weight: 400; }
.ga-faq details[open] summary::after { content: "–"; }
.ga-faq details p { padding: 0 0 14px; color: var(--muted); font-size: 14.5px; }
.ga-faq details p b { color: var(--text); font-weight: 600; }
@media (max-width: 380px) {
  .ga-steps .ga-step { grid-template-columns: 96px 1fr; gap: 12px; }
  .mock { width: 96px; height: 170px; font-size: 7.5px; }
}
@media (max-width: 480px) {
  .ga-qr { flex-direction: column; align-items: flex-start; }
}

/* The "get the app" row on home, for a phone that is not in the app yet. */
.ga-row { display: flex; align-items: center; gap: 12px; padding: 9px 8px 9px 10px; background: var(--panel); border: 1px solid var(--line); margin-bottom: 14px; }
.ga-row img { width: 34px; height: 34px; border-radius: 8px; flex: none; }
.ga-row .txt { flex: 1; min-width: 0; }
.ga-row .txt b { display: block; font-size: 15px; line-height: 1.25; }
.ga-row .txt span { display: block; font-size: 13px; line-height: 1.3; color: var(--muted); }
.ga-row .go { flex: none; padding: 8px 11px; background: transparent; color: var(--text); outline: 1px solid var(--line-strong); font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; border: 0; }
.ga-row .x { flex: none; border: 0; background: none; color: var(--subtle); font-size: 20px; line-height: 1; padding: 4px 2px 4px 4px; }