/* Provider page renovation: scoped, warm public-record presentation. */

body:has(.pbj-provider-page) {
  background: var(--pbj-page);
  color: var(--pbj-text);
}

body:has(.pbj-provider-page) .navbar,
body:has(.pbj-provider-page) .navbar::before {
  background: color-mix(in srgb, var(--pbj-page) 97%, transparent);
  border-bottom-color: var(--pbj-border);
}

body:has(.pbj-provider-page) .navbar .nav-link,
body:has(.pbj-provider-page) .navbar .nav-links a,
body:has(.pbj-provider-page) .navbar .nav-search-btn {
  color: var(--pbj-nav-text) !important;
}

body:has(.pbj-provider-page) .navbar .nav-link:hover,
body:has(.pbj-provider-page) .navbar .nav-links a:hover,
body:has(.pbj-provider-page) .navbar .nav-link.active,
body:has(.pbj-provider-page) .navbar .nav-links a.active,
body:has(.pbj-provider-page) .navbar .nav-search-btn:hover {
  color: var(--pbj-nav-accent) !important;
}

body:has(.pbj-provider-page) .nav-brand span[style*="e2e8f0"],
body:has(.pbj-provider-page) .nav-brand span span:first-child {
  color: var(--pbj-nav-text) !important;
}

body:has(.pbj-provider-page) .nav-brand span[style*="818cf8"],
body:has(.pbj-provider-page) .nav-brand span span:last-child {
  color: var(--pbj-nav-accent) !important;
}

body:has(.pbj-provider-page) .nav-toggle span {
  background: var(--pbj-nav-text) !important;
}

body:has(.pbj-provider-page) .pbj-content-box:has(> .pbj-provider-page) {
  padding-block: 0.65rem 2.5rem;
  background: transparent;
  border: 0;
  box-shadow: none;
}

body:has(.pbj-provider-page) .footer {
  background: var(--pbj-surface-inset);
  border-top-color: var(--pbj-border);
  color: var(--pbj-text-subtle);
}

body:has(.pbj-provider-page) .footer .footer-boilerplate,
body:has(.pbj-provider-page) .footer .footer-signoff {
  color: var(--pbj-text-subtle) !important;
}

body:has(.pbj-provider-page) .footer .footer-nav-links a,
body:has(.pbj-provider-page) .footer .footer-signoff-brand {
  color: var(--pbj-text) !important;
}

body:has(.pbj-provider-page) .footer .footer-signoff-link {
  color: var(--pbj-text-subtle) !important;
}

body:has(.pbj-provider-page) .footer a:hover {
  color: var(--pbj-accent-hover) !important;
}

.pbj-provider-page {
  --provider-paper: var(--pbj-page);
  --provider-panel: var(--pbj-surface);
  --provider-panel-soft: var(--pbj-surface-soft);
  --provider-ink: var(--pbj-text);
  --provider-muted: var(--pbj-text-subtle);
  --provider-border: var(--pbj-border);
  --provider-border-strong: var(--pbj-border-strong);
  --provider-purple: var(--pbj-accent);
  --provider-purple-dark: var(--pbj-accent-hover);
  --provider-purple-tint: var(--pbj-accent-soft);
  --provider-data-accent: var(--pbj-data);
  --provider-alert: var(--pbj-danger);
  --provider-chart-text: var(--pbj-chart-text);
  --provider-chart-grid: var(--pbj-chart-grid);
  --provider-chart-axis: var(--pbj-chart-axis);
  --provider-editorial-rule: rgba(117, 65, 157, 0.82);
  --pbj-ov-page: var(--provider-paper);
  --pbj-ov-surface: transparent;
  --pbj-ov-elevated: var(--provider-panel);
  --pbj-ov-border: var(--provider-border);
  --pbj-ov-text: var(--provider-ink);
  --pbj-ov-muted: var(--provider-muted);
  --chow-surface: var(--provider-panel);
  --chow-surface-raised: var(--provider-panel-soft);
  --chow-surface-inset: var(--pbj-surface-inset);
  --chow-border: var(--provider-border);
  --chow-border-strong: var(--pbj-border-strong);
  --chow-text: var(--provider-ink);
  --chow-muted: var(--provider-muted);
  --chow-subtle: var(--provider-muted);
  --chow-input-bg: var(--provider-panel);
  --chow-input-text: var(--provider-ink);
  --chow-input-border: var(--pbj-border-strong);
  --chow-accent: var(--provider-purple);
  --chow-accent-hover: var(--provider-purple-dark);
  --chow-link: var(--provider-purple);
  --chow-link-hover: var(--provider-purple-dark);
  --chow-notice-bg: var(--provider-purple-tint);
  --chow-notice-border: rgba(117, 65, 157, 0.28);
  --chow-notice-text: var(--provider-ink);
  color: var(--provider-ink);
  font-family: "DM Sans PBJ", "Segoe UI", sans-serif;
  min-width: 0;
}

.pbj-provider-page a,
.pbj-provider-page .pbj-content-box a {
  color: var(--provider-purple);
}

.pbj-provider-page a:hover,
.pbj-provider-page .pbj-content-box a:hover {
  color: var(--provider-purple-dark);
}

