/* Help page: a readable single column using the map's colours, fonts and themes from app.css. */
html,body.help{height:auto}
body.help{overflow:auto;font-size:15.5px;line-height:1.6;-webkit-text-size-adjust:100%}
.help a{color:var(--focus)}
.help code{font-family:var(--mono);font-size:.88em;background:var(--ground);padding:1px 5px;border-radius:4px}

.topbar{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:10px max(16px,calc((100% - 760px)/2));background:color-mix(in srgb,var(--panel) 92%,transparent);
  backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.back{font:600 14px var(--body);text-decoration:none;color:var(--fg)!important;padding:6px 10px;margin-left:-10px;border-radius:6px}
.back:hover{background:var(--ground)}
.back:focus-visible,.toc a:focus-visible,.doc-foot a:focus-visible{outline:2px solid var(--focus);outline-offset:1px}

.doc{max-width:760px;margin:0 auto;padding:8px 16px 48px}
.doc section{padding:28px 0 8px;border-bottom:1px solid var(--line);scroll-margin-top:56px}
.doc section:last-of-type{border-bottom:0}
.doc h1{font-size:44px;margin:6px 0 10px}
.doc h2{font-family:var(--display);font-weight:700;font-size:28px;line-height:1.1;margin:0 0 12px;letter-spacing:.01em}
.doc h3{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:22px 0 8px}
.doc p{margin:0 0 12px}
.lede{font-size:17px;color:var(--fg)}
.note{color:var(--muted);font-size:14px}

.toc{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 4px}
.toc a{font:500 13px var(--body);text-decoration:none;color:var(--fg)!important;background:var(--ground);border:1px solid var(--line);padding:5px 10px;border-radius:999px}
.toc a:hover{border-color:var(--muted)}

/* Quick start */
.steps{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.steps li{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.steps .n{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--fg);color:var(--panel);font:700 16px var(--display)}
.kbd{font:600 13px var(--body);background:var(--ground);border:1px solid var(--line);border-bottom-width:2px;padding:1px 7px;border-radius:5px;white-space:nowrap}
.pfx-s{font:700 19px/1 var(--display);color:var(--c);white-space:nowrap}
.chip-s{display:inline-block;font:600 14px/1 var(--display);padding:3px 6px;border-radius:4px;background:var(--c);color:var(--panel);white-space:nowrap}

/* Little mock-ups of the real controls */
.mock{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:0 0 12px;max-width:380px}
.mock .seg{margin:0;pointer-events:none}
.list-mock{padding:4px 0 10px}
.fam-s{display:flex;justify-content:space-between;padding:8px 14px 6px;font:400 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.fam-s span:first-child{display:flex;align-items:center;gap:7px}
.chev-s{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg)}
.chev-s.open{transform:rotate(45deg) translate(-2px,-2px)}
.bars-s{display:grid;gap:5px;padding:2px 14px 0 29px}
.bars-s div{display:grid;grid-template-columns:34px 1fr 36px;gap:8px;align-items:center;font:12px var(--mono);font-variant-numeric:tabular-nums}
.bars-s i{display:block;height:8px;border-radius:2px}
.grp-s{display:grid;grid-template-columns:14px 44px 1fr auto;gap:10px;align-items:center;padding:6px 14px}
.grp-s i{width:14px;height:14px;border-radius:3px}
.grp-s b{font:700 22px/1 var(--display)}
.grp-s span{font-size:13px}
.grp-s em{font:normal 13px var(--mono);text-align:right}
.grp-s small{display:block;font-size:11px;color:var(--muted)}
.chips-s{display:flex;flex-wrap:wrap;gap:4px;padding:2px 14px 0 82px}
.chips-s .chip-s{background:var(--panel);color:var(--fg);border:1px solid var(--line)}

.defs{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:0 0 8px}
.defs dt{font-weight:600}
.defs dd{margin:0;color:var(--fg)}
.bullets{margin:0 0 12px;padding-left:20px}
.bullets li{margin:0 0 8px}
.method{margin:0 0 12px;padding-left:22px}
.method li{margin:0 0 10px;padding-left:4px}

/* Map legend and hover examples */
.legend-grid{display:grid;gap:10px;margin:0 0 8px}
.lg{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center}
.lg svg{width:120px;height:40px;background:var(--ground);border-radius:8px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.card{background:var(--ground);border-radius:10px;padding:12px;display:grid;gap:10px;align-content:start}
.card p{margin:0;font-size:14px}
.tip{background:var(--panel);border:1px solid var(--line);border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.12);padding:6px 9px;font:500 12.5px/1.4 var(--body)}
.tip .tb{font:700 17px var(--display);margin-right:4px}
.tip .tm{font:11px var(--mono);color:var(--muted);margin-top:3px}
.tip .sn{font-weight:600;font-size:13px}
.tip .tchip{cursor:default}
.tip .more{font:11px var(--mono);color:var(--muted);align-self:center}

/* Colour swatches */
.swatches{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.swatches span{font:700 16px/1 var(--display);color:var(--panel);background:var(--c);padding:6px 9px;border-radius:5px}
.swatches.families span{font-size:15px;padding:7px 11px}

.doc-foot{padding:24px 0 0}
.doc-foot a{font:600 14px var(--body);text-decoration:none}

@media (max-width:560px){
  body.help{font-size:15px}
  .doc h1{font-size:34px}
  .lg{grid-template-columns:96px 1fr}
  .lg svg{width:96px}
  .defs{grid-template-columns:1fr;gap:0 0}
  .defs dd{margin:0 0 8px}
}