/* Dark only, whatever the device's setting, until light mode gets its own
   design. color-scheme makes native controls and scrollbars dark too.
   --focus is Israel's color in the charts, light enough to read as text on
   the background (4.75:1). */
:root { color-scheme: dark; --bg: #1c1917; --fg: #f5f5f4; --muted: #a8a29e; --border: #44403c; --focus: #3b82f6; }
/* The arrow on each control that opens a list: the country picker, the
   benchmark and the outlets. A background, since a select can't have an
   ::after, so its color is --muted written out. */
:root { --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a8a29e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
/* The header's "How this works" link scrolls down to the methodology. */
html { scroll-behavior: smooth; }
/* And stops with the heading below the summary bar, which is in view by then
   (its height is set by the script, as it wraps on a phone). */
html { scroll-padding-top: calc(var(--summary-bar-height, 0px) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--bg); color: var(--fg); font: 15px/1.5 system-ui, sans-serif; margin: 0; overflow-x: clip; }
main { max-width: 1000px; margin: 0 auto; padding: 0 16px 24px; }
/* The title and the controls. They scroll away, and the summary bar takes
   their place: kept in view, they'd leave too little room for a chart and its
   description on a laptop, and fill a third of a phone's screen. */
.masthead { padding: 14px 0 10px; border-bottom: 1px solid var(--border); }
.title-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
h1 { font-size: 1.4rem; margin: 0; }
/* The favicon before the site's name, in the masthead and the summary bar,
   its marks running from the top of the name's capitals to its baseline.
   They fill 5.75 to 26.25 of its 32 units each way; the rest is its tile,
   the page's own color, so the sizes and offsets here are in those terms:
   1.12em makes the marks 0.72em tall, Noto Sans's cap height, the margins
   put them flush with the column's edge and 0.35em from the name, and
   vertical-align puts their foot on the baseline. */
.logo { width: 1.12em; height: 1.12em; vertical-align: -0.2em; margin: 0 -0.05em 0 -0.2em; }
/* Always on a line of its own, under the title. */
.masthead .subtitle { margin: 0; flex-basis: 100%; }
.masthead .byline { font-size: 0.85rem; margin: 0; }
/* The widths below are for the longest byline, "... Data updated 59 minutes
   ago" (485px in the system font on Linux), with about 12% to spare for wider
   system fonts. */
/* Where the byline won't fit on one line, "Data updated" gets a line of its
   own, with no dot to start it; where it fits, it follows the links after a
   dot. (Not while hidden: display would override that.) */
#last-fetched:not([hidden]) { display: block; }
#last-fetched .separator { display: none; }
@media (min-width: 580px) {
  #last-fetched:not([hidden]) { display: inline; }
  #last-fetched .separator { display: inline; }
}
/* Where there's room for the title and the byline side by side (781px for
   the longest byline), the byline moves up beside the title, at the line's
   end, and the subtitle goes below them on its own line. Narrower, they stack
   as written: title, subtitle, byline. Moved up any sooner, the byline would
   wrap onto a line of its own, between the title and the subtitle. The same
   width as the controls' one row, below, so the masthead changes all at once. */
@media (min-width: 960px) {
  .masthead .byline { order: 1; margin-left: auto; }
  .masthead .subtitle { order: 2; }
}
/* Across the window, with its text lined up with the page's column. */
.summary-bar { visibility: hidden; position: fixed; top: 0; left: 0; right: 0; z-index: 20;
               padding: 8px max(16px, calc((100% - 1000px) / 2)); background: var(--bg);
               border-bottom: 1px solid var(--border); font-size: 0.85rem; line-height: 1.35; }
.summary-bar.shown { visibility: visible; }
.summary-bar .title-row { justify-content: space-between; }
.summary-bar a { color: var(--muted); }
/* Each part of the summary is a flex item, so it wraps whole. The dot
   between them sits in the gap to a part's left, and where a part starts a
   line that gap is outside #summary, which clips it. */
#summary { color: var(--muted); overflow: hidden; }
#summary > div { display: flex; flex-wrap: wrap; margin-left: -1em; }
#summary span { margin-left: 1em; }
#summary span + span::before { content: "·"; display: inline-block; width: 1em; margin-left: -1em; text-align: center; }
.methodology p { margin: 0 0 8px; }
/* The opening paragraphs, the section's argument, in full color and a little
   larger, so the notes after them read as fine print. */
.methodology .lede { color: var(--fg); font-size: 1.05rem; margin-bottom: 12px; }
.methodology .lede + p:not(.lede) { margin-top: 20px; }
.methodology h3 { font-size: 1rem; margin: 20px 0 6px; }
/* Each term on its own line, its definition under it. */
.methodology dl { margin: 0 0 16px; }
.methodology dt { font-weight: 600; }
.methodology dd { color: var(--muted); margin: 0 0 8px; }
/* The quote under the heading, set off by a rule on its left. */
.epigraph { margin: 8px 0 20px; padding-left: 14px; border-left: 2px solid var(--border); }
.epigraph blockquote { margin: 0; }
.epigraph blockquote p { font-style: italic; margin: 0 0 4px; }
.epigraph figcaption { color: var(--muted); font-size: 0.85rem; }
p { color: var(--muted); margin: 0 0 16px; }
a { color: inherit; }
.picker { position: relative; width: 180px; max-width: 100%; margin-bottom: 16px; }
.picker input { font: inherit; padding: 3px 28px 3px 10px; width: 100%; box-sizing: border-box;
                background: var(--bg) var(--chevron) no-repeat right 10px center; color: var(--fg); border: 1px solid var(--border); border-radius: 6px; }
.picker ul { position: absolute; z-index: 10; left: 0; right: 0; margin: 2px 0 0; padding: 4px 0;
             list-style: none; max-height: 320px; overflow-y: auto; background: var(--bg);
             border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 4px 16px rgb(0 0 0 / 0.15); }
.picker li a { display: block; padding: 4px 10px; color: inherit; text-decoration: none; }
.picker li.active a, .picker li a:hover { background: var(--border); }
.picker li.current a { font-weight: 600; }
.picker .none { padding: 4px 10px; color: var(--muted); }
/* Each control's heading beside it rather than above, to keep the masthead
   short. In one row where they fit, and otherwise stacked, never two on one
   line and one on the next. Every control is a box of the same width, so
   where they stack they line up: headings in one column, boxes in the other. */
.controls { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; margin-top: 10px; }
.controls > * { display: flex; align-items: center; gap: 4px 10px; }
.controls .heading { font-size: 0.85rem; color: var(--muted); white-space: nowrap; }
.controls .picker { margin-bottom: 0; }
/* The select and the outlets' button, both drawn with the chevron rather than
   the select's own arrow, which differs by browser. */
#benchmark-choice, #outlets-toggle { font: inherit; width: 180px; padding: 3px 28px 3px 10px; text-align: left; cursor: pointer;
                                     appearance: none; color: var(--fg); border: 1px solid var(--border); border-radius: 6px;
                                     background: var(--bg) var(--chevron) no-repeat right 10px center; }
/* One row is 832px in the system font on Linux, plus the page's padding and
   about 12% to spare for wider system fonts. Stacked, the boxes fill the
   column on a phone, up to a width that still reads as a box on a tablet. */
@media (max-width: 959px) {
  .controls { display: grid; grid-template-columns: max-content minmax(0, 320px); gap: 8px 12px; }
  .controls > * { display: contents; }
  .controls .picker, #benchmark-choice, #outlets-toggle { width: 100%; }
}
/* The outlets' checkboxes, under their button, like the country list. */
.outlets-dropdown { position: relative; }
.outlets { position: absolute; z-index: 10; left: 0; min-width: 100%; box-sizing: border-box; margin-top: 2px; padding: 6px 12px;
           display: flex; flex-direction: column; gap: 4px; background: var(--bg);
           border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 4px 16px rgb(0 0 0 / 0.15); }
.outlets[hidden] { display: none; }
.outlets label { white-space: nowrap; }
.outlets .done { align-self: flex-end; margin-top: 4px; font: inherit; font-size: 0.85rem; padding: 2px 12px; cursor: pointer;
                 background: var(--border); color: var(--fg); border: 0; border-radius: 6px; }
/* The two countries one above the other, so their multiples line up, each
   with the shares it comes from under it. Where there's room (the same width
   as the controls' one row, so the masthead and the headline change at once),
   the shares move up beside it instead, in a column of their own, so the
   headline stays two lines: a table, its rows the countries. The shares'
   column is against the right edge, as wide as they are, so it starts in the
   same place whichever countries are chosen. */
.headline { display: grid; gap: 12px 24px; align-items: start; margin: 24px 0 16px; }
.headline p { color: var(--fg); font-size: 1.35rem; line-height: 1.3; margin: 0; }
/* A dot between the two shares, dropped where they break onto two lines:
   the same as #summary's parts. */
.headline .detail { overflow: hidden; color: var(--muted); font-size: 0.9rem; }
.headline .detail > div { display: flex; flex-wrap: wrap; margin-left: -1em; }
.headline .detail span { margin-left: 1em; white-space: nowrap; }
.headline .detail span + span::before { content: "·"; display: inline-block; width: 1em; margin-left: -1em; text-align: center; }
@media (min-width: 960px) {
  .headline { grid-template-columns: 1fr auto; gap: 8px 24px; align-items: baseline; }
  .headline > div { display: contents; }
  .headline p { grid-column: 1; }
  .headline .detail { grid-column: 2; }
  /* Flush with the right edge, so the dot trick above is mirrored: the dot
     hangs off the first share's right, and goes past the right edge where
     the two break onto two lines. */
  .headline .detail > div { justify-content: flex-end; margin: 0 -1em 0 0; }
  .headline .detail span { margin: 0 1em 0 0; }
  .headline .detail span + span::before { content: none; }
  .headline .detail span:not(:last-child)::after { content: "·"; display: inline-block; width: 1em; margin-right: -1em; text-align: center; }
}
.chart { position: relative; height: 420px; }
/* Until the data loads: a spinner in the headline's place, the first thing
   below the controls, so it's in view even on a phone. The space is held for
   everything the script fills in: the headline (two lines on a laptop, four
   narrower, where the shares go under each country, and more where those
   wrap on a phone), the charts, the scatter's legend and axis
   title, and on a phone, where the scatter is wider than the screen, its
   offscreen badges. */
#charts.loading .headline { position: relative; min-height: 64px; }
@media (max-width: 959px) { #charts.loading .headline { min-height: 111px; } }
/* Their headings and descriptions too, but hidden: half filled in, they read
   "Israel vs : coverage vs , last 30 days". */
#charts.loading > h2, #charts.loading > p { visibility: hidden; }
#charts.loading .legend, #charts.loading .axis-title { min-height: 1lh; }
@media (max-width: 699px) {
  #charts.loading .headline { min-height: 176px; }
  #charts.loading .offscreen-badges { min-height: 22px; }
}
#charts.loading .headline::after { content: ""; position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; margin: -16px;
                                   border: 3px solid var(--border); border-top-color: var(--muted); border-radius: 50%;
                                   animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* The scatter gets its width from the script, so until then it fills the column. */
#charts.loading .scroll, #charts.loading .scroll-content, #charts.loading .chart.wide { width: 100%; }
h2 { font-size: 1.1rem; margin: 40px 0 4px; }
/* The scatter's y-axis beside its scrolling plot, so the scrollbar runs only
   under the plot. The drawn-to-scale scatter scrolls when it's wider than the
   column, and is centered when it isn't. */
.scatter-row { display: flex; justify-content: center; }
/* The badges' spacer is as wide as the axis, so the badges start where the plot does. */
.pinned-axis, .offscreen-spacer { flex: none; }
/* Its width is set by the script, to the plot's; it shrinks to the window. A
   size container, so the axis title can be as wide as what's in view (cqw). */
.scroll { overflow-x: auto; min-width: 0; scrollbar-width: thin; container-type: inline-size; }
/* The fade the script turns on at an edge with more chart beyond it. */
.scroll {
  --fade-left: 0px;
  --fade-right: 0px;
  --fade: linear-gradient(to right, transparent, #000 var(--fade-left), #000 calc(100% - var(--fade-right)), transparent);
  -webkit-mask-image: var(--fade);
  mask-image: var(--fade);
}
.scroll.fade-left { --fade-left: 16px; }
.scroll.fade-right { --fade-right: 16px; }
.scroll-content { width: max-content; }
.chart.wide { height: 460px; }
.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin: 12px 0 4px; font-size: 0.8rem; color: var(--muted); }
/* A country's color, in the legend and the badges. */
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
/* As wide as what's in view, and stuck there: it stays centered under the
   visible part of the plot. */
.axis-title { position: sticky; left: 0; width: 100cqw; text-align: center; margin: 2px 0 8px; font-size: 0.8rem; color: var(--muted); }
/* The badges' row is sized like the scrolling plot below it (by the script), so
   each badge sits over one edge of what's in view. */
/* Side by side always: where both don't fit on one line, their text wraps
   inside them instead. A smaller radius than a pill, which looks odd at two
   lines tall. */
.offscreen-badges { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; min-width: 0; margin-bottom: 4px; }
.badge { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 2px 10px; border-radius: 10px; background: var(--border); color: var(--fg); font-size: 0.75rem; font-weight: 600; }
.badge .arrow { flex: none; }
.badge .kept-together { white-space: nowrap; }
/* Between two countries' names, so the second dot sits a little further off. */
.badge .wide-space { word-spacing: 4px; }
/* See narrowIfWrapped in scatter.js. */
.badge.narrowed { width: min-content; }
/* Each badge's text sits against its arrow, so spare room is between them. */
#scatter-offscreen-right .text { text-align: right; }
.badge:empty { visibility: hidden; }
.empty { padding: 48px 0; text-align: center; border: 1px dashed var(--border); }
code { font-size: 0.9em; }
footer { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.9rem; }