/* ==========================================================================
   Rixer design system — editorial, calm, data-rich (master prompt §21)

   Dark is the DEFAULT theme and inherits the Rixer Agency palette
   (near-black canvas, violet -> magenta -> pink gradient, glass cards).
   Light mode is a full peer theme, not an afterthought: every colour below
   is a token, and [data-theme="light"] re-points the same tokens.

   Rules kept from §21:
   - status colour is NEVER the only signal; every status token is paired
     with a text label in the markup.
   - data surfaces stay calm. The gradient is reserved for brand furniture
     (logo mark, primary CTA, focus) and never used behind numbers.
   ========================================================================== */

/* Flag glyphs.
   Windows ships NO colour glyphs for regional-indicator pairs, so 🇩🇪 renders as the
   bare letters "DE" there however the font stack is ordered — it is a missing-glyph
   problem, not a CSS one. This font supplies those codepoints and nothing else:
   `unicode-range` limits it to U+1F1E6–U+1F1FF, so listing it first in the body stack
   changes only flags and never touches body text.
   Artwork: Twemoji by Twitter, CC BY 4.0 — see CREDITS.md. */
@font-face {
  font-family: "Twemoji Country Flags";
  src: url("fonts/TwemojiCountryFlags.a19faae092f7.woff2") format("woff2");
  unicode-range: U+1F1E6-1F1FF;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* canvas + surfaces */
  --bg:          #08090d;
  --bg-2:        #12141b;
  --surface:     #14161e;
  --surface-2:   #1b1e28;
  --surface-3:   #232734;
  --glass:       rgba(255, 255, 255, .045);
  --line:        rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .17);

  /* text */
  --text:   #f3f4f8;
  --text-2: #c3c9d6;
  --muted:  #9aa3b4;
  --faint:  #6e7688;

  /* brand */
  --accent:      #8b5cf6;
  --accent-soft: #a78bfa;
  --accent-deep: #7c5cff;
  --accent-2:    #ff4f9a;
  --grad: linear-gradient(135deg, #7c5cff 0%, #b44be0 52%, #ff4f9a 100%);
  --accent-wash: rgba(124, 92, 255, .13);
  --on-accent:   #ffffff;

  /* status — always paired with a label */
  --ok:   #6fe3b2;  --ok-wash:   #16352b;  --ok-line:   #245c48;
  --warn: #ffd479;  --warn-wash: #3a2d10;  --warn-line: #5d4818;
  --bad:  #ff97a5;  --bad-wash:  #3d1e24;  --bad-line:  #63313a;
  --info: #8fc1ff;  --info-wash: #16283f;  --info-line: #274870;

  --radius:    14px;
  --radius-sm: 10px;
  --radius-xs: 8px;
  --shadow:    0 1px 2px rgba(0, 0, 0, .4), 0 14px 40px -22px rgba(0, 0, 0, .9);
  --shadow-lg: 0 24px 60px -28px rgba(0, 0, 0, .95);
  --ring: 0 0 0 3px rgba(124, 92, 255, .45);

  /* "Twemoji Country Flags" is first in both stacks but, thanks to its unicode-range,
     only ever supplies flag codepoints. Both stacks need it because flags appear in
     headings (country hubs) as well as in body text. */
  --font-display: "Twemoji Country Flags", "Fraunces", Georgia, serif;
  --font-text: "Twemoji Country Flags", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --header-bg: rgba(8, 9, 13, .82);
}

[data-theme="light"] {
  color-scheme: light;

  --bg:          #f7f8fb;
  --bg-2:        #eef0f6;
  --surface:     #ffffff;
  --surface-2:   #f4f6fa;
  --surface-3:   #e9edf4;
  --glass:       rgba(255, 255, 255, .75);
  --line:        #e3e7ef;
  --line-strong: #cdd4e0;

  --text:   #14161f;
  --text-2: #3f4757;
  --muted:  #656e80;
  --faint:  #949cad;

  --accent:      #6d28d9;
  --accent-soft: #7c3aed;
  --accent-deep: #5b21b6;
  --accent-2:    #db2777;
  --accent-wash: #f1ecfe;
  --on-accent:   #ffffff;

  --ok:   #15803d;  --ok-wash:   #e8f6ed;  --ok-line:   #b7dfc6;
  --warn: #92400e;  --warn-wash: #fdf3e3;  --warn-line: #eed8b0;
  --bad:  #b91c1c;  --bad-wash:  #fdeced;  --bad-line:  #f2c2c5;
  --info: #1d4ed8;  --info-wash: #ecf2fe;  --info-line: #c3d5f7;

  --shadow:    0 1px 2px rgba(20, 22, 31, .05), 0 10px 30px -18px rgba(20, 22, 31, .28);
  --shadow-lg: 0 20px 50px -26px rgba(20, 22, 31, .35);
  --ring: 0 0 0 3px rgba(109, 40, 217, .28);

  --header-bg: rgba(255, 255, 255, .86);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font: 16px/1.65 var(--font-text);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* Sticky footer. A short page — the 404, a thin hub, a filtered list down to two rows
     — used to leave the footer floating mid-screen with dead canvas beneath it, which on
     a tall display reads as a broken page rather than a short one.

     Column flex with <main> as the ONLY growing child pins the footer to the bottom of
     the viewport when content is short, and lets it sit naturally below the fold when
     content is long. The other body children are safe to have as flex items: <noscript>
     and <script> are display:none, and .flash keeps the default flex-grow of 0 so it
     never steals the space main is meant to absorb.

     svh, not vh: on mobile `100vh` means the LARGEST viewport, so with the URL bar shown
     the page is taller than the visible area and picks up a pointless scrollbar. `100svh`
     is the smallest viewport, which is what "fills the screen" should mean here. The vh
     line above it is the fallback for browsers without the newer units. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

/* Ambient brand wash — the Rixer Agency signature, kept faint so data reads clean. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 40% at 85% -8%, rgba(124, 92, 255, .18), transparent 60%),
    radial-gradient(55% 38% at -8% 0%, rgba(255, 79, 154, .10), transparent 58%),
    var(--bg);
}
[data-theme="light"] body::before {
  background:
    radial-gradient(70% 40% at 85% -10%, rgba(124, 92, 255, .10), transparent 60%),
    radial-gradient(55% 38% at -8% 0%, rgba(255, 79, 154, .06), transparent 58%),
    var(--bg);
}

/* ---------- typography ---------- */
h1, h2, h3 {
  font-family: var(--font-display); font-weight: 600; line-height: 1.18;
  letter-spacing: -0.012em; color: var(--text);
}
h1 { font-size: clamp(1.9rem, 4.5vw, 2.6rem); margin: .4em 0 .45em; text-wrap: balance; }
h2 { font-size: 1.32rem; margin: 0 0 .7rem; }
h3 { font-size: 1.04rem; margin: 0 0 .5rem; }
p { margin: .4rem 0 .9rem; }
/* THE LINK COLOUR, and the end of a trap that bit six times.

   It used to be `a { color: X }` plus `[data-theme="light"] a { color: Y }`. That second
   rule is specificity (0,1,1) — it out-ranks any bare class at (0,1,0), so a link inside a
   component styled by class shipped with the THEME's colour instead of the component's.
   White text on a light button, four times. Then six violet options in the language menu.

   The fix attempted before this one was `a:not(.btn):not(.plain)`, and it made things
   worse in a way worth recording: every `:not()` ADDS specificity. The rule went to
   (0,3,1) and started beating `.site-header nav.main-nav a` at (0,2,2), so the main
   navigation turned violet on every page of the site. Fighting specificity with more
   specificity loses; it just changes who loses next.

   So the theme re-points a VARIABLE and the rule that reads it is a bare element selector
   at (0,0,1). Every class on the site beats it by default. There is no list to maintain,
   nothing to remember when adding a component, and no way for this to come back. */
:root { --link: var(--accent-soft); --link-hover: var(--accent-2); }
[data-theme="light"] { --link: var(--accent); --link-hover: var(--accent-2); }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--link-hover); }
small { color: var(--muted); }
strong, b { color: var(--text); }
em { color: var(--text-2); }
.lede { color: var(--text-2); font-size: 1.1rem; max-width: 46rem; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-xs); }

/* `flex: 1 0 auto`, not `flex: 1`. The shorthand `flex: 1` sets flex-basis to 0, which
   makes the height come purely from the flex distribution; `auto` keeps content height as
   the starting point and 0 shrink means a long page is never compressed. `margin: 0 auto`
   still centres horizontally — in a column flex container that is the cross axis, where
   auto margins do exactly what they did before. */
/* `width: 100%` is load-bearing since body became a flex container, and it is not
   redundant with max-width. Auto margins on a flex item's CROSS axis make it shrink to fit
   its content rather than fill the line, so main stopped being viewport-wide and started
   being as wide as its widest child. On /compare/ with two columns that pushed main to
   438px inside a 390px phone: the table escaped its .compare-scroll container and scrolled
   the whole PAGE sideways instead of scrolling inside itself. width:100% restores the
   block behaviour — fill the line, cap at max-width, centre with the auto margins. */
main {
  max-width: 1060px; width: 100%; margin: 0 auto;
  padding: 1.75rem 1.25rem 4rem; flex: 1 0 auto;
}

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
  padding: .7rem clamp(1rem, 4vw, 2rem);
}
/* The wordmark is inlined SVG so its stroke inherits currentColor and one asset
   serves both themes. */
/* Violet, in both themes. It looked black for one deploy on 2026-09-08 and that was an
   accident worth naming: the mark is an inline SVG stroked with `currentColor`, so it had
   been picking up the THEME's link colour through the generic `a` rule all along — nobody
   had ever stated what colour the logo is. When link colour moved to a variable the
   inheritance went away and the mark went to `--text`. It is stated here now. */
.logo { display: inline-flex; align-items: center; color: var(--link); text-decoration: none; }
.logo:hover { color: var(--link-hover); }
.logo-mark { width: 92px; height: auto; display: block; }
.site-header nav.main-nav { display: flex; gap: .25rem; flex-wrap: wrap; }
.site-header nav.main-nav a {
  color: var(--text-2); text-decoration: none; font-size: .92rem; font-weight: 500;
  padding: .35rem .6rem; border-radius: 999px; transition: background .15s, color .15s;
}
.site-header nav.main-nav a:hover { color: var(--text); background: var(--glass); }
.site-header nav.main-nav a.active { color: var(--text); background: var(--accent-wash); }
.header-tools { margin-left: auto; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* theme toggle */
.theme-toggle {
  background: var(--glass); border: 1px solid var(--line); color: var(--text-2);
  width: 36px; height: 36px; border-radius: 999px; cursor: pointer;
  display: grid; place-items: center; font-size: 1rem; line-height: 1; padding: 0;
}
.theme-toggle:hover { color: var(--text); border-color: var(--line-strong); }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="light"] .theme-toggle .icon-sun { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* ---------- country picker ---------- */
.market-form { display: flex; align-items: center; gap: .4rem; }
.country-picker { position: relative; }
/* `.site-header .country-btn`, not `.country-btn`. Both header pills are <summary>
   elements, and `[data-theme="light"] details summary` is (0,1,2) — it beats a bare class
   at (0,1,0), so the selected country's NAME rendered in Rixer violet as though the pill
   were a link. It went unnoticed because the unset state is `.country-btn.is-unset` at
   (0,2,0), which does win: the bug only appeared once somebody picked a country. The
   language pill had no such second class and was violet from the first minute. */
.site-header .country-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--glass); border: 1px solid var(--line); color: var(--text);
  border-radius: 999px; padding: .35rem .7rem .35rem .55rem;
  font: inherit; font-size: .88rem; cursor: pointer; max-width: 15rem;
}
.country-btn::-webkit-details-marker { display: none; }
.country-btn { list-style: none; }
.country-btn:hover { border-color: var(--line-strong); }
.country-btn .flag { font-size: 1.05rem; line-height: 1; }
.country-btn .cname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.country-btn .caret { color: var(--muted); font-size: .7rem; transition: transform .15s; }
.country-picker[open] > .country-btn { border-color: var(--accent); box-shadow: var(--ring); }
.country-picker[open] > .country-btn .caret { transform: rotate(180deg); }
.country-btn.is-unset { color: var(--muted); }

.country-panel {
  position: absolute; right: 0; top: calc(100% + .45rem); z-index: 60;
  width: min(21rem, 88vw);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: .7rem;
}
.country-panel .panel-help {
  font-size: .78rem; color: var(--muted); margin: 0 0 .5rem; line-height: 1.45;
}
.country-panel .panel-help b { color: var(--text-2); font-weight: 600; }
.country-search {
  width: 100%; max-width: none; margin-bottom: .5rem;
  padding: .45rem .65rem; font-size: .9rem;
}
.country-list { max-height: 17rem; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.country-list li { margin: 0; }
.country-opt {
  display: flex; align-items: center; gap: .55rem; width: 100%;
  background: none; border: 0; color: var(--text); font: inherit; font-size: .92rem;
  padding: .42rem .55rem; border-radius: var(--radius-xs); cursor: pointer; text-align: left;
}
.country-opt:hover, .country-opt:focus-visible { background: var(--surface-3); }
.country-opt[aria-selected="true"] { background: var(--accent-wash); font-weight: 600; }
.country-opt .flag { font-size: 1.1rem; line-height: 1; flex: none; }
.country-opt .iso { margin-left: auto; color: var(--faint); font-size: .75rem;
  font-family: var(--font-mono); }
.country-opt.clear-opt { color: var(--muted); }
.geo-hint {
  font-size: .74rem; color: var(--muted); margin: .5rem 0 0; padding-top: .5rem;
  border-top: 1px solid var(--line); line-height: 1.45;
}

/* ---------- language picker ----------
   Deliberately the country picker's twin: same pill, same panel, same caret. They are
   two settings of the same kind sitting next to each other, and making one of them a row
   of bare locale codes said they were different kinds of thing. The button stays narrow
   (a code) so both fit a phone header; the panel is where the full names live. */
.lang-picker { position: relative; }
.site-header .lang-btn {
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--glass); border: 1px solid var(--line); color: var(--text);
  border-radius: 999px; padding: .35rem .6rem .35rem .5rem;
  font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
  list-style: none; white-space: nowrap;
}
.lang-btn::-webkit-details-marker { display: none; }
.lang-btn:hover { border-color: var(--line-strong); }
.lang-btn .lang-globe { font-size: .95rem; line-height: 1; }
.lang-btn .caret { color: var(--muted); font-size: .7rem; transition: transform .15s; }
.lang-picker[open] > .lang-btn { border-color: var(--accent); box-shadow: var(--ring); }
.lang-picker[open] > .lang-btn .caret { transform: rotate(180deg); }

.lang-panel {
  position: absolute; right: 0; top: calc(100% + .45rem); z-index: 60;
  width: min(15rem, 88vw);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: .7rem;
}
.lang-panel .panel-help {
  font-size: .78rem; color: var(--muted); margin: 0 0 .5rem; line-height: 1.45;
}
.lang-panel .panel-help b { color: var(--text-2); font-weight: 600; display: block; }
.lang-list { margin: 0; padding: 0; list-style: none; }
.lang-list li { margin: 0; }
/* Each option carries `plain` in the markup as well as this class — see the escape-hatch
   comment on `[data-theme="light"] a` above. Without it these rendered as six violet
   links, reading as "go somewhere else" rather than "pick one". */
.lang-panel .lang-opt {
  display: flex; align-items: center; gap: .55rem; width: 100%;
  color: var(--text); text-decoration: none; font-size: .92rem;
  padding: .42rem .55rem; border-radius: var(--radius-xs);
}
.lang-panel .lang-opt:hover, .lang-panel .lang-opt:focus-visible {
  background: var(--surface-3); color: var(--text);
}
.lang-panel .lang-opt[aria-current="true"] { background: var(--accent-wash); font-weight: 600; }
.lang-opt .iso {
  margin-left: auto; color: var(--faint); font-size: .75rem; font-family: var(--font-mono);
}

/* language switch (footer) */
.lang-nav { display: flex; gap: .2rem; }
.lang-nav a {
  color: var(--muted); text-decoration: none; font-size: .74rem; font-weight: 600;
  padding: .2rem .42rem; border-radius: 6px; border: 1px solid transparent;
}
.lang-nav a:hover { color: var(--text); background: var(--glass); }
.lang-nav a.active { color: var(--text); border-color: var(--line-strong); background: var(--glass); }

