/* MorseHub landing page, static pages and admin panel. Loads after app.css; every color comes from tokens.css.
   Quiet Threads paper with Signal's one blue (DESIGN.md "Landing and admin"). Landing rebuilt 2026-10-07
   (REBUILD-BRIEF-2026-10-07.md): one column of 17 px copy, hero two-column from 880 px, one filled button per
   screen, boxes only for the trial card, the demo card and code blocks, hairlines only above Price and the footer. */

.text-link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.btn { text-decoration: none; }
.opt { font-weight: 400; color: var(--ink-3); }
.quiet { color: var(--ink-2); font-size: var(--t-small); line-height: 1.5; }
/* Sales and reading pages: 14 px labels and input borders at 3:1 or better (persona review 2026-10-07, items 14 and 15). */
.landing .label, .page .label { font-size: var(--t-small); }
.landing .input, .page .input { border-color: var(--ink-3); }
.landing .input:focus, .page .input:focus { border-color: transparent; }
.landing .btn:not(.small), .page .btn:not(.small) { font-size: 15px; }
code.inline { font-size: .875em; background: var(--wash); border-radius: var(--r-tail); padding: 1px 5px; overflow-wrap: anywhere; }

/* ---------- shared chrome: bar and footer ---------- */
.site-bar {
  flex: none; height: var(--bar); display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  width: 100%; max-width: var(--page); margin: 0 auto; padding: 0 var(--s4);
}
.bar-links { display: flex; align-items: center; gap: var(--s1); }
.bar-link {
  min-height: var(--tap); padding: 0 var(--s3); display: inline-flex; align-items: center; border-radius: var(--r-pill);
  font-size: var(--t-small); font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap;
  transition: background var(--fast) var(--ease);
}
.bar-link[aria-current="page"] { color: var(--accent); }
.bar-long { margin-right: .3em; }
.bar-link:active { background: color-mix(in srgb, var(--ink) 10%, var(--wash)); }
a.wordmark { color: var(--ink); text-decoration: none; min-height: var(--tap); border-radius: var(--r-row); }
.site-foot {
  width: 100%; max-width: var(--page); margin: 0 auto; padding: var(--s5) var(--s4) var(--s6);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--s4);
  font-size: var(--t-small); color: var(--ink-2); line-height: 1.5;
}
.site-foot::before { content: ""; flex-basis: 100%; height: 1px; background: var(--line); margin-bottom: var(--s1); }
.site-foot .text-link { min-height: var(--tap); display: inline-flex; align-items: center; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 var(--s4); }
.loading-mark .mark { width: 32px; height: 32px; }
.panel .loading-mark { padding: var(--s6) var(--s5); }

/* ---------- landing ---------- */
.landing { --page: 1040px; --copy: 640px; min-height: 100%; }
#landing-main { width: 100%; max-width: var(--page); margin: 0 auto; padding: 0 var(--s4) 56px; font-size: 17px; line-height: 1.5; }
#landing-main:focus { outline: none; }
.landing .quiet { font-size: 15px; }

