/* TASK-1012 (owner 20.10.2026): the place number is a corner tag ON the logo tile — a small white tag with a
   --purple digit, flush in the tile's top-left corner, square outer corner (TASK-1071). Replaces TASK-0989's variant C
   (digit left of the tile + thin bracket). Loaded after content.css, homepage only. Only the owner's tokens
   (--surface, --purple as on the score ring and .visit-button; TASK-1071, owner's choice A of INBOX #237). Markup
   unchanged (partials/casino-card.html): .casino-logo > .logo-box > .rk > .rk-n with a hidden «Rank » for screen
   readers (UX-03), then the <img>. Spec: docs/os/work/TASK-1012/ (colour: docs/os/work/TASK-1071/rank-tag-white.css).
   Size per width = the free corner of our logo files: the brand mark lives inside 498×152 of 602×256 (rule v3,
   TASK-0808), so the top 52/256 of the tile height is plate. Tag height ≈ that margin:
     tile 72 px (760–1199) → margin 14.6 → tag 16 · tile 64 (400–759) → 13.0 → tag 14 ·
     tile 56 (<400) → 11.4 → tag 13 · tile 44 (≥1200) → 8.9 → tag 13 (smallest legible tag; in all 10 files the
   corner is empty further in — Casinonic's «C» is the nearest, ux* measures it by pixels). */

/* a box exactly the size of the logo image, so the corner is the logo's corner */
.logo-box { position: relative; display: block; height: 100%; max-width: 100%; }
.logo-box > img { display: block; height: 100%; width: auto; max-width: 100%; }
.ranking-list { --rk-h: 16px; --rk-fs: 12px; --rk-r2: 8px; }
.rk { position: absolute; z-index: 1; top: 0; left: 0; pointer-events: none;
      box-sizing: border-box; min-width: var(--rk-h); height: var(--rk-h); padding: 0 4px;
      display: flex; align-items: center; justify-content: center;
      background: var(--surface); color: var(--purple); border-radius: 0 0 var(--rk-r2) 0;
      box-shadow: -1px -1px 0 0 var(--surface);
      font-size: var(--rk-fs); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;
      letter-spacing: 0; white-space: nowrap; }
.rk-n { display: block; }
/* TASK-1071: the tile radius is 12 px (additions.css) and 8 px at ≥ 1200 (compact.css); the anti-aliased arc of the
   picture showed as a thin dark line along a rounded tag. The white tag's outer corner is square and lies over the
   white card (tag ≥ 13 px covers the whole arc), the -1/-1 white shadow hides any sub-pixel edge on top/left.
   --purple on white 7.91:1; with no logo the tag is simply the purple digit on the card, no edge needed. */
@media (max-width: 759px) { .ranking-list { --rk-h: 14px; --rk-fs: 11px; --rk-r2: 7px; } .rk { padding: 0 3px; } }
@media (max-width: 399px) { .ranking-list { --rk-h: 13px; --rk-fs: 10.5px; --rk-r2: 6px; } }
@media (min-width: 1200px) { .ranking-list { --rk-h: 13px; --rk-fs: 10.5px; --rk-r2: 6px; } .rk { padding: 0 3px; } }
/* TASK-0989's 760–1199 shift of .identity (28/8 px, room for «10» left of the corner) is gone: nothing stands
   left of the logo any more, the owner's padding 20 px is back. */
@media (forced-colors: active) { .rk { forced-color-adjust: none; background: CanvasText; color: Canvas; } }

/* UX-01: a logo that did not load becomes the casino name (.logo-fallback); it starts under the tag, full width.
   Heights: tile 72 → 16 + 2 + 2 × 22 × 1.1 = 66.4 · 64 → 14 + 2 + 28 × 1.2 = 49.6 · 56 → 48.6 · 44 (18 px) → 36.6 */
.logo-box > .logo-fallback { display: block; padding: calc(var(--rk-h) + 2px) 0 0 0; line-height: 1.2; }
/* L-01 (layout, TASK-0989): at 760–1199 a two-word name wraps to two lines; at 28 px it left the 72 px box and
   ran onto the score ring. Smaller and tighter there, so the tag + two lines stay inside the box. The selector
   outweighs .casino-logo.real .logo-fallback of additions.css (0,3,0), else the 28 px stays (layout L-01 retest). */
@media (min-width: 760px) and (max-width: 1199px) {
  .casino-logo.real .logo-box > .logo-fallback { font-size: 22px; line-height: 1.1; } }
/* below 350 px the longest name (row 1) still wrapped at 28 px: one size down keeps it on one line */
@media (max-width: 349px) { .casino-logo.real .logo-box > .logo-fallback { font-size: 24px; } }

/* TASK-0995 (owner 20.10): «18+» on the Visit button itself — a small outlined tag after the arrow, in the button's
   own colour (white on --purple; on --purple-deep when hovered). Kept in this homepage-only file, loaded last, so the
   owner's styles.css/additions.css stay byte for byte. The «18+» line under the button is gone; the button's
   aria-label already ends with «18+», so the tag is aria-hidden. */