/* The footer sitemap: every section, from every page. Three columns on desktop, two on a
   tablet, one on a phone — `auto-fit` rather than fixed counts, so adding a fourth column
   needs no media query. */
/* `.footer-nav` was here until 2026-09-08 — see base.html for why it went. */

/* The contact form's honeypot.
   Off-screen rather than `display: none` or `type="hidden"`: a form filler skips a hidden
   input by design — that is how CSRF tokens survive — but has no CSS engine, so a field
   positioned out of view still looks like one worth filling. It is also out of the tab
   order and aria-hidden in the markup, so nobody using a keyboard or a screen reader ever
   reaches it. */
.cx-trap {
  position: absolute !important; left: -9999px !important; top: auto !important;
  width: 1px !important; height: 1px !important; opacity: 0 !important;
}

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted); font-size: .85rem;
  padding: 2rem clamp(1rem, 4vw, 2rem) 2.5rem;
  margin-top: 3rem;
}
.site-footer p { max-width: 72rem; margin: .4rem auto; }
.site-footer strong { color: var(--text-2); }
/* Shown only where the header cannot fit the locale codes (see the mobile block). */
.footer-lang { display: none; gap: .25rem; max-width: 72rem; margin: .9rem auto 0;
  padding-top: .8rem; border-top: 1px solid var(--line); flex-wrap: wrap; }
.required-copy { font-weight: 600; color: var(--text-2); }

/* ---------- flash ---------- */
.flash { max-width: 1060px; margin: 1rem auto -0.5rem; padding: 0 1.25rem; }
.flash .msg {
  background: var(--info-wash); border: 1px solid var(--info-line);
  color: var(--text); border-radius: var(--radius-sm); padding: .65rem 1rem;
  margin-bottom: .5rem; font-size: .95rem;
}

/* ---------- cards & panels ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1.25rem 1.4rem; margin: 0 0 1.1rem;
}
section.card h2 { padding-bottom: .55rem; border-bottom: 1px solid var(--line); }
.notice {
  background: var(--info-wash); border: 1px solid var(--info-line);
  padding: .65rem 1rem; border-radius: var(--radius-sm); font-size: .95rem;
}
.warning-panel {
  background: var(--warn-wash); border: 1px solid var(--warn-line);
  color: var(--warn); padding: .8rem 1.1rem; border-radius: var(--radius-sm);
  margin: 1rem 0; font-weight: 500;
}
.availability {
  padding: .8rem 1.1rem; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--line); margin: 1rem 0;
}
.availability-ok { background: var(--ok-wash); border-color: var(--ok-line); }
.availability-deny { background: var(--surface-2); }

/* ---------- badges ---------- */
.badge {
  display: inline-block; font-size: .71rem; font-weight: 600; letter-spacing: .03em;
  padding: .16rem .58rem; border-radius: 999px;
  background: var(--surface-3); color: var(--text-2); border: 1px solid var(--line-strong);
  vertical-align: middle; text-transform: uppercase;
}
.badge-active { background: var(--ok-wash); color: var(--ok); border-color: var(--ok-line); }
.badge-warning, .badge-suspended,
.badge-under_review { background: var(--warn-wash); color: var(--warn); border-color: var(--warn-line); }
.badge-blacklisted, .badge-closed { background: var(--bad-wash); color: var(--bad); border-color: var(--bad-line); }
.badge-disclosure { background: var(--accent-wash); color: var(--accent-soft); border-color: var(--line-strong); }
[data-theme="light"] .badge-disclosure { color: var(--accent); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; background: var(--grad); color: #fff;
  /* A <button> centres its label by user-agent default; an <a> does not. Wherever the two
     sit in the same row and something stretches them to a shared width — the profile
     form's Save/Cancel pair — the link's label sat against its left padding while the
     button's was centred, and the pair looked broken. */
  text-align: center;
  padding: .58rem 1.2rem; border-radius: 999px; text-decoration: none;
  font-weight: 600; font-size: .95rem; border: none; cursor: pointer;
  font-family: var(--font-text); line-height: 1.4;
  box-shadow: 0 10px 26px -12px rgba(124, 92, 255, .8);
  transition: transform .12s ease, box-shadow .2s ease, opacity .2s;
}
.btn:hover { color: #fff; opacity: .94; box-shadow: 0 12px 30px -12px rgba(124, 92, 255, .95); }
/* `a.btn`, not `.btn`. `[data-theme="light"] a` is specificity (0,1,1) and out-ranks a
   bare class, so every button that is a LINK rather than a <button> rendered its label in
   Rixer violet — on the violet gradient. "Browse all casinos" on the homepage was
   effectively invisible, while the identical-looking submit button beside it was white,
   because a <button> matches no `a` rule. Same trap as the Google button. */
a.btn, a.btn:hover, a.btn:visited { color: #fff; }
a.btn-secondary, a.btn-secondary:visited { color: var(--text); }
a.btn-secondary:hover { color: var(--text); }
.btn:active { transform: translateY(1px); }
.btn-secondary {
  background: var(--glass); color: var(--text); border: 1px solid var(--line-strong);
  box-shadow: none;
}
.btn-secondary:hover { background: var(--surface-3); color: var(--text); opacity: 1; }
[data-theme="light"] .btn-secondary { background: var(--surface); }
.linklike {
  background: none; border: none; color: var(--muted);
  text-decoration: underline; cursor: pointer; font: inherit; font-size: .85rem; padding: 0;
}

/* ---------- hero (home) ---------- */
.hero { text-align: center; padding: 3rem 0 1.5rem; }
.hero h1 {
  font-size: clamp(2.1rem, 5.5vw, 3.3rem); max-width: 24ch; margin: 0 auto .55rem;
}
.hero h1 .grad {
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.hero .lede { margin: 0 auto 1.7rem; }
.hero-search {
  display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap;
  max-width: 640px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 999px; padding: .35rem .4rem .35rem 1rem;
  box-shadow: var(--shadow);
}
.hero-search input[type=text] {
  flex: 1 1 240px; border: none; background: none; padding: .5rem 0;
  max-width: none; font-size: 1rem;
}
.hero-search input[type=text]:focus { outline: none; box-shadow: none; }
.hero-search:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
.home-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem; margin-top: 2.5rem; text-align: left;
}
.home-grid .card { margin: 0; }
.home-grid .card h3 { display: flex; align-items: center; gap: .5rem; }
.home-grid .card .ico {
  width: 26px; height: 26px; border-radius: 8px; flex: none; display: grid;
  place-items: center; background: var(--accent-wash); color: var(--accent-soft);
  font-size: .85rem;
}
[data-theme="light"] .home-grid .card .ico { color: var(--accent); }

/* ---------- tables ---------- */
table { border-collapse: collapse; width: 100%; margin: .75rem 0; font-size: .94rem; }
th, td { text-align: left; padding: .62rem .7rem; border-bottom: 1px solid var(--line); }
thead th, tr > th:first-child {
  color: var(--muted); font-weight: 600; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .05em;
}
tbody tr:hover, .casino-table tbody tr:hover { background: var(--surface-2); }

/* ---------- forms ---------- */
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], select, textarea {
  padding: .55rem .75rem; border: 1px solid var(--line-strong);
  border-radius: var(--radius-xs); font: inherit; background: var(--surface-2);
  color: var(--text); width: 100%; max-width: 480px;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, select:focus, textarea:focus {
  outline: none; box-shadow: var(--ring); border-color: var(--accent);
}
select option { background: var(--surface); color: var(--text); }
.stacked-form p, .stacked-form > div {
  display: flex; flex-direction: column; max-width: 480px; margin: 0 0 .9rem;
}
.stacked-form label { font-weight: 600; font-size: .92rem; margin-bottom: .25rem; }
.stacked-form .helptext { color: var(--muted); font-size: .8rem; margin-top: .2rem; }
.stacked-form ul.errorlist {
  color: var(--bad); margin: .15rem 0; padding-left: 1.1rem; font-size: .85rem;
}
.stacked-form input[type=checkbox] { width: auto; max-width: none; }
.verify-form { display: flex; gap: .55rem; flex-wrap: wrap; margin: 1.25rem 0 2rem; }
.verify-form input[type=text] { flex: 1 1 240px; max-width: none; }
.verify-form select, .hero-search select { width: auto; }

/* ---------- score display ---------- */
.score-hero { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; margin: .5rem 0 1rem; }
.score-ring {
  --p: 0; --ring-col: var(--accent);
  width: 112px; height: 112px; border-radius: 50%; flex: 0 0 auto;
  background:
    radial-gradient(closest-side, var(--surface) 78%, transparent 79% 100%),
    conic-gradient(var(--ring-col) calc(var(--p) * 1%), var(--surface-3) 0);
  display: grid; place-items: center;
}
.score-ring b { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; }
.score-ring span { font-size: .7rem; color: var(--muted); margin-top: -0.3rem; }
.score-ring-inner { display: flex; flex-direction: column; align-items: center; }
.score-meta { flex: 1 1 220px; }
.score-meta .conf { font-weight: 600; color: var(--text-2); }
.score-total { font-size: 1.5rem; font-weight: 700; margin: .3rem 0; }
.score-total small { font-size: .8rem; font-weight: 400; }

.factor-rows { margin: .75rem 0 .25rem; display: grid; gap: .3rem; }
/* The reason under each factor. Indented to the same column the bar starts in so the
   rows still scan as a list, and muted so the numbers stay the primary read. */
.factor-why {
  margin: 0 0 .5rem; padding-left: .1rem; color: var(--text-3, var(--text-2));
  line-height: 1.45; max-width: 62ch;
}
.factor-why small { font-size: .8rem; }
@media (min-width: 700px) {
  .factor-why { padding-left: calc(min(200px, max(130px, 22%)) + .7rem); }
}
.factor-row {
  display: grid; grid-template-columns: minmax(130px, 200px) 1fr 3.2rem;
  align-items: center; gap: .7rem; font-size: .88rem;
}
.factor-row .fname { color: var(--text-2); }
.factor-row .fval {
  text-align: right; font-variant-numeric: tabular-nums;
  color: var(--text-2); font-weight: 600;
}
.factor-track {
  display: block; height: 6px; background: var(--surface-3);
  border-radius: 4px; overflow: hidden;
}
.factor-fill { display: block; height: 100%; border-radius: 4px; background: var(--grad); min-width: 2px; }
.factor-row.empty .factor-track {
  background: repeating-linear-gradient(45deg,
    var(--surface-3) 0 6px, var(--surface) 6px 10px);
}
.factor-row.empty .fval { color: var(--faint); font-weight: 400; }

.evidence-label { color: var(--muted); font-size: .78rem; }
.evidence-log { list-style: none; padding: 0; margin: .5rem 0; }
.evidence-log li { padding: .55rem 0; border-bottom: 1px solid var(--line); }
.evidence-log li:last-child { border-bottom: none; }

/* ---------- casino list ---------- */
.casino-cards { display: grid; gap: .85rem; margin-top: 1.25rem; }
.casino-card {
  display: grid; grid-template-columns: 1fr auto; gap: .35rem 1rem; align-items: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.05rem 1.3rem;
  transition: border-color .15s, transform .15s;
}
.casino-card:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.casino-card .cname { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; }
.casino-card .cname a { text-decoration: none; color: var(--text); }
.casino-card .cname a:hover { color: var(--accent-soft); }
.casino-card .cscore { text-align: right; font-variant-numeric: tabular-nums; }
.casino-card .cscore b { font-size: 1.35rem; }
.casino-card .cmeta {
  grid-column: 1 / -1; color: var(--muted); font-size: .85rem;
  display: flex; gap: .6rem; align-items: center; flex-wrap: wrap;
}

/* ---------- hub header ---------- */
.hub-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.disclaimer { color: var(--muted); font-size: .82rem; margin-top: 0; }
.review-card {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: .9rem 1.1rem; margin: .75rem 0;
}
.bonus-card h2 { margin: .25rem 0 .5rem; border: none; padding: 0; }
.alternatives {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: .9rem 1.1rem; margin-top: 1.5rem;
}
details summary { cursor: pointer; color: var(--accent-soft); font-weight: 500; }
[data-theme="light"] details summary { color: var(--accent); }

/* ---------- compare ---------- */
.compare-picker fieldset {
  border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--radius); display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
  padding: .9rem 1.2rem; margin: 0 0 .85rem;
}
.compare-picker legend { font-weight: 600; font-size: .9rem; padding: 0 .4rem; }
.compare-picker label { display: flex; gap: .4rem; align-items: center; font-size: .95rem; }
.compare-picker input[type=checkbox] { width: auto; }
.compare-scroll {
  overflow-x: auto; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: .5rem 1rem;
}
.compare-table th { white-space: nowrap; }

/* ---------- brand sub-nav ---------- */
.brand-nav { display: flex; gap: .3rem; flex-wrap: wrap; margin: .5rem 0 .25rem; }
.brand-nav a {
  text-decoration: none; font-size: .87rem; font-weight: 600; color: var(--text-2);
  padding: .32rem .8rem; border-radius: 999px; border: 1px solid var(--line);
  background: var(--glass);
}
.brand-nav a:hover { color: var(--text); border-color: var(--line-strong); }
.brand-nav a.active { background: var(--grad); color: #fff; border-color: transparent; }

/* ---------- misc ---------- */
.last-verified { color: var(--muted); font-size: .8rem; margin: .25rem 0 0; }
.faq-item { border-bottom: 1px solid var(--line); padding: .5rem 0; }
.faq-item summary { font-weight: 600; color: var(--text); }
.faq-item p { margin: .4rem 0 .2rem; color: var(--text-2); }
.legit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .6rem 1.2rem; }
.legit-grid div {
  padding: .55rem .75rem; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-xs); font-size: .92rem;
}
.legit-grid b {
  display: block; font-size: .72rem; text-transform: uppercase; color: var(--muted);
  letter-spacing: .05em; margin-bottom: .1rem;
}
.domain-official { color: var(--ok); font-weight: 600; }
.domain-lookalike { color: var(--bad); text-decoration: line-through; }
.actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin: .75rem 0; }
/* ---------- brand logos ---------- */
/* Most casino logos are WIDE wordmarks ("MEGA.BET", "RakeBit"). Forcing them into a
   square renders them a dozen pixels tall and unreadable, so the tile is a fixed
   height with free width instead, capped so a long mark cannot crowd the name. */
.brand-logo {
  height: 38px; width: auto; max-width: 124px; flex: none; border-radius: 9px;
  object-fit: contain; object-position: center;
  background: var(--surface-3); border: 1px solid var(--line); padding: 4px 6px;
}
/* Neutral monogram when no logo can be honestly attributed to the brand. Square,
   because a single letter in a wide box looks like a rendering fault. */
.brand-logo-mono {
  width: 38px; padding: 0; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
  color: var(--muted); background: var(--surface-2);
}
.brand-logo-lg { height: 52px; max-width: 190px; border-radius: 12px; font-size: 1.5rem; }
.brand-logo-mono.brand-logo-lg { width: 52px; }
/* Small variant, used for the operator's mark inside a comparison cell. The cell is a
   table column that has to fit four across a phone, so the mark sits above the name
   rather than beside it and stays well under the column's share of the width. */
.brand-logo-sm { height: 26px; max-width: 92px; border-radius: 7px; font-size: .8rem; }
.brand-logo-mono.brand-logo-sm { width: 26px; }
.entity-mark { margin: 0 0 .5rem; }
.dir-head-center .entity-mark { display: flex; justify-content: center; }
.casino-card .cname { display: flex; align-items: center; gap: .7rem; }
.hub-title { display: flex; align-items: center; gap: .9rem; }
.hub-title h1 { margin: 0; }

