/* ═══════════════════════════════════════════════════════════════════════════
   OURS PRIVACY CMP — LAYOUT + SIZING OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════
   WHAT
     Layout, spacing and control-sizing overrides for the Ours Privacy consent
     banner and preferences modal. Loaded immediately AFTER the CMP's own
     stylesheet (https://metrics.helloclearhealth.com/consent.css) in <head>.

   TYPE SCALE — READ THIS BEFORE SHRINKING ANYTHING
     One dial: `#cc-main { font-size }`. Almost every size in the CMP stylesheet
     is em-relative, so changing it moves the whole widget together. It is set
     to 14px — two notches under the CMP's 16px — which lands the card at
     title 14.7px / body 12.6px.

     There is a floor, and it was found the hard way: at 13.5px the same ratios
     produced 12.8px titles and 10.8px body copy, which is not readable on a
     card. Do not go below 14px. If something specific needs to be smaller,
     size that element, don't move this.

     Buttons are the exception that proves it — their font is raised to 0.95em
     below so the controls stay legible (13.3px) while the copy shrinks.

   SCOPE — DELIBERATE
     Spacing, layout flow and control sizes ONLY. No colours, radii, fonts or
     z-index. Those stay owned by the Ours Privacy portal (Design → Theme
     Styling), which writes --cc-* custom properties onto :root at runtime —
     touching them here would silently fight the portal.

   HOW IT WINS
     The CMP ships plain `#cc-main .x` selectors and injects no <style> tag of
     its own (it only setProperty()s the --cc-* colour vars). Same specificity
     + later in the document = these rules win. `!important` appears only where
     the CMP's own <=640px block already uses it, and rules that compete with a
     `.cm--bar.cm--inline`-style two-class CMP selector are duplicated at that
     specificity — those lose on weight, not on order.

   WHICH LAYOUTS MATTER
     Default Rule (rest of world) is Cloud. All three region overrides — the US
     opt-in 19, the US opt-out 33, and the EEA 29 — are still plain `bar` in the
     config export, so the bar block below is NOT dead code: it is what US
     visitors actually see. Delete it only once "Sync to All Regions" has been
     used, and only after the default rule's button layout is fixed (syncing
     today would push its missing reject button onto the US and EEA rules).

   REF   change-register "PHASE 1 — Minimal install"
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── The one dial. See TYPE SCALE above before changing it. ──────────────── */
#cc-main {
  font-size: 14px;          /* CMP stock is 16px */
}

/* ═══ CONSENT MODAL (.cm) — shared across layouts ═══════════════════════════ */

/* Stock leaves 1rem above the copy and nothing below it, which floats the text
   inside the card. Even it out. */
#cc-main .cm__texts {
  padding: 1rem 0 0.9rem;
}

/* The description arrives as markdown, so a two-paragraph body is two <p>s —
   and the CMP's reset (`all: unset`) strips them back to inline, running the
   sentences together. Restore the break the copy was written to have. */
#cc-main .cm__desc p {
  display: block;
}

#cc-main .cm__desc p + p {
  margin-top: 0.65em;
}

#cc-main .cm__title + .cm__desc {
  margin-top: 0.5em;        /* was 1.1em — too airy once the card is narrow */
}

#cc-main .cm__desc {
  padding-bottom: 0;        /* was 1em; .cm__texts owns the bottom gap now */
}

/* Buttons: 42px tall with a 120px floor is a page CTA, not a dialog control.
   36px with the label setting the width is the right weight for a card, and
   the vertical padding is trimmed so the pill doesn't read as thick. The font
   goes UP relative to the base so the label stays legible at 13.3px. */
#cc-main .cm__btn,
#cc-main .pm__btn {
  min-height: 36px;
  min-width: 0;
  font-size: 0.95em;        /* 13.3px — stock .82em would be 11.5px here */
  padding: 0.35em 1.15em;

  /* The label box must be exactly the text height. The CMP resets buttons with
     `all: initial`, but that only holds against rules it outranks — a host-page
     rule that lands on these buttons re-inherits a page line-height and pads
     every button from the inside, which reads as "thick" and is invisible in
     the box model. Pinned so the height is min-height + padding, nothing else. */
  line-height: normal !important;
}

