/* ==========================================================================
   renders-v3.css - OWNED BY CALL INSIGHTS V3. Nothing else loads this file.

   A full copy of renders.css taken at the 8/21 fork, not an override layer.

   Brees, 8/21: "every version should have its own CSS because one of those
   versions is going to be the main." That is the whole rationale: the version
   that wins gets shipped as DE's real page, and a page that ships should not
   be wired into two pages that were rejected. V3 can therefore be edited
   freely - there is no shared selector to break, and no pin to keep complete.

   Scope: the email and report render components.

   RED FLAG - THIS IS THE COPY DECISION THIS PROJECT ONCE REVERSED. V2 was
   first built as a 3,600-line duplicate of direction-d.css and that duplicate
   was DELETED, because two copies mean a fix to one page silently misses the
   other. The risk did not go away; it was accepted on purpose, and it is
   bounded because two of these three pages get deleted. What replaces the old
   protection is scripts/css-divergence.js: it records the parent's hash at
   fork time and tells you when renders.css has changed since, so a shared fix that
   missed V3 is visible instead of silent. RUN IT BEFORE ANY RELEASE.
   ========================================================================== */

/* ==========================================================================
   Vet Call Insights — renders.css
   The three email renders: daily callback list, weekly recap, monthly proof.

   WHY THIS FILE EXISTS (deviation from the brief's file list, deliberate):
   The brief says "build the shared email renders once and adapt their framing
   per direction." The renders ARE identical product UI across all three
   directions — only their framing differs — so their styles live here rather
   than being triplicated across direction-a/b/c.css.

   This does not violate the "base.css must not become a shared design"
   warning: that warning is about PAGE LAYOUT being shared. This is product
   UI, which is supposed to be the same object in all three directions.
   Per-direction framing (scale, crop, background, offsets) stays in the
   direction stylesheets.

   Constraints held throughout:
   - No red/green status colour, no scorecards, no percentage rings, no
     gauge charts, no leaderboards, no staff names attached to performance.
   - Reads as product UI, not page design: denser, white body, functional
     accents only.
   - Legible to 360px. Below 640px content simplifies rather than scaling down.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SHELL — minimal email-client chrome
   A header strip and a body. Not a browser window, not a phone bezel, not
   a laptop frame.
   -------------------------------------------------------------------------- */

.render {
  background-color: var(--white);
  border: 1px solid var(--ink-12);
  border-radius: var(--r-render);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  /* Product UI runs tighter than the page around it. */
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink);
  container-type: inline-size;
}

.render__chrome {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--ink-10);
  background-color: var(--oat);
}

.render__from {
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.01em;
}

.render__subject {
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  color: var(--ink);
}

.render__time {
  margin-left: auto;
  font-size: var(--fs-eyebrow);
  color: var(--ink-muted);
  white-space: nowrap;
}

.render__body {
  padding: var(--s-3);
}

.render__intro {
  margin-bottom: var(--s-3);
  font-size: var(--fs-small);
  max-width: none;
}

.render__footnote {
  margin-top: var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px solid var(--ink-10);
  font-size: 0.8125rem;
  color: var(--ink-muted);
  max-width: none;
}

.render__footnote + .render__footnote {
  margin-top: var(--s-1);
  padding-top: 0;
  border-top: 0;
}

/* --------------------------------------------------------------------------
   2. DAILY CALLBACK LIST (6.1)
   Three caller cards, sorted by potential revenue. Card one is Bella —
   the same story as the Sarah quote in section 5.6. That connection is the
   sharpest thing on the page.
   -------------------------------------------------------------------------- */

.callback-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.callback {
  padding: var(--s-2);
  border: 1px solid var(--ink-10);
  border-radius: 12px;
  /* Targetable by Direction A's scroll-linked highlight. The wash is applied
     via .is-lit and released on the next step — see direction-a.js. */
  transition: background-color var(--d-highlight) var(--ease-out);
}

.callback.is-lit {
  background-color: rgba(255, 174, 218, 0.28);
}

.callback__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-2);
  margin-bottom: var(--s-1);
}

.callback__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
}

