/* ---- header / nav ---- */
.site-header { position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--bg) 86%,transparent); backdrop-filter:saturate(1.3) blur(12px); border-bottom:1px solid var(--line); }
.site-nav { display:flex; align-items:center; gap:var(--sp-6); height:64px; }
.brand { display:flex; align-items:center; gap:11px; font-family:var(--font-mono); font-weight:600; font-size:15px; letter-spacing:-.01em; color:var(--ink); }
.brand:hover { text-decoration:none; }
.brand .icon { color:var(--accent); width:24px; height:24px; }
.brand-mark { flex:none; }
.nav-links { display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0; }
.nav-link { display:block; color:var(--ink-2); font-size:14.5px; font-weight:500; padding:8px 12px; border-radius:8px; transition:color .15s,background .15s; }
.nav-link:hover { background:var(--surface-2); color:var(--ink); text-decoration:none; }
.nav-link.is-active { color:var(--ink); background:var(--accent-2-soft); }
.nav-spacer { flex:1; }
.brand__wm { white-space:nowrap; }
.brand__wm b { color:var(--accent); font-weight:inherit; }
.icon-btn { display:inline-grid; place-items:center; width:36px; height:36px; border:1px solid var(--hairline-strong); border-radius:var(--r-pill); background:transparent; color:var(--ink-2); cursor:pointer; }
.icon-btn:hover { border-color:var(--accent); color:var(--ink); }
/* copy feedback: flash the copied value + confirm on the button (set by rbCopy) */
@keyframes copy-flash { from { background:color-mix(in srgb,var(--accent) 30%,transparent); } to { background:transparent; } }
.copy-flash { animation:copy-flash 1s ease-out; border-radius:var(--r-sm); box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.icon-btn[data-copied] { position:relative; }
.icon-btn[data-copied="1"] { color:var(--up); border-color:color-mix(in srgb,var(--up) 45%,transparent); }
.icon-btn[data-copied="err"] { color:var(--down); border-color:color-mix(in srgb,var(--down) 45%,transparent); }
.icon-btn[data-copied]::after { content:"Copied"; position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); background:var(--ink); color:var(--bg); font-family:var(--font-mono); font-size:11px; line-height:1; padding:4px 7px; border-radius:var(--r-sm); white-space:nowrap; pointer-events:none; z-index:5; }
.icon-btn[data-copied="err"]::after { content:"Copy failed"; background:var(--down); color:#fff; }
.nav-toggle { display:none; }
.menu { position:relative; }
.menu__panel { position:absolute; right:0; top:calc(100% + 6px); min-width:180px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--elev-2); padding:6px; z-index:50; }
.menu__item { display:block; padding:8px 10px; border-radius:var(--r-sm); color:var(--ink); font-size:14px; }
.menu__item:hover { background:var(--surface-2); text-decoration:none; }
.menu__sep { height:1px; background:var(--line); margin:6px 0; }
.menu__btn { display:inline-flex; align-items:center; gap:8px; background:transparent; border:1px solid var(--hairline-strong); border-radius:var(--r-pill); color:var(--ink); font:inherit; font-size:14px; padding:6px 12px; cursor:pointer; }
.menu__btn:hover { border-color:var(--accent); }
.userchip__btn { display:inline-flex; align-items:center; gap:9px; background:transparent; border:1px solid var(--hairline-strong); border-radius:var(--r-pill); color:var(--ink); font:inherit; padding:5px 12px 5px 6px; cursor:pointer; }
.userchip__btn:hover { border-color:var(--accent); }
.userchip__av { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,var(--accent-2),var(--accent)); color:#fff; font-family:var(--font-display); font-weight:800; font-size:11px; flex:none; }
.userchip__asn { font-family:var(--font-mono); font-size:12.5px; color:var(--ink); }
.nav-drawer { display:contents; }
@media (max-width:820px){
  .nav-toggle { display:inline-grid; margin-left:auto; }
  .nav-drawer { display:none; position:absolute; left:0; right:0; top:64px; background:var(--surface); border-bottom:1px solid var(--line); box-shadow:var(--elev-2); flex-direction:column; padding:var(--sp-3); gap:2px; }
  .nav-drawer.is-open { display:flex; }
  .nav-links { flex-direction:column; align-items:stretch; }
  .nav-spacer { display:none; }
  .userchip__asn { display:none; }
}
/* ---- footer ---- */
.site-footer { border-top:1px solid var(--line); margin-top:var(--sp-12); }
.site-footer__inner { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; padding:var(--sp-5) var(--sp-6); font-size:13px; color:var(--ink-3); }
.site-footer__links { display:flex; gap:var(--sp-4); }
.site-footer__links a { color:var(--ink-3); }
.site-footer__links a:hover { color:var(--ink); }
/* ---- buttons ---- */
.btn { display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-family:var(--font-sans); font-size:14px; font-weight:600; line-height:1; padding:9px 16px; border-radius:var(--r-md); border:1px solid transparent; text-decoration:none; }
.btn:hover { text-decoration:none; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-h); }
.btn-ghost { background:transparent; color:var(--ink); border-color:var(--hairline-strong); }
.btn-ghost:hover { border-color:var(--ink-3); }
.btn-danger { background:transparent; color:var(--down); border-color:color-mix(in srgb,var(--down) 40%,transparent); }
.btn-danger:hover { background:var(--down-wash); border-color:var(--down); }
.btn-sm { padding:6px 11px; font-size:13px; }
.btn .icon { width:16px; height:16px; }
/* ---- cards ---- */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--elev-1); }
.card-pad { padding:var(--sp-5); }
.card-head { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--line); }
.card-head h3 { font-family:var(--font-display); font-size:15px; font-weight:800; }
.card-head .meta { margin-left:auto; font-size:12px; color:var(--ink-3); font-family:var(--font-mono); }
/* ---- pills & badges ---- */
.pill { display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:12px; font-weight:600; padding:4px 11px 4px 9px; border-radius:var(--r-pill); border:1px solid transparent; white-space:nowrap; }
.pill .dot { width:7px; height:7px; border-radius:50%; flex:none; }
.pill--up { color:var(--up); background:var(--up-wash); border-color:color-mix(in srgb,var(--up) 28%,transparent); }
.pill--up .dot { background:var(--up); box-shadow:0 0 0 3px color-mix(in srgb,var(--up) 22%,transparent); }
.pill--degraded { color:var(--degraded); background:var(--degraded-wash); border-color:color-mix(in srgb,var(--degraded) 32%,transparent); }
.pill--degraded .dot { background:var(--degraded); }
.pill--down { color:var(--down); background:var(--down-wash); border-color:color-mix(in srgb,var(--down) 32%,transparent); }
.pill--down .dot { background:var(--down); }
.pill--unknown { color:var(--ink-3); background:var(--surface-2); border-color:var(--line); }
.pill--unknown .dot { background:var(--ink-3); }
.badge { display:inline-flex; align-items:center; font-family:var(--font-mono); font-size:11px; font-weight:600; padding:2px 8px; border-radius:var(--r-sm); border:1px solid var(--line); background:transparent; color:var(--ink-2); }
.gate { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-3); border:1px solid var(--hairline-strong); border-radius:var(--r-sm); padding:2px 8px; }
.gate--auth { color:var(--ink-2); }
.gate--admin { color:var(--accent-2); border-color:color-mix(in srgb,var(--accent-2) 40%,transparent); background:var(--accent-2-soft); }
/* ---- stat tiles ---- */
.tile__label { font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); display:flex; align-items:center; gap:8px; }
.tile__value { font-family:var(--font-display); font-size:30px; font-weight:800; letter-spacing:-.025em; line-height:1.05; margin:8px 0 3px; font-variant-numeric:tabular-nums; }
.tile__unit { font-family:var(--font-mono); font-size:14px; color:var(--ink-3); font-weight:600; margin-left:3px; }
.tile__delta { font-size:12px; color:var(--ink-3); }
.tile__delta.good { color:var(--up); } .tile__delta.bad { color:var(--down); }
.tile__value--sm { font-size:20px; margin:7px 0 0; }
.tile__value--up { color:var(--up); }
.tile__value--warn { color:var(--warn); }
.tile { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 18px; }
.tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:var(--sp-5); }

