/* ══════════════════════════════════════════════════════════════════════════
   §AMD-ASIDE) Hero right column — the spec panel

   ⚠️ THIS IS NOT A GALLERY, AND THAT IS DELIBERATE. On the tool page the right
   half of the hero is the Swiper slider. `ai_models` has NO media columns at
   all — no cover image, no screenshots table, no video relation — so porting
   the gallery across would have shipped an empty half-hero on all 19 published
   models. The column carries the spec panel instead: model type, context
   window, release date, pricing, developer and modalities, which are filled on
   every single row. Same call, same reasoning, as the company page's profile
   panel.

   The panel is the Tool Information card's recipe (§SPINE-BLUE): a 150deg
   diagonal wash on a white ground, a hairline blue edge, tinted icon plates.
   It is NOT `.atd-info` — that class carries the sidebar's orbit-ring hover,
   which belongs to a card you point at, and this panel is not interactive.
   ══════════════════════════════════════════════════════════════════════════ */
.v2x.atd.amd .amd-aside{ display:flex; flex-direction:column; gap:16px; height:100%; }

.v2x.atd.amd .amd-spec{
  flex:1 1 auto;
  padding:20px; border-radius:16px;
  border:1px solid rgba(54,128,237,.22);
  background-image:linear-gradient(150deg,
    rgba(54,128,237,.075) 0%, rgba(54,128,237,0) 46%, rgba(54,128,237,.05) 100%);
  background-color:#fff;
  box-shadow:0 1px 2px rgba(15,23,42,.05), 0 14px 30px -18px rgba(15,23,42,.28);
}
body.theme-dark .v2x.atd.amd .amd-spec{
  border-color:rgba(54,128,237,.30);
  background-image:linear-gradient(150deg,
    rgba(54,128,237,.13) 0%, rgba(54,128,237,0) 46%, rgba(54,128,237,.08) 100%);
  background-color:#171922;
  box-shadow:0 1px 2px rgba(0,0,0,.45), 0 18px 36px -20px rgba(0,0,0,.80);
}
.v2x.atd.amd .amd-spec-head{ display:flex; align-items:center; gap:11px; margin-bottom:15px; }

/* Fact tiles. Two across on desktop; one across once the column narrows, where
   two tracks would put "Text, Image, Video, Audio" on four lines. */
