/* #region zone:health.whoop.sleep-style — ส่วนการนอน โดนัท เจ็ดคืน และกราฟฟื้นตัวมีเลนโซน */
#whoop {
  --stage-awake: var(--whoop-line);
  --stage-light: color-mix(in srgb, var(--whoop-violet) 45%, var(--whoop-card));
  --stage-deep: var(--whoop-violet);
  --stage-rem: var(--whoop-cyan);
}
.whoop-sleep {
  display: grid;
  gap: var(--sp-6);
}
.whoop-sleep-head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.whoop-sleep-head h2,
.whoop-sleep-head p {
  margin: 0;
}
.whoop-sleep-head .whoop-tag {
  margin-left: auto;
}
.whoop-night {
  width: 64px;
  height: 48px;
  flex-shrink: 0;
}
.whoop-moon {
  fill: var(--whoop-violet);
}
.whoop-star {
  fill: var(--whoop-amber);
  transform-box: fill-box;
  transform-origin: center;
  animation: whoop-twinkle 3.6s ease-in-out infinite;
  animation-delay: calc(var(--star-i, 0) * 0.9s);
}
@keyframes whoop-twinkle {
  50% {
    opacity: 0.35;
    transform: scale(0.7);
  }
}
.whoop-sleep-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) 168px;
  align-items: center;
  gap: var(--sp-6) var(--sp-8);
}
.whoop-sleep-score {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}
.whoop-sleep-score > div:last-child {
  display: grid;
  gap: 6px;
  min-width: 0;
  flex: 1;
}
.whoop-sleep-score p {
  margin: 0;
}
.whoop-need-text {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.whoop-need-track {
  height: 12px;
  border-radius: 99px;
  background: var(--whoop-card-2);
  overflow: hidden;
}
.whoop-need-fill {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--whoop-violet);
  transform-origin: left;
}
.whoop-enter .whoop-need-fill,
.whoop-enter .whoop-stage {
  animation: whoop-grow-x 800ms var(--whoop-ease) 300ms both;
  transform-origin: left;
}
.whoop-sleep-stages {
  display: grid;
  gap: var(--sp-4);
  min-width: 0;
}
.whoop-stages {
  display: flex;
  height: 48px;
  gap: var(--sp-1);
}
.whoop-stage {
  display: grid;
  place-content: center;
  flex-basis: 0;
  min-width: 6px;
  border-radius: 14px;
  font-size: var(--u-text-sm);
  font-weight: 600;
  color: var(--whoop-ink);
}
.whoop-stage.awake {
  background: var(--stage-awake);
}
.whoop-stage.light {
  background: var(--stage-light);
}
.whoop-stage.deep {
  background: var(--stage-deep);
  color: #fff;
}
.whoop-stage.rem {
  background: var(--stage-rem);
  color: #000;
}
.whoop-legend-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2) var(--sp-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.whoop-legend-list li {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--sp-2);
  font-size: 14px;
}
.whoop-legend-list strong {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.whoop-legend-list small {
  min-width: 36px;
  text-align: right;
}
.whoop-swatch {
  width: 12px;
  height: 12px;
  border-radius: 4px;
}
.whoop-swatch.awake {
  background: var(--stage-awake);
}
.whoop-swatch.light {
  background: var(--stage-light);
}
.whoop-swatch.deep {
  background: var(--stage-deep);
}
.whoop-swatch.rem {
  background: var(--stage-rem);
}
.whoop-donut-wrap {
  position: relative;
  width: 168px;
  aspect-ratio: 1;
  justify-self: center;
}
.whoop-donut {
  width: 100%;
  height: 100%;
}
.whoop-donut .whoop-track,
.whoop-arc {
  fill: none;
  stroke-width: 14;
}
.whoop-arc.awake {
  stroke: var(--stage-awake);
}
.whoop-arc.light {
  stroke: var(--stage-light);
}
.whoop-arc.deep {
  stroke: var(--stage-deep);
}
.whoop-arc.rem {
  stroke: var(--stage-rem);
}
.whoop-donut-wrap > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}
.whoop-donut-wrap strong {
  font-size: var(--u-text-2xl);
  font-weight: 500;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.whoop-nights {
  display: grid;
  gap: var(--sp-3);
  border-top: 1px solid var(--whoop-line);
  padding-top: 18px;
}
.whoop-nights h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}
.whoop-nights > div {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--sp-2);
}
.whoop-night-col {
  display: grid;
  grid-template-rows: auto 72px auto;
  justify-items: center;
  gap: 6px;
}
.whoop-night-col small {
  font-size: var(--u-text-xs);
  font-variant-numeric: tabular-nums;
}
.whoop-night-track {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 72px;
  max-width: 44px;
  border-radius: 12px;
  background: var(--whoop-card-2);
  overflow: visible;
}
.whoop-night-need {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  border-top: 2px dashed var(--whoop-ink);
  transform: translateY(1px);
}
.whoop-night-fill {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  border-radius: 12px;
  background: var(--stage-deep);
}
.whoop-sleep > .whoop-note {
  margin: 0;
}
/* recovery */
.whoop-recovery {
  display: grid;
  gap: var(--sp-2);
}
.whoop-recovery-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-4);
}
.whoop-recovery-head h2,
.whoop-recovery-head p {
  margin: 0;
}
.whoop-seg {
  display: inline-flex;
  gap: var(--sp-2);
  padding: 6px;
  border-radius: 99px;
  background: var(--whoop-card-2);
}
#whoop .whoop-seg .whoop-seg-btn {
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--sp-4);
  border: 0;
  border-radius: 99px;
  background: transparent;
  box-shadow: none;
  color: var(--whoop-ink);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