/* Hero (Chris, 2026-10-07): words, three lines and the Start free trial button on the left, the Mom conversation
   on the right. Under 880 px it is one column in DOM order (words, button, conversation). The trial form is its
   own section after How it works. */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: var(--s6) 56px; align-items: center;
  padding: 48px 0 0;
}
.hero-text { grid-column: 1; grid-row: 1; max-width: var(--copy); }
.hero .demo { grid-column: 2; grid-row: 1; }
.hero-cta { margin-top: var(--s6); }
.hero-cta .btn { min-height: 52px; padding: 0 28px; font-size: 17px; }
.hero h1 {
  font-size: clamp(34px, 4.4vw, 46px); line-height: 1.08; font-weight: 650; letter-spacing: -0.02em; text-wrap: balance;
}
.nb { white-space: nowrap; }
.lede { margin-top: var(--s5); font-size: 19px; line-height: 1.45; color: var(--ink-2); max-width: 32em; text-wrap: pretty; }
.needs { margin: var(--s5) 0 0; padding: 0 0 0 20px; display: grid; gap: var(--s2); color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.needs strong { color: var(--ink); font-weight: 600; }
.hero-note { margin-top: var(--s3); font-size: 15px; }

/* The trial card: the one filled button on the page lives here. */
.trial { padding: var(--s6); display: grid; gap: var(--s4); max-width: 560px; scroll-margin-top: var(--s4); }
.trial:focus { outline: none; }
.trial h2 { font-size: 22px; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
.trial-intro { color: var(--ink-2); font-size: 16px; margin-top: calc(var(--s2) * -1); }
.trial-note { font-weight: 600; }
.trial-form { display: grid; gap: var(--s4); }
.trial-form .btn.fill { justify-self: start; min-width: 180px; }
/* Cloudflare Turnstile (js/turnstile.js): Cloudflare draws it only when it wants a click. Never wider than the column. */
.human-check { max-width: 100%; margin-top: var(--s2); }
.field { display: grid; gap: var(--s1); }
.field .error { margin-top: var(--s1); }
.field .row-help { margin-top: 2px; line-height: 1.45; }
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
/* float:left turns the legend into an ordinary grid row (a rendered legend in a grid fieldset shrinks to one word per line). */
fieldset.field legend { float: left; width: 100%; padding: 0; margin: 0 0 var(--s2); }
/* Phone picker: radio buttons drawn as chips. The checked one gets a 2 px ink edge, a wash and bold, so color is never the only signal. */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip { position: relative; display: inline-block; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s4); border: 1px solid var(--ink-3);
  border-radius: var(--r-pill); font-size: 15px; font-weight: 500; color: var(--ink); background: var(--card); white-space: nowrap;
  transition: background var(--fast) var(--ease);
}
.chip input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--wash); font-weight: 600; }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip input:active + span { background: color-mix(in srgb, var(--ink) 10%, var(--wash)); }
.pick-note { font-size: 15px; line-height: 1.5; color: var(--ink); margin-top: var(--s1); }
textarea.input { min-height: 96px; resize: vertical; line-height: var(--lh); padding-top: 10px; padding-bottom: 10px; }
.input[aria-invalid="true"] { border-color: var(--ink); }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.sent-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); }
.sent-row p { font-weight: 600; }
.sent-row p:focus { outline: none; }
.code-in { letter-spacing: .12em; }
.done-body { display: grid; gap: var(--s2); min-width: 0; line-height: 1.5; }
.done-label { font-size: var(--t-small); font-weight: 600; color: var(--ink-2); margin-top: var(--s2); }
.invite-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.invite-code { font-size: 24px; font-weight: 600; letter-spacing: .06em; user-select: all; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.done-body .btn { margin-top: var(--s2); }
.req-done { display: flex; gap: var(--s3); align-items: flex-start; line-height: 1.5; }
.req-done:focus { outline: none; }
.req-done strong { font-weight: 600; }
.done-mark { width: 28px; height: 28px; border-radius: var(--r-pill); border: 1px solid var(--accent); color: var(--accent); display: grid; place-items: center; flex: none; }
.done-mark .icon { width: 16px; height: 16px; }
/* The trap field: off-screen for people, still in the form for bots (not display:none). */
.trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* The one picture: MorseHub as it looks, drawn from the app's own parts. A real photo of Chris's phone beside a
   laptop can sit above it (.hero-photo), when there is one. */
.demo { margin: 0; display: grid; gap: var(--s4); }
.hero-photo { width: 100%; height: auto; display: block; border-radius: var(--r-card); border: 1px solid var(--line); }
.demo-card { overflow: hidden; max-width: 440px; width: 100%; }
.demo-head {
  display: flex; align-items: center; gap: var(--s3); min-height: 56px; padding: var(--s2) var(--s3) var(--s2) var(--s4);
  border-bottom: 1px solid var(--line); font-size: 16px;
}
.demo-who { flex: 1; min-width: 0; display: grid; }
.demo-name { font-weight: 600; }
.demo-head .pill { max-width: none; }
.demo-body { display: flex; flex-direction: column; padding: var(--s2) var(--s4) var(--s4); min-height: 236px; justify-content: flex-end; font-size: 16px; }
.demo-stamp { align-self: center; font-size: var(--t-meta); color: var(--ink-3); margin: var(--s4) 0 var(--s3); }
.demo-stamp strong { font-weight: 600; }
.demo-b { max-width: 78%; padding: var(--s2) var(--s3); border-radius: var(--r-bubble); line-height: var(--lh); }
.demo-b + .demo-b { margin-top: 2px; }
.demo-b.in { align-self: flex-start; background: var(--wash); }
.demo-b.in.tail { border-bottom-left-radius: var(--r-tail); }
.demo-b.out { align-self: flex-end; background: var(--accent-fill); color: var(--on-accent); margin-top: var(--s3); }
.demo-b.out.tail { border-bottom-right-radius: var(--r-tail); }
.demo-meta { align-self: flex-end; font-size: var(--t-meta); color: var(--ink-3); margin: var(--s1) var(--s1) 0; }
.demo-compose {
  display: flex; align-items: center; justify-content: space-between; margin: 0 var(--s3) var(--s3);
  height: var(--tap); padding: 0 6px 0 var(--s4); border-radius: 22px; background: var(--wash); color: var(--ink-2); font-size: 16px;
}
.demo-send { width: 32px; height: 32px; border-radius: var(--r-pill); background: var(--accent-fill); color: var(--on-accent); display: grid; place-items: center; }
.demo-send .icon { width: 18px; height: 18px; }
/* The authored moment: the reply goes out the way it does in the app. Outlined while it travels to
   the phone ("Sending"), filled once the phone has it. The resting state is the finished one. */
.demo-meta { display: grid; justify-items: end; }
.demo-meta > span { grid-area: 1 / 1; }
.m-sending { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .landing:not([hidden]) .demo-b.out { animation: demo-send 900ms cubic-bezier(.16, 1, .3, 1) 600ms both; }
  .landing:not([hidden]) .m-sending { animation: demo-unswap 900ms linear 600ms both; }
  .landing:not([hidden]) .m-sent { animation: demo-swap 900ms linear 600ms both; }
  @keyframes demo-send {
    0% { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--accent); transform: translateY(8px); }
    40% { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--accent); transform: none; }
    100% { background: var(--accent-fill); color: var(--on-accent); box-shadow: inset 0 0 0 1px var(--accent-fill); transform: none; }
  }
  @keyframes demo-swap { 0%, 39% { visibility: hidden; } 40%, 100% { visibility: visible; } }
  @keyframes demo-unswap { 0%, 39% { visibility: visible; } 40%, 100% { visibility: hidden; } }
}

/* Reading pages (/setup, /terms, /privacy): a heading column and a reading column divided by hairlines (DESIGN.md). */
.sect {
  display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--s6);
  padding: 40px 0; border-top: 1px solid var(--line); scroll-margin-top: var(--s4);
}
.sect:focus { outline: none; }
.sect h2 { font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.sect-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); max-width: 62ch; min-width: 0; align-content: start; }
.sect-body > p { line-height: 1.55; }
.sect-body strong { font-weight: 600; }
.sect.last { padding-bottom: 24px; }
/* Landing sections: one column, 64 px apart, no hairline except above Price. */
.landing .sect {
  grid-template-columns: minmax(0, 1fr); gap: var(--s4); max-width: var(--copy);
  padding: 0; margin-top: 64px; border-top: 0;
}
.landing .sect h2 { font-size: 24px; line-height: 1.2; letter-spacing: -0.015em; }
.landing .sect p { line-height: 1.55; text-wrap: pretty; }
.landing .sect strong { font-weight: 600; }
.landing .sect.price { border-top: 1px solid var(--line); padding-top: 48px; }

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: var(--s4); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 32px 1fr; column-gap: var(--s3); line-height: 1.55; }
.steps li::before {
  content: counter(step); grid-row: span 2; width: 28px; height: 28px; border-radius: var(--r-pill);
  border: 1px solid var(--ink-3); display: grid; place-items: center;
  font-size: var(--t-small); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); margin-top: -1px;
}
.steps strong { font-weight: 600; }
.steps span { color: var(--ink-2); }