.callback__phone {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  color: var(--indigo);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.callback__value {
  margin-left: auto;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  color: var(--ink-muted);
  white-space: nowrap;
}

.callback__pet {
  margin-bottom: var(--s-1);
  font-size: var(--fs-eyebrow);
  color: var(--ink-muted);
}

.callback__line {
  margin-bottom: 6px;
  font-size: var(--fs-eyebrow);
  max-width: none;
}

.callback__line--flag {
  display: flex;
  align-items: flex-start;
  gap: var(--s-1);
}

/* The flag marker. Marigold, a shape only — it never carries text and it is
   never a red/green status light. */
.callback__flag-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background-color: var(--marigold);
}

/* ⏹ `.callback__offer` IS GONE — 8/24. It was the invented "Offer: 2:40 PM
   today with Dr. Reyes" line, and the real product has no such field. The
   card's real anatomy is below.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   2.1 THE REAL CARD — rebuilt 8/24 from three product screenshots.

   Brees sent three real Vet Call Insights cards from Alie's Drive folder
   (all three titled "… - ANONYMIZE") and asked for the renders to become the
   real thing. What was here before was invented sample data with fields the
   product does not have; this is the product's own anatomy, in order:

       CALLER NAME  ·  Pet:  ·  phone · time
       the ask, in its own panel, italic
       Services / Outcome / Reason
       the flag line
       the summary, in its own panel
       three buttons  ·  two links

   🔴 EVERY NAME AND NUMBER ON THIS PAGE IS FABRICATED. See the markup for the
   full substitution table. Phone numbers use the 555-01xx range, which is
   reserved for fiction precisely so a rendered number can never dial a real
   person — the page already used (512) 555-0147 for the same reason.

   📌 THE PRODUCT'S COLOURS ARE NOT IMPORTED WHOLESALE, and two of them could
   not be. The product sets its flag line in red and its primary button in
   green; measured, that red is 3.07:1 on this card's ground — under the 4.5
   floor — and this file carries a standing rule from 8/11 that the flag
   marker "never carries text and is never a red/green status light". So the
   flag keeps the marigold dot and ink text, and the buttons map onto the
   brand: lime for the affirmative (8.95:1 with ink), indigo for the
   secondary (8.08:1 with white). The STRUCTURE is the product's; the palette
   stays the page's. Raised with Brees rather than decided quietly.
   -------------------------------------------------------------------------- */

/* 🔴 THIS BLOCK REPRODUCES THE PRODUCT, NOT THE PAGE — 8/24.

   Brees: "I want it to be exactly like the screenshot. Clients need to see
   what they'll actually see." So the card drops the page's type and palette
   and takes the product's: system sans, the lavender card, white panels, the
   indigo rule, square-ish buttons in green / indigo / grey.

   ⏹ THIS OVERRIDES THE 8/11 RULE RECORDED ABOVE — that the flag marker "never
   carries text and is never a red/green status light". The product's flag IS
   red text and its confirm button IS green, and the whole point of the render
   is fidelity. The rule stands for everything the PAGE draws; it does not
   apply to a reproduction of someone else's UI.
   🔴 The four failing colours are corrected in the tokens, not here — see the
   --vci-* block in base-v3.css for the measurements. Do not "restore" them to
   the product's literal values.
   -------------------------------------------------------------------------- */
.callback--real {
  border: 0;
  border-left: 4px solid var(--vci-indigo);
  border-radius: 0;
  background-color: var(--vci-card);
  padding: 18px 20px;
  font-family: var(--font-vci);
  color: var(--vci-ink);
  line-height: 1.45;
}

.callback__caller {
  font-family: var(--font-vci);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  /* No text-transform: the caller ID arrives uppercase as DATA — "WIRELESS
     CALLER", "ALGONQUIN IL" — and styling it would fake that on names that
     do not. */
  text-transform: none;
}

.callback__meta {
  margin-top: 4px;
  font-size: 13px;
  color: var(--vci-label);
}

.callback__pet {
  margin-top: 2px;
  font-size: 13px;
  font-style: italic;
  color: var(--vci-label);
}

.callback__phone {
  font-size: 13px;
  font-weight: 700;
  color: var(--vci-indigo);
  text-decoration: none;
}

.callback__ask,
.callback__summary {
  margin-top: 14px;
  padding: 12px 14px;
  background-color: var(--vci-panel);
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.5;
  max-width: none;
}

.callback__ask { font-style: italic; }

.callback__facts {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.6;
}

.callback__facts dt {
  display: inline;
  font-weight: 700;
  color: var(--vci-label);
}

.callback__facts dd {
  display: inline;
  margin: 0;
}

.callback__facts dd::after {
  content: "";
  display: block;
}

