/*
chatBTB design system. One stylesheet, no JavaScript. Every component is rendered with
example content at GET /styleguide.

Tokens     colour, type scale and spacing custom properties on :root. Dark values apply
           under prefers-color-scheme: dark and inside any .turf element.
Shell      .site-header .brand .site-nav .site-footer .wrap .band .turf .prose
           .site-account, the header's Sign in link or Sign out form; .site-account__action
           Children of <main> sit in a centred column; add .band to span the full width.
Layout     .stack .cluster .split .rule-hash .visually-hidden
Buttons    .btn with .btn--primary .btn--secondary .btn--danger
Form       .field .field__label .field__input .field__hint .field__error
           .choice > .choice__option for radio buttons and tick boxes
Card       .card .card__title
Table      .table-wrap > .data-table, numeric cells take .num
Latency    .metric--slow marks a time over its threshold, .spark is a strip of
           .spark__bar rects (.spark__bar--slow for a slow slice)
Odds       .chip (a price or line such as -110 or O 47.5), .chip__side for its label
Results    .badge with .badge--win .badge--loss .badge--push .badge--pending
Chat       .thread > .msg.msg--user | .msg.msg--analyst | .msg.msg--notice, .msg__who
           .msg__body, .msg--streaming while a reply is still arriving, .msg__action under a
           reply; .msg--notice is chatBTB's own notice (a game called off), not the model's
           .badge--new marks a conversation with an unread notice in the list
Report     .report-link, the link to the bug report form in the footer
Board      .post-list > .post (a .vote box beside .post__title and .post__meta),
           .comments > .comment.comment--d0 to --d7, .user-text for what users wrote,
           .badge--ai beside the name of an account run by a model, .pick for a post's pick
Notice     .notice with .notice--info .notice--success .notice--warning .notice--error,
           .notice__title
Loading    .skeleton with .skeleton--line .skeleton--block
Stoppage   .stoppage, the panel used by error and message pages
Example    .example-tag marks made-up sample content

Mobile first
           Every base rule is written for a 360px phone held in one hand; min-width media
           queries (40rem tablet, 56rem desktop) only add the wider layout. There are no
           max-width queries. Rules the rest of the site relies on:
           - Touch targets are at least 2.75rem (44px) tall: nav links, buttons, form
             options, per-reply actions, footer links. Inline links inside a sentence are
             exempt.
           - Inputs use at least 1rem type so iOS does not zoom on focus.
           - Nothing makes the page scroll sideways. A wide table or code block scrolls inside
             its own box, with a shadow on the edge that has more to see.
           - The header is one row: wordmark and nav. A nav that is too long for the phone
             scrolls sideways inside the header; give a long list its own page instead.
           - Forms are one column. A form's button fills the width on a phone.
           - .composer sticks to the bottom of the screen on the conversation page, with
             the send button beside the box under the thumb.
           - Sizes that depend on the screen use dvh, and padding uses env(safe-area-inset-*)
             so notches and the home bar never cover content.
*/

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url("/assets/display.woff2?v=3787a5a419171630") format("woff2");
}

:root {
  color-scheme: light dark;

  --font-display: "Barlow Condensed", "Avenir Next Condensed", "Roboto Condensed",
    "Arial Narrow", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --step--1: 0.875rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.563rem;
  --step-3: 1.953rem;
  --step-4: 2.441rem;
  --step-5: 3.052rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  --radius-tile: 3px;
  --radius-control: 4px;
  --radius-panel: 8px;
  --radius-bubble: 14px;

  --measure: 65ch;
  --page-width: 70rem;
  --gutter: clamp(1rem, 4vw, 2rem);

  /* Fixed brand colours: the same in both schemes. */
  --turf: #0c261d;
  --turf-deep: #071711;
  --chalk: #f3f1e7;
  --flag: #ffcf33;
  --flag-pressed: #f0bc00;
  --flag-ink: #1a1400;
  --scrimmage: #14508f;
  --board: #071711;
  --board-digit: #ffd75e;
  --danger-fill: #b3261e;

  /* Scheme colours: light. */
  --bg: #f1f3ee;
  --surface: #ffffff;
  --surface-sunk: #e4e8e2;
  --ink: #10201a;
  --muted: #47574f;
  --line: #c7d0c9;
  --control-edge: #66766d;
  --link: #0a4ea3;
  --focus: #0a4ea3;
  --danger: #a1211a;
  --btn-primary-edge: #1a1400;
  --board-edge: #071711;
  --win-bg: #d6f0de;
  --win-ink: #0b5429;
  --loss-bg: #fad9d5;
  --loss-ink: #8a1a12;
  --push-bg: #dfe4e0;
  --push-ink: #33403a;
  --pending-bg: #ffedb3;
  --pending-ink: #5e4100;
  --info-edge: #0a4ea3;
  --success-edge: #17783c;
  --warning-edge: #8a6100;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a1d16;
    --surface: #12301f;
    --surface-sunk: #071711;
    --ink: #f3f1e7;
    --muted: #b1c0b7;
    --line: #2d4d3e;
    --control-edge: #7c998b;
    --link: #9cc8ff;
    --focus: #ffcf33;
    --danger: #ffb4ab;
    --btn-primary-edge: #ffcf33;
    --board-edge: #3b5f4e;
    --win-bg: #12452b;
    --win-ink: #9be8b6;
    --loss-bg: #501c17;
    --loss-ink: #ffb9b0;
    --push-bg: #2b3d35;
    --push-ink: #d8e0db;
    --pending-bg: #4d3c09;
    --pending-ink: #ffdc7a;
    --info-edge: #9cc8ff;
    --success-edge: #6fd493;
    --warning-edge: #ffcf33;
  }
}

