/* Report Explorer (artboards "report-explorer" and "report-filters"), in the application's own tokens. Every class is prefixed rx- so nothing else is touched.
   Reuses ab- panels, buttons and inputs from ck-artboard.css. Below 900px the filter panel becomes a drawer. */

.rx { max-width: 96rem; }
.rx h1 { margin: 0.25rem 0 0.25rem; font: var(--ck-text-section-title); }
.rx h2 { margin: 0; font-size: 1rem; font-weight: 600; }
.rx h3 { margin: 0 0 var(--ck-space-2); font-size: 0.8125rem; font-weight: 700; color: var(--ck-slate); text-transform: none; letter-spacing: normal; }

.rx-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--ck-space-3); margin-bottom: var(--ck-space-3); }
.rx-head .ab-sub { margin: 0; }
.rx-links, .reports-links { display: flex; flex-wrap: wrap; gap: var(--ck-space-1); }
.rx-links a, .reports-links a { padding: 0.3rem var(--ck-space-3); border-radius: var(--ck-radius-md); color: var(--ck-ink); font-weight: 500; text-decoration: none; }
.rx-links a:hover, .reports-links a:hover { background: var(--ck-primary-soft); }
.rx-links a[aria-current="page"] { background: var(--ck-primary-soft); color: var(--ck-primary-hover); font-weight: 650; box-shadow: inset 0 -2px 0 var(--ck-primary); }
.rx-links a:focus-visible, .reports-links a:focus-visible { outline: none; box-shadow: var(--ck-focus-ring); }
.reports-links { margin-left: auto; font-size: 0.875rem; }

.rx-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ck-space-2); margin-bottom: var(--ck-space-3); }
.rx-actions, .rx-saved { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ck-space-2); }
.rx-saved { flex-wrap: nowrap; }
.rx-filter-toggle { display: none; }

.rx-layout { display: grid; grid-template-columns: 22rem minmax(0, 1fr); gap: var(--ck-space-4); align-items: start; }
.rx-main { min-width: 0; }

/* Filter panel */
.rx-filters { display: flex; flex-direction: column; background: var(--ck-surface); border: 1px solid var(--ck-border); border-radius: var(--ck-radius-lg); box-shadow: var(--ck-shadow-panel); }
.rx-filters-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--ck-space-4); }
.rx-filters { position: sticky; top: var(--ck-space-2); max-height: calc(100vh - 12rem); }
.rx-filters:focus-visible { box-shadow: var(--ck-focus-ring); }
.rx-filters-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ck-space-2); }
.rx-close { display: none; }
.rx-section { padding: var(--ck-space-3) 0; border-top: 1px solid var(--ck-border); }
.rx-section:first-of-type { border-top: 0; }
.rx-count { font-weight: 600; margin-bottom: var(--ck-space-2); }
.rx-footer { flex: 0 0 auto; padding: var(--ck-space-3) var(--ck-space-4); background: var(--ck-surface); border-top: 1px solid var(--ck-border); border-radius: 0 0 var(--ck-radius-lg) var(--ck-radius-lg); display: grid; gap: var(--ck-space-2); }
.rx-dirty { display: inline-flex; width: fit-content; padding: 0.125rem 0.5rem; border-radius: 999px; background: var(--ck-warning-soft); color: var(--ck-warning-text); font-weight: 650; font-size: 0.8125rem; }

.rx-dates { display: grid; gap: 0.125rem; margin: var(--ck-space-2) 0; }
.rx-dates > div { display: flex; justify-content: space-between; gap: var(--ck-space-3); }
.rx-dates dt { color: var(--ck-slate); }
.rx-dates dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.rx-dates-row { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--ck-space-3); }
.rx-dates-row > div { display: block; }

