/* AgentFlow page (agentflow.html). The live trace section reuses the .af-grid and .trace styles in styles.css.
   Groups marked [data-af-reveal] rise in one item after another the first time they scroll into view (agentflow.js). */

.af-hero .p-hero-title { max-width: 16ch; }
.af-hero .lede { max-width: 60ch; }

/* ---------- The engine and the car ---------- */
.af-vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.af-vs-card { display: grid; gap: 1.1rem; align-content: start; padding: clamp(1.4rem, 3vw, 2.2rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.af-vs-card.is-af { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.af-vs-k { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.af-vs-card.is-af .af-vs-k { color: var(--mint); }
.af-vs-card h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 500; letter-spacing: -0.03em; }
.af-flow { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.af-flow span { padding: .45rem .75rem; border-radius: 8px; background: rgba(14, 37, 27, .06); font-size: .88rem; }
.af-vs-card.is-af .af-flow span { background: rgba(247, 243, 234, .08); }
.af-flow span.is-mint { background: var(--mint); color: var(--ink); font-weight: 500; }
.af-flow svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.af-vs-card dl { display: grid; gap: .9rem; margin: 0; padding-top: 1rem; border-top: 1px solid var(--line); }
.af-vs-card.is-af dl { border-top-color: rgba(247, 243, 234, .14); }
.af-vs-card dl div { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1rem; }
.af-vs-card dt { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--forest); padding-top: .15rem; }
.af-vs-card.is-af dt { color: var(--mint); }
.af-vs-card dd { margin: 0; line-height: 1.55; color: var(--text-muted); }
.af-vs-card.is-af dd { color: rgba(247, 243, 234, .8); }
.af-note { max-width: 62ch; margin-top: 1.5rem; padding-left: 1rem; border-left: 3px solid var(--mint); font-size: 1.1rem; line-height: 1.5; color: var(--ink); }
.af-words { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.af-words-h { margin-bottom: 1rem; font-weight: 500; color: var(--ink); }
.af-words-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-items: start; }
.af-word { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.af-word summary { display: grid; gap: .25rem; padding: .9rem 1rem; cursor: pointer; list-style: none; }
.af-word summary::-webkit-details-marker { display: none; }
.af-word summary b { font-weight: 500; color: var(--forest); }
.af-word summary span { font-size: .88rem; line-height: 1.4; color: var(--ink); }
.af-word p { padding: 0 1rem 1rem; font-size: .85rem; line-height: 1.5; color: var(--text-muted); }
.af-word[open] { border-color: var(--forest); }
.af-word summary:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; border-radius: var(--radius); }

/* ---------- The request loop ---------- */
.af-loop { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; list-style: none; margin: 0; padding: 0; counter-reset: none; }
.af-loop li { position: relative; display: grid; gap: .6rem; align-content: start; padding: 0 1.25rem 0 0; }
.af-loop li + li { padding-left: 1.25rem; border-left: 1px solid var(--line); }
.af-loop-n { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--forest); color: var(--paper); font-weight: 500; }
.af-loop li:nth-child(3) .af-loop-n, .af-loop li:nth-child(4) .af-loop-n { background: var(--mint); color: var(--ink); }
.af-loop h3 { margin-top: .4rem; font-size: 1.2rem; font-weight: 500; letter-spacing: -0.02em; }
.af-loop p { font-size: .93rem; line-height: 1.55; color: var(--text-muted); }
.af-loop-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 1.25rem 0 0; border-top: 1px solid var(--line); }
.af-loop-notes li { display: grid; gap: .3rem; }
.af-loop-notes b { font-weight: 500; color: var(--forest); }
.af-loop-notes span { font-size: .93rem; line-height: 1.5; color: var(--text-muted); }

/* ---------- One request, start to finish ---------- */
.af-ex { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.af-ex-head { position: sticky; top: calc(var(--nav-h, 68px) + 3rem); display: grid; gap: 1.25rem; }
.af-ex-ask { padding: 1.25rem 1.4rem; border-radius: var(--radius); background: var(--ink); color: var(--paper); }
.af-ex-ask span { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mint); }
.af-ex-ask p { margin-top: .4rem; font-size: 1.25rem; line-height: 1.35; letter-spacing: -0.01em; }
.af-ex-ask b { font-weight: 500; color: var(--mint); }
.af-ex-list { list-style: none; margin: 0; padding: 0; }
.af-ex-list li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: .3rem 1rem; padding: 1.1rem 0; border-top: 1px solid var(--line); }
.af-ex-list li:last-child { border-bottom: 1px solid var(--line); }
.af-ex-n { grid-row: span 2; font-size: .85rem; color: var(--text-muted); padding-top: .1rem; }
.af-ex-tag { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--forest); }
.af-ex-list p { line-height: 1.5; color: var(--ink); }

