/* Crimson Pacific Networks — site theme. Shared by every page on the site. */
:root {
  --bg: #f3f1ed; --pn: #e9e6e0; --fg: #141312; --mu: #625d56; --ln: #d6d1c9;
  --ac: #b3262d; --ok: #1c7a3d; --wn: #8d5c08; --er: #b3262d; --warn: var(--wn);
  --c1: #b3262d; --c2: #2b5fb8; --c3: #a85f0f; --c4: #6b4bc4; --c5: #23805a; --c6: #0a7a94;
  --sans: 'Schibsted Grotesk', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}
:root[data-theme="dark"] {
  --bg: #121110; --pn: #1b1917; --fg: #eeebe6; --mu: #9d978f; --ln: #2e2b28;
  --ac: #ef6d64; --ok: #7fd39a; --wn: #e3b465; --er: #ef6d64;
  --c1: #e8324f; --c2: #3b7ce0; --c3: #d17c2c; --c4: #8a6ae0; --c5: #41aa79; --c6: #05a3c7;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; min-height: 100vh;
}
a { color: var(--ac); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
::selection { background: var(--ac); color: #fff; }
:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
h1, h2, h3, p { margin: 0; }
.mono { font-family: var(--mono); font-weight: 500; }
.mu { color: var(--mu); }
.ok { color: var(--ok); } .wn { color: var(--wn); } .er { color: var(--er); }
.num { font-variant-numeric: tabular-nums; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px) 64px; }

/* header / footer */
.hdr { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; padding: 20px 0; border-bottom: 1px solid var(--ln); }
.brand { display: flex; flex: none; white-space: nowrap; align-items: center; gap: 10px; color: var(--fg); font-weight: 700; letter-spacing: -.01em; }
.brand:hover { text-decoration: none; }
.brand img { display: block; flex: none; }
.h1-logo { display: flex; align-items: center; gap: 14px; }
.h1-logo img { flex: none; }
.hdr .htag { font: 500 14px var(--mono); color: var(--mu); }
.hdr .right { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-left: auto; }
.nav { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 14px; font-weight: 500; }
.nav a { color: var(--fg); }
.nav a[aria-current="page"] { color: var(--ac); }
.ftr { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-top: 20px; border-top: 6px solid var(--fg); font-size: 14px; color: var(--mu); }

/* controls */
.btn { font: 500 14px var(--mono); cursor: pointer; padding: 6px 12px; border: 1px solid var(--fg); background: transparent; color: var(--fg); white-space: nowrap; }
.btn:hover { background: var(--pn); }
.seg { display: flex; border: 1px solid var(--fg); align-self: flex-start; }
.seg button { font: 500 14px var(--mono); cursor: pointer; padding: 6px 14px; border: 0; background: transparent; color: var(--fg); }
.seg button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.input { font: 500 14px var(--mono); padding: 7px 10px; border: 1px solid var(--fg); background: transparent; color: var(--fg); width: 240px; max-width: 100%; }

/* numbered section: label column + body column */
.sec { display: flex; flex-wrap: wrap; gap: 24px 48px; padding: 40px 0 56px; border-top: 2px solid var(--fg); }
.sec-h { flex: 1 1 220px; display: flex; flex-direction: column; gap: 4px; }
.sec-h .n { font: 500 14px var(--mono); color: var(--ac); }
.sec-h h2 { font-size: 30px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.sec-h .sub { font: 500 14px var(--mono); color: var(--mu); margin-top: 8px; }
.sec-b { flex: 3 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.lede { font-size: 20px; line-height: 1.45; max-width: 46ch; text-wrap: pretty; }
.sec-b h3 { font-size: 20px; font-weight: 600; }
.sec-b h3 small { font: 500 14px var(--mono); color: var(--mu); }

/* panels, key/value rows, link cards */
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.grid.wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.panel { background: var(--pn); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.panel .row1 { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.kv { display: grid; gap: 0 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.kv > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--ln); }
.kv > div span:first-child { color: var(--mu); }
.kv > div span:last-child { font: 500 14px var(--mono); text-align: right; }
.card { background: var(--pn); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; color: var(--fg); }
.card:hover { outline: 2px solid var(--ac); text-decoration: none; }
.card b { font-weight: 600; }
.card span { font-size: 14px; color: var(--mu); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--mu); margin-right: 6px; }
.dot.ok { background: var(--ok); } .dot.wn { background: var(--wn); } .dot.er { background: var(--er); }

/* tables (div-grid, scroll on narrow screens) */
.tbl { overflow-x: auto; }
.tbl > div { min-width: 660px; }
.tr { display: grid; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ln); align-items: center; }
.tr.th { padding: 8px 0; border-bottom: 2px solid var(--fg); font-size: 13px; font-weight: 600; }
.tr .m { font: 500 14px var(--mono); }
.tr .s { font: 500 14px var(--mono); color: var(--mu); }

/* big clock (home) */
.clock-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.badge { background: var(--ac); color: #fff; font: 600 14px var(--mono); padding: 4px 10px; }
.clock { display: flex; align-items: baseline; flex-wrap: nowrap; gap: 0 12px; border-top: 6px solid var(--fg); padding-top: 12px; container-type: inline-size; }
.clock .t { font-size: min(232px, 17cqw); font-weight: 600; letter-spacing: -.045em; line-height: .9; font-variant-numeric: tabular-nums; }
.clock .ms { font: 500 clamp(16px, 3.4cqw, 44px) var(--mono); color: var(--ac); font-variant-numeric: tabular-nums; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); border-top: 1px solid var(--ln); }
.stats > div { padding: 14px 16px 0 0; display: flex; flex-direction: column; gap: 2px; }
.stats .k { font-size: 13px; color: var(--mu); }
.stats .v { font: 500 18px var(--mono); overflow-wrap: anywhere; }

/* address chips */
.ips { display: grid; gap: 6px 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); font: 500 14px var(--mono); }
.ips a { color: var(--fg); padding: 4px 0; border-bottom: 1px solid var(--ln); display: flex; justify-content: space-between; gap: 8px; }
.ips a:hover { color: var(--ac); text-decoration: none; }

.note { font: 500 14px var(--mono); color: var(--mu); }
.loading { color: var(--mu); font: 500 14px var(--mono); padding: 12px 0; }

/* ---- page head (sub-pages) ---- */
.ph { padding: 40px 0 32px; display: flex; flex-direction: column; gap: 10px; }
.ph .eyebrow { font: 500 14px var(--mono); color: var(--ac); }
.ph h1 { font-size: clamp(32px, 5vw, 52px); font-weight: 600; letter-spacing: -.03em; line-height: 1.05; }
.ph p { max-width: 70ch; color: var(--mu); text-wrap: pretty; }
.ph .meta { font: 500 14px var(--mono); color: var(--mu); }
.controls { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; padding: 0 0 28px; }
.controls .lbl { font: 500 14px var(--mono); color: var(--mu); margin-right: -12px; }
.controls .seg { align-self: center; }
.spacer { margin-left: auto; }
.sec-b { position: relative; }

/* forms */
.form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.form .input { width: 320px; }
.select { font: 500 14px var(--mono); padding: 7px 10px; border: 1px solid var(--fg); background: var(--bg); color: var(--fg); min-width: 140px; cursor: pointer; }
.go { font: 600 14px var(--mono); cursor: pointer; padding: 8px 22px; border: 1px solid var(--ac); background: var(--ac); color: #fff; }
.go:hover:not(:disabled) { filter: brightness(1.1); }
.go:disabled { opacity: .45; cursor: default; }
.out { display: none; font: 500 14px/1.7 var(--mono); background: var(--pn); padding: 14px 16px; white-space: pre-wrap; word-break: break-all; margin: 0; }
.out.visible { display: block; }
.metaline { font: 500 14px var(--mono); color: var(--mu); min-height: 1em; }
.status-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--mu); }
.status-dot.running { background: var(--wn); } .status-dot.done { background: var(--ok); } .status-dot.error { background: var(--er); }

