/* ── Fonts (self-hosted, SIL Open Font License) ──────────────
 * Served from this site: no render-blocking request to a font CDN. The
 * "Inter Fallback" face is Arial scaled to Inter's metrics, so text does
 * not jump (layout shift) when Inter arrives. Arabic has no common system
 * font to tune a fallback to, so Plex uses "optional": it is used when it
 * arrives at once (preloaded, or cached after the first visit), and never
 * swaps in later and moves the text. */
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 400; font-display: optional; src: url('/assets/fonts/plex-arabic-arabic-400.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 400; font-display: optional; src: url('/assets/fonts/plex-arabic-latin-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 500; font-display: optional; src: url('/assets/fonts/plex-arabic-arabic-500.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 500; font-display: optional; src: url('/assets/fonts/plex-arabic-latin-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 600; font-display: optional; src: url('/assets/fonts/plex-arabic-arabic-600.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 600; font-display: optional; src: url('/assets/fonts/plex-arabic-latin-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 700; font-display: optional; src: url('/assets/fonts/plex-arabic-arabic-700.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 700; font-display: optional; src: url('/assets/fonts/plex-arabic-latin-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('/assets/fonts/jetbrains-mono-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter Fallback'; src: local('Arial'), local('Helvetica Neue'), local('Roboto'); size-adjust: 107.4%; ascent-override: 90.2%; descent-override: 22.46%; line-gap-override: 0%; }

/* ============================================================
   AI.tn, main stylesheet

   RTL: layout uses CSS logical properties (inline-start/end,
   margin-inline, padding-inline) throughout, so [dir="rtl"] flips
   correctly without a separate stylesheet. Never use left/right
   for layout here; only for things that are genuinely physical.
   ============================================================ */

/* Product-UI palette, in the Stripe / CoinMarketCap register.

   White page, cool slate-navy text, a single indigo accent. Surfaces are
   near-white greys rather than tinted cards, so a dense comparison table
   stays legible and nothing competes with the data.

   Colour discipline: indigo marks interaction (links, buttons, active
   state). Green and red are reserved for data meaning (best in row, a
   price rising or falling) exactly as a market table uses them, and are
   never used for decoration. */
:root {
  --bg:        #ffffff;
  --bg-alt:    #f8fafc;   /* banded sections */
  --surface:   #ffffff;   /* cards */
  --surface-2: #eff2f5;   /* chips, inert fills */
  --border:    #e7ebf0;   /* hairlines between rows */
  --border-2:  #cfd6e4;   /* inputs, stronger edges */

  --text:      #0d1421;   /* slate-navy, not pure black */
  --text-dim:  #515a6b;
  --text-mute: #656f7f;   /* 4.5:1 on --bg-alt, the tighter case; do not lighten */

  --accent:      #3861fb;   /* indigo */
  --accent-dim:  #2d4fd6;
  --accent-soft: #eaefff;
  --accent-on-soft: #2d4fd6;   /* text on --accent-soft: 5.7:1. --accent there is only 4.3:1 */
  --btn-fill:       #3861fb;
  --btn-fill-hover: #2d4fd6;

  --ok:    #16a34a;   /* data signal: best in row, up */
  --warn:  #b45309;   /* data signal: preview / caution */
  --err:   #dc2626;   /* data signal: down */

  --radius:    8px;
  --radius-lg: 12px;

  --wrap: 1200px;
  --gap:  1.25rem;

  --shadow-sm: 0 1px 2px rgba(13, 20, 33, .05);
  --shadow-md: 0 4px 16px rgba(13, 20, 33, .08);

  --font:      'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-head: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:      'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

[dir="rtl"] {
  --font:      'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-head: 'IBM Plex Sans Arabic', system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #0b0e14;
    --bg-alt:    #11151e;
    --surface:   #141924;
    --surface-2: #1c2231;
    --border:    #222938;
    --border-2:  #323b4e;

    --text:      #eaeef5;
    --text-dim:  #a4aec0;
    --text-mute: #8b95a7;   /* 4.5:1 on --bg */

    --accent:      #6d8cff;   /* lifted so links pass on dark */
    --accent-dim:  #5878f0;
    --accent-soft: #1a2340;
    --accent-on-soft: #6d8cff;   /* 5.0:1 on the dark tint */
    --btn-fill:       #3861fb;
    --btn-fill-hover: #2d4fd6;

    --ok:    #22c55e;
    --warn:  #d99a2b;
    --err:   #ef4444;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, .45);
  }
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-block-size: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; }

img, svg { max-inline-size: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Large display sizes carried at a light weight with tight tracking, which
   is what gives Stripe-style headings their calm. Section headings step up
   in weight because they sit closer to dense content. */
h1, h2, h3 {
  font-family: var(--font-head);
  line-height: 1.12;
  letter-spacing: -0.022em;
  color: var(--text);
}
h1 { font-size: clamp(2.25rem, 4.8vw, 3.5rem); font-weight: 600; }
h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 600; letter-spacing: -0.018em; }
h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }

code { font-family: var(--mono); font-size: .875em; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; inset-block-start: -100%; inset-inline-start: 1rem;
  background: var(--btn-fill, var(--accent)); color: #fff;
  padding: .6rem 1rem; border-radius: 0 0 var(--radius) var(--radius);
  z-index: 100;
}
.skip-link:focus { inset-block-start: 0; }

.wrap {
  inline-size: 100%;
  max-inline-size: var(--wrap);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.muted { color: var(--text-dim); }
.small { font-size: .875rem; }
.no-data { color: var(--text-mute); font-style: italic; font-size: .9em; }

/* ── Header ──────────────────────────────────────────────── */
.site-header {
  position: sticky; inset-block-start: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-block-end: 1px solid var(--border);
}

.header-inner {
  display: flex; align-items: center; gap: 1rem;
  min-block-size: 64px;
}

/* The brand is a proper name, not prose: it reads "AI.tn" in every language,
   so it keeps LTR order even under [dir="rtl"]. */
.brand {
  display: flex; align-items: center; gap: .5rem;
  font-weight: 700; font-size: 1.25rem; letter-spacing: -.03em;
  direction: ltr; unicode-bidi: isolate;
  color: var(--text);
}
/* A filled tile reading "ai", set in the same face as the wordmark beside
   it. Built from type rather than an SVG path so it inherits the page's own
   rendering and stays sharp at any size without a second request. */
.brand-tile {
  display: grid; place-items: center;
  inline-size: 1.5em; block-size: 1.5em;
  border-radius: .36em;
  background: var(--accent); color: #fff;
  font-size: .62em; font-weight: 700; letter-spacing: -.04em;
  flex-shrink: 0;
  /* The glyphs sit optically high inside a square; nudge them down. */
  padding-block-start: .04em;
}
.brand-word { white-space: nowrap; }
.brand-tld  { color: var(--accent); }

.site-nav {
  display: flex; align-items: center; gap: .35rem;
  margin-inline-start: auto;
}

.nav-link {
  padding: .5rem .75rem; border-radius: var(--radius);
  color: var(--text-dim); font-size: .9375rem; font-weight: 500;
  transition: color .15s, background .15s;
}
.nav-link:hover { color: var(--text); background: var(--surface-2); }
.nav-link.is-active { color: var(--accent-on-soft); background: var(--accent-soft); }

.nav-cta {
  padding: .5rem .9rem; border-radius: var(--radius);
  background: var(--btn-fill, var(--accent)); color: #fff;
  font-size: .9375rem; font-weight: 600;
  margin-inline-start: .35rem;
}
.nav-cta:hover { background: var(--btn-fill-hover, var(--accent-dim)); }

.lang-switch {
  display: flex; gap: .15rem;
  margin-inline-start: .6rem;
  padding-inline-start: .6rem;
  border-inline-start: 1px solid var(--border);
}
.lang-opt {
  padding: .3rem .45rem; border-radius: 6px;
  font-size: .8125rem; color: var(--text-mute);
}
.lang-opt:hover { color: var(--text); }
.lang-opt.is-active { color: var(--accent); font-weight: 600; }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: .5rem; }
.nav-toggle span {
  display: block; inline-size: 22px; block-size: 2px;
  background: var(--text); margin-block: 4px; border-radius: 2px;
  transition: transform .2s, opacity .2s;
}

@media (max-width: 900px) {
  .nav-toggle { display: block; margin-inline-start: auto; }
  .site-nav {
    position: fixed; inset-block-start: 64px; inset-inline: 0;
    flex-direction: column; align-items: stretch;
    background: var(--bg); border-block-end: 1px solid var(--border);
    padding: 1rem 1.25rem 1.5rem; gap: .25rem;
    transform: translateY(-120%); transition: transform .22s ease;
    max-block-size: calc(100vh - 64px); overflow-y: auto;
  }
  .site-nav.is-open { transform: translateY(0); }
  .nav-cta { margin-inline-start: 0; text-align: center; margin-block-start: .5rem; }
  .lang-switch {
    margin-inline-start: 0; padding-inline-start: 0;
    border-inline-start: 0; border-block-start: 1px solid var(--border);
    padding-block-start: .75rem; margin-block-start: .5rem;
  }
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .4rem; padding: .6rem 1.1rem;
  border: 1px solid transparent; border-radius: var(--radius);
  font-size: .9375rem; font-weight: 600; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
/* `display` on .btn would otherwise override the hidden attribute, leaving
   the wizard's Back/Next/Submit buttons all visible at once. */
.btn[hidden], [hidden] { display: none !important; }
/* --accent is tuned for text on the page background; on a filled button it
   must carry white text instead, which needs a darker fill in dark mode. */
.btn-primary {
  background: var(--btn-fill, var(--accent)); color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--btn-fill-hover, var(--accent-dim)); }
.btn-ghost { background: transparent; border-color: var(--border-2); color: var(--text); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--text-mute); }
.btn-lg { padding: .8rem 1.5rem; font-size: 1rem; }
.btn-sm { padding: .4rem .75rem; font-size: .8125rem; }
.btn-compare { background: transparent; border-color: var(--border-2); color: var(--text-dim); }
.btn-compare:hover { border-color: var(--accent); color: var(--accent); }
.btn-compare.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

/* ── Sections ────────────────────────────────────────────── */
.section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.section-alt { background: var(--bg-alt); border-block: 1px solid var(--border); }
.page-head { background: var(--bg); }

.page-head {
  padding-block: clamp(2rem, 5vw, 3.5rem) 1.5rem;
  border-block-end: 1px solid var(--border);
}
.page-head p { color: var(--text-dim); margin-block-start: .5rem; max-inline-size: 60ch; }

.section-head { margin-block-end: 1.75rem; }
.section-head p { color: var(--text-dim); margin-block-start: .35rem; }
.section-head-center { text-align: center; }
.section-cta { text-align: center; margin-block-start: 2.5rem; }

.h-sm { font-size: 1.15rem; margin-block: 2rem .9rem; }
.h-xs { font-size: 1rem; margin-block: 1.5rem .6rem; }

/* ── Hero ────────────────────────────────────────────────── */
.hero {
  padding-block: clamp(3rem, 8vw, 5.5rem);
  background: var(--bg);
  border-block-end: 1px solid var(--border);
}
.hero-inner { text-align: center; }
.hero-title { max-inline-size: 18ch; margin-inline: auto; }
.hero-sub {
  color: var(--text-dim); font-size: clamp(1rem, 1.6vw, 1.125rem);
  max-inline-size: 58ch; margin: 1.1rem auto 0; line-height: 1.6;
}
.hero-actions {
  display: flex; gap: .75rem; justify-content: center;
  margin-block-start: 2rem; flex-wrap: wrap;
}
.hero-stats {
  display: flex; gap: clamp(1.5rem, 5vw, 3rem); justify-content: center;
  margin-block-start: 3rem; flex-wrap: wrap;
}
.hero-stats div { text-align: center; }
.hero-stats dt { color: var(--text-mute); font-size: .75rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 500; }
.hero-stats dd {
  font-size: 2rem; font-weight: 700; margin-block-start: .15rem;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.hero-verified { color: var(--text-mute); font-size: .8125rem; margin-block-start: 1.25rem; }

/* ── Grids ───────────────────────────────────────────────── */
.grid { display: grid; gap: var(--gap); }
/* min(290px, 100%) keeps a single column from exceeding a narrow viewport. */
.grid-cards { grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }

.split { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.split-col { min-inline-size: 0; }

/* Long identifiers (API model ids, URLs) must wrap rather than widen a card. */
.model-card, .rec-card, .provider-card, .rank-list li { min-inline-size: 0; }
.mc-name, .rec-name, .rank-name, .pc-name { overflow-wrap: anywhere; }

/* ── Model card ──────────────────────────────────────────── */
.model-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.25rem;
  display: flex; flex-direction: column; gap: .8rem;
  transition: border-color .14s, box-shadow .14s;
}
.model-card:hover {
  border-color: var(--border-2);
  box-shadow: var(--shadow-md);
}

.mc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.mc-name { font-weight: 600; font-size: 1rem; display: block; letter-spacing: -.012em; }
.mc-name:hover { color: var(--accent); }
.mc-provider { color: var(--text-mute); font-size: .8125rem; display: block; margin-block-start: .1rem; }
.mc-provider:hover { color: var(--text-dim); }
.mc-tagline { color: var(--text-dim); font-size: .875rem; line-height: 1.5; }

/* minmax(0,1fr) + overflow-wrap: a fixed 3-up grid otherwise refuses to shrink
   below the widest cell's min-content, and a longer translation of "No data"
   ("Pas de données", "لا توجد بيانات") pushes the whole page wider. */
.mc-specs {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem;
  padding-block: .85rem; border-block: 1px solid var(--border);
}
.mc-specs .spec, .rec-specs div { min-inline-size: 0; }
.mc-specs .no-data, .rec-specs .no-data { overflow-wrap: anywhere; }
.mc-specs .spec dt { color: var(--text-mute); font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em; }
.mc-specs .spec dd { font-weight: 600; font-size: .9375rem; margin-block-start: .15rem; }

.mc-caps { display: flex; flex-wrap: wrap; gap: .3rem; list-style: none; padding: 0; }
.mc-caps li {
  font-size: .75rem; color: var(--text-dim); font-weight: 500;
  background: var(--surface-2); border-radius: 4px; padding: .2rem .45rem;
}

.mc-foot { display: flex; gap: .5rem; margin-block-start: auto; }
.mc-foot .btn { flex: 1; }

/* Prices and units are LTR tokens ("$3.00", "/M"): isolating them stops the
   bidi algorithm reordering the currency symbol or detaching the unit when
   they sit inside Arabic text. */
.price, .price-free, .unit, .rank-val, .score-num, .num, code {
  direction: ltr; unicode-bidi: isolate;
}
.price { font-variant-numeric: tabular-nums; }
.price-free { color: var(--ok); font-weight: 600; }
.unit { color: var(--text-mute); font-size: .75em; font-weight: 400; }
/* Keep the number and its unit together as one visual run. */
.mc-specs dd, .rec-specs dd, .rank-val { white-space: nowrap; }

/* ── Badges ──────────────────────────────────────────────── */
.badge {
  font-size: .6875rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; padding: .2rem .45rem; border-radius: 5px;
  white-space: nowrap;
}
.badge-preview    { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.badge-beta       { background: var(--accent-soft); color: var(--accent-on-soft); }
.badge-deprecated { background: color-mix(in srgb, var(--err) 14%, transparent); color: var(--err); }
.badge-retired    { background: var(--surface-2);     color: var(--text-mute); }

/* ── Catalogue layout ────────────────────────────────────── */
/* `minmax(0, …)` rather than a bare 1fr: a grid track sized 1fr refuses to
   shrink below its content's min-content width, so one long word (common in
   French and Arabic UI labels) pushes the whole page wider. */
.catalogue { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) {
  .catalogue { grid-template-columns: 260px minmax(0, 1fr); align-items: start; }
}
.results { min-inline-size: 0; }

.filters {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.25rem;
}
@media (min-width: 960px) { .filters { position: sticky; inset-block-start: 84px; } }

.filters-body { display: flex; flex-direction: column; gap: 1.1rem; }

.filters-head { font-size: 1rem; font-weight: 700; }

/* Collapsed on narrow screens so results sit above the fold; always open
   from 960px up, where the sidebar has its own column. */
summary.filters-head {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between;
}
summary.filters-head::-webkit-details-marker { display: none; }
summary.filters-head::after {
  content: "+"; font-size: 1.25rem; color: var(--text-mute); line-height: 1;
}
.filters-details[open] > summary.filters-head {
  margin-block-end: 1.1rem;
  padding-block-end: .85rem;
  border-block-end: 1px solid var(--border);
}
.filters-details[open] > summary.filters-head::after { content: "\2212"; }

/* From 960px the sidebar has its own column, so the disclosure is pointless:
   the toggle is disabled and the panel always reads as open. A closed
   <details> hides its content whatever CSS says, so app.js forces the `open`
   attribute at this width, the markup ships open so a no-JS desktop user
   still sees the filters. */
@media (min-width: 960px) {
  summary.filters-head { pointer-events: none; }
  summary.filters-head::after { display: none; }
  .filters-details > summary.filters-head {
    margin-block-end: 1.1rem; padding-block-end: .85rem;
    border-block-end: 1px solid var(--border);
  }
}
.field { display: flex; flex-direction: column; gap: .4rem; border: 0; padding: 0; margin: 0; }
.field > label, .field > legend {
  font-size: .8125rem; font-weight: 600; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .04em; padding: 0;
}
.field input[type="search"], .field input[type="number"], .field select {
  background: var(--bg); border: 1px solid var(--border-2);
  border-radius: var(--radius); padding: .5rem .65rem; inline-size: 100%;
}
.field input:focus, .field select:focus { border-color: var(--accent); outline: none; }

.check { display: flex; align-items: center; gap: .5rem; font-size: .875rem; cursor: pointer; }
.check input { inline-size: 16px; block-size: 16px; accent-color: var(--accent); }

.filters-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.filters-actions .btn { flex: 1; }

.results-bar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; flex-wrap: wrap; margin-block-end: 1.25rem;
}
.results-count { color: var(--text-dim); font-size: .9375rem; }
.sort-form { display: flex; align-items: center; gap: .5rem; }
.sort-form label { font-size: .8125rem; color: var(--text-mute); }
.sort-form select {
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--radius); padding: .4rem .6rem; font-size: .875rem;
}

.empty { text-align: center; padding-block: 3.5rem; }
.empty-title { font-size: 1.15rem; font-weight: 600; }
.empty-help { color: var(--text-dim); margin-block: .5rem 1.5rem; }

/* ── Rank list ───────────────────────────────────────────── */
.rank-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.rank-list li {
  display: flex; align-items: center; gap: .85rem;
  padding: .7rem .25rem; background: transparent;
  border: 0; border-block-end: 1px solid var(--border);
}
.rank-list li:last-child { border-block-end: 0; }
.rank-list li:hover { background: var(--bg-alt); }
.rank-n {
  inline-size: 24px; block-size: 24px; flex-shrink: 0;
  display: grid; place-items: center; border-radius: 6px;
  background: var(--surface-2); color: var(--text-mute);
  font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.rank-name { flex: 1; font-weight: 600; font-size: .9375rem; }
.rank-name:hover { color: var(--accent); }
.rank-name small { display: block; color: var(--text-mute); font-weight: 400; font-size: .75rem; }
.rank-val { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── How it works ────────────────────────────────────────── */
.how-step { text-align: center; padding: 1.5rem 1rem; }
.how-n {
  display: grid; place-items: center;
  inline-size: 40px; block-size: 40px; margin-inline: auto;
  border-radius: 50%; background: var(--accent-soft); color: var(--accent-on-soft);
  font-size: 1rem; font-weight: 700;
  margin-block-end: 1rem;
}
.how-step h3 { margin-block-end: .5rem; }
.how-step p { color: var(--text-dim); font-size: .9375rem; }

/* ── Detail page ─────────────────────────────────────────── */
.crumbs { display: flex; gap: .5rem; font-size: .875rem; color: var(--text-mute); margin-block-end: .85rem; }
.crumbs a:hover { color: var(--accent); }

.detail-title { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.detail-tagline { color: var(--text-dim); font-size: 1.05rem; margin-block-start: .6rem; max-inline-size: 65ch; }
.detail-actions { display: flex; gap: .6rem; margin-block-start: 1.5rem; flex-wrap: wrap; }

.detail-grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .detail-grid { grid-template-columns: 1fr 320px; align-items: start; } }

.detail-side {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.25rem;
}
.detail-side .h-sm:first-child { margin-block-start: 0; }

.prose p { color: var(--text-dim); line-height: 1.75; }
.prose h2 { margin-block: 2rem .75rem; }
.prose h2:first-child { margin-block-start: 0; }
.prose-narrow { max-inline-size: 72ch; }

.spec-list { display: flex; flex-direction: column; gap: .6rem; }
.spec-list > div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-block-end: .6rem; border-block-end: 1px solid var(--border);
  font-size: .875rem;
}
.spec-list > div:last-child { border-block-end: 0; padding-block-end: 0; }
.spec-list dt { color: var(--text-mute); }
.spec-list dd { font-weight: 600; text-align: end; }
.spec-list dd code { font-size: .8125rem; word-break: break-all; }

.pill-list { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin-block: .75rem 0; }
.pill {
  font-size: .8125rem; padding: .3rem .6rem; border-radius: 6px;
  background: var(--surface-2); color: var(--text-dim);
}
.pill-ok { background: color-mix(in srgb, var(--ok) 13%, transparent); color: var(--ok); }

.notice {
  padding: .85rem 1rem; border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: .9375rem; margin-block-start: 1rem;
}
.notice-warn {
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  border-color: color-mix(in srgb, var(--warn) 32%, transparent);
  color: var(--warn);
}

/* ── Tables ──────────────────────────────────────────────── */
.data-table { inline-size: 100%; border-collapse: collapse; font-size: .9375rem; }
.data-table th, .data-table td {
  padding: .65rem .85rem; text-align: start;
  border-block-end: 1px solid var(--border);
}
.data-table tbody tr:hover { background: var(--bg-alt); }
.data-table thead th {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-mute); font-weight: 600;
}
.data-table tbody th { font-weight: 600; }
.data-table tbody th small { display: block; font-weight: 400; font-size: .75rem; margin-block-start: .15rem; }
.data-table .num { font-variant-numeric: tabular-nums; text-align: end; }

/* The wide comparison table scrolls inside this box. `min-inline-size: 0` is
   required: a grid/flex child defaults to min-content width, which lets the
   table push the page wider instead of scrolling within it. */
.table-scroll {
  /* position: relative makes this the containing block for the absolutely
     positioned screen-reader labels inside the table. Without it they escape
     the scroll box and widen the whole page: the compare page panned
     sideways on phones. */
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  min-inline-size: 0;
  max-inline-size: 100%;
}

.compare-table {
  inline-size: 100%; border-collapse: collapse;
  font-size: .9375rem; min-inline-size: 640px;
  table-layout: fixed;
}
.compare-table thead th:not(.corner) { text-align: center; }
/* Horizontal hairlines only, as a market table does: vertical rules add
   noise to a grid that is already aligned by column. */
.compare-table th, .compare-table td {
  padding: .7rem .9rem; text-align: start;
  border: 0; border-block-end: 1px solid var(--border);
}
.compare-table thead th {
  background: var(--bg); vertical-align: top;
  border-block-end: 1px solid var(--border-2);
  position: sticky; inset-block-start: 0; z-index: 2;
}
.compare-table tbody th {
  background: var(--bg); font-weight: 500; inline-size: 180px;
  color: var(--text-dim); font-size: .875rem;
}
.compare-table tbody tr:hover td { background: var(--bg-alt); }
/* Centre numeric and boolean cells. Right-aligning them in a wide column
   strands the value far from its header, which is the opposite of what
   alignment is for here, each column is read vertically against one model,
   not as a continuous ledger. */
.compare-table .num { font-variant-numeric: tabular-nums; text-align: center; font-weight: 500; }
.compare-table .bool { text-align: center; }
.compare-table td { color: var(--text); }
.compare-table .is-best { color: var(--ok); font-weight: 700; }
.compare-table .corner { background: var(--surface); }
.ct-name { font-weight: 600; display: block; letter-spacing: -.012em; }
.ct-name:hover { color: var(--accent); }
.ct-provider { color: var(--text-mute); font-size: .75rem; display: block; margin-block: .15rem .3rem; }
.yes { color: var(--ok); font-weight: 700; }
.no  { color: var(--text-mute); }

.compare-actions { display: flex; gap: .6rem; margin-block-end: 1.25rem; flex-wrap: wrap; }

/* ── Scores ──────────────────────────────────────────────── */
.scores { display: flex; flex-direction: column; gap: .6rem; }
.score-row { display: grid; grid-template-columns: 5.5rem 1fr 2rem; align-items: center; gap: .6rem; font-size: .8125rem; }
.score-label { color: var(--text-dim); }
/* The fill is an SVG <rect> whose width is an attribute: a style attribute
   would be dropped by the CSP (it was, and every bar drew at 100%). */
.score-track { display: block; block-size: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.score-svg { display: block; block-size: 8px; }
[dir="rtl"] .score-svg { transform: scaleX(-1); }
.score-fill.tone-high { fill: var(--ok); }
.score-fill.tone-mid  { fill: var(--accent); }
.score-fill.tone-low  { fill: var(--text-mute); }
.score-num { font-weight: 700; font-variant-numeric: tabular-nums; text-align: end; }
.score-none { color: var(--text-mute); font-style: italic; grid-column: 2 / -1; }

/* ── Wizard ──────────────────────────────────────────────── */
.wizard-wrap { max-inline-size: 920px; margin-inline: auto; }

.wizard-form { display: flex; flex-direction: column; gap: 2rem; }
.wq { border: 0; padding: 0; margin: 0; }
.wq[data-hidden] { display: none; }
.wq legend { display: block; inline-size: 100%; padding: 0; margin-block-end: .4rem; }
.wq-step { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); font-weight: 600; }
.wq-title { display: block; font-size: 1.35rem; font-weight: 700; margin-block-start: .3rem; }
.wq-optional { font-size: .75rem; color: var(--text-mute); font-weight: 400; }
.wq-help { color: var(--text-dim); font-size: .9375rem; margin-block-end: 1rem; }

.wq-options { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.wq-opt {
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .9rem 1rem; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); transition: border-color .15s, background .15s;
}
.wq-opt:hover { border-color: var(--border-2); }
.wq-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.wq-opt input { margin-block-start: .25rem; accent-color: var(--accent); flex-shrink: 0; }
.wq-opt-label { display: block; font-weight: 600; font-size: .9375rem; }
.wq-opt-help { display: block; color: var(--text-dim); font-size: .8125rem; margin-block-start: .15rem; }

.wizard-actions { display: flex; gap: .75rem; flex-wrap: wrap; }

/* Clear the sticky header when scrolled to programmatically. */
.wizard-results, .wq { scroll-margin-block-start: 88px; }
.wizard-results { margin-block-start: 3rem; }
.rec-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.rec-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.25rem;
  display: flex; flex-direction: column; gap: .8rem; position: relative;
}
.rec-card.is-top { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-soft); }
.rec-rank {
  position: absolute; inset-block-start: -10px; inset-inline-start: 1.25rem;
  background: var(--btn-fill, var(--accent)); color: #fff;
  font-size: .6875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; padding: .2rem .5rem; border-radius: 5px;
}
.rec-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; margin-block-start: .35rem; }
.rec-name { font-weight: 600; font-size: 1rem; display: block; letter-spacing: -.012em; }
.rec-name:hover { color: var(--accent); }
.rec-provider { color: var(--text-mute); font-size: .8125rem; }
.rec-score { text-align: center; flex-shrink: 0; }
.rec-score-n {
  display: block; font-size: 1.65rem; font-weight: 700; line-height: 1;
  color: var(--accent); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.rec-score-l { font-size: .625rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-mute); }

