/* Networks composition — shared type, colors, fixed header and controls use the direction-page design system. */
.networks-page h1,.networks-page h2 { font: 800 clamp(1.8rem,3.4vw,3rem)/1.12 var(--font-heading); letter-spacing: -.04em; }
.networks-page h1 span,.networks-page h2 span { color: var(--accent-cyan); }
.networks-page h1 { margin: 1.3rem 0 0; }
.networks-page h2 { margin: 1.2rem 0; }
.networks-page h3 { font-family: var(--font-heading); letter-spacing: -.02em; }
.networks-page main p { color: var(--text-secondary); line-height: 1.65; }
.networks-page main .btn-primary { min-height: 48px; padding: .8rem 1.55rem; font-size: .9rem; text-align: center; justify-content: center; }
.networks-page main :is(button,a,summary,input):focus-visible { outline: 2px solid var(--detail-teal); outline-offset: 5px; }
.network-hero { padding: 4rem 0 2.5rem; }
.network-hero-heading { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3.5rem; align-items: center; margin-bottom: 2.8rem; }
.network-hero-copy { padding-top: 1.4rem; max-width: 39rem; }
.network-hero-art { margin: 0; min-width: 0; justify-self: end; width: 100%; max-width: 24rem; }
.network-hero-art img,.network-wifi-art img { display: block; width: 100%; height: auto; }
.network-wifi-art { margin: 1.5rem 0 0; width: 100%; max-width: 25rem; }
.network-hero-copy > p { font-size: 1.02rem; }
.network-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem; }
.networks-page main .network-secondary { border: 1px solid var(--border-color-hover); background: transparent; color: var(--text-primary); box-shadow: none; }
.networks-page main .network-secondary:hover { background: rgba(90,200,189,.1); box-shadow: var(--shadow-glow); }
.network-topology { border: 1px solid var(--border-color); padding: 1.6rem 2rem 1rem; background: linear-gradient(rgba(90,200,189,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(90,200,189,.025) 1px,transparent 1px),color-mix(in srgb,var(--bg-primary) 66%,transparent); background-size: 32px 32px,32px 32px,auto; }
.topology-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.network-eyebrow,.network-number { color: var(--accent-cyan); font: 400 .8rem/1.6 var(--font-mono); }
.route-legend { display: flex; gap: 1.3rem; font-size: .8rem; color: var(--text-muted); }
.route-legend > span { display: inline-flex; align-items: center; gap: .5rem; }
.route-legend > span::before { content: ''; width: 1.6rem; border-top: 2px solid var(--detail-teal); }
.route-legend .route-backup-label::before { border-top: 2px dashed var(--detail-blue); }
.network-sites { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1.2rem; }
.network-site { min-width: 0; padding: 1.05rem .5rem; text-align: center; border: 1px solid var(--border-color); background: var(--bg-primary); transition: transform var(--transition-normal),box-shadow var(--transition-normal),border-color var(--transition-normal); }
.network-site:hover { transform: translateY(-4px); border-color: var(--border-color-hover); box-shadow: var(--shadow-md),var(--shadow-glow); }
.network-site > .material-symbols-rounded { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; color: var(--accent-cyan); border: 1px solid rgba(90,200,189,.25); border-radius: var(--radius-md); background: rgba(90,200,189,.08); box-shadow: 0 0 18px var(--accent-glow); margin-bottom: .6rem; transition: background .25s,color .25s,box-shadow .25s; }
.network-site:hover > .material-symbols-rounded { background: var(--accent-gradient); color: #fff; box-shadow: 0 4px 24px var(--accent-glow); }
.network-site h3 { font-size: 1rem; line-height: 1.4; }
.network-site p { font-size: .8rem; margin-top: .25rem; }
.route-drawing { position: relative; height: 12.5rem; padding-bottom: 0; }
.route-drawing svg { display: block; width: 100%; height: calc(100% - 2.5rem); overflow: visible; }
.route-path { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; transition: opacity .35s,stroke .35s; }
.route-primary { stroke: var(--detail-teal); stroke-dasharray: 10 5; animation: network-flow 9s linear infinite; filter: drop-shadow(0 0 3px rgba(90,200,189,.2)); }
.route-backup { stroke: var(--detail-blue); stroke-dasharray: 5 7; opacity: .28; }
.route-junction { fill: var(--detail-teal); }
.backup-junction { fill: var(--detail-blue); opacity: .35; }
.is-backup .route-primary { opacity: .17; animation: none; }
.is-backup .route-junction:not(.backup-junction) { opacity: .2; }
.is-backup .route-backup { opacity: 1; animation: network-flow 9s linear infinite; filter: drop-shadow(0 0 4px rgba(122,167,242,.3)); }
.is-backup .backup-junction { opacity: 1; }
.network-core { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; gap: .75rem; align-items: center; background: var(--bg-primary); border: 1px solid var(--accent-cyan); padding: .8rem 1.35rem; min-width: 15rem; box-shadow: var(--shadow-glow); }
.network-core > .material-symbols-rounded { color: var(--accent-cyan); font-size: 1.7rem; }
.network-core strong { display: block; font-size: .95rem; }
.network-core div > span { display: block; margin-top: .2rem; color: var(--text-muted); font: .72rem var(--font-mono); }
.topology-controls { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid var(--border-color); }
#routeStatus { min-height: 5rem; }
#routeStatus strong { font-size: .94rem; }
#routeStatus p { font-size: .87rem; max-width: 41rem; margin-top: .35rem; }
.network-switch { position: relative; display: inline-flex; align-items: center; gap: .8rem; cursor: pointer; max-width: 18rem; font-size: .9rem; font-weight: 600; line-height: 1.5; }
.network-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.switch-track { flex: 0 0 2.6rem; height: 1.5rem; border: 1px solid var(--border-color); border-radius: 2rem; background: var(--bg-input); padding: 3px; transition: background .25s; }
.switch-track::after { content: ''; display: block; height: 1rem; width: 1rem; background: var(--text-primary); border-radius: 50%; transition: transform .25s; }
.network-switch input:checked + .switch-track { background: var(--accent-cyan); }
.network-switch input:checked + .switch-track::after { transform: translateX(1rem); background: white; }
.network-switch input:focus-visible + .switch-track { outline: 2px solid var(--detail-teal); outline-offset: 4px; }
.networks-page main .topology-disclaimer { font-size: .76rem; color: var(--text-muted); margin-top: .8rem; }
.topology-explanation { display: grid; grid-template-columns: .65fr 1.35fr; gap: 3rem; margin-top: 1.3rem; }
.topology-explanation h3 { font-size: 1.12rem; padding-top: .15rem; }
.topology-explanation p { font-size: .93rem; }
.network-section { padding: clamp(2.75rem,5vw,4.7rem) 0; scroll-margin-top: 7rem; }
.network-scope-rows { display: grid; gap: .7rem; margin-top: 2.3rem; }
.network-scope-row { position: relative; display: grid; grid-template-columns: 1fr 1.45fr .6fr; align-items: start; gap: 2rem; padding: 1.5rem; border: 1px solid var(--border-color); background: color-mix(in srgb,var(--bg-primary) 60%,transparent); transition: transform var(--transition-normal),background var(--transition-normal),border-color var(--transition-normal),box-shadow var(--transition-normal); }
.network-scope-row:hover { z-index: 1; transform: translateY(-4px); background: rgba(90,200,189,.09); border-color: var(--border-color-hover); box-shadow: var(--shadow-md),var(--shadow-glow); }
.scope-name { display: grid; grid-template-columns: 1.3rem 2.8rem 1fr; align-items: center; gap: .7rem; }
.scope-name > .material-symbols-rounded { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border: 1px solid rgba(90,200,189,.3); border-radius: var(--radius-md); background: rgba(90,200,189,.09); color: var(--accent-cyan); font-size: 1.5rem; text-shadow: 0 0 10px rgba(90,200,189,.3); box-shadow: 0 0 18px var(--accent-glow); transition: transform var(--transition-fast),background .25s,color .25s,box-shadow .25s; }
.network-scope-row:hover .scope-name > .material-symbols-rounded { transform: scale(1.08); background: var(--accent-gradient); color: #fff; box-shadow: 0 4px 24px var(--accent-glow),0 0 26px rgba(90,200,189,.22); }
.scope-name h3 { font-size: 1.15rem; }
.network-scope-row p { font-size: .96rem; }
.network-tags { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; }
.network-tags li { color: var(--detail-teal); border: 1px solid var(--border-color-hover); background: rgba(90,200,189,.12); padding: .35rem .65rem; font: 500 .78rem/1.45 var(--font-mono); box-shadow: 0 0 12px var(--accent-glow); transition: background .25s,border-color .25s,box-shadow .25s; }
.network-scope-row:hover .network-tags li { background: rgba(90,200,189,.2); border-color: var(--accent-cyan); box-shadow: 0 0 18px var(--accent-glow); }
[data-theme="light"] .network-tags li { color: var(--accent-cyan); }
.network-wifi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.network-lead { max-width: 39rem; }
.wifi-principle { margin-top: 2rem; padding: 1.5rem 0 0; border-top: 1px solid var(--border-color); }
.wifi-principle > .material-symbols-rounded { display: inline-block; vertical-align: middle; margin-right: .7rem; color: var(--accent-cyan); font-size: 2.5rem; filter: drop-shadow(0 0 10px var(--accent-glow)); }
.wifi-principle strong { font-size: clamp(1.1rem,2.2vw,1.6rem); font-family: var(--font-heading); }
.wifi-principle p { margin-top: .65rem; max-width: 33rem; font-size: .9rem; }
.wifi-questions { border-top: 1px solid var(--border-color); }
.wifi-questions details { border-bottom: 1px solid var(--border-color); padding: .5rem 0; }
.wifi-questions summary { list-style: none; display: grid; grid-template-columns: 1.6rem 1fr 1.5rem; align-items: center; gap: .8rem; padding: 1rem .5rem; cursor: pointer; border: 1px solid transparent; transition: background .25s; }
.wifi-questions summary::-webkit-details-marker { display: none; }
.wifi-questions summary:hover { background: rgba(90,200,189,.08); }
.wifi-questions summary h3 { font-size: 1.1rem; line-height: 1.5; }
.wifi-questions summary > .material-symbols-rounded { color: var(--accent-cyan); transition: transform .25s; }
.wifi-questions details[open] summary > .material-symbols-rounded { transform: rotate(45deg); }
.wifi-questions details > p { padding: 0 2rem 1.2rem 2.9rem; font-size: .96rem; }
.network-section-heading { display: grid; grid-template-columns: 1.2fr .8fr; gap: 3.5rem; align-items: end; margin-bottom: 2.1rem; }
.network-section-heading h2 { margin-bottom: 0; }
.network-access-groups { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.network-access-card { padding: 1.5rem; border: 1px solid var(--border-color); background: color-mix(in srgb,var(--bg-primary) 60%,transparent); transition: transform var(--transition-normal),background var(--transition-normal),border-color var(--transition-normal),box-shadow var(--transition-normal); display: flex; flex-direction: column; }
.network-access-card:hover { transform: translateY(-4px); background: rgba(90,200,189,.09); border-color: var(--border-color-hover); box-shadow: var(--shadow-md),var(--shadow-glow); }
.access-card-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; }
.access-card-heading > .material-symbols-rounded { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border: 1px solid rgba(90,200,189,.3); border-radius: var(--radius-md); color: var(--accent-cyan); background: rgba(90,200,189,.09); box-shadow: 0 0 18px var(--accent-glow); transition: background .25s,color .25s,transform .25s,box-shadow .25s; }
.network-access-card:hover .access-card-heading > .material-symbols-rounded { transform: scale(1.08); background: var(--accent-gradient); color: #fff; box-shadow: 0 4px 24px var(--accent-glow); }
.network-access-card h3 { font-size: 1.35rem; margin-bottom: .8rem; }
.network-access-card > p { font-size: .97rem; flex: 1; }
.network-permission { display: flex; align-items: center; gap: .5rem; margin-top: 1.3rem; padding-top: 1rem; border-top: 1px solid var(--border-color); color: var(--text-secondary); font-size: .85rem; }
.network-permission .material-symbols-rounded { font-size: 1.2rem; color: var(--accent-cyan); }
.network-note { display: flex; gap: .6rem; align-items: start; font-size: .86rem; margin-top: 1.3rem; }
.network-note .material-symbols-rounded { color: var(--accent-cyan); font-size: 1.2rem; padding-top: .1rem; }
.network-handover-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 5rem; }
.network-handover-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem; list-style: none; padding-top: .5rem; }
.network-handover-list li { border-top: 1px solid var(--border-color); padding-top: 1rem; }
.network-handover-list .material-symbols-rounded { color: var(--accent-cyan); margin-bottom: .7rem; }
.network-handover-list h3 { font-size: 1rem; margin-bottom: .55rem; line-height: 1.4; }
.network-handover-list p { font-size: .9rem; }
.network-final { padding-bottom: 5rem; }
.network-final-inner { display: flex; align-items: center; justify-content: space-between; gap: 3rem; padding: 2.5rem; border: 1px solid var(--border-color-hover); background: linear-gradient(120deg,rgba(90,200,189,.085),transparent); }
.network-final-inner h2 { margin-top: 0; }
.network-final-inner p { max-width: 45rem; }
.network-final-inner .btn-primary { flex-shrink: 0; }
@keyframes network-flow { to { stroke-dashoffset: -120; } }
[data-theme="light"] .route-primary { stroke: var(--accent-cyan); }
[data-theme="light"] .route-legend .route-primary-label::before { border-color: var(--accent-cyan); }
[data-theme="light"] .route-backup { stroke: #406aa2; }
[data-theme="light"] .route-legend .route-backup-label::before { border-color: #406aa2; }
@media(max-width:1000px) {
 .network-hero-heading,.network-section-heading { gap: 2rem; }
 .network-wifi-grid,.network-handover-grid { gap: 2.5rem; }
 .network-site p { font-size: .75rem; }
 .network-scope-row { grid-template-columns: 1fr 1.5fr; gap: 1.5rem; }
 .network-tags { grid-column: 2; margin-top: -.7rem; }
 .network-topology { padding: 1.3rem; }
 .network-sites { gap: .7rem; }
 .network-site h3 { font-size: .9rem; }
 .network-final-inner { padding: 1.7rem; }
}
@media(max-width:760px) {
 .network-hero { padding-top: 2.5rem; }
 .network-hero-heading,.network-section-heading,.network-wifi-grid,.network-handover-grid { grid-template-columns: 1fr; gap: 1.5rem; }
 .network-hero-copy { padding-top: 1.2rem; }
 .network-hero-art { justify-self: center; max-width: 22rem; }
 .network-wifi-art { margin-inline: auto; max-width: 22rem; }
 .network-sites { gap: .4rem; }
 .network-site { padding: .8rem .2rem; }
 .network-site > .material-symbols-rounded { width: 2rem; height: 2rem; font-size: 1.3rem; }
 .network-site h3 { font-size: .78rem; overflow-wrap: anywhere; }
 .network-site p { display: none; }
 .network-topology { padding: 1rem .65rem; }
 .route-legend { gap: .7rem; font-size: .75rem; }
 .route-drawing { height: 11rem; }
 .network-core { min-width: 0; width: max-content; max-width: 95%; padding: .75rem; }
 .topology-controls { grid-template-columns: 1fr; gap: 1rem; }
 #routeStatus { min-height: 0; }
 .network-switch { max-width: none; }
 .topology-explanation { grid-template-columns: 1fr; gap: .6rem; }
 .network-section { padding: 2.5rem 0; }
 .network-scope-row { grid-template-columns: 1fr; gap: 1rem; padding: 1.2rem; }
 .network-tags { grid-column: auto; margin-top: 0; }
 .network-access-groups { grid-template-columns: 1fr; }
 .network-final-inner { display: block; }
 .network-final-inner .btn-primary { margin-top: 1.5rem; }
}
@media(max-width:420px) {
 .network-actions { display: grid; }
 .network-actions .btn-primary { width: 100%; }
 .network-handover-list { grid-template-columns: 1fr; }
 .wifi-questions details > p { padding-left: .5rem; padding-right: .5rem; }
 .topology-heading { margin-bottom: 1.2rem; }
}
@media(prefers-reduced-motion:reduce) {
 .networks-page *, .networks-page *::before, .networks-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
 .network-site:hover,.network-access-card:hover,.network-access-card:hover .access-card-heading > .material-symbols-rounded,.network-scope-row:hover,.network-scope-row:hover .scope-name > .material-symbols-rounded { transform: none; }
}