.rg-progress-shell {
  display: grid;
  gap: 1rem;
  width: 100%;
  min-width: 0;
  padding: 1rem;
  border: 1px solid rgba(255, 213, 106, .22);
  border-radius: 8px;
  background: #0b0f14;
  color: #f8fafc;
  box-sizing: border-box;
}

.rg-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.rg-progress-head span,
.rg-progress-weekly > span {
  color: #fbbf24;
  font-size: .72rem;
  font-weight: 800;
}

.rg-progress-head h2 {
  margin: .25rem 0 0;
  font-size: 1.6rem;
  letter-spacing: 0;
}

.rg-progress-periods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .35rem;
  min-width: min(100%, 15rem);
}

.rg-progress-periods button,
.rg-progress-empty button {
  min-height: 44px;
  border: 1px solid #334155;
  border-radius: 6px;
  background: #111827;
  color: #e2e8f0;
  font: inherit;
  font-weight: 700;
}

.rg-progress-periods button.active {
  border-color: #fbbf24;
  background: #fbbf24;
  color: #111827;
}

.rg-progress-periods button:focus-visible,
.rg-progress-why summary:focus-visible,
.rg-progress-empty button:focus-visible,
.rg-dashboard-progress-item:focus-visible {
  outline: 3px solid #fef08a;
  outline-offset: 3px;
}

.rg-progress-answer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

.rg-progress-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: .75rem;
}

.rg-progress-answer > div,
.rg-progress-charts article,
.rg-progress-weekly {
  min-width: 0;
  padding: .9rem;
  border: 1px solid #243140;
  border-radius: 8px;
  background: #101720;
}

.rg-progress-answer small {
  color: #94a3b8;
  font-weight: 700;
}

.rg-progress-answer ul,
.rg-progress-why ul {
  margin: .5rem 0 0;
  padding-left: 1.2rem;
}

.rg-progress-answer li,
.rg-progress-why li {
  margin: .3rem 0;
  color: #dbe4ef;
}

.rg-progress-adherence {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem;
}

.rg-progress-adherence span {
  display: grid;
  gap: .2rem;
  padding: .7rem;
  border-left: 3px solid #38bdf8;
  background: #0d141c;
}

.rg-progress-adherence small { color: #94a3b8; }
.rg-progress-adherence b { font-size: 1.1rem; }

.rg-progress-charts article header {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  align-items: center;
  padding-bottom: .65rem;
  border-bottom: 1px solid #243140;
}

.rg-progress-charts article header span {
  color: #94a3b8;
  font-size: .78rem;
}

.rg-progress-chart {
  --chart-color: #fbbf24;
  display: block;
  width: 100%;
  height: auto;
  margin-top: .15rem;
  overflow: visible;
}

.rg-progress-chart.is-weight { --chart-color: #fbbf24; }
.rg-progress-chart.is-waist { --chart-color: #34d399; }
.rg-progress-chart.is-training { --chart-color: #38bdf8; }

.rg-progress-chart .rg-progress-grid {
  stroke: #2a3645;
  stroke-width: 1;
  stroke-dasharray: 3 5;
}

.rg-progress-chart .rg-progress-area {
  fill: var(--chart-color);
  fill-opacity: .12;
  stroke: none;
}

.rg-progress-chart .rg-progress-line {
  fill: none;
  stroke: var(--chart-color);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rg-progress-chart .rg-progress-point {
  fill: #0e151d;
  stroke: var(--chart-color);
  stroke-width: 2.5;
}

.rg-progress-chart .rg-progress-axis {
  fill: #7f8c9d;
  font-size: 9px;
}

.rg-progress-chart-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .8rem;
}

.rg-progress-chart-summary strong {
  color: #f8fafc;
  font-size: 1.55rem;
  line-height: 1;
}

.rg-progress-chart-summary strong small {
  margin-left: .25rem;
  color: #94a3b8;
  font-size: .72rem;
}

.rg-progress-chart-summary span {
  color: #94a3b8;
  font-size: .72rem;
  font-weight: 700;
  text-align: right;
}

.rg-progress-why summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 800;
}

.rg-progress-weekly { display: grid; gap: .35rem; }
.rg-progress-weekly p { margin: 0; color: #b8c3d1; }
.rg-progress-empty { padding: 1rem; color: #b8c3d1; }
.rg-progress-shell.is-needs_attention { border-color: #ef4444; }
.rg-progress-shell.is-watch { border-color: #f59e0b; }
.rg-progress-shell.is-on_track { border-color: #22c55e; }

.rg-dashboard-progress-list { display: grid; gap: .65rem; }

.rg-dashboard-progress-item {
  display: grid;
  grid-template-columns: minmax(8rem, 1.2fr) minmax(10rem, 2fr) auto;
  align-items: center;
  gap: .75rem;
  width: 100%;
  min-height: 58px;
  padding: .7rem .8rem;
  border: 1px solid #243140;
  border-radius: 8px;
  background: #0d141c;
  color: #f8fafc;
  text-align: left;
}

.rg-dashboard-progress-item span { display: grid; }
.rg-dashboard-progress-item small { color: #94a3b8; }
.rg-dashboard-progress-item em { color: #fbbf24; font-style: normal; }

.client-progress-indicator {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-height: 28px;
  margin-top: .35rem;
  padding: .2rem .5rem;
  border: 1px solid #334155;
  border-radius: 999px;
  color: #cbd5e1;
  font-size: .76rem;
  font-weight: 700;
}

.client-progress-indicator.is-on_track { border-color: #22c55e; color: #86efac; }
.client-progress-indicator.is-watch { border-color: #f59e0b; color: #fcd34d; }
.client-progress-indicator.is-needs_attention { border-color: #ef4444; color: #fca5a5; }

@media (max-width: 48rem) {
  .rg-progress-head { display: grid; }
  .rg-progress-periods { width: 100%; min-width: 0; }
  .rg-progress-answer,
  .rg-progress-charts { grid-template-columns: 1fr; }
  .rg-progress-adherence { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rg-dashboard-progress-item { grid-template-columns: 1fr auto; }
  .rg-dashboard-progress-item > span:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 22.5rem) {
  .rg-progress-shell { padding: .75rem; }
  .rg-progress-periods button { padding: .35rem; font-size: .78rem; }
  .rg-progress-adherence { grid-template-columns: 1fr 1fr; }
}