/* Watchtower Statistics Explorer — themed via the site's own CSS variables where present,
   with light/dark fallbacks so the page works standalone in local testing too. */
.wt-stats {
  --ws-ink: #1d2733;
  --ws-muted: #5b6875;
  --ws-bg: #ffffff;
  --ws-panel: #f6f7f9;
  --ws-line: #dfe3e8;
  --ws-grid: rgba(128,140,155,.25);
  --ws-gold: #c9a227;
  --ws-navy: #16233a;
  max-width: 1180px;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
  color: var(--ws-ink);
}
@media (prefers-color-scheme: dark) {
  .wt-stats {
    --ws-ink: #e8edf3; --ws-muted: #9aa7b5; --ws-bg: #0f1622;
    --ws-panel: #182231; --ws-line: #2a3648; --ws-grid: rgba(150,165,185,.22);
  }
}
:root[data-theme="dark"] .wt-stats {
  --ws-ink: #e8edf3; --ws-muted: #9aa7b5; --ws-bg: #0f1622;
  --ws-panel: #182231; --ws-line: #2a3648; --ws-grid: rgba(150,165,185,.22);
}
:root[data-theme="light"] .wt-stats {
  --ws-ink: #1d2733; --ws-muted: #5b6875; --ws-bg: #ffffff;
  --ws-panel: #f6f7f9; --ws-line: #dfe3e8; --ws-grid: rgba(128,140,155,.25);
}

.ws-head h1 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); margin: 0 0 .4rem; letter-spacing: -.01em; }
.ws-sub { color: var(--ws-muted); max-width: 62ch; margin: 0 0 1.6rem; line-height: 1.55; }

/* Sticky control bar. It docks BELOW the site header, which is itself sticky at 64px, so the two
   never overlap. z-index sits above the page but below an expanded figure (900), which should
   cover it. */
.ws-controls {
  position: sticky; top: var(--header-height, 0px); z-index: 200;
  background: var(--ws-panel); border: 1px solid var(--ws-line);
  border-radius: 12px; padding: .7rem .85rem; margin-bottom: 1.2rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.ws-bar {
  display: flex; align-items: flex-end; gap: .7rem 1rem; flex-wrap: wrap;
}
.ws-bar .ws-field { flex: 1 1 11rem; min-width: 9rem; gap: .22rem; }
.ws-bar .ws-field label { font-size: .7rem; opacity: .8; }
.ws-bar select, .ws-bar input { padding: .38rem .5rem; font-size: .92rem; }
.ws-years .ws-range input { width: 100%; min-width: 4rem; }
.ws-morebtn {
  flex: 0 0 auto; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; gap: .35rem; padding: .42rem .8rem;
  background: var(--ws-bg); color: var(--ws-ink);
  border: 1px solid var(--ws-line); border-radius: 8px;
}
.ws-morebtn:hover { border-color: var(--ws-gold); color: var(--ws-gold); }
.ws-morebtn[aria-expanded="true"] span { transform: rotate(180deg); }
.ws-morebtn span { transition: transform .15s; }
.ws-more {
  display: grid; gap: 1rem 1.5rem; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin-top: .8rem; padding-top: .85rem; border-top: 1px dashed var(--ws-line);
}
.ws-more[hidden] { display: none; }
/* a maximised figure covers the page, so the bar must not float above it */
body.ws-noscroll .ws-controls { display: none; }
@media (max-width: 640px) {
  .ws-controls { position: static; }
  .ws-bar .ws-field { flex: 1 1 100%; }
}

.ws-field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.ws-field label { font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
.ws-hint { font-weight: 400; text-transform: none; color: var(--ws-muted); letter-spacing: 0; }
.ws-field select, .ws-field input {
  font: inherit; color: inherit; background: var(--ws-bg);
  border: 1px solid var(--ws-line); border-radius: 8px; padding: .5rem .6rem; min-width: 0;
}
.ws-field select[multiple] { padding: .3rem; }
.ws-range { display: flex; align-items: center; gap: .5rem; }
.ws-range input { width: 100%; }
.ws-quick { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .15rem; }
.ws-quick button {
  font: inherit; font-size: .82rem; cursor: pointer; padding: .28rem .6rem;
  background: var(--ws-bg); color: var(--ws-muted);
  border: 1px solid var(--ws-line); border-radius: 999px;
}
.ws-quick button:hover { color: var(--ws-ink); border-color: var(--ws-gold); }
.ws-actions { justify-content: flex-end; gap: .5rem; }
.ws-btn {
  font: inherit; font-weight: 600; cursor: pointer; padding: .6rem .9rem;
  background: var(--ws-gold); color: #1a1200; border: 1px solid var(--ws-gold); border-radius: 8px;
}
.ws-btn:hover { filter: brightness(1.06); }
.ws-btn-ghost { background: transparent; color: var(--ws-ink); border-color: var(--ws-line); }
.ws-btn-ghost:hover { border-color: var(--ws-gold); }

.ws-chartwrap { margin: 0 0 1.2rem; position: relative; }
#chart {
  width: 100%; height: auto; display: block; cursor: crosshair;
  background: var(--ws-bg); border: 1px solid var(--ws-line); border-radius: 12px;
  touch-action: pan-y;   /* let a vertical swipe still scroll the page on mobile */
}
/* an explicit display beats the browser's [hidden] rule, so the canvas has to opt out by name --
   without this the table report drew its table UNDER a stale chart */
#chart[hidden] { display: none; }

/* hover readout. Positioned by script; pointer-events off so it can never eat the mousemove
   that keeps it alive. */
.ws-tip {
  position: absolute; z-index: 3; pointer-events: none;
  background: var(--ws-panel); color: var(--ws-ink);
  border: 1px solid var(--ws-line); border-radius: 9px;
  padding: .5rem .65rem; font-size: .88rem; line-height: 1.45;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .18); min-width: 8.5rem; max-width: 26rem;
}
.ws-tip[hidden] { display: none; }
.ws-tip b { display: block; font-size: .95rem; margin-bottom: .25rem; }
/* A report's series names are phrases, not country names, and clipping one to "If growth had
   tracked ba..." loses the very thing the reader is comparing. Long labels wrap onto a second
   line; the figure beside them never does. */
