/* TASK-1074 — a guide article on new, the owner's variant C «Справочник» of TASK-1048 (20.10.2026, INBOX #230):
   a tinted head (breadcrumb, H1, lead, byline) with the facts card on its right from 960 px, then the review's
   «On this page» bar (toc.css, TASK-1069 — the owner's condition «как в обзорах»), the text in one 780 px column with
   a sticky mint help card in a side rail from 960 px, «More in <section>» and player protection at the end.
   Rules = branch C of docs/os/work/TASK-1048/preview.html (.c-hero, .c-top, .kf-c, .c-body, .help-c, .more, .tw2)
   on the page's own classes, with the conditions of ux* TASK-1048 (ux.md): UX-02 the facts list is set like the text
   (16/17 px), UX-03 tables of up to 5 columns become «label → value» cards below 760 px while wider tables and
   matrices scroll inside their box with the first column pinned, UX-08 byline links get a 44 px touch zone; UX-01
   does not arise — «On this page» is the bar, not a closed <details> in the rail. Owner's tokens only. Guide pages
   only, after toc.css.
   TASK-1090 — the same template for all 100 guides of TASK-1043: the designer's changes D-01, D-04, D-05, D-07, D-08
   (docs/os/work/TASK-1090/spec.md, guide.css there) put into this file, the fixes of TASK-1074 kept (.tv, card cells
   break-word, 44 px zone of the head links). No new token. */

/* 1) the tinted head */
.guide-hero { background: var(--purple-soft); border-bottom: 1px solid var(--line); }
.guide-top { max-width: calc(var(--page-width) + 52px); margin: 0 auto; padding: 12px 26px 26px; }
.guide-head h1 { margin: 0 0 14px; font-size: 40px; line-height: 1.15; font-weight: 800; letter-spacing: -.04em; overflow-wrap: anywhere; }
.guide-lead { max-width: 780px; margin: 0 0 14px; font-size: 18px; line-height: 1.6; color: var(--muted); }
.guide-head .byline { max-width: 780px; margin: 0; }
.guide-check { max-width: 780px; margin: 0 0 14px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.guide-head :is(.byline, .guide-check) a { display: inline-block; min-height: 44px; padding-block: 12px; margin-block: -12px; }   /* UX-08: 44 px zone (min-height: a 14 px line gave 43.5, layout Н4) */
.guide-lead:last-child { margin-bottom: 0; }
/* D-01 (TASK-1090): the page's date line (Updated / Checked / Last updated … · 18+ · How this site is funded) and the
   author line stand right under the H1, before the lead — one ruled block, so the date is on a phone's first screen
   at any lead length (TASK-1074 had it under the lead, below the facts on PayID 390) */
.guide-meta { max-width: 780px; margin: 0 0 14px; padding: 8px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
              font-size: 14px; line-height: 1.6; color: var(--muted); }
.guide-meta p { margin: 0; }
.guide-meta p + p, .guide-meta .byline { margin-top: 2px; }
.guide-meta strong { color: var(--ink); }

/* the facts card: the page's own «Key facts» list (UX-02: text size), its check line under it */
.guide-facts { margin: 18px 0 0; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; }
.guide-facts .facts-h { margin: 0 0 8px; padding: 0; border: 0; font-size: 13px; line-height: 1.4; font-weight: 800;
                        letter-spacing: .08em; text-transform: uppercase; color: var(--purple-deep); }
.guide-facts ul { margin: 0; padding-left: 20px; }
.guide-facts li { margin: 0 0 8px; font-size: 17px; line-height: 1.55; }
.guide-facts li:last-child { margin-bottom: 0; }
.guide-facts > p:not([class]) { margin: 0; font-size: 17px; line-height: 1.55; }      /* D-02: oga-key / tlc-box facts are paragraphs */
.guide-facts > p:not([class]) + p:not([class]) { margin-top: 10px; }

/* the homepage-only rules of content.css (TASK-0993: justified paragraphs, blocks at full .prose width) are written
   as body:not(.review-page) and so reach guide pages too; here guides keep left text and the 780 px measure, like the
   reviews — selectors one class heavier than those rules */
body.guide-page main .prose.guide-text p:not([class]) { text-align: left; text-align-last: auto; text-justify: auto;
  -webkit-hyphens: manual; hyphens: manual; }
body.guide-page main .prose.guide-end > :is(.protect, p, ul, ol, h2, .guide-more, .guide-all) { max-width: 780px; }

/* 2) the text column and the help rail */
.guide-body { max-width: calc(var(--page-width) + 52px); margin: 0 auto; padding: 0 26px; }
.guide-body .prose.guide-text { max-width: 780px; margin: 0; padding: 0; }
.guide-text > h2:first-child, .guide-text > :first-child > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.guide-rail { display: none; }
.guide-help { padding: 14px 16px; background: var(--mint); color: var(--on-mint); border-radius: 13px; font-size: 14px; line-height: 1.5; }
.guide-help p { margin: 0; }
.guide-help-tel { display: inline-flex; align-items: center; min-height: 44px; font-size: 19px; font-weight: 800; color: var(--on-mint); }

/* D-04 (TASK-1090): boxes of the text that stay where the author put them (a summary-styled block after the first
   section is that section's checklist — «Before you deposit», «If you see this, stop» — not the page's facts, D-02)
   and the main site's notes and help boxes: one look for all of them (on new they had no style) */
.guide-text :is(.tpk-key, .tpk-help, .bjx-box, .rl-box, .tlc-box, .oga-key) { max-width: 780px; margin: 18px 0 22px; padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--purple); border-radius: 12px; }
.guide-text :is(.tpk-help, .bjx-box--help) { background: var(--mint); border-color: var(--mint); color: var(--on-mint); }
.guide-text :is(.tpk-help, .bjx-box--help) :is(p, li, a, strong) { color: var(--on-mint); }
.guide-text .rl-warn { border-left-color: var(--purple-deep); }
.guide-text :is(.tpk-key-h, .bjx-box-t) { display: block; margin: 0 0 8px; font-size: 13px; line-height: 1.4; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--purple-deep); }
.guide-text :is(.tpk-key, .bjx-box, .rl-box, .tlc-box, .oga-key) > :last-child { margin-bottom: 0; }
.guide-text .tpk-note { max-width: 780px; font-size: 15px; line-height: 1.6; color: var(--muted); }

