/* The QDX portal (/app), dressed like qdx.systems: the site's dark field, one blue accent, Archivo.
   Colours and type follow deploy/site/site.css; the fonts are the site's, served from the same origin. */
@font-face { font-family: "Archivo"; src: url("/fonts/Archivo-Variable.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Martian Mono"; src: url("/fonts/MartianMono-Variable.woff2") format("woff2"); font-weight: 100 800; font-stretch: 75% 112.5%; font-display: swap; }

:root {
  /* The site's palette (site.css). */
  --bg: #07090c; --bg-2: #0b0e13; --panel: #0e1218; --panel-2: #131822;
  --line: rgba(214,228,253,.09); --line-2: rgba(214,228,253,.15);
  --ink: #eef1f6; --read: #c8cfda; --muted: #9ba4b4; --quiet: #7d8697;
  --accent: #5b8cff; --accent-2: #8fb0ff; --accent-ink: #060a14; --glow: rgba(91,140,255,.45);
  --tint: rgba(91,140,255,.1); --tint-line: rgba(91,140,255,.22);
  --field: rgba(255,255,255,.035); --field-hover: rgba(255,255,255,.055);
  --good: #5cc983; --warn: #e3a43b; --bad: #ff7a70; --test: #ff9a90; --test-bg: #2a1210; --focus: rgba(91,140,255,.35);
  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Martian Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --r-card: 16px; --r-control: 10px; --radius: var(--r-control);
  --shadow: 0 1px 0 rgba(255,255,255,.03) inset;
  --ease: cubic-bezier(.16, 1, .3, 1); --dur: 180ms;
  /* Panel rhythm: heading to content, line to line, around buttons. */
  --gap-head: 14px; --gap-flow: 12px; --gap-actions: 20px; --gap-after-actions: 14px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; scrollbar-color: #2a303a var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
::selection { background: var(--accent); color: var(--accent-ink); }
a { color: var(--accent-2); text-decoration-color: rgba(143,176,255,.35); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent-2); }

/* Signed-in chrome. */
.brand { font-weight: 800; letter-spacing: -.01em; font-stretch: 105%; font-size: 1.22rem; line-height: 1; color: var(--ink); text-decoration: none; }
header.top { display: flex; align-items: center; gap: 16px; padding: 12px 20px; background: rgba(7,9,12,.85); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
header.top nav { display: flex; gap: 18px; flex-wrap: wrap; }
header.top nav a { text-decoration: none; color: var(--muted); font-size: .94rem; transition: color var(--dur) var(--ease); }
header.top nav a:hover { color: var(--ink); }
header.top nav a.on { color: var(--ink); font-weight: 600; }
header.top .spacer { flex: 1; }
header.top button { padding: 7px 12px; font-size: .88rem; }
.test-banner { background: var(--test-bg); color: var(--test); font: 500 .74rem/1.4 var(--mono); text-align: center; padding: 7px 12px; border-bottom: 1px solid rgba(255,122,112,.28); letter-spacing: .05em; }
main { max-width: 980px; margin: 32px auto; padding: 0 16px; }
.panel { background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 120px), var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 24px; margin-bottom: 16px; }
.panel > :last-child { margin-bottom: 0; }
h1, h2, h3 { font-weight: 600; letter-spacing: -.015em; line-height: 1.2; color: var(--ink); }
h1 { font-size: 1.6rem; margin: 0 0 8px; } h2 { font-size: 1.15rem; margin: 0 0 14px; } h3 { font-size: 1rem; margin: 20px 0 8px; }
p.lede { color: var(--muted); margin: 0 0 18px; }

/* Forms. */
label { display: block; font-weight: 500; font-size: .88rem; color: var(--read); margin: 14px 0 6px; }
input:not([type=checkbox]):not([type=radio]), select, textarea { width: 100%; font: inherit; font-size: .97rem; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--r-control); background: var(--field); color: var(--ink); transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
/* background-color only: the shorthand would drop a select's chevron (a background image). */
input:not([type=checkbox]):not([type=radio]):hover, select:hover, textarea:hover { background-color: var(--field-hover); }
input::placeholder, textarea::placeholder { color: var(--quiet); }
select { appearance: none; -webkit-appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239ba4b4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; }
select option { background: var(--panel-2); color: var(--ink); }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
button:focus-visible, .button:focus-visible, a:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 12px; }
button, .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 500; line-height: 1.2; padding: 10px 16px; border-radius: var(--r-control); border: 1px solid transparent; background: var(--accent); color: var(--accent-ink); cursor: pointer; text-decoration: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 8px 24px -10px var(--glow); transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
button:hover, .button:hover { background: var(--accent-2); }
button.secondary, .button.secondary { background: rgba(255,255,255,.04); color: var(--ink); border-color: var(--line-2); box-shadow: none; }
button.secondary:hover, .button.secondary:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); }
button.danger { background: transparent; color: var(--bad); border-color: rgba(255,122,112,.45); box-shadow: none; }
button.danger:hover { background: rgba(255,122,112,.08); }
button:disabled, button:disabled:hover { opacity: .45; cursor: default; background: var(--accent); }
button.secondary:disabled, button.danger:disabled { background: transparent; }
.actions { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; align-items: center; }
.muted { color: var(--muted); } .small { font-size: .86rem; }
.error { color: var(--bad); font-weight: 500; margin-top: 10px; } .error:empty { margin: 0; }
.ok { color: var(--good); font-weight: 500; } p.ok:empty { margin: 0; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .76rem; font-weight: 500; line-height: 1.4; border: 1px solid currentColor; color: var(--muted); }
.badge.good { color: var(--good); } .badge.warn { color: var(--warn); } .badge.bad { color: var(--bad); } .badge.test { color: var(--test); }
table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .78rem; color: var(--muted); font-weight: 500; letter-spacing: .02em; }
tbody tr:last-child td { border-bottom: 0; }
.table-wrap { overflow-x: auto; }
.checklist { list-style: none; padding: 0; margin: 0; } .checklist li { padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; gap: 10px; align-items: baseline; }
.checklist li:last-child { border-bottom: 0; }
.picked { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chip { border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 10px; background: var(--field); color: var(--ink); display: inline-flex; gap: 8px; align-items: center; font-size: .9rem; font-weight: 400; box-shadow: none; }
button.chip:hover { background: var(--tint); border-color: var(--tint-line); }
.chip button { padding: 0 6px; border: 0; background: transparent; color: var(--muted); box-shadow: none; }
.chip button:hover { background: transparent; color: var(--ink); }
.results { border: 1px solid var(--line-2); border-radius: var(--r-control); background: var(--panel-2); margin-top: 6px; max-height: 240px; overflow-y: auto; }
.results button { display: block; width: 100%; text-align: left; background: transparent; color: var(--ink); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; font-weight: 400; box-shadow: none; }
.results button:hover { background: var(--tint); }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; } .tabs a { padding: 7px 12px; border-radius: var(--r-control); text-decoration: none; color: var(--muted); border: 1px solid transparent; }
.tabs a:hover { color: var(--ink); }
.tabs a.on { border-color: var(--line-2); background: var(--panel); color: var(--ink); font-weight: 500; }
.secret { font-family: var(--mono); font-size: .82rem; word-break: break-all; background: var(--bg); border: 1px dashed var(--line-2); padding: 12px; border-radius: var(--r-control); }
.patient-banner { display: flex; gap: 16px; flex-wrap: wrap; padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--line); font-size: .95rem; }
.patient-banner strong { font-size: 1rem; }
.mode-toggle { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r-control); overflow: hidden; }
.mode-toggle button { border: 0; border-radius: 0; background: transparent; color: var(--muted); padding: 6px 12px; box-shadow: none; font-size: .88rem; }
.mode-toggle button:hover { background: rgba(255,255,255,.05); color: var(--ink); }
.mode-toggle button.on, .mode-toggle button.on:hover { background: var(--ink); color: var(--bg); }
.mode-toggle button:disabled, .mode-toggle button:disabled:hover { background: transparent; }
/* The card: Stripe's fields in our field's clothes. Number on its own line on a phone; expiry, CVC and ZIP share one. */
.card-fields { display: grid; grid-template-columns: 2.2fr 1fr .8fr 1fr; gap: 0 12px; }
.card-fields label { cursor: text; }
.stripe-field { padding: 11px 12px; border: 1px solid var(--line-2); border-radius: var(--r-control); background: var(--field); transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.stripe-field:hover { background: var(--field-hover); }
.stripe-field.StripeElement--focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.stripe-field.StripeElement--invalid { border-color: var(--bad); }
/* Browser autofill keeps our field colors, not Chrome's or Safari's tint. */
input:-webkit-autofill, input:-webkit-autofill:hover, select:-webkit-autofill { -webkit-text-fill-color: var(--ink); caret-color: var(--ink); box-shadow: 0 0 0 1000px var(--panel-2) inset; transition: background-color 9999s 0s; }
input:-webkit-autofill:focus { box-shadow: 0 0 0 1000px var(--panel-2) inset, 0 0 0 3px var(--focus); }
@media (max-width: 560px) { .card-fields { grid-template-columns: 1fr .8fr 1.35fr; } .card-fields .card-number { grid-column: 1 / -1; } main { margin: 18px auto; } .panel { padding: 18px; } input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px; } }

/* Signed-out pages (sign in, sign up, links from email): the site's own header and footer (stamped into index.html),
   the cube mark and a narrow column between them. Signed in, the site header and footer give way to the app's. */
