/* public/css/health.css — M8 health logging & settings screens (prefix .hp-).
   Colors, stacking and spacing come ONLY from tokens.css variables (§7, §8 gate 7). */

/* ---------- Shared segment strip ---------- */

.hp-seg {
  margin-bottom: var(--sp-4);
}

.hp-seg > button {
  font-size: 12px;
  padding: var(--sp-1);
}

/* ---------- Day headers, lists, generic rows ---------- */

.hp-dayhead {
  margin: var(--sp-5) 0 var(--sp-2);
  color: var(--text-dim);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hp-list {
  margin-bottom: var(--sp-3);
}

.hp-item {
  position: relative;
}

/* attachSwipe rewraps a row's children into a plain-block .ui-swipe-content
   (§6.4): restore the .row flex layout on that wrapper so text, time chips,
   check circles and badges keep their single-line layout instead of stacking. */
.hp-item > .ui-swipe-content {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 1 1 auto;
  min-width: 0;
}

/* Underlay pruning (mirrors .lib-swipe-noedit): rows whose left swipe offers
   only delete (weekly-goal rows) hide the amber edit icon so the revealed
   underlay matches the action that will actually commit. */
.hp-swipe-noedit .ui-swipe-ic--edit {
  display: none;
}

.hp-empty {
  color: var(--text-dim);
  padding: var(--sp-4) 0;
}

/* Extra clearance so bottom-anchored actions never cover the list tail. */
.hp-pad-bottom {
  padding-bottom: calc(var(--tap-primary) + var(--sp-6) + var(--sp-6));
}

/* Time chip — tappable, ≥48px target (R2.2). */
.hp-chip {
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--outline);
  color: var(--accent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  flex: none;
}

.hp-when {
  flex: none;
  text-align: right;
}

/* ---------- Backdate bottom sheet ---------- */

.hp-backdate {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
}

.hp-dayrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.hp-daystep {
  min-width: var(--tap-primary);
  min-height: var(--tap-min);
  font-size: 24px;
  flex: none;
}

.hp-daylabel {
  flex: 1 1 auto;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
}

.hp-timerow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
}

.hp-time-btn {
  min-width: calc(var(--tap-primary) + var(--sp-5));
  min-height: var(--tap-primary);
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--outline);
  color: var(--text);
  font-size: 32px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.hp-time-colon {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-dim);
}

/* ---------- Edit sheets (meal text, notes, supplement form) ---------- */

.hp-edit-sheet {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-bottom: var(--sp-4);
}

/* ---------- Meals ---------- */

.hp-entryrow {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.hp-meal-input {
  flex: 1 1 auto;
  min-width: 0;
}

.hp-log-btn {
  flex: none;
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: transparent;
  min-width: calc(var(--tap-primary) + var(--sp-3));
}

/* ---------- Hydration ---------- */

.hp-glass-wrap {
  display: flex;
  justify-content: center;
  padding: var(--sp-3) 0 var(--sp-2);
}

.hp-glass {
  width: 180px;
  height: auto;
}

.hp-glass-outline {
  fill: none;
  stroke: var(--outline);
  stroke-width: 5;
  stroke-linejoin: round;
}

.hp-water {
  fill: var(--accent);
  opacity: 0.85;
}

.hp-wave {
  fill: var(--accent);
  opacity: 0.85;
  animation: hp-wave-slide 2.6s linear infinite;
}

@keyframes hp-wave-slide {
  from { transform: translateX(0); }
  to { transform: translateX(-200px); }
}

.hp-total {
  text-align: center;
  font-size: 28px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.hp-total-sub {
  text-align: center;
  color: var(--text-dim);
  margin-bottom: var(--sp-3);
}

.hp-quickrow {
  display: flex;
  gap: var(--sp-2);
}

.hp-quick {
  flex: 1 1 0;
  min-height: calc(var(--tap-min) + var(--sp-2));
  font-size: 15px;
  padding: var(--sp-2);
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: transparent;
}

/* ---------- Symptoms ---------- */

.hp-kind-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}

.hp-kind-card {
  min-height: calc(var(--tap-primary) + var(--sp-3));
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--outline);
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
}

.hp-kind-card:active {
  background: var(--surface-2);
}

.hp-sym-sheet {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-bottom: var(--sp-4);
}

.hp-sev-value {
  text-align: center;
  font-size: 22px;
  font-weight: 800;
}

