/* ════════════════════════════════════════════════════════════
   PLATFORM SURFACES · Substrate · Ledger · Oracle ·
   Adjacent Possible · Humanoids
   Rides site.css + cpq.css + loop-visuals.css.
   ════════════════════════════════════════════════════════════ */

.cq[data-loop="substrate"] { --lp: #3F6E7A; }
.cq[data-loop="ledger"]    { --lp: #5C6B2A; }
.cq[data-loop="oracle"]    { --lp: #6B3F7A; }
.cq[data-loop="adjacent"]  { --lp: #8A5A2B; }
.cq[data-loop="humanoids"] { --lp: #2A5C56; }

/* ═══════════════ SUBSTRATE · entity schema ═══════════════ */
.sv-schema { width: 100%; height: auto; position: relative; z-index: 1; }
.sv-schema .ent { fill: var(--surface); stroke: var(--rule-strong); }
.sv-schema .ent-hd { fill: var(--lp); }
.sv-schema .ent-t { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; fill: #FAFAF7; }
.sv-schema .f-k { font-family: var(--font-mono); font-size: 8.5px; fill: var(--ink-3); }
.sv-schema .f-v { font-family: var(--font-mono); font-size: 8.5px; fill: var(--ink); }
.sv-schema .rel { fill: none; stroke: var(--rule-strong); stroke-width: 1.5; }
.sv-schema .rel-f { fill: none; stroke: var(--lp); stroke-width: 2; stroke-dasharray: 4 80; animation: cqFlow 3s linear infinite; }
.sv-schema .rel-l { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.1em; fill: var(--lp); }
.sv-schema .pk { fill: var(--lp); }

/* interface pills */
.sv-ifaces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 26px; }
.sv-iface { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-2); padding: 18px; }
.sv-iface .h { display: flex; align-items: center; gap: 8px; font: 500 10px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--lp); }
.sv-iface .h::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--lp); }
.sv-iface .c { font: 500 11px/1.6 var(--font-mono); color: var(--ink-2); margin-top: 12px; white-space: pre-wrap; }
.sv-iface .c em { font-style: normal; color: var(--lp); }

/* terminal with typing */
.sv-term { background: var(--ink); border-radius: var(--r-2); padding: 20px 22px; overflow: hidden; }
.sv-term .bar { display: flex; gap: 6px; margin-bottom: 16px; }
.sv-term .bar i { width: 9px; height: 9px; border-radius: 999px; background: #FAFAF733; }
.sv-term pre { margin: 0; font: 500 11.5px/1.75 var(--font-mono); color: #FAFAF7CC; white-space: pre-wrap; }
.sv-term .cm { color: #FAFAF766; }
.sv-term .ky { color: #D9A8C5; }
.sv-term .st { color: #C4D0BB; }
.sv-term .ln { display: block; opacity: 0; animation: cqRowIn 10s var(--ease) infinite; }
.sv-term .ln:nth-child(1) { animation-delay: .1s; } .sv-term .ln:nth-child(2) { animation-delay: .4s; }
.sv-term .ln:nth-child(3) { animation-delay: .7s; } .sv-term .ln:nth-child(4) { animation-delay: 1s; }
.sv-term .ln:nth-child(5) { animation-delay: 1.3s; } .sv-term .ln:nth-child(6) { animation-delay: 1.6s; }
.sv-term .ln:nth-child(7) { animation-delay: 1.9s; } .sv-term .ln:nth-child(8) { animation-delay: 2.2s; }

/* ═══════════════ LEDGER · capital acceleration ═══════════════ */
.sv-ledger { display: grid; gap: 0; }
.sv-led-row { display: grid; grid-template-columns: 78px 1fr 84px 74px; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--rule); font: 500 11.5px/1.4 var(--font-mono); animation: cqRowIn 9s var(--ease) infinite; }
.sv-led-row:first-child { border-top: none; }
.sv-led-row:nth-child(1) { animation-delay: .1s; } .sv-led-row:nth-child(2) { animation-delay: .4s; }
.sv-led-row:nth-child(3) { animation-delay: .7s; } .sv-led-row:nth-child(4) { animation-delay: 1s; }
.sv-led-row:nth-child(5) { animation-delay: 1.3s; }
.sv-led-row .dt { color: var(--ink-3); }
.sv-led-row .ev { color: var(--ink); font-family: var(--font); font-size: 13px; font-weight: 500; }
.sv-led-row .am { color: var(--ink); text-align: right; }
.sv-led-row .fl { text-align: right; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 7px; border-radius: var(--r-pill); }
.sv-led-row .fl.adv { background: color-mix(in srgb, var(--lp) 20%, transparent); color: var(--lp); }
.sv-led-row .fl.acc { background: var(--accent-soft); color: var(--accent); }
.sv-led-total { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule-strong); display: flex; justify-content: space-between; align-items: baseline; }
.sv-led-total .k { font: 500 10px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.sv-led-total .v { font-size: 26px; font-weight: 500; letter-spacing: -0.03em; color: var(--lp); }

/* cash-conversion-cycle compression */
.sv-ccc { display: grid; gap: 18px; }
.sv-ccc-row { display: grid; grid-template-columns: 74px 1fr; gap: 14px; align-items: center; }
.sv-ccc-row .k { font: 500 10px/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.sv-ccc-track { position: relative; height: 34px; background: var(--bg-2); border-radius: var(--r-1); overflow: hidden; }
.sv-ccc-track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--r-1); display: flex; align-items: center; padding: 0 12px; font: 500 10px/1 var(--font-mono); letter-spacing: 0.06em; white-space: nowrap; width: 0; animation: cqGrow 8s var(--ease) infinite; }
.sv-ccc-row.before i { background: #E8643D24; color: var(--alert, #B33B1F); --w: 92%; animation-delay: .1s; }
.sv-ccc-row.after i { background: color-mix(in srgb, var(--lp) 24%, transparent); color: var(--lp); --w: 34%; animation-delay: .6s; }
.sv-ccc-save { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule); display: flex; gap: 26px; flex-wrap: wrap; font: 500 10px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.sv-ccc-save b { color: var(--lp); font-weight: 500; }

/* ═══════════════ ORACLE · insight chat ═══════════════ */
.sv-chat { display: grid; gap: 12px; }
.sv-msg { max-width: 82%; padding: 13px 16px; border-radius: var(--r-2); font-size: 13.5px; line-height: 1.5; animation: cqRowIn 12s var(--ease) infinite; }
.sv-msg.you { justify-self: end; background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 4px; }
.sv-msg.ai { justify-self: start; background: var(--bg-2); color: var(--ink); border-bottom-left-radius: 4px; border: 1px solid var(--rule); }
.sv-msg.ai b { color: var(--lp); font-weight: 500; }
.sv-msg:nth-child(1) { animation-delay: .2s; } .sv-msg:nth-child(2) { animation-delay: 1.4s; }
.sv-msg:nth-child(3) { animation-delay: 3.2s; } .sv-msg:nth-child(4) { animation-delay: 4.6s; }
.sv-msg .lb { display: block; font: 500 9px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; opacity: .6; margin-bottom: 7px; }
.sv-typing { display: inline-flex; gap: 4px; align-items: center; }
.sv-typing i { width: 5px; height: 5px; border-radius: 999px; background: var(--ink-3); animation: cqBlink 1.4s var(--ease) infinite; }
.sv-typing i:nth-child(2) { animation-delay: .2s; } .sv-typing i:nth-child(3) { animation-delay: .4s; }

/* generated module card materialising */
.sv-gen { margin-top: 16px; border: 1px dashed var(--lp); border-radius: var(--r-2); padding: 18px; background: color-mix(in srgb, var(--lp) 6%, transparent); animation: cqRowIn 12s var(--ease) infinite; animation-delay: 6s; }
.sv-gen .h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sv-gen .h .t { font: 500 10px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--lp); }
.sv-gen .h .s { font: 500 9px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--lp); background: color-mix(in srgb, var(--lp) 16%, transparent); padding: 4px 8px; border-radius: var(--r-pill); }
.sv-gen h4 { font-size: 16px; font-weight: 500; letter-spacing: -0.02em; margin: 12px 0 0; color: var(--ink); }
.sv-gen .fields { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.sv-gen .fields span { font: 500 9px/1 var(--font-mono); letter-spacing: 0.06em; color: var(--ink-2); background: var(--surface); border: 1px solid var(--rule); padding: 5px 8px; border-radius: var(--r-pill); }

/* ═══════════════ ADJACENT POSSIBLE · SKU morphology ═══════════════ */
.sv-morph { width: 100%; height: auto; position: relative; z-index: 1; }
.sv-morph .br { fill: none; stroke: var(--rule-strong); stroke-width: 1.5; stroke-dasharray: 300; stroke-dashoffset: 300; animation: cqDraw 8s var(--ease) infinite; }
.sv-morph .nd { fill: var(--surface); stroke: var(--rule-strong); }
.sv-morph .nd-root { fill: var(--lp); stroke: var(--lp); }
.sv-morph .t-root { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; fill: #FAFAF7; }
.sv-morph .t { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; fill: var(--ink); }
.sv-morph .t-s { font-family: var(--font-mono); font-size: 8px; fill: var(--ink-3); }
.sv-morph .leaf { opacity: 0; animation: cqFade 8s var(--ease) infinite; }
.sv-morph .new { fill: none; stroke: var(--lp); stroke-width: 2; stroke-dasharray: 3 3; }

/* revenue-type matrix */
.sv-rev { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 26px; }
.sv-rev div { background: var(--surface); border: 1px solid var(--rule); border-top: 2px solid var(--c); border-radius: var(--r-2); padding: 18px; }
.sv-rev .n { font: 500 10px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c); }
.sv-rev .v { font-size: 22px; font-weight: 500; letter-spacing: -0.03em; margin-top: 9px; color: var(--ink); }
.sv-rev .d { font-size: 12px; color: var(--ink-2); margin-top: 7px; line-height: 1.45; }

/* attribute combinatorics grid */
.sv-combo { display: grid; gap: 10px; }
.sv-combo-row { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: center; }
.sv-combo-row .k { font: 500 10px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.sv-combo-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.sv-combo-opts span { font: 500 10px/1 var(--font-mono); letter-spacing: 0.04em; color: var(--ink-2); background: var(--bg-2); border: 1px solid var(--rule); padding: 6px 10px; border-radius: var(--r-pill); }
.sv-combo-opts span.on { background: color-mix(in srgb, var(--lp) 18%, transparent); border-color: var(--lp); color: var(--lp); animation: cqPulseOn 8s var(--ease) infinite; }
@keyframes cqPulseOn { 0%, 12% { background: var(--bg-2); border-color: var(--rule); color: var(--ink-2); } 22%, 88% { background: color-mix(in srgb, var(--lp) 18%, transparent); border-color: var(--lp); color: var(--lp); } 96%, 100% { background: var(--bg-2); border-color: var(--rule); color: var(--ink-2); } }
.sv-combo-out { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule-strong); display: flex; justify-content: space-between; align-items: baseline; }
.sv-combo-out .k { font: 500 10px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.sv-combo-out .v { font-size: 24px; font-weight: 500; letter-spacing: -0.03em; color: var(--lp); }

/* ═══════════════ HUMANOIDS · work routing ═══════════════ */
.sv-route { width: 100%; height: auto; position: relative; z-index: 1; }
.sv-route .lane { fill: none; stroke: var(--rule-strong); stroke-width: 1.5; }
.sv-route .lane-on { fill: none; stroke: var(--lp); stroke-width: 2.5; stroke-dasharray: 400; stroke-dashoffset: 400; animation: cqDraw 8s var(--ease) infinite; }
.sv-route .bx { fill: var(--surface); stroke: var(--rule-strong); }
.sv-route .bx-win { fill: color-mix(in srgb, var(--lp) 12%, transparent); stroke: var(--lp); stroke-width: 2; }
.sv-route .t { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--ink); }
.sv-route .c { font-family: var(--font-mono); font-size: 11px; font-weight: 500; fill: var(--ink); }
.sv-route .c-win { fill: var(--lp); }
.sv-route .s { font-family: var(--font-mono); font-size: 8px; fill: var(--ink-3); }
.sv-route .pick { font-family: var(--font-mono); font-size: 8.5px; font-weight: 500; letter-spacing: 0.1em; fill: var(--lp); opacity: 0; animation: cqFade 8s var(--ease) infinite; animation-delay: .8s; }

/* buy / build / rent / invest */
.sv-bbri { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 26px; }
.sv-bbri div { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-2); padding: 20px; }
.sv-bbri .n { font: 500 10px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--lp); }
.sv-bbri .v { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; margin-top: 10px; color: var(--ink); }
.sv-bbri .d { font-size: 12px; color: var(--ink-2); margin-top: 7px; line-height: 1.45; }

/* ═══════════════ SURFACE CROSS-STRIP ═══════════════ */
.cq-surfaces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 34px; }
.cq-surfaces a { display: grid; align-content: start; gap: 9px; text-decoration: none; color: inherit; padding: 24px; background: var(--surface); border: 1px solid var(--rule); border-top: 2px solid var(--c); border-radius: var(--r-3); min-height: 150px; transition: transform .25s var(--ease), border-color .25s var(--ease); }
.cq-surfaces a:hover { transform: translateY(-2px); border-color: var(--c); }
.cq-surfaces a[aria-current="page"] { background: var(--bg-2); }
.cq-surfaces .sn { font: 500 10px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c); }
.cq-surfaces h3 { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; margin: 0; color: var(--ink); }
.cq-surfaces p { font-size: 13px; color: var(--ink-2); line-height: 1.45; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .sv-schema .rel-f, .sv-term .ln, .sv-led-row, .sv-ccc-track i, .sv-msg, .sv-gen,
  .sv-morph .br, .sv-morph .leaf, .sv-combo-opts span.on, .sv-route .lane-on,
  .sv-route .pick, .sv-typing i { animation: none !important; }
  .sv-term .ln, .sv-led-row, .sv-msg, .sv-gen, .sv-morph .leaf, .sv-route .pick { opacity: 1; transform: none; }
  .sv-ccc-track i { width: var(--w); }
  .sv-morph .br, .sv-route .lane-on { stroke-dashoffset: 0; }
}

@media (max-width: 1000px) {
  .sv-ifaces, .sv-rev, .sv-bbri, .cq-surfaces { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .sv-ifaces, .sv-rev, .sv-bbri, .cq-surfaces { grid-template-columns: 1fr; }
  .sv-led-row { grid-template-columns: 64px 1fr 74px; } .sv-led-row .fl { display: none; }
}