/* The "Market" look (docs/style_guide.md, docs/specs/site.md, item 62). Tokens first: every
   colour and size below is a token of the guide. Light and dark are equal and follow the OS;
   dark stays the default without a preference. Golos Text is served from /static/fonts. */

@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/golos-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/golos-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/golos-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* dark */
  --ground: #0b0d10;
  --panel: #13161a;
  --hit: #1f2225;
  --inset: #1a1d21;
  --text: #eceff1;
  --muted: #a5acb2;
  --ink: #f0f2f4;
  --on-ink: #15191d;
  --focus: #5fa7ff;
  --said: #4ac777;
  --on-said: #0b0d10;
  --no-fill: #451e1f;
  --no-ink: #f68486;
  --unbond: #f45249;
  --on-unbond: #0b0d10;
  --live: #5fa7ff;
  --heard: #c3a5f9;
  --q: #facb39;
  --q-bar: var(--q);
  --q-ink: #15191d;
  --track: #2f3338;
  --line: rgb(236 239 241 / 0.08);
  --line-strong: rgb(236 239 241 / 0.16);
  --outline: #6d747b;
  --warn-fill: #2e2410;
  --warn-ink: #f5c451;
  --shadow: 0 16px 48px rgb(0 0 0 / 0.5), 0 2px 8px rgb(0 0 0 / 0.4);

  /* aliases read by the kept parts of the old sheet (Past, word page, Transcribe) */
  --bg: var(--ground);
  --surface: var(--panel);
  --surface-2: var(--hit);
  --border: var(--line-strong);
  --accent: var(--text);
  --yes: var(--said);
  --yes-bg: #173a26;
  --no: var(--no-ink);
  --no-bg: var(--no-fill);
  --warn: var(--warn-ink);
  --warn-bg: var(--warn-fill);
  --hit-bg: var(--hit);
  --mark-q: var(--q);
  --mark-q-ink: var(--q-ink);

  /* type: Golos Text, one scale */
  --font: "Golos Text", ui-sans-serif, system-ui, sans-serif;
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-20: 20px;
  --fs-24: 24px;

  /* space: the ladder 8 < 20 < 32 < 40 */
  --gap-sib: 8px;
  --pad-cell-y: 12px;
  --pad-cell-x: 16px;
  --pad-cell: 12px 16px;
  --row: 52px;
  --row-hit: 40px;
  --pad-panel: 20px;
  --pad-card: 20px;
  --pad-page: 32px;
  --gap-block: 24px;
  --gap-section: 40px;
  /* from 1024 px: the sidebar with its line, the rail, the widest content (items 78, 80) */
  --side-w: 248px;
  --rail-w: 60px;
  --main-max: 1664px;

  --r-badge: 8px;
  --r-inset: 12px;
  --r-panel: 16px;
  --r-pill: 999px;
  --radius-card: var(--r-panel);
  --radius-badge: var(--r-badge);
  color-scheme: dark;
}

/* the theme of the system (docs/specs/site.md, item 147: unless Settings chose one, below) */
@media (prefers-color-scheme: light) {
  :root {
    --ground: #f2f5f7;
    --panel: #ffffff;
    --hit: #ebedef;
    --inset: #f4f6f8;
    --text: #15191d;
    --muted: #575e66;
    --ink: #15191d;
    --on-ink: #ffffff;
    --focus: #006de2;
    --said: #007f3d;
    --on-said: #ffffff;
    --no-fill: #ffe8e8;
    --no-ink: #b6303e;
    --unbond: #d01d21;
    --on-unbond: #ffffff;
    --live: #0065d2;
    --heard: #7444b4;
    --q: #f3c530;
    --q-bar: #a87b00;
    --track: #dbdee1;
    --line: rgb(21 25 29 / 0.08);
    --line-strong: rgb(21 25 29 / 0.14);
    --outline: #8a9199;
    --warn-fill: #fff1cc;
    --warn-ink: #6e4600;
    --shadow: 0 16px 48px rgb(21 25 29 / 0.16), 0 2px 8px rgb(21 25 29 / 0.08);
    --yes-bg: #ddf3e5;
    color-scheme: light;
  }
}

/* the light theme chosen in Settings: side.js puts data-theme on <html> before the first paint */
:root[data-theme="light"] {
  --ground: #f2f5f7;
  --panel: #ffffff;
  --hit: #ebedef;
  --inset: #f4f6f8;
  --text: #15191d;
  --muted: #575e66;
  --ink: #15191d;
  --on-ink: #ffffff;
  --focus: #006de2;
  --said: #007f3d;
  --on-said: #ffffff;
  --no-fill: #ffe8e8;
  --no-ink: #b6303e;
  --unbond: #d01d21;
  --on-unbond: #ffffff;
  --live: #0065d2;
  --heard: #7444b4;
  --q: #f3c530;
  --q-bar: #a87b00;
  --track: #dbdee1;
  --line: rgb(21 25 29 / 0.08);
  --line-strong: rgb(21 25 29 / 0.14);
  --outline: #8a9199;
  --warn-fill: #fff1cc;
  --warn-ink: #6e4600;
  --shadow: 0 16px 48px rgb(21 25 29 / 0.16), 0 2px 8px rgb(21 25 29 / 0.08);
  --yes-bg: #ddf3e5;
  color-scheme: light;
}

/* the dark theme chosen in Settings, over a light system: the tokens of the light block with
   their dark values */
:root[data-theme="dark"] {
  --ground: #0b0d10;
  --panel: #13161a;
  --hit: #1f2225;
  --inset: #1a1d21;
  --text: #eceff1;
  --muted: #a5acb2;
  --ink: #f0f2f4;
  --on-ink: #15191d;
  --focus: #5fa7ff;
  --said: #4ac777;
  --on-said: #0b0d10;
  --no-fill: #451e1f;
  --no-ink: #f68486;
  --unbond: #f45249;
  --on-unbond: #0b0d10;
  --live: #5fa7ff;
  --heard: #c3a5f9;
  --q: #facb39;
  --q-bar: var(--q);
  --track: #2f3338;
  --line: rgb(236 239 241 / 0.08);
  --line-strong: rgb(236 239 241 / 0.16);
  --outline: #6d747b;
  --warn-fill: #2e2410;
  --warn-ink: #f5c451;
  --shadow: 0 16px 48px rgb(0 0 0 / 0.5), 0 2px 8px rgb(0 0 0 / 0.4);
  --yes-bg: #173a26;
  color-scheme: dark;
}

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-14);
  line-height: 1.45;
  font-feature-settings: "tnum" 0;
}

a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--outline);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

a:hover {
  text-decoration-color: currentColor;
}

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

button,
input,
select {
  font: inherit;
}

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

.nowrap {
  white-space: nowrap;
}

.ico {
  width: 16px;
  height: 16px;
  flex: none;
}

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* fluid shell: 32 px gutters, no centred column on data pages */
.wrap {
  margin: 0 auto;
  padding: 0 var(--pad-page);
}

/* -- header: below 1024 px, the brand and the button of the menu, one line (item 149) -- */

.site-head .wrap {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--gap-sib);
  min-height: 64px;
}

.menu-btn {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--r-badge);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.menu-btn:hover {
  background: var(--hit);
}

.menu-btn .ico {
  width: 16px;
  height: 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: var(--fs-16);
  font-weight: 700;
  text-decoration: none;
}

/* four small segments: the tally, as the site's mark */
.brand-mark {
  display: inline-flex;
  gap: 2px;
}

.brand-mark i {
  width: 5px;
  height: 14px;
  border-radius: 2px;
  background: var(--said);
}

.brand-mark i:nth-child(3) {
  background: var(--track);
}

.brand-mark i:nth-child(4) {
  background: var(--track);
}

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

.site-foot {
  color: var(--muted);
  font-size: var(--fs-12);
}

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

/* -- banners and notes -- */

.banner {
  display: flex;
  align-items: center;
  gap: var(--gap-sib);
  margin: 0 0 var(--gap-block);
  padding: 10px var(--pad-cell-x);
  border-radius: var(--r-badge);
  background: var(--warn-fill);
  color: var(--warn-ink);
  font-size: var(--fs-14);
  font-weight: 500;
}

.banner[hidden] {
  display: none;
}

/* "No words match ..." of an event page carries the query: one of no spaces breaks anywhere
   (item 136) */
.empty {
  margin: 0 0 var(--pad-panel);
  color: var(--muted);
  overflow-wrap: anywhere;
}

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

h1 {
  font-size: var(--fs-24);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
}

.page-title {
  margin-bottom: var(--gap-sib);
}

.lede {
  margin: 0 0 var(--gap-block);
  color: var(--muted);
  max-width: 70ch;
}

/* ==== the pages that keep their markup (item 69): tags, "Past", the word page and
   Transcribe, re-toned through the aliases of the old token names ==== */
/* -- 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: var(--fs-12);
  line-height: 20px;
  white-space: nowrap;
}

.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: var(--fs-12);
  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 {
  text-decoration: none;
  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 .tz,
.ev-time .rel {
  color: var(--muted);
  font-size: var(--fs-12);
}

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

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

/* past events: the outcome where an upcoming event has its status tag */
.outcome {
  font-size: var(--fs-12);
  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: var(--fs-12);
}

.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;
}

/* -- 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: var(--fs-12);
  color: var(--muted);
}

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

/* "Starts in 52 min 34 s" on the Transcribe page, under the heading (site.md, item 31) */
.ev-head .countdown {
  margin: var(--gap-sib) 0 0;
  font-size: var(--fs-16);
  font-weight: 600;
}

/* -- 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: var(--fs-12);
}

.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: var(--fs-12);
}

/* -- word page -- */

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

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

.ev-head h1 .flag {
  font-size: var(--fs-12);
  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 on the word page (site.md, item 37) */
.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: var(--fs-12);
}

/* the word page legend keeps its mini badges (item 69): filled like a YES result, outlined
   like the YES of another format in its table */
.badge.mini {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  font-size: var(--fs-12);
  font-weight: 700;
  line-height: 1;
}

.badge.mini.yes {
  background: var(--said);
  color: var(--on-said);
}

.badge.mini.other {
  background: transparent;
  color: var(--said);
  box-shadow: inset 0 0 0 1.5px currentColor;
}

.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: var(--fs-12);
}

/* the fields and "Filter" of the row as those of /official (item 151): 40 px, an outline of
   1.5 px --outline, --panel; the outline of 1 px --line-strong was about 1.5:1 */
.filters select,
.filters input,
.filters button {
  height: 40px;
  padding: 0 12px;
  border: 1.5px solid var(--outline);
  border-radius: var(--r-badge);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-14);
}

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

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

.filters button {
  padding: 0 16px;
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
}

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

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

.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: var(--fs-16);
  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: var(--fs-16);
  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: var(--fs-12);
  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: var(--fs-12);
}

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

.tx-keyline a {
  color: var(--text);
}

.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: var(--fs-12);
  line-height: 24px;
  white-space: nowrap;
}

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

/* Listening: the text --text on the green of YES and a dot --said (item 197: --said as the text
   was 4.39:1 in the light theme) */
.tx-pill[data-state="listening"] {
  background: var(--yes-bg);
  color: var(--text);
}

.tx-pill[data-state="listening"]::before {
  background: var(--said);
}

.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: var(--fs-12);
  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: var(--fs-14);
  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: var(--fs-12);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

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

/* Counting off, and a speaker who does not count (item 192) */
.tx-final.off,
.tx-final.spk,
.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,
.tx-transcript mark.tx-hit.spk {
  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: var(--fs-12);
  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);
}

/* "Heard": the words heard in this browser are violet, as "heard" on the event page (item 197:
   --said here was 4.36:1 on --hit in the light theme) */
.tx-word.heard .tx-state {
  color: var(--heard);
  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: var(--fs-12);
}

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

.tx-hits {
  margin-top: 4px;
  font-size: var(--fs-12);
}

.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;
}

/* a mention of a speaker who does not count: greyed, its hit dashed as Counting off; no button,
   its label says why (item 192) */
.tx-hits li.spk q {
  color: var(--muted);
}

.tx-hits li.spk mark {
  border-bottom: 1px dashed var(--muted);
  border-radius: 0;
  background: transparent;
  color: inherit;
}

#tx-app .tx-dismiss {
  height: 28px;
  padding: 0 10px;
  font-size: var(--fs-12);
}

@media (max-width: 900px) {
  .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;
  }

  body {
    font-size: var(--fs-14);
  }

  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 "·"
     (the meta lines of the word and Transcribe pages) */
  .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;
  }
}
/* ==== shared pieces of the Market look ==== */

/* tags of the kept pages, re-toned: neutral by default, amber only for "awaiting" */
.tag {
  border: 0;
  border-radius: var(--r-pill);
  padding: 2px 10px;
  background: var(--hit);
  color: var(--muted);
  font-size: var(--fs-12);
  font-weight: 500;
  line-height: 20px;
}

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

.day-label {
  text-transform: none;
  letter-spacing: 0;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  min-height: 28px;
  padding: 2px 12px;
  border-radius: var(--r-pill);
  background: var(--panel);
  color: var(--text);
  font-size: var(--fs-14);
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
}

/* only a pill: countdown.js also sets pill-live on the plain countdown line of Transcribe
   (item 71), which stays as it was (item 69) */
.pill.pill-live {
  color: var(--live);
  font-weight: 700;
}

.pill.pill-live::before,
.live-dot {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--live) 22%, transparent);
  flex: none;
}

.pill-closed,
.pill-unknown {
  background: var(--warn-fill);
  color: var(--warn-ink);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-sib);
  min-height: 40px;
  padding: 0 20px;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  font-size: var(--fs-14);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.btn-primary {
  background: var(--ink);
  color: var(--on-ink);
}

.btn-primary:hover {
  background: color-mix(in srgb, var(--ink) 86%, var(--ground));
}

.btn-outline {
  background: transparent;
  border-color: var(--outline);
  color: var(--text);
}

.btn-outline:hover {
  border-color: var(--text);
}

/* "Delete", "Delete all", "Erase everything": the outline and the text --no-ink (items 144, 147) */
.btn-danger {
  background: transparent;
  border-color: var(--no-ink);
  color: var(--no-ink);
}

.btn-danger:hover {
  background: color-mix(in srgb, var(--no-ink) 10%, transparent);
}

/* the one list panel: no border, the ground's contrast sets it off */
.sheet {
  background: var(--panel);
  border-radius: var(--r-panel);
  padding: var(--pad-panel) 0 var(--gap-sib);
}

.chev {
  flex: none;
  width: 16px;
  height: 16px;
  display: inline-block;
  background: currentColor;
  color: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3.5 10.5 8 6 12.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3.5 10.5 8 6 12.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: transform 150ms ease-out;
}

/* ==== home: one panel list ==== */

.home-head {
  margin-bottom: var(--gap-block);
}

.home-head .lede {
  margin: 0;
}

.home-sheet {
  padding: var(--gap-sib) 0;
}

.home-sheet .day + .day {
  margin-top: 0;
  border-top: 1px solid var(--line);
}

.home-sheet .day-label {
  display: flex;
  align-items: center;
  gap: var(--gap-sib);
  margin: 0;
  padding: var(--pad-cell-y) var(--pad-panel) 4px;
  color: var(--text);
  font-size: var(--fs-16);
  font-weight: 700;
}

.day-n {
  color: var(--muted);
  font-size: var(--fs-14);
  font-weight: 500;
}

.day-live .day-label {
  color: var(--live);
}

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

.mk {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 200px 132px;
  align-items: center;
  gap: 4px var(--pad-panel);
  min-height: 64px;
  padding: 10px var(--pad-panel);
  color: var(--text);
  text-decoration: none;
  /* the class "event" of the kept Past rows draws a card: not here */
  border: 0;
  border-radius: 0;
  background: transparent;
}

.mk:hover {
  background: var(--inset);
}

.mk-list li + li .mk {
  box-shadow: inset 0 1px 0 var(--line);
}

.mk-when {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.mk-when .pill {
  min-height: 24px;
  padding: 0 10px;
  background: var(--hit);
  font-size: var(--fs-12);
}

.mk-when .pill-live {
  background: color-mix(in srgb, var(--live) 12%, var(--panel));
}

.mk-time {
  color: var(--muted);
  font-size: var(--fs-12);
  padding-left: 2px;
}

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

.mk-title {
  font-size: var(--fs-16);
  font-weight: 500;
  overflow-wrap: anywhere;
}

.mk-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--pad-cell-x);
  color: var(--muted);
  font-size: var(--fs-12);
}

.mk-meter {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mini-tally {
  display: flex;
  gap: 1px;
  width: 120px;
  height: 8px;
  flex: none;
}

.mini-tally .seg {
  flex: 1 1 0;
  border-radius: 1.5px;
}

.mini-count {
  color: var(--muted);
  font-size: var(--fs-12);
  white-space: nowrap;
}

.mini-count b {
  color: var(--said);
  font-size: var(--fs-14);
}

.tbar {
  position: relative;
  width: 120px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--track);
  overflow: hidden;
  flex: none;
}

.tbar i {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: var(--r-pill);
  background: var(--live);
}

.mk-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gap-sib);
}

/* ==== event page: title block ==== */

.ev-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pad-panel) var(--gap-section);
  margin-bottom: var(--gap-block);
}

/* the title keeps 600 px for its pills, so a ticking countdown never wraps them: narrower, the
   three buttons (item 142) go under the title instead of beside it */
.ev-top .ev-title {
  min-width: 0;
  flex: 1 1 600px;
}

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

.ev-top .sub {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: var(--fs-14);
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sib);
  margin-top: 12px;
}

.pills .countdown {
  font-size: var(--fs-14);
}

.ev-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sib);
  flex: none;
}

/* "Ask AI about this event" (item 142), and "Ask AI about the rules" on /rules: the icon of the
   page in the sidebar */
.ask-link .ico {
  width: 16px;
  height: 16px;
}

/* the outlined buttons of the header lie on the ground: their outline mixed toward the text keeps
   3:1 there in both themes, as the controls of the rules (--outline alone is 2.9:1 on the light
   ground) */
.ev-actions {
  --line-ground: color-mix(in srgb, var(--outline) 85%, var(--text));
}

.ev-actions .btn-outline,
.rules-page .ask-link {
  border-color: var(--line-ground);
}

.ev-actions .btn-outline:hover,
.rules-page .ask-link:hover {
  border-color: var(--text);
}

/* ==== the tally: one segment per listed word ==== */

.tally {
  padding: 0 var(--pad-panel) var(--pad-panel);
}

.tally-bar {
  display: flex;
  gap: 2px;
  height: 10px;
}

.seg {
  flex: 1 1 0;
  min-width: 2px;
  border-radius: 3px;
  background: var(--track);
  box-shadow: inset 0 0 0 1.5px var(--outline);
}

.seg-said {
  background: var(--said);
  box-shadow: none;
}

.seg-fell {
  background: var(--unbond);
  box-shadow: none;
}

.seg-heard {
  background: var(--heard);
  box-shadow: none;
}

.seg-no {
  background: var(--no-fill);
  box-shadow: inset 0 0 0 1.5px var(--no-ink);
}

.mini-tally .seg {
  box-shadow: none;
}

.mini-tally .seg-open {
  background: var(--track);
}

.tally-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px var(--pad-panel);
  margin-top: 12px;
}

.tally-counts {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px var(--pad-panel);
  margin: 0;
  font-size: var(--fs-14);
  color: var(--muted);
}

.cnt {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}

.cnt b {
  color: var(--text);
  font-size: var(--fs-20);
  font-weight: 700;
  line-height: 1;
}

