/* =========================================================================
   SEO Studio Tools — components
   Hand-written. No framework. Logical properties throughout so the /ar
   mirror mirrors itself.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--s-3);
  line-height: var(--lh-head);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  /* Evens out the lines so a heading never drops one short word onto a line of
     its own. Measured at 390px before this: /privacy-cookie-policy left
     "Policy" filling 28% of the line and the 404 left "exist" filling 22%.
     Browsers without it just wrap normally. */
  text-wrap: balance;
}
h1 { font-size: var(--t-2xl); letter-spacing: -0.025em; }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); }
h5, h6 { font-size: var(--t-base); }

p, ul, ol, dl, table, pre, figure { margin: 0 0 var(--s-4); }
ul, ol { padding-inline-start: var(--s-5); }
li { margin-block-end: var(--s-1); }

a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

small { font-size: var(--t-sm); }
hr { border: 0; border-block-start: 1px solid var(--line); margin: var(--s-6) 0; }

img, svg, video { max-width: 100%; height: auto; }

code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; }
/* A long URL in inline code must break rather than push the page sideways.
   Code inside <pre> keeps its own scroll and is left alone. */
:not(pre) > code { overflow-wrap: anywhere; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

::selection { background: var(--accent-soft); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Layout ------------------------------------------------------------- */

.container {
  inline-size: 100%;
  max-inline-size: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-4);
}
@media (min-width: 768px) { .container { padding-inline: var(--s-5); } }

.skip-link {
  position: absolute;
  inset-inline-start: var(--s-4);
  inset-block-start: -100px;
  z-index: 200;
  padding: var(--s-3) var(--s-4);
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
  border-radius: var(--r-1);
  font-weight: 600;
}
.skip-link:focus { inset-block-start: var(--s-3); }

.page-main { display: block; padding-block: var(--s-5) var(--s-7); }
@media (min-width: 900px) { .page-main { padding-block: var(--s-6) var(--s-8); } }
/* The cookie bar is fixed, so the page holds its own space open by exactly the
   bar's measured height (written by the bar's own script) and drops back to 0
   the moment it is dismissed. No guessed constant, nothing ever covered. */
:root { --cookie-bar-h: 0px; }
body { padding-block-end: var(--cookie-bar-h); }
.stack > * + * { margin-block-start: var(--s-5); }
.measure { max-inline-size: var(--measure); }

.grid { display: grid; gap: var(--s-4); }
/* Without this a wide table inside a grid cell widens the page instead of
   scrolling inside its own wrapper. */
.grid > *, .split > * { min-inline-size: 0; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.split { display: grid; gap: var(--s-6); grid-template-columns: 1fr; align-items: start; }
.split > * { min-inline-size: 0; }
@media (min-width: 1024px) {
  .split { grid-template-columns: minmax(0, 1fr) 312px; gap: var(--s-7); }
  .split-aside { position: sticky; inset-block-start: calc(var(--header-h) + var(--s-4)); }
}

/* --- Header ------------------------------------------------------------- */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: var(--surface);
  border-block-end: 1px solid var(--line);
  /* Hard cap. Nothing injected into the page can grow the header. */
  max-block-size: 72px;
  overflow: hidden;
}
@media (min-width: 768px) { .site-header { max-block-size: 88px; } }

.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-block-size: var(--header-h);
  block-size: var(--header-h);
}
@media (min-width: 1200px) { .site-header__bar { gap: var(--s-4); } }

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  text-decoration: none;
  color: var(--ink);
  flex: 0 0 auto;
}
.brand:hover { text-decoration: none; }
.brand__mark { color: var(--accent); display: block; inline-size: 28px; block-size: 28px; }
.brand__name {
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.035em;
  white-space: nowrap;
}
.brand__tagline {
  display: none;
  font-size: var(--t-xs);
  color: var(--ink-3);
  border-inline-start: 1px solid var(--line);
  padding-inline-start: var(--s-2);
  margin-inline-start: var(--s-1);
  letter-spacing: 0;
  font-weight: 400;
}
@media (min-width: 1100px) { .brand__tagline { display: inline; } }

.site-nav { display: none; margin-inline-start: auto; min-inline-size: 0; }
.site-nav ul {
  display: flex;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
}
.site-nav li { margin: 0; }
.site-nav a {
  display: block;
  white-space: nowrap;
  padding: var(--s-2) 10px;
  border-radius: var(--r-1);
  color: var(--ink-2);
  text-decoration: none;
  font-size: var(--t-sm);
  font-weight: 500;
}
.site-nav a:hover { background: var(--surface-2); color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); background: var(--surface-2); font-weight: 600; }
@media (min-width: 900px) { .site-nav { display: block; } }
@media (min-width: 1200px) { .site-nav a { padding-inline: var(--s-3); } }

/* "Trending Index" is too long for the bar below 1200px; the short label
   takes its place rather than letting the nav wrap. */
.nav-label--long  { display: none; }
.nav-label--short { display: inline; }
@media (min-width: 1200px) {
  .nav-label--long  { display: inline; }
  .nav-label--short { display: none; }
}

.header-tools {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  margin-inline-start: auto;
  flex: 0 0 auto;
}
@media (min-width: 900px) { .header-tools { margin-inline-start: var(--s-2); } }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: var(--r-1);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  padding: 0;
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.icon-btn svg { inline-size: 20px; block-size: 20px; display: block; }

.lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  block-size: 44px;
  min-inline-size: 44px;
  flex: 0 0 auto;
  padding-inline: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
}
.lang-switch:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }

.nav-toggle { display: inline-flex; }
@media (min-width: 900px) { .nav-toggle { display: none; } }
/* `.icon-btn svg { display: block }` appears later in this file, so these
   need the same specificity to win. */
.nav-toggle .nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

/* On a phone the header is logo + theme + menu; the language switch moves
   into the menu itself. */
@media (max-width: 599px) { .lang-switch--desktop { display: none; } }

