/*
  Flywheel CSS Module
  Extracted from canonical flywheel.html (Runwell x Client)
  All values preserved exactly from source.
*/

/* Canvas + orbit */
.canvas {
  position: relative;
  margin: 0 auto 20px;
}

.edges {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}

.edgeOrbit {
  fill: none;
  stroke: var(--rw-ember);
  stroke-width: 1.6;
  stroke-dasharray: 6 9;
  opacity: 0.42;
}

/* Cards (shared) */
.card {
  position: absolute;
}

/* Tenant card (client brand) */
.cardTenant {
  border-radius: var(--r-xl);
  background: linear-gradient(160deg, var(--tenant-primary) 0%, var(--tenant-primary-hover) 100%);
  border: 2px solid var(--tenant-accent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 22px 18px;
  box-shadow:
    0 18px 48px rgba(46, 138, 96, 0.28),
    0 0 0 6px rgba(205, 175, 88, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  z-index: 4;
  overflow: hidden;
}

.cardTenant::before {
  content: '';
  position: absolute;
  top: -45%;
  right: -30%;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(205, 175, 88, 0.22) 0%, transparent 60%);
  pointer-events: none;
}

.tenantEyebrow {
  font-family: var(--font-tenant);
  font-size: var(--t-tenant-eyebrow);
  font-weight: 700;
  color: var(--tenant-accent);
  letter-spacing: 1.8px;
  text-transform: uppercase;
  margin-bottom: 10px;
  position: relative;
}

.tenantLogo {
  width: 50px;
  height: 50px;
  margin-bottom: 12px;
  position: relative;
}

.tenantLogo svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 10px rgba(205, 175, 88, 0.40));
}

.tenantName {
  font-family: var(--font-tenant);
  font-size: var(--t-tenant-name);
  font-weight: 700;
  color: var(--tenant-contrast);
  letter-spacing: -0.5px;
  line-height: 1;
  margin-bottom: 8px;
  position: relative;
}

.tenantTagline {
  font-family: var(--font-tenant);
  font-size: var(--t-tenant-tagline);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.86);
  letter-spacing: 0.1px;
  position: relative;
  line-height: 1.3;
}

.gold {
  color: var(--tenant-accent);
  font-weight: 700;
}

/* Engine cards (Runwell services) */
.cardEngine {
  font-family: var(--font-runwell);
  border-radius: var(--r-lg);
  background: var(--rw-paper-card);
  border: 1px solid var(--rw-border);
  padding: var(--card-pt) var(--card-pr) var(--card-pb) var(--card-pl);
  box-shadow:
    0 18px 44px rgba(26, 22, 20, 0.09),
    0 2px 6px rgba(26, 22, 20, 0.03);
  display: flex;
  flex-direction: column;
  z-index: 3;
}

.cardEngine::before {
  content: '';
  position: absolute;
  left: 0;
  top: 22px;
  bottom: 22px;
  width: 4px;
  background: var(--rw-ember);
  border-radius: 0 2px 2px 0;
}

.engineHead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 4px;
}

.engineCorner {
  font-family: var(--font-runwell);
  font-size: var(--t-engine-corner);
  font-weight: 800;
  color: var(--rw-muted);
  text-transform: uppercase;
  letter-spacing: 2.4px;
  margin-bottom: 4px;
}

.engineNum {
  font-family: var(--font-runwell);
  font-size: var(--t-engine-num);
  font-weight: 900;
  color: var(--rw-ember);
  letter-spacing: -1.6px;
  line-height: 0.9;
  margin-bottom: 6px;
}

.engineTitle {
  font-family: var(--font-runwell);
  font-size: var(--t-engine-title);
  font-weight: 800;
  color: var(--rw-ink);
  letter-spacing: -0.5px;
  line-height: 1.18;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--rw-border);
}

.engineBullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.engineBullets li {
  font-family: var(--font-runwell);
  position: relative;
  padding-left: 16px;
  font-size: var(--t-engine-bullet);
  font-weight: 400;
  line-height: 1.42;
  color: var(--rw-ink-2);
}

.engineBullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--rw-ember);
}

