/* Native access, right-click refresh (8 Nov 2026). Loaded after css/ways.css and css/product.css on /native-access.html.
   The page keeps the product hero, the 1U patch panel and the ways in; these rules add only what the right-click flow
   needs: the method panels' "what to do next" sheets, the walkthrough with its chapter index, the menu map of the
   example lab (one RJ45 jack per way: a plug where the menu offers it), the one-time rules and the console server
   section. Tokens only, so both themes follow patch.css; terminals stay dark in both, as the dialog's command box is. */

/* ---------- Hero ---------- */
.na-hero .pp-hero__copy .t-title{max-width:11.6em}
.na-hero__sep{white-space:pre}

/* ---------- Method panels: the loop, then what you get and what to do next ---------- */
.na-way{gap:var(--s-5)}
.na-way__text{display:grid;gap:var(--s-4)}
.na-way__lead{max-width:38em;font-size:17px;line-height:1.6;color:var(--c-ink-2)}
.na-way__lead b{font-weight:600;color:var(--c-ink)}
/* The shape of what the menu gives you, drawn like the dialog's own command box (dark in both themes). Not a
   command to copy: the t-… part is new every time. */
.na-shape{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:0}
.na-shape>code{display:inline-block;max-width:100%;padding:9px 14px;border-radius:var(--r-fig);background:var(--c-term-bg);color:var(--c-term-fg);font-size:13.5px;line-height:1.5;white-space:normal;overflow-wrap:anywhere;box-shadow:inset 0 0 0 1px var(--c-term-line)}
.na-shape__p{color:var(--c-term-dim);user-select:none}
.na-shape i{font-style:normal;color:var(--c-term-hi)}
.na-shape__note{font-size:13.5px;color:var(--c-ink-3)}
/* A file chip for the .rdp download, as the dialog shows it. */
.na-file{display:inline-flex;align-items:center;gap:12px;max-width:100%;margin:0;padding:10px 16px 10px 12px;border:1px solid var(--c-line);border-radius:var(--r-fig);background:var(--c-surface);box-shadow:var(--shadow-card)}
.na-file svg{flex:none;width:22px;height:22px;color:var(--c-ink-2)}
.na-file b{display:block;font:600 14.5px/1.35 var(--f-mono);color:var(--c-ink);overflow-wrap:anywhere}
.na-file span{display:block;font-size:13px;color:var(--c-ink-3)}
/* What to do next: a small spec sheet, two facts to a row on wide screens. */
.na-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:var(--s-1) 0 0;border-top:1px solid var(--c-line)}
.na-facts>div{display:grid;align-content:start;gap:4px;padding:14px 20px 14px 0;border-bottom:1px solid var(--c-line)}
.na-facts>div:nth-child(even){padding-left:20px;padding-right:0;border-left:1px solid var(--c-line)}
.na-facts dt{font-size:13.5px;font-weight:600;color:var(--c-ink-3)}
.na-facts dd{margin:0;font-size:15.5px;line-height:1.55;color:var(--c-ink-2)}
.na-facts dd q{color:var(--c-ink)}
.na-way code,.na-facts code,.na-reach code,.na-once code,.na-cmds__then code,.na-fwd__table td:last-child code,.na-fwd__table caption code,.na-walk code{white-space:normal;overflow-wrap:anywhere}
.na-way kbd,.na-cmds kbd{font-size:.8em}

