/* The agent pages (agents/ and agents/<slug>/) share styles.css and
   compare.css: the hero, the table, the "same on all" line, the FAQ list and
   the closing call. This sheet adds what a page about one CLI needs on top:
   its mark and command over the headline, the one-column table, the setup
   steps and the notes. Dark only, like the rest of the site. */

/* ---------- hero ---------- */
.agent-hero .hero-head h1 { max-width: 16ch; }
.agent-hero .shot-frame { margin-top: clamp(2.5rem, 5vw, 4rem); }
.agent-hero .shot-frame img { width: 100%; height: auto; }
.agent-name { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.agent-name .provider-mark { grid-row: auto; }
.agent-name code { font-size: 0.875rem; color: var(--muted); }
.cmp-hero .provider-grid--links { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* ---------- one agent's table ---------- */
/* One value column: it takes the panel colour the comparison gives
   Starkomand's column, and on phones the label above it is enough, so the
   cell drops the product name the stacked comparison rows print. */
.cmp--one col.cmp-col-criterion { width: 26%; }
.cmp--one td { background: var(--panel); color: var(--on-panel); }
.cmp--one td .cell-note { color: var(--on-panel-2); }
.cmp--one code, .cmp--agents code { font-size: 0.875em; }
@media (max-width: 899.98px) {
  .cmp--one td { display: block; margin: 0 8px 6px; padding: 12px 10px; border-radius: 12px; }
  .cmp--one td::before { content: none; }
}

/* ---------- the hub table ---------- */
.cmp--agents col.cmp-col-criterion { width: 16%; }
.cmp--agents tbody th a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--edge); text-underline-offset: 0.2em; }
.cmp--agents tbody th a:hover { text-decoration-color: var(--text); }
.cmp--agents tbody th .cmp-sub { display: block; margin-top: 2px; font-size: 0.8125rem; font-weight: 500; color: var(--muted); }

/* ---------- setup ---------- */
.agent-setup, .agent-limits, .agent-others { padding: 0 0 var(--section); }
.agent-steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: clamp(1.5rem, 3vw, 2.5rem) 0 0; padding: 0; border: 1px solid var(--edge); border-radius: 20px; overflow: hidden; background: var(--edge); }
.agent-steps li { counter-increment: step; display: grid; align-content: start; gap: 10px; padding: 26px 24px 28px; background: var(--bg); }
.agent-steps li::before { content: counter(step, decimal-leading-zero); font-size: var(--t-small); font-weight: 600; color: var(--muted); }
.agent-step-head { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.025em; color: var(--text); }
.agent-steps p:not(.agent-step-head) { color: var(--text-2); line-height: 1.5; }
.agent-steps a { color: var(--text); font-weight: 600; }
@media (max-width: 720px) { .agent-steps { grid-template-columns: minmax(0, 1fr); } }

/* ---------- notes ---------- */
.agent-notes { display: grid; gap: 10px; max-width: 64ch; margin: clamp(1.25rem, 2.5vw, 2rem) 0 0; padding-left: 1.2em; color: var(--text-2); line-height: 1.55; }

/* ---------- questions ---------- */
.agent-faq { padding: 0 0 var(--section); }
.agent-faq .faq-list { max-width: 800px; margin-top: clamp(1.5rem, 3vw, 2.5rem); border-top: 1px solid var(--edge); }

/* ---------- the other agents ---------- */
/* Eleven tiles leave a hole in a grid of four or two; the last one takes the
   two cells it would leave empty. A single column has no hole to fill. */
@media (min-width: 420.02px) {
  .agent-others .provider-grid li:last-child:nth-child(odd) { grid-column: span 2; }
}