/* 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); }
.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: "Worth raising" section + dashed augmentation cards (#341) ──
   Solid = measured (read, lanes); DASHED = generated (augmentation) — the
   reserved #330 encoding. Kind = icon + grey label, ONE accent, no per-kind
   color (epic #141). Tokens only; both themes ride the token values. */
.traj-aug-seclab {
  font-size: var(--fs-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
}
.traj-aug-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.traj-aug {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.traj-aug::before {
  content: "";
  position: absolute;
  left: -0.5px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0.8;
}
.traj-aug-kind {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  align-self: flex-start;
}
.traj-aug-ic {
  display: inline-flex;
  color: var(--text-2);
}
.traj-aug-ic .icon {
  width: 15px;
  height: 15px;
}
.traj-aug-kl {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface-hi);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
}
.traj-aug-term {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
}
.traj-aug-ctx {
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.45;
}
.traj-aug-from {
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.traj-aug-from b {
  color: var(--text-2);
  font-weight: 500;
  margin-right: var(--space-1);
}
.traj-aug-acts {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-1);
}
.traj-aug-keep {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 6px var(--space-4);
  cursor: pointer;
}
.traj-aug-keep.is-kept {
  background: var(--surface-hi);
  color: var(--text-2);
  cursor: default;
}
.traj-aug-dismiss {
  font-size: var(--fs-sm);
  color: var(--text-3);
  background: none;
  border: 1px solid var(--border-sub);
  border-radius: var(--radius-sm);
  padding: 6px var(--space-3);
  cursor: pointer;
}
.traj-aug-empty {
  text-align: center;
  padding: var(--space-4) var(--space-3);
}
.traj-aug-empty h4 {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-md);
  color: var(--text);
  font-weight: 600;
}
.traj-aug-empty p {
  margin: 0 auto;
  font-size: var(--fs-sm);
  color: var(--text-3);
  max-width: 32ch;
  line-height: 1.5;
}

/* ── ORi Next: content layout + collapsible evidence lanes (#341) ── */
#trajectory-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
/* the page owns the read now; drop its standalone margin inside the stack */
#trajectory-content .traj-read {
  margin-bottom: 0;
  background: rgba(var(--accent-rgb), 0.06);
}
.traj-ev {
  border-top: 1px solid var(--border-sub);
  padding-top: var(--space-3);
}
.traj-ev-head {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: var(--fs-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
}
.traj-ev-head .icon {
  transition: transform 0.15s ease;
}
.traj-ev-head[aria-expanded="true"] .icon {
  transform: rotate(90deg);
}
.traj-ev-body {
  margin-top: var(--space-2);
}