/* ---------- search typeahead ---------- */
.suggest-wrap { position: relative; flex: 1 1 260px; min-width: 0; }
.suggest-panel {
  position: absolute; left: 0; right: 0; top: calc(100% + .5rem); z-index: 70;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: .35rem; max-height: 22rem; overflow-y: auto; text-align: left;
}
.suggest-item {
  display: flex; align-items: center; gap: .65rem; padding: .5rem .6rem;
  border-radius: var(--radius-xs); text-decoration: none; color: var(--text);
}
.suggest-item:hover, .suggest-item.is-active { background: var(--surface-3); color: var(--text); }
.suggest-logo {
  width: 30px; height: 30px; flex: none; border-radius: 7px; object-fit: contain;
  background: var(--surface-2); border: 1px solid var(--line); padding: 2px;
}
.suggest-mono {
  display: grid; place-items: center; padding: 0; font-weight: 700;
  font-family: var(--font-display); color: var(--muted); font-size: .9rem;
}
.suggest-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.suggest-body b { font-size: .95rem; font-weight: 600; }
.suggest-body small {
  color: var(--muted); font-size: .78rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- best-of listings ---------- */
.best-list { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .8rem; counter-reset: best; }
.best-item {
  display: grid; grid-template-columns: auto auto 1fr auto; align-items: center;
  gap: .5rem 1rem; padding: 1rem 1.2rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.best-item:hover { border-color: var(--line-strong); }
.best-rank {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  border-radius: 999px; background: var(--grad); color: #fff;
  font-weight: 700; font-size: .95rem; font-variant-numeric: tabular-nums;
}
.best-body h2 { margin: 0 0 .2rem; font-size: 1.15rem; }
.best-body h2 a { text-decoration: none; color: var(--text); }
.best-body h2 a:hover { color: var(--accent-soft); }
.best-meta { margin: 0; display: flex; gap: .5rem; align-items: center;
  flex-wrap: wrap; color: var(--muted); font-size: .85rem; }
.best-countries { display: flex; flex-wrap: wrap; gap: .4rem .8rem; margin-top: .6rem; }
.best-countries a { font-size: .9rem; text-decoration: none; }
.best-countries a:hover { text-decoration: underline; }
@media (max-width: 700px) {
  .best-item { grid-template-columns: auto auto 1fr; }
  .best-cta { grid-column: 1 / -1; }
}

/* ---------- methodology: tags, weights, tables ---------- */
.tag {
  display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: .16rem .5rem; border-radius: 999px;
  background: var(--surface-3); color: var(--text-2);
  border: 1px solid var(--line-strong); white-space: nowrap; vertical-align: middle;
}
.tag-ok   { background: var(--ok-wash);   color: var(--ok);   border-color: var(--ok-line); }
.tag-warn { background: var(--warn-wash); color: var(--warn); border-color: var(--warn-line); }
.tag-bad  { background: var(--bad-wash);  color: var(--bad);  border-color: var(--bad-line); }
.tag-info { background: var(--info-wash); color: var(--info); border-color: var(--info-line); }

.legend {
  display: flex; flex-wrap: wrap; gap: .45rem 1.1rem; align-items: center;
  font-size: .82rem; color: var(--muted); margin: .9rem 0 1rem;
  padding: .7rem .9rem; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}

.method-table td { vertical-align: top; font-size: .9rem; }
.method-table td.num { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.method-table th { white-space: nowrap; }
.impact-note { color: var(--muted); font-size: .8rem; margin-top: .35rem; max-width: 30ch; }

/* Weight shown as a mark as well as a number: the ranking is the point. */
.weight-bar {
  display: block; width: 54px; height: 5px; border-radius: 3px;
  background: var(--surface-3); overflow: hidden; margin-bottom: .25rem;
}
.weight-bar i { display: block; height: 100%; width: calc(var(--w) * 1%); background: var(--grad); }

.excluded-list, .rules-list { list-style: none; padding: 0; margin: .8rem 0 0; display: grid; gap: .8rem; }
.excluded-list li { padding: .75rem .9rem; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm); }
.excluded-list li p { margin: .4rem 0 0; color: var(--text-2); font-size: .9rem; }
.rules-list li { display: flex; gap: .7rem; align-items: flex-start; }
.rules-list li div { flex: 1; font-size: .93rem; color: var(--text-2); }
.rules-list strong { color: var(--text); }

/* ---------- off-site platform presence ---------- */
.platform-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: .75rem; margin-top: .8rem;
}
.platform-card {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: .7rem .85rem;
}
.platform-card.is-empty, .platform-card.is-unchecked { opacity: .72; }
.platform-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.platform-head b { flex: 1 1 auto; font-size: .95rem; }
.platform-logo {
  width: 24px; height: 24px; flex: none; border-radius: 6px;
  object-fit: contain; background: #fff; padding: 2px;
}
.platform-logo-mono {
  display: grid; place-items: center; background: var(--surface-3); color: var(--muted);
  font-weight: 700; font-size: .8rem; padding: 0;
}
.platform-items { list-style: none; margin: .25rem 0 0; padding: 0; display: grid; gap: .4rem; }
.platform-items li { font-size: .87rem; line-height: 1.4; }
.platform-items small { color: var(--muted); }
.platform-note { margin: .2rem 0 0; color: var(--muted); }

/* ---------- third-party citations (named, never linked) ---------- */
.citation-list { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .5rem; }
.citation {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  padding: .6rem .75rem; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius-xs); font-size: .92rem;
}
.src-mark {
  font-weight: 700; font-size: .78rem; letter-spacing: .02em;
  padding: .22rem .6rem; border-radius: 999px; white-space: nowrap;
  background: var(--surface-3); color: var(--text-2); border: 1px solid var(--line-strong);
}
.citation-facts { flex: 1 1 auto; color: var(--text-2); }
.citation-facts b { color: var(--text); }
.citation-facts .sep { color: var(--faint); margin: 0 .35rem; }
.citation-date { color: var(--muted); font-size: .78rem; white-space: nowrap; }
.affiliation-notice { color: var(--faint); font-size: .78rem; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 760px) {
  /* Row 1: brand + the two controls a visitor actually reaches for (country, theme).
     Row 2: main nav, horizontally scrollable. Language moves to the footer — six
     locale codes cannot share a 390px row with the country picker. */
  .site-header { gap: .55rem .6rem; padding: .6rem 1rem; }
  .logo { order: 1; }
  .logo-mark { width: 74px; }
  .header-tools { order: 2; margin-left: auto; gap: .4rem; flex-wrap: nowrap; }
  .site-header nav.main-nav {
    order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin: 0 -1rem; padding: 0 1rem;
  }
  .site-header nav.main-nav::-webkit-scrollbar { display: none; }
  .site-header nav.main-nav a { white-space: nowrap; }
  .footer-lang { display: flex; }

  /* Language stays on a phone now that it is one narrow pill instead of six codes
     (Richard, 2026-09-08). Row 1 is logo · language · country · theme; the three
     controls share what is left after the wordmark, so the wordmark gives some back. */
  .logo-mark { width: 62px; }
  .header-tools { gap: .3rem; }
  .lang-btn { padding: .35rem .45rem .35rem .4rem; gap: .22rem; }
  .lang-btn .lang-globe { display: none; }
  .lang-panel { position: fixed; left: auto; right: 1rem; width: min(15rem, calc(100vw - 2rem)); }

  /* `max-width: 9.5rem` truncated the button to "Choose yo…" — the one control whose
     whole job is telling you which country is selected. It now shrinks to what the
     header has spare instead of to a number picked in advance. */
  .country-btn { max-width: none; min-width: 0; padding-left: .5rem; padding-right: .55rem; }
  .country-picker { min-width: 0; }
  .market-form { min-width: 0; flex: 0 1 auto; }

  .factor-row { grid-template-columns: minmax(100px, 140px) 1fr 3rem; }
  /* The panel is `fixed`, and `.site-header` carries `backdrop-filter` — which makes the
     header the containing block for fixed descendants. So `top` is measured from the
     header, and the old `4.2rem` landed part-way DOWN the nav row: the top sliver of
     "Casinos Operators Jurisdictions" stuck out above the panel and read as the menu
     showing through it. `100%` is the header's own bottom edge, wherever it falls, so
     the panel now hangs off the header instead of overlapping it by a few pixels.

     `z-index` is raised past the header's own 40 for the case where a browser does NOT
     treat backdrop-filter as a containing block and the panel escapes to the viewport. */
  .country-panel {
    position: fixed; left: 1rem; right: 1rem; top: calc(100% + .4rem);
    width: auto; z-index: 70;
  }

  /* The pill only works while input and button sit side by side; below that,
     stack them instead of letting the pill grow into a tall blob. */
  .hero { padding: 2rem 0 1rem; }
  .hero-search {
    border-radius: var(--radius); padding: .75rem; gap: .6rem;
    flex-direction: column; align-items: stretch;
  }
  /* The typeahead wrapper carries `flex: 1 1 260px` for the desktop pill. Once the
     form stacks, flex-basis applies to the BLOCK axis — so that 260px became the
     wrapper's HEIGHT, opening a tall empty gap between the field and the button and
     pushing the suggestions panel (anchored to 100% of the wrapper) far below the
     input it belongs to. */
  .hero-search .suggest-wrap { flex: none; width: 100%; }
  .hero-search input[type=text] {
    flex: none; width: 100%; background: var(--surface-2);
    border: 1px solid var(--line-strong); border-radius: var(--radius-xs);
    padding: .6rem .75rem;
  }
  .hero-search .btn { width: 100%; }
}

/* ---- Casino directory: Reviewed / On Our Radar / The Graveyard ---------------
   Reuses the existing token palette so the three listings sit inside the site's
   look rather than beside it. Tag colours carry meaning: green for a named
   regulator, red for a closed operator, orange for "listed, not reviewed". */
.dir-head { margin: 0 0 1.6rem; }
.dir-blurb { color: var(--muted); max-width: 62ch; line-height: 1.6; }
.dir-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.1rem 0 .9rem; }
.dir-tab {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .85rem; border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); text-decoration: none; font-size: .92rem;
}
.dir-tab:hover { border-color: var(--line-strong); color: var(--text); }
.dir-tab.is-on {
  background: var(--accent-wash); border-color: var(--accent-deep); color: var(--text);
}
.dir-count {
  font-variant-numeric: tabular-nums; font-size: .8rem;
  color: var(--muted); background: var(--line); padding: .05rem .4rem; border-radius: 6px;
}
.dir-total { color: var(--muted); font-size: .9rem; margin-top: .6rem; }

.dir-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.dir-card {
  border: 1px solid var(--line); border-radius: 12px; padding: .85rem;
  display: flex; flex-direction: column; gap: .45rem;
  /* A grid item's automatic minimum size is its longest unbreakable word, so
     "supermegafluffyrainbowvegasjackpot.com" widened its track past the viewport and
     scrolled the whole page sideways at 320px. */
  min-width: 0;
}
.dir-name, .dir-domain { overflow-wrap: anywhere; }
.dir-card:hover { border-color: var(--line-strong); }
.dir-card a { text-decoration: none; color: inherit; display: block; }
.dir-logo {
  display: flex; align-items: center; justify-content: center;
  height: 46px; margin-bottom: .5rem;
}
.dir-logo img { max-height: 40px; max-width: 100%; object-fit: contain; }
.dir-mono {
  font-weight: 700; letter-spacing: .04em; color: var(--muted);
  background: var(--line); border-radius: 8px; padding: .5rem .7rem;
}
.dir-name { font-weight: 600; display: block; }
.dir-domain { color: var(--muted); font-size: .84rem; display: block; }
.dir-empty { color: var(--muted); }
.dir-pager { display: flex; gap: 1rem; align-items: center; margin: 1.4rem 0; }

.tag {
  display: inline-block; font-size: .74rem; padding: .12rem .5rem;
  border-radius: 999px; border: 1px solid;
}
.tag-green  { color: var(--ok);   background: var(--ok-wash);   border-color: var(--ok-line); }
.tag-orange { color: var(--warn); background: var(--warn-wash); border-color: var(--warn-line); }
.tag-red    { color: var(--bad);  background: var(--bad-wash);  border-color: var(--bad-line); }

.brand-head { display: flex; gap: 1.1rem; align-items: center; margin-bottom: 1.4rem; }
.brand-mark {
  width: 96px; height: 96px; flex: none; display: flex;
  align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 14px;
}
.brand-mark img { max-width: 78px; max-height: 78px; object-fit: contain; }
.brand-domain { color: var(--muted); margin: .2rem 0 .5rem; }
.verdict { border-left: 3px solid var(--accent-deep); padding-left: 1rem; margin: 1.4rem 0; }
.verdict p { line-height: 1.7; max-width: 72ch; }
.notice {
  border: 1px solid var(--warn-line); background: var(--warn-wash);
  color: var(--text); padding: .9rem 1rem; border-radius: 10px; margin: 1.2rem 0;
  max-width: 72ch; line-height: 1.6;
}
.signals h3 { margin: 1.1rem 0 .4rem; font-size: 1rem; }
.signal-list { margin: 0; padding-left: 1.1rem; }
.signal-list li { margin: .3rem 0; line-height: 1.5; }
.muted { color: var(--muted); }
.brand-foot { margin-top: 2rem; font-size: .86rem; }

/* ---- Casino hub: the three groups as the front door -------------------------- */
.hub-head { margin-bottom: 1.6rem; }
.hub-grid {
  list-style: none; padding: 0; margin: 0 0 2.5rem;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.hub-card {
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  transition: border-color .15s ease, transform .15s ease;
}
.hub-card:hover { border-color: var(--accent-deep); transform: translateY(-2px); }
.hub-card a {
  display: flex; flex-direction: column; gap: .5rem;
  padding: 1.3rem; text-decoration: none; color: inherit; height: 100%;
}
.hub-count {
  font-size: 2.1rem; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hub-card h2 { margin: 0; font-size: 1.15rem; }
.hub-card p { color: var(--muted); font-size: .9rem; line-height: 1.55; margin: 0; }
.hub-samples { display: flex; gap: .4rem; align-items: center; margin-top: auto; padding-top: .8rem; }
.hub-samples img {
  height: 22px; max-width: 46px; object-fit: contain; opacity: .75;
}
.hub-go { color: var(--accent-soft); font-size: .9rem; font-weight: 600; }
/* Colour carries the meaning: researched, watching, closed. */
.hub-reviewed  .hub-count { color: var(--ok); }
.hub-radar     .hub-count { color: var(--warn); }
.hub-graveyard .hub-count { color: var(--bad); }
.hub-rated { border-top: 1px solid var(--line); padding-top: 1.6rem; }

/* ---- Living homepage --------------------------------------------------------
   The page is a dashboard of real work, so the layout puts movement first: the
   hero carries live counts, and the feed sits above the fold on desktop. */
.hero-live {
  display: grid; gap: 2rem; align-items: center;
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, .65fr);
}
@media (max-width: 860px) { .hero-live { grid-template-columns: 1fr; } }
.hero-note { color: var(--muted); font-size: .88rem; margin-top: .7rem; }

.hero-stats {
  list-style: none; margin: 0; padding: 1.2rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  border: 1px solid var(--line); border-radius: 16px;
  background: linear-gradient(180deg, var(--accent-wash), transparent);
}
.hero-stats li { display: flex; flex-direction: column; gap: .15rem; }
.hero-stats b {
  font-size: 1.7rem; line-height: 1; font-variant-numeric: tabular-nums;
}
.hero-stats span { color: var(--muted); font-size: .78rem; }

.home-section { margin: 3rem 0; }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: .5rem; flex-wrap: wrap;
}
.section-head h2 { margin: 0; font-size: 1.3rem; }
.section-head a { color: var(--accent-soft); text-decoration: none; font-size: .9rem; }
.section-note { color: var(--muted); font-size: .9rem; max-width: 68ch; margin: 0 0 1rem; line-height: 1.55; }

.pick-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.pick-card { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.pick-card:hover { border-color: var(--accent-deep); }
.pick-card a { display: block; padding: 1.2rem; text-decoration: none; color: inherit; }
.pick-logo { display: flex; align-items: center; height: 44px; margin-bottom: .7rem; }
.pick-logo img { max-height: 38px; max-width: 140px; object-fit: contain; }
.pick-card h3 { margin: 0 0 .1rem; font-size: 1.05rem; }
.pick-domain { color: var(--muted); font-size: .82rem; margin: 0 0 .6rem; }
.pick-line { font-size: .88rem; line-height: 1.55; color: var(--text); margin: 0 0 .8rem; }
.pick-tags { display: flex; flex-wrap: wrap; gap: .35rem; }

.home-columns {
  display: grid; gap: 2rem;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, .8fr);
}
@media (max-width: 900px) { .home-columns { grid-template-columns: 1fr; } }

