/* LIFE area: lifestyle tracking, precautions, planning, checklists, schedule, summary report.
   Colours come from css/tokens.css only, so dark mode follows automatically. */

/* Print-only sections: hidden on screen, shown when printing (the report host). */
.print-only { display: none; }
@media print {
  .print-only { display: block !important; }
  .life-track .no-print,
  .life-report-screen { display: none !important; }
}

/* ---------- shared layout ---------- */
.life-toolbar,
.life-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 0.5rem);
  align-items: center;
  margin-block: var(--space-2, 0.5rem);
}
.life-toolbar { justify-content: space-between; }
.life-actions { justify-content: flex-start; }
.life-foot { margin-block-start: var(--space-4, 1rem); color: var(--ink); opacity: 0.8; font-size: 0.9rem; }
.life-error { color: var(--danger); font-weight: 600; margin-block: var(--space-2, 0.5rem); }
.life-bullets { margin: var(--space-2, 0.5rem) 0; padding-inline-start: 1.25rem; }
.life-bullets li { margin-block: 0.25rem; }
.life-notes { margin-block: var(--space-2, 0.5rem); }
.life-notes > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }

/* ---------- tracker ---------- */
.life-track { display: block; }
.life-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2, 0.5rem); }

.life-prac {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  align-items: center;
  padding: var(--space-3, 0.75rem);
  background: var(--card);
  border: 1px solid var(--outline);
  border-radius: var(--radius, 12px);
}
.life-prac.is-met { border-color: var(--good); background: var(--good-bg); }
.life-prac-main { min-width: 0; }
.life-prac-main strong { display: block; overflow-wrap: anywhere; }
.life-prac-ctl { display: flex; align-items: center; gap: var(--space-2, 0.5rem); justify-content: flex-end; }
.life-prac-extra {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 0.5rem);
  align-items: center;
}

/* Big check target (44px+) */
.life-check {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--outline);
  background: var(--card);
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.life-check.on { background: var(--good); border-color: var(--good); color: var(--card); }
.life-check:focus-visible,

.life-count {
  min-width: 3.5ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Enable / disable switch in manage mode */
.life-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  min-height: 44px;
  cursor: pointer;
}
.life-switch input { width: 24px; height: 24px; accent-color: var(--plum); }

.life-goal { display: inline-flex; align-items: center; gap: var(--space-2, 0.5rem); }
.life-goal input { width: 6rem; min-height: 44px; }

/* ---------- history ---------- */
.life-hist {
  display: grid;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-3, 0.75rem);
  background: var(--card);
  border: 1px solid var(--outline);
  border-radius: var(--radius, 12px);
}
.life-dots { display: flex; flex-wrap: wrap; gap: 4px; }
.life-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--outline);
  background: var(--sand);
}
.life-dot.on { background: var(--good); border-color: var(--good); }
.life-dot.off { background: transparent; }

/* ---------- daily rows (todo / schedule) ---------- */
.life-day { margin-block: var(--space-3, 0.75rem); }
.life-day > h2 { margin-block-end: var(--space-2, 0.5rem); }
.life-todo-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2, 0.5rem); margin-block-start: var(--space-2, 0.5rem); }
.life-sugg { margin-block-start: var(--space-2, 0.5rem); }
.life-sugg > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--plum); font-weight: 600; }
.life-sugg p { white-space: pre-line; margin-block: var(--space-2, 0.5rem); }

/* ---------- summary report ---------- */
.life-ring-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4, 1rem); margin-block: var(--space-3, 0.75rem); }
.life-ring {
  --life-pct: 0;
  --life-ring-color: var(--sage);
  position: relative;
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: conic-gradient(var(--life-ring-color) calc(var(--life-pct) * 1%), var(--sand) 0);
  display: grid;
  place-items: center;
}
.life-ring::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: var(--card);
}
.life-ring-icon { position: relative; font-size: 2rem; line-height: 1; }
.life-ring.life-band-STRONG { --life-ring-color: var(--good); }
.life-ring.life-band-ON_TRACK { --life-ring-color: var(--sage); }
.life-ring.life-band-INCONSISTENT { --life-ring-color: var(--gold); }
.life-ring.life-band-CONCERN { --life-ring-color: var(--caution); }
.life-band { margin: 0; }
.life-headline { font-weight: 600; margin-block: var(--space-2, 0.5rem); }

.life-table { width: 100%; border-collapse: collapse; }
.life-table th,
.life-table td { padding: 0.5rem 0.6rem; text-align: start; border-bottom: 1px solid var(--outline); vertical-align: top; }
.life-table th { font-weight: 600; }
.life-table td.num, .life-table th.num { text-align: end; font-variant-numeric: tabular-nums; }

@media (max-width: 480px) {
  .life-prac { grid-template-columns: 1fr; }
  .life-prac-ctl { justify-content: flex-start; }
  .life-ring { width: 80px; height: 80px; }
}

@media (prefers-reduced-motion: no-preference) {
  .life-prac, .life-check { transition: background-color 0.15s ease, border-color 0.15s ease; }
}

/* Printed report: plain black on white, no chrome. */
@media print {
  .print-only { color: #000; background: #fff; }
  .print-only .life-table th,
  .print-only .life-table td { border-bottom: 1px solid #999; }
}