/* TASK-1094 — the registry /online-casinos on new, the owner's variant B of INBOX #246 (the short answer as the head
   card). The frame is the guide's (TASK-1074 guide.css: tinted head, the facts place right of the H1 from 960 px, the
   «On this page» bar of TASK-1069); this file holds only what the registry has of its own, by the values of
   docs/os/work/TASK-1094/spec.md and preview.html (ux* rounds R-1…R-6): check dates, the answer card, the legal
   notice, the screening table and the wide prose tables (.scr), «Field / What we found» (.ff), the checklist (.ck),
   the A–Z grid (.crl) and the main site's figures (.vz, rules of site/partials/a2-reg-css.html on the owner's tokens:
   red → purple-deep/purple-soft as TASK-1038, green → on-mint/mint). Owner's tokens only, no new colours (#b9a6dd and
   #eee9f5 of the mock-up are not in new's CSS — --line, as spec.md says). Loaded after guide.css. */

/* 1) head: check dates, the answer card (B) */
.reg-top .dates { display: flex; flex-wrap: wrap; gap: 4px 14px; max-width: 780px; margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.reg-top .dates b { color: var(--ink); font-weight: 800; }
.reg-top .ans { margin: 14px 0 0; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; }
.reg-top .ans p { margin: 0; font-size: 17px; line-height: 1.6; }          /* R-2: 17 on every width */
.reg-top .ans strong { font-weight: 800; }
@media (min-width: 960px) {
  .reg-top.has-facts .ans { margin: 52px 0 0; }
}

/* 2) the text: one 780 px column; the screening table (≥ 1200) and the A–Z grid use the page width. The body is the
   size container of the .scr/.ff/.crl rules (as the frame of the mock-up): its width is the window's. */
.reg-body { container-type: inline-size; }
.reg-text {
  overflow-wrap: break-word;                                   /* R-1: only a word longer than its box may break */
}
body.registry-page main .reg-body .prose.reg-text > :not(.scr):not(.crl) { max-width: 780px; }
.reg-text .reg-notice { margin: 22px 0 0; padding: 12px 16px; background: var(--surface); border-left: 4px solid var(--purple-deep); border-radius: 0 12px 12px 0; }
.prose .reg-notice p { margin: 0; font-size: 14px; line-height: 1.6; }
.reg-text .reg-notice + h2 { margin-top: 28px; padding-top: 0; border-top: 0; }
.reg-text .pagefoot { font-size: 14px; line-height: 1.6; color: var(--muted); }
.reg-text hr { margin: 28px 0; border: 0; border-top: 1px solid var(--line); }

/* 3) status word + sign «Under test» (never a score, never colour alone); «Not established» muted italic */
.reg-text .st { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 4px; font-size: 13px; font-weight: 800; line-height: 20px; white-space: nowrap; }
.reg-text .st svg { width: 12px; height: 12px; flex: none; }
.reg-text .st-test { background: var(--purple-soft); color: var(--purple-deep); border: 1px solid var(--line); }
.reg-text .ne { color: var(--muted); font-style: italic; }

/* 4) card table (R-1, R-5, R-6): the screening table of 10 casinos (.cas) and the wide prose tables — payments (.pay),
   licences (.lic). Below 1200 px a card per row, every field labelled; from 1200 px a table across the page width with
   fixed column widths. Words never break mid-word. Column widths only in table mode (R-6: never inline on <col>). */
.scr { margin: 14px 0 12px; max-width: 780px; overflow-wrap: normal; word-break: normal; -webkit-hyphens: manual; hyphens: manual; }
.scr table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }      /* R-3: cells 15 */
.scr thead { display: none; }
.scr table, .scr tbody { display: block; }
.scr colgroup { display: none; }
.scr tr { display: block; margin: 0 0 10px; padding: 10px 14px 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.scr td { display: grid; grid-template-columns: 38% minmax(0, 1fr); gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); }
.scr td::before { content: attr(data-l); font-size: 13px; font-weight: 800; line-height: 1.45; color: var(--muted); }
.scr td.nm { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; justify-content: space-between; border-top: 0; padding: 0 0 8px; font-size: 17px; font-weight: 800; }
.scr td.nm::before { content: none; }
.scr td.nm a { display: inline-flex; align-items: center; min-height: 44px; font-size: 17px; font-weight: 800; }
.scr td.stc { display: none; }                     /* cards: the status is in the card head, the cell stays for the table */
@container (min-width: 600px) { .scr td { grid-template-columns: 30% minmax(0, 1fr); } }
/* TASK-1126: cards only — a word longer than its cell («conversion/withdrawal» at 320 with V05 spacing) may break;
   the ≥ 1200 table keeps R-1's overflow-wrap: normal. */
