/*
 * TEMPORARY demo styles — Wednesday demo only. White-label theming via CSS
 * variables (Platform Architecture §7); values injected from config.js brand
 * tokens so swapping brands is one config object, never CSS edits.
 */
:root {
  --bcbs-sky: #06B8EF;
  --bcbs-sea: #00465E;
  --bcbs-dogwood: #F8F5F1;
  --bcbs-dark-dogwood: #BCB3AA;
  --bcbs-dark-sky: #17759F;
  --bcbs-dark-sea: #003547;
  --bcbs-light-sky: #94DDF8;
  --bcbs-light-sea: #94B1BB;
  --font-heading: 'Blue Ridge', Georgia, serif;
  --font-body: 'Blue Ridge Sans', Aptos, system-ui, sans-serif;

  /* Semantic roles map onto the brand palette. */
  --jf-primary: var(--bcbs-sky);
  --jf-primary-dark: var(--bcbs-dark-sky);
  --jf-accent: var(--bcbs-sea);
  --jf-bg: var(--bcbs-dogwood);
  --jf-text: var(--bcbs-dark-sea);
  --jf-muted: var(--bcbs-dark-dogwood);
  --jf-card: #ffffff;
  --jf-line: #e7e1d8;

  /* Completed token set used by the payer "Site-of-Care Intelligence" surfaces
     (Auth Gate / Leakage Report). Values match the existing design language;
     overridable per theme later so only colors change per tenant. */
  --jf-brand: #1F9D57;        /* positive / savings emphasis */
  --jf-brand-ink: #1f2937;    /* active-tab + emphasis ink */
  --jf-ink: #1f2937;
  --jf-ok-bg: #e6f4ea;   --jf-ok-line: #b7dcc1;   --jf-ok-ink: #14743b;
  --jf-warn-bg: #fff3df;  --jf-warn-ink: #b45309;   /* clean amber (was muddy #8a5a16) */
  --jf-danger-bg: #fdecec; --jf-danger-ink: #b3261e;
  --jf-radius: 14px;
  --jf-shadow: 0 1px 3px rgba(0,0,0,.05);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--jf-text);
  background: var(--jf-bg);
  line-height: 1.5;
}
h1, h2, h3 { font-family: var(--font-heading); color: var(--bcbs-dark-sea); font-weight: 700; }

