/* The Help page (/help): a guide for HarborLink's people, with the same tokens
   and type as the other pages (tokens.css, pages.css). Reads on a phone, and
   prints (Print → Save as PDF) as a clean handout in the light palette. */
.top .btn{font-size:12.5px}
.help{display:grid;grid-template-columns:232px minmax(0,1fr);gap:36px;max-width:1120px;margin:0 auto;padding:20px 16px 64px}

/* contents */
.toc{position:sticky;top:14px;align-self:start;max-height:calc(100vh - 28px);overflow:auto;font-size:13px;padding-right:4px}
.toc h2{margin:2px 0 8px}
.toc ol{list-style:none;margin:0;padding:0}
.toc > ol > li{margin:1px 0}
.toc a{display:block;padding:3px 8px;border-radius:4px;color:var(--fg);text-decoration:none;line-height:1.35}
.toc a:hover{background:var(--hover)}
.toc ol ol{margin:1px 0 6px}
.toc ol ol a{color:var(--muted);padding-left:20px;font-size:12.5px}
.toc .num{display:inline-block;min-width:1.6em;color:var(--muted);font-family:var(--f-mono);font-size:12px}

/* the guide */
.guide{max-width:780px;min-width:0;font-size:15px;line-height:1.6}
.guide section,.guide [id]{scroll-margin-top:52px} /* clear the demo banner */
.guide .lede{font-size:16px;margin:0 0 14px}
.guide h2{font:600 25px/1.25 var(--f-display);letter-spacing:.005em;text-transform:none;color:var(--fg);margin:44px 0 12px;padding-top:18px;border-top:1px solid var(--line)}
.guide section:first-of-type h2{margin-top:6px;border-top:0;padding-top:0}
.guide h2 .num{color:var(--muted);font-weight:500;margin-right:6px}
.guide h3{font:600 18px/1.3 var(--f-display);margin:30px 0 6px}
.guide h4{font:600 15px/1.35 var(--f-body);margin:20px 0 4px}
.guide p{margin:8px 0}
.guide ul,.guide ol{padding-left:24px;margin:8px 0}
.guide li{margin:4px 0}
.guide ol.steps > li{padding-left:2px;margin:6px 0}
.guide ol.steps > li::marker{font-weight:600;color:var(--accent)}
.guide dfn{font-style:normal;font-weight:600}
.guide code{font:13px var(--f-mono);background:var(--hover);border-radius:3px;padding:0 4px;overflow-wrap:anywhere}
.guide kbd{font:12px var(--f-mono);border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:0 5px;background:var(--panel)}
.guide .ui{font-weight:600;white-space:nowrap} /* a button or label, as written on screen */
.guide table{font-size:14px;margin:10px 0}
.guide td,.guide th{vertical-align:top}
.guide td:first-child{white-space:nowrap}
.guide #glossary td:first-child{white-space:normal;min-width:9em}
.guide .tablewrap{margin:10px 0}
.guide .callout p{margin:4px 0}
.guide .back{font-size:12.5px;margin-top:18px}
.guide .back a{color:var(--muted);text-decoration:none}

/* screenshots */
figure{margin:16px 0 20px}
figure img{display:block;max-width:100%;height:auto;border:1px solid var(--line);border-radius:6px;background:var(--panel);box-shadow:0 1px 6px rgba(0,0,0,.06)}
figure.panel img{max-width:318px}
figure.phone img{max-width:292px}
figure.small img{max-width:380px}
figcaption{font-size:12.5px;line-height:1.45;color:var(--muted);margin-top:6px;max-width:640px}
.pair-figs{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start}
.pair-figs figure{margin:12px 0}