/* Feed: a vertical timeline. The dot colour says what kind of work happened. */
.feed { list-style: none; margin: 0; padding: 0; position: relative; }
.feed::before {
  content: ""; position: absolute; left: 5px; top: .5rem; bottom: .5rem;
  width: 1px; background: var(--line);
}
.feed-item {
  position: relative; padding: .55rem 0 .55rem 1.6rem;
  font-size: .9rem; line-height: 1.5;
}
.feed-dot {
  position: absolute; left: 0; top: .95rem; width: 11px; height: 11px;
  border-radius: 50%; border: 2px solid var(--bg); background: var(--muted);
}
.feed-reviewed .feed-dot { background: var(--ok); }
.feed-closed   .feed-dot { background: var(--bad); }
.feed-signal   .feed-dot { background: var(--accent-soft); }
.feed-item a { color: var(--text); font-weight: 600; text-decoration: none; }
.feed-item a:hover { color: var(--accent-soft); }
.feed-detail { display: block; color: var(--muted); font-style: italic; font-size: .85rem; }
.feed-item time { display: block; color: var(--muted); font-size: .78rem; margin-top: .15rem; }

.mini-list { list-style: none; margin: 0; padding: 0; }
.mini-list li {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .5rem 0; border-bottom: 1px solid var(--line); font-size: .9rem;
}
.mini-list li:last-child { border-bottom: 0; }
.mini-list a { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: inherit; }
.mini-list img { height: 20px; max-width: 40px; object-fit: contain; }
.home-cta { display: flex; gap: .8rem; justify-content: center; margin: 3rem 0 1rem; flex-wrap: wrap; }

/* ---- Brand page: the fact table is the trust device ------------------------- */
.facts { margin: 2rem 0; }
.fact-table { width: 100%; border-collapse: collapse; font-size: .92rem; max-width: 860px; }
.fact-table th {
  text-align: left; font-weight: 600; color: var(--muted);
  padding: .6rem .8rem .6rem 0; white-space: nowrap; vertical-align: top; width: 1%;
}
.fact-table td { padding: .6rem .8rem .6rem 0; vertical-align: top; }
.fact-table tr { border-bottom: 1px solid var(--line); }
.fact-table tr:last-child { border-bottom: 0; }
.fact-table td:last-child { text-align: right; white-space: nowrap; }
/* The label column is `white-space: nowrap` and the evidence column is too, so on a phone
   the table's intrinsic minimum was 386px inside a 350px column and the whole document
   scrolled sideways. Below this the three columns become two rows: the fact, then its
   label and its evidence tag under it. */
@media (max-width: 560px) {
  .fact-table, .fact-table tbody, .fact-table tr, .fact-table th, .fact-table td {
    display: block; width: auto;
  }
  .fact-table tr { padding: .6rem 0; }
  .fact-table th { padding: 0 0 .15rem; white-space: normal; }
  .fact-table td { padding: 0; overflow-wrap: anywhere; }
  .fact-table td:last-child { text-align: left; padding-top: .35rem; white-space: normal; }
}
.verdict h2, .facts h2, .signals h2 { font-size: 1.2rem; }

/* ---- Operator / regulator hubs ---------------------------------------------- */
.crumb { margin: 0 0 .4rem; font-size: .86rem; }
.crumb a { color: var(--accent-soft); text-decoration: none; }
.entity-grid {
  list-style: none; padding: 0; margin: 1.2rem 0 0;
  display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.entity-chip { border: 1px solid var(--line); border-radius: 10px; }
.entity-chip:hover { border-color: var(--accent-deep); }
.entity-chip a {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .6rem .8rem; text-decoration: none; color: inherit; font-size: .9rem;
}
.entity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fact-table a { color: var(--accent-soft); text-decoration: none; }
.fact-table a:hover { text-decoration: underline; }

/* Site search reused on listing pages. Narrower than the hero version so it reads as a
   tool on the page rather than a second hero. */
.page-search {
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
  max-width: 560px; margin: 1rem 0 .8rem;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 999px; padding: .3rem .35rem .3rem .9rem; box-shadow: var(--shadow);
}
.page-search .suggest-wrap { flex: 1 1 220px; min-width: 0; }
.page-search input[type=text] {
  width: 100%; border: none; background: none; padding: .45rem 0;
  font-size: .95rem; color: var(--text);
}
.page-search input[type=text]:focus { outline: none; box-shadow: none; }
.page-search:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
.page-search .btn { white-space: nowrap; }
@media (max-width: 620px) {
  /* Same flex-basis-becomes-height trap as the hero: reset the wrapper when stacking. */
  .page-search { flex-direction: column; align-items: stretch; border-radius: var(--radius); padding: .7rem; }
  .page-search .suggest-wrap { flex: none; width: 100%; }
  .page-search input[type=text] {
    background: var(--surface-2); border: 1px solid var(--line-strong);
    border-radius: var(--radius-xs); padding: .55rem .7rem;
  }
  .page-search .btn { width: 100%; }
}
#entity-filter {
  width: 100%; max-width: 26rem; padding: .5rem .7rem; border-radius: 8px;
  border: 1px solid var(--line); background: transparent; color: var(--text);
}

/* ---- Licence hub: a comparison table, so weights read side by side ----------- */
/* Generic table scroll container. `max-width: 100%` matters as much as the overflow rule:
   without it the div is sized by its content and simply moves the overflow up a level. */
