.calculator-page main {
  background: radial-gradient(ellipse at 90% 0%, #29331b 0%, transparent 48%);
}

.calculator-intro {
  padding-block: clamp(2.5rem, 6vw, 5rem);
}

.calculator-intro h1 {
  font-size: clamp(2.55rem, 7vw, 4.8rem);
  line-height: 1;
}

.calculator-intro .intro {
  margin-top: .9rem;
  max-width: 64ch;
}

.calculator-species-panel {
  margin-block: 1.7rem 1.2rem;
  padding: clamp(1rem, 2.5vw, 1.4rem);
  border: 1px solid var(--edge);
  border-radius: 14px;
  background: var(--surface);
}

.calculator-species-panel .trait-field {
  max-width: 24rem;
}

.calculator-status {
  margin-top: .7rem;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.5;
}

.calculator-status:empty {
  margin-top: 0;
}

.calculator-parents-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 1rem;
}

.parent-card {
  min-width: 0;
  padding: clamp(1rem, 2.5vw, 1.4rem);
  border: 1px solid var(--edge);
  border-radius: 14px;
  background: var(--surface);
}

.parent-card-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .7rem;
}

.parent-card h2 {
  font-size: clamp(1.35rem, 2.3vw, 1.8rem);
  letter-spacing: -.025em;
  line-height: 1.1;
}

.parent-feedback {
  margin-top: .7rem;
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.45;
}

.parent-feedback:empty {
  margin-top: 0;
}

.trait-list {
  display: grid;
  gap: .75rem;
  margin: .9rem 0 0;
  padding: 0;
  list-style: none;
}

.trait-list:empty {
  margin: 0;
}

.trait-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .8rem;
  padding: .85rem;
  border: 1px solid var(--edge);
  border-radius: 9px;
  background: #10160e;
}

.trait-row-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  flex: 0 0 100%;
  gap: .65rem;
}

.trait-field {
  display: grid;
  min-width: 0;
  gap: .35rem;
  font-size: .88rem;
  font-weight: 700;
}

.trait-field select,
.trait-field input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: .5rem .6rem;
  border: 1px solid #59694b;
  border-radius: 7px;
  color: var(--text);
  background: #1b2218;
  font: inherit;
  font-weight: 500;
}

.trait-field select:disabled,
.trait-field input:disabled {
  color: var(--muted);
  opacity: .8;
}

.trait-field input[aria-invalid="true"] {
  border-color: #ffae89;
}

.trait-error {
  color: #ffae89;
  font-size: .82rem;
  font-weight: 500;
}

.trait-note {
  flex: 0 0 100%;
  color: var(--muted);
  font-size: .83rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.calculator-dictionary,
.trait-reference {
  color: var(--accent);
  font-size: .88rem;
  font-weight: 700;
  text-underline-offset: .2em;
}

.calculator-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
  margin-block: 1rem;
}

.calculator-dictionary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.calculator-actions .button-primary {
  margin: 0;
  font-family: inherit;
  cursor: pointer;
}

.trait-add,
.trait-remove {
  min-height: 44px;
  border: 1px solid #59694b;
  border-radius: 7px;
  background: #222b19;
  color: var(--text);
  padding: .35rem .7rem;
  font: inherit;
  font-size: .87rem;
  font-weight: 700;
  cursor: pointer;
}

.trait-add span {
  color: var(--accent);
}

.trait-remove {
  margin-inline-start: auto;
  background: transparent;
}

.trait-add:disabled {
  cursor: default;
  opacity: .55;
}

.trait-add:hover:not(:disabled),
.trait-remove:hover {
  border-color: var(--accent);
}

.calculator-results {
  margin-top: 2rem;
  scroll-margin-top: 1rem;
}

.calculator-results h2 {
  margin-bottom: .75rem;
  font-size: clamp(1.85rem, 4vw, 2.6rem);
}

.results-message,
.results-locus,
.results-warning {
  margin-bottom: .8rem;
  padding: clamp(.85rem, 2.5vw, 1.25rem);
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: var(--surface);
}

.results-error,
.results-warning {
  border-inline-start: 3px solid #d29b51;
}

.results-error,
.results-warning[data-severity="critical"] {
  border-inline-start-color: #ffae89;
}

.results-message ul,
.results-warning ul {
  margin: .55rem 0 0;
  padding-inline-start: 1.2rem;
}

.results-note {
  margin-block: .6rem;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.55;
}

.results-locus table {
  width: 100%;
  margin-top: .5rem;
  border-collapse: collapse;
  font-size: .9rem;
}

.results-locus th,
.results-locus td {
  padding: .55rem .45rem;
  border-bottom: 1px solid var(--edge);
  text-align: start;
  vertical-align: top;
}

.results-locus thead th {
  color: var(--muted);
  font-size: .8rem;
}

.results-locus td {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.results-locus tbody tr:last-child > * {
  border-bottom: 0;
}

.results-viability {
  display: block;
  margin-top: .18rem;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 400;
  overflow-wrap: anywhere;
}

.results-viability[data-viability="nonviable"] {
  color: #ffae89;
}

.results-scenario,
.results-count,
.results-weighted {
  min-width: 0;
  margin: .9rem 0 0;
  padding: .8rem;
  border: 1px solid var(--edge);
  border-radius: 8px;
  background: #10160e;
}

.results-visual-odds {
  margin-top: .35rem;
  color: var(--accent);
  font-size: .88rem;
  font-weight: 750;
}

.results-count legend {
  padding-inline: .2rem;
  font-weight: 700;
}

.results-count input {
  max-width: 12rem;
}

.results-count-odds {
  display: grid;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.results-count-odds strong,
.results-count-odds span {
  display: block;
  font-size: .88rem;
}

.results-count-odds span {
  color: var(--muted);
}

.results-weighted summary {
  font-weight: 700;
  cursor: pointer;
}

.results-warnings {
  margin-top: 1.2rem;
}

.results-warnings > h3 {
  margin-bottom: .6rem;
}

.results-warning p + p {
  margin-top: .45rem;
}

.results-warning a {
  color: var(--accent);
  text-underline-offset: .18em;
}

@media (max-width: 680px) {
  .calculator-parents-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}