/* data tables (key/value + hop tables) */
.tbl-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font: 500 14px var(--mono); }
.data-table th { text-align: left; font: 600 12px var(--sans); padding: 8px 12px 8px 0; border-bottom: 2px solid var(--fg); white-space: nowrap; }
.data-table td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--ln); vertical-align: top; }
.data-table .dt-key { color: var(--mu); white-space: nowrap; width: 1%; }
.mtr-hop-missing td { color: var(--mu); }
.tag { font: 600 12px var(--mono); padding: 1px 5px; border: 1px solid var(--mu); color: var(--mu); }
.tag-ix { color: var(--ok); border-color: var(--ok); }
.bird-route-block { margin-bottom: 22px; }
.bird-route-prefix { font: 500 14px var(--mono); color: var(--ac); margin-bottom: 8px; }
.asn-hover { cursor: help; border-bottom: 1px dotted var(--mu); }
.asn-hover:hover { color: var(--ac); border-color: var(--ac); }

/* tooltips */
.chart-tooltip { position: absolute; z-index: 5; pointer-events: none; opacity: 0; min-width: 160px; max-width: 280px; background: var(--bg); color: var(--fg); border: 1px solid var(--fg); padding: 8px 10px; font: 500 14px var(--mono); transition: opacity .1s; }
.chart-tooltip.show { opacity: 1; }
.tt-time { color: var(--mu); margin-bottom: 4px; }
.tt-row { display: flex; align-items: center; gap: 8px; padding: 1px 0; }
.tt-row .tt-val { margin-left: auto; padding-left: 12px; font-weight: 600; text-align: right; }
.tt-key { width: 10px; height: 3px; flex: none; }