/* The field: always dark, whatever the scheme, so everything inside takes dark values. */
.turf {
  --bg: #0c261d;
  --surface: #143524;
  --surface-sunk: #071711;
  --ink: #f3f1e7;
  --muted: #b9c7be;
  --line: #2f5242;
  --control-edge: #86a394;
  --link: #a8cfff;
  --focus: #ffcf33;
  --danger: #ffb4ab;
  --btn-primary-edge: #ffcf33;
  --board-edge: #3b5f4e;
  color: var(--ink);
  background-color: var(--turf);
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  grid-template-columns: minmax(0, 1fr);
  background: var(--bg);
  color: var(--ink);
  font: var(--step-0) / 1.55 var(--font-body);
}

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.005em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

h1 {
  font-size: var(--step-4);
}

h2 {
  font-size: var(--step-2);
}

h3 {
  font-size: var(--step-1);
}

@media (min-width: 40rem) {
  h1 {
    font-size: var(--step-5);
  }

  h2 {
    font-size: var(--step-3);
  }

  h3 {
    font-size: var(--step-2);
  }
}

h4 {
  font-size: var(--step-1);
}

p,
ul,
ol {
  margin: 0 0 var(--space-4);
}

a {
  color: var(--link);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 0.16em;
}

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

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  overflow-wrap: anywhere;
}

/* ---------- Shell ---------- */

.wrap {
  width: 100%;
  max-width: calc(var(--page-width) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left))
    max(var(--gutter), env(safe-area-inset-right));
}

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

.site-header {
  padding-top: env(safe-area-inset-top);
}

.site-header > .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 3.5rem;
  padding-block: var(--space-1);
}

.site-header nav {
  min-width: 0;
  /* With the account control after it, the nav sits beside it on the right. */
  margin-inline-start: auto;
}

@media (min-width: 40rem) {
  .site-header > .wrap {
    gap: var(--space-5);
  }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  color: var(--ink);
  font: 700 var(--step-2) / 1 var(--font-display);
  letter-spacing: 0.01em;
  text-decoration: none;
}

/* The first-down marker: a yellow stripe beside the wordmark. */
.brand::before {
  content: "";
  width: 0.4rem;
  height: 1.5rem;
  background: var(--flag);
}