.live-indicator { display:flex; align-items:center; gap:7px; }
.live-indicator .live-dot { width:6px; height:6px; border-radius:50%; background:var(--up); box-shadow:0 0 0 3px color-mix(in srgb,var(--up) 22%,transparent); animation:node-pulse 2.4s infinite; flex:none; }
@media (prefers-reduced-motion:reduce){
  .live-indicator .live-dot { animation:none; }
}
@media (max-width:820px) { .tiles { grid-template-columns:repeat(2,1fr); } }

/* ---- peering status page ---- */
.crumbs { font-family:var(--font-mono); font-size:12px; color:var(--ink-3); margin-bottom:var(--sp-3); }
.crumbs a:hover { color:var(--ink-2); }
.crumbs .sep { opacity:.6; }
.status-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-3); }
.status-head__title { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.status-head__sub { font-size:13px; margin-top:8px; }
.status-head__actions { display:flex; gap:9px; }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5); align-items:start; margin-top:var(--sp-2); }
.detail-col { display:grid; gap:var(--sp-5); }
@media (max-width:820px) { .detail-grid { grid-template-columns:1fr; } }
#peering-tiles { grid-template-columns:repeat(6,1fr); }
@media (max-width:1200px) { #peering-tiles { grid-template-columns:repeat(3,1fr); } }
@media (max-width:820px) { #peering-tiles { grid-template-columns:repeat(2,1fr); } }
.output-head { display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; margin:var(--sp-6) 0 var(--sp-3); }
.section-label { font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-2); }
.section-note { font-size:12.5px; color:var(--ink-3); max-width:62ch; margin:0; }
/* ---- tables ---- */
.table { width:100%; border-collapse:collapse; font-size:14px; }
.table th { text-align:left; font-family:var(--font-sans); font-weight:600; font-size:12px; color:var(--ink-3); padding:11px var(--sp-4); border-bottom:1px solid var(--line); }
.table td { padding:12px var(--sp-4); border-bottom:1px solid var(--line); }
.table tr:last-child td { border-bottom:0; }
.table td.num,.table th.num { text-align:right; font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.table .host { font-family:var(--font-mono); font-weight:600; }
/* ---- forms ---- */
.field { margin-bottom:var(--sp-4); }
.field__label { display:block; font-size:13px; font-weight:600; color:var(--ink-2); margin-bottom:7px; }
.field input:not([type=checkbox]):not([type=radio]), .field select, .field textarea {
  width:100%; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-md);
  padding:10px 12px; color:var(--ink); font-family:var(--font-mono); font-size:14px;
}
.field input:not([type=checkbox]):not([type=radio]):hover, .field select:hover, .field textarea:hover { border-color:var(--ink-3); }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--accent-2); box-shadow:0 0 0 3px var(--accent-2-soft); }
.field input:disabled, .field select:disabled, .field textarea:disabled { color:var(--ink-2); cursor:not-allowed; background:color-mix(in srgb,var(--surface-2) 60%,var(--bg)); }
.field--checkbox { display:flex; align-items:flex-start; gap:10px; }
.field--checkbox input { width:16px; height:16px; margin-top:3px; accent-color:var(--accent-2); }
.field--checkbox .field__label { margin:0; font-weight:500; color:var(--ink); }
.field__help { font-size:12px; color:var(--ink-3); margin-top:6px; }
.req { color:var(--accent); margin-left:2px; }
.errorlist { list-style:none; margin:6px 0 0; padding:0; color:var(--down); font-size:12.5px; }
.errorlist.nonfield { margin:0 0 var(--sp-4); padding:10px 12px; border:1px solid color-mix(in srgb,var(--down) 40%,transparent); background:var(--down-wash); border-radius:var(--r-md); }
.field--invalid input, .field--invalid select, .field--invalid textarea { border-color:var(--down); }
/* ---- alerts / messages ---- */
.messages { display:grid; gap:var(--sp-3); margin:var(--sp-5) 0; }
.alert { display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:var(--r-md); border:1px solid var(--hairline-strong); background:var(--surface-2); font-size:14px; color:var(--ink); }
.alert .icon { width:18px; height:18px; flex:none; margin-top:1px; }
.alert--info { border-color:color-mix(in srgb,var(--accent-2) 30%,transparent); }
.alert--info .icon { color:var(--accent-2); }
.alert--success { border-color:color-mix(in srgb,var(--up) 34%,transparent); } .alert--success .icon { color:var(--up); }
.alert--warning { border-color:color-mix(in srgb,var(--degraded) 34%,transparent); } .alert--warning .icon { color:var(--degraded); }
.alert--error { border-color:color-mix(in srgb,var(--down) 40%,transparent); } .alert--error .icon { color:var(--down); }
/* ---- pagination ---- */
.pagination { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; list-style:none; padding:0; margin:var(--sp-6) 0 0; }
.pagination a,.pagination span { display:inline-grid; place-items:center; min-width:34px; height:34px; padding:0 10px; border:1px solid var(--hairline-strong); border-radius:var(--r-sm); color:var(--ink-2); font-size:13px; }
.pagination a:hover { border-color:var(--accent); text-decoration:none; }
.pagination .is-active { background:var(--accent); color:#fff; border-color:var(--accent); }
.pagination .is-disabled { opacity:.4; }
.pagination .pagination__gap { border-color:transparent; color:var(--ink-3); padding:0 4px; min-width:auto; }
/* in-place session panel: dim briefly while the next page/search loads */
#sessions-panel { transition:opacity .12s ease; }
#sessions-panel.is-loading { opacity:.55; pointer-events:none; }
/* ---- meters ---- */
.meter { display:grid; grid-template-columns:96px 1fr 52px; gap:12px; align-items:center; padding:8px 0; }
.meter__k { font-size:13px; color:var(--ink-2); }
.meter__v { font-family:var(--font-mono); font-size:12.5px; color:var(--ink); text-align:right; font-variant-numeric:tabular-nums; }
.meter__track { height:7px; border-radius:var(--r-pill); background:var(--surface-3); overflow:hidden; }
.meter__fill { height:100%; border-radius:var(--r-pill); background:var(--accent-2); }
/* ---- accordion (native details) ---- */
.accordion { border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.accordion + .accordion { margin-top:var(--sp-3); }
.accordion > summary { cursor:pointer; list-style:none; padding:12px 16px; display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:13px; color:var(--ink); }
.accordion > summary::-webkit-details-marker { display:none; }
.accordion > summary .chev { margin-left:auto; transition:transform .15s ease; color:var(--ink-3); }
.accordion[open] > summary .chev { transform:rotate(90deg); }
.accordion__body { padding:14px 16px; border-top:1px solid var(--line); }
.accordion__body pre { margin:0; overflow-x:auto; font-family:var(--font-mono); font-size:12.5px; line-height:1.6; color:var(--ink-2); background:var(--surface-2); padding:12px; border-radius:var(--r-sm); }
/* ---- skeleton shimmer (async metric loading) ----
   Applied by JS to a metric slot while its value/chart is still being fetched
   or awaited from a socket. Uses an animated background-position gradient
   rather than a ::after overlay so it works on inline <svg> too (pseudo-
   elements don't render on replaced/SVG elements). Any real child content is
   hidden while the class is present, then the class is removed once data lands.
   A hard failure/outage removes the skeleton and falls to the honest
   "Awaiting live data" empty state — loading and down never look alike. */
.rb-skel { position:relative; color:transparent !important; border-radius:var(--r-sm);
  background-image:linear-gradient(90deg, var(--surface-2) 25%, color-mix(in srgb,var(--ink) 8%, var(--surface-2)) 37%, var(--surface-2) 63%);
  background-size:400% 100%; animation:rb-shimmer 1.4s ease infinite; }
.rb-skel > * { visibility:hidden; }
.rb-skel-text { display:inline-block; min-width:3.5em; min-height:1em; vertical-align:middle; }
.rb-skel-chart { display:block; width:100%; min-height:120px; }
@keyframes rb-shimmer { 0% { background-position:100% 0; } 100% { background-position:0 0; } }
@media (prefers-reduced-motion: reduce) { .rb-skel { animation:none; } }
/* ---- spinner overlay ---- */
.spinner-overlay { position:fixed; inset:0; z-index:1000; display:none; place-items:center; background:color-mix(in srgb,var(--bg) 70%,transparent); backdrop-filter:blur(2px); }
.spinner-overlay.is-active { display:grid; }
.spinner { width:38px; height:38px; border-radius:50%; border:3px solid var(--hairline-strong); border-top-color:var(--accent); animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
/* ---- map & charts ---- */
.map { width:100%; aspect-ratio:16/9; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.map svg { display:block; width:100%; height:100%; }
.chart-card canvas { display:block; width:100%; }
.chart-legend { display:flex; flex-wrap:wrap; gap:var(--sp-4); margin-top:var(--sp-3); }
.chart-legend .key { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-2); }
.chart-legend .key .ln { width:15px; height:3px; border-radius:2px; }
/* ---- icons ---- */
.icon { width:1em; height:1em; display:inline-block; vertical-align:-.125em; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
/* ---- hero (home) ---- */
.hero { padding:var(--sp-16) 0 var(--sp-10); max-width:46rem; }
.hero .eyebrow { display:inline-flex; align-items:center; gap:10px; margin-bottom:var(--sp-3); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.18em; color:var(--accent-2); }
.hero h1 { font-size:clamp(34px,5.2vw,52px); line-height:1.04; letter-spacing:-.025em; margin-bottom:var(--sp-5); }
.hero h1 em { font-style:normal; color:var(--accent); }
.hero .lead { font-size:18px; line-height:1.6; color:var(--ink-2); max-width:56ch; }
/* ---- section header (eyebrow + display-font title) ---- */
.section-head { margin:0 0 var(--sp-5); }
.section-head .eyebrow { display:flex; align-items:center; gap:10px; margin-bottom:6px; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.18em; color:var(--accent-2); }
.section-head h1, .section-head h2 { letter-spacing:-.02em; }
.section-head p { color:var(--ink-2); margin:8px 0 0; max-width:60ch; }
/* ---- "network at a glance" ribbon ---- */
.ribbon { border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--elev-1); overflow:hidden; }
.ribbon__top { display:flex; align-items:center; gap:9px; padding:11px var(--sp-5); border-bottom:1px solid var(--line); font-size:13px; color:var(--ink-2); }
.ribbon__top strong { color:var(--ink); font-weight:600; }
.ribbon__grid { display:grid; grid-template-columns:repeat(4,1fr); }
.ribbon__cell { padding:var(--sp-5); border-right:1px solid var(--line); }
.ribbon__cell:last-child { border-right:0; }
.ribbon__label { font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:9px; }
.ribbon__value { font-family:var(--font-display); font-size:32px; font-weight:800; letter-spacing:-.03em; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; }
.ribbon__value .u { font-family:var(--font-mono); font-size:14px; color:var(--ink-3); font-weight:600; margin-left:4px; letter-spacing:0; }
.ribbon__sub { font-size:12px; color:var(--ink-3); margin-top:9px; font-family:var(--font-mono); }
@media (max-width:640px){
  .ribbon__grid { grid-template-columns:repeat(2,1fr); }
  .ribbon__cell:nth-child(2n){ border-right:0; }
  .ribbon__cell:not(:nth-last-child(-n+2)){ border-bottom:1px solid var(--line); }
}

/* ---- nodes ---- */
.pagehead { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-6); flex-wrap:wrap; }
.pagehead .eyebrow { display:flex; align-items:center; gap:10px; margin-bottom:12px; font-family:var(--font-mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-2); }
.pagehead .eyebrow .dot { width:7px; height:7px; border-radius:50%; background:var(--up); box-shadow:0 0 0 4px color-mix(in srgb,var(--up) 22%,transparent); animation:node-pulse 2.4s infinite; }
@keyframes node-pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }
@media (prefers-reduced-motion:reduce){
  .pagehead .eyebrow .dot { animation:none; }
}
.pagehead h1 { font-size:clamp(30px,4.5vw,44px); }
.pagehead .summary { color:var(--ink-2); font-family:var(--font-mono); font-size:14px; margin-top:10px; font-feature-settings:"tnum" 1; }
.pagehead .summary b { color:var(--ink); font-weight:600; }
.pagehead .head-actions { display:flex; gap:10px; align-items:center; }

/* filter row */
.filterbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:var(--sp-8) 0 var(--sp-2); padding-bottom:var(--sp-5); border-bottom:1px solid var(--line); }
.filterbar .flabel { font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-right:6px; }
.fchip { font-family:var(--font-mono); font-size:12.5px; padding:6px 13px; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--surface); color:var(--ink-2); cursor:pointer; transition:.15s; }
.fchip:hover { border-color:var(--ink-3); color:var(--ink); }
.fchip[aria-pressed="true"] { background:var(--accent-2-soft); border-color:color-mix(in srgb,var(--accent-2) 40%,var(--line)); color:var(--ink); }
.fchip .n { color:var(--ink-3); margin-left:6px; }

