/* =====================================================================
   learn.tranxact.ai

   No palette of its own. Every colour, radius, font and spacing step
   resolves to a token in theme.css, lifted verbatim from the console's
   styles.css — so the training site is the product's design system, and
   the SIMULATED CONSOLE inside it is drawn with the very tokens the real
   console is drawn with. That matters more here than on the help site: a
   learner who is taught a screen that looks like something else has been
   taught to recognise the wrong thing.

   Three surfaces share this sheet and must stay distinguishable:
     the training site's own chrome  — page furniture, cards, quiz
     the simulated console (.sim)    — the product, faithfully
     the coach marks (.walk-*)       — over the top of both

   The simulator is the product. The chrome around it is lighter, wider
   and set in the display face, so nobody mistakes the lesson for the app.
   ===================================================================== */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
}

a { color: var(--mc, var(--accent)); text-underline-offset: 2px; }
code { font-family: var(--font-mono); font-size: .88em; background: var(--wash-2); border-radius: 4px; padding: .08em .38em; }

.skip { position: absolute; inset-inline-start: -9999px; top: 0; z-index: 100; background: var(--accent); color: var(--on-brand); padding: 10px 16px; }
.skip:focus { inset-inline-start: 0; }

/* =====================================================================
   CHROME
   ===================================================================== */
.top {
  position: sticky; top: 0; z-index: 30;
  background: var(--card); border-bottom: 1px solid var(--line);
  padding: 0 22px;
}
.topline { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 9px 0; }

.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.brand svg { display: block; flex: none; }
.logo-word {
  font-family: var(--font-display); font-weight: 700; letter-spacing: .08em;
  color: var(--ink); line-height: 1; white-space: nowrap; font-size: 15px;
}
.logo-word-ai { color: var(--brand-red); }
.brand-sub {
  font-family: var(--font-display); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim);
  padding-inline-start: 10px; margin-inline-start: 2px;
  border-inline-start: 1px solid var(--line); white-space: nowrap;
}

.topnav { display: flex; gap: 2px; margin-inline-start: auto; }
.topnav a { padding: 6px 11px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--text-dim); text-decoration: none; }
.topnav a:hover { color: var(--ink); background: var(--ink-soft); }

.langpick, .themepick {
  font-family: inherit; font-size: 12.5px; color: var(--text-dim);
  background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 8px; cursor: pointer;
}
.langpick:hover, .themepick:hover { color: var(--ink); border-color: var(--line-strong); }

.modtabs {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  border-top: 1px solid var(--line); margin: 0 -22px; padding: 0 22px;
}
.modtabs::-webkit-scrollbar { display: none; }
.modtab {
  padding: 10px 13px 8px; text-decoration: none; white-space: nowrap;
  font-size: 12.5px; font-weight: 600; color: var(--text-dim);
  border-bottom: 3px solid transparent;
}
.modtab:hover { color: var(--ink); }
.modtab.current { color: var(--mc, var(--accent)); border-bottom-color: var(--mc, var(--accent)); }

.wrap { max-width: 1180px; margin: 0 auto; padding: 24px 22px 70px; }
.wrap.wide { max-width: 1500px; }

h1 { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1.18; color: var(--ink); margin: 2px 0 8px; }
h2 { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--ink); margin: 32px 0 10px; }
h3 { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; margin: 20px 0 6px; }
p { margin: 0 0 13px; max-width: 76ch; }
.lede { font-size: 17px; color: var(--text-dim); max-width: 72ch; }
.hint { color: var(--text-dim); font-size: 12.5px; }
.num { text-align: end; font-family: var(--font-mono); }

.page-head { border-inline-start: 4px solid var(--mc, var(--accent)); padding-inline-start: 14px; margin-bottom: 18px; }
.page-head .eyebrow {
  font-family: var(--font-display); font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em; color: var(--mc, var(--accent));
}
.page-head h1 { margin: 3px 0 4px; }

.crumbs { font-size: 12px; margin-bottom: 10px; color: var(--text-dim); }
.crumbs a { color: var(--text-dim); text-decoration: none; }
.crumbs a:hover { color: var(--mc, var(--accent)); text-decoration: underline; }

