/* ============================================================
   Module-specific styles, aligned to HGIS Morandi palette.
   ============================================================ */

/* ---------- Module 1: Famous shapes gallery ---------- */
.shapes-gallery {
  max-width: var(--measure-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}
.shape-card {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color 0.2s ease;
}
.shape-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--uw-gold) 30%, var(--uw-gold) 70%, transparent);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.shape-card:hover { border-color: var(--uw-purple-soft); }
.shape-card:hover::before { opacity: 1; }
.shape-card__viz {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-deep);
  margin-bottom: 1rem;
  border-radius: 2px;
}
.shape-card__viz svg { width: 100%; height: 100%; display: block; }
.shape-card__nick {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--uw-purple-deep);
  margin: 0 0 0.3rem;
}
html[lang^="zh"] .shape-card__nick { font-family: var(--zh); font-style: normal; font-weight: 600; }
.shape-card__id {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
  margin: 0 0 0.6rem;
}
.shape-card__note {
  font-family: var(--sans);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

/* ---------- Module 2: Pack & Crack ---------- */
.pack-crack {
  max-width: var(--measure-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 900px) {
  .pack-crack { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}
.pack-crack__board {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 1.5rem;
  position: relative;
}
.pack-crack__board svg { width: 100%; height: auto; display: block; }
.pack-crack__panel {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.pack-crack__readout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.pack-crack__stat {
  background: var(--rule-soft);
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--rule);
  border-radius: 1px;
}
.pack-crack__stat--blue { border-left-color: var(--r-blue); }
.pack-crack__stat--red  { border-left-color: var(--r-red); }
.pack-crack__stat-label {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.25rem;
}
html[lang^="zh"] .pack-crack__stat-label { letter-spacing: 0.04em; text-transform: none; }
.pack-crack__stat-value {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
  font-variant-numeric: lining-nums tabular-nums;
}
.pack-crack__verdict {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.08rem;
  line-height: 1.55;
  color: var(--ink);
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
  min-height: 4rem;
}
html[lang^="zh"] .pack-crack__verdict { font-family: var(--zh); font-style: normal; font-size: 1rem; line-height: 1.85; }
.pack-crack__verdict strong {
  color: var(--uw-purple-deep);
  font-style: normal;
  font-weight: 600;
}
.pack-crack__presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.pack-crack__presets .btn {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.6rem;
  font-size: 0.78rem;
}
.pack-crack__instruction {
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.6;
}

.pc-voter { cursor: pointer; transition: r 0.12s ease; }
.pc-voter--blue { fill: var(--r-blue); }
.pc-voter--red  { fill: var(--r-red); }
.pc-district-outline {
  fill: none;
  stroke-width: 3;
  stroke-linejoin: round;
  pointer-events: none;
}
.pc-district-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  pointer-events: none;
}

/* ---------- Module 3: Mid-decade map ---------- */
.midterm-map { max-width: var(--measure-wide); margin: 0 auto; }
.midterm-map__legend {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  font-family: var(--sans);
  font-size: 0.82rem;
}
.midterm-map__legend-item { display: flex; align-items: center; gap: 0.5rem; }
.midterm-map__swatch {
  width: 14px;
  height: 14px;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 1px;
}
.midterm-map__container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 900px) {
  .midterm-map__container { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
.midterm-map__svg {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 1rem;
}
.midterm-map__svg svg { width: 100%; height: auto; display: block; }
.mm-state {
  stroke: var(--bg-card);
  stroke-width: 0.75;
  cursor: pointer;
  transition: opacity 0.15s ease, stroke-width 0.15s ease;
}
.mm-state--inactive { opacity: 0.18; cursor: default; }
.mm-state:hover { opacity: 0.85; }
.mm-state--selected {
  stroke: var(--ink);
  stroke-width: 1.5;
}
.mm-state-border {
  fill: none;
  stroke: rgba(44, 40, 35, 0.32);
  stroke-width: 0.6;
  pointer-events: none;
}
.mm-nation-border {
  fill: none;
  stroke: rgba(44, 40, 35, 0.52);
  stroke-width: 1;
  pointer-events: none;
}
.midterm-map__detail {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 1.5rem;
  font-family: var(--sans);
  font-size: 0.92rem;
  line-height: 1.6;
}
html[lang^="zh"] .midterm-map__detail { font-family: var(--zh-sans); }
.midterm-map__detail h4 {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 500;
  margin: 0 0 0.25rem;
  font-variation-settings: "opsz" 36, "SOFT" 50;
}
html[lang^="zh"] .midterm-map__detail h4 { font-family: var(--zh); }
.midterm-map__detail-status {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}
html[lang^="zh"] .midterm-map__detail-status { letter-spacing: 0.04em; text-transform: none; }
.midterm-map__detail dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem 1rem;
  margin: 0;
  font-size: 0.86rem;
}
.midterm-map__detail dt {
  color: var(--ink-faint);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-top: 0.15rem;
}
html[lang^="zh"] .midterm-map__detail dt { letter-spacing: 0.04em; text-transform: none; font-size: 0.78rem; }
.midterm-map__detail dd { margin: 0; color: var(--ink); }

/* ---------- Module 4: Math steps ---------- */
.math-steps {
  max-width: var(--measure-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 1000px) { .math-steps { grid-template-columns: repeat(3, 1fr); } }
.math-step {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  position: relative;
}
.math-step::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--uw-gold) 30%, var(--uw-gold) 70%, transparent);
  opacity: 0.5;
}
.math-step h3 {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 500;
  margin: 0 0 0.75rem;
  color: var(--uw-purple-deep);
  font-variation-settings: "opsz" 24, "SOFT" 50;
}
html[lang^="zh"] .math-step h3 { font-family: var(--zh); }
.math-step p {
  font-family: var(--sans);
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 1.25rem;
}
.math-step__viz {
  aspect-ratio: 4 / 3;
  background: var(--bg-deep);
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
}
.math-step__viz svg { width: 100%; height: 100%; display: block; }