.rec-confidence { font-size: .8125rem; color: var(--text-dim); }
.rec-confidence.tone-high strong   { color: var(--ok); }
.rec-confidence.tone-medium strong { color: var(--warn); }
.rec-confidence.tone-low strong    { color: var(--text-mute); }

.rec-reasons { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.rec-reasons li {
  font-size: .875rem; color: var(--text-dim);
  padding-inline-start: 1.1rem; position: relative;
}
.rec-reasons li::before {
  content: "+"; position: absolute; inset-inline-start: 0;
  color: var(--ok); font-weight: 700;
}

.rec-specs {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem;
  padding-block: .75rem; border-block: 1px solid var(--border);
}
.rec-specs dt { color: var(--text-mute); font-size: .6875rem; text-transform: uppercase; }
.rec-specs dd { font-weight: 600; font-size: .875rem; }

.excluded { margin-block-start: 2rem; }
.excluded summary { cursor: pointer; font-weight: 600; color: var(--text-dim); font-size: .9375rem; }
.excluded-list { list-style: none; padding: 0; margin-block-start: .75rem; display: flex; flex-direction: column; gap: .3rem; }
.excluded-list li { font-size: .875rem; color: var(--text-dim); }
.wizard-restart { margin-block-start: 2rem; }

/* ── Provider card ───────────────────────────────────────── */
.provider-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.25rem;
  display: flex; flex-direction: column; gap: .75rem;
}
.pc-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.pc-name { font-weight: 600; font-size: 1rem; letter-spacing: -.012em; }
.pc-name:hover { color: var(--accent); }
.pc-count { color: var(--text-mute); font-size: .8125rem; white-space: nowrap; }
.pc-tagline { color: var(--text-dim); font-size: .875rem; }
.pc-facts { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .25rem; font-size: .8125rem; color: var(--text-mute); }
.provider-card .btn { margin-block-start: auto; align-self: flex-start; }