.btn {
  display: inline-block; font-family: var(--font-display); font-weight: 700;
  font-size: 13.5px; padding: 10px 20px; border-radius: 8px; cursor: pointer;
  background: var(--accent); color: var(--on-brand); border: 1px solid var(--accent); text-decoration: none;
}
.btn:hover { background: var(--petrol-dark); border-color: var(--petrol-dark); }
.btn.ghost { background: transparent; color: var(--mc, var(--accent)); border-color: var(--line-strong); }
.btn.ghost:hover { background: var(--ink-soft); border-color: var(--mc, var(--accent)); }
.btn.big { font-size: 15px; padding: 12px 26px; }

/* =====================================================================
   CATALOGUE
   ===================================================================== */
.hero { padding: 18px 0 6px; }
.hero h1 { font-size: 40px; letter-spacing: -.01em; }
.stat { display: flex; gap: 26px; flex-wrap: wrap; margin: 20px 0 8px; }
.stat b { display: block; font-family: var(--font-mono); font-size: 26px; line-height: 1.1; color: var(--ink); font-weight: 500; }
.stat span { font-family: var(--font-display); font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--text-dim); }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin: 14px 0 28px; }
.card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 13px 15px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
  border-inline-start: 3px solid var(--mc, var(--accent));
  text-decoration: none; color: var(--text);
}
.card:hover { border-color: var(--mc, var(--accent)); box-shadow: 0 2px 10px rgba(var(--shadow-rgb), .07); }
.card h3 { margin: 0; font-size: 14px; color: var(--ink); }
.card p { margin: 0; font-size: 12.5px; color: var(--text-dim); line-height: 1.45; }
.card .meta {
  margin-top: auto; padding-top: 8px;
  font-family: var(--font-display); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim);
}
.card.is-passed { border-inline-start-color: var(--ok); }
.card.is-started { border-inline-start-color: var(--warn); }

.badge {
  float: inline-end; font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  color: var(--ok); background: var(--ok-wash); border: 1px solid var(--ok-line);
  border-radius: 99px; padding: 0 8px; min-width: 22px; text-align: center;
}
.card.is-started .badge, .lessons li.is-started .badge {
  color: var(--warn); background: var(--warn-wash); border-color: var(--warn-line);
}

.bar { display: block; height: 4px; background: var(--wash-2); border-radius: 3px; overflow: hidden; margin-top: 10px; }
.bar span { display: block; height: 100%; width: 0; background: var(--mc, var(--accent)); transition: width .3s; }
.rollup.complete .bar span { background: var(--ok); }

.lessons { list-style: none; margin: 0; padding: 0; }
.lessons li {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--card);
  border: 1px solid var(--line); border-inline-start: 3px solid var(--mc, var(--accent));
  border-radius: var(--radius); margin-bottom: 7px;
}
.lessons li.is-passed { border-inline-start-color: var(--ok); }
.lessons a { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; text-decoration: none; color: var(--ink); }
.lessons a:hover { color: var(--mc, var(--accent)); }
.lessons .sub { color: var(--text-dim); font-size: 12.5px; }
.lessons .grow { flex: 1; }

.level {
  font-family: var(--font-display); font-size: 9.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; color: var(--text-dim);
}
.level.essential { color: var(--accent); border-color: var(--accent); background: var(--ink-soft); }
.level.administrator { color: var(--warn); border-color: var(--warn-line); background: var(--warn-wash); }

.callout {
  display: flex; gap: 11px; padding: 13px 15px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); margin: 16px 0; max-width: 80ch;
}
.callout p:last-child { margin-bottom: 0; }
.callout .ci {
  flex: none; width: 20px; height: 20px; margin-top: 2px;
  display: grid; place-items: center; border-radius: 50%;
  font-family: var(--font-display); font-size: 11px; font-weight: 700; color: var(--on-brand);
}
.note { background: var(--info-wash); border-color: var(--info-line); }
.note .ci { background: var(--info); }
.warn { background: var(--warn-wash); border-color: var(--warn-line); }
.warn .ci { background: var(--warn); }

/* =====================================================================
   THE SIMULATED CONSOLE
   Built from the same tokens as the product, and laid out the way the
   product lays itself out: a card-coloured topbar with the brand and the
   org switcher, module tabs beneath it carrying the module hue, and
   tiles with the module spine down their leading edge.
   ===================================================================== */
.stage {
  border: 1px solid var(--line-strong); border-radius: 12px; overflow: hidden;
  background: var(--paper); box-shadow: 0 6px 26px rgba(var(--shadow-rgb), .10);
  margin: 18px 0 24px;
}
.sim { font-size: 13px; position: relative; min-height: 470px; display: flex; flex-direction: column; }

