/* #region zone:health.whoop.style — WHOOP ใช้โทเค็นโมโนและจัดใหม่ตามขนาดจอ */
#whoop {
  --whoop-card: var(--mono-card, var(--panel));
  --whoop-card-2: var(--mono-card-2, var(--panel2));
  --whoop-ink: var(--mono-ink, var(--text));
  --whoop-line: var(--mono-faint, var(--line));
  --whoop-green: var(--mono-green, #12a150);
  --whoop-amber: var(--mono-amber, #f0a800);
  --whoop-red: var(--mono-red, #e5341f);
  --whoop-blue: var(--mono-blue, #1f6bff);
  --whoop-violet: var(--mono-violet, #6e4bff);
  --whoop-cyan: var(--mono-cyan, #00a8c8);
  color: var(--whoop-ink);
}
.whoop-dashboard {
  display: grid;
  gap: 22px;
}
/* WHOOP already contains the policy link; other Health pages keep the shell footer. */
#whoop:not([hidden]) ~ footer {
  display: none;
}
.whoop-heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: var(--sp-5);
}
.whoop-heading h1 {
  --health-text-fluid: clamp(36px, 4.5vw, 64px);
  font-size: var(--health-text-fluid);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.04em;
  margin: 0;
}
.whoop-heading p {
  margin: 0 0 10px;
}
.whoop-heading > div:last-child {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.whoop-heading > div:last-child p {
  margin: 0;
  font-size: var(--u-text-sm);
}
.whoop-sync-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}
.whoop-sync {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.whoop-sync-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.whoop-sync:hover:not(:disabled) .whoop-sync-icon,
.whoop-reconnect:hover .whoop-sync-icon {
  background: var(--whoop-line);
}
html:root #whoop .whoop-reconnect {
  background: var(--whoop-card);
  color: var(--whoop-ink);
}
html:root #whoop .whoop-reconnect:hover {
  background: var(--whoop-card-2);
  opacity: 1;
}
.whoop-card {
  background: var(--whoop-card);
  border: 0;
  border-radius: var(--u-radius-dialog);
  padding: var(--sp-6);
  min-width: 0;
}
.whoop-card h2 {
  font-size: var(--u-text-xl);
  font-weight: 600;
  margin: 0 0 var(--sp-3);
  letter-spacing: -0.02em;
}
.whoop-rings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.whoop-ring-card {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5);
}
.whoop-ring-card h2 {
  font-size: 19px;
}
.whoop-ring-wrap {
  position: relative;
  width: clamp(90px, 9vw, 136px);
  flex-shrink: 0;
  aspect-ratio: 1;
}
.whoop-ring {
  width: 100%;
  height: 100%;
}
.whoop-ring-wrap > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  --health-text-fluid: clamp(22px, 2.4vw, 34px);
  font-size: var(--health-text-fluid);
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
.whoop-track,
.whoop-progress {
  fill: none;
  stroke-width: 7;
}
.whoop-track {
  stroke: var(--whoop-card-2);
}
.whoop-progress {
  stroke-linecap: round;
}
.whoop-progress.high {
  stroke: var(--whoop-green);
}
.whoop-progress.medium {
  stroke: var(--whoop-amber);
}
.whoop-progress.low {
  stroke: var(--whoop-red);
}
.whoop-progress.sleep {
  stroke: var(--whoop-violet);
}
.whoop-progress.strain {
  stroke: var(--whoop-blue);
}
.whoop-tag {
  display: inline-block;
  padding: 3px var(--sp-3);
  border-radius: 99px;
  font-size: var(--u-text-sm);
  color: #000;
}
.whoop-tag.high {
  background: var(--whoop-green);
}
.whoop-tag.medium {
  background: var(--whoop-amber);
}
.whoop-tag.low {
  background: var(--whoop-red);
}
.whoop-tag.missing {
  color: var(--muted);
  padding: 0;
}
.whoop-insight {
  border: 1px solid var(--whoop-line);
  border-radius: var(--u-radius-card);
  padding: var(--sp-5) var(--sp-6);
  margin: 0;
}
.whoop-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.whoop-value {
  font-size: 42px;
  letter-spacing: -0.05em;
  margin: var(--sp-2) 0;
  font-variant-numeric: tabular-nums;
}
.whoop-value small {
  font-size: var(--u-text-sm);
  color: var(--muted);
  letter-spacing: 0;
}
.whoop-connect {
  max-width: 460px;
  margin: var(--sp-4) auto;
  display: grid;
  gap: 18px;
}
.whoop-connect h1 {
  font-size: 36px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.03em;
  margin: 0;
}
.whoop-connect > p {
  margin: 0;
}
.whoop-brands {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 6px;
}
.whoop-brands span {
  height: 64px;
  min-width: 64px;
  padding: 0 var(--sp-2);
  border: 1px solid var(--whoop-line);
  border-radius: 20px;
  display: grid;
  place-content: center;
  font-weight: 700;
}
.whoop-brands span:first-child {
  background: var(--whoop-ink);
  color: var(--bg);
  font-size: var(--u-text-2xl);
}
.whoop-connect-list {
  padding: var(--sp-1) var(--sp-5);
}
.whoop-connect-list p {
  padding: 14px 0;
  margin: 0;
  border-bottom: 1px solid var(--whoop-line);
}
.whoop-connect-list p:last-child {
  border-bottom: 0;
}
.whoop-connect .btn-link,
.whoop-later {
  text-align: center;
  padding: var(--sp-4);
  text-decoration: none;
  border-radius: 99px;
}
.whoop-later {
  border: 1px solid var(--whoop-line);
}
.whoop-connect > a:last-child {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  text-align: center;
  font-size: var(--u-text-sm);
}
/* the inline privacy link keeps a 44px touch area without changing the line height */
#whoop .whoop-note a {
  display: inline-block;
  padding-block: 13px;
  margin-block: -13px;
}
.whoop-disconnect {
  display: grid;
  gap: var(--sp-5);
}
.whoop-delete-label {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.whoop-delete-label input {
  width: 22px;
  min-height: 22px;
  height: 22px;
  flex-shrink: 0;
}
.whoop-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: var(--sp-3);
}
.health-policy-link {
  display: block;
  color: var(--muted);
  font-size: var(--u-text-xs);
  padding: 28px 0;
}
.whoop-phone-rings {
  display: none;
}
@media (max-width: 1100px) {
  .whoop-ring-card {
    flex-direction: column;
    text-align: center;
  }
  .whoop-ring-wrap {
    width: 120px;
  }
}
@media (max-width: 699px) {
  .whoop-heading h1 {
    font-size: 38px;
  }
  .whoop-card {
    padding: 18px;
    border-radius: 22px;
  }
  .whoop-rings {
    display: none;
  }
  .whoop-phone-rings {
    display: grid;
    justify-items: center;
    gap: var(--sp-3);
  }
  .whoop-phone-ring-wrap {
    position: relative;
    width: 220px;
  }
  .whoop-phone-ring-wrap svg {
    width: 220px;
    height: 220px;
  }
  .whoop-phone-ring-wrap > strong {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    font-size: 32px;
    font-weight: 500;
  }
  .whoop-phone-ring-labels {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    text-align: center;
    width: 100%;
  }
  .whoop-phone-ring-labels span {
    display: block;
    font-size: var(--u-text-xs);
    color: var(--muted);
  }
  .whoop-phone-ring-labels strong {
    font-size: 22px;
    font-weight: 500;
  }
  .whoop-insight {
    padding: var(--sp-4);
    font-size: 14px;
  }
}
/* #endregion */