/* ═══════════════════════════════════════
   Results — Scores, factors, alignment,
   patterns, risks, verdict, drilldown
   ═══════════════════════════════════════ */

#results {
  flex-direction: column;
  align-items: center;
  padding: 30px 20px;
}
.results-container {
  max-width: 800px;
  width: 100%;
}
.results-title {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--navy);
  text-align: center;
}
.results-sub {
  text-align: center;
  color: var(--slate);
  font-size: .9rem;
  margin-bottom: 4px;
}
.results-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
  flex-wrap: wrap;
}

/* Section headings */
.section-heading {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
}
.section-sub {
  font-size: .85rem;
  color: var(--accent);
  margin-bottom: 16px;
  line-height: 1.5;
}

/* ─── Score Summary ─── */
.score-summary {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin: 30px 0;
  flex-wrap: wrap;
}
.score-block {
  text-align: center;
  padding: 24px 36px;
  border-radius: 4px;
  min-width: 200px;
}
.score-block.fifty { background: var(--blue-light); border: 2px solid var(--navy); }
.score-block.fifty-one { background: var(--orange-light); border: 2px solid var(--orange); }
.score-block .score-label {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.score-block.fifty .score-label { color: var(--navy); }
.score-block.fifty-one .score-label { color: var(--orange); }
.score-block .score-value {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1;
}
.score-block.fifty .score-value { color: var(--navy); }
.score-block.fifty-one .score-value { color: var(--orange); }
.score-block .score-unit {
  font-size: .8rem;
  color: var(--accent);
  margin-top: 4px;
}

/* ─── Partnership Alignment ─── */
.alignment-card {
  background: var(--white);
  border: 1px solid var(--divider);
  border-radius: 4px;
  padding: 20px 24px;
  margin-bottom: 24px;
}
.alignment-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.alignment-label {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--navy);
  font-size: 1rem;
}
.alignment-score {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--gold);
  font-size: 1.8rem;
}
.alignment-bar-track {
  height: 8px;
  background: var(--divider);
  border-radius: 4px;
  overflow: hidden;
}
.alignment-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--green));
  border-radius: 4px;
  transition: width .8s ease;
}
.alignment-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.alignment-badge {
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 3px;
  background: var(--green-light);
  color: var(--green);
}
.alignment-stats {
  font-size: .75rem;
  color: var(--accent);
}
.alignment-detail {
  font-size: .85rem;
  color: var(--slate);
  margin-top: 8px;
  line-height: 1.55;
}

/* ─── Factor Cards ─── */
.factor-card {
  background: var(--white);
  border: 1px solid var(--divider);
  border-radius: 4px;
  padding: 20px 24px;
  margin-bottom: 12px;
}
.factor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.factor-name {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--navy);
  font-size: .95rem;
}
.factor-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.factor-winner {
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 600;
  padding: 3px 12px;
  border-radius: 3px;
}
.factor-winner.fifty { background: var(--blue-light); color: var(--navy); }
.factor-winner.fifty-one { background: var(--orange-light); color: var(--orange); }
.factor-winner.even { background: var(--light); color: var(--slate); }
.factor-bar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--divider);
}
.factor-bar .bar-fifty {
  background: var(--navy);
  transition: width .6s ease;
}
.factor-bar .bar-fifty-one {
  background: var(--orange);
  transition: width .6s ease;
}
.factor-note {
  font-size: .85rem;
  color: var(--slate);
  margin-top: 8px;
  line-height: 1.5;
}
.factor-flag {
  font-size: .78rem;
  color: var(--red);
  margin-top: 6px;
  padding: 6px 10px;
  background: rgba(139, 58, 58, .06);
  border-left: 3px solid var(--red);
  border-radius: 2px;
  line-height: 1.4;
}

/* Conviction badges */
.factor-conviction {
  font-family: var(--font-display);
  font-size: .7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 3px;
}
.conviction-strong { background: rgba(27,42,74,.1); color: var(--navy); }
.conviction-moderate { background: rgba(201,168,76,.15); color: var(--accent); }
.conviction-slight { background: var(--light); color: var(--slate); }
.conviction-neutral { background: var(--light); color: var(--accent); }

/* Agreement tags */
.agreement-tag {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 8px;
  border-radius: 3px;
  margin-left: 8px;
  vertical-align: middle;
}
.agreement-tag.agree { background: var(--green-light); color: var(--green); }
.agreement-tag.partial { background: #FFF8E1; color: var(--accent); }
.agreement-tag.disagree { background: rgba(139, 58, 58, .1); color: var(--red); }

/* ─── Per-Partner Breakdown ─── */
.partner-breakdown {
  display: flex;
  gap: 16px;
  margin: 10px 0 4px;
  flex-wrap: wrap;
}
.partner-lean {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
}
.partner-name-small {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--slate);
  min-width: 42px;
}
.partner-dir {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .72rem;
  padding: 1px 7px;
  border-radius: 2px;
}
.partner-dir.fifty { color: var(--navy); background: var(--blue-light); }
.partner-dir.fifty-one { color: var(--orange); background: var(--orange-light); }
.partner-dir.even { color: var(--slate); background: var(--light); }
.partner-conv {
  font-size: .72rem;
  color: var(--accent);
}

