/* Bertumbuh v0.9 — Learning as a bridge from input to understanding and use */

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

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

.learning-routine-head > span,
.learning-challenge-kicker {
  display: block;
  margin-bottom: 7px;
  color: #777487;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .12em;
}

.learning-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;
}

.learning-routine-head p {
  max-width: 710px;
  margin: 0;
  color: #716f78;
  font-size: 12px;
  line-height: 1.65;
}

.learning-mode {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 18px 0 6px;
  padding: 12px 13px;
  border-radius: 15px;
  background: rgba(92,84,118,.05);
}
.learning-mode > span { color: #696674; font-size: 10px; font-weight: 720; }
.learning-mode > div { display: flex; flex-wrap: wrap; gap: 6px; }
.learning-mode button {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(92,84,118,.13);
  border-radius: 999px;
  background: #fffdf8;
  color: #696475;
  cursor: pointer;
  font-size: 9px;
  font-weight: 760;
}
.learning-mode button.active { border-color: #68647b; background: #68647b; color: #fff; }

.learning-routine-groups { margin-top: 10px; border-top: 1px solid rgba(82,78,101,.09); }
.learning-routine-group { border-bottom: 1px solid rgba(82,78,101,.09); }
.learning-routine-group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 2px;
  cursor: pointer;
  list-style: none;
}
.learning-routine-group summary::-webkit-details-marker { display: none; }
.learning-routine-group summary span { min-width: 0; }
.learning-routine-group summary strong { display: block; color: #383640; font-size: 12px; }
.learning-routine-group summary small { display: block; margin-top: 3px; color: #8d8a93; font-size: 10px; line-height: 1.45; }
.learning-routine-group summary i { flex: 0 0 auto; color: #85818d; font-size: 15px; font-style: normal; transition: transform .18s ease; }
.learning-routine-group[open] summary i { transform: rotate(180deg); }

.learning-routine-body { padding: 0 0 16px; }
.learning-routine-items { display: grid; gap: 7px; }
.learning-routine-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 11px;
  border: 0;
  border-radius: 13px;
  background: rgba(91,87,111,.035);
  color: #3e3b46;
  text-align: left;
  cursor: pointer;
}
.learning-routine-item:hover { background: rgba(91,87,111,.065); }
.learning-routine-item.done { background: #eceaf1; }
.learning-check {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(91,87,111,.18);
  border-radius: 50%;
  background: #fffefb;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}
.learning-routine-item.done .learning-check { border-color: #68647b; background: #68647b; }
.learning-routine-item > span:last-child { min-width: 0; }
.learning-routine-item strong { display: block; font-size: 11px; font-weight: 720; line-height: 1.35; }
.learning-routine-item small { display: block; margin-top: 2px; color: #8b8990; font-size: 9px; line-height: 1.4; }

.learning-counter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
  padding: 11px 12px;
  border-radius: 13px;
  background: rgba(92,84,118,.05);
}
.learning-counter-row > div:first-child strong { display: block; font-size: 11px; }
.learning-counter-row > div:first-child small { display: block; margin-top: 2px; color: #8b8790; font-size: 9px; }
.learning-counter-controls { display: flex; align-items: center; gap: 8px; }
.learning-counter-controls button {
  width: 29px;
  height: 29px;
  border: 1px solid rgba(92,84,118,.15);
  border-radius: 50%;
  background: #fffdf8;
  color: #696475;
  cursor: pointer;
  font-size: 15px;
}
.learning-counter-controls span { min-width: 86px; text-align: center; color: #706c79; font-size: 10px; }
.learning-counter-controls b { color: #45414e; font-size: 13px; }

.learning-challenge { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(82,78,101,.10); }
.learning-challenge h3 {
  max-width: 730px;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(19px, 2.5vw, 24px);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -.015em;
}
.learning-challenge-steps { margin-top: 10px; }
.learning-challenge-steps p { margin: 5px 0 0; color: #706d77; font-size: 11px; line-height: 1.6; }
.learning-challenge-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.learning-challenge-done,
.learning-challenge-swap {
  min-height: 37px;
  padding: 0 13px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 780;
}
.learning-challenge-done { border: 0; background: #68647b; color: white; }
.learning-challenge-done.done { background: #eceaf1; color: #5f5b71; }
.learning-challenge-swap { border: 1px solid rgba(82,78,101,.13); background: transparent; color: #676272; }

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

@media (max-width: 760px) {
  .learning-routine-panel { margin-left: -2px; margin-right: -2px; padding: 20px 17px; border-radius: 20px; }
  .learning-routine-head h3 { font-size: 25px; }
  .learning-routine-head p { font-size: 11px; }
  .learning-mode { align-items: flex-start; flex-direction: column; }
  .learning-routine-group summary { padding: 14px 0; }
  .learning-counter-row { align-items: flex-start; flex-direction: column; }
  .learning-counter-controls { width: 100%; justify-content: flex-start; }
}