/* ==========================================================================
   Kadam Web — Features Design System: BMI Studio & Kadam Care Network
   Aesthetic: Luxury Health Tech, Apple HIG poise, Editorial Typography,
   Sensory tactile controls, and high-legibility clinical contrast.
   Strictly adheres to src/theme/tokens.ts and zero-overflow invariants.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Shared Showcase & Page Shell Styles
   -------------------------------------------------------------------------- */

.page-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: var(--ink);
  color: var(--text);
  overflow-x: hidden;
  box-sizing: border-box;
}

.page-hero {
  position: relative;
  padding: clamp(56px, 10vw, 104px) 0 clamp(36px, 5vw, 60px);
  background: radial-gradient(circle at 50% 0%, var(--pulse-soft) 0%, transparent 70%);
  border-bottom: var(--hair) solid var(--hairline);
  text-align: center;
}

.page-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: var(--r-pill);
  background: var(--card);
  border: var(--hair) solid var(--control-border);
  box-shadow: 0 2px 8px rgba(11, 20, 64, 0.04);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 560;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pulse-text);
  margin-bottom: 20px;
  max-width: 100%;
  box-sizing: border-box;
}

.page-hero__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pulse-line);
  /* A fixed 3px halo at a fixed opacity, not a blur of the raw accent.
     `0 0 8px var(--pulse)` renders at the accent's own lightness, so the
     lighter ivory gold bloomed wider and softer than dawn's terracotta and
     the two dots read as different sizes. Deriving the halo from the accent
     at a set strength keeps each page its own colour while making the dot
     the same object on both. */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pulse) 20%, transparent);
  flex-shrink: 0;
}

.page-hero__title {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0 auto 16px;
  max-width: 26ch;
}

.page-hero__lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--text-dim);
  max-width: 58ch;
  margin: 0 auto 28px;
}

.page-hero__metrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 18px;
  margin-top: 24px;
}

.page-hero__metric-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: var(--r-pill);
  background: var(--raised);
  border: var(--hair) solid var(--hairline);
  font-size: 13px;
  font-weight: 520;
  color: var(--text);
  max-width: 100%;
  box-sizing: border-box;
}

.page-hero__metric-pill strong {
  color: var(--pulse-text);
  font-family: var(--font-mono);
  font-weight: 600;
}

/* Three places where a short label broke mid-phrase on a phone.
 *
 * The metric pills put a mono label and its value on one row; once the pill
 * went full width the row was still too narrow, so "5 Metro / Cities" and
 * "Gated Society / Verified" split across lines while their values wrapped
 * beside them. Stacked instead: the label keeps one line, the value gets the
 * full width beneath it.
 *
 * The directory badge and the section kicker are short enough to hold a line
 * on any phone, and read as broken when they do not. */
@media (max-width: 560px) {
  .page-hero__metric-pill {
    flex-direction: column;
    gap: 3px;
    text-align: center;
    padding: 10px 16px;
  }
  .page-hero__metric-pill strong { white-space: nowrap; }
  .care-filter-badge { white-space: nowrap; }
}

/* --------------------------------------------------------------------------
   2. Dedicated BMI Studio Styles
   -------------------------------------------------------------------------- */

.bmi-studio {
  padding: clamp(32px, 5vw, 64px) 0 88px;
  position: relative;
}

.bmi-cockpit {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(20px, 3.5vw, 44px);
  align-items: start;
}

.bmi-panel {
  background: var(--card);
  border-radius: var(--r-hero);
  border: var(--hair) solid var(--hairline);
  padding: clamp(20px, 3.5vw, 36px);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  box-sizing: border-box;
  max-width: 100%;
}

