/* snusranking design system – "Das Prüflabor" (test lab).
   Graphite instrument panel, bone text, sodium amber for our test score, hatched glacier blue for the
   community score. Display: Anybody (variable width), text: Instrument Sans, data: IBM Plex Mono.
   Change colours, fonts, radius and spacing here; Bootstrap's variables are mapped onto these. */

@font-face {
  font-family: "Anybody";
  src: url("../fonts/anybody.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 50% 150%;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root,
[data-bs-theme="dark"] {
  color-scheme: dark;

  /* Typography */
  --sr-font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sr-font-display: "Anybody", "Arial Narrow", system-ui, sans-serif;
  --sr-font-data: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Action colour: bone buttons with ink text (15.9:1), bone links and bars */
  --sr-brand: #ece7de;
  --sr-brand-rgb: 236, 231, 222;
  --sr-brand-hover: #ffffff;
  --sr-brand-subtle: #1e2124;
  --sr-brand-text: #ece7de;
  --sr-on-brand: #0e0f10;

  /* Our test score and editorial labels: sodium amber (8.6:1 on the ground) */
  --sr-accent: #e2a23b;
  --sr-accent-rgb: 226, 162, 59;
  --sr-accent-subtle: #2a2116;
  --sr-on-accent: #0e0f10;
  /* Community score: glacier blue (5.8:1), always drawn hatched so it never relies on hue alone */
  --sr-community: #6c93ae;
  --sr-community-dark: #4d6b80;

  /* Neutrals */
  --sr-text: #ece7de; /* 15.9:1 on ink */
  --sr-text-muted: #a8a298; /* 7.5:1 */
  --sr-text-faint: #8c877e; /* 5.3:1 – small labels only */
  --sr-bg: #0e0f10; /* ink */
  --sr-surface: #15171a; /* panels */
  --sr-soft: #1e2124; /* image backdrops, tracks */
  --sr-border: #2f3337;
  --sr-border-strong: #4a4f55;
  --sr-rule: #ece7de; /* strong section rules */

  /* Signal colours */
  --sr-good: #ece7de; /* "+" in strengths – the symbol carries the meaning */
  --sr-warn: #e2a23b;
  --sr-warn-subtle: #2a2116;

  /* Strength levels Low → Ultra: one amber ramp getting lighter; the text label carries the meaning */
  --sr-strength-1: #8c6d3f;
  --sr-strength-2: #b08440;
  --sr-strength-3: #cf9439;
  --sr-strength-4: #e2a23b;
  --sr-strength-5: #f2c98a;

  /* Shape and spacing: square plates, pill-shaped controls */
  --sr-radius: 2px;
  --sr-radius-sm: 2px;
  --sr-radius-pill: 999px;
  --sr-space-1: 0.25rem;
  --sr-space-2: 0.5rem;
  --sr-space-3: 1rem;
  --sr-space-4: 1.5rem;
  --sr-space-5: 3rem;

  /* Motion (see docs/design/prueflabor/Effects.dc.html) */
  --sr-ease-measure: cubic-bezier(0.2, 0.8, 0.2, 1);
  --sr-ease-swap: cubic-bezier(0.65, 0, 0.35, 1);
  --sr-ease-needle: cubic-bezier(0.34, 1.56, 0.64, 1);
  --sr-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Bootstrap mapping */
  --bs-primary: var(--sr-brand);
  --bs-primary-rgb: var(--sr-brand-rgb);
  --bs-link-color: var(--sr-brand);
  --bs-link-color-rgb: var(--sr-brand-rgb);
  --bs-link-hover-color: var(--sr-accent);
  --bs-link-hover-color-rgb: var(--sr-accent-rgb);
  --bs-body-font-family: var(--sr-font-sans);
  --bs-body-color: var(--sr-text);
  --bs-body-color-rgb: 236, 231, 222;
  --bs-emphasis-color: #ffffff;
  --bs-heading-color: var(--sr-text);
  --bs-body-bg: var(--sr-bg);
  --bs-body-bg-rgb: 14, 15, 16;
  --bs-secondary-color: var(--sr-text-muted);
  --bs-secondary-bg: var(--sr-surface);
  --bs-tertiary-bg: var(--sr-soft);
  --bs-border-color: var(--sr-border);
  --bs-border-radius: var(--sr-radius);
  --bs-border-radius-sm: var(--sr-radius-sm);
  --bs-focus-ring-color: rgba(var(--sr-accent-rgb), 0.5);
  --bs-code-color: var(--sr-accent);
}

.card,
.list-group,
.modal-content {
  --bs-card-bg: var(--sr-surface);
  --bs-list-group-bg: var(--sr-surface);
  --bs-modal-bg: var(--sr-surface);
}

/* Headlines: Anybody, condensed and heavy like an instrument readout; small headings in the text face */
h1,
h2,
.h1,
.h2 {
  font-family: var(--sr-font-display);
  font-weight: 800;
  font-stretch: 70%;
  line-height: 0.95;
  letter-spacing: -0.01em;
  hyphens: auto;
  overflow-wrap: break-word;
}
h2,
.h2 {
  font-weight: 700;
  font-stretch: 85%;
  line-height: 1.05;
}
h3,
h4,
.h3,
.h4,
.h5 {
  font-family: var(--sr-font-sans);
  font-weight: 600;
  letter-spacing: 0;
}
.num {
  font-family: var(--sr-font-data);
}
.kicker {
  margin: 0 0 var(--sr-space-2);
  font: 500 0.75rem/1.3 var(--sr-font-data);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sr-accent);
}
.dek {
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--sr-text-muted);
}
.section-title {
  margin: var(--sr-space-5) 0 0;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--sr-rule);
  font: 500 0.8rem var(--sr-font-data);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
a {
  text-underline-offset: 0.18em;
}

.btn-primary {
  --bs-btn-bg: var(--sr-brand);
  --bs-btn-border-color: var(--sr-brand);
  --bs-btn-hover-bg: var(--sr-brand-hover);
  --bs-btn-hover-border-color: var(--sr-brand-hover);
  --bs-btn-active-bg: var(--sr-brand-hover);
  --bs-btn-active-border-color: var(--sr-brand-hover);
  --bs-btn-disabled-bg: var(--sr-brand);
  --bs-btn-disabled-border-color: var(--sr-brand);
  --bs-btn-focus-shadow-rgb: var(--sr-brand-rgb);
  --bs-btn-color: var(--sr-on-brand);
  --bs-btn-hover-color: var(--sr-on-brand);
  --bs-btn-active-color: var(--sr-on-brand);
  --bs-btn-disabled-color: var(--sr-on-brand);
  font-weight: 600;
}
.btn {
  --bs-btn-border-radius: var(--sr-radius-pill);
  --bs-btn-padding-x: 1.25rem;
}
.btn-outline-secondary {
  --bs-btn-color: var(--sr-text);
  --bs-btn-border-color: var(--sr-text);
  --bs-btn-hover-bg: var(--sr-text);
  --bs-btn-hover-border-color: var(--sr-text);
  --bs-btn-hover-color: var(--sr-on-brand);
  --bs-btn-active-bg: var(--sr-text);
  --bs-btn-active-color: var(--sr-on-brand);
}

.form-control,
.form-select {
  background-color: var(--sr-surface);
  border-color: var(--sr-border-strong);
  color: var(--sr-text);
}
.form-control::placeholder {
  color: var(--sr-text-faint);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--sr-accent);
  box-shadow: 0 0 0 0.25rem rgba(var(--sr-accent-rgb), 0.3);
}
.form-check-input:checked {
  background-color: var(--sr-brand);
  border-color: var(--sr-brand);
}

/* ---------- Header: sticky frosted glass bar ---------- */
.bar {
  position: sticky;
  top: 0;
  z-index: 1020;
  border-bottom: 1px solid var(--sr-border);
  background: rgba(14, 15, 16, 0.94);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .bar {
    background: rgba(14, 15, 16, 0.78);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
  }
}
.bar-row {
  display: flex;
  align-items: center;
  gap: var(--sr-space-3);
  min-height: 56px;
}
.logo {
  display: inline-flex;
  align-items: baseline;
  font: 800 1.45rem/1 var(--sr-font-display);
  font-stretch: 70%;
  letter-spacing: -0.01em;
  color: var(--sr-text);
  text-decoration: none;
}
.logo i {
  font-style: normal;
  font-weight: 300;
  font-stretch: 120%;
}
.logo-tick {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  margin-left: 0.3rem;
  border: 2px solid var(--sr-accent);
  border-radius: 50%;
}
.logo:hover {
  color: var(--sr-text);
}
.edition {
  display: none;
  font: 500 0.7rem var(--sr-font-data);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sr-text-faint);
}
.bar-tools {
  display: flex;
  align-items: center;
  gap: var(--sr-space-2);
  margin-left: auto;
}
.region-chip {
  display: none;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--sr-border-strong);
  border-radius: var(--sr-radius-pill);
  font: 500 0.75rem var(--sr-font-data);
  color: var(--sr-text-muted);
  white-space: nowrap;
}
.bar-account {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--sr-space-1);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--sr-text);
  max-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 576px) {
  .region-chip {
    display: inline-block;
  }
}
@media (min-width: 992px) {
  .edition {
    display: inline;
  }
}

