/* Help pages, v3 (lane H, 29 Oct 2026): Docs, Questions and answers, Contact and support, Page not found.
   One reference system with the two guides: a quiet page head, an on-this-page rail from 1180 px, sections apart by
   whitespace, answers and long reference in disclosures, real screens in .window frames, tools and contact ways as
   crisp cards (research/v2/DESIGN-v3.md), one quiet closing line. Every colour and shadow is a patch.css token, so
   both themes hold. Every list is rendered by the build: help.mjs only hides, shows and opens what is on the page.
   Measures are in em, not ch, so boxes keep their width when the web font arrives. */

/* Without script every list is complete and the search tools are hidden; with script the tools are there from the
   first paint (the shared head adds .js to <html> before anything renders, so nothing shifts). */
html:not(.js) .needs-js{display:none!important}
html.js .nojs-only{display:none!important}

.help{--rail:196px;--rail-gap:clamp(40px,4.4vw,72px);--sec-gap:96px;padding-bottom:var(--s-10)}

/* ---------- Page head: crumbs, title, one or two sentences ---------- */
.help-head{max-width:min(100%,60rem)}
.help-head .t-lede{max-width:31.7em}

/* ---------- Sections: apart by whitespace; the H2 is a size down for reference pages ---------- */
.help-sec+.help-sec{margin-top:var(--sec-gap)}
.help-sec__head{display:grid;gap:var(--s-3);max-width:36.6em;margin-bottom:var(--s-6)}
.help-sec .t-h2{font-size:clamp(28px,2.6vw,38px);line-height:1.08}
.help-sec__lede{color:var(--c-ink-2)}
.help-prose{max-width:41.5em;color:var(--c-ink-2)}
.help-prose p+p{margin-top:var(--s-4)}
.help-more{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-6);margin-top:var(--s-5);list-style:none;font-size:16px}
.i--ext{display:inline-block;width:12px;height:12px;margin-left:4px;vertical-align:-1px;color:var(--c-ink-3)}
.i--brand{width:20px;height:20px}
/* A real screen inside a section: the one picture it carries. */
.help-shot{margin:0 0 var(--s-7)}

/* ---------- Cards and mono tags (the home's vocabulary): white on the canvas, a hairline and a soft shadow ---------- */
.tool,.reach__way,.problems,.nf__links{border:1px solid var(--c-line);border-radius:var(--r-card);background:var(--c-surface);box-shadow:var(--shadow-card)}
/* A technical label: mono, ink-3, with a square in the colour of the way in it belongs to (grey when it has none). */
.mtag{display:inline-flex;align-items:center;gap:8px;margin:0;font:600 13px/1.2 var(--f-mono);letter-spacing:.02em;color:var(--c-ink-3)}
.mtag__dot{flex:none;width:8px;height:8px;border-radius:2px;background:var(--k,var(--c-line-3))}
/* The ways in carry the cable colours of the home's patch panel; the EVE-NG workspace carries its product blue. */
.k-browser,.k-eve{--k:var(--k-blue)}
.k-console{--k:var(--k-aqua)}
.k-web{--k:var(--k-yellow)}
.k-internet{--k:var(--k-green)}

/* ---------- On this page. From 1180 px a sticky rail beside the content; below it, a short quiet list. ---------- */
.toc{margin:0 0 var(--s-8)}
.toc__title{margin-bottom:var(--s-2);font-size:13.5px;font-weight:600;color:var(--c-ink-3)}
.toc ul{display:flex;flex-wrap:wrap;gap:0 var(--s-5);list-style:none}
.toc a{display:inline-flex;align-items:center;min-height:34px;color:var(--c-ink-2);font-size:15px;font-weight:520;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--c-line-3);text-underline-offset:.22em}
.toc a:hover{color:var(--c-ink);text-decoration-color:currentColor}
@media (min-width:1180px){
 .help-layout{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);column-gap:var(--rail-gap);align-items:start}
 .toc{position:sticky;top:calc(var(--header-h) + 32px);margin:0;padding-top:6px}
 .toc ul{display:grid;gap:0;border-left:1px solid var(--c-line-2)}
 .toc a{display:flex;min-height:34px;margin-left:-1px;padding:4px 0 4px 15px;border-left:2px solid transparent;text-decoration:none;font-size:14.5px;line-height:1.35}
 .toc a[aria-current]{color:var(--c-ink);border-left-color:var(--c-signal)}
}