/* region sections */
.region { margin-top:var(--sp-10); }
.region:first-of-type { margin-top:var(--sp-8); }
.region-head { display:flex; align-items:baseline; gap:var(--sp-3); margin-bottom:var(--sp-4); }
.region-head h2 { font-size:21px; }
.region-head .count { font-family:var(--font-mono); font-size:12px; color:var(--ink-3); letter-spacing:.04em; }
.region-head .rule { flex:1; height:1px; background:var(--line); align-self:center; }

.node-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); }

/* node card */
.node { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px 18px 15px; box-shadow:var(--elev-1); display:flex; flex-direction:column; gap:13px; }
.node-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.node-loc { display:flex; align-items:center; gap:9px; }
.node-loc .flag { font-size:20px; line-height:1; }
.node-host { font-family:var(--font-mono); font-weight:600; font-size:20px; letter-spacing:-.01em; line-height:1.1; }
.node-city { font-size:12.5px; color:var(--ink-3); margin-top:5px; padding-left:29px; }

.node-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.peers { font-family:var(--font-mono); font-size:12.5px; color:var(--ink-2); font-feature-settings:"tnum" 1; }
.peers b { color:var(--ink); font-weight:600; font-size:14px; }
.node-chips { display:flex; gap:6px; flex-wrap:wrap; margin-left:auto; }
.chip { font-family:var(--font-mono); font-size:10.5px; padding:2px 8px; border-radius:6px; border:1px solid var(--line); color:var(--ink-2); white-space:nowrap; }
.chip--open { color:var(--accent-2); border-color:color-mix(in srgb,var(--accent-2) 40%,var(--line)); background:var(--accent-2-soft); }
.chip--paused { color:var(--warn); border-color:color-mix(in srgb,var(--warn) 40%,var(--line)); background:color-mix(in srgb,var(--warn) 10%,transparent); }