/* Price: the two tiers side by side, the current one in ink and the other quiet (.past, set by landing.js). */
.tiers { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s6); margin-top: var(--s1); }
.tier { display: grid; gap: var(--s1); align-content: start; min-width: 0; }
.tier + .tier { border-left: 1px solid var(--line); padding-left: var(--s6); }
.tier-who { font-size: 15px; font-weight: 600; color: var(--ink-2); }
.tier-big { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.tier-big .amt { font-size: 40px; font-weight: 650; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tier-for, .tier-then { font-size: 16px; color: var(--ink-2); }
.tier-then .amt-s { color: var(--ink); font-weight: 600; }
.tier.past, .tier.past .amt, .tier.past .amt-s, .tier.past .tier-who, .tier.past .tier-for, .tier.past .tier-then { color: var(--ink-3); }
.founder-left { font-weight: 600; font-size: 16px; color: var(--ink); }
.subscribe-box { display: grid; gap: var(--s3); }
.limits { margin: 0; padding: 0 0 0 20px; display: grid; gap: var(--s2); line-height: 1.5; }
.close { margin-top: 64px; max-width: var(--copy); line-height: 1.6; }
.price-line { font-weight: 600; color: var(--ink); }

/* Code blocks (/setup): wrap long commands, Copy inside the block's top-right corner, never a sideways scroll. */
.code-wrap { position: relative; min-width: 0; }
.code {
  margin: 0; padding: var(--s4) 92px var(--s4) var(--s4); background: var(--wash); border-radius: var(--r-row); min-width: 0;
  font-size: var(--t-small); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2;
}
.code code { font: inherit; }
.code-wrap .btn.small { position: absolute; top: var(--s2); right: var(--s2); background: var(--card); min-height: 32px; font-size: 13px; }
.dl { justify-self: start; }

/* ---------- static pages: /setup, /terms, /privacy, /manage, /subscribe, /welcome ---------- */
body.page { --page: 1040px; display: flex; flex-direction: column; }
.page-main { flex: 1 0 auto; width: 100%; max-width: var(--page); margin: 0 auto; padding: 0 var(--s4) 48px; }
.page-main:focus { outline: none; }
.doc-head { padding: 48px 0 32px; display: grid; gap: var(--s4); max-width: 44em; }
.doc-head h1 { font-size: clamp(30px, 4vw, 40px); line-height: 1.1; font-weight: 650; letter-spacing: -0.02em; text-wrap: balance; }
.doc-head .lede { margin-top: 0; font-size: 18px; }
.doc-date { font-size: var(--t-small); color: var(--ink-2); }
.doc-list { margin: 0; padding-left: 20px; display: grid; gap: var(--s2); line-height: 1.55; }
.doc-list strong { font-weight: 600; }
.explain { margin: 0; display: grid; gap: var(--s3); }
.explain > div { display: grid; gap: 2px; }
.explain dt { font-size: var(--t-small); font-weight: 600; overflow-wrap: anywhere; }
.explain dd { margin: 0; color: var(--ink-2); line-height: 1.5; }
.invite-field { max-width: 320px; }
.solo { display: grid; gap: var(--s5); max-width: 520px; padding-bottom: var(--s6); }
.solo > p { line-height: 1.55; }
.solo .req { justify-items: start; }
.solo .req .field { justify-self: stretch; }
.solo .req p { line-height: 1.5; }
.req { padding: var(--s6); display: grid; gap: var(--s5); max-width: 520px; }
.req .btn.fill { justify-self: start; min-width: 168px; }
.page .req-done { padding: var(--s6); max-width: 520px; }
/* /setup: the phone picker at the top; only the picked phone's lines show (body[data-phone], set by setup.js). */
.picker { display: grid; gap: var(--s2); }
body.page[data-phone="lp2"] [data-phone="sonim"], body.page[data-phone="sonim"] [data-phone="lp2"] { display: none !important; }
.more { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.more + .more { border-top: 0; }
.more > summary {
  min-height: var(--tap); display: flex; align-items: center; gap: var(--s2);
  font-size: var(--t-small); font-weight: 600; color: var(--ink-2); cursor: pointer; list-style: none;
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--fast) var(--ease); margin-right: 2px; flex: none; }
.more[open] > summary::before { transform: rotate(45deg); }
.more > summary:focus-visible { outline-offset: -2px; }
.more > :not(summary) { padding-bottom: var(--s4); }
.fixes { margin: 0; display: grid; gap: var(--s3); }
.fixes > div { display: grid; gap: 2px; }
.fixes dt { font-weight: 600; font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace; font-size: var(--t-small); overflow-wrap: anywhere; }
.fixes dd { margin: 0; color: var(--ink-2); line-height: 1.5; }
.step-note { color: var(--ink-2); line-height: 1.5; }

/* app.css flattens .card under 720 px for the app panes; landing and admin cards keep their shape. */
.landing .card, .admin-main .card, .page .card { border: 1px solid var(--line); border-radius: var(--r-card); }

@media (hover: hover) {
  .bar-link:hover { background: var(--wash); }
  .chip input:not(:checked):hover + span { background: var(--wash); }
  .more > summary:hover { color: var(--ink); }
}
@media (max-width: 879.98px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: var(--s6); padding-top: 24px; }
  .hero-text, .hero .demo { grid-column: 1; grid-row: auto; }
  .demo-card { max-width: 520px; }
  .sect { grid-template-columns: minmax(0, 1fr); gap: var(--s4); padding: 32px 0; }
  .landing .sect { margin-top: 48px; padding: 0; }
  .landing .sect.price { padding-top: 40px; }
  .close { margin-top: 48px; }
}
@media (max-width: 559.98px) {
  .tiers { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .tier + .tier { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: var(--s4); }
  .doc-head { padding: 32px 0 24px; }
  .code { padding: 48px var(--s4) var(--s4); }
}
@media (max-width: 479.98px) {
  .bar-long { display: none; }
  .form-actions .btn { flex: 1 1 100%; }
  .lede { font-size: 17px; }
  .hero h1 { font-size: 32px; }
  .trial, .req, .page .req-done { padding: var(--s5) var(--s4); }
  .trial-form .btn.fill, .req .btn.fill, .hero-cta .btn { justify-self: stretch; width: 100%; }
  .demo-head .pill { display: none; }
  .chip span { font-size: 14px; padding: 0 var(--s3); }
}

/* ---------- admin ---------- */
.admin-bar {
  height: var(--bar); display: flex; align-items: center; gap: var(--s3);
  width: 100%; max-width: 920px; margin: 0 auto; padding: 0 var(--s4);
}
.admin-bar .tag { font-size: var(--t-meta); font-weight: 600; color: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px var(--s2); }
.admin-bar .who { margin-left: auto; font-size: var(--t-small); color: var(--ink-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-main { width: 100%; max-width: 920px; margin: 0 auto; padding: var(--s3) var(--s4) 64px; display: grid; gap: var(--s5); }
.panel-body .actions { justify-content: flex-start; }
.admin-main:focus { outline: none; }
.admin-main.center { min-height: calc(100% - var(--bar)); place-items: center; padding-bottom: var(--bar); }
.panel { overflow: hidden; }
.panel-head {
  display: flex; align-items: center; gap: var(--s3); min-height: 56px; padding: var(--s2) var(--s3) var(--s2) var(--s5);
  border-bottom: 1px solid var(--line);
}
.panel-head h2 { font-size: var(--t-body); font-weight: 600; }
.panel-head .count { font-size: var(--t-small); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.panel-head .btn { margin-left: auto; }
.panel-body { padding: var(--s4) var(--s5); display: grid; gap: var(--s3); }
.panel-body > .row-help { line-height: 1.5; }
.items { list-style: none; margin: 0; padding: 0; }
.item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2) var(--s4); padding: var(--s4) var(--s5); align-items: start; }
.item + .item { border-top: 1px solid var(--line); }
.item-main { min-width: 0; display: grid; gap: 2px; }
.item-title { font-weight: 600; overflow-wrap: anywhere; }
.item-sub { font-size: var(--t-small); color: var(--ink-2); overflow-wrap: anywhere; }
.item-meta { font-size: var(--t-meta); color: var(--ink-3); font-variant-numeric: tabular-nums; display: flex; flex-wrap: wrap; gap: 2px var(--s3); margin-top: 2px; }
.item-note { font-size: var(--t-small); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; margin-top: var(--s2); padding-left: var(--s3); border-left: 1px solid var(--line); }
.item .actions { flex-wrap: nowrap; }
.item-result { grid-column: 1 / -1; display: grid; gap: var(--s2); padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r-row); background: var(--canvas); }
.item-result .row { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.item-result .error { margin: 0; }
.status-tag { font-size: var(--t-meta); font-weight: 600; color: var(--ink-2); }
/* Plan beside a user's name: Free lifetime license, Trial, Paid. Paused reads in ink with a darker edge (words, not color). */
.plan-tag { display: inline-block; margin-left: var(--s2); vertical-align: 2px; font-size: var(--t-meta); font-weight: 600; color: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 0 var(--s2); line-height: 20px; }
.plan-tag.paused { color: var(--ink); border-color: var(--ink); }
.acct-facts { color: var(--ink-2); }
.stats { display: grid; grid-template-columns: repeat(4, auto); gap: 2px var(--s5); justify-content: start; margin-top: var(--s2); font-size: var(--t-small); }
.stats dt { font-size: var(--t-meta); color: var(--ink-3); }
.stats dd { margin: 0; font-variant-numeric: tabular-nums; }
.stats > div { display: grid; gap: 0; }
.invite-code { font-size: 20px; font-weight: 600; letter-spacing: .06em; user-select: all; font-variant-numeric: tabular-nums; }
.earlier { border-top: 1px solid var(--line); }
.earlier > summary {
  min-height: var(--tap); padding: 0 var(--s5); display: flex; align-items: center; gap: var(--s2);
  font-size: var(--t-small); font-weight: 600; color: var(--ink-2); cursor: pointer; list-style: none;
}
.earlier > summary::-webkit-details-marker { display: none; }
.earlier > summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--fast) var(--ease); margin-right: 2px; }
.earlier[open] > summary::before { transform: rotate(45deg); }
.earlier > summary:focus-visible { outline-offset: -2px; }
.earlier .items { border-top: 1px solid var(--line); }
.loading { padding: var(--s5); color: var(--ink-2); font-size: var(--t-small); }
.signin { width: 100%; max-width: 420px; }
.signin.screen-card .input { text-transform: none; letter-spacing: 0; }
.typed .input { text-transform: none; letter-spacing: 0; }

@media (hover: hover) {
  .earlier > summary:hover { color: var(--ink); }
  .bar-link:hover { background: var(--wash); }
}
@media (max-width: 599.98px) {
  .admin-bar .who { display: none; }
  .admin-bar .btn { margin-left: auto; }
  .admin-main { padding: var(--s2) 0 48px; gap: var(--s3); }
  .admin-main .panel { border-radius: 0; border-left: 0; border-right: 0; }
  .item { grid-template-columns: 1fr; padding: var(--s4); }
  .item .actions { justify-content: flex-start; }
  .panel-head { padding-left: var(--s4); }
  .panel-body { padding: var(--s4); }
  .earlier > summary { padding: 0 var(--s4); }
  .stats { grid-template-columns: repeat(2, auto); }
  .admin-main.center { padding: var(--s4); }
}

/* Setup reports (spec 19): a did-not-work row leads with the warning icon in ink; words say it too. */
.rep-bad .item-title { display: flex; align-items: center; gap: var(--s2); }
.rep-bad .item-title .icon { flex: none; }

/* Visitors (spec 20): a plain table. Numbers right-aligned in tabular figures; rows split by hairlines; the totals
   row set off by a heavier rule. Wider than a phone, it scrolls sideways in its own box. */
.vis-week { font-weight: 600; line-height: 1.5; }
.vis-wrap { overflow-x: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.vis-wrap:focus-visible { outline-offset: -2px; }
.vis-table { width: 100%; border-collapse: collapse; font-size: var(--t-small); font-variant-numeric: tabular-nums; }
.vis-table th, .vis-table td { padding: var(--s2) var(--s3); text-align: right; white-space: nowrap; }
.vis-table th:first-child { text-align: left; padding-left: var(--s5); position: sticky; left: 0; background: var(--card); }
.vis-table tr > :last-child { padding-right: var(--s5); }
.vis-table thead th { font-size: var(--t-meta); font-weight: 600; color: var(--ink-3); vertical-align: bottom; white-space: normal; min-width: 64px; }
.vis-table tbody th { font-weight: 400; color: var(--ink-2); }
.vis-table tbody > tr > * { border-top: 1px solid var(--line); }   /* on the cells, so the pinned Day cell keeps its rule */
.vis-table tfoot > tr > * { border-top: 2px solid var(--ink-3); }
.vis-table tfoot th, .vis-table tfoot td { font-weight: 600; }
@media (max-width: 599.98px) {
  .vis-table th:first-child { padding-left: var(--s4); }
  .vis-table tr > :last-child { padding-right: var(--s4); }
}

/* Update notice form (spec 12) */
.check { display: flex; align-items: center; gap: var(--s2); min-height: 44px; }
.check input { width: 20px; height: 20px; accent-color: var(--accent); }
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }

/* ---------- landing, Chris's voice notes (2026-10-07) ----------
   Header: Pricing and Pair as outlined pills, Start free trial filled. Hero: words + one paragraph + the button on
   the left, the Mom conversation on the right (two columns from 720 px, so an iPad keeps it beside the words).
   Every section is centered: How it works as four picture cards, the trial card, two price cards with the
   founder spots as dots, a private-data picture, Things to know as icon tiles, a last button, a help footer. */
.landing { --page: 1120px; }
.landing .site-bar { height: 64px; }
.landing .bar-links { gap: var(--s2); }
.landing .bar-link { border: 1px solid var(--line); min-height: 40px; padding: 0 var(--s4); }
.landing .bar-cta { min-height: 40px; padding: 0 var(--s4); font-size: var(--t-small); }
.cta-short { display: none; }

.landing .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 40px 64px; padding: 56px 0 8px; }
.hero-points { margin-top: var(--s5); font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 34em; text-wrap: pretty; }
.landing .hero-cta { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }
.hero-cta .btn { min-height: 54px; padding: 0 32px; font-size: 17px; }
.landing .hero-note { margin: 0; display: inline-flex; align-items: center; gap: var(--s2); font-size: 15px; color: var(--ink-2); }
.tick { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ok-wash); color: var(--ok); }
.tick .icon { width: 13px; height: 13px; }

