/* NEW — real code blocks. A coding course needs indentation to survive, so multi-line code is a 
, never a stack of inline  lines. Navy to
   match the brand; the orange rule marks it as "type this". */
li.cb { list-style:none; margin-left:-18px; }
.codeblock { margin:8px 0 4px; border-radius:6px; overflow:hidden; border:1px solid #0d2645; }
.codeblock .cb-h { display:flex; align-items:center; gap:10px; background:#0d2645; color:#9fb0c8; font:700 10.5px/1 'Segoe UI',Arial,sans-serif; letter-spacing:.12em; text-transform:uppercase; padding:7px 12px; }
.codeblock .cb-h .fn { color:#ffffff; letter-spacing:.02em; text-transform:none; font-family:Consolas,Monaco,monospace; font-size:12px; font-weight:600; }
.codeblock .cb-h .typ { margin-left:auto; color:#fc2b03; }
.codeblock pre { margin:0; background:#021937; color:#e8eef7; padding:12px 14px; overflow-x:auto; font:13px/1.55 Consolas,Monaco,'Cascadia Code',monospace; tab-size:4; border-left:4px solid #fc2b03; }
.codeblock pre code { background:none; border:0; padding:0; color:inherit; font:inherit; border-radius:0; }
.codeblock pre.bash { border-left-color:#5b7699; }
.codeblock .out-h { background:#e9eef4; color:#021937; font:800 10px/1 'Segoe UI',Arial,sans-serif; letter-spacing:.14em; padding:6px 12px; border-top:1px solid #0d2645; }
.codeblock pre.out { background:#f7f9fb; color:#1f2d3d; border-left:4px solid #2e7d32; }
.tk-k { color:#ff8a65; font-weight:600; } .tk-s { color:#a5d6a7; } .tk-c { color:#7f93ad; font-style:italic; }
.tk-n { color:#ffd180; } .tk-b { color:#81d4fa; } .tk-d { color:#ce93d8; }


code { background:#eef2f7; border:1px solid #dbe3ee; border-radius:3px; padding:1px 5px; font-family:Consolas,Monaco,'Cascadia Code',monospace; font-size:12.5px; color:#021937; }
.codeblock pre code { background:none; border:0; padding:0; color:inherit; font:inherit; }
.hsay img { width:24px; height:24px; border-radius:50%; object-fit:cover; display:block; }
a.stl { color:inherit; text-decoration:none; } a.stl:hover { color:var(--orange); text-decoration:underline; }
.sn.ok { background:#2e7d32; color:#fff; }
ol.sessions .dt { font-size:11.5px; color:var(--mut); white-space:nowrap; }
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
.kpis div { background:var(--bg); border-left:3px solid var(--navy); border-radius:5px; padding:14px 16px; }
.kpis div:nth-child(2) { border-left-color:var(--orange); }
.kpis b { display:block; color:var(--navy); font-size:30px; line-height:1.1; } .kpis b small { font-size:15px; color:var(--mut); }
.kpis span { font-size:12.5px; color:var(--mut); }
.kpis .go { display:flex; align-items:center; background:var(--navy); border-left-color:var(--orange); }
.kpis .go a { color:#fff; font-weight:700; text-decoration:none; font-size:15px; }
table.cmp td a { color:var(--orange); font-weight:700; text-decoration:none; }
.pickt { cursor:pointer; display:block; position:relative; }
.pickt input { position:absolute; right:18px; top:20px; width:20px; height:20px; accent-color:#fc2b03; }
.pickt:has(input:checked) { box-shadow:0 0 0 3px var(--orange); }
.redeem { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.redeem label { flex:1; min-width:240px; font-size:12px; font-weight:700; letter-spacing:.06em; color:var(--navy); text-transform:uppercase; }
.redeem input { display:block; width:100%; margin-top:6px; font:15px Consolas,Monaco,monospace; padding:11px 12px; border:1px solid #c1cddd; border-radius:6px; }
.redeem .cta { border:0; cursor:pointer; font-family:inherit; }
.buy.off { background:#dfe4ea; color:#78828f; border-color:#dfe4ea; pointer-events:none; font-style:italic; font-weight:600; }
/* assessment engine */
.pp-meta { display:flex; gap:10px; flex-wrap:wrap; margin:6px 0 16px; }
.pp-meta span { background:var(--bg); border:1px solid var(--line); border-radius:4px; padding:4px 10px; font-size:12.5px; color:var(--navy); font-weight:600; }
.pp-off { background:#fff6f4; border-left:3px solid var(--orange); border-radius:4px; padding:11px 13px; font-size:13.5px; margin:12px 0; display:flex; gap:12px; align-items:center; }
.pp-off img { width:40px; height:40px; border-radius:50%; flex:none; filter:grayscale(1); opacity:.8; }
.pq { border:1px solid var(--line); border-left:4px solid #dbe3ee; border-radius:7px; padding:16px 18px; margin-bottom:12px; }
.pq.answered { border-left-color:var(--navy); }
.pq .qh { display:flex; gap:10px; align-items:baseline; }
.pq .qn { flex:none; background:var(--navy); color:#fff; font-weight:800; font-size:11.5px; border-radius:4px; padding:2px 8px; }
.pq .qt { color:var(--navy); font-weight:600; font-size:14.5px; }
.pq .qx { font-size:11px; color:var(--mut); margin-left:auto; white-space:nowrap; }
.pq .codeblock { margin:10px 0 4px; }
.pq label.opt { display:flex; gap:10px; align-items:flex-start; padding:8px 10px; border:1px solid var(--line); border-radius:6px; margin-top:7px; cursor:pointer; font-size:14px; }
.pq label.opt:hover { background:#f7f9fb; }
.pq label.opt input { margin-top:3px; accent-color:#021937; }
.pq label.opt:has(input:checked) { border-color:var(--navy); background:#eef2f7; }
.pq.right { border-left-color:#2e7d32; } .pq.wrong { border-left-color:#b32a08; }
.pq label.opt.is-right { border-color:#2e7d32; background:#f0f7f1; }
.pq label.opt.is-wrong { border-color:#b32a08; background:#fff1ed; }
.pq .why { margin-top:10px; background:#f0f7f1; border-left:4px solid #2e7d32; padding:10px 14px; border-radius:0 4px 4px 0; font-size:13.5px; color:#33503a; }
.pq.wrong .why { background:#fff6f4; border-left-color:#b32a08; color:#59493f; }
.pq .why a { color:var(--orange); font-weight:700; }
.pp-bar { position:sticky; bottom:0; z-index:20; background:var(--navy); color:#fff; border-radius:9px 9px 0 0; padding:12px 18px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; box-shadow:0 -4px 16px rgba(2,25,55,.25); }
.pp-bar .t { font:800 18px Consolas,Monaco,monospace; color:#fff; } .pp-bar .t.low { color:#fc2b03; }
.pp-bar .c { color:#a9b7c6; font-size:13px; }
.pp-bar button { margin-left:auto; background:var(--orange); color:#fff; border:0; border-radius:6px; font:700 15px 'Segoe UI',Arial,sans-serif; padding:10px 22px; cursor:pointer; }
.pp-start { background:var(--orange); color:#fff; border:0; border-radius:6px; font:700 15px 'Segoe UI',Arial,sans-serif; padding:12px 30px; cursor:pointer; }
.score { display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.score .big { font-size:46px; font-weight:800; line-height:1; color:#0b6e3b; } .score .big.fail { color:#b32a08; }
.score .big small { font-size:18px; color:var(--mut); }
.score .verdict b { display:block; color:var(--navy); font-size:17px; }
.topics { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:8px; margin-top:14px; }
.topics div { background:var(--bg); border-radius:5px; padding:8px 11px; font-size:13px; display:flex; justify-content:space-between; }
.topics div.weak { background:#fff1ed; } .topics b { color:var(--navy); }
@media print { .pp-bar, footer { display:none; } }

a.chip { display:inline-block; margin:4px 4px 0 0; background:#fff1ed; border:1px solid #f3c2b5; color:#b32a08; font-size:12.5px; font-weight:700; padding:3px 10px; border-radius:999px; text-decoration:none; }
a.chip:hover { background:#ffe4dc; }
.pq .why a, #result a { color:var(--orange); }
.legal h4 { color:var(--navy); font-size:15px; margin:20px 0 8px; }
.legal p { font-size:14.5px; margin-bottom:10px; }

/* Drag-and-drop upload (session assignment boxes and the progress page) */
.cp-drop { margin:12px 0 4px; }
.cp-drop .dz { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-align:center; cursor:pointer; border:2px dashed #b9c2cd; border-radius:8px; padding:20px 16px; background:#f7f9fb; transition:background .15s,border-color .15s; }
.cp-drop .dz input { display:none; }
.cp-drop .dz b { color:#021937; font-size:15px; }
.cp-drop .dz .dz-sub { font-size:12.5px; color:#78828f; }
.cp-drop .dz .dz-ic { font-size:26px; line-height:1; color:#fc2b03; }
.cp-drop .dz:hover, .cp-drop .dz:focus-visible { border-color:#fc2b03; background:#fff6f4; outline:none; }
.cp-drop .dz.over { border-color:#fc2b03; border-style:solid; background:#fff1ed; }
.cp-drop.dark .dz { background:#0d2645; border-color:#3b587d; }
.cp-drop.dark .dz b { color:#fff; } .cp-drop.dark .dz .dz-sub { color:#9fb0c8; }
.cp-drop.dark .dz:hover, .cp-drop.dark .dz:focus-visible, .cp-drop.dark .dz.over { background:#132f55; border-color:#fc2b03; }
.cp-drop.dark .dz code { background:#021937; border-color:#1b3355; color:#e8eef7; }
.cp-drop .dz-file { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px; padding:10px 12px; border-radius:6px; background:#fff; border:1px solid #dfe4ea; font-size:13.5px; }
.cp-drop.dark .dz-file { background:#0d2645; border-color:#1b3355; color:#e8eef7; }
.cp-drop .dz-file .fn { font-weight:700; color:#021937; word-break:break-all; } .cp-drop.dark .dz-file .fn { color:#fff; }
.cp-drop .dz-file .sz { color:#78828f; font-size:12px; }
.cp-drop .dz-file .ok { background:#2e7d32; color:#fff; font-size:11.5px; font-weight:700; padding:2px 8px; border-radius:999px; }
.cp-drop .dz-send { margin-left:auto; background:#fc2b03; color:#fff; border:0; border-radius:6px; font:700 14px 'Segoe UI',Arial,sans-serif; padding:9px 18px; cursor:pointer; }
.cp-drop .dz-send:disabled { background:#3a4757; color:#c6d0dc; cursor:wait; }
.cp-drop .dz-x { background:none; border:0; font-size:20px; line-height:1; color:#78828f; cursor:pointer; }
.cp-drop .dz-msg { margin-top:10px; font-size:13.5px; line-height:1.55; padding:10px 12px; border-radius:6px; background:#f2f4f7; color:#555; }
.cp-drop .dz-msg.bad { background:#fff1ed; color:#7a2410; border-left:3px solid #b32a08; }
.cp-drop .dz-msg.good { background:#f0f7f1; color:#1b5e20; border-left:3px solid #2e7d32; }
.cp-drop .dz-msg.wait { background:#fff6f4; color:#59493f; border-left:3px solid #fc2b03; }
.cp-drop .dz-msg a { color:#fc2b03; font-weight:700; }

/* Word / Google Doc switch */
.cp-drop .dz-tabs { display:inline-flex; gap:0; margin-bottom:8px; border:1px solid #c1cddd; border-radius:6px; overflow:hidden; }
.cp-drop .dz-tabs button { background:#fff; border:0; padding:6px 14px; font:700 12.5px 'Segoe UI',Arial,sans-serif; color:#021937; cursor:pointer; }
.cp-drop .dz-tabs button + button { border-left:1px solid #c1cddd; }
.cp-drop .dz-tabs button.on { background:#021937; color:#fff; }
.cp-drop.dark .dz-tabs { border-color:#3b587d; }
.cp-drop.dark .dz-tabs button { background:#0d2645; color:#c6d0dc; }
.cp-drop.dark .dz-tabs button + button { border-left-color:#3b587d; }
.cp-drop.dark .dz-tabs button.on { background:#fc2b03; color:#fff; }
.cp-drop .dz[hidden], .cp-drop .gd[hidden] { display:none; }
.cp-drop .gd { border:2px dashed #b9c2cd; border-radius:8px; padding:14px 16px; background:#f7f9fb; font-size:13.5px; color:#555; }
.cp-drop .gd > b { color:#021937; font-size:14.5px; }
.cp-drop .gd ol { margin:8px 0 10px 20px; } .cp-drop .gd li { margin-bottom:4px; }
.cp-drop .gd-row { display:flex; gap:8px; flex-wrap:wrap; }
.cp-drop .gd-url { flex:1; min-width:220px; font:13.5px Consolas,Monaco,monospace; padding:9px 10px; border:1px solid #c1cddd; border-radius:6px; }
.cp-drop .gd-go { background:#021937; color:#fff; border:0; border-radius:6px; font:700 13.5px 'Segoe UI',Arial,sans-serif; padding:9px 16px; cursor:pointer; }
.cp-drop .gd-note { font-size:12px; color:#78828f; margin-top:8px; }
.cp-drop.dark .gd { background:#0d2645; border-color:#3b587d; color:#c3d0e0; }
.cp-drop.dark .gd > b { color:#fff; } .cp-drop.dark .gd-note { color:#9fb0c8; }
.cp-drop.dark .gd-url { background:#021937; border-color:#3b587d; color:#e8eef7; }
.cp-drop.dark .gd-go { background:#fc2b03; }
.cp-drop.dark .gd code { background:#021937; border-color:#1b3355; color:#e8eef7; }

/* Small phones (16 Sep 2026): the comparison tables on the home page, the
   doctrine card and the progress page were wider than a 320px screen at
   their desktop padding. Below 360px they scroll inside themselves. Linked as extra.css?v=3 so a cached copy
   is not reused. Checked by tools/layout-check.py at 320px. */
@media (max-width:420px) { table.cmp th, table.cmp td { padding:8px 7px; } }
@media (max-width:360px) { table.cmp { display:block; overflow-x:auto; } }   /* the smallest phones: the table scrolls, the page does not */

/* ---- reviews ---------------------------------------------------------
   Added 18 Sep 2026 with the graduate reviews. Used by index.html's live
   strip and by the console; reviews.html carries its own richer copy of the
   same look in a