/* colour keys */
.key{display:inline-block;vertical-align:-1px;margin-right:6px;flex:none}
.key.line{width:20px;height:4px;border-radius:2px;vertical-align:3px}
.key.dash{width:20px;height:0;border-top:3px dashed;vertical-align:3px;background:none!important}
.key.dot{width:11px;height:11px;border-radius:50%}
.key.ring{width:9px;height:9px;border-radius:50%;border:2px solid}
.c-built{background:var(--st-built)} .c-perm{background:var(--st-perm)} .c-eng{background:var(--st-eng)} .c-row{background:var(--st-row)} .c-muted{background:var(--muted)}
.c-route{border-color:var(--route);color:var(--route)} .c-pull{border-color:var(--pull);color:var(--pull)}
.c-cable{background:var(--cable);opacity:.6;height:8px!important;vertical-align:1px!important} .c-circuit{border-color:var(--circuit);color:var(--circuit)} .c-trace{background:var(--trace)}
.c-mh{background:var(--mh)} .c-splice{background:var(--splice)} .c-reel{background:var(--reel)} .c-start{background:var(--start)} .c-site{background:var(--site)} .c-sel{background:var(--sel)}
.c-avail{background:var(--st-eng)} .c-res{background:var(--mh)} .c-use{background:var(--accent)} .c-dmg{background:var(--st-row)}
.tia{display:flex;flex-wrap:wrap;gap:6px 14px;list-style:none;padding:0!important;margin:10px 0;font-size:13.5px}
.tia li{display:flex;align-items:center;gap:6px;margin:0}
.tia i{display:inline-block;width:13px;height:13px;border-radius:50%;border:1px solid var(--line);-webkit-print-color-adjust:exact;print-color-adjust:exact}
.tag-sp,.tag-ex{display:inline-block;font:600 10px/1.5 var(--f-display);letter-spacing:.05em;color:#fff;border-radius:3px;padding:0 4px;vertical-align:1px}
.tag-sp{background:var(--splice)} .tag-ex{background:var(--st-perm)}

/* who-does-what and later increments */
.paths{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:12px 0}
.paths div{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:10px 12px;font-size:14px;line-height:1.5}
.paths b{display:block;font-family:var(--f-display);font-size:15px;margin-bottom:2px}
.later{border:1px dashed var(--muted);border-radius:6px;padding:10px 12px;margin:18px 0;color:var(--muted);font-size:14px}
.later b{color:var(--fg)}

@media (max-width:860px){
  .help{grid-template-columns:1fr;gap:8px;padding-top:14px}
  .toc{position:static;max-height:none;overflow:visible;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:10px}
  .toc ol ol{display:none}
  .guide{font-size:15.5px}
  .guide h2{font-size:22px}
}
@media (max-width:520px){
  .top{flex-wrap:wrap;gap:6px 12px}
  .top h1{flex-basis:100%;font-size:17px}
  .top .btn{display:none} /* phones print from the browser's share menu */
}

/* Print → Save as PDF: one column, contents first, each chapter on a new page. */
@media print{
  @page{margin:16mm 14mm}
  body{background:#fff;font-size:11pt}
  .top,.demo-flag,.guide .back{display:none!important}
  .help{display:block;max-width:none;padding:0}
  .toc{position:static;max-height:none;overflow:visible;border:0;padding:0;margin-bottom:12mm;break-after:page}
  .toc > ol{columns:2;column-gap:10mm}
  .toc > ol > li{break-inside:avoid}
  .toc ol ol{display:block}
  .toc a{padding:1px 0}
  .toc ol ol a{padding-left:16px}
  .guide{max-width:none;font-size:10.5pt;line-height:1.5}
  .guide h2{break-before:page;border-top:0;padding-top:0;margin-top:0}
  .guide h3,.guide h4{break-after:avoid}
  figure,table,.callout,.paths div,.later{break-inside:avoid}
  figure img{box-shadow:none;max-height:120mm;width:auto}
  figure.panel img,figure.phone img{max-height:105mm}
  .guide a{color:inherit;text-decoration:none}
  .key,.tag-sp,.tag-ex{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}