#cc-main .cm__btns {
  padding: 1rem 1.3rem;
}

/* Footer link strip */
#cc-main .cm__footer {
  padding: 0.3em 0 0.35em;  /* was .4em 0 .5em */
}

#cc-main .cm__link-group {
  font-size: 0.78em;        /* was .8em */
}

/* ── Cloud card — the Default Rule's layout ──────────────────────────────── */

/* Stock reserves 23em for the button column and puts a 19em floor under each
   button, so two short labels eat a third of the card. Size them to their
   text instead; the card gets its width back for the copy. */
#cc-main .cm--cloud .cm__btns {
  max-width: 16em;          /* was 23em */
  justify-content: center;
}

#cc-main .cm--cloud .cm__btn {
  min-width: 11em;          /* was 19em */
}

/* Stacked in a column here, so the 6px stock gap reads as a misprint. */
#cc-main .cm--cloud .cm__btn + .cm__btn {
  margin-top: 0.5rem;
}

#cc-main .cm--cloud.cm--inline .cm__btn {
  min-width: 8em;           /* was 10em */
}

#cc-main .cm--cloud .cm__desc {
  max-height: 11em;         /* was 9.4em — fits the two-paragraph body */
}

/* ── Box layout ──────────────────────────────────────────────────────────── */
#cc-main .cm--box.cm--wide .cm__btn {
  min-width: 100px;         /* was 120px */
  padding-left: 1.4em;
  padding-right: 1.4em;
}

/* ── Bar layout — still live on all three region overrides ───────────────────
   The CMP ships two bar shapes: "bar" stacks the copy above a button row
   (~236px stock), "bar inline" puts them side by side (~139px stock). A rule
   change re-renders the modal, so a visitor can watch the banner jump from one
   shape to the other. These rules give both variants the same geometry — full
   bleed, copy left, buttons right, one row — so the swap is invisible and the
   bar stops eating vertical space.

   Desktop only. Below 641px the CMP's own all-!important block takes over with
   a stacked, full-width layout that is right for a phone; leaking into it stops
   the buttons stretching and drops the separator above them.
   ──────────────────────────────────────────────────────────────────────────── */
@media screen and (min-width: 641px) {

  #cc-main .cm--bar .cm__body,
  #cc-main .cm--bar .cm__links,
  #cc-main .cm--bar.cm--inline .cm__body,
  #cc-main .cm--bar.cm--inline .cm__links {
    max-width: none;          /* was 55em (bar) / 74em (bar inline), centred */
  }

  #cc-main .cm--bar .cm__body,
  #cc-main .cm--bar.cm--inline .cm__body {
    flex-direction: row;      /* plain "bar" stacks by default; make it a row */
    align-items: center;
    gap: 1.5rem;
    padding: 0.5rem 1.75rem;  /* was .5em 0 .9em — side gutters live here now */
  }

  #cc-main .cm--bar.cm--flip .cm__body,
  #cc-main .cm--bar.cm--inline.cm--flip .cm__body {
    flex-direction: row-reverse;
  }

  /* Copy takes the slack, buttons keep their natural width at the right edge. */
  #cc-main .cm--bar .cm__texts {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
  }

  #cc-main .cm--bar .cm__btns,
  #cc-main .cm--bar.cm--inline .cm__btns {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;      /* stops buttons stretching to the bar's height */
    justify-content: flex-end;
    max-width: none;          /* was 23em on the inline variant */
    padding: 0;
    border-top: none;
  }

  #cc-main .cm--bar.cm--flip .cm__btns,
  #cc-main .cm--bar.cm--inline.cm--flip .cm__btns {
    flex-direction: row-reverse;
  }

  /* Gutters moved to .cm__body, so the inner blocks must not add their own. */
  #cc-main .cm--bar .cm__title,
  #cc-main .cm--bar .cm__desc {
    padding: 0;
  }

  #cc-main .cm--bar .cm__desc p + p {
    margin-top: 0.3em;        /* one row: keep the second sentence tight */
  }

  /* Row layout: the gap between button groups is horizontal, not vertical. */
  #cc-main .cm--bar .cm__btn-group + .cm__btn-group {
    margin-top: 0;
    margin-left: 0.5rem;
  }

  #cc-main .cm--bar.cm--flip .cm__btn-group + .cm__btn-group {
    margin-bottom: 0;
    margin-right: 0.5rem;
  }

  #cc-main .cm--bar .cm__btn {
    white-space: nowrap;
  }

  /* Full-bleed copy fits on one or two lines, so the stock 40vh cap never bites
     and no scrollbar appears between the text and the buttons. */
  #cc-main .cm--bar .cm__desc {
    max-height: none;
  }

  #cc-main .cm--bar .cm__links {
    padding-left: 1.75rem;    /* line the footer links up with the copy above */
    padding-right: 1.75rem;
  }
}

