/* How-to guides, v3 (lane H, 29 Oct 2026): /how-to-access-node-gui-in-eve-ng-cloud/ and
   /how-to-connect-eve-ng-nodes-to-the-internet/. The help set's reference layout, with the values docs, FAQ and
   support share: a page head (crumbs, title, one or two sentences, the date and at most one key answer), a sticky
   "On this page" rail in the margin from 1180 px, a reading column of about 40em, sections parted by whitespace
   (96 px, 64 px on phones), real screens in .window frames, and long reference in closed disclosures.
   v3 (research/v2/DESIGN-v3.md): theme-safe (tokens only, so light and dark both work), and crisp cards with a 3 px
   top edge in the way-in colour instead of tinted panels: browser console blue, console server aqua, lab internet
   green. Measures are in em, not ch, so boxes keep their width when the web font arrives. */

/* ---------- Grid: the head and the sections share one left edge; the rail sits in the margin ---------- */
.guide{padding:clamp(40px,6vw,88px) 0 var(--s-9)}
.guide-grid{display:grid;grid-template-columns:minmax(0,1fr)}
.guide-grid>*{min-width:0}

/* ---------- Page head ---------- */
.guide .page-head{gap:0;max-width:none;padding:0 0 var(--s-8)}
.guide .crumbs{margin:0}
.guide-nw{white-space:nowrap}
.crumbs [aria-current]{color:var(--c-ink-2)}
.guide .page-head .t-title{max-width:13em;margin-top:var(--s-5)}
.guide .page-head .t-lede{margin-top:var(--s-5)}
.guide .page-head .t-meta{margin-top:var(--s-4)}

/* ---------- Cards: crisp surfaces on the canvas, with the way-in colour on the top edge ---------- */
.gcard{position:relative;display:grid;align-content:start;gap:var(--s-3);padding:26px 28px 28px;border:1px solid var(--c-line);border-radius:var(--r-card);background:var(--c-surface);box-shadow:var(--shadow-card);overflow:hidden}
.gcard::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--k,var(--c-line-3))}
.gcard--browser{--k:var(--k-blue)}
.gcard--tunnel{--k:var(--k-aqua)}
.gcard--web{--k:var(--k-yellow)}
.gcard--internet{--k:var(--k-green)}
.gcard__tag{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)}
.gcard__dot{flex:none;width:8px;height:8px;border-radius:2px;background:var(--k)}
/* The one key answer in the head: the tunnel command. */
.guide-key{max-width:46em;margin-top:var(--s-6);padding:20px 20px 20px 22px}
.guide-key p{font-size:15.5px;line-height:1.5;color:var(--c-ink-2)}
.guide-key p code{white-space:normal;overflow-wrap:anywhere}
.guide-key .cmd{background:var(--c-surface-2);border-color:var(--c-line)}
/* The one action on the internet guide: request destinations. */
.guide-action{justify-items:start;max-width:46em;padding:26px 28px 30px}
.guide-action p{max-width:38em;color:var(--c-ink-2)}
.guide-action .btn{margin-top:var(--s-2)}

/* ---------- On this page: a quiet list under the head; a sticky rail from 1180 px ---------- */
.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 ol{display:flex;flex-wrap:wrap;gap:2px var(--s-5);list-style:none}
.toc a{display:inline-flex;align-items:center;min-height:32px;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){
 .guide-grid{grid-template-columns:196px minmax(0,1fr);column-gap:clamp(40px,4.4vw,72px)}
 .guide-grid>.page-head,.guide-grid>.guide-body{grid-column:2}
 .guide-grid>.toc{grid-column:1;grid-row:1/span 2;align-self:start;position:sticky;top:calc(var(--header-h) + 32px);margin:0;padding-top:2px}
 .toc ol{display:grid;gap:0;border-left:1px solid var(--c-line-2)}
 .toc a{display:flex;min-height:34px;margin-left:-1px;padding:5px 0 5px 15px;border-left:2px solid transparent;text-decoration:none;font-size:14.5px;line-height:1.35}
 /* The section being read: toc.mjs sets aria-current="location". */
 .toc a[aria-current]{color:var(--c-ink);border-left-color:var(--c-ink);font-weight:560}
}

