/* /betterdata/ -- why we need better data.
   Loaded after explorer.css, which supplies the palette, the type and the
   .wrap.prose furniture this page sits in. Nothing here restates those.

   THE COLOURS ARE THE WORLD MAP'S. --map-live, --map-page and the "no usable
   data" grey are the three states the map already draws, and the three
   buckets on this page are exactly those three states counted. world.css is
   only loaded on the landing page, so the values are repeated here rather
   than inherited; if one moves, move both. */
.betterdata{
  --bd-counted:#35638a;    /* = --map-live: a rate is published and pooled */
  --bd-partial:#7ea6c6;    /* = --map-page: a page, and no comparable rate  */
  --bd-absent:#333333;     /* = --map-none: nothing to build a page from    */
}

/* ------------------------------------------------------ jumping around ---
   Six continents is more than a reader scrolls past to find the one they
   came for. Plain in-page links: they work with JavaScript off, they are in
   the print-out, and a screen reader gets them as a labelled nav. */
.bdjump{display:flex;flex-wrap:wrap;gap:8px 10px;margin:0;
  font-family:var(--font-ui);font-size:14.5px}
.bdjump a{color:var(--ink-2);text-decoration:none;padding:5px 11px;
  background:var(--surface);border:1px solid var(--hair-strong)}
.bdjump a:hover{color:var(--ink);border-color:var(--ink-2)}

/* The lead sentence of a section is a paragraph carrying figures, so it
   takes the paragraph's own size and the figures take the mono face. No
   measure on it -- see the note in explorer.css about caps on text. */
.betterdata .bdlead{font-size:17.5px;line-height:1.65;color:var(--ink-2);
  margin:0 0 14px;max-width:none}