/* Section bar: one line, scrolls sideways on phones (fade hints at more) */
.sections {
  display: flex;
  gap: var(--sr-space-4);
  overflow-x: auto;
  scrollbar-width: none;
  font-size: 0.9rem;
  font-weight: 500;
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
  mask-image: linear-gradient(90deg, #000 85%, transparent);
}
.sections::-webkit-scrollbar {
  display: none;
}
.sections a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--sr-text-muted);
  text-decoration: none;
  white-space: nowrap;
}
.sections a:hover {
  color: var(--sr-text);
}
.sections a.active {
  color: var(--sr-text);
  box-shadow: inset 0 -2px 0 var(--sr-accent);
}
@media (min-width: 768px) {
  .sections {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

.skip-link:focus {
  position: fixed;
  top: var(--sr-space-2);
  left: var(--sr-space-2);
  z-index: 2000;
  padding: var(--sr-space-2) var(--sr-space-3);
  border-radius: var(--sr-radius-pill);
  background: var(--sr-brand);
  color: var(--sr-on-brand);
  text-decoration: none;
}
:focus-visible {
  outline: 2px solid var(--sr-accent);
  outline-offset: 3px;
}

/* Film grain over everything, very faint */
.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
}

/* ---------- Regulatory plates: designed, never hidden ---------- */
.plates {
  display: grid;
  gap: var(--sr-space-3);
}
@media (min-width: 768px) {
  .plates {
    grid-template-columns: 1.4fr 1fr;
  }
}
.plate {
  margin: 0;
  padding: var(--sr-space-3) var(--sr-space-4);
  border: 3px solid var(--sr-on-brand);
  outline: 1px solid var(--sr-brand);
  background: var(--sr-brand);
  color: var(--sr-on-brand);
  font-weight: 600;
  line-height: 1.45;
}
.plate strong {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.plate a {
  color: var(--sr-on-brand);
}
.plate-soft {
  display: flex;
  gap: var(--sr-space-3);
  align-items: flex-start;
  margin: 0;
  padding: var(--sr-space-3) var(--sr-space-4);
  border: 1px solid var(--sr-border-strong);
  color: var(--sr-text-muted);
  font-size: 0.95rem;
}
.tag-ad {
  display: inline-block;
  flex: none;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--sr-text-muted);
  border-radius: 3px;
  font: 600 0.68rem/1.4 var(--sr-font-data);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sr-text);
  white-space: nowrap;
}

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  z-index: 2;
  margin-top: 6rem;
  padding: var(--sr-space-5) 0 var(--sr-space-4);
  border-top: 1px solid var(--sr-border);
}
.footer-cols {
  display: grid;
  gap: var(--sr-space-4);
  margin-top: var(--sr-space-5);
}
@media (min-width: 768px) {
  .footer-cols {
    grid-template-columns: 2fr 1fr 1fr;
  }
}
.footer-cols nav {
  display: grid;
  align-content: start;
  gap: var(--sr-space-1);
}
.footer-cols nav a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--sr-text);
}
.footer-head {
  margin: 0 0 var(--sr-space-2);
  font: 500 0.75rem var(--sr-font-data);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sr-text-faint);
}
.footer-about {
  max-width: 30rem;
  margin: var(--sr-space-2) 0 var(--sr-space-3);
  color: var(--sr-text-muted);
}
.egg {
  min-height: 44px;
  padding: 0 var(--sr-space-3);
  border: 1px solid var(--sr-border-strong);
  border-radius: var(--sr-radius-pill);
  background: transparent;
  color: var(--sr-text-faint);
  font: 500 0.75rem var(--sr-font-data);
}
.egg:hover {
  color: var(--sr-text);
}
.egg-text {
  min-height: 1.4em;
  margin: var(--sr-space-2) 0 0;
  font: 500 0.8rem var(--sr-font-data);
  color: var(--sr-text-muted);
}
.footer-base {
  margin: var(--sr-space-5) 0 0;
  padding-top: var(--sr-space-3);
  border-top: 1px solid var(--sr-border);
  font: 500 0.75rem var(--sr-font-data);
  color: var(--sr-text-faint);
}
.frost {
  position: fixed;
  inset: 0;
  z-index: 1500;
  pointer-events: none;
  background: radial-gradient(120% 80% at 50% 0%, rgba(214, 228, 236, 0.22), rgba(214, 228, 236, 0) 60%);
  -webkit-backdrop-filter: blur(1.5px) saturate(0.6);
  backdrop-filter: blur(1.5px) saturate(0.6);
  animation: frost 3200ms var(--sr-ease-out) forwards;
}
@keyframes frost {
  0% { opacity: 0; }
  15%, 75% { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------- Age check: full-screen "calibration" ---------- */
.gate {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: var(--sr-space-4) var(--sr-space-3);
  border: 0;
  background: var(--sr-bg);
  color: var(--sr-text);
  overflow-y: auto;
}
.gate::backdrop {
  background: var(--sr-bg);
}
.gate[open] {
  display: grid;
  place-items: center;
}
.gate-inner {
  display: grid;
  gap: var(--sr-space-4);
  width: min(56rem, 100%);
}
.gate-num {
  margin: 0;
  font: 800 clamp(8rem, 38vw, 22rem)/0.8 var(--sr-font-display);
  font-stretch: 50%;
  letter-spacing: -0.04em;
}
.gate-title {
  max-width: 18ch;
  margin: 0;
  font-size: clamp(1.8rem, 5vw, 3.2rem);
}
.gate-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sr-space-2);
}
.gate-denied {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
}

/* Filter chips: real checkboxes (Bootstrap .btn-check) styled as pills */
.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sr-space-2);
}
.btn-chip {
  --bs-btn-padding-y: 0.3rem;
  --bs-btn-padding-x: 0.8rem;
  --bs-btn-font-size: 0.875rem;
  --bs-btn-color: var(--sr-text);
  --bs-btn-bg: var(--sr-surface);
  --bs-btn-border-color: var(--sr-border);
  --bs-btn-hover-color: var(--sr-text);
  --bs-btn-hover-bg: var(--sr-bg);
  --bs-btn-hover-border-color: var(--sr-text-muted);
  --bs-btn-active-color: var(--sr-on-brand);
  --bs-btn-active-bg: var(--sr-brand);
  --bs-btn-active-border-color: var(--sr-brand);
  border-radius: 999px;
}
.btn-check:checked + .btn-chip::before {
  content: "✓ ";
}
.btn-check:focus-visible + .btn-chip {
  box-shadow: 0 0 0 0.25rem rgba(var(--sr-brand-rgb), 0.35);
}

/* Category tabs above the ranking */
.category-tabs {
  display: flex;
  gap: var(--sr-space-1);
  overflow-x: auto;
  border-bottom: 1px solid var(--sr-border);
}
.category-tab {
  flex: 1 1 auto;
  text-align: center;
  padding: var(--sr-space-2) var(--sr-space-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--sr-text-muted);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.category-tab:hover {
  color: var(--sr-text);
}
.category-tab.active {
  border-bottom-color: var(--sr-accent);
  color: var(--sr-text);
}
@media (min-width: 768px) {
  .category-tab {
    flex: none;
  }
}

/* FAQ: native <details> between hairlines, works without JS and with the keyboard */
.faq {
  margin-top: var(--sr-space-5);
}
.faq-item {
  border-bottom: 1px solid var(--sr-border);
}
.faq-item summary {
  display: flex;
  justify-content: space-between;
  gap: var(--sr-space-3);
  padding: var(--sr-space-3) 0;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: "+";
  color: var(--sr-accent);
  font-family: var(--sr-font-sans);
  font-weight: 700;
}
.faq-item[open] summary::after {
  content: "–";
}
.faq-item p {
  max-width: 45rem;
  padding: 0 0 var(--sr-space-3);
  color: var(--sr-text-muted);
}

/* Equal-width digits so scores, mg and prices line up when scanning down a list */
.num,
.list-group-item,
.table {
  font-variant-numeric: tabular-nums;
}

.text-brand {
  color: var(--sr-brand) !important;
}

.kick-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.kick {
  display: inline-flex;
  gap: 2px;
}
.kick span {
  width: 4px;
  height: 10px;
  border-radius: 1px;
  background: var(--sr-border);
}
.kick span.on {
  background: var(--sr-text-muted); /* 5.6:1 – WCAG 1.4.11 needs 3:1 */
}

/* Product thumbnails (admin, comparison): square, uploaded and padded server-side (app/lib/images.php) */
.product-thumb {
  object-fit: contain;
  background: var(--sr-soft);
}

/* Strength: 5-step meter + label + mg/pouch (see strength_level() in app/lib/scores.php) */
.strength {
  display: inline-flex;
  align-items: center;
  gap: var(--sr-space-2);
}
.strength-meter {
  display: inline-flex;
  gap: 2px;
}
.strength-meter span {
  width: 10px;
  height: 8px;
  border-radius: 2px;
  background: var(--sr-border);
}
.strength-meter .on-1 { background: var(--sr-strength-1); }
.strength-meter .on-2 { background: var(--sr-strength-2); }
.strength-meter .on-3 { background: var(--sr-strength-3); }
.strength-meter .on-4 { background: var(--sr-strength-4); }
.strength-meter .on-5 { background: var(--sr-strength-5); }
.strength-label {
  font-weight: 600;
  color: var(--sr-text);
}
.strength {
  flex-wrap: wrap;
  row-gap: 0;
}
.strength-label,
.strength .num {
  white-space: nowrap;
}

/* Ranking filters: collapsed on phones (Bootstrap collapse), always open from md up. */
.filter-chevron {
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s;
}
[aria-expanded="true"] .filter-chevron {
  transform: rotate(-135deg) translateY(-2px);
}
@media (min-width: 768px) {
  .filter-collapse.collapse {
    display: block !important;
    height: auto !important;
  }
}

/* ---------- Shared bits: micro labels, section heads, labels ---------- */
.micro {
  font: 500 0.72rem/1.3 var(--sr-font-data);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sr-text-faint);
}
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sr-space-3);
  margin-bottom: var(--sr-space-4);
}
.section-head h2 {
  margin: 0;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
}
.label {
  display: inline-block;
  padding: 0.25rem 0.65rem;
  background: var(--sr-accent);
  color: var(--sr-on-accent); /* 8.6:1 */
  font: 600 0.72rem/1.3 var(--sr-font-data);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* Reviewer verified by us (public profiles): community blue, never the amber of our own test */
.verified-badge {
  background: var(--sr-community);
  color: var(--sr-on-accent);
  vertical-align: middle;
}
.verified-badge::before {
  content: "✓ ";
}
.page-title .verified-badge {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
}
.reviewer-handle {
  margin: var(--sr-space-1) 0 0;
  font: 500 0.95rem var(--sr-font-data);
  color: var(--sr-text-muted);
}
.label-neutral {
  border: 1px solid var(--sr-text);
  background: transparent;
  color: var(--sr-text);
}
.byline {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sr-space-2);
  margin: 0;
  font-size: 0.85rem;
  color: var(--sr-text-muted);
}
.byline > :not(:last-child)::after {
  content: "·";
  margin-left: var(--sr-space-2);
}