/* ---------- Sections: whitespace between them, prose at a reading measure ---------- */
.guide-body{display:grid;gap:var(--s-9)}
.gsec{display:grid;gap:var(--s-5);align-content:start;min-width:0}
.gsec>*{min-width:0}
.gsec>.t-h2+*{margin-top:-4px}
.gsec>p,.gsec>ul,.gsec>.prose,.gsec>.note{max-width:40em}
.gsec>p{color:var(--c-ink-2)}
.gsec h3{font-size:18.5px;line-height:1.35;font-weight:600;letter-spacing:-.01em}
.guide-body p code,.guide-body li code,.guide-body dt code,.guide-body dd code,.guide-body td code,.guide-body th code{white-space:normal;overflow-wrap:anywhere}
.bullets{display:grid;gap:10px;padding-left:1.15em;list-style:disc}
.bullets li::marker{color:var(--c-ink-3)}
/* What must be true first: ticks, not bullets (the tick is a mask, so it takes the theme's signal colour). */
.ticks{display:grid;gap:12px;list-style:none}
.ticks li{position:relative;padding-left:32px}
.ticks li::before{content:'';position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;background:var(--c-signal-wash)}
.ticks li::after{content:'';position:absolute;left:4.5px;top:7.5px;width:11px;height:11px;background:var(--c-signal);-webkit-mask:var(--i-tick) center/contain no-repeat;mask:var(--i-tick) center/contain no-repeat}
:root{--i-tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.3 4.8 8.8 9.8 3.4' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.gsec .note{font-size:15.5px}
.note h3{font-size:15.5px;font-weight:600;color:var(--c-ink)}
/* A practise line: the example lab's own device for the method above. */
.practise{display:grid;gap:10px;max-width:46em}
.practise p{color:var(--c-ink-2)}

/* ---------- Real steps: numbered discs joined by one quiet lead ---------- */
.steps{gap:28px;max-width:41em}
.steps>li{gap:6px}
.steps>li:not(:last-child)::after{content:'';position:absolute;left:14.5px;top:36px;bottom:-22px;width:1px;background:var(--c-line-2)}
.steps h3{padding-top:1px}
.steps p{color:var(--c-ink-2)}
.steps .cmd{margin-top:6px}
.sequence[role=list]{list-style:none}
.checks>li{padding-top:2px}

/* ---------- Pictures: real screens in window frames, one per section ---------- */
.guide-fig{display:grid;gap:14px;margin:var(--s-3) 0 0;max-width:980px}
.guide-fig .fig-cap{margin:0;max-width:40em}
.guide-watch{max-width:640px}
.guide-watch .fig-cap .link{white-space:nowrap}
.guide-watch-link{margin-top:var(--s-4);font-size:15px;color:var(--c-ink-2)}

/* ---------- Disclosures: long reference, closed until wanted ---------- */
.disclosures{display:grid;max-width:780px;margin-top:var(--s-2)}
.disclosures>.disclosure:last-child{border-bottom:1px solid var(--c-line-2)}
.guide .disclosure__body{max-width:none}
.guide .disclosure__body>p,.guide .disclosure__body>ul{max-width:40em}
.guide .disclosure__body .table-wrap,.guide .disclosure__body .cfg{margin-top:var(--s-4)}
.guide .disclosure__body .cmd{max-width:780px}
.guide .disclosure__body .bullets{gap:12px}
.guide .disclosure__body .bullets .cmd{margin-top:8px}
.gsec>.disclosure:last-child{border-bottom:1px solid var(--c-line-2)}

/* ---------- Choosing a method: two cards, the browser console's blue and the console server's aqua ---------- */
.methods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
.methods--one{grid-template-columns:minmax(0,1fr);max-width:640px}
.gsec .method__name{font-size:clamp(21px,1.8vw,24px);line-height:1.18;font-weight:600;letter-spacing:-.012em}
.method__name a{color:var(--c-ink);text-decoration:none}
.method__name a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.14em}
.method__for{font-size:15.5px;line-height:1.5;color:var(--c-ink-2)}
.method__facts{display:grid;margin:var(--s-2) 0 0}
.method__head{display:grid;align-content:start;gap:var(--s-3)}
/* Side by side, the facts line up row for row across the two cards; each card's head stays together at the top. */
@media (min-width:761px){
 .methods{grid-template-rows:repeat(5,auto)}
 .method{grid-row:span 5;grid-template-rows:subgrid}
 .method__facts{grid-row:span 4;grid-template-rows:subgrid;row-gap:0}
}
.method__facts>div{display:grid;grid-template-columns:92px minmax(0,1fr);gap:4px var(--s-3);padding:12px 0;border-top:1px solid var(--c-line)}
.method__facts dt{font-size:13.5px;font-weight:600;color:var(--c-ink-3);padding-top:2px}
.method__facts dd{margin:0;font-size:15px;line-height:1.5;color:var(--c-ink)}

