/* Layout mock-up (Nov 4, 2026): sections that pair a chart with its shareable picture, and a Share button under each */
@media (min-width: 1300px) {
  .layout.open { grid-template-columns: minmax(0, 1fr) 820px; max-width: 1760px; }
}
.pair { display: grid; gap: 14px; align-items: start; }
@media (min-width: 1300px) { .pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pair-a svg { max-width: 100%; }
.tile { margin: 0; display: grid; gap: 6px; }
.tile video, .tile img { width: 100%; height: auto; display: block; border-radius: 8px; border: 1px solid var(--line); background: #faf9f6; }
/* Nov 6 (Bjorn: the panel shrank and grew back for half a second on every new country): the new video reserves its frame
   before its poster loads, so nothing below it jumps */
.tile video { aspect-ratio: 16 / 9; }
.tile.tall video { aspect-ratio: 9 / 16; }
.tile figcaption { font-size: 13.5px; color: var(--ink2); line-height: 1.35; }
.tile figcaption b { color: var(--ink); }
.soon-box { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 8px; background: #eef2f5; color: #8796a1; font-size: 28px; margin: 0; }
.share-row { display: flex; flex-wrap: wrap; gap: 8px; }
.share-btn { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 14px; font-weight: 600; color: var(--pick);
  background: #fff; border: 1px solid #c9dbe0; border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.share-btn:hover { background: #e3eff2; }
.block .share-row { margin-top: 8px; }
.em-line { margin: 0 0 8px; }
.actual { margin-top: 10px; }
.actual summary { cursor: pointer; font-weight: 600; font-size: 15px; color: var(--pick); }
.actual .facts td { text-align: right; padding-left: 10px; }
.actual .facts th small { color: var(--ink2); font-weight: 400; }
.actual table { display: block; overflow-x: auto; }
/* share sheet */
.sheet { position: fixed; inset: 0; z-index: 80; background: rgba(20, 28, 36, .45); display: grid; place-items: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.sheet[hidden] { display: none; }
.sheet-card { background: #fff; border-radius: 14px; width: min(640px, 100%); max-height: 100%; overflow: auto; padding: 16px 18px 18px; display: grid; gap: 10px;
  grid-template-columns: minmax(0, 1fr); }   /* Nov 6 (Bjorn: the × sat at the edge): the content can't push past the right padding */
.sh-top { display: flex; justify-content: space-between; align-items: center; }
.sh-top h2 { margin: 0; font-size: 20px; }
.sh-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sh-chips .chip { font: inherit; font-size: 13.5px; padding: 5px 12px; border-radius: 999px; border: 1px solid #cfd5dc; background: #fff; cursor: pointer; }
.sh-chips .chip[aria-pressed="true"] { background: #e3eff2; border-color: #c9dbe0; color: var(--pick); font-weight: 600; }
.sh-prev img, .sh-prev video { width: 100%; height: auto; display: block; border-radius: 8px; border: 1px solid var(--line); }
.sh-l { font-size: 13px; color: var(--ink2); }
#sh-t { font: inherit; font-size: 14.5px; width: 100%; box-sizing: border-box; border: 1px solid #cfd5dc; border-radius: 8px; padding: 8px 10px; resize: vertical; }
.sh-go { display: flex; flex-wrap: wrap; gap: 8px; }
.sh-main { font: inherit; font-weight: 700; color: #fff; background: var(--pick); border: 0; border-radius: 999px; padding: 8px 18px; cursor: pointer; }
.sh-net { font: inherit; font-size: 14px; color: var(--ink); background: #f3f6f8; border: 1px solid #e1e6ea; border-radius: 999px; padding: 7px 13px; text-decoration: none; cursor: pointer; }
.sh-net[hidden] { display: none; }
body.sheet-open { overflow: hidden; }
.block .share-btn svg, .share-btn svg { width: 16px; height: 16px; max-width: none; display: inline-block; flex: none; }   /* not a chart */
/* Nov 4: the result's Share sits in the middle of the four number boxes; the full number in small type under cost and benefit */
.kpis { position: relative; }
.share-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  flex-direction: column; gap: 2px; width: 66px; height: 66px; padding: 0; justify-content: center; border-radius: 50%;
  font-size: 12px; box-shadow: 0 0 0 6px #fff, 0 4px 14px rgba(20, 40, 50, .14); }
.share-center svg { width: 20px !important; height: 20px !important; }
@media (max-width: 339px) { .share-center { position: static; transform: none; margin: 4px auto 0; grid-column: 1 / -1; } }
.kpi .s.full { font-size: 11.5px; color: var(--ink2); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 520px) { .share-center { width: 52px; height: 52px; font-size: 10.5px; box-shadow: 0 0 0 4px #fff, 0 3px 10px rgba(20, 40, 50, .14); }
  .share-center svg { width: 16px !important; height: 16px !important; } }
/* Nov 4: small Share buttons that take no extra space (under the video, at the end of section headings) */
.share-mini { font-size: 12.5px; padding: 3px 10px; gap: 5px; font-weight: 600; flex: none; }
.share-mini svg { width: 13px !important; height: 13px !important; }
.h-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tile-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.tile-row figcaption { min-width: 0; }
.em-pics .pair-a, .em-pics .tile { cursor: zoom-in; }
/* "See more" emissions, as on the ChatGPT site */
.em-switch { display: inline-flex; border: 1px solid #dde3ea; border-radius: 8px; overflow: hidden; margin: 10px 0 6px; flex-wrap: wrap; }
.em-switch button { font: inherit; font-size: 13.5px; padding: 5px 11px; border: 0; background: #fff; color: var(--ink2); cursor: pointer; }
.em-switch button[aria-pressed="true"] { background: #e3eff2; color: var(--pick); font-weight: 600; }
.em-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--ink2); }
.em-legend .k-base::before, .em-legend .k-nz::before { content: ""; display: inline-block; width: 22px; vertical-align: middle; margin-right: 6px; border-top: 3px solid #273b47; }
.em-legend .k-nz::before { border-top: 3px dotted #086d91; }
.em-plots svg { width: 100%; height: auto; display: block; max-width: 620px; }
.gas-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.gas-grid h4 { margin: 6px 0 0; font-size: 14px; }
@media (max-width: 520px) { .gas-grid { grid-template-columns: 1fr; } }
.tile.tall video { max-height: 78vh; width: auto; max-width: 100%; margin: 0 auto; }   /* the tall video on a phone fits the screen */
/* Nov 4 (Bjorn): all four boxes centred, like the bill, so the centred Share button sits naturally between them */
.kpis:not(.kpis-two) > .kpi { justify-items: center; text-align: center; }
.kpis:not(.kpis-two) > .kpi .k { justify-self: center; }
.sh-shape:empty { display: none; }
.sh-shape .chip { font-size: 12.5px; padding: 3px 10px; }
.sh-prev img.tall { max-height: 52vh; max-width: 100%; width: auto; margin: 0 auto; }
/* platform logos (Nov 4) */
.sh-nets { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
.sh-ic { display: grid; justify-items: center; gap: 3px; padding: 8px 4px 6px; border-radius: 10px; border: 1px solid #e6eaee; background: #fafbfc;
  color: var(--ink2); font-size: 11.5px; text-decoration: none; cursor: pointer; }
.sh-ic:hover { background: #eef3f6; }
.sh-note { font-size: 12.5px; color: var(--ink2); align-self: center; }
.sh-items:empty, #sh-items:empty { display: none; }
.sh-prev video.tall { max-height: 52vh; max-width: 100%; width: auto; margin: 0 auto; display: block; }

/* Nov 5 (review T06): keyboard focus on map countries and chart years */
#map path:focus-visible { outline: none; stroke: var(--pick, #b3261e); stroke-width: 2.5; }
.yr-hit:focus-visible { outline: none; stroke: var(--pick, #b3261e); stroke-width: 2; }

/* Nov 5: the year table flashes when a bar is clicked */
@keyframes yrflash { 0% { background: #fff3cd; } 100% { background: transparent; } }
.block.flash { animation: yrflash 1.6s ease-out; border-radius: 8px; }
/* Nov 5: the year table under the annual chart, behind "See more" */
.yr-more h3 { margin-top: 10px; }
/* Nov 6 (Bjorn): the emissions Share sits on the See more line, at the right */
.em-more { position: relative; }
.em-more > .share-btn { position: absolute; right: 0; top: 10px; z-index: 1; }

/* Nov 7 (Bjorn): language links at the bottom of every page */
.langs { text-align: center; font-size: 14px; color: var(--ink2, #5f6670); margin: 28px 0 36px; }
.langs a { color: inherit; }
.langs a[aria-current] { font-weight: 700; text-decoration: none; color: var(--ink, #1c1c1c); }

/* Nov 7 (Bjorn): free to share, unaltered */
.sh-free { margin: 10px 0 0; font-size: 12.5px; color: var(--ink2); text-align: center; }

/* ===== Nov 8, 2026: David William's review and Roland's additions (REVIEW_NOTES.md, D1–D14) ===== */
/* D1: the title on one line on phones; the subtitle a plain question across the full width */
h1 { white-space: nowrap; }
@media (max-width: 999px) { .head { padding: 0; } .title-row { padding: 0 44px; } }
@media (max-width: 600px) { h1 { font-size: clamp(19px, 6.4vw, 30px); } }
.tagline { margin: -4px 0 0; font-size: 15px; max-width: 34em; text-wrap: balance; }
@media (max-width: 480px) { .tagline { font-size: 14px; } }
/* D2: World and the visitor's own country, then the search (full width on phones, one row on wider screens) */
.find-row { gap: 10px 12px; width: 100%; }
.quick { display: flex; gap: 10px; justify-content: center; }
.quick button { font: inherit; font-size: 16px; padding: 8px 20px; border: 1px solid #cfd5dc; border-radius: 999px; background: #fff; color: var(--ink); cursor: pointer; white-space: nowrap; }
.quick button:hover { border-color: var(--pick); color: var(--pick); }
.quick button[aria-pressed="true"] { background: var(--pick); border-color: var(--pick); color: #fff; }
.find-row .finder { width: 300px; }
/* Nov 9 (launch; REVIEW_NOTES D1/D2): one row from 700px (iPad 768/820 too), stacked only on phones */
@media (max-width: 699px) { .find-row { flex-direction: column; align-items: stretch; } .find-row .finder { width: 100%; max-width: 520px; align-self: center; } }
.matches { max-height: min(430px, 62vh); }
.matches .m-h { margin: 0; padding: 8px 12px 2px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); }
.matches .m-hint { border-top: 1px solid var(--line); font-size: 13px; }
/* D5: the Background links, light and on one row; on the landing page at the bottom of the screen (not fixed) */
.layout { min-height: calc(100svh - 56px); grid-template-rows: auto auto 1fr; }
@media (min-width: 1000px) { .layout.open { grid-template-rows: auto 1fr; } }
.more { align-self: end; text-align: center; border-top: 1px solid #e6ebef; border-radius: 0; padding: 12px 0 0; margin-top: 24px; }
.more h2 { font-size: 13px; font-weight: 600; color: #8795a1; margin: 0 0 6px; letter-spacing: .02em; }
.more .tabs { display: flex; justify-content: center; gap: 10px; flex-wrap: nowrap; }
.more .tabs a, .more .tabs a:hover { display: inline; padding: 0; border: 0; background: none; border-radius: 0; font-size: 14px; font-weight: 400;
  color: #4a5866; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.more .tabs a:hover { color: var(--pick); }
@media (max-width: 374px) { .more .tabs { gap: 8px; } .more .tabs a { font-size: 12.5px; } }
.langs { margin: 12px 0 18px; }
/* D11: nothing cut off: box labels may wrap, the money word is smaller, one column on the smallest phones,
   a wider result column on laptops, and room kept for the scrollbar */
.kpi .k { white-space: normal; overflow: visible; text-overflow: clip; text-wrap: balance; }
.local-back span { white-space: normal; }
.kpi .v .u { font-size: .5em; font-weight: 700; letter-spacing: 0; }
.kpi .v { font-size: clamp(18px, 14cqi, 36px); }
@media (max-width: 359px) { .kpis:not(.kpis-two) { grid-template-columns: minmax(0, 1fr); }
  .share-center { position: static; transform: none; margin: 2px auto 0; grid-column: 1 / -1; } }
@media (min-width: 1000px) and (max-width: 1299px) { .layout.open { grid-template-columns: minmax(0, 1fr) 460px; } }
@media (min-width: 1000px) { .layout.open .panel { scrollbar-gutter: stable; } }
/* Nov 8 (Bjorn): no "today's dollars" in the box labels (the note below says it); "trillion" as big as the number, on its own
   line when the box is narrow; a currency code without a symbol (XOF) after it, smaller */
.kpi .v { white-space: normal; text-wrap: balance; }
.kpi .v .u { font-size: 1em; font-weight: 700; }
.kpi .v .cc { font-size: .5em; font-weight: 600; letter-spacing: 0; white-space: nowrap; }
/* Nov 8 (Bjorn, contact sheet): the numbers large again (they may take two lines: "$12.7" / "trillion"), and on phones the round
   Share goes under the four boxes, so it never covers a line such as "= 42 centimes per CFA franc" */
.kpi .v { font-size: clamp(22px, 17cqi, 40px); line-height: 1.08; }
@media (max-width: 519px) { .share-center { position: static; transform: none; margin: 2px auto 0; grid-column: 1 / -1; } }
/* Nov 8 (Bjorn): unit words stay on one line; both amounts break the same way */
.kpi .v .u { white-space: nowrap; }
.kpis.stack .v .u::before { content: "\A"; white-space: pre; }   /* the unit starts a new line; a currency code stays after it */
/* Nov 8 (Bjorn): the bracket "(89 paise lost)" moves to the next line as a whole */
.local-back span:last-child { display: inline-block; }
/* Nov 8 (Bjorn): Share back in the middle of the four boxes on phones (two columns, 360px and up); the bill caption keeps clear of it */
@media (min-width: 360px) and (max-width: 519px) {
  .share-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; grid-column: auto; }
  .kpi-bill .local-back { padding-left: 14px; font-size: 11.5px; }
  .kpis.share-below .share-center { position: static; transform: none; margin: 2px auto 0; grid-column: 1 / -1; } }
/* Nov 8 (Bjorn, Android Chrome): no blue tap square on buttons and links (as on the map since Nov 6); keyboard focus still shows */
button, a, summary, [role="button"] { -webkit-tap-highlight-color: transparent; }
/* Nov 8 (Bjorn): "X video" (posts the video itself) and its note */
.sh-ic[hidden] { display: none; }
.xv-note { position: fixed; z-index: 90; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(400px, calc(100% - 24px));
  max-height: calc(100% - 32px); overflow: auto; background: #111; color: #fff; border-radius: 16px; padding: 16px 18px 16px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.xv-note[hidden] { display: none; }
.xv-note h3 { margin: 0 24px 6px 0; font-size: 17px; display: flex; align-items: center; gap: 8px; }
.xv-note h3 svg { width: 18px; height: 18px; }
.xv-note p { margin: 0 0 4px; font-size: 14.5px; color: #e8e8e8; }
.xv-note ol { margin: 4px 0 12px; padding-left: 20px; font-size: 14.5px; } .xv-note li { margin: 4px 0; }
.xv-note img { display: block; width: 190px; margin: 8px 0 4px; border-radius: 10px; }
.xv-note .xv-x { position: absolute; top: 8px; right: 10px; font-size: 24px; line-height: 1; color: #bbb; background: none; border: 0; cursor: pointer; }
.xv-note .xv-go, .xv-note .xv-ok { width: 100%; }
/* Nov 8 (Bjorn): the video's two rows, "Share the link" and "Post the video itself" */
.sh-rowh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 2px 0 -4px; }
.sh-rowh[hidden], .sh-nets[hidden] { display: none; }
.sh-rowh b { font-size: 15px; } .sh-rowh span { font-size: 13px; color: var(--ink2); }
.sh-vid .sh-ic { font: inherit; font-size: 12px; color: var(--ink); background: #f2f8fa; border-color: #cfe2e8; cursor: pointer; }
.sh-vid .sh-ic:hover { background: #e6f1f5; }
/* Nov 8 (Bjorn: "two columns of share the link and then the two right-hand columns are share the video"): with the video,
   side by side, the same apps on the same rows (X beside X), a line between */
.sh-cols.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 8px 0; }
.sh-cols.two .sh-col { display: contents; }   /* headings share one row, icons the next, so the two columns line up */
.sh-cols.two #sh-rowh1, .sh-cols.two #sh-nets { grid-column: 1; padding-right: 10px; }
.sh-cols.two #sh-rowh2, .sh-cols.two #sh-vnets { grid-column: 2; border-left: 1px solid #d5dde2; padding-left: 10px; }
.sh-cols.two #sh-rowh1, .sh-cols.two #sh-rowh2 { grid-row: 1; } .sh-cols.two #sh-nets, .sh-cols.two #sh-vnets { grid-row: 2; align-self: start; }
.sh-cols.two .sh-nets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.sh-cols.two .sh-ic { padding: 6px 2px 5px; gap: 2px; font-size: 11.5px; }
.sh-cols.two .sh-ic svg { width: 20px; height: 20px; }
.sh-cols.two .sh-rowh { flex-direction: column; gap: 0; margin: 0; }
.sh-cols.two .sh-rowh b { font-size: 14px; line-height: 1.2; } .sh-cols.two .sh-rowh span { font-size: 11.5px; line-height: 1.3; }
/* Nov 9 (Bjorn, after launch: "it need not be very large… they just want to send it off"): on phones the share window's
   preview (video or card, wide or tall) takes at most a third of the screen, so the ways to share stay in view */
@media (max-width: 600px) {
  .sh-prev img, .sh-prev video, .sh-prev img.tall, .sh-prev video.tall { max-height: 32vh; width: auto; max-width: 100%; margin: 0 auto; }
}