/* PokerNow HUD Advanced: the page template for guides, articles, comparisons, the
   changelog and support. Load after core.css. Documentation: OPS/web/TEMPLATE.md.
     1. page template: breadcrumbs, page head, table of contents, prose, short answer box
     2. components: callouts, tables, stat glossary, tools, install block, related pages,
        blog index, changelog, support */

/* ---------- 1. page template ---------- */
/* Breadcrumbs */
.crumbs { margin-bottom: 26px; font-family: var(--display); font-weight: 500; font-size: 16px; color: var(--dim); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; padding: 0; list-style: none; }
.crumbs li + li::before { content: '/' / ''; margin: 0 10px; color: var(--faint); }
.crumbs a { color: var(--dim); text-decoration: none; }
.crumbs a:hover { color: var(--bone); text-decoration: underline; }
.crumbs [aria-current='page'] { color: var(--soft); }

/* Head of a page: h1, lede, byline */
.page-head { max-width: 50em; }
.page-head h1 { font-size: clamp(40px, 5.6vw, 66px); line-height: 1; }
.page-head .lede { margin-top: 22px; }
.byline { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 22px; color: var(--dim); font-size: 15px; line-height: 1.4; }
.byline span, .byline time { white-space: nowrap; }
.page-head + .page-body { margin-top: 48px; }
@media (min-width: 980px) { .page-head + .page-body { margin-top: 64px; } }

/* Body: an optional sticky table of contents beside the prose */
.page-body { display: grid; gap: 32px; }
@media (min-width: 1000px) {
  .page-body.has-toc { grid-template-columns: 232px minmax(0, 1fr); gap: 56px; align-items: start; }
}
.toc { font-family: var(--display); font-size: 16px; line-height: 1.3; min-width: 0; }
@media (min-width: 1000px) {
  .toc { position: sticky; top: calc(var(--header) + 24px); max-height: calc(100vh - var(--header) - 48px); overflow: auto; overscroll-behavior: contain; }
}
.toc summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-radius: 10px; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--rule);
  font-weight: 600; font-size: 17px; color: var(--bone);
}
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: '+'; font-weight: 500; font-size: 22px; line-height: 1; color: var(--dim); }
.toc details[open] summary::after { content: '\2013'; }
.toc ol { margin: 0; padding: 10px 0 0; list-style: none; display: grid; gap: 2px; }
.toc ol ol { padding: 2px 0 4px 14px; }
.toc a { display: block; padding: 6px 12px; border-radius: 6px; color: var(--dim); text-decoration: none; border-left: 2px solid transparent; }
.toc a:hover { color: var(--bone); background: rgba(237, 230, 214, 0.05); }
.toc a[aria-current='location'] { color: var(--bone); border-left-color: var(--gold); border-radius: 0 6px 6px 0; background: rgba(210, 164, 92, 0.08); }
@media (min-width: 1000px) {
  .toc summary { background: none; box-shadow: none; padding: 0 14px 6px; font-size: 15px; color: var(--soft); cursor: default; pointer-events: none; }
  .toc summary::after { display: none; }
  .toc ol { padding-top: 4px; }
}

/* Prose: long-form text set for reading. Deep links clear the sticky header through core.css
   (html scroll-padding-top); don't add a scroll-margin here, or the two offsets add up. */
.prose { min-width: 0; color: var(--soft); }
.prose > * { max-width: 720px; }
.prose > .wide { max-width: 960px; }
.prose > * + * { margin-top: 20px; }
.prose h2 { color: var(--bone); font-size: clamp(28px, 3.2vw, 36px); line-height: 1.1; margin-top: 64px; }
.prose h3 { color: var(--bone); font-size: 23px; margin-top: 40px; }
.prose h4 { color: var(--bone); margin-top: 28px; }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: 12px; }
.prose strong { color: var(--bone); }
.prose ul, .prose ol { padding-left: 1.3em; display: grid; gap: 8px; }
.prose li::marker { color: var(--gold); font-family: var(--display); font-weight: 600; }
.prose li > ul, .prose li > ol { margin-top: 8px; }
.prose blockquote { margin-left: 0; margin-right: 0; padding: 4px 0 4px 22px; border-left: 2px solid var(--gold); color: var(--bone); font-size: 1.08em; }
.prose blockquote cite { display: block; margin-top: 8px; color: var(--dim); font-size: 15px; font-style: normal; }
.prose figure { margin-inline: 0; }
figure { margin: 0; }
figcaption { margin-top: 12px; color: var(--dim); font-size: 14px; line-height: 1.45; }
.shot { border-radius: 12px; overflow: hidden; background: var(--ink-2); box-shadow: 0 0 0 1px var(--rule), 0 24px 60px rgba(0, 0, 0, 0.35); }
.shot img { width: 100%; }
a.shot { display: block; cursor: zoom-in; transition: box-shadow 160ms ease; }
a.shot:hover { box-shadow: 0 0 0 1px var(--rule-2), 0 28px 70px rgba(0, 0, 0, 0.45); }