/* Sections: centered, wide enough for cards, 96 px apart. */
.landing .sect { max-width: none; margin: 96px auto 0; justify-items: center; text-align: center; }
.landing .sect > h2 { font-size: 30px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 650; }
.landing .sect.price { border-top: 0; padding-top: 0; }

/* How it works: four cards, each with a small picture of that step. */
.how-grid { list-style: none; margin: var(--s4) 0 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); text-align: left; }
.how-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s4) var(--s4) var(--s6); display: grid; align-content: start; gap: var(--s2); }
.how-card h3 { font-size: 18px; line-height: 1.25; font-weight: 650; }
.how-card p { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.how-num { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-fill); color: var(--on-accent); display: grid; place-items: center; font-size: 14px; font-weight: 700; margin-top: var(--s2); }
.how-card p.how-num { color: var(--on-accent); }
.how-pic { height: 132px; border-radius: var(--r-row); background: var(--wash); display: grid; place-items: center; padding: var(--s3); overflow: hidden; }
.mini-sms, .mini-pair, .mini-chat { width: 100%; max-width: 210px; display: grid; gap: 6px; font-size: 13px; line-height: 1.35; }
.mini-from { font-size: 11px; font-weight: 600; color: var(--ink-3); }
.mini-bubble, .mini-in { justify-self: start; background: var(--card); border-radius: var(--r-bubble); border-bottom-left-radius: var(--r-tail); padding: 8px 12px; }
.mini-out { justify-self: end; background: var(--accent-fill); color: var(--on-accent); border-radius: var(--r-bubble); border-bottom-right-radius: var(--r-tail); padding: 8px 12px; }
.mini-term { width: 100%; max-width: 210px; background: #111; color: #e6e6e6; border-radius: 10px; padding: 10px 12px; display: grid; gap: 4px; font: 12px/1.4 ui-monospace, "SFMono-Regular", Consolas, monospace; }
.mini-dots { display: flex; gap: 5px; margin-bottom: 4px; }
.mini-dots i { width: 7px; height: 7px; border-radius: 50%; background: #555; }
.mini-line b { color: #7fa8ff; font-weight: 400; }
.mini-line.quiet { color: #9a9a9a; }
.mini-line.ok { color: #6fd58a; }
.mini-label { font-size: 11px; font-weight: 600; color: var(--ink-3); }
.mini-field { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; font: 12px/1.3 ui-monospace, "SFMono-Regular", Consolas, monospace; white-space: nowrap; overflow: hidden; }
.mini-btn { justify-self: start; background: var(--accent-fill); color: var(--on-accent); border-radius: var(--r-pill); padding: 5px 16px; font-weight: 600; }

/* The trial card, centered. */
.landing .trial-sect { margin-top: 96px; }
.landing .trial { width: 100%; max-width: 520px; margin: 0 auto; text-align: left; padding: 32px; }
.landing .trial h2 { font-size: 26px; font-weight: 650; }
.landing .trial-form .btn.fill { justify-self: stretch; min-height: 52px; font-size: 16px; }
.select {
  appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; color: var(--ink);
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat;
}

/* Pricing: two cards. The one a new customer gets now is outlined in blue; the other is quiet. */
.landing .tiers { width: 100%; max-width: 820px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); margin-top: var(--s4); text-align: left; }
.landing .tier { padding: 28px; gap: var(--s2); }
.landing .tier + .tier { border: 1px solid var(--line); padding: 28px; }
.landing .tier:not(.past) { border: 2px solid var(--accent); padding: 27px; }
.tier-tag { justify-self: start; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--card)); border-radius: var(--r-pill); padding: 4px 12px; }
.tier.past .tier-tag { color: var(--ink-3); background: var(--wash); }
.landing .tier-big .amt { font-size: 48px; }
.landing .tier-then { font-size: 16px; }
/* Founder spots: stick figures, plain = open (blue), slashed out = taken (grey). */
.spots { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: var(--s3); max-width: 250px; }
.spot { width: 18px; height: 27px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.spot.taken { stroke: var(--ink-3); }
.spot .slash { stroke: var(--ink-2); stroke-width: 2.2; }
.landing .founder-left { font-size: 15px; }
.buy { margin-top: var(--s3); justify-self: stretch; min-height: 50px; }
.price-foot:empty, .price-foot:has(> [hidden]:only-child) { display: none; }
.price-fine { font-size: 15px; color: var(--ink-2); }

/* Keep your data private: words left, the picture right. */
.landing .sect.private { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: center; gap: 48px; max-width: 960px; text-align: left; justify-items: stretch; }
.private-text { display: grid; gap: var(--s4); }
.private-text h2 { font-size: 30px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 650; }
.private-text p { font-size: 17px; color: var(--ink-2); }
.private-pic { margin: 0; }
.ill { width: 100%; height: auto; display: block; }
.ill-bg { fill: var(--wash); }
.ill-card { fill: var(--card); stroke: var(--line); stroke-width: 1.5; }
.ill-mono { fill: var(--ink-3); font: 600 14px ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: .04em; }
.ill-accent { fill: var(--accent-fill); }
.ill-white { fill: #fff; }
.ill-white-line { fill: none; stroke: #fff; stroke-width: 3; }
.ill-ink { fill: var(--ink); }
.ill-head { fill: var(--av3); }
.ill-line { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.ill-q { fill: var(--accent); font: 800 40px var(--font); }
.ill-q.small { font-size: 26px; }

/* Things to know: short lines on tiles with an icon each. */
.know-grid { list-style: none; margin: var(--s4) 0 0; padding: 0; width: 100%; max-width: 900px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); text-align: left; }
.know-tile { display: flex; align-items: center; gap: var(--s3); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s4) var(--s5); font-size: 16px; font-weight: 600; line-height: 1.35; }
.know-ico { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 12%, var(--card)); fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* The last call to action. */
.end-cta p { color: var(--ink-2); font-size: 17px; }
.end-cta .btn { min-height: 54px; padding: 0 32px; font-size: 17px; }

/* Footer: a help box with the page links, then who makes MorseHub. */
.land-foot { margin-top: 96px; display: grid; gap: var(--s4); justify-content: stretch; }
.land-foot::before { display: none; }
.foot-help { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s5) var(--s6); display: grid; gap: var(--s3); justify-items: center; text-align: center; }
.foot-title { font-size: 18px; font-weight: 650; color: var(--ink); }
.foot-list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); }
.foot-btn { min-height: var(--tap); display: inline-flex; align-items: center; padding: 0 var(--s4); border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--ink); font-weight: 600; text-decoration: none; transition: background var(--fast) var(--ease); }
.foot-btn:active { background: color-mix(in srgb, var(--ink) 10%, var(--wash)); }
.foot-by { text-align: center; color: var(--ink-3); }
@media (hover: hover) { .foot-btn:hover { background: var(--wash); } }

