/* Agents: the crate roster (/agents/) and agent profiles (/agents/<slug>/).
   Loaded after lab.css. Light or dark follows the system setting, like the rest of the site
   (same paper and ink as lab.css). Each agent has two accents, taken from its portrait: one that
   reads on white (--accent-l*) and one that reads on the dark page (--accent-d*); elements with
   the class .acc carry both inline and pick the one for the current scheme. */
body.agents {
  --paper: #ffffff; --ink: #14161a; --muted: #6a6f78; --faint: #9a9ea6; --line: #e4e5e8; --wash: #f4f3f0;
  --card: #fafaf8; --sel: #e4f2c4; --tip: #ffffff; --shadow: 0, 0, 0, .12;
  --acid: #5a7f00; --acid-rgb: 90, 127, 0; --acid-ink: #ffffff;
  --accent: var(--acid); --accent-ink: var(--acid-ink); --accent-rgb: var(--acid-rgb);
  color-scheme: light;
  background: var(--paper); color: var(--ink);
}
@media (prefers-color-scheme: dark) {
  body.agents {
    --paper: #101216; --ink: #e9eaee; --muted: #9a9fa9; --faint: #5f646e; --line: #262a31; --wash: #171a20;
    --card: #14161b; --sel: #2b3a10; --tip: #1d2026; --shadow: 0, 0, 0, .4;
    --acid: #c6ff3d; --acid-rgb: 198, 255, 61; --acid-ink: #0c0d10;
    color-scheme: dark;
  }
}
/* Profiles: a neutral grey accent instead of the portrait's colour. */
body.agents.grey { --accent: #6a6f78; --accent-ink: #ffffff; --accent-rgb: 106, 111, 120; }
@media (prefers-color-scheme: dark) {
  body.agents.grey { --accent: #9a9fa9; --accent-ink: #101216; --accent-rgb: 154, 159, 169; }
}
body.agents.acc, .acc { --accent: var(--accent-l); --accent-ink: var(--accent-ink-l); --accent-rgb: var(--accent-rgb-l); }
@media (prefers-color-scheme: dark) {
  body.agents.acc, .acc { --accent: var(--accent-d); --accent-ink: var(--accent-ink-d); --accent-rgb: var(--accent-rgb-d); }
}
body.agents a:hover { text-decoration-color: var(--accent); }
body.agents .site-nav a[href$="agents/"] { color: var(--ink); }

.ag-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.ag-eyebrow { font: 12px var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 0 0 14px; }
.ag-eyebrow a { text-decoration: none; }
.ag-eyebrow .sep { margin: 0 8px; color: var(--faint); }
.ag-h2 { font-size: clamp(26px, 3.4vw, 36px); line-height: 1.12; letter-spacing: -.02em; margin: 0 0 10px; font-weight: 650; }
.ag-lede { color: var(--muted); max-width: 640px; margin: 0 0 28px; }
.ag-section { padding: 72px 0 0; scroll-margin-top: 16px; }
.ag-note { font: 12px/1.5 var(--mono); color: var(--faint); margin: 14px 0 0; }

/* Buttons */
.ag-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; }
.ag-btn { display: inline-flex; align-items: center; gap: 8px; font: 13px var(--mono); text-decoration: none;
  padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); background: transparent;
  cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.ag-btn:hover { border-color: var(--accent); }
.ag-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.ag-btn.primary:hover { filter: brightness(1.08); }
.ag-btn svg { width: 15px; height: 15px; flex: none; }
.ag-btn:focus-visible, .ag-chip:focus-visible, .ag-card:focus-visible, .ag-copy:focus-visible, .ag-input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------------------------------------------------------------- roster */
.ag-hero { padding: 40px 0 8px; }
.ag-hero h1 { font-size: clamp(42px, 7.5vw, 92px); line-height: .98; letter-spacing: -.035em; margin: 0 0 22px; font-weight: 700; max-width: 900px; }
.ag-hero h1 em { font-style: italic; font-weight: 400; color: var(--acid); }
.ag-hero p.sub { font-size: 20px; line-height: 1.5; color: var(--muted); max-width: 640px; margin: 0; }

.ag-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin: 48px 0 0; }
.ag-tile { background: var(--paper); padding: 18px 18px 16px; }
.ag-tile b { display: block; font: 600 clamp(24px, 3vw, 32px)/1.1 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ag-tile span { display: block; font: 11px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-top: 6px; }

.ag-controls { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 0 0 24px; }
.ag-input { font: 14px var(--mono); background: var(--wash); color: var(--ink); border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 16px; min-width: 220px; flex: 1 1 220px; max-width: 320px; }
.ag-input::placeholder { color: var(--faint); }
.ag-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ag-chip { font: 12px var(--mono); border: 1px solid var(--line); background: none; color: var(--muted); padding: 5px 11px;
  border-radius: 999px; cursor: pointer; }
.ag-chip:hover { color: var(--ink); }
.ag-chip[aria-pressed=true] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ag-chip small { color: inherit; opacity: .6; margin-left: 4px; }
.ag-sort { margin-left: auto; font: 12px var(--mono); color: var(--muted); display: flex; align-items: center; gap: 8px; }
.ag-sort select { font: 12px var(--mono); background: var(--wash); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }
.ag-count { font: 12px var(--mono); color: var(--faint); margin: -10px 0 18px; }

.ag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; list-style: none; padding: 0; margin: 0; }
.ag-grid li[hidden] { display: none; }
.ag-card { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; background: var(--card);
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden; transition: border-color .2s, transform .2s; }
.ag-card:hover { border-color: var(--faint); transform: translateY(-2px); }
.ag-portrait { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--wash); }
.ag-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.ag-card:hover .ag-portrait img { transform: scale(1.035); }
.ag-portrait::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%;
  background: linear-gradient(transparent, color-mix(in srgb, var(--card) 92%, transparent)); pointer-events: none; }