.node-dl { display:grid; grid-template-columns:auto 1fr; gap:0; border-top:1px solid var(--line); padding-top:2px; }
.node-dl dt { font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); padding:8px 12px 8px 0; align-self:center; }
.node-dl dd { margin:0; text-align:right; font-family:var(--font-mono); font-size:12.5px; color:var(--ink); padding:8px 0; word-break:break-all; }

.node-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid var(--line); padding-top:12px; margin-top:1px; }
.node-id { font-family:var(--font-mono); font-size:11px; color:var(--ink-3); }
.speedtest { font-family:var(--font-mono); font-size:11.5px; color:var(--ink-2); border:1px solid var(--line); border-radius:var(--r-md); padding:5px 10px; display:inline-flex; align-items:center; gap:6px; transition:.15s; }
.speedtest:hover { border-color:var(--ink-3); color:var(--ink); }
.speedtest .icon { width:12px; height:12px; flex:none; }
.dn42tag { font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); border-left:1px solid var(--line); padding-left:7px; margin-left:3px; }

@media (max-width:900px){
  .node-grid { grid-template-columns:1fr; }
}

/* ---- dashboard ---- */
.app-head { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-6); }
.app-head h1 { margin-bottom:4px; }
.app-head__actions { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.app-grid { display:grid; grid-template-columns:1.62fr 1fr; gap:var(--sp-5); align-items:start; }
.app-grid .col { display:grid; gap:var(--sp-5); }
@media (max-width:900px){
  .app-grid { grid-template-columns:1fr; }
}

.table-toolbar { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); margin-bottom:var(--sp-4); flex-wrap:wrap; }
.table-toolbar .search { display:flex; align-items:center; gap:8px; }
.table-toolbar .search input { border:1px solid var(--line); border-radius:var(--r-md); padding:7px 11px; background:var(--surface); color:var(--ink); font-family:inherit; font-size:13.5px; min-width:200px; }
.table-toolbar .search input:focus { outline:none; border-color:var(--ink-3); }
.toolbar-count { font-size:12px; color:var(--ink-3); white-space:nowrap; }

