/* ═══════════════════════════════════════════════════════════════
   ALEX PAGE
   The homepage shows ALEX answering a person's question. This page
   shows ALEX answering a Worker's question, at runtime, before an
   action runs. Same product, a different scene — and the reason it is
   infrastructure rather than a better search box.
   ═══════════════════════════════════════════════════════════════ */

/* ── the two bad choices ──────────────────────────────────────── */
.choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.choice { background: var(--surface); padding: clamp(26px,3vw,38px); display: flex; flex-direction: column; }
.choice-k {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--label);
}
.choice h3 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(1.15rem,2vw,1.55rem);
  line-height: 1.22; color: var(--silver); margin: 18px 0 12px; max-width: 18ch;
}
.choice p { font-size: 14px; line-height: 1.62; color: var(--label); }
.choice-cost {
  margin-top: auto; padding-top: 18px; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--blocked);
}
.choice.is-answer { background: var(--card); }
.choice.is-answer .choice-k { color: var(--gold); }
.choice.is-answer h3 { color: var(--parchment); }
.choice.is-answer p { color: var(--silver); }
.choice.is-answer .choice-cost { color: var(--established); }
@media (max-width: 900px) { .choices { grid-template-columns: 1fr; } }

/* ── the runtime exchange ─────────────────────────────────────── */
.rt { display: grid; grid-template-columns: 300px minmax(0,1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); }

.rt-rail { background: var(--deep); display: flex; flex-direction: column; }
.rt-btn {
  text-align: left; padding: 18px 20px; border-bottom: 1px solid var(--border);
  width: 100%; position: relative; transition: background .3s var(--ease);
}
.rt-btn:last-child { border-bottom: 0; }
.rt-btn::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--gold);
  transform: scaleY(0); transform-origin: top; transition: transform .4s var(--ease);
}
.rt-btn[aria-selected="true"]::before { transform: scaleY(1); }
.rt-btn[aria-selected="true"] { background: rgba(184,137,42,.08); }
.rt-btn:hover { background: rgba(184,137,42,.05); }
/* The sentence a person reads leads; the function name is texture under it.
   Every verdict is stamped here, so the spread of decisions is visible
   before anyone clicks. */
.rt-desc { font-size: 13.5px; color: var(--silver); display: block; line-height: 1.45; }
.rt-btn[aria-selected="true"] .rt-desc { color: var(--parchment); }
.rt-meta { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.rt-act { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--label); }
.rt-btn[aria-selected="true"] .rt-act { color: var(--gold); }
.rt-stamp {
  margin-left: auto; font-family: var(--mono); font-size: 8.5px; letter-spacing: .16em;
  text-transform: uppercase; padding: 3px 7px; border: 1px solid currentColor; white-space: nowrap;
}
.rt-stamp.proceed { color: var(--established); }
.rt-stamp.escalate { color: var(--waiting); }
.rt-stamp.refuse { color: var(--blocked); }

.rt-panel { background: var(--card); display: flex; flex-direction: column; }
.rt-bar {
  padding: 12px 22px; border-bottom: 1px solid var(--border); background: rgba(8,9,11,.4);
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--label); display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.rt-req { padding: 20px 22px; border-bottom: 1px solid var(--border); }
.rt-req-k { font-family: var(--mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--label); }
.rt-req-v { font-family: var(--mono); font-size: 14px; color: var(--parchment); margin-top: 9px; line-height: 1.5; }

.rt-bar-k { font-family: var(--mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--label); }
.rt-tally {
  margin-left: auto; font-family: var(--mono); font-size: 9px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--label); display: flex; align-items: baseline; gap: 7px;
}
.rt-tally b { font-weight: 400; font-size: 13px; font-variant-numeric: tabular-nums; }
.rt-tally b.proceed { color: var(--established); }
.rt-tally b.escalate { color: var(--waiting); }
.rt-tally b.refuse { color: var(--blocked); }
.rt-tally i { font-style: normal; color: var(--rail); }

.rt-rows { padding: 6px 0; }
.rt-row { display: grid; grid-template-columns: 172px minmax(0,1fr); gap: 18px; padding: 13px 22px; align-items: start; }
.rt-row + .rt-row { border-top: 1px solid rgba(38,44,58,.55); }
.rt-q { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--label); padding-top: 3px; line-height: 1.6; }
.rt-a { font-size: 14px; color: var(--cream); line-height: 1.55; }
.rt-a b { font-weight: 400; color: var(--parchment); }
.rt-a .src { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--label); margin-top: 5px; }
/* A cleared check should read as a result, not as an empty field. */
.rt-a.is-warn, .rt-a.is-none { display: flex; gap: 9px; align-items: baseline; }
.rt-a.is-warn::before, .rt-a.is-none::before { font-family: var(--mono); font-size: 11px; line-height: 1.4; }
.rt-a.is-warn { color: var(--waiting); }
.rt-a.is-warn::before { content: '!'; }
.rt-a.is-none { color: var(--established); }
.rt-a.is-none::before { content: '¹3'; }