/* The mobile menu lives outside <header> so the header can stay capped and
   overflow-hidden. It is a fixed panel, not a dropdown. */
.mobile-nav {
  position: fixed;
  inset-block-start: 72px;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 60;
  background: var(--surface);
  border-block-start: 1px solid var(--line);
  padding: var(--s-3) 0 var(--s-6);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-nav[hidden] { display: none; }
@media (min-width: 900px) { .mobile-nav { display: none !important; } }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav li { margin: 0; }
/* Scoped to the nav list: the language buttons in the footer of the panel are
   .btn and must keep their own box. */
.mobile-nav li > a {
  display: block;
  min-block-size: 52px;
  padding: var(--s-3) 0;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  border-block-end: 1px solid var(--line);
}
.mobile-nav li:last-child > a { border-block-end: 0; }
.mobile-nav__foot { margin-block-start: var(--s-5); }

/* --- Footer ------------------------------------------------------------- */

.site-footer {
  border-block-start: 1px solid var(--line);
  background: var(--surface);
  padding-block: var(--s-7) var(--s-6);
  margin-block-start: var(--s-8);
}
.site-footer h2 {
  font-size: var(--t-sm);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-3);
  font-weight: 600;
  margin-block-end: var(--s-3);
}
.footer-cols { display: grid; gap: var(--s-6); grid-template-columns: 1fr; }
@media (min-width: 720px) { .footer-cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .footer-cols { grid-template-columns: 1.1fr 1fr 1.2fr; } }
.footer-list { list-style: none; margin: 0; padding: 0; columns: 1; }
.footer-list li { margin-block-end: var(--s-2); }
.footer-list a { color: var(--ink-2); text-decoration: none; font-size: var(--t-sm); }
.footer-list a:hover { color: var(--accent); text-decoration: underline; }
@media (min-width: 480px) { .footer-list--two { columns: 2; column-gap: var(--s-5); } }

.publisher { font-size: var(--t-sm); color: var(--ink-2); }
.publisher strong { color: var(--ink); }
.footer-bottom {
  margin-block-start: var(--s-6);
  padding-block-start: var(--s-4);
  border-block-start: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: space-between;
  font-size: var(--t-xs);
  color: var(--ink-3);
}

/* --- Buttons ------------------------------------------------------------ */

.btn,
.btn:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-block-size: 44px;
  padding: var(--s-2) var(--s-5);
  border-radius: var(--r-1);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  background: var(--surface-2);
  color: var(--ink);
  /* A button label never wraps and a button never shrinks below its label. */
  white-space: nowrap;
  flex: 0 0 auto;
  transition: background-color .12s ease, border-color .12s ease;
}
.btn:hover { text-decoration: none; }
.btn[disabled], .btn:disabled { opacity: .55; cursor: not-allowed; }

.btn--primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn--primary:hover { background: color-mix(in srgb, var(--accent) 86%, #000); }

.btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn--secondary:hover { background: var(--surface-2); }

.btn--ghost { background: transparent; color: var(--ink-2); border-color: transparent; }
.btn--ghost:hover { background: var(--surface-2); color: var(--ink); }

.btn--sm { min-block-size: 36px; padding: var(--s-1) var(--s-3); font-size: var(--t-xs); }
.btn--block { inline-size: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* --- Forms -------------------------------------------------------------- */

.field { margin-block-end: var(--s-4); }
.field__label,
label.form-label {
  display: block;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
  margin-block-end: var(--s-2);
}
.field__hint { display: block; font-size: var(--t-xs); color: var(--ink-3); margin-block-start: var(--s-2); }
.field__error { display: block; font-size: var(--t-xs); color: var(--warn); margin-block-start: var(--s-2); font-weight: 600; }

.input, .select, .textarea,
input[type="text"], input[type="url"], input[type="email"], input[type="search"],
input[type="number"], input[type="password"], input[type="tel"], input[type="date"],
select, textarea {
  inline-size: 100%;
  min-block-size: 44px;
  padding: var(--s-2) var(--s-3);
  font-family: inherit;
  font-size: var(--t-base);
  line-height: 1.5;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-1);
  appearance: none;
}
textarea { min-block-size: 96px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1; }
input:disabled, textarea:disabled, select:disabled { background: var(--surface-2); color: var(--ink-3); }

select, .select {
  padding-inline-end: var(--s-6);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23666E7C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-3) center;
  background-size: 12px 8px;
}
[dir="rtl"] select, [dir="rtl"] .select { background-position: left var(--s-3) center; }

.input--mono, textarea.input--mono { font-family: var(--font-mono); font-size: var(--t-sm); }
.input:invalid:not(:placeholder-shown), .is-invalid { border-color: var(--warn); }

/* Segmented control (desktop) / native select (mobile) */
.segmented { display: none; }
.segmented__set {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  padding: var(--s-1);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
}
.segmented__btn {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-2);
  font: 600 var(--t-sm)/1 var(--font-ui);
  padding: var(--s-2) var(--s-3);
  min-block-size: 34px;
  border-radius: var(--r-1);
  cursor: pointer;
}
.segmented__btn:hover { background: var(--surface); color: var(--ink); }
.segmented__btn[aria-pressed="true"],
.segmented__btn[data-active="true"] {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
}
@media (min-width: 768px) {
  .segmented { display: block; }
  .segmented + .segmented-fallback { display: none; }
}

/* --- Cards and panels --------------------------------------------------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: var(--s-5);
}
@media (min-width: 768px) { .panel { padding: var(--s-6); } }
.panel--tight { padding: var(--s-4); }
/* A panel inside a panel is a distinct object: give it its own ground. */
.panel .panel { background: var(--surface-2); }
.panel + .panel { margin-block-start: var(--s-5); }

.panel__head { margin-block-end: var(--s-5); }
.panel__head h2, .panel__head h1 { margin-block-end: var(--s-2); }
.panel__head p { color: var(--ink-2); margin: 0; }

