/* Bertumbuh — Body daily route */

.body-anchor-source[hidden] { display:none !important; }

.body-routine-panel {
  margin-bottom:16px;
  padding:clamp(20px,3vw,28px);
  border:1px solid rgba(93,88,69,.10);
  border-radius:24px;
  background:#fbfaf6;
  box-shadow:0 14px 44px rgba(38,51,42,.05);
}

.body-routine-head > span,
.body-now-kicker,
.body-step-card > span,
.body-step-next > span {
  display:block;
  margin-bottom:7px;
  color:#7f7a68;
  font-size:9px;
  font-weight:850;
  letter-spacing:.12em;
}

.body-routine-head h3 {
  margin:0 0 7px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(24px,3vw,31px);
  font-weight:500;
  letter-spacing:-.025em;
}

.body-routine-head p {
  max-width:760px;
  margin:0;
  color:#716f67;
  font-size:12px;
  line-height:1.65;
}

.body-metrics {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);
  gap:10px;
  margin-top:18px;
}

.body-step-card,
.body-step-next {
  padding:15px 16px;
  border:1px solid rgba(93,88,69,.09);
  border-radius:17px;
  background:#fffdf8;
}

.body-step-card strong {
  display:block;
  color:#343b35;
  font-family:Georgia,"Times New Roman",serif;
  font-size:29px;
  font-weight:500;
}

.body-step-card small,
.body-step-next small {
  display:block;
  margin-top:3px;
  color:#8a887f;
  font-size:9px;
  line-height:1.45;
}

.body-step-next {
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:rgba(102,115,94,.055);
}
.body-step-next strong {
  color:#485246;
  font-size:12px;
  line-height:1.45;
}
.body-step-next.minimum-reached {
  background:#edf1e9;
}

.body-step-controls {
  display:flex;
  gap:7px;
  margin-top:10px;
}
.body-step-controls button,
.body-more-steps {
  min-height:32px;
  padding:0 11px;
  border:1px solid rgba(103,95,76,.13);
  border-radius:999px;
  background:#fff;
  color:#62695f;
  cursor:pointer;
  font-size:9px;
  font-weight:800;
}
.body-more-steps {
  align-self:flex-start;
  margin-top:10px;
  border:0;
  background:#66735e;
  color:#fff;
}

.body-strength-toggle {
  width:100%;
  display:flex;
  align-items:center;
  gap:11px;
  margin-top:10px;
  padding:12px 13px;
  border:1px solid rgba(93,88,69,.10);
  border-radius:15px;
  background:rgba(120,101,69,.04);
  color:#454a42;
  text-align:left;
  cursor:pointer;
}
.body-strength-toggle > span {
  flex:0 0 23px;
  width:23px;
  height:23px;
  display:grid;
  place-items:center;
  border:1px solid rgba(92,99,80,.18);
  border-radius:50%;
  background:#fff;
  color:#fff;
  font-size:11px;
  font-weight:900;
}
.body-strength-toggle.active > span {
  border-color:#66735e;
  background:#66735e;
}
.body-strength-toggle strong { display:block; font-size:11px; }
.body-strength-toggle small {
  display:block;
  margin-top:2px;
  color:#8a8982;
  font-size:9px;
  line-height:1.4;
}

.body-now {
  margin-top:18px;
  padding:18px;
  border-radius:18px;
  background:#f0f2ec;
}
.body-now-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:11px;
}
.body-now h4 {
  margin:0;
  color:#354038;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(19px,2.5vw,24px);
  font-weight:500;
  line-height:1.35;
}
.body-now-head > small {
  flex:0 0 auto;
  padding-top:2px;
  color:#7b817a;
  font-size:9px;
}
.body-now > p,
.body-open-ended,
.body-strength-skip {
  margin:8px 0 0;
  color:#747a73;
  font-size:10px;
  line-height:1.55;
}

.body-current-actions,
.body-routine-items {
  display:grid;
  gap:7px;
}

.body-routine-item {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  padding:10px 11px;
  border:0;
  border-radius:13px;
  background:rgba(92,99,80,.04);
  color:#3d4038;
  text-align:left;
  cursor:pointer;
}
.body-now .body-routine-item { background:#fbfcf8; }
.body-routine-item:hover { background:rgba(92,99,80,.075); }
.body-routine-item.done { background:#e4ebe1; opacity:.78; }

.body-check {
  flex:0 0 22px;
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border:1px solid rgba(92,99,80,.18);
  border-radius:50%;
  background:#fffefb;
  color:#fff;
  font-size:11px;
  font-weight:900;
}
.body-routine-item.done .body-check {
  border-color:#66735e;
  background:#66735e;
}
.body-routine-item > span:last-child { min-width:0; }
.body-routine-item strong {
  display:block;
  font-size:11px;
  font-weight:720;
  line-height:1.4;
}

.body-full-route {
  margin-top:14px;
  border-top:1px solid rgba(93,88,69,.09);
}
.body-full-route > summary,
.body-routine-group summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  cursor:pointer;
  list-style:none;
}
.body-full-route > summary { padding:16px 1px 8px; }
.body-full-route summary::-webkit-details-marker,
.body-routine-group summary::-webkit-details-marker { display:none; }
.body-full-route summary strong,
.body-routine-group summary strong {
  display:block;
  color:#373a32;
  font-size:11px;
}
.body-full-route summary small,
.body-routine-group summary small {
  display:block;
  margin-top:3px;
  color:#8c8a82;
  font-size:9px;
  line-height:1.45;
}
.body-full-route summary i,
.body-routine-group summary i {
  flex:0 0 auto;
  color:#858176;
  font-size:15px;
  font-style:normal;
  transition:transform .18s ease;
}
.body-full-route[open] > summary i,
.body-routine-group[open] summary i { transform:rotate(180deg); }

.body-routine-groups { margin-top:6px; }
.body-routine-group { border-bottom:1px solid rgba(93,88,69,.08); }
.body-routine-group.is-current { border-radius:14px; background:rgba(102,115,94,.04); }
.body-routine-group summary { padding:14px 10px; }
.body-routine-body { padding:0 10px 14px; }

@media (min-width:860px) {
  .body-routine-items { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:760px) {
  .body-routine-panel {
    margin-left:-2px;
    margin-right:-2px;
    padding:20px 17px;
    border-radius:20px;
  }
  .body-routine-head h3 { font-size:25px; }
  .body-routine-head p { font-size:11px; }
  .body-metrics { grid-template-columns:1fr; }
  .body-now-head { flex-direction:column; gap:4px; }
  .body-routine-group summary { padding:13px 4px; }
  .body-routine-body { padding:0 4px 13px; }
}