.bmi-panel--glass {
  background: color-mix(in srgb, var(--card) 92%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.bmi-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: var(--hair) solid var(--divider);
}

.bmi-panel__title {
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.bmi-panel__subtitle {
  font-size: 13px;
  color: var(--text-dim);
  margin: 4px 0 0;
}

/* Segmented Control Component */
.seg-control {
  display: inline-flex;
  align-items: center;
  background: var(--raised);
  padding: 3px;
  border-radius: var(--r-pill);
  border: var(--hair) solid var(--hairline);
  gap: 3px;
  max-width: 100%;
  box-sizing: border-box;
}

/* Five options — Sedentary through Athlete — in a row that could not wrap,
   so "Athlete" sat 45px past the right edge of a 375px phone with no way to
   reach it. max-width:100% bounded the box but not its contents. Wrapping
   rather than scrolling, because an option you have to discover by dragging
   is an option most people never see. */
/* The five activity options were an inline
   `display:grid; grid-template-columns: repeat(5, 1fr)` on the element, which
   no stylesheet rule could reach. Each 1fr track takes its automatic minimum
   from its button's min-content, so at 375px the row needed 420px and
   "Athlete" sat 45px off the right edge with no way to reach it.

   minmax(0, …) lets the tracks shrink, and below 560px the row reflows to as
   many columns as fit rather than insisting on five. Wrapping rather than
   scrolling, because an option you have to discover by dragging is one most
   people never find. */
.seg-control--activity {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  text-align: center;
}

@media (max-width: 560px) {
  .seg-control { flex-wrap: wrap; justify-content: flex-start; }
  .seg-control--activity { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }
}

.seg-btn {
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 560;
  color: var(--text-dim);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--dur-snap) var(--ease-out);
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  font-family: inherit;
}

.seg-btn:hover {
  color: var(--text);
}

.seg-btn.is-active {
  background: var(--seg-on);
  color: var(--seg-on-text);
  box-shadow: 0 1px 4px rgba(11, 20, 64, 0.12);
}

/* Form Fields & Tactile Sliders */
.bmi-field-group {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.bmi-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 100%;
}

.bmi-field__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* Age and Waist sit side by side, and their sliders are read as a pair.
     "Waist (Navel)" wraps to two lines in a narrow column while "Age" stays
     on one, which made this row taller on one side and pushed that slider
     below its neighbour. A floor equal to the two-line case keeps both rows
     the same height whether the label wraps or not, so the sliders always
     start on the same line. Chosen over nowrap because forcing the label
     wide would push the value pill out of a narrow column instead. */
  min-height: 38px;
}

.bmi-field__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}

.bmi-field__val-box {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  background: var(--raised);
  padding: 4px 10px;
  border-radius: var(--r-control);
  border: var(--hair) solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.bmi-field__val-unit {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 500;
}

.bmi-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: var(--track);
  border-radius: 3px;
  outline: none;
  margin: 10px 0 6px;
  cursor: pointer;
}

.bmi-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--card);
  border: 3px solid var(--pulse-line);
  box-shadow: 0 2px 6px rgba(11, 20, 64, 0.2);
  cursor: grab;
  transition: transform var(--dur-micro) var(--ease-out);
}

.bmi-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.bmi-slider::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.22);
}

.bmi-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--card);
  border: 3px solid var(--pulse-line);
  box-shadow: 0 2px 6px rgba(11, 20, 64, 0.2);
  cursor: grab;
}

.bmi-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.bmi-preset-chip {
  background: var(--raised);
  border: var(--hair) solid var(--hairline);
  border-radius: var(--r-pill);
  padding: 3px 10px;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-dim);
  cursor: pointer;
  transition: all var(--dur-snap);
}

.bmi-preset-chip:hover {
  border-color: var(--control-border);
  color: var(--text);
  background: var(--card);
}

/* Activity Selector */
.bmi-activity-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: 100%;
  gap: 3px;
}

@media (max-width: 540px) {
  .bmi-activity-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
  }
}

/* Semi-circular Dial & Gauge Visuals */
.bmi-gauge-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.bmi-dial-container {
  position: relative;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  text-align: center;
}

.bmi-dial-svg {
  width: 100%;
  height: auto;
  overflow: visible;
  display: block;
}