.pbj-provider-page .pbj-page-overview {
  --pbj-ov-page: var(--provider-paper);
  --pbj-ov-surface: transparent;
  --pbj-ov-elevated: var(--provider-panel);
  --pbj-ov-border: var(--provider-border);
  --pbj-ov-text: var(--provider-ink);
  --pbj-ov-muted: var(--provider-muted);
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.pbj-provider-page .pbj-page-summary-identity {
  display: flex;
  flex-direction: column;
}

.pbj-provider-page .pbj-page-summary-identity h1 {
  order: 1;
  color: var(--provider-ink);
  font-weight: 700;
  text-wrap: balance;
}

.pbj-provider-identity-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
}

/* Name row is plain block flow (not flex) so the floated CCN badge can sit
   on the facility name's own first line when there's room, and the name
   wraps around/below it -- not achievable with flex, where a sibling can
   only sit beside a whole (possibly multi-line) box, not one text line. */
.pbj-provider-identity-title__name-row {
  order: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.pbj-provider-identity-title h1 { min-width: 0; }
.pbj-provider-page .pbj-provider-identity-title h1 {
  text-align: left;
}
.pbj-provider-ccn-float {
  float: right;
  margin: 0.3rem 0 0.3rem 0.85rem;
  font-family: "DM Mono PBJ", ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.73rem;
  letter-spacing: 0.025em;
}
.pbj-provider-identity-title .pbj-provider-downloads {
  order: 1;
  flex: 0 0 auto;
}

.pbj-provider-page .pbj-page-summary-meta {
  order: 2;
  margin-top: 0.35rem;
}

.pbj-provider-page .pbj-page-summary-flags {
  order: 3;
  margin-top: 0.55rem;
}

.pbj-provider-scanline {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
}

.pbj-provider-scanline__sep {
  color: var(--provider-data-accent);
  /* The flex `gap` on .pbj-provider-scanline only spaces its direct
     children -- since the sep sits nested inside the quarter span with no
     space before the quarter text, it read as flush against "Q2 2025"
     but with a full gap before "CCN ...", uneven either side. */
  margin-right: 0.38rem;
}

/* Compact download menu inside the CCN/quarter badge -- one icon button
   instead of the two full labeled buttons, shown only where that badge
   layout is in play (mobile; see .pbj-provider-downloads--full below for
   the desktop two-button row it replaces there). */
.pbj-provider-dl-menu-wrap {
  display: none;
  position: relative;
  align-items: center;
}
.pbj-provider-dl-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  border: 1px solid var(--provider-border);
  border-radius: 6px;
  color: var(--provider-ink);
  background: var(--provider-panel);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* Invisible tap-target extension -- the visible button is compact (it has
   to fit beside the CCN/quarter text), which makes it an easy real-device
   mis-tap target otherwise; this enlarges the hit area without changing
   how it looks. */
.pbj-provider-dl-trigger::after {
  content: '';
  position: absolute;
  top: -9px;
  bottom: -9px;
  left: -9px;
  right: -9px;
}
.pbj-provider-dl-trigger:hover,
.pbj-provider-dl-trigger[aria-expanded="true"] {
  background: var(--provider-panel-soft);
  border-color: var(--pbj-border-strong);
}
.pbj-provider-dl-trigger svg { width: 0.95rem; height: 0.95rem; }
.pbj-provider-dl-menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 9.5rem;
  padding: 0.3rem;
  background: var(--provider-panel);
  border: 1px solid var(--provider-border);
  border-radius: 9px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.pbj-provider-dl-menu[hidden] { display: none; }
.pbj-provider-dl-menu .pbj-provider-pdf-download,
.pbj-provider-dl-menu .pbj-provider-csv-download {
  display: flex !important;
  width: 100%;
  padding: 0.5rem 0.6rem !important;
  border: 0 !important;
  border-radius: 6px;
  background: transparent !important;
  color: var(--provider-ink) !important;
  font-size: 0.8rem !important;
  white-space: nowrap;
}
.pbj-provider-dl-menu .pbj-provider-pdf-download:hover,
.pbj-provider-dl-menu .pbj-provider-csv-download:hover {
  background: var(--provider-panel-soft) !important;
}

/* Desktop full-row PDF button: native <details> disclosure for the
   snapshot/detailed variant choice (see app.py generate_provider_page_html).
   No new JS -- the browser handles open/close; only the popup panel and
   marker removal need styling here. */
.pbj-provider-pdf-menu {
  position: relative;
  display: inline-flex;
}
.pbj-provider-pdf-menu > summary {
  list-style: none;
  cursor: pointer;
}
.pbj-provider-pdf-menu > summary::-webkit-details-marker { display: none; }
.pbj-provider-pdf-menu[open] > summary {
  background: var(--provider-panel-soft);
  border-color: var(--pbj-border-strong);
}
.pbj-provider-pdf-menu__options {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 9.5rem;
  padding: 0.3rem;
  background: var(--provider-panel);
  border: 1px solid var(--provider-border);
  border-radius: 9px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.pbj-provider-pdf-menu__options .pbj-provider-pdf-download {
  display: flex !important;
  width: 100%;
  padding: 0.5rem 0.6rem !important;
  border: 0 !important;
  border-radius: 6px;
  background: transparent !important;
  color: var(--provider-ink) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  white-space: nowrap;
  min-height: 0 !important;
}
.pbj-provider-pdf-menu__options .pbj-provider-pdf-download:hover {
  background: var(--provider-panel-soft) !important;
}

.pbj-provider-page .pbj-page-summary-ccn {
  background: var(--provider-panel-soft);
  border-color: var(--provider-border);
}

.pbj-provider-page .pbj-page-summary-meta,
.pbj-provider-page .pbj-page-eyebrow,
.pbj-provider-page .pbj-page-eyebrow-label,
.pbj-provider-page .pbj-page-summary-ccn {
  color: var(--provider-muted);
}

.pbj-provider-page .pbj-page-summary-meta .pbj-provider-owners-btn {
  color: var(--provider-muted) !important;
  background: var(--provider-panel-soft) !important;
  border-color: var(--provider-border) !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  padding: 0.3rem 0.6rem !important;
  line-height: 1.3 !important;
}

.pbj-provider-page .pbj-page-summary-meta .pbj-provider-owners-btn:hover,
.pbj-provider-page .pbj-page-summary-meta .pbj-provider-owners-btn:focus-visible {
  color: var(--provider-ink) !important;
  background: var(--pbj-surface-inset) !important;
}

@media (min-width: 769px) {
  .pbj-provider-page .pbj-page-summary-top {
    grid-template-columns: minmax(0, 1fr) 17.5rem;
  }

  .pbj-provider-page .pbj-page-summary-identity {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 17.5rem;
    column-gap: 1rem;
  }

  .pbj-provider-page .pbj-provider-identity-title {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .pbj-provider-page .pbj-page-summary-identity h1 {
    grid-column: 1;
    grid-row: 1;
  }

  .pbj-provider-page .pbj-page-summary-meta {
    grid-column: 1;
    grid-row: 2;
  }

  .pbj-provider-page .pbj-page-summary-flags {
    grid-column: 1;
    grid-row: 3;
  }

}

.pbj-provider-page .pbj-page-metrics {
  gap: 0;
  border-block: 1px solid var(--provider-border);
}

.pbj-provider-page .pbj-page-metrics > .pbj-metric {
  padding: 0.75rem 0.9rem;
  border: 0;
  border-right: 1px solid var(--provider-border);
  border-radius: 0;
  background: transparent;
}

.pbj-provider-page .pbj-page-metrics > .pbj-metric:last-child {
  border-right: 0;
}

.pbj-provider-page .pbj-page-metrics .pbj-metric__label,
.pbj-provider-page .pbj-page-metrics .pbj-metric__rating-kind,
.pbj-provider-page .pbj-page-metrics .pbj-metric__hint {
  color: var(--provider-muted);
}

.pbj-provider-page .pbj-takeaway {
  background: var(--provider-panel);
  border-color: var(--provider-border);
  box-shadow: inset 3px 0 0 var(--provider-editorial-rule);
}

.pbj-provider-page .pbj-takeaway-header {
  color: var(--provider-ink);
}

.pbj-provider-downloads {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
}

.pbj-provider-overview-action .pbj-provider-csv-download,
.pbj-provider-page .pbj-provider-pdf-download {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.25rem;
  padding: 0.48rem 0.72rem;
  border: 1px solid var(--provider-border);
  border-radius: 7px;
  color: var(--provider-ink);
  background: var(--provider-panel);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 650;
  cursor: pointer;
  text-decoration: none;
}

.pbj-dl-icon { flex-shrink: 0; }

@media (max-width: 640px) {
  .pbj-provider-downloads { gap: .4rem; }
  /* PDF/CSV are secondary actions, not the header's headline -- on mobile
     they read as plain bordered-free text+icon links, not two boxed buttons
     competing with the facility name for attention. */
  .pbj-provider-overview-action .pbj-provider-csv-download,
  .pbj-provider-page .pbj-provider-pdf-download {
    padding: 0.3rem 0.15rem;
    min-height: 0;
    border: none;
    background: transparent;
    color: var(--provider-muted);
    font-weight: 600;
    font-size: 0.74rem;
  }
  .pbj-provider-overview-action .pbj-provider-csv-download:hover,
  .pbj-provider-page .pbj-provider-pdf-download:hover {
    background: transparent;
    color: var(--provider-ink);
  }
}

.pbj-provider-overview-action .pbj-provider-csv-download:hover,
.pbj-provider-page .pbj-provider-pdf-download:hover {
  color: var(--provider-ink);
  border-color: var(--pbj-border-strong);
  background: var(--provider-panel-soft);
  text-decoration: none;
}

.pbj-provider-overview-action .pbj-provider-csv-download:focus-visible,
.pbj-provider-page .pbj-provider-pdf-download:focus-visible,
.pbj-provider-section-nav a:focus-visible {
  outline: 2px solid var(--provider-purple);
  outline-offset: 3px;
}

.pbj-provider-download-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pbj-provider-follow {
  margin: 0 0 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--provider-border);
}

/* When the Ownership disclosure box (its own bordered/rounded component)
   sits directly above, this hairline just doubles that box's own bottom
   border — a stray line with nothing to separate. Only suppressed for that
   one adjacency; facilities with no ownership data still get the divider
   here, separating this from the plain (unboxed) chart content above. */
#provider-ownership + .pbj-provider-follow {
  border-top: none;
  padding-top: 0;
}

.pbj-provider-section-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.8rem;
  margin: 0 0 1rem;
  padding: 0 0 0.7rem;
  border-bottom: 1px solid var(--provider-border);
  font-size: 0.78rem;
  line-height: 1.35;
}