/* ---------- Commands and configurations: device bar on the surface, the config on --c-surface-2 ---------- */
/* A worked example under a section's steps: its own heading, a sentence, then the configs. */
.sub{display:grid;gap:var(--s-4);max-width:780px;margin-top:var(--s-6)}
.sub>p{max-width:40em;color:var(--c-ink-2)}
.sub>.disclosures{margin-top:var(--s-1)}
.cfg{margin:0;display:grid;gap:10px}
.cfg .cmd{display:block;padding:0;overflow:hidden;border-color:var(--c-line);border-radius:var(--r-card);background:var(--c-surface-2);box-shadow:var(--shadow-card)}
.cfg__bar{display:flex;flex-wrap:wrap;align-items:center;gap:4px var(--s-3);padding:7px 7px 7px 16px;border-bottom:1px solid var(--c-line);background:var(--c-surface)}
.cfg__dev{font-weight:600;font-size:14.5px}
.cfg__what{margin-right:auto;font:450 12.5px/1.3 var(--f-mono);color:var(--c-ink-3)}
.cfg pre.code{border:0;border-radius:0;background:var(--c-surface-2);font-size:13.5px;line-height:1.6}
.cfg pre.code code{display:block;padding:0;background:none;font-size:inherit;white-space:pre;overflow-wrap:normal;color:var(--c-ink)}
.cfg .c{color:var(--c-ink-3)}
.cfg .hl{display:inline-block;min-width:100%;margin:0 calc(-1 * var(--s-5));padding:0 var(--s-5);box-shadow:inset 2px 0 0 var(--c-signal-stroke);background:var(--c-signal-wash)}
.cfg .fig-cap{margin:0}

/* ---------- Tables: real tables on wide screens, labelled blocks on phones ---------- */
.table td code,.table th code{white-space:normal;overflow-wrap:anywhere}
.table caption{caption-side:top;padding:var(--s-3) var(--s-4) var(--s-2);text-align:left;font-size:14.5px;font-weight:600;color:var(--c-ink);border-bottom:1px solid var(--c-line)}
.table--key th[scope=row]{width:34%;font-weight:600}
.table--key td{color:var(--c-ink-2)}
@media (max-width:640px){
 .table--stack{border:0;background:none;overflow:visible}
 .table--stack table,.table--stack tbody,.table--stack tr,.table--stack th,.table--stack td,.table--stack caption{display:block}
 .table--stack caption{padding:0 0 var(--s-3);border:0}
 .table--stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
 .table--stack tr{padding:var(--s-4);margin-bottom:var(--s-3);border:1px solid var(--c-line);border-radius:var(--r-card);background:var(--c-surface);box-shadow:var(--shadow-card)}
 .table--stack .table th[scope=row]{width:auto;padding:0 0 var(--s-2);border:0;font-size:16px}
 .table--stack .table td{width:auto;padding:var(--s-2) 0 0;border:0}
 .table--stack td[data-label]::before{content:attr(data-label);display:block;margin-bottom:2px;font-size:12.5px;font-weight:550;color:var(--c-ink-3)}
}

