/* Agent gallery (dev only). Only what /assets/site.css cannot express; every card, tile, plane, figure,
   control and heading takes its size, radius, type and colour from site.css. No new colours.
   Layouts are the site's own: column planes (systems page), the dark tile grid (home), card grids (ideas),
   the full-width architecture figure and the outline / article / rail of a system page. */

/* Masthead: the added "Agents" item would push the search box onto the second row at 1280. Live keeps
   brand, nav and search on row one there; narrowing the primary-nav column gap keeps that layout.
   Control sizes are unchanged. Below 1200 the nav already sits on its own row (site.css). */
@media (min-width: 1200px) { .site-nav ul { column-gap: 0.55rem; } }

/* small tile sizes used in rails, plane eyebrows and route headings */
.tile.tile-xs { width: 28px; height: 28px; border-radius: 7px; }
.tile.tile-xs svg { width: 16px; height: 16px; }
.tile.tile-sm { width: 32px; height: 32px; border-radius: 8px; }
.tile.tile-sm svg { width: 18px; height: 18px; }
.ag-eb, .plane .eyebrow.ag-eb { display: flex; align-items: center; gap: 0.6rem; }
.plane .eyebrow.ag-eb a { color: inherit; text-decoration: none; }
.plane .eyebrow.ag-eb a:hover { color: var(--accent); }
.ag-ic-inline { width: 16px; height: 16px; flex: none; }
.pm-obj { position: relative; min-width: 0; }
.pm-obj > span:last-child { min-width: 0; }
.obj.key .tile, .plane.dark .tile { background: rgba(255, 255, 255, 0.14); color: #fff; }
.obj.key.pm-obj { color: #fff; }

/* index pages */
.ag-band-tile { margin-bottom: 1rem; }
.ag-sec { margin-top: 2.75rem; }
.ag-sec.ag-first { margin-top: 0; }
.ag-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem 1rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.ag-head .ag-eb { margin: 0; }
.ag .section-lede { margin-top: -0.3rem; }
.ag-sec > .arch { margin: 0; }
.ag-back { margin: 2rem 0 0; font-weight: 600; }

/* Column planes. Columns in one figure end on the same line: the plane is a flex column and its tiles
   share whatever height the tallest column sets. */
.ag-planes > .plane { display: flex; flex-direction: column; min-width: 0; }
.ag-planes > .plane > .objs { flex: 1 1 auto; }
.ag-planes > .plane > .objs:not(.cols3) > .obj { flex: 1 1 auto; }
/* plane labels share one row, so the tiles under them start on the same line */
@media (min-width: 600px) {
  @supports (grid-template-rows: subgrid) {
    .ag-map .arch-planes > .pm-plane, .arch-planes.ag-relay > .pm-plane { display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 0; align-content: start; }
  }
}
@media (min-width: 600px) and (max-width: 959px) {
  .ag-map .arch-planes, .arch-planes.ag-relay { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arch-planes.ag-relay > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.ag .objs.cols3 { grid-auto-rows: 1fr; }
@media (max-width: 720px) { .ag .objs.cols3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .ag .objs.cols3 { grid-template-columns: minmax(0, 1fr); } }

/* Tile grid: equal tiles two across, an odd last tile spans the row; .ag-wide runs --k across from 960px */
.objs.ag-grid { display: grid; gap: 0.6rem; grid-template-columns: minmax(0, 1fr); list-style: none; padding: 0; }
@media (min-width: 560px) {
  .objs.ag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .objs.ag-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 960px) {
  .objs.ag-grid.ag-wide { grid-template-columns: repeat(var(--k, 2), minmax(0, 1fr)); }
  .objs.ag-grid.ag-wide > :last-child:nth-child(odd) { grid-column: auto; }
}
.ag-article > .objs.ag-grid { margin-top: 0.75rem; }
@media (min-width: 960px) {
  .objs.ag-grid.ag-five { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .objs.ag-grid.ag-five > * { grid-column: span 2; }
  .objs.ag-grid.ag-five > :nth-last-child(-n+2), .objs.ag-grid.ag-five > :last-child:nth-child(odd) { grid-column: span 3; }
}
/* Agent roles on system and capability pages: one more article section, set like the prose headings above it */
.article > .ag-runs { margin-top: 3.9rem; }
.ag-runs .section-head h2 { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.7rem); line-height: 1.2; letter-spacing: -0.025em; scroll-margin-top: 1.25rem; }

/* functions: the home page's dark tile grid, five across so ten tiles fill two rows */
.sys-grid.ag-fn-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .sys-grid.ag-fn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .sys-grid.ag-fn-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.sys-card p.ag-fn-meta { margin-top: auto; padding-top: 0.55rem; display: flex; flex-wrap: wrap; gap: 0.15rem 0.9rem; font-size: 0.76rem; color: var(--on-navy-3); }

/* kinds: one filled tile for the work, six around it */
.ag-solo .obj { flex-direction: column; justify-content: center; gap: 0.7rem; padding: 1rem 1.05rem; }
.ag-solo .obj strong { font-size: 1.02rem; }
.ag-solo .obj .d { font-size: 0.82rem; }

/* route figure */
.ag-route { margin-top: 0; }
.ag-route + .ag-route { margin-top: 2.5rem; padding-top: 2.25rem; border-top: 1px solid var(--rule); }
.ag-route .arch-head h2, .ag-route .arch-head h3 { margin: 0.3rem 0 0; font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); }
.ag-route-text { margin: 0.55rem 0 0; max-width: 78ch; font-size: 0.93rem; }
.ag-route .pm-across { margin-top: 0; }
@media (min-width: 960px) {
  .ag-relay.ag-v .obj { flex-direction: column; gap: 0.55rem; }
}

/* numbered tiles: flow steps and route cells */
.ag-stepn {
  position: absolute; top: -9px; left: -9px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--tone, var(--accent)); color: #fff; font: 700 0.66rem/1 var(--font-display);
  display: inline-flex; align-items: center; justify-content: center; z-index: 1;
}
.obj.key .ag-stepn { background: var(--ink); color: var(--bg); }

/* How the work moves: full-width figure under the hero, as on a system page */
.ag-flow .obj strong { font-size: 0.9rem; line-height: 1.35; }
.ag-flow .obj .d { font-size: 0.78rem; margin-top: 0.15rem; }
.ag-flow .pm-obj { align-items: center; }
.ag-term-b { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 0.85rem; padding: 0.9rem 0 0.6rem; }
.plane .ag-term-t { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.28; letter-spacing: -0.01em; color: var(--ink); }
.plane.dark .ag-term-t { color: var(--on-navy); }
.ag-legend-note { margin-left: auto; }
@media (min-width: 600px) and (max-width: 959px) {
  .arch-planes.ag-flowp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ag-flowp > .ag-term { grid-column: 1 / -1; }
  .ag-flowp .ag-term-b { flex-direction: row; align-items: center; padding: 0.7rem 0 0.2rem; }
}
@media (max-width: 599px) { .ag-flowp .ag-term-b { flex-direction: row; align-items: center; padding: 0.7rem 0 0.2rem; } .ag-legend-note { margin-left: 0; } }

/* role and specialist articles */
.ag-article > .prose h2 { margin-top: 2.3em; }
.ag-article > .prose:first-child h2 { margin-top: 0; }
.ag-article .breadth { margin-top: 0.75rem; }
.ag-breadth .breadth-row { grid-template-columns: 34px minmax(0, 13rem) minmax(0, 1fr) 2.5rem; }
.ag-breadth .breadth-name { white-space: normal; }
@media (max-width: 720px) { .ag-breadth .breadth-row { grid-template-columns: 28px minmax(0, 1fr) 2.4rem; } }

/* crew: kind planes in two balanced columns, or a full-width plane with its tiles two across */
.ag-crew { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.9rem; }
.ag-crew-cols { display: grid; gap: 0.75rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .ag-crew-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ag-crew-col { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.ag-crew-col > .plane { display: flex; flex-direction: column; flex-basis: auto; }
.ag-crew-col > .plane > .objs { flex: 1 1 auto; }
.ag-crew-col > .plane > .objs > .obj { flex: 1 1 auto; }
.ag-crew .objs { list-style: none; padding: 0; margin-bottom: 0; }
/* icon and name share the first line; the description runs the full width of the tile under them */
.ag-crew-tile { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.65rem; row-gap: 0; align-items: center; align-content: start; }
.ag-crew-tile .tile { grid-column: 1; grid-row: 1; }
.ag-crew-body { display: contents; }
.ag-crew-tile strong { grid-column: 2; grid-row: 1; line-height: 1.2; }
.ag-crew-tile .d { grid-column: 1 / -1; }
.ag-crew-tile strong + .d { margin-top: 0.5rem; }
.ag-crew-tile strong { font-size: 0.92rem; }
.ag-crew-tile strong a { color: var(--ink); text-decoration: none; }
.ag-crew-tile strong a:hover { color: var(--accent); text-decoration: underline; }
.ag-crew-tile .d { font-size: 0.8rem; line-height: 1.45; margin-top: 0.15rem; display: block; }
.ag-crew-tile .d.ag-also { margin-top: 0.3rem; color: var(--ink-3); }
.ag-crew-tile:target { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* a route inside an article: numbered cells in order */
.ag-strip { margin-top: 0.75rem; }
.ag-strip-cells { list-style: none; margin: 0.9rem 0 0; padding: 0; display: grid; gap: 0.6rem; grid-template-columns: minmax(0, 1fr); }
.ag-strip-cells > li { display: flex; min-width: 0; margin: 0; }
.ag-strip-cells .obj { flex: 1 1 auto; align-items: center; }
@media (min-width: 560px) {
  .ag-strip-cells { grid-template-columns: repeat(var(--k, 3), minmax(0, 1fr)); }
  .ag-strip-cells .obj { flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 0.75rem 0.6rem 0.7rem; }
  .ag-strip-cells .obj strong { font-size: 0.78rem; line-height: 1.25; overflow-wrap: break-word; hyphens: auto; }
}

/* rail items with icon tiles */
.rail .ag-rail-a { display: flex; align-items: center; gap: 0.6rem; }
.rail-heading.ag-eb { gap: 0.5rem; }

/* role hero: the role ringed by its crew, beside the kinds of agent on it */
.ag-hv { gap: 1rem; }
.ag-hv-body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.5rem; align-items: center; padding: 0.4rem 0.3rem 0.5rem; }
.ag-hv-ring { position: relative; width: clamp(160px, 36vw, 220px); aspect-ratio: 1; }
.ag-hv-orbit { position: absolute; inset: 7%; border-radius: 50%; border: 1px dashed var(--navy-rule); }
.ag-seat {
  position: absolute; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%;
  background: var(--navy-2); border: 2px solid var(--seat, var(--accent)); color: var(--on-navy);
  display: inline-flex; align-items: center; justify-content: center;
}
.ag-seat svg { width: 16px; height: 16px; }
a.ag-seat { text-decoration: none; transition: transform 0.15s; }
a.ag-seat:hover, a.ag-seat:focus-visible { transform: translate(-50%, -50%) scale(1.15); color: #fff; }
.ag-hv-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 40%; aspect-ratio: 1; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #fff;
  box-shadow: 0 0 50px color-mix(in srgb, var(--tone, var(--accent)) 45%, transparent);
}
.ag-hv-core svg { width: 42%; height: 42%; }
.ag-hv-kinds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ag-hv-kinds li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 0.6rem; align-items: center; padding: 0.42rem 0; border-top: 1px solid var(--navy-rule); font-size: 0.84rem; line-height: 1.25; color: var(--on-navy); }
.ag-hv-kinds li:first-child { border-top: 0; }
.ag-hv-kinds i { width: 10px; height: 10px; border-radius: 50%; }
.ag-hv-kinds b { font-family: var(--font-display); font-weight: 700; color: var(--on-navy-2); }
@media (max-width: 480px) { .ag-hv-body { grid-template-columns: minmax(0, 1fr); justify-items: center; } .ag-hv-kinds { width: 100%; } }

/* specialist hero: what wakes it, the specialist, the roles it serves */
.ag-hv-row { display: grid; grid-template-columns: minmax(0, 1fr) 14px auto 14px minmax(0, 1fr); gap: 6px; align-items: center; }
.ag-hv-end { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.ag-hv-end .eyebrow { color: var(--on-navy-3); }
.ag-hv-t { font-family: var(--font-display); font-weight: 700; font-size: 0.86rem; line-height: 1.3; color: var(--on-navy); }
.ag-hv-arrow { height: 2px; background: var(--navy-rule); position: relative; }
.ag-hv-arrow::after { content: ""; position: absolute; right: -1px; top: -4px; width: 8px; height: 8px; border-top: 2px solid var(--navy-rule); border-right: 2px solid var(--navy-rule); transform: rotate(45deg); }
.ag-hv-solo { width: clamp(96px, 22vw, 130px); }
.ag-hv-solo .ag-hv-core { width: 78%; }
.ag-hv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.ag-hv-list li { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; line-height: 1.25; color: var(--on-navy); font-weight: 600; }
.ag-hv-list .ag-ic-inline { color: var(--on-navy-3); }
@media (max-width: 480px) { .ag-hv-t { font-size: 0.78rem; } .ag-hv-row { gap: 4px; grid-template-columns: minmax(0, 1fr) 10px auto 10px minmax(0, 1fr); } }

/* directory filters: site.css .filter-search gives the control type, colour, radius and padding; only the
   layout changes. >=900: search plus three label/select pairs on one row, equal select widths.
   721-899: search on its own row, the three pairs below. <=720: everything full width, label above select. */
.ag .tech-filters .filter-search { display: grid; gap: 0.6rem 0.75rem; align-items: center; }
.ag .tech-filters .filter-search input, .ag .tech-filters .filter-search select { width: 100%; min-width: 0; margin-right: 0; }
.ag .tech-filters .filter-search label { white-space: nowrap; min-width: 0; }
@media (min-width: 900px) {
  .ag .tech-filters .filter-search { grid-template-columns: minmax(10rem, 1.3fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); }
}
@media (min-width: 721px) and (max-width: 899px) {
  .ag .tech-filters .filter-search { grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); }
  .ag .tech-filters .filter-search input { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .ag .tech-filters .filter-search { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }
  .ag .tech-filters .filter-search label:not(.visually-hidden) { margin-top: 0.5rem; }
}
.ag-card[hidden] { display: none; }
.breadth-legend .ag-ic-inline { color: var(--ink-3); }

/* Home page: the Agents band, one more scale card, one more Browse tile.
   The band puts the featured-role figure beside four number cards from 1200px; below that the cards
   run four across under the figure, then two across. */
/* the idea tiles in one row share a height: the link fills its grid cell */
.idea-strip a { height: 100%; }
.ag-home-top { display: grid; gap: 0.85rem; grid-template-columns: minmax(0, 1fr); margin-bottom: 0.85rem; }
.ag-home-top > .ag-home-map { margin: 0; min-width: 0; }
.ag-home-map .arch-planes { row-gap: 1.35rem; }
.ag-nums { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .ag-nums { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) {
  .ag-home-top { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); align-items: stretch; }
  .ag-nums { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; }
  .stat.ag-num { flex-direction: row; align-items: center; gap: 0.95rem; padding: 0.9rem 1.15rem; }
  .stat.ag-num .tile { flex: none; }
  .stat.ag-num .label { margin-top: 0.3rem; }
}
@media (max-width: 720px) { .ag-home-map .objs.cols2 { grid-template-columns: minmax(0, 1fr); } }
/* scale strip: seven cards stay on one row; at tablet width four across with the last card closing the row */
@media (max-width: 599px) {
  .scale .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scale .stat-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 600px) and (max-width: 1199px) {
  .scale .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .scale .stat-grid > :last-child:nth-child(4n + 3) { grid-column: span 2; }
}
@media (min-width: 1200px) { .scale .stat-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.home-section .wrap > .section-head.ag-home-sub { margin: 1.6rem 0 0.8rem; }
.section-head.ag-home-sub h3 { margin: 0; font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); letter-spacing: -0.02em; }
.search-result .sr-fold { color: var(--ink-3); margin-top: 0.1rem; }