/* Tokens: docs/style_guide.md. Dark by default, light by prefers-color-scheme. */
:root {
  --bg: #0e0f13;
  --surface: #16181d;
  --surface-2: #1c1f26;
  --border: #2a2d36;
  --text: #ecedf1;
  --muted: #a3a7b3;
  --accent: #5eead4;
  --yes: #34d399;
  --yes-bg: #0f3d2e;
  --no: #f87171;
  --no-bg: #3f1518;
  --warn: #fcd34d;
  --warn-bg: #2d2410;
  --hit-bg: #262932;
  --mark-q: #fcd34d;
  --mark-q-ink: var(--bg);

  --gap-sib: 8px;
  --pad-cell: 8px 12px;
  --pad-card: 16px;
  --pad-page: 24px;
  --gap-section: 32px;

  --radius-card: 8px;
  --radius-badge: 6px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f7f7f8;
    --surface: #ffffff;
    --surface-2: #f1f2f4;
    --border: #e2e4e9;
    --text: #15171c;
    --muted: #5b606b;
    --accent: #0f766e;
    --yes: #047857;
    --yes-bg: #d1fae5;
    --no: #b91c1c;
    --no-bg: #fee2e2;
    --warn: #92400e;
    --warn-bg: #fef3c7;
    --hit-bg: #ebecf0;
    --mark-q: #eab308;
    --mark-q-ink: var(--text);
    color-scheme: light;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.num,
.wrow summary {
  font-variant-numeric: tabular-nums;
}

.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--pad-page);
}

/* -- header, footer, banners -- */

.site-head {
  border-bottom: 1px solid var(--border);
}

.site-head .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--gap-section);
  min-height: 48px;
}

.brand {
  color: var(--text);
  font-weight: 650;
  font-size: 16px;
  letter-spacing: 0.01em;
}

/* header links: 48 px tall tap targets, the current page underlined in the accent */
.nav {
  display: flex;
  gap: var(--pad-card);
}

.nav a {
  padding: 12px 0;
  font-size: 14px;
  line-height: 24px;
  color: var(--muted);
  white-space: nowrap;
}

.nav a:hover {
  color: var(--text);
  text-decoration: none;
}

/* no bold for the current link: the links would shift between pages */
.nav a[aria-current="page"] {
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--accent);
}

main.wrap {
  padding-top: var(--gap-section);
  padding-bottom: var(--gap-section);
}

.site-foot {
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 13px;
}

.site-foot .wrap {
  padding-top: var(--pad-card);
  padding-bottom: var(--gap-section);
}

.banner {
  margin: 0 0 var(--pad-card);
  padding: var(--pad-cell);
  border-radius: var(--radius-card);
  background: var(--warn-bg);
  color: var(--warn);
  font-size: 13px;
}

.empty {
  margin: 0 0 var(--pad-card);
  color: var(--muted);
}

.note {
  margin: 0 0 var(--gap-sib);
  color: var(--muted);
  font-size: 13px;
}

h1 {
  font-size: 22px;
  font-weight: 650;
  line-height: 1.25;
  margin: 0;
}

.page-title {
  margin-bottom: var(--pad-card);
}

/* one line under the page title: close to it, the list further down */
.page-title:has(+ .lede) {
  margin-bottom: 4px;
}

.lede {
  margin: 0 0 var(--pad-card);
  color: var(--muted);
}

/* a note under the line ("Past": the calls are listed separately, item 59): one block with it */
.lede:has(+ .note) {
  margin-bottom: 4px;
}

.lede + .note {
  margin-bottom: var(--pad-card);
}

/* -- tags -- */

.tag {
  display: inline-block;
  padding: 0 var(--gap-sib);
  border-radius: var(--radius-badge);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 13px;
  line-height: 20px;
  white-space: nowrap;
}

.tag-live {
  border-color: transparent;
  background: var(--no-bg);
  color: var(--no);
}

.tag-closed,
.tag-unknown {
  border-color: transparent;
  background: var(--warn-bg);
  color: var(--warn);
}

/* -- home -- */

.day + .day {
  margin-top: var(--gap-section);
}

.day-label {
  margin: 0 0 var(--gap-sib);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.events {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gap-sib);
}

/* the time column holds "ends Mon, Oct 26," of a window on one line */
.event {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr) auto;
  gap: var(--gap-sib) var(--pad-card);
  align-items: start;
  padding: var(--pad-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text);
}

.event:hover {
  background: var(--surface-2);
  text-decoration: none;
}

.ev-time {
  display: flex;
  flex-direction: column;
  font-variant-numeric: tabular-nums;
}

.ev-time .et {
  font-weight: 600;
}

.ev-time .msk,
.ev-time .rel {
  color: var(--muted);
  font-size: 13px;
}

.ev-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ev-title {
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* past events: the outcome where an upcoming event has its status tag */
.outcome {
  font-size: 13px;
  line-height: 20px;
  white-space: nowrap;
}

.ev-meta,
.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--gap-sib);
  color: var(--muted);
  font-size: 13px;
}