@container (max-width: 1199.98px) { .scr td { overflow-wrap: break-word; } }
@container (min-width: 1200px) {
  .scr { max-width: none; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; overflow: hidden; }
  .scr table { display: table; table-layout: fixed; }
  .scr tbody { display: table-row-group; }
  .scr colgroup { display: table-column-group; }
  .scr.cas col:nth-child(1) { width: 15%; } .scr.cas col:nth-child(2) { width: 19%; } .scr.cas col:nth-child(3) { width: 13%; }
  .scr.cas col:nth-child(4) { width: 18%; } .scr.cas col:nth-child(5) { width: 22%; } .scr.cas col:nth-child(6) { width: 13%; }
  .scr.pay col:nth-child(1) { width: 16%; } .scr.pay col:nth-child(2) { width: 16%; } .scr.pay col:nth-child(3) { width: 20%; }
  .scr.pay col:nth-child(4) { width: 16%; } .scr.pay col:nth-child(5) { width: 14%; } .scr.pay col:nth-child(6) { width: 18%; }
  .scr.lic col:nth-child(1) { width: 16%; } .scr.lic col:nth-child(2) { width: 14%; } .scr.lic col:nth-child(3) { width: 22%; }
  .scr.lic col:nth-child(4) { width: 16%; } .scr.lic col:nth-child(5) { width: 14%; } .scr.lic col:nth-child(6) { width: 18%; }
  .scr thead { display: table-header-group; }
  .scr th { padding: 11px 12px; background: var(--purple-deep); color: var(--on-purple); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; text-align: left; vertical-align: bottom; }
  .scr tr { display: table-row; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; }
  .scr td, .scr td.nm, .scr td.stc { display: table-cell; padding: 11px 12px; border-top: 1px solid var(--line); vertical-align: top; }
  .scr td::before { content: none; }
  .scr td.nm .st { display: none; }
  .scr td.nm a { min-height: 0; font-size: 17px; }
}
/* R-4: the two notes under the screening table in one frame, then the jump to the A–Z grid */
.reg-text .after-box { margin: 0 0 14px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.prose .after-box p { margin: 0 0 8px; font-size: 17px; line-height: 1.6; }
.prose .after-box p:last-child { margin: 0; }
.reg-text .reg-jump { margin: 0 0 16px; }
.reg-text .reg-jump a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 800; }

/* 5) «Field / What we found» of each review: phone = the field above its value */
.ff { margin: 12px 0 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; overflow: hidden; }
.ff table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.ff thead th { padding: 9px 14px; background: var(--purple-soft); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--purple-deep); text-align: left; }
.ff thead th + th { display: none; }
.ff tbody th, .ff tbody td { display: block; padding: 0 14px; text-align: left; }
.ff tbody th { padding-top: 10px; font-size: 12px; font-weight: 800; color: var(--muted); border-top: 1px solid var(--line); }
.ff tbody td { padding-bottom: 10px; }
@container (min-width: 600px) {
  .ff thead th + th { display: table-cell; }
  .ff tbody th, .ff tbody td { display: table-cell; padding: 10px 14px; border-top: 1px solid var(--line); vertical-align: top; }
  .ff tbody th { width: 34%; font-size: 14px; color: var(--ink); }
}

