/* ==========================================================================
   Delphic experience layer - the P3 visual grammar as a component library.
   Ported from Website Upgrade Plan/P3_Concept_Board_v4.html (v4.2, LOCKED
   reference - 06_P3_Visual_System_LOCK_2026-07-09.md), then amended per
   Tarak's B0 review (2026-07-10, recorded in the 06_P3 amendments):
   - gate cursor-light/shadow styles CUT (hero = the plain image for now)
   - the landing machine-view dock is retired; machine-facing navigation now
     belongs to the Knowledge Index itself
   - the verdict staged as an AI chat (typed question -> thinking -> named)

   Components: machine panel / absolutes pair / disclosure ledger,
   scroll explainer (atom field) and the verdict chat.

   Pages hosting machine views should load IBM Plex Mono (Google Fonts);
   the stack below degrades to system mono if absent.
   ========================================================================== */

:root {
  --x-ink: #0a0a0a;
  --x-paper: #f7f7f5;
  --x-mist: #9a9a94;
  --x-card: #101010;
  --x-line: #1e1e1c;
  --x-oracle: #e8dcc0; /* the oracle light - ONLY for the moment of being chosen/named */
  --x-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --x-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --x-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ==========================================================================
   1 · The absolutes pair - pure white (human) against pure black (machine).
   Human side uses the SITE's real classes (label-dot row, Playfair 400,
   #5f5f5f, the hero-button spec) - lift the real classes, not a replica.
   ========================================================================== */

.x-absolutes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #222;
}
@media (max-width: 860px) {
  .x-absolutes { grid-template-columns: 1fr; }
}
.x-absolutes .x-human {
  background: #ffffff;
  color: #000;
}

