/* ClearFrank Verify — layered on top of style.css, which supplies the tokens, nav, panels,
   search box, diagnostic grid and footer. Only what's new to the compliance layer lives here. */

:root {
  --warn: #b45309;
  --warn-soft: #fef3c7;
  --bad: #dc2626;
  --bad-soft: #fee2e2;
}

@media (prefers-color-scheme: dark) {
  :root {
    --warn: #fbbf24;
    --warn-soft: rgba(251, 191, 36, 0.14);
    --bad: #f87171;
    --bad-soft: rgba(248, 113, 113, 0.14);
  }
}

/* ---- Nav tabs (the second tab lives here) ---- */

.nav-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
}

.nav-tabs a {
  text-decoration: none;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 999px;
}

.nav-tabs a.active {
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--shadow);
}

@media (max-width: 720px) {
  /* .nav-inner is a space-between flex row with no wrapping, so the tab pill had nowhere to go
     and pushed the page 99px wider than a 375px screen. Everything then looked off-centre,
     because it was: the whole document was wider than the viewport. */
  .nav-inner { flex-wrap: wrap; row-gap: 12px; }
  .nav-tabs { order: 3; width: 100%; justify-content: center; }
  .nav-inner .btn-nav { order: 2; }
}

.verify-hero .accent-line { color: var(--accent); }

.back-link {
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 0.88rem;
  cursor: pointer;
  padding: 0 0 12px;
}
.back-link:hover { color: var(--text); }

.muted-line { color: var(--muted); font-size: 0.85rem; }

/* ---- Lane picker ---- */

.lane-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.lane-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  padding: 24px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  cursor: pointer;
  color: var(--text);
  transition: border-color 0.15s, transform 0.15s;
}
.lane-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.lane-card strong { font-size: 1.08rem; }
.lane-card > span:not(.lane-icon):not(.lane-go) { color: var(--muted); font-size: 0.92rem; }

.lane-icon { width: 30px; height: 30px; color: var(--accent); }
.lane-icon svg { width: 100%; height: 100%; }

.lane-go {
  margin-top: 6px;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lane-go .icon { width: 16px; height: 16px; }
.lane-go .icon svg { width: 100%; height: 100%; }

/* ---- Marketplace / insurer tiles ---- */

.market-grid,
.insurer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

.market-tile,
.insurer-tile {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
  padding: 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  cursor: pointer;
  color: var(--text);
  text-align: left;
  border-left: 4px solid var(--mk, var(--border));
}
.market-tile:hover,
.insurer-tile:hover { border-color: var(--accent); border-left-color: var(--mk, var(--accent)); }
.market-tile.selected { border-color: var(--accent); background: var(--accent-soft); }

.market-name,
.insurer-name { font-weight: 700; }
.market-programme { color: var(--muted); font-size: 0.8rem; }

.market-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--muted);
  margin-bottom: 14px;
}

/* ---- Profile preview ---- */

.profile-preview {
  margin-top: 22px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
}
.profile-preview h3 { margin: 0 0 6px; }
.profile-note { color: var(--muted); font-size: 0.85rem; margin: 0 0 14px; }

.profile-checks { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }

.profile-check {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 0.92rem;
}

.profile-sev {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  text-align: center;
  background: var(--border);
  color: var(--muted);
}
.profile-check.required .profile-sev { background: var(--accent-soft); color: var(--accent); }

/* ---- Value card ---- */

.value-card {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
}

.value-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
.value-head .icon { width: 22px; height: 22px; color: var(--accent); flex: none; }
.value-head .icon svg { width: 100%; height: 100%; }

.value-numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; }
.value-numbers > div { display: flex; flex-direction: column; gap: 2px; }
.value-num { font-size: 1.4rem; font-weight: 700; }
.value-lbl { font-size: 0.8rem; color: var(--muted); }
.value-net .value-num { color: var(--good); }

/* ---- Demo bar ---- */

.demo-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
  margin-bottom: 18px;
}
.demo-bar strong { display: block; font-size: 0.9rem; }
.demo-bar span { color: var(--muted); font-size: 0.85rem; }
.demo-buttons { display: flex; gap: 8px; flex-wrap: wrap; }

.demo-btn {
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.demo-btn:hover { border-color: var(--accent); color: var(--accent); }

.sim-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 18px;
}
.sim-banner .icon { width: 20px; height: 20px; flex: none; }
.sim-banner .icon svg { width: 100%; height: 100%; }

/* A simulated run hides the "install the app and scan this" column, so the diagnostic grid
   collapses to a single full-width column rather than leaving half the panel empty. */
.diagnostic-grid.sim-only { grid-template-columns: 1fr; }