.ev-meta > span + span::before,
.meta > span + span::before,
.meta > a::before {
  content: "·";
  margin-right: var(--gap-sib);
  color: var(--muted);
}

.meta > .tag + span::before,
.meta > span + .tag::before {
  content: none;
}

/* -- home: the earnings calls at the bottom (site.md, item 57) -- */

.earnings {
  margin-top: var(--gap-section);
  padding-top: var(--gap-section);
  border-top: 1px solid var(--border);
}

.earnings-title {
  margin: 0 0 var(--pad-card);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.3;
}

.calls {
  list-style: none;
  margin: 0;
  padding: 0;
}

.calls > li + li {
  border-top: 1px solid var(--border);
}

/* one line from 600 px: time | company | words | est. and the tag on the right; the row
   is a line under the cards of the general list, not a card */
.call {
  display: grid;
  grid-template-columns: 196px minmax(0, 240px) 104px minmax(0, 1fr);
  gap: 0 12px;
  align-items: center;
  min-height: 36px;
  margin: 0 calc(-1 * var(--gap-sib));
  padding: 6px var(--gap-sib);
  border-radius: var(--radius-badge);
  color: var(--text);
}

.call:hover {
  background: var(--surface-2);
  text-decoration: none;
}

.c-time {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--gap-sib);
  font-variant-numeric: tabular-nums;
}

.c-time .msk,
.c-words {
  color: var(--muted);
  font-size: 13px;
}

.c-co {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.c-words {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.c-end {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 4px var(--gap-sib);
  grid-column: 4;
}

.c-est {
  color: var(--muted);
  font-size: 13px;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: help;
}

/* 375 px: the time on top, the company with its words and the tag under it */
@media (max-width: 599px) {
  .call {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px var(--gap-sib);
    padding-block: var(--gap-sib);
  }

  .c-time {
    flex-basis: 100%;
  }

  .c-end {
    margin-left: auto;
  }
}

/* -- event header -- */

.ev-head {
  margin-bottom: var(--gap-section);
}

.ev-head h1 {
  overflow-wrap: anywhere;
}

.sub {
  margin: 4px 0 0;
  color: var(--muted);
}

.meta {
  margin: var(--gap-sib) 0 0;
}

.facts {
  list-style: none;
  margin: var(--pad-card) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sib) var(--pad-card);
  font-size: 13px;
  color: var(--muted);
}

.ev-head .banner {
  margin: var(--pad-card) 0 0;
}

/* "Auto-refresh paused …" under the prices line, shown by refresh.js (site.md, item 35). While
   hidden it keeps its line: it shows and hides as the focus moves, and a table or search box
   jumping under the pointer between mousedown and mouseup would swallow the click. */
.ev-head #refresh-paused {
  margin: var(--gap-sib) 0 0;
}

.ev-head #refresh-paused[hidden] {
  display: block;
  visibility: hidden;
}

/* "Starts in 52 min 34 s": under the heading, above the meta line (site.md, item 31) */
.countdown {
  margin: var(--gap-sib) 0 0;
  font-size: 16px;
  font-weight: 600;
}

/* -- "Also now:" other events near in time (site.md, item 32) -- */

.also-now {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px var(--pad-card);
  margin: calc(var(--pad-card) - var(--gap-section)) 0 var(--pad-card);
  font-size: 13px;
}

.also-label {
  color: var(--muted);
}

/* -- word search above the table (site.md, item 30) -- */

.wsearch {
  display: flex;
  gap: var(--gap-sib);
  max-width: 420px;
  margin: 0 0 var(--pad-card);
}

.wsearch input,
.wsearch button {
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-badge);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.wsearch input {
  flex: 1 1 auto;
  min-width: 0;
}

.wsearch button {
  padding: 0 var(--pad-card);
  color: var(--accent);
  cursor: pointer;
}

.wsearch button:hover {
  background: var(--surface-2);
}

/* -- word table -- */

/* The word column takes part of the slack, the rest goes to Last 5, so a short word
   stays close to its price. Last 5 needs 5 x 22 + 4 x 8 + 24 = 166 px. */
.words {
  /* the format column holds "3/8 38%" and its own "small n" (site.md, item 34); the last,
     narrow column the "Kalshi ↗" of the row (item 39b) */
  --cols: minmax(212px, 1.4fr) 128px 156px 184px minmax(172px, 1fr) 84px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  overflow: hidden;
}

.words.no-fmt {
  --cols: minmax(220px, 1.4fr) 128px 156px minmax(172px, 1fr) 84px;
}

/* a settled single event: Result, then the price before the start (site.md, item 36) */
.words.before {
  --cols: minmax(180px, 1.4fr) 80px 96px 148px 184px minmax(166px, 1fr) 84px;
}

