/* ═══════════════════════════════════════════════════════════════
   VERIDOM — THE CASE JOURNEY
   One case object crossing a governed landscape. Evidence docks to it,
   a boundary physically stops it, receipts stack off it, the record
   seals, and exactly one fact rises into company truth.

   Progressive enhancement: hidden by default. journey.js reveals it and
   hides the tab-panel theatre only when it can actually run.
   ═══════════════════════════════════════════════════════════════ */

.journey[hidden] { display: none !important; }

.journey {
  border: 1px solid var(--border);
  background: var(--card);
  position: relative;
  overflow: hidden;
  user-select: none;
}

/* ── company truth: visible the whole way, empty until the end ── */
.jr-truth {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 22px; border-bottom: 1px solid var(--border);
  background: rgba(8,9,11,.45); min-height: 52px;
}
.jr-truth-k {
  font-family: var(--mono); font-size: 9px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold); white-space: nowrap;
}
.jr-truth-slot { position: relative; flex: 1; min-width: 200px; }
.jr-truth-empty {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--label);
}
.jr-truth-fact {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  font-size: 14px; color: var(--established); opacity: 0; line-height: 1.35;
}
.jr-truth-count {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  color: var(--label); white-space: nowrap;
}

/* ── the stage ─────────────────────────────────────────────────── */
.jr-stage { position: relative; height: clamp(360px, 44vh, 470px); }

/* the lane the case travels along */
.jr-lane {
  position: absolute; left: 0; right: 0; top: 53%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border) 8%, var(--border) 92%, transparent);
}
.jr-lane-done {
  position: absolute; left: 0; top: 53%; height: 1px; width: 0;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold));
}

/* ── the case object ───────────────────────────────────────────── */
.jr-case {
  position: absolute; top: 53%; left: 0;
  transform: translate(-50%, -50%);
  width: 172px; padding: 14px 16px;
  background: var(--vault); border: 1px solid var(--rail);
  z-index: 4;
}
.jr-case-id { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--gold); }
.jr-case-amt { font-family: var(--serif); font-size: clamp(1.2rem, 2vw, 1.5rem); color: var(--parchment); margin: 6px 0 8px; line-height: 1; }
.jr-case-state {
  font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--label); display: block;
}
.jr-case.is-blocked { border-color: var(--blocked); }
.jr-case.is-live { border-color: var(--established); }
.jr-case.is-sealed { border-color: var(--gold); }

/* evidence docked onto the case */
.jr-docks { display: flex; gap: 4px; margin-top: 10px; flex-wrap: wrap; }
.jr-dock {
  width: 20px; height: 5px; background: var(--established-deep);
  border: 1px solid var(--established); opacity: 0;
}
.jr-dock.is-gap { background: transparent; border-color: var(--waiting); border-style: dashed; opacity: 1; }
.jr-dock.is-filled { background: var(--established-deep); border-color: var(--established); border-style: solid; }

/* the refusal seal that stamps onto the case */
.jr-seal {
  position: absolute; top: -14px; right: -22px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--blocked); border: 1px solid var(--blocked);
  padding: 4px 8px; background: rgba(139,32,32,.14);
  opacity: 0; transform: rotate(-8deg) scale(2.2);
}

/* ── evidence cards that fly in and dock ───────────────────────── */
.jr-ev {
  position: absolute; z-index: 3;
  padding: 9px 12px; background: var(--surface); border: 1px solid var(--border);
  font-size: 12px; color: var(--silver); white-space: nowrap; opacity: 0;
}
.jr-ev .src {
  display: block; font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--label); margin-top: 4px;
}
.jr-ev.is-gap { border-color: var(--waiting); border-style: dashed; color: var(--waiting); }
.jr-ev.is-gap .src { color: var(--waiting); }