/* FAQ folds of the main site (details.hp-faq / a2t-faq with the question in an <h3>) */
.guide-text details { border-bottom: 1px solid var(--line); }
.guide-text details > summary { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 0; cursor: pointer; list-style: none; }
.guide-text details > summary::-webkit-details-marker { display: none; }
.guide-text details > summary::after { content: "+"; flex: none; margin-left: auto; font-size: 22px; font-weight: 700; color: var(--purple); }
.guide-text details[open] > summary::after { content: "\2212"; }
.guide-text details > summary:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; border-radius: 6px; }
.guide-text details > summary :is(h3, h4) { margin: 0; font-size: 18px; line-height: 1.35; }

/* figures of the main site drawn twice — a phone picture (-m) and a computer one (-d); its switch at 641 px */
.guide-text figure :is(.tpk-d, .tpk-m, .rl-d, .rl-m, .tlc-d, .tlc-m) > :is(img, picture, svg) { display: block; width: 100%; max-width: 100%; height: auto; }
.guide-text :is(.tpk-d, .rl-d, .tlc-d) { display: none; }
.guide-text :is(.tpk-m, .rl-m, .tlc-m) { display: block; }
@media (min-width: 641px) {
  .guide-text :is(.tpk-d, .rl-d, .tlc-d) { display: block; }
  .guide-text :is(.tpk-m, .rl-m, .tlc-m) { display: none; }
}

/* 3) tables. D-05 (TASK-1090): three kinds, chosen by the build from the table itself (new_guides.tables):
   tw-cards  — a table of words with a header row, any number of columns: «label → value» cards below 760
               (owner 17.10, TASK-0357: a table on 320–414 is whole on the screen, nothing scrolls sideways);
   tw-matrix — a grid of short codes (every body cell ≤ 3 letters, ≥ 6 columns: blackjack and baccarat charts):
               squeezed into the column at 320+, letters centred, first column pinned, no card;
   tw-wide   — a table without a header row: scrolls inside its box, first column pinned. */
.guide-text :is(.tw-wide, .tw-matrix) :is(th, td) { overflow-wrap: normal; }   /* words whole: the table scrolls instead of «H/a/n/d» */
/* card tables at their table width (≥760) keep words whole too (layout TASK-1074 Н2: «Casino/nic», «Fou/nde/d» —
   .prose sets anywhere, and the table squeezed columns to one letter); break-word still breaks a lone long URL */