.bmi-dial-needle {
  transform-origin: 160px 145px;
  transform-box: view-box;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bmi-readout-center {
  margin-top: -18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.bmi-big-num {
  font-family: var(--font-mono);
  font-size: clamp(2.8rem, 5.5vw, 4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--text);
}

/* Status Badge Pills - Strict Token Colors */
.bmi-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border: var(--hair) solid transparent;
  max-width: 100%;
  box-sizing: border-box;
  text-align: center;
}

.bmi-badge-pill.is-normal {
  background: rgba(13, 138, 94, 0.12);
  color: #0D8A5E;
  border-color: rgba(13, 138, 94, 0.28);
}

.bmi-badge-pill.is-overweight {
  background: rgba(224, 166, 60, 0.14);
  color: #8A5A0E;
  border-color: rgba(138, 90, 14, 0.32);
}

.bmi-badge-pill.is-obese {
  background: rgba(190, 82, 56, 0.12);
  color: #BE5238;
  border-color: rgba(190, 82, 56, 0.28);
}

.bmi-badge-pill.is-underweight {
  background: rgba(111, 95, 148, 0.12);
  color: #6F5F94;
  border-color: rgba(111, 95, 148, 0.28);
}

/* South Asian Divergence Alert Card */
.bmi-divergence-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--r-card-sm);
  border: var(--hair) solid var(--pulse-soft-border);
  background: var(--pulse-soft);
  transition: all var(--dur-control);
}

.bmi-divergence-card.is-divergent {
  background: rgba(224, 166, 60, 0.14);
  border-color: rgba(138, 90, 14, 0.35);
}

.bmi-divergence-card.is-normal {
  background: rgba(13, 138, 94, 0.08);
  border-color: rgba(13, 138, 94, 0.24);
}

.bmi-divergence-card.is-obese {
  background: rgba(190, 82, 56, 0.1);
  border-color: rgba(190, 82, 56, 0.28);
}

.bmi-divergence-card.is-underweight {
  background: rgba(111, 95, 148, 0.1);
  border-color: rgba(111, 95, 148, 0.25);
}

.bmi-divergence-icon {
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1.2;
}

.bmi-divergence-title {
  font-size: 13px;
  font-weight: 650;
  color: var(--text);
  margin: 0 0 4px;
}

.bmi-divergence-text {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
  margin: 0;
}

/* Comparison Matrix: ICMR vs WHO */
.bmi-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.bmi-compare-box {
  background: var(--raised);
  border: var(--hair) solid var(--hairline);
  border-radius: var(--r-card-sm);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bmi-compare-box__label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}

.bmi-compare-box__value {
  font-size: 14px;
  font-weight: 650;
  color: var(--text);
}

.bmi-compare-box__sub {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}

/* Secondary Biomarkers Board */
.bmi-biomarkers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}

.bmi-bio-card {
  background: var(--raised);
  border-radius: var(--r-card-sm);
  border: var(--hair) solid var(--hairline);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-sizing: border-box;
}

.bmi-bio-card__label {
  font-size: 11px;
  font-weight: 540;
  color: var(--text-dim);
}

.bmi-bio-card__val {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 650;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bmi-bio-card__note {
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 2px;
}

/* Action Utilities Bar */
.bmi-actions-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: var(--hair) solid var(--divider);
}

.bmi-action-btn {
  flex: 1 1 160px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--r-control);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--dur-control);
  font-family: inherit;
  border: var(--hair) solid transparent;
}

.bmi-action-btn--primary {
  background: var(--text);
  color: var(--ink);
}

.bmi-action-btn--primary:hover {
  background: color-mix(in srgb, var(--text) 88%, #000);
}

.bmi-action-btn--ghost {
  background: var(--raised);
  color: var(--text);
  border-color: var(--control-border);
}

.bmi-action-btn--ghost:hover {
  background: var(--card);
}

/* Clinical Comparison Table */
.clinical-table-wrap {
  margin-top: 48px;
  background: var(--card);
  border-radius: var(--r-card);
  border: var(--hair) solid var(--hairline);
  overflow-x: auto;
  box-shadow: var(--shadow-card);
}

.clinical-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 13px;
  min-width: 600px;
}

.clinical-table th {
  padding: 14px 18px;
  font-weight: 600;
  color: var(--text);
  background: var(--raised);
  border-bottom: var(--hair) solid var(--divider);
}

.clinical-table td {
  padding: 14px 18px;
  border-bottom: var(--hair) solid var(--divider);
  color: var(--text-dim);
}