/* Data-driven widths/angles without inline styles (the CSP blocks them): data-p="0…100" → --p */
[data-p="0"] { --p: 0; }
[data-p="1"] { --p: 0.01; }
[data-p="2"] { --p: 0.02; }
[data-p="3"] { --p: 0.03; }
[data-p="4"] { --p: 0.04; }
[data-p="5"] { --p: 0.05; }
[data-p="6"] { --p: 0.06; }
[data-p="7"] { --p: 0.07; }
[data-p="8"] { --p: 0.08; }
[data-p="9"] { --p: 0.09; }
[data-p="10"] { --p: 0.1; }
[data-p="11"] { --p: 0.11; }
[data-p="12"] { --p: 0.12; }
[data-p="13"] { --p: 0.13; }
[data-p="14"] { --p: 0.14; }
[data-p="15"] { --p: 0.15; }
[data-p="16"] { --p: 0.16; }
[data-p="17"] { --p: 0.17; }
[data-p="18"] { --p: 0.18; }
[data-p="19"] { --p: 0.19; }
[data-p="20"] { --p: 0.2; }
[data-p="21"] { --p: 0.21; }
[data-p="22"] { --p: 0.22; }
[data-p="23"] { --p: 0.23; }
[data-p="24"] { --p: 0.24; }
[data-p="25"] { --p: 0.25; }
[data-p="26"] { --p: 0.26; }
[data-p="27"] { --p: 0.27; }
[data-p="28"] { --p: 0.28; }
[data-p="29"] { --p: 0.29; }
[data-p="30"] { --p: 0.3; }
[data-p="31"] { --p: 0.31; }
[data-p="32"] { --p: 0.32; }
[data-p="33"] { --p: 0.33; }
[data-p="34"] { --p: 0.34; }
[data-p="35"] { --p: 0.35; }
[data-p="36"] { --p: 0.36; }
[data-p="37"] { --p: 0.37; }
[data-p="38"] { --p: 0.38; }
[data-p="39"] { --p: 0.39; }
[data-p="40"] { --p: 0.4; }
[data-p="41"] { --p: 0.41; }
[data-p="42"] { --p: 0.42; }
[data-p="43"] { --p: 0.43; }
[data-p="44"] { --p: 0.44; }
[data-p="45"] { --p: 0.45; }
[data-p="46"] { --p: 0.46; }
[data-p="47"] { --p: 0.47; }
[data-p="48"] { --p: 0.48; }
[data-p="49"] { --p: 0.49; }
[data-p="50"] { --p: 0.5; }
[data-p="51"] { --p: 0.51; }
[data-p="52"] { --p: 0.52; }
[data-p="53"] { --p: 0.53; }
[data-p="54"] { --p: 0.54; }
[data-p="55"] { --p: 0.55; }
[data-p="56"] { --p: 0.56; }
[data-p="57"] { --p: 0.57; }
[data-p="58"] { --p: 0.58; }
[data-p="59"] { --p: 0.59; }
[data-p="60"] { --p: 0.6; }
[data-p="61"] { --p: 0.61; }
[data-p="62"] { --p: 0.62; }
[data-p="63"] { --p: 0.63; }
[data-p="64"] { --p: 0.64; }
[data-p="65"] { --p: 0.65; }
[data-p="66"] { --p: 0.66; }
[data-p="67"] { --p: 0.67; }
[data-p="68"] { --p: 0.68; }
[data-p="69"] { --p: 0.69; }
[data-p="70"] { --p: 0.7; }
[data-p="71"] { --p: 0.71; }
[data-p="72"] { --p: 0.72; }
[data-p="73"] { --p: 0.73; }
[data-p="74"] { --p: 0.74; }
[data-p="75"] { --p: 0.75; }
[data-p="76"] { --p: 0.76; }
[data-p="77"] { --p: 0.77; }
[data-p="78"] { --p: 0.78; }
[data-p="79"] { --p: 0.79; }
[data-p="80"] { --p: 0.8; }
[data-p="81"] { --p: 0.81; }
[data-p="82"] { --p: 0.82; }
[data-p="83"] { --p: 0.83; }
[data-p="84"] { --p: 0.84; }
[data-p="85"] { --p: 0.85; }
[data-p="86"] { --p: 0.86; }
[data-p="87"] { --p: 0.87; }
[data-p="88"] { --p: 0.88; }
[data-p="89"] { --p: 0.89; }
[data-p="90"] { --p: 0.9; }
[data-p="91"] { --p: 0.91; }
[data-p="92"] { --p: 0.92; }
[data-p="93"] { --p: 0.93; }
[data-p="94"] { --p: 0.94; }
[data-p="95"] { --p: 0.95; }
[data-p="96"] { --p: 0.96; }
[data-p="97"] { --p: 0.97; }
[data-p="98"] { --p: 0.98; }
[data-p="99"] { --p: 0.99; }
[data-p="100"] { --p: 1; }

/* ---------- Hero: giant headline + the current test winner as an instrument readout ---------- */
.hero {
  display: grid;
  gap: var(--sr-space-5);
  align-items: end;
  padding: var(--sr-space-4) 0 var(--sr-space-3);
}
@media (min-width: 992px) {
  .hero {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    padding-top: var(--sr-space-5);
  }
}
.hero-text {
  display: grid;
  gap: var(--sr-space-3);
  align-content: end;
}
.hero-title {
  margin: 0;
  font-size: clamp(3rem, 1.2rem + 8vw, 8.5rem);
  font-stretch: 70%;
  line-height: 0.88;
  letter-spacing: -0.02em;
}
.hero .dek {
  max-width: 38rem;
  margin: 0;
  color: var(--sr-text-muted);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sr-space-2);
  margin: var(--sr-space-2) 0 0;
}
.hero-card {
  position: relative;
  display: grid;
  gap: var(--sr-space-2);
  padding: var(--sr-space-4);
  border: 1px solid var(--sr-border-strong);
  background: var(--sr-surface);
}
.hero-card-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sr-space-2);
  margin-bottom: var(--sr-space-2);
}
.hero-card-name {
  margin: 0;
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  font-stretch: 75%;
  line-height: 0.95;
}
.hero-card-name a,
.row-title a {
  color: inherit;
  text-decoration: none;
}
.hero-card-name a:hover,
.row-title a:hover {
  text-decoration: underline;
}
.hero-card-facts {
  margin: 0;
  font-size: 0.85rem;
  color: var(--sr-text-muted);
}
.hero-card-verdict {
  margin: var(--sr-space-2) 0 0;
  font-size: 1.05rem;
}
.hero-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sr-space-2);
  margin: var(--sr-space-2) 0 0;
}
.row-brand {
  display: block;
  font: 500 0.72rem/1.3 var(--sr-font-data);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sr-text-faint);
}

/* Measuring scale: fills to the test score on load ("the winner is measured") */
.measure {
  position: relative;
  height: 28px;
  margin: var(--sr-space-2) 0;
  border-bottom: 2px solid var(--sr-text);
}
.measure-ticks {
  position: absolute;
  inset: auto 0 0 0;
  height: 12px;
  background: repeating-linear-gradient(90deg, var(--sr-text-faint) 0 1px, transparent 1px 10%);
}
.measure i {
  position: absolute;
  inset: auto 0 0 0;
  height: 8px;
  background: var(--sr-accent);
  transform-origin: left center;
  transform: scaleX(var(--p, 0));
  transition: transform 1100ms var(--sr-ease-needle);
}
.is-armed .measure i {
  transform: scaleX(0);
}
.is-armed.is-revealed .measure i {
  transform: scaleX(var(--p, 0));
}

