/* ---------------------------------------------------------------------------
   Operations Academia — the analytics page's own chrome.

   ANYTHING THAT PAINTS ITS OWN GROUND MUST NAME ITS OWN INK — the rule this
   repository learned three times in one morning. Every colour here is a theme
   token, so a chart follows the reader's theme with no JavaScript and no
   re-render, and the old page's apology ("they render in their own light
   styling whichever theme you are reading in") is gone with the iframes.

   THE ACCENT IS RE-STEPPED IN DARK, AND THAT WAS MEASURED, NOT PREFERRED.
   The daily chart draws two lines — the count and its 7-day mean — so the two
   have to be tellable apart. In light theme --brand (#3a424d) against --gold
   (#b98a3e) separate at ΔE 31.6, comfortably clear. In DARK, --brand becomes
   near-white (#c6ccd4) and --gold lightens to #d9a55e, and the pair collapses
   to ΔE 14.9 — under the floor at which two overlaid lines can be told apart
   even with full colour vision. #d98a24 restores it to 21.2 while still
   clearing 3:1 against the dark surface. So --oa-chart-accent exists
   separately from --gold: this is the one place on the site where two of its
   colours have to be distinguished FROM EACH OTHER rather than from their
   background, and that is a stricter test than contrast.
   --------------------------------------------------------------------------- */

:root {
  --oa-chart-brand: var(--brand);
  --oa-chart-accent: var(--gold);
  --oa-chart-surface: var(--bg-2);
  --oa-chart-grid: var(--line-soft);

  /* THE CATEGORICAL RAMP, for the share bars — where readers arrive from, what
     they read on. It exists separately from the two chart colours above
     because those two answer a different question: --brand and the accent have
     to be told apart FROM EACH OTHER as two lines over one another, where
     these have to be told apart in a row of touching blocks.

     Six, and no more. A share chart that needs a seventh colour is a share
     chart nobody can read, so `share()` folds the tail rather than growing the
     ramp — the hues are stepped a long way apart round the wheel rather than
     shaded, which is what keeps neighbours separable for a reader with any of
     the common colour deficiencies. Colour is never the only channel anyway:
     every part is named with its percentage in the legend beneath the bar, in
     the same order, and every part is a focus stop with a tooltip.

     MEASURED, in the theme each belongs to. Against the surface they sit on
     (--bg-2) every one clears 3:1, the floor for a graphical object: 4.18:1 at
     worst in light, 7.26:1 in dark. Against EACH OTHER — which is the harder
     test, and the one --oa-chart-accent exists because of — the closest pair
     in the whole ramp sits at delta-E 22.9 (light) and 23.4 (dark), above the
     21.2 this file already accepts for two overlaid lines, and no two
     NEIGHBOURING parts are closer than 41. */
  --oa-cat-1: #3a424d;
  --oa-cat-2: #a9701f;
  --oa-cat-3: #2f6f7e;
  --oa-cat-4: #7d4f74;
  --oa-cat-5: #55702f;
  --oa-cat-6: #8a4b3c;
  /* the share bar's "Everything else" part — deliberately the site's own
     muted grey, so the tail reads as background matter, never as a seventh
     category competing with the six real ones */
  --oa-cat-rest: var(--mut);
}
[data-theme='dark'] {
  --oa-chart-accent: #d98a24;

  /* Re-stepped for the dark surface exactly as the accent is: the light ramp
     is far too dark to read as anything but six identical blocks on #15181d. */
  --oa-cat-1: #c6ccd4;
  --oa-cat-2: #d99a3f;
  --oa-cat-3: #6fb3c4;
  --oa-cat-4: #cb95bd;
  --oa-cat-5: #a7c176;
  --oa-cat-6: #dd9683;
  --oa-cat-rest: var(--mut);
}

/* ------------------------------------------------------------------ figures */

