/* Penton Systems | Founder: Scott Penton | Orlando, Florida. Designed and engineered under the direction of Scott Penton. Copyright (c) 2026 Scott Penton / Penton Systems. */
/* Experience D: Break the Network, and the connectivity page instruments. */

/* hero visual */
.nw-hero .bg{opacity:.85}
.nw-hero .bg canvas{position:absolute;inset:0;width:100%;height:100%}
.nw-hero .bg:after{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 25% 65%,rgba(5,9,18,.92),rgba(5,9,18,.35) 70%,transparent)}
.nw-hero .algos{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.nw-hero .algos span{font:500 .7rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2);padding:8px 10px;border:1px solid var(--line-2);background:rgba(5,9,18,.6)}

/* simulator layout */
.nw-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:clamp(20px,2.4vw,32px);align-items:start}
.nw-compact .nw-grid{grid-template-columns:minmax(0,1fr) minmax(260px,330px)}
@media (max-width:1100px){.nw-grid,.nw-compact .nw-grid{grid-template-columns:minmax(0,1fr)}}
.instrument .nw-stage{aspect-ratio:16/10;cursor:default;outline-offset:-2px}
@media (max-width:640px){.instrument .nw-stage{aspect-ratio:4/5}}
.nw-stage canvas{touch-action:manipulation}
.nw-tip{position:absolute;z-index:4;min-width:180px;max-width:230px;padding:10px 12px;background:rgba(4,8,16,.94);border:1px solid var(--line-2);font-size:.8rem;line-height:1.4;pointer-events:none;display:grid;gap:3px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.nw-tip b{font-weight:650;color:#fff}
.nw-tip span{color:var(--fg-2)}
.nw-legend{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font:500 .68rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.nw-legend>span{white-space:nowrap}
.nw-legend i{display:inline-block;width:22px;height:0;border-top:3px solid var(--teal);margin-right:6px;vertical-align:middle}
.nw-legend i.lg-alt{border-top:2px dashed var(--blue-hi)}
.nw-legend i.lg-dead{border-top:2px dashed var(--red)}
.nw-hint{margin-left:auto}
@media (max-width:640px){.nw-hint{margin-left:0}}

.nw-side{display:grid;gap:22px;min-width:0}
.nw-side .lbl,.nw-under .lbl{font:500 .7rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);margin-bottom:10px}
.nw-blk .field{margin-bottom:10px}
.nw-blurb{margin:12px 0 0;color:var(--fg-2);font-size:.92rem;line-height:1.5}
.nw-detnote{margin:4px 0 0;font-size:.8rem}
.nw-topos{display:flex;width:100%}
.nw-topos button{flex:1 1 auto;padding:0 10px;font-size:.7rem}
.nw-wans{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.nw-fl{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;color:var(--fg-3)}
.nw-fl select{min-height:42px;padding:8px 32px 8px 10px;font-size:.88rem}
.nw-chaos{display:flex;flex-wrap:wrap;gap:8px}
.nw-chaos .btn{flex:1 1 calc(50% - 8px);justify-content:space-between}
.nw-ro{grid-template-columns:repeat(2,minmax(0,1fr))}
.nw-ro .readout{padding:16px 14px}
.nw-ro .readout .v{font-size:clamp(1.25rem,1.8vw,1.7rem)}
.nw-ro .readout.flow{grid-column:1/-1}
.nw-ro .readout.flow .v{font-size:1.05rem;font-stretch:105%;letter-spacing:0;line-height:1.3}
.nw-ro .readout.flow .s{color:var(--fg-2)}
@media (max-width:1100px){.nw-ro{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.nw-ro{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* below the instrument */
.nw-under{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:22px 40px;margin-top:28px}
.nw-compact .nw-under{grid-template-columns:minmax(0,1fr)}
@media (max-width:960px){.nw-under{grid-template-columns:minmax(0,1fr)}}
.nw-conv-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.nw-conv-total{font-size:1.6rem;font-weight:700;font-stretch:115%}
.nw-bar{display:flex;height:14px;border:1px solid var(--line-2);overflow:hidden;gap:1px;background:var(--line)}
.nw-bar i{display:block;min-width:3px}
.seg-d{background:var(--red)}.seg-f{background:var(--violet)}.seg-s{background:var(--amber)}.seg-c{background:var(--teal)}.seg-i{background:var(--blue-hi)}.seg-0{background:rgba(150,180,230,.08)}.seg-x{background:repeating-linear-gradient(45deg,rgba(255,94,98,.6) 0 6px,rgba(255,94,98,.2) 6px 12px)}
.nw-bar-key{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:12px;font-size:.82rem;color:var(--fg-2)}
.nw-bar-key i{display:inline-block;width:10px;height:10px;margin-right:6px;vertical-align:-1px}
.nw-bar-key b{color:var(--fg);font-weight:600;margin-left:4px}
.nw-log{list-style:none;margin:0;padding:0;max-height:260px;overflow:auto;border-top:1px solid var(--line)}
.nw-log li{display:grid;grid-template-columns:70px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:.84rem;color:var(--fg-2);line-height:1.45}
.nw-log li:first-child{color:var(--fg)}
.nw-log time{font:500 .72rem/1.6 var(--mono);color:var(--fg-3)}
.nw-voice{grid-column:1/-1}
.nw-st{display:inline-block;font:600 .68rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:5px 8px;border:1px solid currentColor;white-space:nowrap}
.nw-st.ok{color:var(--teal)}.nw-st.warn{color:var(--amber)}.nw-st.bad{color:var(--red)}
.nw-elements{grid-column:1/-1;border:1px solid var(--line);padding:0}
.nw-elements summary{cursor:pointer;padding:14px 16px;font:500 .74rem/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2)}
.nw-elements summary:hover{color:#fff}
.nw-el-grid{display:grid;grid-template-columns:1fr 2fr;gap:20px;padding:4px 16px 18px}
@media (max-width:760px){.nw-el-grid{grid-template-columns:minmax(0,1fr)}}
.nw-el-grid ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px}
.nw-tg{width:100%;display:flex;justify-content:space-between;gap:10px;align-items:center;min-height:40px;padding:6px 10px;background:rgba(5,10,20,.6);border:1px solid var(--line-2);color:var(--fg);font-size:.82rem;text-align:left;cursor:pointer}
.nw-tg small{font:600 .64rem/1 var(--mono);letter-spacing:.1em;color:var(--teal);white-space:nowrap}
.nw-tg[aria-pressed=true]{border-color:rgba(255,94,98,.6);background:rgba(60,14,18,.5)}
.nw-tg[aria-pressed=true] small{color:var(--red)}
.nw-tg:disabled{opacity:.55;cursor:not-allowed}
.nw-tg:disabled small{color:var(--fg-3)}
.nw-tg:hover:not(:disabled){border-color:var(--blue-hi)}

/* reachability matrix */
.nw-matrix{border-collapse:collapse;font-size:.82rem;min-width:100%}
.nw-matrix th,.nw-matrix td{border:1px solid var(--line);padding:0;text-align:center;height:52px;min-width:64px}
.nw-matrix thead th{height:auto;padding:10px 6px;vertical-align:bottom;font:500 .66rem/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
.nw-matrix tbody th{text-align:left;padding:0 12px;font:500 .7rem/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2);white-space:nowrap}
.nw-matrix td b{display:block;font-weight:700;font-size:.95rem}
.nw-matrix td small{display:block;font:500 .64rem/1.2 var(--mono);color:var(--fg-3)}
.nw-matrix td.ok{background:rgba(34,216,200,.06)}
.nw-matrix td.bad{background:rgba(255,94,98,.14);color:var(--red)}
.nw-matrix td.self{color:var(--fg-3)}
.nw-cmp td{white-space:nowrap}.nw-cmp th{white-space:normal;vertical-align:bottom}.nw-cmp{font-size:.86rem}
.nw-cmp td:nth-child(3),.nw-cmp td:nth-child(7){white-space:normal;min-width:120px}
@media (max-width:900px){.nw-cmp{font-size:.8rem}.nw-cmp th,.nw-cmp td{padding-right:9px}.nw-cmp th{letter-spacing:.03em;font-size:.68rem}.nw-cmp td:nth-child(3),.nw-cmp td:nth-child(7){min-width:96px}.nw-cmp .nw-st{padding-left:6px;padding-right:6px}}

/* model chapter */
.nw-model .deflist dd{color:var(--fg-2)}
.nw-model .deflist dd b{color:var(--fg)}

/* connectivity page */
.instrument.cx-orbit .stage{aspect-ratio:4/3}
.cx-orbit .seg{margin:0}
.cx-hero .bg canvas{position:absolute;inset:0;width:100%;height:100%}
.cx-hero .bg{opacity:.75}
.cx-hero .bg:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,9,18,.95) 0%,rgba(5,9,18,.6) 45%,rgba(5,9,18,.15) 100%)}
@media (max-width:760px){.cx-hero .bg:after{background:linear-gradient(180deg,rgba(5,9,18,.5),rgba(5,9,18,.9))}}
.cx-scope{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line);padding:clamp(28px,4vw,48px) 0}
@media (max-width:860px){.cx-scope{grid-template-columns:minmax(0,1fr)}}
.cx-scope h2{font-size:clamp(1.3rem,2vw,1.7rem);font-stretch:112%}
.cx-scope ul{margin:0;padding:0 0 0 1.1em;color:var(--fg-2)}
.cx-scope li{margin:.4em 0}