/* Canton Pace: app styles, all scoped under .cp-app. Colours come from the site's own tokens (custom.css),
   so light and dark mode follow the site toggle (body.dark-mode). */
.cp-app {
    --cp-subject: var(--pv-accent, #8a5a00);
    --cp-muted: var(--gray-600, #5b6472);
    --cp-line: var(--line, #dde4ee);
    --cp-surface: var(--surface, #f6f8fa);
    --cp-ink: var(--ink, #16233a);
    --cp-legend-line: #8d99ab;
}
body.dark-mode .cp-app {
    --cp-muted: #b8c1cf;
    --cp-ink: #e8ecf3;
    --cp-legend-line: #7d8799;
}
.cp-app table { font-variant-numeric: tabular-nums; }

/* search + tabs */
.cp-app .cp-search { position: relative; flex: 1 1 18rem; max-width: 28rem; }
.cp-app .cp-search-list {
    position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin: .25rem 0 0; padding: .25rem 0;
    list-style: none; background: var(--paper, #fff); border: 1px solid var(--cp-line); border-radius: .5rem;
    box-shadow: var(--shadow, 0 .5rem 1.25rem rgba(13, 27, 42, .1)); max-height: 22rem; overflow-y: auto;
}
.cp-app .cp-search-list li { padding: .45rem .75rem; cursor: pointer; display: flex; justify-content: space-between; gap: .75rem; }
.cp-app .cp-search-list li[aria-selected="true"], .cp-app .cp-search-list li:hover { background: var(--cp-surface); outline: 2px solid var(--secondary, #0066cc); outline-offset: -2px; }
.cp-app .cp-search-list .cp-meta { color: var(--cp-muted); font-size: .875rem; white-space: nowrap; }
.cp-app .cp-tabs { display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
.cp-app .cp-tabs a { padding: .35rem .7rem; border-radius: 2rem; border: 1px solid var(--cp-line); text-decoration: none; font-weight: 600; font-size: .9rem; }
.cp-app .cp-tabs a[aria-current="page"] { background: var(--primary, #003366); border-color: var(--primary, #003366); color: #fff; }
body.dark-mode .cp-app .cp-tabs a[aria-current="page"] { background: #ffc107; border-color: #ffc107; color: #1a1a2e; }

.cp-app .cp-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }
.cp-app .cp-chips .btn[aria-pressed="true"], .cp-app .cp-chips .btn[aria-current="page"] { background: var(--primary, #003366); color: #fff; }
.cp-app .cp-controls { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; margin-bottom: .75rem; }
.cp-app .cp-controls label { font-weight: 600; font-size: .9rem; margin-right: .35rem; }
.cp-app .cp-controls select { width: auto; display: inline-block; }

/* tables */
.cp-app .table-responsive { border: 1px solid var(--cp-line); border-radius: .5rem; }
.cp-app .cp-table { margin-bottom: 0; font-size: .9rem; white-space: nowrap; }
.cp-app .cp-table th { font-size: .8rem; text-transform: uppercase; letter-spacing: .02em; }
.cp-app .cp-table th, .cp-app .cp-table td { padding: .4rem .55rem; vertical-align: middle; position: relative; }  /* contains the screen-reader-only text, so it can't widen the page */
.cp-app .cp-table td.num, .cp-app .cp-table th.num { text-align: right; }
.cp-app .cp-table .cp-sticky { position: sticky; left: 0; z-index: 1; background: var(--paper, #fff); }
body.dark-mode .cp-app .cp-table .cp-sticky { background: #252540; }
.cp-app .cp-table tr.cp-subject td { font-weight: 700; background: var(--pv-accent-soft, #fff7e0); }
.cp-app .cp-table tr.cp-subject td.cp-sticky { background: var(--pv-accent-soft, #fff7e0); }
body.dark-mode .cp-app .cp-table tr.cp-subject td, body.dark-mode .cp-app .cp-table tr.cp-subject td.cp-sticky { background: #3a3a1c; }
.cp-app .cp-table tr.cp-avg td { font-style: italic; border-top: 2px solid var(--cp-ink); }
.cp-app .cp-table tr.cp-rankrow td { font-size: .78rem; color: var(--cp-muted); }
.cp-app .cp-table button.cp-sort { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.cp-app .cp-table button.cp-sort:focus-visible { outline: 2px solid var(--secondary, #0066cc); outline-offset: 2px; }
.cp-app .cp-flag { font-size: .75rem; color: var(--cp-muted); font-weight: 400; }
.cp-app .cp-mark { font-size: .75rem; margin-left: .2rem; }

/* headline */
.cp-app .cp-card { border: 1px solid var(--cp-line); border-radius: .75rem; padding: 1rem 1.25rem; background: var(--cp-surface); }
.cp-app .cp-score { font-size: 3rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.cp-app .cp-score-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cp-muted); font-weight: 700; }
.cp-app .cp-verdict { font-weight: 700; }
.cp-app .cp-note { font-size: .875rem; color: var(--cp-muted); }

/* chart */
.cp-app .cp-chart { width: 100%; height: auto; display: block; }
.cp-app .cp-chart text { font-size: 12px; fill: var(--cp-muted); font-family: var(--font-sans, sans-serif); }
.cp-app .cp-chart .cp-axis { stroke: var(--cp-line); stroke-width: 1; }
.cp-app .cp-chart .cp-grid { stroke: var(--cp-line); stroke-width: 1; stroke-dasharray: 2 3; }
.cp-app .cp-chart .cp-l { fill: none; stroke: var(--cp-legend-line); stroke-width: 1.5; opacity: .85; }
.cp-app .cp-chart .cp-l.cp-after { stroke-dasharray: 4 4; opacity: .55; }
.cp-app .cp-chart .cp-s { fill: none; stroke: var(--cp-subject); stroke-width: 4; }
.cp-app .cp-chart .cp-dot { fill: var(--cp-subject); }
.cp-app .cp-chart .cp-n { stroke: var(--cp-ink); stroke-width: 1; stroke-dasharray: 3 3; }
.cp-app .cp-chart .cp-lab-s { fill: var(--cp-ink); font-weight: 700; }

.cp-app .cp-status:empty { display: none; }
.cp-app .cp-how { border-top: 1px solid var(--cp-line); padding-top: 1.5rem; }
.cp-app .cp-baked h2 { margin-top: 1.5rem; }

@media (max-width: 575.98px) {
    .cp-app .cp-score { font-size: 2.4rem; }
    .cp-app .cp-search { max-width: none; }
}