/* ── Compare tray ────────────────────────────────────────── */
.compare-tray {
  position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 40;
  background: var(--surface); border-block-start: 1px solid var(--border-2);
  padding-block: .75rem;
  box-shadow: 0 -4px 20px rgba(0,0,0,.2);
}
.tray-inner { display: flex; align-items: center; gap: .75rem; }
.tray-count {
  inline-size: 26px; block-size: 26px; display: grid; place-items: center;
  background: var(--btn-fill, var(--accent)); color: #fff; border-radius: 50%;
  font-size: .8125rem; font-weight: 700;
}
.tray-label { font-weight: 600; font-size: .9375rem; }
.compare-tray .btn:first-of-type { margin-inline-start: auto; }

/* ── Error pages ─────────────────────────────────────────── */
.error-page { text-align: center; padding-block: clamp(4rem, 12vw, 8rem); }
.error-code {
  font-size: clamp(4rem, 14vw, 8rem); font-weight: 700;
  color: var(--surface-2); line-height: 1; letter-spacing: -.03em;
}
.error-body { color: var(--text-dim); margin-block: .75rem 2rem; }
.error-actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

/* ── Footer ──────────────────────────────────────────────── */
.site-footer {
  background: var(--bg-alt); border-block-start: 1px solid var(--border);
  padding-block: 3rem 1.5rem; margin-block-start: auto;
}
.footer-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
/* Brand column twice as wide, then one column per link group, however many
   there are (3, or 4 when social links are set). Not repeat(auto-fit, ...)
   beside 2fr: auto-repeat cannot share a track list with a flexible track,
   so browsers drop the whole declaration and the footer collapses to one
   column. That shipped once. */
@media (min-width: 720px) {
  .footer-grid { grid-template-columns: minmax(0, 2fr); grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; }
}

.footer-tagline { color: var(--text-dim); font-size: .9375rem; margin-block-start: .75rem; }
.footer-disclaimer { color: var(--text-mute); font-size: .8125rem; margin-block-start: .75rem; max-inline-size: 48ch; }
.footer-col { display: flex; flex-direction: column; gap: .4rem; }
.footer-head { font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-mute); margin-block-end: .3rem; }
.footer-col a { color: var(--text-dim); font-size: .9375rem; }
.footer-col a:hover { color: var(--accent); }

.footer-base {
  margin-block-start: 2.5rem; padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--border);
  color: var(--text-mute); font-size: .8125rem;
}

/* ── Print ───────────────────────────────────────────────── */
/* ── Announcement banner (admin-managed) ─────────────────── */
.announce { background: var(--accent-soft); border-block-end: 1px solid var(--border); }
.announce-inner { padding-block: .6rem; text-align: center; font-size: .9rem; font-weight: 500; }
.announce p, .announce a { color: var(--accent-on-soft); }
.announce a:hover { text-decoration: underline; }
.gtm-noscript { display: none; visibility: hidden; }

/* ── Charts (src/Core/Chart.php) ───────────────────────────
   Marks take the accent; text never does. Grid and axes are hairlines one
   step off the surface. Geometry lives in SVG attributes, never in style
   attributes, because the CSP forbids those. */
.chart { margin: 0; min-inline-size: 0; }
.chart figcaption { margin-block-end: 1rem; }
.chart-title { display: block; font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.01em; color: var(--text); }
.chart-sub { display: block; color: var(--text-dim); font-size: .875rem; margin-block-start: .2rem; }
.chart-note { color: var(--text-mute); font-size: .8125rem; margin-block-start: .75rem; }

.bar-list, .range-list { list-style: none; padding: 0; display: grid; gap: .15rem; }
.bar-row, .range-row, .range-axis-row {
  display: grid; align-items: center; gap: .9rem;
  grid-template-columns: minmax(7.5rem, 11rem) minmax(0, 1fr) 4.75rem;
  padding-block: .3rem; border-radius: 6px;
}
.bar-row:hover, .range-row:hover { background: var(--bg-alt); }
.bar-label { font-size: .875rem; font-weight: 500; color: var(--text); line-height: 1.25; min-inline-size: 0; overflow-wrap: anywhere; }
.bar-label small { display: block; font-weight: 400; font-size: .75rem; color: var(--text-mute); }
a.bar-label:hover { color: var(--accent); }
.bar-track { display: block; min-inline-size: 0; }
.bar-svg { display: block; block-size: 10px; overflow: visible; }
[dir="rtl"] .bar-svg { transform: scaleX(-1); }
.bar-mark { fill: var(--accent); }
.bar-list.has-hl .bar-mark { fill: var(--border-2); }
.bar-list.has-hl .is-hl .bar-mark { fill: var(--accent); }
.bar-row:hover .bar-mark { fill: var(--accent-dim); }
.bar-val { font-size: .8125rem; font-variant-numeric: tabular-nums; color: var(--text-dim); text-align: end; direction: ltr; unicode-bidi: isolate; }
.is-hl .bar-label, .is-hl .bar-val { color: var(--text); font-weight: 600; }

.strip-svg, .range-svg, .range-axis, .col-svg { display: block; overflow: visible; }
.range-svg { block-size: 22px; }
.ax, .tick, .grid { stroke: var(--border); stroke-width: 1; }
.tick { stroke: var(--border-2); }
.tick-label { fill: var(--text-mute); font-size: 11px; font-family: var(--font); font-variant-numeric: tabular-nums; }
.dot { fill: var(--border-2); stroke: var(--bg); stroke-width: 2; }
.section-alt .dot { stroke: var(--bg-alt); }
.chart-panel .dot, .adm-card .dot { stroke: var(--surface); }
.dot-hl { fill: var(--accent); }
.dot-label { fill: var(--text); font-size: 12px; font-weight: 600; font-family: var(--font); }
.range-line { stroke: var(--border-2); stroke-width: 2; stroke-linecap: round; }
.col-mark { fill: var(--accent); }
.col:hover .col-mark { fill: var(--accent-dim); }

.chart-data { margin-block-start: .75rem; font-size: .875rem; }
.chart-data summary { cursor: pointer; color: var(--text-dim); font-size: .8125rem; inline-size: fit-content; }
.chart-data summary:hover { color: var(--accent); }
.chart-data .data-table { margin-block-start: .5rem; font-size: .8125rem; }

.chart-grid { display: grid; gap: clamp(2rem, 5vw, 3rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .chart-grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.chart-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(1rem, 3vw, 1.5rem); min-inline-size: 0; }
.position-charts { display: grid; gap: 1.75rem; margin-block-start: .5rem; }
.providers-chart { margin-block-end: 2rem; }
@media (min-width: 900px) { .compare-charts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
.compare-charts .bar-row { grid-template-columns: minmax(5.5rem, 8rem) minmax(0, 1fr) 4rem; gap: .6rem; }

/* A range label ("$0.18–$4.50") is twice a single value; give it room so it
   never wraps. The axis row must share the same columns to stay aligned. */
.range-row, .range-axis-row { grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr) 7.25rem; }
.range-row .bar-val { white-space: nowrap; }

@media (max-width: 560px) {
  .bar-row { grid-template-columns: minmax(6rem, 8.5rem) minmax(0, 1fr) 4rem; gap: .6rem; }
  .range-row, .range-axis-row { grid-template-columns: minmax(4.5rem, 6rem) minmax(0, 1fr) 6.5rem; gap: .6rem; }
}

@media print {
  .site-header, .site-footer, .compare-tray, .filters, .btn { display: none !important; }
  body { background: #fff; color: #000; }
  .compare-table th, .compare-table td { border-color: #999; }
}

/* ============================================================
   Hub release (Oct 2026): header, market table, badges, panels.
   Same tokens and colour rules as above: the accent marks
   interaction; green/red/amber carry data meaning only.
   ============================================================ */

/* ── Top strip ────────────────────────────────────────────── */
.topstrip { background: var(--bg-alt); border-block-end: 1px solid var(--border); font-size: .8rem; color: var(--text-dim); }
.topstrip-inner { display: flex; align-items: center; justify-content: space-between; gap: .4rem 1rem; min-block-size: 34px; flex-wrap: wrap; padding-block: .25rem; }
.ts-stats { list-style: none; padding: 0; display: flex; gap: 1.25rem; flex-wrap: wrap; }
.ts-stats li { white-space: nowrap; }
.ts-status { display: inline-flex; align-items: center; gap: .4rem; color: var(--text-dim); }
.ts-status:hover { color: var(--text); }
.ts-status .dot { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); }
.ts-status.is-issue .dot { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 22%, transparent); }
.topstrip .lang-switch { margin: 0; padding: 0; border: 0; }
@media (max-width: 640px) { .ts-hide-sm { display: none; } .ts-stats { gap: .8rem; } }

/* ── Header v2 ────────────────────────────────────────────── */
.header-inner { min-block-size: 62px; gap: 1.1rem; }
.hdr-search {
  position: relative; flex: 1 1 260px; max-inline-size: 380px;
  display: flex; align-items: center;
}
.hdr-search .ico { position: absolute; inset-inline-start: .75rem; color: var(--text-mute); pointer-events: none; }
.hdr-search input {
  inline-size: 100%; padding: .55rem .8rem; padding-inline-start: 2.2rem;
  border: 1px solid var(--border); border-radius: 999px; background: var(--bg-alt);
  font-size: .875rem; color: var(--text);
}
.hdr-search input:focus { outline: 0; border-color: var(--accent); background: var(--bg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.site-nav { gap: .1rem; }
.nav-link { padding: .45rem .65rem; font-size: .875rem; white-space: nowrap; }
.nav-cta { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; font-size: .875rem; }

@media (max-width: 1180px) {
  .nav-toggle { display: block; margin-inline-start: auto; }
  .site-nav {
    position: absolute; inset-block-start: 100%; inset-inline: 0;
    flex-direction: column; align-items: stretch;
    background: var(--bg); border-block-end: 1px solid var(--border); box-shadow: var(--shadow-md);
    padding: .75rem 1.25rem 1.25rem; gap: .15rem;
    transform: translateY(-8px); opacity: 0; visibility: hidden; transition: transform .18s ease, opacity .18s ease, visibility .18s;
    max-block-size: calc(100vh - 100px); overflow-y: auto;
  }
  .site-nav.is-open { transform: none; opacity: 1; visibility: visible; }
  .nav-link { padding: .65rem .75rem; font-size: .95rem; }
  .nav-cta { justify-content: center; margin: .5rem 0 0; padding: .7rem; }
}
@media (max-width: 640px) {
  .hdr-search { order: 3; flex-basis: 100%; max-inline-size: none; margin-block-end: .6rem; }
  .header-inner { flex-wrap: wrap; }
}

/* ── Breadcrumbs ──────────────────────────────────────────── */
.crumbs-bar { border-block-end: 1px solid var(--border); }
.crumbs-bar .crumbs { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding-block: .6rem; font-size: .8125rem; color: var(--text-mute); }
.crumbs-bar .crumbs li + li::before { content: "/"; margin-inline-end: .4rem; color: var(--border-2); }
.crumbs-bar a:hover { color: var(--accent); }
.crumbs-bar [aria-current] { color: var(--text-dim); }

/* ── Hero v2 ──────────────────────────────────────────────── */
.hero2 {
  position: relative; overflow: hidden;
  padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(2rem, 5vw, 3rem);
  background:
    radial-gradient(60rem 26rem at 50% -8rem, color-mix(in srgb, var(--accent) 11%, transparent), transparent 70%),
    var(--bg);
  border-block-end: 1px solid var(--border);
}
.hero2-inner { display: grid; gap: 1.4rem; justify-items: center; text-align: center; }
.hero2 h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); font-weight: 650; max-inline-size: 18ch; letter-spacing: -0.03em; }
.hero2 .lead { color: var(--text-dim); font-size: clamp(1rem, 1.6vw, 1.15rem); max-inline-size: 56ch; }
.hero-search { position: relative; inline-size: min(100%, 640px); }
.hero-search .ico { position: absolute; inset-inline-start: 1.1rem; inset-block-start: 50%; transform: translateY(-50%); color: var(--text-mute); }
.hero-search input {
  inline-size: 100%; padding: 1rem 1.2rem; padding-inline-start: 3rem; padding-inline-end: 7.5rem;
  border: 1px solid var(--border-2); border-radius: 14px; background: var(--surface); font-size: 1.02rem;
  box-shadow: var(--shadow-md); color: var(--text);
}
.hero-search input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent), var(--shadow-md); }
.hero-search button {
  position: absolute; inset-inline-end: .45rem; inset-block: .45rem;
  padding: 0 1.1rem; border: 0; border-radius: 10px; background: var(--btn-fill); color: #fff; font-weight: 600; cursor: pointer;
}
.hero-search button:hover { background: var(--btn-fill-hover); }
.cat-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; max-inline-size: 900px; }
.cat-chip {
  display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .8rem;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  font-size: .85rem; font-weight: 500; color: var(--text-dim); transition: border-color .15s, color .15s, background .15s;
}
.cat-chip .ico { color: var(--accent); }
.cat-chip small { color: var(--text-mute); font-variant-numeric: tabular-nums; }
.cat-chip:hover { border-color: var(--accent); color: var(--text); }
.cat-chip.is-active { background: var(--accent-soft); border-color: transparent; color: var(--accent-on-soft); }
.hero2-stats { display: flex; gap: clamp(1.5rem, 5vw, 3.5rem); flex-wrap: wrap; justify-content: center; margin-block-start: .5rem; }
.hero2-stats div { display: grid; }
.hero2-stats dt { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); order: 2; }
.hero2-stats dd { font-size: 1.75rem; font-weight: 650; letter-spacing: -0.02em; }

