/* =========================================================================
   DriveLab — visual identity: "electric gold on graphite", coil windings
   (siblings: BeamLab blue, FrameLab teal, ShaftLab bronze, GearLab green,
    BearingLab amber, BoltLab indigo, MotionLab pink)

   Layout and components come from /projekty/lab/kit/kit.css, loaded first.
   ========================================================================= */
:root {
  --bp-bg: #101113;
  --bp-bg2: #16181b;
  --bp-panel: #1c1f23;
  --bp-panel2: #262a2f;
  --bp-line: #343941;
  --bp-line2: #4a515b;
  --bp-ink: #e8eaee;
  --bp-ink-dim: #9aa2ad;
  --bp-cyan: #fcc419;          /* primary accent: electric gold */
  --bp-blue: #58c6f5;          /* dimensions / secondary */
  --bp-amber: #ffd43b;
  --bp-mark: #ffd43b;
  --bp-red: #ff6f8b;
  --bp-green: #7dd3a0;
  --bp-violet: #b197fc;
  --bp-pink: #f472b6;
  --bp-steel: #b8bec9;

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

/* Coil windings seen end-on, over the usual grid. */
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='%23fcc419' stroke-opacity='0.05'%3E%3Cpath d='M20 40 q15 -18 30 0 q15 18 30 0 q15 -18 30 0'/%3E%3Cpath d='M20 110 q15 -18 30 0 q15 18 30 0 q15 -18 30 0'/%3E%3Ccircle cx='75' cy='75' r='9'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(rgba(252, 196, 25, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(252, 196, 25, 0.026) 1px, transparent 1px);
  background-size: 150px 150px, 150px 150px, 150px 150px;
}

/* ------------------------------ DriveLab only ---------------------------- */
#driveView, #curveView {
  background: rgba(16, 17, 19, 0.55);
  border: 1px solid var(--bp-line);
  border-radius: 8px;
}

/* The motor-type picker carries a subtitle per option. */
.seg-row.big button .jt-sub { display: block; font-size: 0.68rem; opacity: 0.72; }

/* Only the fields that belong to the chosen motor type are shown. */
.motor-only { display: none; }
.motor-only.on { display: block; }

/* The three k_t conventions side by side — the 8.27/9.55 trap made visible. */
.kt-table {
  width: 100%; border-collapse: collapse; margin-top: 0.5rem;
  font-family: var(--mono); font-size: 0.76rem;
}
.kt-table td { padding: 0.28rem 0.4rem; border-top: 1px solid var(--bp-line); }
.kt-table td:last-child { text-align: right; color: var(--bp-cyan); }
.kt-table tr.active td { background: rgba(252, 196, 25, 0.09); font-weight: 600; }
.kt-table tr.active td:first-child::before { content: '▸ '; color: var(--bp-cyan); }

/* A compact readout strip under the schematic. */
.op-strip {
  display: flex; flex-wrap: wrap; gap: 0.9rem;
  padding: 0.55rem 0.8rem; margin-top: 0.55rem;
  border: 1px solid var(--bp-line); border-radius: 8px;
  background: var(--bp-panel2); font-family: var(--mono); font-size: 0.76rem;
}
.op-strip b { color: var(--bp-cyan); font-weight: 600; }
.op-strip span { color: var(--bp-ink-dim); }

/* The optimal-ratio nudge sits inline with the ratio field. */
.opt-hint {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  margin-top: 0.45rem; padding: 0.4rem 0.6rem;
  border: 1px dashed var(--bp-line2); border-radius: 7px;
  font-size: 0.74rem; color: var(--bp-ink-dim);
}
.opt-hint button {
  flex: none; padding: 0.24rem 0.6rem; font-size: 0.72rem;
  border: 1px solid var(--bp-cyan); border-radius: 5px;
  background: rgba(252, 196, 25, 0.1); color: var(--bp-cyan); cursor: pointer;
}
.opt-hint button:hover { background: rgba(252, 196, 25, 0.2); }