/* ============================================================
   STATE OF THE AMERICAN MALE — polished statistics styling
   ============================================================ */

/* ---------- Rating badges ---------- */
.rating{
  display:inline-block;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:.38rem .85rem;
  border-radius:4px;
  margin-left:.75rem;
  vertical-align:middle;
  white-space:nowrap;
  border:2px solid;
  position:relative;
  top:-2px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 2px 6px rgba(0,0,0,.10);
}

.rating-awesome{
  color:#0d3d1c;
  background:linear-gradient(180deg,#e3f6e7 0%,#c8e8cd 100%);
  border-color:#1a5c2c;
}
.rating-good{
  color:#124a12;
  background:linear-gradient(180deg,#e8f5e5 0%,#cbe6c5 100%);
  border-color:#2c6b2c;
}
.rating-neutral{
  color:#3a3a3a;
  background:linear-gradient(180deg,#efefef 0%,#d9d9d9 100%);
  border-color:#5c5c5c;
}
.rating-concerning{
  color:#7a4a00;
  background:linear-gradient(180deg,#fdf3dd 0%,#f0dda5 100%);
  border-color:#a06b0c;
}
.rating-serious{
  color:#5c0e0e;
  background:linear-gradient(180deg,#fce3e3 0%,#f2c1c1 100%);
  border-color:#8a1c1c;
}

/* ---------- Rating key ---------- */
.rating-key{
  margin:2rem 0;
  padding:1.6rem 1.7rem 1.7rem;
  background:linear-gradient(180deg,#f6ecd7 0%,#ecdfc3 100%);
  border:1px solid var(--line);
  border-left:5px solid var(--brass);
  border-radius:4px;
  box-shadow:var(--shadow);
}
.rating-key h3{
  margin:0 0 1.1rem;
  font-size:1.06rem;
  color:var(--head-1);
  padding-bottom:.55rem;
  border-bottom:1px solid var(--line);
  letter-spacing:.04em;
}
.rating-legend{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:.6rem 0;
  font-size:1rem;
  color:var(--ink-2);
  border-bottom:1px dashed var(--line);
}
.rating-legend:last-child{border-bottom:none}
.rating-legend .rating{
  margin-left:0;
  flex-shrink:0;
  min-width:150px;
  text-align:center;
  font-size:.7rem;
}

/* ---------- SVG charts ---------- */
.stat-chart{
  width:100%;
  height:auto;
  display:block;
  margin:1rem 0;
}
.chart-wrap{
  background:linear-gradient(180deg,#f6ecd7 0%,#ecdfc3 100%);
  border:1px solid var(--line);
  border-left:5px solid var(--brass);
  border-radius:4px;
  box-shadow:var(--shadow);
  padding:1.5rem 1.6rem 1.4rem;
  margin:1.8rem 0;
}
.chart-wrap h3{
  margin:0 0 1.1rem;
  font-size:1.02rem;
  color:var(--head-1);
  letter-spacing:.03em;
  padding-bottom:.5rem;
  border-bottom:1px solid var(--line);
}
.chart-caption{
  margin:1rem 0 0;
  font-size:.86rem;
  color:var(--muted);
  line-height:1.55;
  font-style:italic;
}

/* ---------- Stat cards ---------- */
.stat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1rem;
  margin:1.5rem 0 1.9rem;
}
.stat-card{
  background:linear-gradient(180deg,#f9f0dd 0%,#efe2c6 100%);
  border:1px solid var(--line);
  border-top:3px solid var(--brass);
  border-radius:4px;
  padding:1.15rem 1.25rem 1.2rem;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:.35rem;
}
.stat-value{
  font-size:1.7rem;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--head-1);
  line-height:1.1;
}
.stat-label{
  font-family:ui-sans-serif,system-ui,sans-serif;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-2);
  line-height:1.35;
}
.stat-note{
  font-size:.82rem;
  color:var(--muted);
  line-height:1.5;
}

/* ---------- Sources ---------- */
.stat-sources{
  margin-top:1.6rem;
  padding-top:1.1rem;
  border-top:1px solid var(--line);
}
.stat-sources h4{
  font-family:ui-sans-serif,system-ui,sans-serif;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--head-2);
  margin:0 0 .6rem;
}
.stat-sources ul{
  margin:0;
  padding-left:1.2rem;
}
.stat-sources li{
  margin:.35rem 0;
  font-size:.92rem;
  color:var(--ink-2);
}
.stat-sources a{
  color:var(--head-2);
  text-decoration-thickness:1px;
}
.stat-sources a:hover{color:var(--oxblood)}

/* ---------- Small screens ---------- */
@media (max-width:640px){
  .rating{font-size:.62rem;padding:.32rem .65rem;letter-spacing:.14em;
          margin-left:.4rem;top:-1px}
  .rating-legend .rating{min-width:110px;font-size:.6rem}
  .rating-legend{font-size:.92rem;gap:.7rem}
  .stat-value{font-size:1.4rem}
  .stat-label{font-size:.72rem}
  .chart-wrap{padding:1.1rem 1rem 1rem}
  .chart-wrap h3{font-size:.94rem}
  .chart-caption{font-size:.78rem}
  .stat-sources li{font-size:.86rem}
}