.cnt .key {
  align-self: center;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--track);
  box-shadow: inset 0 0 0 1.5px var(--outline);
}

.cnt-said b {
  color: var(--said);
}

.cnt-said .key {
  background: var(--said);
  box-shadow: none;
}

.cnt-fell b {
  color: var(--unbond);
}

.cnt-fell .key {
  background: var(--unbond);
  box-shadow: none;
}

.cnt-heard b {
  color: var(--heard);
}

.cnt-heard .key {
  background: var(--heard);
  box-shadow: none;
}

.cnt-no .key {
  background: var(--no-fill);
  box-shadow: inset 0 0 0 1.5px var(--no-ink);
}

.cnt-total .key {
  display: none;
}

.asof {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-14);
  white-space: nowrap;
}

.asof b {
  color: var(--text);
  font-weight: 700;
}

.tally-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--pad-panel);
  margin: 4px 0 0;
  color: var(--muted);
  font-size: var(--fs-12);
}

.banner-in {
  margin: 0 var(--pad-panel) var(--pad-panel);
}

/* ==== toolbar: sort tabs, search, choose events ==== */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-sib) 12px;
  padding: 0 var(--pad-panel) 12px;
}

.sorts {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--inset);
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  color: var(--muted);
  font-size: var(--fs-14);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.tab:hover {
  color: var(--text);
  background: var(--hit);
}

.tab.active {
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 700;
}

.tab .short {
  display: none;
}

.wsearch {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 1 300px;
  min-width: 200px;
  max-width: none;
  margin: 0;
  height: 40px;
  padding: 0 4px 0 14px;
  border-radius: var(--r-pill);
  background: var(--inset);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.wsearch:focus-within {
  box-shadow: inset 0 0 0 1.5px var(--focus);
}

.wsearch .ico {
  color: var(--muted);
}

.wsearch input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 36px;
  padding: 0 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: var(--fs-16);
}

.wsearch input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.wsearch input:focus-visible {
  outline: none;
}

.wsearch button {
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--panel);
  color: var(--text);
  font-size: var(--fs-14);
  font-weight: 700;
  cursor: pointer;
}

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

.pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 16px;
  border: 1.5px solid var(--outline);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text);
  font-size: var(--fs-14);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}

.pill-btn::-webkit-details-marker,
.pill-btn::marker {
  display: none;
  content: "";
}

.pill-btn:hover {
  border-color: var(--text);
}

.pill-btn.on,
.pick[open] > .pill-btn {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
  font-weight: 700;
}

.info-btn {
  margin-left: auto;
}

/* Choose events: a non-modal side sheet (a bottom sheet on phones) */
.pick {
  margin: 0;
}

.pick > summary::before {
  content: none;
}

.pick-sheet {
  position: fixed;
  z-index: 20;
  top: 16px;
  right: 16px;
  bottom: 16px;
  width: min(440px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  border-radius: var(--r-panel);
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.pick-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px 4px var(--pad-panel);
}

.pick-title-h {
  margin: 0;
  font-size: var(--fs-16);
  font-weight: 700;
}

.sheet-close {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.sheet-close:hover {
  background: var(--hit);
}

.pick-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  flex: 1 1 auto;
  margin: 0;
  padding: 4px var(--pad-panel) var(--pad-panel);
  border: 0;
  background: transparent;
}

.pick-q {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--muted);
  font-size: var(--fs-12);
  font-weight: 500;
}

.pick-form input[type="search"] {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--outline);
  border-radius: var(--r-badge);
  background: var(--inset);
  color: var(--text);
  font-size: var(--fs-16);
}

.pick-form .hint {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-12);
}

.pick-list {
  list-style: none;
  margin: 0 calc(-1 * var(--pad-panel));
  padding: 0;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

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

.pick-list label {
  display: grid;
  grid-template-columns: 20px 92px minmax(0, 1fr);
  gap: 2px 12px;
  align-items: start;
  padding: 10px var(--pad-panel);
  cursor: pointer;
  font-size: var(--fs-14);
}

.pick-list input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--ink);
}

.pick-list .pick-date {
  color: var(--muted);
}

.pick-list .pick-fmt {
  grid-column: 3;
  color: var(--muted);
  font-size: var(--fs-12);
}

.pick-list li.chosen {
  background: var(--inset);
}

.pick-list li.chosen .pick-title {
  font-weight: 700;
}

.pick-actions {
  display: flex;
  gap: var(--gap-sib);
}

.pick-actions .btn {
  flex: 1 1 0;
}

.pick-note {
  margin: 0 var(--pad-panel) 12px;
}

/* Also now (items 32, 63): a strip of event pills on wide screens, a one-line disclosure on
   phones */
.also-now {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-sib) 12px;
  margin: calc(-1 * var(--gap-sib)) 0 var(--gap-block);
  font-size: var(--fs-12);
}

.also-label {
  color: var(--muted);
  font-weight: 500;
  line-height: 28px;
  flex: none;
}

.also-list {
  display: flex;
  flex: 1 1 0;
  flex-wrap: wrap;
  gap: var(--gap-sib);
  min-width: 0;
}

.also-phone {
  display: none;
}

.also {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  background: var(--inset);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}

.also:hover {
  box-shadow: inset 0 0 0 1px var(--outline);
}

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

.also .when.is-live {
  color: var(--live);
  font-weight: 700;
}

.also .live-dot {
  width: 6px;
  height: 6px;
  box-shadow: none;
}

/* the legend popover: with a mouse, a card at the «i» of the Last 5 header (.legend-card,
   item 77); in the centre, dimmed, from "How to read" and on touch */
.legend-pop {
  margin: auto;
  max-width: min(440px, calc(100vw - 32px));
  padding: var(--pad-panel);
  border: 0;
  border-radius: var(--r-panel);
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--shadow);
  font-size: var(--fs-14);
}

.legend-pop::backdrop {
  background: rgb(0 0 0 / 0.2);
}

/* the card (item 77): rows.js sets its top and left in page coordinates, so in the top layer
   it moves with the page; without the dimming it lies on a panel of its own colour, hence the
   edge; 100% is the window without scrollbars, as rows.js measures it */
.legend-pop.legend-card {
  position: absolute;
  inset: auto;
  margin: 0;
  max-height: calc(100% - 32px);
  border: 1px solid var(--line-strong);
}

.legend-pop.legend-card::backdrop {
  background: transparent;
}

.legend-h {
  margin: 0 0 12px;
  font-size: var(--fs-16);
  font-weight: 700;
}

.legend-pop ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.legend-pop li {
  display: block;
  line-height: 24px;
}

.legend-pop .dot {
  vertical-align: middle;
  margin: 0 4px 0 8px;
}

.legend-pop li > .dot:first-child {
  margin-left: 0;
}

.mk-demo {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-right: 4px;
  border-radius: 50%;
  background: var(--said);
  color: var(--on-said);
  font-size: var(--fs-12);
  font-weight: 700;
  vertical-align: middle;
}

/* ==== the word table ==== */

/* a query container: its rows go in two lines by the width of the table (item 82); the two
   columns of "my transcripts" come after Chosen (item 89), and are empty tracks, none at all,
   while mine.js has not put them in; the official column between them (item 108), a track only
   on the tables of .off */
.words {
  container: words / inline-size;
  --c-before: ;
  --c-fmt: minmax(120px, 1fr);
  --c-pick: ;
  --c-off: ;
  --c-my: ;
  --c-myfmt: ;
  --chk: 0px;
  --cols: var(--chk) minmax(200px, 1.4fr) 32px 132px var(--c-before) minmax(120px, 1fr) var(--c-fmt) var(--c-pick) var(--c-off) var(--c-my) var(--c-myfmt) 128px 32px;
  border-top: 1px solid var(--line);
}

.words.no-fmt {
  --c-fmt: ;
}

.words.pick {
  --c-pick: minmax(120px, 1fr);
}

.words.off {
  --c-off: minmax(120px, 1fr);
}

.words.mine {
  --c-my: minmax(132px, 1fr);
}

.words.mine-fmt {
  --c-myfmt: minmax(132px, 1fr);
}

.words.before {
  --c-before: 96px;
}

.whead,
.wrow {
  display: grid;
  grid-template-columns: var(--cols);
  column-gap: 12px;
  align-items: center;
  padding: 0 var(--pad-panel);
}

.whead {
  min-height: 40px;
  color: var(--muted);
  font-size: var(--fs-12);
  font-weight: 500;
}

.whead .active {
  color: var(--text);
  font-weight: 700;
}

/* the header cell of Last 5 takes the empty track of the Kalshi icons too: 128 + 12 + 32 =
   172 px hold the label, the gap and the «i» (item 76); the rows keep their own tracks */
.whead .c-last {
  display: inline-flex;
  grid-column: span 2;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* the empty header cell of the Kalshi icons: not drawn, or it would wrap to a second line */
.whead .c-mkt {
  display: none;
}

/* the «i»: a 24 px circle that the header cell never squeezes (item 76) */
.info {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1.5px solid var(--outline);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font: 700 var(--fs-12) / 1 var(--font);
  cursor: pointer;
}

.info:hover {
  color: var(--text);
  border-color: var(--text);
}

.whead .c-price,
.whead .c-before,
.whead .c-all,
.whead .c-fmt,
.whead .c-pick,
.whead .c-off,
.whead .c-my,
.whead .c-myfmt {
  line-height: 1.25;
}

.glabel {
  display: flex;
  align-items: baseline;
  gap: var(--gap-sib);
  padding: 12px var(--pad-panel) 6px calc(var(--pad-panel) + 32px);
  border-top: 1px solid var(--line);
  font-size: var(--fs-14);
  font-weight: 700;
}

.glabel b {
  color: var(--muted);
  font-weight: 500;
}

.glabel-said span {
  color: var(--said);
}

.glabel-fell span {
  color: var(--unbond);
}

.wrow {
  position: relative;
  min-height: var(--row);
  border-top: 1px solid var(--line);
}

.whead + .wrow,
.glabel + .wrow {
  border-top-color: transparent;
}

.wrow:hover {
  background: var(--inset);
}

.wrow.open {
  background: var(--inset);
}

.c-chk {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: var(--fs-12);
  font-weight: 700;
}

.c-chk svg {
  width: 14px;
  height: 14px;
}

.wrow[data-group="said"] .c-chk {
  background: var(--said);
  color: var(--on-said);
}

.wrow.unbond .c-chk {
  background: var(--unbond);
  color: var(--on-unbond);
}

.wtog {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  min-width: 0;
  margin-left: -4px;
  padding: 0 4px;
  border-radius: var(--r-badge);
  color: var(--text);
  text-decoration: none;
}

.wtog:hover .phrase {
  text-decoration: underline;
  text-decoration-color: var(--outline);
  text-underline-offset: 0.18em;
}

.wrow.open .chev {
  transform: rotate(90deg);
}

.wtext {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px var(--gap-sib);
  min-width: 0;
}

/* a long word on a narrow cell breaks by its syllables, with a hyphen (the page is lang="en"),
   and anywhere only when it has no place to break (item 151) */
.phrase {
  font-size: var(--fs-16);
  font-weight: 500;
  overflow-wrap: anywhere;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.flag {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  background: var(--hit);
  color: var(--muted);
  font-size: var(--fs-12);
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
}

.wrow.hit .flag {
  background: var(--panel);
}

.flag-unbond {
  background: var(--unbond);
  color: var(--on-unbond);
  font-weight: 700;
}

.flag-heard {
  background: var(--heard);
  color: var(--panel);
  font-weight: 700;
}

.flag-heard.progress {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--heard);
  color: var(--text);
}

/* your mark: a 20 px round chip at a fixed x inside a 32 px target */
.c-mark {
  display: inline-grid;
  place-items: center;
}

.mark {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--on-said);
  font-size: var(--fs-12);
  font-weight: 700;
}

.mark[hidden] {
  display: none;
}

.mark::before {
  content: "";
  grid-area: 1 / 1;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px dashed var(--outline);
}

.mark[data-mark] {
  font-size: 0;
}

.mark[data-mark]::before {
  border: 0;
  content: attr(data-mark);
  display: grid;
  place-items: center;
  font-size: var(--fs-12);
  line-height: 20px;
}

.mark[data-mark="Y"]::before {
  background: var(--said);
  color: var(--on-said);
}

.mark[data-mark="N"]::before {
  background: var(--no-fill);
  color: var(--no-ink);
  box-shadow: inset 0 0 0 1.5px var(--no-ink);
}

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

.mark:hover::before {
  border-color: var(--text);
}

/* a marked row: a 3 px bar just inside the panel edge */
.wrow[data-mark]::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 2px;
}

.wrow[data-mark="Y"]::before {
  background: var(--said);
}

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

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

/* price first: the yes bid big, the ask beside it, the bid-ask range under */
.c-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  text-align: right;
}

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

.bid {
  color: var(--text);
  font-size: var(--fs-20);
  font-weight: 700;
  line-height: 24px;
}

.range {
  position: relative;
  width: 64px;
  height: 4px;
  border-radius: 2px;
  background: var(--track);
}

.range i {
  position: absolute;
  top: -2px;
  bottom: -2px;
  min-width: 3px;
  border-radius: 2px;
  background: var(--text);
}

.was {
  display: none;
}

.result {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: var(--r-badge);
  font-size: var(--fs-14);
  font-weight: 700;
}

.result-yes {
  background: var(--said);
  color: var(--on-said);
}

.result-no {
  background: var(--no-fill);
  color: var(--no-ink);
}

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

/* k/n with a thin rate bar under it; the cells of "my transcripts" are the same (item 89) */
.c-all,
.c-fmt,
.c-pick,
.c-before,
.c-off,
.c-my,
.c-myfmt {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  text-align: right;
}

.c-all .lbl,
.c-fmt .lbl,
.c-pick .lbl,
.c-before .lbl,
.c-off .lbl,
.c-my .lbl,
.c-myfmt .lbl {
  display: none;
}

.kn {
  white-space: nowrap;
}

.k {
  font-size: var(--fs-16);
  font-weight: 700;
}

.k.none {
  color: var(--muted);
  font-weight: 400;
}

.pct {
  display: inline-block;
  min-width: 4ch;
  color: var(--muted);
  font-size: var(--fs-14);
  text-align: right;
}

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

.rate {
  position: relative;
  width: 100%;
  max-width: 120px;
  height: 3px;
  border-radius: 2px;
  background: var(--track);
  overflow: hidden;
}

.rate i {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--muted);
  border-radius: 2px;
}

/* Last 5: dots, each centred in a 24 x 24 link */
.c-last {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.c-last .none {
  color: var(--muted);
  padding-left: 8px;
}

.dot5 {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  text-decoration: none;
}

.dot5:hover {
  background: var(--hit);
}

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}

.dot.yes {
  background: var(--said);
}

.dot.no {
  background: var(--no-fill);
  box-shadow: inset 0 0 0 2px var(--no-ink);
}

/* another format than this page's: the same dot inside a gap ring */
.dot.other {
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--outline);
}

.dot.no.other {
  box-shadow: inset 0 0 0 2px var(--no-ink), 0 0 0 2px var(--panel), 0 0 0 3.5px var(--outline);
}

.wrow:hover .dot.other,
.wrow.open .dot.other {
  box-shadow: 0 0 0 2px var(--inset), 0 0 0 3.5px var(--outline);
}

.wrow:hover .dot.no.other,
.wrow.open .dot.no.other {
  box-shadow: inset 0 0 0 2px var(--no-ink), 0 0 0 2px var(--inset), 0 0 0 3.5px var(--outline);
}

/* the market on Kalshi: one icon column */
.c-mkt {
  display: inline-grid;
  place-items: center;
}

.mkt {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--muted);
}

.mkt:hover {
  color: var(--text);
  background: var(--hit);
}

/* -- hits: the said words on a grey row, struck, at a plain green 99¢ -- */

.wrow.hit {
  min-height: var(--row-hit);
  background: var(--hit);
  border-top-color: var(--line);
}

.wrow.hit .phrase {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  font-weight: 400;
}

.wrow.hit .bid {
  color: var(--said);
}

.wrow.hit .k {
  color: var(--muted);
  font-weight: 500;
}

.wrow.hit .rate,
.wrow.hit .range {
  display: none;
}

.wrow.hit .c-price,
.wrow.hit .c-all,
.wrow.hit .c-fmt,
.wrow.hit .c-pick,
.wrow.hit .c-off,
.wrow.hit .c-my,
.wrow.hit .c-myfmt {
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}

.wrow.hit .wtog {
  min-height: 32px;
}

.wrow.hit .mkt:hover,
.wrow.hit .dot5:hover {
  background: var(--panel);
}

.wrow.hit .dot.other {
  box-shadow: 0 0 0 2px var(--hit), 0 0 0 3.5px var(--outline);
}

.wrow.hit .dot.no.other {
  box-shadow: inset 0 0 0 2px var(--no-ink), 0 0 0 2px var(--hit), 0 0 0 3.5px var(--outline);
}

/* -- unbond: fell back from 99¢ -- */

.wrow.unbond .bid {
  color: var(--unbond);
}

/* a heard word in the live table (heard.js): struck like a said one, violet check */
.wrow.heard .phrase {
  text-decoration: line-through;
  text-decoration-color: var(--heard);
}

.wrow.new-word .c-last {
  visibility: visible;
}

/* -- the history of a word: a grey inset inside the panel -- */

.wrow .hist {
  grid-column: 1 / -1;
  margin: 4px 0 12px;
  padding: 12px var(--pad-cell-x);
  border: 0;
  border-radius: var(--r-inset);
  background: var(--panel);
  overflow-x: auto;
}

.wrow.hit .hist {
  background: var(--panel);
}

.wrow .hist[hidden] {
  display: none;
}

.hist table {
  font-size: var(--fs-14);
}

.hist th {
  font-size: var(--fs-12);
}

.hist th,
.hist td {
  border-bottom-color: var(--line);
}

.hist .result {
  min-height: 20px;
  padding: 0 8px;
  font-size: var(--fs-12);
}

.unbond-note {
  margin: 0 0 var(--gap-sib);
  color: var(--unbond);
  font-size: var(--fs-14);
  font-weight: 500;
}

.all-link {
  font-size: var(--fs-14);
}

/* the word page reuses the history table in its own panel */
.word-hist {
  border: 0;
  border-radius: var(--r-panel);
  background: var(--panel);
  padding: 12px var(--pad-cell-x);
}

/* ==== tablets and phones: the market row in 2 lines below 900 px, and from 1024 px by the
   width of the table (item 82) ==== */

.stats {
  display: contents;
}

/* 901-1023 px: a table without columns of mine is no "words" container, so no rule of the
   two-line blocks reaches it and its rows keep one line with the header (item 82); with columns
   of mine it stays one and goes in two lines, its old tracks too wide for the window (item 89);
   so does a table with the official column (item 108), and one with Before start or Chosen,
   whose old tracks were up to 107 px wider than the window there too (item 113, q11) */
@media (min-width: 901px) and (max-width: 1023px) {
  .words:not(.mine):not(.off):not(.before):not(.pick) {
    container-name: words-wide;
  }
}

/* both columns of mine: two lines while the table is narrower than 1304 px, the widest such
   table, 1016 + 2 x (132 + 12) (item 89). The queries measure the content box, which the padding
   makes 288 px narrower than the table, so their 1016 px are 1304 px of it; the rows take the
   288 px back with a negative margin and keep the width of the table (a selector strong enough
   to stand over the margins of the children of .words, such as .words > .legend).
   The official column (item 108) and Chosen: two lines while the table is narrower than 1160 px,
   1016 + 132 + 12; with both columns of mine too, narrower than 1448 px, 1160 + 2 x 144. The
   official column alone fits the 1016 px of item 82.
   Only from a window of 1024 px, where these queries count: below, a table narrower than the
   padding kept its rows 432 px wide on a phone, and the rows go in two lines anyway (item 136) */