.table.sessions th { font-family:var(--font-mono); letter-spacing:.06em; text-transform:uppercase; font-size:10.5px; }
.table.sessions td.host { color:var(--ink-2); }

.chip--active { color:var(--up); border-color:color-mix(in srgb,var(--up) 40%,var(--line)); background:color-mix(in srgb,var(--up) 10%,transparent); }
.chip--attention { color:var(--warn); border-color:color-mix(in srgb,var(--warn) 40%,var(--line)); background:color-mix(in srgb,var(--warn) 10%,transparent); }
.chip--disabled { color:var(--ink-3); border-color:var(--line); background:var(--surface-2); }

.state-rows { display:grid; gap:var(--sp-4); margin-top:4px; }
.state-row { display:grid; grid-template-columns:auto 1fr auto; gap:var(--sp-3); align-items:center; }
.state-row .lab { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2); min-width:120px; }
.state-row .lab .sw { width:10px; height:10px; border-radius:3px; flex:none; }
.state-row .bar { height:8px; border-radius:var(--r-pill); background:var(--surface-2); overflow:hidden; }
.state-row .bar i { display:block; height:100%; border-radius:var(--r-pill); }
.state-row .val { font-family:var(--font-mono); font-weight:600; font-size:13px; min-width:34px; text-align:right; }

