/* Mobile-first. The visitor arrived from a phone, from a post, mid-scroll,
   to check one number — so the number is above the fold at 375px and the
   table is one scroll away. Nothing here loads a font: the system stack is
   already on the device and a font request is a third-party request. */

:root {
  --ink: #111318;
  --ink-soft: #5a606b;
  /* 4.98:1 on --page and 4.68:1 on --panel. Everything wearing this token
     is under 18.66px — the footnote that names the grouped tokens, the
     panel's reason line, the hints, the counts, the table header — so 4.5:1
     is the floor that applies to all of it and #8a8f98 (3.25:1, 3.06:1 on
     the panel) cleared neither. Ratios are pinned in
     a test rather than eyeballed. */
  --ink-faint: #6b7079;
  --page: #ffffff;
  --panel: #f7f8fa;
  --rule: #e4e7ec;
  --up: #1b48d4;
  --down: #c02a37;
  --published: #14603a;
  --published-bg: #e6f4ec;
  --withheld: #7a5a10;
  --withheld-bg: #fbf2dd;
  --absent: #5a606b;
  --absent-bg: #eef0f3;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e9ebef;
    --ink-soft: #a8aeb8;
    /* 5.63:1 on --page, 5.16:1 on --panel. The old #767c86 cleared the page
       at 4.53:1 and failed the panel at 4.16:1, which is where the detail
       panel's reason line is drawn — the same line the light theme failed
       outright. */
    --ink-faint: #868c96;
    --page: #0e1013;
    --panel: #161a1f;
    --rule: #262b32;
    --up: #7aa2ff;
    --down: #ff8a94;
    --published: #7fd3a6;
    --published-bg: #12271c;
    --withheld: #e3c169;
    --withheld-bg: #2a2313;
    --absent: #a8aeb8;
    --absent-bg: #1d2127;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.45;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 8px;
  top: 8px;
  background: var(--panel);
  padding: 8px 12px;
  z-index: 10;
}

/* Off the visual layout, in the accessibility tree, and in a copy of the
   page. The gate badge carries its sentence this way rather than in an
   `aria-label`: a bare <span> is role `generic`, which ARIA marks *name
   from: prohibited*, so the attribute is a conformance violation that some
   screen readers honour and others ignore. Text has no such argument.
   `clip-path` rather than `display:none` or `visibility:hidden`, both of
   which take the text out of the tree along with the pixels. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

main { padding: 0 16px 40px; max-width: 960px; margin: 0 auto; }

/* ---- header ---- */

.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  padding: 14px 16px;
  max-width: 960px;
  margin: 0 auto;
  border-bottom: 1px solid var(--rule);
}

.wordmark { font-weight: 700; letter-spacing: -0.01em; }
.wordmark .mark { font-family: var(--mono); }
.wordmark .full { display: none; color: var(--ink-soft); font-weight: 500; }

.stamp {
  margin: 0;
  flex: 1 1 100%;
  order: 3;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-soft);
}

.bar nav { margin-left: auto; }
.bar a, footer a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.bar a:hover, footer a:hover { color: var(--ink); }

/* ---- hero ---- */

.hero { padding: 20px 0 8px; }

.hero-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.hero h1 {
  margin: 0;
  font-family: var(--mono);
  font-size: 22px;
  letter-spacing: -0.02em;
}

.hero-window {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--ink-faint);
  font-family: var(--mono);
}

.hero-figure { text-align: right; }

.hero-number {
  display: block;
  font-family: var(--mono);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.hero-unit { font-size: 11px; color: var(--ink-faint); text-transform: lowercase; }

.chart { margin: 14px 0 6px; min-height: 220px; }
.chart-empty {
  margin: 0;
  padding: 74px 12px;
  text-align: center;
  color: var(--ink-faint);
  background: var(--panel);
  border-radius: 6px;
  font-size: 14px;
}

.caption {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--ink);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 0;
  flex-wrap: wrap;
}

button {
  font: inherit;
  font-size: 13px;
  font-family: var(--mono);
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 7px 12px;
  cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--ink-faint); }
button:disabled { opacity: 0.45; cursor: default; }