/* Readouts: test score and community score, same size, never mixed */
.readouts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sr-space-2);
}
.readout {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.15rem;
  padding: var(--sr-space-3);
  border: 1px solid var(--sr-border-strong);
  border-top: 4px solid var(--sr-accent);
  background: var(--sr-bg);
}
.readout.is-comm {
  border-top-color: transparent;
}
.readout.is-comm::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -1px;
  right: -1px;
  height: 4px;
  background: repeating-linear-gradient(135deg, var(--sr-community) 0 4px, var(--sr-bg) 4px 7px);
}
.readout-label {
  font: 500 0.7rem var(--sr-font-data);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sr-text-faint);
}
.readout-val {
  font: 800 clamp(3rem, 2rem + 3vw, 4.5rem)/0.9 var(--sr-font-display);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.readout.is-test .readout-val {
  color: var(--sr-accent);
}
.readout-of,
.readout-empty {
  font-size: 0.8rem;
  color: var(--sr-text-muted);
}
.readout-empty {
  padding: 0.6rem 0;
  font-weight: 600;
  color: var(--sr-text);
}

/* ---------- Ranking: tabs, sort control, filters ---------- */
.ranking {
  margin-top: 6rem;
  scroll-margin-top: 7rem;
}
.sort-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sr-space-2) var(--sr-space-3);
  margin-top: var(--sr-space-3);
}
.seg {
  display: inline-flex;
  flex-wrap: nowrap;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--sr-border-strong);
  border-radius: 1.5rem;
}
.seg a,
.seg button {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--sr-space-3);
  border: 0;
  border-radius: var(--sr-radius-pill);
  background: transparent;
  color: var(--sr-text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.seg a:hover,
.seg button:hover {
  color: var(--sr-text);
}
.seg [aria-current="true"],
.seg [aria-current="true"]:hover,
.seg [aria-pressed="true"],
.seg [aria-pressed="true"]:hover {
  background: var(--sr-text);
  color: var(--sr-on-brand);
}
.filter-box {
  margin: var(--sr-space-3) 0 0;
  padding: var(--sr-space-3) 0;
  border-bottom: 1px solid var(--sr-border);
}
.filter-count {
  padding: 0.1rem 0.5rem;
  border-radius: var(--sr-radius-pill);
  background: var(--sr-accent);
  color: var(--sr-on-accent);
  font: 600 0.75rem var(--sr-font-data);
}

/* ---------- Live table rows – mobile first: rank + name + gauge, then scores, then meta ---------- */
.rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.rows-empty {
  padding: var(--sr-space-5) 0;
  color: var(--sr-text-muted);
}
.rank-row {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem 48px minmax(0, 1fr) auto;
  grid-template-areas:
    "no media name gauge"
    "scores scores scores scores"
    "meta meta meta meta";
  gap: var(--sr-space-2) var(--sr-space-3);
  align-items: center;
  padding: var(--sr-space-3) 0;
  border-bottom: 1px solid var(--sr-border);
  background: var(--sr-bg);
}
.rank-row:hover {
  background: var(--sr-surface);
}
.rank-row.is-moving {
  z-index: 1;
  transition: transform 560ms var(--sr-ease-swap);
}
.row-no {
  grid-area: no;
  font: 800 2.4rem/1 var(--sr-font-display);
  font-stretch: 55%;
  font-variant-numeric: tabular-nums;
  color: var(--sr-text-faint);
}
.rank-row.is-first .row-no {
  color: var(--sr-accent);
}
.row-media {
  grid-area: media;
  display: block;
  width: 48px;
  height: 48px;
  background: var(--sr-soft);
}
.row-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.row-name {
  grid-area: name;
  min-width: 0;
}
.row-title {
  margin: 0.1rem 0 0;
  font: 700 1.1rem/1.2 var(--sr-font-sans);
  overflow-wrap: anywhere;
}
.row-moves:empty {
  display: none;
}
.move {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: var(--sr-space-1);
  padding: 0.05rem 0.4rem;
  border-radius: 3px;
  font: 600 0.72rem var(--sr-font-data);
}
.move::before {
  content: "";
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
.move.up {
  background: var(--sr-text);
  color: var(--sr-on-brand);
}
.move.up::before {
  border-bottom: 7px solid currentColor;
}
.move.down {
  border: 1px solid var(--sr-text-faint);
  color: var(--sr-text);
}
.move.down::before {
  border-top: 7px solid currentColor;
}
.row-gauge {
  grid-area: gauge;
  display: grid;
  justify-items: center;
  gap: 2px;
  text-align: center;
}
.row-strength {
  font-size: 0.72rem;
  line-height: 1.2;
  color: var(--sr-text-muted);
}
.row-level {
  display: block;
  font-weight: 600;
  color: var(--sr-text);
  white-space: nowrap;
}
.row-strength .num {
  white-space: nowrap;
}

/* Strength gauge: half dial 0–25 mg, needle angle from data-p */
.gauge {
  position: relative;
  display: block;
  width: 56px;
  height: 32px;
}
.gauge svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.gauge-track,
.gauge-ticks {
  fill: none;
  stroke-width: 6;
}
.gauge-track {
  stroke: var(--sr-border);
}
.gauge-ticks {
  stroke: var(--sr-accent);
  stroke-dasharray: 2 4;
}
.needle {
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: 2px;
  height: 27px;
  margin-left: -1px;
  border-radius: 2px;
  background: var(--sr-text);
  transform-origin: 50% 100%;
  transform: rotate(calc(-90deg + var(--p, 0) * 180deg));
  transition: transform 900ms var(--sr-ease-needle);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.needle::after {
  content: "";
  position: absolute;
  left: -3px;
  bottom: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sr-text);
}
.is-armed .needle {
  transform: rotate(-90deg);
}
.is-armed.is-revealed .needle {
  transform: rotate(calc(-90deg + var(--p, 0) * 180deg));
}
.rank-row:hover .needle,
.rank-row:focus-within .needle {
  animation: needle-kick 700ms var(--sr-ease-needle);
}
@keyframes needle-kick {
  35% { transform: rotate(calc(-76deg + var(--p, 0) * 180deg)); }
  65% { transform: rotate(calc(-96deg + var(--p, 0) * 180deg)); }
}

/* Score cells: number + bar; community bars are hatched */
.row-scores {
  grid-area: scores;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sr-space-3);
  padding-left: calc(2.5rem + var(--sr-space-3));
}
.cell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.15rem var(--sr-space-2);
  min-width: 0;
}
.cell-label {
  grid-column: 1 / -1;
  font: 500 0.66rem var(--sr-font-data);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sr-text-faint);
}
.cell-val {
  min-width: 2.6ch;
  font-size: 1.25rem;
  font-weight: 600;
}
.cell.is-test .cell-val {
  color: var(--sr-accent);
}
.cell-sub {
  grid-column: 1 / -1;
  font-size: 0.72rem;
  color: var(--sr-text-muted);
}
.cell-empty {
  grid-column: 1 / -1;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--sr-text-muted);
}
.meter {
  display: block;
  height: 6px;
  overflow: hidden;
  background: var(--sr-soft);
}
.meter i {
  display: block;
  height: 100%;
  transform-origin: left center;
  transform: scaleX(var(--p, 0));
  transition: transform 900ms var(--sr-ease-measure);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.meter.is-test i {
  background: var(--sr-accent);
}
.meter.is-comm i {
  background: repeating-linear-gradient(135deg, var(--sr-community) 0 5px, var(--sr-community-dark) 5px 8px);
}
.is-armed .meter i {
  transform: scaleX(0);
}
.is-armed.is-revealed .meter i {
  transform: scaleX(var(--p, 0));
}
.row-meta {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sr-space-1) var(--sr-space-3);
  padding-left: calc(2.5rem + var(--sr-space-3));
  font-size: 0.85rem;
  color: var(--sr-text-muted);
}
.row-meta small {
  font-size: 0.75em;
}
.row-meta .btn-compare {
  margin-left: auto;
}

@media (min-width: 992px) {
  .rank-row {
    grid-template-columns: 4rem 56px minmax(0, 2fr) 7rem minmax(0, 2.2fr) 11rem;
    grid-template-areas: "no media name gauge scores meta";
    gap: var(--sr-space-4);
    padding: var(--sr-space-3) var(--sr-space-2);
  }
  .row-no {
    font-size: 3.5rem;
  }
  .row-media {
    width: 56px;
    height: 56px;
  }
  .row-scores,
  .row-meta {
    padding-left: 0;
  }
  .row-meta {
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
  }
  .row-meta .btn-compare {
    margin-left: 0;
  }
}

/* Share button (app.js shows it): same focus ring as the rest of the site, not Bootstrap's shadow */
.btn-share:focus-visible {
  outline: 2px solid var(--sr-accent);
  outline-offset: 3px;
  box-shadow: none;
}

/* "Embed this score" on product pages: a closed <details> with badge preview and code snippets */
.embed summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sr-space-1) var(--sr-space-3);
  cursor: pointer;
}
.embed-body {
  margin-top: var(--sr-space-3);
  max-width: 48rem;
}
.embed-preview {
  margin-bottom: var(--sr-space-2);
}
.embed-snippet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--sr-space-2);
  margin-bottom: var(--sr-space-3);
}
.embed-snippet textarea {
  font-size: 0.8rem;
  resize: vertical;
}

/* No image yet: a neutral, unbranded can seen from above (decorative) */
.can-mini,
.rank-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  background: var(--sr-soft);
}
.can-mini::before,
.rank-placeholder::before {
  content: "";
  width: 66%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3a3f44, #1b1e21 70%);
  box-shadow: inset 0 0 0 3px #2a2e32, inset 0 0 0 4px var(--sr-border-strong);
}

/* ---------- Horizontal passage: the four tests ---------- */
.tests {
  margin-top: 6rem;
}
.hscroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(16rem, 80%);
  gap: var(--sr-space-3);
  overflow-x: auto;
  padding-bottom: var(--sr-space-3);
  scroll-snap-type: x mandatory;
  scrollbar-color: var(--sr-border-strong) transparent;
  scrollbar-width: thin;
}
.hscroll > * {
  scroll-snap-align: start;
}
@media (min-width: 768px) {
  .hscroll {
    grid-auto-columns: minmax(16rem, 30%);
  }
}
.test-card {
  display: flex;
  flex-direction: column;
  gap: var(--sr-space-2);
  min-height: 18rem;
  padding: var(--sr-space-4);
  border: 1px solid var(--sr-border-strong);
  background: var(--sr-surface);
}
.test-card h3 {
  margin: auto 0 0;
  font-size: 1.3rem;
}
.test-card p {
  margin: 0;
  color: var(--sr-text-muted);
}
.test-weight {
  font: 800 5.5rem/0.85 var(--sr-font-display);
  font-stretch: 55%;
  font-variant-numeric: tabular-nums;
  color: var(--sr-accent);
}
.test-weight small {
  font-size: 0.45em;
}
.test-card.is-muted .test-weight {
  color: var(--sr-text-faint);
}

/* FAQ section spacing */
.faq h2 {
  margin-bottom: var(--sr-space-3);
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
}

/* Row stagger index for the reveal (first 12 rows) */
.rows > li:nth-child(1) { --i: 0; }
.rows > li:nth-child(2) { --i: 1; }
.rows > li:nth-child(3) { --i: 2; }
.rows > li:nth-child(4) { --i: 3; }
.rows > li:nth-child(5) { --i: 4; }
.rows > li:nth-child(6) { --i: 5; }
.rows > li:nth-child(7) { --i: 6; }
.rows > li:nth-child(8) { --i: 7; }
.rows > li:nth-child(9) { --i: 8; }
.rows > li:nth-child(10) { --i: 9; }
.rows > li:nth-child(11) { --i: 10; }
.rows > li:nth-child(12) { --i: 11; }

/* Compare toggle (revealed by app.js) */
.btn-compare {
  --bs-btn-padding-y: 0.15rem;
  --bs-btn-padding-x: 0.6rem;
  --bs-btn-font-size: 0.8rem;
  --bs-btn-color: var(--sr-brand);
  --bs-btn-border-color: rgba(var(--sr-brand-rgb), 0.45);
  --bs-btn-hover-color: var(--sr-brand-hover);
  --bs-btn-hover-bg: var(--sr-brand-subtle);
  --bs-btn-hover-border-color: var(--sr-brand);
  --bs-btn-disabled-color: var(--sr-text-muted);
  --bs-btn-disabled-border-color: var(--sr-border);
  border-radius: 999px;
}
.btn-compare[aria-pressed="true"] {
  background: var(--sr-brand);
  border-color: var(--sr-brand);
  color: var(--sr-on-brand);
}
.btn-compare .compare-on,
.btn-compare[aria-pressed="true"] .compare-off {
  display: none;
}
.btn-compare[aria-pressed="true"] .compare-on {
  display: inline;
}

