/* =========================================================================
   BearingLab — visual identity: "amber on graphite", raceway rings
   (siblings: BeamLab blue, FrameLab teal, ShaftLab bronze,
    GearLab green, BoltLab indigo)

   Layout and components come from /projekty/lab/kit/kit.css, loaded first.
   ========================================================================= */
:root {
  --bp-bg: #131211;
  --bp-bg2: #1a1817;
  --bp-panel: #201d1b;
  --bp-panel2: #2b2724;
  --bp-line: #3a3531;
  --bp-line2: #524a44;
  --bp-ink: #ede8e2;
  --bp-ink-dim: #a89e94;
  --bp-cyan: #ffa94d;          /* primary accent: bearing amber */
  --bp-blue: #58c6f5;          /* dimensions / secondary */
  --bp-amber: #ffd43b;
  --bp-red: #ff6f8b;
  --bp-green: #6ee7a5;
  --bp-violet: #b197fc;
  --bp-pink: #f472b6;
  --bp-steel: #b8bec9;

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

/* Concentric raceways — a bearing seen end-on. */
body {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='none' stroke='%23ffa94d' stroke-opacity='0.05'%3E%3Ccircle cx='70' cy='70' r='52'/%3E%3Ccircle cx='70' cy='70' r='34'/%3E%3Ccircle cx='70' cy='70' r='43' stroke-dasharray='2 7'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(rgba(255, 169, 77, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 169, 77, 0.028) 1px, transparent 1px);
  background-size: 140px 140px, 140px 140px, 140px 140px;
}

/* ---------------------------- BearingLab only ---------------------------- */
#bearingView { background: rgba(19, 18, 17, 0.5); border: 1px solid var(--bp-line); border-radius: 8px; }
.seg-row.big button .jt-sub { display: block; font-size: 0.68rem; opacity: 0.72; }

.duty-row { display: grid; grid-template-columns: 1fr 1fr 1fr 30px; gap: 0.45rem; margin-bottom: 0.45rem; }
.life-bar { height: 9px; background: var(--bp-bg); border-radius: 5px; margin-top: 0.5rem; overflow: hidden; border: 1px solid var(--bp-line); }
.life-fill { height: 100%; border-radius: 4px; background: var(--bp-green); transition: width 0.3s; }
.life-fill.bad { background: var(--bp-red); }
.life-fill.warn { background: var(--bp-amber); }