/* Projection Curve V7 — Product Design + ThoughtfulBits/SPARK clarity pass.
   Scope: curve tab only. Make the selected-day metrics instantly scannable,
   properly center the plan score, and turn the CTL/ATL/Foster note into
   readable supporting information instead of disabled-looking text. */

/* --- Plan score: visual centre must match the centre of the ring. --- */
.pp-page .pp-main-chart .pp-verdict-gauge {
  position: relative !important;
  display: block !important;
  flex: 0 0 auto !important;
}

.pp-page .pp-main-chart .pp-verdict-gauge strong,
.pp-page .pp-main-chart .pp-verdict-gauge span {
  position: absolute !important;
  left: 50% !important;
  margin: 0 !important;
  width: max-content !important;
  text-align: center !important;
}

.pp-page .pp-main-chart .pp-verdict-gauge strong {
  top: 50% !important;
  transform: translate(-50%, -68%) !important;
  font-size: 20px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: -.045em !important;
}

.pp-page .pp-main-chart .pp-verdict-gauge span {
  top: 50% !important;
  transform: translate(-50%, 55%) !important;
  color: rgba(255,255,255,.58) !important;
  font-size: 7.5px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

/* --- Selected day: the four numbers are primary information, not captions. --- */
.pp-page .pp-main-chart .pp-day-detail {
  padding: 13px 14px 14px !important;
  background:
    radial-gradient(260px 100px at 100% 0%, rgba(103,184,255,.045), transparent 74%),
    rgba(3,14,38,.68) !important;
}

.pp-page .pp-main-chart .pp-day-detail > strong,
.pp-page .pp-main-chart .pp-day-detail > b {
  display: block !important;
  margin-bottom: 10px !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  letter-spacing: -.025em !important;
}

.pp-page .pp-main-chart .pp-day-detail-values {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 8px !important;
  margin: 0 !important;
}

.pp-page .pp-main-chart .pp-day-detail-values > span {
  position: relative !important;
  min-width: 0 !important;
  min-height: 64px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 9px 11px 10px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 12px !important;
  color: rgba(255,255,255,.58) !important;
  background: rgba(255,255,255,.026) !important;
  box-shadow: inset 3px 0 0 rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.025) !important;
  font-size: 9px !important;
  font-weight: 850 !important;
  letter-spacing: .045em !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
}

.pp-page .pp-main-chart .pp-day-detail-values > span b {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  color: #fff !important;
  font-size: clamp(23px, 6vw, 28px) !important;
  font-weight: 950 !important;
  letter-spacing: -.055em !important;
  line-height: .95 !important;
  text-transform: none !important;
  white-space: nowrap !important;
}

/* 1 Charge · 2 Forme · 3 Fatigue · 4 Fraîcheur — same semantic colours as chart. */
.pp-page .pp-main-chart .pp-day-detail-values > span:nth-child(1) {
  border-color: rgba(255,159,69,.24) !important;
  background: linear-gradient(145deg, rgba(255,159,69,.085), rgba(255,255,255,.018)) !important;
  box-shadow: inset 3px 0 0 #ff9f45, inset 0 1px 0 rgba(255,255,255,.03) !important;
}
.pp-page .pp-main-chart .pp-day-detail-values > span:nth-child(1) b { color: #ffbc7c !important; }

.pp-page .pp-main-chart .pp-day-detail-values > span:nth-child(2) {
  border-color: rgba(66,216,137,.22) !important;
  background: linear-gradient(145deg, rgba(66,216,137,.08), rgba(255,255,255,.018)) !important;
  box-shadow: inset 3px 0 0 #42d889, inset 0 1px 0 rgba(255,255,255,.03) !important;
}
.pp-page .pp-main-chart .pp-day-detail-values > span:nth-child(2) b { color: #7be8ac !important; }

.pp-page .pp-main-chart .pp-day-detail-values > span:nth-child(3) {
  border-color: rgba(255,196,71,.23) !important;
  background: linear-gradient(145deg, rgba(255,196,71,.085), rgba(255,255,255,.018)) !important;
  box-shadow: inset 3px 0 0 #ffc447, inset 0 1px 0 rgba(255,255,255,.03) !important;
}
.pp-page .pp-main-chart .pp-day-detail-values > span:nth-child(3) b { color: #ffd66f !important; }

.pp-page .pp-main-chart .pp-day-detail-values > span:nth-child(4) {
  border-color: rgba(103,184,255,.24) !important;
  background: linear-gradient(145deg, rgba(103,184,255,.085), rgba(255,255,255,.018)) !important;
  box-shadow: inset 3px 0 0 #67b8ff, inset 0 1px 0 rgba(255,255,255,.03) !important;
}
.pp-page .pp-main-chart .pp-day-detail-values > span:nth-child(4) b { color: #8fcaff !important; }

/* Session line under the metrics: keep it secondary but readable. */
.pp-page .pp-main-chart .pp-day-detail-sessions,
.pp-page .pp-main-chart .pp-day-detail > p {
  margin-top: 9px !important;
  color: rgba(255,255,255,.72) !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
}

/* --- Method note: supporting explanation should look informative, not disabled. --- */
.pp-page .pp-main-chart .pp-method-note {
  margin: 11px 0 0 !important;
  padding: 11px 12px !important;
  border: 1px solid rgba(103,184,255,.13) !important;
  border-left: 3px solid rgba(103,184,255,.72) !important;
  border-radius: 11px !important;
  color: rgba(255,255,255,.72) !important;
  background:
    linear-gradient(145deg, rgba(103,184,255,.055), rgba(255,255,255,.022)) !important;
  font-size: 12px !important;
  font-weight: 620 !important;
  line-height: 1.52 !important;
  letter-spacing: -.005em !important;
}

@media (max-width: 700px) {
  .pp-page .pp-main-chart .pp-verdict-gauge strong {
    font-size: 18px !important;
  }

  .pp-page .pp-main-chart .pp-verdict-gauge span {
    font-size: 7px !important;
  }

  .pp-page .pp-main-chart .pp-day-detail {
    padding: 11px 11px 12px !important;
  }

  .pp-page .pp-main-chart .pp-day-detail > strong,
  .pp-page .pp-main-chart .pp-day-detail > b {
    margin-bottom: 8px !important;
    font-size: 15px !important;
  }

  .pp-page .pp-main-chart .pp-day-detail-values {
    gap: 7px !important;
  }

  .pp-page .pp-main-chart .pp-day-detail-values > span {
    min-height: 61px !important;
    padding: 8px 10px 9px !important;
    border-radius: 11px !important;
    font-size: 8.5px !important;
  }

  .pp-page .pp-main-chart .pp-day-detail-values > span b {
    font-size: clamp(22px, 6.7vw, 27px) !important;
  }

  .pp-page .pp-main-chart .pp-method-note {
    margin-bottom: 74px !important;
    padding: 11px !important;
    font-size: 11.5px !important;
    line-height: 1.55 !important;
  }
}

@media (max-width: 380px) {
  .pp-page .pp-main-chart .pp-day-detail-values > span b {
    font-size: 22px !important;
  }

  .pp-page .pp-main-chart .pp-method-note {
    font-size: 11px !important;
  }
}