/* ---------- The one quiet line that closes a page ---------- */
.help-end{display:grid;gap:var(--s-3);margin-top:var(--sec-gap);padding-top:var(--s-6);border-top:1px solid var(--c-line-2)}
.help-end p{max-width:41.5em;font-size:17px;color:var(--c-ink-2)}
.help-end ul{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-6);list-style:none;font-size:15.5px}

/* ---------- Search fields, filters and the count line (questions, node tips, sign-ins, images) ---------- */
.finder__tools{display:grid;gap:var(--s-4);margin-bottom:var(--s-6)}
.finder__field{max-width:620px}
.finder__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(190px,260px);gap:var(--s-4);align-items:end;max-width:820px}
.finder__row .finder__field{max-width:none}
.search{position:relative}
.search .i{position:absolute;left:17px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--c-ink-3);pointer-events:none}
.search .input{height:54px;padding-left:46px;border-radius:var(--r-fig);font-size:17px;box-shadow:var(--shadow-card)}
.search--mono .input{font-family:var(--f-mono);font-size:16px}
.search .input::-webkit-search-cancel-button{cursor:pointer}
.filters-select .select{height:54px;border-radius:var(--r-fig)}
/* Filters are toggle buttons (aria-pressed), not tabs: plain words with their counts; the pressed one is a small
   card on the canvas (the segmented control's pressed look). Weight stays put when pressed, so nothing moves. */
.filters{display:flex;flex-wrap:wrap;gap:4px 0;margin-left:-9px}
.filters button{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 9px;border:0;border-radius:var(--r-ctl);background:transparent;color:var(--c-ink-2);font:540 14.5px/1.15 var(--f-sans);text-align:left;cursor:pointer;transition:color .12s,background-color .12s,box-shadow .12s}
.filters button:hover{color:var(--c-ink);background:var(--c-hover)}
.filters button[aria-pressed=true]{background:var(--c-surface);color:var(--c-ink);box-shadow:var(--shadow-card),0 0 0 1px var(--c-line-2)}
.filters button:focus-visible{outline:2px solid var(--c-focus);outline-offset:1px}
.filters__n{font-size:12.5px;font-weight:520;font-variant-numeric:tabular-nums;color:var(--c-ink-3)}
.filters button.is-empty:not([aria-pressed=true]){color:var(--c-ink-3)}
.finder__status{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4);min-height:34px}
.finder__count{font-size:15px;color:var(--c-ink-3);font-variant-numeric:tabular-nums}
.finder__count a{color:var(--c-ink);font-weight:550}

/* Search hits are marked with the Custom Highlight API: no DOM changes, so nothing reflows while you type. */
::highlight(help-hit){background-color:var(--c-signal-wash);color:var(--c-ink);text-decoration:underline 2px var(--c-signal-stroke);text-underline-offset:3px}

/* ---------- Groups of questions or tips. From 1180 px the topic or vendor sits in the rail's column. ---------- */
.groups{border-bottom:1px solid var(--c-line-2)}
.group{border-top:1px solid var(--c-line-2)}
.group__name{display:flex;align-items:baseline;gap:10px;padding:var(--s-5) 0 var(--s-1);font-size:15px;line-height:1.3;font-weight:600;letter-spacing:-.006em;color:var(--c-ink)}
/* Topics wear the colour of what they're about: lab internet green, the console server aqua, EVE-NG labs blue; the
   rest a grey square. Vendors have no colour of their own. */