/* ── the boundary wall ─────────────────────────────────────────── */
.jr-wall {
  position: absolute; top: 11%; bottom: 11%; width: 2px;
  background: linear-gradient(180deg, transparent, var(--gold) 12%, var(--gold) 88%, transparent);
  z-index: 2; transform: scaleY(0); transform-origin: center;
}
.jr-wall::before {
  content: ''; position: absolute; inset: 0 -16px;
  background: linear-gradient(90deg, transparent, rgba(184,137,42,.10), transparent);
}
.jr-wall-label {
  position: absolute; top: 14%; white-space: nowrap; z-index: 3;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); opacity: 0; transform: translateX(-50%);
}
.jr-wall-label b { display: block; color: var(--label); font-weight: 400; margin-top: 5px; letter-spacing: .1em; }

/* ── the authority branch ──────────────────────────────────────── */
.jr-auth {
  position: absolute; z-index: 3; text-align: center; opacity: 0;
  transform: translateX(-50%);
}
.jr-auth-line { width: 1px; height: 54px; background: var(--rail); margin: 0 auto; transform-origin: bottom; transform: scaleY(0); }
.jr-auth-card {
  padding: 11px 14px; border: 1px solid var(--rail); background: var(--deep); white-space: nowrap;
}
.jr-auth-role { font-size: 13px; color: var(--parchment); }
.jr-auth-limit { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; color: var(--label); margin-top: 5px; }
.jr-auth.is-bound .jr-auth-card { border-color: var(--established); }
.jr-auth.is-bound .jr-auth-limit { color: var(--established); }

/* ── receipts that fire off the case ───────────────────────────── */
.jr-receipt {
  position: absolute; z-index: 3; opacity: 0;
  padding: 8px 11px; background: var(--vault); border: 1px solid var(--established-deep);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; color: var(--established);
  white-space: nowrap;
}

/* ── the three facts, sealed ───────────────────────────────────── */
.jr-facts { position: absolute; z-index: 3; opacity: 0; transform: translateX(-50%); }
.jr-fact {
  display: grid; grid-template-columns: 78px 1fr; gap: 12px; align-items: center;
  padding: 7px 12px; border: 1px solid var(--border); background: var(--vault);
  margin-bottom: 5px; white-space: nowrap;
}
.jr-fact span { font-family: var(--mono); font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--label); }
.jr-fact b { font-family: var(--mono); font-size: 10.5px; font-weight: 400; letter-spacing: .1em; color: var(--parchment); }
.jr-fact.is-stamped { border-color: var(--gold); }
.jr-fact.is-refusal b { color: var(--blocked); }

/* ── archive: what stays local ─────────────────────────────────── */
.jr-archive { position: absolute; z-index: 3; opacity: 0; transform: translateX(-50%); }
.jr-local {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; color: var(--label);
  padding: 5px 0; white-space: nowrap;
}
.jr-local::before { content: 'LOCAL · '; color: var(--rail); }

/* ── time ribbon ───────────────────────────────────────────────── */
.jr-time {
  position: relative; height: 30px; border-top: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 22px; gap: 14px;
  background: rgba(8,9,11,.35);
}
.jr-time-track { flex: 1; height: 1px; background: var(--border); position: relative; }
.jr-time-track i { position: absolute; inset: 0 100% 0 0; background: var(--gold-dim); }
.jr-time-label {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; color: var(--label);
  min-width: 5ch; text-align: right;
}

/* ── beat caption ──────────────────────────────────────────────── */
.jr-caption {
  border-top: 1px solid var(--border); padding: 15px 22px 17px;
  display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start;
  min-height: 86px; background: rgba(8,9,11,.35);
}
.jr-beat-n { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--gold); padding-top: 3px; }
.jr-beat-t { font-family: var(--serif); font-weight: 400; font-size: 1.22rem; color: var(--parchment); display: block; line-height: 1.25; }
.jr-beat-d { font-size: 13.5px; color: var(--silver); line-height: 1.55; margin-top: 7px; max-width: 74ch; }

/* ── ask alex, attached to the journey ─────────────────────────── */
.jr-ask { border-top: 1px solid var(--border); padding: 14px 22px 18px; background: rgba(8,9,11,.5); }