/* ═══ PREFERENCES MODAL (.pm) ═══════════════════════════════════════════════ */

/* Stock is a fixed 43em × full-height panel even when it holds four
   categories. Narrow it and let the height follow the content.

   Desktop only: below 641px the CMP turns the modal into an edge-to-edge sheet,
   and `#cc-main .pm--box` outweighs its `#cc-main .pm` rule on nothing but
   document order — left unscoped, this quietly insets that sheet. */
@media screen and (min-width: 641px) {
  #cc-main .pm--box {
    max-width: 34em;        /* was 43em */
    height: auto;           /* was calc(100% - 2em) — always full height */
    max-height: calc(100% - 2em);
  }
}

#cc-main .pm__header,
#cc-main .pm__body,
#cc-main .pm__footer {
  padding: 0.9em 1.2em;     /* was 1em 1.4em */
}

#cc-main .pm__title {
  margin-right: 1em;        /* was 2em */
}

#cc-main .pm__close-btn {
  width: 34px;              /* was 40px */
  height: 34px;
}

/* Intro blurb + the gap before the "additional info" section: 2em each. */
#cc-main .pm__section:first-child {
  margin-bottom: 1.1em;     /* was 2em */
}

/* Intro heading sat flush on its own body text. The :not() is required — the
   first category row is a :first-child too, and it needs the flex title that
   keeps its service badge on the same line as the label. */
#cc-main .pm__section:first-child:not(.pm__section--toggle) .pm__section-title {
  display: block;
  margin-bottom: 0.35em;
}

/* The first category row is also a :first-child (of .pm__section-toggles), so
   it inherits the intro's parting gap and the list reads unevenly — one wide
   gap after row 1, tight gaps after the rest. Put it back on the row rhythm. */
#cc-main .pm__section-toggles .pm__section:first-child {
  margin-bottom: 0.375rem;
}

#cc-main .pm__section-toggles + .pm__section {
  margin-top: 1.1em;        /* was 2em */
}

#cc-main .pm__section {
  padding: 0.8em;           /* was 1em */
}

/* Category rows carry BOTH the .pm__section padding and the tinted
   .pm__section-title block's own padding, so every row is boxed inside a
   second, invisible box. Drop the outer one — the tinted block then fills the
   row edge to edge and each category costs ~45px instead of ~95px. */
#cc-main .pm__section--toggle {
  padding: 0;
  border: none;
}

/* The right padding is load-bearing, NOT decorative: the toggle is absolutely
   positioned, so this padding is the only thing reserving space for it. The
   title's em is its own 0.95em font (13.3px at a 14px base), so the reserve
   must clear (toggle 50px + right offset 12px + breathing room) ÷ 13.3px ≈
   5.4em. Anything smaller and the vendor-count badge slides underneath the
   toggle — that is a real bug this file has already shipped once. Recompute
   whenever the toggle size, its offset, the title font, or the base changes. */
#cc-main .pm__section--toggle .pm__section-title {
  padding: 0.75em 5.4em 0.75em 1em;   /* was 1.1em 5.4em 1.1em 1.2em */
}

#cc-main .pm__section--expandable .pm__section-title {
  padding-left: 3em;        /* was 3.4em */
}

#cc-main .pm__section--expandable .pm__section-arrow {
  left: 14px;               /* was 18px */
}