.hp-sev-labels {
  display: flex;
  justify-content: space-between;
  color: var(--text-dim);
  font-size: 13px;
}

.hp-note {
  width: 100%;
  resize: vertical;
}

/* 1–5 severity slider with a 48px thumb (R2.2). */
.hp-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: var(--tap-min);
  background: transparent;
  border: 0;
  padding: 0;
  min-height: var(--tap-min);
}

.hp-slider::-webkit-slider-runnable-track {
  height: var(--sp-2);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--outline);
}

.hp-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: 50%;
  background: var(--accent);
  border: 0;
  margin-top: calc((var(--sp-2) - var(--tap-min)) / 2);
}

.hp-slider::-moz-range-track {
  height: var(--sp-2);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--outline);
}

.hp-slider::-moz-range-thumb {
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: 50%;
  background: var(--accent);
  border: 0;
}

.hp-sym-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.hp-sym-kind {
  font-weight: 700;
}

.hp-dots {
  display: inline-flex;
  gap: var(--sp-1);
  align-items: center;
}

.hp-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--outline);
  display: inline-block;
}

.hp-dot--on {
  background: var(--warn);
  border-color: transparent;
}

/* ---------- Digestion ---------- */

.hp-count {
  text-align: center;
  font-size: 48px;
  font-weight: 800;
  line-height: 1.1;
  margin-top: var(--sp-3);
  font-variant-numeric: tabular-nums;
}

.hp-bm-card {
  position: relative;
  margin-top: var(--sp-3);
}

.hp-bm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.hp-bm-title {
  font-weight: 700;
}

.hp-bristol-row {
  display: flex;
  gap: var(--sp-1);
}

.hp-bristol-chip {
  flex: 1 1 0;
  min-height: var(--tap-min);
  min-width: 0;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--outline);
  color: var(--text);
  font-weight: 700;
  font-size: 16px;
}

.hp-bristol-chip--on {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: transparent;
}

.hp-legend {
  color: var(--text-dim);
  font-size: 12px;
  margin-top: var(--sp-2);
}

.hp-bm-note {
  display: block;
  width: 100%;
  text-align: left;
  min-height: var(--tap-min);
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
}

.hp-bm-note--empty {
  color: var(--text-dim);
}

.hp-poop-btn {
  font-size: 22px;
  letter-spacing: 0.05em;
}

/* ---------- Supplements ---------- */

.hp-supp-row {
  cursor: pointer;
}

.hp-supp-row--done .row-main {
  color: var(--text-dim);
}

.hp-check {
  flex: none;
  width: calc(var(--tap-min) - var(--sp-3));
  height: calc(var(--tap-min) - var(--sp-3));
  border-radius: 50%;
  border: 2px solid var(--outline);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  color: var(--accent-contrast);
}

.hp-check--on {
  background: var(--success);
  border-color: transparent;
}

.hp-markall {
  width: 100%;
  margin-top: var(--sp-3);
  background: var(--success);
  color: var(--accent-contrast);
  border-color: transparent;
  font-size: 16px;
  letter-spacing: 0.04em;
}

.hp-chiprow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.hp-pick-chip {
  min-height: var(--tap-min);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--outline);
  color: var(--text);
  font-weight: 600;
}

.hp-badge {
  flex: none;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--outline);
  border-radius: var(--radius-sm);
}

.hp-add-btn {
  width: 100%;
  margin-bottom: var(--sp-3);
  border-style: dashed;
}

/* ---------- Settings ---------- */

.hp-set-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.hp-back {
  flex: none;
}

.hp-setcard {
  margin-bottom: var(--sp-3);
}

.hp-setrow {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3) 0;
}

.hp-setrow + .hp-setrow {
  border-top: 1px solid var(--outline);
}

.hp-setlabel {
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 600;
}

.hp-target-btn {
  width: 100%;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.hp-select {
  width: 100%;
}

.hp-goal-preview {
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  padding: var(--sp-2) 0;
}

.hp-plate-row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--outline);
}

.hp-plate-controls {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.hp-plate-controls .ui-stepper {
  flex: 1 1 auto;
  min-width: 0;
}

.hp-plate-remove {
  flex: none;
  color: var(--danger);
}

.hp-export-row {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

.hp-export {
  flex: 1 1 0;
  color: var(--text);
}

.hp-note-line {
  margin-top: var(--sp-3);
  color: var(--text-dim);
  font-size: 13px;
}