/* 6) the checklist: the whole line is the label — one press zone ≥ 44 px, Space toggles, focus ring on the box */
.ck { margin: 16px 0 22px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; }
.prose .ck h3 { margin: 0 0 4px; }
.prose .ck .sub { margin: 0 0 8px; font-size: 15px; color: var(--muted); }
.prose .ck ol { margin: 0; padding: 0; list-style: none; }
.prose .ck li { margin: 0; }
.ck li + li { border-top: 1px solid var(--line); }
.ck label { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; padding: 10px 0; cursor: pointer; }
.ck input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ck-box { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; background: var(--surface); border: 2px solid var(--purple); border-radius: 6px; }
.ck-box svg { width: 14px; height: 14px; opacity: 0; }
.ck input:checked + .ck-box { background: var(--purple); }
.ck input:checked + .ck-box svg { opacity: 1; }
.ck input:focus-visible + .ck-box { outline: 3px solid var(--purple); outline-offset: 2px; }
.ck b { display: block; font-size: 16px; line-height: 1.4; }
.ck .t { display: block; font-size: 14px; line-height: 1.5; color: var(--muted); }
.prose .ck .stop { margin: 12px 0 8px; padding: 10px 14px; border-radius: 10px; background: var(--purple-soft); color: var(--purple-deep); font-weight: 800; }
.prose .ck .foot { margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--mint); color: var(--on-mint); font-size: 14px; }

/* 7) the A–Z grid of every review: logo only, the name in alt (owner TASK-0657); a logo that fails shows two letters
   and keeps its alt for screen readers (the picture shrinks to 1 px instead of display: none).
   TASK-1398 (owner's pick B «Свечение», 5 a row — owner choices 322 and 323 of TASK-1393): no white tile, the 238x96 logo is the tile;
   hover / keyboard focus — soft purple glow (--glow) and 3 % scale; columns 2 / 4 (≥ 560) / 5 (≥ 860); the --ink 8 %
   hairline inside the edge for white-ground logos; «See all» keeps its tile (same rules as crl.css .rv-crl) */
.crl { --glow: 0 0 0 1px color-mix(in srgb, var(--purple) 18%, transparent),
  0 8px 26px color-mix(in srgb, var(--purple) 28%, transparent); }
.crl h2 { scroll-margin-top: 112px; }
.prose .crl ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 12px 0 10px; padding: 0; list-style: none; }
.prose .crl li { margin: 0; }
.crl a { position: relative; display: grid; place-items: center; height: 64px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.crl a:hover { border-color: var(--purple); }
.crl ul a { display: block; height: auto; padding: 0; background: none; border: 0; border-radius: var(--radius-tile);
  transition: transform var(--motion) ease, box-shadow var(--motion) ease; }
.crl ul a::after { content: ''; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent); pointer-events: none; }
.prose .crl ul img { display: block; width: 100%; height: auto; max-width: none; max-height: none; aspect-ratio: 238 / 96;
  object-fit: cover; border-radius: var(--radius-tile); transition: filter var(--motion) ease; }
