/* Familiarise Me – shared stylesheet. Every page uses this file and nothing else. */
:root{
  --bg:#f6f5f2; --surface:#ffffff; --surface-2:#f0efea; --text:#1a1f24; --muted:#56606a; --faint:#8a939b;
  --line:#dddad2; --accent:#0b5c7a; --accent-ink:#ffffff; --accent-soft:#e3eef3; --gold:#c98a00;
  --ok:#1d6b3a; --ok-soft:#e5f2e9; --bad:#9b2c1f; --bad-soft:#f8e7e4; --warn-soft:#fff4dc; --warn:#7a5200;
  --t-vol:#3d4f8f; --t-com:#6b4f8f; --t-pra:#8a5a1f; --t-rad:#0b5c7a; --t-wat:#1f7a8c; --t-saf:#7a3d3d;
  --topic:var(--accent);
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* log lines, notepad examples and pocket-card numbers only */
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#101417; --surface:#171d22; --surface-2:#1d252c; --text:#e9edf0; --muted:#a8b3bc; --faint:#7d8891;
    --line:#2b353d; --accent:#6cc0e0; --accent-ink:#06202b; --accent-soft:#1a3240; --gold:#f2b632;
    --ok:#8ad6a4; --ok-soft:#16301f; --bad:#ff9d8f; --bad-soft:#3a1d19; --warn-soft:#382c10; --warn:#f3c969;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#101417; --surface:#171d22; --surface-2:#1d252c; --text:#e9edf0; --muted:#a8b3bc; --faint:#7d8891;
  --line:#2b353d; --accent:#6cc0e0; --accent-ink:#06202b; --accent-soft:#1a3240; --gold:#f2b632;
  --ok:#8ad6a4; --ok-soft:#16301f; --bad:#ff9d8f; --bad-soft:#3a1d19; --warn-soft:#382c10; --warn:#f3c969;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:17px/1.6 var(--sans)}
a{color:var(--accent)}
:focus-visible{outline:3px solid #f2a900;outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:8px;background:var(--surface);padding:6px 10px;z-index:30}

/* ---------- header ---------- */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.top-inner{max-width:1120px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:16px;position:relative}
.brand{font-weight:700;text-decoration:none;color:var(--text);display:flex;align-items:center;gap:8px;font-size:17px}
.brand .me{font-weight:400}
nav.main{margin-left:auto;display:flex;gap:2px;align-items:center}
nav.main a{font-size:15px;color:var(--muted);text-decoration:none;padding:6px 10px;border-radius:6px;white-space:nowrap}
nav.main a:hover,nav.main a[aria-current]{background:var(--surface-2);color:var(--text)}
nav.main a.prog{border:1px solid var(--line);margin-left:8px;font-size:14px}
.menu-btn{display:none;margin-left:auto;font:inherit;font-size:15px;font-weight:600;background:var(--surface);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:6px 12px;min-height:40px;cursor:pointer}
@media (max-width:760px){
  nav.main{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--bg);border-bottom:1px solid var(--line);padding:8px 16px}
  nav.main.open{display:flex} nav.main a{padding:10px} nav.main a.prog{margin:4px 0 0}
  .menu-btn{display:block}
}

/* ---------- layout ---------- */
.wrap{max-width:1120px;margin:0 auto;padding-inline:20px}
.read{max-width:760px;margin:0 auto;padding:28px 20px 72px}
h1{font-size:clamp(32px,5.5vw,48px);line-height:1.08;letter-spacing:-.015em;margin:0 0 14px;font-weight:800;text-wrap:balance}
h2{font-size:clamp(24px,3.6vw,30px);line-height:1.2;margin:56px 0 12px;font-weight:800;letter-spacing:-.01em;scroll-margin-top:84px;text-wrap:balance}
h3{font-size:19px;line-height:1.3;margin:26px 0 8px;font-weight:700}
p{margin:0 0 14px}
.lede{font-size:20px;line-height:1.55;color:var(--muted)}
.sub{color:var(--muted);font-size:17px;max-width:64ch}
.small{font-size:15px;color:var(--muted)}
ul.clean{padding-left:22px;margin:0 0 16px} ul.clean li{margin:5px 0}

/* breadcrumb + snapshot meta */
.crumb{font-size:14px;color:var(--muted);margin:0 0 18px;display:flex;flex-wrap:wrap;gap:6px}
.crumb a{color:var(--muted)} .crumb span[aria-hidden]{color:var(--faint)}
.meta-row{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;border-radius:999px;padding:4px 12px;background:var(--surface-2);color:var(--text)}
.chip.topic{background:color-mix(in srgb,var(--topic) 14%,var(--surface));color:var(--topic-fg)}

/* step headings inside a snapshot */
.step-h{display:flex;align-items:center;gap:12px;margin:56px 0 14px;scroll-margin-top:84px}
.step-h .n{flex:none;width:38px;height:38px;border-radius:50%;background:var(--topic);color:#fff;display:grid;place-items:center;font-weight:800;font-size:17px}
.step-h h2{margin:0}
.stepnav{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px;padding:0;list-style:none}
.stepnav a{font-size:14px;text-decoration:none;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:5px 12px;background:var(--surface)}
.stepnav a:hover{border-color:var(--topic);color:var(--text)}

/* ---------- blocks ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px}
.task{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px;margin:22px 0}
.task .kicker{font-size:14px;font-weight:700;color:var(--topic-fg);margin:0 0 4px}
.task h3{margin-top:0;font-size:20px}
.notice{border-left:5px solid var(--gold);background:var(--warn-soft);padding:14px 16px;border-radius:10px;margin:18px 0;font-size:16px}
.notice.stop{border-left-color:var(--bad);background:var(--bad-soft)}
.script{font-size:15px;line-height:1.55;background:var(--surface-2);padding:14px 16px;border-radius:10px;white-space:pre-wrap;overflow-x:auto}
.steps{counter-reset:s;list-style:none;padding:0;margin:0 0 16px;display:grid;gap:10px}
.steps li{counter-increment:s;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px 12px 54px;position:relative}
.steps li::before{content:counter(s);position:absolute;left:14px;top:11px;width:28px;height:28px;border-radius:50%;background:var(--surface-2);color:var(--text);font-weight:800;display:grid;place-items:center;font-size:14px}
.tablewrap{overflow-x:auto;margin:10px 0 16px}
table.t{border-collapse:collapse;width:100%;font-size:16px}
table.t th,table.t td{text-align:left;padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
table.t th{font-size:14px;color:var(--muted);font-weight:700}
table.t th[scope=row]{font-size:16px;color:var(--text);white-space:nowrap}

/* ---------- interactive components ---------- */
.btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-size:16px;font-weight:700;text-decoration:none;border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);border-radius:12px;padding:11px 18px;min-height:48px;cursor:pointer}
.btn.ghost{background:transparent;color:var(--accent)}
.btn.sm{font-size:15px;padding:8px 14px;min-height:44px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}
label.lbl{font-weight:600;font-size:15px;display:block;margin-bottom:5px}
input[type=text],textarea,select{font:inherit;font-size:16px;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:100%;min-height:46px}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:14px}

