/* Root of Wellbeing — earth, dawn, quiet ground. */

body[data-chamber="root"] {
  --chamber-accent: #c4a06a;
  --chamber-accent-soft: rgba(139, 165, 142, .16);
  --chamber-shadow: rgba(92, 64, 38, .32);
  --root-moss: #8ba58e;
  --root-dawn: #e8c99a;
  --root-soil: #1c1612;
  background:
    radial-gradient(90rem 52rem at 48% -20%, rgba(232, 201, 154, .17), transparent 56%),
    radial-gradient(50rem 42rem at 0% 36%, rgba(139, 165, 142, .13), transparent 64%),
    radial-gradient(46rem 38rem at 100% 78%, rgba(92, 64, 38, .38), transparent 60%),
    var(--ink);
}

#foundation-check,
#one-minute,
#difficult-day,
#roots,
#root-rest,
#root-food,
#root-movement,
#root-place,
#root-connection,
#root-safety,
#root-healthcare,
[data-root-results] {
  scroll-margin-top: 5.5rem;
}

.btn[hidden],
.root-loading[hidden],
.root-error[hidden],
[data-root-results][hidden],
.root-panel[hidden] {
  display: none !important;
}

.root-quiet {
  max-width: 40rem;
  color: var(--muted);
  font-size: .95rem;
}

.root-principle {
  max-width: 42rem;
  margin-top: 1.05rem;
  color: var(--mist);
  font-family: var(--serif);
  font-size: 1.12rem;
  font-style: italic;
  line-height: 1.5;
}

.root-kicker-row {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .7rem;
  margin-top: 1.1rem;
}

.root-stat {
  display: inline-flex;
  align-items: center;
  min-height: 2.6rem;
  padding: .35rem .75rem;
  color: var(--mist);
  border: 1px solid rgba(196, 160, 106, .32);
  border-radius: 999px;
  background: rgba(0, 0, 0, .28);
  font-size: .78rem;
}

.root-check {
  display: grid;
  gap: 1.2rem;
  padding: clamp(1.2rem, 3vw, 2.1rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(165deg, rgba(36, 30, 24, .88), rgba(12, 16, 16, .82));
  box-shadow: 0 22px 55px var(--shadow);
}

.root-privacy {
  padding: 1rem 1.1rem;
  color: var(--mist);
  border: 1px solid rgba(196, 160, 106, .32);
  border-radius: .9rem;
  background: rgba(139, 165, 142, .08);
}

.root-privacy strong {
  display: block;
  margin-bottom: .3rem;
  color: var(--paper);
}

.root-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
}

.root-check-set {
  display: grid;
  gap: .45rem;
  min-width: 0;
  padding: .95rem 1rem;
  border: 1px solid rgba(244, 240, 231, .1);
  border-radius: 1rem;
  background: rgba(0, 0, 0, .18);
}

.root-check-set legend {
  padding: 0 .35rem;
  color: var(--root-dawn);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.root-check-item {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: .7rem;
  align-items: center;
  min-height: 2.75rem;
  padding: .35rem .15rem;
  color: var(--paper);
  font-weight: 550;
  cursor: pointer;
}

.root-check-item input {
  width: 1.2rem;
  height: 1.2rem;
  accent-color: var(--root-moss);
}

.root-index {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 0 0 1rem;
}

.root-index-link {
  display: inline-flex;
  min-height: 2.5rem;
  align-items: center;
  padding: .35rem .75rem;
  color: var(--paper);
  border: 1px solid rgba(244, 240, 231, .14);
  border-radius: 999px;
  background: rgba(244, 240, 231, .04);
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
}

.root-index-link:hover {
  color: var(--ink);
  border-color: var(--root-dawn);
  background: var(--root-dawn);
}

[data-root-results] {
  display: grid;
  gap: 1rem;
  padding: clamp(1.2rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(28, 24, 20, .9), rgba(10, 14, 14, .86));
}

.root-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
}

.root-result-card {
  display: grid;
  align-content: start;
  gap: .45rem;
  padding: 1rem 1.05rem;
  border: 1px solid rgba(244, 240, 231, .1);
  border-radius: .95rem;
  background: rgba(0, 0, 0, .2);
}

.root-result-card h4 {
  margin: 0;
  color: var(--root-dawn);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.root-result-card.is-steady { border-color: color-mix(in srgb, var(--root-moss), transparent 40%); }
.root-result-card.is-attention { border-color: color-mix(in srgb, var(--chamber-accent), transparent 35%); }
.root-result-card.is-next {
  border-color: color-mix(in srgb, var(--root-dawn), transparent 30%);
  background: rgba(232, 201, 154, .08);
}
.root-result-card ul {
  margin: 0;
  padding-left: 1.1rem;
}

.root-escalation { color: var(--mist); font-size: .92rem; }

.root-sections { display: grid; gap: .7rem; }

.root-panel {
  border: 1px solid rgba(244, 240, 231, .12);
  border-radius: 1rem;
  background: rgba(18, 16, 14, .72);
}

.root-panel summary {
  display: grid;
  gap: .2rem;
  min-height: 3.4rem;
  padding: .95rem 1.1rem;
  cursor: pointer;
  list-style: none;
}

.root-panel summary::-webkit-details-marker { display: none; }

.root-panel-kicker {
  color: var(--root-moss);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.root-panel-title {
  color: var(--paper);
  font-family: var(--serif);
  font-size: 1.25rem;
}

.root-panel[open] {
  border-color: color-mix(in srgb, var(--chamber-accent), transparent 35%);
  background: rgba(28, 24, 20, .9);
}

.root-panel-body {
  display: grid;
  gap: .85rem;
  padding: 0 1.1rem 1.2rem;
  color: var(--mist);
}

.root-panel-lead {
  color: var(--paper);
  font-family: var(--serif);
  font-size: 1.08rem;
  font-style: italic;
}

.root-related { margin: .2rem 0 0; }

.root-low {
  display: grid;
  gap: .75rem;
}

.root-low-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.root-low-list li {
  min-height: 3.1rem;
  padding: .85rem 1rem;
  border: 1px solid rgba(244, 240, 231, .1);
  border-radius: .85rem;
  background: rgba(0, 0, 0, .18);
}

.root-minute {
  display: grid;
  gap: 1rem;
  padding: clamp(1.2rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(24, 28, 24, .88), rgba(10, 14, 14, .82));
}

.root-minute-track {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.1rem;
  align-items: center;
}

.root-minute-ring {
  width: 5.6rem;
  height: 5.6rem;
}

.root-minute-ring circle {
  fill: none;
  stroke: rgba(244, 240, 231, .12);
  stroke-width: 4;
}

.root-minute-ring .root-minute-progress {
  stroke: var(--root-dawn);
  stroke-linecap: round;
  stroke-dasharray: 163;
  stroke-dashoffset: 163;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.root-minute.is-running .root-minute-progress {
  animation: root-minute-draw 60s linear forwards;
}

.root-minute-steps { display: grid; gap: .75rem; }

.root-minute-step {
  padding: .85rem 1rem;
  border: 1px solid rgba(244, 240, 231, .1);
  border-radius: .85rem;
  opacity: .55;
}

.root-minute[data-step="contact"] [data-step-id="contact"],
.root-minute[data-step="orient"] [data-step-id="orient"],
.root-minute[data-step="choose"] [data-step-id="choose"],
.root-minute[data-step="all"] .root-minute-step,
.root-minute[data-step="done"] .root-minute-step {
  opacity: 1;
  border-color: color-mix(in srgb, var(--root-dawn), transparent 40%);
  background: rgba(232, 201, 154, .08);
}

.root-sources a { overflow-wrap: anywhere; }

@keyframes root-minute-draw {
  to { stroke-dashoffset: 0; }
}

@media (max-width: 1020px) {
  .root-check-grid,
  .root-result-grid,
  .root-low-list { grid-template-columns: 1fr; }
  .root-minute-track { grid-template-columns: 1fr; justify-items: start; }
}

@media (max-width: 760px) {
  .root-check-item { min-height: 2.85rem; }
  .root-panel summary { min-height: 3.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .root-minute.is-running .root-minute-progress { animation: none; stroke-dashoffset: 0; }
  .root-index-link,
  .root-check-item,
  .root-panel { transition: none; }
}