/* charts */
.chart-wrap { position: relative; }
.chart-wrap svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-empty { color: var(--mu); font: 500 14px var(--mono); padding: 28px 0; text-align: center; }
.chart-grid { stroke: var(--ln); stroke-width: 1; }
.chart-axis-label { fill: var(--mu); font: 500 12px var(--mono); }
.chart-crosshair { stroke: var(--mu); stroke-dasharray: 3 3; opacity: 0; }
.chart-marker { opacity: 0; }
.chart-hit { fill: transparent; cursor: crosshair; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 500 14px var(--mono); }
.chart-legend span { display: inline-flex; align-items: center; gap: 7px; }
.lg-swatch { width: 18px; height: 3px; display: inline-block; }
.chart-stats { display: flex; flex-wrap: wrap; gap: 6px 22px; font: 500 14px var(--mono); align-items: baseline; }
.cs-range-label { color: var(--mu); }
.cs-item { display: inline-flex; align-items: center; gap: 6px; }
.cs-dot { width: 8px; height: 8px; border-radius: 50%; }
.cs-val { font-weight: 600; }
.chart-table { display: none; width: 100%; border-collapse: collapse; font: 500 14px var(--mono); margin-top: 8px; }
.chart-table.show { display: table; }
.chart-table th, .chart-table td { text-align: left; padding: 5px 10px 5px 0; border-bottom: 1px solid var(--ln); }
.chart-table th { font-weight: 600; border-bottom: 2px solid var(--fg); }
.linkbtn { align-self: flex-start; font: 500 14px var(--mono); background: none; border: 0; padding: 0; color: var(--ac); cursor: pointer; }
.linkbtn:hover { text-decoration: underline; text-underline-offset: 3px; }

/* status rows */
.svc-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.svc { background: var(--pn); padding: 14px 16px; display: flex; align-items: center; gap: 10px; }
.svc b { font-weight: 600; }
.svc .st { margin-left: auto; font: 500 14px var(--mono); }

/* mtr */
.mtr-panes { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 32px; align-items: start; }
.mtr-list { max-height: 560px; overflow-y: auto; border-top: 2px solid var(--fg); }
.mtr-list-item { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; padding: 9px 8px; border-bottom: 1px solid var(--ln); border-left: 3px solid transparent; font-size: 13px; cursor: pointer; }
.mtr-list-item:hover { background: var(--pn); }
.mtr-list-item.active { background: var(--pn); border-left-color: var(--ac); }
.mtr-list-target { font-weight: 600; }
.mtr-list-time { color: var(--mu); font-family: var(--mono); font-size: 12px; }
.mtr-list-hops { color: var(--mu); font: 500 13px var(--mono); margin-left: auto; }
@media (max-width: 900px) { .mtr-panes { grid-template-columns: 1fr; } .mtr-list { max-height: 300px; } }

/* prose (privacy) */
.prose { max-width: 74ch; display: flex; flex-direction: column; gap: 14px; }
.prose h2 { font-size: 26px; font-weight: 600; letter-spacing: -.02em; margin-top: 28px; padding-top: 24px; border-top: 2px solid var(--fg); scroll-margin-top: 16px; }
.prose h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.prose h3 { font-size: 18px; font-weight: 600; margin-top: 8px; }
.prose ul, .prose ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; }
.prose p, .prose li { text-wrap: pretty; }
.prose hr { border: 0; border-top: 1px solid var(--ln); width: 100%; margin: 8px 0; }
.toc { display: flex; flex-wrap: wrap; gap: 6px 20px; font: 500 14px var(--mono); padding-bottom: 28px; }

/* 404 */
.err { min-height: 60vh; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 48px 0; }
.err .code { font-size: clamp(96px, 22vw, 220px); font-weight: 700; letter-spacing: -.05em; line-height: .9; color: var(--ac); }
.err .lbl { font: 500 14px var(--mono); color: var(--mu); }
.err .term { font: 500 14px/1.9 var(--mono); max-width: 70ch; margin-top: 12px; }
.err .term .tp { color: var(--ac); font-weight: 600; user-select: none; }
.err .term .t-dim { color: var(--mu); } .err .term .t-warn { color: var(--wn); }
.err .term .cur { display: inline-block; width: 9px; height: 16px; background: var(--ac); vertical-align: middle; margin-left: 2px; animation: blink 1s step-end infinite; }
.err .back { align-self: flex-start; margin-top: 16px; opacity: 0; transition: opacity .3s; }
.err .back.show { opacity: 1; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .err .term .cur { animation: none; } }
.metaline:empty, #bird-routes:empty { display: none; }