.sim-topbar { background: var(--card); border-bottom: 1px solid var(--line); padding: 0 14px; }
.sim-topline { display: flex; align-items: center; gap: 10px; padding: 7px 0; flex-wrap: wrap; }
.sim-brand { display: inline-flex; align-items: center; gap: 7px; }
.sim-brand svg { display: block; }
.sim-word { font-family: var(--font-display); font-weight: 700; letter-spacing: .07em; font-size: 12.5px; color: var(--ink); }
.sim-word-ai { color: var(--brand-red); }

.sim-org, .sim-user {
  font-family: inherit; font-size: 12px; color: var(--text-dim);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 7px; padding: 4px 10px; cursor: default; white-space: nowrap;
}
.sim-org { margin-inline-start: auto; }
.sim-org b { color: var(--ink); font-weight: 600; }

.sim-tabs {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  border-top: 1px solid var(--line); margin: 0 -14px; padding: 0 14px;
}
.sim-tabs::-webkit-scrollbar { display: none; }
.stab {
  font-family: inherit; font-size: 11.5px; font-weight: 600; white-space: nowrap;
  background: none; border: 0; border-bottom: 3px solid transparent;
  padding: 8px 10px 6px; color: var(--text-dim); cursor: default;
}
.stab.on { color: var(--mc, var(--accent)); border-bottom-color: var(--mc, var(--accent)); }

.sim-body { flex: 1; padding: 16px 18px; background: var(--paper); }
.sim-view { display: none; }
.sim[data-phase="tiles"] [data-view="tiles"],
.sim[data-phase="list"] [data-view="list"],
.sim[data-phase="form"] [data-view="list"],
.sim[data-phase="form"] [data-view="form"] { display: block; }
.sim[data-phase="form"] [data-view="list"] { filter: saturate(.45) opacity(.5); }

.sim-h1 { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--ink); margin: 0 0 10px; }
.sim-group {
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px;
}
.sim-sec { max-width: 660px; }
.sim-sec h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 11.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--mc, var(--accent));
  border-inline-start: 4px solid var(--mc, var(--accent));
  padding-inline-start: 11px; margin: 0 0 10px;
}
.sim-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 8px; }
.sim-tile {
  font-family: var(--font-display); font-weight: 700; font-size: 12px; text-align: start;
  padding: 10px 12px; cursor: default; color: var(--ink);
  background: var(--card); border: 1px solid var(--line);
  border-inline-start: 3px solid var(--mc, var(--accent)); border-radius: var(--radius);
  min-height: 46px;
}

.sim-crumb { font-size: 11.5px; color: var(--text-dim); margin-bottom: 8px; }
.sim-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.sim-head .sim-h1 { border-inline-start: 4px solid var(--mc, var(--accent)); padding-inline-start: 11px; margin: 0; }
.sim-toolbar { display: flex; gap: 6px; margin-inline-start: auto; flex-wrap: wrap; }
.sim-btn {
  font-family: inherit; font-size: 12px; cursor: default;
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); color: var(--text-dim);
}
.sim-btn.primary { background: var(--mc, var(--accent)); border-color: var(--mc, var(--accent)); color: var(--on-brand); font-weight: 600; }
.sim-btn.danger { border-color: var(--bad-line); color: var(--bad); }

.sim-bar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.sim-search {
  font-family: inherit; font-size: 12px; flex: 1 1 220px; min-width: 150px;
  padding: 6px 11px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); color: var(--text-dim);
}
.sim-chip {
  font-family: inherit; font-size: 12px; cursor: default;
  padding: 5px 11px; border: 1px solid var(--line); border-radius: 99px;
  background: var(--card); color: var(--text-dim);
}
.sim-chip span {
  font-family: var(--font-mono); font-size: 10px;
  background: var(--mc, var(--accent)); color: var(--on-brand);
  border-radius: 99px; padding: 0 5px; margin-inline-start: 4px;
}