.clinical-table tr:last-child td {
  border-bottom: none;
}

.clinical-table .row--normal {
  background: rgba(13, 138, 94, 0.05);
  color: #0D8A5E;
}

.clinical-table .row--overweight {
  background: rgba(224, 166, 60, 0.06);
  color: #8A5A0E;
}

.clinical-table .row--obese {
  background: rgba(190, 82, 56, 0.05);
  color: #BE5238;
}

/* --------------------------------------------------------------------------
   3. Dedicated Kadam Care Network Styles
   -------------------------------------------------------------------------- */

.care-hub {
  padding: clamp(32px, 5vw, 64px) 0 88px;
  position: relative;
}

/* Unified Care Operations Toolbar */
.care-filter-bar {
  background: var(--card);
  border-radius: var(--r-hero);
  border: var(--hair) solid var(--hairline);
  padding: clamp(20px, 3vw, 28px);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 36px;
  box-sizing: border-box;
}

.care-filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: var(--hair) solid var(--divider);
}

.care-filter-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: -0.015em;
}

.care-filter-sub {
  font-size: 13px;
  color: var(--text-dim);
  margin: 4px 0 0;
  line-height: 1.4;
}

.care-filter-badge {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--pulse-soft);
  color: var(--pulse-text);
  border: var(--hair) solid var(--pulse-soft-border);
  letter-spacing: 0.04em;
}

.care-btn-register {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--r-pill);
  background: var(--text);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all var(--dur-control) var(--ease-out);
  font-family: inherit;
  white-space: nowrap;
}

/* "+ Register a Patient from your Society" is 272px of unbreakable text, and
   the empty state adds 56px of padding around it — 330px in a 320px phone.
   Since the empty state is what a visitor sees before anything else exists on
   this page, it is the worst thing to have hanging off the edge. The button
   keeps nowrap where there is room and is allowed to break where there is
   not. */
@media (max-width: 420px) {
  .care-empty { padding-inline: 18px; }
  .care-btn-register { white-space: normal; }
}

.care-btn-register:hover {
  background: color-mix(in srgb, var(--text) 88%, #000);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(11, 20, 64, 0.14);
}

.care-city-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.care-bar-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  flex-shrink: 0;
}

.care-cities-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  background: var(--raised);
  padding: 4px;
  border-radius: var(--r-pill);
  border: var(--hair) solid var(--hairline);
}

.care-city-pill {
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: transparent;
  border: none;
  font-size: 12px;
  font-weight: 560;
  color: var(--text-dim);
  cursor: pointer;
  transition: all var(--dur-snap) var(--ease-out);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
}

.care-city-pill:hover {
  color: var(--text);
}

.care-city-pill.is-active {
  background: var(--card);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(11, 20, 64, 0.08);
  font-weight: 640;
}

.care-city-pill__count {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--track);
  color: var(--text-dim);
}

.care-city-pill.is-active .care-city-pill__count {
  background: var(--pulse-soft);
  color: var(--pulse-text);
}

.care-filter-controls {
  display: grid;
  grid-template-columns: minmax(240px, 340px) 1fr;
  gap: 16px;
  align-items: center;
}

.care-search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--raised);
  padding: 9px 14px;
  border-radius: var(--r-control);
  border: var(--hair) solid var(--control-border);
  width: 100%;
  box-sizing: border-box;
  transition: border-color var(--dur-micro), background var(--dur-micro);
}

.care-search-box:focus-within {
  border-color: var(--pulse-line);
  background: var(--card);
  box-shadow: 0 0 0 3px var(--pulse-soft);
}

.care-search-input {
  background: transparent;
  border: none;
  outline: none;
  font-size: 13px;
  color: var(--text);
  width: 100%;
  font-family: inherit;
}

.care-search-input::placeholder {
  color: var(--text-dim);
}

.care-type-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.care-type-chip {
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--raised);
  border: var(--hair) solid var(--hairline);
  font-size: 12px;
  font-weight: 540;
  color: var(--text-dim);
  cursor: pointer;
  transition: all var(--dur-snap) var(--ease-out);
  font-family: inherit;
}