.card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: var(--s-4);
  text-decoration: none;
  color: inherit;
}
a.card:hover { border-color: var(--line-strong); text-decoration: none; }
a.card:hover .card__title { color: var(--accent); }
.card__title { font-weight: 600; font-size: var(--t-base); margin: 0 0 var(--s-1); color: var(--ink); }
.card__desc { font-size: var(--t-sm); color: var(--ink-2); margin: 0; }
.card__head { display: flex; align-items: center; gap: var(--s-2); margin-block-end: var(--s-2); }
.card__mark { color: var(--accent); flex: 0 0 auto; inline-size: 18px; block-size: 18px; }

/* --- Hero --------------------------------------------------------------- */

/* The hero sits directly under .page-main's own top padding, so its own top
   padding is small on a phone — the two used to stack to 80px and put the H1
   313px down a 375px screen. Desktop keeps the full drop. */
.hero { padding-block: var(--s-4) var(--s-5); }
/* Desktop top padding was --s-9 (96px), which sat on top of .page-main's own
   32px and the ad box's 24px bottom margin: 183px between the ad and the H1 at
   1280. --s-2 leaves 64px of clear space above the eyebrow — the rest of the
   distance to the H1 is the eyebrow line itself, which is content. Breakpoint
   moved from 900 to 768 so tablets get the same treatment. */
@media (min-width: 768px) { .hero { padding-block: var(--s-2) var(--s-7); } }
.hero h1 { font-size: var(--t-2xl); max-inline-size: 18ch; }
@media (min-width: 900px) { .hero h1 { font-size: var(--t-3xl); max-inline-size: 22ch; } }
.hero__lede { font-size: var(--t-md); color: var(--ink-2); max-inline-size: 58ch; margin-block-end: var(--s-5); }
.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-block-end: var(--s-3);
}

/* --- Evidence badges ---------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: baseline;
  gap: .4em;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 400;
  line-height: 1.4;
  padding: 2px var(--s-2);
  border-radius: var(--r-1);
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge--evidence { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 28%, transparent); }
.badge--untested { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 28%, transparent); }
.badge--neutral  { background: var(--surface-2); color: var(--ink-2); border-color: var(--line); }
.badge__sep { color: currentColor; opacity: .55; }
/* A long evidence string has to wrap as a sentence, not as flex children. */
.badge--wrap { display: inline; white-space: normal; padding: 3px var(--s-2); }
.badge--wrap .badge__sep { margin-inline: .15em; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-size: var(--t-xs);
  font-weight: 600;
  padding: 2px var(--s-2);
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
}

/* --- Tag chips ---------------------------------------------------------- */

.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  padding: var(--s-1) var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  text-align: start;
}
.chip:hover { border-color: var(--accent); }
.chip, .data-table .tag { unicode-bidi: isolate; }
.chip__n { font-size: var(--t-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* --- Stat tiles --------------------------------------------------------- */

.stat {
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--surface);
  padding: var(--s-4);
}
.stat__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--t-xl);
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.stat__label {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-3);
  margin-block-start: var(--s-2);
  font-weight: 600;
}
.stat__read { font-size: var(--t-sm); color: var(--ink-2); margin-block-start: var(--s-2); }

/* --- Tables ------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--surface);
  max-inline-size: 100%;
}
.data-table {
  inline-size: 100%;
  min-inline-size: 20rem;
  border-collapse: collapse;
  margin: 0;
  font-size: var(--t-sm);
}
.data-table th, .data-table td {
  padding: var(--s-3);
  text-align: start;
  border-block-end: 1px solid var(--line);
  vertical-align: top;
}
.data-table thead th {
  /* On narrow screens .table-wrap is the scroll container, so the header
     sticks to the top of the wrap. From 900px up the wrap stops scrolling
     and the header sticks to the viewport, just under the site header. */
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
  background: var(--surface);
  border-block-end: 1px solid var(--line-strong);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-3);
  font-weight: 600;
  white-space: nowrap;
}
.data-table tbody tr:last-child td { border-block-end: 0; }
.data-table tbody tr:hover td { background: var(--surface-2); }
.data-table .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: end;
  white-space: nowrap;
}
.data-table .rank { inline-size: 3rem; color: var(--ink-3); font-family: var(--font-mono); text-align: end; }

@media (min-width: 420px) { .data-table { min-inline-size: 26rem; } }
@media (min-width: 900px) {
  .table-wrap { overflow: visible; }
  .data-table thead th { inset-block-start: var(--sticky-below, var(--header-h)); }
}
.data-table .tag { font-family: var(--font-mono); overflow-wrap: break-word; word-break: normal; }

/* --- Callouts, empty states -------------------------------------------- */

.callout {
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--ink-3);
  border-radius: var(--r-1);
  background: var(--surface);
  padding: var(--s-4);
  font-size: var(--t-sm);
  color: var(--ink-2);
}
.callout strong { color: var(--ink); }
.callout--evidence { border-inline-start-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.callout--warn { border-inline-start-color: var(--warn); background: var(--warn-soft); color: var(--ink); }
.callout--error { border-inline-start-color: var(--warn); background: var(--surface); color: var(--ink); }
.callout > :last-child { margin-block-end: 0; }

.empty {
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-2);
  padding: var(--s-6);
  text-align: center;
  color: var(--ink-2);
  background: var(--surface);
}
.empty h3 { font-size: var(--t-md); margin-block-end: var(--s-2); }

/* A small neutral statement of fact, not an alarm. Used when the index is
   older than the daily job should allow — see TrendingIndex::staleness. */
.notice {
  margin-block: var(--s-4) 0;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--warn);
  border-radius: var(--r-1);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: var(--t-sm);
}
.empty p { margin: 0 auto; max-inline-size: 46ch; font-size: var(--t-sm); }

/* --- Accordion (native) ------------------------------------------------- */