.sim-tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.sim-table { border-collapse: collapse; width: 100%; font-size: 12px; }
.sim-table th, .sim-table td { text-align: start; padding: 7px 11px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.sim-table thead th {
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-dim); background: var(--wash-2); border-bottom: 1px solid var(--line);
}
.sim-table .cur { text-transform: none; letter-spacing: 0; font-family: var(--font-mono); }
.sim-table td.num, .sim-table th.num { text-align: end; font-family: var(--font-mono); }
.sim-table td code { font-family: var(--font-mono); background: none; padding: 0; color: var(--ink); }
.sim-table tfoot td { border-top: 2px solid var(--line-strong); border-bottom: 0; background: var(--wash); font-family: var(--font-mono); }
.sim-pill { font-size: 10.5px; border-radius: 99px; padding: 1px 8px; background: var(--ink-soft); color: var(--ink); border: 1px solid var(--line); }
.sim-acts { text-align: end; }
.sim-rowbtn {
  font-family: inherit; font-size: 11px; cursor: default; margin-inline-start: 4px;
  padding: 3px 9px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--card); color: var(--text-dim);
}
.sim-foot { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); margin-top: 7px; }

.sim-modal {
  position: absolute; inset-inline: 50%; top: 60px; transform: translateX(-50%);
  width: min(620px, 92%); max-height: calc(100% - 86px); overflow: auto;
  background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: 0 20px 50px rgba(var(--shadow-rgb), .30);
  /* Deliberately no z-index: it would become a stacking context, and a
     spotlighted field inside it would then be trapped below the coach-mark
     overlay however high its own z-index went. */
}
[dir="rtl"] .sim-modal { transform: translateX(50%); }
.sim-modalhead { padding: 11px 16px; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: var(--ink); }
.sim-modalbody { padding: 14px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.sim-modalfoot { padding: 11px 16px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; }
.sim-field { display: flex; flex-direction: column; gap: 4px; }
.sim-field.wide { grid-column: 1 / -1; }
.sim-field label { font-size: 11.5px; color: var(--text-dim); font-weight: 600; }
.sim-field input[type="text"], .sim-field select, .sim-field textarea {
  font-family: inherit; font-size: 12px; padding: 6px 9px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--text);
}
.sim-field .req {
  font-style: normal; font-family: var(--font-display); font-size: 9px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--bad); background: var(--bad-wash); border: 1px solid var(--bad-line);
  border-radius: 3px; padding: 0 5px;
}
.sim-field .srcnote { font-style: normal; font-size: 10px; color: var(--text-dim); font-weight: 400; }
.sim-hint { font-size: 11px; color: var(--text-dim); margin: 2px 0 0; }
.sim-lines { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.sim-lines table { border-collapse: collapse; width: 100%; font-size: 11px; }
.sim-lines th, .sim-lines td { padding: 5px 9px; border-bottom: 1px solid var(--line-soft); text-align: start; }
.sim-lines th {
  background: var(--wash-2); color: var(--text-dim);
  font-family: var(--font-display); font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}
.sim-lines td { font-family: var(--font-mono); color: var(--text-dim); }
.sim-linkbtn { font-family: inherit; font-size: 11px; background: none; border: 0; color: var(--mc, var(--accent)); padding: 6px 9px; cursor: default; }

.sim-ask {
  position: absolute; inset-inline-end: 14px; bottom: 14px;
  font-family: var(--font-display); font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
  background: var(--accent); color: var(--on-brand); border: 0; border-radius: 99px;
  padding: 9px 17px; cursor: default; box-shadow: 0 4px 14px rgba(var(--shadow-rgb), .22);
}

/* =====================================================================
   COACH MARKS
   ===================================================================== */
.walk-layer { position: fixed; inset: 0; z-index: 900; }
.walk-hole {
  position: fixed; border-radius: 8px;
  box-shadow: 0 0 0 9999px var(--overlay), 0 0 0 2px var(--mc, var(--accent)) inset;
  outline: 2px solid var(--card); outline-offset: 0;
  transition: top .18s, left .18s, width .18s, height .18s;
  pointer-events: none;
}
.walk-target { position: relative; z-index: 901; }
.walk-live { cursor: pointer !important; pointer-events: auto; }
.walk-live::after {
  content: ""; position: absolute; inset: -6px; border-radius: 9px;
  animation: walkpulse 1.6s ease-out infinite; pointer-events: none;
}
@keyframes walkpulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .5); }
  100% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .walk-live::after { animation: none; }
  .walk-hole { transition: none; }
}