.choices{display:grid;gap:10px;margin:12px 0 4px}
.choices.two{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.choice{appearance:none;text-align:left;font:inherit;font-size:16px;line-height:1.45;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px;cursor:pointer;min-height:48px;display:flex;gap:12px;align-items:flex-start;width:100%}
.choice:hover{border-color:var(--topic)}
.choice .mk{flex:none;width:20px;height:20px;border:2px solid var(--faint);border-radius:50%;margin-top:2px}
.choice.multi .mk{border-radius:5px}
.choice[aria-checked="true"],.choice[aria-pressed="true"]{border-color:var(--topic);background:color-mix(in srgb,var(--topic) 10%,var(--surface))}
.choice[aria-checked="true"] .mk,.choice[aria-pressed="true"] .mk{border-color:var(--topic);background:var(--topic);box-shadow:inset 0 0 0 3px var(--surface)}
.choice.right{border-color:var(--ok);background:var(--ok-soft)}
.choice.wrong{border-color:var(--bad);background:var(--bad-soft)}
.q{border-top:1px solid var(--line);padding:16px 0 4px}
.q:first-of-type{border-top:0;padding-top:0}
.q > p.qt{font-weight:700;margin:0 0 4px}
.fb{margin-top:10px;padding:12px 14px;border-radius:10px;font-size:16px;background:var(--surface-2)}
.fb.ok{background:var(--ok-soft)} .fb.bad{background:var(--bad-soft)}
.fb:empty{display:none}
.match-row{display:grid;grid-template-columns:minmax(140px,1fr) 2fr;gap:10px;align-items:center;border-top:1px solid var(--line);padding:12px 0}
.match-row:first-child{border-top:0}
.match-row .res{grid-column:1/-1;font-size:15px}
@media (max-width:560px){.match-row{grid-template-columns:1fr}}
.seg-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;border-top:1px solid var(--line);padding:12px 0}
.seg-row:first-child{border-top:0}
.seg{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;flex-wrap:wrap}
.seg button{appearance:none;font:inherit;font-size:14px;font-weight:700;padding:8px 10px;border:0;border-left:1px solid var(--line);background:var(--surface);color:var(--muted);cursor:pointer;min-height:44px}
.seg button:first-child{border-left:0}
.seg button[aria-pressed="true"]{background:var(--topic);color:#fff}
.seg button.right{background:var(--ok);color:#fff} .seg button.wrong{background:var(--bad);color:#fff}
.seg-row .res{grid-column:1/-1;font-size:15px;color:var(--muted)}
@media (max-width:620px){.seg-row{grid-template-columns:1fr}}
.opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.opts button{appearance:none;font:inherit;font-size:15px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;min-height:44px}
.opts button[aria-pressed="true"]{border-color:var(--topic);background:color-mix(in srgb,var(--topic) 12%,var(--surface));font-weight:700}
.opts button.right{border-color:var(--ok);background:var(--ok-soft);color:var(--ok)}
.opts button.wrong{border-color:var(--bad);background:var(--bad-soft);color:var(--bad)}

/* phonetic grid */
.phon{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:8px}
.phon button{appearance:none;font:inherit;text-align:left;cursor:pointer;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;color:var(--text);min-height:44px}
.phon button:hover{border-color:var(--topic)}
.phon .L{font-size:22px;font-weight:800;color:var(--topic-fg);line-height:1}
.phon .W{font-weight:700}
.phon .S{font-size:13px;color:var(--muted)}
.out{background:var(--surface-2);border-radius:10px;padding:12px 14px;min-height:48px;font-weight:600;overflow-wrap:anywhere}

/* priority cards */
.prio-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.prio{background:var(--surface);border:1px solid var(--line);border-top:6px solid var(--line);border-radius:12px;padding:16px}
.prio.m{border-top-color:#b3261e}.prio.p{border-top-color:#c77700}.prio.s{border-top-color:#1f6fb2}
.prio h3{margin:4px 0 6px;font-size:22px;letter-spacing:.01em}
.prio .lvl{font-size:13px;font-weight:700;color:var(--muted)}

/* radio diagram */
.diagram{display:grid;grid-template-columns:minmax(200px,280px) 1fr;gap:20px;align-items:start}
.diagram svg{width:100%;height:auto;max-width:280px}
.legend{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.legend li{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start;font-size:16px}
.legend .k{width:28px;height:28px;border-radius:50%;background:var(--topic);color:#fff;font-weight:800;display:grid;place-items:center;font-size:14px}
.legend .k.red{background:#b3261e}
@media (max-width:640px){.diagram{grid-template-columns:1fr}.diagram svg{max-width:240px;margin:0 auto;display:block}}

/* log form */
.call{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px;margin:18px 0}
.call h3{margin:0 0 4px}
.call .how{font-size:14px;color:var(--muted);margin:0 0 10px}

/* ---------- save, pager ---------- */
.finish{margin-top:48px;background:var(--surface);border:2px solid var(--topic);border-radius:16px;padding:22px}
.finish h2{margin:0 0 6px;font-size:22px}
.saved{font-size:15px;color:var(--ok);font-weight:700}
.pager{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;margin-top:22px;align-items:center}
.pager a{font-size:15px;font-weight:600}
.pager .prev{justify-self:start}.pager .up{justify-self:center}.pager .next{justify-self:end;text-align:right}
@media (max-width:560px){.pager{grid-template-columns:1fr}.pager a{justify-self:start!important;text-align:left!important}}
.limit-line{font-size:14px;color:var(--muted);border-top:1px solid var(--line);margin-top:34px;padding-top:12px}

/* ---------- topic / pathway page ---------- */
.band{background:var(--topic);color:#fff;border-radius:18px;padding:26px;position:relative;overflow:hidden;margin:6px 0 28px}
.band svg.bg{position:absolute;inset:0;width:100%;height:100%}
.band .in{position:relative;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:end}
.band h1{color:#fff;margin:10px 0 8px}
.band p{color:rgba(255,255,255,.88);margin:0;max-width:60ch}
.band .ic{width:52px;height:52px;border-radius:14px;background:rgba(255,255,255,.18);display:grid;place-items:center}
.band .stats{font-size:15px;font-weight:700;color:#fff;margin-top:12px}
.ring{--p:0;width:64px;height:64px;border-radius:50%;background:conic-gradient(#f2b632 calc(var(--p)*1%),rgba(255,255,255,.22) 0);display:grid;place-items:center}
.ring span{width:48px;height:48px;border-radius:50%;background:var(--topic);display:grid;place-items:center;font-size:13px;font-weight:800;color:#fff}
@media (max-width:560px){.band .in{grid-template-columns:1fr}}
.snaplist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.snaplist a{display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:center;text-decoration:none;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.snaplist a:hover{border-color:var(--topic)}
.snaplist .n{width:40px;height:40px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;font-weight:800}
.snaplist .done .n{background:var(--gold);color:#fff}
.snaplist .t{font-weight:700}
.snaplist .d{font-size:14px;color:var(--muted)}
.snaplist .tm{font-size:14px;color:var(--muted);white-space:nowrap;text-align:right}
.snaplist .st{display:block;font-size:13px;font-weight:700;color:var(--muted)}
.snaplist .done .st{color:var(--ok)}
@media (max-width:520px){.snaplist a{grid-template-columns:40px 1fr}.snaplist .tm{grid-column:2;text-align:left}}
.side-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px}
@media (max-width:700px){.side-grid{grid-template-columns:1fr}}

footer.site{border-top:1px solid var(--line);font-size:14px;color:var(--muted);margin-top:28px}
footer.site .wrap{padding-block:22px 30px}
footer.site p{margin:0 0 6px}

/* pocket card */
.pc{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pc table.t{font-size:14px}.pc table.t td,.pc table.t th{padding:4px 8px}
@media (max-width:640px){.pc{grid-template-columns:1fr}}
@media print{
  header.top,footer.site,.noprint,.pager,.finish,.crumb{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .read{padding:0;max-width:none}
  .card{border:1px solid #999}
}

/* ---------- call transcripts and log entries ---------- */
.tx{list-style:none;margin:10px 0 14px;padding:0;display:grid;gap:8px}
.tx li{display:grid;grid-template-columns:96px 1fr;gap:10px;font-size:16px}
.tx .who{font-size:14px;font-weight:700;color:var(--muted);padding-top:2px}
.tx .say{background:var(--surface-2);border-radius:10px;padding:8px 12px}
.tx li.op .say{background:color-mix(in srgb,var(--topic) 10%,var(--surface))}
.tx .gap{color:var(--bad);font-style:italic}
@media (max-width:520px){.tx li{grid-template-columns:1fr;gap:2px}}
.logform{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px 12px;margin-top:10px}
.logform label{font-size:14px;font-weight:600;display:block;margin-bottom:4px}
.model{margin-top:12px;border:1px dashed var(--line);border-radius:10px;padding:12px 14px}
.model dl{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;margin:6px 0 0;font-size:15px}
.model dt{font-weight:700;color:var(--muted)} .model dd{margin:0}
.checks{display:grid;gap:8px;margin:10px 0}
.checks label{display:flex;gap:10px;align-items:flex-start;font-size:16px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer}
.checks input{width:20px;height:20px;margin-top:2px;accent-color:var(--topic)}
.checks label.right{border-color:var(--ok);background:var(--ok-soft)} .checks label.wrong{border-color:var(--bad);background:var(--bad-soft)}
ul.ticks{margin:8px 0 0;padding-left:20px} ul.ticks li{margin:4px 0}

/* ---------- navigation snapshot ---------- */
.globe{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:640px){.globe{grid-template-columns:1fr}}
.globe svg{width:100%;height:auto;max-width:340px}
.formats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:12px 0}
.formats .f{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.formats .f b{display:block;font-size:14px;color:var(--muted);margin-bottom:4px}
.formats .f code,.mono{font-size:17px;font-weight:700;color:var(--text)}
.calc{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-top:10px}
.calc input[type=number],.calc select{font:inherit;font-size:16px;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:100%;min-height:46px}
.calc label{font-size:14px;font-weight:600;display:block;margin-bottom:4px}
.chartbox{overflow-x:auto;margin:12px 0}
.chartbox svg{display:block;width:100%;min-width:320px;max-width:640px;height:auto;margin:0 auto}
.formula{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
.formula span{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-weight:700}

/* squelch demo */
.sq input[type=range]{width:100%;accent-color:var(--topic);min-height:36px}
.sq-meters{display:grid;gap:10px;margin:12px 0 4px}
.sq-m{display:grid;grid-template-columns:200px 1fr;gap:12px;align-items:center;font-size:14px;color:var(--muted)}
.sq-m .bar{position:relative;height:16px;background:var(--surface-2);border-radius:8px}
.sq-m .bar i{position:absolute;left:0;top:0;bottom:0;border-radius:8px;background:var(--topic);opacity:.75}
.sq-m .bar .line{position:absolute;top:-5px;bottom:-5px;width:3px;background:#b3261e;left:0;border-radius:2px}
@media (max-width:520px){.sq-m{grid-template-columns:1fr;gap:4px}}
@media (max-width:560px){
  table.t.stack thead{display:none}
  table.t.stack tr{display:block;border-bottom:1px solid var(--line);padding:10px 0}
  table.t.stack th,table.t.stack td{display:block;border:0;padding:2px 0;white-space:normal}
}
.model-d{margin-top:12px}.model-d summary{cursor:pointer;font-weight:700;color:var(--accent);min-height:32px}

/* boat basics */
.rotbox{display:flex;justify-content:center;margin:8px 0}
.rotbox svg{width:100%;max-width:280px;height:auto}
#rot-g{transition:transform .5s ease}
@media (prefers-reduced-motion:reduce){#rot-g{transition:none}}
.side{cursor:pointer}.side:hover,.side:focus{fill:color-mix(in srgb,var(--topic) 18%,var(--surface-2))!important;outline:none}
.spot{fill:var(--surface);stroke:var(--topic);stroke-width:2;stroke-dasharray:4 3;cursor:pointer}
.spot:hover,.spot:focus{fill:color-mix(in srgb,var(--topic) 20%,var(--surface));outline:none}
.spot.good{fill:#f2b632;stroke:var(--ok);stroke-width:3;stroke-dasharray:none}
.spot.badspot{fill:var(--bad-soft);stroke:var(--bad);stroke-dasharray:none}
.reveals{display:grid;align-items:start;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px;margin:12px 0}
details.reveal{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
details.reveal summary{cursor:pointer;font-weight:700;display:flex;gap:10px;align-items:center;min-height:32px;list-style:none}
details.reveal summary::-webkit-details-marker{display:none}
details.reveal summary::after{content:"Show";margin-left:auto;font-size:13px;font-weight:600;color:var(--accent)}
details.reveal[open] summary::after{content:"Hide"}
details.reveal .k{width:26px;height:26px;border-radius:50%;background:var(--topic);color:#fff;display:grid;place-items:center;font-size:13px;flex:none}
details.reveal p{margin:8px 0 0;font-size:15px}
.terms{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px;margin:12px 0}
.term{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.term h4{margin:0 0 4px;font-size:17px}.term p{margin:0;font-size:15px}.term .mem{margin-top:8px;font-size:14px;color:var(--muted)}
ul.memlist{display:grid;gap:10px;margin:0;padding:0;list-style:none} ul.memlist li{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:15px}
ul.cols{columns:2;column-gap:28px} @media (max-width:560px){ul.cols{columns:1}}
.readys{display:grid;gap:10px;margin:12px 0}
details.ready{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--topic);border-radius:12px;padding:12px 16px}
details.ready summary{cursor:pointer;display:flex;gap:12px;align-items:center;list-style:none;font-weight:800;font-size:18px}
details.ready summary::-webkit-details-marker{display:none}
details.ready .L{width:38px;height:38px;border-radius:10px;background:var(--topic);color:#fff;display:grid;place-items:center;font-size:20px}
details.ready p{margin:10px 0 6px;font-size:16px} details.ready .close{font-size:15px;color:var(--muted);margin-top:10px}
.card h4{font-size:16px}
.term .ex{margin-top:8px;font-size:15px;font-style:italic}
.distinct{display:grid;grid-template-columns:1fr 220px;gap:18px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;margin:14px 0 6px}
.distinct h4{margin:0 0 6px;font-size:17px}
@media (max-width:620px){.distinct{grid-template-columns:1fr}}
.vsum{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.vsum li{border-radius:8px;padding:6px 10px;display:flex;flex-direction:column;text-align:center;font-size:13px}
.vsum b{font-size:15px}.vsum span{color:var(--muted)}
.vsum .part{background:var(--topic);color:#fff}.vsum .part span{color:rgba(255,255,255,.85)}
.vsum .dir{border:2px solid var(--topic);background:var(--surface)}
.vsum .beyond{border:2px dashed var(--muted);background:transparent}
details.reveal .tag{margin-left:6px;font-size:12px;font-weight:700;padding:2px 8px;border-radius:99px;background:var(--surface-2);color:var(--muted)}
details.reveal .tag.m{background:transparent;border:1.5px dashed var(--muted)}
.ticks.tight{margin:4px 0 8px;font-size:15px}.ticks.tight li{margin:2px 0}
.hazard{border:2px solid var(--bad);background:var(--bad-soft);border-radius:12px;padding:16px;margin:14px 0}
.hazard h4{margin:0 0 6px;font-size:18px;color:var(--bad)}
.hazard p{margin:0 0 8px}
.stand{cursor:pointer}.stand circle{fill:var(--topic)}.stand text{fill:#fff}
.stand:hover circle,.stand:focus circle{fill:var(--accent);outline:none}.stand:focus{outline:none}
.stand.good circle{fill:var(--ok)}.stand.badspot circle{fill:var(--bad)}
/* cardinal marks */
.cms{display:grid;gap:12px;margin:12px 0}
.cm{display:grid;grid-template-columns:100px 1fr;gap:16px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;align-items:start}
.cm h4{margin:0 0 4px;font-size:18px}.cm p{margin:0 0 6px;font-size:15px}.cm .mem{color:var(--muted);font-size:14px}
.cm-msg{font-weight:800;color:var(--topic-fg)}
.cm-pic{display:flex;justify-content:center;background:var(--accent-soft);border-radius:10px;padding:8px 0}
@media (max-width:480px){.cm{grid-template-columns:72px 1fr;gap:12px}.cm-pic svg{width:64px}}
.passbox{display:flex;justify-content:center}.passbox svg{width:100%;max-width:300px;height:auto}
.buildbox{display:flex;gap:24px;align-items:center;justify-content:center;background:var(--accent-soft);border-radius:12px;padding:14px;margin:10px 0}
.flip{cursor:pointer}.flip:focus{outline:none}.flip:focus path,.flip:hover path{fill:var(--accent)}
.build-reveal svg{width:60px}
.nightbox{display:flex;gap:18px;align-items:center;background:#0d1620;border-radius:12px;padding:18px;margin:10px 0}
.nightbox .small{color:#c9d3db;margin:0}
.lamp{width:34px;height:34px;border-radius:50%;background:#2a3440;flex:none;transition:background .05s,box-shadow .05s}
.lamp.on{background:#fffbe6;box-shadow:0 0 22px 8px rgba(255,248,210,.75)}
/* person overboard */
#pob{min-width:320px}
.pobt{cursor:pointer}.pobt:focus{outline:none}
.pobt:hover circle[fill="transparent"],.pobt:focus circle[fill="transparent"]{stroke:var(--accent);stroke-width:2}
.pobt.picked circle[fill="transparent"]{stroke:var(--ok);stroke-width:3}
.pobt.wrongpick circle[fill="transparent"]{stroke:var(--bad);stroke-width:3}
.five{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.five div{background:var(--surface-2);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:4px}
.five b{font-size:17px;color:var(--topic-fg)}.five span{font-size:14px}
/* how a boat moves */
.rs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 14px}
.rs div{border-radius:12px;padding:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.rs b{width:100%;font-size:15px}
.rs span{background:var(--surface);border-radius:99px;padding:4px 12px;font-weight:700}
.rs .rot{border:2px solid var(--topic)} .rs .shi{border:2px dashed var(--topic)}
.stage{max-width:460px;margin:0 auto}.stage svg{width:100%;height:auto;border-radius:12px;display:block}
.stage .small{text-align:center;margin:6px 0 0}
.vlab{font:12px system-ui,Arial;fill:var(--muted)}
.mvbox{transform-box:fill-box;transform-origin:50% 60%}
.a-pitch{animation:mpitch 3s ease-in-out infinite}.a-heave{animation:mheave 3s ease-in-out infinite}.a-surge{animation:msurge 3s ease-in-out infinite}
.a-roll{animation:mroll 3s ease-in-out infinite;transform-origin:50% 90%}.a-sway{animation:msway 3s ease-in-out infinite}.a-yaw{animation:myaw 3s ease-in-out infinite;transform-origin:50% 55%}
@keyframes mpitch{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
@keyframes mheave{0%,100%{transform:translateY(-16px)}50%{transform:translateY(12px)}}
@keyframes msurge{0%,100%{transform:translateX(-28px)}50%{transform:translateX(28px)}}
@keyframes mroll{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}
@keyframes msway{0%,100%{transform:translateX(-40px)}50%{transform:translateX(40px)}}
@keyframes myaw{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(16deg)}}
.mvbox.still{animation:none}
.reveals.one{grid-template-columns:1fr}
.mvk{font-size:12px;font-weight:700;border-radius:99px;padding:2px 8px;border:2px solid var(--topic);color:var(--topic-fg)}
.mvk.shifts{border-style:dashed}
details.mv summary{gap:10px}
/* knots */
.jl{font:11px system-ui,Arial;fill:var(--muted)} .jl2{font:13px system-ui,Arial;fill:var(--text)}
.flips{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin:12px 0;align-items:start}
.flipcard{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.fc-btn{appearance:none;width:100%;border:0;background:transparent;font:inherit;color:var(--text);cursor:pointer;padding:12px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.fc-btn svg{width:100%;max-width:170px;height:auto;background:var(--accent-soft);border-radius:8px}
.fc-btn:hover,.fc-btn:focus-visible{background:var(--surface-2)}
.fc-job{font-size:13px;font-weight:800;color:var(--topic-fg)}
.fc-name{font-weight:800;font-size:16px}.fc-turn{font-size:13px;color:var(--accent);font-weight:700}
.fc-back{padding:14px}.fc-back h4{margin:0 0 6px}.fc-back p{font-size:14px;margin:0 0 8px}.fc-back .lim{background:var(--warn-soft);border-radius:8px;padding:8px 10px}
table.kc td{text-align:center}table.kc input{width:20px;height:20px;accent-color:var(--topic)}
.fc-btn[hidden],.fc-back[hidden]{display:none}
/* epirbs */
.sn circle{fill:var(--surface);stroke:var(--topic);stroke-width:3}.sn .snn{font:800 15px system-ui,Arial;fill:var(--topic)}
.sn.on circle{fill:var(--topic)}.sn.on .snn{fill:#fff}.sn.done circle{fill:color-mix(in srgb,var(--topic) 25%,var(--surface))}
.snl{font:12px system-ui,Arial;fill:var(--text)}
.sigstep{text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:8px auto 4px;max-width:560px}
.inspect{display:flex;justify-content:center;background:var(--accent-soft);border-radius:12px;padding:10px;margin:10px 0}
.five.six{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
/* towing */
.ch{cursor:pointer}.ch circle{fill:var(--topic)}.ch text{fill:#fff;font:800 13px system-ui,Arial}.ch:focus{outline:none}
.ch:hover circle,.ch:focus circle{fill:var(--accent)}.ch.on circle{fill:#b3261e}
.sim svg{width:100%;height:auto;display:block;border-radius:10px}
.meter{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;margin:8px 0 4px}
.mbar{height:14px;background:var(--surface-2);border-radius:7px;overflow:hidden}.mbar i{display:block;height:100%;width:20%;background:var(--topic)}
.spark{background:var(--surface-2);border-radius:8px;margin-top:4px}
.simctl{display:grid;gap:10px;margin-top:10px}.simctl .lbl{font-size:14px;font-weight:700}
.needs{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;margin:10px 0}
.need{appearance:none;font:inherit;font-weight:700;font-size:15px;text-align:left;padding:14px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;min-height:64px}
.need:hover{border-color:var(--topic)}.need[aria-pressed="true"]{border-color:var(--topic);background:color-mix(in srgb,var(--topic) 12%,var(--surface))}
/* mooring fittings */
.reveals.fits{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
details.fit summary{flex-wrap:wrap}
details.fit summary svg{width:100%;height:auto;max-height:90px;background:var(--accent-soft);border-radius:8px}
details.fit summary::after{margin-left:auto}
.fn{font-weight:800;font-size:16px}
.ftag{font-size:12px;font-weight:700;border-radius:99px;padding:2px 8px}
.ftag.h{background:var(--ok-soft);color:var(--ok)}.ftag.g{background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent)}
.ftag.n{background:var(--bad-soft);color:var(--bad)}.ftag.s{background:var(--warn-soft);color:var(--warn)}
/* terms */
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.tabs button{appearance:none;font:inherit;font-weight:700;font-size:15px;padding:8px 14px;border-radius:99px;border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;min-height:44px}
.tabs button[aria-selected="true"]{background:var(--topic);border-color:var(--topic);color:#fff}
.term .tm2{font-weight:700;color:var(--topic-fg);margin:0 0 4px}
.decode{white-space:normal;line-height:2.1;font-size:17px}
.tok{appearance:none;font:inherit;font-weight:800;background:var(--warn-soft);border:1px dashed var(--warn);border-radius:6px;padding:0 6px;cursor:pointer;color:var(--text)}
.tok.on{background:var(--topic);color:#fff;border-style:solid}
.pausebox{display:flex;gap:18px;align-items:center;background:var(--surface-2);border-radius:12px;padding:14px;margin:10px 0}
#ps-ring{transition:stroke-dashoffset 1s linear}
@media (prefers-reduced-motion:reduce){#ps-ring{transition:none}}
/* rosters */
ol.chain{list-style:none;margin:0;padding:0;display:grid;gap:6px;counter-reset:c}
ol.chain li{counter-increment:c;position:relative;padding:10px 12px 10px 44px;border-radius:10px;background:var(--surface-2);color:var(--muted);transition:background .3s,color .3s}
ol.chain li::before{content:counter(c);position:absolute;left:12px;top:9px;width:22px;height:22px;border-radius:50%;background:var(--line);color:var(--text);display:grid;place-items:center;font-size:12px;font-weight:800}
ol.chain li.on{color:var(--text);font-weight:700}ol.chain li.on.bad{background:var(--bad-soft)}ol.chain li.on.ok{background:var(--ok-soft)}
ol.chain li.on.bad::before{background:var(--bad);color:#fff}ol.chain li.on.ok::before{background:var(--ok);color:#fff}
.ladder{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:10px 0}
.ladder span{background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:6px 12px;font-weight:700;font-size:14px}
.ladder span:last-of-type{background:var(--topic);color:#fff;border-color:var(--topic)}.ladder i{font-style:normal;color:var(--muted)}
.card.ctr.bad{border-left:5px solid var(--bad)}.card.ctr.ok{border-left:5px solid var(--ok)}

/* leadership */
.built{font-weight:500;line-height:1.6;margin-top:10px}.built mark{background:color-mix(in srgb,var(--topic) 16%,transparent);color:inherit;border-radius:4px;padding:1px 3px}
.devbox{margin-top:12px;background:var(--surface-2);border-radius:10px;padding:12px 14px}.dvq{font-weight:600;margin:0 0 6px;padding-left:10px;border-left:4px solid var(--ok)}.dvq.bad{border-left-color:var(--bad)}
.crewbar{position:relative;height:26px;background:var(--surface-2);border-radius:8px;margin-top:14px;overflow:visible}.cb-fill{height:100%;width:38%;background:var(--topic);border-radius:8px;transition:width .3s}.cb-fill.over{background:#b26a00}.cb-line{position:absolute;left:50%;top:-6px;bottom:-6px;border-left:3px dashed var(--text)}.cb-line span{position:absolute;top:-20px;left:6px;font-size:.78rem;font-weight:700;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.cb-fill{transition:none}}
.tokens{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}.fb.warn{border-left:4px solid #b26a00;padding-left:10px}.crewbar{margin-top:28px}
/* note it down */
.notepad{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px;line-height:1.55;background:var(--surface-2);border-left:4px solid var(--topic);border-radius:8px;padding:10px 14px;margin:8px 0;white-space:pre-wrap;overflow-wrap:anywhere}
span.notepad{display:inline-block;margin:0}
.qgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin:10px 0}.qgrid span{background:var(--surface-2);border-radius:8px;padding:8px 12px;font-weight:600}
.hear{line-height:2.1;font-size:17px}.hear .tok{margin:0 1px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 12px}.chips span{border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:15px}
.phr{display:inline-block;background:var(--surface-2);border-radius:6px;padding:2px 8px;margin:2px 2px;font-size:15px}
.gaprows{display:grid;gap:10px}.gaprow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.gaprow mark{background:#fff3c4;color:#3d2f00;padding:0 3px;border-radius:3px}.gaprow .ask{font-weight:600;color:var(--topic-fg)}
.avoidcard{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--bad);border-radius:10px;padding:12px 14px}.avoidcard.good{border-left-color:var(--ok)}
.logline{font-family:ui-monospace,Menlo,Consolas,monospace;background:var(--surface-2);border-radius:8px;padding:12px 14px;margin:8px 0;font-size:15px;overflow-wrap:anywhere}.logline .lt{font-weight:700}.logline s{color:var(--bad);text-decoration-thickness:2px}.logline .init{font-size:12px;color:var(--muted);font-weight:600}
.side-grid.three{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
/* pocket card v2 */
.pc-lead{font-weight:700;font-size:18px;border-left:4px solid var(--topic);padding-left:12px;margin:14px 0}
.pc2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}@media (max-width:760px){.pc2{grid-template-columns:1fr}}
.pcs{break-inside:avoid;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:0 0 16px;box-sizing:border-box}
.pcs h2{font-size:17px;margin:0 0 8px;color:var(--topic-fg)}
.pcs table.t{font-size:14px;width:100%}.pcs table.t th{white-space:nowrap;vertical-align:top;padding:4px 10px 4px 0;text-align:left}.pcs table.t td{padding:4px 0;vertical-align:top}
.pc-ph{columns:auto}.pcs .pc-ph tbody{display:grid;grid-template-columns:repeat(3,1fr);column-gap:10px}.pcs .pc-ph tr{display:flex;gap:6px;border-bottom:1px solid var(--line)}.pcs .pc-ph th{padding:3px 0;min-width:1.2em}.pcs .pc-ph td{padding:3px 0}
.pcl{margin:4px 0;padding-left:20px;font-size:14px}.pcl li{margin:2px 0}.pcl.num li{margin:6px 0}
.pc-stop{background:var(--bad-soft);border-radius:8px;padding:8px 10px;font-size:14px;font-weight:600;margin:8px 0 0}
@media (max-width:420px){.pcs .pc-ph tbody{grid-template-columns:repeat(2,1fr)}}
@media print{.pc2{display:grid;grid-template-columns:1fr 1fr;gap:8px}.pc-note{font-size:8.5pt}.pc-note p,.pc-note li{font-size:8.5pt}.limit-line{font-size:8pt}.pcs{padding:6px 8px;margin:0 0 8px;border-color:#999;background:#fff}.pcs h2{font-size:11.5pt;color:#000;margin-bottom:4px}.pcs table.t,.pcl,.pc-stop,.pcs .small{font-size:8pt;line-height:1.3}.pcs table.t th,.pcs table.t td{padding:1px 6px 1px 0}.pc-lead{font-size:11pt;margin:6px 0}.pc-stop{background:#eee}h1{font-size:18pt;margin:0}.sub{font-size:9pt}}
.h3{font-size:17px;margin:0 0 6px}.ph{background:#fff3c4;color:#3d2f00;border-radius:4px;padding:0 4px}
/* boat basics diagram text */
.mm text{font-family:system-ui,Arial;fill:var(--text)} .mm .s{font-size:12px;fill:var(--muted)} .mm .b{font-size:15px;font-weight:800}
/* latitude and longitude chart text */
#chart text{font:12px system-ui,Arial;fill:var(--muted)}#chart .gl{stroke:var(--line);stroke-width:1}#chart .tk line{stroke:var(--muted);stroke-width:1}#chart .lbl{font-weight:800;font-size:15px;fill:var(--text)}

/* topic colour for each page (set on <html data-topic="…">) */
html[data-topic="vol"]{--topic:var(--t-vol)}html[data-topic="com"]{--topic:var(--t-com)}html[data-topic="pra"]{--topic:var(--t-pra)}
html[data-topic="rad"]{--topic:var(--t-rad)}html[data-topic="wat"]{--topic:var(--t-wat)}html[data-topic="saf"]{--topic:var(--t-saf)}


/* ---------- home ---------- */
.home h1{font-size:clamp(40px,7vw,66px);line-height:1.02;letter-spacing:-.02em;margin:0;font-weight:800}
.home h2{font-size:clamp(26px,4vw,34px);line-height:1.15;margin:0 0 8px;font-weight:800;letter-spacing:-.01em}
.home h3{margin:0;font-size:19px}
.home .sub{font-size:18px}
.h-sec{padding:52px 0}
.h-hero{display:grid;grid-template-columns:1.2fr .9fr;gap:48px;align-items:center;padding:60px 0 36px}
.h-tagline{font-size:clamp(22px,3.2vw,30px);font-weight:700;color:var(--accent);margin:14px 0 18px;letter-spacing:-.01em}
.h-hero .row{margin-top:22px;gap:12px}
.h-snap{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:0 14px 34px rgba(20,30,40,.08)}
.h-snap .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.h-snap .chip{font-size:13px;font-weight:700;color:var(--accent);background:var(--accent-soft);padding:3px 10px}
.h-snap .time{font-size:13px;color:var(--muted);font-weight:600}
.h-snap .ttl{font-size:21px;font-weight:800;margin-bottom:16px}
.h-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.h-steps li{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:12px;font-size:15px}
.h-steps li b{display:block;font-size:15px}
.h-steps li span.d{color:var(--muted);font-size:13px}
.h-steps .n{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:var(--surface-2);color:var(--text)}
.h-steps li.on{border-color:var(--accent);background:var(--accent-soft)}
.h-steps li.on .n{background:var(--accent);color:var(--accent-ink)}
.h-steps li.ok .n{background:var(--gold);color:#fff}
@media (max-width:860px){.h-hero{grid-template-columns:1fr;gap:28px;padding-top:36px}}
.h-feat{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}
.h-feat>div{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px}
.h-feat h3{font-size:17px;margin-bottom:6px}
.h-feat p{font-size:15px;color:var(--muted);margin:0}
.h-feat svg{margin-bottom:10px}
@media (max-width:900px){.h-feat{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.h-feat{grid-template-columns:1fr}}
.h-paths{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.h-tile{position:relative;text-decoration:none;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;min-height:300px;transition:transform .15s,box-shadow .15s}
a.h-tile:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(20,30,40,.10)}
.h-band{height:120px;position:relative;display:flex;align-items:flex-end;padding:16px 18px;color:#fff}
.h-band svg.bg{position:absolute;inset:0;width:100%;height:100%}
.h-band .ic{position:relative;width:48px;height:48px;border-radius:12px;background:rgba(255,255,255,.18);display:grid;place-items:center}
.h-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.h-body p{font-size:15px;color:var(--muted);margin:0}
.h-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--muted);padding-top:10px;border-top:1px solid var(--line)}
.h-foot b{color:var(--text)}
.h-ring{--p:0;flex:none;width:34px;height:34px;border-radius:50%;background:conic-gradient(var(--gold) calc(var(--p)*1%),var(--surface-2) 0);display:grid;place-items:center}
.h-ring::after{content:"";width:24px;height:24px;border-radius:50%;background:var(--surface)}
.h-tag{position:absolute;top:14px;right:14px;font-size:12px;font-weight:700;background:rgba(255,255,255,.92);color:#1a1f24;border-radius:999px;padding:3px 10px}
.h-tile.soon,.h-topic.soon{background:transparent;border-style:dashed}
.h-tile.soon .h-band{background:var(--surface-2);color:var(--faint)}
.h-tile.soon .ic{background:var(--surface)}
.h-tile.soon .h-tag{background:var(--surface);color:var(--muted);border:1px solid var(--line)}
@media (max-width:900px){.h-paths{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.h-paths{grid-template-columns:1fr}.h-tile{min-height:0}}
.h-topics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}
.h-topic{position:relative;text-decoration:none;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:8px;min-height:210px;transition:transform .15s,box-shadow .15s}
a.h-topic:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(20,30,40,.09)}
.h-topic .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#fff}
.h-topic p{font-size:14px;color:var(--muted);margin:0}
.h-topic .st{margin-top:auto;font-size:13px;font-weight:700}
.h-topic .note{font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:8px}
.h-topic.soon .ic{background:var(--surface-2)!important;color:var(--faint)}
.h-topic.soon .st{color:var(--faint)}
@media (max-width:980px){.h-topics{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.h-topics{grid-template-columns:1fr}.h-topic{min-height:0}}
.h-how{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}
.h-how>div{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px}
.h-how .n{font-size:36px;font-weight:800;color:var(--gold);line-height:1}
.h-how h3{margin:8px 0 6px;font-size:18px}
.h-how p{font-size:15px;color:var(--muted);margin:0}
@media (max-width:900px){.h-how{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.h-how{grid-template-columns:1fr}}
.h-when{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 14px;padding:0;list-style:none}
.h-when li{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:15px}
.h-limit{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--gold);border-radius:14px;padding:24px 26px}
.h-limit h2{font-size:24px}
.h-limit p{font-size:16px;color:var(--muted)}
.h-limit p:last-child{margin:0}

/* ---------- all snapshots, my progress, pathway page, tools, about ---------- */
.fbar{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 6px}
.fbtn{font:inherit;font-size:15px;font-weight:600;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:999px;padding:8px 14px;min-height:44px;cursor:pointer}
.fbtn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.all-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.all-item a{display:grid;grid-template-columns:1fr auto;gap:2px 14px;align-items:center;text-decoration:none;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.all-item a:hover{border-color:var(--accent)}
.all-item .t{font-weight:700}.all-item .d{font-size:14px;color:var(--muted);grid-column:1}
.all-item .tm{grid-column:2;grid-row:1 / span 2;font-size:14px;color:var(--muted);text-align:right;white-space:nowrap}
.all-item .st{display:block;font-size:13px;font-weight:700}
.all-item a.done .st{color:var(--ok)}
@media (max-width:520px){.all-item a{grid-template-columns:1fr}.all-item .tm{grid-column:1;grid-row:auto;text-align:left}}
.mp-list{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:8px}
.mp-list a{display:flex;justify-content:space-between;gap:14px;align-items:center;text-decoration:none;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.mp-list .t{font-weight:700}
.mp-list .tm{font-size:14px;color:var(--muted);text-align:right;white-space:nowrap}
.mp-list .bar{display:block;height:6px;border-radius:3px;background:var(--surface-2);margin-top:4px;min-width:110px;overflow:hidden}
.mp-list .bar i{display:block;height:100%;background:var(--gold)}
.sum-block{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:6px 16px 14px;margin:0 0 14px;break-inside:avoid}
.sum-block h3{margin:14px 0 6px}
.sum-block dt{font-weight:700;margin-top:10px}.sum-block dd{margin:2px 0 0;overflow-wrap:anywhere}
.sum-block dd ul{margin:2px 0 0;padding-left:20px}
.sum-head{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:baseline}
.pw-actions{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px}
.tools-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.tools-list a{display:block;text-decoration:none;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.tools-list a:hover{border-color:var(--accent)}
.tools-list .t{font-weight:700;display:block}.tools-list .d{font-size:14px;color:var(--muted)}
.soon-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.soon-list li{border:1px dashed var(--line);border-radius:12px;padding:12px 14px;color:var(--muted)}
.soon-list b{color:var(--text)}

/* print: black on white, no chrome, in light and dark mode */
@media print{
  :root:root:root:root{--bg:#fff;--surface:#fff;--surface-2:#f2f2f2;--text:#000;--muted:#222;--faint:#444;--line:#999;--accent:#000;--accent-ink:#fff;--gold:#000;color-scheme:light}
  html,body{background:#fff!important;color:#000!important}
  #mp-progress,.pw-actions,.fbar{display:none!important}
  .sum-block{background:#fff;border-color:#999;padding:2pt 8pt 8pt;break-inside:avoid;page-break-inside:avoid}
  .sum-block h3{font-size:12pt;margin:8pt 0 4pt}
  .sum-block dd{font-size:10.5pt}
  a{color:#000;text-decoration:none}
  h2{margin:14pt 0 6pt;break-after:avoid}
}

/* uniform size sheet */
.usz .card{margin:0 0 6px}
.usz h2{margin:34px 0 10px;font-size:clamp(22px,3.2vw,26px)}
.usz h3{margin:0 0 6px;font-size:17px}
.usz .grid{display:grid;gap:14px}
.usz .g3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.usz label{font-weight:600;font-size:15px;display:block;margin-bottom:4px}
.usz .hint{font-size:14px;color:var(--muted);margin:4px 0 0}
.usz input[type=number],.usz input[type=date]{font:inherit;font-size:16px;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:100%;min-height:46px}
.usz .row{display:flex;gap:12px;flex-wrap:wrap;align-items:end;margin-top:0}
.usz .row>div{flex:1 1 180px;min-width:0}
.usz .row.noprint{margin-top:22px;align-items:center}
.usz .row.noprint .btn{flex:0 0 auto}
.usz .conv{margin-top:8px;background:var(--surface-2);border-radius:8px;padding:8px 10px;font-size:15px;min-height:36px;overflow-wrap:anywhere}
.usz .tick{display:flex;gap:10px;align-items:center;font-weight:500;font-size:15px;margin-top:10px}
.usz .tick input{width:22px;height:22px;accent-color:var(--accent);flex:none}
.usz .item{border-top:1px solid var(--line);padding:16px 0}
.usz .item:first-child{border-top:0;padding-top:4px}
.usz .usz-sheet{display:none}
@media (max-width:520px){.usz .row.noprint .btn{flex:1 1 100%}}
@media print{
  @page{margin:14mm}
  .usz .usz-form{display:none!important}
  .usz .usz-sheet{display:block;color:#000;background:#fff;font-size:11.5pt;line-height:1.35}
  .usz .usz-sheet table.t{font-size:9.5pt}
  .usz .usz-sheet table{border-collapse:collapse;width:100%;font-size:9.5pt}
  .usz .usz-sheet th,.usz .usz-sheet td{text-align:left;vertical-align:top;border-bottom:1px solid #999;padding:3px 6px;color:#000}
  .usz .usz-sheet th{font-size:9pt}
  .usz .usz-sheet h1{font-size:18pt;margin:0 0 4px;letter-spacing:0}
  .usz .usz-sheet h2{font-size:12pt;margin:10px 0 4px}
  .usz .usz-sheet p{margin:0 0 6px}
  .usz .usz-fine{margin-top:14px;font-size:9.5pt}
  .usz .usz-sig{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:24px}
  .usz .usz-sig div{border-top:1px solid #000;padding-top:4px;font-size:10pt}
  .read>.small,.read>.limit-line{display:none}
}

/* understanding volunteering */
.hidden{display:none!important}
.uv section.part{border-top:1px solid var(--line);margin-top:56px;scroll-margin-top:84px}
.uv section.part .step-h{margin-top:22px}
.uv section.summary{scroll-margin-top:84px}
.uv .eyebrow{font-size:14px;font-weight:600;color:var(--muted);margin:0 0 8px}
.uv .pull{font-size:22px;font-weight:600;line-height:1.4;border-left:3px solid var(--gold);padding:4px 0 4px 20px;margin:28px 0}
.uv .note{font-size:15px;color:var(--muted);border-top:1px solid var(--line);padding-top:10px;margin-top:10px}
.uv .uvnext{display:flex;justify-content:flex-end;margin-top:30px}
.uv .choice strong{display:block;font-size:16px}
.uv .choice em{font-style:normal;color:var(--muted)}
.uv .reveal{margin-top:14px;padding:14px 16px;border-radius:10px;background:var(--surface-2);font-size:16px}
.uv .reveal.ok{background:var(--ok-soft)}
.uv .reveal.bad{background:var(--bad-soft)}
.uv .reveal p:last-child{margin:0}
.uv .count{font-size:14px;color:var(--muted);margin-top:6px}
.uv .btn:disabled{opacity:.45;cursor:not-allowed}
/* flip cards */
.uv .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:14px}
.uv .uvflip{appearance:none;font:inherit;text-align:left;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;min-height:132px;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;gap:10px}
.uv .uvflip:hover{border-color:var(--topic)}
.uv .uvflip .fq{font-size:20px;line-height:1.25;font-weight:700}
.uv .uvflip .fa{font-size:15px;color:var(--muted)}
.uv .uvflip .fh{font-size:14px;color:var(--muted);font-weight:600}
.uv .uvflip[aria-expanded="true"]{background:color-mix(in srgb,var(--topic) 10%,var(--surface));border-color:var(--topic)}
/* fact or myth */
.uv .fm{border-top:1px solid var(--line);padding:18px 0}
.uv .fm:first-of-type{border-top:0;padding-top:4px}
.uv .fm .stmt{font-size:21px;line-height:1.35;font-weight:700;margin:0 0 10px}
.uv .fm .btns{display:flex;gap:8px}
.uv .fm .btns button{appearance:none;font:inherit;font-weight:600;font-size:15px;padding:8px 18px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;min-height:44px}
.uv .fm .btns button.right{border-color:var(--ok);background:var(--ok-soft);color:var(--ok)}
.uv .fm .btns button.wrong{border-color:var(--bad);background:var(--bad-soft);color:var(--bad)}
.uv .score{font-size:15px;color:var(--muted);margin-top:8px}
/* sorters and matcher */
.uv .sort-item{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;border-top:1px solid var(--line);padding:12px 0}
.uv .sort-item:first-child{border-top:0}
.uv .sort-fb{grid-column:1/-1;font-size:14px;color:var(--muted)}
@media (max-width:620px){.uv .sort-item{grid-template-columns:1fr}}
/* term accordion */
.uv details.uvterm{border-top:1px solid var(--line);padding:4px 0}
.uv details.uvterm:last-of-type{border-bottom:1px solid var(--line)}
.uv details.uvterm summary{cursor:pointer;list-style:none;padding:14px 0;display:flex;justify-content:space-between;gap:12px;align-items:baseline;min-height:44px}
.uv details.uvterm summary::-webkit-details-marker{display:none}
.uv details.uvterm summary .t{font-size:22px;font-weight:700}
.uv details.uvterm summary .s{font-size:14px;color:var(--muted);text-align:right}
.uv details.uvterm summary::after{content:"+";font-size:22px;color:var(--faint);margin-left:8px}
.uv details.uvterm[open] summary::after{content:"–"}
.uv details.uvterm .body{padding:0 0 16px}
/* structure stack */
.uv .uvstack{display:grid;gap:8px;margin-top:14px}
.uv .layer{appearance:none;font:inherit;text-align:left;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 16px;cursor:pointer;display:flex;justify-content:space-between;gap:12px;align-items:center;min-height:52px}
.uv .layer .n{font-weight:700}
.uv .layer .v{font-size:14px;color:var(--muted);text-align:right}
.uv .layer[aria-expanded="true"]{border-color:var(--topic);background:color-mix(in srgb,var(--topic) 10%,var(--surface))}
.uv .layer-body{padding:12px 16px;border-left:3px solid var(--topic);margin:-2px 0 6px 12px;font-size:16px}
.uv .arrow{text-align:center;color:var(--faint);font-size:14px;line-height:1}
/* video (click to load) */
.video{position:relative;border-radius:14px;overflow:hidden;background:#0d1a22;aspect-ratio:16/9;margin:18px 0}
.video button{position:absolute;inset:0;width:100%;height:100%;appearance:none;border:0;background:linear-gradient(135deg,#0b5c7a,#0d1a22);color:#fff;font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;text-align:center}
.video .play{width:66px;height:66px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* personal summary */
.uv section.summary{background:var(--surface);border:2px solid var(--topic);border-radius:16px;padding:26px;margin-top:44px}
.uv .summary h2{margin-top:0}
.uv .summary dl{margin:0}
.uv .summary dt{font-size:14px;color:var(--muted);font-weight:700;margin-top:16px}
.uv .summary dd{margin:4px 0 0;font-size:17px;overflow-wrap:anywhere}
.uv .summary dd.empty{color:var(--faint);font-style:italic}
@media (max-width:520px){.uv section.summary{padding:18px}.uv details.uvterm summary{flex-wrap:wrap}.uv details.uvterm summary .s{text-align:left}}
/* print sheet: hidden on screen, shown alone when printing */
#printsheet{display:none}
@media print{
  @page{margin:16mm}
  body.uv-page{background:#fff;color:#000;font:11pt/1.5 var(--sans)}
  body.uv-page header.top,body.uv-page main,body.uv-page footer.site,body.uv-page .noprint,body.uv-page nav,body.uv-page button{display:none!important}
  body.uv-page #printsheet{display:block}
  #printsheet,#printsheet *{color:#000!important;background:#fff!important}
  #printsheet h1{font-size:20pt;margin:0 0 2px}
  #printsheet h2{font:600 12pt var(--sans);margin:16px 0 4px;border-bottom:1px solid #999;padding-bottom:3px}
  #printsheet p,#printsheet li{margin:2px 0}
}

/* readable topic colours for text and small marks: same hue, lightened in dark mode */
:root{--t-vol-fg:var(--t-vol);--t-com-fg:var(--t-com);--t-pra-fg:var(--t-pra);--t-rad-fg:var(--t-rad);--t-wat-fg:var(--t-wat);--t-saf-fg:var(--t-saf);--topic-fg:var(--accent)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--t-vol-fg:#9fb0ee;--t-com-fg:#c8b0f0;--t-pra-fg:#e0b070;--t-rad-fg:#6cc0e0;--t-wat-fg:#62c3d3;--t-saf-fg:#e8a0a0}}
:root[data-theme="dark"]{--t-vol-fg:#9fb0ee;--t-com-fg:#c8b0f0;--t-pra-fg:#e0b070;--t-rad-fg:#6cc0e0;--t-wat-fg:#62c3d3;--t-saf-fg:#e8a0a0}
html[data-topic="vol"]{--topic-fg:var(--t-vol-fg)}html[data-topic="com"]{--topic-fg:var(--t-com-fg)}html[data-topic="pra"]{--topic-fg:var(--t-pra-fg)}
html[data-topic="rad"]{--topic-fg:var(--t-rad-fg)}html[data-topic="wat"]{--topic-fg:var(--t-wat-fg)}html[data-topic="saf"]{--topic-fg:var(--t-saf-fg)}

/* on-page confirmation (My progress: clear all) */
.confirm{margin-top:28px;background:var(--bad-soft);border:1px solid var(--bad);border-left:5px solid var(--bad);border-radius:12px;padding:14px 16px}
.confirm p{margin:0 0 4px}
.btn.danger{background:var(--bad);border-color:var(--bad);color:var(--accent-ink)}
[hidden]{display:none!important}

.backhome{margin:18px 0 0;font-size:15px;font-weight:600}

/* volunteering pack */
.videoph{border:2px dashed var(--line);border-radius:12px;padding:18px 20px;margin:12px 0;background:var(--surface-2)}
.orgflow li{font-weight:600}
.summary .sumrow{border-top:1px solid var(--line);padding:10px 0}.summary .sumrow h4{margin:0 0 4px}.summary .sumrow p{margin:0}

.done-msg{border:2px solid var(--ok)}
.pick h4{margin:12px 0 6px}
/* sign-in page */
.login-page .top nav.main,.login-page .top .menu-btn{display:none!important}
.login-wrap{max-width:620px}
.login-card{background:var(--surface);border:1px solid var(--line);border-top:6px solid var(--accent);border-radius:14px;padding:22px 20px;margin-top:18px}
.login-card h1{margin-top:0}
.code-in{width:100%;box-sizing:border-box;font-size:22px;font-weight:700;letter-spacing:.08em;padding:12px 14px;border:2px solid var(--line);border-radius:10px;background:var(--bg);color:var(--text);min-height:48px}
.code-in:focus{outline:3px solid var(--accent);outline-offset:2px;border-color:var(--accent)}
.signed a{white-space:nowrap}