#faq-search .group__name::before{content:'';flex:none;width:8px;height:8px;border-radius:2px;background:var(--k,var(--c-line-3));transform:translateY(-1px)}
#faq-labs{--k:var(--k-blue)}
#faq-internet{--k:var(--k-green)}
#faq-native-access{--k:var(--k-aqua)}
.group__items>.qa{border-top:0;border-bottom:0}
.group__items>.qa:not([hidden])~.qa{border-top:1px solid var(--c-line)}
@media (min-width:1180px){
 .finder>.help-sec__head,.finder>.finder__tools,.help>.help-end{margin-left:calc(var(--rail) + var(--rail-gap))}
 .finder--lead{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);column-gap:var(--rail-gap);align-items:start}
 .finder--lead>.toc{grid-column:1;grid-row:1/span 2;position:static;padding-top:10px}
 .finder--lead>.help-sec__head,.finder--lead>.finder__tools{grid-column:2;margin-left:0}
 .finder--lead>.groups{grid-column:1/-1}
 .group{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);column-gap:var(--rail-gap)}
 .group__name{position:sticky;top:calc(var(--header-h) + 8px);align-self:start;padding:19px 0}
}

/* Answers: native <details>. Where the browser can animate to auto height they open smoothly; reduced motion makes
   it instant. Find-in-page still opens closed answers. */
.qa{position:relative}
.qa>summary{padding:18px 0;font-size:17px;font-weight:560;line-height:1.42;letter-spacing:-.006em}
.qa>summary:hover .qa__q{text-decoration:underline;text-decoration-color:var(--c-line-3);text-underline-offset:.22em}
.qa__q{min-width:0}
.qa .disclosure__body{max-width:40.3em;padding-bottom:var(--s-5);font-size:16.5px}
.qa__a p{color:var(--c-ink-2)}
.qa__a code{white-space:normal;overflow-wrap:anywhere}
.qa__links{display:flex;flex-wrap:wrap;gap:6px var(--s-5);padding:var(--s-1) 0 0;list-style:none;font-size:15.5px}
.qa:target::before{content:'';position:absolute;left:-14px;top:16px;bottom:16px;width:2px;border-radius:1px;background:var(--c-signal)}
@supports selector(::details-content){
 .qa{interpolate-size:allow-keywords}
 .qa::details-content{block-size:0;overflow-y:clip;transition:block-size .22s var(--ease-out),content-visibility .22s allow-discrete}
 .qa[open]::details-content{block-size:auto}
}

/* ---------- Docs: start here, a two-column list (not cards); each item's tag names the way in it uses ---------- */
.starts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-7);list-style:none}
.start{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:8px;padding:var(--s-5) 0;border-top:1px solid var(--c-line-2)}
.start h3{font-size:17.5px;line-height:1.3;font-weight:600;letter-spacing:-.012em}
.start p{font-size:15.5px;line-height:1.55;color:var(--c-ink-2)}
.start p code{white-space:normal;overflow-wrap:anywhere}
.start .mtag{font-size:12.5px}
.start__go{display:flex;flex-wrap:wrap;align-self:end;gap:2px var(--s-5);padding-top:2px;font-size:15px}

/* ---------- Commands ---------- */
/* A command inside a sentence keeps the sentence intact and still copies in one click. */
.cmd--inline{display:inline-flex;max-width:100%;margin:1px 0;padding:1px 2px 1px 8px;gap:6px;vertical-align:baseline;border-radius:6px;white-space:normal}
.cmd-end{white-space:nowrap}
.cmd--inline code{padding:2px 0;font-size:13.5px}
.cmd--inline .copy{height:24px;padding:0 8px;font-size:12.5px}
.cmd--bare{padding:0;border:0;background:none}
.cmd--bare code{font-size:13.5px}
.cmd--bare .copy{height:26px;padding:0 8px;font-size:12.5px}
.cmd--key{max-width:640px;box-shadow:var(--shadow-card)}
.cmd--key code{font-size:14.5px}
.fp{white-space:normal;overflow-wrap:anywhere}
[data-user].is-filled{border-radius:3px;background:var(--c-signal-wash);box-shadow:0 0 0 1px var(--c-signal-wash)}

