/* ==========================================================================
   /agents — the hub (agents.php) + the four single-demo pages (agent.php +
   partials/demos/<slug>.php). Re-skinned onto the concept's Night palette
   (near-black + gold): all colour is driven by demo-scoped vars that map onto
   the brand tokens in main.css. Demo logic is js/agents-demos.js.
   ========================================================================== */

.agents-page {
  --demo-surface:       #161616;                    /* stage / card panel      */
  --demo-node:          #1e1e1e;                    /* SVG node fill, sub-cards */
  --demo-node-active:   #2a2410;                    /* gold-lit active node     */
  --demo-border:        rgba(255, 255, 255, 0.14);
  --demo-border-hover:  rgba(229, 177, 3, 0.55);
  --demo-heading:       #ffffff;
  --demo-text:          #F2F3F5;
  --demo-text-2:        #C9CDD6;                     /* --paper-dim             */
  --demo-text-3:        #8A8F9A;                     /* --slate-on-dark         */
  --demo-accent:        #E5B103;                     /* --gold                  */
  --demo-accent-glow:   rgba(229, 177, 3, 0.16);
  --demo-accent-strong: rgba(229, 177, 3, 0.5);
  --demo-pulse:         #FFDA55;                     /* bright gold data pulse   */
  --demo-danger:        #F87171;
  --demo-warn:          #F5B942;                     /* held / caution outcomes  */
  --demo-good:          #6FCF97;                     /* clean / success outcomes */
}

/* ---- Demo stage ---------------------------------------------------------- */
.demo-stage {
  background: var(--demo-surface);
  border: 1px solid var(--demo-border);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
}

.demo-flow-wrap {
  overflow-x: auto;
  margin: 0 calc(-1 * var(--s-2));
  padding: 0 var(--s-2);
}
svg.demo-flow { display: block; width: 100%; height: auto; }

/* ---- SVG nodes ----------------------------------------------------------- */
.node-rect {
  fill: var(--demo-node);
  stroke: var(--demo-border);
  stroke-width: 1.5;
  transition: fill 250ms var(--ease), stroke 250ms var(--ease), filter 250ms var(--ease);
}
.node.active .node-rect {
  fill: var(--demo-node-active);
  stroke: var(--demo-accent);
  filter: drop-shadow(0 0 8px var(--demo-accent-strong));
}
.node.thinking .node-rect {
  stroke: #f59e0b;
  filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.55));
}
.node.dim .node-rect,
.node.dim .diamond { opacity: 0.32; }

.node-icon  { font-size: 15px; text-anchor: middle; dominant-baseline: central; fill: var(--demo-text); }
.node-label { fill: var(--demo-heading); font-size: 11px; text-anchor: middle; font-weight: 500; }
.node-sub   { fill: var(--demo-text-3); font-size: 9px; text-anchor: middle; }

.diamond {
  fill: var(--demo-node);
  stroke: var(--demo-border);
  stroke-width: 1.5;
  transition: fill 250ms var(--ease), stroke 250ms var(--ease), filter 250ms var(--ease);
}
.node.active .diamond {
  fill: var(--demo-node-active);
  stroke: var(--demo-accent);
  filter: drop-shadow(0 0 8px var(--demo-accent-strong));
}

.edge { fill: none; stroke: var(--demo-border); stroke-width: 1.5; transition: stroke 250ms var(--ease), opacity 250ms var(--ease); }
.edge.dim { opacity: 0.25; }
.edge.traveled { stroke: var(--demo-accent); }

.pulse { fill: var(--demo-pulse); filter: drop-shadow(0 0 6px rgba(255, 218, 85, 0.9)); }

.branch-label { fill: var(--demo-text-3); font-size: 10px; text-anchor: middle; font-style: italic; }

/* ---- Results ------------------------------------------------------------- */
/* The panel keeps its reserved min-height (pinned inline by reserveSpace) at all
   times so nothing below it shifts. The fade-in lives on the header + grid, not
   the container, leaving the empty reserved box free to host the in-progress
   overlay while the workflow runs. */
.demo-results {
  margin-top: var(--s-5);
  position: relative;
}
.demo-results-hdr,
.demo-grid {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 400ms var(--ease), transform 400ms var(--ease);
}
.demo-results.show .demo-results-hdr,
.demo-results.show .demo-grid { opacity: 1; transform: translateY(0); }

/* ---- In-progress overlay ------------------------------------------------- */
/* Fills the reserved-but-empty panel while a run is mid-flight, naming the live
   step so the black box reads as "working", not "broken". Absolutely positioned
   so it never contributes to the reserveSpace height measurement. Visible only
   while .working is set and the results have not yet shown. */
