/* Homepage "Why the GMD" charts (generated by scripts/build-case-charts.js).
   Loaded only by index.html. */
.case h3 { font-size: 1.05rem; color: var(--navy); font-weight: 700; margin: 0 0 6px; }
.case p { font-size: 0.93rem; color: var(--body); line-height: 1.5; margin: 0 0 12px; }
.case figure { margin: 0; }
.case-map { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 22px 24px; margin-bottom: 18px; }
.case-fig img { width: 100%; height: auto; display: block; }
.case-note { font-size: 0.76rem; color: var(--muted); }
.case p.case-stat { font-size: 0.95rem; margin-bottom: 16px; }
.case-stat b { display: block; font-size: 1.9rem; font-weight: 800; color: var(--navy); line-height: 1.1; }
.case p.case-legend-title { font-size: 0.72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin: 0 0 8px; }
.case-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 0.86rem; color: var(--body); }
.case-legend li { display: flex; align-items: center; gap: 8px; }
.case-legend i { width: 14px; height: 14px; border-radius: 3px; flex: none; border: 1px solid rgba(6, 43, 86, .12); }
.case-legend span { margin-left: auto; color: var(--muted); }
.case-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.case-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 20px 22px; display: flex; flex-direction: column; }
.case-key { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.8rem; color: var(--body); margin-bottom: 8px; align-items: center; }
.case-key span { display: inline-flex; align-items: center; gap: 6px; }
.case-key i { display: inline-block; width: 14px; height: 10px; border-radius: 2px; }
.case-key i.bg { background: var(--navy); }
.case-key i.bs { background: #b9c3cd; }
.case-key i.gmd { height: 0; border-top: 3px solid var(--blue); border-radius: 0; }
.case-svg { width: 100%; height: auto; display: block; }
.case-svg .gl { stroke: #eef2f7; stroke-width: 1; }
.case-svg .yl { font-size: 13px; fill: #9aa6b2; text-anchor: end; }
.case-svg .xl { font-size: 13px; fill: #9aa6b2; text-anchor: middle; }
.case-svg path.gmd { fill: none; stroke: var(--blue); stroke-width: 2.6; stroke-linejoin: round; }
.case-key i.span { background: #b9c3cd; }
.case-svg .gv { stroke: #eef2f7; stroke-width: 1; }
.case-svg .sl { font-size: 12px; fill: var(--muted); }
.case-svg .span rect { fill: #b9c3cd; }
.case-svg .span:hover rect { fill: var(--blue); }
.case-bars { margin: 0; display: grid; gap: 9px; }
.case-bars > div { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 10px; align-items: center; }
.case-bars dt { font-size: 0.84rem; color: var(--ink); text-align: right; line-height: 1.2; white-space: nowrap; }
.case-bars dd { margin: 0; display: grid; row-gap: 2px; font-size: 0.76rem; }
.case-bars .row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.case-bars .who { color: var(--muted); font-size: 0.72rem; line-height: 1.2; white-space: nowrap; }
.case-bars .b { display: block; height: 9px; border-radius: 2px; min-width: 2px; flex: none; }
.case-bars .b.gmd { background: var(--navy); }
.case-bars .b.src { background: #b9c3cd; }
.case-bars .n { color: var(--navy); font-weight: 700; line-height: 1.1; }
.case-bars .n.src { color: var(--muted); font-weight: 500; }
.case-link { margin-top: auto; padding-top: 10px; font-size: 0.88rem; font-weight: 600; }
@media (max-width: 900px) {
  .case-map, .case-pair { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .case-map, .case-card { padding: 16px; }
  .case-svg .yl, .case-svg .xl { font-size: 22px; }
  .case-svg .sl { font-size: 20px; }
  .case-bars > div { grid-template-columns: 1fr; gap: 3px; }
  .case-bars dt { text-align: left; font-weight: 600; }
}