/* TASK-1119 (owner 20.10.2026, INBOX #236: variant B of TASK-1063) — the ranking on a phone (< 760 px) is a short row:
   line 1 logo + ring | Visit, line 2 Tobique + ACMA blocked | Review | Details; Details opens the five values as
   «label — value» lines inside the card. Homepage only, after sort.css (every stylesheet that styles the card is
   above). The rules inside the @media are «CSS для developer» of variant B in docs/os/work/TASK-1063/preview.html,
   byte for byte, except the rules under the two «TASK-1119» comments (no JS): rank-phone.js adds .dt-on to the list; without
   it every card stays open (all data visible) and there is no Details button. ≥ 760 px: nothing changes but the
   button, which is never shown there. Spec: docs/os/work/TASK-1063/spec.md. */
.ranking .ranking-list .more-toggle{display:none}
@media (max-width: 759px) {
.ranking .ranking-list .card-grid{min-height:0;align-items:center}
.ranking .ranking-list .identity{position:relative;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:8px;min-width:0;min-height:0;padding:0;grid-template-columns:none}
.ranking .ranking-list .casino-logo{display:flex;flex-direction:row;width:auto;max-width:none;justify-self:auto;flex:0 1 auto;height:40px}
.ranking .ranking-list .logo-box>img,.ranking .ranking-list .logo-box>.logo-fallback{border-radius:8px}
.ranking .ranking-list .logo-box>.logo-fallback{display:flex;align-items:center;justify-content:center;height:100%;aspect-ratio:602/256;padding:var(--rk-h,13px) 4px 0;background:var(--purple-soft);font-size:12px;line-height:1.1;letter-spacing:-.02em;text-align:center}
.ranking .ranking-list .rk{border-radius:8px 0 6px 0}
.ranking .ranking-list .score{flex-direction:row;flex:none;margin:0;gap:0}.score-ring{width:36px;height:36px}.score-value{font-size:14px}
.ranking .ranking-list .metrics{display:contents;padding:0;gap:0}
.ranking .ranking-list .metric{min-height:0;border:0;padding:0;gap:2px}
.ranking .ranking-list .licence-stack{width:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px}
.ranking .ranking-list .actions{border:0;padding:0;row-gap:0;grid-template-rows:none}
.ranking .ranking-list .action-button{min-height:44px}
.ranking .ranking-list .card-grid{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"id id visit" "lic rev more";column-gap:8px;row-gap:8px;align-items:center;padding:10px 12px}
.ranking .ranking-list .actions{display:contents}
.ranking .ranking-list .identity{grid-area:id}
.ranking .ranking-list .visit-button{grid-area:visit;width:auto;font-size:15px;padding:6px 12px}
.ranking .ranking-list .review-button{grid-area:rev;width:auto;font-size:14px;padding:4px 12px}
.ranking .ranking-list .more-toggle{grid-area:more;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:4px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font-size:14px;font-weight:700}
.ranking .ranking-list .more-toggle svg{width:14px;height:14px;flex:none;transition:transform 150ms}
.ranking .ranking-list .more-toggle[aria-expanded=true] svg{transform:rotate(180deg)}
.ranking .ranking-list .more-toggle[aria-expanded=true]{background:var(--purple-soft);border-color:var(--purple-soft)}
.ranking .ranking-list .metric.licences{grid-area:lic;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:2px 6px;text-align:left}
.ranking .ranking-list .licences .mobile-label{display:none}
.ranking .ranking-list .licences .chip{font-size:11px;padding:1px 7px}
.ranking .ranking-list .licences .metric-caption{font-size:11px;font-weight:600;white-space:normal}
/* TASK-1119: closed rows and the Details button only once rank-phone.js has run (.dt-on); else every card is open */
.ranking .ranking-list:not(.dt-on) .more-toggle{display:none}
.ranking .ranking-list.dt-on .metric:not(.licences){display:none}
/* TASK-1119: «.is-open» of the preview = an open card, or every card while the list has no .dt-on */
.ranking .ranking-list:not(.dt-on) .metric:not(.licences),.ranking .ranking-list .is-open .metric:not(.licences){grid-column:1/-1;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;gap:2px 8px;padding:8px 2px;border-top:1px solid var(--divider);text-align:right}
.ranking .ranking-list:not(.dt-on) .metric:not(.licences) .mobile-label,.ranking .ranking-list .is-open .metric:not(.licences) .mobile-label{display:block;font-size:13px;margin-right:auto;text-align:left}
.ranking .ranking-list:not(.dt-on) .metric:not(.licences) .metric-value,.ranking .ranking-list .is-open .metric:not(.licences) .metric-value{font-size:15px;letter-spacing:-.015em}
.ranking .ranking-list:not(.dt-on) .metric .metric-caption,.ranking .ranking-list:not(.dt-on) .wd-kind,.ranking .ranking-list .is-open .metric .metric-caption,.ranking .ranking-list .is-open .wd-kind{font-size:11px;white-space:normal}
.ranking .ranking-list:not(.dt-on) .searches .sb-bars,.ranking .ranking-list .is-open .searches .sb-bars{display:none}
.ranking .ranking-list:not(.dt-on) .metric.searches,.ranking .ranking-list .is-open .metric.searches{margin-top:2px}
@media (max-width:359px){
  .ranking .ranking-list .casino-logo{height:36px}
  .ranking .ranking-list .score-ring{width:32px;height:32px}
  .ranking .ranking-list .score-value{font-size:13px}
  .ranking .ranking-list .visit-button{padding:6px 8px;gap:6px}
  .ranking .ranking-list .review-button,.ranking .ranking-list .more-toggle{padding:4px 8px}
}
}