/* The flag. Red text, as the product draws it — at red-700 rather than the
   product's red-500, which measured 3.50:1 on this card. */
.callback__flag {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--vci-red);
  max-width: none;
}

.callback__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.callback__btn {
  padding: 9px 16px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.callback__btn--yes { background-color: var(--vci-green); color: var(--white); }
.callback__btn--alt { background-color: var(--vci-indigo); color: var(--white); }
.callback__btn--no { background-color: var(--vci-grey); color: var(--vci-grey-ink); }

.callback__links {
  margin-top: 14px;
  font-size: 13px;
}

.callback__links span {
  color: var(--vci-indigo);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.callback__links span + span { margin-left: 18px; }

.callback__action {
  display: inline-block;
  margin-top: var(--s-2);
  padding: 7px 14px;
  background-color: var(--lime);
  color: var(--ink);
  border-radius: var(--r-pill);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  transition: background-color var(--d-micro) var(--ease-out);
}

/* --------------------------------------------------------------------------
   3. WEEKLY RECAP (6.2)
   Opens with what the team did well. That is a hard requirement, not a
   nice-to-have — it is the design's main defence against the surveillance
   read. No staff names. No rankings. No red.
   -------------------------------------------------------------------------- */

.recap__praise {
  padding: var(--s-2);
  margin-bottom: var(--s-3);
  background-color: rgba(210, 219, 117, 0.34);
  border-radius: 12px;
}

.recap__praise-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.recap__praise p {
  font-size: var(--fs-eyebrow);
  max-width: none;
}

/* Booking rate as a single plain figure with a short label. Deliberately
   not a ring, not a gauge, not a trend arrow. */
.recap__figure {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  padding-bottom: var(--s-2);
  margin-bottom: var(--s-2);
  border-bottom: 1px solid var(--ink-10);
}

.recap__figure-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: var(--ls-display);
}

.recap__figure-label {
  font-size: var(--fs-eyebrow);
  color: var(--ink-muted);
  max-width: 22ch;
}

.recap__section-label {
  margin-bottom: var(--s-1);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.recap__patterns {
  margin-bottom: var(--s-3);
}

.recap__pattern {
  display: flex;
  gap: var(--s-1);
  margin-bottom: var(--s-1);
  font-size: var(--fs-eyebrow);
}

.recap__pattern::before {
  content: "";
  flex: 0 0 auto;
  width: 3px;
  align-self: stretch;
  border-radius: 2px;
  background-color: var(--sky);
}

.recap__pattern span {
  padding-left: 5px;
}

.recap__examples {
  border-top: 1px solid var(--ink-10);
  padding-top: var(--s-2);
}

.recap__example {
  padding: 10px 0;
  border-bottom: 1px solid var(--ink-08);
  font-size: var(--fs-eyebrow);
}

.recap__example:last-child {
  border-bottom: 0;
}

.recap__example strong {
  font-weight: 600;
}

.recap__example span {
  display: block;
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   4. MONTHLY PROOF (6.3)
   Headline figure, then a table of recaptured bookings matched to invoice
   numbers. No charts — a table of real dollars is more persuasive to this
   buyer than any visualisation, and it avoids the dashboard feel the copy
   explicitly disclaims.
   -------------------------------------------------------------------------- */

.proof-render__headline {
  padding-bottom: var(--s-2);
  margin-bottom: var(--s-2);
  border-bottom: 1px solid var(--ink-10);
}

.proof-render__value {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 7cqi, 2.75rem);
  line-height: 1;
  letter-spacing: var(--ls-display);
}

.proof-render__label {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-eyebrow);
  color: var(--ink-muted);
}

.proof-table {
  font-size: var(--fs-eyebrow);
}

.proof-table th {
  padding: 0 0 var(--s-1);
  border-bottom: 1px solid var(--ink-10);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: left;
}

.proof-table th:last-child,
.proof-table td:last-child {
  text-align: right;
}

.proof-table td {
  padding: 10px 0;
  border-bottom: 1px solid var(--ink-08);
  vertical-align: top;
}

.proof-table tbody tr:last-child td {
  border-bottom: 0;
}

.proof-table__invoice {
  color: var(--ink-muted);
  white-space: nowrap;
}

.proof-table__amount {
  font-family: var(--font-display);
  font-weight: 600;
  white-space: nowrap;
}

.proof-table tfoot td {
  padding-top: var(--s-2);
  border-top: 1px solid var(--ink-12);
  border-bottom: 0;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   5. NARROW VIEWPORTS
   Below 640px the renders reflow to a single column and stay legible. They
   must never become a horizontally scrolling artifact or shrink into
   illegibility, so content SIMPLIFIES here rather than scaling down.
   -------------------------------------------------------------------------- */

@container (max-width: 420px) {
  .render__body {
    padding: var(--s-2);
  }

  .callback__value {
    /* Reclaim the row: the dollar value drops to its own line rather than
       squeezing the name to two characters. */
    margin-left: 0;
    flex-basis: 100%;
  }

  .render__time {
    margin-left: 0;
    flex-basis: 100%;
  }

  .recap__figure {
    flex-direction: column;
    gap: 6px;
  }

  /* The invoice column is the first thing to go: the amount and the label
     carry the point without it. */
  .proof-table__invoice {
    display: none;
  }
}

@media (max-width: 400px) {
  .callback__value {
    margin-left: 0;
    flex-basis: 100%;
  }

  .proof-table__invoice {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   2.2 THE WEEKLY RECAP — rebuilt 8/24 from the real PDF.

   Brees sent `VetCall-Weekly-Recap-Sample.pdf`. What was here before was
   invented: a "What went well" praise block, a 64% figure, "Worth a
   conversation" patterns and a "The call behind it" example — none of which
   the product sends. This is the real email's own structure and its own
   numbers, and the sample is already anonymised at source ("Demo Practice").

   ⚠️ The recap is a FULL PAGE of email. Everything through Top Missed
   Opportunity Types is in the DOM; how much of it the stack card can show is
   the pin question that is still open — see the height note in the markup.
   -------------------------------------------------------------------------- */

.recap {
  font-family: var(--font-vci);
  color: var(--vci-head);
  line-height: 1.45;
}

.recap__practice {
  font-size: 15px;
  font-weight: 700;
}

.recap__range {
  font-size: 12px;
  color: var(--vci-muted);
}

.recap__rule {
  height: 3px;
  margin: 10px 0 0;
  border: 0;
  background-color: var(--vci-indigo);
}

/* The stat band — three across, two deep, on the recap's own grey. */
.recap__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 8px;
  padding: 14px 10px;
  background-color: var(--vci-band);
  text-align: center;
}

.recap__stat-value {
  display: block;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.recap__stat-value--alert { color: var(--vci-red); }

.recap__stat-label {
  display: block;
  margin-top: 2px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vci-muted);
}

.recap__delta {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  font-weight: 600;
  color: var(--vci-pos);
}

.recap__delta--alert { color: var(--vci-red); }

.recap__listened {
  margin: 12px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  text-align: center;
  color: var(--vci-muted);
  max-width: none;
}

.recap__h {
  margin: 14px 0 6px;
  font-family: var(--font-vci);
  font-size: 13px;
  font-weight: 700;
  color: var(--vci-head);
}

.recap__line {
  margin: 0 0 3px;
  font-size: 11.5px;
  max-width: none;
}

.recap__line--muted { color: var(--vci-muted); }
.recap__line b { font-weight: 700; }
.recap__pos { color: var(--vci-pos); font-weight: 700; }

.recap__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}

.recap__table th {
  padding: 6px 8px;
  background-color: var(--vci-band);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vci-muted);
  text-align: right;
}

.recap__table th:first-child,
.recap__table td:first-child { text-align: left; }

.recap__table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--vci-band);
  text-align: right;
}

