/* =========================================================================
   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);
}
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; }

: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-6) var(--s-8); }
/* Keep the last section clear of the fixed cookie bar while it is showing. */
body:has(.cookie-bar) .site-footer { padding-block-end: 140px; }
.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; }
.mobile-nav 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 a:last-child { 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);
  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 --------------------------------------------------------------- */

.hero { padding-block: var(--s-7) var(--s-6); }
@media (min-width: 900px) { .hero { padding-block: var(--s-9) 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); }
.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 {
  position: relative;
  background: var(--surface);
  border-block-end: 1px solid var(--line);
  margin-block: var(--s-3) var(--s-5);
  /* A definite height on the band, and the unit taken out of flow below, so
     nothing the ad network does to its own box can change the space the page
     reserved. Measured: without this the band collapses to 1px on mobile when
     the network returns no ad, and CLS goes to 0.7. */
  block-size: 101px;
  overflow: hidden;
}
@media (min-width: 768px) { .ad-header { block-size: 91px; } }
.ad-header__inner {
  /* Out of flow inside the band. A horizontal unit is 100px on a phone and
     90px from 768px up; anything taller is clipped by the band. */
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 100px;
  min-block-size: 100px;
  max-block-size: 280px;
  overflow: hidden;
  display: block;
}
@media (min-width: 768px) {
  .ad-header__inner { block-size: 90px; min-block-size: 90px; }
}
.ad-header ins.adsbygoogle {
  display: block;
  inline-size: 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);
  padding: var(--s-4);
}
.cookie-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  max-inline-size: var(--container);
  margin-inline: auto;
  font-size: var(--t-sm);
  color: var(--ink-2);
}
.cookie-bar__inner > p { margin: 0; flex: 1 1 20rem; }

/* --- 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); } }