.care-type-chip:hover {
  color: var(--text);
  border-color: var(--control-border);
}

.care-type-chip.is-active {
  background: var(--card);
  color: var(--pulse-text);
  border-color: var(--pulse-line);
  box-shadow: 0 1px 4px rgba(11, 20, 64, 0.08);
  font-weight: 620;
}

.care-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.care-type-chip__count {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--track);
  color: var(--text-dim);
}

.care-type-chip.is-active .care-type-chip__count {
  background: var(--pulse-soft);
  color: var(--pulse-text);
}

/*
 * With no listings there are no chips and no search, so the toolbar collapses
 * to its header alone — the gap below the title would otherwise read as a row
 * of controls that failed to load.
 */
/* Once the header stacks, the CTA sits under a left-set title; hard left it
   read as unfinished rather than deliberate. Centred below 700px, which is
   where the stack happens. */
@media (max-width: 700px) {
  .care-filter-header { align-items: center; }
  .care-filter-header .care-btn-register { margin-inline: auto; }
}

.care-filter-bar.is-empty {
  gap: 0;
}

/* Empty states — an unlisted directory, and a filter that matched nothing */
.care-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: clamp(40px, 7vw, 72px) 28px;
  background: var(--card);
  border-radius: var(--r-hero);
  border: var(--hair) solid var(--hairline);
}

.care-empty__icon {
  font-size: 34px;
  margin-bottom: 14px;
  line-height: 1;
}

.care-empty__title {
  font-size: 19px;
  font-weight: 650;
  margin: 0 0 10px;
  color: var(--text);
}

.care-empty__body {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 52ch;
  margin: 0 auto 22px;
}

/* Patient Card Grid */
.care-grid {
  display: grid;
  /* min(340px, 100%), not 340px. A bare minmax floor is a hard minimum, so on
     a 320px phone the track stayed 340px and the card — or the empty state —
     hung 28px off the right edge. The min() lets the floor collapse to the
     container when the container is the smaller of the two. */
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: clamp(18px, 3vw, 28px);
}

/* Refined Patient Card */
.care-card {
  background: var(--card);
  border-radius: var(--r-card);
  border: var(--hair) solid var(--hairline);
  padding: 24px;
  box-shadow: 0 4px 20px rgba(11, 20, 64, 0.06);
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  transition: transform var(--dur-control) var(--ease-out), box-shadow var(--dur-control) var(--ease-out), border-color var(--dur-control);
  box-sizing: border-box;
}

.care-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(11, 20, 64, 0.12);
  border-color: var(--control-border);
}

/* Header: Avatar, Name, Location & Status */
.care-card__header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.care-card__avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.care-card__avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--card), var(--raised));
  border: 2px solid var(--pulse-line);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(11, 20, 64, 0.08);
}

.care-card__verified {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #0D8A5E;
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--card);
}

.care-card__info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.care-card__name-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.care-card__name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.care-card__age-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  background: var(--raised);
  padding: 1px 7px;
  border-radius: var(--r-pill);
}

.care-card__location {
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.35;
}

.care-card__meta-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* Care Category Tag */
.care-category-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
}

.care-category-tag--chemo {
  background: rgba(190, 82, 56, 0.08);
  color: #BE5238;
  border: var(--hair) solid rgba(190, 82, 56, 0.22);
}

.care-category-tag--dialysis {
  background: rgba(111, 95, 148, 0.1);
  color: #6F5F94;
  border: var(--hair) solid rgba(111, 95, 148, 0.22);
}

.care-category-tag--checkin {
  background: rgba(13, 138, 94, 0.08);
  color: #0D8A5E;
  border: var(--hair) solid rgba(13, 138, 94, 0.22);
}

/* Status Indicator */
.care-card__status {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  letter-spacing: 0.03em;
}

.care-card__status.is-avail {
  background: rgba(13, 138, 94, 0.08);
  color: #0D8A5E;
  border: var(--hair) solid rgba(13, 138, 94, 0.25);
}

.care-card__status.is-booked {
  background: var(--raised);
  color: var(--text-dim);
  border: var(--hair) solid var(--control-border);
}