.pbj-provider-section-nav__label {
  color: var(--provider-muted);
  font-family: "DM Mono PBJ", ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.pbj-provider-section-nav a {
  color: var(--provider-purple);
  text-decoration: underline;
  text-decoration-color: rgba(117, 65, 157, 0.4);
  text-underline-offset: 3px;
}

.pbj-provider-page .pbj-takeaway.pbj-takeaway--prose .pbj-takeaway-narrative,
.pbj-provider-page .pbj-takeaway.pbj-takeaway--prose .pbj-takeaway-narrative strong,
.pbj-provider-page .pbj-content-box p {
  color: var(--provider-ink);
}

.pbj-provider-page .pbj-page-summary-flags .pbj-risk-badge-with-info {
  /* Same danger-red tone as the other top-row flag badges (e.g. SFF
     Candidate) -- this used to tint orange instead, so the abuse flag
     looked like a different severity/category from its neighbors. */
  color: var(--pbj-danger-text, var(--pbj-danger)) !important;
  background: color-mix(in srgb, var(--pbj-danger) var(--pbj-danger-bg-pct, 14%), transparent) !important;
  border-color: color-mix(in srgb, var(--pbj-danger) var(--pbj-danger-border-pct, 40%), transparent) !important;
}

.pbj-provider-page .pbj-page-summary-flags .pbj-takeaway-star-flag {
  color: var(--provider-ink) !important;
  background: var(--provider-panel-soft) !important;
  border-color: var(--provider-border-strong) !important;
}

.pbj-provider-page .pbj-page-summary-flags .pbj-takeaway-star-flag .pbj-rating-stars--low {
  color: color-mix(in srgb, var(--provider-ink) 48%, #ef9a47) !important;
}

.pbj-provider-page button.pbj-info-chip {
  color: var(--provider-muted) !important;
  background: transparent !important;
  border-color: var(--provider-border-strong) !important;
  font-style: normal;
  opacity: 1;
}

.pbj-provider-page button.pbj-info-chip:hover {
  color: var(--provider-purple-dark) !important;
  background: var(--provider-panel-soft) !important;
}

.pbj-provider-page .pbj-risk-badge-info {
  color: currentColor;
  background: transparent;
  font-family: "DM Sans PBJ", "Segoe UI", sans-serif;
  font-style: normal;
  opacity: .78;
}

.pbj-provider-page .pbj-trends {
  margin: 1.35rem 0;
  padding: 1rem 1.15rem 1.15rem;
  background: var(--provider-panel);
  border: 1px solid var(--provider-border);
  border-radius: 12px;
}

.pbj-provider-page .pbj-trends-title,
.pbj-provider-page .pbj-content-box h2.pbj-trends-title {
  margin: 0;
  color: var(--provider-ink);
  font-size: 1rem;
  font-weight: 700;
}

/* .pbj-trends-head and .pbj-trends-head-controls are markup-only wrappers now --
   .pbj-trends-toprow is the actual grid, so their children (tabs, the
   staff-type control, and the heading) are placed directly into its areas. */
.pbj-provider-page .pbj-trends-head,
.pbj-provider-page .pbj-trends-head-controls {
  display: contents;
}

.pbj-provider-page .pbj-trends-tabs {
  grid-area: tabs;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  padding: 0.2rem;
  background: var(--provider-paper);
  border: 1px solid var(--provider-border);
  border-radius: 8px;
}

.pbj-provider-page .pbj-trends-tab {
  flex: 0 0 auto;
  padding: 0.38rem 0.65rem;
  color: var(--provider-muted);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

/* "Contract staffing" swaps to "Contract" below 431px so the 3-segment
   control doesn't read lopsided -- the button's own aria-label keeps the
   full accessible name regardless of which span is visible. */
.pbj-provider-page .pbj-trends-tab-compact {
  display: none;
}

.pbj-provider-page .pbj-trends-tab:hover {
  color: var(--provider-ink);
}

.pbj-provider-page .pbj-trends-tab.is-active {
  color: #fff;
  background: var(--provider-purple);
}

.pbj-provider-page .pbj-trends-tab:focus-visible {
  outline: 2px solid var(--provider-purple);
  outline-offset: 2px;
}

.pbj-provider-page .pbj-trends-controls {
  grid-area: select;
  display: flex;
  align-items: center;
  gap: .45rem;
}

.pbj-provider-page .pbj-trends-controls[hidden] {
  display: none;
}

/* The select already carries aria-label="Staff type", so this visible
   label would be redundant in the compact toolbar -- keep it in the DOM
   (for the label/for association) but visually hidden on every viewport. */
.pbj-provider-page .pbj-trends-sublabel {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pbj-provider-page .pbj-trends-select {
  min-height: 2.45rem;
  min-width: 7.5rem;
  max-width: 11rem;
  padding: .48rem .75rem;
  color: var(--provider-ink);
  background: var(--provider-panel-soft);
  border: 1px solid var(--provider-border-strong);
  border-radius: 8px;
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  background-size: 13px;
}

.pbj-provider-page .pbj-trends-select:focus-visible {
  outline: 2px solid var(--provider-purple);
  outline-offset: 2px;
}

.pbj-provider-page .pbj-trends-framing { grid-area: heading; margin: 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: .35rem; }
/* The provenance trigger lives INSIDE the h3 now (as an inline sibling of
   the headline text span), not as a separate flex item next to it -- that
   way it wraps together with the heading text as one unit instead of being
   pushed onto its own orphaned row when the heading text alone fills the
   available width. See provider-page.js: only #pbjTrendsHeadlineText's
   textContent is swapped when the sub-metric changes, so this icon and its
   popover survive every panel switch untouched. */
.pbj-provider-page .pbj-trends-framing h3 { margin: 0; color: var(--provider-ink); font-size: clamp(1.25rem, 2.5vw, 1.8rem); line-height: 1.15; }
.pbj-provider-page .pbj-trends-framing h3 .pbj-provenance { margin-left: .4rem; }
.pbj-provider-page .pbj-trends-framing p { max-width: 58rem; flex-basis: 100%; margin: .35rem 0 0; color: var(--provider-muted); font-size: .9rem; line-height: 1.45; }

/* One responsive grid drives both layouts: mobile stacks three full-width
   rows (category tabs, then heading, then the staff-type select) so the
   heading always gets the full content width to lay out on one line --
   sharing a row with the select left it only ~150px, which wrapped "Total
   staffing over time" onto two lines; desktop collapses to a single row
   (heading left, tabs + select as one toolbar at right, each sized to its
   own content via the `auto` columns). */
.pbj-provider-page .pbj-trends-toprow {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "tabs"
    "heading"
    "select";
  align-items: center;
  gap: .5rem .6rem;
  margin-bottom: .6rem;
}

.pbj-provider-page .pbj-trends-controls,
.pbj-provider-page .pbj-trends-select {
  width: 100%;
}

@media (min-width: 769px) {
  .pbj-provider-page .pbj-trends-toprow {
    grid-template-columns: 1fr auto;
    grid-template-areas: "heading controls";
    gap: .6rem 1rem;
    align-items: center;
  }
  .pbj-provider-page .pbj-trends-head-controls {
    display: flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
  }
  .pbj-provider-page .pbj-trends-head-controls .pbj-trends-tabs {
    order: 2;
    flex-wrap: nowrap;
  }
  .pbj-provider-page .pbj-trends-head-controls .pbj-trends-controls {
    order: 1;
  }
  .pbj-provider-page .pbj-trends-tabs,
  .pbj-provider-page .pbj-trends-controls {
    grid-area: auto;
  }
  .pbj-provider-page .pbj-trends-controls[hidden] {
    display: flex;
    visibility: hidden;
    pointer-events: none;
  }
}

.pbj-staffing-composition {
  display: grid;
  grid-template-columns: auto minmax(12rem, 1fr) auto auto;
  align-items: center;
  gap: .75rem;
  margin: 0 0 1rem;
  padding: .8rem .9rem;
  background: var(--provider-panel-soft);
  border: 1px solid var(--provider-border);
  border-radius: 9px;
}
.pbj-staffing-composition[hidden] { display: none; }
.pbj-staffing-composition__label, .pbj-staffing-composition__total { display: flex; flex-direction: column; }
.pbj-staffing-composition__label span, .pbj-staffing-composition__total span, .pbj-staffing-composition__total small { color: var(--provider-muted); font-size: .7rem; }
.pbj-staffing-composition__bar { display: flex; height: .72rem; overflow: hidden; border-radius: 999px; background: var(--provider-border); }
.pbj-staffing-composition__segment--rn { background: var(--provider-purple); }
.pbj-staffing-composition__segment--lpn { background: var(--provider-data-accent); }
.pbj-staffing-composition__segment--aide { background: #ef9a47; }
.pbj-staffing-composition__terms { display: flex; align-items: center; justify-content: space-between; gap: .35rem; margin-top: .45rem; font-size: .72rem; }
.pbj-staffing-composition__terms > span { white-space: nowrap; }
.pbj-staffing-composition__terms i { display: inline-block; width: .55rem; height: .55rem; margin-right: .25rem; border-radius: 999px; background: currentColor; }
.pbj-staffing-composition__terms i.rn { color: var(--provider-purple); }
.pbj-staffing-composition__terms i.lpn { color: var(--provider-data-accent); }
.pbj-staffing-composition__terms i.aide { color: #ef9a47; }
.pbj-staffing-composition__equals { color: var(--provider-muted); }
.pbj-staffing-composition__total { min-width: 3.5rem; padding-left: .75rem; border-left: 1px solid var(--provider-border); }
.pbj-staffing-composition__total strong { color: var(--provider-ink); font-size: 1.35rem; line-height: 1.05; }

.pbj-how-read { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; align-items: start; margin-top: 1rem; padding: .8rem .9rem; color: var(--provider-ink); background: var(--provider-panel-soft); border: 1px solid var(--provider-border); border-radius: 9px; }
.pbj-how-read > strong { color: var(--provider-ink); white-space: nowrap; }
.pbj-how-read ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; counter-reset: read; }
.pbj-how-read li { position: relative; padding-left: 1.75rem; color: var(--provider-muted); font-size: .77rem; line-height: 1.4; counter-increment: read; }
.pbj-how-read li::before { content: counter(read); position: absolute; left: 0; top: -.1rem; display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 999px; color: var(--provider-purple); background: var(--pbj-accent-soft); font-weight: 700; font-size: .72rem; }

.pbj-provider-page .pbj-trends-panel .pbj-chart-container {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}
.pbj-provider-page .pbj-trends-panel .pbj-chart-header { display: none; }

.pbj-provider-page .section-header,
.pbj-provider-page .pbj-chart-facility {
  color: var(--provider-muted);
}

.pbj-provider-page .pbj-chart-footnote[style],
.pbj-provider-page .pbj-chart-anomaly-foot[style],
.pbj-provider-page .pbj-chart-anomaly-foot {
  color: var(--provider-muted) !important;
}

.pbj-provider-page .section-header {
  border-bottom-color: var(--provider-border);
}

.pbj-provider-page #facility-casemix,
.pbj-provider-page #facility-casemix * {
  color: var(--provider-ink);
}

.pbj-provider-page #facility-casemix .pbj-casemix-hero-panel,
.pbj-provider-page #facility-casemix .pbj-casemix-modal-card {
  background: var(--provider-panel-soft);
  border-color: var(--provider-border);
}

.pbj-provider-page #facility-casemix { padding: clamp(1rem, 2.5vw, 1.4rem); border-radius: 12px; }
.pbj-provider-page #facility-casemix .pbj-casemix-section-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.pbj-provider-page #facility-casemix .pbj-casemix-section-header > div { min-width: 0; }
.pbj-provider-page #facility-casemix .pbj-casemix-eyebrow { margin: 0 0 .3rem; color: var(--provider-purple); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.pbj-provider-page #facility-casemix h2.pbj-casemix-section-title { margin: 0; color: var(--provider-ink); font-size: clamp(1.35rem, 2.8vw, 1.9rem); line-height: 1.15; }
.pbj-provider-page #facility-casemix .pbj-casemix-support { margin: .4rem 0 0; color: var(--provider-muted); font-size: .9rem; }
.pbj-provider-page #facility-casemix .pbj-casemix-split-v19 { align-items: stretch; gap: 1rem; margin-top: 1rem; }
.pbj-provider-page #facility-casemix .pbj-casemix-hero-panel,
.pbj-provider-page #facility-casemix .pbj-casemix-details { height: 100%; padding: .35rem 0 .35rem 1rem; background: transparent; border: 0; border-left: 1px solid var(--provider-border); border-radius: 0; }
.pbj-provider-page #facility-casemix .pbj-casemix-details h3 { margin: 0 0 .65rem; color: var(--provider-ink); font-size: 1rem; }
.pbj-provider-page #facility-casemix .pbj-casemix-sub-line { margin-bottom: .25rem; font-size: .78rem; line-height: 1.35; }
.pbj-provider-page #facility-casemix .pbj-casemix-sub-line .secondary { font-size: .7rem; }
.pbj-provider-page #facility-casemix .pbj-casemix-bar-rail-h,
.pbj-provider-page #facility-casemix .pbj-casemix-metric--rn .pbj-casemix-bar-rail-h,
.pbj-provider-page #facility-casemix .pbj-casemix-metric--lpn .pbj-casemix-bar-rail-h,
.pbj-provider-page #facility-casemix .pbj-casemix-metric--aide .pbj-casemix-bar-rail-h { min-height: 12px; }
.pbj-casemix-overall-title { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.pbj-casemix-overall-title h3 { margin: 0; font-size: 1rem; }
.pbj-casemix-overall-title strong { font-size: 1.5rem; }
.pbj-casemix-overall-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: .65rem; padding-top: .65rem; border-top: 1px solid var(--provider-border); }
.pbj-casemix-overall-values > span { display: flex; flex-direction: row; align-items: baseline; flex-wrap: nowrap; gap: .35rem; }
.pbj-casemix-overall-values > span + span { padding-left: 1rem; border-left: 1px solid var(--provider-border); }
.pbj-casemix-overall-values strong { font-size: 1.1rem; white-space: nowrap; }
.pbj-casemix-overall-values small { color: var(--provider-muted); white-space: nowrap; }
.pbj-provider-page #facility-casemix .pbj-casemix-pct-bar { position: relative; }
.pbj-provider-page #facility-casemix .pbj-casemix-pct-bar--compact { padding-top: 0; }
.pbj-provider-page #facility-casemix .pbj-casemix-sub-label { color: var(--provider-ink); }
.pbj-provider-page #facility-casemix .pct-em { margin-left: .35rem; color: var(--provider-ink); font-weight: 700; }
.pbj-provider-page #facility-casemix .pbj-casemix-help-trigger { color: var(--provider-muted); background: var(--provider-panel); border-color: var(--provider-border-strong); }
.pbj-provider-page #facility-casemix .pbj-casemix-modal-close { color: var(--provider-ink); background: var(--provider-panel-soft); }

.pbj-provider-page #facility-casemix .pbj-casemix-caveat-foot,
.pbj-provider-page #facility-casemix .secondary,
.pbj-provider-page #facility-casemix .tag {
  color: var(--provider-muted);
}

.pbj-provider-page #facility-casemix .pbj-casemix-bar-fill--reported-over,
.pbj-provider-page #facility-casemix .pbj-casemix-pct-fill--over {
  background: var(--provider-data-accent);
}

@media (max-width: 768px) {
  .pbj-provider-identity-title { flex-direction: column; gap: .65rem; }
  /* PDF/CSV are secondary actions -- on mobile they collapse into a single
     download icon in the CCN/quarter badge (.pbj-provider-dl-menu-wrap)
     instead of a left-aligned two-button row competing with the facility
     name for the reader's first glance. */
  .pbj-provider-identity-title .pbj-provider-downloads--full { display: none; }
  /* Small breathing room before the icon so it doesn't crowd "Q1 2026". */
  .pbj-provider-dl-menu-wrap { display: inline-flex; margin-left: 0.3rem; }
  /* Mobile-only: the sep otherwise sits flush against the CCN number (its
     only spacing is margin-right, to balance the gap already given by
     .pbj-provider-scanline's flex `gap` before the quarter text). Desktop
     is unaffected -- this issue is mobile-only. */
  .pbj-provider-scanline__sep { margin-left: 0.3rem; }
  /* A float here would let a SHORT facility name (e.g. "Seagate
     Rehabilitation") start right beside the badge on some pages while
     longer names drop below it on others -- an inconsistent layout from
     page to page. Always give the badge its own row above the name on
     mobile instead, regardless of how short the name happens to be. The
     <h1> that follows is block-level, so it already starts a new line on
     its own -- inline-block (not block) is what's needed here, since this
     class shares its element with .pbj-page-summary-ccn's inline-block
     pill styling, and `display: block` was stretching that pill to the
     full width of the container instead of just shrinking to its content. */
  .pbj-provider-ccn-float {
    float: none;
    display: inline-block;
    margin: 0.2rem 0 0.4rem 0;
    font-size: 0.66rem;
  }
  .pbj-provider-dl-trigger {
    width: 1.2rem;
    height: 1.2rem;
  }
  .pbj-provider-dl-trigger svg { width: 0.68rem; height: 0.68rem; }
  .pbj-provider-page #facility-casemix .pbj-casemix-details {
    padding: 1rem 0 0;
    border-left: 0;
    border-top: 1px solid var(--provider-border);
  }

  /* Header density: identity/context used to stack as four separate full-
     width rows (title+downloads, meta, CCN/quarter, flags). CCN now floats
     beside the facility name itself (see .pbj-provider-ccn-float); meta and
     flags still pack together on their own wrapped row(s) below it instead
     of each forcing a full-width row regardless of actual content width. */
  .pbj-provider-page .pbj-page-summary-identity {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.5rem;
    row-gap: 0.35rem;
  }
  .pbj-provider-page .pbj-provider-identity-title {
    flex: 1 0 100%;
  }
  .pbj-provider-page .pbj-page-summary-meta,
  .pbj-provider-page .pbj-page-summary-flags {
    flex: 0 1 auto;
    margin: 0;
  }
  /* Owners loses its desktop-sized chip treatment here -- at desktop's
     larger 0.85rem/0.3rem-0.6rem sizing it's wide enough to force itself
     onto its own line after "City, ST · Ownership · Chain"; the smaller
     size below lets it usually ride the same line as that text instead. */
  .pbj-provider-page .pbj-page-summary-meta .pbj-provider-owners-btn {
    font-size: 0.72rem !important;
    padding: 0.08rem 0.35rem !important;
    line-height: 1.3 !important;
  }
  /* SFF Cand./CMS Abuse Flag badges sit on the row right below Owners --
     match its mobile-shrunk sizing so the two read as the same scale. */
  .pbj-provider-page .pbj-page-summary-flags .pbj-takeaway-flag-badge {
    font-size: 0.72rem !important;
    padding: 0.08rem 0.4rem !important;
    line-height: 1.3 !important;
  }
}

