:root {
  --bg: #1a1d24;
  --surface: #252932;
  --text: #e8eaed;
  --muted: #9aa0a6;
  --accent: #7cb8ff;
  --gap: #f0a050;
  --border: #3c4048;
  --font: system-ui, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.5;
}

.page {
  max-width: 40rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}

.spikeNav {
  margin-bottom: 1rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--surface);
  font-size: 0.875rem;
}

.spikeNavLabel {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--muted);
  font-size: 0.8125rem;
}

.spikeNav a {
  color: var(--accent);
  text-decoration: none;
}

.spikeNav a[aria-current="page"] {
  font-weight: 600;
  text-decoration: underline;
}

.spikeNavSep {
  margin: 0 0.35rem;
  color: var(--muted);
}

.loading,
.error {
  color: var(--muted);
}

.error {
  color: #f28b82;
}

.gap-banner {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--gap);
  border-radius: 0.5rem;
  background: rgb(240 160 80 / 0.08);
  color: var(--gap);
  font-size: 0.875rem;
}

.pageHeader {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

.iconSlot {
  flex-shrink: 0;
  width: 5rem;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--border);
  border-radius: 0.5rem;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.75rem;
  text-align: center;
}

.iconSlot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0.5rem;
}

.pageHeader h1 {
  margin: 0 0 0.25rem;
  font-size: 1.75rem;
  font-weight: 600;
}

.meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.875rem;
}

.panel {
  margin-top: 1rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--surface);
  overflow: hidden;
}

.panel h2 {
  margin: 0;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}

.panelNote {
  margin: 0;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.8125rem;
}

.workList {
  list-style: none;
  margin: 0;
  padding: 0;
}

.workSlot {
  display: grid;
  grid-template-columns: 6rem 1fr auto;
  gap: 0.5rem 1rem;
  align-items: center;
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.9375rem;
}

.workSlot:last-child {
  border-bottom: none;
}

.workSlot-gap {
  grid-template-columns: 6rem 1fr;
}

.workLabel {
  font-weight: 500;
}

.workMeta {
  color: var(--muted);
  font-size: 0.8125rem;
}

.workMeta code {
  font-size: 0.75rem;
}

.partnerList {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 0;
  margin: 0;
}

.partnerList dt,
.partnerList dd {
  margin: 0;
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.9375rem;
}

.partnerList dt {
  color: var(--muted);
}

.partnerList dd {
  margin: 0;
}

.partnerList dd:last-child,
.partnerList dt:last-of-type {
  border-bottom: none;
}

.partnerValue {
  margin: 0;
}

.badge {
  display: inline-block;
  margin: 0;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.badge-gap {
  border: 1px solid rgb(240 160 80 / 0.45);
  background: rgb(240 160 80 / 0.08);
  color: var(--gap);
}

.badge-locked {
  border: 1px solid rgb(242 139 130 / 0.45);
  background: rgb(242 139 130 / 0.08);
  color: #f28b82;
}

.badge-confirmed {
  border: 1px solid rgb(124 184 255 / 0.45);
  background: rgb(124 184 255 / 0.08);
  color: var(--accent);
}

.badge-observed {
  border: 1px solid rgb(154 160 166 / 0.45);
  background: rgb(154 160 166 / 0.08);
  color: var(--muted);
}

.mountCompare {
  display: grid;
  gap: 0;
}

@media (min-width: 36rem) {
  .mountCompare {
    grid-template-columns: 1fr 1fr;
  }
}

.mountCard {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
}

.mountCompare .mountCard:last-child {
  border-bottom: none;
}

@media (min-width: 36rem) {
  .mountCard:first-child {
    border-right: 1px solid var(--border);
    border-bottom: none;
  }
}

.mountCard h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
}

.mountStem {
  font-weight: 400;
  color: var(--muted);
  font-size: 0.8125rem;
}

.mountVerdict {
  margin: 0 0 0.5rem;
  font-weight: 600;
}

.mountVerdict-negative {
  color: var(--muted);
}

.mountVerdict-positive {
  color: var(--accent);
}

.mountPartial {
  font-weight: 400;
  color: var(--muted);
  font-size: 0.8125rem;
}

.mountMeta {
  margin: 0 0 0.5rem;
  color: var(--muted);
  font-size: 0.8125rem;
}

.mountMeta code {
  font-size: 0.75rem;
}

.weightSubheading {
  margin: 0;
  padding: 0.625rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
}

.weightCompare {
  display: grid;
  gap: 0;
}

@media (min-width: 36rem) {
  .weightCompare {
    grid-template-columns: 1fr 1fr;
  }
}

.weightCard {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
}

.weightCompare .weightCard:last-child {
  border-bottom: none;
}

@media (min-width: 36rem) {
  .weightCard:first-child {
    border-right: 1px solid var(--border);
    border-bottom: none;
  }
}

.weightCard h4 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
}

.weightStem {
  font-weight: 400;
  color: var(--muted);
  font-size: 0.8125rem;
}

.weightVerdict {
  margin: 0 0 0.5rem;
  font-weight: 600;
}

.weightVerdict-neutral {
  color: var(--muted);
}

.weightVerdict-positive {
  color: var(--accent);
}

.weightPartial {
  font-weight: 400;
  color: var(--muted);
  font-size: 0.8125rem;
}

.weightMeta,
.weightValue {
  margin: 0 0 0.5rem;
  color: var(--muted);
  font-size: 0.8125rem;
}

.weightMeta code {
  font-size: 0.75rem;
}

.weightValue {
  color: var(--text);
  font-size: 0.9375rem;
}

.crossLinkSubheading {
  margin: 0;
  padding: 0.625rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
}

.crossLinkGroup-absent .crossLinkSubheading {
  border-top: 1px solid var(--border);
}

.crossLinkList,
.crossLinkAbsentList {
  list-style: none;
  margin: 0;
  padding: 0;
}

.crossLinkRow,
.crossLinkAbsentRow {
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
}

.crossLinkRow:last-child,
.crossLinkAbsentRow:last-child {
  border-bottom: none;
}

.crossLinkTo {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.8125rem;
  word-break: break-all;
}

.crossLinkLabel {
  display: inline-block;
  margin-right: 0.5rem;
  font-weight: 500;
}

.crossLinkMeta {
  display: block;
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.75rem;
}

.crossLinkMeta code {
  font-size: 0.6875rem;
}

.crossLinkEmpty {
  margin: 0;
  padding: 0.625rem 1rem;
  color: var(--muted);
  font-size: 0.875rem;
}

.crossLinkAbsentLabel {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 500;
}

.stats dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 0;
}

.stats dt,
.stats dd {
  margin: 0;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.9375rem;
}

.stats dt {
  color: var(--muted);
}

.stats dd {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.stats dt:nth-last-child(2),
.stats dd:last-child {
  border-bottom: none;
}

.finePrint {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.8125rem;
}

.finePrint code {
  font-size: 0.75rem;
}

.deferred {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--muted);
}