@media (min-width: 1024px) {
  .words.mine-fmt {
    padding-right: 288px;
  }

  .words.mine.mine-fmt > * {
    margin-right: -288px;
  }

  .words.off.pick {
    padding-right: 144px;
  }

  .words.off.pick > * {
    margin-right: -144px;
  }

  .words.off.mine-fmt {
    padding-right: 432px;
  }

  .words.off.mine.mine-fmt > * {
    margin-right: -432px;
  }
}

/* the rows of two lines while the table is narrower than 1016 px (the sum of the minimums
   of its widest set of columns, item 82): below 900 px as before, and from 1024 px, next
   to the sidebar. From 901 to 1023 px the rows keep one line with the header: there the
   table is no "words" container (below), unless it has columns of mine (item 89); the
   table with both columns of mine goes in two lines below 1304 px (below) */
@container words (width < 1016px) {
  .whead {
    display: none;
  }

  /* line 1: check, chevron + word, mark, price at a fixed x, Kalshi icon;
     line 2: the k/n fields, then the 5 dots in 120 px at the right */
  .wrow {
    grid-template-columns: var(--chk) minmax(0, 1fr) 32px 76px 32px;
    column-gap: 8px;
    row-gap: 2px;
    padding: 8px 12px 10px;
  }

  .wrow > .c-chk { grid-row: 1; grid-column: 1; }
  .wrow > .wtog { grid-row: 1; grid-column: 2; }
  .wrow > .c-mark { grid-row: 1; grid-column: 3; }
  .wrow > .c-price { grid-row: 1; grid-column: 4; }
  .wrow > .c-mkt { grid-row: 1; grid-column: 5; }

  .wrow > .stats {
    grid-row: 2;
    grid-column: 1 / 4;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 12px;
    min-width: 0;
  }

  .wrow > .c-last {
    grid-row: 2;
    grid-column: 4 / 6;
    justify-self: end;
    justify-content: flex-end;
    width: 120px;
  }

  .wrow > .hist {
    grid-row: 3;
  }

  .stats .c-before,
  .stats .c-all,
  .stats .c-fmt,
  .stats .c-pick,
  .stats .c-off,
  .stats .c-my,
  .stats .c-myfmt {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 4px;
  }

  .stats .lbl {
    display: inline;
    color: var(--muted);
    font-size: var(--fs-12);
  }

  .rate {
    display: none;
  }

  .k {
    font-size: var(--fs-14);
  }

  .pct {
    min-width: 0;
    font-size: var(--fs-12);
  }

  .range {
    width: 56px;
  }

  .wrow.hit {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .wrow.hit .stats .c-all,
  .wrow.hit .stats .c-fmt,
  .wrow.hit .stats .c-pick,
  .wrow.hit .stats .c-off,
  .wrow.hit .stats .c-my,
  .wrow.hit .stats .c-myfmt {
    justify-content: flex-start;
  }

  .glabel {
    padding-left: 12px;
  }

  .wrow[data-mark]::before {
    left: 3px;
  }
}

/* ==== phone ==== */

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

  body {
    font-size: var(--fs-14);
  }

  .site-head .wrap {
    min-height: 56px;
  }

  main.wrap {
    padding-top: var(--pad-panel);
  }

  h1 {
    font-size: var(--fs-20);
  }

  .ev-top {
    gap: 12px;
    margin-bottom: var(--pad-panel);
  }

  .ev-top .ev-title {
    flex-basis: 100%;
  }

  .ev-top .sub {
    display: none;
  }

  .pills {
    margin-top: var(--gap-sib);
    gap: 6px;
  }

  .pill {
    min-height: 24px;
    padding: 0 10px;
    font-size: var(--fs-12);
  }

  .pills .countdown {
    font-size: var(--fs-12);
  }

  .ev-actions {
    width: 100%;
  }

  .ev-actions .btn {
    flex: 1 1 0;
  }

  /* Transcribe and Kalshi on the first line, the agent on the second, the whole width */
  .ev-actions .ask-link {
    flex-basis: 100%;
  }

  .sheet {
    margin: 0 -8px;
    padding-top: var(--pad-panel);
  }

  .tally {
    padding-bottom: 12px;
  }

  .tally-line {
    margin-top: 10px;
  }

  .cnt b {
    font-size: var(--fs-16);
  }

  .tally-counts {
    gap: 2px 12px;
    font-size: var(--fs-12);
  }

  .asof {
    font-size: var(--fs-12);
  }

  /* the toolbar: one sideways row of pills under a full-width search */
  .toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 12px;
  }

  .toolbar::-webkit-scrollbar {
    display: none;
  }

  .wsearch {
    flex: 0 0 180px;
    min-width: 180px;
  }

  .sorts,
  .pill-btn {
    flex: none;
  }

  .tab .full {
    display: none;
  }

  .tab .short {
    display: inline;
  }

  .tab {
    padding: 0 12px;
  }

  .info-btn {
    margin-left: 0;
  }

  .pick-sheet {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 72vh;
    border-radius: var(--r-panel) var(--r-panel) 0 0;
  }

  .pick-list label {
    grid-template-columns: 20px 84px minmax(0, 1fr);
  }

  .mk {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "when end"
      "body body"
      "meter meter";
    gap: 6px 12px;
    padding: 12px var(--pad-panel);
  }

  .mk-when {
    grid-area: when;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
  }

  .mk-body { grid-area: body; }
  .mk-meter { grid-area: meter; }
  .mk-meter:empty { display: none; }
  .mk-end { grid-area: end; }

  .mini-tally {
    width: 160px;
  }
}

/* ==== groups, "Hide said" and the header on phones ==== */

.cnt[hidden] {
  display: none;
}

/* "Hide said": collapses the said group to its label (per viewer, off by default) */
.glabel .hide-said {
  margin-left: auto;
  min-height: 28px;
  padding: 0 12px;
  border: 1.5px solid var(--outline);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text);
  font-size: var(--fs-12);
  font-weight: 500;
  cursor: pointer;
}

.glabel .hide-said:hover {
  border-color: var(--text);
}

.words.said-hidden .wrow[data-group="said"] {
  display: none;
}

@media (max-width: 640px) {
  .brand {
    gap: 8px;
  }

  .ev-actions .btn {
    min-height: 36px;
  }

  .cnt-total {
    display: none;
  }

  .wrow.hit {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .wrow.hit .wtog {
    min-height: 28px;
  }

  .glabel {
    padding-top: 8px;
    padding-bottom: 4px;
  }
}

/* ==== the check column, unbond, settled rows ==== */

.words.live {
  --chk: 20px;
}

.words:not(.live) .c-chk {
  visibility: hidden;
  width: 0;
}

.words:not(.live) .wtog {
  margin-left: -16px;
}

.words:not(.live) .glabel {
  padding-left: var(--pad-panel);
}

.wrow.hit .flag-heard {
  background: var(--heard);
  color: var(--panel);
}

.wrow.hit .flag-heard.progress {
  background: transparent;
  color: var(--text);
}

.was-note {
  flex-basis: 100%;
  color: var(--unbond);
  font-size: var(--fs-12);
  font-weight: 500;
}

.seg-no {
  background: color-mix(in srgb, var(--no-ink) 42%, var(--panel));
  box-shadow: none;
}

.cnt-no .key {
  background: color-mix(in srgb, var(--no-ink) 42%, var(--panel));
  box-shadow: none;
}

.hist .h-link a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.hist .h-link .ico {
  width: 14px;
  height: 14px;
}

.lbl .lbl-short {
  display: none;
}

/* the same rows of two lines (item 82) */
@container words (width < 1016px) {
  .words:not(.live) .wtog {
    margin-left: -12px;
  }

  .lbl .lbl-short {
    display: inline;
  }

  .lbl .lbl-full {
    display: none;
  }
}

.brand {
  min-height: 44px;
}

.tally-facts {
  font-size: var(--fs-14);
}

@media (max-width: 640px) {
  .tally-counts {
    font-size: var(--fs-14);
  }

  .tally-facts {
    font-size: var(--fs-12);
  }
}

/* "Auto-refresh paused …" at the right end of the facts line: no shift under the pointer */
.tally-facts .paused {
  margin-left: auto;
  color: var(--text);
  font-weight: 500;
}

#refresh-paused[hidden] {
  display: inline-block;
  visibility: hidden;
}

/* a past event of another format: its result outlined in its own colour (site.md, item 37) */
.hist tr.other .result-yes {
  color: var(--said);
}

.hist tr.other .result-no {
  color: var(--no-ink);
}

/* Transcribe: the source switch clips its children, so the ring goes inside */
#tx-app .tx-source button:focus-visible {
  outline-offset: -3px;
}

/* ==== heard rows, Last 5 dots, k/n, the phone toolbar ==== */

/* a heard word of the Open group moves under "Heard here": struck on hit grey like a said one,
   with a violet check (heard.js, site.md, items 47 and 71: the same rules as .wrow.hit) */
.glabel[hidden] {
  display: none;
}

.glabel-heard span {
  color: var(--heard);
}

.words.live .wrow.heard {
  min-height: var(--row-hit);
  background: var(--hit);
  border-top-color: var(--line);
}

.words.live .wrow.heard .phrase {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  font-weight: 400;
}

.words.live .wrow.heard .k {
  color: var(--muted);
  font-weight: 500;
}

.words.live .wrow.heard .rate,
.words.live .wrow.heard .range {
  display: none;
}

.words.live .wrow.heard .c-price,
.words.live .wrow.heard .c-all,
.words.live .wrow.heard .c-fmt,
.words.live .wrow.heard .c-pick,
.words.live .wrow.heard .c-off,
.words.live .wrow.heard .c-my,
.words.live .wrow.heard .c-myfmt {
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}

.words.live .wrow.heard .wtog {
  min-height: 32px;
}

.words.live .wrow.heard:not(.hit):not(.unbond) .c-chk {
  background: var(--heard);
  color: var(--panel);
}

.words.live .wrow.heard .dot.other {
  box-shadow: 0 0 0 1.5px var(--hit), 0 0 0 3.5px var(--muted);
}

.words.live .wrow.heard .dot.no.other {
  box-shadow: inset 0 0 0 2px var(--no-ink), 0 0 0 1.5px var(--hit), 0 0 0 3.5px var(--muted);
}

.words.live .wrow.heard .wtog .flag-heard {
  background: var(--heard);
  color: var(--panel);
}

/* Last 5: 12 px dots; another format is a 9 px dot inside a 2 px muted ring (>= 3:1 on the
   panel, the hit grey and the hover inset in both themes) */
.dot {
  width: 12px;
  height: 12px;
}

.dot.no {
  box-shadow: inset 0 0 0 2px var(--no-ink);
}

.dot.other {
  width: 9px;
  height: 9px;
  box-shadow: 0 0 0 1.5px var(--panel), 0 0 0 3.5px var(--muted);
}

.dot.no.other {
  box-shadow: inset 0 0 0 2px var(--no-ink), 0 0 0 1.5px var(--panel), 0 0 0 3.5px var(--muted);
}

.wrow:hover .dot.other,
.wrow.open .dot.other {
  box-shadow: 0 0 0 1.5px var(--inset), 0 0 0 3.5px var(--muted);
}

.wrow:hover .dot.no.other,
.wrow.open .dot.no.other {
  box-shadow: inset 0 0 0 2px var(--no-ink), 0 0 0 1.5px var(--inset), 0 0 0 3.5px var(--muted);
}

.wrow.hit .dot.other {
  box-shadow: 0 0 0 1.5px var(--hit), 0 0 0 3.5px var(--muted);
}

.wrow.hit .dot.no.other {
  box-shadow: inset 0 0 0 2px var(--no-ink), 0 0 0 1.5px var(--hit), 0 0 0 3.5px var(--muted);
}

/* the dot key, once, right under the column headers (site.md, items 37 and 66) */
.words > .legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 4px 16px;
  margin: 0;
  padding: 6px calc(var(--pad-panel) + 44px) 10px var(--pad-panel);
  border: 0;
  color: var(--text);
  font-size: var(--fs-14);
}

.legend .legend-h5 {
  color: var(--muted);
  font-weight: 500;
}

.legend .lk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.legend .dot.other {
  margin: 0 2px;
}

/* k/n: the % never touches the count; "small n" sits left of the count, so k/n keeps its x */
.pct {
  min-width: 5ch;
}

.c-all .kn,
.c-fmt .kn,
.c-pick .kn {
  position: relative;
}

.c-all .kn .flag,
.c-fmt .kn .flag,
.c-pick .kn .flag {
  position: absolute;
  right: 100%;
  top: 50%;
  margin: 0 8px 0 0;
  transform: translateY(-50%);
  white-space: nowrap;
}

/* the same rows of two lines (item 82) */
@container words (width < 1016px) {
  .c-all .kn .flag,
  .c-fmt .kn .flag,
  .c-pick .kn .flag {
    position: static;
    transform: none;
    margin-left: 4px;
  }

  .words > .legend {
    justify-content: flex-start;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
  }

  .pct {
    min-width: 0;
    margin-left: 2px;
  }
}

@media (max-width: 640px) {
  /* the toolbar on a phone: search, then Choose events + How to read, then the sort strip */
  .toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "search search"
      "pick info"
      "sorts sorts";
    gap: var(--gap-sib);
    overflow: visible;
  }

  .toolbar:not(:has(.pick)) {
    grid-template-areas:
      "search search"
      "info info"
      "sorts sorts";
  }

  .wsearch {
    grid-area: search;
    min-width: 0;
    width: 100%;
    height: 40px;
  }

  .toolbar > .pick {
    grid-area: pick;
    min-width: 0;
  }

  .toolbar > .pick > summary,
  .toolbar > .info-btn {
    width: 100%;
    justify-content: center;
  }

  .toolbar > .info-btn {
    grid-area: info;
  }

  .sorts {
    grid-area: sorts;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .sorts::-webkit-scrollbar {
    display: none;
  }

  .sorts .tab {
    flex: 1 0 auto;
    justify-content: center;
  }

  /* rows.js sets .more while tabs are hidden past the right edge */
  .sorts.more {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  }

}

/* the dot key hugs the column headers */
.words > .legend {
  padding-top: 0;
}

@media (max-width: 640px) {
  .words > .legend {
    padding-top: 10px;
    gap: 4px 12px;
  }

  .sorts {
    gap: 2px;
  }

  .sorts .tab {
    padding: 0 9px;
  }
}



/* ==== Also now on a phone: one line that opens the same links (site.md, item 63) ==== */

@media (max-width: 640px) {
  .also-now.also-wide {
    display: none;
  }

  .also-phone {
    display: block;
    margin: calc(-1 * var(--gap-sib)) 0 var(--pad-panel);
  }

  .also-phone > summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px var(--gap-sib);
    min-height: 40px;
    padding: 4px 12px 4px 14px;
    border-radius: var(--r-pill);
    background: var(--panel);
    color: var(--text);
    font-size: var(--fs-14);
    font-weight: 500;
    list-style: none;
    cursor: pointer;
  }

  .also-phone > summary::-webkit-details-marker {
    display: none;
  }

  .also-phone .also-label {
    color: var(--muted);
    font-size: var(--fs-12);
    line-height: inherit;
  }

  .also-sum {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
  }

  .also-sum .live-dot {
    width: 6px;
    height: 6px;
    box-shadow: none;
  }

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

  .also-phone > summary .chev {
    margin-left: auto;
    transform: rotate(90deg);
  }

  .also-phone[open] > summary .chev {
    transform: rotate(-90deg);
  }

  .also-phone > nav {
    padding-top: 6px;
  }

  .also-phone .also-list {
    flex-direction: column;
    gap: 4px;
  }

  .also-phone .also {
    flex-wrap: wrap;
    max-width: 100%;
    padding: 4px 12px;
    white-space: normal;
    row-gap: 0;
  }
}

/* ==== the time pills: a range wraps only between its two parts (item 63) ==== */

.pill-range {
  flex-wrap: wrap;
  column-gap: 0.3em;
  white-space: normal;
}

/* ==== column headers on one line, cut with an ellipsis; the full text in title (item 72c) ==== */

.whead > .c-price,
.whead > .c-before,
.whead > .c-all,
.whead > .c-pick {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: right;
}

/* the format wraps by its words, as "Official …" and "My …": "Speeches / ceremonies" was 3 px
   wider than its 132 px track, and the ellipsis hid the word of the format (item 125) */
.whead > .c-fmt {
  min-width: 0;
  text-align: right;
  overflow-wrap: break-word;
}

/* ==== the heard check: violet, drawn by heard.js inside .c-chk (item 71) ==== */

.c-chk [data-heard-chk] {
  width: 14px;
  height: 14px;
}

/* ==== "Choose events" on a phone: a bottom sheet of 72% of the height, a row of 44 px per
   candidate with its title on one line, the date never wraps (item 72h) ==== */

.pick-list .pick-date {
  white-space: nowrap;
}

/* the title gets the whole width of its line, so the part that tells rallies apart (the
   city, the topic) shows; the date and the format go muted on a 12 px line under it; the
   row stays 44 px */
@media (max-width: 640px) {
  .pick-sheet {
    height: 72vh;
  }

  .pick-form {
    gap: var(--gap-sib);
  }

  .pick-list label {
    grid-template-columns: 18px max-content minmax(0, 1fr);
    grid-template-rows: 20px 16px;
    align-items: center;
    gap: 0 var(--gap-sib);
    min-height: 44px;
    padding: 4px var(--pad-panel);
  }

  .pick-list input {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin: 0;
  }

  .pick-list .pick-title {
    grid-column: 2 / span 2;
    grid-row: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 20px;
  }

  .pick-list .pick-date {
    grid-column: 2;
    grid-row: 2;
    font-size: var(--fs-12);
    line-height: 16px;
  }

  .pick-list .pick-fmt {
    grid-column: 3;
    grid-row: 2;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 16px;
  }
}

/* ==== Transcribe: a disabled Start reads as disabled in both themes (items 72j, 151), its
   reason right under the buttons, a line of the box of the panel and the settings ==== */

#tx-app #tx-start:disabled {
  border-color: var(--outline);
  background: transparent;
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.5;
}

.tx-panel:has(+ #tx-hint:not(:empty)) {
  border-bottom-color: transparent;
  padding-bottom: 6px;
}

#tx-hint {
  margin: 0;
  padding: 0 12px 10px;
  border: 1px solid var(--border);
  border-top: 0;
  border-bottom: 0;
  background: var(--surface);
  text-align: right;
}

@media (max-width: 640px) {
  #tx-hint {
    text-align: left;
  }
}

/* ==== motion: only the chevron turns, never with reduced motion (item 62); and the one live
   dot of the sidebar pulses (item 81, at the end) ==== */

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

/* ==== home: the line under the lede (item 61) and the earnings calls at the bottom
   (items 57, 70, 73-75) in the Market grammar, after the design-hints pass of round Г:
   - the section is its own panel, one section gap (40) below the general list;
   - the group labels are set as the general list's day labels, "Live now" blue with its
     dot (items 73, 74);
   - on desktop a call is one 40 px row (the row-height token) on the general list's four
     tracks (time | title | meter | end): the time in the time track, the company in the
     title track, the fields (words) in the meter track, so they line up with the meters
     and "Ends in …" of the panel above, the status and the chevron in the end track;
     est. date in the time track, a line of its own under the time (item 75);
   - a live call has the pill "Live for …" of a live event, with the muted 12 px time under
     it (item 73); the date of a waiting call is the grey date pill of the general list's
     waiting rows, with the muted 12 px time under it, as there; a call of a day group has
     no pill before its start, so its ET time stays 14/500 ink and carries the time signal;
   - "Live" (only a live call with time TBD) is the same blue pill with a dot as
     "Live for …" above, never the NO red;
   - on phones a call is two lines: time (pill, time, est. date) and status, then the
     company with its fields ==== */