.guide-text .tw-cards :is(th, td) { overflow-wrap: break-word; }
.guide-text .tw-cards .tv { display: block; min-width: 0; }
.guide-text :is(.tw-wide, .tw-matrix) tbody :is(td, th):first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.guide-text :is(.tw-wide, .tw-matrix) tr > th:first-child { position: sticky; left: 0; z-index: 1; }
.guide-text :is(.tw-wide, .tw-matrix) thead th:first-child { z-index: 2; }
.guide-text .tw-matrix table { table-layout: fixed; min-width: 0; font-size: 14px; line-height: 1.2; }
.guide-text .tw-matrix :is(th, td) { padding: 8px 2px; text-align: center; vertical-align: middle; font-variant-numeric: tabular-nums; }
.guide-text .tw-matrix :is(thead th, tbody th):first-child { width: 22%; padding-left: 10px; text-align: left; }
.guide-text .tw-matrix td { font-weight: 800; border-left: 1px solid var(--line); }
/* the blackjack chart's meaning lives in the letter (and its legend); a tint only helps the eye find a block —
   owner's tokens: S on mint (on-mint), D/Ds on purple-soft (purple-deep), P/Ph purple letters underlined, H and Rh
   plain ink (Rh underlined dotted) */
.guide-text .tw-matrix td.aS, .guide-text .bjx-legend .aS { background: var(--mint); color: var(--on-mint); }
.guide-text .tw-matrix td:is(.aD, .aDs), .guide-text .bjx-legend :is(.aD, .aDs) { background: var(--purple-soft); color: var(--purple-deep); }
.guide-text .tw-matrix td.aP, .guide-text .bjx-legend .aP { color: var(--purple); text-decoration: underline 2px; text-underline-offset: 3px; }
.guide-text .tw-matrix td.aRh, .guide-text .bjx-legend .aRh { text-decoration: underline dotted 2px; text-underline-offset: 3px; }
.guide-text .bjx-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 15px; }
.guide-text .bjx-legend li { display: flex; align-items: center; gap: 8px; margin: 0; }
.guide-text .bjx-k { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 28px; padding: 0 4px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--surface); font-weight: 800; font-size: 14px; }
.guide-text .bjx-strat-g { display: grid; gap: 18px; }
.guide-text .bjx-strat-g table { margin: 0 0 14px; }
@media (min-width: 960px) { .guide-text .bjx-strat-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 4) «More in <section>» — the other pages of the same menu group, then the section page; D-07 (TASK-1090, owner
   #248): one line to the reviews A–Z on the pages that listed every review */
.guide-end { padding-top: 8px; }
.guide-more { margin: 44px 0 0; }
.guide-more h2 { margin: 0 0 12px; padding-top: 0; border-top: 0; font-size: 22px; letter-spacing: -.03em; }
.guide-more ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.guide-more li { margin: 0; }
.guide-more li a { display: flex; align-items: center; min-height: 52px; height: 100%; box-sizing: border-box; padding: 12px 14px; background: var(--surface);
                   border: 1px solid var(--line); border-radius: 12px; font-size: 16px; font-weight: 800; line-height: 1.35; text-decoration: none; }
.guide-more li a:hover { background: var(--purple-soft); }
.guide-more li a[aria-current] { color: var(--ink); }
.more-hub, .guide-all { margin: 10px 0 0; }
:is(.more-hub, .guide-all) a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 800; }

/* 5) D-08 (TASK-1090): the reviews catalog /casino-reviews (letter sections) — the same «On this page» bar; when every
   section is one letter (or «0–9») its list is a grid of letters, all in one view on a phone. A modifier of the
   review component, not a second contents block. */
.guide-page .rtoc-c.rtoc-letters ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; columns: auto; }
.guide-page .rtoc-c.rtoc-letters li { border: 0; }
.guide-page .rtoc-c.rtoc-letters .rtoc-panel a { justify-content: center; min-height: 44px; padding: 10px 4px; border: 1px solid var(--line);
  border-radius: 10px; font-size: 16px; }
.guide-page .rtoc-c.rtoc-letters .rtoc-panel a::before { content: none; }
.guide-page .rtoc-c.rtoc-letters .rtoc-panel a[aria-current] { border-color: var(--purple); }
.prose .guide-cat { margin: 0 0 8px; padding: 0; list-style: none; display: grid; gap: 8px; }   /* .prose ul weighs (0,1,1) */
.guide-cat li { margin: 0; }
.guide-cat a { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-height: 52px; box-sizing: border-box; padding: 10px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; font-size: 16px; font-weight: 800; text-decoration: none; color: var(--ink); }
.guide-cat a:hover { background: var(--purple-soft); }
.guide-cat .cat-st { font-size: 13px; font-weight: 700; color: var(--muted); }
.guide-cat .cat-st b { color: var(--ink); }

/* 6) the roulette payout calculator of /online-roulette/payouts (layout* TASK-1090 return item 4: on new its fields were the
   browser's bare 19 px controls in one line). The main site's rules (site/partials/a2-mid-css.html, .calc) with
   new's tokens: one column of labelled 44 px fields, two from 560 px, results as tiles; its script is calc.js. */