.oa-figure {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 20px);
  padding: 22px 22px 18px;
  margin-bottom: 22px;
}
.oa-figure > h2 {
  font-size: 20px;
  line-height: 1.3;
  margin: 0 0 4px;
  color: var(--ink);
}
.oa-figure > p.oa-figure-sub {
  margin: 0 0 18px;
  color: var(--mut);
  font-size: 14.5px;
  line-height: 1.6;
  /* THE CAPTION RUNS THE FULL WIDTH OF ITS CARD. It used to stop at 68ch,
     which on a desktop screen is about two thirds of the card, so every
     figure's explanation wrapped early beside a chart that ran to the edge
     and the two looked misaligned (owner, 2026-09-03, with a screenshot).
     A caption is a short paragraph under a heading, and the card it sits in
     is already the measure. */
  max-width: none;
}
.oa-figure-frozen {
  display: inline-block;
  margin: 0 0 14px;
  padding: 3px 9px;
  border: 1px solid var(--warn-line);
  background: var(--warn-bg);
  color: var(--ink-2);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

/* --------------------------------------------------------------- stat tiles */

.oa-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin-bottom: 26px;
}
.oa-tile {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius, 14px);
  padding: 16px 18px;
}
.oa-tile-label {
  display: block;
  color: var(--mut);
  font-size: 13px;
  margin-bottom: 6px;
}
.oa-tile-value {
  display: block;
  font-size: 30px;
  font-weight: 650;
  line-height: 1.1;
  color: var(--ink);
  /* proportional figures on a standalone number: tabular-nums gives every
     digit the width of a zero, which reads loose at display sizes */
}
.oa-tile-note {
  display: block;
  margin-top: 6px;
  color: var(--mut);
  font-size: 12.5px;
}

/* -------------------------------------------------------------- the marks */

.oa-chart-plot { position: relative; }
.oa-chart-svg { width: 100%; display: block; overflow: visible; }

.oa-grid line { stroke: var(--oa-chart-grid); stroke-width: 1; }
.oa-tick {
  fill: var(--mut);
  font-size: 11px;
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.oa-tick-y { text-anchor: end; }
.oa-tick-x { text-anchor: middle; }
.oa-value {
  fill: var(--ink-2);
  font-size: 12px;
  font-weight: 650;
  font-family: var(--font-sans);
  text-anchor: middle;
}

.oa-line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.oa-line.oa-brand { stroke: var(--oa-chart-brand); }
.oa-line.oa-accent { stroke: var(--oa-chart-accent); }
.oa-line.oa-dashed { stroke-dasharray: 6 4; }
.oa-area { stroke: none; opacity: .1; }
.oa-area.oa-brand { fill: var(--oa-chart-brand); }
.oa-area.oa-accent { fill: var(--oa-chart-accent); }

/* A LONE DAY BETWEEN TWO GAPS. Its run holds one point, so the line's path is
   a bare moveto and paints nothing: the value was in the numbers table and
   invisible on the chart. Drawn in the series' own colour, at the line's own
   weight, so it reads as part of the same series. */
.oa-lone { stroke: none; }
.oa-lone.oa-brand { fill: var(--oa-chart-brand); }
.oa-lone.oa-accent { fill: var(--oa-chart-accent); }

.oa-bar.oa-brand { fill: var(--oa-chart-brand); }
.oa-bar.oa-accent { fill: var(--oa-chart-accent); }

/* markers carry a 2px ring in the SURFACE colour, so they stay legible where
   they cross a line or each other */
.oa-dot {
  opacity: 0;
  stroke: var(--oa-chart-surface);
  stroke-width: 2;
}
.oa-dot.on { opacity: 1; }
.oa-dot.oa-brand { fill: var(--oa-chart-brand); }
.oa-dot.oa-accent { fill: var(--oa-chart-accent); }

.oa-crosshair {
  stroke: var(--line);
  stroke-width: 1;
  opacity: 0;
}
.oa-crosshair.on { opacity: 1; }
.oa-hit { fill: transparent; }

/* ---------------------------------------------------------------- tooltip */

.oa-chart-tip {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 8px 10px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-2);
  white-space: nowrap;
  transform: translateY(-100%);
}
.oa-chart-tip b { color: var(--ink); font-variant-numeric: tabular-nums; }
.oa-chart-tip span { display: block; }
.oa-chart-tip .oa-tip-note { color: var(--mut); font-size: 11.5px; }