/* ---- overview / dashboard: state pills, tiles, chart ---- */
.card-head--plain { padding:0; border-bottom:0; margin-bottom:var(--sp-4); }

.table.sessions td .name-link { font-family:var(--font-mono); font-weight:600; color:var(--ink); }
.table.sessions td .name-link:hover { color:var(--accent); text-decoration:none; }
.table.sessions td .sub2 { color:var(--ink-3); font-size:11px; }

.search-btn { display:inline-flex; align-items:center; justify-content:center; background:transparent; border:0; color:var(--ink-3); cursor:pointer; padding:0; flex:none; }
.search-btn:hover { color:var(--ink); }

.state { display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:6px; white-space:nowrap; }
.state .dot { width:6px; height:6px; border-radius:50%; flex:none; }
.state.est { color:var(--up); background:var(--up-wash); }
.state.est .dot { background:var(--up); }
.state.con { color:var(--warn); background:var(--degraded-wash); }
.state.con .dot { background:var(--warn); }
.state.idle { color:var(--down); background:var(--down-wash); }
.state.idle .dot { background:var(--down); }

.chart { width:100%; display:block; overflow:visible; }

.tile-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5); }
.tile-row .tile { display:flex; flex-direction:column; }
.tile-row .t-k { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.tile-row .t-v { font-family:var(--font-display); font-weight:800; font-size:28px; letter-spacing:-.02em; margin-top:5px; font-feature-settings:"tnum" 1; }
.spark { display:block; width:100%; height:38px; margin-top:10px; overflow:visible; }
@media (max-width:600px) { .tile-row { grid-template-columns:1fr; } }

/* ---- request-a-peering ---- */
.phead { margin-bottom:var(--sp-6); }
.phead h1 { margin-bottom:8px; }
.phead .muted { max-width:70ch; }

.form-grid { display:grid; grid-template-columns:1fr 350px; gap:var(--sp-5); align-items:start; }
.form-grid .col { display:grid; gap:var(--sp-5); }
@media (max-width:900px) {
  .form-grid { grid-template-columns:1fr; }
}

.step-card { padding:var(--sp-6); }
.step-head { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); margin-bottom:6px; }
.step-head h3 { font-size:15px; font-weight:800; display:flex; align-items:center; gap:10px; }
.step-head .sub { font-family:var(--font-mono); font-size:11px; color:var(--ink-3); white-space:nowrap; }
.step-card .step { width:22px; height:22px; border-radius:var(--r-sm); background:var(--accent-2-soft); color:var(--accent-2); display:grid; place-items:center; font-family:var(--font-mono); font-size:11px; font-weight:600; flex:none; }
.step-card .card-note { color:var(--ink-3); font-size:12.5px; margin:0 0 var(--sp-4); max-width:64ch; }