.home-head .note {
  margin: 4px 0 0;
  font-size: var(--fs-14);
}

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

.earnings-title {
  margin: 0;
  padding: 0 var(--pad-panel) var(--pad-cell-y);
  font-size: var(--fs-20);
  font-weight: 700;
  line-height: 1.3;
}

.earnings > .empty {
  margin: 0;
  padding: var(--pad-cell-y) var(--pad-panel);
  border-top: 1px solid var(--line);
}

.earnings .day {
  margin: 0;
}

.earnings .day + .day,
.earnings-title + .day,
.earnings > .empty + .day {
  border-top: 1px solid var(--line);
}

/* the day labels of the general list (item 74) */
.earnings .day-label {
  display: flex;
  align-items: center;
  gap: var(--gap-sib);
  margin: 0;
  padding: var(--pad-cell-y) var(--pad-panel) 4px;
  color: var(--text);
  font-size: var(--fs-16);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}

/* "Live now" blue, as in the general list (item 73): after the ink above */
.earnings .day-live .day-label {
  color: var(--live);
}

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

.call.mk {
  min-height: var(--row-hit);
  padding-block: var(--gap-sib);
}

.c-time {
  font-variant-numeric: tabular-nums;
}

/* the date of a waiting call: the date pill of the general list's waiting rows */
.c-time .day {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--hit);
  color: var(--text);
  font-size: var(--fs-12);
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
}

.c-time .mk-time {
  white-space: nowrap;
}

.call .mk-time .et {
  color: var(--text);
  font-size: var(--fs-14);
  font-weight: 500;
}

/* a waiting call and a live call: the muted 12 px time under a pill of the general list
   (items 72f, 73) */
.call .c-time .day + .mk-time .et,
.call .c-time .pill + .mk-time .et {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.c-co {
  font-weight: 500;
}

.call .mk-fields {
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0 var(--gap-sib);
}

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

/* est. date: in the time column after the time, a line of its own on desktop, in the time
   line on a phone (item 75) */
.c-est {
  padding-left: 2px;
  color: var(--muted);
  font-size: var(--fs-12);
  font-weight: 400;
  white-space: nowrap;
  text-decoration: underline dotted;
  text-decoration-color: var(--outline);
  text-underline-offset: 3px;
  cursor: help;
}

/* "Live": the blue pill with a dot of "Live for …" (item 68), at the status place */
.call .tag-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: color-mix(in srgb, var(--live) 12%, var(--panel));
  color: var(--live);
  font-weight: 700;
}

.call .tag-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

@media (min-width: 641px) {
  /* the general list's four tracks: the company in the title track, the fields in the
     meter track, the status and the chevron in the end track */
  .call .mk-body {
    display: contents;
  }

  .call .c-co {
    grid-column: 2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .call .mk-fields {
    grid-column: 3;
  }

  .call .mk-end {
    grid-column: 4;
  }
}

@media (max-width: 640px) {
  .call.mk {
    grid-template-areas:
      "when end"
      "body body";
    gap: 2px var(--gap-sib);
    min-height: 44px;
    padding-block: var(--gap-sib);
  }

  .call .mk-when {
    gap: 0 var(--gap-sib);
  }

  .call .mk-body {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--gap-sib);
  }

  .call .mk-fields {
    flex-wrap: wrap;
  }
}

/* the "no past calls" note of a company without past calls (item 58), and of any event
   without past events: inside the panel at the panel's inner x, at the text size */
.sheet > p.note:not(.pick-note) {
  margin: 0;
  padding: var(--gap-sib) var(--pad-panel) var(--pad-cell-y);
  font-size: var(--fs-14);
}

/* ==== the sidebar from 1024 px (site.md, items 78-83): a column of 248 px as tall as the
   window, with its own scroll, on the ground of the page: the brand, the pages and the groups
   "Live now" and "Today"; a rail of 60 px while collapsed (side.js). It takes the place of the
   header, which shows below 1024 px only. The content is at most 1664 px wide, next to the
   sidebar: a wider window keeps the rest free, for the second pane of the next step ==== */

.side {
  display: none;
}

/* the parts of the sidebar, the same in the menu of a phone (item 149) */
.side-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sib);
  min-height: 40px;
  padding-left: 8px;
}

.side .brand {
  min-height: 40px;
}

.side-toggle {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--r-badge);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.side-toggle:hover {
  background: var(--hit);
  color: var(--text);
}

.side-nav {
  display: grid;
  gap: 2px;
}

.side-nav a {
  display: flex;
  align-items: center;
  gap: var(--gap-sib);
  height: 32px;
  padding: 0 8px;
  border-radius: var(--r-badge);
  color: var(--muted);
  font-size: var(--fs-14);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

/* the current page */
.side-nav a:hover,
.side-nav a[aria-current="page"] {
  background: var(--hit);
  color: var(--text);
}

/* the label of a group: a line, not a heading (the home page has its own) */
.side-h {
  display: flex;
  align-items: center;
  gap: var(--gap-sib);
  margin: 0 0 4px;
  padding: 0 8px;
  color: var(--muted);
  font-size: var(--fs-12);
  font-weight: 500;
}

.side-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.side-item {
  display: grid;
  gap: 2px;
  padding: 6px 8px;
  border-radius: var(--r-badge);
  color: var(--text);
  text-decoration: none;
}

.side-item:hover,
.side-item[aria-current] {
  background: var(--hit);
}

/* the full name on as many lines as it takes: no ellipsis, never wider than the sidebar */
.side-name {
  font-size: var(--fs-14);
  font-weight: 500;
  line-height: 20px;
  overflow-wrap: anywhere;
}

.side-sub {
  color: var(--muted);
  font-size: var(--fs-12);
  font-weight: 400;
  line-height: 16px;
}

.side-item.is-live .side-when {
  color: var(--live);
  font-weight: 700;
}

/* the dot of the rail: only while collapsed and something is on air */
.side-live {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 40px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--r-badge);
  background: transparent;
  color: var(--live);
  font-size: var(--fs-12);
  font-weight: 700;
  cursor: pointer;
}

.side-live:hover {
  background: var(--hit);
}

/* Settings, last, at the bottom of the sidebar (item 147); a row as the pages above it. A long
   list of the day scrolls under it: it stays in view, on the ground of the sidebar, over its
   padding of 12 px */
.side-end {
  position: sticky;
  bottom: -12px;
  margin-top: auto;
  padding: 8px 0 12px;
  margin-bottom: -12px;
  border-top: 1px solid var(--line);
  background: var(--ground);
}

.side-link {
  display: flex;
  align-items: center;
  gap: var(--gap-sib);
  height: 32px;
  padding: 0 8px;
  border-radius: var(--r-badge);
  color: var(--muted);
  font-size: var(--fs-14);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.side-link:hover,
.side-link[aria-current="page"] {
  background: var(--hit);
  color: var(--text);
}

/* "Close menu": in the menu of a phone only, where the toggle of the rail is not */
.side-close {
  display: none;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--r-badge);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.side-close:hover {
  background: var(--hit);
  color: var(--text);
}

/* the menu of a phone (item 149): the sidebar itself from the left, as tall as the window, its
   labels shown, over the rest of the window dimmed; the page under it does not scroll. It shows
   at once, without motion */
@media (max-width: 1023px) {
  html.menu-open {
    overflow: hidden;
  }

  .menu-open .side {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: var(--side-w);
    height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px;
    background: var(--ground);
    box-shadow: var(--shadow);
  }

  .menu-open body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgb(0 0 0 / 0.45);
  }

  .menu-open .side-toggle {
    display: none;
  }

  .menu-open .side-close {
    display: inline-grid;
  }
}

@media (min-width: 1024px) {
  .shell {
    display: grid;
    grid-template-columns: var(--side-w) minmax(0, 1fr);
  }

  .side-collapsed .shell {
    grid-template-columns: var(--rail-w) minmax(0, 1fr);
  }

  .site-head {
    display: none;
  }

  main.wrap,
  .site-foot .wrap {
    max-width: var(--main-max);
    margin: 0;
  }

  /* the events of "Also now" are in the sidebar (item 83) */
  .also-now,
  .also-phone {
    display: none;
  }

  /* overflow-x: in the rail its 40 px items stand half a pixel into the padding on each side
     (60 px less the line and 2 x 10 px leave 39), and it would scroll sideways by 1 px */
  .side {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 12px;
    border-right: 1px solid var(--line);
    background: var(--ground);
  }

  /* the rail (item 80): the brand mark over the toggle, the icons of the pages and the dot,
     all centred; the names stay for screen readers, as .vh */
  .side-collapsed .side {
    align-items: center;
    padding: 12px 10px;
  }

  .side-collapsed .side-top {
    flex-direction: column;
    padding-left: 0;
  }

  .side-collapsed .side .brand-text,
  .side-collapsed .side-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .side-collapsed .side-nav a,
  .side-collapsed .side-link {
    justify-content: center;
    width: 40px;
    padding: 0;
  }

  .side-collapsed .side-group {
    display: none;
  }

  .side-collapsed .side-live {
    display: inline-flex;
  }

  /* the word table next to the sidebar (item 82): the word 26 % of the row but at least 300 px,
     down to 120 px when the number columns would go under their minimums (the price or the
     result 88, Before start 72, k/n 132); the number columns share the rest equally; the mark,
     Last 5 and the Kalshi icon keep their widths. .no-fmt keeps no format column (its rule
     above is stronger). Below 1016 px of table the rows go in two lines (@container above) */
  .words {
    --c-fmt: minmax(132px, 1fr);
    --cols: var(--chk) minmax(120px, max(300px, 26%)) 32px minmax(88px, 1fr) var(--c-before) minmax(132px, 1fr) var(--c-fmt) var(--c-pick) var(--c-off) var(--c-my) var(--c-myfmt) 128px 32px;
  }

  .words.before {
    --c-before: minmax(72px, 1fr);
  }

  .words.pick {
    --c-pick: minmax(132px, 1fr);
  }

  .words.off {
    --c-off: minmax(132px, 1fr);
  }
}

@media (min-width: 641px) {
  /* the rows of the home list from 641 px: the four tracks (the time 200 px, the title, the
     meter 200 px, the end 132 px, and 5 x 20 px of padding and gaps) want a list of 960 px, its
     width in a 1024 px window before the sidebar, where the title had 328 px. A narrower list (a
     window up to 1271 px with the sidebar, up to 1083 px with the rail, and every window of 641
     to 1023 px, where the four tracks left the title 0 to 200 px and were up to 3 px wider than
     the window, item 113, q11) keeps the time and the end tracks and gives the title the rest:
     the meter goes under the title and its fields, the word count of a call after the company,
     as on a phone, and the company wraps instead of being cut. On a phone no list is a query
     container: its rows are of their own (above) */
  .mk-list {
    container: mk / inline-size;
  }

  @container mk (width < 960px) {
    .mk {
      grid-template-columns: 200px minmax(0, 1fr) 132px;
      grid-template-areas: "when body end";
    }

    .mk:has(> .mk-meter:not(:empty)) {
      grid-template-areas:
        "when body end"
        "when meter end";
    }

    .mk > .mk-when { grid-area: when; }
    .mk > .mk-body { grid-area: body; }
    .mk > .mk-meter { grid-area: meter; }
    .mk > .mk-meter:empty { display: none; }
    .mk > .mk-end { grid-area: end; }

    /* a call: the company and its word count on one line while they fit */
    .call .mk-body {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 0 var(--gap-sib);
    }

    .call .c-co {
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
    }
  }
}

/* the pulse (item 81): "on air", only the visible dot of the sidebar, that of "Live now" or of
   the rail; the opacity alone, never under reduced motion. Every other live dot stays still */
@keyframes side-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }
}

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .side-h .live-dot,
  .side-live .live-dot {
    animation: side-pulse 2s ease-in-out infinite;
  }
}

/* ==== "My transcripts" (site.md, items 84-91; style guide, "My transcripts"): the header on
   phones, the page /transcripts with its list, search and sheet, the columns of mine on the
   event page. Violet (--heard) is the data of this browser ==== */

/* -- the page: the heading and the actions on one line (under it on a phone) -- */

main.lib-main {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: var(--gap-block);
}

.lib-main > *,
.lib-main #lib-app > * {
  flex: 1 1 100%;
  min-width: 0;
}

.lib-main #lib-app:not([hidden]) {
  display: contents;
}

/* whatever the script hides stays hidden, whatever its display */
.lib-main [hidden] {
  display: none !important;
}

.lib-main > .lib-head {
  flex: 1 1 0;
  margin: 0 0 var(--gap-block);
}

.lib-head h1 {
  margin-bottom: var(--gap-sib);
}

.lib-head .lede {
  margin: 0;
}

.lib-main #lib-app > .lib-actions {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--gap-sib);
  margin-bottom: var(--gap-block);
}

.lib-actions .btn:disabled,
.lib-find :disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

#lib-msg {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-14);
}

#lib-msg:not(:empty) {
  margin-bottom: 12px;
}

.lib-panel {
  padding: var(--pad-panel);
  border-radius: var(--r-panel);
  background: var(--panel);
}

/* "Have a YouTube link?" (item 240; style guide, "My transcripts", "Transcribe: записи"): over the
   list of /transcripts and under the header of the page of a recording. A box as the key of
   Transcribe, at most 70ch. From 641 px the heading and the button share the first row, the
   button at its right; the lead, the steps and the note go under them, as wide as the box. Up to
   640 px one column, the button under the heading (and the lead), as wide as its words */
.ngpt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--gap-sib) var(--gap-block);
  max-width: 70ch;
  margin: 0 0 var(--gap-block);
  padding: var(--pad-card);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-panel);
  background: var(--panel);
}

.ngpt h2 {
  grid-area: 1 / 1;
  margin: 0;
  font-size: var(--fs-16);
  font-weight: 700;
  line-height: 1.3;
}

.ngpt-go {
  grid-area: 1 / 2;
}

.ngpt-lead,
.ngpt-steps,
.ngpt-note {
  grid-column: 1 / -1;
  margin: 0;
}

.ngpt-lead {
  font-size: var(--fs-14);
}

/* the note at the measure of its own 12 px */
.ngpt-note {
  max-width: 70ch;
}

/* the steps, of the box and of the sheet: an instruction at the size and in the colour of text,
   not a fine print; no word alone on the last line of a step */
.ngpt-steps,
.lib-ngpt-steps {
  margin: 0;
  padding-left: 20px;
  color: var(--text);
  font-size: var(--fs-14);
  text-wrap: pretty;
}

.ngpt-steps > li + li,
.lib-ngpt-steps > li + li {
  margin-top: 4px;
}

/* the external link after the words of the button, 16 px as the icons of the buttons */
.ngpt-go .ico,
.lib-ngpt-go .ico {
  width: 16px;
  height: 16px;
}

@media (max-width: 640px) {
  .ngpt {
    grid-template-columns: minmax(0, 1fr);
  }

  .ngpt-go {
    grid-area: auto;
    justify-self: start;
  }

  /* below about 346 px the words of the button are wider than the box (and below 304 px than the
     sheet): they wrap inside the button, in two even lines, and it never sticks out */
  .ngpt-go,
  .lib-ngpt-go {
    white-space: normal;
    text-align: center;
    text-wrap: balance;
  }
}

.lib-main .lib-keep {
  margin: 12px 0 0;
}

/* -- the search and the filters -- */

.lib-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--pad-panel);
}

.lib-find {
  display: flex;
  flex: 1 1 320px;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 560px;
  height: 40px;
  padding: 0 4px 0 14px;
  border-radius: var(--r-pill);
  background: var(--inset);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.lib-find:focus-within {
  box-shadow: inset 0 0 0 1.5px var(--focus);
}

.lib-find .ico {
  color: var(--muted);
}

.lib-find input {
  flex: 1 1 auto;
  min-width: 0;
  height: 36px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: var(--fs-16);
}

.lib-find input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.lib-find input:focus-visible {
  outline: none;
}

.lib-find button {
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--panel);
  color: var(--text);
  font-size: var(--fs-14);
  font-weight: 700;
  cursor: pointer;
}

.lib-find button:hover:not(:disabled) {
  background: var(--hit);
}

/* up to 400 px the hint "Find a word or phrase" fits its field (item 99p4): 14 px, 145 px of text
   in the 155 px a narrower Find leaves at 320 px; what is typed stays 16 px, so a phone does not
   zoom in on the field */
@media (max-width: 400px) {
  .lib-find input::placeholder {
    font-size: var(--fs-14);
  }

  .lib-find button {
    padding: 0 10px;
  }
}

/* the filters: pills in a strip, the pressed one as the active sort tab */
.lib-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border-radius: 20px;
  background: var(--inset);
}

.lib-filter button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-14);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.lib-filter button:hover {
  background: var(--hit);
  color: var(--text);
}

.lib-filter button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 700;
}

.lib-filter .num {
  font-size: var(--fs-12);
}

/* -- the list: a grid with column headers while it is at least 860 px wide, cards below -- */

#lib-list {
  container: lib / inline-size;
}

/* the date track takes its date on one line (item 99p5) */
.lib-hd,
.lib-item {
  display: grid;
  grid-template-columns:
    minmax(140px, 1fr) minmax(110px, 0.6fr) minmax(100px, 0.5fr) minmax(120px, max-content) 72px
    minmax(96px, 0.5fr) 64px 32px;
  column-gap: 12px;
  align-items: center;
  padding: 0 12px;
}

.lib-hd {
  min-height: 36px;
  color: var(--muted);
  font-size: var(--fs-12);
  font-weight: 500;
}

.lib-hd span:nth-child(5) {
  text-align: right;
}

.lib-item {
  min-height: 56px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-top: 1px solid var(--line);
}

.lib-item .lib-title {
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* "Wed, Jan 29, 2025" on one line at any width: the title wraps instead (item 99p5) */
.lib-item .lib-date {
  white-space: nowrap;
}

.lib-item .lib-speaker,
.lib-item .lib-words,
.lib-item .lib-source {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lib-item .lib-words {
  align-items: flex-end;
  text-align: right;
}

.lib-only,
.lib-of,
.lib-source {
  color: var(--muted);
  font-size: var(--fs-12);
}

.lib-host {
  overflow-wrap: anywhere;
}

.lib-unit {
  display: none;
}

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

/* the table names the switch in the header of its column: the name stays for no one, as it is
   aria-hidden, and takes no room */
.lib-sw-l {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* the switch "In hit rate": a track of 36 x 20 in a target of 40 x 24, the knob 14 px. Off, the
   track has the ring of an open segment (1.5 px --outline, inset, so it lies on the track's edge)
   and a --muted knob: the ring is 3.19 / 3.83:1 on --panel and the knob 4.86 / 5.54:1 on the
   track (light / dark), where --track alone was 1.35 / 1.43:1 and an --outline knob 2.36 / 2.69:1 */
.lib-on {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: none;
  width: 40px;
  height: 24px;
  margin: 0;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  background: var(--track) padding-box;
  box-shadow: inset 0 0 0 1.5px var(--outline);
  cursor: pointer;
}

.lib-on::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--muted);
}

.lib-on:checked {
  background-color: var(--heard);
  box-shadow: none;
}

.lib-on:checked::before {
  left: 19px;
  background: var(--panel);
}

.lib-on:disabled {
  cursor: progress;
}

.lib-act {
  position: relative;
  display: flex;
  justify-content: flex-end;
}

.lib-more {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--r-badge);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.lib-more:hover,
.lib-more[aria-expanded="true"] {
  background: var(--hit);
  color: var(--text);
}

/* the menu: a small popover with an edge, no shadow */
.lib-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 5;
  display: grid;
  min-width: 160px;
  padding: 4px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-badge);
  background: var(--panel);
}