.words.before.no-fmt {
  --cols: minmax(212px, 1.4fr) 80px 96px 148px minmax(166px, 1fr) 84px;
}

/* plus the Chosen column (site.md, item 44). With two k/n columns that may carry "small n",
   both are narrower and let the flag wrap under the numbers. */
.words.pick {
  --cols: minmax(168px, 1.4fr) 120px 136px 168px 168px minmax(166px, 1fr) 84px;
}

.words.pick.no-fmt {
  --cols: minmax(200px, 1.4fr) 128px 156px 184px minmax(172px, 1fr) 84px;
}

.words.before.pick {
  --cols: minmax(150px, 1.4fr) 80px 96px 128px 160px 160px minmax(166px, 1fr) 84px;
}

.words.before.pick.no-fmt {
  --cols: minmax(180px, 1.4fr) 80px 96px 148px 184px minmax(166px, 1fr) 84px;
}

.words.pick .c-fmt,
.words.pick .c-pick {
  white-space: normal;
}

.words.pick .c-fmt .k,
.words.pick .c-fmt .pct,
.words.pick .c-pick .k,
.words.pick .c-pick .pct {
  white-space: nowrap;
}

/* -- choosing past events by hand (site.md, item 44) -- */

.pick {
  margin: 0 0 var(--pad-card);
}

.pick > summary {
  display: inline-block;
  padding: 6px 0;
  color: var(--accent);
  cursor: pointer;
  line-height: 20px;
}

.pick > summary::marker,
.pick > summary::-webkit-details-marker {
  content: "";
  display: none;
}

.pick > summary::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 8px 2px 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
}

.pick[open] > summary::before {
  transform: rotate(45deg);
}

.pick-form {
  max-width: 640px;
  margin-top: var(--gap-sib);
  padding: var(--pad-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.pick-q {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px var(--gap-sib);
  color: var(--muted);
  font-size: 13px;
}

.pick-form input[type="search"],
.pick-form button {
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-badge);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.pick-form input[type="search"] {
  flex: 1 1 200px;
  min-width: 0;
  font-size: 14px;
}

.pick-form .hint {
  margin: var(--gap-sib) 0;
  color: var(--muted);
  font-size: 13px;
}

/* 337 Trump events on the production copy: the list scrolls inside its block */
.pick-list {
  max-height: 320px;
  overflow: auto;
  margin: 0 0 var(--pad-card);
  padding: 0;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-badge);
}

.pick-list li + li {
  border-top: 1px solid var(--border);
}

.pick-list label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--gap-sib);
  min-height: 32px;
  padding: 6px 12px;
  cursor: pointer;
}

.pick-list input {
  align-self: center;
  margin: 0;
}

.pick-list .num {
  color: var(--muted);
  white-space: nowrap;
}