.brand:hover {
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* In the header the nav stays on one row and scrolls sideways if it must. */
.site-header .site-nav {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: var(--space-2);
  white-space: nowrap;
  color: var(--ink);
  font: 700 var(--step-1) / 1 var(--font-display);
  letter-spacing: 0.02em;
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current] {
  box-shadow: inset 0 -3px 0 var(--flag);
}

/* Sign in or Sign out, at the end of every page's header. */
.site-account {
  flex: none;
  margin: 0;
}

.site-account__action {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-tile);
  background: transparent;
  color: var(--ink);
  font: 700 var(--step-0) / 1 var(--font-display);
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.site-account__action:hover {
  box-shadow: inset 0 -3px 0 var(--flag);
}

main {
  display: grid;
  grid-template-columns:
    [full-start] minmax(max(var(--gutter), env(safe-area-inset-left)), 1fr)
    [content-start] minmax(0, var(--page-width))
    [content-end] minmax(max(var(--gutter), env(safe-area-inset-right)), 1fr)
    [full-end];
  align-content: start;
  padding-bottom: var(--space-6);
}

@media (min-width: 40rem) {
  main {
    padding-bottom: var(--space-8);
  }
}

main > * {
  grid-column: content;
  min-width: 0;
}

main > :first-child {
  margin-top: var(--space-5);
}

@media (min-width: 40rem) {
  main > :first-child {
    margin-top: var(--space-7);
  }
}

main > .band {
  grid-column: full;
  margin-top: 0;
}

main > .band + *,
main > * + .band {
  margin-top: var(--space-7);
}

.site-footer {
  color: var(--muted);
  font-size: var(--step--1);
}

.site-footer > .wrap {
  padding-block: var(--space-4) max(var(--space-6), env(safe-area-inset-bottom));
}

.site-footer p {
  margin: 0;
  padding-top: var(--space-4);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-4);
  padding-top: var(--space-2);
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

/* A plain link that is a tap target on its own line, such as "All conversations". */
.back-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.prose {
  max-width: var(--measure);
}

/* ---------- Layout helpers ---------- */

.stack > * {
  margin-block: 0;
}

.stack > * + * {
  margin-top: var(--stack-gap, var(--space-4));
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

@media (min-width: 56rem) {
  .split {
    column-gap: var(--space-7);
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
  }
}

/* A sideline ruler: a tick every yard, a taller one every five. */
.rule-hash,
.site-footer > .wrap::before {
  display: block;
  height: 0.75rem;
  margin-inline: 0;
  border: 0;
  color: var(--control-edge);
  background:
    repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 3.75rem) 0 0 / 100% 100%
      no-repeat,
    repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 0.75rem) 0 0 / 100% 45%
      no-repeat,
    linear-gradient(currentColor, currentColor) 0 0 / 100% 1px no-repeat;
}

.site-footer > .wrap::before {
  content: "";
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Turf bands ---------- */

.band {
  padding-block: var(--space-6);
}

@media (min-width: 40rem) {
  .band {
    padding-block: var(--space-7);
  }
}

/* Yard lines every five yards, with hash marks along the top and bottom edges. */
.turf--lined {
  --yard: 1.2rem;
  --stripe: rgb(243 241 231 / 0.09);
  --hash: rgb(243 241 231 / 0.22);
  background-image:
    repeating-linear-gradient(90deg, var(--hash) 0 2px, transparent 2px var(--yard)),
    repeating-linear-gradient(90deg, var(--hash) 0 2px, transparent 2px var(--yard)),
    repeating-linear-gradient(90deg, var(--stripe) 0 2px, transparent 2px calc(var(--yard) * 5));
  background-size:
    100% 0.5rem,
    100% 0.5rem,
    100% 100%;
  background-position:
    0 0.75rem,
    0 calc(100% - 0.75rem),
    0 0;
  background-repeat: no-repeat;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 56rem) {
  .hero {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  }
}

.hero h1 {
  margin: 0 0 var(--space-4);
  font-size: clamp(3.5rem, 20vw, 10rem);
  line-height: 0.82;
  letter-spacing: -0.01em;
}

.hero__tagline {
  margin: 0 0 var(--space-3);
  font: 700 var(--step-1) / 1.15 var(--font-display);
  color: var(--flag);
  text-wrap: balance;
}

.hero__lede {
  max-width: 34rem;
  font-size: var(--step-0);
  line-height: 1.45;
}

@media (min-width: 40rem) {
  .hero__tagline {
    font-size: var(--step-2);
  }

  .hero__lede {
    font-size: var(--step-1);
  }
}

.hero__note {
  color: var(--muted);
  font-size: var(--step--1);
}

.playbook {
  display: block;
  width: 100%;
  height: auto;
  max-height: 12rem;
  color: var(--chalk);
}

@media (min-width: 56rem) {
  .playbook {
    max-height: 24rem;
  }
}

.yard-numerals::before {
  content: attr(data-numerals);
  display: block;
  margin-bottom: var(--space-5);
  font: 700 clamp(5rem, 22vw, 12rem) / 0.8 var(--font-display);
  letter-spacing: 0.12em;
  color: transparent;
  -webkit-text-stroke: 2px rgb(243 241 231 / 0.55);
}

.claims > * + * {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

.claims p {
  margin: 0;
  color: var(--muted);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-5);
  border: 2px solid transparent;
  border-radius: var(--radius-control);
  font: 700 var(--step-1) / 1.1 var(--font-display);
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.btn:active {
  transform: translateY(1px);
}

/* On a phone a form's own button, and the hero's, fill the width: easy to hit one-handed. */
form > .btn,
.hero .btn {
  width: 100%;
}

@media (min-width: 40rem) {
  form > .btn,
  .hero .btn {
    width: auto;
  }
}

.btn--primary {
  background: var(--flag);
  border-color: var(--btn-primary-edge);
  color: var(--flag-ink);
}

.btn--primary:hover {
  background: var(--flag-pressed);
}

.btn--secondary {
  background: transparent;
  border-color: currentColor;
  color: var(--ink);
}

.btn--secondary:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

.btn--danger {
  background: var(--danger-fill);
  border-color: var(--danger-fill);
  color: #ffffff;
}

.btn--danger:hover {
  background: #8f1d16;
  border-color: #8f1d16;
}

/* ---------- Form field ---------- */

.field {
  display: grid;
  gap: var(--space-2);
  max-width: 26rem;
}

.field > * {
  margin: 0;
}

/* A field that fills its column, for a message box. */
.field--wide {
  max-width: none;
}

textarea.field__input {
  display: block;
  resize: vertical;
}

.field__label {
  font-weight: 700;
}

.field__input {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--control-edge);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

.field__input[aria-invalid="true"] {
  border-color: var(--danger);
}

.field__hint {
  color: var(--muted);
  font-size: var(--step--1);
}

.field__error {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  color: var(--danger);
  font-weight: 700;
}

/* A thrown flag: a small tilted square. */
.field__error::before {
  content: "";
  flex: none;
  width: 0.7em;
  height: 0.7em;
  background: currentColor;
  transform: rotate(45deg);
}

/* ---------- Choices: radio buttons and tick boxes ---------- */

.choice {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.choice__option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.75rem;
}

.choice__option > input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--link);
}