.faq { border-block-start: 1px solid var(--line); }
.faq details { border-block-end: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  padding: var(--s-4) var(--s-6) var(--s-4) 0;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
  position: relative;
}
[dir="rtl"] .faq summary { padding: var(--s-4) 0 var(--s-4) var(--s-6); }
.faq summary::-webkit-details-marker { display: none; }
/* Firefox draws a ::marker triangle even with list-style:none. */
.faq summary::marker { content: ""; }
.faq summary::after {
  content: "";
  position: absolute;
  inset-inline-end: var(--s-2);
  inset-block-start: calc(var(--s-4) + 8px);
  inline-size: 10px;
  block-size: 10px;
  border-inline-end: 2px solid var(--ink-3);
  border-block-end: 2px solid var(--ink-3);
  transform: rotate(45deg);
  transition: transform .15s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details > :not(summary) { margin-block-end: var(--s-4); color: var(--ink-2); max-inline-size: var(--measure); }

/* --- Breadcrumb --------------------------------------------------------- */

.breadcrumb { font-size: var(--t-xs); color: var(--ink-3); margin-block-end: var(--s-4); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; }
.breadcrumb li { margin: 0; display: flex; gap: var(--s-2); align-items: center; }
.breadcrumb li + li::before { content: "/"; color: var(--line-strong); }
.breadcrumb a { color: var(--ink-3); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); text-decoration: underline; }

/* --- Region tabs -------------------------------------------------------- */

.region-tabs { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-end: var(--s-5); }
.region-tabs a, .region-tabs button {
  display: inline-flex;
  align-items: center;
  min-block-size: 40px;
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
}
.region-tabs a:hover, .region-tabs button:hover { border-color: var(--line-strong); color: var(--ink); text-decoration: none; }
.region-tabs [aria-current="page"], .region-tabs [data-active="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

/* --- Action bar --------------------------------------------------------- */

.action-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) 0;
}
.action-bar__spacer { margin-inline-start: auto; }
.action-bar--sticky {
  position: sticky;
  inset-block-start: var(--header-h);
  z-index: 20;
  background: var(--bg);
  border-block-end: 1px solid var(--line);
  margin-block-end: var(--s-5);
}
/* A page with a sticky action bar pushes its sticky table headers below it. */
.has-sticky-bar { --sticky-below: calc(var(--header-h) + 58px); }
@media (max-width: 700px) {
  .action-bar--sticky { position: static; }
  .has-sticky-bar { --sticky-below: var(--header-h); }
}

/* --- Code --------------------------------------------------------------- */

.code {
  position: relative;
  background: var(--code-bg);
  color: var(--code-ink);
  border-radius: var(--r-2);
  border: 1px solid var(--code-line);
  margin-block-end: var(--s-4);
}
.code pre {
  margin: 0;
  padding: var(--s-4);
  padding-inline-end: 5.5rem;
  overflow-x: auto;
  font-size: var(--t-sm);
  line-height: 1.65;
  white-space: pre;
  -webkit-overflow-scrolling: touch;
}
.code .tok-str { color: var(--code-accent); }
.code .tok-cmt { color: var(--code-muted); }
.code__copy {
  position: absolute;
  inset-block-start: var(--s-2);
  inset-inline-end: var(--s-2);
  min-block-size: 32px;
  padding: var(--s-1) var(--s-3);
  font: 600 var(--t-xs)/1 var(--font-ui);
  color: var(--code-ink);
  /* Opaque: the code scrolls underneath it on narrow screens. */
  background: var(--code-btn);
  border: 1px solid var(--code-btn-line);
  border-radius: var(--r-1);
  cursor: pointer;
}
.code__copy:hover { background: var(--code-btn-hover); }

/* --- Toast -------------------------------------------------------------- */

.toast-host {
  position: fixed;
  inset-block-end: var(--s-5);
  inset-inline: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 300;
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  pointer-events: auto;
  background: var(--ink);
  color: var(--bg);
  font-size: var(--t-sm);
  font-weight: 600;
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-5);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .16s ease, transform .16s ease;
}
.toast[data-show="true"] { opacity: 1; transform: none; }
[dir="rtl"] .toast { padding: var(--s-2) var(--s-5) var(--s-2) var(--s-2); }
.toast__close {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: 400 1.1rem/1 var(--font-ui);
  cursor: pointer;
  inline-size: 28px;
  block-size: 28px;
  border-radius: 50%;
  opacity: .8;
}
.toast__close:hover { opacity: 1; background: rgba(255, 255, 255, .12); }

/* --- The single ad unit ------------------------------------------------- */

.ad-header {
  /* The content column, not a full-bleed band: same max-width and same inline
     padding as the page content below, so the unit's edges line up with the H1. */
  --ad-pad: var(--s-4);
  position: relative;
  inline-size: 100%;
  max-inline-size: var(--container);
  margin-inline: auto;
  padding-inline: var(--ad-pad);
  margin-block: var(--s-3) var(--s-5);
  background: var(--surface);
  border-block-end: 1px solid var(--line);
  /* The reservation lives here, on a box with no in-flow content, so its height
     is decided by min-block-size alone and nothing the network does can change
     it. On an unfilled impression the network writes
     `height:auto!important; min-height:0!important` onto the ad's own parent
     (.ad-header__inner) to collapse it; when the reservation sat there the box
     fell to 1px on a phone and CLS hit 0.715. 100px + the 1px rule below 768,
     90px + 1px from 768 up. A `horizontal` unit is 320x100, 468x60, 728x90 or
     970x90, so those heights fit every creative the slot can return. */
  min-block-size: 101px;
  max-block-size: 281px;
  overflow: hidden;
}
@media (min-width: 768px) {
  .ad-header { --ad-pad: var(--s-5); min-block-size: 91px; }
}
.ad-header__inner {
  /* Out of flow, inset by the same padding as the content column so the unit's
     left and right edges sit exactly under the H1's. An absolutely positioned
     child resolves against the padding box, so the inset is repeated here
     rather than inherited. */
  position: absolute;
  inset-block-start: 0;
  inset-inline: var(--ad-pad);
  block-size: 100px;
  overflow: hidden;
  display: block;
}
@media (min-width: 768px) {
  .ad-header__inner { block-size: 90px; }
}