.oa-key {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: -1px;
}
.oa-key.oa-brand { background: var(--oa-chart-brand); }
.oa-key.oa-accent { background: var(--oa-chart-accent); }
.oa-key.oa-dashed {
  height: 0; border-radius: 0;
  border-top: 2px dashed var(--oa-chart-accent);
  background: none;
  vertical-align: 3px;
}

.oa-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 12px;
  color: var(--mut);
  font-size: 13px;
}

/* ------------------------------------------------------ the numbers, as text */

.oa-chart-table { margin-top: 14px; }
.oa-chart-table > summary {
  cursor: pointer;
  color: var(--mut);
  font-size: 13px;
}
.oa-chart-table > summary:hover { color: var(--ink-2); }
.oa-chart-table table {
  width: 100%;
  margin-top: 10px;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  display: block;
  max-height: 340px;
  overflow: auto;
}
.oa-chart-table th, .oa-chart-table td {
  padding: 5px 10px 5px 0;
  text-align: right;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-2);
  white-space: nowrap;
}
.oa-chart-table thead th { color: var(--mut); font-weight: 600; }
.oa-chart-table tbody th, .oa-chart-table th:first-child, .oa-chart-table td:first-child {
  text-align: left;
  font-weight: 500;
}

/* ---------------------------------------------------------- horizontal bars */

.oa-barlist { list-style: none; margin: 0; padding: 0; }
.oa-barlist li { margin-bottom: 14px; }
.oa-bar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 5px;
}
.oa-bar-name {
  color: var(--ink);
  font-size: 14.5px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.oa-bar-name a { color: inherit; }
.oa-bar-val {
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.oa-bar-track {
  height: 8px;
  border-radius: 999px;
  background: var(--bg-3);
  overflow: hidden;
}
.oa-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--oa-chart-brand);
  /* visibility, not proportion: the JS writes the TRUE percentage (a 1.5%
     floor used to draw a small row fifteen times its real length), and this
     hairline is what keeps a tiny value findable at all */
  min-width: 2px;
}
.oa-bar-sub { margin-top: 5px; color: var(--mut); font-size: 12.5px; }

/* ------------------------------------------------------------ range control */

.oa-range {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.oa-range button {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  min-height: 38px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--ink-2);
  cursor: pointer;
}
.oa-range button:hover { border-color: var(--brand); color: var(--ink); }
.oa-range button[aria-pressed='true'] {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}

/* --------------------------------------------------------------- messages */

.oa-an-note {
  border: 1px solid var(--line);
  background: var(--bg-3);
  border-radius: var(--radius, 14px);
  padding: 18px 20px;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.6;
}
.oa-an-note.warn { background: var(--warn-bg); border-color: var(--warn-line); }
.oa-an-note h2 { margin: 0 0 8px; font-size: 17px; color: var(--ink); }
.oa-an-note p { margin: 0 0 8px; }
.oa-an-note p:last-child { margin-bottom: 0; }
.oa-an-note code {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  padding: 1px 5px;
  font-size: 13px;
}

/* ------------------------------------------------------- the share bar */

.oa-share-bar {
  display: flex;
  width: 100%;
  height: 34px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-3);
}
.oa-share-seg {
  display: block;
  height: 100%;
  min-width: 2px;
  cursor: default;
}
/* a hairline of the SURFACE between the parts, so two neighbours are separated
   by a seam rather than only by their hues — the same reasoning as the ring
   round a marker where it crosses a line */
.oa-share-seg + .oa-share-seg { box-shadow: inset 1px 0 0 var(--oa-chart-surface); }
.oa-share-seg:hover, .oa-share-seg:focus-visible { filter: brightness(1.12); }
.oa-share-seg:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.oa-share-legend { margin-top: 12px; }

