/* ==========================================================================
   Curivya Listings — Theme 1 — Elevated
   Raised cards with soft shadows and rounded corners.

   Styles ONLY the plugin's own markup (.cvl-*) and its dialogs. It does not
   touch the site's header, navigation, typography or footer: a plugin that
   restyles the theme around it is a plugin nobody can drop into an existing
   site.

   Tokens are scoped rather than declared on :root for the same reason — a
   customer's theme may already define its own variables, and a plugin has no
   business overwriting them.
   ========================================================================== */

.cvl-directory,
.cvl-modal {
  /* NEUTRAL FALLBACKS ONLY.
     The organization's primaryColor and secondaryColor are set in Org-Admin,
     and the plugin injects them over these at render time (see brand_css()).
     What is here is what a site sees before those arrive, or if the org never
     set any — deliberately colourless, so an unbranded install looks plain
     rather than wearing somebody else's palette. */
  --cvl-primary: #1F2937;
  --cvl-primary-strong: #1F2937;
  --cvl-on-primary: #FFFFFF;
  --cvl-accent: #6B7280;
  --cvl-accent-ink: #4B5563;
  --cvl-ink: #1B2430;
  --cvl-muted: #5B6472;
  --cvl-line: #E2E5EA;
  --cvl-wash: #F5F6F8;
  --cvl-accent-wash: #F0F1F3;
  --cvl-btn-bg: #1F2937;
  --cvl-btn-fg: #FFFFFF;
  --cvl-btn-bg-hover: #111827;
  --cvl-btn-fg-hover: #FFFFFF;

  --cvl-elevation-z8:
    0 5px 5px -3px rgba(0, 0, 0, .2),
    0 8px 10px 1px rgba(0, 0, 0, .14),
    0 3px 14px 2px rgba(0, 0, 0, .12);
  --cvl-elevation-z12:
    0 7px 8px -4px rgba(0, 0, 0, .2),
    0 12px 17px 2px rgba(0, 0, 0, .14),
    0 5px 22px 4px rgba(0, 0, 0, .12);

  /* This theme's look. Colour is NOT set here. */
  --cvl-radius: 6px;
  --cvl-card-shadow: var(--cvl-elevation-z8);
  --cvl-card-shadow-hover: var(--cvl-elevation-z12);
  --cvl-card-border: 0;
  --cvl-card-lift: translateY(-2px);
}


/* ==========================================================================
   The directory the plugin renders
   ========================================================================== */

.cvl-directory { margin-top: .5rem; }

/* --- organisation intro --- */
.cvl-org { margin: 0 0 1.6rem; }
.cvl-org__logo { max-height: 64px; width: auto; display: block; margin: 0; }

/* --- stat tiles --- */
.cvl-stats {
  list-style: none; padding: 0; margin: 0 0 1.6rem;
  /* auto-FILL, not auto-fit: with only two tiles auto-fit stretches each one
     across half the page, which reads as a banner rather than a statistic. */
  display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 12rem)); gap: .7rem;
}
.cvl-stat {
  background: var(--cvl-primary); color: var(--cvl-on-primary);
  padding: .85rem 1rem; border-radius: var(--cvl-radius);
  box-shadow: var(--cvl-card-shadow);
  display: flex; flex-direction: column; gap: .1rem;
}
.cvl-stat__value {
  font-size: 1.75rem; font-weight: 700; line-height: 1.1;
  /* WHITE, not --cvl-accent. The tile's background is --cvl-primary, so
     painting the number in the accent put one raw brand colour on another:
     Ally rendered #af63d6 on #0A75D8 at 1.23:1, a figure you could not read at
     any size. --cvl-on-primary is derived against this exact background, and
     because --cvl-primary is produced by readable($c, 4.5) it always resolves
     to white. Size and weight already make the number the loudest thing in the
     tile; it does not also need a second colour. */
  color: var(--cvl-on-primary); font-variant-numeric: tabular-nums;
}
.cvl-stat__label {
  color: var(--cvl-on-primary);
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  opacity: .85; font-weight: 600;
}

