/* Subnet calculator (/data/tools/subnet-calculator/ and its embed page). Loaded after hub.css on the tool page and
   on its own in the embed, which defines the hub tokens it needs inline. Built on hub tokens, so the light and dark
   designs follow the hub's switch; the embed follows the visitor's system setting. Bit colours keep 4.5:1 or more. */
:root{--sn-net:#0b57a4;--sn-net-bg:#e8f1fb;--sn-host:#a3123f;--sn-host-bg:#fdecef;--sn-mix:#6b4600;--sn-mix-bg:#fff4d6;--sn-err:#a3123f}
.site-s-dark{--sn-net:#9cc8ff;--sn-net-bg:#13263d;--sn-host:#ff9bb5;--sn-host-bg:#3a1520;--sn-mix:#ffd591;--sn-mix-bg:#3a2a0c;--sn-err:#ff9bb5}
@media (prefers-color-scheme:dark){.sn-embed{--sn-net:#9cc8ff;--sn-net-bg:#13263d;--sn-host:#ff9bb5;--sn-host-bg:#3a1520;--sn-mix:#ffd591;--sn-mix-bg:#3a2a0c;--sn-err:#ff9bb5}}

.subnet-tool{max-width:none}
.subnet-tool .lede,.subnet-tool .sn-prose,.subnet-tool .faq,.subnet-tool .sources,.subnet-tool .cite,.subnet-tool .embed,.subnet-tool .changelog,.subnet-tool .byline{max-width:var(--measure)}
.sn-badges{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding:0;list-style:none;font-size:14px}
.sn-badges li{border:1px solid var(--c-sep2);border-radius:999px;padding:3px 12px;color:var(--c-sub);background:var(--c-soft)}

.sn-app{border:1px solid var(--c-sep2);border-radius:8px;background:var(--c-soft);padding:20px;margin:0 0 32px}
.sn-embed .sn-app{padding:14px;margin:0}
.sn-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,260px);gap:14px 20px;align-items:start}
.sn-field-main,.sn-try,.sn-vlsm,.sn-actions,.sn-form noscript{grid-column:1/-1}
.sn-field label,.sn-vlsm label{display:block;font-weight:600;color:var(--c-headings);margin:0 0 6px;font-size:15px}
.sn-field-main{grid-column:1/2}
.sn-field-split{grid-column:2/3}
#sn-input{width:100%;font:500 20px/1.3 var(--font-mono);padding:12px 14px;border:2px solid var(--c-sep2);border-radius:6px;background:var(--c-bg);color:var(--c-headings)}
#sn-input[aria-invalid=true]{border-color:var(--sn-err)}
#sn-split,#sn-vlsm{width:100%;font:16px/1.4 var(--font-body);padding:12px 10px;border:2px solid var(--c-sep2);border-radius:6px;background:var(--c-bg);color:var(--c-text)}
#sn-vlsm{font-family:var(--font-mono);resize:vertical}
#sn-split:disabled{opacity:.6}
.sn-app :focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.sn-help{margin:6px 0 0;font-size:14px;color:var(--c-sub);line-height:1.5}
.sn-err{margin:8px 0 0;font-weight:600;color:var(--sn-err)}
.sn-try{margin:-4px 0 0;display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:14px}
.sn-try span{color:var(--c-sub);margin-right:2px}
.sn-app button{font:600 14px/1 var(--font-body);min-height:36px;padding:8px 12px;border-radius:4px;border:1px solid var(--c-sep2);background:var(--c-bg);color:var(--c-headings);cursor:pointer}
.sn-app button:hover{border-color:var(--c-headings)}
.sn-app button:disabled{opacity:.5;cursor:not-allowed}
.sn-try button{font-family:var(--font-mono);font-weight:500;min-height:32px;padding:6px 10px}
#sn-copy-res{background:var(--c-main);border-color:var(--c-main);color:#fff}
.sn-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sn-status{font-size:14px;color:var(--c-sub)}
.sn-vlsm{border-top:1px solid var(--c-sep2);padding-top:12px}
.sn-vlsm summary{cursor:pointer;font-weight:600;color:var(--c-headings);min-height:24px}
.sn-vlsm[open] summary{margin-bottom:10px}

.sn-results{margin-top:18px}
.sn-paused .sn-results{opacity:.45}
.sn-res{background:var(--c-bg);border:1px solid var(--c-sep2);border-radius:6px;padding:16px}
.sn-res-head{margin:0 0 12px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:20px}
.sn-res-head code{font:600 1em var(--font-mono);color:var(--c-headings);overflow-wrap:anywhere}
.sn-ver{font:700 12px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;padding:5px 8px;border-radius:3px;background:var(--c-main);color:#fff}
.sn-notes{margin:0 0 12px;padding:0 0 0 18px;font-size:15px;color:var(--c-text)}
.sn-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:0 0 14px}
.sn-tile{border:1px solid var(--c-sep2);border-radius:6px;padding:10px 12px;background:var(--c-soft);min-width:0}
.sn-tile span{display:block;font-size:13px;color:var(--c-sub);margin-bottom:4px}
.sn-tile b{display:block;font:600 18px/1.3 var(--font-mono);color:var(--c-headings);overflow-wrap:anywhere}
.sn-table{width:100%;border-collapse:collapse;font-size:15px;margin:0}
.sn-table th,.sn-table td{text-align:left;vertical-align:top;padding:8px 8px 8px 0;border-top:1px solid var(--c-sep)}
.sn-table th{font-weight:600;color:var(--c-headings);width:34%;font-size:14px}
.sn-table code{font:15px/1.45 var(--font-mono);color:var(--c-headings);overflow-wrap:anywhere;background:none;padding:0}
.sn-hint{display:block;font-size:13px;color:var(--c-sub);margin-top:2px}
.sn-table .sn-c{width:1%;padding-right:0;text-align:right}
.sn-table .sn-copy{min-height:28px;padding:4px 8px;font-size:12px}
.sn-map{display:flex;gap:2px;height:14px;margin:16px 0 4px}
.sn-map span{flex:1;background:var(--c-sep2);border-radius:2px;min-width:2px}
.sn-map span.on{background:var(--c-main)}
.sn-map-wide{background:var(--c-sep2);border-radius:2px}
.sn-map-wide span.on{flex:none;width:6px}
.sn-map-cap{margin:0 0 4px;font-size:13px;color:var(--c-sub)}
.sn-bin{margin-top:16px}
.sn-bin h3,.sn-res h3{font-size:16px;margin:0 0 6px}
.sn-key{margin:0 0 6px;font-size:13px;display:flex;flex-wrap:wrap;gap:8px}
.sn-key span{padding:2px 8px;border-radius:3px}
.sn-bin table{border-collapse:collapse}
.sn-bin th{text-align:left;font-weight:600;font-size:13px;padding:4px 12px 4px 0;white-space:nowrap;color:var(--c-sub)}
.sn-bin td{padding:4px 0}
.sn-bin code{font:14px/1.4 var(--font-mono);white-space:nowrap;background:none;padding:0}
.sn-n{color:var(--sn-net);background:var(--sn-net-bg)}
.sn-h{color:var(--sn-host);background:var(--sn-host-bg)}
.sn-x{color:var(--sn-mix);background:var(--sn-mix-bg)}
.sn-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.sn-list{width:100%;border-collapse:collapse;font-size:14px;margin:16px 0 0;background:var(--c-bg)}
.sn-list caption{text-align:left;font-weight:600;color:var(--c-headings);padding:0 0 8px;font-size:15px}
.sn-list th,.sn-list td{text-align:left;padding:7px 12px 7px 0;border-top:1px solid var(--c-sep);white-space:nowrap;font-family:var(--font-mono);font-size:14px}
.sn-list thead th{font-family:var(--font-body);font-weight:600;color:var(--c-sub);font-size:13px;border-top:0;border-bottom:2px solid var(--c-sep2)}
.sn-list tbody th{font-weight:500;color:var(--c-sub)}
.sn-list td:first-of-type{color:var(--c-headings)}
.sn-foot{margin:8px 0 0;font-size:14px;color:var(--c-sub)}
.sn-more{margin-top:10px}
.sn-results .sn-err{margin-top:14px}

/* Page sections under the tool */
.sn-section{margin:0 0 36px}
.sn-example{border:1px solid var(--c-sep2);border-radius:8px;padding:16px;margin:0 0 20px}
.sn-example .sn-res{border:0;padding:0}
.sn-example>p{max-width:var(--measure)}
.sn-ref{width:100%;border-collapse:collapse;font-size:15px}
.sn-ref caption{text-align:left;color:var(--c-sub);font-size:14px;padding:0 0 8px}
.sn-ref th,.sn-ref td{text-align:left;padding:7px 14px 7px 0;border-top:1px solid var(--c-sep);white-space:nowrap}
.sn-ref thead th{border-top:0;border-bottom:2px solid var(--c-sep2);font-size:13px;color:var(--c-sub);font-weight:600}
.sn-ref td,.sn-ref tbody th{font-family:var(--font-mono);font-size:14px}
.sn-ref tbody th{font-weight:600;color:var(--c-headings)}
.sn-ref td.sn-note{font-family:var(--font-body);white-space:normal;color:var(--c-sub)}
.sn-ref tr.is-common th,.sn-ref tr.is-common td{background:var(--c-soft)}
.sn-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:700px){
  .sn-app{padding:14px;margin-left:-4px;margin-right:-4px}
  .sn-form{grid-template-columns:minmax(0,1fr)}
  .sn-field-main,.sn-field-split{grid-column:1/-1}
  #sn-input{font-size:18px}
  .sn-res{padding:12px}
  .sn-table th{width:auto;display:block;border-top:1px solid var(--c-sep);padding-bottom:0}
  .sn-table td{display:block;border-top:0;padding-top:2px}
  .sn-table tr{display:block}
  .sn-table .sn-c{display:none}
  .sn-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sn-tiles{gap:8px}
  .sn-tile{padding:8px 9px}
  .sn-tile b{font-size:14px;letter-spacing:-.01em}
}
@media print{
  .sn-form,.sn-more,.sn-try,.sn-actions{display:none!important}
  .sn-app{border:0;padding:0;background:none}
}