/* Guide-only additions for the content pages (stats guide, setup guide, how it compares).
   Loaded after core.css and page.css; uses their tokens only.
   Owner: contentwriter. */

/* The button under a guide's lede. */
.head-cta { margin-top: 22px; }

/* Words colored like the HUD: gold above typical, blue below. */
.hot-text { color: var(--hot); font-weight: 600; }
.cool-text { color: var(--cool); font-weight: 600; }

/* ---------- stats guide: every stat, by group ---------- */
.prose > .stats-index { max-width: 960px; }
.stats-index > * + * { margin-top: 20px; }
.stat-group h2 { margin-top: 56px; }
.stat-sub { margin-top: 28px; }
.stat-sub h3 { margin-top: 0; }
.stat-sub > * + * { margin-top: 12px; }

/* Stat tables: name column stays readable, the range column stays narrow. */
table.stat-table th[scope='row'] { min-width: 9.5em; }
table.stat-table th[scope='row'] code { display: block; margin-top: 4px; width: max-content; max-width: 100%; white-space: normal; font-size: 0.86em; color: var(--dim); }
table.stat-table td:nth-child(2) { min-width: 17em; }
table.stat-table td.num .note { font-family: var(--body); font-weight: 400; white-space: normal; text-align: right; }
table.stat-table td.read { min-width: 11em; font-size: 0.94em; }
table.data td.read .hot { color: var(--hot); font-weight: 600; }
table.data td.read .cool { color: var(--cool); font-weight: 600; }
table.data .note.db { color: var(--faint); font-style: italic; }

/* The filter: radio chips and one checkbox. Pure CSS (:has), so it works with the strict CSP
   and no script; browsers without :has simply show every group. */
.stat-filter { margin: 0; padding: 16px 18px; border: 0; border-radius: 12px; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--rule); display: grid; gap: 10px; }
.stat-filter legend { float: left; margin: 0 0 4px; padding: 0; font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--dim); }
.stat-filter legend + * { clear: left; }
.stat-filter .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.stat-filter input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.stat-filter label {
  display: inline-flex; align-items: center; min-height: 40px; padding: 7px 14px; border-radius: 999px;
  font-family: var(--display); font-weight: 600; font-size: 16px; line-height: 1.2; color: var(--soft);
  box-shadow: inset 0 0 0 1px var(--rule-2); cursor: pointer; user-select: none;
}
.stat-filter label:hover { color: var(--bone); box-shadow: inset 0 0 0 1px var(--faint); }
.stat-filter input:checked + label { color: var(--ink); background: var(--bone); box-shadow: none; }
.stat-filter input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; }
.stat-filter input[type='checkbox'] + label::before {
  content: ''; width: 14px; height: 14px; margin-right: 9px; border-radius: 3px; flex: none;
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.stat-filter input[type='checkbox']:checked + label::before { background: var(--ink); box-shadow: inset 0 0 0 3px var(--bone); }

.stats-index:has(#sf-preflop:checked) .stat-group:not([data-group='preflop']),
.stats-index:has(#sf-postflop:checked) .stat-group:not([data-group='postflop']),
.stats-index:has(#sf-sizing:checked) .stat-group:not([data-group='sizing']),
.stats-index:has(#sf-showdown:checked) .stat-group:not([data-group='showdown']),
.stats-index:has(#sf-general:checked) .stat-group:not([data-group='general']) { display: none; }
.stats-index:has(#sf-hud:checked) tr.db-only,
.stats-index:has(#sf-hud:checked) .stat-sub.all-db { display: none; }

/* ---------- stats guide: player types ---------- */
table.type-table th[scope='row'] { white-space: nowrap; }
table.type-table td:nth-child(2) { min-width: 15em; }

/* ---------- setup guide ---------- */
.steps { counter-reset: none; }
.step-figure { margin-top: 16px; }

/* ---------- sources list at the end of a page ---------- */
.prose .sources { margin-top: 56px; }
.sources h2 { font-size: 24px; margin: 0; }
.sources ul { margin-top: 12px; font-size: 15px; color: var(--dim); }
.sources li { overflow-wrap: anywhere; }
.sources a { color: var(--soft); }

/* Stat tables stack into one card per stat on phones, so nothing scrolls sideways. */
@media (max-width: 640px) {
  table.stat-table thead { display: none; }
  table.stat-table, table.stat-table tbody, table.stat-table tr, table.stat-table th, table.stat-table td { display: block; width: auto; min-width: 0; }
  table.stat-table tr { padding: 12px 14px; border-bottom: 1px solid var(--rule); }
  table.stat-table tbody tr:last-child { border-bottom: 0; }
  table.stat-table th, table.stat-table td { border: 0; padding: 3px 0; }
  table.stat-table th[scope='row'] { min-width: 0; }
  table.stat-table th[scope='row'] code { display: inline; margin: 0 0 0 6px; }
  table.stat-table td:nth-child(2), table.stat-table td.read { min-width: 0; }
  table.stat-table td.num { text-align: left; white-space: normal; }
  table.stat-table td.num .note { display: inline; text-align: left; margin-left: 2px; }
  table.stat-table td[data-label]::before { content: attr(data-label) ': '; color: var(--dim); font-family: var(--display); font-weight: 600; }
  table.stat-table td.read .muted { display: none; }
  table.stat-table td.read:has(> .muted:only-child) { display: none; }

  /* Player types: one card per type. */
  table.type-table thead { display: none; }
  table.type-table caption { display: block; }
  table.type-table, table.type-table tbody, table.type-table tr, table.type-table th, table.type-table td { display: block; width: auto; min-width: 0; }
  table.type-table tr { padding: 12px 14px; border-bottom: 1px solid var(--rule); }
  table.type-table tbody tr:last-child { border-bottom: 0; }
  table.type-table th, table.type-table td { border: 0; padding: 3px 0; }
  table.type-table td:nth-child(2) { min-width: 0; }
  table.type-table td[data-label]::before { content: attr(data-label) ': '; color: var(--dim); font-family: var(--display); font-weight: 600; }
}

/* Recreated HUD pieces in the setup guide: let the panel shrink with the page on small phones. */
.step-figure .hud-figure { padding-inline: 12px; }
.step-figure .hud { width: 100%; max-width: 22em; min-width: 0; }
.step-figure .hud .dock { width: 100%; }
.step-figure .hud .badge { margin-inline: auto; }
@media (max-width: 359px) { .step-figure .hud-figure .hud { font-size: 13px; } }