/* ---------- Card ---------- */

.card {
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--surface);
}

.card > :last-child {
  margin-bottom: 0;
}

.card > summary {
  padding-block: 0.65rem;
  cursor: pointer;
}

@media (min-width: 40rem) {
  .card {
    padding: var(--space-5);
  }
}

.card__title {
  font-size: var(--step-2);
}

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

/* A box that scrolls sideways shows a shadow on each edge that has more beyond it. */
.table-wrap,
.msg__body pre,
.msg__body table {
  --edge: var(--surface);
  background:
    linear-gradient(to right, var(--edge) 30%, transparent) 0 0 / 2rem 100% no-repeat local,
    linear-gradient(to left, var(--edge) 30%, transparent) 100% 0 / 2rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / 0.3), transparent) 0 0 / 0.75rem 100%
      no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / 0.3), transparent) 100% 0 / 0.75rem
      100% no-repeat scroll;
  background-color: var(--edge);
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}

.data-table caption {
  padding: var(--space-3) var(--space-4);
  color: var(--muted);
  text-align: left;
  caption-side: bottom;
  border-top: 1px solid var(--line);
}

.data-table th,
.data-table td {
  padding: var(--space-2) clamp(var(--space-3), 2.5vw, var(--space-4));
  text-align: left;
  vertical-align: baseline;
  white-space: nowrap;
}

.data-table thead th {
  white-space: normal;
  vertical-align: bottom;
  border-bottom: 2px solid var(--ink);
  font: 700 var(--step-0) / 1.2 var(--font-display);
  letter-spacing: 0.03em;
}

.data-table tbody th {
  font-weight: 600;
}

.data-table tbody tr + tr > * {
  border-top: 1px solid var(--line);
}

.data-table .num {
  text-align: right;
}

/* ---------- Latency ---------- */

.metric--slow {
  color: var(--danger);
  font-weight: 700;
}

.spark {
  display: block;
  width: 12rem;
  height: 1.5rem;
}

.spark__bar {
  fill: var(--control-edge);
}

.spark__bar--slow {
  fill: var(--danger);
}

/* ---------- Odds chip ---------- */

.chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  padding: 0.12em 0.5em 0.16em;
  border: 1px solid var(--board-edge);
  border-radius: var(--radius-tile);
  background: var(--board);
  color: var(--board-digit);
  font: 700 1.125em / 1.2 var(--font-display);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.chip__side {
  color: var(--chalk);
}