.recap__miss { color: var(--vci-red); font-weight: 600; }

.recap__type {
  margin: 0 0 3px;
  font-size: 11.5px;
  max-width: none;
}

.recap__type b { font-weight: 700; }


/* --------------------------------------------------------------------------
   2.3 THE MONTHLY RECAPTURE STATEMENT — rebuilt 8/24 from the real PDF.

   `VetCall-Recapture-Sample.pdf`. A third template again: a navy masthead,
   the month's recaptured total in green, then the callers it is made of with
   their invoiced amounts, an amber "worth a double-check" line where the
   match was made on name alone, and the confirmed total ruled off at the
   bottom.

   🔴 ALL TEN CALLER NAMES ARE FABRICATED — see the markup for the table. The
   AMOUNTS AND DATES ARE THE PDF'S OWN and must stay that way: 428.51 + 355.97
   + 137.43 + 80.95 + 30.59 = 1,033.45 exactly, and the statement's whole
   argument is that the total is the sum of named, invoiced visits. Changing
   an amount breaks the arithmetic a client would check.
   -------------------------------------------------------------------------- */

.stmt {
  font-family: var(--font-vci);
  color: var(--vci-head);
  line-height: 1.45;
}

.stmt__masthead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: -14px -16px 0;
  padding: 12px 16px;
  background-color: var(--vci-navy);
  border-bottom: 3px solid var(--vci-indigo);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.stmt__brand { color: var(--white); }