@media (max-width: 999.98px) {
  .how-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 879.98px) {
  .landing .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 32px 40px; padding-top: 40px; }
  .landing .hero-text { grid-column: 1; }
  .landing .hero .demo { grid-column: 2; grid-row: 1; }
  .landing .sect.private { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .know-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 719.98px) {
  .landing .hero { grid-template-columns: minmax(0, 1fr); }
  .landing .hero .demo { grid-column: 1; grid-row: auto; }
  .landing .sect { margin-top: 72px; }
  .landing .tiers { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 559.98px) {
  .how-grid, .know-grid { grid-template-columns: minmax(0, 1fr); }
  .landing .sect > h2, .private-text h2 { font-size: 26px; }
  .landing .trial { padding: var(--s5) var(--s4); }
  .hero-cta .btn, .end-cta .btn { width: 100%; }
}
@media (max-width: 439.98px) {
  .cta-long { display: none; }
  .cta-short { display: inline; }
  .landing .bar-link { padding: 0 var(--s3); }
  .landing .bar-cta { padding: 0 var(--s3); }
  .landing .bar-links { gap: 6px; }
}

/* Become a founder (Chris, 2026-10-07): the spots as big stick figures, a three-step picture of the founder
   price, one button. Hidden once every spot is taken. */
.founders-lede { max-width: 36em; font-size: 18px; color: var(--ink-2); }
.founders-spots { display: grid; justify-items: center; gap: var(--s3); margin-top: var(--s2); }
.spots.big { max-width: 410px; justify-content: center; gap: 10px 11px; margin: 0; }
.spots.big .spot { width: 30px; height: 45px; stroke-width: 1.5; }
.founders-count { font-size: 18px; font-weight: 650; }
.spots-key { display: flex; gap: var(--s5); font-size: 14px; }
.key.open { color: var(--accent); font-weight: 600; }
.key.taken { color: var(--ink-3); text-decoration: line-through; }
.founder-steps { list-style: none; margin: var(--s4) 0 0; padding: 0; width: 100%; max-width: 860px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.fstep { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s5) var(--s4); display: grid; gap: var(--s1); justify-items: center; }
.fstep + .fstep::before { content: ""; position: absolute; left: -22px; top: 50%; width: 16px; height: 16px; border-top: 2px solid var(--ink-3); border-right: 2px solid var(--ink-3); transform: translateY(-50%) rotate(45deg); }
.fstep-when { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.fstep-amt { font-size: 32px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.15; }
.fstep-amt .per { font-size: 16px; font-weight: 500; color: var(--ink-2); margin-left: 2px; }
.fstep-what { font-size: 15px; color: var(--ink-2); }
.fstep.lock { border: 2px solid var(--accent); padding: calc(var(--s5) - 1px) calc(var(--s4) - 1px); }
.fstep.lock .fstep-amt { color: var(--accent); }
.founders-cta { display: grid; justify-items: center; gap: var(--s3); margin-top: var(--s4); }
.founders-cta .btn { min-height: 56px; padding: 0 36px; font-size: 17px; }
.founders-fine { font-size: 14px; color: var(--ink-3); max-width: 34em; }
@media (max-width: 719.98px) {
  .founder-steps { grid-template-columns: minmax(0, 1fr); max-width: 360px; gap: 24px; }
  .fstep + .fstep::before { left: 50%; top: -18px; transform: translateX(-50%) rotate(135deg); }
}
@media (max-width: 439.98px) {
  .spots.big { gap: 8px; }
  .spots.big .spot { width: 26px; height: 39px; }
  .founders-cta .btn { width: 100%; }
}

/* Price cards (Chris, 2026-10-07): founders get a blue "locked for life" band, standard a plain "may go up" band. */
.tier-lock, .tier-warn { display: flex; gap: var(--s2); align-items: flex-start; margin-top: var(--s2); padding: var(--s3) var(--s3); border-radius: var(--r-row); font-size: 15px; line-height: 1.45; }
.tier-lock { background: color-mix(in srgb, var(--accent) 12%, var(--card)); color: var(--ink); }
.tier-lock strong { color: var(--accent); }
.tier-warn { background: var(--wash); color: var(--ink-2); }
.tier-warn strong { color: var(--ink); }
.tier-ico { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; }
.tier-ico .icon { width: 18px; height: 18px; }
.tier-lock .tier-ico { color: var(--accent); }
.tier-warn .tier-ico { color: var(--ink-2); }
.founders-lede strong { color: var(--ink); font-weight: 650; }

/* ---------- /setup: the Setup Assistant (WIZARD-BRIEF-2026-10-08.md) ----------
   One step on screen. From 880 px a rail of the six steps sits left of the step panel (the reading page's 260 px
   column); under that the rail is a two-line header with a six-part bar. Phone work sits in a white "On the phone"
   card, computer work plain on the canvas under "On this computer": words plus shape, no new colors. One filled
   button per screen. Problems are ink plus the warning icon, done is ink plus the check. Tokens only. */
.u-note { font-size: 15px; line-height: 1.5; color: var(--ink); max-width: 40em; text-wrap: pretty; }
.u-note strong { font-weight: 600; }
.u-mode { margin-top: var(--s1); }
/* The segments are 38 px tall; the radio's hit area reaches 44 px. */
.u-mode input { inset: -3px 0; }
.u-mode input:disabled { cursor: not-allowed; }
.u-mode input:disabled + span { color: var(--ink-3); }

.assist {
  display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--s6); align-items: start;
  padding: 40px 0 56px; border-top: 1px solid var(--line);
}
.rail { position: sticky; top: var(--s4); min-width: 0; }
.rail-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.rail-row {
  display: flex; align-items: center; gap: var(--s3); width: calc(100% + var(--s4)); min-height: var(--tap);
  margin: 0 calc(var(--s2) * -1); padding: 0 var(--s2); border: 0; border-radius: var(--r-row); background: none;
  font: inherit; font-size: 16px; line-height: 1.3; text-align: left; color: var(--ink-3);
}
.rail-num {
  flex: none; width: 28px; height: 28px; border-radius: var(--r-pill); border: 1px solid var(--ink-3);
  display: grid; place-items: center; font-size: var(--t-small); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink);
}
.rail-num .icon { width: 14px; height: 14px; }
.rail-row.current { color: var(--ink); font-weight: 600; }
.rail-row.current .rail-num { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }
.rail-row.done { color: var(--ink-2); }
.rail-row.done .rail-num { border-color: var(--ink); }
.rail-row.open { color: var(--ink-2); }
button.rail-row { cursor: pointer; transition: background var(--fast) var(--ease); }
button.rail-row:active { background: color-mix(in srgb, var(--ink) 10%, var(--wash)); }
.rail-mini { display: none; }

