/* ════════════════════════════════════════════════════════════
   FLAGSHIP PAGES · Agentic FSM · CRM · ERP
   Rides site.css + cpq.css + loop-visuals.css.
   ════════════════════════════════════════════════════════════ */

.cq[data-loop="fsm"] { --lp: #4F7A5B; }
.cq[data-loop="crm"] { --lp: #8A6E3B; }
.cq[data-loop="erp"] { --lp: #B33B1F; }

/* ─────── flagship hand-off band (sits on each loop page) ─────── */
.cq-flagship { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; margin-top: 34px; padding: 28px 32px; border-radius: var(--r-3); border: 1px solid var(--rule); background: var(--surface); border-left: 3px solid var(--lp); text-decoration: none; color: inherit; transition: transform .25s var(--ease), border-color .25s var(--ease); }
.cq-flagship:hover { transform: translateY(-2px); border-color: var(--lp); border-left-color: var(--lp); }
.cq-flagship .tag { font: 500 9px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #FAFAF7; background: var(--lp); padding: 6px 10px; border-radius: var(--r-pill); white-space: nowrap; }
.cq-flagship h3 { font-size: 24px; font-weight: 500; letter-spacing: -0.025em; margin: 0; color: var(--ink); }
.cq-flagship p { font-size: 14px; color: var(--ink-2); margin: 6px 0 0; line-height: 1.5; }
.cq-flagship .go { font-family: var(--font-mono); font-size: 15px; color: var(--lp); transition: transform .2s var(--ease); }
.cq-flagship:hover .go { transform: translateX(4px); }
@media (max-width: 700px) { .cq-flagship { grid-template-columns: 1fr; gap: 14px; } }

/* ═══════════════ FSM · dispatch board (kanban) ═══════════════ */
.fs-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.fs-col { background: var(--bg-2); border-radius: var(--r-1); padding: 10px; }
.fs-col > .h { display: flex; justify-content: space-between; align-items: center; font: 500 9px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); padding: 3px 4px 10px; }
.fs-col > .h b { color: var(--lp); font-weight: 500; }
.fs-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 5px; padding: 10px; margin-bottom: 7px; opacity: 0; animation: cqRowIn 9s var(--ease) infinite; }
.fs-card:last-child { margin-bottom: 0; }
.fs-card .id { font: 500 9px/1 var(--font-mono); letter-spacing: 0.06em; color: var(--ink-3); }
.fs-card .nm { font-size: 11.5px; color: var(--ink); font-weight: 500; margin-top: 5px; line-height: 1.3; }
.fs-card .mt { display: flex; justify-content: space-between; margin-top: 7px; font: 500 8.5px/1 var(--font-mono); letter-spacing: 0.04em; color: var(--ink-3); }
.fs-card .mt b { color: var(--lp); font-weight: 500; }
.fs-card.hot { border-color: var(--alert, #B33B1F); background: #E8643D0F; }
.fs-card.hot .mt b { color: var(--alert, #B33B1F); }
.fs-col:nth-child(1) .fs-card:nth-child(2) { animation-delay: .1s; }
.fs-col:nth-child(1) .fs-card:nth-child(3) { animation-delay: .3s; }
.fs-col:nth-child(2) .fs-card:nth-child(2) { animation-delay: .6s; }
.fs-col:nth-child(2) .fs-card:nth-child(3) { animation-delay: .9s; }
.fs-col:nth-child(3) .fs-card:nth-child(2) { animation-delay: 1.3s; }
.fs-col:nth-child(4) .fs-card:nth-child(2) { animation-delay: 1.8s; }
.fs-col:nth-child(4) .fs-card:nth-child(3) { animation-delay: 2.1s; }
/* the card that visibly travels between columns */
.fs-card.moving { animation: cqRowIn 9s var(--ease) infinite, fsSlide 9s var(--ease) infinite; animation-delay: 2.6s; }
@keyframes fsSlide { 0%, 20% { transform: translateX(-14px); } 34%, 88% { transform: none; } 96%, 100% { transform: translateX(-14px); } }
.fs-board-foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rule); display: flex; gap: 24px; flex-wrap: wrap; font: 500 10px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.fs-board-foot b { color: var(--lp); font-weight: 500; }

/* ═══════════════ FSM · exception auto-reassign ═══════════════ */
.fs-exc { display: grid; }
.fs-exc-row { display: grid; grid-template-columns: 78px 1fr auto; gap: 14px; align-items: center; padding: 13px 0; border-top: 1px solid var(--rule); font-size: 13px; }
.fs-exc-row:first-child { border-top: none; }
.fs-exc-row .t { font: 500 10px/1 var(--font-mono); color: var(--ink-3); }
.fs-exc-row .d { color: var(--ink-2); }
.fs-exc-row .d b { color: var(--ink); font-weight: 500; }
.fs-exc-row .st { font: 500 9px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 9px; border-radius: var(--r-pill); white-space: nowrap; }
.fs-exc-row .st.ok { background: color-mix(in srgb, var(--lp) 16%, transparent); color: var(--lp); }
.fs-exc-row .st.bad { background: #E8643D1A; color: var(--alert, #B33B1F); }
.fs-exc-row.flag { animation: fsFlagRow 8s var(--ease) infinite; }
@keyframes fsFlagRow { 0%, 26% { background: transparent; } 40%, 70% { background: #E8643D0D; } 84%, 100% { background: transparent; } }
.fs-exc-fix { margin-top: 16px; display: flex; align-items: center; gap: 10px; background: color-mix(in srgb, var(--lp) 10%, transparent); border: 1px solid var(--lp); border-radius: var(--r-1); padding: 12px 14px; font: 500 10px/1.4 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--lp); opacity: 0; animation: cqFade 8s var(--ease) infinite; animation-delay: 1.2s; }

/* ═══════════════ CRM · sequence orchestration ═══════════════ */
.cr-seq { width: 100%; height: auto; position: relative; z-index: 1; }
.cr-seq .ln { fill: none; stroke: var(--rule-strong); stroke-width: 1.5; }
.cr-seq .ln-on { fill: none; stroke: var(--lp); stroke-width: 2.5; stroke-dasharray: 700; stroke-dashoffset: 700; animation: cqDraw 9s var(--ease) infinite; }
.cr-seq .bx { fill: var(--surface); stroke: var(--rule-strong); }
.cr-seq .bx-on { fill: color-mix(in srgb, var(--lp) 12%, transparent); stroke: var(--lp); stroke-width: 2; }
.cr-seq .t { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--ink); }
.cr-seq .s { font-family: var(--font-mono); font-size: 8.5px; fill: var(--ink-3); }
.cr-seq .br-l { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.1em; fill: var(--lp); }
.cr-seq .dot { fill: var(--lp); }
.cr-seq .won { font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: 0.1em; fill: var(--lp); opacity: 0; animation: cqFade 9s var(--ease) infinite; animation-delay: 1.4s; }

/* ═══════════════ CRM · write-back diff ═══════════════ */
.cr-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cr-diff-col { background: var(--bg-2); border-radius: var(--r-1); padding: 16px; }
.cr-diff-col.after { background: color-mix(in srgb, var(--lp) 8%, transparent); border: 1px solid color-mix(in srgb, var(--lp) 30%, transparent); }
.cr-diff-col .h { font: 500 9px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.cr-diff-col.after .h { color: var(--lp); }
.cr-diff-f { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 8px 0; border-top: 1px solid var(--rule); font: 500 11px/1.3 var(--font-mono); }
.cr-diff-f:first-of-type { border-top: none; }
.cr-diff-f .k { color: var(--ink-3); }
.cr-diff-f .v { color: var(--ink); }
.cr-diff-col.after .cr-diff-f.chg { animation: cqHiLite 8s var(--ease) infinite; }
.cr-diff-col.after .cr-diff-f.chg .v { color: var(--lp); font-weight: 500; }
.cr-diff-f:nth-of-type(2) { animation-delay: .3s; } .cr-diff-f:nth-of-type(3) { animation-delay: .6s; } .cr-diff-f:nth-of-type(4) { animation-delay: .9s; }
@keyframes cqHiLite { 0%, 10% { background: transparent; } 20%, 84% { background: color-mix(in srgb, var(--lp) 14%, transparent); } 94%, 100% { background: transparent; } }

/* ═══════════════ ERP · three-way match ═══════════════ */
.er-match { width: 100%; height: auto; position: relative; z-index: 1; }
.er-match .ln { fill: none; stroke: var(--rule-strong); stroke-width: 1.5; }
.er-match .ln-on { fill: none; stroke: var(--lp); stroke-width: 2; stroke-dasharray: 4 70; animation: cqFlow 3s linear infinite; }
.er-match .doc { fill: var(--surface); stroke: var(--rule-strong); }
.er-match .doc-hd { fill: var(--lp); }
.er-match .t { font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; fill: #FAFAF7; }
.er-match .k { font-family: var(--font-mono); font-size: 8.5px; fill: var(--ink-3); }
.er-match .v { font-family: var(--font-mono); font-size: 8.5px; fill: var(--ink); }
.er-match .v-bad { fill: var(--alert, #B33B1F); }
.er-match .hub { fill: var(--surface); stroke: var(--lp); stroke-width: 2; }
.er-match .hub-t { font-family: var(--font); font-size: 13px; font-weight: 500; fill: var(--ink); letter-spacing: -0.01em; }
.er-match .hub-s { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.12em; fill: var(--lp); }
.er-match .warn { font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: 0.1em; fill: var(--alert, #B33B1F); opacity: 0; animation: cqFade 9s var(--ease) infinite; animation-delay: 1.6s; }

/* ═══════════════ ERP · reorder point ═══════════════ */
.er-stock { position: relative; }
.er-stock svg { width: 100%; height: auto; display: block; }
.er-stock .grid-l { stroke: var(--rule); stroke-width: 1; }
.er-stock .area { fill: color-mix(in srgb, var(--lp) 14%, transparent); }
.er-stock .line { fill: none; stroke: var(--lp); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 620; stroke-dashoffset: 620; animation: cqDraw 8s var(--ease) infinite; }
.er-stock .thresh { stroke: var(--alert, #B33B1F); stroke-width: 1; stroke-dasharray: 4 4; }
.er-stock .thresh-t { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; fill: var(--alert, #B33B1F); }
.er-stock .hit { fill: var(--alert, #B33B1F); opacity: 0; animation: cqFade 8s var(--ease) infinite; animation-delay: .9s; }
.er-stock .ax { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.08em; fill: var(--ink-3); }
.er-po { margin-top: 16px; display: flex; align-items: center; gap: 10px; background: color-mix(in srgb, var(--lp) 10%, transparent); border: 1px solid var(--lp); border-radius: var(--r-1); padding: 12px 14px; font: 500 10px/1.4 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--lp); opacity: 0; animation: cqFade 8s var(--ease) infinite; animation-delay: 1.3s; }

@media (prefers-reduced-motion: reduce) {
  .fs-card, .fs-card.moving, .fs-exc-row.flag, .fs-exc-fix, .cr-seq .ln-on, .cr-seq .won,
  .cr-diff-col.after .cr-diff-f.chg, .er-match .ln-on, .er-match .warn, .er-stock .line,
  .er-stock .hit, .er-po { animation: none !important; }
  .fs-card, .fs-exc-fix, .cr-seq .won, .er-match .warn, .er-stock .hit, .er-po { opacity: 1; transform: none; }
  .cr-seq .ln-on, .er-stock .line { stroke-dashoffset: 0; }
}

@media (max-width: 1000px) {
  .fs-board { grid-template-columns: 1fr 1fr; }
  .cr-diff { grid-template-columns: 1fr; }
}
@media (max-width: 620px) { .fs-board { grid-template-columns: 1fr; } }