/* ===================================================================
   Scoring Page - SleepPrint methodology page-specific styles
   Shared reading-page and TOC styles live in styles-reading/layout.css
   =================================================================== */

.scoring-page .hero h1 {
  font-family: "Outfit", sans-serif;
  font-size: 2.3rem;
  line-height: 1.05;
  letter-spacing: 0;
  margin: 0 0 6px;
}

.scoring-page .hero-highlights {
  padding: 0 28px var(--space-5);
  gap: var(--space-4);
}

.scoring-page .highlight-card {
  padding: var(--space-4);
  border-radius: 10px;
}

.scoring-page .highlight-head {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  margin-bottom: 8px;
}

.scoring-page .highlight-card h3 {
  font-size: 0.92rem;
  margin-bottom: 4px;
}

.scoring-page .highlight-card p {
  margin: 4px 0 0;
  font-size: 0.84rem;
  line-height: 1.5;
}

.scoring-page .layout {
  gap: var(--space-6);
  margin-top: var(--space-4);
}

.scoring-page .content-stack {
  gap: var(--space-6);
}

.scoring-page .section-card,
.scoring-page .footer-card {
  border-radius: 10px;
  padding: var(--space-6);
}

.scoring-page .section-title {
  font-size: 1.35rem;
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--text);
}

.scoring-page .section-head .section-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 6px;
  border-radius: 6px;
  font-weight: 800;
}

.scoring-page .section-head .section-tag .material-symbols-outlined {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--surface-alt);
  color: var(--muted);
  font-size: 16px;
}

.scoring-page .callout {
  border-radius: 10px;
}

.scoring-page .callout.brand .section-tag { color: var(--accent); }
.scoring-page .callout.editorial .section-tag { color: var(--amber); }

/* ---- Overview ---- */

.method-summary-grid,
.formula-note-grid,
.weight-summary-grid,
.science-grid,
.control-grid,
.limit-grid {
  display: grid;
  gap: var(--space-4);
}

.method-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.method-summary-card,
.formula-note,
.weight-group-card,
.science-card,
.control-card,
.limit-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  padding: var(--space-4);
  box-shadow: 0 4px 16px rgba(60, 64, 67, 0.05);
}

.method-summary-number,
.weight-group-card span {
  display: block;
  font-family: "Outfit", sans-serif;
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 8px;
}

.method-summary-card h3,
.formula-note h3,
.weight-group-card h3,
.science-card h3,
.control-card h3,
.limit-card h3,
.evidence-row h3 {
  margin: 0 0 6px;
  font-size: 0.94rem;
  font-weight: 700;
}

.method-summary-card p,
.formula-note p,
.weight-group-card p,
.science-card p,
.control-card p,
.limit-card p,
.evidence-row p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.6;
}

/* ---- Formula ---- */

.formula-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-alt);
  font-family: "Outfit", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
}

.formula-panel strong {
  color: var(--accent);
}

.formula-note-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ---- Weights ---- */

.scoring-page .weight-dist--groups .weight-seg { background: var(--accent); }
.scoring-page .weight-seg--core { flex: 50; }
.scoring-page .weight-seg--durability { flex: 20; background: var(--green); }
.scoring-page .weight-seg--movement { flex: 14; background: var(--amber); }
.scoring-page .weight-seg--ownership { flex: 16; background: #5f6368; }

.weight-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.weight-group-card {
  border-left-width: 3px;
}

.weight-group-card.core { border-left-color: var(--accent); }
.weight-group-card.durability { border-left-color: var(--green); }
.weight-group-card.movement { border-left-color: var(--amber); }
.weight-group-card.ownership { border-left-color: #5f6368; }
.weight-group-card.durability span { color: var(--green); }
.weight-group-card.movement span { color: var(--amber); }
.weight-group-card.ownership span { color: #5f6368; }

.category-weight-table td:nth-child(2),
.category-weight-table th:nth-child(2) {
  text-align: center;
  width: 74px;
}

.category-weight-table td:nth-child(3),
.category-weight-table th:nth-child(3) {
  width: 104px;
}

.scoring-page .evidence-badge--hands-on {
  background: var(--green-soft);
  color: var(--green);
  border: 1px solid rgba(24, 128, 56, 0.18);
}

.scoring-page .evidence-badge--mixed {
  background: var(--amber-soft);
  color: var(--amber);
  border: 1px solid rgba(176, 96, 0, 0.18);
}

.scoring-page .evidence-badge--sourced {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid rgba(79, 70, 229, 0.16);
}

/* ---- Science and evidence ---- */

.science-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.science-card {
  border-left-width: 3px;
}

.science-card.high { border-left-color: var(--green); }
.science-card.medium { border-left-color: var(--accent); }
.science-card.guardrail { border-left-color: var(--amber); }

.evidence-stack {
  display: grid;
  gap: var(--space-3);
}

.evidence-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 4px 16px rgba(60, 64, 67, 0.05);
}

.evidence-icon,
.control-card > .material-symbols-outlined {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--surface-alt);
  color: var(--accent);
}

/* ---- Fit layer ---- */

.fit-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-4);
  align-items: start;
}