.ag-badges { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; z-index: 1; }
.ag-badge { font: 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px;
  background: rgba(12, 13, 16, .72); border: 1px solid rgba(255, 255, 255, .12); color: #e9eaee; backdrop-filter: blur(6px); }
.ag-name { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; }
.ag-name span { display: block; font: 11px var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.ag-name b { display: block; font: 650 26px/1.1 var(--sans); letter-spacing: -.02em; margin-top: 4px; word-break: break-word; }
.ag-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.ag-card-body p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--muted); }
.ag-meta { margin-top: auto; display: flex; gap: 14px; font: 12px var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.ag-meta b { color: var(--ink); font-weight: 600; }
.ag-empty { font: 14px var(--mono); color: var(--muted); padding: 40px 0; }

/* Fleet charts */
.ag-panels { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .ag-panels { grid-template-columns: 1.5fr 1fr; } .ag-panels .wide { grid-column: 1 / -1; } }
.ag-panel { border: 1px solid var(--line); border-radius: 14px; padding: 20px 20px 18px; background: var(--card); min-width: 0; }
.ag-panel h3 { font-size: 16px; margin: 0 0 2px; font-weight: 600; }
.ag-panel .cap { font: 12px var(--mono); color: var(--muted); margin: 0 0 16px; }
.ag-chart { position: relative; }
.ag-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.ag-chart .grid { stroke: var(--line); stroke-width: 1; }
.ag-chart .axis { font: 11px var(--mono); fill: var(--faint); }
.ag-chart .area { fill: rgba(var(--accent-rgb), .14); }
.ag-chart .line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ag-chart .bar { fill: var(--accent); }
.ag-chart .bar.zero { fill: var(--line); }
.ag-chart .hit { fill: transparent; cursor: crosshair; }
.ag-chart .cross { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.ag-chart .dot { fill: var(--accent); stroke: var(--card); stroke-width: 2; }
.ag-tip { position: absolute; pointer-events: none; transform: translate(-50%, calc(-100% - 10px)); white-space: nowrap;
  background: var(--tip); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font: 12px var(--mono); color: var(--ink);
  box-shadow: 0 6px 20px rgba(var(--shadow)); z-index: 3; }
.ag-tip span { color: var(--muted); display: block; font-size: 11px; }
.ag-bars { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ag-bars a { display: grid; grid-template-columns: 112px 1fr 52px; text-align: left; gap: 12px; align-items: center; text-decoration: none; font: 13px var(--mono); }
.ag-bars .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.ag-bars .track { height: 10px; border-radius: 0 4px 4px 0; background: var(--wash); overflow: hidden; }
.ag-bars .fill { display: block; height: 100%; background: var(--acid); border-radius: 0 4px 4px 0; min-width: 2px; }
.ag-bars .val { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.ag-bars a:hover .lbl { color: var(--acid); }
.ag-recent { list-style: none; margin: 0; padding: 0; font: 13px var(--mono); }
.ag-recent li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.ag-recent li:first-child { border-top: 0; }
.ag-recent a { text-decoration: none; }
.ag-recent span { color: var(--muted); }
.ag-howto { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); background: var(--line);
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden; counter-reset: step; }
.ag-howto div { background: var(--paper); padding: 18px; font-size: 15px; color: var(--muted); }
.ag-howto b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 6px; }
.ag-howto b::before { counter-increment: step; content: "0" counter(step) "  "; font: 12px var(--mono); color: var(--acid); }
details.ag-table { margin-top: 14px; font: 12px var(--mono); color: var(--muted); }
details.ag-table summary { cursor: pointer; }
details.ag-table table { border-collapse: collapse; margin-top: 8px; width: 100%; }
details.ag-table td, details.ag-table th { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--line); }

/* ---------------------------------------------------------------- profile */
.pf-hero { display: grid; gap: 40px; grid-template-columns: 1fr; padding: 24px 0 0; align-items: center; }
@media (min-width: 880px) { .pf-hero { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; } }
.pf-portrait { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--wash);
  box-shadow: 0 0 0 1px var(--line), 0 30px 80px -30px rgba(var(--accent-rgb), .45); max-width: 520px; width: 100%; }