.hint { font-size: 12px; color: var(--ink-faint); }

/* ---- table ---- */

section#table { border-top: 1px solid var(--rule); padding-top: 18px; }

.table-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.table-head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.counts { margin: 0; font-family: var(--mono); font-size: 12px; color: var(--ink-faint); }

.table-scroll { overflow-x: auto; margin-top: 10px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }

th, td { text-align: left; padding: 9px 10px 9px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
thead th { font-size: 11px; text-transform: lowercase; letter-spacing: 0.02em; color: var(--ink-faint); font-weight: 500; }

tbody th { font-family: var(--mono); font-weight: 600; white-space: nowrap; }
td.num, th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
td.muted { color: var(--ink-soft); }
td.held { font-style: italic; }

tr.selectable { cursor: pointer; }
tr.selectable:hover { background: var(--panel); }
tr.current { background: var(--panel); }
tr.current th:first-child { box-shadow: inset 2px 0 0 var(--up); }
tr:focus-visible { outline: 2px solid var(--up); outline-offset: -2px; }

.gate {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 3px;
  white-space: nowrap;
}
.gate-published { color: var(--published); background: var(--published-bg); }
.gate-withheld { color: var(--withheld); background: var(--withheld-bg); }
.gate-gap, .gate-no-market { color: var(--absent); background: var(--absent-bg); }

.why { display: block; margin-top: 3px; font-size: 12px; color: var(--ink-faint); }

/* The grouped absences and the line that stands in for the table
   on a weekend where the venue was shut on every covered name. */
.footnote, .table-empty {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--ink-faint);
}
.table-empty { color: var(--ink-soft); }

.table-actions { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }

/* ---- detail panel ---- */

.detail {
  margin-top: 18px;
  padding: 14px 16px 16px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 6px;
}
.detail-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.detail-head h3 { margin: 0; font-family: var(--mono); font-size: 17px; letter-spacing: -0.02em; }
/* The reveal moves focus here, so the ring is suppressed for the pointer
   and kept for everyone else — a mouse reader who clicks a row has not
   asked to be shown where the keyboard is. */
#detail-symbol:focus { outline: none; }
#detail-symbol:focus-visible { outline: 2px solid var(--up); outline-offset: 3px; }
.detail-title { margin: 6px 0 0; font-size: 13px; color: var(--ink-soft); }
.detail #detail-why { display: block; margin: 4px 0 0; font-size: 13px; color: var(--ink-faint); }
.chart-detail { margin: 12px 0 4px; min-height: 200px; }

.metrics {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 16px;
  margin: 12px 0 0;
  font-size: 14px;
}
.metrics dt { color: var(--ink-faint); font-size: 12px; align-self: center; }
.metrics dd {
  margin: 0;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* ---- footer ---- */

footer {
  border-top: 1px solid var(--rule);
  padding: 16px;
  max-width: 960px;
  margin: 0 auto;
  font-size: 13px;
  color: var(--ink-soft);
}
footer nav { display: flex; gap: 16px; }
.positions { margin: 10px 0 0; color: var(--ink-faint); }
/* Tiingo ToS §7.3's required credit. Same weight as the positions
   line: a licence condition, not a badge. */
.attribution { margin: 4px 0 0; color: var(--ink-faint); }

.failure {
  margin: 24px 16px;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--down);
  border-radius: 4px;
  font-size: 14px;
  max-width: 960px;
}
.failure-head { margin: 0 0 6px; font-weight: 600; }
.failure p { margin: 0; color: var(--ink-soft); font-family: var(--mono); font-size: 12px; }

/* ---- wider ---- */

@media (min-width: 620px) {
  .wordmark .full { display: inline; margin-left: 8px; }
  .stamp { order: 0; flex: 0 1 auto; }
  .hero h1 { font-size: 26px; }
  .hero-number { font-size: 40px; }
  main { padding: 0 24px 56px; }
  .bar, footer { padding-left: 24px; padding-right: 24px; }
}

/* uPlot draws into a canvas that must not overflow a phone. */
.uplot, .u-wrap { max-width: 100%; }