.fit-matrix {
  display: grid;
  gap: var(--space-2);
}

.fit-matrix-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 150px;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  font-size: 0.84rem;
}

.fit-matrix-row.head {
  background: var(--surface-alt);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fit-matrix-row strong {
  font-size: 0.8rem;
  color: var(--text);
}

/* ---- Score scale ---- */

.scale-list {
  display: grid;
  gap: var(--space-2);
}

.scale-row {
  display: grid;
  grid-template-columns: 84px 120px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: 8px;
  background: var(--surface);
}

.scale-row strong,
.scale-row span {
  font-size: 0.86rem;
}

.scale-row strong {
  font-family: "Outfit", sans-serif;
  color: var(--text);
}

.scale-row span {
  font-weight: 800;
}

.scale-row p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.scale-row.exceptional,
.scale-row.excellent { border-left-color: var(--green); }
.scale-row.very-good { border-left-color: #0e8c7c; }
.scale-row.good { border-left-color: var(--accent); }
.scale-row.acceptable { border-left-color: #6d4c9f; }
.scale-row.fair { border-left-color: var(--amber); }
.scale-row.below { border-left-color: #d84315; }
.scale-row.poor { border-left-color: var(--red); }

/* ---- Controls, limits, sidebar, sources ---- */

.control-grid,
.limit-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.control-card > .material-symbols-outlined {
  margin-bottom: var(--space-3);
  font-size: 18px;
}

.scoring-page .verification-card { background: var(--surface); }

.scoring-page .verify-grid {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.scoring-page .verify-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.scoring-page .verify-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line);
  flex-shrink: 0;
  margin-top: 5px;
}

.scoring-page .verify-dot.active {
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(24, 128, 56, 0.15);
}

.scoring-page .verify-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.scoring-page .verify-info strong {
  font-size: 0.78rem;
  color: var(--text);
}

.scoring-page .verify-info span {
  font-size: 0.7rem;
  color: var(--muted);
  line-height: 1.4;
}

.scoring-page .source-card h3 {
  margin: 4px 0;
  font-size: 0.88rem;
  line-height: 1.4;
}

.scoring-page .source-card a {
  display: inline;
}

.scoring-page .source-pill {
  font-size: 0.6rem;
}

/* ---- Responsive ---- */

@media (max-width: 920px) {
  .scoring-page .hero-highlights {
    padding: 0 20px var(--space-4);
  }

  .method-summary-grid,
  .formula-note-grid,
  .weight-summary-grid,
  .science-grid,
  .fit-layout,
  .control-grid,
  .limit-grid {
    grid-template-columns: 1fr;
  }

  .scale-row,
  .fit-matrix-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

@media (max-width: 640px) {
  .scoring-page .hero-highlights {
    grid-template-columns: 1fr;
    padding: 0 var(--space-4) var(--space-4);
    gap: var(--space-2);
  }

  .scoring-page .section-title {
    font-size: 1.18rem;
  }

  .scoring-page .content-stack {
    gap: var(--space-5);
  }

  .formula-panel {
    padding: var(--space-4);
    gap: var(--space-2);
  }

  .category-weight-table th,
  .category-weight-table td {
    min-width: 120px;
  }
}