/* ASN Lookup (/tools/asn/): form, owner summary, address placement bars,
   neighbour graph (inline SVG themed through tokens), prefix stats and
   length histograms. Every status colour comes with an icon and a word. */

.asn-label { display: block; font-weight: 600; margin-bottom: 8px; }
.asn-form-row { display: flex; gap: 12px; }
.asn-form-row input, .asn-prefix-list input { flex: 1; min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--txt); font: inherit; box-sizing: border-box; }
.asn-form-row button { white-space: nowrap; }
.asn-form-row button:disabled { opacity: .65; cursor: wait; }
.asn-form-help { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 0; color: var(--txt-3); font-size: var(--text-small); }
.asn-example { padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface2); color: var(--primary-ink); font: inherit; font-family: var(--font-mono); font-size: var(--text-small); cursor: pointer; }
.asn-example:hover { border-color: var(--primary); }
.asn-example:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.asn-message { margin: 20px 0 8px; line-height: 1.6; }
.asn-message:empty { display: none; }
.asn-results { display: grid; gap: 40px; margin: 8px 0 48px; }
.asn-results[hidden] { display: none; }
.asn-results:focus { outline: none; }
.asn-results > * { min-width: 0; }
.asn-results a { color: var(--primary-ink); }

.asn-muted { color: var(--txt-3); }
.asn-kicker { margin: 0 0 6px; font-size: var(--text-caption); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--primary-ink); }
.asn-source { margin: 0; color: var(--txt-3); font-size: var(--text-small); line-height: 1.6; }
.asn-note { margin: 12px 0 0; line-height: 1.6; color: var(--txt-2); }

/* Summary: the route sentence, then the owner card. */
.asn-summary { display: grid; gap: 20px; }
.asn-lead { margin: 0; font-size: var(--text-lead, 1.15rem); line-height: 1.55; overflow-wrap: anywhere; }
.asn-lead code, .asn-facts code { font-family: var(--font-mono); font-size: .92em; overflow-wrap: anywhere; }
.asn-owner { padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.asn-owner-title { margin: 0 0 16px; font-size: clamp(1.35rem, 3vw, 1.75rem); line-height: 1.25; overflow-wrap: anywhere; }
.asn-owner-number { font-family: var(--font-mono); color: var(--primary-ink); }
.asn-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 24px; margin: 0; }
.asn-fact { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-top: 1px solid var(--border); min-width: 0; }
.asn-fact dt { font-size: var(--text-caption); font-weight: 600; color: var(--txt-3); }
.asn-fact dd { margin: 0; font-weight: 600; color: var(--txt); overflow-wrap: anywhere; }
.asn-fact-help { display: block; margin-top: 6px; font-weight: 400; font-size: var(--text-small); line-height: 1.5; color: var(--txt-3); }

.asn-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: var(--text-small); font-weight: 650; white-space: nowrap; }
/* Tint 10% of the status colour over the surface, and pull the text a
   little toward the body colour so it clears 4.5:1 on the tint. */
.asn-badge--good { background: color-mix(in srgb, var(--green) 10%, var(--surface)); color: color-mix(in srgb, var(--green) 82%, var(--txt)); }
.asn-badge--warn { background: color-mix(in srgb, var(--amber) 10%, var(--surface)); color: color-mix(in srgb, var(--amber) 82%, var(--txt)); }
.asn-badge--bad { background: color-mix(in srgb, var(--red) 10%, var(--surface)); color: color-mix(in srgb, var(--red) 82%, var(--txt)); }

.asn-section h2 { margin: 0 0 8px; font-size: 1.35rem; }
.asn-section-lede { margin: 0 0 20px; max-width: 760px; color: var(--txt-3); line-height: 1.65; }

/* Where an address sits: nested bars. */
.asn-nest { display: grid; gap: 14px; margin: 0; padding: 20px; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.asn-nest-row { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 8px 20px; align-items: center; }
.asn-nest-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; font-size: var(--text-small); }
.asn-nest-label strong { flex-basis: 100%; color: var(--txt-2); }
.asn-nest-label code { font-family: var(--font-mono); overflow-wrap: anywhere; color: var(--txt); }
.asn-nest-bar { position: relative; display: block; height: 22px; border-radius: 6px; background: var(--surface2); border: 1px solid var(--border); }
.asn-nest-fill { position: absolute; top: -1px; bottom: -1px; border-radius: 6px; background: var(--primary); }
.asn-nest-bar--prefix { background: color-mix(in srgb, var(--primary) 22%, var(--surface2)); border-color: var(--primary); }
.asn-nest-marker { position: absolute; top: -5px; bottom: -5px; width: 4px; margin-left: -2px; border-radius: 2px; background: var(--txt); box-shadow: 0 0 0 2px var(--surface); }
.asn-nest-row--ip .asn-nest-label { grid-column: 1 / -1; }