.betterdata .bdlead b,.betterdata .bdline b{color:var(--ink);font-weight:600;
  font-family:var(--font-mono);font-size:.96em;font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------- the bars ---
   Flex, not SVG. A stacked proportion is a set of lengths; the SVG version
   had to stretch to the panel width, which stretched the percentages printed
   inside it along with it. Flex basis scales the segments and leaves the type
   alone, and a segment carries a number only where one fits. */
.betterdata .bdbar{display:flex;width:100%;height:34px;margin:0 0 4px;
  overflow:hidden;max-width:none}
.betterdata .bdbar .seg{display:flex;align-items:center;justify-content:center;
  min-width:0;overflow:hidden}
.betterdata .bdbar b{font-family:var(--font-mono);font-size:12px;
  font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.betterdata .bdq{height:22px;margin:0 0 6px}
.betterdata .bdq b{font-size:11.5px}
.seg-counted{background:var(--bd-counted)}
.seg-partial{background:var(--bd-partial)}
.seg-absent{background:var(--bd-absent)}
/* White on the two dark fills, near-black on the light one. Measured: white
   on --map-live is 6.0:1 and near-black on --map-page is 4.5:1, which is the
   pair world.css chose these two strengths for. */
.seg-counted b,.seg-absent b{color:#ffffff}
.seg-partial b{color:var(--ink)}

.bdlegend{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 10px;
  font-family:var(--font-ui);font-size:14px;color:var(--ink-2)}
.bdlegend .lg{display:inline-flex;align-items:center;gap:7px}
.bdlegend i{width:12px;height:12px;flex:none;display:inline-block}
i.sw-counted{background:var(--bd-counted)}
i.sw-partial{background:var(--bd-partial)}
i.sw-absent{background:var(--bd-absent)}

/* WHO's four grades and the ungraded remainder. Lightness falls at every
   step so the order survives greyscale, and the fifth is the same grey the
   map uses for absence, because "not graded" and "no usable data" are the
   same fact seen from two sides. */
.q1{background:#dbe6ef}
.q2{background:#bcd0e0}
.q3{background:#e3c6b9}
.q4{background:#cf8e7d}
.q5{background:var(--bd-absent)}
.betterdata .bdq .q1 b,.betterdata .bdq .q2 b,
.betterdata .bdq .q3 b,.betterdata .bdq .q4 b{color:var(--ink)}
.betterdata .bdq .q5 b{color:#ffffff}
.bdqual{margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--hair)}
.betterdata .bdline{font-size:16px;line-height:1.6;color:var(--ink-2);
  margin:0;max-width:none}

/* ----------------------------------------------------------- the tables ---
   A table is a drawing, so it may have a measure and it must scroll inside
   its own box rather than pushing the page sideways. */
.bdscroll{overflow-x:auto;max-height:520px;overflow-y:auto;
  border:1px solid var(--hair);margin:10px 0 0}
.bdtab{border-collapse:collapse;width:100%;font-size:15px;
  font-family:var(--font-ui)}
.bdtab th,.bdtab td{text-align:left;padding:8px 12px;white-space:normal;
  border-bottom:1px solid var(--hair);vertical-align:top}
.bdtab thead th{position:sticky;top:0;z-index:1;background:var(--surface-2);
  font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;
  font-weight:600;color:var(--muted);line-height:1.35}
/* explorer.css styles every `th` on the site as a sticky, uppercase,
   letter-spaced column heading, which is right for a figures table and wrong
   for a row heading that is a country's name: it made "Congo, Democratic
   Republic of the" a nowrap block of capitals wider than a phone, and stuck
   it to the top of its own scroller. Row headings are reset back to running
   text here, name by name. */
.bdtab tbody th,.bdtab tfoot th{position:static;text-transform:none;
  letter-spacing:normal;font-size:15px;font-weight:600;color:var(--ink);
  white-space:normal;min-width:9em}
/* Written against `.wrap.prose.betterdata` so it outranks
   `.wrap.prose .panel a`, which is what turns a link purple everywhere else
   on a prose page -- three classes there, so two here would lose. A column of
   ninety country names is a list, not ninety pieces of emphasis: the names
   read as text and underline like links. */
.wrap.prose.betterdata .bdtab tbody th a{color:var(--ink);
  text-decoration:none;border-bottom:1px solid var(--hair-strong)}
.wrap.prose.betterdata .bdtab tbody th a:hover{color:var(--s-f)}
.bdtab .num{text-align:right;font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;white-space:nowrap}
/* A column heading is a label even above a column of figures. */
.bdtab thead th.num{font-family:var(--font-ui)}
.bdtab td.nil{color:var(--hair-strong)}
/* What stops a jurisdiction being collectable is a sentence, and it gets its
   own full-width row under the jurisdiction rather than a fourth column. In
   a column it set the row's height from off the right-hand edge, so a table
   of short rows drew as a table of tall empty ones; as a row it reads the
   same everywhere and the table fits a phone without scrolling sideways. */
.bdtab tr.lead th,.bdtab tr.lead td{border-bottom:0;padding-bottom:2px}
.bdtab td.why{font-size:14px;line-height:1.55;color:var(--ink-2);
  white-space:normal;padding-top:2px}
.bdtab tfoot th,.bdtab tfoot td{background:var(--surface-2);font-weight:600;
  color:var(--ink);border-bottom:0;border-top:1px solid var(--hair-strong)}
.bdtab tbody tr:last-child th,.bdtab tbody tr:last-child td{border-bottom:0}
.bdtab i{width:11px;height:11px;display:inline-block;margin-right:8px;
  vertical-align:baseline}

/* The three-row summary under each bar is short, so its box does not need a
   height cap -- but it still scrolls sideways rather than pushing the page,
   because four columns do not fit a phone at any font size. */
.bdscroll.flat{max-height:none;margin:6px 0 0}
.buckets3 thead th{position:static}

/* How close a missing jurisdiction is. Three states, and the one that should
   sting -- published and simply not collected -- is the one that is coloured
   like a live country rather than like a blocker. */
.kl{display:inline;font-size:12.5px;font-weight:600;line-height:1.3;
  padding:2px 7px;margin-right:5px;white-space:nowrap}
.kl-available{background:#e3edf5;color:#24455f}
.kl-potential{background:var(--surface-2);color:var(--ink-2)}
.kl-unlikely{background:#efe7e4;color:#6b4034}

/* --------------------------------------------------------- the foldouts ---
   <details>, closed, with no script anywhere near it. It opens with
   JavaScript off, it is in the page source for a screen reader and for a
   print-out, and there is nothing to go wrong. */
.bdfold{margin:16px 0 0;border-top:1px solid var(--hair);padding-top:12px}
.bdfold > summary{cursor:pointer;font-family:var(--font-ui);font-size:15.5px;
  font-weight:600;color:var(--ink);list-style:none;display:flex;gap:9px;
  align-items:baseline}
.bdfold > summary::-webkit-details-marker{display:none}
.bdfold > summary::before{content:"\25B8";color:var(--muted);
  font-size:13px;flex:none}
.bdfold[open] > summary::before{content:"\25BE"}
.bdfold > summary:hover{color:var(--s-f)}
.betterdata .bdnote{margin:8px 0 0;font-size:14px;color:var(--muted);
  max-width:none}

/* ------------------------------------------------------- what it means ---
   Definitions read as a list of small blocks rather than as a run of
   paragraphs, because a reader arrives here from a column heading and wants
   one of them, not all nine. The grid is a LAYOUT and takes a measure; the
   paragraph inside it does not. */
.meanhead{font-family:var(--font-ui);font-size:12.5px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:600;color:var(--muted);
  margin:26px 0 12px}
.means{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px}
.mean{background:var(--surface-2);border-left:2px solid var(--hair-strong);
  padding:13px 16px 15px}
.betterdata .mean h3{font-family:var(--font-ui);font-size:15.5px;
  font-weight:600;color:var(--ink);margin:0 0 4px;line-height:1.35}
/* What the rule currently costs, beside the rule. "None at present" is a
   finding too: it names a bar nothing has fallen at yet. */
.meann,.meannone{display:block;font-family:var(--font-mono);font-size:13px;
  margin:0 0 7px}
.meann{color:var(--ink-2)}
.meannone{color:var(--muted);font-style:italic;font-family:var(--font-ui)}
.betterdata .mean p{font-size:15.5px;line-height:1.6;color:var(--ink-2);
  margin:0;max-width:none}

/* The method is a list of sources and judgement calls, one line each, not a
   run of paragraphs explaining itself. */
.betterdata .bdmeth{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:10px}
.betterdata .bdmeth li{font-size:16px;line-height:1.55;color:var(--ink-2);
  padding-left:14px;border-left:2px solid var(--hair)}
.betterdata .bdmeth b{color:var(--ink);font-weight:600}

.betterdata .bdcredit{margin:0;font-family:var(--font-ui);font-size:13px;
  color:var(--muted)}
.betterdata .bdmethod code{font-family:var(--font-mono);font-size:.92em;
  background:var(--surface-2);padding:1px 5px}

@media (max-width:640px){
  /* A four-column count table on a 360px screen is unreadable at any font
     size, so it keeps its own scroller rather than shrinking to fit. */
  .bdtab{font-size:14px}
  .bdtab th,.bdtab td{padding:7px 10px}
  .bdtab td.why{min-width:20em}
  .bdscroll{max-height:60vh}
}