/* ---- Live checks ---- */

.checks-running {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  background: var(--panel);
}
.checks-running-head { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 10px; }

.running-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  padding: 5px 0;
}
.running-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.running-sev { margin-left: auto; font-size: 0.72rem; text-transform: uppercase; color: var(--muted); }

/* ---- Result ---- */

.result-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 22px;
  border-radius: var(--radius);
  margin-bottom: 20px;
  border: 1.5px solid var(--border);
}
.result-hero.pass { background: var(--good-soft); border-color: var(--good); }
.result-hero.notes { background: var(--warn-soft); border-color: var(--warn); }
.result-hero.fail { background: var(--bad-soft); border-color: var(--bad); }

.result-hero-icon { width: 34px; height: 34px; flex: none; }
.result-hero-icon svg { width: 100%; height: 100%; }
.result-hero.pass .result-hero-icon { color: var(--good); }
.result-hero.notes .result-hero-icon { color: var(--warn); }
.result-hero.fail .result-hero-icon { color: var(--bad); }

.result-outcome { font-size: 1.35rem; font-weight: 700; }
.result-device { color: var(--muted); font-size: 0.9rem; }

.result-cert { margin-left: auto; text-align: right; }
.result-cert span { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.result-cert strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.05rem; }

.blockers {
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  background: var(--bad-soft);
  color: var(--bad);
  margin-bottom: 18px;
  font-size: 0.9rem;
}
.blockers ul { margin: 8px 0 0; padding-left: 18px; }

.verified-value {
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-alt);
  margin-bottom: 18px;
}
.verified-value strong { display: block; margin-bottom: 4px; }
.verified-value span { color: var(--muted); font-size: 0.88rem; }

.result-checks { display: grid; gap: 8px; margin-bottom: 22px; }

.result-check {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
}
.result-check .icon { width: 20px; height: 20px; }
.result-check .icon svg { width: 100%; height: 100%; }
.result-check.pass .icon { color: var(--good); }
.result-check.fail .icon { color: var(--bad); }
.result-check.unknown .icon { color: var(--warn); }
.result-check.fail { border-color: var(--bad); }

.result-sev { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }

.cert-share,
.outbound {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
  margin-bottom: 16px;
}
.outbound-head { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 8px; }
.cert-share p,
.outbound p { margin: 0 0 12px; font-size: 0.9rem; color: var(--muted); }

.outbound pre {
  margin: 0;
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: auto;
  max-height: 320px;
  font-size: 0.78rem;
  line-height: 1.5;
}

/* ---- Commercial section ---- */

.commercial { padding: 70px 24px; background: var(--bg-alt); border-top: 1px solid var(--border); }

.commercial-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.commercial-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
}
.commercial-card h3 { margin: 10px 0 12px; font-size: 1.15rem; }
.commercial-card p { color: var(--muted); font-size: 0.94rem; margin: 0 0 14px; }
.commercial-card ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 0.9rem; }
.commercial-card li { margin-bottom: 7px; }

.commercial-tag {
  display: inline-block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 4px 10px;
  border-radius: 999px;
}

.commercial-note {
  max-width: 900px;
  margin: 24px auto 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.92rem;
}

/* ---- Certificate page ---- */

.cert-page { max-width: 820px; margin: 0 auto; padding: 48px 24px 80px; }

.cert-lookup { margin-bottom: 28px; }
.cert-lookup label { display: block; font-weight: 600; margin-bottom: 8px; font-size: 0.9rem; }

.cert-card {
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 26px;
  box-shadow: var(--shadow);
}
.cert-card.pass { border-color: var(--good); }
.cert-card.notes { border-color: var(--warn); }
.cert-card.fail { border-color: var(--bad); }