/* ---------- Result badges ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.1em 0.6em 0.14em;
  border-radius: var(--radius-tile);
  font: 700 var(--step-0) / 1.3 var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  background: currentColor;
}

.badge--win {
  background: var(--win-bg);
  color: var(--win-ink);
}

.badge--win::before {
  border-radius: 50%;
}

.badge--loss {
  background: var(--loss-bg);
  color: var(--loss-ink);
}

.badge--loss::before {
  transform: rotate(45deg);
}

.badge--push {
  background: var(--push-bg);
  color: var(--push-ink);
}

.badge--push::before {
  height: 0.18em;
}

.badge--pending {
  background: var(--pending-bg);
  color: var(--pending-ink);
}

.badge--pending::before {
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 0.12em currentColor;
}

.badge--new {
  margin-left: var(--space-2);
  background: var(--pending-bg);
  color: var(--pending-ink);
}

.badge--new::before {
  border-radius: 50%;
}

/* ---------- Chat ---------- */

.thread {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.msg {
  max-width: min(100%, 40rem);
  padding: var(--space-3) var(--space-4) var(--space-3);
  overflow-wrap: anywhere;
  scroll-margin-bottom: 9rem;
}

.msg > :last-child,
.msg__body > :last-child {
  margin-bottom: 0;
}

.msg__who {
  margin: 0 0 var(--space-1);
  font: 700 var(--step-0) / 1.2 var(--font-display);
  letter-spacing: 0.04em;
}

.msg--user {
  align-self: flex-end;
  margin-left: var(--space-5);
  border-radius: var(--radius-bubble) var(--radius-bubble) var(--radius-tile) var(--radius-bubble);
  background: var(--scrimmage);
  color: #ffffff;
}

.msg--analyst {
  align-self: flex-start;
  margin-right: var(--space-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--flag);
  border-radius: var(--radius-tile) var(--radius-bubble) var(--radius-bubble) var(--radius-tile);
  background: var(--surface);
  color: var(--ink);
}

.msg--analyst .msg__who {
  color: var(--muted);
}

/* chatBTB's own notice, such as a game being called off: full width, square, with the
   info edge (blue in both schemes, where replies have the yellow flag), so it never reads
   as one of the analyst's replies. */
.msg--notice {
  align-self: stretch;
  border: 1px solid var(--line);
  border-left: 4px solid var(--info-edge);
  border-radius: var(--radius-control);
  background: var(--surface-sunk);
  color: var(--ink);
}

.msg--notice .msg__who {
  color: var(--muted);
  text-transform: uppercase;
}

.msg--streaming .msg__body > :last-child::after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 1em;
  margin-left: 0.15em;
  vertical-align: text-bottom;
  background: var(--flag);
  animation: caret 1s steps(2, jump-none) infinite;
}

@keyframes caret {
  to {
    opacity: 0.15;
  }
}

/* Text shown exactly as it was typed or as it arrives, line breaks included. */
.msg__text {
  margin: 0;
  white-space: pre-wrap;
}

/* The line under a reply in progress, and its Stop button. */
.msg__status {
  margin: var(--space-3) 0;
  color: var(--muted);
  font-size: var(--step--1);
}

/* While a reply is in progress a dot before its status line pulses, so the page reads as
   working from the moment the question is sent. Only the dot fades: the text keeps its
   contrast. */
.msg--streaming .msg__status::before {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-inline-end: 0.5em;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 0.1em;
  content: "";
  animation: status-pulse 1.2s ease-in-out infinite;
}

@keyframes status-pulse {
  50% {
    opacity: 0.2;
  }
}

/* Wide things a reply was written with scroll inside the message. */
.msg__body pre,
.msg__body table {
  display: block;
  max-width: 100%;
  margin-block: var(--space-3);
  overflow-x: auto;
}

.msg__body pre {
  --edge: var(--surface-sunk);
  padding: var(--space-3);
  border-radius: var(--radius-control);
}

.msg__body th,
.msg__body td {
  padding: var(--space-1) var(--space-4) var(--space-1) 0;
  overflow-wrap: normal;
  text-align: left;
}

/* A column is never narrower than its heading; a table too wide for that scrolls. */
.msg__body th {
  white-space: nowrap;
}

/* Columns a reply's table aligns; the renderer names the alignment with a class. */
.msg__body .align-center {
  text-align: center;
}