.assist-panel { min-width: 0; }
.step, .fixview { display: grid; gap: var(--s6); max-width: 62ch; min-width: 0; }
.step > h2 { font-size: 24px; line-height: 1.25; font-weight: 600; letter-spacing: -0.015em; text-wrap: balance; }
.step > h2:focus, #u-title:focus, .checks-title:focus, .done-line:focus, .u-err:focus { outline: none; }
.step > p, .where > p, .dbg > p, .fixview > p { line-height: 1.55; text-wrap: pretty; }
.step strong, .dbg strong { font-weight: 600; }
.step .quiet { font-size: var(--t-small); }
/* Step 1: the picker's own legend repeats the step's line, so only screen readers get it there. */
.step .picker > legend { float: none; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.step .picker { gap: var(--s3); }

.where { display: grid; gap: var(--s4); min-width: 0; }
.where > h3 { display: flex; align-items: center; gap: var(--s2); font-size: 16px; line-height: 1.3; font-weight: 600; }
.where > h3 .icon { width: 20px; height: 20px; }
.where.phone { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s5); }
/* While the page waits on the phone: the checked-chip edge (2 px of ink, no layout shift). */
.where.phone.wait { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.dbg { display: grid; gap: var(--s4); min-width: 0; }

/* The action row: Back (text) left, the step's button right. */
.step-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); padding-top: var(--s2); }
.step-actions .next { margin-left: auto; }
.u-back {
  display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--tap); padding: 0 var(--s3) 0 var(--s2);
  margin-left: calc(var(--s2) * -1); border: 0; border-radius: var(--r-pill); background: none;
  font-size: 15px; font-weight: 600; color: var(--ink); transition: background var(--fast) var(--ease);
}
.u-back .icon { width: 18px; height: 18px; }
.u-back:active { background: color-mix(in srgb, var(--ink) 10%, var(--wash)); }
.page .step-actions .btn, .page .btn.u-act { min-height: 48px; padding: 0 28px; font-size: 15px; }
.u-act { justify-self: start; }