/* ═══ ELEVATION ════════════════════════════════════════════════ */

/* ── system zones the case crosses ─────────────────────────────── */
/* A header strip, not a lane marker. Sitting these on the lane at 53% put
   every one of them underneath the travelling case card. */
.jr-zone {
  position: absolute; top: 4%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--rail); white-space: nowrap;
  opacity: .85;
}

/* ── the lane ahead of the wall, refusing ──────────────────────── */
.jr-lane-block {
  position: absolute; top: 53%; height: 1px; opacity: 0;
  background: linear-gradient(90deg, var(--blocked), transparent);
}

/* ── impact flash ──────────────────────────────────────────────── */
.jr-flash {
  position: absolute; top: 11%; bottom: 11%; width: 3px;
  background: var(--blocked); opacity: 0; z-index: 3;
  box-shadow: 0 0 24px 6px rgba(192,57,43,.55);
}

/* ── beat dots ─────────────────────────────────────────────────── */
.jr-dots { display: flex; gap: 7px; align-items: center; margin-left: auto; }
.jr-dot {
  width: 16px; height: 2px; background: var(--rail); transition: background .35s var(--ease);
}
.jr-dot.is-on { background: var(--gold); }
.jr-dot.is-past { background: var(--gold-dim); }

/* ── the refusal test ──────────────────────────────────────────── */
.jr-test {
  position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%);
  display: flex; gap: 10px; align-items: center; z-index: 6;
  opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s;
}
.jr-test.is-on { opacity: 1; visibility: visible; }
.jr-test-k {
  font-family: var(--mono); font-size: 9px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--label); margin-right: 4px;
}
.jr-btn {
  font-family: var(--sans); font-size: 12.5px; color: var(--silver);
  padding: 8px 14px; border: 1px solid var(--rail); background: var(--vault);
  transition: border-color .28s var(--ease), color .28s var(--ease);
  white-space: nowrap;
}
.jr-btn:hover { border-color: var(--gold); color: var(--parchment); }
.jr-btn.is-danger:hover { border-color: var(--blocked); color: var(--blocked); }
.jr-btn[disabled] { opacity: .4; pointer-events: none; }

/* the record the refusal test produces */
.jr-verdict {
  position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%);
  z-index: 7; opacity: 0; visibility: hidden;
  border: 1px solid var(--blocked); background: rgba(8,9,11,.96);
  padding: 14px 18px; max-width: 460px;
}
.jr-verdict.is-on { opacity: 1; visibility: visible; }
.jr-verdict-k {
  font-family: var(--mono); font-size: 9px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--blocked); margin-bottom: 8px;
}
.jr-verdict p { font-size: 13.5px; color: var(--cream); line-height: 1.55; }
.jr-verdict code {
  display: block; margin-top: 9px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .08em; color: var(--label);
}
.jr-verdict code b { color: var(--blocked); font-weight: 400; }

/* ── ask alex, contextual to the beat ──────────────────────────── */
.jr-ask {
  border-top: 1px solid var(--border); padding: 13px 22px 15px;
  background: rgba(8,9,11,.5); display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
}
.jr-ask-k {
  font-family: var(--mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--label); display: flex; align-items: center; gap: 8px; padding-top: 7px; white-space: nowrap;
}
.jr-ask-k i {
  width: 12px; height: 14px; background: var(--gold);
  -webkit-mask: var(--seal) center/contain no-repeat; mask: var(--seal) center/contain no-repeat;
}
.jr-ask-q {
  font-family: var(--sans); font-size: 12.5px; color: var(--silver);
  padding: 7px 13px; border: 1px solid var(--rail); border-radius: 100px;
  transition: border-color .28s var(--ease), color .28s var(--ease), background .28s var(--ease);
}
.jr-ask-q:hover { border-color: var(--gold); color: var(--parchment); }
.jr-ask-q[aria-pressed="true"] { border-color: var(--gold); background: rgba(184,137,42,.1); color: var(--gold-lt); }
.jr-ask-a {
  flex: 1 0 100%; margin-top: 11px; padding: 12px 15px; border-left: 2px solid var(--gold);
  background: rgba(184,137,42,.05); font-family: var(--body); font-size: 13.5px;
  line-height: 1.6; color: var(--cream);
}
.jr-ask-a:empty { display: none; }
.jr-ask-a em { color: var(--gold-lt); font-style: normal; }