.oa-key.oa-cat-1 { background: var(--oa-cat-1); }
.oa-key.oa-cat-2 { background: var(--oa-cat-2); }
.oa-key.oa-cat-3 { background: var(--oa-cat-3); }
.oa-key.oa-cat-4 { background: var(--oa-cat-4); }
.oa-key.oa-cat-5 { background: var(--oa-cat-5); }
.oa-key.oa-cat-6 { background: var(--oa-cat-6); }
.oa-share-seg.oa-cat-1 { background: var(--oa-cat-1); }
.oa-share-seg.oa-cat-2 { background: var(--oa-cat-2); }
.oa-share-seg.oa-cat-3 { background: var(--oa-cat-3); }
.oa-share-seg.oa-cat-4 { background: var(--oa-cat-4); }
.oa-share-seg.oa-cat-5 { background: var(--oa-cat-5); }
.oa-share-seg.oa-cat-6 { background: var(--oa-cat-6); }
.oa-key.oa-cat-rest { background: var(--oa-cat-rest); }
.oa-share-seg.oa-cat-rest { background: var(--oa-cat-rest); }

/* --------------------------------------------------- the legend as a control

   Two lines over one another is the most a reader can hold at once, so either
   can be put away. It is a real <button> with aria-pressed, which is what
   gives a keyboard and a screen reader the same switch a pointer has; a
   pressed-out entry keeps its place in the row rather than vanishing, or
   bringing it back would have nothing to press. */

.oa-chart-legend-on button {
  font: inherit;
  font-size: 13px;
  color: var(--mut);
  background: none;
  border: 0;
  border-radius: 6px;
  padding: 2px 6px;
  cursor: pointer;
}
.oa-chart-legend-on button:hover { color: var(--ink); background: var(--bg-3); }
.oa-chart-legend-on button[aria-pressed='false'] { opacity: .45; text-decoration: line-through; }

/* the line chart answers the keyboard, so it must show where the focus is */
.oa-chart-plot:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 8px; }
.oa-hit:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

/* ------------------------------------------------ a row of the bar list

   The list used to be inert — the one figure on the page a reader could not
   interrogate. Every row is a focus stop now and answers with its share. */

.oa-bar-row { border-radius: 8px; padding: 2px 4px; margin-left: -4px; margin-right: -4px; }
.oa-bar-row:hover { background: var(--bg-3); }
.oa-bar-row:focus-visible { outline: 2px solid var(--brand); outline-offset: 0; }
.oa-bar-row:hover .oa-bar-fill, .oa-bar-row:focus-visible .oa-bar-fill { filter: brightness(1.1); }

/* ------------------------------------------------ where a figure came from */

.oa-figure-src {
  margin: 12px 0 0;
  color: var(--mut);
  font-size: 12.5px;
}

/* ------------------------------------------- which number the chart plots */

.oa-switch { margin: 0 0 14px; }
.oa-switch button { font-size: 12.5px; padding: 6px 12px; min-height: 34px; }

/* ------------------------------------------------------------------- phone */

@media (max-width: 640px) {
  .oa-figure { padding: 18px 14px 14px; border-radius: var(--radius, 14px); }
  .oa-tiles { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
  .oa-tile-value { font-size: 25px; }
  /* the standard every control on this site is held to on a phone */
  .oa-range button { min-height: 42px; flex: 1 1 auto; }
  .oa-switch button { min-height: 42px; }
  /* the legend's series switches are controls too, and 2px of padding is a
     mouse target — a phone reader needs the affordance more, not less */
  .oa-chart-legend-on button { min-height: 42px; padding: 8px 12px; }
  .oa-chart-tip { font-size: 12px; }
  /* the share bar KEEPS its height on a phone: its parts are already narrow,
     and height is the one dimension a thumb can still land on */
  .oa-share-legend { gap: 6px 12px; }
}

/* A month the record has never covered: no bar at all, and a label that says
   so by being quieter than the rest. A zero-height bar would read as "nobody
   came in September", which on a job-market site is backwards rather than
   merely missing. */
.oa-tick-empty { opacity: .45; }