@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Lora:wght@500;600&display=swap');

/* Stream A — Engasjementsmotor, iLexiBox skin (clean). Scoped under .tp-modes.
   Two themes via [data-tp-theme]: light (default) and dark. */

/* ---- LIGHT (default) ---- */
.tp-modes {
  --tp-bg:#f8f8f6; --tp-ink:#2a2a25; --tp-surface:#ffffff; --tp-cardAlt:#f0efea;
  --tp-border:#e0ded7; --tp-soft:#d3d1c9; --tp-btn:#4c4c43; --tp-btnSoft:#e7e5de;
  --tp-accent:#C15F3C; --tp-accentHover:#a8502f; --tp-accentSoft:#f3e1d9;
  --tp-green:#3a9687; --tp-greenTint:#eaf7f5; --tp-red:#c54c3f; --tp-orange:#ec9231;
  --tp-e1:0 1px 2px rgba(42,42,37,.05),0 2px 6px rgba(42,42,37,.06);
  --tp-e2:0 2px 4px rgba(42,42,37,.06),0 10px 24px rgba(42,42,37,.10);
  --tp-hl:inset 0 1px 0 rgba(255,255,255,.75);
  --tp-serif:'Lora',Georgia,serif; --tp-mono:'DM Mono',ui-monospace,monospace;

  color:var(--tp-ink); font-family:var(--tp-mono); line-height:1.55;
  max-width:760px; margin:0 auto; background:var(--tp-bg);
}
.tp-modes *, .tp-modes *::before, .tp-modes *::after { box-sizing:border-box; }

/* ---- DARK (auto-synced from the host app's html[data-theme="dark"]) ---- */
.tp-modes[data-tp-theme="dark"] {
  --tp-bg:#18181a; --tp-ink:#e8e6df; --tp-surface:#242428; --tp-cardAlt:#232327;
  --tp-border:#41414a; --tp-soft:#41414a; --tp-btn:#d4d1c6; --tp-btnSoft:#2c2c30;
  --tp-accent:#d97a55; --tp-accentHover:#c2683f; --tp-accentSoft:#3a2620;
  --tp-green:#3a9687; --tp-greenTint:rgba(58,150,135,.15); --tp-red:#c54c3f; --tp-orange:#ec9231;
  --tp-e1:0 1px 2px rgba(0,0,0,.45);
  --tp-e2:0 0 0 1px rgba(255,255,255,.04),0 10px 28px rgba(0,0,0,.55);
  --tp-hl:inset 0 1px 0 rgba(255,255,255,.06);
}

/* ---- tabs + theme toggle ---- */
.tp-toprow { display:flex; align-items:center; gap:8px; justify-content:center; margin-bottom:20px; flex-wrap:wrap; }
.tp-tabs { display:flex; gap:8px; }
.tp-tab {
  appearance:none; font:inherit; font-size:14px; font-family:var(--tp-mono);
  padding:9px 16px; border-radius:999px; cursor:pointer;
  border:1.5px solid var(--tp-border); background:var(--tp-btnSoft); color:var(--tp-ink);
  box-shadow:var(--tp-e1);
}
.tp-tab[aria-selected="true"] { background:var(--tp-btn); color:var(--tp-bg); border-color:var(--tp-ink); }
.tp-tab:focus-visible, .tp-theme-toggle:focus-visible { outline:2px solid var(--tp-accent); outline-offset:2px; }
.tp-theme-toggle {
  appearance:none; cursor:pointer; border:1.5px solid var(--tp-border); background:var(--tp-btnSoft);
  color:var(--tp-ink); width:38px; height:38px; border-radius:999px; display:inline-flex;
  align-items:center; justify-content:center; box-shadow:var(--tp-e1); padding:0;
}