.pf-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-portrait .glow { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent); box-shadow: 0 0 26px 4px rgba(var(--accent-rgb), .6); }
.pf-portrait .rank { position: absolute; top: 14px; right: 14px; }
.pf-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 18px; }
.pf-tag { font: 12px var(--mono); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.pf-tag.role { color: var(--accent); border-color: rgba(var(--accent-rgb), .45); background: rgba(var(--accent-rgb), .08); }
.pf-tag.ok::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 7px; vertical-align: 1px; }
.pf-hero h1 { font-size: clamp(44px, 7vw, 84px); line-height: .98; letter-spacing: -.035em; margin: 0; font-weight: 700; word-break: break-word; }
.pf-codename { font-size: 22px; font-style: italic; color: var(--accent); margin: 10px 0 18px; }
.pf-tagline { font-size: 21px; line-height: 1.45; color: var(--muted); margin: 0; max-width: 560px; }

.pf-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden; }
.pf-stats > div { background: var(--paper); padding: 20px; }
.pf-stats b { display: block; font: 650 clamp(30px, 4.5vw, 46px)/1 var(--sans); letter-spacing: -.03em; color: var(--accent); font-variant-numeric: tabular-nums; }
.pf-stats span { display: block; font: 11px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-top: 8px; }
@media (max-width: 560px) { .pf-stats { grid-template-columns: 1fr; } }

