/* ============================================================
   QCSC Sovereignty Layer — interactive prototype styles
   Layers on top of cake.css. Drives the live-seal demo,
   pipeline layer states, receipt, verifier, coverage map.
   ============================================================ */

/* ── section frame helper ────────────────────────────────── */
.sec{padding:72px 0;}
.sec-head{margin-bottom:36px;}
.sec-head h2{margin:18px 0 0;font-weight:700;font-size:clamp(34px,4.4vw,58px);line-height:1.02;
  letter-spacing:-1.8px;color:var(--paper);max-width:20ch;}
.sec-head h2 .ac{color:var(--accent);}
.sec-head p{margin:18px 0 0;max-width:680px;font-size:17px;line-height:1.55;color:var(--paper-dim);letter-spacing:-0.1px;}

/* ── LIVE SEAL demo ──────────────────────────────────────── */
.demo{border:1px solid var(--hair-bold);background:var(--panel);}
.demo-top{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair);}
.demo-input,.demo-out{background:var(--panel);padding:30px 32px;}
.demo-input{background:var(--panel-deep);}
.demo-label{font-family:var(--mono);font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:16px;}
.preset-row{display:flex;gap:0;border:1px solid var(--hair);margin-bottom:16px;flex-wrap:wrap;}
.preset{flex:1;min-width:0;padding:11px 12px;background:transparent;border:none;border-right:1px solid var(--hair);
  cursor:pointer;text-align:left;transition:background .15s;}
.preset:last-child{border-right:none;}
.preset:hover{background:var(--panel-hi);}
.preset.active{background:var(--panel-hi);box-shadow:inset 0 -2px 0 var(--accent);}
.preset .pt{font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--paper);letter-spacing:-0.1px;display:block;}
.preset .ps{font-family:var(--mono);font-size:9.5px;letter-spacing:.6px;color:var(--mute);text-transform:uppercase;margin-top:3px;display:block;}
.preset.active .ps{color:var(--accent);}
.demo-field{width:100%;min-height:96px;resize:vertical;background:var(--ink);color:var(--paper);
  border:1px solid var(--hair-bold);padding:14px 16px;font-family:var(--mono);font-size:13px;line-height:1.55;letter-spacing:.2px;}
.demo-field:focus{outline:none;border-color:var(--accent-line);}
.demo-field.err{border-color:var(--red);}
.demo-err{color:var(--red);font-family:var(--mono);font-size:11px;letter-spacing:.5px;margin-top:8px;min-height:14px;}
.demo-actions{display:flex;align-items:center;gap:16px;margin-top:18px;flex-wrap:wrap;}
.run-btn{display:inline-flex;align-items:center;gap:11px;padding:15px 26px;border:none;cursor:pointer;
  background:var(--accent);color:#0a0b0e;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  transition:filter .15s, transform .1s;}
.run-btn:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px);}
.run-btn:disabled{opacity:.4;cursor:not-allowed;}
.run-btn.busy{background:var(--panel-hi);color:var(--accent);cursor:progress;}
.reset-btn{background:none;border:1px solid var(--hair-bold);color:var(--mute);cursor:pointer;
  padding:14px 20px;font-family:var(--mono);font-size:11px;letter-spacing:1.2px;text-transform:uppercase;transition:color .15s,border-color .15s;}
.reset-btn:hover{color:var(--paper);border-color:var(--hair-bold);}
.demo-meter{flex:1;min-width:160px;height:6px;background:var(--panel-hi);position:relative;overflow:hidden;}
.demo-meter .fill{position:absolute;inset:0 100% 0 0;background:linear-gradient(90deg,var(--accent),var(--verify));transition:right .5s cubic-bezier(.2,.7,.3,1);}
.demo-stepcount{font-family:var(--mono);font-size:11px;letter-spacing:1px;color:var(--mute);text-transform:uppercase;white-space:nowrap;}

/* output / ready panel */
.demo-out{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:14px;}
.demo-out.idle{color:var(--mute);}
.demo-out .ph-big{font-family:var(--sans);font-weight:700;font-size:24px;letter-spacing:-0.8px;color:var(--paper);line-height:1.1;}
.demo-out .ph-sub{font-size:14px;color:var(--paper-dim);line-height:1.5;max-width:42ch;}
.live-now{font-family:var(--mono);font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--verify);
  display:inline-flex;align-items:center;gap:9px;}
.live-now::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--verify);box-shadow:0 0 10px var(--verify);animation:ep-pulse 1.2s infinite;}
.live-line{font-family:var(--mono);font-size:13px;color:var(--paper);letter-spacing:.2px;line-height:1.5;word-break:break-all;}
.live-line .k{color:var(--mute);}

/* ── cake in live mode — layer states ────────────────────── */
.cake .layer{opacity:1;transform:none;animation:none;transition:background .25s,box-shadow .3s,opacity .25s;}
.cake.live .layer.is-pending{opacity:.4;}
.cake.live .layer.is-active{opacity:1;background:var(--panel-hi);
  box-shadow:inset 0 0 0 1px var(--lc), 0 0 34px -6px color-mix(in srgb,var(--lc) 60%,transparent);}