.pick-title {
  flex: 1 1 200px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.pick-fmt {
  color: var(--muted);
  font-size: 13px;
}

.pick-list li.chosen {
  box-shadow: inset 3px 0 0 var(--accent);
  background: var(--surface-2);
}

.pick-actions {
  display: flex;
  align-items: center;
  gap: var(--pad-card);
}

.pick-form button {
  padding: 0 var(--pad-card);
  color: var(--accent);
  cursor: pointer;
}

.pick-form button:hover {
  background: var(--surface-2);
}

.pick-actions a {
  padding: 6px 0;
}

.pick-note {
  margin-top: calc(-1 * var(--gap-sib));
  margin-bottom: var(--pad-card);
}

.whead,
.wrow summary {
  display: grid;
  grid-template-columns: var(--cols);
  align-items: center;
}

.whead {
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 13px;
}

.whead > * {
  padding: var(--pad-cell);
}

.whead a {
  color: var(--muted);
}

.whead a.active {
  color: var(--accent);
  font-weight: 600;
}

/* the sort arrow in the markup: ▾ or ▴ on the active column, a muted ⇅ on the others
   (site.md, item 29) */
.whead .dir {
  display: inline-block;
  margin-left: 2px;
}

.whead a:not(.active) .dir {
  opacity: 0.55;
}

.sort-label,
.whead .short {
  display: none;
}

.wrow + .wrow {
  border-top: 1px solid var(--border);
}

.wrow summary {
  list-style: none;
  cursor: pointer;
  min-height: 40px;
}

.wrow summary::-webkit-details-marker {
  display: none;
}

.wrow summary:hover,
.wrow[open] summary {
  background: var(--surface-2);
}

.wrow summary > span {
  padding: var(--pad-cell);
  min-width: 0;
}

/* the chevron and, beside it, the phrase with its flags: a long phrase wraps inside its own
   column and never drops under the chevron (QA, FlexBucks round). The flex container takes
   its baseline from .wtext, so the price on the phone lines up with the first line of the
   phrase. */
.c-word {
  display: flex;
  align-items: baseline;
  gap: var(--gap-sib);
}

.wtext {
  flex: 1 1 auto;
  min-width: 0;
}

.wtext .flag {
  margin-left: 4px;
}

.phrase {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.flag {
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.flag-warn {
  padding: 0 6px;
  border-radius: var(--radius-badge);
  background: var(--warn-bg);
  color: var(--warn);
}

/* n == 0: no sample at all, not a warning about a small one */
.flag-new {
  padding: 0 6px;
  border-radius: var(--radius-badge);
  box-shadow: inset 0 0 0 1px var(--border);
}

/* the market of this word on Kalshi: a narrow column of its own (site.md, item 39b) */
.mkt {
  font-size: 13px;
  white-space: nowrap;
}

.c-mkt {
  text-align: right;
}

/* the toggle of the history: a chevron left of the word, turned down when open */
.chev {
  flex: none;
  align-self: flex-start;
  margin-top: calc(0.725em - 4px);
  width: 8px;
  height: 8px;
  margin-right: 2px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

.wrow[open] .chev {
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .chev {
    transition: none;
  }
}

/* visually hidden, read by screen readers */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.c-price,
.c-before,
.c-all,
.c-fmt,
.c-pick {
  white-space: nowrap;
}

.c-fmt .flag-warn,
.c-pick .flag-warn {
  margin-left: 4px;
}

/* during an event, a "hit": a word without a result at a 99¢ bid or more, as on Kalshi
   (site.md, item 41). A grey row, hovered or open too, with the phrase, its flags, the
   price and every k/n struck through; the badges, the Kalshi link, the chevron and the mark
   stay as they are. The decoration is set on the inline-block parts as well: it does not
   reach them from their cell. --hit-bg keeps the text, the muted text and the links at
   4.5:1 or more in both themes. */
.wrow.hit summary,
.wrow.hit summary:hover,
.wrow.hit[open] summary,
.wrow.heard summary,
.wrow.heard summary:hover,
.wrow.heard[open] summary {
  background: var(--hit-bg);
}

.wrow.hit .wtext,
.wrow.hit .wtext .flag,
.wrow.hit summary > .c-price,
.wrow.hit summary > .c-price *,
.wrow.hit summary > .c-before,
.wrow.hit summary > .c-before *,
.wrow.hit summary > .c-all,
.wrow.hit summary > .c-all *,
.wrow.hit summary > .c-fmt,
.wrow.hit summary > .c-fmt *,
.wrow.hit summary > .c-pick,
.wrow.hit summary > .c-pick *,
.wrow.heard .wtext,
.wrow.heard .wtext .flag,
.wrow.heard summary > .c-price,
.wrow.heard summary > .c-price *,
.wrow.heard summary > .c-before,
.wrow.heard summary > .c-before *,
.wrow.heard summary > .c-all,
.wrow.heard summary > .c-all *,
.wrow.heard summary > .c-fmt,
.wrow.heard summary > .c-fmt *,
.wrow.heard summary > .c-pick,
.wrow.heard summary > .c-pick * {
  text-decoration: line-through;
}

/* "heard" and "heard 1/3": what the personal transcriber in this browser heard (item 47),
   set by heard.js. Green as a said word; an inline-block, so the strike of a hit or heard
   row does not cross it, and it stays readable on the grey (4.5:1 or more in both themes). */
.flag-heard,
.wrow.hit .wtext .flag-heard,
.wrow.heard .wtext .flag-heard {
  display: inline-block;
  padding: 0 6px;
  border-radius: var(--radius-badge);
  background: var(--yes-bg);
  color: var(--yes);
  line-height: 20px;
  text-decoration: none;
}

.flag-heard.progress,
.wrow.hit .wtext .flag-heard.progress {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--yes);
}

/* a word that was at 99¢ during the event and fell (item 42): red, as flag-warn is yellow */
.flag-unbond {
  padding: 0 6px;
  border-radius: var(--radius-badge);
  background: var(--no-bg);
  color: var(--no);
}

.hist .unbond-note {
  margin-bottom: var(--gap-sib);
}

/* the personal mark of a row (item 43): a 16 px chip drawn by ::before inside a 32 x 32 px
   button, the tap target; negative margins keep the row as tall as before. Kept in this
   browser by marks.js. Hidden until the script shows it: [hidden] wins over display. */
.mark {
  position: relative;
  z-index: 0;
  flex: none;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: -6px -8px -6px -8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--bg);
  font: 700 11px/1 var(--font);
  cursor: pointer;
}

.mark[hidden] {
  display: none;
}

.mark::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 8px;
  border: 1px dashed var(--muted);
  border-radius: 2px;
}

.mark[data-mark="Y"]::before {
  border: 0;
  background: var(--yes);
}

.mark[data-mark="N"]::before {
  border: 0;
  background: var(--no);
}

.mark[data-mark="?"] {
  color: var(--mark-q-ink);
}

.mark[data-mark="?"]::before {
  border: 0;
  background: var(--mark-q);
}

/* a marked row: a 4 px stripe on its left edge, over the grey of a hit too */
.wrow[data-mark] summary {
  box-shadow: inset 4px 0 0 var(--stripe);
}

.wrow[data-mark="Y"] {
  --stripe: var(--yes);
}

.wrow[data-mark="N"] {
  --stripe: var(--no);
}

.wrow[data-mark="?"] {
  --stripe: var(--mark-q);
}

/* Numbers right-aligned in slots of one width, so the slashes of bid / ask line up down
   the column (site.md, item 39c): "100¢" fits, the ¢ is wider than a digit. */
.px {
  display: inline-block;
  min-width: 4.6ch;
  text-align: right;
}

.k {
  display: inline-block;
  min-width: 7ch;
  text-align: right;
  font-weight: 600;
}

.pct {
  display: inline-block;
  min-width: 4.5ch;
  text-align: right;
  color: var(--muted);
  margin-left: 4px;
}

.lbl {
  display: none;
}

.c-last {
  display: flex;
  gap: var(--gap-sib);
  align-items: center;
}

.whead .c-last {
  display: block;
}

.whead .hint {
  white-space: nowrap;
}

/* the header cells share their classes with the number cells, which never wrap; a long
   speaker name ("All Bernie Sanders events") wraps instead of running into the next column */
.whead > .c-price,
.whead > .c-before,
.whead > .c-all,
.whead > .c-fmt,
.whead > .c-pick {
  white-space: normal;
}

.badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-badge);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.badge:hover {
  text-decoration: none;
  outline: 1px solid currentColor;
}