.demo-working {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-4);
  text-align: center;
  opacity: 0;
  transition: opacity 300ms var(--ease);
  pointer-events: none;
}
.demo-results.working:not(.show) .demo-working { opacity: 1; }
.demo-working-label {
  font-size: 0.9rem;
  color: var(--demo-text-2);
  letter-spacing: 0.01em;
}
/* AI step: light the caption gold and prefix the same "AI" pill the graph puts
   on its AI nodes, so the moment the model is doing the work reads unmistakably
   (and stays on the single gold accent). */
.demo-results.working-ai .demo-working-label {
  color: var(--demo-accent);
  font-weight: 600;
}
.demo-results.working-ai .demo-working-label::before {
  content: 'AI';
  display: inline-block;
  margin-right: 8px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--demo-accent);
  color: var(--ink);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  vertical-align: middle;
  transform: translateY(-1px);
}
.demo-working-bar {
  position: relative;
  width: min(220px, 55%);
  height: 2px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--demo-border);
}
.demo-working-bar::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--demo-accent), transparent);
  animation: demo-sweep 1.25s var(--ease) infinite;
}
@keyframes demo-sweep {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}
@media (prefers-reduced-motion: reduce) {
  .demo-working-bar::after { animation: none; left: 30%; opacity: 0.6; }
}

.demo-results-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  color: var(--demo-text-2);
  font-size: 0.85rem;
  margin-bottom: var(--s-3);
}
.demo-grid { display: grid; gap: var(--s-3); }

.mini-tbl { width: 100%; border-collapse: collapse; font-size: 0.7rem; }
.mini-tbl th { text-align: left; padding: 3px 5px; color: var(--demo-text-3); font-weight: 500; border-bottom: 1px solid var(--demo-border); }
.mini-tbl td { padding: 3px 5px; color: var(--demo-text); }
.mini-tbl tr.new td { background: rgba(229, 177, 3, 0.10); }
.mini-tbl td.r, .mini-tbl th.r { text-align: right; }
.mini-tbl .ok { color: var(--demo-good); }

/* ==========================================================================
   Single-demo pages (/agents/<slug>) — the four business agent demos.
   One demo per page. Reuses the demo-scoped vars above; adds the demo-specific
   components (CCTV frame, inbound panels, result cards) and the phone layout.
   Engine: js/agents-demos.js. Markup: agent.php + partials/demos/<slug>.php.
   ========================================================================== */

.agent-demo { margin-bottom: var(--s-7); }

.demo-body {
  max-width: 68ch;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--ink);
  margin: 0 0 var(--s-5);
}
.demo-note {
  margin-top: var(--s-5);
  max-width: 74ch;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--ink);
  border-left: 2px solid var(--hairline);
  padding-left: var(--s-4);
}
.demo-note strong { color: var(--ink); font-weight: 700; }

/* Secondary copy on the white agents pages: use ink, not slate — slate reads
   washed out on Paper. Scoped so the approved services pages keep their slate. */
.agents-page .page-cta p { color: var(--ink); }

.demo-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-3);
}
.demo-tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-deep-text);
}
.demo-run { white-space: nowrap; }
.demo-run:disabled { opacity: 0.5; cursor: default; }

/* ---- AI-judgement node marker (on-brand: gold badge, gold-tint resting -----
   border). Single-accent rule holds — the gold "AI" badge marks where the
   model runs; active nodes still read distinctly via their lit fill + glow. */
.node.ai:not(.active):not(.thinking) .node-rect { stroke: var(--demo-accent-strong); }
.ai-badge-bg { fill: var(--demo-accent); }
.ai-badge-txt { fill: var(--ink); font-size: 8px; font-weight: 800; letter-spacing: 0.6px; text-anchor: middle; dominant-baseline: central; }
.node.dim .ai-badge-bg, .node.dim .ai-badge-txt { opacity: 0.32; }

/* ---- CCTV frame (Site Watch) -------------------------------------------- */
.demo-frame {
  position: relative;
  height: 168px;
  margin-bottom: var(--s-4);
  background: #0a0a0a;
  border: 1px solid var(--demo-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 300ms var(--ease), box-shadow 300ms var(--ease);
}
.demo-frame.flagged { border-color: var(--demo-accent); box-shadow: inset 0 0 0 2px var(--demo-accent-strong); }
.demo-frame::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px);
  pointer-events: none; z-index: 3;
}
.demo-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; filter: contrast(1.02) saturate(1.02); }
.demo-frame .cam-label { position: absolute; top: 9px; left: 12px; font-size: 0.7rem; color: var(--demo-accent); letter-spacing: 0.5px; z-index: 2; }
.demo-frame .rec { position: absolute; top: 9px; right: 12px; font-size: 0.7rem; color: var(--demo-danger); z-index: 2; }
.demo-frame .rec::before { content: '\25CF'; margin-right: 5px; animation: demo-blink 1.4s steps(1) infinite; }
@keyframes demo-blink { 50% { opacity: 0.2; } }
.demo-frame .scene-cap { position: absolute; bottom: 9px; left: 12px; right: 12px; font-size: 0.72rem; color: var(--demo-text-2); z-index: 2; }
.demo-frame .det-box { position: absolute; border: 2px solid var(--demo-accent); border-radius: 4px; opacity: 0; transition: opacity 300ms var(--ease); z-index: 1; }
.demo-frame.flagged .det-box { opacity: 0.9; }
@media (prefers-reduced-motion: reduce) { .demo-frame .rec::before { animation: none; } }

