/* Swarm-AI Attack Register — page-scoped. Light only. */

.sr-page {
  --sr-parchment: var(--parchment, #F7F3EC);
  --sr-paper: #FBFAF6;
  --sr-ink: var(--ink, #0E0E0C);
  --sr-ink-2: #4A433A;
  --sr-ink-3: #7C7264;
  --sr-rule: #D6CAB4;
  --sr-copper: var(--copper, #8B5A2B);
  --sr-copper-soft: #E7D3BF;
  --sr-crimson: #7E2A34;
  --sr-ochre: #B48A2C;
  --sr-slate: #8A8478;
  --sr-lane: #EDE4D2;
  --sr-focus: var(--copper, #8B5A2B);
  --sr-serif: "Cormorant Garamond", "Source Serif 4", Georgia, "Times New Roman", serif;
  --sr-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  box-sizing: border-box;
  max-width: 1240px;
  margin: 0 auto;
  padding-inline: clamp(16px, 3vw, 32px);
  padding-block: 28px 48px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
  background: var(--sr-parchment);
  color: var(--sr-ink);
  font-family: var(--sr-serif);
  font-size: 15px;
  line-height: 1.5;
}

.sr-page :focus-visible {
  outline: 2px solid var(--sr-focus);
  outline-offset: 2px;
}

.sr-page a {
  color: var(--sr-copper);
}

.sr-page .eyebrow {
  font-family: var(--sr-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sr-copper);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}

.sr-page .eyebrow span + span::before {
  content: "\00B7";
  margin-right: 14px;
  color: var(--sr-ink-3);
}

.sr-page h1 {
  font-family: var(--sr-serif);
  font-weight: 600;
  font-size: clamp(34px, 5.4vw, 56px);
  line-height: 1.02;
  margin: 6px 0 0;
  letter-spacing: -.01em;
  text-wrap: balance;
  color: var(--sr-ink);
}

.sr-page h1 em {
  font-style: italic;
  font-weight: 500;
  color: var(--sr-copper);
}

.sr-page .dek {
  max-width: 68ch;
  color: var(--sr-ink-2);
  margin: 10px 0 0;
  font-size: 16px;
}

.sr-page .mast {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px 40px;
  align-items: end;
  border-bottom: 1px solid var(--sr-rule);
  padding-bottom: 18px;
}

.sr-page .tally {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 4px 22px;
  font-family: var(--sr-mono);
  font-size: 12px;
  color: var(--sr-ink-2);
  font-variant-numeric: tabular-nums;
}

.sr-page .tally b {
  font-family: var(--sr-serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--sr-ink);
  display: block;
  line-height: 1;
}

.sr-page .tally .c b { color: var(--sr-crimson); }
.sr-page .tally .p b { color: var(--sr-copper); }

.sr-page .controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  align-items: center;
}

.sr-page .cgroup {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.sr-page .clabel {
  font-family: var(--sr-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sr-ink-3);
  margin-right: 4px;
}

.sr-page .chip {
  font: 500 12.5px/1 var(--sr-serif);
  border: 1px solid var(--sr-rule);
  background: var(--sr-paper);
  color: var(--sr-ink-2);
  padding: 7px 10px;
  border-radius: 3px;
  cursor: pointer;
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.sr-page .chip[aria-pressed="true"] {
  border-color: var(--sr-ink);
  color: var(--sr-ink);
  background: var(--sr-copper-soft);
}

.sr-page .chip .sw {
  width: 9px;
  height: 9px;
  display: inline-block;
}

.sr-page .search {
  font: 13px var(--sr-serif);
  padding: 7px 10px;
  border: 1px solid var(--sr-rule);
  background: var(--sr-paper);
  color: var(--sr-ink);
  border-radius: 3px;
  min-width: 0;
  width: min(200px, 100%);
}

.sr-page .range {
  display: flex;
  gap: 8px;
  align-items: center;
  font-family: var(--sr-mono);
  font-size: 12px;
  color: var(--sr-ink-2);
}

.sr-page .range input {
  accent-color: var(--sr-copper);
  width: 110px;
  max-width: 100%;
}

.sr-page .plate {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 22px;
  align-items: start;
  min-width: 0;
}

.sr-page .chartwrap {
  background: var(--sr-paper);
  border: 1px solid var(--sr-rule);
  position: relative;
  min-width: 0;
  max-width: 100%;
}

.sr-page .chartscroll {
  overflow-x: auto;
  max-width: 100%;
}

.sr-page .charthead {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px 0;
  font-family: var(--sr-mono);
  font-size: 11px;
  color: var(--sr-ink-3);
  letter-spacing: .06em;
}

.sr-page svg text { font-family: var(--sr-mono); }
.sr-page .lane-bg { fill: var(--sr-lane); }
.sr-page .lane-label {
  font-family: var(--sr-serif);
  font-size: 19px;
  font-weight: 600;
  fill: var(--sr-ink);
}
.sr-page .lane-sub {
  font-size: 9.5px;
  fill: var(--sr-ink-3);
  letter-spacing: .08em;
}
.sr-page .axis text { fill: var(--sr-ink-3); font-size: 10px; }
.sr-page .axis line,
.sr-page .axis path { stroke: var(--sr-rule); }
.sr-page .grid line { stroke: var(--sr-rule); stroke-dasharray: 1 3; }
.sr-page .break { stroke: var(--sr-ink-3); fill: none; }
.sr-page .break-label { fill: var(--sr-ink-3); font-size: 9px; letter-spacing: .06em; }
.sr-page .asof { stroke: var(--sr-crimson); stroke-width: 1; }
.sr-page .asof-label { fill: var(--sr-crimson); font-size: 9.5px; }
.sr-page .ctx line { stroke: var(--sr-ink-3); stroke-dasharray: 2 2; opacity: .6; }
.sr-page .ctx path { fill: var(--sr-ink-3); }
.sr-page .span { stroke-width: 2; stroke-linecap: round; opacity: .55; }
.sr-page .mid { fill: var(--sr-ink-3); font-size: 8.5px; }
.sr-page .mk { cursor: pointer; }
.sr-page .mk .hit { fill: transparent; }
.sr-page .s-confirmed { fill: var(--sr-crimson); stroke: var(--sr-crimson); }
.sr-page .s-probable { fill: var(--sr-copper); stroke: var(--sr-copper); }
.sr-page .s-possible { fill: var(--sr-paper); stroke: var(--sr-copper); stroke-width: 2; }
.sr-page .s-claimed { fill: var(--sr-paper); stroke: var(--sr-ink-2); stroke-width: 1.5; stroke-dasharray: 2 2; }
.sr-page .s-unverified { fill: none; stroke: var(--sr-ink-3); stroke-width: 1.6; }
.sr-page .s-pre_operational { fill: var(--sr-paper); stroke: var(--sr-crimson); stroke-width: 1.8; }
.sr-page .s-excluded { fill: var(--sr-paper); stroke: var(--sr-slate); stroke-width: 1.3; }
.sr-page .span.s-confirmed,
.sr-page .span.s-probable,
.sr-page .span.s-possible,
.sr-page .span.s-claimed,
.sr-page .span.s-unverified,
.sr-page .span.s-pre_operational,
.sr-page .span.s-excluded { fill: none; }
.sr-page .mk.sel .glyph { stroke: var(--sr-ink); stroke-width: 2.4; }
.sr-page .mk.dim { opacity: .18; }
.sr-page .arc { fill: none; stroke: var(--sr-copper); stroke-width: 1.2; stroke-dasharray: 3 3; opacity: .55; }
.sr-page .arc.hot { opacity: 1; stroke-width: 1.8; }

.sr-page .tip {
  position: absolute;
  pointer-events: none;
  background: var(--sr-ink);
  color: var(--sr-parchment);
  font: 12px/1.4 var(--sr-serif);
  padding: 8px 10px;
  max-width: 260px;
  border-radius: 2px;
  z-index: 3;
}

.sr-page .tip .t {
  font-family: var(--sr-serif);
  font-size: 15px;
  font-weight: 600;
  display: block;
}

.sr-page .tip .m {
  font-family: var(--sr-mono);
  font-size: 10.5px;
  opacity: .8;
}

.sr-page .legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 10px 14px 14px;
  border-top: 1px solid var(--sr-rule);
  font-size: 12px;
  color: var(--sr-ink-2);
}

.sr-page .legend span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.sr-page .dossier {
  background: var(--sr-paper);
  border: 1px solid var(--sr-rule);
  border-top: 3px solid var(--sr-copper);
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.sr-page .dossier .id {
  font-family: var(--sr-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--sr-copper);
}

.sr-page .dossier h2 {
  font-family: var(--sr-serif);
  font-weight: 600;
  font-size: 25px;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
  color: var(--sr-ink);
}

.sr-page .pills { display: flex; flex-wrap: wrap; gap: 6px; }

.sr-page .pill {
  font: 500 11px/1 var(--sr-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 7px;
  border: 1px solid var(--sr-rule);
  border-radius: 2px;
  color: var(--sr-ink-2);
}

.sr-page .pill.st-confirmed { background: var(--sr-crimson); border-color: var(--sr-crimson); color: var(--sr-paper); }
.sr-page .pill.st-probable { background: var(--sr-copper); border-color: var(--sr-copper); color: var(--sr-paper); }
.sr-page .pill.st-possible { border-color: var(--sr-copper); color: var(--sr-copper); }
.sr-page .pill.st-claimed,
.sr-page .pill.st-unverified { border-style: dashed; }
.sr-page .pill.st-pre_operational { border-color: var(--sr-crimson); color: var(--sr-crimson); }
.sr-page .pill.st-excluded { color: var(--sr-slate); }

.sr-page .kv {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 6px 12px;
  font-size: 13px;
  margin: 0;
}

.sr-page .kv dt {
  font-family: var(--sr-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sr-ink-3);
  padding-top: 2px;
}

.sr-page .kv dd { margin: 0; color: var(--sr-ink); }

.sr-page .esi {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sr-mono);
  font-size: 12px;
}

.sr-page .esi .bar {
  flex: 1;
  height: 6px;
  background: var(--sr-lane);
  position: relative;
}

.sr-page .esi .bar i {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--sr-copper);
}

.sr-page .dossier p { margin: 0; font-size: 13.5px; color: var(--sr-ink-2); }

.sr-page .dossier h3 {
  font-family: var(--sr-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sr-ink-3);
  margin: 6px 0 -4px;
  font-weight: 500;
}

.sr-page .srcs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sr-page .srcs li {
  font-size: 12.5px;
  line-height: 1.35;
  border-left: 2px solid var(--sr-rule);
  padding-left: 8px;
}

.sr-page .srcs li.primary { border-left-color: var(--sr-copper); }

.sr-page .srcs .st {
  font-family: var(--sr-mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sr-ink-3);
  display: block;
}

.sr-page .caveat {
  border: 1px dashed var(--sr-rule);
  padding: 8px 10px;
  font-size: 12.5px;
  color: var(--sr-ink-2);
}

.sr-page .register h2 {
  font-family: var(--sr-serif);
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--sr-ink);
}

.sr-page .tablewrap {
  overflow-x: auto;
  max-width: 100%;
  border: 1px solid var(--sr-rule);
  background: var(--sr-paper);
}

.sr-page table {
  border-collapse: collapse;
  width: 100%;
  min-width: 820px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.sr-page th {
  font: 500 10.5px var(--sr-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sr-ink-3);
  text-align: left;
  padding: 10px;
  border-bottom: 1px solid var(--sr-ink);
  cursor: pointer;
  white-space: nowrap;
  background: var(--sr-paper);
  position: sticky;
  top: 0;
}

.sr-page th[aria-sort]::after { content: " \2195"; opacity: .5; }

.sr-page td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--sr-rule);
  vertical-align: top;
}

.sr-page tr { cursor: pointer; }
.sr-page tr:hover td,
.sr-page tr.sel td { background: var(--sr-copper-soft); }
.sr-page td.mono {
  font-family: var(--sr-mono);
  font-size: 12px;
  white-space: nowrap;
}
.sr-page td .tt { font-weight: 500; }
.sr-page .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  vertical-align: middle;
}

.sr-page .empty {
  padding: 20px;
  color: var(--sr-ink-3);
  font-style: italic;
}

.sr-page .method {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px 28px;
  border-top: 1px solid var(--sr-rule);
  padding-top: 18px;
  font-size: 13px;
  color: var(--sr-ink-2);
}

.sr-page .method h4 {
  font-family: var(--sr-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sr-copper);
  margin: 0 0 6px;
  font-weight: 500;
}

.sr-page .method p,
.sr-page .method ul { margin: 0; }
.sr-page .method ul { padding-left: 16px; }

.sr-page .foot {
  font-family: var(--sr-mono);
  font-size: 11px;
  color: var(--sr-ink-3);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

.sr-page .sr-unavailable {
  font-family: var(--sr-serif);
  font-size: 1.15rem;
  color: var(--sr-ink-2);
  margin: 2rem 0;
}

@media (max-width: 980px) {
  .sr-page .plate { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .sr-page .mast { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .sr-page,
  .sr-page :where(svg, button, tr) {
    transition: none !important;
    animation: none !important;
  }
}