/* ---- buttons ---- */
.tp-btn {
  appearance:none; cursor:pointer; font:inherit; font-family:var(--tp-mono); font-size:14px;
  border:1px solid var(--tp-border); background:var(--tp-surface); color:var(--tp-ink);
  padding:10px 16px; border-radius:12px; box-shadow:var(--tp-e1);
}
.tp-btn:hover { background:var(--tp-cardAlt); }
.tp-btn:active { transform:scale(.985); }
.tp-btn:focus-visible { outline:2px solid var(--tp-accent); outline-offset:2px; }
.tp-btn--primary { background:var(--tp-accent); border-color:var(--tp-accent); color:#fff; }
.tp-btn--primary:hover { background:var(--tp-accentHover); }
.tp-btn--lg { font-size:15px; padding:12px 22px; }
.tp-btn:disabled { opacity:.5; cursor:default; }

/* ---- progress header ---- */
.tp-prog__top { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.tp-prog__title { font-family:var(--tp-serif); font-weight:600; font-size:22px; margin:0; }
.tp-prog__count { font-family:var(--tp-mono); font-size:12px; opacity:.62; }
.tp-bar { height:8px; background:var(--tp-btnSoft); border:1px solid var(--tp-border); border-radius:999px; overflow:hidden; margin:8px 0 20px; }
.tp-bar__fill { height:100%; background:var(--tp-accent); transition:width .5s cubic-bezier(.2,.7,.2,1); }

/* ---- next-stop card ---- */
.tp-hero { background:var(--tp-surface); border:1px solid var(--tp-soft); border-radius:16px; padding:14px 16px; box-shadow:var(--tp-e2),var(--tp-hl); margin-bottom:20px; }
.tp-bubble { background:var(--tp-cardAlt); border:1px solid var(--tp-soft); border-radius:12px; padding:10px 13px; box-shadow:var(--tp-e1); }
.tp-kicker { font-family:var(--tp-mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase; opacity:.55; margin-bottom:4px; }
.tp-bubble__msg { font-family:var(--tp-serif); font-size:15px; line-height:1.42; color:var(--tp-ink); }

/* ---- route / legs ---- */
.tp-route { position:relative; }
.tp-route__rail { position:absolute; left:19px; top:42px; bottom:26px; width:2px; background:var(--tp-soft); }
.tp-finish { display:flex; gap:12px; align-items:center; background:var(--tp-surface); border:1px solid var(--tp-accent); border-radius:16px; padding:12px 14px; box-shadow:var(--tp-e2),var(--tp-hl); margin-bottom:10px; position:relative; z-index:1; }
.tp-finish__title { font-family:var(--tp-serif); font-weight:600; font-size:16px; line-height:1.2; }
.tp-finish__sub { font-family:var(--tp-mono); font-size:11.5px; opacity:.6; }
.tp-finish--clickable { cursor:pointer; }
.tp-leg { position:relative; z-index:1; display:grid; grid-template-columns:40px 1fr auto; align-items:center; gap:6px; min-height:52px; padding:2px 6px; border-radius:12px; }
.tp-leg__dot { width:22px; height:22px; border-radius:50%; margin:0 auto; background:var(--tp-surface); border:1px solid var(--tp-soft); display:flex; align-items:center; justify-content:center; color:#b9b6ad; box-shadow:var(--tp-e1); }
.tp-leg__town { font-family:var(--tp-serif); font-size:15.5px; font-weight:600; line-height:1.2; }
.tp-leg__theme { font-family:var(--tp-mono); font-size:11.5px; opacity:.62; }
.tp-leg__state { font-family:var(--tp-mono); font-size:11.5px; opacity:.6; white-space:nowrap; }
.tp-leg--done .tp-leg__dot { background:var(--tp-accent); border-color:var(--tp-accent); color:#fff; }
.tp-leg--done .tp-leg__state { color:var(--tp-accent); opacity:1; }
.tp-leg--current .tp-leg__dot { width:27px; height:27px; border:2px solid var(--tp-accent); background:var(--tp-accentSoft); color:var(--tp-accent); }
.tp-leg--current .tp-leg__town { color:var(--tp-accent); }
.tp-leg--locked .tp-leg__town { opacity:.5; }
.tp-leg--clickable { cursor:pointer; }
.tp-leg--clickable:hover { background:var(--tp-cardAlt); }
.tp-leg--clickable:focus-visible, .tp-finish--clickable:focus-visible { outline:2px solid var(--tp-accent); outline-offset:1px; }
.tp-pill { font-family:var(--tp-mono); font-size:11px; padding:3px 10px; border-radius:999px; background:var(--tp-accentSoft); color:var(--tp-accent); white-space:nowrap; }
.tp-licence { margin:6px 0 18px; padding:14px 16px; border-radius:12px; background:var(--tp-accentSoft); border:1px solid var(--tp-accent); color:var(--tp-accent); font-family:var(--tp-mono); font-size:13.5px; }

/* ---- exam intro ---- */
.tp-card { background:var(--tp-surface); border:1px solid var(--tp-soft); border-radius:16px; padding:20px; box-shadow:var(--tp-e2),var(--tp-hl); margin-bottom:16px; }
.tp-h2 { font-family:var(--tp-serif); font-weight:600; font-size:21px; margin:0 0 6px; }
.tp-sub { font-family:var(--tp-mono); font-size:13px; opacity:.65; line-height:1.5; margin:0; }
.tp-odds { font-family:var(--tp-serif); font-weight:600; font-size:34px; color:var(--tp-red); margin:16px 0 0; line-height:1; }
.tp-odds small { display:block; font-family:var(--tp-mono); font-size:12.5px; font-weight:400; color:var(--tp-ink); opacity:.62; margin-top:4px; }
.tp-facts { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 18px; }
.tp-fact { font-family:var(--tp-mono); font-size:12.5px; background:var(--tp-cardAlt); border:1px solid var(--tp-border); border-radius:999px; padding:5px 12px; color:var(--tp-ink); }

/* ---- exam runner ---- */
.tp-run__bar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.tp-run__pos { font-family:var(--tp-mono); font-size:13px; opacity:.7; }
.tp-timer { font-family:var(--tp-mono); font-variant-numeric:tabular-nums; font-size:17px; font-weight:500; padding:4px 10px; border-radius:8px; background:var(--tp-cardAlt); }
.tp-timer--warn { color:var(--tp-red); background:var(--tp-accentSoft); }
.tp-q__img { display:block; max-width:180px; max-height:180px; margin:0 0 14px; border-radius:8px; }
.tp-q__prompt { font-family:var(--tp-serif); font-size:17px; line-height:1.5; margin:0 0 16px; }
.tp-opts { display:grid; gap:8px; }
.tp-opt { appearance:none; cursor:pointer; font:inherit; font-family:var(--tp-mono); font-size:15px; text-align:left; border:1px solid var(--tp-border); background:var(--tp-surface); color:var(--tp-ink); padding:12px 14px; border-radius:12px; display:flex; gap:10px; align-items:center; box-shadow:var(--tp-e1); }
.tp-opt:hover { background:var(--tp-cardAlt); }
.tp-opt:focus-visible { outline:2px solid var(--tp-accent); outline-offset:1px; }
.tp-opt[aria-pressed="true"] { border-color:var(--tp-accent); background:var(--tp-accentSoft); }
.tp-opt__key { flex:none; width:24px; height:24px; border-radius:6px; background:var(--tp-cardAlt); display:flex; align-items:center; justify-content:center; font-size:12px; opacity:.7; }
.tp-opt[aria-pressed="true"] .tp-opt__key { background:var(--tp-accent); color:#fff; opacity:1; }
.tp-run__foot { display:flex; align-items:center; gap:8px; margin-top:18px; flex-wrap:wrap; }
.tp-run__foot .tp-spacer { flex:1; }
.tp-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(34px,1fr)); gap:6px; margin-top:16px; }
.tp-grid__cell { appearance:none; cursor:pointer; font:inherit; font-family:var(--tp-mono); font-size:12.5px; border:1px solid var(--tp-border); background:var(--tp-surface); color:var(--tp-ink); opacity:.6; height:34px; border-radius:7px; font-variant-numeric:tabular-nums; }
.tp-grid__cell:hover { background:var(--tp-cardAlt); }
.tp-grid__cell:focus-visible { outline:2px solid var(--tp-accent); outline-offset:1px; }
.tp-grid__cell--answered { border-color:var(--tp-accent); color:var(--tp-accent); background:var(--tp-accentSoft); opacity:1; }
.tp-grid__cell--current { box-shadow:inset 0 0 0 2px var(--tp-accent); opacity:1; }
.tp-grid__cell--flagged { border-color:var(--tp-orange); }

/* ---- results ---- */
.tp-banner { border-radius:14px; padding:15px 18px; margin-bottom:14px; }
.tp-banner--pass { background:var(--tp-greenTint); border:1px solid var(--tp-green); }
.tp-banner--fail { background:var(--tp-accentSoft); border:1px solid var(--tp-accent); }  /* never red */
.tp-verdict { font-family:var(--tp-serif); font-weight:600; font-size:20px; margin:0; }
.tp-banner--pass .tp-verdict { color:var(--tp-green); }
.tp-banner--fail .tp-verdict { color:var(--tp-accent); }
.tp-score { font-family:var(--tp-mono); font-size:13.5px; margin:3px 0 0; opacity:.85; }
.tp-h { font-family:var(--tp-serif); font-weight:600; font-size:15px; margin:22px 0 10px; }
.tp-catrow { display:grid; grid-template-columns:1fr 56px; align-items:center; gap:10px; margin-bottom:8px; }
.tp-catname { font-family:var(--tp-mono); font-size:13px; }
.tp-catbar { height:8px; background:var(--tp-btnSoft); border-radius:999px; overflow:hidden; }
.tp-catbar__fill { height:100%; background:var(--tp-green); }
.tp-catbar__fill--weak { background:var(--tp-red); }
.tp-catnum { font-family:var(--tp-mono); font-size:12px; opacity:.6; text-align:right; font-variant-numeric:tabular-nums; }
.tp-review { display:grid; gap:8px; }
.tp-rev { border:1px solid var(--tp-border); border-radius:12px; padding:12px 14px; background:var(--tp-surface); }
.tp-rev--wrong { border-left:3px solid var(--tp-accent); }
.tp-rev--right { border-left:3px solid var(--tp-green); }
.tp-rev__q { font-family:var(--tp-serif); font-size:14.5px; margin:0 0 8px; }
.tp-rev__a { font-family:var(--tp-mono); font-size:13px; margin:2px 0; opacity:.8; }
.tp-rev__a b { font-weight:500; opacity:1; }
.tp-rev__a--good b { color:var(--tp-green); }
.tp-rev__a--bad b { color:var(--tp-accent); }
.tp-note { font-family:var(--tp-mono); font-size:13px; opacity:.7; }
.tp-toast { font-family:var(--tp-mono); font-size:13px; color:var(--tp-green); margin-left:8px; }
.tp-err { font-family:var(--tp-mono); color:var(--tp-red); font-size:14px; padding:16px 0; }

@media (max-width:480px) {
  .tp-odds { font-size:30px; }
  .tp-card { padding:16px; }
  .tp-hero { padding:12px; }
}
@media (prefers-reduced-motion:reduce) {
  .tp-modes *, .tp-modes *::after { animation:none !important; transition:none !important; }
}