/* Neighbour graph. */
.asn-graph { margin: 0 0 20px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.asn-graph-svg { display: block; height: auto; max-width: 100%; overflow: visible; }
.asn-graph-heading { font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; fill: var(--txt-3); }
.asn-edge { fill: none; stroke-linecap: round; opacity: .55; }
.asn-edge--left { stroke: var(--primary); }
.asn-edge--right { stroke: var(--accent); }
.asn-node rect { fill: var(--surface2); stroke: var(--border-hi, var(--border)); stroke-width: 1; }
.asn-node--left rect { stroke: color-mix(in srgb, var(--primary) 55%, var(--border)); }
.asn-node--right rect { stroke: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.asn-node text { font-family: var(--font-sans); }
.asn-node-asn { font-family: var(--font-mono); font-size: 13px; font-weight: 700; fill: var(--txt); }
.asn-node-name { font-size: 12px; fill: var(--txt-3); }
a.asn-node { cursor: pointer; }
a.asn-node:hover rect { fill: color-mix(in srgb, var(--primary) 12%, var(--surface2)); }
a.asn-node:focus { outline: none; }
a.asn-node:focus-visible rect { stroke: var(--primary); stroke-width: 3; }
.asn-node--center rect { fill: var(--primary-fill); stroke: none; }
.asn-node--center .asn-node-asn { fill: #fff; font-size: 15px; }
.asn-node--center .asn-node-name { fill: #fff; opacity: .92; }
.asn-node--more rect { fill: none; stroke-dasharray: 4 4; }
.asn-node--more text { font-size: 12px; fill: var(--txt-3); }
.asn-graph[data-layout="true"] .asn-node-asn { font-size: 11.5px; }
.asn-graph[data-layout="true"] .asn-node-name { font-size: 10.5px; }
.asn-graph[data-layout="true"] .asn-graph-heading { font-size: 10.5px; }

/* Stat tiles. */
.asn-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 20px; padding: 0; list-style: none; }
.asn-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.asn-stat { display: flex; flex-direction: column; gap: 2px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; min-width: 0; }
.asn-stat-value { font-family: var(--font-data, var(--font-sans)); font-size: 1.6rem; font-weight: 750; letter-spacing: -0.02em; color: var(--txt); font-variant-numeric: tabular-nums; }
.asn-stat-label { font-size: var(--text-small); font-weight: 600; color: var(--txt-2); }
.asn-stat-hint { font-size: var(--text-caption); color: var(--txt-3); }

.asn-tables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.asn-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.asn-table { width: 100%; border-collapse: collapse; font-size: var(--text-small); }
.asn-table caption { padding: 12px 14px 4px; text-align: left; font-weight: 700; color: var(--txt); }
.asn-table th, .asn-table td { padding: 8px 14px; text-align: left; border-top: 1px solid var(--border); vertical-align: top; }
.asn-table th { font-size: var(--text-caption); color: var(--txt-3); font-weight: 600; }
.asn-table td:first-child { font-family: var(--font-mono); white-space: nowrap; }
.asn-table .asn-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.asn-chips-label { margin: 20px 0 8px; font-weight: 600; font-size: var(--text-small); color: var(--txt-2); }
.asn-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.asn-chips a { display: inline-block; padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-family: var(--font-mono); font-size: var(--text-caption); text-decoration: none; }
.asn-chips a span { font-family: var(--font-sans); color: var(--txt-3); }
.asn-chips a:hover { border-color: var(--primary); }

/* Prefix length histograms. */
.asn-hists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
.asn-hist { margin: 0; padding: 16px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; min-width: 0; }
.asn-hist figcaption { margin-bottom: 12px; font-weight: 700; }
.asn-hist-rows { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.asn-hist-row { display: grid; grid-template-columns: 3.2em minmax(0, 1fr) 4.5em; gap: 10px; align-items: center; font-size: var(--text-small); }
.asn-hist-len { font-family: var(--font-mono); color: var(--txt-2); }
.asn-hist-track { display: block; height: 12px; border-radius: 4px; background: var(--surface2); overflow: hidden; }
.asn-hist-bar { display: block; height: 100%; border-radius: 4px; }
.asn-hist-bar--v4 { background: var(--primary); }
.asn-hist-bar--v6 { background: var(--accent); }
.asn-hist-count { text-align: right; font-variant-numeric: tabular-nums; color: var(--txt-2); }

.asn-prefix-list { margin-bottom: 12px; padding: 16px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.asn-prefix-list summary { cursor: pointer; font-weight: 600; color: var(--primary-ink); }
.asn-prefix-list[open] summary { margin-bottom: 14px; }
.asn-prefix-list input { width: 100%; max-width: 360px; display: block; }
.asn-prefixes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 16px; max-height: 420px; overflow-y: auto; margin: 12px 0 0; padding: 0; list-style: none; font-family: var(--font-mono); font-size: var(--text-small); }
.asn-prefixes li[hidden] { display: none; }

.asn-about { margin-top: 48px; }
.asn-about h2 { font-size: 1.35rem; }
.asn-about-checks { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 16px; }

@media (max-width: 900px) {
  .asn-about-checks, .asn-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .asn-tables, .asn-hists { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .asn-form-row { flex-direction: column; }
  .asn-nest-row { grid-template-columns: minmax(0, 1fr); }
  .asn-graph { padding: 10px; }
  .asn-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .asn-stat { padding: 12px; }
  .asn-stat-value { font-size: 1.3rem; }
  .asn-about-checks { grid-template-columns: minmax(0, 1fr); }
}