/* Designvariant 3: felles utseende for undersidene (verktøy og læresider).
   Undersidene har hver sin palett med de samme navnene (--bg, --surface, --orange osv.).
   Her overstyres det mørke temaet med :root.v3, som slår sidens egen :root. De lyse blokkene
   i hver side har samme spesifisitet, men står senere, så lyst tema vinner der som før.
   Lenkes inn i <head> før sidens egen <style> / stil.css. */
:root.v3 {
  --bg: #141519; --surface: #1d1e23; --surface-2: #25262c; --line: #2e2f36; --line-2: #3a3b44;
  --text: #f0f0f2; --dim: #c3c4cc; --faint: #9d9ea8;
  --orange: #ff9a45; --ember: #ff8a2a; --amber: #ffb066; --bad: #ff7a6b;
  --zone: rgba(255, 138, 42, .07); --zone-line: rgba(255, 154, 69, .55);
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, Consolas, monospace;
}

/* Lyst tema «L4» (29. oktober 2026, inspirert av NN Ops): varm stein som bakgrunn, hvite kort, mørkere tekst.
   :root.v3[data-theme="light"] (0,3,0) slår den lyse paletten som står i hver side (0,2,0), så fargene styres herfra.
   Bare nøytrale flater, streker og tekst; sidenes egne aksentfarger (--ember, --amber, --bad osv.) står urørt. */
:root.v3 { --card-shadow: none; }
:root.v3[data-theme="light"] {
  --bg: #f2efe9; --surface: #ffffff; --surface-2: #f7f5f1; --line: #e2ddd3; --line-2: #cfc8bc;
  --text: #1c1a17; --text-2: #3a362f; --dim: #4d4840; --faint: #615c53;
  --orange: #9e3c06; --accent-ink: #9e3c06;
  --shadow: 0 1px 2px rgba(60, 50, 35, .05), 0 4px 16px rgba(60, 50, 35, .05);
  --card-shadow: 0 1px 2px rgba(60, 50, 35, .05), 0 4px 16px rgba(60, 50, 35, .05);
}
@media (prefers-color-scheme: light) {
  :root.v3:not([data-theme="dark"]) {
    --bg: #f2efe9; --surface: #ffffff; --surface-2: #f7f5f1; --line: #e2ddd3; --line-2: #cfc8bc;
    --text: #1c1a17; --text-2: #3a362f; --dim: #4d4840; --faint: #615c53;
    --orange: #9e3c06; --accent-ink: #9e3c06;
    --shadow: 0 1px 2px rgba(60, 50, 35, .05), 0 4px 16px rgba(60, 50, 35, .05);
    --card-shadow: 0 1px 2px rgba(60, 50, 35, .05), 0 4px 16px rgba(60, 50, 35, .05);
  }
}

/* Typografi og luft */
.v3 body { font: 13.5px/1.55 var(--sans); }
.v3 body::before { display: none; }
.v3 .jt-main > .wrap { max-width: 980px; margin: 0; padding: 40px 48px 72px; }
.v3 .top { display: none; }
:root.v3 body .page-title { font-size: 30px; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; color: var(--text); text-shadow: none; }
.v3 .page-lead { font-size: 15px; }
.v3 .crumb { font-size: 13px; color: var(--faint); margin-bottom: 10px; }
.v3 .crumb a { color: var(--dim); text-decoration: none; }
.v3 .crumb a:hover { color: var(--orange); }
.v3 .lead-link { color: var(--orange); }
:root.v3 body .home, :root.v3 body .vendor .name:not(.none), :root.v3 body .wordmark { text-shadow: none; filter: none; }

/* Faner */
.v3 nav.tabs { gap: 24px; margin-top: 24px; }
.v3 .tab { font: 500 14px var(--sans); }
:root.v3 body .tab .led, :root.v3 body .tab[aria-selected="true"] .led { box-shadow: none; }

