/* /board1405 — public explained exam page.  DT_BOARD1405_PUBLIC_V1 2026-09-10
   One accent (#1354ff) for selection and action only; green/red only for correct/wrong, always with an icon and a label.
   Radius scale: controls 10px (nested 8px), cards 16px, pills 999px. Spacing on a 4px grid. */
@font-face{font-family:Vazirmatn;src:url("/assets/gateway-v3/assets/Vazirmatn-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Vazirmatn;src:url("/assets/gateway-v3/assets/Vazirmatn-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Vazirmatn;src:url("/assets/gateway-v3/assets/Vazirmatn-ExtraBold.woff2") format("woff2");font-weight:800;font-display:swap}
:root{--blue:#1354ff;--blue-d:#0744e6;--blue-tint:#eef3ff;--ink:#08183f;--ink-2:#243c68;--muted:#52658d;--line:#e3e8f2;--bg:#f5f8ff;--green:#0f7a3e;--green-bg:#ecf8f1;--red:#b42318;--red-bg:#fdeeed}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:120px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Vazirmatn,Tahoma,sans-serif;font-size:16px;line-height:1.9;-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.skip-link{position:fixed;top:8px;right:16px;z-index:100;background:#fff;border:2px solid var(--blue);padding:10px 16px;border-radius:10px;transform:translateY(-200%)}.skip-link:focus{transform:none}
.bx-wrap{max-width:860px;margin:0 auto;padding-inline:20px}
.bx-ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* top bar */
.bx-top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line)}
.bx-top-in{max-width:1080px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.bx-brand{display:flex;direction:ltr;align-items:center;gap:8px;height:44px}.bx-brand img:first-child{height:40px;width:auto}.bx-brand img:last-child{height:24px;width:auto}
.bx-nav{display:flex;align-items:center;gap:8px}
.bx-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:10px;text-decoration:none;font-weight:700;color:var(--ink-2)}
.bx-nav a:hover{background:var(--blue-tint)}
.bx-nav .bx-cta{background:var(--blue);color:#fff}.bx-nav .bx-cta:hover{background:var(--blue-d)}

/* hero */
.bx-hero{background:#fff;border-bottom:1px solid var(--line);padding:40px 0 28px}
.bx-eyebrow{margin:0 0 6px;color:var(--blue);font-weight:800;font-size:15px}
.bx-hero h1{margin:0;font-size:clamp(28px,4.4vw,42px);line-height:1.35;font-weight:800}
.bx-lead{margin:12px 0 0;color:var(--ink-2);font-size:17px}
.bx-facts{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.bx-facts li{border:1px solid var(--line);border-radius:16px;padding:12px 14px;background:#fff}
.bx-facts b{display:block;font-size:26px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.3}
.bx-facts span{font-size:14px;color:var(--muted);font-weight:700}

/* sticky tool bar */
.bx-bar{position:sticky;top:65px;z-index:15;background:rgba(245,248,255,.96);border-bottom:1px solid var(--line)}
.bx-bar-in{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding-block:10px}
.bx-filter{display:inline-flex;gap:4px;padding:4px;background:#e9eef8;border-radius:10px}
.bx-filter button{min-height:40px;padding:0 14px;border:0;border-radius:8px;background:none;font-weight:700;color:var(--ink-2)}
.bx-filter button[aria-checked=true]{background:#fff;color:var(--blue);box-shadow:0 1px 4px #08183f1a}
.bx-jump{display:inline-flex;align-items:center;gap:6px}
.bx-jump label{font-size:14px;font-weight:700;color:var(--muted)}
.bx-jump input{width:72px;min-height:40px;border:1px solid #cdd6e6;border-radius:10px;padding:0 10px;font:inherit;text-align:center;background:#fff}
.bx-jump button{min-height:40px;padding:0 14px;border:1px solid #cdd6e6;border-radius:10px;background:#fff;font-weight:700}
.bx-progress{margin:0 auto 0 0;font-size:14px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}

/* question card */
#questions{padding-block:20px 8px}
.bx-q{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;margin:0 0 16px}
.bx-q[hidden]{display:none}
.bx-q-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.bx-q-head h2{margin:0;font-size:17px;font-weight:800}.bx-q-head h2 small{font-size:14px;color:var(--muted);font-weight:700}
.bx-tag{font-size:13px;font-weight:800;border-radius:999px;padding:1px 10px;border:1px solid}
.bx-tag.free{color:var(--blue);border-color:#bcd0ff;background:var(--blue-tint)}
.bx-tag.contest{color:#8a5a00;border-color:#f0d49a;background:#fff7e3}
.bx-stem{margin:0 0 12px;font-size:17px;line-height:2;font-weight:500}
.bx-fig{margin:0 0 12px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#f3f6fb;display:flex;justify-content:center;padding:8px}
.bx-fig img{max-height:380px;width:auto}
.bx-opts{display:flex;flex-direction:column;gap:12px}
.bx-opt{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:12px 16px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;text-align:right;line-height:1.7}
.bx-opt b{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:999px;background:#f1f4fa;font-size:15px;color:var(--ink-2)}
.bx-opt span{flex:1;min-width:0;overflow-wrap:anywhere}
.bx-opt:hover:not(:disabled){border-color:#9db8ff;background:#fafcff}
.bx-opt:disabled{cursor:default}
.bx-opt .bx-mark{flex:none;display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:800}
.bx-opt.is-correct{border-color:var(--green);background:var(--green-bg)}.bx-opt.is-correct b{background:var(--green);color:#fff}.bx-opt.is-correct .bx-mark{color:var(--green)}
.bx-opt.is-wrong{border-color:var(--red);background:var(--red-bg)}.bx-opt.is-wrong b{background:var(--red);color:#fff}.bx-opt.is-wrong .bx-mark{color:var(--red)}
.bx-opt.is-dim{opacity:.72}
.bx-result{margin:12px 0 0;font-weight:800;min-height:0}
.bx-result[data-state=ok]{color:var(--green)}.bx-result[data-state=bad]{color:var(--red)}
.bx-reveal{margin-top:10px;min-height:40px;padding:0;border:0;background:none;color:var(--blue);font-weight:700;text-decoration:underline;text-underline-offset:4px}
.bx-q.is-done .bx-reveal{display:none}
.bx-after{margin-top:14px;border-top:1px solid var(--line);padding-top:14px}
.bx-lesson{font-size:16px;line-height:2;color:var(--ink-2)}
.bx-lesson h3{margin:0 0 8px;font-size:18px;color:var(--ink);font-weight:800}
.bx-lesson ul,.bx-lesson ol{margin:0 0 10px;padding-inline-start:22px}.bx-lesson li{margin:4px 0}
.bx-lesson b{color:var(--ink)}
.bx-lesson p{margin:10px 0 0;background:var(--blue-tint);border-right:3px solid var(--blue);border-radius:8px;padding:10px 12px}
.bx-contest{margin:0 0 14px;background:#fff7e3;border:1px solid #f0d49a;border-radius:10px;padding:12px 14px}
.bx-contest h3{margin:0 0 4px;font-size:16px;color:#8a5a00}.bx-contest p{margin:0;font-size:15px;line-height:2;color:#4a3b12}
.bx-locked{position:relative;border:1px dashed #c5d3ee;border-radius:10px;padding:14px;background:#fbfcff}
.bx-locked-topic{margin:0 0 10px;font-weight:800;color:var(--ink)}.bx-locked-topic span{color:var(--muted);font-weight:700}
.bx-locked-lines{display:flex;flex-direction:column;gap:8px;filter:blur(2px);margin-bottom:12px}
.bx-locked-lines i{display:block;height:10px;border-radius:4px;background:#dbe3f1}.bx-locked-lines i:nth-child(2){width:88%}.bx-locked-lines i:nth-child(3){width:94%}.bx-locked-lines i:nth-child(4){width:62%}
.bx-locked-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;color:var(--ink-2)}.bx-locked-cta p{margin:0;flex:1 1 220px;font-size:15px}
.bx-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:10px;background:var(--blue);color:#fff;font-weight:800;text-decoration:none}
.bx-btn:hover{background:var(--blue-d)}
.bx-ref{margin:12px 0 0;font-size:14px;color:var(--muted)}.bx-ref span{font-weight:800}.bx-ref bdi{font-family:Tahoma,sans-serif}
.bx-next{display:inline-flex;align-items:center;min-height:44px;margin-top:10px;padding:0 16px;border:1px solid #cdd6e6;border-radius:10px;text-decoration:none;font-weight:800;color:var(--ink-2);background:#fff}
.bx-next:hover{border-color:var(--blue);color:var(--blue)}
.bx-empty{text-align:center;color:var(--muted);font-weight:700;padding:32px 0}

/* wall after the free questions + end card */
.bx-wall{background:#fff;border:2px solid var(--blue);border-radius:16px;padding:24px 20px;margin:24px 0}
.bx-wall h2{margin:0 0 10px;font-size:clamp(22px,3vw,28px);line-height:1.5;font-weight:800}
.bx-score{margin:0 0 10px;font-weight:800;color:var(--green)}
.bx-checks{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:6px}
.bx-checks li{position:relative;padding-inline-start:28px;color:var(--ink-2);font-weight:700}
.bx-checks li::before{content:"";position:absolute;inset-inline-start:2px;top:8px;width:14px;height:7px;border-left:2.5px solid var(--blue);border-bottom:2.5px solid var(--blue);transform:rotate(-45deg)}
.bx-quiet{display:inline-block;margin-top:14px;color:var(--muted);font-weight:700;text-underline-offset:4px}
.bx-end{padding:28px 0 40px;text-align:center}.bx-end h2{margin:0 0 6px;font-size:22px}.bx-end p{margin:0 0 14px;color:var(--ink-2)}
.bx-foot{border-top:1px solid var(--line);background:#fff;padding:20px 0;font-size:14px;color:var(--muted)}
.bx-foot .bx-wrap{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}.bx-foot a{font-weight:800;text-decoration:none;color:var(--ink-2)}

@media(max-width:700px){
  .bx-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bx-bar{position:static}.bx-progress{margin:0;width:100%}
  html{scroll-padding-top:76px}
  .bx-q{padding:16px}.bx-stem{font-size:16px}
  .bx-nav a:not(.bx-cta){display:none}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}