/* ---------- The walkthrough: a click-to-play film with its chapter index ---------- */
.na-walk__head{display:grid;gap:var(--s-4);max-width:40em;margin-bottom:var(--s-8)}
.na-film{display:grid;grid-template-columns:minmax(0,8.2fr) minmax(0,3.8fr);gap:var(--s-7);align-items:start}
.na-film__clip{min-width:0}
.na-film__index{display:grid;gap:var(--s-3);min-width:0;padding:var(--s-4) var(--s-3) var(--s-4) var(--s-4);border:1px solid var(--c-line);border-radius:var(--r-card);background:var(--c-surface);box-shadow:var(--shadow-card)}
.na-film__title{margin:0 0 2px 8px;font-size:14px;font-weight:600;color:var(--c-ink-3)}
.na-chapters{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.na-chapter{position:relative;display:grid;grid-template-columns:3.2em minmax(0,1fr);gap:10px;align-items:baseline;width:100%;padding:9px 10px 9px 8px;border:0;border-radius:var(--r-ctl);background:none;color:var(--c-ink-2);font:inherit;font-size:15px;line-height:1.4;text-align:left;cursor:pointer;transition:background-color .14s,color .14s}
.na-chapter:hover{background:var(--c-hover);color:var(--c-ink)}
.na-chapter__t{font:500 13px/1.4 var(--f-mono);font-variant-numeric:tabular-nums;color:var(--c-ink-3)}
.na-chapter[aria-current=true]{background:var(--c-signal-wash);color:var(--c-ink)}
.na-chapter[aria-current=true] .na-chapter__t{color:var(--c-signal)}
.na-film__note{margin:2px 8px 0;font-size:13.5px;color:var(--c-ink-3)}
.na-film .transcript{margin:0 8px}
.na-transcript__body{display:grid;gap:8px;margin-top:var(--s-3);padding:var(--s-3) var(--s-4);border:1px solid var(--c-line);border-radius:var(--r-ctl);background:var(--c-surface-2);font-size:13.5px;line-height:1.55;color:var(--c-ink-2)}
.na-transcript__body b{font-weight:600;color:var(--c-ink)}

/* ---------- The menu map: the example lab's devices against the five ways, as jacks on a patch panel ---------- */
.na-reach{display:grid;grid-template-columns:minmax(0,4.4fr) minmax(0,7.6fr);gap:var(--s-8);align-items:start}
.na-reach__text{display:grid;gap:var(--s-4)}
.na-reach__text p:not(.t-lede){max-width:30em;font-size:16px;color:var(--c-ink-2)}
.na-map-wrap{min-width:0;border:1px solid var(--c-line);border-radius:var(--r-card);background:var(--c-surface);box-shadow:var(--shadow-card);overflow:hidden}
.na-map{width:100%;border-collapse:collapse;font-size:15px}
.na-map caption{padding:14px 20px;border-bottom:1px solid var(--c-line);background:var(--c-surface-2);font-size:13.5px;line-height:1.5;color:var(--c-ink-3);text-align:left;caption-side:top}
.na-map th,.na-map td{padding:12px 10px;border-bottom:1px solid var(--c-line);text-align:center;vertical-align:middle}
.na-map tbody tr:last-child>*{border-bottom:0}
.na-map thead th{padding-top:16px;padding-bottom:12px;font-size:13px;line-height:1.3;font-weight:600;color:var(--c-ink-2)}
.na-map thead th:first-child,.na-map tbody th{padding-left:20px;text-align:left}
.na-map thead th>span{display:block;max-width:7.5em;margin:0 auto}
.na-map thead th>span::before{content:'';display:block;width:22px;height:4px;margin:0 auto 8px;border-radius:2px;background:var(--k)}
.na-map thead th:first-child>span::before{display:none}
.na-map thead th:first-child>span{margin:0}
.na-map tbody th{font-weight:600;color:var(--c-ink);white-space:nowrap}
.na-map tbody th small{display:block;margin-top:2px;font-size:13px;font-weight:400;color:var(--c-ink-3);white-space:normal}
/* One jack per way: an empty socket where the menu doesn't offer it, the way's coloured plug where it does. */
.na-jack{position:relative;display:inline-block;width:34px;height:26px;border-radius:6px;background:var(--c-socket);box-shadow:inset 0 1px 2px rgba(0,0,0,.22),0 0 0 1px var(--c-line);vertical-align:middle}
.na-jack::after{content:'';position:absolute;left:10px;right:10px;bottom:5px;height:3px;border-radius:2px;background:var(--c-socket-2)}
[data-on]>.na-jack::before{content:'';position:absolute;inset:5px 6px;border-radius:3px;background:var(--k);box-shadow:inset 0 -3px 0 rgba(0,0,0,.16),inset 0 2px 0 rgba(255,255,255,.24)}
[data-on]>.na-jack::after{left:12px;right:12px;top:8px;bottom:auto;background:rgba(255,255,255,.55)}
.na-map__label{display:none}

/* ---------- One-time links: the rules beside the details ---------- */
.na-once{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-8);align-items:start}
.na-once__text{display:grid;gap:var(--s-4)}
.na-once__list{display:grid;gap:10px;margin:var(--s-2) 0 0;padding:0;list-style:none}
.na-once__list li{position:relative;padding-left:22px;font-size:16px;line-height:1.55;color:var(--c-ink-2)}
.na-once__list li::before{content:'';position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:2px;background:var(--c-cable)}
.na-once__side{display:grid;gap:var(--s-6);min-width:0}
.na-times{border:1px solid var(--c-line);border-radius:var(--r-card);background:var(--c-surface);box-shadow:var(--shadow-card);overflow:hidden}
.na-times table{width:100%;border-collapse:collapse;font-size:15px}
.na-times th,.na-times td{padding:13px 18px;border-bottom:1px solid var(--c-line);text-align:left;vertical-align:top;line-height:1.5}
.na-times tr:last-child>*{border-bottom:0}
.na-times thead th{font-size:13px;font-weight:600;color:var(--c-ink-3);background:var(--c-surface-2);white-space:nowrap}
.na-times tbody th{font-weight:600;color:var(--c-ink)}
.na-times td{color:var(--c-ink-2)}
.na-times td b{font-weight:600;color:var(--c-ink);font-variant-numeric:tabular-nums}
.na-once .disclosure__body p+p{margin-top:var(--s-3)}