/* Comparison tray: a frosted pill floating above the thumb zone */
.compare-bar {
  position: fixed;
  left: 50%;
  bottom: var(--sr-space-3);
  z-index: 1030;
  display: flex;
  align-items: center;
  gap: var(--sr-space-2);
  width: min(40rem, calc(100% - 2rem));
  padding: 0.35rem 0.35rem 0.35rem var(--sr-space-3);
  border: 1px solid var(--sr-border-strong);
  border-radius: var(--sr-radius-pill);
  background: rgba(21, 23, 26, 0.92);
  transform: translateX(-50%);
  animation: tray-in 480ms var(--sr-ease-out);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .compare-bar {
    background: rgba(21, 23, 26, 0.78);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
}
.compare-bar[hidden] {
  display: none;
}
@keyframes tray-in {
  from { opacity: 0; transform: translate(-50%, 120%); }
}
.compare-dots {
  display: none;
  gap: 4px;
}
.compare-dots span {
  width: 9px;
  height: 9px;
  border: 1px solid var(--sr-text-muted);
  border-radius: 50%;
}
.compare-dots span.on {
  border-color: var(--sr-text);
  background: var(--sr-text);
}
.compare-status {
  flex: 1;
  min-width: 0;
  font-size: 0.85rem;
}
@media (min-width: 576px) {
  .compare-dots {
    display: inline-flex;
  }
}
body.has-compare-bar {
  padding-bottom: 5rem; /* keep the footer readable above the tray */
}

/* Comparison table: label column stays put, ~2 products visible on phones, scroll for more */
.page-head {
  display: grid;
  gap: var(--sr-space-3);
  padding: var(--sr-space-3) 0 var(--sr-space-4);
}
.page-head .kicker,
.page-head .dek {
  margin: 0;
}
.page-head .dek {
  max-width: 42rem;
  color: var(--sr-text-muted);
}
.page-title {
  margin: 0;
  font-size: clamp(3rem, 1.4rem + 7vw, 8rem);
  font-stretch: 62%;
  line-height: 0.88;
  letter-spacing: -0.02em;
}
.compare-wrap {
  position: relative; /* contains the absolutely positioned .visually-hidden texts, else they widen the page */
  overflow-x: auto;
  border-top: 1px solid var(--sr-rule);
}
.compare-table {
  --bs-table-bg: var(--sr-bg);
  --bs-table-border-color: var(--sr-border);
  margin: 0;
  min-width: 100%;
  font-size: 0.925rem;
}
.compare-table th,
.compare-table td {
  min-width: 9.5rem;
  vertical-align: middle;
}
.compare-table .compare-label {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 7rem;
  max-width: 9rem;
  background: var(--sr-bg);
  box-shadow: 1px 0 0 var(--sr-border);
  font-weight: 600;
}
.compare-head {
  vertical-align: top !important;
}
.compare-head .vt-name {
  font: 700 1.25rem/1.1 var(--sr-font-sans);
}
.compare-section th {
  padding-top: var(--sr-space-4);
  font: 500 0.72rem var(--sr-font-data);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sr-text-faint) !important;
}
.compare-placeholder {
  display: grid;
  width: 64px;
  height: 64px;
}
.cmp-score {
  font: 800 2.2rem/0.9 var(--sr-font-display);
  font-variant-numeric: tabular-nums;
}
.cmp-score.is-test {
  color: var(--sr-accent);
}
.cmp-meter {
  flex: 1;
  min-width: 3rem;
}
.best-mark {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0.05rem 0.4rem;
  background: var(--sr-text);
  color: var(--sr-on-brand);
  font: 600 0.66rem/1.4 var(--sr-font-data);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: middle;
}
@media (min-width: 768px) {
  .compare-table .compare-label {
    min-width: 10rem;
    max-width: none;
  }
}

/* Cross-document view transitions: names and scores fly from the ranking into the comparison columns.
   The ranking names its selected rows by position (app.js); the comparison page by column. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}
::view-transition-group(*) {
  animation-duration: 560ms;
  animation-timing-function: var(--sr-ease-swap);
}
.compare-head:nth-child(2) .vt-name { view-transition-name: vt-name-1; }
.compare-head:nth-child(3) .vt-name { view-transition-name: vt-name-2; }
.compare-head:nth-child(4) .vt-name { view-transition-name: vt-name-3; }
.compare-head:nth-child(5) .vt-name { view-transition-name: vt-name-4; }
.compare-table td:nth-child(2) .vt-test { view-transition-name: vt-test-1; }
.compare-table td:nth-child(3) .vt-test { view-transition-name: vt-test-2; }
.compare-table td:nth-child(4) .vt-test { view-transition-name: vt-test-3; }
.compare-table td:nth-child(5) .vt-test { view-transition-name: vt-test-4; }
.compare-table td:nth-child(2) .vt-comm { view-transition-name: vt-comm-1; }
.compare-table td:nth-child(3) .vt-comm { view-transition-name: vt-comm-2; }
.compare-table td:nth-child(4) .vt-comm { view-transition-name: vt-comm-3; }
.compare-table td:nth-child(5) .vt-comm { view-transition-name: vt-comm-4; }

.guide-formula {
  padding: var(--sr-space-2) var(--sr-space-3);
  border: 1px solid var(--sr-border-strong);
  background: var(--sr-surface);
  font-family: var(--sr-font-data);
  font-weight: 500;
}
.legal p,
.legal li {
  color: var(--sr-text-muted);
}

.pre-line {
  white-space: pre-line;
}

/* ---------- Product test page ---------- */
.p-hero {
  display: grid;
  gap: var(--sr-space-4);
  align-items: center;
  padding: var(--sr-space-3) 0 var(--sr-space-5);
}
@media (min-width: 992px) {
  .p-hero {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--sr-space-5);
  }
}
.p-media {
  display: grid;
  justify-items: center;
  gap: var(--sr-space-2);
}
.p-image {
  width: min(100%, 22rem);
  height: auto;
  aspect-ratio: 1;
  padding: 8%;
  background: var(--sr-soft);
  object-fit: contain;
}
.p-head {
  display: grid;
  gap: var(--sr-space-3);
}
.p-head .kicker {
  margin: 0;
}
.p-title {
  margin: 0;
  font-size: clamp(3rem, 1.6rem + 6vw, 7.5rem);
  font-stretch: 65%;
  line-height: 0.88;
}
.p-title .row-brand {
  margin-bottom: var(--sr-space-2);
  font-size: 0.9rem;
  line-height: 1.3;
}
.p-verdict {
  max-width: 38rem;
  margin: 0;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
  font-weight: 500;
  line-height: 1.45;
}
.p-section {
  margin-top: 5rem;
}
.p-section > .micro {
  margin: 0 0 var(--sr-space-2);
}
.section-note {
  max-width: 26rem;
  margin: 0;
  color: var(--sr-text-muted);
}
.test-page > .plates {
  margin-top: 0;
}

/* Specimen data: mono values in a ruled grid */
.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--sr-rule);
}
@media (min-width: 768px) {
  .facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.fact {
  display: grid;
  gap: 0.2rem;
  padding: var(--sr-space-3) var(--sr-space-3) var(--sr-space-3) 0;
  border-bottom: 1px solid var(--sr-border);
}
.fact dd {
  margin: 0;
  color: var(--sr-text-muted);
  font-size: 0.85rem;
}
.fact b {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--sr-text);
  overflow-wrap: anywhere;
}

/* Instrument 01: strength scale 0–25 mg; the marker swings in with an overshoot */
.scale {
  position: relative;
  overflow-x: clip;
  padding-top: 4.25rem;
}
.scale-marker {
  position: absolute;
  inset: 0 0 1.75rem 0;
  transform: translateX(calc(var(--p, 0) * 100%));
  transition: transform 1100ms var(--sr-ease-needle);
  pointer-events: none;
}
.is-armed .scale-marker {
  transform: translateX(0);
}
.is-armed.is-revealed .scale-marker {
  transform: translateX(calc(var(--p, 0) * 100%));
}
.scale-tag {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.25rem 0.6rem;
  background: var(--sr-text);
  color: var(--sr-on-brand);
  font-weight: 600;
  white-space: nowrap;
  transform: translateX(-50%);
}
.scale-marker[data-p="0"] .scale-tag,
.scale-marker[data-p="1"] .scale-tag,
.scale-marker[data-p="2"] .scale-tag,
.scale-marker[data-p="3"] .scale-tag,
.scale-marker[data-p="4"] .scale-tag,
.scale-marker[data-p="5"] .scale-tag,
.scale-marker[data-p="6"] .scale-tag,
.scale-marker[data-p="7"] .scale-tag,
.scale-marker[data-p="8"] .scale-tag,
.scale-marker[data-p="9"] .scale-tag {
  transform: none;
}
.scale-marker[data-p="90"] .scale-tag,
.scale-marker[data-p="91"] .scale-tag,
.scale-marker[data-p="92"] .scale-tag,
.scale-marker[data-p="93"] .scale-tag,
.scale-marker[data-p="94"] .scale-tag,
.scale-marker[data-p="95"] .scale-tag,
.scale-marker[data-p="96"] .scale-tag,
.scale-marker[data-p="97"] .scale-tag,
.scale-marker[data-p="98"] .scale-tag,
.scale-marker[data-p="99"] .scale-tag,
.scale-marker[data-p="100"] .scale-tag {
  transform: translateX(-100%);
}
.scale-line {
  position: absolute;
  top: 2rem;
  bottom: 0;
  left: -1px;
  width: 3px;
  background: var(--sr-text);
}
.scale:hover .scale-line {
  animation: wobble 700ms var(--sr-ease-needle);
}
@keyframes wobble {
  35% { transform: translateX(10px); }
  65% { transform: translateX(-4px); }
}
.scale-zones {
  display: grid;
  grid-template-columns: 3fr 3fr 3fr 4fr 12fr;
  height: 3rem;
}
/* Tobacco snus bands (STRENGTH_BANDS): 5 / 10 / 14 / 20 / 30 mg */
.scale-zones.is-snus {
  grid-template-columns: 5fr 5fr 4fr 6fr 10fr;
}
.scale-zones span {
  display: flex;
  align-items: flex-end;
  padding: 0 0.4rem 0.35rem;
  border-left: 1px solid var(--sr-bg);
  overflow: hidden;
  font: 500 0.66rem/1.2 var(--sr-font-data);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sr-on-accent);
  white-space: nowrap;
}
.zone-1 { background: var(--sr-strength-1); }
.zone-2 { background: var(--sr-strength-2); }
.zone-3 { background: var(--sr-strength-3); }
.zone-4 { background: var(--sr-strength-4); }
.zone-5 { background: var(--sr-strength-5); }
.scale-zones .is-on {
  box-shadow: inset 0 -4px 0 var(--sr-on-accent);
  font-weight: 700;
}
.scale-ticks {
  display: flex;
  justify-content: space-between;
  padding-top: var(--sr-space-2);
  font-size: 0.75rem;
  color: var(--sr-text-faint);
}

