/* WEBSITE2 prototype layer. Extends the existing site tokens and docs components; restyles nothing.
   Motion: transform/opacity (and SVG offsets) only, all behind prefers-reduced-motion. */

/* ---------- Header: Docs, Demo and a search entry point ---------- */
.header-search{display:inline-flex;align-items:center;gap:10px;min-height:40px;min-width:220px;padding:8px 10px 8px 12px;background:#323a46;color:#c9d2de;border:1px solid #4a5463;border-radius:var(--radius);font-size:.875rem;line-height:1.4;text-align:left}
.header-search:hover{background:#3a4350;color:#edf0f5}
.header-search svg{flex:none}
.header-search .hs-label{flex:1}
.header-search kbd{font:600 .75rem/1 ui-monospace,monospace;padding:4px 6px;border:1px solid #5b6676;border-radius:4px;color:#c9d2de}
.nav .header-search{margin-left:8px}
@media(prefers-color-scheme:dark){.header-search{background:#2a2f38}}
@media(max-width:1150px){.nav .header-search{margin:8px 0 0;width:100%}}

/* ---------- Search dialog ---------- */
.search-dialog{width:min(680px,calc(100% - 32px));max-height:min(640px,calc(100dvh - 96px));margin:72px auto auto;padding:0;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);box-shadow:0 24px 64px #18212b40}
.search-dialog::backdrop{background:#18212b8c}
.search-dialog form{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.search-dialog input{flex:1;min-height:44px;border:0;background:transparent;font-size:1.0625rem;color:var(--ink);outline:none}
.search-dialog .sd-close{min-height:36px;padding:6px 10px;background:transparent;border:1px solid var(--line);border-radius:4px;font-size:.8125rem;color:var(--muted)}
.search-dialog .sd-status{margin:0;padding:10px 20px 0;font-size:.75rem;color:var(--muted)}
.search-dialog ul{list-style:none;margin:0;padding:8px;overflow:auto;max-height:calc(min(640px,100dvh - 96px) - 120px)}
.search-dialog li a{display:block;padding:12px 14px;border-radius:6px}
.search-dialog li a:hover{text-decoration:none;background:#e7eceb}
.search-dialog li[aria-selected=true] a{background:var(--ice)}
.search-dialog li strong{display:block;font-size:.9375rem;font-weight:600}
.search-dialog li .sd-path{display:block;font-size:.75rem;color:var(--blue-text);margin-top:2px}
.search-dialog li small{display:block;margin-top:4px;color:var(--muted);font-size:.8125rem;line-height:1.5}
.search-dialog mark{background:#cfe3ec;color:inherit;padding:0 1px;border-radius:2px}
.search-dialog .sd-foot{display:flex;gap:16px;padding:10px 20px;border-top:1px solid var(--line);font-size:.75rem;color:var(--muted)}
@media(prefers-reduced-motion:no-preference){
 .search-dialog[open]{animation:drop-in 200ms var(--ease-out) both}
 .search-dialog li{animation:settle 260ms var(--ease-out) both;animation-delay:calc(var(--i,0) * 30ms)}
 @keyframes settle{from{opacity:0;transform:translateY(4px)}}
}

/* ---------- Footer: plain contact line and a short About ---------- */
.footer-about{font-size:.875rem;color:var(--muted);max-width:40ch}
.footer-contact a{display:inline!important;min-height:0!important;padding:0!important;text-decoration:underline;text-underline-offset:3px;color:var(--ink)}

/* ---------- Docs landing ---------- */
.landing-hero{padding:clamp(3rem,6vw,5rem) 0 40px}
.landing-hero h1{font-size:clamp(2.25rem,4vw,3.25rem);margin:0 0 16px;max-width:none}
.landing-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:start}
.landing-statement{font-size:1.125rem;line-height:1.6;color:var(--muted);margin:0 0 28px;max-width:60ch}
.landing-search{display:flex;align-items:center;gap:12px;width:100%;max-width:560px;min-height:56px;padding:10px 12px 10px 16px;background:#fff;border:1px solid #83929a;border-radius:var(--radius);color:var(--muted);font-size:1rem;text-align:left}
.landing-search:hover{border-color:var(--ink)}
.landing-search span{flex:1}
.landing-search kbd{font:600 .75rem/1 ui-monospace,monospace;padding:4px 6px;border:1px solid var(--line);border-radius:4px}
.landing-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:24px}
.paths{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;padding:40px 0 var(--section);border-top:1px solid var(--line)}
.path{border-top:2px solid var(--blue);padding-top:20px;min-width:0}
.path h2{font-size:1.25rem;letter-spacing:-.01em;margin:0 0 8px}
.path h2 a:hover{text-decoration:underline}
.path p{font-size:.875rem;color:var(--muted);margin:0 0 12px}
.path ul{list-style:none;padding:0;margin:0}
.path li a{display:flex;align-items:center;min-height:36px;font-size:.875rem;border-top:1px solid var(--line)}
.path .eyebrow{color:var(--blue-text);margin-bottom:12px}
.demo-strip{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;padding:28px 32px;background:var(--ice);border-radius:var(--radius);margin-bottom:var(--section)}
.demo-strip h2{font-size:1.5rem;margin:0 0 6px}
.demo-strip p{margin:0;color:#3f505d;max-width:70ch}
@media(max-width:1150px){.paths{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:800px){.landing-grid{grid-template-columns:1fr;gap:32px}.paths{grid-template-columns:1fr 1fr}.demo-strip{grid-template-columns:1fr;padding:24px}}
@media(max-width:560px){.paths{grid-template-columns:1fr}}

/* ---------- Animated topology (docs landing) ---------- */
.topo{background:var(--night);color:#e5f0f5;border:1px solid #405363;border-radius:10px;overflow:hidden}
.topo-top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;border-bottom:1px solid #ffffff24;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:#b5c7d4}
.topo svg{display:block;width:100%;height:auto}
.topo .wire{fill:none;stroke:#596e80;stroke-width:1.25}
.topo .node-box{fill:#1d2a36;stroke:#596e80;stroke-width:1}
.topo .node-box.appliance{fill:#263544;stroke:#738a9c}
.topo .node-name{fill:#e5f0f5;font:600 15px Schibsted,Arial,sans-serif}
.topo .node-sub{fill:#b5c7d4;font:13px Schibsted,Arial,sans-serif}
.topo .pulse{fill:#a6d4ec}
.topo .pulse.reply{fill:#7fd1a8}
.topo .state-ok{fill:#7fd1a8}
.topo .state-quiet{fill:none;stroke:#e8b86a;stroke-width:1.5;stroke-dasharray:3 3}
.topo [data-silent=true] .node-box{stroke:#e8b86a;stroke-dasharray:4 3}
.topo-legend{display:flex;flex-wrap:wrap;gap:8px 20px;padding:14px 20px 18px;border-top:1px solid #ffffff24;font-size:.8125rem;color:#b5c7d4}
.topo-legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px}
.topo-status{padding:14px 20px 0;font-size:.875rem;color:#d3dfe7;min-height:3.4em;margin:0}
.topo-status strong{color:#fff;font-weight:600}

/* ---------- Docs pages: planned entries, as-of line, try-in-demo ---------- */
.docs-nav .is-planned{display:flex;align-items:center;min-height:36px;font-size:.8125rem;padding:6px 12px;color:#7d8a92;cursor:default}
.docs-nav .is-planned{font-style:italic}
.docs-nav .nav-section{position:relative}
.asof{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:.8125rem;color:var(--muted);margin:-8px 0 8px}
.asof span::before{content:"·";margin-right:8px;color:var(--line)}.asof span:first-child::before{content:none}
.try-demo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:16px 20px;margin:24px 0;border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:4px;background:#fff9}
.try-demo p{margin:0;font-size:.9375rem;max-width:60ch}
.try-demo .text-link{text-decoration:none!important}
.docs-article .kicker{color:var(--blue-text)}
.docs-article dl.facts{display:grid;grid-template-columns:minmax(140px,.4fr) minmax(0,1fr);gap:0;margin:24px 0;border-top:1px solid var(--line)}
.docs-article dl.facts dt,.docs-article dl.facts dd{padding:14px 0;border-bottom:1px solid var(--line);margin:0}
.docs-article dl.facts dt{font-weight:600;font-size:.9375rem;padding-right:16px}
.docs-article dl.facts dd{color:var(--muted)}
@media(max-width:560px){.docs-article dl.facts{grid-template-columns:1fr}.docs-article dl.facts dt{border-bottom:0;padding-bottom:0}}

/* ---------- Shared interactive frame ---------- */
.ix{margin:32px 0;border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden}
.ix-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;padding:14px 20px;border-bottom:1px solid var(--line);background:#eef1f0}
.ix-head .eyebrow{margin:0;color:var(--blue-text)}
.ix-tools{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.ix-tools button,.ix-btn{min-height:36px;padding:6px 12px;background:transparent;border:1px solid #83929a;border-radius:4px;font-size:.8125rem;color:var(--ink)}
.ix-tools button:hover,.ix-btn:hover{background:#e7eceb}
.ix-tools a{font-size:.8125rem;font-weight:600;text-decoration:underline;text-underline-offset:4px}
.ix-body{padding:24px}
.ix-note{font-size:.8125rem;color:var(--muted);padding:12px 20px;border-top:1px solid var(--line);margin:0}
.ix fieldset{border:0;padding:0;margin:0 0 20px;min-width:0}
.ix legend{font-size:.8125rem;font-weight:600;margin-bottom:8px;padding:0}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg label{display:flex;align-items:center;gap:8px;min-height:40px;padding:8px 12px;border:1px solid #b7c1c3;border-radius:4px;font-size:.875rem;cursor:pointer;background:var(--paper)}
.seg label:has(input:checked){border-color:var(--blue);background:var(--ice);font-weight:600}
.seg label:has(input:focus-visible){outline:3px solid var(--blue);outline-offset:2px}
.seg input{accent-color:var(--blue);margin:0}
.ix .fld{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;min-width:0}
.ix .fld label{font-size:.8125rem;font-weight:600}
.ix .fld input,.ix .fld select{min-height:42px;border:1px solid #83929a;border-radius:4px;padding:8px 10px;background:var(--paper);color:var(--ink);font:inherit;font-size:.9375rem;min-width:0;width:100%}
.ix .fld .hint{font-size:.75rem;color:var(--muted)}
.ix .check{display:flex;gap:10px;align-items:flex-start;font-size:.875rem;margin:8px 0 16px}
.ix .check input{margin-top:4px;accent-color:var(--blue)}
.ix .row2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media(max-width:560px){.ix-body{padding:18px}.ix .row2{grid-template-columns:1fr}}

/* ---------- Replace: animated diagram ---------- */
.swap{background:var(--night);color:#e5f0f5;border:1px solid #405363;border-radius:10px;overflow:hidden;margin:32px 0}
.swap svg{display:block;width:100%;height:auto}
.swap .slot{fill:#1d2a36;stroke:#738a9c;stroke-dasharray:5 4}
.swap .unit rect{fill:#263544;stroke:#91cbea}
.swap .unit.new rect{fill:#243442;stroke:#7fd1a8}
.swap .unit text,.swap .lbl{fill:#e5f0f5;font:500 13px Schibsted,Arial,sans-serif}
.swap .sub{fill:#b5c7d4;font:12px Schibsted,Arial,sans-serif}
.swap .keep{fill:#a6d4ec;font:600 11px Schibsted,Arial,sans-serif;letter-spacing:.08em}
.swap .bin rect{fill:#1d2a36;stroke:#596e80}
.swap .bin[data-on=true] rect{stroke:#91cbea;fill:#2b4051}
.swap .port{fill:#3c5466}
.swap-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding:14px 20px;border-top:1px solid #ffffff24}
.swap-foot .seg label{background:#1d2a36;border-color:#596e80;color:#d3dfe7}
.swap-foot .seg label:has(input:checked){background:#2b4051;border-color:#91cbea;color:#fff}
.swap-caption{margin:0;padding:14px 20px 0;color:#d3dfe7;font-size:.9375rem;min-height:3.6em}

/* ---------- Replace: mini console ---------- */
.rp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.rp-old{border:1px solid var(--line);border-radius:6px;padding:16px;background:var(--paper);margin-bottom:20px}
.rp-old h4{margin:0 0 6px;font-size:1rem;font-weight:600}
.rp-old p{margin:0;font-size:.875rem;color:var(--muted)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;font-size:.75rem;font-weight:600;border:1px solid}
.pill.open{color:#8a4b14;border-color:#d9a46a;background:#fbf0e3}
.pill.closed{color:#22603f;border-color:#8cc3a3;background:#e6f2eb}
.pill.quiet{color:#56606a;border-color:#b7c1c3;background:#eef1f0}
.rp-error{border-left:3px solid #9a4d33;background:#f6ebe6;color:#763b28;padding:12px 14px;font-size:.875rem;margin:0 0 16px}
.rp-working{display:flex;align-items:center;gap:10px;font-size:.875rem;color:var(--muted);margin:0 0 16px}
.rp-working i{width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--blue);border-radius:50%}
@media(prefers-reduced-motion:no-preference){.rp-working i{animation:spin 700ms linear infinite}@keyframes spin{to{transform:rotate(360deg)}}}
.rp-out{border:1px solid #8cc3a3;border-radius:6px;background:#f1f8f4;padding:16px 18px}
.rp-out h4{margin:0 0 8px;font-size:1rem}
.rp-out p{margin:0 0 12px;font-size:.9375rem}
.rp-tl{list-style:none;margin:16px 0 0;padding:0;border-left:2px solid var(--line)}
.rp-tl li{position:relative;padding:0 0 12px 18px;font-size:.875rem}
.rp-tl li::before{content:"";position:absolute;left:-6px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--blue)}
.rp-tl li span{display:block;font-size:.75rem;color:var(--muted)}
@media(prefers-reduced-motion:no-preference){.rp-out,.rp-tl li{animation:rise 420ms var(--ease-out) both}.rp-tl li{animation-delay:calc(var(--i,0)*90ms + 120ms)}}
@media(max-width:800px){.rp-grid{grid-template-columns:1fr}}

/* ---------- Maintenance simulator ---------- */
.mw-controls{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:0 24px}
.mw-board{position:relative;margin-top:8px;border:1px solid var(--line);border-radius:6px;background:var(--paper);padding:12px 16px 16px}
.mw-axis,.mw-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;align-items:center}
.mw-axis{font-size:.6875rem;color:var(--muted);height:22px}
.mw-ticks{position:relative;height:100%}
.mw-ticks span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.mw-row{min-height:44px;border-top:1px solid #dde3e2}
.mw-name{font-size:.8125rem;line-height:1.3}
.mw-name small{display:block;color:var(--muted);font-size:.6875rem}
.mw-lane{position:relative;height:22px}
.mw-win{position:absolute;top:-6px;bottom:-6px;background:#dce8ee;border-left:1px dashed var(--blue);border-right:1px dashed var(--blue);pointer-events:none}
.mw-seg{position:absolute;top:5px;height:12px;border-radius:2px;background:#d07a2c}
.mw-seg.quiet{background:repeating-linear-gradient(135deg,#9aa6ad 0 4px,#c4ccd0 4px 8px)}
.mw-bell{position:absolute;top:-1px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#9a2f2f;border:2px solid #fff;box-shadow:0 0 0 1px #9a2f2f}
.mw-bell.re{background:#fff;box-shadow:0 0 0 2px #9a2f2f}
.mw-clockline{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--ink);pointer-events:none}
.mw-clockline::before{content:attr(data-time);position:absolute;top:-2px;left:6px;font:600 .6875rem/1 ui-monospace,monospace;background:var(--ink);color:#fff;padding:3px 5px;border-radius:3px;white-space:nowrap}
.mw-clockline[data-flip=true]::before{left:auto;right:6px}
.mw-range{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;margin-top:10px}
.mw-range input{width:100%;accent-color:var(--ink);min-height:32px}
.mw-range label{font-size:.75rem;font-weight:600;align-self:center}
.mw-readout{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:20px}
.mw-col{border-top:2px solid var(--line);padding-top:12px;min-width:0}
.mw-col h4{font-size:.8125rem;font-weight:600;margin:0 0 8px;letter-spacing:0}
.mw-col ul{list-style:none;padding:0;margin:0}
.mw-col li{font-size:.8125rem;padding:6px 0;border-bottom:1px solid #e3e8e7}
.mw-col li span{display:block;color:var(--muted);font-size:.75rem}
.mw-col.alert{border-top-color:#9a2f2f}.mw-col.quiet{border-top-color:#9aa6ad}.mw-col.sent{border-top-color:var(--blue)}
.mw-empty{color:var(--muted);font-size:.8125rem}
.mw-legend{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.75rem;color:var(--muted);margin-top:12px}
.mw-legend i{display:inline-block;width:14px;height:8px;margin-right:6px;vertical-align:0;border-radius:2px}
.mw-quiets{font-size:.8125rem;color:var(--muted);margin:0 0 16px;min-height:2.8em}
@media(prefers-reduced-motion:no-preference){.mw-col li{animation:settle 260ms var(--ease-out) both}}
@media(max-width:800px){.mw-controls{grid-template-columns:1fr}.mw-readout{grid-template-columns:1fr}}
@media(max-width:560px){.mw-axis,.mw-row,.mw-range{grid-template-columns:96px minmax(0,1fr);gap:8px}.mw-name{font-size:.75rem}.mw-board{padding:10px}}

/* Step-through with five steps (extends .workflow-story). */
.workflow-story[data-steps="5"] .story-steps{grid-template-columns:repeat(5,minmax(0,1fr))}
.workflow-story[data-steps="5"] .story-track span{width:20%}
.screen{margin-top:20px;border:1px solid #596e80;border-radius:6px;background:#f4f5f2;color:#20252b;padding:16px 18px;max-width:640px;font-size:.875rem}
.screen h5{font-size:.9375rem;margin:0 0 10px;font-weight:600}
.screen .s-field{border:1px solid #b7c1c3;border-radius:4px;padding:8px 10px;margin:6px 0 10px;background:#fff}
.screen .s-hint{color:#53616b;font-size:.8125rem;margin:0 0 8px}
.screen .s-row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-top:1px solid #dde3e2}
.screen-label{font-size:.75rem;color:#b5c7d4;margin:10px 0 0}
@media(max-width:800px){.workflow-story[data-steps="5"] .story-steps{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.workflow-story[data-steps="5"] .story-steps{grid-template-columns:1fr}}

/* ---------- Supported hardware ---------- */
.hw-filters{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr));gap:12px;align-items:end;margin:24px 0 12px}
.hw-filters .fld{margin:0}
.hw-count{font-size:.8125rem;color:var(--muted);margin:0 0 8px}
.hw-table td,.hw-table th{padding:10px 12px}
.hw-table tbody tr{cursor:pointer}
.hw-table tbody tr:hover{background:#eef1f0}
.hw-table tbody tr[aria-selected=true]{background:var(--ice)}
.hw-table td button{all:unset;cursor:pointer;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.hw-table td button:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.yes{color:#22603f;font-weight:600}.no{color:#6b767d}
.hw-scroll{max-height:560px;overflow:auto;border:1px solid var(--line);border-radius:6px}
.hw-scroll table{min-width:620px}
.hw-scroll thead th{position:sticky;top:0;z-index:1}
.hw-panel{margin:24px 0;border:1px solid var(--line);border-radius:10px;background:#fff;padding:20px;min-height:120px}
.hw-panel h3{margin:0 0 4px;font-size:1.25rem}
.hw-panel .hw-meta{font-size:.875rem;color:var(--muted);margin:0 0 12px}
.hw-iface{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin:12px 0}
.hw-readout{font:600 .9375rem/1.4 ui-monospace,monospace;min-height:44px;display:flex;align-items:center;padding:8px 12px;background:var(--paper);border:1px solid var(--line);border-radius:4px}
.hw-diagram{--sx-text:#20252b;--sx-text-muted:#53616b;--sx-surface-strong:#e3e8e7;--sx-surface:#fff;--sx-canvas:#f7f8f6;--sx-border:#c6cece;--ac:#367d9f;--sx-font:Schibsted,Arial,sans-serif;--sx-mono:ui-monospace,monospace;--sx-success:#2f8a5b;--sx-warning:#b7791f}
.hw-diagram .btn{min-height:32px;padding:4px 10px;border:1px solid #83929a;border-radius:4px;background:var(--paper);font-size:.8125rem;color:var(--ink)}
.hw-diagram .btn[aria-pressed=true]{background:var(--ice);border-color:var(--blue)}
.hw-diagram .btn:disabled{opacity:.5}
.hw-diagram .doc-port{display:block;width:100%;height:100%;background:transparent;border:0;padding:0;cursor:pointer}
.hw-diagram .doc-port:hover,.hw-diagram .doc-port:focus-visible{outline:2px solid var(--ac);outline-offset:1px;background:#367d9f22}
.hw-diagram .doc-port.is-hit{outline:3px solid #d07a2c;outline-offset:1px;background:#d07a2c33}
.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}
@media(max-width:1150px){.hw-filters{grid-template-columns:1fr 1fr}.hw-filters .fld:first-child{grid-column:1/-1}}
@media(max-width:560px){.hw-iface{grid-template-columns:1fr}.hw-filters{grid-template-columns:1fr}}

/* Under reduced motion every moving piece shows its meaningful end state. */
@media(prefers-reduced-motion:reduce){.topo .pulse{display:none}}


.ix-note{max-width:none!important}
.hw-findbox{display:flex;flex-direction:column;gap:6px}.hw-findbox label{font-size:.8125rem;font-weight:600}.hw-findbox input{min-height:44px;border:1px solid #83929a;border-radius:4px;padding:8px 10px;background:var(--paper);font:inherit;color:var(--ink)}.hw-findbox .hint{font-size:.75rem;color:var(--muted);min-height:1.2em}
.hw-iface>div>span{font-size:.8125rem;font-weight:600;display:block;margin-bottom:6px}
.hw-filters .fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.hw-filters .fld label{font-size:.8125rem;font-weight:600}
.hw-filters input,.hw-filters select{min-height:44px;width:100%;min-width:0;border:1px solid #83929a;border-radius:4px;padding:8px 10px;background:var(--paper);color:var(--ink);font:inherit;font-size:.9375rem}
.hw-table tbody th{background:transparent;font-weight:500}
@media(max-width:560px){.mw-ticks span:nth-child(even){display:none}}
.swap .unit text.sub{fill:#b5c7d4;font:12px Schibsted,Arial,sans-serif}

.docs-article .intro{font-size:1.125rem;max-width:60ch}

/* Small screens get a stacked drawing of the same scene instead of a scaled-down or scrolling one. */
.topo svg.tall,.swap svg.tall,.orbit svg.tall{display:none}
@media(max-width:560px){.topo svg.wide,.swap svg.wide,.orbit svg.wide{display:none}.topo svg.tall,.swap svg.tall,.orbit svg.tall{display:block;max-width:420px;margin-inline:auto}.topo-top{flex-wrap:wrap}}
.swap .unit.old.parked text{visibility:hidden}
.docs-nav .is-planned{color:var(--muted)}
.no{color:var(--muted)}
@media(max-width:560px){.hw-panel{padding:14px}.hw-panel .hw-iface{gap:10px}}
.swap-foot fieldset{border:0;padding:0;margin:0;min-width:0}
@media(max-width:560px){.topo-status{min-height:5.2em}}

/* Legend swatches and small marks (classes, so the strict CSP needs no inline styles). */
.lg{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px}
.lg-sent{background:#a6d4ec}.lg-reply{background:#7fd1a8}.lg-silent{border:1.5px dashed #e8b86a;width:10px;height:10px;border-radius:2px}
.mw-legend .lg{width:14px;height:8px;border-radius:2px;vertical-align:0}
.mw-legend .lg-win{background:#dce8ee;border:1px dashed #367d9f}.mw-legend .lg-down{background:#d07a2c}
.mw-legend .lg-quiet{background:repeating-linear-gradient(135deg,#9aa6ad 0 4px,#c4ccd0 4px 8px)}
.mw-legend .lg-bell{background:#9a2f2f;border-radius:50%;width:10px;height:10px}.mw-legend .lg-rebell{background:#fff;box-shadow:0 0 0 2px #9a2f2f;border-radius:50%;width:10px;height:10px}
.s-btn{border:1px solid #20252b;border-radius:4px;padding:2px 8px}.s-pill{border:1px solid #b7c1c3;border-radius:999px;padding:0 8px}
.swap-note{font-size:.8125rem;color:#b5c7d4}.rp-position{font-size:.875rem;margin:0 0 16px}
.mt8{margin-top:8px}.mt12{margin-top:12px}.ix .check.check-tight{margin:0 0 6px}.ix-tools .check.check-tight{margin:0}
.mw-state{margin:16px 0 0;font-weight:600}.rp-out{margin-top:20px}
.mw-ticks .t0{left:0}.mw-ticks .t1{left:16.6667%}.mw-ticks .t2{left:33.3333%}.mw-ticks .t3{left:50%}.mw-ticks .t4{left:66.6667%}.mw-ticks .t5{left:83.3333%}.mw-ticks .t6{left:100%}
.topo .pulse,.orbit .pulse{opacity:0}
.see-also{font-size:.875rem;color:var(--muted)}
.orbit{background:var(--night);color:#e5f0f5;border:1px solid #405363;border-radius:10px;overflow:hidden;margin:24px 0}.orbit svg{display:block;width:100%;height:auto}
.orbit .wire{fill:none;stroke:#596e80;stroke-width:1.25}.orbit .node-box{fill:#1d2a36;stroke:#596e80}.orbit .node-box.appliance{fill:#263544;stroke:#91cbea}
.orbit .node-name{fill:#e5f0f5;font:600 15px Schibsted,Arial,sans-serif}.orbit .node-sub{fill:#b5c7d4;font:13px Schibsted,Arial,sans-serif}.orbit .pulse{fill:#a6d4ec}
.orbit [data-sat][data-on=true] .node-box{stroke:#91cbea;fill:#2b4051}
@media(prefers-reduced-motion:reduce){.orbit .pulse{display:none}}
.st-list{list-style:none;padding:0;margin:0 0 16px}.st-list li{font-size:.875rem;padding:8px 0;border-bottom:1px solid #e3e8e7}.st-list li span{display:block;color:var(--muted);font-size:.8125rem}
.st-out h4,.ask-out h4{font-size:.8125rem;font-weight:600;margin:0 0 6px}.rt-out p{margin:0 0 10px;font-size:.9375rem}.rt-out .rt-basis{color:var(--muted);font-size:.875rem}
.ask-examples{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}.ask-examples button{min-height:36px;padding:6px 12px;border:1px solid #b7c1c3;border-radius:999px;background:var(--paper);font-size:.8125rem;color:var(--ink)}
.ask-examples button:hover{border-color:var(--blue)}

.ix input[type=date]:focus-within{outline:3px solid var(--blue);outline-offset:2px}
.ix .fld input[type=checkbox],.ix .fld input[type=radio]{width:auto;min-height:0;padding:0}
.ix .fld input:disabled{opacity:.5}
/* Before site.js marks the page .js (and without JavaScript) the header must have its final height, or the page
   shifts when the script runs. Search needs JavaScript: it keeps its space but stays hidden until then. */
html:not(.js) [data-open-search]{visibility:hidden}
@media(max-width:1150px){html:not(.js) .nav .header-search{display:none}}
/* Explicit grid places, so the outline can precede the article in the source (see content.py docs_page). */
@media(min-width:1280px){.docs-shell>.docs-nav{grid-column:1;grid-row:1}.docs-shell>.docs-article{grid-column:2;grid-row:1}.docs-shell>.page-outline{grid-column:3;grid-row:1}}
.topo-status{min-height:5em}@media(max-width:560px){.topo-status{min-height:6.6em}}
.topo{margin:0}
/* ---------- WEBSITE3: looping demo captures. The frame reserves its 16:10 box, so nothing moves when a video loads. ---------- */
.demo-capture{margin:28px 0}
.cap-frame{position:relative;aspect-ratio:16/10;background:var(--night);border:1px solid #405363;border-radius:8px;overflow:hidden}
.cap-frame img,.cap-frame video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.cap-frame video{opacity:0;transition:opacity .25s var(--ease-out,ease)}
.demo-capture[data-shown=true] video{opacity:1}
.cap-toggle{position:absolute;left:12px;bottom:12px;min-height:36px;padding:6px 14px;background:#12161cd9;color:#fff;border:1px solid #ffffff59;border-radius:999px;font-size:.8125rem;font-weight:600}
.cap-toggle:hover{background:#12161c}
.cap-toggle:focus-visible{outline:3px solid #91cbea;outline-offset:2px}
.demo-capture[data-cap-state=paused]:not([data-shown=true]) .cap-toggle{left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);min-height:48px;padding:10px 24px;font-size:1rem}
.demo-capture figcaption{font-size:.875rem;color:var(--muted);margin-top:10px;line-height:1.55}
.demo-capture figcaption strong{color:var(--ink)}
.cap-src{display:block;font-size:.8125rem;margin-top:2px}
.cap-tablist{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.cap-tablist [role=tab]{min-height:40px;padding:6px 14px;border:1px solid #b7c1c3;border-radius:999px;background:var(--paper);font-size:.875rem;color:var(--ink)}
.cap-tablist [role=tab][aria-selected=true]{border-color:var(--blue);background:var(--ice);font-weight:600}
.cap-tablist [role=tab]:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.cap-tabs .demo-capture{margin-top:0}
html:not(.js) .cap-tablist{display:none}
.js .cap-panel:not(.is-active){display:none}
/* ---------- WEBSITE3: outage wording explorer ---------- */
.ow-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px}
.ow-cases{display:flex;flex-direction:column;gap:6px}
.ow-cases label{display:flex;align-items:flex-start;gap:10px;min-height:40px;padding:8px 12px;border:1px solid #b7c1c3;border-radius:4px;font-size:.875rem;line-height:1.4;cursor:pointer;background:var(--paper)}
.ow-cases label:has(input:checked){border-color:var(--blue);background:var(--ice);font-weight:600}
.ow-cases label:has(input:focus-visible){outline:3px solid var(--blue);outline-offset:2px}
.ow-cases input{margin:3px 0 0;accent-color:var(--blue);flex:none}
.ow-pick .fld{margin-top:4px}
.js .ow-panel:not(.on){display:none}
html:not(.js) .ow-pick{display:none}html:not(.js) .ow-grid{grid-template-columns:1fr}html:not(.js) .ow-panel+.ow-panel{border-top:1px solid var(--line);padding-top:16px;margin-top:16px}
.ow-case{font-size:1rem;margin:0 0 12px}
.ow-facts{margin:0}.ow-facts dt{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:14px 0 4px}.ow-facts dt:first-child{margin-top:0}
.ow-facts dd{margin:0;font-size:.9375rem;overflow-wrap:anywhere}
.ow-facts q{display:block;margin-top:6px;color:var(--muted);font-size:.875rem}
.ow-tl{margin:0;padding-left:20px}.ow-tl li{font-size:.875rem;margin:0 0 6px}
.ow-facts .pill{white-space:normal;line-height:1.4}
@media(max-width:800px){.ow-grid{grid-template-columns:1fr}}
/* ---------- WEBSITE3: permissions viewer ---------- */
.pv-summary{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:4px 0 16px}
.pv-can h4{font-size:.8125rem;font-weight:600;margin:0 0 6px}.pv-can ul{margin:0;padding-left:18px;font-size:.875rem}
.pv-no{color:var(--muted)}.pv-note{grid-column:1/-1;margin:0;font-size:.875rem}
.pv-count{font-weight:600;margin:0 0 8px;font-size:.9375rem}
.pv-table{max-height:440px;overflow:auto;border:1px solid var(--line);border-radius:4px}
.pv-table table{margin:0;width:100%;font-size:.8125rem}
.pv-table th,.pv-table td{padding:6px 10px}
.pv-table thead th{position:sticky;top:0;background:#eef1f0;z-index:1}
.pv-table td{text-align:center}.pv-table tbody th{font-weight:400;text-align:left}
.pv-table tbody th small{display:block;color:var(--muted);font-size:.75rem}
.pv-group th{background:var(--paper);font-weight:600!important;text-transform:uppercase;letter-spacing:.06em;font-size:.6875rem;color:var(--muted)}
.pv-y{color:#22603f;font-weight:700}.pv-n{color:#8a959c}
.pv-h{font-size:1rem;margin:28px 0 6px}
.pv-rule li.pv-focus{background:var(--ice);padding-left:8px;padding-right:8px}
.ix fieldset:disabled .seg label{opacity:.6;cursor:default}
@media(max-width:640px){.pv-summary{grid-template-columns:1fr}}
/* ---------- WEBSITE3: Mist site mapping ---------- */
.mm-intro{margin-top:0}
.mm-events{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.mm-events .ix-btn:disabled{opacity:.55}
.mm-h{font-size:.9375rem;margin:0 0 4px}
.mm-summary{font-size:.875rem;color:var(--muted);margin:0 0 10px}
.mm-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.mm-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;padding:12px 0;border-bottom:1px solid var(--line);align-items:start}
.mm-name{display:flex;flex-direction:column;gap:2px;min-width:0}
.mm-name strong{font-size:.9375rem;overflow-wrap:anywhere}
.mm-state{font-size:.8125rem;font-weight:600;color:var(--muted)}
.mm-row[data-state=mapped] .mm-state{color:#22603f}.mm-row[data-state=missing] .mm-state{color:#8a4b14}
.mm-note{font-size:.8125rem;color:var(--muted)}
.mm-actions{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;max-width:420px}
.mm-actions button,.mm-confirm button{min-height:36px;padding:6px 12px;background:transparent;border:1px solid #83929a;border-radius:4px;font-size:.8125rem;color:var(--ink)}
.mm-actions button:hover,.mm-confirm button:hover{background:#e7eceb}
.mm-actions .mm-primary,.mm-confirm .mm-primary{background:var(--ink);border-color:var(--ink);color:#fff}
.mm-actions select{min-height:36px;border:1px solid #83929a;border-radius:4px;padding:4px 8px;background:var(--paper);color:var(--ink);font:inherit;font-size:.8125rem;max-width:100%}
.mm-confirm{grid-column:1/-1;padding:12px 14px;border:1px solid #d9a46a;background:#fbf0e3;border-radius:4px}
.mm-confirm p{margin:4px 0 10px;font-size:.875rem}
.mm-live{min-height:1.6em;margin:12px 0 0;font-size:.875rem;font-weight:600}
.mm-empty p{margin:4px 0 0;color:var(--muted);font-size:.875rem}
@media(max-width:640px){.mm-row{grid-template-columns:1fr}.mm-actions{justify-content:flex-start;max-width:none}}
.docs-article .mm-row,.docs-article .ow-tl li,.docs-article .pv-can li,.docs-article .ow-facts dd{max-width:none}
.docs-article .mm-row{margin:0}.docs-article .pv-can li{margin-bottom:4px}
.mm-actions button:disabled{opacity:.5;cursor:default}
.mm-actions .mm-primary:hover,.mm-confirm .mm-primary:hover{background:#344351;border-color:#344351}
.pv-table{position:relative}.pv-table td,.pv-table th{position:relative}.pv-table thead th{position:sticky}
/* ---------- RELNOTES: release notes (/releases/) ---------- */
.rel-naming{margin:24px 0;padding:16px 20px;border:1px solid var(--line);border-radius:6px;background:#fff9;font-size:.9375rem}
.rel-naming p{margin:0 0 8px;color:var(--muted);max-width:68ch}.rel-naming .rel-feed{margin:0}
.rel-filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 28px;margin:8px 0 8px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rel-filters fieldset{border:0;margin:0;padding:0;min-width:0}
.rel-filters legend{font-size:.8125rem;font-weight:600;margin-bottom:8px;padding:0}
.rel-filters .seg label{min-height:36px;padding:6px 10px;font-size:.875rem;background:#fff}
.rel-count{flex-basis:100%;margin:0;font-size:.8125rem;color:var(--muted);min-height:1.5em}
.rel-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:-12px 0 16px;font-size:.875rem;color:var(--muted)}
.rel-status{display:inline-flex;align-items:center;gap:8px;padding:2px 10px;border:1px solid var(--line);border-radius:999px;font-size:.75rem;font-weight:600;letter-spacing:.02em;color:var(--ink);background:#fff}
.rel-status::before{content:"";width:8px;height:8px;border-radius:50%;background:#22603f}
.rel-status[data-status=ready]{border-color:#8fb6c9;background:#eef5f8}.rel-status[data-status=ready]::before{background:var(--blue)}
.rel-status[data-status="in development"],.rel-status[data-status=planned]{border-color:#d9a46a;background:#fbf0e3}
.rel-status[data-status="in development"]::before,.rel-status[data-status=planned]::before{background:transparent;box-shadow:inset 0 0 0 2px #a8641f}
.rel-actions{display:inline-flex;gap:8px 12px;align-items:center;margin-left:auto}
.docs-article .rel-link{font-size:.8125rem;font-weight:600;color:var(--muted)}
.rel-copy{min-height:32px;padding:4px 10px;background:transparent;border:1px solid #83929a;border-radius:4px;font-size:.8125rem;color:var(--ink)}
.rel-copy:hover{background:#e7eceb}
.rel-upcoming{margin:0 0 16px;padding:12px 16px;border:1px solid #d9a46a;border-radius:4px;background:#fbf0e3;font-size:.9375rem;color:#5c3a12}
.rel-summary{font-size:1.0625rem}
.rel-kind h3{font-size:1rem;font-weight:600;letter-spacing:0;margin:24px 0 8px}
.rel-kind ul{margin:0;padding-left:1.25em}
.rel-kind li{margin:0 0 8px}
.rel-kind li.is-planned{color:var(--muted)}
.rel-tag{display:inline-block;margin-right:4px;padding:0 6px;border:1px dashed #a8641f;border-radius:4px;font-size:.6875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#7a4714;vertical-align:1px}
.rel-empty{color:var(--muted);font-size:.9375rem}
.docs-article section:has(>.rel){scroll-margin-top:calc(var(--header) + 24px)}
.docs-article section:has(>.rel):target>h2{color:var(--blue-text)}
.rel-kind[hidden],.rel[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){
 .rel-kind,.docs-article section:has(>.rel){transition:opacity 180ms ease}
 .rel-fading{opacity:.35}
}
@media(max-width:640px){.rel-actions{margin-left:0}}
/* ---------- DOCSREADS: supported devices (/docs/reference/devices/) and the hardware table's reads columns ---------- */
.hw-filters{grid-template-columns:minmax(0,1.6fr) repeat(5,minmax(0,1fr))}
.hw-scroll table{min-width:900px}
.hw-table td a{text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.rm-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:end;margin:24px 0 12px}
.rm-filters .fld{display:flex;flex-direction:column;gap:6px;min-width:0;margin:0}
.rm-filters .fld label{font-size:.8125rem;font-weight:600}
.rm-filters select{min-height:44px;width:100%;min-width:0;border:1px solid #83929a;border-radius:4px;padding:8px 10px;background:var(--paper);color:var(--ink);font:inherit;font-size:.9375rem}
.rm-count{font-size:.8125rem;color:var(--muted);margin:0 0 8px;min-height:1.5em}
.rm-scroll{overflow:auto;border:1px solid var(--line);border-radius:6px;background:#fff}
.rm-table{margin:0;min-width:1040px;font-size:.8125rem}
.rm-table.rm-one{min-width:0}
.rm-table th,.rm-table td{padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:top}
.rm-table thead th{position:sticky;top:0;z-index:1;background:#eef1f0;font-size:.75rem;line-height:1.3;font-weight:600}
.rm-table tbody th{position:sticky;left:0;z-index:1;background:#fff;min-width:180px;max-width:210px;font-weight:400;box-shadow:1px 0 0 var(--line)}
.rm-table thead th.rm-corner{left:0;z-index:2;box-shadow:1px 0 0 var(--line)}
.rm-table tbody th .rm-name{display:block;font-weight:600;font-size:.875rem}
.rm-table tbody th small{display:block;color:var(--muted);font-size:.75rem;line-height:1.4;margin-top:2px}
.rm-table td{white-space:nowrap}
.rm-table td sup{margin-left:2px;font-size:.6875rem;line-height:1;vertical-align:top;position:relative;top:1px}
.rm-table td sup a{text-decoration:underline;text-underline-offset:2px;padding:0 1px}
.rm-table tbody tr:target th,.rm-table tbody tr:target td{background:var(--ice)}
.rm-table td.rm-dim .rd{opacity:.35}
.rd{display:inline-block;padding:1px 6px;border-radius:999px;border:1px solid transparent;font-weight:600;font-size:.75rem;line-height:1.5}
.rd abbr{text-decoration:none}
.rd-both{background:#dcefe4;color:#1d4f34;border-color:#a9d1b9}
.rd-ssh{background:#dce8ee;color:#1f4a60;border-color:#a5c4d4}
.rd-snmp{background:#efe9da;color:#5b4613;border-color:#d6c69c}
.rd-no{background:transparent;color:var(--muted);border-color:#c6cece;font-weight:500}
.rd-na{background:transparent;color:var(--muted);border-color:transparent;font-weight:500}
.rm-empty{margin:12px 0;color:var(--muted);font-size:.9375rem}
.rm-notes{font-size:.875rem;color:var(--muted);padding-left:1.5em}
.rm-notes li{margin:0 0 6px;scroll-margin-top:calc(var(--header) + 24px)}
.rm-notes li:target{color:var(--ink);background:var(--ice)}
.dev-table tbody th{font-weight:600;white-space:nowrap}
@media(max-width:1150px){.hw-filters{grid-template-columns:1fr 1fr}.hw-filters .fld:first-child{grid-column:1/-1}}
@media(max-width:560px){.rm-filters{grid-template-columns:1fr}.hw-filters{grid-template-columns:1fr}.rm-table tbody th{min-width:150px;max-width:170px}.dev-table tbody th{white-space:normal}}