/* comparison.css. Load AFTER neon-techpriest.css
   No masks, filters, transforms, blend modes, or full-page overlays. */

:root {
  --amarr: #ffcc33;
  --caldari: #33e0ff;
  --gallente: #00ff9c;
  --minmatar: #ff3d8a;
  --card-text: #f8f8ff;
}

.crt-edge,
.horizon,
.scanlines {
  display: none !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;
}

.search-field {
  display: block;
  width: 100%;
  margin-top: 0.7rem;
  padding: 0.45rem 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  outline: none;
}
.search-field::placeholder { color: var(--muted); }
.search-field:focus { border-bottom-color: var(--accent); }

article { padding: 1.35rem 0 3rem; }
article > .kicker { font-size: 12px; }
article > .page-title {
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  margin-top: 0.3rem;
}
article > .lede {
  margin: 0.5rem 0 0;
  max-width: none;
  font-size: 15px;
  line-height: 1.45;
  white-space: normal;
}

.filter-block { margin-top: 0.85rem; }
.filter-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.card-bg-toggle {
  margin-top: 1.25rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--line);
}
.toggle-box {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg);
  cursor: pointer;
}
.toggle-box input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--accent);
  cursor: pointer;
}
.filter-block .chip-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 0.3rem;
}
.filter-block .chip-row button + button {
  margin-left: 0.75rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--line);
}

