/* =========================================================================
   DynaLab — page identity on top of kit.css.

   Accent is red, and it is the one hue nothing in the Mechanics track uses.
   It is also the colour this lab already gives the inertial term, which is
   the term the whole tool exists to expose — so the page and the plots agree
   without anyone having to remember a legend.
   ========================================================================= */
:root {
  --bp-cyan: #fa5252;          /* primary accent */
  --bp-blue: #ff8787;          /* secondary */
  --bp-mark: #fa5252;
  --note-accent: #fa5252;
  --calc-col: 360px;
  --page-max: 1420px;
}

/* The background grid is drawn square and wide, like a plot of something
   against time — the same idea as the sibling labs, different rhythm. */
body {
  background-image:
    linear-gradient(rgba(250, 82, 82, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250, 82, 82, 0.038) 1px, transparent 1px);
  background-size: 88px 88px, 44px 88px;
}

.hint { font-size: 0.76rem; color: var(--bp-ink-dim); line-height: 1.55; margin-top: 0.5rem; }
.hint b { color: var(--bp-cyan); }

/* A grid column is min-width:auto by default, so the widest thing inside it
   sets a floor the column refuses to go under. With five 920-wide plots and
   a matrix of fixed cells in this column, that floor came out at 936 px and
   pushed the whole page 85 px sideways at 1250 px wide. The column may
   shrink; the plots scale with it. */
.results-col { min-width: 0; }
.results-col svg { max-width: 100%; }

/* --------------------------- segmented control --------------------------- */
.seg-row {
  display: flex; gap: 0.25rem; margin-bottom: 0.7rem;
  border: 1px solid var(--bp-line); border-radius: 8px; padding: 0.2rem;
  background: var(--bp-bg);
}
.seg-row button {
  flex: 1; font-family: var(--mono); font-size: 0.76rem; font-weight: 600;
  color: var(--bp-ink-dim); background: transparent; border: 0;
  border-radius: 6px; padding: 0.35rem 0.5rem; cursor: pointer; transition: 0.16s;
}
.seg-row button:hover { color: var(--bp-ink); }
.seg-row button.active { color: var(--bp-bg); background: var(--bp-cyan); }

/* ------------------------------- link cards ------------------------------ */
/* One card per link. Ten numbers describe a rigid body and they do not fit
   on one line at any width worth having, so they are grouped by what they
   mean: where the joint is, where the mass is, what drives it. */
.link-card {
  border: 1px solid var(--bp-line); border-radius: 10px;
  padding: 0.55rem 0.6rem 0.6rem; margin-bottom: 0.5rem;
  background: var(--bp-bg);
}
.link-head {
  display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.45rem;
}
.link-head .lnum {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 700;
  color: var(--bp-bg); background: var(--bp-cyan);
  border-radius: 5px; padding: 0.1rem 0.36rem;
}
.link-head input.lname {
  flex: 1; min-width: 0; background: transparent; border: 0;
  color: var(--bp-ink); font-family: var(--mono); font-size: 0.8rem; font-weight: 600;
  padding: 0.1rem 0.2rem; border-bottom: 1px dashed transparent;
}
.link-head input.lname:focus { outline: none; border-bottom-color: var(--bp-line); }
.link-head select.ltype {
  font-family: var(--mono); font-size: 0.7rem; padding: 0.15rem 0.3rem;
  background: var(--bp-panel); color: var(--bp-ink-dim);
  border: 1px solid var(--bp-line); border-radius: 5px;
}
.link-head button.ldel {
  background: transparent; border: 1px solid var(--bp-line); border-radius: 5px;
  color: var(--bp-ink-dim); cursor: pointer; line-height: 1;
  padding: 0.16rem 0.36rem; font-size: 0.85rem;
}
.link-head button.ldel:hover { color: var(--bp-cyan); border-color: var(--bp-cyan); }

.grp-label {
  font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--bp-ink-dim);
  margin: 0.4rem 0 0.22rem;
}
.grp-label:first-of-type { margin-top: 0.1rem; }

.f4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.3rem; }
.f3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3rem; }
.f2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.3rem; }
.f4 .mini-field label, .f3 .mini-field label, .f2 .mini-field label { font-size: 0.62rem; }
.f4 .mini-field input, .f3 .mini-field input, .f2 .mini-field input { font-size: 0.74rem; }

.add-btns { display: flex; gap: 0.4rem; }
.btn-add {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  gap: 0.35rem; font-family: var(--mono); font-size: 0.74rem;
  background: var(--bp-bg); color: var(--bp-ink-dim);
  border: 1px dashed var(--bp-line); border-radius: 8px;
  padding: 0.4rem 0.5rem; cursor: pointer; transition: 0.16s;
}
.btn-add:hover { color: var(--bp-cyan); border-color: var(--bp-cyan); }
.btn-add .ico { font-size: 0.95rem; line-height: 1; }

/* ------------------------------- the scrub ------------------------------- */
/* The one control that ties every panel together: it picks the instant the
   arm view, the matrix and the readouts all refer to. */
.scrub-row {
  display: flex; align-items: center; gap: 0.6rem;
  margin: 0.15rem 0 0.5rem;
}
.scrub-row input[type="range"] { flex: 1; accent-color: var(--bp-cyan); }
.scrub-row .scrub-val {
  font-family: var(--mono); font-size: 0.78rem; color: var(--bp-cyan);
  min-width: 5.4rem; text-align: right;
}
.scrub-row button.play {
  background: var(--bp-bg); border: 1px solid var(--bp-line); border-radius: 6px;
  color: var(--bp-ink-dim); cursor: pointer; font-size: 0.72rem;
  font-family: var(--mono); padding: 0.24rem 0.5rem;
}
.scrub-row button.play:hover { color: var(--bp-cyan); border-color: var(--bp-cyan); }

/* ------------------------------ joint tabs ------------------------------- */
.joint-tabs { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-bottom: 0.55rem; }
.joint-tabs button {
  font-family: var(--mono); font-size: 0.73rem; padding: 0.24rem 0.6rem;
  background: var(--bp-bg); color: var(--bp-ink-dim);
  border: 1px solid var(--bp-line); border-radius: 999px; cursor: pointer;
}
.joint-tabs button.active { color: var(--bp-bg); background: var(--bp-cyan); border-color: var(--bp-cyan); }

/* ------------------------------ matrix grid ------------------------------ */
.mgrid { display: grid; gap: 3px; justify-content: start; margin: 0.2rem 0 0.4rem; }
.mgrid .mcell {
  width: 74px; height: 44px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 0.75rem; color: var(--bp-ink);
}
.mgrid .mcell.diag { outline: 1px solid rgba(250, 82, 82, 0.5); }
.m-legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.7rem; color: var(--bp-ink-dim); }
.m-legend i { font-style: normal; }

/* --------------------------- the term legend ----------------------------- */
.term-key { display: flex; gap: 0.9rem; flex-wrap: wrap; margin: 0.1rem 0 0.5rem; }
.term-key span {
  display: inline-flex; align-items: center; gap: 0.32rem;
  font-family: var(--mono); font-size: 0.72rem; color: var(--bp-ink-dim);
}
.term-key i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }

/* ------------------------------ result cards ----------------------------- */
.res-sub { font-size: 0.68rem; color: var(--bp-ink-dim); margin-top: 0.1rem; }

@media (max-width: 720px) {
  .f4 { grid-template-columns: repeat(2, 1fr); }
  .mgrid .mcell { width: 58px; height: 38px; font-size: 0.68rem; }
}