/* Styles for facts.html (moved from its <style> block). */

* { box-sizing: border-box; margin: 0; padding: 0; min-width: 0; }
button, input, select, textarea { font-family: inherit; }
body { font-family: var(--font-system); background: var(--color-surface-soft); color: var(--color-text-strong); overflow-x: hidden; }
a { color: var(--color-accent); text-decoration: none; }


/* Hero */
.hero {
  background: var(--color-navy);
  color: var(--color-text-inverse); padding: 52px var(--space-6) 60px; text-align: center;
}
.hero h1 { font-family: var(--font-display); font-size: clamp(2rem, 6vw, 3.2rem); font-weight: var(--font-weight-bold); letter-spacing: -.01em; }
.hero .sub { margin-top: var(--space-2-5); opacity: .72; font-size: var(--font-size-lg); max-width: 480px; margin-inline: auto; line-height: 1.5; }
.counters { display: flex; flex-wrap: wrap; justify-content: center; gap: 36px; margin-top: 44px; }
.counter .num { font-family: var(--font-display); font-size: clamp(2.4rem, 7vw, 3.8rem); font-weight: var(--font-weight-bold); color: var(--color-accent-soft); line-height: 1; }
.counter .lbl { font-size: var(--font-size-counter-label); text-transform: uppercase; letter-spacing: .09em; opacity: .65; margin-top: var(--space-1); }

/* Layout */
.main { max-width: 1080px; margin: 0 auto; padding: 44px 18px 80px; }
.section { margin-bottom: 52px; }
.section-label { font-size: var(--font-size-label); text-transform: uppercase; letter-spacing: .1em; color: var(--color-accent); font-weight: var(--font-weight-bold); margin-bottom: var(--space-1); }
.section-title { font-family: var(--font-display); font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); margin-bottom: 3px; }
.section-sub   { color: var(--color-text-slate); font-size: var(--font-size-base); margin-bottom: 22px; }
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.g3 { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-4); }
.g4 { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-3-5); }
@media(max-width:720px) { .g2,.g3,.g4 { grid-template-columns: 1fr; } }
@media(max-width:900px) { .g3 { grid-template-columns: 1fr 1fr; } .g4 { grid-template-columns: 1fr 1fr; } }

/* Cards */
.card { background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius-xl); padding: 22px; overflow: hidden; }
.card-title { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--color-text-slate); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-3-5); }

/* Fact cards */
.fc { background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius-xl); padding: 18px var(--space-5); display: flex; flex-direction: column; justify-content: center; position: relative; }
.fc .val  { font-family: var(--font-display); font-size: var(--font-size-fact-value); font-weight: var(--font-weight-bold); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc .val.wrap { font-size: var(--font-size-lg); white-space: normal; overflow: visible; text-overflow: unset; }
.mlink, .mlink:visited, .mlink:hover, .mlink:active, .mlink:focus { text-decoration: none; color: inherit; outline: none; }
.fc .name { font-size: var(--font-size-xs); color: var(--color-text-slate); margin-top: var(--space-1); line-height: 1.3; }
.fc .detail { font-size: var(--font-size-xs); color: var(--color-text-slate); margin-top: var(--space-2-5); padding-top: var(--space-2-5); border-top: 1px solid var(--color-border-soft); }
.fc-link { position: absolute; bottom: 10px; right: 14px; font-size: var(--font-size-2xs); color: var(--color-accent); text-decoration: none; opacity: .7; }
.fc-link:hover { opacity: 1; }

/* Elder/Sister split */
.gender-bar { display:flex; height:8px; border-radius:var(--radius-xs); overflow:hidden; margin-bottom:var(--space-3-5); gap:var(--space-0-5); }
.gender-bar #elder-bar  { background:var(--color-accent); }
.gender-bar #sister-bar { background:var(--color-pink); flex:1; }
.gender-split { display:flex; justify-content:space-between; align-items:flex-end; }

/* Ranked list */
.rlist { list-style: none; }
.rlist li { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1-5) 0; border-bottom: 1px solid var(--color-border-soft); font-size: var(--font-size-list); }
.rlist li:last-child { border-bottom: none; }
.rnum  { width: 20px; font-size: var(--font-size-label); font-weight: var(--font-weight-bold); color: var(--color-text-slate); flex-shrink: 0; text-align: right; }
.rname { flex: 1; line-height: 1.3; }
.rbar-wrap { width: 80px; flex-shrink: 0; }
.rbar { height: 5px; border-radius: var(--radius-xs); }
.rcount { min-width: 44px; white-space: nowrap; text-align: right; font-size: var(--font-size-xs); color: var(--color-text-slate); flex-shrink: 0; }

/* Timeline */
.tl-wrap { border-radius: var(--radius-lg); overflow: hidden; display: flex; height: 52px; margin-bottom: var(--space-3); }
.tl-seg { display: flex; align-items: center; justify-content: center; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: var(--color-text-inverse); text-align: center; line-height: 1.2; padding: 0 var(--space-2); }
.tl-axis { display: flex; justify-content: space-between; font-size: var(--font-size-label); color: var(--color-text-slate); padding: 0 var(--space-0-5); margin-bottom: 18px; }



/* Footer */
.footer { text-align: center; padding: 28px var(--space-5); color: var(--color-text-slate); font-size: var(--font-size-xs); border-top: 1px solid var(--color-border-soft); }


/* ==== Moved from inline styles in facts.html ==== */


/* page */

.facts-page-g4 {
  margin-bottom: var(--space-5);
}

#elder-pct {
  color: var(--color-accent);
}

.facts-page-div {
  text-align: right;
}

#sister-pct {
  color: var(--color-pink);
}

.fc .name.facts-page-name {
  font-size: var(--font-size-2xs);
  opacity: .55;
  margin-top: var(--space-1-5);
  text-align: center;
}

.facts-page-p {
  font-size: var(--font-size-xs);
  color: var(--color-text-slate);
  margin-bottom: var(--space-3);
}

.facts-page-g2 {
  margin-bottom: var(--space-5);
}

.facts-page-div-2 {
  position: relative;
  height: 270px;
}

.facts-page-div-3 {
  position: relative;
  height: 220px;
}

.facts-page-card {
  margin-bottom: var(--space-5);
}

.facts-page-div-4 {
  position: relative;
  height: 230px;
}

.facts-page-card-2 {
  margin-bottom: var(--space-5);
}

.facts-page-div-5 {
  position: relative;
  height: 250px;
}

.facts-page-g3 {
  margin-bottom: var(--space-5);
}

#footer-ts {
  margin-top: var(--space-1);
}


/* tl-bar */

.facts-tl-bar-tl-seg {
  background: var(--color-text-slate-faint);
  width: 4%;
}

#tl-wait {
  background: var(--color-accent);
}

#tl-prep {
  background: var(--color-navy);
}


/* gender-trend */

.facts-gender-trend-div {
  position: relative;
  height: 250px;
}