/* ── Section heads with a link on the side ────────────────── */
.sec-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-block-end: 1.1rem; }
.sec-head h2 { font-size: clamp(1.3rem, 2.2vw, 1.65rem); }
.sec-head p { color: var(--text-dim); margin-block-start: .3rem; font-size: .95rem; }
.sec-link { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; font-weight: 600; color: var(--accent); white-space: nowrap; }
.sec-link:hover { text-decoration: underline; }
[dir="rtl"] .sec-link .ico, [dir="rtl"] .arrow-flip { transform: scaleX(-1); }

/* ── Tabs (category switcher) ─────────────────────────────── */
.tabs { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: thin; border-block-end: 1px solid var(--border); margin-block-end: 1rem; }
.tab { display: inline-flex; align-items: center; gap: .4rem; padding: .6rem .85rem; font-size: .875rem; font-weight: 500; color: var(--text-dim); white-space: nowrap; border-block-end: 2px solid transparent; margin-block-end: -1px; }
.tab .ico { color: var(--text-mute); }
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--accent-on-soft); border-block-end-color: var(--accent); }
.tab.is-active .ico { color: var(--accent); }
.tab small { color: var(--text-mute); font-variant-numeric: tabular-nums; }

/* ── Market table ─────────────────────────────────────────── */
.mkt-wrap { position: relative; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.mkt { inline-size: 100%; border-collapse: collapse; font-size: .9rem; }
.mkt th {
  position: sticky; inset-block-start: 0; background: var(--surface);
  text-align: start; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-mute); padding: .75rem .9rem; border-block-end: 1px solid var(--border); white-space: nowrap;
}
.mkt td { padding: .7rem .9rem; border-block-end: 1px solid var(--border); vertical-align: middle; }
.mkt tbody tr:last-child td { border-block-end: 0; }
.mkt tbody tr { transition: background .12s; }
.mkt tbody tr:hover { background: var(--bg-alt); }
.mkt .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mkt .rank { color: var(--text-mute); font-variant-numeric: tabular-nums; inline-size: 2.5rem; }
.mkt-model { display: flex; align-items: center; gap: .7rem; min-inline-size: 13rem; }
.mkt-model a { font-weight: 600; color: var(--text); }
.mkt-model a:hover { color: var(--accent); }
.mkt-model small { display: block; color: var(--text-mute); font-size: .78rem; font-weight: 400; }
.mkt-model .badges { display: inline-flex; gap: .3rem; margin-inline-start: .35rem; vertical-align: middle; }
.mkt .caps { display: flex; gap: .35rem; color: var(--text-dim); }
.mkt tr.is-retired td { color: var(--text-mute); }
.mkt tr.is-retired .mkt-model a { color: var(--text-dim); }
/* Columns give way by the room the table actually has (the catalogue's
   results column is far narrower than the window), least useful first;
   the model, price, change and compare columns always stay. */
.mkt-wrap { container-type: inline-size; }
@media (max-width: 760px) { .mkt .hide-sm { display: none; } }
.mkt .col-rel { white-space: nowrap; }
@container (max-width: 1000px) { .mkt .col-caps { display: none; } }
@container (max-width: 920px)  { .mkt .col-rel { display: none; } }
@container (max-width: 700px)  { .mkt .col-ctx { display: none; } }
@container (max-width: 560px)  { .mkt .rank { display: none; } .mkt td, .mkt th { padding-inline: .6rem; } }
@container (max-width: 480px)  { .mkt .col-chg { display: none; } .mkt-model { min-inline-size: 0; gap: .5rem; } .mkt .cmp-btn { padding-inline: .45rem; } .mkt td.num .hp { white-space: normal; } .mkt td.num { white-space: normal; } }
/* Live filters: results follow the form, so no Apply button. */
.filters.is-live .filters-actions .btn-primary { display: none; }
.results[aria-busy="true"] { opacity: .55; transition: opacity .15s; }

.mk { flex: none; display: block; border-radius: 7px; font-family: var(--font); }
.mk text { font-family: var(--font); }
.cap { display: inline-flex; color: var(--text-dim); }
.hp { font-weight: 600; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
/* A price, or "old → new", is a left-to-right run even inside Arabic text;
   without isolation the bidi algorithm reorders "$2.00 → $4.00" into
   "4.00 → $2.00$". */
.num-ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.hp.is-last { color: var(--text-mute); font-weight: 500; }

/* Lifecycle pills. Neutral greys for "still works", amber for "going away",
   muted for "gone": these describe state, not good/bad data. */
.lc { display: inline-flex; align-items: center; font-size: .68rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
      padding: .12rem .45rem; border-radius: 5px; border: 1px solid var(--border-2); color: var(--text-dim); white-space: nowrap; }
.lc-preview, .lc-beta { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); color: var(--accent-on-soft); background: var(--accent-soft); }
.lc-deprecated { border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); color: var(--warn); background: color-mix(in srgb, var(--warn) 9%, transparent); }
.lc-retired { color: var(--text-mute); background: var(--surface-2); border-color: transparent; }
.lc-limited { border-style: dashed; }

/* Price movement: data colours, as on a market table. */
.chg { display: inline-flex; align-items: center; gap: .2rem; font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; padding: .1rem .4rem; border-radius: 5px; white-space: nowrap; }
.chg-down { color: var(--ok); background: color-mix(in srgb, var(--ok) 11%, transparent); }
.chg-up   { color: var(--err); background: color-mix(in srgb, var(--err) 10%, transparent); }
.chg-soon { color: var(--warn); background: color-mix(in srgb, var(--warn) 11%, transparent); font-weight: 600; }