/* ---------- Module 5: Court timeline ---------- */
.court-timeline {
  max-width: var(--measure-wide);
  margin: 0 auto;
  position: relative;
  padding: 1rem 0;
}
.court-timeline::before {
  content: "";
  position: absolute;
  top: 1rem; bottom: 1rem; left: 1.5rem;
  width: 1px;
  background: var(--rule);
}
.court-event { position: relative; padding: 0 0 2rem 3.5rem; }
.court-event::before {
  content: "";
  position: absolute;
  left: 1.25rem;
  top: 0.5rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--uw-purple);
}
.court-event--win::before  { border-color: var(--sage); }
.court-event--loss::before { border-color: var(--r-red); }
.court-event__year {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--ink-faint);
  margin: 0 0 0.25rem;
  font-variant-numeric: lining-nums tabular-nums;
}
.court-event__case {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--uw-purple-deep);
  margin: 0 0 0.4rem;
}
html[lang^="zh"] .court-event__case { font-family: var(--display), var(--zh); }
.court-event__summary {
  font-family: var(--sans);
  font-size: 0.93rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 0.6rem;
}
.court-event__quote {
  font-family: var(--display);
  font-style: italic;
  font-size: 1rem;
  color: var(--ink);
  border-left: 3px solid var(--uw-gold);
  padding: 0.25rem 0 0.25rem 1rem;
  margin: 0.5rem 0 0;
}
.court-event__quote-source {
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--ink-faint);
  margin-top: 0.35rem;
  font-style: normal;
  display: block;
}

