/*
 * provider.css  —  provider page (provider.php / providerNew.php)
 * ---------------------------------------------------------------------------
 * Shared sections first, then state sections. State sections are scoped with
 * :where(.state-xx) on <body> so they only apply on that state's pages while
 * keeping the same specificity they had as inline <style> blocks. Order
 * matches the page's render order, so the cascade is unchanged.
 */

/* ===========================================================================
   PAGE (general, helpers, tabs)
   =========================================================================== */
/* General */
body {overflow-x: hidden;}
p {margin: 0px;}
h1, h2, h3, h4 {font-family: 'Comfortaa', sans-serif;}
.dashboard {overflow-x: hidden; overflow-y: auto; position: relative; top: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;}
.content {max-width: 1200px; padding: 25px 0px; min-height: calc(100vh - 190px);}
select {color: var(--elderOrange); display: inline-block; line-height: 1.5em; padding: 8px 45px 7px 10px; width: 100%; margin: 0; -webkit-box-sizing: border-box; ---moz-box-sizing: border-box; -webkit-appearance: none; --moz-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--elderOrange) 50%), linear-gradient(135deg, var(--elderOrange) 50%, transparent 50%), linear-gradient(to right, var(--elderOrange), var(--elderOrange)); background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.75em) 0.5em; background-size: 5px 5px, 5px 5px, 1px 1.5em; background-repeat: no-repeat; border: var(--orangeBorder); border-radius: var(--borderRadius); user-select: none;}
select:focus {background-size: 5px 5px, 5px 5px, 1px 1.5em; background-repeat: no-repeat; border: var(--orangeBorder) !important;}
select option {padding-block-start: 10px; padding: 10px 20px; color: #333;}

/* Helpers */
.hidden {display: none !important;}
.noCursor {cursor: auto;}
.subText {font-size: 12px; font-weight: light; font-style: italic;}
.noMarg {margin: 0px !important;}
.mobile-show {display: none !important;}
.flex {display: flex;}
.col {flex-direction: column;}
.justifyS {justify-content: flex-start;}
.justify {justify-content: center;}
.align {align-items: center;}
.mobShow {display: none !important;}
.stickyPos {position: sticky; top: 100px; z-index: 100;}
.gap {gap: 10px;}
.bold {font-weight: bold;}

/* Tooltip overrides */
[data-tooltip]:after {border-radius: 10px;}
a[data-tooltip]:before {margin-left: -120px;}

/* Buttons */
.scrollToTopButton {position: fixed; width: auto; bottom: 0; right: 0; z-index: 4; padding: 20px;}

/* Tab Navigation */
.viewToggleTabsCont {margin-top: 10px; margin-bottom: 10px; width: 100%; border-bottom: 1px solid var(--gray); background: #fff;}
.toggleTab {width: auto; border-bottom: 3px solid #fff; text-align: center; padding: 4px 12px; cursor: pointer; position: relative;}
.toggleTab p {user-select: none;}
.toggleTab:hover {border-bottom: 3px solid var(--gray) !important;}
.toggleTab.active {border-bottom: 3px solid var(--elderOrange) !important;}
.viewableTabs {border-radius: var(--borderRadius); background: #fff; display: flex; justify-content: space-between; align-items: flex-start; padding-top: 10px;}
.tabViewed {gap: 20px; display: none;}
.tabViewed.active {display: flex;}
.tab-view-column {flex-direction: column;}
.subTabCont {margin-top: 0px; margin-bottom: 0px; padding-left: 0px; display: flex; justify-content: flex-start; align-items: center;}

/* Section Heading */
.section-heading {margin-top: 40px;}

/* Map Error */
.map-error {padding: 40px; text-align: center;}

/* Page loader (providerRenderPageLoader): covers the page until the provider data has loaded */
.pageLoader {position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: #fff; transition: opacity .25s ease, visibility .25s ease;}
.pageLoader--done {opacity: 0; visibility: hidden; pointer-events: none;}
.pageLoaderSpinner {width: 50px; aspect-ratio: 1; border-radius: 50%; padding: 3px; background: radial-gradient(farthest-side, var(--elderOrange, #C4410E) 95%, #0000) 50% 0/12px 12px no-repeat, radial-gradient(farthest-side, #0000 calc(100% - 5px), var(--elderOrange, #C4410E) calc(100% - 4px)) content-box; animation: pageLoaderSpin 1.2s linear infinite;}
.pageLoaderText {font-size: 14px; color: #6B635C;}
@keyframes pageLoaderSpin {to {transform: rotate(1turn);}}
@media (prefers-reduced-motion: reduce) {
    .pageLoaderSpinner {animation-duration: 3s;}
}

/* Scrollbar */
::-webkit-scrollbar, ::-webkit-scrollbar-thumb {width: 0px; height: 0px; background: #fff;}

/* Responsive */
@media only screen and (max-width: 1200px) {
    .content {padding: 25px 15px;}
    .mobHide {display: none !important;}
    .mobShow {display: flex !important;}
    .mobWidthCalc {width: calc(100% - 20px) !important;}
    .tabViewed {flex-direction: column;}
    .viewToggleTabsCont {padding: 10px !important; margin: 10px 0px; display: flex; gap: 10px; flex-wrap: nowrap; overflow-x: scroll; justify-content: flex-start; align-items: center; border: 1px solid var(--gray); background: var(--gray); border-radius: var(--borderRadius); position: relative;}
    .viewToggleTabsCont::after {position: sticky; content: "||"; right: -10px; width: 25px; z-index: 10; pointer-events: none; background: var(--gray); height: 35px; align-content: center;}
    .subTabCont {margin: 0px; padding-top: 0px;}
    .toggleTab {margin: 0px; border-radius: var(--borderRadius); border: 1px solid var(--gray); padding-top: 8px; padding-bottom: 8px; background: #fff;}
    .toggleTab.active {border: 1px solid var(--elderOrange) !important; background: #fff;}
    .toggleTab p {font-size: 12px; text-wrap: nowrap;}
    .viewableTabs {margin: -20px 10px 0px 10px; border-radius: var(--borderRadius); margin-top: 15px;}
    .center {display: flex; justify-content: flex-start; align-items: center; margin-left: 10px;}
}

/* ===========================================================================
   OVERVIEW (providerRenderOverview)
   =========================================================================== */
/* ---------- Tokens (fall back to mockup values if site vars are missing) ---------- */
.providerFull {
    --ov-orange: var(--elderOrange, #C4410E);
    --ov-orange-dark: var(--darkOrange, #A8360A);
    --ov-peach: #FDF0E6;
    --ov-ink: #1C1714;
    --ov-text: #3B3632;
    --ov-muted: #6B635C;
    --ov-label: #6F6862;
    --ov-line: #ECE7E1;
    --ov-border: #E6E1DA;
    --ov-card: #FFFFFF;
    --ov-radius: 16px;
}

/* ---------- Layout ---------- */
.providerFull {display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 24px; align-items: stretch; margin-bottom: 24px;}

/* ---------- Overview card ---------- */
.providerOverview {background: var(--ov-card); border: 1px solid var(--ov-border); border-radius: var(--ov-radius); padding: 32px; display: flex; flex-direction: column; min-width: 0;}

.overviewHead {display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid var(--ov-line);}
.overviewTitle {display: flex; flex-direction: column; gap: 12px;}
.overviewActions {display: flex; align-items: center; gap: 10px; flex-shrink: 0; width: auto;}

/* Badges */
.overviewBadges {display: flex; flex-wrap: wrap; gap: 8px;}
.ovBadge {display: inline-block; align-items: center; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: auto; max-width: 55ch;}
.ovBadgeType {background: var(--ov-peach); color: var(--ov-orange);}
/* Facility-type colors: light tint of the search-page pin color + a darker, high-contrast text shade */
.ovBadgeType.ft-assistedliving {background: #FFF0D1; color: #8A4B00;}
.ovBadgeType.ft-dementia {background: #FFE3F0; color: #A3145C;}
.ovBadgeType.ft-nursing {background: #DCF8E5; color: #0B6B2B;}
.ovBadgeType.ft-homecare {background: #FFF8C4; color: #6B5B00;}
.ovBadgeType.ft-residential {background: #FDE6FE; color: #8A2F8C;}
.ovBadgeType.ft-intermediate {background: #E6EAEE; color: #3A4650;}
.ovBadgeType.ft-hospice {background: #E3EBFF; color: #2A4BA8;}
.ovBadgeType.ft-hospital {background: #EDE6FF; color: #5B31C4;}
.ovBadgeType.ft-boarding {background: #FFE4E0; color: #A3281A;}
.ovBadgeSize {background: #EFEBE6; color: #4A443F;}

/* Name + address */
.pageHeader {color: var(--ov-ink); font-size: 40px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; margin: 0; width: auto;}
.overviewAddress {color: var(--ov-muted); font-size: 16px; margin: 0;}

/* Info grid */
.overviewGrid {display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; padding-top: 8px;}
.infoCol {display: flex; flex-direction: column; min-width: 0;}
.infoItem {display: flex; align-items: flex-start; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--ov-line); min-width: 0;}
.infoCol .infoItem:last-child {border-bottom: none;}
.infoItem.hidden, .ovBadge.hidden, .overviewAddress.hidden {display: none;}
.infoIcon {flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: var(--ov-peach); color: var(--ov-orange); display: flex !important; align-items: center; justify-content: center; font-size: 22px !important; cursor: default;}
.infoBody {min-width: 0; padding-top: 1px;}
.infoLabel {font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ov-label); margin-bottom: 3px;}
.infoValue {font-size: 17px; color: var(--ov-ink); line-height: 1.4; overflow-wrap: anywhere;}
.infoValue.text-capitalize {text-transform: capitalize;}
.phone-link {color: var(--ov-orange); text-decoration: none; font-weight: 400;}
.phone-link:hover {text-decoration: underline;}

/* Action buttons: locked to their content size so global button/div styles can't stretch them */
.providerFull .overviewActions > div {width: auto !important; flex: 0 0 auto; position: static; float: none;}
.providerFull .overviewActions #permalink {display: flex;}

/* Share button */
.providerFull .permaLink {display: inline-flex !important; align-items: center; gap: 8px; width: auto !important; max-width: none; height: 44px; box-sizing: border-box; flex: 0 0 auto; float: none; position: static; background: var(--ov-orange); color: #fff; border: 1px solid var(--ov-orange); border-radius: 8px; padding: 0 20px; font-size: 16px; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer; transition: background .15s ease;}
.providerFull .permaLink:hover {background: var(--ov-orange-dark); border-color: var(--ov-orange-dark); color: #fff;}
.providerFull .permaLink span {float: none;}
.providerFull .permaLink .material-symbols-outlined {font-size: 20px;}

/* Follow button */
.providerFull .followProvider {width: 44px !important; height: 44px; min-width: 44px; max-width: 44px; box-sizing: border-box; padding: 0; flex: 0 0 44px; position: static; z-index: auto; border-radius: 8px; border: 1px solid var(--ov-border); background: #fff; color: var(--ov-orange); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s ease, border-color .15s ease;}
.providerFull .followProvider:hover {background: var(--ov-peach); border-color: var(--ov-orange);}
.providerFull .followProvider span {font-size: 22px;}

/* ---------- Map card ---------- */
.providerFull > * {min-width: 0;}
.providerMapCard {position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 100%; max-width: 100%; min-height: 420px; border: 1px solid var(--ov-border); border-radius: var(--ov-radius); overflow: hidden; background: #E8ECEE; isolation: isolate;}
/* Flex child instead of absolute fill: Google Maps sets inline position/size on this div, which broke the old approach */
.providerFull .providerMapCard .providerMap {flex: 1 1 auto; width: 100% !important; max-width: 100%; height: auto; min-height: 420px; margin: 0; border-radius: 0; background: #E8ECEE;}
.mapOverlay {position: absolute; left: 25px; right: 16px; bottom: 16px; z-index: 5; box-sizing: border-box; background: #fff; border-radius: 12px; box-shadow: 0 4px 16px rgba(28, 23, 20, .12); padding: 14px 14px 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 90%;}
.mapOverlayText {min-width: 0; flex: 1 1 auto;}
.mapOverlayName {font-size: 16px; font-weight: 700; color: var(--ov-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.mapOverlayAddr {font-size: 13px; color: var(--ov-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.directionsBtn {flex-shrink: 0; border: 1px solid var(--ov-border); border-radius: 8px; padding: 9px 16px; font-size: 14px; font-weight: 600; color: var(--ov-ink); text-decoration: none; background: #fff; transition: border-color .15s ease, color .15s ease;}
.directionsBtn:hover {border-color: var(--ov-orange); color: var(--ov-orange);}

/* ---------- Responsive ---------- */
@media only screen and (max-width: 1200px) {
    .providerFull {grid-template-columns: 1fr; padding: 10px 10px 0 10px;}
    .providerMapCard {min-height: 280px;}
    .providerFull .providerMapCard .providerMap {min-height: 280px;}
}
@media only screen and (max-width: 700px) {
    .providerOverview {padding: 20px;}
    .overviewHead {flex-direction: column; align-items: stretch;}
    .overviewActions {justify-content: flex-end;}
    .pageHeader {font-size: 30px;}
    .overviewGrid {grid-template-columns: 1fr;}
    .infoCol:first-child .infoItem:last-child {border-bottom: 1px solid var(--ov-line);}
}

/* ===========================================================================
   IQ ANALYSIS (providerRenderAnalysis)
   =========================================================================== */
/* ---------- Tokens (fall back to mockup values if site vars are missing) ---------- */
.iqAnalysis {
    --iq-red: var(--red, #C62828);
    --iq-green: var(--green, #2E7D32);
    --iq-orange: #D9730D;
    --iq-ink: #1C1714;
    --iq-muted: #6B635C;
    --iq-label: #5F5852;
    --iq-border: #E6E1DA;
    --iq-line: #ECE7E1;
    --iq-card: #FFFFFF;
    --iq-radius: 16px;
    --iq-teal: #087187;
}

/* ---------- Container: no box of its own, cards sit directly on the page ---------- */
.iqAnalysis {display: flex; flex-direction: column; width: 100%; height: auto; margin: 0 0 24px 0; padding: 0; background: transparent; border: none; box-sizing: border-box;}

/* ---------- Card grid ---------- */
.iqBreakdown {display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; align-items: stretch;}
.iqBreakdown > * {min-width: 0;}

/* ---------- Stat card (used by every state's analysis cards) ---------- */
.iqAnalysis .statCard {position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; box-sizing: border-box; width: 100%; height: 100%; padding: 22px 24px 22px; background: var(--iq-card); border: 1px solid var(--iq-border); border-top: 4px solid var(--iq-teal); border-radius: var(--iq-radius); cursor: pointer; transition: transform .15s ease, box-shadow .15s ease;}
.iqAnalysis .statCard:hover {transform: translateY(-2px); box-shadow: 0 6px 18px rgba(28, 23, 20, .08); background: var(--iq-card);}

.statAccentRed {--card-accent: var(--iq-red);}
.statAccentGreen {--card-accent: var(--iq-green);}
.statAccentOrange {--card-accent: var(--iq-orange);}

.statTop {display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px;}
.iqAnalysis .statLabel {margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--iq-label); text-align: left !important; line-height: 1.3;}
.iqAnalysis .statIcon {font-size: 22px; color: var(--card-accent, var(--iq-muted)); flex-shrink: 0; cursor: inherit;}

/* Big number. Colour follows the existing class toggles:
   defaultStatStyle present = neutral, removed = bad (red) / warning (orange) */
.iqAnalysis .statNumber {display: block; font-size: 52px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--iq-ink); background: none !important; box-shadow: none !important; width: auto; height: auto; border-radius: 0; text-align: left;}
.iqAnalysis .statNumber.badStatStyle:not(.defaultStatStyle) {color: var(--iq-red);}
.iqAnalysis .statNumber.warningStatStyle:not(.defaultStatStyle) {color: var(--iq-orange);}

.iqAnalysis .statSub {margin: 10px 0 0 0; font-size: 16px; color: var(--iq-muted); text-align: left; line-height: 1.3;}

/* ---------- Collapsible disclaimer box (used by any state component) ----------
   Markup: .disclaimer > h2 (with a toggle <i>) + .collapsable[.active] > p */
.disclaimer {width: 100%; box-sizing: border-box; border-radius: var(--borderRadius); background: #fff; border: 1px solid var(--grey); padding: 20px;}
.disclaimer h2 {margin: 0; padding: 0; font-size: 16px; font-weight: 600; float: left; width: 100%; margin-bottom: 10px;}
.disclaimer i {cursor: pointer;}
.disclaimer:has(.collapsable.active) i {transform: rotate(180deg);}
.disclaimer .collapsable {max-height: 0px; transition: .2s all; overflow: hidden;}
.disclaimer .collapsable.active {max-height: 1000px;}
.disclaimer p {font-size: 12px;}

/* ---------- Responsive ---------- */
@media only screen and (max-width: 1200px) {
    .iqAnalysis {padding: 0 0px; margin-top: 10px;}
    .iqBreakdown {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;}
    .iqAnalysis .statCard {padding: 18px;}
    .iqAnalysis .statNumber {font-size: 42px;}
    .mobileStack {flex-direction: column;}
}
@media only screen and (max-width: 480px) {
    .iqAnalysis .statLabel {font-size: 11px;}
    .iqAnalysis .statNumber {font-size: 36px;}
    .iqAnalysis .statSub {font-size: 14px;}
}

/* ===========================================================================
   SD — analysis survey stat cards
   =========================================================================== */
/* SD survey group cards: two mini stats side by side */
:where(.state-sd) .statPair {display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: auto;}
:where(.state-sd) .iqAnalysis .statMini {display: flex; flex-direction: column; align-items: flex-start; padding: 0; background: none; border: none; cursor: inherit;}
:where(.state-sd) .iqAnalysis .statMini + .statMini {border-left: 1px solid var(--iq-line); padding-left: 16px;}
:where(.state-sd) .iqAnalysis .statMini .statNumber {font-size: 40px;}
:where(.state-sd) .iqAnalysis .statMini .statSub {font-size: 14px; margin-top: 8px;}

/* Survey disclaimer (inside the Health Department Provider Surveys card) */
:where(.state-sd) .sdSurveyDisclaimer {padding: 0 32px 32px 32px; background: var(--inv-wash);}
:where(.state-sd) .sdSurveyDisclaimer .disclaimer {overflow: hidden;}

/* Survey count notice */
:where(.state-sd) .sd-info-banner {display: flex; align-items: flex-start; gap: 12px; background: var(--iq-card); border: 1px solid var(--iq-border); border-left: 4px solid var(--iq-orange); border-radius: 12px; padding: 14px 18px; font-size: 14px; color: var(--iq-muted); line-height: 1.55;}
:where(.state-sd) .sd-info-banner strong {color: var(--iq-ink);}
:where(.state-sd) .sd-info-banner .material-icons {font-size: 20px; color: var(--iq-orange); flex-shrink: 0; margin-top: 1px;}

@media only screen and (max-width: 480px) {
    :where(.state-sd) .iqAnalysis .statMini .statNumber {font-size: 32px;}
    :where(.state-sd) .statPair {gap: 10px;}
    :where(.state-sd) .iqAnalysis .statMini + .statMini {padding-left: 10px;}
}
@media only screen and (max-width: 700px) {
    :where(.state-sd) .sdSurveyDisclaimer {padding: 0 18px 18px 18px;}
}

/* ===========================================================================
   SD — Federal Nursing Home Report card
   =========================================================================== */
:where(.state-sd) .nhReport {
    --nh-orange: var(--elderOrange, #C4410E);
    --nh-peach: #FDF0E6;
    --nh-ink: #1C1714;
    --nh-muted: #6B635C;
    --nh-border: #E6E1DA;
}

:where(.state-sd) .nhReport {display: flex; align-items: center; justify-content: space-between; gap: 24px; box-sizing: border-box; width: 100%; margin: 0 0 24px 0; padding: 28px 32px; background: #fff; border: 1px solid var(--nh-border); border-radius: 16px;}
:where(.state-sd) .nhReportMain {display: flex; align-items: flex-start; gap: 18px; min-width: 0;}
:where(.state-sd) .nhReportIcon {flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px; background: var(--nh-peach); color: var(--nh-orange); display: flex !important; align-items: center; justify-content: center; font-size: 26px !important; cursor: default;}
:where(.state-sd) .nhReportText {display: flex; flex-direction: column; gap: 6px; min-width: 0;}
:where(.state-sd) .nhReportEyebrow {margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--nh-orange);}
:where(.state-sd) .nhReport h2.nhReportTitle {margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; color: var(--nh-ink);}
:where(.state-sd) .nhReportDesc {margin: 0; font-size: 16px; line-height: 1.5; color: var(--nh-muted); max-width: 640px;}

/* Button: overrides any global .view-full-report styles inside this card only */
:where(.state-sd) .nhReport .nhReportBtn {display: inline-flex !important; align-items: center; gap: 8px; flex: 0 0 auto; width: auto !important; height: 44px; box-sizing: border-box; padding: 0 18px; margin: 0; background: #fff; color: var(--nh-ink); border: 1px solid var(--nh-border); border-radius: 8px; font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; transition: border-color .15s ease, color .15s ease;}
:where(.state-sd) .nhReport .nhReportBtn:hover {border-color: var(--nh-orange); color: var(--nh-orange);}
:where(.state-sd) .nhReport .nhReportBtn .material-icons {font-size: 18px;}

@media only screen and (max-width: 1200px) {
    :where(.state-sd) .nhReport {margin: 0 10px 24px 10px; width: auto; padding: 22px;}
}
@media only screen and (max-width: 700px) {
    :where(.state-sd) .nhReport {flex-direction: column; align-items: stretch;}
    :where(.state-sd) .nhReport h2.nhReportTitle {font-size: 22px;}
    :where(.state-sd) .nhReportDesc {font-size: 14px;}
    :where(.state-sd) .nhReport .nhReportBtn {justify-content: center; width: 100% !important;}
}

/* ===========================================================================
   REPORTS TAB VIEW (providerRenderReportsTabView)
   =========================================================================== */
/* =========================================================
   TOKENS
   ========================================================= */
.investigationsCard, #complaintsAndSurveysTabView, #viewToggleTabsCont {
    --inv-orange: var(--elderOrange, #C4410E);
    --inv-red: #C62828;
    --inv-red-bg: #FDECEC;
    --inv-green: #2E7D32;
    --inv-green-bg: #E8F5E9;
    --inv-amber: #D9730D;
    --inv-amber-bg: #FEF3E6;
    --inv-indigo: #283593;
    --inv-indigo-bg: #E8EAF6;
    --inv-ink: #1C1714;
    --inv-text: #2E2925;
    --inv-muted: #6B635C;
    --inv-border: #E6E1DA;
    --inv-line: #ECE7E1;
    --inv-wash: #FAF8F5;
    --inv-chip: #F0ECE7;
}

/* =========================================================
   OUTER CARD + MAIN TABS
   ========================================================= */
.investigationsCard {background: #fff; border: 1px solid var(--inv-border); border-radius: 16px; overflow: hidden; margin: 0 0 24px 0; box-sizing: border-box; width: 100%;}
.investigationsHead {padding: 32px 32px 0 32px; background: #fff;}
.investigationsTitle {margin: 0 0 20px 0; font-size: 30px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; color: var(--inv-ink);}

#viewToggleTabsCont {display: flex; flex-wrap: nowrap; gap: 32px; overflow-x: auto; scrollbar-width: none; margin: 0; padding: 0; background: none; border: none; border-bottom: 1px solid var(--inv-line); width: 100%; box-sizing: border-box;}
#viewToggleTabsCont::-webkit-scrollbar {display: none;}
#viewToggleTabsCont .toggleTab {flex: 0 0 auto; display: flex; align-items: center; width: auto !important; margin: 0 0 -1px 0 !important; padding: 0 4px 14px 4px !important; background: none !important; border: none !important; border-bottom: 3px solid transparent !important; border-radius: 0 !important; box-shadow: none !important; cursor: pointer; transition: border-color .15s ease;}
#viewToggleTabsCont .toggleTab p {margin: 0; font-size: 17px; font-weight: 600; color: #4A443F; white-space: nowrap; transition: color .15s ease;}
#viewToggleTabsCont .toggleTab:hover p {color: var(--inv-ink);}
#viewToggleTabsCont .toggleTab.active {border-bottom-color: var(--inv-orange) !important;}
#viewToggleTabsCont .toggleTab.active p {color: var(--inv-orange);}

/* Neutralise the page's older tab + body styles inside the card */
#viewToggleTabsCont::after, #viewSubTabToggleCont::after {content: none !important; display: none !important;}
.investigationsCard .viewableTabs {display: block; margin: 0 !important; width: 100% !important; border-radius: 0; background: var(--inv-wash); padding: 28px 32px 32px 32px;}
.investigationsCard .viewableTabs > .tabViewed {width: 100%; box-sizing: border-box;}

/* =========================================================
   SHARED STYLES
   ========================================================= */
#complaintsAndSurveysTabView {width: 100%; box-sizing: border-box;}

/* ---------- Sub-tab pills ---------- */
#viewSubTabToggleCont {display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px 0; padding: 0; background: none; border: none;}
#viewSubTabToggleCont .toggleTab {display: inline-flex; align-items: center; gap: 10px; width: auto !important; height: 46px; box-sizing: border-box; margin: 0 !important; padding: 0 14px 0 20px !important; background: #fff !important; border: 1px solid var(--inv-border) !important; border-radius: 999px !important; box-shadow: none !important; cursor: pointer; transition: background .15s ease, border-color .15s ease;}
#viewSubTabToggleCont .toggleTab p {margin: 0; font-size: 16px; font-weight: 600; color: var(--inv-ink) !important; white-space: nowrap;}
#viewSubTabToggleCont .toggleTab:hover {border-color: #CFC8BF !important;}
#viewSubTabToggleCont .toggleTab.active {background: var(--inv-ink) !important; border-color: var(--inv-ink) !important;}
#viewSubTabToggleCont .toggleTab.active p {color: #fff !important;}
.pillCount {display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; background: var(--inv-chip); color: var(--inv-ink); font-size: 12px; font-weight: 700; line-height: 1;}
#viewSubTabToggleCont .toggleTab.active .pillCount {background: rgba(255,255,255,.18); color: #fff;}

/* Empty State */
#noAPIstuffFound {width: 100%;}
.empty-state {width: 100%; box-sizing: border-box; text-align: center; padding: 48px 20px; background: #fff; border: 1px dashed var(--inv-border); border-radius: 14px; color: var(--inv-muted); font-size: 14px;}
.empty-state p {margin: 0;}

/* Report List */
.report-list {display: flex; flex-direction: column; gap: 16px;}

/* ---------- Report card (built by buildReportCard) ---------- */
.report-card {background: #fff; border: 1px solid var(--inv-border); border-radius: 14px; overflow: hidden; box-shadow: none; transition: box-shadow .15s ease;}
.report-card:hover {box-shadow: 0 6px 18px rgba(28, 23, 20, .06);}

.rc-head {display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 24px; flex-wrap: wrap;}
.rc-meta {display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; min-width: 0;}
.rc-date, .rc-type {font-size: 14px; color: var(--inv-muted); line-height: 1.3;}
.rc-dot {color: #A9A19A; font-size: 14px;}
.rc-actions {display: flex; align-items: center; gap: 10px; flex-shrink: 0;}

.rc-body {padding: 22px 24px 26px 24px; border-top: 1px solid var(--inv-line);}
.rc-ai-label {display: flex; align-items: center; gap: 8px; margin: 0 0 14px 0; font-size: 14px; font-weight: 600; color: var(--inv-muted);}
.rc-ai-label .material-symbols-outlined {font-size: 18px; color: var(--inv-orange); cursor: default;}

/* Status pill base (colour variants are defined per state) */
.status-label {display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; line-height: 1.2; white-space: nowrap;}
.status-label--no-margin {margin-bottom: 0;}

.tag-code {font-size: 14px; color: var(--inv-muted); font-weight: 500;}

/* ---------- Buttons: "Hide AI summary" and "View report" ---------- */
.toggle-summary, .view-full-report, .rc-btn {display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; width: auto !important; height: 44px; box-sizing: border-box; margin: 0; padding: 0 16px; background: #fff !important; color: var(--inv-ink) !important; border: 1px solid var(--inv-border); border-radius: 8px; font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none !important; cursor: pointer; transition: border-color .15s ease, color .15s ease;}
.toggle-summary:hover, .view-full-report:hover, .rc-btn:hover {border-color: var(--inv-orange); color: var(--inv-orange) !important;}
.toggle-summary .material-icons {font-size: 20px; transition: none;}
.toggle-summary.expanded .material-icons {transform: none;}
.view-full-report .material-icons {font-size: 18px;}
.view-full-report--inline {align-self: flex-start;}

/* ---------- Summary content ---------- */
.summary-preview {margin: 0; font-size: 14px; color: var(--inv-muted); line-height: 1.6; font-style: normal;}
.summary-preview::after {content: '…';}
.summary-preview.hidden {display: none;}

.summary-text {font-size: 16px; color: var(--inv-text); line-height: 1.7; max-height: 0; overflow: hidden; opacity: 0; margin: 0; transition: max-height .4s ease, opacity .25s ease;}
.summary-text.expanded {max-height: 6000px; opacity: 1;}
.summary-text h1, .summary-text h2, .summary-text h3, .summary-text h4, .summary-text h5 {margin: 26px 0 8px 0; font-size: 16px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--inv-ink); line-height: 1.4;}
.summary-text > :first-child {margin-top: 0;}
.summary-text p {margin: 0 0 10px 0;}
.summary-text ul, .summary-text ol {margin: 6px 0 8px 0; padding-left: 22px;}
.summary-text li {margin: 4px 0; padding-left: 2px;}
.summary-text ul ul {list-style: circle; margin: 4px 0;}
.summary-text strong, .summary-text b {font-weight: 700; color: var(--inv-ink);}

/* ---------- Legend (colour boxes are defined per state) ---------- */
.legend-section {margin-top: 24px; padding: 22px 24px; background: #fff; border-radius: 14px; border: 1px solid var(--inv-border);}
.legend-section h4 {margin: 0 0 16px 0; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--inv-muted);}
.legend-grid {display: grid; grid-template-columns: 1fr; gap: 16px;}
@media (min-width: 768px) { .legend-grid {grid-template-columns: repeat(2, 1fr);} }
.legend-item {display: flex; align-items: flex-start; gap: 12px;}
.legend-box {width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; margin-top: 4px;}
.legend-text {font-size: 14px; line-height: 1.45;}
.legend-text strong {display: block; margin-bottom: 2px; font-size: 16px; font-weight: 700; color: var(--inv-ink);}
.legend-text span {color: var(--inv-muted);}

/* =========================================================
   SHARED LAYOUT HELPERS
   ========================================================= */
.providerSurveysAndComplaints {display: flex; flex-direction: column; gap: 0; width: 100%; overflow: hidden;}
.documentContainer {display: flex; flex-direction: row; gap: 20px; align-items: flex-start; justify-content: center; width: 100%;}

/* Scroll-to-top button (page level) */
.specialButton {border: 1px solid var(--inv-orange); color: var(--inv-orange); display: flex; align-items: center; justify-content: center; padding: 10px; background: #fff; border-radius: 8px; cursor: pointer;}
.specialButton:hover {background: #FDF0E6;}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media only screen and (max-width: 1200px) {
    .investigationsCard { width: 100%;}
    /* The page turns tabs into gray pill buttons on mobile, so undo that here */
    #viewToggleTabsCont {padding: 0 !important; margin: 0 !important; background: none !important; border: none !important; border-bottom: 1px solid var(--inv-line) !important; border-radius: 0 !important; position: static; gap: 24px; justify-content: flex-start; overflow-x: auto;}
    #viewSubTabToggleCont {padding: 0 !important; margin: 0 0 22px 0 !important; background: none !important; border: none !important; border-radius: 0 !important; position: static;}
    #viewToggleTabsCont .toggleTab p, #viewSubTabToggleCont .toggleTab p {text-wrap: nowrap;}
    .documentContainer {flex-direction: column;}
}
@media only screen and (max-width: 700px) {
    .investigationsHead {padding: 22px 18px 0 18px;}
    .investigationsTitle {font-size: 24px; margin-bottom: 14px;}
    .investigationsCard .viewableTabs {padding: 18px;}
    #viewToggleTabsCont {gap: 22px;}
    #viewToggleTabsCont .toggleTab p {font-size: 14px;}
    #viewSubTabToggleCont {flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;}
    #viewSubTabToggleCont::-webkit-scrollbar {display: none;}
    #viewSubTabToggleCont .toggleTab {flex: 0 0 auto; height: 40px; padding: 0 10px 0 14px !important;}
    #viewSubTabToggleCont .toggleTab p {font-size: 14px;}
    .rc-head {padding: 16px; flex-direction: column; align-items: stretch;}
    .rc-actions {width: 100%;}
    .rc-actions > * {flex: 1 1 0;}
    .rc-body {padding: 16px 16px 20px 16px;}
    .summary-text {font-size: 14px;}
    .legend-section {padding: 18px;}
}

/* ===========================================================================
   MN — reports card
   =========================================================================== */
/* =========================================================
   MINNESOTA — reports card styles
   ========================================================= */
/* Status colours */
:where(.state-mn) .status-label.substantiated {background: var(--inv-red-bg); color: var(--inv-red);}
:where(.state-mn) .status-label.unsubstantiated {background: var(--inv-green-bg); color: var(--inv-green);}
:where(.state-mn) .status-label.inconclusive {background: var(--inv-amber-bg); color: var(--inv-amber);}
:where(.state-mn) .status-label.survey {background: var(--inv-indigo-bg); color: var(--inv-indigo);}
:where(.state-mn) .legend-box.substantiated {background: var(--inv-red);}
:where(.state-mn) .legend-box.unsubstantiated {background: var(--inv-green);}
:where(.state-mn) .legend-box.inconclusive {background: var(--inv-amber);}

/* Tabs are added at different times (some after async calls), so lock the order */
:where(.state-mn) #complaintsAndSurveysTab {order: 1;}
:where(.state-mn) #complaintsAndSurveysTab2 {order: 2;}
:where(.state-mn) #staffingInformationTab {order: 3;}
:where(.state-mn) #propublicaTab {order: 4;}
:where(.state-mn) #safetyViolationsTab {order: 5;}

/* ProPublica tab */
:where(.state-mn) #propublicaLink {display: flex; gap: 20px; flex-direction: column; align-items: flex-start; justify-content: flex-start;}
:where(.state-mn) .propubHeader {display: flex; align-items: center; justify-content: space-between;}
:where(.state-mn) .propubInfoLink {display: flex; align-items: center; justify-content: center; gap: 20px; background: var(--elderOrange); border-radius: var(--borderRadius); border: var(--orangeBorder); color: #fff; padding: 5px 10px;}
:where(.state-mn) .propubInfoLink:hover {background: #fff; border: var(--orangeBorder); color: var(--elderOrange);}
:where(.state-mn) .partner-logo {max-width: 400px;}
@media only screen and (max-width: 1200px) {
    :where(.state-mn) #proPublicaLinkTag {max-width: 100% !important;}
}

/* ===========================================================================
   SD — reports card
   =========================================================================== */
/* =========================================================
   SOUTH DAKOTA — reports card styles
   ========================================================= */
/* Status colours */
:where(.state-sd) .status-label.deficient {background: var(--inv-red-bg); color: var(--inv-red);}
:where(.state-sd) .status-label.not-deficient {background: var(--inv-green-bg); color: var(--inv-green);}
:where(.state-sd) .legend-box.deficient {background: var(--inv-red);}
:where(.state-sd) .legend-box.not-deficient {background: var(--inv-green);}

/* AI summary block layout */
:where(.state-sd) .sub-report-summary {display: flex; flex-direction: column; gap: 10px; min-width: 0;}
:where(.state-sd) .sub-report-summary .summary-text.expanded {margin-top: 6px;}
:where(.state-sd) .button-controls-reports {display: flex; gap: 10px; flex-direction: row; justify-content: flex-start; align-items: center; width: auto;}
:where(.state-sd) .summary-block-layout {display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; box-sizing: border-box; height: 100%;}
:where(.state-sd) .flex-column {flex-direction: column !important;}

:where(.state-sd) .report-header {background: #fff; padding: 18px 24px; border-bottom: 1px solid var(--inv-line); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;}
:where(.state-sd) .report-header-row {display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 20px;}
:where(.state-sd) .report-header-row p {margin: 0; font-size: 14px; color: var(--inv-muted); line-height: 1.5;}

:where(.state-sd) .sd-sub-reports-container--grouped {display: flex; flex-direction: column; background: var(--inv-wash);}

:where(.state-sd) .individual-sub-report-card {flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #fff;}

:where(.state-sd) .sd-sub-report {padding: 16px 20px; border-top: 1px solid var(--inv-line);}
:where(.state-sd) .sd-sub-report.deficient, :where(.state-sd) .sd-sub-report.not-deficient {border-left: none;}

:where(.state-sd) .sd-status-badge {display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--inv-line); flex-wrap: wrap; background: #fff;}
:where(.state-sd) .sd-status-badge h4 {margin: 0 !important; font-size: 14px; font-weight: 700; color: var(--inv-ink); text-wrap: nowrap;}
:where(.state-sd) .sd-status-badge.deficient, :where(.state-sd) .sd-status-badge.not-deficient {background: #fff;}

:where(.state-sd) .sd-summary-body {padding: 18px 20px; flex-grow: 1; background: #fff; font-size: 14px; color: var(--inv-text);}
:where(.state-sd) .sd-summary-pending {font-size: 14px; color: var(--inv-muted); font-style: italic; margin: 8px 0 0 0;}

@media only screen and (max-width: 1200px) {
    :where(.state-sd) .summary-block-layout, :where(.state-sd) .sd-sub-reports-container--grouped {flex-direction: column;}
    :where(.state-sd) .report-header-row {flex-direction: column; align-items: flex-start; gap: 10px;}
}

/* ===========================================================================
   MN — fines tab (markup currently disabled)
   =========================================================================== */
/* Fines — Minnesota Only */
:where(.state-mn) #finesTabView {flex-direction: row;}

/* Fines Summary Panel */
:where(.state-mn) #finesSummary {padding: 20px; border-radius: var(--borderRadius); background: #fff; width: 70%; border: var(--orangeBorder); line-height: 1.6;}

/* Fines Header Row */
:where(.state-mn) .finesHeaderRow {display: flex; justify-content: space-between; align-items: center; padding: 15px 0px; border-bottom: 2px solid var(--elderOrange);}
:where(.state-mn) .finesHeaderRow p, :where(.state-mn) .finesHeaderRow h2 {font-weight: 800; font-size: 18px;}

/* Fine Info Rows */
:where(.state-mn) .fineInfoRow {border-bottom: 1px solid #ddd; display: flex; justify-content: space-between; align-items: center; padding: 15px 0px; transition: background 0.2s ease;}
:where(.state-mn) .fineInfoRow:hover {background: #f8f9fa;}
:where(.state-mn) .fineInfoRow p {font-size: 16px;}
:where(.state-mn) .fineInfoRow p:first-child {font-weight: 600; color: var(--elderOrange);}

/* Responsive */
@media only screen and (max-width: 1200px) {
    :where(.state-mn) #finesTabView {flex-direction: column;}
    :where(.state-mn) #finesSummary {width: 100%; padding: 15px;}
    :where(.state-mn) .finesHeaderRow {padding: 10px 0px;}
    :where(.state-mn) .finesHeaderRow p, :where(.state-mn) .finesHeaderRow h2 {font-size: 16px;}
    :where(.state-mn) .fineInfoRow {padding: 10px 0px;}
    :where(.state-mn) .fineInfoRow p {font-size: 14px;}
}

/* ===========================================================================
   MN — staffing / UDALSA tab (assisted living only)
   =========================================================================== */
/* UDALSA Layout */
:where(.state-mn.facility-assisted-living) .headingCont {display: flex; justify-content: space-between; align-items: flex-start;}
:where(.state-mn.facility-assisted-living) .udalsaHeading {display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px;}
:where(.state-mn.facility-assisted-living) .udalsaHeading h2 {font-size: 18px; text-wrap: nowrap;}
:where(.state-mn.facility-assisted-living) .udalsaHeading h3 {text-wrap: nowrap; font-size: 14px; font-weight: light;}
:where(.state-mn.facility-assisted-living) .udalsaFeatureDate {gap: 10px; border: none; width: auto;}

/* Why It Matters Section */
:where(.state-mn.facility-assisted-living) .whyItMatters {box-sizing: border-box; padding: 20px; border: 1px solid var(--grey); display: flex; flex-wrap: wrap; gap: 10px; flex-direction: column; background: #fff; border-radius: var(--borderRadius); margin-top: 10px;}
:where(.state-mn.facility-assisted-living) .whyItMattersHeading {justify-content: space-between; align-items: center; border-bottom: 1px solid var(--gray); padding-bottom: 10px; margin-bottom: 20px;}

/* Extracted UDALSA Row */
:where(.state-mn.facility-assisted-living) table {overflow-x: auto;}
:where(.state-mn.facility-assisted-living) .staffingTable td {padding: 10px 8px; border-top: 1px solid var(--gray); width: 33%;}
:where(.state-mn.facility-assisted-living) .staffingTable td:nth-child(2n) {text-align: center;}
:where(.state-mn.facility-assisted-living) th:first-child {text-align: left;}
:where(.state-mn.facility-assisted-living) .staffingTable td:last-child, :where(.state-mn.facility-assisted-living) th:last-child {text-align: right;}
:where(.state-mn.facility-assisted-living) tr:not(:first-child) {border-top: 5px solid #444;}
:where(.state-mn.facility-assisted-living) .staffCount {padding: 4px 12px; background: #f8f9fa; border-radius: var(--borderRadius);}

/* SALSA Last Updated Badge */
:where(.state-mn.facility-assisted-living) .udalsaFeatureDate {padding: 4px 10px; background: #fff; border: var(--orangeBorder); border-radius: 100px; display: flex; gap: 5px; color: var(--elderOrange);}
:where(.state-mn.facility-assisted-living) .salsaExpired {color: #fff !important; border: 1px solid var(--red) !important; background: var(--red) !important;}

/* UDALSA Link Button */
:where(.state-mn.facility-assisted-living) .viewProviderSalsaButton {display: flex; justify-content: center; align-items: center; gap: 8px; color: #fff; text-decoration: none !important; border: var(--orangeBorder); background: var(--elderOrange); padding: 5px 10px; width: 100%; border-radius: var(--borderRadius); flex-wrap: nowrap; text-wrap: nowrap;}
:where(.state-mn.facility-assisted-living) .viewProviderSalsaButton:hover {background: #fff; color: var(--elderOrange); border: 1px solid var(--elderOrange);}

/* Button Box */
:where(.state-mn.facility-assisted-living) .buttonBox {align-items: center;}
:where(.state-mn.facility-assisted-living) .boxButton {width: 100%; color: #333;}
:where(.state-mn.facility-assisted-living) .boxButton-label {font-size: 16px; font-weight: 500 !important; text-wrap: nowrap;}

/* Staffing Inner Layout */
:where(.state-mn.facility-assisted-living) .staffingInnerLayout {display: flex; flex-wrap: wrap; flex-direction: column; padding: 0px; gap: 10px; margin-top: 10px;}

/* Not Specified Ratio Badge */
:where(.state-mn.facility-assisted-living) .ratio-not-specified {display: inline-block; background: #fff3cd; color: #856404; border: 1px solid #ffc107; border-radius: 4px; padding: 2px 8px; font-size: 13px; font-weight: 600; white-space: nowrap;}

/* Responsive */
@media only screen and (max-width: 1200px) {
    :where(.state-mn.facility-assisted-living) .whyItMattersHeading {flex-direction: column; gap: 10px; padding-bottom: 20px;}
    :where(.state-mn.facility-assisted-living) .viewProviderSalsaButton {text-wrap: wrap; padding: 5px 20px; width: 100%;}
    :where(.state-mn.facility-assisted-living) .buttonBox {width: 100%;}
    :where(.state-mn.facility-assisted-living) #salsaFeatureDataDate p {width: 100%; text-wrap: nowrap;}
}

/* ===========================================================================
   MN — safety violations grid
   =========================================================================== */
/* Safety Violations */
:where(.state-mn) #safetyViolationsDiv {padding: 0 0;}
:where(.state-mn) #safetyViolationsDiv :where(table) {border-spacing: 6px; width: 100%;}
:where(.state-mn) #safetyViolationsDiv :where(td, th) {font-size: 12px; background: #f1f2f3; border-radius: 5px; padding: 15px 10px;}
:where(.state-mn) #safetyViolationsDiv td:has( .count) {text-align: center;}
:where(.state-mn) #safetyViolationsDiv .count {background: #fff; color: #333; border-radius: 5px; padding: 2px 5px; border: var(--orangeBorder);}
:where(.state-mn) .violationsDiv {display: flex; flex-direction: row; gap: 20px; align-items: flex-start; justify-content: center; margin-top: 10px;}
:where(.state-mn) .severityGridFull {padding: 20px !important; background: #fff; border-radius: var(--borderRadius);}
:where(.state-mn) .licenseeInv {width: 100%;}
:where(.state-mn) .severityTable th {text-align: center;}

@media only screen and (max-width: 1200px) {
    :where(.state-mn) #safetyViolationsDiv :where(td, th) {padding: 3px 3px; font-size: 10px;}
    :where(.state-mn) #safetyViolationsDiv {padding: 10px !important;}
}