/* ── Three-panel lists (new, changed, retiring) ───────────── */
.panels { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .panels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.1rem 1.2rem; min-inline-size: 0; }
.panel h3 { display: flex; align-items: center; gap: .5rem; font-size: 1rem; margin-block-end: .8rem; }
.panel h3 .ico { color: var(--accent); }
.plist { list-style: none; padding: 0; display: grid; }
.plist li { display: flex; align-items: center; gap: .65rem; padding-block: .55rem; border-block-end: 1px solid var(--border); min-inline-size: 0; }
.plist li:last-child { border-block-end: 0; }
.plist .pl-main { flex: 1; min-inline-size: 0; }
.plist .pl-main a { font-weight: 600; font-size: .9rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plist .pl-main a:hover { color: var(--accent); }
.plist .pl-main small { color: var(--text-mute); font-size: .78rem; }
.plist .pl-side { text-align: end; font-size: .8rem; color: var(--text-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.panel .empty-note { color: var(--text-mute); font-size: .875rem; }

/* ── Call-to-action band ──────────────────────────────────── */
.cta-band { background: linear-gradient(135deg, var(--btn-fill), color-mix(in srgb, var(--btn-fill) 70%, #000)); color: #fff; border-radius: 18px; padding: clamp(1.5rem, 4vw, 2.5rem); display: grid; gap: 1rem; align-items: center; }
@media (min-width: 820px) { .cta-band { grid-template-columns: 1fr auto; } }
.cta-band h2 { color: #fff; font-size: clamp(1.3rem, 2.4vw, 1.8rem); }
.cta-band p { color: color-mix(in srgb, #fff 82%, transparent); margin-block-start: .35rem; max-inline-size: 60ch; }
.cta-band .btn-light { background: #fff; color: var(--btn-fill); font-weight: 700; padding: .8rem 1.3rem; border-radius: 10px; display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.cta-band .btn-light:hover { background: color-mix(in srgb, #fff 90%, var(--btn-fill)); }

/* ── Explore cards ────────────────────────────────────────── */
.explore { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.ex-card { display: grid; gap: .5rem; padding: 1.2rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); transition: border-color .15s, transform .15s, box-shadow .15s; }
.ex-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.ex-card .ex-ico { inline-size: 40px; block-size: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-on-soft); }
.ex-card h3 { font-size: 1rem; }
.ex-card p { color: var(--text-dim); font-size: .875rem; }

/* ── FAQ ──────────────────────────────────────────────────── */
.faq { display: grid; gap: .6rem; max-inline-size: 860px; }
.faq details { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.faq summary { cursor: pointer; padding: .9rem 1.1rem; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--text-mute); font-weight: 400; font-size: 1.2rem; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq .faq-a { padding: 0 1.1rem 1rem; color: var(--text-dim); }

/* ── Pager ────────────────────────────────────────────────── */
.pager { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-block-start: 1rem; font-size: .875rem; color: var(--text-dim); }
.pager a { font-weight: 600; color: var(--accent); }
.pager .is-disabled { color: var(--text-mute); pointer-events: none; }

/* ── Key stats grid (model pages, comparisons) ────────────── */
.kstats { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); }
.kstat { border: 1px solid var(--border); border-radius: var(--radius); padding: .8rem .95rem; background: var(--surface); }
.kstat dt { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute); }
.kstat dd { font-size: 1.2rem; font-weight: 650; margin-block-start: .2rem; font-variant-numeric: tabular-nums; }
.kstat dd small { font-size: .78rem; font-weight: 500; color: var(--text-dim); }

[dir="rtl"] .pager .arr { display: inline-block; transform: scaleX(-1); }
.section-tight { padding-block-start: 1.5rem; }
.catalogue .results { min-inline-size: 0; }
.cmp-btn { font-size: .75rem; font-weight: 600; padding: .3rem .6rem; border-radius: 6px; border: 1px solid var(--border-2); background: var(--surface); color: var(--text-dim); cursor: pointer; white-space: nowrap; }
.cmp-btn:hover { border-color: var(--accent); color: var(--accent); }
.cmp-btn.is-on { background: var(--accent-soft); border-color: transparent; color: var(--accent-on-soft); }
.faq-block { margin-block-start: 2.5rem; }

/* ── Step chart (price history) ───────────────────────────── */
.step-body { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: .25rem .5rem; }
.step-y { display: flex; flex-direction: column; justify-content: space-between; block-size: 120px; font-size: .72rem; color: var(--text-mute); text-align: end; font-variant-numeric: tabular-nums; direction: ltr; padding-block: 2px; }
.step-wrap { position: relative; block-size: 120px; }
.step-plot, .step-dots { position: absolute; inset: 0; inline-size: 100%; block-size: 120px; overflow: visible; }
.step-plot .grid { stroke: var(--border); }
.step-plot .today { stroke: var(--border-2); stroke-width: 1; }
.step-line { fill: none; stroke: var(--accent); stroke-width: 2.25; stroke-linejoin: round; }
.step-line.is-future { opacity: .45; }
.step-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.step-dot.is-future { fill: var(--surface); stroke: var(--accent); }
.step-x { display: flex; justify-content: space-between; font-size: .72rem; color: var(--text-mute); padding-block-start: .3rem; }
[dir="rtl"] .step-wrap, [dir="rtl"] .step-x { transform: scaleX(-1); }
[dir="rtl"] .step-x span { display: inline-block; transform: scaleX(-1); }
.history-grid { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .history-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Model detail ─────────────────────────────────────────── */
.model-hero { display: block; }
.mh-top { display: flex; align-items: center; gap: 1rem; }
.mh-top .mk { border-radius: 14px; }
.mh-id h1 { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: clamp(1.6rem, 3.6vw, 2.4rem); }
.mh-id h1 .lc { font-size: .72rem; }
.mh-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; color: var(--text-dim); font-size: .92rem; margin-block-start: .25rem; }
.mh-meta a { color: var(--text-dim); font-weight: 600; }
.mh-meta a:hover { color: var(--accent); }
.mh-cat { display: inline-flex; align-items: center; gap: .3rem; }
.mh-cat .ico { color: var(--accent); }
.mh-summary { max-inline-size: 75ch; color: var(--text-dim); font-size: 1.02rem; margin-block: 1rem; }
.model-hero .notice { margin-block: 0 1rem; max-inline-size: 75ch; }
.model-hero .notice p + p { margin-block-start: .35rem; }
.mh-stats { margin-block-start: 1.25rem; }
.kstat-lead dd { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.detail-side .panel + .panel { margin-block-start: 1rem; }
.detail-side .h-xs { margin-block: 1rem .5rem; }
.d-block { display: block; }
.price-table th[scope="row"] { font-weight: 500; }
.detail-main > .h-sm { margin-block: 2rem .75rem; }
.detail-main > .h-sm:first-child { margin-block-start: 0; }
.alt-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.alt-card { display: grid; gap: .6rem; align-content: start; padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.alt-top { display: flex; gap: .65rem; align-items: center; min-inline-size: 0; }
.alt-id { min-inline-size: 0; }
.alt-id a { font-weight: 650; color: var(--text); display: block; }
.alt-id a:hover { color: var(--accent); }
.alt-id small { color: var(--text-mute); font-size: .8rem; }
.alt-price { font-size: 1.05rem; }
@media (min-width: 900px) { .model-detail .detail-grid { grid-template-columns: minmax(0, 1fr) 320px; } }
.model-detail .detail-side { background: none; border: 0; padding: 0; }
.mkt tbody th[scope="row"] { text-transform: none; letter-spacing: 0; font-size: .9rem; font-weight: 500; color: var(--text); position: static; white-space: normal; padding: .7rem .9rem; border-block-end: 1px solid var(--border); background: none; }
.mkt tbody tr:last-child th { border-block-end: 0; }
.mkt tbody th small { font-size: .78rem; font-weight: 400; }
.kstat-lead { grid-column: span 2; }
@media (max-width: 480px) { .kstat-lead { grid-column: auto; } }

/* ── A vs B ───────────────────────────────────────────────── */
.vs-faces { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-block-end: 1.1rem; }
.vs-face { display: inline-flex; align-items: center; gap: .7rem; padding: .55rem .9rem .55rem .55rem; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); }
.vs-face:hover { border-color: var(--accent); }
.vs-face .mk { border-radius: 11px; }
.vs-face strong { display: block; font-size: 1.05rem; }
.vs-face small { color: var(--text-mute); font-size: .8rem; }
.vs-x { font-weight: 700; color: var(--text-mute); text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; }
.vs-hero h1 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); max-inline-size: 30ch; }
.vs-grid { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .vs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vs-verdict ul { display: grid; gap: .55rem; padding-inline-start: 1.1rem; margin-block: .5rem 1rem; color: var(--text-dim); }
.vs-verdict h2 { display: flex; align-items: center; gap: .4rem; margin-block-start: 0; }
.vs-verdict h2 .ico { color: var(--accent); }
.vs-table td { min-inline-size: 10rem; }
.vs-table thead th:not(:first-child) { color: var(--text); font-size: .8rem; }
.pair-list { list-style: none; padding: 0; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.pair-list a { display: flex; align-items: center; gap: .35rem; padding: .7rem .85rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font-weight: 600; font-size: .9rem; }
.pair-list a:hover { border-color: var(--accent); color: var(--accent); }
.pair-list a span { margin-inline-start: .35rem; min-inline-size: 0; }
.pair-list .mk + .mk { margin-inline-start: -.55rem; box-shadow: 0 0 0 2px var(--surface); border-radius: 7px; }

/* ── Cost calculator ──────────────────────────────────────── */
.calc { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) { .calc { grid-template-columns: 320px minmax(0, 1fr); } .calc-form { position: sticky; inset-block-start: 5rem; } }
.calc-form { display: grid; gap: .9rem; }
.calc-form .field { display: grid; gap: .3rem; }
.calc-form label { font-size: .85rem; font-weight: 600; color: var(--text-dim); }
.calc-form input[type="number"] { inline-size: 100%; padding: .6rem .75rem; border: 1px solid var(--border-2); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 1rem; font-variant-numeric: tabular-nums; }
.calc-form input[type="number"]:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.calc-form .check { display: flex; gap: .5rem; align-items: center; font-weight: 500; }
.calc-form .btn { justify-content: center; }
.calc-presets { display: grid; gap: .45rem; border-block-start: 1px solid var(--border); padding-block-start: .9rem; }
.preset { display: grid; padding: .55rem .75rem; border: 1px solid var(--border); border-radius: 8px; color: var(--text); }
.preset:hover { border-color: var(--accent); }
.preset strong { font-size: .88rem; }
.preset small { color: var(--text-mute); font-size: .78rem; }
.calc-results { display: grid; gap: 1.25rem; min-inline-size: 0; }
.calc-results .h-sm { margin: 0; }
.mkt tr.is-hl td { background: var(--accent-soft); }
@media (max-width: 760px) { .calc .mkt-model { min-inline-size: 0; } .calc .mkt td, .calc .mkt th { padding-inline: .55rem; } }

/* ── Timeline ─────────────────────────────────────────────── */
.feed-links { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-block-start: .8rem; }
.tl-filter { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-block-end: 1.5rem; font-size: .9rem; }
.tl-filter select { padding: .45rem .6rem; border: 1px solid var(--border-2); border-radius: 8px; background: var(--surface); color: var(--text); }
.tl-month { font-size: 1.05rem; margin-block: 2rem .9rem; color: var(--text-dim); font-weight: 650; }
.tl-month.tl-up { color: var(--warn); }
.tl { list-style: none; padding: 0; margin: 0; border-inline-start: 2px solid var(--border); margin-inline-start: .9rem; display: grid; gap: .9rem; }
.tl-item { position: relative; display: flex; gap: .9rem; padding-inline-start: 1.6rem; }
.tl-ico { position: absolute; inset-inline-start: -1rem; inset-block-start: .1rem; inline-size: 30px; block-size: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--border); color: var(--text-dim); }
.tl-release .tl-ico { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.tl-price_change .tl-ico { color: var(--ok); }
.tl-retirement .tl-ico, .tl-scheduled_retirement .tl-ico { color: var(--warn); }
.tl-body { min-inline-size: 0; flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem 1rem; }
.tl-meta { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; font-size: .78rem; color: var(--text-mute); }
.tl-meta span { display: inline-flex; align-items: center; gap: .35rem; }
.tl-tag { font-weight: 700; letter-spacing: .05em; text-transform: uppercase; font-size: .68rem; color: var(--text-dim); }
.tl-body h3 { font-size: .98rem; margin-block: .3rem .15rem; }
.tl-body h3 a { color: var(--text); }
.tl-body h3 a:hover { color: var(--accent); }
.tl-text { color: var(--text-dim); font-size: .88rem; }
.tl-src { font-size: .82rem; font-weight: 600; color: var(--accent); }
.tl-changes { list-style: none; padding: 0; display: grid; gap: .2rem; font-size: .86rem; color: var(--text-dim); }
.tl-price_group .tl-ico { color: var(--ok); }
.tl-group summary { cursor: pointer; color: var(--text-dim); font-size: .88rem; }
.tl-glist { list-style: none; padding: 0; margin-block-start: .5rem; display: grid; gap: .55rem; }
.tl-glist > li > a { font-weight: 600; font-size: .88rem; }

/* ── Glossary ─────────────────────────────────────────────── */
.gl-search { margin-block-start: 1.2rem; }
.gl-topics { justify-content: flex-start; margin-block-end: 1rem; }
.gl-letters { display: flex; flex-wrap: wrap; gap: .25rem; margin-block-end: 1rem; }
.gl-letters a { min-inline-size: 2rem; text-align: center; padding: .3rem .4rem; border-radius: 6px; font-weight: 600; font-size: .85rem; color: var(--text-dim); border: 1px solid var(--border); background: var(--surface); }
.gl-letters a:hover { border-color: var(--accent); color: var(--accent); }
.gl-letter { font-size: 1.3rem; margin-block: 1.8rem .7rem; color: var(--accent-on-soft); scroll-margin-block-start: 5rem; }
.gl-grid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.gl-card { display: grid; gap: .3rem; align-content: start; padding: .9rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); transition: border-color .15s; }
.gl-card:hover { border-color: var(--accent); }
.gl-card strong { font-size: 1rem; }
.gl-def { color: var(--text-dim); font-size: .86rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gl-topic { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-on-soft); }
.gl-head h1 { margin-block: .3rem .2rem; }
.gl-short { font-size: 1.12rem; color: var(--text); }
.gl-example { margin-block: 1.5rem; }
.gl-example .h-xs { margin-block: 0 .4rem; }
.gl-example p { color: var(--text-dim); }
.gl-langs, .gl-rel { list-style: none; padding: 0; display: grid; gap: .6rem; }
.gl-langs li, .gl-rel li { display: grid; }
.gl-langs a, .gl-rel a { font-weight: 600; }
.gl-langs small, .gl-rel small { color: var(--text-mute); font-size: .8rem; }
.gl-detail .detail-side { background: none; border: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 900px) { .gl-detail { grid-template-columns: minmax(0, 1fr) 320px; } }

/* ── Tools ────────────────────────────────────────────────── */
.tool-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.tool-card { display: grid; gap: .6rem; align-content: start; grid-template-rows: auto auto 1fr auto auto; padding: 1.1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.tool-card.is-featured { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.tool-card h2 { font-size: 1.02rem; }
.tool-tag { font-weight: 500; }
.tool-desc { color: var(--text-dim); font-size: .87rem; }
.tool-meta { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.tool-prov { font-size: .78rem; color: var(--text-dim); }
.tool-prov:hover { color: var(--accent); }
.tool-visit { justify-self: start; display: inline-flex; gap: .3rem; align-items: center; }
.lc-price-free, .lc-price-open_source { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--border)); }

/* ── Status ───────────────────────────────────────────────── */
.st-banner { display: inline-flex; align-items: center; gap: .55rem; margin-block-start: 1rem; padding: .55rem .9rem; border-radius: 10px; font-weight: 600; }
.st-banner.is-ok { background: color-mix(in srgb, var(--ok) 11%, transparent); color: var(--ok); }
.st-banner.is-issue { background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--warn); }
.st-banner .dot, .st-ind .dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: currentColor; }
.st-list { list-style: none; padding: 0; display: grid; gap: .8rem; }
.st-row { padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); display: grid; gap: .65rem; }
.st-head { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.st-name { font-weight: 650; color: var(--text); flex: 1; }
.st-ind { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 600; padding: .2rem .55rem; border-radius: 6px; }
.st-ind.st-none { color: var(--ok); background: color-mix(in srgb, var(--ok) 11%, transparent); }
.st-ind.st-minor, .st-ind.st-maintenance { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.st-ind.st-major, .st-ind.st-critical { color: var(--err); background: color-mix(in srgb, var(--err) 11%, transparent); }
.st-ind.st-unknown { color: var(--text-mute); background: var(--surface-2); }
.st-bars { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 2px; block-size: 26px; }
.st-day { border-radius: 3px; background: var(--surface-2); }
.st-day.st-none { background: var(--ok); opacity: .75; }
.st-day.st-minor, .st-day.st-maintenance { background: var(--warn); }
.st-day.st-major, .st-day.st-critical { background: var(--err); }
.st-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; font-size: .78rem; color: var(--text-mute); }
.st-inc { list-style: none; padding: 0; font-size: .86rem; display: grid; gap: .25rem; }
.st-link { font-size: .82rem; font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: .25rem; justify-self: start; }
[dir="rtl"] .st-link .ico, [dir="rtl"] .tool-visit .ico, [dir="rtl"] .alt-card .sec-link .ico { transform: scaleX(-1); }
[dir="rtl"] .st-bars { direction: ltr; }
.prov-cat { display: flex; align-items: center; gap: .5rem; font-size: 1.1rem; margin-block: 2rem .8rem; scroll-margin-block-start: 5rem; }
.prov-cat .ico { color: var(--accent); }
.prov-cat small { color: var(--text-mute); font-weight: 500; font-size: .85rem; }
.mh-pills { margin-block-start: 1rem; }
.kstat a.st-ind { text-decoration: none; }
.pc-name { display: inline-flex; align-items: center; gap: .6rem; }
.chg { white-space: nowrap; }
.pl-tag { display: inline-block; font-size: .64rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .05rem .35rem; border-radius: 4px; margin-inline-end: .35rem; color: var(--text-dim); background: var(--surface-2); }
.pl-tag.is-soon { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.bench-table td.num { min-inline-size: 7rem; }
.bench-val { display: block; font-weight: 650; font-variant-numeric: tabular-nums; }
.bench-bar { display: block; inline-size: 100%; max-inline-size: 7rem; block-size: 4px; margin-block-start: .3rem; margin-inline-start: auto; }
.bb-track { fill: var(--surface-2); }
.bb-fill { fill: var(--accent); }
[dir="rtl"] .bench-bar { transform: scaleX(-1); }

/* ── Search suggestions ───────────────────────────────────── */
.has-suggest { position: relative; }
.suggest {
  position: absolute; inset-inline: 0; inset-block-start: calc(100% + 6px); z-index: 60;
  min-inline-size: min(26rem, 92vw); max-block-size: min(70vh, 30rem); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border-2); border-radius: 12px; box-shadow: var(--shadow-md); padding: .35rem;
  text-align: start;
}
.sg-head { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute); padding: .55rem .6rem .25rem; }
.sg-item { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: 8px; color: var(--text); text-decoration: none; }
.sg-item:hover, .sg-item.is-active { background: var(--accent-soft); color: var(--accent-on-soft); }
.sg-item .mk { flex: none; border-radius: 6px; }
.sg-ico { flex: none; inline-size: 24px; block-size: 24px; display: grid; place-items: center; border-radius: 6px; background: var(--surface-2); color: var(--text-dim); font-size: .8rem; }
.sg-main { flex: 1; min-inline-size: 0; display: grid; }
.sg-label { font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-sub { font-size: .76rem; color: var(--text-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-meta { flex: none; font-size: .78rem; font-weight: 600; color: var(--text-dim); direction: ltr; unicode-bidi: isolate; }
.sg-none { padding: .7rem .6rem; color: var(--text-mute); font-size: .85rem; }
.sg-all { border-block-start: 1px solid var(--border); border-radius: 0 0 8px 8px; margin-block-start: .3rem; font-weight: 600; font-size: .85rem; color: var(--accent); justify-content: center; }
.hero-search .suggest { min-inline-size: 100%; }
.calc-side { display: grid; gap: 1rem; align-content: start; min-inline-size: 0; }
@media (min-width: 960px) { .calc-form { position: static; } .calc-side { position: sticky; inset-block-start: 5rem; max-block-size: calc(100vh - 6rem); overflow-y: auto; } }
.tok-panel summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: .45rem; font-size: .92rem; }
.tok-panel summary .ico { color: var(--accent); }
.tok-form { display: grid; gap: .8rem; margin-block-start: .9rem; }
.tok-form .field { display: grid; gap: .3rem; }
.tok-form label { font-size: .82rem; font-weight: 600; color: var(--text-dim); }
.tok-form textarea, .tok-form input[type="number"] { inline-size: 100%; padding: .55rem .7rem; border: 1px solid var(--border-2); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: .92rem; resize: vertical; }
.tok-row { display: grid; gap: .8rem; grid-template-columns: 1fr 1fr; }
.tok-live { font-weight: 600; color: var(--accent-on-soft); min-block-size: 1.3em; font-variant-numeric: tabular-nums; }
.calc-form label, .tok-form label { text-transform: none; letter-spacing: 0; font-size: .84rem; }

/* ── Report an error ──────────────────────────────────────── */
.report-sec { padding-block: 1.5rem; }
.report-panel { max-inline-size: 760px; }
.report-panel summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: .45rem; font-size: .92rem; color: var(--text-dim); }
.report-panel summary .ico { color: var(--warn); }
.report-form { display: grid; gap: .85rem; margin-block-start: .9rem; }
.report-form .field { display: grid; gap: .3rem; }
.report-form label { font-size: .84rem; font-weight: 600; color: var(--text-dim); }
.report-form select, .report-form textarea, .report-form input:not([type="hidden"]) {
  inline-size: 100%; padding: .55rem .7rem; border: 1px solid var(--border-2); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: .92rem; }
.report-form button { justify-self: start; }
.hp-field { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.notice-ok { border-color: color-mix(in srgb, var(--ok) 40%, var(--border)); background: color-mix(in srgb, var(--ok) 9%, transparent); color: var(--text); max-inline-size: 760px; }
.pair-group { border-block-end: 1px solid var(--border); padding-block: .8rem; }
.pair-group summary { cursor: pointer; display: flex; align-items: center; gap: .5rem; font-weight: 650; font-size: 1rem; list-style: none; }
.pair-group summary::-webkit-details-marker { display: none; }
.pair-group summary::after { content: "+"; margin-inline-start: auto; color: var(--text-mute); font-weight: 400; font-size: 1.2rem; }
.pair-group[open] summary::after { content: "−"; }
.pair-group summary .ico { color: var(--accent); }
.pair-group summary small { color: var(--text-mute); font-weight: 500; }
.pair-group .pair-list { margin-block-start: .8rem; }
.st-why { font-size: .84rem; color: var(--text-mute); margin: 0; }

/* ── Selects ──────────────────────────────────────────────────
 * Native selects (no JavaScript): own chevron, inset from the edge. */
select:not([multiple]) {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 12px; background-position: right .85rem center;
  padding-inline-end: 2.4rem !important; cursor: pointer;
}
[dir="rtl"] select:not([multiple]) { background-position: left .85rem center; }

/* Enhanced select: a button and a searchable list (assets/js/app.js). */
.xsel { position: relative; inline-size: 100%; }
.xsel-native { position: absolute !important; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.xsel-btn {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem; inline-size: 100%;
  padding: .55rem .85rem; border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--surface);
  color: var(--text); font: inherit; font-size: .92rem; text-align: start; cursor: pointer; min-block-size: 2.5rem;
}
.xsel-btn:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border-2)); }
.xsel-btn:focus-visible, .xsel.is-open .xsel-btn { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.xsel-btn .xsel-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xsel-btn .ico { flex: none; color: var(--text-mute); transition: transform .15s; }
.xsel.is-open .xsel-btn .ico { transform: rotate(180deg); }
.xsel-pop {
  position: absolute; z-index: 70; inset-inline: 0; inset-block-start: calc(100% + 6px); min-inline-size: 14rem;
  background: var(--surface); border: 1px solid var(--border-2); border-radius: 12px; box-shadow: var(--shadow-md); padding: .4rem;
}
.xsel.is-up .xsel-pop { inset-block-start: auto; inset-block-end: calc(100% + 6px); }
.xsel input.xsel-search {
  inline-size: 100%; padding: .5rem .7rem; padding-inline-start: 2rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat .65rem center;
  font: inherit; font-size: .88rem; color: var(--text); margin-block-end: .35rem;
}
[dir="rtl"] .xsel input.xsel-search { background-position: right .65rem center; }
.xsel input.xsel-search:focus { outline: none; border-color: var(--accent); }
.xsel-list { list-style: none; margin: 0; padding: 0; max-block-size: 16rem; overflow-y: auto; }
.xsel-opt { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem .65rem; border-radius: 7px; font-size: .9rem; cursor: pointer; color: var(--text); }
.xsel-opt.is-active { background: var(--accent-soft); color: var(--accent-on-soft); }
.xsel-opt[aria-selected="true"] { font-weight: 600; }
.xsel-opt[aria-selected="true"]::after { content: ""; inline-size: .45rem; block-size: .8rem; border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-2px, -2px); flex: none; }
.xsel-opt[hidden] { display: none; }
.xsel-none { padding: .6rem; font-size: .85rem; color: var(--text-mute); }
.sort-form .xsel { inline-size: auto; min-inline-size: 11rem; }
.tl-filter .xsel { inline-size: auto; min-inline-size: 13rem; }

/* ── Accounts ─────────────────────────────────────────────── */
.auth-sec { padding-block: clamp(2rem, 6vw, 4rem); }
.auth-card { max-inline-size: 26rem; margin-inline: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(1.25rem, 4vw, 2rem); box-shadow: var(--shadow-md); }
.auth-card h1 { font-size: 1.6rem; margin-block-end: .4rem; }
.auth-form { display: grid; gap: .9rem; margin-block-start: 1rem; }
.auth-form .field > label { text-transform: none; letter-spacing: 0; font-size: .86rem; }
.auth-form input[type="email"], .auth-form input[type="password"], .auth-form input[type="text"] {
  inline-size: 100%; padding: .6rem .75rem; border: 1px solid var(--border-2); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; }
.auth-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.auth-form .btn { justify-self: stretch; justify-content: center; }
.auth-links { font-size: .86rem; text-align: center; }
.auth-alt { text-align: center; font-size: .9rem; margin-block-start: 1.2rem; color: var(--text-dim); }
.auth-alt a, .auth-links a { color: var(--accent); font-weight: 600; }
.acct-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; }
.acct-grid { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .acct-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .acct-wide { grid-column: 1 / -1; } }
.acct-grid .h-sm { margin-block: 0 .8rem; display: flex; align-items: center; gap: .4rem; }
.acct-plan-name { font-size: 1.6rem; font-weight: 700; margin-block-end: .4rem; }
.meter-list { list-style: none; padding: 0; display: grid; gap: .9rem; }
.meter-top { display: flex; justify-content: space-between; gap: 1rem; font-size: .88rem; }
.meter-top span:last-child { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.meter { display: block; inline-size: 100%; block-size: 6px; margin-block-start: .35rem; }
.m-track { fill: var(--surface-2); } .m-fill { fill: var(--accent); } .m-fill.is-high { fill: var(--warn); }
[dir="rtl"] .meter { transform: scaleX(-1); }
code.secret { display: block; padding: .55rem .7rem; border-radius: 8px; background: var(--bg-alt); border: 1px solid var(--border); font-size: .82rem; word-break: break-all; direction: ltr; text-align: start; margin-block: .3rem .6rem; }
.feed-urls { list-style: none; padding: 0; display: grid; gap: .3rem; }
.feed-urls span { font-size: .82rem; font-weight: 600; color: var(--text-dim); }
.btn-danger { background: var(--err); color: #fff; border: 0; }
.btn-danger:hover { filter: brightness(.92); }
.btn.is-static { cursor: default; pointer-events: none; }
/* Plans */
.plan-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); margin-block-end: 2.5rem; }
.plan-card { display: flex; flex-direction: column; gap: .6rem; padding: 1.4rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.plan-card.is-featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-md); }
.plan-card.is-current { background: var(--accent-soft); }
.plan-card h2 { font-size: 1.25rem; }
.plan-price { font-size: 1.6rem; font-weight: 700; }
.plan-desc { color: var(--text-dim); font-size: .9rem; }
.plan-feats { list-style: none; padding: 0; display: grid; gap: .45rem; font-size: .88rem; align-content: start; flex: 1; margin-block: .4rem; }
.plan-feats li { display: flex; gap: .45rem; align-items: baseline; }
.plan-feats li .ico { color: var(--accent); flex: none; transform: translateY(2px); }
.plan-feats li.is-off { color: var(--text-mute); }
.plan-cta { display: grid; gap: .4rem; }
.plan-cta .btn { justify-content: center; }
.plan-table td.num { white-space: nowrap; }
.ts-right { display: flex; align-items: center; gap: 1rem; }
.ts-account { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; color: var(--accent); white-space: nowrap; }
.ts-account:hover { text-decoration: underline; }
.tier-badge { display: inline-block; font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .08rem .35rem; border-radius: 4px; color: var(--accent-on-soft); background: var(--accent-soft); vertical-align: middle; margin-inline-start: .3rem; }
.gate { display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem 1.4rem; border-radius: var(--radius-lg); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); background: var(--accent-soft); }
.gate-ico { flex: none; inline-size: 44px; block-size: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--surface); color: var(--accent); }
.gate h3 { font-size: 1.05rem; margin-block-end: .3rem; color: var(--text); }
.gate p { color: var(--text-dim); }
.gate-cta { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-start: .9rem; }
.calc-left { text-align: center; margin: 0; }
.wizard-gate { max-inline-size: 760px; margin: 0 auto 2rem; }
.compare-gate { margin-block-end: 1.25rem; }
.toast { position: fixed; inset-inline: 1rem; inset-block-end: 1rem; margin-inline: auto; max-inline-size: 30rem; z-index: 90;
  background: var(--text); color: var(--bg); padding: .8rem 1rem; border-radius: 10px; box-shadow: var(--shadow-md); font-size: .9rem;
  transform: translateY(150%); opacity: 0; transition: transform .2s, opacity .2s; }
.toast.is-on { transform: none; opacity: 1; }
.toast a { color: inherit; font-weight: 700; text-decoration: underline; }
.fav-form { display: contents; }
.fav-btn { display: inline-flex; align-items: center; gap: .4rem; }
.fav-btn.is-on { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--border-2)); }
.fav-btn.is-on .star { fill: currentColor; }