.table-scroll { overflow-x: auto; max-width: 100%; }
.lic-table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: .93rem; }
.lic-table th {
  text-align: left; font-weight: 600; color: var(--muted); font-size: .82rem;
  text-transform: uppercase; letter-spacing: .04em;
  padding: .5rem .8rem .5rem 0; border-bottom: 1px solid var(--line-strong);
}
.lic-table td { padding: .7rem .8rem .7rem 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.lic-table tr:last-child td { border-bottom: 0; }
.lic-table a { text-decoration: none; }
.lic-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.lic-short { font-size: .8rem; margin-left: .4rem; }
.lic-country { white-space: nowrap; }
.lic-country .flag, h1 .flag { font-size: 1.05em; margin-right: .25rem; }
.lic-meta { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin: -.4rem 0 1rem; }
.lic-official { font-size: .9rem; text-decoration: none; }
.lic-about {
  border-left: 3px solid var(--accent-deep); padding-left: 1rem;
  max-width: 72ch; margin: 1.2rem 0;
}
.lic-about p { line-height: 1.65; }
.variant-list { columns: 2; column-gap: 2rem; font-size: .86rem; padding-left: 1.1rem; }
@media (max-width: 640px) {
  .variant-list { columns: 1; }
  /* Hide the COUNTRY column on a phone. Targeted by class, not by position: the header's
     first cell is colspan="2", so the header row has four cells where a body row has
     five, and `th:nth-child(2), td:nth-child(2)` hid the Country HEADER but the AUTHORITY
     NAME. Mobile visitors got an emblem, a country, a count and a weight with no way to
     tell which regulator any row described. Position selectors and colspan should not be
     asked to agree. */
  .lic-country, .lic-country-head { display: none; }

  /* Hiding the country column is not enough on its own — the table still came to 437px
     inside a 390px phone. The remaining width is the oversight tag, which is nowrap and
     130px of "15/100 · Nominal", plus generous cell padding. Letting the tag wrap and
     tightening the gaps fits the table without dropping another column: the score and its
     tier label are the reason this page exists, and a horizontal scrollbar on a
     four-column table is worse than two lines in one cell. */
  .lic-table { font-size: .86rem; }
  .lic-table th, .lic-table td { padding-right: .45rem; }
  .lic-table .tag { white-space: normal; }
  .lic-emblem { width: 34px; padding-right: .4rem !important; }
  .lic-emblem img { width: 28px; height: 28px; }
  .lic-short { display: none; }
}

/* Authority emblems and whole-row links. */
.lic-emblem { width: 46px; padding-right: .6rem !important; }
.lic-emblem img { width: 38px; height: 38px; object-fit: contain; display: block; }
.lic-flag-fallback { font-size: 1.6rem; line-height: 1; }
.lic-row { cursor: pointer; transition: background .12s ease; }
.lic-row:hover { background: var(--glass); }
.lic-link { color: var(--text); }
.lic-row:hover .lic-link { color: var(--accent-soft); }
.lic-head { display: flex; align-items: center; gap: .9rem; }
.lic-crest {
  width: 62px; height: 62px; object-fit: contain; flex: none;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 6px;
}
.entity-sub { font-size: 1.05rem; margin: 1.6rem 0 .6rem; color: var(--muted); }

/* ---------- 404 ----------
   Centred and narrow, so the eye lands on the search field rather than on the error.
   The big "404" is decorative and aria-hidden in the markup: the heading carries the
   meaning, which is what a screen reader announces. Uses --grad, which §21 reserves for
   brand furniture — this is furniture, and no data sits behind it. */
.notfound { max-width: 40rem; margin: 3rem auto 4rem; text-align: center; }
.notfound-code {
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(4.5rem, 16vw, 8rem); line-height: .9; margin: 0 0 .5rem;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.notfound h1 { margin: 0 0 .6rem; }
.notfound .lede { margin: 0 auto 1.8rem; }
.notfound .hero-search { margin: 0 auto 1.2rem; }
.notfound-actions { margin: 0 0 2rem; }
.notfound-links {
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; justify-content: center;
  padding-top: 1.4rem; border-top: 1px solid var(--line);
}
.notfound-links a { color: var(--muted); font-size: .95rem; }
.notfound-links a:hover { color: var(--text); }

/* ---------- compare picker ----------
   Two search fields rather than 7,191 checkboxes. They sit side by side on a wide screen
   and stack on a narrow one; `minmax(0, 1fr)` rather than `1fr` because a grid track's
   default min-width is auto, which lets the suggestion panel's content push the column
   wider than its share and overflow the row. */
.cmp-slots {
  display: grid; gap: .75rem; margin: 1.25rem 0 .9rem;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}
.cmp-slot { position: relative; }
.cmp-slot .suggest-wrap { display: block; }
.cmp-slot .suggest-input {
  width: 100%; box-sizing: border-box;
  padding: .7rem .9rem; font-size: 1rem;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: 12px;
}
.cmp-slot .suggest-input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(124, 92, 255, .22);
}
.cmp-actions { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.cmp-hint { color: var(--muted); font-size: .85rem; }
.cmp-empty { color: var(--muted); margin: 2rem 0; }

/* The suggestion rows are <button> here rather than <a>, because choosing one fills the
   field instead of navigating. Reset the UA button styling so they match the links used
   in the other typeaheads. */
.suggest-panel button.suggest-item {
  width: 100%; text-align: left; font: inherit; color: inherit;
  background: none; border: 0; cursor: pointer;
}

/* Operator hub: Google News. `.news-brand` groups stories under the brand they name, so
   a company story and a brand story are never mistaken for each other. */
.news-brand {
  font-size: .95rem; margin: 1.1rem 0 .35rem; color: var(--text-2);
  display: flex; align-items: center; gap: .5rem;
}

/* ---------- facet filters (operator index) ---------- */
.facet-letters {
  display: flex; flex-wrap: wrap; gap: .25rem; margin: 1rem 0 .9rem;
}
/* The pill was scoped to .facet-letters, so the licence page's sort switch — which reuses
   the same .letter class — rendered as two bare underlined links and gave no visual sign
   of which ordering was active. aria-current said so; nothing on screen did. */
.facet-letters .letter, .lic-sort .letter {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2rem; padding: .25rem .5rem; font-size: .85rem; font-weight: 600;
  color: var(--text-2); text-decoration: none;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-xs);
}
.facet-letters .letter:hover, .lic-sort .letter:hover {
  color: var(--text); background: var(--surface-2);
}
.facet-letters .letter.is-on, .lic-sort .letter.is-on {
  color: var(--on-accent); background: var(--accent-deep); border-color: var(--accent-deep);
}
.facets {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.1rem 1.2rem .9rem; margin-bottom: 1.2rem;
  box-shadow: var(--shadow);
}
/* minmax(0,…) rather than auto: a long authority name in the select would otherwise set
   the column's minimum and push the row wider than its container. */
.facet-row {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  align-items: start;
}
.facet label, .facet-legend {
  display: block; font-size: .82rem; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: .35rem;
}
.facet select, .facet input[type=number] {
  width: 100%; padding: .5rem .6rem; font: inherit; font-size: .95rem;
  color: var(--text); background: var(--bg-2);
  border: 1px solid var(--line-strong); border-radius: var(--radius-xs);
}
.facet-range { display: flex; align-items: center; gap: .4rem; }
.facet-range input { min-width: 0; }
/* `.facet label` is (0,1,1) and this was (0,1,0), so the tick-box labels lost and rendered
   UPPERCASE like the field headings — they read as three more headings rather than as two
   options you can click. Qualified to (0,2,1) so it wins on its own merits rather than by
   an !important. */
.facet label.facet-check {
  display: flex; align-items: center; gap: .45rem;
  font-size: .92rem; font-weight: 400; text-transform: none; letter-spacing: 0;
  color: var(--text-2); margin-bottom: .25rem; cursor: pointer;
}
.facet-check input { width: auto; }
.facet-hint { display: block; color: var(--faint); font-size: .78rem; margin-top: .3rem; }
.facet-actions { display: flex; align-items: end; gap: .5rem; flex-wrap: wrap; }
.dir-sortnote { display: block; color: var(--muted); font-weight: 400; margin-top: .3rem; }

/* A break that only applies where there is room for it. On a phone the sentence already
   wraps several times, so forcing another leaves a short orphan line. */
@media (max-width: 640px) { .br-desktop { display: none; } }

/* "Previously operated by" — who runs the brand now, so a former link is bounded rather
   than left reading as current. */
.former-now { display: block; font-size: .8rem; color: var(--muted); margin-top: .3rem; }

/* Centred index header. `inline-flex` on the search form so it centres as a block rather
   than stretching the full width of the section. */
.dir-head-center { text-align: center; }
.dir-head-center .dir-blurb { margin-left: auto; margin-right: auto; max-width: 46rem; }
.dir-head-center .page-search { margin-left: auto; margin-right: auto; }
.dir-provenance {
  max-width: 44rem; margin: .9rem auto 0;
  color: var(--faint); font-size: .82rem; line-height: 1.55;
}

/* Apply/Reset on their own row: as a fourth grid column the button took a quarter of the
   card for itself and squeezed the hints into wrapping. */
/* Right-aligned, the conventional place for a form's action, and it puts the empty space
   between the fields and the button instead of leaving a wide band beside it. */
.facet-foot {
  display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end;
  margin-top: .85rem; padding-top: .85rem; border-top: 1px solid var(--line);
}

/* Operator hub: licensing panel. Cards rather than a table — one to four rows, each with
   an emblem, a place and a licence number, which a table would stretch across a width it
   does not need. */
.lic-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.lic-card {
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  padding: .8rem .9rem; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.lic-card-mark { width: 42px; flex: none; display: flex; justify-content: center; }
.lic-card-mark img { width: 40px; height: 40px; object-fit: contain; }
.lic-card-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1 1 14rem; }
.lic-card-name { font-weight: 600; color: var(--text); text-decoration: none; }
.lic-card-name:hover { color: var(--accent-soft); }
.lic-card-place { font-size: .86rem; color: var(--muted); }
.lic-number {
  font-family: var(--font-mono); font-size: .82rem; color: var(--text-2);
  overflow-wrap: anywhere;
}
/* A tighter A–Z for filtering a single operator's brands. */
.facet-letters-sm { margin: .2rem 0 1rem; }
.facet-letters-sm .letter { min-width: 1.75rem; padding: .2rem .4rem; font-size: .8rem; }

/* Google News section on an operator hub. */
.news-head { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.news-logo { width: 24px; height: 24px; flex: none; border-radius: 5px; }
/* Space above the brand-news group: it is a second, different population from the
   company-level stories, and ran straight into them. */
.news-sub { margin-top: 1.9rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.news-jump { display: inline; }
.news-jump a { font-weight: 600; }

/* Anchor targets clear the sticky header.
   Without this an in-page link scrolls its target to y=0, which is BEHIND the header —
   clicking "previously operated" landed that heading at 19px under a 60px header, so the
   thing you jumped to was the one thing you could not see. The header is 60px on desktop
   and 101–113px once the nav wraps to its own row, hence the two values. */
:target, [id] { scroll-margin-top: 5rem; }
@media (max-width: 900px) { :target, [id] { scroll-margin-top: 8.5rem; } }

/* Sits immediately above the filter card, so the instruction and the controls it
   describes are one unit. */
.facet-intro { color: var(--text-2); margin: 0 0 .5rem; font-size: .95rem; }

/* A card that follows a run of brand tiles needs room above it. `.card` carries only a
   bottom margin, so the Google News block butted straight against the grid it follows. */
.card-gap { margin-top: 2.2rem; }

/* ---------- casinos hub ---------- */
.hub-section { margin: 2.6rem 0; }
.hub-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: .35rem;
}
.hub-section-head h2 { margin: 0; }
.hub-more { font-size: .92rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.hub-note { color: var(--muted); font-size: .93rem; max-width: 60rem; margin: 0 0 1.1rem; }

/* Rated casinos: logo, name, score. minmax(0,…) so a long brand name cannot set the
   track's minimum and push the grid wider than its container. */
.rated-grid {
  list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr));
}
.rated-card a {
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  height: 100%; padding: 1rem .8rem; text-align: center; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  transition: border-color .15s, transform .15s;
}
.rated-card a:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.rated-logo {
  width: 64px; height: 44px; display: flex; align-items: center; justify-content: center;
}
.rated-logo img { max-width: 64px; max-height: 44px; object-fit: contain; }
.rated-name { font-weight: 600; color: var(--text); line-height: 1.25; }
.rated-conf { font-size: .76rem; color: var(--faint); }

/* Country links: a dense, scannable list rather than a card each. */
.country-links {
  list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem .9rem;
  grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr));
}
.country-links a {
  display: block; padding: .3rem .1rem; font-size: .95rem; text-decoration: none;
  color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.country-links a:hover { color: var(--accent-soft); }

/* Cross-links out of the hub. */
.cross-links {
  list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}
.cross-links a {
  display: block; height: 100%; padding: .9rem 1rem; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.cross-links a:hover { border-color: var(--line-strong); }
.cross-links strong { display: block; color: var(--text); margin-bottom: .15rem; }
.cross-links span { display: block; color: var(--muted); font-size: .88rem; line-height: 1.45; }

/* ---------- licence tiers explainer (shared by /methodology/ and /licences/) ---------- */
.tier-cards {
  display: grid; gap: .7rem; margin-top: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}
.tier-card {
  padding: .9rem 1rem; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--line);
  border-left-width: 4px;
}
.tier-card.tier-ok   { border-left-color: var(--ok); }
.tier-card.tier-warn { border-left-color: var(--warn); }
.tier-card.tier-bad  { border-left-color: var(--bad); }
.tier-card-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.tier-weight { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.tier-why { margin: 0 0 .5rem; font-size: .9rem; line-height: 1.55; color: var(--text-2); }
.tier-examples { margin: 0; font-size: .8rem; color: var(--faint); line-height: 1.5; }
.tier-examples span { font-weight: 600; color: var(--muted); }

/* ---------- licence index ---------- */
.lic-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem 1.5rem; flex-wrap: wrap; margin: 2.2rem 0 .5rem;
}
.lic-total { margin: 0; color: var(--muted); font-size: .93rem; }
.lic-sort { display: flex; gap: .3rem; flex-wrap: wrap; }
.lic-sort .letter { min-width: 0; padding: .35rem .8rem; gap: .35rem; }

.lic-tier-head { margin: 1.8rem 0 .7rem; }
.lic-tier-head h2 {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin: 0 0 .25rem; font-size: 1.15rem; color: var(--muted); font-weight: 600;
}
.lic-tier-head p { margin: 0; color: var(--muted); font-size: .88rem; max-width: 60rem; }

.lic-cards-grid {
  list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
}
.lic-auth a {
  display: flex; flex-direction: column; justify-content: space-between; gap: .75rem;
  height: 100%; padding: .85rem .95rem; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  transition: border-color .15s, transform .15s;
}
.lic-auth a:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.lic-auth-mark {
  width: 44px; flex: none; display: flex; align-items: center; justify-content: center;
}
.lic-auth-mark img { width: 40px; height: 40px; object-fit: contain; }
/* min-width:0 so a long authority name wraps inside the card instead of setting the
   grid track's minimum and widening every column. */
.lic-auth-body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; flex: 1 1 auto; }
.lic-auth-name { font-weight: 600; color: var(--text); line-height: 1.3; }
.lic-auth-place { font-size: .83rem; color: var(--muted); }
.lic-auth-meta { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.lic-auth-count { font-size: .8rem; color: var(--faint); white-space: nowrap; }

/* The ⇄ between the two orderings. Not a link and not clickable — it separates the pair
   rather than acting as a toggle. */
.lic-sort { align-items: center; }
.lic-sort-sep { color: var(--faint); font-size: 1rem; padding: 0 .15rem; user-select: none; }
.lic-sort-icon { font-size: .95em; line-height: 1; }

/* ---------- licence index: country filter and tile flag ---------- */
.lic-country-filter { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.lic-country-filter label {
  font-size: .82rem; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
.lic-country-filter select {
  padding: .35rem .5rem; font: inherit; font-size: .9rem; max-width: 13rem; min-width: 0;
  color: var(--text); background: var(--bg-2);
  border: 1px solid var(--line-strong); border-radius: var(--radius-xs);
}
.lic-country-filter .btn { padding: .35rem .8rem; font-size: .85rem; }
.lic-clear { font-size: .85rem; }

/* The tile's flag sits in the corner opposite the regulator emblem. Absolute, so it
   cannot push the name around; the card reserves room for it with padding-right. */
/* Top row: emblem and name. Bottom rail: what it licenses, and whose flag it is —
   on the same baseline, in opposite corners. */
.lic-auth-top { display: flex; align-items: center; gap: .9rem; }
.lic-auth-foot {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding-top: .6rem; border-top: 1px solid var(--line);
}
.lic-auth-flag { font-size: 1.3rem; line-height: 1; }

/* The tier group heading now reads as a sentence, so it takes body weight rather than
   the muted all-caps label styling it had. */
.lic-tier-head h2 { font-size: 1.2rem; color: var(--text); }

/* Four tiers, so the explainer sits as a 2x2 rather than an awkward five. */
.tier-cards { grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr)); }

/* "Learn more" beside each tier heading, jumping to the explainer at the foot. Sits
   outside the <h2> so it is not read as part of the heading. */
.lic-tier-row { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.lic-tier-row h2 { margin: 0; }
.lic-learn { font-size: .85rem; font-weight: 600; white-space: nowrap; }

/* ---------- compare: centred picker, preview, leading column ---------- */
.cmp-centred { max-width: 54rem; margin-left: auto; margin-right: auto; }
.cmp-centred .cmp-actions { justify-content: center; }

/* The leading column. A left/right rule rather than a filled background: the cells hold
   data, and §21 keeps colour off data surfaces. */
.compare-table th.cmp-best {
  border-top: 2px solid var(--ok); background: var(--ok-wash);
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
}
.cmp-best-badge {
  display: block; margin-top: .3rem; font-size: .72rem; font-weight: 700;
  letter-spacing: .02em; color: var(--ok); white-space: nowrap;
}

/* Preview of what the comparison produces. Ghost bars stand in for values without ever
   showing a number, so nothing here can be mistaken for real data about a real casino. */
.cmp-preview {
  max-width: 54rem; margin: 1.6rem auto 0; padding: 1.2rem 1.3rem;
  background: var(--surface); border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
}
.cmp-preview-head { margin: 0 0 .9rem; font-weight: 600; color: var(--text-2); }
.cmp-preview-rows { list-style: none; margin: 0; padding: 0; }
.cmp-preview-rows li {
  display: grid; align-items: center; gap: .6rem 1rem;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) 4.5rem 4.5rem;
  padding: .55rem 0; border-bottom: 1px solid var(--line);
}
.cmp-preview-rows li:last-child { border-bottom: 0; }
.cmp-preview-label { font-weight: 600; font-size: .9rem; color: var(--text-2); }
.cmp-preview-hint { font-size: .82rem; color: var(--faint); line-height: 1.45; }
.cmp-preview-ghost {
  height: .7rem; border-radius: 999px; background: var(--surface-3);
}
.cmp-preview-foot {
  margin: 1rem 0 0; padding-top: .8rem; border-top: 1px solid var(--line);
  font-size: .85rem; color: var(--muted);
  /* Centred (Richard, 2026-09-07). It is a caption for the whole preview block above it,
     not a row in the list, and left-aligned it read as one more unlabelled item. */
  text-align: center;
}
@media (max-width: 640px) {
  /* The hint column is the first thing to go: the label and the two ghost bars are what
     communicate the shape of the table. */
  .cmp-preview-rows li { grid-template-columns: minmax(0, 1fr) 3rem 3rem; }
  .cmp-preview-hint { display: none; }
}

/* The graveyard marker sits BESIDE the "Closed" tag rather than inside it, so it can be
   read at a glance: inside, it was constrained to the tag's .72rem and read as a smudge.
   aria-hidden because the word already carries the meaning — a screen reader announcing
   "headstone" after "Closed" adds nothing.

   The wrapper is what keeps them on one line. The brand cards are column flex containers
   with the default align-items:stretch, so the tag filled the card's width and the emoji
   became the next ROW rather than sitting to its right. `align-self: start` also stops the
   pair itself stretching. */
.status-mark {
  display: inline-flex; align-items: center; gap: .1rem; align-self: start;
}
.grave {
  font-size: 1.3rem; line-height: 1; margin-left: .35rem;
  vertical-align: -.25em; user-select: none;
}

/* A closed casino's licence is a fact about the past, and the table says so rather than
   letting it sit beside a live casino's regulator as though it still applied. */
.cmp-past { color: var(--muted); font-style: italic; }

/* The operator cell: mark above the name, not beside it. A comparison can hold four
   columns on a 320px screen, so a logo and a company name on one line would either wrap
   mid-name or force the table wider than the page. */
.cmp-op { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }

/* ---------- account: register / log in ----------
   Rebuilt 2026-09-07. Both pages were an h1 and {{ form.as_p }} on the full 1060px
   column, which put a 480px input alone in the middle of a desktop screen and made the
   only two pages asking a visitor for something look like the least finished on the site.

   One card, one layout, both pages: sign up and log in are the same decision seen from
   two sides, and moving between them should not feel like changing site. */
.auth-layout {
  display: grid; gap: 1.5rem; align-items: start; margin: 1rem auto 3rem;
  grid-template-columns: minmax(0, 27rem) minmax(0, 20rem); justify-content: center;
}
.auth-layout-narrow { grid-template-columns: minmax(0, 27rem); }
.auth-card {
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: 1.75rem 1.6rem; box-shadow: var(--shadow-lg);
}
.auth-card h1 { font-size: 1.6rem; margin: 0 0 .4rem; }
.auth-lede { color: var(--muted); margin: 0 0 1.25rem; font-size: .95rem; }

/* Google's mark on white in both themes, per their brand guidance — and it also reads as
   "this button is not ours", which is the useful signal on a sign-in screen. */
/* `a.btn-google`, not `.btn-google`. `[data-theme="light"] a` is specificity (0,1,1) and
   out-ranks a bare class, so the label rendered in Rixer violet on Google's white pill —
   which is both off-brand for them and reads as a mis-styled link. Matching that
   specificity and declaring it later is what wins. */
a.btn-google {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; padding: .62rem 1rem; border-radius: 999px;
  background: #fff; color: #1f1f1f; border: 1px solid #dadce0;
  font-weight: 600; font-size: .95rem; text-decoration: none;
  transition: box-shadow .15s, background .15s;
}
a.btn-google:hover { background: #f7f8f8; color: #1f1f1f; box-shadow: 0 1px 6px rgba(0,0,0,.28); }
.btn-google .g-mark { flex: none; }

/* "or" on a rule. A border on the container with the word sitting over it, rather than
   two absolutely-positioned lines that drift apart at odd widths. */
.auth-or {
  display: flex; align-items: center; gap: .75rem; margin: 1.1rem 0;
  color: var(--faint); font-size: .82rem; text-transform: uppercase; letter-spacing: .08em;
}
.auth-or::before, .auth-or::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--line);
}

.auth-field { display: flex; flex-direction: column; margin: 0 0 1rem; }
.auth-field label { font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
/* max-width off: inside a 27rem card the field should fill it, and the global 480px cap
   left a ragged right edge next to the full-width button below it. */
.auth-field input { max-width: none; }
.auth-field .helptext { color: var(--muted); font-size: .78rem; margin: .3rem 0 0; }
.auth-field.has-error input { border-color: var(--bad); }
.auth-field-error { color: var(--bad); font-size: .82rem; margin: .3rem 0 0; }
.auth-alert {
  border: 1px solid var(--bad); background: var(--bad-wash); color: var(--text);
  border-radius: var(--radius-xs); padding: .7rem .85rem; margin: 0 0 1rem; font-size: .9rem;
}
.auth-alert p { margin: 0; }
.btn-block { display: block; width: 100%; text-align: center; }
/* Which account the password belongs to. Above the field rather than in it: somebody who
   registered months ago has forgotten which username they picked, and this is the one
   fact that makes "your Rixer password" mean something specific. */
.auth-account {
  display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap;
  margin: 0 0 1rem; padding: .6rem .8rem; border-radius: var(--radius-xs);
  background: var(--surface-2); border: 1px solid var(--line); font-size: .88rem;
}
.auth-account span { color: var(--muted); }
.auth-account strong { color: var(--text); font-family: var(--font-mono); font-size: .92rem; }

.auth-switch { margin: 1.1rem 0 0; font-size: .92rem; text-align: center; }
/* Quieter than the sign-up switch above it: getting back in is the common need,
   having lost the password is not, and the two should not compete. */
.auth-forgot { margin: .5rem 0 0; text-align: center; font-size: .85rem; }
.auth-forgot a { color: var(--muted); }
.auth-fineprint {
  margin: .9rem 0 0; color: var(--faint); font-size: .8rem; line-height: 1.6;
  border-top: 1px solid var(--line); padding-top: .9rem;
}

.auth-aside { padding: .35rem .25rem; }
.auth-aside h2 { font-size: 1.05rem; margin: 0 0 .8rem; }
.auth-benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.auth-benefits li { display: grid; gap: .15rem; }
.auth-benefits strong { font-size: .95rem; }
.auth-benefits span { color: var(--muted); font-size: .87rem; line-height: 1.55; }
.auth-aside-note {
  margin: 1.2rem 0 0; padding: .8rem .9rem; border-radius: var(--radius-xs);
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--muted); font-size: .83rem; line-height: 1.6;
}
.account-signin { color: var(--muted); font-size: .9rem; margin: .6rem 0 1.2rem; }

@media (max-width: 860px) {
  /* The reasons to sign up go BELOW the form, not beside it. Above it they would push
     the thing the page is for off the first screen. */
  .auth-layout { grid-template-columns: minmax(0, 1fr); max-width: 27rem; }
}

/* ---------- footer policy links ----------
   Their own row above the language strip, because "where are the terms" is a question
   somebody asks deliberately — a link buried mid-paragraph in the disclosure text is one
   they scan past. */
/* The header's mark, repeated at the foot. Block-level with the same 72rem measure as
   the paragraphs under it, so it lines up with the text rather than floating loose. */
/* No `color` here on purpose: it inherits `.logo`, so the mark at the bottom of the page
   is the same colour as the one at the top. Stating `--text-2` here made the two differ,
   which is exactly what "use the same logo" was asking not to happen. */
.footer-logo {
  display: block; max-width: 72rem; margin: 0 auto .9rem;
}
.footer-logo .logo-mark { width: 84px; }

.footer-legal {
  display: flex; gap: 1.1rem; flex-wrap: wrap; max-width: 72rem;
  margin: 1rem auto 0; padding-top: .9rem; border-top: 1px solid var(--line);
}
.footer-legal a { color: var(--text-2); text-decoration: none; }
.footer-legal a:hover { color: var(--accent-soft); text-decoration: underline; }

/* ---------- legal pages (terms, privacy) ----------
   A narrower measure than the rest of the site. These are the only pages on Rixer read as
   continuous prose rather than scanned, and 1060px of running text is about 130 characters
   a line — roughly twice what anyone reads comfortably. */
