/* ==========================================================================
   beriffa.com: the static pages outside Next (public/404.html, public/network/index.html). PAGES-B.
   They load the design system's tokens.css and beriffa.css from this folder (byte-identical copies) and then this
   file. Tokens only: no hex, rgb(), hsl() or oklch(); no font-family but var(--font-sans) or var(--font-mono);
   nothing below 13px; weights 400, 500 and 600; no italics. npm run test:design checks this file.
   The faces (Geist and Geist Mono, self-hosted under /fonts/geist/) are declared in each page's head.
   ========================================================================== */

html { color-scheme: dark; background: var(--bg-ground); }
.s-static { min-height: 100vh; margin: 0; }

/* The wordmark at the top, linking home. */
.s-static__head { position: relative; z-index: 2; display: flex; align-items: center; height: var(--header-h); padding: 0 var(--space-10); }
.s-static__brand { display: inline-flex; align-items: center; border-radius: var(--radius-sm); }
.s-static__brand img { display: block; height: 20px; width: auto; }
.s-static__brand:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
@media (max-width: 639.98px) { .s-static__head { padding: 0 var(--space-4); } }
/* /404.html is a marketing page (.b-site on its body; owner decision "Old width, panel full"): from 1400px its
   wordmark and its words keep to the old site's centred column (content-max-site, the gutters inside it), by the side
   padding .b-site sets (--b-site-inline, beriffa.css section 23). /network/ is a full-window map and keeps the window. */
@media (min-width: 1400px) {
  .b-site :is(.s-static__head, .s-404__main) { padding-inline: var(--b-site-inline); }
}

/* ================================================================ /404.html
   The words at the left on clean ground, the dotted globe behind them at the right (below the words on phones). */
.s-404 { position: relative; overflow-x: hidden; }
.s-404__globe { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.s-404__main { position: relative; z-index: 1; display: flex; align-items: center; min-height: calc(100vh - var(--header-h)); padding: var(--space-16) var(--space-10) var(--space-24); }
.s-404__text { display: flex; flex-direction: column; gap: var(--space-6); max-width: 650px; min-width: 0; }
.s-404__text > * { margin: 0; }
.s-404__title { max-width: 16ch; text-wrap: balance; }
.s-404__text .b-lede { max-width: var(--measure-reading); }
.s-404__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.s-404__ip { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); min-height: 58px; }
.s-404__ip-result { display: flex; flex-direction: column; gap: var(--space-1); }
.s-404__ip-row { display: flex; align-items: center; gap: var(--space-2); }
.s-404__ip-value { padding: 0; border: 0; border-radius: var(--radius-xs); background: none; color: var(--text-1); font: var(--type-mono-value-font); cursor: pointer; }
.s-404__ip-value:hover { color: var(--text-2); }
.s-404__ip-value:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.s-404__copied { color: var(--text-2); opacity: 0; transition: opacity var(--dur-state) var(--ease-out); }
/* The class names the page's script toggles. */
.s-404 .hidden { display: none !important; }
.s-404 .flex { display: flex; }
.s-404 .reveal-blur { filter: blur(7px); opacity: 0.6; transition: filter var(--dur-panel) var(--ease-out), opacity var(--dur-panel) var(--ease-out); }
.s-404 .reveal-clear { filter: none; opacity: 1; }
.s-404 .animate-fade-up { animation: s-fade-up var(--dur-panel) var(--ease-out) both; }
@keyframes s-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 1023.98px) {
  .s-404__main { align-items: flex-start; padding-bottom: calc(3 * var(--space-24)); }
}
@media (max-width: 639.98px) {
  .s-404__main { padding: var(--space-10) var(--space-4) calc(3 * var(--space-24)); }
  .s-404__actions > .b-button { flex: 1 1 auto; }
}

/* ================================================================ /network/
   The full-window map with the overview panel, the legend and the detail card on the system's surfaces. The page's
   own class names (built by its script) are kept; they are styled here, under .s-netmap. */