/* Bubble (orbit-mounted feeding-relationship circles) */
.bubble {
  font-family: var(--font-runwell);
  position: absolute;
  border-radius: 50%;
  background: var(--rw-paper-warm);
  border: 1.5px solid var(--rw-ember-edge);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--bubble-py) var(--bubble-px);
  box-shadow:
    0 14px 30px rgba(232, 66, 14, 0.13),
    0 2px 6px rgba(26, 22, 20, 0.04);
  z-index: 3;
}

.bubbleArrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  line-height: 1;
  white-space: nowrap;
}

.bubbleFrom,
.bubbleTo {
  font-family: var(--font-runwell);
  font-size: var(--t-bubble-label);
  font-weight: 800;
  color: var(--rw-ember);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  white-space: nowrap;
}

.bubbleGlyph {
  font-family: var(--font-runwell);
  font-size: var(--t-bubble-glyph);
  font-weight: 800;
  color: var(--rw-ember);
  line-height: 1;
}

.bubbleText {
  font-family: var(--font-runwell);
  font-size: var(--t-bubble-text);
  font-weight: 400;
  line-height: 1.42;
  color: var(--rw-ink-2);
  max-width: var(--bubble-text-max);
}

/* Footer caption */
.footCaption {
  font-family: var(--font-runwell);
  text-align: center;
  max-width: 920px;
  margin: 0 auto 12px;
  font-size: var(--t-foot-caption);
  line-height: 1.6;
  color: var(--rw-ink-2);
}

.lead {
  font-weight: 700;
  color: var(--rw-ink);
}

.ember {
  color: var(--rw-ember);
  font-weight: 600;
}

.foot {
  font-family: var(--font-runwell);
  text-align: center;
  font-size: var(--t-foot-mark);
  font-weight: 800;
  color: var(--rw-muted);
  letter-spacing: 2.6px;
  text-transform: uppercase;
}

.foot .ember {
  color: var(--rw-ember);
}

/* Scale wrapper for the visual flywheel diagram */
.scaleWrap {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
}

@media (max-width: 1200px) {
  .scaleWrap {
    zoom: 0.85;
  }
}

/* Below 900px: hide the visual diagram entirely.
   The flywheel is too complex to shrink further.
   A mobile card layout replaces it (rendered by the component). */
@media (max-width: 900px) {
  .scaleWrap {
    display: none;
  }
  .footCaption {
    font-size: 14px;
    max-width: 100%;
  }
  .foot {
    font-size: 9px;
    letter-spacing: 2px;
  }
}

/* Mobile card layout: vertical stack of engine cards */
.mobileEngines {
  display: none;
}

@media (max-width: 900px) {
  .mobileEngines {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
  }
  .mobileEngine {
    background: var(--rw-paper-card);
    border: 1px solid var(--rw-border);
    border-left: 4px solid var(--rw-ember);
    border-radius: var(--r-lg);
    padding: 20px;
  }
  .mobileEngineNum {
    font-size: 28px;
    font-weight: 900;
    color: var(--rw-ember);
    letter-spacing: -1px;
    line-height: 1;
    margin-bottom: 4px;
  }
  .mobileEngineTitle {
    font-size: 18px;
    font-weight: 800;
    color: var(--rw-ink);
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--rw-border);
  }
  .mobileEngineBullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .mobileEngineBullets li {
    position: relative;
    padding-left: 14px;
    font-size: 14px;
    color: var(--rw-ink-2);
    line-height: 1.5;
  }
  .mobileEngineBullets li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--rw-ember);
  }
  .mobileTenant {
    text-align: center;
    padding: 20px;
    background: linear-gradient(160deg, var(--tenant-primary) 0%, var(--tenant-primary-hover) 100%);
    border: 2px solid var(--tenant-accent);
    border-radius: var(--r-xl);
    color: var(--tenant-contrast);
    margin-bottom: 16px;
  }
  .mobileTenantName {
    font-family: var(--font-tenant);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
  }
  .mobileTenantTagline {
    font-family: var(--font-tenant);
    font-size: 14px;
    opacity: 0.86;
  }
}