/* The data viewer. Desktop-statistics-software shape, in a browser tab.
   Layout is a three-column workbench: controls, chart, readout. It collapses to
   one column under 62rem, because the same query has to be answerable on a
   phone in a corridor outside somebody's office. */

.vw {
  display: grid;
  /* minmax(0, 1fr) rather than 1fr: a grid child defaults to min-width auto,
     which lets a wide table push the whole page sideways. That has already
     happened once on this site. */
  grid-template-columns: 17rem minmax(0, 1fr) 15rem;
  gap: 1.1rem;
  align-items: start;
}
@media (max-width: 62rem) { .vw { grid-template-columns: minmax(0, 1fr); } }

.vw-panel {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: .5rem;
  padding: .85rem .9rem;
}
.vw-panel + .vw-panel { margin-top: .8rem; }

.vw-h {
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink-3);
  margin: 0 0 .5rem;
  font-weight: 700;
}

.vw-field { margin-bottom: .7rem; }
.vw-field:last-child { margin-bottom: 0; }
.vw-field label {
  display: block;
  font-size: .72rem;
  color: var(--ink-2);
  margin-bottom: .2rem;
  font-weight: 600;
}
.vw-field select, .vw-field input[type="text"] {
  width: 100%;
  font: inherit;
  font-size: .8rem;
  padding: .3rem .35rem;
  border: 1px solid var(--line);
  border-radius: .25rem;
  background: var(--panel);
  color: var(--ink);
}
.vw-hint { font-size: .68rem; color: var(--ink-3); margin-top: .15rem; }

/* The publisher does not name these dimensions. The interface says so once,
   quietly, rather than inventing five labels that look authoritative. */
.vw-unnamed {
  font-size: .68rem;
  color: var(--ink-3);
  border-left: 2px solid var(--line);
  padding-left: .5rem;
  margin: 0 0 .7rem;
}

.vw-places { max-height: 15rem; overflow-y: auto; border: 1px solid var(--line-soft); border-radius: .25rem; padding: .3rem; }
.vw-places label {
  display: flex;
  gap: .4rem;
  align-items: baseline;
  font-size: .76rem;
  font-weight: 400;
  padding: .12rem .2rem;
  margin: 0;
  cursor: pointer;
}
.vw-places label:hover { background: var(--panel-2); }
.vw-places .c { margin-left: auto; font-size: .68rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* The reading state. Never a bare spinner: a partial chart must not be
   screenshottable as if it were final, so the count is part of the chart. */
.vw-state {
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  min-height: 1.2rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.vw-state[data-reading="true"] { color: var(--accent-ink); font-weight: 600; }
.vw-bar { height: 3px; background: var(--line-soft); border-radius: 2px; overflow: hidden; margin-top: .3rem; }
.vw-bar i { display: block; height: 100%; background: var(--accent-dim); width: 0; transition: width .18s linear; }
.vw-chart-wrap[data-reading="true"] .vw-svg { opacity: .82; }
.vw-svg { width: 100%; height: auto; display: block; }

/* A partial chart carries a visible mark, so a screenshot taken mid-read is
   self-evidently mid-read. */
.vw-partial {
  font-size: .66rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--status-warning);
  font-weight: 700;
}

.vw-empty {
  font-size: .8rem;
  color: var(--ink-3);
  padding: 2.4rem 1rem;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: .4rem;
}

.vw-note { font-size: .72rem; color: var(--ink-2); margin: .5rem 0 0; }
.vw-note b { color: var(--status-warning); }

.vw-query {
  font-family: ui-monospace, Consolas, "SF Mono", monospace;
  font-size: .68rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-radius: .3rem;
  padding: .55rem .6rem;
  margin: 0;
  color: var(--ink-2);
  max-height: 22rem;
  overflow: auto;
}

.vw-stat { display: flex; justify-content: space-between; gap: .6rem; font-size: .74rem; padding: .16rem 0; border-bottom: 1px solid var(--line-soft); }
.vw-stat:last-child { border-bottom: 0; }
.vw-stat span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }

.vw-legend { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: .5rem 0 0; font-size: .72rem; }
.vw-legend i { display: inline-block; width: .7rem; height: .7rem; border-radius: .15rem; margin-right: .3rem; vertical-align: -1px; }

.vw-btn {
  font: inherit; font-size: .74rem; font-weight: 600;
  padding: .3rem .6rem; border-radius: .25rem;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); cursor: pointer;
}
.vw-btn:hover { background: var(--panel-2); }
.vw-btn[aria-pressed="true"] { background: var(--accent-tint); border-color: var(--accent-dim); color: var(--accent-ink); }
.vw-row { display: flex; gap: .35rem; flex-wrap: wrap; }

