/* ==========================================================================
   /agents · Agents and workflows. Page-only styles, prefix .ag-
   The first viewport is an Outputs inbox with a selectable run and detail pane.
   Each run names what woke it, what it read and what happens next. Then the
   three wake modes, settings sheet, approval card, specialists and FAQ.
   ========================================================================== */

.ag-sprite{position:absolute;width:0;height:0;overflow:hidden}
.ag-ic{display:block;flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.go svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------------------------------------------------------------- hero ---- */
.ag-hero{padding:56px 0 40px}
.ag-hero-g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:center}
.ag-hero-g>*{min-width:0}
.ag-hero .display{max-width:14ch}
.ag-hero .lede{margin-top:22px}
.ag-hero .btns{margin-top:30px}
.ag-walk{margin-top:26px;min-height:40px}
.ag-hero-src{margin-top:22px}

/* the inbox: the deep field carrying what came back */
.ag-inbox{border-radius:var(--r-blk);background:var(--primary);color:var(--on-primary);padding:22px 22px 20px;box-shadow:var(--shadow);--focus:var(--on-primary)}
.ag-inbox-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 4px 14px;font-size:12.5px;color:var(--on-primary-2)}
.ag-inbox-h .uc-t{color:var(--on-primary)}
.ag-inbox-g{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:10px;align-items:stretch}
.ag-outs{display:grid;gap:7px;margin:0;padding:0;list-style:none}
.ag-outs>li{min-width:0}
.ag-out{display:grid;width:100%;gap:4px;padding:12px 14px 11px;border:0;border-radius:var(--r-card);background:var(--on-primary-3);color:var(--on-primary);font:400 1rem/1.4 var(--sans);text-align:left;cursor:pointer;transition:background-color .22s var(--ease),box-shadow .22s var(--ease),transform .28s var(--ease-out)}
.ag-out:hover{box-shadow:inset 0 0 0 1px var(--on-primary-2)}
.ag-out[aria-pressed=true]{background:var(--on-primary-3);box-shadow:inset 3px 0 0 var(--accent),inset 0 0 0 1px var(--on-primary-2);transform:translateX(3px)}
.ag-out:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ag-stamp{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--on-primary-2);white-space:nowrap}
.ag-stamp i{flex:none;width:6px;height:6px;border-radius:50%;background:var(--on-primary-2)}
.ag-outs li:nth-child(-n+2) .ag-stamp i{background:var(--accent)}
.ag-stamp em{margin-left:auto;padding:3px 9px;border-radius:var(--r-pill);background:var(--t1);color:var(--ink);font-size:11px;font-weight:500;font-style:normal;line-height:1}
.ag-out b{font-size:13.5px;font-weight:500;line-height:1.32;letter-spacing:-.01em;text-wrap:pretty}
.ag-out .m{font-size:12px;line-height:1.35;color:var(--on-primary-2)}
.ag-from{display:inline-flex;align-items:center;gap:6px;margin-top:3px;font-size:11.5px;color:var(--on-primary-2)}
.ag-from .ag-ic{width:13px;height:13px;color:var(--t3)}
.ag-detail{display:flex;flex-direction:column;min-width:0;padding:18px;border-radius:var(--r-card);background:var(--paper);color:var(--ink);box-shadow:var(--shadow-ui)}
.ag-detail-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ag-detail-top>span:last-child{font-size:11.5px;color:var(--ink-3)}
.ag-detail h2{margin-top:18px;font-size:22px;line-height:1.08;letter-spacing:-.03em;text-wrap:balance}
.ag-detail-summary{margin-top:10px;font-size:13px;line-height:1.45;color:var(--ink-2);text-wrap:pretty}
.ag-detail-facts{display:grid;margin:18px 0 0}
.ag-detail-facts>div{display:grid;grid-template-columns:58px minmax(0,1fr);gap:10px;padding:9px 0;border-top:1px solid var(--line);font-size:12.5px;line-height:1.35}
.ag-detail-facts dt{color:var(--ink-3)}
.ag-detail-facts dd{margin:0;color:var(--ink)}
.ag-detail-go{align-self:flex-start;margin-top:auto;padding-top:16px;min-height:40px}
.ag-detail.is-changing{animation:ag-detail-in .34s var(--ease-out) both}
@keyframes ag-detail-in{from{opacity:.58;transform:translateY(7px)}to{opacity:1;transform:none}}
.ag-inbox-f{margin:14px 4px 0;font-size:12.5px;line-height:1.5;color:var(--on-primary-2);text-wrap:pretty}
.ag-inbox-src{margin:8px 4px 0;color:var(--on-primary-2);max-width:72ch}