/* ---------- Symptom first, then what to check ---------- */
.fixes{display:grid;gap:var(--s-5);margin:0;max-width:40em}
.fixes>div{display:grid;gap:6px}
.fixes dt{font-weight:600;font-size:17px;line-height:1.4;color:var(--c-ink)}
.fixes dd{display:grid;gap:var(--s-2);margin:0;color:var(--c-ink-2)}
.fixes dd .bullets{gap:6px}
.disclosure__body .fixes{gap:var(--s-5);margin-top:var(--s-2)}
.disclosure__body .fixes dt{font-size:16px}

/* ---------- The internet guide's path: four stops on one quiet line (typographic, not a drawing) ---------- */
.path{--gap:var(--s-5);margin:var(--s-2) 0 0;max-width:980px}
.path ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);list-style:none;padding:0}
.path li{position:relative;display:grid;align-content:start;gap:4px;padding-top:30px}
.path li::before{content:'';position:absolute;left:0;top:0;width:12px;height:12px;border-radius:50%;background:var(--c-canvas);box-shadow:inset 0 0 0 2px var(--c-ink-3)}
/* One segment from each stop to the next. Inside the lab it is a plain cable; from your router out it is the
   lab-internet lead (green), ending at the destination. */
.path li:not(:last-child)::after{content:'';position:absolute;left:16px;top:5px;width:calc(100% + var(--gap) - 20px);height:2px;border-radius:2px;background:var(--c-line-3)}
.path li:nth-child(n+2):not(:last-child)::after{background:var(--k-green)}
.path li:last-child::before{box-shadow:inset 0 0 0 2px var(--k-green)}
.path strong{font-weight:600;font-size:16px;line-height:1.3;color:var(--c-ink)}
.path span{font-size:14.5px;line-height:1.45;color:var(--c-ink-3)}

/* ---------- The close: one quiet line of where next, and a person to ask ---------- */
.guide-next{display:grid;gap:var(--s-3);margin-top:calc(var(--s-8) - var(--s-9))}
.guide-next__links{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-6)}
.guide-next__help{max-width:42em;font-size:15.5px;color:var(--c-ink-3)}

/* ---------- Responsive ---------- */
@media (max-width:1179px){
 .toc{padding-bottom:var(--s-6);border-bottom:1px solid var(--c-line)}
 .toc ol{gap:0 var(--s-5)}
 .toc a{min-height:30px;font-size:14.5px}
}
@media (max-width:760px){
 .methods{grid-template-columns:minmax(0,1fr)}
 .path{--gap:var(--s-4)}
 .path ol{grid-template-columns:minmax(0,1fr)}
 .path li{padding:0 0 0 30px}
 .path li:not(:last-child)::after{left:5px;top:16px;width:2px;height:auto;bottom:calc(-1 * var(--gap) + 4px)}
}
@media (max-width:520px){
 .guide-body{gap:var(--s-8)}
 .guide .page-head{padding-bottom:var(--s-7)}
 .gcard{padding:22px 18px 22px}
 .guide-key{padding:18px 14px 14px}
 .steps>li{padding-left:42px}
 .method__facts>div{grid-template-columns:minmax(0,1fr);gap:2px}
 .cfg pre.code{font-size:12.5px;padding:var(--s-3)}
 .cfg .hl{margin:0 calc(-1 * var(--s-3));padding:0 var(--s-3)}
}

/* ---------- Preferences ---------- */
@media (forced-colors:active){
 .gcard,.cfg .cmd{border:1px solid CanvasText}
 .gcard::before,.gcard__dot{forced-color-adjust:none}
 .path li:not(:last-child)::after{forced-color-adjust:none;background:CanvasText}
 .path li::before{forced-color-adjust:none;background:Canvas;box-shadow:inset 0 0 0 2px CanvasText}
 .ticks li::before{forced-color-adjust:none;background:Canvas;box-shadow:inset 0 0 0 1px CanvasText}
 .ticks li::after{forced-color-adjust:none;background:CanvasText}
 .steps>li:not(:last-child)::after{background:CanvasText}
 .cfg .hl{forced-color-adjust:none;background:Canvas;color:CanvasText;box-shadow:inset 3px 0 0 Highlight}
 .toc a[aria-current]{border-left-color:Highlight}
}
@media print{
 .toc,.yt,.footage__ctl{display:none}
 .guide-grid{grid-template-columns:1fr}
}