/* Shared visual language for the INFERNA network tools. */
@font-face {
  font-family: "Cinzel";
  src: url("fonts/Cinzel-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSans-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --inferna-ink: #050507;
  --inferna-panel: #1b1212;
  --inferna-surface: #261817;
  --inferna-line: #644637;
  --inferna-text: #fffaf1;
  --inferna-muted: #d0bcb0;
  --inferna-gold: #e6b96d;
  --inferna-fire: #ef7046;
  --inferna-good: #b9d69e;
  --inferna-display: Cinzel, Georgia, serif;
  --inferna-body: "Open Sans", "Segoe UI", sans-serif;
}

body { background: var(--inferna-ink); color: var(--inferna-text); font-family: var(--inferna-body); }
:focus-visible { outline: 3px solid var(--inferna-gold); outline-offset: 4px; }
.inferna-skip { position: absolute; z-index: 20; top: .5rem; left: .5rem; padding: .7rem 1rem; background: var(--inferna-text); color: var(--inferna-ink); }
.inferna-skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.inferna-logo { display: block; width: 148px; max-width: 100%; height: auto; object-fit: contain; }
.inferna-diagnose .top, .inferna-portal .site-header, .inferna-legal .top { border-color: var(--inferna-line); }
.inferna-diagnose nav a, .inferna-portal .site-header nav a, .inferna-legal .back { color: var(--inferna-muted); }
.inferna-diagnose nav a:hover, .inferna-portal .site-header nav a:hover, .inferna-legal .back:hover { color: var(--inferna-text); }
.inferna-diagnose h1, .inferna-legal h1, .inferna-portal h1 { font-family: var(--inferna-display); letter-spacing: -.025em; }
.inferna-diagnose button:not(.query-chip), .inferna-portal .button.primary { color: #1b0a04; background: linear-gradient(110deg, #f2b75f, #ec7044); border: 1px solid #f5aa72; border-radius: 2px 9px 2px 9px; font-weight: 750; }
.inferna-diagnose button:hover:not(:disabled):not(.query-chip), .inferna-portal .button.primary:hover { background: #ffd298; color: #1b0a04; }
.inferna-diagnose input, .inferna-diagnose select, .inferna-portal .lookup-form input { border-color: var(--inferna-line); border-radius: 3px; background: #100b0a; color: var(--inferna-text); }
.inferna-diagnose .panel, .inferna-portal .panel { background: var(--inferna-panel); border-color: var(--inferna-line); }
.inferna-diagnose .panel { --accent: var(--inferna-gold); border-top: 2px solid var(--inferna-gold); border-radius: 0 0 10px 10px; }
.inferna-diagnose .asn, .inferna-diagnose .lookup { background: var(--inferna-panel); }
.inferna-diagnose .badge, .inferna-portal .badge { color: var(--inferna-gold); border-color: var(--inferna-line); background: #261a14; }
.inferna-diagnose p, .inferna-legal p, .inferna-legal address, .inferna-legal .details { color: var(--inferna-muted); }
.inferna-diagnose .intro { padding-top: clamp(2.5rem, 6vw, 4.5rem); }
.inferna-diagnose .intro::after { background: repeating-linear-gradient(135deg, transparent 0 25px, #b65b323a 25px 26px, transparent 26px 34px), radial-gradient(ellipse at 88% 50%, #72381c 0%, #291511 38%, transparent 70%); opacity: .72; }
.inferna-diagnose .eyebrow, .inferna-diagnose th { color: var(--inferna-gold); }
.inferna-diagnose .eyebrow span { background: var(--inferna-fire); }
.inferna-diagnose .table-wrap, .inferna-diagnose .asn-result, .inferna-diagnose .lookup-result { background: #100b0a; border-color: var(--inferna-line); }
.inferna-diagnose caption { background: #2d1d16; }
.inferna-diagnose tbody tr:nth-child(even) { background: #1d1410; }
.inferna-diagnose .asn-result { border-left-color: var(--inferna-gold); }
.inferna-diagnose .asn-result a, .inferna-legal a { color: var(--inferna-gold); }
.inferna-diagnose nav a[aria-current] { color: var(--inferna-text); text-decoration-color: var(--inferna-gold); text-decoration-thickness: 2px; }
.inferna-diagnose #trace-method { display: block; width: 100%; margin-bottom: .85rem; }
.inferna-diagnose .query-chip { border-color: #79523a; background: #302018; color: #f4d0a3; }
.inferna-diagnose .query-chip:hover:not(:disabled) { color: #1b0a04; background: #ffd298; }
.inferna-diagnose .lookup-result { border-left-color: var(--inferna-gold); }
.inferna-diagnose .route-path { display: flex; gap: 0; overflow-x: auto; list-style: none; margin: 1.4rem 0 .3rem; padding: .3rem 0; }
.inferna-diagnose .route-hop { position: relative; display: grid; justify-items: center; align-content: start; gap: .35rem; flex: 1 0 80px; min-width: 0; text-align: center; }
.inferna-diagnose .route-hop { animation: inferna-hop-reveal .45s both; animation-delay: var(--hop-delay, 0ms); }
@keyframes inferna-hop-reveal { from { opacity: .25; transform: translateY(4px); filter: brightness(1.8); } to { opacity: 1; transform: none; filter: none; } }
.inferna-diagnose .route-hop:not(:last-child)::after { content: ""; position: absolute; z-index: 0; left: calc(50% + 15px); right: calc(-50% + 15px); top: 14px; height: 1px; background: #a75e36; }
.inferna-diagnose .route-hop-number { position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--inferna-gold); border-radius: 50%; background: #2a1a12; color: var(--inferna-text); font-size: .75rem; box-shadow: 0 0 13px #e275323b; }
.inferna-diagnose .route-hop-address { max-width: 110px; color: var(--inferna-muted); font-size: .7rem; overflow-wrap: anywhere; }
.inferna-portal { --base: var(--inferna-ink); --surface: var(--inferna-panel); --line: var(--inferna-line); --accent: var(--inferna-fire); --live: var(--inferna-good); --text: var(--inferna-text); --muted: var(--inferna-muted); --amber: var(--inferna-gold); }
.inferna-portal .site-header nav a { border-radius: 0; }
.inferna-portal .site-header nav a[aria-current] { background: transparent; box-shadow: inset 0 -2px var(--inferna-gold); color: var(--inferna-text); }
.inferna-portal .hero { padding: clamp(24px, 3vw, 38px); border-color: var(--inferna-line); border-radius: 3px; background: radial-gradient(ellipse at 96% 100%, #51301d, transparent 62%), #1b1110; }
.inferna-portal h1 { font-size: clamp(3.1rem, 7vw, 6rem); }
.inferna-portal h1 span { color: var(--inferna-gold); }
.inferna-portal .network-map, .inferna-portal .trend { background: #100b0a; border-color: var(--inferna-line); }
.inferna-portal .network-node { background: #261914; border-color: #71513e; }
.inferna-portal .network-core { background: #3d2518; border-color: var(--inferna-gold); box-shadow: 0 0 25px #dd804035; }
.inferna-portal .section-head p, .inferna-portal .probe-row code, .inferna-portal .peer-list li, .inferna-portal .panel-foot > span { color: var(--inferna-muted); }
.inferna-portal .badge[data-state="up"] { color: var(--inferna-good); }
.inferna-portal .badge[data-state="down"] { color: var(--inferna-gold); }
.inferna-legal { --muted: var(--inferna-muted); --rule: var(--inferna-line); --signal: var(--inferna-gold); --coral: var(--inferna-fire); }
.inferna-legal .lead::before { background: linear-gradient(90deg, var(--inferna-fire), var(--inferna-gold)); }
.inferna-legal .brand { color: var(--inferna-text); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