body:not(.signed-out) > .skip, body:not(.signed-out) > header.site, body:not(.signed-out) > footer.site { display: none; }
body.signed-out { background: var(--bg); }
body.signed-out #app { min-height: calc(100vh - 64px); }
/* The header never offers the page you're on. */
body[data-auth="signin"] header.site a[href="/app/"], body[data-auth="signup"] header.site a[href="/app/#/signup"] { display: none; }
.auth-mark { display: block; width: 40px; height: 45px; margin: 0 auto 20px; filter: drop-shadow(0 6px 24px rgba(91,140,255,.35)); }
.auth-mark svg { width: 100%; height: 100%; display: block; }
main.auth { max-width: 432px; margin: 0 auto; padding: clamp(56px, 10vh, 112px) 16px clamp(72px, 12vh, 128px); }
main.auth.wide { max-width: 520px; }
main.auth h1 { font-size: 1.75rem; letter-spacing: -.02em; text-align: center; margin: 0 0 10px; }
main.auth p.lede { text-align: center; margin: 0 0 28px; }
main.auth form > :first-child label, main.auth form > label:first-child { margin-top: 0; }
main.auth .actions { margin-top: 22px; }
main.auth button[type=submit] { width: 100%; padding: 12px 16px; }
main.auth .or { display: flex; align-items: center; gap: 12px; margin: 24px 0 12px; color: var(--quiet); font-size: .85rem; }
main.auth .or::before, main.auth .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
main.auth button.wide { width: 100%; padding: 12px 16px; }
main.auth .sent-to strong { display: block; margin: 4px 0; color: var(--ink); font-weight: 500; overflow-wrap: break-word; }
main.auth button.wide:disabled { color: var(--muted); border-color: var(--line-2); opacity: 1; }
main.auth .switch { display: block; text-align: center; margin: 16px auto 0; padding: 0; background: none; border: 0; box-shadow: none; color: var(--muted); font-size: .9rem; font-weight: 400; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
main.auth .switch:hover { background: none; color: var(--ink); text-decoration-color: var(--accent-2); }
main.auth .notice { margin: 18px 0 0; padding: 12px 14px; border: 1px solid var(--tint-line); background: var(--tint); border-radius: var(--r-control); color: var(--read); font-weight: 400; }
main.auth .notice:empty { display: none; }
main.auth .error { text-align: center; }
main.auth .field-note { margin: 8px 0 0; color: var(--bad); font-size: .9rem; line-height: 1.45; } main.auth .field-note:empty { display: none; }
main.auth .field-note button.inline { display: inline; padding: 0; border: 0; background: none; box-shadow: none; font: inherit; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; cursor: pointer; }
main.auth .field-note button.inline:hover { text-decoration-color: var(--accent-2); }
main.auth input[aria-invalid="true"] { border-color: var(--bad); }
main.auth .actions.stack { display: grid; gap: 10px; }
main.auth a.button.wide { width: 100%; padding: 12px 16px; }
main.auth .alt { text-align: center; color: var(--muted); font-size: .92rem; margin: 28px 0 0; padding-top: 22px; border-top: 1px solid var(--line); }
main.auth .alt a { color: var(--ink); }
main.auth h3 { font-size: .78rem; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--quiet); margin: 28px 0 0; }
main.auth .row.pair { grid-template-columns: 1fr 1fr; }
main.auth .row.zip { grid-template-columns: minmax(0, 1fr) 7.5em 7.5em; }
@media (max-width: 420px) { main.auth .row.zip { grid-template-columns: 1fr 1fr; } main.auth .row.zip > :first-child { grid-column: 1 / -1; } main.auth .row.pair { grid-template-columns: 1fr; } }
.auth-foot { text-align: center; padding: 40px 16px 48px; font-size: .84rem; color: var(--quiet); }
.auth-foot a { color: var(--quiet); text-decoration: none; transition: color var(--dur) var(--ease); }
.auth-foot a:hover { color: var(--ink); }
.auth-foot span { margin: 0 8px; opacity: .6; }
@media (max-width: 560px) { main.auth { padding-top: 40px; padding-bottom: 64px; } }

/* Pages opened from an emailed link (pay.html, sign.html): the wordmark above, a quiet footer below,
   and a test banner, when there is one, across the very top. */
body.standalone { display: flex; flex-direction: column; min-height: 100vh; }
body.standalone #app { display: contents; }
body.standalone .test-banner { order: -1; }
body.standalone .auth-top { display: flex; justify-content: center; padding: 40px 16px 0; }
body.standalone .auth-mark { margin-bottom: 0; width: 40px; height: 45px; }
body.standalone main { width: 100%; max-width: 640px; margin: 0 auto; padding: 32px 16px 0; }
body.standalone main.sign { max-width: 680px; }
body.standalone .auth-foot { margin-top: auto; }