/* ---------- Production and ownership ---------- */
.af-prod { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
.af-prod li { display: grid; gap: .5rem; align-content: start; padding: 1.4rem; border: 1px solid var(--line-dark); border-radius: var(--radius); background: var(--window); }
.af-prod li:last-child { background: var(--forest); border-color: var(--forest); }
.af-prod h3 { font-size: 1.2rem; font-weight: 500; letter-spacing: -0.02em; color: var(--paper); }
.af-prod p { font-size: .93rem; line-height: 1.55; color: var(--on-dark-muted); }

/* ---------- Make it yours ---------- */
.af-extend { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.af-extend .section-intro { margin-top: 1rem; }
.af-extend-points { display: grid; gap: .8rem; list-style: none; margin: 1.75rem 0 0; padding: 0; }
.af-extend-points li { line-height: 1.55; color: var(--text-muted); }
.af-extend-points b { font-weight: 500; color: var(--ink); }
.af-stack { display: grid; gap: 10px; }
.af-layer { display: grid; gap: .35rem; padding: 1.25rem 1.4rem; border: 1px dashed rgba(14, 37, 27, .25); border-radius: var(--radius); background: var(--white); }
.af-layer:nth-child(2) { border-style: solid; border-color: var(--forest); }
.af-layer span { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--forest); }
.af-layer p { line-height: 1.45; color: var(--ink); }
.af-layer.is-core { border: 0; background: var(--ink); }
.af-layer.is-core span { color: var(--mint); }
.af-layer.is-core p { color: var(--paper); }

/* ---------- The short version ---------- */
.af-qa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.af-qa .section-intro { margin-top: 1rem; }
.af-faq { border-top: 1px solid var(--line-dark); }
.af-faq:last-child { border-bottom: 1px solid var(--line-dark); }
.af-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 0; cursor: pointer; list-style: none; font-size: 1.15rem; color: var(--paper); }
.af-faq summary::-webkit-details-marker { display: none; }
.af-faq summary:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; border-radius: 4px; }
.af-faq p { padding-bottom: 1.25rem; max-width: 52ch; line-height: 1.6; color: var(--on-dark-muted); }
.af-plus { position: relative; flex: none; width: 1rem; height: 1rem; }
.af-plus::before, .af-plus::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px solid var(--mint); transition: transform 250ms; }
.af-plus::after { transform: rotate(90deg); }
.af-faq[open] .af-plus::after { transform: rotate(0deg); }

/* ---------- Reveal ---------- */
.af-js [data-af-reveal] > * { opacity: 0; transform: translateY(16px); transition: opacity 500ms, transform 500ms var(--ease-out, ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.af-js [data-af-reveal].is-in > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .af-js [data-af-reveal] > * { opacity: 1; transform: none; transition: none; }
  .af-plus::before, .af-plus::after { transition: none; }
}
@media (max-width: 1000px) {
  .af-loop { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .af-loop li, .af-loop li + li { grid-template-columns: 2.4rem minmax(0, 1fr); column-gap: 1rem; padding: 0; border-left: 0; }
  .af-loop-n { grid-row: span 2; }
  .af-loop h3 { margin-top: .3rem; }
  .af-prod { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .af-words-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .af-vs, .af-ex, .af-extend, .af-qa, .af-loop-notes { grid-template-columns: minmax(0, 1fr); }
  .af-ex-head { position: static; }
}
@media (max-width: 560px) {
  .af-prod, .af-words-grid { grid-template-columns: minmax(0, 1fr); }
  .af-vs-card dl div { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
}

/* ---------- Title widths on this page ---------- */
.v2 #main .af-hero .p-hero-title { max-width: 18ch; }
.v2 #main > .section .section-head h2 { max-width: 18ch; }

/* ---------- The building blocks: the six jobs as tabs, each job's blocks as cards ---------- */
.af-blk-tabs { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 1.5rem; align-items: start; }
.af-tablist { display: grid; gap: .4rem; }
.af-tab { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .2rem 1rem; padding: 1rem 1.1rem; border: 1px solid var(--line-dark); border-radius: var(--radius); background: transparent; color: var(--paper); font: inherit; text-align: left; cursor: pointer; transition: background-color 200ms, border-color 200ms; }
.af-tab b { font-weight: 500; font-size: 1.1rem; }
.af-tab-ic { grid-row: 1 / span 2; width: 2.6rem; height: 2.6rem; padding: .55rem; border-radius: 10px; background: rgba(247, 243, 234, .07); fill: none; stroke: var(--mint); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: background-color 200ms, stroke 200ms; }
.af-tab[aria-selected="true"] .af-tab-ic { background: var(--ink); stroke: var(--mint); }
.af-tab b { grid-column: 2; }
.af-tab span { grid-column: 2; font-size: .85rem; color: var(--on-dark-muted); }
.af-tab em { grid-row: 1 / span 2; grid-column: 3; align-self: center; font-style: normal; font-size: .85rem; color: var(--on-dark-faint); }
.af-tab:hover { border-color: rgba(247, 243, 234, .3); }
.af-tab[aria-selected="true"] { background: var(--mint); border-color: var(--mint); color: var(--ink); }
.af-tab[aria-selected="true"] span, .af-tab[aria-selected="true"] em { color: rgba(14, 37, 27, .7); }
.af-tab:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.af-pane { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.af-pane[hidden] { display: none; }
.af-pane article { display: grid; gap: .5rem; align-content: start; min-height: 9rem; padding: 1.4rem; border-radius: var(--radius); background: var(--window); border: 1px solid var(--line-dark); animation: af-pane-in 380ms var(--ease-out, ease-out) both; }
.af-pane article:nth-child(2) { animation-delay: 60ms; } .af-pane article:nth-child(3) { animation-delay: 120ms; } .af-pane article:nth-child(4) { animation-delay: 180ms; }
.af-pane article:nth-child(n+5) { animation-delay: 240ms; }
.af-pane article span { font-size: .8rem; color: var(--mint); }
.af-pane article h3 { font-size: 1.3rem; font-weight: 500; letter-spacing: -0.02em; color: var(--paper); }
.af-pane article p { line-height: 1.5; color: var(--on-dark-muted); }
@keyframes af-pane-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) { .af-pane article { animation: none; } }
@media (max-width: 1000px) {
  .af-blk-tabs { grid-template-columns: minmax(0, 1fr); }
  .af-tablist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .af-tablist { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
  .af-tab { padding: .65rem .9rem; }
  .af-tab span { display: none; }
  .af-tab b { grid-row: 1 / span 2; }
  .af-tab-ic { width: 2.2rem; height: 2.2rem; padding: .45rem; }
  .af-pane { grid-template-columns: minmax(0, 1fr); }
}