/* Buttons under a page's lede (support, guides) */
.page-actions { display: flex; flex-wrap: wrap; gap: 12px 14px; margin-top: 28px; }
.page-note { margin-top: 16px; max-width: 34em; }

/* "At a glance": the short answer box at the top of a guide */
.keyfacts { background: var(--ink-2); border-radius: 12px; padding: 22px 24px; box-shadow: inset 0 0 0 1px var(--rule); }
.keyfacts h2, .keyfacts .title { margin: 0 0 12px; font-size: 19px; line-height: 1.25; color: var(--bone); letter-spacing: 0; }
.keyfacts dl { margin: 0; display: grid; gap: 10px; }
.keyfacts dl div { display: grid; gap: 2px; }
@media (min-width: 560px) { .keyfacts dl div { grid-template-columns: 8.5em minmax(0, 1fr); gap: 16px; } }
.keyfacts dt { font-family: var(--display); font-weight: 600; color: var(--bone); }
.keyfacts dd { margin: 0; color: var(--soft); }
.keyfacts p + p { margin-top: 10px; }

/* ---------- 2. components ---------- */
/* Callouts: a note beside the main text. Use .tip for advice and .warn for a caution. */
.callout { position: relative; border-radius: 10px; padding: 18px 20px 18px 22px; background: rgba(19, 43, 53, 0.7); box-shadow: inset 3px 0 0 var(--gold), inset 0 0 0 1px var(--rule); color: var(--soft); }
.callout.tip { box-shadow: inset 3px 0 0 var(--cool), inset 0 0 0 1px var(--rule); }
.callout.warn { box-shadow: inset 3px 0 0 var(--hot), inset 0 0 0 1px var(--rule); background: rgba(239, 181, 74, 0.06); }
.callout-title { display: block; font-family: var(--display); font-weight: 700; font-size: 18px; line-height: 1.25; color: var(--bone); margin-bottom: 6px; }
.callout > * + * { margin-top: 10px; }
.callout > .callout-title + * { margin-top: 0; }