.legal { max-width: 46rem; margin: 0 auto; }
.legal-head { margin-bottom: 2rem; }
.legal-head h1 { margin-bottom: .35rem; }
.legal-updated { color: var(--faint); font-size: .85rem; margin: 0 0 .9rem; }
.legal-lede { color: var(--muted); font-size: 1.02rem; line-height: 1.7; margin: 0; }
.legal section { margin: 0 0 2rem; }
.legal h2 {
  font-size: 1.2rem; margin: 0 0 .7rem; padding-bottom: .4rem;
  border-bottom: 1px solid var(--line);
}
.legal h3 { font-size: .98rem; margin: 1.3rem 0 .5rem; color: var(--text-2); }
.legal p, .legal li { line-height: 1.75; }
.legal ul { padding-left: 1.2rem; margin: .6rem 0; }
.legal li { margin: .4rem 0; }
/* A quieter aside for the paragraphs that qualify a claim rather than make one — the
   unverified-email note, the honest one about IP hashes. */
.legal-note {
  background: var(--surface-2); border-left: 3px solid var(--line-strong);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  padding: .75rem .95rem; color: var(--muted); font-size: .9rem;
}
.legal-table { width: 100%; margin: .8rem 0; font-size: .9rem; }
.legal-table th { text-align: left; font-size: .8rem; color: var(--muted); }
.legal-table code { font-size: .85rem; }
.legal-foot {
  margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--line);
  font-size: .9rem;
}

/* ---------- the three groups, as cards (rebuilt 2026-09-07) ----------
   Replaces .hub-grid/.hub-card for this block. The old card led with a 2.1rem number and
   closed with a strip of six arbitrary logos; the number is now secondary to the group's
   NAME, because the reader is choosing between "how far have you looked", not between
   three quantities. */
.tier-grid {
  list-style: none; padding: 0; margin: 0 0 2.5rem;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.tier-card {
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.tier-card:hover {
  border-color: var(--accent-deep); transform: translateY(-2px); box-shadow: var(--shadow-lg);
}
.tier-card a {
  display: flex; flex-direction: column; gap: .55rem; height: 100%;
  padding: 1.3rem; text-decoration: none; color: inherit;
}
.tier-ico { font-size: 1.7rem; line-height: 1; }
.tier-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.tier-head h3 { margin: 0; font-size: 1.15rem; }
.tier-count {
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1rem;
  padding: .1rem .5rem; border-radius: 999px; background: var(--surface-3);
  color: var(--text-2);
}
.tier-blurb { color: var(--muted); font-size: .9rem; line-height: 1.55; margin: 0; }
/* `margin-top: auto` pins the call to action to the bottom whatever the blurb's length,
   so three cards of unequal text still line their arrows up. */
.tier-go { margin-top: auto; padding-top: .5rem; color: var(--accent-soft);
  font-size: .9rem; font-weight: 600; }
/* Colour carries the meaning: researched, watching, closed. */
.tier-reviewed  .tier-count { color: var(--ok); }
.tier-radar     .tier-count { color: var(--warn); }
.tier-graveyard .tier-count { color: var(--bad); }

/* The group's mark beside its heading on the listing pages. Sized to the heading rather
   than left at 1em, or it reads as punctuation next to a 2rem h1. */
.tier-mark { font-size: .85em; margin-right: .15em; }
/* The caveat under the lede: present, and clearly secondary to it. */
.dir-note {
  color: var(--faint); font-size: .9rem; line-height: 1.6; max-width: 62ch;
  margin: .6rem auto 0;
}
.dir-head-center .dir-note { margin-left: auto; margin-right: auto; }
/* Centred with the rest of the header on the listing pages, where the whole block is. */
.dir-head-center .dir-tabs { justify-content: center; }
/* The shared pill centres itself on these pages like every other centred index. */
.dir-head-center .page-search { margin-left: auto; margin-right: auto; }

/* The mark on each "Other ways in" card.
   Qualified through `.cross-links strong` (0,3,0) because `.cross-links span` is
   `display: block` — a bare `.cross-ico` rule loses to it, and the emoji sat on its own
   line above the title with the heading pushed underneath. */
.cross-links strong .cross-ico {
  display: inline-block; margin-right: .35rem; font-size: 1.15em; line-height: 1;
}

/* The two hub cards on the homepage carry a mark now. Inline-block so the emoji cannot
   drag the link's baseline around. */
.card-ico { display: inline-block; margin-right: .35rem; font-size: 1.05em; }

/* ---------- listing toolbar: sort, jurisdiction, score range, layout ----------
   Added 2026-09-07. One GET form, so every combination is its own shareable URL and the
   whole thing works with JavaScript off — the select elements just need the Apply button
   then, which app.js hides once it can submit on change. */
.dir-tools {
  display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-end;
  padding: .85rem 1rem; margin: 0 0 1rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
/* `min-width: 0` and a capped select. `width: auto` lets a <select> size to its widest
   OPTION, and "🇨🇼 Curaçao Gaming Control Board (1,412)" is 405px — which pushed the whole
   document sideways on a 390px phone. The option text still shows in full when the menu
   is open; it is only the closed control that is capped. */
.dir-tool { display: flex; flex-direction: column; gap: .25rem; min-width: 0; max-width: 100%; }
.dir-tool label {
  font-size: .78rem; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.dir-tool select, .dir-tool input[type=number] {
  padding: .4rem .55rem; font-size: .9rem; width: auto;
  max-width: min(100%, 20rem);
}
/* The score inputs are two boxes and a dash reading as one control. */
.dir-tool-range { flex-direction: row; align-items: center; gap: .4rem; flex-wrap: wrap; }
.dir-tool-range label { align-self: center; }
.dir-tool-range input[type=number] { width: 5rem; }
.dir-clear { font-size: .85rem; color: var(--muted); align-self: center; }
/* Pushed to the far end: it changes how you READ the list, not which rows are in it. */
.dir-views { margin-left: auto; display: flex; gap: .3rem; align-self: center; }
.dir-view {
  display: inline-flex; align-items: center; gap: .3rem; cursor: pointer;
  padding: .35rem .7rem; border: 1px solid var(--line); border-radius: 999px;
  font-size: .85rem; color: var(--muted); white-space: nowrap;
}
.dir-view:hover { border-color: var(--line-strong); color: var(--text); }
/* The radio itself is hidden but still focusable and still the thing being clicked, so
   the control keeps working for a keyboard and a screen reader. */
.dir-view input { position: absolute; opacity: 0; width: 0; height: 0; }
.dir-view.is-on { background: var(--accent-wash); border-color: var(--accent-deep); color: var(--text); }
.dir-view:focus-within { box-shadow: var(--ring); }
.dir-range-note { max-width: none; margin: -.4rem 0 1rem; }

/* A long authority name must not push the card wider than its grid column. The tags are
   `white-space: nowrap`, and "Curaçao Gaming Control Board" truncated to 28 characters is
   still 225px inside a 233px card — which made the whole document scroll sideways at
   768px, where the columns are narrowest. Predates the toolbar; found by sweeping for it.
   Ellipsis rather than wrap: a regulator name broken over two lines in a chip reads as a
   rendering fault. */
.dir-card .tag {
  /* A flex COLUMN stretches its children, so a tag in a grid card ran the full width of
     the card as a bar — and the ellipsis then hid a jurisdiction name that had room. */
  align-self: flex-start; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  box-sizing: border-box;
}

/* The Trust Score on a card. Neutral rather than green/red: it is a measurement, and a
   colour would turn "we scored this 46" into a verdict the number does not carry. */
.tag-score {
  background: var(--surface-3); color: var(--text-2); border-color: var(--line-strong);
  font-variant-numeric: tabular-nums;
}

/* ---------- list view ----------
   The same cards, one per row, with the logo small and to the left. A different reading
   of the same data rather than a different template: one loop, one card, so a change to
   what a row shows cannot land in only one of the two layouts. */
.dir-grid.dir-rows { grid-template-columns: 1fr; gap: .4rem; }
.dir-rows .dir-card {
  flex-direction: row; align-items: center; gap: .9rem; padding: .6rem .85rem;
}
.dir-rows .dir-card > a {
  display: flex; align-items: center; gap: .9rem; flex: 1 1 auto; min-width: 0;
}
.dir-rows .dir-logo { height: 34px; width: 68px; margin: 0; flex: none; }
.dir-rows .dir-logo img { max-height: 30px; max-width: 64px; }
.dir-rows .dir-name { flex: 0 1 auto; min-width: 0; }
/* The domain takes the slack so the tags line up down the right-hand edge. */
.dir-rows .dir-domain { flex: 1 1 auto; min-width: 0; text-align: left; }
.dir-rows .tag, .dir-rows .status-mark { flex: none; }
@media (max-width: 720px) {
  /* Below this the row has nowhere left to go, so it becomes a stacked card again. */
  .dir-rows .dir-card { flex-direction: column; align-items: flex-start; }
  .dir-rows .dir-card > a { flex-wrap: wrap; }
  .dir-views { margin-left: 0; }
}

/* ---------- complaint form ----------
   Rebuilt 2026-09-07. Eleven fields in one column, opening with what not to write. Now a
   form and a panel: the form asks in named steps, the panel answers the question that
   actually decides whether somebody files — what of this becomes public. */
.cx-layout {
  display: grid; gap: 1.75rem; align-items: start; margin-bottom: 3rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
}
.cx-main h1 { margin: .2rem 0 .5rem; }
.cx-lede { color: var(--muted); font-size: 1.02rem; line-height: 1.65; margin: 0 0 1.5rem; }

/* A fieldset per step. The number is decoration for the eye — the legend already reads as
   a heading to a screen reader, and the digit is aria-hidden. */
.cx-step {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  padding: 1.1rem 1.2rem 1.2rem; margin: 0 0 1rem;
}
.cx-step legend {
  display: flex; align-items: center; gap: .55rem; padding: 0 .4rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
}
.cx-num {
  display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 999px;
  background: var(--accent-wash); color: var(--accent-soft);
  font-size: .8rem; font-weight: 700; font-family: var(--font-text);
}
.cx-field { display: flex; flex-direction: column; margin: 0 0 1rem; }
.cx-field:last-child { margin-bottom: 0; }
.cx-field label { font-weight: 600; font-size: .92rem; margin-bottom: .3rem; }
.cx-field input, .cx-field select, .cx-field textarea { max-width: none; }
.cx-field .helptext, .cx-check .helptext {
  color: var(--muted); font-size: .8rem; margin: .35rem 0 0; line-height: 1.5;
}
.cx-req { color: var(--accent-soft); }
.cx-error { color: var(--bad); font-size: .82rem; margin: .3rem 0 0; }
.cx-field.has-error input, .cx-field.has-error textarea, .cx-field.has-error select,
.cx-check.has-error { border-color: var(--bad); }
/* The amount and its currency read as one control. */
/* Two fields side by side, equal by default. The complaint form's amount-and-currency
   is the exception — a currency box wants three characters of room, not half the row —
   so that one asks for `cx-pair-narrow` rather than every pair inheriting its shape. */
.cx-pair { display: flex; gap: .8rem; flex-wrap: wrap; }
.cx-pair > .cx-field { flex: 1 1 12rem; min-width: 0; }
.cx-pair-narrow > .cx-field:last-child { flex: 0 0 7rem; }

/* Checkbox FIRST, then the sentence — and the whole row is the label, so the text is part
   of the hit target rather than something you have to aim past. */
.cx-check { margin: 0 0 .9rem; }
.cx-check:last-child { margin-bottom: 0; }
.cx-check > label {
  display: flex; gap: .65rem; align-items: flex-start; cursor: pointer;
  font-size: .92rem; line-height: 1.55;
}
.cx-check input[type=checkbox] {
  width: 1.05rem; height: 1.05rem; max-width: none; flex: none; margin-top: .18rem;
  accent-color: var(--accent);
}
.cx-confirm { background: var(--surface-2); }
.cx-foot { color: var(--faint); font-size: .85rem; text-align: center; margin: .8rem 0 0; }

.cx-aside { position: sticky; top: 5rem; }
.cx-aside h2 { font-size: 1rem; margin: 0 0 .7rem; }
.cx-aside h2 + * { margin-top: 0; }
.cx-aside h2:not(:first-child) { margin-top: 1.6rem; }
.cx-split { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.cx-split li {
  padding: .75rem .9rem; border-radius: var(--radius-sm); background: var(--surface-2);
  border-left: 3px solid var(--line-strong);
}
.cx-split li.is-public { border-left-color: var(--warn); }
.cx-split li.is-private { border-left-color: var(--ok); }
.cx-split strong { display: block; font-size: .85rem; margin-bottom: .2rem; }
.cx-split span { color: var(--muted); font-size: .85rem; line-height: 1.55; }
.cx-warn {
  margin: .8rem 0 0; padding: .7rem .85rem; border-radius: var(--radius-xs);
  background: var(--warn-wash); border: 1px solid var(--warn-line);
  color: var(--text-2); font-size: .84rem; line-height: 1.55;
}
.cx-aside-note { color: var(--muted); font-size: .86rem; line-height: 1.6; margin: 0 0 .7rem; }

@media (max-width: 900px) {
  /* The panel goes BELOW the form on a phone. Above it, the reader scrolls past 300 words
     of caveat before reaching the thing they came to do. */
  .cx-layout { grid-template-columns: minmax(0, 1fr); }
  .cx-aside { position: static; }
}

/* Shared with the complaint form: the review form uses the same steps and the same
   panel, because they are the same kind of ask — a long form from somebody doing us a
   favour — and two different shapes for that would be two things to learn. */
.cx-sub { color: var(--faint); font-size: .92rem; margin: -.9rem 0 1.5rem; }
.cx-step-note { color: var(--muted); font-size: .85rem; margin: 0 0 1rem; }
/* The rating is radio buttons, not a select: five options is a thing to look at, not a
   menu to open. Django 5's RadioSelect renders a <div> per option rather than the <ul>
   older versions produced, so this targets the wrapper by id — the first version styled
   `ul li` and did nothing at all, which looks exactly like forgetting to write it. */
#id_rating { display: flex; gap: .4rem; flex-wrap: wrap; }
#id_rating > div { margin: 0; }
#id_rating label {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  padding: .45rem .9rem; border: 1px solid var(--line); border-radius: 999px;
  font-weight: 600; font-size: .95rem; margin: 0;
}
#id_rating label:hover { border-color: var(--line-strong); }
#id_rating label:has(input:checked) {
  background: var(--accent-wash); border-color: var(--accent-deep);
}
#id_rating label:focus-within { box-shadow: var(--ring); }
#id_rating input[type=radio] { accent-color: var(--accent); margin: 0; }
.cx-steps { list-style: none; counter-reset: cx; margin: 0; padding: 0; display: grid; gap: .8rem; }
.cx-steps li { counter-increment: cx; display: grid; gap: .15rem; padding-left: 1.9rem; position: relative; }
.cx-steps li::before {
  content: counter(cx); position: absolute; left: 0; top: .05rem;
  display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 999px;
  background: var(--accent-wash); color: var(--accent-soft); font-size: .75rem; font-weight: 700;
}
.cx-steps strong { font-size: .88rem; }
.cx-steps span { color: var(--muted); font-size: .85rem; line-height: 1.55; }

/* A composed verdict quotes domains and licence numbers, and an unbreakable token wider
   than the column pushes the whole document sideways — 354px of text inside a 233px card
   at 320px wide. `break-word` only breaks a word that cannot fit at all, so ordinary prose
   is untouched. */
.card p, .card li, .verdict-tier { overflow-wrap: break-word; }

/* Whether a step has to be filled in, on the step itself rather than inferred from the
   asterisks inside it (Richard, 2026-09-07). Somebody deciding whether to start a long
   form wants to know how much of it they are committing to before the first field. */
.cx-need {
  margin-left: auto; font-family: var(--font-text); font-size: .68rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  padding: .16rem .5rem; border-radius: 999px;
  background: var(--accent-wash); color: var(--accent-soft);
  border: 1px solid var(--accent-deep);
}
/* Orange (Richard, 2026-09-07). Grey read as "disabled" beside a violet Mandatory —
   optional is a different answer to the question, not a lesser version of it. */
.cx-need.is-optional {
  background: var(--warn-wash); color: var(--warn); border-color: var(--warn-line);
}
[data-theme="light"] .cx-need.is-optional { color: var(--warn); }
/* The legend is a flex row already; this lets the tag sit at its far end. */
.cx-step legend { width: 100%; }

/* The rating scale. Faces, not stars — see reviews/forms.py for why. One per row so the
   words are readable, which is the whole point of replacing a number with a feeling. */
#id_rating { flex-direction: column; align-items: stretch; gap: .35rem; }
#id_rating label { justify-content: flex-start; width: 100%; font-size: 1rem; }

/* ---------- country picker: a listbox with its search inside ----------
   The search moved INTO the panel (Richard, 2026-09-07). A native <select> cannot hold it,
   so app.js builds this around the select and the select stays the submitting control —
   see the comment there for why that direction and not the other. */
.cx-country { position: relative; }
.cx-picker-btn {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  width: 100%; padding: .55rem .75rem; font: inherit; text-align: left; cursor: pointer;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--radius-xs);
}
.cx-picker-btn:hover { border-color: var(--accent-deep); }
.cx-picker-btn[aria-expanded="true"] { border-color: var(--accent); box-shadow: var(--ring); }
.cx-country.is-unset .cx-picker-value { color: var(--faint); }
.cx-picker-caret { color: var(--muted); font-size: .8rem; }
.cx-picker-panel {
  position: absolute; left: 0; right: 0; top: calc(100% + .35rem); z-index: 60;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: .5rem;
}
.cx-picker-search { width: 100%; max-width: none; margin-bottom: .4rem; }
/* Tall enough to show that there is more, short enough to leave the field visible. */
.cx-picker-list { list-style: none; margin: 0; padding: 0; max-height: 15rem; overflow-y: auto; }
.cx-picker-opt {
  display: block; width: 100%; text-align: left; font: inherit; cursor: pointer;
  padding: .42rem .55rem; border: 0; border-radius: var(--radius-xs);
  background: none; color: var(--text);
}
.cx-picker-opt:hover, .cx-picker-opt.is-active { background: var(--surface-3); }
.cx-picker-opt[aria-selected="true"] { background: var(--accent-wash); font-weight: 600; }
.cx-picker-empty { color: var(--muted); font-size: .82rem; margin: .4rem .55rem 0; }

/* ---------- claim CTA and the sub-page tiles ---------- */
.hub-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.hub-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-left: auto; }
/* An outline, not a gradient. This is aimed at one visitor in ten thousand — somebody who
   works at the casino — and a primary button here would compete with the verdict for
   everybody else. */
.claim-cta {
  display: inline-flex; align-items: center; gap: .55rem; text-decoration: none;
  padding: .5rem .85rem; border: 1px dashed var(--line-strong); border-radius: 999px;
  color: var(--text-2); background: var(--surface); white-space: nowrap;
}
.claim-cta:hover { border-color: var(--accent); border-style: solid; color: var(--text); }
.claim-cta-text { display: flex; flex-direction: column; line-height: 1.2; font-size: .88rem; font-weight: 600; }
.claim-cta-text small { font-weight: 400; font-size: .74rem; color: var(--muted); }

.brand-tiles {
  list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .6rem;
  /* auto-FILL, not auto-fit: with one tile left after the empty ones are dropped,
     auto-fit collapses the empty tracks and stretches it across the whole page. */
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
}
.brand-tile a {
  display: flex; gap: .7rem; align-items: flex-start; height: 100%;
  padding: .8rem .9rem; text-decoration: none; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--line); color: inherit;
}
.brand-tile a:hover { border-color: var(--accent-deep); }
.bt-ico { font-size: 1.2rem; line-height: 1.2; flex: none; }
.bt-body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.bt-body strong { font-size: .95rem; }
.bt-body span { color: var(--muted); font-size: .84rem; line-height: 1.45; }

