/* TASK-1298: the catalog block of /online-casinos on new — the owner's variant A «Карточки» of TASK-1276 (INBOX #291,
   22.10.2026; spec docs/os/work/TASK-1276/spec.md § 2–5) on the markup of TASK-1281 (tools/newsite/catalog.py).
   Every casino a white card: logo + name on top, the ACMA word with its check date, score · date, Read review | Visit;
   one row of six columns from 960 px. The ad line, the filter and the order (catalog.js), the count, the «no data»
   line and the empty box are written by the build, hidden until the script runs.
   Owner's tokens only (styles.css, tokens.css): colours, radii, the type scale, the breakpoints of tokens.css.
   Status pairs as the figures of new (figures.css .sig): Blocked = --purple-soft / --purple-deep (the red role of
   brand.md «Сигналы» on new, TASK-1038), Not on the list = --divider / --muted (grey: nothing found ≠ safe). */

/* 1) the block and the ad line (above the first Visit, Т8) */
.cat { max-width: var(--container); margin: 0 auto; padding: 18px var(--gutter) 8px; color: var(--ink); }
.cat [hidden] { display: none !important; }
.cat .adline { margin: 0 0 14px; padding: 0 0 12px; border-bottom: 1px solid var(--line); color: var(--muted);
  font-size: var(--fs-14); line-height: 1.55; }
.cat .adline strong { color: var(--ink); font-weight: 800; }
.cat .adline a { color: var(--purple); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.cat .adline .dot { margin: 0 6px; }

/* 2) the tools: name, ACMA (three choices with their counts), order */
.cat-tools { display: grid; gap: 12px; margin: 0 0 12px; padding: 14px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius-tile); }
.cat-f { margin: 0; padding: 0; border: 0; min-width: 0; }
.cat-f > label, .cat-f > legend { display: block; margin: 0 0 6px; padding: 0; font-size: var(--fs-15); font-weight: 800;
  line-height: 1.3; color: var(--ink); }
.cat-f input[type="search"], .cat-f select { box-sizing: border-box; width: 100%; height: var(--control-h); padding: 0 12px;
  background: var(--surface); border: 1.5px solid var(--muted); border-radius: var(--radius-button); color: var(--ink);
  font: 500 var(--fs-16)/1.3 var(--font); }
.cat-f input[type="search"]::placeholder { color: var(--muted); opacity: 1; }
.cat-f input:focus-visible, .cat-f select:focus-visible { outline: var(--focus-w) solid var(--purple); outline-offset: 2px;
  border-color: var(--purple); }
.cat-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-seg label { position: relative; display: block; cursor: pointer; }
.cat-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cat-seg span { display: inline-flex; align-items: center; gap: 6px; min-height: var(--control-h); padding: 0 14px;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-pill); font-size: var(--fs-15);
  font-weight: 700; line-height: 1.2; color: var(--ink); }
.cat-seg span b { font-weight: 800; color: var(--muted); }
.cat-seg input:checked + span { background: var(--purple-soft); border-color: var(--purple); color: var(--purple-deep); }
.cat-seg input:checked + span::before { content: "✓"; font-weight: 800; }          /* the choice not by colour alone */
.cat-seg input:checked + span b { color: var(--purple-deep); }
.cat-seg input:focus-visible + span { outline: var(--focus-w) solid var(--purple); outline-offset: 2px; }
@media (min-width: 960px) {
  .cat-tools { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 16px; }
}

/* 3) the count (aria-live), reset, the «no data» line, the empty box */
.cat-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 0 0 8px; }
.cat .cat-count { margin: 0; font-size: var(--fs-16); font-weight: 800; line-height: 1.45; color: var(--ink); }
/* UX-01 (ux* 22.10): on 320 with V05 spacing «ACMA list checked 18 Oct 2026» is wider than the 288 px column —
   the phrase may wrap up to 360 px (token width), wider it stays on one line */
.cat-when { white-space: nowrap; }
@media (max-width: 360px) { .cat-when { white-space: normal; } }
.cat-reset { min-height: var(--control-h); padding: 0 14px; background: var(--surface); border: 1.5px solid var(--purple);
  border-radius: var(--radius-button); color: var(--purple); font: 800 var(--fs-15)/1.2 var(--font); cursor: pointer; }
.cat-reset:focus-visible { outline: var(--focus-w) solid var(--purple); outline-offset: 2px; }
.cat .cat-gap { margin: 0 0 10px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--muted); border-radius: 0 var(--radius-control) var(--radius-control) 0;
  font-size: var(--fs-15); line-height: 1.45; color: var(--ink); }
.cat-empty { margin: 4px 0 16px; padding: 16px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-tile); }
.cat-empty p { margin: 0 0 12px; font-size: var(--fs-17); line-height: 1.5; }
.cat-empty strong { font-weight: 800; }