.lib-menu button {
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-size: var(--fs-14);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.lib-menu button:hover,
.lib-menu button:focus-visible {
  background: var(--hit);
}

/* the deletion asks in the row */
.lib-confirm {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  align-items: center;
  gap: var(--gap-sib) 12px;
  margin: var(--gap-sib) 0 0;
  font-size: var(--fs-14);
}

.lib-confirm button {
  min-height: 32px;
  padding: 0 14px;
  border: 1.5px solid var(--outline);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text);
  font-size: var(--fs-14);
  font-weight: 700;
  cursor: pointer;
}

.lib-confirm .lib-del-yes {
  border-color: var(--no-ink);
  color: var(--no-ink);
}

.lib-none {
  margin: 12px;
}

@container lib (width < 860px) {
  .lib-hd {
    display: none;
  }

  /* a card: the title with the switch and the menu at its right, the fields wrapping under */
  .lib-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px var(--gap-sib);
    padding: 12px 4px;
  }

  .lib-item > .lib-title {
    flex: 1 1 0;
    min-width: 0;
  }

  /* the switch with its name on a line of its own under the fields, so the title keeps the
     width of the card (item 151) */
  .lib-item > .lib-sw {
    flex-basis: 100%;
    order: 5;
    margin-top: 4px;
  }

  .lib-sw-l {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    color: var(--muted);
    font-size: var(--fs-12);
  }

  .lib-item > .lib-act {
    order: 2;
  }

  .lib-item::after {
    content: "";
    flex-basis: 100%;
    order: 3;
  }

  .lib-item > .lib-speaker,
  .lib-item > .lib-format,
  .lib-item > .lib-date,
  .lib-item > .lib-words,
  .lib-item > .lib-source {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 4px;
    order: 4;
    color: var(--muted);
    font-size: var(--fs-12);
  }

  .lib-item > .lib-confirm {
    flex-basis: 100%;
    order: 6;
  }

  .lib-item .lib-unit {
    display: inline;
  }
}

/* -- the empty library -- */

.lib-empty {
  padding: var(--gap-block) 12px;
  text-align: center;
}

.lib-empty-h {
  margin: 0 0 4px;
  font-size: var(--fs-16);
  font-weight: 700;
}

.lib-empty .note {
  max-width: 60ch;
  margin: 0 auto;
  font-size: var(--fs-14);
}

/* -- the results of the search -- */

.lib-sum {
  margin: 0 0 var(--gap-sib);
  padding: 12px 16px;
  border-radius: var(--r-inset);
  background: var(--inset);
  font-size: var(--fs-14);
}

/* a query of no spaces, a pasted address, breaks anywhere: the page stays as wide as the window
   (item 135) */
.lib-sum-q {
  font-size: var(--fs-16);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.lib-sum b {
  color: var(--heard);
  font-weight: 700;
}

.lib-forms {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: var(--fs-12);
  overflow-wrap: anywhere;
}

.lib-hit {
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.lib-hit-top {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.lib-hit-t {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: var(--fs-14);
  font-weight: 500;
  overflow-wrap: anywhere;
}

.lib-hit-n {
  flex: none;
  color: var(--heard);
  font-weight: 700;
}

.lib-hit-m {
  display: flex;
  flex-wrap: wrap;
  gap: 0 12px;
  margin: 2px 0 var(--gap-sib);
  color: var(--muted);
  font-size: var(--fs-12);
}

.lib-snips {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 24px;
  color: var(--muted);
  font-size: var(--fs-14);
  overflow-wrap: anywhere;
}

.lib-snips mark,
.my-s mark {
  padding: 0 2px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--heard) 28%, transparent);
  color: var(--text);
}

.lib-all {
  min-height: 24px;
  margin: 4px 0 0 24px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font-size: var(--fs-12);
  text-decoration: underline;
  text-decoration-color: var(--outline);
  text-underline-offset: 0.18em;
  cursor: pointer;
}

.lib-all:hover {
  text-decoration-color: currentColor;
}

/* -- the sheet: at the right, as tall as the window, scrolled inside; the whole screen on a
   phone. No animation -- */

.lib-sheet {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(560px, 100%);
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-panel) 0 0 var(--r-panel);
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--shadow);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.lib-sheet::backdrop {
  background: rgb(0 0 0 / 0.45);
}

/* the head with its close button and the row of the save buttons stay in view while a long
   paste scrolls under them, at any width (items 99p4, 151); a field the focus goes to, the one
   of a failed save too, scrolls between them (item 135) */
.lib-sheet {
  scroll-padding-top: 72px;
  scroll-padding-bottom: 130px;
}

.lib-sheet-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 8px 24px;
  background: var(--panel);
}

.lib-sheet-head h2 {
  margin: 0;
  font-size: var(--fs-20);
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.lib-sheet-body {
  padding: 8px 24px 0;
}

/* the message of the sheet, why a save failed too: the first line of the footer, over the
   buttons (item 135) */
#lib-sheet-msg {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-14);
}

#lib-sheet-msg:not(:empty) {
  margin-bottom: 12px;
}

.lib-sheet-foot {
  position: sticky;
  bottom: 0;
  z-index: 1;
  padding: 20px 24px 24px;
  background: var(--panel);
  box-shadow: 0 -1px 0 var(--line);
}

.lib-sheet-btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sib);
}

.lib-sheet.read .lib-sheet-foot {
  padding-top: 8px;
}

.lib-add {
  display: grid;
  gap: 16px;
}

.lib-src {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sib);
}

.lib-src-b {
  min-height: 40px;
  padding: 0 16px;
  border: 1.5px solid var(--outline);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text);
  font-size: var(--fs-14);
  font-weight: 500;
  cursor: pointer;
}

.lib-src-b:hover {
  border-color: var(--text);
}

/* the way from a YouTube link (items 223, 240; style guide, "My transcripts"): a part of the
   sheet under the buttons of the source, no frame and no ground (the sheet is a panel already);
   the parts of the box of the pages in a column at the left: the heading, the button, the steps
   (with those of the box, above), a note */
.lib-ngpt {
  display: grid;
  justify-items: start;
  gap: var(--gap-sib);
}

.lib-ngpt-h {
  margin: 0;
  font-size: var(--fs-14);
  font-weight: 700;
}

.lib-ngpt .note {
  margin: 0;
}

.lib-cards {
  display: grid;
  gap: var(--gap-block);
}

.lib-card {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.lib-card + .lib-card {
  padding-top: var(--gap-block);
  border-top: 1px solid var(--line);
}

.lib-text {
  width: 100%;
  height: 190px;
  padding: 12px;
  border: 1.5px solid var(--outline);
  border-radius: var(--r-inset);
  background: var(--inset);
  color: var(--text);
  font: var(--fs-14) / 1.45 var(--font);
  resize: vertical;
}

.lib-file {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0;
  padding: 12px 16px;
  border-radius: var(--r-inset);
  background: var(--inset);
  font-weight: 500;
  overflow-wrap: anywhere;
}

.lib-file-words,
.lib-card-words {
  color: var(--muted);
  font-size: var(--fs-14);
  font-weight: 400;
}

.lib-card-words {
  margin: 0;
}

.lib-card .lib-speakers:not(:empty) {
  display: grid;
  gap: var(--gap-sib);
  padding: 12px 16px;
  border-radius: var(--r-inset);
  background: var(--inset);
}

.lib-sp-h {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-12);
  font-weight: 500;
}

.lib-sp {
  display: flex;
  align-items: center;
  gap: var(--gap-sib);
  min-height: 28px;
  cursor: pointer;
}

.lib-sp input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--heard);
}

.lib-sp-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.lib-sp-p,
.lib-sp-w {
  flex: none;
  color: var(--muted);
  font-size: var(--fs-12);
}

.lib-card .lib-speakers .note {
  margin: 0;
}

/* the part kept (item 225): Keep from the words and To the words in two columns, as Speaker and
   Format; the line under them as wide as both, "Not found…" as the error of a card */
.lib-fields,
.lib-range {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.lib-range-line {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-12);
  overflow-wrap: anywhere;
}

.lib-range-line.bad {
  color: var(--no-ink);
  font-weight: 500;
}

.lib-field {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
  font-size: var(--fs-12);
  font-weight: 500;
}

.lib-field-wide {
  grid-column: 1 / -1;
}

.lib-field input,
.lib-field select {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 1.5px solid var(--outline);
  border-radius: var(--r-badge);
  background: var(--panel);
  color: var(--text);
  font-size: var(--fs-14);
  font-weight: 400;
}

.lib-field input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.lib-card-err {
  margin: 0;
  color: var(--no-ink);
  font-size: var(--fs-12);
  font-weight: 500;
}

.lib-dup {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-sib);
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--r-badge);
  background: var(--warn-fill);
  color: var(--warn-ink);
  font-size: var(--fs-14);
  font-weight: 500;
}

.lib-dup .ico {
  margin-top: 2px;
}

/* its text breaks anywhere: a long title without spaces (the address of a video) stays inside
   the sheet on a phone (item 236) */
.lib-dup > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.lib-card-x {
  justify-self: start;
  min-height: 32px;
  padding: 0 14px;
  border: 1.5px solid var(--outline);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text);
  font-size: var(--fs-12);
  font-weight: 500;
  cursor: pointer;
}

.lib-card-x:hover {
  border-color: var(--text);
}

/* reading a transcript: the paragraphs of the speakers not kept greyed */
.lib-sheet.read .lib-sheet-body {
  display: grid;
  gap: var(--gap-sib);
}

.lib-read-meta,
.lib-read-src {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 12px;
  margin: 0;
  font-size: var(--fs-14);
}

.lib-read-meta,
.lib-read-src .lib-via {
  color: var(--muted);
}

.lib-read-src a,
.lib-read-link {
  overflow-wrap: anywhere;
}

.lib-sheet .lib-sheet-body > .note {
  margin: 0;
}

.lib-read {
  display: grid;
  gap: var(--gap-sib);
  padding-top: var(--gap-sib);
  font-size: var(--fs-14);
}

.lib-para {
  margin: 0;
  overflow-wrap: anywhere;
}

.lib-para.off {
  color: var(--muted);
}

.lib-label {
  font-weight: 700;
}

@media (max-width: 640px) {
  .lib-main > .lib-head,
  .lib-main #lib-app > .lib-actions {
    flex: 1 1 100%;
    justify-content: flex-start;
  }

  .lib-sheet {
    width: 100%;
    border-radius: 0;
  }

  .lib-sheet-head {
    padding-left: 16px;
  }

  .lib-sheet-body {
    padding-left: 16px;
    padding-right: 16px;
  }

  .lib-sheet-foot {
    padding: 16px;
  }
}

@media (max-width: 400px) {
  .lib-fields,
  .lib-range {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* -- the columns of mine on the event page (item 89): headers, k and the bar in violet; the
   rest as the k/n cells; the headers wrap -- */

.whead .c-my,
.whead .c-myfmt {
  min-width: 0;
  color: var(--heard);
  text-align: right;
  overflow-wrap: anywhere;
}

.c-my b.k,
.c-myfmt b.k {
  color: var(--heard);
}

.c-my .rate i,
.c-myfmt .rate i {
  background: var(--heard);
}

/* "In my transcripts": first in the open row, over the history of Kalshi; no frame */
.my-hist {
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.my-h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  margin: 0 0 var(--gap-sib);
  font-size: var(--fs-14);
}

.my-h b {
  color: var(--heard);
  font-weight: 700;
}

.my-need {
  color: var(--muted);
}

.my-none {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-14);
}

.my-list {
  display: grid;
  gap: var(--gap-sib);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: var(--fs-12);
}

/* a transcript: its title and fields on a line that wraps, each snippet on a line of its own */
.my-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 12px;
}

.my-t {
  color: var(--text);
  font-size: var(--fs-14);
  font-weight: 500;
}

.my-c {
  color: var(--heard);
  font-weight: 700;
}

.my-s {
  display: block;
  flex-basis: 100%;
  min-width: 0;
  margin-top: 2px;
  font-size: var(--fs-14);
  overflow-wrap: anywhere;
}

.my-s::before,
.my-s::after {
  content: none;
}

/* 24 px between the header of the last column of mine and "Last 5" (item 99p3): 12 px over the
   gap of the grid in the header, whose cell spans the empty track of the icons, so "My rallies
   · 1" never reads as one label with it; 8 px in the rows, all the 5 dots leave in their 128 px
   track. Rows of two lines put the dots at the right, as before */
.words.mine .whead .c-last,
.words.off .whead .c-last {
  padding-left: 12px;
}

.words.mine .wrow > .c-last,
.words.off .wrow > .c-last {
  padding-left: 8px;
}

@container words (width < 1016px) {
  .words.mine .wrow > .c-last,
  .words.off .wrow > .c-last {
    padding-left: 0;
  }
}

/* ==== Rules and cases (site.md, items 92-98; style guide, "Rules and cases"): the section
   "Rules" of an event page, /rules and /cases. No new colours: the status and the stress are
   ink, outlines and --inset. On the ground the outline of a control is mixed toward the text,
   so it keeps 3:1 there in both themes (--outline alone is 2.9:1 on the light ground) ==== */

.rules,
.rules-page,
.cases-page {
  --line-ground: color-mix(in srgb, var(--outline) 85%, var(--text));
}

/* an external link in running text: the icon after its last word (the ext_link macro keeps
   them on one line) */
.ext-end {
  white-space: nowrap;
}

.ext-end .ico {
  width: 12px;
  height: 12px;
  margin-left: 3px;
  vertical-align: -1px;
}

/* -- the section "Rules" of an event page: on the ground, no panel of its own, after the one
   panel of the page -- */

.rules {
  max-width: 70ch;
  margin-top: var(--gap-section);
  overflow-wrap: break-word;
}

.rules-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
}

.rules-head h2 {
  margin: 0;
  font-size: var(--fs-20);
  font-weight: 700;
  line-height: 1.3;
}

.rules-links {
  margin: 0;
  font-size: var(--fs-14);
}

.rules-links.note {
  font-size: var(--fs-14);
}

.rules-src {
  color: var(--muted);
}

.rules-src a {
  color: var(--text);
}

.rules > :not(.rules-head) {
  margin: 16px 0 0;
}

/* what is special: first after the head, an --inset block with a straight ink stripe at its
   left edge; the section itself is on the ground, so no card sits in a card */
.rules-special {
  padding: 16px;
  border-left: 3px solid var(--ink);
  border-radius: 0 var(--r-inset) var(--r-inset) 0;
  background: var(--inset);
}

.rules-special-h {
  margin: 0 0 var(--gap-sib);
  font-size: var(--fs-14);
}

.rules-special ul {
  display: grid;
  gap: var(--gap-sib);
  margin: 0 0 12px;
  padding-left: 20px;
  font-size: var(--fs-14);
}

.rules-special .note {
  margin: 0;
}

.rules-std.note {
  font-size: var(--fs-14);
}

/* "Full rules": a pill as "How to read", with a chevron; Kalshi's text under it */
.rules-full > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 12px 0 16px;
  border: 1.5px solid var(--line-ground);
  border-radius: var(--r-pill);
  font-size: var(--fs-14);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}

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

.rules-full > summary:hover {
  border-color: var(--text);
}

.rules-full[open] > summary .chev {
  transform: rotate(90deg);
}

.rules-text {
  margin-top: 12px;
  font-size: var(--fs-14);
  line-height: 1.45;
}

.rules-text p {
  margin: 0 0 12px;
}

.rules-full > .note,
.rules-primary {
  margin: 12px 0 0;
}

.rules-primary {
  font-size: var(--fs-14);
}

.rules-primary .lbl {
  margin-right: 4px;
  color: var(--muted);
  font-size: var(--fs-12);
  font-weight: 500;
}

.rules-others.note {
  margin: 8px 0 0;
}

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

/* the cases: links in a list, "This event" a flag, the date small and tabular */
.rules-cases-h {
  margin: 0 0 var(--gap-sib);
  font-size: var(--fs-14);
}

.rules-cases-list {
  display: grid;
  gap: 6px;
  margin: 0 0 var(--gap-sib);
  padding: 0;
  list-style: none;
  font-size: var(--fs-14);
  font-weight: 500;
}

.rules-cases-list .flag,
.rules-cases-list .case-date {
  margin-left: 4px;
}

.case-date {
  color: var(--muted);
  font-size: var(--fs-12);
  font-weight: 400;
  white-space: nowrap;
}

.rules-all {
  margin: 0;
  font-size: var(--fs-14);
}

.rules-all.note {
  font-size: var(--fs-14);
}

/* -- /rules: an article as /how, the text at most 70ch -- */

.rules-page {
  max-width: 70ch;
}

.rules-page h2 {
  margin: var(--gap-block) 0 var(--gap-sib);
  font-size: var(--fs-20);
  font-weight: 700;
}

.rules-page section {
  scroll-margin-top: 16px;
}

.toc ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--gap-sib);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-14);
}

.rule-quote {
  color: var(--muted);
  font-size: var(--fs-14);
}

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

/* the links of a list stand 24 px apart at least, as targets (WCAG 2.5.8) */
.rules-page .rule-cases {
  font-size: var(--fs-14);
}

.rules-page .rule-cases li + li {
  margin-top: 8px;
}

/* the table of the terms of our series: the whole width of the article; on a phone a block a
   row, its first cell the head of the block */
table.terms {
  width: 100%;
  margin: 12px 0 0;
  border-collapse: collapse;
  font-size: var(--fs-14);
}

.terms th {
  padding: 0 12px 8px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-12);
  font-weight: 500;
  text-align: left;
}

.terms td {
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.terms th:last-child,
.terms td:last-child {
  padding-right: 0;
}

.terms-tickers {
  display: block;
  color: var(--muted);
  font-size: var(--fs-12);
}

.terms code {
  font-size: var(--fs-12);
  overflow-wrap: break-word;
}

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

.terms-src a {
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  table.terms thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  table.terms,
  .terms tbody,
  .terms tr,
  .terms td {
    display: block;
  }

  .terms tr {
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }

  .terms td {
    padding: 2px 0;
    border: 0;
  }

  .terms-tickers {
    display: inline;
  }
}

/* -- /cases: the legend, the chips of the filters, the cases -- */

.case-legend {
  display: grid;
  gap: 6px;
  margin: 0 0 var(--gap-block);
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: var(--fs-14);
}

.case-legend .badge-confirmed,
.case-legend .badge-outcome-only,
.case-legend .badge-rule-text {
  margin-right: 4px;
}

/* the badges of a status: told apart by their fill, not by a hue alone */
.badge-confirmed,
.badge-outcome-only,
.badge-rule-text {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  font-size: var(--fs-12);
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
}

.badge-confirmed {
  background: var(--ink);
  color: var(--on-ink);
}

.badge-outcome-only {
  box-shadow: inset 0 0 0 1.5px var(--line-ground);
  color: var(--text);
}

.badge-rule-text {
  background: var(--hit);
  color: var(--text);
}

/* the chips of the filters: pills of 32 px with an outline, the current one in ink as a pressed
   filter of /transcripts; a group a line that wraps */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sib);
  margin: 0 0 12px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1.5px var(--line-ground);
  color: var(--text);
  font-size: var(--fs-14);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.chip:hover {
  box-shadow: inset 0 0 0 1.5px var(--text);
}

