/*
 * The static pages only: the parts of the public site that the front page
 * does not use (the path from the front page, a page's heading, the
 * comparison tables, the price, the features page, the mixed games page, the
 * poker variants, the guides, the money page, What's New and the payout
 * calculator). UI-01.
 *
 * The app never imports this file, so it is not in the app's stylesheet:
 * scripts/prerender-site.mjs copies it into dist/assets under a name made
 * from its content, and every static page links it after the app's
 * stylesheet. It is copied as written, so it keeps to plain CSS: no nesting
 * and nothing a browser of 2023 cannot read. site.css has the rest.
 */

/* The path to this page, under the bar. */
.site-crumbs { margin: 0; padding: 18px 0 0; font-size: 14px; }
.site-crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 0; list-style: none; color: var(--ink-soft); }
.site-crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.site-crumbs li + li::before { content: '›'; color: var(--line-strong); }
.site-crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-soft); }
.site-crumbs [aria-current="page"] { color: var(--ink); }

/* The first section of a page under the bar. */
.site-page-head {
  padding: 0 0 clamp(28px, 4vw, 48px);
  background: radial-gradient(ellipse 70% 80% at 10% 0%, rgba(52, 178, 124, 0.13), transparent 70%);
}
.site-page-head h1 { max-width: 22ch; }
.site-page-head .site-lede { max-width: 62ch; }
.site-page-eyebrow { margin-top: clamp(16px, 3vw, 32px); }
.site-crumbs + h1 { margin-top: clamp(16px, 3vw, 32px); }

/* A heading inside a tile, smaller than a section's. */
.site h2.site-tile-title { font-size: clamp(20px, 2.2vw, 24px); margin-bottom: 12px; }
.site-tile .site-ticks { margin-top: 12px; }