.rt-verdict { margin-top: auto; padding: 18px 22px; border-top: 1px solid var(--border); background: rgba(8,9,11,.45); }
.rt-verdict-k {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--label);
}
.rt-checks {
  margin-left: auto; font-size: 9px; letter-spacing: .16em; color: var(--label);
  transition: color .3s var(--ease);
}
.rt-checks b { font-weight: 400; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--silver); }
.rt-checks.is-full b { color: var(--established); }
.rt-verdict-v {
  font-family: var(--mono); font-size: clamp(1rem,2vw,1.35rem); letter-spacing: .1em;
  margin-top: 9px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.rt-verdict-v.proceed { color: var(--established); }
.rt-verdict-v.escalate { color: var(--waiting); }
.rt-verdict-v.refuse { color: var(--blocked); }
.rt-why { font-size: 13.5px; color: var(--silver); line-height: 1.55; margin-top: 10px; max-width: 70ch; }
.rt-next { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.rt-next-k { font-family: var(--mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.rt-next-v { font-size: 13.5px; color: var(--cream); line-height: 1.55; margin-top: 8px; max-width: 70ch; }

/* The scan line reads as the interval before an action runs. It is
   decoration over content that is already complete: if it never moves,
   every row is still on screen and the counter still reads 3 of 3. */
.rt-rows { position: relative; }
.rt-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 1px; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  pointer-events: none; z-index: 2;
}

/* The item being decided dims its stamp and shows a live dot. */
.rt-btn.is-deciding .rt-stamp { opacity: .3; }
.rt-btn.is-deciding .rt-act { color: var(--gold); }
.rt-btn.is-deciding .rt-meta::after {
  content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
  margin-left: 8px; animation: rt-pulse 1s var(--ease) infinite;
}
@keyframes rt-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .25; transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) {
  .rt-btn.is-deciding .rt-meta::after { animation: none; }
}

@media (max-width: 1000px) {
  .rt { grid-template-columns: 1fr; }
  .rt-rail { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .rt-rail::-webkit-scrollbar { display: none; }
  .rt-btn { border-bottom: 0; border-right: 1px solid var(--border); min-width: 230px; }
  .rt-btn::before { top: auto; bottom: 0; left: 0; right: 0; width: auto; height: 2px; transform: scaleX(0); transform-origin: left; }
  .rt-btn[aria-selected="true"]::before { transform: scaleX(1); }
  .rt-row { grid-template-columns: 1fr; gap: 6px; }
  .rt-btn { min-width: 250px; }
  .rt-bar { flex-wrap: wrap; row-gap: 8px; }
  .rt-tally { margin-left: 0; }
  .rt-checks { margin-left: 0; width: 100%; }
}

/* ── where ALEX sits ──────────────────────────────────────────── */
.stack { display: flex; flex-direction: column; gap: 0; }
.stack-band {
  border: 1px solid var(--border); padding: clamp(20px,2.4vw,30px) clamp(22px,3vw,36px);
  background: var(--surface);
}
.stack-band.is-core { background: var(--card); border-color: var(--gold-dim); }
.stack-k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--label); }
.stack-band.is-core .stack-k { color: var(--gold); }
.stack-t { font-family: var(--serif); font-weight: 400; font-size: clamp(1.1rem,1.9vw,1.45rem); color: var(--parchment); margin-top: 10px; }
.stack-n { font-size: 13.5px; color: var(--silver); line-height: 1.55; margin-top: 8px; max-width: 68ch; }
.stack-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.stack-tag {
  font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--label); border: 1px solid var(--rail); padding: 4px 9px;
}
.stack-band.is-core .stack-tag { color: var(--gold-lt); border-color: var(--gold-dim); }
.stack-link {
  display: flex; align-items: center; gap: 12px; padding: 11px 0;
  font-family: var(--mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--label);
}
.stack-link i { flex: 1; height: 1px; background: linear-gradient(90deg, var(--rail), transparent); }
.stack-link span { white-space: nowrap; }

/* ── evidence strip ───────────────────────────────────────────── */
.ev-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.ev-cell { background: var(--vault); padding: 22px 20px; }
.ev-n { font-family: var(--serif); font-size: clamp(1.7rem,3.4vw,2.6rem); line-height: 1; color: var(--established); font-variant-numeric: tabular-nums; }
.ev-n.neutral { color: var(--parchment); }
.ev-k { font-family: var(--mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--label); margin-top: 11px; }
@media (max-width: 800px) { .ev-strip { grid-template-columns: 1fr 1fr; } }

/* ═══ WHERE IT SITS — the wiring, before and after ══════════════
   Four workers, five systems. Without ALEX every worker wires itself
   to every system and carries its own idea of the company; with ALEX
   there is one model and the tangle collapses. The arithmetic on the
   diagram does the arguing: 4x5 against 4+5.
   ═══════════════════════════════════════════════════════════════ */

