/* feat-b.css — GROUP B: Health tab styles.
   Dark theme, brand red #e10600. All selectors scoped with featB- prefix.
   Load AFTER styles.css / track-styles.css. */
.featB-trial-hint {
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 12px;
}
.featB-trial-hint b { color: var(--text); }

.featB-card {
  background: var(--card, #141414);
  border: 1px solid var(--border, #262626);
  border-radius: 14px;
  padding: 16px 14px;
  margin: 0 0 16px;
}
.featB-card .section-title { margin-top: 0; }
.featB-sub {
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 14px 0 8px;
}

/* forms */
.featB-form .featB-row { display: flex; gap: 10px; margin-bottom: 10px; }
.featB-form .featB-row label { flex: 1; font-size: 12px; color: var(--muted); display: block; }
.featB-card input[type="text"], .featB-card input[type="number"],
.featB-card input[type="date"], .featB-card input[type="time"],
.featB-card select {
  width: 100%;
  margin-top: 5px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border, #2c2c2c);
  background: #1e1e1e;
  color: var(--text, #f5f5f5);
  font-size: 15px;
  box-sizing: border-box;
  color-scheme: dark;
}
.featB-card input:focus, .featB-card select:focus { outline: none; border-color: #e10600; }

/* water */
.featB-water-wrap { display: flex; flex-direction: column; align-items: center; }
.featB-ring { width: 168px; height: 168px; transform: rotate(-90deg); }
.featB-ring-bg { fill: none; stroke: #2a2a2a; stroke-width: 11; }
.featB-ring-fg {
  fill: none; stroke: #e10600; stroke-width: 11; stroke-linecap: round;
  stroke-dasharray: 339.292; stroke-dashoffset: 339.292;
  transition: stroke-dashoffset .45s ease;
}
.featB-ring-num { font-size: 26px; font-weight: 800; fill: var(--text, #f5f5f5); transform: rotate(90deg); transform-origin: center; }
.featB-ring-label { font-size: 12px; fill: var(--muted, #999); transform: rotate(90deg); transform-origin: center; }
.featB-togo { margin: 10px 0 12px; font-size: 15px; color: var(--muted); }
.featB-togo b { color: var(--text); }
.featB-water-btns { display: flex; gap: 10px; margin-bottom: 12px; }
.featB-qbtn {
  padding: 10px 20px; border-radius: 999px; font-size: 15px; font-weight: 700;
  background: #1e1e1e; color: var(--text, #f5f5f5);
  border: 1px solid var(--border, #2c2c2c); cursor: pointer;
}
.featB-qbtn:active { background: #e10600; border-color: #e10600; }
.featB-water-custom { display: flex; gap: 8px; width: 100%; margin-bottom: 10px; }
.featB-water-custom input { flex: 1; }
.featB-goal-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.featB-goal-row input { width: 74px; }

/* lists (sleep + habits) */
.featB-list { display: flex; flex-direction: column; gap: 8px; }
.featB-item {
  display: flex; align-items: center; gap: 10px;
  background: #1b1b1b; border: 1px solid var(--border, #262626);
  border-radius: 10px; padding: 10px 12px; font-size: 14px;
}
.featB-item .grow { flex: 1; min-width: 0; }
.featB-item .mut { color: var(--muted); font-size: 12px; }
.featB-stars { color: #e10600; letter-spacing: 1px; white-space: nowrap; }
.featB-empty { color: var(--muted); font-size: 14px; text-align: center; padding: 12px 0; }

/* habit rows */
.featB-check {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  border: 2px solid var(--border, #3a3a3a); background: transparent; cursor: pointer;
  color: #fff; font-size: 15px; font-weight: 800; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.featB-check.done { background: #e10600; border-color: #e10600; }
.featB-check:active { transform: scale(.94); }
.featB-streak { font-size: 12px; color: var(--muted); white-space: nowrap; }
.featB-streak b { color: #e10600; }
.featB-del {
  background: none; border: none; color: var(--muted); font-size: 18px;
  cursor: pointer; padding: 4px 6px; line-height: 1;
}
.featB-habit-add { display: flex; gap: 8px; margin-bottom: 12px; }
.featB-habit-add input { flex: 1; }

/* measurements chart */
.featB-chart { width: 100%; height: auto; display: block; background: #1b1b1b; border-radius: 10px; padding: 4px; }
.featB-chart .axis { stroke: #333; stroke-width: 1; }
.featB-chart .line { fill: none; stroke: #e10600; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.featB-chart .dot { fill: #e10600; }
.featB-chart .lbl { fill: #999; font-size: 9px; }
.featB-latest {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; color: var(--muted);
}
.featB-latest span { background: #1b1b1b; border: 1px solid var(--border, #262626); border-radius: 8px; padding: 6px 10px; }
.featB-latest b { color: var(--text); }