/* "app" theme: the client's app look (light blue-grey ground, white cards, blue primary, orange accent).
   Loaded after style.css only for cases with "theme": "app". Colors were sampled from the client's sample videos. */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg: #eef4fd;
  --surface: #ffffff;
  --surface-2: #f6f9fe;
  --line: #dce5f3;
  --card: #ffffff;
  --ink: #121620;
  --ink-muted: #6e7685;
  --text: #121620;
  --text-muted: #6e7685;
  --a: #0b5fe8;
  --b: #f26a1b;
  --hl: #ffe6d2;
  color-scheme: light;
}

body, button, .top, .kicker, .detail .tag, .ver .vl, .key .tag, .note .tag, .ltr, .sharebox, .score .dot {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
}
.top, .kicker, .detail .tag, .ver .vl, .key .tag, .note .tag { letter-spacing: 0.04em; }
h1 { letter-spacing: -0.02em; }

/* The app's quiz progress bar: thick, blue on white. */
.bars { gap: 6px; }
.bars i { height: 8px; border-radius: 4px; background: #ffffff; }
.bars i::after { background: var(--a); }

.brand { color: var(--text); }
.brand svg rect { fill: var(--a); }
.skip { background: var(--a); color: #ffffff; }

.card { border-radius: 20px; box-shadow: 0 1px 2px rgba(18, 22, 32, 0.04); }

/* Answers are white cards; the picked one gets the app's blue outline. */
.opt { background: #ffffff; color: var(--text); box-shadow: inset 0 0 0 2px transparent; }
.opt:hover { background: var(--surface-2); }
.opt.sel.A, .opt.sel.B { background: #ffffff; color: var(--text); box-shadow: inset 0 0 0 3px var(--a); }
.opt.sel.A .ltr { background: var(--a); color: #ffffff; }
.opt.sel.B .ltr { background: var(--b); color: #ffffff; }
.ltr.B { color: #ffffff; }

.chip { background: #ffffff; }
.chip:hover { background: var(--surface-2); }
.chip .meter i { background: var(--line); }
.chip .meter i.on { background: var(--a); }
.mine { background: #ffffff; }

/* The new lab result and the key fact use the app's orange accent. */
.detail .tag, .key .tag { color: var(--b); }
.key { background: var(--hl); color: var(--ink); }
.note { background: #ffffff; }
.note .tag { color: var(--a); }
.ver { background: #ffffff; }
.ver .vl { color: var(--text-muted); }
.ver p { color: #39404d; }

.btn.primary { background: var(--a); color: #ffffff; }
.btn.primary:hover { background: #0a53cc; }
/* "Continue in the app" looks like the app's own orange offer button. */
.btn.primary[data-app] { background: var(--b); color: #ffffff; box-shadow: 0 8px 20px rgba(242, 106, 27, 0.28); }
.btn.primary[data-app]:hover { background: #e05d12; }
.btn.ghost { background: #ffffff; color: var(--a); box-shadow: inset 0 0 0 2px var(--line); }
.btn.ghost:hover { background: var(--surface-2); }

.endcard { background: #ffffff; }
.score li { background: var(--bg); }
.score .dot { background: var(--a); color: #ffffff; }
.score .dot.miss { background: var(--line); color: var(--ink); }

.toast { background: var(--ink); color: #ffffff; }
.sharebox { background: #ffffff; color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.link, .foot, .foot a, .src, .src a { color: var(--text-muted); }
.link:hover { color: var(--text); }

.opt:focus-visible, .btn:focus-visible, .chip:focus-visible, .link:focus-visible,
.sharebox:focus-visible, .src summary:focus-visible { outline-color: var(--a); }