/* The Connect block, the install block, done lines, status lines, problems. */
.conn, .run { display: grid; gap: var(--s3); justify-items: start; min-width: 0; }
.conn > .u-err, .run > .u-err { justify-self: stretch; }
.conn-help { font-size: var(--t-small); color: var(--ink-2); line-height: 1.5; max-width: 52ch; }
.done-line { display: flex; align-items: flex-start; gap: var(--s2); font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
.done-line .icon { width: 18px; height: 18px; margin-top: 2px; }
.u-status { font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); max-width: 52ch; }
.u-status:empty { display: none; }
.u-status.done-line { font-size: 16px; color: var(--ink); }
.u-err.error { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--s2); align-items: start; font-weight: 400; }
.u-err .icon { width: 18px; height: 18px; margin-top: 1px; }
.u-err-body { display: grid; gap: var(--s1); min-width: 0; }
.u-err p.u-err-title { font-size: var(--t-small); font-weight: 600; line-height: 1.45; color: var(--ink); }
.u-err p.u-err-fix { font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); }
.u-err p.u-err-more { font-size: var(--t-small); line-height: 1.5; }
.u-err-more .text-link { display: inline-flex; align-items: center; min-height: var(--tap); }
.u-err code.inline { font-size: 14px; }
/* The one progress bar (step 4 and #update): 4 px, the line as track, the blue as value. The value is --accent, not
   --accent-fill: the fill blue on the dark track is under 3:1. */
.u-progress {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; max-width: 420px; height: 4px;
  border: 0; border-radius: var(--r-pill); background: var(--line); color: var(--accent); overflow: hidden;
}
.u-progress::-webkit-progress-bar { background: var(--line); border-radius: var(--r-pill); }
.u-progress::-webkit-progress-value { background: var(--accent); border-radius: var(--r-pill); transition: width 300ms var(--ease); }
.u-progress::-moz-progress-bar { background: var(--accent); border-radius: var(--r-pill); }

/* What the phone allowed: one row per permission, a failed row carries its fix. Scoped to /setup: the app's Phone
   section in Settings has its own .checks rows (same names and icons: an allowed row's check is quiet). */
.checks-wrap { display: grid; gap: var(--s3); min-width: 0; }
.checks-title { font-size: 16px; line-height: 1.3; font-weight: 600; }
.checks-wrap .checks { list-style: none; margin: 0; padding: 0; display: block; border-top: 1px solid var(--line); }
.checks-wrap .checks > li {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; column-gap: var(--s3); row-gap: var(--s1);
  align-items: center; min-height: var(--tap); padding: var(--s2) 0; border-radius: 0; border-bottom: 1px solid var(--line);
}
.checks-wrap .checks .icon { width: 18px; height: 18px; color: var(--ink); }
.checks-wrap .checks > li.ok .icon { color: var(--ink-3); }
.checks-wrap .check-name { font-size: 16px; font-weight: 500; min-width: 0; }
.checks-wrap .check-state { font-size: var(--t-small); color: var(--ink-2); white-space: nowrap; }
.checks-wrap .checks > li.no .check-state { color: var(--ink); font-weight: 600; }
.checks-wrap .check-fix { grid-column: 2 / -1; font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); }
.checks-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); padding-top: var(--s1); }