.s-netmap { height: 100%; overflow: hidden; color: var(--text-1); font: var(--type-ui-font); }
html:has(.s-netmap) { height: 100%; }
.s-netmap #map { position: fixed; inset: 0; z-index: 0; background: var(--map-sea); }
.s-netmap .leaflet-container { background: var(--map-sea); font: var(--type-ui-font); outline: none; }
.s-netmap .leaflet-control-attribution { padding: 2px 6px !important; background: var(--bg-surface-1) !important; color: var(--text-3) !important; font: var(--type-mono-small-font); border-top-left-radius: var(--radius-sm); }
.s-netmap .leaflet-control-attribution a { color: var(--text-2) !important; }
.s-netmap .leaflet-bar { border: var(--border-hairline) solid var(--line) !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-overlay) !important; overflow: hidden; }
.s-netmap .leaflet-bar a { width: 36px !important; height: 36px !important; line-height: 36px !important; background: var(--bg-surface-1) !important; color: var(--text-1) !important; border-bottom: var(--border-hairline) solid var(--line) !important; font-weight: 400; }
.s-netmap .leaflet-bar a:hover { background: var(--bg-surface-2) !important; }
.s-netmap .leaflet-tooltip.node-tip { padding: 2px 8px; border: var(--border-hairline) solid var(--line); border-radius: var(--radius-sm); background: var(--map-label-bg); color: var(--text-1); box-shadow: none; font: var(--type-mono-small-font); }
.s-netmap .leaflet-tooltip.node-tip::before { display: none; }

/* Pins: ink on the dark map; the core facility a square, a tunnel a diamond, a suspended exchange quiet. */
.s-netmap .pin-wrap { position: relative; display: flex; align-items: center; justify-content: center; }
.s-netmap .pin { width: 14px; height: 14px; border-radius: var(--radius-full); background: var(--text-1); box-shadow: 0 0 0 2px var(--map-sea); transition: transform var(--dur-state) var(--ease-out); }
.s-netmap .pin.core { width: 16px; height: 16px; border-radius: var(--radius-xs); }
.s-netmap .pin.tunnel { border-radius: 2px; transform: rotate(45deg); background: var(--map-sea); box-shadow: inset 0 0 0 2px var(--text-1), 0 0 0 2px var(--map-sea); }
.s-netmap .pin.suspended { background: var(--text-3); }
.s-netmap .pin-wrap:hover .pin { transform: scale(1.2); }
.s-netmap .pin-wrap:hover .pin.tunnel { transform: rotate(45deg) scale(1.2); }
/* The selected pin: the system's 1.5px ink ring, still. */
.s-netmap .pin.active { box-shadow: 0 0 0 2px var(--map-sea), 0 0 0 4px var(--map-selected); }

/* Links: still dashed lines (no flowing dashes, no travelling packets: the map holds still). */
.s-netmap .link-line { stroke: var(--text-3); stroke-width: 1.3; stroke-dasharray: 2 7; fill: none; opacity: 0.7; }
.s-netmap .link-line.flow { animation: none; }
.s-netmap .link-line.hot { stroke: var(--text-1); stroke-width: 2; opacity: 1; }
.s-netmap .link-line.susp { stroke: var(--text-3); stroke-width: 1.1; opacity: 0.4; }
.s-netmap .packet { display: none; }

/* The estimated round-trip labels at the arcs' tops. */
.s-netmap .ping-wrap { display: flex; align-items: center; justify-content: center; pointer-events: none; }
.s-netmap .ping { display: inline-flex; align-items: center; gap: 6px; padding: 1px 6px; border: var(--border-hairline) solid var(--line); border-radius: var(--radius-xs); background: var(--map-label-bg); color: var(--text-2); font: var(--type-mono-small-font); white-space: nowrap; }
.s-netmap .ping .pdot { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--text-3); }

/* The overlay panels: the system's surface with its hairline, no glass. */
.s-netmap .panel { position: fixed; z-index: 1000; background: var(--bg-surface-1); border: var(--border-hairline) solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-overlay); }

