/* =========================================================================
   GearLab — visual identity: "green machinist's blueprint", involute grid
   (siblings: BeamLab blue, FrameLab teal, ShaftLab bronze, BoltLab indigo)

   Layout and components come from /projekty/lab/kit/kit.css, loaded first.
   ========================================================================= */
:root {
  --bp-bg: #0e1512;
  --bp-bg2: #121b17;
  --bp-panel: #16211c;
  --bp-panel2: #1e2c25;
  --bp-line: #2a3d33;
  --bp-line2: #3d5748;
  --bp-ink: #e2ece6;
  --bp-ink-dim: #92a89c;
  --bp-cyan: #7dd3a0;          /* primary accent: gear green */
  --bp-blue: #58c6f5;          /* dimensions / secondary */
  --bp-amber: #ffc55c;
  --bp-red: #ff6f8b;
  --bp-green: #5fe3a1;
  --bp-violet: #b197fc;
  --bp-pink: #f472b6;
  --bp-steel: #b8bec9;

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

/* Circles on a pitch grid — a gear drawing before the teeth go on. */
body {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%237dd3a0' stroke-opacity='0.055'%3E%3Ccircle cx='60' cy='60' r='42'/%3E%3Ccircle cx='60' cy='60' r='30' stroke-dasharray='3 4'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(rgba(125, 211, 160, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 211, 160, 0.03) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 120px 120px;
}

/* ---------------------------- GearLab only ---------------------------- */
#meshView { background: rgba(14, 21, 18, 0.5); border: 1px solid var(--bp-line); border-radius: 8px; }
#toothView { background: rgba(14, 21, 18, 0.5); border: 1px solid var(--bp-line); border-radius: 8px; }

/* the drive-type picker carries a second line under the label */
.seg-row.big button .jt-sub { display: block; font-size: 0.68rem; opacity: 0.72; }

/* a compact readout of the derived geometry */
.geo-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 0.4rem 0.8rem; font-family: var(--mono); font-size: 0.73rem;
  color: var(--bp-ink-dim); line-height: 1.6; margin-top: 0.6rem;
}
.geo-grid b { color: var(--bp-cyan); font-weight: 600; }

/* side-by-side comparison of the three robot gearbox types */
.cmp-table td.pick { color: var(--bp-green); font-weight: 600; }
.cmp-table tr.active td { background: color-mix(in srgb, var(--bp-cyan) 8%, transparent); }