/* ========================================
   IP REPUTATION SCORES (ip-reputation.html, 2026-10-09, from the threat page): the card's picture is the four scores as bars.
   The sections' styles come from css/threat-intelligence.css.
   ======================================== */
:root[data-card="8"] .geo-card-wrap .geo-card-map--panel { background: #fff; }
:root[data-card="8"]:is([data-theme="dark"]) .geo-card-wrap .geo-card-map--panel { background: var(--bg-secondary); }
.geo-strip--scores { position: absolute; inset: 0; display: grid; grid-template-rows: repeat(4, auto) auto; row-gap: 9px; align-content: center; padding: 12px 24px; font-family: var(--font-mono); color: var(--text-primary); }
.rs-row { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr) 2.2rem; column-gap: .75rem; align-items: center; font-size: .62rem; color: var(--text-muted); }
.rs-track { position: relative; height: 12px; background: var(--bg-secondary); }
.rs-fill { position: absolute; left: 0; top: 0; bottom: 0; min-width: 2px; background: var(--text-primary); }
.rs-fill--threat { background: #e5484d; }
.rs-row > b { text-align: right; font-size: .85rem; font-weight: 600; color: var(--text-primary); }
.rs-sub { display: flex; align-items: baseline; gap: .6rem; padding-top: 4px; font-size: .58rem; color: var(--text-muted); letter-spacing: .02em; white-space: nowrap; overflow: hidden; }
.rs-sub b { color: var(--text-primary); font-weight: 600; }
.rs-sub a { margin-left: auto; color: var(--accent); text-decoration: none; }
.rs-sub a:hover { text-decoration: underline; }

/* moved from the VPN page on 2026-10-12; the drawing keeps its #vpn-ink filter, defined before the section */
/* ========================================
   PIPELINE ARCHITECTURE SECTION
   ======================================== */
.vpn-pipeline {
  padding: var(--space-5xl) 0;
  background: var(--bg-secondary);
  position: relative;
  z-index: 1;
}

.vpn-pipeline-header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.vpn-pipeline-header h2 {
  margin-top: var(--space-lg);
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.vpn-pipeline-header p {
  margin-top: var(--space-md);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  font-size: var(--text-lg);
  color: var(--text-secondary);
}

.pipeline-diagram-wrap {
  max-width: 960px;
  margin: 0 auto;
}

.pipeline-diagram-wrap svg {
  width: 100%;
  height: auto;
  color: var(--text-primary);
  filter: url(#vpn-ink);
}
/* the pipeline drawing is shown at its own 960 units, so its labels (4 to 8 units) were 4 to 8px; now 9 to 13 */
.pipeline-diagram-wrap svg [opacity="0.03"] { opacity: 0.08; }
.pipeline-diagram-wrap svg [opacity="0.12"] { opacity: 0.3; }
.pipeline-diagram-wrap svg [opacity="0.15"] { opacity: 0.35; }
.pipeline-diagram-wrap svg [opacity="0.2"] { opacity: 0.5; }
.pipeline-diagram-wrap svg [opacity="0.25"] { opacity: 0.55; }
.pipeline-diagram-wrap svg [opacity="0.3"] { opacity: 0.6; }
.pipeline-diagram-wrap svg [opacity="0.35"] { opacity: 0.65; }
.pipeline-diagram-wrap svg [opacity="0.4"] { opacity: 0.7; }
.pipeline-diagram-wrap svg [opacity="0.45"] { opacity: 0.75; }
.pipeline-diagram-wrap svg [opacity="0.5"] { opacity: 0.8; }
.pipeline-diagram-wrap svg [opacity="0.55"] { opacity: 0.85; }
.pipeline-diagram-wrap svg [opacity="0.6"] { opacity: 0.9; }
.pipeline-diagram-wrap svg [opacity="0.65"] { opacity: 0.95; }
.pipeline-diagram-wrap svg [opacity="0.7"] { opacity: 1; }
.pipeline-diagram-wrap svg [stroke-width="0.3"] { stroke-width: 0.7; }
.pipeline-diagram-wrap svg [stroke-width="0.4"] { stroke-width: 0.9; }
.pipeline-diagram-wrap svg [stroke-width="0.5"] { stroke-width: 1; }
.pipeline-diagram-wrap svg [stroke-width="0.6"] { stroke-width: 1.1; }
.pipeline-diagram-wrap svg [stroke-width="0.7"] { stroke-width: 1.25; }
.pipeline-diagram-wrap svg [stroke-width="0.8"] { stroke-width: 1.4; }
.pipeline-diagram-wrap svg [stroke-width="1"] { stroke-width: 1.6; }
.pipeline-diagram-wrap svg [stroke-width="1.2"] { stroke-width: 1.8; }
.pipeline-diagram-wrap svg text { font-size: 11px; opacity: 1; paint-order: stroke; stroke: var(--bg-primary); stroke-width: 2.5px; stroke-linejoin: round; }
.pipeline-diagram-wrap svg g[font-size="4"] text, .pipeline-diagram-wrap svg text[font-size="4"] { font-size: 9px; }
.pipeline-diagram-wrap svg g[font-size="5"] text, .pipeline-diagram-wrap svg text[font-size="5"] { font-size: 10px; }
.pipeline-diagram-wrap svg g[font-size="6"] text, .pipeline-diagram-wrap svg text[font-size="6"] { font-size: 11px; }
.pipeline-diagram-wrap svg g[font-size="7"] text, .pipeline-diagram-wrap svg text[font-size="7"] { font-size: 12px; }
.pipeline-diagram-wrap svg g[font-size="8"] text, .pipeline-diagram-wrap svg text[font-size="8"] { font-size: 13px; }
.pipeline-diagram-wrap svg text[opacity="0.2"], .pipeline-diagram-wrap svg text[opacity="0.25"], .pipeline-diagram-wrap svg text[opacity="0.3"] { opacity: 0.75; }
.pipeline-diagram-wrap svg text[opacity="0.35"], .pipeline-diagram-wrap svg text[opacity="0.4"], .pipeline-diagram-wrap svg text[opacity="0.45"] { opacity: 0.85; }

/* ---- Phones (2026-10-15): the sub-line wraps; its "how we score" link was clipped ---- */
@media (max-width: 767px) { .rs-sub { white-space: normal; flex-wrap: wrap; overflow: visible; } }

/* the architecture band as the inset panel with corner brackets, like the accuracy and coverage bands (his ask, 2026-10-16) */
.vpn-pipeline.hud { --hud: color-mix(in srgb, var(--text-primary) 55%, transparent); --hin: 10px; margin: 12px; border-radius: 6px; padding: var(--space-5xl) 0; overflow: visible; }