/* /agents and /de/agents — the agents landing page (ZER-2869).
 *
 * Everything else comes from home.css: the same sheet, kicker, figure, caliper and card furniture
 * as the homepage, so this page reads as another drawing from the same set. What is here is only
 * the one figure the homepage does not have: the /goal loop with its four exits. It uses the same
 * vocabulary as the rest of the drawing — mono labels, dashed rules, brightness as the only
 * emphasis — and no colour, radius or motion of its own. No script: the page is complete as HTML.
 */

.ag-code {
  font-family: var(--mono); font-size: .92em; color: var(--paper);
  border-bottom: 1px solid var(--rule);
}

/* FIG 1.1 — the loop. The three steps are the round; the exits hang under it. */
.ag-loop { padding: 20px 18px 22px; }
.ag-steps { list-style: none; margin: 0; padding: 0; counter-reset: ag; }
.ag-steps li {
  counter-increment: ag; position: relative;
  display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline;
  padding: 12px 0 12px 34px; border-top: 1px dashed var(--rule-soft);
}
.ag-steps li:first-child { border-top: 0; padding-top: 0; }
.ag-steps li:first-child::before { top: 0; }
.ag-steps li::before {
  content: counter(ag, decimal-leading-zero); position: absolute; left: 0; top: 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--g3);
}
/* The last step points back to the first: the round repeats. */
.ag-steps li:last-child .ag-what::after { content: " ↺"; color: var(--g2); }
.ag-step { font-family: var(--mono); font-size: 13px; color: var(--paper); min-width: 8ch; }
.ag-what { color: var(--g1); font-size: 14px; }

.ag-until {
  margin: 18px 0 10px; padding-top: 14px; border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--g2);
}
.ag-exits { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ag-exits li { color: var(--g1); font-size: 14px; padding-left: 16px; position: relative; }
/* A solid bar: here the run stops. */
.ag-exits li::before {
  content: ""; position: absolute; left: 0; top: .35em; width: 3px; height: 1em;
  background: var(--paper);
}
.ag-exits b {
  font-family: var(--mono); font-weight: 500; font-size: 13px; color: var(--paper);
  margin-right: 8px;
}

/* Sheet 06 — links to the docs. The list rows are the homepage's; the link is the name. */
.ag-docs { margin-top: 28px; max-width: 760px; }
.ag-docs .hp-name { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.ag-docs .hp-name:hover { text-decoration-color: var(--paper); }
.ag-docs .hp-row { min-height: 44px; align-items: center; }

/* Body links inside the lede: visible as links without colour. */
.hp-lede a { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.hp-lede a:hover { text-decoration-color: var(--paper); }

/* Information, not decoration: run times, the condition limit and the docs descriptions carry
   facts someone decides on, so they sit one grey brighter than on the homepage (--g2, ~5.7:1 on
   --ink, instead of --g3 at ~3.7:1). */
.hp-caliper div, .hp-provider { color: var(--g2); }

/* Links inside running text and cards: a 44px tap target without moving the line. The padding
   grows the hit area, the negative margin gives the space back to the layout. */
.hp-lede a, .hp-card p a {
  display: inline-block; padding-block: 12px; margin-block: -12px;
}
.hp-card p a { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.hp-card p a:hover { text-decoration-color: var(--paper); }
.hp-card p + p { margin-top: 12px; }

/* The page you are on, visible and not only announced. */
.hp-navlinks a[aria-current="page"] { color: var(--paper); }

/* One focus ring for every control on the page, nav and footer included. :where() keeps it at the
   lowest weight, so the skip link and the menu button keep their own rings from home.css. */
:where(.hp) :focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }

@media (max-width: 560px) {
  .ag-docs .hp-row { flex-direction: column; align-items: flex-start; gap: 2px; }
}