.cert-head { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.cert-head-icon { width: 34px; height: 34px; flex: none; }
.cert-head-icon svg { width: 100%; height: 100%; }
.cert-card.pass .cert-head-icon { color: var(--good); }
.cert-card.notes .cert-head-icon { color: var(--warn); }
.cert-card.fail .cert-head-icon { color: var(--bad); }

.cert-outcome { font-size: 1.4rem; font-weight: 700; }
.cert-line { color: var(--muted); font-size: 0.9rem; }
.cert-ref { margin-left: auto; text-align: right; }
.cert-ref span { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.cert-ref strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.05rem; }

.cert-rows { padding: 20px 0; display: grid; gap: 2px; }
.cert-row { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px dashed var(--border); font-size: 0.92rem; }
.cert-row span { color: var(--muted); }
.cert-row strong { text-align: right; word-break: break-word; }

.cert-sig {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
  border: 1px solid var(--border);
}
.cert-sig .icon { width: 20px; height: 20px; color: var(--muted); flex: none; }
.cert-sig .icon svg { width: 100%; height: 100%; }
.cert-sig code { display: block; font-size: 0.72rem; word-break: break-all; margin: 4px 0 6px; color: var(--muted); }

.cert-empty {
  padding: 40px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}
.cert-empty.error { color: var(--bad); border-color: var(--bad); }

/* The pre-cover condition baseline: what was already wrong the day cover started. */
.verified-value.baseline ul { margin: 10px 0 0; padding-left: 18px; color: var(--text); font-size: 0.88rem; }
.verified-value.baseline li { margin-bottom: 4px; }

/* ---- Detected context ---- */

.context-chip {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  margin-bottom: 18px;
}
.context-chip .icon { width: 20px; height: 20px; color: var(--accent); flex: none; }
.context-chip .icon svg { width: 100%; height: 100%; }
.context-chip strong { display: block; font-size: 0.92rem; }
.context-chip span { color: var(--muted); font-size: 0.85rem; }

.context-record {
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
  margin-bottom: 18px;
}
.context-record.flagged { border-color: var(--warn); background: var(--warn-soft); }

.context-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.context-rows > div { display: flex; flex-direction: column; gap: 2px; }
.context-rows span { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }

.context-note { margin: 12px 0 0; font-size: 0.9rem; }
.context-caveat { margin: 10px 0 0; font-size: 0.8rem; color: var(--muted); line-height: 1.5; }

/* ---- Brand marks (see public/brand.js and assets/clearfrank-brand/) ---- */

.cf-lockup-mark,
.cf-stamp-mark { display: inline-flex; }
.cf-lockup-mark svg { width: 28px; height: 28px; display: block; }
.cf-stamp-mark svg { width: 22px; height: 22px; display: block; }

/* Clear light, Frank bold. The weight break never varies. */
.cf-wordmark { letter-spacing: -0.01em; }
.cf-clear { font-weight: 300; }
.cf-frank { font-weight: 700; }

.cf-badge { display: inline-block; vertical-align: middle; flex: none; }

.cf-verified-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--good);
  background: var(--good-soft);
  border-radius: 999px;
  padding: 5px 12px 5px 7px;
}

/* The stamp lockup — mark to the right, signing the name off. Certificates and quote footers
   only, per the brand sheet. */
.cf-stamp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  color: var(--text);
}

/* ---- Verify: the dark register ------------------------------------------------------------
   Sell-my-device stays white — it's the consumer journey and it's working. Verify's hero goes
   dark because its audience is a marketplace trust team or an underwriter, and the change of
   register does the "this is a different product" work at a glance.

   The flow below the hero, and the certificate, stay light on purpose: the certificate is a
   document that gets forwarded, embedded and printed, and a black document reads as a product
   skin rather than a record. */