/* ── MCP directory ────────────────────────────────────────── */
.mcp-filters { display: flex; flex-wrap: wrap; gap: .8rem 1rem; align-items: end; margin-block: .5rem 1.5rem; }
.mcp-filters .field { min-inline-size: 12rem; }
.mcp-filters .field > label { text-transform: none; letter-spacing: 0; font-size: .82rem; }
.mcp-filters .check { padding-block-end: .55rem; }
.mcp-h { margin-block: .5rem .8rem; display: flex; align-items: center; gap: .4rem; }
.mcp-count { margin-block: 1.5rem .8rem; }
.mcp-grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.mcp-card { display: grid; gap: .55rem; align-content: start; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); min-inline-size: 0; transition: border-color .15s, box-shadow .15s; }
.mcp-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
.mcp-card.is-featured { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.mcp-top { display: flex; gap: .65rem; align-items: center; min-inline-size: 0; }
.mcp-id { display: grid; min-inline-size: 0; }
.mcp-id strong { font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcp-id small { color: var(--accent); font-family: var(--mono); font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: start; }
.mcp-desc { color: var(--text-dim); font-size: .86rem; }
.mcp-tags { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.mcp-date { margin-inline-start: auto; font-size: .74rem; color: var(--text-mute); }
.mcp-detail { max-inline-size: 900px; }
.mcp-install { margin-block-end: 1rem; display: grid; gap: .7rem; }
.mcp-install-head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.mcp-install-head .btn { margin-inline-start: auto; }
.mcp-install-head code, .mh-meta code { font-size: .8rem; direction: ltr; }
pre.code { margin: 0; padding: .9rem 1rem; border-radius: 10px; background: var(--bg-alt); border: 1px solid var(--border); overflow-x: auto; font-size: .82rem; line-height: 1.55; direction: ltr; text-align: left; }
.mcp-env { list-style: none; padding: 0; display: grid; gap: .4rem; font-size: .86rem; }
.mcp-env li { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }

/* ── Directory pages (MCP, tools, glossary) ───────────────── */
.dir-hero {
  padding-block: clamp(1.75rem, 5vw, 3rem);
  background: radial-gradient(48rem 18rem at 85% -4rem, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%), var(--bg-alt);
  border-block-end: 1px solid var(--border);
}
.dir-hero-inner { display: grid; gap: 1.5rem; align-items: end; }
@media (min-width: 960px) { .dir-hero-inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 3rem; } }
.dir-hero h1 { font-size: clamp(1.75rem, 4.2vw, 2.6rem); letter-spacing: -0.025em; line-height: 1.1; }
.dir-lead { color: var(--text-dim); font-size: clamp(.95rem, 1.5vw, 1.05rem); margin-block: .6rem 0; max-inline-size: 56ch; }
.dir-stats { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem .5rem; }
.dir-stats li { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 500; color: var(--text-dim);
  padding: .3rem .65rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); }
.dir-stats .ico { color: var(--accent); }
.dir-search { display: flex; gap: .5rem; padding: .4rem; background: var(--surface); border: 1px solid var(--border-2); border-radius: 14px; box-shadow: var(--shadow-md); }
.dir-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent), var(--shadow-md); }
.dir-search-box { flex: 1; display: flex; align-items: center; gap: .55rem; padding-inline: .6rem; min-inline-size: 0; color: var(--text-mute); }
.dir-search input { flex: 1; min-inline-size: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 1rem; color: var(--text); padding-block: .55rem; }
.dir-search .btn { flex: none; border-radius: 10px; }