/* --- breadcrumbs --- */
.cvl-crumbs ol {
  list-style: none; padding: 0; margin: 0 0 1.1rem;
  display: flex; flex-wrap: wrap; gap: .3rem .45rem; font-size: .85rem;
}
.cvl-crumbs li { display: flex; gap: .45rem; align-items: baseline; }
.cvl-crumbs li + li::before { content: "\203A"; color: var(--cvl-accent); font-weight: 700; }
.cvl-crumbs a { color: var(--cvl-muted); text-decoration: none; }
.cvl-crumbs a:hover { color: var(--cvl-primary); text-decoration: underline; }
.cvl-crumbs [aria-current] { color: var(--cvl-primary); font-weight: 600; }

/* --- state index --- */
.cvl-state-list {
  list-style: none; padding: 0; margin: 1rem 0 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .7rem;
}
.cvl-state-list li {
  position: relative;
  background: #fff;
  border-radius: var(--cvl-radius);
  box-shadow: var(--cvl-card-shadow);
  overflow: hidden;                /* clips the artwork to the rounded corner */
  display: flex; flex-direction: column;
  transition: box-shadow .15s ease, transform .15s ease;
}
.cvl-state-list li:hover { box-shadow: var(--cvl-card-shadow-hover); transform: var(--cvl-card-lift); }
.cvl-state-list li:focus-within { box-shadow: var(--cvl-card-shadow-hover); }
.cvl-state-list a::after { content: ""; position: absolute; inset: 0; }
.cvl-state-list a:focus-visible { outline: 3px solid var(--cvl-accent); outline-offset: 3px; }
/* State artwork: a silhouette masked over a gradient, mirroring Curivya's
   own StateArtComponent so the two surfaces look like one product. */
.cvl-state-art {
  position: relative;
  /* Soft neutral ground, deliberately NOT the brand colour: the shape carries
     the brand, and tinting both leaves the shape nothing to contrast against. */
  background: linear-gradient(160deg, #f4f6f8 0%, #e9edf1 100%);
}
.cvl-state-art__shape {
  position: absolute; inset: 0;
  /* Single hue — brand colour to a lighter tint of itself. Mixing two brand
     colours averages them into mud; diluting a near-black into white gives
     grey blobs. One hue cannot do either, whatever the client configures. */
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--cvl-primary) 94%, #fff) 0%,
    color-mix(in srgb, var(--cvl-primary) 58%, #fff) 100%);
  /* `auto 78%`, never a single value: the mask-size shorthand's one-value form
     sets WIDTH, which crops tall states top and bottom on a wide tile. */
  -webkit-mask: var(--cvl-shape) center / auto 78% no-repeat;
          mask: var(--cvl-shape) center / auto 78% no-repeat;
}
.cvl-state-card__art {
  height: 132px;
  border-bottom: 3px solid var(--cvl-accent);
}
.cvl-state-card__body { padding: .8rem 1rem; display: flex; flex-direction: column; gap: .15rem; }
.cvl-state-list a {
  font-weight: 700; font-size: 1.05rem;
  text-decoration: underline;
  text-decoration-color: var(--cvl-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: .18em;
}
.cvl-state-list li:hover a { color: var(--cvl-accent); }

/* --- state page hero --- */
.cvl-state-hero {
  margin: 0 0 1.2rem; border-radius: 8px; overflow: hidden;
  height: clamp(130px, 19vw, 200px);
  border-bottom: 3px solid var(--cvl-accent);
}
.cvl-count { font-size: .85rem; color: var(--cvl-muted); }
.cvl-count--beds { color: var(--cvl-primary); font-weight: 600; }

/* --- clinic cards --- */
.cvl-clinic-list {
  list-style: none; padding: 0; margin: 1.2rem 0 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1rem;
}
.cvl-clinic {
  position: relative;              /* anchor for the stretched link below */
  background: #fff;
  border-top: 3px solid var(--cvl-accent);
  border-radius: var(--cvl-radius);
  box-shadow: var(--cvl-card-shadow);
  padding: 1.1rem 1.2rem 1.2rem;
  display: flex; flex-direction: column;
  transition: box-shadow .15s ease, transform .15s ease;
}
.cvl-clinic h2 { margin: 0 0 .1rem; font-size: 1.15rem; line-height: 1.25; }

/* The clinic name was the ONLY route to the detail page and was styled exactly
   like a heading — same colour as every other heading, no underline. The one
   thing on the card that looked pressable was the booking button, which goes
   somewhere else entirely. Underline it so it reads as a link standing still,
   not only on hover. */
.cvl-clinic h2 a {
  text-decoration: underline;
  text-decoration-color: var(--cvl-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: .18em;
}
.cvl-clinic h2 a::after {
  /* Stretched link: the whole card becomes the target without adding a second
     anchor, so keyboard and screen-reader semantics stay as they were. */
  content: ""; position: absolute; inset: 0; border-radius: var(--cvl-radius);
}
.cvl-clinic:hover { box-shadow: var(--cvl-card-shadow-hover); transform: var(--cvl-card-lift); }
.cvl-clinic:hover h2 a { color: var(--cvl-accent); }
.cvl-clinic:focus-within { box-shadow: var(--cvl-card-shadow-hover); }
.cvl-clinic h2 a:focus-visible { outline: 3px solid var(--cvl-accent); outline-offset: 3px; }

/* The booking button sits inside the stretched link's area, so it needs to be
   lifted above it or the card link swallows every click on it. */
.cvl-clinic .cvl-cta { position: relative; z-index: 1; }
.cvl-clinic__where {
  font-size: .78rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--cvl-muted); font-weight: 600; margin: 0 0 .6rem;
}
.cvl-address, .cvl-phone, .cvl-fax { margin: .15rem 0; font-size: .95rem; }
.cvl-address { color: var(--cvl-muted); }
.cvl-phone a { font-weight: 600; text-decoration: none; }
.cvl-clinic .cvl-cta { margin-top: auto; padding-top: .8rem; }

.cvl-beds {
  margin: .5rem 0 0; font-size: .88rem; font-weight: 600; color: var(--cvl-primary);
  display: flex; align-items: center; gap: .4rem;
}
.cvl-beds::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--cvl-accent); flex: 0 0 auto;
}