/* Optional username: fills USERNAME in every command on the page, nothing stored or sent. */
.userfill{display:grid;gap:6px;max-width:420px;margin:0 0 var(--s-7)}
.userfill .input{font-family:var(--f-mono);font-size:16px}

/* ---------- Steps (real steps, numbered) ---------- */
.steps>li>*+*{margin-top:var(--s-3)}
.steps>li>p{max-width:41.5em;color:var(--c-ink-2)}
.steps>li>p strong{color:var(--c-ink);font-weight:600}
.steps .disclosure{max-width:41.5em;margin-top:var(--s-4)}
.steps .disclosure>summary{padding:14px 0;font-size:16px;font-weight:600}
.steps .disclosure__body{padding-bottom:var(--s-4);font-size:15.5px}
/* A second part inside one section (8 Nov 2026: in "Open lab devices from your own computer", the console server
   after the right-click guide), and a disclosure that sits between the parts. */
.help-sub{margin:var(--s-9) 0 var(--s-3);font-size:clamp(21px,1.8vw,26px);line-height:1.2;font-weight:600;letter-spacing:-.008em;color:var(--c-ink)}
.help-sub__lede{max-width:36.6em;margin:0 0 var(--s-6);color:var(--c-ink-2)}
#right-click code,.help-sub__lede code{white-space:normal;overflow-wrap:anywhere}
.tunnels--ways td:last-child{width:auto}
.tunnels--ways td:nth-child(2){width:38%}
.help-sec>.disclosure{max-width:41.5em;margin-top:var(--s-6)}
/* A real crop of the lab page (not a whole window, so no browser frame): shown at its own size. */
.help-still img{display:block;width:100%;max-width:680px;height:auto;border:1px solid var(--c-line);border-radius:var(--r-fig);box-shadow:var(--shadow-card)}
.help-sec>.disclosure>summary{padding:14px 0;font-size:16px;font-weight:600}
/* The example lab's own forward, under the table: a real command to try. */
.try{display:grid;gap:8px;max-width:41.5em;padding:16px 18px;border:1px solid var(--c-line);border-radius:var(--r-card);background:var(--c-surface-2)}
.try p{font-size:15px;color:var(--c-ink-2)}
.try .cmd{box-shadow:var(--shadow-card)}

/* ---------- Tables: tunnel commands and default sign-ins. Phones: each row becomes its own block. ---------- */
.help .table-wrap{border-color:var(--c-line);border-radius:var(--r-card);box-shadow:var(--shadow-card)}
.help .table thead th{background:var(--c-surface-2);border-bottom-color:var(--c-line-2)}
.tunnels th[scope=row],.creds th[scope=row]{color:var(--c-ink);font-weight:600}
.tunnels th[scope=row]{width:15%}
.tunnels td:last-child{width:22%;color:var(--c-ink-2)}
.tunnels .cmd{padding:4px 4px 4px 10px}
.tunnels .cmd code{font-size:13px}
.creds th[scope=row]{width:27%;overflow-wrap:anywhere}
.creds td{font-size:14.5px;line-height:1.5;color:var(--c-ink-2)}
.cl{display:block}
.cl+.cl{margin-top:2px}
.cl__k{display:inline-block;min-width:5.4em;font-size:13px;color:var(--c-ink-3)}
.cl code{white-space:normal;overflow-wrap:anywhere}
.cl--gap{height:2px}
.cred-none{color:var(--c-ink-3)}
html.js [data-creds][data-state=collapsed] tbody tr:nth-child(n+11){display:none}
.list-more{margin-top:var(--s-5)}
@media (max-width:759px){
 .tunnels,.creds{overflow:visible;border:0;border-top:1px solid var(--c-line-2);border-radius:0;background:none;box-shadow:none}
 .tunnels :is(table,tbody,tr,th,td),.creds :is(table,tbody,tr,th,td),.tunnels th[scope=row],.tunnels td:last-child,.creds th[scope=row]{display:block;width:auto}
 .tunnels thead,.creds thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
 .tunnels tr,.creds tr{padding:var(--s-4) 0;border-bottom:1px solid var(--c-line)}
 .tunnels th[scope=row],.creds th[scope=row]{padding:0 0 var(--s-2);border:0}
 .tunnels td,.creds td{padding:var(--s-2) 0 0;border:0}
 .tunnels td::before,.creds td::before{content:attr(data-label);display:block;margin-bottom:4px;font-size:12.5px;font-weight:600;color:var(--c-ink-3)}
}