/* ---- Inbound panel (invoice / quote request / overdue) ------------------ */
.demo-inbound {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  background: var(--demo-node);
  border: 1px solid var(--demo-border);
  border-radius: var(--radius-lg);
  padding: var(--s-4);
  margin-bottom: var(--s-4);
  font-size: 0.85rem;
}
.demo-inbound .tag {
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  margin-top: 2px;
}
.demo-inbound .tag.blue { background: #0078d4; }
.demo-inbound .tag.green { background: #217346; }
.demo-inbound .tag.red { background: #b02a37; }
.demo-inbound .body-wrap { flex: 1; min-width: 0; }
.demo-inbound .meta { color: var(--demo-text-3); font-size: 0.72rem; margin-bottom: 0.35rem; line-height: 1.5; }
.demo-inbound .meta strong { color: var(--demo-text); font-weight: 600; }
.demo-inbound .body { color: var(--demo-text); line-height: 1.55; }
.demo-inbound .chips { margin-top: 0.5rem; display: flex; gap: 6px; flex-wrap: wrap; }
.demo-inbound .chips span { background: var(--demo-surface); border: 1px solid var(--demo-border); color: var(--demo-text-3); font-size: 0.68rem; padding: 2px 9px; border-radius: 20px; }

/* ---- Verdict + result grid --------------------------------------------- */
.demo-verdict { font-weight: 600; color: var(--demo-accent); }
.demo-verdict.good { color: var(--demo-good); }
.demo-verdict.warn { color: var(--demo-warn); }
.demo-verdict.bad  { color: var(--demo-danger); }

.demo-grid.c3 { grid-template-columns: repeat(3, 1fr); }
.demo-grid.c2 { grid-template-columns: repeat(2, 1fr); }
.demo-grid.c1 { grid-template-columns: 1fr; max-width: 560px; }

.demo-card {
  background: var(--demo-node);
  border: 1px solid var(--demo-border);
  border-radius: 10px;
  overflow: hidden;
}
.demo-card .card-hdr {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--demo-border);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--demo-heading);
}
.demo-card .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--demo-good); flex-shrink: 0; }
.demo-card .dot.warn { background: var(--demo-warn); }
.demo-card .dot.bad { background: var(--demo-danger); }
.demo-card .card-body { padding: 0.75rem 0.9rem; font-size: 0.78rem; color: var(--demo-text-2); line-height: 1.55; }
.demo-card .card-body strong { color: var(--demo-text); font-weight: 600; }
.demo-card .card-body em { color: var(--demo-text); font-style: normal; font-weight: 500; }
.demo-card .card-body a { color: var(--demo-accent); }
.demo-card .card-body ul { margin: 6px 0 0 16px; padding: 0; }

.pill { display: inline-block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.03em; padding: 2px 8px; border-radius: 20px; }
.pill.draft { background: rgba(245, 185, 66, 0.16); color: var(--demo-warn); }
.pill.hold  { background: var(--demo-accent-glow); color: var(--demo-accent); }
.pill.sent  { background: rgba(111, 207, 151, 0.16); color: var(--demo-good); }

/* ---- Phone layout: portrait graphs fill width, cards single-column ------ */
@media (max-width: 720px) {
  .demo-grid.c3, .demo-grid.c2 { grid-template-columns: 1fr; }
  .demo-flow-wrap { overflow-x: visible; }
  .demo-inbound { flex-direction: column; gap: var(--s-2); }
  .demo-tools { flex-wrap: wrap; }
}

/* ==========================================================================
   /agents hub — the four demo cards linking to each demo page.
   ========================================================================== */
.agent-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
}
.agent-cards > li { margin: 0; }

.agent-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--s-6);
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color 250ms var(--ease), transform 250ms var(--ease), box-shadow 250ms var(--ease);
}
.agent-card:hover, .agent-card:focus-visible {
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(18, 24, 40, 0.08);
}
.agent-card-icon { font-size: 1.6rem; line-height: 1; margin-bottom: var(--s-3); }
.agent-card-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-deep-text);
  margin-bottom: var(--s-2);
}
.agent-card-title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: var(--s-3);
}
.agent-card-pitch {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ink);
  margin-bottom: var(--s-4);
}
.agent-card-cta {
  margin-top: auto;
  font-weight: 600;
  color: var(--gold-deep-text);
}
.agent-card:hover .agent-card-cta { text-decoration: underline; }

@media (max-width: 720px) {
  .agent-cards { grid-template-columns: 1fr; gap: var(--s-4); }
}