.badge.yes,
.result-yes {
  background: var(--yes-bg);
  color: var(--yes);
}

.badge.no,
.result-no {
  background: var(--no-bg);
  color: var(--no);
}

/* a past event of another format than this one: outlined, not filled */
.badge.other {
  background: transparent;
  box-shadow: inset 0 0 0 1px currentColor;
}

.result {
  display: inline-block;
  padding: 0 var(--gap-sib);
  border-radius: var(--radius-badge);
  font-weight: 700;
  font-size: 13px;
}

.result-none {
  color: var(--muted);
}

.none {
  color: var(--muted);
}

/* -- word history -- */

.hist {
  padding: var(--pad-cell);
  padding-bottom: var(--pad-card);
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  overflow-x: auto;
}

.hist .note {
  margin: 0;
}

.hist table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.hist th {
  color: var(--muted);
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}

.hist th,
.hist td {
  padding: 6px var(--gap-sib);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.hist tr:last-child td {
  border-bottom: 0;
}

.hist .n {
  text-align: right;
  white-space: nowrap;
}

/* a past event of another format: its result outlined, as its badge (site.md, item 37) */
.hist tr.other .result {
  background: transparent;
  box-shadow: inset 0 0 0 1px currentColor;
}

/* the link to the word page under a history longer than "Last 5" (site.md, item 28) */
.all-link {
  margin: var(--gap-sib) 0 0;
  font-size: 13px;
}

/* -- word page -- */

.back {
  margin: 0 0 var(--gap-sib);
  font-size: 13px;
}

.back a {
  display: inline-block;
  padding: 6px 0;
  overflow-wrap: anywhere;
}

.ev-head h1 .flag {
  font-size: 13px;
  font-weight: 400;
  vertical-align: middle;
}

.word-kn .flag {
  margin-left: 4px;
}

.word-hist {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}

/* filled and outlined badges explained, under the column headers (site.md, item 37) */
.words > .legend {
  margin: 0;
  padding: var(--pad-cell);
  border-bottom: 1px solid var(--border);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px var(--gap-sib);
  margin: 0 0 var(--gap-sib);
  color: var(--muted);
  font-size: 13px;
}

.badge.mini {
  width: 16px;
  height: 16px;
  font-size: 10px;
}

.badge.mini:hover {
  outline: none;
}

/* -- past: filters, count, pages -- */

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--gap-sib) var(--pad-card);
  margin: 0 0 var(--pad-card);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.field-label {
  color: var(--muted);
  font-size: 13px;
}

.filters select,
.filters input,
.filters button {
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-badge);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.field-q {
  flex: 1 1 200px;
}

.field-q input {
  width: 100%;
}

.filters button {
  padding: 0 var(--pad-card);
  color: var(--accent);
  cursor: pointer;
}

.filters button:hover {
  background: var(--surface-2);
}

.count {
  margin: 0 0 var(--pad-card);
  color: var(--muted);
  font-size: 13px;
}

.pager {
  display: flex;
  justify-content: space-between;
  gap: var(--pad-card);
  margin-top: var(--gap-section);
}

.pager a {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-badge);
  line-height: 20px;
}

.pager a:hover {
  text-decoration: none;
  background: var(--surface-2);
}

.pager-older {
  margin-left: auto;
}

.nowrap {
  white-space: nowrap;
}

/* -- how we count -- */

.prose {
  max-width: 68ch;
}

