/*
 * NDD Design System
 * Tokens + component classes for the entire site.
 * Loaded globally via header_files.php — before global.css.
 * Visual reference: styleguide.php
 * Claude reference: claude/design_system.md
 */

/* ─────────────────────────────────────────────────────────────────────────────
   DESIGN TOKENS — single source of truth for the entire site.
   Change a value here and every component that references it updates everywhere.
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  /* Typography — Inter loaded globally via header_files.php */
  --font:          'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bs-font-sans-serif: var(--font);
  --bs-body-font-family: var(--font);

  /* Brand purple */
  --brand:         #865EBF;
  --brand_dark:    #6a46a3;
  --brand_deep:    #1a1040;
  --brand_soft:    #f3e8ff;
  --brand_hover:   #d8c6ee;

  /* Text */
  --ink:           #1a1a2e;
  --muted:         #6b7280;

  /* Surfaces & borders */
  --surface:       #ffffff;
  /* the panel-body grey every mchat_messages uses. It was already referenced as
     var(--surface-subtle, #f8f8f8) in global.css but had never been defined, so the fallback always fired
     and the token was decorative. Defining it changes nothing visually and makes it real. */
  --surface_subtle: #f8f8f8;
  --page:          #f7f7fb;
  --line:          #e5e7eb;

  /* Semantic — green */
  --green:         #1c9d57;
  --green_soft:    #ecfdf3;
  /* text on --green_soft, or green label text on white. --green is about 3.3:1 on its own soft fill
     and fails AA, the same gap blue, gold, teal and danger each already had an _ink for. This value was
     already hardcoded in .alert_ndd_success, so the token retires that literal rather than adding one. */
  --green_ink:     #145c35;

  /* Semantic — blue */
  --blue:          #2f6fed;
  --blue_soft:     #eef4ff;
  --blue_ink:      #1d4ed8;
  --blue_deep:     #1b2f5e;

  /* Semantic — gold / warning */
  --gold:          #f5a623;
  --gold_soft:     #fff7e8;
  --gold_ink:      #9a6a05;

  /* Semantic — danger */
  --danger:        #ef4444;
  --danger_soft:   #fff1f2;
  /* blue, gold and teal each had an _ink for text on their own soft fill; danger did not, so red label text
     on --danger_soft had nothing to take and sat at about 3.4:1. This is 5.9:1 there and 6.5:1 on white. */
  --danger_ink:    #b91c1c;

  /* Semantic — teal (live / in-progress right now) */
  --teal:          #0d9488;
  --teal_soft:     #f0fdfa;
  --teal_ink:      #0b6d64;
  --teal_deep:     #0b3f3a;

  /* Longitudinal patient chart — intentionally distinct from purple encounter charts */
  --patient_chart:      #176c72;
  --patient_chart_dark: #11585d;
  --patient_chart_soft: #e7f2f2;

  /* Shadows */
  --shadow:        0 20px 60px rgba(26,16,64,0.12);
  --shadow_small:  0 8px 24px rgba(15,23,42,0.08);
  --shadow_xs:     0 1px 3px rgba(15,23,42,0.06);

  /* Border radii */
  --radius_sm:     4px;
  --radius:        8px;
  --radius_lg:     12px;
  --radius_pill:   999px;

  /* Layout */
  --max:           1180px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   NDD DESIGN SYSTEM COMPONENTS
   All use CSS variables from the :root token block above.
   New UI should use these classes. Legacy Bootstrap classes remain valid
   during the transition — these are additive, not replacements.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn_ndd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--font);
  font-weight: 600;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, border-color 0.15s, transform 0.15s;
  text-decoration: none;
  white-space: nowrap;
}
.btn_ndd_sm  { font-size: 0.78rem;  padding: 6px 14px;  min-height: 32px; }
.btn_ndd_md  { font-size: 0.875rem; padding: 9px 20px;  min-height: 40px; }
.btn_ndd_lg  { font-size: 1rem;     padding: 12px 28px; min-height: 50px; }

