/* =========================================================================
   MotionLab — identity and the two widgets that exist nowhere else.
   Everything structural lives in /projekty/lab/kit/kit.css.

   Identity: rose accent, and a background that is a rotation rather than a
   grid — faint concentric arcs, because that is what this lab is about.
   ========================================================================= */

:root {
  --bp-cyan: #f06595;          /* the lab's accent — the kit's primary token */
  --bp-blue: #74c0fc;          /* dimensions and axes, so they read as "given" */
  --bp-mark: #ffb703;
  --note-accent: #f06595;

  --bp-bg: #12101a;
  --bp-bg2: #171422;
  --bp-panel: #1d1930;
  --bp-panel2: #272040;
  --bp-line: #362c52;
  --bp-line2: #4b3d70;
  --bp-ink: #efe9f5;
  --bp-ink-dim: #a396b8;

  --calc-col: 460px;
}

body {
  background-color: var(--bp-bg);
  background-image:
    repeating-radial-gradient(circle at 22% 12%,
      rgba(240, 101, 149, 0.055) 0 1px, transparent 1px 82px),
    linear-gradient(rgba(116, 192, 252, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(116, 192, 252, 0.028) 1px, transparent 1px);
  background-size: auto, 34px 34px, 34px 34px;
}

/* ------------------------------------------------------- the stage cards
   A motion is not a row of inputs, it is a thing with an order — so it gets
   a card with its position in the stack printed on it. */
.stage-card, .body-card {
  border: 1px solid var(--bp-line);
  border-left: 3px solid var(--bp-cyan);
  border-radius: var(--radius);
  background: var(--bp-bg2);
  padding: 0.65rem 0.75rem;
  margin-bottom: 0.6rem;
}
.body-card { border-left-color: var(--bp-mark); }
.stage-card.prismatic { border-left-color: var(--bp-blue); }

.stage-head {
  display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.55rem;
}
.stage-n {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 700;
  color: var(--bp-bg); background: var(--bp-cyan);
  border-radius: 5px; padding: 0.1rem 0.4rem; flex: none;
}
.stage-card.prismatic .stage-n { background: var(--bp-blue); }
.body-card .stage-n { background: var(--bp-mark); }
.stage-head input.stage-name {
  flex: 1; min-width: 60px; background: transparent; border: none;
  border-bottom: 1px dashed var(--bp-line2); color: var(--bp-ink);
  font: 600 0.86rem var(--sans); padding: 0.15rem 0.1rem;
}
.stage-head input.stage-name:focus { outline: none; border-bottom-color: var(--bp-cyan); }
.stage-head select { flex: none; width: auto; font-size: 0.78rem; padding: 0.2rem 0.35rem; }
.stage-tools { display: flex; gap: 0.15rem; flex: none; }

.axis-row { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.45rem; }
.axis-row > label {
  font-size: 0.72rem; color: var(--bp-ink-dim); flex: none; width: 3.1rem;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.axis-row input { width: 100%; }
.axis-quick { display: flex; gap: 0.15rem; flex: none; }
.axis-quick button {
  font-family: var(--mono); font-size: 0.7rem; cursor: pointer;
  background: var(--bp-panel); color: var(--bp-ink-dim);
  border: 1px solid var(--bp-line); border-radius: 5px; padding: 0.2rem 0.34rem;
}
.axis-quick button:hover { color: var(--bp-cyan); border-color: var(--bp-cyan); }

.rate-row .mini-field label b { color: var(--bp-cyan); font-weight: 600; }
.rate-note {
  font-family: var(--mono); font-size: 0.7rem; color: var(--bp-ink-dim);
  margin-top: 0.3rem;
}

.dim-row { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.dim-row .mini-field { flex: 1 1 4.5rem; }

.btn-ghost {
  font-family: var(--mono); font-size: 0.75rem; cursor: pointer; width: 100%;
  background: transparent; color: var(--bp-ink-dim);
  border: 1px dashed var(--bp-line2); border-radius: 7px; padding: 0.4rem;
  margin-top: 0.4rem; transition: 0.18s;
}
.btn-ghost:hover { color: var(--bp-cyan); border-color: var(--bp-cyan); }

/* ------------------------------------------------------- the mode switch
   Two ways into the same model, so the switch reads as a pair of equals
   rather than as a setting buried in a panel. */
.mode-panel { padding-bottom: 0.6rem; }
.mode-panel .seg-row { margin-bottom: 0.5rem; }
.mode-panel .seg-row button { flex: 1; padding: 0.45rem 0.5rem; font-size: 0.82rem; }
.mode-panel .hint-line { margin: 0; }

/* ------------------------------------------------------- the 3D view
   The drawing is draggable in the orbit view, so it has to say so with the
   cursor — there is no other affordance on a static-looking picture. */
#machineView.orbitable { cursor: grab; touch-action: none; }
#machineView.orbitable.dragging { cursor: grabbing; }
.view-hint { font-size: 0.7rem; color: var(--bp-ink-dim); opacity: 0.75; margin-left: 0.5rem; }
.view-reset {
  font-size: 0.8rem; line-height: 1; cursor: pointer; margin-left: 0.3rem;
  background: var(--bp-bg2); color: var(--bp-ink-dim);
  border: 1px solid var(--bp-line); border-radius: 5px; padding: 0.2rem 0.4rem;
}
.view-reset:hover { color: var(--bp-cyan); border-color: var(--bp-cyan); }

/* A unit picker sits in the same grid as the number it belongs to. */
.unit-field select {
  width: 100%; font-family: var(--mono); font-size: 0.78rem;
  background: var(--bp-bg2); color: var(--bp-ink);
  border: 1px solid var(--bp-line); border-radius: 6px; padding: 0.34rem 0.3rem;
}
.unit-field select:focus { outline: none; border-color: var(--bp-cyan); }

/* ---------------------------------------------------------- the animation
   Sits under the drawing rather than over it: it is a control, and the
   drawing is the thing being controlled. */
.anim-bar {
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
  border-top: 1px solid var(--bp-line); padding-top: 0.7rem; margin-top: 0.4rem;
}
.anim-play {
  font-family: var(--mono); font-size: 0.78rem; font-weight: 600; cursor: pointer;
  border: 1px solid var(--bp-cyan); border-radius: 7px; padding: 0.35rem 0.8rem; flex: none;
  color: var(--bp-cyan); background: transparent; transition: 0.18s;
}
.anim-play:hover { background: color-mix(in srgb, var(--bp-cyan) 14%, transparent); }
.anim-play.on { color: var(--bp-bg); background: var(--bp-cyan); }
.anim-only { font-size: 0.74rem; color: var(--bp-ink-dim); flex: none; }
.anim-seg { display: flex; gap: 0.15rem; flex-wrap: wrap; }
.anim-seg button {
  font-family: var(--mono); font-size: 0.72rem; cursor: pointer;
  background: var(--bp-bg2); color: var(--bp-ink-dim);
  border: 1px solid var(--bp-line); border-radius: 5px; padding: 0.2rem 0.45rem;
}
.anim-seg button:hover { color: var(--bp-ink); border-color: var(--bp-line2); }
.anim-seg button.active { color: var(--bp-bg); background: var(--bp-cyan); border-color: var(--bp-cyan); }
.anim-speed {
  display: flex; align-items: center; gap: 0.4rem; margin-left: auto; flex: none;
  font-size: 0.74rem; color: var(--bp-ink-dim);
}
.anim-speed input { width: 96px; accent-color: var(--bp-cyan); }

@media (max-width: 640px) { .anim-speed { margin-left: 0; } }

/* --------------------------------------------------------- the view picker
   Sits inside the panel title, so it must not push the heading around. */
.view-seg { margin-left: auto; display: flex; gap: 0.15rem; }
.view-seg button {
  font-family: var(--mono); font-size: 0.7rem; cursor: pointer;
  background: var(--bp-bg2); color: var(--bp-ink-dim);
  border: 1px solid var(--bp-line); border-radius: 5px; padding: 0.16rem 0.42rem;
}
.view-seg button.active { color: var(--bp-bg); background: var(--bp-cyan); border-color: var(--bp-cyan); }

/* ---------------------------------------------------- the breakdown table
   Each named term gets its own colour, and the same colour is used for the
   arrow in the drawing, so the table and the picture read as one thing. */
.term-dot {
  display: inline-block; width: 0.62rem; height: 0.62rem; border-radius: 2px;
  margin-right: 0.42rem; vertical-align: -1px;
}
.res-table td.term-name { white-space: nowrap; }
.res-table .share-bar {
  display: block; height: 4px; border-radius: 2px; margin-top: 0.25rem;
  background: var(--bp-line2);
}
.res-table .share-bar i { display: block; height: 100%; border-radius: 2px; }
.res-table tr.total-row td { border-top: 1px solid var(--bp-line2); font-weight: 600; }
.res-table td.vecs { font-family: var(--mono); font-size: 0.76rem; color: var(--bp-ink-dim); }

@media (max-width: 640px) {
  .axis-row > label { width: auto; }
  .axis-row { flex-wrap: wrap; }
}