/* BGP/ASN Lookup page styles. Built entirely on tokens.css custom
   properties — no hardcoded colors/fonts here (see tokens.json for the
   source of truth). Component classes below (.btn, .badge, .error-box,
   .status-banner, .narrative-section, .facts-grid) are deliberately the
   same names/shapes local-diag's frontend uses for the same concepts —
   this is the documented "copy now, shared/ui/ later" state, not
   independent styling that happens to look similar. */

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg-base);
  color: var(--color-text-primary);
  font-family: var(--font-family-sans);
  font-size: var(--primitive-fontSize-base);
  line-height: 1.55;
}

[x-cloak] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.btn:focus-visible,
.search-input:focus-visible,
.pagination__btn:focus-visible {
  outline: 2px solid var(--color-accent-active);
  outline-offset: 2px;
}

a {
  color: var(--color-accent-info-bright);
}

code, .mono {
  font-family: var(--font-family-mono);
}

.page {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--primitive-spacing-8) var(--primitive-spacing-5) var(--primitive-spacing-20);
}

/* Widens once a result renders — the prefix/neighbour tables and
   facts-grid genuinely benefit from more room than the search-only
   view needs (matches local-diag's own page--wide, results-only
   widening pattern in index.html's pageWidthClass getter). */
.page--wide {
  max-width: 920px;
}

html.pathlens-embedded .page,
html.pathlens-embedded .page--wide {
  width: 100%;
  max-width: none;
}

/* ---------------------------------------------------------------- header */

.page-header {
  margin-bottom: var(--primitive-spacing-8);
}

.page-header h1 {
  font-size: var(--primitive-fontSize-2xl);
  font-weight: 600;
  margin: 0 0 var(--primitive-spacing-2);
  letter-spacing: -0.01em;
}

.page-header p {
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 60ch;
}

/* ------------------------------------------------------------- search bar */

.search-bar {
  display: flex;
  gap: var(--primitive-spacing-3);
  margin-bottom: var(--primitive-spacing-3);
}

.search-input {
  flex: 1;
  min-width: 0;
  background: var(--textarea-bg);
  color: var(--textarea-fg);
  font-family: var(--font-family-mono);
  font-size: var(--primitive-fontSize-base);
  border: 1px solid var(--textarea-border);
  border-radius: var(--textarea-radius);
  padding: var(--primitive-spacing-3) var(--primitive-spacing-4);
  min-height: 44px;
}

.search-input::placeholder {
  color: var(--textarea-placeholder-fg);
}

.search-input:focus-visible {
  border-color: var(--textarea-border-focus);
}

.search-examples {
  color: var(--color-text-muted);
  font-size: var(--primitive-fontSize-xs);
  margin: 0 0 var(--primitive-spacing-6);
}

.search-examples button {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-accent-info-bright);
  font-family: var(--font-family-mono);
  font-size: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ------------------------------------------------------------------ buttons */

.btn {
  font-family: var(--font-family-sans);
  font-size: var(--primitive-fontSize-sm);
  font-weight: 600;
  border-radius: var(--primitive-radius-default);
  padding: var(--primitive-spacing-2) var(--primitive-spacing-4);
  min-height: 44px; /* WCAG 2.5.5 / mobile touch-target minimum */
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--primitive-duration-fast);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--color-accent-active);
  color: var(--primitive-color-graphite-950);
}

.btn-primary:hover:not(:disabled) {
  background: var(--color-accent-active-bright);
}

.btn-secondary {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: var(--color-border-default);
}

.btn-secondary:hover:not(:disabled) {
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

/* ------------------------------------------------------------------- badges */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--primitive-spacing-1);
  font-family: var(--badge-font);
  font-size: var(--badge-font-size);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--badge-padding-y) var(--badge-padding-x);
  border-radius: var(--badge-radius);
  border: 1px solid transparent;
  background: var(--badge-bg-neutral);
  color: var(--badge-fg-neutral);
}

.badge--info {
  background: var(--badge-bg-info);
  color: var(--badge-fg-info);
  border-color: var(--badge-border-info);
}

.badge--success {
  background: var(--badge-bg-success);
  color: var(--badge-fg-success);
  border-color: var(--badge-border-success);
}

.badge--warning {
  background: var(--badge-bg-warning);
  color: var(--badge-fg-warning);
  border-color: var(--badge-border-warning);
}

.badge--danger {
  background: var(--badge-bg-danger);
  color: var(--badge-fg-danger);
  border-color: var(--badge-border-danger);
}

/* --------------------------------------------------------------- error box */

.error-box {
  background: var(--color-accent-danger-bg);
  border: 1px solid var(--color-accent-danger-border);
  color: var(--color-accent-danger-bright);
  border-radius: var(--primitive-radius-default);
  padding: var(--primitive-spacing-3);
  font-size: var(--primitive-fontSize-sm);
  margin-top: var(--primitive-spacing-3);
}

/* ----------------------------------------------------------- result panel */

/* The raw structured result — always rendered once a lookup succeeds,
   entirely independent of whether an AI narrative exists alongside it
   (see .ai-narrative-panel below). This is what stays fully complete and
   readable with BGP_LOOKUP_ENABLE_NARRATIVE=false. */
.result-panel {
  margin-top: var(--primitive-spacing-8);
}

.lookup-summary {
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-3);
  flex-wrap: wrap;
  margin-bottom: var(--primitive-spacing-6);
}

.lookup-summary__query {
  font-family: var(--font-family-mono);
  font-size: var(--primitive-fontSize-lg);
  font-weight: 600;
}

.result-section {
  background: var(--step-card-bg);
  border-radius: var(--step-card-radius);
  padding: var(--step-card-padding);
  margin-bottom: var(--primitive-spacing-4);
  border: 1px solid var(--color-border-subtle);
}

/* --------------------------------------------------------------- ASN tabs */

.asn-tabs {
  display: flex;
  gap: var(--primitive-spacing-2);
  border-bottom: 1px solid var(--color-border-subtle);
  margin-bottom: var(--primitive-spacing-5);
  overflow-x: auto;
}

.asn-tabs__btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--color-text-muted);
  font-family: var(--font-family-sans);
  font-size: var(--primitive-fontSize-sm);
  font-weight: 600;
  padding: var(--primitive-spacing-3) var(--primitive-spacing-2);
  min-height: 44px;
  cursor: pointer;
  white-space: nowrap;
}

.asn-tabs__btn:hover {
  color: var(--color-text-primary);
}

.asn-tabs__btn--active {
  color: var(--color-accent-active-bright);
  border-bottom-color: var(--color-accent-active);
}

/* Raw whois/RDAP text blocks — reuses the code-block tokens already
   copied from local-diag's tokens.css rather than inventing new ones. */
.raw-text-block {
  background: var(--code-block-bg);
  border: 1px solid var(--code-block-border);
  color: var(--code-block-fg);
  font-family: var(--code-block-font);
  font-size: var(--code-block-font-size);
  padding: var(--code-block-padding-y) var(--code-block-padding-x);
  border-radius: var(--code-block-radius);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
  margin: 0;
}

.result-section__title {
  font-weight: 600;
  font-size: var(--primitive-fontSize-md);
  margin: 0 0 var(--primitive-spacing-4);
}

.result-section__empty {
  color: var(--color-text-muted);
  font-size: var(--primitive-fontSize-sm);
  margin: 0;
}

.facts-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--facts-grid-row-gap) var(--facts-grid-column-gap);
}

.facts-grid + .facts-grid {
  margin-top: var(--primitive-spacing-4);
  padding-top: var(--primitive-spacing-4);
  border-top: 1px solid var(--facts-grid-divider);
}

.facts-grid__label {
  color: var(--facts-grid-label-fg);
  font-family: var(--facts-grid-label-font);
  font-size: var(--facts-grid-label-font-size);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.facts-grid__value {
  color: var(--facts-grid-value-fg);
  font-family: var(--facts-grid-value-font);
  font-size: var(--facts-grid-value-font-size);
  word-break: break-word;
}

/* ----------------------------------------------------- capped-list tables */

/* Shared by the prefix list (ASN mode) and neighbour list (ASN mode) —
   both are backend-bounded, potentially-large lists that need the same
   "N of total, paginated" treatment rather than a single huge dump. */
.capped-list__caption {
  color: var(--color-text-muted);
  font-size: var(--primitive-fontSize-xs);
  margin: 0 0 var(--primitive-spacing-3);
}

.capped-list__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-family-mono);
  font-size: var(--primitive-fontSize-sm);
}

.capped-list__table th {
  text-align: left;
  color: var(--facts-grid-label-fg);
  font-family: var(--font-family-sans);
  font-size: var(--primitive-fontSize-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
  padding: var(--primitive-spacing-2) var(--primitive-spacing-3);
  border-bottom: 1px solid var(--facts-grid-divider);
}

.capped-list__table td {
  color: var(--facts-grid-value-fg);
  padding: var(--primitive-spacing-2) var(--primitive-spacing-3);
  border-bottom: 1px solid var(--color-border-subtle);
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--primitive-spacing-3);
  margin-top: var(--primitive-spacing-4);
}

.pagination__label {
  color: var(--color-text-muted);
  font-size: var(--primitive-fontSize-xs);
  font-family: var(--font-family-mono);
}

.pagination__btn {
  background: transparent;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--primitive-radius-default);
  min-height: 36px;
  padding: 0 var(--primitive-spacing-3);
  cursor: pointer;
  font-size: var(--primitive-fontSize-sm);
}

.pagination__btn:hover:not(:disabled) {
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

.pagination__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ------------------------------------------------------------ AI narrative */

/* Deliberately its own visually distinct section BELOW the raw result
   panel, not interleaved into it fact-by-fact — see narrative.py's
   REMOVABILITY docstring: this whole block (and only this block) is what
   removal step (c) deletes from this file. */
.ai-narrative-panel {
  margin-top: var(--primitive-spacing-8);
}

.ai-narrative-panel__label {
  font-family: var(--font-family-mono);
  font-size: var(--primitive-fontSize-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--primitive-spacing-3);
}

.status-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--primitive-spacing-3);
  padding: var(--status-banner-padding);
  border-radius: var(--status-banner-radius);
  border: var(--status-banner-border-width) solid;
  margin-bottom: var(--primitive-spacing-6);
}

.status-banner--healthy {
  background: var(--status-banner-bg-healthy);
  border-color: var(--status-banner-border-healthy);
}

.status-banner--attention {
  background: var(--status-banner-bg-attention);
  border-color: var(--status-banner-border-attention);
}

.status-banner--issue {
  background: var(--status-banner-bg-issue);
  border-color: var(--status-banner-border-issue);
}

.status-banner__icon {
  font-size: var(--primitive-fontSize-xl);
  line-height: 1;
  margin-top: 2px;
}

.status-banner--healthy .status-banner__icon,
.status-banner--healthy .status-banner__label { color: var(--status-banner-fg-healthy); }
.status-banner--attention .status-banner__icon,
.status-banner--attention .status-banner__label { color: var(--status-banner-fg-attention); }
.status-banner--issue .status-banner__icon,
.status-banner--issue .status-banner__label { color: var(--status-banner-fg-issue); }

.status-banner__label {
  font-family: var(--font-family-mono);
  font-size: var(--primitive-fontSize-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--primitive-spacing-1);
}

.status-banner__summary {
  color: var(--status-banner-summary-fg);
  font-size: var(--primitive-fontSize-md);
  font-weight: 500;
  line-height: 1.5;
}

.narrative-section {
  background: var(--step-card-bg);
  border-radius: var(--step-card-radius);
  padding: var(--step-card-padding);
  margin-bottom: var(--primitive-spacing-4);
  border: 1px solid var(--color-border-subtle);
}

.narrative-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--primitive-spacing-3);
  margin-bottom: var(--primitive-spacing-4);
}

.narrative-section__title {
  font-weight: 600;
  font-size: var(--primitive-fontSize-md);
  margin: 0;
}

.narrative-section__text {
  color: var(--narrative-text-fg);
  font-family: var(--narrative-text-font);
  font-size: var(--narrative-text-font-size);
  line-height: var(--narrative-text-line-height);
  margin: 0;
}

.narrative-section .facts-grid {
  margin-bottom: var(--primitive-spacing-4);
  padding-bottom: var(--primitive-spacing-4);
  border-bottom: 1px solid var(--facts-grid-divider);
}