/* Trajectory surfaces (#317, viz-only) — the compact bar (Phase B) and
   the Lanes peer page shell (Phase C). Inherits tokens from styles.css;
   no bespoke colors, no inline icons. */

/* ── Compact bar — exactly one row above the incoming feed ─────────────
   Since Phase C the bar is a BUTTON (the Lanes page's tap entry), so it
   carries a full reset; the readout text lives in an inner status span.
   Block, not flex: text-overflow ellipsis only renders in a block
   container — on a flex box the text becomes an anonymous item and
   clips without the "..." at phone widths. */
.trajectory-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  line-height: 22px;
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-sm);
  color: var(--text-2);
  border-bottom: 1px solid var(--border-sub);
}
/* the readout text clamps to one row (terse fallbacks) by default; the read
   variant below lets it wrap. The clamp lives on the text so the flex hint
   beside it is never ellipsized away. */
.trajectory-bar-text {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* #341 Phase D: the forward affordance toward ORi Next, on the right edge. */
.trajectory-bar-hint {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: var(--accent);
  opacity: 0.75;
}
.trajectory-bar-hint .icon { width: 14px; height: 14px; }
.trajectory-bar:hover { color: var(--text); }
/* Linked-viewer (push) mode: the bar is a read-only readout, not a dialog
   opener (Phase A) — signal non-interactivity (no pointer, no hover shift). */
.trajectory-bar--readonly { cursor: default; }
.trajectory-bar--readonly:hover { color: var(--text-2); }
.trajectory-bar--readonly .trajectory-bar-hint { display: none; }
.trajectory-bar:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: -1px;
}
.trajectory-bar-text { pointer-events: none; }

/* #338: the READ strip (only) wraps so the full synthesized sentence is
   readable on phone — drop the single-row nowrap/ellipsis clamp — and carries
   the ONE brand accent (var(--accent) + its --accent-rgb tint, both existing
   tokens, theme-aware) so it reads as a distinct ambient insight. The terse
   relation/drift fallbacks keep the clamped single row. */
.trajectory-bar--read {
  align-items: flex-start;
  border-left: 3px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
}
/* the clamp lives on the text now (see .trajectory-bar-text) — the read variant
   lets it wrap so the full synthesized sentence is readable on phone. */
.trajectory-bar--read .trajectory-bar-text {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* an explicit display would defeat the hidden attribute — keep it authoritative */
.trajectory-bar[hidden] {
  display: none;
}

/* ── Lanes page shell (quiz-page pattern: slide-in peer surface) ────── */
#trajectory-overlay {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 300;
  display: none;
}
#trajectory-overlay.open { display: block; }

/* ORi Next docks on the LEFT (#341 Phase D) — the mirror of Quiz ORi's
   right-dock. Right-swipe -> slides in from the left (translateX(-100%) -> 0);
   the dock side itself distinguishes the two companions. */
.traj-page {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: min(560px, 100vw);
  max-width: 100vw;
  background: var(--surface);
  border-right: 1px solid var(--border);
  z-index: 301;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transform: translateX(-100%);
  transition: transform var(--duration-normal) var(--ease-out);
  pointer-events: none;
}
.traj-page.open {
  transform: translateX(0);
  pointer-events: auto;
}
@media (max-width: 560px) {
  .traj-page { width: 100vw; border-right: 0; }
}

/* region toggling runs on the hidden attribute; keep it authoritative
   over any display rule inside the page */
.traj-page [hidden] { display: none !important; }

.traj-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-sub);
  flex: 0 0 auto;
}
.traj-back {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: var(--space-1);
  color: var(--text-2);
  cursor: pointer;
  display: flex;
  align-items: center;
}
.traj-back:hover { color: var(--text); }
.traj-title {
  margin: 0;
  font-size: var(--fs-lg);
  color: var(--text);
}
.traj-subtitle {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.traj-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
}

.traj-hint {
  color: var(--text-3);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.traj-empty-title {
  margin: var(--space-4) 0 var(--space-2);
  color: var(--text);
  font-size: var(--fs-md);
}

/* ── #338 LLM read — the synthesized "where this is heading" headline,
   rendered at the top of the lanes list when present ────────────────── */
.traj-read {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
}
.traj-read-lab {
  font-size: var(--fs-xs);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.traj-read-line {
  font-size: var(--fs-md);
  color: var(--text);
  line-height: 1.4;
}

/* ── Lanes (C4) — everything shown is measured; chips are FILLED ────── */
.traj-rel {
  display: flex;
  flex-direction: column;
  gap: var(--space-0);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.traj-rel-lab {
  font-size: var(--fs-xs);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.traj-rel-line {
  font-size: var(--fs-sm);
  color: var(--text);
}

.traj-lane-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.traj-lane {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-sub);
  border-radius: var(--radius-md);
  color: var(--text);
}
.traj-lane:hover { border-color: var(--border); }
.traj-lane:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: -1px;
}

.traj-lane-top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
}
.traj-lane-name {
  font-size: var(--fs-sm);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
}
.traj-lane-pull {
  flex: 1 1 40px;
  min-width: 32px;
  height: 4px;
  border-radius: 2px;
  background: var(--border-sub);
  overflow: hidden;
}
.traj-lane-pull i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
}
.traj-lane-n {
  font-size: var(--fs-xs);
  color: var(--text-3);
  white-space: nowrap;
}
.traj-lane-drift {
  font-size: var(--fs-xs);
  color: var(--text-2);
}

.traj-lane-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.traj-chip {
  font-size: var(--fs-xs);
  color: var(--text-2);
  border: 1px solid var(--border-sub);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-2);
  line-height: 20px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* solid border on purpose: DASHED is reserved by the locked encoding
   rule (dashed = predicted, #330) and must not leak into measured UI */
.traj-lane-unclustered {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-sub);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  color: var(--text-3);
}

.traj-more {
  margin-top: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--text-3);
}

/* ── Drill-down (bounded, U6) ───────────────────────────────────────── */
.traj-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.traj-detail-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.traj-detail-back {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font-size: var(--fs-sm);
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
}
.traj-detail-back:hover { color: var(--text); }
.traj-detail-title {
  font-size: var(--fs-md);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.traj-detail-count {
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.traj-detail-body {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.traj-detail-more {
  font-size: var(--fs-xs);
  color: var(--text-3);
}

/* ORi Next page styles (#341 augmentation, #464 evidence-first) live in
   styles-ori-next.css. */