/* --- facility page --- */
/* Section headings were rendering LARGER than the page title, so "Insurance
   plans accepted at Gadsden Clinic" was the loudest thing on a page about a
   clinic. Pin them well below the title rather than inheriting TT1's scale. */
.cvl-directory h2 { font-size: 1.3rem; line-height: 1.25; margin: 0 0 .6rem; }

.cvl-lede { font-size: 1.05rem; color: var(--cvl-muted); margin: 0 0 1.6rem; }

/* Two columns: reading material left, everything actionable pinned right. */
.cvl-facility {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21rem;
  gap: 1.6rem;
  align-items: start;
}
.cvl-facility__side { position: sticky; top: 1.5rem; }

.cvl-card {
  background: #fff;
  border-top: 3px solid var(--cvl-accent);
  border-radius: var(--cvl-radius);
  box-shadow: var(--cvl-card-shadow);
  padding: 1.1rem 1.2rem 1.2rem;
}
.cvl-card__title {
  font-size: .78rem !important;   /* beats the .cvl-directory h2 rule above */
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--cvl-muted); font-weight: 700;
  margin: 0 0 .8rem !important;
}

/* Labelled rows. Three stacked unlabelled lines of digits leave the reader to
   work out which is the phone and which is the fax. */
.cvl-contact__rows { margin: 0 0 1.1rem; display: grid; gap: .7rem; }
.cvl-contact__rows dt {
  font-size: .72rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--cvl-muted); font-weight: 700; margin: 0 0 .1rem;
}
/* TT1 indents every <dd> with padding-left: calc(2 * spacing-horizontal) —
   NOT margin, so zeroing the margin leaves the indent in place and the value
   floats away from its own label. */
.cvl-contact__rows dd { margin: 0; padding-left: 0; font-size: .95rem; line-height: 1.45; }
.cvl-contact__rows dd a { font-weight: 600; text-decoration: none; }
.cvl-contact__rows .cvl-street { color: var(--cvl-ink); }

/* --- clinicians: compact tiles, full profile in a dialog --- */
.cvl-providers { margin: 0 0 2rem; }
.cvl-provider-list {
  list-style: none; padding: 0; margin: .9rem 0 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .7rem;
}
.cvl-provider { display: flex; }
/* SPECIFICITY, again — and worse than the .entry-header case.
   TT1 styles buttons as `button:not(:hover):not(:active):not(.has-text-color)`,
   which is (0,3,1) and deliberately built to outrank a plain class. A <button>
   that is meant to look like a card, not a button, has to clear that bar or it
   renders as a solid navy blob with white text, which is exactly what it did.
   Scoping under .cvl-directory and matching the :not() chain gets there. */