.chip.on {
  background: var(--ink);
  box-shadow: none;
  color: var(--on-ink);
  font-weight: 700;
}

.chip .num {
  font-size: var(--fs-12);
  font-weight: 500;
}

.cases-page .count {
  margin: 4px 0 0;
}

.cases-page .count + .empty {
  margin-top: 16px;
}

/* a case: a block between lines, its text at most 70ch */
.case {
  max-width: 70ch;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  overflow-wrap: break-word;
  scroll-margin-top: 16px;
}

.cases-page .count + .case {
  margin-top: 8px;
  border-top: 1px solid var(--line);
}

.case > * {
  margin: 0 0 var(--gap-sib);
}

.case > :last-child {
  margin-bottom: 0;
}

.case-title {
  font-size: var(--fs-16);
  font-weight: 700;
  line-height: 1.3;
}

.case-title a {
  text-decoration: none;
}

.case-title a:hover {
  text-decoration: underline;
}

.case-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px var(--gap-sib);
  color: var(--muted);
  font-size: var(--fs-12);
}

.case-events,
.case-words {
  font-size: var(--fs-14);
}

.case-events .lbl,
.case-words .lbl {
  margin-right: 4px;
  color: var(--muted);
  font-size: var(--fs-12);
  font-weight: 500;
}

.case-events a {
  overflow-wrap: anywhere;
}

.case-results {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 0;
  list-style: none;
  font-size: var(--fs-14);
}

.case-results li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.case-results .result {
  min-height: 20px;
  padding: 0 8px;
  font-size: var(--fs-12);
}

.case-what,
.case-take,
.case-rule {
  font-size: var(--fs-14);
}

.case-take b,
.case-rule b {
  margin-right: 4px;
}

.case-evidence {
  display: grid;
  gap: 4px;
  padding-left: 20px;
  font-size: var(--fs-14);
}

.case-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.case-topics .chip {
  min-height: 24px;
  padding: 0 10px;
  font-size: var(--fs-12);
}

/* ==== Official transcripts (site.md, items 108-110; style guide, "Official transcripts"): the
   column of an event page, the block of an open row, the line under the title and /official. The
   data of our server in ink; violet stays for the data of the browser. No new colours ==== */

/* the column: its header in ink and wrapping, as the columns of mine; k and the bar in ink */
.whead .c-off {
  min-width: 0;
  color: var(--ink);
  text-align: right;
  overflow-wrap: anywhere;
}

.c-off b.k {
  color: var(--ink);
}

.c-off .rate i {
  background: var(--ink);
}

/* "In official transcripts": in the open row, over the history of Kalshi; no frame */
.off-hist {
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.off-hist > * {
  margin: 0 0 var(--gap-sib);
}

.off-hist > :last-child {
  margin-bottom: 0;
}

/* the parts of the line apart, with " · " between them as text: each part and each dot an item
   that never breaks, spaced like the words of a sentence (item 125) */
.off-h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
  font-size: var(--fs-14);
}

.off-h b {
  color: var(--ink);
  font-weight: 700;
}

.off-own,
.off-none {
  font-size: var(--fs-14);
}

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

/* a transcript: its day, then its title over its format and times, its quote under them */
.off-list {
  display: grid;
  gap: 12px;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: var(--fs-12);
}

.off-list li {
  display: grid;
  grid-template-columns: 96px auto auto minmax(0, 1fr);
  align-items: baseline;
  gap: 2px 12px;
  min-width: 0;
}

.off-list .off-d { grid-area: 1 / 1; }
.off-list li > a { grid-area: 1 / 2 / 2 / 5; }
.off-list .off-f { grid-area: 2 / 2; }
.off-list .off-c { grid-area: 2 / 3; }
.off-list .off-q { grid-area: 3 / 2 / 4 / 5; }

@media (max-width: 640px) {
  .off-list li {
    grid-template-columns: auto auto minmax(0, 1fr);
  }

  .off-list .off-d { grid-area: 1 / 1 / 2 / 4; }
  .off-list li > a { grid-area: 2 / 1 / 3 / 4; }
  .off-list .off-f { grid-area: 3 / 1; }
  .off-list .off-c { grid-area: 3 / 2; }
  .off-list .off-q { grid-area: 4 / 1 / 5 / 4; }
}

.off-list a,
.off-docs a,
.off-t a,
.ev-off a {
  color: var(--text);
  font-weight: 500;
  overflow-wrap: anywhere;
}

.off-list a,
.off-docs a,
.ev-off a {
  font-size: var(--fs-14);
}

.off-q {
  min-width: 0;
  color: var(--muted);
  font-size: var(--fs-14);
  overflow-wrap: anywhere;
}

.off-q mark,
.off-qs mark {
  border-radius: 3px;
  background: color-mix(in srgb, var(--ink) 16%, transparent);
  color: var(--text);
}

/* DCPD may spell a word otherwise: in the block of a row over its foot, under the line of the
   spellings of the table (item 129), and under "Counted forms" on /official; as quiet as them.
   The link "our list" is a link of the text */
.off-spell {
  max-width: 60ch;
  margin: 0 0 var(--gap-sib);
  color: var(--muted);
  font-size: var(--fs-12);
}

.off-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
}

.off-new {
  color: var(--muted);
  font-size: var(--fs-12);
}

.off-foot a {
  font-size: var(--fs-14);
}

/* the official transcripts of the event, under its pills */
.ev-off {
  margin: 8px 0 0;
  font-size: var(--fs-14);
}

.ev-off .lbl {
  margin-right: 4px;
  color: var(--muted);
  font-size: var(--fs-12);
  font-weight: 500;
}

.ev-off-many > summary {
  margin-top: 4px;
}

.ev-off-many[open] > summary .chev {
  transform: rotate(90deg);
}

.ev-off-list {
  display: grid;
  gap: var(--gap-sib);
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-14);
}

.ev-off-list a {
  overflow-wrap: anywhere;
}

/* -- /official: the width of "Past"; the form, then the list or the results -- */

.off-find {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
  margin: 0 0 var(--gap-block);
}

.off-find .wsearch {
  flex: 1 1 320px;
  min-width: 0;
  max-width: 520px;
  width: auto;
}

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

.off-sel > span {
  color: var(--muted);
  font-size: var(--fs-12);
  font-weight: 500;
}

/* the day of "Before" (item 164) as the selects: its calendar icon and picker are the browser's,
   in the colours of the theme by its color-scheme */
.off-sel select,
.off-sel input[type="date"] {
  height: 40px;
  min-width: 0;
  max-width: 100%;
  padding: 0 12px;
  border: 1.5px solid var(--outline);
  border-radius: var(--r-badge);
  background: var(--panel);
  color: var(--text);
  font-size: var(--fs-14);
}

/* "Filter" sends the form, as on "Past": the page has no script, so a select alone changes
   nothing (item 137); the height and the outline of the selects next to it */
.off-apply {
  height: 40px;
  padding: 0 16px;
  border: 1.5px solid var(--outline);
  border-radius: var(--r-badge);
  background: var(--panel);
  color: var(--text);
  font-size: var(--fs-14);
  font-weight: 700;
  cursor: pointer;
}

.off-apply:hover {
  background: var(--hit);
}

/* the sum of a search on --inset */
.off-sum {
  max-width: 70ch;
  margin: 0 0 var(--gap-sib);
  padding: 16px;
  border-radius: var(--r-inset);
  background: var(--inset);
  font-size: var(--fs-16);
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* a query of 100 characters without a space wraps: it is in the sum and in its forms (item 125).
   The spellings of the table counted too (item 129): under the forms on /official, and over the
   caveat in the block of a row, as wide as the caveat there */
.off-forms,
.off-also {
  margin: 0 0 var(--gap-sib);
  color: var(--muted);
  font-size: var(--fs-12);
  overflow-wrap: anywhere;
}

.off-hist .off-also {
  max-width: 60ch;
}

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

/* the transcript a citation "Official:" of Ask AI opens (item 148): --inset, a stripe of --ink at
   its left edge, as "Special for this event"; no script */
.off-hit:target {
  padding: 16px;
  border-radius: var(--r-inset);
  background: var(--inset);
  box-shadow: inset 3px 0 0 var(--ink);
  scroll-margin-top: 16px;
}

/* a transcript of the results: a block between lines */
.off-hit {
  max-width: 70ch;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.off-hit > * {
  margin: 0 0 var(--gap-sib);
}

.off-hit > :last-child {
  margin-bottom: 0;
}

.off-t {
  font-size: var(--fs-16);
  font-weight: 700;
  line-height: 1.3;
}

.off-t a {
  font-weight: 700;
}

.off-m {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  color: var(--muted);
  font-size: var(--fs-12);
}

.off-m .off-c {
  color: var(--ink);
  font-weight: 700;
}

.off-qs {
  display: grid;
  gap: 6px;
  padding-left: 24px;
  color: var(--muted);
  font-size: var(--fs-14);
  overflow-wrap: anywhere;
}

/* the list of the transcripts: rows of 48 px at least between lines; the day, the title over its
   format and events, the words at the right */
.off-docs {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.off-docs li {
  display: grid;
  grid-template-columns: 96px auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 2px 12px;
  min-height: 48px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-12);
}

.off-docs .off-d { grid-area: 1 / 1; }
.off-docs li > a { grid-area: 1 / 2 / 2 / 4; }
.off-docs .off-w { grid-area: 1 / 4; text-align: right; white-space: nowrap; }
.off-docs .off-f { grid-area: 2 / 2; }
.off-docs .off-ev { grid-area: 2 / 3; min-width: 0; }

@media (max-width: 640px) {
  .off-find .wsearch {
    flex: 1 1 100%;
    max-width: none;
  }

  .off-sel {
    flex: 1 1 140px;
  }

  .off-sel select,
  .off-sel input[type="date"] {
    width: 100%;
  }

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

  .off-docs .off-d { grid-area: 1 / 1; }
  .off-docs .off-w { grid-area: 1 / 2; }
  .off-docs li > a { grid-area: 2 / 1 / 3 / 3; }
  .off-docs .off-f { grid-area: 3 / 1; }
  .off-docs .off-ev { grid-area: 3 / 2; }
}

/* ==== the fixes of block 2 (site.md, item 113) ==== */

/* (q1) the status next to the title of a case in the lists of /rules and of an event page */
.rule-cases .badge-confirmed,
.rule-cases .badge-outcome-only,
.rule-cases .badge-rule-text,
.rules-cases-list .badge-confirmed,
.rules-cases-list .badge-outcome-only,
.rules-cases-list .badge-rule-text {
  margin-left: 4px;
  vertical-align: 1px;
}

/* (q3) the results of a case over several events, under the title of each */
.case-results-by-event > .case-ev {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: var(--fs-12);
  font-weight: 500;
}

.case-results-by-event > .case-ev a {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.case-results-by-event > .case-results {
  margin: 0 0 12px;
}

.case-results-by-event > .case-results:last-child {
  margin-bottom: 0;
}

/* (q6) on a phone each group of chips is one line that scrolls sideways, without a mask, so the
   first case starts on the first screen */
@media (max-width: 640px) {
  .cases-page .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .cases-page .chips::-webkit-scrollbar {
    display: none;
  }

  .cases-page .chip {
    flex: none;
  }
}

/* ==== Ask AI (site.md, items 114-124, 141-152, 177-178 and 204; style guide, "Ask AI"): a chat
   as in Claude and ChatGPT (Roman, 30.10; the design note of the night 30-31.10): the chats in a
   column at the left with "New chat" on top, the dialog at the right as tall as the window, its
   messages scrolling inside it, the box of the question pinned to its bottom with the model and
   "Use My transcripts" in it; the privacy text in an empty chat and behind "Privacy"; on a narrow
   app the dialog takes the width and the chats sit behind "Chats". A working screen: no new
   colours, sizes of type, radii or shadows, no motion; the question is a bubble at the right
   and the answer plain text (Roman, 31.10, item 204), no avatars. Its controls lie on the
   ground, on --panel and on --inset, so their outlines take --line-ground, which keeps 3:1 there
   in both themes (--outline alone is 2.9:1 on the light ground) ==== */

/* the ways in: the last line of the head of the section "Rules" of an event, and the button
   above the topics of /rules (items 115, 142) */
.rules-head .rules-ask {
  flex-basis: 100%;
  margin: 0;
}

/* the button of /rules and, after it, the plain link "All cases" (item 239): one line that wraps,
   the link under the button on the narrowest phones */
.rules-page > .rules-ask {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-sib) var(--gap-block);
  margin: 0 0 var(--gap-block);
}

/* -- the shell of /ask (main_class="ask-main"): the page itself does not scroll. The app takes
   the window under the header of a phone and over the footer, which is one line of 12 px; a
   window under 480 px tall scrolls the page instead of squeezing the dialog -- */

.shell-main:has(> main.ask-main) {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  min-height: 480px;
}

/* margin 0: the auto margins of .wrap would shrink a flex item to its content, and the query
   container has no width of its own */
main.ask-main {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  max-width: none;
  margin: 0;
  padding: 0;
}

.shell-main:has(> main.ask-main) > .site-foot .wrap {
  max-width: none;
  padding-top: 6px;
  padding-bottom: 8px;
  border-top: 1px solid var(--line);
}

/* the app: the list of the chats and the dialog. A positioned query container: the bar and the
   list are placed in it, out of the dialog that scrolls (nothing between them is positioned, so
   they do not scroll with it) */
.ask-layout {
  --ask-list: 280px;
  --ask-col: 680px;
  --ask-bar-h: 57px;
  position: relative;
  container: ask / inline-size;
  height: 100%;
}

/* -- the dialog: the article is the one scroller. Its texts, the questions and the box share one
   column of 680 px at most, in the middle of the dialog -- */

/* the column: the side padding of the dialog leaves 680 px in its middle (100cqw is the width of
   the app, --ask-side the list beside the dialog); its rows start at the column's left edge */
.ask-page {
  --line-ground: color-mix(in srgb, var(--outline) 85%, var(--text));
  /* the ground of a question (item 204): --inset in the dark theme, white --panel in the light
     one (below), where --inset is 1.01:1 to the ground and the bubble would melt into it */
  --ask-bubble: var(--inset);
  --ask-side: 0px;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  padding: var(--gap-block) max(var(--pad-page), calc((100cqw - var(--ask-side) - var(--ask-col)) / 2)) 0;
  /* the box is pinned over the end: a focused link never hides under it (WCAG 2.4.11); the
     script keeps --ask-dock-h at the height of the box */
  scroll-padding-bottom: var(--ask-dock-h, 200px);
}

/* the light theme of the system, unless Settings chose dark, and the light theme of Settings */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .ask-page {
    --ask-bubble: var(--panel);
  }
}

:root[data-theme="light"] .ask-page {
  --ask-bubble: var(--panel);
}

.ask-page [hidden] {
  display: none !important;
}

/* the app has no box of its own: its parts are the rows of the dialog */
#ask-app {
  display: contents;
}

/* every row of the dialog keeps its height: the dialog scrolls, its rows never shrink */
.ask-page > *,
#ask-app > * {
  flex: none;
}

/* -- the empty chat: the title, the lede, the event, the privacy text, the key, the examples
   near the box. A chat with questions shows none of it but the event; the title stays for screen
   readers -- */

.ask-page > .page-title {
  margin-block: 0 var(--gap-sib);
}

.ask-page > .lede {
  margin-block: 0 var(--gap-sib);
}

.ask-page:has(.ask-turn) > .page-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ask-page:has(.ask-turn) > .lede,
.ask-page:has(.ask-turn) > .ask-privacy:not(.is-open),
.ask-page:has(.ask-turn) .ask-intro,
.ask-page:has(.ask-turn) .ask-keyline {
  display: none;
}

/* the line of the event of the chat: the first line of the dialog; a title without a place to
   break never widens it (item 175) */
.ask-event {
  margin-block: 0 var(--gap-sib);
  overflow-wrap: anywhere;
}

.ask-page:has(.ask-turn) > .ask-event,
.ask-page:has(.ask-turn) > .ask-noevent {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--pad-panel);
}

.ask-event .lbl {
  margin-right: 4px;
  color: var(--muted);
  font-size: var(--fs-12);
  font-weight: 500;
}

.ask-event a {
  font-weight: 500;
}

.ask-event-d {
  margin-left: 4px;
  color: var(--muted);
  font-size: var(--fs-12);
}

.ask-noevent.note {
  font-size: var(--fs-14);
}

/* the privacy text: in an empty chat a line of 12 px under the lede, as before (seen before the
   key). In a chat with questions the link "Privacy" at the box opens it (a disclosure:
   aria-expanded, aria-controls="ask-privacy"): the same paragraph, at the end of the dialog,
   right over the box; never an overlay over the conversation. A frame of 1 px --line-strong
   without a ground (item 214): the question is the one bubble of the dialog, and --inset of the
   light theme melts into its ground (1.01:1) */
.ask-page > .ask-privacy {
  max-width: 70ch;
  margin: 0 0 var(--gap-block);
  color: var(--muted);
  font-size: var(--fs-12);
}

.ask-page:has(.ask-turn) > .ask-privacy.is-open {
  order: 3;
  margin: var(--gap-block) 0 0;
  padding: 12px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-inset);
}

.ask-page .btn-outline {
  border-color: var(--line-ground);
}

.ask-page .btn-outline:hover:not(:disabled) {
  border-color: var(--text);
}

.ask-page button:disabled,
.ask-page select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* a button that reads as a link: "Copy answer", "Delete all chats", "Use Claude Haiku 5.5,
   cheaper", "Privacy"; a target of 24 px at least */
#ask-del-all,
#ask-cheap,
.ask-copy,
.ask-priv {
  min-height: 24px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-12);
  text-decoration: underline;
  text-decoration-color: var(--outline);
  text-underline-offset: 0.18em;
  cursor: pointer;
}

#ask-del-all:hover:not(:disabled),
#ask-cheap:hover:not(:disabled),
.ask-copy:hover,
.ask-priv:hover {
  text-decoration-color: currentColor;
}

/* -- without a key (items 116, 143): blocks of --inset on the ground, no card in a card -- */

.ask-intro,
.ask-key {
  margin-block: 0 12px;
  padding: 16px;
  border-radius: var(--r-inset);
  background: var(--inset);
}

.ask-key {
  margin-bottom: var(--gap-block);
}

/* a key refused in a chat with questions (item 151): the form comes back over the box, under
   the question it stopped */
.ask-page:has(.ask-turn) .ask-key {
  order: 1;
  margin-top: var(--gap-block);
}

.ask-intro h2,
.ask-key h2 {
  margin: 0 0 var(--gap-sib);
  font-size: var(--fs-16);
  font-weight: 700;
  line-height: 1.3;
}

.ask-can,
.ask-key-steps {
  margin: 0;
  padding-left: 20px;
}

.ask-can li + li,
.ask-key-steps li + li {
  margin-top: 4px;
}

.ask-key-steps {
  margin-bottom: 16px;
}

.ask-keyform {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px var(--gap-sib);
}

.ask-keyform label {
  flex-basis: 100%;
  color: var(--muted);
  font-size: var(--fs-12);
  font-weight: 500;
}

/* 16 px: a phone does not zoom into the field */
#ask-key {
  flex: 1 1 240px;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 1.5px solid var(--line-ground);
  border-radius: var(--r-badge);
  background: var(--panel);
  color: var(--text);
  font-size: var(--fs-16);
}