.pf-two { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 880px) { .pf-two { grid-template-columns: 1fr 1fr; } }
.pf-dossier { display: grid; grid-template-columns: max-content 1fr; gap: 0; margin: 0; font-size: 15.5px; }
.pf-dossier dt, .pf-dossier dd { padding: 11px 0; border-top: 1px solid var(--line); margin: 0; }
.pf-dossier dt { font: 11px/2 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding-right: 20px; }
.pf-dossier dt:first-of-type, .pf-dossier dt:first-of-type + dd { border-top: 0; }
.pf-dossier code { font: 13px var(--mono); }

.pf-uses { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); list-style: none; padding: 0; margin: 0; counter-reset: u; }
.pf-uses li { border: 1px solid var(--line); border-radius: 14px; padding: 18px; background: var(--card); color: var(--muted); font-size: 15.5px; }
.pf-uses li::before { counter-increment: u; content: "0" counter(u); display: block; font: 12px var(--mono); color: var(--accent); margin-bottom: 10px; }

.pf-code { position: relative; margin: 0 0 18px; }
.pf-code .lbl { font: 11px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 0 0 8px; }
.pf-code pre { margin: 0; background: var(--wash); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; overflow: auto;
  font: 13.5px/1.6 var(--mono); color: var(--ink); white-space: pre; }
.pf-code pre.wrap { white-space: pre-wrap; }
.ag-copy { position: absolute; top: -4px; right: 0; font: 11px var(--mono); background: var(--paper); color: var(--muted);
  border: 1px solid var(--line); border-radius: 6px; padding: 4px 9px; cursor: pointer; }
.ag-copy:hover { color: var(--accent); border-color: var(--accent); }

.pf-specs { display: grid; grid-template-columns: max-content 1fr; margin: 0; font: 13.5px/1.5 var(--mono); }
.pf-specs dt, .pf-specs dd { padding: 10px 0; border-top: 1px solid var(--line); margin: 0; }
.pf-specs dt { color: var(--muted); padding-right: 28px; }
.pf-specs dd a { text-decoration-color: var(--faint); }
.pf-table { width: 100%; border-collapse: collapse; font: 13px var(--mono); }
.pf-table th, .pf-table td { text-align: left; padding: 9px 10px 9px 0; border-bottom: 1px solid var(--line); }
.pf-table th { color: var(--muted); font-weight: 400; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.pf-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.pf-table .yanked { color: var(--faint); text-decoration: line-through; }
.pf-scroll { overflow-x: auto; }

.pf-readme { border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.pf-readme > summary { cursor: pointer; list-style: none; padding: 16px 20px; font: 13px var(--mono); display: flex; justify-content: space-between; }
.pf-readme > summary::-webkit-details-marker { display: none; }
.pf-readme > summary::after { content: "+"; color: var(--accent); }
.pf-readme[open] > summary::after { content: "−"; }
.pf-readme .prose { padding: 0 20px 24px; max-width: none; font-size: 16px; }
.pf-readme .prose h1 { font-size: 26px; }
.pf-readme .prose pre { background: var(--wash); }
.pf-readme .prose img { max-width: 100%; }
body.agents .prose code { background: var(--wash); }
body.agents .prose a { text-decoration-color: rgba(var(--accent-rgb), .6); }

.pf-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; list-style: none; padding: 0; margin: 0; }
.pf-links a { display: block; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; text-decoration: none; background: var(--card); }
.pf-links a:hover { border-color: var(--accent); }
.pf-links b { display: block; font-size: 15px; }
.pf-links span { font: 12px var(--mono); color: var(--muted); }

.pf-pending { font: 12px/1.5 var(--mono); color: var(--faint); border: 1px dashed var(--line); border-radius: 10px; padding: 10px 14px; margin-top: 18px; max-width: 520px; }

@media (max-width: 640px) {
  .ag-wrap { padding: 0 16px; }
  .ag-sort { margin-left: 0; }
  .ag-bars a { grid-template-columns: 90px 1fr auto; }
  .ag-section { padding-top: 56px; }
}
@media (prefers-reduced-motion: reduce) { .ag-card, .ag-portrait img { transition: none; } .ag-card:hover { transform: none; } }