/* ---------- Signing in over Remote Desktop: whose account, what you'll see, and the no-password set-up ---------- */
.na-rdp{display:grid;grid-template-columns:minmax(0,5.6fr) minmax(0,6.4fr);gap:var(--s-8);align-items:start}
.na-rdp__text,.na-rdp__see{display:grid;gap:var(--s-4);min-width:0}
.na-rdp__text>p:not(.t-lede){max-width:32em;font-size:16px;color:var(--c-ink-2)}
.na-rdp__h{margin-top:var(--s-3);font-size:18px;line-height:1.3;font-weight:600;color:var(--c-ink)}
.na-rdp__see .na-rdp__h{margin-top:0}
.na-acct{border:1px solid var(--c-line);border-radius:var(--r-card);background:var(--c-surface);box-shadow:var(--shadow-card);overflow:hidden}
.na-acct table{width:100%;border-collapse:collapse;font-size:15px}
.na-acct th,.na-acct td{padding:12px 16px;border-bottom:1px solid var(--c-line);text-align:left;vertical-align:top;line-height:1.5}
.na-acct tr:last-child>*{border-bottom:0}
.na-acct thead th{font-size:13px;font-weight:600;color:var(--c-ink-3);background:var(--c-surface-2)}
.na-acct tbody th{font-weight:600;color:var(--c-ink)}
.na-acct td{color:var(--c-ink-2)}
.na-rdp__steps{gap:var(--s-4)}
.na-rdp__steps p{font-size:16px;color:var(--c-ink-2)}
.na-rdp__steps b,.na-nopw__steps b{font-weight:600;color:var(--c-ink)}
.na-rdp__shot{margin:var(--s-2) 0 0}
.na-rdp__shot img{display:block;width:100%;height:auto;border-radius:var(--r-fig);box-shadow:var(--shadow-win),0 0 0 1px var(--c-line)}
.na-nopw{display:grid;grid-template-columns:minmax(0,4.2fr) minmax(0,7.8fr);gap:var(--s-5) var(--s-8);margin-top:var(--s-9);padding:clamp(24px,3.4vw,44px);border:1px solid var(--c-line);border-radius:var(--r-card);background:var(--c-surface);box-shadow:var(--shadow-card);position:relative;overflow:hidden}
.na-nopw::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--k-violet)}
.na-nopw__head{display:grid;gap:var(--s-3);align-content:start}
.na-nopw__title{font-size:clamp(20px,1.7vw,24px);line-height:1.25;font-weight:600;letter-spacing:-.008em;color:var(--c-ink)}
.na-nopw__head p{font-size:15.5px;line-height:1.55;color:var(--c-ink-2)}
.na-nopw__steps{gap:var(--s-4);margin:0}
.na-nopw__steps p{font-size:15.5px;line-height:1.6;color:var(--c-ink-2)}
.na-nopw__steps .cmd{margin-top:6px}
.na-nopw__steps .cmd code{font-size:13px}
.na-nopw__note{grid-column:2;font-size:14.5px;line-height:1.55;color:var(--c-ink-3)}
.na-rdp code,.na-nopw__head code,.na-nopw__steps p code{white-space:normal;overflow-wrap:anywhere}

