/* AthleteOS daily signals: three immediate readings, one composed surface. */
.dashboard-console-rings.grid.metric-rings {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 0;
  min-height: 208px;
  margin: 0;
  padding: 1.2rem 1.5rem 1.05rem;
  overflow: hidden;
  border: 1px solid rgba(72, 95, 130, 0.34);
  border-radius: 20px;
  background: rgba(7, 13, 23, 0.54);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.dashboard-performance-console .dashboard-ring-card.ring-card,
.mobile-dashboard-shell .dashboard-ring-card.ring-card {
  --ring-color: #10b7ff;
  --ring-glow: rgba(16, 183, 255, 0.28);
  width: 100%;
  min-width: 0;
  min-height: 174px;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  align-content: center;
  gap: 0.72rem;
  padding: 0.25rem 1rem;
  border: 0;
  border-radius: 16px;
  appearance: none;
  background: transparent;
  box-shadow: none;
  color: #f7f9fd;
  font: inherit;
  text-align: center;
}

.dashboard-performance-console .dashboard-ring-card.ring-card.sleep,
.mobile-dashboard-shell .dashboard-ring-card.ring-card.sleep {
  --ring-color: #9fd8f5;
  --ring-glow: rgba(159, 216, 245, 0.3);
}

.dashboard-performance-console .dashboard-ring-card.ring-card.recovery,
.dashboard-performance-console .dashboard-ring-card.ring-card.success,
.mobile-dashboard-shell .dashboard-ring-card.ring-card.recovery,
.mobile-dashboard-shell .dashboard-ring-card.ring-card.success {
  --ring-color: #20ed58;
  --ring-glow: rgba(32, 237, 88, 0.28);
}

.dashboard-performance-console .dashboard-ring-card.ring-card.warning,
.mobile-dashboard-shell .dashboard-ring-card.ring-card.warning {
  --ring-color: #ffc83d;
  --ring-glow: rgba(255, 200, 61, 0.28);
}

.dashboard-performance-console .dashboard-ring-card.ring-card.danger,
.mobile-dashboard-shell .dashboard-ring-card.ring-card.danger {
  --ring-color: #ff4267;
  --ring-glow: rgba(255, 66, 103, 0.3);
}

.dashboard-performance-console .dashboard-ring-card.ring-card.strain,
.mobile-dashboard-shell .dashboard-ring-card.ring-card.strain {
  --ring-color: #06adf5;
  --ring-glow: rgba(6, 173, 245, 0.3);
}

.dashboard-performance-console .dashboard-ring-card.ring-card.neutral,
.mobile-dashboard-shell .dashboard-ring-card.ring-card.neutral {
  --ring-color: #a8bdd8;
  --ring-glow: rgba(168, 189, 216, 0.22);
}

.dashboard-ring-visual {
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
}

.dashboard-real-orb {
  position: relative;
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.dashboard-ring-track,
.dashboard-ring-progress {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  -webkit-mask: radial-gradient(circle, transparent 57.5%, #000 59% 68%, transparent 69.5%);
  mask: radial-gradient(circle, transparent 57.5%, #000 59% 68%, transparent 69.5%);
}

.dashboard-ring-track {
  background: #27323e;
}

.dashboard-ring-progress {
  background: conic-gradient(from 0deg, var(--ring-color) 0 var(--ring-stop), transparent var(--ring-stop) 100%);
  filter: drop-shadow(0 0 7px var(--ring-glow));
}

.dashboard-ring-core {
  position: relative;
  z-index: 1;
  width: 94px;
  height: 94px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: transparent;
  border: 0;
}

.dashboard-ring-core strong {
  color: #f7f9fd;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums lining-nums;
}

.dashboard-performance-console .dashboard-ring-card .ring-card-label,
.mobile-dashboard-shell .dashboard-ring-card .ring-card-label {
  min-height: auto;
  margin: 0;
  color: #f4f7fb;
  font-size: 0.71rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dashboard-ring-button {
  cursor: pointer;
  transition: background-color 150ms ease;
}

.dashboard-ring-button:hover {
  transform: none;
  background: rgba(255, 255, 255, 0.025);
  box-shadow: none;
}

.dashboard-ring-button:focus-visible {
  outline: 2px solid rgba(69, 217, 255, 0.78);
  outline-offset: -2px;
}

body[data-theme='light'] .dashboard-console-rings.grid.metric-rings {
  border-color: rgba(168, 184, 207, 0.56);
  background: rgba(255, 255, 255, 0.7);
}

body[data-theme='light'] .dashboard-ring-track {
  background: #dce5f1;
}

body[data-theme='light'] .dashboard-ring-core {
  background: transparent;
  border: 0;
}

body[data-theme='light'] .dashboard-ring-core strong {
  color: #172238;
}

body[data-theme='light'] .dashboard-ring-card .ring-card-label {
  color: #65758c;
}

body[data-theme='light'] .dashboard-ring-button:hover {
  background: rgba(36, 82, 142, 0.035);
}

@media (max-width: 900px) {
  .mobile-dashboard-shell .mobile-page-header {
    grid-template-columns: 1fr;
  }

  .mobile-dashboard-shell .dashboard-console-rings.grid.metric-rings {
    min-height: 142px;
    padding: 0.85rem 0.35rem 0.8rem;
    border-radius: 16px;
  }

  .mobile-dashboard-shell .dashboard-ring-card.ring-card {
    min-height: 120px;
    gap: 0.55rem;
    padding: 0.2rem 0.3rem;
    border-radius: 12px;
  }

  .mobile-dashboard-shell .dashboard-ring-visual,
  .mobile-dashboard-shell .dashboard-real-orb {
    width: clamp(82px, 25vw, 104px);
    height: clamp(82px, 25vw, 104px);
  }

  .mobile-dashboard-shell .dashboard-ring-track,
  .mobile-dashboard-shell .dashboard-ring-progress {
    -webkit-mask: radial-gradient(circle, transparent 56.5%, #000 58.5% 68.5%, transparent 70%);
    mask: radial-gradient(circle, transparent 56.5%, #000 58.5% 68.5%, transparent 70%);
  }

  .mobile-dashboard-shell .dashboard-ring-core {
    width: clamp(58px, 17.5vw, 74px);
    height: clamp(58px, 17.5vw, 74px);
  }

  .mobile-dashboard-shell .dashboard-ring-core strong {
    font-size: clamp(1.28rem, 5.8vw, 1.62rem);
  }

  .mobile-dashboard-shell .dashboard-ring-card .ring-card-label {
    font-size: 0.58rem;
    letter-spacing: 0.09em;
  }
}

@media (max-width: 360px) {
  .mobile-dashboard-shell .dashboard-console-rings.grid.metric-rings {
    padding-inline: 0.15rem;
  }

  .mobile-dashboard-shell .dashboard-ring-card.ring-card {
    padding-inline: 0.12rem;
  }
}