/* Data tables. Wrap every table in .table-wrap so wide ones scroll sideways on a phone. */
.table-wrap { overflow-x: auto; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--rule); background: rgba(19, 43, 53, 0.45); -webkit-overflow-scrolling: touch; }
.table-wrap:focus-visible { outline-offset: 2px; }
table.data { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.4; color: var(--soft); font-variant-numeric: tabular-nums lining-nums; }
table.data caption { caption-side: top; text-align: left; padding: 14px 16px 4px; font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--bone); }
table.data caption .muted { font-weight: 500; font-size: 15px; }
table.data th, table.data td { padding: 11px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
table.data thead th { font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--dim); white-space: nowrap; border-bottom-color: var(--rule-2); }
table.data tbody th { font-family: var(--display); font-weight: 600; color: var(--bone); }
table.data tbody tr:last-child > * { border-bottom: 0; }
table.data tbody tr:hover > * { background: rgba(237, 230, 214, 0.035); }
table.data .num { text-align: right; white-space: nowrap; font-family: var(--display); font-weight: 600; }
table.data code { white-space: nowrap; }
/* Sticky cells need an opaque background: the wrap's tint over ink. */
table.data .sticky-col { position: sticky; left: 0; background: #10242d; z-index: 1; box-shadow: 1px 0 0 var(--rule); }
table.data tr.ours > .sticky-col { box-shadow: inset 3px 0 0 var(--gold), 1px 0 0 var(--rule); }
table.data .note { display: block; color: var(--dim); font-size: 14px; margin-top: 2px; }
@media (max-width: 640px) { table.data { font-size: 15px; } table.data th, table.data td { padding: 10px 12px; } }
/* Comparison tables on phones: let the next column peek in, and glow at the edge while more is off-screen.
   #10242d is the wrap's tint over ink (the sticky column's color). The cover layer scrolls with the
   table (local) and hides the glow (scroll) once you reach the end. Fixed column widths apply only
   to comparison tables (a sticky first column); other wide tables keep fitting the screen. */
@media (max-width: 640px) {
  .table-wrap.wide table.data:has(.sticky-col) { width: max-content; }
  .table-wrap.wide table.data:has(.sticky-col) th, .table-wrap.wide table.data:has(.sticky-col) td { width: 10rem; min-width: 10rem; max-width: 10rem; }
  .table-wrap.wide table.data:has(.sticky-col) thead th { white-space: normal; }
  .table-wrap.wide table.data:has(.sticky-col) .sticky-col { width: 7.25rem; min-width: 7.25rem; max-width: 7.25rem; }
  .table-wrap.wide table.data caption { max-width: calc(100vw - 2 * var(--gutter)); }
}
.table-wrap.wide {
  background-color: #10242d;
  background-image:
    linear-gradient(to left, #10242d 40%, rgba(16, 36, 45, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(210, 164, 92, 0.5), rgba(210, 164, 92, 0));
  background-position: 100% 0, 100% 0;
  background-size: 48px 100%, 18px 100%;
  background-repeat: no-repeat;
  background-attachment: local, scroll;
}
/* Yes / no / partly marks for comparison tables. The word stays in the HTML for screen readers. */
.yes, .no, .part { display: inline-flex; align-items: center; gap: 7px; font-family: var(--display); font-weight: 600; white-space: nowrap; }
.yes::before, .no::before, .part::before { content: ''; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.yes { color: var(--bone); } .yes::before { background: var(--gold); }
.no { color: var(--dim); } .no::before { box-shadow: inset 0 0 0 1.5px var(--dim); }
.part { color: var(--soft); } .part::before { background: linear-gradient(90deg, var(--gold) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--gold); }
table.data tr.ours > * { background: #1e2d30; }
table.data tbody tr.ours > th { box-shadow: inset 3px 0 0 var(--gold); }

/* Stat glossary entry: name, short code, definition, formula and the typical range. */
.stat-list { display: grid; gap: 0; margin-top: 24px; border-top: 1px solid var(--rule); }
.stat-entry { padding: 26px 0; border-bottom: 1px solid var(--rule); }
.stat-entry h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; font-size: 24px; color: var(--bone); }
.stat-entry .abbr { font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--ink); background: var(--bone); border-radius: 5px; padding: 1px 7px; letter-spacing: 0.01em; }
.stat-entry p { margin-top: 10px; color: var(--soft); }
.stat-entry dl { display: grid; gap: 8px; margin: 14px 0 0; }
.stat-entry dl div { display: grid; gap: 2px; }
@media (min-width: 560px) { .stat-entry dl div { grid-template-columns: 9em minmax(0, 1fr); gap: 14px; align-items: baseline; } }
.stat-entry dt { font-family: var(--display); font-weight: 600; color: var(--dim); font-size: 16px; }
.stat-entry dd { margin: 0; color: var(--soft); }
.stat-entry .read { color: var(--soft); }
.stat-entry .read .hot { color: var(--hot); font-weight: 600; }
.stat-entry .read .cool { color: var(--cool); font-weight: 600; }
/* Typical range bar: an inline SVG, 0-100% drawn on a 200-unit-wide viewBox (x = 2 x value).
   Geometry lives in attributes, so the page needs no inline styles. */
.range { display: block; width: 100%; max-width: 360px; height: auto; margin-top: 6px; overflow: visible; }
.range .low { fill: rgba(125, 184, 234, 0.34); }
.range .high { fill: rgba(239, 181, 74, 0.32); }
.range .band { fill: var(--bone); }
.range text { fill: var(--dim); font-family: var(--display); font-weight: 600; font-size: 7.5px; }
.range text.lo { text-anchor: end; }

/* Tools roundup entry */
.tool-list { display: grid; gap: 0; margin-top: 24px; border-top: 1px solid var(--rule); }
.tool { padding: 28px 0; border-bottom: 1px solid var(--rule); }
.tool-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.tool-head h3 { margin: 0; font-size: 25px; color: var(--bone); }
.tool-head .kind { font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--dim); }
.tool > p { margin-top: 12px; color: var(--soft); }
.tool dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 24px; margin: 16px 0 0; }
.tool dt { font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--dim); }
.tool dd { margin: 2px 0 0; color: var(--bone); }
.tool .source { margin-top: 14px; font-size: 15px; color: var(--dim); }
.tool.ours { position: relative; }
.tool.ours::before { content: ''; position: absolute; left: -18px; top: 28px; bottom: 28px; width: 3px; border-radius: 2px; background: var(--gold); }
@media (max-width: 1080px) { .tool.ours::before { left: -12px; } }

