/* ==========================================================================
   exp34 . v2-agents.css
   Styles for the middle story partials (partials2/):
     05-agents.html    .ag-  the agents moment (flow stage + transcript)
     06-use-cases.html .uc-  the four agent use cases (tiles + loop fig)
     07-economics.html .ec-  the queue comparison (bug report vs finding)
   Tokens, layout, type, tiles, stage and the reveal mechanism all come
   from site.css. No script ships with these sections. Arrival behaviour
   is the shell's: .stage and .fig get .in, [data-reveal] fades once,
   .dr strokes and .fx text draw inside either. html.qa and reduced
   motion pin the finished state in site.css, so nothing here animates
   on its own.
   ========================================================================== */

/* ---------- 05 . agents . flow stage ---------- */
.ag-stage{margin:2.6rem 0 0;}
.ag-stage svg.ag-mob{display:none;}
.ag-stage .ag-q{font-family:var(--sans);font-size:15px;font-weight:500;letter-spacing:-.01em;}

/* ---------- 05 . agents . transcript ---------- */
.ag-term{
  margin:2.6rem 0 0;
  background:var(--ink);
  border-radius:10px;overflow:hidden;
  box-shadow:0 14px 40px rgba(var(--ink-rgb),.12);
}
.ag-term-bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.55rem 1rem;border-bottom:1px solid var(--wash);
}
.ag-term-bar span{
  font-family:var(--mono);font-size:.66rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--wash);white-space:nowrap;
}
.ag-term pre{
  margin:0;padding:1.1rem 1.15rem 1.25rem;
  font-family:var(--mono);font-size:.84rem;line-height:1.85;
  color:var(--wash);white-space:pre-wrap;overflow-wrap:break-word;
}
.ag-term .ag-th{color:var(--paper);font-weight:600;}
.ag-term .ag-hot{color:var(--paper);}
.ag-note{margin:1.15rem 0 0;font-family:var(--mono);font-size:.78rem;line-height:1.7;color:var(--muted);max-width:70ch;}

/* ---------- 06 . use cases ---------- */
.uc-loop{margin-top:2.4rem;}

/* ---------- 07 . economics . the queue ---------- */
.ec-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem;align-items:stretch;}
.ec-col{background:var(--card);border:1px solid var(--hair);border-radius:10px;padding:1.4rem 1.4rem 1.3rem;min-width:0;}
.ec-tag{margin:0 0 1.05rem;font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.ec-col-proof .ec-tag{color:var(--signal);}
.ec-report{background:var(--paper);border:1px solid var(--hair);border-radius:var(--radius);padding:1rem 1.1rem 1.05rem;}
.ec-report-id{margin:0 0 .55rem;font-family:var(--mono);font-size:.74rem;font-weight:600;letter-spacing:.1em;color:var(--muted);}
.ec-report-q{margin:0;font-size:1.02rem;line-height:1.5;}
.ec-list{list-style:none;margin:1.05rem 0 0;padding:0;}
.ec-report .ec-list{margin:.7rem 0 0;}
.ec-list li{
  display:flex;align-items:center;gap:.7rem;
  padding:.48rem 0;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.02em;color:var(--ink);
}
.ec-list li + li{border-top:1px solid var(--hair);}
.ec-qm{margin-left:auto;color:var(--muted);}
.ec-box{flex:0 0 auto;width:11px;height:11px;border:1.5px solid var(--hair-strong);border-radius:2px;}
.ec-ck{flex:0 0 auto;width:14px;height:14px;display:block;}
.ec-ck path{fill:none;stroke:var(--pass);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.ec-foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem;
  margin-top:1.15rem;padding-top:1.05rem;border-top:1px solid var(--hair);
}
.ec-arrow{font-family:var(--mono);font-size:.8rem;color:var(--ink-40);}
.ec-actor{
  display:inline-flex;align-items:center;min-height:30px;padding:0 .75rem;
  border:1px solid var(--ink);border-radius:var(--radius);
  font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
}
.ec-col-proof .ec-actor{border-color:var(--signal);color:var(--signal);}
.ec-step{font-family:var(--mono);font-size:.78rem;color:var(--ink-60);}
.ec-note{margin:0;font-family:var(--mono);font-size:.72rem;color:var(--muted);}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .ec-grid{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .ag-stage svg.ag-desk{display:none;}
  .ag-stage svg.ag-mob{display:block;}
}
@media (max-width:640px){
  .ec-col{padding:1.1rem 1rem 1.05rem;}
  .ag-term-bar{padding:.5rem .85rem;}
  .ag-term pre{padding:.95rem 1rem 1.1rem;font-size:.78rem;}
}