/* CTH Skills Hub — learning surface.
   Same brand as the main site; calmer, because people read here. */
:root{
  --ink:#131c2b;        --ink-soft:#5a6678;   --ink-faint:#8d98a8;
  --surface:#f7f8fa;    --card:#ffffff;       --line:#e2e7ee;
  --navy:#0B1F3A;       --navy-soft:#1b3356;
  --gold:#A8862F;       --gold-lift:#C8A84B;  --gold-wash:#f6f0dd;
  --good:#166534;       --good-wash:#eff9f1;  --good-line:#a9ddb8;
  --warn:#8a2b2b;       --warn-wash:#fcf1f1;  --warn-line:#e8b4b4;
  --display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --body:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:12px;
  --shadow:0 1px 3px rgba(11,31,58,.07), 0 1px 2px rgba(11,31,58,.04);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--surface);color:var(--ink);font-family:var(--body);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.14}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── Chrome ──────────────────────────────────────────────── */
.top{background:var(--navy);color:#fff;position:sticky;top:0;z-index:20}
.top-in{max-width:1060px;margin:0 auto;padding:.75rem 16px;
  display:flex;align-items:center;gap:.9rem}

/* The badge matches the main site's: same size, same serif, same gold. */
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto;min-width:0}
.mark{flex:0 0 auto;width:42px;height:42px;border-radius:7px;
  background:linear-gradient(135deg,#C8A84B,#A8862F);
  color:var(--navy);display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:19px;line-height:1}
.brand-words b{font-family:var(--display);font-size:17px;font-weight:600;line-height:1.2;
  color:#fff;white-space:nowrap}
/* Scoped to the wording. An unscoped `.brand span` also matched .mark and,
   being more specific, painted the CTH badge gold on gold — invisible. */
.brand-words span{display:block;font-size:10px;color:rgba(200,168,75,.85);
  letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}

.top nav{margin-left:auto;display:flex;align-items:center;gap:.3rem;
  min-width:0;flex-wrap:wrap;justify-content:flex-end}
.top nav a{padding:.45rem .6rem;border-radius:7px;font-size:13.5px;color:#cfdaea;
  white-space:nowrap}
.top nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.top nav a.cta{background:var(--gold-lift);color:#0B1F3A;font-weight:600}
.top nav a.cta:hover{background:#d9bc6c}

/* The initial is a link to the account page, and always sits last. */
.avatar{flex:0 0 auto;width:32px;height:32px;border-radius:50%;
  background:var(--gold-lift);color:#0B1F3A;display:grid;place-items:center;
  font-size:12px;font-weight:700;margin-left:.15rem}
a.avatar:hover{background:#d9bc6c;box-shadow:0 0 0 3px rgba(200,168,75,.28)}
.top .nav-end{flex:0 0 auto;display:flex;align-items:center;gap:.3rem}

/* ── The header on smaller screens ───────────────────────── */
/* The wording beside the badge is the first thing to go, exactly as on the
   main site. Below that the links move to their own row and scroll sideways,
   rather than wrapping on top of the badge. */
@media(max-width:1000px){
  .brand-words{display:none}
  .top nav a{padding:.4rem .55rem;font-size:13px}
}
@media(max-width:700px){
  .top-in{flex-wrap:wrap;row-gap:.55rem;padding:.6rem 16px}
  .brand{order:1}
  .top .nav-end{order:2;margin-left:auto;display:flex;align-items:center;gap:.3rem}
  .top nav{order:3;width:100%;margin-left:0;flex-wrap:nowrap;overflow-x:auto;
    justify-content:flex-start;gap:.15rem;
    scrollbar-width:none;-ms-overflow-style:none;
    -webkit-overflow-scrolling:touch}
  .top nav::-webkit-scrollbar{display:none}
  .top nav a{padding:.35rem .6rem}
  .mark{width:38px;height:38px;font-size:17px}
}

.wrap{max-width:1060px;margin:0 auto;padding:1.6rem 16px 3.5rem}
.wrap.narrow{max-width:760px}
.wrap.tight{max-width:460px;padding-top:2.4rem}

/* ── Type ────────────────────────────────────────────────── */
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.5rem}
h1.page{font-size:clamp(1.9rem,5.5vw,2.7rem);margin-bottom:.5rem;text-wrap:balance}
h2.sec{font-size:clamp(1.4rem,4vw,1.8rem);margin-bottom:.7rem;text-wrap:balance}
p.lede{font-size:1.06rem;color:var(--ink-soft);max-width:62ch;margin-bottom:1rem}
p{margin-bottom:1rem;max-width:64ch}
p:last-child{margin-bottom:0}
strong{font-weight:600}

/* ── Cards ───────────────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);min-width:0}
.card-b{padding:1.2rem}
.grid{display:grid;gap:1rem}
@media(min-width:720px){ .grid.two{grid-template-columns:1fr 1fr} }

/* ── Course cards ────────────────────────────────────────── */
.course{display:flex;flex-direction:column;gap:.6rem;padding:1.3rem;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);transition:.14s;min-width:0}
.course:hover{border-color:var(--gold);transform:translateY(-2px)}
/* Every card that shows these pills, not only the ones on the home page.
   Scoped to .course, the category cards got no flex row at all: the pills
   fell back to inline spans whose padding overlapped the line above. */
.tags{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.tags .tag{flex:0 0 auto}
/* A pill never wraps its own label: a two-line pill is taller than the ones
   beside it and the whole row stops looking like a row. If the set is too wide
   the row wraps instead, which is what flex-wrap on .tags is for. */
.tag{font-size:11px;font-weight:600;letter-spacing:.04em;padding:2px 9px;
  border-radius:999px;background:var(--surface);border:1px solid var(--line);
  color:var(--ink-soft);white-space:nowrap;line-height:1.5}
.tag.gold{background:var(--gold-wash);border-color:var(--gold-lift);color:var(--gold)}
.tag.done{background:var(--good-wash);border-color:var(--good-line);color:var(--good)}
.course h3{font-size:1.35rem}
.course p{font-size:13.5px;color:var(--ink-soft);margin:0}
.course .foot{margin-top:auto;padding-top:.7rem;display:flex;align-items:center;
  gap:.6rem;flex-wrap:wrap}

/* ── Progress ────────────────────────────────────────────── */
.meter{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.meter i{display:block;height:100%;background:var(--gold);border-radius:3px;
  transition:width .35s ease}
.meter-lbl{font-size:12px;color:var(--ink-soft);font-variant-numeric:tabular-nums}

/* ── Buttons ─────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.7rem 1.3rem;border-radius:9px;border:1.5px solid transparent;
  font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;transition:.12s;
  text-align:center}
.btn-go{background:var(--gold);color:#fff;border-color:var(--gold)}
.btn-go:hover{background:var(--gold-lift);border-color:var(--gold-lift)}
.btn-go:disabled{opacity:.45;cursor:not-allowed}
.btn-navy{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-navy:hover{background:var(--navy-soft);border-color:var(--navy-soft)}
.btn-q{background:transparent;color:var(--ink-soft);border-color:var(--line)}
.btn-q:hover{color:var(--ink);border-color:var(--ink-faint)}
.btn-sm{padding:.45rem .85rem;font-size:13px}
.btn-wide{width:100%}
.bar{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-top:1.3rem}
.hint{font-size:12.5px;color:var(--ink-faint)}

/* ── Forms ───────────────────────────────────────────────── */
.fg{margin-bottom:.95rem}
.fg label{display:block;font-size:12px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:.35rem}
.fg input,.fg select,textarea{width:100%;padding:.68rem .75rem;font:inherit;
  font-size:15px;color:var(--ink);background:var(--card);
  border:1.5px solid var(--line);border-radius:8px}
.fg input:focus,textarea:focus{border-color:var(--gold);outline:none;
  box-shadow:0 0 0 3px var(--gold-wash)}
.fg small{display:block;font-size:12px;color:var(--ink-faint);margin-top:.3rem}
.check{display:flex;align-items:flex-start;gap:.55rem;font-size:13.5px;
  color:var(--ink-soft);margin-bottom:.8rem;cursor:pointer;line-height:1.5}
.check input{flex:0 0 auto;width:17px;height:17px;margin-top:3px;accent-color:var(--gold)}

.alert{border-radius:9px;padding:.8rem 1rem;font-size:14px;margin-bottom:1.1rem;
  border:1px solid}
.alert.ok{background:var(--good-wash);border-color:var(--good-line);color:var(--good)}
.alert.err{background:var(--warn-wash);border-color:var(--warn-line);color:var(--warn)}
.alert.info{background:var(--gold-wash);border-color:var(--gold-lift);color:var(--gold)}

/* ── Lesson rail ─────────────────────────────────────────── */
.rail{background:var(--navy);color:#fff;position:sticky;top:0;z-index:20}
.rail-in{max-width:760px;margin:0 auto;padding:.7rem 16px;
  display:flex;align-items:center;gap:.8rem}
.rail-txt{min-width:0;flex:1}
.rail-txt b{display:block;font-size:13px;font-weight:600;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-txt span{display:block;font-size:11px;color:#9fb0c8;font-variant-numeric:tabular-nums}
.rail .exit{flex:0 0 auto;font-size:12.5px;color:#9fb0c8;padding:.3rem .5rem;border-radius:6px}
.rail .exit:hover{background:rgba(255,255,255,.1);color:#fff}
.pips{display:flex;gap:3px;flex:0 0 auto}
.pip{width:9px;height:4px;border-radius:2px;background:#2b4366}
.pip.on{background:var(--gold-lift)}
.pip.now{background:#fff}
@media(max-width:560px){ .pips{display:none} }

/* ── Steps ───────────────────────────────────────────────── */
.step{display:none}
.step.live{display:block;animation:rise .26s ease both}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){ .step.live{animation:none} }
.step h2{font-size:clamp(1.5rem,4.6vw,2rem);margin-bottom:.8rem;text-wrap:balance}

/* ── Prompt specimens ────────────────────────────────────── */
.spec{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--card);margin-bottom:1rem}
.spec-h{display:flex;align-items:center;gap:.5rem;padding:.55rem .85rem;
  border-bottom:1px solid var(--line);font-size:11px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase}
.spec.weak .spec-h{background:var(--warn-wash);color:var(--warn)}
.spec.strong .spec-h{background:var(--good-wash);color:var(--good)}
.spec.plain .spec-h{background:var(--surface);color:var(--ink-soft)}
.spec-h .tag2{margin-left:auto;font-weight:500;letter-spacing:.02em;
  text-transform:none;font-size:11px;opacity:.75}
.spec pre{margin:0;padding:.85rem;font-family:var(--mono);font-size:12.5px;
  line-height:1.65;white-space:pre-wrap;word-break:break-word;color:var(--ink)}
.spec .out{border-top:1px dashed var(--line);padding:.85rem;font-size:13.5px;
  color:var(--ink-soft);background:var(--surface)}
.spec .out em{display:block;font-size:10.5px;font-style:normal;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);
  margin-bottom:.35rem}

/* ── Quiz ────────────────────────────────────────────────── */
.opts{display:grid;gap:.5rem;margin-bottom:1rem}
.opt{display:flex;align-items:flex-start;gap:.7rem;width:100%;text-align:left;
  padding:.8rem .9rem;background:var(--card);border:1.5px solid var(--line);
  border-radius:10px;cursor:pointer;font:inherit;font-size:14.5px;color:var(--ink);
  line-height:1.5;transition:.12s}
.opt:hover:not(:disabled){border-color:var(--gold);background:var(--gold-wash)}
.opt:disabled{cursor:default}
.opt .key{flex:0 0 auto;width:22px;height:22px;border-radius:6px;background:var(--surface);
  border:1px solid var(--line);display:grid;place-items:center;font-size:11.5px;
  font-weight:700;color:var(--ink-soft)}
.opt.right{border-color:var(--good-line);background:var(--good-wash)}
.opt.right .key{background:var(--good);border-color:var(--good);color:var(--card)}
.opt.wrong{border-color:var(--warn-line);background:var(--warn-wash)}
.opt.wrong .key{background:var(--warn);border-color:var(--warn);color:var(--card)}
.verdict{border-radius:10px;padding:.85rem 1rem;font-size:14px;margin-bottom:1.1rem;
  border:1px solid}
.verdict.ok{background:var(--good-wash);border-color:var(--good-line);color:var(--good)}
.verdict.no{background:var(--warn-wash);border-color:var(--warn-line);color:var(--warn)}
.verdict b{display:block;margin-bottom:.15rem}

/* ── Task + rubric ───────────────────────────────────────── */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:1.1rem;margin-bottom:1.1rem}
.panel.focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-wash)}
.fl{display:block;font-size:12px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:.45rem}
textarea{min-height:120px;resize:vertical;font-family:var(--mono);font-size:13px;
  line-height:1.6;background:var(--surface)}
.checks{list-style:none;display:grid;gap:.1rem}
.chk{display:flex;align-items:flex-start;gap:.6rem;width:100%;text-align:left;
  padding:.6rem .5rem;background:none;border:0;border-radius:8px;cursor:pointer;
  font:inherit;font-size:14px;color:var(--ink);line-height:1.5}
.chk:hover{background:var(--surface)}
.box{flex:0 0 auto;width:19px;height:19px;margin-top:2px;border-radius:5px;
  border:2px solid var(--ink-faint);position:relative;transition:.12s}
.chk[aria-pressed="true"] .box{background:var(--good);border-color:var(--good)}
.chk[aria-pressed="true"] .box::after{content:"";position:absolute;left:5px;top:1px;
  width:5px;height:10px;border:solid var(--card);border-width:0 2px 2px 0;
  transform:rotate(45deg)}
.chk small{display:block;color:var(--ink-faint);font-size:12.5px}

/* ── Build: assemble a brief ─────────────────────────────── */
.blocks{display:grid;gap:.5rem;margin-bottom:1rem}
.blk{display:flex;align-items:flex-start;gap:.7rem;width:100%;text-align:left;
  padding:.75rem .85rem;background:var(--card);border:1.5px solid var(--line);
  border-radius:10px;cursor:pointer;font:inherit;font-size:14px;color:var(--ink);
  line-height:1.5;transition:.12s}
.blk:hover:not(:disabled){border-color:var(--gold)}
.blk:disabled{cursor:default}
.blk .lab{flex:0 0 auto;font-size:10px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-faint);background:var(--surface);
  border:1px solid var(--line);border-radius:5px;padding:2px 6px;margin-top:2px;
  min-width:62px;text-align:center}
.blk[aria-pressed="true"]{border-color:var(--gold);background:var(--gold-wash)}
.blk.hit{border-color:var(--good-line);background:var(--good-wash)}
.blk.hit .lab{background:var(--good);border-color:var(--good);color:#fff}
.blk.miss{border-color:var(--warn-line);background:var(--warn-wash)}
.blk.miss .lab{background:var(--warn);border-color:var(--warn);color:#fff}

/* ── Pick: tap the problems in a prompt ──────────────────── */
.picker{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:1rem;margin-bottom:1rem;font-family:var(--mono);font-size:13.5px;
  line-height:2.1}
.pk{border:0;padding:.15rem .25rem;border-radius:5px;font:inherit;cursor:pointer;
  background:var(--surface);color:var(--ink);box-shadow:inset 0 -2px 0 var(--line);
  transition:.12s}
.pk:hover:not(:disabled){background:var(--gold-wash);box-shadow:inset 0 -2px 0 var(--gold)}
.pk:disabled{cursor:default}
.pk[aria-pressed="true"]{background:var(--gold-wash);box-shadow:inset 0 -2px 0 var(--gold)}
.pk.hit{background:var(--warn-wash);box-shadow:inset 0 -2px 0 var(--warn);color:var(--warn)}
.pk.safe{background:var(--good-wash);box-shadow:inset 0 -2px 0 var(--good);color:var(--good)}
.why-list{display:grid;gap:.5rem;margin-bottom:1rem}
.why{font-size:13.5px;padding:.6rem .8rem;border-radius:8px;border:1px solid var(--line);
  background:var(--card)}
.why b{display:block;font-family:var(--mono);font-size:12.5px;margin-bottom:.2rem}
.why.bad{border-color:var(--warn-line);background:var(--warn-wash);color:var(--warn)}
.why.good{border-color:var(--good-line);background:var(--good-wash);color:var(--good)}

/* ── Blanks ──────────────────────────────────────────────── */
.gap{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:.9rem 1rem;margin-bottom:.7rem}
.gap .before{font-size:13px;color:var(--ink-soft);margin-bottom:.5rem}
.gap-opts{display:grid;gap:.4rem}
.gopt{text-align:left;padding:.6rem .75rem;background:var(--surface);
  border:1.5px solid var(--line);border-radius:8px;cursor:pointer;font:inherit;
  font-size:13.5px;color:var(--ink);line-height:1.5;transition:.12s}
.gopt:hover:not(:disabled){border-color:var(--gold)}
.gopt:disabled{cursor:default}
.gopt.right{border-color:var(--good-line);background:var(--good-wash)}
.gopt.wrong{border-color:var(--warn-line);background:var(--warn-wash);opacity:.75}

/* ── Reveal ──────────────────────────────────────────────── */
.cards{display:grid;gap:.6rem;margin-bottom:1rem}
@media(min-width:620px){ .cards{grid-template-columns:1fr 1fr} }
.flip{text-align:left;background:var(--card);border:1.5px solid var(--line);
  border-radius:10px;padding:.9rem 1rem;cursor:pointer;font:inherit;color:var(--ink);
  transition:.12s;min-height:74px;display:flex;flex-direction:column;
  justify-content:center;gap:.3rem}
.flip:hover{border-color:var(--gold)}
.flip b{font-size:14.5px;font-weight:600;display:flex;align-items:center;
  justify-content:space-between;gap:.5rem}
.flip b::after{content:"+";font-family:var(--mono);font-weight:400;color:var(--ink-faint);
  font-size:16px;flex:0 0 auto}
.flip[aria-pressed="true"]{border-color:var(--gold);background:var(--gold-wash)}
.flip[aria-pressed="true"] b::after{content:"−"}
.flip span{font-size:13px;color:var(--ink-soft);line-height:1.55}

/* ── Lesson close ────────────────────────────────────────── */
/* The celebration block at the end of a lesson. Scoped to a div, because an
   unqualified .done also matched the small "Completed" pill and gave it the
   block's padding — making one pill twice the height of its neighbours. */
div.done{text-align:center;padding:1.3rem 0 .3rem}
.seal{width:76px;height:76px;margin:0 auto 1.1rem;border-radius:50%;
  background:var(--gold-wash);border:2px solid var(--gold);display:grid;
  place-items:center;font-family:var(--display);font-size:30px;font-weight:700;
  color:var(--gold)}
div.done p{margin-left:auto;margin-right:auto}
.up{display:flex;align-items:center;gap:.85rem;text-align:left;background:var(--card);
  border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:10px;
  padding:.9rem 1rem;margin-top:1.3rem}
.up .n{flex:0 0 auto;font-family:var(--display);font-size:1.5rem;font-weight:700;
  color:var(--gold);font-variant-numeric:tabular-nums}
.up b{display:block;font-size:14.5px}
.up span{display:block;font-size:12.5px;color:var(--ink-soft)}

/* ── Lesson list ─────────────────────────────────────────── */
.lessons{display:grid;gap:.4rem}
.lrow{display:flex;align-items:center;gap:.85rem;padding:.8rem .9rem;
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  transition:.12s;min-width:0}
.lrow:hover{border-color:var(--gold)}
.lrow.is-done{background:var(--good-wash);border-color:var(--good-line)}
.lrow.locked{opacity:.55}
.lnum{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--surface);
  border:1.5px solid var(--line);display:grid;place-items:center;font-size:12px;
  font-weight:700;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.lrow.is-done .lnum{background:var(--good);border-color:var(--good);color:#fff;font-size:0}
.lrow.is-done .lnum::after{content:"";width:5px;height:10px;border:solid #fff;
  border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.lrow .lmain{min-width:0;flex:1}
.lrow b{display:block;font-size:14.5px;font-weight:600}
/* Scoped to the text block: an unscoped `.lrow span` also matched .lnum,
   and being more specific it replaced its grid centring with display:block,
   which pushed the lesson number to the top-left of its circle. */
.lrow .lmain span{display:block;font-size:12.5px;color:var(--ink-soft)}
.lrow .go{flex:0 0 auto;font-size:12.5px;font-weight:600;color:var(--gold)}

/* ── Badges ──────────────────────────────────────────────── */
.badges{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.badge{text-align:center;padding:1.2rem .8rem;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r)}
.badge.earned{border-color:var(--gold);background:var(--gold-wash)}
.badge .disc{width:62px;height:62px;margin:0 auto .7rem;border-radius:50%;
  display:grid;place-items:center;font-family:var(--display);font-size:22px;
  font-weight:700;background:var(--surface);border:2px dashed var(--line);
  color:var(--ink-faint)}
.badge.earned .disc{background:var(--gold);border:2px solid var(--gold);color:#fff;
  border-style:solid}
.badge b{display:block;font-size:13.5px;margin-bottom:.15rem}
.badge span{font-size:11.5px;color:var(--ink-soft)}

/* ── Certificate ─────────────────────────────────────────── */
.cert{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);overflow:hidden;margin-bottom:1.3rem}
.cert-top{background:var(--navy);color:#fff;padding:1.5rem 1.4rem;text-align:center}
.cert-top .mark{margin:0 auto .7rem;width:40px;height:40px;font-size:15px}
.cert-top b{display:block;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#9fb0c8}
.cert-body{padding:2.6rem 1.4rem 2.2rem;text-align:center}
/* Paragraphs carry a 64ch max-width for readability. In a centred card that
   makes the box narrower than its parent, and a block with a max-width sits
   to the left — so the line above the name read as off-centre even though
   its text-align was centre. */
.cert-body p{max-width:none}
/* Room to breathe above and below the name — the same gap on each side, so
   the name sits as the centre of the card rather than crowded between lines. */
.cert-body .who{font-family:var(--display);font-size:clamp(1.7rem,5.5vw,2.4rem);
  font-weight:700;margin:1.15rem 0;text-wrap:balance}
.cert-body .what{font-size:1.05rem;color:var(--ink-soft);margin-bottom:1.9rem}
.cert-body .what b{color:var(--ink)}
.cert-meta{display:flex;justify-content:center;gap:1.8rem;flex-wrap:wrap;
  padding-top:1.2rem;border-top:1px solid var(--line)}
.cert-meta div{font-size:12.5px;color:var(--ink-soft)}
.cert-meta b{display:block;font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:.15rem}
.code{font-family:var(--mono);letter-spacing:.06em}

/* ── Misc ────────────────────────────────────────────────── */
.empty{text-align:center;padding:2.5rem 1rem;color:var(--ink-soft)}
.empty b{display:block;font-family:var(--display);font-size:1.3rem;color:var(--ink);
  margin-bottom:.3rem}
.foot{border-top:1px solid var(--line);margin-top:3rem;padding:1.4rem 0;
  font-size:12.5px;color:var(--ink-faint);text-align:center}
.foot a{color:var(--ink-soft)}
.foot a:hover{color:var(--gold)}
.recs{margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.rec{display:block;background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:.9rem 1rem;transition:.12s;min-width:0}
.rec:hover{border-color:var(--gold);transform:translateY(-1px)}
.rec b{display:block;font-size:14.5px;margin-bottom:.15rem}
.rec span{display:block;font-size:12.5px;color:var(--ink-soft)}
.rec .meta{margin-top:.5rem;font-size:11.5px;color:var(--gold);font-weight:600}

/* ── Credits ─────────────────────────────────────────────── */
.top nav a.credits{background:rgba(200,168,75,.16);color:var(--gold-lift);
  font-weight:600;font-size:12.5px;border:1px solid rgba(200,168,75,.35)}
.top nav a.credits:hover{background:rgba(200,168,75,.26);color:#fff}
.cred-box{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:var(--r);padding:1rem 1.1rem;margin-bottom:1.5rem}
.cred-box .n{font-family:var(--display);font-size:2.1rem;font-weight:700;color:var(--gold);
  line-height:1;font-variant-numeric:tabular-nums}
.cred-box .t{flex:1;min-width:180px}
.cred-box .t b{display:block;font-size:14.5px}
.cred-box .t span{display:block;font-size:12.5px;color:var(--ink-soft)}

/* ── Lesson progress and back ────────────────────────────── */
.rail-bar{height:3px;background:rgba(255,255,255,.14)}
.rail-bar i{display:block;height:100%;width:0;background:var(--gold-lift);
  transition:width .3s ease}
.back-row{margin-top:1.6rem;padding-top:.9rem;border-top:1px solid var(--line)}
.back-link{background:none;border:0;padding:.3rem 0;font:inherit;font-size:12.5px;
  color:var(--ink-faint);cursor:pointer}
.back-link:hover{color:var(--ink-soft)}
.kbd-hint{font-size:11.5px;color:var(--ink-faint);margin-top:.5rem}
@media(max-width:600px){ .kbd-hint{display:none} }


.share-post{margin:1.2rem 0 .2rem}
.share-post textarea{width:100%;min-height:9.5rem;font:inherit;font-size:14px;
  line-height:1.6;padding:.8rem .9rem;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);color:var(--ink);resize:vertical}
.share-post textarea:focus{outline:2px solid var(--gold);outline-offset:1px;
  background:#fff}

/* ── Printing a certificate ──────────────────────────────── */
/* "Save as PDF" is the print dialogue, so the page has to be worth printing:
   the certificate and nothing else. */
@media print {
  .top, .rail, .bar, .recs, .alert, footer, .hint, .share-post { display: none !important; }
  body { background: #fff; }
  .wrap { padding: 0; max-width: none; }
  .cert { box-shadow: none; border: 1px solid #d9dee6; break-inside: avoid; }
  .cert-top { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  h1.page, .done { display: none; }
}

/* A secondary row of actions that wraps tidily instead of spilling one
   button onto a line of its own. */
.bar.bar-wrap{flex-wrap:wrap;gap:.45rem}
.bar.bar-wrap .btn{flex:0 0 auto}