.rx-checks { list-style: none; margin: var(--ck-space-2) 0 0; padding: 0; max-height: 14rem; overflow-y: auto; border: 1px solid var(--ck-border); border-radius: var(--ck-radius-md); }
.rx-checks li { padding: 0.35rem var(--ck-space-2); border-bottom: 1px solid var(--ck-border); }
.rx-checks li:last-child { border-bottom: 0; }
.rx-checks label { display: flex; align-items: flex-start; gap: var(--ck-space-2); cursor: pointer; }
.rx-checks input, .rx-opt input, .ab-check input { width: 1rem; height: 1rem; margin-top: 0.15rem; accent-color: var(--ck-primary); }
.rx-checks .rx-name { display: block; font-weight: 600; }
.rx-checks .ab-tiny { display: block; }

.rx-chips { display: flex; flex-wrap: wrap; gap: var(--ck-space-1); list-style: none; margin: var(--ck-space-2) 0; padding: 0; }
.rx-chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.5rem; border-radius: 999px; background: var(--ck-primary-soft); color: var(--ck-primary-pressed); font-size: 0.8125rem; font-weight: 500; }
.rx-chip button { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0 0.2rem; font: inherit; line-height: 1; }
.rx-chip button:focus-visible { outline: none; box-shadow: var(--ck-focus-ring); border-radius: 999px; }
.rx-applied { margin: 0 0 var(--ck-space-3); }

.rx-more { margin-top: var(--ck-space-3); }
.rx-more > summary { cursor: pointer; font-weight: 600; padding: 0.25rem 0; }
.rx-fieldset { margin: var(--ck-space-3) 0 0; padding: 0; border: 0; }
.rx-fieldset legend { padding: 0; font-size: 0.75rem; font-weight: 700; margin-bottom: 0.25rem; }
.rx-opt { display: flex; align-items: center; gap: var(--ck-space-2); padding: 0.15rem 0; cursor: pointer; }

/* Results */
.rx-summary { margin-bottom: var(--ck-space-3); }
.rx-title { font-size: 1.125rem; font-weight: 600; }
.rx-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--ck-space-4); margin-top: var(--ck-space-3); }
.rx-kpi .ab-metric { margin-top: 0.125rem; font-size: 1.5rem; }
.rx-gridbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ck-space-3); margin: var(--ck-space-3) 0 var(--ck-space-2); }
.rx-gridbar .ab-check { margin-top: 0; }
.rx-grid .e-grid .e-rowcell, .rx-grid .e-grid .e-headercell { font-variant-numeric: tabular-nums; }
.rx-total { margin-top: -1px; border-top: 2px solid var(--ck-border-strong); background: var(--ck-canvas); }
.rx-total td { border-bottom: 0; }
.rx-total td .ab-tiny { display: block; }
.rx-compare, .rx-preview, .rx-def { margin-top: var(--ck-space-4); }
.rx-def > summary { cursor: pointer; font-weight: 600; }
.rx-cmp-rows .rx-row-group td { background: var(--ck-primary-soft); font-weight: 650; }
.rx-cmp-rows .rx-row-subtotal td { font-weight: 650; border-top: 1px solid var(--ck-border-strong); }
.rx-cmp-rows .rx-row-total td { font-weight: 700; border-top: 2px solid var(--ck-border-strong); background: var(--ck-canvas); }
.rx-facts { display: grid; gap: var(--ck-space-2); margin: var(--ck-space-3) 0; }
.rx-facts > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--ck-space-3); }
.rx-facts dt { color: var(--ck-slate); font-weight: 600; }
.rx-facts dd { margin: 0; overflow-wrap: anywhere; }
.rx-manifest { margin: var(--ck-space-3) 0 var(--ck-space-1); color: var(--ck-slate); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.rx-state { background: var(--ck-surface); border: 1px dashed var(--ck-border-strong); border-radius: var(--ck-radius-lg); }
.rx-state span { display: block; margin-top: 0.25rem; }
.rx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.rx-loading { display: flex; align-items: center; gap: var(--ck-space-2); padding: var(--ck-space-3); color: var(--ck-slate); }
.rx-spinner { width: 1rem; height: 1rem; border: 2px solid var(--ck-border-strong); border-top-color: var(--ck-primary); border-radius: 50%; animation: rx-spin 0.8s linear infinite; }
.rx-stale { opacity: 0.55; pointer-events: none; }
@keyframes rx-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rx-spinner { animation: none; } }