/* Seksjoner */
.v3 .panel h2, .v3 main h2, .v3 section > h2 { letter-spacing: -.01em; }
.v3 .panel h2 { font-size: 18px; font-weight: 600; }
.v3 .panel .lead, .v3 .hint, .v3 .bulk-summary, .v3 .summary { font-size: 14px; }
.v3 label { font-size: 13px; }

/* Felt og knapper */
.v3 input[type="text"], .v3 input[type="number"], .v3 input[type="search"], .v3 select, .v3 textarea { border-radius: 10px; }
.v3 input[type="text"], .v3 input[type="number"], .v3 input[type="search"] { min-height: 46px; }
.v3 input:focus, .v3 select:focus, .v3 textarea:focus { box-shadow: 0 0 0 4px rgba(255, 138, 42, .14); }
.v3 .btn, .v3 .actions button { border-radius: 8px; font-size: 13px; }
.v3 .seg { border-radius: 10px; }

/* Kort og bokser: avrundet, uten glød og venstrekant-stripe */
.v3 .vendor { border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; box-shadow: var(--card-shadow); }
:root.v3 body .vendor .name:not(.none) { color: var(--text); }
.v3 .card, .v3 .box, .v3 .fact, .v3 .facts, .v3 .note, .v3 .callout { border-radius: 12px; }

/* Verktøyfaner som hvite kort (lyst tema) / hevede paneler (mørkt), som i skisse L4.
   Gjelder section.panel på verktøysidene (/tools/, /dns/, /ports/, /certificate/, /switching/multicast/, /wifi/). Ikke /cves/ (#panel): CVE-kortene er allerede kort. */
