/* /trust/ai-evaluation: the parts of the page beyond the shared trust
   language in trust.css (loaded first): the hero's diagram panel, one night
   chapter, icon and count cards, and sections set as text beside a diagram
   panel on wide screens. The contents rail follows /trust/ai-safety. Tokens
   come from site.css. */

/* Diagram roles. The SVGs paint only through these, so the night chapter
   re-themes its diagram by redefining them. */
:root {
  --d-bg: var(--white); --d-ink: var(--ink); --d-muted: var(--muted); --d-line: var(--line);
  --d-arrow: var(--muted); --d-bar: var(--rule); --d-sage: var(--sage); --d-mint: var(--mint);
  --d-on-mint: var(--ink); --d-pass: var(--green); --d-on-pass: var(--paper);
  --d-alert: var(--alert); --d-alert-line: var(--alert); --d-on-alert: var(--white); --d-caution: var(--caution);
}

/* ---------- Hero: the release gate beside the headline ---------- */

/* The mint field, breadcrumb, headline and lead come from trust.css. */
.ae-hero { display: grid; gap: clamp(32px, 4vw, 56px); align-items: center; }
.ae-hero h1 { max-width: none; }
.ae-hero .trust-lead { max-width: 34ch; }
.ae-hero-panel { margin: 0; background: var(--white); border-radius: 24px; padding: clamp(14px, 2vw, 28px); box-shadow: 0 24px 60px rgba(15, 30, 46, .14); }
@media (min-width: 1000px) {
  .ae-hero { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* ---------- Contents rail (as on /trust/ai-safety) ---------- */

.ae-layout { display: grid; grid-template-columns: minmax(0, 1fr); }
.ae-contents { padding-block: 24px 8px; border-top: 1px solid var(--rule); }
.ae-contents ol { list-style: none; margin: 10px 0 0; padding: 0; }
.ae-contents a { display: block; padding: 6px 0; font-size: 15px; line-height: 1.35; color: var(--muted); text-decoration: none; }
.ae-contents a:hover, .ae-contents a[aria-current="true"] { color: var(--ink); }
.ae-contents a[aria-current="true"] { font-weight: 600; }
@media (min-width: 1100px) {
  .ae-layout { grid-template-columns: 220px minmax(0, 1fr); gap: clamp(40px, 4vw, 64px); align-items: start; }
  .ae-contents { position: sticky; top: calc(var(--header) + 32px); border-top: 0; padding-top: clamp(90px, 12vh, 150px); }
  .ae-contents ol { margin-top: 16px; border-left: 1px solid var(--rule); }
  .ae-contents a { padding: 7px 0 7px 16px; margin-left: -1px; border-left: 2px solid transparent; font-size: 14px; transition: color .2s, border-color .2s; }
  .ae-contents a[aria-current="true"] { border-left-color: var(--green); }
}

/* ---------- Sections ---------- */

.ae-section { display: grid; gap: clamp(32px, 4vw, 48px); padding-block: clamp(80px, 12vh, 150px); border-top: 1px solid var(--rule); scroll-margin-top: var(--header); }
.ae-section:first-child, .ae-layout-continued .ae-section:first-child { border-top: 0; }
.ae-text { display: grid; gap: 18px; align-content: start; }
.ae-section h2, .ae-head h2 { font-size: clamp(2.2rem, 4.4vw, 4rem); letter-spacing: -.045em; max-width: 18ch; }
.ae-prose, .ae-head p.ae-prose { font-size: clamp(1.05rem, 1.3vw, 1.22rem); color: var(--muted); max-width: 48ch; }
@media (min-width: 1100px) {
  .ae-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
  .ae-split h2 { font-size: clamp(2rem, 3.2vw, 3.2rem); }
  .ae-split > .ae-full { grid-column: 1 / -1; }
}

/* ---------- Panels and figures ---------- */

.ae-panel { margin: 0; background: var(--white); border: 1px solid var(--rule); border-radius: 22px; padding: clamp(14px, 2vw, 28px); }
.ae-panel svg { display: block; width: 100%; height: auto; overflow: visible; }
.ae-panel figcaption, .ae-shot figcaption { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--muted); max-width: 64ch; }
.ae-panel .ae-narrow, .ae-hero-panel .ae-narrow { display: none; }
.ae-hero-panel svg { display: block; width: 100%; height: auto; overflow: visible; }
@media (max-width: 699px) {
  .ae-panel .ae-wide, .ae-hero-panel .ae-wide { display: none; }
  .ae-panel .ae-narrow, .ae-hero-panel .ae-narrow { display: block; }
}
.ae-panel-ladder svg.ae-wide { max-width: 520px; margin-inline: auto; }
.ae-panel-loop svg { max-width: 560px; margin-inline: auto; }

/* ---------- Cards ---------- */

.ae-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.ae-card { display: grid; gap: 8px; align-content: start; background: var(--white); border: 1px solid var(--rule); border-radius: 18px; padding: 22px 22px 24px; }
.ae-card.tint { background: var(--sage); border-color: transparent; }
.ae-card h3 { font-size: 1.12rem; line-height: 1.25; letter-spacing: -.015em; }
.ae-card p { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.ae-ico { width: 28px; height: 28px; color: var(--green); margin-bottom: 6px; }
.ae-stat { font-size: clamp(2.8rem, 4vw, 3.8rem); line-height: 1; font-weight: 600; letter-spacing: -.04em; color: var(--green); margin-bottom: 6px; }
.ae-note { font-size: 14px; color: var(--muted); }

.ae-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 4px 0 0; padding: 0; }
.ae-chips li { background: var(--sage); color: var(--ink); border-radius: 999px; padding: 7px 14px; font-size: 14px; font-weight: 600; }
.m-intel .ae-chips li { background: var(--night-3); color: var(--mint); }

.ae-ticks { list-style: none; margin: 0; padding: 0; display: grid; }
.ae-ticks li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 14px 0; border-top: 1px solid var(--rule); font-size: clamp(1.02rem, 1.3vw, 1.15rem); line-height: 1.45; }
.ae-ticks li:last-child { border-bottom: 1px solid var(--rule); }
.ae-ticks svg { width: 20px; height: 20px; color: var(--green); margin-top: 3px; }
.ae-standing { background: var(--ink); color: var(--paper); border-radius: 18px; padding: 22px 24px; display: grid; gap: 6px; }
.ae-standing .eyebrow { color: var(--mint); }
.ae-standing p:not(.eyebrow) { color: var(--paper); font-size: 15px; line-height: 1.55; }

