/* BritMock: one hand-written stylesheet, no build step. A British look (navy,
   red and white of the Union flag, Baskerville headings; chosen in task #5784)
   that is still deliberately not the GOV.UK look (no black header, no GOV.UK
   blue or yellow, no Transport font, no crown): the brief, section 6, forbids
   passing for a government service. */
@font-face { font-family: "Libre Baskerville"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/libre-baskerville-regular.woff2) format("woff2"); }
@font-face { font-family: "Libre Baskerville"; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/libre-baskerville-italic.woff2) format("woff2"); }
:root {
  --ink: #14213d;
  --muted: #5a6478;
  --bg: #f4f5f8;
  --card: #fff;
  --line: #dfe3ea;
  --brand: #0b2a5b;
  --red: #c8102e;
  --accent: #c8102e;
  --radius: 6px;
  --serif: "Libre Baskerville", Baskerville, Georgia, serif;
  --flag: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'><clipPath id='s'><path d='M0,0v30h60V0z'/></clipPath><clipPath id='t'><path d='M30,15h30v15zv15H0zH0V0zV0h30z'/></clipPath><g clip-path='url%28%23s%29'><path d='M0,0v30h60V0z' fill='%23012169'/><path d='M0,0L60,30M60,0L0,30' stroke='%23fff' stroke-width='6'/><path d='M0,0L60,30M60,0L0,30' clip-path='url%28%23t%29' stroke='%23C8102E' stroke-width='4'/><path d='M30,0v30M0,15h60' stroke='%23fff' stroke-width='10'/><path d='M30,0v30M0,15h60' stroke='%23C8102E' stroke-width='6'/></g></svg>");
}
* { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
body {
  margin: 0;
  font: 17px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
[hidden] { display: none !important; }
h1, h2, .q-text, .score, .logo span { font-family: var(--serif); font-weight: 400; }
a { color: var(--brand); }
.wrap { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 20px; }
main.wrap { flex: 1; padding-top: 40px; padding-bottom: 56px; }

/* Navy bar with a white and a red stripe under it. */
header.site { background: var(--brand); box-shadow: 0 4px 0 #fff, 0 9px 0 var(--red); margin-bottom: 9px; }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-size: 23px; letter-spacing: -0.01em; }
.logo b { color: #ffb3bf; font-weight: 400; font-style: italic; }
.logo svg { border-radius: 3px; box-shadow: 0 0 0 1.5px #fff; }

.hero { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 36px 32px; }
.hero h1 { margin: 0 0 12px; font-size: clamp(30px, 6vw, 42px); line-height: 1.15; letter-spacing: -0.02em; }
.lead { margin: 0 0 20px; font-size: 19px; color: var(--muted); }
.btn {
  display: inline-block; padding: 10px 18px; border-radius: 4px; border: 2px solid var(--red);
  background: var(--red); color: #fff; text-decoration: none; font: inherit; font-weight: 600; cursor: pointer;
}
.btn.ghost { background: transparent; color: var(--brand); border-color: var(--brand); }
.btn:disabled { opacity: .4; cursor: default; }
button.link { background: none; border: 0; padding: 0; font: inherit; color: var(--brand); text-decoration: underline; cursor: pointer; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; }
.note { margin: 16px 0; color: var(--muted); }

nav.top { display: flex; gap: 4px 18px; flex-wrap: wrap; font-size: 15px; }
nav.top a { color: #fff; text-decoration: none; }
nav.top a:hover { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.badge {
  display: inline-block; margin-left: 5px; min-width: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--red); color: #fff; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center;
}

.intro { margin: 0 0 20px; }
.intro h1 { margin: 0 0 8px; font-size: clamp(28px, 5.5vw, 40px); line-height: 1.2; letter-spacing: -0.01em; }
/* The home page: a tilted Union flag beside the heading. */
.intro.flagged { position: relative; padding-right: 120px; }
.intro.flagged::after { content: ""; position: absolute; right: 0; top: 4px; width: 104px; height: 52px; background: var(--flag) center / cover; border-radius: 4px; box-shadow: 0 2px 10px rgba(11,42,91,.18); transform: rotate(-4deg); }
.intro .lead { margin: 0; font-size: 18px; }

/* The test. app.js draws the same markup as the "card" template. */
.q-card { background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--brand); border-radius: var(--radius); padding: 24px 28px 28px; box-shadow: 0 1px 2px rgba(11,42,91,.08); }
.q-meta { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 10px; font-size: 15px; color: var(--muted); }
.q-text { margin: 0 0 6px; font-size: 22px; line-height: 1.45; outline: none; }
.q-hint { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--brand); }
.q-loading { margin: 0; color: var(--muted); }
.opts { display: grid; gap: 10px; margin-top: 16px; }
.opt {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 12px 14px; text-align: left;
  font: inherit; color: var(--ink); background: var(--card); border: 2px solid var(--line); border-radius: 4px; cursor: pointer;
}
.opt:hover:not(:disabled) { border-color: var(--brand); }
.opt:disabled { cursor: default; }
.opt .key {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg); font-size: 14px; font-weight: 700; color: var(--muted);
}
.opt .txt { padding-top: 1px; }
.opt.picked { border-color: var(--brand); background: #e8edf6; }
.opt.picked .key { background: var(--brand); color: #fff; }
.opt.right { border-color: #1e7a46; background: #e7f4ec; }
.opt.right .key { background: #1e7a46; color: #fff; }
.opt.wrong { border-color: #b42318; background: #fdeceb; }
.opt.wrong .key { background: #b42318; color: #fff; }
.feedback { margin-top: 16px; padding: 14px 16px; border-radius: 4px; background: var(--bg); }
.feedback p { margin: 0; }
.feedback .verdict { font-weight: 700; margin-bottom: 4px; }
.feedback.ok .verdict { color: #1e7a46; }
.feedback.no .verdict { color: #b42318; }

.clock { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); }
.clock.low { color: #b42318; }
.exam-nav { justify-content: space-between; }
.dots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.dot {
  width: 34px; height: 34px; padding: 0; border-radius: 4px; border: 2px solid var(--line); background: var(--card);
  font: inherit; font-size: 13px; color: var(--muted); cursor: pointer;
}
.dot.answered { background: #e8edf6; border-color: #9fb0cf; color: var(--ink); }
.dot.current { border-color: var(--brand); color: var(--ink); font-weight: 700; }
.finish-early { margin: 14px 0 0; font-size: 15px; }
.facts { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 8px; }
.facts li { padding: 10px 14px; border-left: 4px solid var(--red); background: var(--bg); border-radius: 0 10px 10px 0; }
.exam-history { margin: 14px 0 0; color: var(--muted); font-size: 15px; }

.result h2 { margin: 0 0 6px; font-size: 22px; outline: none; }
.result p { margin: 0 0 8px; }
.score { font-size: 46px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.score.ok { color: #1e7a46; }
.score.no { color: #b42318; }
.review { margin-top: 28px; }
.review h2 { font-size: 22px; margin: 0 0 12px; }
.review ol { margin: 0; padding-left: 28px; display: grid; gap: 12px; }
.review li { background: var(--card); border: 1px solid var(--line); border-left: 4px solid #1e7a46; border-radius: 4px; padding: 12px 16px; }
.review li.no { border-left-color: #b42318; }
.review p { margin: 0 0 4px; }
.review .rq { font-weight: 600; }
.review .ra { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 15px; color: var(--muted); }
.review .tag { font-weight: 700; color: #1e7a46; }
.review li.no .tag { color: #b42318; }
.review .re { color: var(--muted); font-size: 15px; margin: 0; }

.pager { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 24px; }

.modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 28px; }
.mode { display: block; padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--brand); border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.mode:hover { border-color: var(--red); }
.mode b { display: block; color: var(--red); margin-bottom: 2px; font-family: var(--serif); font-weight: 400; font-size: 19px; }
.mode span { font-size: 15px; color: var(--muted); }

.test-grid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.test-grid a { display: block; padding: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.test-grid a { border-top: 4px solid var(--brand); }
.test-grid a:hover { border-color: var(--red); }
.test-grid a.taken { border-color: #9fb0cf; }
.test-grid .best { display: block; font-size: 14px; color: var(--muted); min-height: 1.5em; }

.chapters { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.chapters a { display: block; padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--brand); border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.chapters a:hover { border-color: var(--red); }
.ch-num { display: block; font-size: 14px; color: var(--muted); }
.ch-meta { display: block; font-size: 15px; color: var(--muted); margin: 2px 0 8px; }
.bar { display: block; height: 8px; border-radius: 999px; background: var(--bg); overflow: hidden; }
.bar span { display: block; height: 100%; width: 0; background: var(--red); }

footer { background: var(--brand); padding: 24px 0 32px; font-size: 15px; color: #c9d2e3; }
footer p { margin: 0 0 8px; }
footer .indep { color: #fff; font-weight: 600; }
footer a { color: #fff; }

@media (max-width: 560px) {
  main.wrap { padding-top: 20px; padding-bottom: 36px; }
  .hero { padding: 24px 20px; }
  .q-card { padding: 18px 16px 22px; }
  .q-text { font-size: 20px; }
  header.site .wrap { padding-top: 10px; padding-bottom: 10px; }
  .intro.flagged { padding-right: 0; }
  .intro.flagged::after { width: 64px; height: 32px; top: -6px; }
  .intro.flagged h1 { padding-right: 72px; }
}