#whoop .whoop-seg .whoop-seg-btn[aria-pressed='true'] {
  background: var(--whoop-ink);
  color: var(--bg);
}
.whoop-plot {
  position: relative;
  height: 220px;
  margin: 44px 0 30px;
}
.whoop-lane {
  position: absolute;
  left: 0;
  right: 0;
  border-radius: 14px;
}
.whoop-lane span {
  position: absolute;
  top: 6px;
  right: 10px;
  font-size: 11px;
  color: var(--muted);
}
.whoop-lane.high {
  bottom: 67%;
  height: 33%;
  background: color-mix(in srgb, var(--whoop-green) 9%, transparent);
}
.whoop-lane.medium {
  bottom: 34%;
  height: 33%;
  background: color-mix(in srgb, var(--whoop-amber) 9%, transparent);
}
.whoop-lane.low {
  bottom: 0;
  height: 34%;
  background: color-mix(in srgb, var(--whoop-red) 9%, transparent);
}
.whoop-bars {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--count, 14), minmax(0, 1fr));
  gap: 0 clamp(2px, 0.7vw, 10px);
  padding: 0 clamp(52px, 8vw, 100px) 0 clamp(2px, 1vw, var(--sp-3));
}
.whoop-bar {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  border-radius: 8px;
  outline: none;
}
.whoop-bar-fill {
  display: block;
  width: min(100%, 30px);
  border-radius: 9px 9px 4px 4px;
  opacity: 0.8;
  transition:
    opacity 160ms,
    filter 160ms;
}
.whoop-bar.high .whoop-bar-fill {
  background: var(--whoop-green);
}
.whoop-bar.medium .whoop-bar-fill {
  background: var(--whoop-amber);
}
.whoop-bar.low .whoop-bar-fill {
  background: var(--whoop-red);
}
.whoop-bar.missing .whoop-bar-fill {
  height: auto !important;
  min-height: 86px;
  padding: 6px 0;
  border: 1px dashed var(--muted);
  background: var(--whoop-card-2);
  color: var(--whoop-ink);
  writing-mode: vertical-rl;
  text-align: center;
  font-size: var(--u-text-xs);
  line-height: 1;
  border-radius: 9px 9px 4px 4px;
}
.whoop-bar:hover .whoop-bar-fill,
.whoop-bar:focus-visible .whoop-bar-fill,
.whoop-bar.today .whoop-bar-fill {
  opacity: 1;
}
.whoop-bar.today .whoop-bar-fill {
  box-shadow:
    0 0 0 2px var(--whoop-card),
    0 0 0 4px var(--whoop-ink);
}
.whoop-bar:focus-visible .whoop-bar-fill {
  box-shadow: 0 0 0 2px var(--mono-focus, var(--whoop-blue));
}
.whoop-bar-value {
  margin-bottom: var(--sp-2);
  font-size: var(--u-text-xs);
  font-weight: 600;
  line-height: 1;
}
.whoop-bar-label {
  position: absolute;
  bottom: -22px;
  font-size: var(--u-text-xs);
  color: var(--muted);
}
.whoop-bar-tip {
  top: -38px;
  left: 0;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  transform: none;
}
.whoop-bar-tip[hidden] {
  display: none;
}
.whoop-grow .whoop-bar-fill {
  transform-origin: bottom;
  animation: whoop-grow-y 650ms var(--whoop-ease) both;
  animation-delay: calc(var(--bar-i, 0) * 24ms);
}
.whoop-recovery summary {
  cursor: pointer;
  min-height: 44px;
}
@media (max-width: 1100px) {
  .whoop-sleep-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .whoop-donut-wrap {
    grid-column: 1 / -1;
  }
}
@media (max-width: 699px) {
  .whoop-sleep-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .whoop-legend-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .whoop-plot {
    height: 190px;
  }
  .whoop-bars {
    padding-right: 64px;
  }
}
/* #endregion */