.two-up, .wg-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); margin-top:var(--sp-4); }
.wg-row { grid-template-columns:150px 1fr; }
.two-up .field, .wg-row .field { margin-bottom:0; }
@media (max-width:600px) {
  .two-up, .wg-row { grid-template-columns:1fr; }
}

.locknote { display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:10.5px; color:var(--ink-3); margin:0 0 var(--sp-4); }

.lockrow { display:flex; align-items:center; gap:8px; }
.lockrow input { flex:1; min-width:0; }
.lockrow .locknote { margin:0; flex:none; white-space:nowrap; }

.opts { display:grid; gap:10px; margin-top:2px; }
.opts .field--checkbox { margin-bottom:0; border:1px solid var(--line); border-radius:var(--r-md); padding:13px 14px; background:var(--surface-2); transition:.15s; }
.opts .field--checkbox:hover { border-color:var(--ink-3); }
.opts .field--checkbox:has(input:checked) { border-color:color-mix(in srgb,var(--accent-2) 45%,var(--line)); background:var(--accent-2-soft); }
/* Custom checkbox "box" control: appearance:none turns the native input
   itself into the box, so it stays a real, focusable, clickable checkbox
   (no extra markup needed) while getting an animated checkmark. The
   checkmark is drawn with stroke="currentColor" so `color` (set only in
   the :checked state) picks the right contrast per theme. */
.opts .field--checkbox input[type=checkbox] {
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  width:20px; height:20px; margin-top:1px; flex:none;
  border-radius:6px; border:1.6px solid var(--ink-3); background-color:var(--surface);
  background-repeat:no-repeat; background-position:center; background-size:0 0;
  cursor:pointer; transition:background-color .15s,border-color .15s,background-size .15s ease;
}
.opts .field--checkbox input[type=checkbox]:hover { border-color:var(--ink-2); }
.opts .field--checkbox input[type=checkbox]:checked {
  background-color:var(--accent-2); border-color:var(--accent-2); color:var(--surface);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  background-size:13px 13px;
}
.opts .field--checkbox input[type=checkbox]:focus-visible { outline:2px solid var(--accent-2); outline-offset:2px; }
.opts .field--checkbox .field__label { font-family:var(--font-mono); font-weight:600; font-size:13.5px; color:var(--ink); margin-bottom:0; }
.opts .field--checkbox .field__help { margin-top:3px; }

.notebox { display:flex; gap:10px; align-items:flex-start; margin-top:var(--sp-4); padding:12px 14px; border-radius:var(--r-md); border:1px dashed var(--line); background:var(--surface-2); font-size:12.5px; color:var(--ink-2); }
.notebox b { color:var(--ink); }
.notebox .ic { color:var(--accent-2); flex:none; margin-top:1px; }
.notebox .chip { color:var(--accent-2); border-color:color-mix(in srgb,var(--accent-2) 40%,var(--line)); background:var(--accent-2-soft); }

.formactions { display:flex; gap:10px; justify-content:flex-end; margin-top:4px; }

/* ---- request-a-peering: sidebar ---- */
.side { position:sticky; top:calc(60px + var(--sp-5)); display:grid; gap:var(--sp-4); }
.side-card .step-head { margin-bottom:var(--sp-3); }
.side-card .step-head h3 { font-size:13px; }
.side-card--muted { background:var(--surface-2); }

.node-title { display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:800; font-size:16px; letter-spacing:-.01em; margin-bottom:12px; }
.node-title .flag { font-size:16px; }

.dl { display:grid; grid-template-columns:auto 1fr; gap:0; }
.dl dt { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); padding:9px 0; border-bottom:1px solid var(--line); }
.dl dd { margin:0; text-align:right; font-family:var(--font-mono); font-size:12.5px; color:var(--ink); padding:9px 0; border-bottom:1px solid var(--line); word-break:break-all; }
.dl dt:last-of-type, .dl dd:last-of-type { border-bottom:0; }

.gen-rows { display:grid; gap:9px; margin-top:var(--sp-3); }
.gen-row { display:flex; align-items:center; justify-content:space-between; gap:10px; font-family:var(--font-mono); font-size:11.5px; padding:9px 11px; border-radius:var(--r-md); background:var(--surface); border:1px dashed var(--line); color:var(--ink-3); }
.gen-row b { color:var(--ink-2); font-weight:600; }
.gen-row .pend { color:var(--warn); }