/* The overview panel at the top left. */
/* It stops above the legend (about 190px tall) at the bottom left. */
.s-netmap #sidebar { top: var(--space-4); left: var(--space-4); display: flex; flex-direction: column; width: 380px; max-width: calc(100vw - 2 * var(--space-4)); max-height: calc(100vh - 2 * var(--space-4) - 200px); overflow: hidden; }
.s-netmap .head { padding: var(--space-4) var(--space-5); border-bottom: var(--border-hairline) solid var(--line); }
.s-netmap .brandrow { display: flex; align-items: center; gap: var(--space-3); }
.s-netmap .brandrow img { height: 20px; width: auto; }
.s-netmap .divider { width: 1px; height: 18px; background: var(--line); }
.s-netmap .brandrow .t { font: var(--type-label-font); letter-spacing: var(--type-label-tracking); color: var(--text-1); }
.s-netmap .pill { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 1px 8px; border: var(--border-hairline) solid var(--line-strong); border-radius: var(--radius-full); color: var(--text-1); font: var(--type-mono-small-font); }
.s-netmap .pill .dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--text-1); }
.s-netmap .eyebrow { margin-top: var(--space-3); font: var(--type-label-font); letter-spacing: var(--type-label-tracking); text-transform: uppercase; color: var(--text-3); }
/* The BGP.Exchange advisory: a warning, in the warn tone (not red). */
.s-netmap .advisory { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--warn-wash); box-shadow: inset 0 0 0 var(--border-hairline) var(--warn-line); color: var(--text-1); font: var(--type-small-font); text-decoration: none; }
.s-netmap .advisory svg { flex: none; color: var(--warn-text); }
.s-netmap .advisory:hover { text-decoration: underline; text-underline-offset: 0.2em; }

.s-netmap .scroll { overflow-y: auto; overscroll-behavior: contain; }
.s-netmap .sec { padding: var(--space-4) var(--space-5); border-bottom: var(--border-hairline) solid var(--line-subtle); }
.s-netmap .sec:last-child { border-bottom: 0; }
.s-netmap .sec-h { margin-bottom: var(--space-3); font: var(--type-label-font); letter-spacing: var(--type-label-tracking); text-transform: uppercase; color: var(--text-3); }

/* The points of presence. */
.s-netmap .nodes { display: flex; flex-direction: column; gap: 2px; }
.s-netmap .node { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: var(--row-h-dense); padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-md); background: none; color: var(--text-1); font: inherit; text-align: start; cursor: pointer; transition: background var(--dur-state) var(--ease-out); }
.s-netmap .node:hover { background: var(--bg-surface-2); }
.s-netmap .node[aria-pressed="true"] { background: var(--bg-surface-2); box-shadow: inset 0 0 0 var(--border-hairline) var(--line-strong); }
/* The marks match the pins and the legend: a dot, the core a square, a tunnel a hollow diamond, suspended quiet. */
.s-netmap .node .dot { flex: none; width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--text-1); }
.s-netmap .node .sq { border-radius: 2px; }
.s-netmap .node .tn { border-radius: 2px; transform: rotate(45deg); background: none; box-shadow: inset 0 0 0 2px var(--text-1); }
.s-netmap .node .susp { background: var(--text-3); box-shadow: none; }
.s-netmap .node .susptag { margin-left: var(--space-2); padding: 0 6px; border-radius: var(--radius-xs); background: var(--warn-wash); box-shadow: inset 0 0 0 var(--border-hairline) var(--warn-line); color: var(--warn-text); font: var(--type-mono-small-font); vertical-align: middle; }
.s-netmap .node .nm { display: block; font: var(--type-ui-font); font-weight: 500; }
.s-netmap .node .rl { display: block; margin-top: 2px; font: var(--type-mono-small-font); color: var(--text-3); }
.s-netmap .node .cc { margin-left: auto; padding: 0 6px; border: var(--border-hairline) solid var(--line); border-radius: var(--radius-xs); color: var(--text-2); font: var(--type-mono-small-font); }
.s-netmap .node.hide { display: none; }
.s-netmap .leaflet-marker-icon.dim-marker { opacity: 0.22; transition: opacity var(--dur-state) var(--ease-out); }

