/* ============================================================
   CAPACITI AHI — "Operator" layer (v2 fresh concept)
   Augmented Human Intelligence as a Service.
   The visual idea: the worker's heads-up view. Warm, not sci-fi.
   A coworker surfacing intelligence; the human always in command.
   Additive to main.css — reuses its tokens.
   ============================================================ */

:root {
  --signal: #e8741f;          /* live intelligence accent */
  --signal-soft: rgba(232,116,31,0.16);
  --command: #4d9b75;         /* the human / "in command" green */
  --command-soft: rgba(77,155,117,0.18);
  --hud-line: rgba(245,239,227,0.30);
  --hud-line-faint: rgba(245,239,227,0.14);
}

/* ---------- operator hero ---------- */
.op-hero {
  position: relative;
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(199,91,18,0.18), transparent 55%),
    radial-gradient(90% 80% at 12% 95%, rgba(47,110,79,0.12), transparent 60%),
    var(--ink);
  color: var(--paper);
  overflow: clip;
  padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(4rem, 8vw, 7rem);
}
.op-hero::after {
  /* faint horizon scan line */
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(245,239,227,0.012) 3px 4px);
  pointer-events: none;
}
.op-hero .hero-grid { position: relative; z-index: 2; }
.op-hero .lede { color: var(--paper-soft); }

/* live value-prop chip */
.live-chip {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--paper-soft);
  border: 1px solid var(--hud-line-faint);
  border-radius: 999px;
  padding: 0.5rem 0.95rem 0.5rem 0.8rem;
  background: rgba(245,239,227,0.03);
  margin-bottom: 1.8rem;
}
.live-chip .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--command);
  box-shadow: 0 0 0 0 rgba(77,155,117,0.5);
}
@media (prefers-reduced-motion: no-preference) {
  .live-chip .dot { animation: ping 2.6s ease-out infinite; }
  @keyframes ping {
    0% { box-shadow: 0 0 0 0 rgba(77,155,117,0.5); }
    70%,100% { box-shadow: 0 0 0 7px rgba(77,155,117,0); }
  }
}
.op-hero h1 { color: var(--paper); max-width: 16ch; }
.op-hero h1 .soft { color: var(--paper-faint); }

/* ---------- HUD corner-bracket frame ---------- */
.hud { position: relative; }
.hud::before, .hud::after {
  content: ''; position: absolute; width: 22px; height: 22px; pointer-events: none;
}
.hud::before { top: -1px; left: -1px; border-top: 2px solid var(--signal); border-left: 2px solid var(--signal); }
.hud::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--signal); border-right: 2px solid var(--signal); }
.hud-tr::before, .hud-tr::after { content: ''; position: absolute; width: 22px; height: 22px; pointer-events: none; }
.hud-tr::before { top: -1px; right: -1px; border-top: 2px solid var(--hud-line); border-right: 2px solid var(--hud-line); }
.hud-tr::after { bottom: -1px; left: -1px; border-bottom: 2px solid var(--hud-line); border-left: 2px solid var(--hud-line); }