/* Instrument 02: criteria, our test vs community */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sr-space-1) var(--sr-space-3);
  margin: 0;
  font: 500 0.72rem var(--sr-font-data);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sr-text-muted);
}
.legend span::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 0.5rem;
  margin-right: 0.4rem;
  vertical-align: middle;
}
.legend-test::before {
  background: var(--sr-accent);
}
.legend-comm::before {
  background: repeating-linear-gradient(135deg, var(--sr-community) 0 4px, var(--sr-community-dark) 4px 7px);
}
.crit-rows {
  border-top: 1px solid var(--sr-rule);
}
.crit-row {
  display: grid;
  gap: var(--sr-space-2);
  padding: var(--sr-space-3) 0;
  border-bottom: 1px solid var(--sr-border);
}
@media (min-width: 768px) {
  .crit-row {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sr-space-4);
    align-items: center;
  }
}
.crit-row:nth-child(1) { --i: 0; }
.crit-row:nth-child(2) { --i: 1; }
.crit-row:nth-child(3) { --i: 2; }
.crit-row:nth-child(4) { --i: 3; }
.crit-name {
  margin: 0;
  font-size: 1.15rem;
}
.crit-cell {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  align-items: center;
  gap: var(--sr-space-2);
}
.crit-val {
  font-size: 1.2rem;
  font-weight: 600;
}
.crit-cell.is-test .crit-val {
  color: var(--sr-accent);
}

/* Strengths and weaknesses */
.pc {
  display: grid;
  gap: var(--sr-space-4);
}
@media (min-width: 768px) {
  .pc {
    grid-template-columns: 1fr 1fr;
  }
}
.pc h3 {
  margin: 0 0 var(--sr-space-2);
  font: 500 0.75rem var(--sr-font-data);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pc ul {
  display: grid;
  gap: var(--sr-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pc li {
  position: relative;
  padding-left: 1.5rem;
}
.pc li::before {
  position: absolute;
  left: 0;
  font-weight: 800;
}
.pc-pro li::before {
  content: "+";
  color: var(--sr-accent);
}
.pc-con li::before {
  content: "–";
  color: var(--sr-text-muted);
}
.p-body {
  max-width: 46rem;
  margin-top: var(--sr-space-4);
  font-size: 1.1rem;
  line-height: 1.7;
}

/* Where to buy */
.shops {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--sr-rule);
}
.shop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sr-space-2);
  padding: var(--sr-space-3) 0;
  border-bottom: 1px solid var(--sr-border);
}
.shop-name {
  font-size: 1.15rem;
  font-weight: 600;
}
.test-only {
  display: grid;
  gap: var(--sr-space-2);
  padding: var(--sr-space-4);
  border: 1px solid var(--sr-border-strong);
  background: var(--sr-surface);
}
.test-only-title {
  margin: 0;
  font: 700 clamp(1.5rem, 1.1rem + 1.5vw, 2.4rem)/1.1 var(--sr-font-display);
  font-stretch: 80%;
}

/* Instrument 03: community */
.kicker-comm {
  color: var(--sr-community);
}
.community-grid {
  display: grid;
  gap: var(--sr-space-5);
}
@media (min-width: 992px) {
  .community-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.hist-wrap {
  margin: 0;
}
.hist {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 6px;
  height: 10rem;
  margin-bottom: var(--sr-space-2);
}
.hist div {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 6px;
}
.hist i {
  display: block;
  align-self: end;
  height: 100%;
  background: repeating-linear-gradient(135deg, var(--sr-community) 0 5px, var(--sr-community-dark) 5px 8px);
  transform-origin: bottom;
  transform: scaleY(var(--p, 0));
  transition: transform 900ms var(--sr-ease-measure);
}
.is-armed .hist i {
  transform: scaleY(0);
}
.is-armed.is-revealed .hist i {
  transform: scaleY(var(--p, 0));
}
.hist span {
  font: 500 0.7rem var(--sr-font-data);
  text-align: center;
  color: var(--sr-text-faint);
}
.review-form {
  padding: var(--sr-space-4);
  border: 1px solid var(--sr-border-strong);
}
.review-form h3 {
  margin-bottom: var(--sr-space-3);
  font-size: 1.2rem;
}
.text-transform-none {
  text-transform: none;
  letter-spacing: 0;
}
.reviews {
  margin: var(--sr-space-4) 0 0;
  padding: 0;
  list-style: none;
}
.review {
  padding: var(--sr-space-3) 0;
  border-top: 1px solid var(--sr-border);
}
.review-head {
  display: flex;
  justify-content: space-between;
  gap: var(--sr-space-2);
}
.review-score {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--sr-community);
}
.review-crit {
  margin: 0 0 var(--sr-space-2);
  font-size: 0.8rem;
  color: var(--sr-text-muted);
}
.review-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sr-space-3);
  font-size: 0.85rem;
  color: var(--sr-text-faint);
}
.related {
  display: grid;
  gap: var(--sr-space-3);
}
@media (min-width: 768px) {
  .related {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.related-card {
  display: grid;
  gap: var(--sr-space-1);
  padding: var(--sr-space-4);
  border: 1px solid var(--sr-border);
  color: var(--sr-text);
  text-decoration: none;
}
.related-card:hover {
  border-color: var(--sr-text);
  color: var(--sr-text);
}
.related-card b {
  font-size: 1.2rem;
}

/* Neutral lab sample (no product photo yet): CSS-only 3D can, tilts with the pointer (app.js) */
.can-stage {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 20rem;
  perspective: 900px;
}
.can {
  position: relative;
  width: 13rem;
  height: 13rem;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 58deg)) rotateZ(var(--rz, -18deg));
  transition: transform 480ms var(--sr-ease-out);
}
.can-base,
.can-lid {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3a3f44, #1b1e21 70%);
  box-shadow: inset 0 0 0 10px #2a2e32, inset 0 0 0 11px var(--sr-border-strong);
}
.can-pouches {
  position: absolute;
  inset: 1.4rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 1.5rem;
  border-radius: 50%;
  transform: translateZ(6px);
}
.can-pouches span {
  border-radius: 6px;
  background: #e9e4da;
  opacity: 0.9;
}
.can-lid {
  display: grid;
  place-items: center;
  text-align: center;
  transform: translateZ(46px);
  transform-origin: 50% 0%;
  transition: transform 700ms var(--sr-ease-needle);
}
.can.is-open .can-lid {
  transform: translateZ(46px) translateY(-8px) rotateX(-112deg);
}
.can-label {
  font: 600 0.7rem/1.4 var(--sr-font-data);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sr-text-muted);
}
.can-shadow {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  filter: blur(18px);
  transform: translateZ(-40px);
}

/* ---------- Methodology ---------- */
.weights {
  display: flex;
  gap: 3px;
  min-height: 8rem;
}
.weight-5 { flex: 5; }
.weight-10 { flex: 10; }
.weight-15 { flex: 15; }
.weight-20 { flex: 20; }
.weight-25 { flex: 25; }
.weight-30 { flex: 30; }
.weight-35 { flex: 35; }
.weight-40 { flex: 40; }
.weight-45 { flex: 45; }
.weight-50 { flex: 50; }
.weight {
  display: grid;
  align-content: space-between;
  min-width: 0;
  padding: var(--sr-space-3);
  border-top: 4px solid var(--sr-accent);
  background: var(--sr-surface);
}
.weight b {
  font: 800 clamp(2rem, 1rem + 4vw, 4.5rem)/0.9 var(--sr-font-display);
  font-stretch: 55%;
  color: var(--sr-accent);
}
.weight b small {
  font-size: 0.45em;
}
.formula {
  margin: var(--sr-space-3) 0;
  padding: var(--sr-space-3) var(--sr-space-4);
  border: 1px solid var(--sr-border-strong);
  background: var(--sr-surface);
  font-size: clamp(0.85rem, 0.75rem + 0.5vw, 1.1rem);
  line-height: 1.7;
  overflow-x: auto;
}
.method-list,
.method-rules {
  display: grid;
  gap: var(--sr-space-2);
  margin: 0 0 var(--sr-space-3);
  padding: 0;
  list-style: none;
}
.method-rules li {
  padding-bottom: var(--sr-space-3);
  border-bottom: 1px solid var(--sr-border);
}
.method-note,
.method-text {
  max-width: 44rem;
  font-size: 1.05rem;
}
.method-readout h2 {
  margin: 0;
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem);
}
.two-col {
  display: grid;
  gap: var(--sr-space-4);
}
@media (min-width: 992px) {
  .two-col {
    grid-template-columns: 1fr 1fr;
    gap: var(--sr-space-5);
  }
}
.two-col h2 {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
}
.levels {
  --bs-table-bg: transparent;
  align-self: start;
}
.levels th {
  font: 500 0.72rem var(--sr-font-data);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sr-text-faint);
}

