/* ░░░ css/ai-leaders.css — the "AI leaders" row (js/ai-leaders.js) ░░░
   Same language as THE VISUAL DECK: flat #070b14, hairlines, mono only on figures,
   active = ink + weight. Cards are neutral; the lab's color lives in its emblem (a
   studio-lit 3D logo, js/ai-emblems.js; CSS coin fallback) and its thin bar. No glow.
   Scoped to .ail so it renders the same on the home deck and leaders-preview.html. */
.ail { --ail-ink: #eef3ff; --ail-tx: #c6d1e6; --ail-dim: #8a96ad; --ail-faint: #6f7c95; --ail-rule: rgba(199,214,240,.09);
  --cs: clamp(78px, 7vw, 104px); --es: clamp(112px, 10.4vw, 150px); --ct: 9px;
  display: block; padding: 26px var(--ail-pad, clamp(16px, 3vw, 44px)) 10px; font-family: var(--sans); letter-spacing: 0; color: var(--ail-tx); }
.ail .ail-n { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.ail a { color: inherit; }

/* ── the head: the title, the three tabs, one caption ── */
.ail-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; }
.ail-h2 { margin: 0; font-family: var(--disp); font-size: 19px; font-weight: 600; letter-spacing: -.01em; color: var(--ail-ink); text-transform: none; }
.ail-tabs { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid rgba(199,214,240,.12); border-radius: 8px; }
.ail .ail-tabs button { margin: 0; padding: 6px 13px; border: 0; border-radius: 5px; background: none; box-shadow: none; text-shadow: none;
  font-family: var(--sans); font-size: 13.5px; font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.2;
  color: var(--ail-dim); cursor: pointer; transition: color .15s, background-color .15s; }
.ail .ail-tabs button:hover { color: var(--ail-ink); background: none; }
.ail .ail-tabs button[aria-selected="true"] { color: var(--ail-ink); font-weight: 600; background: rgba(199,214,240,.08); }
.ail .ail-tabs button:focus-visible { outline: 1px solid rgba(199,214,240,.5); outline-offset: 2px; }
.ail-cap { margin: 8px 0 14px; font-size: 12.5px; color: var(--ail-faint); }