.guide-text .calc { margin: 24px 0 8px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; }
.guide-text .calc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.guide-text .calc label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 20px; color: var(--muted); }
.guide-text .calc :is(select, input[type=number]) { width: 100%; min-height: 44px; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; }
.guide-text .calc :is(select, input):focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
.guide-text .calc :is(select, input):disabled { background: var(--page); color: var(--muted); }
.guide-text .calc-spins span { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.guide-text .calc-spins input[type=checkbox] { width: 20px; height: 20px; margin: 0; accent-color: var(--purple); }
.guide-text .calc-out { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px 14px; margin: 18px 0 10px; padding: 0; }
.guide-text .calc-out div { padding: 10px 12px; border-radius: 8px; background: var(--page); }
.guide-text .calc-out dt { margin: 0; font-size: 13px; line-height: 18px; color: var(--muted); }
.guide-text .calc-out dd { margin: 2px 0 0; font-size: 20px; line-height: 26px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.guide-text .calc-out div.big { grid-column: 1 / -1; border-left: 4px solid var(--purple); }
.guide-text .calc-note { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
@media (min-width: 560px) {
  .guide-text .calc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 760px) {
  .guide-more ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-cat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-text .calc-out { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* the main site: results in one column up to 760 */
  /* layout* TASK-1090 return items 2–3: a card table of 7+ columns read as a table (payouts' bets table, 9 columns; crypto's, 7)
     was 5–84 px wider than the text column on 768–1100 and scrolled, its last column hidden; narrower cell sides
     fit it whole, as on the main site. Tables of up to 6 columns keep their 12 px sides. */
  .guide-text .tw-cards:has(thead th:nth-child(7)) :is(th, td) { padding-left: 6px; padding-right: 6px; }
}
@media (min-width: 960px) {
  .guide-top.has-facts { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
  .guide-top.has-facts .guide-facts { margin: 6px 0 0; }
  /* Key facts taller than the head (FACTS_SIDE_H1 rule, build_new.py) stand under it at the text measure */
  .guide-top.facts-below { display: block; }
  .guide-top.facts-below .guide-facts { max-width: 780px; margin: 18px 0 0; }
  .guide-body { display: grid; grid-template-columns: minmax(0, 780px) 250px; gap: 40px; justify-content: space-between; align-items: start; }
  .guide-rail { display: block; position: sticky; top: 136px; }          /* header 64 + «On this page» bar 54 + 18 */
  .guide-more ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .guide-cat { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 759px) {
  .guide-top { padding: 10px 16px 22px; }
  .guide-head h1 { font-size: 28px; }
  .guide-lead { font-size: 16px; }
  .guide-facts { padding: 14px 16px; }
  .guide-facts li, .guide-facts > p:not([class]) { font-size: 16px; }
  .guide-text :is(.tpk-key, .tpk-help, .bjx-box, .rl-box, .tlc-box, .oga-key) { padding: 14px 16px; }
  .guide-body { padding: 0 16px; }
  /* UX-03: a table of up to 5 columns = one card per row, «label → value», nothing scrolls sideways */
  .guide-text .tw-cards { overflow: visible; background: none; border: 0; border-radius: 0; }
  .guide-text .tw-cards :is(table, tbody, tr, th, td) { display: block; }
  .guide-text .tw-cards thead { display: none; }
  .guide-text .tw-cards caption { display: block; padding: 0 0 8px; }
  .guide-text .tw-cards tr { margin: 0 0 10px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
  .guide-text .tw-cards td { display: grid; grid-template-columns: 42% minmax(0, 1fr); gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line);
                             font-size: 15px; line-height: 1.5; }
  .guide-text .tw-cards td::before { content: attr(data-label); font-size: 12px; line-height: 1.45; font-weight: 800; color: var(--muted); }
  .guide-text .tw-cards tr > :first-child { display: block; padding: 0 0 8px; background: none; font-size: 16px; font-weight: 800; }
  .guide-text .tw-cards tr > :first-child::before { content: none; }
  .guide-text .tw-cards tr > :last-child { border-bottom: 0; }
  /* D-05: a card cell with a long value (more than ~60 letters, the build adds .tw-long) reads label over value */
  .guide-text .tw-cards td.tw-long { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .guide-text .tw-matrix { margin-left: -6px; margin-right: -6px; }
}
@media (max-width: 379px) {
  .guide-text .tw-matrix table { font-size: 13px; }
  .guide-text .tw-matrix :is(thead th, tbody th):first-child { padding-left: 6px; }
}
@media (forced-colors: active) {
  .guide-text .tw-matrix td { forced-color-adjust: auto; }
  .guide-page .rtoc-c.rtoc-letters .rtoc-panel a[aria-current] { border-color: Highlight; }
}
@media print {
  .guide-rail { display: none; }
  .guide-body { display: block; }
}