/* Install block: one line and the button, for the end of guides and posts. */
.install {
  display: grid; gap: 20px; align-items: center;
  margin-top: 64px; padding: 28px; border-radius: 16px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(26, 84, 70, 0.55), rgba(19, 63, 54, 0) 60%),
    var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--rule), 0 24px 60px rgba(0, 0, 0, 0.25);
}
@media (min-width: 720px) { .install { grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; padding: 30px 32px; } }
.install svg.mark { width: 54px; height: 54px; }
.install h2, .install .title { font-size: 26px; line-height: 1.1; color: var(--bone); margin: 0; letter-spacing: -0.004em; }
.install p { margin-top: 6px; color: var(--soft); font-size: 16px; }
.prose .install { margin-top: 56px; }

/* Related pages */
.related { margin-top: 56px; }
.related h2 { font-size: 26px; }
.related ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.related li { border-bottom: 1px solid var(--rule); }
.related a { display: grid; gap: 2px; padding: 16px 0; text-decoration: none; color: var(--bone); font-family: var(--display); font-weight: 600; font-size: 20px; line-height: 1.25; }
.related a span { font-family: var(--body); font-weight: 400; font-size: 16px; color: var(--dim); }
.related a:hover { color: var(--focus); }

/* Blog index */
.post-list { margin: 0; padding: 0; list-style: none; display: grid; border-top: 1px solid var(--rule); max-width: 820px; }
.post-list li { border-bottom: 1px solid var(--rule); }
.post-list a { display: grid; gap: 6px; padding: 26px 0; text-decoration: none; }
.post-list h2, .post-list h3 { font-size: 27px; line-height: 1.12; color: var(--bone); }
.post-list a:hover h2, .post-list a:hover h3 { color: var(--focus); }
.post-list p { color: var(--soft); }
.post-list time { font-family: var(--display); font-weight: 500; font-size: 15px; color: var(--dim); }

/* Changelog */
.release { padding: 28px 0; border-bottom: 1px solid var(--rule); }
.release:first-of-type { border-top: 1px solid var(--rule); }
.release h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: 30px; margin: 0; }
.release h2 time { font-family: var(--display); font-weight: 500; font-size: 19px; color: var(--dim); }
.release h2 .dot { color: var(--faint); font-weight: 500; font-size: 19px; }
.release .status { font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--ink); background: var(--gold); border-radius: 5px; padding: 1px 8px; }
.release ul { margin: 14px 0 0; padding-left: 1.3em; display: grid; gap: 8px; color: var(--soft); }
.release li::marker { color: var(--gold); }
.release p { margin-top: 12px; color: var(--soft); }
.release h2 .status { align-self: center; }
.prose > .more-links { margin-top: 32px; }

/* Support page: ways to get help */
.help-list { display: grid; gap: 16px; margin-top: 28px; }
@media (min-width: 720px) { .help-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.help { padding: 24px; border-radius: 14px; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--rule); display: grid; gap: 10px; align-content: start; }
.help h2 { font-size: 24px; margin: 0; }
.help p { color: var(--soft); }
.help .btn { justify-self: start; margin-top: 6px; }