.cake.live .layer.is-active .layer-no::before{box-shadow:0 0 16px var(--lc);}
.cake.live .layer.is-done{opacity:1;}
.cake.live .layer.is-done .layer-no .num{color:var(--verify);}
.layer-state{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:1.2px;text-transform:uppercase;
  padding:4px 9px;border:1px solid var(--hair);color:var(--mute);white-space:nowrap;}
.layer-state.active{color:var(--lc);border-color:color-mix(in srgb,var(--lc) 45%,transparent);background:color-mix(in srgb,var(--lc) 10%,transparent);}
.layer-state.done{color:var(--verify);border-color:rgba(45,216,129,.4);background:rgba(45,216,129,.08);}
.layer-out{margin-top:14px;padding-top:13px;border-top:1px dashed var(--hair);
  font-family:var(--mono);font-size:12px;letter-spacing:.3px;color:var(--paper);line-height:1.5;word-break:break-all;}
.layer-out .k{color:var(--mute);text-transform:uppercase;font-size:10px;letter-spacing:1px;}
.layer-out .v{color:var(--lc);}
.layer-tag.clickable{cursor:default;}

/* scanning shimmer on active layer image bar */
.scan{position:absolute;left:0;right:0;top:0;height:2px;overflow:hidden;}
.scan::after{content:"";position:absolute;top:0;left:-40%;width:40%;height:100%;
  background:linear-gradient(90deg,transparent,var(--lc),transparent);animation:scan-run 1s linear infinite;}
@keyframes scan-run{to{left:100%;}}

/* ── RECEIPT ─────────────────────────────────────────────── */
.receipt{margin-top:28px;border:1px solid var(--verify);background:linear-gradient(180deg,rgba(45,216,129,.05),transparent 40%),var(--panel);
  animation:receipt-in .5s cubic-bezier(.2,.7,.3,1) both;}
@keyframes receipt-in{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
.receipt-head{display:flex;align-items:center;justify-content:space-between;padding:20px 28px;border-bottom:1px solid var(--hair);flex-wrap:wrap;gap:12px;}
.receipt-head .t{font-family:var(--mono);font-size:13px;letter-spacing:1.2px;text-transform:uppercase;color:var(--verify);font-weight:600;}
.receipt-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair);}
.receipt-cell{background:var(--panel);padding:18px 26px;}
.receipt-cell .rk{font-family:var(--mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--mute);}
.receipt-cell .rv{font-family:var(--mono);font-size:14px;color:var(--paper);margin-top:6px;letter-spacing:.3px;line-height:1.45;word-break:break-all;}
.receipt-cell .rv .ac{color:var(--accent);}
.receipt-cell .rv .ok{color:var(--verify);}
.copyhash{cursor:pointer;border:1px solid var(--hair-bold);background:none;color:var(--mute);
  font-family:var(--mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;padding:6px 11px;transition:color .15s,border-color .15s;}
.copyhash:hover{color:var(--accent);border-color:var(--accent-line);}

/* ── VERIFIER ────────────────────────────────────────────── */
.verifier{margin-top:28px;border:1px solid var(--hair-bold);background:var(--panel);}
.verifier-in{padding:28px 32px;}
.vfield-row{display:flex;gap:12px;flex-wrap:wrap;align-items:stretch;margin-top:14px;}
.vfield{flex:1;min-width:240px;background:var(--ink);border:1px solid var(--hair-bold);color:var(--paper);
  font-family:var(--mono);font-size:13px;letter-spacing:.3px;padding:13px 15px;}
.vfield:focus{outline:none;border-color:var(--accent-line);}
.vbtn{background:var(--verify);color:#03110a;border:none;cursor:pointer;padding:13px 24px;
  font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;transition:filter .15s;}
.vbtn:hover:not(:disabled){filter:brightness(1.08);}
.vbtn:disabled{opacity:.4;cursor:not-allowed;}
.gates{margin-top:20px;display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair);}
.gate{background:var(--panel-deep);padding:16px 14px;transition:background .25s;}
.gate .gk{font-family:var(--mono);font-size:10px;letter-spacing:.8px;text-transform:uppercase;color:var(--mute);line-height:1.4;min-height:28px;}
.gate .gs{margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;display:inline-flex;align-items:center;gap:7px;color:var(--mute-dim);}
.gate.pending .gs::before{content:"";width:9px;height:9px;border:1.5px solid var(--mute);border-top-color:transparent;border-radius:50%;animation:ep-spin .7s linear infinite;}
.gate.ok{background:rgba(45,216,129,.07);}
.gate.ok .gs{color:var(--verify);}
.gate.ok .gs::before{content:"✓";width:auto;height:auto;border:none;animation:none;font-weight:700;}
.verdict{margin-top:18px;padding:16px 20px;border:1px solid rgba(45,216,129,.4);background:rgba(45,216,129,.07);
  font-family:var(--mono);font-size:13px;letter-spacing:.4px;color:var(--verify);display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  animation:ep-fade .4s ease both;}