.ws-tip .r { display: flex; align-items: baseline; gap: .4rem; }
.ws-tip .sw { width: .62rem; height: .62rem; border-radius: 2px; flex: none;
              position: relative; top: -.05rem; }
.ws-tip .nm { color: var(--ws-muted); min-width: 0; }
.ws-tip .vl { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600;
              white-space: nowrap; padding-left: .5rem; }
.ws-tip .vl.none { font-weight: 400; color: var(--ws-muted); font-style: italic; }
.ws-tip .ft {
  display: block; margin-top: .35rem; padding-top: .3rem; border-top: 1px solid var(--ws-line);
  color: var(--ws-muted); font-size: .78rem; line-height: 1.35; white-space: normal;
}
.ws-cap { color: var(--ws-muted); font-size: .92rem; margin-top: .55rem; }

/* the explanation that sits under a report's chart */
.ws-explain {
  border: 1px solid var(--ws-line); border-left: 3px solid var(--ws-gold);
  background: var(--ws-panel); padding: 1rem 1.15rem; border-radius: 0 10px 10px 0;
  margin: 0 0 1.4rem;
}
.ws-explain h2 { font-size: 1.02rem; margin: 0 0 .45rem; }
.ws-explain p { margin: 0; line-height: 1.6; font-size: .95rem; }
.ws-explain-calc {
  margin-top: .7rem !important; padding-top: .6rem; border-top: 1px solid var(--ws-line);
  color: var(--ws-muted); font-size: .87rem !important;
}
.ws-explain-calc span { font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--ws-ink); }