/* Journey & Transit Box */
.care-card__journey {
  background: var(--raised);
  border-radius: var(--r-card-sm);
  border: var(--hair) solid var(--hairline);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.care-card__journey-time {
  font-size: 12.5px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 6px;
  border-bottom: var(--hair) solid var(--divider);
}

.care-journey-cal {
  font-size: 14px;
}

.care-card__journey-route {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  font-size: 12px;
}

.care-route-node {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.care-route-marker {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}

.care-route-marker--gate {
  background: var(--pulse-line);
  box-shadow: 0 0 0 2px var(--pulse-soft);
}

.care-route-marker--hosp {
  background: #0D8A5E;
  box-shadow: 0 0 0 2px rgba(13, 138, 94, 0.2);
}

.care-route-line {
  position: absolute;
  left: 3px;
  top: 12px;
  bottom: 10px;
  width: 1px;
  background: var(--divider);
}

.care-route-name {
  color: var(--text);
  line-height: 1.35;
}

.care-route-name b {
  color: var(--text-dim);
  font-weight: 600;
}

/* Human Story & Conversation Starter */
.care-card__story {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.care-card__bio {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  margin: 0;
  font-style: italic;
}

.care-card__topics-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.care-topic-chip {
  background: var(--raised);
  border: var(--hair) solid var(--hairline);
  border-radius: var(--r-pill);
  padding: 3px 9px;
  font-size: 11.5px;
  color: var(--text);
  font-weight: 520;
}

.care-card__note {
  font-size: 11.5px;
  color: var(--text-dim);
  display: flex;
  align-items: baseline;
  gap: 6px;
  background: rgba(190, 82, 56, 0.04);
  padding: 6px 10px;
  border-radius: var(--r-control);
  border: var(--hair) solid rgba(190, 82, 56, 0.14);
}

.care-card__note b {
  color: #BE5238;
}

.care-note-icon {
  font-size: 12px;
  flex-shrink: 0;
}

/* Footer: Recreation & Action */
.care-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: var(--hair) solid var(--divider);
  margin-top: auto;
  flex-wrap: wrap;
}

.care-card__activity {
  display: flex;
  align-items: center;
  gap: 6px;
}

.care-act-kicker {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}

.care-act-pill {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--pulse-text);
  background: var(--pulse-soft);
  padding: 3px 8px;
  border-radius: var(--r-pill);
  border: var(--hair) solid var(--pulse-soft-border);
}

.care-card__action-btn-wrap {
  flex: 1 1 160px;
}

.care-btn-volunteer {
  width: 100%;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: var(--text);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 650;
  border: none;
  cursor: pointer;
  transition: all var(--dur-control) var(--ease-out);
  font-family: inherit;
  text-align: center;
  white-space: nowrap;
}

.care-btn-volunteer:hover:not(:disabled) {
  background: color-mix(in srgb, var(--text) 88%, #000);
  box-shadow: 0 4px 14px rgba(11, 20, 64, 0.16);
  transform: translateY(-1px);
}

.care-btn-volunteer.is-booked,
.care-btn-volunteer:disabled {
  background: var(--raised);
  color: var(--text-dim);
  cursor: not-allowed;
  border: var(--hair) solid var(--hairline);
  box-shadow: none;
  transform: none;
}

/* --------------------------------------------------------------------------
   4. Landing Page Teaser Showcase Cards (for index.html)
   -------------------------------------------------------------------------- */

.feature-showcase-section {
  padding: clamp(56px, 9vw, 96px) 0;
  position: relative;
  background: var(--ink);
}

.feature-showcase-card {
  background: var(--card);
  border-radius: var(--r-hero);
  border: var(--hair) solid var(--hairline);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  margin-bottom: 40px;
}

.feature-showcase-card--reverse {
  grid-template-columns: 1fr 1.1fr;
}

.feature-showcase-card__content {
  padding: clamp(28px, 5vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.feature-showcase-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pulse-text);
}

.feature-showcase-card__title {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
}

.feature-showcase-card__desc {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--text-dim);
  margin: 0;
}

.feature-showcase-card__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.feature-showcase-card__pill {
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: var(--raised);
  font-size: 12px;
  font-weight: 540;
  color: var(--text);
}

.feature-showcase-card__visual {
  background: var(--raised);
  border-left: var(--hair) solid var(--divider);
  padding: clamp(28px, 5vw, 48px);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 380px;
  box-sizing: border-box;
}

.feature-showcase-card--reverse .feature-showcase-card__visual {
  border-left: none;
  border-right: var(--hair) solid var(--divider);
}

/* Teaser Previews */
.teaser-dial-preview {
  background: var(--card);
  border-radius: var(--r-card);
  border: var(--hair) solid var(--hairline);
  padding: 28px 24px;
  box-shadow: 0 8px 20px rgba(11, 20, 64, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 320px;
  width: 100%;
  box-sizing: border-box;
}

.teaser-care-preview {
  background: var(--card);
  border-radius: var(--r-card);
  border: var(--hair) solid var(--hairline);
  padding: 24px;
  box-shadow: 0 8px 20px rgba(11, 20, 64, 0.08);
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 340px;
  width: 100%;
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   5. Modals & Dialog Windows
   -------------------------------------------------------------------------- */

.care-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(18, 16, 42, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.care-modal-backdrop.is-open {
  display: flex;
}

.care-modal-box {
  background: var(--card);
  border-radius: var(--r-hero);
  border: var(--hair) solid var(--hairline);
  box-shadow: 0 24px 64px rgba(11, 20, 64, 0.28);
  max-width: 540px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: clamp(24px, 4vw, 36px);
  position: relative;
  box-sizing: border-box;
}

.care-modal-box--wide {
  max-width: 620px;
}

.care-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--raised);
  border: var(--hair) solid var(--hairline);
  color: var(--text-dim);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--dur-snap);
  z-index: 10;
}

.care-modal-close:hover {
  color: var(--text);
  background: var(--sheet);
}

/* Modal Form Styles */
.modal-care-header {
  margin-bottom: 20px;
}

.modal-care-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--pulse-soft);
  color: var(--pulse-text);
  border: var(--hair) solid var(--pulse-soft-border);
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.modal-care-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 6px;
  letter-spacing: -0.015em;
}