.verdict .vx{font-weight:700;}
@media (max-width:760px){.gates{grid-template-columns:1fr 1fr;}}

/* ── COVERAGE MAP ────────────────────────────────────────── */
.cov-stat{display:flex;gap:0;border:1px solid var(--hair);width:fit-content;max-width:100%;flex-wrap:wrap;margin-top:24px;}
.cov-stat .c{padding:14px 22px;border-right:1px solid var(--hair);}
.cov-stat .c:last-child{border-right:none;}
.cov-stat .k{font-family:var(--mono);font-size:10px;letter-spacing:1px;color:var(--mute);text-transform:uppercase;}
.cov-stat .v{font-family:var(--mono);font-size:16px;color:var(--paper);margin-top:5px;}
.cov-stat .v.ac{color:var(--accent);}
.cov-map{margin-top:28px;display:flex;flex-direction:column;gap:1px;background:var(--hair);border:1px solid var(--hair-bold);}
.cov-row{--lc:var(--accent);display:grid;grid-template-columns:230px 1fr;gap:24px;align-items:center;background:var(--panel);
  padding:16px 26px;transition:background .15s;}
.cov-row:hover{background:var(--panel-hi);}
.cov-row .cl{display:flex;align-items:baseline;gap:13px;}
.cov-row .cl .cn{font-family:var(--mono);font-size:20px;font-weight:700;color:var(--lc);letter-spacing:.5px;}
.cov-row .cl .ct{font-family:var(--sans);font-size:15px;font-weight:600;color:var(--paper);letter-spacing:-0.2px;}
.cov-ch{display:flex;flex-wrap:wrap;gap:7px;}
.cov-chip{--cc:var(--accent);font-family:var(--mono);font-size:11.5px;letter-spacing:.3px;padding:5px 11px;cursor:pointer;
  color:var(--cc);border:1px solid color-mix(in srgb,var(--cc) 38%,transparent);background:color-mix(in srgb,var(--cc) 8%,transparent);
  transition:background .15s,transform .1s;}
.cov-chip:hover{background:color-mix(in srgb,var(--cc) 18%,transparent);transform:translateY(-1px);}
@media (max-width:760px){.cov-row{grid-template-columns:1fr;gap:12px;}}

/* ── ENGINE ROOM grid ────────────────────────────────────── */
.layerfilter{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;}
.lf{font-family:var(--mono);font-size:11px;letter-spacing:.8px;text-transform:uppercase;padding:7px 13px;cursor:pointer;
  background:none;border:1px solid var(--hair-bold);color:var(--mute);transition:color .15s,border-color .15s,background .15s;}
.lf:hover{color:var(--paper);}
.lf.active{color:#0a0b0e;background:var(--accent);border-color:var(--accent);font-weight:700;}
.engine-grid{margin-top:24px;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair-bold);}
.eng{--ic:var(--accent);display:flex;flex-direction:column;gap:13px;background:var(--panel);padding:24px 26px;
  border-left:3px solid var(--ic);transition:opacity .2s,background .15s;}
.eng:hover{background:var(--panel-hi);}
.eng.dim{opacity:.18;}
.eng .e-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.eng .e-nm{font-family:var(--mono);font-size:15px;color:var(--ic);letter-spacing:.3px;font-weight:600;}
.eng .e-role{font-family:var(--sans);font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:var(--mute);}
.eng .e-desc{font-size:14px;line-height:1.5;color:var(--paper-dim);letter-spacing:-0.05px;flex:1;}
.eng .e-desc b{color:var(--paper);font-weight:600;}
.eng .e-chips{display:flex;flex-wrap:wrap;gap:7px;}
.eng .e-chip{font-family:var(--mono);font-size:10.5px;letter-spacing:.4px;padding:4px 9px;color:var(--ic);
  border:1px solid color-mix(in srgb,var(--ic) 38%,transparent);background:color-mix(in srgb,var(--ic) 8%,transparent);}
@media (max-width:820px){.engine-grid{grid-template-columns:1fr;}}

/* ── REVEAL beat ─────────────────────────────────────────── */
.reveal{background:#06070a;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);}
.reveal-in{padding:96px 0;max-width:920px;margin:0 auto;text-align:center;}
.reveal .ey{font-family:var(--mono);font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--accent);}
.reveal h2{margin:22px 0 0;font-weight:700;font-size:clamp(36px,5vw,68px);line-height:1.02;letter-spacing:-2.4px;color:var(--paper);}
.reveal h2 .ac{color:var(--accent);font-style:italic;}
.reveal p{margin:24px auto 0;max-width:60ch;font-size:18px;line-height:1.6;color:var(--paper-dim);letter-spacing:-0.1px;}

/* nav cta scroll button */
.nav-cta.demo-jump{cursor:pointer;border:none;}
@media (max-width:760px){.demo-top{grid-template-columns:1fr;}.receipt-grid{grid-template-columns:1fr;}}