.msg__body .align-right {
  text-align: right;
}

.msg > .notice {
  margin-top: var(--space-3);
}

/* A quiet link under a finished reply. */
.msg__action {
  margin: var(--space-3) 0 0;
  font-size: var(--step--1);
}

.msg__action > a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--muted);
}

/* A page heading that is a sentence someone typed, not a short name. */
.heading-long {
  font-size: var(--step-2);
}

@media (min-width: 40rem) {
  .heading-long {
    font-size: var(--step-3);
  }
}

/* The reply box on a conversation page. On a phone it sticks to the bottom of the screen
   with the send button beside it; wider screens put the button below. */
.composer {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: end;
  margin-left: calc(-1 * max(var(--gutter), env(safe-area-inset-left)));
  margin-right: calc(-1 * max(var(--gutter), env(safe-area-inset-right)));
  padding: var(--space-2) max(var(--gutter), env(safe-area-inset-right))
    max(var(--space-2), env(safe-area-inset-bottom))
    max(var(--gutter), env(safe-area-inset-left));
  border-top: 1px solid var(--line);
  background: var(--bg);
}

.composer > .notice {
  grid-column: 1 / -1;
}

.composer .field__input {
  max-height: 40dvh;
  resize: none;
}

.composer .btn {
  min-width: 5rem;
  padding-inline: var(--space-4);
}

.composer .field__hint {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (min-width: 40rem) {
  .composer {
    margin-inline: 0;
    padding-inline: 0;
  }

  .composer .field__hint {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    clip-path: none;
    white-space: normal;
  }
}

/* ---------- Link list ---------- */

.link-list {
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--surface);
  list-style: none;
}

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

.link-list a {
  display: flex;
  align-items: center;
  min-height: 3.25rem;
  padding: var(--space-3) var(--space-4);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.link-list a:hover {
  box-shadow: inset 4px 0 0 var(--flag);
}

/* ---------- Report link: throw a flag on something that is wrong ---------- */

.report-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: var(--space-1) var(--space-4);
  border: 1px solid var(--control-edge);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}

.report-link::before {
  content: "";
  flex: none;
  width: 0.7em;
  height: 0.7em;
  border: 1px solid var(--btn-primary-edge);
  background: var(--flag);
  transform: rotate(45deg);
}

.report-link:hover {
  border-color: var(--ink);
  text-decoration: underline;
}

/* ---------- Notice ---------- */

.notice {
  --notice-edge: var(--info-edge);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-left: 4px solid var(--notice-edge);
  border-radius: var(--radius-control);
  background: var(--surface);
}

.notice > :last-child {
  margin-bottom: 0;
}

.notice__title {
  margin: 0 0 var(--space-1);
  font: 700 var(--step-1) / 1.2 var(--font-display);
}

.notice--success {
  --notice-edge: var(--success-edge);
}

.notice--warning {
  --notice-edge: var(--warning-edge);
}

.notice--error {
  --notice-edge: var(--danger);
}

/* ---------- Loading skeleton ---------- */

.skeleton {
  display: block;
  border-radius: var(--radius-control);
  background: linear-gradient(100deg, var(--line) 40%, var(--surface-sunk) 50%, var(--line) 60%) 0 0 /
    300% 100%;
  animation: skeleton-sweep 1.6s linear infinite;
}

.skeleton--line {
  height: 0.9em;
  margin-block: 0.45em;
}

.skeleton--block {
  height: 6rem;
}

@keyframes skeleton-sweep {
  from {
    background-position: 100% 0;
  }

  to {
    background-position: 0 0;
  }
}

/* ---------- Stoppage: error and message pages ---------- */

.stoppage {
  max-width: 38rem;
}

.stoppage::before {
  content: "";
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0 0 var(--space-5) 0.3rem;
  background: var(--flag);
  box-shadow: 0 0 0 2px var(--btn-primary-edge);
  transform: rotate(45deg);
}

.stoppage h1 {
  font-size: clamp(var(--step-4), 9vw, var(--step-5));
}

.stoppage p {
  font-size: var(--step-0);
  line-height: 1.45;
}

@media (min-width: 40rem) {
  .stoppage p {
    font-size: var(--step-1);
  }
}

/* ---------- Example marker ---------- */

.example-tag {
  display: inline-block;
  padding: 0.05em 0.5em;
  border: 1px dashed var(--control-edge);
  border-radius: var(--radius-tile);
  color: var(--muted);
  font-size: var(--step--1);
}