.v3 .jt-main section.panel:not(#panel) { margin-top: 24px; padding: 26px 28px 30px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--card-shadow); }
.v3 .jt-main section.panel:not(#panel) > :first-child { margin-top: 0; }
/* Seksjonen etter kortet (/ports/, /certificate/) trenger ikke egen skillestrek; den avrundede streken ga en skjev bue. */
.v3 .jt-main section.panel:not(#panel) + section.box { margin-top: 40px; padding-top: 0; border-top: 0; border-radius: 0; }

.v3 td { font-size: 14px; }
.v3 th { font-size: 13px; }
.v3 footer { font-size: 13px; color: var(--faint); }

@media (max-width: 860px) {
  .v3 .jt-main > .wrap { padding: 28px 16px 56px; }
  .v3 .jt-main section.panel:not(#panel) { padding: 20px 16px 22px; border-radius: 14px; }
}

/* Kompakt skala for alle undersidene (2. november 2026): mindre tekst, lavere felt og mindre luft, så mer får plass.
   Startet på /wireshark/ og gjort felles etter ønske om en «rød tråd». Sidenes egne rem-størrelser følger html-skriften.
   Velgerne begynner med :root.v3 body .jt-main (0,3,1 +), så de slår sidenes egne regler. Network diagram bruker ikke denne fila. */
html.v3 { font-size: 14px; }
:root.v3 body .jt-main > .wrap { padding: 28px 40px 56px; }
:root.v3 body .jt-main .page-title { font-size: 26px; }
:root.v3 body .jt-main .page-lead { font-size: 14px; margin-top: 4px; }
:root.v3 body .jt-main .crumb { font-size: 12px; margin-bottom: 8px; }
/* Lenkene i brødsmula er understreket, så de skiller seg fra teksten rundt uten å bare stole på farge (WCAG 1.4.1). */
:root.v3 body .jt-main .crumb { color: var(--faint); }
:root.v3 body .jt-main .crumb a { color: var(--dim); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
:root.v3 body .jt-main .crumb a:hover { color: var(--orange); text-decoration-color: currentColor; }
:root.v3 body .jt-main nav.tabs { gap: 20px; margin-top: 18px; }
:root.v3 body .jt-main .tab { font-size: 13px; padding-bottom: 10px; }
:root.v3 body .jt-main section.panel:not(#panel) { margin-top: 16px; padding: 20px 22px 22px; }
:root.v3 body .jt-main .panel h2 { font-size: 16px; }
/* Underoverskrifter i et verktøykort (h2.sub, «Flere adresser» o.l.) er h2 fordi kortets egen h2 tas bort på verktøysiden; de er litt mindre. */
:root.v3 body .jt-main .panel h2.sub { font-size: 15px; margin: 28px 0 6px; }
:root.v3 body .jt-main .panel .lead, :root.v3 body .jt-main .lead { font-size: 13px; }
:root.v3 body .jt-main .hint, :root.v3 body .jt-main .note { font-size: 13px; }
:root.v3 body .jt-main label, :root.v3 body .jt-main .label { font-size: 12px; }
:root.v3 body .jt-main input[type="text"], :root.v3 body .jt-main input[type="number"], :root.v3 body .jt-main input[type="search"], :root.v3 body .jt-main select {
  font-size: 14px; min-height: 36px; padding-top: 6px; padding-bottom: 6px; padding-left: 11px; padding-right: 11px; border-radius: 8px;
}
:root.v3 body .jt-main select { font-size: 13px; }
:root.v3 body .jt-main textarea { font-size: 13px; padding: 8px 11px; border-radius: 8px; }
:root.v3 body .jt-main .btn, :root.v3 body .jt-main .actions button { font-size: 12px; padding: 5px 11px; }
:root.v3 body .jt-main .btn.primary { font-size: 13px; min-height: 36px; padding: 0 16px; }
:root.v3 body .jt-main .seg { border-radius: 8px; }
:root.v3 body .jt-main .seg button { font-size: 12px; padding: 6px 11px; }
:root.v3 body .jt-main .chip { font-size: 12px; padding: 3px 9px; }
:root.v3 body .jt-main .opts { margin-top: 12px; gap: 10px 22px; }
:root.v3 body .jt-main .grid2 { gap: 10px 16px; }
:root.v3 body .jt-main dl.values dt, :root.v3 body .jt-main dl.values dd { font-size: 13px; padding-top: 6px; padding-bottom: 6px; }
:root.v3 body .jt-main .box { margin-top: 28px; padding-top: 20px; }
:root.v3 body .jt-main .box h3 { font-size: 15px; }
.v3 td { font-size: 13px; }
.v3 th { font-size: 12px; }
:root.v3 body .jt-main th, :root.v3 body .jt-main td { padding-top: 6px; padding-bottom: 6px; }
.v3 footer { font-size: 12px; }
@media (max-width: 860px) {
  :root.v3 body .jt-main > .wrap { padding: 22px 16px 48px; }
  :root.v3 body .jt-main section.panel:not(#panel) { padding: 16px 14px 18px; }
}

/* ===== Design H (4. november 2026) =====
   Toppfelt i stedet for sidemeny (v3-shell.js), innholdet midtstilt og bredere, paneler med store runde hjørner,
   valgknapper (.seg) og primærknapper som piller. Mørkt: #141519 bunn, #1d1e23 paneler, #25262c felt.
   Lyst: L4 (varm stein, hvite paneler med skygge). Velgerne starter med :root.v3 body .jt-main, som kompakt skala. */
:root.v3 { --pane-r: 20px; --pill-on: #ff8a2a; --pill-on-text: #141519; }
:root.v3[data-theme="light"] { --pill-on: #c2560d; --pill-on-text: #ffffff; }
@media (prefers-color-scheme: light) { :root.v3:not([data-theme="dark"]) { --pill-on: #c2560d; --pill-on-text: #ffffff; } }

:root.v3 body .jt-main > .wrap { max-width: 1140px; margin: 0 auto; padding: 32px 32px 64px; }
:root.v3 body .jt-main .page-title { font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
:root.v3 body .jt-main .page-lead { font-size: 13.5px; max-width: 80ch; margin-top: 6px; }
:root.v3 body .jt-main section.panel:not(#panel) { margin-top: 16px; padding: 20px 22px 22px; border-radius: var(--pane-r); border-color: var(--line); }
:root.v3 body .jt-main .vendor, :root.v3 body .jt-main .card { border-radius: 16px; }

/* Felt: litt høyere og rundere, oransje kant ved fokus */
:root.v3 body .jt-main input[type="text"], :root.v3 body .jt-main input[type="number"], :root.v3 body .jt-main input[type="search"], :root.v3 body .jt-main select {
  min-height: 42px; border-radius: 12px; background: var(--surface-2); border-color: var(--line-2, var(--line));
}
:root.v3 body .jt-main textarea { border-radius: 12px; background: var(--surface-2); }
:root.v3 body .jt-main input:focus, :root.v3 body .jt-main select:focus, :root.v3 body .jt-main textarea:focus { border-color: var(--ember); box-shadow: 0 0 0 3px rgba(255, 138, 42, .16); outline: none; }

/* Valgknapper som pillegruppe, valgt = oransje pille */
:root.v3 body .jt-main .seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
:root.v3 body .jt-main .seg button { border: 0; border-radius: 999px; padding: 6px 13px; background: none; color: var(--dim); font-weight: 500; }
:root.v3 body .jt-main .seg button + button { border-left: 0; }
:root.v3 body .jt-main .seg button:hover { color: var(--text); }
:root.v3 body .jt-main .seg button[aria-pressed="true"], :root.v3 body .jt-main .seg button.on, :root.v3 body .jt-main .seg button[aria-checked="true"] { background: var(--pill-on); color: var(--pill-on-text); }

/* Knapper som piller */
:root.v3 body .jt-main .btn, :root.v3 body .jt-main .actions button { border-radius: 999px; padding: 6px 14px; }
:root.v3 body .jt-main .btn.primary { border-radius: 999px; min-height: 42px; padding: 0 20px; background: var(--pill-on); border-color: var(--pill-on); color: var(--pill-on-text); }
:root.v3 body .jt-main .chip { border-radius: 999px; }

/* Faner som står igjen på siden (når toppfeltet ikke har dem): pillegruppe */
:root.v3 body .jt-main nav.tabs { display: inline-flex; gap: 2px; padding: 4px; margin-top: 20px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); max-width: 100%; }
:root.v3 body .jt-main nav.tabs .tab { margin: 0; padding: 7px 14px; border: 0; border-radius: 999px; color: var(--dim); }
:root.v3 body .jt-main nav.tabs .tab .led { display: none; }
:root.v3 body .jt-main nav.tabs .tab[aria-selected="true"] { background: var(--pill-on); color: var(--pill-on-text); }

/* Tabeller i panelene: rolige streker */
:root.v3 body .jt-main th { color: var(--faint); font-weight: 500; }

@media (max-width: 860px) {
  :root.v3 body .jt-main > .wrap { padding: 22px 16px 48px; }
  :root.v3 body .jt-main .page-title { font-size: 22px; }
  :root.v3 body .jt-main section.panel:not(#panel) { padding: 18px 16px 20px; border-radius: 16px; }
}

/* ---------- Felles overskrifter på læresidene (fra 4. november 2026) ----------
   Sidene hadde hver sin rem-størrelse (h2 20,25/21/17,25 px, h3 15,75–19,5 px). Nå er det samme skala overalt:
   sidetittel 24 px (over), seksjon h2 18 px, alle h3 (underoverskrifter og titler i kort) 14,5 px (mindre fra 4. nov. ettermiddag). Kortene på verktøysidene (section.panel) har sin h2 på 16 px. */
:root.v3 body .jt-main > .wrap > h2,
:root.v3 body .jt-main > .wrap > section:not(.panel):not(.box) > h2 { font-size: 18px; line-height: 1.35; font-weight: 600; }
:root.v3 body .jt-main > .wrap h3 { font-size: 14.5px; line-height: 1.4; font-weight: 600; }

/* Tekst bare for skjermlesere (f.eks. tomme tabelloverskrifter), fra 4. november 2026.
   Rulleboksen må være posisjonert, ellers havner den absolutt plasserte teksten utenfor og gir sidelengs rulling. */
.v3 .table-wrap { position: relative; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }