/* extra.css — the few things modules 7-10 need that lib/site.css does not
   define.  It adds nothing to the theme: every colour below is one of the
   tokens site.css already sets for light and dark, so both themes follow. */

/* ---- statuses the knowledge base uses that site.css has no rule for ------
   `refuted` must never be mistaken for a live claim, and `numerical` must
   never be styled like `proved`, so the negative statuses share the red of
   .badge.open and the neutral ones are outlined and muted. */
.badge.refuted { color: var(--open); background: var(--open-bg); border-width: 2px; }
.badge.verified { color: var(--certified); background: var(--certified-bg); }
.badge.active, .badge.done, .badge.superseded, .badge.question {
  color: var(--muted); background: transparent; border-style: dashed;
}

/* ---- small non-status markers ------------------------------------------ */
.chip {
  display: inline-block; font: 600 .7rem/1.5 var(--sans); letter-spacing: .03em;
  padding: .05rem .42rem; border-radius: 3px; border: 1px dashed currentColor;
  white-space: nowrap; vertical-align: .08em; color: var(--muted);
}
.chip.unrefereed { color: var(--numerical); border-style: solid; background: var(--numerical-bg); }
.chip.failed { color: var(--open); border-style: solid; background: var(--open-bg); }
.chip.private { color: var(--muted); }
.chip.kb { color: var(--muted); }

/* ---- the claim map ------------------------------------------------------ */
.map-wrap { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 52rem) { .map-wrap { grid-template-columns: 1.15fr 1fr; } }
svg.map { width: 100%; height: auto; display: block; touch-action: manipulation; }
svg.map .hub { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.5; }
svg.map .edge { stroke: var(--line); stroke-width: 1; fill: none; }
svg.map .edge.cross { stroke: var(--series-4); stroke-dasharray: 3 3; }
svg.map .node { stroke: var(--panel); stroke-width: 1.2; cursor: pointer; }
svg.map .node.sel { stroke: var(--fg); stroke-width: 2.4; }
svg.map .node.dim { opacity: .18; }
svg.map text.hublabel { fill: var(--fg); font: 600 17px var(--sans); }
svg.map [tabindex]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.cardlist { max-height: 26rem; overflow-y: auto; border: 1px solid var(--line-soft); border-radius: 6px; }
.cardlist button {
  display: block; width: 100%; text-align: left; font: inherit; font-size: .85rem;
  background: transparent; color: var(--fg); border: 0;
  border-bottom: 1px solid var(--line-soft); padding: .35rem .5rem; cursor: pointer;
}
.cardlist button:hover { background: var(--accent-soft); }
.cardlist button[aria-current="true"] { background: var(--accent-soft); font-weight: 600; }
.cardlist .row { display: flex; gap: .4rem; align-items: baseline; flex-wrap: wrap; }
.detail { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: .8rem; }
.detail h3 { margin: .2rem 0 .4rem; }
.detail .statement { font-size: .9rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.detail ul { padding-left: 1.1rem; margin: .4rem 0; }
.detail li { font-size: .85rem; overflow-wrap: anywhere; }
.filters { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; }
.filters label { font-size: .85rem; font-weight: 600; }
.swatch { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; vertical-align: -1px; }

/* ---- shared small helpers ---------------------------------------------- */
.note-block {
  border-left: 3px solid var(--numerical); padding: .1rem 0 .1rem .7rem;
  margin: .6rem 0; font-size: .88rem;
}
.note-block.bad { border-left-color: var(--open); }
.note-block.good { border-left-color: var(--proved); }
figure.no-js svg { width: 100%; height: auto; }
.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;
}