.verify-hero {
  background: var(--brand-ink, #0b1220);
  color: #fff;
  border-bottom: 0;
}
.verify-hero h1 { color: #fff; }
.verify-hero .accent-line { color: #5b8def; }
.verify-hero .lead { color: #94a0b8; }
.verify-hero .badge-pill {
  background: rgba(91, 141, 239, 0.16);
  color: #a8c5ff;
  border-color: rgba(168, 197, 255, 0.28);
}

@media (prefers-color-scheme: dark) {
  .verify-hero { background: #070b13; }
}

/* The real CF mark replaces the placeholder "C" tile, so the tile's own chrome has to go —
   the mark carries its own clear space (stroke width x2) and shouldn't sit in a box. */
.brand-mark {
  background: none;
  border: 0;
  border-radius: 0;
  /* 40px, not the 30 it started at. Two reasons, one of them not a matter of taste: 40 is a
     defined step on the brand sheet's scale ladder (96/64/40/28/16) and 30 was never on it.
     The other is that this mark is mostly negative space — an open C with the F floating inside
     it — so it carries less visual weight than a solid logo in the same box and reads smaller
     than it measures. At 30px the F's three bars were about 3px each with 3px gaps, close to
     where they start to merge; at 40 they stay clearly separate. */
  width: 40px;
  height: 40px;
  padding: 0;
}
.brand-mark svg { width: 100%; height: 100%; display: block; }

/* .brand is font-weight:700 in style.css, which would flatten the Clear/Frank break. */
.brand { font-weight: 400; }
.brand .cf-wordmark { font-size: 1.22rem; }

/* A wrapped mobile nav is already two rows tall; a full-size mark on top of that pushes the
   content too far down the screen, so it steps back to the ladder's 28. */
@media (max-width: 720px) {
  .brand-mark { width: 32px; height: 32px; }
  .brand .cf-wordmark { font-size: 1.12rem; }
}

/* ---- The certificate as a document ---------------------------------------------------------
   Brand rule: "serif belongs to documents that get signed, sans to anything a customer touches."
   The certificate is the most document-like thing in the system — it gets forwarded to a
   marketplace, attached to a claim file, printed. So the card is set in the serif; the page
   chrome around it stays sans, because that part is still an interface. */

.cert-card {
  font-family: Georgia, "Times New Roman", serif;
}
.cert-card .cert-outcome { font-family: Georgia, "Times New Roman", serif; letter-spacing: -0.01em; }
.cert-card .result-sev,
.cert-card .outbound-head {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
/* The reference is an identifier, not prose — it stays monospace so it can be read out and typed. */
.cert-card .cert-ref strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.cert-outcome-row { display: flex; align-items: center; gap: 12px; }

/* Signed off at the foot of the document, per the brand sheet's second lockup. */
.cert-stamp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.cert-stamp-note {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.78rem;
  color: var(--muted);
  max-width: 46ch;
}

/* ---- Venue tiles: official logo, or a wordmark when the file isn't there ---- */

.tile-face {
  display: flex;
  align-items: center;
  min-height: 26px;
  margin-bottom: 2px;
}
.tile-logo {
  /* A DEFINITE height, not max-height. The tile is a column flex box with align-items:flex-start,
     so the face shrinks to its content; with only `max-height` the image's height is indefinite
     and `width:auto` + `max-width:100%` becomes circular — parent width depends on the image,
     image width depends on the parent. Chrome resolves that to 0x0 and the logo vanishes while
     still reporting as loaded. Pinning the height lets width come from the intrinsic ratio. */
  height: 24px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
/* The fallback carries the venue's own colour, so a logo-less tile still reads as that brand. */
.tile-name { font-weight: 700; color: var(--mk, var(--text)); }

/* Logos are supplied on white; in dark mode most vendor marks need a light plate to stay legible
   rather than being inverted, which would misrepresent the brand. */
@media (prefers-color-scheme: dark) {
  .tile-logo { background: #fff; border-radius: 4px; padding: 3px 5px; }
}

/* ---- Detected-device shortlist (both flows) ---- */

.detect-card {
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  margin-bottom: 18px;
}
.detect-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.detect-head .icon { width: 20px; height: 20px; color: var(--accent); flex: none; }
.detect-head .icon svg { width: 100%; height: 100%; }
.detect-head strong { display: block; font-size: 0.95rem; }
.detect-head span { color: var(--muted); font-size: 0.85rem; }

.detect-options { display: grid; gap: 8px; }
.detect-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text);
  font-size: 0.92rem;
  cursor: pointer;
}
.detect-option:hover { border-color: var(--accent); }
.detect-option .cf-thumb { width: 30px; height: 30px; }

.detect-note { margin: 12px 0 0; font-size: 0.8rem; color: var(--muted); }

/* The photographs argument sits apart from the body copy — it's the competitive point, not part
   of the explanation. */
.commercial-contrast {
  border-left: 3px solid var(--accent);
  padding-left: 14px;
  margin: 0 0 14px;
  font-size: 0.92rem;
  color: var(--muted);
}
.commercial-contrast strong { color: var(--text); }

/* ---- Gift Aid declaration (donate checkout) ---- */

.giftaid-block {
  border: 1px solid var(--good);
  background: var(--good-soft);
  border-radius: var(--radius-sm);
  padding: 18px;
  margin: 20px 0;
}
.giftaid-block h3 { margin: 0 0 8px; font-size: 1rem; }
.giftaid-block p { margin: 0 0 12px; font-size: 0.9rem; color: var(--muted); }
.giftaid-block .hint { margin: 12px 0 0; font-size: 0.82rem; }

.giftaid-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.86rem;
  line-height: 1.5;
  cursor: pointer;
}
.giftaid-check input { margin-top: 3px; flex: none; width: 18px; height: 18px; }

/* ---- Market switcher (sell flow context chip) ---- */

.context-chip .market-switch {
  margin-left: auto;
  display: inline-flex;
  gap: 3px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  flex: none;
}
.market-opt {
  border: 0;
  background: none;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}
.market-opt.active { background: var(--accent); color: var(--accent-text); }

/* The chip is a flex row; without min-width:0 a long sentence can't shrink its column and pushes
   out of the card instead of wrapping inside it. */
.context-chip > div { min-width: 0; }
.context-chip .chip-copy { flex: 1; min-width: 0; }
.context-chip .chip-line { display: block; }
.context-chip .chip-detail { display: block; color: var(--muted); font-size: 0.85rem; }

@media (max-width: 620px) {
  /* flex-wrap alone wasn't enough: .chip-copy could shrink indefinitely, so the switcher stayed
     on the same line and squeezed the sentence into a three-words-per-line column. Giving the
     copy a full-width basis forces the switcher onto its own row instead. */
  .context-chip { flex-wrap: wrap; }
  .context-chip .chip-copy { flex: 1 0 100%; }
  .context-chip .market-switch { margin-left: 30px; }
}

/* ---- Sticky header ------------------------------------------------------------------------
   The nav follows the page. It needs a stacking context above the panels, and an opaque
   background — the hero behind it is ink on /verify, and a translucent bar would smear. */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--panel);
}

/* Everything we scroll to must clear the sticky bar, or scrollIntoView parks it underneath —
   the venue profile, the detected-device card and each step of the flow all land here. */
:root { --nav-clearance: 96px; }

#start,
.panel,
.profile-preview,
.detect-card,
.context-chip,
.cert-card {
  scroll-margin-top: var(--nav-clearance);
}

/* The mobile nav wraps to two rows, so it needs more clearance. */
@media (max-width: 720px) {
  :root { --nav-clearance: 140px; }
}

/* ---- Site login ---- */

.login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }

.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 34px;
  box-shadow: var(--shadow);
  text-align: center;
}
.login-mark { display: inline-flex; width: 44px; height: 44px; margin-bottom: 14px; }
.login-mark svg { width: 100%; height: 100%; }
.login-card h1 { margin: 0 0 6px; font-size: 1.5rem; font-weight: 400; }
.login-lead { color: var(--muted); font-size: 0.92rem; margin: 0 0 22px; }
.login-card form { text-align: left; }
.login-card label { display: block; font-weight: 600; font-size: 0.88rem; margin-bottom: 6px; }
.login-card .primary { width: 100%; margin-top: 16px; }

.login-error {
  margin: 12px 0 0;
  font-size: 0.88rem;
  color: var(--bad);
  background: var(--bad-soft);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.login-note { margin: 22px 0 0; font-size: 0.82rem; color: var(--muted); }

/* ---- Deal card: mechanism line + collapsed alternatives ---- */

/* What the money actually is, sitting with the number rather than in the small print. */
.deal-mechanism {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  margin: -2px 0 6px;
}
.deal-network .deal-mechanism { color: var(--net, var(--text)); }

.deal-more {
  margin-top: 10px;
  border: 0;
  background: none;
  padding: 4px 0;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.deal-more:hover { text-decoration: underline; }
.deal-more .icon { width: 14px; height: 14px; }
.deal-more .icon svg { width: 100%; height: 100%; }

/* ---- Channel colours ------------------------------------------------------------------------
   Four near-identical white cards made the options read as variations of one thing. A colour per
   channel gives each a identity before a word is read.

   Green on the recycler is not decoration and not a coincidence: the brand sheet reserves
   #16A34A for "ClearFrank has committed" — a device verified or a price locked — and the
   recycler card IS the guaranteed cash price. The one card that never changes is the one wearing
   the guarantee colour.

   Colour is never the only signal: every card also carries its own icon and label, so this reads
   the same to anyone who can't distinguish them. */

.deal-card[data-channel="retailer"] { border-left: 4px solid var(--accent); }
.deal-card[data-channel="retailer"] .deal-amount,
.deal-card[data-channel="retailer"] .deal-mechanism { color: var(--accent); }

.deal-card[data-channel="recycler"] { border-left: 4px solid var(--good); }
.deal-card[data-channel="recycler"] .deal-amount,
.deal-card[data-channel="recycler"] .deal-mechanism { color: var(--good); }

/* Gold, not yellow. Yellow on white fails contrast at text sizes; this keeps the warmth and stays
   readable in both themes. */
:root { --give: #b7791f; --give-soft: #fdf6e7; }
@media (prefers-color-scheme: dark) {
  :root { --give: #f0b429; --give-soft: rgba(240, 180, 41, 0.12); }
}

.deal-card[data-channel="donate"] { border-left: 4px solid var(--give); }
.deal-card[data-channel="donate"] .deal-amount,
.deal-card[data-channel="donate"] .deal-mechanism { color: var(--give); }
.deal-card[data-channel="donate"].selected { background: var(--give-soft); }

/* The network card already wears its operator's own colour via --net (Vodafone red, O2 blue,
   EE teal), set on the element in renderDeals. Nothing to add here. */
.deal-card[data-channel="network"] .deal-amount { color: var(--net, var(--accent)); }