#ask-key-error {
  margin: var(--gap-sib) 0 0;
  color: var(--no-ink);
}

.ask-keyline {
  margin-block: 0 var(--gap-block);
  color: var(--muted);
  font-size: var(--fs-12);
}

/* -- the chats (item 144): from 840 px of the app a column of 280 px at the left, as tall as the
   app, the bar with "New chat" on top and the list under it, scrolling by itself; narrower, the
   bar is the top line of the app and the list opens over the dialog -- */

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

.ask-bar .num {
  font-size: var(--fs-12);
}

#ask-new .ico {
  margin-left: -4px;
}

.ask-chats h2 {
  display: flex;
  align-items: center;
  gap: var(--gap-sib);
  margin: 0 0 4px;
  padding: 0 8px;
  color: var(--muted);
  font-size: var(--fs-12);
  font-weight: 500;
  line-height: 1.45;
}

.ask-chats-none {
  margin: 0;
  padding: 6px 8px;
}

.ask-chat-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* a chat: the whole width a button, the bin 16 px from it, as in the sidebar's rows */
.ask-chat {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.ask-chat-open {
  display: grid;
  flex: 1 1 auto;
  gap: 2px;
  min-width: 0;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--r-badge);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ask-chat-open:hover:not(:disabled),
.ask-chat-open[aria-current="true"] {
  background: var(--hit);
}

.ask-chat-t {
  font-size: var(--fs-14);
  font-weight: 500;
  line-height: 20px;
  overflow-wrap: anywhere;
}

.ask-chat-m {
  color: var(--muted);
  font-size: var(--fs-12);
  line-height: 16px;
  overflow-wrap: anywhere;
}

.ask-chat-e {
  display: block;
}

.ask-chat-del {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--r-badge);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.ask-chat-del:hover:not(:disabled) {
  background: var(--hit);
  color: var(--text);
}

.ask-bin {
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 4.25h11M6.25 4.25V2.75h3.5v1.5M4 4.25l.75 9.5h6.5l.75-9.5M6.75 6.75v4.5M9.25 6.75v4.5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 4.25h11M6.25 4.25V2.75h3.5v1.5M4 4.25l.75 9.5h6.5l.75-9.5M6.75 6.75v4.5M9.25 6.75v4.5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}

.ask-chat-confirm {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-sib);
  padding: 6px 8px;
  font-size: var(--fs-14);
}

.ask-chat-confirm .btn {
  min-height: 32px;
  padding: 0 14px;
}

.ask-confirm-q {
  flex-basis: 100%;
}

.ask-chats-all {
  display: flex;
  margin: var(--gap-sib) 0 0;
  padding: 0 4px;
}

#ask-chats-msg {
  margin: 4px 0 0;
  padding: 0 8px;
}

#ask-chats-msg:empty {
  display: none;
}

/* wide: the column. The bar and the list lie in the left 280 px of the app, a line at their
   right, as the sidebar of the site; the dialog takes the rest. Only with the script: without it
   the app is hidden and the dialog takes the whole width */
@container ask (width >= 840px) {
  .ask-page:has(> #ask-app:not([hidden])) {
    --ask-side: var(--ask-list);
    margin-left: var(--ask-list);
  }

  .ask-bar,
  #ask-chats {
    position: absolute;
    left: 0;
    width: var(--ask-list);
    max-width: none;
    margin: 0;
    border-right: 1px solid var(--line);
    background: var(--ground);
  }

  .ask-bar {
    top: 0;
    height: var(--ask-bar-h);
    padding: 12px 12px 5px;
  }

  #ask-new {
    flex: 1 1 auto;
  }

  #ask-chats-toggle {
    display: none;
  }

  #ask-chats,
  #ask-chats.is-open {
    top: var(--ask-bar-h);
    bottom: 0;
    display: block;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding: 12px 12px 16px;
  }
}

/* narrow (a phone, a tablet, 1024 px with the sidebar open): the bar is the top line of the app,
   "New chat" and "Chats · N"; "Chats" opens the list in place of the dialog, a chat chosen closes
   it. Not a dialog: the focus stays on "Chats", the list follows it, Escape closes it */
@container ask (width < 840px) {
  .ask-page:has(> #ask-app:not([hidden])) {
    height: calc(100% - var(--ask-bar-h));
    margin-top: var(--ask-bar-h);
  }

  .ask-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    height: var(--ask-bar-h);
    margin: 0;
    padding: 8px var(--pad-page);
    border-bottom: 1px solid var(--line);
    background: var(--ground);
  }

  #ask-chats-toggle[aria-expanded="true"] {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--on-ink);
  }

  #ask-chats {
    display: none;
  }

  #ask-chats.is-open {
    position: absolute;
    inset: var(--ask-bar-h) 0 0 0;
    z-index: 3;
    display: block;
    width: auto;
    max-width: none;
    margin: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding: 12px var(--pad-page) var(--gap-block);
    background: var(--ground);
  }

  /* what the list covers leaves the order of Tab and the tree of a screen reader (the title of
     the page stays, for screen readers) */
  .ask-layout:has(#ask-chats.is-open) .ask-page > :not(#ask-app, .page-title),
  .ask-layout:has(#ask-chats.is-open) #ask-app > :not(.ask-bar, #ask-chats) {
    visibility: hidden;
  }
}

/* -- the conversation (items 114, 120-122, 204): the question in a bubble at the right, the
   rest without frames or ground, no lines between the questions; the lines of an answer at most
   about 75 characters (item 139) -- */

#ask-thread:empty {
  display: none;
}

.ask-turn {
  padding: var(--pad-panel) 0;
  overflow-wrap: anywhere;
  /* a question set at the top of the dialog keeps a little air under the edge */
  scroll-margin-top: 12px;
}

.ask-turn:first-child {
  padding-top: 0;
}

.ask-turn > * {
  margin: 0 0 12px;
}

.ask-turn > :last-child {
  margin-bottom: 0;
}

/* the question (item 204; Roman, 31.10: without a bubble it melts into the answer): a bubble at
   the right edge of the column, as wide as its text, at most min(34em, 85%), its lines from its
   left edge; a ring of 1 px --line, not a border, so nothing moves, keeps its edge on the light
   ground (white is 1.10:1 to it). The lines typed with Shift+Enter stay lines (item 214); spaces
   in a row fold, and the space after the hidden "You" never starts the first line (pre-line) */
.ask-you {
  position: relative;
  width: fit-content;
  max-width: min(34em, 85%);
  margin-left: auto;
  padding: 12px 16px;
  border-radius: var(--r-inset);
  background: var(--ask-bubble);
  box-shadow: 0 0 0 1px var(--line);
  font-size: var(--fs-16);
  font-weight: 500;
  white-space: pre-line;
}

/* "You": read by a screen reader before the question, not shown (as .vh). The bubble is its
   containing block, so it never makes the page longer */
.ask-you .lbl {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ask-steps {
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: var(--fs-12);
}

.ask-steps li + li {
  margin-top: 4px;
}

.ask-failed {
  color: var(--no-ink);
  font-weight: 500;
}

.ask-draft {
  max-width: 34em;
  color: var(--muted);
  white-space: pre-wrap;
}

.ask-answer p,
.ask-answer ul {
  margin: 0 0 12px;
}

.ask-answer p,
.ask-answer li,
.ask-cite {
  max-width: 34em;
}

.ask-answer ul {
  padding-left: 20px;
}

.ask-answer > :last-child {
  margin-bottom: 0;
}

.ask-nocite,
.ask-end,
.ask-wait {
  color: var(--muted);
  font-size: var(--fs-12);
}

.ask-cites {
  padding-left: 20px;
  font-size: var(--fs-12);
}

.ask-cite + .ask-cite {
  margin-top: var(--gap-sib);
}

.ask-cite > a,
.ask-cite > span:first-child {
  font-weight: 500;
}

.ask-cite q {
  color: var(--muted);
  font-size: var(--fs-14);
}

.ask-miss {
  color: var(--no-ink);
  font-weight: 500;
}

/* the cost of an answer and "Copy answer" on one line while they fit */
.ask-turn > .ask-meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0 var(--gap-sib);
  margin-right: 12px;
  color: var(--muted);
  font-size: var(--fs-12);
  vertical-align: middle;
}

.ask-turn > .ask-copy {
  vertical-align: middle;
}

.ask-error {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-sib);
  padding: 8px 12px;
  border-radius: var(--r-badge);
  background: var(--no-fill);
  color: var(--no-ink);
}

.ask-error::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5 15 14H1z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M8 6v3.6M8 11.4v.1' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5 15 14H1z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M8 6v3.6M8 11.4v.1' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* the chat's cost and "not saved" (item 144): the last lines of the conversation, over the box */
.ask-total,
#ask-store {
  order: 2;
  max-width: 70ch;
  margin-block: var(--gap-block) 0;
  color: var(--muted);
  font-size: var(--fs-12);
}

/* the examples (item 143): in an empty chat, right over the box */
.ask-examples {
  order: 3;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sib);
  margin-top: auto;
  padding-top: var(--gap-block);
}

.ask-examples .lbl {
  flex-basis: 100%;
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-12);
  font-weight: 500;
}

.ask-ex {
  min-height: 32px;
  padding: 6px 12px;
  border: 1.5px solid var(--line-ground);
  border-radius: var(--r-badge);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-14);
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}

.ask-ex:hover {
  border-color: var(--text);
}

/* -- the box (items 114, 117, 123, 151): pinned to the bottom of the dialog, on the ground. One
   card of --panel holds the question and its toolbar: the model, the switch, the count and Ask
   (Stop in its place while a question runs); its notes are lines of 12 px under the card -- */

.ask-dock {
  order: 4;
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin-top: auto;
  padding: 12px 0 var(--gap-block);
  background: var(--ground);
}

.ask-examples:not([hidden]) ~ .ask-dock {
  margin-top: 0;
}

/* without a key nothing can be asked: the box is not pinned, the steps to a key get the height
   of the dialog and the box follows them (also under a question whose key OpenRouter refused) */
.ask-page:has(.ask-key:not([hidden])) .ask-dock {
  position: static;
}

/* positioned: the box of its parts hidden visually (the labels of the field and of the model, the
   note of the locked switch), which would else take .ask-layout and, out of the scroller, make the
   page scroll while the box is not pinned (no key) */
.ask-q {
  position: relative;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    "text  text  text  text  text"
    "model mine  .     count send"
    "hint  hint  hint  hint  hint"
    "cut   cut   cut   cut   cut"
    "notes notes notes notes notes";
  align-items: center;
  column-gap: var(--gap-sib);
}

/* the card: a box under the first two rows; the notes stay out of it */
.ask-q::before {
  content: "";
  grid-area: 1 / 1 / 3 / -1;
  align-self: stretch;
  border: 1.5px solid var(--line-ground);
  border-radius: var(--r-inset);
  background: var(--panel);
}

/* the ring of the question field is the card's edge: --focus, 3 px */
.ask-q:has(> #ask-q:focus-visible)::before {
  border-color: var(--focus);
  box-shadow: 0 0 0 1.5px var(--focus);
}

.ask-q textarea {
  grid-area: text;
  align-self: stretch;
  min-width: 0;
  min-height: calc(2lh + 16px);
  max-height: 40dvh;
  padding: 12px 16px 4px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-16);
  line-height: 1.45;
  resize: none;
  field-sizing: content;
}

.ask-q textarea::placeholder {
  color: var(--muted);
}

/* a browser without field-sizing (Firefox, older Safari): the field keeps its rows and may be
   drawn taller by hand */
@supports not (field-sizing: content) {
  .ask-q textarea {
    resize: vertical;
  }
}

.ask-setup,
.ask-count-line {
  display: contents;
}

.ask-sel {
  grid-area: model;
  display: flex;
  min-width: 0;
  margin: 0 0 8px 8px;
}

.ask-sel > span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ask-sel select {
  width: auto;
  max-width: 100%;
  height: 32px;
  padding: 0 8px;
  border: 1.5px solid var(--line-ground);
  border-radius: var(--r-badge);
  background: transparent;
  color: var(--text);
  font-size: var(--fs-14);
}

.ask-sel select option {
  background: var(--panel);
  color: var(--text);
}

/* as "Count on event pages" (.lib-on); on: --heard, data of this browser. The switches of
   Settings are these too, with their own margin */
.ask-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-sib);
  min-height: 24px;
  font-size: var(--fs-14);
  font-weight: 500;
  cursor: pointer;
}

/* in the row of the card, after the model */
.ask-q .ask-switch {
  grid-area: mine;
  margin: 0 0 8px 4px;
}

.ask-switch .lib-on {
  box-shadow: inset 0 0 0 1.5px var(--line-ground);
}

.ask-switch .lib-on:checked {
  box-shadow: none;
}

.ask-switch:has(:disabled) {
  color: var(--muted);
  cursor: not-allowed;
}

.ask-switch .lib-on:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#ask-count {
  grid-area: count;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: var(--fs-12);
}

#ask-send,
#ask-stop {
  grid-area: send;
  margin: 0 8px 8px 0;
}

/* Stop in the place of Ask while a question runs */
.ask-q:has(> #ask-stop:not([hidden])) > #ask-send {
  display: none;
}

#ask-hint,
#ask-cut {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: var(--fs-12);
}

#ask-hint {
  grid-area: hint;
}

#ask-hint:empty {
  display: none;
}

#ask-cut {
  grid-area: cut;
}

/* the notes of the setup run as one paragraph of 12 px: the price, "Use Claude Haiku 5.5,
   cheaper" right after it, My transcripts, the note of the locked switch (ids of models have no
   spaces) */
.ask-notes {
  grid-area: notes;
  min-width: 0;
  margin-top: 8px;
  color: var(--muted);
  font-size: var(--fs-12);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.ask-notes > p {
  display: inline;
  margin: 0;
}

/* My transcripts start a line of their own, after the price and its cheaper model */
#ask-lib::before {
  content: "";
  display: block;
}

/* in the run of the notes, a target of 24 px all the same (WCAG 2.5.8): its line is 24 px tall */
#ask-cheap,
.ask-priv {
  min-height: 24px;
  padding: 0;
  line-height: 24px;
  vertical-align: middle;
}

/* first in the notes, at their right: the price and the rest run beside it */
.ask-priv {
  float: right;
  margin-left: 12px;
}

/* the privacy link: only in a chat with questions, where the text itself is not shown */
.ask-page:not(:has(.ask-turn)) .ask-priv {
  display: none;
}

/* ten questions (item 120): the line in the place of the box, a frame without a ground, as the
   open "Privacy" (item 214) */
.ask-limit {
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-inset);
  font-size: var(--fs-14);
}

/* a narrow box: the model and Ask on the first line of the toolbar, the switch and the count on
   the second */
@container ask (width < 600px) {
  .ask-q {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "text  text"
      "model send"
      "mine  count"
      "hint  hint"
      "cut   cut"
      "notes notes";
  }

  .ask-q::before {
    grid-area: 1 / 1 / 4 / -1;
  }

  .ask-sel select {
    width: 100%;
  }

  .ask-q .ask-switch {
    margin-left: 12px;
  }

  #ask-count {
    margin-right: 12px;
  }

  .ask-ex {
    flex: 1 1 100%;
  }

  /* a narrow box under a chat with questions keeps only the price under it: the line of My
     transcripts goes (its link with it: no hidden Tab stop), the note of the locked switch
     stays for screen readers (the switch itself shows the chat's setting); an empty chat shows
     them all */
  .ask-page:has(.ask-turn) #ask-lib {
    display: none;
  }

  .ask-page:has(.ask-turn) #ask-mine-note {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}

/* below 1024 px the header of the site is on top (64 px, 56 on a phone): the app takes the rest
   of the window and the footer waits under it, so the dialog keeps the height */
@media (max-width: 1023px) {
  .shell-main:has(> main.ask-main) {
    display: block;
    height: auto;
    min-height: 0;
  }

  main.ask-main {
    height: max(424px, calc(100dvh - 64px));
  }
}

/* a phone: the dialog closer to the edges, the box one line tall until it is typed in */
@media (max-width: 640px) {
  main.ask-main {
    height: max(424px, calc(100dvh - 56px));
  }

  .ask-page {
    padding-top: var(--pad-panel);
  }

  .ask-dock {
    padding: 8px 0 12px;
  }

  .ask-q textarea {
    min-height: calc(1lh + 16px);
  }
}

/* ==== Settings (site.md, items 146-147; style guide, "Settings"): an article as /rules, the
   sections apart by --gap-section; a key a block of --inset as the key of /ask. No new colours.
   Its fields lie on the ground and on --inset: their outlines take --line-ground, as on /ask ==== */

.set-page {
  --line-ground: color-mix(in srgb, var(--outline) 85%, var(--text));
  max-width: 70ch;
}

.set-page [hidden] {
  display: none !important;
}

#set-app > section + section {
  margin-top: var(--gap-section);
}

.set-page h2 {
  margin: 0 0 12px;
  font-size: var(--fs-20);
  font-weight: 700;
  line-height: 1.25;
}

.set-page .note {
  max-width: 70ch;
}

#set-store {
  font-size: var(--fs-14);
}

/* -- the keys -- */

.set-key {
  padding: 16px;
  border-radius: var(--r-inset);
  background: var(--inset);
}

.set-key + .set-key {
  margin-top: 12px;
}

.set-key h3 {
  margin: 0 0 4px;
  font-size: var(--fs-16);
  font-weight: 700;
  line-height: 1.3;
}

.set-state {
  margin: 0 0 var(--gap-sib);
  font-size: var(--fs-14);
  overflow-wrap: anywhere;
}

.set-keyform {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px var(--gap-sib);
  margin: 12px 0 0;
}

.set-keyform label {
  flex-basis: 100%;
  color: var(--muted);
  font-size: var(--fs-12);
  font-weight: 500;
}

/* 16 px: a phone does not zoom into the field */
.set-keyform input {
  flex: 1 1 240px;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 1.5px solid var(--line-ground);
  border-radius: var(--r-badge);
  background: var(--panel);
  color: var(--text);
  font-size: var(--fs-16);
}

#set-or-error,
#set-dg-error {
  margin: var(--gap-sib) 0 0;
  color: var(--no-ink);
}

.set-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sib);
  margin: 12px 0 0;
}

.set-page .btn-outline {
  border-color: var(--line-ground);
}

.set-page .btn-outline:hover:not(:disabled) {
  border-color: var(--text);
}

.set-page .btn-danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--no-ink) 10%, transparent);
}

.set-page button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* what OpenRouter said of the key */
.set-out {
  margin: var(--gap-sib) 0;
  font-size: var(--fs-14);
  overflow-wrap: anywhere;
}

.set-out:empty {
  display: none;
}

/* -- Ask AI and Display -- */

.set-sel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 360px;
  margin: 0 0 var(--gap-sib);
}

.set-sel > span {
  color: var(--muted);
  font-size: var(--fs-12);
  font-weight: 500;
}

.set-sel select {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1.5px solid var(--line-ground);
  border-radius: var(--r-badge);
  background: var(--panel);
  color: var(--text);
  font-size: var(--fs-14);
}

#set-model-info {
  overflow-wrap: anywhere;
}

.set-page .ask-switch {
  margin-top: var(--gap-sib);
}

/* the theme: three radios as one segmented choice of 40 px, the chosen one in ink */
.set-theme {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 var(--gap-block);
  padding: 0;
  border: 0;
}

.set-theme legend {
  margin: 0 0 4px;
  padding: 0;
  color: var(--muted);
  font-size: var(--fs-12);
  font-weight: 500;
}