/* For a screen reader only. */
.site-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* The price, on the pricing page. */
.site-price-card {
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid rgba(52, 178, 124, 0.4);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(52, 178, 124, 0.12), var(--card));
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
}
.site-price-label { margin: 0; color: var(--accent); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.site-price-amount { margin: 4px 0 6px; font-size: clamp(44px, 6vw, 64px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.site-price-card .site-ticks { margin: 20px 0 0; }

/* A comparison: the topic, PokerSjef, the other product. */
.site-compare thead th:nth-child(2) { color: var(--accent); }
.site-compare tbody th { width: 24%; }
.site-compare td { width: 38%; }
.site-source-ref { font-size: 12px; white-space: nowrap; }
.site-sources { font-size: 15px; }
.site-sources li { overflow-wrap: anywhere; }

/* A comparison or an example table. It scrolls inside its box on a narrow phone, never the page. */
.site-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.site-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.site-table th, .site-table td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.site-table tr:last-child th, .site-table tr:last-child td { border-bottom: 0; }
.site-table thead th { color: var(--ink-soft); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; background: var(--card-raised); }
.site-table tbody th { color: var(--ink); font-weight: 600; min-width: 140px; }
.site-table td { color: var(--ink-soft); min-width: 150px; }
.site-table td strong { color: var(--ink); }
.site-table .site-us { color: var(--ink); background: rgba(52, 178, 124, 0.06); }
@media (max-width: 640px) {
  .site-table { font-size: 14px; }
  .site-table th, .site-table td { padding: 10px; }
  .site-table tbody th { min-width: 110px; }
  .site-table td { min-width: 130px; }
}

/* A second heading in running text keeps its distance from the text above it. */
.site-prose h2:not(:first-child) { margin-top: 36px; }

/* The parts of a long page, as chips under its heading. */
.site-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
.site-chips a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-size: 14px;
  text-decoration: none;
}
.site-chips a:hover { border-color: var(--accent); color: var(--accent); }

/* The three kinds of prize, on the features page. */
.site-kinds { display: grid; gap: 12px; }
.site-kind { padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.site-kind:first-child { border-color: rgba(52, 178, 124, 0.45); background: linear-gradient(180deg, rgba(52, 178, 124, 0.1), var(--card)); }
.site-kind h3 { margin: 0 0 4px; }
.site-kind p { margin: 0; color: var(--ink-soft); }

/* The five roles, from the most rights to the fewest. */
.site-roles { display: grid; gap: 10px; margin: 0; }
.site-roles > div { padding: 14px 18px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 0 12px 12px 0; background: var(--card); }
.site-roles dt { font-weight: 700; color: var(--ink); }
.site-roles dd { margin: 4px 0 0; color: var(--ink-soft); }

/* The games of a mix, each a link to its rules. */
.site-mix { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.site-mix a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink);
  font-size: 13px;
  text-decoration: none;
}
.site-mix a:hover { border-color: var(--accent); color: var(--accent); }

.site-wide-shot { max-width: 920px; margin: clamp(32px, 5vw, 56px) auto 0; }
.site-after-steps { margin-top: 18px; }

/* A list of ticks that may run wide, such as where the data is. */
.site-ticks-wide { max-width: 860px; margin-top: 8px; }

/* The poker variants: a card for each game on the hub, the app's guide on a game's page. */
.site-variant-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 44px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
}
.site-variant-card:hover { border-color: var(--accent); }
.site-variant-name { color: var(--ink); font-size: 17px; font-weight: 700; }
.site-variant-what { color: var(--ink-soft); font-size: 14px; }
.site-guide-section { padding-top: clamp(8px, 2vw, 24px); }
.site-guide { max-width: 860px; }
.site-guide .guide { font-size: 16px; }
.site-guide .guide section { margin-top: 32px; }
.site-guide .guide h3 { font-size: 22px; margin-bottom: 10px; }
.site-guide-limits { margin-top: 40px; }
.site-guide-limits h2 { font-size: 22px; }
.site-guide-lines { padding: 10px 16px 12px 36px; }

/* On a phone a comparison is a card for each topic: the topic, then each product with its name. */
@media (max-width: 640px) {
  .site-compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .site-compare, .site-compare tbody, .site-compare tr, .site-compare th, .site-compare td { display: block; width: auto; min-width: 0; }
  .site-compare tr { padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .site-compare tr:last-child { border-bottom: 0; }
  .site-compare tbody th { padding: 0 0 8px; border: 0; width: auto; min-width: 0; }
  .site-compare td { padding: 6px 0; border: 0; width: auto; }
  .site-compare td::before {
    content: attr(data-label);
    display: block;
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .site-compare td.site-us { background: none; color: var(--ink); }
  .site-compare td.site-us::before { color: var(--accent); }
}

/* A link under a part of the features page, to its guide or its page. */
.site-part-more { margin: 18px 0 0; }
.site-part-more a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* The links to the pages beside this one, at the end of a page. */
.site-more { margin-top: 8px; }

/* A guide: the words in one column, or beside a picture. */
.site-guide-single { max-width: 860px; }
.site-guide-words .site-steps,
.site-guide-words .site-ticks { margin-top: 8px; }
.site-guide-paragraph { max-width: 70ch; margin: 18px 0 0; color: var(--ink-soft); }
.site-guide-note { margin-top: 20px; max-width: 70ch; }

/* The example of the payouts, on the money page: worked out by the payout rules. */
.site-payout-example { margin: 0; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.site-payout-example figcaption { display: grid; gap: 4px; margin-bottom: 14px; }
.site-payout-example figcaption strong { font-size: 17px; }
.site-payout-example figcaption span { color: var(--ink-soft); font-size: 14px; }
.site-payout-example .site-table td,
.site-payout-example .site-table th { font-variant-numeric: tabular-nums; }
.site-payout-example .site-table td { min-width: 0; }
.site-payout-example .site-table tbody th { min-width: 0; }
.site-table tfoot th, .site-table tfoot td { border-top: 1px solid var(--line-strong); border-bottom: 0; }

/* What's New: each version with its day, then its lines. The lines are the changelog's own. */
.site-release-facts { margin: 18px 0 0; }
.site-releases { display: grid; gap: 20px; max-width: 900px; }
.site-release { padding: 20px 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.site-release-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 10px; }
.site .site-release-head h3 { margin: 0; font-size: 20px; }
.site-release-head time { color: var(--ink-soft); font-size: 14px; font-variant-numeric: tabular-nums; }
.site-release-summary { margin: 0 0 12px; color: var(--ink); }
.site-release-part h4 { margin: 16px 0 6px; color: var(--accent); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.site-release-list { margin: 0; padding-left: 20px; color: var(--ink-soft); }
.site-release-list li { margin-bottom: 8px; overflow-wrap: anywhere; }
.site-release-list li:last-child { margin-bottom: 0; }
.site-release-list ul { margin: 8px 0 0; padding-left: 20px; }
.site-release-list code { padding: 1px 5px; border-radius: 4px; background: var(--card-raised); font-size: 0.92em; }
@media (max-width: 640px) {
  .site-release { padding: 16px; }
}

/* The payout calculator: the figures of the event beside the prizes. Every field and choice is at least 44 pixels tall. */
.site-calculator { align-items: start; }
.site-calculator-form { display: grid; gap: 16px; padding: clamp(18px, 3vw, 24px); border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.site-calculator-form h2 { margin: 0; }
.site-calculator-fields { display: grid; gap: 12px 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.site-calculator-fields label { display: grid; gap: 6px; color: var(--ink-soft); font-size: 14px; font-weight: 600; }
.site-calculator input[type="text"],
.site-calculator select { width: 100%; min-height: 44px; padding: 8px 12px; color: var(--ink); font-size: 16px; }
.site-calculator input[aria-invalid="true"] { border-color: var(--danger); background: var(--danger-soft); }
.site-calculator-places { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.site-calculator-places legend { margin-bottom: 6px; padding: 0; color: var(--ink-soft); font-size: 14px; font-weight: 600; }
.site-calculator-choice { display: grid; grid-template-columns: minmax(0, 1fr) minmax(80px, 120px); align-items: center; gap: 12px; }
.site-calculator-radio { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); cursor: pointer; }
.site-calculator-radio input { flex: none; width: 20px; height: 20px; margin: 0; }
.site-calculator-note { margin: 0; color: var(--ink-soft); font-size: 14px; }
.site-calculator-summary { margin: 0 0 12px; color: var(--ink); font-weight: 600; }
.site-calculator-problems { margin: 0; padding: 14px 16px 14px 34px; border: 1px solid var(--danger); border-radius: 12px; background: var(--danger-soft); color: var(--ink); }
.site-calculator-problems li + li { margin-top: 6px; }
.site-calculator-table th, .site-calculator-table td { font-variant-numeric: tabular-nums; }
.site-calculator-table td, .site-calculator-table tbody th { min-width: 0; }
.site-calculator-result .site-table-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.site-calculator-result + .site-table-note { margin-top: 14px; }

/* UI-01, UI-04. Large text and zoom (Francois, 16 October 2026; the
   max-width: 339px block at the end of styles.css explains it): each way to
   choose the paid places puts its field under its words, not over them. */
@media (max-width: 339px) {
  .site-calculator-choice { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .site-calculator-choice input[type="text"] { min-width: 0; }
}

/* The guide to simple and dedicated tables: its drawn figures (TablesExamples.tsx). EVT-03, SEAT-01. */
.site-room, .site-screen-part, .site-timeline {
  margin: 0; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--card);
}
.site-room-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.site-room-box { display: grid; gap: 10px; align-content: start; padding: 14px; border: 1px dashed var(--line-strong); border-radius: 12px; }
.site-room-box strong { font-size: 15px; }
.site-room-tables { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.site-room-table {
  display: flex; align-items: center; justify-content: center; min-height: 40px; border-radius: 999px;
  border: 2px solid var(--line-strong); font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums;
}
.site-room-table.holdem { border-color: var(--accent); background: var(--accent-soft); }
.site-room-table.mix { border-color: var(--warn); background: var(--warn-soft); }
.site-room-table.free { border-style: dashed; color: var(--ink-soft); }
.site-room-table.clash { box-shadow: 0 0 0 3px var(--danger); }
.site-room-warn, .site-room-ok { margin: 0; font-size: 14px; }
.site-room-warn { color: var(--danger); font-weight: 600; }
.site-room-ok { color: var(--accent); font-weight: 600; }
.site-room-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 13px; color: var(--ink-soft); }
.site-room-key span { display: inline-flex; align-items: center; gap: 6px; }
.site-room-key span::before { content: ''; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-strong); }
.site-room-key .holdem::before { border-color: var(--accent); background: var(--accent-soft); }
.site-room-key .mix::before { border-color: var(--warn); background: var(--warn-soft); }
.site-room-key .free::before { border-style: dashed; }
.site-screen-part { display: grid; gap: 12px; }
.site-screen-head { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.site-choice-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.site-choice { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 12px; font-size: 14px; }
.site-choice span { color: var(--ink-soft); font-size: 13px; }
.site-choice.chosen { border-color: var(--accent); background: var(--accent-soft); }
.site-mock-field { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 14px; }
.site-mock-field > span:first-child { color: var(--ink-soft); min-width: 100%; }
.site-mock-input { min-width: 110px; padding: 8px 12px; border: 1px solid var(--field-edge); border-radius: 8px; background: var(--field); font-weight: 600; }
.site-mock-value { font-weight: 700; }
.site-mock-button { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 8px; font-weight: 600; font-size: 14px; }
.site-mock-button.primary { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.site-mock-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.site-picker { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.site-picker li {
  display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 48px; border: 1px solid var(--line-strong);
  border-radius: 10px; font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums;
}
.site-picker li.chosen { border: 2px solid var(--accent); background: var(--accent-soft); }
.site-picker li.locked { color: var(--ink-soft); opacity: 0.7; background: var(--page); }
.site-picker li svg { width: 14px; height: 14px; }
.site-picker-holds { margin: 0; font-size: 13px; color: var(--ink-soft); }
@media (max-width: 420px) {
  .site-picker { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.site-timeline { display: grid; gap: 12px; }
.site-time-row { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 10px; }
.site-time-tables { font-size: 13px; font-weight: 700; }
.site-time-track { position: relative; height: 40px; border-radius: 8px; background: var(--page); }
.site-time-bar { position: absolute; top: 4px; bottom: 4px; display: flex; align-items: center; overflow: hidden; border-radius: 6px; background: var(--accent-deep); }
.site-time-bar.mix { background: color-mix(in srgb, var(--warn) 70%, var(--page)); }
.site-time-checkin {
  position: absolute; left: 0; top: 0; bottom: 0; border-right: 1px solid rgb(255 255 255 / 0.5);
  background: repeating-linear-gradient(135deg, rgb(255 255 255 / 0.3) 0 5px, rgb(255 255 255 / 0.12) 5px 10px);
}
.site-time-label { position: relative; padding: 0 8px 0 10px; font-size: 12px; font-weight: 700; white-space: nowrap; color: #fff; }
.site-time-axis { position: relative; height: 18px; margin-left: 86px; font-size: 11px; color: var(--ink-soft); }
.site-time-axis span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.site-time-axis span:first-child { transform: none; }
.site-time-axis span:last-child { transform: translateX(-100%); }
@media (max-width: 560px) {
  .site-time-axis span:nth-child(even) { display: none; }
  .site-time-label { font-size: 11px; padding-left: 6px; }
}

/* The guide to the public pages: its drawn figures (PublicPagesExamples.tsx). LEAG-05, SNG-11, EVT-01. */
.site-public-club { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.site-public-title { margin: -8px 0 0; font-size: 20px; font-weight: 800; }
.site-public-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.site-public-table th { padding: 6px 8px; text-align: left; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.site-public-table td { padding: 8px; border-bottom: 1px solid var(--line); }
.site-public-table tr:last-child td { border-bottom: 0; }
.site-public-table .num { text-align: right; }
.site-public-table .hidden-name { color: var(--ink-soft); font-style: italic; }
.site-mock-button.chosen { background: var(--accent-soft); border-color: var(--accent); }
.site-mock-gap { width: 8px; }
.site-mock-label { margin: 0; font-size: 13px; font-weight: 700; }
.site-mock-code {
  margin: 0; padding: 10px 12px; border: 1px solid var(--field-edge); border-radius: 8px; background: var(--field);
  font-size: 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-soft);
}
.site-mock-link { flex: 1 1 200px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; color: var(--ink-soft); }

/* The guide to join codes: its drawn figures (JoinCodeExamples.tsx). REG-01, EVT-01. */
.site-mock-text { margin: 0; font-size: 14px; color: var(--ink-soft); }
.site-mock-hint { min-width: 100%; font-size: 13px; color: var(--ink-soft); }
.site-mock-wide { flex: 1 1 200px; }
.site-mock-switch-line, .site-mock-tick-line { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; font-weight: 600; }
.site-mock-switch { position: relative; flex: none; width: 40px; height: 24px; border-radius: 999px; background: var(--line-strong); }
.site-mock-switch span { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; }
.site-mock-switch.on { background: var(--accent-deep); }
.site-mock-switch.on span { left: 19px; }
.site-mock-tick { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 5px; background: var(--accent-deep); color: #fff; }
.site-mock-window { box-shadow: 0 12px 32px rgb(0 0 0 / 0.14); }
.site-mock-window-title { margin: 0; font-size: 18px; font-weight: 800; }
.site-ways-table td:last-child { white-space: nowrap; }
.site-ways-table td span { margin-left: 6px; }
.site-ways-table svg { vertical-align: -2px; }
.site-ways-needed { color: var(--warn); font-weight: 700; }
.site-ways-free { color: var(--accent); font-weight: 700; }

/* The OFC points calculator (MIX-05): its helper has its own stylesheet
   (components/ofcHelper.css), and the tables of royalties sit side by side
   under it. */
.ofc-royalties { display: grid; gap: 8px 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); align-items: start; margin: 12px 0; }
.ofc-rules { max-width: 420px; margin: 12px 0; }
.ofc-royalties .ofc-rules { margin: 0; }
.ofc-rules caption { padding: 0 0 6px; color: var(--ink); font-weight: 650; text-align: left; }
.ofc-rules tbody td { color: var(--ink); }

/* ------------------------------------------------------------------ */
/* The deal calculator (/deal-calculator/). Its own rules go here only. */
/* ------------------------------------------------------------------ */
/* PAY-06, UI-01. The form above the result: the table of three deals needs
   the width. The players and the prizes sit side by side where they fit.
   Every field and button is at least 44 pixels tall; the table scrolls in
   its own box on a phone, with the names kept at its left edge. */
.deal-tool { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 40px); }
.deal-tool > * { min-width: 0; }
.deal-columns { display: grid; gap: 24px 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: start; }
.deal-set { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.deal-set legend { margin-bottom: 4px; padding: 0; color: var(--ink); font-size: 16px; font-weight: 700; }
.deal-players { display: grid; gap: 10px; }
.deal-player {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 8px 12px;
  padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card-raised);
}
.deal-player-title { grid-column: 1; grid-row: 1; align-self: center; min-height: 24px; color: var(--ink); font-weight: 700; }
.deal-tool .deal-remove { grid-column: 2; grid-row: 1; justify-self: end; min-height: 44px; padding: 8px 14px; }
.deal-field { display: grid; gap: 6px; min-width: 0; color: var(--ink-soft); font-size: 14px; font-weight: 600; }
.deal-prizes { display: grid; gap: 12px 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr)); }
.deal-tool .deal-add { justify-self: start; min-height: 44px; }
.deal-tool input[inputmode] { text-align: right; font-variant-numeric: tabular-nums; }
/* Safari draws a list at its own height and leaves out min-height: a set height keeps it at 44 pixels. */
.deal-tool select { height: 44px; }
/* Add a Player and Remove work only with the page's script, which marks the form ready. */
.deal-form:not([data-ready]) .deal-script-only { display: none; }
.deal-table th, .deal-table td { white-space: nowrap; }
.deal-table td, .deal-table thead th + th { text-align: right; }
.deal-table tbody th { min-width: 6em; max-width: 12em; white-space: normal; overflow-wrap: anywhere; }
.deal-table th[scope="row"], .deal-table thead th:first-child { position: sticky; left: 0; z-index: 1; }
.deal-table tbody th, .deal-table tfoot th { background: var(--card); }

/* ------------------------------------------------------------------ */
/* The blind structure calculator (/blind-structure-calculator/). Its own rules go here only. */
/* ------------------------------------------------------------------ */
.blinds-clock { display: grid; gap: 8px; justify-items: start; margin: 16px 0 0; }
.blinds-clock[hidden] { display: none; }
/* CLK-01, UI-01, UI-04. The form above the levels it makes. The fields
   and the ticks use the payout calculator's rules (.site-calculator-*),
   each at least 44 pixels tall. A tick or a choice shows its own fields
   through the form's data attributes, which the script sets. */
.blinds-tool { display: grid; gap: clamp(24px, 4vw, 40px); }
.blinds-group { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.blinds-group + .blinds-group { padding-top: 18px; border-top: 1px solid var(--line); }
.blinds-group > legend { margin: 0 0 12px; padding: 0; color: var(--ink); font-size: clamp(18px, 2vw, 20px); font-weight: 700; }
.blinds-form[data-point="true"] .blinds-for-blinds,
.blinds-form:not([data-point="true"]) .blinds-for-points,
.blinds-form:not([data-rebuys="true"]) .blinds-rebuy-fields,
.blinds-form:not([data-addon="true"]) .blinds-addon-fields,
.blinds-form:not([data-antes="true"]) .blinds-ante-level,
.blinds-form:not([data-chips="own"]) .blinds-own-chips { display: none; }

/* UI-04. WebKit draws a native list at its own height, under 44 pixels:
   the lists draw their own arrow, so they keep the height of the fields. */
.blinds-tool select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2394a39b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

/* The four structures as cards: the whole card chooses its structure. */
.blinds-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.blinds-card { position: relative; display: grid; gap: 4px; align-content: start; padding: 10px 16px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card-raised); }
.blinds-card label { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); cursor: pointer; }
.blinds-card label::after { content: ''; position: absolute; inset: 0; border-radius: 12px; }
.blinds-card input { position: relative; z-index: 1; flex: none; width: 20px; height: 20px; margin: 0; }
.blinds-card p { margin: 0; color: var(--ink-soft); font-size: 14px; }
.blinds-card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.blinds-card:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The big blind ante and the level it starts from, on one line when they fit. */
.blinds-antes { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.blinds-ante-level { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); font-size: 14px; font-weight: 600; }
.site-calculator .blinds-ante-level input { width: 96px; }

/* The plan in words, its notes, and the levels. The figures are right
   aligned with figures of one width; the table scrolls inside its box. */
.blinds-result-box { min-width: 0; }
.blinds-result .blinds-made { margin: 0 0 8px; color: var(--ink-soft); }
.blinds-result .blinds-plan { margin: 0 0 12px; color: var(--ink); }
.blinds-notes { margin: 0 0 16px; padding: 12px 16px 12px 34px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--card); color: var(--ink); }
.blinds-notes li + li { margin-top: 6px; }
.blinds-table th, .blinds-table td { text-align: right; font-variant-numeric: tabular-nums; }
.blinds-table td { white-space: nowrap; }
.blinds-table thead th:first-child, .blinds-table tbody th { text-align: left; }
.blinds-table tbody th { white-space: normal; }
.blinds-table .blinds-break td, .blinds-table .blinds-mark td { background: var(--card-raised); }
.blinds-table .blinds-break td:first-child, .blinds-table .blinds-mark td:first-child { text-align: left; white-space: normal; }
.blinds-table .blinds-closing, .blinds-table .blinds-close td { color: var(--accent); font-weight: 600; }
.blinds-table .blinds-finish td { color: var(--ink); font-weight: 650; }
.blinds-spare { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--card-raised); color: var(--ink-soft); font-size: 12px; font-weight: 600; }
.blinds-table .blinds-spare-row td { color: var(--ink-soft); }
/* MIX-06. A point game's price per point in the points orange, as the app shows it. */
.blinds-table .blinds-price { color: var(--points); }
.blinds-table td.blinds-price { font-weight: 650; }
/* UI-04. On a phone the whole table fits a screen of 375 pixels: smaller
   headings and cells, and the spare-level tag under its number. */
@media (max-width: 420px) {
  .blinds-table th, .blinds-table td { padding: 10px 6px; }
  .blinds-table thead th { font-size: 12px; letter-spacing: 0; }
  .blinds-spare { margin: 4px 0 0; }
}

/* ------------------------------------------------------------------ */
/* The chip distribution and colour-up calculators (/chip-distribution-calculator/, /colour-up-calculator/). Their own rules go here only. */
/* ------------------------------------------------------------------ */

/* CHIP-01. A chip as the app draws it (components/chips.css): a round
   swatch whose dashed ring is the edge spots. The value and the colour's
   name always stand beside it. */
.site-chip {
  flex: none; display: inline-block; width: 28px; height: 28px; border-radius: 50%;
  border: 3px dashed rgba(255, 255, 255, 0.72);
  box-shadow: 0 0 0 1px var(--line-strong), inset 0 0 0 2px rgba(0, 0, 0, 0.18);
  background: transparent;
}
.site-chip.small { width: 18px; height: 18px; border-width: 2px; }
.site-chip.none { border-color: var(--ink-soft); }
.site-chip-name { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.site-chip-colour { color: var(--ink-soft); font-size: 13px; font-weight: 400; }
.site-inline-chip { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; vertical-align: -4px; font-weight: 700; font-variant-numeric: tabular-nums; }
.site-chip-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; list-style: none; }
.site-chip-legend li { display: flex; align-items: center; min-height: 32px; font-variant-numeric: tabular-nums; }

/* The chip set editor (chips/ChipSetFields.tsx), on both pages. Each field
   and button is at least 44 pixels tall. */
.site-chip-set, .site-chip-group { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.site-chip-set legend, .site-chip-group legend { margin-bottom: 6px; padding: 0; color: var(--ink); font-size: 16px; font-weight: 700; }
.site-chip-start { display: grid; gap: 6px; color: var(--ink-soft); font-size: 14px; font-weight: 600; }
/* Safari draws a list at its own height and leaves out min-height: a set height keeps it at 44 pixels (as ofcHelper.css). */
.site-chip-start select { height: 44px; }
.site-chip-rows, .site-level-rows { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.site-chip-row { display: grid; grid-template-columns: 44px minmax(70px, 0.7fr) minmax(0, 1fr) 44px; align-items: center; gap: 8px; }
.site-chip-row-head, .site-level-head { align-items: end; color: var(--ink-soft); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; line-height: 1.25; text-transform: uppercase; }
.site-chip-row input[type="color"] { width: 44px; height: 44px; padding: 3px; cursor: pointer; }
.site-calculator .site-chip-row input[type="text"], .site-calculator .site-level-row input[type="text"] { min-width: 0; }
.site-chip-tool input[inputmode="numeric"] { text-align: right; font-variant-numeric: tabular-nums; }
.site-chip-remove { width: 44px; min-height: 44px; padding: 0; font-size: 20px; line-height: 1; }
.site-chip-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.site-chip-actions button { min-height: 44px; }

/* CLK-02. The levels of the colour-up calculator: the number, the small
   blind, the big blind, the ante and the break after the level. */
.site-level-row { display: grid; grid-template-columns: 40px repeat(3, minmax(0, 1fr)) 44px; align-items: center; gap: 6px; }
.site-level-head span:nth-child(n+2):nth-child(-n+4) { text-align: right; }
.site-level-head span:last-child { text-align: center; }
.site-level-number { padding-right: 4px; color: var(--ink-soft); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.site-calculator .site-level-row input[type="text"] { padding: 8px; }
.site-level-break { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; cursor: pointer; }
.site-level-break input { width: 22px; height: 22px; margin: 0; }
.site-chip-tool input[aria-invalid="true"] { border-color: var(--danger); background: var(--danger-soft); }

/* The results: each stack's chips, the field's table and the breaks. */
.site h3.site-chip-head { margin: 22px 0 10px; font-size: 17px; }
.site-calculator-result > .site-chip-head:first-child, .site-calculator-summary + .site-chip-head { margin-top: 0; }
.site-chip-breakdown { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none; }
.site-chip-breakdown li { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.site-chip-count { color: var(--ink); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.site-chip-total { margin: 10px 0 0; color: var(--ink-soft); font-size: 14px; font-variant-numeric: tabular-nums; }
.site-chip-warning { margin: 12px 0; padding: 12px 14px; border: 1px solid var(--warn); border-radius: 12px; background: var(--warn-soft); color: var(--ink); }
ul.site-chip-warning { padding-left: 32px; }
ul.site-chip-warning li + li { margin-top: 6px; }
.site-chip-note { margin: 16px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.9; }
.site-chip-table .site-num { text-align: right; }
.site-chip-table .site-chip-name > span { display: grid; line-height: 1.25; }
.site-chip-table tbody th, .site-chip-table tfoot th { font-variant-numeric: tabular-nums; }
.site-colour-breaks { display: grid; gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; }
.site-colour-break { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.site-colour-break.up { border-color: var(--warn); }
.site .site-colour-break h3.site-chip-head { margin: 0 0 6px; font-size: 16px; }
.site-colour-line { margin: 0; color: var(--ink); font-weight: 600; line-height: 1.9; }
.site-colour-quiet { margin: 0; color: var(--ink-soft); }
.site-colour-after { margin: 10px 0 6px; color: var(--ink-soft); font-size: 13px; }
@media (max-width: 640px) {
  .site-chip-table th, .site-chip-table td { padding: 8px; }
}
/* A column's words stay on one line where the table has the room: "Add-Ons" never breaks at its hyphen. */
@media (min-width: 641px) {
  .site-chip-table thead th { white-space: nowrap; }
}

/* ------------------------------------------------------------------ */
/* The league points calculator (/league-points-calculator/). Its own rules go here only. */
/* ------------------------------------------------------------------ */
/* LEAG-07, LEAG-08, UI-01. The form beside the points on a wide screen,
   above them on a phone. The table scrolls inside its own box, never the
   page. Every field and the Advanced Settings line are at least 44 pixels
   tall; the numbers are right-aligned, in figures of one width. */
.league-tool { display: grid; gap: clamp(20px, 3vw, 32px); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) {
  .league-tool { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); }
}
/* A part of the form that the chosen system does not read. */
.league-tool [hidden] { display: none !important; }
/* Safari draws a list at its own height and leaves out min-height: a set height keeps it at 44 pixels. */
.league-tool select { height: 44px; }
.league-result-column { min-width: 0; }
.league-field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.league-field-problem { margin: 0; padding-left: 10px; border-left: 3px solid var(--danger); color: var(--ink); font-size: 14px; font-weight: 600; }
.league-formula { display: grid; gap: 4px; margin: 0; color: var(--ink-soft); font-size: 14px; font-weight: 600; }
.league-formula code { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.league-tool input[name="formula"] { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.league-custom { display: grid; gap: 12px; min-width: 0; }
.league-formula-field { display: grid; gap: 6px; color: var(--ink-soft); font-size: 14px; font-weight: 600; }
.league-subhead { margin: 0; color: var(--ink); font-size: 15px; }
.league-variables { display: grid; gap: 6px; margin: 0; font-size: 14px; }
.league-variables > div { display: grid; grid-template-columns: minmax(84px, auto) minmax(0, 1fr); gap: 10px; }
.league-variables dt { color: var(--ink); }
.league-variables dd { margin: 0; color: var(--ink-soft); }
.league-advanced { border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.league-advanced > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 44px; padding: 10px 14px; color: var(--ink); font-weight: 600; list-style: none; cursor: pointer;
}
.league-advanced > summary::-webkit-details-marker { display: none; }
.league-advanced > summary::after { content: '+'; flex: none; color: var(--accent); font-size: 22px; line-height: 1; }
.league-advanced[open] > summary::after { content: '−'; }
.league-advanced > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 12px; }
.league-advanced > :not(summary) { margin: 0 14px 14px; }
.league-weights { display: grid; gap: 10px; }
.league-bands { color: var(--ink-soft); font-weight: 500; }
.league-points-table th, .league-points-table td { padding: 10px; text-align: right; white-space: nowrap; }
.league-points-table thead th { white-space: normal; vertical-align: bottom; }
.league-math { overflow-wrap: anywhere; }
.league-math code { color: var(--ink); font-size: 15px; }

/* ------------------------------------------------------------------ */
/* The payout calculator's own-split, prize pool and ties sections (27 October 2026). */
/* ------------------------------------------------------------------ */
/* WebKit draws a select at its text height with min-height alone: 23 px on an iPhone. */
.site-calculator select { height: 44px; }
.site-calculator-wide { display: grid; gap: 6px; color: var(--ink-soft); font-size: 14px; font-weight: 600; }
.site-calculator-pool, .site-calculator-tie { margin: 0 0 12px; color: var(--ink); font-variant-numeric: tabular-nums; }
.site-calculator-tie { margin: 12px 0 0; }

/* ------------------------------------------------------------------ */
/* The printable buy-in sheet (/printable-buy-in-sheet/), with its print rules. Its own rules go here only. */
/* ------------------------------------------------------------------ */

/* The tool: the form above, the sheet below it as it prints. Every field and
   button is at least 44 pixels tall. The form fits a phone; the sheet keeps
   the width of paper and scrolls sideways inside its own box. UI-01. */
.buyin-tool { display: grid; gap: clamp(28px, 4vw, 40px); }
.buyin-tool [hidden] { display: none !important; }
.buyin-form fieldset.buyin-group { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 16px 0 0; border: 0; border-top: 1px solid var(--line); }
.buyin-form .buyin-group legend { float: left; width: 100%; margin: 0 0 4px; padding: 0; color: var(--ink); font-size: 17px; font-weight: 650; }
.buyin-form .buyin-group legend + * { clear: both; }
.buyin-choices { display: flex; flex-wrap: wrap; gap: 0 28px; }
/* Two fields side by side from about 340 pixels, each field at the foot of its label. */
.buyin-form .site-calculator-fields { grid-template-columns: repeat(auto-fit, minmax(min(100%, 136px), 1fr)); }
.buyin-form .site-calculator-fields label { grid-template-rows: 1fr auto; }
@media (max-width: 700px) {
  .buyin-form .site-calculator-fields [data-field="name"] { grid-column: 1 / -1; }
}
.buyin-tool input[type="date"] { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; padding: 8px 12px; color: var(--ink); font-size: 16px; }
/* Safari draws a list at its own height and leaves out min-height: a set height keeps it at 44 pixels. */
.buyin-tool select { height: 44px; }
.buyin-tick { align-items: flex-start; padding: 10px 0; }
.buyin-tick input { margin-top: 2px; }
.buyin-actions { display: grid; gap: 10px; justify-items: start; }
.buyin-actions button { min-height: 44px; padding: 10px 22px; }
.buyin-result { min-width: 0; }
.buyin-result .site-calculator-problems { margin-bottom: 14px; }
.buyin-preview { overflow-x: auto; padding: clamp(10px, 2.5vw, 28px); border: 1px solid var(--line); border-radius: 14px; background: var(--card-raised); }
.buyin-preview:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The paper: black on white, on the screen as on paper. */
.site .buyin-paper, .site .buyin-paper * { color: #111; }
.buyin-paper {
  box-sizing: border-box; min-width: 800px; max-width: 980px; margin: 0 auto; padding: 36px 32px 24px;
  border-radius: 4px; background: #fff; box-shadow: 0 8px 28px rgb(0 0 0 / 0.4);
  font-size: 13px; line-height: 1.35; font-variant-numeric: tabular-nums;
}
.buyin-head { margin-bottom: 14px; }
.buyin-kickers { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
.site .buyin-paper .buyin-kicker { margin: 0; color: #555; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.site .buyin-paper .buyin-foot { margin: 0; color: #666; font-size: 10px; }
.buyin-nowrap { white-space: nowrap; }
.site .buyin-paper .buyin-title { display: flex; align-items: baseline; gap: 10px; margin: 2px 0 10px; font-size: 22px; line-height: 1.25; }
.buyin-title-label { flex: none; font-size: 13px; font-weight: 700; }
.buyin-title .buyin-blank { flex: 1; min-width: 0; }
.buyin-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 22px; margin: 0; }
.buyin-facts > div { display: flex; align-items: baseline; gap: 6px; min-height: 22px; }
.buyin-facts > .buyin-wide { grid-column: span 2; }
.buyin-facts dt { flex: none; font-weight: 700; }
.buyin-facts dt::after { content: ':'; }
.buyin-facts dd { flex: 1; min-width: 0; margin: 0; }
.buyin-blank { display: inline-block; min-width: 18mm; height: 1.15em; border-bottom: 1px solid #111; vertical-align: baseline; }
.buyin-facts dd > .buyin-blank:only-child { width: 100%; }
.buyin-box { display: inline-block; box-sizing: border-box; width: 13px; height: 13px; border: 1.5px solid #222; border-radius: 2px; vertical-align: middle; }
.buyin-ways { display: inline-flex; gap: 5px; }
.buyin-gap { display: inline-block; width: 1.5em; }

.buyin-table { width: 100%; margin: 0; border-collapse: collapse; table-layout: fixed; }
.buyin-table th, .buyin-table td { padding: 3px 5px; border: 1px solid #333; text-align: center; vertical-align: middle; overflow-wrap: anywhere; }
.buyin-table thead th { padding: 4px 3px; background: #eef1ef; font-size: 11px; font-weight: 700; line-height: 1.15; }
.site .buyin-paper .buyin-sub { display: block; margin-top: 2px; color: #444; font-size: 10px; font-weight: 400; }
/* Paid By: each way to pay stands upright over its own box in the rows. */
.buyin-sub .buyin-ways-key { display: flex; justify-content: center; gap: 5px; margin-top: 2px; }
.site .buyin-paper .buyin-ways-key > span { width: 13px; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 9px; line-height: 13px; text-align: left; white-space: nowrap; }
.buyin-players tbody tr { height: 34px; }
.buyin-players tbody th { font-size: 11px; font-weight: 600; }
.buyin-players tbody tr:nth-child(5n):not(:last-child) > * { border-bottom-width: 2px; }
.buyin-players .buyin-total > * { border-top: 2px solid #111; font-weight: 700; }
.buyin-players .buyin-total th { padding-right: 8px; text-align: right; }
.buyin-none { background: #e9ecea; }
.site .buyin-paper .buyin-seat { color: #666; font-size: 11px; white-space: nowrap; }
.buyin-w-no { width: 28px; }
.buyin-w-ways { width: 66px; }
.buyin-w-tick { width: 46px; }
.buyin-w-rebuy { width: 26px; }
.buyin-w-rebuy-one { width: 52px; }
.buyin-w-money { width: 66px; }
.buyin-w-seat { width: 66px; }
.buyin-w-place { width: 50px; }
.buyin-w-paid { width: 52px; }
.buyin-w-cash { width: 72px; }
.buyin-w-amount { width: 58px; }
.buyin-w-label { width: 22%; }
.buyin-w-sum { width: 15%; }
.buyin-w-person { width: 34%; }

.buyin-block { margin-top: 20px; }
.site .buyin-paper h4 { margin: 0 0 6px; font-size: 14px; font-weight: 700; }
.buyin-sums th, .buyin-sums td, .buyin-prizes th, .buyin-prizes td, .buyin-payments th, .buyin-payments td { padding: 4px 6px; text-align: left; }
.buyin-sums tbody tr, .buyin-prizes tbody tr, .buyin-payments tbody tr { height: 30px; }
.buyin-sums tbody th, .buyin-prizes tbody th { font-weight: 700; }
.buyin-prizes { width: 75%; table-layout: auto; }
.buyin-prizes th:first-child { width: 14%; }
.buyin-prizes tfoot > * > * { border-top: 2px solid #111; font-weight: 700; }
.site .buyin-paper .buyin-note { margin: 6px 0 0; color: #333; font-size: 11px; }
.buyin-label { flex: none; font-weight: 700; }
.buyin-sign { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 30px; }
.buyin-sign p, .buyin-check p:not(.buyin-note) { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 8px 0 0; }
.buyin-sign .buyin-blank { flex: 1; height: 1.8em; }
.buyin-check .buyin-blank { min-width: 34mm; height: 1.6em; }
.buyin-equals { padding: 0 6px; font-weight: 700; }
.buyin-steps { margin: 0 0 10px; padding-left: 20px; font-size: 12px; }
.buyin-steps li { margin: 2px 0; }

/* On paper: the sheet alone, black on white. The browser's own paper size
   is kept (A4 where people use it, US Letter in the United States), so the
   page names only the orientation: a named size would hide the paper choice
   in Chrome's print window. Rows break between pages, never inside one,
   and the column headings repeat on each page. */
@page buyin-sheet { size: portrait; margin: 10mm; }
@media print {
  /* styles.css hides every child of body but the join poster on paper. */
  body > .site:has(.buyin-paper) { display: block !important; min-height: 0; }
  html:has(.buyin-paper), body:has(.buyin-paper), .site:has(.buyin-paper) { background: #fff !important; color: #000 !important; }
  .site:has(.buyin-paper) .site-main > :not(.buyin-section),
  .buyin-section .buyin-form,
  .buyin-result > :not(.buyin-preview) { display: none !important; }
  .buyin-section, .buyin-section > .site-wrap, .buyin-tool { display: block; max-width: none; margin: 0; padding: 0; border: 0; }
  .buyin-preview { overflow: visible; padding: 0; border: 0; border-radius: 0; background: none; }
  .site .buyin-paper, .site .buyin-paper * { color: #000; }
  /* The table's outer lines lie half outside it: a little room keeps them on the paper. */
  .buyin-paper { page: buyin-sheet; width: auto; min-width: 0; max-width: none; margin: 0; padding: 0 0.4mm; border-radius: 0; box-shadow: none; font-size: 10pt; }
  .site .buyin-paper .buyin-title { font-size: 16pt; }
  .site .buyin-paper h4 { font-size: 11pt; }
  .buyin-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .buyin-table thead { display: table-header-group; }
  .buyin-table tr, .buyin-head, .buyin-block { break-inside: avoid; }
  .buyin-table th, .buyin-table td { border: 0.6pt solid #000; }
  .buyin-table thead th { background: none; font-size: 8pt; }
  .site .buyin-paper .buyin-sub { color: #000; font-size: 7pt; }
  .buyin-players tbody tr { height: 8.5mm; }
  .buyin-players tbody tr:nth-child(5n):not(:last-child) > * { border-bottom-width: 1.4pt; }
  .buyin-players .buyin-total > *, .buyin-prizes tfoot > * > * { border-top-width: 1.4pt; }
  .buyin-sums tbody tr, .buyin-prizes tbody tr, .buyin-payments tbody tr { height: 7mm; }
  .buyin-block { margin-top: 4mm; }
  .buyin-head { margin-bottom: 3mm; }
  .buyin-box { width: 3.4mm; height: 3.4mm; border-width: 0.8pt; }
  .buyin-ways, .buyin-sub .buyin-ways-key { gap: 1.2mm; }
  .site .buyin-paper .buyin-ways-key > span { width: 3.4mm; font-size: 6.5pt; line-height: 3.4mm; }
  .buyin-none { background: none; }
  .site .buyin-paper .buyin-seat { color: #555; font-size: 8pt; }
  .site .buyin-paper .buyin-note, .buyin-steps { font-size: 8.5pt; }
  .site .buyin-paper .buyin-foot { font-size: 7.5pt; }
  .buyin-w-no { width: 7mm; }
  .buyin-w-ways { width: 17mm; }
  .buyin-w-tick { width: 10mm; }
  .buyin-w-rebuy { width: 6.5mm; }
  .buyin-w-rebuy-one { width: 13mm; }
  .buyin-w-money { width: 15mm; }
  .buyin-w-seat { width: 16mm; }
  .buyin-w-place { width: 11mm; }
  .buyin-w-paid { width: 13mm; }
  .buyin-w-cash { width: 18mm; }
  .buyin-w-amount { width: 14mm; }
}

/* ------------------------------------------------------------------ */
/* The poker odds calculator (/poker-odds-calculator/). Its own rules go here only. */
/* ------------------------------------------------------------------ */

/* UI-01, UI-04. The hands with their figures, the board and the cards
   (odds/view.ts). A card is a light face: the suits keep four colours that
   stand 4.5:1 on it (black spades, red hearts, blue diamonds, green clubs),
   and the suit symbol always shows, so the colour is never the only sign.
   Each control is at least 44 pixels high, and a card of the deck at least
   44 pixels wide on a 360 pixel screen. */
.odds-tool { display: grid; gap: 28px; min-width: 0; color: var(--ink); container-type: inline-size; }
.odds-part { display: grid; gap: 12px; min-width: 0; }
.site .odds-part h3 { margin: 0; font-size: 18px; }
.odds-hands { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.odds-hand { display: grid; align-content: start; gap: 12px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.odds-hand-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
.site .odds-hand-head h4 { margin: 0; font-size: 16px; }
.odds-remove,
.odds-buttons button {
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--card-raised);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.odds-remove:hover, .odds-buttons button:hover:not(:disabled) { border-color: var(--accent); }
.odds-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.odds-buttons button:disabled { color: var(--ink-soft); cursor: not-allowed; }
.odds-note, .odds-summary, .odds-next { margin: 0; font-size: 14px; line-height: 1.5; }
.odds-note { color: var(--ink-soft); }
.odds-summary { color: var(--ink); font-weight: 600; }
.odds-next { color: var(--ink); font-size: 15px; }
.odds-next strong { color: var(--accent); }

/* A hand's two cards, and beside them the hand that they make with the board now. */
.odds-hand-cards { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.odds-made { display: grid; gap: 2px; margin: 0; }
.odds-made dt { color: var(--ink-soft); font-size: 13px; font-weight: 600; }
.odds-made dd { margin: 0; color: var(--ink); font-size: 16px; font-weight: 700; }

/* A place for a card: dashed while empty. The chosen place has a green ring. */
.odds-places { display: flex; gap: 6px; }
.odds-place {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 64px;
  padding: 0;
  border: 2px dashed var(--line-strong);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}
.odds-place.odds-card { height: 64px; border: 1px solid var(--line-strong); font-size: 19px; }
.odds-place.is-target { border-style: solid; border-color: var(--accent); box-shadow: 0 0 0 2px var(--page), 0 0 0 4px var(--accent); }
.odds-board { display: flex; flex-wrap: wrap; gap: 12px 18px; }
.odds-street { display: grid; justify-items: center; gap: 4px; }
.odds-street-name { color: var(--ink-soft); font-size: 13px; font-weight: 600; }

/* A card: its rank and its suit symbol on a light face. */
.odds-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  height: 44px;
  padding: 0 2px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #f4f6f5;
  color: #111a16;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.odds-s { color: #111a16; }
.odds-h { color: #c0262f; }
.odds-d { color: #1d5fb8; }
.odds-c { color: #1a7a3e; }
.odds-card:focus-visible, .odds-place:focus-visible, .odds-remove:focus-visible, .odds-buttons button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.odds-deck { display: grid; gap: 8px; max-width: 760px; }
.odds-suit { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
@container (min-width: 600px) {
  .odds-suit { grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 4px; }
}
/* A card in use: grey and struck through. Pressing it takes it out of its place. */
.odds-deck .odds-card.is-used { border-style: dashed; background: var(--card-raised); color: var(--ink-soft); text-decoration: line-through; }
.odds-deck .odds-card[aria-disabled="true"] { cursor: not-allowed; }

/* The figures of a hand. While a count runs, the figures before it stay, pale. */
.odds-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.odds-figures div { display: grid; align-content: start; gap: 2px; min-width: 0; }
.odds-figures dt { color: var(--ink-soft); font-size: 13px; font-weight: 600; line-height: 1.3; }
.odds-figures dd { margin: 0; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.odds-figures .odds-share dd { color: var(--accent); font-size: 21px; }
.odds-bar { height: 6px; overflow: hidden; border-radius: 999px; background: var(--line); }
.odds-bar span { display: block; height: 100%; background: var(--accent); }
.odds-tool.is-working .odds-figures dd, .odds-tool.is-working .odds-bar span { opacity: 0.45; }

/* The known figures under the calculator. */
.site-prose .odds-known { display: grid; gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; }
.site-prose .odds-known li { display: grid; gap: 6px; margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); }
.odds-known-hand { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-variant-numeric: tabular-nums; }
.odds-mini-hand { display: inline-block; min-width: 86px; }
.odds-mini { display: inline-block; margin-right: 3px; padding: 2px 6px; border-radius: 5px; background: #f4f6f5; font-weight: 700; }

/* ------------------------------------------------------------------ */
/* The settlement calculator (/poker-settlement-calculator/). Its own rules go here only. */
/* ------------------------------------------------------------------ */

/* UI-01, UI-04. The form beside the settlement, as on the payout
   calculator. A part the reader's choice hides stays hidden, also when its
   own rule gives it a display. Every control is at least 44 pixels tall. */
.settle-tool [hidden] { display: none !important; }
.settle-group { display: grid; gap: 8px; }
.settle-field { display: grid; gap: 6px; min-width: 0; }
/* Safari draws a list at its own height and leaves out min-height: a set height keeps it at 44 pixels. */
.settle-tool select { height: 44px; }
.settle-tool input.settle-number { text-align: right; font-variant-numeric: tabular-nums; }
.settle-tool .site-calculator-radio input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin: 0; }

/* The players: one row each. On a phone the name has its own line, with the
   remove button beside it; with room, the four parts share one line. */
.settle-rows { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; container-type: inline-size; }
.settle-row { padding: 12px 0; }
.settle-row:first-child { padding-top: 0; }
.settle-row + .settle-row { border-top: 1px solid var(--line); }
.settle-row-fields {
  display: grid; gap: 8px 10px; align-items: end;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
  grid-template-areas: "name name remove" "paid final final";
}
.settle-row-fields label { display: grid; gap: 4px; min-width: 0; color: var(--ink-soft); font-size: 13px; font-weight: 600; }
.settle-name { grid-area: name; }
.settle-paid { grid-area: paid; }
.settle-final { grid-area: final; }
.settle-remove {
  grid-area: remove; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; min-height: 44px; padding: 0; color: var(--ink-soft);
}
.settle-remove:hover:not(:disabled) { color: var(--danger); border-color: var(--danger); }
@container (min-width: 440px) {
  .settle-row-fields {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) 44px;
    grid-template-areas: "name paid final remove";
  }
}
.settle-add { min-height: 44px; font-weight: 600; }

/* The settlement: the check, the results and the payments. */
.settle-result { display: grid; gap: 22px; }
.settle-part h3 { margin: 0 0 10px; font-size: 18px; }
.settle-check { padding: 14px 16px; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 12px; background: var(--card); }
.settle-check.settle-differ { border-color: var(--danger); border-left-width: 4px; background: var(--danger-soft); }
.settle-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); gap: 8px 16px; margin: 0 0 10px; }
.settle-totals div { display: grid; gap: 2px; align-content: start; }
.settle-totals dt { color: var(--ink-soft); font-size: 13px; font-weight: 600; }
.settle-totals dd { margin: 0; color: var(--ink); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.settle-verdict { margin: 0; color: var(--ink); }
.settle-verdict + .settle-verdict { margin-top: 6px; color: var(--ink-soft); }
.settle-check.settle-agree .settle-verdict strong { color: var(--accent); }
.settle-check.settle-differ .settle-verdict strong { color: var(--danger); }

.settle-table th:not(:first-child), .settle-table td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.settle-table td, .settle-table tbody th, .settle-table tfoot th { min-width: 0; }
.settle-table tbody th { overflow-wrap: anywhere; }
.settle-table td.settle-up, .settle-table td.settle-up strong { color: var(--accent); }
.settle-table td.settle-down, .settle-table td.settle-down strong { color: var(--danger); }
.settle-word { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.settle-chips { display: block; color: var(--ink-soft); font-size: 12px; font-weight: 400; }
.settle-result .site-table-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 640px) {
  .settle-table th, .settle-table td { padding: 8px 6px; }
  .settle-table th:first-child { padding-left: 10px; }
  .settle-table th:last-child, .settle-table td:last-child { padding-right: 10px; }
}

.settle-count { margin: 0 0 8px; color: var(--ink); }
.settle-wait { margin: 0; color: var(--ink-soft); }
.settle-payments { display: grid; gap: 6px; margin: 0; padding-left: 24px; }
.settle-payments li { padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.settle-payments li::marker { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.settle-payments strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.settle-who { overflow-wrap: anywhere; }

/* How to settle: numbered steps, each with its heading. */
.settle-steps li { margin-bottom: 14px; }
.settle-steps h3 { margin: 0 0 6px; color: var(--ink); }

/* ------------------------------------------------------------------ */
/* The free poker clock (/free-poker-clock/). Its own rules go here only. */
/* ------------------------------------------------------------------ */

/* UI-01. The page's tool: the face drawn like the app's room clock
   (screens/roomClock.css), dark with the countdown in the accent green and
   the blinds large, readable across a room and on a phone held sideways;
   then the figures and the list of levels. */
.fc-tool [hidden] { display: none !important; }
.fc-face {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 2vh, 20px);
  padding: clamp(14px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(52, 178, 124, 0.1), transparent 70%), var(--card);
  color: var(--ink);
}
.fc-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.fc-level { flex: 1 1 auto; margin: 0; font-size: clamp(18px, 3vw, 40px); font-weight: 700; line-height: 1.2; }
.fc-face.on-break .fc-level { color: #7fb8e6; text-transform: uppercase; letter-spacing: 0.06em; }
.fc-state { margin: 0; color: var(--warn); font-size: clamp(13px, 1.4vw, 18px); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.fc-state:empty { display: none; }
.fc-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.fc-tool-button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; font-weight: 600; }
.fc-tool-button[aria-pressed]::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.fc-tool-button[aria-pressed="false"]::before { background: transparent; box-shadow: inset 0 0 0 2px var(--ink-soft); }
.fc-clock-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: clamp(12px, 2.5vw, 56px); }
.fc-countdown {
  color: var(--accent);
  font-size: clamp(64px, min(18vw, 26vh), 300px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 0.95;
  text-align: center;
  white-space: nowrap;
}
.fc-face[data-state="paused"] .fc-countdown { color: var(--ink-soft); }
.fc-face.last-minute .fc-countdown { color: var(--warn); }
.fc-dial { display: flex; flex-direction: column; min-width: 0; color: var(--ink-soft); font-size: clamp(12px, min(1.6vw, 2.8vh), 30px); }
.fc-dial-elapsed { justify-self: end; text-align: right; }
.fc-dial-break { justify-self: start; text-align: left; }
.fc-dial-label { font-size: 0.8em; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.fc-dial-time { color: var(--ink); font-size: 1.7em; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.05; white-space: nowrap; }
.fc-dial-sub { font-size: 0.8em; white-space: nowrap; }
.fc-dial.is-empty { visibility: hidden; }
/* Too narrow for a time at each side (a phone held upright, half of a small
   screen): the two times stand in one row under the countdown. A phone held
   sideways has the width for them at the sides. */
@media (max-width: 1000px) and (min-height: 501px), (max-width: 640px) {
  .fc-clock-row { display: flex; flex-wrap: wrap; justify-content: center; column-gap: clamp(20px, 6vw, 48px); row-gap: 4px; }
  .fc-clock-row > .fc-countdown { flex: 1 0 100%; order: -1; }
  .fc-dial { align-items: center; text-align: center; font-size: clamp(12px, min(2.4vw, 2.8vh), 22px); }
  .fc-dial.is-empty { display: none; }
}
/* The blinds and the ante side by side, each as large as its box lets an
   amount of up to seven figures be: "100 000" fits a phone held upright. */
.fc-bets { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: clamp(6px, 1.5vw, 24px); }
.fc-stat { display: grid; justify-items: center; gap: 2px; min-width: 0; padding: clamp(8px, 1.5vh, 18px) 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--card-raised); container-type: inline-size; }
.fc-stat-label { max-width: 100%; color: var(--ink-soft); font-size: clamp(11px, 1.3vw, 18px); font-weight: 600; letter-spacing: 0.06em; overflow-wrap: anywhere; text-align: center; text-transform: uppercase; }
.fc-stat-value { font-size: min(clamp(22px, min(6.5vw, 10vh), 110px), 24cqi); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.05; white-space: nowrap; }
.fc-next { margin: 0; color: var(--ink-soft); font-size: clamp(15px, 2vw, 28px); text-align: center; }
.fc-next:empty, .fc-note:empty { display: none; }
.fc-note { margin: 0; color: var(--warn); font-size: 14px; text-align: center; }
.fc-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.fc-controls button { min-height: 48px; padding: 0 18px; font-weight: 600; }
.fc-controls [data-command="start"], .fc-controls [data-command="pause"] { min-width: 10em; }
.fc-over { display: grid; justify-items: center; gap: 12px; padding: 16px; border: 1px solid rgba(52, 178, 124, 0.4); border-radius: 14px; background: var(--accent-soft); text-align: center; }
.fc-over p { margin: 0; font-size: clamp(16px, 2vw, 24px); }
.fc-over .button { min-height: 48px; padding: 0 20px; font-weight: 600; }
.fc-offer { margin: 12px 0 0; color: var(--ink-soft); font-size: 14px; text-align: center; }
.fc-offer a { display: inline-flex; align-items: center; min-height: 44px; }
/* A phone held sideways: the whole face in the height of the screen. */
@media (max-height: 500px) and (orientation: landscape) {
  .fc-face { gap: 6px; padding: 10px 14px; }
  .fc-level { font-size: 18px; }
  .fc-countdown { font-size: clamp(48px, min(14vw, 24vh), 200px); }
  .fc-stat { padding: 2px 4px; }
  .fc-stat-label { font-size: 11px; }
  .fc-stat-value { font-size: min(clamp(22px, 9vh, 80px), 24cqi); }
  .fc-next { font-size: 14px; }
  .fc-controls button { min-height: 44px; padding: 0 12px; }
}
/* Full Screen: the face alone, on the screen or, where the browser cannot
   fill it (an iPhone), on the whole window. The safe areas stay clear. */
.fc-face:fullscreen,
.fc-face.fc-filled {
  justify-content: space-evenly;
  border: 0;
  border-radius: 0;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(52, 178, 124, 0.1), transparent 70%), var(--page);
}
.fc-face.fc-filled { position: fixed; inset: 0; z-index: 100; overflow: auto; }
html.fc-filling, html.fc-filling body { overflow: hidden; }
.fc-face:fullscreen .fc-countdown { font-size: clamp(64px, min(24vw, 34vh), 440px); }
.fc-face.fc-filled .fc-countdown { font-size: clamp(64px, min(24vw, 34vh), 440px); }
.fc-face:fullscreen .fc-stat-value { font-size: min(clamp(22px, min(8vw, 12vh), 170px), 24cqi); }
.fc-face.fc-filled .fc-stat-value { font-size: min(clamp(22px, min(8vw, 12vh), 170px), 24cqi); }
/* On the room's screen, the wake lock's note would stand there all evening. */
.fc-face:fullscreen .fc-note[data-kind="awake"] { display: none; }
.fc-face.fc-filled .fc-note[data-kind="awake"] { display: none; }
.fc-face:fullscreen .fc-level { font-size: clamp(18px, min(3.5vw, 6vh), 56px); }
.fc-face.fc-filled .fc-level { font-size: clamp(18px, min(3.5vw, 6vh), 56px); }

/* The figures and the list of levels. */
.fc-levels-title { margin-top: clamp(40px, 6vw, 64px); }
.fc-setup-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
/* Safari keeps a native select at its own height: drawn here, it is 44 pixels like the fields. */
.fc-setup select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2394a39b' stroke-width='2'/%3E%3C/svg%3E");
  background-position: right 12px center;
  background-repeat: no-repeat;
}
@media (min-width: 1100px) {
  .fc-setup-grid { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); }
}
.fc-setup-actions, .fc-levels-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.fc-setup-actions button, .fc-levels-actions button { min-height: 44px; }
.fc-levels-actions p { margin: 0; }
.fc-message { margin: 0; color: var(--warn); font-size: 14px; }
.fc-message:empty { display: none; }
.fc-reset-ask { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line-strong); border-radius: 12px; }
.fc-reset-ask p { margin: 0; }
.fc-levels-part { display: grid; gap: 12px; min-width: 0; }
.fc-levels-part h3, .fc-levels-part > p { margin: 0; }
/* Positioned, so the hidden column name (site-sr-only) stays inside the scroller instead of widening the page. */
.fc-levels-wrap { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.fc-levels { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.fc-levels th, .fc-levels td { padding: 4px 6px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.fc-levels tbody tr:last-child th, .fc-levels tbody tr:last-child td { border-bottom: 0; }
.fc-levels thead th { padding: 10px 6px; background: var(--card-raised); color: var(--ink-soft); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.fc-levels tbody th { padding-left: 12px; font-weight: 700; white-space: nowrap; }
.fc-levels input[type="text"] { width: 100%; min-width: 5.5em; min-height: 44px; padding: 6px 8px; font-size: 16px; font-variant-numeric: tabular-nums; }
.fc-levels td:nth-child(2) input[type="text"] { min-width: 3.5em; }
.fc-levels input[aria-invalid="true"] { border-color: var(--danger); background: var(--danger-soft); }
.fc-tick { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; cursor: pointer; }
.fc-tick input { width: 20px; height: 20px; margin: 0; }
.fc-remove { min-width: 44px; min-height: 44px; padding: 0; font-size: 20px; line-height: 1; }
.fc-row-break th, .fc-row-break td { background: rgba(127, 184, 230, 0.06); }
.fc-row-break th { color: #7fb8e6; }
.fc-row-spare { display: block; color: var(--ink-soft); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.fc-levels tr.is-current th, .fc-levels tr.is-current td { background: var(--accent-soft); }
.fc-levels tr.is-current th { box-shadow: inset 4px 0 0 var(--accent); }
.fc-finish td { padding: 8px 12px; border-bottom: 2px solid var(--accent-deep); color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }