/* Bertumbuh v0.10 — Family as presence, reading, care, and repair */

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

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

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

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

.family-routine-head p {
  max-width: 720px;
  margin: 0;
  color: #756c67;
  font-size: 12px;
  line-height: 1.65;
}

.family-mode {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 18px 0 10px;
  padding: 12px 13px;
  border-radius: 15px;
  background: rgba(130,92,75,.05);
}
.family-mode > span { color: #6d625d; font-size: 10px; font-weight: 720; }
.family-mode > div { display: flex; flex-wrap: wrap; gap: 6px; }
.family-mode button {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(111,88,75,.13);
  border-radius: 999px;
  background: #fffdf9;
  color: #6f615a;
  cursor: pointer;
  font-size: 9px;
  font-weight: 760;
}
.family-mode button.active { border-color: #7a665b; background: #7a665b; color: #fff; }

.family-signal {
  margin: 0 0 10px;
  padding: 12px 13px;
  border-radius: 15px;
  background: rgba(113,93,83,.04);
}
.family-signal label {
  display: block;
  margin-bottom: 6px;
  color: #6f635d;
  font-size: 10px;
  font-weight: 760;
}
.family-signal textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 62px;
  padding: 10px 11px;
  border: 1px solid rgba(111,88,75,.12);
  border-radius: 12px;
  background: #fffefb;
  color: #403a36;
  font: inherit;
  font-size: 11px;
  line-height: 1.5;
}
.family-signal textarea:focus { outline: 2px solid rgba(122,102,91,.12); border-color: rgba(122,102,91,.26); }

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

.family-routine-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 11px;
  border: 0;
  border-radius: 13px;
  background: rgba(115,92,80,.035);
  color: #433b37;
  text-align: left;
  cursor: pointer;
}
.family-routine-item:hover { background: rgba(115,92,80,.065); }
.family-routine-item.done { background: #eee8e4; }
.family-check {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(115,92,80,.18);
  border-radius: 50%;
  background: #fffefb;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}
.family-routine-item.done .family-check { border-color: #7a665b; background: #7a665b; }
.family-routine-item > span:last-child { min-width: 0; }
.family-routine-item strong { display: block; font-size: 11px; font-weight: 720; line-height: 1.35; }
.family-routine-item small { display: block; margin-top: 2px; color: #918985; font-size: 9px; line-height: 1.4; }

.family-counter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
  padding: 11px 12px;
  border-radius: 13px;
  background: rgba(130,92,75,.05);
}
.family-counter-row > div:first-child strong { display: block; font-size: 11px; }
.family-counter-row > div:first-child small { display: block; margin-top: 2px; color: #8f837d; font-size: 9px; }
.family-counter-controls { display: flex; align-items: center; gap: 8px; }
.family-counter-controls button {
  width: 29px;
  height: 29px;
  border: 1px solid rgba(130,92,75,.15);
  border-radius: 50%;
  background: #fffdf9;
  color: #725f56;
  cursor: pointer;
  font-size: 15px;
}
.family-counter-controls span { min-width: 78px; text-align: center; color: #776960; font-size: 10px; }
.family-counter-controls b { color: #4a403b; font-size: 13px; }

.family-challenge {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(103,79,67,.10);
}
.family-challenge h3 {
  max-width: 720px;
  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;
}
.family-challenge-steps { margin-top: 10px; }
.family-challenge-steps p { margin: 5px 0 0; color: #746c68; font-size: 11px; line-height: 1.6; }
.family-challenge-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.family-challenge-done,
.family-challenge-swap {
  min-height: 37px;
  padding: 0 13px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 780;
}
.family-challenge-done { border: 0; background: #78645a; color: white; }
.family-challenge-done.done { background: #ede7e3; color: #67564e; }
.family-challenge-swap { border: 1px solid rgba(103,79,67,.13); background: transparent; color: #6f5f57; }

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

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