/* Cost of Care page additions on top of the dashboard's style.css (tokens live there). */

html { scroll-padding-top: 16px; scroll-behavior: smooth; }
.coc-main { padding-bottom: 48px; }

.coc-section { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-3);
               padding: 20px 22px; margin-bottom: 20px; }
.coc-section h2 { margin-bottom: 10px; }
.coc-section .copy p { color: var(--text); }
.coc-section .copy p:last-child { margin-bottom: 12px; }
.chart-title { font-size: 14px; color: var(--text-2); font-weight: 600; margin: 8px 0 6px; }

.chart { width: 100%; min-height: 60px; }
.chart svg { max-width: 100%; height: auto; }
.chart figure { margin: 0; }
.chart-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; }
@media (max-width: 700px) { .chart-row { grid-template-columns: 1fr; } }

.explore-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
@media (max-width: 700px) { .explore-controls { grid-template-columns: 1fr; } }
.explore-controls label { display: block; font-size: 13px; color: var(--text-2); }
.explore-controls b { color: var(--heading); font-variant-numeric: tabular-nums; }
.explore-controls input[type=range] { width: 100%; accent-color: var(--navy); }
.small { font-size: 12px; }

.dl-table td, .dl-table th { font-size: 14px; }
.dl-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dl-table a { word-break: break-word; }
.dl-extra { font-size: 14px; }

.copy-pending { color: var(--warn); background: var(--warn-bg); border: 1px dashed var(--warn-bd);
                padding: 6px 10px; border-radius: var(--r-2); font-size: 13px; }

.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--text-2); margin-top: 6px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend b { color: var(--text); font-variant-numeric: tabular-nums; }

.infl-refs { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px; align-items: center; }
.infl-ref { font: inherit; font-size: 12px; color: var(--text-2); background: var(--bg); border: 1px solid var(--border);
            border-radius: 11px; padding: 2px 9px; cursor: pointer; }
.infl-ref:hover { border-color: var(--border-strong); }
.infl-ref b { color: var(--heading); font-variant-numeric: tabular-nums; }
.src-ref { font-size: 11px; text-decoration: none; margin-right: 6px; color: var(--text-3); }
.src-list { font-size: 13px; padding-left: 20px; }
.src-list li { margin-bottom: 4px; }
.src-list li:target { background: var(--info-bg); }
.src-refs { font-size: 12px; color: var(--text-3); margin: 10px 0 0; }
.src-refs a { color: var(--text-3); }
.explore-card + .copy { margin-top: 16px; }

/* Pages (same pattern as the dashboard) */
.page { display: none; }
.page.active { display: block; }

/* Explore: prototype people / building visual */
.dcombo { display: grid; grid-template-columns: minmax(250px, 1fr) 1.6fr; gap: 20px; align-items: end; margin-top: 12px; }
@media (max-width: 860px) { .dcombo { grid-template-columns: 1fr; } }
.peoplebox { display: flex; gap: 16px; align-items: flex-end; justify-content: center; }
.peoplebox .col { display: flex; flex-direction: column; align-items: center; }
.peoplebox .cap { font-size: 12px; color: var(--text-2); text-align: center; margin-top: 4px; line-height: 1.3; }
.peoplebox .cap b { color: var(--heading); font-variant-numeric: tabular-nums; }
.stack { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 260px; width: 52px;
         border-bottom: 2px solid var(--border); padding-bottom: 2px; }
.stack .prow { display: flex; gap: 2px; justify-content: center; line-height: 0; }
.bstack { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; height: 260px;
          border-bottom: 2px solid var(--border); padding-bottom: 2px; }
.chart-row.tight { margin-top: 0; }

/* Downloads table */
.dl-table td.fy { white-space: nowrap; font-variant-numeric: tabular-nums; }
.dl-table th.num, .dl-table td.num { text-align: right; }
.graph-card + .copy { margin-top: 14px; }

/* Back / Next at the foot of each page */
.pager { display: flex; justify-content: space-between; gap: 12px; margin: 4px 0 24px; }
.pager a { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; min-width: 180px;
           background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-3);
           text-decoration: none; color: var(--text-2); font-size: 12px; }
.pager a:hover { border-color: var(--navy); }
.pager a b { font-size: 15px; color: var(--navy); font-weight: 600; }
.pager .pager-next { text-align: right; margin-left: auto; }
@media (max-width: 480px) { .pager a { min-width: 0; flex: 1; } }

/* What's in the rate: value list under the stacked bar */
.comp-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 320px)); gap: 4px 20px; margin-top: 10px; font-size: 13px; }
.comp-legend div { display: flex; align-items: center; gap: 8px; }
.comp-legend i { width: 12px; height: 12px; border-radius: 2px; flex: none; }
.comp-legend span { flex: 1; color: var(--text-2); }
.comp-legend b { font-variant-numeric: tabular-nums; }
.comp-legend .tot { border-top: 1px solid var(--border); padding-top: 4px; font-weight: 700; }
/* Facility table (mirrors the workbook) */
.fac-table { margin-top: 12px; }
.fac-table summary { cursor: pointer; color: var(--link); font-size: 14px; }
.fac-table table { font-size: 12.5px; margin-top: 8px; }
.fac-table td { white-space: nowrap; }
.fac-table th { white-space: normal; vertical-align: bottom; min-width: 70px; }
.fac-table td.num, .fac-table th { text-align: right; font-variant-numeric: tabular-nums; }
.fac-table th:first-child { text-align: left; }
.fac-table tr.tot td { font-weight: 700; background: var(--info-bg); }