.set-theme label {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1.5px solid var(--line-ground);
  background: transparent;
  color: var(--text);
  font-size: var(--fs-14);
  font-weight: 500;
  cursor: pointer;
}

.set-theme label + label {
  margin-left: -1.5px;
}

.set-theme label:first-of-type {
  border-radius: var(--r-pill) 0 0 var(--r-pill);
}

.set-theme label:last-of-type {
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
}

.set-theme input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.set-theme label:has(input:checked) {
  position: relative;
  border-color: var(--ink);
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 700;
}

.set-theme label:has(input:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

#set-tz-now {
  margin-bottom: 12px;
}

/* -- the data in this browser: a name, its number, its actions -- */

.set-data {
  display: grid;
  gap: 12px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.set-data li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-sib) 12px;
  font-size: var(--fs-14);
}

.set-data-k {
  font-weight: 500;
}

.set-n {
  color: var(--muted);
}

.set-erase {
  margin: var(--gap-block) 0 var(--gap-sib);
}

.set-erase .btn {
  white-space: normal;
  text-align: left;
}

/* the confirmations, in the page: a line under the button, never a dialog of the browser */
.set-confirm {
  margin: var(--gap-block) 0 var(--gap-sib);
  padding: 16px;
  border-radius: var(--r-inset);
  background: var(--inset);
  font-size: var(--fs-14);
}

.set-confirm p {
  margin: 0;
}

.set-confirm-row {
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-sib);
}

.set-confirm-row .btn {
  min-height: 32px;
  padding: 0 14px;
}

#set-data-msg:empty {
  display: none;
}

@media (max-width: 640px) {
  .set-sel {
    max-width: none;
  }

  .set-actions .btn {
    flex: 1 1 auto;
  }
}

/* ==== Transcribe: the speakers (site.md, items 191-197; style guide, "Transcribe: спикеры"): the
   label of a speaker in the text and in the mentions, the prompt over the text, the block
   "Speakers" under it. No new colours: the number on --hit, the speaker of the rules --heard,
   the prompt and "New" on the amber of an actionable warning ==== */

/* the label: "Speaker 2", then who it is once marked */
.tx-sp {
  display: inline-flex;
  align-items: stretch;
  max-width: 100%;
  min-height: 24px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: var(--fs-12);
  font-weight: 500;
  line-height: 22px;
  vertical-align: middle;
  overflow: hidden;
}

.tx-sp > span {
  min-width: 0;
  padding: 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tx-sp-n {
  flex: none;
  background: var(--hit);
  color: var(--text);
}

.tx-sp.who .tx-sp-who {
  color: var(--heard);
  font-weight: 700;
}

.tx-sp.else .tx-sp-who {
  color: var(--muted);
}

/* a speaker starts in the text: its label and the time on a line of their own */
.tx-turn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px var(--gap-sib);
  margin: 12px 0 4px;
}

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

.tx-turn .tx-t {
  display: inline;
  margin: 0;
}

/* the prompt to mark new numbers: right over the text, with the warning icon */
.tx-spk-prompt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-sib) 12px;
  margin: 0 0 var(--gap-sib);
  padding: 10px var(--pad-cell-x);
  border-radius: var(--r-badge);
  background: var(--warn-fill);
  color: var(--warn-ink);
  font-size: var(--fs-14);
  font-weight: 500;
}

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

.tx-spk-prompt .ico {
  width: 16px;
  height: 16px;
}

.tx-spk-prompt-text {
  flex: 1 1 240px;
  min-width: 0;
  max-width: 70ch;
  margin: 0;
}

/* "Mark speakers": an outline in the colour of the prompt, at its right end */
#tx-app .tx-spk-prompt button {
  height: 32px;
  margin-left: auto;
  padding: 0 12px;
  border: 1.5px solid currentColor;
  background: transparent;
  color: inherit;
  font-weight: 500;
}

#tx-app .tx-spk-prompt button:hover:not(:disabled) {
  background: transparent;
  box-shadow: inset 0 0 0 1px currentColor;
}

/* the block under the text: the container of its rows, which take three columns by the width
   of the list, not of the window: the sidebar of the site takes its width too (item 203) */
.tx-speakers {
  margin: var(--gap-block) 0 0;
  container: tx-spk / inline-size;
}

.tx-speakers h2 {
  margin: 0 0 4px;
  font-size: var(--fs-16);
  font-weight: 650;
  line-height: 1.3;
}

.tx-spk-rule {
  max-width: 70ch;
  margin: 0 0 12px;
}

/* the list: a panel as the market rows */
.tx-spk-list,
.tx-spk-folded {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-panel);
  background: var(--panel);
}

.tx-spk-list:empty {
  display: none;
}

/* a row (item 203): the label | the last phrase, and under the phrase the dropdown with its
   state; from 960 px of list the dropdown takes a third column, under 700 px a line of its own
   under both (below) */
.tx-spk {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
  grid-template-areas:
    "id last"
    "id pick";
  gap: var(--gap-sib) 20px;
  align-items: start;
  padding: var(--pad-cell);
}

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

.tx-spk-id {
  grid-area: id;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}

/* the label in a row (item 203): the number a pill, as in the text, and the name of the mark
   under it, whole: it wraps, never cut with "…" (the list next to it holds the same name). The
   pill of the label gives way, so the number and the name are items of the column, and a phone
   puts the name on a line of its own */
.tx-spk-id .tx-sp {
  display: contents;
}

.tx-spk-id .tx-sp-n {
  min-height: 24px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
}

.tx-spk-id .tx-sp-who {
  max-width: 100%;
  padding: 0;
  line-height: 1.45;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

.tx-spk-words {
  color: var(--muted);
  font-size: var(--fs-12);
}

/* "New": a row the prompt names */
.tx-spk-new {
  background: var(--warn-fill);
  color: var(--warn-ink);
}

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

.tx-spk-last {
  grid-area: last;
  min-width: 0;
  margin: 0;
  font-size: var(--fs-14);
  overflow-wrap: anywhere;
}

.tx-spk-last time {
  color: var(--muted);
  font-size: var(--fs-12);
  white-space: nowrap;
}

.tx-spk.off .tx-spk-last q {
  color: var(--muted);
}

/* the dropdown and its state: the state to the right of it while it fits, else under it */
.tx-spk-pick {
  grid-area: pick;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  min-width: 0;
}

/* never narrower than its longest option, so the chosen one is read whole, nor than 240 px,
   and never wider than its cell */
.tx-spk-pick select {
  width: auto;
  min-width: 240px;
  max-width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1.5px solid var(--outline);
  border-radius: var(--r-badge);
  background: var(--panel);
  color: var(--text);
  font-size: var(--fs-14);
}

.tx-spk[data-m="who"] .tx-spk-pick select {
  border-color: var(--heard);
}

.tx-spk-state {
  color: var(--muted);
  font-size: var(--fs-12);
}

.tx-spk[data-m="who"] .tx-spk-state {
  color: var(--heard);
  font-weight: 600;
}

/* a list of 960 px and wider: three columns, the dropdown as wide as it needs, up to 480 px,
   its state under it */
@container tx-spk (min-width: 960px) {
  .tx-spk {
    grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) fit-content(480px);
    grid-template-areas: "id last pick";
    align-items: center;
  }

  .tx-spk-pick {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 4px;
  }
}

/* a list narrower than 700 px (windows of 641-763 px without the sidebar of the site): under the
   phrase alone the longest option of a call is cut (411 px of 53 characters, the phrase 303 px
   at 641), so the dropdown and its state go under the label and the phrase, across the row,
   from its left edge (item 215); a phone takes its column below */
@container tx-spk (width < 700px) {
  .tx-spk {
    grid-template-areas:
      "id last"
      "pick pick";
  }
}

/* the voices of a word or two, folded under the list in a panel of their own */
.tx-spk-more {
  margin-top: var(--gap-sib);
}

.tx-spk-more > summary {
  width: fit-content;
  padding: 4px 0;
  color: var(--muted);
  font-size: var(--fs-14);
  cursor: pointer;
}

.tx-spk-folded {
  margin-top: 4px;
}

#tx-spk-note {
  margin: var(--gap-sib) 0 0;
}

/* Download and Save under the speakers: a group of their own */
.tx-speakers:not([hidden]) + .tx-dl {
  margin-top: var(--gap-block);
}

@media (max-width: 640px) {
  /* a row in one column: the number, "New" and the words on a line, the name of the mark under
     them, the phrase, the dropdown as wide as the row, its state */
  .tx-spk {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "id"
      "last"
      "pick";
    align-items: stretch;
  }

  .tx-spk-id {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px var(--gap-sib);
  }

  .tx-spk-id .tx-sp-who {
    order: 1;
    flex-basis: 100%;
  }

  .tx-spk-pick {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 4px;
  }

  /* 16 px: a phone does not zoom the page into the dropdown; a long option may be cut there,
     the name stays whole under the number */
  .tx-spk-pick select {
    width: 100%;
    min-width: 0;
    font-size: var(--fs-16);
  }

  /* the button under the text of the prompt, at its start */
  #tx-app .tx-spk-prompt button {
    margin-left: 0;
  }
}

/* ==== Transcribe: recordings (site.md, items 205-210; style guide, "Transcribe: записи"): the
   page of a past event and the page of a recording, /transcribe. No new colours or sizes ==== */

/* the lede of the page of a recording and the line of a past event under its meta line */
.ev-head .lede {
  margin: var(--gap-sib) 0 0;
}

/* the box of NoteGPT under the header of the page of a recording (item 240, it was a line of
   item 223): --gap-block under the header; the space of a section the header had before is under
   the box now, before "The recording" */
.ev-head:has(+ .ngpt) {
  margin-bottom: var(--gap-block);
}

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

/* the fields of a recording: a box as the key's, as wide as the column, as the panel */
.tx-rec {
  margin: 0 0 var(--pad-card);
  padding: var(--pad-card);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-panel);
  background: var(--panel);
}

.tx-rec h2 {
  margin: 0 0 12px;
  font-size: var(--fs-16);
  font-weight: 650;
  line-height: 1.3;
}

/* Speaker, Date of the recording and Format in three columns; Title and Source link as wide as
   the box. A field as in the sheet "Add a transcript": its label over it */
.tx-rec-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.tx-field {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
  font-size: var(--fs-12);
  font-weight: 500;
}

.tx-field-wide {
  grid-column: 1 / -1;
}

.tx-field input,
.tx-field select {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 1.5px solid var(--outline);
  border-radius: var(--r-badge);
  background: var(--panel);
  color: var(--text);
  font-size: var(--fs-14);
  font-weight: 400;
}

.tx-field input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.tx-rec > .note {
  max-width: 70ch;
  margin: 12px 0 0;
}

/* Kalshi's result in a market row of a past event: the chip of the event page, a label right
   after the phrase and its flag, on the baseline of the phrase; the count stays at the right */
.tx-result .result {
  justify-content: center;
  min-width: 40px;
  min-height: 20px;
  padding: 0 8px;
  font-size: var(--fs-12);
  line-height: 20px;
}

/* the way to the page of a recording, under Save of an event */
.tx-more {
  margin: var(--gap-sib) 0 0;
}

/* the page of a recording: what Save answered and "Transcribe the next recording" on one line
   under Download and Save, the button as theirs; on a phone it wraps under the line (item 209,
   QA fix) */
.tx-saved-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--gap-sib) 12px;
  margin-top: var(--gap-sib);
}

.tx-saved-row #tx-saved {
  margin: 0;
}

/* "Transcribe a recording" of My transcripts: the microphone of Transcribe, 16 px */
#lib-rec .ico {
  width: 16px;
  height: 16px;
}

@media (max-width: 640px) {
  .tx-rec-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 16 px: a phone does not zoom the page into a field */
  .tx-field input,
  .tx-field select {
    font-size: var(--fs-16);
  }
}

/* ==== the widths and the left edges of the bars (site.md, item 226; style guide, "Запрещено"): the
   window bar of the home page, the k/n rate bars and the bid-ask box of the event page take
   them as classes in whole percent, bw-N and bl-N for N = 0..100, since the CSP of the site
   (style-src 'self') allows no style attribute. A script sets a width through the style object,
   which the CSP allows (mine.js) ==== */

.bw-0 { width: 0%; }
.bw-1 { width: 1%; }
.bw-2 { width: 2%; }
.bw-3 { width: 3%; }
.bw-4 { width: 4%; }
.bw-5 { width: 5%; }
.bw-6 { width: 6%; }
.bw-7 { width: 7%; }
.bw-8 { width: 8%; }
.bw-9 { width: 9%; }
.bw-10 { width: 10%; }
.bw-11 { width: 11%; }
.bw-12 { width: 12%; }
.bw-13 { width: 13%; }
.bw-14 { width: 14%; }
.bw-15 { width: 15%; }
.bw-16 { width: 16%; }
.bw-17 { width: 17%; }
.bw-18 { width: 18%; }
.bw-19 { width: 19%; }
.bw-20 { width: 20%; }
.bw-21 { width: 21%; }
.bw-22 { width: 22%; }
.bw-23 { width: 23%; }
.bw-24 { width: 24%; }
.bw-25 { width: 25%; }
.bw-26 { width: 26%; }
.bw-27 { width: 27%; }
.bw-28 { width: 28%; }
.bw-29 { width: 29%; }
.bw-30 { width: 30%; }
.bw-31 { width: 31%; }
.bw-32 { width: 32%; }
.bw-33 { width: 33%; }
.bw-34 { width: 34%; }
.bw-35 { width: 35%; }
.bw-36 { width: 36%; }
.bw-37 { width: 37%; }
.bw-38 { width: 38%; }
.bw-39 { width: 39%; }
.bw-40 { width: 40%; }
.bw-41 { width: 41%; }
.bw-42 { width: 42%; }
.bw-43 { width: 43%; }
.bw-44 { width: 44%; }
.bw-45 { width: 45%; }
.bw-46 { width: 46%; }
.bw-47 { width: 47%; }
.bw-48 { width: 48%; }
.bw-49 { width: 49%; }
.bw-50 { width: 50%; }
.bw-51 { width: 51%; }
.bw-52 { width: 52%; }
.bw-53 { width: 53%; }
.bw-54 { width: 54%; }
.bw-55 { width: 55%; }
.bw-56 { width: 56%; }
.bw-57 { width: 57%; }
.bw-58 { width: 58%; }
.bw-59 { width: 59%; }
.bw-60 { width: 60%; }
.bw-61 { width: 61%; }
.bw-62 { width: 62%; }
.bw-63 { width: 63%; }
.bw-64 { width: 64%; }
.bw-65 { width: 65%; }
.bw-66 { width: 66%; }
.bw-67 { width: 67%; }
.bw-68 { width: 68%; }
.bw-69 { width: 69%; }
.bw-70 { width: 70%; }
.bw-71 { width: 71%; }
.bw-72 { width: 72%; }
.bw-73 { width: 73%; }
.bw-74 { width: 74%; }
.bw-75 { width: 75%; }
.bw-76 { width: 76%; }
.bw-77 { width: 77%; }
.bw-78 { width: 78%; }
.bw-79 { width: 79%; }
.bw-80 { width: 80%; }
.bw-81 { width: 81%; }
.bw-82 { width: 82%; }
.bw-83 { width: 83%; }
.bw-84 { width: 84%; }
.bw-85 { width: 85%; }
.bw-86 { width: 86%; }
.bw-87 { width: 87%; }
.bw-88 { width: 88%; }
.bw-89 { width: 89%; }
.bw-90 { width: 90%; }
.bw-91 { width: 91%; }
.bw-92 { width: 92%; }
.bw-93 { width: 93%; }
.bw-94 { width: 94%; }
.bw-95 { width: 95%; }
.bw-96 { width: 96%; }
.bw-97 { width: 97%; }
.bw-98 { width: 98%; }
.bw-99 { width: 99%; }
.bw-100 { width: 100%; }
.bl-0 { left: 0%; }
.bl-1 { left: 1%; }
.bl-2 { left: 2%; }
.bl-3 { left: 3%; }
.bl-4 { left: 4%; }
.bl-5 { left: 5%; }
.bl-6 { left: 6%; }
.bl-7 { left: 7%; }
.bl-8 { left: 8%; }
.bl-9 { left: 9%; }
.bl-10 { left: 10%; }
.bl-11 { left: 11%; }
.bl-12 { left: 12%; }
.bl-13 { left: 13%; }
.bl-14 { left: 14%; }
.bl-15 { left: 15%; }
.bl-16 { left: 16%; }
.bl-17 { left: 17%; }
.bl-18 { left: 18%; }
.bl-19 { left: 19%; }
.bl-20 { left: 20%; }
.bl-21 { left: 21%; }
.bl-22 { left: 22%; }
.bl-23 { left: 23%; }
.bl-24 { left: 24%; }
.bl-25 { left: 25%; }
.bl-26 { left: 26%; }
.bl-27 { left: 27%; }
.bl-28 { left: 28%; }
.bl-29 { left: 29%; }
.bl-30 { left: 30%; }
.bl-31 { left: 31%; }
.bl-32 { left: 32%; }
.bl-33 { left: 33%; }
.bl-34 { left: 34%; }
.bl-35 { left: 35%; }
.bl-36 { left: 36%; }
.bl-37 { left: 37%; }
.bl-38 { left: 38%; }
.bl-39 { left: 39%; }
.bl-40 { left: 40%; }
.bl-41 { left: 41%; }
.bl-42 { left: 42%; }
.bl-43 { left: 43%; }
.bl-44 { left: 44%; }
.bl-45 { left: 45%; }
.bl-46 { left: 46%; }
.bl-47 { left: 47%; }
.bl-48 { left: 48%; }
.bl-49 { left: 49%; }
.bl-50 { left: 50%; }
.bl-51 { left: 51%; }
.bl-52 { left: 52%; }
.bl-53 { left: 53%; }
.bl-54 { left: 54%; }
.bl-55 { left: 55%; }
.bl-56 { left: 56%; }
.bl-57 { left: 57%; }
.bl-58 { left: 58%; }
.bl-59 { left: 59%; }
.bl-60 { left: 60%; }
.bl-61 { left: 61%; }
.bl-62 { left: 62%; }
.bl-63 { left: 63%; }
.bl-64 { left: 64%; }
.bl-65 { left: 65%; }
.bl-66 { left: 66%; }
.bl-67 { left: 67%; }
.bl-68 { left: 68%; }
.bl-69 { left: 69%; }
.bl-70 { left: 70%; }
.bl-71 { left: 71%; }
.bl-72 { left: 72%; }
.bl-73 { left: 73%; }
.bl-74 { left: 74%; }
.bl-75 { left: 75%; }
.bl-76 { left: 76%; }
.bl-77 { left: 77%; }
.bl-78 { left: 78%; }
.bl-79 { left: 79%; }
.bl-80 { left: 80%; }
.bl-81 { left: 81%; }
.bl-82 { left: 82%; }
.bl-83 { left: 83%; }
.bl-84 { left: 84%; }
.bl-85 { left: 85%; }
.bl-86 { left: 86%; }
.bl-87 { left: 87%; }
.bl-88 { left: 88%; }
.bl-89 { left: 89%; }
.bl-90 { left: 90%; }
.bl-91 { left: 91%; }
.bl-92 { left: 92%; }
.bl-93 { left: 93%; }
.bl-94 { left: 94%; }
.bl-95 { left: 95%; }
.bl-96 { left: 96%; }
.bl-97 { left: 97%; }
.bl-98 { left: 98%; }
.bl-99 { left: 99%; }
.bl-100 { left: 100%; }