/* In-app document viewer (embedded app). */
.pdf-viewer{position:fixed;inset:0;background:rgba(3,5,8,.72);display:flex;flex-direction:column;padding:16px;z-index:50}
.pdf-viewer .pdf-bar{display:flex;gap:12px;align-items:center;background:var(--panel-2);border:1px solid var(--line-2);border-bottom:0;padding:8px 12px;border-radius:10px 10px 0 0}
.pdf-viewer .pdf-bar strong{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdf-viewer iframe{flex:1;border:0;background:#fff;border-radius:0 0 10px 10px;width:100%}

/* The signing page (sign.html). */
main.sign { max-width: 680px; }
.choice { border: 1px solid var(--line-2); border-radius: var(--r-control); padding: 12px 14px; margin: 14px 0 0; }
/* The question reads as the box's heading, inside it, not cut into its border. */
.choice legend { float: left; width: 100%; padding: 0; margin: 0 0 4px; font-weight: 500; }
.choice legend + * { clear: both; }
label.option { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: var(--ink); font-size: .95rem; margin: 8px 0; cursor: pointer; }
/* The 13px box centres on the first line of its text (.95rem × 1.55 ≈ 23.6px), however that text wraps. */
label.option { line-height: 1.55; }
label.option input { margin: 5px 0 0; flex: none; }
label.attest { margin: 16px 0; }
/* One rhythm: a field (label over its control) sits a section gap below what comes before it, its label 6px above
   the control, the way the app's own forms read; the chosen tests are an option list on the text edge. */
main.sign .panel > .field { margin-top: var(--gap-actions); }
main.sign .panel > h2 + .field { margin-top: var(--gap-head); }
main.sign .field > label { margin: 0 0 6px; }
main.sign .field > .actions { margin-top: 14px; }
main.sign .panel > label.attest { margin: var(--gap-actions) 0 0; }
main.sign .panel > label.attest + button.wide { margin-top: var(--gap-actions); }
main.sign .picked label.option:first-child { margin-top: 0; }
main.sign .panel > h2 + .picked { margin-top: var(--gap-head); }
main.sign .picked:empty { display: none; }
.inline { display: flex; gap: 8px; } .inline input { flex: 1; min-width: 0; }
/* The pad stays light: ink on paper, the way a signature is drawn and kept. */
.sign-pad { display: block; width: 100%; height: 170px; border: 1px solid var(--line-2); border-radius: var(--r-control); background: #e3e7ee; box-shadow: 0 0 0 4px rgba(0,0,0,.35); touch-action: none; cursor: crosshair; }
button.wide { width: 100%; padding: 13px 16px; font-size: 1.02rem; margin-top: 8px; }
/* Agreements: the signing checkbox, and the agreement pages themselves (/app/legal/...). */
label.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: var(--ink); font-size: .95rem; margin: 14px 0; line-height: 1.45; }
label.check input { margin: 3px 0 0; flex: none; }
main.legal { max-width: 760px; line-height: 1.65; color: var(--read); }
main.legal h1 { margin: 0 0 6px; }
main.legal h2 { margin-top: 1.6em; font-size: 1.15em; }
main.legal h3, main.legal h4 { margin-top: 1.6em; }
main.legal li { margin: 4px 0; }
main.legal img.signature { display: block; height: 72px; width: auto; margin: 6px 0; padding: 6px 10px; background: #fff; border-radius: 6px; }
@media (max-width: 560px) { body.standalone .actions > button { flex: 1 1 100%; } }

/* Signed-in header on a phone: wordmark, mode toggle and one menu; the rest folds into it. */
header.top .brand { font-size: 1.22rem; }
.narrow-only { display: none; }
details.menu { position: relative; }
details.menu > summary { list-style: none; display: grid; place-items: center; width: 38px; height: 34px; border: 1px solid var(--line-2); border-radius: var(--r-control); cursor: pointer; }
details.menu > summary::-webkit-details-marker { display: none; }
details.menu > summary span, details.menu > summary span::before, details.menu > summary span::after { display: block; width: 16px; height: 1.5px; background: var(--ink); content: ""; position: relative; }
details.menu > summary span::before { position: absolute; top: -5px; } details.menu > summary span::after { position: absolute; top: 5px; }
details.menu[open] > summary { background: rgba(255,255,255,.06); }
details.menu .menu-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: min(280px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 2px; padding: 8px; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 24px 48px -16px #000; }
details.menu .menu-panel > a { padding: 10px 12px; border-radius: 8px; color: var(--read); text-decoration: none; }
details.menu .menu-panel > a:hover { background: rgba(255,255,255,.05); color: var(--ink); }
details.menu .menu-panel > a.on { color: var(--ink); font-weight: 600; background: rgba(255,255,255,.04); }
details.menu .who { display: flex; flex-direction: column; gap: 2px; padding: 12px 12px 10px; margin-top: 6px; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
details.menu .menu-panel > button { margin: 2px 4px 4px; }
@media (max-width: 720px) {
  .wide-only { display: none !important; }
  .narrow-only { display: block; }
  header.top { flex-wrap: nowrap; gap: 12px; padding: 10px 16px; }
  /* Settings tabs: one row that scrolls sideways. */
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a { white-space: nowrap; flex: none; }
}

/* Results on an order, and the activity log. */
.result-list { list-style: none; margin: 0; padding: 0; }
.result-list li { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--line); }
.result-list li:last-child { border-bottom: 0; }
.result-list .when { font-weight: 500; }
.result-list .button { margin-left: auto; }
td.nowrap, span.nowrap { white-space: nowrap; }
.badge { white-space: nowrap; }
.checklist li > .badge { flex: none; }
.checklist li { flex-wrap: wrap; row-gap: 2px; }
.checklist li > * { min-width: 0; }
.checklist li > a { overflow-wrap: anywhere; }
@media (max-width: 600px) { .checklist li > span.small.muted { flex-basis: 100%; padding-left: 0; } }
.hint { margin: 6px 0 0; font-size: .82rem; color: var(--muted); }
label .optional { margin-left: 4px; font-size: .78rem; font-weight: 400; color: var(--quiet); }
.row.zip { grid-template-columns: minmax(0, 1fr) 7.5em 7.5em; }
@media (max-width: 420px) { .row.zip { grid-template-columns: 1fr 1fr; } .row.zip > :first-child { grid-column: 1 / -1; } }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.table-wrap td:first-child { white-space: nowrap; }
.result-block { margin-top: 28px; }
@media (max-width: 560px) {
  table.log tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); }
  table.log tr:last-child { border-bottom: 0; }
  table.log td { display: block; padding: 0; border: 0; white-space: normal; }
  table.log td:first-child { font-size: .8rem; margin-bottom: 2px; }
  .result-list .button { margin-left: 0; }
}

/* Wide tables on a phone: one compact block per row. The first cell (and a lone status badge) lead;
   every other cell is a small line labelled with its column (data-label, set in app.js). */
@media (max-width: 600px) {
  .table-wrap:has(> table.stack) { overflow-x: visible; }
  table.stack, table.stack tbody { display: block; }
  table.stack thead { display: none; }
  table.stack tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
  table.stack tbody tr:last-child { border-bottom: 0; }
  table.stack td { grid-column: 1 / -1; display: block; padding: 2px 0; border: 0; font-size: .86rem; white-space: normal; overflow-wrap: anywhere; color: var(--read); }
  table.stack td:first-child { grid-column: 1; grid-row: 1; font-size: .97rem; font-weight: 500; color: var(--ink); padding-bottom: 4px; white-space: normal; }
  table.stack td:not(:first-child):has(> .badge:only-child) { grid-column: 2; grid-row: 1; padding-bottom: 4px; }
  table.stack td:not(:first-child):has(> .badge:only-child)::before { content: none !important; }
  table.stack td:empty { display: none; }
  table.stack td:not(:first-child)[data-label]:not([data-label=""])::before { content: attr(data-label); display: inline-block; min-width: 6.5em; margin-right: 8px; color: var(--quiet); font-size: .8rem; }
  table.stack td[data-label=""] { padding-top: 8px; }
}
/* The site's stylesheet loads here for its header and footer; the app's own text keeps the app's sizes. */
#app .lede { font-size: 1rem; max-width: none; margin-top: 0; }
#app main.auth p.lede { font-size: 1.02rem; text-wrap: balance; }

/* ---------------------------------------------------------------------------------------------
   Signed-in shell (after Resend's dashboard): a fixed sidebar with the practice and its mode at the top, the
   work first, the set-up below, and the account at the bottom. On a phone it folds into one menu. */
body.signed-in #app { display: grid; grid-template-columns: 248px minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 100vh; }
body.signed-in #app > aside.side { grid-column: 1; grid-row: 1 / span 3; }
body.signed-in #app > header.top { display: none; }
body.signed-in #app > .test-banner, body.signed-in #app > main { grid-column: 2; }
aside.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 14px; padding: 20px 14px 14px; border-right: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.015), transparent 240px), var(--bg-2); overflow-y: auto; }
aside.side > .brand { padding: 2px 10px 6px; }
.practice { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.02); min-width: 0; }
.practice .avatar { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; font-weight: 700; font-size: .82rem; color: var(--ink); background: linear-gradient(160deg, #34466e, #1a2440); box-shadow: 0 0 0 1px rgba(143,176,255,.3) inset; }
.practice .name { flex: 1; min-width: 0; font-weight: 600; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mode-pill { flex: none; font-size: .7rem; font-weight: 600; letter-spacing: .02em; padding: 2px 7px; border-radius: 999px; border: 1px solid currentColor; }
.mode-pill.test { color: var(--warn); border-color: rgba(227,164,59,.45); } .mode-pill.live { color: var(--good); border-color: rgba(92,201,131,.4); }
aside.side .mode-toggle { display: grid; grid-template-columns: 1fr 1fr; }
aside.side .mode-toggle button { padding: 6px 0; }
.button.new-order { width: 100%; }
.ico { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; }
.ico svg { width: 100%; height: 100%; display: block; }
aside.side nav, .menu-panel nav { display: flex; flex-direction: column; gap: 14px; }
aside.side nav .nav-group, .menu-panel nav .nav-group { display: flex; flex-direction: column; gap: 2px; }
aside.side nav .nav-group + .nav-group, .menu-panel nav .nav-group + .nav-group { padding-top: 14px; border-top: 1px solid var(--line); }
aside.side nav a, .menu-panel nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; color: var(--muted); text-decoration: none; font-size: .93rem; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
aside.side nav a:hover, .menu-panel nav a:hover { color: var(--ink); background: rgba(255,255,255,.04); }
aside.side nav a.on, .menu-panel nav a.on { color: var(--ink); background: rgba(255,255,255,.07); font-weight: 500; }
aside.side nav a.on .ico, .menu-panel nav a.on .ico { color: var(--accent-2); }
nav a .count { margin-left: auto; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--tint); border: 1px solid var(--tint-line); color: var(--accent-2); font-size: .72rem; font-weight: 600; text-align: center; }
.account { margin-top: auto; display: flex; align-items: center; gap: 4px; padding: 12px 6px 0 10px; border-top: 1px solid var(--line); min-width: 0; }
.account .acct-email { flex: 1; min-width: 0; font-size: .84rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-link, button.icon-link { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); box-shadow: none; }
.icon-link:hover, button.icon-link:hover { background: rgba(255,255,255,.06); color: var(--ink); }
.icon-link .ico { width: 17px; height: 17px; }

/* Test mode: one quiet line above the page, in the site's "In testing" amber, never a shout. */
.test-banner { background: rgba(227,164,59,.07); color: #f0c47a; font: 400 .84rem/1.4 var(--sans); letter-spacing: 0; text-align: left; padding: 9px 32px; border-bottom: 1px solid rgba(227,164,59,.2); }
.test-banner strong { font-weight: 600; color: var(--warn); }

body.signed-in main { max-width: 1040px; width: 100%; margin: 0; padding: 36px 40px 64px; }
body.signed-in main.wide { max-width: 1180px; }

/* Page head: title and a sentence on the left, the page's actions on the right. */
.app-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 24px; }
.app-head h1 { font-size: 1.75rem; letter-spacing: -.02em; margin: 0; }
.app-head .lede, #app .app-head .lede { margin: 6px 0 0; max-width: 62ch; }
.page-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.button .ico, button .ico { width: 16px; height: 16px; }
a.back { display: inline-block; margin-bottom: 14px; color: var(--muted); text-decoration: none; font-size: .9rem; }
a.back:hover { color: var(--ink); }

/* Lists: search and filters over one bordered table; rows open their object. */
.filters { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.filters > select { width: auto; min-width: 170px; }
label.search { position: relative; flex: 1 1 280px; margin: 0; }
label.search .ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--quiet); pointer-events: none; }
label.search input:not([type=checkbox]) { padding-left: 38px; }
.table-wrap.list { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--panel); overflow: hidden; }
.table-wrap.list table th { background: rgba(255,255,255,.025); padding: 11px 16px; border-bottom: 1px solid var(--line); }
.table-wrap.list table td { padding: 12px 16px; vertical-align: middle; }
.table-wrap.list td.end { text-align: right; }
tr.link-row { cursor: pointer; transition: background-color var(--dur) var(--ease); }
tr.link-row:hover { background: rgba(255,255,255,.025); }
.row-name { display: inline-flex; align-items: center; gap: 12px; }
.row-name a { color: var(--ink); font-weight: 500; text-decoration-color: var(--line-2); text-decoration-style: dotted; }
.mono { font-family: var(--mono); font-size: .8rem; letter-spacing: -.01em; color: var(--read); }
.count-line { margin: 0; padding: 10px 16px; border-top: 1px solid var(--line); }
.small-button, .button.small-button, button.small-button { padding: 6px 11px; font-size: .84rem; }
.price strong { font-weight: 600; }
.picked.suggest { margin: 0 0 18px; align-items: center; }

/* Icon tiles: a rounded square tinted by status (lists, object heads, the journey). */
.ico.tile { width: 40px; height: 40px; padding: 10px; border-radius: 11px; color: var(--accent-2); background: var(--tint); border: 1px solid var(--tint-line); }
.ico.tile.sm { width: 30px; height: 30px; padding: 7px; border-radius: 9px; }
.ico.tile.lg { width: 56px; height: 56px; padding: 14px; border-radius: 15px; box-shadow: 0 0 40px -12px var(--glow); }
.ico.tile.good { color: var(--good); background: rgba(92,201,131,.1); border-color: rgba(92,201,131,.28); }
.ico.tile.warn { color: var(--warn); background: rgba(227,164,59,.1); border-color: rgba(227,164,59,.3); }
.ico.tile.bad { color: var(--bad); background: rgba(255,122,112,.1); border-color: rgba(255,122,112,.3); }

/* Empty state: one bordered card in place of the list. */
.empty { text-align: center; padding: 56px 24px; border: 1px solid var(--line); border-radius: var(--r-card); background: radial-gradient(60% 120px at 50% 0, rgba(91,140,255,.08), transparent), var(--panel); }
.empty .ico.tile { width: 52px; height: 52px; padding: 13px; border-radius: 14px; margin-bottom: 16px; }
.empty h2 { margin: 0 0 6px; font-size: 1.1rem; }
.empty p { margin: 0 auto 20px; color: var(--muted); max-width: 44ch; }
.empty p:last-child { margin-bottom: 0; }

/* A link to the next thing to do, above a page's content. */
a.callout { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 12px 16px; border: 1px solid var(--tint-line); border-radius: 12px; background: var(--tint); color: var(--read); text-decoration: none; }
a.callout strong { color: var(--ink); font-weight: 600; }
a.callout span:not(.ico) { margin-left: auto; color: var(--accent-2); font-weight: 500; }
a.callout .ico { display: none; }
a.callout:hover { border-color: rgba(143,176,255,.45); }

/* Get started: numbered steps on one line; done ones ticked, the next one lit. */
ol.start-steps { list-style: none; margin: 0 0 24px; padding: 0; position: relative; }
/* The line runs from each step's dot to the next one, so it ends at the last dot at every width. */
ol.start-steps li:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 36px; bottom: 0; width: 1px; background: var(--line-2); }
ol.start-steps li { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 18px; padding: 0 0 28px; }
ol.start-steps li:last-child { padding-bottom: 0; }
ol.start-steps .dot { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--muted); font-weight: 600; font-size: .9rem; position: relative; }
ol.start-steps .dot .ico { width: 16px; height: 16px; }
ol.start-steps li.done .dot { color: var(--good); border-color: rgba(92,201,131,.4); background: #0d1a14; }
ol.start-steps li.next .dot { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); box-shadow: 0 0 24px -4px var(--glow); }
ol.start-steps h2 { font-size: 1.05rem; margin: 7px 0 4px; }
ol.start-steps li.done h2 { color: var(--muted); }
ol.start-steps p { margin: 0 0 12px; color: var(--muted); }
ol.start-steps li:not(.next) p { margin-bottom: 0; }
.panel.tip { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 20px; }
.panel.tip h2 { margin: 0; } .panel.tip p { margin: 0; grid-column: 1; } .panel.tip .button { grid-column: 2; grid-row: 1 / span 2; }