.modal-care-sub {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-dim);
  margin: 0;
}

/* Patient Summary Capsule */
.modal-patient-summary {
  background: var(--raised);
  border-radius: var(--r-card-sm);
  border: var(--hair) solid var(--hairline);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.modal-summary-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.modal-summary-icon {
  font-size: 14px;
  margin-top: 1px;
}

.modal-summary-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
}

.modal-summary-val {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  margin-top: 2px;
}

/* Form Container & Section Cards */
.care-modal-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-section-card {
  background: var(--raised);
  border-radius: var(--r-card-sm);
  border: var(--hair) solid var(--hairline);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-section-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pulse-text);
  padding-bottom: 6px;
  border-bottom: var(--hair) solid var(--divider);
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-row-2-nested {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 10px;
}

@media (max-width: 580px) {
  .form-row-2 {
    grid-template-columns: 1fr;
  }
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--r-control);
  border: var(--hair) solid var(--control-border);
  background: var(--card);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  transition: border-color var(--dur-micro), box-shadow var(--dur-micro);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--pulse-line);
  box-shadow: 0 0 0 3px var(--pulse-soft);
}

/* Interactive Activity Picker */
.activity-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 4px;
}

@media (max-width: 500px) {
  .activity-picker-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.activity-picker-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--r-control);
  background: var(--card);
  border: var(--hair) solid var(--control-border);
  color: var(--text);
  font-size: 12px;
  font-weight: 560;
  cursor: pointer;
  transition: all var(--dur-snap) var(--ease-out);
  font-family: inherit;
}

.activity-picker-chip:hover {
  border-color: var(--pulse-line);
}

.activity-picker-chip.is-active {
  background: var(--pulse-soft);
  border-color: var(--pulse-line);
  color: var(--pulse-text);
  box-shadow: 0 1px 4px rgba(11, 20, 64, 0.08);
}

.act-chip-icon {
  font-size: 14px;
}

