/* Help pages: same tokens and type as index.html, tuned for long text. */
@font-face{font-family:"Unbounded";src:url(/fonts/unbounded-900.woff2) format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Fixel Text";src:url(/fonts/fixel-text-var.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"Ubuntu Mono";src:url(/fonts/ubuntu-mono-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Ubuntu Mono";src:url(/fonts/ubuntu-mono-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --paper:#fffdf5;--ink:#14123a;--blue:#2338ff;--sun:#ffd43b;--pink:#ff6fae;--mint:#3ddc9f;--sky:#bfe3ff;--mute:#4b4870;
  --display:"Unbounded","Arial Black",system-ui,sans-serif;
  --body:"Fixel Text",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Ubuntu Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.6 var(--body)}
a:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
.in{max-width:1080px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
@media (min-width:700px){.in{padding-left:48px;padding-right:48px}}

.nav{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-block:22px}
.logo{font:900 26px/1 var(--display);letter-spacing:-.04em;display:flex;align-items:center;gap:18px;color:var(--ink);text-decoration:none}
.logo i{width:16px;height:16px;border-radius:50%;background:var(--blue);box-shadow:8px 0 0 var(--sun)}
.navr{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* the nav pills copy index.html exactly, so the header doesn't jump between pages */
.pill{font:700 15px/1 var(--body);background:var(--ink);color:var(--paper);padding:11px 16px;border-radius:999px;text-decoration:none}
.pill-help{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.pill-help:hover{background:var(--sun)}
@media (max-width:400px){.navr{gap:6px}.navr .pill{padding:9px 11px;font-size:14px}}

.doc{padding-block:clamp(16px,4vw,40px) clamp(56px,8vw,96px)}
.doc>*{max-width:800px}
.crumb{font:600 15px var(--body);color:var(--mute);min-height:1.5em}
.crumb a{color:var(--blue)}
.doc h1{font:900 clamp(36px,6vw,64px)/.98 var(--display);letter-spacing:-.045em;margin:8px 0 28px;text-wrap:balance;max-width:none}
.doc h2{font:900 clamp(24px,3.4vw,34px)/1.05 var(--display);letter-spacing:-.035em;margin:56px 0 16px;text-wrap:balance;scroll-margin-top:16px}
.doc h3{font:800 21px/1.2 var(--body);margin:32px 0 8px;scroll-margin-top:16px}
.doc p,.doc ul,.doc ol{margin:0 0 16px}
.doc li{margin-bottom:6px}
.doc a{color:var(--blue);font-weight:600}
.doc strong{font-weight:750}

.doc code{font:.95em var(--mono);background:var(--sun);padding:1px 6px;border-radius:6px;overflow-wrap:anywhere}
.doc pre{background:var(--ink);color:var(--paper);border:3px solid var(--ink);border-radius:14px;box-shadow:6px 6px 0 var(--blue);padding:14px 18px;margin:0 0 24px;overflow-x:auto;font:16px/1.5 var(--mono)}
.doc pre code{background:none;padding:0;font:inherit;color:inherit;overflow-wrap:normal}
/* service names in running text: mint, so they don't read as code to type */
.doc .svc{background:#c8f3df;color:var(--ink);font-weight:700;padding:1px 6px;border-radius:6px;cursor:help;white-space:nowrap}

.doc blockquote{margin:0 0 24px;background:var(--sky);border:3px solid var(--ink);border-radius:16px;padding:14px 18px}
.doc blockquote p:last-child{margin:0}

.doc .tbl{overflow-x:auto;margin:0 0 24px;border:3px solid var(--ink);border-radius:14px;background:#fff}
.doc table{width:100%;border-collapse:collapse}
.doc th,.doc td{text-align:left;vertical-align:top;padding:10px 16px;border-bottom:1px solid #d9d7ea}
.doc tr:last-child td{border-bottom:0}
.doc th{font-weight:800;background:var(--sun);border-bottom:3px solid var(--ink)}

/* help index: three numbered blocks on one screen, the rest under "Детальніше" */
.doc.idx>*{max-width:780px}
.doc.idx .lede{font-size:clamp(18px,2vw,21px);color:var(--mute);max-width:52ch;margin-bottom:8px}
.doc.idx{counter-reset:blk}
.blk{counter-increment:blk;border:3px solid var(--ink);border-radius:20px;background:#fff;padding:clamp(18px,3vw,28px);margin:28px 0;box-shadow:6px 6px 0 var(--ink)}
.blk:nth-of-type(1){box-shadow:6px 6px 0 var(--blue)}
.blk:nth-of-type(2){box-shadow:6px 6px 0 var(--pink)}
.blk:nth-of-type(3){box-shadow:6px 6px 0 var(--mint)}
.blk h2{display:flex;align-items:center;gap:14px;margin:0 0 16px}
.blk h2::before{content:counter(blk);flex:none;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--sun);font:900 20px var(--display);letter-spacing:0}
.blk>:last-child{margin-bottom:0}
.blk td:first-child code{white-space:nowrap}
.blk blockquote{background:#ffe1ee}
.doc .btn{display:inline-flex;font:800 18px/1 var(--body);background:var(--blue);color:#fff;text-decoration:none;border:3px solid var(--ink);border-radius:14px;padding:15px 20px;box-shadow:5px 5px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.doc .btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}

.doc.idx>.more{max-width:none;margin-top:72px;padding-top:8px;border-top:3px dashed rgba(20,18,58,.25)}
.more h2{margin-top:32px}
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cat{border:2px solid var(--ink);border-radius:16px;padding:16px 18px;background:#fff}
.cat:nth-child(4n+1){background:var(--sun)}
.cat:nth-child(4n+2){background:var(--sky)}
.cat:nth-child(4n+3){background:var(--mint)}
.cat:nth-child(4n+4){background:#ffd1e6}
.cat h3{margin:0 0 8px;font:900 19px/1.1 var(--display);letter-spacing:-.02em}
.cat ul{list-style:none;padding:0;margin:0;font-size:16px}
.cat li{margin:0;padding:6px 0;border-top:1px dashed rgba(20,18,58,.25)}
.cat li:first-child{border-top:0}
.cat a{color:var(--ink);font-weight:800}
/* a section without a link is not written yet */
.cat li:not(:has(a)){color:var(--mute)}
.cat li:not(:has(a))::after{content:" · скоро";font-size:.85em}
@media (max-width:960px){.cats{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.cats{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.doc .btn{transition:none}}

.bye{background:var(--ink);color:var(--paper);padding-block:clamp(48px,7vw,80px) 28px}
.bye h2{font:900 clamp(30px,5vw,56px)/1 var(--display);letter-spacing:-.045em;margin:0 0 12px}
.bye p{margin:0 0 28px;color:#dfe3ff;font-size:19px}
.bye p b{color:var(--sun)}
.go{display:inline-flex;align-items:center;gap:10px;font:800 clamp(17px,2vw,20px)/1 var(--body);background:var(--sun);color:var(--ink);text-decoration:none;border:3px solid var(--sun);border-radius:16px;padding:16px 20px;box-shadow:6px 6px 0 var(--blue);margin-bottom:40px;transition:transform .12s,box-shadow .12s}
.go:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--blue)}
.bye .f{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font:16px var(--mono);color:#a9a6cc;border-top:1px solid #34306a;padding-top:20px}
.bye .f a{color:inherit}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.go{transition:none}}