/* ===== ONLY CELLS — shared course player (every course uses this file) ===== */
.oc{ --ink:#001a4e; --ink2:#334a75; --muted:#5d6b86; --line:#e2e7f0; --soft:#f5f7fb; --card:#ffffff;
  --acc:#001a4e; --accInk:#fff; --hl:#0e7490; --hlSoft:#e0f4f8; --chip:#eef2f8;
  --ok:#0d7a5f; --okBg:#e6f6f0; --bad:#b42335; --badBg:#fdecee; --warnBg:#fff4e5; --warnInk:#8a4b00; --tipBg:#eaf3fd; --tipInk:#174a8c;
  --lock:#9aa6bd; --focus:#0891b2; --field:#6b7891; color:var(--ink); font-size:16px; line-height:1.6; }
html[data-theme="dark"] .oc{ --ink:#f1f5f9; --ink2:#cbd5e1; --muted:#a3adbd; --line:#444; --soft:#2b2b2b; --card:#262626;
  --acc:#22d3ee; --accInk:#06232b; --hl:#67e8f9; --hlSoft:#123a44; --chip:#333;
  --ok:#5fe0b5; --okBg:#123630; --bad:#ffb4bd; --badBg:#3d1a1f; --warnBg:#3a2c14; --warnInk:#fcd38d; --tipBg:#16283f; --tipInk:#a9cdf7; --lock:#6b7280; --focus:#67e8f9; --field:#8b95a7; }
.oc *{ box-sizing:border-box; }
.oc a{ color:var(--hl); }
.oc button{ font:inherit; color:inherit; cursor:pointer; }
.oc :focus-visible{ outline:3px solid var(--focus); outline-offset:2px; border-radius:10px; }
.oc-pad{ padding:22px 18px 28px; } @media (min-width:640px){ .oc-pad{ padding:30px 36px 36px; } }
.oc-back{ display:inline-block; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; color:var(--ink); }
html[data-theme="dark"] .oc-back{ color:#22d3ee; }
.oc-kicker{ font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--hl); }
.oc h1{ font-size:28px; line-height:1.12; font-weight:850; font-weight:800; margin:6px 0 8px; letter-spacing:-.015em; }
@media (min-width:640px){ .oc h1{ font-size:34px; } }
.oc h2{ font-size:22px; line-height:1.2; font-weight:800; margin:26px 0 8px; }
.oc h3{ font-size:17px; font-weight:800; margin:20px 0 6px; }
.oc p{ margin:0 0 12px; }
.oc-lead{ color:var(--ink2); font-size:17px; max-width:62ch; }
.oc-muted{ color:var(--muted); }
.oc-small{ font-size:13.5px; }
.oc-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1.5px solid var(--line); background:var(--card); border-radius:12px; padding:10px 16px; font-weight:750; font-weight:700; font-size:15px; min-height:44px; text-decoration:none; color:var(--ink); }
.oc-btn:hover{ border-color:var(--hl); }
.oc-btn.primary{ background:var(--acc); color:var(--accInk); border-color:var(--acc); }
.oc-btn.primary:hover{ filter:brightness(1.1); }
.oc-btn[disabled]{ opacity:.45; cursor:not-allowed; filter:none; }
.oc-btn.small{ min-height:36px; padding:6px 12px; font-size:14px; }
.oc-row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.oc-bar{ height:10px; border-radius:99px; background:var(--chip); overflow:hidden; }
.oc-bar > i{ display:block; height:100%; background:linear-gradient(90deg,#0891b2,#22d3ee); border-radius:99px; }
.oc-card{ border:1px solid var(--line); background:var(--card); border-radius:18px; padding:16px; }
.oc-hero{ display:grid; gap:18px; grid-template-columns:1fr; align-items:center; margin-bottom:8px; }
@media (min-width:760px){ .oc-hero{ grid-template-columns:1.4fr 1fr; } }
.oc-hero-art{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; max-width:340px; margin:0 auto; }
.oc-hero-art svg{ width:100%; height:auto; display:block; border-radius:16px; box-shadow:0 8px 20px rgba(0,26,78,.12); }
.oc-badges{ display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 14px; }
.oc-badge{ font-size:12.5px; font-weight:700; padding:4px 10px; border-radius:999px; background:var(--chip); color:var(--ink2); }
.oc-badge.ok{ background:var(--okBg); color:var(--ok); }
.oc-outcomes{ margin:8px 0 0; padding-left:20px; } .oc-outcomes li{ margin:4px 0; }
/* modules list */
.oc-mods{ display:grid; gap:10px; margin-top:12px; }
.oc-mod{ display:flex; gap:14px; align-items:center; width:100%; text-align:left; border:1.5px solid var(--line); background:var(--card); border-radius:18px; padding:12px 14px; text-decoration:none; color:var(--ink); }
.oc-mod:hover{ border-color:var(--hl); }
.oc-mod.locked{ opacity:.6; cursor:not-allowed; }
.oc-mod .num{ flex:0 0 46px; height:46px; border-radius:14px; display:grid; place-items:center; font-weight:850; font-weight:800; font-size:18px; background:var(--chip); color:var(--ink); }
.oc-mod.done .num{ background:var(--okBg); color:var(--ok); }
.oc-mod .t{ font-weight:800; font-size:16.5px; line-height:1.25; }
.oc-mod .d{ font-size:13.5px; color:var(--muted); line-height:1.4; margin-top:2px; }
.oc-mod .st{ margin-left:auto; font-size:12.5px; font-weight:800; color:var(--muted); white-space:nowrap; text-align:right; }
.oc-mod .st.ok{ color:var(--ok); }
.oc-mod .mini{ height:6px; border-radius:9px; background:var(--chip); margin-top:8px; overflow:hidden; max-width:260px; } .oc-mod .mini i{ display:block; height:100%; background:var(--hl); }
.oc-lessons{ display:grid; gap:8px; margin:12px 0; }
.oc-les{ display:flex; gap:12px; align-items:center; border:1.5px solid var(--line); background:var(--card); border-radius:14px; padding:10px 12px; text-decoration:none; color:var(--ink); font-weight:700; }
.oc-les:hover{ border-color:var(--hl); } .oc-les.locked{ opacity:.55; pointer-events:none; }
.oc-les .ic{ flex:0 0 30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--chip); font-size:14px; }
.oc-les.done .ic{ background:var(--okBg); color:var(--ok); }
.oc-les .r{ margin-left:auto; font-size:12.5px; color:var(--muted); font-weight:700; }
/* lesson */
.oc-crumb{ font-size:13px; color:var(--muted); margin-bottom:4px; } .oc-crumb a{ text-decoration:none; }
.oc-lesson{ max-width:760px; }
.oc-lesson table{ width:100%; border-collapse:collapse; font-size:14.5px; margin:8px 0 16px; }
.oc-tablewrap{ overflow-x:auto; border:1px solid var(--line); border-radius:14px; margin:8px 0 16px; }
.oc-tablewrap table{ margin:0; }
.oc-lesson th{ text-align:left; background:var(--soft); font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:9px 12px; border-bottom:1px solid var(--line); }
.oc-lesson td{ padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
.oc-lesson tr:last-child td{ border-bottom:0; }
.oc-key{ background:var(--soft); border-radius:16px; padding:14px 16px 6px; margin:8px 0 16px; border-left:4px solid var(--hl); }
.oc-key ul{ margin:0; padding-left:18px; } .oc-key li{ margin:0 0 8px; }
.oc-note{ border-radius:14px; padding:12px 14px; margin:8px 0 16px; font-size:15px; }
.oc-note.tip{ background:var(--tipBg); color:var(--tipInk); } .oc-note.warn{ background:var(--warnBg); color:var(--warnInk); }
.oc-note b:first-child{ }
.oc-fig{ margin:10px 0 18px; text-align:center; } .oc-fig svg{ width:180px; height:180px; display:inline-block; border-radius:22px; box-shadow:0 8px 22px rgba(0,26,78,.12); }
.oc-fig figcaption{ font-size:13.5px; color:var(--muted); margin-top:6px; }
.oc-figs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px; margin:10px 0 18px; }
.oc-figs figure{ margin:0; text-align:center; } .oc-figs svg{ width:100%; height:auto; border-radius:18px; box-shadow:0 6px 16px rgba(0,26,78,.1); }
.oc-figs figcaption{ font-size:12.5px; color:var(--muted); margin-top:4px; line-height:1.3; }
/* activity shell */
.oc-act{ border:1.5px solid var(--line); border-radius:20px; padding:16px; margin:14px 0 20px; background:var(--card); }
.oc-act-h{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--hl); margin-bottom:6px; }
.oc-act-h .tick{ margin-left:auto; color:var(--ok); font-size:12.5px; letter-spacing:.02em; text-transform:none; display:none; }
.oc-act.done .oc-act-h .tick{ display:inline; }
.oc-act .q{ font-weight:750; font-weight:700; font-size:16.5px; margin-bottom:10px; line-height:1.4; }
.oc-opts{ display:grid; gap:8px; }
.oc-opt{ text-align:left; border:1.5px solid var(--line); background:var(--card); border-radius:14px; padding:11px 14px; font-size:15px; line-height:1.4; display:flex; gap:10px; align-items:flex-start; }
.oc-opt:hover{ border-color:var(--hl); }
.oc-opt .k{ flex:0 0 26px; height:26px; border-radius:8px; background:var(--chip); display:grid; place-items:center; font-weight:800; font-size:13px; }
.oc-opt.sel{ border-color:var(--hl); background:var(--hlSoft); }
.oc-opt.right{ border-color:var(--ok); background:var(--okBg); } .oc-opt.right .k{ background:var(--ok); color:var(--card); }
.oc-opt.wrong{ border-color:var(--bad); background:var(--badBg); } .oc-opt.wrong .k{ background:var(--bad); color:var(--card); }
.oc-fb{ margin-top:10px; border-radius:12px; padding:10px 12px; font-size:14.5px; display:none; }
.oc-fb.show{ display:block; } .oc-fb.ok{ background:var(--okBg); color:var(--ok); } .oc-fb.no{ background:var(--badBg); color:var(--bad); }
.oc-fb b{ display:block; }
.oc-fb .ex{ color:var(--ink2); margin-top:2px; }
.oc-spot{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; } @media (min-width:560px){ .oc-spot{ grid-template-columns:repeat(4,1fr); } }
.oc-spot button{ border:2px solid var(--line); border-radius:18px; background:var(--card); padding:6px; display:flex; flex-direction:column; align-items:center; gap:4px; font-weight:800; }
.oc-spot button svg{ width:100%; height:auto; border-radius:14px; }
.oc-spot button.right{ border-color:var(--ok); box-shadow:0 0 0 3px var(--okBg); } .oc-spot button.wrong{ border-color:var(--bad); box-shadow:0 0 0 3px var(--badBg); }
/* cards */
.oc-cards{ display:grid; grid-template-columns:1fr; gap:10px; margin:10px 0 18px; } @media (min-width:600px){ .oc-cards{ grid-template-columns:1fr 1fr; } }
.oc-flip{ position:relative; border:1.5px solid var(--line); border-radius:18px; background:var(--card); padding:14px; text-align:left; min-height:96px; display:flex; gap:12px; align-items:center; }
.oc-flip:hover{ border-color:var(--hl); }
.oc-flip svg{ flex:0 0 64px; width:64px; height:64px; border-radius:14px; }
.oc-flip .f{ font-weight:800; font-size:16px; } .oc-flip .b{ display:none; font-size:14.5px; color:var(--ink2); line-height:1.45; }
.oc-flip .hint{ font-size:12px; color:var(--hl); font-weight:700; margin-top:2px; }
.oc-flip.open{ background:var(--soft); border-color:var(--hl); } .oc-flip.open .b{ display:block; } .oc-flip.open .hint{ display:none; }
/* sort / match / order */
.oc-sort{ display:grid; gap:8px; }
.oc-si{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between; border:1.5px solid var(--line); border-radius:14px; padding:8px 10px; }
.oc-si .l{ font-weight:650; font-weight:600; font-size:15px; flex:1 1 220px; }
.oc-si .b{ display:flex; gap:6px; flex-wrap:wrap; }
.oc-si .b button{ border:1.5px solid var(--line); background:var(--card); border-radius:999px; padding:5px 12px; font-size:13.5px; font-weight:700; }
.oc-si .b button.on{ background:var(--acc); color:var(--accInk); border-color:var(--acc); }
.oc-si.right{ border-color:var(--ok); background:var(--okBg); } .oc-si.wrong{ border-color:var(--bad); background:var(--badBg); }
.oc-ord{ display:grid; gap:8px; counter-reset:o; }
.oc-oi{ display:flex; align-items:center; gap:10px; border:1.5px solid var(--line); border-radius:14px; padding:8px 10px; background:var(--card); }
.oc-oi .n{ flex:0 0 28px; height:28px; border-radius:8px; background:var(--chip); display:grid; place-items:center; font-weight:800; font-size:13px; }
.oc-oi .l{ flex:1; font-size:15px; line-height:1.35; }
.oc-oi .mv{ display:flex; flex-direction:column; gap:2px; } .oc-oi .mv button{ border:1px solid var(--line); background:var(--soft); border-radius:8px; width:36px; height:26px; font-size:12px; line-height:1; }
.oc-oi.right{ border-color:var(--ok); background:var(--okBg); } .oc-oi.wrong{ border-color:var(--bad); background:var(--badBg); }
.oc-match select{ font:inherit; font-size:15px; padding:8px 10px; border-radius:10px; border:1.5px solid var(--line); background:var(--card); color:var(--ink); min-width:170px; }
.oc-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
/* film anatomy */
.oc-film{ width:100%; max-width:640px; display:block; margin:6px auto 4px; touch-action:manipulation; }
.oc-film .zone{ cursor:pointer; } .oc-film .zone:hover{ opacity:.85; }
.oc-film-prompt{ font-weight:800; font-size:16px; margin:8px 0; }
/* pH lab */
.oc-ph{ display:grid; gap:12px; grid-template-columns:1fr; align-items:center; } @media (min-width:640px){ .oc-ph{ grid-template-columns:1fr 1fr; } }
.oc-ph-view{ position:relative; border-radius:20px; overflow:hidden; aspect-ratio:1.4; background:#f7eef2; }
.oc-ph-view .row{ position:absolute; inset:0; display:grid; grid-template-columns:repeat(3,1fr); align-items:center; padding:6%; gap:4%; }
.oc-ph-view svg{ width:100%; height:auto; display:block; border-radius:14px; }
.oc-ph-view .tint{ position:absolute; inset:0; pointer-events:none; mix-blend-mode:multiply; }
.oc-ph input[type=range]{ width:100%; accent-color:#0891b2; height:32px; }
.oc-ph .scale{ display:flex; justify-content:space-between; font-size:12.5px; font-weight:700; color:var(--muted); }
.oc-ph .readout{ font-weight:800; font-size:17px; } .oc-ph .desc{ font-size:14.5px; color:var(--ink2); }
/* counter */
.oc-count{ display:grid; gap:12px; grid-template-columns:1fr; } @media (min-width:640px){ .oc-count{ grid-template-columns:200px 1fr; align-items:start; } }
.oc-count .cell svg{ width:100%; max-width:200px; height:auto; border-radius:20px; display:block; margin:0 auto; box-shadow:0 8px 20px rgba(0,26,78,.12); }
.oc-keys{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; } @media (min-width:640px){ .oc-keys{ grid-template-columns:repeat(3,1fr); } }
.oc-keys button{ border:1.5px solid var(--line); background:var(--card); border-radius:14px; padding:10px 8px; font-weight:800; font-size:14.5px; display:flex; justify-content:space-between; gap:6px; }
.oc-keys button span{ color:var(--hl); font-variant-numeric:tabular-nums; }
.oc-keys button:hover{ border-color:var(--hl); }
.oc-keys button.flash-ok{ background:var(--okBg); border-color:var(--ok); } .oc-keys button.flash-no{ background:var(--badBg); border-color:var(--bad); }
.oc-count table{ width:100%; border-collapse:collapse; font-size:14.5px; } .oc-count td,.oc-count th{ padding:6px 8px; border-bottom:1px solid var(--line); text-align:left; }
.oc-calc input{ font:inherit; font-size:17px; padding:9px 12px; border-radius:12px; border:1.5px solid var(--line); width:150px; background:var(--card); color:var(--ink); }
/* lesson footer */
.oc-next{ margin-top:26px; padding-top:18px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; }
.oc-next .need{ font-size:13.5px; color:var(--muted); }
/* quiz */
.oc-qhead{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; font-size:13.5px; color:var(--muted); font-weight:700; }
.oc-qart{ width:170px; height:170px; display:block; margin:6px 0 12px; border-radius:20px; box-shadow:0 8px 20px rgba(0,26,78,.12); }
.oc-result{ text-align:center; padding:10px 0 4px; }
.oc-score{ font-size:64px; font-weight:900; line-height:1; letter-spacing:-.03em; }
.oc-score.ok{ color:var(--ok); } .oc-score.no{ color:var(--bad); }
.oc-review{ display:grid; gap:10px; margin-top:16px; }
.oc-rv{ border:1.5px solid var(--line); border-radius:14px; padding:10px 12px; font-size:14.5px; }
.oc-rv.ok{ border-color:var(--ok); } .oc-rv.no{ border-color:var(--bad); }
.oc-rv .qq{ font-weight:750; font-weight:700; } .oc-rv .aa{ margin-top:4px; } .oc-rv .ex{ color:var(--muted); margin-top:4px; }
/* save panel, cert */
.oc-save{ display:grid; gap:12px; grid-template-columns:1fr; margin-top:18px; } @media (min-width:760px){ .oc-save{ grid-template-columns:1fr 1fr; } }
.oc-code{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:22px; font-weight:800; letter-spacing:.08em; background:var(--soft); border:1.5px dashed var(--line); border-radius:12px; padding:8px 14px; display:inline-block; user-select:all; }
.oc-input{ font:inherit; font-size:16px; padding:10px 12px; border-radius:12px; border:1.5px solid var(--line); background:var(--card); color:var(--ink); width:100%; max-width:360px; }
.oc-certimg{ width:100%; max-width:760px; border-radius:14px; box-shadow:0 12px 34px rgba(0,26,78,.18); display:block; margin:12px auto; }
.oc-toast{ position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(30px); opacity:0; background:#001a4e; color:#fff; padding:10px 16px; border-radius:12px; font-weight:700; font-size:14.5px; z-index:9999; transition:all .25s; box-shadow:0 10px 30px rgba(0,0,0,.3); pointer-events:none; }
.oc-toast.show{ transform:translateX(-50%); opacity:1; }
.oc-fade{ animation:ocFade .22s ease-out; } @keyframes ocFade{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .oc-fade{ animation:none; } .oc-toast{ transition:none; } }
.oc-refs{ font-size:13.5px; color:var(--muted); padding-left:18px; } .oc-refs li{ margin:4px 0; }
.oc-disclaimer{ margin-top:22px; border-radius:16px; padding:14px 18px; font-size:12.5px; line-height:1.55; text-align:center; font-style:italic; border:1px solid var(--line); background:var(--card); color:var(--muted); }
.oc-disclaimer b{ font-style:normal; color:var(--ink); }
/* links styled as cards/buttons keep their own colours (beats `.oc a`) */
.oc a.oc-mod, .oc a.oc-les, .oc a.oc-btn{ color:var(--ink); }
.oc a.oc-btn.primary{ color:var(--accInk); }
.oc ul.oc-outcomes, .oc .oc-key ul{ list-style:disc; } .oc ol.oc-refs{ list-style:decimal; }
.oc-outcomes li::marker, .oc-key li::marker{ color:var(--hl); }
.oc-level{ display:inline-block; font-weight:800; font-size:15px; padding:4px 12px; border-radius:999px; background:var(--acc); color:var(--accInk); margin-bottom:6px; }
.oc-review[hidden], .oc [hidden]{ display:none !important; }
.oc-userbar{ font-size:13px; color:var(--muted); text-align:right; margin:-8px 0 10px; }
.oc-userbar a{ font-weight:700; }
/* real photographs (photos.js) sit in the same places as the drawings */
.oc-pic{ position:relative; display:block; aspect-ratio:1; border-radius:18px; overflow:hidden; background:#eee; }
.oc-pic img{ width:100%; height:100%; object-fit:cover; display:block; }
.oc-pic svg{ position:absolute; inset:0; width:100%; height:100%; box-shadow:none !important; border-radius:0 !important; }
.oc-pic small{ position:absolute; left:8px; bottom:6px; font-size:10px; line-height:1.5; color:#fff; background:rgba(0,0,0,.62); padding:0 5px; border-radius:6px; }
.oc-fig .oc-pic{ width:180px; display:inline-block; } .oc-flip .oc-pic{ flex:0 0 64px; width:64px; border-radius:14px; }
.oc-count .cell .oc-pic{ max-width:200px; margin:0 auto; }
.oc-flip .hint{ display:block; } .oc-flip.open .hint{ display:none; }
/* haematopoiesis family tree */
.oc-tchips{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 14px; }
.oc-tchip{ border:1.5px solid var(--hl); background:var(--hlSoft); color:var(--ink); border-radius:999px; padding:6px 12px; font-size:14px; font-weight:700; }
.oc-tchip.on{ background:var(--acc); color:var(--accInk); border-color:var(--acc); }
.oc-tchip.used{ opacity:.35; text-decoration:line-through; cursor:default; }
.oc-tree{ display:flex; flex-direction:column; align-items:center; gap:0; }
.oc-tn{ border:1.5px solid var(--line); background:var(--card); border-radius:12px; padding:7px 10px; font-size:14px; font-weight:700; line-height:1.25; min-width:120px; max-width:260px; text-align:center; transition:background .2s, border-color .2s; }
.oc-tn.root{ background:var(--acc); color:var(--accInk); border-color:var(--acc); }
.oc-tn.blank{ border-style:dashed; border-color:var(--hl); color:var(--hl); background:var(--soft); font-size:18px; min-height:38px; }
.oc-tn.root.blank{ background:var(--soft); color:var(--hl); }
.oc-tn.placed{ border-color:var(--ok); background:var(--okBg); }
.oc-tn.sel{ box-shadow:0 0 0 3px var(--hlSoft); border-color:var(--hl); }
.oc-tn.leaf{ min-width:0; font-size:13px; padding:6px 9px; }
.oc-tn.shake{ border-color:var(--bad); background:var(--badBg); animation:ocShake .35s; }
@keyframes ocShake{ 25%{ transform:translateX(-4px); } 75%{ transform:translateX(4px); } }
.oc-tdown{ width:2px; height:14px; background:var(--muted); opacity:.5; margin:2px auto; }
.oc-tsplit{ display:grid; grid-template-columns:2fr 1fr; gap:10px; width:100%; align-items:start; }
.oc-tsplit.inner{ grid-template-columns:1fr 2fr; gap:8px; }
.oc-tbr{ display:flex; flex-direction:column; align-items:center; border-radius:14px; padding:8px 6px 10px; }
.oc-tbr.my{ background:rgba(214,92,120,.08); border:1px solid rgba(214,92,120,.25); }
.oc-tbr.ly{ background:rgba(60,110,200,.08); border:1px solid rgba(60,110,200,.25); }
.oc-tlab{ font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.oc-tleaves{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.oc-tinfo{ min-height:1.6em; margin-top:12px; font-size:15px; }
@media (max-width:700px){ .oc-tsplit, .oc-tsplit.inner{ grid-template-columns:1fr; } .oc-tn{ max-width:100%; } }
@media (prefers-reduced-motion: reduce){ .oc-tn.shake{ animation:none; } }
.oc-tn.root.placed{ color:var(--ink); background:var(--okBg); border-color:var(--ok); }
/* ---------- wider page + progress sidebar ---------- */
.oc-wide{ max-width:1200px !important; }
.oc-wide .oc-hero, .oc-wide > #ocCaseCard .oc-pad > #ocView > .oc-fade{ }
#ocView > .oc-fade{ max-width:880px; margin-left:auto; margin-right:auto; }
.oc-shell{ display:grid; grid-template-columns:270px minmax(0,1fr); gap:28px; align-items:start; }
.oc-main{ min-width:0; }
.oc-side{ position:sticky; top:84px; max-height:calc(100vh - 100px); overflow:auto; border:1.5px solid var(--line); border-radius:18px; background:var(--soft); font-size:14px; }
.oc-side summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; }
.oc-side summary::-webkit-details-marker{ display:none; }
.oc-side .sum-l{ display:flex; flex-direction:column; line-height:1.25; } .oc-side .sum-l span{ font-size:12.5px; color:var(--muted); }
.oc-side .sum-r{ font-weight:800; color:var(--hl); }
.oc-side-in{ padding:0 12px 14px; }
.oc-side-home{ display:inline-flex; align-items:center; min-height:28px; padding:2px 4px; font-size:13px; font-weight:700; text-decoration:none; margin:0 0 6px 0; }
.oc-side-pct{ margin:0 4px 12px; } .oc-side-pct .oc-bar{ height:7px; } .oc-side-pct > span{ display:block; font-size:12px; color:var(--muted); margin-top:4px; }
.oc-side-mods{ list-style:none; margin:0; padding:0; display:grid; gap:3px; }
.oc-side-mods > li > a.sm{ display:flex; gap:9px; align-items:flex-start; padding:7px 8px; border-radius:11px; text-decoration:none; color:var(--ink); font-weight:700; line-height:1.3; }
.oc-side-mods > li > a.sm:hover{ background:var(--card); }
.oc-side-mods > li.cur > a.sm{ background:var(--card); box-shadow:inset 3px 0 0 var(--hl); }
.oc-side-mods > li.locked > a.sm{ opacity:.55; pointer-events:none; }
.oc-side .ic{ flex:0 0 24px; height:24px; border-radius:50%; display:grid; place-items:center; background:var(--chip); font-size:12px; font-weight:800; }
.oc-side li.done > a.sm .ic{ background:var(--okBg); color:var(--ok); }
.oc-side .tt{ display:flex; flex-direction:column; } .oc-side small{ display:block; font-weight:600; font-size:11.5px; color:var(--muted); }
.oc-side-les{ list-style:none; margin:2px 0 6px 20px; padding:0 0 0 12px; border-left:2px solid var(--line); display:grid; gap:1px; }
.oc-side-les a{ display:flex; gap:8px; align-items:flex-start; padding:5px 6px; border-radius:9px; text-decoration:none; color:var(--ink2); font-weight:600; font-size:13.5px; line-height:1.3; }
.oc-side-les a:hover{ background:var(--card); }
.oc-side-les .dot{ flex:0 0 20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:10.5px; font-weight:800; background:var(--chip); }
.oc-side-les li.done .dot{ background:var(--okBg); color:var(--ok); }
.oc-side-les li.me > a{ background:var(--card); color:var(--ink); font-weight:800; } .oc-side-les li.me .dot{ background:var(--hl); color:var(--card); }
.oc-side-les li.locked > a{ opacity:.55; pointer-events:none; }
#ocSideNeed{ color:var(--hl); }
@media (max-width:959px){
  .oc-shell{ grid-template-columns:1fr; gap:14px; }
  .oc-side{ position:sticky; top:64px; z-index:5; max-height:70vh; box-shadow:0 6px 18px rgba(0,26,78,.08); }
  .oc-side:not([open]){ overflow:hidden; }
  .oc-side summary::after{ content:"▾"; font-size:13px; color:var(--muted); margin-left:6px; } .oc-side[open] summary::after{ content:"▴"; }
}
@media (min-width:960px){ .oc-side summary{ pointer-events:none; } }
.oc-linkbtn{ background:none; border:0; padding:0; color:var(--hl); text-decoration:underline; font-size:inherit; cursor:pointer; }
/* differential counter: keep keys inside the box at any width */
.oc-count > *{ min-width:0; }
@media (min-width:640px){ .oc-count{ grid-template-columns:minmax(120px,200px) minmax(0,1fr); } }
.oc-keys{ grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)) !important; }
.oc-keys button{ min-width:0; overflow-wrap:anywhere; text-align:left; }
/* drag-and-drop ordering */
.oc-oi{ user-select:none; -webkit-user-select:none; }
@media (hover:hover) and (pointer:fine){ .oc-oi{ cursor:grab; } }
.oc-oi .grip{ flex:0 0 22px; height:30px; display:grid; place-items:center; font-size:18px; color:var(--muted); cursor:grab; touch-action:none; border-radius:6px; }
.oc-oi .grip:hover{ background:var(--chip); }
.oc-oi.dragging{ position:relative; z-index:3; cursor:grabbing; box-shadow:0 10px 26px rgba(0,26,78,.18); border-color:var(--hl); background:var(--card); }
.oc-ord.is-drag .oc-oi:not(.dragging){ transition:transform .12s; }
.oc-oi .mv button{ width:34px !important; height:26px !important; font-size:11px !important; }
.oc-oi .mv button[aria-disabled="true"]{ opacity:.4; cursor:not-allowed; }
/* cards activity */
.oc-cardcount{ color:var(--hl); font-weight:800; }
.oc-cards.big{ grid-template-columns:repeat(auto-fill, minmax(220px,1fr)) !important; }
.oc-cards.big .oc-flip{ flex-direction:column; align-items:stretch; text-align:left; }
.oc-cards.big .oc-flip svg, .oc-cards.big .oc-flip .oc-pic{ width:100%; height:auto; max-width:180px; aspect-ratio:1; flex:none; margin:0 auto 6px; }
/* tree v2 */
.oc-tnw{ display:flex; flex-direction:column; align-items:center; gap:3px; position:relative; }
.oc-tn small{ display:block; font-size:11px; font-weight:600; color:var(--muted); margin-top:1px; }
.oc-tn.root small, .oc-tn.root.placed small{ color:inherit; }
.oc-gfs{ display:flex; gap:4px; flex-wrap:wrap; justify-content:center; }
.oc-gf{ font-size:11px; font-weight:800; letter-spacing:.02em; padding:3px 9px; min-height:24px; border-radius:99px; background:#fff3c4; color:#7a4a00; border:1px solid #f0c95a; cursor:help; }
html[data-theme="dark"] .oc .oc-gf{ background:#3f3210; color:#fcd38d; border-color:#7a5a12; }
.oc-ttag{ font-size:11px; font-weight:800; color:var(--bad); text-align:center; max-width:190px; line-height:1.25; }
.oc-tchain{ display:flex; flex-direction:column; align-items:center; gap:0; }
.oc-tarrow{ font-size:12px; line-height:1; color:var(--muted); margin:2px 0; }
.oc-tn.step{ min-width:0; font-size:12.5px; padding:5px 8px; max-width:190px; }
.oc-tsplit.inner{ grid-template-columns:1.25fr 1fr !important; }
.oc-tsplit.pair{ grid-template-columns:1fr 1fr; gap:6px; }
.oc-tbr.sub{ background:rgba(255,255,255,.45); border:1px dashed var(--line); }
html[data-theme="dark"] .oc .oc-tbr.sub{ background:rgba(255,255,255,.03); }
.oc-tbr.ery{ background:rgba(214,92,120,.07); }
@media (max-width:760px){ .oc-tsplit.inner, .oc-tsplit.pair{ grid-template-columns:1fr !important; } }
/* where blood is made */
.oc-sites svg{ width:100%; height:auto; display:block; }
.oc-sites .ln{ fill:none; stroke-width:3.2; stroke-linejoin:round; stroke-linecap:round; }
.oc-sites .yolk{ --c:#d97706; } .oc-sites .liver{ --c:#b91c1c; } .oc-sites .spleen{ --c:#7c3aed; } .oc-sites .long{ --c:#0891b2; } .oc-sites .axial{ --c:#1e3a8a; }
html[data-theme="dark"] .oc .oc-sites .axial{ --c:#93c5fd; } html[data-theme="dark"] .oc .oc-sites .liver{ --c:#f87171; } html[data-theme="dark"] .oc .oc-sites .spleen{ --c:#c4b5fd; }
.oc-sites .ln{ stroke:var(--c); }
.oc-sites .ax, .oc-sites .tk{ stroke:var(--muted); stroke-width:1; opacity:.6; }
.oc-sites .tl{ fill:var(--muted); font-size:11px; font-family:inherit; }
.oc-sites .zl{ fill:var(--muted); font-size:11px; font-weight:700; font-family:inherit; }
.oc-sites .fet{ fill:var(--hlSoft); opacity:.55; }
.oc-sites .now{ stroke:var(--ink); stroke-width:1.6; }
.oc-sites-r{ width:100%; margin-top:4px; accent-color:var(--hl); }
.oc-sites-age{ font-size:16px; }
.oc-sites-key{ list-style:none; padding:0; margin:10px 0 6px; display:flex; flex-wrap:wrap; gap:6px 14px; font-size:13.5px; }
.oc-sites-key li{ display:flex; align-items:center; gap:6px; }
.oc-sites-key li svg{ opacity:.35; } .oc-sites-key li.on svg{ opacity:1; }
.oc-sites-key li.on{ font-weight:800; } .oc-sites-on{ color:var(--ok); }
/* each line also has its own dash pattern, so the graph can be read without colour */
.oc-sites .ln.yolk{ stroke-dasharray:1.5 5; } .oc-sites .ln.spleen{ stroke-dasharray:10 5; } .oc-sites .ln.long{ stroke-dasharray:16 4 3 4; }
.oc-sites-txt{ min-height:3.2em; background:var(--soft); border-radius:12px; padding:10px 12px; margin:8px 0; }
/* chromatin explainer */
.oc-subh{ font-size:17px; margin:18px 0 8px; }
.oc-chrom{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:12px; margin:6px 0 18px; }
.oc-chrom figure{ margin:0; border:1.5px solid var(--line); border-radius:16px; padding:12px; background:var(--card); }
.oc-chrom svg{ width:120px; height:120px; display:block; margin:0 auto 8px; }
.oc-chrom figcaption{ display:flex; flex-direction:column; gap:4px; font-size:14px; line-height:1.45; }
.oc-chrom figcaption b{ font-size:15.5px; } .oc-chrom em{ font-style:normal; font-size:12.5px; color:var(--hl); font-weight:700; }
.oc h1:focus, .oc h2:focus{ outline:none; }
.oc-tbr.sub .oc-tleaves{ display:grid; grid-template-columns:1fr 1fr; gap:8px 6px; align-items:end; }
.oc-tn.blank.step, .oc-tn.blank.leaf{ min-width:96px; }
.oc-sites .ghost .ln{ opacity:.13; stroke-dasharray:4 4; }

/* ---------- accessibility (WCAG 2.2 AA) ---------- */
.oc-sr{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.oc-skip{ position:absolute; left:-10000px; top:8px; z-index:10000; background:#001a4e; color:#fff; font-weight:800; padding:10px 16px; border-radius:10px; text-decoration:none; }
.oc-skip:focus{ left:12px; outline:3px solid #22d3ee; outline-offset:2px; }
html{ scroll-padding-top:150px; }   /* keeps focused controls clear of the sticky header and progress bar */
/* links inside text are underlined, not shown by colour alone */
.oc p a, .oc li a, .oc .oc-note a, .oc-crumb a, .oc-userbar a, .oc-disclaimer a{ text-decoration:underline; text-underline-offset:2px; }
/* form fields have a boundary with at least 3:1 contrast */
.oc-input, .oc-match select, .oc-calc input{ border-color:var(--field) !important; }
/* right / wrong marks (a symbol as well as colour) */
.oc-res{ margin-left:auto; font-weight:900; font-size:16px; padding-left:6px; flex:0 0 auto; }
.right > .oc-res{ color:var(--ok); } .wrong > .oc-res{ color:var(--bad); }
.oc-spot button{ position:relative; } .oc-spot button > .oc-res{ position:absolute; top:4px; right:8px; margin:0; padding:0 4px; border-radius:8px; background:var(--card); }
.oc-si > .oc-res{ order:3; }
.oc-opt.sel{ box-shadow:inset 0 0 0 1.5px var(--hl); } .oc-opt.sel .k{ background:var(--hl); color:var(--card); }
.oc-opt[role="radio"].sel::after{ content:"✓ Selected" / ""; margin-left:auto; padding-left:8px; font-weight:800; font-size:13px; color:var(--hl); white-space:nowrap; }
.oc-ord{ list-style:none; margin:0; padding:0; }
/* film anatomy: keyboard focus on a region */
.oc-film .zone:focus{ outline:none; } .oc-film .zone:focus-visible{ stroke:var(--focus); stroke-width:4; fill:rgba(8,145,178,.16); }
.oc-film-lab{ fill:var(--muted); font-size:13px; font-family:inherit; font-weight:700; }
.oc-act-h:focus{ outline:none; } .oc-act-h:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; }
.oc-countdone:focus{ outline:none; }
.oc-certtext{ max-width:760px; margin:0 auto 14px; font-size:14px; } .oc-certtext summary{ cursor:pointer; font-weight:700; color:var(--hl); }
/* respect "reduce motion": no animations, transitions or smooth scrolling */
@media (prefers-reduced-motion: reduce){ .oc *, .oc *::before, .oc *::after, .oc-toast{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } html{ scroll-behavior:auto; } }
/* ----- microscope activities (explorer, Köhler set-up, find the dirt) ----- */
.oc-scope{ display:grid; gap:16px; grid-template-columns:1fr; align-items:start; } @media (min-width:720px){ .oc-scope{ grid-template-columns:1fr 1fr; } }
.oc-scope-svg{ width:100%; max-width:300px; height:auto; display:block; margin:0 auto; }
.oc-scope-svg .part{ cursor:pointer; } .oc-scope-svg .part:focus{ outline:none; }
.oc-scope-svg .pin{ fill:#fff; stroke:#001a4e; stroke-width:2; } .oc-scope-svg .pinn{ font:800 12px system-ui,sans-serif; fill:#001a4e; pointer-events:none; }
.oc-scope-svg .part.seen .pin{ fill:#e6f6f0; stroke:#0d7a5f; } .oc-scope-svg .part.on .pin{ fill:#e0f4f8; stroke:#0e7490; stroke-width:3.5; }
.oc-scope-svg .part:hover .pin{ stroke-width:3.5; } .oc-scope-svg .part:focus-visible .pin{ stroke:#0891b2; stroke-width:5; } .oc-scope-svg .part:focus-visible{ outline:3px solid #0891b2; outline-offset:2px; }
.oc-scope-info{ margin-top:10px; background:var(--soft); border:1px solid var(--line); border-radius:12px; padding:10px 12px; font-size:14.5px; min-height:72px; }
.oc-view{ position:relative; width:min(100%,260px); aspect-ratio:1; margin:0 auto; border-radius:50%; overflow:hidden; background:#0c101a; box-shadow:0 0 0 6px #2b3447 inset, 0 6px 18px rgba(0,26,78,.18); }
.oc-view .zoom, .oc-view .slide, .oc-view .eyep, .oc-view .objl{ position:absolute; inset:0; transition:transform .3s, filter .25s, opacity .3s; }
.oc-view .zoom .g{ display:grid; width:100%; height:100%; } .oc-view .zoom .g svg{ width:100%; height:100%; display:block; border-radius:0; }
.oc-view .zoom .g3{ grid-template-columns:repeat(3,1fr); } .oc-view .zoom .g1{ grid-template-columns:1fr; }
.oc-view .zoom.z100{ transform:scale(1.9); } .oc-view .zoom.z40{ transform:scale(1.05); }
.oc-view .haze{ position:absolute; inset:0; background:radial-gradient(circle, rgba(255,255,255,.55), rgba(220,225,235,.8)); opacity:0; pointer-events:none; transition:opacity .3s; }
.oc-view .fd, .oc-view .kfd{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.oc-view .sp{ position:absolute; display:none; width:14px; height:10px; border-radius:50% 40% 55% 45%; background:#151515; left:34%; top:30%; box-shadow:4px 3px 0 -2px #151515; }
@media (prefers-reduced-motion: reduce){ .oc-view .zoom, .oc-view .slide, .oc-view .eyep, .oc-view .objl{ transition:none; } }
.oc-view-desc{ font-size:14.5px; color:var(--ink2); min-height:66px; margin-top:10px; }
.oc-objs{ border:1px solid var(--line); border-radius:12px; padding:8px 10px 10px; margin:4px 0 8px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.oc-objs legend{ font-weight:800; font-size:14px; padding:0 4px; }
.oc-objs button{ border:1.5px solid var(--line); background:var(--card); border-radius:10px; min-height:40px; padding:6px 12px; font-weight:700; }
.oc-objs button[aria-pressed="true"]{ background:var(--acc); color:var(--accInk); border-color:var(--acc); }
.oc-oil{ display:inline-flex; gap:6px; align-items:center; font-size:14px; font-weight:600; margin-left:4px; min-height:40px; } .oc-oil input{ width:20px; height:20px; accent-color:#0891b2; }
.oc-rg{ margin:4px 0 6px; } .oc-rg label{ display:block; font-weight:700; font-size:14px; } .oc-rg input[type=range]{ width:100%; accent-color:#0891b2; height:30px; }
.oc-scope-prog{ font-weight:700; }
.oc-kl{ list-style:none; padding:0; margin:0 0 10px; font-size:14.5px; } .oc-kl li{ padding:6px 8px; border-radius:10px; margin-bottom:4px; border:1px solid var(--line); }
.oc-kl li.done{ background:var(--okBg); border-color:transparent; } .oc-kl li.cur{ background:var(--hlSoft); border-color:var(--hl); font-weight:700; }
.oc-mcqart svg, .oc-mcqart .oc-pic{ width:160px; height:auto; }
/* ===== Full blood count course (shared): reports, worked cases, range explorer, analyser plots ===== */
.oc-rep{ margin:10px 0 16px; }
.oc-rep-h{ display:flex; flex-wrap:wrap; gap:4px 14px; align-items:baseline; font-size:14px; color:var(--ink2); margin-bottom:4px; }
.oc-rep-h b{ color:var(--ink); font-size:15px; }
.oc-rep .oc-tablewrap{ margin:4px 0 6px; }
.oc-rept{ width:100%; border-collapse:collapse; font-size:14.5px; font-variant-numeric:tabular-nums; }
.oc-rept th, .oc-rept td{ padding:5px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; }
.oc-rept thead th{ font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); background:var(--soft); }
.oc-rept tbody th{ font-weight:700; white-space:nowrap; }
.oc-rept td.v{ font-weight:800; white-space:nowrap; }
.oc-rept tr.sec th{ background:var(--soft); font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink2); }
.oc-flag{ display:inline-block; min-width:18px; padding:0 5px; border-radius:6px; border:1.5px solid currentColor; font-size:12px; font-weight:800; line-height:16px; text-align:center; }
.oc-rsel{ border:1.5px solid var(--line); background:var(--card); border-radius:10px; padding:3px 10px; font-weight:700; min-height:30px; text-align:left; }
.oc-rsel:hover{ border-color:var(--hl); } .oc-rsel.on{ background:var(--acc); color:var(--accInk); border-color:var(--acc); }
.oc-rsel.on::after{ content:" ✓"; }
.oc-rept th .oc-res{ margin-left:6px; font-weight:800; } .oc-rept th.right .oc-res{ color:var(--ok); } .oc-rept th.wrong .oc-res{ color:var(--bad); }
.oc-rep-flags{ font-size:14px; margin:4px 0; padding:6px 10px; border-radius:10px; background:var(--warnBg); color:var(--warnInk); }
.oc-rep-c{ font-size:14px; margin:4px 0; }
.oc-rep-foot{ font-size:12.5px; color:var(--muted); margin:2px 0 0; }
.oc-why{ flex:1 1 100%; font-size:13.5px; color:var(--ink2); }
.oc-step{ border-top:1.5px dashed var(--line); margin-top:14px; padding-top:10px; }
.oc-step:first-child{ border-top:0; margin-top:4px; padding-top:0; }
.oc-step-h{ font-size:14px !important; text-transform:uppercase; letter-spacing:.06em; color:var(--hl); margin:4px 0 6px !important; }
.oc-casebox{ border:1.5px solid var(--line); background:var(--soft); border-radius:16px; padding:12px 14px; margin:0 0 14px; }
.oc-casebox .oc-rep .oc-tablewrap{ background:var(--card); }
.oc-chipbtn{ border:1.5px solid var(--line); background:var(--card); border-radius:999px; padding:5px 12px; font-size:14px; font-weight:700; min-height:34px; }
.oc-chipbtn[aria-pressed="true"]{ background:var(--acc); color:var(--accInk); border-color:var(--acc); }
.oc-chipbtn[aria-pressed="true"]::before{ content:"✓ "; }
.oc-rg-params, .oc-rg-sex{ display:flex; flex-wrap:wrap; gap:6px; margin:6px 0; }
.oc-rgchart svg{ width:100%; height:auto; display:block; margin-top:6px; }
.oc-rgchart .gl{ stroke:var(--line); } .oc-rgchart .tl{ font-size:12px; fill:var(--muted); font-family:inherit; } .oc-rgchart .tl.on{ fill:var(--ink); font-weight:800; }
.oc-rgchart .bar{ fill:var(--hl); opacity:.35; } .oc-rgchart .bar.on{ opacity:1; }
.oc-rg-r{ width:100%; accent-color:var(--hl); min-height:28px; }
.oc-rg-txt{ font-size:15px; min-height:2.6em; margin:6px 0; }
.oc-fig svg.oc-plot, .oc-figs svg.oc-plot{ width:100%; max-width:420px; height:auto; border-radius:14px; }
.oc-figs svg.oc-plot{ max-width:none; }
.oc-mcqart svg.oc-plot{ width:100%; max-width:380px; }
.oc-qplot{ max-width:420px; margin:6px 0 12px; } .oc-qplot svg{ width:100%; height:auto; display:block; border-radius:14px; }
.oc-step .oc-fig svg.oc-plot{ max-width:380px; }
.oc-exfig{ margin:8px 0 4px; } .oc-exfig svg.oc-plot{ max-width:460px; } .oc-extxt{ min-height:3em; font-size:15px; }

/* ---------- tap to enlarge (every course picture) ---------- */
.oc-zw{ position:relative; display:inline-block; max-width:100%; vertical-align:top; }
.oc-figs .oc-zw, .oc-spot .oc-zw, .oc-qplot .oc-zw, .oc-exfig .oc-zw, .oc-count .cell .oc-zw, .oc-cards .oc-zw{ display:block; }
.oc-spot .oc-zw > button[data-i], .oc-cards .oc-zw > .oc-flip{ width:100%; height:100%; }
.oc-zoomable{ cursor:zoom-in; }
.oc .oc-zoom{ position:absolute; right:6px; bottom:6px; width:34px; height:34px; padding:0; display:grid; place-items:center; border-radius:999px;
  border:1.5px solid var(--line); background:var(--card); color:var(--ink); box-shadow:0 2px 8px rgba(0,26,78,.18); cursor:zoom-in; z-index:2; }
.oc .oc-zoom svg{ width:20px; height:20px; display:block; box-shadow:none; border-radius:0; }
.oc .oc-zoom:hover{ border-color:var(--hl); color:var(--hl); }
.oc .oc-zoom:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.oc-spot .oc-zw.ctl > .oc-zoom{ right:8px; bottom:30px; }          /* above the option letter */
.oc-cards .oc-zw.ctl > .oc-zoom{ left:58px; right:auto; bottom:auto; top:58px; width:28px; height:28px; }   /* corner of the small card picture */
.oc-cards.big .oc-zw.ctl > .oc-zoom{ left:auto; right:10px; top:10px; }
.oc-zoomdlg{ border:0; padding:0; border-radius:18px; width:min(96vw, 1000px); max-width:96vw; max-height:94vh; background:var(--card); color:var(--ink); box-shadow:0 20px 60px rgba(0,0,0,.35); }
.oc-zoomdlg::backdrop{ background:rgba(0,10,30,.72); }
.oc-zoombar{ position:sticky; top:0; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; background:var(--card); border-bottom:1px solid var(--line); z-index:1; }
.oc-zoombar h2{ margin:0; font-size:16px; }
.oc-zoombody{ padding:12px; display:flex; justify-content:center; }
.oc-zoombody > svg, .oc-zoombody > .oc-pic{ width:100%; max-width:min(90vw, 76vh); height:auto; aspect-ratio:1; border-radius:18px; box-shadow:none; display:block; }
.oc-zoombody > svg.oc-plot{ max-width:100%; aspect-ratio:auto; }
.oc-zoombody > .oc-pic img{ object-fit:contain; background:#000; }
.oc-zoomcap{ margin:0; padding:0 16px 14px; font-size:14px; color:var(--muted); text-align:center; }
.oc-zoomcap:empty{ display:none; }
html.oc-zoomopen{ overflow:hidden; }

/* ----- real film (Photo Library photograph with numbered cells) ----- */
.oc-field{ margin:4px 0 12px; }
.oc-field-scroll{ overflow:auto; border-radius:14px; border:1px solid var(--line); background:#ddd; -webkit-overflow-scrolling:touch; }
.oc-field-img{ position:relative; width:100%; line-height:0; }
.oc-field.big .oc-field-img{ width:200%; }
.oc-field.big .oc-field-scroll{ max-height:75vh; }
.oc-field-img img{ width:100%; height:auto; display:block; }
.oc-field-crop{ display:block; position:relative; width:100%; overflow:hidden; }
.oc-field-crop img{ position:absolute; max-width:none; height:auto; }
.oc .oc-ring{ position:absolute; transform:translate(-50%,-50%); aspect-ratio:1; min-height:30px; padding:0; border-radius:50%; background:transparent;
  border:3px solid #001a4e; box-shadow:0 0 0 2px rgba(255,255,255,.95), inset 0 0 0 2px rgba(255,255,255,.7); line-height:1; }
.oc .oc-ring:hover{ background:rgba(255,255,255,.18); }
.oc .oc-ring.sel{ border-color:#0e7490; border-width:5px; }
.oc .oc-ring.right{ border-color:#0d7a5f; } .oc .oc-ring.wrong{ border-color:#b42335; border-style:dashed; }
.oc .oc-ring:focus-visible{ outline:3px solid #0891b2; outline-offset:3px; border-radius:50%; }
.oc-ring-n{ position:absolute; right:-10px; top:-12px; min-width:22px; height:22px; padding:0 5px; border-radius:11px; background:#001a4e; color:#fff;
  font-size:13px; font-weight:800; line-height:22px; text-align:center; box-shadow:0 0 0 2px #fff; }
.oc-ring.sel .oc-ring-n{ background:#0e7490; }
.oc .oc-ring > .oc-res{ position:absolute; left:-12px; top:-12px; margin:0; padding:0; width:22px; height:22px; line-height:22px; border-radius:11px; text-align:center; font-size:14px;
  background:#fff; box-shadow:0 0 0 2px currentColor; }
.oc .oc-ring.right > .oc-res{ color:#0d7a5f; } .oc .oc-ring.wrong > .oc-res{ color:#b42335; }
.oc-field-bar{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between; margin-top:6px; }
.oc-field-info{ margin:10px 0 4px; padding:10px 14px; border-radius:12px; background:var(--soft); border:1px solid var(--line); min-height:46px; }
.oc-field-key{ margin-top:10px; padding:10px 14px; border-radius:12px; border:1px solid var(--line); font-size:14.5px; }
.oc-field-key ul{ margin:0; padding-left:18px; }
.oc-field-tk{ margin:6px 0 8px; }

/* ===== ONLY CELLS — course shop pages (courses page, course details, basket, account, organisations) =====
   Built on the player's colours (.oc variables), so light and dark mode follow the site theme. */
.oc-shop .vh{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.oc-shop{ --gold:#8a5a00; --goldBg:#fff4dc; --navy:#001a4e; }
html[data-theme="dark"] .oc-shop{ --gold:#fcd38d; --goldBg:#3a2c14; }
.oc-shop h2{ scroll-margin-top:90px; }
.oc-shop img{ max-width:100%; }

/* top strip: who is signed in, basket */
.sh-strip{ display:flex; flex-wrap:wrap; gap:6px 14px; justify-content:space-between; align-items:center; font-size:14px; color:var(--muted); margin:-6px 0 14px; }
.sh-strip a{ font-weight:700; }
.sh-strip .sh-links{ display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; margin:0; padding:0; list-style:none; }
.sh-basket-link{ display:inline-flex; align-items:center; gap:6px; }
.sh-count{ display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 6px; border-radius:99px; background:var(--acc); color:var(--accInk); font-size:12.5px; font-weight:800; }

/* hero */
.sh-hero{ display:grid; gap:22px; grid-template-columns:1fr; align-items:stretch; margin:0 0 30px; }
@media (min-width:900px){ .sh-hero{ grid-template-columns:1.25fr 1fr; gap:30px; } }
.sh-hero h1{ font-size:32px; }
@media (min-width:640px){ .sh-hero h1{ font-size:42px; } }
.sh-hero .oc-lead{ font-size:18px; }
.sh-points{ list-style:none; padding:0; margin:16px 0 20px; display:grid; gap:8px; grid-template-columns:1fr; }
@media (min-width:560px){ .sh-points{ grid-template-columns:1fr 1fr; } }
.sh-points li{ display:flex; gap:10px; align-items:flex-start; font-weight:650; color:var(--ink2); line-height:1.35; }
.sh-points .ic{ flex:0 0 28px; height:28px; border-radius:9px; display:grid; place-items:center; background:var(--hlSoft); color:var(--hl); font-size:15px; }
.sh-photo{ position:relative; border-radius:22px; overflow:hidden; min-height:180px; background:#dfe9e3; box-shadow:0 14px 30px rgba(0,26,78,.16); }
.sh-photo img{ display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }
.sh-photo figcaption{ position:absolute; left:10px; bottom:10px; background:rgba(0,26,78,.82); color:#fff; font-size:12.5px; font-weight:700; padding:4px 10px; border-radius:99px; }
.sh-side{ display:grid; gap:14px; align-content:start; }

/* panels (sign in, my courses, price box) */
.sh-panel{ border:1.5px solid var(--line); background:var(--card); border-radius:20px; padding:18px; box-shadow:0 10px 26px rgba(0,26,78,.08); }
.sh-panel h2{ margin:0 0 4px; font-size:20px; }
.sh-panel label{ display:block; font-weight:800; margin-top:10px; }
.sh-panel .oc-input{ max-width:none; margin-top:4px; }
.sh-panel .oc-btn{ margin-top:14px; }
.sh-panel p{ font-size:14.5px; }
.sh-mine{ list-style:none; padding:0; margin:10px 0 0; display:grid; gap:8px; }
.sh-mine li{ display:flex; gap:10px; align-items:center; border:1px solid var(--line); border-radius:14px; padding:8px 10px; }
.sh-mine .t{ font-weight:800; line-height:1.25; }
.sh-mine .u{ font-size:13px; color:var(--muted); }
.sh-mine .oc-btn{ margin:0 0 0 auto; }

/* section headings */
.sh-sec{ margin-top:34px; }
.sh-sec > h2{ font-size:26px; margin:0 0 4px; }
.sh-sec > p{ color:var(--ink2); max-width:70ch; }

/* course cards */
.sh-grid{ list-style:none; padding:0; margin:16px 0 0; display:grid; gap:18px; grid-template-columns:1fr; }
@media (min-width:640px){ .sh-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1020px){ .sh-grid.three{ grid-template-columns:1fr 1fr 1fr; } }
.sh-card{ height:100%; display:flex; flex-direction:column; border:1.5px solid var(--line); background:var(--card); border-radius:22px; overflow:hidden; box-shadow:0 8px 22px rgba(0,26,78,.07); transition:box-shadow .15s, border-color .15s; }
.sh-card:hover{ border-color:var(--hl); box-shadow:0 14px 30px rgba(0,26,78,.13); }
.sh-card .sh-img{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--soft); }
.sh-card.soon .sh-img{ filter:grayscale(.55) contrast(.95); }
.sh-body{ display:flex; flex-direction:column; gap:6px; padding:16px 18px 18px; flex:1; }
.sh-kick{ font-size:12px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--hl); margin:0 !important; }
.sh-card h3{ font-size:21px; line-height:1.2; margin:0; }
.sh-card h3 a{ color:var(--ink); text-decoration:none; }
.sh-card h3 a:hover{ text-decoration:underline; }
.sh-sub{ font-weight:700; color:var(--ink2); margin:0 !important; }
.sh-desc{ color:var(--ink2); font-size:15px; margin:0 !important; }
.sh-chips{ list-style:none; padding:0; margin:4px 0 0; display:flex; flex-wrap:wrap; gap:6px; }
.sh-chips li{ font-size:12.5px; font-weight:700; padding:3px 9px; border-radius:99px; background:var(--chip); color:var(--ink2); }
.sh-foot{ margin-top:auto; padding-top:12px; display:grid; gap:10px; }
.sh-price{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin:0 !important; }
.sh-price b{ font-size:24px; font-weight:850; font-weight:800; color:var(--ink); }
.sh-price s{ color:var(--muted); font-weight:700; }
.sh-price .per{ font-size:13.5px; color:var(--muted); }
.sh-tag{ display:inline-block; font-size:12px; font-weight:800; padding:3px 9px; border-radius:99px; background:var(--chip); color:var(--ink2); }
.sh-tag.ok{ background:var(--okBg); color:var(--ok); }
.sh-tag.soon{ background:var(--goldBg); color:var(--gold); }
.sh-tag.sale{ background:var(--badBg); color:var(--bad); }
.sh-actions{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.sh-actions form{ margin:0; }

/* organisations band */
.sh-band{ margin-top:36px; border-radius:24px; padding:22px; background:linear-gradient(120deg,#001a4e 0%,#0b3a6e 55%,#0e7490 100%); color:#fff; display:grid; gap:16px; grid-template-columns:1fr; align-items:center; }
@media (min-width:820px){ .sh-band{ grid-template-columns:1.6fr 1fr; padding:28px 32px; } }
.sh-band h2{ color:#fff; margin:0 0 6px; font-size:26px; }
.sh-band p{ color:#e6eefc; margin:0 0 8px; }
.sh-band ul{ margin:6px 0 0; padding-left:20px; color:#e6eefc; list-style:disc; }
.oc-shop .sh-band .oc-btn{ background:#fff; color:#001a4e !important; border-color:#fff; }
.oc-shop .sh-band .oc-btn.ghost{ background:transparent; color:#fff !important; border-color:rgba(255,255,255,.7); }
.sh-band a:not(.oc-btn){ color:#fff; }
.sh-band :focus-visible{ outline-color:#fff; }

/* feature tiles */
.sh-tiles{ list-style:none; padding:0; margin:14px 0 0; display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:640px){ .sh-tiles{ grid-template-columns:1fr 1fr; } }
@media (min-width:1020px){ .sh-tiles{ grid-template-columns:repeat(4,1fr); } }
.sh-tiles li{ border:1px solid var(--line); background:var(--soft); border-radius:18px; padding:16px; }
.sh-tiles .ic{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--card); font-size:20px; margin-bottom:8px; box-shadow:0 4px 10px rgba(0,26,78,.08); }
.sh-tiles b{ display:block; font-size:16px; margin-bottom:4px; }
.sh-tiles span{ color:var(--ink2); font-size:14.5px; }
.sh-pay{ display:flex; flex-wrap:wrap; gap:6px; list-style:none; padding:0; margin:8px 0 0; }
.sh-pay li{ font-size:12.5px; font-weight:800; border:1px solid var(--line); border-radius:8px; padding:4px 9px; color:var(--ink2); background:var(--card); }

/* course details page */
.sh-detail{ display:grid; gap:24px; grid-template-columns:1fr; }
@media (min-width:900px){ .sh-detail{ grid-template-columns:1fr 340px; align-items:start; } .sh-detail .sh-buy{ position:sticky; top:90px; } }
.sh-detail .sh-img{ width:100%; border-radius:20px; aspect-ratio:16/9; object-fit:cover; display:block; margin:12px 0 4px; }
.sh-outcomes{ list-style:none; padding:0; margin:10px 0 0; display:grid; gap:8px; }
.sh-outcomes li{ display:flex; gap:10px; align-items:flex-start; }
.sh-outcomes li::before{ content:"✓"; flex:0 0 24px; height:24px; border-radius:50%; display:grid; place-items:center; background:var(--okBg); color:var(--ok); font-weight:800; font-size:13px; margin-top:1px; }
.sh-modlist{ list-style:none; padding:0; margin:10px 0 0; display:grid; gap:8px; }
.sh-modlist details{ border:1.5px solid var(--line); border-radius:16px; background:var(--card); }
.sh-modlist summary{ cursor:pointer; padding:12px 14px; display:flex; gap:12px; align-items:center; font-weight:800; list-style:none; border-radius:16px; }
.sh-modlist summary::-webkit-details-marker{ display:none; }
.sh-modlist summary .n{ flex:0 0 36px; height:36px; border-radius:11px; display:grid; place-items:center; background:var(--chip); }
.sh-modlist summary .m{ margin-left:auto; font-size:12.5px; color:var(--muted); font-weight:700; white-space:nowrap; }
.sh-modlist summary::after{ content:"+"; font-size:20px; color:var(--muted); margin-left:6px; }
.sh-modlist details[open] summary::after{ content:"−"; }
.sh-modlist .in{ padding:0 14px 12px 62px; color:var(--ink2); font-size:15px; }
.sh-buy .sh-price b{ font-size:30px; }
.sh-incl{ list-style:none; padding:0; margin:10px 0 0; display:grid; gap:6px; font-size:14.5px; }
.sh-incl li::before{ content:"✓ "; color:var(--ok); font-weight:800; }

/* basket, checkout, receipts */
.sh-table{ width:100%; border-collapse:collapse; margin:8px 0; }
.sh-table th, .sh-table td{ text-align:left; padding:10px 8px; border-bottom:1px solid var(--line); vertical-align:middle; }
.sh-table th{ font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.sh-table .r{ text-align:right; }
.sh-table tfoot td, .sh-table tfoot th{ border-bottom:0; }
.sh-table tr.total td, .sh-table tr.total th{ font-size:18px; font-weight:800; color:var(--ink); text-transform:none; letter-spacing:0; border-top:2px solid var(--ink); }
.sh-table tr.off td{ color:var(--ok); font-weight:700; }
.sh-tablewrap{ overflow-x:auto; }
.sh-methods{ border:0; padding:0; margin:12px 0; display:grid; gap:8px; }
.sh-methods legend{ font-weight:800; font-size:17px; margin-bottom:6px; padding:0; }
.sh-methods label{ display:flex; gap:12px; align-items:center; border:1.5px solid var(--line); border-radius:14px; padding:10px 14px; cursor:pointer; font-weight:700; margin:0; }
.sh-methods label:has(input:checked){ border-color:var(--hl); background:var(--hlSoft); }
.sh-methods input{ width:20px; height:20px; accent-color:var(--hl); flex:0 0 auto; }
.sh-methods .h{ display:block; font-weight:500; font-size:13.5px; color:var(--muted); }
.sh-check{ display:flex; gap:10px; align-items:flex-start; margin:12px 0; font-weight:600; }
.sh-check input{ width:20px; height:20px; margin-top:2px; accent-color:var(--hl); flex:0 0 auto; }
.sh-banner{ border-radius:14px; padding:12px 14px; margin:0 0 16px; font-weight:700; background:var(--warnBg); color:var(--warnInk); border:1.5px dashed currentColor; }
.sh-form label{ display:block; font-weight:800; margin-top:12px; }
.sh-form .oc-input{ margin-top:4px; max-width:420px; }
.sh-form .hint{ font-size:13.5px; color:var(--muted); font-weight:500; display:block; }
.sh-form .oc-btn{ margin-top:14px; }
.sh-two{ display:grid; gap:22px; grid-template-columns:1fr; }
@media (min-width:860px){ .sh-two{ grid-template-columns:1fr 1fr; } }
.sh-twoR{ display:grid; gap:22px; grid-template-columns:1fr; }
@media (min-width:860px){ .sh-twoR{ grid-template-columns:1.5fr 1fr; align-items:start; } }
.sh-tiers{ list-style:none; padding:0; margin:8px 0; display:grid; gap:6px; }
.sh-tiers li{ display:flex; justify-content:space-between; gap:10px; border-bottom:1px dashed var(--line); padding:4px 0; }
.sh-ticks{ border:0; padding:0; margin:12px 0 0; }
.sh-ticks legend{ font-weight:800; padding:0; margin-bottom:4px; }
.sh-ticks label{ display:flex; gap:10px; align-items:center; font-weight:600; margin:6px 0 0; }
.sh-ticks input{ width:20px; height:20px; accent-color:var(--hl); }
.sh-num{ font-variant-numeric:tabular-nums; }
.sh-seatbar{ height:8px; border-radius:99px; background:var(--chip); overflow:hidden; margin-top:4px; max-width:220px; }
.sh-seatbar i{ display:block; height:100%; background:var(--hl); }
.sh-linkbtn{ background:none; border:0; padding:0; color:var(--hl); text-decoration:underline; text-underline-offset:2px; font-weight:700; cursor:pointer; font-size:inherit; }
.sh-inline{ display:inline; margin:0; }
.sh-staff td .oc-small{ display:block; }
.sh-mt{ margin-top:22px; }
.oc-shop td a{ text-decoration:underline; text-underline-offset:2px; }