/* ── the cards: neutral and dark, so the emblem carries the color ── */
.ail { position: relative; isolation: isolate; }   /* the emblem canvas stacks inside the row, never over the site menu */
.ail-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.ail-card { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 30px 14px 16px; text-align: center;
  border: 1px solid rgba(199,214,240,.08); border-radius: 14px;
  background: linear-gradient(180deg, #0e131e 0%, #0a0e17 62%); }
.ail-rk { position: absolute; top: 12px; left: 14px; z-index: 2; font-size: 12px; color: var(--ail-faint); }
.ail-card:first-child .ail-rk { color: var(--ail-ink); font-weight: 600; }
.ail-mn { margin-top: 6px; font-family: var(--disp); font-size: 15.5px; font-weight: 600; line-height: 1.2; letter-spacing: -.012em; color: var(--ail-ink); }
.ail-lab { margin-top: 3px; font-size: 12.5px; color: var(--ail-dim); }
.ail-val { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 0 5px; margin-top: 14px; }
.ail-val b { font-size: 26px; font-weight: 400; line-height: 1.05; letter-spacing: -.03em; color: var(--ail-ink); }
.ail-val small { font-size: 12px; color: var(--ail-dim); }
.ail-val.na b { font-family: var(--sans); font-size: 14px; letter-spacing: 0; line-height: 1.85; color: var(--ail-dim); }
.ail-bar { display: block; width: 100%; height: 2px; margin-top: 12px; border-radius: 2px; background: rgba(199,214,240,.07); overflow: hidden; }
.ail-bar i { display: block; height: 100%; border-radius: 2px; background: var(--c); opacity: .9; transition: width .6s cubic-bezier(.22,.7,.2,1); }
.ail-u { margin-top: auto; padding-top: 11px; font-size: 11.5px; line-height: 1.35; color: var(--ail-faint); }
.ail-u b { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 500; color: var(--ail-tx); }

/* ── the emblem slot ──
   js/ai-emblems.js draws an extruded, studio-lit logo into this box from one shared
   WebGL canvas (.ail-gl-cv) laid over the grid; .ail-gl hides the CSS coin beneath it.
   Without WebGL the CSS coin turns here: metal rim, lit face, embossed mark, a sheen
   that crosses as it turns, a contact shadow that narrows edge-on. No glow anywhere. */
.ail-emb { position: relative; width: 100%; height: var(--es); display: grid; place-items: center; }
.ail-gl-cv { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; }
.ail-gl .ail-coin, .ail-gl .ail-shd { visibility: hidden; }
.ail-coin { width: var(--cs); height: var(--cs); perspective: 560px; }
.ail-spin { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; will-change: transform;
  animation: ail-turn 11s linear infinite; animation-delay: var(--d, 0s); }
.ail-card:hover .ail-spin, .ail-card:focus-within .ail-spin,
.ail-card:hover .ail-shd, .ail-card:focus-within .ail-shd,
.ail-card:hover .ail-face::before, .ail-card:focus-within .ail-face::before { animation-play-state: paused; }
.ail-rim { position: absolute; inset: 0; outline: 1px solid transparent; border-radius: 50%; backface-visibility: visible;
  background: linear-gradient(90deg, #3a3f49, #c9ced6 22%, #6d737e 48%, #e3e6eb 70%, #4a505b);
  transform: translateZ(calc(var(--ct) * (var(--k) / 9 - .5))); }
.ail-face { position: absolute; inset: 0; outline: 1px solid transparent; display: grid; place-items: center; border-radius: 50%; overflow: hidden; color: var(--ci, #fff);
  background: radial-gradient(120% 120% at 30% 22%, color-mix(in oklab, var(--c) 72%, #fff) 0%, var(--c) 42%, color-mix(in oklab, var(--c) 62%, #000) 100%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.22), inset 0 0 0 4px color-mix(in oklab, var(--c) 70%, #000), inset 0 -6px 14px rgba(0,0,0,.28);
  backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: translateZ(calc(var(--ct) / 2 + .3px)); }
.ail-face.ail-b { transform: rotateY(180deg) translateZ(calc(var(--ct) / 2 + .3px)); }
.ail-face::before { content: ''; position: absolute; inset: -20%; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.26) 50%, transparent 62%);
  animation: ail-sheen 11s linear infinite; animation-delay: var(--d, 0s); }
.ail-face svg { position: relative; width: 50%; height: 50%; display: block; fill: currentColor;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.28)) drop-shadow(0 -1px 0 rgba(0,0,0,.3)) drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.ail-wm { font-family: var(--disp); font-size: calc(var(--cs) * .3); font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.ail-shd { position: absolute; left: 50%; bottom: calc((var(--es) - var(--cs)) / 2 - 12px); width: calc(var(--cs) * .9); height: 12px; margin-left: calc(var(--cs) * -.45);
  border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.6), rgba(0,0,0,0)); pointer-events: none;
  animation: ail-shd 11s linear infinite; animation-delay: var(--d, 0s); }
@keyframes ail-turn { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
@keyframes ail-sheen { 0% { transform: translateX(-60%); } 50% { transform: translateX(60%); } 50.01% { transform: translateX(-60%); } 100% { transform: translateX(60%); } }
@keyframes ail-shd { 0%, 50%, 100% { transform: scaleX(1); } 25%, 75% { transform: scaleX(.3); } }
@media (prefers-reduced-motion: reduce) {
  .ail-spin { animation: none; transform: rotateY(-24deg) rotateX(6deg); }
  .ail-face::before, .ail-shd { animation: none; }
  .ail-bar i { transition: none; }
}

/* ── the AI clock: capability rising, price falling — two charts, one axis each ── */
.ail-clock { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.ail-ck { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 44%); align-items: center; gap: 16px; padding: 14px 16px;
  border: 1px solid rgba(199,214,240,.1); border-radius: 12px; background: #0b1120; }
.ail-ck-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ail-ck-k { font-size: 12.5px; color: var(--ail-dim); }
.ail-ck-v { font-family: var(--disp); font-size: 15px; font-weight: 500; color: var(--ail-tx); }
.ail-ck-v .ail-n { font-family: var(--disp); font-variant-numeric: lining-nums proportional-nums; font-size: 28px; font-weight: 500; letter-spacing: -.02em; color: var(--ail-ink); margin-right: 2px; }
.ail-ck-s { font-size: 12px; line-height: 1.4; color: var(--ail-faint); }
.ail-ck-f { margin: 0; min-width: 0; }
.ail-sp { display: block; width: 100%; height: auto; overflow: visible; }
.ail-sp path { fill: none; stroke: var(--accent, #5ef0a8); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ail-sp .base { stroke: rgba(199,214,240,.14); stroke-width: 1; }
.ail-sp .ail-pt circle { fill: var(--accent, #5ef0a8); stroke: #0b1120; stroke-width: 1.5; }
.ail-sp .ail-pt circle.hit { fill: transparent; stroke: none; }
.ail-sp.down path { stroke: var(--need-connection, #08a2d1); }
.ail-sp.down .ail-pt circle:not(.hit) { fill: var(--need-connection, #08a2d1); }
.ail-ck-f figcaption { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11px; color: var(--ail-faint); }

.ail-src { margin: 14px 0 0; max-width: 92ch; font-size: 11.5px; line-height: 1.55; color: var(--ail-faint); }
.ail-src a { text-decoration: underline; text-decoration-color: rgba(199,214,240,.25); text-underline-offset: 2px; }
.ail-src a:hover { color: var(--ail-ink); }

/* ── smaller screens: 3 across (unfolded / tablet), then 3 compact across on phones ── */
@media (max-width: 1100px) {
  .ail-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ail { --cs: 96px; --es: 150px; }
}
@media (max-width: 760px) {
  .ail-clock { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .ail { --cs: 62px; --es: 92px; --ct: 6px; padding-top: 20px; }
  .ail-head { align-items: center; }
  .ail-tabs { width: 100%; }
  .ail .ail-tabs button { flex: 1 1 0; padding: 7px 4px; }
  .ail-grid { gap: 8px; }
  .ail-card { padding: 22px 6px 11px; border-radius: 11px; }
  .ail-rk { top: 7px; left: 8px; font-size: 11px; }
  .ail-mn { margin-top: 2px; font-size: 12.5px; }
  .ail-lab { font-size: 11px; }
  .ail-val { margin-top: 7px; }
  .ail-val b { font-size: 18px; }
  .ail-val small { font-size: 10.5px; }
  .ail-val.na b { font-size: 11.5px; line-height: 1.5; }
  .ail-bar { margin-top: 8px; }
  .ail-u { font-size: 10.5px; }
  .ail-ck { grid-template-columns: minmax(0, 1fr) 40%; gap: 12px; padding: 12px 14px; }
  .ail-ck-v .ail-n { font-size: 24px; }
}