/* Statistics. A refusal is not an error state and is not styled like one: it is
   the correct output when the conditions a procedure needs are absent, and it
   carries the reason in full rather than a code. */
.vw-analysis { padding: .6rem 0; border-top: 1px solid var(--line-soft); }
.vw-analysis:first-child { border-top: 0; padding-top: 0; }
.vw-table { border-collapse: collapse; width: 100%; font-size: .76rem; margin: .3rem 0; }
.vw-table th, .vw-table td { text-align: left; padding: .18rem .4rem .18rem 0; vertical-align: baseline; }
.vw-table th { color: var(--ink-3); font-weight: 400; width: 42%; }
.vw-table td { font-variant-numeric: tabular-nums; font-weight: 600; }
.vw-refusal {
  font-size: .76rem;
  color: var(--ink-2);
  background: var(--panel-2);
  border-left: 3px solid var(--status-warning);
  padding: .45rem .6rem;
  margin: .3rem 0;
  border-radius: 0 .2rem .2rem 0;
}
.vw-assume { font-size: .7rem; color: var(--ink-3); margin: .3rem 0 .1rem; }
.vw-caveat { font-size: .72rem; color: var(--ink-2); margin: .25rem 0; }
.vw-caveat::before { content: "note. "; color: var(--status-warning); font-weight: 700; }

/* The short name for a query, carried on the face of the chart. A figure in a
   briefing note can be named out loud and checked against this. */
.vw-fp {
  font-family: ui-monospace, Consolas, monospace;
  font-size: .7rem;
  color: var(--ink-3);
  letter-spacing: .02em;
}

/* A link built against an older export still runs, which is exactly why this
   has to be loud rather than a footnote. */
.vw-stale {
  background: #FDF4E3;
  border: 1px solid var(--status-warning);
  border-left-width: 4px;
  border-radius: .25rem;
  padding: .7rem .9rem;
  margin-bottom: .8rem;
  font-size: .82rem;
  line-height: 1.5;
  color: #4A3208;
}
:root[data-theme="dark"] .vw-stale { background: #2A2110; color: #E8D5A8; }

/* Appearance controls. A reader owns how their chart looks; the grade below the
   swatches is the one thing that answers back. */
.vw-details summary { cursor: pointer; list-style: none; }
.vw-details summary::-webkit-details-marker { display: none; }
.vw-details summary::before { content: "+ "; color: var(--accent); font-weight: 700; }
.vw-details[open] summary::before { content: "- "; }

.vw-slider { display: flex; align-items: center; gap: .5rem; }
.vw-slider input[type="range"] { flex: 1; accent-color: var(--accent); min-width: 0; }
.vw-readout {
  font-family: ui-monospace, Consolas, monospace; font-size: .7rem;
  color: var(--ink-3); min-width: 3rem; text-align: right; font-variant-numeric: tabular-nums;
}
.vw-check { display: flex; align-items: baseline; gap: .4rem; font-size: .76rem; margin: .3rem 0; cursor: pointer; }
.vw-check .vw-hint { margin: 0; }

.vw-colours { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .6rem; }
.vw-colour { display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.vw-colour input[type="color"] {
  width: 2rem; height: 1.6rem; padding: 0; border: 1px solid var(--line); border-radius: .2rem; background: none; cursor: pointer;
}
.vw-colour span { font-size: .6rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.vw-swatches { display: flex; gap: 2px; margin-bottom: .4rem; }
.vw-swatch { flex: 1; height: .85rem; border-radius: 2px; }
.vw-grade { font-size: .74rem; margin: .1rem 0 .4rem; font-weight: 600; }
.vw-grade.ok { color: var(--status-success); }
.vw-grade.bad { color: var(--status-danger); }

/* The seal is drawn into the chart, so it needs no CSS. This is only the
   on-page caption that repeats its query name for copying. */
.vw-fp { user-select: all; }

/* The takeout basket. Each row names a figure and the query behind it, so a
   reader can tell two similar charts apart before they leave with both. */
.vw-basket-row {
  display: flex; align-items: baseline; gap: .4rem;
  padding: .3rem 0; border-bottom: 1px solid var(--line-soft); font-size: .76rem;
}
.vw-basket-row:last-child { border-bottom: 0; }
.vw-basket-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vw-basket-row .c { font-family: ui-monospace, Consolas, monospace; font-size: .66rem; color: var(--ink-3); }
.vw-basket-row .vw-btn { padding: .1rem .35rem; font-size: .66rem; }