/* ─── Drill-Down (Question Detail) ─── */
.factor-drilldown {
  margin-top: 10px;
  border-top: 1px dashed var(--divider);
  padding-top: 8px;
}
.drill-toggle {
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: .78rem;
  color: var(--navy);
  cursor: pointer;
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: .7;
  transition: opacity .2s;
}
.drill-toggle:hover { opacity: 1; }
.drill-icon { font-size: .6rem; }
.drill-content {
  margin-top: 8px;
  animation: slideDown .2s ease;
}
.drill-question {
  padding: 10px 12px;
  border-radius: 3px;
  margin-bottom: 8px;
  font-size: .8rem;
  line-height: 1.5;
}
.drill-match { background: var(--green-light); border-left: 3px solid var(--green); }
.drill-differ { background: rgba(139,58,58,.05); border-left: 3px solid var(--red); }
.drill-single { background: var(--blue-light); border-left: 3px solid var(--navy); }
.drill-q-text {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--navy);
  font-size: .8rem;
  margin-bottom: 6px;
}
.drill-answers { display: flex; flex-direction: column; gap: 4px; }
.drill-answer { display: flex; gap: 6px; }
.drill-partner {
  font-weight: 600;
  color: var(--slate);
  min-width: 48px;
  flex-shrink: 0;
}
.drill-response { color: var(--charcoal); }
.drill-match-tag {
  display: inline-block;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 1px 6px;
  border-radius: 2px;
  margin-top: 6px;
}
.drill-match-tag.match { background: var(--green-light); color: var(--green); }
.drill-match-tag.differ { background: rgba(139,58,58,.1); color: var(--red); }

/* ─── Cross-Factor Patterns ─── */
.pattern-card {
  background: var(--white);
  border: 1px solid var(--divider);
  border-radius: 4px;
  padding: 16px 20px;
  margin-bottom: 10px;
}
.pattern-card.pattern-warning { border-left: 4px solid var(--orange); }
.pattern-card.pattern-positive { border-left: 4px solid var(--green); }
.pattern-card.pattern-info { border-left: 4px solid var(--navy); }
.pattern-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.pattern-icon { font-size: 1rem; }
.pattern-name {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--navy);
  font-size: .9rem;
}
.pattern-severity {
  font-size: .65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 8px;
  border-radius: 3px;
  margin-left: auto;
}
.severity-warning { background: var(--orange-light); color: var(--orange); }
.severity-positive { background: var(--green-light); color: var(--green); }
.severity-info { background: var(--blue-light); color: var(--navy); }
.pattern-detail {
  font-size: .88rem;
  color: var(--charcoal);
  line-height: 1.55;
}
.pattern-factors {
  font-size: .76rem;
  color: var(--accent);
  margin-top: 6px;
}

/* ─── Risk Assessment ─── */
.risk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.risk-card {
  background: var(--white);
  border: 1px solid var(--divider);
  border-radius: 4px;
  padding: 16px 18px;
}
.risk-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.risk-name {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--navy);
  font-size: .85rem;
}
.risk-level {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 8px;
  border-radius: 3px;
}
.level-low { background: var(--green-light); color: var(--green); }
.level-moderate { background: #FFF8E1; color: var(--accent); }
.level-high { background: rgba(139,58,58,.1); color: var(--red); }
.risk-bar-track {
  height: 6px;
  background: var(--divider);
  border-radius: 3px;
  overflow: hidden;
}
.risk-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .6s ease;
}
.risk-fill-low { background: var(--green); }
.risk-fill-moderate { background: var(--gold); }
.risk-fill-high { background: var(--red); }
.risk-detail {
  font-size: .85rem;
  color: var(--slate);
  margin-top: 8px;
  line-height: 1.5;
}

/* ─── Verdict Box ─── */
.verdict-box {
  margin: 30px 0;
  padding: 32px;
  border-radius: 4px;
  text-align: center;
}
.verdict-box.fifty { background: var(--blue-light); border: 2px solid var(--navy); }
.verdict-box.fifty-one { background: var(--orange-light); border: 2px solid var(--orange); }
.verdict-box.even { background: var(--green-light); border: 2px solid var(--green); }
.verdict-heading {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 10px;
}
.verdict-box.fifty .verdict-heading { color: var(--navy); }
.verdict-box.fifty-one .verdict-heading { color: var(--orange); }
.verdict-box.even .verdict-heading { color: var(--green); }
.verdict-text {
  font-size: .95rem;
  color: var(--charcoal);
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}
.verdict-details {
  font-size: .9rem;
  color: var(--charcoal);
  line-height: 1.6;
  max-width: 600px;
  margin: 12px auto 0;
  text-align: left;
}
.verdict-agreement {
  font-size: .9rem;
  color: var(--slate);
  margin-top: 14px;
}
.verdict-flags {
  text-align: left;
  max-width: 600px;
  margin: 16px auto 0;
  padding: 14px 18px;
  background: rgba(139, 58, 58, .05);
  border: 1px solid rgba(139, 58, 58, .15);
  border-radius: 4px;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--charcoal);
}
.verdict-flags ul { margin: 6px 0 0 18px; padding: 0; }
.verdict-flags li { margin-bottom: 4px; }
.verdict-disclaimer {
  font-size: .82rem;
  color: var(--accent);
  margin-top: 16px;
  opacity: .8;
}