.prose h2 {
  margin: var(--gap-section) 0 var(--gap-sib);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.3;
}

.prose p,
.prose ul {
  margin: 0 0 var(--gap-sib);
}

.prose ul {
  padding-left: 20px;
}

/* -- the Transcribe page (site.md, item 46) -- */

.meta > .tx-link {
  white-space: nowrap;
}

#tx-app > h2,
.tx-key h2 {
  margin: 0 0 var(--gap-sib);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.3;
}

#tx-app > h2 {
  margin-top: var(--gap-section);
}

.tx-key {
  max-width: 68ch;
  margin: 0 0 var(--pad-card);
  padding: var(--pad-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.tx-key p {
  margin: 0 0 var(--gap-sib);
}

.tx-key > p:not(.note) {
  color: var(--muted);
}

.tx-keyform {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-sib);
  margin: var(--pad-card) 0 var(--gap-sib);
}

.tx-keyform label {
  flex-basis: 100%;
  font-size: 13px;
  font-weight: 600;
}

#tx-app button,
#tx-app input[type="password"],
#tx-app input[type="search"] {
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-badge);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

#tx-app button {
  padding: 0 var(--pad-card);
  color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
}

#tx-app button:hover:not(:disabled) {
  background: var(--surface-2);
}

#tx-app button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

#tx-key {
  flex: 1 1 260px;
  min-width: 0;
  max-width: 420px;
}

#tx-key-error {
  margin: 0;
  color: var(--no);
}

.tx-keyline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-sib);
  margin: 0 0 var(--pad-card);
  color: var(--muted);
  font-size: 13px;
}

.tx-keyline[hidden] {
  display: none;
}

#tx-app .tx-keyline button {
  height: 28px;
  padding: 0 10px;
  font-size: 13px;
}

.ico {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* source, status, actions: one line, wrapping on a phone */
.tx-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-sib) 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  background: var(--surface);
}

.tx-source {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-badge);
  overflow: hidden;
}

#tx-app .tx-source button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  color: var(--muted);
}

#tx-app .tx-source button + button {
  border-left: 1px solid var(--border);
}

#tx-app .tx-source button[aria-pressed="true"] {
  background: var(--surface-2);
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.tx-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 13px;
  line-height: 24px;
  white-space: nowrap;
}

.tx-pill::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.tx-pill[data-state="listening"] {
  background: var(--yes-bg);
  color: var(--yes);
}

.tx-pill[data-state="connecting"],
.tx-pill[data-state="reconnecting"],
.tx-pill[data-state="stopping"] {
  background: var(--warn-bg);
  color: var(--warn);
}

.tx-pill[data-state="error"] {
  background: var(--no-bg);
  color: var(--no);
}

.tx-actions {
  display: flex;
  align-items: center;
  gap: var(--gap-sib);
  margin-left: auto;
}

#tx-app .tx-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  padding: 0;
  color: var(--muted);
}

#tx-app #tx-start {
  min-width: 84px;
  border-color: transparent;
  background: var(--yes);
  color: var(--surface);
  font-weight: 600;
}

#tx-app #tx-start.stop {
  background: var(--no);
}

#tx-app #tx-start:hover:not(:disabled) {
  filter: brightness(1.08);
}

.tx-settings {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sib) var(--gap-section);
  margin: 0 0 var(--pad-card);
  padding: 12px;
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  background: var(--surface);
}

.tx-set {
  flex: 1 1 260px;
  min-width: 0;
}

.tx-set label {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-sib);
  font-weight: 600;
  cursor: pointer;
}

.tx-set input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}

.tx-set .note {
  margin: 4px 0 0;
}

#tx-hint:empty,
#tx-line:empty {
  display: none;
}

#tx-error,
#tx-storage {
  margin: 0 0 var(--gap-sib);
}

#tx-error {
  background: var(--no-bg);
  color: var(--no);
}

div.tx-find {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 var(--gap-sib);
}

div.tx-find[hidden] {
  display: none;
}

#tx-find {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 420px;
}

#tx-find-count {
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

/* the transcript scrolls inside its box; "Jump to latest" floats over its bottom edge */
.tx-box {
  position: relative;
  margin-top: var(--gap-sib);
}

