/* =========================================================================
   KineLab — visual identity: "lime on graphite", joint-axis lattice
   (siblings: BeamLab cyan, FrameLab teal, ShaftLab bronze, GearLab green,
    BearingLab amber, BoltLab indigo, MotionLab pink, DriveLab gold,
    RotLab orchid)

   As in RotLab, the three axis colours are NOT theme colours — x red,
   y green, z blue is universal and every figure depends on it.
   ========================================================================= */
:root {
  --bp-bg: #101210;
  --bp-bg2: #161a15;
  --bp-panel: #1c211b;
  --bp-panel2: #262c24;
  --bp-line: #343d32;
  --bp-line2: #4a5646;
  --bp-ink: #e9eee7;
  --bp-ink-dim: #9ba79a;
  --bp-cyan: #a9e34b;          /* primary accent: lime */
  --bp-blue: #58c6f5;
  --bp-amber: #ffd43b;
  --bp-mark: #ffd43b;
  --bp-red: #ff6f8b;
  --bp-green: #7dd3a0;
  --bp-violet: #b197fc;
  --bp-pink: #f472b6;
  --bp-steel: #b8bec9;

  --ax-x: #ff6f8b;
  --ax-y: #7dd3a0;
  --ax-z: #58c6f5;

  --page-max: 1520px;
  --calc-col: 470px;
  --learn-col: 300px;
}

/* A lattice of joint axes and common perpendiculars. */
body {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='none' stroke='%23a9e34b' stroke-opacity='0.05'%3E%3Cline x1='40' y1='20' x2='40' y2='140'/%3E%3Cline x1='120' y1='20' x2='120' y2='140'/%3E%3Cline x1='40' y1='80' x2='120' y2='80'/%3E%3Ccircle cx='40' cy='80' r='5'/%3E%3Ccircle cx='120' cy='80' r='5'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(rgba(169, 227, 75, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(169, 227, 75, 0.022) 1px, transparent 1px);
  background-size: 160px 160px, 160px 160px, 160px 160px;
}

/* ------------------------------ KineLab only ---------------------------- */
#armView {
  background: rgba(16, 18, 16, 0.55);
  border: 1px solid var(--bp-line);
  border-radius: 8px;
  cursor: grab;
  touch-action: none;
}
#armView.dragging { cursor: grabbing; }

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

/* The DH table is the heart of the input — it gets a real table. */
.dh-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 0.73rem; }
.dh-table th {
  padding: 0.3rem 0.25rem; text-align: center; color: var(--bp-ink-dim);
  font-weight: 500; border-bottom: 1px solid var(--bp-line);
}
.dh-table td { padding: 0.15rem 0.12rem; }
.dh-table input, .dh-table select {
  width: 100%; padding: 0.28rem 0.25rem; font-size: 0.73rem;
  font-family: var(--mono); text-align: right;
  background: var(--bp-panel2); color: var(--bp-ink);
  border: 1px solid var(--bp-line); border-radius: 5px;
}
.dh-table select { text-align: left; }
.dh-table input:focus, .dh-table select:focus { outline: none; border-color: var(--bp-cyan); }
/* the joint variable is the one column the robot actually moves */
.dh-table td.var input { border-color: var(--bp-line2); color: var(--bp-cyan); font-weight: 600; }
.dh-table td.idx { color: var(--bp-ink-dim); text-align: center; width: 1.4rem; }
.dh-table .rowdel {
  background: none; border: none; color: var(--bp-ink-dim);
  cursor: pointer; padding: 0 0.2rem; font-size: 0.85rem;
}
.dh-table .rowdel:hover { color: var(--bp-red); }

/* Joint sliders, one per degree of freedom. */
.q-row { display: grid; grid-template-columns: 2.6rem 1fr 4.2rem; gap: 0.45rem; align-items: center; margin-bottom: 0.3rem; }
.q-row label { font-family: var(--mono); font-size: 0.73rem; color: var(--bp-ink-dim); }
.q-row input[type="range"] { width: 100%; }
.q-row .qval { font-family: var(--mono); font-size: 0.73rem; text-align: right; color: var(--bp-cyan); }
.q-row.limit .qval { color: var(--bp-red); }

/* Singular-value bars: the clearest way to show a singularity coming. */
.sv-bars { display: flex; flex-direction: column; gap: 0.22rem; margin-top: 0.5rem; }
.sv-row { display: grid; grid-template-columns: 2.2rem 1fr 3.6rem; gap: 0.4rem; align-items: center; }
.sv-track { height: 8px; background: var(--bp-bg); border: 1px solid var(--bp-line); border-radius: 4px; overflow: hidden; }
.sv-fill { height: 100%; background: var(--bp-cyan); border-radius: 3px; transition: width 0.2s; }
.sv-fill.low { background: var(--bp-red); }
.sv-row span { font-family: var(--mono); font-size: 0.7rem; color: var(--bp-ink-dim); }
.sv-row span:last-child { text-align: right; color: var(--bp-ink); }

.drag-hint { font-size: 0.72rem; color: var(--bp-ink-dim); text-align: right; margin-top: 0.35rem; opacity: 0.75; }

.pose-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3rem 0.7rem;
  font-family: var(--mono); font-size: 0.75rem;
  padding: 0.5rem 0.7rem; border: 1px solid var(--bp-line); border-radius: 7px;
  background: var(--bp-panel2); margin-top: 0.6rem;
}
.pose-grid b { color: var(--bp-cyan); font-weight: 600; }