/* Once the network has actually filled the unit, let the box grow to the
   creative rather than clipping it — min-block-size above is a floor, not a
   fixed height, and max-block-size is the ceiling. The unit only leaves the
   absolute positioning when it is filled, so an unfilled one still cannot
   collapse the reservation: that is the case that took CLS to 0.715.
   Measured at 390px, a served link unit wanted ~150px and was being cut off
   at 100. */
.ad-header:has(ins.adsbygoogle[data-ad-status="filled"]) .ad-header__inner {
  position: static;
  block-size: auto;
}
.ad-header ins.adsbygoogle {
  display: block;
  inline-size: 100%;
  /* No height is set here on purpose. The network writes `height:auto
     !important` inline on this element, and an inline !important beats an
     author !important, so any height set from CSS is ignored. What the
     network sizes is the empty placeholder box, not the creative: with
     data-ad-format="horizontal" the served creative is 320x100, 468x60,
     728x90 or 970x90, all of which fit the reserved 100/90px and render at the
     top of the box. Verified at 768px, where the served iframe carried
     height="100". */
  /* The network pulls a full-width-responsive unit out of the content column
     with a negative inline margin; keep it inside the column instead. */
  margin-inline: 0 !important;
}

/* An unfilled unit must not paint a white rectangle over a dark page. This
   only ever applies to a unit the network has told us it could not fill —
   a filled ad is never hidden. */
.ad-header ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }

/* Auto-placed units are removed by app.js before they fill; this only stops
   them being visible for the frame between insertion and removal. It never
   applies to a filled unit. */
.google-auto-placed:not([data-ad-status]) { display: none !important; }

/* --- Auth screens ------------------------------------------------------- */

.auth-shell {
  max-inline-size: 26rem;
  margin-inline: auto;
  padding-block: var(--s-6);
}
.auth-shell h1, .auth-shell h2 { font-size: var(--t-xl); }
.auth-shell .card,
.auth-shell > div > .card { border: 0; padding: 0; background: transparent; }
.auth-shell form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2); padding: var(--s-5); }
@media (min-width: 768px) { .auth-shell form { padding: var(--s-6); } }

/* --- Admin edit pill ---------------------------------------------------- */

.edit-pill {
  position: fixed;
  inset-block-end: var(--s-4);
  inset-inline-end: var(--s-4);
  z-index: 110;
  display: inline-flex;
  align-items: center;
  min-block-size: 36px;
  padding: 0 var(--s-4);
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--bg);
  font-size: var(--t-xs);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow);
}
.edit-pill:hover { text-decoration: none; opacity: .9; }

/* --- Cookie notice ------------------------------------------------------ */

.cookie-bar {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 120;
  background: var(--surface);
  border-block-start: 1px solid var(--line-strong);
  box-shadow: var(--shadow);
  /* Clear of the home indicator on a notched phone. */
  padding: var(--s-4) max(var(--s-4), env(safe-area-inset-right))
           calc(var(--s-4) + env(safe-area-inset-bottom))
           max(var(--s-4), env(safe-area-inset-left));
}
.cookie-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  max-inline-size: var(--container);
  margin-inline: auto;
  font-size: var(--t-sm);
  color: var(--ink-2);
}
.cookie-bar__text { margin: 0; flex: 1 1 20rem; }
.cookie-bar__actions {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  flex: 0 0 auto;
}
/* Full 44px targets, not the compact button size. */
.cookie-bar__btn { min-block-size: 44px; }
@media (max-width: 479px) {
  .cookie-bar__actions { inline-size: 100%; }
  .cookie-bar__btn { flex: 1 1 8rem; }
}

/* --- Utilities (small, named, not a framework) -------------------------- */