/* ---------- Module 6: Massachusetts paradox ---------- */
.ma-paradox {
  max-width: var(--measure-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 900px) { .ma-paradox { grid-template-columns: 1fr 1fr; } }
.ma-panel {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 1.5rem;
}
.ma-panel h3 {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 500;
  margin: 0 0 0.5rem;
  font-variation-settings: "opsz" 24, "SOFT" 50;
}
html[lang^="zh"] .ma-panel h3 { font-family: var(--zh); font-weight: 600; }
.ma-panel p {
  font-family: var(--sans);
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 1rem;
}
.ma-panel__viz svg { width: 100%; height: auto; display: block; }
.ma-pivot {
  grid-column: 1 / -1;
  background: var(--ink);
  color: var(--bg-card);
  padding: 2rem;
  text-align: center;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.55;
  border-radius: 2px;
}
html[lang^="zh"] .ma-pivot { font-family: var(--zh); font-style: normal; font-size: 1.2rem; line-height: 1.85; }
.ma-pivot strong {
  font-style: normal;
  font-weight: 600;
  color: var(--uw-gold-soft);
}

/* ---------- Module 7: RCV simulator ---------- */
.rcv-simulator {
  max-width: var(--measure-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  background: #2c2823;
  padding: 2rem;
  border: 1px solid #4a3e3a;
  border-radius: 2px;
}
@media (min-width: 900px) {
  .rcv-simulator { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
}
.rcv-controls {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.rcv-controls h3 {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 500;
  margin: 0 0 0.4rem;
  color: var(--uw-gold-soft);
  font-variation-settings: "opsz" 24, "SOFT" 50;
}
.rcv-controls p {
  font-family: var(--sans);
  font-size: 0.88rem;
  line-height: 1.65;
  color: #b8b09e;
  margin: 0 0 1rem;
}
.rcv-control { border-top: 1px solid #4a3e3a; padding-top: 1rem; }
.rcv-control__label {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b8b09e;
  margin: 0 0 0.5rem;
  display: flex;
  justify-content: space-between;
}
html[lang^="zh"] .rcv-control__label { letter-spacing: 0.04em; text-transform: none; }
.rcv-control__value { color: var(--uw-gold-soft); font-weight: 500; }
.rcv-control input[type="range"] { width: 100%; accent-color: var(--uw-gold-soft); }
.rcv-faction-row {
  display: grid;
  grid-template-columns: 7rem 1fr 3rem;
  gap: 0.75rem;
  align-items: center;
  margin: 0.4rem 0;
}
.rcv-faction-name { font-family: var(--sans); font-size: 0.88rem; color: #e9e2d4; }
.rcv-faction-bar { height: 8px; background: #3a322e; position: relative; border-radius: 1px; }
.rcv-faction-bar-fill {
  position: absolute; top: 0; left: 0; height: 100%;
  background: var(--r-blue);
}
.rcv-faction-pct {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: #e9e2d4;
  text-align: right;
  font-variant-numeric: lining-nums tabular-nums;
}
.rcv-output {
  background: #1f1c18;
  border: 1px solid #4a3e3a;
  border-radius: 2px;
  padding: 1.5rem;
  font-family: var(--sans);
}
html[lang^="zh"] .rcv-output { font-family: var(--zh-sans); }
.rcv-output h4 {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 500;
  margin: 0 0 1rem;
  color: var(--uw-gold-soft);
  font-variation-settings: "opsz" 24, "SOFT" 50;
}
html[lang^="zh"] .rcv-output h4 { font-family: var(--zh); font-weight: 600; }
.rcv-seats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(2.4rem, 1fr));
  gap: 0.4rem;
  margin: 0 0 1.5rem;
}
.rcv-seat {
  aspect-ratio: 1 / 1;
  background: #3a322e;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  color: #e9e2d4;
  letter-spacing: 0.04em;
  transition: background 0.2s ease, transform 0.2s ease;
}
.rcv-seat--filled { transform: scale(1.0); }
.rcv-summary {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.55;
  color: #e9e2d4;
  margin: 0 0 1rem;
  border-top: 1px solid #4a3e3a;
  padding-top: 1rem;
}
html[lang^="zh"] .rcv-summary { font-family: var(--zh); font-style: normal; font-size: 1rem; line-height: 1.85; }
.rcv-summary strong { color: var(--uw-gold-soft); font-weight: 600; font-style: normal; }
.rcv-tradeoff {
  font-family: var(--sans);
  font-size: 0.84rem;
  color: #98907f;
  font-style: italic;
  border-top: 1px solid #3a322e;
  padding-top: 1rem;
  margin: 0;
  line-height: 1.6;
}
html[lang^="zh"] .rcv-tradeoff { font-family: var(--zh-sans); font-style: normal; line-height: 1.85; }
.rcv-threshold-note {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: #b8b09e;
  margin: 0.5rem 0 0;
}