.side-title { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:2px; }
.steps { list-style:none; margin:var(--sp-3) 0 0; padding:0; display:grid; gap:11px; counter-reset:s; }
.steps li { position:relative; padding-left:30px; font-size:12.5px; color:var(--ink-2); counter-increment:s; }
.steps li::before { content:counter(s); position:absolute; left:0; top:-1px; width:20px; height:20px; border-radius:50%; background:var(--accent-2-soft); color:var(--accent-2); font-family:var(--font-mono); font-size:11px; font-weight:600; display:grid; place-items:center; }
.steps li b { color:var(--ink); }

/* ---- Looking Glass ---- */
.lg-card { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 18px 40px -34px rgba(20,40,50,.4); }
.lg-bar { display:grid; grid-template-columns:minmax(220px,max-content) 1fr auto; gap:16px; align-items:end; }
.lg-field { display:flex; flex-direction:column; gap:7px; min-width:0; }
.lg-field > label { font-family:var(--font-mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); }
.lg-select, .lg-input { font-family:var(--font-mono); font-size:13.5px; color:var(--ink);
  background:var(--surface-2); border:1px solid var(--line); border-radius:9px; padding:10px 12px; width:100%; height:42px; }
.lg-select:focus, .lg-input:focus { outline:none; border-color:var(--accent-2); box-shadow:0 0 0 3px var(--accent-2-soft); }
.lg-select:disabled { opacity:.6; cursor:not-allowed; }
.lg-run { position:relative; display:flex; flex-direction:column; align-items:flex-end; }
.lg-run .btn-primary { height:42px; }
.lg-run .btn-primary:disabled { opacity:.55; cursor:not-allowed; }
/* The Run button is the only in-flow item so the grid's align-items:end lines it
   up with the input fields; the note floats just below it, out of that layout. */
.lg-note { position:absolute; top:calc(100% + 7px); right:0; white-space:nowrap; font-family:var(--font-mono); font-size:11px; color:var(--ink-3); display:flex; align-items:center; gap:6px; }
.lg-lock { color:var(--accent-2); }
.lg-type { margin-top:16px; }
.lg-type__label { font-family:var(--font-mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:7px; }
.lg-seg { display:inline-flex; border:1px solid var(--line); border-radius:9px; background:var(--surface-2); padding:3px; gap:2px; height:42px; }
.lg-seg button { font-family:var(--font-mono); font-size:12.5px; padding:0 13px; border:0; background:transparent; color:var(--ink-2); border-radius:6px; cursor:pointer; white-space:nowrap; transition:.12s; }
.lg-seg button:hover:not([disabled]) { color:var(--ink); }
.lg-seg .active { background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.12); }
.lg-seg button[disabled] { opacity:.5; cursor:not-allowed; }
.lg-type__hint { font-family:var(--font-mono); font-size:11px; color:var(--ink-3); margin:8px 2px 0; }
@media (max-width:900px) { .lg-seg { width:100%; overflow-x:auto; } }
.lg-chips { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin:16px 2px 0; }
.lg-chips__lab { font-family:var(--font-mono); font-size:11px; color:var(--ink-3); letter-spacing:.04em; }
.lg-chip { font-family:var(--font-mono); font-size:12px; padding:5px 11px; border-radius:999px; border:1px solid var(--line);
  color:var(--ink-2); background:var(--surface); cursor:pointer; transition:.12s; }
.lg-chip:hover { color:var(--ink); border-color:var(--accent-2); background:var(--accent-2-soft); }

.lg-output-head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:30px 0 12px; }
.lg-section-label { font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-2); }
.lg-section-note { font-size:12.5px; color:var(--ink-3); max-width:62ch; }

.lg-term { background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.lg-term__head { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:13px 18px; font-family:var(--font-mono); font-size:13px; color:var(--ink); }
.lg-term__q { color:var(--ink-3); }
.lg-term__q b { color:var(--ink); font-weight:600; }
.lg-term__sep { color:var(--line); }
.lg-term__meta { margin-left:auto; display:flex; align-items:center; gap:12px; }
.lg-term__fetched { font-size:11px; color:var(--ink-3); }
.lg-term__refresh { font-family:var(--font-mono); font-size:11.5px; padding:6px 12px; border-radius:7px; border:1px solid var(--line);
  background:var(--plane); color:var(--ink); cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.lg-term__refresh:hover:not([disabled]) { border-color:var(--ink-3); }
.lg-term__refresh[disabled] { opacity:.55; cursor:not-allowed; }
.lg-term__body { border-top:1px solid var(--line); background:var(--plane); }
.lg-term__body pre { font-family:var(--font-mono); margin:0; padding:16px 18px; overflow-x:auto; font-size:12.5px; line-height:1.65;
  color:var(--ink-2); min-height:64px; white-space:pre-wrap; word-break:break-word; }
.lg-term__body pre.is-error { color:var(--down); }
@media (max-width:900px) { .lg-bar { grid-template-columns:1fr; } .lg-run { align-items:stretch; } .lg-run .btn-primary { justify-content:center; } .lg-note { position:static; margin-top:7px; justify-content:center; } }