/* =========================================================================
   TrajLab — visual identity: "indigo on slate", a velocity ramp
   (siblings: BeamLab cyan, FrameLab teal, ShaftLab bronze, GearLab green,
    BearingLab amber, BoltLab indigo-violet, MotionLab pink, DriveLab gold,
    RotLab orchid, KineLab lime)
   ========================================================================= */
:root {
  --bp-bg: #101218;
  --bp-bg2: #151822;
  --bp-panel: #1b1f2b;
  --bp-panel2: #242938;
  --bp-line: #333a4d;
  --bp-line2: #48516a;
  --bp-ink: #e8eaf2;
  --bp-ink-dim: #99a0b5;
  --bp-cyan: #748ffc;          /* primary accent: indigo */
  --bp-blue: #58c6f5;
  --bp-amber: #ffd43b;
  --bp-mark: #ffd43b;
  --bp-red: #ff6f8b;
  --bp-green: #7dd3a0;
  --bp-violet: #b197fc;
  --bp-pink: #f472b6;
  --bp-steel: #b8bec9;

  /* the four quantities, used identically in the figures and the calculator */
  --q-pos: #ffa94d;
  --q-vel: #748ffc;
  --q-acc: #7dd3a0;
  --q-jerk: #ff6f8b;

  --page-max: 1480px;
  --calc-col: 430px;
  --learn-col: 300px;
}

/* A velocity ramp, repeated. */
body {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cg fill='none' stroke='%23748ffc' stroke-opacity='0.05'%3E%3Cpath d='M15 110 C 45 110, 45 45, 75 45 L 135 45'/%3E%3Cline x1='15' y1='120' x2='135' y2='120'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(rgba(116, 143, 252, 0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(116, 143, 252, 0.024) 1px, transparent 1px);
  background-size: 150px 150px, 150px 150px, 150px 150px;
}

/* ------------------------------ TrajLab only ---------------------------- */
#profileView, #phaseView {
  background: rgba(16, 18, 24, 0.55);
  border: 1px solid var(--bp-line);
  border-radius: 8px;
}

.seg-row.big button .jt-sub { display: block; font-size: 0.68rem; opacity: 0.72; }

/* Which of the four cases the plan landed in — the thing chapter 4 is about. */
.case-badge {
  display: inline-block; margin-top: 0.55rem;
  padding: 0.28rem 0.7rem; border-radius: 999px;
  font-family: var(--mono); font-size: 0.75rem;
  border: 1px solid var(--bp-cyan); color: var(--bp-cyan);
  background: rgba(116, 143, 252, 0.1);
}
.case-badge.warn { border-color: var(--bp-amber); color: var(--bp-amber); background: rgba(255, 212, 59, 0.1); }

/* The seven segments, laid out as a proportional strip. */
.seg-strip { display: flex; height: 26px; margin-top: 0.6rem; border-radius: 6px; overflow: hidden; border: 1px solid var(--bp-line); }
.seg-strip div {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 0.62rem; color: var(--bp-bg);
  overflow: hidden; white-space: nowrap;
}
.seg-strip .sj { background: var(--q-jerk); }
.seg-strip .sa { background: var(--q-acc); }
.seg-strip .sv { background: var(--q-vel); }
.seg-legend { display: flex; gap: 0.9rem; margin-top: 0.35rem; font-family: var(--mono); font-size: 0.68rem; color: var(--bp-ink-dim); }
.seg-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 0.28rem; vertical-align: -1px; }

/* Multi-axis rows. */
.axis-row { display: grid; grid-template-columns: 1.6rem 1fr 5.4rem 30px; gap: 0.45rem; align-items: center; margin-bottom: 0.4rem; }
.axis-row label { font-family: var(--mono); font-size: 0.74rem; color: var(--bp-ink-dim); text-align: right; }
.axis-row .atime { font-family: var(--mono); font-size: 0.73rem; text-align: right; color: var(--bp-cyan); }
.axis-row.slowest .atime { color: var(--bp-amber); font-weight: 600; }