/* ---------- Index grids (brands, guides) ---------- */
.index-grid {
  display: grid;
  gap: var(--sr-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 576px) {
  .index-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 992px) {
  .index-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.index-grid .related-card {
  height: 100%;
}
.guide-card-title {
  margin: var(--sr-space-1) 0;
  font-size: 1.8rem;
}

/* ---------- 404: off the scale ---------- */
.off-scale {
  display: grid;
  gap: var(--sr-space-3);
  padding: var(--sr-space-4) 0;
}
.off-scale .kicker,
.off-scale .dek {
  margin: 0;
}
.off-scale-num {
  margin: 0;
  font: 800 clamp(8rem, 30vw, 24rem)/0.8 var(--sr-font-display);
  font-stretch: 50%;
  color: var(--sr-border-strong);
}
.off-scale-bar {
  position: relative;
  height: 14px;
  background: linear-gradient(90deg, var(--sr-strength-1) 0 12%, var(--sr-strength-2) 12% 24%, var(--sr-strength-3) 24% 36%, var(--sr-strength-4) 36% 52%, var(--sr-strength-5) 52% 100%);
}
.off-scale-bar span {
  position: absolute;
  top: -24px;
  right: -2px;
  width: 3px;
  height: 62px;
  background: var(--sr-text);
}
.off-scale-title {
  margin: var(--sr-space-3) 0 0;
  font-size: clamp(2.2rem, 1.4rem + 3vw, 4rem);
}

/* ---------- Long reads: guides and legal pages ---------- */
.guide,
.legal {
  max-width: 46rem;
  font-size: 1.1rem;
  line-height: 1.7;
}
.guide h1,
.legal h1 {
  margin: var(--sr-space-3) 0 var(--sr-space-2);
  font-size: clamp(2.6rem, 1.4rem + 5vw, 5.5rem);
  font-stretch: 60%;
  line-height: 0.9;
}
.guide h2,
.legal h2 {
  margin-top: 2.5rem;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
}
.guide .health-note,
.health-note {
  padding: var(--sr-space-3) var(--sr-space-4);
  border: 3px solid var(--sr-on-brand);
  outline: 1px solid var(--sr-brand);
  border-radius: 0;
  background: var(--sr-brand);
  color: var(--sr-on-brand);
  font-weight: 600;
}
.guide-table {
  --bs-table-bg: transparent;
  font-size: 0.95rem;
}
.guide-table th[scope="row"] {
  font-weight: 600;
}

/* ---------- Control room (admin): own layout with a sidebar; swipeable top bar on phones ---------- */
.acp {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100vh;
}
.acp-side {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sr-space-2) var(--sr-space-3);
  padding: var(--sr-space-2) var(--sr-space-3);
  border-bottom: 1px solid var(--sr-border);
  background: var(--sr-surface);
}
.acp-room {
  margin: 0;
}
.acp-nav {
  display: flex;
  order: 3;
  width: 100%;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.acp-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sr-space-2);
  min-height: 44px;
  padding: 0 var(--sr-space-3);
  border-radius: var(--sr-radius);
  color: var(--sr-text-muted);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.acp-nav a:hover {
  background: var(--sr-soft);
  color: var(--sr-text);
}
.acp-nav a.active {
  background: var(--sr-soft);
  color: var(--sr-text);
  box-shadow: inset 3px 0 0 var(--sr-accent);
}
.acp-badge {
  min-width: 1.5rem;
  padding: 0 0.4rem;
  border-radius: var(--sr-radius-pill);
  background: var(--sr-accent);
  color: var(--sr-on-accent);
  font: 600 0.75rem/1.5rem var(--sr-font-data);
  text-align: center;
}
.acp-side-foot {
  display: flex;
  align-items: center;
  gap: var(--sr-space-3);
  margin-left: auto;
  font-size: 0.85rem;
}
.acp-out {
  color: var(--sr-text);
  font-weight: 600;
}
.acp-user {
  display: none;
  color: var(--sr-text-muted);
}
.acp-main {
  min-width: 0;
  padding: var(--sr-space-4) var(--sr-space-3) var(--sr-space-5);
}
@media (min-width: 992px) {
  .acp {
    grid-template-columns: 15rem minmax(0, 1fr);
  }
  .acp-side {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    height: 100vh;
    padding: var(--sr-space-4) var(--sr-space-3);
    border-right: 1px solid var(--sr-border);
    border-bottom: 0;
  }
  .acp-room {
    margin-bottom: var(--sr-space-3);
  }
  .acp-nav {
    order: 0;
    flex-direction: column;
    overflow: visible;
  }
  .acp-side-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sr-space-2);
    margin: auto 0 0;
    padding-top: var(--sr-space-3);
    border-top: 1px solid var(--sr-border);
  }
  .acp-user {
    display: block;
  }
  .acp-main {
    padding: var(--sr-space-5) var(--sr-space-5) 6rem;
  }
}

/* Page head and panels */
.acp-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sr-space-3);
  margin-bottom: var(--sr-space-4);
}
.acp-head .kicker {
  margin: 0 0 var(--sr-space-1);
}
.acp-head .kicker a {
  color: inherit;
}
.acp-head h1 {
  margin: 0;
  font-size: clamp(2.2rem, 1.4rem + 3vw, 4rem);
  font-stretch: 65%;
}
.acp-panel {
  margin-bottom: var(--sr-space-4);
  padding: var(--sr-space-4);
  border: 1px solid var(--sr-border);
  background: var(--sr-surface);
  scroll-margin-top: 6rem;
}
.acp-panel.is-danger {
  border-color: #6b2b2b;
}
.acp-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sr-space-2) var(--sr-space-3);
  margin-bottom: var(--sr-space-3);
}
.acp-panel-head .acp-h2 {
  margin: 0;
}
.acp-h2 {
  margin: 0 0 var(--sr-space-3);
  font: 600 1.2rem/1.3 var(--sr-font-sans);
}
.acp-grid {
  display: grid;
  gap: 0 var(--sr-space-4);
}
@media (min-width: 1200px) {
  .acp-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.acp-empty {
  margin: 0;
  color: var(--sr-text-muted);
}
.acp-meta {
  font-size: 0.82rem;
  color: var(--sr-text-faint);
}
.acp-note {
  color: var(--sr-text-muted);
  font-size: 0.9rem;
}
.acp-strong {
  color: var(--sr-text);
  font-weight: 600;
}
.acp-score,
.acp-test {
  font-weight: 600;
}
.acp-test {
  color: var(--sr-accent);
}
.acp-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sr-space-2) var(--sr-space-3);
  margin-bottom: var(--sr-space-3);
}
.acp-search {
  display: flex;
  gap: var(--sr-space-2);
  width: min(100%, 26rem);
}
/* Accounts (passwords) */
.acp-unlock {
  max-width: 28rem;
}
.acp-secret {
  min-width: 14rem;
  max-width: 22rem;
}
.acp-notes {
  white-space: pre-wrap;
}
/* Contains absolutely positioned .visually-hidden texts, else they widen the page */
.table-responsive {
  position: relative;
}
.acp-table {
  --bs-table-bg: transparent;
  margin: 0;
}
.acp-table th {
  font: 500 0.7rem var(--sr-font-data);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sr-text-faint);
}
.acp-subnav {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: var(--sr-space-3);
  margin: 0 0 var(--sr-space-3);
  padding: var(--sr-space-2) 0;
  overflow-x: auto;
  background: var(--sr-bg);
  font-size: 0.9rem;
}
@media (max-width: 991.98px) {
  .acp-subnav {
    top: 7.5rem;
  }
}
.acp-subnav a {
  color: var(--sr-text-muted);
  white-space: nowrap;
}

/* KPI instruments */
.acp-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sr-space-3);
  margin-bottom: var(--sr-space-4);
}
@media (min-width: 768px) {
  .acp-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1400px) {
  .acp-kpis {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
.kpi {
  display: grid;
  align-content: start;
  gap: 0.2rem;
  padding: var(--sr-space-3);
  border: 1px solid var(--sr-border);
  border-top: 3px solid var(--sr-border-strong);
  background: var(--sr-surface);
}
.kpi:first-child,
.kpi:nth-child(2) {
  border-top-color: var(--sr-accent);
}
.kpi-val {
  font: 800 2.6rem/1 var(--sr-font-display);
  font-stretch: 60%;
  font-variant-numeric: tabular-nums;
}
.kpi-val small {
  font-size: 0.5em;
  color: var(--sr-text-muted);
}
.kpi-sub {
  font-size: 0.8rem;
  color: var(--sr-text-muted);
}
.kpi-delta {
  font-family: var(--sr-font-data);
  font-weight: 600;
}
.kpi-delta.is-up {
  color: var(--sr-text);
}
.kpi-delta.is-down {
  color: var(--sr-accent);
}
.spark {
  width: 100%;
  height: 2.5rem;
  margin-top: var(--sr-space-2);
}
.spark rect,
.chart-views rect {
  fill: var(--sr-text-muted);
}
.spark-clicks rect,
.chart-clicks rect {
  fill: var(--sr-accent);
}
.chart {
  display: block;
  width: 100%;
}
.chart-views {
  height: 10rem;
}
.chart-clicks {
  height: 5rem;
  margin-top: var(--sr-space-2);
}
.chart-axis {
  display: flex;
  justify-content: space-between;
  margin-top: var(--sr-space-1);
  font-size: 0.75rem;
  color: var(--sr-text-faint);
}
.legend-views::before {
  background: var(--sr-text-muted);
}
.legend b {
  margin-left: 0.3rem;
  color: var(--sr-text);
}
.acp-data {
  margin-top: var(--sr-space-3);
}
.acp-data summary {
  cursor: pointer;
  color: var(--sr-text-muted);
}
.bar-list {
  display: grid;
  gap: var(--sr-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.bar-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.25rem var(--sr-space-2);
  font-size: 0.9rem;
}
.bar-list li > :first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bar-list .meter {
  grid-column: 1 / -1;
  height: 4px;
}
.meter.is-plain i {
  background: var(--sr-text-muted);
}

/* Referrers (?ref= links) and the link generator */
.chart-refs {
  height: 5rem;
}
.chart-refs rect,
.meter.is-refs i {
  fill: var(--sr-community);
  background: var(--sr-community);
}
.legend-refs::before {
  background: var(--sr-community);
}
.ref-gen {
  margin-top: var(--sr-space-4);
  padding-top: var(--sr-space-3);
  border-top: 1px solid var(--sr-border);
}
.ref-gen-fields {
  display: grid;
  gap: var(--sr-space-2) var(--sr-space-3);
}
@media (min-width: 768px) {
  .ref-gen-fields {
    grid-template-columns: 1fr 1fr auto;
    align-items: end;
  }
}

/* To-do list */
.todo {
  border-top: 1px solid var(--sr-border);
}
.todo summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sr-space-2);
  min-height: 48px;
  cursor: pointer;
  list-style: none;
}
.todo summary::-webkit-details-marker {
  display: none;
}
.todo summary::before {
  content: "";
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  border: 2px solid var(--sr-text-muted);
}
.todo.is-high summary::before {
  border-color: var(--sr-accent);
  background: var(--sr-accent);
}
.todo-label {
  flex: 1;
  font-weight: 600;
}
.todo-count {
  padding: 0 0.5rem;
  border: 1px solid var(--sr-border-strong);
  border-radius: var(--sr-radius-pill);
  font-size: 0.8rem;
}
.todo-hint {
  margin: 0 0 var(--sr-space-2) 1.1rem;
  font-size: 0.85rem;
  color: var(--sr-text-muted);
}
.todo ul {
  display: grid;
  gap: 0.3rem;
  margin: 0 0 var(--sr-space-3) 1.1rem;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
}
.acp-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.acp-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--sr-space-2);
  padding: var(--sr-space-2) 0;
  border-top: 1px solid var(--sr-border);
}
.acp-list .acp-meta {
  display: block;
}