/* -------------------------------------------------- three ways to wake one -- */
.ag-wake-s{padding-top:48px}
.ag-wake{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.ag-mode{display:flex;flex-direction:column;min-width:0;padding:26px 28px 24px;scroll-margin-top:calc(var(--navh,64px) + 24px)}
.ag-trig{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;color:var(--ink-2)}
.ag-trig .ag-ic{width:15px;height:15px;color:var(--primary)}
.ag-mode h3{margin-top:14px;font-size:22px;max-width:16ch}
.ag-mode-p{margin-top:12px;font-size:14.5px;line-height:1.55;color:var(--ink-2);text-wrap:pretty}
.ag-card{display:grid;justify-items:start;gap:6px;margin-top:auto;padding:14px 16px 15px;border-radius:var(--r-card);background:var(--white);box-shadow:var(--shadow-ui)}
.ag-mode-p+.ag-card{margin-top:22px}
.ag-card b{font-size:15px;font-weight:500;letter-spacing:-.012em}
.ag-when{padding:4px 10px;border-radius:var(--r-pill);background:var(--grey);font-size:12px;line-height:1.35;color:var(--ink)}
.ag-reads{font-size:12.5px;color:var(--ink-2)}
.ag-sent{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:12.5px;color:var(--ink-2);line-height:1.4}
.ag-sent i{flex:none;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.ag-sent b{font-weight:500;color:var(--ink)}
.ag-mode:target{animation:ag-target 1.25s var(--ease-out);box-shadow:inset 0 0 0 2px var(--accent),var(--shadow-ui)}
@keyframes ag-target{0%{transform:translateY(10px)}35%{transform:translateY(-3px)}100%{transform:none}}
.ag-srcs{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:var(--gap);padding:16px 28px}
.ag-srcs-k{font-size:13px;color:var(--ink-2);margin-right:4px}
.ag-src{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px 0 10px;border-radius:var(--r-pill);background:var(--white);font-size:13px;font-weight:500;white-space:nowrap}
.ag-src .ag-ic{width:15px;height:15px;color:var(--primary)}
.ag-srcs .go{margin-left:auto;min-height:40px}

/* ---------------------------------------------------------------- sheet ---- */
.ag-sheet-s{padding:84px 0}
.ag-sheet-g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
.ag-sheet-g>*{min-width:0}
.ag-sheet-t .sub{margin-top:18px}
.ag-sheet-t .sub+.sub{margin-top:12px}
.ag-links{display:flex;flex-wrap:wrap;gap:4px 24px;margin-top:22px}
.ag-links .go{min-height:40px}
.ag-set{min-width:0;padding:20px 24px 22px;border-radius:var(--r-blk);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);font-size:14px}
.ag-set-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px}
.ag-set-h b{font-size:17px;font-weight:500;letter-spacing:-.015em}
.ag-f{display:grid;grid-template-columns:128px minmax(0,1fr);gap:12px;align-items:baseline;padding:11px 0;border-top:1px solid var(--line)}
.ag-f>span{font-size:13px;color:var(--ink-2)}
.ag-f>p{min-width:0;line-height:1.45;margin:0}
.ag-chips{display:flex;flex-wrap:wrap;gap:6px}
.ag-chip{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px;border-radius:var(--r-pill);background:var(--t1);font-size:12.5px;font-weight:500;white-space:nowrap}
.ag-chip .ag-ic{width:12px;height:12px;stroke-width:2.2;color:var(--primary)}
.ag-chip.off{background:transparent;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink-2);font-weight:400}
.ag-seg{display:inline-flex;gap:3px;padding:3px;border-radius:10px;background:var(--grey)}
.ag-seg span{padding:5px 11px;border-radius:8px;font-size:12.5px;color:var(--ink-2);white-space:nowrap}
.ag-seg .is{background:var(--white);color:var(--ink);font-weight:500;box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 10%,transparent)}
.ag-q{font-size:14px;color:var(--ink)}
.ag-lock{display:flex;align-items:center;gap:10px;margin-top:12px;padding:12px 14px;border-radius:var(--r-row);background:var(--primary);color:var(--on-primary);font-size:13.5px;line-height:1.4}
.ag-lock .ag-ic{width:18px;height:18px;color:var(--accent)}
.ag-lock b{font-weight:500}
.ag-lock p{margin:0}