/* ---------- Prefer the terminal: the console server's sign-in beside its recorded session, then the forwards ---------- */
.na-term{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-8);align-items:center}
.na-term__text{display:grid;gap:var(--s-5);min-width:0}
.na-term__play{min-width:0}
.na-term__play .term{box-shadow:var(--shadow-win)}
.na-cmds{display:grid;gap:var(--s-5);margin:0;padding:0;list-style:none}
.na-cmds>li{display:grid;gap:8px;min-width:0}
.na-cmds__what{font-size:15px;font-weight:600;color:var(--c-ink)}
.na-cmds__then{font-size:14.5px;line-height:1.55;color:var(--c-ink-3)}
.na-term__clients{font-size:15px;line-height:1.55;color:var(--c-ink-2)}
.na-term__clients .link{white-space:nowrap}
.na-fwd{margin-top:var(--s-8);border:1px solid var(--c-line);border-radius:var(--r-card);background:var(--c-surface);box-shadow:var(--shadow-card);overflow:hidden}
.na-fwd__table{width:100%;border-collapse:collapse;font-size:15px}
.na-fwd__table caption{padding:14px 20px;border-bottom:1px solid var(--c-line);background:var(--c-surface-2);font-size:14px;line-height:1.5;color:var(--c-ink-3);text-align:left;caption-side:top}
.na-fwd__table th,.na-fwd__table td{padding:12px 20px;border-bottom:1px solid var(--c-line);text-align:left;vertical-align:middle;line-height:1.5}
.na-fwd__table tbody tr:last-child>*{border-bottom:0}
.na-fwd__table thead th{padding-top:10px;padding-bottom:10px;font-size:13px;font-weight:600;color:var(--c-ink-3);white-space:nowrap}
.na-fwd__table tbody th{width:11em;font-weight:600;color:var(--c-ink)}
.na-fwd__table td:last-child{width:30%;font-size:14.5px;color:var(--c-ink-2)}
.na-fwd__table .cmd{padding-top:5px;padding-bottom:5px}
.na-fwd__table .cmd code{font-size:13px}
.na-fwd__table tr:target>*{background:var(--c-signal-wash)}
.na-term__more{margin-top:var(--s-4)}