/* ---------- Tool cards: the sign-ins and the image list. A tag and the live count on top, the search, the list,
   then the footer actions. ---------- */
.tool{overflow:hidden}
.tool__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px var(--s-5);min-height:56px;padding:12px 24px;border-bottom:1px solid var(--c-line)}
.tool__top .finder__status{min-height:0}
.tool__top .finder__count{font-size:14px}
.tool .finder__tools{margin:0;padding:20px 24px}
.tool .finder__field{max-width:none}
.tool .search .input{box-shadow:none}
.tool .table-wrap{border:0;border-top:1px solid var(--c-line);border-radius:0;box-shadow:none}
.tool__foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-6);margin:0;padding:16px 24px;border-top:1px solid var(--c-line);background:var(--c-surface-2)}
.tool__foot .list-more{margin:0}
.tool .list-more.nojs-only{margin:0;padding:16px 24px;border-top:1px solid var(--c-line);color:var(--c-ink-2)}
.imgs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-6);margin:0 24px;list-style:none;border-top:1px solid var(--c-line)}
/* The family label is a heuristic, so it sits small above the exact name, which gets the whole row. */
.imgs li{display:grid;align-content:center;gap:1px;min-height:64px;padding:9px 0;border-bottom:1px solid var(--c-line)}
.imgs li:nth-last-child(-n+2){border-bottom:0}
.imgs__fam{font-size:12.5px;line-height:1.3;color:var(--c-ink-3);overflow-wrap:anywhere}
.imgs .cmd code{white-space:normal;overflow-wrap:anywhere;color:var(--c-ink)}
.imgs .cmd--bare code{font-size:13px}

/* ---------- Video guides: YouTube facades (no request to YouTube until Play) ---------- */
.videos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-6) var(--s-5);list-style:none}
.video{display:grid;gap:var(--s-3);align-content:start}
.video .yt{box-shadow:var(--shadow-card),0 0 0 1px var(--c-line)}
.video__title{font-size:16.5px;line-height:1.35;font-weight:600;letter-spacing:-.008em}
.nobr{white-space:nowrap}