.tx-transcript {
  height: 360px;
  overflow: auto;
  padding: var(--pad-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  font-size: 15px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.tx-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 100%;
  color: var(--muted);
  text-align: center;
}

.tx-empty[hidden] {
  display: none;
}

.tx-empty .ico {
  width: 28px;
  height: 28px;
  margin-bottom: var(--gap-sib);
}

.tx-empty p {
  margin: 0;
}

.tx-empty-title {
  color: var(--text);
  font-weight: 600;
}

.tx-t {
  display: block;
  margin: 12px 0 2px;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.tx-text > .tx-t:first-child {
  margin-top: 0;
}

.tx-final.off,
.tx-interim {
  color: var(--muted);
}

.tx-interim {
  font-style: italic;
}

.tx-transcript mark,
.tx-last mark,
.tx-hits mark {
  padding: 0 2px;
  border-radius: 3px;
  background: var(--yes-bg);
  color: var(--text);
  font-weight: 600;
}

.tx-transcript mark.tx-hit.off {
  background: transparent;
  color: inherit;
  box-shadow: inset 0 -1px 0 transparent;
  border-bottom: 1px dashed var(--muted);
  border-radius: 0;
}

.tx-transcript mark.tx-hit.dismissed {
  background: transparent;
  color: var(--muted);
  text-decoration: line-through;
}

.tx-transcript mark.tx-hit.interim {
  background: transparent;
  color: inherit;
  border-radius: 0;
  box-shadow: inset 0 -2px 0 var(--yes);
}

.tx-transcript mark.tx-find {
  padding: 0;
  background: var(--warn-bg);
  color: var(--warn);
  box-shadow: 0 0 0 1px var(--warn);
}

#tx-app .tx-jump {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  height: 32px;
  border-radius: 999px;
  background: var(--surface-2);
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.25);
}

#tx-app .tx-jump[hidden] {
  display: none;
}

.tx-dl {
  margin: var(--gap-sib) 0 0;
}

/* the market rows: the order never changes, a heard word does not jump */
.tx-words {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  overflow: hidden;
}

.tx-word {
  padding: var(--pad-cell);
}

.tx-word + .tx-word {
  border-top: 1px solid var(--border);
}

.tx-w-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--gap-sib);
}

.tx-w-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: auto;
  font-size: 13px;
  line-height: 1.35;
  text-align: right;
}

.tx-count {
  font-weight: 600;
}

.tx-state {
  color: var(--muted);
}

.tx-word.progress .tx-state {
  color: var(--warn);
  font-weight: 600;
}

.tx-word.heard {
  background: var(--hit-bg);
}

.tx-word.heard .tx-state {
  color: var(--yes);
  font-weight: 600;
}

.tx-word.manual .tx-count,
.tx-word.manual .tx-state {
  color: var(--muted);
  font-weight: 400;
}

.tx-last {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.tx-last mark,
.tx-hits mark {
  font-weight: 600;
}

.tx-hits {
  margin-top: 4px;
  font-size: 13px;
}

.tx-hits > summary {
  display: inline-block;
  padding: 4px 0;
  color: var(--accent);
  cursor: pointer;
}

.tx-hits ul {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}

.tx-hits li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--gap-sib);
  padding: 6px 0;
  border-top: 1px solid var(--border);
}

.tx-hits time {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tx-hits q {
  flex: 1 1 240px;
  min-width: 0;
}

.tx-hits li.dismissed q {
  color: var(--muted);
  text-decoration: line-through;
}

.tx-hits li.dismissed mark {
  background: transparent;
  color: inherit;
}

#tx-app .tx-dismiss {
  height: 28px;
  padding: 0 10px;
  font-size: 13px;
}

/* -- word table as cards: phones, and tablets up to 900 px, where the five columns no
   longer fit (site.md, first-run walk item 14) -- */