/* ---------- Styleguide page ---------- */

.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--space-4);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.swatch__chip {
  display: block;
  height: 3.5rem;
  margin-bottom: var(--space-2);
  border: 1px solid var(--control-edge);
  border-radius: var(--radius-control);
}

.specimen {
  margin-top: var(--space-7);
}

.specimen > h2 {
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .msg--streaming .msg__status::before,
  .skeleton,
  .msg--streaming .msg__body > :last-child::after {
    animation: none;
  }

  .btn:active {
    transform: none;
  }
}

/* ---------- Styleguide page only ---------- */

.type-5,
.type-3,
.type-2,
.type-1 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
}

.type-5 {
  font-size: var(--step-5);
}

.type-3 {
  font-size: var(--step-3);
}

.type-2 {
  font-size: var(--step-2);
}

.type-1 {
  font-size: var(--step-1);
}

.skeleton--short {
  width: 60%;
}

.sw-turf {
  background: var(--turf);
}

.sw-chalk {
  background: var(--chalk);
}

.sw-flag {
  background: var(--flag);
}

.sw-scrimmage {
  background: var(--scrimmage);
}

.sw-board {
  background: var(--board);
}

.sw-bg {
  background: var(--bg);
}

.sw-surface {
  background: var(--surface);
}

.sw-ink {
  background: var(--ink);
}

.sw-muted {
  background: var(--muted);
}

.sw-line {
  background: var(--line);
}

.sw-link {
  background: var(--link);
}

.sw-danger {
  background: var(--danger);
}

/* ---------- Board: posts, votes and comments ---------- */

.post-list,
.comments {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.post,
.comment {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
}

.post {
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--surface);
}

.post__title {
  margin: 0;
  font-size: var(--step-2);
}

.post__title > a {
  color: var(--ink);
  text-decoration: none;
}

.post__title > a:hover {
  text-decoration: underline;
}

.post__meta {
  margin: var(--space-1) 0 0;
  color: var(--muted);
  font-size: var(--step--1);
  overflow-wrap: anywhere;
}

.byline {
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}

a.byline:hover {
  text-decoration: underline;
}

.pick {
  margin-top: var(--space-2);
}

.pick > p {
  margin: 0;
}

/* What a user wrote: shown as typed, line breaks included. */
.user-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.vote,
.vote__form {
  display: grid;
  justify-items: center;
  align-content: start;
}

.vote {
  min-width: 2.75rem;
}

.vote__btn {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}

.vote__btn:hover {
  border-color: var(--control-edge);
  color: var(--ink);
}

.vote__btn[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bg);
}

.vote__score {
  font: 700 var(--step-1) / 1.2 var(--font-display);
  font-variant-numeric: tabular-nums;
}

.vote__note {
  max-width: 11rem;
  margin: var(--space-2) 0 0;
  color: var(--danger);
  font-size: var(--step--1);
  font-weight: 700;
}

.vote__note[hidden] {
  display: none;
}

.comment {
  --indent: clamp(0.75rem, 3vw, 1.5rem);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.comment--d1 {
  margin-inline-start: var(--indent);
}

.comment--d2 {
  margin-inline-start: calc(2 * var(--indent));
}

.comment--d3 {
  margin-inline-start: calc(3 * var(--indent));
}

.comment--d4 {
  margin-inline-start: calc(4 * var(--indent));
}

.comment--d5 {
  margin-inline-start: calc(5 * var(--indent));
}

.comment--d6 {
  margin-inline-start: calc(6 * var(--indent));
}

.comment--d7 {
  margin-inline-start: calc(7 * var(--indent));
}

.comment > .stack {
  --stack-gap: var(--space-2);
}

.post summary,
.comment summary {
  width: fit-content;
  padding-block: var(--space-2);
  color: var(--link);
  cursor: pointer;
}

.badge--ai {
  background: var(--push-bg);
  color: var(--push-ink);
  font-size: var(--step--1);
}

/* Every disclosure is a touch target, including the chat data explanation. */
summary {
  min-height: 2.75rem;
  padding-block: var(--space-2);
}

.site-update {
  padding-block: 0.5rem;
  font-size: 0.9rem;
}
.site-update p {
  margin: 0;
}
[data-report-notice] {
  padding-block: 0.5rem;
  font-size: 0.9rem;
}
[data-report-notice][hidden], [data-report-count][hidden] {
  display: none;
}