/* Mindful area. Link from index.html: <link rel="stylesheet" href="css/area-mindful.css">. All classes start with "mindful". */
.mindful { display: grid; gap: var(--space-2, 12px); }
.mindful h2 { margin: 0 0 6px; }
.mindful h3, .mindful h4 { margin: 10px 0 4px; }
.mindful .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* timers and practices */
.mindful-runner { display: grid; gap: 10px; justify-items: center; text-align: center; padding: 8px 0; }
.mindful-clock { font-family: var(--font-display, inherit); font-size: 3rem; font-variant-numeric: tabular-nums; color: var(--plum, currentColor); line-height: 1.1; }
.mindful-clock-sub { min-height: 1.6em; margin: 0; color: var(--ink, currentColor); font-size: 1.1rem; }
.mindful-runner .progress { width: 100%; max-width: 420px; }
.mindful-mins button, .mindful-yn button, .mindful-center-opts button { min-height: 44px; min-width: 44px; }
.mindful-practice-open { display: grid; gap: 8px; }

/* affirmations */
.mindful-aff-pick { font-family: var(--font-display, inherit); font-size: 1.3rem; margin: 6px 0; color: var(--plum, currentColor); }
.mindful-aff-list { display: grid; gap: 6px; padding: 0; list-style: none; }
.mindful-aff-line { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--outline, rgba(0, 0, 0, .12)); }
.mindful-aff-text { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.mindful-star { min-width: 44px; min-height: 44px; font-size: 1.4rem; color: var(--gold, currentColor); }
.mindful-star[aria-pressed="true"] { color: var(--gold, currentColor); }

/* meditations */
.mindful-medlink { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }

/* forms in modals */
.mindful-form { display: grid; gap: 10px; }
.mindful-err { margin: 0; min-height: 1.2em; color: var(--danger, #b3261e); font-weight: 600; }

/* evening completion */
.mindful-q { display: grid; gap: 6px; margin-bottom: 10px; }
.mindful-q p { margin: 0; }

/* circle of control */
.mindful-zone { border-inline-start: 4px solid var(--outline, rgba(0, 0, 0, .25)); padding: 4px 0 4px 12px; margin: 10px 0; }
.mindful-zone-control { border-inline-start-color: var(--good, #2e7d32); }
.mindful-zone-partly { border-inline-start-color: var(--gold, #b8860b); }
.mindful-zone-no { border-inline-start-color: var(--blossom, #c2185b); }
.mindful-zone-unsure { border-inline-start-color: var(--outline, #999); }
.mindful-insights li { margin-bottom: 6px; }

/* wizard result blocks */
.mindful-step { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--outline, rgba(0, 0, 0, .2)); border-radius: var(--radius-s, 10px); }
.mindful-step-text { margin: 0; font-weight: 600; }
.mindful-gate, .mindful-ladder, .mindful-compass, .mindful-start, .mindful-mort, .mindful-ground { display: grid; gap: 8px; }
.mindful-center-now { margin: 8px 0 0; font-weight: 600; color: var(--plum, currentColor); }

@media (max-width: 520px) {
  .mindful-clock { font-size: 2.4rem; }
  .mindful-aff-line { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .mindful .progress > span { transition: none; }
}
@media print {
  .mindful .no-print { display: none !important; }
  .mindful-runner { display: none; }
}