/* ---------- Screenshots ---------- */

.ae-shots { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 900px) { .ae-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ae-shot { margin: 0; }
.ae-shot-frame { overflow: hidden; background: var(--white); border: 1px solid var(--rule); border-radius: 16px; box-shadow: 0 18px 40px rgba(15, 30, 46, .08); }
.ae-shot img { display: block; width: 100%; height: auto; }

/* ---------- Section 07: the night chapter ---------- */

/* The night field and its spacing come from trust.css; here the diagram
   roles are redefined for it. */
.m-intel {
  --d-bg: var(--night-2); --d-ink: var(--night-ink); --d-muted: var(--night-muted); --d-line: var(--night-line);
  --d-arrow: var(--night-muted); --d-bar: var(--night-line); --d-sage: var(--night-3); --d-pass: var(--mint);
  --d-on-pass: var(--night); --d-alert-line: var(--night-muted);
}
.ae-chapter .wrap { display: grid; gap: clamp(32px, 4vw, 56px); align-items: center; }
@media (min-width: 1000px) { .ae-chapter .wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.ae-head { display: grid; gap: 18px; }
.ae-head p.ae-prose { color: var(--night-muted); }
.ae-arch { margin: 0; padding: clamp(14px, 2vw, 28px); border: 1px solid var(--night-line); border-radius: 22px; background: radial-gradient(120% 90% at 50% 0%, #12283b 0%, var(--night) 60%); }
.ae-arch svg { display: block; width: 100%; max-width: 560px; height: auto; margin-inline: auto; overflow: visible; }
.ae-arch figcaption { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--night-muted); }
.ae-arch .ae-narrow { display: none; }
@media (max-width: 699px) { .ae-arch .ae-wide { display: none; } .ae-arch .ae-narrow { display: block; } }

/* ---------- Motion ---------- */

/* Connectors flow like the homepage's .ar-f. Arrowheads show
   wherever the dashes are still: reduced motion and print. */
.flow { animation: ae-flow 1.2s linear infinite; }
@keyframes ae-flow { to { stroke-dashoffset: -14; } }
@media (prefers-reduced-motion: no-preference) { .arrow-static { display: none; } }
@media print {
  .flow { animation: none; }
  .arrow-static { display: inline; }
  .ae-contents { display: none; }
}