.v2x.atd.amd .amd-specs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.v2x.atd.amd .amd-sp{
  display:flex; align-items:flex-start; gap:10px;
  padding:11px 12px; border-radius:12px;
  background:var(--t-bg); border:1px solid var(--t-line);
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .28s ease;
}
.v2x.atd.amd .amd-sp-ic{
  flex:0 0 auto; width:30px; height:30px; border-radius:9px;
  display:inline-flex; align-items:center; justify-content:center;
  /* --t-1p is the ramp measured for a white GLYPH (3:1). A white LABEL on the
     same fill would need 4.5 and fail; nothing here puts text on this plate. */
  background:var(--t-1p); color:#fff;
  box-shadow:0 2px 6px rgba(var(--t-rgb),.35);
}
.v2x.atd.amd .amd-sp-tx{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.v2x.atd.amd .amd-sp-k{
  font-size:.68rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--t-ink);
}
.v2x.atd.amd .amd-sp-v{
  font-size:.88rem; font-weight:700; line-height:1.35; color:var(--ink);
  overflow-wrap:anywhere;
}
@media (hover:hover) and (pointer:fine){
  .v2x.atd.amd .amd-sp:hover{ transform:translateY(-2px); box-shadow:0 10px 20px -12px rgba(var(--t-rgb),.55); }
}
@media (prefers-reduced-motion:reduce){
  .v2x.atd.amd .amd-sp{ transition:none; }
  .v2x.atd.amd .amd-sp:hover{ transform:none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   §AMD-CAP) Capabilities — the one rich field EVERY model has

   Measured 2026-08-13 across the 19 published models: 18 of them carry no
   feature cards, no use cases, no integrations and no FAQs — every JSON column
   is null. What all 19 DO carry is `capabilities`, 2-8 entries each from a
   closed 10-slug vocabulary. It used to render as a row of bare chips in the
   hero and nothing else, so 18 pages had a hero, a paragraph and reviews.
   Promoting it to a real section, with a glyph and a line of copy per
   capability, is what gives those pages a body.

   Same tile recipe as the company page's §CMP-TILE, on the §TONE6 ramp.
   ══════════════════════════════════════════════════════════════════════════ */
.v2x.atd.amd .amd-capgrid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:14px;
}
.v2x.atd.amd .amd-capcard{
  position:relative; overflow:hidden;
  padding:17px 16px; border-radius:14px;
  background-image:linear-gradient(150deg,
    rgba(var(--t-rgb),.075) 0%, rgba(var(--t-rgb),.012) 46%, rgba(var(--t-rgb),.05) 100%);
  background-color:#fff;
  border:1px solid rgba(var(--t-rgb),.20);
  transition:transform .26s cubic-bezier(.22,.61,.36,1), box-shadow .26s ease, border-color .22s ease;
}
body.theme-dark .v2x.atd.amd .amd-capcard{
  background-image:linear-gradient(150deg,
    rgba(var(--t-rgb),.14) 0%, rgba(var(--t-rgb),.025) 46%, rgba(var(--t-rgb),.09) 100%);
  background-color:#1B1E28;
  border-color:rgba(var(--t-rgb),.26);
}
.v2x.atd.amd .amd-capcard-ic{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:11px; margin-bottom:11px;
  background:var(--t-1p); color:#fff;
  box-shadow:0 3px 9px rgba(var(--t-rgb),.34);
}
.v2x.atd.amd .amd-capcard-h{
  margin:0 0 5px; font-family:var(--font);
  font-size:.98rem; font-weight:700; line-height:1.3; color:var(--ink);
}
.v2x.atd.amd .amd-capcard-p{
  margin:0; font-size:.855rem; line-height:1.55; color:var(--muted);
}
@media (hover:hover) and (pointer:fine){
  .v2x.atd.amd .amd-capcard:hover{
    transform:translateY(-3px);
    border-color:rgba(var(--t-rgb),.42);
    box-shadow:0 14px 28px -16px rgba(var(--t-rgb),.55);
  }
}
@media (prefers-reduced-motion:reduce){
  .v2x.atd.amd .amd-capcard{ transition:none; }
  .v2x.atd.amd .amd-capcard:hover{ transform:none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   §AMD-PRICE) Pricing — the provider table, the note and the cost calculator

   The table is horizontally scrollable in its OWN container. The shell is
   1600px wide and the page body must never scroll sideways, so a six-column
   rate table on a phone scrolls inside itself.
   ══════════════════════════════════════════════════════════════════════════ */
.v2x.atd.amd .amd-ptable-wrap{
  overflow-x:auto; border-radius:14px; border:1px solid var(--line); background:#fff;
  -webkit-overflow-scrolling:touch;
}
body.theme-dark .v2x.atd.amd .amd-ptable-wrap{ border-color:#272B3A; background:#171922; }

.v2x.atd.amd .amd-ptable{ width:100%; border-collapse:collapse; min-width:620px; margin:0; }
.v2x.atd.amd .amd-ptable th{
  text-align:start; padding:12px 14px; white-space:nowrap;
  font-size:.7rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); background:var(--accent-soft2); border-bottom:1px solid var(--line);
}
.v2x.atd.amd .amd-ptable td{
  padding:13px 14px; font-size:.9rem; color:var(--ink);
  border-bottom:1px solid var(--line);
}
.v2x.atd.amd .amd-ptable tr:last-child td{ border-bottom:0; }
.v2x.atd.amd .amd-ptable .prov{ font-weight:700; }
/* Rates are compared column-down, so they are tabular figures in the mono face
   — the same treatment the sidebar gives a spec value. */
.v2x.atd.amd .amd-ptable .pv{ font-family:var(--mono); font-weight:700; font-variant-numeric:tabular-nums; }
body.theme-dark .v2x.atd.amd .amd-ptable th{ background:rgba(255,255,255,.04); border-bottom-color:#272B3A; color:#9BA3B4; }
body.theme-dark .v2x.atd.amd .amd-ptable td{ border-bottom-color:#272B3A; }

.v2x.atd.amd .amd-pnote{
  margin:0 0 14px; font-size:.88rem; line-height:1.6; color:var(--muted);
}

/* The calculator is a tinted panel, not another white card inside a white card:
   it is an interactive tool sitting inside the Pricing section and needs to
   read as a distinct surface. */
.v2x.atd.amd .amd-calc{
  margin-top:18px; padding:18px; border-radius:14px;
  border:1px solid rgba(54,128,237,.22);
  background-image:linear-gradient(150deg,
    rgba(54,128,237,.075) 0%, rgba(54,128,237,0) 46%, rgba(54,128,237,.05) 100%);
  background-color:#fff;
}
body.theme-dark .v2x.atd.amd .amd-calc{
  border-color:rgba(54,128,237,.30);
  background-image:linear-gradient(150deg,
    rgba(54,128,237,.13) 0%, rgba(54,128,237,0) 46%, rgba(54,128,237,.08) 100%);
  background-color:#171922;
}
.v2x.atd.amd .amd-calc-head{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.v2x.atd.amd .amd-calc-head h3{
  margin:0; font-family:var(--font); font-size:1rem; font-weight:700; color:var(--ink);
}
.v2x.atd.amd .amd-calc-ic{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:10px;
  background:var(--accent); color:#fff; box-shadow:0 3px 9px rgba(54,128,237,.34);
}
.v2x.atd.amd .amd-calc-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; align-items:end;
}
.v2x.atd.amd .amd-calc-f{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.v2x.atd.amd .amd-calc-f label{
  font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted);
}
.v2x.atd.amd .amd-calc-f input{
  width:100%; height:42px; padding:0 12px;
  border-radius:11px; border:1px solid var(--line); background:#fff;
  font-family:var(--mono); font-size:.9rem; font-weight:700; color:var(--ink);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.v2x.atd.amd .amd-calc-f input:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(54,128,237,.18);
}
body.theme-dark .v2x.atd.amd .amd-calc-f input{ background:#101219; border-color:#2A2F3E; color:#E6E9F0; }

.v2x.atd.amd .amd-calc-out{
  display:flex; flex-direction:column; gap:4px; justify-content:center;
  padding:8px 14px; border-radius:11px; min-height:42px;
  background:var(--accent); color:#fff;
  box-shadow:0 8px 18px -10px rgba(54,128,237,.7);
}
.v2x.atd.amd .amd-calc-ol{
  font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  /* White at 78% on the brand fill still clears AA for this label size. */
  color:rgba(255,255,255,.86);
}
.v2x.atd.amd .amd-calc-ov{
  font-family:var(--mono); font-size:1.2rem; font-weight:800; line-height:1.15;
  font-variant-numeric:tabular-nums; color:#fff;
}
.v2x.atd.amd .amd-calc-foot{ margin:12px 0 0; font-size:.8rem; color:var(--muted); }

/* ══════════════════════════════════════════════════════════════════════════
   §AMD-UC) Use cases — the shared §UC card, restacked for a title + sentence

   The tool page derives its use cases from a comma-separated "Best for" field,
   so its cards are a glyph and a label on ONE line, centred. A model's
   `use_cases` rows carry a title AND a paragraph, which needs a different
   layout — everything below is scoped to `.has-tx` so the label-only card is
   untouched. The wash, corner glow, tone ramp, border and hover are all the
   shared card; only the box model changes.

   ⚠️ THE BUG THIS REPLACES. `.amd-uc-tx` was given `flex:1 1 auto` but never
   a `display`, so it stayed an inline <span> — and both of its children are
   inline <span>s too. The title and the paragraph therefore ran together as
   one paragraph ("Social and ad creative Vertical 720x1280 clips built for
   the feed…"), and `.amd-uc-p{margin:5px 0 0}` did nothing because vertical
   margins do not apply to inline boxes. A flex property on a non-flex-item is
   silently ignored, which is why it read as correct.

   ⚠️ THE ICON MOVED ABOVE THE TEXT, and that is the redesign. Beside the text
   it took 42px + a 13px gap out of a ~230px card, leaving the sentence about
   143px — the bodies run 77-99 characters, so every card broke into six or
   seven ragged lines. Stacked, the same sentence gets the card's full ~198px
   (+38%) and lands in three or four. The grid is NOT widened to buy that room:
   at the 8 cards this section actually holds, a wider minimum drops the row
   from four columns to three and makes the section taller than the Features
   block above it.
   ══════════════════════════════════════════════════════════════════════════ */
.v2x.atd.amd .atd-uc-card.has-tx{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:0; padding:17px 17px 18px;
}
/* The tile keeps its size and gradient; only its spacing is the card's now. */
.v2x.atd.amd .atd-uc-card.has-tx .atd-uc-ic{ margin-bottom:13px; }
/* Block, not flex: the two children are inline spans and this is what makes
   them stack. `flex:1 1 auto` on the title is inert here and harmless. */
.v2x.atd.amd .amd-uc-tx{ display:block; width:100%; min-width:0; }
.v2x.atd.amd .atd-uc-card.has-tx .atd-uc-lb{
  display:block; font-size:.98rem; line-height:1.3; letter-spacing:-.012em;
  /* `overflow-wrap:anywhere` comes from the shared label and is wrong for a
     heading that now has room — it would hyphen-less-break a word mid-card.
     Titles here run 16-26 characters and fit; only a pathological one wraps. */
  overflow-wrap:normal; word-break:normal;
}
.v2x.atd.amd .amd-uc-p{
  display:block; margin:7px 0 0;
  font-size:.875rem; line-height:1.62; color:var(--muted);
  overflow-wrap:break-word;
}
@media (max-width:575.98px){
  /* One column on a phone, so the sentence has the whole width and the stack
     costs nothing. The tile shrinks with the shared §UC mobile rule. */
  .v2x.atd.amd .atd-uc-card.has-tx{ padding:14px 14px 15px; }
  .v2x.atd.amd .atd-uc-card.has-tx .atd-uc-ic{ margin-bottom:11px; }
  .v2x.atd.amd .atd-uc-card.has-tx .atd-uc-lb{ font-size:.95rem; }
  .v2x.atd.amd .amd-uc-p{ font-size:.86rem; line-height:1.58; }
}

/* ══════════════════════════════════════════════════════════════════════════
   §AMD-TR) Top Rated Models — medal ranks beside the model's own logo

   The row is the shared `.atd-alt`; this adds a fourth element in front of it
   and nothing else. Two constraints shaped the numbers:

   1 · WIDTH. `.atd-alt` gaps at 12px, and a fourth child adds a gap as well as
       a box. The badge is 26px and the row's gap drops to 10, so the addition
       costs 36px: on a 491px sidebar the name column still holds ~267px, and
       on a 360px phone ~144px — enough for "Google DeepMind" over two lines.

   2 · CONTRAST. The number is ~13px bold, which is NORMAL text to WCAG, so it
       needs 4.5:1 against BOTH ends of the gradient beneath it — not just the
       average. That is what rules out a literal medal palette: a mid-tone
       bronze (#C98A55 -> #8A4B1A) fails with white ink (2.90 at the light end)
       AND with dark ink (2.22 at the dark end), because L≈45% is a dead zone
       either way. All three medals are therefore a LIGHT tinted plate with
       dark ink, which is also the system the default blue plate already uses,
       so ranks 4-5 sit in the same family instead of looking unstyled:
         gold   #FDE68A -> #F5B01A, ink #5C3703 — 8.42 / 5.55
         silver #F8FAFC -> #CBD5E1, ink #334155 — 9.90 / 6.97
         bronze #F5DCC6 -> #DDA878, ink #5A3010 — 8.54 / 5.33

   The medals keep their light plates in dark mode, exactly as `.atd-logo-tile`
   does: metal reads as metal on a dark card, and a dimmed gold reads as mud.
   Only the default 4-5 plate gets a dark twin.
   ══════════════════════════════════════════════════════════════════════════ */
.v2x.atd.amd .atd-alt.amd-tr{ gap:10px; }
.v2x.atd.amd .amd-rk{
  flex:0 0 auto; width:26px; height:26px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font); font-size:.8rem; font-weight:800; line-height:1;
  font-variant-numeric:tabular-nums;
  background:var(--accent-soft); color:var(--accent-dark);
  border:1px solid var(--line);
  transition:transform 340ms cubic-bezier(.16,1,.3,1), box-shadow 300ms ease;
}
body.theme-dark .v2x.atd.amd .amd-rk{
  background:rgba(54,128,237,.20); color:#9CC5F9; border-color:rgba(54,128,237,.34);
}
.v2x.atd.amd .amd-rk.is-gold{
  background:linear-gradient(150deg,#FDE68A,#F5B01A); color:#5C3703;
  border-color:#E0A014;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65), 0 2px 6px -2px rgba(180,83,9,.50);
}
.v2x.atd.amd .amd-rk.is-silver{
  background:linear-gradient(150deg,#F8FAFC,#CBD5E1); color:#334155;
  border-color:#B6C2D2;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 2px 6px -2px rgba(51,65,85,.35);
}
.v2x.atd.amd .amd-rk.is-bronze{
  background:linear-gradient(150deg,#F5DCC6,#DDA878); color:#5A3010;
  border-color:#C68B58;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.70), 0 2px 6px -2px rgba(120,63,20,.42);
}
@media (hover:hover) and (pointer:fine){
  /* The shared row already lifts `.lg` and `img`; the badge joins them so the
     row answers the pointer as one object. */
  .v2x.atd.amd .atd-alt.amd-tr:hover .amd-rk{ transform:scale(1.08); }
}
@media (prefers-reduced-motion:reduce){
  .v2x.atd.amd .amd-rk{ transition:none !important; }
  .v2x.atd.amd .atd-alt.amd-tr:hover .amd-rk{ transform:none; }
}
@media (max-width:575.98px){
  .v2x.atd.amd .atd-alt.amd-tr{ gap:8px; }
  .v2x.atd.amd .amd-rk{ width:24px; height:24px; border-radius:8px; font-size:.76rem; }
}
/* ══════════════════════════════════════════════════════════════════════════
   §AMD-ALT) §AIM cards with nowhere to go, and the Features footer link

   ⚠️ `.atd-aim.is-static` IS NOT IN THE SHARED KIT. The company page defines
   it at `.v2x.atd.cmp`, which cannot match here — so a curated alternative
   with no slug would have lifted and glowed under the pointer while doing
   nothing. Restated at `.v2x.atd.amd` rather than moved up into atd-styles:
   promoting it would change the tool page, and this rebuild has no business
   doing that.
   ══════════════════════════════════════════════════════════════════════════ */
.v2x.atd.amd .atd-aim.is-static{ cursor:default; }
@media (hover:hover) and (pointer:fine){
  .v2x.atd.amd .atd-aim.is-static:hover{
    transform:none; border-color:rgba(var(--t-rgb),.20);
    box-shadow:0 1px 2px rgba(16,24,40,.04), 0 6px 20px rgba(16,24,40,.05);
  }
  body.theme-dark .v2x.atd.amd .atd-aim.is-static:hover{
    border-color:rgba(var(--t-rgb),.30);
    box-shadow:0 1px 2px rgba(0,0,0,.40), 0 6px 20px rgba(0,0,0,.35);
  }
}

/* The documentation link under Key Features. Centred on its own line so it
   reads as the section footer rather than as a seventh feature row. */
.v2x.atd.amd .atd-ft-more-wrap{ display:flex; justify-content:center; margin-top:18px; }

/* ══════════════════════════════════════════════════════════════════════════
   §AMD-RESP) Narrow viewports
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:1199.98px){
  /* The hero aside stops being a side-by-side column here, so its tiles get
     the full width back and can go two-up again rather than staying in the
     one-up layout the narrow column needed. */
  .v2x.atd.amd .amd-specs{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
}
@media (max-width:575.98px){
  .v2x.atd.amd .amd-specs{ grid-template-columns:1fr; }
  .v2x.atd.amd .amd-capgrid{ grid-template-columns:1fr; }
  .v2x.atd.amd .amd-calc{ padding:14px; }
}