/* The claim page's benefit list. */
.claim-benefits { list-style: none; margin: 1.2rem 0; padding: 0; display: grid; gap: .7rem; }
.claim-benefits li { display: flex; gap: .7rem; align-items: flex-start; }
.claim-ico { font-size: 1.15rem; line-height: 1.3; flex: none; }
.claim-benefits li > span { display: flex; flex-direction: column; gap: .1rem; }
.claim-benefits strong { font-size: .95rem; }
.claim-benefits span span { color: var(--muted); font-size: .87rem; line-height: 1.5; }
.claim-free {
  margin: 0 0 1.6rem; padding: .8rem .9rem; border-radius: var(--radius-sm);
  background: var(--ok-wash); border: 1px solid var(--ok-line);
  color: var(--text-2); font-size: .9rem; line-height: 1.6;
}

/* ---------- the casino header (Richard, 2026-09-07) ----------
   Name, who runs it, what we score it, and what you can do — in that order, above the
   fold. The nav pills that used to sit above the name are gone; the tiles below it say
   what is behind each link instead of merely naming it. */
/* Both of these need min-width:0. A flex item defaults to min-width:auto, so it refuses
   to shrink below its longest unbreakable child — at 320px "Malta Gaming Authority" plus
   its evidence tag pushed the whole header 69px past the viewport and the page scrolled
   sideways. */
.hub-title { min-width: 0; flex: 1 1 14rem; }
.hub-ident { min-width: 0; }
.hub-ident h1 { overflow-wrap: break-word; }
.hub-ident h1 { margin: 0 0 .25rem; }
.hub-line {
  margin: 0 0 .3rem; font-size: .92rem; color: var(--text-2); line-height: 1.5;
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
}
.hub-line .sep { color: var(--faint); }
/* The evidence labels belong here, but at full tag size two of them out-shouted the
   casino's own name. Small enough to read as a footnote on the fact, not as a badge. */
.hub-line .tag { font-size: .66rem; padding: .05rem .4rem; letter-spacing: .02em; }
/* The address is shown, never linked, until the profile is claimed — so it must not look
   like a link that failed. Monospace reads as "an address to type". */
.hub-url { font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); }

.hub-score { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; }
.score-ring-sm { width: 68px; height: 68px; }
.score-ring-sm b { font-size: 1.15rem; }
.score-ring-sm span { font-size: .6rem; }
.hub-score-label { display: flex; flex-direction: column; font-weight: 700; line-height: 1.2; }
.hub-score-label small { font-weight: 400; font-size: .74rem; color: var(--muted); }

.hub-cta { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1rem; }

/* On a phone the logo and the name were two narrow columns fighting for 390px, which
   broke "Malta Gaming Authority" across three lines. The logo goes above the name and
   gets smaller; the identity block takes the full width. */
@media (max-width: 560px) {
  .hub-title { flex-wrap: wrap; gap: .6rem; }
  .hub-title .brand-logo-lg { height: 40px; max-width: 140px; }
  .hub-ident { flex: 1 1 100%; }
  .hub-actions { margin-left: 0; }
}

/* ---------- the Trust Score, for a person ---------- */
.score-said { flex: 1 1 260px; }
.score-band { font-size: 1.05rem; line-height: 1.6; margin: 0 0 .4rem; }
.score-coverage { margin: 0; font-size: .88rem; color: var(--text-2); line-height: 1.55; }
.score-split {
  display: grid; gap: .8rem; margin: 1.1rem 0 .4rem;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}
.score-col { padding: .85rem .95rem; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-2); }
.score-col h3 { margin: 0 0 .5rem; font-size: .95rem; }
.score-col ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .5rem; }
.score-col li { line-height: 1.5; }
.score-col small { color: var(--muted); line-height: 1.5; display: inline-block; margin-top: .15rem; }
.score-good { border-color: var(--ok-line); background: var(--ok-wash); }
.score-bad { border-color: var(--warn-line, var(--line-strong)); background: var(--warn-wash, var(--surface-2)); }
/* Everything the scorer knows is still here — folded, not deleted. A score a reader
   cannot interrogate is the opaque rating this site exists to replace. */
.score-detail { margin-top: 1rem; }
.score-detail summary { cursor: pointer; font-weight: 600; color: var(--text-2); }
.score-detail h4 { margin: 1rem 0 .4rem; font-size: .9rem; }

/* ---------- what nobody has looked at yet ---------- */
.gaps-card .gap-list { margin: .6rem 0 0; padding-left: 1.1rem; color: var(--text-2); display: grid; gap: .3rem; }

/* ---------- logos that vanish on one of the themes (Richard, 2026-09-07) ----------
   A transparent logo is drawn in whatever colour its designer picked for their own site,
   and half of them picked white — so on the light theme those brands rendered as an empty
   box, with nothing about the page suggesting a fault. Same in reverse for the black
   wordmarks in dark mode.

   The chip goes on ONLY where it is needed; which files need it is measured once per file
   in web/logoink.py rather than guessed from the markup. A chip behind a logo that was
   already legible is a grey box around a brand's artwork on every listing page. */
[data-theme="light"] .chip-on-light,
[data-theme="light"] .chip-on-light img {
  background: #171a24;
  padding: 4px 6px;
  border-radius: 8px;
}
[data-theme="dark"] .chip-on-dark,
[data-theme="dark"] .chip-on-dark img {
  background: #ffffff;
  padding: 4px 6px;
  border-radius: 8px;
}
/* The chip supplies the panel, so the container's own surface would show as a second one
   behind it — a light rectangle around a dark chip. */
[data-theme="light"] .dir-logo.chip-on-light,
[data-theme="dark"] .dir-logo.chip-on-dark { background: none; border-color: transparent; }

/* ---------- the footer contact strip (Richard, 2026-09-07) ----------
   A section, not a sixth link in the legal row: "who do I talk to about data access" is a
   question people abandon when the answer is one word among five. */
.footer-contact {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  /* The same measure as every other block in the footer, which is 72rem centred. Without
     it the box ran the full width of the viewport while the text above it stopped, and
     read as a banner rather than as part of the footer. */
  flex-wrap: wrap; max-width: 72rem; margin: 1.4rem auto .4rem; padding: .9rem 1rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.footer-contact strong { display: block; font-size: .95rem; }
.footer-contact span { color: var(--muted); font-size: .86rem; }

/* The signpost list on /contact/. A definition list because that is what it is: a
   question somebody arrived with, and where it is actually answered. */
.contact-faq { margin: .6rem 0 1.4rem; }
.contact-faq dt { font-weight: 600; margin-top: .9rem; }
.contact-faq dd { margin: .2rem 0 0; color: var(--text-2); font-size: .9rem; line-height: 1.6; }
/* The confirmation page has nothing to put beside it. */
.cx-layout-narrow { grid-template-columns: minmax(0, 1fr); max-width: 44rem; }

/* A suggestion's mark is 24px, so the chip's own padding would leave almost no logo. */
.suggest-logo.chip-on-light, .suggest-logo.chip-on-dark { padding: 2px 3px; border-radius: 6px; }

/* ---------- the receipts (Richard, 2026-09-07) ----------
   Evidence that carries a picture of its own source. An operator's terms page changes
   underneath the citation — boomerang.bet named Casbit Group N.V. in March 2024 and names
   Global Growth LLC today — so the capture is the difference between a claim and a claim
   somebody can check. */
.receipt { margin: 0 0 1.6rem; }
.receipt + .receipt { padding-top: 1.4rem; border-top: 1px solid var(--line); }
.receipt img {
  display: block; width: 100%; height: auto; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--surface-2);
}
.receipt figcaption { margin-top: .7rem; }
.receipt-claim { margin: 0 0 .5rem; line-height: 1.5; }
/* The quote is the operator's own wording, so it is set apart from ours. */
.receipt-quote {
  margin: 0 0 .5rem; padding: .6rem .85rem; border-left: 3px solid var(--accent-deep);
  background: var(--surface-2); color: var(--text-2); font-size: .9rem; line-height: 1.6;
}
.receipt-meta { margin: 0; font-size: .84rem; color: var(--muted); }
.receipt-meta a { margin-left: .4rem; }

/* ---------- operators in the search panel (Richard, 2026-09-07) ----------
   A third population beside reviewed casinos and tracked brands, and it has to read as a
   different KIND of thing rather than as a casino with a missing logo. */
.suggest-logo.suggest-op {
  background: var(--accent-wash); color: var(--accent-deep);
  border: 1px solid var(--accent-line, var(--line-strong));
  font-size: .68rem; letter-spacing: .02em; font-weight: 700;
}
.tag-op { background: var(--accent-wash); color: var(--accent-deep); border-color: var(--accent-deep); }

/* ================= the casino header =================
   Chosen from five drafts staged at /casino/mega-bet/v1..v5 on 2026-09-07; "Passport"
   won and the staging switcher and other four proposals went with them. */

.v1-card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 17rem); gap: 1.4rem;
  padding: 1.2rem; margin-bottom: 1.6rem;
  border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface);
}
/* A column, so the action row can be pushed to the bottom edge with `margin-top: auto`
   and line up with the foot of the taller score column beside it. */
.v1-main { display: flex; flex-direction: column; position: relative; min-width: 0; }
.v1-head { display: flex; gap: 1rem; align-items: flex-start; min-width: 0; }

/* Follow, in the corner. A bookmark, not a verdict — small, quiet, and out of the way of
   the name and the facts. It says what it will DO, and once done, what it IS. */
.v1-follow { position: absolute; top: 0; right: 0; }
.follow-pill {
  border: 1px solid var(--line-strong); background: none; color: var(--muted);
  border-radius: 999px; padding: .2rem .65rem; cursor: pointer;
  font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.follow-pill:hover { border-color: var(--accent-deep); color: var(--accent-deep); }
.follow-pill.is-on {
  background: var(--accent-wash); border-color: var(--accent-deep); color: var(--accent-deep);
}
.v1-ident { min-width: 0; }
.v1-ident h1 { margin: 0 0 .35rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding-right: 5.5rem; }

/* A fixed square, sized to the four identity lines beside it (name, operator, licence,
   listing) rather than to the artwork.
   
   NOT `aspect-ratio` with `align-self: stretch`, which is what this was first: in a flex
   row the width resolves before the height, so the square's width set the row's height,
   which set the square's width — the logo grew to 500px and squeezed the text into a
   180px column. A fixed size is also what makes every casino's header line up, which is
   the point of the square. */
.v1-mark {
  flex: none; width: 7.5rem; height: 7.5rem;
  display: grid; place-items: center;
  padding: .55rem; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.brand-logo-fit {
  height: auto; width: auto; max-width: 100%; max-height: 100%;
  background: none; border: 0; padding: 0; border-radius: 8px;
}
.brand-logo-mono.brand-logo-fit { width: 100%; height: 100%; font-size: 1.9rem; background: none; }

.v1-line { margin: 0 0 .2rem; font-size: .92rem; line-height: 1.5; color: var(--text-2); }
.reg-flag { font-size: 1rem; line-height: 1; }
/* A clear gap after the licence line: the two identity lines are claims about the
   business, and this row is about the page — tier, address, date checked. */
.v1-domain { margin: .8rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .86rem; }
/* `margin-top: auto` pins the row to the foot of the cell rather than leaving it under
   the identity block with whitespace below it. */
.v1-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: auto; padding-top: 1.1rem; }

/* Trustpilot's pattern: a small, quiet mark beside the name saying whether anybody from
   the business has claimed the page. A fact about THIS PAGE, not a judgement of the
   casino — so it stays muted — and a link, because the person it bothers most is the one
   who can fix it. */
.unclaimed, .claimed-mark {
  display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
  font-size: .7rem; font-weight: 600; letter-spacing: .01em;
  padding: .18rem .5rem; border-radius: 999px; text-decoration: none;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--line);
}
a.unclaimed:hover { border-color: var(--warn-line); color: var(--warn); background: var(--warn-wash); }
.claimed-mark { background: var(--ok-wash); color: var(--ok); border-color: var(--ok-line); }

.v1-stats {
  display: grid; gap: .7rem; align-content: start; padding-left: 1.2rem;
  border-left: 1px solid var(--line);
}
/* The score centred in its own cell rather than left-aligned against the rule: it is the
   headline of this column and the two counts read as its supporting detail. */
.v1-stat-score {
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  text-decoration: none; color: inherit; text-align: center;
  padding-bottom: .7rem; border-bottom: 1px solid var(--line);
}
.v1-stat-label { display: flex; flex-direction: column; line-height: 1.25; }
.v1-stat-label b { font-size: 1.05rem; }
.v1-stat-label small { color: var(--muted); font-size: .76rem; }

.v1-counts { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; text-align: center; }
.v1-count b { display: block; font-size: 1.15rem; line-height: 1.2; }
.v1-count small { color: var(--muted); font-size: .74rem; line-height: 1.35; display: block; }