/* ---------- operator console (hero right) ---------- */
.op-console {
  background: linear-gradient(168deg, #1d1712, #161009);
  border: 1px solid var(--hud-line-faint);
  border-radius: 14px;
  padding: 1.4rem 1.45rem 1.3rem;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.7), inset 0 1px 0 rgba(245,239,227,0.04);
  font-family: var(--mono);
}
.op-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.op-head {
  font-size: 0.64rem; letter-spacing: 0.14em; color: var(--paper-faint);
  padding-bottom: 0.9rem; margin-bottom: 1.1rem;
  border-bottom: 1px dashed var(--hud-line-faint);
}
.op-head .case { color: var(--paper-soft); }
.op-tag {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.62rem; letter-spacing: 0.12em; color: var(--command);
}
.op-tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--command); }
.op-rec-label { font-size: 0.6rem; letter-spacing: 0.16em; color: var(--signal); margin-bottom: 0.5rem; }
.op-rec {
  font-family: var(--sans); font-weight: 450; font-size: 0.98rem; line-height: 1.5;
  color: var(--paper); margin-bottom: 1rem;
}
.op-meta { display: flex; gap: 1.4rem; margin-bottom: 1.1rem; }
.op-meta .m { font-size: 0.62rem; letter-spacing: 0.06em; color: var(--paper-faint); }
.op-meta .m b { color: var(--command); font-weight: 500; }
.op-meta .m .em { color: var(--signal); }
.op-divider {
  text-align: center; font-size: 0.58rem; letter-spacing: 0.22em; color: var(--paper-faint);
  margin: 0.4rem 0 0.9rem; position: relative;
}
.op-divider::before, .op-divider::after {
  content: ''; position: absolute; top: 50%; width: 24%; height: 1px; background: var(--hud-line-faint);
}
.op-divider::before { left: 0; } .op-divider::after { right: 0; }
.op-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 1rem; }
.op-btn {
  font-family: var(--sans); font-weight: 600; font-size: 0.84rem;
  text-align: center; padding: 0.6rem 0.5rem; border-radius: 8px;
  border: 1px solid transparent;
}
.op-btn.approve { background: var(--signal); color: #1a130c; }
.op-btn.hold { background: transparent; color: var(--paper-soft); border-color: var(--hud-line); }
.op-foot {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem;
  font-size: 0.58rem; letter-spacing: 0.08em; color: var(--paper-faint);
  padding-top: 0.9rem; border-top: 1px dashed var(--hud-line-faint);
}
.op-foot .ok { color: var(--command); }
.op-command-flag {
  font-family: var(--sans); font-size: 0.74rem; color: var(--paper-soft);
  text-align: center; margin-top: 0.2rem;
}
.op-command-flag b { color: var(--paper); }

/* ---------- thesis: the two targets ---------- */
.thesis-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem;
  margin-top: var(--space-block);
}
@media (max-width: 800px) { .thesis-split { grid-template-columns: 1fr; } }
.target {
  border: 1px solid var(--line-dark); border-radius: var(--radius-lg);
  padding: 1.9rem 1.8rem; position: relative; overflow: hidden;
}
.target.wrong { background: rgba(245,239,227,0.02); }
.target.right {
  background: linear-gradient(165deg, rgba(199,91,18,0.14), rgba(47,110,79,0.06));
  border-color: rgba(232,116,31,0.4);
}
.target .tlabel {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 0.55rem; margin-bottom: 1rem;
}
.target.wrong .tlabel { color: var(--paper-faint); }
.target.right .tlabel { color: var(--signal); }
.target .tlabel .ic { width: 18px; height: 18px; flex: none; }
.target h3 { font-size: var(--step-1); margin-bottom: 0.6rem; }
.target.wrong h3 { color: var(--paper-soft); }
.target p { font-size: 0.97rem; color: var(--paper-soft); }
.target .trend {
  margin-top: 1.3rem; height: 54px; width: 100%; display: block;
}

/* ---------- triptych: operator / coworker / supervisor ---------- */
.triptych { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
@media (max-width: 820px) { .triptych { grid-template-columns: 1fr; } }
.trip {
  background: var(--paper); padding: 2rem 1.7rem;
  display: flex; flex-direction: column; gap: 0.55rem;
}
.trip .role-from { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.trip .role { font-family: var(--serif); font-weight: 560; font-size: var(--step-1); line-height: 1.1; }
.trip .role .who { color: var(--ember); display: block; font-size: 0.62em; font-family: var(--mono); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 0.4rem; font-weight: 500; }
.trip p { font-size: 0.95rem; color: var(--ink-soft); margin-top: 0.3rem; }
.trip.mid { background: var(--ink); color: var(--paper); }
.trip.mid .role-from { color: var(--paper-faint); }
.trip.mid p { color: var(--paper-soft); }
.trip.mid .role .who { color: var(--ember-bright); }

/* ---------- Human Above the Loop diagram ---------- */
.loop-fig { max-width: 760px; margin-inline: auto; }
.loop-tier {
  border: 1px solid var(--line-dark); border-radius: 12px;
  padding: 1.3rem 1.5rem; text-align: center; position: relative;
}
.loop-tier.human {
  background: linear-gradient(160deg, rgba(47,110,79,0.16), rgba(47,110,79,0.04));
  border-color: rgba(77,155,117,0.45);
}
.loop-tier.machine {
  background: linear-gradient(160deg, rgba(199,91,18,0.12), rgba(34,27,21,0.4));
  border-color: rgba(232,116,31,0.35);
}
.loop-tier .lt-label { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 0.5rem; }
.loop-tier.human .lt-label { color: var(--command); }
.loop-tier.machine .lt-label { color: var(--signal); }
.loop-tier h4 { font-family: var(--serif); font-weight: 540; font-size: var(--step-1); color: var(--paper); line-height: 1.15; }
.loop-tier p { font-size: 0.92rem; color: var(--paper-soft); margin-top: 0.45rem; max-width: 52ch; margin-inline: auto; }
.loop-gate {
  text-align: center; padding: 0.85rem 0;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--signal);
  position: relative;
}
.loop-gate .bar { display: block; width: 2px; height: 14px; background: var(--hud-line); margin: 0 auto 0.6rem; }
.loop-steps { display: flex; justify-content: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.7rem; }
.loop-steps span {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em;
  color: var(--paper-soft); border: 1px solid var(--hud-line-faint); border-radius: 999px;
  padding: 0.3rem 0.7rem;
}
.loop-steps span .arr { color: var(--signal); margin-left: 0.5rem; }

/* ---------- edge: structural parameters ---------- */
.params { display: grid; gap: 0; counter-reset: prm; }
.param { display: grid; grid-template-columns: 56px 1fr; gap: 1.3rem; padding: 1.7rem 0; }
.param + .param { border-top: 1px solid var(--line); }
.dark .param + .param, .dark-2 .param + .param { border-top-color: var(--line-dark); }
.param::before {
  counter-increment: prm; content: 'P' counter(prm);
  font-family: var(--mono); font-weight: 500; font-size: 0.92rem; color: var(--ember); padding-top: 0.25rem;
}
.param h3 { font-size: var(--step-1); }
.param p { margin-top: 0.45rem; color: var(--ink-soft); }
.dark .param p, .dark-2 .param p { color: var(--paper-soft); }
.param .pk { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ember-deep); }
.dark .param .pk, .dark-2 .param .pk { color: var(--ember-bright); }

/* ---------- edge: four pillars ---------- */
.pillars4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line-dark); border: 1px solid var(--line-dark); border-radius: var(--radius); overflow: hidden; }
@media (max-width: 820px) { .pillars4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .pillars4 { grid-template-columns: 1fr; } }
.p4 { background: var(--ink-2); padding: 1.5rem 1.3rem; }
.p4 .n { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.12em; color: var(--signal); }
.p4 h4 { font-family: var(--serif); font-weight: 540; font-size: 1.12rem; color: var(--paper); margin-top: 0.5rem; }
.p4 p { font-size: 0.88rem; color: var(--paper-soft); margin-top: 0.4rem; }

/* ---------- edge: bridge curriculum ---------- */
.bridge { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.1rem; }
@media (max-width: 820px) { .bridge { grid-template-columns: 1fr; } }
.bridge .card h3 { font-size: 1.18rem; }

/* ---------- callout / aside ---------- */
.aside {
  border-left: 3px solid var(--ember); padding: 0.3rem 0 0.3rem 1.4rem;
  margin: 1.6rem 0; max-width: var(--measure);
}
.aside p { font-style: italic; color: var(--ink-soft); }
.dark .aside p, .dark-2 .aside p { color: var(--paper-soft); }
.aside.warn { border-left-color: var(--signal); }

/* ---------- jarvis credit line ---------- */
.cultref { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--ink-faint); margin-top: 1.5rem; }
.dark .cultref, .dark-2 .cultref { color: var(--paper-faint); }