/* =========================================================================
   /agents — Descript design port (June 2026 refresh).
   Namespaced under .p-agents. Inline styles carry the per-element look
   (CSP allows style attributes); this file holds keyframes, hover states,
   responsive rules, and the JS-toggled state classes.
   ========================================================================= */

.p-agents ::selection { background: #ef5920; color: #fff; }

/* ---- keyframes (from the design helmet block) ---- */
@keyframes ag-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.72); } }
@keyframes ag-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes ag-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ag-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ag-sweep { 0% { top: -8%; } 100% { top: 104%; } }
@keyframes ag-cross { 0% { opacity: 0; } 6%, 27% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes ag-score { 0%, 15% { width: 12%; } 55%, 100% { width: 87%; } }
@keyframes ag-tick { 0%, 28% { transform: translateY(0); } 33%, 61% { transform: translateY(-22px); } 66%, 94% { transform: translateY(-44px); } 100% { transform: translateY(-66px); } }
@keyframes ag-ping { 0% { box-shadow: 0 0 0 0 rgba(239,89,32,.5); } 100% { box-shadow: 0 0 0 9px rgba(239,89,32,0); } }
@keyframes ag-wob { 0%, 84%, 100% { transform: rotate(0); } 87% { transform: rotate(-4deg); } 90% { transform: rotate(4deg); } 93% { transform: rotate(-2deg); } 96% { transform: rotate(1deg); } }
@keyframes ag-glowp { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,174,60,0); } 50% { box-shadow: 0 0 12px 1px rgba(255,174,60,.45); } }
@keyframes ag-flow { 0% { top: -6px; opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes ag-bar { from { width: 6%; } }
@keyframes ag-rot { to { transform: rotate(360deg); } }
@keyframes ag-ring { 0% { transform: scale(.55); opacity: .95; } 100% { transform: scale(1.45); opacity: 0; } }
@keyframes ag-slide { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } }

/* ---- responsive: consoles stack under 900px, layer cards under 1040 ---- */
@media (max-width: 900px) {
  .p-agents .ag-2col { grid-template-columns: 1fr !important; }
}
@media (max-width: 1040px) {
  .p-agents .ag-4col { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  .p-agents .ag-4col { grid-template-columns: 1fr !important; }
}

/* [hidden] guard: several hidden elements carry display in their style attr */
.p-agents [hidden] { display: none !important; }

/* ---- scanline overlay ---- */
.p-agents .ag-scan {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 3px);
}

/* ---- console output rows (appended by JS) ---- */
.p-agents .ag-row { animation: ag-in .22s ease; white-space: pre-wrap; }

/* ---- hero system-index chips ---- */
.p-agents .agx {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: #3b423d;
  text-decoration: none; padding: 8px 14px; border-radius: 99px;
  border: 1px solid #e0dfd8; background: #fff; cursor: pointer; transition: all .13s;
}
.p-agents .agx-o:hover { border-color: #ef5920; color: #ef5920; background: rgba(239,89,32,.05); box-shadow: 0 0 14px rgba(239,89,32,.25); }
.p-agents .agx-x:hover { border-color: #8a4fe8; color: #8a4fe8; background: rgba(138,79,232,.05); box-shadow: 0 0 14px rgba(138,79,232,.25); }
.p-agents .agx-p:hover { border-color: #2e78d2; color: #2e78d2; background: rgba(46,120,210,.05); box-shadow: 0 0 14px rgba(46,120,210,.25); }
.p-agents .agx-l:hover { border-color: #1f8a5b; color: #1f8a5b; background: rgba(31,138,91,.05); box-shadow: 0 0 14px rgba(31,138,91,.25); }
.p-agents .agx-b:hover { border-color: #d2437f; color: #d2437f; background: rgba(210,67,127,.05); box-shadow: 0 0 14px rgba(210,67,127,.25); }
.p-agents .agx-s:hover { border-color: #12a594; color: #12a594; background: rgba(18,165,148,.05); box-shadow: 0 0 14px rgba(18,165,148,.25); }
.p-agents .agx-mk:hover { border-color: #7c8cff; color: #7c8cff; background: rgba(124,140,255,.06); box-shadow: 0 0 14px rgba(124,140,255,.3); }
.p-agents .agx-ro:hover { border-color: #3fb6c4; color: #3fb6c4; background: rgba(63,182,196,.06); box-shadow: 0 0 14px rgba(63,182,196,.3); }
.p-agents .agx-ceo:hover { border-color: #c9a63c; color: #c9a63c; background: rgba(201,166,60,.06); box-shadow: 0 0 14px rgba(201,166,60,.3); }

/* ---- tier chips (separate system from agent colors) ---- */
.p-agents .ag-tier-solo:hover { color: #ef5920 !important; border-color: #ef5920 !important; }
.p-agents .ag-tier-pro:hover { color: #a06c0e !important; border-color: #c98a1a !important; background: rgba(201,138,26,.16) !important; }
.p-agents .ag-tier-ent:hover { background: #0d100e !important; border-color: #ef5920 !important; }

/* ---- console header bits ---- */
.p-agents .ag-demo {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  padding: 3px 11px; border-radius: 6px; cursor: pointer; transition: all .13s;
}
.p-agents .ag-demo-o:hover { background: rgba(239,89,32,.24) !important; color: #fff !important; }
.p-agents .ag-demo-x:hover { background: rgba(138,79,232,.26) !important; color: #fff !important; }
.p-agents .ag-demo-p:hover { background: rgba(46,120,210,.26) !important; color: #fff !important; }
.p-agents .ag-demo-l:hover { background: rgba(63,179,127,.26) !important; color: #fff !important; }
.p-agents .ag-demo-b:hover { background: rgba(210,67,127,.26) !important; color: #fff !important; }
.p-agents .ag-demo-s:hover { background: rgba(18,165,148,.26) !important; color: #fff !important; }
.p-agents .ag-tierlink { font-family: var(--mono); font-size: 10px; text-decoration: none; }
.p-agents .ag-tierlink:hover { color: #f0ece4 !important; }
.p-agents .ag-tierlink-gold { font-family: var(--mono); font-size: 10px; text-decoration: none; }
.p-agents .ag-tierlink-gold:hover { color: #ffd23f !important; }

/* ---- selectable chips (prospect / hook / persona builder) ---- */
.p-agents .ag-chip {
  font-family: var(--mono); font-size: 10.5px; padding: 4px 10px; border-radius: 99px;
  cursor: pointer; transition: all .13s;
  border: 1px solid #2a332a; color: #8a9a8c; background: transparent;
}
.p-agents .ag-chip.sm { font-size: 10px; padding: 3px 9px; }
.p-agents .ag-chip.is-used { text-decoration: line-through; }
.p-agents .c-o .ag-chip.is-sel { border-color: #ef5920; color: #ffd9c4; background: rgba(239,89,32,.16); text-decoration: none; }
.p-agents .ag-chip.cl-l.is-sel { border-color: #7c8cff; color: #dde2ff; background: rgba(124,140,255,.16); }

/* ---- suggestion pills ---- */
.p-agents .ag-sug {
  font-family: var(--mono); font-size: 10px; padding: 3px 9px; border-radius: 99px;
  background: none; cursor: pointer;
}
.p-agents .ag-sughide {
  font-family: var(--mono); font-size: 10px; padding: 3px 8px;
  border: none; background: none; color: #5a675c; cursor: pointer;
}
.p-agents .ag-pill {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  padding: 4px 12px; border-radius: 99px; cursor: pointer;
  animation: ag-wob 4.5s ease-in-out infinite, ag-glowp 2.6s ease-in-out infinite;
}

/* ---- auto-send toggle (origin) ---- */
.p-agents .ag-auto {
  font-family: var(--mono); font-size: 10.5px; padding: 4px 11px; border-radius: 99px;
  cursor: pointer; transition: all .13s;
  border: 1px solid #2a332a; color: #8a9a8c; background: transparent;
}
.p-agents .ag-auto.is-on { border-color: rgba(63,179,127,.6); color: #d4f0e0; background: rgba(63,179,127,.14); }

/* ---- legion member cards ---- */
.p-agents .ag-member {
  cursor: pointer; border: 1px solid rgba(63,179,127,.4); border-radius: 9px;
  padding: 9px 10px; background: rgba(63,179,127,.05); opacity: 1; transition: all .15s;
}
.p-agents .ag-member.is-off { opacity: .45; border-color: #22302c; background: transparent; }
.p-agents .ag-member.is-cust { cursor: default; border-color: rgba(124,140,255,.55); background: rgba(124,140,255,.07); }

/* ---- customer-success stage pills ---- */
.p-agents .ag-stage {
  flex: 1; text-align: center; font-size: 9px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 5px 2px; border-radius: 6px; transition: all .2s;
  border: 1px solid #22302c; color: #4a5a54; background: transparent;
  font-family: var(--mono);
}
.p-agents .ag-stage.is-on { border-color: rgba(18,165,148,.4); color: #2f9a8c; }
.p-agents .ag-stage.is-cur { border-color: rgba(63,208,190,.7); color: #3fd0be; background: rgba(18,165,148,.12); }

/* ---- brain ingest grid cells ---- */
.p-agents .ag-bcell { aspect-ratio: 1; border-radius: 2px; background: #241a20; box-shadow: none; transition: all .2s; }
.p-agents .ag-bcell.is-lit { background: #d2437f; box-shadow: 0 0 6px rgba(210,67,127,.45); }

/* ---- lab cards ---- */
.p-agents .ag-labcard-mk:hover, .p-agents .ag-labcard-mk:focus-visible { transform: translateY(-3px); box-shadow: 0 22px 44px -24px rgba(124,140,255,.6); }
.p-agents .ag-labcard-ro:hover, .p-agents .ag-labcard-ro:focus-visible { transform: translateY(-3px); box-shadow: 0 22px 44px -24px rgba(63,182,196,.6); }

/* ---- lab modals ---- */
.p-agents .ag-modal-close-mk:hover { color: #fff !important; border-color: #7c8cff !important; }
.p-agents .ag-modal-close-ro:hover { color: #fff !important; border-color: #3fb6c4 !important; }

/* ---- final CTA ghost links ---- */
.p-agents .ag-ghostlink:hover { color: #ef5920 !important; }

/* ---- reduced motion: kill the decorative loops ---- */
@media (prefers-reduced-motion: reduce) {
  .p-agents *, .p-agents *::before, .p-agents *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---- phone (2026-08-20 "Agents mobile" artboard) --------------------------
   The desktop page is unchanged; this block re-lays it out for the band where
   the phone chrome takes over (mobile-chrome.css uses the same 559.98px), and
   every rule here comes off that artboard:

     * 18px gutters, not 28px;
     * 44px minimum on the system-index chips — the artboard sets min-height
       44px on them, and it is the same touch floor the phone chrome holds;
     * the section numeral drops 170px -> 90px and sits inside the gutter
       instead of bleeding 8px past it;
     * the shared-context agent row is a centred wrap, not a 5-column grid.
       At 375px those five columns are 64px wide holding 78px nowrap chips,
       so the row was being clipped. The artboard also drops the flow-line
       animation and the "structured in -> cited out" badge on a phone.
   ------------------------------------------------------------------------- */
@media (max-width: 559.98px) {
  .p-agents .ag-wrap { padding: 0 18px !important; }

  .p-agents .ag-herotop { padding: 30px 0 4px !important; }
  .p-agents .ag-herotop p { text-align: left; font-size: 15.5px !important; }
  .p-agents .ag-index { justify-content: flex-start !important; gap: 7px !important; margin-top: 20px !important; }
  .p-agents .agx { min-height: 44px; padding: 0 13px; font-size: 12px; }

  .p-agents .ag-sec { padding: 36px 0 0 !important; }
  .p-agents .ag-sec2 { padding: 40px 0 0 !important; }
  .p-agents .ag-num { font-size: 90px !important; top: 26px !important; left: auto !important; right: 0 !important; }

  /* console headers wrap instead of clipping the tier link off the edge */
  .p-agents .ag-chead { flex-wrap: wrap; row-gap: 4px; }

  /* A flex item's min-width is auto, and for a text input that resolves to its
     intrinsic size — which is why the prospecting console's company field kept
     its ~170px and pushed the run timer past the card edge. 16px on the text
     is the same floor the phone chrome holds: below it iOS zooms on focus. */
  .p-agents input[type="text"], .p-agents input[type="email"], .p-agents input:not([type]) {
    min-width: 0; font-size: 16px !important;
  }

  .p-agents .ag-ctxrow { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 7px !important; }
  .p-agents .ag-ctxflow, .p-agents .ag-ctxbadge { display: none !important; }

  .p-agents .ag-deploycta { margin: 40px 0 48px !important; padding: 40px 20px !important; }

  /* ---- touch targets -----------------------------------------------------
     The artboard puts an explicit size floor on EVERY console control, not
     only the hero index. Nine groups carry it:

       min-height:48px, full width, 13px  -> the primary run button in each
         console (oBtn / pBtn / lBtn / bBtn). pBtn is flex:1 beside the timer
         rather than 100%, which is why run-p is split out below.
       min-height:44px  -> origin prospect chips (oProspects) and hook chips
         (oHooks), the approve / edit / reject row (oActs), the prospecting
         company chips (pCos), the Legion roster buttons (legion) and its
         escalation rows (lEsc), the Brain question buttons (bQs), and the
         Customer Success action row (sActs).

     Only the hero index had been ported; these controls were sitting at
     19-31px against a spec that says 44. Same floor the phone chrome tests
     enforce for .mnav-* / .mfoot-*. */
  .p-agents .ag-runrow { flex-wrap: wrap; }
  .p-agents [data-act^="run-"] { min-height: 48px; font-size: 13px !important; }
  .p-agents [data-act="run-o"],
  .p-agents [data-act="run-b"],
  .p-agents [data-act="run-l"] { flex: 1 0 100%; margin-left: 0 !important; }
  .p-agents [data-act="run-p"] { flex: 1 1 auto; }
  /* the CS row is sActs: its run button is a 44px peer, not a 48px hero */
  .p-agents [data-act="run-s"] { min-height: 44px; font-size: 10.5px !important; }

  .p-agents .ag-chip,
  .p-agents .ag-sug,
  .p-agents .ag-sughide,
  .p-agents .ag-pill,
  .p-agents .ag-auto,
  .p-agents #oActs button,
  .p-agents [data-act^="s-"],
  .p-agents [data-act="l-compile"] { min-height: 44px; }

  /* the artboard stacks the Legion roster one full-width card per row */
  .p-agents #lMembers { grid-template-columns: 1fr !important; }

  /* The company field takes its own row. The 16px floor above is right, but
     three items on one line left it ~139px, and "Meridian Logistics" needs
     193px at 16px — the value was being cut off mid-word. The artboard
     replaces this input with tappable company chips on a phone; giving it a
     full-width row is the layout-only version of the same fix. */
  .p-agents #pCo { flex: 1 0 100% !important; }
}