.crl .ph { display: none; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--purple-soft); color: var(--purple-deep); font-size: 15px; font-weight: 800; }
.crl ul a.is-ph { display: grid; place-items: center; aspect-ratio: 238 / 96; background: var(--purple-soft); }
.crl a.is-ph .ph { display: grid; }
.prose .crl a.is-ph img { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.crl ul a:hover { border-color: transparent; }
@media (hover: hover) {
  .crl ul a:hover { transform: scale(1.03); box-shadow: var(--glow); }
  .crl ul a:hover img { filter: brightness(1.05); }
}
@media (prefers-reduced-motion: reduce) { .crl ul a, .crl ul a:hover { transform: none; } }
.prose .crl .more { margin: 0; }
.crl .more a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 800; }
@container (min-width: 560px) { .prose .crl ul { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
@container (min-width: 860px) { .prose .crl ul { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; } }

/* 8) the main site's figures of the article (.vz): a2-reg-css on the owner's tokens */
.reg-text .vz { margin: 24px 0 28px; padding: 16px 18px; background: var(--page); border: 1px solid var(--line); border-radius: 16px; color: var(--ink); }
.prose .vz h3 { margin: 0 0 4px; font-size: 20px; line-height: 25px; }
.prose .vz p, .prose .vz li { font-size: 15px; line-height: 22px; }
.prose .vz .sub { margin: 0 0 14px; color: var(--muted); }
.prose .vz .note { margin: 14px 0 0; padding: 10px 12px; background: var(--purple-soft); border: 1px solid var(--purple); border-radius: 10px; color: var(--purple); font-weight: 600; }
.prose .vz :is(.foot, .legend) { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 19px; }
.prose .vz ol { margin: 0; padding: 0; list-style: none; }
.prose .vz li { margin: 0 0 8px; }
.vz-legal .cols { display: grid; gap: 16px; }
.prose .vz-legal .col > :is(h4, h5) { margin: 0 0 8px; padding: 10px 12px; border-radius: 10px; color: var(--surface); font-size: 16px; line-height: 22px; text-align: center; }
.vz-legal .op > :is(h4, h5) { background: var(--purple-deep); }
.vz-legal .pl > :is(h4, h5) { background: var(--on-mint); }
.vz-legal ol { counter-reset: s; }
.prose .vz-legal li { counter-increment: s; position: relative; padding: 10px 12px 10px 46px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.vz-legal li::before { content: counter(s); position: absolute; left: 12px; top: 10px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; color: var(--surface); font-size: 13px; font-weight: 700; }
.vz-legal .op li::before { background: var(--purple-deep); }
.vz-legal .pl li::before { background: var(--on-mint); }
.vz-w .row { margin: 0 0 12px; }
.vz-w .lbl { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; font-weight: 600; }
.vz-w .bar { height: 14px; margin: 4px 0; border-radius: 7px; background: var(--line); }
.vz-w .bar span { display: block; height: 100%; border-radius: 7px; background: var(--purple); }
.vz-w .bar.t span { background: var(--on-mint); }
.vz-w .why { color: var(--muted); font-size: 13px; line-height: 19px; }
.vz-b .ex { margin: 0 0 12px; padding: 10px 12px; background: var(--surface); border-left: 6px solid var(--purple); border-radius: 0 10px 10px 0; }
.vz-b .ex.bad { border-left-color: var(--purple-deep); }
.vz-b .ex.good { border-left-color: var(--on-mint); }
.vz-b .ex strong { display: block; margin-bottom: 8px; font-size: 16px; }
.vz-b .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.vz-b .cell { padding: 6px 8px; background: var(--page); border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-size: 13px; }
.vz-b .cell b { display: block; color: var(--ink); font-size: 17px; }
.vz-b .cell small { display: block; }
.vz-b .ex .cell.k b { color: var(--purple); }
.vz-b .ex.bad .cell.k b { color: var(--purple-deep); }
.vz-b .ex.good .cell.k b { color: var(--on-mint); }
.prose .vz-t ol { display: grid; gap: 10px; }
.prose .vz-t li { margin: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.vz-t li b { display: block; padding: 8px 10px; color: var(--surface); font-size: 15px; }
.vz-t li .d { display: block; padding: 8px 10px 0; font-weight: 700; }
.prose .vz-t li p { margin: 0; padding: 4px 10px 10px; color: var(--muted); font-size: 13px; line-height: 19px; }
.vz-t .s1 b { background: var(--purple); } .vz-t .s2 b { background: var(--purple-deep); } .vz-t .s3 b { background: var(--purple); } .vz-t .s4 b { background: var(--on-mint); }
.vz-t .s1 .d { color: var(--purple); } .vz-t .s2 .d { color: var(--purple-deep); } .vz-t .s3 .d { color: var(--purple); } .vz-t .s4 .d { color: var(--on-mint); }
.vz-t .ends { display: flex; justify-content: space-between; margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.vz-r .cards { display: grid; gap: 10px; }
.vz-r .card { padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-left: 8px solid var(--muted); border-radius: 10px; font-size: 14px; line-height: 20px; }
.vz-r .card.a { border-left-color: var(--purple); }
.vz-r .card.g { border-left-color: var(--on-mint); }
.vz-r .card.r { border-left-color: var(--purple-deep); }
.vz-r .card b { display: block; margin-bottom: 6px; color: var(--ink); font-size: 16px; }
.vz-r .card dl { margin: 0 0 6px; color: var(--muted); font-size: 13px; }
.vz-r .card dt { display: inline; font-weight: 600; }
.vz-r .card dd { display: inline; margin: 0; }
.vz-r .card dd::after { content: ""; display: block; }
@media (min-width: 640px) {
  .vz-legal .cols { grid-template-columns: 1fr 1fr; }
  .vz-b .grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 700px) {
  .prose .vz-t ol { grid-template-columns: repeat(4, 1fr); }
  .vz-r .cards { grid-template-columns: 1fr 1fr; }
}

/* focus: one visible ring on every target of the registry's own blocks */
.reg-text :is(.scr, .after-box, .reg-jump, .crl) a:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
.reg-text .crl ul a:focus-visible { box-shadow: var(--glow); outline-offset: 3px; }