/* ========================================
   ADVANCED ASN API (asn-api.html, 2026-10-09): the product hero (css/product-hero.css) over the ASN page's section styles
   (css/asn-company.css); the card's picture is a panel — the network's place in the routing graph — not a map.
   ======================================== */
:root:not([data-json="0"]) .geo-hero-top .geo-hero-input { padding-left: 1.5rem; padding-right: 1.5rem; }
:root[data-card="8"] .geo-card-wrap .geo-card-map--panel { background: #fff; }   /* the panel is paper, not the map's blue */
:root[data-card="8"]:is([data-theme="dark"]) .geo-card-wrap .geo-card-map--panel { background: var(--bg-secondary); }
/* the card's picture (decided 2026-10-09): the routing graph, drawn per case by scripts/product-hero.py (aa_graph); no groups on this card */
:root[data-card="8"] .geo-card-wrap { --map-h: 290px; }
.aa-strip { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr; padding: 10px 24px; }
.aa-graph { width: 100%; height: 100%; }
.aa-graph text { font-family: var(--font-mono); font-size: 13px; text-anchor: middle; fill: var(--text-primary); }
.aa-graph text[text-anchor="end"] { text-anchor: end; }
.aa-graph text[text-anchor="start"] { text-anchor: start; }
.aa-graph .aa-g-lines path { fill: none; stroke: var(--border); stroke-width: 1.5; }
.aa-graph .aa-g-lines .aa-g-down { stroke-dasharray: 3 3; }
.aa-graph .aa-g-up rect { fill: var(--bg-secondary); }
.aa-graph .aa-g-up text { font-size: 12.5px; }
.aa-graph .aa-g-self rect { fill: var(--text-primary); }
.aa-graph .aa-g-self text { fill: var(--bg-primary); font-weight: 600; font-size: 17px; }
.aa-graph .aa-g-peers rect { fill: none; stroke: var(--text-primary); stroke-width: 1.2; }
.aa-graph .aa-g-label { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; fill: var(--text-muted); }
.geo-card .gs-tags { display: inline-flex; gap: .4rem; margin-left: .7rem; margin-right: auto; }
.geo-card .gs-type { display: inline-block; padding: .2rem .5rem; border-radius: 6px; background: var(--bg-secondary); font-family: var(--font-mono); font-size: .58rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-primary); }
#geo-card .geo-all-row { grid-template-columns: 7.2rem minmax(0, 1fr); }
.asn-coverage-grid--4 { grid-template-columns: repeat(4, 1fr); }
.asn-rows-intro { max-width: 60ch; margin: var(--space-md) 0 0; color: var(--text-secondary); }
@media (max-width: 1023px) { .asn-coverage-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .asn-coverage-grid--4 { grid-template-columns: 1fr; } }

/* the random-example control above the card, in the view toggle's look */
#geo-card { transition: opacity .2s; }
#geo-card.is-swapping { opacity: .55; }
.gs-samples { display: flex; gap: .9rem; align-items: baseline; margin-right: auto; font-family: var(--font-mono); }
.gs-samples button { margin: 0; padding: 0 0 .12rem; border: 0; border-bottom: 1px solid transparent; background: transparent; cursor: pointer; font: inherit; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.gs-samples button:hover { color: var(--text-primary); }
.gs-samples button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gs-samples-note { font-size: .62rem; letter-spacing: .04em; color: var(--text-muted); }

/* the example control: a counter with previous and next (decided 2026-10-09), the current case named beside it */
.rx-counter { display: inline-flex; align-items: baseline; gap: .45rem; }
.rx-counter button { padding: 0 .2rem; font-size: 1rem; line-height: 1; }
.rx-counter [data-count] { font-size: .7rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* the topology section: its header centred, its rows in the sans face with the numbers kept mono (his asks, 2026-10-15) */
.aa-topology .container > .eyebrow-bordered { display: table; margin-left: auto; margin-right: auto; }
.aa-topology h2 { text-align: center; margin: 0 auto var(--space-md); }
.aa-topology .asn-rows-intro { text-align: center; margin: 0 auto var(--space-2xl); }   /* the intro sits between the title and the rows, not on the rows' edge */
.aa-topology .asn-usecase-row h4 { font-family: var(--font-sans); font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
.aa-topology .asn-usecase-row p { font-family: var(--font-sans); font-size: 0.95rem; line-height: 1.6; }