.cvl-directory .cvl-provider__open,
.cvl-directory .cvl-provider__open:not(:hover):not(:active):not(.has-text-color),
.cvl-directory .cvl-provider__open:hover,
.cvl-directory .cvl-provider__open:active {
  flex: 1;
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: .75rem;
  align-items: center; text-align: left;
  background: #fff; color: var(--cvl-ink);
  border: 0; border-radius: var(--cvl-radius);
  box-shadow: var(--cvl-card-shadow);
  padding: .7rem .85rem;
  cursor: pointer; font: inherit;
  transition: box-shadow .15s ease, transform .15s ease;
}
.cvl-directory .cvl-provider__open:hover { box-shadow: var(--cvl-card-shadow-hover); transform: var(--cvl-card-lift); }
.cvl-directory .cvl-provider__open:focus-visible { outline: 3px solid var(--cvl-accent); outline-offset: 3px; }

.cvl-provider__photo {
  width: 56px; height: 56px; border-radius: 50%;
  object-fit: cover;              /* portraits arrive at assorted aspect ratios */
  background: var(--cvl-wash);
}
.cvl-provider__photo--none { display: block; border: 2px dashed var(--cvl-line); box-sizing: border-box; }
.cvl-provider__body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.cvl-provider__name {
  font-weight: 700; font-size: .95rem; line-height: 1.25; color: var(--cvl-primary);
}
.cvl-provider__role {
  font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cvl-muted); font-weight: 700;
}

/* --- the profile, once the dialog has it --- */
.cvl-modal--profile { height: auto; max-height: min(86vh, 760px); }
/* flex-grow 0: the base .cvl-modal__body grows to fill, which is right for the
   booking iframe and wrong here — a short profile left most of the dialog
   empty. Shrink-to-fit, and scroll only once it hits max-height. */
.cvl-modal--profile .cvl-modal__body { flex: 0 1 auto; }
.cvl-modal__body--scroll { display: block; overflow-y: auto; padding: 1.2rem 1.4rem 1.5rem; }
.cvl-profile__head { display: flex; gap: 1rem; align-items: center; margin: 0 0 1rem; }
.cvl-profile__photo {
  width: 88px; height: 88px; border-radius: 50%; object-fit: cover;
  background: var(--cvl-wash); flex: 0 0 auto;
}
.cvl-profile__name { font-size: 1.2rem; font-weight: 700; color: var(--cvl-primary); margin: 0 0 .15rem; }
.cvl-profile__role {
  font-size: .72rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--cvl-muted); font-weight: 700; margin: 0;
}
.cvl-profile__bio { margin: 0 0 1.1rem; line-height: 1.6; color: var(--cvl-ink); }
.cvl-profile__subhead {
  font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cvl-muted); font-weight: 700; margin: 0 0 .5rem;
}

/* --- services --- */
.cvl-service-group { margin: 0 0 1.8rem; }
.cvl-service-list { list-style: none; padding: 0; margin: .8rem 0 0; display: grid; gap: .8rem; }
.cvl-service {
  background: #fff; border-radius: var(--cvl-radius); border-top: 3px solid var(--cvl-accent);
  box-shadow: var(--cvl-card-shadow); padding: .9rem 1.1rem 1rem;
}
.cvl-service__name { font-size: 1.05rem; margin: 0 0 .1rem; }
.cvl-service__where {
  font-size: .72rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--cvl-muted); font-weight: 700; margin: 0 0 .6rem;
}
.cvl-service__clinics {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .2rem .9rem;
  font-size: .93rem;
}
.cvl-service__clinics a { text-decoration: underline; text-decoration-color: var(--cvl-accent); text-underline-offset: .16em; }

/* Chips for the per-clinic service list — short labels, so a bulleted column
   wastes the width a card has. */
