/* Agent workflow illustration for the public website and local developer sample. */
.agent-introduction { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:clamp(1.5rem,4vw,3.75rem); align-items:start; margin-bottom:38px; }
.agent-introduction h2 { margin-bottom:18px; }
.agent-introduction p { margin:0; }
.agent-introduction .agent-status { margin:0 0 12px; color:var(--neel); font-size:17px; }
.agent-flow { margin:0; padding:34px; background:var(--paper); border:1px solid var(--border-mid); border-radius:12px; }
.agent-flow>figcaption { margin-bottom:28px; font:400 22px/1.5 var(--f-edit); color:var(--neel-deep); }
.agent-flow>figcaption span:last-child { font-family:var(--f-body); }
.agent-stages { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); position:relative; gap:16px; }
.agent-stages::before { content:""; position:absolute; top:26px; left:7%; right:7%; height:1px; background:var(--border-strong); }
.agent-stage { min-width:0; background:none; border:0; padding:0 3px 10px; color:var(--ink-soft); display:flex; flex-direction:column; align-items:center; gap:12px; position:relative; }
.agent-stage-number { width:54px; height:54px; display:grid; place-items:center; background:var(--paper); border:1px solid var(--border-strong); border-radius:50%; font:400 23px var(--f-edit); color:var(--neel); transition:background .15s,color .15s; }
.agent-stage-label { font-size:17px; line-height:1.35; max-width:120px; }
.agent-stage[aria-pressed="true"] .agent-stage-number { color:var(--lotus); background:var(--neel-deep); border-color:var(--neel-deep); }
.agent-stage[aria-pressed="true"] .agent-stage-label { color:var(--neel-deep); font-weight:600; }
.agent-stage[data-step="3"] .agent-stage-number { border-color:var(--terra); }
.agent-stage[data-step="3"][aria-pressed="true"] .agent-stage-number { background:var(--terra); }
.agent-return { display:flex; align-items:center; gap:12px; margin:15px 12px 27px; color:var(--ink-mute); font-size:16px; }
.agent-return::before,.agent-return::after { content:""; height:15px; flex:1; border-bottom:1px dashed var(--border-strong); }
.agent-return::before { border-left:1px dashed var(--border-strong); border-bottom-left-radius:10px; }
.agent-return::after { border-right:1px dashed var(--border-strong); border-bottom-right-radius:10px; }
.agent-detail { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr); gap:clamp(1.5rem,3vw,2.625rem); padding:28px 0 0; border-top:1px solid var(--border-mid); min-height:207px; }
.agent-detail h3 { font-size:29px; margin-bottom:12px; }
.agent-detail p { margin:0; }
.agent-example { border-left:2px solid var(--gold); padding-left:22px; }
.agent-example>span { display:block; margin-bottom:8px; color:var(--ink-mute); font-size:16px; }
.agent-example p { font:400 20px/1.6 var(--f-edit); color:var(--neel-deep); }
.agent-footnote { margin:22px 0 0!important; max-width:880px; color:var(--ink-mute); font-size:17px; }
@media(max-width:900px) { .agent-introduction { gap:30px; } .agent-flow { padding:25px; } .agent-stages { gap:8px; } .agent-stage-label { font-size:16px; } .agent-detail { gap:25px; min-height:260px; } }
@media(max-width:700px) {
  .agent-introduction,.agent-detail { grid-template-columns:minmax(0,1fr); gap:24px; }
  .agent-flow { padding:22px 18px; }
  .agent-stages { grid-template-columns:repeat(3,minmax(0,1fr)); gap:23px 9px; }
  .agent-stages::before { display:none; }
  .agent-stage-label { font-size:16px; }
  .agent-stage { padding:0; }
  .agent-return { font-size:15px; text-align:center; margin:24px 0; }
  .agent-return::before,.agent-return::after { min-width:15px; }
  .agent-detail { min-height:0; padding-top:22px; }
  .agent-detail h3 { font-size:27px; }
  .agent-example { padding-left:16px; }
  .agent-example p { font-size:19px; }
}

@media(max-width:24rem){.agent-stages{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px;}.agent-flow{padding-inline:16px;}}