/* a flying chip used for the promoted fact */
.jr-flyer {
  position: fixed; z-index: 60; pointer-events: none; opacity: 0;
  font-size: 12.5px; color: var(--established); padding: 7px 11px;
  border: 1px solid var(--established); background: var(--vault); white-space: nowrap;
}

/* ═══ THE ADMISSION GATE (section 04) ═══════════════════════════
   The same boundary, applied to a claim instead of an action. It
   deliberately reuses the wall's colour, weight and glow so the two
   sections read as one architecture.
   ═══════════════════════════════════════════════════════════════ */

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

.gate-head {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 13px 20px; border-bottom: 1px solid var(--border); background: rgba(8,9,11,.45);
}
.gate-head-k {
  font-family: var(--mono); font-size: 9px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold);
}
.gate-head-n {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  color: var(--label); margin-left: auto;
}

.gate-stage { position: relative; height: 268px; }

/* the gate itself — the wall, at knowledge scale */
.gate-line {
  position: absolute; left: 43%; top: 9%; bottom: 9%; width: 2px;
  background: linear-gradient(180deg, transparent, var(--gold) 12%, var(--gold) 88%, transparent);
  z-index: 2;
}
.gate-line::before {
  content: ''; position: absolute; inset: 0 -14px;
  background: linear-gradient(90deg, transparent, rgba(184,137,42,.10), transparent);
}
.gate-label {
  position: absolute; left: 43%; top: 2px; transform: translateX(-50%); z-index: 3;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold); white-space: nowrap;
}

/* band rows: established, inferred, rejected */
.gate-band { position: absolute; left: 0; right: 0; height: 1px; background: rgba(38,44,58,.5); }
.gate-band-k {
  position: absolute; right: 20px; transform: translateY(-50%);
  font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  white-space: nowrap;
}
.gate-band-k b { font-weight: 400; font-variant-numeric: tabular-nums; margin-left: 8px; }
.gate-band-k.est { color: var(--established); }
.gate-band-k.inf { color: var(--label); }
.gate-band-k.rej { color: var(--blocked); }

/* a claim the model has proposed */
.claim {
  position: absolute; transform: translateY(-50%);
  padding: 6px 10px; background: var(--vault); border: 1px solid var(--rail);
  font-size: 11.5px; color: var(--silver); white-space: nowrap; z-index: 1; opacity: 0;
}
.claim .src {
  display: block; font-family: var(--mono); font-size: 8px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--label); margin-top: 3px;
}
.claim.is-est { border-color: var(--established); color: var(--parchment); }
.claim.is-est .src { color: var(--established); }
.claim.is-inf { border-color: var(--rail); color: var(--label); }
.claim.is-rej { border-color: var(--blocked); color: var(--label); }
.claim.is-rej .src { color: var(--blocked); }
.claim.is-rej::after {
  content: ''; position: absolute; left: 8px; right: 8px; top: 45%; height: 1px;
  background: var(--blocked); transform: scaleX(0); transform-origin: left;
}
.claim.is-struck::after { transform: scaleX(1); transition: transform .45s var(--ease); }

.gate-foot {
  border-top: 1px solid var(--border); padding: 14px 20px; background: rgba(8,9,11,.35);
  font-size: 13.5px; color: var(--silver); line-height: 1.55;
}
.gate-foot b { color: var(--parchment); font-weight: 400; }
.gate-foot .note {
  display: block; margin-top: 7px; font-size: 12px; color: var(--label);
}

@media (max-width: 860px) {
  .gate-stage { height: 232px; }
  .claim { font-size: 10.5px; padding: 5px 8px; }
  .gate-band-k { font-size: 8px; right: 12px; }
}