#cc-main .section__toggle-wrapper {
  right: 12px;              /* was 18px */
}

/* "Show Vendors in Preferences" is on, so each category title carries a
   service-count badge. Keep it tight to the title and clear of the toggle. */
#cc-main .pm__badge {
  margin-left: 0.6em;       /* was 1em */
}

#cc-main .pm__section--toggle .pm__section-desc {
  padding: 0.9em 1em;       /* was 1em */
}

#cc-main .pm__section-title-wrapper + .pm__section-desc-wrapper {
  margin-top: 0.6em;        /* was .85em */
}

/* Height, font and padding are shared with .cm__btn near the top of the file;
   only the width floor differs — the footer buttons here read better with a
   little more body than the banner's. */
#cc-main .pm__btn {
  min-width: 100px;         /* was 110px */
}

/* ═══ ≤640px — the CMP's own mobile block is all !important, so match it ════ */
@media screen and (max-width: 640px) {

  #cc-main .cm__title,
  #cc-main .cm__desc,
  #cc-main .cm__btns,
  #cc-main .cm__links {
    padding-left: 1.1rem !important;
    padding-right: 1.1rem !important;
  }

  /* The CMP's own 40vh cap on .cm__texts is left in place: tightening it cut
     the copy mid-sentence behind a scrollbar on a 360px phone. For the same
     reason the cloud card's own description cap is released here — the copy
     wraps to roughly twice as many lines on a phone as it does in the card. */
  #cc-main .cm__texts {
    padding-top: 0.9rem;
    padding-bottom: 0.3rem;
  }

  #cc-main .cm--cloud .cm__desc {
    max-height: none;
  }

  #cc-main .cm__btns {
    padding-top: 0.8rem !important;
    padding-bottom: 0.8rem !important;
  }

  /* One row of buttons instead of a vertical stack. The CMP's mobile block sets
     flex-direction on these but no align-items, so the default `stretch` blew
     each button up to the row's full height — that is what made them look
     oversized on a phone. Centre them and the row is exactly one button tall. */
  #cc-main .cm__btns,
  #cc-main .cm--bar .cm__btns,
  #cc-main .cm--wide .cm__btns,
  #cc-main .cm--cloud .cm__btns,
  #cc-main .cm__btn-group,
  #cc-main .cm--bar .cm__btn-group,
  #cc-main .cm--wide .cm__btn-group,
  #cc-main .cm--cloud .cm__btn-group {
    flex-direction: row !important;
    align-items: center !important;
  }

  #cc-main .cm--flip .cm__btns,
  #cc-main .cm--flip .cm__btn-group {
    flex-direction: row-reverse !important;
  }

  #cc-main .cm__btn + .cm__btn,
  #cc-main .cm__btn-group + .cm__btn-group {
    margin-top: 0 !important;
    margin-left: 0.5rem !important;
  }

  #cc-main .cm--flip .cm__btn + .cm__btn,
  #cc-main .cm--flip .cm__btn-group + .cm__btn-group {
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
  }

  /* Equal halves across the full width — two buttons of visibly different
     widths side by side is what reads as unfinished on a phone. */
  #cc-main .cm__btn-group {
    flex: 1 1 auto !important;
  }

  #cc-main .cm__btn {
    flex: 1 1 0 !important;
  }

  /* Cloud/box width floors are dropped so a phone never gets a 154px-wide
     button in a 354px viewport. */
  #cc-main .cm__btn,
  #cc-main .cm--cloud .cm__btn,
  #cc-main .cm--box.cm--wide .cm__btn,
  #cc-main .pm__btn {
    min-height: 36px;
    min-width: 0 !important;
    /* Tighter than desktop on purpose: at 354px the half-width button has
       ~121px of room and "Manage preferences" needs ~125px, so a 1em inset
       wrapped it to two lines. 0.6em buys the line back. */
    padding-left: 0.6em;
    padding-right: 0.6em;
  }

  #cc-main .pm__header,
  #cc-main .pm__body,
  #cc-main .pm__footer {
    padding: 0.85em !important;   /* was .9em */
  }
}