/* Reviews moderation */
.acp-reviews {
  margin: 0;
  padding: 0;
  list-style: none;
}
.acp-review {
  padding: var(--sr-space-3);
  border: 1px solid var(--sr-border);
  border-left-width: 3px;
  margin-bottom: var(--sr-space-2);
  background: var(--sr-surface);
}
.acp-review.is-reported {
  border-left-color: var(--sr-accent);
}
.acp-review.is-hidden .acp-review-body {
  color: var(--sr-text-faint);
}
.acp-review-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sr-space-2);
}
.acp-review-head .acp-meta {
  display: block;
}
.acp-review-tags {
  display: flex;
  align-items: center;
  gap: var(--sr-space-2);
}
.acp-review-body {
  margin: var(--sr-space-2) 0;
}
.acp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sr-space-2);
}
.acp-pager {
  display: flex;
  align-items: center;
  gap: var(--sr-space-3);
  margin-top: var(--sr-space-3);
}

/* Product status markers */
.marks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.status-mark {
  padding: 0.05rem 0.45rem;
  border: 1px solid var(--sr-border-strong);
  border-radius: 3px;
  font: 500 0.7rem/1.5 var(--sr-font-data);
  white-space: nowrap;
}
.status-mark.is-ok {
  color: var(--sr-text-muted);
}
.status-mark.is-ok::before {
  content: "✓ ";
}
.status-mark.is-warn {
  border-color: var(--sr-text-muted);
  color: var(--sr-text);
}
.status-mark.is-warn::before {
  content: "○ ";
}
.status-mark.is-bad {
  border-color: var(--sr-accent);
  background: var(--sr-accent);
  color: var(--sr-on-accent);
}
.status-mark.is-bad::before {
  content: "! ";
}

/* Editor: live score preview and character counter */
.score-preview {
  display: flex;
  align-items: baseline;
  gap: var(--sr-space-2);
  margin: 0;
  padding: var(--sr-space-2) var(--sr-space-3);
  border: 1px solid var(--sr-border-strong);
  border-top: 3px solid var(--sr-accent);
}
.score-preview output {
  font: 800 2rem/1 var(--sr-font-display);
  color: var(--sr-accent);
}
[data-char-count].is-near {
  color: var(--sr-accent);
}
.acp-brands {
  --bs-list-group-bg: var(--sr-surface);
}

/* ---------- Community tests and submissions ---------- */
.submit-form,
.review-form {
  display: grid;
  gap: var(--sr-space-4);
}
.submit-form {
  max-width: 56rem;
}
.review-block {
  margin: 0;
  padding: var(--sr-space-4);
  border: 1px solid var(--sr-border);
  background: var(--sr-surface);
}
.review-form .review-block {
  padding: 0;
  border: 0;
  background: none;
}
.review-block legend {
  float: none;
  width: auto;
  margin-bottom: var(--sr-space-3);
  font-size: 0.72rem;
}
.review-block .seg .btn-chip {
  border: 0;
}
.community-note {
  display: inline-block;
  justify-self: start;
  padding: 0.2rem 0.6rem;
  border: 1px dashed var(--sr-community);
  color: var(--sr-text);
  font: 500 0.75rem/1.4 var(--sr-font-data);
  letter-spacing: 0.06em;
}
.review-verdict {
  margin: 0 0 var(--sr-space-2);
  font-size: 1.05rem;
  font-weight: 600;
}
.review-pc {
  gap: var(--sr-space-2) var(--sr-space-4);
  margin-bottom: var(--sr-space-2);
  font-size: 0.9rem;
}
.review-pc ul {
  gap: var(--sr-space-1);
}
.review-photos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sr-space-2);
  margin: 0 0 var(--sr-space-2);
  padding: 0;
  list-style: none;
}
.review-photos a {
  display: block;
  width: 7.5rem;
  height: 7.5rem;
  overflow: hidden;
  background: var(--sr-soft);
}
.review-photos img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 240ms var(--sr-ease-out);
}
.review-photos a:hover img {
  transform: scale(1.04);
}

.acp-photos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sr-space-3);
  margin: 0 0 var(--sr-space-2);
  padding: 0;
  list-style: none;
}
.acp-photos li {
  display: grid;
  gap: var(--sr-space-1);
}
.acp-photos img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  background: var(--sr-soft);
}

/* ---------- Reduced motion: every effect has a calm state ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* Insights: numbered top-10 lists like a lab printout */
.insight-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--sr-rule);
}
.insight-row {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  grid-template-areas: "no name val" "no note note";
  gap: 0.15rem var(--sr-space-3);
  align-items: baseline;
  padding: var(--sr-space-2) 0;
  border-bottom: 1px solid var(--sr-border);
}
@media (min-width: 768px) {
  .insight-row {
    grid-template-columns: 2.5rem minmax(0, 1fr) minmax(0, 1fr) 6rem;
    grid-template-areas: "no name note val";
  }
}
.insight-no {
  grid-area: no;
  color: var(--sr-text-faint);
  font-size: 0.85rem;
}
.insight-name {
  grid-area: name;
  display: grid;
}
.insight-name a {
  font-weight: 600;
}
.insight-val {
  grid-area: val;
  justify-self: end;
  font: 800 1.6rem/1 var(--sr-font-display);
  font-stretch: 70%;
  font-variant-numeric: tabular-nums;
}
.insight-val small {
  font: 500 0.75rem var(--sr-font-data);
  color: var(--sr-text-muted);
}
.insight-note {
  grid-area: note;
  font: 500 0.78rem var(--sr-font-data);
  color: var(--sr-text-muted);
}
.insight-split {
  display: grid;
  gap: var(--sr-space-4);
}
@media (min-width: 992px) {
  .insight-split {
    grid-template-columns: 1fr 1fr;
  }
  .insight-split .insight-row {
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    grid-template-areas: "no name val" "no note note";
  }
}
.insight-empty p {
  color: var(--sr-text-muted);
}
.home-insights {
  margin-top: var(--sr-space-5);
}

/* reCAPTCHA (v3): Google allows hiding the floating badge when the form names the service instead. */
.grecaptcha-badge {
  visibility: hidden;
}
.captcha-note {
  margin: 0 0 var(--sr-space-3);
  font-size: 0.78rem;
  color: var(--sr-text-faint);
}

/* Blog admin: the topic field takes the free width next to its button */
.acp-grow {
  flex: 1 1 18rem;
}

/* Blog editor: Markdown toolbar, Google preview, live SEO check, internal links */
.md-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sr-space-1);
  margin-bottom: var(--sr-space-2);
}
@media (min-width: 992px) {
  .acp-seo {
    position: sticky;
    top: var(--sr-space-4);
    max-height: calc(100vh - 2 * var(--sr-space-4));
    overflow-y: auto;
  }
}
.seo-snippet {
  display: grid;
  gap: 0.15rem;
  padding: var(--sr-space-3);
  border: 1px solid var(--sr-border);
  background: var(--sr-bg);
  overflow-wrap: anywhere;
}
.seo-snippet-url {
  font-size: 0.78rem;
  color: var(--sr-text-muted);
}
.seo-snippet-title {
  font-size: 1.1rem;
  line-height: 1.3;
  color: var(--sr-brand-text);
}
.seo-snippet-desc {
  font-size: 0.85rem;
  color: var(--sr-text-muted);
}
.seo-snippet .is-cut::after {
  content: " …";
}
.seo-checks {
  display: grid;
  gap: var(--sr-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.86rem;
}
.seo-checks li {
  position: relative;
  padding-left: 1.4rem;
}
.seo-checks li::before {
  position: absolute;
  left: 0;
  font-weight: 700;
}
.seo-checks .is-good::before { content: "✓"; color: var(--sr-good); }
.seo-checks .is-warn::before { content: "!"; color: var(--sr-warn); left: 0.25rem; }
.seo-checks .is-bad::before { content: "✕"; color: var(--sr-accent); }
.seo-links {
  display: grid;
  gap: var(--sr-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.86rem;
}
.seo-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--sr-brand-text);
  text-align: left;
  text-decoration: underline;
}
.seo-links .acp-meta {
  display: block;
}

/* Analytics consent banner (consent.js): bottom of the screen, above the compare tray, equal-weight buttons */
.consent {
  position: fixed;
  left: 50%;
  bottom: var(--sr-space-3);
  z-index: 1040;
  display: grid;
  gap: var(--sr-space-2);
  width: min(44rem, calc(100% - 2rem));
  padding: var(--sr-space-3) var(--sr-space-4);
  border: 1px solid var(--sr-border-strong);
  background: var(--sr-surface);
  box-shadow: 0 0.75rem 2.5rem rgba(0, 0, 0, 0.5);
  transform: translateX(-50%);
  animation: tray-in 480ms var(--sr-ease-out);
}
.consent[hidden] {
  display: none;
}
.consent-title {
  margin: 0;
  font: 600 1rem/1.3 var(--sr-font-sans);
}
.consent-text {
  margin: 0;
  font-size: 0.86rem;
  color: var(--sr-text-muted);
}
.consent-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sr-space-2);
}
@media (min-width: 576px) {
  .consent-buttons {
    display: flex;
    justify-content: flex-end;
  }
  .consent-buttons .btn {
    min-width: 8rem;
  }
}
.footer-link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sr-text);
  font: inherit;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.footer-link[hidden] {
  display: none;
}