.dir-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding-block: 1.5rem 3rem; }
.dir-side { min-inline-size: 0; }
@media (min-width: 960px) {
  .dir-layout { grid-template-columns: 15.5rem minmax(0, 1fr); gap: 2.25rem; padding-block-start: 2rem; }
  .dir-side { position: sticky; inset-block-start: 5.5rem; align-self: start; max-block-size: calc(100vh - 7rem); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
}
.dir-main { min-inline-size: 0; }
.dir-nav-head { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); margin: 0 0 .5rem; padding-inline: .7rem; }
.dir-nav ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.dir-nav-item { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border-radius: 9px; color: var(--text-dim); font-size: .9rem; font-weight: 500; }
.dir-nav-item .ico { flex: none; color: var(--text-mute); }
.dir-nav-item:hover { background: var(--surface-2); color: var(--text); }
.dir-nav-item.is-active { background: var(--accent-soft); color: var(--accent-on-soft); font-weight: 600; }
.dir-nav-item.is-active .ico { color: var(--accent); }
.dn-label { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dn-count { flex: none; font-size: .75rem; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.dir-nav-item.is-active .dn-count { color: var(--accent-on-soft); }

/* Phones and tablets: the category list becomes one swipeable row. */
@media (max-width: 959px) {
  .dir-side { margin-inline: -16px; }
  .dir-nav-head { display: none; }
  .dir-nav ul { display: flex; gap: .45rem; overflow-x: auto; padding: .1rem 16px .4rem; scroll-snap-type: x proximity; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%); }
  .dir-nav ul::-webkit-scrollbar { display: none; }
  .dir-nav li { flex: none; scroll-snap-align: start; }
  .dir-nav-item { padding: .45rem .8rem; border: 1px solid var(--border); background: var(--surface); border-radius: 999px; font-size: .85rem; white-space: nowrap; }
  .dir-nav-item.is-active { border-color: transparent; }
  .dn-label { overflow: visible; }
}

.dir-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-block-end: 1rem; }
.dir-count { font-size: .95rem; color: var(--text-dim); }
.dir-count strong { color: var(--text); }
.dir-count a { color: var(--accent); font-weight: 600; margin-inline-start: .4rem; }
.dir-count small { color: var(--text-mute); }
.dir-controls { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.dir-controls .xsel { inline-size: auto; min-inline-size: 10.5rem; }
.dir-controls select { min-inline-size: 10.5rem; padding: .5rem .8rem; border: 1px solid var(--border-2); border-radius: var(--radius); background-color: var(--surface); color: var(--text); font: inherit; font-size: .9rem; }
.dir-controls .xsel-btn { padding-block: .45rem; min-block-size: 2.35rem; font-size: .88rem; }
.dir-check { display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem; padding: .45rem .75rem; border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--surface); cursor: pointer; white-space: nowrap; }
.dir-check input { accent-color: var(--accent); }
@media (max-width: 600px) {
  .dir-controls { inline-size: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .dir-controls .xsel, .dir-controls select { min-inline-size: 0; inline-size: 100%; }
  .dir-check { grid-column: 1 / -1; justify-content: center; }
}
/* Tools cards, directory version */
.tool-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.tool-card { display: flex; flex-direction: column; gap: .55rem; padding: 1.1rem 1.15rem; transition: border-color .15s, box-shadow .15s; }
.tool-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: var(--shadow-md); }
.tool-top { display: flex; align-items: center; gap: .7rem; }
.tool-top .mk { border-radius: 10px; }
.tool-id { flex: 1; min-inline-size: 0; }
.tool-id h2 { font-size: 1rem; line-height: 1.25; }
.tool-id small { color: var(--text-mute); font-size: .78rem; }
.tool-top .lc { flex: none; }
.tool-tag { font-weight: 500; font-size: .93rem; }
.tool-desc { color: var(--text-dim); font-size: .86rem; flex: 1; }
.tool-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; padding-block-start: .7rem; border-block-start: 1px solid var(--border); margin-block-start: auto; font-size: .8rem; }
.tool-cat { display: inline-flex; align-items: center; gap: .3rem; color: var(--text-dim); font-weight: 500; }
.tool-cat .ico { color: var(--accent); }
.tool-cat:hover { color: var(--accent); }
.tool-visit { margin-inline-start: auto; display: inline-flex; align-items: center; gap: .25rem; font-weight: 600; color: var(--accent); }
[dir="rtl"] .tool-visit .ico { transform: scaleX(-1); }
/* Glossary, directory version */
.page-glossary .gl-letters { position: sticky; inset-block-start: 4.6rem; z-index: 5; display: flex; gap: .2rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  padding: .45rem; margin-block-end: .5rem; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px);
  border: 1px solid var(--border); border-radius: 12px; }
.page-glossary .gl-letters::-webkit-scrollbar { display: none; }
.page-glossary .gl-letters a { flex: none; min-inline-size: 2rem; padding: .3rem .45rem; border: 0; background: none; border-radius: 7px; text-align: center; font-size: .85rem; font-weight: 600; color: var(--text-dim); }
.page-glossary .gl-letters a:hover { background: var(--accent-soft); color: var(--accent-on-soft); }
.gl-group { scroll-margin-block-start: 8rem; }
.gl-group .gl-letter { display: flex; align-items: center; gap: .75rem; font-size: 1.15rem; margin-block: 1.6rem .7rem; color: var(--text); }
.gl-group .gl-letter::after { content: ""; flex: 1; block-size: 1px; background: var(--border); }
.gl-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); }
.gl-card { gap: .35rem; transition: border-color .15s, box-shadow .15s, transform .15s; }
.gl-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.gl-topic { display: inline-flex; align-items: center; gap: .3rem; }

/* Status: day tooltips (hover, keyboard focus or tap). The bars are laid
   out left to right in every language (days in date order), so the card
   is positioned with physical left/right; only its text follows the page. */
.st-day { position: relative; outline: none; cursor: default; }
.st-day:hover, .st-day:focus-visible { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px color-mix(in srgb, var(--text) 25%, transparent); }
.st-tip {
  position: absolute; z-index: 40; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(4px);
  width: max-content; max-width: 17rem; display: grid; gap: .35rem; padding: .7rem .85rem;
  background: var(--surface); color: var(--text); border: 1px solid var(--border-2); border-radius: 10px;
  box-shadow: 0 10px 30px -8px rgba(15, 23, 42, .28); font-size: .8rem; line-height: 1.35; text-align: start;
  display: none; pointer-events: none;
}
[dir="rtl"] .st-tip { direction: rtl; }
@keyframes st-tip-in { from { opacity: 0; } to { opacity: 1; } }
.st-tip::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -6px;
  border: 6px solid transparent; border-top-color: var(--surface); filter: drop-shadow(0 1px 0 var(--border-2)); }
.st-day:hover .st-tip, .st-day:focus .st-tip { display: grid; transform: translateX(-50%); animation: st-tip-in .12s ease-out; }
/* Near the ends of the bar, anchor the card so it stays on screen. */
.st-day.is-start .st-tip { left: 0; transform: none; }
.st-day.is-start .st-tip::after { left: 10px; margin-left: 0; }
.st-day.is-end .st-tip { left: auto; right: 0; transform: none; }
.st-day.is-end .st-tip::after { left: auto; right: 10px; margin-left: 0; }
.st-day.is-start:hover .st-tip, .st-day.is-start:focus .st-tip, .st-day.is-end:hover .st-tip, .st-day.is-end:focus .st-tip { transform: none; }
/* Phones: every card anchors to the side of the bar its day is on. */
@media (max-width: 600px) {
  .st-day.is-lefthalf .st-tip, .st-day.is-lefthalf:hover .st-tip, .st-day.is-lefthalf:focus .st-tip { left: 0; right: auto; transform: none; }
  .st-day.is-righthalf .st-tip, .st-day.is-righthalf:hover .st-tip, .st-day.is-righthalf:focus .st-tip { left: auto; right: 0; transform: none; }
  .st-day.is-lefthalf .st-tip::after { left: 10px; right: auto; margin-left: 0; }
  .st-day.is-righthalf .st-tip::after { left: auto; right: 10px; margin-left: 0; }
  .st-tip { max-width: min(17rem, 80vw); }
}
.st-tip-date { font-weight: 700; font-size: .82rem; }
.st-tip-state { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; }
.st-tip-state .dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--text-mute); flex: none; }
.st-tip-state.st-none { color: var(--ok); } .st-tip-state.st-none .dot { background: var(--ok); }
.st-tip-state.st-minor, .st-tip-state.st-maintenance { color: var(--warn); } .st-tip-state.st-minor .dot, .st-tip-state.st-maintenance .dot { background: var(--warn); }
.st-tip-state.st-major, .st-tip-state.st-critical { color: var(--err); } .st-tip-state.st-major .dot, .st-tip-state.st-critical .dot { background: var(--err); }
.st-tip-meta { color: var(--text-dim); }
.st-tip-inc { display: grid; gap: .2rem; padding-block-start: .4rem; border-block-start: 1px solid var(--border); }
.st-tip-label { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute); }
.st-tip-item { color: var(--text); }

/* Header "More" menu: a native disclosure, no script needed. */
.nav-more { position: relative; }
.nav-more summary { list-style: none; display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; }
.nav-more summary::-webkit-details-marker { display: none; }
.nav-more[open] summary .ico { transform: rotate(180deg); }
.nav-more-menu { position: absolute; inset-block-start: calc(100% + 8px); inset-inline-end: 0; z-index: 80; min-inline-size: 15rem;
  display: grid; gap: 2px; padding: .4rem; background: var(--surface); border: 1px solid var(--border-2); border-radius: 12px; box-shadow: var(--shadow-md); }
.nav-more-menu a { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border-radius: 8px; font-size: .9rem; color: var(--text-dim); white-space: nowrap; }
.nav-more-menu a .ico { color: var(--text-mute); }
.nav-more-menu a:hover { background: var(--surface-2); color: var(--text); }
.nav-more-menu a.is-active { background: var(--accent-soft); color: var(--accent-on-soft); }
@media (max-width: 1180px) {
  .nav-more-menu { position: static; box-shadow: none; border: 0; padding: 0 0 0 .5rem; min-inline-size: 0; background: none; }
  .nav-more summary { inline-size: 100%; justify-content: space-between; }
}

/* ── Cost tracker ─────────────────────────────────────────── */
.tr-kpis { margin-block-end: 1.25rem; }
.tr-lines { display: grid; gap: .9rem; margin-block-end: 1rem; }
.tr-line { display: grid; gap: .5rem; }
.tr-head { display: flex; align-items: center; gap: .8rem; }
.tr-id { flex: 1; min-inline-size: 0; }
.tr-id a { font-weight: 650; color: var(--text); }
.tr-id a:hover { color: var(--accent); }
.tr-id small { display: block; color: var(--text-mute); font-size: .8rem; }
.tr-cost { text-align: end; }
.tr-cost strong { font-size: 1.15rem; }
.tr-vol { margin: 0; direction: ltr; unicode-bidi: isolate; text-align: start; }
.tr-note { display: flex; gap: .45rem; align-items: flex-start; font-size: .86rem; padding: .5rem .7rem; border-radius: 8px; margin: 0; }
.tr-note .ico { flex: none; margin-block-start: .15rem; }
.tr-note.is-soon { background: color-mix(in srgb, var(--warn) 10%, transparent); color: var(--text); }
.tr-note.is-soon .ico { color: var(--warn); }
.tr-note.is-alt { background: color-mix(in srgb, var(--ok) 9%, transparent); }
.tr-note.is-alt .ico { color: var(--ok); }
.tr-note a { font-weight: 600; color: var(--accent); margin-inline-start: .35rem; }
.tr-edit summary { cursor: pointer; font-size: .82rem; color: var(--text-mute); }
.tr-form { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); align-items: end; margin-block-start: .8rem; }
.tr-form .field { display: grid; gap: .3rem; }
.tr-form .field > label { text-transform: none; letter-spacing: 0; font-size: .82rem; }
.tr-form input[type="number"], .tr-form input:not([type]) { inline-size: 100%; padding: .55rem .7rem; border: 1px solid var(--border-2); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; }
.tr-wide { grid-column: 1 / -1; }
.tr-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.tr-add .h-sm { display: flex; align-items: center; gap: .45rem; margin: 0; }
.tr-add .h-sm small { margin-inline-start: auto; font-weight: 500; }
.tr-form [hidden] { display: none; }

