/* computation-card.css — ENV.E22. Themed to the Zeq dark/green surface.
   Shared by envelope, observer, feed. Fully responsive: nothing overflows;
   the master equation scrolls in its own box, everything else wraps. */

.zc-card { --zc-accent:#00ff88; --zc-dim:rgba(255,255,255,0.55); --zc-faint:rgba(255,255,255,0.32);
  font-family:'JetBrains Mono',ui-monospace,monospace; color:#fff; max-width:100%; }

.zc-summary { font-size:13px; line-height:1.5; color:#dfe; background:rgba(0,255,136,0.05);
  border-left:2px solid var(--zc-accent); border-radius:2px; padding:10px 12px; margin-bottom:14px; }

.zc-result { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.zc-result-val { font-size:clamp(1.4rem,4vw,2rem); font-weight:700; color:var(--zc-accent); word-break:break-all; }
.zc-result-unc { font-size:12px; color:var(--zc-dim); }
.zc-badge { font-size:9px; letter-spacing:.12em; text-transform:uppercase; border:1px solid var(--zc-faint);
  border-radius:2px; padding:2px 8px; color:var(--zc-dim); }
.zc-badge.ok { color:var(--zc-accent); border-color:rgba(0,255,136,0.4); background:rgba(0,255,136,0.06); }

/* Phase B — "what am I looking at?" explainer. */
.zc-explain-toggle { background:transparent; border:none; color:var(--zc-accent); font-family:inherit;
  font-size:11px; cursor:pointer; text-decoration:underline; padding:0; margin-left:4px; }
.zc-explain { margin:0 0 14px; background:rgba(0,0,0,0.28); border:1px solid rgba(0,255,136,0.14);
  border-radius:3px; padding:12px 14px; font-size:12px; line-height:1.6; color:var(--zc-dim); }
.zc-explain p { margin:0 0 9px; } .zc-explain p:last-child { margin-bottom:0; }
.zc-explain b { color:#eafff4; font-weight:600; }

.zc-block { margin:16px 0; }
.zc-lbl { font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--zc-accent);
  opacity:.85; margin-bottom:8px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.zc-count { background:rgba(0,255,136,0.12); border-radius:10px; padding:0 7px; font-size:10px; color:var(--zc-accent); }

/* Equations — KaTeX blocks live in a scroll box so long master equations
   never break the layout on mobile. */
.zc-eq-master, .zc-eq-sub, .zc-eq-rt, .zc-op-eq {
  overflow-x:auto; overflow-y:hidden; max-width:100%; -webkit-overflow-scrolling:touch; }
.zc-eq-master { background:rgba(0,255,136,0.04); border:1px solid rgba(0,255,136,0.18); border-radius:3px;
  padding:14px 16px; font-size:1.05rem; }
.zc-eq-sub { padding:8px 16px 0; font-size:.95rem; color:#cfe; }
.zc-eq-rt { padding:8px 0; font-size:.95rem; }
.zc-eq-note { font-size:11px; color:var(--zc-dim); margin-top:6px; line-height:1.5; }
.zc-derived { color:#ffc454; }
.zc-empty-note { font-size:12px; color:var(--zc-dim); line-height:1.6; padding:10px 12px;
  background:rgba(255,255,255,0.02); border:1px dashed rgba(255,255,255,0.14); border-radius:3px; }
.zc-eq-fallback { font-family:'JetBrains Mono',monospace; white-space:nowrap; color:#fff; }

/* R(t) — clearly a modulation, not the answer. */
.zc-rt { border:1px dashed rgba(255,196,84,0.35); border-radius:3px; padding:10px 12px; background:rgba(255,196,84,0.03); }
.zc-rt-warn { color:#ffc454; text-transform:none; letter-spacing:0; font-size:10px; }
.zc-rt-live { display:flex; gap:14px; flex-wrap:wrap; font-size:11.5px; color:var(--zc-dim); margin-top:6px; }
.zc-rt-live b { color:#ffc454; }

/* Operators — the human-readable breakdown. */
.zc-ops { display:flex; flex-direction:column; gap:8px; }
.zc-op { border:1px solid rgba(0,255,136,0.16); border-radius:3px; padding:10px 12px; background:rgba(0,255,136,0.025); }
.zc-op-frame { border-color:rgba(255,255,255,0.12); background:rgba(255,255,255,0.02); opacity:.85; }
.zc-op-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; width:100%;
  background:transparent; border:none; padding:0; margin:0; cursor:pointer; text-align:left; font-family:inherit; }
.zc-op-id { font-weight:700; color:var(--zc-accent); font-size:13px; }
.zc-op-frame .zc-op-id { color:rgba(255,255,255,0.7); }
.zc-op-name { font-size:12.5px; color:#fff; }
.zc-op-tag { margin-left:auto; font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--zc-faint);
  border:1px solid var(--zc-faint); border-radius:2px; padding:1px 6px; }
.zc-op-caret { color:var(--zc-faint); font-size:10px; transition:transform .15s; margin-left:6px; }
.zc-op-open .zc-op-caret { transform:rotate(90deg); color:var(--zc-accent); }
.zc-op:hover { border-color:rgba(0,255,136,0.3); }
.zc-op-desc { font-size:11.5px; color:var(--zc-dim); margin:5px 0 4px; line-height:1.5; }
.zc-op-eq { margin:4px 0 2px; font-size:.95rem; }
.zc-op-more { margin-top:8px; padding-top:8px; border-top:1px solid rgba(255,255,255,0.08); }
.zc-op-founder { font-size:11px; color:#cde; font-style:italic; margin-bottom:6px; }
.zc-op-kv { display:flex; justify-content:space-between; gap:10px; font-size:11px; color:var(--zc-dim); padding:2px 0; }
.zc-op-kv span:first-child { color:var(--zc-faint); text-transform:uppercase; letter-spacing:.08em; font-size:9.5px; }
.zc-op-flag { font-size:10.5px; color:#ffc454; margin:6px 0; line-height:1.5; }
.zc-op-run { font-size:10.5px; color:var(--zc-dim); margin-top:6px; }
.zc-op-run code { color:var(--zc-accent); background:rgba(0,0,0,0.3); padding:1px 5px; border-radius:2px; font-size:10.5px; }

/* 7-step protocol trace. */
.zc-steps { display:flex; gap:5px; flex-wrap:wrap; }
.zc-step { display:flex; align-items:center; gap:5px; border:1px solid rgba(0,255,136,0.18); border-radius:2px;
  padding:4px 8px; font-size:10.5px; background:rgba(0,255,136,0.03); }
.zc-step.bad { border-color:rgba(255,107,110,0.4); background:rgba(255,107,110,0.05); }
.zc-step-n { color:var(--zc-faint); }
.zc-step-name { color:#fff; letter-spacing:.04em; }
.zc-step.ok .zc-step-dot { color:var(--zc-accent); }
.zc-step.bad .zc-step-dot { color:#ff6b6e; }

/* Raw / copy. */
.zc-raw { margin-top:14px; font-size:11px; }
.zc-raw summary { cursor:pointer; color:var(--zc-dim); letter-spacing:.06em; }
.zc-raw-row { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:10px; color:var(--zc-faint); }
.zc-copy { background:transparent; border:1px solid var(--zc-faint); color:var(--zc-dim); border-radius:2px;
  font-family:inherit; font-size:10px; padding:2px 8px; cursor:pointer; }
.zc-copy:hover { color:var(--zc-accent); border-color:rgba(0,255,136,0.4); }
.zc-raw-pre { background:rgba(0,0,0,0.35); border:1px solid var(--border,rgba(255,255,255,0.08)); border-radius:2px;
  padding:8px 10px; overflow-x:auto; font-size:11px; color:#cde; margin:4px 0 0; white-space:pre-wrap; word-break:break-word; }
.zc-raw-stored { color:var(--zc-dim); max-height:180px; overflow-y:auto; }

/* KaTeX inherits our light-on-dark; keep it from forcing black. */
.zc-card .katex { color:#fff; font-size:1.05em; }
.zc-op-eq .katex, .zc-eq-rt .katex { font-size:1em; }

@media (max-width:640px) {
  .zc-eq-master { font-size:.95rem; padding:10px 12px; }
  .zc-op-tag { margin-left:0; }
}