/* An object's page (an order): its tile, its kind over its name, its facts, its journey. */
.object-head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.object-head > div:nth-child(2) { flex: 1; min-width: 0; }
.object-head .kind { margin: 0 0 2px; color: var(--muted); font-size: .86rem; }
.object-head h1 { margin: 0; font-size: 1.6rem; letter-spacing: -.02em; }
dl.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px 24px; margin: 0 0 18px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--panel); }
dl.facts dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--quiet); margin-bottom: 6px; }
dl.facts dd { margin: 0; color: var(--ink); }
p.meaning { margin: 0 0 28px; color: var(--read); }
.section-label { margin: 0 0 12px; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--quiet); }
ol.journey { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 24px; padding: 22px 12px; border: 1px solid var(--line); border-radius: var(--r-card);
  background: radial-gradient(rgba(214,228,253,.07) 1px, transparent 1.2px) 0 0 / 14px 14px, var(--bg-2); position: relative; }
ol.journey li { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; position: relative; }
ol.journey li + li::before { content: ""; position: absolute; top: 20px; right: calc(50% + 28px); width: calc(100% - 56px); height: 1px; background: var(--line-2); }
ol.journey li.done + li.done::before { background: rgba(92,201,131,.5); }
ol.journey .ico.tile { background: var(--bg-2); color: var(--quiet); border-color: var(--line-2); }
ol.journey li.done .ico.tile { color: var(--good); background: #0d1a14; border-color: rgba(92,201,131,.4); }
ol.journey li.done.warn .ico.tile { color: var(--warn); background: #1c160b; border-color: rgba(227,164,59,.45); }
ol.journey li.done.bad .ico.tile { color: var(--bad); background: #1f0f0e; border-color: rgba(255,122,112,.45); }
ol.journey strong { font-weight: 600; font-size: .92rem; color: var(--muted); }
ol.journey li.done strong { color: var(--ink); }
ol.journey span:not(.ico) { font-size: .8rem; color: var(--quiet); min-height: 1.2em; }
.result-list li .ico.tile { margin-right: 2px; }
.actions.tight { margin-top: 0; }

/* The order form: fields on the left, the summary and the button kept in view on the right. */
.order-form { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.order-fields > .panel:last-child { margin-bottom: 0; }
.order-summary { position: sticky; top: 24px; margin: 0; }
.order-summary .actions { margin-top: 16px; }
.order-summary button[type=submit] { width: 100%; padding: 12px 16px; }
/* The heading and its "optional" share a baseline; the step number is centred on them. */
.order-form h2 { display: flex; align-items: baseline; gap: 10px; }
.order-form h2 .n { align-self: center; }
.order-form h2 .n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-2); font-size: .78rem; color: var(--muted); font-weight: 600; }
.order-form h2 .optional { font-size: .78rem; font-weight: 400; color: var(--quiet); margin-left: -2px; }
@media (max-width: 1100px) { .order-form { grid-template-columns: minmax(0, 1fr); } .order-summary { position: static; } }

/* Phone: the sidebar becomes a top bar with one menu holding the same parts. */
@media (max-width: 900px) {
  body.signed-in #app { display: block; }
  body.signed-in #app > aside.side { display: none; }
  body.signed-in #app > header.top { display: flex; position: sticky; top: 0; z-index: 30; flex-wrap: nowrap; gap: 12px; padding: 10px 16px; background: rgba(7,9,12,.9); backdrop-filter: blur(12px); }
  body.signed-in main { padding: 24px 16px 48px; }
  .test-banner { padding: 9px 16px; }
  details.menu .menu-panel { width: min(300px, calc(100vw - 32px)); gap: 10px; padding: 10px; }
  details.menu .menu-panel .account { padding-left: 4px; }
  ol.journey { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 16px; justify-items: start; }
  ol.journey li { flex-direction: row; text-align: left; gap: 12px; padding: 8px 0; flex-wrap: wrap; }
  ol.journey li + li::before { left: 20px; right: auto; top: -8px; width: 1px; height: 16px; }
  ol.journey span:not(.ico) { min-height: 0; }
  .panel.tip { grid-template-columns: 1fr; } .panel.tip .button { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 10px; }
}
/* The order summary: the picked tests, then the estimated total, large. */
ul.summary-tests { list-style: none; margin: 0 0 6px; padding: 0; }
ul.summary-tests li { padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.order-summary .total { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
/* Straight under the side card's heading (the panel editor's Price) the total needs no divider; one side-card look. */
.order-summary > h2 + .total { margin-top: var(--gap-head); padding-top: 0; border-top: 0; }
/* A card that opens on a field (no heading) starts its first label at the card's padding, like every other card. */
#app .panel > div:first-child > label:first-child { margin-top: 0; }
.order-summary .total strong { font-size: 1.6rem; font-weight: 600; letter-spacing: -.02em; }
.badge.test { color: var(--warn); }
body.signed-in #app { background: linear-gradient(90deg, var(--bg-2) 247px, var(--line) 247px, var(--line) 248px, transparent 248px); }
@media (max-width: 900px) { body.signed-in #app { background: none; } dl.facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
table.stack td.mono::before { font-family: var(--sans); letter-spacing: 0; }

/* Polish pass: the cube with the wordmark, status chips with counts, two-line rows, one table look everywhere. */
aside.side > .brand, header.top > .brand { display: inline-flex; align-items: center; gap: 10px; }
.brand .cube { display: block; width: 22px; height: 25px; filter: drop-shadow(0 4px 14px rgba(91,140,255,.4)); }
.brand .cube svg { width: 100%; height: 100%; display: block; }
.seg { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; }
.seg button { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: .88rem; font-weight: 500; background: transparent; color: var(--muted); border: 1px solid var(--line-2); box-shadow: none; }
.seg button:hover { background: rgba(255,255,255,.04); color: var(--ink); }
.seg button.on { background: rgba(255,255,255,.08); color: var(--ink); border-color: rgba(255,255,255,.22); }
.seg button .n { font-size: .74rem; color: var(--quiet); font-variant-numeric: tabular-nums; }
.seg button.on .n { color: var(--read); }
.row-name .stack { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.row-name .sub { font-size: .74rem; color: var(--quiet); }
.table-wrap.list td { color: var(--read); }
.table-wrap.list td.muted { color: var(--muted); }
.table-wrap.list .button.secondary { padding: 5px 11px; font-size: .84rem; }
/* Tables inside panels (settings pages) read like the lists: small quiet heads, roomy rows. */
.panel table th { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--quiet); padding: 10px 12px; }
.panel table td { padding: 13px 12px; vertical-align: middle; color: var(--read); }
.panel table td:first-child { color: var(--ink); font-weight: 500; }
.panel table td .button, .panel table td button { padding: 6px 12px; font-size: .86rem; }
.table-wrap.list table th { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--quiet); }
ul.test-list { list-style: none; margin: 0; padding: 0; }
ul.test-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
ul.test-list li:first-child { border-top: 0; padding-top: 0; }
ul.test-list li > span:nth-child(2) { flex: 1; color: var(--ink); }
.object-head .kind .mono { color: var(--muted); margin-left: 4px; }
@media (max-width: 600px) {
  table.stack td .row-name { gap: 10px; }
  .seg { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .seg button { flex: none; }
}
aside.side > * { flex: none; }
aside.side .account { margin-top: auto; }
td.nowrap, .table-wrap.list td.nowrap { white-space: nowrap; }
@media (max-width: 600px) {
  .table-wrap.list table.stack tr { padding: 14px 16px; row-gap: 2px; }
  .table-wrap.list table.stack td { padding: 2px 0; white-space: normal; }
  .table-wrap.list table.stack td:first-child { padding-bottom: 8px; }
  .table-wrap.list table.stack td:not(:first-child)[data-label]:not([data-label=""])::before { min-width: 5.5em; }
  .count-line { padding: 10px 16px; }
}
/* A folded add-form: one row that reads like a button; open, the form sits under it in the same card. */
details.fold { padding: 0; }
details.fold > summary { display: flex; align-items: center; gap: 10px; padding: 16px 24px; cursor: pointer; list-style: none; font-weight: 600; color: var(--ink); border-radius: var(--r-card); }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary .ico { width: 18px; height: 18px; color: var(--accent-2); }
details.fold > summary:hover { background: rgba(255,255,255,.025); }
details.fold[open] > summary { border-bottom: 1px solid var(--line); border-radius: var(--r-card) var(--r-card) 0 0; }
details.fold > form { padding: 4px 24px 24px; }
details.fold > form > .lede:first-child { margin-top: 16px; }
/* The sidebar fits a laptop screen. */
aside.side { gap: 12px; padding-top: 18px; }
aside.side nav, .menu-panel nav { gap: 10px; }
aside.side nav .nav-group + .nav-group { padding-top: 10px; }
aside.side nav a { padding: 7px 10px; }
.panel table.log td:first-child { color: var(--muted); font-weight: 400; }
.panel table.log td { color: var(--read); }
/* The phone menu's nav is not the old top-bar nav (header.top nav wrapped and spaced its links in a row). */
header.top .menu-panel nav { flex-wrap: nowrap; gap: 10px; }
header.top .menu-panel nav a { font-size: .95rem; }
.menu-panel .mode-toggle { display: grid; grid-template-columns: 1fr 1fr; }
.menu-panel .mode-toggle button { padding: 7px 0; }
details.menu .menu-panel { max-height: calc(100vh - 80px); overflow-y: auto; }
details.menu .menu-panel > * { flex: none; }
.menu-panel .account { border-top: 0; padding-top: 4px; }

/* Panels: cards in a grid, grouped QDX / practice / mine; each with its tests and one estimated total. */
.panel-scope + .panel-scope { margin-top: 40px; }
.scope-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.scope-head h2 { margin: 0; font-size: 1.15rem; }
.scope-head p { margin: 0; }
.panel-scope .section-label { margin: 18px 0 10px; }
.panel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.panel-card { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-card); background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 90px), var(--panel); transition: border-color var(--dur) var(--ease); }
.panel-card:hover { border-color: var(--line-2); }
.panel-card header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.panel-card h3 { margin: 0; font-size: 1rem; }
.panel-card .desc { margin: 0; }
.panel-card.is-hidden { opacity: .6; }
ul.panel-tests { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
ul.panel-tests li { font-size: .78rem; color: var(--read); padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.025); }
ul.panel-tests li.more { color: var(--quiet); border-style: dashed; }
ul.panel-tests li.gone { color: var(--quiet); text-decoration: line-through; }
.panel-card footer { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.panel-card .est { display: flex; align-items: baseline; gap: 6px; }
.panel-card .est strong { font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; }
.card-actions { display: flex; align-items: center; gap: 12px; }
button.link, a.link { padding: 0; border: 0; background: none; box-shadow: none; color: var(--muted); font-size: .86rem; font-weight: 500; text-decoration: none; cursor: pointer; }
button.link:hover, a.link:hover { background: none; color: var(--ink); }
.empty.slim { padding: 28px 24px; }
.empty.slim p { margin-bottom: 14px; }
details.hidden-panels { margin-top: 16px; }
details.hidden-panels > summary { cursor: pointer; color: var(--muted); font-size: .88rem; margin-bottom: 12px; }
/* The order form's panel tools. */
.test-pick { display: flex; gap: 10px; }
.test-pick > input { flex: 1; min-width: 0; }
.test-pick > button { flex: none; }
.results .results-head { margin: 0; padding: 8px 12px 4px; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--quiet); }
.results button span + span { margin-left: 10px; }
/* Save these tests as a panel: under the card's divider, a control in the link colour with a chevron, so it reads as
   something to click, not as a hint. */
.save-panel:not(:empty) { margin-top: var(--gap-actions); padding-top: var(--gap-actions); border-top: 1px solid var(--line); }
button.action-link { display: inline-flex; align-items: center; gap: 8px; padding: 2px 0; margin: 0; border: 0; background: none; box-shadow: none; color: var(--accent-2); font: inherit; font-size: .92rem; font-weight: 500; cursor: pointer; border-radius: 4px; }
button.action-link:hover { color: var(--ink); background: none; }
button.action-link:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus); }
/* A drawn chevron pointing on (the ▸ character is a speck in this face). */
.chev { display: inline-block; flex: none; width: 6px; height: 6px; margin-left: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); vertical-align: 1px; opacity: .8; }
button.action-link .chev { margin-left: 0; }
.save-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.save-form input { flex: 1 1 200px; width: auto; }
.save-form select { width: auto; }
p.panel-note:empty { display: none; }
p.panel-note { margin: 8px 0 0; }
.from-panels { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--accent-2); font-size: .88rem; font-weight: 500; }
.from-panels .ico { width: 16px; height: 16px; }
@media (max-width: 600px) { .test-pick { flex-wrap: wrap; } .test-pick > button { width: 100%; } }
.panel-card .count { margin: 0; color: var(--quiet); }
ul.panel-tests li { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-card .tag { font-size: .7rem; color: var(--quiet); border: 1px solid var(--line-2); border-radius: 6px; padding: 2px 6px; }
/* Prices: each test on its own line with its price, the collection fee on its own line. */
ul.summary-tests li { display: flex; justify-content: space-between; gap: 12px; }
ul.summary-tests li .amt { flex: none; font-variant-numeric: tabular-nums; color: var(--read); }
ul.summary-tests li.fee { color: var(--muted); }
/* The total's own line closes the list, so the last line has none of its own (no doubled divider). */
ul.summary-tests > li:last-child { border-bottom: 0; }
/* New order: each added panel is one item (name and count, opening to its tests; one × for all of it), single tests chips. */
.order-picked { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 8px; }
.order-picked:empty { display: none; }
.order-picked .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.panel-item { border: 1px solid var(--line-2); border-radius: var(--r-control); background: var(--field); }
.panel-item-head { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 4px; }
.panel-item button.panel-toggle { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 6px 8px; border: 0; background: none; box-shadow: none; color: var(--ink); font: inherit; font-size: .92rem; text-align: left; cursor: pointer; }
.panel-item button.panel-toggle strong { font-weight: 500; }
/* A drawn chevron (the ▸ character is a speck in this face): pointing right, turning down when open. */
.caret { flex: none; display: inline-block; width: 6px; height: 6px; border-right: 1.5px solid var(--quiet); border-bottom: 1.5px solid var(--quiet); transform: rotate(-45deg); transition: transform var(--dur) var(--ease); }
.panel-item button.panel-toggle[aria-expanded="true"] .caret, ul.summary-tests li.summary-panel details[open] .caret { transform: rotate(45deg); }
.panel-item button.remove { flex: none; padding: 4px 10px; border: 0; background: none; box-shadow: none; color: var(--muted); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.panel-item button.remove:hover { color: var(--ink); }
.panel-item ul.panel-tests { padding: 4px 12px 12px; }
/* The summary: a panel's line opens to its tests' lines, set in under it. */
ul.summary-tests li.summary-panel { display: block; }
ul.summary-tests li.summary-panel summary { display: flex; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; }
ul.summary-tests li.summary-panel summary::-webkit-details-marker { display: none; }
ul.summary-tests li.summary-panel .summary-name { display: flex; align-items: center; gap: 10px; }
ul.summary-tests li.summary-panel ul { list-style: none; margin: 6px 0 0; padding: 0 0 0 1em; }
ul.summary-tests li.summary-panel ul li { padding: 4px 0; border-bottom: 0; color: var(--read); font-size: .92em; }
p.fee-note { margin: 0 0 14px; color: var(--muted); font-size: .9rem; }
main > div > p.fee-note { margin-bottom: 22px; }

/* Test details: a panel from the right (a full-screen sheet on a phone), opened from any test's name. */
button.test-link { display: inline; padding: 0; margin: 0; border: 0; background: none; box-shadow: none; color: inherit; font: inherit; font-weight: inherit; text-align: left; cursor: pointer; text-decoration: underline dotted; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
button.test-link:hover { background: none; color: var(--ink); text-decoration-color: var(--accent-2); }
.chip button.test-link { padding: 0; color: var(--ink); }
.drawer-wrap { position: fixed; inset: 0; z-index: 60; }
.drawer-backdrop { position: absolute; inset: 0; background: rgba(3,5,8,.6); backdrop-filter: blur(2px); }
.drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(520px, 100vw); overflow-y: auto; background: var(--bg-2); border-left: 1px solid var(--line-2); box-shadow: -24px 0 64px -24px #000; padding: 28px 28px 40px; animation: drawer-in var(--dur) var(--ease); }
@keyframes drawer-in { from { transform: translateX(24px); opacity: 0; } }
.drawer-close { position: absolute; top: 16px; right: 16px; font-size: 1.4rem; line-height: 1; }
body.drawer-open { overflow: hidden; }
.drawer-head { padding-right: 32px; margin-bottom: 8px; }
.drawer-head .kind { margin: 0 0 4px; color: var(--muted); font-size: .84rem; }
.drawer-head h2 { margin: 0 0 6px; font-size: 1.35rem; letter-spacing: -.015em; }
.drawer-price { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.drawer-price strong { font-size: 1.3rem; font-weight: 600; }
.drawer-price > :last-child { margin-left: auto; }
.drawer section { padding: 18px 0; border-top: 1px solid var(--line); }
.drawer section:first-of-type { margin-top: 18px; }
.drawer section h3 { margin: 0 0 10px; font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--quiet); font-weight: 600; }
.drawer section p { margin: 0 0 8px; color: var(--read); }
ul.analytes, ul.plain { list-style: none; margin: 0; padding: 0; }
ul.analytes li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
ul.analytes li:last-child { border-bottom: 0; }
ul.analytes .loinc { flex: none; color: var(--quiet); font-size: .72rem; }
ul.plain li { padding: 4px 0; color: var(--read); }
dl.kv { margin: 0; display: grid; gap: 10px; }
dl.kv > div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 12px; }
dl.kv dt { color: var(--quiet); font-size: .86rem; }
dl.kv dd { margin: 0; color: var(--read); }
details.technical { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
details.technical > summary { cursor: pointer; color: var(--muted); font-size: .9rem; margin-bottom: 12px; }
@media (max-width: 600px) { .drawer { width: 100vw; border-left: 0; padding: 22px 18px 32px; } dl.kv > div { grid-template-columns: 1fr; gap: 2px; } }

/* Tests page as a menu to browse (after qdx.systems/tests.html): a rail of categories beside cards with price and CPT. */
.menu-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 28px; align-items: start; }
.menu-rail { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 2px; }
.menu-rail .rail-label { margin: 0 0 6px; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--quiet); }
.menu-rail .rail-label:not(:first-child) { margin-top: 18px; }
.menu-rail button { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 10px; border: 0; border-radius: 9px; background: none; box-shadow: none; color: var(--muted); font-weight: 400; font-size: .92rem; text-align: left; }
.menu-rail button span { color: var(--quiet); font-size: .76rem; font-variant-numeric: tabular-nums; }
.menu-rail button:hover { background: rgba(255,255,255,.04); color: var(--ink); }
.menu-rail button.on { background: rgba(255,255,255,.07); color: var(--ink); }
.menu-rail label.check { margin: 0; font-size: .92rem; }
.menu-rail .fee-note { margin-top: 18px; font-size: .84rem; }
.menu-layout .filters { align-items: center; }
.test-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.test-card { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--panel); }
.test-card:hover { border-color: var(--line-2); }
.tc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.tc-top h3 { margin: 0; font-size: 1rem; font-weight: 600; }
.tc-top .cpt { flex: none; font-size: .72rem; color: var(--quiet); margin-top: 3px; }
.tc-top .cpt small { opacity: .75; }
.tc-sub { margin: 0; font-size: .78rem; color: var(--quiet); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-sub .mono { font-size: .74rem; color: var(--muted); }
.tc-measures { margin: 0; font-size: .86rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tc-measures span { color: var(--quiet); }
/* Text clipped to one line (or two) keeps 2px of room inside its clip edge, so no letter's edge is shaved; the matching
   negative margin leaves it exactly where it was. */
.practice .name, .account .acct-email, .tc-sub, .tc-measures, header.top .top-practice { padding-inline: 2px; margin-inline: -2px; }
.tc-foot { margin-top: auto; padding-top: 10px; display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); }
.tc-foot strong { font-size: 1.05rem; font-weight: 600; }
.tc-foot .button { margin-left: auto; }
@media (max-width: 1000px) { .menu-layout { grid-template-columns: minmax(0, 1fr); } .menu-rail { position: static; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 6px; } .menu-rail .rail-label, .menu-rail .fee-note { display: none; } .menu-rail button { flex: none; border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 12px; } .menu-rail label.check { flex: none; padding: 6px 4px; white-space: nowrap; } }
@media (max-width: 640px) { .test-grid { grid-template-columns: minmax(0, 1fr); } }
/* A neutral fact about a test (Fasting), the same tag as on qdx.systems; colour stays for status (badges). */
.tag { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: .76rem; line-height: 1.3; color: var(--read); border: 1px solid var(--line-2); background: rgba(255,255,255,.03); white-space: nowrap; }

/* Patients: where each record lives (a source badge), the note on a record managed elsewhere, the texts line. */
.src { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: .74rem; font-weight: 500; line-height: 1.4; white-space: nowrap; color: var(--read); border: 1px solid var(--line-2); background: rgba(255,255,255,.03); }
.src.src-qdx { color: var(--accent-2); border-color: var(--tint-line); background: var(--tint); }
.object-head .kind .src { margin-left: 6px; vertical-align: 1px; }
p.managed { margin: 0 0 18px; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: rgba(255,255,255,.025); color: var(--read); font-size: .92rem; }
p.texts { margin: 0; color: var(--muted); }
p.texts .badge { margin-right: 6px; }
form.edit-patient label:first-child { margin-top: 0; }
form.edit-patient .notice { margin: 16px 0 0; padding: 10px 14px; border: 1px solid var(--tint-line); border-radius: 10px; background: var(--tint); color: var(--read); }
button.patient-pick { display: flex; align-items: center; gap: 12px; }
button.patient-pick > span:first-child { flex: 1; }
p.chosen-patient { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
p.notice { margin: 12px 0 0; padding: 10px 14px; border: 1px solid var(--tint-line); border-radius: 10px; background: var(--tint); color: var(--read); }
p.notice.warn { border-color: rgba(227,164,59,.4); background: rgba(227,164,59,.08); color: #f0c47a; }
p.notice.good { border-color: rgba(92,201,131,.35); background: rgba(92,201,131,.08); color: var(--good); }
p.notice:empty { display: none; }
.panel h2 .optional { font-size: .78rem; font-weight: 400; color: var(--quiet); margin-left: 6px; }
p.plan { margin: 16px 0 0; color: var(--read); }
/* The bank debit authorization: read before Authorize, and again under an active bank. */
.mandate-text { margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r-control); background: var(--bg-2); color: var(--read); font-size: .9rem; line-height: 1.55; }
details.mandate { margin-top: 12px; }
details.mandate > summary { cursor: pointer; color: var(--muted); font-size: .88rem; width: fit-content; }
details.mandate > summary:hover { color: var(--ink); }

/* One rhythm in every panel. The site's stylesheet zeroes paragraph margins, so a panel spaces its own children:
   heading → content, then an even gap between lines and blocks, more room above buttons, and small print that
   never touches a button. */
.panel > h2 { margin-bottom: 0; }
.panel > * + * { margin-top: var(--gap-flow); }
.panel > h2 + * { margin-top: var(--gap-head); }
.panel > .actions { margin-top: var(--gap-actions); }
.panel > .actions + * { margin-top: var(--gap-after-actions); }
.panel > .error:empty, .panel > p.ok:empty { margin: 0; }
/* Form fields bring their own space (a label's top margin), so the flow gap doesn't add to it. */
.panel > * + :is(.row, label, div:has(> label:first-child)) { margin-top: 0; }
/* An empty holder (chips, notes, errors waiting for content) takes no room in the rhythm. */
.panel > :empty:not(input, select, textarea, button) { margin-top: 0; }
/* A lede under a heading is part of the flow, not its own margin. */
#app .panel > p.lede { margin: var(--gap-head) 0 0; }
.panel > p.lede + * { margin-top: var(--gap-head); }
/* Body text reads; small print is quieter, smaller and set apart. */
.panel > p:not([class]), .panel > p.muted:not(.small), #app .panel > p.lede { color: var(--read); }
#app .panel > p.lede { font-size: inherit; }
.panel > p.small.muted { color: var(--muted); font-size: .84rem; line-height: 1.5; }
/* A status badge sits on the text's middle, a little apart from it; an "optional" tag sits on the heading's baseline. */
p > .badge, td > .badge + .badge { vertical-align: 1px; margin-left: 6px; }
.panel h2 .optional { vertical-align: 1px; margin-left: 8px; }
/* Fields in a grid: the grid spaces the rows, so a label right under a heading isn't pushed down twice. */
.card-fields { row-gap: 14px; }
.card-fields label { margin-top: 0; }
.panel > .card-form { margin-top: var(--gap-actions); padding-top: var(--gap-actions); border-top: 1px solid var(--line); }
/* A table stacked into blocks on a phone, inside a panel: label and value lines sit close, rows apart. The panel
   table's roomy desktop padding would otherwise space every line like a row. */
@media (max-width: 600px) {
  .panel table.stack td { padding: 3px 0; }
  .panel table.stack td:first-child { padding-bottom: 8px; }
  .panel table.stack td[data-label=""] { padding-top: 10px; }
}
/* A folded form lines up with a plain panel: the same side padding at every width. */
@media (max-width: 560px) {
  details.fold > summary { padding-left: 18px; padding-right: 18px; }
  details.fold > form { padding: 4px 18px 18px; }
}
/* Results delivery: a code to confirm sits on one line with its button; the row's other buttons follow. */
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.code-confirm { display: flex; gap: 8px; }
.code-confirm input { width: 9em; min-width: 0; flex: 0 1 9em; }
.code-confirm button, .row-actions > button { white-space: nowrap; }
/* A field's own message, under it (checkForm, showError). */
:is(#app, .drawer) .field-error { margin: 6px 0 0; color: var(--bad); font-size: .86rem; line-height: 1.45; font-weight: 400; }
:is(#app, .drawer) :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--bad); }
.secret-row { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.secret-row .secret { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.wrap-anywhere { overflow-wrap: anywhere; }
/* A few fields under one name (the patient's address), marked once. */
#app .group-label { margin: 22px 0 0; font-size: .78rem; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--quiet); }
#app .group-label .optional { text-transform: none; letter-spacing: 0; margin-left: 4px; }
/* Patient facts: a long email or address wraps inside its cell instead of overrunning the next or widening the page. */
dl.facts > div { min-width: 0; }
dl.facts dd { overflow-wrap: anywhere; }
dl.facts > div.wide { grid-column: span 2; }
/* A chip row that scrolls sideways on a phone fades at its edge, so it's clear there's more. */
@media (max-width: 560px) {
  .seg, .menu-rail { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); }
  .filters { flex-wrap: wrap; }
  .filters > .small.muted { flex-basis: 100%; }
}
/* Agreements: each row the same way at every width, the signer under the link. */
ul.checklist .signer { display: block; margin-top: 2px; }
@media (max-width: 560px) { button.wide-on-phone { width: 100%; padding: 12px 16px; } }

/* Panel cards: a long test name ends in "…" (the full name is in the tooltip); price on one line, actions under it with Order at the end. */
/* A test's pill is its button: the chip's side padding sits on the button, so the button's clip edge is 8px clear of
   the first and last letters (with none, it shaved them: "hs-CRP" read "ns-CRP") and a long name still ends in "…". */
ul.panel-tests li:has(> button.test-link) { padding: 0; }
/* A pill is at most about 170px; a longer name ends in "…" and shows whole on hover and in the panel's drawer. */
.panel-card ul.panel-tests li { max-width: 170px; }
ul.panel-tests.in-drawer { gap: 8px; }
ul.panel-tests li.more:has(> button) { padding: 0; }
ul.panel-tests li.more > button { padding: 3px 8px; border: 0; background: none; box-shadow: none; color: inherit; font: inherit; cursor: pointer; }
/* The name, "N tests ▸" and "+N more" open the panel's drawer: text that reads as itself, with the link's hover. */
.panel-card button.card-open { display: inline; padding: 0; margin: 0; border: 0; background: none; box-shadow: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
/* What opens a card's drawer looks it: the test count and "+N more" in the link colour, and a card's title (Panels and
   Tests alike) taking the link colour and an underline on hover and focus, with the pointer. */
.panel-card .count button.card-open, .panel-card li.more > button.card-open { color: var(--accent-2); }
.panel-card ul.panel-tests li.more:has(> button) { border-color: rgba(143,176,255,.35); }
.panel-card button.card-open:hover, .panel-card button.card-open:focus-visible,
.test-card h3 button.test-link:hover, .test-card h3 button.test-link:focus-visible { color: var(--accent-2); text-decoration: underline; text-decoration-style: solid; text-decoration-color: var(--accent-2); text-underline-offset: 3px; outline: none; }
.panel-card h3 button.card-open, .test-card h3 button.test-link { cursor: pointer; }
.panel-drawer-actions { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.panel-drawer-actions .card-actions { display: flex; gap: 8px; }
.panel-drawer-actions .card-actions > :last-child { margin-left: auto; }
ul.panel-tests li button.test-link { display: block; max-width: 100%; padding: 3px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-card footer .est { flex-basis: 100%; }
.panel-card footer .card-actions { flex: 1; flex-wrap: nowrap; }
.panel-card footer .card-actions > :last-child { margin-left: auto; }
.badge.info { color: var(--accent-2); }
.ico.tile.info { color: var(--accent-2); background: rgba(91,140,255,.1); border-color: rgba(91,140,255,.3); }
.test-list .test-code { display: block; margin-top: 2px; }

/* Phone cards: a value that wraps stays in its own column (a hanging indent the width of the label), not under the label. */
@media (max-width: 600px) {
  table.stack td:not(:first-child)[data-label]:not([data-label=""]) { padding-left: calc(5.2rem + 8px); text-indent: calc(-5.2rem - 8px); }
  table.stack td:not(:first-child)[data-label]:not([data-label=""])::before { min-width: 5.2rem; text-indent: 0; }
  table.stack td:not(:first-child)[data-label]:not([data-label=""]) > * { text-indent: 0; }
  .table-wrap.list table.stack td:not(:first-child)[data-label]:not([data-label=""]) { padding-left: calc(4.4rem + 8px); text-indent: calc(-4.4rem - 8px); }
  .table-wrap.list table.stack td:not(:first-child)[data-label]:not([data-label=""])::before { min-width: 4.4rem; }
}
/* Invoice lines line up with the heading and the text around them. */
body.standalone table.invoice-lines td:first-child { padding-left: 0; }
body.standalone table.invoice-lines td.amount { text-align: right; padding-right: 0; white-space: nowrap; vertical-align: top; }
/* Team: a role changed in place, its controls stacked in the cell. */
/* Team: a person's details open in a row of their own under theirs; their actions sit together at the row's end. */
#app table tr.edit-row > td { padding-top: 16px; padding-bottom: 16px; }
/* Side by side, the first fields' labels start at the row's top; stacked on a phone, each field keeps its gap. */
@media (min-width: 601px) { #app table tr.edit-row form > .row:first-child label { margin-top: 0; } }
@media (max-width: 600px) { #app table tr.edit-row form > .row:first-child > div:first-child label { margin-top: 0; } }
/* A form's Save / Cancel row sits a section gap under its fields, wherever the form opens. */
#app form > .row + .row-actions, #app form > div:not(.row-actions) + .row-actions { margin-top: var(--gap-actions); }
form.person-edit .fixed-value { margin: 0; padding: 10px 0; }
#app td.end .row-actions { justify-content: flex-end; flex-wrap: nowrap; }
@media (max-width: 600px) { #app table.stack td.end .row-actions { justify-content: flex-start; } #app table.stack tr.edit-row { display: block; } }
/* Batch 6 */
div.callout { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; padding: 12px 16px; border: 1px solid var(--tint-line); border-radius: 12px; background: var(--tint); color: var(--read); }
div.callout strong { color: var(--ink); font-weight: 600; }
.drawer-head .drawer-price { margin-right: -32px; }
.lede, .scope-head p { text-wrap: pretty; }
#app .panel > h2 + label { margin-top: var(--gap-head); }
ul.checklist .badge { min-width: 6.8em; text-align: center; }
@media (max-width: 560px) { .scope-head p { flex-basis: 100%; } }
@media (max-width: 600px) { #app .panel table.log tr { padding: 10px 0; } #app .panel table.log td { padding: 0; } #app .panel table.log td + td { margin-top: 2px; } }
/* A name with no spaces (40 characters of it) wraps instead of widening the page. */
#app h1, #app h2, .row-name a { overflow-wrap: anywhere; }
#app td { overflow-wrap: break-word; }
/* Order detail: a clinician's name and credential stay together; on a phone every fact takes a full row. */
dl.facts dd .credential { display: block; margin-top: 2px; color: var(--muted); font-size: .86rem; }
/* An order's five facts (status, date of birth, clinician, requisition, placed) share the row by what they hold, so
   "Bobbi-Jo Campbell, FNP-C" keeps to one line. */
@media (min-width: 1200px) { dl.order-facts { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr) minmax(0, 1.35fr) minmax(0, .8fr) minmax(0, 1.15fr); } }
@media (max-width: 600px) { dl.order-facts { grid-template-columns: minmax(0, 1fr); } }
/* New order: the two ways to choose a patient. */
.seg.patient-mode { margin-bottom: 14px; }

/* Test drawer on a phone: price and fee on one line, the action full width under them. */
@media (max-width: 600px) { .drawer-price > :last-child { flex-basis: 100%; margin-left: 0; justify-content: center; text-align: center; } }
/* Agreements: one layout for every row, badge column then the link, the signer under the link. */
ul.checklist li { display: grid; grid-template-columns: 6.8em minmax(0, 1fr); column-gap: 12px; align-items: baseline; }
ul.checklist li .signer { grid-column: 2; }
/* A button in a table cell never wraps ("Invoice PDF"). */
#app td .button { white-space: nowrap; }
/* Phone cards: a status badge sits at the card's right edge. */
@media (max-width: 600px) {
  table.stack td:not(:first-child):has(> .badge:only-child) { justify-self: end; text-align: right; }
  /* A name over its reference takes the card's full width, so it never wraps to make room; the status badge sits at the
     right end of the reference line. */
  table.stack tr:has(> td:first-child :is(.sub, .small, .muted)):has(> td:not(:first-child) > .badge:only-child) > td:first-child { grid-column: 1 / -1; }
  table.stack tr:has(> td:first-child :is(.sub, .small, .muted)) > td:not(:first-child):has(> .badge:only-child) { align-self: end; padding-bottom: 6px; }
  /* A phone card's actions sit at its bottom left, on every page. */
  #app table.stack td.end { text-align: left; justify-self: stretch; }
}
/* Clinicians: each license on its own line, with its registry badge and Remove; an inline form to add another. */
ul.licenses { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 4px; }
/* The number never breaks ("FL APRN11007415" stays whole) and the column keeps room for it; Details wraps instead. */
ul.licenses li { display: grid; grid-template-columns: max-content auto; justify-content: start; column-gap: 16px; row-gap: 4px; align-items: baseline; }
ul.licenses li > .license-number { white-space: nowrap; }
#app td.licenses-cell { min-width: 13rem; }
#app td.licenses-cell > button.link { white-space: nowrap; }
ul.licenses li > button.link { grid-column: 2; grid-row: 1; }
ul.licenses li > .badge, ul.licenses li > .license-expiry { grid-column: 1; justify-self: start; }
/* Text-style buttons in a table cell line up with the text (no button padding). */
#app td button.link { padding: 0; }
#app td.license-form { padding-top: 4px; }
#app td.license-form form { display: grid; gap: 12px; max-width: 640px; }
#app td.license-form .row-actions { margin-top: 2px; }
/* On a phone the licenses sit beside their label, like every other value on the card. */
@media (max-width: 600px) {
  #app table.stack td.licenses-cell { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); column-gap: 8px; padding-left: 0; text-indent: 0; }
  #app table.stack td.licenses-cell::before { grid-row: 1 / span 2; min-width: 0; margin: 0; }
  #app table.stack td.licenses-cell > * { grid-column: 2; justify-self: start; }
}
/* Clinicians as cards: name and Verified, NPI and specialty, their licenses one per line, then the actions. */
/* Cards 16px apart, and 16px down to Add a clinician, like every stack of cards. */
.clinician-list { display: grid; gap: 16px; margin-bottom: 16px; }
.clinician-list > .panel { margin-bottom: 0; }
.clinician-card .clinician-head h3 { margin: 0; font-size: 1.05rem; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.clinician-card .clinician-head p { margin: 4px 0 0; }
.clinician-card ul.licenses { margin: 14px 0 0; }
/* Each license: "FL APRN11007415 · Expires 04/30/2028" with Remove always at the end of its first line. */
.clinician-card ul.licenses li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: baseline; }
.clinician-card .license-text { display: flex; flex-wrap: wrap; column-gap: 0; }
.clinician-card .license-expiry { margin-left: .4em; }
.clinician-card .license-number, .clinician-card .license-expiry { white-space: nowrap; }
.clinician-card .license-expiry::before { content: "· "; }
@media (max-width: 600px) { .clinician-card .license-text { flex-direction: column; } .clinician-card .license-expiry { margin-left: 0; } .clinician-card .license-expiry::before { content: none; } }
.license-rows + .row-actions { margin-top: 12px; }
.clinician-card > .row-actions { margin-top: 14px; }
.clinician-card form { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 4px; }
/* Add a clinician: the NPI alone first; then one row per license (state, number, expiry, remove). */
.npi-row { max-width: 320px; }
/* Fields line up by their labels, so an error under one doesn't lift the others; Remove sits level with the inputs. */
.license-row { grid-template-columns: 7.5em minmax(0, 16em) 10.5em auto; justify-content: start; align-items: start; }
.license-row .row-end { display: flex; align-items: center; min-height: 44px; margin-top: calc(.88rem * 1.4 + 20px); }
@media (max-width: 600px) { .license-row { grid-template-columns: 1fr 1fr; } .license-row > :nth-child(2) { grid-column: 1 / -1; grid-row: 1; } .license-row .row-end { margin-top: 0; min-height: 0; grid-column: 1 / -1; } }

@media (max-width: 600px) { .license-row + .license-row { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); } .license-row .row-end { margin-top: 6px; } }
/* Clinician card: the clinician (name, Verified, NPI, specialty) with Edit and Remove clinician at the top right, then
   an inner card for licenses (labeled State / License number / Expires, Remove per row, Add a license at its foot). */
.clinician-card .clinician-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px 20px; flex-wrap: wrap; }
.clinician-card .clinician-actions { display: flex; gap: 8px; flex-wrap: nowrap; }
.licenses-box { margin-top: 16px; padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.015); }
.licenses-box h4 { margin: 0 0 8px; font-size: .78rem; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--quiet); }
.licenses-box table.license-table th, .licenses-box table.license-table td { padding-left: 0; }
/* The last license keeps its divider, so Add a license sits under the table the way a button sits under any table. */
.licenses-box table.license-table tbody tr:last-child > td { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
@media (max-width: 600px) { .licenses-box table.stack.license-table tbody tr:last-child { border-bottom: 1px solid var(--line); padding-bottom: 14px; } .licenses-box table.stack.license-table tbody tr:last-child > td { border-bottom: 0; padding-bottom: 2px; } }
.licenses-box > .row-actions { margin-top: var(--gap-actions); }
.licenses-box form { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.licenses-box tr.edit-row form { margin-top: 0; padding-top: 0; border-top: 0; }
@media (max-width: 600px) {
  .clinician-card .clinician-head { flex-direction: column; }
  .licenses-box { padding: 12px 14px 14px; }
}
/* The same columns in every clinician's licenses card. */
.licenses-box table.license-table { table-layout: fixed; width: 100%; }
.licenses-box table.license-table th:nth-child(1) { width: 14%; }
.licenses-box table.license-table th:nth-child(2) { width: 34%; }
.licenses-box table.license-table th:nth-child(3) { width: 24%; }
/* The row's actions end on the table's right edge, under the card's Edit / Remove clinician. */
.licenses-box table.license-table th:last-child, .licenses-box table.license-table td:last-child { padding-right: 0; }
@media (max-width: 600px) {
  /* Phone: labels one width ("License number" is the longest), so the values line up. */
  #app .licenses-box table.stack td:not(:first-child)[data-label]:not([data-label=""]) { padding-left: calc(7.4rem + 8px); text-indent: calc(-7.4rem - 8px); }
  #app .licenses-box table.stack td:not(:first-child)[data-label]:not([data-label=""])::before { min-width: 7.4rem; }
}
/* Agreements: a reading list (name, what it covers, Read and version), then one signature for all of them. */
ul.agreement-list { list-style: none; margin: 0; padding: 0; }
ul.agreement-list li { padding: 14px 0; border-top: 1px solid var(--line); }
ul.agreement-list li:first-child { border-top: 0; padding-top: 4px; }
ul.agreement-list .agreement-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
ul.agreement-list .agreement-name strong { color: var(--ink); font-weight: 500; }
ul.agreement-list p { margin: 4px 0 0; }
form.agreement-sign { margin-top: 14px; padding-top: 18px; border-top: 1px solid var(--line); }
.panel > ul.agreement-list { margin-top: 18px; }
/* A page-level notice (a confirmation or flash above the panels, not inside one) keeps the same gap below it as
   between panels, so it never touches the card under it. */
#app main p.notice:not(:is(.panel, form, .drawer) p) { margin: 0 0 16px; }
/* The last item of a divided list ends at its content: no bottom padding or border of its own, so the panel's padding is
   the only space before the panel's edge (lists, table rows, phone-stacked rows). */
:is(ul.agreement-list, .checklist, .result-list, ul.test-list, ul.licenses, ul.analytes) > li:last-child { padding-bottom: 0; border-bottom: 0; }
.panel table tbody tr:last-child > td { padding-bottom: 0; border-bottom: 0; }
@media (max-width: 600px) { .panel table.stack tbody tr:last-child, #app .panel table.log tr:last-child { padding-bottom: 0; border-bottom: 0; } }
/* EMR: Check connection's steps under the connection, and the registration code panel. */
#app td.check-out { padding-top: 4px; }
ul.check-steps { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
/* One badge column for every step (as wide as "Skipped"), so every title starts at the same place. */
ul.check-steps li { display: grid; grid-template-columns: 4.4rem minmax(0, 1fr); gap: 4px 12px; align-items: baseline; }
@media (max-width: 600px) { ul.check-steps li { grid-template-columns: minmax(0, 1fr); } }
.panel .registration > .row-actions { margin-top: 14px; }
ul.check-steps li .badge { justify-self: start; }
ul.check-steps .step-detail { display: block; margin-top: 2px; color: var(--read); font-size: .9rem; }
ul.check-steps li.step-failed .step-detail { color: var(--bad); }
ul.check-steps li.step-skipped strong, ul.check-steps li.step-skipped .step-detail { color: var(--muted); }
.panel .registration { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.panel .registration h3 { margin: 0 0 6px; font-size: 1rem; }
.panel .registration .secret-row { margin-top: 8px; }
.panel p.approval { margin: 6px 0 0; max-width: 46ch; }
#app td button.link { white-space: nowrap; }
/* Long addresses (the launch URL with its ?org=) wrap inside the panel, never clipped. */
#app .panel p code, #app .panel .secret { overflow-wrap: anywhere; }
#app .mode-switch { margin-top: 6px; }
#app .mode-switch button { white-space: nowrap; }

/* Settings > EMR: a card per connected EMR (what it does now and its actions at the top, who orders from it, details
   folded away), then the way to connect one. */
.conn-card .conn-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px 24px; flex-wrap: wrap; }
.conn-card .conn-head h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; }
.conn-card p.conn-status { margin: 2px 0 0; max-width: 62ch; }
.conn-card .conn-actions { flex-wrap: nowrap; }
.conn-card .check-out:not(:empty) { margin-top: 16px; }
.conn-card > h3 { margin: 22px 0 8px; font-size: .78rem; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--quiet); }
/* Who orders from this EMR: the settings table pattern; a pending row is tinted, its actions on the right. */
.conn-card table.conn-people td.end .row-actions { justify-content: flex-end; flex-wrap: nowrap; }
.conn-card table.conn-people tr.pending td { background: rgba(227,164,59,.06); }
.conn-card table.conn-people p.approval { margin: 6px 0 0; max-width: 46ch; }
details.conn-details { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
details.conn-details > summary { cursor: pointer; color: var(--muted); font-weight: 500; }
details.conn-details > summary:hover { color: var(--ink); }
details.conn-details[open] > summary { margin-bottom: 14px; }
details.conn-details dl.kv { margin-bottom: 18px; }
details.conn-details form.results-setting { padding-top: 14px; border-top: 1px solid var(--line); }
details.conn-details form.results-setting h4 { margin: 0 0 6px; font-size: 1rem; }
details.conn-details .conn-danger { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.connect-ways { display: grid; gap: 16px; margin-top: 14px; align-items: start; }
.connect-ways.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.connect-way { border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.connect-way h4 { margin: 0 0 6px; font-size: 1rem; }
.connect-fold .connect-body { padding: 4px 24px 24px; }
@media (max-width: 900px) { .connect-ways.two { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .conn-card .conn-actions { width: 100%; }
  .conn-card .conn-actions > button { flex: 1; }
  .conn-card .conn-actions > button:only-child { padding: 12px 16px; }
}
.connect-body > div > p:first-child, section.panel > div:not(.row) > p:first-child { margin-top: 12px; }
.connect-way .row-actions { margin-top: 12px; }
#app input.mono { font-family: var(--mono); font-size: .9rem; }
@media (max-width: 560px) { .connect-fold .connect-body { padding: 4px 18px 18px; } }

/* Mid-card, this table's last row keeps its bottom padding (the "last item" rule is for a list that ends its panel),
   so every row is centered with equal space above and below. */
@media (min-width: 601px) { .conn-card table.conn-people tbody tr:last-child > td { padding-bottom: 13px; } }
@media (max-width: 600px) { .conn-card table.stack.conn-people tbody tr:last-child { padding-bottom: 14px; } .conn-card table.stack.conn-people tbody tr:last-child > td { padding-bottom: 3px; } }
/* On a phone the stacked row is tinted as one block, not cell by cell. */
@media (max-width: 600px) {
  .conn-card table.stack.conn-people tr.pending { background: rgba(227,164,59,.06); border-radius: 10px; margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-bottom-color: transparent; }
  .conn-card table.stack.conn-people tr.pending td { background: none; }
}
/* Here "Applies to" is always a labelled row on a phone, badge alone or with its sentence, so both kinds of row match. */
@media (max-width: 600px) {
  .conn-card table.stack.conn-people td:not(:first-child):has(> .badge:only-child) { grid-column: 1 / -1; grid-row: auto; padding-bottom: 3px; justify-self: stretch; text-align: left; }
  .conn-card table.stack.conn-people td:not(:first-child):has(> .badge:only-child)::before { content: attr(data-label) !important; }
}
/* Right under the people table, the details line sits where a row divider would: no gap of its own on top of the last
   row's padding. With no table (no one yet), it keeps its usual space. */
.conn-card .table-wrap:has(> table.conn-people) { margin-bottom: 0; }
.conn-card .table-wrap:has(> table.conn-people) + details.conn-details { margin-top: 0; }
/* Tables in a card start and end on the card's text edge, like its headings (a tinted row keeps an inset inside its tint). */
@media (min-width: 601px) {
  .panel table th:first-child, .panel table td:first-child { padding-left: 0; }
  .panel table th:last-child, .panel table td:last-child { padding-right: 0; }
  /* A tinted row keeps its text on the same edge as the others; its tint reaches 12px past each side. */
  .panel table tr.pending td:first-child { box-shadow: -12px 0 0 rgba(227,164,59,.06); }
  .panel table tr.pending td:last-child { box-shadow: 12px 0 0 rgba(227,164,59,.06); }
}
/* A badge that opens a line has no gap before it. */
p > .badge:first-child { margin-left: 0; }
/* Every full-width button is one size: the sign-in link button and the pay page's buttons match the rest. */
main.auth button.wide { font-size: inherit; }
@media (max-width: 560px) { body.standalone .actions > button { padding: 12px 16px; } }

@media (min-width: 601px) { .conn-card .table-wrap:has(> table.conn-people) { overflow: visible; } }
dl.facts dd .fact-note { display: block; margin-top: 6px; color: var(--read); font-size: .9rem; line-height: 1.45; }
/* The step cards' headings to their first label: one distance (an empty chart-diagnoses holder doesn't count). */
#app .panel > h2 + [hidden] + label { margin-top: var(--gap-head); }
/* Phone top bar: the practice's name beside the wordmark, cut short if long. */
header.top .top-practice { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--read); font-weight: 500; font-size: .92rem; }
/* Phone list cards: a label column wide enough for "Date of birth". */
@media (max-width: 600px) {
  #app .table-wrap.list table.stack td:not(:first-child)[data-label]:not([data-label=""]) { padding-left: calc(6.4rem + 8px); text-indent: calc(-6.4rem - 8px); }
  #app .table-wrap.list table.stack td:not(:first-child)[data-label]:not([data-label=""])::before { min-width: 6.4rem; }
}


/* An on/off switch (Patient emails): a checkbox drawn as a track and knob; mixed shows the knob centred. */
input.toggle { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 40px; height: 24px; margin: 0; padding: 0; border: 0; border-radius: 12px; background: var(--line-2); cursor: pointer; vertical-align: middle; transition: background var(--dur, .15s) var(--ease, ease); }
input.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform var(--dur, .15s) var(--ease, ease); }
input.toggle:checked { background: var(--accent); }
input.toggle:checked::after { transform: translateX(16px); }
input.toggle:indeterminate { background: var(--accent-2); }
input.toggle:indeterminate::after { transform: translateX(8px); }
input.toggle:disabled { opacity: .6; cursor: progress; }
input.toggle:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; }
.toggle-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0 16px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.toggle-head label { display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.toggle-list { list-style: none; margin: 0 0 var(--gap-actions, 16px); padding: 0; }
.toggle-list li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.toggle-list label { display: flex; flex-direction: column; gap: 2px; cursor: pointer; min-width: 0; }
.patient-email { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: var(--gap-actions, 16px); padding-top: 16px; border-top: 1px solid var(--line); }
.patient-email > .ico { flex: none; color: var(--muted); }
.patient-email > span { flex: 1 1 220px; }