/* ---------- Sections after the patch bay start lower down the page: keep their rendering cheap until near ---------- */
.na-walk,.na-map-band,#one-time,#rdp-sign-in,#console-server,#troubleshooting{content-visibility:auto;contain-intrinsic-size:auto 900px}
@media print{.na-walk,.na-map-band,#one-time,#rdp-sign-in,#console-server,#troubleshooting{content-visibility:visible}}

/* ---------- Responsive ---------- */
@media (max-width:1023px){
 .na-film,.na-reach,.na-once,.na-term,.na-rdp,.na-nopw{grid-template-columns:minmax(0,1fr);gap:var(--s-6)}
 .na-nopw__note{grid-column:auto}
 .na-nopw{margin-top:var(--s-8)}
 .na-walk__head{margin-bottom:var(--s-6)}
 .na-chapters{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-2)}
}
@media (max-width:760px){
 .na-facts{grid-template-columns:minmax(0,1fr)}
 .na-facts>div,.na-facts>div:nth-child(even){padding:12px 0;border-left:0}
 .na-chapters{grid-template-columns:minmax(0,1fr)}
 /* The map becomes one card per device, listing only the ways its menu offers. */
 .na-map-wrap{border:0;background:none;box-shadow:none;overflow:visible}
 .na-map,.na-map tbody,.na-map tr,.na-map th,.na-map td,.na-map caption{display:block}
 .na-map caption{padding:0 0 var(--s-3);border:0;background:none}
 .na-map thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .na-map tbody{display:grid;gap:var(--s-3)}
 .na-map tr{display:flex;flex-wrap:wrap;gap:8px;padding:14px 16px 16px;border:1px solid var(--c-line);border-radius:var(--r-card);background:var(--c-surface);box-shadow:var(--shadow-card)}
 .na-map tbody th{flex:1 1 100%;padding:0 0 4px;border:0;white-space:normal}
 .na-map td{display:none;padding:0;border:0}
 .na-map td[data-on]{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 6px;border:1px solid var(--c-line);border-radius:var(--r-ctl);background:var(--c-surface-2)}
 .na-map td[data-on] .na-jack{width:28px;height:21px}
 .na-map td[data-on] .na-jack::before{inset:4px 5px}
 .na-map td[data-on] .na-jack::after{top:6px;left:10px;right:10px}
 .na-map__label{display:inline;font-size:14px;font-weight:500;color:var(--c-ink-2)}
 .na-times table,.na-times tbody,.na-times tr,.na-times th,.na-times td{display:block}
 .na-times thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .na-times tr{padding:14px 16px;border-bottom:1px solid var(--c-line)}
 .na-times tr:last-child{border-bottom:0}
 .na-times th,.na-times td{padding:0;border:0}
 .na-times tbody th{padding-bottom:6px}
 .na-times td{padding-top:4px}
 .na-times td[data-label]::before{content:attr(data-label);display:block;font-size:12.5px;font-weight:600;color:var(--c-ink-3)}
 .na-acct table,.na-acct tbody,.na-acct tr,.na-acct th,.na-acct td{display:block}
 .na-acct thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .na-acct tr{padding:12px 14px;border-bottom:1px solid var(--c-line)}
 .na-acct tr:last-child{border-bottom:0}
 .na-acct th,.na-acct td{padding:0;border:0}
 .na-acct td{padding-top:6px}
 .na-acct td[data-label]::before{content:attr(data-label);display:block;font-size:12.5px;font-weight:600;color:var(--c-ink-3)}
 .na-fwd__table,.na-fwd__table tbody,.na-fwd__table tr,.na-fwd__table th,.na-fwd__table td{display:block}
 .na-fwd__table caption{display:block}
 .na-fwd__table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .na-fwd__table tr{padding:14px 16px;border-bottom:1px solid var(--c-line)}
 .na-fwd__table tbody tr:last-child{border-bottom:0}
 .na-fwd__table th,.na-fwd__table td,.na-fwd__table tbody th,.na-fwd__table td:last-child{width:auto;padding:0;border:0}
 .na-fwd__table td{padding-top:8px}
 .na-fwd__table td:last-child[data-label]::before{content:attr(data-label);display:block;font-size:12.5px;font-weight:600;color:var(--c-ink-3)}
}
@media (max-width:520px){
 .na-way__lead{font-size:16px}
 .na-nopw{padding:22px 14px 20px}
 .na-nopw__steps>li{padding-left:40px}
 .na-nopw__steps .cmd{margin-left:-40px}
 .na-nopw__steps .cmd code{font-size:12px}
 .na-hero__sep{display:none}
 .na-hero__meta span{display:block}
 .na-shape>code{font-size:12.5px;padding:8px 12px}
 .na-film__index{padding:var(--s-3) var(--s-2)}
 .na-fwd__table tr{padding:12px 14px}
 .na-fwd__table caption{padding:12px 14px}
 .na-fwd__table .cmd code{font-size:12.5px}
}
@media (forced-colors:active){
 .na-map-wrap,.na-times,.na-fwd,.na-film__index,.na-file,.na-map tr,.na-acct,.na-nopw{border:1px solid CanvasText}
 .na-nopw::before{forced-color-adjust:none;background:CanvasText}
 .na-shape>code{border:1px solid CanvasText}
 .na-jack{forced-color-adjust:none;background:Canvas;box-shadow:inset 0 0 0 1px CanvasText}
 [data-on]>.na-jack::before{forced-color-adjust:none;background:Highlight;box-shadow:none}
 .na-jack::after,[data-on]>.na-jack::after{display:none}
 .na-map thead th>span::before{forced-color-adjust:none;background:CanvasText}
 .na-chapter[aria-current=true]{outline:2px solid Highlight;outline-offset:-2px}
 .na-once__list li::before{forced-color-adjust:none;background:CanvasText}
}