.walk-balloon {
  position: fixed; z-index: 902; width: min(372px, calc(100vw - 24px));
  background: var(--card); color: var(--text);
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--mc, var(--accent));
  border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(var(--shadow-rgb), .34);
  padding: 14px 17px 12px;
}
.walk-balloon.centre { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); }
.walk-count {
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--mc, var(--accent));
}
.walk-title { font-family: var(--font-display); font-weight: 700; margin: 4px 0 6px; font-size: 15.5px; line-height: 1.3; color: var(--ink); }
.walk-text { font-size: 13.5px; line-height: 1.55; color: var(--text-dim); }
.walk-do {
  margin-top: 10px; font-size: 12.5px; font-weight: 600;
  color: var(--mc, var(--accent)); background: var(--ink-soft);
  border-radius: 8px; padding: 8px 11px;
}
.walk-nav { display: flex; align-items: center; gap: 8px; margin-top: 13px; }
.walk-spacer { flex: 1; }
.walk-nav button {
  font-family: inherit; font-size: 13px; cursor: pointer;
  padding: 7px 15px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--card); color: var(--text-dim);
}
.walk-nav button:hover { border-color: var(--line-strong); color: var(--ink); }
.walk-nav .walk-next {
  font-family: var(--font-display); font-weight: 700;
  background: var(--mc, var(--accent)); border-color: var(--mc, var(--accent)); color: var(--on-brand);
}
.walk-nav button:disabled { opacity: .4; cursor: default; }
.walk-nav .walk-exit { border-color: transparent; color: var(--text-dim); }
.walk-progress { height: 3px; background: var(--wash-2); border-radius: 2px; margin-top: 11px; overflow: hidden; }
.walk-progress span { display: block; height: 100%; background: var(--mc, var(--accent)); transition: width .2s; }

/* =====================================================================
   THE CHECK
   ===================================================================== */
.quiz { margin-top: 32px; border-top: 1px solid var(--line); padding-top: 10px; }
.quizlede { color: var(--text-dim); }
.q {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); padding: 14px 16px; margin: 0 0 13px;
}
.q legend { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); padding: 0 6px; }
.qn {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink-soft); color: var(--mc, var(--accent));
  font-family: var(--font-mono); font-size: 11.5px; margin-inline-end: 5px; vertical-align: 1px;
}
.opts { display: grid; gap: 7px; margin-top: 10px; }
.opt {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: start;
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
  cursor: pointer; font-size: 14px;
}
.opt:hover { border-color: var(--mc, var(--accent)); }
.q.done .opt { cursor: default; }
.why { grid-column: 2; font-size: 12.5px; color: var(--text-dim); margin-top: 3px; }
.q.done .opt.is-right { border-color: var(--ok-line); background: var(--ok-wash); }
.q.done .opt.is-right .why { color: var(--ok); }
.q.done .opt.is-wrong.chosen { border-color: var(--bad-line); background: var(--bad-wash); }
.q.done .opt.is-wrong.chosen .why { color: var(--bad); }
.q.done .opt.is-wrong:not(.chosen) { opacity: .72; }
.verdict { margin: 11px 0 0; font-family: var(--font-display); font-weight: 700; font-size: 13.5px; }
.q.right .verdict { color: var(--ok); }
.q.wrong .verdict { color: var(--bad); }
.quizfoot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.score { font-family: var(--font-mono); font-size: 14px; }
.score .pass { color: var(--ok); }
.score .fail { color: var(--warn); }

/* =====================================================================
   THE RECORD
   ===================================================================== */
.recsum { display: flex; gap: 28px; flex-wrap: wrap; margin: 14px 0 20px; }
.recsum b { display: block; font-family: var(--font-mono); font-size: 26px; font-weight: 500; color: var(--ink); }
.recsum span { font-family: var(--font-display); font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--text-dim); }
.rectable { border-collapse: collapse; width: 100%; max-width: 720px; font-size: 13.5px; }
.rectable td { padding: 8px 12px; border-bottom: 1px solid var(--line-soft); }
.rectable td.num { font-family: var(--font-mono); }

/* =====================================================================
   NARROW
   ===================================================================== */
@media (max-width: 780px) {
  .sim-modalbody { grid-template-columns: 1fr; }
  .hero h1 { font-size: 30px; }
  h1 { font-size: 25px; }
  .walk-balloon { width: calc(100vw - 20px); }
  .topnav { margin-inline-start: 0; }
}