.u-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.u-muted { color: var(--ink-3); }
.u-ink2 { color: var(--ink-2); }
.u-sm { font-size: var(--t-sm); }
.u-xs { font-size: var(--t-xs); }
.u-center { text-align: center; }
.u-end { text-align: end; }
.u-nowrap { white-space: nowrap; }
.u-flex { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }
.u-between { justify-content: space-between; }
.u-mt-0 { margin-block-start: 0; }
.u-mb-0 { margin-block-end: 0; }
.u-mb-2 { margin-block-end: var(--s-2); }
.u-mb-3 { margin-block-end: var(--s-3); }
.u-mb-4 { margin-block-end: var(--s-4); }
.u-mb-5 { margin-block-end: var(--s-5); }
.u-mt-4 { margin-block-start: var(--s-4); }
.u-mt-5 { margin-block-start: var(--s-5); }
.u-mt-6 { margin-block-start: var(--s-6); }
.u-hidden { display: none !important; }
.visually-hidden {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* Vertical rhythm between the big blocks of a page. */
.section { margin-block-end: var(--s-8); }
.section:last-child { margin-block-end: 0; }
@media (min-width: 900px) { .section { margin-block-end: var(--s-9); } }

.section-head { margin-block-end: var(--s-5); }
.section-head h2 { margin-block-end: var(--s-2); }
.section-head p { color: var(--ink-2); margin: 0; max-inline-size: var(--measure); }

/* An eyebrow on a heading element is a heading, so it keeps the 14px floor;
   on a <p> it is a caption and may be 12px. */
h1.eyebrow, h2.eyebrow, h3.eyebrow, h4.eyebrow, h5.eyebrow, h6.eyebrow { font-size: var(--t-sm); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-block-end: var(--s-2);
}

.article, .yt-toolcopy { max-inline-size: var(--measure); }
.article > *, .yt-toolcopy > * { max-inline-size: var(--measure); }
.article h2 { font-size: var(--t-lg); margin-block-start: var(--s-7); }
.article h3 { font-size: var(--t-md); margin-block-start: var(--s-5); }
.article h2:first-child, .article h3:first-child { margin-block-start: 0; }
.article dt { font-weight: 600; color: var(--ink); margin-block-start: var(--s-4); }
.article dd { margin-inline-start: 0; color: var(--ink-2); }
.article table { inline-size: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.article th, .article td { padding: var(--s-2) var(--s-3); border-block-end: 1px solid var(--line); text-align: start; }

.page-head { padding-block: var(--s-6) var(--s-5); border-block-end: 1px solid var(--line); margin-block-end: var(--s-6); }
.page-head h1 { margin-block-end: var(--s-2); }
.page-head p { color: var(--ink-2); max-inline-size: var(--measure); margin: 0; }

.result-area:empty { display: none; }

/* =========================================================================
   Compatibility layer
   The ~160 legacy script tools are rendered from Blade views written against
   Bootstrap 5. Rather than redesign 160 pages by hand, this section maps the
   exact class subset those views use onto the tokens above, so they inherit
   the new design automatically. Nothing here is used by the rebuilt pages.
   `bg-gradient-*` keeps its name and loses its gradient.
   ========================================================================= */

.row { display: flex; flex-wrap: wrap; margin-inline: calc(var(--s-3) * -1); }
.row > * { padding-inline: var(--s-3); inline-size: 100%; }
.g-2 { gap: var(--s-2) 0; }
.col { flex: 1 0 0%; }
.col-auto { flex: 0 0 auto; inline-size: auto; }
.col-12 { flex: 0 0 auto; inline-size: 100%; }
.col-6  { flex: 0 0 auto; inline-size: 50%; }
.col-4  { flex: 0 0 auto; inline-size: 33.3333%; }
.col-3  { flex: 0 0 auto; inline-size: 25%; }
@media (min-width: 768px) {
  .col-md-2 { flex: 0 0 auto; inline-size: 16.6667%; }
  .col-md-3 { flex: 0 0 auto; inline-size: 25%; }
  .col-md-4 { flex: 0 0 auto; inline-size: 33.3333%; }
  .col-md-5 { flex: 0 0 auto; inline-size: 41.6667%; }
  .col-md-6 { flex: 0 0 auto; inline-size: 50%; }
  .col-md-7 { flex: 0 0 auto; inline-size: 58.3333%; }
  .col-md-8 { flex: 0 0 auto; inline-size: 66.6667%; }
  .col-md-9 { flex: 0 0 auto; inline-size: 75%; }
  .col-md-12 { flex: 0 0 auto; inline-size: 100%; }
}
@media (min-width: 992px) {
  .col-lg-2 { flex: 0 0 auto; inline-size: 16.6667%; }
  .col-lg-3 { flex: 0 0 auto; inline-size: 25%; }
  .col-lg-4 { flex: 0 0 auto; inline-size: 33.3333%; }
  .col-lg-6 { flex: 0 0 auto; inline-size: 50%; }
  .col-lg-8 { flex: 0 0 auto; inline-size: 66.6667%; }
  .col-lg-9 { flex: 0 0 auto; inline-size: 75%; }
  .col-lg-10 { flex: 0 0 auto; inline-size: 83.3333%; }
  .col-lg-12 { flex: 0 0 auto; inline-size: 100%; }
}

/* Spacing utilities: 0–5 on the Bootstrap scale. */
.m-0{margin:0}.m-1{margin:var(--s-1)}.m-2{margin:var(--s-2)}.m-3{margin:var(--s-4)}.m-4{margin:var(--s-5)}.m-5{margin:var(--s-6)}
.mt-0{margin-block-start:0}.mt-1{margin-block-start:var(--s-1)}.mt-2{margin-block-start:var(--s-2)}.mt-3{margin-block-start:var(--s-4)}.mt-4{margin-block-start:var(--s-5)}.mt-5{margin-block-start:var(--s-6)}
.mb-0{margin-block-end:0}.mb-1{margin-block-end:var(--s-1)}.mb-2{margin-block-end:var(--s-2)}.mb-3{margin-block-end:var(--s-4)}.mb-4{margin-block-end:var(--s-5)}.mb-5{margin-block-end:var(--s-6)}
.ms-0{margin-inline-start:0}.ms-1{margin-inline-start:var(--s-1)}.ms-2{margin-inline-start:var(--s-2)}.ms-3{margin-inline-start:var(--s-4)}.ms-auto{margin-inline-start:auto}
.me-0{margin-inline-end:0}.me-1{margin-inline-end:var(--s-1)}.me-2{margin-inline-end:var(--s-2)}.me-3{margin-inline-end:var(--s-4)}.me-auto{margin-inline-end:auto}
.mx-auto{margin-inline:auto}.my-auto{margin-block:auto}.mt-auto{margin-block-start:auto}
.my-3{margin-block:var(--s-4)}.my-4{margin-block:var(--s-5)}
.p-0{padding:0}.p-1{padding:var(--s-1)}.p-2{padding:var(--s-2)}.p-3{padding:var(--s-4)}.p-4{padding:var(--s-5)}.p-5{padding:var(--s-6)}
.pt-0{padding-block-start:0}.pt-2{padding-block-start:var(--s-2)}.pt-3{padding-block-start:var(--s-4)}
.pb-0{padding-block-end:0}.pb-2{padding-block-end:var(--s-2)}.pb-3{padding-block-end:var(--s-4)}
.ps-0{padding-inline-start:0}.ps-2{padding-inline-start:var(--s-2)}.ps-3{padding-inline-start:var(--s-4)}
.pe-0{padding-inline-end:0}.pe-2{padding-inline-end:var(--s-2)}
.py-2{padding-block:var(--s-2)}.py-3{padding-block:var(--s-4)}.py-4{padding-block:var(--s-5)}
.px-2{padding-inline:var(--s-2)}.px-3{padding-inline:var(--s-4)}
@media (min-width: 768px) { .mb-md-0 { margin-block-end: 0; } .mt-md-0 { margin-block-start: 0; } }

/* Display and flex */
.d-none{display:none}.d-block{display:block}.d-inline{display:inline}.d-inline-block{display:inline-block}
.d-flex{display:flex}.d-inline-flex{display:inline-flex}.d-grid{display:grid}
.flex-column{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-end{justify-content:flex-end}
.justify-content-between{justify-content:space-between}.justify-content-center{justify-content:center}
.justify-content-end{justify-content:flex-end}.align-items-center{align-items:center}
.align-middle{vertical-align:middle}.gap-2{gap:var(--s-2)}
@media (min-width: 992px) { .d-lg-inline-flex { display: inline-flex; } }

/* Size */
.w-25{inline-size:25%}.w-50{inline-size:50%}.w-75{inline-size:75%}.w-100{inline-size:100%}
.h-100{block-size:100%}.h-auto{block-size:auto}
@media (min-width: 768px) { .w-md-auto { inline-size: auto; } }

/* Position */
.position-relative{position:relative}.position-absolute{position:absolute}
.top-0{inset-block-start:0}.end-0{inset-inline-end:0}.start-0{inset-inline-start:0}

/* Text */
.text-center{text-align:center}.text-end{text-align:end}.text-start{text-align:start}
.text-nowrap{white-space:nowrap}.text-lowercase{text-transform:lowercase}
.text-capitalize{text-transform:capitalize}.text-uppercase{text-transform:uppercase}
.text-sm,.small{font-size:var(--t-sm)}
.fw-bold,.text-bold{font-weight:700}.fw-medium{font-weight:600}.fw-normal{font-weight:400}
.text-muted{color:var(--ink-3)}
.text-white{color:#fff}
.text-danger{color:var(--warn)}.text-success{color:var(--accent)}
.text-warning{color:var(--warn)}.text-info{color:var(--ink-2)}
.text-decoration-none{text-decoration:none}
.h4{font-size:var(--t-lg)}.h5{font-size:var(--t-md)}.h6{font-size:var(--t-base)}
.lead{font-size:var(--t-md);color:var(--ink-2)}
.cursor-pointer{cursor:pointer}
.opacity-10{opacity:1}

/* Borders and shape */
.border{border:1px solid var(--line)}.border-0{border:0}
.border-white{border-color:var(--line)}.border-info{border-color:var(--line-strong)}
.border-success{border-color:var(--accent)}
.rounded{border-radius:var(--r-1)}.rounded-0{border-radius:0}
.rounded-circle{border-radius:50%}
.rounded-top{border-start-start-radius:var(--r-1);border-start-end-radius:var(--r-1)}
.rounded-start{border-start-start-radius:var(--r-1);border-end-start-radius:var(--r-1)}
.rounded-end{border-start-end-radius:var(--r-1);border-end-end-radius:var(--r-1)}
.shadow,.shadow-sm{box-shadow:var(--shadow)}.shadow-none{box-shadow:none}
.bg-transparent{background:transparent}
.bg-light{background:var(--surface-2)}
.bg-white{background:var(--surface);color:var(--ink)}
.img-fluid{max-inline-size:100%;block-size:auto}
.img-thumbnail{max-inline-size:100%;block-size:auto;border:1px solid var(--line);border-radius:var(--r-1);padding:var(--s-1);background:var(--surface)}

/* Legacy cards */
.card-header {
  padding: var(--s-4) var(--s-5);
  border-block-end: 1px solid var(--line);
  background: transparent;
}
.card-header.bg-gradient-primary,
.card-header.bg-gradient-info,
.card-header.bg-gradient-success,
.card-header.bg-gradient-dark { background: transparent; }
.card-header.bg-gradient-primary *, .card-header.bg-gradient-info *,
.card-header.bg-gradient-success *, .card-header.bg-gradient-dark * { color: var(--ink) !important; }
.card-body { padding: var(--s-5); }
.card > .card-body:only-child { padding: var(--s-5); }

/* Legacy buttons: same names, flat brand colours, no gradients. */
.btn.bg-gradient-info, .btn.btn-primary, .btn.bg-gradient-primary {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent);
}
.btn.bg-gradient-success, .btn.btn-success {
  background: var(--surface); color: var(--ink); border-color: var(--line-strong);
}
.btn.bg-gradient-warning, .btn.bg-gradient-secondary, .btn.btn-secondary,
.btn.btn-outline-secondary, .btn.bg-gradient-dark, .btn.btn-danger {
  background: var(--surface); color: var(--ink); border-color: var(--line-strong);
}
.btn.bg-gradient-dark { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn.btn-sm { min-block-size: 36px; padding: var(--s-1) var(--s-3); font-size: var(--t-xs); }
.btn.btn-icon-only { inline-size: 44px; padding-inline: 0; }
.btn.w-100 { inline-size: 100%; }
.btn-close {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font-size: var(--t-base);
  line-height: 1;
  cursor: pointer;
  padding: var(--s-2);
  min-inline-size: 44px;
  min-block-size: 44px;
}

/* Legacy forms */
.form-group { margin-block-end: var(--s-4); }
.form-text { display: block; font-size: var(--t-xs); color: var(--ink-3); margin-block-start: var(--s-2); }
.col-form-label { font-weight: 600; font-size: var(--t-sm); padding-block: var(--s-2); }
.form-control, .form-select { display: block; }
.form-check { display: flex; align-items: center; gap: var(--s-2); margin-block-end: var(--s-2); }
.form-check-inline { display: inline-flex; margin-inline-end: var(--s-4); }
.form-check-input {
  inline-size: 18px; block-size: 18px; min-block-size: 0; margin: 0;
  accent-color: var(--accent); flex: 0 0 auto;
}
.form-check-label { font-size: var(--t-sm); color: var(--ink-2); margin: 0; }
.form-switch .form-check-input { inline-size: 34px; border-radius: var(--r-pill); }
.form-range { inline-size: 100%; accent-color: var(--accent); min-block-size: 0; border: 0; padding: 0; background: transparent; }
.form-fieldset {
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: var(--s-4);
  background: var(--surface-2);
}
.form-fieldset .form-label, .form-fieldset label { color: var(--ink); }
.form-floating { position: relative; }
.input-group { display: flex; align-items: stretch; }
.input-group > .form-control, .input-group > input, .input-group > .form-select { flex: 1 1 auto; inline-size: 1%; }
.input-group > :not(:first-child) { border-start-start-radius: 0; border-end-start-radius: 0; }
.input-group > :not(:last-child) { border-start-end-radius: 0; border-end-end-radius: 0; }
.input-group-text, .input-group-prepend {
  display: flex; align-items: center;
  padding-inline: var(--s-3);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  color: var(--ink-2);
  font-size: var(--t-sm);
}
.input-group-flat > .input-group-text { background: var(--surface); border-inline-start: 0; }
.form-selectgroup { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.form-selectgroup-item { position: relative; }
.form-selectgroup-input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.form-selectgroup-label {
  display: inline-block; cursor: pointer;
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--line); border-radius: var(--r-1);
  background: var(--surface); color: var(--ink);
  font-family: var(--font-mono); font-size: var(--t-sm);
}
.form-selectgroup-input:checked + .form-selectgroup-label { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

/* Legacy tables */
.table { inline-size: 100%; border-collapse: collapse; font-size: var(--t-sm); margin-block-end: var(--s-4); }
.table th, .table td { padding: var(--s-3); border-block-end: 1px solid var(--line); text-align: start; }
.table thead th {
  background: var(--surface-2);
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-3); font-weight: 600; white-space: nowrap;
}
.table thead.bg-gradient-success th, .table thead.bg-gradient-info th { background: var(--surface-2); color: var(--ink-3); }
.table-bordered th, .table-bordered td { border: 1px solid var(--line); }
.table-hover tbody tr:hover td { background: var(--surface-2); }
.table-striped tbody tr:nth-child(odd) td { background: transparent; }
.table-sm th, .table-sm td { padding: var(--s-2); }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; max-inline-size: 100%; }

/* Legacy alerts and badges */
.alert {
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--ink-3);
  border-radius: var(--r-1);
  background: var(--surface);
  color: var(--ink-2);
  margin-block-end: var(--s-4);
  font-size: var(--t-sm);
}
.alert-warning, .alert.bg-gradient-warning { border-inline-start-color: var(--warn); background: var(--warn-soft); color: var(--ink); }
.alert-danger { border-inline-start-color: var(--warn); }
.alert-secondary, .alert-light, .alert.bg-gradient-info, .alert.bg-gradient-secondary { background: var(--surface-2); color: var(--ink-2); }
.alert a { color: var(--accent); }
.alert > :last-child { margin-block-end: 0; }

.badge:not([class*="badge--"]) {
  display: inline-flex; align-items: baseline;
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 400;
  padding: 2px var(--s-2); border-radius: var(--r-1);
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line);
  white-space: normal;
}
.badge.bg-gradient-success, .badge.bg-success { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 28%, transparent); }
.badge.bg-gradient-warning, .badge.bg-warning { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 28%, transparent); }
.badge.bg-gradient-info, .badge.badge-info, .badge.bg-primary, .badge.bg-secondary, .badge.bg-gradient-secondary { background: var(--surface-2); color: var(--ink-2); }
.badge.bg-danger { background: var(--warn-soft); color: var(--warn); }

