/* Section 4: agents that run on OpenRouter. Same head as section 3; one
   wheel of agent icons; lime on the most used agent only. */

.agents { position: relative; z-index: 2; }
.agents .frame { padding-block: 0 var(--s6); row-gap: var(--s4); }
.ag-host { grid-column: 1 / -1; min-width: 0; display: grid; gap: var(--s3); }

/* The wheel runs from window edge to window edge, with no fade.
   agents.js moves the track and sizes the tiles with compositor animations;
   the CSS only lays them out at full size. */
.ag-wheel {
  margin-inline: calc(-1 * (var(--bleed) + var(--pad)));
  min-width: 0; overflow: hidden; touch-action: pan-y;
  cursor: grab; user-select: none; -webkit-user-select: none;
}
.ag-wheel.held { cursor: grabbing; }
.ag-wheel:focus-visible { outline: 2px solid var(--lime); outline-offset: -2px; }
.ag-wheel ul { list-style: none; display: flex; width: max-content; padding-block: 8px; will-change: transform; }
.ag-wheel li { flex: none; padding-inline: 24px; }
/* Each icon sits on a light plate, as granola.ai sets its logos on white
   tiles: the plate gives every icon the same contrast against the dark
   page, dark icons included. The icon takes 56% of the plate (Granola's
   55%), corners at the cards' 6px, and a half pixel edge at 10%. */
.ag-tile { position: relative; display: grid; place-items: center; width: 144px; height: 144px; border-radius: 6px; overflow: hidden; background: var(--fg); color: var(--bg); will-change: transform; }
.ag-tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 0.5px rgb(3 8 10 / 0.1); pointer-events: none; }
.ag-tile img { width: 56%; height: 56%; border-radius: 6px; object-fit: cover; pointer-events: none; }
.ag-tile svg { width: 40%; height: 40%; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.ag-tile img + svg { display: none; }

/* The agent at the middle, named under it. */
.ag-now { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 12px; min-height: 24px; font-size: 15px; line-height: 24px; font-variant-numeric: tabular-nums; }
.ag-now > * { white-space: nowrap; }
.ag-now span { font-weight: 500; color: var(--fg); }
.ag-now b { font-weight: 400; color: var(--muted); }
.ag-now b.lime { color: var(--lime); }
.ag-now em { font-style: normal; font-weight: 500; color: var(--green); }

@media (max-width: 860px) {
  .agents .frame { padding-bottom: var(--s5); }
  .ag-wheel li { padding-inline: 12px; }
  .ag-tile { width: 104px; height: 104px; }
}