/* floating controls over a canvas: zoom cluster top-right, full screen bottom-right */
.ws-canvasbox { position: relative; }
.ws-zoom { position: absolute; top: .55rem; right: .55rem; display: flex; flex-direction: column; gap: .3rem; }
.ws-zoom button, .ws-fs {
  width: 2rem; height: 2rem; padding: 0; cursor: pointer; font: inherit; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  background: var(--ws-panel); color: var(--ws-ink);
  border: 1px solid var(--ws-line); border-radius: 7px;
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.ws-zoom button { font-size: 1.05rem; font-weight: 600; }
.ws-zoom button:hover, .ws-fs:hover { border-color: var(--ws-gold); color: var(--ws-gold); }
.ws-fs { position: absolute; right: .55rem; bottom: .55rem; font-size: 1rem; z-index: 2; }
.ws-fs[hidden] { display: none; }   /* an explicit display would beat the [hidden] rule */
.ws-chartwrap > .ws-fs { right: .55rem; bottom: 2.4rem; }

/* Expand to fill the window — NOT the browser's Fullscreen API, which takes over the whole
   screen and hides the page. This just pins the figure over the page at full viewport size, so
   the browser chrome, the tab strip and Escape all behave normally. The canvas is a
   fixed-resolution bitmap scaled by CSS, so it only needs permission to use the height as well as
   the width; without max-height it would overflow a landscape window and crop the legend. */
.ws-expanded {
  position: fixed; inset: 0; z-index: 900; margin: 0; overflow: auto;
  background: var(--ws-bg); padding: 1rem;
  display: flex; flex-direction: column; justify-content: center;
}
.ws-expanded #chart, .ws-expanded #map {
  max-height: calc(100vh - 5rem); width: auto; max-width: 100%; margin: 0 auto;
}
.ws-expanded .ws-canvasbox { display: flex; justify-content: center; }
/* the ranked lists and the coverage note are reference material, not part of the picture */
.ws-expanded .ws-maplists, .ws-expanded .ws-mapnote { display: none; }
.ws-expanded .ws-cap { max-width: 90ch; margin: .8rem auto 0; text-align: center; }
body.ws-noscroll { overflow: hidden; }