/* Legacy modal (image tools) */
.modal { position: fixed; inset: 0; z-index: 200; display: none; overflow: auto; background: rgba(11,18,32,.55); }
.modal.show { display: block; }
.modal-dialog { max-inline-size: 34rem; margin: var(--s-6) auto; }
.modal-lg { max-inline-size: 56rem; }
.modal-dialog-centered { display: flex; align-items: center; min-block-size: calc(100% - var(--s-7)); }
.modal-content { inline-size: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2); }
.modal-header, .modal-footer { padding: var(--s-4); display: flex; align-items: center; gap: var(--s-3); }
.modal-header { border-block-end: 1px solid var(--line); }
.modal-footer { border-block-start: 1px solid var(--line); justify-content: flex-end; }
.modal-title { margin: 0; font-size: var(--t-md); }
.modal-body { padding: var(--s-4); }

/* Legacy avatars, dropzone, misc */
.avatar { inline-size: 40px; block-size: 40px; border-radius: var(--r-1); object-fit: cover; }
.avatar-md { inline-size: 56px; block-size: 56px; }
.avatar-xl { inline-size: 96px; block-size: 96px; }
.dropzone, .dropzone-box {
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-2);
  background: var(--surface-2);
  padding: var(--s-6);
  text-align: center;
  color: var(--ink-2);
  min-block-size: 140px;
}
.dz-message { color: var(--ink-2); font-size: var(--t-sm); }
.image-container, .image-wrapper { max-inline-size: 100%; overflow: hidden; }
.is-divider { border-block-start: 1px solid var(--line); margin: var(--s-5) 0; }
.clearfix::after { content: ""; display: table; clear: both; }
.icon { display: inline-block; }
.error { color: var(--warn); font-size: var(--t-sm); }
.required::after { content: " *"; color: var(--warn); }

/* Font Awesome sizing when the legacy pages load it */
.fa, .fas, .far, .fab { line-height: 1; }
.fa-fw { inline-size: 1.25em; text-align: center; }
.fa-lg { font-size: 1.25em; }

/* Legacy tool page shell: give the raw Livewire markup a card to sit in. */
.legacy-tool { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2); padding: var(--s-5); }
@media (min-width: 768px) { .legacy-tool { padding: var(--s-6); } }