@media (max-width: 900px) {
  /* the column headers become a strip of sort links */
  .whead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px var(--gap-sib);
    padding: var(--pad-cell);
  }

  .whead > * {
    padding: 0;
  }

  .sort-label {
    display: inline;
  }

  .whead .c-last,
  .whead .c-mkt,
  .whead .plain,
  .whead .full {
    display: none;
  }

  .whead .short {
    display: inline;
  }

  /* sort links as chips: 32 px tall tap targets, 8 px apart */
  .whead a {
    padding: 5px 10px;
    line-height: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-badge);
    color: var(--text);
  }

  .whead a.active {
    border-color: var(--accent);
    color: var(--accent);
  }

  .whead a:hover {
    text-decoration: none;
  }

  .k,
  .pct {
    min-width: 0;
  }

  /* a card: word and price; k/n and k/n by format; the badges. The right column takes at
     most half the card, so a long format label with its "small n" wraps there instead of
     squeezing the word (site.md, item 34) */
  .wrow summary {
    grid-template-columns: minmax(0, 1fr) fit-content(50%);
    grid-template-areas:
      "word price"
      "mkt mkt"
      "all fmt"
      "last last";
    align-items: baseline;
    padding: var(--gap-sib) 0;
  }

  .wrow summary > span {
    padding: 2px 12px;
  }

  .no-fmt .wrow summary {
    grid-template-areas:
      "word price"
      "mkt mkt"
      "all all"
      "last last";
  }

  /* a settled single event: "Before start 27¢" under the word (site.md, item 36) */
  .before .wrow summary {
    grid-template-areas:
      "word price"
      "mkt mkt"
      "before before"
      "all fmt"
      "last last";
  }

  .before.no-fmt .wrow summary {
    grid-template-areas:
      "word price"
      "mkt mkt"
      "before before"
      "all all"
      "last last";
  }

  /* the Chosen column on a line of its own under All and the format (site.md, item 44) */
  .words.pick .wrow summary {
    grid-template-areas:
      "word price"
      "mkt mkt"
      "all fmt"
      "pick pick"
      "last last";
  }

  .words.pick.no-fmt .wrow summary {
    grid-template-areas:
      "word price"
      "mkt mkt"
      "all all"
      "pick pick"
      "last last";
  }

  .words.before.pick .wrow summary {
    grid-template-areas:
      "word price"
      "mkt mkt"
      "before before"
      "all fmt"
      "pick pick"
      "last last";
  }

  .words.before.pick.no-fmt .wrow summary {
    grid-template-areas:
      "word price"
      "mkt mkt"
      "before before"
      "all all"
      "pick pick"
      "last last";
  }

  .wrow summary > .c-pick {
    grid-area: pick;
  }

  /* a new word: word, "new word", price and links; no cells holding a lone "—"
     (site.md, item 39d) */
  .wrow.new-word summary > .c-all,
  .wrow.new-word summary > .c-fmt,
  .wrow.new-word summary > .c-pick,
  .wrow.new-word summary > .c-last {
    display: none;
  }

  /* the market link under the word, its tap target as tall as before */
  .wrow summary > .c-mkt {
    grid-area: mkt;
    text-align: left;
    padding-top: 0;
    padding-bottom: 0;
  }

  .wrow summary > .c-before {
    grid-area: before;
  }

  .wrow summary > .c-word {
    grid-area: word;
  }

  .wrow summary > .c-price {
    grid-area: price;
    text-align: right;
    font-weight: 600;
  }

  .wrow summary > .c-all {
    grid-area: all;
  }

  .wrow summary > .c-fmt {
    grid-area: fmt;
    text-align: right;
    white-space: normal;
  }

  .wrow summary > .c-fmt .k,
  .wrow summary > .c-fmt .pct {
    white-space: nowrap;
  }

  .wrow summary > .c-last {
    grid-area: last;
    flex-wrap: wrap;
    padding-top: 6px;
  }

  /* 32 px tall tap targets */
  .badge {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }

  /* inline padding: a taller tap target without a taller line */
  .mkt {
    padding: 6px 0;
  }

  /* "Also now" links: 32 px tall tap targets, wrapping */
  .also-now a {
    display: inline-block;
    padding: 6px 0;
    line-height: 20px;
  }

  .lbl {
    display: inline;
    color: var(--muted);
    font-size: 13px;
    margin-right: 4px;
  }

  /* "newest first" before the badges of every card: no column header here */
  .lbl-order {
    margin-right: 0;
  }

  /* word history: one block per past event; the lows on one line, wrapping if they must */
  .hist {
    overflow-x: visible;
  }

  .hist thead {
    display: none;
  }

  .hist table,
  .hist tbody {
    display: block;
  }

  .hist tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px var(--gap-sib);
    padding: var(--gap-sib) 0;
    border-bottom: 1px solid var(--border);
  }

  .hist tr:last-child {
    border-bottom: 0;
  }

  .hist td {
    padding: 0;
    border: 0;
  }

  .hist .h-date { order: 1; }
  .hist .h-fmt { order: 2; color: var(--muted); }
  .hist .h-res { order: 3; margin-left: auto; }
  .hist .h-ev { order: 4; flex-basis: 100%; }
  .hist .h-pre { order: 5; }
  .hist .h-live { order: 6; }
  .hist .h-vol { order: 7; }
  .hist .h-link { order: 8; margin-left: auto; }

  .hist td.n {
    text-align: left;
  }

  /* "low 24h before 16¢ · in-event low 8¢ · vol 15.1k" */
  .hist td.n::before {
    content: attr(data-label) " ";
    color: var(--muted);
  }

  .hist td.h-live::before,
  .hist td.h-vol::before {
    content: "· " attr(data-label) " ";
  }
}

/* -- phone -- */

@media (max-width: 640px) {
  :root {
    --pad-page: 16px;
  }

  /* the brand and the three links on one line at 375 px */
  .site-head .wrap {
    column-gap: var(--pad-card);
  }

  body {
    font-size: 15px;
  }

  main.wrap {
    padding-top: 24px;
  }

  .event {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .ev-time {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 var(--gap-sib);
    align-items: baseline;
  }

  /* the start time on its own last line, so no wrapped line starts with an orphan "·" */
  .meta > .num {
    order: 1;
    flex-basis: 100%;
  }

  .meta > .num::before {
    content: none;
  }

  .ev-body {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .filters .field {
    flex: 1 1 140px;
  }

  .filters select {
    width: 100%;
  }

  /* Transcribe: the source on its own line, status and actions under it */
  .tx-source {
    flex: 1 1 100%;
  }

  #tx-app .tx-source button {
    flex: 1 1 50%;
    justify-content: center;
  }

  .tx-transcript {
    height: 300px;
  }
}