.rx-backdrop { display: none; }

/* Narrow: the filter panel is a drawer opened from a button. */
@media (max-width: 899px) {
    .rx-layout { grid-template-columns: minmax(0, 1fr); }
    .rx-filter-toggle { display: inline-flex; }
    .rx-filters { display: none; }
    .rx-filters.rx-open { display: flex; max-height: none; position: fixed; z-index: calc(var(--ck-z-dialog) + 1); top: 0; bottom: 0; left: 0; width: min(24rem, 92vw); border-radius: 0; box-shadow: var(--ck-shadow-raised); }
    .rx-backdrop { display: block; position: fixed; inset: 0; z-index: var(--ck-z-dialog); background: rgb(21 35 43 / 40%); }
    .rx-close { display: inline-flex; }
    .rx-facts > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .reports-links { margin-left: 0; }
}

/* Background exports panel. */
.xj { margin-top: var(--ck-space-4); }
.xj-list { list-style: none; margin: var(--ck-space-3) 0 0; padding: 0; display: grid; gap: var(--ck-space-3); }
.xj-item { display: grid; gap: var(--ck-space-2); padding: var(--ck-space-3); border: 1px solid var(--ck-border, #d5dde2); border-radius: 0.5rem; }
.xj-top { display: flex; flex-wrap: wrap; gap: var(--ck-space-2); align-items: baseline; justify-content: space-between; }
.xj-bar { display: block; width: 100%; height: 0.625rem; border-radius: 999px; background: var(--ck-primary-soft); overflow: hidden; }
.xj-bar > span { display: block; height: 100%; background: var(--ck-primary); transition: width 0.3s ease; }
.xj-actions { display: flex; flex-wrap: wrap; gap: var(--ck-space-2); }
.xj-hist summary { cursor: pointer; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .xj-bar > span { transition: none; } }
.rx-cols { flex-basis: 100%; }
.rx-cols summary { cursor: pointer; font-weight: 600; }
.rx-collist { list-style: none; margin: var(--ck-space-2) 0 0; padding: 0; display: grid; gap: var(--ck-space-1, 0.25rem); }
.rx-collist li { display: flex; flex-wrap: wrap; gap: var(--ck-space-2); align-items: center; }
.rx-collist li > label { flex: 1 1 10rem; }

/* Evidence: the records behind one row. */
.rx-evidence { margin-top: var(--ck-space-4); }
.rx-evidence-head { display: flex; flex-wrap: wrap; gap: var(--ck-space-2); align-items: center; justify-content: space-between; }
.rx-evidence-head h2:focus-visible { outline: none; box-shadow: var(--ck-focus-ring); border-radius: 0.25rem; }
.rx-ev-pager { align-items: center; }
.rx-ev-btn:focus-visible { outline: none; box-shadow: var(--ck-focus-ring); }
.rx-ev-btn { min-height: 1.5rem; padding: 0 0.5rem; font-size: 0.8125rem; line-height: 1.4; }
.rx-footer .ab-btn[aria-disabled="true"] { opacity: 0.55; cursor: default; }
.rx-actions button.e-btn.rx-export:focus-visible, .rx-actions .rx-export.e-btn:focus-visible { outline: none; box-shadow: var(--ck-focus-ring) !important; }

/* Period notes, targets and flags, the year-on-year matrix and the chart (Phase 1B-2 enhancements). */
.rx-notes { margin-top: var(--ck-space-3); padding-top: var(--ck-space-3); border-top: 1px solid var(--ck-border); }
.rx-notes-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ck-space-2); }
.rx-notes-head h3 { margin: 0; }
.rx-note-list { list-style: none; margin: var(--ck-space-2) 0 0; padding: 0; display: grid; gap: var(--ck-space-2); }
.rx-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ck-space-2); padding: 0.4rem var(--ck-space-3); border-left: 4px solid var(--ck-warning); background: var(--ck-warning-soft); color: var(--ck-warning-text); border-radius: var(--ck-radius-md); }
.rx-note-text { flex: 1 1 16rem; font-weight: 500; }
.rx-note-actions, .rx-rule-actions { display: inline-flex; flex-wrap: wrap; gap: var(--ck-space-1); }
.rx-note-actions .ab-btn, .rx-rule-actions .ab-btn { min-height: 1.75rem; padding: 0 0.6rem; font-size: 0.8125rem; }
.rx-note-dates { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--ck-space-3); }
.rx-note-quote { padding: var(--ck-space-2) var(--ck-space-3); border-left: 4px solid var(--ck-border-strong); background: var(--ck-canvas); }
.rx-dialog .e-dlg-footer-content, .rx-dialog .e-footer-content { display: flex; flex-wrap: wrap; gap: var(--ck-space-2); justify-content: flex-end; }
.rx-targets { margin: var(--ck-space-2) 0; padding: var(--ck-space-2) var(--ck-space-3); border: 1px solid var(--ck-border); border-radius: var(--ck-radius-md); background: var(--ck-surface); }
.rx-targets > summary { cursor: pointer; font-weight: 600; }
.rx-targets > summary:focus-visible { outline: none; box-shadow: var(--ck-focus-ring); border-radius: 0.25rem; }
.rx-view-toggle { display: inline-flex; gap: 0; }
.rx-view-toggle .ab-btn:first-child { border-radius: var(--ck-radius-md) 0 0 var(--ck-radius-md); }
.rx-view-toggle .ab-btn:last-child { border-radius: 0 var(--ck-radius-md) var(--ck-radius-md) 0; margin-left: -1px; }
.rx-flag-summary { display: flex; flex-wrap: wrap; gap: var(--ck-space-2); align-items: baseline; margin: var(--ck-space-2) 0; padding: var(--ck-space-2) var(--ck-space-3); border-left: 4px solid var(--ck-warning); background: var(--ck-warning-soft); color: var(--ck-warning-text); border-radius: var(--ck-radius-md); }
.rx-flag-example::after { content: ";"; }
.rx-flag-example:last-of-type::after { content: ""; }
.rx-flag { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0 0.4rem; border-radius: var(--ck-radius-sm, 0.25rem); white-space: nowrap; }
.rx-flag-icon { font-weight: 800; font-size: 0.75rem; }
.rx-flag-value { font-weight: 700; }
.rx-flag-text { font-size: 0.75rem; font-weight: 600; }
.rx-flag-warning, .rx-flag-info { background: var(--ck-warning-soft); color: var(--ck-warning-text); box-shadow: inset 0 0 0 1px var(--ck-warning); }
.rx-flag-critical { background: var(--ck-critical-soft); color: var(--ck-critical-text); box-shadow: inset 0 0 0 1px var(--ck-critical); }
.rx-flag-info { background: var(--ck-primary-soft); color: var(--ck-primary-pressed); box-shadow: inset 0 0 0 1px var(--ck-primary); }
.rx-cell-ev { display: inline-flex; align-items: center; min-height: 1.25rem; line-height: 1.25rem; white-space: nowrap; border: 0; background: transparent; padding: 0 0.15rem; font: inherit; color: var(--ck-primary-hover); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; border-radius: 0.25rem; font-variant-numeric: tabular-nums; }
.rx-cell-ev:hover { background: var(--ck-primary-soft); }
.rx-cell-ev:focus-visible { outline: none; box-shadow: var(--ck-focus-ring); }
.rx-chart { margin: var(--ck-space-3) 0 0; padding: var(--ck-space-3); border: 1px solid var(--ck-border); border-radius: var(--ck-radius-lg); background: var(--ck-surface); }
.rx-chart figcaption { margin-top: var(--ck-space-2); color: var(--ck-slate); font-size: 0.8125rem; }
.rx-chart-notes h3 { margin-top: var(--ck-space-3); }
.rx-chart-notes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.rx-chart-swatch { display: inline-block; width: 0.75rem; height: 0.75rem; margin-right: 0.4rem; background: var(--ck-warning); opacity: 0.6; border: 1px solid var(--ck-warning-text); vertical-align: -1px; }
@media (max-width: 899px) { .rx-flag { white-space: normal; } }
.rx-chart svg text, .rx-chart svg tspan { font-family: var(--ck-font) !important; }