/* Security Pledge Card */
.security-pledge-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(13, 138, 94, 0.05);
  border: var(--hair) solid rgba(13, 138, 94, 0.2);
  padding: 12px 14px;
  border-radius: var(--r-control);
  margin-top: 4px;
}

.pledge-label {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text);
}

.pledge-label strong {
  color: #0D8A5E;
}

.form-checkbox {
  margin-top: 3px;
  accent-color: #0D8A5E;
}

/* Submit CTA */
.care-btn-submit {
  width: 100%;
  padding: 13px 20px;
  border-radius: var(--r-pill);
  background: var(--text);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 650;
  border: none;
  cursor: pointer;
  transition: all var(--dur-control) var(--ease-out);
  font-family: inherit;
  margin-top: 8px;
}

.care-btn-submit:hover {
  background: color-mix(in srgb, var(--text) 88%, #000);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(11, 20, 64, 0.18);
}

/* Digital Pass Presentation */
.guardian-pass-view {
  background: var(--raised);
  border: var(--hair) dashed var(--pulse-line);
  border-radius: var(--r-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  white-space: pre-wrap;
  -webkit-user-select: all;
  user-select: all;
  margin: 16px 0;
  box-sizing: border-box;
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   6. Responsive Rules & Zero-Overflow Invariants
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .bmi-cockpit {
    /* minmax(0, 1fr), not 1fr. A 1fr track takes its automatic minimum from
       the min-content of its widest item, so the input panel — whose fields
       would not shrink past 427px — held the track at 427px inside a 338px
       grid. Everything in the panel was then laid out 90px wider than the
       phone and clipped: the readouts, the preset chips and the activity
       row all lost their right-hand end. minmax(0, …) lets the track shrink
       to its container and hands the overflow problem back to the content,
       which is where it can actually be solved. */
    grid-template-columns: minmax(0, 1fr);
  }
  .feature-showcase-card,
  .feature-showcase-card--reverse {
    grid-template-columns: 1fr;
  }
  .feature-showcase-card__visual {
    border-left: none;
    border-right: none;
    border-top: var(--hair) solid var(--divider);
    min-height: auto;
  }
}
/* ^ This closing brace was missing.

   Without it the 900px query swallowed every rule that follows — the 860px and
   600px queries became nested inside it, and, more damagingly, any rule appended
   to the end of this file silently became a max-width: 900px rule. That is a
   trap rather than a bug you can see: the stylesheet still parses, the desktop
   view just quietly ignores whatever was added last. */

@media (max-width: 860px) {
  .care-filter-controls {
    grid-template-columns: 1fr;
  }
  .care-type-filters {
    justify-content: flex-start;
  }
}

@media (max-width: 600px) {
  .care-grid {
    grid-template-columns: 1fr;
  }
  .care-search-box {
    width: 100%;
    max-width: 100%;
    flex: 1 1 100%;
  }
  .bmi-compare-grid {
    grid-template-columns: 1fr;
  }
  .page-hero__metrics {
    flex-direction: column;
    align-items: center;
  }
  .page-hero__metric-pill {
    width: 100%;
    justify-content: center;
  }
}

/* ------------------------------------------------------------------
   Withdraw a listing
   ------------------------------------------------------------------
   Deliberately quiet, and deliberately present.

   It sits in the same row as "Volunteer as Guardian" but reads as a link
   rather than a button, because it is the rarer action and its neighbour is
   the one the page is asking for. It is not hidden behind a menu, though: a
   family taking a relative's diagnosis and home address back off a public
   directory should not have to hunt for the control, and until this shipped
   there was no control to hunt for. Shown only on listings this browser holds
   the manage token for. */
.care-btn-withdraw {
  flex: 0 0 auto;
  padding: 10px 4px;
  margin-right: 12px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color var(--dur-2) var(--ease-out);
}

.care-btn-withdraw:hover:not(:disabled) {
  color: var(--pulse-text);
}

.care-btn-withdraw:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* The wrapper held one button and so needed no layout of its own. It holds two
   on listings the visitor can manage, so it becomes a row. Appended rather than
   edited in place to keep the original rule and its intent readable. */
.care-card__action-btn-wrap {
  display: flex;
  align-items: center;
}