.pbj-provider-page .pbj-details,
.pbj-provider-page .pbj-methodology-utility,
.pbj-provider-page #pbj-audience-provider .pbj-audience--minimal {
  color: var(--provider-ink);
  background: var(--provider-panel);
  border-color: var(--provider-border);
  box-shadow: none;
}

.pbj-provider-page .pbj-details summary,
.pbj-provider-page .pbj-details-content,
.pbj-provider-page .pbj-details-content p,
.pbj-provider-page .pbj-methodology-utility__label,
.pbj-provider-page .pbj-ownership-summary-label {
  color: var(--provider-ink);
  background: var(--provider-panel);
}

.pbj-provider-page .pbj-details-content li,
.pbj-provider-page .pbj-methodology-utility__sub,
.pbj-provider-page .pbj-ownership-summary-meta,
.pbj-provider-page #pbj-audience-provider .pbj-audience__inline-label,
.pbj-provider-page #pbj-audience-provider .pbj-audience__chip {
  color: var(--provider-muted);
}

/* .pbj-premium-promo (the Premium CTA rendered by _render_facility_premium_cta)
   is styled entirely with var(--pbj-*) tokens in its own CSS block in app.py, so
   it needs no .pbj-provider-page-scoped override here the way the old
   .pbj-provider-premium-bridge__* dark-literal styles did. */