/* ---------- Contact and support: two equal ways in, as crisp cards ---------- */
.reach{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5);margin-bottom:var(--sec-gap)}
.reach__way{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:var(--s-4);padding:28px 32px 32px}
.reach__top{display:flex;align-items:center;gap:var(--s-4)}
.reach__icon{display:grid;flex:none;place-items:center;width:48px;height:48px;border-radius:var(--r-fig);background:var(--c-surface-2);box-shadow:0 0 0 1px var(--c-line);color:var(--c-ink)}
.reach__icon .i{width:22px;height:22px}
.reach__icon .i--brand{width:24px;height:24px}
.reach__name{font-size:clamp(24px,2.1vw,30px);line-height:1.15;font-weight:600;letter-spacing:-.012em}
/* What each way is for: short facts with a dash, as on the home's cards. */
.reach__facts{display:grid;align-content:start;gap:6px;list-style:none;font-size:16px;color:var(--c-ink-2)}
.reach__facts li{position:relative;padding-left:18px}
.reach__facts li::before{content:'';position:absolute;left:0;top:.66em;width:8px;height:2px;border-radius:1px;background:var(--c-line-3)}
.reach__note{max-width:28em;font-size:15px;color:var(--c-ink-3)}
.reach__act{display:flex;flex-wrap:wrap;align-items:center;align-self:end;gap:var(--s-3);padding-top:var(--s-2)}
.include{display:grid;gap:10px;max-width:40.3em;list-style:none;font-size:17px;color:var(--c-ink-2)}
.include li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:12px;align-items:baseline}
.include .i{transform:translateY(3px);color:var(--c-ink-3)}
.include code{white-space:normal;overflow-wrap:anywhere}
.include+.note{margin-top:var(--s-6);max-width:40.3em}
.note--warn strong{display:inline-flex;align-items:center;gap:8px}
.note--warn strong::before{content:'';flex:none;width:15px;height:15px;background:var(--c-warn);-webkit-mask:var(--i-alert) center/contain no-repeat;mask:var(--i-alert) center/contain no-repeat}
.host-key__after{margin-top:var(--s-4)}
/* Common problems: one card, one row per problem, the answer it opens on the right. */
.problems{max-width:820px;padding:0 24px;list-style:none}
.problems li+li{border-top:1px solid var(--c-line)}
.problems a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:4px var(--s-5);padding:17px 0;color:var(--c-ink);text-decoration:none}
.problems strong{font-size:16.5px;font-weight:560;letter-spacing:-.006em}
.problems span{font-size:14px;color:var(--c-ink-3);text-align:right}
.problems a:hover strong{text-decoration:underline;text-decoration-color:var(--c-line-3);text-underline-offset:.22em}

/* ---------- Page not found: an empty RJ45 socket, its link LED off (theme tokens made for it) ---------- */
.nf{display:grid;justify-items:start;gap:var(--s-5);padding-top:clamp(56px,8vw,120px);padding-bottom:var(--s-10)}
.nf .t-lede{max-width:26.8em}
.nf__port{display:grid;grid-template-columns:auto 9px;align-items:center;gap:10px;margin-bottom:var(--s-2)}
.nf__socket{position:relative;display:block;width:64px;height:50px;border-radius:var(--r-fig);background:var(--c-socket);box-shadow:0 0 0 1px var(--c-line-2),inset 0 1px 0 var(--c-line)}
/* The opening, its eight contacts along the top and the latch slot at the bottom. */
.nf__socket::before{content:'';position:absolute;left:11px;right:11px;top:10px;bottom:14px;border-radius:3px;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--k-yellow) 72%,var(--c-socket-2)) 0 2px,transparent 2px 4px) 50% 3px/30px 7px no-repeat,var(--c-socket-2);box-shadow:inset 0 0 0 1px var(--c-line)}
.nf__socket::after{content:'';position:absolute;left:50%;bottom:8px;width:18px;height:7px;transform:translateX(-50%);border-radius:0 0 3px 3px;background:var(--c-socket-2)}
.nf__led{display:block;width:9px;height:9px;border-radius:50%;background:var(--c-dot);box-shadow:inset 0 0 0 1px var(--c-line)}
.nf__path{font-size:15px;color:var(--c-ink-3)}
.nf__path code{white-space:normal;overflow-wrap:anywhere}
.nf__routes{width:100%;max-width:820px;margin-top:var(--s-7)}
.nf__try{margin-bottom:var(--s-3);font-size:15px;font-weight:600;color:var(--c-ink-3)}
/* Six routes in one card, each with its real path as a mono tag. */
.nf__links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));list-style:none;overflow:hidden}
.nf__links li{border-top:1px solid var(--c-line)}
.nf__links li:nth-child(-n+2){border-top:0}
.nf__links li:nth-child(even){border-left:1px solid var(--c-line)}
.nf__links a{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:60px;padding:0 22px;color:var(--c-ink);font-size:16.5px;font-weight:600;letter-spacing:-.008em;text-decoration:none}
.nf__links a:hover{background:var(--c-hover)}
.nf__links a:hover>span:first-child{text-decoration:underline;text-decoration-color:var(--c-line-3);text-underline-offset:.22em}
.nf__links .mtag{font-weight:500}
.nf__lab{margin-top:var(--s-5);color:var(--c-ink-2)}