/* Machine panel - the terminal grammar (white mono on black) */
.x-machine {
  background: #000000;
  font-family: var(--x-mono);
  font-size: 12.5px;
  color: #fff;
}
.x-machine pre {
  white-space: pre-wrap;
  line-height: 1.7;
  margin: 0;
}
.x-machine .x-dim { color: #5d5d57; }
.x-machine .x-key { color: #bdbdb6; }
.x-machine .x-cur::after {
  content: "\258C";
  animation: x-blink 1.1s steps(1) infinite;
}
@keyframes x-blink { 50% { opacity: 0; } }

/* Disclosure ledger - the open/held tree inside a machine panel */
.x-ledger { color: #5d5d57; }
.x-ledger .x-open { color: #bdbdb6; }

/* Machine hero split pane - text left, the image's machine-truth right */
.x-mhero {
  background: #000;
  border: 1px solid #222;
  border-radius: 14px;
  padding: 34px;
  font-family: var(--x-mono);
  font-size: 12.5px;
  color: #fff;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 34px;
  align-items: center;
}
@media (max-width: 860px) {
  .x-mhero { grid-template-columns: 1fr; }
}
.x-mhero pre {
  white-space: pre;
  line-height: 1.6;
  overflow-x: auto;
  margin: 0;
}
.x-mhero .x-a { color: #8f8f88; }
.x-mhero .x-k { color: #bdbdb6; }
.x-mhero .x-gatecol {
  border-left: 1px solid #1c1c1a;
  padding-left: 30px;
}
@media (max-width: 860px) {
  .x-mhero .x-gatecol {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid #1c1c1a;
    padding-top: 22px;
  }
}

/* ==========================================================================
   2 · The scroll explainer - the atom grammar (canonical text left,
   atoms right; drift -> lattice -> calibration -> growth -> THE MARK).
   ========================================================================== */

.x-scrolly {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(360px, 1.15fr);
  gap: 48px;
}
@media (max-width: 900px) {
  .x-scrolly { grid-template-columns: 1fr; }
  .x-scrolly .x-sticky { order: -1; }
}
.x-steps .x-step {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0.24;
  transition: opacity 0.4s;
}
.x-steps .x-step.live { opacity: 1; }
.x-steps .x-step small {
  display: block;
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--x-mist);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.x-steps .x-step h3 {
  font-family: var(--x-serif);
  font-weight: 400;
  font-size: 23px;
  color: #eceae4;
  margin: 0 0 12px;
  line-height: 1.38;
  max-width: 24ch;
  text-wrap: balance;
}
.x-steps .x-step p {
  font-size: 14.5px;
  color: #b9b9b2;
  max-width: 40ch;
  margin: 0;
}
.x-sticky {
  position: sticky;
  top: 8vh;
  height: 84vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.x-field {
  position: relative;
  width: 520px;
  height: 400px;
  flex: none;
  transform-origin: center;
}
.x-atom {
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 4px;
  background: #3a3a35;
  border: 1px solid #45453f;
  left: 0;
  top: 0;
  will-change: transform;
  transition: background 0.35s, border-color 0.35s, box-shadow 0.35s, border-radius 0.3s;
}
.x-atom.on {
  background: var(--x-paper);
  border-color: var(--x-paper);
  box-shadow: 0 0 12px rgba(247, 247, 245, 0.32);
}
.x-atom.join { border-radius: 50%; }

/* ==========================================================================
   3 · The verdict - an AI chat: the question types and submits, the AI
   thinks, reads the one-web, the search slows as it narrows, and
   everything fades to black except one atom and one name.
   ========================================================================== */

.x-verdict {
  background: var(--x-card);
  border: 1px solid var(--x-line);
  border-radius: 14px;
  padding: 44px 26px 48px;
  position: relative;
}
.x-chat {
  max-width: 680px;
  margin: 0 auto;
}
.x-chat-row { display: flex; }
.x-chat-row.x-user { justify-content: flex-end; }
.x-chat-row.x-ai { justify-content: center; margin-top: 30px; }

/* The user bubble - the question, typed then sent (pure black, clean) */
.x-bubble {
  background: #000000;
  border: 1px solid #262622;
  border-radius: 14px;
  padding: 13px 20px;
  font-family: var(--x-sans);
  font-size: 15px;
  color: #ffffff;
  max-width: 46ch;
  min-height: 48px;
}
.x-qcaret::after {
  content: "\258C";
  color: #b9b9b2;
  animation: x-blink 1.1s steps(1) infinite;
}
.x-verdict.asked .x-qcaret { display: none; }

/* The AI reply - centred with the mechanic it narrates */
.x-ai-msg { width: 100%; text-align: center; }
.x-think {
  min-height: 20px;
  font-size: 13px;
  color: #b9b9b2;
  animation: x-vshim 2.2s ease-in-out infinite;
  opacity: 0;
  transition: opacity 0.7s ease 0.25s;
}
.x-verdict.asked .x-think { opacity: 1; }
.x-think b {
  color: var(--x-oracle);
  font-weight: 500;
  letter-spacing: 0.06em;
}
@keyframes x-vshim {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
.x-verdict.resolved .x-think {
  animation: none;
  opacity: 1;
}

/* The one-web the AI reads - eases in once the question is submitted */
.x-web {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 28px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.x-verdict.asked .x-web { opacity: 1; transform: translateY(0); }
.x-seg {
  padding: 0 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.x-seg:last-child { border-right: 0; }
.x-seg .x-vname {
  font-size: 10.5px;
  letter-spacing: 0.13em;
  color: #77776f;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 12px;
  transition: color 0.8s, opacity 0.8s;
  white-space: nowrap;
}
.x-seg .x-grid {
  display: grid;
  grid-template-columns: repeat(5, 11px);
  gap: 5px;
  justify-content: center;
}
.x-seg .x-grid i {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: #2b2b27;
  border: 1px solid #383833;
  transition: background 0.22s, border-color 0.22s, box-shadow 0.22s, opacity 1.1s;
}
.x-seg .x-grid i.fl {
  background: #eeeee8;
  border-color: #eeeee8;
  box-shadow: 0 0 8px rgba(247, 247, 245, 0.4);
}
.x-seg .x-grid i.one {
  background: var(--x-oracle);
  border-color: var(--x-oracle);
  box-shadow: 0 0 16px rgba(232, 220, 192, 0.8);
}
.x-verdict.resolved .x-grid i { opacity: 0.04; }
.x-verdict.resolved .x-grid i.one { opacity: 1; }
.x-verdict.resolved .x-vname { opacity: 0.08; }
.x-verdict.resolved .x-seg.chosen .x-vname {
  opacity: 1;
  color: #ffffff;
}
.x-vstate {
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--x-mist);
  text-transform: uppercase;
}
.x-vstate b {
  color: var(--x-oracle);
  font-weight: 500;
}