/* The 2030 goals scorecard: the hub at /2030goals/ and every /2030goals/<n> page.
   Goal colours are the official SDG colours, passed in as --c. */

.legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.pill{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:999px;border:1.5px solid currentColor;white-space:nowrap}
.pill.good{color:#1f8a4c}.pill.warn{color:#a35f00}.pill.bad{color:#b8322a}.pill.none{color:#6b7280}
.flag{color:#a35f00;font-weight:700;font-size:13px}
.code{font-size:13.5px;font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums}

.banner{background:var(--deep-2);color:var(--on-deep);border-radius:16px;padding:20px 22px;margin-top:22px}
.banner strong{font-family:'Bricolage Grotesque',Figtree,sans-serif;font-size:21px;display:block;margin-bottom:6px;color:#fff}
.banner p{margin:0;color:var(--on-deep-2)}

.yearstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:4px}
.yearstrip span{height:7px;border-radius:999px;background:rgba(255,255,255,.15);overflow:hidden}
.yearstrip span i{display:block;height:100%;background:var(--gold-bright);border-radius:999px}
.yearlabels{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;font-size:12.5px;color:var(--on-deep-2);font-variant-numeric:tabular-nums}

.goals{display:grid;gap:10px;margin-top:26px}
details.sdg{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
details.sdg>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:14px;padding:10px 16px 10px 10px}
details.sdg>summary::-webkit-details-marker{display:none}
details.sdg>summary::after{content:"";width:9px;height:9px;border-right:2.5px solid var(--ink-3);border-bottom:2.5px solid var(--ink-3);transform:rotate(-45deg);transition:transform .15s;margin-right:6px}
details.sdg[open]>summary::after{transform:rotate(45deg)}
.num{width:52px;height:52px;border-radius:10px;display:grid;place-items:center;color:#fff;font-family:'Bricolage Grotesque',Figtree,sans-serif;font-weight:800;font-size:22px;background:var(--c)}
.sdg-name{font-family:'Bricolage Grotesque',Figtree,sans-serif;font-weight:700;font-size:19px;line-height:1.2;min-width:0}
.sdg-name small{display:block;font-family:Figtree,sans-serif;font-weight:400;font-size:15px;color:var(--ink-3);margin-top:2px}
.sdg-body{padding:6px 18px 20px;border-top:4px solid var(--c);display:grid;gap:12px}
.soon{color:var(--ink-3);margin:8px 0 0}

.metric{display:grid;gap:8px;padding:16px 0;border-top:1px solid var(--line)}
.metric:first-of-type{border-top:0}
.m-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px}
.m-title{font-weight:700;flex:1 1 220px;min-width:0}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0}
.facts div{min-width:0}
.facts dt{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.facts dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.facts dd small{display:block;font-weight:400;color:var(--ink-3);font-size:13.5px}
.bar{height:7px;background:var(--line);border-radius:999px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--c,var(--ocg));border-radius:999px}
.m-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 14px;font-size:15px;color:var(--ink-3)}
.m-links{display:inline-flex;flex-wrap:wrap;gap:4px 14px}

details.target{border-top:1px solid var(--line)}
details.target>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline;padding:12px 0}
details.target>summary::-webkit-details-marker{display:none}
details.target>summary:hover .t-text{color:var(--ocg-deep)}
.t-body{padding:0 0 14px;font-size:16.5px}
.t-body p{margin:0 0 8px;color:var(--ink-2)}
.t-body .mb{font-weight:700;font-size:14px;color:var(--ink);margin:10px 0 4px}
.t-body ul{margin:0 0 10px;padding-left:20px;color:var(--ink-2)}
.golink{font-weight:700}

/* single goal pages */
.ghero{padding:48px 0 36px;border-top:6px solid var(--c)}
.crumbs{font-size:15px;color:var(--ink-3);margin-bottom:16px}
.crumbs span{margin:0 6px}
.gtitle{display:flex;gap:18px;align-items:flex-start}
.gnum{flex:none;width:76px;height:76px;border-radius:14px;display:grid;place-items:center;color:#fff;font-family:'Bricolage Grotesque',Figtree,sans-serif;font-weight:800;font-size:34px;background:var(--c)}
.gtitle .lede{margin-top:8px}
.gsec{margin-bottom:34px}
.gsec h2{font-size:clamp(22px,3vw,28px);margin-bottom:6px}
.gpager{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:10px 0 22px;padding-top:18px;border-top:1px solid var(--line);font-weight:700}

@media (max-width:480px){
  .facts{grid-template-columns:1fr 1fr}
  .facts div:last-child{grid-column:1/-1}
  .gnum{width:58px;height:58px;font-size:26px}
}

/* the UN's own rating of each target (SDG Report 2026, progress by target) */
.un{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.03em;padding:2px 9px;border-radius:999px;border:1.5px solid;white-space:nowrap;vertical-align:middle;line-height:1.5}
.un-ontrack{color:#16794a;border-color:#16794a;background:#e6f4ec}
.un-moderate{color:#7a5a00;border-color:#d9a400;background:#fdf3d0}
.un-marginal{color:#7a5a00;border-color:#d9a400;background:transparent}
.un-stagnation{color:#a32a1f;border-color:#c0392b;background:transparent}
.un-regression{color:#fff;border-color:#b3261e;background:#b3261e}
.un-nodata{color:var(--ink-3);border-color:var(--line);background:transparent}
.un-tally{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:16px 0 8px}
.un-lead{font-size:14.5px;color:var(--ink-3);margin-right:4px}
.t-text .un{margin-left:6px}
.banner p.un-head{margin-top:12px}