.btn_ndd_primary { background: var(--brand); color: #fff; box-shadow: 0 4px 14px rgba(134,94,191,0.3); }
.btn_ndd_primary:hover { background: var(--brand_dark); color: #fff; box-shadow: 0 6px 20px rgba(134,94,191,0.4); transform: translateY(-1px); }

.btn_ndd_secondary { background: var(--surface); color: var(--ink); border: 1.5px solid var(--line); }
.btn_ndd_secondary:hover { border-color: var(--brand_hover); color: var(--brand); background: #fdfbff; }

.btn_ndd_ghost { background: var(--brand_soft); color: var(--brand); border: 1.5px solid #e0cefc; }
.btn_ndd_ghost:hover { background: #ece0fe; border-color: #c9adee; }

.btn_ndd_danger { background: var(--danger); color: #fff; box-shadow: 0 4px 12px rgba(239,68,68,0.25); }
.btn_ndd_danger:hover { background: #dc2626; color: #fff; }

.btn_ndd_dark { background: var(--brand_deep); color: #fff; }
.btn_ndd_dark:hover { background: #2a1d54; color: #fff; }

.btn_ndd:disabled,
.btn_ndd.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  pointer-events: none;
}


/* ── Inputs ──────────────────────────────────────────────────────────────── */
.input_ndd {
  width: 100%;
  font-family: var(--font);
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 14px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  min-height: 44px;
}
.input_ndd::placeholder { color: var(--muted); opacity: 0.7; }
.input_ndd:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(134,94,191,0.12); }
.input_ndd.input_error   { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(239,68,68,0.1); }
.input_ndd.input_success { border-color: var(--green);  box-shadow: 0 0 0 3px rgba(28,157,87,0.1); }
.input_ndd:disabled { opacity: 0.5; cursor: not-allowed; }

.input_group_ndd { position: relative; }
.input_group_ndd .input_icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 0.95rem;
  pointer-events: none;
}
.input_group_ndd .input_ndd { padding-left: 38px; }

.input_label     { display: block; font-size: 0.8rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.input_hint      { font-size: 0.75rem; color: var(--muted); margin-top: 5px; }
.input_error_msg { font-size: 0.75rem; color: var(--danger); margin-top: 5px; }

.select_ndd {
  width: 100%;
  font-family: var(--font);
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%236b7280' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") no-repeat right 14px center;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 38px 10px 14px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  min-height: 44px;
  cursor: pointer;
}
.select_ndd:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(134,94,191,0.12); }

.checkbox_ndd { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; user-select: none; }
/* the radio belongs here too: the two check-in review options are radios inside this label, and only the
   checkbox was hidden, so the native control sat beside the custom box. The checked-state rules below are
   already typeless (input:checked), so they drive either one. */
.checkbox_ndd input[type='checkbox'],
.checkbox_ndd input[type='radio'] { display: none; }
.checkbox_ndd_box {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 2px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.checkbox_ndd:hover .checkbox_ndd_box { border-color: var(--brand); background: var(--brand_soft); }
.checkbox_ndd input:checked ~ .checkbox_ndd_box { background: var(--brand); border-color: var(--brand); }
.checkbox_ndd input:checked ~ .checkbox_ndd_box::after {
  content: '';
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translate(-1px, -1px);
  display: block;
}
.checkbox_ndd_label { font-size: 0.875rem; color: var(--ink); line-height: 1.4; }
.checkbox_ndd_sub   { font-size: 0.78rem; color: var(--muted); margin-top: 1px; }


/* ── Cards ───────────────────────────────────────────────────────────────── */
.card_ndd {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius_lg);
  padding: 20px;
  box-shadow: var(--shadow_xs);
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
}
.card_ndd:hover { box-shadow: var(--shadow_small); border-color: #e0cefc; transform: translateY(-2px); }
.card_ndd_title { font-size: 0.95rem; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.card_ndd_sub   { font-size: 0.8rem; color: var(--muted); }

/* static display card, not itself clickable — cancel the default card_ndd hover lift */
.establish_care_visit_block:hover { box-shadow: var(--shadow_xs); border-color: var(--line); border-left-color: var(--brand); transform: none; }

.card_ndd_dark {
  background: var(--brand_deep);
  border-radius: var(--radius_lg);
  padding: 20px;
  color: rgba(255,255,255,0.9);
}
.card_ndd_dark .card_ndd_title { color: #fff; }
.card_ndd_dark .card_ndd_sub   { color: rgba(255,255,255,0.5); }

.card_ndd_brand {
  background: linear-gradient(135deg, #865EBF 0%, #6a46a3 100%);
  border-radius: var(--radius_lg);
  padding: 20px;
  color: #fff;
  box-shadow: 0 8px 28px rgba(134,94,191,0.35);
}
/* the gradient sets color on the container only, so card_ndd_title/card_ndd_sub kept their default dark ink
   and grey and rendered near-invisible on the purple. card_ndd_dark already carried these two overrides. */
.card_ndd_brand .card_ndd_title { color: #fff; }
.card_ndd_brand .card_ndd_sub   { color: rgba(255,255,255,0.75); }

/* Brand-outlined card — white surface, brand border. For dense informational headers where the filled
   gradient is too heavy to read against, and anywhere body copy must stay at full ink contrast. */
.card_ndd_brand_outline {
  background: var(--surface);
  border: 1.5px solid var(--brand);
  border-radius: var(--radius_lg);
  padding: 20px;
}
.card_ndd_brand_outline .card_ndd_title { color: var(--brand); }
.card_ndd_brand_outline .card_ndd_sub   { color: var(--ink); }


/* ── Selection tiles ─────────────────────────────────────────────────────── */
.tile_ndd {
  border: 2px solid var(--line);
  border-radius: var(--radius_lg);
  padding: 16px 14px;
  background: #fdfcff;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  text-align: center;
  user-select: none;
}
.tile_ndd:hover { border-color: var(--brand_hover); box-shadow: 0 4px 14px rgba(134,94,191,0.1); }
.tile_ndd.selected {
  background: var(--brand_soft);
  border: 2px solid var(--brand);
  color: var(--brand);
}
.tile_ndd .tile_primary           { font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.tile_ndd .tile_secondary         { font-size: 0.75rem; color: var(--muted); margin-top: 3px; }
.tile_ndd.selected .tile_primary  { color: var(--brand); font-weight: 700; }
.tile_ndd.selected .tile_secondary { color: var(--brand); opacity: 0.75; }


/* ── Segmented control ───────────────────────────────────── */
/* Equal-width mutually exclusive modes. Each option is its own bordered control rather than
   segments inside an enclosing track — a wrapper would be a box drawn around boxes. Selection
   uses the standard tap-to-select state (brand_soft + brand border), matching tile_ndd.selected. */
.segmented_ndd {
  display: flex;
  gap: 8px;
  user-select: none;
}
.segmented_ndd_option {
  flex: 1 1 0;
  padding: 8px 10px;
  border: 2px solid var(--line);
  border-radius: var(--radius_pill);
  background: var(--surface);
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.segmented_ndd_option:hover { border-color: var(--brand_hover); color: var(--ink); }
.segmented_ndd_option.selected {
  background: var(--brand_soft);
  border: 2px solid var(--brand);
  color: var(--brand);
  font-weight: 700;
}


/* ── Badges & pills ──────────────────────────────────────────────────────── */
.badge_ndd {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--radius_pill);
  white-space: nowrap;
}
.badge_brand  { background: var(--brand_soft); color: var(--brand); border: 1px solid #e0cefc; }
.badge_green  { background: var(--green_soft); color: var(--green); border: 1px solid #a7f3c7; }
.badge_blue   { background: var(--blue_soft);  color: var(--blue);  border: 1px solid #bcd3fa; }
.badge_gold   { background: var(--gold_soft);  color: #b25e00;      border: 1px solid #fbd96e; }
.badge_danger { background: var(--danger_soft); color: var(--danger); border: 1px solid #fca5a5; }
.badge_dark   { background: var(--brand_deep); color: rgba(255,255,255,0.85); }
.badge_muted  { background: #f3f4f6; color: var(--muted); border: 1px solid var(--line); }


/* ── Alerts ──────────────────────────────────────────────────────────────── */
.alert_ndd {
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 0.85rem;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.alert_ndd .bi { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.alert_ndd_success { background: var(--green_soft);  color: var(--green_ink); border: 1px solid #a7f3c7; }
.alert_ndd_danger  { background: var(--danger_soft); color: #b91c1c; border: 1px solid #fca5a5; }
.alert_ndd_gold    { background: var(--gold_soft);   color: #7a5b00; border: 1px solid #fbd96e; }
.alert_ndd_blue    { background: var(--blue_soft);   color: #1e40af; border: 1px solid #bcd3fa; }
.alert_ndd_purple  { background: var(--brand_soft);  color: #5b21b6; border: 1px solid #e0cefc; }


/* ── Loading spinner ─────────────────────────────────────────────────────── */
.spinner_ndd {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2.5px solid rgba(134,94,191,0.2);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spinner_ndd_spin 0.6s linear infinite;
  flex-shrink: 0;
}
.spinner_ndd_lg { width: 36px; height: 36px; border-width: 3.5px; }
.spinner_ndd_white { border-color: rgba(255,255,255,0.25); border-top-color: #fff; }
@keyframes spinner_ndd_spin { to { transform: rotate(360deg); } }


/* ── Skeleton loader ─────────────────────────────────────────────────────── */
.skeleton_ndd {
  background: #ede8f5;
  border-radius: 6px;
  animation: skeleton_ndd_pulse 1.5s ease-in-out infinite;
}
@keyframes skeleton_ndd_pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}


/* ── Promo codes (promo_code_engine.md Phase 2) ──────────────────────────── */

/* all-caps section label used inside side panels — "ENTER A CODE" / "YOUR CODES" */
.promo_section_label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* header subtitle under the mchat_username title, on the brand-colored panel header */
.promo_panel_subtitle {
  color: rgba(255,255,255,0.75);
  font-size: 0.78rem;
  margin-top: 2px;
}

/* ── Staff pricing breakdown panel (Triage tab caret, view_pricing_breakdown_class) ── */

.today_pricing_table {
  background: var(--surface);
  border-radius: var(--radius_lg);
  color: var(--muted);
  font-size: 0.9em;
  padding: 12px;
}

.today_pricing_meta {
  color: var(--muted);
  font-size: 0.78rem;
  margin-top: 14px;
}

.today_pricing_notes {
  background: var(--surface);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 0.85rem;
  margin-top: 6px;
  padding: 10px 12px;
}

/* applied-code card shown at the top of the panel once a code is active */
.promo_applied_card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--brand_soft);
  border: 1px solid var(--brand);
  border-radius: var(--radius);
  padding: 12px 15px;
  margin-bottom: 18px;
}
.promo_applied_card > .bi { color: var(--brand); font-size: 1.2rem; flex-shrink: 0; }
.promo_applied_card_body { flex: 1; min-width: 0; }
.promo_applied_code { font-weight: 700; color: var(--brand); font-size: 0.95rem; }
.promo_applied_sub { font-size: 0.8rem; color: var(--ink); margin-top: 1px; }
.remove_promo_code_button {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--danger);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
}
.remove_promo_code_button:hover { text-decoration: underline; }

/* stacked list of a user's targeted/available codes ("YOUR CODES") */
.promo_user_codes_list { margin-top: 4px; }
.promo_code_tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  margin-bottom: 10px;
  padding: 12px 14px;
}
.promo_code_tile:last-child { margin-bottom: 0; }
.promo_code_tile_text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.promo_code_tile_code { font-weight: 700; color: var(--ink); font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.promo_code_tile_desc { font-size: 0.78rem; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.promo_code_tile .badge_ndd { flex-shrink: 0; }

/* empty state when a user has no saved/targeted codes */
.promo_empty_state {
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  padding: 30px 15px;
}
.promo_empty_state .bi {
  display: block;
  font-size: 1.8rem;
  color: var(--muted);
  margin-bottom: 8px;
}

/* checkout chip that opens the promo panel — unset (dashed) vs applied (solid pill) */
.promo_chip {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--brand);
  cursor: pointer;
  /* no dashed-border token exists in :root — this is an intentional brand-derived tint, not a hardcoded design color */
  border: 1px dashed rgba(134,94,191,0.45);
  border-radius: var(--radius);
  padding: 2px 10px;
  white-space: nowrap;
  text-align: center;
}
.promo_chip_set {
  background: var(--brand_soft);
  border: 1px solid transparent;
  border-radius: var(--radius_pill);
  color: var(--brand);
  font-weight: 700;
}
.promo_chip_set .bi { margin-right: 3px; }

/* the promo entry as its own dashed card, sitting between the booking summary and the invoice. The chip
   inside it drops its own dashed border so only one dashed outline is drawn; an applied code keeps its
   solid pill, which is what distinguishes the two states here. */
.promo_entry_box {
  /* matches the invoice card's own margin-top below it, so the card sits evenly between its two neighbours */
  margin-top: 5px;
  padding: 10px;
  /* no dashed-border token exists in :root — same brand-derived tint as .promo_chip, deliberately matched */
  border: 1px dashed rgba(134,94,191,0.45);
  border-radius: var(--radius_sm);
  background: var(--surface);
  text-align: center;
  cursor: pointer;
}
.promo_entry_box .promo_chip {
  border: none;
  padding: 0;
  font-size: 0.9rem;
}
.promo_entry_box .promo_chip_set {
  padding: 2px 10px;
}

/* the saved card, alongside the Total rather than on a line of its own — a reminder and a way back to the
   payment slide, not a line item, so it is quiet text sharing the row's baseline. It had a line to itself
   until 2026-11-01; on a phone the review slide cannot spare one for something already confirmed. */
.review_total_card {
  font-size: 0.78rem;
  font-weight: 400;
  /* uppercased here rather than in the stored value: the brand is read from the saved card row and is
     whatever the processor wrote, so the casing is a presentation choice and belongs with the other ones */
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--brand);
  cursor: pointer;
  white-space: nowrap;
}

/* Membership terms document on the booking review slide and its authorization panel. */
.ec_subscription_disclosure_container
{
  margin-top: 5px;
  padding: 10px;
  border: 1px solid var(--line);
  /* matches the other cards on the booking review slide */
  border-radius: var(--radius_sm);
  background: var(--surface);
}
.ec_subscription_price_summary
{
  width: 100%;
}
.ec_subscription_plan_label
{
  color: var(--brand);
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.ec_subscription_due_label,
.ec_subscription_recurring_line
{
  color: var(--muted);
  font-size: 0.78em;
}
.ec_subscription_price
{
  color: var(--ink);
  font-size: 1.2em;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}
.ec_subscription_recurring_line
{
  margin-top: 2px;
}
.ec_terms_tile
{
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: 8px;
  padding: 9px 10px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
}
.ec_terms_tile_file_icon
{
  display: flex;
  align-items: center;
  padding-right: 10px;
  color: var(--brand);
  font-size: 1.35em;
}
.ec_terms_tile .ec_terms_tile_label
{
  width: 100%;
  color: var(--ink);
  font-size: 0.86em;
  font-weight: 600;
  line-height: 1.2;
}
.ec_terms_tile_unsigned_status,
.ec_terms_tile_signed_status
{
  margin-top: 3px;
  color: var(--brand);
  font-size: 0.82em;
  font-weight: 700;
}
.ec_terms_tile_signed_status
{
  display: none;
}
.ec_terms_signed_icon
{
  display: none;
}
.ec_terms_tile .doc_tile_check_icon
{
  display: flex;
  align-items: center;
  padding-left: 10px;
  color: var(--muted);
  font-size: 1.3em;
  white-space: nowrap;
}
.ec_terms_tile.doc_tile_acknowledged
{
  border-color: var(--brand);
  background: var(--brand_soft);
}
.ec_terms_tile.doc_tile_acknowledged .ec_terms_tile_label
{
  color: var(--ink);
}
.ec_terms_tile.doc_tile_acknowledged .doc_tile_check_icon,
.ec_terms_tile.doc_tile_acknowledged .ec_terms_tile_signed_status,
.ec_terms_tile.doc_tile_acknowledged .ec_terms_signed_icon
{
  display: flex;
  color: var(--brand);
}
.ec_terms_tile.doc_tile_acknowledged .ec_terms_tile_unsigned_status,
.ec_terms_tile.doc_tile_acknowledged .ec_terms_unsigned_icon
{
  display: none;
}
.ec_terms_panel_title
{
  color: #fff;
  font-weight: 700;
  line-height: 1.2;
}
.ec_terms_panel_body
{
  padding: 16px;
  background: var(--page);
}
.ec_terms_document_intro
{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.ec_terms_document_icon
{
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  border-radius: var(--radius);
  background: var(--brand_soft);
  color: var(--brand);
  font-size: 1.35em;
}
.ec_terms_document_title
{
  color: var(--ink);
  font-size: 1.05em;
  font-weight: 700;
}
.ec_terms_document_subtitle,
.ec_terms_section_description
{
  color: var(--muted);
  font-size: 0.84em;
  line-height: 1.4;
}
.ec_terms_section,
.ec_terms_authorization_section
{
  margin-bottom: 14px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.ec_terms_section_eyebrow
{
  margin-bottom: 8px;
  color: var(--brand);
  font-size: 0.76em;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.ec_terms_amount_row
{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 3px;
  color: var(--ink);
  font-size: 0.94em;
  font-weight: 600;
}
.ec_terms_amount_row strong
{
  font-size: 1.32em;
  white-space: nowrap;
}
.ec_terms_price_table
{
  width: 100%;
  margin-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.86em;
}
.ec_terms_price_table td
{
  padding-top: 4px;
}
.ec_terms_plan_details
{
  margin-top: 14px;
  border-top: 1px solid var(--line);
}
.ec_terms_detail_row
{
  display: flex;
  gap: 10px;
  padding-top: 12px;
  color: var(--muted);
  font-size: 0.84em;
  line-height: 1.45;
}
.ec_terms_detail_icon
{
  width: 18px;
  flex: 0 0 18px;
  color: var(--brand);
  text-align: center;
}
.ec_terms_detail_content
{
  min-width: 0;
}
.ec_terms_detail_label
{
  margin-bottom: 2px;
  color: var(--ink);
  font-weight: 700;
}
.ec_terms_declined_notice
{
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.86em;
  line-height: 1.45;
}
.ec_terms_declined_icon
{
  color: var(--brand);
  font-size: 1.05em;
}
.ec_terms_declined_title
{
  margin-bottom: 2px;
  color: var(--ink);
  font-weight: 700;
}
.ec_terms_authorization_section
{
  margin-bottom: 0;
  border-width: 2px;
  border-color: var(--brand);
}
.ec_terms_authorization_heading
{
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
  color: var(--brand);
  font-size: 0.82em;
  font-weight: 700;
  text-transform: uppercase;
}
.ec_terms_authorization_heading strong
{
  margin-left: auto;
  font-size: 0.82em;
  white-space: nowrap;
}
.ec_subscription_authorization_container
{
  color: var(--ink);
  font-size: 0.88em;
  line-height: 1.58;
}
.ec_terms_panel_footer
{
  display: block;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  border-top: 0;
  background: var(--surface);
  box-shadow: none;
}
.ec_terms_errors
{
  margin-bottom: 8px;
}
.ec_terms_agree_button .bi
{
  margin-right: 5px;
}
.ec_terms_signed_confirmation
{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--brand);
  font-size: 0.9em;
}
.ec_terms_signed_confirmation .bi
{
  font-size: 1.2em;
}


/* ── Inline date calendar — .calendar_ndd (CMR-2026-10-28-461) ──────────────── */
/* A month drawn in place of the browser's own date field, so choosing a day is one tap rather than two and
   the control is the platform's rather than the operating system's. The markup comes from calendar_ndd in
   PHP; nothing here is generated in the browser.

   Day cells carry no border and no fill until they are chosen: forty-two outlined boxes read as a grid of
   controls, and what a patient is looking for is the numbers. Selection uses the standard tap-to-select
   state, the same one tile_ndd and the booking time slots use. */
.calendar_ndd { margin-top: 10px; user-select: none; }

/* the month reads first and the two chevrons sit together on the right. As one row of five controls with the
   month in the middle it read as a control itself, and the two things a patient uses were at opposite edges. */
.calendar_ndd_header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.calendar_ndd_month_label { flex: 1 1 auto; font-size: 1rem; font-weight: 700; color: var(--ink); }
.calendar_ndd_nav_group { flex: 0 0 auto; display: flex; gap: 6px; }
.calendar_ndd_nav {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--brand);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
}
.calendar_ndd_nav:focus-visible { background: var(--brand_soft); border-color: var(--brand); }
/* a chevron that would land on a month holding no answerable day is turned off rather than hidden: a control
   that disappears leaves the patient wondering whether they lost it */
.calendar_ndd_nav:disabled { color: var(--line); cursor: default; }

/* the two ends of a range. The active chip is where the next day tapped goes, so correcting the start is
   tapping From rather than starting the range again. */
.calendar_ndd_range_row { display: flex; gap: 8px; margin-bottom: 10px; }
.calendar_ndd_chip {
  flex: 1 1 0;
  padding: 8px 10px;
  border: 2px solid var(--line);
  border-radius: var(--radius_lg);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
}
.calendar_ndd_chip.active { border-color: var(--brand); background: var(--brand_soft); }
.calendar_ndd_chip:focus-visible { border-color: var(--brand); background: var(--brand_soft); }
.calendar_ndd_chip_label { display: block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.calendar_ndd_chip_value { display: block; font-size: 0.88rem; font-weight: 600; color: var(--muted); margin-top: 2px; }
.calendar_ndd_chip.calendar_ndd_readout_filled .calendar_ndd_chip_value { color: var(--brand_dark); font-weight: 700; }

.calendar_ndd_weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; font-size: 0.7rem; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.calendar_ndd_grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }

.calendar_ndd_day {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
}
.calendar_ndd_day:focus-visible { border-color: var(--brand); background: var(--brand_soft); }
/* HOVER ONLY WHERE THERE IS A POINTER. A touch screen leaves :hover on the last thing tapped, so without this
   a patient who tapped the 5th and then the 12th would be looking at two cells in the brand fill, only one of
   which is their answer. */
@media (hover: hover)
{
  .calendar_ndd_nav:hover:not(:disabled) { background: var(--brand_soft); border-color: var(--brand); }
  .calendar_ndd_day:hover:not(:disabled) { background: var(--brand_soft); }
}
/* the standard selection treatment, so a chosen date reads the same as a chosen time slot or answer tile.
   --brand_dark rather than --brand for the number itself: brand on brand_soft is about 4.1:1, which fails AA
   at this size, and a day number is body-size text rather than a tile's label. The border stays --brand. */
.calendar_ndd_day.selected { background: var(--brand_soft); border-color: var(--brand); color: var(--brand_dark); font-weight: 700; }
/* the days between the two ends of a range, so the span reads as one answer */
.calendar_ndd_day.calendar_ndd_in_range { background: var(--brand_soft); color: var(--brand_dark); }
/* a day that cannot answer this question — a symptom did not start tomorrow. Shown rather than removed, so a
   patient looking for the 3rd finds the 3rd and sees that it is not an answer. */
.calendar_ndd_day.calendar_ndd_day_closed { color: var(--line); cursor: default; }
.calendar_ndd_day.calendar_ndd_day_closed:hover { background: transparent; }
/* TODAY IS THE NUMBER IN THE INFO COLOUR. Not a fill, which would compete with the chosen day, and no longer
   a dot underneath — a 4px dot in a 44px cell reads as a status light rather than as a label, and at arm's
   length on a phone it is easy to miss entirely. The blue also says plainly that it is not a selection, which
   a second purple marker would not. A written "Today" was the alternative and would have had to sit under the
   number at well under 10px to fit seven columns, so the word goes to the cell's accessible name instead. */
.calendar_ndd_day.calendar_ndd_today { color: var(--blue); font-weight: 700; }
/* chosen beats today: the selection is the thing the patient is being asked to read */
.calendar_ndd_day.calendar_ndd_today.selected,
.calendar_ndd_day.calendar_ndd_today.calendar_ndd_in_range { color: var(--brand_dark); }

/* a month is being fetched: the grid dims rather than raising the page spinner, which on a chevron reads as
   something having gone wrong */
.calendar_ndd_turning { opacity: 0.45; transition: opacity 0.15s; }

/* on the narrowest phones the seven columns and their gaps leave a day cell just under the size a thumb
   needs, and the gap is the only part of that there is anything to give */
@media (max-width: 380px)
{
  .calendar_ndd_weekdays,
  .calendar_ndd_grid { gap: 2px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHECK-IN REVIEW SUMMARY (.cv2_review_*)

   The last slide of the check-in, and the whole of the read-only panel a
   submitted check-in reopens into. These rules were inlined in a <style> block
   inside BOTH panels in shared_ajax_functions.php — two identical copies, one
   of which would have been missed by the next edit. They live here once.
   ═══════════════════════════════════════════════════════════════════════════ */

.cv2_review_loading { text-align: center; padding: 40px 20px; color: #999; }
.cv2_review_loading .spinner-border { vertical-align: middle; margin-right: 8px; }

/* the shadow is purple-cast rather than neutral grey, so a card separating from
   the page reads as sitting under the brand rather than muddying it */
.cv2_review_card { background: var(--surface); border-radius: var(--radius_lg); margin-bottom: 14px; overflow: hidden; box-shadow: 0 2px 10px rgba(26,16,64,0.08), 0 1px 2px rgba(26,16,64,0.04); }
/* a row, so the section's own control can sit at the right-hand end of it. The
   6px of vertical padding plus the control's own 8px keeps the bar the height
   it was when the title was all it held. */
.cv2_review_card_header { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; font-size: 0.85em; font-weight: 700; color: var(--brand); background: #f8f4ff; border-bottom: 1px solid #ede8f5; }
.cv2_review_card_title { flex: 1 1 auto; min-width: 0; }
.cv2_review_card_body { padding: 12px 14px; }
.cv2_review_cc_text { font-weight: 700; font-size: 0.95em; color: #222; margin-bottom: 5px; }
.cv2_review_desc_text { font-size: 0.85em; color: #555; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.cv2_review_all_clear { font-size: 0.85em; font-weight: 600; color: #16a34a; }
.cv2_review_all_clear i { margin-right: 6px; }
.cv2_review_positives_list { font-size: 0.85em; color: #dc2626; font-weight: 600; line-height: 1.5; }
.cv2_review_empty { font-size: 0.85em; color: #999; font-style: italic; }
.cv2_review_system_table { width: 100%; border-collapse: collapse; }
.cv2_review_system_table tr { border-bottom: 1px solid #f5f5f5; }
.cv2_review_system_table tr:last-child { border-bottom: 0; }
.cv2_review_system_label { font-size: 0.82em; font-weight: 700; color: #555; white-space: nowrap; padding: 8px 12px 8px 14px; vertical-align: middle; width: 1%; }
.cv2_review_system_value { font-size: 0.82em; padding: 8px 14px 8px 0; vertical-align: middle; max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv2_review_system_none { color: #16a34a; font-weight: 600; }
.cv2_review_system_positives { color: #dc2626; font-weight: 600; }
.cv2_review_empty_inline { color: #aaa; font-style: italic; }
.cv2_review_pharmacy_name { font-size: 0.9em; font-weight: 700; color: #222; margin-bottom: 3px; }
.cv2_review_pharmacy_address { font-size: 0.82em; color: #666; line-height: 1.4; }

/* THE SECTION'S OWN CONTROL — a word, not a button. Nothing is drawn around it,
   so it adds no second shape to a bar that already carries a title. The padding
   is invisible and exists only to bring the tap area to ~32px, which the 0.72rem
   word on its own would not reach. */
/* --brand_dark rather than --brand, and no opacity: --brand at 0.85 on this bar is
   about 3.4:1, which is below AA for an 11.5px label. The quietness comes from the
   size and from having no border or fill, not from being hard to read. */
.cv2_review_edit { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 8px 10px; font-family: var(--font); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.01em; color: var(--brand_dark); background: transparent; border: none; border-radius: var(--radius_sm); cursor: pointer; white-space: nowrap; }
.cv2_review_edit i { font-size: 0.7rem; }
.cv2_review_edit:hover { background: var(--brand_soft); }
/* a section that is not filled in yet is asking to be finished, not edited, and
   today says so only in a line of grey italic with nothing to act on.
   #7a5b00 is the system's amber TEXT colour (.alert_ndd_gold) — --gold itself is a
   fill colour and is about 2:1 as text, unreadable at this size. */
.cv2_review_edit_todo { color: #7a5b00; }
.cv2_review_edit_todo:hover { background: var(--gold_soft); }

/* THE SERVICE-LINE ANSWERS, inside the review card only.
   service_line_intake_summary_row draws a white rounded box inside the white
   card body: invisible on its own background, and it insets the answers 26px
   from the card edge while every other section's content sits at 14px. Here the
   rows are hairline-separated instead, so they line up with the rest of the page
   and the separation is the rule rather than the margin. The in-form summary
   step keeps the boxed treatment — same renderer, different container. */
.cv2_review_card_body .service_line_intake_summary_row { background: transparent; border-radius: 0; padding: 11px 0; margin-bottom: 0; border-top: 1px solid var(--line); }
.cv2_review_card_body .service_line_intake_summary_row:first-child { border-top: none; padding-top: 2px; }
.cv2_review_card_body .service_line_intake_summary_row:last-child { padding-bottom: 2px; }
.cv2_review_card_body .service_line_intake_summary_row .practice_form_row_meta { font-size: 0.78rem; font-weight: 500; color: var(--muted); line-height: 1.4; }
/* 600 at 0.95rem, not 700 at full size: six answers at the old weight is a slab,
   and the question above each one has nothing left to contrast against */
.cv2_review_card_body .service_line_intake_summary_row .bold { margin-top: 4px; font-size: 0.95rem; font-weight: 600; color: var(--ink); line-height: 1.38; }

/* ─── Sign-in: passkey section ──────────────────────────────────────────────
   Moved out of the sign-in page's own style block when the in-app drawer form
   gained the same control (CMR-2026-11-02-525). Two surfaces render
   .login_passkey_section now, so one definition has to serve both — a second
   copy in a page block is how a component ends up styled on one screen only. */
.signin_divider { display: flex; align-items: center; gap: 14px; margin: 20px 0; }
.signin_divider::before, .signin_divider::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--line); }
.signin_divider span { color: var(--muted); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

.signin_alt_button { margin-bottom: 8px; }
.signin_passkey_caption { text-align: center; }
/* btn_ndd_secondary fills with --surface and outlines in --line, which is 1.14:1 against the drawer's grey
   body — the control is then legible only by its label. Scoped here rather than changing the shared class,
   which every secondary button on the platform uses. --muted clears 3:1 on both the white card and the grey. */
.signin_passkey_button { border-color: var(--muted); }