/* 4) the parts of a row */
.cat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cat-row { margin: 0; min-width: 0; }
.cat-row p { margin: 0; }
.cat-logo { display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-control); overflow: hidden; }
.cat-logo img { display: block; max-width: 100%; height: auto; object-fit: contain; }
.cat-mono { display: grid; place-items: center; width: 40px; height: 32px; border-radius: var(--radius-sm);
  background: var(--purple-soft); color: var(--purple-deep); font-size: var(--fs-15); font-weight: 800; }
.cat-name { color: var(--ink); font-weight: 800; text-decoration: none; overflow-wrap: anywhere; }
/* UX-02 (ux* 22.10): the name is a link of its own, not inside a sentence — full 44 px press zone */
.cat-name { display: inline-flex; align-items: center; min-height: var(--control-h); }
.cat-name:hover { color: var(--purple); text-decoration: underline; }
/* the status: word + its check date on one signal ground (the word is the meaning, the ground only marks it) */
.cat-acma { --sig-bg: var(--divider); --sig-tx: var(--muted); }
.cat-row[data-acma="blocked"] .cat-acma { --sig-bg: var(--purple-soft); --sig-tx: var(--purple-deep); }
.cat-row .cat-acma { justify-self: start; align-self: center; display: inline-flex; flex-wrap: wrap; align-items: baseline;
  gap: 0 8px; max-width: 100%; padding: 3px 10px; border-radius: var(--radius-sm); background: var(--sig-bg);
  color: var(--sig-tx); font-size: var(--fs-15); font-weight: 800; line-height: 1.45; }
.cat-checked { font-weight: 500; color: var(--muted); font-size: var(--fs-14); }
/* «How we rate» is not inside a sentence (the line is «7.5 / 10 How we rate»), so it gets the full 44 px press zone */
.cat-score { display: flex; align-items: center; min-height: var(--control-h); white-space: nowrap;
  font-size: var(--fs-15); line-height: 1.45; font-weight: 800; color: var(--ink); }
.cat-score a { margin-left: 4px; font-weight: 600; font-size: var(--fs-14); color: var(--purple); text-decoration: underline;
  text-underline-offset: 2px; display: inline-flex; align-items: center; min-height: var(--control-h); vertical-align: middle; }
.cat-row[data-score=""] .cat-score { min-height: 0; font-weight: 600; font-style: italic; color: var(--muted); }
.cat-date { font-size: var(--fs-14); line-height: 1.45; color: var(--muted); }
.cat-read, .cat-visit { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--control-h);
  text-decoration: none; white-space: nowrap; }
.cat-ad, .cat-age { display: inline-block; padding: 0 5px; border: 1px solid var(--line); border-radius: var(--radius-chip);
  font-size: var(--fs-12); font-weight: 800; line-height: 1.5; color: var(--muted); background: var(--surface); }
.cat-row a:focus-visible { outline: var(--focus-w) solid var(--purple); outline-offset: 2px; border-radius: var(--radius-chip); }

/* 5) the card (variant A) — phone: logo + name | the status | score · date | Read review, Visit; the line breaks
   are the row's ::before/::after */
.cat-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-tile); }
.cat-logo { order: 1; flex: 0 0 84px; height: 34px; }
.cat-logo img { width: 84px; height: 34px; }
.cat-name { order: 2; flex: 1 1 calc(100% - 96px); font-size: var(--fs-17); line-height: 1.3; }
.cat-row .cat-acma { order: 3; flex: 0 1 auto; }
.cat-row::before { content: ""; order: 4; flex: 1 1 100%; height: 0; margin-bottom: -6px; }
.cat-score { order: 5; flex: 0 1 auto; }
.cat-date { order: 6; flex: 0 1 auto; }
.cat-score::after { content: "·"; margin-left: 10px; color: var(--muted); font-style: normal; font-weight: 400; }
.cat-row::after { content: ""; order: 9; flex: 1 1 100%; height: 0; margin-bottom: -6px; }   /* actions on their own line */
.cat-read { order: 10; flex: 0 0 auto; padding: 0 16px; border: 1.5px solid var(--purple); border-radius: var(--radius-button);
  background: var(--surface); color: var(--purple); font-size: var(--fs-15); font-weight: 800; }
.cat-read:hover { background: var(--purple-soft); }
.cat-visit { order: 11; flex: 0 0 auto; padding: 0 6px; color: var(--ink); font-size: var(--fs-14); font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 960px) {
  .cat-row::before, .cat-row::after { content: none; }
  .cat-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1.4fr) 156px 124px 110px;   /* fixed: every row its own grid, columns line up */
    grid-template-areas: "logo name acma score read visit" "logo name acma date read visit"; gap: 2px 16px; padding: 10px 16px; }
  .cat-logo { grid-area: logo; height: 48px; }
  .cat-logo img { width: 120px; height: 48px; }
  .cat-name { grid-area: name; }
  .cat-row .cat-acma { grid-area: acma; }
  .cat-score { grid-area: score; align-self: end; }
  .cat-date { grid-area: date; align-self: start; }
  .cat-score::after { content: none; }
  .cat-read { grid-area: read; }
  .cat-visit { grid-area: visit; }
  .cat-row:not(:has(.cat-visit)) .cat-read { grid-column: read / span 2; justify-self: start; }
}