/* The filter field. */
.s-netmap .search { position: relative; margin-bottom: var(--space-3); }
.s-netmap .search .s-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.s-netmap .search input { width: 100%; height: var(--control-h-md); padding: 0 12px 0 34px; border: var(--border-hairline) solid var(--line-control); border-radius: var(--radius-md); background: var(--bg-input); color: var(--text-1); font: var(--type-mono-font); -webkit-appearance: none; appearance: none; }
.s-netmap .search input::placeholder { color: var(--text-3); opacity: 1; }
.s-netmap .search input:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.s-netmap .search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.s-netmap .empty { padding: var(--space-2) 2px 0; margin: 0; font: var(--type-small-font); color: var(--text-3); }

/* The network facts. */
.s-netmap .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: var(--border-hairline) solid var(--line); border-radius: var(--radius-md); background: var(--line); }
.s-netmap .stat { padding: var(--space-3); background: var(--bg-surface-1); }
.s-netmap .stat .v { font: var(--type-mono-value-font); color: var(--text-1); }
.s-netmap .stat .k { margin-top: 2px; font: var(--type-small-font); color: var(--text-3); }

.s-netmap .links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font: var(--type-small-font); }
.s-netmap .links a { color: var(--link); text-decoration: underline; text-decoration-color: var(--link-decoration); text-underline-offset: 0.2em; }
.s-netmap .links a:hover { text-decoration-color: var(--text-1); }

/* Peers and transit (disclosures). */
.s-netmap .peers { padding: 0; }
.s-netmap .peers summary { display: flex; align-items: center; gap: var(--space-2); min-height: var(--row-h); padding: var(--space-2) var(--space-5); cursor: pointer; list-style: none; }
.s-netmap .peers summary::-webkit-details-marker { display: none; }
.s-netmap .peers summary:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: calc(-1 * var(--focus-width)); }
.s-netmap .peers .count { padding: 0 8px; border: var(--border-hairline) solid var(--line); border-radius: var(--radius-full); color: var(--text-2); font: var(--type-mono-small-font); }
.s-netmap .peers .chev { margin-left: auto; color: var(--text-3); transition: transform var(--dur-state) var(--ease-out); }
.s-netmap .peers[open] .chev { transform: rotate(180deg); }
.s-netmap .peerlist { max-height: 220px; padding: 0 var(--space-3); overflow-y: auto; overscroll-behavior: contain; }
.s-netmap .peer { display: flex; align-items: baseline; gap: var(--space-3); padding: var(--space-2); border-radius: var(--radius-sm); color: var(--text-1); text-decoration: none; }
.s-netmap .peer:hover { background: var(--bg-surface-2); }
.s-netmap .peer .as { min-width: 76px; color: var(--text-2); font: var(--type-mono-small-font); }
.s-netmap .peer .pn { overflow: hidden; font: var(--type-small-font); text-overflow: ellipsis; white-space: nowrap; }
.s-netmap .peers-all { display: block; padding: var(--space-2) var(--space-5) var(--space-4); color: var(--link); font: var(--type-small-font); text-decoration: underline; text-decoration-color: var(--link-decoration); text-underline-offset: 0.2em; }

/* The NOC link. */
.s-netmap .noc-chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-h-md); margin-bottom: var(--space-3); padding: 0 var(--space-3); border: var(--border-hairline) solid var(--line-control); border-radius: var(--radius-md); color: var(--text-1); font: var(--type-ui-font); text-decoration: none; }
.s-netmap .noc-chip:hover { background: var(--bg-surface-2); }
.s-netmap .noc-chip svg { flex: none; color: var(--text-2); }

/* The legend at the bottom left. */
.s-netmap #legend { left: var(--space-4); bottom: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); }
.s-netmap .lg { display: flex; align-items: center; gap: var(--space-3); color: var(--text-2); font: var(--type-small-font); }
.s-netmap .lg-m { flex: none; width: 12px; height: 12px; border-radius: var(--radius-full); background: var(--text-1); }
.s-netmap .lg-m.core { border-radius: var(--radius-xs); }
.s-netmap .lg-m.tn { border-radius: 2px; transform: rotate(45deg); background: none; box-shadow: inset 0 0 0 2px var(--text-1); }
.s-netmap .lg-m.susp { background: var(--text-3); }
.s-netmap .lg-l { flex: none; width: 16px; height: 0; border-top: 2px dashed var(--text-3); }