.v1-aside { margin-top: .2rem; padding-top: .8rem; border-top: 1px solid var(--line); display: grid; gap: .5rem; }
.v1-aside .claim-cta { justify-content: center; }
/* The third rank of button: no fill, so it does not compete with "Write a Review" or
   "Submit a Complaint" beside it.

   It used to say `--muted`, which is 4.4:1 on white — legally readable and, at 500 weight
   inside a pale outline, not actually readable. Richard could not read "Forum" on
   /casino/rainbet-casino/ and reported it as white-on-white; measured, it was #656e80 on
   #fff. Subordinate is a job for weight and the missing fill, not for draining the ink out
   of the label. `--text-2` clears 7:1 and the hierarchy still reads correctly. */
a.btn-quiet, button.btn-quiet {
  background: none; border: 1px solid var(--line-strong); color: var(--text-2);
  font-weight: 600;
}
a.btn-quiet:visited { color: var(--text-2); }
a.btn-quiet:hover, button.btn-quiet:hover {
  border-color: var(--accent-deep); color: var(--text); background: var(--surface-3);
}

@media (max-width: 820px) {
  .v1-card { grid-template-columns: minmax(0, 1fr); }
  .v1-stats { padding-left: 0; border-left: 0; padding-top: .9rem; border-top: 1px solid var(--line); }
}
@media (max-width: 520px) {
  /* Below this a 7.5rem square eats half the row, so it shrinks rather than wrapping —
     the name beside its mark is the thing worth keeping on one line. */
  .v1-mark { width: 4.75rem; height: 4.75rem; }
  .v1-ident h1 { font-size: 1.5rem; }
}

/* The claimable address, inside the sentence that asks for it rather than on a line of
   its own — italic so it reads as the answer to "which domain", not as code to type. */
.claim-domain { font-style: italic; color: var(--text); font-weight: 600; }

/* ================= the per-casino forum (Richard, 2026-09-07) =================
   Reddit's shape — a vote column, a title, a meta line — in Rixer's clothes. Everything
   here uses the site's own variables so the board changes with the theme rather than
   staying light while the header goes dark. */
.fx-page { max-width: 52rem; margin: 0 auto 3rem; }
.fx-head { margin-bottom: 1.2rem; }
.fx-head h1 { margin: .2rem 0 .4rem; }
.fx-lede { color: var(--muted); font-size: 1rem; line-height: 1.6; margin: 0 0 1rem; }

/* The complaint route, kept visible. Somebody owed money who types it into a thread has
   done the thing that does not get their money back. */
.fx-elsewhere {
  padding: .8rem 1rem; border-radius: var(--radius-sm); background: var(--surface-2);
  border: 1px solid var(--line); font-size: .9rem; line-height: 1.6;
}
.fx-elsewhere p { margin: 0 0 .3rem; }
.fx-elsewhere p:last-child { margin: 0; }

.fx-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; margin: 1.2rem 0 .8rem;
}
.fx-sorts { display: flex; gap: .3rem; }
.fx-sort {
  padding: .25rem .7rem; border-radius: 999px; text-decoration: none;
  color: var(--text-2); border: 1px solid transparent;
}
.fx-sort:hover { border-color: var(--line-strong); }
.fx-sort.is-on { background: var(--accent-wash); color: var(--accent-deep); font-weight: 600; }

.fx-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.fx-row, .fx-reply {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: .8rem .9rem; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface);
}
.fx-row-body, .fx-reply-body { min-width: 0; flex: 1 1 auto; }
.fx-row h2 { margin: 0 0 .3rem; font-size: 1.05rem; line-height: 1.4; }
.fx-row h2 a { text-decoration: none; }
.fx-row h2 a:hover { text-decoration: underline; }
.fx-meta {
  margin: 0; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  color: var(--muted); font-size: .82rem;
}
.fx-empty { color: var(--muted); padding: 1.4rem 0; }

/* Upvote only. A downvote here is a button for burying whoever says the thing an
   operator dislikes, and this site's argument is that unpopular evidence still counts. */
.fx-vote {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: .1rem;
  min-width: 2.4rem;
}
.fx-vote button, .fx-vote a {
  background: none; border: 1px solid var(--line); border-radius: 8px;
  color: var(--muted); cursor: pointer; font-size: .8rem; line-height: 1;
  padding: .25rem .4rem; text-decoration: none; display: block;
}
.fx-vote button:hover, .fx-vote a:hover { border-color: var(--accent-deep); color: var(--accent-deep); }
.fx-vote b { font-size: .9rem; font-variant-numeric: tabular-nums; }
.fx-vote.is-on button { background: var(--accent-wash); border-color: var(--accent-deep); color: var(--accent-deep); }
.fx-vote.is-on b { color: var(--accent-deep); }

.fx-thread { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1.1rem; background: var(--surface); }
.fx-thread-head { display: flex; gap: .8rem; align-items: flex-start; }
.fx-thread-head h1 { margin: 0 0 .3rem; font-size: 1.5rem; line-height: 1.3; }
.fx-body { line-height: 1.7; margin-top: .7rem; overflow-wrap: anywhere; }
.fx-body p { margin: 0 0 .7rem; }
.fx-replies-head { margin: 1.6rem 0 .7rem; font-size: 1.05rem; }
.fx-replies { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.fx-replybox { margin-top: 1.2rem; }
.fx-foot { color: var(--muted); font-size: .82rem; margin: .5rem 0 0; }
.fx-locked, .fx-signin { margin-top: 1.2rem; }

/* A removed post leaves a tombstone, not a hole: a thread whose replies answer something
   that has vanished is unreadable, and that it was removed is a fact worth stating. */
.fx-row.is-removed, .fx-reply.is-removed, .fx-thread.is-removed { opacity: .75; }
.fx-tomb {
  margin: .6rem 0 0; padding: .5rem .8rem; border-radius: var(--radius-xs);
  background: var(--surface-2); border: 1px dashed var(--line-strong);
  color: var(--muted); font-size: .88rem;
}
.fx-tomb em { font-style: normal; color: var(--text-2); }
.fx-tomb small { display: block; margin-top: .2rem; font-size: .78rem; }

.fx-mod { margin-top: .7rem; }
.fx-mod summary { cursor: pointer; color: var(--muted); font-size: .8rem; }
.fx-mod-body { display: grid; gap: .8rem; margin-top: .6rem; padding: .8rem;
  border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); }
.fx-mod-body form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.fx-mod-body textarea, .fx-mod-body input[type=text] { flex: 1 1 16rem; }

/* ---------- avatars ---------- */
.av { width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover; flex: none; display: block; }
.av-sm { width: 1.35rem; height: 1.35rem; }
/* No picture is a real answer, shown as an initial — the same rule the site follows for a
   casino with no logo. The hue is hashed from the name so somebody is the same colour in
   every thread. */
.av-mono {
  display: grid; place-items: center; font-weight: 700; font-size: .72rem; color: #fff;
  background: hsl(var(--av-hue, 265) 55% 45%);
}
.av-sm.av-mono { font-size: .62rem; }

.av-pick .av-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); gap: .6rem;
  margin-top: .6rem;
}
.av-opt { display: grid; place-items: center; gap: .3rem; cursor: pointer; padding: .4rem;
  border: 2px solid transparent; border-radius: var(--radius-sm); }
.av-opt img { width: 64px; height: 64px; border-radius: 50%; display: block; }
.av-opt:has(input:checked) { border-color: var(--accent-deep); background: var(--accent-wash); }
.av-opt input { margin: 0; }
.av-none { color: var(--muted); font-size: .8rem; }

/* ---------- the profile hub (Richard, 2026-09-07) ---------- */
.pr-page { max-width: 46rem; margin: 0 auto 3rem; }
.pr-head { display: flex; gap: 1.1rem; align-items: center; margin-bottom: 1.6rem; }
.pr-head h1 { margin: 0 0 .3rem; }
.pr-sub { color: var(--muted); font-size: .9rem; line-height: 1.6; margin: 0 0 .7rem; }
.pr-follows { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .4rem; }
.pr-follows li { display: flex; align-items: center; gap: .5rem; }
.pr-posts { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .7rem; }
.pr-posts li { display: grid; gap: .15rem; }
.pr-posts small { color: var(--muted); }

/* ---------- the forum profile form ----------
   Rebuilt 2026-09-07. The first version inherited its grid rule from a wrapper class the
   template did not have, so all ten avatars stacked in one column and the page ran to
   2,300px. The rules here are scoped to what the template actually renders. */
.pf-page { max-width: 40rem; margin: 0 auto 3rem; }
.pf-page h1 { margin: .2rem 0 .4rem; }
.pf-lede { color: var(--muted); font-size: 1rem; line-height: 1.6; margin: 0 0 1.6rem; }
.pf-form { display: grid; gap: 1rem; }
.pf-card {
  padding: 1.2rem; border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface);
}
.pf-card h2 { margin: 0 0 .9rem; font-size: 1.05rem; }
.pf-field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .35rem; }
.pf-field input[type="text"] { width: 100%; }
.pf-hint { color: var(--muted); font-size: .84rem; line-height: 1.55; margin: .45rem 0 0; }
.pf-field.has-error input { border-color: var(--bad, #dc2626); }

/* Preview beside its controls: an avatar is 32px in a thread, and nobody can judge a crop
   from a filename. */
.pf-upload { display: flex; gap: 1.1rem; align-items: flex-start; flex-wrap: wrap; }
.pf-preview { flex: none; }
/* `av-lg` had no rule at all until 2026-09-08, so the account page's portrait fell back
   to the base `.av` at 2rem. It is the largest thing on that page's header now, which is
   what a profile picture is for. */
.av-lg { width: 9rem; height: 9rem; font-size: 3.4rem; }
.av-xl { width: 5.85rem; height: 5.85rem; font-size: 2.2rem; }
.pf-upload-controls { flex: 1 1 15rem; min-width: 0; }
.pf-choose {
  display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
  padding: .5rem .95rem; border-radius: 999px; font-weight: 600; font-size: .9rem;
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text-2);
}
.pf-choose:hover { border-color: var(--accent-deep); color: var(--accent-deep); }
/* Hidden from sight, not from the tab order or a screen reader. */
.pf-upload-controls input[type="file"] {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
}
.pf-upload-controls input[type="file"]:focus-visible + .pf-hint { outline: none; }

.pf-or {
  display: flex; align-items: center; gap: .8rem; margin: 1.3rem 0 .9rem;
  color: var(--muted); font-size: .85rem;
}
.pf-or::before, .pf-or::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--line);
}

.pf-avatars { border: 0; padding: 0; margin: 0; }
/* Five columns for exactly ten avatars: two full rows and no ragged last line. Fixed
   rather than auto-fill, because auto-fill fitted seven and left four stranded. */
.av-grid { display: grid; gap: .55rem; grid-template-columns: repeat(5, 1fr); }
.av-opt {
  display: grid; place-items: center; gap: .3rem; cursor: pointer;
  padding: .45rem .25rem; border-radius: var(--radius-sm);
  border: 2px solid transparent; background: var(--surface-2);
}
.av-opt:hover { border-color: var(--line-strong); }
.av-opt img { width: 60px; height: 60px; border-radius: 50%; display: block; }
.av-opt .av { width: 60px; height: 60px; font-size: 1.4rem; }
.av-opt small { color: var(--muted); font-size: .68rem; line-height: 1.2; text-align: center; }
/* The radio itself is invisible but present: still focusable, still submits, still works
   with the keyboard and with JavaScript off. */
.av-opt input {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
}
.av-opt:has(input:checked) {
  border-color: var(--accent-deep); background: var(--accent-wash);
}
.av-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
/* A different answer to the same question, so it is in the radio group but not in the
   grid: it is not one of "ours". */
.av-none-opt {
  display: flex; align-items: center; gap: .8rem; cursor: pointer; margin-top: .8rem;
  padding: .6rem .7rem; border-radius: var(--radius-sm);
  border: 2px solid transparent; background: var(--surface-2);
}
.av-none-opt:hover { border-color: var(--line-strong); }
.av-none-opt input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.av-none-opt:has(input:checked) { border-color: var(--accent-deep); background: var(--accent-wash); }
.av-none-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Grey, not coloured: this option means "no picture", so it must not look like one more
   picture to choose. `place-items` because `.av-mono`'s centring is what draws the letter
   in the middle and a size override alone would leave it off-centre. */
.av-none-opt .av {
  width: 2.6rem; height: 2.6rem; font-size: 1rem; flex: none;
  display: grid; place-items: center; line-height: 1;
  background: var(--surface-3); color: var(--text-2);
  border: 1px dashed var(--line-strong);
}
.av-none-opt span { display: flex; flex-direction: column; line-height: 1.35; }
.av-none-opt small { color: var(--muted); font-size: .8rem; }

.pf-actions { display: flex; gap: .6rem; align-items: center; }
.pf-actions .btn { min-width: 8rem; justify-content: center; }

@media (max-width: 460px) {
  /* Five columns of 48px still fit a 320px screen; fewer columns would strand a row. */
  .av-opt img, .av-opt .av { width: 44px; height: 44px; }
  .av-grid { gap: .35rem; }
}


/* ---------- a forum byline ----------
   The role under the name, never beside it: "Richard Milton Rixer Team" is not a person.
   Admin-set only — a badge anybody could type into their own profile would be worthless
   the first time somebody did. */
.fx-who { display: inline-flex; align-items: center; gap: .45rem; }
.fx-who-name { display: flex; flex-direction: column; line-height: 1.25; }
.fx-who-name b { font-weight: 600; color: var(--text-2); }
.fx-role {
  font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent-deep); background: var(--accent-wash);
  border: 1px solid var(--accent-deep); border-radius: 999px;
  padding: 0 .35rem; width: fit-content; margin-top: .1rem;
}

/* ---------- Verify (Richard, 2026-09-07) ----------
   Rebuilt from an h1, a paragraph and a bare table. The rows are the same rows; each one
   now carries what KIND of claim it is, because a verified licence and a licence the
   operator printed on its own site are different things and a table cell flattens them. */
.vf-page { max-width: 46rem; margin: 0 auto 3rem; }
.vf-head { text-align: center; margin-bottom: 1.8rem; }
.vf-head h1 { margin: .2rem 0 .5rem; }
.vf-lede { color: var(--muted); font-size: 1.02rem; line-height: 1.65; margin: 0 auto 1.3rem; max-width: 36rem; }
/* `justify-content` centres the pill's CONTENTS. The pill itself is a 35rem block inside
   a 46rem column, so it also needs the auto margins — without them it sat hard against
   the left edge under a centred heading. */
.vf-head .page-search { justify-content: center; margin-left: auto; margin-right: auto; }
.vf-note { color: var(--muted); font-size: .85rem; margin: .8rem 0 0; }
.vf-promise { text-align: center; line-height: 1.7; }

.vf-miss h2 { margin-top: 0; }
.vf-guesses { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.vf-guesses a {
  display: inline-block; padding: .3rem .75rem; border-radius: 999px;
  border: 1px solid var(--line); text-decoration: none;
}
.vf-guesses a:hover { border-color: var(--accent-deep); }

.vf-result {
  border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface);
  padding: 1.2rem; margin-bottom: 1.2rem;
}
.vf-result-head {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  flex-wrap: wrap; padding-bottom: 1rem; border-bottom: 1px solid var(--line);
}
.vf-name { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.vf-name h2 { margin: 0 0 .25rem; }
.vf-status { margin: 0; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .86rem; }
.vf-score { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; }
.vf-score > span:not(.score-ring) { display: flex; flex-direction: column; line-height: 1.25; }
.vf-score small { color: var(--muted); font-size: .76rem; }
.vf-score-none { flex-direction: column; align-items: flex-end; text-align: right; }

.vf-facts { margin: 0; display: grid; gap: 0; }
.vf-fact {
  display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: .6rem 1rem;
  padding: .75rem 0; border-bottom: 1px solid var(--line);
}
.vf-fact:last-child { border-bottom: 0; }
.vf-fact dt { color: var(--text-2); font-weight: 600; font-size: .9rem; }
.vf-fact dd { margin: 0; line-height: 1.6; }
/* "We have not checked" reads differently from "we checked and found nothing", and this
   is the page where that difference IS the answer. */
.vf-unknown { color: var(--muted); font-style: normal; }
.vf-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }

.vf-alts { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .6rem; }
.vf-alts li { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.vf-alts small { color: var(--muted); flex: 1 1 100%; }
.vf-list { list-style: none; margin: .6rem 0 1rem; padding: 0; display: grid; gap: .6rem; line-height: 1.6; }

@media (max-width: 560px) {
  .vf-fact { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
  .vf-result-head { justify-content: flex-start; }
}