/* Mockups: what the phone's screen shows, drawn as HTML on a card. No phone outline, nothing moves. */
.shot {
  width: 100%; max-width: 320px; display: grid; gap: var(--s2); padding: var(--s3);
  background: var(--wash); border: 1px solid var(--line); border-radius: var(--r-row);
  font-size: var(--t-small); line-height: 1.4; color: var(--ink);
}
.shot p { margin: 0; }
.shot-title { font-size: 16px; font-weight: 600; }
.shot-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: var(--tap); }
.shot-quiet { font-size: var(--t-meta); color: var(--ink-3); }
.shot-text { display: grid; gap: 2px; }
.shot-sub { font-size: var(--t-meta); color: var(--ink-3); }
.shot .switch { display: inline-block; margin: 0; cursor: default; }
.shot .switch.on { background: var(--accent-fill); border-color: var(--accent-fill); }
.shot .switch.on::before { transform: translateX(20px); border-color: var(--accent-fill); }
.shot-mono { font: var(--t-meta)/1.5 ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace; color: var(--ink-3); overflow-wrap: anywhere; }
.shot-check { display: flex; align-items: center; gap: var(--s2); }
.shot-box { flex: none; width: 18px; height: 18px; border-radius: var(--r-tail); background: var(--accent-fill); color: var(--on-accent); display: grid; place-items: center; }
.shot-box .icon { width: 12px; height: 12px; }
.shot-btns { display: flex; justify-content: flex-end; gap: var(--s5); font-weight: 600; color: var(--ink-2); }
.shot-btns .shot-allow { color: var(--accent); }
.shot-label { font-size: var(--t-meta); font-weight: 600; color: var(--ink-3); }
.shot-code { font: 14px/1.5 ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace; letter-spacing: .04em; color: var(--ink); overflow-wrap: anywhere; }
.shot-meta { font-size: var(--t-meta); color: var(--ink-3); }

/* #repair: one column under the heading, same parts as the steps. */
.fixview { padding: 40px 0 56px; border-top: 1px solid var(--line); }
.fixview > .more > div, .up-cable > .more > div { display: grid; gap: var(--s4); }
.fixview > .more > div > .dbg, .up-cable > .more > div > .dbg { padding-top: var(--s1); }

/* ---------- /setup: the three tabs (SETUP-PAGES-BRIEF-2026-10-12.md) ----------
   Web, ADB and Updates under one head; nothing sits under a tab but the footer. The ADB and Updates tabs are reading
   rows (.sect); the end of their last row (.sect-end) holds the collapsed rows that finish it: the second phone and
   the setup report, aligned with the body column. */
/* The switch under the lede stays put when the tab changes: the three tabs' ledes sit invisibly in the same cell
   (.lede-room, filled by setup.js), so the cell is always as tall as the longest. At desktop the Web and ADB ledes
   are two lines. */
.page-setup .doc-head { max-width: 780px; }
.page-setup .doc-head .lede { max-width: none; }
.lede-box { display: grid; min-width: 0; }
.lede-box > .lede, .lede-room, .lede-room > .lede { grid-area: 1 / 1; }
.lede-room { display: grid; visibility: hidden; pointer-events: none; }
.sect-end { border-top: 0; padding-top: 0; }
.sect-end > .sect-body { grid-column: 2; }
.page-setup .sect:has(+ .sect-end) { padding-bottom: var(--s6); }
.more-body { display: grid; gap: var(--s4); }
.more-body > .dbg { padding-top: var(--s1); }
.up-cable { display: grid; gap: var(--s4); min-width: 0; }
.up-cable > p { line-height: 1.55; }
.u-another, .back-link { display: inline-flex; align-items: center; min-height: var(--tap); }
/* Copy in a code block and Check again: 32 px to look at, 44 px to hit. app.css's .btn.small::after (-6 px from the
   padding box) reaches 42 px on a bordered button; -7 px makes it 44 (measured 2026-10-12). */
.page-setup .btn.small::after { content: ""; position: absolute; inset: -7px -2px; }

/* The Windows driver block: a lead line, then a hairline row like "USB debugging must be on" holding the steps (the
   reading pages' numbered list, menu words in bold). Its slot takes no room on a Mac, where it is hidden. */
.driver { display: grid; gap: var(--s4); min-width: 0; }
.driver > p { line-height: 1.55; text-wrap: pretty; }
[data-slot="driver"]:empty, [data-slot="driver"]:has(> .driver[hidden]) { display: none; }
/* 12 px under the summary keeps the link's hit area (below) off it. */
.driver .more-body { padding-top: var(--s3); }
/* The link in step 1: 44 px to hit, centered on its line, without moving the lines around it. */
.driver-steps .text-link { position: relative; white-space: nowrap; }
.driver-steps .text-link::after { content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: var(--tap); margin-top: calc(var(--tap) / -2); }

/* The setup report: a hairline row like "USB debugging must be on"; inside, plain on the canvas, no card. The
   step's filled button stays the one filled button: Send report is outlined. */
.report-body { display: grid; gap: var(--s4); padding-top: var(--s1); }
.report-form { display: grid; gap: var(--s4); max-width: 560px; min-width: 0; }
.report-form > .quiet { line-height: 1.5; }
.report-form .chips { gap: var(--s2); }
.report-form .btn.line { justify-self: start; min-width: 168px; }
.report-form > .u-err { justify-self: stretch; }
.report .done-line:focus { outline: none; }
.step > .more.report, .sect-body > .more.report, .fixview > .more.report { margin-top: calc(var(--s2) * -1); }

/* The landing's How it works, card 2: the Connect block in small (it was a terminal). */
.mini-conn { width: 100%; max-width: 210px; display: grid; gap: 10px; justify-items: start; font-size: 13px; line-height: 1.35; }
.mini-done { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); }
.mini-done .icon { width: 14px; height: 14px; }

@media (hover: hover) {
  button.rail-row:hover, .u-back:hover { background: var(--wash); }
}
@media (prefers-reduced-motion: no-preference) {
  .step.enter, .fixview.enter, .updates.enter { animation: u-rise 200ms ease-out both; }
  @keyframes u-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .u-progress::-webkit-progress-value { transition: none; }
}
@media (max-width: 879.98px) {
  .assist { grid-template-columns: minmax(0, 1fr); gap: var(--s5); padding-top: 24px; }
  .rail { position: static; }
  .rail-list { display: none; }
  .rail-mini { display: grid; gap: 2px; }
  .rail-count { font-size: var(--t-small); font-weight: 600; color: var(--ink); }
  .rail-mname { font-size: 16px; font-weight: 600; line-height: 1.3; }
  .rail-bar { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin-top: var(--s2); }
  .rail-bar i { height: 4px; border-radius: var(--r-pill); background: var(--line); }
  .rail-bar i.on { background: var(--accent); }
  .fixview { padding-top: 24px; }
  .lede-room { display: none; }
  .sect-end > .sect-body { grid-column: auto; }
}
@media (max-width: 479.98px) {
  .report-form .btn.line { justify-self: stretch; width: 100%; }
  .step-actions .next, .page .btn.u-act { width: 100%; }
  .step-actions .next { margin-left: 0; }
  .where.phone { padding: var(--s4); }
  .step > h2 { font-size: 22px; }
}