/* /services/ai-automation/ - page layout only. Shared components live in components.css and fig.css. */

/* chapter spacing after the dotted rule (the kit sets this inline) */
[data-section="ai-automation"] .chapter-section > .rule-dots + * { margin-top: var(--s-12); }

/* A-2 · Fig. 01 intake demo: full width, controls grouped */
.ai-fig-intake .fig-canvas { padding: var(--s-5) var(--s-4) var(--s-3); }
.ai-fig-intake .demo { align-items: end; }
.ai-counters { grid-auto-flow: column; gap: var(--s-6); align-self: end; min-height: 44px; align-items: center; }
@media (min-width: 900px) {
  .ai-fig-intake .demo { gap: var(--s-4) var(--s-10); }
  .ai-counters { margin-left: auto; }
}
@media (max-width: 479.98px) {
  .ai-fig-intake .demo { gap: var(--s-4); padding-inline: var(--s-2); }
  .ai-counters { grid-auto-flow: row; gap: var(--s-1); }
  .ai-fig-intake .fig-canvas, .ai-fig-review .fig-canvas { padding: var(--s-2) var(--s-1); }
}

/* post flash on arrival (page module toggles .ai-hit on the Post node) */
.ai-fig-intake [data-node="post"] use { transition: fill var(--dur-s) var(--ease-out), stroke var(--dur-s) var(--ease-out); }
.ai-fig-intake [data-node="post"].ai-hit use { fill: var(--fig-node-fill-lit); stroke: var(--accent); }
.ai-fig-intake [data-node="post"].is-warn.ai-hit use { fill: var(--fig-node-fill); }

/* A-3 · marginalia host: keep the lede at its measure so the note has the margin column */
.ai-annotated { max-width: var(--measure); }
.chapter .ai-annotated { margin-top: var(--s-4); }
.ai-annotated .lede { margin-top: 0; }

/* A-4 · use-case rows (details: In, Out, Who reviews) */
.ai-uc-row summary { align-items: start; }
.ai-uc-row summary .num { padding-top: 0.15rem; }
.ai-uc-row summary i { margin-top: 0.2rem; }
.ai-uc-head { display: grid; gap: var(--s-1); min-width: 0; }
.ai-uc-line { color: var(--text-2); font-size: var(--t-small); line-height: 1.5; max-width: var(--measure-wide); }
.ai-uc-flow { display: grid; gap: var(--s-3); margin: 0; padding: 0 0 var(--s-6) calc(2.5rem + var(--s-3)); }
.ai-uc-flow > div { display: grid; gap: var(--s-1); padding-left: var(--s-4); border-left: 1px solid var(--ink-rule); }
.ai-uc-flow dt { font-family: var(--font-mono); font-size: var(--t-label); font-weight: 500; letter-spacing: 0.18em; line-height: 1.4; text-transform: uppercase; color: var(--accent); }
.ai-uc-flow dd { margin: 0; color: var(--text); line-height: 1.5; }
.ai-uc-row summary:hover .ai-uc-line, .ai-uc-row[open] .ai-uc-line { color: var(--text); }
.ai-uc-line { transition: color var(--dur-s) var(--ease-out); }
@media (min-width: 768px) {
  .ai-uc-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
  .ai-uc-flow > div { position: relative; }
  /* In → Out → Who reviews: an arrow centred in the gap, on the label line, pointing to the next cell */
  .ai-uc-flow > div + div::before { content: "\2192" / ""; position: absolute; left: calc(-1 * var(--s-6)); top: 0; width: var(--s-6); font-family: var(--font-mono); font-size: var(--t-label); line-height: 1.4; text-align: center; color: var(--accent-soft); pointer-events: none; }
}
@media (max-width: 479.98px) {
  .ai-uc-flow { padding-left: 0; }
}

/* A-5 · text and Fig. 02 side by side at desktop */
.ai-split { display: grid; gap: var(--s-8); align-items: center; }
.ai-split > * { min-width: 0; }
.ai-split .chapter { margin-bottom: 0; }
@media (min-width: 1024px) {
  .ai-split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 4rem); }
}

/* A-6 · data chips */
#data .tech-chips { margin-top: 0; }

/* A-8 · questions head sits tighter */
#questions .chapter { margin-bottom: var(--s-6); }

/* reduced motion: no flash, no fades */
html[data-motion="reduce"] :is(.ai-fig-intake [data-node="post"] use, .ai-uc-line) { transition: none; }
@media (prefers-reduced-motion: reduce) {
  :root :is(.ai-fig-intake [data-node="post"] use, .ai-uc-line) { transition: none; }
}