.wire { border: 1px solid var(--border); background: var(--card); overflow: hidden; }

.wire-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 13px 20px; border-bottom: 1px solid var(--border); background: rgba(8,9,11,.45);
  row-gap: 10px;
}
.wire-steps { display: flex; align-items: center; gap: 9px; }
.wire-lab {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--label);
}
.wire-step {
  width: 26px; height: 26px; line-height: 1; border: 1px solid var(--rail);
  color: var(--silver); font-size: 15px; font-family: var(--sans);
  transition: border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.wire-step:hover:not(:disabled) { border-color: var(--gold); color: var(--gold-lt); background: rgba(184,137,42,.1); }
.wire-step:disabled { opacity: .28; cursor: default; }
.wire-n {
  font-family: var(--mono); font-size: 15px; font-weight: 400;
  font-variant-numeric: tabular-nums; color: var(--parchment); min-width: 12px; text-align: center;
}

.wire-toggle { display: flex; gap: 8px; }
.wire-btn {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--label); padding: 7px 13px; border: 1px solid var(--rail);
  transition: border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.wire-btn:hover { border-color: var(--gold); color: var(--parchment); }
.wire-btn[aria-selected="true"] { border-color: var(--gold); background: rgba(184,137,42,.1); color: var(--gold-lt); }
.wire-count {
  margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--label); white-space: nowrap;
}
.wire-count b { font-weight: 400; font-variant-numeric: tabular-nums; color: var(--parchment); font-size: 14px; }
.wire.is-direct .wire-count b { color: var(--blocked); }
.wire.is-alex .wire-count b { color: var(--established); }

/* ── the stage ────────────────────────────────────────────────── */
.wire-stage { position: relative; height: 430px; }
.wire-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.wire-svg path { fill: none; stroke-linecap: round; }
.wire-direct path { stroke: var(--blocked); stroke-width: 1; opacity: .34; transition: opacity .5s var(--ease); }
.wire.is-crowded .wire-direct path { opacity: .5; }
.wire-hub path { stroke: var(--gold); stroke-width: 1.4; opacity: .75; }

/* ── nodes ────────────────────────────────────────────────────── */
.wnode {
  position: absolute; transform: translate(-50%, -50%);
  background: var(--vault); border: 1px solid var(--rail);
  padding: 9px 12px; text-align: center; z-index: 2; min-width: 96px;
  transition: border-color .5s var(--ease), background .5s var(--ease);
}
.wnode-t { font-family: var(--sans); font-size: 12.5px; color: var(--parchment); line-height: 1.25; white-space: nowrap; }
.wnode.is-off { opacity: 0; pointer-events: none; }
/* Position is never transitioned. The paths are measured the instant a
   node moves, so an animating `left` would be measured mid-flight and
   the wires would start from where the box used to be. */
.wnode.is-worker { transition: opacity .4s var(--ease), border-color .5s var(--ease); }
.wire.is-alex .wnode.is-worker { border-color: rgba(184,137,42,.42); }
.wnode-k { font-family: var(--mono); font-size: 8px; letter-spacing: .16em; text-transform: uppercase; color: var(--label); margin-top: 5px; }


.wnode.is-hub {
  min-width: 200px; padding: 15px 18px; z-index: 3;
  background: var(--deep); border-color: var(--gold);
  opacity: 0; transition: opacity .5s var(--ease), border-color .5s var(--ease);
}
.wire.is-alex .wnode.is-hub { opacity: 1; }
.wnode.is-hub .wnode-t { font-family: var(--serif); font-size: 1.15rem; color: var(--gold-lt); }
.wnode.is-hub .wnode-k { color: var(--label); }

.wire-rowk {
  position: absolute; left: 18px; transform: translateY(-50%);
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--rail); z-index: 1;
}

.wire-foot {
  border-top: 1px solid var(--border); padding: 14px 20px; background: rgba(8,9,11,.35);
  font-size: 14px; color: var(--silver); line-height: 1.55;
}
.wire-foot b { color: var(--parchment); font-weight: 400; }

@media (max-width: 1000px) {
  .wire-stage { height: 380px; }
  .wnode { min-width: 0; padding: 7px 9px; }
  .wnode-t { font-size: 10.5px; }
  .wnode-k { font-size: 7px; }
  .wnode.is-hub { min-width: 150px; padding: 11px 13px; }
  .wire-rowk { display: none; }
}
@media (max-width: 620px) {
  .wire-stage { height: 360px; }
  .wnode-t { white-space: normal; font-size: 9.5px; }
  .wnode { padding: 6px 7px; max-width: 21vw; }
  .wnode.is-hub { max-width: 62vw; }
  .wire-count { margin-left: 0; font-size: 9.5px; }
  .wire-btn { padding: 7px 10px; letter-spacing: .12em; }
}