.cvl-facility-services { margin: 0 0 1.6rem; }
.cvl-chip-list { list-style: none; padding: 0; margin: .7rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.cvl-chip {
  background: var(--cvl-wash); border: 1px solid var(--cvl-line);
  border-radius: 999px; padding: .3rem .75rem; font-size: .88rem; color: var(--cvl-primary);
}

.cvl-insurance { margin: 0 0 1.2rem; }
.cvl-insurance__intro { color: var(--cvl-muted); margin: 0 0 .9rem; }

.cvl-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: stretch; margin: 0; }
.cvl-actions .cvl-book { flex: 1 1 100%; text-align: center; }
.cvl-actions .cvl-action { flex: 1 1 auto; text-align: center; }
.cvl-actions .cvl-cta { margin: 0; }
.cvl-action, .cvl-book {
  display: inline-block; padding: .62rem 1.15rem; border-radius: 5px;
  font-weight: 600; font-size: .95rem; text-decoration: none; line-height: 1.2;
  border: 2px solid var(--cvl-primary);
}
.cvl-book {
  background: var(--cvl-btn-bg); color: var(--cvl-btn-fg); border-color: var(--cvl-btn-bg);
}
.cvl-book:hover {
  background: var(--cvl-btn-bg-hover); color: var(--cvl-btn-fg-hover); border-color: var(--cvl-btn-bg-hover);
}
.cvl-action { color: var(--cvl-primary); background: transparent; border-color: var(--cvl-btn-bg); }
.cvl-action:hover {
  background: var(--cvl-btn-bg); color: var(--cvl-btn-fg); border-color: var(--cvl-btn-bg);
}

/* --- insurance --- */
/* Multi-column, not grid: a grid puts every item in a fixed row, so one plan
   name that wraps to two lines leaves a blank gap beside every item in that
   row. Columns flow the list instead and stay tight. */
.cvl-insurance-list {
  list-style: none; padding: 0; margin: .8rem 0 0;
  columns: 15rem; column-gap: 1.6rem;
}
.cvl-insurance-list li { break-inside: avoid; margin: 0 0 .35rem; }
.cvl-insurance-list li { padding-left: 1.15rem; position: relative; font-size: .93rem; }
.cvl-insurance-list li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: .5rem; height: .5rem; background: var(--cvl-accent);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.cvl-insurance-help {
  background: var(--cvl-accent-wash); border-left: 4px solid var(--cvl-accent);
  border-radius: 0 5px 5px 0; padding: .85rem 1.1rem; margin: 1.4rem 0 0;
  font-size: .95rem; max-width: 46rem;
}

/* --- dialogs: booking + clinician profile --- */
/* Everything below is the <dialog> element's own chrome. Almost none of it
   existed before, so both dialogs rendered as a raw UA <dialog>: a 2-3px solid
   black border, square corners, 1em of padding and width:fit-content.

   The header is deliberately LIGHT rather than a slab of --cvl-primary. Three
   reasons, in order of how much they matter:
     1. The bar colour is whatever the org saved in Org-Admin. A saturated fill
        only looks considered when that colour happens to be good; on a light
        bar any brand colour works, because it is carried by a 3px edge and the
        title rather than by 60px of solid fill.
     2. It stopped fighting the host site. Ally's page furniture is #225097 and
        the org record is #0A75D8 — near enough to read as a mistake rather
        than a contrast.
     3. The embedded booking wizard is the content. Chrome should recede. */
.cvl-modal {
  padding: 0;
  /* NEUTRAL, and never the theme's card border. The UA default for <dialog>
     is a 2px SOLID BLACK frame, which is what was on screen before any of
     this existed. --cvl-card-border would work for theme2 but is 0 in theme1,
     leaving the dialog edgeless against a pale backdrop, and neither theme
     should be able to put a hard colour around a modal. A soft slate hairline
     reads as a crisp edge over the dim without ever going black. */
  border: 1px solid rgba(15, 23, 42, .1);
  /* Twice the card radius: a wide dialog with a 6px corner reads as square.
     Scales with the theme, so theme2 stays at its near-square 4px. */
  border-radius: calc(var(--cvl-radius) * 2);
  /* z12 in BOTH themes. "Flat" in theme2 describes cards in the page flow; a
     modal floating over a dimmed backdrop is elevated by definition, and
     theme2 still reads as itself through its square corners. */
  box-shadow: var(--cvl-elevation-z12);
  background: #fff;
  color: var(--cvl-ink);

  /* A booking wizard needs room. The preferred size is the first pair; the
     min-* pair stops it collapsing to something cramped on a short or narrow
     window. Every value is wrapped in min() against the viewport so the
     minimums can never push the dialog off-screen — a bare `min-width: 720px`
     would overflow a 700px-wide window instead of shrinking. */
  width: min(96vw, 880px);
  height: min(92vh, 900px);
  min-width: min(96vw, 720px);
  min-height: min(86vh, 620px);
  /* Clips the bar's brand edge to the rounded top corners. */
  overflow: hidden;
}
/* Only when open: a <dialog> must stay display:none while closed, so this
   cannot go on the bare element. */