/* the world map, shown in place of the chart canvas */
.ws-mapwrap { border: 1px solid var(--ws-line); border-radius: 12px; padding: .9rem; }
#map {
  width: 100%; height: auto; display: block; cursor: grab;
  background: var(--ws-bg); border-radius: 8px;
  touch-action: pan-y;   /* swapped to none by script once zoomed, so a drag pans instead */
}
#map[hidden] { display: none; }
/* totals and averages for whatever the map is currently showing */
.ws-mapsum {
  display: grid; gap: .1rem 1.4rem; margin: 1rem 0 0;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  padding: .8rem .9rem; background: var(--ws-panel);
  border: 1px solid var(--ws-line); border-radius: 10px;
}
.ws-mapsum div { min-width: 0; }
.ws-mapsum dt {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ws-muted); margin-bottom: .1rem;
}
.ws-mapsum dd { margin: 0; font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ws-mapsum dd small { display: block; font-size: .72rem; font-weight: 400; line-height: 1.35;
                      color: var(--ws-muted); margin-top: .15rem; }
.ws-mapsum dd.up { color: #2e8b57; } .ws-mapsum dd.down { color: #c0392b; }
@media (prefers-color-scheme: dark) {
  .ws-mapsum dd.up { color: #63c98c; } .ws-mapsum dd.down { color: #ef7a6d; }
}
:root[data-theme="dark"] .ws-mapsum dd.up { color: #63c98c; }
:root[data-theme="dark"] .ws-mapsum dd.down { color: #ef7a6d; }
.ws-expanded .ws-mapsum { display: none; }

.ws-maplists {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.6rem; margin-top: 1rem;
}
.ws-maplists h3 {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ws-muted); margin: 0 0 .4rem;
}
.ws-maplists ol { margin: 0; padding-left: 1.4rem; font-size: .9rem; line-height: 1.65; }
.ws-maplists li span { float: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.ws-maplists li span.up { color: #2e8b57; }
.ws-maplists li span.down { color: #c0392b; }
@media (prefers-color-scheme: dark) {
  .ws-maplists li span.up { color: #63c98c; }
  .ws-maplists li span.down { color: #ef7a6d; }
}
:root[data-theme="dark"] .ws-maplists li span.up { color: #63c98c; }
:root[data-theme="dark"] .ws-maplists li span.down { color: #ef7a6d; }
.ws-mapnote {
  margin: 1rem 0 0; padding-top: .7rem; border-top: 1px solid var(--ws-line);
  color: var(--ws-muted); font-size: .85rem; line-height: 1.55;
}
@media (max-width: 640px) { .ws-maplists { grid-template-columns: 1fr; } }

/* the country-by-country break table, shown in place of the canvas */
.ws-tablewrap { border: 1px solid var(--ws-line); border-radius: 12px; padding: .9rem; }
.ws-tablebar { display: flex; align-items: center; gap: .5rem; margin-bottom: .7rem;
               font-size: .9rem; color: var(--ws-muted); flex-wrap: wrap; }
.ws-tablebar select { font: inherit; padding: .3rem .45rem; border-radius: 7px;
                      border: 1px solid var(--ws-line); background: var(--ws-bg); color: var(--ws-ink); }
.ws-tablescroll { overflow-x: auto; max-height: 30rem; overflow-y: auto; }
#btable { border-collapse: collapse; width: 100%; font-size: .9rem; }
#btable th, #btable td { padding: .42rem .6rem; text-align: right; white-space: nowrap;
                         border-bottom: 1px solid var(--ws-line); }
#btable th { position: sticky; top: 0; background: var(--ws-panel); text-align: right;
             font-size: .8rem; text-transform: uppercase; letter-spacing: .04em;
             cursor: pointer; user-select: none; }
#btable th:hover { color: var(--ws-gold); }
#btable th:focus-visible { outline: 2px solid var(--ws-gold); outline-offset: -2px; }
/* every sortable column carries an indicator: bright on the active one, faint on the rest, so the
   headers read as controls rather than labels */
#btable th .si { margin-left: .3rem; opacity: .28; font-size: .9em; }
#btable th .si.on { opacity: 1; color: var(--ws-gold); }
#btable th:first-child, #btable td:first-child { text-align: left; }
#btable td.up { color: #2e8b57; } #btable td.down { color: #c0392b; }
#btable tr.flip { background: color-mix(in srgb, var(--ws-gold) 12%, transparent); }
#btable tr.flip td:first-child::after { content: ' \2190 reversed'; color: var(--ws-muted);
                                        font-size: .78rem; }
@media (prefers-color-scheme: dark) {
  #btable td.up { color: #63c98c; } #btable td.down { color: #ef7a6d; }
}
:root[data-theme="dark"] #btable td.up { color: #63c98c; }
:root[data-theme="dark"] #btable td.down { color: #ef7a6d; }

.ws-gaps {
  border-left: 3px solid var(--ws-gold); background: var(--ws-panel);
  padding: .8rem 1rem; border-radius: 0 8px 8px 0; margin-bottom: 2rem;
}
.ws-gaps h2 { font-size: .95rem; margin: 0 0 .3rem; text-transform: uppercase; letter-spacing: .05em; }
.ws-gaps p { margin: 0; color: var(--ws-muted); font-size: .92rem; line-height: 1.5; }

.ws-data { border-top: 1px solid var(--ws-line); padding-top: 1.6rem; }
.ws-data h2 { font-size: 1.15rem; margin: 1.6rem 0 .6rem; }
.ws-data h2:first-child { margin-top: 0; }
.ws-data p { color: var(--ws-muted); max-width: 68ch; line-height: 1.6; }
.ws-dl { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; gap: .5rem; }
.ws-dl li { color: var(--ws-muted); }
.ws-dl a { font-weight: 600; color: var(--ws-ink); text-decoration: underline; text-underline-offset: 3px; }
.ws-dl a:hover { color: var(--ws-gold); }
.ws-notes { display: grid; gap: .55rem; margin: .6rem 0 0; }
.ws-notes dt { font-weight: 700; }
.ws-notes dd { margin: 0 0 .5rem; color: var(--ws-muted); line-height: 1.55; max-width: 68ch; }

@media (max-width: 640px) {
  .ws-controls { grid-template-columns: 1fr; }
  .ws-actions { justify-content: stretch; }
  .ws-btn { width: 100%; }
  .ws-reports { flex-direction: column; align-items: stretch; }
  .ws-reports .ws-field { max-width: none; }
}