.pbj-provider-page #pbj-audience-provider .pbj-audience__input {
  color: var(--provider-ink);
  background: var(--provider-panel);
  border-color: #c8c2b4;
}

.pbj-provider-page #pbj-audience-provider .pbj-audience__submit {
  color: #fff;
  background: var(--provider-purple);
  border-color: var(--provider-purple);
}

.pbj-provider-page table {
  color: var(--provider-ink);
  background: var(--provider-panel);
  border-color: var(--provider-border);
  border-radius: 8px;
}

.pbj-provider-page th {
  color: var(--provider-muted);
  background: var(--provider-panel-soft);
  border-bottom-color: var(--provider-border);
  font-family: "DM Mono PBJ", ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.pbj-provider-page td {
  color: var(--provider-ink);
  background: var(--provider-panel);
  border-bottom-color: var(--provider-border);
}

.pbj-provider-page tr:hover td {
  background: var(--provider-panel-soft);
}

.pbj-provider-page .pbj-page-footer {
  border-top-color: var(--provider-border);
}

.pbj-provider-page .pbj-page-footer-crumb,
.pbj-provider-page .pbj-page-footer-sources,
.pbj-provider-page .pbj-sources-label,
.pbj-provider-page .pbj-sources-sep {
  color: var(--provider-muted);
}

@media (max-width: 639px) {
  body:has(.pbj-provider-page) .pbj-content-box:has(> .pbj-provider-page) {
    padding-inline: 0.15rem;
  }

  .pbj-provider-page .pbj-page-metrics > .pbj-metric:nth-child(2) {
    border-right: 0;
  }

  .pbj-provider-page .pbj-page-metrics > .pbj-metric:nth-child(3) {
    grid-column: 1 / -1;
    border-top: 1px solid var(--pbj-ov-border, #2a3448);
  }

  .pbj-provider-page .pbj-page-summary-controls {
    width: auto;
    justify-self: start;
  }

  .pbj-provider-follow {
    margin-top: 0;
  }

  .pbj-provider-section-nav {
    gap: 0.45rem 0.7rem;
  }

  .pbj-provider-section-nav__label {
    flex-basis: 100%;
  }

  .pbj-provider-page .pbj-trends {
    padding: 0.85rem 0.75rem 1rem;
  }

  .pbj-staffing-composition { grid-template-columns: 1fr auto auto; padding: .7rem .7rem; gap: .5rem; }
  .pbj-staffing-composition__label {
    grid-column: 1 / -1;
    flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: .35rem;
  }
  .pbj-staffing-composition__terms {
    flex-wrap: nowrap; gap: .3rem; font-size: .62rem;
  }
  .pbj-staffing-composition__terms > span { overflow: hidden; text-overflow: ellipsis; }
  .pbj-how-read { grid-template-columns: 1fr; }
  .pbj-how-read ol { grid-template-columns: 1fr; }
  /* "CMS Case-Mix" (eyebrow) + "What is case-mix?" stay on the header's own
     top row (app.py's .pbj-casemix-section-header already lays them out as
     row/space-between) -- this used to force flex-direction:column here,
     which (via the #facility-casemix ID's higher specificity) silently beat
     that and dropped the button to its own line below the eyebrow. The
     title line below the header wraps normally regardless. */
  .pbj-provider-page #facility-casemix h2.pbj-casemix-section-title { width: 100%; white-space: normal; overflow: visible; overflow-wrap: anywhere; }
  .pbj-provider-page #facility-casemix .pbj-casemix-support { width: 100%; overflow-wrap: anywhere; }
  /* Sit right under the bar -- the desktop-sized top margin/padding/divider
     read as wasted vertical space on a narrow, already-scrolly mobile page. */
  .pbj-casemix-overall-values { gap: 0 .6rem; margin-top: .3rem; padding-top: .3rem; border-top: 0; }
  .pbj-casemix-overall-values strong { font-size: 1rem; }
  .pbj-casemix-overall-values small { font-size: .72rem; line-height: 1.3; }

  .pbj-provider-page .pbj-trends-tabs {
    width: 100%;
    flex-wrap: nowrap;
  }

  /* Equal-width segments instead of content-sized ones -- otherwise "Contract
     staffing" claims most of the row and "Staffing"/"Census" look cramped
     next to it. No horizontal scroll: three balanced segments always fit. */
  .pbj-provider-page .pbj-trends-tab {
    flex: 1 1 0;
    text-align: center;
    padding: 0.4rem 0.5rem;
    font-size: 0.74rem;
  }
}

/* "Contract staffing" -> "Contract" once a 3-way equal split gets tight
   (some margin above the 430px checkpoint so the swap lands before the
   full label starts crowding its equal-width segment). */
@media (max-width: 480px) {
  .pbj-provider-page .pbj-trends-tab-full {
    display: none;
  }
  .pbj-provider-page .pbj-trends-tab-compact {
    display: inline;
  }
}

@media (min-width: 640px) and (max-width: 768px) {
  .pbj-provider-page .pbj-page-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pbj-provider-page .pbj-page-metrics .pbj-metric--ratings {
    grid-column: auto;
  }
}