.cvl-modal[open] { display: flex; flex-direction: column; }
/* ::backdrop does not inherit custom properties in every engine, so this is a
   literal rather than a token. */
.cvl-modal::backdrop { background: rgba(15, 23, 42, .55); }

.cvl-modal__bar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: .75rem;
  padding: .9rem 1rem .9rem 1.2rem;
  background: #fff;
  color: var(--cvl-ink);
  border-bottom: 1px solid var(--cvl-line);
  /* The brand, as a 3px edge along the top of the dialog. An inset shadow
     rather than a border so it cannot alter the box height, and rather than an
     extra element so the markup stays as it is. */
  box-shadow: inset 0 3px 0 var(--cvl-primary);
}
.cvl-modal__title {
  flex: 1 1 auto; min-width: 0;
  font-size: 1.05rem; font-weight: 700; line-height: 1.3;
  /* brand_css() has already darkened this to clear AA on white. */
  color: var(--cvl-primary);
}

/* SPECIFICITY: the same fight as .cvl-provider__open above, and lost the same
   way first time round. TT1 styles buttons at
   `button:not(:hover):not(:active):not(.has-background)` — (0,3,1), built to
   outrank a plain class — so `.cvl-modal__close` (0,1,0) lost and the X
   rendered as a solid navy tile in the header bar. Matching the :not() chain
   under .cvl-modal reaches (0,5,0). */
.cvl-modal .cvl-modal__close,
.cvl-modal .cvl-modal__close:not(:hover):not(:active):not(.has-background):not(.has-text-color) {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 999px;
  background-color: var(--cvl-wash);
  color: var(--cvl-muted);
  font: 400 1.25rem/1 system-ui, sans-serif;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.cvl-modal .cvl-modal__close:hover:not(.has-background),
.cvl-modal .cvl-modal__close:active:not(.has-background) {
  background-color: var(--cvl-line);
  color: var(--cvl-ink);
}
/* TT1 styles plain `button:focus` with a dotted ring, and showModal() focuses
   this button the instant the dialog opens — so that ring appeared on every
   open, mouse or keyboard. Killing it on :focus and redrawing on :focus-visible
   only means a mouse user sees a clean header while a keyboard user still gets
   a clear target. Both rules are (0,3,0); the second wins on order. */
.cvl-modal .cvl-modal__close:focus { outline: 0; }
.cvl-modal .cvl-modal__close:focus-visible {
  outline: 3px solid var(--cvl-accent);
  outline-offset: 2px;
}

.cvl-modal__body { flex: 1 1 auto; min-height: 0; display: flex; background: var(--cvl-wash); }
/* The booking iframe fills whatever the bar leaves. Sized here rather than on
   the element so the height follows the dialog instead of a fixed guess. */
.cvl-modal__body > iframe {
  flex: 1 1 auto;
  width: 100%; height: 100%;
  border: 0; display: block;
}

@media (max-width: 40rem) {
  /* Near-fullscreen on a phone: a booking wizard in a 620px box with margins
     either side wastes the only screen that cannot spare it. */
  .cvl-modal { width: 100vw; height: 100dvh; max-width: 100vw; border-radius: 0; border: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cvl-clinic, .cvl-state-list li, .cvl-provider__open { transition: none; }
  .cvl-clinic:hover, .cvl-state-list li:hover, .cvl-provider__open:hover { transform: none; }
}

@media (max-width: 60rem) {
  /* Sidebar drops under the content; sticky is meaningless once stacked. */
  .cvl-facility { grid-template-columns: 1fr; }
  .cvl-facility__side { position: static; }
}
@media (max-width: 40rem) {
  .cvl-actions { flex-direction: column; align-items: stretch; }
  .cvl-action, .cvl-book { text-align: center; }
}