.visit-button { white-space: nowrap; }
.age-badge { flex: none; margin-left: -3px; padding: 1px 4px; border: 1.5px solid currentColor; border-radius: 5px;
             font-size: 11px; line-height: 1.2; font-weight: 800; letter-spacing: .02em; }
@media (min-width: 1200px) { .age-badge { margin-left: -4px; padding: 0 3px; font-size: 10.5px; } }
/* UX-01: the arrow must never shrink (it fell to 6.3 px, 0 with wider text spacing, at 760–1199 where the button is
   116 px wide); there the gaps and side padding give way instead and the arrow is 15 px. */
.visit-button svg { flex: none; }
@media (min-width: 760px) and (max-width: 1199px) {
  .visit-button { gap: 5px; padding-left: 8px; padding-right: 8px; }
  .visit-button svg { width: 15px; height: 15px; }
  .age-badge { margin-left: 0; }
}
/* phones: the second grid row of .actions held the «18+» line */
@media (max-width: 759px) { .actions { grid-template-rows: 45px; } }

/* TASK-1016 (owner 20.10, TASK-1009 «A после правки», INBOX #214): the Withdrawal cell — the time in days in every
   row, no clock icon; under it, muted, which days («business days», or «after approval» = 72 hours counted from
   approval); last, a .chip with the method, only where the terms name one (home.json withdrawalMethod).
   Rules of docs/os/work/TASK-1009/cell.css (.pv-d) with the cell's own class names; only the owner's tokens. */
.metric.payout.wd { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.wd .wd-kind { font-size: 12px; font-weight: 600; color: var(--muted); line-height: 1.3; white-space: nowrap; }
.wd .wd-how { font-size: 11px; font-weight: 600; padding: 2px 8px; line-height: 1.35; margin-top: 2px; max-width: 100%;
              overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1200px) { .metric.payout.wd { gap: 2px; } }

/* TASK-1010 (owner 20.10, variant A of TASK-0998, ux round 2 accepted): the Searches cell shows seven month bars
   instead of the line chart; each row on its own scale from zero (build_new.month_bars). Mar–Aug: light fill with a
   --muted outline (8.32:1 to white), September solid --purple (7.91:1), baseline --muted. Rules = TOA_CELL_CSS of
   docs/os/work/TASK-0998/cell.js for .sb-bars/.sb-bar. Forced colours drop fills and shadows, so the bars are drawn
   there in system colours instead (ux note on TASK-0998).
   TASK-1103 (owner 20.10 on INBOX #243: «А · вплотную», preview docs/os/work/TASK-1088): every bar is a fixed 6 px
   with a 1 px gap, so the row is 7 × 6 + 6 × 1 = 48 px and stands as a group centred under the number (.metric is a
   centred column); the baseline runs under the group only. Colours, outline, radius and heights unchanged. */
.sb-bars { display: flex; align-items: flex-end; justify-content: center; gap: 1px; width: auto; max-width: 96px;
           height: 22px; border-bottom: 1px solid var(--muted); }
.sb-bar { flex: 0 0 6px; min-width: 0; min-height: 2px; background: var(--purple-soft);
          box-shadow: inset 0 0 0 1px var(--muted); border-radius: 2px 2px 0 0; }
.sb-bar.is-last { background: var(--purple); box-shadow: none; }
@media (max-width: 1199px) { .sb-bars { height: 26px; max-width: 100px; } }
@media (max-width: 759px) { .sb-bars { height: 24px; } }
@media (forced-colors: active) {
  .sb-bars { forced-color-adjust: none; border-bottom-color: CanvasText; }
  .sb-bar { background: Canvas; box-shadow: inset 0 0 0 1px CanvasText; }
  .sb-bar.is-last { background: CanvasText; }
}

/* TASK-1032 (owner 20.10): the Review button is outlined with 1 px (was the shared 2 px of .action-button in
   styles.css), colour unchanged (--purple). The freed 1 px goes back into the padding, so the button keeps its size
   and the text its place; the Visit button is untouched. */
.ranking-list .review-button { border-width: 1px; padding: 8px 13px; }
@media (min-width: 1200px) { .ranking-list .review-button { padding: 2px 11px; } }

/* TASK-1030 (rest of TASK-0995, qa): tap target >= 44 px for Visit and Review in the compact desktop row (>= 1200).
   Two stacked 44 px targets need 88 px, the row was 83.7 px. The buttons keep their 28 px look (TASK-0970); each
   one's hit area is an invisible ::before over its half of the row: Visit from the row's top edge to the middle,
   Review from the middle to the bottom edge, full width of the actions column. The row grows to 90 px inside the
   border (92 with it) — the "~90 px" of TASK-0970 — so each half is 45 px. The halves meet in the 3 px gap between
   the buttons, so neither covers the other's visible box. Hovering the half lights the button (it is the link). */
@media (min-width: 1200px) {
  .card-grid { min-height: 90px; }
  .actions { position: relative; }
  .actions > .action-button::before { content: ""; position: absolute; left: 0; right: 0; }
  .actions > .visit-button::before { top: -5px; bottom: 50%; }
  .actions > .review-button::before { top: 50%; bottom: -5px; }
}