/* ---------- Responsive ---------- */
@media (max-width:1023px){
 .videos{grid-template-columns:repeat(2,minmax(0,1fr))}
 .reach{grid-template-columns:1fr}
 .reach__way{grid-template-rows:none;grid-row:auto}
}
@media (max-width:759px){
 .help{--sec-gap:64px;padding-bottom:var(--s-9)}
 .starts,.imgs,.nf__links{grid-template-columns:minmax(0,1fr)}
 .start{grid-template-rows:none;grid-row:auto}
 .imgs li:nth-last-child(2){border-bottom:1px solid var(--c-line)}
 .nf__links li:nth-child(2){border-top:1px solid var(--c-line)}
 .nf__links li:nth-child(even){border-left:0}
 .videos{grid-template-columns:1fr}
 .qa:target::before{left:-10px}
 .help-shot{margin-bottom:var(--s-6)}
 .tool__top,.tool .finder__tools,.tool__foot,.tool .list-more.nojs-only{padding-left:18px;padding-right:18px}
 .imgs{margin:0 18px}
}
@media (max-width:639px){
 .finder__row{grid-template-columns:minmax(0,1fr)}
 .problems{padding:0 18px}
 .problems a{grid-template-columns:minmax(0,1fr)}
 .problems span{text-align:left}
}
@media (max-width:520px){
 .search .input{height:52px;padding-left:42px;font-size:16px}
 .search .i{left:14px}
 .search--mono .input::placeholder{font-family:var(--f-sans);letter-spacing:-.005em}
 /* 12.5px mono fits console.cloudlabbox.com on one line beside its Copy button at 320px. */
 .cmd--inline code,.tunnels .cmd code,.cmd--bare code{font-size:12.5px}
 .steps>li{padding-left:40px}
 .reach__way{padding:22px 20px 24px}
 .reach__act .btn{flex:1 1 100%;height:auto;min-height:50px;padding:12px 16px;white-space:normal;line-height:1.3;text-align:center}
 .filters{margin-left:-8px}
 .filters button{padding:0 8px}
 .nf__links a{padding:0 18px}
}

/* ---------- Preferences ---------- */
/* patch.css stops motion on elements, ::before and ::after; the answers' ::details-content needs its own line. */
@media (prefers-reduced-motion:reduce){
 .qa::details-content{transition:none}
}
@media (forced-colors:active){
 .filters button{border:1px solid CanvasText}
 .filters button[aria-pressed=true]{outline:2px solid Highlight;outline-offset:1px}
 .toc a[aria-current]{border-left-color:Highlight}
 .qa:target::before{background:Highlight}
 ::highlight(help-hit){background-color:Highlight;color:HighlightText}
 .tool,.reach__way,.problems,.nf__links,.try{border:1px solid CanvasText}
 .mtag__dot,#faq-search .group__name::before{forced-color-adjust:none}
 /* Mask icons are painted with a background colour, which forced colours would erase. */
 .qa>summary::after,.steps .disclosure>summary::after,.note--warn strong::before,.field__error::before{forced-color-adjust:none;background:CanvasText}
 [data-user].is-filled{outline:1px solid Highlight}
 .nf__socket{forced-color-adjust:none;border:1px solid CanvasText}
}
@media print{
 .pg-help .site-header,.pg-help .site-footer,.pg-help .skip,.toc,.needs-js,.yt,.help-shot{display:none!important}
 .qa::details-content{block-size:auto;content-visibility:visible}
 html.js [data-creds][data-state=collapsed] tbody tr:nth-child(n+11){display:table-row}
}