/* ── Prompt playground ────────────────────────────────────── */
.pg-layout { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) { .pg-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } .pg-results { position: sticky; inset-block-start: 1rem; } }
.pg-form { display: grid; gap: 1rem; }
.pg-form .field { display: grid; gap: .35rem; }
.pg-form textarea { inline-size: 100%; min-block-size: 11rem; resize: vertical; padding: .7rem .8rem; border: 1px solid var(--border-2); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; font-size: .92rem; line-height: 1.5; }
.pg-form input[type="number"], .pg-filter { inline-size: 100%; padding: .55rem .7rem; border: 1px solid var(--border-2); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; }
.pg-row { display: grid; gap: .8rem; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); align-items: end; }
@media (max-width: 480px) { .pg-row { grid-template-columns: minmax(0, 1fr); } }
.pg-tok { margin: 0; padding: .6rem .8rem; border-radius: 8px; background: var(--accent-soft); color: var(--accent-on-soft); font-weight: 600; font-size: .88rem; }
.pg-pick { border: 0; padding: 0; margin: 0; display: grid; gap: .6rem; min-inline-size: 0; }
.pg-pick legend { font-weight: 600; font-size: .9rem; padding: 0; margin-block-end: .6rem; display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.pg-list { max-block-size: 20rem; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; padding: .4rem; display: grid; gap: 1px; }
.pg-prov { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-mute); padding: .55rem .5rem .2rem; font-weight: 600; }
.pg-opt { display: flex; gap: .55rem; align-items: center; padding: .4rem .5rem; border-radius: 6px; cursor: pointer; font-size: .9rem; }
.pg-opt:hover { background: var(--surface-2); }
.pg-opt:has(input:checked) { background: var(--accent-soft); color: var(--accent-on-soft); font-weight: 600; }
.pg-opt:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.pg-pick [hidden] { display: none; }
.pg-results .h-sm { margin-block: 0 .8rem; }
.pg-table { inline-size: 100%; border-collapse: collapse; font-size: .9rem; }
.pg-table th, .pg-table td { padding: .65rem .5rem; border-block-end: 1px solid var(--border); text-align: start; vertical-align: top; }
.pg-table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-mute); font-weight: 600; }
.pg-table .num { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pg-table tbody th { font-weight: 500; inline-size: 55%; }
.pg-table tbody th a { font-weight: 650; color: var(--text); }
.pg-table tbody th a:hover { color: var(--accent); }
.pg-table tbody th small { display: block; color: var(--text-mute); font-size: .78rem; }
.pg-bar { display: block; inline-size: 100%; block-size: 6px; margin-block-start: .4rem; }
.pg-bar rect { fill: var(--accent); opacity: .55; }
.pg-table tr.is-best .pg-bar rect { fill: var(--ok); opacity: .9; }
.pg-table tr.is-best td strong { color: var(--ok); }
.pg-more { margin: .5rem 0 0; font-size: .9rem; }
.pg-more a { color: var(--accent); font-weight: 600; }
.pg-form .field > label { text-transform: none; letter-spacing: 0; font-size: .88rem; }

/* ── Leaderboards ─────────────────────────────────────────── */
.lb-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); align-items: start; }
.lb-card { display: grid; gap: .6rem; }
.lb-card-head .h-sm { margin: 0; }
.lb-card-head .h-sm a { color: var(--text); }
.lb-card-head .h-sm a:hover { color: var(--accent); }
.lb-card-head p { margin: .2rem 0 0; }
.lb-list { list-style: none; margin: 0; padding: 0; display: grid; }
.lb-item { display: grid; grid-template-columns: 1.6rem auto minmax(0, 1fr) auto; gap: .55rem; align-items: center; padding: .5rem 0; border-block-end: 1px solid var(--border); }
.lb-item:last-child { border-block-end: 0; }
.lb-rank { display: inline-grid; place-items: center; inline-size: 1.6rem; block-size: 1.6rem; border-radius: 50%; font-size: .78rem; font-weight: 700; color: var(--text-dim); background: var(--surface-2); font-variant-numeric: tabular-nums; }
.is-top .lb-rank { background: var(--accent-soft); color: var(--accent-on-soft); }
.lb-name { min-inline-size: 0; display: grid; }
.lb-name a { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-name a:hover { color: var(--accent); }
.lb-name small { color: var(--text-mute); font-size: .76rem; }
.lb-val { font-size: .85rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
.lb-side { display: grid; justify-items: end; gap: .2rem; }
.lb-mv { display: inline-flex; align-items: center; gap: .15rem; font-size: .74rem; font-weight: 700; padding: .1rem .4rem; border-radius: 999px; white-space: nowrap; }
.lb-mv.is-up { color: var(--ok); background: color-mix(in srgb, var(--ok) 11%, transparent); }
.lb-mv.is-down { color: var(--err); background: color-mix(in srgb, var(--err) 10%, transparent); }
.lb-mv.is-new { color: var(--accent-on-soft); background: var(--accent-soft); }
.lb-mv.is-same { color: var(--text-mute); }
.lb-mv span[aria-hidden] { font-size: .6rem; }
.lb-all { font-size: .86rem; font-weight: 600; color: var(--accent); }
.lb-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-block-start: 1.1rem; }
.lb-tabs a { padding: .4rem .8rem; border-radius: 999px; border: 1px solid var(--border-2); font-size: .86rem; color: var(--text-dim); background: var(--surface); }
.lb-tabs a:hover { color: var(--accent); border-color: var(--accent); }
.lb-tabs a[aria-current] { background: var(--btn-fill); border-color: var(--btn-fill); color: #fff; }
.lb-table { inline-size: 100%; border-collapse: collapse; font-size: .9rem; }
.lb-table th, .lb-table td { padding: .6rem .6rem; border-block-end: 1px solid var(--border); text-align: start; vertical-align: middle; }
.lb-table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-mute); font-weight: 600; }
.lb-table .num { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lb-table td.num strong { direction: ltr; unicode-bidi: isolate; }
.lb-table tbody th { font-weight: 500; }
.lb-who { display: flex; align-items: center; gap: .6rem; min-inline-size: 0; }
.lb-hcol { inline-size: 9rem; }
.lb-spark { display: block; inline-size: 8rem; block-size: 22px; }
.lb-spark polyline { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
@media (max-width: 640px) { .lb-hcol { display: none; } }

/* ── Weekly changes ───────────────────────────────────────── */
.wk-eyebrow { margin: 0 0 .4rem; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.wk-kpis { margin-block-start: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
.wk-layout { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) { .wk-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); } }
.wk-main { display: grid; gap: 1.6rem; min-inline-size: 0; }
.wk-sec .h-sm { display: flex; gap: .5rem; align-items: baseline; margin: 0 0 .6rem; }
.wk-side { display: grid; gap: 1rem; min-inline-size: 0; }
.wk-side .h-sm { margin: 0 0 .5rem; }
.wk-movers, .wk-mcp { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; }
.wk-movers li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .6rem; align-items: center; padding: .5rem 0; border-block-end: 1px solid var(--border); }
.wk-movers small a { color: var(--text-mute); }
.wk-movers small a:hover { color: var(--accent); }
.wk-mcp li { padding: .55rem 0; border-block-end: 1px solid var(--border); display: grid; gap: .15rem; }
.wk-mcp a { font-weight: 600; color: var(--text); }
.wk-mcp a:hover { color: var(--accent); }
.wk-mcp small { color: var(--text-mute); font-size: .8rem; line-height: 1.4; }
.wk-pager { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; margin-block-start: 2rem; }
.wk-weeks { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.wk-week { padding: 0; }
.wk-week > a { display: grid; gap: .35rem; padding: 1.1rem 1.25rem; color: var(--text); border-radius: inherit; }
.wk-week > a:hover { background: var(--surface-2); }
.wk-week strong { font-size: 1.05rem; }
.wk-week.is-current { border-color: var(--accent); }
.wk-when { font-size: .76rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-mute); }
.is-current .wk-when { color: var(--accent); }
.wk-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-block-start: .2rem; }
.wk-chip { font-size: .8rem; color: var(--text-dim); background: var(--surface-2); border-radius: 999px; padding: .15rem .6rem; }
.wk-chip b { color: var(--text); }

/* ── Trending MCP ─────────────────────────────────────────── */
.mcp-trend-link { margin-inline-start: auto; display: inline-flex; align-items: center; gap: .3rem; font-size: .86rem; font-weight: 600; color: var(--accent); }
.mcp-h:has(.mcp-trend-link) { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.tn-layout { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) { .tn-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); } }
.tn-main { min-inline-size: 0; }
.tn-main > .h-sm { display: flex; align-items: center; gap: .45rem; margin: 0 0 .3rem; }
.tn-main > .tn-h { margin-block: 2rem .8rem; }
.tn-list { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .6rem; }
.tn-item { display: grid; grid-template-columns: 1.6rem auto minmax(0, 1fr); gap: .7rem; align-items: start; padding: .85rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.tn-item .lb-rank { margin-block-start: .2rem; }
.tn-id { display: grid; gap: .15rem; min-inline-size: 0; }
.tn-id a { font-weight: 650; color: var(--text); overflow-wrap: anywhere; }
.tn-id a:hover { color: var(--accent); }
.tn-id small { color: var(--text-mute); font-size: .82rem; line-height: 1.45; }
.tn-stats { grid-column: 3; display: flex; flex-wrap: wrap; gap: .35rem; }
.tn-side .h-sm { margin: 0 0 .6rem; }
.tn-top { margin: 0 0 .8rem; padding-inline-start: 1.3rem; display: grid; gap: .1rem; font-size: .9rem; }
.tn-top li { padding: .35rem 0; border-block-end: 1px solid var(--border); }
.tn-top li a { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.tn-top li a:hover { color: var(--accent); }
.tn-top li span { display: block; font-size: .78rem; color: var(--text-mute); }

/* ── MCP server page ──────────────────────────────────────── */
.mcp-hero .mh-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.mcp-page { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1000px) { .mcp-page { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); } .mcp-aside { position: sticky; inset-block-start: 1rem; } }
.mcp-main { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); min-inline-size: 0; }
.mcp-sec .h-sm, .mcp-cando .h-sm, .mcp-aside .h-sm { margin: 0 0 .7rem; }
.mcp-cando { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 22%, var(--border)); }
.mcp-cando ul { margin: 0; padding-inline-start: 1.15rem; display: grid; gap: .55rem; line-height: 1.55; }
.mcp-cando li::marker { color: var(--accent); }
.mcp-cando code, .md-body :not(pre) > code, .mcp-faq code { font-family: var(--mono); font-size: .86em; background: var(--surface-2); padding: .1em .35em; border-radius: 4px; }
.mcp-code { margin-block-start: .7rem; }
.mcp-code-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .78rem; font-weight: 600; color: var(--text-mute); margin-block-end: .3rem; }
.mcp-code pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; direction: ltr; text-align: left; }
.mcp-toc { margin-block-end: .8rem; padding: .7rem 1rem; }
.mcp-toc summary { cursor: pointer; font-weight: 600; font-size: .9rem; }
.mcp-toc ol { margin: .6rem 0 0; padding-inline-start: 1.2rem; columns: 2 14rem; column-gap: 1.5rem; font-size: .88rem; }
.mcp-toc li { break-inside: avoid; padding: .15rem 0; }
.mcp-toc li.lvl-1 { font-weight: 600; }
.mcp-toc a { color: var(--text-dim); }
.mcp-toc a:hover { color: var(--accent); }
.md-body { font-size: .94rem; line-height: 1.65; overflow-wrap: anywhere; position: relative; }
.md-body > :first-child { margin-block-start: 0; }
.md-body h3, .md-body h4, .md-body h5, .md-body h6 { margin: 1.6em 0 .5em; line-height: 1.3; scroll-margin-top: 5rem; }
.md-body h3 { font-size: 1.25rem; padding-block-end: .35rem; border-block-end: 1px solid var(--border); }
.md-body h4 { font-size: 1.06rem; }
.md-body h5, .md-body h6 { font-size: .95rem; }
.md-body p, .md-body ul, .md-body ol, .md-body blockquote, .md-body pre, .md-body .tbl-wrap { margin: 0 0 1em; }
.md-body ul, .md-body ol { padding-inline-start: 1.4rem; }
.md-body li + li { margin-block-start: .25em; }
.md-body li > ul, .md-body li > ol { margin: .3em 0 0; }
.md-body a { color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); text-underline-offset: 2px; }
.md-body pre { white-space: pre; overflow-x: auto; direction: ltr; text-align: left; font-size: .84rem; }
.md-body blockquote { border-inline-start: 3px solid var(--border-2); padding-inline-start: .9rem; color: var(--text-dim); }
.md-body hr { border: 0; border-block-start: 1px solid var(--border); margin: 1.5em 0; }
.md-table { border-collapse: collapse; font-size: .88rem; inline-size: 100%; }
.md-table th, .md-table td { border: 1px solid var(--border); padding: .45rem .6rem; text-align: start; vertical-align: top; }
.md-table th { background: var(--surface-2); font-weight: 600; }
.md-body.is-clamped { max-block-size: 70rem; overflow: hidden; }
.md-body.is-clamped::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 8rem; background: linear-gradient(transparent, var(--surface)); pointer-events: none; }
.md-more { display: flex; justify-content: center; margin-block-start: -.4rem; }
.mcp-facts { margin: 0; display: grid; }
.mcp-facts > div { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-block-end: 1px solid var(--border); font-size: .88rem; }
.mcp-facts dt { color: var(--text-mute); }
.mcp-facts dd { margin: 0; font-weight: 600; text-align: end; overflow-wrap: anywhere; }
.mcp-facts dd a { color: var(--accent); }
.mcp-id-line { margin: .7rem 0 0; font-size: .75rem; overflow-wrap: anywhere; }
.mcp-id-line code { font-family: var(--mono); color: var(--accent); }
.mcp-aside { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); min-inline-size: 0; }
.mcp-rel { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; }
.mcp-rel li { padding: .55rem 0; border-block-end: 1px solid var(--border); display: grid; gap: .15rem; }
.mcp-rel a { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.mcp-rel a:hover { color: var(--accent); }
.mcp-rel small { color: var(--text-mute); font-size: .8rem; line-height: 1.4; }
/* Change badges can be long ("▲ 100% from Jan 1, 2027"): let them wrap in the table. */
.mkt td.col-chg { white-space: normal; max-inline-size: 8.5rem; }
.mkt td.col-chg .chg { white-space: normal; display: inline-block; max-inline-size: 7.5rem; text-align: center; line-height: 1.35; }
/* JS fit: hide optional columns until the table fits (see app.js). */
.mkt.fit-caps .col-caps, .mkt.fit-rel .col-rel, .mkt.fit-ctx .col-ctx, .mkt.fit-rank .rank, .mkt.fit-chg .col-chg { display: none; }
.mkt.fit-tight td, .mkt.fit-tight th { padding-inline: .45rem; }
.mkt.fit-tight .mkt-model { min-inline-size: 0; gap: .4rem; }
.mkt.fit-tight .mkt-model > :first-child:not(div) { display: none; }
.mkt.fit-tight td.num { white-space: normal; }
.mkt.fit-tight .cmp-btn { font-size: 0; inline-size: 2rem; block-size: 2rem; padding: 0; display: inline-grid; place-items: center; }
.mkt.fit-tight .cmp-btn::before { content: "+"; font-size: 1.05rem; font-weight: 700; line-height: 1; }
.mkt.fit-tight .cmp-btn.is-on::before { content: "\2713"; font-size: .95rem; }

/* ── Head-to-head: use cases, costs, benchmarks ───────────── */
.vs-cases { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); margin-block-start: .8rem; }
.vs-case { display: grid; gap: .45rem; align-content: start; }
.vs-case h3 { margin: 0; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-mute); font-weight: 650; }
.vs-case-pick { margin: 0; display: flex; align-items: center; gap: .45rem; font-weight: 700; font-size: 1.02rem; color: var(--text); }
.vs-case.is-tie .vs-case-pick { color: var(--text-dim); }
.vs-case-why { margin: 0; font-size: .9rem; color: var(--text-dim); line-height: 1.55; }
.vs-costs td.is-low, .vs-bench td.is-lead { font-weight: 700; color: var(--ok); }
.vs-costs tbody th, .vs-bench tbody th { font-weight: 500; text-transform: none; letter-spacing: 0; }
/* Phones: the cheaper cell is already highlighted, so the difference column can go; long values wrap. */
@container (max-width: 520px) { .vs-costs .col-diff { display: none; } }
.vs-costs tbody th { min-inline-size: 7rem; white-space: normal; }
.vs-table td { overflow-wrap: anywhere; }
.vs-table td code { word-break: break-all; }
@container (max-width: 520px) { .vs-table th, .vs-table td { padding-inline: .5rem; font-size: .84rem; } .vs-table td { min-inline-size: 0; } }
.vs-table thead th, .vs-costs thead th, .vs-bench thead th { white-space: normal; overflow-wrap: anywhere; }
@container (max-width: 520px) { .vs-costs th, .vs-costs td, .vs-bench th, .vs-bench td { padding-inline: .45rem; } .vs-costs tbody th { min-inline-size: 0; } }
.mkt.vs-costs thead th.num, .mkt.vs-bench thead th.num { white-space: normal; overflow-wrap: anywhere; }