.stmt__product { color: var(--vci-mint); }

.stmt__eyebrow {
  margin: 16px 0 0;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: var(--vci-muted);
  max-width: none;
}

.stmt__total {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 600;
  line-height: 1.05;
  text-align: center;
  color: var(--vci-money);
}

.stmt__intro {
  margin: 10px auto 0;
  max-width: 44ch;
  font-size: 11.5px;
  line-height: 1.5;
  text-align: center;
}

.stmt__label {
  margin: 16px 0 6px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vci-indigo);
}

.stmt__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  padding: 8px 0;
  border-top: 1px solid var(--vci-band);
}

.stmt__who {
  font-size: 12px;
  font-weight: 700;
}

.stmt__pill {
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background-color: var(--vci-mint);
  color: var(--vci-money);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.stmt__amount {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--vci-money);
  white-space: nowrap;
}

.stmt__when {
  grid-column: 1;
  font-size: 11px;
  color: var(--vci-muted);
}

.stmt__check {
  grid-column: 1;
  font-size: 11px;
  color: var(--vci-amber);
  font-weight: 600;
}

.stmt__check span {
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.stmt__confirmed {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 2px solid var(--vci-navy);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.stmt__confirmed-value {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--vci-money);
}

.stmt__note {
  margin-top: 10px;
  font-size: 10.5px;
  font-style: italic;
  line-height: 1.5;
  color: var(--vci-muted);
  max-width: none;
}


/* --------------------------------------------------------------------------
   2.4 THE EMAIL'S OWN HEADER — added to the hero card 8/24.

   Brees, sending the top strip of `VCI-Booked-Appointments-Tab-Mock.pdf`: "i
   want to get this part added in the hero img though. Change the Veterinary
   hospital name to a ficticous one."

   So the hero card gains what the real emails carry above their content: the
   DE lockup, the practice's own name, the dates the calls came in, and the
   tab strip with the Booked Appointments count. Only that strip — none of the
   mock's ten visit notes, which are real clinical histories attached to named
   owners at a named practice.

   🔁 9/17 — THE HEADER NOW NAMES A REAL CLIENT, STATE OF THE HEART, AT BREES' REQUEST ("let's change it to State of
   the Heart"), replacing the fictitious Brightwater (which had been checked: no Salesforce account matched it). The
   callers, dates and counts in the card are still illustrative; only the practice name is real.

   ⚠️ CALLBACKS IS THE ACTIVE TAB HERE, NOT BOOKED APPOINTMENTS. The mock has
   Booked Appointments selected because that is what it was validating; this
   card shows a CALLBACK, so copying its active state would have labelled the
   panel as one thing and filled it with another. The count still shows.
   -------------------------------------------------------------------------- */

.deck-hdr {
  margin-bottom: 12px;
  font-family: var(--font-vci);
}

.deck-hdr__brand {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--vci-muted);
}

.deck-hdr__mark {
  width: 14px;
  height: 14px;
}

.deck-hdr__practice {
  margin: 8px 0 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--vci-navy);
}

.deck-hdr__dates {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--vci-muted);
}

.deck-hdr__tabs {
  display: flex;
  gap: 18px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 2px solid var(--vci-indigo);
  font-size: 11.5px;
}

.deck-hdr__tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 7px;
  color: var(--vci-muted);
}

/* The selected tab: weight plus an indigo underline, as the product draws it. */
.deck-hdr__tab--on {
  font-weight: 700;
  color: var(--vci-navy);
  box-shadow: inset 0 -2px 0 0 var(--vci-indigo);
}

.deck-hdr__badge {
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background-color: var(--vci-indigo);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
}

/* 9/16 (later): the "I Called Back" button is brand lime now (--vci-green), so its label is ink, not white
   (white on lime 1.49; ink on lime 8.95). See the --vci-* note in base-v3.css. */
.callback__btn--yes { color: var(--vci-ink); }