/* The map controls under the zoom buttons: fullscreen, labels, tour. */
.s-netmap .map-ctrl { display: flex; flex-direction: column; margin-top: var(--space-2); border: var(--border-hairline) solid var(--line); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-overlay); }
.s-netmap .map-ctrl button { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-bottom: var(--border-hairline) solid var(--line); background: var(--bg-surface-1); color: var(--text-1); cursor: pointer; }
.s-netmap .map-ctrl button:last-child { border-bottom: 0; }
.s-netmap .map-ctrl button:hover { background: var(--bg-surface-2); }
.s-netmap .map-ctrl button.on { background: var(--primary); color: var(--on-primary); }

/* The detail card at the bottom right. */
.s-netmap #detail { right: var(--space-4); bottom: var(--space-4); display: none; flex-direction: column; width: 380px; max-width: calc(100vw - 2 * var(--space-4)); max-height: calc(100vh - 2 * var(--space-4)); overflow: hidden; }
.s-netmap #detail.show { display: flex; }
.s-netmap .d-head { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: var(--border-hairline) solid var(--line); }
.s-netmap .d-title { font: var(--type-h3-font); letter-spacing: var(--type-h3-tracking); color: var(--text-1); }
.s-netmap .d-sub { margin-top: 2px; font: var(--type-mono-small-font); color: var(--text-3); }
.s-netmap .d-actions { display: flex; flex: none; align-items: center; gap: var(--space-2); margin-left: auto; }
.s-netmap .d-share, .s-netmap .d-close { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--control-h-sm); padding: 0 var(--space-3); border: var(--border-hairline) solid var(--line-control); border-radius: var(--radius-md); background: none; color: var(--text-1); font: var(--type-small-font); cursor: pointer; }
.s-netmap .d-close { width: var(--control-h-sm); padding: 0; }
.s-netmap .d-share:hover, .s-netmap .d-close:hover { background: var(--bg-surface-2); }
.s-netmap .d-share svg { flex: none; }
.s-netmap .d-rows { padding: var(--space-1) 0; overflow-y: auto; }
.s-netmap .drow { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-5); border-bottom: var(--border-hairline) solid var(--line-subtle); }
.s-netmap .drow:last-child { border-bottom: 0; }
.s-netmap .drow .rk { min-width: 84px; color: var(--text-3); font: var(--type-small-font); }
.s-netmap .drow .rv { flex: 1; min-width: 0; color: var(--text-1); font: var(--type-mono-small-font); overflow-wrap: anywhere; }
.s-netmap .copy { flex: none; display: inline-flex; align-items: center; gap: 6px; height: var(--control-h-sm); margin-left: auto; padding: 0 var(--space-2); border: 0; border-radius: var(--radius-md); background: none; color: var(--text-2); font: var(--type-small-font); cursor: pointer; }
.s-netmap .copy:hover, .s-netmap .copy.done { background: var(--bg-surface-2); color: var(--text-1); }
.s-netmap .badge { display: inline-flex; align-items: center; gap: 6px; color: var(--text-1); font: var(--type-mono-small-font); }
.s-netmap .badge .d { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--text-1); }
.s-netmap .badge.susp { color: var(--warn-text); }
.s-netmap .badge.susp .d { border-radius: 1px; background: var(--warn); transform: rotate(45deg); }

.s-netmap .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.s-netmap :focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.s-netmap .hint { position: fixed; left: 50%; bottom: var(--space-4); z-index: 900; transform: translateX(-50%); padding: 2px var(--space-3); border: var(--border-hairline) solid var(--line); border-radius: var(--radius-full); background: var(--bg-surface-1); color: var(--text-3); font: var(--type-mono-small-font); pointer-events: none; }

@media (max-width: 760px) {
  .s-netmap #sidebar { top: var(--space-3); left: var(--space-3); right: var(--space-3); width: auto; max-height: 46vh; }
  .s-netmap #detail { left: var(--space-3); right: var(--space-3); bottom: var(--space-3); width: auto; max-height: 44vh; }
  .s-netmap .hint, .s-netmap .leaflet-control-zoom, .s-netmap .map-ctrl, .s-netmap #legend { display: none; }
}