/* Agent section headings: clear separation from the section above, plus the
   agent's icon before the title. The icon comes from CSS rather than an image
   substitution so the heading keeps a clean anchor and stays non-clickable.
   One section per agent, each keyed off the id Sphinx derives from its title. */
:is(#built-with-modeler, #answered-with-gurobot, #diagnosed-with-explainer)
    > :is(h2, h3, h4) {
    margin-top: 1.8em;
}

:is(#built-with-modeler, #answered-with-gurobot, #diagnosed-with-explainer)
    > :is(h2, h3, h4)::before {
    content: "";
    display: inline-block;
    width: 1.35em;
    height: 1.35em;
    margin-right: 0.4em;
    vertical-align: -0.3em;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

#built-with-modeler > :is(h2, h3, h4)::before {
    background-image: url("../../modeler-icon.svg");
}

#answered-with-gurobot > :is(h2, h3, h4)::before {
    background-image: url("../../gurobot-icon.svg");
}

#diagnosed-with-explainer > :is(h2, h3, h4)::before {
    background-image: url("../../explainer-icon.svg");
}

/* Agent names in running text: the same three icons drawn before the name, but
   scoped to the agent roster list (.agent-list) on the About page only — a
   plain mention of an agent's name elsewhere in running prose stays plain
   text, since the icon reads as noise outside the roster. The roles
   (:agent-gurobot: and friends) are declared in the page that uses them and
   render as <strong> carrying the class, so inside the roster the icon
   travels with the name instead of with a list position.
   The name stays `inline` with `nowrap` so the icon never breaks away from the
   word AND the name keeps a normal text baseline — an inline-flex box with
   `align-items: center` would align the whole name to the flex box's center and
   drop the following ": " off the line's baseline. The icon is an inline-block
   pseudo-element positioned with `vertical-align` instead. */
.agent-list .agent-gurobot,
.agent-list .agent-modeler,
.agent-list .agent-explainer {
    white-space: nowrap;
}

.agent-list .agent-gurobot::before,
.agent-list .agent-modeler::before,
.agent-list .agent-explainer::before {
    content: "";
    display: inline-block;
    width: var(--agent-icon-size);
    height: var(--agent-icon-size);
    margin-right: 0.3em;
    vertical-align: -0.35em;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Box sizes differ per agent on purpose. The three SVGs fill their viewBoxes by
   different amounts — Explainer's artwork spans nearly the whole box, Gurobot's
   bubble-and-sparkles leaves about a third of its 96x96 box empty — so an equal
   box makes the glyphs themselves look unequal. These values are each glyph's
   box scaled up by its own empty margin, which lands them at the same apparent
   size next to the text. */
.agent-list .agent-gurobot::before {
    --agent-icon-size: 1.6em;
    background-image: url("../../gurobot-icon.svg");
}

.agent-list .agent-modeler::before {
    --agent-icon-size: 1.5em;
    background-image: url("../../modeler-icon.svg");
}

.agent-list .agent-explainer::before {
    --agent-icon-size: 1.2em;
    background-image: url("../../explainer-icon.svg");
}

/* The roster reads as a set of agent cards rather than a dense bullet list: no
   markers, and enough room between entries that each icon anchors its own block.
   Scoped to the list carrying `agent-list` so ordinary bullet lists are
   untouched. */
[role="main"] .agent-list {
    list-style: none;
    padding-left: 0;
    font-size: 1.05em;
}

[role="main"] .agent-list > li + li {
    margin-top: 0.9em;
}