/* ------------------------------------------- control + specialists blocks -- */
.ag-blk{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:56px;align-items:center}
.ag-blk-sp,.ag-blk-faq{align-items:start;margin-top:48px;padding-top:48px;border-top:1px solid var(--line)}
@media (min-width:1101px){.ag-blk-faq{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}}
.ag-blk-h .sub{margin-top:14px}
.ag-blk-h .ag-links{margin-top:18px}
.ag-ctl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--gap);align-items:center}
.lg-a i .ag-ic{width:12px;height:12px;stroke-width:2.2}
.lg-x .pill svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ag-ctl .lg-row{grid-template-columns:44px minmax(0,1fr);row-gap:10px;border-top:0}
.ag-ctl .lg-a,.ag-ctl .lg-d{grid-column:2}
.ag-ctl .lg-x{grid-column:2;grid-row:auto;justify-self:start}
.ag-sp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;counter-reset:ag;border-bottom:1px solid var(--line);margin:0;padding:0;list-style:none}
.ag-sp li{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:baseline;border-top:1px solid var(--line);counter-increment:ag}
.ag-sp li::before{content:counter(ag);font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.ag-sp a{display:grid;gap:2px;padding:11px 0}
.ag-sp b{font-size:15px;font-weight:500;letter-spacing:-.012em;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color .2s var(--ease)}
.ag-sp a:hover b{text-decoration-color:currentColor}
.ag-sp span{font-size:13.5px;line-height:1.4;color:var(--ink-2)}

/* ------------------------------------------------------------ responsive -- */
@media (max-width:1240px){
  .ag-srcs .go{margin-left:0}
}
@media (max-width:1100px){
  .ag-hero-g{grid-template-columns:minmax(0,1fr);gap:36px}
  .ag-hero .display{max-width:16ch}
  .ag-wake{grid-template-columns:minmax(0,1fr)}
  .ag-mode{padding:24px 24px 22px}
  .ag-mode h3{max-width:none}
  .ag-sheet-g{grid-template-columns:minmax(0,1fr);gap:36px}
  .ag-blk{grid-template-columns:minmax(0,1fr);gap:28px}
}
@media (max-width:860px){
  .ag-hero{padding:40px 0 32px}
  .ag-ctl,.ag-sp{grid-template-columns:minmax(0,1fr)}
  .ag-srcs{border-radius:var(--r-blk);padding:18px 20px}
  .ag-srcs .go{margin-left:0;flex-basis:100%}
  .ag-sheet-s{padding:64px 0}
  .ag-inbox-g{grid-template-columns:minmax(0,1fr)}
  .ag-outs{grid-auto-flow:column;grid-auto-columns:minmax(240px,78%);overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;padding:0 2px 8px;scrollbar-color:var(--on-primary-3) transparent}
  .ag-outs>li{scroll-snap-align:start}
  .ag-out{height:100%}
  .ag-detail{min-height:280px}
}
@media (max-width:520px){
  .ag-inbox{padding:18px 16px 16px}
  .ag-stamp{flex-wrap:wrap;white-space:normal}
  .ag-f{grid-template-columns:minmax(0,1fr);gap:4px;padding:10px 0}
  .ag-set{padding:18px 18px 20px}
  .ag-seg{flex-wrap:wrap}
  .ag-outs{grid-auto-columns:88%}
  .ag-detail{padding:16px;min-height:0}
  .ag-detail h2{font-size:20px}
  .ag-detail-facts>div{grid-template-columns:minmax(0,1fr);gap:2px}
}

@media (prefers-reduced-motion:reduce){
  .ag-out,.ag-sp b{transition:none}
  .ag-out[aria-pressed=true]{transform:none}
  .ag-detail.is-changing,.ag-mode:target{animation:none}
}
/* touch: full hit area, same font and padding (mirrors app.css) */
@media (pointer:coarse){
  .ag-walk,.ag-detail-go,.ag-srcs .go,.ag-links .go{min-height:44px}
}