.demo-banner {
  background: #5a3b00; color: #ffe9b0; text-align: center;
  font-size: 12px; letter-spacing: .04em; padding: 6px 10px;
}
header.brand {
  background: var(--bcbs-dark-sea); color: #fff;
  display: flex; align-items: center; gap: 14px; padding: 16px 24px;
}
header.brand .logo {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--bcbs-sky); display: grid; place-items: center;
  color: var(--bcbs-dark-sea); font-family: var(--font-heading); font-weight: 700;
}
header.brand .brandname { font-family: var(--font-heading); font-size: 20px; }
/* Always-visible "LIVE" connection list — pushed to the far right of the header. */
.live-indicator {
  margin-left: auto; position: relative; align-self: stretch;
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  padding: 4px 12px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.18);
}
.live-head { display: flex; align-items: center; gap: 6px; }
.live-lead { font-size: 11px; font-weight: 600; color: #d7dee2; }
.live-info {
  margin-left: 2px; cursor: pointer; font: inherit; font-size: 11px; line-height: 1;
  color: #bfe6cf; background: transparent; border: none; padding: 0;
}
.live-info:hover { color: #fff; }
.live-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.live-list li {
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 11.5px; font-weight: 600; color: #eafff4;
}
/* Per-line status dot: green = live, grey = sample (connected, not pulling now),
   amber = pending (not connected yet). Never red. */
.live-list li .ld { width: 7px; height: 7px; border-radius: 50%; background: #2ecc71; flex-shrink: 0; }
.live-list li .ld.live { background: #2ecc71; }
.live-list li .ld.sample { background: #9aa6b0; }
.live-list li .ld.pending { background: #f1c40f; }
/* Footnote card with the plain-language "what this means" notes. */
.live-card {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30;
  width: 270px; text-align: left; color: var(--jf-text);
  background: #fff; border: 1px solid var(--jf-line); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 53, 71, 0.18); padding: 12px 14px;
}
.live-card h4 { margin: 0 0 8px; font-size: 13px; color: var(--bcbs-dark-sea); }
.live-card ul { margin: 0; padding: 0; list-style: none; }
.live-card li { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; margin: 5px 0; }
.live-card li .ld { width: 7px; height: 7px; border-radius: 50%; background: #2ecc71; margin-top: 5px; flex-shrink: 0; }
.live-notes { margin: 9px 0 0; padding-top: 8px; border-top: 1px solid var(--jf-line); }
.live-notes p { margin: 0 0 5px; font-size: 11.5px; color: #6b7680; font-style: italic; line-height: 1.35; }
.live-notes p:last-child { margin-bottom: 0; }
/* Image logo (e.g. official payer lockup): white chip so colored marks stay
   legible on the dark header; replaces the round initials badge. */
header.brand .logo.logo-img {
  width: auto; height: auto; border-radius: 8px;
  background: #fff; padding: 7px 12px;
}
header.brand .logo.logo-img img { height: 30px; display: block; }

main { max-width: 880px; margin: 0 auto; padding: 28px 20px 64px; }
.card {
  background: var(--jf-card); border: 1px solid var(--jf-line);
  border-radius: 14px; padding: 22px; margin: 16px 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.muted { color: #6b6b6b; }
.kv { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 10px 0; }
.kv div { min-width: 140px; }
.kv span { display: block; font-size: 12px; color: #666; }  /* #666 ≥4.5:1 on white/card (WCAG 1.4.3) */
.kv strong { font-size: 16px; color: var(--bcbs-sea); }

.btn {
  background: var(--jf-primary); color: var(--bcbs-dark-sea);
  border: none; border-radius: 999px; padding: 13px 26px;
  font: 600 16px var(--font-body); cursor: pointer;
}
.btn:hover { background: var(--bcbs-light-sky); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn.secondary { background: transparent; color: var(--bcbs-dark-sky); border: 1px solid var(--bcbs-dark-sky); }

.result {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border: 1px solid var(--jf-line); border-radius: 12px; padding: 16px; margin: 12px 0;
}
.result-info { flex: 1; min-width: 0; }
.result.selected { border-color: var(--bcbs-sky); box-shadow: 0 0 0 2px var(--bcbs-light-sky); }
.result .slot { font-size: 18px; color: var(--bcbs-dark-sea); }
/* Estimated out-of-pocket — center column, big number, small caption beneath. */
.result-cost { text-align: center; min-width: 116px; flex-shrink: 0; }
.result-cost .amt { font-size: 24px; font-weight: 700; line-height: 1.1; color: var(--bcbs-dark-sea); }
.result-cost .cap { display: block; font-size: 11px; color: #777; margin-top: 3px; }
/* More acute than approved (not approved + pricier) → red deterrent. */
.result-cost.over .amt { color: #b3261e; }
/* "Also in your network" subheading above the grayed-out (not-bookable) block. */
.gray-subhead { margin: 22px 0 4px; padding-top: 14px; border-top: 1px dashed var(--jf-line); }
.gray-subhead h3 { margin: 0 0 2px; font-size: 15px; color: var(--bcbs-dark-sea); }
.gray-subhead p { margin: 0; font-size: 13px; }
/* In-network but not onboarded with J&F: shown muted, not selectable. */
.result.result-gray { background: #f7f8fa; border-style: dashed; opacity: .82; }
.gray-tag {
  display: inline-block; font-size: 11px; font-weight: 600; vertical-align: middle;
  padding: 1px 8px; border-radius: 999px; margin-left: 6px;
  background: #eef1f5; color: #5b6675; border: 1px solid #cdd6e0;
}
.gray-note { margin-top: 6px; font-style: italic; }
/* "Requested your authorization" — highlights the requesting practice when it's
   among the in-network options. Pure context; does not reorder results. */
.req-tag {
  display: inline-block; font-size: 11px; font-weight: 600; vertical-align: middle;
  padding: 1px 8px; border-radius: 999px; margin-left: 6px;
  background: var(--bcbs-light-sky); color: var(--bcbs-dark-sea); border: 1px solid var(--bcbs-sky);
}
/* "Show all N available times" expander beneath the capped bookable list. */
.show-more {
  display: block; width: 100%; margin: 4px 0 2px; padding: 10px;
  background: #fff; border: 1px dashed var(--bcbs-sky); border-radius: 10px;
  color: var(--bcbs-dark-sea); font: inherit; font-weight: 600; cursor: pointer;
}
.show-more:hover { background: var(--bcbs-light-sky); }
.gray-cta {
  text-align: center; min-width: 116px; flex-shrink: 0;
  font-size: 13px; font-weight: 600; color: #5b6675;
}
.flag {
  background: #fff4d6; border: 1px solid #e6c860; color: #6b5300;
  border-radius: 8px; padding: 8px 12px; font-size: 13px; margin-top: 8px;
}
/* B2 — stronger site-of-care advisory (amber). */
.flag.flag-advisory { background: #fff1e0; border-color: #f0b063; color: #8a4f12; }
/* B3 — soft "provider will confirm" note (neutral). */
.flag.flag-soft { background: #f1f4f8; border-color: #cdd6e0; color: #415060; }
/* Pre-authorization picker — selectable rows in a fixed-height scroll panel so
   the page doesn't grow as the member's authorization count rises. */
.proc-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 300px; overflow-y: auto; padding: 2px 4px 2px 2px;
}
.proc-row {
  text-align: left; width: 100%; cursor: pointer; font: inherit;
  background: #fff; border: 1px solid var(--jf-line); border-radius: 10px;
  padding: 9px 12px; transition: border-color .12s, box-shadow .12s;
}
.proc-row:hover { border-color: var(--bcbs-sky); }
.proc-row.proc-selected { border-color: var(--bcbs-sky); box-shadow: 0 0 0 2px var(--bcbs-light-sky); }
.proc-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.proc-name { font-weight: 600; color: var(--bcbs-dark-sea); }
.proc-meta { font-size: 13px; margin-top: 2px; }
.proc-auth { font-size: 12px; margin-top: 2px; opacity: .85; }
/* Smooth in-place update while switching authorizations (no full-screen flash). */
#patientCard.updating { opacity: .6; transition: opacity .15s ease; pointer-events: none; }
/* Facility care-setting tag (e.g. Surgery center / Hospital outpatient). */
.setting-tag {
  display: inline-block; font-size: 11px; font-weight: 600; vertical-align: middle;
  padding: 1px 8px; border-radius: 999px; margin-left: 6px;
  background: var(--bcbs-dogwood); color: var(--bcbs-dark-sea); border: 1px solid var(--bcbs-dark-dogwood);
}
.proc-badge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 8px; border-radius: 999px; }
.proc-badge-expired { background: #fdeaea; color: #9a2b2b; border: 1px solid #e7b4b4; }
.proc-badge-pending { background: #fff3df; color: #8a5a16; border: 1px solid #f0c178; }
.proc-badge-denied { background: #fdeaea; color: #9a2b2b; border: 1px solid #e7b4b4; }
/* Expired / pending authorizations: grayed out and unclickable. */
.proc-row.proc-disabled {
  cursor: not-allowed; background: #f5f6f8; border-style: dashed;
  border-color: #d8dee6; opacity: .75;
}
.proc-row.proc-disabled .proc-name { color: #8a93a0; }
/* Strike through only VOID authorizations (expired/denied) — never pending,
   which is a live request still under review. */
.proc-row.proc-expired .proc-name,
.proc-row.proc-denied .proc-name { text-decoration: line-through; }
.proc-row.proc-disabled:hover { border-color: #d8dee6; }
.disclaimer { font-size: 12px; color: #777; margin-top: 16px; }
.notice {
  background: var(--bcbs-dogwood); border: 1px solid var(--bcbs-dark-dogwood);
  border-radius: 10px; padding: 14px 16px; margin: 16px 0; font-size: 14px;
  color: var(--bcbs-dark-sea);
}
.controls { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0 4px; }
select, input[type=date], input[type=text] { padding: 8px 10px; border: 1px solid var(--jf-line); border-radius: 8px; font: inherit; }
/* Unified filter fields (page 2): a small label above a select/input so the
   sort, provider, doctor and facility controls all read as one consistent set
   in the brand body font. */
.filters-row { align-items: flex-end; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field-label { font: 600 12px var(--font-body); color: var(--bcbs-dark-sea); letter-spacing: .01em; }
.field select,
.field input[type=text] {
  font: 400 14px var(--font-body); padding: 10px 36px 10px 12px;
  border: 1px solid var(--jf-line); border-radius: 9px;
  background: #fff; color: var(--jf-text); min-width: 240px;
  /* Unified caret across <select> AND searchable <input list>. appearance:none
     strips the native select chrome so the same inline-SVG caret renders for both. */
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%231F3F2C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 8px;
}
.field select:focus,
.field input[type=text]:focus {
  outline: none; border-color: var(--bcbs-sky); box-shadow: 0 0 0 2px var(--bcbs-light-sky);
}
.search-status { font: 400 13px var(--font-body); color: #4a4a4a; margin: 8px 0 0; }
.search-status a { color: var(--bcbs-dark-sky); }
.spinner { color: var(--bcbs-dark-sky); }
.hidden { display: none; }
footer.attrib { text-align: center; color: #8a8a8a; font-size: 12px; padding: 24px; }
.error { background: #fde8e8; border: 1px solid #f5b5b5; color: #8a1f1f; border-radius: 8px; padding: 12px; }
.survey label { display: inline-flex; align-items: center; gap: 6px; margin-right: 18px; }

/* Calendar pop-up (page 2 "Choose a date") */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50; }
.modal.hidden { display: none; }
.modal-box { background: #fff; border-radius: 14px; padding: 18px 20px; max-width: 420px; width: 100%; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.modal-head { display: flex; justify-content: space-between; align-items: center; }
.modal-x { background: none; border: none; font-size: 26px; line-height: 1; cursor: pointer; color: #999; }
.cal { margin: 12px 0; }
.cal-title { font-family: var(--font-heading); color: var(--bcbs-dark-sea); margin: 6px 0 8px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-head { text-align: center; font-size: 12px; color: #999; padding: 2px 0; }
.cal-cell { text-align: center; padding: 10px 0; border-radius: 8px; font-size: 14px; color: #cfcfcf; }
.cal-cell.empty { background: transparent; }
.cal-cell.off { color: #cfcfcf; }
.cal-cell.avail { background: var(--bcbs-light-sky); color: var(--bcbs-dark-sea); font-weight: 700; cursor: pointer; }
.cal-cell.avail:hover { background: var(--bcbs-sky); }
.cal-cell.avail.sel { outline: 2px solid var(--bcbs-dark-sky); outline-offset: 1px; }
#daySlots h3 { margin: 18px 0 8px; }
.liveband {
  display: inline-block; background: #0a7d2c; color: #fff; font-weight: 700;
  font-size: 12px; letter-spacing: .04em; padding: 5px 12px; border-radius: 999px;
}
#cignaLiveResult ul { padding-left: 20px; font-size: 14px; color: var(--bcbs-sea); }

/* ── Provider / intake view + landing chooser (provider entry point) ─────── */
.muted-head { color: #b9c6cc; font-weight: 400; }
.back-link { margin-left: auto; color: #cfe8f5; text-decoration: none; font-size: 13px; }
.back-link:hover { color: #fff; text-decoration: underline; }

/* Summary metrics */
.metrics { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; }
.metric { flex: 1; min-width: 170px; background: var(--bcbs-dogwood); border: 1px solid var(--jf-line);
  border-radius: 12px; padding: 14px 16px; }
.metric-n { font-family: var(--font-heading); font-size: 30px; font-weight: 700; color: var(--bcbs-dark-sea); line-height: 1; }
.metric-label { font-size: 13px; font-weight: 600; color: var(--bcbs-sea); margin-top: 4px; }
.metric-sub { font-size: 12px; color: #6b7680; margin-top: 2px; }

/* Flagged case rows */
.flag-row { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border: 1px solid var(--jf-line); border-radius: 12px; padding: 14px 16px; margin: 10px 0; }
.flag-main { flex: 1; min-width: 0; }
.flag-pt { font-size: 15px; }
.cptcode { font-size: 11px; background: #eef1f5; border: 1px solid #cdd6e0; color: #5b6675;
  border-radius: 6px; padding: 1px 6px; margin-left: 4px; }
.site-line { margin-top: 6px; font-size: 13px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.site-ok { color: #1f9d57; font-weight: 600; }
.site-arrow { color: #9aa6b0; }
.site-warn { color: #b3261e; font-weight: 600; }

/* ASC routing options (revealed) */
.asc-opts { border: 1px dashed var(--bcbs-sky); border-radius: 10px; padding: 12px 14px; margin: -2px 0 12px; background: #f7fbfe; }
.asc-opts-head { font-size: 13px; font-weight: 600; color: var(--bcbs-dark-sea); margin-bottom: 8px; }
.asc-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--jf-line); font-size: 14px; }
.asc-opt:last-child { border-bottom: none; }
.routed { font-size: 14px; color: #1f9d57; }

/* Landing chooser */
.chooser { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 20px; }
.choose-card { flex: 1; min-width: 280px; text-decoration: none; color: var(--jf-text);
  border: 1px solid var(--jf-line); border-radius: 14px; padding: 22px; background: #fff;
  transition: border-color .12s, box-shadow .12s, transform .12s; display: block; }
.choose-card:hover { border-color: var(--bcbs-sky); box-shadow: 0 6px 20px rgba(0,53,71,.12); transform: translateY(-2px); }
.choose-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--bcbs-dark-sea); color: #fff; border-radius: 999px; padding: 3px 12px; }
.choose-tag-payer { background: var(--bcbs-sky); color: var(--bcbs-dark-sea); }
.choose-card h2 { font-size: 18px; margin: 12px 0 8px; }
.choose-card p { font-size: 14px; color: #555; margin: 0; }
.choose-go { margin-top: 14px; font-weight: 600; color: var(--bcbs-dark-sky); }

/* ── WakeMed theme (provider view only — scoped to body.theme-wakemed) ───── */
/* Brand colors: Pomegranate Red #EE2722, Viking Blue #6CB2DE, Allports Blue #007396. */
.theme-wakemed { }
.theme-wakemed header.brand { background: #007396; }            /* Allports Blue */
/* Reskin: the round logo chip carries WakeMed red ("WM") so the header layout
   matches the payer side exactly (logo chip + brandname + live-indicator),
   with brand identity expressed through colors, not a separate wordmark. */
.theme-wakemed header.brand .logo { background: #EE2722; color: #fff; }
.theme-wakemed .brandname { font-family: var(--font-heading); }
/* Legacy wm-wordmark / powered classes are still defined (dead) until a CSS
   cleanup pass; the HTML no longer references them. */
.theme-wakemed .wm-wordmark {
  font-family: var(--font-heading); font-weight: 800; font-size: 24px; letter-spacing: -.5px;
  color: #fff; padding: 2px 0;
}
.theme-wakemed .wm-wordmark::first-letter { color: #EE2722; }   /* red W accent */
.theme-wakemed .powered { font-size: 11px; color: #eef7fb; margin-left: 10px; align-self: center; }  /* lightened for ≥4.5:1 on #007396 */
/* Primary actions + key accents in Pomegranate Red. */
.theme-wakemed .btn { background: #EE2722; color: #fff; }
.theme-wakemed .btn:hover { background: #cf1f17; }
.theme-wakemed .btn.secondary { background: transparent; color: #007396; border: 1px solid #007396; }
.theme-wakemed h1, .theme-wakemed h2, .theme-wakemed h3 { color: #007396; }
.theme-wakemed .metric { background: #eef7fb; border-color: #cfe6f3; }   /* Viking-blue tint */
.theme-wakemed .metric-n { color: #007396; }
.theme-wakemed .metric-label { color: #00557a; }
.theme-wakemed .site-warn { color: #EE2722; }
.theme-wakemed .asc-opts { border-color: #6CB2DE; background: #f4fafd; }
.theme-wakemed .asc-opts-head { color: #007396; }
.theme-wakemed .cptcode { background: #eef7fb; border-color: #cfe6f3; color: #00557a; }

/* ── Landing: provider side (two buttons) + payer side ───────────────────── */
.choose-side { display: flex; flex-direction: column; }
.choose-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 6px; }
.choose-btns .btn { text-decoration: none; padding: 11px 18px; font-size: 15px; }
.choose-notes { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; color: #6b7680; }
.choose-notes li { margin: 4px 0; }

/* ── Patient Scheduling page (Epic-only, WakeMed-themed) — data-source badges ── */
.data-source-row { display: flex; flex-wrap: wrap; gap: 6px; }
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 999px;
  background: #eef1f5; color: #5b6675; border: 1px solid #cdd6e0;
}
.badge-live   { background: #e6f4ea; color: #14743b; border-color: #b7dcc1; }
.badge-cms    { background: #ecf3fb; color: #1f4f86; border-color: #c2d6ee; }
.badge-real   { background: #f3eefb; color: #5f3aa1; border-color: #d3c1ea; }
.badge-pilot  { background: #fff3df; color: #8a5a16; border-color: #f0c178; }
.badge-pilot-small { font-size: 10px; padding: 1px 6px; vertical-align: middle; margin-left: 6px; background: #fff3df; color: #8a5a16; border: 1px solid #f0c178; border-radius: 999px; font-weight: 700; }
.badge-demo   { background: #fff0f0; color: #99343a; border-color: #f0b9bd; cursor: help; }
.rate-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; }
.rate { flex: 1; min-width: 140px; background: #f7fbfe; border: 1px solid #cfe6f3; border-radius: 10px; padding: 10px 12px; }
.rate span { display: block; font-size: 11px; color: #5b6675; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.rate strong { font-size: 20px; font-family: var(--font-heading); color: var(--bcbs-dark-sea); }
.theme-wakemed .rate { background: #eef7fb; border-color: #cfe6f3; }
.theme-wakemed .rate strong { color: #007396; }
.theme-wakemed .result.selected { border-color: #EE2722; box-shadow: 0 0 0 2px #f9c7c3; }
/* Procedure picker — WakeMed accent (the shared .proc-row uses BCBS sky tokens). */
.theme-wakemed .proc-row:hover { border-color: #007396; }
.theme-wakemed .proc-row.proc-selected { border-color: #007396; box-shadow: 0 0 0 2px #cfe6f3; }

/* ── Provider Routing business-case projection block ───────────────────────── */
.projection-block { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--jf-line); }
.proj-head { font-size: 13px; font-weight: 600; color: var(--bcbs-dark-sea); margin-bottom: 8px; letter-spacing: .02em; text-transform: uppercase; }
.theme-wakemed .proj-head { color: #007396; }
.proj-grid { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 12px; }
.proj-item { flex: 1; min-width: 180px; background: #fff; border: 1px solid var(--jf-line); border-radius: 10px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.proj-num { font-family: var(--font-heading); font-size: 22px; font-weight: 700; color: var(--bcbs-dark-sea); line-height: 1; }
.theme-wakemed .proj-num { color: #007396; }
.proj-lbl { font-size: 12px; font-weight: 600; color: #5b6675; text-transform: uppercase; letter-spacing: .03em; }
.proj-sub { font-size: 11.5px; color: #6b7680; margin-top: 4px; }
.proj-headline { background: #eef7fb; border-color: #cfe6f3; }
.theme-wakemed .proj-headline { background: #fdecec; border-color: #f5c6c2; }
.theme-wakemed .proj-headline .proj-num { color: #EE2722; }
.proj-bullets { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: #4a4f56; }
.proj-bullets li { margin: 5px 0; }
.proj-bullets strong { color: var(--bcbs-dark-sea); }
.theme-wakemed .proj-bullets strong { color: #007396; }

/* ── Provider Routing — split business-case sections + rerouted-counter highlight ── */
.proj-section { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--jf-line); }
.proj-section:first-of-type { margin-top: 18px; }
.projection-block-inline { margin-top: 6px; }
.metric.metric-active { border-color: #EE2722; box-shadow: 0 0 0 2px #f9c7c3; }
.metric.metric-active .metric-n { color: #EE2722; }

/* ── Jaguar & Fern theme (landing chooser + magic-link login pages) ──────── */
/* Brand pack 2026-05-29:
     Forest Green #1F3F2C — Primary    | Cream  #F0EAE0 — Background
     Muted Gold   #C8A97E — Accent     | Black  #000000 — Text  | White #FFFFFF — Inverse
   Logo usage:  "Forest Green logo on Cream background as default."
*/
.theme-jf { background: #F0EAE0; color: #000000; }
.theme-jf .demo-banner { background: #1F3F2C; color: #F0EAE0; }

/* Header: cream bg + logo + subtitle stacked, centered. */
.theme-jf header.brand {
  background: #F0EAE0; color: #1F3F2C;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 32px 24px 24px;
}
.theme-jf header.brand .brandname { font-family: var(--font-heading); }
.theme-jf header.brand .muted-head {
  /* Subtitle: small uppercase gold accent — sits BELOW the logo, doesn't compete with the page h1. */
  color: #C8A97E; font-size: 16px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}

/* Typography hierarchy — refined ladder so the page reads cleanly. */
.theme-jf h1 { color: #1F3F2C; font-family: var(--font-heading); font-size: 28px; letter-spacing: -.01em; line-height: 1.2; }
.theme-jf h2, .theme-jf h3 { color: #1F3F2C; font-family: var(--font-heading); }
.theme-jf .choose-card h2 { color: #1F3F2C; font-size: 20px; margin: 14px 0 6px; }
.theme-jf .choose-card p { color: #3a3a3a; }
.theme-jf .muted { color: #5b5b5b; }

/* Card surfaces (white on cream, subtle green-tinted edge). */
.theme-jf .card { background: #FFFFFF; border: 1px solid rgba(31, 63, 44, 0.12); box-shadow: 0 1px 3px rgba(31, 63, 44, 0.06); }
.theme-jf .choose-card { background: #FFFFFF; border-color: rgba(31, 63, 44, 0.18); }
.theme-jf .choose-card:hover { border-color: #C8A97E; box-shadow: 0 6px 20px rgba(31, 63, 44, 0.10); }

/* Tags: provider gets forest green; payer gets muted gold (the accent role). */
.theme-jf .choose-tag { background: #1F3F2C; color: #F0EAE0; }
.theme-jf .choose-tag-payer { background: #1F3F2C; color: #F0EAE0; }   /* unified — all category tags one color */

/* Buttons: forest green primary, outlined secondary. */
.theme-jf .btn { background: #1F3F2C; color: #FFFFFF; }
.theme-jf .btn:hover { background: #2a5640; }
.theme-jf .btn.secondary { background: transparent; color: #1F3F2C; border: 1px solid #1F3F2C; }
.theme-jf .btn.secondary:hover { background: #1F3F2C; color: #FFFFFF; }
.theme-jf .choose-btns .btn { font-size: 14px; padding: 10px 16px; }

/* Choose-notes (small explainer list under the buttons). */
.theme-jf .choose-notes { color: #5b5b5b; }
.theme-jf footer.attrib { color: #5b5b5b; }
.theme-jf a { color: #1F3F2C; }
.theme-jf a:hover { color: #C8A97E; }
/* Login card adjustments under J&F brand. */
.theme-jf .login-card h1 { color: #1F3F2C; }
.theme-jf .login-card label { color: #1F3F2C; }
.theme-jf .login-card input:focus { border-color: #C8A97E; box-shadow: 0 0 0 2px rgba(200, 169, 126, 0.35); }

/* =====================================================================
   Split-screen layout for provider routing dashboard
   Left: sticky reporting panel  ·  Right: today's task worklist
   ===================================================================== */
.split-layout {
  display: grid;
  grid-template-columns: minmax(300px, 360px) 1fr;
  gap: 20px;
  align-items: start;
}
.split-left { position: sticky; top: 12px; align-self: start; }
.split-right { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 960px) {
  .split-layout { grid-template-columns: 1fr; }
  .split-left { position: static; }
}

/* Reporting card on the left. */
.report-card { padding: 18px 18px 16px; }
.report-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #6b7680; margin-bottom: 10px;
}
.report-sub {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--bcbs-dark-sea); margin: 16px 0 8px;
}
.theme-wakemed .report-sub { color: #007396; }

/* Running tally — the headline counter. */
.tally {
  background: #fdecec; border: 1px solid #f5c6c2; border-radius: 12px;
  padding: 16px 16px 14px; text-align: center;
}
.tally-n {
  font-family: var(--font-heading); font-weight: 800; font-size: 44px; line-height: 1;
  color: #EE2722; letter-spacing: -.01em;
}
.tally-lbl { font-size: 12.5px; font-weight: 700; color: #007396; margin-top: 6px; letter-spacing: .02em; }
.tally-sub { font-size: 11.5px; color: #6b7680; margin-top: 4px; }
.tally.tally-bumped .tally-n { animation: tally-pulse 600ms ease-out; }
@keyframes tally-pulse {
  0% { transform: scale(1); }
  35% { transform: scale(1.12); color: #d61f1a; }
  100% { transform: scale(1); }
}

/* Compact metrics for the left panel (override the row layout for the side rail). */
.metrics-compact { flex-direction: column; gap: 8px; margin-top: 8px; }
.metrics-compact .metric {
  flex: none; min-width: 0; padding: 8px 12px;
  display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: baseline;
}
.metrics-compact .metric-n { font-size: 22px; }
.metrics-compact .metric-label { grid-column: 2; margin-top: 0; font-size: 12px; }
.metrics-compact .metric-sub { grid-column: 2; font-size: 11px; }

/* Projection tiles also stack in the side rail. */
.split-left .proj-grid { flex-direction: column; gap: 8px; margin-bottom: 0; }
.split-left .proj-item { min-width: 0; padding: 8px 12px; }
.split-left .proj-num { font-size: 22px; }
.split-left .proj-lbl { font-size: 12px; }
.split-left .proj-sub { font-size: 11px; color: #6b7680; }

/* Source badges stack vertically in the rail. */
.data-source-stack { flex-direction: column; gap: 4px; }
.data-source-stack .badge { width: fit-content; }

.report-sources { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--jf-line); }

/* ── Task List: over/under-booked rows + two-step reschedule ──────────────── */
/* Red left rail = booked BELOW acuity (safety); amber = booked ABOVE (cost). */
.flag-row.flag-under { border-left: 4px solid #EE2722; }
.flag-row.flag-over  { border-left: 4px solid #E8A13A; }
.site-caution { color: #8a5a16; font-weight: 600; }
.flag.flag-danger { background: #fdecec; border-color: #f3b9b5; color: #8a2018; }
.hdr-under { color: #EE2722; }
.hdr-over  { color: #b07d1e; }

/* Reschedule panel (revealed under a flagged row). */
.resched-panel { border: 1px dashed #6CB2DE; border-radius: 10px; padding: 12px 14px; margin: -2px 0 12px; background: #f7fbfe; }
.resched-head { font-size: 13.5px; font-weight: 600; color: #007396; margin-bottom: 8px; }
.resched-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.resched-opt { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: #fff; border: 1px solid var(--jf-line); border-radius: 10px; padding: 10px 12px; }
.resched-opt-info { flex: 1; min-width: 0; }
.resched-opt .slot { font-size: 16px; color: #007396; font-weight: 600; }
.resched-opt .btn { padding: 9px 18px; font-size: 14px; }

/* Two-step safe-commit. */
.commit-line { font-size: 14px; margin: 8px 0; }
.commit-pending { color: #5b6675; font-weight: 600; }
.commit-done { color: #1f9d57; font-weight: 600; }
.commit-banner { background: #fdecec; border: 1px solid #f3b9b5; color: #8a2018; border-radius: 8px; padding: 9px 12px; font-size: 13px; margin: 8px 0; }
.commit-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 6px; }
.commit-actions .btn { padding: 11px 18px; font-size: 14px; }
.btn.danger { background: #EE2722; color: #fff; }
.btn.danger:hover { background: #cf1f17; }
.btn.danger[disabled] { opacity: .45; cursor: not-allowed; }
.commit-note { font-size: 11.5px; color: #6b7680; margin: 4px 0 0; }
.commit-pilot { font-size: 11.5px; color: #5b6675; margin: 8px 0 0; line-height: 1.5; }
.commit-complete { font-size: 14px; color: #1f9d57; background: #eafaf0; border: 1px solid #bce8cd; border-radius: 8px; padding: 10px 12px; }

/* Patient scheduling buttons: white = book at the right site of care; red
   (.btn.danger) = a higher-acuity site than recommended — flagged, but still
   bookable. The WakeMed theme makes the default .btn red, so the appropriate
   sites need an explicit white treatment to read as the "go" choice. */
.theme-wakemed .btn.book-ok { background: #fff; color: #007396; border: 1px solid #007396; }
.theme-wakemed .btn.book-ok:hover { background: #eef7fb; }

/* =====================================================================
   Payer "Site-of-Care Intelligence" surfaces (Auth Gate + Leakage Report)
   Migrated verbatim from page-level <style> blocks (Stage-1 centralization).
   NOTE: some tokens (--jf-brand-ink, --jf-ok-*, --jf-warn-*, --jf-danger-*,
   --jf-radius, --jf-shadow, --jf-brand, --jf-ink) are completed in the
   token pass; until then they fall back exactly as before.
   ===================================================================== */
.pg-topnav{display:flex;gap:6px;max-width:980px;margin:10px auto 0;padding:0 18px}
.pg-tab{font-size:14px;font-weight:600;color:var(--jf-muted);text-decoration:none;padding:8px 14px;border-radius:10px 10px 0 0;border:1px solid transparent}
.pg-tab[aria-current="page"]{color:var(--jf-brand-ink);background:var(--jf-card);border-color:var(--jf-line);border-bottom-color:var(--jf-card)}
.pg-tab.pg-tab--pending{color:#94a3b8;cursor:default}
.pg-tab.pg-tab--pending:hover{text-decoration:none}
.pg-frame{width:100%;height:1600px;border:0;border-radius:12px;background:#fff}
.pg-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0 4px}
.pg-tile{background:var(--jf-card);border:1px solid var(--jf-line);border-radius:var(--jf-radius);padding:14px 16px;box-shadow:var(--jf-shadow)}
.pg-tile .pg-tile-num{font-size:26px;font-weight:800;letter-spacing:-.5px;line-height:1.1}
.pg-tile .pg-tile-lbl{font-size:12px;color:var(--jf-muted);margin-top:4px;line-height:1.35}
.pg-tile--save .pg-tile-num{color:var(--jf-brand)}
.pg-tile--review .pg-tile-num{color:var(--jf-warn-ink)}
@media(max-width:760px){.pg-tiles{grid-template-columns:repeat(2,1fr)}}
.pg-guardrail{display:flex;flex-wrap:wrap;gap:8px 18px;background:var(--jf-ok-bg);border:1px solid var(--jf-ok-line);color:var(--jf-ok-ink);border-radius:10px;padding:10px 14px;font-size:12.5px;margin:8px 0 0}
.pg-guardrail b{font-weight:700}
.pg-row{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;border:1px solid var(--jf-line);border-left-width:4px;border-radius:12px;padding:12px 14px;margin:10px 0}
.pg-row--over{border-left-color:#E8A13A}
.pg-row--under{border-left-color:var(--jf-danger-ink)}
.pg-row--auto{border-left-color:#a7f3d0}
.pg-row--exception{border-left-color:#94a3b8;background:#f8fafc}
.pg-row-main{min-width:0}
.pg-row-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pg-member{font-weight:700;font-size:14.5px}
.pg-proc{color:var(--jf-muted);font-size:13px;margin-top:3px}
.pg-determination{font-size:13px;margin-top:6px}
.pg-actions{display:flex;flex-direction:column;gap:6px;flex-shrink:0;align-items:stretch}
.pg-actions .btn{padding:8px 14px;font-size:13.5px;text-align:center}
.pg-pill{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;border-radius:999px}
.pg-pill--over{background:#fef3c7;color:#b45309}
.pg-pill--under{background:#fee2e2;color:#991b1b}
.pg-pill--exception{background:#e2e8f0;color:#475569}
.pg-pill--ok{background:var(--jf-ok-bg);color:var(--jf-ok-ink)}
.pg-cms{font-size:12.5px;color:var(--jf-muted);margin-top:4px}
.pg-cms b{color:var(--jf-ink)}
.pg-save{font-weight:700;color:var(--jf-brand)}
.pg-collapse-head{display:flex;justify-content:space-between;align-items:center;cursor:pointer;user-select:none}
.pg-collapse-head .pg-chevron{font-size:13px;color:var(--jf-muted)}
.pg-auto-line{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 4px;border-bottom:1px solid var(--jf-line);font-size:13.5px}
.pg-auto-line:last-child{border-bottom:none}
.pg-auto-ok{color:var(--jf-ok-ink);font-weight:700}
.pg-modal{position:fixed;inset:0;background:rgba(15,23,42,.45);display:flex;align-items:center;justify-content:center;padding:18px;z-index:20}
.pg-modal.hidden{display:none}   /* beat the .pg-modal display:flex so the modal stays hidden until opened */
.pg-modal-box{background:var(--jf-card);border-radius:var(--jf-radius);box-shadow:var(--jf-shadow);max-width:460px;width:100%;padding:20px}
.pg-modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px}
.pg-modal-x{border:none;background:#eef2f1;color:var(--jf-ink);border-radius:8px;width:28px;height:28px;font-size:18px;cursor:pointer;line-height:1}
.pg-modal .kv{margin:10px 0}
.pg-exception-box{margin-top:14px;border-top:1px solid var(--jf-line);padding-top:12px}
.pg-exception-box select,.pg-exception-box textarea{width:100%;font:inherit;padding:8px 10px;border:1px solid var(--jf-line);border-radius:8px;margin-top:6px}
.pg-guard-note{font-size:12px;color:var(--jf-muted);margin-top:8px;display:flex;gap:6px;align-items:flex-start}
.pg-resolved{font-size:13px;color:var(--jf-ok-ink);font-weight:600;margin-top:6px}
.ld.sample{background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.15)}

/* Landing chooser — equal-height 3-up grid, centered card content. */
.chooser { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px; align-items: stretch; }
.choose-card { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.choose-tag { align-self: center; }
.choose-card p { margin-bottom: 4px; }
.choose-btns { margin-top: auto; flex-direction: column; align-items: stretch; gap: 8px; padding-top: 10px; width: 100%; }
.choose-btns .btn { width: 100%; text-align: center; }
@media (max-width: 820px) { .chooser { grid-template-columns: 1fr; } }