/* Reports page: a quiet, scannable report list beside the report. Same card surface and tokens as the rest of the application. */
.reports-layout { grid-template-columns: 19rem minmax(0, 1fr); gap: var(--ck-space-3); }
.reports-layout .reports-list { padding: 0; border-color: var(--ck-border); border-radius: var(--ck-radius-lg); background: var(--ck-surface); max-height: calc(100vh - 11rem); }
.reports-layout .reports-main { border-color: var(--ck-border); border-radius: var(--ck-radius-lg); padding: var(--ck-space-4); background: var(--ck-surface); }
.reports-filter { position: sticky; top: 0; z-index: var(--ck-z-raised); padding: var(--ck-space-2); border-bottom: 1px solid var(--ck-border); background: var(--ck-surface); }
.reports-filter input { width: 100%; min-height: var(--ck-control-sm); padding: 0 var(--ck-space-3); border: 1px solid var(--ck-border-strong); border-radius: var(--ck-radius-md); background: var(--ck-canvas); color: var(--ck-ink); font: inherit; font-size: 0.875rem; }
.reports-filter input:focus-visible { outline: none; box-shadow: var(--ck-focus-ring); border-color: var(--ck-primary); background: var(--ck-surface); }
.reports-none { margin: 0; padding: var(--ck-space-3); color: var(--ck-slate); font-size: 0.875rem; }
.reports-list .e-treeview { padding: var(--ck-space-1) var(--ck-space-2) var(--ck-space-2); }
.reports-list .e-treeview .e-list-item { margin: 0; }
.reports-list .e-treeview .e-list-text { font-size: 0.8125rem; line-height: 1.3; color: var(--ck-ink); }
.reports-list .e-treeview .e-level-1 > .e-text-content .e-list-text { padding-block: 0.3rem; }
/* Category headings read as labels; the reports under them are indented rows. */
.reports-list .e-treeview .e-level-1 > .e-text-content { margin-top: var(--ck-space-2); }
.reports-list .e-treeview .e-level-1 > .e-text-content .e-list-text { color: var(--ck-slate); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.reports-list .e-treeview .e-level-2 > .e-text-content { border-radius: var(--ck-radius-md); }
.reports-list .e-treeview .e-level-2 > .e-text-content .e-list-text { padding-block: 0.25rem; }
.reports-list .e-treeview .e-level-2 > .e-fullrow:hover { background: var(--ck-canvas); }
.reports-layout .reports-list .e-treeview .e-list-item.e-active > .e-fullrow { background: var(--ck-primary-soft); box-shadow: inset 3px 0 0 var(--ck-primary); }
.reports-layout .reports-list .e-treeview .e-list-item.e-active > .e-text-content .e-list-text { color: var(--ck-primary-hover); font-weight: 650; }
/* Quieter links to the other report tools: one row under the title, not a second competing menu. */
.page-header .reports-links a { padding: 0.25rem var(--ck-space-2); color: var(--ck-slate); font-weight: 500; }
.page-header .reports-links a:hover { color: var(--ck-ink); }
@media (max-width: 900px) { .reports-layout { grid-template-columns: minmax(0, 1fr); } .reports-layout .reports-list { max-height: 20rem; } }