.catalog { margin-top: 2rem; }
.catalog .page-title {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  margin-top: 0.3rem;
}
.catalog > .kicker { font-size: 12px; }
.pair-stack { display: flex; flex-direction: column; gap: 2rem; margin-top: 2rem; }
.empty-state {
  margin-top: 2rem;
  padding: 1.25rem 1.1rem;
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.legend-section {
  margin-top: 0;
  padding-top: 3rem;
}
.legend-section .kicker { font-size: 12px; }
.legend-section .page-title {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  margin-top: 0.3rem;
}
.slot-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.6rem;
  margin-top: 0.7rem;
  padding: 0.65rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.slot-legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.legend-swatch {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}
.legend-swatch.weapon { background: var(--fg); }
.legend-swatch.utility {
  background: transparent;
  border: 1px solid var(--accent);
}
.legend-swatch.slot { background: var(--muted); }
.legend-name { color: var(--fg); }
.legend-note { color: var(--muted); }

.pair-card {
  position: relative;
  overflow: hidden;
  color: var(--card-text);
  border-width: 2px;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.85);
}
.pair-card.amarr {
  border-color: var(--amarr);
  background: #0b0a12;
}
.pair-card.caldari {
  border-color: var(--caldari);
  background: #0b0a12;
}
.pair-card.gallente {
  border-color: var(--gallente);
  background: #0b0a12;
}
.pair-card.minmatar {
  border-color: var(--minmatar);
  background: #0b0a12;
}
.pair-card.triglavian {
  border-color: #ff5a3d;
  background: #0b0a12;
}
.cards-synth .pair-card.amarr {
  background:
    linear-gradient(90deg, rgb(12 4 16 / 0.72) 0%, rgb(12 4 16 / 0.28) 46%, rgb(18 6 10 / 0.12) 100%),
    linear-gradient(rgb(0 0 0 / 0.20), rgb(0 0 0 / 0.20)),
    url("/empires/amarr-bg.jpg") center / cover no-repeat;
}
.cards-synth .pair-card.caldari {
  background:
    linear-gradient(90deg, rgb(4 8 18 / 0.72) 0%, rgb(4 8 18 / 0.28) 46%, rgb(4 10 22 / 0.12) 100%),
    linear-gradient(rgb(0 0 0 / 0.20), rgb(0 0 0 / 0.20)),
    url("/empires/caldari-bg.jpg") center / cover no-repeat;
}
.cards-synth .pair-card.gallente {
  background:
    linear-gradient(90deg, rgb(4 14 10 / 0.72) 0%, rgb(4 14 10 / 0.28) 46%, rgb(4 16 12 / 0.12) 100%),
    linear-gradient(rgb(0 0 0 / 0.20), rgb(0 0 0 / 0.20)),
    url("/empires/gallente-bg.jpg") center / cover no-repeat;
}
.cards-synth .pair-card.minmatar {
  background:
    linear-gradient(90deg, rgb(16 4 10 / 0.72) 0%, rgb(16 4 10 / 0.28) 46%, rgb(18 4 12 / 0.12) 100%),
    linear-gradient(rgb(0 0 0 / 0.20), rgb(0 0 0 / 0.20)),
    url("/empires/minmatar-bg.jpg") center / cover no-repeat;
}
.cards-synth .pair-card.triglavian {
  background:
    linear-gradient(90deg, rgb(16 4 6 / 0.72) 0%, rgb(16 4 6 / 0.28) 46%, rgb(18 6 4 / 0.12) 100%),
    linear-gradient(rgb(0 0 0 / 0.20), rgb(0 0 0 / 0.20)),
    url("empires/triglavian-bg.jpg") center / cover no-repeat;
}
.pair-card.amarr.hud-frame::before,
.pair-card.amarr .hud-bl { border-color: var(--amarr); }
.pair-card.amarr.hud-frame::after,
.pair-card.amarr .hud-tr { border-color: #ff6b35; }
.pair-card.caldari.hud-frame::before,
.pair-card.caldari .hud-bl { border-color: var(--caldari); }
.pair-card.caldari.hud-frame::after,
.pair-card.caldari .hud-tr { border-color: #ff2ec4; }
.pair-card.gallente.hud-frame::before,
.pair-card.gallente .hud-bl { border-color: var(--gallente); }
.pair-card.gallente.hud-frame::after,
.pair-card.gallente .hud-tr { border-color: #ff4da6; }
.pair-card.minmatar.hud-frame::before,
.pair-card.minmatar .hud-bl { border-color: var(--minmatar); }
.pair-card.minmatar.hud-frame::after,
.pair-card.minmatar .hud-tr { border-color: #ff6b35; }
.pair-card.triglavian.hud-frame::before,
.pair-card.triglavian .hud-bl { border-color: #ff5a3d; }
.pair-card.triglavian.hud-frame::after,
.pair-card.triglavian .hud-tr { border-color: #e8a54b; }

.empire-mark {
  pointer-events: none;
  position: absolute;
  top: 0;
  right: 0.75rem;
  bottom: 0;
  z-index: 4;
  width: 10rem;
  height: 10rem;
  margin-top: auto;
  margin-bottom: auto;
  opacity: 1;
  object-fit: contain;
}

.pair-head,
.pair-grid,
.hull-pane,
.pair-vs {
  position: relative;
  z-index: 1;
}

.pair-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.55rem 0.75rem;
  padding: 0.95rem 1.1rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.12);
  background: rgb(0 0 0 / 0.38);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.pair-head .empire { color: var(--fg); }
.pair-card.amarr .pair-head .empire { color: var(--amarr); }
.pair-card.caldari .pair-head .empire { color: var(--caldari); }
.pair-card.gallente .pair-head .empire { color: var(--gallente); }
.pair-card.minmatar .pair-head .empire { color: var(--minmatar); }
.pair-card.triglavian .pair-head .empire { color: #ff5a3d; }

.pair-grid { display: grid; }
.hull-pane {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.15rem 1.1rem 1.4rem;
}
.hull-pane.t1 { background: transparent; }
.cards-synth .hull-pane.t1 {
  background: linear-gradient(90deg, rgb(0 0 0 / 0.42), rgb(0 0 0 / 0.12) 80%, transparent);
}
.pair-card.amarr .hull-pane.navy { background: rgb(40 12 0 / 0.28); }
.pair-card.caldari .hull-pane.navy { background: rgb(0 20 40 / 0.30); }
.pair-card.gallente .hull-pane.navy { background: rgb(0 28 18 / 0.30); }
.pair-card.minmatar .hull-pane.navy { background: rgb(40 0 18 / 0.30); }
.pair-card.triglavian .hull-pane.navy { background: rgb(48 8 0 / 0.32); }

.hull-kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.hull-name {
  margin: 0.4rem 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.25;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pair-card.amarr .hull-name { color: var(--amarr); }
.pair-card.caldari .hull-name { color: var(--caldari); }
.pair-card.gallente .hull-name { color: var(--gallente); }
.pair-card.minmatar .hull-name { color: var(--minmatar); }
.pair-card.triglavian .hull-name { color: #ff5a3d; }

.pair-vs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.1rem 1.5rem;
  padding: 1rem 1.1rem;
  border-top: 1px solid rgb(255 255 255 / 0.14);
  border-bottom: 1px solid rgb(255 255 255 / 0.14);
  background: rgb(0 0 0 / 0.42);
  text-align: center;
}
.vs-label {
  width: 100%;
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--hot);
}
.delta {
  min-width: 4.5rem;
  text-align: center;
}
.delta-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.delta-value {
  margin-top: 0.2rem;
  display: flex;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--fg);
}
.delta-value.same { color: var(--muted); }
.delta-value .to.up { color: var(--accent); }
.delta-arrow { color: var(--muted); padding: 0 0.35rem; }

.bonus-title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.bonus-list {
  margin: 0.55rem 0 0;
  padding: 0;
  list-style: none;
}
.bonus-list li {
  position: relative;
  padding: 0.2rem 0 0.2rem 1rem;
  font-size: 16px;
  line-height: 1.45;
  color: var(--fg);
}
.bonus-list li::before {
  content: "";
  position: absolute;
  top: 0.75rem;
  left: 0;
  width: 6px;
  height: 1px;
  background: var(--hot);
}
body.hl-role-combat .bonus-list li[data-tags~="combat"],
body.hl-role-ewar .bonus-list li[data-tags~="ewar"],
body.hl-role-logistics .bonus-list li[data-tags~="logistics"],
body.hl-role-tackle .bonus-list li[data-tags~="tackle"],
body.hl-role-command .bonus-list li[data-tags~="command"],
body.hl-role-exploration .bonus-list li[data-tags~="exploration"],
body.hl-role-interceptor .bonus-list li[data-tags~="interceptor"],
body.hl-role-assault .bonus-list li[data-tags~="assault"],
body.hl-role-covops .bonus-list li[data-tags~="covops"],
body.hl-role-bomber .bonus-list li[data-tags~="bomber"],
body.hl-role-eaf .bonus-list li[data-tags~="eaf"],
body.hl-role-logi-frig .bonus-list li[data-tags~="logi-frig"],
body.hl-role-interdictor .bonus-list li[data-tags~="interdictor"],
body.hl-role-cmd-des .bonus-list li[data-tags~="cmd-des"],
body.hl-role-hac .bonus-list li[data-tags~="hac"],
body.hl-role-hic .bonus-list li[data-tags~="hic"],
body.hl-role-force-recon .bonus-list li[data-tags~="force-recon"],
body.hl-role-combat-recon .bonus-list li[data-tags~="combat-recon"],
body.hl-role-command-ship .bonus-list li[data-tags~="command-ship"],
body.hl-role-marauder .bonus-list li[data-tags~="marauder"],
body.hl-role-black-ops .bonus-list li[data-tags~="black-ops"] {
  background: linear-gradient(90deg, rgb(196 181 253 / 0.26), rgb(196 181 253 / 0.07) 62%, transparent);
  box-shadow: inset 2px 0 0 #c4b5fd;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.85), 0 0 8px rgb(196 181 253 / 0.5);
}
body.hl-weapons-turrets .bonus-list li[data-tags~="turrets"],
body.hl-weapons-missiles .bonus-list li[data-tags~="missiles"],
body.hl-weapons-drones .bonus-list li[data-tags~="drones"],
body.hl-weapons-disintegrators .bonus-list li[data-tags~="disintegrators"] {
  background: linear-gradient(90deg, rgb(103 232 249 / 0.22), rgb(103 232 249 / 0.06) 62%, transparent);
  box-shadow: inset 2px 0 0 #67e8f9;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.85), 0 0 8px rgb(103 232 249 / 0.45);
}
body.hl-tanks-shield .bonus-list li[data-tags~="shield"],
body.hl-tanks-armor .bonus-list li[data-tags~="armor"],
body.hl-tanks-speed .bonus-list li[data-tags~="speed"] {
  background: linear-gradient(90deg, rgb(253 186 116 / 0.24), rgb(253 186 116 / 0.06) 62%, transparent);
  box-shadow: inset 2px 0 0 #fdba74;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.85), 0 0 8px rgb(253 186 116 / 0.45);
}
.bonus-empty {
  margin: 0.55rem 0 0;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--muted);
}

.slot-board {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: max-content;
  max-width: 100%;
}
.slot-rack {
  display: grid;
  grid-template-columns: 2.6rem 8.25rem auto;
  align-items: center;
  column-gap: 0.75rem;
}
.slot-label {
  width: auto;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.slot-pips {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  min-height: 12px;
}
.pip { width: 12px; height: 12px; flex-shrink: 0; }
.pip.weapon { background: var(--fg); }
.pip.utility {
  background: transparent;
  border: 1px solid var(--accent);
}
.pip.slot { background: var(--muted); }
.slot-note {
  margin: -0.2rem 0;
  padding-left: 0.7rem;
  border-left: 1px solid var(--line);
  align-self: stretch;
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
  white-space: nowrap;
}
.slot-hardpoints {
  margin: 0.35rem 0 0;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.pair-card.amarr .slot-label,
.pair-card.amarr .slot-note,
.pair-card.amarr .slot-hardpoints { color: var(--amarr); }
.pair-card.caldari .slot-label,
.pair-card.caldari .slot-note,
.pair-card.caldari .slot-hardpoints { color: var(--caldari); }
.pair-card.gallente .slot-label,
.pair-card.gallente .slot-note,
.pair-card.gallente .slot-hardpoints { color: var(--gallente); }
.pair-card.minmatar .slot-label,
.pair-card.minmatar .slot-note,
.pair-card.minmatar .slot-hardpoints { color: var(--minmatar); }
.pair-card.triglavian .slot-label,
.pair-card.triglavian .slot-note,
.pair-card.triglavian .slot-hardpoints { color: #ff5a3d; }

@media (min-width: 900px) {
  .empire-mark {
    right: 1.25rem;
    width: 12rem;
    height: 12rem;
  }
  .pair-grid { grid-template-columns: 1fr auto 1fr; }
  .pair-vs {
    width: 8.5rem;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 1.15rem;
    border-top: 0;
    border-bottom: 0;
    border-left: 1px solid rgb(255 255 255 / 0.14);
    border-right: 1px solid rgb(255 255 255 / 0.14);
    background: rgb(0 0 0 / 0.42);
  }
  .delta { width: 100%; min-width: 0; }
  .hull-name { font-size: 1.35rem; }
}

/* Phone only. A window wider than 720px never uses this block. */
@media (max-width: 720px) {
  .shell,
  main,
  article,
  .catalog,
  .pair-stack,
  .pair-card,
  .pair-grid,
  .hull-pane {
    min-width: 0;
    max-width: 100%;
  }

  .empire-mark {
    top: 0.35rem;
    right: 0.35rem;
    bottom: auto;
    z-index: 0;
    width: 4.5rem;
    height: 4.5rem;
  }

  .pair-head {
    padding-right: 5.25rem;
  }

  .pair-grid > .hull-pane:first-child .hull-name {
    padding-right: 4.5rem;
  }

  .hull-name,
  .bonus-list li,
  .slot-hardpoints,
  .slot-note {
    overflow-wrap: anywhere;
  }

  .slot-board {
    width: 100%;
    max-width: 100%;
  }

  .slot-rack {
    grid-template-columns: 2.4rem minmax(0, 1fr);
  }

  .slot-note {
    white-space: normal;
    grid-column: 1 / -1;
    margin: 0;
    padding-left: 0;
    border-left: 0;
  }

  .filter-block .chip-row {
    display: block;
    max-width: 100%;
    column-count: 2;
    column-gap: 1.25rem;
    column-fill: balance;
  }

  .filter-block .chip-row button {
    display: block;
    width: 100%;
    margin: 0 0 0.45rem;
    padding: 0.3rem 0;
    border: 0;
    letter-spacing: 0.06em;
    white-space: normal;
    text-align: left;
    break-inside: avoid;
  }

  .filter-block .chip-row button[hidden] {
    display: none;
  }

  .filter-block .chip-row button + button {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }
}